#moments-scroll-container.mobile-shop-storefront,
#shop-main-area,
#main-external-shop,
.mobile-shop-detail-modal,
.mobile-shop-product-form,
#addItemModal,
#shop-empty,
#shop-item-action-sheet,
#mobile-shop-owner-products-modal,
#mobile-shop-reviews-modal,
#mobile-shop-review-form-modal,
#mobile-shop-question-modal,
#mobile-shop-guest-products-modal,
.mobile-shop-dashboard-modal,
.mobile-shop-owner-orders-modal,
.mobile-shop-order-detail-sheet {
    --mobile-shop-bg: var(--page-background, var(--background-color, var(--background, #f5f5f3)));
    --mobile-shop-text: var(--text-primary, #111111);
    --mobile-shop-muted: var(--text-secondary, rgba(0, 0, 0, 0.58));
    --mobile-shop-subtle: var(--text-muted, rgba(0, 0, 0, 0.42));
    --mobile-shop-border: var(--border-color, rgba(0, 0, 0, 0.10));
    --mobile-shop-surface: var(--surface-color, rgba(0, 0, 0, 0.035));
    --mobile-shop-soft: var(--input-bg, rgba(0, 0, 0, 0.035));
    --mobile-shop-card-bg: rgba(0, 0, 0, 0.025);
    --mobile-shop-card-soft: rgba(0, 0, 0, 0.045);
    --mobile-shop-grid-line: rgba(17, 17, 17, 0.025);
    --mobile-shop-button-bg: rgba(0, 0, 0, 0.035);
    --mobile-shop-button-disabled: rgba(0, 0, 0, 0.045);
}

#moments-scroll-container.mobile-shop-storefront {
    scroll-snap-type: none !important;
    scroll-snap-stop: normal !important;
    background: var(--mobile-shop-bg) !important;
    color: var(--mobile-shop-text) !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
}

#shop-main-area,
#main-external-shop {
    background: var(--mobile-shop-bg, var(--background-color)) !important;
    color: var(--mobile-shop-text, var(--text-primary)) !important;
}

[data-theme="dark"] #moments-scroll-container.mobile-shop-storefront,
[data-theme="dark"] #shop-main-area,
[data-theme="dark"] #main-external-shop,
[data-theme="dark"] .mobile-shop-detail-modal,
[data-theme="dark"] .mobile-shop-product-form,
[data-theme="dark"] #addItemModal,
[data-theme="dark"] #shop-empty,
[data-theme="dark"] #shop-item-action-sheet,
[data-theme="dark"] #mobile-shop-owner-products-modal,
[data-theme="dark"] #mobile-shop-reviews-modal,
[data-theme="dark"] #mobile-shop-review-form-modal,
[data-theme="dark"] #mobile-shop-question-modal,
[data-theme="dark"] #mobile-shop-guest-products-modal,
[data-theme="dark"] .mobile-shop-dashboard-modal,
[data-theme="dark"] .mobile-shop-owner-orders-modal,
[data-theme="dark"] .mobile-shop-order-detail-sheet,
[data-theme="dark-accent"] #moments-scroll-container.mobile-shop-storefront,
[data-theme="dark-accent"] #shop-main-area,
[data-theme="dark-accent"] #main-external-shop,
[data-theme="dark-accent"] .mobile-shop-detail-modal,
[data-theme="dark-accent"] .mobile-shop-product-form,
[data-theme="dark-accent"] #addItemModal,
[data-theme="dark-accent"] #shop-empty,
[data-theme="dark-accent"] #shop-item-action-sheet,
[data-theme="dark-accent"] #mobile-shop-owner-products-modal,
[data-theme="dark-accent"] #mobile-shop-reviews-modal,
[data-theme="dark-accent"] #mobile-shop-review-form-modal,
[data-theme="dark-accent"] #mobile-shop-question-modal,
[data-theme="dark-accent"] #mobile-shop-guest-products-modal,
[data-theme="dark-accent"] .mobile-shop-dashboard-modal,
[data-theme="dark-accent"] .mobile-shop-owner-orders-modal,
[data-theme="dark-accent"] .mobile-shop-order-detail-sheet {
    --mobile-shop-bg: #050505;
    --mobile-shop-text: #f7f7f7;
    --mobile-shop-muted: rgba(247, 247, 247, 0.68);
    --mobile-shop-subtle: rgba(247, 247, 247, 0.45);
    --mobile-shop-border: rgba(255, 255, 255, 0.12);
    --mobile-shop-surface: rgba(255, 255, 255, 0.075);
    --mobile-shop-soft: rgba(255, 255, 255, 0.065);
    --mobile-shop-card-bg: rgba(255, 255, 255, 0.045);
    --mobile-shop-card-soft: rgba(255, 255, 255, 0.065);
    --mobile-shop-grid-line: rgba(255, 255, 255, 0.035);
    --mobile-shop-button-bg: rgba(255, 255, 255, 0.075);
    --mobile-shop-button-disabled: rgba(255, 255, 255, 0.05);
}

[data-theme="dark-accent"] #moments-scroll-container.mobile-shop-storefront,
[data-theme="dark-accent"] #shop-main-area,
[data-theme="dark-accent"] #main-external-shop,
[data-theme="dark-accent"] .mobile-shop-detail-modal,
[data-theme="dark-accent"] .mobile-shop-product-form,
[data-theme="dark-accent"] #addItemModal,
[data-theme="dark-accent"] #shop-empty,
[data-theme="dark-accent"] #shop-item-action-sheet,
[data-theme="dark-accent"] #mobile-shop-owner-products-modal,
[data-theme="dark-accent"] #mobile-shop-reviews-modal,
[data-theme="dark-accent"] #mobile-shop-review-form-modal,
[data-theme="dark-accent"] #mobile-shop-question-modal,
[data-theme="dark-accent"] #mobile-shop-guest-products-modal,
[data-theme="dark-accent"] .mobile-shop-dashboard-modal,
[data-theme="dark-accent"] .mobile-shop-owner-orders-modal,
[data-theme="dark-accent"] .mobile-shop-order-detail-sheet {
    --mobile-shop-bg: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 9%, #050505 91%);
    --mobile-shop-surface: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 18%, rgba(255, 255, 255, 0.07));
    --mobile-shop-soft: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 13%, rgba(255, 255, 255, 0.06));
    --mobile-shop-border: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 22%, rgba(255, 255, 255, 0.13));
}

[data-theme="light"] #moments-scroll-container.mobile-shop-storefront,
[data-theme="light"] #shop-main-area,
[data-theme="light"] #main-external-shop,
[data-theme="light"] .mobile-shop-detail-modal,
[data-theme="light"] .mobile-shop-product-form,
[data-theme="light"] #addItemModal,
[data-theme="light"] #shop-empty,
[data-theme="light"] #shop-item-action-sheet,
[data-theme="light"] #mobile-shop-owner-products-modal,
[data-theme="light"] #mobile-shop-reviews-modal,
[data-theme="light"] #mobile-shop-review-form-modal,
[data-theme="light"] #mobile-shop-question-modal,
[data-theme="light"] #mobile-shop-guest-products-modal,
[data-theme="light"] .mobile-shop-dashboard-modal,
[data-theme="light"] .mobile-shop-owner-orders-modal,
[data-theme="light"] .mobile-shop-order-detail-sheet {
    --mobile-shop-card-bg: rgba(0, 0, 0, 0.025);
    --mobile-shop-card-soft: rgba(0, 0, 0, 0.04);
    --mobile-shop-grid-line: rgba(17, 17, 17, 0.025);
    --mobile-shop-button-bg: rgba(0, 0, 0, 0.035);
    --mobile-shop-button-disabled: rgba(0, 0, 0, 0.045);
}

[data-theme="light-accent"] #moments-scroll-container.mobile-shop-storefront,
[data-theme="light-accent"] #shop-main-area,
[data-theme="light-accent"] #main-external-shop,
[data-theme="light-accent"] .mobile-shop-detail-modal,
[data-theme="light-accent"] .mobile-shop-product-form,
[data-theme="light-accent"] #addItemModal,
[data-theme="light-accent"] #shop-empty,
[data-theme="light-accent"] #shop-item-action-sheet,
[data-theme="light-accent"] #mobile-shop-owner-products-modal,
[data-theme="light-accent"] #mobile-shop-reviews-modal,
[data-theme="light-accent"] #mobile-shop-review-form-modal,
[data-theme="light-accent"] #mobile-shop-question-modal,
[data-theme="light-accent"] #mobile-shop-guest-products-modal,
[data-theme="light-accent"] .mobile-shop-dashboard-modal,
[data-theme="light-accent"] .mobile-shop-owner-orders-modal,
[data-theme="light-accent"] .mobile-shop-order-detail-sheet {
    --mobile-shop-bg: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 5%, #ffffff 95%);
    --mobile-shop-soft: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 7%, #ffffff 93%);
    --mobile-shop-card-bg: rgba(255, 255, 255, 0.88);
    --mobile-shop-card-soft: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 8%, #ffffff 92%);
    --mobile-shop-grid-line: rgba(17, 17, 17, 0.025);
    --mobile-shop-surface: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 6%, #ffffff 94%);
    --mobile-shop-button-bg: rgba(255, 255, 255, 0.78);
    --mobile-shop-button-disabled: rgba(5, 5, 5, 0.045);
    --mobile-shop-border: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, rgba(5, 5, 5, 0.12));
}

[data-theme="light"] .shop-main-area,
[data-theme="light"] .shop-main-area *,
[data-theme="light"] #shop-main-area,
[data-theme="light"] #shop-main-area *,
[data-theme="light"] #mobile-shop-grid,
[data-theme="light"] #mobile-shop-grid *,
[data-theme="light"] .shop-item,
[data-theme="light"] .shop-item *,
[data-theme="light"] .shop-item-name,
[data-theme="light"] .shop-item-description,
[data-theme="light"] .shop-item-price,
[data-theme="light"] .shop-item-content,
[data-theme="light"] .shop-item-content *,
[data-theme="light-accent"] .shop-main-area,
[data-theme="light-accent"] .shop-main-area *,
[data-theme="light-accent"] #shop-main-area,
[data-theme="light-accent"] #shop-main-area *,
[data-theme="light-accent"] #mobile-shop-grid,
[data-theme="light-accent"] #mobile-shop-grid *,
[data-theme="light-accent"] .shop-item,
[data-theme="light-accent"] .shop-item *,
[data-theme="light-accent"] .shop-item-name,
[data-theme="light-accent"] .shop-item-description,
[data-theme="light-accent"] .shop-item-price,
[data-theme="light-accent"] .shop-item-content,
[data-theme="light-accent"] .shop-item-content * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

[data-theme="light"] #buyItemModal,
[data-theme="light"] #buyItemModal *,
[data-theme="light-accent"] #buyItemModal,
[data-theme="light-accent"] #buyItemModal *,
[data-theme="light"] .checkout-modal,
[data-theme="light"] .checkout-modal *,
[data-theme="light-accent"] .checkout-modal,
[data-theme="light-accent"] .checkout-modal *,
[data-theme="light"] [id*="checkout"],
[data-theme="light"] [id*="checkout"] *,
[data-theme="light-accent"] [id*="checkout"],
[data-theme="light-accent"] [id*="checkout"] *,
[data-theme="light"] #shop-item-detail-modal,
[data-theme="light"] #shop-item-detail-modal *,
[data-theme="light-accent"] #shop-item-detail-modal,
[data-theme="light-accent"] #shop-item-detail-modal * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

#moments-scroll-container::-webkit-scrollbar {
    display: none;
}

.mobile-shop-store,
.mobile-shop-store * {
    box-sizing: border-box;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

.mobile-shop-store .fa,
.mobile-shop-store .fas,
.mobile-shop-store .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

	                .mobile-shop-store {
	                    min-height: 100%;
	                    padding: 8px 16px 0;
	                    background: var(--mobile-shop-bg);
	                    color: var(--mobile-shop-text);
	                }

.mobile-shop-store-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 0 0 16px;
}

.mobile-shop-store-title {
    min-width: 0;
    text-align: left;
}

	                .mobile-shop-store-kicker {
	                    display: block;
	                    margin: 0 0 4px;
	                    color: var(--mobile-shop-subtle);
    font-size: 10px;
    line-height: 1;
    font-weight: 780;
    text-transform: uppercase;
}

	                .mobile-shop-store-header h1 {
	                    margin: 0;
	                    color: var(--mobile-shop-text);
    font-size: 30px;
    line-height: 0.98;
    font-weight: 790;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

	                .mobile-shop-store-header button {
    width: 42px;
    height: 42px;
    border-radius: 999px;
	                    border: 1px solid var(--mobile-shop-border);
	                    background: var(--mobile-shop-button-bg);
	                    color: var(--mobile-shop-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-shop-header-spacer {
    width: 42px;
    height: 42px;
}

.mobile-shop-category-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 16px;
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
    scrollbar-width: none;
}

.mobile-shop-category-strip::-webkit-scrollbar {
    display: none;
}

	                .mobile-shop-category-strip button {
    min-height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 999px;
	                    border: 1px solid var(--mobile-shop-border);
	                    background: var(--mobile-shop-button-bg);
	                    color: var(--mobile-shop-text);
    font-size: 12px;
    font-weight: 760;
}

		                .mobile-shop-category-strip button.active {
		                    background: var(--mobile-shop-surface);
		                    border-color: color-mix(in srgb, var(--mobile-shop-text) 16%, transparent);
		                }

	                .mobile-shop-category-strip strong {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
	                    background: var(--mobile-shop-card-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.mobile-shop-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 12px;
}

	                .mobile-shop-count-row strong {
	                    color: var(--mobile-shop-text);
    font-size: 17px;
    line-height: 1;
    font-weight: 760;
}

	                .mobile-shop-count-row span {
	                    color: var(--mobile-shop-muted);
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.mobile-shop-hero {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    margin: 2px 0 20px;
}

	                .mobile-shop-hero-media {
    position: relative;
    min-height: min(78vw, 370px);
    border-radius: 16px;
	                    background:
	                        linear-gradient(var(--mobile-shop-grid-line) 1px, transparent 1px),
	                        linear-gradient(90deg, var(--mobile-shop-grid-line) 1px, transparent 1px),
	                        var(--mobile-shop-card-soft);
    background-size: 14px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
	                    border: 1px solid var(--mobile-shop-border);
}

.mobile-shop-hero-media img,
.mobile-shop-hero-media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

	                .mobile-shop-hero-mark {
    width: 72px;
    min-height: 88px;
    border-radius: 18px;
	                    background: var(--mobile-shop-surface);
	                    border: 1px solid var(--mobile-shop-border);
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 12px;
	                    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
	                    color: var(--mobile-shop-text);
    font-size: 11px;
    font-weight: 760;
    text-align: center;
}

.mobile-shop-hero-mark img {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
}

.mobile-shop-hero-copy {
    padding: 16px 2px 0;
    display: grid;
    gap: 12px;
}

	                .mobile-shop-hero-meta {
    display: flex;
    justify-content: space-between;
    gap: 14px;
	                    color: var(--mobile-shop-muted);
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
}

	                .mobile-shop-hero-copy h2 {
	                    margin: 0;
	                    color: var(--mobile-shop-text);
    font-size: 36px;
    line-height: 0.96;
    font-weight: 790;
    letter-spacing: 0 !important;
}

	                .mobile-shop-hero-copy p {
	                    margin: 0;
	                    color: var(--mobile-shop-muted);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 560;
}

.mobile-shop-policy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

	                .mobile-shop-policy-row span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: 999px;
	                    border: 1px solid var(--mobile-shop-border);
	                    background: var(--mobile-shop-card-bg);
	                    color: var(--mobile-shop-muted);
    font-size: 11px;
    font-weight: 720;
}

.mobile-shop-hero-footer {
    display: grid;
    grid-template-columns: 1fr repeat(3, auto);
    gap: 8px;
    align-items: center;
    padding-top: 2px;
    border-top: 0;
}

	                .mobile-shop-hero-footer strong {
	                    color: var(--mobile-shop-text);
    font-size: 26px;
    line-height: 1;
    font-weight: 790;
}

	                .mobile-shop-action-btn,
	                .mobile-shop-icon-btn {
    height: 38px;
    border-radius: 999px;
	                    border: 1px solid var(--mobile-shop-border);
	                    background: var(--mobile-shop-button-bg);
	                    color: var(--mobile-shop-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 780;
    box-shadow: none;
}

	                .mobile-shop-action-btn {
	                    min-width: 96px;
	                    padding: 0 16px;
	                    color: var(--mobile-shop-text);
	                    background: var(--mobile-shop-button-bg);
	                    border-color: var(--mobile-shop-border);
	                }

.mobile-shop-icon-btn {
    width: 38px;
    flex: 0 0 38px;
}

	                .mobile-shop-action-btn:disabled {
	                    color: var(--mobile-shop-subtle);
	                    background: var(--mobile-shop-button-disabled);
	                    border-color: var(--mobile-shop-border);
	                }

.mobile-shop-product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 13px;
}

	                .mobile-shop-product-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
	                    color: var(--mobile-shop-text);
	                }

	                .mobile-shop-product-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.08;
	                    background: var(--mobile-shop-card-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
	                    border: 1px solid var(--mobile-shop-border);
}

.mobile-shop-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

	                .mobile-shop-product-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
	                    color: var(--mobile-shop-subtle);
    font-size: 20px;
    text-align: center;
    padding: 14px;
    width: 100%;
    height: 100%;
	                    background:
	                        linear-gradient(var(--mobile-shop-grid-line) 1px, transparent 1px),
	                        linear-gradient(90deg, var(--mobile-shop-grid-line) 1px, transparent 1px);
    background-size: 12px 12px;
}

.mobile-shop-product-placeholder span {
    font-size: 11px;
    font-weight: 650;
}

	                .mobile-shop-product-status {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 9px;
    border-radius: 999px;
	                    background: var(--mobile-shop-surface);
	                    color: var(--mobile-shop-text);
    font-size: 11px;
    font-weight: 720;
}

.mobile-shop-product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    padding: 10px 2px 0;
}

	                .mobile-shop-product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
	                    color: var(--mobile-shop-muted);
    font-size: 11px;
    font-weight: 680;
}

.mobile-shop-product-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

	                .mobile-shop-product-card h2 {
	                    margin: 0;
	                    color: var(--mobile-shop-text);
    font-size: 14px;
    line-height: 1.16;
    font-weight: 760;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

	                .mobile-shop-product-card p {
	                    margin: 0;
	                    color: var(--mobile-shop-muted);
    font-size: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-shop-product-footer {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 7px;
    padding-top: 6px;
}

	                .mobile-shop-product-footer strong {
	                    color: var(--mobile-shop-text);
    font-size: 16px;
    line-height: 1;
    font-weight: 760;
}

	                .mobile-shop-product-footer button {
	                    height: 32px;
	                    min-width: 38px;
	                    padding: 0 11px;
	                    border-radius: 999px;
	                    border: 1px solid var(--mobile-shop-border);
	                    background: var(--mobile-shop-button-bg);
	                    color: var(--mobile-shop-text);
	                    font-size: 12px;
	                    font-weight: 760;
	                }

	                .mobile-shop-product-footer button:disabled {
	                    background: var(--mobile-shop-button-disabled);
	                    color: var(--mobile-shop-subtle);
	                    border-color: var(--mobile-shop-border);
	                }

.mobile-shop-studio-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
}

	                .mobile-shop-studio-strip div {
	                    padding: 10px 0;
	                    border-top: 1px solid var(--mobile-shop-border);
	                    border-bottom: 1px solid var(--mobile-shop-border);
	                }

	                .mobile-shop-studio-strip span {
	                    display: block;
	                    margin-bottom: 5px;
	                    color: var(--mobile-shop-subtle);
	                    font-size: 10px;
	                    line-height: 1;
	                    font-weight: 780;
    text-transform: uppercase;
}

	                .mobile-shop-studio-strip strong {
	                    color: var(--mobile-shop-text);
	                    font-size: 18px;
	                    line-height: 1;
	                    font-weight: 790;
}

.mobile-shop-store.is-owner .mobile-shop-store-header,
.mobile-shop-store.is-guest .mobile-shop-store-header {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
}

.mobile-shop-store.is-owner .mobile-shop-store-title,
.mobile-shop-store.is-guest .mobile-shop-store-title {
    text-align: left;
}

.mobile-shop-store.is-guest .mobile-shop-store-title {
    text-align: center;
}

.mobile-shop-store.is-owner .mobile-shop-store-header h1,
.mobile-shop-store.is-guest .mobile-shop-store-header h1 {
    line-height: 1.03;
    font-size: 31px;
    white-space: normal;
}

.mobile-shop-store.is-owner .mobile-shop-hero,
.mobile-shop-store.is-guest .mobile-shop-hero {
    grid-template-columns: 96px minmax(0, 1fr);
		                    gap: 14px;
		                    align-items: stretch;
		                    margin-bottom: 16px;
		                    padding: 12px 0;
	                    border-top: 1px solid var(--mobile-shop-border);
	                    border-bottom: 1px solid var(--mobile-shop-border);
}

.mobile-shop-store.is-owner .mobile-shop-hero-media,
.mobile-shop-store.is-guest .mobile-shop-hero-media {
    min-height: 0;
    height: 112px;
    border-radius: 12px;
}

.mobile-shop-store.is-owner .mobile-shop-hero-copy,
.mobile-shop-store.is-guest .mobile-shop-hero-copy {
    padding: 0;
    align-content: center;
}

.mobile-shop-store.is-owner .mobile-shop-hero-copy h2,
.mobile-shop-store.is-guest .mobile-shop-hero-copy h2 {
    font-size: 24px;
    line-height: 0.98;
}

.mobile-shop-store.is-owner .mobile-shop-hero-copy p,
.mobile-shop-store.is-guest .mobile-shop-hero-copy p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-shop-store.is-owner .mobile-shop-hero-meta,
.mobile-shop-store.is-guest .mobile-shop-hero-meta {
    margin-bottom: -2px;
}

.mobile-shop-store.is-owner .mobile-shop-hero-footer,
.mobile-shop-store.is-guest .mobile-shop-hero-footer {
    grid-template-columns: 1fr repeat(3, auto);
}

.mobile-shop-store.is-owner .mobile-shop-hero-footer strong,
.mobile-shop-store.is-guest .mobile-shop-hero-footer strong {
    font-size: 20px;
}

.mobile-shop-store.is-owner .mobile-shop-product-grid,
.mobile-shop-store.is-guest .mobile-shop-product-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-shop-store.is-owner .mobile-shop-product-card,
.mobile-shop-store.is-guest .mobile-shop-product-card {
    display: grid;
		                    grid-template-columns: 76px minmax(0, 1fr);
		                    min-height: 104px;
		                    padding: 10px 0;
		                    border-bottom: 1px solid var(--mobile-shop-border);
		                }

.mobile-shop-store.is-owner .mobile-shop-product-media,
.mobile-shop-store.is-guest .mobile-shop-product-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 84px;
    border-radius: 10px;
}

.mobile-shop-store.is-owner .mobile-shop-product-info,
.mobile-shop-store.is-guest .mobile-shop-product-info {
    padding: 0 0 0 12px;
}

.mobile-shop-store.is-owner .mobile-shop-product-footer {
    grid-template-columns: 1fr auto auto auto;
}

.mobile-shop-store.is-guest .mobile-shop-product-footer {
    grid-template-columns: 1fr auto auto;
}

	                .mobile-shop-store.is-guest .mobile-shop-product-footer button:first-of-type {
	                    min-width: 96px;
	                    color: var(--mobile-shop-text);
	                    background: var(--mobile-shop-button-bg);
	                    border-color: var(--mobile-shop-border);
	                }

.mobile-shop-store.is-owner .mobile-shop-product-card h2,
.mobile-shop-store.is-guest .mobile-shop-product-card h2 {
    font-size: 15px;
}

.mobile-shop-store.is-owner .mobile-shop-product-card p,
.mobile-shop-store.is-guest .mobile-shop-product-card p {
    -webkit-line-clamp: 1;
}

.mobile-shop-premium-store.is-guest {
    min-height: 100%;
    padding: 8px 16px 0;
    background: linear-gradient(180deg, var(--mobile-shop-bg), color-mix(in srgb, var(--mobile-shop-bg) 88%, var(--mobile-shop-card-soft)));
}

	                /* Scrolls away with the feed, the way Community's home does.
	                   Pinning it left a band of background across the top once the
	                   cards moved under it, and the 1px shadow drew a divider
	                   across that band. Community has no sticky anything. */
	                .mobile-shop-premium-store.is-guest .mobile-shop-store-header {
	                    position: relative;
	                    display: grid;
	                    grid-template-columns: 40px minmax(0, 1fr) 40px;
	                    align-items: center;
	                    gap: 8px;
	                    margin: 0 -16px;
	                    padding: 0 16px 12px;
	                    background: transparent;
	                    box-shadow: none;
	                }

.mobile-shop-premium-store.is-guest .mobile-shop-store-title {
    text-align: center;
    min-width: 0;
}

.mobile-shop-premium-store.is-guest .mobile-shop-store-header h1 {
    margin: 0;
    font-size: 15px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: 0.08em !important;
    white-space: nowrap;
    text-transform: none;
}

.mobile-shop-premium-store.is-guest .mobile-shop-header-back {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--mobile-shop-text);
    box-shadow: none;
    padding: 0;
    position: relative;
}

.mobile-shop-premium-store.is-guest .mobile-shop-header-back {
    justify-self: start;
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-category-strip {
	                    position: relative;
	                    gap: 9px;
	                    margin: 0 -16px 14px;
	                    padding: 4px 16px 11px;
	                    background: transparent;
	                    box-shadow: none;
	                }

.mobile-shop-premium-store.is-guest .mobile-shop-category-strip button {
    min-height: 34px;
    padding: 0 14px;
    background: color-mix(in srgb, var(--mobile-shop-button-bg) 76%, transparent);
    border-color: color-mix(in srgb, var(--mobile-shop-border) 74%, transparent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
    font-size: 12px;
    font-weight: 820;
}

.mobile-shop-premium-store.is-guest .mobile-shop-category-strip button.active {
    background: color-mix(in srgb, var(--mobile-shop-text) 9%, var(--mobile-shop-bg));
    color: var(--mobile-shop-text);
    border-color: color-mix(in srgb, var(--mobile-shop-text) 16%, transparent);
}

.mobile-shop-premium-store.is-guest .mobile-shop-category-strip button.active strong {
    background: color-mix(in srgb, var(--mobile-shop-text) 10%, transparent);
    color: inherit;
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-hero {
	                    position: relative;
	                    display: flex;
	                    flex-direction: column;
	                    gap: 0;
	                    margin: 0 0 16px;
	                    padding: 0;
	                    border: 1px solid color-mix(in srgb, var(--mobile-shop-border) 78%, transparent);
	                    border-radius: 22px;
	                    overflow: hidden;
	                    background:
	                        linear-gradient(180deg, color-mix(in srgb, var(--mobile-shop-card-bg) 62%, transparent), var(--mobile-shop-card-bg)),
	                        var(--mobile-shop-bg);
	                    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08);
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-hero-media {
	                    height: clamp(176px, 52vw, 218px);
	                    min-height: 176px;
	                    max-height: 218px;
	                    aspect-ratio: 16 / 10;
	                    border: 0;
	                    border-radius: 0;
	                    background:
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--mobile-shop-text) 6%, transparent), transparent 33%),
        linear-gradient(var(--mobile-shop-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mobile-shop-grid-line) 1px, transparent 1px),
        var(--mobile-shop-card-soft);
    background-size: auto, 14px 14px, 14px 14px, auto;
}

.mobile-shop-premium-store.is-guest .mobile-shop-hero-media::after,
.mobile-shop-premium-store.is-guest .mobile-shop-product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.10));
    opacity: 0.45;
}

.mobile-shop-premium-store.is-guest .mobile-shop-hero-media img,
.mobile-shop-premium-store.is-guest .mobile-shop-hero-media video {
    object-fit: cover;
    opacity: 0;
    transform: scale(1.018);
    transition: opacity 240ms ease, transform 460ms ease;
}

.mobile-shop-premium-store.is-guest .mobile-shop-hero-media img.is-loaded,
.mobile-shop-premium-store.is-guest .mobile-shop-hero-media video {
    opacity: 1;
    transform: scale(1);
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-hero-media img.is-portrait {
	                    object-fit: contain;
	                    padding: 14px;
	                    background: var(--mobile-shop-card-soft);
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-hero-mark {
	                    width: 82px;
	                    min-height: 92px;
	                    border-radius: 20px;
	                    background: color-mix(in srgb, var(--mobile-shop-bg) 90%, transparent);
	                    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.10);
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-hero-copy {
	                    padding: 14px 14px 13px;
	                    gap: 8px;
	                    background: color-mix(in srgb, var(--mobile-shop-bg) 94%, transparent);
	                    min-width: 0;
	                }

.mobile-shop-premium-store.is-guest .mobile-shop-hero-meta {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.06em !important;
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-hero-copy h2 {
	                    font-size: clamp(25px, 8vw, 34px);
	                    line-height: 0.94;
	                    font-weight: 900;
	                    max-width: 15ch;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-hero-copy p {
	                    font-size: 13px;
	                    line-height: 1.25;
	                    -webkit-line-clamp: 1;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-policy-row {
	                    display: none;
	                }

.mobile-shop-premium-store.is-guest .mobile-shop-policy-row::-webkit-scrollbar {
    display: none;
}

.mobile-shop-premium-store.is-guest .mobile-shop-policy-row span {
    flex: 0 0 auto;
    min-height: 28px;
    background: var(--mobile-shop-button-bg);
    font-size: 10px;
    font-weight: 820;
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-hero-footer {
	                    grid-template-columns: 1fr auto auto auto;
	                    gap: 8px;
	                    align-items: center;
	                    padding-top: 8px;
	                    border-top: 1px solid color-mix(in srgb, var(--mobile-shop-border) 72%, transparent);
	                }

.mobile-shop-premium-store.is-guest .mobile-shop-hero-footer strong {
    font-size: 23px;
    font-weight: 900;
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-action-btn {
	                    min-width: 112px;
	                    height: 40px;
	                    padding: 0 15px;
	                    background: color-mix(in srgb, var(--mobile-shop-text) 8%, var(--mobile-shop-bg));
	                    border-color: color-mix(in srgb, var(--mobile-shop-text) 16%, transparent);
	                    color: var(--mobile-shop-text);
	                    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
	                    white-space: nowrap;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-icon-btn {
	                    width: 40px;
	                    height: 40px;
	                    flex-basis: 40px;
	                    background: color-mix(in srgb, var(--mobile-shop-bg) 88%, transparent);
	                    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
	                }

.mobile-shop-premium-store.is-guest .mobile-shop-count-row {
    padding: 0 0 12px;
}

.mobile-shop-premium-store.is-guest .mobile-shop-count-row strong {
    font-size: 18px;
    font-weight: 900;
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-grid {
	                    display: grid;
	                    grid-template-columns: repeat(2, minmax(0, 1fr));
	                    gap: 10px;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-card {
	                    display: flex;
	                    min-height: 0;
	                    padding: 0;
	                    border: 1px solid color-mix(in srgb, var(--mobile-shop-border) 78%, transparent);
	                    border-radius: 17px;
	                    overflow: hidden;
	                    background: color-mix(in srgb, var(--mobile-shop-bg) 90%, var(--mobile-shop-card-bg));
	                    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
	                }

.mobile-shop-premium-store.is-guest .mobile-shop-product-media {
    height: auto;
    min-height: 0;
	                    aspect-ratio: 1 / 0.88;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--mobile-shop-text) 5%, transparent), transparent 36%),
        linear-gradient(var(--mobile-shop-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mobile-shop-grid-line) 1px, transparent 1px),
	                        color-mix(in srgb, var(--mobile-shop-card-soft) 86%, transparent);
	                    background-size: auto, 11px 11px, 11px 11px, auto;
}

.mobile-shop-premium-store.is-guest .mobile-shop-product-media img {
    object-fit: cover;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 220ms ease, transform 420ms ease;
}

.mobile-shop-premium-store.is-guest .mobile-shop-product-media img.is-loaded {
    opacity: 1;
    transform: scale(1);
}

.mobile-shop-premium-store.is-guest .mobile-shop-product-media img.is-portrait {
    object-fit: contain;
    padding: 10px;
    background: var(--mobile-shop-card-soft);
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-placeholder {
	                    background:
	                        radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--mobile-shop-text) 5%, transparent), transparent 28%),
	                        radial-gradient(circle at 20% 82%, color-mix(in srgb, var(--mobile-shop-text) 4%, transparent), transparent 30%),
	                        linear-gradient(var(--mobile-shop-grid-line) 1px, transparent 1px),
	                        linear-gradient(90deg, var(--mobile-shop-grid-line) 1px, transparent 1px);
	                    background-size: auto, auto, 12px 12px, 12px 12px;
		                    gap: 8px;
		                    padding: 12px;
		                    justify-content: center;
		                }

		                .mobile-shop-premium-store.is-guest .mobile-shop-placeholder-mark {
		                    width: 42px;
		                    height: 42px;
		                    border-radius: 14px;
	                    display: inline-flex;
	                    align-items: center;
	                    justify-content: center;
	                    background: color-mix(in srgb, var(--mobile-shop-bg) 90%, transparent);
	                    border: 1px solid color-mix(in srgb, var(--mobile-shop-border) 78%, transparent);
		                    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
	                    color: var(--mobile-shop-text);
		                    font-size: 13px;
	                    font-weight: 900;
	                    line-height: 1;
	                    overflow: hidden;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-placeholder-mark img {
	                    width: 100%;
	                    height: 100%;
	                    border-radius: inherit;
	                    object-fit: cover;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-placeholder-copy {
	                    display: flex;
	                    flex-direction: column;
	                    align-items: center;
	                    gap: 3px;
	                    max-width: 100%;
	                    text-align: center;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-placeholder-copy strong {
	                    max-width: 100%;
	                    color: var(--mobile-shop-text);
	                    font-size: 10px;
	                    line-height: 1;
	                    font-weight: 900;
	                    text-transform: uppercase;
	                    white-space: nowrap;
	                    overflow: hidden;
	                    text-overflow: ellipsis;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-placeholder-copy span {
	                    max-width: 100%;
	                    color: var(--mobile-shop-subtle);
	                    font-size: 9px;
	                    line-height: 1;
	                    font-weight: 800;
	                    white-space: nowrap;
	                    overflow: hidden;
	                    text-overflow: ellipsis;
	                }

.mobile-shop-premium-store.is-guest .mobile-shop-product-status {
    top: 8px;
    left: 8px;
    z-index: 2;
    background: color-mix(in srgb, var(--mobile-shop-bg) 90%, transparent);
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-info {
		                    padding: 9px 9px 10px;
		                    gap: 5px;
		                    min-height: 128px;
		                }

.mobile-shop-premium-store.is-guest .mobile-shop-product-meta {
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em !important;
}

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-card h2 {
	                    font-size: 13.5px;
	                    line-height: 1.08;
	                    font-weight: 900;
	                    letter-spacing: -0.01em !important;
	                    -webkit-line-clamp: 2;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-card p {
	                    min-height: 24px;
	                    font-size: 11px;
	                    line-height: 1.16;
	                    -webkit-line-clamp: 1;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-footer {
	                    grid-template-columns: 1fr auto auto;
	                    gap: 6px;
	                    padding-top: 6px;
	                    margin-top: auto;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-footer strong {
	                    font-size: 16px;
	                    line-height: 1;
	                    font-weight: 900;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-footer button {
	                    width: 32px;
	                    min-width: 32px;
	                    height: 32px;
	                    padding: 0;
	                    background: var(--mobile-shop-button-bg);
	                    color: var(--mobile-shop-text);
	                    border-color: color-mix(in srgb, var(--mobile-shop-border) 82%, transparent);
	                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.045);
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-footer button i {
	                    font-size: 11px;
	                    line-height: 1;
	                }

	                .mobile-shop-premium-store.is-guest .mobile-shop-product-footer button:first-of-type {
	                    width: 32px;
	                    min-width: 32px;
	                    padding: 0;
	                    background: color-mix(in srgb, var(--mobile-shop-text) 8%, var(--mobile-shop-bg));
	                    border-color: color-mix(in srgb, var(--mobile-shop-text) 14%, transparent);
	                }

/* Bottom nav clearance for the legacy/premium storefront grid. The catalog feed
   has its own list padding; this covers the two-column product-card feed. */
html body #moments-scroll-container.mobile-shop-storefront .mobile-shop-store,
html body.shop-active #moments-scroll-container.mobile-shop-storefront .mobile-shop-store {
    padding-top: 8px !important;
    padding-bottom: 0 !important;
}

html body #moments-scroll-container.mobile-shop-storefront .mobile-shop-product-grid,
html body.shop-active #moments-scroll-container.mobile-shop-storefront .mobile-shop-product-grid {
    padding-bottom: 240px !important;
    scroll-padding-bottom: 240px !important;
}

html body #moments-scroll-container.mobile-shop-storefront .mobile-shop-product-card:last-child,
html body.shop-active #moments-scroll-container.mobile-shop-storefront .mobile-shop-product-card:last-child {
    scroll-margin-bottom: 240px !important;
}


.mobile-shop-catalog-ticket-info {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin-top: 8px;
    color: var(--mobile-shop-muted);
    font-size: 12px;
    font-weight: 820;
    line-height: 1.25;
}

.mobile-shop-catalog-ticket-info span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#moments-scroll-container.mobile-shop-catalog-feed {
    bottom: 0 !important;
    padding: 0 !important;
    background: var(--background-color, #f6f4f0) !important;
    color: var(--text-primary, #111) !important;
    scroll-snap-type: y proximity !important;
    scroll-snap-stop: normal !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

.mobile-shop-catalog-store,
.mobile-shop-catalog-store * {
    box-sizing: border-box;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

.mobile-shop-catalog-store .fa,
.mobile-shop-catalog-store .fas,
.mobile-shop-catalog-store .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.mobile-shop-catalog-store {
    position: relative;
    min-height: 100%;
    padding: 6px 14px calc(132px + env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.92), transparent 28%),
        linear-gradient(180deg, rgba(246, 244, 240, 0.96), rgba(239, 237, 232, 0.94));
    color: var(--text-primary, #111);
}

.mobile-shop-catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 10px;
}

.mobile-shop-catalog-header div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mobile-shop-catalog-header span {
    color: var(--text-secondary, rgba(17, 17, 17, 0.58));
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.mobile-shop-catalog-header strong {
    color: var(--text-primary, #111);
    font-size: 22px;
    line-height: 1.04;
    font-weight: 950;
}

.mobile-shop-catalog-header-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.mobile-shop-catalog-header button {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 0;
    border-radius: 999px;
    background: var(--text-primary, #111);
    color: var(--background-color, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.mobile-shop-catalog-header .mobile-shop-catalog-filter-open {
    width: auto;
    min-width: 88px;
    padding: 0 14px;
    gap: 8px;
    background: color-mix(in srgb, var(--background-color, #fff) 88%, #fff);
    color: var(--text-primary, #111);
    border: 1px solid var(--border-color, rgba(17, 17, 17, 0.12));
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
    font-size: 12px;
    font-weight: 950;
}

.mobile-shop-catalog-header .mobile-shop-catalog-filter-open,
.mobile-shop-catalog-header .mobile-shop-catalog-filter-open * {
    color: var(--text-primary, #111) !important;
    -webkit-text-fill-color: var(--text-primary, #111) !important;
}

html body .mobile-shop-catalog-header .mobile-shop-catalog-add-btn,
html body .mobile-shop-catalog-header .mobile-shop-catalog-add-btn *,
html body .mobile-shop-catalog-header .mobile-shop-catalog-add-btn i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.mobile-shop-catalog-body {
    display: block;
}

.mobile-shop-catalog-products {
    min-width: 0;
}

.mobile-shop-catalog-filters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483504;
    display: grid;
    gap: 14px;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid var(--border-color, rgba(17, 17, 17, 0.12));
    background: var(--background-color, #fff);
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.22);
    transform: translateY(110%);
    transition: transform 180ms ease;
    pointer-events: auto;
}

.mobile-shop-catalog-store.is-filter-open .mobile-shop-catalog-filters {
    transform: translateY(0);
}

.mobile-shop-catalog-filter-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483503;
    background: rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.mobile-shop-catalog-store.is-filter-open .mobile-shop-catalog-filter-layer {
    opacity: 1;
    pointer-events: auto;
}

.mobile-shop-catalog-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-shop-catalog-filter-head strong {
    color: var(--text-primary, #111);
    font-size: 17px;
    font-weight: 950;
}

.mobile-shop-catalog-filter-head button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color, rgba(17, 17, 17, 0.12));
    border-radius: 999px;
    background: color-mix(in srgb, var(--background-color, #fff) 90%, #fff);
    color: var(--text-primary, #111);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-shop-catalog-filter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mobile-shop-catalog-filters::-webkit-scrollbar {
    display: none;
}

.mobile-shop-catalog-filter-options button {
    width: 100%;
    min-height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(17, 17, 17, 0.12));
    background: color-mix(in srgb, var(--background-color, #fff) 88%, #fff);
    color: var(--text-secondary, rgba(17, 17, 17, 0.62));
    font-size: 12px;
    line-height: 1.02;
    font-weight: 900;
    text-align: left;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.mobile-shop-catalog-filter-options button span {
    max-width: 100%;
    display: block;
    overflow-wrap: anywhere;
}

.mobile-shop-catalog-filter-options button.active {
    background: var(--text-primary, #111);
    color: var(--background-color, #fff);
    border-color: var(--text-primary, #111);
}

html body .mobile-shop-catalog-filter-options button.active,
html body .mobile-shop-catalog-filter-options button.active span,
html body .mobile-shop-catalog-filter-options button.active strong {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.mobile-shop-catalog-filter-options strong {
    min-width: 22px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 11px;
}

.mobile-shop-catalog-filter-options button.active strong {
    background: rgba(255, 255, 255, 0.16);
}

.mobile-shop-catalog-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 34px;
}

.mobile-shop-catalog-card {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    gap: 12px;
    min-height: min(46dvh, 430px);
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56)),
        color-mix(in srgb, var(--background-color, #fff) 90%, #fff);
    color: var(--text-primary, #111);
    box-shadow:
        0 22px 48px rgba(17, 17, 17, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mobile-shop-catalog-thumb {
    width: 100%;
    min-height: 220px;
    align-self: stretch;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 58%, rgba(0, 0, 0, 0.10), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.34));
    border: 1px solid rgba(255, 255, 255, 0.58);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-shop-catalog-image {
    width: 112%;
    height: 112%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.16));
}

.mobile-shop-catalog-thumb .mobile-shop-hero-mark {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(17, 17, 17, 0.52);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.mobile-shop-catalog-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

.mobile-shop-catalog-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-secondary, rgba(17, 17, 17, 0.58));
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.mobile-shop-catalog-meta span,
.mobile-shop-catalog-meta strong {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-catalog-meta strong {
    color: #28b463;
    text-transform: none;
}

.mobile-shop-catalog-meta strong.is-sold-out {
    color: #ff453a;
}

.mobile-shop-catalog-copy h2 {
    margin: 0;
    color: var(--text-primary, #111);
    font-size: 21px;
    line-height: 1.04;
    font-weight: 950;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-shop-catalog-price {
    color: var(--text-primary, #111);
    font-size: 26px;
    line-height: 1;
    font-weight: 950;
}

.mobile-shop-catalog-copy p {
    margin: 0;
    color: var(--text-secondary, rgba(17, 17, 17, 0.64));
    font-size: 13px;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-shop-catalog-variant-summary {
    color: var(--text-secondary, rgba(17, 17, 17, 0.68));
    font-size: 12px;
    line-height: 1.15;
    font-weight: 900;
}

.mobile-shop-catalog-card .mobile-shop-variant-chips {
    display: grid;
    gap: 4px;
    margin-top: 0;
}

.mobile-shop-catalog-card .mobile-shop-variant-chips div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
}

.mobile-shop-catalog-card .mobile-shop-variant-chips strong {
    flex: 0 0 auto;
    color: var(--text-secondary, rgba(17, 17, 17, 0.58));
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
}

.mobile-shop-catalog-card .mobile-shop-variant-chips span,
.mobile-shop-catalog-card .mobile-shop-variant-chips button {
    max-width: 82px;
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--border-color, rgba(17, 17, 17, 0.12));
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-primary, #111);
    font-size: 9px;
    line-height: 1;
    font-weight: 850;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-catalog-card .mobile-shop-variant-chips button {
    cursor: pointer;
}

.mobile-shop-catalog-card .mobile-shop-variant-chips button.is-selected:not(.mobile-shop-variant-color-swatch) {
    background: #111;
    border-color: #111;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.mobile-shop-catalog-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 6px;
}

.mobile-shop-catalog-action,
.mobile-shop-catalog-icon-action {
    min-height: 34px;
    border: 1px solid var(--border-color, rgba(17, 17, 17, 0.12));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-primary, #111);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
}

.mobile-shop-catalog-action {
    padding: 0 12px;
}

.mobile-shop-catalog-icon-action {
    width: 34px;
    flex: 0 0 34px;
    padding: 0;
}

.mobile-shop-catalog-action.is-primary {
    background: var(--text-primary, #111);
    color: var(--background-color, #fff);
    border-color: var(--text-primary, #111);
}

html body .mobile-shop-catalog-action.is-primary,
html body .mobile-shop-catalog-action.is-primary *,
html body .mobile-shop-catalog-action.is-primary i,
html body .mobile-shop-catalog-action.is-primary span {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.mobile-shop-catalog-action:disabled {
    opacity: 0.42;
}

.mobile-shop-catalog-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-secondary, rgba(17, 17, 17, 0.58));
    text-align: center;
}

.mobile-shop-catalog-empty i {
    font-size: 34px;
}

.mobile-shop-catalog-empty strong {
    font-size: 15px;
    font-weight: 900;
}

[data-theme="dark"] #moments-scroll-container.mobile-shop-catalog-feed,
[data-theme="dark-accent"] #moments-scroll-container.mobile-shop-catalog-feed {
    background: var(--background-color, #050505) !important;
}

[data-theme="dark"] .mobile-shop-catalog-store,
[data-theme="dark-accent"] .mobile-shop-catalog-store {
    background: var(--background-color, #050505);
}

[data-theme="dark"] .mobile-shop-catalog-card,
[data-theme="dark-accent"] .mobile-shop-catalog-card,
[data-theme="dark"] .mobile-shop-catalog-filters button,
[data-theme="dark-accent"] .mobile-shop-catalog-filters button {
    background: color-mix(in srgb, var(--background-color, #050505) 82%, #fff);
}

[data-theme="dark"] .mobile-shop-catalog-filters,
[data-theme="dark-accent"] .mobile-shop-catalog-filters {
    background: linear-gradient(180deg, var(--background-color, #050505) 0%, var(--background-color, #050505) 78%, rgba(5, 5, 5, 0) 100%);
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-add-btn,
html body .mobile-shop-catalog-store .mobile-shop-catalog-action.is-primary {
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(17, 17, 17, 0.14) !important;
    background: #fff !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-action.is-primary {
    height: 34px !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-add-btn *,
html body .mobile-shop-catalog-store .mobile-shop-catalog-action.is-primary *,
html body .mobile-shop-catalog-store .mobile-shop-catalog-add-btn i,
html body .mobile-shop-catalog-store .mobile-shop-catalog-action.is-primary i,
html body .mobile-shop-catalog-store .mobile-shop-catalog-add-btn span,
html body .mobile-shop-catalog-store .mobile-shop-catalog-action.is-primary span {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

#moments-scroll-container.mobile-shop-story-feed {
    bottom: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    color: #fff !important;
    scroll-snap-type: none !important;
    scroll-snap-stop: normal !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.mobile-shop-story-store,
.mobile-shop-story-store * {
    box-sizing: border-box;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

.mobile-shop-story-store .fa,
.mobile-shop-story-store .fas,
.mobile-shop-story-store .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.mobile-shop-story-store {
    min-height: 100%;
    background: #000;
}

.mobile-shop-carousel-viewport {
    position: relative;
    height: calc(100dvh - var(--mobile-app-header-height, 0px) - 60px);
    min-height: calc(100dvh - var(--mobile-app-header-height, 0px) - 60px);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.20), transparent 25%),
        radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, 0.18), transparent 14%),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 18%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.16) 82%, transparent 100%),
        linear-gradient(180deg, #151513 0%, #373530 46%, #0b0b0a 100%);
}

.mobile-shop-carousel-track {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18vw;
    padding: 24px 18vw calc(env(safe-area-inset-bottom, 0px) + 152px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    perspective: 1000px;
}

.mobile-shop-carousel-track::-webkit-scrollbar {
    display: none;
}

.mobile-shop-story-filter {
    position: absolute;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 42px);
    z-index: 6;
    display: flex;
    justify-content: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
    padding: 2px 0 8px;
}

.mobile-shop-story-filter::-webkit-scrollbar {
    display: none;
}

.mobile-shop-story-store:focus-within .mobile-shop-story-filter,
#moments-scroll-container.mobile-shop-story-feed:hover .mobile-shop-story-filter {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-shop-story-filter button {
    flex: 0 0 auto;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(0, 0, 0, 0.20);
    color: rgba(255, 255, 255, 0.60);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.mobile-shop-story-filter button.active {
    background: rgba(255, 255, 255, 0.88);
    color: #111;
    border-color: rgba(255, 255, 255, 0.72);
}

.mobile-shop-story-filter strong {
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 9px;
}

.mobile-shop-story-filter button.active strong {
    background: rgba(0, 0, 0, 0.10);
}

.mobile-shop-story-card {
    position: relative;
    flex: 0 0 min(64vw, 330px);
    height: auto;
    min-height: 0;
    width: min(64vw, 330px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: transparent;
    opacity: 0.34;
    transform: translateZ(-170px) scale(0.78);
    transform-origin: center center;
    transition: transform 190ms ease, opacity 190ms ease, filter 190ms ease;
    filter: brightness(0.58) blur(0.2px);
    z-index: 1;
}

.mobile-shop-story-card.is-active {
    opacity: 1;
    transform: none;
    filter: brightness(1);
    z-index: 10;
}

.mobile-shop-story-card.is-near {
    opacity: 0.62;
    transform: translateZ(-95px) scale(0.86) rotateY(var(--mobile-shop-card-tilt, 0deg));
    filter: brightness(0.72);
    z-index: 4;
}

.mobile-shop-story-card::before {
    content: none;
}

.mobile-shop-story-card.is-next {
    animation: mobileShopStoryNext 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-shop-story-card.is-prev {
    animation: mobileShopStoryPrev 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-shop-story-top,
.mobile-shop-story-media,
.mobile-shop-story-copy,
.mobile-shop-story-arrows,
.mobile-shop-story-dots {
    position: relative;
    z-index: 1;
}

.mobile-shop-story-top {
    min-height: 0;
    display: none;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 10px;
}

.mobile-shop-story-top strong {
    text-align: center;
    grid-column: 2;
    padding-left: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.12em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-story-top button {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.16);
    color: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mobile-shop-story-top button span {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 19px;
    height: 19px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
}

.mobile-shop-story-media {
    position: relative;
    width: 100%;
    height: min(59dvh, 540px);
    min-height: 432px;
    max-height: calc(100dvh - var(--mobile-app-header-height, 0px) - 248px);
    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 auto;
    padding: 18px 18px 14px;
    overflow: visible;
    border-radius: 30px;
    border: 1px solid rgba(218, 235, 255, 0.34);
    background:
        linear-gradient(145deg, rgba(218, 235, 255, 0.23), rgba(255, 255, 255, 0.035) 36%, rgba(255, 255, 255, 0.10)),
        rgba(16, 18, 20, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 34px rgba(205, 225, 255, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 24px 76px rgba(0, 0, 0, 0.58),
        0 0 42px rgba(190, 220, 255, 0.20);
    backdrop-filter: blur(28px) saturate(1.16);
    -webkit-backdrop-filter: blur(28px) saturate(1.16);
}

.mobile-shop-story-media::after {
    content: "";
    position: absolute;
    inset: 14px 14px auto 14px;
    height: 48%;
    border-radius: 28px;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02));
    opacity: 0.62;
}

.mobile-shop-story-media::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 46%;
    width: min(54vw, 250px);
    height: 22px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.28), transparent 68%);
    filter: blur(10px);
    opacity: 0.62;
}

.mobile-shop-story-media > img,
.mobile-shop-story-media > video {
    position: relative;
    z-index: 2;
    width: min(58vw, 296px);
    height: 48%;
    flex: 0 0 48%;
    min-height: 218px;
    max-width: none;
    max-height: none;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    filter: drop-shadow(0 26px 36px rgba(0, 0, 0, 0.54)) drop-shadow(0 0 18px rgba(225, 240, 255, 0.30));
    transition: opacity 260ms ease, transform 420ms ease;
}

.mobile-shop-story-media > img.is-portrait {
    width: auto;
    max-width: min(58vw, 296px);
    height: 48%;
    max-height: none;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    filter: drop-shadow(0 26px 36px rgba(0, 0, 0, 0.54)) drop-shadow(0 0 18px rgba(225, 240, 255, 0.30));
}

.mobile-shop-story-media:has(> img.is-portrait)::before {
    width: min(44vw, 210px);
    opacity: 0.38;
}

.mobile-shop-story-media > img.is-loaded,
.mobile-shop-story-media > video {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.mobile-shop-side-preview {
    position: absolute;
    top: 2%;
    z-index: 0;
    width: 94%;
    height: 96%;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.26);
    opacity: 0.52;
    transform: scale(0.96);
    overflow: hidden;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mobile-shop-side-preview.is-prev {
    left: -106%;
    transform-origin: right center;
}

.mobile-shop-side-preview.is-next {
    right: -106%;
    transform-origin: left center;
}

.mobile-shop-side-preview img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.42));
}

.mobile-shop-side-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    filter: saturate(0.9) contrast(1.06);
}

.mobile-shop-side-preview span {
    padding: 0 10px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.mobile-shop-story-placeholder {
    width: min(48vw, 190px);
    aspect-ratio: 1;
    border-radius: 32px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 28px 54px rgba(0, 0, 0, 0.36);
    color: rgba(255, 255, 255, 0.82);
    font-size: 34px;
    font-weight: 900;
}

.mobile-shop-story-placeholder img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.mobile-shop-story-copy {
    position: static;
    z-index: 3;
    display: grid;
    justify-items: stretch;
    text-align: center;
    gap: 6px;
    flex: 1 1 auto;
    padding: 8px 8px 0;
    width: 100%;
    justify-self: center;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mobile-shop-info-plate {
    position: relative;
    z-index: 3;
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mobile-shop-story-category {
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.36em !important;
    text-transform: uppercase;
}

.mobile-shop-story-copy h2 {
    max-width: 12ch;
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 6.2vw, 31px);
    line-height: 0.92;
    font-weight: 920;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.44);
}

.mobile-shop-story-copy > strong {
    color: #ff5b3d;
    font-size: 17px;
    line-height: 1;
    font-weight: 780;
}

.mobile-shop-story-copy p {
    max-width: 31ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 10px;
    line-height: 1.22;
    padding: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-shop-story-copy small {
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
}

.mobile-shop-story-copy small::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 999px;
    background: #4ade80;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
}

.mobile-shop-story-variant-summary {
    color: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}

.mobile-shop-story-store .mobile-shop-variant-controls {
    width: min(100%, 270px);
    display: grid;
    gap: 6px;
    margin-top: 1px;
}

.mobile-shop-story-store .mobile-shop-variant-controls section {
    display: grid;
    gap: 4px;
}

.mobile-shop-story-store .mobile-shop-variant-label {
    color: rgba(255, 255, 255, 0.52);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.mobile-shop-story-store .mobile-shop-variant-options {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    justify-content: center;
    scrollbar-width: none;
}

.mobile-shop-story-store .mobile-shop-variant-options::-webkit-scrollbar {
    display: none;
}

.mobile-shop-story-store .mobile-shop-variant-options button {
    flex: 0 0 auto;
    min-height: 24px;
    max-width: 104px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.78);
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-story-store .mobile-shop-variant-options button.is-selected {
    background: #fff;
    border-color: #fff;
    color: #111;
    -webkit-text-fill-color: #111;
}

.mobile-shop-story-cta {
    position: relative;
    z-index: 3;
    width: min(100%, 198px);
    min-height: 36px;
    margin-top: 4px;
    padding: 4px 6px 4px 10px;
    justify-self: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.96);
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0 !important;
}

.mobile-shop-story-cta span {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

.mobile-shop-story-cta:disabled {
    opacity: 0.6;
    color: rgba(17, 17, 17, 0.54);
    -webkit-text-fill-color: rgba(17, 17, 17, 0.54) !important;
}

.mobile-shop-story-cta:disabled span {
    color: rgba(17, 17, 17, 0.54) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.54) !important;
}

.mobile-shop-story-cta i {
    grid-column: 1;
    grid-row: 1;
    width: 25px;
    height: 25px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.mobile-shop-story-actions {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 4;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    margin-top: 6px;
}

.mobile-shop-story-actions button {
    all: unset;
    box-sizing: border-box;
    min-width: 42px;
    min-height: 42px;
    padding: 2px 4px !important;
    border: 0 !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    color: rgba(255, 255, 255, 0.72);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 21px;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.mobile-shop-story-actions button::before,
.mobile-shop-story-actions button::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-shop-story-actions button i {
    width: auto;
    height: auto;
    border-radius: 999px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
}

.mobile-shop-story-actions button span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 8.5px;
    line-height: 1;
    letter-spacing: 0.16em !important;
    font-weight: 900;
}

.mobile-shop-story-swipe {
    display: none;
    justify-items: center;
    gap: 4px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.42em !important;
    text-transform: uppercase;
}

.mobile-shop-story-swipe i {
    font-size: 14px;
    letter-spacing: 0 !important;
}

.mobile-shop-story-arrows {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(22px + 46px + min(23dvh, 210px));
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    justify-content: space-between;
    padding: 0 14px;
    pointer-events: none;
}

.mobile-shop-story-arrows button {
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.86);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: auto;
}

.mobile-shop-story-dots {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 7px;
}

.mobile-shop-story-dots span {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
}

.mobile-shop-story-dots span.active {
    width: 8px;
    height: 8px;
    background: #fff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.74);
}

@media (max-height: 720px) {
    .mobile-shop-story-card {
        height: 100%;
        min-height: 0;
        padding-top: 10px;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px);
    }

    .mobile-shop-story-media {
        width: 100%;
        height: min(68dvh, 540px);
        min-height: 460px;
        max-height: calc(100dvh - var(--mobile-app-header-height, 0px) - 164px);
        padding: 18px 16px 14px;
    }

    .mobile-shop-story-media > img,
    .mobile-shop-story-media > video {
        width: min(66vw, 300px);
        height: 46%;
        flex-basis: 46%;
        min-height: 230px;
    }

    .mobile-shop-story-copy h2 {
        font-size: clamp(25px, 7.4vw, 36px);
    }

    .mobile-shop-story-copy {
        gap: 5px;
    }

    .mobile-shop-story-actions {
        margin-top: 5px;
    }

    .mobile-shop-story-swipe {
        display: none;
    }
}

	                @keyframes mobileShopStoryNext {
    from { opacity: 0; transform: translateX(22px) scale(0.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes mobileShopStoryPrev {
    from { opacity: 0; transform: translateX(-22px) scale(0.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

[data-theme="light"] #moments-scroll-container.mobile-shop-story-feed,
[data-theme="light-accent"] #moments-scroll-container.mobile-shop-story-feed {
    background: var(--mobile-shop-bg) !important;
    color: var(--mobile-shop-text) !important;
}

[data-theme="light"] .mobile-shop-story-store,
[data-theme="light-accent"] .mobile-shop-story-store {
    background: var(--mobile-shop-bg);
}

[data-theme="light"] .mobile-shop-carousel-viewport,
[data-theme="light-accent"] .mobile-shop-carousel-viewport {
    background:
        radial-gradient(ellipse at 50% 24%, color-mix(in srgb, var(--mobile-shop-text) 8%, transparent), transparent 26%),
        radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--primary-color, var(--mobile-shop-text)) 10%, transparent), transparent 18%),
        linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--mobile-shop-text) 8%, transparent) 18%, transparent 30%, transparent 70%, color-mix(in srgb, var(--mobile-shop-text) 7%, transparent) 82%, transparent 100%),
        linear-gradient(180deg, color-mix(in srgb, var(--mobile-shop-bg) 94%, #d1d5db 6%) 0%, color-mix(in srgb, var(--mobile-shop-bg) 84%, #9ca3af 16%) 48%, var(--mobile-shop-bg) 100%);
}

[data-theme="light"] .mobile-shop-story-card,
[data-theme="light-accent"] .mobile-shop-story-card {
    color: var(--mobile-shop-text);
}

[data-theme="light"] .mobile-shop-story-card.is-near,
[data-theme="light-accent"] .mobile-shop-story-card.is-near {
    opacity: 0.48;
    filter: brightness(0.94);
}

[data-theme="light"] .mobile-shop-story-card:not(.is-active),
[data-theme="light-accent"] .mobile-shop-story-card:not(.is-active) {
    filter: brightness(0.9) blur(0.2px);
}

[data-theme="light"] .mobile-shop-story-media,
[data-theme="light-accent"] .mobile-shop-story-media {
    border-color: color-mix(in srgb, var(--mobile-shop-text) 18%, transparent);
    background:
        linear-gradient(145deg, color-mix(in srgb, #ffffff 74%, transparent), color-mix(in srgb, var(--mobile-shop-bg) 76%, transparent) 42%, color-mix(in srgb, var(--mobile-shop-text) 5%, transparent)),
        color-mix(in srgb, var(--mobile-shop-bg) 80%, var(--mobile-shop-card-soft));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 color-mix(in srgb, var(--mobile-shop-text) 10%, transparent),
        inset 0 0 34px color-mix(in srgb, var(--mobile-shop-text) 4%, transparent),
        0 0 0 1px rgba(255, 255, 255, 0.38),
        0 24px 76px color-mix(in srgb, var(--mobile-shop-text) 16%, transparent),
        0 0 42px color-mix(in srgb, var(--primary-color, var(--mobile-shop-text)) 14%, transparent);
}

[data-theme="light"] .mobile-shop-story-media::after,
[data-theme="light-accent"] .mobile-shop-story-media::after {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.08));
}

[data-theme="light"] .mobile-shop-story-media::before,
[data-theme="light-accent"] .mobile-shop-story-media::before {
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--mobile-shop-text) 16%, transparent), transparent 68%);
}

[data-theme="light"] .mobile-shop-story-media > img,
[data-theme="light"] .mobile-shop-story-media > video,
[data-theme="light"] .mobile-shop-story-media > img.is-portrait,
[data-theme="light-accent"] .mobile-shop-story-media > img,
[data-theme="light-accent"] .mobile-shop-story-media > video,
[data-theme="light-accent"] .mobile-shop-story-media > img.is-portrait {
    filter: drop-shadow(0 24px 34px color-mix(in srgb, var(--mobile-shop-text) 26%, transparent)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.42));
}

[data-theme="light"] .mobile-shop-side-preview,
[data-theme="light-accent"] .mobile-shop-side-preview {
    background: color-mix(in srgb, var(--mobile-shop-bg) 74%, transparent);
    border-color: color-mix(in srgb, var(--mobile-shop-text) 12%, transparent);
    box-shadow: 0 20px 52px color-mix(in srgb, var(--mobile-shop-text) 14%, transparent);
}

[data-theme="light"] .mobile-shop-side-preview span,
[data-theme="light-accent"] .mobile-shop-side-preview span,
[data-theme="light"] .mobile-shop-story-category,
[data-theme="light-accent"] .mobile-shop-story-category,
[data-theme="light"] .mobile-shop-story-copy p,
[data-theme="light-accent"] .mobile-shop-story-copy p,
[data-theme="light"] .mobile-shop-story-copy small,
[data-theme="light-accent"] .mobile-shop-story-copy small {
    color: var(--mobile-shop-muted);
}

[data-theme="light"] .mobile-shop-story-copy h2,
[data-theme="light-accent"] .mobile-shop-story-copy h2 {
    color: var(--mobile-shop-text);
    text-shadow: none;
}

[data-theme="light"] .mobile-shop-story-copy small,
[data-theme="light-accent"] .mobile-shop-story-copy small {
    border-color: var(--mobile-shop-border);
    background: var(--mobile-shop-button-bg);
}

[data-theme="light"] .mobile-shop-story-placeholder,
[data-theme="light-accent"] .mobile-shop-story-placeholder {
    background: var(--mobile-shop-card-soft);
    border-color: var(--mobile-shop-border);
    box-shadow: 0 24px 48px color-mix(in srgb, var(--mobile-shop-text) 14%, transparent);
    color: var(--mobile-shop-muted);
}

[data-theme="light"] .mobile-shop-story-actions button,
[data-theme="light-accent"] .mobile-shop-story-actions button {
    color: var(--mobile-shop-text);
}

[data-theme="light"] .mobile-shop-story-actions button span,
[data-theme="light-accent"] .mobile-shop-story-actions button span,
[data-theme="light"] .mobile-shop-story-swipe,
[data-theme="light-accent"] .mobile-shop-story-swipe {
    color: var(--mobile-shop-muted);
}

[data-theme="light"] .mobile-shop-story-filter button,
[data-theme="light-accent"] .mobile-shop-story-filter button {
    border-color: var(--mobile-shop-border);
    background: var(--mobile-shop-button-bg);
    color: var(--mobile-shop-muted);
}

[data-theme="light"] .mobile-shop-story-filter button.active,
[data-theme="light-accent"] .mobile-shop-story-filter button.active {
    background: color-mix(in srgb, var(--mobile-shop-text) 8%, var(--mobile-shop-bg));
    color: var(--mobile-shop-text);
    border-color: color-mix(in srgb, var(--mobile-shop-text) 18%, transparent);
}

[data-theme="light"] .mobile-shop-story-filter strong,
[data-theme="light-accent"] .mobile-shop-story-filter strong {
    background: color-mix(in srgb, var(--mobile-shop-text) 10%, transparent);
}

[data-theme="light"] .mobile-shop-story-dots span,
[data-theme="light-accent"] .mobile-shop-story-dots span {
    background: color-mix(in srgb, var(--mobile-shop-text) 24%, transparent);
}

[data-theme="light"] .mobile-shop-story-dots span.active,
[data-theme="light-accent"] .mobile-shop-story-dots span.active {
    background: var(--mobile-shop-text);
    box-shadow: 0 0 16px color-mix(in srgb, var(--mobile-shop-text) 22%, transparent);
}

/* Final catalog overrides live last so older story/shop theme rules cannot repaint the new shop UI. */
html body #moments-scroll-container.mobile-shop-catalog-feed {
    background:
        linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%) !important;
    scroll-padding-top: 8px !important;
}

html body .mobile-shop-catalog-store {
    background: transparent !important;
    padding-top: 6px !important;
}

html body .mobile-shop-catalog-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.94)) !important;
    border: 1px solid rgba(17, 17, 17, 0.08) !important;
    border-radius: 20px !important;
    box-shadow:
        0 14px 34px rgba(17, 17, 17, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    scroll-margin-top: 8px !important;
}

html body .mobile-shop-catalog-thumb {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body .mobile-shop-catalog-image {
    width: 112% !important;
    height: 112% !important;
    filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.18)) !important;
}

html body .mobile-shop-catalog-image.is-builder-composite {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

html body .mobile-shop-catalog-card.is-manual-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding: 8px 8px 10px !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-thumb {
    width: 100% !important;
    min-height: 0 !important;
    height: clamp(154px, 24dvh, 208px) !important;
    aspect-ratio: auto !important;
    align-self: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #f4f4f2 !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-image,
html body .mobile-shop-catalog-card.is-manual-item video.mobile-shop-catalog-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-image,
html body .mobile-shop-catalog-card.is-ticket-item video.mobile-shop-catalog-image {
    object-fit: cover !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-copy {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 0 8px !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-copy h2 {
    font-size: 23px !important;
    line-height: 1.02 !important;
    -webkit-line-clamp: 2 !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-price {
    font-size: 27px !important;
    margin-top: 0 !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-copy p {
    color: rgba(17, 17, 17, 0.78) !important;
    font-size: 13px !important;
    line-height: 1.24 !important;
    font-weight: 800 !important;
    -webkit-line-clamp: 1 !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    line-height: 1 !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-action,
html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-icon-action {
    box-sizing: border-box !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transform: none !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-action {
    width: 100% !important;
    padding: 0 10px !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-icon-action {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    flex-basis: 40px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-action i,
html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-icon-action i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    transform: translateY(0) !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-action span {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    transform: translateY(0) !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 8px !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-action,
html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-icon-action {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    align-self: center !important;
    transform: translateY(0) !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-action {
    display: inline-grid !important;
    grid-template-columns: 18px auto !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: 7px !important;
    place-content: center !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-icon-action {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-action i {
    width: 18px !important;
    height: 18px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-2px) !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-action span {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    transform: translateY(-2px) !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-meta {
    margin-top: 1px !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-ticket-info {
    margin-top: 3px !important;
    color: rgba(17, 17, 17, 0.88) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

html body .mobile-shop-detail-media img.is-builder-composite {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

html body .mobile-shop-product-design-overlay {
    position: absolute !important;
    z-index: 3 !important;
    left: var(--shop-design-x, 50%) !important;
    top: var(--shop-design-y, 50%) !important;
    width: var(--shop-design-size, 22%) !important;
    height: auto !important;
    max-width: 64% !important;
    max-height: 64% !important;
    object-fit: contain !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16)) !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-add-btn {
    width: auto !important;
    min-width: 74px !important;
    height: 42px !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 17, 17, 0.14) !important;
    background: #fff !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-add-btn *,
html body .mobile-shop-catalog-store .mobile-shop-catalog-add-btn i,
html body .mobile-shop-catalog-store .mobile-shop-catalog-add-btn span {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

/* Compact shop toolbar. The app header is already above this scroll area. */
html body .mobile-shop-catalog-store .mobile-shop-catalog-header {
    display: none !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 48px !important;
    margin: 0 -14px 10px !important;
    padding: 12px 14px 12px !important;
    background: #ffffff !important;
    border-bottom: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-header > div:first-child {
    display: none !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-header strong {
    font-size: 20px !important;
    white-space: nowrap !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-header-actions {
    width: auto !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-header .mobile-shop-catalog-filter-open,
html body .mobile-shop-catalog-store .mobile-shop-catalog-header .mobile-shop-catalog-add-btn {
    height: 42px !important;
    min-height: 42px !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-header .mobile-shop-catalog-filter-open {
    min-width: 86px !important;
    padding: 0 12px !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-header .mobile-shop-catalog-add-btn {
    display: none !important;
}

html body .mobile-shop-catalog-store {
    padding-top: 6px !important;
    padding-bottom: 0 !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-list {
    padding-top: 0 !important;
    padding-bottom: 18px !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-bottom-actions {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2147483200 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 18px !important;
    pointer-events: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-bottom-actions .mobile-shop-catalog-filter-open {
    width: auto !important;
    min-width: 104px !important;
    height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 17, 17, 0.12) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 2px 0 rgba(255, 255, 255, 0.9) inset !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    pointer-events: auto !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-bottom-actions .mobile-shop-catalog-filter-open *,
html body .mobile-shop-catalog-store .mobile-shop-catalog-bottom-actions .mobile-shop-catalog-filter-open i,
html body .mobile-shop-catalog-store .mobile-shop-catalog-bottom-actions .mobile-shop-catalog-filter-open span {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

html body .mobile-shop-catalog-store.is-filter-open .mobile-shop-catalog-bottom-actions,
html body.mobile-shop-filter-hidden .mobile-shop-catalog-store .mobile-shop-catalog-bottom-actions {
    opacity: 0 !important;
    transform: translateY(12px) !important;
    pointer-events: none !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-bottom-actions {
    display: none !important;
}

html body .mobile-shop-variant-chips .mobile-shop-variant-color-swatch {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    flex: 0 0 22px !important;
    display: inline-flex !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    background: var(--shop-variant-color, #d7d3c8) !important;
    box-shadow:
        0 0 0 1px rgba(17, 17, 17, 0.16),
        0 5px 12px rgba(0, 0, 0, 0.12) !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    overflow: hidden !important;
}

html body .mobile-shop-variant-chips button.mobile-shop-variant-color-swatch.is-selected {
    box-shadow:
        0 0 0 2px #111,
        0 0 0 4px rgba(255, 255, 255, 0.92),
        0 7px 14px rgba(0, 0, 0, 0.16) !important;
}

html body .mobile-shop-variant-chips .mobile-shop-variant-extra {
    width: auto !important;
    max-width: none !important;
    padding: 3px 7px !important;
}


/* Shop feed bottom gap recovery override removed: bottom filter floats, feed owns no extra spacer. */
html body .mobile-shop-catalog-store {
    padding-top: 6px !important;
    padding-bottom: 0 !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-list {
    padding-top: 0 !important;
    padding-bottom: 18px !important;
}


/* Manual digital seeded/test items should never crop product cutouts. */
html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-thumb {
    height: clamp(154px, 24dvh, 208px) !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-image,
html body .mobile-shop-catalog-card.is-manual-item video.mobile-shop-catalog-image {
    object-fit: contain !important;
    object-position: center !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-image,
html body .mobile-shop-catalog-card.is-ticket-item video.mobile-shop-catalog-image {
    object-fit: cover !important;
}


/* Shop feed bottom padding hard reset. */
html body #shop-main-area,
html body.shop-active #shop-main-area {
    padding-bottom: 0 !important;
    scroll-padding-bottom: 18px !important;
}

html body #moments-scroll-container.mobile-shop-storefront,
html body #moments-scroll-container.mobile-shop-catalog-feed,
html body.shop-active #moments-scroll-container.mobile-shop-storefront,
html body.shop-active #moments-scroll-container.mobile-shop-catalog-feed {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    padding-bottom: 0 !important;
    scroll-padding-bottom: 18px !important;
}

html body #moments-scroll-container.mobile-shop-storefront .mobile-shop-catalog-store,
html body #moments-scroll-container.mobile-shop-catalog-feed .mobile-shop-catalog-store,
html body.shop-active #moments-scroll-container.mobile-shop-storefront .mobile-shop-catalog-store,
html body.shop-active #moments-scroll-container.mobile-shop-catalog-feed .mobile-shop-catalog-store {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

html body #moments-scroll-container.mobile-shop-storefront .mobile-shop-catalog-list,
html body #moments-scroll-container.mobile-shop-catalog-feed .mobile-shop-catalog-list,
html body.shop-active #moments-scroll-container.mobile-shop-storefront .mobile-shop-catalog-list,
html body.shop-active #moments-scroll-container.mobile-shop-catalog-feed .mobile-shop-catalog-list {
    padding-bottom: 18px !important;
    margin-bottom: 0 !important;
}

html body #moments-scroll-container.mobile-shop-catalog-feed .mobile-shop-catalog-card:last-child {
    scroll-margin-bottom: 18px !important;
}

/* Dark mode recovery for the catalog shop feed. Keep this last so the final
   catalog overrides above cannot repaint cards and media wells white. */
[data-theme="dark"] body #moments-scroll-container.mobile-shop-catalog-feed,
body[data-theme="dark"] #moments-scroll-container.mobile-shop-catalog-feed,
[data-theme="dark-accent"] body #moments-scroll-container.mobile-shop-catalog-feed,
body[data-theme="dark-accent"] #moments-scroll-container.mobile-shop-catalog-feed {
    background: #050505 !important;
    color: #f7f7f7 !important;
}

[data-theme="dark"] body .mobile-shop-catalog-store,
body[data-theme="dark"] .mobile-shop-catalog-store,
[data-theme="dark-accent"] body .mobile-shop-catalog-store,
body[data-theme="dark-accent"] .mobile-shop-catalog-store {
    background: transparent !important;
    color: #f7f7f7 !important;
}

[data-theme="dark"] body .mobile-shop-catalog-card,
body[data-theme="dark"] .mobile-shop-catalog-card,
[data-theme="dark-accent"] body .mobile-shop-catalog-card,
body[data-theme="dark-accent"] .mobile-shop-catalog-card {
    background:
        linear-gradient(135deg, rgba(22, 22, 22, 0.98), rgba(12, 12, 12, 0.94)) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f7f7f7 !important;
    box-shadow:
        0 22px 46px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-thumb,
body[data-theme="dark"] .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-thumb,
[data-theme="dark-accent"] body .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-thumb,
body[data-theme="dark-accent"] .mobile-shop-catalog-card.is-manual-item .mobile-shop-catalog-thumb,
[data-theme="dark"] body .mobile-shop-catalog-thumb,
body[data-theme="dark"] .mobile-shop-catalog-thumb,
[data-theme="dark-accent"] body .mobile-shop-catalog-thumb,
body[data-theme="dark-accent"] .mobile-shop-catalog-thumb {
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 38%),
        #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

[data-theme="dark"] body .mobile-shop-catalog-meta,
body[data-theme="dark"] .mobile-shop-catalog-meta,
[data-theme="dark-accent"] body .mobile-shop-catalog-meta,
body[data-theme="dark-accent"] .mobile-shop-catalog-meta,
[data-theme="dark"] body .mobile-shop-catalog-copy p,
body[data-theme="dark"] .mobile-shop-catalog-copy p,
[data-theme="dark-accent"] body .mobile-shop-catalog-copy p,
body[data-theme="dark-accent"] .mobile-shop-catalog-copy p,
[data-theme="dark"] body .mobile-shop-catalog-variant-summary,
body[data-theme="dark"] .mobile-shop-catalog-variant-summary,
[data-theme="dark-accent"] body .mobile-shop-catalog-variant-summary,
body[data-theme="dark-accent"] .mobile-shop-catalog-variant-summary {
    color: rgba(247, 247, 247, 0.68) !important;
    -webkit-text-fill-color: rgba(247, 247, 247, 0.68) !important;
}

[data-theme="dark"] body .mobile-shop-catalog-copy h2,
body[data-theme="dark"] .mobile-shop-catalog-copy h2,
[data-theme="dark-accent"] body .mobile-shop-catalog-copy h2,
body[data-theme="dark-accent"] .mobile-shop-catalog-copy h2,
[data-theme="dark"] body .mobile-shop-catalog-price,
body[data-theme="dark"] .mobile-shop-catalog-price,
[data-theme="dark-accent"] body .mobile-shop-catalog-price,
body[data-theme="dark-accent"] .mobile-shop-catalog-price {
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
}

[data-theme="dark"] body .mobile-shop-catalog-action,
body[data-theme="dark"] .mobile-shop-catalog-action,
[data-theme="dark"] body .mobile-shop-catalog-icon-action,
body[data-theme="dark"] .mobile-shop-catalog-icon-action,
[data-theme="dark-accent"] body .mobile-shop-catalog-action,
body[data-theme="dark-accent"] .mobile-shop-catalog-action,
[data-theme="dark-accent"] body .mobile-shop-catalog-icon-action,
body[data-theme="dark-accent"] .mobile-shop-catalog-icon-action {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
}

[data-theme="dark"] body .mobile-shop-catalog-action.is-primary,
body[data-theme="dark"] .mobile-shop-catalog-action.is-primary,
[data-theme="dark-accent"] body .mobile-shop-catalog-action.is-primary,
body[data-theme="dark-accent"] .mobile-shop-catalog-action.is-primary {
    background: #f7f7f7 !important;
    border-color: #f7f7f7 !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

[data-theme="dark"] body .mobile-shop-catalog-action.is-primary *,
body[data-theme="dark"] .mobile-shop-catalog-action.is-primary *,
[data-theme="dark-accent"] body .mobile-shop-catalog-action.is-primary *,
body[data-theme="dark-accent"] .mobile-shop-catalog-action.is-primary * {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

/* Editorial storefront: the first Shop load shares the ticket View's visual language. */
html body .mobile-shop-editorial-head {
    display: grid;
    gap: 18px;
    padding: 14px 6px 24px !important;
}

html body .mobile-shop-editorial-head > span {
    color: #747168 !important;
    -webkit-text-fill-color: #747168 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: .13em !important;
}

html body .mobile-shop-editorial-head > div {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

html body .mobile-shop-editorial-head h1 {
    margin: 0 !important;
    color: #171714 !important;
    -webkit-text-fill-color: #171714 !important;
}

html body .mobile-shop-editorial-head p {
    margin: 0 0 1px !important;
    color: #77746b !important;
    -webkit-text-fill-color: #77746b !important;
    font-size: 11px !important;
    font-weight: 520 !important;
    line-height: 1.2 !important;
}

html body .mobile-shop-editorial-head.is-without-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding-bottom: 18px !important;
}

html body .mobile-shop-editorial-head.is-without-title > span,
html body .mobile-shop-editorial-head.is-without-title > p {
    margin: 0 !important;
}

html body #moments-scroll-container.mobile-shop-catalog-feed {
    background: #fff !important;
    scroll-snap-type: none !important;
}

html body .mobile-shop-catalog-store .mobile-shop-catalog-list {
    display: grid !important;
    gap: 28px !important;
}

html body .mobile-shop-catalog-card.is-ticket-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(17, 17, 17, .1) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(17, 17, 17, .06) !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-thumb {
    position: relative !important;
    width: 100% !important;
    height: clamp(244px, 66vw, 286px) !important;
    margin: 0 0 18px !important;
    border-radius: 16px !important;
    background: #282722 !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-thumb::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(0deg, rgba(0, 0, 0, .32), transparent 48%) !important;
    pointer-events: none !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-image,
html body .mobile-shop-catalog-card.is-ticket-item video.mobile-shop-catalog-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: saturate(.84) contrast(1.03) !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-copy {
    gap: 0 !important;
    padding: 0 4px 2px !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-meta {
    margin: 0 0 8px !important;
    color: #77746b !important;
    -webkit-text-fill-color: #77746b !important;
    font-size: 9px !important;
    font-weight: 650 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-copy h2 {
    margin: 0 !important;
    color: #171714 !important;
    -webkit-text-fill-color: #171714 !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-price {
    margin: 9px 0 0 !important;
    color: #171714 !important;
    -webkit-text-fill-color: #171714 !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-copy p {
    margin: 10px 0 0 !important;
    color: #55534c !important;
    -webkit-text-fill-color: #55534c !important;
    font-size: 14px !important;
    font-weight: 440 !important;
    line-height: 1.4 !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-ticket-info {
    margin: 16px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(23, 23, 20, .16) !important;
    color: #292823 !important;
    -webkit-text-fill-color: #292823 !important;
    font-size: 13px !important;
    font-weight: 560 !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-action,
html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-icon-action {
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 620 !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-action.is-primary {
    background: #1c1c18 !important;
    border-color: #1c1c18 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .mobile-shop-catalog-card.is-ticket-item .mobile-shop-catalog-action.is-primary * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Homepage digital releases are editorial covers, not generic product cards. */
html body .mobile-shop-catalog-card.is-digital-item {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 18px !important;
    min-height: 228px !important;
    padding: 16px !important;
    border: 1px solid rgba(17, 17, 17, .12) !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(17, 17, 17, .06) !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-thumb {
    width: 132px !important;
    height: 196px !important;
    min-height: 196px !important;
    margin: 0 !important;
    align-self: start !important;
    border-radius: 15px !important;
    background: #f3f3f3 !important;
    box-shadow: 0 16px 28px rgba(0, 0, 0, .12) !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-image,
html body .mobile-shop-catalog-card.is-digital-item video.mobile-shop-catalog-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: saturate(.78) contrast(1.03) !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 1px 0 0 !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-meta {
    margin: 0 0 9px !important;
    color: #737373 !important;
    -webkit-text-fill-color: #737373 !important;
    font-size: 8px !important;
    font-weight: 680 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-meta strong {
    display: none !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-copy h2 {
    margin: 0 !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    -webkit-line-clamp: 3 !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-price {
    order: 4 !important;
    margin: 11px 0 0 !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-copy p {
    margin: 10px 0 0 !important;
    color: #555 !important;
    -webkit-text-fill-color: #555 !important;
    font-size: 12px !important;
    font-weight: 440 !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 3 !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-actions {
    order: 5 !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 13px 0 0 !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-action,
html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-icon-action {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-action.is-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-action.is-primary span {
    display: none !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-action:not(.is-primary) {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-action:not(.is-primary) * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-digital-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-thumb {
    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-copy {
    padding-top: 17px !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px !important;
    gap: 8px !important;
    margin-top: 17px !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-action.is-primary {
    display: inline-flex !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-action:not(.is-primary) {
    background: rgba(255, 255, 255, .62) !important;
    border-color: rgba(36, 34, 28, .14) !important;
    color: #191814 !important;
    -webkit-text-fill-color: #191814 !important;
}

html body .mobile-shop-catalog-store.is-owner .mobile-shop-catalog-card.is-digital-item .mobile-shop-catalog-action:not(.is-primary) * {
    color: #191814 !important;
    -webkit-text-fill-color: #191814 !important;
}

/* Homepage subscriptions stay native to the light shop: white, soft, and rounded. */
html body .mobile-shop-catalog-card.is-subscription-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(17, 17, 17, .1) !important;
    border-radius: 22px !important;
    background: #fff !important;
    color: #111 !important;
    box-shadow: 0 10px 28px rgba(17, 17, 17, .06) !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-card.is-subscription-item::before {
    content: none !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-thumb {
    width: 100% !important;
    height: 210px !important;
    min-height: 210px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    background: #f1f1ef !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-image,
html body .mobile-shop-catalog-card.is-subscription-item video.mobile-shop-catalog-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    filter: saturate(.82) contrast(1.02) !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-copy {
    gap: 0 !important;
    padding: 18px 4px 2px !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-meta {
    margin: 0 0 8px !important;
    color: #6b6b67 !important;
    -webkit-text-fill-color: #6b6b67 !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-copy h2,
html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-price {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-copy h2 {
    margin: 0 !important;
    max-width: 12em !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-price {
    margin-top: 10px !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-copy p {
    margin: 11px 0 0 !important;
    color: #555 !important;
    -webkit-text-fill-color: #555 !important;
    font-size: 13px !important;
    font-weight: 430 !important;
    line-height: 1.4 !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-action,
html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-icon-action {
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 13px !important;
}

html body .mobile-shop-catalog-card.is-subscription-item .mobile-shop-catalog-action:not(.is-primary) {
    display: none !important;
}

/* High-inventory storefront: compact two-column collection flow. */
html body .mobile-shop-catalog-store.is-expanded-catalog {
    padding-top: 12px !important;
}

html body .mobile-shop-expanded-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 10px 6px 26px !important;
}

html body .mobile-shop-expanded-head p {
    margin: 0 !important;
    color: #8a8a86 !important;
    -webkit-text-fill-color: #8a8a86 !important;
    font-size: 10px !important;
    font-weight: 620 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

html body .mobile-shop-expanded-head button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #242424 !important;
    -webkit-text-fill-color: #242424 !important;
    font-size: 11px !important;
    font-weight: 620 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 34px 12px !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-thumb {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    margin: 0 0 13px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-thumb::after {
    content: none !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-image,
html body .mobile-shop-catalog-store.is-expanded-catalog video.mobile-shop-catalog-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
    filter: none !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-copy {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-meta,
html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-copy p,
html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-ticket-info,
html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-variant-summary,
html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-variant-chips {
    display: none !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-copy h2 {
    min-height: 0 !important;
    margin: 0 !important;
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    font-size: 12px !important;
    font-weight: 640 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-transform: none !important;
    -webkit-line-clamp: 2 !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-price {
    order: initial !important;
    margin: 6px 0 0 !important;
    color: #747470 !important;
    -webkit-text-fill-color: #747470 !important;
    font-size: 11px !important;
    font-weight: 520 !important;
    text-align: left !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-guest .mobile-shop-catalog-actions {
    display: none !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-actions {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 8px 0 13px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-action,
html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-icon-action {
    width: auto !important;
    min-width: 0 !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6f6f6b !important;
    -webkit-text-fill-color: #6f6f6b !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: 10px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-action span {
    display: inline !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-action i,
html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-icon-action i {
    font-size: 9px !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-icon-action {
    margin-left: auto !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-action *,
html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-icon-action * {
    color: #6f6f6b !important;
    -webkit-text-fill-color: #6f6f6b !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog .mobile-shop-catalog-bottom-actions {
    display: none !important;
}

html body .mobile-shop-catalog-sort-options,
html body .mobile-shop-catalog-category-options {
    display: grid !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
}

html body .mobile-shop-catalog-sort-options > span,
html body .mobile-shop-catalog-category-options > span {
    padding: 0 2px 4px !important;
    color: #777 !important;
    -webkit-text-fill-color: #777 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* Filter & sort, redrawn.
 *
 * The sheet used to be a two-column grid: sort on the left, category on the
 * right. The taller of the two set the height, so the sheet grew past the
 * viewport, the last sort option was clipped, and the bottom nav sat behind it.
 * It is one column now, capped to the viewport, and it scrolls its own body.
 *
 * The options were 44px boxes with borders, fills, and drop shadows stacked two
 * deep. Space and weight carry the grouping instead — rows sit on the sheet
 * itself, and only the selected one takes a fill. */
html body .mobile-shop-catalog-filters {
    /* Stop above the nav so the last tab stays reachable while filtering. */
    bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px))) !important;
    max-height: min(70dvh, 560px) !important;
    padding: 6px 0 0 !important;
    gap: 0 !important;
    /* ::before is a grid item too — give it its own track, or it steals the
       head's row and the title lands on top of the first label. */
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    border-radius: 26px 26px 0 0 !important;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.20) !important;
    overscroll-behavior: contain;
}

/* A grab handle reads as "this sheet moves" without adding another box. */
html body .mobile-shop-catalog-filters::before {
    content: '';
    width: 38px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: var(--border-color, rgba(17, 17, 17, 0.16));
}

html body .mobile-shop-catalog-filter-head {
    padding: 0 20px 18px !important;
}

html body .mobile-shop-catalog-filter-head strong {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

html body .mobile-shop-catalog-filter-head button {
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    background: var(--input-bg, rgba(17, 17, 17, 0.05)) !important;
    font-size: 13px !important;
}

/* One column, and the body scrolls rather than the sheet growing. */
html body .mobile-shop-catalog-filter-options {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 20px 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
}

html body .mobile-shop-catalog-sort-options,
html body .mobile-shop-catalog-category-options {
    gap: 0 !important;
    margin-bottom: 0 !important;
}

html body .mobile-shop-catalog-category-options {
    margin-top: 26px !important;
}

html body .mobile-shop-catalog-sort-options > span,
html body .mobile-shop-catalog-category-options > span {
    padding: 0 0 6px !important;
    color: var(--text-secondary, #8a8a8a) !important;
    -webkit-text-fill-color: var(--text-secondary, #8a8a8a) !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
}

/* Rows, not boxes: no border, no fill, no shadow — just a hairline between. */
html body .mobile-shop-catalog-filter-options button {
    min-height: 50px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color, rgba(17, 17, 17, 0.08)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-primary, #111) !important;
    -webkit-text-fill-color: var(--text-primary, #111) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

html body .mobile-shop-catalog-sort-options button:last-of-type,
html body .mobile-shop-catalog-category-options button:last-of-type {
    border-bottom: 0 !important;
}

/* Selection is weight and a check, not an inverted slab. */
html body .mobile-shop-catalog-filter-options button.active {
    background: transparent !important;
    border-color: var(--border-color, rgba(17, 17, 17, 0.08)) !important;
}

html body .mobile-shop-catalog-filter-options button.active,
html body .mobile-shop-catalog-filter-options button.active span {
    color: var(--text-primary, #111) !important;
    -webkit-text-fill-color: var(--text-primary, #111) !important;
    font-weight: 800 !important;
}

html body .mobile-shop-catalog-filter-options button i {
    font-size: 13px !important;
}

/* The count is a quiet number, not a pill. */
html body .mobile-shop-catalog-filter-options strong {
    min-width: 0 !important;
    height: auto !important;
    background: transparent !important;
    color: var(--text-secondary, #9a9a9a) !important;
    -webkit-text-fill-color: var(--text-secondary, #9a9a9a) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

html body .mobile-shop-catalog-filter-options button.active strong {
    background: transparent !important;
    color: var(--text-primary, #111) !important;
    -webkit-text-fill-color: var(--text-primary, #111) !important;
    font-weight: 800 !important;
}

/* Owner catalog grid: one layout for every card, whatever the item type.
   Per-type rules above give digital/ticket tiles a fixed 210px height and
   push their action row below the copy, so mixed rows never lined up. */
html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card.mobile-shop-catalog-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: 100% !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-thumb.mobile-shop-catalog-thumb {
    order: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 5 !important;
    align-self: stretch !important;
    flex: 0 0 auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-thumb .mobile-shop-catalog-image.mobile-shop-catalog-image {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    transform: none !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-copy.mobile-shop-catalog-copy {
    order: 2 !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-actions.mobile-shop-catalog-actions {
    order: 3 !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-copy.mobile-shop-catalog-copy {
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-copy .mobile-shop-catalog-meta,
html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-copy p,
html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-copy .mobile-shop-catalog-ticket-info,
html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-copy .mobile-shop-catalog-variant-summary,
html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-copy .mobile-shop-variant-chips {
    display: none !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-copy h2 {
    order: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

html body .mobile-shop-catalog-store.is-expanded-catalog.is-owner .mobile-shop-catalog-card .mobile-shop-catalog-copy .mobile-shop-catalog-price.mobile-shop-catalog-price {
    order: 1 !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
}

#addItemModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 150000;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
	                    --modal-overlay-bg: var(--mobile-shop-bg) !important;
	                    --modal-text-color: var(--mobile-shop-text) !important;
	                    --modal-input-bg: var(--mobile-shop-card-bg) !important;
	                    --modal-input-border: var(--mobile-shop-border) !important;
	                    --modal-input-placeholder: var(--mobile-shop-subtle) !important;
	                    --modal-header-border: var(--mobile-shop-border) !important;
	                    --modal-cancel-bg: var(--mobile-shop-button-bg) !important;
	                    --modal-cancel-border: var(--mobile-shop-border) !important;
	                    --modal-cancel-text: var(--mobile-shop-text) !important;
	                    background: var(--mobile-shop-bg) !important;
	                    color: var(--mobile-shop-text) !important;
	                    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	                }

#addItemModal * {
    letter-spacing: 0 !important;
    box-sizing: border-box;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#addItemModal .fa,
#addItemModal .fas,
#addItemModal .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

#addItemModal > div > div {
    max-width: 520px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 14px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}

.mobile-shop-add-item-shell {
    width: 100%;
    min-height: 100%;
    background: transparent;
    border: 0;
}

.mobile-shop-add-item-scroll {
    width: 100%;
    max-width: 420px !important;
    margin: 0 auto;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(132px + env(safe-area-inset-bottom, 0px)) !important;
}

.mobile-shop-add-item-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -4px 18px;
    padding: 4px 0 10px;
    background: var(--mobile-shop-bg);
}

.mobile-shop-add-item-back {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--mobile-shop-border);
    border-radius: 999px;
    background: var(--mobile-shop-card-bg);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 15px;
}

.mobile-shop-add-item-topcopy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.mobile-shop-add-item-topcopy strong {
    color: var(--mobile-shop-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

.mobile-shop-add-item-topcopy span {
    color: var(--mobile-shop-muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
}

.mobile-shop-add-item-header {
    display: none;
}

.mobile-shop-add-item-header h2 {
    margin: 0 0 8px;
    color: var(--modal-text-color);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0 !important;
}

.mobile-shop-add-item-header p {
    display: none;
    margin: 0;
    color: var(--modal-input-placeholder);
    font-size: 15px;
}

.mobile-shop-add-item-quick-actions {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 12px;
}

.mobile-shop-add-item-quick-actions button {
    width: 100%;
    padding: 12px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mobile-shop-add-item-primary-quick {
    border: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#create-nil-moment-btn {
    display: none;
}

.mobile-shop-add-item-secondary-quick {
    border: 2px solid var(--modal-input-border);
    background: var(--modal-input-bg);
    color: var(--modal-text-color);
}

.mobile-shop-add-item-field {
    margin-bottom: 14px;
}

.mobile-shop-ticket-venue-suggestions {
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid var(--mobile-shop-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);
}

.mobile-shop-ticket-venue-suggestions[hidden] {
    display: none !important;
}

.mobile-shop-ticket-venue-suggestion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.08);
    background: #ffffff;
    color: #111111;
    text-align: left;
    cursor: pointer;
}

.mobile-shop-ticket-venue-suggestion:last-child {
    border-bottom: 0;
}

.mobile-shop-ticket-venue-suggestion span {
    max-width: 100%;
    overflow: hidden;
    color: #111111;
    font-size: 14px;
    font-weight: 760;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-ticket-venue-suggestion small {
    max-width: 100%;
    margin-top: 3px;
    overflow: hidden;
    color: #646464;
    font-size: 12px;
    font-weight: 560;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-ticket-venue-suggestion:active {
    background: #f5f5f5;
}

.mobile-shop-ticket-venue-attribution {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    border-top: 1px solid rgba(17, 17, 17, 0.08);
    background: #ffffff;
}

.mobile-shop-ticket-venue-attribution img {
    display: block;
    width: auto;
    height: 14px;
}

.mobile-shop-ticket-wallet-preview {
    position: relative;
    display: grid;
    gap: 10px;
    margin: 4px 0 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    background: var(--ticket-preview-color, #18181b);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 13px;
    box-shadow: 0 16px 34px rgba(17, 17, 17, 0.16);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, sans-serif !important;
}

.mobile-shop-ticket-wallet-preview::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 58px;
    height: 18px;
    border-radius: 0 0 999px 999px;
    background: #f5f5f7;
    transform: translateX(-50%);
    pointer-events: none;
}

.mobile-shop-ticket-wallet-preview * {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, sans-serif !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.mobile-shop-ticket-wallet-preview-top,
.mobile-shop-ticket-wallet-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.mobile-shop-ticket-wallet-preview-top {
    min-height: 22px;
    padding: 0;
    background: transparent;
}

.mobile-shop-ticket-wallet-preview-top strong {
    min-width: 0;
    overflow: hidden;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-ticket-wallet-preview-top span {
    max-width: 120px;
    overflow: hidden;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.mobile-shop-ticket-wallet-preview-art {
    width: calc(100% + 28px);
    aspect-ratio: 375 / 98;
    margin: 0 -14px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
}

.mobile-shop-ticket-wallet-preview-art[hidden] {
    display: none !important;
}

.mobile-shop-ticket-wallet-preview-main,
.mobile-shop-ticket-wallet-preview-grid > div {
    min-width: 0;
}

.mobile-shop-ticket-wallet-preview-main {
    padding: 0;
    background: transparent;
}

.mobile-shop-ticket-wallet-preview small {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.66) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.66) !important;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
}

.mobile-shop-ticket-wallet-preview-main strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.08;
}

.mobile-shop-ticket-wallet-preview-grid {
    padding: 0;
    background: transparent;
}

.mobile-shop-ticket-wallet-preview-grid strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-ticket-wallet-preview-grid.is-optional strong {
    color: rgba(255, 255, 255, 0.9) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px;
}

.mobile-shop-ticket-wallet-preview-qr {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 6px auto 0;
    padding: 7px;
    border-radius: 10px;
    background: #ffffff;
}

.mobile-shop-ticket-wallet-preview-qr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobile-shop-add-item-ticket-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 10px;
    margin: 0;
}

.mobile-shop-add-item-ticket-actions[hidden] {
    display: none !important;
}

.mobile-shop-ticket-preview-button,
.mobile-shop-ticket-color-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid #dedede;
    border-radius: 14px;
    background: #ffffff;
    color: #111111;
    -webkit-text-fill-color: #111111;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.05);
}

.mobile-shop-ticket-preview-button {
    gap: 8px;
    font-size: 14px;
    font-weight: 820;
}

.mobile-shop-ticket-color-control {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.mobile-shop-ticket-color-control input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.mobile-shop-ticket-color-control span {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(0,0,0,.12);
    border-radius: 999px;
    background: var(--ticket-preview-color, #18181b);
}

.mobile-shop-ticket-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 250000;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #f5f5f7;
    color: #111111;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, sans-serif !important;
}

.mobile-shop-ticket-preview-modal * {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, sans-serif !important;
}

.mobile-shop-ticket-preview-modal[hidden] {
    display: none !important;
}

.mobile-shop-ticket-preview-modal-top {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 8px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
}

.mobile-shop-ticket-preview-modal-top button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(17,17,17,.1);
    border-radius: 999px;
    background: #ffffff;
    color: #111111;
    font-size: 18px;
}

.mobile-shop-ticket-preview-modal-top strong {
    text-align: center;
    font-size: 16px;
    font-weight: 780;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

.mobile-shop-ticket-preview-modal-body {
    display: grid;
    place-items: center;
    padding: 18px 22px calc(34px + env(safe-area-inset-bottom, 0px));
}

#ticketPreviewModalMount {
    width: min(100%, 390px);
}

#ticketPreviewModalMount .mobile-shop-ticket-wallet-preview {
    width: 100%;
    margin: 0;
    border-radius: 20px;
    padding: 15px;
}

html body #ticketPreviewModal #ticketPreviewModalMount .mobile-shop-ticket-wallet-preview,
html body #ticketPreviewModal #ticketPreviewModalMount .mobile-shop-ticket-wallet-preview *,
html body #ticketPreviewModal #ticketPreviewModalMount .mobile-shop-ticket-wallet-preview strong,
html body #ticketPreviewModal #ticketPreviewModalMount .mobile-shop-ticket-wallet-preview span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #ticketPreviewModal #ticketPreviewModalMount .mobile-shop-ticket-wallet-preview small {
    color: rgba(255, 255, 255, 0.66) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.66) !important;
}

#ticketPreviewModalMount .mobile-shop-ticket-wallet-preview-main strong {
    font-size: 26px;
}

#ticketPreviewModalMount .mobile-shop-ticket-wallet-preview-grid strong {
    font-size: 17px;
}

#ticketPreviewModalMount .mobile-shop-ticket-wallet-preview-qr {
    width: 82px;
    height: 82px;
    margin-top: 8px;
}

.mobile-shop-add-item-primary-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    margin-top: 8px;
}

.mobile-shop-add-item-primary-row:has(.mobile-shop-add-item-ticket-actions:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 1.1fr);
}

.mobile-shop-add-item-primary-row:has(.mobile-shop-add-item-ticket-actions:not([hidden])) .mobile-shop-add-item-submit {
    min-height: 48px;
    margin-bottom: 0;
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 14px;
}

.mobile-shop-add-item-inline-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
    align-items: end;
}

.mobile-shop-add-item-field label,
.mobile-shop-add-item-option-label {
    color: var(--modal-text-color);
    font-weight: 600;
}

.mobile-shop-add-item-field > label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.mobile-shop-add-item-field input:not([type="checkbox"]),
.mobile-shop-add-item-field textarea,
.mobile-shop-add-item-field select {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    box-sizing: border-box;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.mobile-shop-add-item-field input:not([type="file"]):not([type="checkbox"]),
.mobile-shop-add-item-field select {
    font-size: 16px;
}

.mobile-shop-add-item-field input[type="file"] {
    font-size: 14px;
}

.mobile-shop-add-item-field textarea {
    resize: vertical;
    font-size: 16px;
    line-height: 1.5;
}

.mobile-shop-add-item-option-label {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    margin: 0 !important;
    padding: 14px 16px;
    border: 1px solid var(--mobile-shop-border) !important;
    border-radius: 14px;
    background: var(--mobile-shop-card-bg);
    color: var(--mobile-shop-text) !important;
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    -webkit-text-fill-color: var(--mobile-shop-text) !important;
    -webkit-user-select: none;
    user-select: none;
}

.mobile-shop-add-item-option-label input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.mobile-shop-add-item-option-label span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    background: transparent !important;
    color: var(--mobile-shop-text) !important;
    -webkit-text-fill-color: var(--mobile-shop-text) !important;
}

.mobile-shop-add-item-note {
    margin: 8px 0 0;
    padding-left: 0;
    color: var(--modal-input-placeholder);
    background: transparent !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-text-fill-color: var(--modal-input-placeholder);
}

.mobile-shop-add-item-file-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    margin: 0 !important;
    padding: 12px;
    border: 1px solid var(--mobile-shop-border) !important;
    border-radius: 14px;
    background: var(--mobile-shop-card-bg);
    color: var(--mobile-shop-text) !important;
    cursor: pointer;
    -webkit-text-fill-color: var(--mobile-shop-text) !important;
}

.mobile-shop-add-item-file-card input[type="file"] {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 0.1px !important;
    height: 0.1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0.1px !important;
    max-height: 0.1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

.mobile-shop-add-item-file-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--mobile-shop-button-bg);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 16px;
}

.mobile-shop-add-item-preview {
    display: none;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--mobile-shop-border);
    border-radius: 12px;
    background: var(--mobile-shop-button-bg);
    object-fit: cover;
}

.mobile-shop-add-item-file-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

.mobile-shop-add-item-file-copy strong {
    overflow: hidden;
    color: var(--mobile-shop-text);
    font-size: 14px;
    font-weight: 780;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-add-item-file-copy small {
    overflow: hidden;
    color: var(--mobile-shop-muted);
    font-size: 12px;
    font-weight: 620;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-add-item-file-action {
    flex: 0 0 auto;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--primary-color, #f04e2f);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.mobile-shop-add-item-type-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--mobile-shop-border);
    border-radius: 16px;
    background: var(--mobile-shop-card-bg);
}

.mobile-shop-add-item-type-toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 14px;
    font-weight: 800;
    opacity: 0.58;
}

.mobile-shop-add-item-type-toggle button.active {
    background: var(--primary-color, #f04e2f);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    opacity: 1;
}

.mobile-shop-add-item-type-toggle button i {
    font-size: 14px;
}

.mobile-shop-subscription-toggle {
    display: grid;
    /* Subscription is hidden on the form, so only One-time + Tickets show. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(17, 17, 17, 0.14);
    border-radius: 14px;
    background: #f6f6f6;
}

.mobile-shop-subscription-toggle button {
    min-width: 0;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #111111;
    -webkit-text-fill-color: #111111;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    opacity: 0.62;
}

.mobile-shop-subscription-toggle button.active {
    background: var(--manual-shop-accent, var(--primary-color, #f04e2f));
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    box-shadow: 0 8px 18px rgba(240, 78, 47, 0.18);
    opacity: 1;
}

.mobile-shop-subscription-fields[hidden] {
    display: none !important;
}

.mobile-shop-subscription-fields.is-visible {
    display: block;
}

#customCategoryDiv {
    display: none;
}

#digitalFileSection {
    display: none;
    margin-bottom: 32px;
}

.mobile-shop-add-item-submit,
.mobile-shop-add-item-cancel {
    width: 100%;
    cursor: pointer;
    transition: all 0.3s;
}

.mobile-shop-add-item-submit {
    min-height: 56px;
    margin-bottom: 12px;
    padding: 18px;
    border: 0;
    border-radius: 14px;
    background: var(--primary-color, #f04e2f);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0 !important;
}

.mobile-shop-add-item-cancel {
    min-height: 48px;
    padding: 14px;
    border-radius: 14px;
    border: 2px solid var(--modal-cancel-border);
    background: transparent;
    color: var(--modal-cancel-text);
    -webkit-text-fill-color: var(--modal-cancel-text);
    font-size: 15px;
    font-weight: 600;
}

	                #addItemModal h2 {
	                    color: var(--mobile-shop-text) !important;
    font-size: 24px !important;
    line-height: 1.05 !important;
    font-weight: 780 !important;
    margin: 0 !important;
}

	                #addItemModal label {
	                    color: var(--mobile-shop-muted) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    margin-bottom: 7px !important;
}

#addItemModal .mobile-shop-add-item-option-label {
    color: var(--mobile-shop-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
}

#addItemModal .mobile-shop-add-item-file-card,
#addItemModal .mobile-shop-add-item-type-toggle {
    margin-bottom: 0 !important;
}

	                #addItemModal input,
	                #addItemModal textarea,
	                #addItemModal select {
	                    border: 1px solid var(--mobile-shop-border) !important;
	                    border-radius: 10px !important;
	                    background: var(--mobile-shop-card-bg) !important;
	                    color: var(--mobile-shop-text) !important;
	                    -webkit-text-fill-color: var(--mobile-shop-text) !important;
    font-size: 15px !important;
    font-weight: 620 !important;
    box-shadow: none !important;
}

#addItemModal input:not([type="checkbox"]):not([type="file"]),
#addItemModal select {
    min-height: 44px !important;
    padding: 0 13px !important;
}

#addItemModal textarea {
    min-height: 86px !important;
    padding: 13px !important;
    line-height: 1.4 !important;
}

#addItemModal .mobile-shop-add-item-file-card input[type="file"] {
    position: absolute !important;
    width: 0.1px !important;
    height: 0.1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

	                #addItemModal input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
	                    accent-color: var(--primary-color, var(--mobile-shop-text)) !important;
}

	                #addItemModal input:focus,
	                #addItemModal textarea:focus,
	                #addItemModal select:focus {
	                    border-color: var(--primary-color, var(--mobile-shop-border)) !important;
	                    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10) !important;
}

#addItemModal button {
    box-shadow: none !important;
}

#addItemModal button[onclick*="submitAddItem"]:not(.mobile-shop-add-item-submit) {
    background: var(--mobile-shop-button-bg) !important;
    border: 1px solid var(--mobile-shop-border) !important;
    color: var(--mobile-shop-text) !important;
    -webkit-text-fill-color: var(--mobile-shop-text) !important;
    border-radius: 999px !important;
    min-height: 48px !important;
    font-size: 14px !important;
    font-weight: 780 !important;
    text-transform: none !important;
}

#addItemModal button[onclick*="closeAddItemModal"]:not(.mobile-shop-add-item-cancel) {
    background: transparent !important;
    border: 1px solid var(--mobile-shop-border) !important;
    color: var(--mobile-shop-muted) !important;
    -webkit-text-fill-color: var(--mobile-shop-muted) !important;
    border-radius: 999px !important;
}

/* Manual add-item form: fixed light-mode treatment. */
#addItemModal {
    background: #ffffff !important;
    color: #111111 !important;
    color-scheme: light !important;
    --manual-shop-accent: #f04e2f;
    --manual-shop-text: #111111;
    --manual-shop-muted: #5f5f5f;
    --manual-shop-border: #d7d7d7;
    --manual-shop-soft: #f4f4f4;
}

#addItemModal,
#addItemModal * {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

#addItemModal .mobile-shop-add-item-scroll,
#addItemModal .mobile-shop-add-item-shell,
#addItemModal form {
    background: #ffffff !important;
    color: var(--manual-shop-text) !important;
    color-scheme: light !important;
}

#addItemModal .mobile-shop-add-item-topbar {
    background: #ffffff !important;
}

#addItemModal .mobile-shop-add-item-back,
#addItemModal .mobile-shop-add-item-file-card,
#addItemModal .mobile-shop-add-item-type-toggle,
#addItemModal input,
#addItemModal textarea,
#addItemModal select {
    border-color: var(--manual-shop-border) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--manual-shop-text) !important;
    -webkit-text-fill-color: var(--manual-shop-text) !important;
    caret-color: var(--manual-shop-text) !important;
    color-scheme: light !important;
}

#addItemModal input:not([type="checkbox"]):not([type="file"]),
#addItemModal textarea,
#addItemModal select {
    -webkit-appearance: none !important;
    appearance: none !important;
}

#addItemModal select {
    padding-right: 34px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #111111 50%),
        linear-gradient(135deg, #111111 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 12px) 19px !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

#addItemModal input::placeholder,
#addItemModal textarea::placeholder {
    color: #8a8a8a !important;
    -webkit-text-fill-color: #8a8a8a !important;
    opacity: 1 !important;
}

#addItemModal .mobile-shop-add-item-topcopy strong,
#addItemModal .mobile-shop-add-item-file-copy strong {
    color: var(--manual-shop-text) !important;
    -webkit-text-fill-color: var(--manual-shop-text) !important;
}

#addItemModal .mobile-shop-add-item-topcopy span,
#addItemModal .mobile-shop-add-item-file-copy small,
#addItemModal .mobile-shop-add-item-note,
#addItemModal .mobile-shop-add-item-field > label {
    color: var(--manual-shop-muted) !important;
    -webkit-text-fill-color: var(--manual-shop-muted) !important;
}

#addItemModal .mobile-shop-add-item-file-icon,
#addItemModal .mobile-shop-add-item-preview {
    background: var(--manual-shop-soft) !important;
    border-color: var(--manual-shop-border) !important;
    color: var(--manual-shop-text) !important;
    -webkit-text-fill-color: var(--manual-shop-text) !important;
}

#addItemModal .mobile-shop-add-item-type-toggle button {
    background: transparent !important;
    color: var(--manual-shop-muted) !important;
    -webkit-text-fill-color: var(--manual-shop-muted) !important;
    opacity: 1 !important;
}

#addItemModal .mobile-shop-add-item-type-toggle button i,
#addItemModal .mobile-shop-add-item-type-toggle button span {
    color: var(--manual-shop-muted) !important;
    -webkit-text-fill-color: var(--manual-shop-muted) !important;
}

#addItemModal .mobile-shop-add-item-type-toggle button.active,
#addItemModal .mobile-shop-add-item-submit,
#addItemModal .mobile-shop-add-item-file-action {
    background: var(--manual-shop-accent) !important;
    border-color: var(--manual-shop-accent) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#addItemModal .mobile-shop-add-item-type-toggle button.active i,
#addItemModal .mobile-shop-add-item-type-toggle button.active span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#addItemModal .mobile-shop-add-item-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 58px !important;
    border-radius: 16px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
}

#addItemModal .mobile-shop-add-item-cancel {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin-top: 10px !important;
    border: 1px solid var(--manual-shop-border) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: var(--manual-shop-text) !important;
    -webkit-text-fill-color: var(--manual-shop-text) !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Final override for the manual item name field. Some mobile theme rules can
   repaint text after the general add-item input styles above. */
#addItemModal #itemName,
#addItemModal input#itemName,
#addItemModal #itemName:focus,
#addItemModal #itemName:active,
#addItemModal #itemName:not(:placeholder-shown) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    caret-color: #111111 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    color-scheme: light !important;
}

#addItemModal #itemName::placeholder {
    color: #8a8a8a !important;
    -webkit-text-fill-color: #8a8a8a !important;
    opacity: 1 !important;
}

#addItemModal #itemName:-webkit-autofill,
#addItemModal #itemName:-webkit-autofill:hover,
#addItemModal #itemName:-webkit-autofill:focus,
#addItemModal #itemName:-webkit-autofill:active {
    -webkit-text-fill-color: #111111 !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    caret-color: #111111 !important;
}


/* Final override for the manual item category select. The mobile theme can
   repaint selects dark after the base add-item form styles. */
#addItemModal #itemCategory,
#addItemModal select#itemCategory,
#addItemModal #itemCategory:focus,
#addItemModal #itemCategory:active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #d7d7d7 !important;
    caret-color: #111111 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    color-scheme: light !important;
}

#addItemModal #itemCategory option {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}


/* Digital-only manual add form recovery overrides. */
#addItemModal .mobile-shop-add-item-inline-grid.is-single-field {
    grid-template-columns: 1fr !important;
}

#addItemModal #customCategoryDiv[hidden],
#addItemModal .mobile-shop-add-item-type-toggle {
    display: none !important;
}

#addItemModal #digitalFileSection.is-visible {
    display: block !important;
}

#addItemModal #digitalFileSection.is-hidden {
    display: none !important;
}

#addItemModal input:not([type="checkbox"]):not([type="file"]),
#addItemModal textarea,
#addItemModal select,
#addItemModal input:not([type="checkbox"]):not([type="file"]):focus,
#addItemModal textarea:focus,
#addItemModal select:focus {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    caret-color: #111111 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    color-scheme: light !important;
}

#addItemModal .mobile-shop-add-item-cancel,
#addItemModal .mobile-shop-add-item-cancel * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* Final manual add submit visibility override. Theme rules later in mobile can
   repaint button text-fill, so this stays at the end of this stylesheet. */
html body #addItemModal button.mobile-shop-add-item-submit,
html body #addItemModal .mobile-shop-add-item-submit,
html body #addItemModal .mobile-shop-add-item-submit * {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-align: center !important;
    text-indent: 0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

html body #addItemModal .mobile-shop-subscription-toggle button.active,
html body #addItemModal .mobile-shop-subscription-toggle button[aria-pressed="true"] {
    background: var(--manual-shop-accent, var(--primary-color, #f04e2f)) !important;
    border-color: var(--manual-shop-accent, var(--primary-color, #f04e2f)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

html body #addItemModal .mobile-shop-subscription-toggle button:not(.active):not([aria-pressed="true"]) {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    opacity: 0.72 !important;
}

/* Premium neutral add-item finish: remove owner accent color from the manual
   product sheet so the form reads black/white instead of red/orange. */
html body #addItemModal {
    --manual-shop-accent: #111111 !important;
    --manual-shop-text: #111111 !important;
    --manual-shop-muted: #6b6b6b !important;
    --manual-shop-border: #dedede !important;
    --manual-shop-soft: #f5f5f5 !important;
}

html body #addItemModal .mobile-shop-subscription-toggle {
    padding: 4px !important;
    border-color: #dedede !important;
    background: #f7f7f7 !important;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.02) !important;
}

html body #addItemModal .mobile-shop-subscription-toggle button {
    min-height: 41px !important;
    border-radius: 10px !important;
    color: #777777 !important;
    -webkit-text-fill-color: #777777 !important;
    font-weight: 760 !important;
    opacity: 1 !important;
}

html body #addItemModal .mobile-shop-subscription-toggle button.active,
html body #addItemModal .mobile-shop-subscription-toggle button[aria-pressed="true"],
html body #addItemModal .mobile-shop-add-item-type-toggle button.active {
    background: #ffffff !important;
    border-color: #111111 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: inset 0 0 0 1px #111111, 0 6px 14px rgba(17, 17, 17, 0.06) !important;
    font-weight: 840 !important;
}

html body #addItemModal .mobile-shop-add-item-file-action {
    min-height: 36px !important;
    padding: 0 13px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: 0 3px 10px rgba(17, 17, 17, 0.05) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
}

html body #addItemModal .mobile-shop-add-item-submit,
html body #addItemModal button.mobile-shop-add-item-submit {
    position: relative !important;
    min-height: 58px !important;
    border: 1px solid #111111 !important;
    border-radius: 16px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(17, 17, 17, 0.14) !important;
    font-size: 17px !important;
    font-weight: 820 !important;
    overflow: hidden !important;
}

html body #addItemModal .mobile-shop-add-item-submit::after,
html body #addItemModal button.mobile-shop-add-item-submit::after {
    content: attr(data-submit-label) !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font: inherit !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    text-align: center !important;
    pointer-events: none !important;
}

html body #addItemModal .mobile-shop-add-item-cancel {
    border-color: #dedede !important;
    background: #ffffff !important;
    color: #333333 !important;
    -webkit-text-fill-color: #333333 !important;
    box-shadow: none !important;
}

html body #addItemModal .mobile-shop-add-item-primary-row:has(.mobile-shop-add-item-ticket-actions:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(132px, 1.1fr) !important;
    gap: 10px !important;
}

html body #addItemModal .mobile-shop-add-item-primary-row:has(.mobile-shop-add-item-ticket-actions:not([hidden])) .mobile-shop-add-item-submit {
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 840 !important;
}

html body #addItemModal .mobile-shop-add-item-primary-row .mobile-shop-ticket-preview-button,
html body #addItemModal .mobile-shop-add-item-primary-row .mobile-shop-ticket-color-control {
    min-height: 48px !important;
    height: 48px !important;
}

/* Premium manual product sheet finish. */
html body #addItemModal .mobile-shop-add-item-scroll {
    max-width: 430px !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 18px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
}

html body #addItemModal .mobile-shop-add-item-topbar {
    margin: 0 0 22px !important;
    padding: 2px 0 4px !important;
    gap: 14px !important;
}

html body #addItemModal .mobile-shop-add-item-back {
    width: 44px !important;
    height: 44px !important;
    background: #ffffff !important;
    border-color: #dedede !important;
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.05) !important;
}

html body #addItemModal .mobile-shop-add-item-topcopy strong {
    font-size: 18px !important;
    font-weight: 760 !important;
}

html body #addItemModal .mobile-shop-add-item-topcopy span {
    margin-top: 2px !important;
    color: #565656 !important;
    -webkit-text-fill-color: #565656 !important;
    font-size: 13px !important;
    font-weight: 620 !important;
}

html body #addItemModal .mobile-shop-add-item-field {
    margin-bottom: 16px !important;
}

html body #addItemModal .mobile-shop-add-item-field > label,
html body #addItemModal .mobile-shop-add-item-field label {
    margin-bottom: 8px !important;
    color: #161616 !important;
    -webkit-text-fill-color: #161616 !important;
    font-size: 13px !important;
    font-weight: 780 !important;
}

html body #addItemModal input:not([type="checkbox"]):not([type="file"]),
html body #addItemModal textarea,
html body #addItemModal select {
    min-height: 48px !important;
    border: 1px solid #dddddd !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.025) !important;
    font-size: 15px !important;
    font-weight: 580 !important;
}

/* The rule above sets the background shorthand, which resets background-image
   and took the dropdown arrow with it — appearance is none, so the native one
   is gone too and a select read as a plain text box. Paint the caret back on
   after it. */
html body #addItemModal select {
    padding-right: 34px !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #111111 50%),
        linear-gradient(135deg, #111111 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) calc(50% - 1px),
        calc(100% - 12px) calc(50% - 1px) !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

html body #addItemModal textarea {
    min-height: 112px !important;
    resize: none !important;
}

html body #addItemModal .mobile-shop-subscription-toggle {
    min-height: 52px !important;
    padding: 5px !important;
    border-radius: 16px !important;
    background: #f4f4f4 !important;
    border-color: #dedede !important;
}

html body #addItemModal .mobile-shop-subscription-toggle button {
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 760 !important;
}

html body #addItemModal .mobile-shop-subscription-toggle button.active,
html body #addItemModal .mobile-shop-subscription-toggle button[aria-pressed="true"] {
    background: #ffffff !important;
    border-color: #111111 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: inset 0 0 0 1px #111111, 0 8px 20px rgba(17, 17, 17, 0.07) !important;
}

html body #addItemModal .mobile-shop-add-item-file-card {
    position: relative !important;
    min-height: 74px !important;
    padding: 12px 14px !important;
    border: 1px solid #dedede !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.04) !important;
}

html body #addItemModal .mobile-shop-add-item-file-card:active {
    transform: scale(0.99) !important;
    background: #fafafa !important;
}

html body #addItemModal .mobile-shop-add-item-file-icon,
html body #addItemModal .mobile-shop-add-item-preview {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: #f5f5f5 !important;
}

html body #addItemModal .mobile-shop-add-item-file-icon i {
    font-size: 17px !important;
}

html body #addItemModal .mobile-shop-add-item-file-copy strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 15px !important;
    font-weight: 780 !important;
}

html body #addItemModal .mobile-shop-add-item-file-copy small {
    margin-top: 3px !important;
    color: #767676 !important;
    -webkit-text-fill-color: #767676 !important;
    font-size: 12px !important;
    font-weight: 620 !important;
}

html body #addItemModal .mobile-shop-add-item-file-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 38px !important;
    height: 38px !important;
    min-width: 86px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    border: 1px solid #d8d8d8 !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.06) !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body #addItemModal .mobile-shop-add-item-note {
    margin-top: 8px !important;
    color: #5f5f5f !important;
    -webkit-text-fill-color: #5f5f5f !important;
    font-size: 12px !important;
    font-weight: 620 !important;
    line-height: 1.35 !important;
}

html body #addItemModal #productTypeNote {
    display: none !important;
}

/* Says what the Event field does: tickets sharing an event are shown to buyers
   as one listing with a choice of tiers. Muted, so it reads as help text rather
   than another value in the form. */
html body #addItemModal .mobile-shop-ticket-event-hint {
    display: block !important;
    margin-top: 7px !important;
    color: #8a8a8a !important;
    -webkit-text-fill-color: #8a8a8a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

/* Tier rows: name, price, quantity per line, so one event carries every tier
   it sells without the owner creating a product for each. */
html body #addItemModal .mobile-shop-ticket-tiers {
    display: grid !important;
    gap: 8px !important;
}

html body #addItemModal .mobile-shop-ticket-tier {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

html body #addItemModal .mobile-shop-ticket-tier-line {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 86px 72px 34px !important;
    align-items: center !important;
    gap: 7px !important;
}

html body #addItemModal .mobile-shop-ticket-tier input {
    min-height: 44px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 14px !important;
}

html body #addItemModal .mobile-shop-ticket-tier button[data-tier-remove] {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #9a9a9a !important;
    -webkit-text-fill-color: #9a9a9a !important;
    font-size: 14px !important;
}

html body #addItemModal .mobile-shop-ticket-tier textarea[data-tier-field="perks"] {
    width: 100% !important;
    min-height: 44px !important;
    resize: none !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
}

html body #addItemModal .mobile-shop-ticket-tier-add {
    min-height: 40px !important;
    margin-top: 9px !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px dashed #cfcfcf !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 13px !important;
    font-weight: 760 !important;
}


/* ---- Current Wallet provider layout preview --------------------------
   Approximate store-card face with a 375:123 strip. Apple determines the
   final layout; the provider uses generic when no strip is supplied. Colours are
   pinned with !important because the modal id ends in "Modal" and the
   blanket repaint rules would otherwise force them. */
html body #ticketPreviewModal {
    background: #000000 !important;
    color: #ffffff !important;
}
html body #ticketPreviewModal .mobile-shop-ticket-preview-modal-top strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #ticketPreviewModal .mobile-shop-ticket-preview-modal-top button {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: #1c1c1e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #ticketPreviewModal .mobile-shop-ticket-preview-modal-top button i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #ticketPreviewModal .mobile-shop-ticket-preview-modal-body {
    align-content: start !important;
    padding: 6px 12px calc(30px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
html body #ticketPreviewModal #ticketPreviewModalMount {
    width: 100% !important;
    max-width: 375px !important;
}
html body #ticketPreviewModal .wp-stage {
    display: grid;
    gap: 14px;
    justify-items: center;
}
html body #ticketPreviewModal .wp-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 180px;
    padding: 3px;
    border-radius: 999px;
    background: #1c1c1e !important;
}
html body #ticketPreviewModal .wp-toggle button {
    height: 30px;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.62) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
html body #ticketPreviewModal .wp-toggle button.is-active {
    background: #3a3a3c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #ticketPreviewModal .wp-card {
    position: relative;
    width: 100%;
    min-height: 500px;
    border-radius: 12px;
    background: var(--wp-bg, #18181b) !important;
    color: var(--wp-fg, #ffffff) !important;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}
html body #ticketPreviewModal .wp-card,
html body #ticketPreviewModal .wp-card strong,
html body #ticketPreviewModal .wp-card span {
    color: var(--wp-fg, #ffffff) !important;
    -webkit-text-fill-color: var(--wp-fg, #ffffff) !important;
}
html body #ticketPreviewModal .wp-card small {
    display: block;
    color: var(--wp-label, #a1a1aa) !important;
    -webkit-text-fill-color: var(--wp-label, #a1a1aa) !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}
html body #ticketPreviewModal .wp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 10px 14px;
}
html body #ticketPreviewModal .wp-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
html body #ticketPreviewModal .wp-logo {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    font-size: 16px;
    font-weight: 700;
}
html body #ticketPreviewModal .wp-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
html body #ticketPreviewModal .wp-logo-text {
    min-width: 0;
    display: -webkit-box;
    overflow: hidden;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.1;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
html body #ticketPreviewModal .wp-header-field {
    flex: 0 0 auto;
    text-align: right;
}
html body #ticketPreviewModal .wp-header-field strong {
    display: block;
    margin-top: 3px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.1;
}
html body #ticketPreviewModal .wp-strip {
    position: relative;
    width: 100%;
    aspect-ratio: 375 / 123;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
html body #ticketPreviewModal .wp-primary {
    position: relative;
    width: 100%;
    padding: 0 14px 10px;
}
html body #ticketPreviewModal .wp-primary strong {
    display: -webkit-box;
    margin-top: 4px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
html body #ticketPreviewModal .wp-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    padding: 16px 14px 0;
}
html body #ticketPreviewModal .wp-secondary > div {
    min-width: 0;
}
html body #ticketPreviewModal .wp-secondary strong {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html body #ticketPreviewModal .wp-barcode {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: 172px;
    margin: 34px auto 18px;
    padding: 8px 8px 6px;
    border-radius: 6px;
    background: #ffffff !important;
}
html body #ticketPreviewModal .wp-barcode img {
    display: block;
    width: 150px;
    height: 150px;
}
html body #ticketPreviewModal .wp-barcode span {
    max-width: 100%;
    overflow: hidden;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Back of the pass: iOS grouped list on a light ground. */
html body #ticketPreviewModal .wp-card.is-back {
    background: #f2f2f7 !important;
    color: #111111 !important;
    padding: 16px 0 18px;
}
html body #ticketPreviewModal .wp-card.is-back,
html body #ticketPreviewModal .wp-card.is-back * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}
html body #ticketPreviewModal .wp-back-title {
    padding: 0 16px 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
}
html body #ticketPreviewModal .wp-back-group {
    margin: 0 12px;
    border-radius: 12px;
    background: #ffffff !important;
    overflow: hidden;
}
html body #ticketPreviewModal .wp-back-row {
    display: grid;
    grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(60, 60, 67, 0.16);
    background: #ffffff !important;
}
html body #ticketPreviewModal .wp-back-row:last-child {
    border-bottom: 0;
}
html body #ticketPreviewModal .wp-back-row.is-full {
    display: block;
}
html body #ticketPreviewModal .wp-back-row span {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}
html body #ticketPreviewModal .wp-back-row strong {
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    text-align: right;
    color: rgba(60, 60, 67, 0.6) !important;
    -webkit-text-fill-color: rgba(60, 60, 67, 0.6) !important;
    word-break: break-word;
}
html body #ticketPreviewModal .wp-back-row.is-full strong {
    margin-top: 4px;
    text-align: left;
}
html body #ticketPreviewModal .wp-back-row.is-link strong {
    color: #3478f6 !important;
    -webkit-text-fill-color: #3478f6 !important;
}
html body #ticketPreviewModal .wp-note {
    max-width: 320px;
    margin: 0;
    color: rgba(255, 255, 255, 0.55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

/* The blanket modal repaint whitens children of any "*Modal" id; pin the
   Wallet-black ground on every layer of the preview sheet. */
html body #ticketPreviewModal .mobile-shop-ticket-preview-modal-top,
html body #ticketPreviewModal .mobile-shop-ticket-preview-modal-body,
html body #ticketPreviewModal #ticketPreviewModalMount,
html body #ticketPreviewModal .wp-stage {
    background: #000000 !important;
}

/* Shop "Add item" (digital items and tickets): the owner create-sheet look
   shared with Booking "Add service" and Stream "Add stream" (same tokens,
   same parts), benchmarked on the phone Map "New pin" sheet.

   Enterprise layout: Cancel | title | status header, grouped cards under
   small-caps eyebrows, labelled 48px fields, price with a $ prefix, tickets
   as one event card (date and time, venue) plus tiers, a quantity stepper,
   description / entry / wallet-front fields under More options, and one
   primary action that stays muted until the form is ready. Light, dark, the
   owner's page colour and Glass all come from the --es-* tokens below.

   The root selector repeats the id seven times on purpose: the legacy sheet,
   mobile-shop-theme.css, the Glass layer (mobile-glass-shop.css) and the
   page's [data-theme] sweeps all repaint #addItemModal; seven ids beat them.
   mobile-shop-legacy-add-item.js stamps inline colours from --sac-* vars, so
   those vars follow the theme too. Markup: templates/mobile.html. */

/* A full-screen form: the nav pill (z 240020) would sit on the submit. */
html body:has(#addItemModal[style*="display: block"]) #bottom-nav,
html body:has(#addItemModal[style*="display:block"]) #bottom-nav,
html body:has(#addItemModal[style*="display: flex"]) #bottom-nav,
html body:has(#addItemModal[style*="display:flex"]) #bottom-nav { display: none !important; }

/* ---- tokens: light (default), dark, page colour, Glass ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal {
    --es-font: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --es-scheme: light;
    --es-page: #F5F5F3;
    --es-card: #FFFFFF;
    --es-line: #E6E6E9;
    --es-line-soft: #EFEFF1;
    --es-ink: #0E0E10;
    --es-dim: #5C5C63;
    --es-faint: #8A8A92;
    --es-field: #FFFFFF;
    --es-field-line: #D9D9DE;
    --es-field-ink: #111113;
    --es-field-dim: #5C5C63;
    --es-field-faint: #9A9AA2;
    --es-focus: #0E0E10;
    --es-track: #EAEAEC;
    --es-seg-on: #FFFFFF;
    --es-seg-shadow: 0 1px 2px rgba(14, 14, 16, 0.10);
    --es-tile: #F1F1F2;
    --es-btn: #0E0E10;
    --es-on-btn: #FFFFFF;
    --es-btn-idle: #E3E3E6;
    --es-on-btn-idle: #8A8A92;
    --es-bad: #C62828;
    --es-good: #15803D;
    --es-toggle-off: #D9D9DE;
}
html[data-theme*="dark"] body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal {
    --es-scheme: dark;
    --es-page: #0B0B0D;
    --es-card: #151518;
    --es-line: #26262B;
    --es-line-soft: #1F1F23;
    --es-ink: #F4F4F5;
    --es-dim: #B4B4BB;
    --es-faint: #85858E;
    --es-field: #0F0F12;
    --es-field-line: #303036;
    --es-field-ink: #F4F4F5;
    --es-field-dim: #B4B4BB;
    --es-field-faint: #6E6E77;
    --es-focus: #F4F4F5;
    --es-track: #1E1E22;
    --es-seg-on: #2C2C32;
    --es-seg-shadow: none;
    --es-tile: #222227;
    --es-btn: #F4F4F5;
    --es-on-btn: #0E0E10;
    --es-btn-idle: #222227;
    --es-on-btn-idle: #6E6E77;
    --es-bad: #F87171;
    --es-good: #4ADE80;
    --es-toggle-off: #3A3A41;
}
/* The owner's page colour (mobile-page-colors.js writes the --pc-* set). */
html[data-page-color] body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal {
    --es-page: var(--pc-page);
    --es-card: var(--pc-soft);
    --es-line: var(--pc-line);
    --es-line-soft: var(--pc-line);
    --es-ink: var(--pc-ink);
    --es-dim: var(--pc-dim);
    --es-faint: var(--pc-faint);
    --es-field: var(--pc-field);
    --es-field-line: var(--pc-edge);
    --es-field-ink: var(--pc-field-ink);
    --es-field-dim: var(--pc-field-dim);
    --es-field-faint: var(--pc-field-dim);
    --es-focus: var(--pc-ink);
    --es-track: var(--pc-hover);
    --es-seg-on: var(--pc-field);
    --es-tile: var(--pc-hover);
    --es-btn: var(--pc-btn);
    --es-on-btn: var(--pc-on-btn);
    --es-btn-idle: var(--pc-hover);
    --es-on-btn-idle: var(--pc-faint);
    --es-bad: var(--pc-bad);
    --es-good: var(--pc-good);
    --es-toggle-off: var(--pc-edge);
}
/* Glass: the app's frosted sheet, white type, translucent cards. */
html[data-appearance="glass"] body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal {
    --es-scheme: dark;
    --es-page: var(--gl-sheet, rgba(28, 28, 32, 0.42));
    --es-card: rgba(255, 255, 255, 0.08);
    --es-line: rgba(255, 255, 255, 0.18);
    --es-line-soft: rgba(255, 255, 255, 0.12);
    --es-ink: #FFFFFF;
    --es-dim: rgba(255, 255, 255, 0.74);
    --es-faint: rgba(255, 255, 255, 0.56);
    --es-field: rgba(255, 255, 255, 0.10);
    --es-field-line: rgba(255, 255, 255, 0.24);
    --es-field-ink: #FFFFFF;
    --es-field-dim: rgba(255, 255, 255, 0.74);
    --es-field-faint: rgba(255, 255, 255, 0.52);
    --es-focus: #FFFFFF;
    --es-track: rgba(255, 255, 255, 0.10);
    --es-seg-on: rgba(255, 255, 255, 0.24);
    --es-seg-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --es-tile: rgba(255, 255, 255, 0.12);
    --es-btn: #FFFFFF;
    --es-on-btn: #0E0E10;
    --es-btn-idle: rgba(255, 255, 255, 0.12);
    --es-on-btn-idle: rgba(255, 255, 255, 0.50);
    --es-bad: #FFB0A8;
    --es-good: #86EFAC;
    --es-toggle-off: rgba(255, 255, 255, 0.24);
}

/* The legacy script writes these into inline !important styles. */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal {
    --sac-field-ink: var(--es-field-ink);
    --sac-muted-ink: var(--es-dim);
    --sac-selected-bg: var(--es-seg-on);
    --sac-field-scheme: var(--es-scheme);
}

/* ---- surface ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal {
    overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch;
    background: var(--es-page) !important; background-image: none !important;
    color: var(--es-ink) !important; -webkit-text-fill-color: var(--es-ink) !important;
    color-scheme: var(--es-scheme) !important;
    font-family: var(--es-font) !important;
}
html[data-appearance="glass"] body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal {
    -webkit-backdrop-filter: var(--gl-blur, blur(22px) saturate(170%)) !important;
    backdrop-filter: var(--gl-blur, blur(22px) saturate(170%)) !important;
}
/* Every leaf inherits from the rule that styles its container; the page's
   [data-theme] sweeps and the modal fixer never reach past this. */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal * {
    box-sizing: border-box;
    font-family: var(--es-font) !important;
    letter-spacing: 0;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :where(div, section, form, p, span, small, strong, em, label, summary, details, h1, h2, h3) {
    background-color: transparent !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :is(.fa, .fas, .fa-solid, .far, .fa-regular) { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .far, html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .fa-regular { font-weight: 400 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .fab { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal button {
    -webkit-appearance: none !important; appearance: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    filter: none !important; box-shadow: none !important; transform: none !important;
    -webkit-font-smoothing: antialiased !important; cursor: pointer;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal button::before, html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal button::after { content: none !important; display: none !important; }

/* ---- header: Cancel | title | status ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar {
    position: sticky !important; top: 0 !important; z-index: 8 !important;
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; align-items: center !important; column-gap: 10px !important;
    min-height: 0 !important; margin: 0 -16px 18px !important;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px !important;
    border: 0 !important; border-bottom: 1px solid var(--es-line) !important; border-radius: 0 !important;
    background: var(--es-page) !important; box-shadow: none !important;
}
html[data-appearance="glass"] body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar { background: rgba(28, 28, 32, 0.30) !important; -webkit-backdrop-filter: var(--gl-blur, blur(22px)) !important; backdrop-filter: var(--gl-blur, blur(22px)) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar-title { display: contents !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar-spacer { display: none !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar-cancel {
    grid-column: 1 !important; justify-self: start !important;
    width: auto !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    font-size: 16px !important; font-weight: 600 !important; text-align: left !important; color: var(--es-dim) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar-title strong {
    grid-column: 2 !important; display: block !important; max-width: 52vw !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    font-size: 17px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; text-transform: none !important; font-stretch: normal !important;
    text-align: center !important; color: var(--es-ink) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar-title small {
    grid-column: 3 !important; justify-self: end !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    height: 26px !important; padding: 0 10px !important; border: 1px solid var(--es-line) !important; border-radius: 999px !important;
    font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important;
    color: var(--es-dim) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar-title small::before { content: "" !important; display: block !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--es-faint) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar-title small.is-ready { color: var(--es-ink) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-bar-title small.is-ready::before { background: var(--es-good) !important; }

/* ---- "Hosted by / Selling as / Streaming as" ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-posting {
    display: flex !important; align-items: center !important; gap: 12px !important;
    margin: 0 !important; padding: 12px 14px !important;
    border: 1px solid var(--es-line) !important; border-radius: 16px !important; background: var(--es-card) !important; box-shadow: none !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-posting-avatar { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; border-radius: 12px !important; overflow: hidden !important; background: var(--es-btn) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-posting-avatar span { font-size: 15px !important; font-weight: 800 !important; color: var(--es-on-btn) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-posting-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; margin: 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-posting-copy { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-posting-label { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--es-dim) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-posting-name { font-size: 15px !important; font-weight: 700 !important; color: var(--es-ink) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ---- small-caps eyebrow over each group ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-eyebrow {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important;
    margin: 24px 4px 8px !important; padding: 0 !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-eyebrow, html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-eyebrow span {
    font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; line-height: 1.2 !important;
    color: var(--es-dim) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-eyebrow span:last-child:not(:first-child) { font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--es-faint) !important; text-align: right !important; }

/* ---- grouped card ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-card {
    display: flex !important; flex-direction: column !important; gap: 16px !important;
    margin: 0 !important; padding: 16px !important;
    border: 1px solid var(--es-line) !important; border-radius: 16px !important;
    background: var(--es-card) !important; box-shadow: none !important; overflow: visible !important;
}

/* ---- labelled field ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-field { position: relative !important; display: flex !important; flex-direction: column !important; gap: 8px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-label {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px !important;
    margin: 0 !important; padding: 0 !important;
    font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.25 !important;
    color: var(--es-ink) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-label em { font-style: normal !important; font-size: 13px !important; font-weight: 500 !important; color: var(--es-faint) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-help, html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-hint { margin: 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; color: var(--es-dim) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-hint { margin: 8px 4px 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-error { display: none !important; margin: 0 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--es-bad) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-field[data-invalid] > .sac-error { display: block !important; }

/* inputs: 48px, labelled above, hairline box */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :where(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]):not([type="range"]), select) {
    display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important;
    height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 14px !important;
    border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; outline: none !important; box-shadow: none !important;
    background: var(--es-field) !important; background-image: none !important;
    font-size: 16px !important; font-weight: 500 !important; line-height: 1.3 !important; text-align: left !important; direction: ltr !important;
    color: var(--es-field-ink) !important; -webkit-text-fill-color: var(--es-field-ink) !important; caret-color: var(--es-focus) !important;
    -webkit-appearance: none !important; appearance: none !important; color-scheme: var(--es-scheme) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal textarea {
    display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important;
    min-height: 96px !important; margin: 0 !important; padding: 12px 14px !important;
    border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; outline: none !important; box-shadow: none !important;
    background: var(--es-field) !important; background-image: none !important; resize: none !important;
    font-size: 16px !important; font-weight: 500 !important; line-height: 1.45 !important;
    color: var(--es-field-ink) !important; -webkit-text-fill-color: var(--es-field-ink) !important; caret-color: var(--es-focus) !important;
    -webkit-appearance: none !important; appearance: none !important; color-scheme: var(--es-scheme) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :is(input, textarea, select):focus { border-color: var(--es-focus) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :is(input, textarea)::placeholder { color: var(--es-field-faint) !important; -webkit-text-fill-color: var(--es-field-faint) !important; opacity: 1 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal select option { background: #FFFFFF !important; color: #111113 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal input[type="number"]::-webkit-inner-spin-button, html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal input[type="number"] { -moz-appearance: textfield !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :is(input[type="date"], input[type="time"], input[type="datetime-local"])::-webkit-date-and-time-value { text-align: left !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-field[data-invalid] :is(input, textarea, select, .sac-affix, .sac-stepper, .sac-iconfield) { border-color: var(--es-bad) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-field[data-invalid] :is(.sac-affix, .sac-stepper, .sac-iconfield) :is(input, select) { border-color: transparent !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :is(.sac-affix, .sac-stepper, .sac-iconfield):has([data-builder-error="true"]) { border-color: var(--es-bad) !important; }

/* select with a chevron */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-select { position: relative !important; display: block !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-select select { padding-right: 40px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-select > i { position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 12px !important; pointer-events: none !important; color: var(--es-field-dim) !important; }

/* $ price, icon fields: one box, the input inside it */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :is(.sac-affix, .sac-iconfield) {
    display: flex !important; align-items: center !important; height: 48px !important; min-height: 48px !important;
    border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; background: var(--es-field) !important; overflow: hidden !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :is(.sac-affix, .sac-iconfield):focus-within { border-color: var(--es-focus) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :is(.sac-affix, .sac-iconfield) :is(input, select) {
    flex: 1 1 auto !important; height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-affix-pre { flex: 0 0 auto !important; padding: 0 0 0 14px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--es-field-dim) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-affix-pre + input { padding-left: 6px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-affix-post { flex: 0 0 auto !important; padding: 0 14px 0 6px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--es-field-dim) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-iconfield > i { flex: 0 0 auto !important; width: 42px !important; text-align: center !important; font-size: 14px !important; color: var(--es-field-dim) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-iconfield > i + :is(input, select) { padding-left: 0 !important; }

/* - value unit + stepper */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-stepper {
    display: flex !important; align-items: center !important; height: 48px !important; min-height: 48px !important;
    border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; background: var(--es-field) !important; overflow: hidden !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-stepper:focus-within { border-color: var(--es-focus) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-stepper > button {
    flex: 0 0 52px !important; width: 52px !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    display: grid !important; place-items: center !important; font-size: 22px !important; font-weight: 500 !important; line-height: 1 !important; color: var(--es-field-ink) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-stepper > button:first-child { border-right: 1px solid var(--es-field-line) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-stepper > button:last-child { border-left: 1px solid var(--es-field-line) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-stepper > button:active { background: var(--es-track) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-stepper input { flex: 1 1 auto !important; width: 0 !important; height: 100% !important; min-height: 0 !important; padding: 0 4px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; text-align: right !important; font-weight: 700 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-stepper-unit { flex: 1 1 auto !important; padding: 0 0 0 5px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--es-field-dim) !important; text-align: left !important; }

/* ---- segmented control ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-segment {
    display: flex !important; gap: 4px !important; margin: 0 !important; padding: 4px !important;
    border: 0 !important; border-radius: 12px !important; background: var(--es-track) !important; box-shadow: none !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-segment button {
    flex: 1 1 0 !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 6px !important;
    border: 0 !important; border-radius: 9px !important; background: transparent !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; white-space: nowrap !important; opacity: 1 !important;
    color: var(--es-dim) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-segment button:is(.is-active, .active, [aria-pressed="true"]) {
    background: var(--es-seg-on) !important; box-shadow: var(--es-seg-shadow) !important; color: var(--es-field-ink) !important;
}

/* ---- primary action: muted until the form is ready ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-foot { display: block !important; margin: 28px 0 0 !important; padding: 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal :is(.sac-submit, button.sac-submit, .sac-submit:disabled) {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: 100% !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 0 20px !important;
    border: 0 !important; border-radius: 26px !important; background: var(--es-btn-idle) !important; opacity: 1 !important;
    font-size: 16px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important;
    color: var(--es-on-btn-idle) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-submit * { font-size: inherit !important; font-weight: inherit !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-submit.is-ready { background: var(--es-btn) !important; color: var(--es-on-btn) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-submit.is-busy { opacity: 0.7 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-note { margin: 10px 0 0 !important; padding: 0 !important; text-align: center !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; color: var(--es-dim) !important; }

/* ---- More options ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more {
    display: block !important; margin: 24px 0 0 !important; padding: 0 !important;
    border: 1px solid var(--es-line) !important; border-radius: 16px !important; background: var(--es-card) !important; overflow: visible !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more > summary {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
    min-height: 54px !important; margin: 0 !important; padding: 0 16px !important; list-style: none !important; cursor: pointer;
    font-size: 15px !important; font-weight: 700 !important; color: var(--es-ink) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more > summary::-webkit-details-marker { display: none !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more > summary::marker { content: "" !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more-meta { display: inline-flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more-meta em { font-style: normal !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--es-faint) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more-meta i { font-size: 12px !important; color: var(--es-dim) !important; transition: transform 160ms ease; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more[open] .sac-more-meta i { transform: rotate(180deg); }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more[open] > summary { border-bottom: 1px solid var(--es-line-soft) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more-body { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 16px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more-body > .sac-eyebrow { margin: 4px 0 -6px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more-body > .sac-eyebrow:first-child { margin-top: 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-more-body .sac-card { padding: 0 !important; border: 0 !important; background: transparent !important; }

/* ---- sheet frame ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 150000 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-add-item-shell { width: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-add-item-scroll {
    width: 100% !important; max-width: 560px !important; margin: 0 auto !important;
    padding: 0 16px calc(48px + env(safe-area-inset-bottom, 0px)) !important; background: transparent !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal #addItemForm { display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-section { display: block; margin: 0 !important; }

/* ---- image and file pickers ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file {
    position: relative !important; display: flex !important; align-items: center !important; gap: 12px !important;
    width: 100% !important; min-height: 72px !important; margin: 0 !important; padding: 12px 14px !important;
    border: 1.5px dashed var(--es-field-line) !important; border-radius: 16px !important; background: var(--es-card) !important;
    text-align: left !important; cursor: pointer;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file.has-file { border-style: solid !important; border-color: var(--es-line) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file input[type="file"] { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; border-radius: 12px !important; background: var(--es-tile) !important; display: grid !important; place-items: center !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file-icon i { font-size: 16px !important; color: var(--es-dim) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file-preview { display: none; width: 46px !important; height: 46px !important; flex: 0 0 46px !important; border-radius: 12px !important; object-fit: cover !important; margin: 0 !important; background: var(--es-tile) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; flex: 1 1 auto !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file-copy strong { font-size: 15px !important; font-weight: 700 !important; color: var(--es-ink) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file-copy small { font-size: 13px !important; font-weight: 500 !important; color: var(--es-dim) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file-action {
    width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 0 !important; flex: 0 0 32px !important; margin: 0 !important; padding: 0 !important;
    border: 1.5px solid var(--es-field-line) !important; border-radius: 10px !important; background: transparent !important; display: grid !important; place-items: center !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file-action i { font-size: 12px !important; color: var(--es-ink) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file.has-file .sac-file-action { border-color: var(--es-btn) !important; background: var(--es-btn) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file.has-file .sac-file-action i { color: var(--es-on-btn) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-file[for="itemImage"].has-file .sac-file-icon { display: none !important; }

/* ---- tickets: the event card ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-row--venue { position: relative !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-venue-suggestions {
    position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% + 6px) !important; z-index: 9 !important; margin: 0 !important; overflow: hidden !important;
    border: 1px solid var(--es-line) !important; border-radius: 14px !important; background: var(--es-card) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16) !important;
}
html[data-appearance="glass"] body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-venue-suggestions { background: rgba(28, 28, 32, 0.92) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-venue-suggestion { padding: 11px 14px !important; border-bottom: 1px solid var(--es-line-soft) !important; background: transparent !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-venue-suggestion:last-child { border-bottom: 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-venue-suggestion span { font-size: 14px !important; font-weight: 700 !important; color: var(--es-ink) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-venue-suggestion small { font-size: 12px !important; color: var(--es-dim) !important; }

/* ---- tickets: tiers (name, price, qty per row) ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-card--tiers { gap: 12px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tiers { display: grid !important; gap: 12px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 0 12px !important; border: 0 !important; border-bottom: 1px solid var(--es-line-soft) !important; background: transparent !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier:last-child { padding-bottom: 0 !important; border-bottom: 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier-line { display: grid !important; grid-template-columns: minmax(0, 1fr) 84px 64px 36px !important; align-items: center !important; gap: 8px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier input { padding: 0 12px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier input[data-tier-field="quantity"], html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier input[data-tier-field="price"] { text-align: right !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier textarea { min-height: 64px !important; font-size: 15px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier button[data-tier-remove] { width: 36px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; display: grid !important; place-items: center !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier button[data-tier-remove] i { font-size: 14px !important; color: var(--es-faint) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier-add {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; align-self: flex-start !important;
    height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 14px !important;
    border: 1.5px dashed var(--es-field-line) !important; border-radius: 10px !important; background: transparent !important;
    font-size: 14px !important; font-weight: 700 !important; color: var(--es-ink) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-tier-add i { font-size: 12px !important; color: var(--es-ink) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-wallet-preview { display: none !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-stepper input { text-align: center !important; font-weight: 600 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal #ticketDetailsFields > .sac-eyebrow:first-child { margin-top: 24px !important; }

/* ---- More options: wallet front grid, pass colour, preview ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px 10px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-add-item-ticket-actions { grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; margin: 0 !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-add-item-ticket-actions > .sac-eyebrow { margin: 4px 0 -2px !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-passrow { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 48px !important; padding: 0 6px 0 14px !important; border: 1.5px solid var(--es-field-line) !important; border-radius: 12px !important; background: var(--es-field) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-passrow > .sac-label { color: var(--es-field-ink) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-color-control { position: relative !important; display: block !important; flex: 0 0 34px !important; width: 34px !important; min-width: 34px !important; height: 34px !important; min-height: 34px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--es-line) !important; border-radius: 9px !important; background: var(--ticket-preview-color, #18181b) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-color-control input { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; opacity: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; cursor: pointer; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-ticket-color-control span { display: none !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-row--button {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: 100% !important; height: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 14px !important;
    border: 1.5px solid var(--es-line) !important; border-radius: 12px !important; background: transparent !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-row--button i { font-size: 13px !important; color: var(--es-dim) !important; }
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .sac-row--button span { font-size: 15px !important; font-weight: 700 !important; color: var(--es-ink) !important; }

/* Ticket-only parts disappear for one-time items. */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal:not([data-shop-kind="ticket"]) [data-shop-ticket-only] { display: none !important; }

/* ---- hidden wins over every display rule above ---- */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal [hidden],
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal [hidden][hidden],
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal [style*="display: none"],
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal [style*="display:none"] { display: none !important; }

/* Full screen on the installed app too: pin all four edges (100vh fell short
   on iOS and left a white band where the nav sits) and sit above the nav's
   layer, so nothing white can cover the bottom of the form. */
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal[style*="display"] {
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: auto !important; height: auto !important; min-height: 100% !important; max-height: none !important;
    z-index: 250000 !important; background: var(--es-page) !important;
}
html body #addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal#addItemModal .mobile-shop-add-item-shell {
    min-height: 100% !important; background: var(--es-page) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px) !important;
}

/* Members-only viewing: the app shell (header, hero, nav) stays; each tab's
   content is replaced by one join card in the composer look. The html class is
   set before first paint from the server's decision (window.MEMBERS_GATE). */
html.members-locked [id$="-main-area"] > :not(.members-gate),
html.members-locked #arena-grid > :not(.members-gate),
html.members-locked #mobile-import-library > :not(.mobile-import-library__body),
html.members-locked #mobile-import-library .mobile-import-library__body > :not(.members-gate):not(.mobile-import-library__profile-strip) { display: none !important; }
html.members-locked [id$="-main-area"], html.members-locked #arena-grid { min-height: 60vh; }

html body .members-gate {
    display: block; margin: 18px; padding: 26px 18px 20px; border: 1px solid #EAEAE6; border-radius: 22px;
    background: #FFFFFF; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03); text-align: center;
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
html body .members-gate * { font-family: inherit; box-sizing: border-box; }
html body .members-gate .fas { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; }
html body .members-gate-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 18px; background: #111214; display: grid; place-items: center; }
html body .members-gate.members-gate.members-gate .members-gate-icon i { font-size: 20px; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
html body .members-gate-title { margin: 0 0 6px !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.03em; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
html body .members-gate-copy { margin: 0 auto 16px !important; max-width: 300px; font-size: 13px !important; font-weight: 500; line-height: 1.5; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
html body .members-gate-eyebrow, html body .members-gate-eyebrow span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
html body .members-gate-eyebrow { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; padding: 0 4px; }
html body .members-gate-eyebrow span:last-child { letter-spacing: 0.08em !important; text-transform: none !important; }
html body .members-gate.members-gate.members-gate .members-gate-join.members-gate-join, html body .members-gate.members-gate.members-gate button.members-gate-join {
    display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 54px !important; min-height: 54px !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important; background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; cursor: pointer;
}
html body .members-gate-join::before, html body .members-gate-join::after { content: none !important; }
html body .members-gate.members-gate.members-gate .members-gate-login.members-gate-login, html body .members-gate.members-gate.members-gate button.members-gate-login {
    display: block !important; width: 100% !important; min-height: 0 !important; margin: 10px 0 0 !important; padding: 10px 0 !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 700 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; cursor: pointer;
}
html body .members-gate.members-gate.members-gate .members-gate-join.members-gate-join * { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }

#shop-empty {
    display: none;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(88vw, 360px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--mobile-shop-text) !important;
    border-color: transparent !important;
    text-align: center;
}

#shop-empty-visual {
    position: relative;
    width: min(82vw, 320px);
    height: 150px;
    margin: 0 auto 22px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--mobile-shop-text) 7%, transparent), transparent 34%),
        linear-gradient(var(--mobile-shop-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mobile-shop-grid-line) 1px, transparent 1px),
        transparent !important;
    background-size: auto, 14px 14px, 14px 14px;
    color: var(--mobile-shop-subtle) !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#shop-empty-mark {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: var(--mobile-shop-bg) !important;
    border: 1px solid var(--mobile-shop-border) !important;
    color: var(--mobile-shop-text) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

#shop-empty-mark i {
    font-size: 22px;
}

#shop-empty-title {
    margin: 0 0 8px;
    color: var(--mobile-shop-text) !important;
    font-size: 24px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: 0 !important;
}

#shop-empty-subtitle {
    max-width: 250px;
    margin: 0 auto 20px;
    color: var(--mobile-shop-muted) !important;
    font-size: 13px;
    line-height: 1.45;
}

#shop-empty-owner-action {
    display: none;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary-color, #57c7f5) 46%, transparent) !important;
    background: color-mix(in srgb, var(--primary-color, #57c7f5) 18%, #ffffff) !important;
    color: var(--primary-color, #168fc5) !important;
    -webkit-text-fill-color: var(--primary-color, #168fc5) !important;
    font-size: 13px;
    font-weight: 850;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 32px rgba(87, 199, 245, 0.18);
}

#shop-empty-owner-action,
#shop-empty-owner-action *,
#shop-empty-owner-action i {
    color: var(--primary-color, #168fc5) !important;
    -webkit-text-fill-color: var(--primary-color, #168fc5) !important;
}

#shop-empty-owner-action i {
    margin-right: 8px;
}

#shop-empty-payment {
    display: none;
    max-width: 280px;
    margin: 18px auto 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--mobile-shop-border) !important;
    color: var(--mobile-shop-text) !important;
    text-align: left;
}

.shop-empty-payment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shop-empty-payment-copy {
    min-width: 0;
}

#shop-empty-payment-label {
    color: var(--mobile-shop-text) !important;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#shop-empty-payment p {
    margin: 4px 0 0;
    color: var(--mobile-shop-muted) !important;
    font-size: 12px;
    line-height: 1.35;
}

#shop-empty-payment-action {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--mobile-shop-border) !important;
    background: var(--mobile-shop-button-bg) !important;
    color: var(--mobile-shop-text) !important;
    -webkit-text-fill-color: var(--mobile-shop-text) !important;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

        #shop-empty-signup {
            display: none;
            margin: 18px auto 0;
            width: 100%;
            max-width: 300px;
            text-align: left;
        }

        #shop-empty-signup-note {
            font-size: 11px;
            font-weight: 820;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--mobile-shop-muted) !important;
            margin-bottom: 10px;
        }

        #shop-empty-signup-form {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 8px;
        }

        #shop-empty-signup-input {
            min-height: 42px;
            border-radius: 999px;
            border: 1px solid var(--mobile-shop-border) !important;
            background: var(--mobile-shop-card-bg) !important;
            color: var(--mobile-shop-text) !important;
            -webkit-text-fill-color: var(--mobile-shop-text) !important;
            padding: 0 14px;
            font-size: 13px;
            outline: none;
        }

        #shop-empty-signup-input::placeholder {
            color: var(--mobile-shop-muted) !important;
            -webkit-text-fill-color: var(--mobile-shop-muted) !important;
        }

        #shop-empty-signup-submit {
            min-height: 42px;
            padding: 0 14px;
            border-radius: 999px;
            border: 1px solid rgba(var(--primary-rgb), 0.18) !important;
            background: rgba(var(--primary-rgb), 0.1) !important;
            color: var(--primary-color) !important;
            -webkit-text-fill-color: var(--primary-color) !important;
            font-size: 12px;
            font-weight: 850;
            white-space: nowrap;
        }

        #shop-empty-signup-status {
            min-height: 18px;
            margin-top: 10px;
            font-size: 12px;
            line-height: 1.35;
            color: var(--mobile-shop-muted) !important;
        }

        #shop-empty-signup-status.is-success {
            color: #1f8f48 !important;
        }

        #shop-empty-signup-status.is-error {
            color: var(--danger-color) !important;
        }

/* Guest, no products: the shared empty guide (empty-state.js) alone.
   Notifications is the only follow-up; no email signup in a placeholder. */
html body #shop-empty.is-guest-es > :not(.shop-empty-es) { display: none !important; }
html body #shop-empty.is-guest-es { width: min(92vw, 400px); }
html body #shop-empty.is-guest-es#shop-empty, html[data-appearance] body #shop-empty.is-guest-es#shop-empty#shop-empty { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

#shop-item-action-sheet {
    position: fixed;
    inset: 0;
    z-index: 120000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: color-mix(in srgb, var(--mobile-shop-bg) 42%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.mobile-shop-action-sheet-shell {
    width: 100%;
    max-width: 520px;
    padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}

.mobile-shop-action-sheet-card {
    margin-bottom: 10px;
    padding: 18px;
    border-radius: 26px;
    border: 1px solid var(--mobile-shop-border);
    background: var(--mobile-shop-bg);
    color: var(--mobile-shop-text);
    box-shadow: 0 26px 70px color-mix(in srgb, var(--mobile-shop-text) 14%, transparent);
}

.mobile-shop-action-sheet-kicker {
    margin-bottom: 7px;
    color: var(--mobile-shop-muted);
    font-size: 10px;
    font-weight: 840;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mobile-shop-action-sheet-title {
    margin-bottom: 16px;
    color: var(--mobile-shop-text);
    font-size: 24px;
    line-height: 1;
    font-weight: 860;
    letter-spacing: 0 !important;
}

.mobile-shop-action-sheet-actions {
    display: grid;
    gap: 10px;
}

.mobile-shop-action-sheet-button,
.mobile-shop-action-sheet-cancel {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 830;
    cursor: pointer;
}

.mobile-shop-action-sheet-button i,
.mobile-shop-action-sheet-cancel i {
    margin-right: 8px;
}

.mobile-shop-action-sheet-edit {
    border: 1px solid color-mix(in srgb, var(--primary-color, #4f46e5) 28%, transparent);
    background: color-mix(in srgb, var(--primary-color, #4f46e5) 10%, transparent);
    color: var(--primary-color, #4f46e5);
    -webkit-text-fill-color: var(--primary-color, #4f46e5);
}

.mobile-shop-action-sheet-delete {
    border: 1px solid rgba(220, 38, 38, 0.24);
    background: transparent;
    color: #b91c1c;
    -webkit-text-fill-color: #b91c1c;
}

.mobile-shop-action-sheet-cancel {
    border: 1px solid var(--mobile-shop-border);
    background: var(--mobile-shop-button-bg);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
}

[data-theme="dark"] #shop-item-action-sheet,
[data-theme="dark-accent"] #shop-item-action-sheet {
    background: rgba(0, 0, 0, 0.34);
}

.mobile-shop-dashboard-modal,
.mobile-shop-owner-orders-modal,
.mobile-shop-order-detail-sheet {
    --shop-dashboard-surface: var(--surface-color);
    --shop-dashboard-surface-soft: var(--input-bg);
    --shop-dashboard-border: var(--border-color);
    --shop-dashboard-muted: var(--text-secondary);
    --shop-dashboard-subtle: var(--text-muted);
    position: fixed;
    /* Reach the top edge and pad down to the header instead of starting at
       its height: the sheet's own background then covers the gap if the
       header is ever away, rather than the page behind showing through. */
    top: 0;
    padding-top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px));
    box-sizing: border-box;
    right: 0;
    bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    left: 0;
    background: var(--shop-dashboard-bg, var(--background-color));
    color: var(--shop-dashboard-text, var(--text-primary));
    display: flex;
    flex-direction: column;
}
.mobile-shop-dashboard-modal {
    z-index: 9000;
    animation: shopDashboardIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-shop-owner-orders-modal,
.mobile-shop-order-detail-sheet {
    z-index: 9001;
}
.mobile-shop-owner-orders-modal {
    animation: mobileShopOwnerOrdersIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mobile-shop-order-detail-sheet {
    animation: slideInRight 0.24s ease;
}
.mobile-shop-dashboard-header {
    background: transparent;
    padding: 10px 14px 6px;
    display: grid;
    gap: 10px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.mobile-shop-dashboard-titlebar,
.mobile-shop-order-detail-titlebar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
}
.mobile-shop-order-detail-titlebar {
    padding: 12px 14px 8px;
}
.mobile-shop-owner-orders-titlebar {
    padding-top: 20px;
}

.mobile-shop-owner-orders-modal .mobile-shop-owner-orders-titlebar {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 18px 8px;
}

.mobile-shop-owner-orders-filter-title {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.mobile-shop-owner-orders-filter-title .mobile-shop-dashboard-filter-strip {
    width: auto;
    max-width: 100%;
    justify-content: center;
    padding: 0;
    gap: 8px;
    overflow: visible;
}

.mobile-shop-owner-orders-filter-title .mobile-shop-dashboard-filter-btn {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 820;
}

.mobile-shop-owner-orders-filter-title .mobile-shop-dashboard-filter-count {
    display: none;
}

.mobile-shop-owner-orders-close {
    justify-self: end;
}
.mobile-shop-dashboard-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: none;
    cursor: pointer;
    font-size: 14px;
}
.mobile-shop-dashboard-center {
    min-width: 0;
    text-align: center;
}
.mobile-shop-dashboard-title {
    color: var(--shop-dashboard-text, var(--text-primary));
    font-weight: 820;
    letter-spacing: -0.02em;
    font-size: 17px;
    line-height: 42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-shop-dashboard-pill {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--shop-dashboard-surface-soft);
    border: 1px solid var(--shop-dashboard-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-dashboard-text, var(--text-primary));
    font-size: 11px;
    font-weight: 840;
    flex-shrink: 0;
}
.mobile-shop-dashboard-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 4px 18px calc(28px + env(safe-area-inset-bottom, 0px));
}
.mobile-shop-dashboard-home .mobile-shop-dashboard-scroll {
    padding-top: 12px;
}
.mobile-shop-dashboard-list,
.mobile-shop-dashboard-grid {
    display: grid;
}
.mobile-shop-dashboard-list {
    gap: 14px;
}
.mobile-shop-dashboard-grid {
    gap: 24px;
    padding-bottom: 18px;
}
.mobile-shop-dashboard-home {
    --shop-dashboard-bg: #f7f7f7;
    --shop-dashboard-surface: #ffffff;
    --shop-dashboard-surface-soft: #f1f1f1;
    --shop-dashboard-border: rgba(17, 17, 17, 0.08);
    --shop-dashboard-muted: rgba(17, 17, 17, 0.58);
    --shop-dashboard-subtle: rgba(17, 17, 17, 0.42);
    --shop-dashboard-text: #0b0b0b;
}
.mobile-shop-dashboard-home .mobile-shop-dashboard-header {
    background: #ffffff;
    border-bottom: 1px solid var(--shop-dashboard-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mobile-shop-dashboard-titlebar-clean {
    grid-template-columns: minmax(0, 1fr);
    min-height: 42px;
}
.mobile-shop-dashboard-range-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
}
.mobile-shop-dashboard-range-strip::-webkit-scrollbar {
    display: none;
}
.mobile-shop-dashboard-range-btn {
    flex: 1;
    min-width: 76px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    background: rgba(255, 255, 255, 0.72);
    color: rgba(15, 23, 42, 0.62);
    -webkit-text-fill-color: rgba(15, 23, 42, 0.62);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
}
.mobile-shop-dashboard-range-btn.is-active {
    border-color: rgba(15, 23, 42, 0.24);
    background: rgba(15, 23, 42, 0.08);
    color: #111111;
    -webkit-text-fill-color: #111111;
}
.mobile-shop-dashboard-range-btn.is-active,
.mobile-shop-dashboard-range-btn.is-active .mobile-shop-dashboard-range-label,
.mobile-shop-dashboard-range-btn.is-active *,
.mobile-shop-dashboard-range-btn:not(.is-active),
.mobile-shop-dashboard-range-btn:not(.is-active) .mobile-shop-dashboard-range-label {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}
.mobile-shop-dashboard-product-rank,
.mobile-shop-dashboard-product-rank span,
.mobile-shop-dashboard-product-rank * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.mobile-shop-dashboard-period-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.mobile-shop-dashboard-period-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.78);
    color: #111111;
    -webkit-text-fill-color: #111111;
    display: grid;
    place-items: center;
    font-size: 14px;
    box-shadow: none;
}
.mobile-shop-dashboard-period-label {
    min-width: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 950;
    color: #111111;
    -webkit-text-fill-color: #111111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-dashboard-calendar {
    display: grid;
    gap: 12px;
    border: 1px solid var(--shop-dashboard-border);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 247, 0.88));
    padding: 14px;
    box-shadow: 0 16px 36px rgba(17, 17, 17, 0.05);
}
.mobile-shop-dashboard-calendar-note {
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 12px;
    font-weight: 820;
    letter-spacing: 0.02em;
    text-align: center;
}

.mobile-shop-dashboard-today-card {
    gap: 14px;
}
.mobile-shop-dashboard-today-card.has-activity {
    border-color: rgba(17, 17, 17, 0.14);
    background: #ffffff;
}
.mobile-shop-dashboard-today-copy {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.mobile-shop-dashboard-today-copy > div {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.mobile-shop-dashboard-today-copy strong {
    color: #111111;
    -webkit-text-fill-color: #111111;
    font-size: 28px;
    line-height: 1;
    font-weight: 860;
    letter-spacing: -0.04em;
}
.mobile-shop-dashboard-today-copy em {
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}
.mobile-shop-dashboard-today-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.mobile-shop-dashboard-today-metrics span {
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    background: rgba(255, 255, 255, 0.78);
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    display: grid;
    place-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mobile-shop-dashboard-today-metrics b {
    color: #111111;
    -webkit-text-fill-color: #111111;
    font-size: 18px;
    line-height: 1;
    font-weight: 930;
}
.mobile-shop-dashboard-calendar-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 11px;
    font-weight: 860;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mobile-shop-dashboard-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    -webkit-text-fill-color: currentColor;
}
.mobile-shop-dashboard-calendar-legend i,
.mobile-shop-dashboard-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
}
.mobile-shop-dashboard-calendar-legend i.is-paid,
.mobile-shop-dashboard-dot.is-paid {
    background: #111111;
}
.mobile-shop-dashboard-calendar-legend i.is-pending,
.mobile-shop-dashboard-dot.is-pending {
    background: #ef573a;
}
.mobile-shop-dashboard-week-grid,
.mobile-shop-dashboard-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.mobile-shop-dashboard-weekday {
    color: var(--shop-dashboard-subtle);
    -webkit-text-fill-color: var(--shop-dashboard-subtle);
    font-size: 10px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}
.mobile-shop-dashboard-day-tile,
.mobile-shop-dashboard-day-empty,
.mobile-shop-dashboard-month-tile {
    min-width: 0;
    border-radius: 14px;
    border: 1px solid rgba(17, 17, 17, 0.07);
    background: rgba(255, 255, 255, 0.82);
}
.mobile-shop-dashboard-day-tile {
    min-height: 54px;
    padding: 7px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    color: #111111;
    -webkit-text-fill-color: #111111;
}
.mobile-shop-dashboard-day-tile.is-compact {
    min-height: 66px;
}
.mobile-shop-dashboard-day-tile.has-activity {
    border-color: rgba(17, 17, 17, 0.16);
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.06);
}
.mobile-shop-dashboard-day-tile.is-today {
    box-shadow: inset 0 0 0 2px rgba(239, 87, 58, 0.32), 0 8px 18px rgba(17, 17, 17, 0.04);
}
.mobile-shop-dashboard-day-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3px;
}
.mobile-shop-dashboard-day-top span {
    font-size: 13px;
    font-weight: 920;
    color: #111111;
    -webkit-text-fill-color: #111111;
}
.mobile-shop-dashboard-day-top small {
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}
.mobile-shop-dashboard-day-bottom {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 16px;
}
.mobile-shop-dashboard-day-bottom em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111111;
    -webkit-text-fill-color: #111111;
    font-size: 10px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.mobile-shop-dashboard-day-bottom.is-empty {
    opacity: 0;
}
.mobile-shop-dashboard-day-empty {
    min-height: 54px;
    background: transparent;
    border-color: transparent;
}
.mobile-shop-dashboard-year-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.mobile-shop-dashboard-month-tile {
    min-height: 66px;
    padding: 10px;
    display: grid;
    align-content: space-between;
    gap: 8px;
    color: #111111;
    -webkit-text-fill-color: #111111;
}
.mobile-shop-dashboard-month-tile.has-activity {
    background: #ffffff;
    border-color: rgba(17, 17, 17, 0.16);
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.06);
}
.mobile-shop-dashboard-month-top,
.mobile-shop-dashboard-month-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.mobile-shop-dashboard-month-top span {
    color: #111111;
    -webkit-text-fill-color: #111111;
    font-size: 12px;
    font-weight: 920;
    text-transform: uppercase;
}
.mobile-shop-dashboard-month-top strong {
    color: #111111;
    -webkit-text-fill-color: #111111;
    font-size: 12px;
    font-weight: 950;
}
.mobile-shop-dashboard-month-bottom em {
    min-width: 0;
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 880;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-dashboard-overview {
    display: grid;
    gap: 12px;
}
.mobile-shop-dashboard-hero-card,
.mobile-shop-dashboard-quiet-card {
    border: 1px solid var(--shop-dashboard-border);
    border-radius: 22px;
    background: var(--shop-dashboard-surface);
    padding: 18px;
    box-shadow: 0 18px 42px rgba(17, 17, 17, 0.06);
}
.mobile-shop-dashboard-hero-kicker {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-hero-value {
    margin-top: 10px;
    font-size: 46px;
    line-height: 0.92;
    font-weight: 860;
    letter-spacing: -0.055em;
    color: var(--shop-dashboard-text);
}
.mobile-shop-dashboard-hero-copy {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 720;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-product-list {
    display: grid;
    gap: 10px;
}
.mobile-shop-dashboard-product-row,
.mobile-shop-dashboard-owner-card {
    border: 1px solid var(--shop-dashboard-border);
    border-radius: 18px;
    background: var(--shop-dashboard-surface);
    color: var(--shop-dashboard-text);
    -webkit-text-fill-color: var(--shop-dashboard-text);
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.05);
}
.mobile-shop-dashboard-product-row {
    min-height: 72px;
    padding: 12px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.mobile-shop-dashboard-product-rank {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #0b0b0b;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 13px;
    font-weight: 860;
}
.mobile-shop-dashboard-product-main {
    min-width: 0;
}
.mobile-shop-dashboard-product-name {
    font-size: 15px;
    line-height: 1.15;
    font-weight: 840;
    color: var(--shop-dashboard-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-shop-dashboard-product-meta {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 760;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-product-value {
    font-size: 17px;
    font-weight: 850;
    color: var(--shop-dashboard-text);
    letter-spacing: -0.04em;
}
.mobile-shop-dashboard-owner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mobile-shop-dashboard-owner-card {
    min-height: 112px;
    padding: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-content: space-between;
    gap: 14px;
    text-align: left;
    cursor: pointer;
}
.mobile-shop-dashboard-owner-card-icon {
    grid-column: 1;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-text);
    -webkit-text-fill-color: var(--shop-dashboard-text);
}
.mobile-shop-dashboard-owner-card-copy {
    grid-column: 1;
    min-width: 0;
    display: grid;
    gap: 5px;
}
.mobile-shop-dashboard-owner-card-title,
.mobile-shop-dashboard-quiet-title {
    font-size: 16px;
    font-weight: 850;
    color: var(--shop-dashboard-text);
    line-height: 1.05;
}
.mobile-shop-dashboard-owner-card-meta,
.mobile-shop-dashboard-quiet-copy {
    font-size: 11px;
    font-weight: 730;
    line-height: 1.35;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-quiet-card {
    box-shadow: none;
}
.mobile-shop-dashboard-quiet-copy {
    margin-top: 6px;
}
.mobile-shop-dashboard-empty {
    padding: 30px 0;
    text-align: center;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-empty i {
    font-size: 28px;
    margin-bottom: 10px;
    opacity: 0.34;
}
.mobile-shop-dashboard-empty-title {
    font-size: 14px;
    font-weight: 760;
    color: var(--shop-dashboard-text, var(--text-primary));
}
.mobile-shop-dashboard-empty-copy {
    font-size: 12px;
    margin-top: 4px;
}
.mobile-shop-dashboard-message-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-message-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}
.mobile-shop-dashboard-message-empty p {
    margin: 0;
    font-size: 16px;
}
.mobile-shop-dashboard-error {
    display: grid;
    gap: 22px;
    padding: 8px 0 20px;
}
.mobile-shop-dashboard-error-action {
    padding: 24px 0;
    text-align: center;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-error-title {
    font-size: 18px;
    font-weight: 820;
    color: var(--shop-dashboard-text, var(--text-primary));
}
.mobile-shop-dashboard-error-copy {
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.45;
}
.mobile-shop-dashboard-small-btn {
    margin-top: 16px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-text, var(--text-primary));
    font-size: 12px;
    font-weight: 840;
}
.mobile-shop-dashboard-skeleton {
    display: grid;
    gap: 22px;
    padding: 8px 0;
}
.mobile-shop-dashboard-skeleton-head,
.mobile-shop-dashboard-skeleton-row {
    display: grid;
    gap: 10px;
}
.mobile-shop-dashboard-skeleton-head {
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-dashboard-skeleton-row {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-dashboard-skeleton-line {
    border-radius: 999px;
    background: var(--shop-dashboard-surface-soft);
    animation: shopDashboardPulse 1s ease-in-out infinite;
}
.mobile-shop-dashboard-skeleton-block {
    border-radius: 18px;
    background: var(--shop-dashboard-surface-soft);
    animation: shopDashboardPulse 1s ease-in-out infinite;
}
.mobile-shop-skel-kicker { height: 10px; width: 86px; }
.mobile-shop-skel-title { height: 36px; width: 58%; border-radius: 12px; }
.mobile-shop-skel-action { height: 46px; }
.mobile-shop-skel-row-kicker { height: 10px; width: 72px; }
.mobile-shop-skel-row-title { height: 24px; width: 62%; border-radius: 10px; }
.mobile-shop-skel-row-block { height: 64px; }
.mobile-shop-skel-order-kicker { height: 12px; width: 38%; }
.mobile-shop-skel-order-title { height: 20px; width: 74%; border-radius: 10px; }
.mobile-shop-skel-order-meta { height: 14px; width: 54%; }
.mobile-shop-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--shop-dashboard-border);
    border-bottom: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-dashboard-stat {
    padding: 13px 8px;
    border-left: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-dashboard-stat:first-child {
    padding-left: 0;
    border-left: 0;
}
.mobile-shop-dashboard-stat-label {
    font-size: 9px;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shop-dashboard-muted);
    margin-bottom: 7px;
}
.mobile-shop-dashboard-stat-value {
    font-size: 21px;
    font-weight: 850;
    letter-spacing: -0.04em;
    color: var(--shop-dashboard-text, var(--text-primary));
}
.mobile-shop-dashboard-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.mobile-shop-dashboard-primary-btn,
.mobile-shop-dashboard-secondary-btn,
.mobile-shop-dashboard-round-btn,
.mobile-shop-dashboard-muted-btn {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    font-weight: 820;
}
.mobile-shop-dashboard-primary-btn {
    min-height: 46px;
    flex: 1;
    border: 1px solid var(--shop-dashboard-border);
    background: rgba(99,91,255,0.1);
    color: #4f46e5;
    -webkit-text-fill-color: #4f46e5;
    box-shadow: 0 14px 30px rgba(99,91,255,0.12);
    font-size: 13px;
    gap: 8px;
}
.mobile-shop-dashboard-secondary-btn {
    min-height: 46px;
    flex: 1;
    border: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    font-size: 13px;
    gap: 8px;
}
.mobile-shop-dashboard-secondary-btn:disabled {
    opacity: 0.62;
}
.mobile-shop-dashboard-round-btn {
    width: 46px;
    height: 46px;
    border: 1px solid var(--shop-dashboard-border);
    background: transparent;
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    font-size: 14px;
}
.mobile-shop-dashboard-filter-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 16px 2px;
    scrollbar-width: none;
}
.mobile-shop-dashboard-filter-btn {
    min-height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    border: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    padding: 0 12px;
    font-size: 12px;
    font-weight: 760;
    box-shadow: none;
}
.mobile-shop-dashboard-filter-btn.is-active {
    background: var(--shop-dashboard-surface-soft);
}
.mobile-shop-dashboard-filter-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--shop-dashboard-surface);
    color: var(--shop-dashboard-muted);
    font-size: 10px;
    font-weight: 780;
}

[data-theme="dark"] .mobile-shop-dashboard-modal,
[data-theme="dark"] .mobile-shop-owner-orders-modal,
[data-theme="dark"] .mobile-shop-order-detail-sheet,
body[data-theme="dark"] .mobile-shop-dashboard-modal,
body[data-theme="dark"] .mobile-shop-owner-orders-modal,
body[data-theme="dark"] .mobile-shop-order-detail-sheet,
[data-theme="dark-accent"] .mobile-shop-dashboard-modal,
[data-theme="dark-accent"] .mobile-shop-owner-orders-modal,
[data-theme="dark-accent"] .mobile-shop-order-detail-sheet,
body[data-theme="dark-accent"] .mobile-shop-dashboard-modal,
body[data-theme="dark-accent"] .mobile-shop-owner-orders-modal,
body[data-theme="dark-accent"] .mobile-shop-order-detail-sheet {
    --shop-dashboard-bg: var(--mobile-shop-bg, #050505);
    --shop-dashboard-surface: var(--mobile-shop-card-bg, rgba(255, 255, 255, 0.045));
    --shop-dashboard-surface-soft: var(--mobile-shop-button-bg, rgba(255, 255, 255, 0.075));
    --shop-dashboard-border: var(--mobile-shop-border, rgba(255, 255, 255, 0.12));
    --shop-dashboard-muted: var(--mobile-shop-muted, rgba(247, 247, 247, 0.68));
    --shop-dashboard-subtle: var(--mobile-shop-subtle, rgba(247, 247, 247, 0.45));
    --shop-dashboard-text: var(--mobile-shop-text, #f7f7f7);
    background: var(--shop-dashboard-bg) !important;
    color: var(--shop-dashboard-text) !important;
}

[data-theme="dark"] .mobile-shop-owner-orders-titlebar,
body[data-theme="dark"] .mobile-shop-owner-orders-titlebar,
[data-theme="dark-accent"] .mobile-shop-owner-orders-titlebar,
body[data-theme="dark-accent"] .mobile-shop-owner-orders-titlebar {
    background: var(--shop-dashboard-bg) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-filter-btn,
body[data-theme="dark"] .mobile-shop-dashboard-filter-btn,
[data-theme="dark-accent"] .mobile-shop-dashboard-filter-btn,
body[data-theme="dark-accent"] .mobile-shop-dashboard-filter-btn {
    background: var(--shop-dashboard-surface-soft) !important;
    border-color: var(--shop-dashboard-border) !important;
    color: var(--shop-dashboard-text) !important;
    -webkit-text-fill-color: var(--shop-dashboard-text) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-filter-btn *,
body[data-theme="dark"] .mobile-shop-dashboard-filter-btn *,
[data-theme="dark-accent"] .mobile-shop-dashboard-filter-btn *,
body[data-theme="dark-accent"] .mobile-shop-dashboard-filter-btn *,
[data-theme="dark"] .mobile-shop-dashboard-range-btn *,
body[data-theme="dark"] .mobile-shop-dashboard-range-btn *,
[data-theme="dark-accent"] .mobile-shop-dashboard-range-btn *,
body[data-theme="dark-accent"] .mobile-shop-dashboard-range-btn *,
[data-theme="dark"] .mobile-shop-dashboard-period-btn *,
body[data-theme="dark"] .mobile-shop-dashboard-period-btn *,
[data-theme="dark-accent"] .mobile-shop-dashboard-period-btn *,
body[data-theme="dark-accent"] .mobile-shop-dashboard-period-btn * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

[data-theme="dark"] .mobile-shop-dashboard-filter-btn.is-active,
body[data-theme="dark"] .mobile-shop-dashboard-filter-btn.is-active,
[data-theme="dark-accent"] .mobile-shop-dashboard-filter-btn.is-active,
body[data-theme="dark-accent"] .mobile-shop-dashboard-filter-btn.is-active {
    background: #f7f7f7 !important;
    border-color: #f7f7f7 !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

[data-theme="dark"] .mobile-shop-dashboard-filter-btn.is-active *,
body[data-theme="dark"] .mobile-shop-dashboard-filter-btn.is-active *,
[data-theme="dark-accent"] .mobile-shop-dashboard-filter-btn.is-active *,
body[data-theme="dark-accent"] .mobile-shop-dashboard-filter-btn.is-active * {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

[data-theme="dark"] .mobile-shop-dashboard-home .mobile-shop-dashboard-header,
body[data-theme="dark"] .mobile-shop-dashboard-home .mobile-shop-dashboard-header,
[data-theme="dark-accent"] .mobile-shop-dashboard-home .mobile-shop-dashboard-header,
body[data-theme="dark-accent"] .mobile-shop-dashboard-home .mobile-shop-dashboard-header {
    background: var(--shop-dashboard-bg) !important;
    border-bottom-color: var(--shop-dashboard-border) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-range-btn,
body[data-theme="dark"] .mobile-shop-dashboard-range-btn,
[data-theme="dark-accent"] .mobile-shop-dashboard-range-btn,
body[data-theme="dark-accent"] .mobile-shop-dashboard-range-btn,
[data-theme="dark"] .mobile-shop-dashboard-period-btn,
body[data-theme="dark"] .mobile-shop-dashboard-period-btn,
[data-theme="dark-accent"] .mobile-shop-dashboard-period-btn,
body[data-theme="dark-accent"] .mobile-shop-dashboard-period-btn {
    background: var(--shop-dashboard-surface-soft) !important;
    border-color: var(--shop-dashboard-border) !important;
    color: var(--shop-dashboard-text) !important;
    -webkit-text-fill-color: var(--shop-dashboard-text) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-range-btn.is-active,
body[data-theme="dark"] .mobile-shop-dashboard-range-btn.is-active,
[data-theme="dark-accent"] .mobile-shop-dashboard-range-btn.is-active,
body[data-theme="dark-accent"] .mobile-shop-dashboard-range-btn.is-active {
    background: color-mix(in srgb, var(--primary-color, #ff5738) 20%, rgba(255, 255, 255, 0.08)) !important;
    border-color: color-mix(in srgb, var(--primary-color, #ff5738) 72%, var(--shop-dashboard-border)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .mobile-shop-dashboard-range-btn.is-active *,
body[data-theme="dark"] .mobile-shop-dashboard-range-btn.is-active *,
[data-theme="dark-accent"] .mobile-shop-dashboard-range-btn.is-active *,
body[data-theme="dark-accent"] .mobile-shop-dashboard-range-btn.is-active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

[data-theme="dark"] .mobile-shop-dashboard-period-label,
body[data-theme="dark"] .mobile-shop-dashboard-period-label,
[data-theme="dark-accent"] .mobile-shop-dashboard-period-label,
body[data-theme="dark-accent"] .mobile-shop-dashboard-period-label {
    color: var(--shop-dashboard-text) !important;
    -webkit-text-fill-color: var(--shop-dashboard-text) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-calendar,
body[data-theme="dark"] .mobile-shop-dashboard-calendar,
[data-theme="dark-accent"] .mobile-shop-dashboard-calendar,
body[data-theme="dark-accent"] .mobile-shop-dashboard-calendar,
[data-theme="dark"] .mobile-shop-dashboard-hero-card,
body[data-theme="dark"] .mobile-shop-dashboard-hero-card,
[data-theme="dark-accent"] .mobile-shop-dashboard-hero-card,
body[data-theme="dark-accent"] .mobile-shop-dashboard-hero-card,
[data-theme="dark"] .mobile-shop-dashboard-quiet-card,
body[data-theme="dark"] .mobile-shop-dashboard-quiet-card,
[data-theme="dark-accent"] .mobile-shop-dashboard-quiet-card,
body[data-theme="dark-accent"] .mobile-shop-dashboard-quiet-card,
[data-theme="dark"] .mobile-shop-dashboard-owner-card,
body[data-theme="dark"] .mobile-shop-dashboard-owner-card,
[data-theme="dark-accent"] .mobile-shop-dashboard-owner-card,
body[data-theme="dark-accent"] .mobile-shop-dashboard-owner-card {
    background: var(--shop-dashboard-surface) !important;
    border-color: var(--shop-dashboard-border) !important;
    color: var(--shop-dashboard-text) !important;
    -webkit-text-fill-color: var(--shop-dashboard-text) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-today-card.has-activity,
body[data-theme="dark"] .mobile-shop-dashboard-today-card.has-activity,
[data-theme="dark-accent"] .mobile-shop-dashboard-today-card.has-activity,
body[data-theme="dark-accent"] .mobile-shop-dashboard-today-card.has-activity,
[data-theme="dark"] .mobile-shop-dashboard-today-metrics span,
body[data-theme="dark"] .mobile-shop-dashboard-today-metrics span,
[data-theme="dark-accent"] .mobile-shop-dashboard-today-metrics span,
body[data-theme="dark-accent"] .mobile-shop-dashboard-today-metrics span,
[data-theme="dark"] .mobile-shop-dashboard-day-tile,
body[data-theme="dark"] .mobile-shop-dashboard-day-tile,
[data-theme="dark-accent"] .mobile-shop-dashboard-day-tile,
body[data-theme="dark-accent"] .mobile-shop-dashboard-day-tile,
[data-theme="dark"] .mobile-shop-dashboard-month-tile,
body[data-theme="dark"] .mobile-shop-dashboard-month-tile,
[data-theme="dark-accent"] .mobile-shop-dashboard-month-tile,
body[data-theme="dark-accent"] .mobile-shop-dashboard-month-tile {
    background: var(--shop-dashboard-surface-soft) !important;
    border-color: var(--shop-dashboard-border) !important;
    color: var(--shop-dashboard-text) !important;
    -webkit-text-fill-color: var(--shop-dashboard-text) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .mobile-shop-dashboard-day-tile.has-activity,
body[data-theme="dark"] .mobile-shop-dashboard-day-tile.has-activity,
[data-theme="dark-accent"] .mobile-shop-dashboard-day-tile.has-activity,
body[data-theme="dark-accent"] .mobile-shop-dashboard-day-tile.has-activity,
[data-theme="dark"] .mobile-shop-dashboard-month-tile.has-activity,
body[data-theme="dark"] .mobile-shop-dashboard-month-tile.has-activity,
[data-theme="dark-accent"] .mobile-shop-dashboard-month-tile.has-activity,
body[data-theme="dark-accent"] .mobile-shop-dashboard-month-tile.has-activity {
    background: color-mix(in srgb, var(--shop-dashboard-surface-soft) 78%, var(--primary-color, #ff5738) 22%) !important;
    border-color: color-mix(in srgb, var(--primary-color, #ff5738) 50%, var(--shop-dashboard-border)) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-today-copy strong,
body[data-theme="dark"] .mobile-shop-dashboard-today-copy strong,
[data-theme="dark-accent"] .mobile-shop-dashboard-today-copy strong,
body[data-theme="dark-accent"] .mobile-shop-dashboard-today-copy strong,
[data-theme="dark"] .mobile-shop-dashboard-today-metrics b,
body[data-theme="dark"] .mobile-shop-dashboard-today-metrics b,
[data-theme="dark-accent"] .mobile-shop-dashboard-today-metrics b,
body[data-theme="dark-accent"] .mobile-shop-dashboard-today-metrics b,
[data-theme="dark"] .mobile-shop-dashboard-day-top span,
body[data-theme="dark"] .mobile-shop-dashboard-day-top span,
[data-theme="dark-accent"] .mobile-shop-dashboard-day-top span,
body[data-theme="dark-accent"] .mobile-shop-dashboard-day-top span,
[data-theme="dark"] .mobile-shop-dashboard-day-bottom em,
body[data-theme="dark"] .mobile-shop-dashboard-day-bottom em,
[data-theme="dark-accent"] .mobile-shop-dashboard-day-bottom em,
body[data-theme="dark-accent"] .mobile-shop-dashboard-day-bottom em,
[data-theme="dark"] .mobile-shop-dashboard-month-top span,
body[data-theme="dark"] .mobile-shop-dashboard-month-top span,
[data-theme="dark-accent"] .mobile-shop-dashboard-month-top span,
body[data-theme="dark-accent"] .mobile-shop-dashboard-month-top span,
[data-theme="dark"] .mobile-shop-dashboard-month-top strong,
body[data-theme="dark"] .mobile-shop-dashboard-month-top strong,
[data-theme="dark-accent"] .mobile-shop-dashboard-month-top strong,
body[data-theme="dark-accent"] .mobile-shop-dashboard-month-top strong {
    color: var(--shop-dashboard-text) !important;
    -webkit-text-fill-color: var(--shop-dashboard-text) !important;
}
.mobile-shop-dashboard-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}
.mobile-shop-dashboard-kicker {
    font-size: 10px;
    font-weight: 820;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shop-dashboard-muted);
    margin-bottom: 5px;
}
.mobile-shop-dashboard-section-title {
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -0.035em;
    color: var(--shop-dashboard-text, var(--text-primary));
    line-height: 1;
}
.mobile-shop-dashboard-card-section {
    display: grid;
    gap: 12px;
    padding-top: 2px;
}
.mobile-shop-dashboard-review-card {
    width: 100%;
    border: 1px solid var(--shop-dashboard-border);
    border-radius: 22px;
    background: var(--shop-dashboard-surface);
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    padding: 15px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto 24px;
    align-items: center;
    gap: 12px;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
}
.mobile-shop-dashboard-review-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-text, var(--text-primary));
}
.mobile-shop-dashboard-review-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
}
.mobile-shop-dashboard-review-kicker {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-review-title {
    font-size: 19px;
    font-weight: 880;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--shop-dashboard-text, var(--text-primary));
}
.mobile-shop-dashboard-review-meta {
    font-size: 11px;
    font-weight: 760;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-review-badge {
    min-width: 38px;
    height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 11px;
    font-weight: 860;
    white-space: nowrap;
}
.mobile-shop-dashboard-review-badge.has-pending {
    border-color: rgba(var(--primary-rgb), 0.28);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    -webkit-text-fill-color: var(--primary-color);
}

.mobile-shop-dashboard-card-cue {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: end;
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 10px;
}

.mobile-shop-dashboard-owner-card .mobile-shop-dashboard-card-cue {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.mobile-shop-dashboard-review-card .mobile-shop-dashboard-card-cue {
    grid-column: 4;
}

.mobile-shop-dashboard-owner-card:active,
.mobile-shop-dashboard-review-card:active {
    transform: translateY(1px);
}

[data-theme="dark"] .mobile-shop-dashboard-review-card,
body[data-theme="dark"] .mobile-shop-dashboard-review-card,
[data-theme="dark-accent"] .mobile-shop-dashboard-review-card,
body[data-theme="dark-accent"] .mobile-shop-dashboard-review-card {
    background: var(--shop-dashboard-surface) !important;
    border-color: var(--shop-dashboard-border) !important;
    color: var(--shop-dashboard-text) !important;
    -webkit-text-fill-color: var(--shop-dashboard-text) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-review-card *,
body[data-theme="dark"] .mobile-shop-dashboard-review-card *,
[data-theme="dark-accent"] .mobile-shop-dashboard-review-card *,
body[data-theme="dark-accent"] .mobile-shop-dashboard-review-card * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

[data-theme="dark"] .mobile-shop-dashboard-review-icon,
body[data-theme="dark"] .mobile-shop-dashboard-review-icon,
[data-theme="dark-accent"] .mobile-shop-dashboard-review-icon,
body[data-theme="dark-accent"] .mobile-shop-dashboard-review-icon,
[data-theme="dark"] .mobile-shop-dashboard-review-badge,
body[data-theme="dark"] .mobile-shop-dashboard-review-badge,
[data-theme="dark-accent"] .mobile-shop-dashboard-review-badge,
body[data-theme="dark-accent"] .mobile-shop-dashboard-review-badge {
    background: var(--shop-dashboard-surface-soft) !important;
    border-color: var(--shop-dashboard-border) !important;
    color: var(--shop-dashboard-muted) !important;
    -webkit-text-fill-color: var(--shop-dashboard-muted) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-review-title,
body[data-theme="dark"] .mobile-shop-dashboard-review-title,
[data-theme="dark-accent"] .mobile-shop-dashboard-review-title,
body[data-theme="dark-accent"] .mobile-shop-dashboard-review-title {
    color: var(--shop-dashboard-text) !important;
    -webkit-text-fill-color: var(--shop-dashboard-text) !important;
}

[data-theme="dark"] .mobile-shop-dashboard-review-kicker,
body[data-theme="dark"] .mobile-shop-dashboard-review-kicker,
[data-theme="dark"] .mobile-shop-dashboard-review-meta,
body[data-theme="dark"] .mobile-shop-dashboard-review-meta,
[data-theme="dark-accent"] .mobile-shop-dashboard-review-kicker,
body[data-theme="dark-accent"] .mobile-shop-dashboard-review-kicker,
[data-theme="dark-accent"] .mobile-shop-dashboard-review-meta,
body[data-theme="dark-accent"] .mobile-shop-dashboard-review-meta {
    color: var(--shop-dashboard-muted) !important;
    -webkit-text-fill-color: var(--shop-dashboard-muted) !important;
}
.mobile-shop-order-row {
    padding: 14px 0 15px;
    border-bottom: 1px solid var(--shop-dashboard-border);
    display: grid;
    gap: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mobile-shop-order-row-top,
.mobile-shop-order-row-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.mobile-shop-order-row-top {
    align-items: flex-start;
}
.mobile-shop-order-row-bottom {
    align-items: flex-end;
}
.mobile-shop-order-row-main {
    min-width: 0;
    flex: 1;
}
.mobile-shop-order-row-customer {
    font-size: 16px;
    font-weight: 840;
    letter-spacing: -0.02em;
    color: var(--shop-dashboard-text, var(--text-primary));
    line-height: 1.15;
    margin-bottom: 5px;
}
.mobile-shop-order-row-contact,
.mobile-shop-order-row-meta {
    color: var(--shop-dashboard-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-shop-order-row-contact {
    font-size: 11px;
    font-weight: 720;
    line-height: 1.35;
}
.mobile-shop-order-row-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 840;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.mobile-shop-order-row-item {
    font-size: 14px;
    font-weight: 820;
    color: var(--shop-dashboard-text, var(--text-primary));
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-shop-order-row-meta {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
}
.mobile-shop-order-row-total {
    font-size: 22px;
    font-weight: 880;
    color: var(--shop-dashboard-text, var(--text-primary));
    letter-spacing: -0.05em;
    line-height: 1;
}
.mobile-shop-order-row-actions {
    display: flex;
    justify-content: flex-end;
}
.mobile-shop-order-row-ship-btn {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-surface);
    color: var(--shop-dashboard-text, var(--text-primary));
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 0;
    cursor: pointer;
}
.mobile-shop-dashboard-list-empty {
    padding: 12px 0 4px;
    color: var(--shop-dashboard-muted);
}
.mobile-shop-dashboard-list-empty-title {
    font-size: 14px;
    font-weight: 760;
    color: var(--shop-dashboard-text, var(--text-primary));
}
.mobile-shop-dashboard-list-empty-copy {
    font-size: 12px;
    margin-top: 4px;
}
.mobile-shop-dashboard-feed-row {
    display: grid;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-dashboard-feed-row.is-clickable {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--shop-dashboard-border);
    border-radius: 18px;
    background: var(--shop-dashboard-surface, #fff);
    padding: 14px;
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    text-align: left;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.04);
}
.mobile-shop-dashboard-feed-row.is-clickable:active {
    transform: scale(0.99);
    background: var(--shop-dashboard-surface-soft, #f7f7f7);
}
.mobile-shop-dashboard-feed-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.mobile-shop-dashboard-feed-copy {
    min-width: 0;
    flex: 1;
}
.mobile-shop-dashboard-feed-title {
    font-size: 14px;
    font-weight: 840;
    color: var(--shop-dashboard-text, var(--text-primary));
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-shop-dashboard-feed-message {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.38;
    font-weight: 720;
    color: var(--shop-dashboard-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mobile-shop-dashboard-feed-meta {
    margin-top: 7px;
    font-size: 11px;
    font-weight: 760;
    color: var(--shop-dashboard-subtle);
}
.mobile-shop-dashboard-feed-badge {
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-text, var(--text-primary));
    font-size: 10px;
    font-weight: 840;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mobile-shop-dashboard-feed-badge.is-new {
    border-color: rgba(var(--primary-rgb), 0.24);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}
.mobile-shop-dashboard-feed-badge.is-contacted {
    border-color: rgba(31, 143, 72, 0.24);
    background: rgba(31, 143, 72, 0.08);
    color: #1f8f48;
}
.mobile-shop-dashboard-feed-cue {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    background: var(--shop-dashboard-surface-soft);
    font-size: 11px;
}
.mobile-shop-dashboard-activity-section {
    gap: 10px;
}
.mobile-shop-dashboard-activity-total {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 11px;
    font-weight: 860;
    white-space: nowrap;
}
.mobile-shop-dashboard-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.mobile-shop-dashboard-activity-card {
    width: 100%;
    min-height: 86px;
    padding: 12px;
    border: 1px solid var(--shop-dashboard-border);
    border-radius: 16px;
    background: var(--shop-dashboard-surface);
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    box-shadow: none;
}
.mobile-shop-dashboard-activity-card:active {
    transform: translateY(1px);
}
.mobile-shop-dashboard-activity-card-top {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.mobile-shop-dashboard-activity-icon {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 12px;
}
.mobile-shop-dashboard-activity-count {
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--shop-dashboard-border);
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 12px;
    font-weight: 880;
}
.mobile-shop-dashboard-activity-count.has-new {
    border-color: rgba(var(--primary-rgb), 0.28);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    -webkit-text-fill-color: var(--primary-color);
}
.mobile-shop-dashboard-activity-title {
    grid-column: 1;
    font-size: 15px;
    font-weight: 880;
    line-height: 1.05;
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
}
.mobile-shop-dashboard-activity-meta {
    grid-column: 1;
    margin-top: -4px;
    font-size: 10px;
    font-weight: 760;
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
}

.mobile-shop-dashboard-activity-card .mobile-shop-dashboard-card-cue {
    grid-column: 2;
    grid-row: 2 / span 2;
}
.mobile-shop-dashboard-activity-feed {
    display: grid;
    gap: 8px;
}
.mobile-shop-dashboard-activity-lane {
    border: 1px solid var(--shop-dashboard-border);
    border-radius: 16px;
    background: var(--shop-dashboard-surface);
    overflow: hidden;
}
.mobile-shop-dashboard-activity-lane-head {
    min-height: 34px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-surface-soft);
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 10px;
    font-weight: 860;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mobile-shop-dashboard-activity-lane-head strong {
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    font-size: 10px;
    font-weight: 880;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.mobile-shop-dashboard-activity-lane .mobile-shop-dashboard-feed-row {
    padding: 10px 11px;
}
.mobile-shop-dashboard-activity-lane .mobile-shop-dashboard-feed-row:last-child {
    border-bottom: 0;
}
.mobile-shop-dashboard-activity-lane .mobile-shop-dashboard-list-empty {
    padding: 12px 11px;
}
.mobile-shop-dashboard-activity-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    padding-top: var(--mobile-app-header-height, 178px);
    box-sizing: border-box;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 2147483501;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    background: var(--shop-dashboard-bg, #fff);
    color: var(--shop-dashboard-text, var(--text-primary));
}
.mobile-shop-dashboard-activity-sheet {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--shop-dashboard-bg, #fff);
    color: var(--shop-dashboard-text, var(--text-primary));
    padding: 0;
    box-shadow: none;
}
.mobile-shop-dashboard-activity-sheet-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-bg, #fff);
}
.mobile-shop-dashboard-activity-back {
    width: 44px;
    height: 44px;
    border: 1px solid var(--shop-dashboard-border);
    border-radius: 999px;
    background: var(--shop-dashboard-surface, #fff);
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}
.mobile-shop-dashboard-activity-sheet-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px 16px 22px;
}
.mobile-shop-dashboard-activity-sheet-list .mobile-shop-dashboard-feed-row:last-child {
    border-bottom: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-dashboard-activity-detail {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px 18px 24px;
}
.mobile-shop-dashboard-activity-detail-card {
    border: 1px solid var(--shop-dashboard-border);
    border-radius: 22px;
    background: var(--shop-dashboard-surface, #fff);
    padding: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
}
.mobile-shop-dashboard-activity-detail-body {
    margin-top: 10px;
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    font-size: 18px;
    font-weight: 720;
    line-height: 1.3;
}
.mobile-shop-dashboard-activity-detail-email {
    margin-top: 16px;
    color: var(--shop-dashboard-muted);
    -webkit-text-fill-color: var(--shop-dashboard-muted);
    font-size: 14px;
    font-weight: 760;
    word-break: break-word;
}
.mobile-shop-dashboard-activity-primary {
    min-height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--shop-dashboard-border);
    background: var(--shop-dashboard-surface-soft, #f5f5f5);
    color: var(--shop-dashboard-text, var(--text-primary));
    -webkit-text-fill-color: var(--shop-dashboard-text, var(--text-primary));
    text-decoration: none;
    font-size: 15px;
    font-weight: 850;
}

[data-theme="dark"] .mobile-shop-dashboard-activity-modal,
body[data-theme="dark"] .mobile-shop-dashboard-activity-modal,
[data-theme="dark-accent"] .mobile-shop-dashboard-activity-modal,
body[data-theme="dark-accent"] .mobile-shop-dashboard-activity-modal {
    background: var(--shop-dashboard-bg, #050505);
}

[data-theme="dark"] .mobile-shop-dashboard-activity-sheet,
body[data-theme="dark"] .mobile-shop-dashboard-activity-sheet,
[data-theme="dark-accent"] .mobile-shop-dashboard-activity-sheet,
body[data-theme="dark-accent"] .mobile-shop-dashboard-activity-sheet {
    background: var(--shop-dashboard-bg, #050505);
    border-color: var(--shop-dashboard-border);
    color: var(--shop-dashboard-text, #f7f7f7);
}

[data-theme="dark"] .mobile-shop-dashboard-activity-back,
body[data-theme="dark"] .mobile-shop-dashboard-activity-back,
[data-theme="dark-accent"] .mobile-shop-dashboard-activity-back,
body[data-theme="dark-accent"] .mobile-shop-dashboard-activity-back {
    color: var(--shop-dashboard-text, #f7f7f7);
    -webkit-text-fill-color: var(--shop-dashboard-text, #f7f7f7);
}
.mobile-shop-receipt-status-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 850;
}
.mobile-shop-receipt-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 18px calc(28px + env(safe-area-inset-bottom, 0px));
}
.mobile-shop-receipt-grid {
    display: grid;
    gap: 24px;
}
.mobile-shop-receipt-section {
    display: grid;
    gap: 18px;
    padding: 8px 0 22px;
    border-bottom: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-receipt-kicker {
    font-size: 10px;
    font-weight: 840;
    letter-spacing: 0.08em;
    color: var(--shop-dashboard-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.mobile-shop-receipt-customer {
    font-size: 36px;
    line-height: 0.94;
    font-weight: 880;
    letter-spacing: -0.05em;
    color: var(--shop-dashboard-text, var(--text-primary));
}
.mobile-shop-receipt-meta {
    font-size: 12px;
    font-weight: 720;
    color: var(--shop-dashboard-muted);
    margin-top: 10px;
    line-height: 1.35;
    word-break: break-word;
}
.mobile-shop-receipt-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--shop-dashboard-border);
    border-bottom: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-receipt-stat {
    padding: 13px 8px;
    border-left: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-receipt-stat:first-child {
    padding-left: 0;
    border-left: 0;
}
.mobile-shop-receipt-stat:last-child {
    padding-right: 0;
}
.mobile-shop-receipt-stat-label {
    font-size: 9px;
    font-weight: 820;
    letter-spacing: 0.08em;
    color: var(--shop-dashboard-muted);
    text-transform: uppercase;
    margin-bottom: 7px;
}
.mobile-shop-receipt-stat-value {
    font-size: 22px;
    font-weight: 880;
    letter-spacing: -0.05em;
}
.mobile-shop-receipt-detail-section {
    display: grid;
    gap: 13px;
}
.mobile-shop-receipt-product {
    font-size: 24px;
    font-weight: 860;
    letter-spacing: -0.035em;
    color: var(--shop-dashboard-text, var(--text-primary));
    line-height: 1.02;
}
.mobile-shop-receipt-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--shop-dashboard-border);
    font-size: 13px;
}
.mobile-shop-receipt-row-label {
    color: var(--shop-dashboard-muted);
    font-weight: 760;
}
.mobile-shop-receipt-row-value {
    font-weight: 820;
    text-align: right;
    color: var(--shop-dashboard-text, var(--text-primary));
    word-break: break-word;
}
.mobile-shop-receipt-shipping {
    display: grid;
    gap: 9px;
    padding-top: 2px;
}
.mobile-shop-receipt-shipping-copy {
    font-size: 13px;
    line-height: 1.5;
    color: var(--shop-dashboard-text, var(--text-primary));
    white-space: pre-wrap;
    padding: 14px 0;
    border-top: 1px solid var(--shop-dashboard-border);
    border-bottom: 1px solid var(--shop-dashboard-border);
}
.mobile-shop-receipt-ship-btn {
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(99,91,255,0.22);
    background: rgba(99,91,255,0.1);
    color: #4f46e5;
    -webkit-text-fill-color: #4f46e5;
    font-size: 13px;
    font-weight: 820;
    box-shadow: 0 14px 30px rgba(99,91,255,0.12);
}
@keyframes shopDashboardIn {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shopDashboardOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(10px) scale(0.99); }
}
@keyframes shopDashboardPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}
@keyframes mobileShopOwnerOrdersIn {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mobileShopOwnerOrdersOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(10px) scale(0.99); }
}
@keyframes mobileShopOwnerOrdersPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}

/* Compact mobile dashboard pass. Keep this last so it overrides the older
   spacious dashboard rules without touching product/detail shop surfaces. */
.mobile-shop-dashboard-home .mobile-shop-dashboard-header {
    padding: 6px 14px 4px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-scroll {
    padding: 2px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-grid {
    gap: 14px !important;
    padding-bottom: 10px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-overview {
    gap: 10px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-range-strip {
    gap: 7px !important;
    padding: 0 !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-range-btn {
    min-width: 0 !important;
    height: 34px !important;
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-calendar {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.05) !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-period-controls {
    gap: 8px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-period-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-period-label {
    font-size: 13px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-calendar-note {
    font-size: 10px !important;
    line-height: 1.15 !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-calendar-legend {
    gap: 10px !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-week-grid,
.mobile-shop-dashboard-home .mobile-shop-dashboard-month-grid {
    gap: 5px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-weekday {
    font-size: 8px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-day-tile,
.mobile-shop-dashboard-home .mobile-shop-dashboard-day-empty {
    min-height: 42px !important;
    border-radius: 12px !important;
    padding: 5px !important;
    gap: 3px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-day-tile.is-compact {
    min-height: 48px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-day-top span {
    font-size: 11px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-day-top small {
    font-size: 7px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-day-bottom {
    min-height: 12px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-day-bottom em {
    font-size: 8px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-month-tile {
    min-height: 50px !important;
    padding: 8px !important;
    border-radius: 12px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-hero-card,
.mobile-shop-dashboard-home .mobile-shop-dashboard-quiet-card {
    padding: 14px 16px !important;
    border-radius: 18px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-hero-kicker,
.mobile-shop-dashboard-home .mobile-shop-dashboard-kicker,
.mobile-shop-dashboard-home .mobile-shop-dashboard-stat-label {
    font-size: 9px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-hero-value {
    margin-top: 6px !important;
    font-size: 38px !important;
    line-height: 0.94 !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-hero-copy {
    margin-top: 6px !important;
    font-size: 12px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-stats {
    min-height: 54px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-stat {
    padding: 10px 8px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-stat-value {
    font-size: 18px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-card-section {
    gap: 9px !important;
    padding-top: 0 !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-section-title {
    font-size: 21px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-product-list {
    gap: 8px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-product-row {
    min-height: 58px !important;
    grid-template-columns: 32px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 16px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-product-rank,
.mobile-shop-dashboard-home .mobile-shop-dashboard-owner-card-icon,
.mobile-shop-dashboard-home .mobile-shop-dashboard-review-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-owner-grid {
    gap: 8px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-owner-card {
    min-height: 86px !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 16px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-owner-card-title,
.mobile-shop-dashboard-home .mobile-shop-dashboard-quiet-title {
    font-size: 14px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-owner-card-meta,
.mobile-shop-dashboard-home .mobile-shop-dashboard-quiet-copy {
    font-size: 10px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-review-card {
    min-height: 74px !important;
    grid-template-columns: 32px minmax(0, 1fr) auto 24px !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 16px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-review-title {
    font-size: 16px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-review-kicker,
.mobile-shop-dashboard-home .mobile-shop-dashboard-review-meta,
.mobile-shop-dashboard-home .mobile-shop-dashboard-review-badge {
    font-size: 10px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-review-badge {
    height: 26px !important;
    padding: 0 9px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-activity-section {
    gap: 8px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-activity-total {
    min-height: 26px !important;
    font-size: 10px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-activity-card {
    min-height: 78px !important;
    grid-template-columns: minmax(0, 1fr) 24px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    gap: 6px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-activity-icon {
    width: 28px !important;
    height: 28px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-activity-title {
    font-size: 14px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-activity-feed {
    gap: 7px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-activity-lane {
    border-radius: 16px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-activity-lane-head {
    min-height: 32px !important;
    padding: 8px 10px !important;
}

.mobile-shop-dashboard-home .mobile-shop-dashboard-activity-lane .mobile-shop-dashboard-feed-row {
    padding: 9px 10px !important;
}

@media (max-height: 780px) {
    .mobile-shop-dashboard-home .mobile-shop-dashboard-calendar {
        gap: 7px !important;
        padding: 9px !important;
    }

    .mobile-shop-dashboard-home .mobile-shop-dashboard-day-tile,
    .mobile-shop-dashboard-home .mobile-shop-dashboard-day-empty {
        min-height: 38px !important;
    }

    .mobile-shop-dashboard-home .mobile-shop-dashboard-day-bottom {
        display: none !important;
    }

    .mobile-shop-dashboard-home .mobile-shop-dashboard-hero-value {
        font-size: 34px !important;
    }

    .mobile-shop-dashboard-home .mobile-shop-dashboard-owner-card {
        min-height: 78px !important;
    }

    .mobile-shop-dashboard-home .mobile-shop-dashboard-activity-card {
        min-height: 70px !important;
    }

    .mobile-shop-dashboard-home .mobile-shop-dashboard-activity-meta,
    .mobile-shop-dashboard-home .mobile-shop-dashboard-feed-message {
        display: none !important;
    }
}

/* ============================================================
   Orders v2 — seller order dashboard (Shop Orders design)
   ============================================================ */
.mobile-shop-orders-v2 {
    --ord-bg: #ffffff;
    --ord-ink: #0e0e0f;
    --ord-muted: #6e6e73;
    --ord-faint: #a8a8ad;
    --ord-line: #ededef;
    --ord-soft: #f5f5f6;
    background: var(--ord-bg) !important;
    color: var(--ord-ink) !important;
    /* Start below the app's own fixed header (logo / bell / phone bar). At
       top:0 our own topbar and the revenue label slid up under it and got
       clipped. Reach the floor so content passes behind the nav pill. */
    top: 0 !important;
    padding-top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px)) !important;
    box-sizing: border-box !important;
    bottom: 0 !important;
}

.mobile-shop-orders-topbar {
    /* The app's own header already shows the brand and a back/close, so this
       in-panel topbar only duplicated it and pushed content down. Hidden; the
       "needs action" state moves onto the revenue header instead. */
    display: none !important;
}

.mobile-shop-orders-back {
    width: 40px;
    height: 40px;
    border: 1px solid var(--ord-line);
    border-radius: 50%;
    background: transparent;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
    display: grid;
    place-items: center;
    font-size: 14px;
}

.mobile-shop-orders-brand {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
}

.mobile-shop-orders-needs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--ord-line);
    border-radius: 999px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #c8102e !important;
    -webkit-text-fill-color: #c8102e !important;
}

.mobile-shop-orders-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 22px calc(120px + env(safe-area-inset-bottom, 0px));
}

/* Revenue header */
.mobile-shop-orders-summary-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 0 0;
}

.mobile-shop-orders-summary-figure {
    min-width: 0;
    flex: 1 1 auto;
}

.mobile-shop-orders-summary-count {
    flex: 0 0 auto;
}

.mobile-shop-orders-summary-side {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 5px;
    text-align: right;
}

.mobile-shop-orders-summary-needs {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #c8102e !important;
    -webkit-text-fill-color: #c8102e !important;
    white-space: nowrap;
}

.mobile-shop-orders-summary-figure span {
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9.5px;
    /* Tighter tracking + no-wrap so the label never clips or breaks to two
       lines on a narrower device; ellipsis is the last resort, not a cut. */
    letter-spacing: 0.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ord-faint);
}

.mobile-shop-orders-summary-figure strong {
    display: block;
    margin-top: 4px;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -1.3px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
}

.mobile-shop-orders-summary-count {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: var(--ord-faint);
}

.mobile-shop-orders-summary-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.mobile-shop-orders-summary-tiles > div {
    border: 1px solid var(--ord-line);
    border-radius: 12px;
    padding: 11px 12px;
    display: grid;
    gap: 5px;
}

.mobile-shop-orders-summary-tiles span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    color: var(--ord-faint);
}

.mobile-shop-orders-summary-tiles strong {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
}

.mobile-shop-orders-summary-tiles strong.is-warn {
    color: #8a6a12 !important;
    -webkit-text-fill-color: #8a6a12 !important;
}

/* Search */
.mobile-shop-orders-search {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    border: 1px solid var(--ord-line);
    border-radius: 12px;
    padding: 11px 13px;
}

.mobile-shop-orders-search i {
    color: var(--ord-faint) !important;
    -webkit-text-fill-color: var(--ord-faint) !important;
    font-size: 12px;
}

.mobile-shop-orders-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 13.5px;
    letter-spacing: -0.15px;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
}

/* Filter chips */
.mobile-shop-orders-filters {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: 12px;
}

.mobile-shop-orders-filters::-webkit-scrollbar { display: none; }

.mobile-shop-orders-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 0;
    border-radius: 999px;
    background: var(--ord-soft);
    color: #8a8a8f !important;
    -webkit-text-fill-color: #8a8a8f !important;
    white-space: nowrap;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.mobile-shop-orders-chip em {
    font-style: normal;
    font-size: 9px;
    background: #e4e4e6;
    color: #8a8a8f !important;
    -webkit-text-fill-color: #8a8a8f !important;
    border-radius: 5px;
    padding: 1px 5px;
    font-variant-numeric: tabular-nums;
}

.mobile-shop-orders-chip.is-active {
    background: #0e0e0f;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.mobile-shop-orders-chip.is-active em {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Day groups */
.mobile-shop-orders-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 20px 0 4px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--ord-faint);
    font-variant-numeric: tabular-nums;
}

/* Order card */
.mobile-shop-order-card {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--ord-line);
    border-radius: 16px;
    background: #ffffff;
    padding: 13px 14px 12px;
    margin-top: 8px;
}

.mobile-shop-order-card.is-actionable {
    border-color: #e4e4e6;
    background: #fcfcfd;
}

.mobile-shop-order-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.mobile-shop-order-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
}

.mobile-shop-order-who {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.mobile-shop-order-who strong {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-order-who span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--ord-faint);
}

.mobile-shop-order-amount {
    flex: none;
    display: grid;
    justify-items: end;
    gap: 3px;
}

.mobile-shop-order-amount strong {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
}

.mobile-shop-order-amount em {
    font-style: normal;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    border-radius: 4px;
    padding: 2px 5px;
}

.mobile-shop-order-items {
    display: grid;
    gap: 5px;
    margin-top: 11px;
}

.mobile-shop-order-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    letter-spacing: -0.1px;
    color: var(--ord-muted);
}

.mobile-shop-order-item span {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-order-item em {
    flex: none;
    font-style: normal;
    color: var(--ord-faint);
    font-variant-numeric: tabular-nums;
}

.mobile-shop-order-item.is-more {
    color: var(--ord-faint);
    font-size: 12px;
}

.mobile-shop-order-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #f2f2f4;
    margin-top: 11px;
    padding-top: 11px;
}

.mobile-shop-order-meta {
    flex: 1;
    min-width: 0;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--ord-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-order-actions {
    flex: none;
    display: flex;
    gap: 8px;
}

.mobile-shop-order-btn {
    padding: 8px 12px;
    border: 1px solid var(--ord-line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.mobile-shop-order-btn.is-primary {
    border-color: #0e0e0f;
    background: #0e0e0f;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Dark theme: keep the surface readable rather than forcing the light palette. */
[data-theme="dark"] .mobile-shop-orders-v2,
[data-theme="dark-accent"] .mobile-shop-orders-v2 {
    --ord-bg: #0d0d0f;
    --ord-ink: #f5f5f7;
    --ord-muted: #a8a8ad;
    --ord-faint: #77777d;
    --ord-line: rgba(255,255,255,0.10);
    --ord-soft: rgba(255,255,255,0.06);
}

[data-theme="dark"] .mobile-shop-order-card,
[data-theme="dark-accent"] .mobile-shop-order-card {
    background: rgba(255,255,255,0.03);
}

[data-theme="dark"] .mobile-shop-order-card.is-actionable,
[data-theme="dark-accent"] .mobile-shop-order-card.is-actionable {
    background: rgba(255,255,255,0.05);
}

[data-theme="dark"] .mobile-shop-order-btn,
[data-theme="dark-accent"] .mobile-shop-order-btn {
    background: transparent;
}

[data-theme="dark"] .mobile-shop-orders-chip.is-active,
[data-theme="dark-accent"] .mobile-shop-orders-chip.is-active {
    background: #f5f5f7;
    color: #0d0d0f !important;
    -webkit-text-fill-color: #0d0d0f !important;
}

/* Order detail sheet v2 — digital-first receipt (buyer, items, wallet passes) */
.mobile-shop-receipt-v2 {
    --ord-bg: #ffffff;
    --ord-ink: #0e0e0f;
    --ord-muted: #6e6e73;
    --ord-faint: #a8a8ad;
    --ord-line: #ededef;
    --ord-soft: #f5f5f6;
    position: fixed !important;
    /* Start right below the app header (which already includes the safe area),
       and reach the floor. The base .mobile-shop-order-detail-sheet rule set a
       different top/bottom; override it here so the sheet never leaves a gap. */
    top: 0 !important;
    padding-top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px)) !important;
    box-sizing: border-box !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 9002;
    background: var(--ord-bg) !important;
    color: var(--ord-ink) !important;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.22s ease;
}

.mobile-shop-receipt-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    /* No safe-area here — the app header above already cleared it. A second
       safe-area inset was the huge blank gap above "Orders". */
    padding: 12px 18px 8px;
    flex: none;
}

.mobile-shop-receipt-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px 0 11px;
    border: 1px solid var(--ord-line);
    border-radius: 999px;
    background: transparent;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.1px;
}

.mobile-shop-receipt-back i {
    font-size: 12px;
}

.mobile-shop-receipt-topbar-spacer {
    /* Balances the back pill so the title sits visually centred. */
    width: 40px;
}

.mobile-shop-receipt-title {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-receipt-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 22px calc(40px + env(safe-area-inset-bottom, 0px));
}

.mobile-shop-receipt-hero {
    display: grid;
    gap: 5px;
    padding: 16px 0 20px;
}

.mobile-shop-receipt-hero-label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--ord-faint);
}

.mobile-shop-receipt-hero strong {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -1.6px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
}

.mobile-shop-receipt-hero em {
    font-style: normal;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.mobile-shop-receipt-block {
    border-top: 1px solid var(--ord-line);
    padding: 16px 0;
    display: grid;
    gap: 8px;
}

.mobile-shop-receipt-block-label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--ord-faint);
}

.mobile-shop-receipt-block > strong {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
}

.mobile-shop-receipt-block > span {
    font-size: 13px;
    color: var(--ord-muted);
}

/* Item lines */
.mobile-shop-receipt-line {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 0;
}

.mobile-shop-receipt-line-ext {
    flex: none;
    width: 34px;
    height: 30px;
    border-radius: 8px;
    background: var(--ord-soft);
    display: grid;
    place-items: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ord-muted);
    -webkit-text-fill-color: var(--ord-muted);
}

.mobile-shop-receipt-line-copy {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.mobile-shop-receipt-line-copy strong {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-receipt-line-copy span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: 0.06em;
    color: var(--ord-faint);
}

.mobile-shop-receipt-line-price {
    flex: none;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
}

/* Wallet pass rows */
.mobile-shop-receipt-pass {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid var(--ord-line);
    border-radius: 12px;
}

.mobile-shop-receipt-pass-copy {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.mobile-shop-receipt-pass-copy strong {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
}

.mobile-shop-receipt-pass-copy span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--ord-faint);
}

.mobile-shop-receipt-pass-link {
    flex: none;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #0e0e0f !important;
    -webkit-text-fill-color: #0e0e0f !important;
    border: 1px solid var(--ord-line);
    border-radius: 999px;
    padding: 7px 11px;
}

.mobile-shop-receipt-pass-none {
    flex: none;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--ord-faint);
}

.mobile-shop-receipt-action {
    display: block;
    width: 100%;
    margin: 6px 0;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(200, 16, 46, 0.35);
    background: transparent;
    color: #c8102e;
    -webkit-text-fill-color: #c8102e;
    font-weight: 700;
    text-align: left;
}

/* Key-value rows */
.mobile-shop-receipt-kv {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.mobile-shop-receipt-kv span {
    font-size: 13px;
    color: var(--ord-muted);
}

.mobile-shop-receipt-kv strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
    text-align: right;
    word-break: break-all;
}

.mobile-shop-receipt-v2 .mobile-shop-orders-back {
    width: 40px;
    height: 40px;
    border: 1px solid var(--ord-line);
    border-radius: 50%;
    background: transparent;
    color: var(--ord-ink) !important;
    -webkit-text-fill-color: var(--ord-ink) !important;
    display: grid;
    place-items: center;
    font-size: 14px;
}

/* Dark theme */
[data-theme="dark"] .mobile-shop-receipt-v2,
[data-theme="dark-accent"] .mobile-shop-receipt-v2 {
    --ord-bg: #0d0d0f;
    --ord-ink: #f5f5f7;
    --ord-muted: #a8a8ad;
    --ord-faint: #77777d;
    --ord-line: rgba(255,255,255,0.10);
    --ord-soft: rgba(255,255,255,0.06);
}

[data-theme="dark"] .mobile-shop-receipt-pass-link,
[data-theme="dark-accent"] .mobile-shop-receipt-pass-link {
    color: #f5f5f7 !important;
    -webkit-text-fill-color: #f5f5f7 !important;
}

/* Digital license: one setting for every digital item the shop sells. */
html body .mobile-shop-dashboard-license-note {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #6e6e73 !important;
    -webkit-text-fill-color: #6e6e73 !important;
}

html body .mobile-shop-dashboard-license-input {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: 12px 14px;
    border: 1px solid #e6e6e2 !important;
    border-radius: 12px;
    background: #ffffff !important;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: #0d0f0e !important;
    -webkit-text-fill-color: #0d0f0e !important;
    resize: vertical;
}

html body .mobile-shop-dashboard-license-input::placeholder {
    color: #b6b6ae !important;
    -webkit-text-fill-color: #b6b6ae !important;
}

html body .mobile-shop-dashboard-license-save {
    margin-top: 12px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #0d0f0e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

html body .mobile-shop-dashboard-license-save:disabled {
    opacity: 0.6;
}

/* Same recorded provider totals as desktop, stacked for a phone. */
.mobile-shop-payment-breakdown { min-width: 0; padding: 18px 0; }
.mobile-shop-payment-breakdown h3 { margin: 0 0 6px; font-size: 18px; }
.mobile-shop-payment-breakdown p { margin: 6px 0 14px; font-size: 12px; line-height: 1.5; opacity: .7; }
.mobile-shop-payment-providers { display: grid; gap: 12px; }
.mobile-shop-payment-provider { min-width: 0; padding: 16px; border: 1px solid var(--border-color, rgba(128,128,128,.22)); border-radius: 16px; background: var(--card-bg, transparent); }
.mobile-shop-payment-provider header, .mobile-shop-payment-provider dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mobile-shop-payment-provider header span { font-size: 12px; opacity: .65; }
.mobile-shop-payment-provider dl { margin: 12px 0 0; }
.mobile-shop-payment-provider dl > div { padding: 8px 0; border-bottom: 1px solid rgba(128,128,128,.14); font-size: 13px; }
.mobile-shop-payment-provider dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; }
.mobile-shop-payment-provider p { margin-bottom: 0; }
html[data-appearance="glass"] .mobile-shop-payment-provider { background: rgba(30,38,54,.42); border-color: rgba(225,238,255,.2); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }

/* Cover the storefront even when the floating navigation is hidden. */
html body .mobile-shop-dashboard-modal,
html body .mobile-shop-owner-orders-modal,
html body .mobile-shop-order-detail-sheet {
    bottom: 0;
    padding-bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    overflow: hidden;
}

#mobile-shop-reviews-modal,
#mobile-shop-reviews-modal * {
    box-sizing: border-box;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

#mobile-shop-reviews-modal {
    --shop-reviews-bg: var(--background-color);
    --shop-reviews-text: var(--text-primary);
    --shop-reviews-muted: var(--text-secondary);
    --shop-reviews-subtle: var(--text-muted);
    --shop-reviews-border: var(--border-color);
    --shop-reviews-surface: var(--surface-color);
    --shop-reviews-soft: var(--input-bg);
    position: fixed;
    top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px));
    right: 0;
    bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    left: 0;
    z-index: 9000;
    background: var(--shop-reviews-bg);
    color: var(--shop-reviews-text);
    display: flex;
    flex-direction: column;
}

.mobile-shop-reviews-header {
    padding: 10px 14px 8px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--shop-reviews-border) 70%, transparent);
}

.mobile-shop-reviews-back {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--shop-reviews-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.mobile-shop-reviews-title {
    min-width: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 860;
    letter-spacing: -0.03em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-reviews-pill {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--shop-reviews-border);
    background: var(--shop-reviews-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 860;
    color: var(--shop-reviews-text);
}

.mobile-shop-reviews-content {
    flex: 1;
    overflow-y: auto;
    padding: 18px 18px calc(30px + env(safe-area-inset-bottom, 0px));
}

.mobile-shop-reviews-skeleton {
    display: grid;
    gap: 16px;
}

.mobile-shop-reviews-skeleton-row {
    display: grid;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--shop-reviews-border);
}

.mobile-shop-reviews-skeleton-line {
    border-radius: 999px;
    background: var(--shop-reviews-soft);
    opacity: 0.8;
}

.mobile-shop-reviews-skeleton-title {
    width: 30%;
    height: 10px;
}

.mobile-shop-reviews-skeleton-heading {
    width: 72%;
    height: 26px;
    border-radius: 12px;
    opacity: 0.7;
}

.mobile-shop-reviews-skeleton-block {
    height: 58px;
    border-radius: 18px;
    opacity: 0.55;
}

.mobile-shop-reviews-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--shop-reviews-border);
    border-bottom: 1px solid var(--shop-reviews-border);
    margin-bottom: 20px;
}

.mobile-shop-reviews-stat {
    padding: 14px 8px;
}

.mobile-shop-reviews-stat + .mobile-shop-reviews-stat {
    border-left: 1px solid var(--shop-reviews-border);
}

.mobile-shop-reviews-kicker,
.mobile-shop-reviews-stat-label {
    font-size: 10px;
    font-weight: 840;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--shop-reviews-muted);
}

.mobile-shop-reviews-stat-label {
    font-size: 9px;
    margin-bottom: 7px;
}

.mobile-shop-reviews-stat-value {
    font-size: 23px;
    font-weight: 880;
    letter-spacing: -0.04em !important;
    color: var(--shop-reviews-text);
}

.mobile-shop-reviews-empty-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid var(--shop-reviews-border);
    background: linear-gradient(145deg, color-mix(in srgb, var(--shop-reviews-surface) 88%, transparent), color-mix(in srgb, var(--shop-reviews-soft) 76%, transparent));
    margin-bottom: 22px;
}

.mobile-shop-reviews-empty-head,
.mobile-shop-reviews-section-head,
.mobile-shop-reviews-row-head,
.mobile-shop-reviews-question-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.mobile-shop-reviews-empty-head,
.mobile-shop-reviews-section-head {
    align-items: flex-end;
}

.mobile-shop-reviews-empty-head {
    align-items: center;
    gap: 14px;
}

.mobile-shop-reviews-empty-title {
    font-size: 27px;
    line-height: 0.98;
    font-weight: 900;
    letter-spacing: -0.05em !important;
    color: var(--shop-reviews-text);
}

.mobile-shop-reviews-empty-copy {
    font-size: 13px;
    line-height: 1.45;
    color: var(--shop-reviews-muted);
}

.mobile-shop-reviews-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--shop-reviews-soft);
    border: 1px solid var(--shop-reviews-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-reviews-muted);
    font-size: 18px;
}

.mobile-shop-reviews-section {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
}

.mobile-shop-reviews-section:last-child {
    margin-bottom: 0;
}

.mobile-shop-reviews-section-title {
    font-size: 24px;
    font-weight: 880;
    letter-spacing: -0.04em !important;
    color: var(--shop-reviews-text);
    line-height: 1;
}

.mobile-shop-reviews-section-count {
    font-size: 11px;
    font-weight: 820;
    color: var(--shop-reviews-muted);
}

.mobile-shop-reviews-section-count.is-active {
    color: var(--primary-color);
}

.mobile-shop-reviews-empty-row {
    padding: 14px 0 4px;
    color: var(--shop-reviews-muted);
}

.mobile-shop-reviews-empty-row-title {
    font-size: 15px;
    font-weight: 820;
    color: var(--shop-reviews-text);
}

.mobile-shop-reviews-empty-row-copy {
    font-size: 12px;
    line-height: 1.45;
    margin-top: 5px;
}

.mobile-shop-reviews-row,
.mobile-shop-reviews-request-row,
.mobile-shop-reviews-question-row {
    display: grid;
    border-bottom: 1px solid var(--shop-reviews-border);
}

.mobile-shop-reviews-row {
    gap: 10px;
    padding: 14px 0;
}

.mobile-shop-reviews-request-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
}

.mobile-shop-reviews-question-row {
    gap: 7px;
    padding: 13px 0;
}

.mobile-shop-reviews-row-head {
    align-items: flex-start;
}

/* A reviewer's own photo, only ever present on a review imported from a
   Google listing -- a verified in-app purchase has none, and falls back to
   this same tile with a letter instead. Same rounded-square shape and size
   as the owner-request-avatar right below, so an imported review reads as
   the same kind of row as everything else here. */
.mobile-shop-reviews-row-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #f1f1f1;
    color: #101010;
    -webkit-text-fill-color: #101010;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 860;
    object-fit: cover;
}

.mobile-shop-reviews-row-main,
.mobile-shop-reviews-request-main {
    min-width: 0;
}

.mobile-shop-reviews-row-title,
.mobile-shop-reviews-request-title,
.mobile-shop-reviews-question-title {
    color: var(--shop-reviews-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-reviews-row-title,
.mobile-shop-reviews-request-title {
    font-size: 15px;
    font-weight: 860;
}

.mobile-shop-reviews-request-title {
    line-height: 1.15;
}

.mobile-shop-reviews-question-title {
    font-size: 14px;
    font-weight: 850;
}

.mobile-shop-reviews-row-meta,
.mobile-shop-reviews-request-meta {
    color: var(--shop-reviews-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-reviews-row-meta {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 780;
    text-transform: uppercase;
}

.mobile-shop-reviews-request-meta {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 760;
}

.mobile-shop-reviews-stars {
    display: flex;
    gap: 2px;
    font-size: 11px;
    flex-shrink: 0;
}

.mobile-shop-reviews-row-copy {
    font-size: 13px;
    line-height: 1.42;
    color: var(--shop-reviews-muted);
    font-weight: 650;
}

.mobile-shop-reviews-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.mobile-shop-reviews-action,
.mobile-shop-reviews-cta,
.mobile-shop-reviews-request-link {
    border-radius: 999px;
    border: 1px solid var(--shop-reviews-border);
    font-weight: 850;
}

.mobile-shop-reviews-action {
    min-height: 32px;
    padding: 0 12px;
    background: transparent;
    color: var(--shop-reviews-text);
    -webkit-text-fill-color: var(--shop-reviews-text);
    font-size: 11px;
}

.mobile-shop-reviews-action.is-primary {
    background: var(--shop-reviews-text);
    color: var(--shop-reviews-bg);
    -webkit-text-fill-color: var(--shop-reviews-bg);
}

.mobile-shop-reviews-action.is-danger {
    border-color: rgba(220, 38, 38, 0.28);
    color: #dc2626;
    -webkit-text-fill-color: #dc2626;
}

.mobile-shop-reviews-request-link {
    min-height: 34px;
    padding: 0 12px;
    background: var(--shop-reviews-soft);
    color: var(--shop-reviews-text);
    -webkit-text-fill-color: var(--shop-reviews-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.mobile-shop-reviews-muted-note {
    font-size: 11px;
    font-weight: 820;
    color: var(--shop-reviews-muted);
}

.mobile-shop-reviews-question-date {
    font-size: 10px;
    font-weight: 820;
    color: var(--shop-reviews-muted);
    text-transform: uppercase;
    flex-shrink: 0;
}

.mobile-shop-reviews-question-copy {
    font-size: 13px;
    line-height: 1.4;
    color: var(--shop-reviews-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mobile-shop-reviews-cta-group {
    display: grid;
    gap: 12px;
}

.mobile-shop-reviews-cta {
    min-height: 48px;
    font-size: 13px;
}

.mobile-shop-reviews-cta.is-primary {
    min-height: 54px;
    border: 1px solid #e6533d !important;
    border-radius: 18px;
    background: linear-gradient(180deg, #f05a45, #e6533d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(230, 83, 61, 0.20) !important;
}

.mobile-shop-reviews-cta.is-secondary {
    background: transparent;
    color: var(--shop-reviews-text);
    -webkit-text-fill-color: var(--shop-reviews-text);
    font-weight: 840;
}

#mobile-shop-review-form-modal,
#mobile-shop-review-product-picker {
    position: fixed;
    top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px));
    right: 0;
    bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    left: 0;
    z-index: 9001;
    background: color-mix(in srgb, var(--mobile-shop-bg, var(--background-color)) 46%, transparent);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--mobile-shop-text, var(--text-primary));
}

.mobile-shop-review-form-sheet,
.mobile-shop-review-product-sheet {
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    background: var(--mobile-shop-bg, var(--background-color));
    border-radius: 28px 28px 0 0;
    border: 1px solid var(--mobile-shop-border, var(--border-color));
    padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -24px 80px color-mix(in srgb, var(--mobile-shop-text, #000000) 20%, transparent);
}

[data-theme="dark"] #mobile-shop-review-form-modal,
[data-theme="dark-accent"] #mobile-shop-review-form-modal {
    background: rgba(0, 0, 0, 0.68);
}

.mobile-shop-review-form-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.mobile-shop-review-form-back {
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-shop-review-form-title {
    min-width: 0;
    text-align: center;
    font-size: 17px;
    font-weight: 860;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-review-form-kicker {
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 7px;
}

.mobile-shop-review-form-product {
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.05em !important;
    margin-bottom: 8px;
}

.mobile-shop-review-form-copy {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin-bottom: 18px;
}

.mobile-shop-review-product-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.mobile-shop-review-product-title {
    color: var(--mobile-shop-text, var(--text-primary));
    -webkit-text-fill-color: var(--mobile-shop-text, var(--text-primary));
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em !important;
}

.mobile-shop-review-product-note {
    margin-bottom: 12px;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
}

.mobile-shop-review-product-list {
    display: grid;
    gap: 8px;
}

.mobile-shop-review-product-row {
    width: 100%;
    min-height: 64px;
    padding: 10px;
    border: 1px solid var(--mobile-shop-border, var(--border-color));
    border-radius: 16px;
    background: var(--mobile-shop-card-bg, var(--surface-color));
    color: var(--mobile-shop-text, var(--text-primary));
    -webkit-text-fill-color: var(--mobile-shop-text, var(--text-primary));
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    text-align: left;
    box-shadow: none;
}

.mobile-shop-review-product-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--mobile-shop-button-bg, var(--input-bg));
    display: grid;
    place-items: center;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

.mobile-shop-review-product-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.mobile-shop-review-product-copy strong,
.mobile-shop-review-product-copy em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-review-product-copy strong {
    color: var(--mobile-shop-text, var(--text-primary));
    -webkit-text-fill-color: var(--mobile-shop-text, var(--text-primary));
    font-size: 14px;
    line-height: 1.12;
    font-weight: 860;
}

.mobile-shop-review-product-copy em,
.mobile-shop-review-product-empty span {
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 720;
}

.mobile-shop-review-product-empty {
    padding: 18px;
    border: 1px dashed var(--mobile-shop-border, var(--border-color));
    border-radius: 18px;
    display: grid;
    gap: 6px;
}

.mobile-shop-review-product-empty strong {
    color: var(--mobile-shop-text, var(--text-primary));
    -webkit-text-fill-color: var(--mobile-shop-text, var(--text-primary));
    font-size: 15px;
    font-weight: 860;
}

.mobile-shop-review-form-fields {
    display: grid;
    gap: 11px;
}

.mobile-shop-review-star-input {
    display: flex;
    gap: 8px;
    padding: 2px 0 4px;
}

.mobile-shop-review-star-button {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.mobile-shop-review-star-button.is-active {
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    border-color: color-mix(in srgb, var(--text-primary) 28%, var(--border-color));
}

.mobile-shop-review-rating-label {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--mobile-shop-border, var(--border-color));
    border-radius: 999px;
    background: var(--mobile-shop-button-bg, var(--input-bg));
    color: var(--mobile-shop-text, var(--text-primary));
    -webkit-text-fill-color: var(--mobile-shop-text, var(--text-primary));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    font-size: 13px;
    line-height: 1;
    font-weight: 840;
}

.mobile-shop-review-field,
.mobile-shop-review-textarea {
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 14px;
}

.mobile-shop-review-field {
    min-height: 48px;
    border-radius: 16px;
    padding: 0 13px;
    font-weight: 760;
}

.mobile-shop-review-field.is-rating {
    font-weight: 820;
}

.mobile-shop-review-textarea {
    min-height: 132px;
    border-radius: 18px;
    padding: 13px;
    line-height: 1.4;
    font-weight: 650;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    outline: none;
    -webkit-user-select: text;
    user-select: text;
}

.mobile-shop-review-textarea:empty::before {
    content: attr(data-placeholder);
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    opacity: 0.76;
    pointer-events: none;
}

.mobile-shop-review-submit {
    min-height: 50px;
    border-radius: 999px;
    border: 1px solid var(--text-primary);
    background: var(--text-primary);
    color: var(--background-color);
    -webkit-text-fill-color: var(--background-color);
    font-size: 14px;
    font-weight: 880;
}

/* Final review-form interaction recovery. The global mobile button safety
   stylesheet can repaint these controls unless the form owns them explicitly. */
html body #mobile-shop-review-form-modal .mobile-shop-review-form-back {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--mobile-shop-text, var(--text-primary)) !important;
    -webkit-text-fill-color: var(--mobile-shop-text, var(--text-primary)) !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
}

html body #mobile-shop-review-form-modal .mobile-shop-review-form-back i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

html body #mobile-shop-review-form-modal .mobile-shop-review-star-input {
    display: grid !important;
    grid-template-columns: repeat(5, 42px) !important;
    gap: 8px !important;
    align-items: center !important;
}

html body #mobile-shop-review-form-modal .mobile-shop-review-star-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border: 1px solid var(--mobile-shop-border, var(--border-color)) !important;
    border-radius: 14px !important;
    background: var(--mobile-shop-button-bg, var(--input-bg)) !important;
    color: color-mix(in srgb, var(--mobile-shop-text, var(--text-primary)) 24%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--mobile-shop-text, var(--text-primary)) 24%, transparent) !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

html body #mobile-shop-review-form-modal .mobile-shop-review-star-button.is-active {
    border-color: color-mix(in srgb, var(--mobile-shop-text, var(--text-primary)) 34%, var(--mobile-shop-border, var(--border-color))) !important;
    background: color-mix(in srgb, var(--mobile-shop-text, var(--text-primary)) 7%, var(--mobile-shop-bg, var(--background-color))) !important;
    color: var(--mobile-shop-text, var(--text-primary)) !important;
    -webkit-text-fill-color: var(--mobile-shop-text, var(--text-primary)) !important;
}

html body #mobile-shop-review-form-modal .mobile-shop-review-star-button i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    pointer-events: none !important;
}

html body #mobile-shop-review-form-modal .mobile-shop-review-rating-label {
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid var(--mobile-shop-border, var(--border-color)) !important;
    border-radius: 999px !important;
    background: var(--mobile-shop-button-bg, var(--input-bg)) !important;
    color: var(--mobile-shop-text, var(--text-primary)) !important;
    -webkit-text-fill-color: var(--mobile-shop-text, var(--text-primary)) !important;
    box-shadow: none !important;
}

html body #mobile-shop-review-form-modal .mobile-shop-review-field,
html body #mobile-shop-review-form-modal .mobile-shop-review-textarea,
html body #mobile-shop-review-form-modal .mobile-shop-review-field:focus,
html body #mobile-shop-review-form-modal .mobile-shop-review-textarea:focus,
html body #mobile-shop-review-form-modal .mobile-shop-review-field:active,
html body #mobile-shop-review-form-modal .mobile-shop-review-textarea:active {
    border-color: var(--mobile-shop-border, var(--border-color)) !important;
    background: var(--mobile-shop-card-bg, var(--input-bg)) !important;
    color: var(--mobile-shop-text, var(--text-primary)) !important;
    -webkit-text-fill-color: var(--mobile-shop-text, var(--text-primary)) !important;
    caret-color: var(--mobile-shop-text, var(--text-primary)) !important;
    outline: none !important;
    box-shadow: none !important;
    color-scheme: light dark !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

html body #mobile-shop-review-form-modal .mobile-shop-review-field::placeholder,
html body #mobile-shop-review-form-modal .mobile-shop-review-textarea::placeholder,
html body #mobile-shop-review-form-modal .mobile-shop-review-textarea:empty::before {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    opacity: 0.76 !important;
}

.mobile-shop-detail-review-row {
    display: grid;
    gap: 7px;
    padding: 12px 0;
    border-bottom: 1px solid var(--mobile-shop-border);
}

.mobile-shop-detail-review-head,
.mobile-shop-detail-review-section-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.mobile-shop-detail-review-head {
    align-items: flex-start;
}

.mobile-shop-detail-review-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: var(--mobile-shop-border, #f1f1f1);
    color: var(--mobile-shop-text, #101010);
    -webkit-text-fill-color: var(--mobile-shop-text, #101010);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 860;
    object-fit: cover;
}

.mobile-shop-detail-review-section-head {
    align-items: flex-end;
}

.mobile-shop-detail-review-main {
    min-width: 0;
}

.mobile-shop-detail-review-customer {
    font-size: 13px;
    font-weight: 840;
    color: var(--mobile-shop-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-detail-review-status {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 820;
    color: var(--mobile-shop-muted);
    text-transform: uppercase;
}

.mobile-shop-detail-review-status.is-pending {
    color: var(--primary-color);
}

.mobile-shop-detail-review-stars {
    display: flex;
    gap: 2px;
    font-size: 10px;
    flex-shrink: 0;
}

.mobile-shop-detail-review-copy {
    font-size: 12px;
    line-height: 1.38;
    color: var(--mobile-shop-muted);
    font-weight: 650;
}

.mobile-shop-detail-review-empty {
    padding: 6px 0 2px;
    color: var(--mobile-shop-muted);
    font-size: 12px;
    line-height: 1.42;
}

.mobile-shop-detail-review-empty.is-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    color: var(--mobile-shop-muted);
    font-size: 12px;
    font-weight: 500;
}

.mobile-shop-detail-review-empty.is-compact .mobile-shop-detail-review-button {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 12px;
    font-weight: 600;
}

.mobile-shop-detail-review-kicker {
    font-size: 10px;
    font-weight: 840;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: var(--mobile-shop-subtle);
    margin-bottom: 5px;
}

.mobile-shop-detail-review-title {
    font-size: 19px;
    font-weight: 880;
    color: var(--mobile-shop-text);
    letter-spacing: -0.035em !important;
}

.mobile-shop-detail-review-count {
    font-size: 11px;
    font-weight: 820;
    color: var(--mobile-shop-muted);
}

.mobile-shop-detail-review-button {
    min-height: 40px;
    border-radius: 14px;
    border: 1px solid var(--mobile-shop-border);
    background: var(--mobile-shop-button-bg);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 12px;
    font-weight: 850;
}

.mobile-shop-detail-review-error {
    font-size: 12px;
    color: var(--mobile-shop-muted);
}

#mobile-shop-reviews-modal.is-owner {
    background: #ffffff !important;
    color: #101010 !important;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-header {
    min-height: 58px;
    padding: 8px 16px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    background: #ffffff;
    border-bottom: 1px solid rgba(5, 5, 5, 0.10);
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-back,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-pill {
    width: 38px;
    height: 38px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-title {
    font-size: 20px;
    font-weight: 820;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-content {
    padding: 12px 16px calc(150px + env(safe-area-inset-bottom, 0px));
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-stats {
    gap: 8px;
    border: 0;
    margin: 0 0 12px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-stat {
    min-height: 76px;
    padding: 12px;
    border: 1px solid rgba(5, 5, 5, 0.10) !important;
    border-radius: 16px;
    background: #fafafa;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-stat-label {
    margin-bottom: 8px;
    font-size: 9px;
    color: rgba(5, 5, 5, 0.56);
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-stat-value {
    font-size: 25px;
    line-height: 1;
    font-weight: 780;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-empty-card {
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin: 0 0 12px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: none;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-empty-head {
    display: contents;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-empty-head > div:first-child {
    min-width: 0;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-empty-title {
    font-size: 18px;
    line-height: 1.12;
    font-weight: 820;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-empty-copy {
    grid-column: 1 / -1;
    margin-top: -4px;
    font-size: 12px;
    line-height: 1.38;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-empty-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #101010;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-section {
    gap: 11px;
    padding: 14px;
    margin: 0 0 12px;
    border: 1px solid rgba(5, 5, 5, 0.10);
    border-radius: 18px;
    background: #ffffff;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-section-head {
    align-items: center;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-section-title {
    font-size: 20px;
    line-height: 1.05;
    font-weight: 820;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-section-count {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(5, 5, 5, 0.10);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    color: rgba(5, 5, 5, 0.58);
    white-space: nowrap;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-request-row,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-row,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-question-row {
    padding: 12px 0;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-request-row:first-child,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-row:first-child,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-question-row:first-child {
    padding-top: 2px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-request-row:last-child,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-row:last-child,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-question-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-request-title,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-row-title {
    font-size: 14px;
    font-weight: 820;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-request-meta,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-row-meta {
    font-size: 11px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-request-link,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-action {
    min-height: 32px;
    border-color: rgba(5, 5, 5, 0.14);
    background: #ffffff;
    color: #101010;
    -webkit-text-fill-color: #101010;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-action.is-primary {
    background: #101010;
    border-color: #101010;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

#mobile-shop-reviews-modal.is-owner {
    --shop-reviews-bg: #f7f7f7;
    --shop-reviews-text: #101010;
    --shop-reviews-muted: rgba(16, 16, 16, 0.58);
    --shop-reviews-border: rgba(16, 16, 16, 0.10);
    --shop-reviews-soft: rgba(16, 16, 16, 0.045);
    background: #f7f7f7 !important;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-header {
    background: rgba(247, 247, 247, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-content {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px 14px calc(156px + env(safe-area-inset-bottom, 0px));
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-hero {
    display: grid;
    grid-template-columns: minmax(112px, 0.76fr) minmax(0, 1.24fr);
    gap: 10px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-score,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-panel {
    border: 1px solid rgba(16, 16, 16, 0.10);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(16, 16, 16, 0.055);
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-score {
    min-height: 116px;
    padding: 13px;
    display: grid;
    align-content: space-between;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-rating {
    color: #101010;
    -webkit-text-fill-color: #101010;
    font-size: 38px;
    line-height: 0.92;
    font-weight: 760;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-stars {
    display: flex;
    gap: 3px;
    font-size: 11px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics > div {
    min-height: 58px;
    padding: 11px 12px;
    display: grid;
    align-content: center;
    gap: 4px;
    border-left: 1px solid rgba(16, 16, 16, 0.08);
    border-top: 1px solid rgba(16, 16, 16, 0.08);
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics > div:nth-child(1),
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics > div:nth-child(2) {
    border-top: 0;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics > div:nth-child(odd) {
    border-left: 0;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics strong {
    color: #101010;
    -webkit-text-fill-color: #101010;
    font-size: 22px;
    line-height: 1;
    font-weight: 780;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics span {
    color: rgba(16, 16, 16, 0.56);
    -webkit-text-fill-color: rgba(16, 16, 16, 0.56);
    font-size: 10px;
    font-weight: 820;
    text-transform: uppercase;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics .needs-work strong {
    color: #101010;
    -webkit-text-fill-color: #101010;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline {
    padding: 13px;
    display: grid;
    gap: 12px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline-copy {
    display: grid;
    gap: 5px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline-copy strong {
    color: #101010;
    -webkit-text-fill-color: #101010;
    font-size: 18px;
    line-height: 1.05;
    font-weight: 840;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline-copy span {
    color: rgba(16, 16, 16, 0.58);
    -webkit-text-fill-color: rgba(16, 16, 16, 0.58);
    font-size: 12px;
    line-height: 1.32;
    font-weight: 650;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline-steps span {
    min-height: 30px;
    border-radius: 999px;
    background: #f3f3f3;
    color: rgba(16, 16, 16, 0.66);
    -webkit-text-fill-color: rgba(16, 16, 16, 0.66);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 820;
    white-space: nowrap;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline-steps span.is-hot {
    background: #101010;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-panel {
    padding: 13px;
    display: grid;
    gap: 10px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-panel-head h2 {
    margin: 2px 0 0;
    color: #101010;
    -webkit-text-fill-color: #101010;
    font-size: 19px;
    line-height: 1.05;
    font-weight: 840;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-panel-head > span {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(16, 16, 16, 0.10);
    border-radius: 999px;
    color: rgba(16, 16, 16, 0.60);
    -webkit-text-fill-color: rgba(16, 16, 16, 0.60);
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 820;
    white-space: nowrap;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-panel.has-action .mobile-shop-reviews-owner-panel-head > span {
    background: #101010;
    border-color: #101010;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-row {
    min-height: 62px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid rgba(16, 16, 16, 0.08);
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-row:first-child {
    border-top: 0;
    padding-top: 0;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-row:last-child {
    padding-bottom: 0;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-avatar {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: #f1f1f1;
    color: #101010;
    -webkit-text-fill-color: #101010;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 860;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-copy strong,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-copy span,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-copy em {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-copy strong {
    color: #101010;
    -webkit-text-fill-color: #101010;
    font-size: 14px;
    line-height: 1.1;
    font-weight: 840;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-copy span,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-copy em {
    color: rgba(16, 16, 16, 0.56);
    -webkit-text-fill-color: rgba(16, 16, 16, 0.56);
    font-size: 11px;
    line-height: 1.15;
    font-style: normal;
    font-weight: 700;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-btn {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(16, 16, 16, 0.18);
    border-radius: 999px;
    background: #ffffff;
    color: #101010;
    -webkit-text-fill-color: #101010;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 840;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-empty {
    padding: 8px 0 2px;
    display: grid;
    gap: 4px;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-empty strong {
    color: #101010;
    -webkit-text-fill-color: #101010;
    font-size: 14px;
    font-weight: 820;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-empty span {
    color: rgba(16, 16, 16, 0.56);
    -webkit-text-fill-color: rgba(16, 16, 16, 0.56);
    font-size: 12px;
    line-height: 1.34;
}

@media (max-width: 360px) {
    #mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-hero {
        grid-template-columns: 1fr;
    }

    #mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline-steps {
        grid-template-columns: 1fr;
    }
}

#mobile-shop-reviews-modal.is-owner {
    --shop-reviews-bg: #ffffff;
    background: #ffffff !important;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-header {
    background: #ffffff;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-content {
    background: #ffffff;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-score,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-metrics,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-panel {
    background: #ffffff;
    box-shadow: none;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline-steps span {
    background: #ffffff;
    border: 1px solid rgba(16, 16, 16, 0.10);
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-pipeline-steps span.is-hot {
    background: #101010;
    border-color: #101010;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-avatar {
    background: #ffffff;
    border: 1px solid rgba(16, 16, 16, 0.10);
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-btn,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-btn:link,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-btn:visited {
    min-width: 62px;
    background: #ffffff !important;
    border-color: rgba(16, 16, 16, 0.18) !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none !important;
}

#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-btn:hover,
#mobile-shop-reviews-modal.is-owner .mobile-shop-reviews-owner-request-btn:active {
    background: #f7f7f7 !important;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
}

/* Guest reviews.
 *
 * The Reviews design: a slim bar with the crumb and a verified count, a
 * mono kicker over "Reviews", the average as a big number beside a
 * tap-to-filter histogram, a ruled list head with sort chips, hairline
 * review rows (stars, product, date, body, who), and a sticky
 * "write a review" strip.
 *
 * Own id (`shop-reviews`) so the blanket "[id*=modal]" repaints and the
 * button-safety sheet never touch it; colors still carry the id and
 * !important against the `[data-theme="light"] *` rules.
 */
html body #shop-reviews {
    --rv-ink: #0d0f0e;
    --rv-body: #3f403e;
    --rv-mute: #9a9a93;
    --rv-label: #8b8b85;
    --rv-hair: #e6e6e2;
    --rv-rule: #dcdcd6;
    --rv-paper: #ffffff;
    --rv-accent: #3d7a56;
    --rv-accent: oklch(0.52 0.09 152);
    --rv-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* Full screen, over the header and the nav, like the ticket sheet. Sitting
       between them leaked the page in above (once the header had tucked
       away) and below (around the translucent nav pill). */
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    background: var(--rv-paper) !important;
    color: var(--rv-ink) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color-scheme: light;
}

html body #shop-reviews,
html body #shop-reviews * {
    box-sizing: border-box;
}

html body #shop-reviews .rv-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px;
}

/* Bar */
html body #shop-reviews .rv-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
    background: rgba(255, 255, 255, 0.93) !important;
    border-bottom: 1px solid var(--rv-hair);
}

html body #shop-reviews .rv-bar-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

html body #shop-reviews .rv-back {
    width: 26px;
    flex: 0 0 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
    cursor: pointer;
}

html body #shop-reviews .rv-crumb {
    font-family: var(--rv-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rv-label) !important;
    -webkit-text-fill-color: var(--rv-label) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body #shop-reviews .rv-verified {
    flex: 0 0 auto;
    font-family: var(--rv-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rv-accent) !important;
    -webkit-text-fill-color: var(--rv-accent) !important;
}

/* Loading */
html body #shop-reviews .rv-skeleton {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

html body #shop-reviews .rv-skeleton span {
    display: block;
    height: 14px;
    background: #f2f2f0 !important;
}

html body #shop-reviews .rv-skeleton span:first-child { width: 40%; height: 30px; }
html body #shop-reviews .rv-skeleton span:nth-child(2) { width: 70%; }
html body #shop-reviews .rv-skeleton span:nth-child(3) { width: 90%; }

/* Intro + summary */
html body #shop-reviews .rv-intro {
    padding: 30px 20px 0;
}

html body #shop-reviews .rv-kicker {
    font-family: var(--rv-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rv-label) !important;
    -webkit-text-fill-color: var(--rv-label) !important;
}

html body #shop-reviews .rv-intro h1 {
    margin: 12px 0 0;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-summary {
    margin-top: 24px;
    padding: 0 20px;
    display: flex;
    align-items: flex-end;
    gap: 22px;
}

html body #shop-reviews .rv-avg {
    font-size: 56px;
    line-height: 0.9;
    font-weight: 600;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-avg-stars {
    margin-top: 10px;
}

html body #shop-reviews .rv-stars {
    display: inline-flex;
    gap: 3px;
    vertical-align: middle;
}

html body #shop-reviews .rv-star {
    display: block;
    background: var(--rv-rule) !important;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

html body #shop-reviews .rv-star.on {
    background: var(--rv-ink) !important;
}

html body #shop-reviews .rv-count {
    margin-top: 10px;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    letter-spacing: 0.13em;
    white-space: nowrap;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

/* Histogram */
html body #shop-reviews .rv-hist {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-bottom: 4px;
}

html body #shop-reviews .rv-histrow {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    cursor: pointer;
}

html body #shop-reviews .rv-hist-n,
html body #shop-reviews .rv-hist-c {
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-hist-n { width: 10px; }
html body #shop-reviews .rv-hist-c { width: 22px; }

html body #shop-reviews .rv-histrow.active .rv-hist-n,
html body #shop-reviews .rv-histrow.active .rv-hist-c {
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-track {
    flex: 1;
    position: relative;
    height: 4px;
    background: var(--rv-hair) !important;
}

html body #shop-reviews .rv-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--rv-ink) !important;
}

html body #shop-reviews .rv-fill.dim {
    background: #b6b6ae !important;
}

/* List head + sorts */
html body #shop-reviews .rv-listhead {
    margin-top: 30px;
    padding: 0 20px 13px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--rv-ink);
    font-family: var(--rv-mono);
}

html body #shop-reviews .rv-list-title {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-shown {
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-sorts {
    display: flex;
    border-bottom: 1px solid var(--rv-hair);
    overflow-x: auto;
    scrollbar-width: none;
}

html body #shop-reviews .rv-sorts::-webkit-scrollbar { display: none; }

html body #shop-reviews .rv-sorts button {
    flex: 1 0 auto;
    padding: 11px 14px;
    border: 0;
    border-right: 1px solid var(--rv-hair);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    letter-spacing: 0.13em;
    white-space: nowrap;
    color: var(--rv-label) !important;
    -webkit-text-fill-color: var(--rv-label) !important;
    cursor: pointer;
}

html body #shop-reviews .rv-sorts button.on {
    background: var(--rv-ink) !important;
    color: var(--rv-paper) !important;
    -webkit-text-fill-color: var(--rv-paper) !important;
}

/* Reviews */
html body #shop-reviews .rv-review {
    padding: 22px 20px 20px;
    border-bottom: 1px solid var(--rv-hair);
}

html body #shop-reviews .rv-rtop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

html body #shop-reviews .rv-rscore {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-rtitle {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-wrap: pretty;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-rdate {
    padding-top: 2px;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    white-space: nowrap;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-rbody {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.55;
    text-wrap: pretty;
    color: var(--rv-body) !important;
    -webkit-text-fill-color: var(--rv-body) !important;
}

html body #shop-reviews .rv-rfoot {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

html body #shop-reviews .rv-who {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

html body #shop-reviews .rv-avatar {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--rv-ink) !important;
    font-family: var(--rv-mono);
    font-size: 9.5px;
    color: var(--rv-paper) !important;
    -webkit-text-fill-color: var(--rv-paper) !important;
}

html body #shop-reviews .rv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body #shop-reviews .rv-author {
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-prov {
    margin-top: 2px;
    font-family: var(--rv-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-prov.ok {
    color: var(--rv-accent) !important;
    -webkit-text-fill-color: var(--rv-accent) !important;
}

/* Empty + more */
html body #shop-reviews .rv-empty {
    padding: 44px 20px;
    text-align: center;
}

html body #shop-reviews .rv-empty-msg {
    font-family: var(--rv-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-empty button {
    margin-top: 16px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid var(--rv-ink);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
    cursor: pointer;
}

html body #shop-reviews .rv-more-wrap {
    padding: 24px 20px 0;
}

html body #shop-reviews .rv-more {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--rv-ink);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
    cursor: pointer;
}

/* Sticky write strip */
html body #shop-reviews .rv-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid var(--rv-ink);
}

html body #shop-reviews .rv-cta-meta {
    font-family: var(--rv-mono);
    font-size: 9px;
    letter-spacing: 0.13em;
    color: var(--rv-mute) !important;
    -webkit-text-fill-color: var(--rv-mute) !important;
}

html body #shop-reviews .rv-cta-sub {
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: -0.01em;
    color: var(--rv-ink) !important;
    -webkit-text-fill-color: var(--rv-ink) !important;
}

html body #shop-reviews .rv-cta-btn {
    flex: 0 0 auto;
    padding: 14px 20px;
    border: 0;
    border-radius: 0;
    background: var(--rv-ink) !important;
    box-shadow: none !important;
    font-family: var(--rv-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--rv-paper) !important;
    -webkit-text-fill-color: var(--rv-paper) !important;
    cursor: pointer;
}

/* ------------------------------------------------- the desktop Shop face
   Reviews in the shop's system: the display face on the title and the
   average, the summary as one hairline card, the rating bars and the
   chosen filter in the app's colour, review cards with hairlines, a pill
   "Write a review", and a dark twin of every token. */
html body #shop-reviews {
    --rv-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --rv-accent: var(--pc-btn, var(--primary-color, #0e0e0e));
}
html[data-theme="dark"] body #shop-reviews {
    --rv-ink: #f4f4f5;
    --rv-body: #c9c9cf;
    --rv-mute: #8a8a90;
    --rv-label: #8a8a90;
    --rv-hair: #232327;
    --rv-rule: #34343a;
    --rv-paper: #0b0b0d;
    color-scheme: dark;
}
html body #shop-reviews .rv-intro h1 {
    font-family: var(--rv-display) !important;
    font-stretch: 118% !important;
    font-weight: 900 !important;
    font-size: 40px !important;
    letter-spacing: -0.04em !important;
    text-transform: uppercase;
}
html body #shop-reviews .rv-summary {
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding: 16px !important;
    border: 1.5px solid var(--rv-hair) !important;
    border-radius: 20px !important;
}
html body #shop-reviews .rv-avg {
    font-family: var(--rv-display) !important;
    font-weight: 900 !important;
}
html body #shop-reviews .rv-fill { background: var(--rv-accent) !important; }
html body #shop-reviews .rv-review {
    margin: 0 16px 10px !important;
    padding: 14px 16px !important;
    border: 1.5px solid var(--rv-hair) !important;
    border-radius: 18px !important;
}
html body #shop-reviews .rv-sorts button {
    border-radius: 16px !important;
}
html body #shop-reviews .rv-sorts button.on {
    background: var(--rv-ink) !important;
    color: var(--rv-paper) !important;
    -webkit-text-fill-color: var(--rv-paper) !important;
}
html body #shop-reviews .rv-cta-btn {
    border-radius: 24px !important;
    font-weight: 800 !important;
}
html[data-theme="dark"] body #shop-reviews .rv-bar,
html[data-theme="dark"] body #shop-reviews .rv-cta { background: rgba(11, 11, 13, 0.94) !important; }
html[data-theme="dark"] body #shop-reviews .rv-bar button { background: transparent !important; color: var(--rv-ink) !important; -webkit-text-fill-color: var(--rv-ink) !important; }

/* Familiar, neutral review presentation; never inherit a storefront color. */
html body #shop-reviews#shop-reviews {
 --rv-paper: #fff !important; --rv-ink: #202124 !important; --rv-body: #3c4043 !important; --rv-mute: #5f6368 !important; --rv-hair: #e8eaed !important; --rv-accent: #fbbc04 !important;
 background: #fff !important; color: #202124 !important;
}
html body #shop-reviews#shop-reviews * { font-family: Inter, Arial, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; }
html body #shop-reviews#shop-reviews button { background: #fff !important; }
html body #shop-reviews#shop-reviews .rv-bar, html body #shop-reviews#shop-reviews .rv-cta { background: #fff !important; border-color: #e8eaed; }
html body #shop-reviews#shop-reviews .rv-intro { padding: 24px 20px 16px; }
html body #shop-reviews#shop-reviews .rv-intro h1 { font-size: 28px; font-weight: 650; line-height: 1.2; }
html body #shop-reviews#shop-reviews .rv-kicker { font-size: 12px; }
html body #shop-reviews#shop-reviews .rv-summary { margin: 0 20px; padding: 20px; background: #f8f9fa !important; border: 1px solid #e8eaed !important; border-radius: 16px; gap: 20px; }
html body #shop-reviews#shop-reviews .rv-avg { font-size: 44px; font-weight: 500; }
html body #shop-reviews#shop-reviews .rv-summary.is-unrated { display: block; }
html body #shop-reviews#shop-reviews .is-unrated .rv-avg { font-size: 21px; }
html body #shop-reviews#shop-reviews .is-unrated .rv-avg-stars, html body #shop-reviews#shop-reviews .is-unrated .rv-count { display: none; }
html body #shop-reviews#shop-reviews .rv-unrated-copy { font-size: 14px; line-height: 1.5; margin: 10px 0 0; color: #5f6368; }
html body #shop-reviews#shop-reviews .rv-empty { padding: 40px 20px; }
html body #shop-reviews#shop-reviews .rv-empty-msg { font-size: 16px; }
html body #shop-reviews#shop-reviews .rv-empty button { display: none; }
html body #shop-reviews#shop-reviews .rv-cta { gap: 12px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
html body #shop-reviews#shop-reviews .rv-cta-btn { background: #1a73e8 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-radius: 24px; font-size: 14px; padding: 12px 18px; }
html body #shop-reviews#shop-reviews .rv-histrow { background: transparent !important; }
html body #shop-reviews#shop-reviews .rv-review { background: #fff !important; padding: 20px; border-radius: 16px; }

html body #shop-reviews#shop-reviews .rv-star { color: #dadce0 !important; -webkit-text-fill-color: #dadce0 !important; }
html body #shop-reviews#shop-reviews .rv-star.on { color: #fbbc04 !important; -webkit-text-fill-color: #fbbc04 !important; }

/* Write a review: two full-screen steps.
 *
 * Step 1 (#shop-review-pick) is a visual product grid; step 2
 * (#shop-review-write) is the product strip, five big stars, the review,
 * and the purchase email, with POST REVIEW in the dock. Same tokens and
 * rhythm as the reviews sheet; own ids keep the blanket "[id*=modal]" and
 * button-safety repaints off, and they sit above the reviews sheet.
 */
html body #shop-review-pick,
html body #shop-review-write {
    --rw-ink: #0d0f0e;
    --rw-body: #6f6f69;
    --rw-mute: #9a9a93;
    --rw-label: #8b8b85;
    --rw-hair: #e6e6e2;
    --rw-rule: #dcdcd6;
    --rw-paper: #ffffff;
    --rw-art: #f3f3f0;
    --rw-placeholder: #b6b6ae;
    --rw-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    flex-direction: column;
    background: var(--rw-paper) !important;
    color: var(--rw-ink) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color-scheme: light;
}

html body #shop-review-pick *,
html body #shop-review-write * {
    box-sizing: border-box;
}

html body #shop-review-pick .rw-scroll,
html body #shop-review-write .rw-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 40px;
}

/* Bar */
html body #shop-review-pick .rw-bar,
html body #shop-review-write .rw-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
    background: rgba(255, 255, 255, 0.93) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rw-hair);
}

html body #shop-review-pick .rw-bar-lead,
html body #shop-review-write .rw-bar-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

html body #shop-review-pick .rw-back,
html body #shop-review-write .rw-back {
    width: 26px;
    flex: 0 0 26px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 22px;
    line-height: 1;
    color: var(--rw-ink) !important;
    -webkit-text-fill-color: var(--rw-ink) !important;
    cursor: pointer;
}

html body #shop-review-pick .rw-crumb,
html body #shop-review-write .rw-crumb,
html body #shop-review-pick .rw-step,
html body #shop-review-write .rw-step {
    font-family: var(--rw-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rw-label) !important;
    -webkit-text-fill-color: var(--rw-label) !important;
    white-space: nowrap;
}

/* Intro */
html body #shop-review-pick .rw-intro,
html body #shop-review-write .rw-intro {
    padding: 30px 20px 0;
}

html body #shop-review-pick .rw-kicker,
html body #shop-review-write .rw-kicker {
    font-family: var(--rw-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rw-label) !important;
    -webkit-text-fill-color: var(--rw-label) !important;
}

html body #shop-review-pick .rw-intro h2,
html body #shop-review-write .rw-intro h2 {
    margin: 12px 0 0;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--rw-ink) !important;
    -webkit-text-fill-color: var(--rw-ink) !important;
}

html body #shop-review-pick .rw-intro p,
html body #shop-review-write .rw-intro p {
    margin: 12px 0 0;
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
    color: var(--rw-body) !important;
    -webkit-text-fill-color: var(--rw-body) !important;
}

/* Step 1: product grid */
html body #shop-review-pick .rw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 30px;
    padding: 28px 20px 0;
}

html body #shop-review-pick .rw-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    cursor: pointer;
}

html body #shop-review-pick .rw-card-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: var(--rw-art) !important;
    background-size: cover;
    background-position: center;
}

html body #shop-review-pick .rw-card-mark {
    font-family: var(--rw-mono);
    font-size: 28px;
    color: var(--rw-mute) !important;
    -webkit-text-fill-color: var(--rw-mute) !important;
}

html body #shop-review-pick .rw-card-kind {
    margin-top: 14px;
    font-family: var(--rw-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--rw-mute) !important;
    -webkit-text-fill-color: var(--rw-mute) !important;
}

html body #shop-review-pick .rw-card-name {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    color: var(--rw-ink) !important;
    -webkit-text-fill-color: var(--rw-ink) !important;
}

html body #shop-review-pick .rw-card-price {
    margin-top: 4px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--rw-body) !important;
    -webkit-text-fill-color: var(--rw-body) !important;
}

html body #shop-review-pick .rw-card-cta {
    display: block;
    margin-top: 12px;
    padding: 12px 0;
    border: 1px solid var(--rw-rule);
    text-align: center;
    font-family: var(--rw-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--rw-ink) !important;
    -webkit-text-fill-color: var(--rw-ink) !important;
}

html body #shop-review-pick .rw-card:active .rw-card-cta {
    background: var(--rw-ink) !important;
    color: var(--rw-paper) !important;
    -webkit-text-fill-color: var(--rw-paper) !important;
}

html body #shop-review-pick .rw-empty {
    padding: 44px 20px;
    text-align: center;
    font-family: var(--rw-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    line-height: 1.7;
    color: var(--rw-mute) !important;
    -webkit-text-fill-color: var(--rw-mute) !important;
}

/* Step 2: product strip */
html body #shop-review-write .rw-product {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 20px 0;
    padding: 14px 0;
    border-top: 1px solid var(--rw-hair);
    border-bottom: 1px solid var(--rw-hair);
}

html body #shop-review-write .rw-product-art {
    flex: 0 0 64px;
    width: 64px;
    height: 80px;
    background-color: var(--rw-art) !important;
    background-size: cover;
    background-position: center;
}

html body #shop-review-write .rw-product-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

html body #shop-review-write .rw-product-kind {
    font-family: var(--rw-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--rw-mute) !important;
    -webkit-text-fill-color: var(--rw-mute) !important;
}

html body #shop-review-write .rw-product-name {
    margin-top: 5px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--rw-ink) !important;
    -webkit-text-fill-color: var(--rw-ink) !important;
}

html body #shop-review-write .rw-product-price {
    margin-top: 4px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--rw-body) !important;
    -webkit-text-fill-color: var(--rw-body) !important;
}

/* Sections */
html body #shop-review-write .rw-section {
    padding: 0 20px;
    margin-top: 30px;
}

html body #shop-review-write .rw-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rw-ink);
    font-family: var(--rw-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rw-ink) !important;
    -webkit-text-fill-color: var(--rw-ink) !important;
}

html body #shop-review-write .rw-head span:last-child {
    letter-spacing: 0.12em;
    color: var(--rw-mute) !important;
    -webkit-text-fill-color: var(--rw-mute) !important;
}

/* Stars: big, black when active */
html body #shop-review-write .rw-stars {
    display: flex;
    gap: 6px;
    padding: 18px 0 4px;
}

html body #shop-review-write .rw-star-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

html body #shop-review-write .rw-star-btn .rv-star {
    display: block;
    width: 34px;
    height: 34px;
    background: var(--rw-rule) !important;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transition: transform 120ms ease;
}

html body #shop-review-write .rw-star-btn.is-active .rv-star {
    background: var(--rw-ink) !important;
}

html body #shop-review-write .rw-star-btn:active .rv-star {
    transform: scale(0.92);
}

/* Review text + fields */
html body #shop-review-write .rw-text,
html body #shop-review-write textarea#mobile-shop-review-text {
    display: block;
    width: 100%;
    min-height: 150px;
    margin-top: 14px;
    padding: 16px 18px !important;
    border: 1px solid var(--rw-rule) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none;
    resize: vertical;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--rw-ink) !important;
    -webkit-text-fill-color: var(--rw-ink) !important;
    caret-color: var(--rw-ink);
    -webkit-appearance: none;
    appearance: none;
}

html body #shop-review-write .rw-text::placeholder,
html body #shop-review-write .rw-field input::placeholder {
    color: var(--rw-placeholder) !important;
    -webkit-text-fill-color: var(--rw-placeholder) !important;
    opacity: 1;
}

html body #shop-review-write .rw-field input:focus,
html body #shop-review-write input#mobile-shop-review-email:focus,
html body #shop-review-write input#mobile-shop-review-order:focus {
    border-color: var(--rw-ink) !important;
}

html body #shop-review-write .rw-text:focus,
html body #shop-review-write textarea#mobile-shop-review-text:focus {
    border-color: var(--rw-ink) !important;
}

html body #shop-review-write .rw-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 18px;
}

html body #shop-review-write .rw-field label {
    display: block;
    font-family: var(--rw-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--rw-mute) !important;
    -webkit-text-fill-color: var(--rw-mute) !important;
}

html body #shop-review-write .rw-field input,
html body #shop-review-write input#mobile-shop-review-email,
html body #shop-review-write input#mobile-shop-review-order {
    display: block;
    width: 100%;
    min-height: 50px;
    margin: 8px 0 0;
    padding: 13px 16px 14px !important;
    border: 1px solid var(--rw-rule) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: var(--rw-ink) !important;
    -webkit-text-fill-color: var(--rw-ink) !important;
    caret-color: var(--rw-ink);
    -webkit-appearance: none;
    appearance: none;
}

html body #shop-review-write .rw-fine {
    margin-top: 34px;
    padding: 22px 20px 0;
    border-top: 1px solid var(--rw-hair);
    font-family: var(--rw-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--rw-mute) !important;
    -webkit-text-fill-color: var(--rw-mute) !important;
}

/* Dock */
html body #shop-review-write .rw-dock {
    flex: 0 0 auto;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--rw-rule);
}

html body #shop-review-write .rw-dock-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

html body #shop-review-write .rw-dock-line span {
    font-family: var(--rw-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--rw-label) !important;
    -webkit-text-fill-color: var(--rw-label) !important;
}

html body #shop-review-write .rw-dock-line strong {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rw-ink) !important;
    -webkit-text-fill-color: var(--rw-ink) !important;
}

html body #shop-review-write .rw-cta {
    margin-top: 16px;
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--rw-ink) !important;
    box-shadow: none !important;
    font-family: var(--rw-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--rw-paper) !important;
    -webkit-text-fill-color: var(--rw-paper) !important;
    cursor: pointer;
}

html body #shop-review-write .rw-cta:disabled {
    background: var(--rw-rule) !important;
    color: var(--rw-mute) !important;
    -webkit-text-fill-color: var(--rw-mute) !important;
}

/* The server's answer, on the sheet (the app's toast helper is a no-op). */
html body #shop-review-write .rw-status {
    margin-top: 12px;
    font-family: var(--rw-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: #c4444c !important;
    -webkit-text-fill-color: #c4444c !important;
}

html body #shop-review-write .rw-status[hidden] {
    display: none;
}

/* Review submission uses the same neutral customer-feedback system. */
html body #shop-review-pick#shop-review-pick,
html body #shop-review-write#shop-review-write { --rw-ink: #202124 !important; --rw-body: #5f6368 !important; --rw-mute: #5f6368 !important; --rw-label: #5f6368 !important; --rw-hair: #e8eaed !important; --rw-rule: #dadce0 !important; --rw-paper: #fff !important; --rw-art: #f8f9fa !important; --rw-placeholder: #80868b !important; background: #fff !important; color: #202124 !important; }
html body #shop-review-pick#shop-review-pick *,
html body #shop-review-write#shop-review-write * { font-family: Inter, Arial, sans-serif !important; letter-spacing: normal !important; text-transform: none !important; }
html body #shop-review-pick#shop-review-pick .rw-bar,
html body #shop-review-write#shop-review-write .rw-bar { background: #fff !important; padding-inline: 16px; }
html body #shop-review-pick#shop-review-pick .rw-back,
html body #shop-review-write#shop-review-write .rw-back { background: #f1f3f4 !important; border-radius: 50% !important; width: 36px; height: 36px; flex-basis: 36px; }
html body #shop-review-pick#shop-review-pick .rw-crumb,
html body #shop-review-write#shop-review-write .rw-crumb { font-size: 14px; font-weight: 600; }
html body #shop-review-pick#shop-review-pick .rw-step,
html body #shop-review-write#shop-review-write .rw-step { font-size: 12px; }
html body #shop-review-pick#shop-review-pick .rw-intro,
html body #shop-review-write#shop-review-write .rw-intro { padding: 24px 16px 0; }
html body #shop-review-pick#shop-review-pick .rw-intro h2,
html body #shop-review-write#shop-review-write .rw-intro h2 { font-size: 25px; font-weight: 650; line-height: 1.25; margin: 8px 0 12px; }
html body #shop-review-pick#shop-review-pick .rw-intro p,
html body #shop-review-write#shop-review-write .rw-intro p { font-size: 14px; line-height: 1.55; max-width: none; }
html body #shop-review-pick#shop-review-pick .rw-kicker,
html body #shop-review-write#shop-review-write .rw-kicker { display: none; }
html body #shop-review-pick#shop-review-pick .rw-grid,
html body #shop-review-write#shop-review-write .rw-grid { gap: 14px; padding: 22px 16px; }
html body #shop-review-pick#shop-review-pick .rw-card,
html body #shop-review-write#shop-review-write .rw-card { background: #fff !important; border: 1px solid #e8eaed !important; border-radius: 16px !important; overflow: hidden; }
html body #shop-review-pick#shop-review-pick .rw-card-art,
html body #shop-review-write#shop-review-write .rw-card-art { aspect-ratio: 1; background-size: contain; background-repeat: no-repeat; background-color: #f8f9fa !important; }
html body #shop-review-pick#shop-review-pick .rw-card-kind,
html body #shop-review-write#shop-review-write .rw-card-kind { display: none; }
html body #shop-review-pick#shop-review-pick .rw-card-name,
html body #shop-review-write#shop-review-write .rw-card-name { margin: 12px 12px 0; font-size: 14px; min-height: 35px; }
html body #shop-review-pick#shop-review-pick .rw-card-price,
html body #shop-review-write#shop-review-write .rw-card-price { margin: 4px 12px 0; font-size: 13px; }
html body #shop-review-pick#shop-review-pick .rw-card-cta,
html body #shop-review-write#shop-review-write .rw-card-cta { margin: 12px; padding: 10px 6px; background: #e8f0fe !important; border: 0; border-radius: 20px; color: #1967d2 !important; -webkit-text-fill-color: #1967d2 !important; font-size: 13px; font-weight: 600; }
html body #shop-review-pick#shop-review-pick .rw-product,
html body #shop-review-write#shop-review-write .rw-product { background: #f8f9fa !important; border: 1px solid #e8eaed; border-radius: 16px; padding: 12px; margin: 16px; }
html body #shop-review-pick#shop-review-pick .rw-text,
html body #shop-review-write#shop-review-write .rw-text { background: #fff !important; border: 1px solid #dadce0 !important; border-radius: 12px !important; padding: 12px !important; }
html body #shop-review-pick#shop-review-pick .rw-field input,
html body #shop-review-write#shop-review-write .rw-field input { background: #fff !important; border: 1px solid #dadce0 !important; border-radius: 12px !important; }
html body #shop-review-pick#shop-review-pick .rw-dock,
html body #shop-review-write#shop-review-write .rw-dock { background: #fff !important; border-color: #e8eaed; }
html body #shop-review-pick#shop-review-pick .rw-cta,
html body #shop-review-write#shop-review-write .rw-cta { background: #1a73e8 !important; border-radius: 24px; font-size: 15px; color: #fff !important; -webkit-text-fill-color: #fff !important; }

#mobile-shop-question-modal,
#mobile-shop-question-modal * {
    box-sizing: border-box;
}

#mobile-shop-question-modal {
    position: fixed;
    top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px));
    right: 0;
    bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    left: 0;
    z-index: 9000;
    background: #ffffff !important;
    color: #050505 !important;
    color-scheme: light;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 20px calc(30px + env(safe-area-inset-bottom, 0px));
}

.mobile-shop-guest-ask {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 100%;
}

.mobile-shop-guest-ask h1 {
    margin: 0 0 2px;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 34px;
    line-height: 1;
    font-weight: 950;
}

.mobile-shop-guest-ask-card {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(5, 5, 5, 0.14);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 250, 0.98)) !important;
    padding: 16px;
    box-shadow: 0 22px 54px rgba(5, 5, 5, 0.075);
}

.mobile-shop-guest-ask-card label {
    color: rgba(5, 5, 5, 0.64) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.64) !important;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.mobile-shop-guest-ask-picker {
    position: relative;
}

#mobile-shop-question-modal .mobile-shop-guest-ask-selected,
#mobile-shop-question-modal .mobile-shop-guest-ask-option {
    width: 100%;
    min-height: 64px;
    border: 1px solid rgba(5, 5, 5, 0.14) !important;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fbfbfb) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 11px;
    padding: 10px 12px 10px 10px;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

#mobile-shop-question-modal .mobile-shop-guest-ask-option {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 60px;
    border: 0 !important;
    border-radius: 14px;
    padding: 8px;
}

#mobile-shop-question-modal .mobile-shop-guest-ask-option.is-active {
    background: rgba(230, 83, 61, 0.08) !important;
}

.mobile-shop-guest-ask-thumb {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    border: 1px solid rgba(5, 5, 5, 0.1);
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.04), rgba(5, 5, 5, 0.02));
    color: rgba(5, 5, 5, 0.58);
    -webkit-text-fill-color: rgba(5, 5, 5, 0.58);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.mobile-shop-guest-ask-option .mobile-shop-guest-ask-thumb {
    width: 44px;
    height: 44px;
    border-radius: 13px;
}

.mobile-shop-guest-ask-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-shop-guest-ask-selected-copy,
.mobile-shop-guest-ask-option span:not(.mobile-shop-guest-ask-thumb) {
    min-width: 0;
}

.mobile-shop-guest-ask-selected-copy strong,
.mobile-shop-guest-ask-selected-copy em,
.mobile-shop-guest-ask-option strong,
.mobile-shop-guest-ask-option em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

.mobile-shop-guest-ask-selected-copy strong,
.mobile-shop-guest-ask-option strong {
    font-size: 15px;
    line-height: 1.15;
    font-weight: 950;
}

.mobile-shop-guest-ask-selected-copy em,
.mobile-shop-guest-ask-option em {
    margin-top: 5px;
    color: rgba(5, 5, 5, 0.58) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
    font-size: 12px;
    line-height: 1;
    font-style: normal;
    font-weight: 780;
}

.mobile-shop-guest-ask-selected > i {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(5, 5, 5, 0.05);
    color: rgba(5, 5, 5, 0.58);
    -webkit-text-fill-color: rgba(5, 5, 5, 0.58);
    display: grid;
    place-items: center;
    font-size: 11px;
    transition: transform 0.16s ease;
}

.mobile-shop-guest-ask-picker.is-open .mobile-shop-guest-ask-selected > i {
    transform: rotate(180deg);
}

.mobile-shop-guest-ask-options {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 5;
    max-height: 252px;
    overflow-y: auto;
    border: 1px solid rgba(5, 5, 5, 0.14);
    border-radius: 20px;
    background: #ffffff;
    padding: 8px;
    box-shadow: 0 22px 52px rgba(5, 5, 5, 0.16);
}

.mobile-shop-guest-ask-picker.is-open .mobile-shop-guest-ask-options {
    display: grid;
    gap: 4px;
}

#mobile-shop-question-modal #mobile-shop-question-text.mobile-shop-guest-ask-textbox {
    width: 100%;
    min-height: 132px;
    border: 1px solid rgba(5, 5, 5, 0.14) !important;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fbfbfb) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    caret-color: #e6533d !important;
    color-scheme: light !important;
    outline: none;
    padding: 15px;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 760;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#mobile-shop-question-modal .mobile-shop-guest-ask-input {
    width: 100%;
    min-height: 52px;
    border: 1px solid rgba(5, 5, 5, 0.14) !important;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #fbfbfb) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    caret-color: #e6533d !important;
    color-scheme: light !important;
    outline: none;
    padding: 0 15px;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    font-weight: 760;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#mobile-shop-question-modal .mobile-shop-guest-ask-input::placeholder {
    color: rgba(5, 5, 5, 0.42) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.42) !important;
}

#mobile-shop-question-modal #mobile-shop-question-text.mobile-shop-guest-ask-textbox:empty::before {
    content: attr(data-placeholder);
    color: rgba(5, 5, 5, 0.42) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.42) !important;
    pointer-events: none;
}

#mobile-shop-question-modal .mobile-shop-guest-ask-submit {
    width: 100%;
    min-height: 54px;
    margin-top: 4px;
    border: 1px solid #e6533d !important;
    border-radius: 18px;
    background: linear-gradient(180deg, #f05a45, #e6533d) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 15px;
    font-weight: 950;
    box-shadow: 0 16px 34px rgba(230, 83, 61, 0.22) !important;
}

#mobile-shop-question-modal .mobile-shop-guest-ask-submit:active {
    transform: translateY(1px);
    box-shadow: 0 10px 24px rgba(230, 83, 61, 0.18) !important;
}

#mobile-shop-question-modal .mobile-shop-guest-ask-submit:disabled {
    opacity: 0.62 !important;
}

/* Senior guest ask redesign: compact, neutral, and aligned with the premium
   shop surfaces instead of the older red form-card treatment. */
html body #mobile-shop-question-modal {
    top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 112px)) !important;
    bottom: var(--mobile-shop-bottom-nav-offset, calc(66px + env(safe-area-inset-bottom, 0px))) !important;
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfbfb 58%, #f6f6f6 100%) !important;
    color: #0b0b0b !important;
    -webkit-text-fill-color: #0b0b0b !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask {
    width: min(100%, 430px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    gap: 14px !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-card {
    gap: 14px !important;
    padding: 14px !important;
    border: 1px solid rgba(5, 5, 5, 0.10) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 44px rgba(5, 5, 5, 0.07) !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-field {
    display: grid !important;
    gap: 8px !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-card label {
    color: #737373 !important;
    -webkit-text-fill-color: #737373 !important;
    font-size: 10px !important;
    font-weight: 860 !important;
    letter-spacing: 0.12em !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-selected,
html body #mobile-shop-question-modal .mobile-shop-guest-ask-option {
    min-height: 58px !important;
    border-color: rgba(5, 5, 5, 0.10) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: none !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-selected {
    grid-template-columns: 42px minmax(0, 1fr) 24px !important;
    padding: 8px 10px 8px 8px !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-thumb {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: #f5f5f5 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-selected-copy strong,
html body #mobile-shop-question-modal .mobile-shop-guest-ask-option strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 14px !important;
    font-weight: 860 !important;
    letter-spacing: 0 !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-selected-copy em,
html body #mobile-shop-question-modal .mobile-shop-guest-ask-option em {
    color: #777777 !important;
    -webkit-text-fill-color: #777777 !important;
    font-size: 11px !important;
    font-weight: 720 !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-option.is-active {
    background: #f4f4f4 !important;
    box-shadow: inset 0 0 0 1px #111111 !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-options {
    border-color: rgba(5, 5, 5, 0.12) !important;
    background: #ffffff !important;
    box-shadow: 0 20px 44px rgba(5, 5, 5, 0.14) !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-chips {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-chips button {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(5, 5, 5, 0.10) !important;
    border-radius: 999px !important;
    background: #f7f7f7 !important;
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 780 !important;
    white-space: nowrap !important;
}

html body #mobile-shop-question-modal #mobile-shop-question-text.mobile-shop-guest-ask-textbox {
    min-height: 150px !important;
    border-color: rgba(5, 5, 5, 0.11) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    caret-color: #111111 !important;
    padding: 15px !important;
    font-size: 15px !important;
    font-weight: 680 !important;
    line-height: 1.42 !important;
    box-shadow: inset 0 1px 0 rgba(5, 5, 5, 0.02) !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-input {
    min-height: 50px !important;
    border-radius: 16px !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    background: #ffffff !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

html body #mobile-shop-question-modal #mobile-shop-question-text.mobile-shop-guest-ask-textbox:empty::before {
    color: #a0a0a0 !important;
    -webkit-text-fill-color: #a0a0a0 !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-submit,
html body #mobile-shop-question-modal .mobile-shop-question-submit:not(:disabled),
html body #mobile-shop-question-modal #mobile-shop-question-submit {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    border: 1px solid #111111 !important;
    border-radius: 16px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(17, 17, 17, 0.14) !important;
    font-size: 15px !important;
    font-weight: 840 !important;
    letter-spacing: 0 !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-submit:active {
    transform: translateY(1px) !important;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.12) !important;
}

/* Containerless guest ask. The form is short enough that cards and field boxes
   only add weight — space and type hierarchy carry the structure instead. Every
   fill, border, and shadow above is unset here; inputs keep a single bottom
   rule so the tap target still reads as a field. */
html body #mobile-shop-question-modal {
    padding: 26px 22px calc(26px + env(safe-area-inset-bottom, 0px)) !important;
    background: #ffffff !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask {
    gap: 30px !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-card {
    gap: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-field {
    gap: 10px !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-card label {
    color: #9a9a9a !important;
    -webkit-text-fill-color: #9a9a9a !important;
}

/* Product picker: no box, just the thumb, the copy, and the chevron. */
html body #mobile-shop-question-modal .mobile-shop-guest-ask-selected {
    min-height: 0 !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* The open dropdown stays a real floating surface — it overlaps content and
   needs its own ground to be readable. */
html body #mobile-shop-question-modal .mobile-shop-guest-ask-options {
    border-radius: 18px !important;
}

/* Chips: outline only, no fill. */
html body #mobile-shop-question-modal .mobile-shop-guest-ask-chips {
    gap: 8px !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-chips button {
    border: 1px solid rgba(5, 5, 5, 0.16) !important;
    background: transparent !important;
    color: #444444 !important;
    -webkit-text-fill-color: #444444 !important;
}

/* Fields: a bottom rule instead of a full border. */
html body #mobile-shop-question-modal input.mobile-shop-guest-ask-input,
html body #mobile-shop-question-modal #mobile-shop-question-text.mobile-shop-guest-ask-textbox {
    border: 0 !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.16) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body #mobile-shop-question-modal .mobile-shop-guest-ask-input {
    padding-bottom: 2px !important;
}

html body #mobile-shop-question-modal #mobile-shop-question-text.mobile-shop-guest-ask-textbox {
    min-height: 120px !important;
    padding-top: 2px !important;
    padding-bottom: 12px !important;
}

/* The message field is a contenteditable div, so it reports :focus as soon as
   the surface mounts — scope the darkened rule to real keyboard focus only,
   otherwise it renders near-black next to the email field's hairline. */
html body #mobile-shop-question-modal .mobile-shop-guest-ask-input:focus-visible,
html body #mobile-shop-question-modal #mobile-shop-question-text.mobile-shop-guest-ask-textbox:focus-visible {
    border-bottom-color: #111111 !important;
}

/* The picker thumb is a glyph, not a tile — drop its box too. */
html body #mobile-shop-question-modal .mobile-shop-guest-ask-thumb {
    border: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* The submit button is the one thing that should stay solid. */
html body #mobile-shop-question-modal .mobile-shop-guest-ask-submit,
html body #mobile-shop-question-modal #mobile-shop-question-submit {
    margin-top: 4px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* ------------------------------------------------ Ask, as a conversation
   A header with who you're asking, the product it's about, the thread of
   what you've sent this visit, and a composer pinned at the bottom with
   starter chips. Id-scoped with !important: the id contains "modal", so
   the theme's blanket repaints reach everything inside it. */
html body #mobile-shop-question-modal#mobile-shop-question-modal {
    --ask-paper: #ffffff;
    --ask-ink: #0e0e0e;
    --ask-dim: #5f6068;
    --ask-edge: #e3e3e6;
    --ask-line: #efefef;
    --ask-btn: var(--pc-btn, var(--primary-color, #0e0e0e));
    --ask-on-btn: var(--pc-on-btn, #ffffff);
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--ask-paper) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html[data-theme="dark"] body #mobile-shop-question-modal#mobile-shop-question-modal {
    --ask-paper: #0b0b0d;
    --ask-ink: #f4f4f5;
    --ask-dim: #a9a9b1;
    --ask-edge: #2c2c32;
    --ask-line: #202025;
    color-scheme: dark;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask.is-thread {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 12px; border-bottom: 1px solid var(--ask-line);
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-avatar {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; background: var(--ask-btn) !important;
    font-weight: 800; color: var(--ask-on-btn) !important; -webkit-text-fill-color: var(--ask-on-btn) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-avatar img { width: 100%; height: 100%; object-fit: cover; }
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-title strong {
    font-family: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif !important;
    font-stretch: 112%; font-weight: 900 !important; font-size: 20px; line-height: 1.05; text-transform: uppercase;
    color: var(--ask-ink) !important; -webkit-text-fill-color: var(--ask-ink) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-title em {
    font-style: normal; font-size: 12.5px; color: var(--ask-dim) !important; -webkit-text-fill-color: var(--ask-dim) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-x {
    width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ask-edge) !important;
    background: transparent !important; box-shadow: none !important; font-size: 13px;
    color: var(--ask-ink) !important; -webkit-text-fill-color: var(--ask-ink) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-about { padding: 12px 16px 0; display: grid; gap: 6px; }
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-about > label {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ask-dim) !important; -webkit-text-fill-color: var(--ask-dim) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-selected {
    background: var(--ask-paper) !important; border: 1.5px solid var(--ask-edge) !important; border-radius: 14px !important; box-shadow: none !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-selected *,
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-option * { color: var(--ask-ink) !important; -webkit-text-fill-color: var(--ask-ink) !important; }
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-selected em,
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-option em { color: var(--ask-dim) !important; -webkit-text-fill-color: var(--ask-dim) !important; }
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-options { background: var(--ask-paper) !important; border-color: var(--ask-edge) !important; }
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-thread {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; gap: 8px; padding: 16px;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-empty {
    margin: auto 0 0; padding: 14px 16px; border-radius: 18px 18px 18px 4px; align-self: flex-start; max-width: 85%;
    border: 1.5px solid var(--ask-edge); font-size: 14px; line-height: 1.45;
    color: var(--ask-dim) !important; -webkit-text-fill-color: var(--ask-dim) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-bubble {
    align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 4px 18px;
    background: var(--ask-btn) !important; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere;
    color: var(--ask-on-btn) !important; -webkit-text-fill-color: var(--ask-on-btn) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-bubble small {
    display: block; margin-bottom: 3px; font-size: 11px; opacity: 0.75;
    color: var(--ask-on-btn) !important; -webkit-text-fill-color: var(--ask-on-btn) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-note {
    align-self: flex-end; font-size: 11.5px; color: var(--ask-dim) !important; -webkit-text-fill-color: var(--ask-dim) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-compose {
    display: grid; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ask-line); background: var(--ask-paper) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-chips { display: flex !important; gap: 6px !important; overflow-x: auto; scrollbar-width: none; }
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-chips button {
    flex: 0 0 auto; height: 34px !important; padding: 0 14px !important; border-radius: 17px !important;
    border: 1.5px solid var(--ask-edge) !important; background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; font-weight: 700 !important; white-space: nowrap;
    color: var(--ask-ink) !important; -webkit-text-fill-color: var(--ask-ink) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal input#mobile-shop-question-email.mobile-shop-guest-ask-input {
    height: 42px !important; padding: 0 14px !important; border-radius: 21px !important; border: 1.5px solid var(--ask-edge) !important;
    background: var(--ask-paper) !important; box-shadow: none !important; font-size: 14px !important;
    color: var(--ask-ink) !important; -webkit-text-fill-color: var(--ask-ink) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal .mobile-shop-guest-ask-row { display: flex; align-items: flex-end; gap: 8px; }
html body #mobile-shop-question-modal#mobile-shop-question-modal #mobile-shop-question-text.mobile-shop-guest-ask-textbox {
    flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; min-height: 44px !important; max-height: 120px !important; overflow-y: auto; padding: 11px 14px !important;
    border-radius: 22px !important; border: 1.5px solid var(--ask-edge) !important; background: var(--ask-paper) !important;
    font-size: 15px !important; line-height: 1.4; color: var(--ask-ink) !important; -webkit-text-fill-color: var(--ask-ink) !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal #mobile-shop-question-submit.mobile-shop-guest-ask-submit {
    flex: 0 0 auto; height: 44px !important; min-height: 44px !important; padding: 0 18px !important; margin: 0 !important; width: auto !important;
    border: 0 !important; border-radius: 22px !important; background: var(--ask-btn) !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 800 !important;
    color: var(--ask-on-btn) !important; -webkit-text-fill-color: var(--ask-on-btn) !important;
}

/* ------------------------------------------------------------ Ask (sak)
   One header with the shop's icon, "What's it about?" as a row of product
   cards, common questions as rows, this device's questions with their
   status, and one composer card at the bottom. Doubled id: the older Ask
   layers and the [id*="modal"] sweeps are single-id. Role-named tokens so
   page colour twins them. */
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak {
    --sak-paper: #ffffff;
    --sak-ink: #0b0b0c;
    --sak-text-dim: #6b6b70;
    --sak-line: #e7e7ea;
    --sak-card-bg: #ffffff;
    --sak-brand: var(--pc-btn, var(--primary-color, #0e0e0e));
    --sak-on-brand: var(--pc-on-btn, #ffffff);
    --sak-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    background: var(--sak-paper) !important;
    color: var(--sak-ink) !important;
    color-scheme: light;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
}
html[data-theme="dark"] body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak {
    --sak-paper: #0b0b0d;
    --sak-ink: #f4f4f5;
    --sak-text-dim: #9a9aa0;
    --sak-line: #2a2a2f;
    --sak-card-bg: #0b0b0d;
    color-scheme: dark;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak * { box-sizing: border-box; -webkit-text-fill-color: currentColor; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak button { box-shadow: none !important; margin: 0 !important; min-height: 0 !important; font: inherit; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak > section { padding: 0 20px; margin-top: 24px; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak > section[hidden] { display: none; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-head {
    display: flex; align-items: center; gap: 14px; padding: 20px 20px 0;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-avatar {
    position: relative; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; overflow: hidden;
    background: var(--sak-brand) !important; display: grid; place-items: center;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-avatar i {
    font-style: normal; font-family: var(--sak-display) !important; font-weight: 900; font-size: 22px;
    color: var(--sak-on-brand) !important; -webkit-text-fill-color: var(--sak-on-brand) !important;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-title { display: grid; gap: 3px; min-width: 0; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-title b {
    font-family: var(--sak-display) !important; font-stretch: 118%; font-weight: 900; font-size: 26px;
    line-height: 1; letter-spacing: -.03em; text-transform: uppercase; overflow-wrap: anywhere;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-title small { font-size: 13px; font-weight: 500; color: var(--sak-text-dim) !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-label {
    font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--sak-text-dim) !important; margin-bottom: 12px;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-rack {
    display: flex; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 2px 20px 4px;
    scroll-snap-type: x proximity; scrollbar-width: none;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-rack::-webkit-scrollbar { display: none; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card {
    flex: 0 0 96px; display: flex; flex-direction: column; gap: 7px; align-items: stretch; text-align: left;
    padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--sak-ink) !important;
    scroll-snap-align: start;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__pic {
    width: 96px; height: 96px; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
    background: var(--sak-brand) !important; color: var(--sak-on-brand) !important; -webkit-text-fill-color: var(--sak-on-brand) !important;
    outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card.is-general .sak-card__pic {
    background: var(--sak-card-bg) !important; color: var(--sak-ink) !important; -webkit-text-fill-color: var(--sak-ink) !important;
    border: 1.5px solid var(--sak-line);
}
/* Every tile is the same filled rounded square. The picture is pinned to the
   box's edges (a percentage height inside the grid shifted it down on iOS)
   and fills it from the top, so tall screenshots read from their header. */
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__pic { position: relative; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__pic img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: center top; background: #fff; display: block;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__pic:has(img) { box-shadow: inset 0 0 0 1px var(--sak-line); }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__pic i { font-style: normal; font-family: var(--sak-display) !important; font-weight: 900; font-size: 30px; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card[aria-pressed="true"] .sak-card__pic { outline-color: var(--sak-ink); }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__name {
    font-size: 12.5px; font-weight: 600; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card[aria-pressed="true"] .sak-card__name { font-weight: 800; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-common { border-top: 1px solid var(--sak-line); }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-row {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 15px 0 !important; border: 0 !important; border-bottom: 1px solid var(--sak-line) !important; border-radius: 0 !important;
    background: transparent !important; color: var(--sak-ink) !important; -webkit-text-fill-color: var(--sak-ink) !important;
    font-size: 16px !important; font-weight: 600 !important; text-align: left;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-row i { font-style: normal; font-size: 22px; color: var(--sak-text-dim) !important; -webkit-text-fill-color: var(--sak-text-dim) !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-thread { padding-bottom: 8px !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-msg {
    position: relative; margin-left: 36px; margin-bottom: 10px; padding: 12px 14px 12px;
    border-radius: 18px 18px 6px 18px; background: var(--sak-brand) !important;
    color: var(--sak-on-brand) !important; -webkit-text-fill-color: var(--sak-on-brand) !important;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-msg * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-msg__about { font-size: 11.5px; font-weight: 700; opacity: .78; margin-bottom: 4px; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-msg__q { font-size: 15px; line-height: 1.4; white-space: pre-wrap; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-msg__a {
    margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .16) !important; font-size: 14px; line-height: 1.4;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-status {
    display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .85;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-status.is-answered::before { content: "\2713  "; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-compose {
    position: sticky; bottom: 0; margin-top: auto; padding: 16px 20px 16px;
    display: grid; gap: 10px; background: var(--sak-paper) !important;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak > section + .sak-compose { margin-top: 24px; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-pin {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px;
    border: 1.5px solid var(--sak-line); border-radius: 14px; background: var(--sak-card-bg) !important;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-pin[hidden] { display: none; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-pin__pic {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--sak-brand) !important;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-pin__pic img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-pin__words { flex: 1; min-width: 0; display: grid; gap: 1px; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-pin__words small { font-size: 11px; font-weight: 600; color: var(--sak-text-dim) !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-pin__words b { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-pin__x {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50% !important; border: 0 !important; padding: 0 !important;
    background: transparent !important; color: var(--sak-text-dim) !important; -webkit-text-fill-color: var(--sak-text-dim) !important; font-size: 13px;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-field,
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-email {
    width: 100%; border: 1.5px solid var(--sak-line) !important; border-radius: 14px !important;
    background: var(--sak-card-bg) !important; background-image: none !important; box-shadow: none !important;
    color: var(--sak-ink) !important; -webkit-text-fill-color: var(--sak-ink) !important;
    font-size: 16px !important; font-family: inherit !important; padding: 13px 14px !important; outline: none; margin: 0 !important;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-field { min-height: 92px; resize: none; line-height: 1.4; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-email { height: 48px; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-field:focus,
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-email:focus { border-color: var(--sak-ink) !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-field::placeholder,
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-email::placeholder { color: var(--sak-text-dim); -webkit-text-fill-color: var(--sak-text-dim); opacity: 1; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-send {
    width: 100%; height: 52px; border-radius: 26px !important; border: 0 !important;
    background: var(--sak-brand) !important; color: var(--sak-on-brand) !important; -webkit-text-fill-color: var(--sak-on-brand) !important;
    font-size: 16px !important; font-weight: 800 !important;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-send:disabled { opacity: .5; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-done {
    display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 8px 6px;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-done__tick {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900;
    background: var(--sak-brand) !important; color: var(--sak-on-brand) !important; -webkit-text-fill-color: var(--sak-on-brand) !important; margin-bottom: 4px;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-done b { font-family: var(--sak-display) !important; font-stretch: 118%; font-size: 24px; font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-done span { font-size: 14px; color: var(--sak-text-dim) !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-done strong { color: var(--sak-ink) !important; -webkit-text-fill-color: var(--sak-ink) !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-link {
    margin-top: 6px !important; border: 0 !important; background: none !important; padding: 6px !important;
    color: var(--sak-ink) !important; -webkit-text-fill-color: var(--sak-ink) !important; font-size: 14px; font-weight: 700; text-decoration: underline;
}
/* The composer is one card: the question and the email share a single
   outline split by a hairline, the Send button sits under it. */
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-rack { padding: 2px 20px 4px !important; margin: 0 -20px !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-compose { border-top: 1px solid var(--sak-line); padding-top: 14px; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box {
    border: 1.5px solid var(--sak-line); border-radius: 18px; background: var(--sak-card-bg) !important; overflow: hidden;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box:focus-within { border-color: var(--sak-ink); }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box .sak-field,
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box .sak-email {
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box .sak-field { min-height: 64px; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box .sak-email { border-top: 1px solid var(--sak-line) !important; height: 46px; font-size: 15px !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-row i { font-size: 24px; line-height: 1; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-rack { scroll-padding-inline: 20px; }
/* Page colour keeps typing fields near-white with dark text; the composer
   card follows so its words read. */
html[data-page-color] body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box {
    background: var(--pc-field, #ffffff) !important;
    border-color: var(--pc-field-edge, var(--sak-line)) !important;
}
html[data-page-color] body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box .sak-email { border-top-color: var(--pc-field-edge, var(--sak-line)) !important; }
#mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__pic svg, #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__pic svg path { fill: currentColor !important; color: inherit !important; }

/* Neutral customer support surfaces are independent of the shop's accent. */
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak {
 --sak-paper: #fff !important; --sak-card-bg: #f8f9fa !important; --sak-ink: #202124 !important; --sak-text-dim: #5f6368 !important; --sak-line: #dadce0 !important; --sak-brand: #202124 !important; --sak-on-brand: #fff !important;
 background: #fff !important; color: #202124 !important;
}
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak * { font-family: Inter, Arial, sans-serif !important; letter-spacing: normal; }
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-title b { font-size: 22px; font-weight: 650; text-transform: none; }
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card { background: transparent !important; border-radius: 16px !important; }
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__pic { background: #f8f9fa !important; border-radius: 16px !important; }
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-common { display: grid; gap: 8px; border: 0; }
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-row { background: #f8f9fa !important; border: 1px solid #e8eaed !important; border-radius: 14px !important; padding: 14px 16px !important; font-size: 14px !important; }
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box { background: #fff !important; border: 1px solid #dadce0 !important; box-shadow: none !important; }
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-send { border-radius: 14px !important; background: #202124 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }

html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-card__name,
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-title b { color: #202124 !important; -webkit-text-fill-color: #202124 !important; }
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box .sak-field,
html body #mobile-shop-question-modal#mobile-shop-question-modal.is-sak .sak-box .sak-email { background: #fff !important; color: #202124 !important; -webkit-text-fill-color: #202124 !important; box-shadow: none !important; }

#mobile-shop-guest-products-modal,
#mobile-shop-guest-products-modal * {
    box-sizing: border-box;
}

#mobile-shop-guest-products-modal {
    position: fixed;
    top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px));
    right: 0;
    bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    left: 0;
    z-index: 9000;
    background: var(--mobile-shop-bg);
    color: var(--mobile-shop-text);
    overflow-y: auto;
    padding: 16px 20px calc(28px + env(safe-area-inset-bottom));
}

.mobile-shop-guest-products-shell {
    display: grid;
    gap: 16px;
}

.mobile-shop-guest-products-tools {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    gap: 11px;
    padding: 2px 0 10px;
    background: var(--mobile-shop-bg);
}

.mobile-shop-guest-products-search {
    min-height: 48px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid var(--mobile-shop-border);
    border-radius: 16px;
    background: var(--mobile-shop-soft);
    color: var(--mobile-shop-muted);
    -webkit-text-fill-color: var(--mobile-shop-muted);
    padding: 0 14px;
}

.mobile-shop-guest-products-search i {
    font-size: 14px;
}

.mobile-shop-guest-products-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font: inherit;
    font-size: 15px;
    font-weight: 750;
}

.mobile-shop-guest-products-search input::placeholder {
    color: var(--mobile-shop-subtle);
    -webkit-text-fill-color: var(--mobile-shop-subtle);
}

.mobile-shop-guest-products-categories {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 1px 3px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-shop-guest-products-categories::-webkit-scrollbar {
    display: none;
}

.mobile-shop-guest-products-chip {
    flex: 0 0 auto;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid var(--mobile-shop-border);
    background: var(--mobile-shop-button-bg);
    color: var(--mobile-shop-muted);
    -webkit-text-fill-color: var(--mobile-shop-muted);
    padding: 0 13px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.mobile-shop-guest-products-chip.is-active {
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #e6533d)) 52%, var(--mobile-shop-border));
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #e6533d)) 14%, var(--mobile-shop-bg));
    color: var(--accent-color, var(--primary-color, #c93f2e));
    -webkit-text-fill-color: var(--accent-color, var(--primary-color, #c93f2e));
}

[data-theme="dark"] .mobile-shop-guest-products-chip.is-active,
[data-theme="dark-accent"] .mobile-shop-guest-products-chip.is-active {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.mobile-shop-guest-products-list {
    display: grid;
    gap: 12px;
}

.mobile-shop-guest-product-card {
    width: 100%;
    min-height: 96px;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    text-align: left;
    border: 1px solid var(--mobile-shop-border);
    border-radius: 24px;
    background: var(--mobile-shop-card-bg);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    padding: 10px;
}

.mobile-shop-guest-product-image {
    width: 74px;
    height: 74px;
    border-radius: 18px;
    background: var(--mobile-shop-card-soft);
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.mobile-shop-guest-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-shop-guest-product-image .mobile-shop-product-design-overlay {
    position: absolute !important;
    left: var(--shop-design-x, 50%) !important;
    top: var(--shop-design-y, 50%) !important;
    z-index: 2 !important;
    width: var(--shop-design-size, 22%) !important;
    height: auto !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

.mobile-shop-guest-product-card span {
    display: block;
    margin-bottom: 4px;
    color: var(--mobile-shop-muted);
    -webkit-text-fill-color: var(--mobile-shop-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mobile-shop-guest-product-card strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 15px;
    line-height: 1.12;
    font-weight: 900;
}

.mobile-shop-guest-product-card em {
    display: block;
    margin-top: 6px;
    color: var(--mobile-shop-muted);
    -webkit-text-fill-color: var(--mobile-shop-muted);
    font-style: normal;
    font-size: 13px;
    font-weight: 850;
}

.mobile-shop-guest-product-card .mobile-shop-guest-product-ticket {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 6px;
    overflow: hidden;
    color: var(--mobile-shop-muted);
    -webkit-text-fill-color: var(--mobile-shop-muted);
    font-size: 11px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-guest-product-card .mobile-shop-variant-chips {
    display: grid;
    gap: 4px;
    margin-top: 8px;
}

.mobile-shop-guest-product-card .mobile-shop-variant-chips div {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.mobile-shop-guest-product-card .mobile-shop-variant-chips strong {
    display: inline;
    flex: 0 0 auto;
    color: var(--mobile-shop-muted);
    -webkit-text-fill-color: var(--mobile-shop-muted);
    font-size: 9px;
    line-height: 1;
    text-transform: uppercase;
}

.mobile-shop-guest-product-card .mobile-shop-variant-chips span {
    flex: 0 0 auto;
    margin: 0;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid var(--mobile-shop-border);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

.mobile-shop-guest-products-empty {
    width: min(100%, 340px);
    margin: 54px auto 0;
    padding: 12px 18px;
    text-align: center;
    color: var(--mobile-shop-muted);
}

.mobile-shop-guest-products-empty-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 22px;
    border: 1px solid var(--mobile-shop-border);
    background: color-mix(in srgb, var(--mobile-shop-card-bg) 82%, #ffffff 18%);
    color: var(--mobile-shop-muted);
    -webkit-text-fill-color: var(--mobile-shop-muted);
    display: grid;
    place-items: center;
}

.mobile-shop-guest-products-empty-icon i {
    font-size: 28px;
    opacity: 0.82;
}

.mobile-shop-guest-products-empty strong,
.mobile-shop-guest-products-empty span {
    display: block;
}

.mobile-shop-guest-products-empty strong {
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 24px;
    line-height: 1.08;
    margin-bottom: 10px;
    font-weight: 950;
}

.mobile-shop-guest-products-empty span {
    max-width: 280px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 650;
}

/* Ticket tier picker.
 *
 * A full-screen editorial sheet, modeled on the "Ticket View" design canvas:
 * a slim sticky bar with the event code, a mono date eyebrow over a big
 * title, the key art at 3:2, a hairline facts grid, tier rows (not cards)
 * with a square stepper, and a sticky dock carrying the running total and a
 * square checkout button.
 *
 * The sheet's id is deliberately `shop-ticket-tiers`, not `mobile-…-modal`:
 * the light theme repaints everything inside any id containing "modal"
 * (`html[data-theme="light"] body [id*="modal"] * { color: #000 !important }`)
 * and mobile-button-safety.css repaints every button inside `mobile-*-modal`
 * / `mobile-*-sheet` containers white, at id-level specificity. Neither
 * pattern matches this id, so the greys, the key art and the black button
 * survive. The id + !important on the colors below is belt and braces
 * against the older `[class*="modal"] *` overrides, which still match the
 * class.
 */
html body #shop-ticket-tiers.is-tier-picker,
html body #shop-ticket-tiers.is-menu-item {
    --tier-ink: #0d0f0e;
    --tier-body: #6f6f69;
    --tier-mute: #9a9a93;
    --tier-label: #8b8b85;
    --tier-hair: #e6e6e2;
    --tier-rule: #dcdcd6;
    --tier-paper: #ffffff;
    --tier-tint: #f6f7f5;
    --tier-accent: #3d7a56;
    --tier-accent: oklch(0.52 0.09 152);
    --tier-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    background: var(--tier-paper) !important;
    color: var(--tier-ink) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

html body #shop-ticket-tiers .mobile-shop-tier-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 36px;
}

/* Sticky bar */
html body #shop-ticket-tiers .mobile-shop-tier-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tier-hair);
}

html body #shop-ticket-tiers .mobile-shop-tier-bar button {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tier-ink) !important;
    -webkit-text-fill-color: var(--tier-ink) !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

html body #shop-ticket-tiers .mobile-shop-tier-bar span {
    font-family: var(--tier-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--tier-label) !important;
    -webkit-text-fill-color: var(--tier-label) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Intro */
html body #shop-ticket-tiers .mobile-shop-tier-intro {
    padding: 34px 20px 0;
}

html body #shop-ticket-tiers .mobile-shop-tier-eyebrow {
    font-family: var(--tier-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--tier-label) !important;
    -webkit-text-fill-color: var(--tier-label) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-intro h2 {
    margin: 14px 0 0;
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 600;
    text-wrap: pretty;
    color: var(--tier-ink) !important;
    -webkit-text-fill-color: var(--tier-ink) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-intro p {
    margin: 14px 0 0;
    max-width: 32ch;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
    color: var(--tier-body) !important;
    -webkit-text-fill-color: var(--tier-body) !important;
}

/* Key art, 3:2, tap to view full */
html body #shop-ticket-tiers .mobile-shop-tier-art {
    display: block;
    width: calc(100% - 40px);
    margin: 30px 20px 0;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: #eeeeea !important;
    box-shadow: none !important;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* Facts grid: hairline-topped cells, two across */
html body #shop-ticket-tiers .mobile-shop-tier-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 1px;
    margin-top: 34px;
    padding: 0 20px;
    background: transparent !important;
    border: 0;
}

html body #shop-ticket-tiers .mobile-shop-tier-facts > div {
    border-top: 1px solid var(--tier-hair);
    padding: 14px 0 13px;
    background: transparent !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-facts span {
    display: block;
    font-family: var(--tier-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--tier-mute) !important;
    -webkit-text-fill-color: var(--tier-mute) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-facts strong {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--tier-ink) !important;
    -webkit-text-fill-color: var(--tier-ink) !important;
}

/* Pickup location: a fact like the rest, but the address is long enough to
   need the full row, and the owner can tap the value to correct it -- a
   Google listing's address is a starting point, not always where pickup
   actually happens. */
html body #shop-ticket-tiers .mobile-shop-tier-facts > div.is-pickup {
    grid-column: 1 / -1;
}

html body #shop-ticket-tiers .mobile-shop-tier-facts [data-pickup-value] {
    outline: none;
    cursor: text;
}

html body #shop-ticket-tiers .mobile-shop-tier-facts [data-pickup-value]:empty::before {
    content: attr(data-placeholder);
    color: var(--tier-mute) !important;
    -webkit-text-fill-color: var(--tier-mute) !important;
}

html body #shop-ticket-tiers .mobile-shop-pickup-edit-hint {
    margin-top: 4px;
    font-family: var(--tier-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--tier-mute) !important;
    -webkit-text-fill-color: var(--tier-mute) !important;
}

/* Section head */
html body #shop-ticket-tiers .mobile-shop-tier-choose {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 40px;
    padding: 0 20px 10px;
    font-family: var(--tier-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

html body #shop-ticket-tiers .mobile-shop-tier-choose span:first-child {
    color: var(--tier-ink) !important;
    -webkit-text-fill-color: var(--tier-ink) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-choose span:last-child {
    letter-spacing: 0.12em;
    color: var(--tier-mute) !important;
    -webkit-text-fill-color: var(--tier-mute) !important;
}

/* Tier rows */
html body #shop-ticket-tiers .mobile-shop-tier-row {
    padding: 24px 20px;
    border-top: 1px solid var(--tier-hair);
    background: transparent !important;
    transition: background 140ms ease;
}

html body #shop-ticket-tiers .mobile-shop-tier-row.is-active {
    background: var(--tier-tint) !important;
    box-shadow: inset 2px 0 0 var(--tier-accent);
}

html body #shop-ticket-tiers .mobile-shop-tier-row.is-sold-out {
    opacity: 0.5;
}

html body #shop-ticket-tiers .mobile-shop-tier-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

html body #shop-ticket-tiers .mobile-shop-tier-row-head strong,
html body #shop-ticket-tiers .mobile-shop-tier-price {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tier-ink) !important;
    -webkit-text-fill-color: var(--tier-ink) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-price {
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

html body #shop-ticket-tiers .mobile-shop-tier-row-meta {
    margin-top: 7px;
    font-family: var(--tier-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--tier-mute) !important;
    -webkit-text-fill-color: var(--tier-mute) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-perks {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html body #shop-ticket-tiers .mobile-shop-tier-perks li {
    display: flex;
    gap: 9px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--tier-body) !important;
    -webkit-text-fill-color: var(--tier-body) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-perks li span:first-child {
    color: #c8c8c1 !important;
    -webkit-text-fill-color: #c8c8c1 !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-perks li span:last-child {
    color: var(--tier-body) !important;
    -webkit-text-fill-color: var(--tier-body) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-row-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
}

html body #shop-ticket-tiers .mobile-shop-tier-state {
    font-family: var(--tier-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--tier-mute) !important;
    -webkit-text-fill-color: var(--tier-mute) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-row.is-active .mobile-shop-tier-state {
    color: var(--tier-accent) !important;
    -webkit-text-fill-color: var(--tier-accent) !important;
}

/* Square stepper */
html body #shop-ticket-tiers .mobile-shop-tier-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--tier-rule);
    border-radius: 0;
    background: #ffffff !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-stepper[hidden] {
    display: none;
}

html body #shop-ticket-tiers .mobile-shop-tier-stepper button {
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tier-ink) !important;
    -webkit-text-fill-color: var(--tier-ink) !important;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

html body #shop-ticket-tiers .mobile-shop-tier-stepper button:active {
    background: #f2f2ee !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-stepper span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border-left: 1px solid #ecece6;
    border-right: 1px solid #ecece6;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--tier-ink) !important;
    -webkit-text-fill-color: var(--tier-ink) !important;
}

/* Fine print */
html body #shop-ticket-tiers .mobile-shop-tier-fine {
    margin-top: 0;
    padding: 26px 20px 0;
    border-top: 1px solid var(--tier-hair);
    font-family: var(--tier-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--tier-mute) !important;
    -webkit-text-fill-color: var(--tier-mute) !important;
}

/* Dock */
html body #shop-ticket-tiers .mobile-shop-tier-dock {
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--tier-rule);
    box-shadow: none;
}

html body #shop-ticket-tiers .mobile-shop-tier-dock-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0;
}

html body #shop-ticket-tiers .mobile-shop-tier-dock-line span {
    font-family: var(--tier-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--tier-label) !important;
    -webkit-text-fill-color: var(--tier-label) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-dock-line strong {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--tier-ink) !important;
    -webkit-text-fill-color: var(--tier-ink) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-dock-fee {
    margin-top: 6px;
    font-family: var(--tier-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--tier-mute) !important;
    -webkit-text-fill-color: var(--tier-mute) !important;
}

html body #shop-ticket-tiers .mobile-shop-tier-cta {
    margin-top: 16px;
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--tier-ink) !important;
    box-shadow: none !important;
    color: var(--tier-paper) !important;
    -webkit-text-fill-color: var(--tier-paper) !important;
    font-family: var(--tier-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: background 140ms ease;
}

html body #shop-ticket-tiers .mobile-shop-tier-cta:disabled {
    background: var(--tier-rule) !important;
    color: var(--tier-mute) !important;
    -webkit-text-fill-color: var(--tier-mute) !important;
    cursor: not-allowed;
}

html body #shop-ticket-tiers .mobile-shop-tier-cta.is-added {
    background: var(--tier-accent) !important;
    color: var(--tier-paper) !important;
    -webkit-text-fill-color: var(--tier-paper) !important;
}

/* Full-image viewer, opened from the key art */
.mobile-shop-tier-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.94);
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

.mobile-shop-tier-image-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.mobile-shop-tier-image-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    right: 18px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

/* ------------------------------------------------- the desktop Shop face
   Product, menu and ticket sheets carry the /<T>/shop page's shapes: the
   wide display face on the title, rounded art, a pill "add" button, a
   rounded stepper, no grey fills (the chosen row is marked by a bar, a
   waiting button by an outline), and a dark twin of every token. */
html body #shop-ticket-tiers.is-tier-picker,
html body #shop-ticket-tiers.is-menu-item {
    --tier-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --tier-tint: transparent;
    --tier-accent: #0d0f0e;
}
html[data-theme="dark"] body #shop-ticket-tiers.is-tier-picker,
html[data-theme="dark"] body #shop-ticket-tiers.is-menu-item {
    --tier-ink: #f4f4f5;
    --tier-body: #b4b4b8;
    --tier-mute: #8a8a90;
    --tier-label: #8a8a90;
    --tier-hair: #232327;
    --tier-rule: #34343a;
    --tier-paper: #0b0b0d;
    --tier-accent: #f4f4f5;
}
html body #shop-ticket-tiers .mobile-shop-tier-intro h2 {
    font-family: var(--tier-display) !important;
    font-stretch: 118% !important;
    font-weight: 900 !important;
    font-size: 30px;
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}
html body #shop-ticket-tiers .mobile-shop-tier-art {
    border-radius: 22px;
    background-color: var(--tier-hair) !important;
}
html body #shop-ticket-tiers .mobile-shop-tier-row.is-active {
    box-shadow: inset 3px 0 0 var(--tier-accent);
}
html body #shop-ticket-tiers .mobile-shop-tier-stepper {
    border-radius: 22px;
    overflow: hidden;
    background: var(--tier-paper) !important;
}
html body #shop-ticket-tiers .mobile-shop-tier-stepper button {
    background: var(--tier-paper) !important;
}
html body #shop-ticket-tiers .mobile-shop-tier-stepper button:active {
    background: var(--tier-hair) !important;
}
html body #shop-ticket-tiers .mobile-shop-tier-stepper span {
    border-color: var(--tier-hair);
}
html body #shop-ticket-tiers .mobile-shop-tier-cta {
    height: 54px;
    border-radius: 27px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
}
html body #shop-ticket-tiers .mobile-shop-tier-cta:disabled {
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px var(--tier-rule) !important;
}
html[data-theme="dark"] body #shop-ticket-tiers .mobile-shop-tier-bar,
html[data-theme="dark"] body #shop-ticket-tiers .mobile-shop-tier-dock {
    background: rgba(11, 11, 13, 0.94) !important;
}
html[data-theme="dark"] body #shop-ticket-tiers .mobile-shop-tier-bar button {
    background: transparent !important;
    color: var(--tier-ink) !important;
    -webkit-text-fill-color: var(--tier-ink) !important;
}

/* The item sheet, as desktop /<T>/shop opens it: the picture first, big, on
   the app's colour; then the condensed name, the words, the choices, and a
   black pill to add it. Menu items and tickets share this sheet. */
html body #shop-ticket-tiers .mobile-shop-tier-scroll { display: flex; flex-direction: column; }
html body #shop-ticket-tiers .mobile-shop-tier-bar { order: -2; }
html body #shop-ticket-tiers .mobile-shop-tier-art {
    order: -1;
    width: calc(100% - 24px);
    margin: 10px 12px 0;
    aspect-ratio: 1 / 1;
    border-radius: 26px;
    background-color: var(--pc-btn, var(--primary-color, #0e0e0e)) !important;
}
html body #shop-ticket-tiers.is-tier-picker .mobile-shop-tier-art { aspect-ratio: 4 / 5; }
html body #shop-ticket-tiers .mobile-shop-tier-intro h2 { font-size: 34px; }
html body #shop-ticket-tiers .mobile-shop-tier-row .mobile-shop-tier-price {
    font-family: var(--tier-display) !important;
    font-weight: 900 !important;
}

/* Digital item sheet.
 *
 * The same full-screen editorial sheet as the ticket tier picker, for digital
 * items and memberships: slim bar, eyebrow, title, art, facts grid, what's
 * inside, license, and a dock with a square black action. The tokens and
 * rhythm are the ticket sheet's, renamed; its own id (`shop-digital-item`)
 * keeps the blanket "[id*=modal]" repaints and the button-safety sheet off.
 */
html body #shop-digital-item,
html body #shop-digital-item.is-menu-item {
    --dg-ink: #0d0f0e;
    --dg-body: #6f6f69;
    --dg-mute: #9a9a93;
    --dg-label: #8b8b85;
    --dg-hair: #e6e6e2;
    --dg-rule: #dcdcd6;
    --dg-paper: #ffffff;
    --dg-tint: #f6f7f5;
    --dg-accent: #3d7a56;
    --dg-accent: oklch(0.52 0.09 152);
    --dg-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    background: var(--dg-paper) !important;
    color: var(--dg-ink) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

html body #shop-digital-item .dg-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 36px;
}

/* Sticky bar */
html body #shop-digital-item .dg-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--dg-hair);
}

html body #shop-digital-item .dg-bar button {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--dg-ink) !important;
    -webkit-text-fill-color: var(--dg-ink) !important;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

html body #shop-digital-item .dg-bar span {
    font-family: var(--dg-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--dg-label) !important;
    -webkit-text-fill-color: var(--dg-label) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Intro */
html body #shop-digital-item .dg-intro {
    padding: 34px 20px 0;
}

html body #shop-digital-item .dg-eyebrow {
    font-family: var(--dg-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--dg-label) !important;
    -webkit-text-fill-color: var(--dg-label) !important;
}

html body #shop-digital-item .dg-intro h2 {
    margin: 14px 0 0;
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -0.025em;
    font-weight: 600;
    text-wrap: pretty;
    color: var(--dg-ink) !important;
    -webkit-text-fill-color: var(--dg-ink) !important;
}

html body #shop-digital-item .dg-intro p {
    margin: 14px 0 0;
    max-width: 32ch;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
    color: var(--dg-body) !important;
    -webkit-text-fill-color: var(--dg-body) !important;
}

/* Key art, 3:2, tap to view full */
html body #shop-digital-item .dg-art {
    display: block;
    width: calc(100% - 40px);
    margin: 30px 20px 0;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: #eeeeea !important;
    box-shadow: none !important;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* Facts grid: hairline-topped cells, two across */
html body #shop-digital-item .dg-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 1px;
    margin-top: 34px;
    padding: 0 20px;
    background: transparent !important;
    border: 0;
}

html body #shop-digital-item .dg-facts > div {
    border-top: 1px solid var(--dg-hair);
    padding: 14px 0 13px;
    background: transparent !important;
}

html body #shop-digital-item .dg-facts span {
    display: block;
    font-family: var(--dg-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--dg-mute) !important;
    -webkit-text-fill-color: var(--dg-mute) !important;
}

html body #shop-digital-item .dg-facts strong {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--dg-ink) !important;
    -webkit-text-fill-color: var(--dg-ink) !important;
}

/* Pickup location: a fact like the rest, but the address is long enough to
   need the full row, and the owner can tap the value to correct it -- a
   Google listing's address is a starting point, not always where pickup
   actually happens. */
html body #shop-digital-item .dg-facts > div.is-pickup {
    grid-column: 1 / -1;
}

html body #shop-digital-item .dg-facts [data-pickup-value] {
    outline: none;
    cursor: text;
}

html body #shop-digital-item .dg-facts [data-pickup-value]:empty::before {
    content: attr(data-placeholder);
    color: var(--dg-mute) !important;
    -webkit-text-fill-color: var(--dg-mute) !important;
}

html body #shop-digital-item .mobile-shop-pickup-edit-hint {
    margin-top: 4px;
    font-family: var(--dg-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--dg-mute) !important;
    -webkit-text-fill-color: var(--dg-mute) !important;
}

/* Section head */
html body #shop-digital-item .dg-choose {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 40px;
    padding: 0 20px 10px;
    font-family: var(--dg-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
}

html body #shop-digital-item .dg-choose span:first-child {
    color: var(--dg-ink) !important;
    -webkit-text-fill-color: var(--dg-ink) !important;
}

html body #shop-digital-item .dg-choose span:last-child {
    letter-spacing: 0.12em;
    color: var(--dg-mute) !important;
    -webkit-text-fill-color: var(--dg-mute) !important;
}

/* Fine print */
html body #shop-digital-item .dg-fine {
    margin-top: 0;
    padding: 26px 20px 0;
    border-top: 1px solid var(--dg-hair);
    font-family: var(--dg-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--dg-mute) !important;
    -webkit-text-fill-color: var(--dg-mute) !important;
}

/* Dock */
html body #shop-digital-item .dg-dock {
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--dg-rule);
    box-shadow: none;
}

html body #shop-digital-item .dg-dock-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0;
}

html body #shop-digital-item .dg-dock-line span {
    font-family: var(--dg-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--dg-label) !important;
    -webkit-text-fill-color: var(--dg-label) !important;
}

html body #shop-digital-item .dg-dock-line strong {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--dg-ink) !important;
    -webkit-text-fill-color: var(--dg-ink) !important;
}

html body #shop-digital-item .dg-dock-fee {
    margin-top: 6px;
    font-family: var(--dg-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--dg-mute) !important;
    -webkit-text-fill-color: var(--dg-mute) !important;
}

html body #shop-digital-item .dg-cta {
    margin-top: 16px;
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--dg-ink) !important;
    box-shadow: none !important;
    color: var(--dg-paper) !important;
    -webkit-text-fill-color: var(--dg-paper) !important;
    font-family: var(--dg-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: background 140ms ease;
}

html body #shop-digital-item .dg-cta:disabled {
    background: var(--dg-rule) !important;
    color: var(--dg-mute) !important;
    -webkit-text-fill-color: var(--dg-mute) !important;
    cursor: not-allowed;
}

html body #shop-digital-item .dg-cta.is-added {
    background: var(--dg-accent) !important;
    color: var(--dg-paper) !important;
    -webkit-text-fill-color: var(--dg-paper) !important;
}


/* Share button in the bar */
html body #shop-digital-item .dg-bar button[data-share] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--dg-ink) !important;
    -webkit-text-fill-color: var(--dg-ink) !important;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

html body #shop-digital-item .dg-bar {
    justify-content: space-between;
}

html body #shop-digital-item .dg-bar-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Art: 4:3 like the Digital Item sheet; a video plays in place */
html body #shop-digital-item .dg-art {
    aspect-ratio: 4 / 3;
}

html body #shop-digital-item .dg-art.is-video {
    cursor: default;
}

html body #shop-digital-item .dg-art video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* What's inside */
html body #shop-digital-item .dg-list {
    padding: 0 20px;
}

html body #shop-digital-item .dg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--dg-hair);
}

html body #shop-digital-item .dg-ext {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f0 !important;
    font-family: var(--dg-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--dg-body) !important;
    -webkit-text-fill-color: var(--dg-body) !important;
}

html body #shop-digital-item .dg-row-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    color: var(--dg-ink) !important;
    -webkit-text-fill-color: var(--dg-ink) !important;
}

html body #shop-digital-item .dg-row-size {
    flex: 0 0 auto;
    font-family: var(--dg-mono);
    font-size: 9.5px;
    color: var(--dg-mute) !important;
    -webkit-text-fill-color: var(--dg-mute) !important;
}

/* License */
html body #shop-digital-item .dg-license {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
}

html body #shop-digital-item .dg-license-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--dg-body) !important;
    -webkit-text-fill-color: var(--dg-body) !important;
}

html body #shop-digital-item .dg-license-line > span:last-child {
    color: var(--dg-body) !important;
    -webkit-text-fill-color: var(--dg-body) !important;
}

html body #shop-digital-item .dg-dot {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    margin-top: 7px;
    border-radius: 50%;
    background: #18a957 !important;
}

html body #shop-digital-item .dg-license-line.is-restricted .dg-dot {
    background: #c8102e !important;
}

/* Owner dock */
html body #shop-digital-item .dg-owner {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

html body #shop-digital-item .dg-owner .dg-cta {
    margin-top: 0;
    flex: 1;
}

html body #shop-digital-item .dg-cta.is-secondary {
    border: 1px solid var(--dg-rule);
    background: var(--dg-paper) !important;
    color: var(--dg-ink) !important;
    -webkit-text-fill-color: var(--dg-ink) !important;
}

/* ------------------------------------------------- the desktop Shop face
   As desktop /<T>/shop opens a download: the picture first on the app's
   colour, the condensed name, what you get, a black pill to add it, and a
   dark twin of every token. */
html body #shop-digital-item {
    --dg-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --dg-tint: transparent;
}
html[data-theme="dark"] body #shop-digital-item {
    --dg-ink: #f4f4f5;
    --dg-body: #b4b4b8;
    --dg-mute: #8a8a90;
    --dg-label: #8a8a90;
    --dg-hair: #232327;
    --dg-rule: #34343a;
    --dg-paper: #0b0b0d;
}
html body #shop-digital-item .dg-scroll { display: flex; flex-direction: column; }
html body #shop-digital-item .dg-bar { order: -2; }
html body #shop-digital-item .dg-art {
    order: -1;
    width: calc(100% - 24px) !important;
    margin: 10px 12px 0 !important;
    aspect-ratio: 1 / 1;
    border-radius: 26px !important;
    background-color: var(--pc-btn, var(--primary-color, #0e0e0e)) !important;
}
html body #shop-digital-item .dg-intro h2 {
    font-family: var(--dg-display) !important;
    font-stretch: 118% !important;
    font-weight: 900 !important;
    font-size: 34px;
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}
html body #shop-digital-item .dg-dock-line strong {
    font-family: var(--dg-display) !important;
    font-weight: 900 !important;
}
html body #shop-digital-item .dg-cta {
    height: 54px;
    border-radius: 27px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
}
html body #shop-digital-item .dg-cta:disabled {
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px var(--dg-rule) !important;
}
html[data-theme="dark"] body #shop-digital-item .dg-bar,
html[data-theme="dark"] body #shop-digital-item .dg-dock { background: rgba(11, 11, 13, 0.94) !important; }
html[data-theme="dark"] body #shop-digital-item .dg-bar button { background: transparent !important; color: var(--dg-ink) !important; -webkit-text-fill-color: var(--dg-ink) !important; }

/* Shop cart.
 *
 * Full-screen editorial sheet, modeled on the "Cart" design canvas and
 * matching the ticket sheet: a slim sticky bar with the order code and a
 * CLEAR action, a mono meta line over a big "Your cart" title, hairline
 * line items with REMOVE and a square stepper, a hairline summary, fine
 * print, and a sticky dock with the total and a square "CONTINUE TO
 * PAYMENT" button.
 *
 * The id `shopping-cart-modal` contains "modal", so the light theme's
 * `[id*="modal"] * { color:#000 !important }` overrides match everything in
 * here. Every color below is therefore written at id-level specificity with
 * !important. (mobile-button-safety.css does not match: that needs an id
 * starting with "mobile-".)
 */
html body #shopping-cart-modal {
    --cart-ink: #0d0f0e;
    --cart-body: #6f6f69;
    --cart-mute: #9a9a93;
    --cart-label: #8b8b85;
    --cart-hair: #e6e6e2;
    --cart-rule: #dcdcd6;
    --cart-paper: #ffffff;
    --cart-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    position: fixed;
    inset: 0;
    z-index: 150000;
    display: flex;
    flex-direction: column;
    background: var(--cart-paper) !important;
    color: var(--cart-ink) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    isolation: isolate;
}

html body #shopping-cart-modal .cart-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 28px;
}

/* Sticky bar */
html body #shopping-cart-modal .cart-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cart-hair);
}

html body #shopping-cart-modal .cart-bar-lead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

html body #shopping-cart-modal .cart-bar button,
html body #shopping-cart-modal .cart-bar-clear {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

html body #shopping-cart-modal .cart-bar-back {
    width: 26px;
    height: 26px;
    font-size: 22px;
    line-height: 1;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}

html body #shopping-cart-modal .cart-bar-code,
html body #shopping-cart-modal .cart-bar-clear {
    font-family: var(--cart-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--cart-label) !important;
    -webkit-text-fill-color: var(--cart-label) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body #shopping-cart-modal .cart-bar-clear[hidden] {
    display: none;
}

/* Intro */
html body #shopping-cart-modal .cart-intro {
    padding: 34px 20px 0;
}

html body #shopping-cart-modal .cart-intro-meta {
    font-family: var(--cart-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--cart-label) !important;
    -webkit-text-fill-color: var(--cart-label) !important;
}

html body #shopping-cart-modal .cart-intro h2 {
    margin: 14px 0 0;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}

html body #shopping-cart-modal .cart-intro p {
    margin: 12px 0 0;
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
    color: var(--cart-body) !important;
    -webkit-text-fill-color: var(--cart-body) !important;
}

/* Section heads */
html body #shopping-cart-modal .cart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 34px;
    padding: 0 20px 10px;
    font-family: var(--cart-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}

html body #shopping-cart-modal .cart-head[hidden],
html body #shopping-cart-modal .cart-fine:empty {
    display: none;
}

html body #shopping-cart-modal .cart-head span:last-child {
    letter-spacing: 0.12em;
    color: var(--cart-mute) !important;
    -webkit-text-fill-color: var(--cart-mute) !important;
}

/* Line items */
html body #shopping-cart-modal .cart-line {
    padding: 22px 20px;
    border-top: 1px solid var(--cart-hair);
    background: transparent !important;
}

html body #shopping-cart-modal .cart-line-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

html body #shopping-cart-modal .cart-line-name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}

html body #shopping-cart-modal .cart-line-meta {
    margin-top: 6px;
    font-family: var(--cart-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--cart-mute) !important;
    -webkit-text-fill-color: var(--cart-mute) !important;
}

html body #shopping-cart-modal .cart-line-total {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}

html body #shopping-cart-modal .cart-line-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

html body #shopping-cart-modal .cart-line-remove {
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--cart-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--cart-mute) !important;
    -webkit-text-fill-color: var(--cart-mute) !important;
    cursor: pointer;
}

/* Square stepper */
html body #shopping-cart-modal .cart-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cart-rule);
    border-radius: 0;
    background: #ffffff !important;
}

html body #shopping-cart-modal .cart-stepper button {
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

html body #shopping-cart-modal .cart-stepper button:active {
    background: #f2f2ee !important;
}

html body #shopping-cart-modal .cart-stepper span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border-left: 1px solid #ecece6;
    border-right: 1px solid #ecece6;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}

/* Empty */
html body #shopping-cart-modal .cart-empty {
    display: block;
    width: 100%;
    padding: 40px 20px;
    border: 0;
    border-top: 1px solid var(--cart-hair);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    font-family: var(--cart-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--cart-mute) !important;
    -webkit-text-fill-color: var(--cart-mute) !important;
    cursor: pointer;
}

html body #shopping-cart-modal .cart-empty u {
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
    text-underline-offset: 3px;
}

/* Summary */
html body #shopping-cart-modal .cart-summary {
    padding: 0 20px;
}

html body #shopping-cart-modal .cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--cart-hair);
    padding: 14px 0 13px;
}

html body #shopping-cart-modal .cart-summary-row > span:first-child {
    font-size: 14px;
    color: var(--cart-body) !important;
    -webkit-text-fill-color: var(--cart-body) !important;
}

html body #shopping-cart-modal .cart-summary-row > span:last-child {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}

html body #shopping-cart-modal .cart-summary-row small,
html body #shopping-cart-modal .cart-summary-row .cart-summary-note {
    font-family: var(--cart-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--cart-mute) !important;
    -webkit-text-fill-color: var(--cart-mute) !important;
}

html body #shopping-cart-modal .cart-summary-row > span.cart-summary-note {
    font-size: 11px;
    letter-spacing: 0.12em;
}

html body #shopping-cart-modal .cart-summary-row.is-total {
    border-top: 1px solid var(--cart-ink);
    padding: 16px 0 0;
}

html body #shopping-cart-modal .cart-summary-row.is-total > span:first-child {
    font-size: 15px;
    font-weight: 600;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}

html body #shopping-cart-modal .cart-summary-row.is-total > span:last-child {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Fine print */
html body #shopping-cart-modal .cart-fine {
    margin-top: 34px;
    padding: 22px 20px 0;
    border-top: 1px solid var(--cart-hair);
    font-family: var(--cart-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--cart-mute) !important;
    -webkit-text-fill-color: var(--cart-mute) !important;
}

/* Dock */
html body #shopping-cart-modal .cart-dock {
    flex: 0 0 auto;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--cart-rule);
}

html body #shopping-cart-modal .cart-dock-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

html body #shopping-cart-modal .cart-dock-line span {
    font-family: var(--cart-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--cart-label) !important;
    -webkit-text-fill-color: var(--cart-label) !important;
}

html body #shopping-cart-modal .cart-dock-line strong {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}

html body #shopping-cart-modal .cart-dock-breakdown {
    margin-top: 6px;
    font-family: var(--cart-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--cart-mute) !important;
    -webkit-text-fill-color: var(--cart-mute) !important;
}

html body #shopping-cart-modal .cart-cta {
    margin-top: 16px;
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--cart-ink) !important;
    box-shadow: none !important;
    color: var(--cart-paper) !important;
    -webkit-text-fill-color: var(--cart-paper) !important;
    font-family: var(--cart-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    cursor: pointer;
    transition: background 140ms ease;
}

html body #shopping-cart-modal .cart-cta:disabled {
    background: var(--cart-rule) !important;
    color: var(--cart-mute) !important;
    -webkit-text-fill-color: var(--cart-mute) !important;
    cursor: not-allowed;
}

/* While the ledger's "Total due" row is on screen the dock would repeat the
   same number an inch below it; collapse the dock to just the button until
   the ledger scrolls away (toggled by an IntersectionObserver). */
html body #shopping-cart-modal .cart-dock.is-ledger-visible .cart-dock-line,
html body #shopping-cart-modal .cart-dock.is-ledger-visible .cart-dock-breakdown {
    display: none;
}

html body #shopping-cart-modal .cart-dock.is-ledger-visible button {
    margin-top: 0;
}

/* ------------------------------------------------- the desktop Shop face
   The bag carries the /<T>/shop page's shapes: the display face on the
   title and total, rounded steppers, a pill checkout button, no grey
   fills, and a dark twin of every token. */
html body #shopping-cart-modal {
    --cart-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
}
html[data-theme="dark"] body #shopping-cart-modal {
    --cart-ink: #f4f4f5;
    --cart-body: #b4b4b8;
    --cart-mute: #8a8a90;
    --cart-label: #8a8a90;
    --cart-hair: #232327;
    --cart-rule: #34343a;
    --cart-paper: #0b0b0d;
}
html body #shopping-cart-modal .cart-intro h2 {
    font-family: var(--cart-display) !important;
    font-stretch: 118% !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}
html body #shopping-cart-modal .cart-dock-line strong {
    font-family: var(--cart-display) !important;
    font-weight: 900 !important;
}
html body #shopping-cart-modal .cart-stepper {
    border-radius: 20px;
    overflow: hidden;
    background: var(--cart-paper) !important;
}
html body #shopping-cart-modal .cart-stepper button {
    background: var(--cart-paper) !important;
}
html body #shopping-cart-modal .cart-cta {
    height: 54px;
    border-radius: 27px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
}
html body #shopping-cart-modal .cart-cta:disabled {
    background: transparent !important;
    box-shadow: inset 0 0 0 1.5px var(--cart-rule) !important;
    color: var(--cart-mute) !important;
    -webkit-text-fill-color: var(--cart-mute) !important;
}
html[data-theme="dark"] body #shopping-cart-modal .cart-bar,
html[data-theme="dark"] body #shopping-cart-modal .cart-dock {
    background: rgba(11, 11, 13, 0.94) !important;
}
html[data-theme="dark"] body #shopping-cart-modal .cart-bar button,
html[data-theme="dark"] body #shopping-cart-modal .cart-remove,
html[data-theme="dark"] body #shopping-cart-modal .cart-line button:not(.cart-cta) {
    background: transparent !important;
    color: var(--cart-ink) !important;
    -webkit-text-fill-color: var(--cart-ink) !important;
}
html[data-theme="dark"] body #shopping-cart-modal .cart-stepper button:active {
    background: var(--cart-hair) !important;
}
html body #shopping-cart-modal .cart-line.has-pic .cart-line-head { align-items: center; gap: 12px; }
html body #shopping-cart-modal .cart-line-pic {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--pc-btn, var(--primary-color, #0e0e0e)) !important;
}
html body #shopping-cart-modal .cart-line-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body #shopping-cart-modal .cart-line.has-pic .cart-line-foot { padding-left: 76px; }
html body #shopping-cart-modal .cart-line-name {
    font-family: var(--cart-display) !important;
    font-stretch: 112% !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    font-size: 15px;
}

/* ------------------------------------------------------------ the bag
   The cart as desktop /<T>/shop's bag drawer, full screen on the phone:
   "Bag" in the display face with a round close, photo lines with the line
   total, options, a small stepper and an underlined Remove, the pickup /
   delivery / seat choice for menu lines, and a foot with subtotal, fee and
   total over one app-colour button. Doubled id so the theme sweeps lose. */
#shopping-cart-modal#shopping-cart-modal.is-bag {
    --cart-line: var(--cart-hair);
    --cart-brand: var(--pc-btn, var(--primary-color, #0e0e0e));
    --cart-on-brand: var(--pc-on-btn, #ffffff);
    color: var(--cart-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
}
#shopping-cart-modal#shopping-cart-modal.is-bag * { box-sizing: border-box; -webkit-text-fill-color: currentColor; }
#shopping-cart-modal#shopping-cart-modal.is-bag button { box-shadow: none !important; margin: 0 !important; min-height: 0 !important; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px;
    border-bottom: 1px solid var(--cart-line);
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-title {
    font-family: inherit !important; font-weight: 760;
    font-size: 25px; letter-spacing: -.025em; text-transform: none; line-height: 1.15;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-count {
    flex: 1; font-family: inherit !important; font-size: 13px; font-weight: 500;
    letter-spacing: 0; text-transform: none; color: var(--cart-body) !important;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-x {
    width: 44px; height: 44px; border-radius: 0 !important; border: 0 !important;
    background: transparent !important; color: var(--cart-ink) !important; -webkit-text-fill-color: var(--cart-ink) !important;
    font-size: 28px; font-weight: 300; line-height: 1; display: grid; place-items: center; padding: 0;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .cart-scroll { padding: 4px 20px 20px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line {
    display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--cart-line);
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__pic {
    position: relative; flex: 0 0 72px; height: 90px; border-radius: 12px; overflow: hidden;
    background: var(--cart-brand) !important; display: grid; place-items: center;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__pic span {
    font-family: var(--cart-display) !important; font-weight: 900; font-size: 26px;
    color: var(--cart-on-brand) !important; -webkit-text-fill-color: var(--cart-on-brand) !important;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__pic img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__top { display: flex; justify-content: space-between; gap: 10px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__top b { font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__top span { font-family: var(--cart-mono) !important; font-size: 14px; font-weight: 700; flex: 0 0 auto; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__meta { font-size: 13px; font-weight: 600; color: var(--cart-body) !important; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__ctl { margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 14px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-qty {
    display: flex; align-items: center; height: 34px; border-radius: 17px; border: 1.5px solid var(--cart-line);
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-qty button {
    width: 34px; height: 100%; border: 0 !important; background: transparent !important; padding: 0;
    color: var(--cart-ink) !important; -webkit-text-fill-color: var(--cart-ink) !important; font-size: 17px;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-qty button:disabled { opacity: .3; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-qty span { width: 20px; text-align: center; font-family: var(--cart-mono) !important; font-size: 13px; font-weight: 700; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-line__rm {
    border: 0 !important; background: none !important; padding: 0; font-size: 13px; text-decoration: underline;
    color: var(--cart-body) !important; -webkit-text-fill-color: var(--cart-body) !important;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 96px 0 40px; text-align: center; color: var(--cart-body) !important;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-empty b {
    font-family: var(--cart-display) !important; font-stretch: 118%; font-size: 24px; font-weight: 900;
    text-transform: uppercase; letter-spacing: -.03em; color: var(--cart-ink) !important;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-browse,
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-go {
    height: 54px; border-radius: 27px !important; border: 0 !important; padding: 0 28px;
    background: var(--cart-brand) !important; color: var(--cart-on-brand) !important; -webkit-text-fill-color: var(--cart-on-brand) !important;
    font-size: 16px; font-weight: 800;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-browse { margin-top: 18px !important; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful { padding-top: 22px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful[hidden] { display: none; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful__head {
    font-family: var(--cart-mono) !important; font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--cart-mute) !important; margin-bottom: 10px;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful__pick button {
    display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 14px;
    border-radius: 14px !important; border: 1.5px solid var(--cart-line) !important;
    background: var(--cart-paper) !important; color: var(--cart-ink) !important; -webkit-text-fill-color: var(--cart-ink) !important;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful__pick button[aria-checked="true"] { border-color: var(--cart-ink) !important; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful__pick b { display: block; font-size: 14px; font-weight: 800; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful__pick small { display: block; font-size: 12px; line-height: 1.35; margin-top: 3px; color: var(--cart-body) !important; -webkit-text-fill-color: var(--cart-body) !important; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful__dot {
    flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--cart-line); position: relative;
}
#shopping-cart-modal#shopping-cart-modal.is-bag [aria-checked="true"] .bag-ful__dot { border-color: var(--cart-ink); }
#shopping-cart-modal#shopping-cart-modal.is-bag [aria-checked="true"] .bag-ful__dot::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cart-ink);
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-ful__note { font-size: 12.5px; color: var(--cart-body) !important; margin-top: 10px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-foot {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px;
    padding: 18px 20px calc(env(safe-area-inset-bottom, 0px) + 14px);
    border-top: 1px solid var(--cart-line); background: var(--cart-paper) !important;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-foot[hidden] { display: none; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-sum { display: flex; flex-direction: column; gap: 9px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-sum__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-sum__row b { font-family: inherit !important; font-weight: 600; font-variant-numeric: tabular-nums; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-sum__row.is-dim { color: var(--cart-body) !important; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-sum__row.is-total { padding-top: 12px; border-top: 1px solid var(--cart-line); font-size: 17px; font-weight: 700; margin-top: 3px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-sum__row.is-total b { font-size: 19px; font-weight: 750; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-fine {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-family: inherit !important; font-size: 11px; letter-spacing: 0; line-height: 1.35;
    text-align: center; color: var(--cart-body) !important;
}
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-fine span { display: inline-flex; align-items: center; gap: 7px; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-fine i { width: 14px; font-size: 10px; opacity: .7; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-go { width: 100%; margin-top: 2px !important; }
#shopping-cart-modal#shopping-cart-modal.is-bag .bag-go:disabled { opacity: .45; }

/* Guest shop home.
 *
 * The desktop Shop page (/<T>/shop, templates/shop.html) on a phone: a lead
 * picture with the product's name over it, a black FEATURED card, two more
 * picks, kind chips with counts, "The rack" as hook cards in two columns,
 * black ticket cards, and past events folded into one line. The owner's
 * colour carries the "+" buttons and the FEATURED tag.
 *
 * Its own `shop-home` namespace: the old catalog's selectors and their
 * layers of fixes never match it. Colours are written with the container id
 * and !important because the light theme forces black on everything under
 * an inline `position: fixed` ancestor
 * (`[data-theme="light"] [style*="position: fixed"] *`); only id-level
 * specificity gets past that. Neutrals are tokens named for their role, so
 * mobile-page-colors.js moves them to the owner's page colour; the black
 * cards are "hero" tokens and stay black.
 */
html body #moments-scroll-container .shop-home {
    --home-paper: #ffffff;
    --home-ink: #0e0e0e;
    --home-dim: #555555;
    --home-faint: #8a8a8a;
    --home-line: #ececec;
    --home-edge: #e0e0e0;
    --home-hero-card: #0e0e0e;
    --home-hero-ink: #ffffff;
    --home-hero-dim: #c9c9cf;
    --home-hero-edge: rgba(255, 255, 255, 0.28);
    --home-btn: var(--pc-btn, var(--primary-color, #0e0e0e));
    --home-on-btn: var(--pc-on-btn, #ffffff);
    --home-wide: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --home-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --home-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    min-height: 100%;
    padding: 0 0 24px;
    background: var(--home-paper) !important;
    color: var(--home-ink) !important;
    font-family: var(--home-sans) !important;
    -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] body #moments-scroll-container .shop-home {
    --home-paper: #0b0b0d;
    --home-ink: #f4f4f5;
    --home-dim: #b4b4b8;
    --home-faint: #8a8a90;
    --home-line: #232327;
    --home-edge: #34343a;
    --home-hero-card: #1c1c20;
}

html body #moments-scroll-container .shop-home,
html body #moments-scroll-container .shop-home * {
    box-sizing: border-box;
}
html body #moments-scroll-container .shop-home button {
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ------------------------------------------------------------- the lead */
html body #moments-scroll-container .shop-home-lead {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px 0;
}
html body #moments-scroll-container .shop-home-lead-art {
    grid-column: 1 / -1;
    position: relative;
    display: block;
    width: calc(100% + 12px);
    margin: 0 -6px;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 28px;
    overflow: hidden;
    background: #ffffff !important;
    box-shadow: none !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home-lead-art img,
html body #moments-scroll-container .shop-home-lead-art video,
html body #moments-scroll-container .shop-home-side-tile img,
html body #moments-scroll-container .shop-home-side-tile video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
html body #moments-scroll-container .shop-home-lead .shop-home-lead-name {
    display: none !important;
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 1;
    font-family: var(--home-wide) !important;
    font-stretch: 125% !important;
    font-weight: 900 !important;
    font-size: 58px;
    line-height: 0.86;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    text-align: left;
    mix-blend-mode: difference;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #moments-scroll-container .shop-home-lead-art img,
html body #moments-scroll-container .shop-home-lead-art video {
    object-fit: contain;
}
html body #moments-scroll-container .shop-home .shop-home-lead-art > img.shop-home-art-bg {
    display: none !important;
}
html body #moments-scroll-container .shop-home-feature {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 24px;
    background: var(--home-hero-card) !important;
}
html body #moments-scroll-container .shop-home .shop-home-feature-tag {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: 0.18em;
    /* The owner's colour lifted toward white: these sit on the black hero
       cards, where a black or navy button colour (NIL's) vanished even at
       brightness(1.35). */
    color: color-mix(in srgb, var(--home-btn) 55%, #ffffff) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--home-btn) 55%, #ffffff) !important;
}
html body #moments-scroll-container .shop-home .shop-home-feature-name {
    font-family: var(--home-wide) !important;
    font-stretch: 112% !important;
    font-weight: 900 !important;
    font-size: 24px;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-feature-about {
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home-feature-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}
html body #moments-scroll-container .shop-home .shop-home-feature-price {
    font-family: var(--home-wide) !important;
    font-weight: 900 !important;
    font-size: 28px;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-feature-go {
    flex: 1;
    height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: 25px;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 800 !important;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
html body #moments-scroll-container .shop-home-side-tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-side-pill {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 16px;
    background: #ffffff !important;
}
html body #moments-scroll-container .shop-home .shop-home-side-pill b,
html body #moments-scroll-container .shop-home .shop-home-side-pill em {
    font-size: 11.5px;
    font-weight: 800 !important;
    font-style: normal;
    white-space: nowrap;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
}
html body #moments-scroll-container .shop-home .shop-home-side-pill b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

/* ------------------------------------------------------------ the chips */
html body #moments-scroll-container .shop-home-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 16px 4px;
}
html body #moments-scroll-container .shop-home-chips {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
/* BAG, as in the desktop header: an outlined pill with the count. */
/* Find my tickets: a quiet line under the chips, for buyers coming back. */
html body #moments-scroll-container .shop-home .shop-home-findrow {
    display: flex;
    justify-content: flex-end;
    padding: 6px 16px 0;
}
html body #moments-scroll-container .shop-home .shop-home-findrow button.shop-home-find {
    appearance: none;
    -webkit-appearance: none;
    height: 32px;
    margin: 0;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    font: 600 14px/1 var(--home-sans) !important;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-bag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 2px solid var(--home-ink) !important;
    border-radius: 20px;
    background: var(--home-paper) !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-bag span {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--home-ink) !important;
    font-family: var(--home-mono) !important;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
}
html body #moments-scroll-container .shop-home .shop-home-bag span[hidden] { display: none; }
html body #moments-scroll-container .shop-home-chips::-webkit-scrollbar { display: none; }
html body #moments-scroll-container .shop-home .shop-home-chips button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--home-edge) !important;
    border-radius: 20px;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 800 !important;
    white-space: nowrap;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-chips button small {
    font-family: var(--home-mono) !important;
    font-size: 10.5px;
    font-weight: 500 !important;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}
html body #moments-scroll-container .shop-home .shop-home-chips button.is-active {
    border-color: var(--home-ink) !important;
    background: var(--home-ink) !important;
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
}
html body #moments-scroll-container .shop-home .shop-home-chips button.is-active small {
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
    opacity: 0.65;
}
html body #moments-scroll-container .shop-home .shop-home-chips .shop-home-filter-open span { display: none; }
html body #moments-scroll-container .shop-home .shop-home-chips .shop-home-filter-open {
    width: 40px;
    padding: 0 !important;
    justify-content: center;
    margin-left: auto;
    border-style: dashed !important;
    font-weight: 600 !important;
    font-size: 13px;
}
html body #moments-scroll-container .shop-home .shop-home-chips .shop-home-filter-open i {
    font-size: 12px;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

/* ------------------------------------------------------------- the rack */
html body #moments-scroll-container .shop-home-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 26px 16px 4px;
}
html body #moments-scroll-container .shop-home .shop-home-block-head h2 {
    margin: 0;
    font-family: var(--home-wide) !important;
    font-stretch: 125% !important;
    font-weight: 900 !important;
    font-size: 40px;
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-block-head span {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}
html body #moments-scroll-container .shop-home-rack {
    display: flex;
    gap: 14px;
    padding: 12px 16px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
html body #moments-scroll-container .shop-home-rack::-webkit-scrollbar { display: none; }
html body #moments-scroll-container .shop-home-rack .shop-home-card {
    flex: 0 0 64%;
    scroll-snap-align: start;
}
html body #moments-scroll-container .shop-home-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
html body #moments-scroll-container .shop-home-hook {
    align-self: center;
    width: 44px;
    height: 14px;
    margin-bottom: -8px;
    border: 3px solid var(--home-ink);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
}
html body #moments-scroll-container .shop-home-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform 160ms ease;
}
html body #moments-scroll-container .shop-home-art:active { transform: scale(0.985); }
html body #moments-scroll-container .shop-home-art img,
html body #moments-scroll-container .shop-home-art video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
html body #moments-scroll-container .shop-home-art .mobile-shop-hero-mark,
html body #moments-scroll-container .shop-home-lead-art .mobile-shop-hero-mark,
html body #moments-scroll-container .shop-home-side-tile .mobile-shop-hero-mark {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--home-mono) !important;
    font-size: 10px;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}
html body #moments-scroll-container .shop-home-art .mobile-shop-hero-mark img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}
html body #moments-scroll-container .shop-home .shop-home-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 8px;
    background: #0e0e0e !important;
    font-family: var(--home-mono) !important;
    font-size: 10px;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #moments-scroll-container .shop-home .shop-home-tag.is-out {
    background: #ffffff !important;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
}
html body #moments-scroll-container .shop-home-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
html body #moments-scroll-container .shop-home-words { min-width: 0; flex: 1; }
html body #moments-scroll-container .shop-home .shop-home-name {
    margin: 0;
    font-family: var(--home-wide) !important;
    font-stretch: 112% !important;
    font-weight: 900 !important;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-sub {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600 !important;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
}
html body #moments-scroll-container .shop-home-buy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}
html body #moments-scroll-container .shop-home .shop-home-price {
    font-family: var(--home-mono) !important;
    font-size: 14px;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-plus {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    font-size: 22px;
    font-weight: 500 !important;
    line-height: 38px;
    text-align: center;
    color: var(--home-on-btn) !important;
    -webkit-text-fill-color: var(--home-on-btn) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-plus:disabled { opacity: 0.35; cursor: default; }
html body #moments-scroll-container .shop-home .shop-home-plus.is-added { animation: shop-home-pop 0.45s ease; }
@keyframes shop-home-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
html body #moments-scroll-container .shop-home-card.is-sold-out .shop-home-art { filter: grayscale(1); opacity: 0.5; }

/* -------------------------------------------------------------- tickets */
html body #moments-scroll-container .shop-home-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 16px 0;
}
html body #moments-scroll-container .shop-home-ev {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 24px;
    background: var(--home-hero-card) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home-ev-top { display: flex; align-items: flex-start; justify-content: space-between; }
html body #moments-scroll-container .shop-home .shop-home-ev-when {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    /* The owner's colour lifted toward white: these sit on the black hero
       cards, where a black or navy button colour (NIL's) vanished even at
       brightness(1.35). */
    color: color-mix(in srgb, var(--home-btn) 55%, #ffffff) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--home-btn) 55%, #ffffff) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-day {
    font-family: var(--home-wide) !important;
    font-stretch: 125% !important;
    font-weight: 900 !important;
    font-size: 56px;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home-ev-from { text-align: right; }
html body #moments-scroll-container .shop-home .shop-home-ev-from small {
    display: block;
    font-family: var(--home-mono) !important;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-from b {
    font-family: var(--home-wide) !important;
    font-weight: 900 !important;
    font-size: 24px;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-name {
    font-family: var(--home-wide) !important;
    font-stretch: 112% !important;
    font-weight: 900 !important;
    font-size: 22px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-where {
    margin-top: -6px;
    font-size: 13px;
    font-weight: 600 !important;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home-ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html body #moments-scroll-container .shop-home .shop-home-ev-chips span {
    padding: 6px 10px;
    border-radius: 14px;
    border: 1px solid var(--home-hero-edge);
    font-size: 12px;
    font-weight: 700 !important;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-ev-go {
    height: 48px;
    border: 0;
    border-radius: 24px;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 800 !important;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-ev-go:disabled { opacity: 0.5; }

/* ---------------------------------------------------------- past events */
html body #moments-scroll-container .shop-home-past { padding: 26px 16px 0; }
html body #moments-scroll-container .shop-home .shop-home-past-toggle {
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--home-mono) !important;
    font-size: 12px;
    text-decoration: underline;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home-past-list { display: none; margin-top: 10px; border-top: 1px solid var(--home-line); }
html body #moments-scroll-container .shop-home-past.is-open .shop-home-past-list { display: block; }
html body #moments-scroll-container .shop-home-past-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 2px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--home-line);
}
html body #moments-scroll-container .shop-home .shop-home-past-row span,
html body #moments-scroll-container .shop-home .shop-home-past-row em {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    font-style: normal;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}
html body #moments-scroll-container .shop-home .shop-home-past-row em { grid-column: 2; }
html body #moments-scroll-container .shop-home .shop-home-past-row b {
    font-size: 14px;
    font-weight: 800 !important;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
}

html body #moments-scroll-container .shop-home .shop-home-empty {
    padding: 48px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
}

/* ------------------------------------------------------------- the bag */
/* Sticky above the nav, the way the desktop BAG sits in its header. WebKit
   measures sticky offsets inside the scroller's padding, so bottom: -2px. */
html body #moments-scroll-container .shop-home-cartbar {
    position: sticky;
    bottom: -2px;
    z-index: 4;
    margin: 28px 12px 0;
    padding: 14px 16px 16px;
    border-radius: 24px 24px 0 0;
    background: var(--home-hero-card) !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.16);
}
html body #moments-scroll-container .shop-home-cartbar.is-empty { display: none !important; }
html body #moments-scroll-container .shop-home-cartbar-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html body #moments-scroll-container .shop-home .shop-home-cartbar-line span {
    font-family: var(--home-mono) !important;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home .shop-home-cartbar-line strong {
    font-family: var(--home-wide) !important;
    font-size: 22px;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-cartbar-note {
    margin-top: 4px;
    font-family: var(--home-mono) !important;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--home-hero-dim) !important;
    -webkit-text-fill-color: var(--home-hero-dim) !important;
}
html body #moments-scroll-container .shop-home .shop-home-cartbar button {
    margin-top: 12px;
    width: 100%;
    height: 50px;
    padding: 0;
    border: 0;
    border-radius: 25px;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
    cursor: pointer;
}

/* The scroller behind the home: the home's own page colour, no snapping. */
html body #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    background: #ffffff !important;
    scroll-snap-type: none !important;
}
html[data-theme="dark"] body #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    background: #0b0b0d !important;
}

/* Stop the scroller above the nav, like every other shop surface does.
   The home used to run to the viewport floor and lean on a fixed white strip
   (body::after) plus a sticky cart bar that trusted the scroller's bottom
   padding. iOS Safari in browser mode pins html/body to 100vh, which is
   taller than what's on screen there, so the strip never showed and the
   cart bar's button slid under the nav pill. With the scroller ending at
   the strip line, nothing can scroll under the pill and the cart bar's
   sticky floor is above it on every engine. */
/* Both selectors: body.shop-active variants of the older feed rules tie the
   plain one on specificity and win on order, reserving 104px instead. */
html body #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home,
html body.shop-active #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    /* Top at 0 with the header as padding, like the owner's catalog: the
       header only translates when it tucks, so content scrolls up under it
       instead of leaving a blank band where the header was. */
    top: 0 !important;
    padding-top: var(--mobile-app-header-height, 74px) !important;
    scroll-padding-top: var(--mobile-app-header-height, 74px) !important;
    bottom: auto !important;
    height: calc(100dvh - var(--mobile-shop-bottom-nav-offset, calc(58px + env(safe-area-inset-bottom, 0px))) - 14px) !important;
    padding-bottom: 0 !important;
    scroll-padding-bottom: 0 !important;
}

html body.mobile-shop-nav-hidden #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home,
html body.shop-active.mobile-shop-nav-hidden #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    height: 100dvh !important;
}

html body #moments-scroll-container.is-shop-home .shop-home {
    padding-bottom: 24px;
}


/* Sort: the dashed chip opens a bottom sheet with the sort list. */
html body #moments-scroll-container .shop-home-filter-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483503;
    background: rgba(13, 15, 14, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

html body #moments-scroll-container .shop-home-filter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483504;
    margin: 0;
    padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    max-height: 80dvh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    background: var(--home-paper, #ffffff) !important;
    box-shadow: 0 -18px 48px rgba(13, 15, 14, 0.18);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 200ms;
}

html body #moments-scroll-container .shop-home.is-filter-open .shop-home-filter-layer {
    opacity: 1;
    pointer-events: auto;
}

html body #moments-scroll-container .shop-home.is-filter-open .shop-home-filter {
    transform: translateY(0);
    visibility: visible;
    transition: transform 200ms cubic-bezier(.2,.8,.2,1), visibility 0s;
}

html body #moments-scroll-container .shop-home-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

html body #moments-scroll-container .shop-home-filter-head strong {
    font-size: 19px;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

html body #moments-scroll-container .shop-home-filter-head button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--home-edge);
    border-radius: 999px;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
    cursor: pointer;
}

html body #moments-scroll-container .shop-home-filter-section + .shop-home-filter-section {
    margin-top: 22px;
}

html body #moments-scroll-container .shop-home-filter-section > span {
    display: block;
    margin-bottom: 10px;
    font-family: var(--home-mono) !important;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: var(--home-faint) !important;
    -webkit-text-fill-color: var(--home-faint) !important;
}

html body #moments-scroll-container .shop-home-filter-sort {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--home-line);
}

html body #moments-scroll-container .shop-home-filter-sort button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 2px;
    border: 0;
    border-bottom: 1px solid var(--home-line);
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px;
    text-align: left;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
    cursor: pointer;
}

html body #moments-scroll-container .shop-home-filter-sort button.is-active {
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

html body #moments-scroll-container .shop-home-filter-sort button i {
    font-size: 12px;
    color: var(--home-ink) !important;
    -webkit-text-fill-color: var(--home-ink) !important;
}

/* The sheet lives inside #shop-main-area, a stacking context far below the
   nav pill, so no z-index gets it above the pill; hide the pill while the
   sheet is open, as the owner's catalog does. */
html body:has(.shop-home.is-filter-open) #bottom-nav {
    opacity: 0 !important;
    transform: translateY(calc(120% + env(safe-area-inset-bottom, 0px))) scale(0.96) !important;
    pointer-events: none !important;
}

/* The white strip that hides content under the pill (body::after, z 240019)
   also paints over the bottom of the sheet; drop it while the sheet is up. */
html body:has(.shop-home.is-filter-open)::after {
    display: none !important;
}

/* The bottom nav on the shop tab. mobile.html's scroll-hide fix pins it with
   translateX(-50%) (a left: 50% layout), while the nav is laid out at
   left/right 14px, so the pill sat half off the left edge. Id-doubled so it
   outranks that block; the filter sheet's rule above still hides it. */
html body.shop-active #bottom-nav#bottom-nav,
html body.shop-active.mobile-shop-filter-hidden #bottom-nav#bottom-nav,
html body.shop-active.mobile-shop-nav-hidden #bottom-nav#bottom-nav {
    transform: none !important;
}
html body.shop-active:has(.shop-home.is-filter-open) #bottom-nav#bottom-nav {
    transform: translateY(calc(120% + env(safe-area-inset-bottom, 0px))) scale(0.96) !important;
}

/* The owner's "Shop page | Dashboard" switch, as in the desktop header:
   a two-pill segmented control, and + Add product beside it on the page. */
html body #moments-scroll-container .shop-home .shop-owner-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 2px;
}
html body #moments-scroll-container .shop-home .shop-owner-seg {
    display: flex;
    padding: 3px;
    border-radius: 22px;
    border: 1.5px solid var(--home-edge);
    background: var(--home-paper) !important;
}
html body #moments-scroll-container .shop-home .shop-owner-seg button {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 18px;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 800 !important;
    white-space: nowrap;
    color: var(--home-dim) !important;
    -webkit-text-fill-color: var(--home-dim) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-owner-seg button[aria-selected="true"] {
    background: var(--home-ink) !important;
    color: var(--home-paper) !important;
    -webkit-text-fill-color: var(--home-paper) !important;
}
html body #moments-scroll-container .shop-home .shop-owner-add {
    margin-left: auto;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 20px;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 800 !important;
    white-space: nowrap;
    color: var(--home-on-btn) !important;
    -webkit-text-fill-color: var(--home-on-btn) !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home.is-owner-dash { padding-bottom: 0; }
html body #moments-scroll-container .shop-home.is-owner-dash .odx { padding-top: 4px !important; }

/* #shop-main-area only frames the fixed storefront scroller, but the theme's
   blanket [id*="-main-area"] { overflow-y: auto !important } made it a second
   scroller (267px of slack at 390x844). A swipe past the end of the feed
   chained into it and slid the header off with a blank band under the rack. */
html body #shop-main-area#shop-main-area,
html body.shop-active #shop-main-area#shop-main-area {
    overflow: hidden !important;
}
html body #shop-main-area #moments-scroll-container.mobile-shop-storefront,
html body #shop-main-area #moments-scroll-container.mobile-shop-catalog-feed {
    overscroll-behavior-y: contain;
}

/* Glass: the active "Shop page" segment came out as a white pill with white
   text (the glass sweep whitens the label, --home-ink goes white). Dark ink
   on the white pill, and a shadow under the lead name so it reads over a
   light product photo. */
html[data-appearance="glass"] body #moments-scroll-container#moments-scroll-container .shop-home .shop-owner-seg button[aria-selected="true"] {
    background: #ffffff !important;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
}
html[data-appearance="glass"] body #moments-scroll-container#moments-scroll-container .shop-home .shop-home-lead-name {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important;
}

/* Small shops ------------------------------------------------------------ */
/* A picture taller than its frame: whole and centred over a blurred,
   mirrored copy of itself (see fitShopHomeMedia in mobile-app-core.js). */
html body #moments-scroll-container .shop-home .is-tall > img.shop-home-art-bg {
    position: absolute !important;
    inset: -8% !important;
    width: 116% !important;
    height: 116% !important;
    object-fit: cover !important;
    filter: blur(22px) saturate(1.15) brightness(0.82) !important;
    transform: scaleX(-1) !important;
    pointer-events: none;
}
html body #moments-scroll-container .shop-home .is-tall > img.shop-home-art-media {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
html body #moments-scroll-container .shop-home .shop-home-lead .shop-home-lead-name,
html body #moments-scroll-container .shop-home .shop-home-art .shop-home-tag { z-index: 2; }

/* Three to five products: the two to four cards left after the lead sit in
   two columns, all on screen (no half card cut off at the edge), and an odd
   last card is centred rather than left alone at one side. */
html body #moments-scroll-container .shop-home-rack.is-few {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
    overflow: visible;
    scroll-snap-type: none;
}
html body #moments-scroll-container .shop-home-rack.is-few > .shop-home-card { flex: none; min-width: 0; }
html body #moments-scroll-container .shop-home-rack.is-few > .shop-home-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 6px);
}

/* Exactly two products: a matched pair of feature cards, no rack. */
html body #moments-scroll-container .shop-home .shop-home-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px 0;
}
html body #moments-scroll-container .shop-home .shop-home-pair-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--home-hero-card) !important;
}
html body #moments-scroll-container .shop-home .shop-home-pair-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--home-btn) !important;
    box-shadow: none !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-pair-art > img.shop-home-art-media,
html body #moments-scroll-container .shop-home .shop-home-pair-art > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
html body #moments-scroll-container .shop-home .shop-home-pair-card.is-sold-out .shop-home-pair-art { filter: grayscale(1); opacity: 0.5; }
html body #moments-scroll-container .shop-home .shop-home-pair-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 14px;
}
html body #moments-scroll-container .shop-home .shop-home-pair-name {
    font-family: var(--home-wide) !important;
    font-weight: 900 !important;
    font-size: 15px;
    line-height: 1.1;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-pair-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
html body #moments-scroll-container .shop-home .shop-home-pair-price {
    font-family: var(--home-wide) !important;
    font-weight: 900 !important;
    font-size: 20px;
    color: var(--home-hero-ink) !important;
    -webkit-text-fill-color: var(--home-hero-ink) !important;
}
html body #moments-scroll-container .shop-home .shop-home-pair-go {
    height: 40px;
    border: 0;
    border-radius: 20px;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 800 !important;
    color: #0e0e0e !important;
    -webkit-text-fill-color: #0e0e0e !important;
    cursor: pointer;
}
html body #moments-scroll-container .shop-home .shop-home-pair-go:disabled { opacity: 0.5; }

/* Two products on a phone: stacked full-width cards, one on top of the
   other -- the picture wide, then name and price beside Shop it. */
html body #moments-scroll-container .shop-home .shop-home-pair {
    grid-template-columns: 1fr;
    gap: 14px;
}
html body #moments-scroll-container .shop-home .shop-home-pair-art { aspect-ratio: 16 / 10; }
html body #moments-scroll-container .shop-home .shop-home-pair-body { padding: 14px 16px 16px; }
html body #moments-scroll-container .shop-home .shop-home-pair-name { font-size: 18px; -webkit-line-clamp: 2; }
html body #moments-scroll-container .shop-home .shop-home-pair-foot {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
}
html body #moments-scroll-container .shop-home .shop-home-pair-price { font-size: 22px; }
html body #moments-scroll-container .shop-home .shop-home-pair-go { flex: 0 0 auto; min-width: 128px; height: 44px; padding: 0 22px; border-radius: 22px; }

/* Keep merchandise neutral and the purchase action aligned below its name. */
html body #moments-scroll-container .shop-home .shop-home-art,
html body #moments-scroll-container .shop-home .shop-home-side-tile,
html body #moments-scroll-container .shop-home .shop-home-pair-art {
    background: #f5f5f5 !important;
}
html body #moments-scroll-container .shop-home .shop-home-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    line-height: 1;
    background: #0e0e0e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
html body #moments-scroll-container .shop-home .shop-home-plus:disabled { display: none !important; }
html body #moments-scroll-container .shop-home .shop-home-row { flex-direction: column; align-items: stretch; gap: 8px; }
html body #moments-scroll-container .shop-home .shop-home-buy { justify-content: space-between; width: 100%; }
html body #moments-scroll-container .shop-home .shop-home-bar { margin-top: 0; padding-top: 12px; }
html body #moments-scroll-container .shop-home .shop-home-bag[hidden],
html body #moments-scroll-container .shop-home .shop-home-filter-open[hidden] { display: none !important; }
html body #moments-scroll-container .shop-home .shop-home-bar[hidden] { display: none !important; }
html body #moments-scroll-container .shop-home-lead { padding-top: 4px; }
html body #moments-scroll-container .shop-home .shop-home-pair { padding-top: 4px; }

/* Keep the price with its product, including unavailable items. */
html body #moments-scroll-container .shop-home .shop-home-row { gap: 5px; }
html body #moments-scroll-container .shop-home .shop-home-buy { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 2px; min-height: 32px; }
html body #moments-scroll-container .shop-home .shop-home-price { margin: 0; font-family: Inter, Arial, sans-serif !important; font-size: 15px; }

/* Trim the empty image margins so the first product sits near the header. */
html body #moments-scroll-container .shop-home .shop-home-lead { padding-top: 0 !important; }
html body #moments-scroll-container .shop-home .shop-home-lead-art { aspect-ratio: 1.22; }
html body #moments-scroll-container .shop-home .shop-home-lead-art > img.shop-home-art-media,
html body #moments-scroll-container .shop-home .shop-home-lead-art > video.shop-home-art-media {
    height: 122%; top: -11%; bottom: auto; object-fit: contain;
}

/* Large catalogs keep a two-column rack instead of a horizontal carousel. */
html body #moments-scroll-container .shop-home .shop-home-rack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; gap: 24px 12px; }
html body #moments-scroll-container .shop-home .shop-home-rack > .shop-home-card { min-width: 0; width: auto; }
html body #moments-scroll-container .shop-home .shop-home-block-head { align-items: center; }
html body #moments-scroll-container .shop-home .shop-home-block-head h2 { font-size: 32px; }
html body #moments-scroll-container .shop-home .shop-home-rack-filter { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dadce0; border-radius: 20px; padding: 9px 12px; background: #fff !important; color: #202124 !important; -webkit-text-fill-color: #202124 !important; font: 600 12px Inter, Arial, sans-serif !important; white-space: nowrap; }
.mobile-shop-collections { padding: 22px 16px 28px; width: 100%; color: var(--text-primary, #111); }
.mobile-shop-collections h2 { margin: 0 0 16px; font-size: 25px; line-height: 1.15; letter-spacing: -.03em; }
.mobile-shop-collections__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mobile-shop-collection { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(128,128,128,.25); border-radius: 15px; background: var(--background-color, #fff); color: inherit; text-decoration: none; }
.mobile-shop-collection img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #eee; }
.mobile-shop-collection strong, .mobile-shop-collection span, .mobile-shop-collection b { margin: 0 10px; }
.mobile-shop-collection strong { padding-top: 10px; font-size: 15px; line-height: 1.2; }
.mobile-shop-collection span { padding-top: 5px; font-size: 12px; opacity: .7; }
.mobile-shop-collection b { margin-top: auto; padding: 12px 0; font-size: 12px; }

/* Let the Shop feed and owner lists use the full viewport while scrolling. */
html body #bottom-nav#bottom-nav {
    transition: opacity .18s ease-out, transform .18s ease-out !important;
}

html body.shop-active.shop-scroll-nav-hidden #bottom-nav#bottom-nav {
    opacity: 0 !important;
    transform: translateY(calc(120% + env(safe-area-inset-bottom, 0px))) scale(.96) !important;
    pointer-events: none !important;
}

/* The shop draws a separate fixed backdrop under its glass nav. Hide that
   backdrop with the nav and let the home feed use the freed screen space. */
html body.shop-scroll-nav-hidden:has(#bottom-nav .shop-nav-label)::after {
    display: none !important;
}

html body.shop-scroll-nav-hidden #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    height: 100dvh !important;
}

/* This scroll state hides the same nav as mobile-shop-nav-hidden, but the
   storefront and owner lists also need their nav clearance removed. */
html body.shop-active.shop-scroll-nav-hidden {
    --mobile-shop-bottom-nav-offset: 0px;
    --mobile-bottom-nav-height: 0px;
}

html body.shop-active.shop-scroll-nav-hidden #moments-scroll-container.mobile-shop-catalog-feed.is-shop-home {
    height: 100dvh !important;
}

@media (prefers-reduced-motion: reduce) {
    html body #bottom-nav#bottom-nav {
        transition-duration: .01ms !important;
    }
}

/* Shop checkout.
 *
 * Full-screen editorial sheet, modeled on the "Checkout" design canvas and
 * matching the shop home, ticket sheet and cart: a slim sticky bar, a step
 * eyebrow over a big "Checkout" title, a collapsible order summary with the
 * hairline ledger, underline contact fields, the Stripe payment element
 * under a PAYMENT METHOD rule (Stripe draws its own method tabs and card
 * fields; those are left to Stripe), fine print, and a sticky dock with the
 * total and a square PAY button.
 *
 * The id is `shop-checkout`, not `mobile-…-modal`, so neither the light
 * theme's `[id*="modal"] *` repaint nor mobile-button-safety.css's white
 * button repaint matches it. Colors still carry the id and !important
 * against the `[data-theme="light"] *` rules.
 */
html body #shop-checkout {
    --co-ink: #0d0f0e;
    --co-body: #6f6f69;
    --co-mute: #9a9a93;
    --co-label: #8b8b85;
    --co-hair: #e6e6e2;
    --co-rule: #dcdcd6;
    --co-paper: #ffffff;
    --co-placeholder: #b6b6ae;
    --co-danger: #c4444c;
    --co-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    background: var(--co-paper) !important;
    color: var(--co-ink) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

html body #shop-checkout,
html body #shop-checkout * {
    box-sizing: border-box;
}

html body #shop-checkout .co-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 28px;
}

/* Sticky bar */
html body #shop-checkout .co-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
    background: rgba(255, 255, 255, 0.93) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--co-hair);
}

html body #shop-checkout .co-bar span {
    font-family: var(--co-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--co-label) !important;
    -webkit-text-fill-color: var(--co-label) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body #shop-checkout .co-bar button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px;
    line-height: 1;
    color: var(--co-label) !important;
    -webkit-text-fill-color: var(--co-label) !important;
    cursor: pointer;
}

/* Intro */
html body #shop-checkout .co-intro {
    padding: 32px 20px 0;
}

html body #shop-checkout .co-eyebrow {
    font-family: var(--co-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--co-label) !important;
    -webkit-text-fill-color: var(--co-label) !important;
}

html body #shop-checkout .co-intro h2 {
    margin: 14px 0 0;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}

/* Section heads */
html body #shop-checkout .co-section {
    padding: 0 20px;
}

html body #shop-checkout .co-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 12px;
    font-family: var(--co-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}

html body #shop-checkout .co-head.is-ruled {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--co-ink);
}

html body #shop-checkout .co-head button {
    padding: 16px 0;
    margin: -16px 0;
    min-height: 44px;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--co-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--co-label) !important;
    -webkit-text-fill-color: var(--co-label) !important;
    cursor: pointer;
}

/* Order summary */
html body #shop-checkout .co-lines[hidden] {
    display: none;
}

html body #shop-checkout .co-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-top: 1px solid var(--co-hair);
    padding: 13px 0;
}

html body #shop-checkout .co-line-name {
    font-size: 14.5px;
    letter-spacing: -0.01em;
    color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}

html body #shop-checkout .co-line-meta {
    margin-top: 5px;
    font-family: var(--co-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
}

html body #shop-checkout .co-line-total {
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}

html body #shop-checkout .co-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--co-hair);
    padding: 13px 0;
}

html body #shop-checkout .co-row > span:first-child {
    font-size: 14px;
    color: var(--co-body) !important;
    -webkit-text-fill-color: var(--co-body) !important;
}

html body #shop-checkout .co-row > span:last-child {
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}

html body #shop-checkout .co-row small,
html body #shop-checkout .co-row > span.co-note {
    font-family: var(--co-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
}

html body #shop-checkout .co-row > span.co-note {
    font-size: 11px;
    letter-spacing: 0.12em;
}

html body #shop-checkout .co-row.is-total {
    border-top: 1px solid var(--co-ink);
    padding: 16px 0 0;
}

html body #shop-checkout .co-row.is-total > span:first-child {
    font-size: 15px;
    font-weight: 600;
    color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}

html body #shop-checkout .co-row.is-total > span:last-child {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* Fields: underline inputs with mono labels */
html body #shop-checkout .co-fields {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

html body #shop-checkout .co-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

html body #shop-checkout .co-grid.is-2-1 {
    grid-template-columns: 2fr 1fr;
}

html body #shop-checkout .co-field label {
    display: block;
    font-family: var(--co-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
}

html body #shop-checkout .co-field input {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 13px 0 14px;
    border: 0 !important;
    border-bottom: 1px solid var(--co-rule) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
    caret-color: var(--co-ink);
    -webkit-appearance: none;
    appearance: none;
}

html body #shop-checkout .co-field input::placeholder {
    color: var(--co-placeholder) !important;
    -webkit-text-fill-color: var(--co-placeholder) !important;
    opacity: 1;
}

html body #shop-checkout .co-field input:focus {
    border-bottom-color: var(--co-ink) !important;
}

/* Stripe mounts: wallet buttons above a mono divider, then the card element */
html body #shop-checkout .co-stripe {
    margin-top: 20px;
}

html body #shop-checkout .co-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    font-family: var(--co-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
}

html body #shop-checkout .co-divider::before,
html body #shop-checkout .co-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--co-hair);
}

html body #shop-checkout .co-unavailable {
    padding: 24px 0;
    font-family: var(--co-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
}

/* Fine print */
html body #shop-checkout .co-fine {
    margin-top: 40px;
    padding: 22px 20px 0;
    border-top: 1px solid var(--co-hair);
    font-family: var(--co-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
}

/* Dock */
html body #shop-checkout .co-dock {
    flex: 0 0 auto;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--co-rule);
}

html body #shop-checkout .co-dock-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

html body #shop-checkout .co-dock-line span {
    font-family: var(--co-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--co-label) !important;
    -webkit-text-fill-color: var(--co-label) !important;
}

html body #shop-checkout .co-dock-line strong {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}

html body #shop-checkout .co-dock-breakdown {
    margin-top: 6px;
    font-family: var(--co-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
}

/* The status line the payment script writes into: it sets display, a pink
   background and red text inline; keep it readable and in the system. */
html body #shop-checkout #payment-status {
    margin-top: 12px;
    padding: 0 !important;
    background: transparent !important;
    font-family: var(--co-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--co-danger) !important;
    -webkit-text-fill-color: var(--co-danger) !important;
}

html body #shop-checkout #pay-button {
    position: static;
    margin-top: 16px;
    width: 100%;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--co-ink) !important;
    box-shadow: none !important;
    font-family: var(--co-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--co-paper) !important;
    -webkit-text-fill-color: var(--co-paper) !important;
    cursor: pointer;
    transition: background 140ms ease;
}

html body #shop-checkout #pay-button:disabled {
    background: var(--co-rule) !important;
    color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
    cursor: default;
}

/* Post-payment confirmation, rendered by the payment script into
   #payment-instructions; give it the sheet's padding. */
html body #shop-checkout #payment-instructions {
    padding: 24px 20px;
}

/* While the ledger's "Total due" row is on screen the dock would repeat the
   same number an inch below it; collapse the dock to just the button until
   the ledger scrolls away (toggled by an IntersectionObserver). */
html body #shop-checkout .co-dock.is-ledger-visible .co-dock-line,
html body #shop-checkout .co-dock.is-ledger-visible .co-dock-breakdown {
    display: none;
}

html body #shop-checkout .co-dock.is-ledger-visible button {
    margin-top: 0;
}

/* ---- pickup or delivery (menu items) ------------------------------------ */
html body #shop-checkout .co-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body #shop-checkout .co-choice-btn {
    display: grid; gap: 4px; text-align: left; padding: 14px 14px 13px; min-height: 64px;
    border: 1px solid var(--co-rule) !important; border-radius: 14px; cursor: pointer;
    background: transparent !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body #shop-checkout .co-choice-btn strong { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; color: var(--co-ink) !important; -webkit-text-fill-color: var(--co-ink) !important; }
html body #shop-checkout .co-choice-btn small { font-family: var(--co-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--co-mute) !important; -webkit-text-fill-color: var(--co-mute) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #shop-checkout .co-choice-btn.is-on { border-color: var(--co-ink) !important; box-shadow: inset 0 0 0 1px var(--co-ink) !important; }
html body #shop-checkout .co-delivery { margin-top: 18px; }
html body #shop-checkout .co-delivery[hidden] { display: none !important; }
html body #shop-checkout .co-address-field { position: relative; }
html body #shop-checkout .co-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; display: grid; background: #fff !important; border: 1px solid var(--co-rule); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
html body #shop-checkout .co-suggest[hidden] { display: none !important; }
html body #shop-checkout .co-suggest button { display: block; width: 100%; padding: 12px 14px; border: 0; background: #fff !important; box-shadow: none !important; text-align: left; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.35; color: var(--co-ink) !important; -webkit-text-fill-color: var(--co-ink) !important; }
html body #shop-checkout .co-suggest button + button { border-top: 1px solid var(--co-rule); }
html body #shop-checkout .co-locate {
    display: block; width: 100%; min-height: 46px; padding: 13px 0 14px; border: 0 !important; border-bottom: 1px solid var(--co-rule) !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; cursor: pointer; text-align: left;
    font-family: var(--co-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--co-ink) !important; -webkit-text-fill-color: var(--co-ink) !important;
}
html body #shop-checkout .co-note-line { margin-top: 12px; font-family: var(--co-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--co-ink) !important; -webkit-text-fill-color: var(--co-ink) !important; }
html body #shop-checkout .co-note-line[hidden] { display: none !important; }

/* ------------------------------------------------- the desktop Shop face
   Checkout carries the /<T>/shop page's shapes: the display face on the
   title and the total due, a pill pay button, and a dark twin of every
   token. Stripe's own fields keep their appearance (set in JS). */
html body #shop-checkout {
    --co-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
}
html[data-theme="dark"] body #shop-checkout {
    --co-ink: #f4f4f5;
    --co-body: #b4b4b8;
    --co-mute: #8a8a90;
    --co-label: #8a8a90;
    --co-hair: #232327;
    --co-rule: #34343a;
    --co-paper: #0b0b0d;
    --co-placeholder: #6b6b72;
}
html body #shop-checkout .co-intro h2 {
    font-family: var(--co-display) !important;
    font-stretch: 118% !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}
html body #shop-checkout .co-row.is-total > span:last-child {
    font-family: var(--co-display) !important;
    font-weight: 900 !important;
}
html body #shop-checkout #pay-button {
    height: 54px;
    border-radius: 27px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
}
html[data-theme="dark"] body #shop-checkout .co-bar,
html[data-theme="dark"] body #shop-checkout .co-dock {
    background: rgba(11, 11, 13, 0.94) !important;
}
html[data-theme="dark"] body #shop-checkout .co-bar button {
    background: transparent !important;
    color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}

/* The light theme's text-input rule carries eight :not(#id) exemptions, so it
   outranked the checkout's underline for type="text" fields only: First and
   Last name came out as white boxes beside the underlined Email and Mobile.
   Same :not() chain plus the sheet id, so the underline wins. */
html body #shop-checkout .co-field input[type="text"]:not(#dm-recipient):not(#byte-upload-ticker):not(#mobile-ai-prompt):not(#mobile-agent-input):not(#modal-route-from-input):not(#modal-route-to-input):not(#community-quick-compose-input):not(#mobile-bloc-name-input) {
    border: 0 !important;
    border-bottom: 1px solid var(--co-rule) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 13px 0 14px !important;
}

/* A restrained checkout surface: clear steps, a readable receipt, and one pay action. */
html body #shop-checkout {
    --co-ink: #17191d;
    --co-body: #505560;
    --co-mute: #727782;
    --co-label: #727782;
    --co-hair: #eceef1;
    --co-rule: #d9dde3;
    --co-paper: #ffffff;
    --co-placeholder: #9ca2ac;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
html[data-theme="dark"] body #shop-checkout {
    --co-ink: #f4f5f7;
    --co-body: #c0c3ca;
    --co-mute: #a0a5af;
    --co-label: #a0a5af;
    --co-hair: #292d34;
    --co-rule: #3b4049;
    --co-paper: #111318;
    --co-placeholder: #858b96;
}
html body #shop-checkout .co-scroll { padding-bottom: 42px; }
html body #shop-checkout .co-bar {
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 24px 12px;
    background: color-mix(in srgb, var(--co-paper) 92%, transparent) !important;
    border-bottom-color: var(--co-hair);
}
html body #shop-checkout .co-bar span {
    font: 600 14px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0; color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}
html body #shop-checkout .co-bar button {
    width: 36px; height: 36px; border: 1px solid var(--co-hair) !important;
    border-radius: 50%; font-size: 17px; color: var(--co-ink) !important;
    -webkit-text-fill-color: var(--co-ink) !important;
}
html body #shop-checkout .co-intro { padding: 30px 24px 0; }
html body #shop-checkout .co-eyebrow {
    font: 700 11px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .11em; color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
}
html body #shop-checkout .co-intro h2 {
    margin-top: 8px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
    font-size: clamp(32px, 8vw, 44px); font-weight: 700 !important;
    letter-spacing: -.045em; text-transform: none;
}
html body #shop-checkout .co-intro p {
    margin: 10px 0 0; font-size: 14px; line-height: 1.45;
    color: var(--co-body) !important; -webkit-text-fill-color: var(--co-body) !important;
}
html body #shop-checkout .co-section { padding: 0 24px; }
html body #shop-checkout .co-section--summary { margin-top: 32px; }
html body #shop-checkout .co-section--form { margin-top: 38px; }
html body #shop-checkout .co-head {
    align-items: center; padding-bottom: 12px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 18px; font-weight: 700; letter-spacing: -.02em;
}
html body #shop-checkout .co-head.is-ruled { border-bottom-color: var(--co-hair); padding-bottom: 14px; }
html body #shop-checkout .co-head span { display: inline-flex; align-items: baseline; gap: 10px; }
html body #shop-checkout .co-head small {
    font-size: 12px; font-weight: 500; letter-spacing: 0;
    color: var(--co-mute) !important; -webkit-text-fill-color: var(--co-mute) !important;
}
html body #shop-checkout .co-head em {
    font: 700 11px var(--co-mono); font-style: normal; letter-spacing: 0;
    color: var(--co-mute) !important; -webkit-text-fill-color: var(--co-mute) !important;
}
html body #shop-checkout .co-head button {
    font: 600 13px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0; color: var(--co-body) !important;
    -webkit-text-fill-color: var(--co-body) !important;
}
html body #shop-checkout .co-line { align-items: flex-start; padding: 14px 0; }
html body #shop-checkout .co-line-name,
html body #shop-checkout .co-line-total { font-size: 14px; font-weight: 600; line-height: 1.35; }
html body #shop-checkout .co-line-meta {
    font: 12px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0; color: var(--co-mute) !important;
    -webkit-text-fill-color: var(--co-mute) !important;
}
html body #shop-checkout .co-row { padding: 10px 0; border-top: 0; }
html body #shop-checkout .co-row > span:first-child,
html body #shop-checkout .co-row > span:last-child { font-size: 13px; }
html body #shop-checkout .co-row.is-total {
    margin-top: 10px; border-top: 1px solid var(--co-rule); padding-top: 17px;
}
html body #shop-checkout .co-row.is-total > span:first-child { font-size: 15px; }
html body #shop-checkout .co-row.is-total > span:last-child {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 20px; font-weight: 700 !important;
}
html body #shop-checkout .co-fields { margin-top: 16px; gap: 15px; }
html body #shop-checkout .co-field label {
    font: 600 12px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0; color: var(--co-body) !important;
    -webkit-text-fill-color: var(--co-body) !important;
}
html body #shop-checkout .co-field input {
    min-height: 52px; margin-top: 7px; padding: 0 14px !important;
    border: 1px solid var(--co-rule) !important; border-radius: 12px !important;
    background: var(--co-paper) !important; font-size: 16px;
}
html body #shop-checkout .co-field input:focus { border-color: var(--co-ink) !important; outline: 2px solid transparent; }
html body #shop-checkout .co-field input[type="text"]:not(#dm-recipient):not(#byte-upload-ticker):not(#mobile-ai-prompt):not(#mobile-agent-input):not(#modal-route-from-input):not(#modal-route-to-input):not(#community-quick-compose-input):not(#mobile-bloc-name-input) {
    border: 1px solid var(--co-rule) !important; border-radius: 12px !important;
    background: var(--co-paper) !important; padding: 0 14px !important;
}
html body #shop-checkout .co-stripe { margin-top: 18px; }
html body #shop-checkout .co-fine {
    margin: 30px 24px 0; padding: 16px 0 0;
    font: 12px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0;
}
html body #shop-checkout .co-dock {
    padding: 14px 24px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top-color: var(--co-hair);
    background: color-mix(in srgb, var(--co-paper) 95%, transparent) !important;
}
html body #shop-checkout .co-dock-line span,
html body #shop-checkout .co-dock-breakdown {
    font: 12px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0; color: var(--co-body) !important;
    -webkit-text-fill-color: var(--co-body) !important;
}
html body #shop-checkout .co-dock-line strong { font-size: 19px; font-weight: 700; }
html body #shop-checkout .co-dock-breakdown { margin-top: 2px; }
html body #shop-checkout #pay-button {
    height: 56px; margin-top: 14px; border-radius: 14px;
    font: 700 16px -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0; text-transform: none;
}

/* Shared checkout finish. Payment widgets retain their own Stripe styling. */
html body #desktopStripeCheckoutModal {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  color: #17191d !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-bar {
  padding: 16px max(28px, calc((100vw - 1120px) / 2)) !important;
  border-bottom: 1px solid #e8eaee !important;
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(18px);
}
html body #desktopStripeCheckoutModal .pc-checkout-bar button {
  font-size: 14px !important; font-weight: 600 !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-bar > div > div:last-child {
  color: #17191d !important; font-size: 18px !important; letter-spacing: -.02em !important;
  text-transform: none !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-content {
  padding: 52px 28px 80px !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-grid {
  max-width: 1120px !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: clamp(40px, 7vw, 96px) !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-heading,
html body #desktopStripeCheckoutModal .pc-checkout-fields,
html body #desktopStripeCheckoutModal .pc-checkout-item,
html body #desktopStripeCheckoutModal .pc-checkout-totals {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; background: transparent !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-heading {
  margin: 0 0 30px !important; padding: 0 0 18px !important;
  border-bottom: 1px solid #e8eaee !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-heading > div > div:first-child {
  font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.035em !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-heading > div > div:last-child {
  font-size: 13px !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-fields { max-width: 640px; }
html body #desktopStripeCheckoutModal .pc-checkout-fields input {
  min-height: 52px; border-radius: 12px !important; border-color: #d9dde3 !important;
  box-shadow: none !important; font-size: 15px !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-fields input:focus {
  outline: 2px solid #17191d; outline-offset: 1px;
}
html body #desktopStripeCheckoutModal .pc-checkout-summary { top: 110px !important; gap: 22px !important; }
html body #desktopStripeCheckoutModal .pc-checkout-item {
  padding-bottom: 22px !important; border-bottom: 1px solid #e8eaee !important;
}
html body #desktopStripeCheckoutModal .pc-checkout-item img { object-fit: contain !important; }
html body #desktopStripeCheckoutModal .pc-checkout-totals {
  display: grid; gap: 2px;
}
html body #desktopStripeCheckoutModal #desktop-stripe-pay-button {
  min-height: 56px; margin-top: 0 !important; border-radius: 14px !important;
  font-size: 16px !important; box-shadow: none !important;
}
@media (max-width: 800px) {
  html body #desktopStripeCheckoutModal .pc-checkout-content { padding: 28px 20px 60px !important; }
  html body #desktopStripeCheckoutModal .pc-checkout-grid { display: flex !important; flex-direction: column; gap: 32px !important; }
  html body #desktopStripeCheckoutModal .pc-checkout-summary { position: static !important; width: 100%; }
  html body #desktopStripeCheckoutModal .pc-checkout-bar { padding: 14px 20px !important; }
}

/* App purchase and Bucks checkout follow the same calm receipt and field language. */
html body #branded-app-checkout-modal,
html body #mobile-market-bucks-checkout-modal {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
html body #branded-app-checkout-modal > div > div:last-child {
  max-width: 620px; margin: 0 auto; padding: 26px 24px 48px !important;
}
html body #branded-app-checkout-modal .pc-app-checkout-bar {
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 24px 14px !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}
html body #branded-app-checkout-modal .pc-app-checkout-body {
  max-width: 620px; margin: 0 auto; padding: 28px 24px 48px !important;
}
html body #branded-app-checkout-modal .pc-app-checkout-summary {
  margin-bottom: 30px !important;
}
html body #branded-app-checkout-modal input {
  min-height: 52px; border-radius: 12px !important; box-shadow: none !important;
}
html body #branded-app-checkout-modal #app-pay-button,
html body #mobile-market-bucks-checkout-modal #mobile-market-bucks-pay-button {
  min-height: 56px; border-radius: 14px !important; box-shadow: none !important;
  letter-spacing: 0 !important; text-transform: none !important;
}
html body #mobile-market-bucks-checkout-modal .market-bucks-account-handoff {
  background: transparent; border-color: #e8eaee; box-shadow: none;
}
html body #mobile-market-bucks-checkout-modal .market-bucks-account-handoff__field input {
  border-color: #d9dde3; border-radius: 12px; box-shadow: none;
}

/* Booking uses the same open, unboxed layout on desktop. */
html body > #premium-booking-checkout {
  background: var(--background-color) !important;
}
html body > #premium-booking-checkout .premium-booking-checkout-inner {
  width: min(760px, calc(100vw - 48px)) !important;
}
html body > #premium-booking-checkout .premium-booking-sheet {
  padding: 24px 0 48px !important; border: 0 !important;
  border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important;
}
html body > #premium-booking-checkout .premium-booking-checkout-title {
  font-size: clamp(28px, 4vw, 38px) !important;
  font-weight: 700 !important; letter-spacing: -.04em !important;
}

/* Live call payment request: simple receipt, field, payment element, actions. */
html body #live-call-payment-card {
  border-radius: 22px !important; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.16) !important;
}
html body #live-call-payment-card #live-call-payment-email {
  border-radius: 12px !important; border-color: #d9dde3 !important;
  box-shadow: none !important;
}
html body #live-call-payment-card #live-call-payment-element {
  border-color: #d9dde3 !important; border-radius: 14px !important;
}
html body #live-call-payment-card #live-call-pay-submit {
  border-radius: 14px !important; box-shadow: none !important;
}

/* Order confirmed.
 *
 * The screen after payment, modeled on the "Order Confirmed" design canvas
 * and matching the rest of the shop: a slim sticky bar with the order id
 * and a green CONFIRMED, a paid-at eyebrow over "You're in.", one dark card
 * per ticket pass with its Apple Wallet button, the receipt ledger, a short
 * "before you go" list built from the event's own facts, fine print, and a
 * dock with "add all to wallet" and Done.
 *
 * Its id is `shop-order-confirmed` so none of the blanket "[id*=modal]"
 * repaints match; colors still carry the id and !important against the
 * `[data-theme="light"] *` rules.
 */
html body #shop-order-confirmed {
    --oc-ink: #0d0f0e;
    --oc-body: #6f6f69;
    --oc-mute: #9a9a93;
    --oc-label: #8b8b85;
    --oc-hair: #e6e6e2;
    --oc-rule: #dcdcd6;
    --oc-paper: #ffffff;
    --oc-card: #0d0f0e;
    --oc-card-mute: #8f948f;
    --oc-card-dim: #70756f;
    --oc-card-hair: #2a2e2b;
    --oc-accent: #3d7a56;
    --oc-accent: oklch(0.52 0.09 152);
    --oc-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    position: fixed;
    inset: 0;
    z-index: 200500;
    display: flex;
    flex-direction: column;
    background: var(--oc-paper) !important;
    color: var(--oc-ink) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

html body #shop-order-confirmed,
html body #shop-order-confirmed * {
    box-sizing: border-box;
}

html body #shop-order-confirmed .oc-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 28px;
}

/* Bar */
html body #shop-order-confirmed .oc-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 12px;
    background: rgba(255, 255, 255, 0.93) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--oc-hair);
    font-family: var(--oc-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
}

html body #shop-order-confirmed .oc-bar span:first-child {
    color: var(--oc-label) !important;
    -webkit-text-fill-color: var(--oc-label) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html body #shop-order-confirmed .oc-bar span:last-child {
    color: var(--oc-accent) !important;
    -webkit-text-fill-color: var(--oc-accent) !important;
}

/* Intro */
html body #shop-order-confirmed .oc-intro {
    padding: 34px 20px 0;
}

html body #shop-order-confirmed .oc-eyebrow {
    font-family: var(--oc-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--oc-label) !important;
    -webkit-text-fill-color: var(--oc-label) !important;
}

html body #shop-order-confirmed .oc-intro h2 {
    margin: 14px 0 0;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
}

html body #shop-order-confirmed .oc-intro p {
    margin: 12px 0 0;
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.5;
    text-wrap: pretty;
    color: var(--oc-body) !important;
    -webkit-text-fill-color: var(--oc-body) !important;
}

/* Section heads */
html body #shop-order-confirmed .oc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 34px;
    padding: 0 20px 12px;
    font-family: var(--oc-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
}

html body #shop-order-confirmed .oc-head span:last-child {
    letter-spacing: 0.12em;
    color: var(--oc-mute) !important;
    -webkit-text-fill-color: var(--oc-mute) !important;
}

html body #shop-order-confirmed .oc-head.is-ruled {
    margin: 32px 20px 0;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--oc-ink);
}

/* Pass cards */
html body #shop-order-confirmed .oc-pass {
    margin: 0 20px 16px;
    padding: 22px 20px 20px;
    background: var(--oc-card) !important;
    color: var(--oc-paper) !important;
}

html body #shop-order-confirmed .oc-pass-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

html body #shop-order-confirmed .oc-pass-tier {
    font-family: var(--oc-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    color: var(--oc-card-mute) !important;
    -webkit-text-fill-color: var(--oc-card-mute) !important;
}

html body #shop-order-confirmed .oc-pass-name {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--oc-paper) !important;
    -webkit-text-fill-color: var(--oc-paper) !important;
}

html body #shop-order-confirmed .oc-pass-meta {
    margin-top: 8px;
    font-family: var(--oc-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    line-height: 1.7;
    color: var(--oc-card-mute) !important;
    -webkit-text-fill-color: var(--oc-card-mute) !important;
}

/* The ticket's own number, in place of the canvas's QR placeholder; the
   scannable code lives in the wallet pass itself. */
html body #shop-order-confirmed .oc-pass-count {
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--oc-card-hair);
    font-family: var(--oc-mono);
    color: var(--oc-paper) !important;
    -webkit-text-fill-color: var(--oc-paper) !important;
}

html body #shop-order-confirmed .oc-pass-count strong {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--oc-paper) !important;
    -webkit-text-fill-color: var(--oc-paper) !important;
}

html body #shop-order-confirmed .oc-pass-count span {
    margin-top: 2px;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--oc-card-dim) !important;
    -webkit-text-fill-color: var(--oc-card-dim) !important;
}

html body #shop-order-confirmed .oc-pass-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    margin-top: 20px;
}

html body #shop-order-confirmed .oc-pass-grid > div {
    border-top: 1px solid var(--oc-card-hair);
    padding: 12px 0 0;
}

html body #shop-order-confirmed .oc-pass-grid span {
    display: block;
    font-family: var(--oc-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--oc-card-dim) !important;
    -webkit-text-fill-color: var(--oc-card-dim) !important;
}

html body #shop-order-confirmed .oc-pass-grid strong {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 400;
    color: var(--oc-paper) !important;
    -webkit-text-fill-color: var(--oc-paper) !important;
}

html body #shop-order-confirmed .oc-pass-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

html body #shop-order-confirmed .oc-pass-wallet {
    flex: 1;
    min-width: 0;
    min-height: 46px;
    padding: 0;
    border: 1px solid var(--oc-paper);
    border-radius: 0;
    background: var(--oc-paper) !important;
    box-shadow: none !important;
    font-family: var(--oc-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
    cursor: pointer;
}

html body #shop-order-confirmed .oc-pass-wallet.is-google {
    border-color: #3a3f3b;
    background: transparent !important;
    color: var(--oc-paper) !important;
    -webkit-text-fill-color: var(--oc-paper) !important;
}

html body #shop-order-confirmed .oc-pass-wallet:disabled {
    opacity: 0.6;
    cursor: default;
}

html body #shop-order-confirmed .oc-pass-id {
    margin-top: 14px;
    font-family: var(--oc-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--oc-card-dim) !important;
    -webkit-text-fill-color: var(--oc-card-dim) !important;
}

/* File cards: a digital purchase is a download, in the shape of the
   Digital Item sheet — what's inside, the real file, specs, license. */
html body #shop-order-confirmed .oc-file {
    margin: 0 20px 16px;
    padding: 20px;
    border: 1px solid var(--oc-hair);
    background: var(--oc-paper) !important;
}

html body #shop-order-confirmed .oc-file-eyebrow {
    font-family: var(--oc-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    color: var(--oc-accent) !important;
    -webkit-text-fill-color: var(--oc-accent) !important;
}

html body #shop-order-confirmed .oc-file-name {
    margin-top: 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
}

html body #shop-order-confirmed .oc-file-label {
    margin-top: 22px;
    font-family: var(--oc-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--oc-mute) !important;
    -webkit-text-fill-color: var(--oc-mute) !important;
}

html body #shop-order-confirmed .oc-file-list {
    margin-top: 4px;
}

html body #shop-order-confirmed .oc-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--oc-hair);
}

html body #shop-order-confirmed .oc-file-ext {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f0 !important;
    font-family: var(--oc-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--oc-body) !important;
    -webkit-text-fill-color: var(--oc-body) !important;
}

html body #shop-order-confirmed .oc-file-row-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
    overflow-wrap: anywhere;
}

html body #shop-order-confirmed .oc-file-size {
    flex: 0 0 auto;
    font-family: var(--oc-mono);
    font-size: 9.5px;
    color: var(--oc-mute) !important;
    -webkit-text-fill-color: var(--oc-mute) !important;
}

html body #shop-order-confirmed .oc-file-download {
    margin-top: 18px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: var(--oc-ink) !important;
    box-shadow: none !important;
    font-family: var(--oc-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    line-height: 1.5;
    color: var(--oc-paper) !important;
    -webkit-text-fill-color: var(--oc-paper) !important;
    cursor: pointer;
    overflow-wrap: anywhere;
}

html body #shop-order-confirmed .oc-file-missing {
    margin-top: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--oc-hair);
    border-bottom: 1px solid var(--oc-hair);
    font-family: var(--oc-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--oc-mute) !important;
    -webkit-text-fill-color: var(--oc-mute) !important;
}

html body #shop-order-confirmed .oc-file-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 1px;
    margin-top: 4px;
}

html body #shop-order-confirmed .oc-file-specs > div {
    border-top: 1px solid var(--oc-hair);
    padding: 12px 0 11px;
}

html body #shop-order-confirmed .oc-file-specs span {
    display: block;
    font-family: var(--oc-mono);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    color: var(--oc-mute) !important;
    -webkit-text-fill-color: var(--oc-mute) !important;
}

html body #shop-order-confirmed .oc-file-specs strong {
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
}

html body #shop-order-confirmed .oc-file-license {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

html body #shop-order-confirmed .oc-file-license-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--oc-body) !important;
    -webkit-text-fill-color: var(--oc-body) !important;
}

html body #shop-order-confirmed .oc-file-license-line > span:last-child {
    color: var(--oc-body) !important;
    -webkit-text-fill-color: var(--oc-body) !important;
}

html body #shop-order-confirmed .oc-file-dot {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    margin-top: 7px;
    border-radius: 50%;
    background: #18a957 !important;
}

html body #shop-order-confirmed .oc-file-license-line.is-restricted .oc-file-dot {
    background: #c8102e !important;
}

/* Receipt and lists */
html body #shop-order-confirmed .oc-section {
    padding: 0 20px;
}

html body #shop-order-confirmed .oc-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--oc-hair);
    padding: 14px 0;
}

html body #shop-order-confirmed .oc-line-name {
    font-size: 14.5px;
    letter-spacing: -0.01em;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
}

html body #shop-order-confirmed .oc-line-meta {
    margin-top: 5px;
    font-family: var(--oc-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--oc-mute) !important;
    -webkit-text-fill-color: var(--oc-mute) !important;
}

html body #shop-order-confirmed .oc-line-amount {
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
}

html body #shop-order-confirmed .oc-line button {
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--oc-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
    cursor: pointer;
}

html body #shop-order-confirmed .oc-line button:disabled {
    text-decoration: none;
    color: var(--oc-mute) !important;
    -webkit-text-fill-color: var(--oc-mute) !important;
    cursor: default;
}

html body #shop-order-confirmed .oc-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0 0;
}

html body #shop-order-confirmed .oc-total span:first-child {
    font-size: 15px;
    font-weight: 600;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
}

html body #shop-order-confirmed .oc-total span:last-child {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
}

html body #shop-order-confirmed .oc-step {
    display: flex;
    gap: 14px;
    border-bottom: 1px solid var(--oc-hair);
    padding: 16px 0;
}

html body #shop-order-confirmed .oc-step-num {
    padding-top: 2px;
    font-family: var(--oc-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    color: var(--oc-mute) !important;
    -webkit-text-fill-color: var(--oc-mute) !important;
}

html body #shop-order-confirmed .oc-step-title {
    font-size: 14.5px;
    letter-spacing: -0.01em;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
}

html body #shop-order-confirmed .oc-step-body {
    margin-top: 5px;
    max-width: 30ch;
    font-size: 13px;
    line-height: 1.5;
    text-wrap: pretty;
    color: var(--oc-body) !important;
    -webkit-text-fill-color: var(--oc-body) !important;
}

html body #shop-order-confirmed .oc-fine {
    margin-top: 32px;
    padding: 22px 20px 0;
    border-top: 1px solid var(--oc-hair);
    font-family: var(--oc-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    line-height: 1.7;
    color: var(--oc-mute) !important;
    -webkit-text-fill-color: var(--oc-mute) !important;
}

/* Dock */
html body #shop-order-confirmed .oc-dock {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--oc-rule);
}

html body #shop-order-confirmed .oc-dock button {
    flex: 1;
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid var(--oc-rule);
    border-radius: 0;
    background: var(--oc-paper) !important;
    box-shadow: none !important;
    font-family: var(--oc-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--oc-ink) !important;
    -webkit-text-fill-color: var(--oc-ink) !important;
    cursor: pointer;
}

html body #shop-order-confirmed .oc-dock button.is-primary {
    flex: 1.4;
    border-color: var(--oc-ink);
    background: var(--oc-ink) !important;
    color: var(--oc-paper) !important;
    -webkit-text-fill-color: var(--oc-paper) !important;
}

/* The install banner would sit over the dock. */
html body.shop-order-confirmed-open #pwa-install-banner {
    display: none !important;
}

/* ------------------------------------------------- the desktop Shop face
   The receipt keeps its ledger; the title and the charged total take the
   /<T>/shop page's display face, the buttons are pills, and every token
   has a dark twin. */
html body #shop-order-confirmed {
    --oc-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
}
html[data-theme="dark"] body #shop-order-confirmed {
    --oc-ink: #f4f4f5;
    --oc-body: #b4b4b8;
    --oc-mute: #8a8a90;
    --oc-label: #8a8a90;
    --oc-hair: #232327;
    --oc-rule: #34343a;
    --oc-paper: #0b0b0d;
    --oc-card: #1c1c20;
}
html body #shop-order-confirmed .oc-intro h2 {
    font-family: var(--oc-display) !important;
    font-stretch: 118% !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}
html body #shop-order-confirmed .oc-dock button {
    border-radius: 27px;
    font-weight: 800 !important;
}
html[data-theme="dark"] body #shop-order-confirmed .oc-bar,
html[data-theme="dark"] body #shop-order-confirmed .oc-dock {
    background: rgba(11, 11, 13, 0.94) !important;
}
html[data-theme="dark"] body #shop-order-confirmed .oc-file-ext {
    background: var(--oc-hair) !important;
}

/* The Shop receipt (static/js/shop/shop-receipt.js), on the desktop bag and
 * the phone's order screen.
 *
 * Every rule hangs off #shop-rcpt so the phone's blanket sweeps lose on
 * specificity: [data-theme=light] * * * paints leaves black, the button
 * restyles, and the "[id*=modal]" fixer (the id dodges it). Colors carry
 * !important and a matching -webkit-text-fill-color for the same reason.
 */
html body #shop-rcpt {
  --r-bg: #ffffff;
  --r-card: #ffffff;
  --r-sunk: #f5f5f7;
  --r-ink: #1d1d1f;
  --r-dim: #6e6e73;
  --r-faint: #8e8e93;
  --r-hair: #e5e5ea;
  --r-ok: #1f8a4c;
  --r-ok-soft: rgba(31, 138, 76, 0.1);
  --r-btn: #1d1d1f;
  --r-on-btn: #ffffff;
  --r-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --r-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --r-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  font-family: var(--r-font) !important;
  color: var(--r-ink) !important;
  -webkit-text-fill-color: var(--r-ink) !important;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
html[data-theme="dark"] body #shop-rcpt {
  --r-bg: #000000;
  --r-card: #1c1c1e;
  --r-sunk: #2c2c2e;
  --r-ink: #f5f5f7;
  --r-dim: #a1a1a6;
  --r-faint: #8e8e93;
  --r-hair: #38383a;
  --r-ok: #30d158;
  --r-ok-soft: rgba(48, 209, 88, 0.14);
  --r-btn: #f5f5f7;
  --r-on-btn: #000000;
  --r-shadow: none;
}
html body #shop-rcpt *,
html body #shop-rcpt *::before,
html body #shop-rcpt *::after { box-sizing: border-box; }
html body #shop-rcpt :is(h2, h3, p) { margin: 0; }
html body #shop-rcpt :is(div, span, p, h2, h3, strong, header, footer, section, article) {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: inherit !important;
}

/* Header */
html body #shop-rcpt .rcpt-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--r-hair);
}
html body #shop-rcpt .rcpt-head__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
html body #shop-rcpt .rcpt-head__icon {
  width: 28px; height: 28px; border-radius: 7px; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
html body #shop-rcpt .rcpt-head__name {
  font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body #shop-rcpt .rcpt-head__doc {
  font-size: 13px; font-weight: 500; color: var(--r-dim) !important; flex: 0 0 auto;
}

/* Amount */
html body #shop-rcpt .rcpt-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
html body #shop-rcpt .rcpt-status {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px;
  border-radius: 999px; background: var(--r-ok-soft) !important; color: var(--r-ok) !important;
  font-size: 12px; font-weight: 600;
}
html body #shop-rcpt .rcpt-status__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--r-ok) !important;
}
html body #shop-rcpt .rcpt-hero__amount {
  font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
html body #shop-rcpt .rcpt-hero__sub { font-size: 14px; color: var(--r-dim) !important; }

/* Sections */
html body #shop-rcpt .rcpt-section { display: flex; flex-direction: column; gap: 12px; }
html body #shop-rcpt .rcpt-section__title {
  font-size: 13px; font-weight: 600; color: var(--r-dim) !important; letter-spacing: 0;
  text-transform: none;
}

/* Ticket */
html body #shop-rcpt .rcpt-ticket {
  position: relative; border: 1px solid var(--r-hair); border-radius: 16px;
  background: var(--r-card) !important; box-shadow: var(--r-shadow); overflow: hidden;
}
html body #shop-rcpt .rcpt-ticket__top { padding: 20px 20px 18px; }
html body #shop-rcpt .rcpt-ticket__eyebrow {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--r-faint) !important;
}
html body #shop-rcpt .rcpt-ticket__event {
  margin-top: 6px; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
html body #shop-rcpt .rcpt-ticket__tier { margin-top: 2px; font-size: 15px; color: var(--r-dim) !important; }
html body #shop-rcpt .rcpt-ticket__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 18px;
}
html body #shop-rcpt .rcpt-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body #shop-rcpt .rcpt-fact__label { font-size: 12px; color: var(--r-faint) !important; }
html body #shop-rcpt .rcpt-fact__value { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }

/* The tear line between event and stub, notched at both edges. */
html body #shop-rcpt .rcpt-ticket__tear {
  position: relative; height: 0; margin: 0 20px; border-top: 1px dashed var(--r-hair);
}
html body #shop-rcpt .rcpt-ticket__tear::before,
html body #shop-rcpt .rcpt-ticket__tear::after {
  content: ""; position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--r-bg) !important; border: 1px solid var(--r-hair);
}
html body #shop-rcpt .rcpt-ticket__tear::before { left: -30px; }
html body #shop-rcpt .rcpt-ticket__tear::after { right: -30px; }

html body #shop-rcpt .rcpt-ticket__stub {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
}
html body #shop-rcpt .rcpt-ticket__qr {
  flex: 0 0 auto; width: 104px; height: 104px; padding: 6px; border-radius: 10px;
  background: #ffffff !important; border: 1px solid var(--r-hair);
}
html body #shop-rcpt .rcpt-ticket__qr img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
html body #shop-rcpt .rcpt-ticket__number { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html body #shop-rcpt .rcpt-ticket__id {
  font-family: var(--r-mono) !important; font-size: 13px; font-weight: 500; overflow-wrap: anywhere;
}
html body #shop-rcpt .rcpt-ticket__hint { font-size: 12px; color: var(--r-faint) !important; margin-top: 4px; }

/* Official wallet badges: the artwork is the button. */
html body #shop-rcpt .rcpt-wallets { padding: 0 20px 20px; }
html body #shop-rcpt .rcpt-wallets__badges { display: flex; flex-wrap: wrap; gap: 10px; }
html body #shop-rcpt .rcpt-badge {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 !important; margin: 0; border: 0 !important; border-radius: 0;
  background: transparent !important; box-shadow: none !important; cursor: pointer; min-width: 0;
  transition: opacity 0.15s ease;
}
html body #shop-rcpt .rcpt-badge img { display: block; height: 44px; width: auto; pointer-events: none; }
html body #shop-rcpt .rcpt-badge:hover { opacity: 0.86; }
html body #shop-rcpt .rcpt-badge:active { opacity: 0.7; }
html body #shop-rcpt .rcpt-badge:focus-visible { outline: 2px solid #0a84ff; outline-offset: 3px; border-radius: 10px; }
html body #shop-rcpt .rcpt-badge[disabled] { opacity: 0.5; cursor: progress; }
html body #shop-rcpt .rcpt-wallet-note { margin-top: 10px; font-size: 13px; color: var(--r-dim) !important; }
html body #shop-rcpt .rcpt-wallet-note[hidden] { display: none; }

/* Digital delivery */
html body #shop-rcpt .rcpt-file {
  border: 1px solid var(--r-hair); border-radius: 16px; padding: 18px 20px 20px;
  background: var(--r-card) !important; box-shadow: var(--r-shadow);
  display: flex; flex-direction: column; gap: 16px;
}
html body #shop-rcpt .rcpt-file__head { display: flex; align-items: center; gap: 14px; min-width: 0; }
html body #shop-rcpt .rcpt-file__tile {
  flex: 0 0 auto; width: 48px; height: 56px; border-radius: 8px; display: grid; place-items: center;
  background: var(--r-sunk) !important; color: var(--r-dim) !important;
  font-family: var(--r-mono) !important; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
html body #shop-rcpt .rcpt-file__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
html body #shop-rcpt .rcpt-file__name { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; overflow-wrap: anywhere; }
html body #shop-rcpt .rcpt-file__meta { font-size: 13px; color: var(--r-dim) !important; }
html body #shop-rcpt .rcpt-file__list { border-top: 1px solid var(--r-hair); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
html body #shop-rcpt .rcpt-file__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body #shop-rcpt .rcpt-file__fine { font-size: 12px; color: var(--r-faint) !important; }

/* Buttons */
html body #shop-rcpt .rcpt-btn {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border-radius: 10px; font: 600 15px/1 var(--r-font) !important;
  text-decoration: none !important; cursor: pointer; letter-spacing: -0.01em; text-transform: none;
  transition: opacity 0.15s ease, background-color 0.15s ease; box-shadow: none !important; width: auto; min-width: 0;
}
html body #shop-rcpt .rcpt-btn--primary {
  background: var(--r-btn) !important; color: var(--r-on-btn) !important;
  -webkit-text-fill-color: var(--r-on-btn) !important; border: 1px solid var(--r-btn) !important;
}
html body #shop-rcpt .rcpt-btn--secondary {
  background: transparent !important; color: var(--r-ink) !important;
  -webkit-text-fill-color: var(--r-ink) !important; border: 1px solid var(--r-hair) !important;
}
html body #shop-rcpt .rcpt-btn:hover { opacity: 0.88; }
html body #shop-rcpt .rcpt-btn:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }

/* Summary */
html body #shop-rcpt .rcpt-summary { gap: 0; }
html body #shop-rcpt .rcpt-summary .rcpt-section__title { margin-bottom: 8px; }
html body #shop-rcpt .rcpt-lines { display: flex; flex-direction: column; }
html body #shop-rcpt .rcpt-line {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--r-hair);
}
html body #shop-rcpt .rcpt-line__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body #shop-rcpt .rcpt-line__name { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
html body #shop-rcpt .rcpt-line__meta { font-size: 13px; color: var(--r-dim) !important; font-variant-numeric: tabular-nums; }
html body #shop-rcpt .rcpt-line__amount { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body #shop-rcpt .rcpt-totals,
html body #shop-rcpt .rcpt-meta { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--r-hair); }
html body #shop-rcpt .rcpt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14px; }
html body #shop-rcpt .rcpt-row__label { color: var(--r-dim) !important; flex: 0 0 auto; }
html body #shop-rcpt .rcpt-row__value { text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
html body #shop-rcpt .rcpt-row--total { font-size: 16px; font-weight: 600; padding-top: 6px; }
html body #shop-rcpt .rcpt-row--total .rcpt-row__label { color: var(--r-ink) !important; }
html body #shop-rcpt .rcpt-row--mono .rcpt-row__value { font-family: var(--r-mono) !important; font-size: 13px; }
html body #shop-rcpt .rcpt-link {
  color: #0a66d6 !important; -webkit-text-fill-color: #0a66d6 !important; text-decoration: none !important; font-weight: 500;
}
html[data-theme="dark"] body #shop-rcpt .rcpt-link { color: #409cff !important; -webkit-text-fill-color: #409cff !important; }
html body #shop-rcpt .rcpt-link:hover { text-decoration: underline !important; }
html body #shop-rcpt .rcpt-sent {
  padding-top: 12px; border-top: 1px solid var(--r-hair); font-size: 13px; color: var(--r-dim) !important;
  overflow-wrap: anywhere;
}
html body #shop-rcpt .rcpt-sent strong { font-weight: 500; color: var(--r-ink) !important; }

/* Footer */
html body #shop-rcpt .rcpt-foot { display: flex; flex-direction: column; gap: 10px; }
html body #shop-rcpt .rcpt-foot .rcpt-btn { width: 100%; height: 48px; border-radius: 12px; }
html body #shop-rcpt .rcpt-fine { margin-top: -16px; text-align: center; font-size: 12px; color: var(--r-faint) !important; }

/* ------------------------------------------------ desktop: the bag drawer */
.sh-drawer:has(#bag-done:not([hidden])) { width: min(460px, calc(var(--pane-w, 100vw) - 24px)); }
#bag-done.sh-done { display: block; padding: 20px 24px 28px; }
#bag-done.sh-done[hidden] { display: none; }
html[data-theme="dark"] body #bag-done #shop-rcpt { --r-bg: var(--paper, #0e0e10); }
html:not([data-theme="dark"]) body #bag-done #shop-rcpt { --r-bg: var(--paper, #ffffff); }

/* ---------------------------------------------- phone: the order screen */
html body #shop-order-confirmed.rcpt-screen {
  background: var(--rcpt-screen-bg, #ffffff) !important;
}
html[data-theme="dark"] body #shop-order-confirmed.rcpt-screen { --rcpt-screen-bg: #000000; }
html body #shop-order-confirmed.rcpt-screen .rcpt-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 0px) + 28px);
}
html body #shop-order-confirmed.rcpt-screen #shop-rcpt { --r-bg: var(--rcpt-screen-bg, #ffffff); }
html[data-theme="dark"] body #shop-order-confirmed.rcpt-screen #shop-rcpt { --r-bg: #000000; }
.sh-drawer:has(#bag-done:not([hidden])) .sh-drawer__head { border-bottom: 0; padding-bottom: 0; min-height: 60px; }
@media (max-width: 440px) {
  html body #shop-rcpt .rcpt-badge,
  html body #shop-rcpt .rcpt-badge img { height: 40px; }
}

/* ------------------------------------ all tickets at once: Wallet and PDF */
html body #shop-rcpt .rcpt-all { display: flex; flex-direction: column; gap: 8px; }
html body #shop-rcpt .rcpt-all__label { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
html body #shop-rcpt .rcpt-all__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
html body #shop-rcpt .rcpt-all .rcpt-pdf { height: 44px; border-radius: 10px; }
html body #shop-rcpt .rcpt-all + .rcpt-ticket { margin-top: 6px; }

/* ------------------------------------------------ the access code, large */
html body #shop-rcpt .rcpt-code { gap: 6px; }
html body #shop-rcpt .rcpt-code__value {
  font-family: var(--r-mono) !important; font-size: 34px; line-height: 1.1; font-weight: 600;
  letter-spacing: 0.08em; font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all;
  margin: 2px 0 4px;
}
html body #shop-rcpt .rcpt-code__note { font-size: 15px; font-weight: 600; }
html body #shop-rcpt .rcpt-code__fine { font-size: 13px; color: var(--r-dim) !important; }

html body #shop-rcpt .rcpt-status.rcpt-status--off { background: var(--r-sunk) !important; color: var(--r-dim) !important; }
html body #shop-rcpt .rcpt-status--off .rcpt-status__dot { background: var(--r-dim) !important; }

/* ------------------------------------------------------ Find my tickets */
html body #shop-find-tickets.rcpt-screen {
  --rcpt-screen-bg: #ffffff;
  position: fixed; inset: 0; z-index: 240100;   /* over the phone's #bottom-nav (240020) */ display: flex; flex-direction: column;
  background: var(--rcpt-screen-bg) !important;
}
html[data-theme="dark"] body #shop-find-tickets.rcpt-screen { --rcpt-screen-bg: #000000; }
html body #shop-find-tickets .rcpt-find-frame {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--rcpt-screen-bg) !important;
}
html body #shop-find-tickets .rcpt-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 0px) + 28px);
  background: var(--rcpt-screen-bg) !important;
}
html body #shop-find-tickets #shop-rcpt { --r-bg: var(--rcpt-screen-bg); }
html[data-theme="dark"] body #shop-find-tickets #shop-rcpt { --r-bg: #000000; }
html body #shop-find-tickets .rcpt-screen__close {
  appearance: none; -webkit-appearance: none; position: absolute; z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + 12px); right: 14px;
  width: 36px; height: 36px; padding: 0 !important; border-radius: 50%; border: 0 !important;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(118, 118, 128, 0.14) !important; color: #1d1d1f !important; box-shadow: none !important;
}
html[data-theme="dark"] body #shop-find-tickets .rcpt-screen__close { background: rgba(118, 118, 128, 0.3) !important; color: #f5f5f7 !important; }
html body #shop-find-tickets .rcpt-screen__close svg { display: block; }
html body #shop-find-tickets .rcpt-screen__close svg path { stroke: currentColor !important; }
/* The header's right side sits clear of the close button. */
html body #shop-find-tickets #shop-rcpt .rcpt-head { padding-right: 48px; }
html body.shop-find-open { overflow: hidden; }
html body.shop-find-open #pwa-install-banner { display: none !important; }

/* Wide screens: a centred panel over a dimmed Shop. */
@media (min-width: 720px) {
  html body #shop-find-tickets.rcpt-screen {
    background: rgba(0, 0, 0, 0.42) !important; align-items: center; justify-content: center; padding: 32px;
  }
  html body #shop-find-tickets .rcpt-find-frame {
    flex: 0 1 auto; width: min(600px, 100%); max-height: 100%; border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  }
  html body #shop-find-tickets .rcpt-scroll { padding: 28px 36px 32px; }
  html body #shop-find-tickets .rcpt-screen__close { top: 20px; right: 20px; }
}

html body #shop-rcpt.rcpt--find { gap: 24px; }
html body #shop-rcpt .rcpt-find-intro { display: flex; flex-direction: column; gap: 6px; }
html body #shop-rcpt .rcpt-find-title { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
html body #shop-rcpt .rcpt-find-sub { font-size: 15px; line-height: 1.4; color: var(--r-dim) !important; }
html body #shop-rcpt .rcpt-find-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
html body #shop-rcpt .rcpt-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
html body #shop-rcpt .rcpt-field__label { font-size: 13px; font-weight: 600; color: var(--r-dim) !important; }
html body #shop-rcpt input.rcpt-input {
  appearance: none; -webkit-appearance: none; width: 100%; height: 50px; margin: 0; padding: 0 14px !important;
  border-radius: 12px !important; border: 1px solid var(--r-hair) !important; outline: none;
  background: var(--r-sunk) !important; box-shadow: none !important;
  color: var(--r-ink) !important; -webkit-text-fill-color: var(--r-ink) !important; caret-color: var(--r-ink);
  font: 500 17px/1.2 var(--r-font) !important; letter-spacing: -0.01em;
}
html body #shop-rcpt input.rcpt-input::placeholder { color: var(--r-faint) !important; -webkit-text-fill-color: var(--r-faint) !important; opacity: 1; }
html body #shop-rcpt input.rcpt-input:focus { border-color: var(--r-ink) !important; background: var(--r-card) !important; }
html body #shop-rcpt input.rcpt-input--code {
  font: 600 22px/1 var(--r-mono) !important; letter-spacing: 0.12em; text-transform: uppercase; height: 56px;
}
html body #shop-rcpt input.rcpt-input--code::placeholder { letter-spacing: 0.12em; }
html body #shop-rcpt .rcpt-find-err { font-size: 14px; font-weight: 500; color: #c9342c !important; -webkit-text-fill-color: #c9342c !important; }
html[data-theme="dark"] body #shop-rcpt .rcpt-find-err { color: #ff6961 !important; -webkit-text-fill-color: #ff6961 !important; }
html body #shop-rcpt .rcpt-find-err[hidden] { display: none; }
html body #shop-rcpt .rcpt-find-go { width: 100%; height: 50px; border-radius: 12px; margin-top: 4px; }
html body #shop-rcpt .rcpt-find-go[disabled] { opacity: 0.6; cursor: progress; }
html body #shop-rcpt .rcpt-find-fine { font-size: 12px; line-height: 1.45; color: var(--r-faint) !important; text-align: center; }

html body #shop-rcpt .rcpt-mine[hidden] { display: none; }
html body #shop-rcpt .rcpt-mine { gap: 8px; }
html body #shop-rcpt .rcpt-mine__rows { display: flex; flex-direction: column; }
html body #shop-rcpt button.rcpt-mine__row {
  appearance: none; -webkit-appearance: none; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 60px; margin: 0; padding: 12px 2px !important; border: 0 !important; border-radius: 0 !important;
  border-top: 1px solid var(--r-hair) !important; background: transparent !important; box-shadow: none !important;
  color: var(--r-ink) !important; -webkit-text-fill-color: var(--r-ink) !important; text-align: left; cursor: pointer;
  font-family: var(--r-font) !important;
}
html body #shop-rcpt button.rcpt-mine__row:last-child { border-bottom: 1px solid var(--r-hair) !important; }
html body #shop-rcpt button.rcpt-mine__row[aria-busy="true"] { opacity: 0.55; }
html body #shop-rcpt .rcpt-mine__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html body #shop-rcpt .rcpt-mine__name { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
html body #shop-rcpt .rcpt-mine__meta { font-size: 13px; color: var(--r-dim) !important; }
html body #shop-rcpt .rcpt-mine__chev { flex: 0 0 auto; color: var(--r-faint) !important; display: grid; }
html body #shop-rcpt .rcpt-mine__chev svg path { stroke: currentColor !important; }
html body #shop-rcpt .rcpt-mine__or { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--r-dim) !important; }

#mobile-shop-owner-products-modal,
#mobile-shop-owner-products-modal * {
    box-sizing: border-box;
}

#mobile-shop-owner-products-modal {
    --shop-manager-bg: var(--mobile-shop-bg, var(--background-color));
    --shop-manager-text: var(--mobile-shop-text, var(--text-primary));
    --shop-manager-muted: var(--mobile-shop-muted, var(--text-secondary));
    --shop-manager-border: var(--mobile-shop-border, var(--border-color));
    --shop-manager-surface: var(--mobile-shop-surface, var(--surface-color));
    --shop-manager-soft: var(--mobile-shop-soft, var(--input-bg));
    --shop-manager-button-text: var(--mobile-shop-bg, var(--background-color));
    position: fixed;
    top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px));
    right: 0;
    bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    left: 0;
    z-index: 9000;
    background: var(--shop-manager-bg);
    color: var(--shop-manager-text);
    display: flex;
    flex-direction: column;
}

.mobile-shop-owner-products-header {
    padding: 10px 14px 8px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
}

.mobile-shop-owner-products-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--shop-manager-text);
    -webkit-text-fill-color: var(--shop-manager-text);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.mobile-shop-owner-products-icon-btn.is-add {
    border: 1px solid var(--shop-manager-border);
    background: var(--shop-manager-soft);
}


.mobile-shop-owner-products-header.is-title-only {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 18px 10px;
}
.mobile-shop-owner-products-header.is-title-only .mobile-shop-owner-products-title {
    text-align: left;
    font-size: 26px;
    line-height: 1.05;
    font-weight: 780;
    letter-spacing: -0.04em;
}

.mobile-shop-owner-products-title {
    min-width: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 860;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-owner-products-tools {
    padding: 12px 18px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    background: var(--shop-manager-bg);
}

.mobile-shop-owner-products-embed-btn {
    grid-column: 2;
    grid-row: 1;
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--shop-manager-border);
    background: #ffffff;
    color: var(--shop-manager-text) !important;
    -webkit-text-fill-color: var(--shop-manager-text) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    box-shadow: none;
}

.mobile-shop-owner-products-embed-btn span {
    display: none;
}

.mobile-shop-owner-products-embed-btn i,
.mobile-shop-owner-products-embed-btn span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

.mobile-shop-owner-products-search-wrap {
    grid-column: 1;
    grid-row: 1;
    min-height: 42px;
    border-radius: 999px;
    border: 1px solid var(--shop-manager-border);
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: var(--shop-manager-muted);
    box-shadow: 0 8px 22px rgba(5, 5, 5, 0.035);
}

#mobile-shop-owner-products-search {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 760;
    outline: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    color: var(--shop-manager-text) !important;
    -webkit-text-fill-color: var(--shop-manager-text) !important;
}

#mobile-shop-owner-products-search:empty::before {
    content: attr(data-placeholder);
    color: var(--shop-manager-muted) !important;
    -webkit-text-fill-color: var(--shop-manager-muted) !important;
    opacity: 1 !important;
}

#mobile-shop-owner-products-categories {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 3px 0 0;
    scrollbar-width: none;
}

#mobile-shop-owner-products-categories.is-empty {
    display: none;
}

#mobile-shop-owner-products-categories::-webkit-scrollbar {
    display: none;
}

.mobile-shop-owner-product-filter {
    flex: 0 0 auto;
    min-height: 30px;
    border-radius: 999px;
    border: 1px solid var(--shop-manager-border);
    background: #ffffff;
    color: var(--shop-manager-muted) !important;
    -webkit-text-fill-color: var(--shop-manager-muted) !important;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 820;
    box-shadow: 0 8px 18px rgba(5, 5, 5, 0.035);
}

.mobile-shop-owner-product-filter.is-active {
    background: #f7f7f7;
    border-color: rgba(16, 16, 16, 0.2);
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    box-shadow: none;
}

.mobile-shop-owner-product-filter span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

.mobile-shop-owner-product-filter-count {
    opacity: 0.72;
}

#mobile-shop-owner-products-list {
    flex: 1;
    overflow-y: auto;
    padding: 2px 18px calc(42px + env(safe-area-inset-bottom, 0px));
    display: grid;
    align-content: start;
    gap: 10px;
}

.mobile-shop-owner-products-state {
    padding: 34px 0;
    text-align: center;
    color: var(--shop-manager-muted);
}

.mobile-shop-owner-products-state i {
    font-size: 28px;
    margin-bottom: 12px;
    opacity: 0.45;
}

.mobile-shop-owner-products-state.is-loading i {
    font-size: 22px;
    margin-bottom: 10px;
    opacity: 1;
}

.mobile-shop-owner-products-state-title {
    font-size: 18px;
    font-weight: 860;
    color: var(--shop-manager-text);
    letter-spacing: 0;
}

.mobile-shop-owner-products-state-copy {
    font-size: 12px;
    line-height: 1.45;
    margin: 6px auto 16px;
    max-width: 260px;
}

.mobile-shop-owner-products-primary-btn {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(16, 16, 16, 0.18);
    background: #ffffff;
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    font-size: 13px;
    font-weight: 850;
}

.mobile-shop-owner-products-primary-btn i,
.mobile-shop-owner-products-primary-btn span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

.mobile-shop-owner-product-row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--shop-manager-border);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(5, 5, 5, 0.035);
}

.mobile-shop-owner-product-thumb {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 16px;
    border: 1px solid var(--shop-manager-border);
    background: var(--shop-manager-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shop-manager-muted);
    -webkit-text-fill-color: var(--shop-manager-muted);
    box-shadow: none;
}

.mobile-shop-owner-product-thumb .mobile-shop-product-design-overlay {
    position: absolute !important;
    left: var(--shop-design-x, 50%) !important;
    top: var(--shop-design-y, 50%) !important;
    z-index: 2 !important;
    width: var(--shop-design-size, 22%) !important;
    height: auto !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

.mobile-shop-owner-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-shop-owner-product-body {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.mobile-shop-owner-product-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.mobile-shop-owner-product-copy {
    min-width: 0;
}

.mobile-shop-owner-product-name {
    font-size: 16px;
    font-weight: 820;
    line-height: 1.12;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--shop-manager-text);
}

.mobile-shop-owner-product-meta {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}

.mobile-shop-owner-product-meta span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--shop-manager-muted);
    -webkit-text-fill-color: var(--shop-manager-muted);
}

.mobile-shop-owner-product-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: var(--shop-manager-border);
}

.mobile-shop-owner-product-copy .mobile-shop-variant-chips {
    display: grid;
    gap: 4px;
    margin-top: 7px;
}

.mobile-shop-owner-product-copy .mobile-shop-variant-chips div {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.mobile-shop-owner-product-copy .mobile-shop-variant-chips strong {
    flex: 0 0 auto;
    color: var(--shop-manager-muted);
    -webkit-text-fill-color: var(--shop-manager-muted);
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

.mobile-shop-owner-product-copy .mobile-shop-variant-chips span {
    flex: 0 0 auto;
    max-width: 82px;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid var(--shop-manager-border);
    color: var(--shop-manager-text);
    -webkit-text-fill-color: var(--shop-manager-text);
    font-size: 9px;
    line-height: 1;
    font-weight: 820;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-owner-product-price {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    font-weight: 760;
    letter-spacing: 0;
    color: var(--shop-manager-text);
    -webkit-text-fill-color: var(--shop-manager-text);
}

.mobile-shop-owner-product-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.mobile-shop-owner-product-action {
    min-height: 32px;
    border-radius: 999px;
    border: 1px solid var(--shop-manager-border);
    background: #ffffff;
    color: var(--shop-manager-text);
    -webkit-text-fill-color: var(--shop-manager-text);
    font-size: 11px;
    font-weight: 820;
    box-shadow: none;
}

.mobile-shop-owner-product-action.is-edit {
    min-width: 74px;
    padding: 0 14px;
    background: #ffffff;
    border-color: rgba(16, 16, 16, 0.22);
    color: #101010;
    -webkit-text-fill-color: #101010;
}

.mobile-shop-owner-product-action.is-icon {
    width: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-shop-owner-product-action.is-delete {
    border-color: rgba(16, 16, 16, 0.12);
    color: rgba(16, 16, 16, 0.72);
    -webkit-text-fill-color: rgba(16, 16, 16, 0.72);
}


/* Hard final override: owner product category active tab must stay readable. */
#mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active,
#mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active span,
#mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active .mobile-shop-owner-product-filter-count,
#mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active * {
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Remove the extra Products title row; app header already identifies the tab. */
#mobile-shop-owner-products-modal .mobile-shop-owner-products-header.is-title-only {
    display: none !important;
}

[data-theme="dark"] #mobile-shop-owner-products-modal,
[data-theme="dark-accent"] #mobile-shop-owner-products-modal {
    background: var(--mobile-shop-bg) !important;
    color: var(--mobile-shop-text) !important;
}

[data-theme="dark"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active,
[data-theme="dark"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active *,
[data-theme="dark-accent"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active,
[data-theme="dark-accent"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active * {
    background-color: #f7f7f7 !important;
    border-color: #f7f7f7 !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

[data-theme="dark"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active span,
[data-theme="dark"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active .mobile-shop-owner-product-filter-count,
[data-theme="dark"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active *,
[data-theme="dark-accent"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active span,
[data-theme="dark-accent"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active .mobile-shop-owner-product-filter-count,
[data-theme="dark-accent"] #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter.is-active * {
    background-color: transparent !important;
}

/* The sheet starts below the app header (top: header height), so a header
   tucked away by a scroll of the dashboard left a band of the dashboard
   showing above the search row. Pin the header while the sheet is up, as
   mobile-app-header.css does for the other shop sheets; the tuck is an
   inline transform, which this outranks. */
html body:has(#mobile-shop-owner-products-modal) #mobile-app-header {
    transform: translateY(0) !important;
}

/* Dark and Glass: the rows, search, chips and buttons here are white
   surfaces, but the dark theme's html[data-theme="dark"] body [id*="modal"] div
   sweep paints every div inside this sheet's id white -- names, prices and
   chips vanished (white on white). Keep the white surfaces, give them ink.
   The id outranks the sweep. */
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-product-row,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-product-row *:not(img),
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-products-search-wrap,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-products-search-wrap *,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-products-embed-btn,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-products-embed-btn *,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter *,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-products-primary-btn,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-products-primary-btn * {
    color: #101010 !important;
    -webkit-text-fill-color: #101010 !important;
}
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-product-meta,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-product-meta *,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-product-filter-count,
html[data-theme="dark"] body #mobile-shop-owner-products-modal #mobile-shop-owner-products-search:empty::before {
    color: #6b6b70 !important;
    -webkit-text-fill-color: #6b6b70 !important;
}
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-product-action.is-delete,
html[data-theme="dark"] body #mobile-shop-owner-products-modal .mobile-shop-owner-product-action.is-delete * {
    color: #b42318 !important;
    -webkit-text-fill-color: #b42318 !important;
}

.mobile-shop-detail-modal,
.mobile-shop-detail-modal * {
    box-sizing: border-box;
    font-family: inherit !important;
    letter-spacing: 0 !important;
}

.mobile-shop-detail-modal .fa,
.mobile-shop-detail-modal .fas,
.mobile-shop-detail-modal .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.mobile-shop-detail-modal {
    position: fixed;
    top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px));
    right: 0;
    bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    left: 0;
    z-index: 9000;
    background: var(--mobile-shop-bg);
    color: var(--mobile-shop-text);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mobileShopDetailIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-shop-detail-shell {
    min-height: 100%;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}

.mobile-shop-detail-header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.mobile-shop-detail-header button,
.mobile-shop-detail-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    border: 1px solid var(--mobile-shop-border);
    background: transparent;
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.mobile-shop-detail-titlebar {
    min-width: 0;
    text-align: center;
    color: var(--mobile-shop-text);
    font-size: 13px;
    font-weight: 650;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-detail-media {
    position: relative;
    aspect-ratio: 16 / 10;
    min-height: 164px;
    max-height: min(29dvh, 226px);
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(218, 235, 255, 0.23), rgba(255, 255, 255, 0.035) 36%, rgba(255, 255, 255, 0.10)),
        rgba(16, 18, 20, 0.42);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    backdrop-filter: blur(28px) saturate(1.16);
    -webkit-backdrop-filter: blur(28px) saturate(1.16);
}

.mobile-shop-detail-media::after {
    content: none;
}

.mobile-shop-detail-media img,
.mobile-shop-detail-media video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: scale(1.018);
    filter: none;
    transition: opacity 240ms ease, transform 440ms ease;
}

.mobile-shop-detail-media img.is-loaded,
.mobile-shop-detail-media video {
    opacity: 1;
    transform: scale(1);
}

.mobile-shop-detail-media img.is-portrait {
    object-fit: cover;
    padding: 0;
    background: transparent;
}

.mobile-shop-detail-media .mobile-shop-product-design-overlay {
    position: absolute !important;
    z-index: 3 !important;
    left: var(--shop-design-x, 50%) !important;
    top: var(--shop-design-y, 50%) !important;
    width: var(--shop-design-size, 22%) !important;
    height: auto !important;
    max-width: 64% !important;
    max-height: 64% !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16)) !important;
}

.mobile-shop-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--mobile-shop-subtle);
    font-size: 26px;
    text-align: center;
    width: 100%;
    height: 100%;
}

.mobile-shop-detail-placeholder i {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mobile-shop-bg) 88%, transparent);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.08);
}

.mobile-shop-detail-placeholder span {
    font-size: 13px;
    font-weight: 700;
    text-transform: capitalize;
}

.mobile-shop-detail-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--mobile-shop-text);
    font-size: 11px;
    font-weight: 760;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mobile-shop-detail-body {
    padding: 12px 0 0;
}

.mobile-shop-detail-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--mobile-shop-subtle);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.mobile-shop-detail-body h2 {
    margin: 0;
    color: var(--mobile-shop-text);
    font-size: clamp(24px, 6.4vw, 29px);
    line-height: 1.04;
    font-weight: 760;
}

.mobile-shop-detail-description {
    margin: 7px 0 0;
    color: var(--mobile-shop-muted);
    font-size: 13px;
    line-height: 1.38;
    font-weight: 450;
}

.mobile-shop-detail-variant-summary {
    margin-top: 13px;
    color: var(--mobile-shop-muted);
    font-size: 12px;
    font-weight: 820;
}

.mobile-shop-detail-ticket-info {
    display: grid;
    gap: 0;
    margin-top: 14px;
    border-top: 1px solid var(--mobile-shop-border);
    border-bottom: 1px solid var(--mobile-shop-border);
}

.mobile-shop-detail-ticket-info div {
    min-height: 34px;
    display: grid;
    grid-template-columns: minmax(78px, 0.38fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--mobile-shop-border);
}

.mobile-shop-detail-ticket-info div:last-child {
    border-bottom: 0;
}

.mobile-shop-detail-ticket-info span {
    color: var(--mobile-shop-subtle);
    font-size: 9px;
    font-weight: 720;
    text-transform: uppercase;
}

.mobile-shop-detail-ticket-info strong {
    min-width: 0;
    color: var(--mobile-shop-text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    text-align: right;
}

.mobile-shop-detail-modal .mobile-shop-variant-controls {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.mobile-shop-detail-modal .mobile-shop-variant-controls section {
    display: grid;
    gap: 8px;
}

.mobile-shop-detail-modal .mobile-shop-variant-label {
    color: var(--mobile-shop-subtle);
    font-size: 11px;
    font-weight: 820;
    text-transform: uppercase;
}

.mobile-shop-detail-modal .mobile-shop-variant-options {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mobile-shop-detail-modal .mobile-shop-variant-options::-webkit-scrollbar {
    display: none;
}

.mobile-shop-detail-modal .mobile-shop-variant-options button {
    flex: 0 0 auto;
    min-height: 36px;
    max-width: 150px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--mobile-shop-border);
    background: var(--mobile-shop-button-bg);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-detail-modal .mobile-shop-variant-options button.is-selected {
    background: var(--mobile-shop-text);
    border-color: var(--mobile-shop-text);
    color: var(--mobile-shop-bg);
    -webkit-text-fill-color: var(--mobile-shop-bg);
}

.mobile-shop-detail-modal .mobile-shop-variant-options button.mobile-shop-variant-color-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
}

.mobile-shop-detail-modal .mobile-shop-variant-options button.mobile-shop-variant-color-option .mobile-shop-variant-color-swatch {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.92);
    background: var(--shop-variant-color, #d7d3c8);
    box-shadow:
        0 0 0 1px rgba(17, 17, 17, 0.18),
        0 5px 12px rgba(0, 0, 0, 0.14);
}

.mobile-shop-detail-modal .mobile-shop-variant-options button.mobile-shop-variant-color-option.is-selected .mobile-shop-variant-color-swatch {
    border-color: var(--mobile-shop-bg);
}

.mobile-shop-detail-modal .mobile-shop-variant-options button.mobile-shop-variant-color-option .mobile-shop-variant-color-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.mobile-shop-detail-modal .mobile-shop-variant-color-select-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    width: min(100%, 260px);
    padding: 5px 8px;
    border: 1px solid var(--mobile-shop-border);
    border-radius: 999px;
    background: var(--mobile-shop-button-bg);
}

.mobile-shop-detail-modal .mobile-shop-variant-color-preview {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.95);
    background: var(--shop-variant-color, #d7d3c8);
    box-shadow:
        0 0 0 1px rgba(17, 17, 17, 0.16),
        0 5px 12px rgba(0, 0, 0, 0.12);
}

.mobile-shop-detail-modal .mobile-shop-variant-color-select-row select {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 14px;
    font-weight: 850;
    outline: 0;
}

.mobile-shop-detail-checkout-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: var(--mobile-shop-muted);
    font-size: 11px;
    font-weight: 560;
}

.mobile-shop-detail-checkout-note i {
    color: var(--mobile-shop-subtle);
    font-size: 12px;
}

.mobile-shop-detail-reviews {
    margin-top: 14px;
    padding-top: 0;
    border-top: 1px solid var(--mobile-shop-border);
    display: grid;
    gap: 10px;
    border-top: 0;
}

.mobile-shop-detail-reviews-loading {
    font-size: 12px;
    color: var(--mobile-shop-muted);
    font-weight: 760;
}

.mobile-shop-detail-purchase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 11px;
    margin-top: 13px;
    padding: 11px 0 0;
    border: 0;
    border-top: 1px solid var(--mobile-shop-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.mobile-shop-detail-price-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.mobile-shop-detail-price-row span {
    display: block;
    color: var(--mobile-shop-subtle);
    font-size: 9px;
    font-weight: 720;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mobile-shop-detail-price-row strong {
    color: var(--mobile-shop-text);
    font-size: 24px;
    line-height: 1;
    font-weight: 760;
}

.mobile-shop-detail-stock {
    color: var(--mobile-shop-muted);
    font-size: 11px;
    font-weight: 560;
    text-align: right;
}

.mobile-shop-detail-actions {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 9px;
}

.mobile-shop-detail-add {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mobile-shop-text) 12%, transparent);
    background: var(--mobile-shop-button-bg);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-add:not(:disabled) {
    background: var(--mobile-shop-text) !important;
    border-color: var(--mobile-shop-text) !important;
    color: var(--mobile-shop-bg) !important;
    -webkit-text-fill-color: var(--mobile-shop-bg) !important;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-add:not(:disabled),
html body .mobile-shop-detail-modal .mobile-shop-detail-add:not(:disabled) * {
    color: var(--mobile-shop-bg) !important;
    -webkit-text-fill-color: var(--mobile-shop-bg) !important;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-titlebar {
    font-weight: 600 !important;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-meta,
html body .mobile-shop-detail-modal .mobile-shop-detail-ticket-info span,
html body .mobile-shop-detail-modal .mobile-shop-detail-price-row span {
    font-weight: 650 !important;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-body h2 {
    font-weight: 700 !important;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-description,
html body .mobile-shop-detail-modal .mobile-shop-detail-checkout-note,
html body .mobile-shop-detail-modal .mobile-shop-detail-stock {
    font-weight: 450 !important;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-ticket-info strong {
    font-weight: 600 !important;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-price-row strong {
    font-weight: 720 !important;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-add,
html body .mobile-shop-detail-modal .mobile-shop-detail-review-button {
    font-weight: 650 !important;
}

html body .mobile-shop-detail-modal .mobile-shop-detail-review-empty {
    font-weight: 500 !important;
}

.mobile-shop-detail-add:disabled {
    background: var(--mobile-shop-button-disabled);
    color: var(--mobile-shop-subtle);
    -webkit-text-fill-color: var(--mobile-shop-subtle);
    border-color: var(--mobile-shop-border);
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-shell {
    padding: 8px 0 calc(18px + env(safe-area-inset-bottom, 0px));
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-header {
    padding: 0 18px;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-media {
    aspect-ratio: 1.72 / 1;
    min-height: 198px;
    max-height: min(29dvh, 242px);
    border-radius: 0;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-body {
    display: grid;
    gap: 0;
    padding: 23px 22px 0;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-meta {
    justify-content: flex-start;
    margin: 0;
    color: var(--mobile-shop-text);
    color: var(--mobile-shop-muted);
    font-size: 9px;
    font-weight: 720 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-body h2 {
    max-width: 11em;
    margin: 5px 0 0;
    font-size: clamp(28px, 7.4vw, 34px);
    line-height: 1.02;
    font-weight: 650 !important;
    letter-spacing: -0.035em !important;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-description {
    margin: 9px 0 0;
    max-width: 30rem;
    color: var(--mobile-shop-muted);
    font-size: 14px;
    line-height: 1.45;
    font-weight: 450 !important;
}

.mobile-shop-ticket-kicker {
    color: var(--mobile-shop-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em !important;
}

.mobile-shop-ticket-kicker span {
    display: inline-block;
    margin: 0 4px;
    color: var(--mobile-shop-subtle);
}

.mobile-shop-ticket-meta-card {
    display: grid;
    gap: 14px;
    margin-top: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.mobile-shop-ticket-meta-primary,
.mobile-shop-ticket-meta-grid span {
    min-width: 0;
}

.mobile-shop-ticket-meta-primary {
    display: grid;
    gap: 4px;
}

.mobile-shop-ticket-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mobile-shop-ticket-meta-grid div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.mobile-shop-ticket-meta-primary span,
.mobile-shop-ticket-meta-grid span {
    color: var(--mobile-shop-muted);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.065em !important;
}

.mobile-shop-ticket-meta-primary strong,
.mobile-shop-ticket-meta-grid strong {
    min-width: 0;
    color: var(--mobile-shop-text);
    font-size: 14px;
    font-weight: 560;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mobile-shop-ticket-meta-primary strong {
    font-size: 16px;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-checkout-note {
    justify-content: center;
    margin: 0;
    color: var(--mobile-shop-muted);
    font-size: 11px;
    font-weight: 520 !important;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-checkout-note i {
    color: var(--mobile-shop-muted);
    font-size: 11px;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-purchase {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px 18px;
    margin-top: 24px;
    padding: 19px 0 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--mobile-shop-text) 10%, transparent);
    border-radius: 0;
    background: transparent;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-price-row {
    align-items: center;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-price-row span {
    margin-bottom: 5px;
    font-size: 9px;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-price-row strong {
    font-size: 27px;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-stock {
    max-width: 46%;
    color: var(--mobile-shop-text);
    font-size: 12px;
    font-weight: 650 !important;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-actions {
    grid-template-columns: 1fr;
    gap: 0;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-add {
    min-height: 50px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 620 !important;
}

.mobile-shop-detail-modal.is-ticket-detail .mobile-shop-detail-checkout-note {
    grid-column: 2;
    justify-self: center;
}

[data-theme="light"] .mobile-shop-detail-media,
[data-theme="light-accent"] .mobile-shop-detail-media {
    border-color: transparent;
    background: color-mix(in srgb, var(--mobile-shop-bg) 90%, var(--mobile-shop-card-soft));
    box-shadow: none;
}

[data-theme="light"] .mobile-shop-detail-media img,
[data-theme="light"] .mobile-shop-detail-media video,
[data-theme="light-accent"] .mobile-shop-detail-media img,
[data-theme="light-accent"] .mobile-shop-detail-media video {
    filter: none;
}

@keyframes mobileShopDetailIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ticket View is intentionally its own surface, not a product-detail variation. */
.mobile-shop-ticket-view {
    background: #fff;
    color: #171714;
    overflow: hidden;
}

.mobile-shop-ticket-stage {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.mobile-shop-ticket-stage::-webkit-scrollbar {
    display: none;
}

.mobile-shop-ticket-hero {
    position: relative;
    width: calc(100% - 28px);
    min-height: min(42dvh, 344px);
    margin: 0 14px;
    border-radius: 20px;
    overflow: hidden;
    background: #26251f;
    color: #fff;
}

.mobile-shop-ticket-hero > img,
.mobile-shop-ticket-hero > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.82) contrast(1.04);
}

.mobile-shop-ticket-hero-empty {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 25%, #756f5f, #23221e 72%);
}

.mobile-shop-ticket-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .34), transparent 34%),
        linear-gradient(0deg, rgba(0, 0, 0, .72), transparent 58%);
    pointer-events: none;
}

.mobile-shop-ticket-nav {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 14px;
    background: #fff;
    color: #171714;
}

.mobile-shop-ticket-nav span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.mobile-shop-ticket-nav button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(23, 23, 20, .16);
    border-radius: 50%;
    background: #fff;
    color: #171714;
    -webkit-text-fill-color: #171714;
}

.mobile-shop-ticket-hero-copy {
    padding: 22px 22px 0;
    background: #fff;
    color: #171714;
}

.mobile-shop-ticket-edition {
    display: block;
    margin-bottom: 9px;
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .12em !important;
    color: #706e64;
    -webkit-text-fill-color: #706e64;
}

.mobile-shop-ticket-hero-copy h2 {
    max-width: 16em;
    margin: 0;
    color: #171714;
    -webkit-text-fill-color: #171714;
    font-family: inherit !important;
    font-size: clamp(29px, 8.2vw, 34px);
    font-weight: 700 !important;
    line-height: 1.06;
    letter-spacing: -.025em !important;
    text-wrap: balance;
}

.mobile-shop-ticket-story {
    padding: 18px 22px 128px;
    background: #fff;
}

.mobile-shop-ticket-deck {
    max-width: 30ch;
    margin: 0 0 28px;
    color: #47463f;
    font-size: 16px;
    font-weight: 430;
    line-height: 1.5;
}

.mobile-shop-ticket-place {
    display: grid;
    gap: 8px;
    padding: 20px 0 22px;
    border-top: 1px solid rgba(23, 23, 20, .2);
}

.mobile-shop-ticket-rule-label,
.mobile-shop-ticket-notes span,
.mobile-shop-ticket-price span {
    color: #706e64;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .1em !important;
}

.mobile-shop-ticket-place strong {
    max-width: 20ch;
    color: #171714;
    font-family: inherit !important;
    font-size: 23px;
    font-weight: 680;
    line-height: 1.12;
}

.mobile-shop-ticket-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 0 0 23px;
}

.mobile-shop-ticket-notes div {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 6px;
}

.mobile-shop-ticket-notes strong {
    color: #24231f;
    font-size: 13px;
    font-weight: 560;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mobile-shop-ticket-story blockquote {
    margin: 0;
    padding: 19px 0 0;
    border-top: 1px solid rgba(23, 23, 20, .2);
    color: #6b695f;
    font-family: inherit !important;
    font-size: 14px;
    font-style: italic;
    line-height: 1.4;
}

.mobile-shop-ticket-dock {
    position: sticky;
    z-index: 4;
    bottom: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(23, 23, 20, .12);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.mobile-shop-ticket-price {
    display: grid;
    gap: 4px;
}

.mobile-shop-ticket-price strong {
    color: #171714;
    font-family: inherit !important;
    font-size: 25px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.025em !important;
}

.mobile-shop-ticket-buy {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 19px;
    border: 0;
    border-radius: 14px;
    background: #1c1c18;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 14px;
    font-weight: 620;
}

.mobile-shop-ticket-buy:disabled {
    background: #b4b1a8;
    color: #efede7;
    -webkit-text-fill-color: #efede7;
}

html body .mobile-shop-ticket-view .mobile-shop-ticket-buy:not(:disabled) {
    background: #1c1c18 !important;
    border-color: #1c1c18 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
}

html body .mobile-shop-ticket-view .mobile-shop-ticket-buy:not(:disabled) * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* Premium digital and membership releases use an editorial reader-like surface. */
.mobile-shop-release-view {
    background: #fff;
    color: #171714;
    overflow: hidden;
}

.mobile-shop-release-stage {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.mobile-shop-release-stage::-webkit-scrollbar {
    display: none;
}

.mobile-shop-release-nav {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 14px;
}

.mobile-shop-release-nav > span {
    overflow: hidden;
    color: #34332e;
    -webkit-text-fill-color: #34332e;
    font-size: 11px;
    font-weight: 620;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-release-nav button {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(23, 23, 20, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .48);
    color: #171714;
    -webkit-text-fill-color: #171714;
    box-shadow: none;
}

.mobile-shop-release-art {
    position: relative;
    width: calc(100% - 44px);
    height: min(36dvh, 292px);
    min-height: 248px;
    margin: 2px 22px 0;
    border-radius: 22px;
    overflow: hidden;
    background: #23221e;
    box-shadow: 0 12px 30px rgba(32, 29, 22, .1);
}

.mobile-shop-release-art > img,
.mobile-shop-release-art > video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.78) contrast(1.04);
}

.mobile-shop-release-art::after {
    content: none;
}

.mobile-shop-release-art-empty {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 20%, #777260, #23221e 70%);
}

.mobile-shop-release-art-empty span {
    color: rgba(255, 255, 255, .82);
    font-family: inherit !important;
    font-size: 42px;
    letter-spacing: -.04em !important;
}

.mobile-shop-release-number {
    display: none;
}

.mobile-shop-release-copy {
    padding: 23px 22px 126px;
}

.mobile-shop-release-kicker {
    display: block;
    color: #737066;
    -webkit-text-fill-color: #737066;
    font-size: 9px;
    font-weight: 680;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .11em !important;
}

.mobile-shop-release-copy h2 {
    max-width: 10em;
    margin: 8px 0 0;
    color: #171714;
    -webkit-text-fill-color: #171714;
    font-family: inherit !important;
    font-size: clamp(28px, 8vw, 32px);
    font-weight: 700 !important;
    line-height: 1.05;
    letter-spacing: -.025em !important;
    text-wrap: balance;
}

.mobile-shop-release-deck {
    max-width: 33ch;
    margin: 12px 0 0;
    color: #504e47;
    -webkit-text-fill-color: #504e47;
    font-size: 14px;
    font-weight: 430;
    line-height: 1.48;
}

.mobile-shop-release-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 22px;
    padding: 18px 0;
    border-top: 1px solid rgba(23, 23, 20, .18);
    border-bottom: 1px solid rgba(23, 23, 20, .18);
}

.mobile-shop-release-facts div {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.mobile-shop-release-facts span,
.mobile-shop-release-price span {
    color: #77746b;
    -webkit-text-fill-color: #77746b;
    font-size: 9px;
    font-weight: 650;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .09em !important;
}

.mobile-shop-release-facts strong {
    color: #24231f;
    -webkit-text-fill-color: #24231f;
    font-size: 13px;
    font-weight: 560;
    line-height: 1.3;
}

.mobile-shop-release-dock {
    position: sticky;
    z-index: 4;
    bottom: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(23, 23, 20, .12);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.mobile-shop-release-price {
    display: grid;
    gap: 4px;
}

.mobile-shop-release-price strong {
    color: #171714;
    -webkit-text-fill-color: #171714;
    font-family: inherit !important;
    font-size: 24px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.mobile-shop-release-buy,
.mobile-shop-release-owner-actions button {
    min-height: 52px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 620;
}

.mobile-shop-release-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 18px;
    border: 1px solid #171714;
    background: #171714;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.mobile-shop-release-buy:disabled {
    border-color: #b4b0a6;
    background: #b4b0a6;
    color: #eeece6;
    -webkit-text-fill-color: #eeece6;
}

.mobile-shop-release-owner-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    gap: 8px;
}

.mobile-shop-release-owner-actions button {
    border: 1px solid rgba(23, 23, 20, .16);
    background: rgba(255, 255, 255, .55);
    color: #171714;
    -webkit-text-fill-color: #171714;
}

.mobile-shop-release-owner-actions button:first-child {
    background: #171714;
    border-color: #171714;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.mobile-shop-release-view.is-subscription-release {
    background: #fff;
}

.mobile-shop-release-view.is-subscription-release .mobile-shop-release-dock {
    background: rgba(255, 255, 255, .94);
}

/* Digital detail sections: what's inside, specs, license. Reads the fields the
   owner saved; matches the release-view palette. */
.mobile-shop-release-section {
    margin-top: 26px;
}

.mobile-shop-release-section-label {
    display: block;
    color: #a8a8ad;
    -webkit-text-fill-color: #a8a8ad;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.mobile-shop-release-files {
    margin-top: 8px;
}

.mobile-shop-release-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(23, 23, 20, 0.10);
}

.mobile-shop-release-file-ext {
    flex: none;
    width: 34px;
    height: 30px;
    border-radius: 8px;
    background: rgba(23, 23, 20, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #6e6e73;
    -webkit-text-fill-color: #6e6e73;
}

.mobile-shop-release-file-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: #24231f;
    -webkit-text-fill-color: #24231f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-shop-release-file-size {
    flex: none;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 9.5px;
    color: #a8a8ad;
    -webkit-text-fill-color: #a8a8ad;
}

.mobile-shop-release-specs {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mobile-shop-release-spec {
    border: 1px solid rgba(23, 23, 20, 0.12);
    border-radius: 12px;
    padding: 12px 13px;
    display: grid;
    gap: 5px;
}

.mobile-shop-release-spec span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    color: #a8a8ad;
    -webkit-text-fill-color: #a8a8ad;
}

.mobile-shop-release-spec strong {
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #24231f;
    -webkit-text-fill-color: #24231f;
}

.mobile-shop-release-license {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mobile-shop-release-license-line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6e6e73;
    -webkit-text-fill-color: #6e6e73;
    letter-spacing: -0.05px;
}

.mobile-shop-release-license-dot {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 7px;
    background: #18a957;
}

.mobile-shop-release-license-line.is-restricted .mobile-shop-release-license-dot {
    background: #c8102e;
}

/* ------------------------------------------------- the desktop Shop face
   Merch, as desktop /<T>/shop opens it: the picture on the app's colour,
   the condensed name, the price in the display face, rounded option chips
   and a black pill to add it. Id-scoped: the theme's blanket sweeps win
   over this sheet's class rules otherwise. */
html body #shop-item-detail-modal .mobile-shop-detail-media {
    margin: 10px 12px 0 !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: var(--pc-btn, var(--primary-color, #0e0e0e)) !important;
}
html body #shop-item-detail-modal .mobile-shop-detail-body h2 {
    font-family: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif !important;
    font-stretch: 118% !important;
    font-weight: 900 !important;
    font-size: 34px !important;
    line-height: 0.98 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
}
html body #shop-item-detail-modal .mobile-shop-detail-price-row strong {
    font-family: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif !important;
    font-weight: 900 !important;
}
html body #shop-item-detail-modal .mobile-shop-detail-add {
    height: 54px !important;
    border-radius: 27px !important;
    font-weight: 800 !important;
}
html body #shop-item-detail-modal .mobile-shop-detail-icon-btn { border-radius: 27px !important; }
html body #shop-item-detail-modal [class*="variant"] button,
html body #shop-item-detail-modal [class*="size"] button { border-radius: 20px !important; }

/* ------------------------------------------------------- #shop-item-sheet
   One item sheet for menu, merch, digital and tickets, laid out like the
   sheet desktop /<T>/shop opens: picture, kind, name, price, words, the
   choices (chips, "What you get", "Pickup at", radio tier cards), then a
   stepper beside an app-colour button. Doubled id so the theme's blanket
   sweeps lose; role-named tokens so page colour can twin them. */
#shop-item-sheet#shop-item-sheet {
    --sis-paper: #ffffff;
    --sis-ink: #0b0b0c;
    --sis-text-dim: #6b6b70;
    --sis-line: #e7e7ea;
    --sis-card-bg: #ffffff;
    --sis-brand: var(--pc-btn, var(--primary-color, #0e0e0e));
    --sis-on-brand: var(--pc-on-btn, #ffffff);
    --sis-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --sis-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
    position: fixed !important;
    inset: 0 !important;
    z-index: 10060 !important;
    display: flex !important;
    flex-direction: column !important;
    background: var(--sis-paper) !important;
    color: var(--sis-ink) !important;
    -webkit-text-fill-color: currentColor;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
    animation: sis-rise .22s ease-out;
}
@keyframes sis-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
html[data-theme="dark"] body #shop-item-sheet#shop-item-sheet {
    --sis-paper: #0b0b0d;
    --sis-ink: #f4f4f5;
    --sis-text-dim: #9a9aa0;
    --sis-line: #2a2a2f;
    --sis-card-bg: #0b0b0d;
}
#shop-item-sheet#shop-item-sheet * { box-sizing: border-box; -webkit-text-fill-color: currentColor; }
#shop-item-sheet#shop-item-sheet .sis-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: 16px;
}
/* Keep the entire product gallery's scroll viewport below the status bar,
   including tall photos and every image reached by swiping. */
#shop-item-sheet#shop-item-sheet:not(.is-owner) .sis-scroll {
    margin-top: calc(env(safe-area-inset-top, 0px) + 12px);
}
#shop-item-sheet#shop-item-sheet .sis-bar {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    right: 16px;
    z-index: 3;
}
#shop-item-sheet#shop-item-sheet .sis-x {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 0 !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #0b0b0c !important;
    font-size: 15px;
    display: grid; place-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
#shop-item-sheet#shop-item-sheet .sis-pic {
    position: relative;
    aspect-ratio: 1 / 1;
    max-height: 56vh;
    width: 100%;
    background: var(--sis-brand) !important;
    overflow: hidden;
    display: grid; place-items: center;
}
#shop-item-sheet#shop-item-sheet .sis-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
#shop-item-sheet#shop-item-sheet.is-merch .sis-pic img,
#shop-item-sheet#shop-item-sheet.is-digital .sis-pic img { object-fit: contain; background: #fff; }
#shop-item-sheet#shop-item-sheet .sis-pic.is-dark { background: #0b0b0c !important; aspect-ratio: 4 / 5; }
/* The picture shows whole: the box takes the picture's own shape, capped
   so the name and price stay on screen. Tickets keep their flyer box. */
#shop-item-sheet#shop-item-sheet:not(.is-ticket) .sis-pic:has(img) { aspect-ratio: auto; max-height: none; display: block; background: #fff !important; }
#shop-item-sheet#shop-item-sheet:not(.is-ticket) .sis-pic img { width: 100%; height: auto; max-height: 62vh; object-fit: contain; background: #fff; }
#shop-item-sheet#shop-item-sheet .sis-pic__none {
    font-family: var(--sis-display); font-weight: 900; font-size: 96px;
    color: var(--sis-on-brand) !important;
}
#shop-item-sheet#shop-item-sheet .sis-flyer {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 64px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0)) !important;
    color: #fff !important;
}
#shop-item-sheet#shop-item-sheet .sis-flyer__date {
    font-family: var(--sis-mono); font-size: 11px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
}
#shop-item-sheet#shop-item-sheet .sis-flyer__name {
    font-family: var(--sis-display); font-stretch: 85%; font-weight: 900;
    font-size: 30px; line-height: 1; letter-spacing: -.02em;
    text-transform: uppercase; margin-top: 6px;
}
#shop-item-sheet#shop-item-sheet .sis-body { padding: 22px 20px 0; }
#shop-item-sheet#shop-item-sheet .sis-kicker {
    display: block;
    font-family: var(--sis-mono); font-size: 11px; font-weight: 700;
    letter-spacing: .18em; color: var(--sis-text-dim) !important;
}
#shop-item-sheet#shop-item-sheet .sis-name {
    font-family: var(--sis-display); font-stretch: 118%; font-weight: 900;
    font-size: 34px; line-height: .98; letter-spacing: -.03em;
    text-transform: uppercase; margin-top: 10px;
    overflow-wrap: anywhere;
}
#shop-item-sheet#shop-item-sheet .sis-price {
    font-family: var(--sis-display); font-weight: 800; font-size: 22px; margin-top: 12px;
}
#shop-item-sheet#shop-item-sheet .sis-about {
    font-size: 15px; line-height: 1.5; color: var(--sis-text-dim) !important; margin-top: 14px;
    outline: none;
}
#shop-item-sheet#shop-item-sheet .sis-about[contenteditable="true"] { border-bottom: 1px dashed var(--sis-line); color: var(--sis-ink) !important; margin-top: 6px; }
#shop-item-sheet#shop-item-sheet .sis-note { font-size: 13px; color: var(--sis-text-dim) !important; margin-top: 6px; }
#shop-item-sheet#shop-item-sheet .sis-opt { margin-top: 22px; }
#shop-item-sheet#shop-item-sheet .sis-label {
    display: block; font-size: 14px; font-weight: 700; margin: 22px 0 10px;
}
#shop-item-sheet#shop-item-sheet .sis-opt .sis-label { margin-top: 0; }
#shop-item-sheet#shop-item-sheet .sis-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#shop-item-sheet#shop-item-sheet .sis-chip {
    min-width: 52px; height: 42px; padding: 0 16px;
    border-radius: 21px !important;
    border: 1.5px solid var(--sis-line) !important;
    background: var(--sis-card-bg) !important;
    color: var(--sis-ink) !important;
    font-size: 14px; font-weight: 700;
}
#shop-item-sheet#shop-item-sheet .sis-chip[aria-pressed="true"] {
    background: var(--sis-ink) !important; border-color: var(--sis-ink) !important; color: var(--sis-paper) !important;
}
#shop-item-sheet#shop-item-sheet .sis-files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sis-line); }
#shop-item-sheet#shop-item-sheet .sis-files li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--sis-line);
    font-size: 14px; font-weight: 600;
}
#shop-item-sheet#shop-item-sheet .sis-files small { font-family: var(--sis-mono); font-size: 11px; color: var(--sis-text-dim) !important; }
#shop-item-sheet#shop-item-sheet .sis-facts {
    display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; align-items: baseline;
}
#shop-item-sheet#shop-item-sheet .sis-facts small {
    font-family: var(--sis-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .16em; color: var(--sis-text-dim) !important;
}
#shop-item-sheet#shop-item-sheet .sis-facts b { font-size: 15px; font-weight: 600; }
#shop-item-sheet#shop-item-sheet .sis-tiers { display: grid; gap: 8px; }
#shop-item-sheet#shop-item-sheet .sis-tier {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 15px 16px; border-radius: 16px !important;
    border: 1.5px solid var(--sis-line) !important;
    background: var(--sis-card-bg) !important; color: var(--sis-ink) !important;
}
#shop-item-sheet#shop-item-sheet .sis-tier[aria-checked="true"] {
    background: var(--sis-ink) !important; border-color: var(--sis-ink) !important; color: var(--sis-paper) !important;
}
#shop-item-sheet#shop-item-sheet .sis-tier__radio {
    flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid currentColor; position: relative;
}
#shop-item-sheet#shop-item-sheet .sis-tier[aria-checked="true"] .sis-tier__radio::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor;
}
#shop-item-sheet#shop-item-sheet .sis-tier__words { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
#shop-item-sheet#shop-item-sheet .sis-tier__words b { font-size: 16px; font-weight: 700; }
#shop-item-sheet#shop-item-sheet .sis-tier__words small { font-size: 12.5px; line-height: 1.35; opacity: .72; }
#shop-item-sheet#shop-item-sheet .sis-tier__price { font-size: 17px; font-weight: 800; }
#shop-item-sheet#shop-item-sheet .sis-dock {
    flex: 0 0 auto;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: var(--sis-paper) !important;
    border-top: 1px solid var(--sis-line);
}
#shop-item-sheet#shop-item-sheet .sis-dock-variants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
#shop-item-sheet#shop-item-sheet .sis-dock-variant {
    display: grid;
    gap: 5px;
    min-width: 0;
    position: relative;
    color: var(--sis-ink);
}
#shop-item-sheet#shop-item-sheet .sis-dock-variant span {
    font-size: 12px;
    font-weight: 700;
}
#shop-item-sheet#shop-item-sheet .sis-dock-variant select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 36px 0 14px;
    border: 1px solid rgba(110, 115, 130, .24) !important;
    border-radius: 16px;
    background: rgba(255, 255, 255, .52) !important;
    color: var(--sis-ink) !important;
    -webkit-appearance: none; appearance: none;
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    backdrop-filter: blur(16px) saturate(1.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 5px 18px rgba(20, 24, 36, .06);
    font: inherit;
    font-size: 16px;
}
#shop-item-sheet#shop-item-sheet .sis-dock-variant::after {
    content: ''; position: absolute; right: 17px; bottom: 18px; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); pointer-events: none;
}
#shop-item-sheet#shop-item-sheet .sis-dock-variant select:focus-visible {
    outline: 2px solid var(--sis-brand); outline-offset: 2px;
}
html[data-theme="dark"] body #shop-item-sheet#shop-item-sheet .sis-dock-variant select {
    background: rgba(255, 255, 255, .10) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 5px 18px rgba(0, 0, 0, .12);
}
#shop-item-sheet#shop-item-sheet .sis-buy { display: flex; gap: 10px; align-items: stretch; }
#shop-item-sheet#shop-item-sheet .sis-qty {
    flex: 0 0 auto; display: flex; align-items: center;
    height: 54px; border-radius: 27px; border: 1.5px solid var(--sis-line);
    background: var(--sis-card-bg) !important;
}
#shop-item-sheet#shop-item-sheet .sis-qty[hidden] { display: none !important; }
#shop-item-sheet#shop-item-sheet .sis-qty button {
    width: 42px; height: 100%; border: 0 !important; background: transparent !important;
    color: var(--sis-ink) !important; font-size: 20px; font-weight: 500;
}
#shop-item-sheet#shop-item-sheet .sis-qty button:disabled { opacity: .3; }
#shop-item-sheet#shop-item-sheet .sis-qty span { min-width: 20px; text-align: center; font-weight: 700; font-size: 16px; }
#shop-item-sheet#shop-item-sheet .sis-cta {
    flex: 1 1 auto; height: 54px; border-radius: 27px !important; border: 0 !important;
    background: var(--sis-brand) !important; color: var(--sis-on-brand) !important;
    font-size: 16px; font-weight: 800; letter-spacing: -.01em;
}
#shop-item-sheet#shop-item-sheet .sis-cta:disabled { opacity: .45; }
#shop-item-sheet#shop-item-sheet .sis-del {
    flex: 0 0 54px; height: 54px; border-radius: 27px !important;
    border: 1.5px solid var(--sis-line) !important; background: var(--sis-card-bg) !important;
    color: var(--sis-ink) !important; font-size: 18px;
}
#shop-item-sheet#shop-item-sheet .sis-fine { font-size: 12px; color: var(--sis-text-dim) !important; margin-top: 10px; text-align: center; }
body:has(#shop-item-sheet) #bottom-nav { visibility: hidden !important; }
/* The white strip under the shop pill (body::after, z 240019) would paint
   over the dock. */
html body:has(#shop-item-sheet)::after { display: none !important; }
/* The theme sweeps paint text black and swap the face; the chosen tier's
   words follow the card, and the display lines keep desktop's face. */
#shop-item-sheet#shop-item-sheet .sis-tier *,
#shop-item-sheet#shop-item-sheet .sis-chip *,
#shop-item-sheet#shop-item-sheet .sis-cta * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
#shop-item-sheet#shop-item-sheet .sis-name,
#shop-item-sheet#shop-item-sheet .sis-price,
#shop-item-sheet#shop-item-sheet .sis-flyer__name,
#shop-item-sheet#shop-item-sheet .sis-pic__none { font-family: var(--sis-display) !important; }
#shop-item-sheet#shop-item-sheet .sis-kicker,
#shop-item-sheet#shop-item-sheet .sis-facts small,
#shop-item-sheet#shop-item-sheet .sis-flyer__date,
#shop-item-sheet#shop-item-sheet .sis-files small { font-family: var(--sis-mono) !important; }
#shop-item-sheet#shop-item-sheet.is-ticket .sis-about { margin: 0 0 20px; }
#shop-item-sheet#shop-item-sheet .sis-flyer, #shop-item-sheet#shop-item-sheet .sis-flyer * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
#shop-item-sheet#shop-item-sheet button { box-shadow: none !important; min-height: 0 !important; margin: 0 !important; }
#shop-item-sheet#shop-item-sheet .sis-cta { -webkit-text-fill-color: var(--sis-on-brand) !important; }
#shop-item-sheet#shop-item-sheet .sis-qty button { -webkit-text-fill-color: var(--sis-ink) !important; border-radius: 27px !important; }
#shop-item-sheet#shop-item-sheet .sis-chip,
#shop-item-sheet#shop-item-sheet .sis-tier,
#shop-item-sheet#shop-item-sheet .sis-del { -webkit-text-fill-color: var(--sis-ink) !important; }
#shop-item-sheet#shop-item-sheet .sis-chip[aria-pressed="true"],
#shop-item-sheet#shop-item-sheet .sis-tier[aria-checked="true"] { -webkit-text-fill-color: var(--sis-paper) !important; }
#shop-item-sheet#shop-item-sheet .sis-x { -webkit-text-fill-color: #0b0b0c !important; }

/* Owner management view: tools and details, independent of customer styling. */
html body #shop-item-sheet#shop-item-sheet.is-owner { --sis-paper: #fff; --sis-ink: #202124; --sis-text-dim: #5f6368; background: #fff !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner * { font-family: Inter, Arial, sans-serif !important; letter-spacing: normal; text-transform: none; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-bar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; background: #fff !important; border-bottom: 1px solid #e8eaed; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-heading { font-size: 16px; font-weight: 650; color: #202124 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-x { position: static; width: 36px; height: 36px; background: #f1f3f4 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-pic { margin: 16px; border-radius: 16px; overflow: hidden; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-pic img { height: 220px; max-height: 28vh; width: 100%; object-fit: contain; background: #f8f9fa !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-body { padding: 0 20px 24px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-kicker { display: none; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-name { font-size: 22px; font-weight: 650; line-height: 1.3; margin-top: 0; color: #202124 !important; -webkit-text-fill-color: #202124 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-price { font-size: 20px; margin-top: 8px; color: #202124 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-about { margin: 10px 0 16px; font-size: 14px; line-height: 1.5; color: #5f6368 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-status { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-status span { padding: 5px 9px; background: #e6f4ea !important; border-radius: 8px; color: #137333 !important; -webkit-text-fill-color: #137333 !important; font-size: 12px; font-weight: 600; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-status span.is-unavailable { background: #f1f3f4 !important; color: #5f6368 !important; -webkit-text-fill-color: #5f6368 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-status small { font-size: 12px; color: #5f6368 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-tools { border: 1px solid #e8eaed; border-radius: 16px; overflow: hidden; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-tools button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: 0 !important; background: #fff !important; color: #202124 !important; -webkit-text-fill-color: #202124 !important; text-align: left; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-tools button + button { border-top: 1px solid #e8eaed; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-tools button span { display: grid; gap: 4px; flex: 1; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-tools b { font-size: 14px; font-weight: 600; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-tools small { font-size: 12px; color: #5f6368 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-dock { background: #fff !important; border-color: #e8eaed; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-cta { height: 48px; background: #202124 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-radius: 14px !important; font-size: 15px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-more { width: 48px; flex: 0 0 48px; border: 1px solid #dadce0; border-radius: 14px !important; background: #fff !important; color: #202124 !important; -webkit-text-fill-color: #202124 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-menu { margin-bottom: 12px; padding: 6px; border: 1px solid #e8eaed; border-radius: 14px; background: #fff !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-menu[hidden] { display: none !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-menu button { width: 100%; padding: 12px; border: 0; border-radius: 8px; background: #fff !important; color: #b3261e !important; -webkit-text-fill-color: #b3261e !important; font-size: 14px; text-align: left; }

html body #shop-item-sheet#shop-item-sheet.is-owner .sis-pic { width: calc(100% - 32px); }

/* A photograph-first owner sheet, with a native swipe gallery. */
#shop-item-sheet .sis-pic { position: relative; }
#shop-item-sheet .sis-gallery { display:flex; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
#shop-item-sheet .sis-gallery::-webkit-scrollbar { display:none; }
#shop-item-sheet .sis-gallery img { flex:0 0 100%; width:100%; min-width:100%; scroll-snap-align:center; object-fit:contain; }
#shop-item-sheet .sis-photo-count { position:absolute; bottom:12px; right:12px; background:rgba(255,255,255,.95); border:1px solid #e5e7eb; border-radius:20px; padding:5px 10px; font:500 12px Arial,sans-serif; color:#374151; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-bar { border-bottom:0; padding:12px 20px 4px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-pic { margin:8px 16px 16px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-heading { font-size:16px; font-weight:600; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-name { font-size:20px; letter-spacing:-.4px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-tools button { min-height:60px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-tools button > i:first-child { width:34px; height:34px; border-radius:10px; background:#f3f4f6; display:grid; place-items:center; color:#52525b; }
html body #addItemModal #shop-photo-editor { display:block; margin:14px 0; padding:16px; background:#fff; border:1px solid #e5e7eb; border-radius:16px; color:#111827; font-family:Inter,Arial,sans-serif; }
#shop-photo-editor > b { display:block; font-size:14px; }
#shop-photo-editor > small { display:block; font-size:12px; color:#6b7280; margin:6px 0 12px; }
#shop-photo-editor .shop-photo-list { display:flex; gap:10px; overflow-x:auto; }
#shop-photo-editor .shop-photo-list > div { position:relative; flex:0 0 88px; }
#shop-photo-editor img { width:88px; height:100px; object-fit:contain; border-radius:10px; background:#f5f5f5; }
#shop-photo-editor button { position:absolute; right:2px; top:2px; width:28px; height:28px; border:1px solid #ddd; border-radius:50%; background:white; color:#111; }
#shop-photo-editor .shop-photo-add { display:block; text-align:center; padding:12px; border:1px dashed #cbd5e1; border-radius:10px; margin-top:12px; font-size:14px; cursor:pointer; }
#shop-photo-editor input { display:none; }

/* Owner product workspace: section-based commerce administration. */
html body #shop-item-sheet#shop-item-sheet.is-owner { background:#f6f6f7 !important; padding-top:env(safe-area-inset-top, 0px); }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-scroll { padding-bottom:20px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-bar { top:0; right:auto; min-height:56px; display:grid; grid-template-columns:36px 1fr 36px; padding:10px 16px !important; border-bottom:1px solid #e4e4e7; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-heading { text-align:center; font-size:16px; font-weight:600; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-bar .sis-x,
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-bar .sis-more { width:36px; height:36px; border:0 !important; border-radius:9px !important; background:transparent !important; font-size:16px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-body { padding:18px 16px 8px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-summary { margin-bottom:18px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-summary-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:10px; letter-spacing:1px; font-weight:600; color:#71717a; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-stock { font-size:11px; letter-spacing:0; font-weight:500; background:#e2f1e8; color:#216141; border-radius:6px; padding:4px 8px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-stock.is-unavailable { background:#ececef; color:#71717a; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-summary h1 { margin:0; font-size:19px; line-height:1.4; font-weight:600; letter-spacing:-.4px; color:#18181b !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card { background:#fff !important; border:1px solid #e4e4e7 !important; border-radius:12px !important; padding:16px; box-shadow:0 1px 2px #18181b04; margin-bottom:12px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card h2 { margin:0; font-size:14px; font-weight:600; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card header button { border:0; background:transparent !important; color:#475569 !important; font-size:12px; font-weight:500; padding:4px 0; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-media .sis-pic { width:100%; margin:0; border-radius:8px; background:#f7f7f8 !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-media .sis-pic img { height:174px; max-height:none; object-fit:contain; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-media p { margin:10px 0 0; color:#71717a; font-size:11px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-thumbs { display:flex; gap:8px; overflow-x:auto; margin-top:12px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-thumbs button { flex:0 0 48px; width:48px; height:48px; padding:2px; border:1px solid #e4e4e7; border-radius:7px !important; background:#fafafa !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-thumbs button[aria-pressed="true"] { border:2px solid #27272a; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-thumbs img { width:100%; height:100%; object-fit:contain; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-thumbs .som-add-photo { border-style:dashed; color:#52525b; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 12px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics button { text-align:left; display:flex; flex-direction:column; gap:8px; color:#18181b !important; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics span { display:flex; justify-content:space-between; width:100%; font-size:12px; color:#52525b; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics span i { font-size:10px; color:#a1a1aa; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics strong { font-size:22px; font-weight:600; letter-spacing:-.5px; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics small { font-size:10px; color:#71717a; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-field-label { font-size:11px; color:#71717a; }
html body #shop-item-sheet#shop-item-sheet.is-owner .som-description p { font-size:13px; line-height:1.5; color:#3f3f46; margin:6px 0 0; font-weight:400; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-dock { position:relative; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-menu { position:absolute; right:16px; bottom:calc(100% + 8px); width:200px; box-shadow:0 8px 24px #0002; }
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-cta { border-radius:10px !important; font-weight:500; height:44px; }

/* Keep the owner's editing hierarchy legible with custom storefront fonts. */
html body #shop-item-sheet#shop-item-sheet.is-owner {
    padding-top: max(env(safe-area-inset-top, 0px), 12px);
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-summary h1,
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card h2,
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics strong,
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-heading {
    font-weight: 600 !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card p,
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card small,
html body #shop-item-sheet#shop-item-sheet.is-owner .som-field-label {
    font-weight: 400 !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card header button,
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics span,
html body #shop-item-sheet#shop-item-sheet.is-owner .som-stock,
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-cta {
    font-weight: 500 !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-thumbs .som-add-photo {
    background: transparent !important;
    font-size: 18px;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-owner-menu {
    position: fixed;
    top: calc(max(env(safe-area-inset-top, 0px), 12px) + 60px);
    bottom: auto;
    right: 16px;
    z-index: 5;
}

/* Consistent pill actions in the owner workspace. */
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-cta {
    border-radius: 999px !important;
    min-height: 48px;
    border: 0 !important;
    box-shadow: none !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card header button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px !important;
    border: 1px solid currentColor !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1.2;
    white-space: nowrap;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card {
    box-shadow: none !important;
}
html body:has(#mobile-product-creator) #pwa-install-banner { display:none!important; }

/* Product management: one surface, photo first, and simple edit rows. */
html body #shop-item-sheet#shop-item-sheet.is-owner {
    background: #fff !important;
    color: #171719 !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-scroll,
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-bar,
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-dock {
    background: #fff !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-bar {
    border-bottom: 1px solid #ededee !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-body {
    padding: 22px 18px 24px !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-summary {
    margin-bottom: 24px;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-summary-top {
    margin-bottom: 12px;
    color: #71717a !important;
    font-size: 11px;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent !important;
    color: #16804a !important;
    -webkit-text-fill-color: #16804a !important;
    font-size: 12px;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-stock::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-stock.is-unavailable {
    color: #71717a !important;
    -webkit-text-fill-color: #71717a !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-summary h1 {
    font-size: clamp(22px, 5.5vw, 27px);
    line-height: 1.18;
    font-weight: 650 !important;
    letter-spacing: -.025em;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card header {
    margin-bottom: 12px;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card h2 {
    font-size: 16px;
    color: #171719 !important;
    -webkit-text-fill-color: #171719 !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-card header button {
    min-height: 36px;
    padding: 4px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #3f4854 !important;
    -webkit-text-fill-color: #3f4854 !important;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-media {
    margin-bottom: 24px !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-media .som-main-photo {
    margin: 0 -18px;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-media .sis-pic {
    width: 100%;
    margin: 0;
    border-radius: 0;
    background: #fff !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-media .sis-pic img {
    width: 100%;
    height: clamp(230px, 35dvh, 380px);
    max-height: none;
    object-fit: contain;
    background: #fff !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-thumbs {
    gap: 8px;
    margin-top: 10px;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-thumbs button {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border: 1px solid #dedee1;
    border-radius: 7px !important;
    background: #fff !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics {
    gap: 0;
    margin: 0 0 24px;
    border-top: 1px solid #e7e7e9;
    border-bottom: 1px solid #e7e7e9;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics button {
    min-height: 110px;
    gap: 6px;
    padding: 18px 8px 18px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics button + button {
    padding-left: 18px !important;
    border-left: 1px solid #e7e7e9 !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics span {
    font-size: 13px;
    color: #52525b !important;
    -webkit-text-fill-color: #52525b !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics strong {
    font-size: 26px;
    font-weight: 650 !important;
    color: #171719 !important;
    -webkit-text-fill-color: #171719 !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-metrics small {
    font-size: 11px;
    color: #71717a !important;
    -webkit-text-fill-color: #71717a !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-description {
    padding-bottom: 12px !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-field-label {
    display: none;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .som-description p {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: #414149 !important;
    -webkit-text-fill-color: #414149 !important;
}
html body #shop-item-sheet#shop-item-sheet.is-owner .sis-dock {
    border-top: 1px solid #ededee !important;
}

.mobile-shop-product-form,
.mobile-shop-product-form * {
    box-sizing: border-box;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

.mobile-shop-product-form .fa,
.mobile-shop-product-form .fas,
.mobile-shop-product-form .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

.mobile-shop-product-form {
    position: fixed;
    top: var(--mobile-app-header-height, calc(env(safe-area-inset-top, 0px) + 116px));
    right: 0;
    bottom: var(--mobile-shop-bottom-nav-offset, calc(64px + env(safe-area-inset-bottom, 0px)));
    left: 0;
    z-index: 9000;
    background: var(--mobile-shop-bg);
    color: var(--mobile-shop-text);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-shop-product-form-shell {
    min-height: 100%;
    padding: 14px 14px calc(26px + env(safe-area-inset-bottom, 0px));
}

.mobile-shop-product-form-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 74px;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.mobile-shop-product-form-close {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--mobile-shop-border);
    background: var(--mobile-shop-button-bg);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-shop-product-form-title {
    min-width: 0;
    text-align: center;
}

.mobile-shop-product-form-title span {
    display: block;
    color: var(--mobile-shop-muted);
    font-size: 11px;
    font-weight: 760;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.mobile-shop-product-form-title h2 {
    margin: 0;
    color: var(--mobile-shop-text);
    font-size: 21px;
    line-height: 1;
    font-weight: 780;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-shop-product-form-save {
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid var(--mobile-shop-border);
    background: var(--mobile-shop-button-bg);
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    font-size: 13px;
    font-weight: 780;
}

.mobile-shop-product-form-media {
    position: relative;
    aspect-ratio: 1 / 1.02;
    border-radius: 10px;
    border: 1px solid var(--mobile-shop-border);
    background: var(--mobile-shop-card-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.mobile-shop-product-form-upload {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    color: var(--mobile-shop-text);
    -webkit-text-fill-color: var(--mobile-shop-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 720;
}

.mobile-shop-product-form-upload i {
    font-size: 25px;
}

.mobile-shop-product-form-file {
    display: none;
}

.mobile-shop-product-form-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.mobile-shop-product-form-media.has-preview img {
    display: block;
}

.mobile-shop-product-form-media.has-preview .mobile-shop-product-form-upload {
    inset: auto 12px 12px auto;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--mobile-shop-surface);
    border: 1px solid var(--mobile-shop-border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}

.mobile-shop-product-form-media.has-preview .mobile-shop-product-form-upload span {
    display: none;
}

.mobile-shop-product-form-grid {
    display: grid;
    gap: 13px;
}

.mobile-shop-product-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.mobile-shop-product-form-field {
    display: grid;
    gap: 7px;
}

.mobile-shop-product-form-field label {
    color: var(--mobile-shop-muted);
    font-size: 12px;
    font-weight: 760;
}

.mobile-shop-product-form-field input,
.mobile-shop-product-form-field textarea,
.mobile-shop-product-form-field select {
    width: 100%;
    border: 1px solid var(--mobile-shop-border);
    border-radius: 10px;
    background: var(--mobile-shop-card-bg);
    color: var(--mobile-shop-text);
    font-size: 15px;
    font-weight: 620;
    outline: none;
    box-shadow: none;
}

.mobile-shop-product-form-field input,
.mobile-shop-product-form-field select {
    height: 46px;
    padding: 0 13px;
}

.mobile-shop-product-form-field textarea {
    min-height: 104px;
    resize: vertical;
    padding: 13px;
    line-height: 1.4;
}

.mobile-shop-product-form-field input::placeholder,
.mobile-shop-product-form-field textarea::placeholder {
    color: var(--mobile-shop-subtle);
}

.mobile-shop-product-form-note {
    margin: 3px 0 0;
    color: var(--mobile-shop-subtle);
    font-size: 12px;
    line-height: 1.35;
}

/* Mobile Community extracted feed and room surface styles. */

:root {
    --community-bg: #000000;
    --community-surface: rgba(255, 255, 255, 0.045);
    --community-card: rgba(255, 255, 255, 0.06);
    --community-text: #ffffff;
    --community-muted: rgba(255, 255, 255, 0.62);
    --community-faint: rgba(255, 255, 255, 0.46);
    --community-border: rgba(255, 255, 255, 0.09);
    --community-raised-shadow: 0 18px 46px rgba(0, 0, 0, 0.20);
}

html[data-theme="light"] {
    --community-bg: #ffffff;
    --community-surface: #ffffff;
    --community-card: #ffffff;
    --community-text: #050505;
    --community-muted: rgba(5, 5, 5, 0.58);
    --community-faint: rgba(5, 5, 5, 0.42);
    --community-border: rgba(5, 5, 5, 0.10);
    --community-raised-shadow: 0 10px 24px rgba(5, 5, 5, 0.055);
}

html:has(body.light-theme),
body.light-theme {
    --community-bg: #ffffff;
    --community-surface: #ffffff;
    --community-card: #ffffff;
    --community-text: #050505;
    --community-muted: rgba(5, 5, 5, 0.58);
    --community-faint: rgba(5, 5, 5, 0.42);
    --community-border: rgba(5, 5, 5, 0.10);
    --community-raised-shadow: 0 10px 24px rgba(5, 5, 5, 0.055);
}

html[data-theme="light-accent"],
html:has(body.light-accent-theme),
body.light-accent-theme {
    --community-bg: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 5%, #ffffff 95%);
    --community-surface: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 6%, #ffffff 94%);
    --community-card: rgba(255, 255, 255, 0.88);
    --community-text: #050505;
    --community-muted: rgba(5, 5, 5, 0.62);
    --community-faint: rgba(5, 5, 5, 0.44);
    --community-border: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, rgba(5, 5, 5, 0.12));
    --community-raised-shadow: 0 14px 34px rgba(5, 5, 5, 0.07);
}

/* community-feed-base */
#community-main-area {
    display: none;
}

#community-feed-shell {
    display: none;
}

html body.community-active #community-main-area {
    display: block;
}

html body.community-active #community-feed-shell {
    display: block;
    padding: calc(var(--mobile-app-header-height, 116px) + 12px) 16px 12px;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--primary-color, #ff4d2e) 20%, transparent), transparent 36%),
        #000000;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
}

html body.community-active #arena-grid {
    padding-top: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 14px !important;
    background: #000000 !important;
}

.community-room-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.community-room-section-head h2 {
    margin: 0;
    color: var(--community-text);
    font-size: clamp(23px, 7vw, 34px);
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.community-room-section-head span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    color: var(--community-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.community-room-section-head i {
    color: var(--primary-color, #ff4d2e);
    font-size: 8px;
}

.community-room-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 14px;
    margin: 0 -2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.community-room-rail::-webkit-scrollbar {
    display: none;
}

.community-room-card {
    flex: 0 0 132px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 7px;
    padding: 12px 10px 10px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--community-text) 7%, transparent);
    background: var(--community-card);
    background-size: cover;
    background-position: center;
    color: var(--community-text);
    box-shadow: none;
    scroll-snap-align: start;
    overflow: hidden;
    position: relative;
}

.community-room-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--community-bg) 74%, transparent));
    pointer-events: none;
}

.community-room-card.is-active {
    border-color: color-mix(in srgb, var(--community-text) 20%, transparent);
    box-shadow: inset 0 -3px 0 var(--primary-color, #ff4d2e);
}

.community-room-card > * {
    position: relative;
    z-index: 1;
}

.community-room-icon {
    display: none !important;
}

.community-room-title {
    max-width: 100%;
    color: var(--community-text);
    font-size: 15px;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-room-count {
    color: var(--community-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.community-feed-modes {
    display: inline-flex;
    gap: 22px;
    margin-top: 2px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.community-feed-modes button {
    min-width: 0;
    min-height: 34px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--community-muted);
    box-shadow: none;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
    padding: 0;
}

.community-feed-modes button.is-active {
    background: transparent;
    color: var(--community-text);
    box-shadow: inset 0 -3px 0 var(--primary-color, #ff4d2e);
}

/* Flat feed rows, in the spirit of the virtual map post list: no card box, no
   shadow, no radius — just content separated by a hairline. The container was
   competing with the post; the post should be the only thing you see. */
html body.community-active #arena-grid .mobile-community-card {
    box-sizing: border-box !important;
    cursor: pointer !important;
    margin: 0 !important;
    max-width: 100% !important;
    padding: 18px 20px 16px !important;
    position: relative !important;
    transition: background 0.18s ease !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    box-shadow: none !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    overflow: visible !important;
}

/* Press feedback replaces the old raised-card affordance. */
html body.community-active #arena-grid .mobile-community-card:active {
    background: color-mix(in srgb, var(--community-text) 3.5%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-card:last-child {
    border-bottom: 0 !important;
}

/* The shape variants no longer need their own container treatment; they keep
   the same flat row so the feed reads as one continuous surface. */
html body.community-active #arena-grid .mobile-community-card.community-feed-hero,
html body.community-active #arena-grid .mobile-community-card.community-feed-media,
html body.community-active #arena-grid .mobile-community-card.community-feed-note,
html body.community-active #arena-grid .mobile-community-card.community-feed-essay,
html body.community-active #arena-grid .mobile-community-card.signal-short,
html body.community-active #arena-grid .mobile-community-card.signal-medium,
html body.community-active #arena-grid .mobile-community-card.signal-long {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-card > div:first-of-type {
    align-items: flex-start !important;
    margin-bottom: 12px !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    justify-content: flex-start !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Post copy is body text, not a headline. The old 30px/950 treatment turned
   every post into a billboard and forced the tall card around it. */
html body.community-active #arena-grid .mobile-community-card p {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html body.community-active #arena-grid .mobile-community-message {
    text-align: left !important;
    margin-bottom: 10px !important;
}

html body.community-active #arena-grid .mobile-community-link-preview {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    margin: 0 0 14px;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 14px;
    color: var(--community-text);
    text-decoration: none;
}
html body.community-active #arena-grid .mobile-community-link-preview > img {
    width: 38%;
    max-width: 160px;
    object-fit: cover;
}
html body.community-active #arena-grid .mobile-community-link-preview-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 12px;
}
html body.community-active #arena-grid .mobile-community-link-preview-copy small {
    opacity: 0.65;
    overflow-wrap: anywhere;
}
html body.community-active #arena-grid .mobile-community-link-preview-copy strong {
    font-size: 15px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* A link in a post body read as plain text: it inherited the body colour and
   only the browser's default underline set it apart, which is invisible at
   this weight. It takes the app's accent so it is recognisable as a link
   without becoming a button, and breaks anywhere so a long bare URL cannot
   push the card wider than the screen. */
html body.community-active #arena-grid .community-post-link,
html body #enter-modal .community-post-link,
html body .post-detail-page .community-post-link {
    color: #1d7fff !important;
    /* The page sets -webkit-text-fill-color: #000 !important on everything,
       and on WebKit the fill wins over color -- so setting only `color` left
       these black on an actual phone while looking fine in a desktop check.
       Both properties have to be stated. */
    -webkit-text-fill-color: #1d7fff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Dark mode: the same blue goes muddy on a dark ground, so it lifts. */
html[data-theme="dark"] body.community-active #arena-grid .community-post-link,
html[data-theme="dark"] body #enter-modal .community-post-link,
html[data-theme="dark"] body .post-detail-page .community-post-link,
html body:not([data-theme="light"]) #enter-modal .community-post-link {
    color: #5aa9ff !important;
    -webkit-text-fill-color: #5aa9ff !important;
}

html body.community-active #arena-grid .community-post-link:active,
html body #enter-modal .community-post-link:active,
html body .post-detail-page .community-post-link:active {
    opacity: 0.6;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    max-width: none !important;
    margin: 10px 0 12px !important;
    justify-content: flex-start !important;
}

/* The media is the frame — it does not need a bordered well around it. */
html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 0 !important;
}

/* Stills keep their own proportions; 16/9 with cover was slicing the top and
   bottom off every portrait photo. Capped so one tall image can't push the
   next post out of view in a mixed-author feed. */
html body.community-active #arena-grid .mobile-community-media-stage img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    max-height: 460px !important;
    border-radius: 20px !important;
    object-fit: contain !important;
    background: var(--community-surface) !important;
    border-color: var(--community-border) !important;
}

html body.community-active #arena-grid .mobile-community-media-stage video {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 420px !important;
    aspect-ratio: auto !important;
    border-radius: 20px !important;
    object-fit: contain !important;
    background: #000000 !important;
    border-color: var(--community-border) !important;
    pointer-events: auto !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p {
    font-size: clamp(19px, 5vw, 25px) !important;
    line-height: 1.18 !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: -2px auto 14px !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
    opacity: 0.58 !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-room-source i {
    font-size: 10px !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid [data-community-action="open-post"]:active {
    background: color-mix(in srgb, var(--community-text) 2%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-actions button:hover {
    background: color-mix(in srgb, var(--community-text) 6%, transparent) !important;
    color: var(--community-text) !important;
}

html body.community-active #arena-grid [data-community-action="post-menu"]:hover {
    opacity: 0.8 !important;
}

html body.community-active #arena-grid [data-community-action="delete-post"]:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

.community-post-menu-trigger {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    opacity: 0.44;
    padding: 4px 8px;
    transition: opacity 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.community-post-menu-trigger:hover {
    opacity: 0.82;
}

.community-post-menu-scrim {
    position: fixed;
    inset: 0;
    /* body.ai-active raises #bottom-nav to 240020, so the scrim and sheet
       must clear that or the nav paints over them and swallows Delete. */
    z-index: 240040;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.community-post-menu-scrim[hidden] {
    display: none !important;
}

.community-post-menu {
    position: fixed;
    top: auto;
    left: 14px;
    right: 14px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: auto;
    min-width: 0;
    z-index: 240050;
    overflow: hidden;
    border-radius: 18px;
    background: var(--community-card);
    border: 1px solid var(--community-border);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
    transform: none;
}

.community-post-action-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 240060;
    display: block;
    overflow: hidden;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: var(--community-card);
    border-top: 1px solid var(--community-border);
    box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.18);
}

.community-post-action-sheet[hidden] {
    display: none !important;
}

.community-post-action-sheet__handle {
    width: 38px;
    height: 4px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--community-text) 18%, transparent);
}

.community-post-menu-wrap {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 8;
}

.community-post-menu[hidden] {
    display: none !important;
}

.community-post-edit,
.community-post-delete {
    width: 100%;
    min-height: 52px;
    padding: 13px 16px;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--community-text);
    -webkit-text-fill-color: var(--community-text);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 14px;
}

.community-post-edit + .community-post-delete {
    margin-top: 4px;
}

.community-post-delete {
    color: #ef4444;
    -webkit-text-fill-color: #ef4444;
}

.community-post-edit {
    color: var(--community-text);
    -webkit-text-fill-color: var(--community-text);
}

.community-post-edit:hover {
    background: color-mix(in srgb, var(--community-text) 9%, transparent);
}

.community-post-delete:hover,
.community-comment-delete:hover {
    background: rgba(239, 68, 68, 0.10);
}

.community-detail-action {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

.community-detail-action i {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

.community-owner-sheet {
    position: fixed;
    inset: 0;
    /* #bottom-nav is pinned at 240020 !important; stay above it or the
       Cancel/Delete row renders underneath the nav and can't be tapped. */
    z-index: 240070;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.community-owner-sheet.is-open {
    display: flex;
}

.community-owner-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
}

.community-owner-sheet__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: calc(88vh - env(safe-area-inset-top, 0px));
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    background: var(--community-bg);
    border: 1px solid var(--community-border);
    box-shadow: 0 -22px 60px rgba(0, 0, 0, 0.26);
    color: var(--community-text);
    -webkit-text-fill-color: var(--community-text);
}

.community-owner-sheet__handle {
    width: 42px;
    height: 5px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--community-text) 18%, transparent);
}

.community-owner-sheet__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.community-owner-sheet__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.community-owner-sheet__head h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.community-owner-sheet__icon-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--community-text) 8%, transparent);
    color: var(--community-text);
    -webkit-text-fill-color: var(--community-text);
}

.community-owner-sheet__edit label {
    display: block;
    margin-bottom: 8px;
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Community owner sheet controls stay light; JS reapplies these inline because broad theme rules target every textarea/button. */
.community-owner-sheet__edit textarea {
    width: 100%;
    min-height: 148px;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 18px;
    padding: 14px;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    caret-color: #050505 !important;
    color-scheme: light !important;
    font: inherit;
    font-size: 16px;
    line-height: 1.35;
    outline: none;
    box-shadow: inset 0 0 0 9999px #ffffff !important;
}

.community-owner-sheet__edit textarea:focus {
    border-color: var(--primary-color, #ff4d2e);
}

.community-owner-sheet__delete {
    display: none;
}

.community-owner-sheet__delete p {
    margin: 0 0 18px;
    color: var(--community-text);
    -webkit-text-fill-color: var(--community-text);
    font-size: 17px;
    line-height: 1.35;
    font-weight: 850;
}

.community-owner-sheet__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.community-owner-sheet__secondary,
.community-owner-sheet__primary,
.community-owner-sheet__danger {
    min-height: 52px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 950;
    letter-spacing: 0;
}

.community-owner-sheet__secondary {
    background: color-mix(in srgb, var(--community-text) 8%, transparent);
    color: var(--community-text);
    -webkit-text-fill-color: var(--community-text);
}

.community-owner-sheet__primary {
    background: color-mix(in srgb, var(--primary-color, #ff4d2e) 88%, #ffffff 12%);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.community-owner-sheet__primary:disabled,
.community-owner-sheet__primary[disabled],
.community-owner-sheet__primary.is-disabled {
    background: rgba(15, 23, 42, 0.10) !important;
    color: rgba(15, 23, 42, 0.36) !important;
    -webkit-text-fill-color: rgba(15, 23, 42, 0.36) !important;
    opacity: 1 !important;
}

.community-owner-sheet__danger {
    display: none;
    background: #ef4444;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

.community-owner-sheet.is-deleting .community-owner-sheet__head h2 {
    display: none;
}

.community-owner-sheet.is-deleting .community-owner-sheet__edit,
.community-owner-sheet.is-deleting .community-owner-sheet__primary {
    display: none;
}

.community-owner-sheet.is-deleting .community-owner-sheet__delete,
.community-owner-sheet.is-deleting .community-owner-sheet__danger {
    display: block;
}

.community-owner-sheet.is-busy button,
.community-owner-sheet.is-busy textarea {
    pointer-events: none;
    opacity: 0.58;
}

html[data-theme^="light"] body.community-active .community-owner-sheet__panel,
body.light-theme.community-active .community-owner-sheet__panel,
body.light-accent-theme.community-active .community-owner-sheet__panel {
    background: #ffffff;
    color: #050505;
    -webkit-text-fill-color: #050505;
}

.community-replies-count {
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}

.comment-time {
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    font-size: 10px;
}

.community-comment-delete {
    background: transparent;
    border: 0;
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 10px;
    margin-left: auto;
}

/* community-all-rail-feature */
    html body.community-active .community-room-card.is-all {
        flex-basis: 188px !important;
        min-height: 104px !important;
        padding: 12px 13px 11px !important;
        justify-content: flex-end !important;
        border-color: color-mix(in srgb, var(--community-text) 7%, transparent) !important;
        box-shadow: none !important;
    }

    html body.community-active .community-room-card.is-all.is-active {
        border-color: color-mix(in srgb, var(--community-text) 20%, transparent) !important;
        box-shadow: inset 0 -3px 0 var(--primary-color, #ff4d2e) !important;
    }

    html body.community-active .community-room-card.is-all .community-room-kicker {
        color: var(--community-text) !important;
        font-size: 9px !important;
        font-weight: 950 !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        margin-bottom: 2px !important;
    }

    html body.community-active .community-room-card.is-all .community-room-title {
        font-size: 21px !important;
        letter-spacing: -0.035em !important;
        line-height: 0.98 !important;
    }

    html body.community-active .community-room-card.is-all .community-room-preview {
        display: block !important;
        width: 100% !important;
        color: var(--community-muted) !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.18 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.community-active .community-room-card.is-all .community-room-count {
        margin-top: 2px !important;
    }

    html body.community-active .community-room-card:not(.is-active) {
        border-color: color-mix(in srgb, var(--community-text) 7%, transparent) !important;
        box-shadow: none !important;
    }

/* community-main-feed-text-pass */
    html body.community-active #arena-grid {
        padding: 14px 0 calc(104px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--community-bg) !important;
    }

    html body.community-active #arena-grid .mobile-community-card {
        box-sizing: border-box !important;
        cursor: pointer !important;
        margin: 0 !important;
        max-width: 100% !important;
        padding: 18px 16px 20px !important;
        position: relative !important;
        transition: background 0.2s ease !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-bottom: 1px solid var(--community-border) !important;
        color: var(--community-text) !important;
        -webkit-text-fill-color: var(--community-text) !important;
    }

    html body.community-active #arena-grid .mobile-community-card:first-child {
        padding-top: 8px !important;
    }

    html body.community-active #arena-grid .mobile-community-card.community-feed-hero,
    html body.community-active #arena-grid .mobile-community-card.community-feed-media,
    html body.community-active #arena-grid .mobile-community-card.community-feed-note,
    html body.community-active #arena-grid .mobile-community-card.community-feed-essay {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    html body.community-active #arena-grid .mobile-community-card > div:first-of-type {
        margin-bottom: 10px !important;
    }

    html body.community-active #arena-grid .mobile-community-meta-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
    }

    html body.community-active #arena-grid .profile-avatar {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
    }

    html body.community-active #arena-grid .mobile-community-author {
        max-width: 38vw !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    html body.community-active #arena-grid .mobile-community-timestamp {
        font-size: 10px !important;
        letter-spacing: 0.14em !important;
        opacity: 0.48 !important;
    }

    html body.community-active #arena-grid .mobile-community-message {
        margin: 0 0 12px !important;
    }

    html body.community-active #arena-grid .mobile-community-message p,
    html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
    html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
    html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
    html body.community-active #arena-grid .community-feed-essay .mobile-community-message p {
        max-width: none !important;
        margin: 0 !important;
        text-align: left !important;
        font-size: clamp(18px, 5.1vw, 24px) !important;
        line-height: 1.16 !important;
        font-weight: 400 !important;
        letter-spacing: -0.02em !important;
    }

    html body.community-active #arena-grid .community-feed-note .mobile-community-message p {
        font-size: clamp(17px, 4.7vw, 21px) !important;
    }

    html body.community-active #arena-grid .community-feed-essay .mobile-community-message p {
        font-size: clamp(16px, 4.35vw, 19px) !important;
        line-height: 1.34 !important;
        color: color-mix(in srgb, var(--community-text) 88%, transparent) !important;
        -webkit-text-fill-color: color-mix(in srgb, var(--community-text) 88%, transparent) !important;
    }

    html body.community-active #arena-grid .mobile-community-media-stage {
        margin: 10px 0 13px !important;
        width: 100% !important;
        max-width: none !important;
    }

    html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
    html body.community-active #arena-grid .mobile-community-media-stage img,
    html body.community-active #arena-grid .mobile-community-media-stage iframe {
        width: 100% !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        border: 1px solid var(--community-border) !important;
        background: var(--community-surface) !important;
    }

    html body.community-active #arena-grid .mobile-community-media-stage video {
        width: 100% !important;
        height: auto !important;
        max-height: 420px !important;
        aspect-ratio: auto !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        border: 1px solid var(--community-border) !important;
        background: #000000 !important;
        object-fit: contain !important;
        pointer-events: auto !important;
    }

    html body.community-active #arena-grid .mobile-community-media-stage img {
        height: auto !important;
        aspect-ratio: auto !important;
        max-height: 460px !important;
        object-fit: contain !important;
    }

/* community-section-surface-pass */
    html body.community-active .community-surface-sections {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 16px 30px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.075) !important;
    }

    html body.community-active .community-surface-block {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body.community-active .community-surface-block + .community-surface-block {
        margin-top: 38px !important;
    }

    html body.community-active .community-feed-section-label {
        margin-top: 42px !important;
    }

    html body.community-active .community-surface-heading,
    html body.community-active .community-feed-section-label {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
        color: #ffffff !important;
    }

    html body.community-active .community-surface-heading span,
    html body.community-active .community-feed-section-label span {
        font-size: 12px !important;
        font-weight: 950 !important;
        letter-spacing: 0.14em !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.92) !important;
    }

    html body.community-active .community-pulse-strip .community-surface-heading span,
    html body.community-active .community-feed-section-label span {
        font-size: 11px !important;
        letter-spacing: 0.18em !important;
        color: rgba(255, 255, 255, 0.78) !important;
    }

    html body.community-active .community-surface-heading small,
    html body.community-active .community-feed-section-label small {
        color: rgba(255, 255, 255, 0.46) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    html body.community-active .community-spotlight-card {
        width: 100% !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        text-align: left !important;
        border: 1px solid var(--community-border) !important;
        border-radius: 18px !important;
        padding: 14px !important;
        color: var(--community-text) !important;
        background: var(--community-card) !important;
        box-shadow: none !important;
        overflow: hidden !important;
        position: relative !important;
    }

    html body.community-active .community-spotlight-card.has-attachment {
        background: var(--community-card) !important;
    }

    html body.community-active .community-spotlight-copy {
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body.community-active .community-spotlight-attachment {
        width: 84px !important;
        height: 84px !important;
        border-radius: 18px !important;
        flex: 0 0 auto !important;
        background:
            linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.18)),
            var(--community-spotlight-thumb),
            #101010 !important;
        background-size: cover, cover, cover !important;
        background-position: center !important;
        border: 1px solid var(--community-border) !important;
    }

    html body.community-active .community-spotlight-room {
        width: fit-content !important;
        max-width: 100% !important;
        padding: 5px 9px !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--community-text) 6%, transparent) !important;
        color: var(--community-text) !important;
        font-size: 10px !important;
        font-weight: 950 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.community-active .community-spotlight-copy strong {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: #ffffff !important;
        font-size: clamp(22px, 6vw, 30px) !important;
        font-weight: 950 !important;
        line-height: 1.02 !important;
        letter-spacing: -0.035em !important;
    }

    html body.community-active .community-spotlight-copy > span:last-child {
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 12px !important;
        font-weight: 850 !important;
    }

    html body.community-active .community-pulse-list {
        display: grid !important;
        gap: 10px !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: auto !important;
        -webkit-overflow-scrolling: auto !important;
    }

    html body.community-active .community-pulse-list {
        grid-template-columns: 1fr !important;
    }

    html body.community-active .community-pulse-list::-webkit-scrollbar {
        display: none !important;
    }

    html body.community-active .community-pulse-item {
        width: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
        padding: 10px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
        color: #ffffff !important;
        text-align: left !important;
        box-shadow: none !important;
        overflow: hidden !important;
        position: relative !important;
    }

    html body.community-active .community-section-avatar {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: color-mix(in srgb, var(--primary-color, #ff4d2e) 22%, #151515) !important;
        color: #ffffff !important;
        font-size: 16px !important;
        font-weight: 950 !important;
    }

    html body.community-active .community-pulse-thumb {
        width: 44px !important;
        height: 44px !important;
        flex: 0 0 44px !important;
        border-radius: 13px !important;
        display: inline-block !important;
        overflow: hidden !important;
        background:
            linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.18)),
            var(--community-pulse-thumb),
            #101010 !important;
        background-size: cover, cover, cover !important;
        background-position: center !important;
        border: 1px solid rgba(255, 255, 255, 0.11) !important;
    }

    html body.community-active .community-pulse-item > span:last-child {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    html body.community-active .community-pulse-item strong {
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.community-active .community-pulse-item small {
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: rgba(255,255,255,0.55) !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
    }

    html body.community-active .community-pulse-item em {
        display: block !important;
        color: color-mix(in srgb, var(--primary-color, #ff4d2e) 70%, rgba(255,255,255,0.55)) !important;
        font-size: 10px !important;
        font-style: normal !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.community-active .community-feed-section-label {
        margin-bottom: 12px !important;
        padding-top: 0 !important;
    }

/* community-feed-top-rhythm-cleanup */
    html body.community-active #community-feed-shell {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding-bottom: 8px !important;
    }

    html body.community-active .community-room-rail {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    html body.community-active .community-feed-modes {
        margin: 0 !important;
    }

    html body.community-active #arena-grid {
        padding-top: 0 !important;
    }

    html body.community-active #arena-grid .mobile-community-card:first-child {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }

/* Fix safe area color mismatch - set body background when community is active */
html:has(body.community-active),
body.community-active,
html body.community-active {
    background: var(--community-bg) !important;
    background-color: var(--community-bg) !important;
    background-image: none !important;
}

html body #create-modal.create-modal,
html[data-theme="light"] body #create-modal.create-modal,
html[data-theme="dark"] body #create-modal.create-modal {
    background: var(--background-color, #000000) !important;
}

html body #create-modal .modal-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: calc(28px + env(safe-area-inset-top, 0px)) 18px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--background-color, #000000) !important;
    color: var(--text-primary) !important;
}

html body #create-modal .modal-header {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

html body #create-modal .modal-title {
    font-size: 30px !important;
    line-height: 0.96 !important;
    font-weight: 950 !important;
    letter-spacing: -0.02em !important;
}

html body #create-modal #modal-public-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

html body #create-modal #modal-public-content > div,
html body #create-modal .input-group {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html body #create-modal #post-text-bloc-select {
    height: 46px !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

html body #create-modal #mobile-post-room-context {
    min-height: 0 !important;
    margin-top: 11px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}

html body #create-modal #mobile-post-room-context span:first-child {
    width: 7px !important;
    height: 7px !important;
    box-shadow: none !important;
}

html body #create-modal #post-message {
    min-height: 42dvh !important;
    height: 42dvh !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 760 !important;
    box-shadow: none !important;
}

html body #create-modal #post-message::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 78%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-secondary) 78%, transparent) !important;
}

html body #create-modal #mobile-community-post-preview {
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body #create-modal #community-post-media-btn {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

html body #create-modal .modal-actions {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent) !important;
}

html body #create-modal .modal-cancel-btn,
html body #create-modal .modal-submit-btn {
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* community-neutral-light-pass */
html[data-theme="light"] body.community-active,
html[data-theme="light"] body.community-active #community-feed-shell,
html[data-theme="light"] body.community-active #arena-grid,
html[data-theme="light"] body.community-active .community-surface-sections,
html[data-theme="light"] body.community-active .community-surface-block {
    background: var(--community-bg) !important;
    background-color: var(--community-bg) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] body.community-active .community-room-card,
html[data-theme="light"] body.community-active .community-room-card.is-all,
html[data-theme="light"] body.community-active .community-spotlight-card,
html[data-theme="light"] body.community-active .community-spotlight-card.has-attachment {
    background: var(--community-card) !important;
    border-color: color-mix(in srgb, var(--community-text) 7%, transparent) !important;
    box-shadow: none !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] body.community-active .community-room-card.has-image {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.72) 100%),
        var(--community-room-thumb),
        var(--community-card) !important;
    background-size: cover, cover, cover !important;
    background-position: center !important;
    border-color: color-mix(in srgb, var(--community-text) 7%, transparent) !important;
    box-shadow: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] body.community-active .community-room-card::after {
    background: transparent !important;
}

html[data-theme="light"] body.community-active .community-room-card.has-image .community-room-kicker,
html[data-theme="light"] body.community-active .community-room-card.has-image .community-room-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38) !important;
}

html[data-theme="light"] body.community-active .community-room-card.has-image .community-room-preview,
html[data-theme="light"] body.community-active .community-room-card.has-image .community-room-count {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="light"] body.community-active .community-room-card.is-active,
html[data-theme="light"] body.community-active .community-room-card.is-all.is-active {
    border-color: color-mix(in srgb, var(--community-text) 18%, transparent) !important;
    box-shadow: inset 0 -3px 0 var(--primary-color, #ff4d2e) !important;
}

html[data-theme="light"] body.community-active .community-spotlight-room,
html[data-theme="light"] body.community-active .community-section-avatar {
    background: color-mix(in srgb, var(--community-text) 6%, transparent) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] body.community-active .community-spotlight-copy strong,
html[data-theme="light"] body.community-active .community-pulse-item strong,
html[data-theme="light"] body.community-active .community-room-title,
html[data-theme="light"] body.community-active .community-room-card .community-room-title,
html[data-theme="light"] body.community-active .community-room-card.is-all .community-room-title {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] body.community-active .community-spotlight-copy > span:last-child,
html[data-theme="light"] body.community-active .community-pulse-item small,
html[data-theme="light"] body.community-active .community-pulse-item em,
html[data-theme="light"] body.community-active .community-room-card .community-room-preview,
html[data-theme="light"] body.community-active .community-room-card.is-all .community-room-preview,
html[data-theme="light"] body.community-active .community-room-card .community-room-count,
html[data-theme="light"] body.community-active .community-room-card.is-all .community-room-count {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html[data-theme="light"] body.community-active .community-pulse-item {
    background: transparent !important;
    border-bottom-color: var(--community-border) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] body.community-active .community-feed-modes button {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html[data-theme="light"] body.community-active .community-feed-modes button.is-active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: inset 0 -3px 0 var(--primary-color, #ff4d2e) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] body.community-active .community-room-card.has-image .community-room-kicker,
html[data-theme="light"] body.community-active .community-room-card.has-image .community-room-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="light"] body.community-active .community-room-card.has-image .community-room-preview,
html[data-theme="light"] body.community-active .community-room-card.has-image .community-room-count {
    color: rgba(255, 255, 255, 0.84) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.84) !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.36) !important;
}

/* Community composer final pass */
html body #create-modal.create-modal {
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-text-size-adjust: 100% !important;
    background: var(--background-color, #000000) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html body #create-modal.create-modal.active {
    display: flex !important;
}

html body #create-modal.create-modal .modal-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--background-color, #000000) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    gap: 0 !important;
    padding: calc(54px + env(safe-area-inset-top, 0px)) 20px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html body #create-modal .modal-header {
    flex: 0 0 auto !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}

html body #create-modal .modal-title {
    margin: 0 0 7px !important;
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 0.96 !important;
    font-weight: 950 !important;
    letter-spacing: -0.04em !important;
}

html body #create-modal .posting-as {
    margin: 0 !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    font-weight: 760 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
}

html body #create-modal .posting-as::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primary-color, #ff4d2e);
    flex: 0 0 auto;
}

html body #create-modal #modal-public-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html body #create-modal #modal-public-content > div:first-child {
    flex: 0 0 auto !important;
    margin: 0 0 16px !important;
}

html body #create-modal #post-text-bloc-select {
    width: 100% !important;
    height: 46px !important;
    padding: 0 32px 0 2px !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 16%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.025em !important;
    box-shadow: none !important;
}

html body #create-modal #mobile-post-room-context {
    display: none !important;
}

html body #create-modal #mobile-post-room-context span:first-child {
    width: 7px !important;
    height: 7px !important;
    background: var(--primary-color) !important;
    box-shadow: none !important;
}

html body #create-modal #mobile-post-room-context span:nth-child(2) {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.16em !important;
}

html body #create-modal #mobile-post-room-context-name {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

html body #create-modal .input-group {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    display: flex !important;
}

html body #create-modal #post-message {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 170px !important;
    height: clamp(190px, 30dvh, 250px) !important;
    max-height: 250px !important;
    padding: 20px 18px 58px !important;
    margin: 0 !important;
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    border-radius: 18px !important;
    outline: none !important;
    background: color-mix(in srgb, var(--text-primary) 2.5%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: clamp(19px, 5.2vw, 24px) !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
    letter-spacing: -0.02em !important;
    resize: none !important;
    box-shadow: none !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    touch-action: manipulation !important;
    -webkit-text-size-adjust: 100% !important;
}

html body #create-modal #post-message:focus {
    min-height: 170px !important;
    height: clamp(190px, 30dvh, 250px) !important;
    max-height: 250px !important;
    padding: 20px 18px 58px !important;
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    border-radius: 18px !important;
    outline: none !important;
    background: color-mix(in srgb, var(--text-primary) 2.5%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: clamp(19px, 5.2vw, 24px) !important;
    line-height: 1.2 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    box-shadow: none !important;
}

html body #create-modal #post-message::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 74%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-secondary) 74%, transparent) !important;
    opacity: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body #create-modal #mobile-community-post-preview {
    flex: 0 0 auto !important;
    max-height: 150px !important;
    margin: 12px 0 !important;
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
    overflow: hidden !important;
}

html body #create-modal #modal-public-content > div:has(#community-post-media-btn) {
    flex: 0 0 auto !important;
    margin: 4px 0 16px !important;
    padding: 0 !important;
    justify-content: flex-start !important;
}

html body #create-modal #community-post-media-btn {
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    gap: 8px !important;
}

html body #create-modal #community-post-media-clear {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

html body #create-modal .modal-actions {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
}

html body #create-modal .modal-cancel-btn,
html body #create-modal .modal-submit-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body #create-modal .modal-cancel-btn {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border: 0 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html body #create-modal .modal-submit-btn {
    background: var(--text-primary) !important;
    border: 0 !important;
    color: var(--background-color) !important;
    -webkit-text-fill-color: var(--background-color) !important;
}

html body #create-modal .modal-submit-btn i {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Community owns its surface below the mobile app header now. */
html body.community-active #community-main-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html body.community-active #community-feed-shell {
    margin-top: 0 !important;
    padding-top: calc(var(--mobile-app-header-height, 116px) + 8px) !important;
}

html body.community-active #arena-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* community-feed-system-final
   Single owner for Community feed layout, action row, owner dots, and theme readability. */
html body.community-active,
html body.community-active #mobile-app-shell,
html body.community-active #mobile-app-content,
html body.community-active #community-main-area,
html body.community-active #community-feed-shell,
html body.community-active #arena-grid {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

html body.community-active #community-feed-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body.community-active #community-room-rail,
html body.community-active .community-room-rail {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 8px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    scroll-padding-left: 14px !important;
    scroll-padding-right: 14px !important;
    overflow-y: visible !important;
}


/* community-scroll-fluidity
   Keep Community vertical feed momentum native while letting the room rail swipe sideways. */
html body.community-active {
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
}

html body.community-active #mobile-app-shell,
html body.community-active #mobile-app-content {
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

html body.community-active #community-main-area,
html body.community-active #community-feed-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

html body.community-active #community-room-rail,
html body.community-active .community-room-rail {
    scroll-snap-type: x proximity !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
}

html body.community-active #community-room-rail .community-room-card,
html body.community-active .community-room-rail .community-room-card {
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    touch-action: pan-x pan-y !important;
}

html body.community-active #community-feed-modes,
html body.community-active .community-feed-modes {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

html body.community-active #community-main-area *,
html body.community-active #arena-grid * {
    box-sizing: border-box !important;
    min-width: 0 !important;
}

html body.community-active #arena-grid {
    padding: 2px 0 0 !important;
    gap: 0 !important;
    background: var(--community-bg) !important;
    scroll-snap-type: none !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

html body.community-active #arena-grid .mobile-community-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    border-radius: 0 !important;
    background: var(--community-bg) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
}

html body.community-active #arena-grid .mobile-community-card + .mobile-community-card {
    border-top: 0 !important;
}

html body.community-active #arena-grid .mobile-community-rebyte-meta {
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 10px !important;
    font-weight: 760 !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-rebyte-meta i,
html body.community-active #arena-grid .mobile-community-rebyte-meta span {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: contents !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, max-content) minmax(0, 1fr) 30px !important;
    grid-column: 1 / -1 !important;
    column-gap: 7px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 0 !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.community-active #arena-grid .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body.community-active #arena-grid .mobile-community-author {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 14px !important;
    line-height: 1 !important;
    /* Semibold marks the name without shouting over the post copy. */
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    grid-column: 3 !important;
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 620 !important;
    letter-spacing: 0.08em !important;
}

html body.community-active #arena-grid .community-post-menu-wrap {
    grid-column: 4 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 8 !important;
}

html body.community-active #arena-grid .community-post-menu-trigger {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    opacity: 1 !important;
    transform: none !important;
}

html body.community-active #arena-grid .community-post-menu-trigger i {
    display: block !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

html body.community-active #arena-grid .mobile-community-room-source,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    justify-content: flex-start !important;
    margin-top: -2px !important;
    margin-bottom: 4px !important;
    opacity: 0.5 !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
}

html body.community-active #arena-grid .mobile-community-room-source * {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    padding: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p {
    margin: 0 !important;
    max-width: 100% !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
    font-size: clamp(14px, 3.25vw, 15px) !important;
    line-height: 1.36 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    text-align: left !important;
}



html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-media-hero .mobile-community-message p {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
    font-size: clamp(13.5px, 3.05vw, 14.5px) !important;
    line-height: 1.34 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}



html body.community-active #arena-grid .mobile-community-card:not(.has-community-media) .mobile-community-message {
    display: flex !important;
    align-items: center !important;
    min-height: 26px !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

html body.community-active #arena-grid .mobile-community-card:not(.has-community-media) .mobile-community-message p {
    width: 100% !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-top: 3px !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .mobile-community-media-stage img,
html body.community-active #arena-grid .mobile-community-media-stage iframe,
html body.community-active #arena-grid .mobile-community-media-stage video {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 132px !important;
    border-radius: 14px !important;
    border-color: var(--community-border) !important;
}

html body.community-active #arena-grid .mobile-community-media-stage video {
    max-height: 280px !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 8px !important;
    padding: 0 0 8px !important;
    border-top: 0 !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

html body.community-active #arena-grid .community-feed-action {
    flex: 0 0 auto !important;
    width: 34px !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    color: color-mix(in srgb, var(--community-text) 58%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .community-feed-action *,
html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action strong,
html body.community-active #arena-grid .community-feed-action span {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    flex: 0 0 auto !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-label {
    display: inline-flex !important;
    font-size: 8px !important;
    font-weight: 680 !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-count {
    display: inline !important;
    position: static !important;
    font-size: 9.5px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin-right: 1px !important;
}

html body.community-active #arena-grid .community-feed-action.has-engagement {
    color: var(--community-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action.has-engagement .community-action-label {
    display: none !important;
}
/* FINAL: Community feed action rail must visually match the current BYTES rail. */
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 8px 0 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail,
html body.community-active #arena-grid .mobile-community-actions > div.bytes-tv-mobile-hero-rail {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    position: relative !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    color: rgba(17, 17, 17, 0.58) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child {
    justify-content: flex-start !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child strong[data-hero-action-count]:not([hidden]) {
    right: auto !important;
    left: 14px !important;
}

/* Use fixed action slots so the first icon can align left without breaking spacing. */
html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    justify-content: space-between !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    right: -50% !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button::after,
html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

/* Replace the old top-right post menu with the room label in the meta row. */
html body.community-active #arena-grid .mobile-community-meta-row {
    grid-template-columns: 42px minmax(0, max-content) minmax(0, 1fr) auto !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: min(36vw, 150px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: hidden !important;
    color: color-mix(in srgb, var(--community-text) 34%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-align: right !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta i {
    flex: 0 0 auto !important;
    font-size: 10px !important;
}
/* Final feed polish: context badge, chosen typography, tighter rhythm. */
html body.community-active #arena-grid .mobile-community-card {
    padding-top: 8px !important;
    padding-bottom: 6px !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    min-height: 0 !important;
}

html body.community-active #arena-grid .mobile-community-card:not(.has-community-media) .mobile-community-message {
    min-height: 0 !important;
    margin-bottom: 4px !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p {
    font-family: var(--font-family, inherit) !important;
    font-weight: var(--font-weight, 430) !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-top: 4px !important;
    margin-bottom: 7px !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 2px !important;
    padding-top: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    min-height: 44px !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    max-width: min(39vw, 164px) !important;
    opacity: 1 !important;
    color: color-mix(in srgb, var(--community-text) 28%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--rebyte {
    color: color-mix(in srgb, var(--community-text) 38%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 9px !important;
    right: -50% !important;
    width: 1px !important;
    height: 20px !important;
    background: rgba(17, 17, 17, 0.08) !important;
    pointer-events: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action .bytes-tv-mobile-hero-rail__icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action i {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 17px !important;
    line-height: 18px !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-label,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action [data-hero-action-label] {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-count,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action strong[data-hero-action-count] {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement {
    color: rgba(17, 17, 17, 0.72) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement strong[data-hero-action-count]:not([hidden]) {
    position: absolute !important;
    top: 1px !important;
    right: calc(50% - 22px) !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 4px 10px rgba(17, 17, 17, 0.18) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions,
body.dark-theme.community-active #arena-grid .mobile-community-actions,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions {
    border-top-color: transparent !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button,
body.dark-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    color: rgba(255, 255, 255, 0.62) !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* Align the first Community action icon with the first letter of the post body. */
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child {
    justify-content: flex-start !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child strong[data-hero-action-count]:not([hidden]) {
    right: auto !important;
    left: 14px !important;
}

/* Keep Community engagement aligned with the post body, not the avatar column. */
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    border-top: 0 !important;
}

/* Remove the horizontal divider above Community engagement actions. */
html body.community-active #arena-grid .mobile-community-actions {
    border-top: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    border-top: 0 !important;
}

/* Align Community feed engagement with the current BYTES mobile action rail. */
html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    height: 38px !important;
    min-width: 0 !important;
    min-height: 38px !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    color: color-mix(in srgb, var(--community-text) 56%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 9px !important;
    right: 0 !important;
    width: 1px !important;
    height: 20px !important;
    background: rgba(17, 17, 17, 0.08) !important;
    pointer-events: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__icon,
html body.community-active #arena-grid .mobile-community-actions .community-action-icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action i {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 17px !important;
    line-height: 18px !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action[data-hero-action="comment"] .community-action-icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action[data-hero-action="comment"] i {
    font-size: 18px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-action-label,
html body.community-active #arena-grid .mobile-community-actions [data-hero-action-label],
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement .community-action-label {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-action-count,
html body.community-active #arena-grid .mobile-community-actions strong[data-hero-action-count] {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement {
    color: var(--community-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement strong[data-hero-action-count]:not([hidden]) {
    position: absolute !important;
    top: 1px !important;
    right: calc(50% - 22px) !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 4px 10px rgba(17, 17, 17, 0.18) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-theme.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* The in-feed Community rail should occupy the same visual lane as the BYTES rail. */
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 8px 0 0 !important;
    border-top: 0 !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions,
body.dark-theme.community-active #arena-grid .mobile-community-actions,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions {
    border-top-color: transparent !important;
}

/* Keep the room source centered above the byline in the main feed. */
html body.community-active #arena-grid .mobile-community-card > .mobile-community-room-source {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 4px !important;
    padding: 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    opacity: 0.58 !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-card > .mobile-community-room-source * {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-card > .mobile-community-card-meta-wrap {
    margin-top: 0 !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .community-feed-action,
body.dark-theme.community-active #arena-grid .community-feed-action,
body.dark-accent-theme.community-active #arena-grid .community-feed-action {
    color: rgba(255, 255, 255, 0.62) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .community-feed-action.has-engagement,
body.dark-theme.community-active #arena-grid .community-feed-action.has-engagement,
body.dark-accent-theme.community-active #arena-grid .community-feed-action.has-engagement {
    color: rgba(255, 255, 255, 0.96) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-media-stage,
body.dark-theme.community-active #arena-grid .mobile-community-media-stage,
body.dark-accent-theme.community-active #arena-grid .mobile-community-media-stage {
    background: #050506 !important;
}

html body.community-active .community-room-card.has-image {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.58) 100%),
        var(--community-room-thumb),
        var(--community-card) !important;
    background-size: cover, cover, cover !important;
    background-position: center !important;
}

html body.community-active .community-room-card.has-image::after {
    background: transparent !important;
}

html body.community-active .community-room-card.has-image .community-room-kicker,
html body.community-active .community-room-card.has-image .community-room-title,
html body.community-active .community-room-card.has-image .community-room-preview,
html body.community-active .community-room-card.has-image .community-room-count {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="light-accent"] body.community-active #community-feed-shell,
body.light-accent-theme.community-active #community-feed-shell,
html[data-theme="light-accent"] body.community-active #community-main-area,
body.light-accent-theme.community-active #community-main-area,
html[data-theme="light-accent"] body.community-active #arena-grid,
body.light-accent-theme.community-active #arena-grid {
    background:
        radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 10%, transparent), transparent 34%),
        var(--community-bg) !important;
    color: var(--community-text) !important;
    border-color: var(--community-border) !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid,
body.light-accent-theme.community-active #arena-grid {
    padding-top: 10px !important;
    gap: 12px !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-card,
body.light-accent-theme.community-active #arena-grid .mobile-community-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 9%, rgba(5, 5, 5, 0.05)) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(5, 5, 5, 0.035) !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-message p,
html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-author,
html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-card,
body.light-accent-theme.community-active #arena-grid .mobile-community-message p,
body.light-accent-theme.community-active #arena-grid .mobile-community-author,
body.light-accent-theme.community-active #arena-grid .mobile-community-card {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-timestamp,
html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-room-source,
html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-room-source *,
html[data-theme="light-accent"] body.community-active #arena-grid .community-feed-action,
html[data-theme="light-accent"] body.community-active #arena-grid .community-feed-action *,
body.light-accent-theme.community-active #arena-grid .mobile-community-timestamp,
body.light-accent-theme.community-active #arena-grid .mobile-community-room-source,
body.light-accent-theme.community-active #arena-grid .mobile-community-room-source *,
body.light-accent-theme.community-active #arena-grid .community-feed-action,
body.light-accent-theme.community-active #arena-grid .community-feed-action * {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid .community-feed-action.has-engagement,
html[data-theme="light-accent"] body.community-active #arena-grid .community-feed-action.has-engagement *,
body.light-accent-theme.community-active #arena-grid .community-feed-action.has-engagement,
body.light-accent-theme.community-active #arena-grid .community-feed-action.has-engagement * {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] body.community-active .community-room-card.has-image,
body.light-accent-theme.community-active .community-room-card.has-image {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.24) 46%, rgba(0, 0, 0, 0.64) 100%),
        var(--community-room-thumb),
        #111111 !important;
    box-shadow: 0 12px 28px rgba(5, 5, 5, 0.08) !important;
}

html[data-theme="light-accent"] body.community-active .community-room-card.has-image .community-room-kicker,
html[data-theme="light-accent"] body.community-active .community-room-card.has-image .community-room-title,
html[data-theme="light-accent"] body.community-active .community-room-card.has-image .community-room-preview,
html[data-theme="light-accent"] body.community-active .community-room-card.has-image .community-room-count,
body.light-accent-theme.community-active .community-room-card.has-image .community-room-kicker,
body.light-accent-theme.community-active .community-room-card.has-image .community-room-title,
body.light-accent-theme.community-active .community-room-card.has-image .community-room-preview,
body.light-accent-theme.community-active .community-room-card.has-image .community-room-count {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.52) !important;
}

/* community-feed-shell-gap-fix
   Bottom nav clearance belongs to the post list, not the room/tabs shell. */
html body.community-active #community-feed-shell {
    padding-top: calc(var(--mobile-app-header-height, 116px) + 4px) !important;
    padding-bottom: 8px !important;
}

html body.community-active #community-room-rail,
html body.community-active .community-room-rail {
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
}

html body.community-active #community-feed-modes,
html body.community-active .community-feed-modes {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

html body.community-active #arena-grid {
    padding-top: 0 !important;
}

/* community-dark-room-active-recovery
   Active room controls should not turn into white pills in dark mode. */
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active,
body.dark-theme.community-active .community-room-card.is-active,
body.dark-accent-theme.community-active .community-room-card.is-active,
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-all.is-active,
body.dark-theme.community-active .community-room-card.is-all.is-active,
body.dark-accent-theme.community-active .community-room-card.is-all.is-active {
    background: color-mix(in srgb, var(--community-text) 8%, var(--community-bg)) !important;
    border-color: color-mix(in srgb, var(--primary-color, #ff4d2e) 76%, transparent) !important;
    box-shadow: inset 0 -3px 0 var(--primary-color, #ff4d2e) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active::after,
body.dark-theme.community-active .community-room-card.is-active::after,
body.dark-accent-theme.community-active .community-room-card.is-active::after {
    background: transparent !important;
}

html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active .community-room-kicker,
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active .community-room-title,
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active .community-room-preview,
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active .community-room-count,
body.dark-theme.community-active .community-room-card.is-active .community-room-kicker,
body.dark-theme.community-active .community-room-card.is-active .community-room-title,
body.dark-theme.community-active .community-room-card.is-active .community-room-preview,
body.dark-theme.community-active .community-room-card.is-active .community-room-count,
body.dark-accent-theme.community-active .community-room-card.is-active .community-room-kicker,
body.dark-accent-theme.community-active .community-room-card.is-active .community-room-title,
body.dark-accent-theme.community-active .community-room-card.is-active .community-room-preview,
body.dark-accent-theme.community-active .community-room-card.is-active .community-room-count {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    text-shadow: none !important;
}

/* community-composer-compact-input
   Keep the post composer usable without letting the textarea fill the whole screen. */
html body #create-modal #modal-public-content {
    flex: 0 1 auto !important;
}

html body #create-modal .input-group {
    flex: 0 0 auto !important;
    min-height: 0 !important;
}

html body #create-modal #post-message,
html body #create-modal #post-message:focus {
    flex: 0 0 auto !important;
    min-height: 170px !important;
    height: clamp(190px, 30dvh, 250px) !important;
    max-height: 250px !important;
    padding: 20px 18px 58px !important;
    font-size: clamp(19px, 5.2vw, 24px) !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
}

html body #create-modal #modal-public-content > div:has(#community-post-media-btn) {
    margin: -48px 0 20px 18px !important;
}

html body #create-modal .modal-submit-btn:disabled,
html body #create-modal .modal-submit-btn[disabled],
html body #create-modal .modal-submit-btn.is-disabled {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    color: color-mix(in srgb, var(--text-primary) 34%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 34%, transparent) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* Rebuilt create-post action row. Keep this after legacy composer rules. */
html body #create-modal .post-composer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body #create-modal .post-composer-action {
    all: unset;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 42px !important;
    min-width: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    font: 850 14px/1 var(--font-family, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

html body #create-modal .post-composer-action--cancel {
    background: color-mix(in srgb, var(--text-primary) 7%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html body #create-modal .post-composer-action--submit {
    background: var(--text-primary) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #create-modal .post-composer-action--submit *,
html body #create-modal .post-composer-action--submit span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #create-modal .post-composer-action:disabled,
html body #create-modal .post-composer-action[disabled],
html body #create-modal .post-composer-action.is-disabled {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    color: color-mix(in srgb, var(--text-primary) 34%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 34%, transparent) !important;
    cursor: not-allowed !important;
}

/* Center-stage Community feed. Keep this last so it wins over older timeline/card passes. */
html body.community-active #arena-grid .mobile-community-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 20px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--community-text) 10%, transparent) !important;
    border-radius: 0 !important;
    background: var(--community-bg) !important;
    box-shadow: none !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-rebyte-meta,
html body.community-active #arena-grid .mobile-community-card-meta-wrap,
html body.community-active #arena-grid .mobile-community-room-source,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    width: min(100%, 348px) !important;
    max-width: 348px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-column: auto !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: block !important;
    margin-bottom: 8px !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 42px !important;
    position: relative !important;
    text-align: center !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    flex: 0 0 auto !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

html body.community-active #arena-grid .mobile-community-byline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
}

html body.community-active #arena-grid .mobile-community-author {
    display: block !important;
    flex: 0 1 auto !important;
    max-width: 100% !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    grid-column: auto !important;
}

html body.community-active #arena-grid .mobile-community-author::after {
    content: "·" !important;
    display: inline-block !important;
    margin-left: 7px !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-weight: 650 !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    display: block !important;
    flex: 0 1 auto !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    grid-column: auto !important;
}

html body.community-active #arena-grid .mobile-community-meta-pill {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

html body.community-active #arena-grid .community-post-menu-wrap {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    grid-column: auto !important;
}

html body.community-active #arena-grid .community-post-menu-trigger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    opacity: 0.55 !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 780 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-message {
    display: block !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    text-align: center !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: clamp(17px, 4.35vw, 21px) !important;
    line-height: 1.32 !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(16px, 4.1vw, 19px) !important;
    line-height: 1.34 !important;
    font-weight: 500 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    display: flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .mobile-community-media-stage img,
html body.community-active #arena-grid .mobile-community-media-stage iframe,
html body.community-active #arena-grid .mobile-community-media-stage video {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    object-fit: cover !important;
}

html body.community-active #arena-grid .mobile-community-media-stage video {
    max-height: 360px !important;
    object-fit: contain !important;
    background: #000000 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage img {
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: 460px !important;
    object-fit: contain !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 0 !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(20px, 8vw, 34px) !important;
    width: 100% !important;
}

html body.community-active #arena-grid .community-feed-action {
    width: auto !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    gap: 5px !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    font-size: 21px !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

/* Post detail action bar: larger than feed, still clean and icon-first. */
html body #enter-modal.post-detail-page .post-detail-engagement {
    padding: 12px 0 !important;
    background: var(--background, #ffffff) !important;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
}

html body #enter-modal.post-detail-page [id^="engagement-row-"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 44px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 42px !important;
    padding-right: 20px !important;
}

html body #enter-modal.post-detail-page .community-detail-action {
    width: 42px !important;
    height: 48px !important;
    min-width: 42px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: color-mix(in srgb, var(--text-primary) 72%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

html body #enter-modal.post-detail-page .community-detail-action i,
html body #enter-modal.post-detail-page .community-detail-action .community-detail-action-icon {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

html body #enter-modal.post-detail-page .community-detail-action span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 780 !important;
    letter-spacing: 0 !important;
}

html body #enter-modal.post-detail-page .community-detail-action span[hidden] {
    display: none !important;
}

html[data-theme^="dark"] body #enter-modal.post-detail-page .community-detail-action,
body.dark-theme #enter-modal.post-detail-page .community-detail-action,
body.dark-accent-theme #enter-modal.post-detail-page .community-detail-action {
    color: rgba(255, 255, 255, 0.78) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Center-stage polish pass: tighter rhythm and cleaner social-card proportions. */
html body.community-active #arena-grid .mobile-community-card {
    --community-feed-lane: min(78vw, 330px);
    padding: 20px 18px 24px !important;
    min-height: 0 !important;
}

html body.community-active #arena-grid .mobile-community-card:first-child {
    padding-top: 18px !important;
}

html body.community-active #arena-grid .mobile-community-rebyte-meta,
html body.community-active #arena-grid .mobile-community-card-meta-wrap,
html body.community-active #arena-grid .mobile-community-room-source,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    width: var(--community-feed-lane) !important;
    max-width: var(--community-feed-lane) !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    margin-bottom: 7px !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    gap: 6px !important;
    padding: 0 38px !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--community-text) 10%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-byline {
    gap: 6px !important;
}

html body.community-active #arena-grid .mobile-community-author {
    font-size: 17px !important;
    font-weight: 790 !important;
    line-height: 1.08 !important;
}

html body.community-active #arena-grid .mobile-community-author::after {
    margin-left: 6px !important;
    opacity: 0.75 !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    font-size: 14px !important;
    font-weight: 560 !important;
    letter-spacing: 0.03em !important;
}

html body.community-active #arena-grid .community-post-menu-wrap {
    top: 4px !important;
    right: 1px !important;
    width: 34px !important;
    height: 34px !important;
}

html body.community-active #arena-grid .community-post-menu-trigger {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    color: color-mix(in srgb, var(--community-text) 48%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-post-menu-trigger i {
    font-size: 17px !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    margin-bottom: 15px !important;
    opacity: 0.48 !important;
    font-size: 10.5px !important;
    font-weight: 760 !important;
    letter-spacing: 0.14em !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-bottom: 15px !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p {
    font-size: clamp(18px, 4.8vw, 22px) !important;
    line-height: 1.28 !important;
    font-weight: 570 !important;
    text-wrap: balance !important;
}

html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p {
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: 1.08 !important;
    font-weight: 640 !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(16px, 4.15vw, 19px) !important;
    line-height: 1.32 !important;
    font-weight: 520 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-bottom: 14px !important;
}

html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .mobile-community-media-stage img,
html body.community-active #arena-grid .mobile-community-media-stage iframe,
html body.community-active #arena-grid .mobile-community-media-stage video {
    border-radius: 16px !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    justify-content: space-between !important;
    gap: 0 !important;
}

html body.community-active #arena-grid .community-feed-action {
    width: 40px !important;
    min-width: 40px !important;
    height: 38px !important;
    min-height: 38px !important;
    color: color-mix(in srgb, var(--community-text) 54%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action.has-engagement {
    color: color-mix(in srgb, var(--community-text) 76%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    font-size: 20px !important;
}

/* Current feed: centered, readable, no room label, no floating action pill. */
html body.community-active #arena-grid .mobile-community-room-source {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-card {
    --community-feed-lane: min(88vw, 390px);
    padding: 18px 22px 22px !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    width: var(--community-feed-lane) !important;
    max-width: var(--community-feed-lane) !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-bottom: 13px !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p {
    font-size: clamp(15.5px, 4vw, 18px) !important;
    line-height: 1.36 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(15px, 3.85vw, 17px) !important;
    line-height: 1.34 !important;
    font-weight: 480 !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
}

html body.community-active #arena-grid .community-feed-action {
    width: 42px !important;
    min-width: 42px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--community-text) 58%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    font-size: 20px !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-count {
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Classic Community feed restore: avatar left, content right, room line visible. */
html body.community-active #arena-grid .mobile-community-card {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 30px 28px !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--community-text) 10%, transparent) !important;
    border-radius: 0 !important;
    background: var(--community-bg) !important;
    box-shadow: none !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 36px !important;
    column-gap: 18px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: 0 !important;
    position: relative !important;
    text-align: left !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    grid-column: 1 !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-byline {
    grid-column: 2 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-author {
    display: inline-block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: clamp(20px, 5.2vw, 28px) !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-author::after {
    content: "" !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    display: inline-block !important;
    flex: 0 0 auto !important;
    color: color-mix(in srgb, var(--community-text) 30%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(15px, 3.8vw, 20px) !important;
    line-height: 1 !important;
    font-weight: 740 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    text-align: left !important;
}

html body.community-active #arena-grid .community-post-menu-wrap {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
}

html body.community-active #arena-grid .community-post-menu-trigger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
}

html body.community-active #arena-grid .mobile-community-room-source,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
    opacity: 1 !important;
    color: color-mix(in srgb, var(--community-text) 28%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(13px, 3.25vw, 17px) !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-room-source * {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin: 0 0 22px !important;
    padding: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: clamp(19px, 4.9vw, 30px) !important;
    line-height: 1.28 !important;
    font-weight: 430 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-wrap: auto !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(17px, 4.25vw, 22px) !important;
    line-height: 1.32 !important;
    font-weight: 430 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .mobile-community-media-stage img,
html body.community-active #arena-grid .mobile-community-media-stage iframe,
html body.community-active #arena-grid .mobile-community-media-stage video {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
}

html body.community-active #arena-grid .community-feed-action {
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    color: color-mix(in srgb, var(--community-text) 52%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    font-size: clamp(20px, 5.25vw, 28px) !important;
    line-height: 1 !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-label {
    display: inline-flex !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(10px, 2.8vw, 15px) !important;
    line-height: 1 !important;
    font-weight: 860 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-count {
    display: inline-flex !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(11px, 2.9vw, 15px) !important;
    line-height: 1 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

/* Restore 2026-06-11 Community feed sizing/layout. */
html body.community-active #arena-grid {
    padding: 2px 0 0 !important;
    gap: 0 !important;
    background: var(--community-bg) !important;
}

html body.community-active #arena-grid .mobile-community-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    border-radius: 0 !important;
    background: var(--community-bg) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: contents !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, max-content) minmax(0, 1fr) 30px !important;
    grid-column: 1 / -1 !important;
    column-gap: 7px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: left !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.community-active #arena-grid .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body.community-active #arena-grid .mobile-community-author {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-author::after {
    content: "" !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    grid-column: 3 !important;
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 620 !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
}

html body.community-active #arena-grid .community-post-menu-wrap {
    grid-column: 4 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 8 !important;
}

html body.community-active #arena-grid .community-post-menu-trigger {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html body.community-active #arena-grid .mobile-community-room-source,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: -2px !important;
    margin-bottom: 4px !important;
    opacity: 0.5 !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-room-source * {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    padding: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p {
    margin: 0 !important;
    max-width: 100% !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
    font-size: clamp(14px, 3.25vw, 15.5px) !important;
    line-height: 1.36 !important;
    font-weight: 430 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-align: left !important;
    text-wrap: auto !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(13.5px, 3.05vw, 14.5px) !important;
    line-height: 1.34 !important;
    font-weight: 430 !important;
}

html body.community-active #arena-grid .mobile-community-card:not(.has-community-media) .mobile-community-message {
    display: flex !important;
    align-items: center !important;
    min-height: 26px !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

html body.community-active #arena-grid .mobile-community-card:not(.has-community-media) .mobile-community-message p {
    width: 100% !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-top: 3px !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .mobile-community-media-stage img,
html body.community-active #arena-grid .mobile-community-media-stage iframe,
html body.community-active #arena-grid .mobile-community-media-stage video {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 132px !important;
    border-radius: 14px !important;
    border-color: var(--community-border) !important;
}

html body.community-active #arena-grid .mobile-community-media-stage video {
    max-height: 280px !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 2px !important;
    padding: 0 0 4px !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
}

html body.community-active #arena-grid .community-feed-action {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    color: color-mix(in srgb, var(--community-text) 58%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .community-feed-action *,
html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action strong,
html body.community-active #arena-grid .community-feed-action span {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    flex: 0 0 auto !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-label {
    display: inline-flex !important;
    font-size: 8px !important;
    font-weight: 680 !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-count {
    display: inline !important;
    position: static !important;
    font-size: 9.5px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin-right: 1px !important;
}

html body.community-active #arena-grid .community-feed-action.has-engagement {
    color: var(--community-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action.has-engagement .community-action-label {
    display: none !important;
}

/* TRUE EOF OVERRIDE: match the current BYTES mobile action rail in Community feed. */
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 8px 0 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail,
html body.community-active #arena-grid .mobile-community-actions > div.bytes-tv-mobile-hero-rail {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    color: rgba(17, 17, 17, 0.58) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 9px !important;
    right: 0 !important;
    width: 1px !important;
    height: 20px !important;
    background: rgba(17, 17, 17, 0.08) !important;
    pointer-events: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action .bytes-tv-mobile-hero-rail__icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action i {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 17px !important;
    line-height: 18px !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-label,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action [data-hero-action-label] {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-count,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action strong[data-hero-action-count] {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement {
    color: rgba(17, 17, 17, 0.72) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement strong[data-hero-action-count]:not([hidden]) {
    position: absolute !important;
    top: 1px !important;
    right: calc(50% - 22px) !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 4px 10px rgba(17, 17, 17, 0.18) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions,
body.dark-theme.community-active #arena-grid .mobile-community-actions,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions {
    border-top-color: transparent !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button,
body.dark-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    color: rgba(255, 255, 255, 0.62) !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* Align the first Community action icon with the first letter of the post body. */
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child {
    justify-content: flex-start !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child strong[data-hero-action-count]:not([hidden]) {
    right: auto !important;
    left: 14px !important;
}

/* Use fixed action slots so the first icon can align left without breaking spacing. */
html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    justify-content: space-between !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    right: -50% !important;
}

/* Replace the old top-right post menu with the room label in the meta row. */
html body.community-active #arena-grid .mobile-community-meta-row {
    grid-template-columns: 42px minmax(0, max-content) minmax(0, 1fr) auto !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: min(36vw, 150px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: hidden !important;
    color: color-mix(in srgb, var(--community-text) 34%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-align: right !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta i {
    flex: 0 0 auto !important;
    font-size: 10px !important;
}

/* Final Community feed overrides: latest rules win over legacy duplicated blocks. */
html body.community-active #arena-grid .mobile-community-card {
    padding-top: 8px !important;
    padding-bottom: 5px !important;
}

html body.community-active #arena-grid .mobile-community-message {
    min-height: 0 !important;
    margin-bottom: 4px !important;
}

html body.community-active #arena-grid .mobile-community-card:not(.has-community-media) .mobile-community-message {
    min-height: 0 !important;
    margin-bottom: 3px !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p {
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif) !important;
    font-weight: var(--font-weight, 430) !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 1px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    min-height: 42px !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    max-width: min(40vw, 166px) !important;
    opacity: 1 !important;
    color: color-mix(in srgb, var(--community-text) 32%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--rebyte {
    color: color-mix(in srgb, var(--community-text) 42%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--rebyte span {
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-rebyte-meta {
    display: none !important;
}

/* Reverted Community UI polish block. Kept here disabled so only the requested targeted fixes remain.
html body.community-active {
    --community-bg: #ffffff;
    --community-surface: #ffffff;
    --community-soft: #f7f8fa;
    --community-line: rgba(15, 23, 42, 0.08);
    --community-muted: rgba(15, 23, 42, 0.44);
    --community-text: #06070a;
    --community-accent: var(--primary-color, #ff4d2e);
}

html body.community-active #community-feed-shell {
    gap: 16px !important;
    padding-bottom: 18px !important;
    background: var(--community-bg) !important;
}

html body.community-active #community-room-rail,
html body.community-active .community-room-rail {
    gap: 14px !important;
    padding-top: 10px !important;
    padding-bottom: 18px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    scroll-padding-left: 24px !important;
    scroll-padding-right: 24px !important;
}

html body.community-active .community-room-card,
html body.community-active .community-room-card.is-all {
    flex-basis: 174px !important;
    min-height: 118px !important;
    padding: 15px 16px 14px !important;
    border-radius: 22px !important;
    border: 1px solid var(--community-line) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 248, 250, 0.96)) !important;
    color: var(--community-text) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
}

html body.community-active .community-room-card.has-image {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-size: cover !important;
    background-position: center !important;
}

html body.community-active .community-room-card.is-active,
html body.community-active .community-room-card.is-all.is-active {
    border-color: color-mix(in srgb, var(--community-accent) 34%, rgba(15, 23, 42, 0.1)) !important;
    box-shadow:
        0 16px 36px rgba(15, 23, 42, 0.08),
        inset 0 -4px 0 var(--community-accent) !important;
}

html body.community-active .community-room-card::after {
    background: linear-gradient(180deg, transparent 8%, rgba(0, 0, 0, 0.34)) !important;
}

html body.community-active .community-room-card:not(.has-image)::after {
    background: transparent !important;
}

html body.community-active .community-room-kicker,
html body.community-active .community-room-card.is-all .community-room-kicker {
    color: color-mix(in srgb, var(--community-text) 72%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
}

html body.community-active .community-room-title,
html body.community-active .community-room-card.is-all .community-room-title {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

html body.community-active .community-room-card.has-image .community-room-kicker,
html body.community-active .community-room-card.has-image .community-room-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.community-active .community-room-preview,
html body.community-active .community-room-card.is-all .community-room-preview {
    color: color-mix(in srgb, var(--community-text) 48%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

html body.community-active .community-room-count,
html body.community-active .community-room-card.is-all .community-room-count {
    color: color-mix(in srgb, var(--community-text) 55%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
}

html body.community-active .community-room-card.has-image .community-room-preview,
html body.community-active .community-room-card.has-image .community-room-count {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active .community-feed-modes {
    padding: 0 30px !important;
    gap: 26px !important;
}

html body.community-active .community-feed-modes button {
    min-height: 38px !important;
    font-size: 19px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid {
    background: var(--community-bg) !important;
}

html body.community-active #arena-grid .mobile-community-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 30px 19px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-line) !important;
    border-radius: 0 !important;
    background: var(--community-bg) !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, max-content) minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
    min-height: 46px !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.02)) !important;
    border: 1px solid var(--community-line) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

html body.community-active #arena-grid .mobile-community-author {
    align-self: center !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    align-self: center !important;
    color: color-mix(in srgb, var(--community-text) 34%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: 0.08em !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    align-self: center !important;
    color: color-mix(in srgb, var(--community-text) 34%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
}

html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-top: -2px !important;
    margin-bottom: 9px !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: clamp(15px, 3.75vw, 17px) !important;
    line-height: 1.35 !important;
    font-weight: 470 !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 3px !important;
    padding-top: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    min-height: 38px !important;
    justify-content: space-between !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    color: color-mix(in srgb, var(--community-text) 48%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button::after,
html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button::after {
    content: none !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action .bytes-tv-mobile-hero-rail__icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action i {
    width: 19px !important;
    height: 19px !important;
    font-size: 18px !important;
    line-height: 19px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement {
    color: color-mix(in srgb, var(--community-text) 68%, transparent) !important;
}
*/

/* BTAP signal plate: Community post object only. */
html body.community-active #arena-grid {
    --btap-signal-ink: #09090b;
    --btap-signal-muted: rgba(9, 9, 11, 0.46);
    --btap-signal-line: rgba(9, 9, 11, 0.09);
    --btap-signal-soft: #f5f6f8;
    --btap-signal-accent: var(--primary-color, #ff4015);
    background: #ffffff !important;
    padding: 2px 0 100px !important;
}

/* Flat feed row, like the virtual map post list: no card box, no shadow, no
   radius, no accent stripe — just content on a hairline. */
html body.community-active #arena-grid .mobile-community-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 11px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border, rgba(9, 9, 11, 0.08)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-card:active {
    background: rgba(9, 9, 11, 0.035) !important;
}

/* Accent stripe and corner tick removed with the card container — decoration
   that only made sense on a bordered tile. */
html body.community-active #arena-grid .mobile-community-card::before,
html body.community-active #arena-grid .mobile-community-card::after {
    content: none !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: contents !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, max-content) minmax(0, 1fr) auto !important;
    grid-column: 1 / -1 !important;
    column-gap: 9px !important;
    align-items: center !important;
    min-height: 44px !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    grid-column: 1 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(9, 9, 11, 0.10) !important;
    background: var(--btap-signal-soft) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .mobile-community-author {
    grid-column: 2 !important;
    color: var(--btap-signal-ink) !important;
    -webkit-text-fill-color: var(--btap-signal-ink) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    grid-column: 3 !important;
    justify-self: start !important;
    color: var(--btap-signal-muted) !important;
    -webkit-text-fill-color: var(--btap-signal-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.11em !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    grid-column: 4 !important;
    justify-self: end !important;
    max-width: min(34vw, 128px) !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 1px solid rgba(9, 9, 11, 0.10) !important;
    border-radius: 999px !important;
    background: rgba(9, 9, 11, 0.035) !important;
    color: rgba(9, 9, 11, 0.50) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.community-active #arena-grid .mobile-community-message {
    position: relative !important;
    margin-top: 7px !important;
    margin-bottom: 7px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(9, 9, 11, 0.07) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(9, 9, 11, 0.045) !important;
}

html body.community-active #arena-grid .mobile-community-message::before {
    content: "" !important;
    position: absolute !important;
    left: -7px !important;
    top: 14px !important;
    width: 7px !important;
    height: 12px !important;
    border-radius: 999px 0 0 999px !important;
    background: var(--btap-signal-accent) !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p {
    margin: 0 !important;
    color: var(--btap-signal-ink) !important;
    -webkit-text-fill-color: var(--btap-signal-ink) !important;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif) !important;
    font-size: clamp(14px, 3.5vw, 16px) !important;
    line-height: 1.35 !important;
    font-weight: var(--font-weight, 520) !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-top: 2px !important;
    margin-bottom: 8px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 34px !important;
    width: auto !important;
}

html body.community-active #arena-grid .mobile-community-actions > div.bytes-tv-mobile-hero-rail {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 32px !important;
    width: auto !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    position: relative !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(9, 9, 11, 0.045) !important;
    color: rgba(9, 9, 11, 0.52) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 30px !important;
    min-height: 30px !important;
    background: rgba(9, 9, 11, 0.045) !important;
    border-radius: 999px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button::after,
html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button::after {
    content: none !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action .bytes-tv-mobile-hero-rail__icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action i {
    width: 17px !important;
    height: 17px !important;
    font-size: 16px !important;
    line-height: 17px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement {
    color: var(--btap-signal-ink) !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement strong[data-hero-action-count]:not([hidden]) {
    top: -5px !important;
    right: -6px !important;
    min-width: 16px !important;
    height: 16px !important;
    background: var(--btap-signal-ink) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--rebyte {
    grid-column: 2 !important;
    justify-self: end !important;
    margin-top: -3px !important;
    margin-bottom: 5px !important;
    padding: 0 9px !important;
    min-height: 21px !important;
    border-radius: 999px !important;
    background: rgba(255, 64, 21, 0.08) !important;
    color: rgba(9, 9, 11, 0.54) !important;
}

/* Media stays in the content column so its left and right edges line up with the
   engagement row beneath it. The 16/9 crop was enforcing that alignment by making
   every image the same width; sizing to the media keeps the alignment without it. */
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-media-stage {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* height:auto over a max-height cap: the image sets its own height from its
   width, so it always fills the column edge to edge and stays flush with the
   actions row. A max-height with object-fit:contain would letterbox tall images
   inward and break that alignment. */
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-media-stage img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
}

/* Card flattening (no radius/shadow/border, hairline between posts) lives in the
   inline <style> block in templates/mobile.html, which loads after this file and
   wins on both order and specificity. Only the engagement row is styled here. */


html body.community-active #arena-grid .mobile-community-actions .community-action-count,
html body.community-active #arena-grid .mobile-community-actions strong[data-hero-action-count] {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement {
    color: var(--community-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement strong[data-hero-action-count]:not([hidden]) {
    position: absolute !important;
    top: 1px !important;
    right: calc(50% - 22px) !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 4px 10px rgba(17, 17, 17, 0.18) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-theme.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* The in-feed Community rail should occupy the same visual lane as the BYTES rail. */
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 8px 0 0 !important;
    border-top: 0 !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions,
body.dark-theme.community-active #arena-grid .mobile-community-actions,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions {
    border-top-color: transparent !important;
}

/* Keep the room source centered above the byline in the main feed. */
html body.community-active #arena-grid .mobile-community-card > .mobile-community-room-source {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 4px !important;
    padding: 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
    opacity: 0.58 !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-card > .mobile-community-room-source * {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-card > .mobile-community-card-meta-wrap {
    margin-top: 0 !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .community-feed-action,
body.dark-theme.community-active #arena-grid .community-feed-action,
body.dark-accent-theme.community-active #arena-grid .community-feed-action {
    color: rgba(255, 255, 255, 0.62) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .community-feed-action.has-engagement,
body.dark-theme.community-active #arena-grid .community-feed-action.has-engagement,
body.dark-accent-theme.community-active #arena-grid .community-feed-action.has-engagement {
    color: rgba(255, 255, 255, 0.96) !important;
    -webkit-text-fill-color: currentColor !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-media-stage,
body.dark-theme.community-active #arena-grid .mobile-community-media-stage,
body.dark-accent-theme.community-active #arena-grid .mobile-community-media-stage {
    background: #050506 !important;
}

html body.community-active .community-room-card.has-image {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.14) 48%, rgba(0, 0, 0, 0.58) 100%),
        var(--community-room-thumb),
        var(--community-card) !important;
    background-size: cover, cover, cover !important;
    background-position: center !important;
}

html body.community-active .community-room-card.has-image::after {
    background: transparent !important;
}

html body.community-active .community-room-card.has-image .community-room-kicker,
html body.community-active .community-room-card.has-image .community-room-title,
html body.community-active .community-room-card.has-image .community-room-preview,
html body.community-active .community-room-card.has-image .community-room-count {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="light-accent"] body.community-active #community-feed-shell,
body.light-accent-theme.community-active #community-feed-shell,
html[data-theme="light-accent"] body.community-active #community-main-area,
body.light-accent-theme.community-active #community-main-area,
html[data-theme="light-accent"] body.community-active #arena-grid,
body.light-accent-theme.community-active #arena-grid {
    background:
        radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 10%, transparent), transparent 34%),
        var(--community-bg) !important;
    color: var(--community-text) !important;
    border-color: var(--community-border) !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid,
body.light-accent-theme.community-active #arena-grid {
    padding-top: 10px !important;
    gap: 12px !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-card,
body.light-accent-theme.community-active #arena-grid .mobile-community-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 9%, rgba(5, 5, 5, 0.05)) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(5, 5, 5, 0.035) !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-message p,
html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-author,
html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-card,
body.light-accent-theme.community-active #arena-grid .mobile-community-message p,
body.light-accent-theme.community-active #arena-grid .mobile-community-author,
body.light-accent-theme.community-active #arena-grid .mobile-community-card {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-timestamp,
html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-room-source,
html[data-theme="light-accent"] body.community-active #arena-grid .mobile-community-room-source *,
html[data-theme="light-accent"] body.community-active #arena-grid .community-feed-action,
html[data-theme="light-accent"] body.community-active #arena-grid .community-feed-action *,
body.light-accent-theme.community-active #arena-grid .mobile-community-timestamp,
body.light-accent-theme.community-active #arena-grid .mobile-community-room-source,
body.light-accent-theme.community-active #arena-grid .mobile-community-room-source *,
body.light-accent-theme.community-active #arena-grid .community-feed-action,
body.light-accent-theme.community-active #arena-grid .community-feed-action * {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html[data-theme="light-accent"] body.community-active #arena-grid .community-feed-action.has-engagement,
html[data-theme="light-accent"] body.community-active #arena-grid .community-feed-action.has-engagement *,
body.light-accent-theme.community-active #arena-grid .community-feed-action.has-engagement,
body.light-accent-theme.community-active #arena-grid .community-feed-action.has-engagement * {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] body.community-active .community-room-card.has-image,
body.light-accent-theme.community-active .community-room-card.has-image {
    border-color: rgba(255, 255, 255, 0.28) !important;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.24) 46%, rgba(0, 0, 0, 0.64) 100%),
        var(--community-room-thumb),
        #111111 !important;
    box-shadow: 0 12px 28px rgba(5, 5, 5, 0.08) !important;
}

html[data-theme="light-accent"] body.community-active .community-room-card.has-image .community-room-kicker,
html[data-theme="light-accent"] body.community-active .community-room-card.has-image .community-room-title,
html[data-theme="light-accent"] body.community-active .community-room-card.has-image .community-room-preview,
html[data-theme="light-accent"] body.community-active .community-room-card.has-image .community-room-count,
body.light-accent-theme.community-active .community-room-card.has-image .community-room-kicker,
body.light-accent-theme.community-active .community-room-card.has-image .community-room-title,
body.light-accent-theme.community-active .community-room-card.has-image .community-room-preview,
body.light-accent-theme.community-active .community-room-card.has-image .community-room-count {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.52) !important;
}

/* community-feed-shell-gap-fix
   Bottom nav clearance belongs to the post list, not the room/tabs shell. */
html body.community-active #community-feed-shell {
    padding-top: calc(var(--mobile-app-header-height, 116px) + 4px) !important;
    padding-bottom: 8px !important;
}

html body.community-active #community-room-rail,
html body.community-active .community-room-rail {
    margin-bottom: 0 !important;
    padding-bottom: 8px !important;
}

html body.community-active #community-feed-modes,
html body.community-active .community-feed-modes {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

html body.community-active #arena-grid {
    padding-top: 0 !important;
}

/* community-dark-room-active-recovery
   Active room controls should not turn into white pills in dark mode. */
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active,
body.dark-theme.community-active .community-room-card.is-active,
body.dark-accent-theme.community-active .community-room-card.is-active,
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-all.is-active,
body.dark-theme.community-active .community-room-card.is-all.is-active,
body.dark-accent-theme.community-active .community-room-card.is-all.is-active {
    background: color-mix(in srgb, var(--community-text) 8%, var(--community-bg)) !important;
    border-color: color-mix(in srgb, var(--primary-color, #ff4d2e) 76%, transparent) !important;
    box-shadow: inset 0 -3px 0 var(--primary-color, #ff4d2e) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active::after,
body.dark-theme.community-active .community-room-card.is-active::after,
body.dark-accent-theme.community-active .community-room-card.is-active::after {
    background: transparent !important;
}

html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active .community-room-kicker,
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active .community-room-title,
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active .community-room-preview,
html:not([data-theme="light"]):not([data-theme="light-accent"]) body.community-active .community-room-card.is-active .community-room-count,
body.dark-theme.community-active .community-room-card.is-active .community-room-kicker,
body.dark-theme.community-active .community-room-card.is-active .community-room-title,
body.dark-theme.community-active .community-room-card.is-active .community-room-preview,
body.dark-theme.community-active .community-room-card.is-active .community-room-count,
body.dark-accent-theme.community-active .community-room-card.is-active .community-room-kicker,
body.dark-accent-theme.community-active .community-room-card.is-active .community-room-title,
body.dark-accent-theme.community-active .community-room-card.is-active .community-room-preview,
body.dark-accent-theme.community-active .community-room-card.is-active .community-room-count {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    text-shadow: none !important;
}

/* community-composer-compact-input
   Keep the post composer usable without letting the textarea fill the whole screen. */
html body #create-modal #modal-public-content {
    flex: 0 1 auto !important;
}

html body #create-modal .input-group {
    flex: 0 0 auto !important;
    min-height: 0 !important;
}

html body #create-modal #post-message,
html body #create-modal #post-message:focus {
    flex: 0 0 auto !important;
    min-height: 170px !important;
    height: clamp(190px, 30dvh, 250px) !important;
    max-height: 250px !important;
    padding: 20px 18px 58px !important;
    font-size: clamp(19px, 5.2vw, 24px) !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
}

html body #create-modal #modal-public-content > div:has(#community-post-media-btn) {
    margin: -48px 0 20px 18px !important;
}

html body #create-modal .modal-submit-btn:disabled,
html body #create-modal .modal-submit-btn[disabled],
html body #create-modal .modal-submit-btn.is-disabled {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    color: color-mix(in srgb, var(--text-primary) 34%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 34%, transparent) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* Rebuilt create-post action row. Keep this after legacy composer rules. */
html body #create-modal .post-composer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body #create-modal .post-composer-action {
    all: unset;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 42px !important;
    min-width: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    font: 850 14px/1 var(--font-family, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
}

html body #create-modal .post-composer-action--cancel {
    background: color-mix(in srgb, var(--text-primary) 7%, transparent) !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html body #create-modal .post-composer-action--submit {
    background: var(--text-primary) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #create-modal .post-composer-action--submit *,
html body #create-modal .post-composer-action--submit span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #create-modal .post-composer-action:disabled,
html body #create-modal .post-composer-action[disabled],
html body #create-modal .post-composer-action.is-disabled {
    background: color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    color: color-mix(in srgb, var(--text-primary) 34%, transparent) !important;
    -webkit-text-fill-color: color-mix(in srgb, var(--text-primary) 34%, transparent) !important;
    cursor: not-allowed !important;
}

/* Center-stage Community feed. Keep this last so it wins over older timeline/card passes. */
html body.community-active #arena-grid .mobile-community-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px 20px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--community-text) 10%, transparent) !important;
    border-radius: 0 !important;
    background: var(--community-bg) !important;
    box-shadow: none !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-rebyte-meta,
html body.community-active #arena-grid .mobile-community-card-meta-wrap,
html body.community-active #arena-grid .mobile-community-room-source,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    width: min(100%, 348px) !important;
    max-width: 348px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-column: auto !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: block !important;
    margin-bottom: 8px !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 42px !important;
    position: relative !important;
    text-align: center !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    flex: 0 0 auto !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    margin: 0 auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

html body.community-active #arena-grid .mobile-community-byline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
}

html body.community-active #arena-grid .mobile-community-author {
    display: block !important;
    flex: 0 1 auto !important;
    max-width: 100% !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 18px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    grid-column: auto !important;
}

html body.community-active #arena-grid .mobile-community-author::after {
    content: "·" !important;
    display: inline-block !important;
    margin-left: 7px !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-weight: 650 !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    display: block !important;
    flex: 0 1 auto !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 650 !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    grid-column: auto !important;
}

html body.community-active #arena-grid .mobile-community-meta-pill {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

html body.community-active #arena-grid .community-post-menu-wrap {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    grid-column: auto !important;
}

html body.community-active #arena-grid .community-post-menu-trigger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    opacity: 0.55 !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 780 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-message {
    display: block !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    text-align: center !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: clamp(17px, 4.35vw, 21px) !important;
    line-height: 1.32 !important;
    font-weight: 520 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(16px, 4.1vw, 19px) !important;
    line-height: 1.34 !important;
    font-weight: 500 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    display: flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .mobile-community-media-stage img,
html body.community-active #arena-grid .mobile-community-media-stage iframe,
html body.community-active #arena-grid .mobile-community-media-stage video {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    object-fit: cover !important;
}

html body.community-active #arena-grid .mobile-community-media-stage video {
    max-height: 360px !important;
    object-fit: contain !important;
    background: #000000 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage img {
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: 460px !important;
    object-fit: contain !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 0 !important;
    padding: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(20px, 8vw, 34px) !important;
    width: 100% !important;
}

html body.community-active #arena-grid .community-feed-action {
    width: auto !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    gap: 5px !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    font-size: 21px !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

/* Post detail action bar: larger than feed, still clean and icon-first. */
html body #enter-modal.post-detail-page .post-detail-engagement {
    padding: 12px 0 !important;
    background: var(--background, #ffffff) !important;
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
}

html body #enter-modal.post-detail-page [id^="engagement-row-"] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 44px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 42px !important;
    padding-right: 20px !important;
}

html body #enter-modal.post-detail-page .community-detail-action {
    width: 42px !important;
    height: 48px !important;
    min-width: 42px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: color-mix(in srgb, var(--text-primary) 72%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

html body #enter-modal.post-detail-page .community-detail-action i,
html body #enter-modal.post-detail-page .community-detail-action .community-detail-action-icon {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 24px !important;
    line-height: 1 !important;
}

html body #enter-modal.post-detail-page .community-detail-action span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 780 !important;
    letter-spacing: 0 !important;
}

html body #enter-modal.post-detail-page .community-detail-action span[hidden] {
    display: none !important;
}

html[data-theme^="dark"] body #enter-modal.post-detail-page .community-detail-action,
body.dark-theme #enter-modal.post-detail-page .community-detail-action,
body.dark-accent-theme #enter-modal.post-detail-page .community-detail-action {
    color: rgba(255, 255, 255, 0.78) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Center-stage polish pass: tighter rhythm and cleaner social-card proportions. */
html body.community-active #arena-grid .mobile-community-card {
    --community-feed-lane: min(78vw, 330px);
    padding: 20px 18px 24px !important;
    min-height: 0 !important;
}

html body.community-active #arena-grid .mobile-community-card:first-child {
    padding-top: 18px !important;
}

html body.community-active #arena-grid .mobile-community-rebyte-meta,
html body.community-active #arena-grid .mobile-community-card-meta-wrap,
html body.community-active #arena-grid .mobile-community-room-source,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    width: var(--community-feed-lane) !important;
    max-width: var(--community-feed-lane) !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    margin-bottom: 7px !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    gap: 6px !important;
    padding: 0 38px !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--community-text) 10%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-byline {
    gap: 6px !important;
}

html body.community-active #arena-grid .mobile-community-author {
    font-size: 17px !important;
    font-weight: 790 !important;
    line-height: 1.08 !important;
}

html body.community-active #arena-grid .mobile-community-author::after {
    margin-left: 6px !important;
    opacity: 0.75 !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    font-size: 14px !important;
    font-weight: 560 !important;
    letter-spacing: 0.03em !important;
}

html body.community-active #arena-grid .community-post-menu-wrap {
    top: 4px !important;
    right: 1px !important;
    width: 34px !important;
    height: 34px !important;
}

html body.community-active #arena-grid .community-post-menu-trigger {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    color: color-mix(in srgb, var(--community-text) 48%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-post-menu-trigger i {
    font-size: 17px !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    margin-bottom: 15px !important;
    opacity: 0.48 !important;
    font-size: 10.5px !important;
    font-weight: 760 !important;
    letter-spacing: 0.14em !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-bottom: 15px !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p {
    font-size: clamp(18px, 4.8vw, 22px) !important;
    line-height: 1.28 !important;
    font-weight: 570 !important;
    text-wrap: balance !important;
}

html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p {
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: 1.08 !important;
    font-weight: 640 !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(16px, 4.15vw, 19px) !important;
    line-height: 1.32 !important;
    font-weight: 520 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-bottom: 14px !important;
}

html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .mobile-community-media-stage img,
html body.community-active #arena-grid .mobile-community-media-stage iframe,
html body.community-active #arena-grid .mobile-community-media-stage video {
    border-radius: 16px !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    justify-content: space-between !important;
    gap: 0 !important;
}

html body.community-active #arena-grid .community-feed-action {
    width: 40px !important;
    min-width: 40px !important;
    height: 38px !important;
    min-height: 38px !important;
    color: color-mix(in srgb, var(--community-text) 54%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action.has-engagement {
    color: color-mix(in srgb, var(--community-text) 76%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    font-size: 20px !important;
}

/* Current feed: centered, readable, no room label, no floating action pill. */
html body.community-active #arena-grid .mobile-community-room-source {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-card {
    --community-feed-lane: min(88vw, 390px);
    padding: 18px 22px 22px !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    width: var(--community-feed-lane) !important;
    max-width: var(--community-feed-lane) !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-bottom: 13px !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p {
    font-size: clamp(15.5px, 4vw, 18px) !important;
    line-height: 1.36 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(15px, 3.85vw, 17px) !important;
    line-height: 1.34 !important;
    font-weight: 480 !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
}

html body.community-active #arena-grid .community-feed-action {
    width: 42px !important;
    min-width: 42px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--community-text) 58%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    font-size: 20px !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-count {
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Classic Community feed restore: avatar left, content right, room line visible. */
html body.community-active #arena-grid .mobile-community-card {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    column-gap: 18px !important;
    row-gap: 0 !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 30px 28px !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--community-text) 10%, transparent) !important;
    border-radius: 0 !important;
    background: var(--community-bg) !important;
    box-shadow: none !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) 36px !important;
    column-gap: 18px !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 64px !important;
    padding: 0 !important;
    position: relative !important;
    text-align: left !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    grid-column: 1 !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-byline {
    grid-column: 2 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-author {
    display: inline-block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: clamp(20px, 5.2vw, 28px) !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-author::after {
    content: "" !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    display: inline-block !important;
    flex: 0 0 auto !important;
    color: color-mix(in srgb, var(--community-text) 30%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(15px, 3.8vw, 20px) !important;
    line-height: 1 !important;
    font-weight: 740 !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    text-align: left !important;
}

html body.community-active #arena-grid .community-post-menu-wrap {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
}

html body.community-active #arena-grid .community-post-menu-trigger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
}

html body.community-active #arena-grid .mobile-community-room-source,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
    opacity: 1 !important;
    color: color-mix(in srgb, var(--community-text) 28%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(13px, 3.25vw, 17px) !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-room-source * {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin: 0 0 22px !important;
    padding: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: clamp(19px, 4.9vw, 30px) !important;
    line-height: 1.28 !important;
    font-weight: 430 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-wrap: auto !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(17px, 4.25vw, 22px) !important;
    line-height: 1.32 !important;
    font-weight: 430 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .mobile-community-media-stage img,
html body.community-active #arena-grid .mobile-community-media-stage iframe,
html body.community-active #arena-grid .mobile-community-media-stage video {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
}

html body.community-active #arena-grid .community-feed-action {
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    color: color-mix(in srgb, var(--community-text) 52%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    font-size: clamp(20px, 5.25vw, 28px) !important;
    line-height: 1 !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-label {
    display: inline-flex !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(10px, 2.8vw, 15px) !important;
    line-height: 1 !important;
    font-weight: 860 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-count {
    display: inline-flex !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: clamp(11px, 2.9vw, 15px) !important;
    line-height: 1 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

/* Restore 2026-06-11 Community feed sizing/layout. */
html body.community-active #arena-grid {
    padding: 2px 0 0 !important;
    gap: 0 !important;
    background: var(--community-bg) !important;
}

html body.community-active #arena-grid .mobile-community-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 14px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    border-radius: 0 !important;
    background: var(--community-bg) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: contents !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, max-content) minmax(0, 1fr) 30px !important;
    grid-column: 1 / -1 !important;
    column-gap: 7px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: left !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

html body.community-active #arena-grid .profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html body.community-active #arena-grid .mobile-community-author {
    grid-column: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-author::after {
    content: "" !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    grid-column: 3 !important;
    justify-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 620 !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
}

html body.community-active #arena-grid .community-post-menu-wrap {
    grid-column: 4 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 8 !important;
}

html body.community-active #arena-grid .community-post-menu-trigger {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html body.community-active #arena-grid .mobile-community-room-source,
html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.community-active #arena-grid .mobile-community-room-source {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: -2px !important;
    margin-bottom: 4px !important;
    opacity: 0.5 !important;
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-room-source * {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    padding: 0 !important;
    text-align: left !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p {
    margin: 0 !important;
    max-width: 100% !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
    font-size: clamp(14px, 3.25vw, 15.5px) !important;
    line-height: 1.36 !important;
    font-weight: 430 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-align: left !important;
    text-wrap: auto !important;
}

html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.community-feed-hero .mobile-community-message p {
    font-size: clamp(13.5px, 3.05vw, 14.5px) !important;
    line-height: 1.34 !important;
    font-weight: 430 !important;
}

html body.community-active #arena-grid .mobile-community-card:not(.has-community-media) .mobile-community-message {
    display: flex !important;
    align-items: center !important;
    min-height: 26px !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

html body.community-active #arena-grid .mobile-community-card:not(.has-community-media) .mobile-community-message p {
    width: 100% !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-top: 3px !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .mobile-community-media-stage .bloc-card-media-preview,
html body.community-active #arena-grid .mobile-community-media-stage img,
html body.community-active #arena-grid .mobile-community-media-stage iframe,
html body.community-active #arena-grid .mobile-community-media-stage video {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 132px !important;
    border-radius: 14px !important;
    border-color: var(--community-border) !important;
}

html body.community-active #arena-grid .mobile-community-media-stage video {
    max-height: 280px !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 2px !important;
    padding: 0 0 4px !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-actions > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
}

html body.community-active #arena-grid .community-feed-action {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    color: color-mix(in srgb, var(--community-text) 58%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .community-feed-action *,
html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action strong,
html body.community-active #arena-grid .community-feed-action span {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action i,
html body.community-active #arena-grid .community-feed-action .community-action-icon {
    flex: 0 0 auto !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-label {
    display: inline-flex !important;
    font-size: 8px !important;
    font-weight: 680 !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
}

html body.community-active #arena-grid .community-feed-action .community-action-count {
    display: inline !important;
    position: static !important;
    font-size: 9.5px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin-right: 1px !important;
}

html body.community-active #arena-grid .community-feed-action.has-engagement {
    color: var(--community-text) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .community-feed-action.has-engagement .community-action-label {
    display: none !important;
}

/* TRUE EOF OVERRIDE: match the current BYTES mobile action rail in Community feed. */
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 8px 0 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail,
html body.community-active #arena-grid .mobile-community-actions > div.bytes-tv-mobile-hero-rail {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    color: rgba(17, 17, 17, 0.58) !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 9px !important;
    right: 0 !important;
    width: 1px !important;
    height: 20px !important;
    background: rgba(17, 17, 17, 0.08) !important;
    pointer-events: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action .bytes-tv-mobile-hero-rail__icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action i {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 17px !important;
    line-height: 18px !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    filter: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-label,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action [data-hero-action-label] {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-count,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action strong[data-hero-action-count] {
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement {
    color: rgba(17, 17, 17, 0.72) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement strong[data-hero-action-count]:not([hidden]) {
    position: absolute !important;
    top: 1px !important;
    right: calc(50% - 22px) !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 4px 10px rgba(17, 17, 17, 0.18) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions,
body.dark-theme.community-active #arena-grid .mobile-community-actions,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions {
    border-top-color: transparent !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button,
body.dark-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    color: rgba(255, 255, 255, 0.62) !important;
}

html[data-theme^="dark"] body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after,
body.dark-accent-theme.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.10) !important;
}

/* Align the first Community action icon with the first letter of the post body. */
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child {
    justify-content: flex-start !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:first-child strong[data-hero-action-count]:not([hidden]) {
    right: auto !important;
    left: 14px !important;
}

/* Use fixed action slots so the first icon can align left without breaking spacing. */
html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    justify-content: space-between !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button:not(:last-child)::after {
    right: -50% !important;
}

/* Replace the old top-right post menu with the room label in the meta row. */
html body.community-active #arena-grid .mobile-community-meta-row {
    grid-template-columns: 42px minmax(0, max-content) minmax(0, 1fr) auto !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: min(36vw, 150px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    overflow: hidden !important;
    color: color-mix(in srgb, var(--community-text) 34%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 760 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-align: right !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta i {
    flex: 0 0 auto !important;
    font-size: 10px !important;
}

/* Final Community feed overrides: latest rules win over legacy duplicated blocks. */
html body.community-active #arena-grid .mobile-community-card {
    padding-top: 8px !important;
    padding-bottom: 5px !important;
}

html body.community-active #arena-grid .mobile-community-message {
    min-height: 0 !important;
    margin-bottom: 4px !important;
}

html body.community-active #arena-grid .mobile-community-card:not(.has-community-media) .mobile-community-message {
    min-height: 0 !important;
    margin-bottom: 3px !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p {
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif) !important;
    font-weight: var(--font-weight, 430) !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 1px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    min-height: 42px !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    max-width: min(40vw, 166px) !important;
    opacity: 1 !important;
    color: color-mix(in srgb, var(--community-text) 32%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--rebyte {
    color: color-mix(in srgb, var(--community-text) 42%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--rebyte span {
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-rebyte-meta {
    display: none !important;
}

/* Reverted Community UI polish block. Kept here disabled so only the requested targeted fixes remain.
html body.community-active {
    --community-bg: #ffffff;
    --community-surface: #ffffff;
    --community-soft: #f7f8fa;
    --community-line: rgba(15, 23, 42, 0.08);
    --community-muted: rgba(15, 23, 42, 0.44);
    --community-text: #06070a;
    --community-accent: var(--primary-color, #ff4d2e);
}

html body.community-active #community-feed-shell {
    gap: 16px !important;
    padding-bottom: 18px !important;
    background: var(--community-bg) !important;
}

html body.community-active #community-room-rail,
html body.community-active .community-room-rail {
    gap: 14px !important;
    padding-top: 10px !important;
    padding-bottom: 18px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    scroll-padding-left: 24px !important;
    scroll-padding-right: 24px !important;
}

html body.community-active .community-room-card,
html body.community-active .community-room-card.is-all {
    flex-basis: 174px !important;
    min-height: 118px !important;
    padding: 15px 16px 14px !important;
    border-radius: 22px !important;
    border: 1px solid var(--community-line) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 248, 250, 0.96)) !important;
    color: var(--community-text) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
}

html body.community-active .community-room-card.has-image {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background-size: cover !important;
    background-position: center !important;
}

html body.community-active .community-room-card.is-active,
html body.community-active .community-room-card.is-all.is-active {
    border-color: color-mix(in srgb, var(--community-accent) 34%, rgba(15, 23, 42, 0.1)) !important;
    box-shadow:
        0 16px 36px rgba(15, 23, 42, 0.08),
        inset 0 -4px 0 var(--community-accent) !important;
}

html body.community-active .community-room-card::after {
    background: linear-gradient(180deg, transparent 8%, rgba(0, 0, 0, 0.34)) !important;
}

html body.community-active .community-room-card:not(.has-image)::after {
    background: transparent !important;
}

html body.community-active .community-room-kicker,
html body.community-active .community-room-card.is-all .community-room-kicker {
    color: color-mix(in srgb, var(--community-text) 72%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
}

html body.community-active .community-room-title,
html body.community-active .community-room-card.is-all .community-room-title {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

html body.community-active .community-room-card.has-image .community-room-kicker,
html body.community-active .community-room-card.has-image .community-room-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body.community-active .community-room-preview,
html body.community-active .community-room-card.is-all .community-room-preview {
    color: color-mix(in srgb, var(--community-text) 48%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

html body.community-active .community-room-count,
html body.community-active .community-room-card.is-all .community-room-count {
    color: color-mix(in srgb, var(--community-text) 55%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
}

html body.community-active .community-room-card.has-image .community-room-preview,
html body.community-active .community-room-card.has-image .community-room-count {
    color: rgba(255, 255, 255, 0.82) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active .community-feed-modes {
    padding: 0 30px !important;
    gap: 26px !important;
}

html body.community-active .community-feed-modes button {
    min-height: 38px !important;
    font-size: 19px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid {
    background: var(--community-bg) !important;
}

html body.community-active #arena-grid .mobile-community-card {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 30px 19px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-line) !important;
    border-radius: 0 !important;
    background: var(--community-bg) !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, max-content) minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
    min-height: 46px !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.02)) !important;
    border: 1px solid var(--community-line) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

html body.community-active #arena-grid .mobile-community-author {
    align-self: center !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    align-self: center !important;
    color: color-mix(in srgb, var(--community-text) 34%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: 0.08em !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    align-self: center !important;
    color: color-mix(in srgb, var(--community-text) 34%, transparent) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
}

html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.community-active #arena-grid .mobile-community-message {
    margin-top: -2px !important;
    margin-bottom: 9px !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    font-size: clamp(15px, 3.75vw, 17px) !important;
    line-height: 1.35 !important;
    font-weight: 470 !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 3px !important;
    padding-top: 0 !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    min-height: 38px !important;
    justify-content: space-between !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    color: color-mix(in srgb, var(--community-text) 48%, transparent) !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button::after,
html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button::after {
    content: none !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action .bytes-tv-mobile-hero-rail__icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action i {
    width: 19px !important;
    height: 19px !important;
    font-size: 18px !important;
    line-height: 19px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement {
    color: color-mix(in srgb, var(--community-text) 68%, transparent) !important;
}
*/

/* BTAP signal plate: Community post object only. */
html body.community-active #arena-grid {
    --btap-signal-ink: #09090b;
    --btap-signal-muted: rgba(9, 9, 11, 0.46);
    --btap-signal-line: rgba(9, 9, 11, 0.09);
    --btap-signal-soft: #f5f6f8;
    --btap-signal-accent: var(--primary-color, #ff4015);
    background: #ffffff !important;
    padding: 2px 0 100px !important;
}

/* Flat feed row, like the virtual map post list: no card box, no shadow, no
   radius, no accent stripe — just content on a hairline. */
html body.community-active #arena-grid .mobile-community-card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    column-gap: 11px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border, rgba(9, 9, 11, 0.08)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body.community-active #arena-grid .mobile-community-card:active {
    background: rgba(9, 9, 11, 0.035) !important;
}

/* Accent stripe and corner tick removed with the card container — decoration
   that only made sense on a bordered tile. */
html body.community-active #arena-grid .mobile-community-card::before,
html body.community-active #arena-grid .mobile-community-card::after {
    content: none !important;
}

html body.community-active #arena-grid .mobile-community-card-meta-wrap {
    display: contents !important;
}

html body.community-active #arena-grid .mobile-community-meta-row {
    display: grid !important;
    grid-template-columns: 44px minmax(0, max-content) minmax(0, 1fr) auto !important;
    grid-column: 1 / -1 !important;
    column-gap: 9px !important;
    align-items: center !important;
    min-height: 44px !important;
}

html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar {
    grid-column: 1 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(9, 9, 11, 0.10) !important;
    background: var(--btap-signal-soft) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .mobile-community-author {
    grid-column: 2 !important;
    color: var(--btap-signal-ink) !important;
    -webkit-text-fill-color: var(--btap-signal-ink) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid .mobile-community-timestamp {
    grid-column: 3 !important;
    justify-self: start !important;
    color: var(--btap-signal-muted) !important;
    -webkit-text-fill-color: var(--btap-signal-muted) !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: 0.11em !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--meta {
    grid-column: 4 !important;
    justify-self: end !important;
    max-width: min(34vw, 128px) !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    border: 1px solid rgba(9, 9, 11, 0.10) !important;
    border-radius: 999px !important;
    background: rgba(9, 9, 11, 0.035) !important;
    color: rgba(9, 9, 11, 0.50) !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;
}

html body.community-active #arena-grid .mobile-community-message,
html body.community-active #arena-grid .mobile-community-media-stage,
html body.community-active #arena-grid .mobile-community-actions {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body.community-active #arena-grid .mobile-community-message {
    position: relative !important;
    margin-top: 7px !important;
    margin-bottom: 7px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(9, 9, 11, 0.07) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(9, 9, 11, 0.045) !important;
}

html body.community-active #arena-grid .mobile-community-message::before {
    content: "" !important;
    position: absolute !important;
    left: -7px !important;
    top: 14px !important;
    width: 7px !important;
    height: 12px !important;
    border-radius: 999px 0 0 999px !important;
    background: var(--btap-signal-accent) !important;
}

html body.community-active #arena-grid .mobile-community-message p,
html body.community-active #arena-grid .community-feed-hero .mobile-community-message p,
html body.community-active #arena-grid .community-feed-media .mobile-community-message p,
html body.community-active #arena-grid .community-feed-note .mobile-community-message p,
html body.community-active #arena-grid .community-feed-essay .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-short .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-medium .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.signal-long .mobile-community-message p,
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-message p {
    margin: 0 !important;
    color: var(--btap-signal-ink) !important;
    -webkit-text-fill-color: var(--btap-signal-ink) !important;
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif) !important;
    font-size: clamp(14px, 3.5vw, 16px) !important;
    line-height: 1.35 !important;
    font-weight: var(--font-weight, 520) !important;
    letter-spacing: 0 !important;
}

html body.community-active #arena-grid .mobile-community-media-stage {
    margin-top: 2px !important;
    margin-bottom: 8px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .mobile-community-actions {
    margin-top: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    min-height: 34px !important;
    width: auto !important;
}

html body.community-active #arena-grid .mobile-community-actions > div.bytes-tv-mobile-hero-rail {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 32px !important;
    width: auto !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    position: relative !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 32px !important;
    min-height: 32px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(9, 9, 11, 0.045) !important;
    color: rgba(9, 9, 11, 0.52) !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 30px !important;
    min-height: 30px !important;
    background: rgba(9, 9, 11, 0.045) !important;
    border-radius: 999px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.bytes-tv-mobile-hero-rail__button::after,
html body.community-active #arena-grid .mobile-community-actions .bytes-tv-mobile-hero-rail__button::after {
    content: none !important;
    display: none !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action .community-action-icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action .bytes-tv-mobile-hero-rail__icon,
html body.community-active #arena-grid .mobile-community-actions .community-feed-action i {
    width: 17px !important;
    height: 17px !important;
    font-size: 16px !important;
    line-height: 17px !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement {
    color: var(--btap-signal-ink) !important;
}

html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement .community-action-count:not([hidden]),
html body.community-active #arena-grid .mobile-community-actions .community-feed-action.has-engagement strong[data-hero-action-count]:not([hidden]) {
    top: -5px !important;
    right: -6px !important;
    min-width: 16px !important;
    height: 16px !important;
    background: var(--btap-signal-ink) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

html body.community-active #arena-grid .mobile-community-room-source.mobile-community-room-source--rebyte {
    grid-column: 2 !important;
    justify-self: end !important;
    margin-top: -3px !important;
    margin-bottom: 5px !important;
    padding: 0 9px !important;
    min-height: 21px !important;
    border-radius: 999px !important;
    background: rgba(255, 64, 21, 0.08) !important;
    color: rgba(9, 9, 11, 0.54) !important;
}

/* Media stays in the content column so its left and right edges line up with the
   engagement row beneath it. The 16/9 crop was enforcing that alignment by making
   every image the same width; sizing to the media keeps the alignment without it. */
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-media-stage {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* height:auto over a max-height cap: the image sets its own height from its
   width, so it always fills the column edge to edge and stays flush with the
   actions row. A max-height with object-fit:contain would letterbox tall images
   inward and break that alignment. */
html body.community-active #arena-grid .mobile-community-card.has-community-media .mobile-community-media-stage img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    border-radius: 16px !important;
}

/* Card flattening (no radius/shadow/border, hairline between posts) lives in the
   inline <style> block in templates/mobile.html, which loads after this file and
   wins on both order and specificity. Only the engagement row is styled here. */

/* ============================================================
   Latest / Media is off the community home.

   The row sat between the header and the first post, so the feed always
   opened an inch further down and the two words read as chrome you had to
   look past to reach the posts. Latest was the mode in all but a rare case,
   so the row was mostly cost.

   Hidden rather than deleted: the markup, setCommunityFeedMode(), and the
   media filter in renderMainFeed all still work, so bringing it back — here
   or somewhere less central — is this one rule, not a rebuild.
   ============================================================ */
/* The hide itself lives with the block in mobile.html that sizes this row:
   that rule is `#id.class` and inline, so it outranks anything here. Splitting
   the decision across both files is how a rule like this goes stale. */

/* The shell now carries only the room rail. Its bottom padding was spacing
   the rail off the modes row that is no longer there. */
html body.community-active #community-feed-shell {
    padding-bottom: 0 !important;
}


/* ---------------------------------------------------------------------------
   External coverage, opened.

   The detail card had no stylesheet at all -- it was rendering as raw markup,
   which put the publisher's mark across the full width as a blown-up blur,
   printed the thumbnail underneath it a second time, and left the type dark
   on a dark stage where it could not be read.

   The shape it wants is the one a link preview has anywhere else: who it is
   from at the top, the picture, then the headline and the way out to it.
   --------------------------------------------------------------------------- */

html body .enter-detail-media-stage:has(.community-coverage-detail-card) {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
}

html body .community-coverage-detail-card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #101014 !important;
    color: #ffffff !important;
}

/* Who it is from. The mark is a favicon or a creator's avatar -- a small
   round thing beside a name, not a banner. */
html body .community-coverage-detail-card__source {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 15px 16px 13px !important;
}

html body .community-coverage-detail-card__source img {
    flex: 0 0 auto !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #24242b !important;
}

html body .community-coverage-detail-card__source div {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html body .community-coverage-detail-card__source strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}

html body .community-coverage-detail-card__source span {
    color: rgba(255, 255, 255, 0.52) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.52) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

/* The picture keeps its own shape rather than being cropped to a banner: a
   reel is a tall frame and an article header is a wide one, and neither
   should be cut to suit the other. */
html body .community-coverage-detail-card__image {
    display: block !important;
    width: 100% !important;
    max-height: 62vh !important;
    margin: 0 !important;
    object-fit: contain !important;
    background: #000000 !important;
}

html body .community-coverage-detail-card__content {
    padding: 16px !important;
}

html body .community-coverage-detail-card__eyebrow {
    display: inline-block !important;
    margin-bottom: 9px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

html body .community-coverage-detail-card__content h1 {
    margin: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.24 !important;
    letter-spacing: -.02em !important;
}

html body .community-coverage-detail-card__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 10px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
}

/* The way out to the thing itself. The only filled element on the card,
   because it is the only thing on it to do. */
html body .community-coverage-detail-card__open {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding: 13px 16px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #101014 !important;
    -webkit-text-fill-color: #101014 !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

html body .community-coverage-detail-card__open span {
    color: #101014 !important;
    -webkit-text-fill-color: #101014 !important;
}

html body .community-coverage-detail-card__open:active {
    opacity: 0.78 !important;
}


/* The stage stamps width:100% on every image inside it, so a photo posted on
   its own fills the screen. The coverage card brings its own images -- a
   34px round mark and a picture that keeps its shape -- and was being caught
   by the same net, which is what blew the publisher's favicon up to 270px and
   made it the whole screen. Named through #enter-modal to outrank it. */
html body #enter-modal .enter-detail-media-stage .community-coverage-detail-card__source img,
html body #enter-modal.post-detail-page .enter-detail-media-stage .community-coverage-detail-card__source img,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .community-coverage-detail-card__source img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

html body #enter-modal .enter-detail-media-stage .community-coverage-detail-card__image,
html body #enter-modal.post-detail-page .enter-detail-media-stage .community-coverage-detail-card__image,
html body #enter-modal.post-detail-page.media-detail-active .enter-detail-media-stage .community-coverage-detail-card__image {
    width: 100% !important;
    height: auto !important;
    max-height: 62vh !important;
    object-fit: contain !important;
}


/* The type on the card, named through #enter-modal.
   The card is dark by design, and the theme's `[data-theme="light"] *` rule
   paints every element near-black !important -- which on this surface is the
   headline written in the background colour. Each element is named again at a
   weight that outranks it. */
html body #enter-modal .community-coverage-detail-card__source strong,
html body #enter-modal .community-coverage-detail-card__content h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #enter-modal .community-coverage-detail-card__source span,
html body #enter-modal .community-coverage-detail-card__eyebrow {
    color: rgba(255, 255, 255, 0.55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
}

html body #enter-modal .community-coverage-detail-card__meta,
html body #enter-modal .community-coverage-detail-card__meta span {
    color: rgba(255, 255, 255, 0.45) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.45) !important;
}

html body #enter-modal .community-coverage-detail-card__open,
html body #enter-modal .community-coverage-detail-card__open span {
    background: #ffffff !important;
    color: #101014 !important;
    -webkit-text-fill-color: #101014 !important;
}

html body #enter-modal .community-coverage-detail-card__open span {
    background: transparent !important;
}


/* ---------------------------------------------------------------------------
   External coverage in the feed.

   This card had no stylesheet either, so its three spans ran together as one
   line of inline text -- the headline, the domain and the link in a single
   sentence, clipped at the left edge and overflowing the right, sitting on
   the grey the card inherited.

   No container. The picture has a shape of its own; under it the headline,
   the source and the way out sit on the page with space between them, the
   same as everything else in the feed.
   --------------------------------------------------------------------------- */

html body .community-coverage-card {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body .community-coverage-card__image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 58vh !important;
    margin: 0 0 12px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    background: #f1f1f3 !important;
}

/* The spans are inline by default, which is what put three separate things on
   one running line. */
html body .community-coverage-card__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
    /* The gutter the image does not need. Its absence is what clipped the
       first character of the headline against the screen edge. */
    padding: 0 2px !important;
}

html body .community-coverage-card__headline {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #101114 !important;
    -webkit-text-fill-color: #101114 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.26 !important;
    letter-spacing: -.02em !important;
}

html body .community-coverage-card__footer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #8b8b93 !important;
    -webkit-text-fill-color: #8b8b93 !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
}

/* Text with a rule under it rather than a button: the card is not a page of
   its own, and a filled pill here would be the loudest thing in the feed. */
html body .community-coverage-card__cta {
    display: inline-block !important;
    margin-top: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #101114 !important;
    -webkit-text-fill-color: #101114 !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border-bottom: 1.5px solid rgba(17, 17, 20, 0.22) !important;
    padding-bottom: 1px !important;
}

html body .community-coverage-card__cta:active {
    opacity: 0.6 !important;
}


/* The arrow on the way-out button.
   "↗" is an emoji-presentation character on iOS, so it arrived as a blue
   glyph in a colour of its own -- childish beside the type it belongs to.
   The icon font draws it as type, in the button's own colour. */
html body #enter-modal .community-coverage-detail-card__open i {
    color: #101014 !important;
    -webkit-text-fill-color: #101014 !important;
    font-size: 11px !important;
    opacity: 0.55 !important;
}

/* The frame behind a media preview is for a photograph that needs a ground to
   sit on. A coverage card brings its own picture with its own corners, so the
   frame shows as a grey box drawn around it -- a container around something
   that was already a shape. */
html body .bloc-card-media-preview:has(.community-coverage-card) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* The way out reads as a link, because it is one.
   The URLs in a post are painted #1D7FFF, and "Read the full story" is the
   same gesture pointing at the same address -- it was black only because
   `[data-theme="light"] *` forces black on everything and nothing outranked
   it. Written the way .community-post-link is written, through the grid's id,
   which is what carries enough weight to beat a starred rule. */
html body.community-active #arena-grid .community-coverage-card__cta,
html body #enter-modal .community-coverage-card__cta,
html body .post-detail-page .community-coverage-card__cta {
    color: #1D7FFF !important;
    -webkit-text-fill-color: #1D7FFF !important;
    border-bottom-color: rgba(29, 127, 255, 0.3) !important;
}

/* On the dark detail card the filled button keeps its dark type -- blue on
   white inside a black card is two accents fighting -- but the arrow beside
   it takes the same blue as the links. */
html body #enter-modal .community-coverage-detail-card__open {
    background: #1D7FFF !important;
}

html body #enter-modal .community-coverage-detail-card__open,
html body #enter-modal .community-coverage-detail-card__open span,
html body #enter-modal .community-coverage-detail-card__open i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Community uses people-first identity. Keep every profile image circular,
   including the feed, detail view, replies, section identity, and comments. */
html body.community-active #arena-grid .profile-avatar,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar,
html body.community-active .community-section-avatar,
html body.community-active .enter-post-avatar,
html body.community-active .post-detail-inline-reply-avatar,
html body.community-active [class^="comment-avatar-"],
html body.community-active [class*=" comment-avatar-"] {
    border-radius: 50% !important;
    overflow: hidden !important;
}

html body.community-active #arena-grid .profile-avatar img,
html body.community-active #arena-grid .mobile-community-meta-row .profile-avatar img,
html body.community-active .community-section-avatar img,
html body.community-active .enter-post-avatar img,
html body.community-active .post-detail-inline-reply-avatar img,
html body.community-active [class^="comment-avatar-"] img,
html body.community-active [class*=" comment-avatar-"] img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

#map-post-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    background: var(--mobile-virtual-post-modal-bg, var(--bg-primary, #fff)) !important;
    background-color: var(--mobile-virtual-post-modal-bg, var(--bg-primary, #fff)) !important;
    color: var(--mobile-virtual-post-text, #000) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

#map-post-modal,
#map-post-modal * {
    box-sizing: border-box;
}

#map-post-location::placeholder,
#map-post-message::placeholder,
#map-post-location::-webkit-input-placeholder,
#map-post-message::-webkit-input-placeholder,
#map-post-location::-moz-placeholder,
#map-post-message::-moz-placeholder {
    color: var(--mobile-virtual-post-hint, rgba(0, 0, 0, 0.5)) !important;
    opacity: 0.7 !important;
}

.map-post-form-shell {
    width: 100%;
    max-width: min(420px, 100vw);
    min-width: 0;
    overflow-x: hidden;
    margin: 0 auto;
    padding: calc(104px + env(safe-area-inset-top)) 16px calc(100px + env(safe-area-inset-bottom)) 16px;
}

.map-post-form-shell > * {
    max-width: 100%;
    min-width: 0;
}

.map-post-field {
    margin-bottom: 18px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.map-post-label,
.map-post-marker-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mobile-virtual-post-label, rgba(0, 0, 0, 0.6));
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.map-post-label {
    margin-bottom: 9px;
}

.map-post-marker-choice {
    margin-bottom: 10px;
}

#map-post-location,
#map-post-message,
#map-post-emoji,
.map-post-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--mobile-virtual-post-input-bg, #fff) !important;
    background-color: var(--mobile-virtual-post-input-bg, #fff) !important;
    background-image: none !important;
    color: var(--mobile-virtual-post-text, #000) !important;
    -webkit-text-fill-color: var(--mobile-virtual-post-text, #000) !important;
    caret-color: var(--mobile-virtual-post-text, #000) !important;
}

#map-post-location,
#map-post-message {
    box-shadow: inset 0 0 0 9999px var(--mobile-virtual-post-input-bg, #fff) !important;
}

#map-post-location:-webkit-autofill,
#map-post-message:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--mobile-virtual-post-input-bg, #fff) inset !important;
    -webkit-text-fill-color: var(--mobile-virtual-post-text, #000) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

.map-post-input {
    width: 100%;
    max-width: 100%;
    padding: 18px;
    border: 1px solid var(--mobile-virtual-post-input-border, rgba(0, 0, 0, 0.15));
    border-radius: 22px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.25;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    outline: none;
}

.map-post-input:focus {
    border-color: var(--primary-color);
    box-shadow: inset 0 0 0 9999px var(--mobile-virtual-post-input-bg, #fff), 0 0 0 4px rgba(var(--primary-rgb), 0.16) !important;
}

.map-post-textarea {
    min-height: 132px;
    resize: none;
}

.map-post-marker-panel {
    margin: 24px 0 26px;
    padding: 14px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--mobile-virtual-post-input-border, rgba(0, 0, 0, 0.15));
    border-radius: 26px;
    background: var(--mobile-virtual-post-marker-bg, rgba(0, 0, 0, 0.035));
    display: grid;
    gap: 14px;
    overflow: hidden;
}

.map-post-marker-panel > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.map-post-icon-row {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 0 2px 1px 0;
}

.map-post-icon-row::-webkit-scrollbar {
    display: none;
}

.map-post-icon-chip {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    border: 1px solid var(--mobile-virtual-post-input-border, rgba(0, 0, 0, 0.15));
    background: var(--mobile-virtual-post-input-bg, #fff);
    color: var(--mobile-virtual-post-text, #000);
    font-size: 21px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.map-post-icon-chip.is-active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.16);
}

.map-post-icon-more {
    font-size: 9px !important;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

.map-post-icon-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10005;
    display: grid;
    place-items: end center;
    padding: 18px;
    background: rgba(0, 0, 0, 0.22);
}

.map-post-icon-picker {
    width: min(392px, 100%);
    max-height: min(58vh, 430px);
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid var(--mobile-virtual-post-input-border, rgba(0, 0, 0, 0.15));
    background: var(--mobile-virtual-post-modal-bg, #fff) !important;
    color: var(--mobile-virtual-post-text, #000) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.map-post-icon-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 10px 14px 6px;
}

.map-post-icon-picker-title {
    font-size: 13px;
    font-weight: 850;
    color: var(--mobile-virtual-post-text, #000) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.map-post-icon-picker-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: var(--mobile-virtual-post-close-bg, #fff) !important;
    color: var(--mobile-virtual-post-text, #111) !important;
    border: 1px solid var(--mobile-virtual-post-input-border, rgba(0, 0, 0, 0.15));
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.map-post-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 8px 16px 18px;
    overflow-y: auto;
    max-height: calc(min(58vh, 430px) - 48px);
}

.map-post-icon-picker-option {
    aspect-ratio: 1;
    border: 1px solid var(--mobile-virtual-post-input-border, rgba(0, 0, 0, 0.15));
    border-radius: 18px;
    background: var(--mobile-virtual-post-input-bg, #fff);
    color: var(--mobile-virtual-post-text, #000);
    font-size: 25px;
    display: grid;
    place-items: center;
}

.map-post-photo-picker {
    min-height: 72px;
    border-radius: 22px;
    border: 1px dashed var(--mobile-virtual-post-input-border, rgba(0, 0, 0, 0.15));
    background: var(--mobile-virtual-post-photo-bg, rgba(255, 255, 255, 0.72));
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--mobile-virtual-post-text, #000);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.map-post-photo-thumb {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(var(--primary-rgb), 0.16);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.map-post-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.map-post-photo-copy {
    min-width: 0;
}

.map-post-photo-title {
    display: block;
    font-size: 15px;
    font-weight: 850;
    color: var(--mobile-virtual-post-text, #000);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-post-photo-hint {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 650;
    color: var(--mobile-virtual-post-hint, rgba(0, 0, 0, 0.5));
}

.map-post-photo-action {
    border: 0;
    border-radius: 999px;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--mobile-virtual-post-action-bg, #111);
    color: var(--mobile-virtual-post-action-text, #fff);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: grid;
    place-items: center;
    max-width: 38px;
    overflow: hidden;
}

/* Quiet map composer refresh. Keep this at the end so it overrides legacy inline styling. */
#map-post-modal {
    --mobile-virtual-post-modal-bg: #ffffff;
    --mobile-virtual-post-text: #111111;
    --mobile-virtual-post-hint: rgba(17, 17, 17, 0.42);
    --mobile-virtual-post-label: rgba(17, 17, 17, 0.70);
    --mobile-virtual-post-input-bg: #ffffff;
    --mobile-virtual-post-input-border: rgba(17, 17, 17, 0.14);
    --mobile-virtual-post-marker-bg: #ffffff;
    --mobile-virtual-post-photo-bg: #ffffff;
    --mobile-virtual-post-action-bg: #f5f5f5;
    --mobile-virtual-post-action-text: #111111;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color-scheme: light !important;
}

#map-post-modal * {
    font-family: inherit !important;
    letter-spacing: 0 !important;
    color-scheme: light !important;
}

#map-post-modal .map-post-form-shell {
    max-width: min(430px, 100vw) !important;
    padding: calc(126px + env(safe-area-inset-top)) 20px calc(92px + env(safe-area-inset-bottom)) !important;
}

#map-post-modal .map-post-header {
    margin: 0 0 24px !important;
    text-align: left !important;
    display: grid !important;
    gap: 5px !important;
}

#map-post-modal .map-post-header h2 {
    margin: 0 0 5px !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 30px !important;
    line-height: 1.02 !important;
    font-weight: 760 !important;
}

#map-post-modal .map-post-header p {
    color: rgba(17, 17, 17, 0.54) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.54) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 560 !important;
}

#map-post-modal .map-post-field {
    margin-bottom: 20px !important;
}

#map-post-modal .map-post-label,
#map-post-modal .map-post-marker-choice {
    gap: 7px !important;
    margin-bottom: 8px !important;
    color: rgba(17, 17, 17, 0.66) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.66) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 720 !important;
    text-transform: none !important;
}

#map-post-modal .map-post-label i,
#map-post-modal .map-post-marker-choice i {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 13px !important;
}

#map-post-modal .map-post-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    min-height: 56px !important;
    padding: 15px 16px !important;
    border: 1px solid rgba(17, 17, 17, 0.16) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 520 !important;
}

#map-post-modal input,
#map-post-modal textarea,
#map-post-modal select,
#map-post-modal #map-post-location,
#map-post-modal #map-post-message {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    caret-color: #111111 !important;
    color-scheme: light !important;
    box-shadow: inset 0 0 0 1000px #ffffff !important;
}

#map-post-modal .map-post-input:focus {
    border-color: rgba(17, 17, 17, 0.48) !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.06) !important;
}

#map-post-modal .map-post-textarea {
    min-height: 130px !important;
}

#map-post-modal #map-post-location::placeholder,
#map-post-modal #map-post-message::placeholder {
    color: rgba(17, 17, 17, 0.38) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.38) !important;
    font-weight: 520 !important;
}

#map-post-modal .map-post-marker-panel {
    margin: 24px 0 26px !important;
    padding: 14px !important;
    border: 1px solid rgba(17, 17, 17, 0.14) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    gap: 12px !important;
}

#map-post-modal .map-post-icon-row {
    gap: 8px !important;
    padding: 0 0 2px !important;
}

#map-post-modal .map-post-icon-chip {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(17, 17, 17, 0.14) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 20px !important;
}

#map-post-modal .map-post-icon-chip.is-active {
    border-color: #111111 !important;
    box-shadow: inset 0 0 0 1px #111111 !important;
}

#map-post-modal .map-post-icon-more {
    color: rgba(17, 17, 17, 0.72) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.72) !important;
    font-size: 11px !important;
    font-weight: 680 !important;
}

#map-post-modal .map-post-photo-picker {
    min-height: 66px !important;
    padding: 10px !important;
    border: 1px dashed rgba(17, 17, 17, 0.18) !important;
    border-radius: 17px !important;
    background: #ffffff !important;
    grid-template-columns: 44px minmax(0, 1fr) 36px !important;
}

#map-post-modal .map-post-photo-thumb {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background: #f4f4f4 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

#map-post-modal .map-post-photo-title {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 15px !important;
    font-weight: 650 !important;
}

#map-post-modal .map-post-photo-action {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    background: #f4f4f4 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: none !important;
}

#map-post-modal .map-post-identity {
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 24px !important;
    align-items: center !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(17, 17, 17, 0.50) !important;
    -webkit-text-fill-color: rgba(17, 17, 17, 0.50) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 620 !important;
}

#map-post-modal .map-post-actions {
    gap: 10px !important;
}

#map-post-modal .map-post-submit-btn,
#map-post-modal .map-post-cancel-btn {
    min-height: 56px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 680 !important;
    transform: none !important;
    box-shadow: none !important;
}

#map-post-modal .map-post-submit-btn {
    border: 1px solid #111111 !important;
    background: #111111 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#map-post-modal .map-post-submit-btn * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#map-post-modal .map-post-cancel-btn {
    border: 1px solid rgba(17, 17, 17, 0.14) !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

#map-post-modal,
[data-theme="dark"] #map-post-modal,
[data-theme="dark-accent"] #map-post-modal {
    --mobile-virtual-post-modal-bg: #ffffff !important;
    --mobile-virtual-post-text: #111111 !important;
    --mobile-virtual-post-hint: rgba(17, 17, 17, 0.42) !important;
    --mobile-virtual-post-label: rgba(17, 17, 17, 0.70) !important;
    --mobile-virtual-post-input-bg: #ffffff !important;
    --mobile-virtual-post-input-border: rgba(17, 17, 17, 0.14) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ============================================================
   Composer look, matching the Create and Community sheets.
   The modal ships inline styles, so most of this carries !important.
   ============================================================ */
#map-post-modal { background: #FBFBF9 !important; background-color: #FBFBF9 !important; font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important; }
#map-post-modal .mpc-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 14px !important; padding: 6px 0 0 !important; }
#map-post-modal .mpc-bar-cancel, #map-post-modal .mpc-bar-spacer { width: 64px !important; flex: 0 0 64px !important; }
#map-post-modal .mpc-bar-cancel {
    margin: 0 !important; padding: 8px 0 !important; border: 0 !important;
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    text-align: left !important; font-size: 13px !important; font-weight: 600 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer;
}
#map-post-modal .mpc-bar-title { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#map-post-modal .mpc-bar-title small { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; text-decoration: none !important; }

#map-post-modal .mpc-posting { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; }
#map-post-modal .mpc-posting-avatar { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 12px !important; overflow: hidden !important; background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 800 !important; }
#map-post-modal .mpc-posting-avatar span { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#map-post-modal .mpc-posting-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
#map-post-modal .mpc-posting-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
#map-post-modal .mpc-posting-label { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#map-post-modal .mpc-posting-name { font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }

#map-post-modal .mpc-eyebrow { display: flex !important; align-items: baseline !important; justify-content: space-between !important; margin: 14px 0 8px !important; padding: 0 4px !important; box-sizing: border-box !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#map-post-modal .mpc-eyebrow span { font: inherit !important; color: inherit !important; -webkit-text-fill-color: inherit !important; }
#map-post-modal .mpc-eyebrow span:last-child { letter-spacing: 0.08em !important; text-transform: none !important; }

#map-post-modal .mpc-card { margin: 0 !important; padding: 10px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important; }
#map-post-modal .mpc-card--location { padding: 4px !important; }
#map-post-modal .mpc-card--location #map-post-location { width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 12px !important; border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; font-size: 14px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#map-post-modal .mpc-card--message { padding: 2px 4px !important; }
#map-post-modal .mpc-card--message #map-post-message { width: 100% !important; min-height: 96px !important; margin: 0 !important; padding: 14px 12px !important; border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; resize: none !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 500 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#map-post-modal #map-post-location::placeholder, #map-post-modal #map-post-message::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; }

#map-post-modal .mpc-foot { margin: 14px 0 0 !important; padding: 0 !important; display: block !important; }
#map-post-modal .map-post-submit-btn {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: 100% !important; height: 54px !important; min-height: 54px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 16px !important; background: #EDEDE8 !important; box-shadow: none !important; transform: none !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important;
}
#map-post-modal .map-post-submit-btn * { color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; font-size: 12px !important; }
#map-post-modal .map-post-submit-btn i { font-size: 11px !important; }
#map-post-modal .map-post-submit-btn.is-ready { background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; }
#map-post-modal .map-post-submit-btn.is-ready, #map-post-modal .map-post-submit-btn.is-ready * { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#map-post-modal .mpc-note { margin: 9px 0 0 !important; text-align: center !important; font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

#map-post-modal .mpc-more { margin: 18px 0 0 !important; border-top: 1px solid #EAEAE6 !important; }
#map-post-modal .mpc-more-summary { display: flex !important; align-items: center !important; justify-content: space-between !important; list-style: none !important; padding: 16px 4px 14px !important; cursor: pointer; font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#map-post-modal .mpc-more-summary::-webkit-details-marker { display: none !important; }
#map-post-modal .mpc-more-meta { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
#map-post-modal .mpc-more-meta em { font-style: normal !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#map-post-modal .mpc-more-meta i { font-size: 11px !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; transition: transform 160ms ease; }
#map-post-modal .mpc-more[open] .mpc-more-meta i { transform: rotate(180deg); }
#map-post-modal .mpc-card--marker { margin: 0 !important; padding: 12px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; }
#map-post-modal .mpc-card--marker .map-post-marker-choice { display: none !important; }
/* Sit above the app header like the Create sheet, and outrank the older
   double-id field rules so the cards carry the only border. */
#map-post-modal#map-post-modal { z-index: 100000 !important; }
#map-post-modal#map-post-modal .mpc-card--location #map-post-location,
#map-post-modal#map-post-modal .mpc-card--location #map-post-location:focus,
#map-post-modal#map-post-modal .mpc-card--message #map-post-message,
#map-post-modal#map-post-modal .mpc-card--message #map-post-message:focus {
    border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important;
}
#map-post-modal#map-post-modal .map-post-form-shell { padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important; }
/* Use the whole screen, like the other composers. */
#map-post-modal#map-post-modal .map-post-form-shell { width: 100% !important; max-width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; margin: 0 !important; }

/* Mobile directions UI overrides. Keep route-specific styling out of mobile.html. */
.routeSheetBackdrop {
    background: rgba(0, 0, 0, 0.18) !important;
}

.routeSheet {
    background: var(--bg-primary, #ffffff) !important;
    color: var(--text-primary, #111111) !important;
}

html[data-theme="light"] body #routes-modal.routeSheetBackdrop,
html[data-theme="light-accent"] body #routes-modal.routeSheetBackdrop,
body[data-theme="light"] #routes-modal.routeSheetBackdrop,
body[data-theme="light-accent"] #routes-modal.routeSheetBackdrop {
    background: #ffffff !important;
}

html[data-theme="light"] body #routes-modal .routeSheet,
html[data-theme="light-accent"] body #routes-modal .routeSheet,
body[data-theme="light"] #routes-modal .routeSheet,
body[data-theme="light-accent"] #routes-modal .routeSheet {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

html[data-theme="light"] body #routes-modal .routeSheet__body,
html[data-theme="light-accent"] body #routes-modal .routeSheet__body,
body[data-theme="light"] #routes-modal .routeSheet__body,
body[data-theme="light-accent"] #routes-modal .routeSheet__body {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.routeSheet__body {
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px calc(env(safe-area-inset-bottom, 20px) + 24px) !important;
}

.routeSheet__header {
    border-bottom: 0 !important;
    margin-bottom: 16px !important;
    padding: 0 !important;
}

.routeSheet__title {
    font-size: 25px !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

.routeSheet__subtitle {
    margin-top: 7px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    color: var(--text-secondary, rgba(0, 0, 0, 0.58)) !important;
}

.routeSheet__close {
    width: 38px !important;
    height: 38px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
    color: var(--text-primary, #111111) !important;
    box-shadow: none !important;
}

.routeFieldLabel {
    margin: 0 0 8px 2px !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: 0.12em !important;
    color: var(--text-secondary, rgba(0, 0, 0, 0.54)) !important;
}

.routeField {
    min-height: 56px !important;
    padding: 0 13px !important;
    margin: 0 0 18px !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.routeField:focus-within {
    border-color: rgba(0, 0, 0, 0.24) !important;
    box-shadow: none !important;
}

.routeField input,
#modal-route-from-input,
#modal-route-to-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
    caret-color: var(--primary-color, #ff4f2f) !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    font-family: inherit !important;
}

.routeField input::placeholder {
    color: var(--text-secondary, rgba(0, 0, 0, 0.45)) !important;
    -webkit-text-fill-color: var(--text-secondary, rgba(0, 0, 0, 0.45)) !important;
}

.routeField button {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
}

.routeField button i {
    color: var(--text-primary, #111111) !important;
}

.routeModes {
    gap: 10px !important;
    margin: 8px 0 12px !important;
}

.routeModeBtn {
    min-height: 48px !important;
    border-radius: 16px !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
    color: var(--text-primary, #111111) !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
}

.routeModeBtn.active {
    background: var(--text-primary, #111111) !important;
    border-color: var(--text-primary, #111111) !important;
    color: var(--bg-primary, #ffffff) !important;
    box-shadow: none !important;
}

.routePrimaryBtn {
    min-height: 56px !important;
    border-radius: 18px !important;
    margin-top: 16px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    background: var(--text-primary, #111111) !important;
    color: var(--bg-primary, #ffffff) !important;
    -webkit-text-fill-color: var(--bg-primary, #ffffff) !important;
    box-shadow: none !important;
}

.routeSheet .routePrimaryBtn,
.routeSheet .routePrimaryBtn * {
    color: var(--bg-primary, #ffffff) !important;
    -webkit-text-fill-color: var(--bg-primary, #ffffff) !important;
}

.routeSecondaryBtn {
    min-height: 46px !important;
    margin-top: 10px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1)) !important;
    color: var(--text-secondary, rgba(0, 0, 0, 0.58)) !important;
}

[data-theme="dark"] .routeSheet {
    background: #080a0f !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .routeSheet__close,
[data-theme="dark"] .routeField,
[data-theme="dark"] .routeModeBtn,
[data-theme="dark"] .routeSecondaryBtn {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

[data-theme="dark"] .routeField:focus-within {
    border-color: rgba(255, 255, 255, 0.26) !important;
}

[data-theme="dark"] .routeField button {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .routeField button i {
    color: #f8fafc !important;
}

[data-theme="dark"] .routeField input,
[data-theme="dark"] #modal-route-from-input,
[data-theme="dark"] #modal-route-to-input {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

[data-theme="dark"] .routeField input::placeholder {
    color: rgba(248, 250, 252, 0.48) !important;
    -webkit-text-fill-color: rgba(248, 250, 252, 0.48) !important;
}

[data-theme="dark"] .routeModeBtn.active {
    background: #f8fafc !important;
    color: #080a0f !important;
    border-color: #f8fafc !important;
}

[data-theme="dark"] .routePrimaryBtn {
    background: #f8fafc !important;
    color: #080a0f !important;
    -webkit-text-fill-color: #080a0f !important;
}

[data-theme="dark"] .routeSheet .routePrimaryBtn,
[data-theme="dark"] .routeSheet .routePrimaryBtn *,
html[data-theme="dark"] body .routeSheet .routePrimaryBtn,
html[data-theme="dark"] body .routeSheet .routePrimaryBtn * {
    color: #080a0f !important;
    -webkit-text-fill-color: #080a0f !important;
}

html body #routes-modal .routeField input,
html body #routes-modal #modal-route-from-input,
html body #routes-modal #modal-route-to-input,
html body #routes-modal .routeField__input,
html body #routes-modal input[type="text"]#modal-route-from-input,
html body #routes-modal input[type="text"]#modal-route-to-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: var(--text-primary, #111111) !important;
    -webkit-text-fill-color: var(--text-primary, #111111) !important;
}

html body #routes-modal .routePrimaryBtn,
html body #routes-modal .routePrimaryBtn * {
    background-image: none !important;
    color: var(--bg-primary, #ffffff) !important;
    -webkit-text-fill-color: var(--bg-primary, #ffffff) !important;
}

html[data-theme="dark"] body #routes-modal .routePrimaryBtn,
html[data-theme="dark"] body #routes-modal .routePrimaryBtn * {
    color: #080a0f !important;
    -webkit-text-fill-color: #080a0f !important;
}

/* Mobile Community search surface. */

.community-explore-backdrop {
    display: none;
    width: 100%;
    min-height: calc(100vh - var(--mobile-app-header-height, 140px) - 74px);
    padding: 0 0 18px;
    background: var(--community-bg);
    box-sizing: border-box;
}

.community-explore-backdrop.is-open {
    display: block;
}

body.community-explore-open #community-room-rail,
body.community-explore-open #community-feed-modes,
body.community-explore-open #community-blips-rail,
body.community-explore-open #arena-grid,
body.community-explore-open #community-feed-shell {
    display: none !important;
}

html.community-explore-page-locked,
html.community-explore-page-locked body.community-active.community-explore-open {
    width: 100%;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: none !important;
}

.community-explore-sheet {
    width: 100%;
    max-width: 520px;
    min-height: calc(100vh - var(--mobile-app-header-height, 140px) - 92px);
    max-height: none;
    border-radius: 0;
    background: var(--community-bg);
    border: 0;
    box-shadow: none;
    color: var(--community-text);
    overflow: hidden;
    padding: 0 0 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-x: hidden;
    touch-action: pan-y;
    margin: 0 auto;
}

.community-explore-kicker {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--community-muted);
    font-weight: 950;
    margin-bottom: 8px;
}

/* No pill: the search row is just an icon, the field, and a hairline under it.
   The filled + bordered capsule was the loudest container on the screen. */
.community-explore-search {
    height: 52px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--community-border);
    background: transparent;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    margin-bottom: 14px;
}

.community-explore-search i {
    color: var(--community-muted);
    font-size: 16px;
}

#community-explore-input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--community-text) !important;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0;
    caret-color: var(--primary-color);
    appearance: none;
    -webkit-appearance: none;
    -webkit-text-fill-color: var(--community-text) !important;
    user-select: text;
    -webkit-user-select: text;
}

#community-explore-input::placeholder {
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    opacity: 1;
}

.community-explore-clear {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--community-text);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 0;
}

.community-explore-sheet.has-query .community-explore-clear {
    display: inline-flex;
}

.community-explore-room-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    padding: 0 0 12px;
    margin-right: 0;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
}

.community-explore-room-rail::-webkit-scrollbar {
    display: none;
}

/* Room filters read as plain text with an underline on the active one, the way
   a tab row does — a scrolling strip of bordered capsules was pure chrome. */
.community-explore-room-chip {
    min-width: auto;
    max-width: 180px;
    min-height: 34px;
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    padding: 0 2px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.community-explore-room-chip.is-active {
    background: transparent;
    color: var(--community-text);
    -webkit-text-fill-color: var(--community-text);
    border-bottom-color: var(--primary-color, #ff4d2e);
    box-shadow: none;
}

.community-explore-room-name {
    font-size: 13px;
    line-height: 1;
    font-weight: 920;
    overflow-wrap: anywhere;
    white-space: nowrap;
}

.community-explore-room-count {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--community-muted);
    white-space: nowrap;
}

.community-explore-room-chip.is-active .community-explore-room-count {
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
}

.community-explore-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--community-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 3px 1px 10px;
}

/* Text action, not a chip. */
.community-explore-feed-btn {
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--primary-color, #ff4d2e);
    -webkit-text-fill-color: var(--primary-color, #ff4d2e);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.community-explore-feed-btn i {
    font-size: 10px;
    opacity: 0.72;
}

.community-explore-results {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: grid;
    align-content: start;
    gap: 0;
    padding-right: 0;
    border-top: 1px solid var(--community-border);
    max-width: 100%;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

.community-explore-section-label {
    padding: 14px 0 8px;
    color: var(--community-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.community-explore-result {
    width: 100%;
    max-width: 100%;
    border: 0;
    border-bottom: 1px solid var(--community-border);
    background: transparent;
    color: var(--community-text);
    border-radius: 0;
    padding: 15px 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.community-explore-result-body {
    min-width: 0;
}

.community-explore-result-chevron {
    color: var(--community-muted);
    -webkit-text-fill-color: var(--community-muted);
    font-size: 12px;
    opacity: 0.48;
}

.community-explore-result:active {
    background: color-mix(in srgb, var(--community-text) 4%, transparent);
}

.community-explore-result.is-room .community-explore-avatar {
    background: rgba(var(--primary-rgb), 0.15);
}

.community-explore-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--community-text) 7%, transparent);
    color: var(--community-text);
    font-size: 14px;
    font-weight: 950;
}

.community-explore-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.community-explore-result-title {
    font-size: 14px;
    font-weight: 950;
    line-height: 1.15;
    color: var(--community-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-explore-result-copy {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 760;
    color: var(--community-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-explore-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--community-faint);
    font-size: 9px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.community-explore-result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--community-text) 7%, transparent);
    color: var(--community-muted);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.community-explore-empty {
    padding: 46px 16px 32px;
    text-align: center;
    color: var(--community-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 850;
}

.community-explore-empty strong {
    display: block;
    color: var(--community-text);
    font-size: 17px;
    line-height: 1.1;
    font-weight: 950;
    margin-bottom: 8px;
}

html[data-theme="light"] .community-explore-backdrop {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] .community-explore-sheet {
    background: #ffffff !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] .community-explore-search {
    background: color-mix(in srgb, var(--community-text) 3%, #ffffff) !important;
    border-color: rgba(5, 5, 5, 0.14) !important;
    box-shadow: 0 8px 22px rgba(5, 5, 5, 0.045) !important;
}

html[data-theme="light"] .community-explore-search i,
html[data-theme="light"] .community-explore-clear {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] #community-explore-input {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] #community-explore-input::placeholder {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html[data-theme="light"] .community-explore-room-chip,
html[data-theme="light"] .community-explore-feed-btn {
    background: #f4f4f4 !important;
    border-color: rgba(5, 5, 5, 0.16) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    box-shadow: none !important;
}

html[data-theme="light"] .community-explore-room-chip .community-explore-room-name {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .community-explore-room-chip .community-explore-room-count {
    color: rgba(5, 5, 5, 0.58) !important;
    -webkit-text-fill-color: rgba(5, 5, 5, 0.58) !important;
}

html[data-theme="light"] .community-explore-room-chip.is-active {
    background: var(--community-text) !important;
    border-color: var(--community-text) !important;
    color: var(--community-bg) !important;
    -webkit-text-fill-color: var(--community-bg) !important;
}

html[data-theme="light"] .community-explore-room-chip.is-active .community-explore-room-name {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] .community-explore-room-chip.is-active .community-explore-room-count {
    color: rgba(255, 255, 255, 0.72) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .community-explore-meta,
html[data-theme="light"] .community-explore-section-label,
html[data-theme="light"] .community-explore-result-meta,
html[data-theme="light"] .community-explore-result-copy,
html[data-theme="light"] .community-explore-empty {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

html[data-theme="light"] .community-explore-results,
html[data-theme="light"] .community-explore-result {
    border-color: var(--community-border) !important;
}

html[data-theme="light"] .community-explore-result-title,
html[data-theme="light"] .community-explore-empty strong {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light"] .community-explore-avatar {
    background: color-mix(in srgb, var(--community-text) 7%, transparent) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] .community-explore-backdrop {
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 10%, transparent), transparent 34%),
        color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 5%, #ffffff 95%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="light-accent"] .community-explore-sheet {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, rgba(5, 5, 5, 0.12)) !important;
    box-shadow: 0 18px 42px rgba(5, 5, 5, 0.07) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] .community-explore-search,
html[data-theme="light-accent"] .community-explore-room-chip,
html[data-theme="light-accent"] .community-explore-feed-btn,
html[data-theme="light-accent"] .community-explore-result {
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 6%, #ffffff 94%) !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, rgba(5, 5, 5, 0.12)) !important;
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
    box-shadow: none !important;
}

html[data-theme="light-accent"] .community-explore-room-chip.is-active {
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 16%, #ffffff 84%) !important;
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 28%, rgba(5, 5, 5, 0.16)) !important;
}

html[data-theme="light-accent"] .community-explore-search i,
html[data-theme="light-accent"] .community-explore-clear,
html[data-theme="light-accent"] #community-explore-input,
html[data-theme="light-accent"] .community-explore-result-title,
html[data-theme="light-accent"] .community-explore-empty strong,
html[data-theme="light-accent"] .community-explore-room-chip .community-explore-room-name {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html[data-theme="light-accent"] #community-explore-input::placeholder,
html[data-theme="light-accent"] .community-explore-meta,
html[data-theme="light-accent"] .community-explore-section-label,
html[data-theme="light-accent"] .community-explore-result-meta,
html[data-theme="light-accent"] .community-explore-result-copy,
html[data-theme="light-accent"] .community-explore-empty,
html[data-theme="light-accent"] .community-explore-room-chip .community-explore-room-count {
    color: var(--community-muted) !important;
    -webkit-text-fill-color: var(--community-muted) !important;
}

/* Final roomy pass for the mobile Community search/list surface. */
html body.community-active #community-explore-backdrop.community-explore-backdrop {
    position: relative !important;
    inset: auto !important;
    z-index: 9001 !important;
    width: 100% !important;
    /* Continue beneath the floating dock so no blank strip appears above its rounded edge. */
    height: calc(100dvh - var(--mobile-app-header-height, 74px) - 44px - env(safe-area-inset-bottom, 0px)) !important;
    min-height: 560px !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

html body.community-active #community-explore-backdrop .community-explore-sheet {
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 14px 18px 0 !important;
    background: #ffffff !important;
}

html body.community-active #community-explore-backdrop .community-explore-search {
    flex: 0 0 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px rgba(9, 9, 11, 0.04) !important;
}

html body.community-active #community-explore-backdrop #community-explore-input {
    font-size: 16px !important;
    font-weight: 780 !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-rail {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    flex-wrap: wrap !important;
    gap: 10px 8px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    overflow-x: visible !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-chip {
    min-height: 34px !important;
    max-width: 100% !important;
    padding: 0 2px !important;
    border-radius: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-meta {
    min-height: 38px !important;
    padding: 0 !important;
    font-size: 11px !important;
}

html body.community-active #community-explore-backdrop .community-explore-feed-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 13px !important;
}

html body.community-active #community-explore-backdrop .community-explore-results {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 2px 0 0 !important;
    border-top: 0 !important;
    overflow-y: auto !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label {
    padding: 0 !important;
    margin: 10px 0 2px !important;
}

/* Was a rounded, gradient-filled, shadowed tile per result — the main source
   of container noise on this screen. Now a flat row. */
html body.community-active #community-explore-backdrop .community-explore-result {
    min-height: 0 !important;
    padding: 13px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: 44px minmax(0, 1fr) 18px !important;
    gap: 12px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result.is-room {
    min-height: 78px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-meta {
    margin: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-copy {
    margin: 0 !important;
    line-height: 1.18 !important;
}

/* ============================================================
   Lighter search: every element was sized like a primary action.
   Chips are filters, not buttons — one scrolling row instead of
   four wrapped rows of pills. Counts live in the list below, so
   the chips and the "Room" kicker were saying it twice.
   ============================================================ */
html body.community-active #community-explore-backdrop .community-explore-search {
    height: 44px !important;
    margin-bottom: 10px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
}

html body.community-active #community-explore-backdrop #community-explore-input {
    font-size: 15px !important;
    font-weight: 600 !important;
}

html body.community-active #community-explore-backdrop .community-explore-search i {
    font-size: 14px !important;
}

/* One row that scrolls, rather than a block of stacked pills. */
html body.community-active #community-explore-backdrop .community-explore-room-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 7px !important;
    padding: 0 0 10px !important;
    scrollbar-width: none !important;
}

/* Text filters with an underline on the active one — no capsules. */
html body.community-active #community-explore-backdrop .community-explore-room-chip {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 2px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-chip.is-active {
    background: transparent !important;
    border-bottom-color: var(--primary-color, #ff4d2e) !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-chip.is-active .community-explore-room-name {
    color: var(--community-text) !important;
    -webkit-text-fill-color: var(--community-text) !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-name {
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Rows carry a title and a preview; the icon tile and kicker were overhead. */
/* Flat rows on a hairline, no rounded tile per result. */
html body.community-active #community-explore-backdrop .community-explore-result {
    gap: 12px !important;
    min-height: 0 !important;
    padding: 13px 2px !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    background: transparent !important;
}

html body.community-active #community-explore-backdrop .community-explore-avatar {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-copy {
    font-size: 12.5px !important;
    font-weight: 450 !important;
    line-height: 1.25 !important;
    opacity: 0.72 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-meta {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    padding-top: 4px !important;
    opacity: 0.5 !important;
}

/* The scope line repeated the count already shown on every row. */
html body.community-active #community-explore-backdrop .community-explore-meta {
    font-size: 9px !important;
    letter-spacing: 0.11em !important;
    padding: 0 1px 8px !important;
}

html body.community-active #community-explore-backdrop .community-explore-feed-btn {
    height: 25px !important;
    font-size: 9px !important;
}

/* These two carried a min-height from earlier passes that outranked the
   heights above — .is-room by specificity, the field by property. */
/* The field is a flex item pinned by its basis, so height alone never moved it. */
/* Underline, not a filled box — this is the last .community-explore-search
   rule, so the flat treatment has to be declared here to stick. */
html body.community-active #community-explore-backdrop .community-explore-search {
    flex: 0 0 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 2px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result,
html body.community-active #community-explore-backdrop .community-explore-result.is-room {
    min-height: 58px !important;
    align-items: center !important;
}

/* The rail bleeds past the sheet's 18px gutter so chips scroll to the screen
   edge instead of stopping short, while the first chip still lines up with
   the search field above it. */
html body.community-active #community-explore-backdrop .community-explore-room-rail {
    margin-right: -18px !important;
    margin-left: -18px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
    scroll-padding-left: 18px !important;
}

/* The results list scrolls behind a floating bottom nav, so it needs its own
   clearance — without it the final row sits under the nav and cannot be read. */
html body.community-active #community-explore-backdrop .community-explore-results {
    padding-bottom: 132px !important;
    scroll-padding-bottom: 132px !important;
}

/* Post rows are the same object as room rows: same card, same padding, same
   vertical centring. They were inheriting neither. */
html body.community-active #community-explore-backdrop .community-explore-result,
html body.community-active #community-explore-backdrop .community-explore-result.is-room {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    text-align: left !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-title,
html body.community-active #community-explore-backdrop .community-explore-result-copy,
html body.community-active #community-explore-backdrop .community-explore-result-meta {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-chevron {
    flex: 0 0 auto !important;
    align-self: center !important;
}

/* The sheet clips overflow, which cut the rail's right-hand bleed. Only the
   vertical axis needs clipping here; the rail owns its own horizontal scroll. */
html body.community-active #community-explore-backdrop .community-explore-sheet {
    overflow-x: visible !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-rail {
    width: calc(100% + 36px) !important;
    max-width: none !important;
}

/* The scope line repeated the per-room counts already on every row below, so
   only the feed action stays and the row collapses toward the rail above it. */
html body.community-active #community-explore-backdrop .community-explore-meta {
    justify-content: flex-end !important;
    padding: 0 0 4px !important;
}

html body.community-active #community-explore-backdrop .community-explore-meta > span {
    display: none !important;
}

html body.community-active #community-explore-backdrop .community-explore-sheet {
    gap: 10px !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-rail {
    padding-bottom: 2px !important;
}

/* The section label earns its place (Rooms vs Posts) but not the space around it. */
html body.community-active #community-explore-backdrop .community-explore-section-label {
    padding: 2px 0 0 !important;
    margin: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-results {
    gap: 7px !important;
}

/* Scope row: the rail and the feed action are the same decision — what am I
   looking at — so they share a line. The rail still bleeds to the screen edge;
   the button stays inside the gutter and does not scroll away with the chips. */
html body.community-active #community-explore-backdrop .community-explore-scope-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-scope-row .community-explore-room-rail {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: -18px !important;
    padding-right: 4px !important;
    padding-bottom: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-scope-row .community-explore-meta {
    flex: 0 0 auto !important;
    padding: 0 !important;
}

/* View feed moved to the Posts header: it is the step from browsing results to
   the room's feed, so it belongs with the posts, not among the filter chips
   where it read as one. The rail gets its full bleed back. */
html body.community-active #community-explore-backdrop .community-explore-room-rail {
    width: calc(100% + 36px) !important;
    margin-right: -18px !important;
    margin-left: -18px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label.is-with-action {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label.is-with-action .community-explore-feed-btn {
    flex: 0 0 auto !important;
    height: 25px !important;
    font-size: 9px !important;
}

/* The label is a flex item in the column results list, so it collapsed to zero
   width and took the button with it. */
html body.community-active #community-explore-backdrop .community-explore-section-label.is-with-action {
    width: 100% !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
}

/* [hidden] loses to the display rules above, so the scope row kept its box and
   left a gap between the chips and the first section. */
html body.community-active #community-explore-backdrop .community-explore-meta[hidden] {
    display: none !important;
}

/* type="search" paints its own clear control next to the custom one. */
html body.community-active #community-explore-backdrop #community-explore-input::-webkit-search-cancel-button,
html body.community-active #community-explore-backdrop #community-explore-input::-webkit-search-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

/* ============================================================
   Breathing room. The earlier pass to make this lighter went too
   far: 58px rows separated by 7px with a 12px radius read as
   compressed rather than tidy — the corners nearly touch, so the
   eye sees one dense block instead of distinct results.
   Height comes from padding rather than a min-height, so a row
   with a long title grows instead of clipping.
   ============================================================ */
html body.community-active #community-explore-backdrop .community-explore-results {
    /* 2px stacked the rows into a solid block. The hairline does the dividing,
       so the gap only has to give each result room to breathe. */
    gap: 10px !important;
    padding-bottom: 132px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result,
html body.community-active #community-explore-backdrop .community-explore-result.is-room {
    /* Keep a floor: without one the row collapsed to 28px, shorter than the 34px
       avatar it contains. Padding adds to this so a two-line result still grows.
       No radius or side padding — rows run edge to edge under a hairline. */
    min-height: 66px !important;
    gap: 14px !important;
    padding: 16px 2px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--community-border) !important;
    background: transparent !important;
    box-shadow: none !important;
    align-items: center !important;
}

/* Separation now comes from the row's own border-bottom; this inset shadow
   would draw a second line directly above it. */
html body.community-active #community-explore-backdrop .community-explore-result + .community-explore-result {
    box-shadow: none !important;
}

html body.community-active #community-explore-backdrop .community-explore-result:last-child {
    border-bottom: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result:active {
    background: color-mix(in srgb, var(--community-text) 4%, transparent) !important;
}

/* The label was tight against the row above it; give each section its own start. */
html body.community-active #community-explore-backdrop .community-explore-section-label {
    padding: 20px 2px 8px !important;
    opacity: 0.45 !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label:first-child {
    padding-top: 6px !important;
}

/* Room and post rows share a first-line rhythm. */
html body.community-active #community-explore-backdrop .community-explore-result-body {
    gap: 4px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-title {
    line-height: 1.25 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-copy {
    line-height: 1.3 !important;
    opacity: 0.66 !important;
}

/* The field and the chips were 20px apart and the chips 30px from the results;
   even that spacing out settles the top of the sheet. */
html body.community-active #community-explore-backdrop .community-explore-sheet {
    gap: 14px !important;
    padding-top: 16px !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-rail {
    padding-bottom: 0 !important;
}

/* Search results are identities too, so their artwork follows Community's
   circular avatar language instead of the older rounded-square treatment. */
html body.community-active #community-explore-backdrop .community-explore-avatar,
html body.community-active #community-explore-backdrop .community-explore-avatar img {
    border-radius: 50% !important;
    overflow: hidden !important;
}

html body.community-active #community-explore-backdrop .community-explore-avatar {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
}

html body.community-active #community-explore-backdrop .community-explore-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ============================================================
   Spacious search layout. Keep the app's monochrome language, but
   restore clear grouping and generous touch targets throughout.
   ============================================================ */
html body.community-active #community-explore-backdrop .community-explore-sheet {
    gap: 0 !important;
    padding: 18px 18px 132px !important;
    overflow-x: hidden !important;
}

html body.community-active #community-explore-backdrop .community-explore-search {
    flex: 0 0 60px !important;
    width: 100% !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 0 16px !important;
    padding: 0 17px !important;
    grid-template-columns: 22px minmax(0, 1fr) 32px !important;
    gap: 11px !important;
    border: 1px solid var(--community-border) !important;
    border-radius: 19px !important;
    background: color-mix(in srgb, var(--community-text) 3.5%, var(--community-bg)) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--community-text) 5%, transparent) !important;
}

html body.community-active #community-explore-backdrop #community-explore-input {
    height: 58px !important;
    font-size: 16px !important;
    font-weight: 650 !important;
}

html body.community-active #community-explore-backdrop .community-explore-search > i {
    font-size: 15px !important;
    opacity: .65 !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-rail {
    width: calc(100% + 36px) !important;
    min-height: 44px !important;
    margin: 0 -18px 18px !important;
    padding: 0 18px !important;
    gap: 8px !important;
    scroll-padding-inline: 18px !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-chip {
    min-height: 42px !important;
    padding: 0 14px !important;
    gap: 7px !important;
    border: 1px solid var(--community-border) !important;
    border-radius: 13px !important;
    background: transparent !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-chip.is-active {
    border-color: var(--community-text) !important;
    background: var(--community-text) !important;
    color: var(--community-bg) !important;
    -webkit-text-fill-color: var(--community-bg) !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-name {
    font-size: 13px !important;
    font-weight: 760 !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-count {
    display: inline !important;
    font-size: 10px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    opacity: .58 !important;
}

html body.community-active #community-explore-backdrop .community-explore-room-chip.is-active .community-explore-room-count {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}

html body.community-active #community-explore-backdrop .community-explore-results {
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    padding: 0 0 132px !important;
    border-top: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label,
html body.community-active #community-explore-backdrop .community-explore-section-label:first-child {
    min-height: 24px !important;
    padding: 18px 2px 7px !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 820 !important;
    letter-spacing: .14em !important;
    opacity: .52 !important;
}

html body.community-active #community-explore-backdrop .community-explore-section-label:first-child {
    padding-top: 0 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result,
html body.community-active #community-explore-backdrop .community-explore-result.is-room {
    min-height: 76px !important;
    padding: 13px 14px !important;
    gap: 13px !important;
    border: 1px solid var(--community-border) !important;
    border-radius: 17px !important;
    background: color-mix(in srgb, var(--community-text) 2.2%, var(--community-bg)) !important;
    box-shadow: 0 5px 18px color-mix(in srgb, var(--community-text) 3.5%, transparent) !important;
}

html body.community-active #community-explore-backdrop .community-explore-result + .community-explore-result {
    box-shadow: 0 5px 18px color-mix(in srgb, var(--community-text) 3.5%, transparent) !important;
}

html body.community-active #community-explore-backdrop .community-explore-result:active {
    transform: scale(.985) !important;
    background: color-mix(in srgb, var(--community-text) 6%, var(--community-bg)) !important;
}

html body.community-active #community-explore-backdrop .community-explore-avatar {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-body {
    gap: 5px !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 790 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-copy {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

html body.community-active #community-explore-backdrop .community-explore-result-meta {
    font-size: 9px !important;
    line-height: 1.1 !important;
}

html body.community-active #community-explore-backdrop .community-explore-feed-btn {
    min-height: 32px !important;
    font-size: 10px !important;
}

/* Active room: force both pieces of copy onto the selected surface. Theme
   rules color the count and name independently, which previously left black
   text on the black active chip (the label looked missing). */
html body.community-active.community-explore-open #community-explore-backdrop .community-explore-room-chip.is-active,
html body.community-active.community-explore-open #community-explore-backdrop .community-explore-room-chip.is-active .community-explore-room-name,
html body.community-active.community-explore-open #community-explore-backdrop .community-explore-room-chip.is-active .community-explore-room-count {
    color: var(--community-bg, #fff) !important;
    -webkit-text-fill-color: var(--community-bg, #fff) !important;
}

/* Let the search surface and its scroller meet the floating bottom nav. There
   was 132px on the sheet and another 132px on the results, creating a large
   dead zone and a shortened scrollbar. */
html body.community-active.community-explore-open #community-explore-backdrop.community-explore-backdrop {
    position: fixed !important;
    top: var(--mobile-app-header-height, 74px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 120 !important;
    height: calc(100dvh - var(--mobile-app-header-height, 74px) - var(--mobile-bottom-nav-height, calc(58px + env(safe-area-inset-bottom, 0px)))) !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    background: var(--community-bg, #fff) !important;
}

html body.community-active.community-explore-open #community-explore-backdrop .community-explore-sheet {
    height: 100% !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
}

html body.community-active.community-explore-open #community-explore-backdrop .community-explore-results {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    scroll-padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.community-explore-loading {
    min-height: 42vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--community-muted);
}

.community-explore-loading span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .24;
    animation: community-search-loading 1s ease-in-out infinite;
}

.community-explore-loading span:nth-child(2) { animation-delay: .12s; }
.community-explore-loading span:nth-child(3) { animation-delay: .24s; }

@keyframes community-search-loading {
    0%, 70%, 100% { opacity: .22; transform: translateY(0); }
    35% { opacity: .72; transform: translateY(-3px); }
}

/* ============================================================
   The real app header never tucks away behind this surface — it stays
   put above the search sheet, which already reserves space for it via
   min-height/height (see .community-explore-backdrop, .community-explore-sheet
   above). But the header's scroll-hide listener hears in the capture phase
   from any scrolling container, including .community-explore-results, so
   scrolling the search results themselves used to flip on
   body.mobile-header-tucked. That state used to slide this whole sheet — its
   own search input included — up by the header's height, shoving the input
   bar up behind the status bar even though nothing had actually moved out
   of the way for it. This surface intentionally ignores that class.
   ============================================================ */

/* Page colour (html[data-page-color], palette from mobile-page-colors.js):
   the sheet above is hard white, so on a coloured page the white room chips
   and their white labels vanished into it. The sheet takes the page colour,
   the search pill stays a field, and the chips read in the page's ink. Two
   ids (:not(#pc)) outrank the one-id rules above. */
html[data-page-color]:not(#pc) body.community-active #community-explore-backdrop .community-explore-sheet {
    background: var(--pc-page) !important;
}
html[data-page-color]:not(#pc) body.community-active #community-explore-backdrop .community-explore-search {
    background: var(--pc-field) !important;
    border-color: var(--pc-field-edge) !important;
}
html[data-page-color]:not(#pc) body.community-active #community-explore-backdrop .community-explore-search > i {
    color: var(--pc-field-dim) !important;
    -webkit-text-fill-color: var(--pc-field-dim) !important;
}
html[data-page-color]:not(#pc) body.community-active #community-explore-backdrop .community-explore-room-chip:not(.is-active) {
    background: transparent !important;
    border-color: var(--pc-line) !important;
}
html[data-page-color]:not(#pc) body.community-active #community-explore-backdrop .community-explore-room-chip:not(.is-active) :is(.community-explore-room-name, .community-explore-room-count) {
    color: var(--pc-ink) !important;
    -webkit-text-fill-color: var(--pc-ink) !important;
}
html[data-page-color]:not(#pc) body.community-active #community-explore-backdrop .community-explore-room-chip.is-active {
    background: var(--pc-ink) !important;
    border-color: var(--pc-ink) !important;
}
html[data-page-color]:not(#pc) body.community-active #community-explore-backdrop .community-explore-room-chip.is-active :is(.community-explore-room-name, .community-explore-room-count) {
    color: var(--pc-page) !important;
    -webkit-text-fill-color: var(--pc-page) !important;
}

/* Community timeline: clear the floating dock while the reader scrolls down. */
html body.community-active {
    overscroll-behavior-y: contain;
}

html body.community-active #bottom-nav {
    transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out !important;
}

html body.community-active.community-timeline-nav-hidden #bottom-nav {
    opacity: 0 !important;
    transform: translateY(calc(115% + env(safe-area-inset-bottom, 0px))) !important;
    pointer-events: none !important;
}

html body.community-active.community-timeline-nav-hidden #arena-grid {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.community-active #bottom-nav {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   The rooms sheet follows the header.

   The sheet is a fixed overlay that reserves the header's height with
   padding-top, so when the bar tucked away the sheet stayed put and left an
   empty band across the top. It scrolls inside an iframe, so its scroll is
   reported up by mobile-rooms.js and fed to the header by the overlay's
   message handler; this is the other half — giving the space back.

   Travel on transform, not on padding-top or top. The padding is what holds
   the sheet clear of the header, and animating it would re-run layout on a
   full iframe every frame. A transform is composited and moves the sheet and
   the bar the same distance on the same curve.
   ============================================================ */
html body.mobile-header-tucked #rooms-mobile-overlay {
    transform: translate3d(0, calc(-1 * var(--mobile-app-header-height, 140px)), 0) !important;
}

/* Sliding up by the header's height leaves that much bare at the bottom.
   Growing the sheet by the same amount keeps the iframe filling the screen. */
html body.mobile-header-tucked #rooms-mobile-overlay {
    bottom: calc(-1 * var(--mobile-app-header-height, 140px)) !important;
}