/*
 * Additive shop UI. Never style an unscoped document: the shared layout also
 * serves Master Admin, EPOS and marketing. Existing frameworks own visibility,
 * positioning, focus management and events, including body-appended dialogs.
 */
body.shop-theme {
    --shop-paper: #f5f3eb;
    --shop-surface: #fffdf7;
    --shop-raised: #fffefa;
    --shop-ink: #263532;
    --shop-muted: #586862;
    --shop-line: #d9dfd5;
    --shop-shadow: 0 8px 26px rgba(34, 49, 43, .065);
    --shop-dialog-shadow: 0 24px 72px rgba(20, 34, 30, .24);
    --shop-radius: 18px;
    --shop-accent-text: color-mix(in srgb, var(--primary) 42%, #17221e);
    --surface: var(--shop-surface);
    --surface-alt: var(--shop-paper);
    --surface-hover: #eeeee4;
    --border: var(--shop-line);
    --border-light: #e8e8dd;
    --text-primary: var(--shop-ink);
    --text-secondary: #3d4e49;
    --text-muted: var(--shop-muted);
    --radius-lg: var(--shop-radius);
    --shadow: var(--shop-shadow);
    --shadow-md: 0 16px 38px rgba(34, 49, 43, .11);
    min-height: 100vh;
    background: var(--shop-paper) !important;
    color: var(--shop-ink);
}

/* Named legacy surfaces intentionally outrank page-local rules; never match
 * every class containing "card", since covers/loyalty cards have their own art. */
body.shop-theme :is(.card, .modern-card, .stat-card, .stat-card-compact, .panel,
    .k-card, .si-card, .customer-tabs-card, .settings-section, .sub-card,
    .section-card, .dash-card, .lastchance-card, .account-card, .main-card,
    .data-card, .report-card, .insight-card, .chart-card, .membership-card,
    .pickup-card, .foc-pick-card, .pending-sub-card, .pending-group-card,
    .followed-creator-card, .order-card, .profile-card, .success-card,
    .recovery-card, .stock-card, .shop-variant-detail-card, .pm-rel-card,
    .tab-card, .shop-stat-card, .auth-card, .search-box-wrap, .filter-bar,
    .release-card, .subscription-card, .subscription-item, .order-summary,
    .basket-summary, .checkout-section, .payment-card, .detail-panel,
    .variant-cover-item, .db-basket-section, .customer-panel) {
    color: var(--shop-ink);
    background: var(--shop-surface) !important;
    border: 1px solid var(--shop-line) !important;
    border-radius: var(--shop-radius) !important;
    box-shadow: var(--shop-shadow) !important;
}
body.shop-theme :is(.card-header, .modern-card-header, .si-card-header,
    .section-header, .account-card-header, .dash-card-head, .report-card-header,
    .insight-card-header, .modal-header, .loyalty-modal-header) {
    color: var(--shop-ink) !important;
    background: #f1f0e7 !important;
    border-color: var(--shop-line) !important;
}
body.shop-theme :is(.customer-tabs-card, .settings-section, .sub-card) { overflow: hidden; }
body.shop-theme .settings-section { margin-bottom: 1rem; }
body.shop-theme .si-new-title-item { background: #f2f2e9 !important; }
body.shop-theme :is(.si-new-title-item, .sm-title-result-item).selected {
    background: color-mix(in srgb, var(--primary) 12%, var(--shop-surface)) !important;
    border-color: var(--primary) !important;
}
body.shop-theme .si-similar-item { background: #f5f0df !important; }
body.shop-theme .si-shortlist-item { background: #edf2e8 !important; }
body.shop-theme :is(.table, .modern-table) thead th {
    background: #f1f0e7 !important;
    color: var(--shop-ink);
    border-color: var(--shop-line);
}
body.shop-theme :is(.table, .k-grid) {
    --bs-table-bg: var(--shop-surface);
    --bs-table-color: var(--shop-ink);
    color: var(--shop-ink);
    border-color: var(--shop-line);
}

/* Tenant hue is never replaced with the wholesale teal/coral palette.
 * JS derives accessible ink from the actual saved/previewed tenant colour. */
body.shop-theme :is(.btn-primary, .btn-modern-primary, .btn-modern.btn-modern-primary,
    .modern-btn-primary, .btn-success, .btn-info, .btn-add, .add-button, .add-btn,
    .si-commit-btn, .btn-save, .save-btn, .bottom-save-btn, .modal-save-btn,
    .btn-modal-ok, .btn-modal-save, .btn-dialog-ok, .lc-subscribe, .lc-add-basket,
    .lc-variant-add, .btn-save-qty, .shop-variant-detail-add-btn, .list-add-btn,
    .btn-subscribe, .btn-modal-subscribe, .btn-resubscribe, .btn-resub,
    .btn-action-subscribe, .btn-action-cart, .btn-basket-add, .btn-move-basket,
    .btn-checkout, .submit-btn, .login-btn, .k-primary, .k-button-solid-primary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 40px;
    padding: .55rem 1rem !important;
    color: var(--shop-accent-ink, #fff) !important;
    background: var(--primary, #667eea) !important;
    border: 1px solid var(--primary, #667eea) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    text-decoration: none;
    transition: box-shadow .16s ease, transform .16s ease;
}
body.shop-theme :is(.btn-primary, .btn-modern-primary, .modern-btn-primary,
    .btn-add, .add-btn, .submit-btn, .login-btn, .btn-subscribe, .si-commit-btn):hover:not(:disabled) {
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(34,49,43,.16) !important;
}
body.shop-theme :is(.btn-secondary, .btn-light, .btn-default, .btn-modern-secondary,
    .modern-btn-secondary, .bottom-cancel-btn, .modal-cancel-btn,
    .btn-modal-cancel, .btn-dialog-cancel) {
    color: var(--shop-ink) !important;
    background: #f1f0e7 !important;
    border: 1px solid var(--shop-line) !important;
    border-radius: 10px;
    padding: .55rem 1rem;
    font-weight: 600;
}
body.shop-theme :is(.btn-outline-primary, .k-button) { border-radius: 10px; }
body.shop-theme :is(.btn-danger, .btn-outline-danger, .btn-unsub, .btn-unsubscribe,
    .modal-discard-btn, .basket-remove-btn, .remove-btn, #unsubModalConfirm) {
    background: #a83c35 !important;
    color: #fff !important;
    border-color: #a83c35 !important;
}
body.shop-theme :is(.btn-sm, .btn-compact, .btn-save-qty, .lc-variant-add) {
    min-height: 32px;
    padding: .35rem .65rem !important;
    font-size: .8125rem;
}
body.shop-theme .si-subscriber-item .add-btn {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    height: 36px;
    padding: 0 !important;
}
body.shop-theme :is(.btn, button, input[type="button"], input[type="submit"]):disabled,
body.shop-theme :is(.btn, button)[aria-disabled="true"] {
    opacity: .58;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
body.shop-theme :is(.btn, button)[aria-busy="true"],
body.shop-theme :is(.btn, button).is-loading { cursor: progress; }
body.shop-theme :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--shop-accent-text);
    outline-offset: 3px;
}
body.shop-theme :is(.form-control, .form-select, .k-input, .k-textbox, .modal-input,
    .form-field input, .modern-form-field input, .modern-form-field select,
    .auth-card input, .form-input, .modal-box input, .modal-box select) {
    color: var(--shop-ink);
    background-color: var(--shop-raised);
    border-color: #cbd4cb;
    border-radius: 9px;
}
body.shop-theme :is(input, select, textarea, .form-control):focus {
    border-color: var(--shop-accent-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
body.shop-theme input:is([type="radio"], [type="checkbox"]) { accent-color: var(--primary); }

/* Readable header actions on both pale and dark branded headers. Navigation
 * structure is unchanged; neutral chips avoid muting the saved tenant hues. */
body.shop-theme :is(.master-header, .shop-header, .si-section, .store-header, .dashboard-header, .page-header-modern,
    .modern-page-header, .customer-header, .lc-hero, .hero, .dash-hero) {
    background: linear-gradient(var(--shop-header-shade, transparent), var(--shop-header-shade, transparent)),
        linear-gradient(120deg, var(--primary), var(--secondary)) !important;
    color: var(--shop-header-ink, #fff) !important;
}
body.shop-theme :is(.si-section, .store-header, .modern-page-header, .page-header-modern, .dashboard-header,
    .customer-header, .lc-hero, .hero, .dash-hero) :is(h1, h2, h3, p, .page-subtitle) {
    color: var(--shop-header-ink, #fff) !important;
}
body.shop-theme :is(.store-header, .modern-page-header, .customer-header, .lc-hero, .hero) {
    border-radius: var(--shop-radius);
}
body.shop-theme .btn-header,
body.shop-theme .modern-page-header .modern-page-header-actions :is(a, button),
body.shop-theme .store-header .header-actions :is(a, button),
body.shop-theme .shop-header .header-actions > a,
body.shop-theme .shop-header .user-menu-btn,
body.shop-theme .master-header :is(.btn, .nav-link, .user-greeting-btn, .basket-btn,
    .kiosk-btn, .epos-btn, .navbar-toggler),
body.shop-theme .navbar-left .nav-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 40px;
    padding: .5rem .85rem !important;
    color: var(--shop-ink) !important;
    background: var(--shop-surface) !important;
    border: 1px solid var(--shop-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 700;
    text-decoration: none;
}
body.shop-theme .navbar-left .nav-header {
    color: var(--shop-ink) !important;
    background: var(--shop-surface) !important;
}
/* Danger semantics take precedence even inside branded header action groups. */
body.shop-theme :is(.modern-page-header, .store-header, .customer-header, .master-header, .shop-header)
    :is(.btn-danger, .btn-outline-danger, .btn-delete, .remove-btn) {
    color: #fff !important;
    background: #a83c35 !important;
    border-color: #a83c35 !important;
}
body.shop-theme .navbar-left .navbar-nav .nav-link:is(:hover, .active),
body.shop-theme .navbar-left .navbar-nav .nav-link:is(:hover, .active) i,
body.shop-theme :is(.modern-tabs, .nav-tabs) .nav-link.active,
body.shop-theme .auth-card .links a {
    color: var(--shop-accent-text) !important;
}
body.shop-theme .navbar-left .navbar-nav .nav-link.active {
    background: color-mix(in srgb, var(--primary) 12%, var(--shop-surface)) !important;
}

/* Bootstrap/Kendo/custom shells, including AJAX fragments appended to body.
 * Do not assign display, opacity, visibility or a blanket popup z-index here:
 * staff uses .visible, subscriptions use .open, others use inline styles. */
body.shop-theme :is(.modal-backdrop, .k-overlay, .loyalty-modal-backdrop) {
    background: rgba(28, 41, 36, .58) !important;
    backdrop-filter: blur(3px);
}
/* Bootstrap's .show opacity otherwise attenuates both the tint and the blur.
 * Keep its transition/cleanup, but composite this product layer at full opacity. */
body.shop-theme.customer-product-open .modal-backdrop.show {
    opacity: 1;
    background: rgba(20, 34, 30, .62) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body.shop-theme :is(.modal-overlay, .unsaved-modal-overlay, .ps-modal-overlay,
    .staff-dialog-overlay, .chart-modal, .co-modal-overlay, .subscription-modal-overlay,
    .custom-modal-overlay) {
    box-sizing: border-box;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(28, 41, 36, .58) !important;
    backdrop-filter: blur(3px);
}
body.shop-theme :is(.modal-content, .k-window, .k-dialog, .modal-box,
    .unsaved-modal, .staff-dialog, .ps-modal, .chart-modal-content,
    .loyalty-modal-content, .co-modal-box, .subscription-modal, .custom-modal-content) {
    box-sizing: border-box;
    color: var(--shop-ink) !important;
    background: var(--shop-surface) !important;
    border: 1px solid var(--shop-line) !important;
    border-radius: var(--shop-radius) !important;
    box-shadow: var(--shop-dialog-shadow) !important;
}
body.shop-theme .modal-dialog {
    width: auto;
    max-width: min(760px, calc(100vw - 28px));
    margin: 1rem auto;
}
body.shop-theme .modal-content {
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}
body.shop-theme .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
body.shop-theme :is(.modal-header, .k-window-titlebar, .k-dialog-titlebar) {
    color: var(--shop-ink) !important;
    background: #f1f0e7 !important;
    min-height: 56px;
    padding: 1rem 1.25rem;
    border-color: var(--shop-line);
    flex-shrink: 0;
}
body.shop-theme :is(.modal-title, .modal-box h3, .unsaved-modal h3, .staff-dialog-title) {
    color: var(--shop-ink) !important;
}
body.shop-theme :is(.modal-body, .k-window-content, .k-dialog-content) {
    min-height: 0;
    max-height: min(68dvh, 680px);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 1.25rem;
}
body.shop-theme :is(.modal-footer, .k-dialog-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .9rem 1.25rem;
    background: #faf9f1;
    border-top: 1px solid var(--shop-line);
    flex-shrink: 0;
}
body.shop-theme :is(.modal-box, .unsaved-modal, .staff-dialog, .ps-modal,
    .chart-modal-content, .loyalty-modal-content, .co-modal-box,
    .subscription-modal, .custom-modal-content) {
    max-width: min(760px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto !important;
    overscroll-behavior: contain;
}
body.shop-theme :is(.modal-actions, .unsaved-modal-actions, .staff-dialog-actions,
    .ps-modal-actions, .co-modal-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
body.shop-theme :is(.modal-close, .close-modal, .close-btn, .modern-close-btn,
    .modern-close-btn-dark, .loyalty-modal-close, .chart-modal-close,
    .modal-header .close, .k-window-actions .k-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    color: var(--shop-ink) !important;
    background: #eeeee4 !important;
    border: 1px solid var(--shop-line) !important;
    border-radius: 8px;
}
body.shop-theme .btn-close-white { filter: none; }

/* Tenant login keeps logo, welcome, opening hours and all original fields.
 * Standalone login/register use .auth-card and .submit-btn above. */
body.shop-theme .login-page { background: var(--shop-paper) !important; }
body.shop-theme :is(.login-card, .login-header, .store-info-panel, .store-info-panel.white-panel) {
    color: var(--shop-ink) !important;
    background: var(--shop-surface) !important;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow);
}
body.shop-theme .login-page :is(h1, h2, h3, p, small, .intro-text, .address-text,
    .contact-info, .contact-line, a),
body.shop-theme .store-info-panel * { color: var(--shop-ink) !important; }
body.shop-theme .login-page .store-info-panel a {
    color: var(--shop-accent-text) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.shop-theme .login-page .legal-links .separator { color: var(--shop-muted); }
body.shop-theme .login-btn { width: 100%; }

/* Auto-Payment customer and staff surfaces. These classes are deliberately
 * page-specific so tenant colour and shared shop tokens stay in control. */
body.shop-theme .autopay-hero {
    background: linear-gradient(var(--shop-header-shade, transparent), var(--shop-header-shade, transparent)),
        linear-gradient(120deg, var(--primary), var(--secondary)) !important;
    color: var(--shop-header-ink, #fff) !important;
}
body.shop-theme .autopay-accent { color: var(--shop-accent-text) !important; }
body.shop-theme .autopay-hero > a { color: var(--shop-header-ink) !important; }
body.shop-theme .auto-payment-results-table { max-width: 100%; }
body.shop-theme .auto-payment-results-table table { min-width: 600px; }
body.shop-theme .auto-payment-results .card-header h3 { color: var(--shop-ink); }
body.shop-theme.auto-payment-page .card-head {
    color: var(--shop-ink);
    background: #f1f0e7;
    border-color: var(--shop-line);
}
body.shop-theme.auto-payment-page #cardElement {
    border-color: var(--shop-line);
    background: var(--shop-raised);
}
body.shop-theme.auto-payment-page #cardElement.StripeElement--focus {
    border-color: var(--shop-accent-text);
}
body.shop-theme.auto-payment-page .status-enrolled {
    color: #236447;
    background: #e3f0e6;
}
body.shop-theme.auto-payment-page .status-not {
    color: #755b21;
    background: #f5efd9;
}
body.shop-theme .btn-modern-danger {
    color: #fff;
    background: #a83c35;
    border: 1px solid #a83c35;
    border-radius: 10px;
    padding: .55rem 1rem;
    font-weight: 600;
    cursor: pointer;
}
body.shop-theme .modern-input {
    color: var(--shop-ink);
    background: var(--shop-raised);
    border: 1px solid var(--shop-line);
    border-radius: 9px;
    padding: .55rem .75rem;
}
body.shop-theme .autopay-card { border-top: 3px solid var(--primary) !important; }
body.shop-theme .autopay-admin { padding: 1.25rem; }
body.shop-theme .autopay-admin-since { color: var(--shop-muted); }
body.shop-theme .autopay-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 40px;
    padding: .55rem 1rem;
    color: var(--shop-accent-ink, #fff) !important;
    background: var(--primary) !important;
    border: 1px solid var(--primary);
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
}
body.shop-theme .autopay-manage { color: var(--shop-accent-text) !important; }
body.shop-theme .autopay-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .8rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
}
body.shop-theme .autopay-status-enrolled {
    color: #236447;
    background: #e3f0e6;
}
body.shop-theme .autopay-status-pending {
    color: #755b21;
    background: #f5efd9;
}
body.shop-theme .autopay-admin-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: .88rem;
}
body.shop-theme .autopay-admin-status-enrolled {
    color: #236447;
    background: #e3f0e6;
}
body.shop-theme .autopay-admin-status-inactive {
    color: var(--shop-muted);
    background: #eeeee4;
}
body.shop-theme .autopay-admin-table {
    width: 100%;
    max-width: 420px;
    border-collapse: collapse;
    color: var(--shop-ink);
}
body.shop-theme .autopay-admin-table td {
    padding: .4rem 0;
    border-bottom: 1px solid var(--shop-line);
}
body.shop-theme .autopay-admin-label { color: var(--shop-muted); }
body.shop-theme .autopay-link-box {
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: #edf3e9;
    border: 1px solid var(--shop-line);
    border-radius: 10px;
}
body.shop-theme .autopay-link-copy { color: #365b43; }
body.shop-theme .autopay-link-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    min-width: 0;
}
body.shop-theme .autopay-link-input { flex: 1; min-width: 0; }
body.shop-theme .autopay-link-input {
    color: var(--shop-ink);
    background: var(--shop-raised);
    border: 1px solid var(--shop-line);
    border-radius: 8px;
}
body.shop-theme .autopay-table-wrap { width: 100%; overflow-x: auto; }
body.shop-theme .autopay-tier-table { min-width: 280px; }

/* Customer release details borrow the wholesale reference's generous
   cover/details split while keeping every accent tied to the active tenant. */
body.shop-theme .modal-dialog.customer-product-modal {
    width: min(920px, calc(100vw - 32px));
    max-width: min(920px, calc(100vw - 32px));
}
body.shop-theme .modal-content.customer-product-modal {
    position: relative;
    max-height: min(760px, calc(100dvh - 40px));
    overflow: hidden;
    border-radius: 22px !important;
}
body.shop-theme .customer-product-modal .modal-header {
    position: absolute;
    inset: 0 0 auto auto;
    z-index: 2;
    width: 58%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
}
body.shop-theme .customer-product-modal .product-legacy-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
body.shop-theme .customer-product-modal .close-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    background: var(--shop-raised) !important;
    border-radius: 11px;
}
body.shop-theme .customer-product-modal .product-modal-body {
    display: flex;
    max-height: min(760px, calc(100dvh - 40px));
    padding: 0;
    overflow: hidden;
}
body.shop-theme .customer-product-modal .product-modal-container {
    min-width: 0;
    padding: 0;
}
body.shop-theme .customer-product-modal .product-modal-layout {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    height: min(660px, calc(100dvh - 40px));
    min-height: 390px;
    margin: 0;
    flex-wrap: initial !important;
}
body.shop-theme .customer-product-modal .product-cover-column,
body.shop-theme .customer-product-modal .product-details-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    padding: 0;
}
body.shop-theme .customer-product-modal .product-cover-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #ecebdd;
}
body.shop-theme .customer-product-modal .product-cover-panel {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    box-shadow: 0 12px 30px rgba(38, 53, 50, .16);
}
body.shop-theme .customer-product-modal .product-cover-panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
body.shop-theme .customer-product-modal .product-details-column {
    overflow: hidden;
    background: var(--shop-raised);
}
body.shop-theme .customer-product-modal .product-details-panel {
    display: flex;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    padding: 3.3rem 2.25rem 1.75rem;
}
body.shop-theme .customer-product-modal .modal-comic-title {
    flex: 0 0 auto;
    margin: 0 3rem 1.1rem 0;
    color: var(--shop-ink);
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 750;
    line-height: 1.12;
    overflow-wrap: anywhere;
    max-height: 5.6em;
    overflow-y: auto;
}
body.shop-theme .customer-product-modal .product-metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem 1rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--shop-line);
    max-height: 42%;
    overflow-y: auto;
}
body.shop-theme .customer-product-modal .detail-item {
    min-width: 0;
}
body.shop-theme .customer-product-modal .detail-label {
    margin-bottom: .18rem;
    color: var(--shop-muted);
    font-size: .68rem;
    letter-spacing: .075em;
}
body.shop-theme .customer-product-modal .detail-value {
    color: var(--shop-ink);
    font-size: .94rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
body.shop-theme .customer-product-modal .product-creators {
    grid-column: 1 / -1;
}
body.shop-theme .customer-product-modal .creators-list {
    gap: .35rem;
    max-height: 92px;
    overflow-y: auto;
    padding: .12rem .12rem .18rem 0;
}
body.shop-theme .customer-product-modal .creator-item {
    gap: .25rem;
    padding: .28rem .48rem;
    background: #f4f3eb;
    border-color: var(--shop-line);
    border-radius: 8px;
    font-size: .78rem;
}
body.shop-theme .customer-product-modal .creator-role {
    font-size: .7rem;
}
body.shop-theme .customer-product-modal .product-description {
    flex: 1 1 auto;
    min-height: 50px;
    max-height: none;
    margin: 0;
    padding: .85rem .35rem .7rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--shop-muted);
    font-size: .9rem;
    line-height: 1.55;
    border: 0;
}
body.shop-theme .customer-product-modal .product-actions {
    display: flex;
    flex: 0 0 auto;
    gap: .55rem;
    justify-content: flex-end;
    margin: auto 0 0;
    padding-top: .8rem;
    border-top: 1px solid var(--shop-line);
}
body.shop-theme .customer-product-modal .product-actions > div {
    flex: 1 1 0;
    min-width: 0;
}
body.shop-theme .customer-product-modal .product-actions > div:empty { display: none; }
body.shop-theme .customer-product-modal .product-actions form {
    width: 100%;
}
body.shop-theme .customer-product-modal .product-actions .btn-modern {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    font-size: .88rem;
    white-space: nowrap;
    background: var(--primary) !important;
    color: var(--shop-accent-ink, #fff) !important;
    border: 1px solid var(--primary) !important;
    box-shadow: none !important;
}
body.shop-theme .customer-product-modal #modalSubscribeBtn .btn-modern {
    background: var(--secondary, var(--primary)) !important;
    color: var(--shop-secondary-ink, var(--shop-accent-ink, #fff)) !important;
    border-color: var(--secondary, var(--primary)) !important;
}
body.shop-theme .customer-product-modal .product-creator-text {
    display: block;
    max-height: 92px;
    overflow-y: auto;
}
body.shop-theme .customer-product-modal .product-creators {
    min-height: 0;
}

@media (min-width: 768px) and (max-height: 620px) {
    body.shop-theme .modal-content.customer-product-modal {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }
    body.shop-theme .customer-product-modal .product-modal-body {
        max-height: none;
        overflow: visible;
    }
    body.shop-theme .customer-product-modal .product-modal-layout {
        height: auto;
        min-height: 0;
    }
    body.shop-theme .customer-product-modal .product-cover-column {
        min-height: 300px;
        padding: 1.25rem;
    }
    body.shop-theme .customer-product-modal .product-details-panel {
        min-height: 300px;
        padding-top: 3.1rem;
        padding-bottom: 1.1rem;
    }
    body.shop-theme .customer-product-modal .product-description {
        flex: 0 1 auto;
        max-height: 22dvh;
        min-height: 44px;
    }
}

@media (max-width: 767px) {
    body.shop-theme .autopay-table-wrap { margin-inline: -.25rem; width: calc(100% + .5rem); }
    body.shop-theme .autopay-cta { width: 100%; }
    body.shop-theme .autopay-link-row { align-items: stretch; }
    body.shop-theme .autopay-admin { padding: 1rem; }
    body.shop-theme .autopay-admin-table { max-width: 100%; }
}

@media (max-width: 767px) {
    body.shop-theme :is(.page-content, .page-content-wrapper, .page-wrap, .form-field) { min-width: 0; }
    body.shop-theme :is(.customer-header-actions, .modern-page-header-actions, .header-actions,
        .modern-page-header, .store-header, .customer-header, .shop-header, .page-titlebar) {
        flex-wrap: wrap;
        gap: .75rem;
        max-width: 100%;
    }
    body.shop-theme .modal-dialog { max-width: calc(100vw - 16px); margin: .5rem auto; }
    body.shop-theme .modal-content { max-height: calc(100dvh - 16px); }
    body.shop-theme :is(.modal-body, .k-window-content, .k-dialog-content) {
        max-height: calc(100dvh - 190px);
        padding: 1rem;
    }
    body.shop-theme .modal-footer > * { flex: 1 1 auto; }
    body.shop-theme .modal-dialog.customer-product-modal {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }
    body.shop-theme .modal-content.customer-product-modal {
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
    }
    body.shop-theme .customer-product-modal .modal-header {
        position: sticky;
        top: 0;
        width: 100%;
        height: 0;
        overflow: visible;
    }
    body.shop-theme .customer-product-modal .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    body.shop-theme .customer-product-modal .product-modal-body {
        display: block;
        max-height: none;
        overflow: visible;
    }
    body.shop-theme .customer-product-modal .product-modal-layout {
        display: flex !important;
        height: auto;
        min-height: 0;
        flex-direction: column;
    }
    body.shop-theme .customer-product-modal .product-cover-column {
        min-height: 0;
        padding: 1.1rem 1.1rem .75rem;
    }
    body.shop-theme .customer-product-modal .product-cover-panel {
        width: min(100%, 260px);
        height: min(35dvh, 310px);
        min-height: 190px;
    }
    body.shop-theme .customer-product-modal .product-details-column {
        overflow: visible;
    }
    body.shop-theme .customer-product-modal .product-details-panel {
        height: auto;
        padding: 1rem 1.1rem 1.1rem;
    }
    body.shop-theme .customer-product-modal .modal-comic-title {
        margin: 0 2.8rem .8rem 0;
        font-size: 1.45rem;
    }
    body.shop-theme .customer-product-modal .product-metadata {
        gap: .55rem .8rem;
        padding-bottom: .75rem;
    }
    body.shop-theme .customer-product-modal .product-description {
        flex: 0 1 auto;
        max-height: min(24dvh, 180px);
        min-height: 0;
    }
    body.shop-theme .customer-product-modal .product-actions {
        position: sticky;
        bottom: 0;
        margin: .35rem 0 0;
        padding: .75rem 0 0;
        background: var(--shop-raised);
    }
    body.shop-theme .k-window {
        left: 8px !important;
        top: 8px !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px);
    }
    body.shop-theme :is(.modal-box, .staff-dialog, .unsaved-modal) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.shop-theme *,
    body.shop-theme *::before,
    body.shop-theme *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}