/* PLNTRK Site Designer v2 - shared storefront color system */

/*
   Website colors are store-level, never page-level. These variables intentionally drive
   generated pages and the ecommerce shell so Home, Products, Cart, Checkout, account pages,
   the header, and footer always look like one site.
*/

body.plntrk-storefront.theme-north,
.plntrk-site.theme-north {
    --site-primary: #1a8f58;
    --site-secondary: #173c2d;
    --site-accent: #d8b36a;
    --site-text: #17211c;
    --site-muted: #66756d;
    --site-surface: #ffffff;
    --site-surface-soft: #f4f7f5;
    --site-surface-strong: #eaf1ed;
    --site-border: #dce4df;
    --site-shadow: 0 18px 48px rgba(22, 38, 29, .10);
}

body.plntrk-storefront.theme-evergreen,
.plntrk-site.theme-evergreen {
    --site-primary: #426a4c;
    --site-secondary: #28372d;
    --site-accent: #b79a63;
    --site-text: #213027;
    --site-muted: #6d756d;
    --site-surface: #fffdf8;
    --site-surface-soft: #f4f0e7;
    --site-surface-strong: #e8eadc;
    --site-border: #dddccc;
    --site-shadow: 0 18px 48px rgba(49, 58, 47, .10);
}

body.plntrk-storefront.theme-charcoal-sage,
.plntrk-site.theme-charcoal-sage {
    --site-primary: #667b6a;
    --site-secondary: #252b28;
    --site-accent: #b6a377;
    --site-text: #202522;
    --site-muted: #66706a;
    --site-surface: #fbfcfb;
    --site-surface-soft: #eef1ee;
    --site-surface-strong: #e2e8e3;
    --site-border: #d5dcd6;
    --site-shadow: 0 18px 48px rgba(31, 40, 35, .10);
}

body.plntrk-storefront.theme-navy-sand,
.plntrk-site.theme-navy-sand {
    --site-primary: #3f5c73;
    --site-secondary: #263845;
    --site-accent: #b89c6d;
    --site-text: #1f2b33;
    --site-muted: #65727a;
    --site-surface: #fffefa;
    --site-surface-soft: #f3efe5;
    --site-surface-strong: #e7e1d4;
    --site-border: #ddd7ca;
    --site-shadow: 0 18px 48px rgba(38, 56, 69, .10);
}

body.plntrk-storefront.theme-terracotta-olive,
.plntrk-site.theme-terracotta-olive {
    --site-primary: #9a5f49;
    --site-secondary: #4c5138;
    --site-accent: #a88b58;
    --site-text: #302a25;
    --site-muted: #746b63;
    --site-surface: #fffdf9;
    --site-surface-soft: #f5ede5;
    --site-surface-strong: #eadfd3;
    --site-border: #e0d4c8;
    --site-shadow: 0 18px 48px rgba(76, 81, 56, .10);
}

body.plntrk-storefront.theme-plum-blush,
.plntrk-site.theme-plum-blush {
    --site-primary: #76556d;
    --site-secondary: #453540;
    --site-accent: #bc8f86;
    --site-text: #30262d;
    --site-muted: #756971;
    --site-surface: #fffdfd;
    --site-surface-soft: #f6edef;
    --site-surface-strong: #ebdfe3;
    --site-border: #e2d5da;
    --site-shadow: 0 18px 48px rgba(69, 53, 64, .10);
}

body.plntrk-storefront.theme-slate-ice,
.plntrk-site.theme-slate-ice {
    --site-primary: #4e6872;
    --site-secondary: #2b3940;
    --site-accent: #82a8b5;
    --site-text: #202c31;
    --site-muted: #67757b;
    --site-surface: #fcfdfe;
    --site-surface-soft: #edf3f5;
    --site-surface-strong: #dfe9ec;
    --site-border: #d2dfe3;
    --site-shadow: 0 18px 48px rgba(43, 57, 64, .10);
}

body.plntrk-storefront.theme-warm-neutral,
.plntrk-site.theme-warm-neutral {
    --site-primary: #7d6a58;
    --site-secondary: #403a34;
    --site-accent: #b39a76;
    --site-text: #2c2925;
    --site-muted: #706a63;
    --site-surface: #fffefa;
    --site-surface-soft: #f5f1e9;
    --site-surface-strong: #eae4d9;
    --site-border: #ded8cd;
    --site-shadow: 0 18px 48px rgba(64, 58, 52, .10);
}

body.plntrk-storefront.theme-ocean-coral,
.plntrk-site.theme-ocean-coral {
    --site-primary: #28758a;
    --site-secondary: #173f4d;
    --site-accent: #db806d;
    --site-text: #17313a;
    --site-muted: #62767d;
    --site-surface: #fbfeff;
    --site-surface-soft: #eaf5f7;
    --site-surface-strong: #d7e9ed;
    --site-border: #cbdfe4;
    --site-shadow: 0 18px 48px rgba(23, 63, 77, .10);
}

body.plntrk-storefront.theme-desert-sage,
.plntrk-site.theme-desert-sage {
    --site-primary: #718064;
    --site-secondary: #495044;
    --site-accent: #b6865e;
    --site-text: #302e29;
    --site-muted: #746f67;
    --site-surface: #fffdf8;
    --site-surface-soft: #f3ede2;
    --site-surface-strong: #e8dfd1;
    --site-border: #ddd3c5;
    --site-shadow: 0 18px 48px rgba(73, 80, 68, .10);
}

body.plntrk-storefront.theme-indigo-lilac,
.plntrk-site.theme-indigo-lilac {
    --site-primary: #5852a8;
    --site-secondary: #35335f;
    --site-accent: #a988ca;
    --site-text: #29273d;
    --site-muted: #706e82;
    --site-surface: #fefeff;
    --site-surface-soft: #f0eef9;
    --site-surface-strong: #e3def2;
    --site-border: #d9d4e8;
    --site-shadow: 0 18px 48px rgba(53, 51, 95, .10);
}

body.plntrk-storefront.theme-black-gold,
.plntrk-site.theme-black-gold {
    --site-primary: #8f742c;
    --site-secondary: #0d0e0d;
    --site-accent: #d8b862;
    --site-text: #f6f2e8;
    --site-muted: #b9b1a1;
    --site-surface: #0f100f;
    --site-surface-soft: #171816;
    --site-surface-strong: #20211e;
    --site-border: #34352f;
    --site-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

body.plntrk-storefront.theme-midnight-mint,
.plntrk-site.theme-midnight-mint {
    --site-primary: #3d9d87;
    --site-secondary: #071417;
    --site-accent: #72c9b5;
    --site-text: #edfdf9;
    --site-muted: #9ebfba;
    --site-surface: #081416;
    --site-surface-soft: #0e2023;
    --site-surface-strong: #173035;
    --site-border: #274144;
    --site-shadow: 0 18px 48px rgba(0, 0, 0, .32);
}

body.plntrk-storefront.theme-deep-forest,
.plntrk-site.theme-deep-forest {
    --site-primary: #4e9d6a;
    --site-secondary: #09130e;
    --site-accent: #c8ad72;
    --site-text: #eef8f1;
    --site-muted: #a7b9ac;
    --site-surface: #0c1712;
    --site-surface-soft: #13231a;
    --site-surface-strong: #1d3025;
    --site-border: #30473a;
    --site-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

body.plntrk-storefront.theme-graphite,
.plntrk-site.theme-graphite {
    --site-primary: #648a78;
    --site-secondary: #0d1013;
    --site-accent: #b89c63;
    --site-text: #f4f6f8;
    --site-muted: #aab2bb;
    --site-surface: #111418;
    --site-surface-soft: #1a1f25;
    --site-surface-strong: #252c33;
    --site-border: #343d46;
    --site-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}

body.plntrk-storefront.theme-emerald-onyx,
.plntrk-site.theme-emerald-onyx {
    --site-primary: #21875f;
    --site-secondary: #080d0b;
    --site-accent: #5fc99a;
    --site-text: #eefaf4;
    --site-muted: #a0b9ad;
    --site-surface: #0a100d;
    --site-surface-soft: #111b16;
    --site-surface-strong: #1b2a22;
    --site-border: #2d4137;
    --site-shadow: 0 18px 48px rgba(0, 0, 0, .36);
}

body.plntrk-storefront.theme-copper-charcoal,
.plntrk-site.theme-copper-charcoal {
    --site-primary: #9a6147;
    --site-secondary: #12100f;
    --site-accent: #c98a69;
    --site-text: #f7f1ed;
    --site-muted: #b9aaa2;
    --site-surface: #151312;
    --site-surface-soft: #211d1b;
    --site-surface-strong: #302925;
    --site-border: #463b35;
    --site-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}

body.plntrk-storefront.theme-burgundy-champagne,
.plntrk-site.theme-burgundy-champagne {
    --site-primary: #8c4050;
    --site-secondary: #180b0f;
    --site-accent: #d1b47f;
    --site-text: #fbf4f1;
    --site-muted: #c1aaa9;
    --site-surface: #1a0e12;
    --site-surface-soft: #28151b;
    --site-surface-strong: #3a2028;
    --site-border: #52313a;
    --site-shadow: 0 18px 48px rgba(0, 0, 0, .36);
}

body.plntrk-storefront.theme-north,
body.plntrk-storefront.theme-evergreen,
body.plntrk-storefront.theme-charcoal-sage,
body.plntrk-storefront.theme-navy-sand,
body.plntrk-storefront.theme-terracotta-olive,
body.plntrk-storefront.theme-plum-blush,
body.plntrk-storefront.theme-slate-ice,
body.plntrk-storefront.theme-warm-neutral,
body.plntrk-storefront.theme-ocean-coral,
body.plntrk-storefront.theme-desert-sage,
body.plntrk-storefront.theme-indigo-lilac,
body.plntrk-storefront.theme-black-gold,
body.plntrk-storefront.theme-midnight-mint,
body.plntrk-storefront.theme-deep-forest,
body.plntrk-storefront.theme-graphite,
body.plntrk-storefront.theme-emerald-onyx,
body.plntrk-storefront.theme-copper-charcoal,
body.plntrk-storefront.theme-burgundy-champagne {
    --shop-primary: var(--site-primary);
    --shop-secondary: var(--site-secondary);
    --shop-primary-text: #ffffff;
    --shop-bg: var(--site-surface);
    --shop-shell: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--site-primary) 10%, transparent), transparent 28%), linear-gradient(135deg, var(--site-surface) 0%, var(--site-surface-soft) 100%);
    --shop-surface: var(--site-surface);
    --shop-surface-2: var(--site-surface-soft);
    --shop-panel: var(--site-surface);
    --shop-text: var(--site-text);
    --shop-muted: var(--site-muted);
    --shop-border: var(--site-border);
    --shop-border-strong: color-mix(in srgb, var(--site-border) 72%, var(--site-text));
    --shop-header-bg: color-mix(in srgb, var(--site-surface) 90%, transparent);
    --shop-footer-bg: var(--site-secondary);
    --shop-footer-text: color-mix(in srgb, var(--site-text) 82%, var(--site-muted));
    --shop-shadow-sm: 0 1px 2px color-mix(in srgb, var(--site-secondary) 5%, transparent), 0 8px 24px color-mix(in srgb, var(--site-secondary) 8%, transparent);
    --shop-shadow: var(--site-shadow);
    --shop-primary-soft: color-mix(in srgb, var(--site-primary) 14%, transparent);
}

body.plntrk-storefront .shop-logo {
    border-color: var(--site-border);
    background: var(--site-surface);
}

body.plntrk-storefront .shop-icon-button,
body.plntrk-storefront .shop-icon-link,
body.plntrk-storefront .shop-card,
body.plntrk-storefront .shop-account-card,
body.plntrk-storefront .shop-summary-card,
body.plntrk-storefront .shop-checkout-card,
body.plntrk-storefront .shop-status-card,
body.plntrk-storefront .shop-toolbar,
body.plntrk-storefront .shop-product-card {
    color: var(--shop-text);
}

/* Never let uploaded or generated images break the page width. */
.plntrk-site .plntrk-page-section img {
    max-width: 100%;
}

.plntrk-site .plntrk-image-frame.plntrk-image-size-small {
    width: min(100%, 420px);
    margin-inline: auto;
}

.plntrk-site .plntrk-image-frame.plntrk-image-size-medium {
    width: min(100%, 680px);
    margin-inline: auto;
}

.plntrk-site .plntrk-image-frame.plntrk-image-size-large {
    width: min(100%, 960px);
    margin-inline: auto;
}

.plntrk-site .plntrk-image-frame.plntrk-image-size-full {
    width: 100%;
    max-width: 100%;
}

.plntrk-site .plntrk-dynamic-hours,
.plntrk-site .plntrk-dynamic-contact {
    width: 100%;
}

.plntrk-site .plntrk-hours-empty {
    align-items: flex-start;
    flex-direction: column;
}

.plntrk-site .plntrk-contact-form {
    padding: 1rem;
    border: 1px solid var(--site-border);
    border-radius: 5px;
    background: var(--site-surface-soft);
    color: var(--site-text);
}

.plntrk-site .plntrk-contact-form .form-label {
    margin-bottom: .35rem;
    color: var(--site-text);
    font-size: .82rem;
}

.plntrk-site .plntrk-contact-form .form-control {
    border-color: var(--site-border);
    border-radius: 5px;
    background: var(--site-surface);
    color: var(--site-text);
}

.plntrk-site .plntrk-contact-form .form-control::placeholder {
    color: var(--site-muted);
}

.plntrk-site .plntrk-contact-form .form-control:focus {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--site-primary) 16%, transparent);
}

.plntrk-site .plntrk-contact-help,
.plntrk-site .plntrk-contact-unavailable-copy {
    color: var(--site-muted);
    font-size: .8rem;
}

.plntrk-site .plntrk-contact-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.plntrk-site .plntrk-contact-unavailable {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: 1rem;
    border: 1px solid var(--site-border);
    border-radius: 5px;
    background: var(--site-surface-soft);
    color: var(--site-text);
}

.plntrk-site .plntrk-contact-unavailable .material-icons {
    color: var(--site-primary);
}

.plntrk-site .plntrk-contact-unavailable-title {
    margin-bottom: .2rem;
    color: var(--site-text);
}

/* Dark themes need Bootstrap components inside generated content to follow the site palette. */
.plntrk-site.theme-black-gold .accordion-item,
.plntrk-site.theme-midnight-mint .accordion-item,
.plntrk-site.theme-deep-forest .accordion-item,
.plntrk-site.theme-graphite .accordion-item,
.plntrk-site.theme-emerald-onyx .accordion-item,
.plntrk-site.theme-copper-charcoal .accordion-item,
.plntrk-site.theme-burgundy-champagne .accordion-item,
.plntrk-site.theme-black-gold .accordion-button,
.plntrk-site.theme-midnight-mint .accordion-button,
.plntrk-site.theme-deep-forest .accordion-button,
.plntrk-site.theme-graphite .accordion-button,
.plntrk-site.theme-emerald-onyx .accordion-button,
.plntrk-site.theme-copper-charcoal .accordion-button,
.plntrk-site.theme-burgundy-champagne .accordion-button {
    border-color: var(--site-border);
    background: var(--site-surface-soft);
    color: var(--site-text);
}

.plntrk-site.theme-black-gold .accordion-button:not(.collapsed),
.plntrk-site.theme-midnight-mint .accordion-button:not(.collapsed),
.plntrk-site.theme-deep-forest .accordion-button:not(.collapsed),
.plntrk-site.theme-graphite .accordion-button:not(.collapsed),
.plntrk-site.theme-emerald-onyx .accordion-button:not(.collapsed),
.plntrk-site.theme-copper-charcoal .accordion-button:not(.collapsed),
.plntrk-site.theme-burgundy-champagne .accordion-button:not(.collapsed) {
    background: var(--site-surface-strong);
    color: var(--site-text);
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .plntrk-site .plntrk-image-frame.plntrk-image-size-small,
    .plntrk-site .plntrk-image-frame.plntrk-image-size-medium,
    .plntrk-site .plntrk-image-frame.plntrk-image-size-large,
    .plntrk-site .plntrk-image-frame.plntrk-image-size-full {
        width: 100%;
        max-width: 100%;
    }

    .plntrk-site .plntrk-contact-form {
        padding: .8rem;
    }
}

/*
   Storefront theme compatibility layer
   -----------------------------------
   Ecommerce pages contain a mix of PLNTRK components, Bootstrap utilities, and a few
   legacy page-specific classes. All customer-facing text and surfaces resolve through
   the shared website theme here so payment, checkout, confirmation, account, and future
   ecommerce screens remain readable under every site color scheme.
*/
body.plntrk-storefront,
body.plntrk-storefront .shop-shell,
body.plntrk-storefront .shop-main,
body.plntrk-storefront .shop-content {
    color: var(--shop-text);
}

body.plntrk-storefront h1,
body.plntrk-storefront h2,
body.plntrk-storefront h3,
body.plntrk-storefront h4,
body.plntrk-storefront h5,
body.plntrk-storefront h6,
body.plntrk-storefront p,
body.plntrk-storefront label,
body.plntrk-storefront legend,
body.plntrk-storefront dt,
body.plntrk-storefront dd,
body.plntrk-storefront li,
body.plntrk-storefront td,
body.plntrk-storefront th {
    color: inherit;
}

body.plntrk-storefront .text-muted,
body.plntrk-storefront .text-secondary,
body.plntrk-storefront .text-body-secondary,
body.plntrk-storefront .form-text,
body.plntrk-storefront .shop-form-label,
body.plntrk-storefront .breadcrumb-item,
body.plntrk-storefront .breadcrumb-item a {
    color: var(--shop-muted) !important;
}

body.plntrk-storefront .breadcrumb-item.active,
body.plntrk-storefront .breadcrumb-item + .breadcrumb-item::before {
    color: color-mix(in srgb, var(--shop-muted) 78%, var(--shop-text)) !important;
}

body.plntrk-storefront .bg-white,
body.plntrk-storefront .bg-body,
body.plntrk-storefront .card,
body.plntrk-storefront .list-group-item,
body.plntrk-storefront .modal-content,
body.plntrk-storefront .dropdown-menu {
    background-color: var(--shop-surface) !important;
    color: var(--shop-text) !important;
    border-color: var(--shop-border) !important;
}

body.plntrk-storefront .bg-light,
body.plntrk-storefront .bg-body-tertiary,
body.plntrk-storefront .accordion-item,
body.plntrk-storefront .accordion-button,
body.plntrk-storefront .dropdown-item:hover,
body.plntrk-storefront .dropdown-item:focus {
    background-color: var(--shop-surface-2) !important;
    color: var(--shop-text) !important;
    border-color: var(--shop-border) !important;
}

body.plntrk-storefront .accordion-button:not(.collapsed) {
    background-color: color-mix(in srgb, var(--shop-primary) 12%, var(--shop-surface-2)) !important;
    color: var(--shop-text) !important;
    box-shadow: none;
}

body.plntrk-storefront .form-control,
body.plntrk-storefront .form-select,
body.plntrk-storefront .input-group-text,
body.plntrk-storefront textarea,
body.plntrk-storefront input[type="date"],
body.plntrk-storefront input[type="datetime-local"],
body.plntrk-storefront input[type="email"],
body.plntrk-storefront input[type="number"],
body.plntrk-storefront input[type="search"],
body.plntrk-storefront input[type="tel"],
body.plntrk-storefront input[type="text"],
body.plntrk-storefront input[type="time"] {
    background-color: var(--shop-surface) !important;
    color: var(--shop-text) !important;
    border-color: var(--shop-border) !important;
}

body.plntrk-storefront .form-control::placeholder,
body.plntrk-storefront textarea::placeholder,
body.plntrk-storefront input::placeholder {
    color: var(--shop-muted) !important;
    opacity: .82;
}

body.plntrk-storefront .form-control:focus,
body.plntrk-storefront .form-select:focus,
body.plntrk-storefront textarea:focus,
body.plntrk-storefront input:focus {
    border-color: var(--shop-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-primary) 18%, transparent) !important;
}

body.plntrk-storefront .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--shop-text);
    --bs-table-border-color: var(--shop-border);
    --bs-table-striped-bg: var(--shop-surface-2);
    --bs-table-striped-color: var(--shop-text);
    --bs-table-hover-bg: color-mix(in srgb, var(--shop-primary) 8%, var(--shop-surface-2));
    --bs-table-hover-color: var(--shop-text);
    color: var(--shop-text) !important;
}

body.plntrk-storefront .border,
body.plntrk-storefront .border-top,
body.plntrk-storefront .border-end,
body.plntrk-storefront .border-bottom,
body.plntrk-storefront .border-start {
    border-color: var(--shop-border) !important;
}

body.plntrk-storefront .text-bg-light,
body.plntrk-storefront .badge.text-bg-light {
    background-color: var(--shop-surface-strong, var(--shop-surface-2)) !important;
    color: var(--shop-text) !important;
    border: 1px solid var(--shop-border);
}

body.plntrk-storefront .alert {
    color: var(--shop-text);
    border-color: var(--shop-border);
}

body.plntrk-storefront .alert-light,
body.plntrk-storefront .alert-secondary {
    background-color: var(--shop-surface-2) !important;
    color: var(--shop-text) !important;
    border-color: var(--shop-border) !important;
}

body.plntrk-storefront .alert-info {
    background-color: color-mix(in srgb, #0ea5e9 14%, var(--shop-surface)) !important;
    color: var(--shop-text) !important;
    border-color: color-mix(in srgb, #0ea5e9 34%, var(--shop-border)) !important;
}

body.plntrk-storefront .alert-success {
    background-color: color-mix(in srgb, #16a34a 14%, var(--shop-surface)) !important;
    color: var(--shop-text) !important;
    border-color: color-mix(in srgb, #16a34a 34%, var(--shop-border)) !important;
}

body.plntrk-storefront .alert-warning {
    background-color: color-mix(in srgb, #d97706 15%, var(--shop-surface)) !important;
    color: var(--shop-text) !important;
    border-color: color-mix(in srgb, #d97706 36%, var(--shop-border)) !important;
}

body.plntrk-storefront .alert-danger {
    background-color: color-mix(in srgb, #dc2626 14%, var(--shop-surface)) !important;
    color: var(--shop-text) !important;
    border-color: color-mix(in srgb, #dc2626 34%, var(--shop-border)) !important;
}

body.plntrk-storefront .btn-outline-secondary {
    background-color: var(--shop-surface);
    color: var(--shop-text);
    border-color: var(--shop-border-strong);
}

body.plntrk-storefront .btn-outline-secondary:hover,
body.plntrk-storefront .btn-outline-secondary:focus {
    background-color: var(--shop-surface-2);
    color: var(--shop-text);
    border-color: var(--shop-primary);
}

/* Payment page: replace legacy light-only surfaces with the active website palette. */
body.plntrk-storefront .ecom-pay-card,
body.plntrk-storefront .ecom-pay-sidecard,
body.plntrk-storefront .ecom-pay-status-card {
    background: var(--shop-surface);
    color: var(--shop-text);
    border-color: var(--shop-border);
    box-shadow: var(--shop-shadow-sm);
}

body.plntrk-storefront .ecom-pay-step {
    background: var(--shop-surface-2);
    color: var(--shop-text);
    border-color: var(--shop-border);
}

body.plntrk-storefront .ecom-pay-launcher {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--shop-primary) 15%, var(--shop-surface)),
        color-mix(in srgb, var(--shop-primary) 5%, var(--shop-surface)));
    color: var(--shop-text);
    border-color: color-mix(in srgb, var(--shop-primary) 34%, var(--shop-border));
}

body.plntrk-storefront .ecom-pay-secondary-button {
    background: var(--shop-surface);
    color: var(--shop-text);
    border-color: var(--shop-border-strong);
}

body.plntrk-storefront .ecom-pay-secondary-button:hover,
body.plntrk-storefront .ecom-pay-secondary-button:focus {
    background: var(--shop-surface-2);
    color: var(--shop-text);
    border-color: var(--shop-primary);
}

body.plntrk-storefront .ecom-pay-status-line,
body.plntrk-storefront .ecom-pay-summary-line {
    color: var(--shop-text);
    border-color: var(--shop-border);
}

body.plntrk-storefront .ecom-pay-meta {
    color: var(--shop-muted);
}

body.plntrk-storefront .ecom-pay-kicker {
    background: color-mix(in srgb, var(--shop-primary) 14%, var(--shop-surface));
    color: var(--shop-text);
    border: 1px solid color-mix(in srgb, var(--shop-primary) 30%, var(--shop-border));
}

body.plntrk-storefront .ecom-pay-qr-box {
    background: var(--shop-surface);
    color: var(--shop-text);
    border-color: var(--shop-border-strong);
}

/* Keep the actual QR artwork on white for dependable scanning under dark themes. */
body.plntrk-storefront .ecom-pay-qr {
    background: #ffffff;
    border-color: #d1d5db;
}

body.plntrk-storefront .ecom-pay-inline-frame {
    background: var(--shop-surface);
    color: var(--shop-text);
    border-color: var(--shop-border);
}

body.plntrk-storefront .ecom-pay-inline-link {
    color: color-mix(in srgb, var(--shop-primary) 78%, var(--shop-text));
}

/* Ensure nested checkout/account/order surfaces never fall back to Bootstrap's light defaults. */
body.plntrk-storefront .shop-cart-item,
body.plntrk-storefront .shop-order-row,
body.plntrk-storefront .shop-variant-row,
body.plntrk-storefront .shop-fulfillment-option,
body.plntrk-storefront .shop-status-step,
body.plntrk-storefront .shop-empty,
body.plntrk-storefront .shop-product-detail-image,
body.plntrk-storefront .shop-product-image {
    color: var(--shop-text);
    border-color: var(--shop-border);
}

body.plntrk-storefront .shop-cart-item,
body.plntrk-storefront .shop-order-row,
body.plntrk-storefront .shop-variant-row,
body.plntrk-storefront .shop-fulfillment-option,
body.plntrk-storefront .shop-product-detail-image,
body.plntrk-storefront .shop-product-image {
    background: var(--shop-surface-2);
}

/* Bootstrap components inherit the merchant's website palette instead of Bootstrap's defaults. */
body.plntrk-storefront {
    --bs-body-color: var(--shop-text);
    --bs-body-bg: var(--shop-surface);
    --bs-secondary-color: var(--shop-muted);
    --bs-tertiary-color: var(--shop-muted);
    --bs-secondary-bg: var(--shop-surface-2);
    --bs-tertiary-bg: var(--shop-surface-2);
    --bs-border-color: var(--shop-border);
    --bs-link-color: color-mix(in srgb, var(--shop-primary) 78%, var(--shop-text));
    --bs-link-hover-color: var(--shop-text);
}