/* ==========================================================================
   POSTNOW — CAMPAIGN REVIEW DASHBOARD
   assets/css/campaign-review.css

   Enqueued by ShortcodeHandler::pn_cr_enqueue_dashboard_style() at priority
   999 so it loads AFTER Oxygen's compiled stylesheet.

   Two rules for this file:
   1. Everything is scoped under .pn-cr-app, so it cannot leak to other pages.
   2. It styles our OWN class names (.pn-cr-metric, .pn-cr-ablock, ...) rather
      than Oxygen's (#div_block-*, .grid--auto-6, .self--stretch). Oxygen never
      generated CSS for these names, so there is nothing to out-specify. That
      is why the !important count is a fraction of the previous versions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens — sampled from postnow.ca
   -------------------------------------------------------------------------- */
.pn-cr-app {
    --primary-soft:    #fdf2f3;
    --pn-maroon:      #7f0013;
    --pn-maroon-2:    #5c000e;


    --pn-line:        #e4e8ee;
    --pn-line-2:      #cfd6e0;
    --pn-surface:     #ffffff;
    --pn-canvas:      #f4f6f9;
    --pn-success:     #0f9d58;

    --pn-r:           14px;
    --pn-r-sm:        9px;
    --pn-shadow:      0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.05);
    --pn-shadow-mid:  0 6px 16px -4px rgba(15,23,42,.10), 0 2px 5px rgba(15,23,42,.05);
    --pn-shadow-dark: 0 12px 28px -6px rgba(92,0,14,.35);

    --pn-max:         1400px;
    --pn-appbar-h:    58px;
    --pn-rail-w:      400px;
}

/* --------------------------------------------------------------------------
   1. Full-bleed escape
   Oxygen constrains .ct-section-inner-wrap to its own max-width, which was
   squeezing the whole dashboard into ~900px. Rather than try to out-specify
   an Oxygen rule we may not win against, the app breaks out of whatever
   container it lands in and re-constrains itself.
   -------------------------------------------------------------------------- */
.pn-cr-app {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    display: block;
    background: var(--pn-canvas);
    color: var(--shade);
    font-variant-numeric: tabular-nums;
}

.pn-cr-app *,
.pn-cr-app *::before,
.pn-cr-app *::after {
    box-sizing: border-box;
}

/* Neutralise Oxygen's own padding on the section hosting the shortcode */
.pn-cr-app-host .ct-section-inner-wrap,
.ct-section-inner-wrap:has(> .pn-cr-app) {
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* --------------------------------------------------------------------------
   2. Sticky app bar
   -------------------------------------------------------------------------- */
.pn-cr-appbar {
    position: sticky;
    top: 0;
    z-index: 8 !important;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--pn-line);
}

.pn-cr-appbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: var(--pn-max);
    min-height: var(--pn-appbar-h);
    margin: 0 auto;
    padding: 9px 28px;
}

.pn-cr-app .pn--campaign-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 320px;
    margin: 0;
}

.pn-cr-app .pn-h1--product-title,
.pn-cr-app #spn-product-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--shade);
    letter-spacing: -.3px;
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.pn-cr-app .pn-cr-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    border-radius: 8px;
    color: #fff;
	background: var(--bs-success-border-subtle);
	padding: 1.5rem 1rem !important;
	font-size: var(--text-s);
    border: 1px solid transparent;
    text-decoration: none;
    transition: color .16s, background-color .16s, border-color .16s;
}

.pn-cr-app .pn-cr-iconbtn:hover {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: #f3c9cd;
}

.pn-cr-app .pn-cr-iconbtn--go:hover {
    color: var(--pn-success);
    background: #eefaf3;
    border-color: #b9e8ce;
}

/* Rename field. JS toggles display on #form-box — never set display here. */
.pn-cr-app #form-box {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 380px;
}

.pn-cr-app #input-group {
    width: 100%;
    display: block;
}

.pn-cr-app #input-field {
    width: 100%;
    height: 34px;
    padding: 6px 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--shade);
    background: #f8fafc;
    border: 1px solid var(--pn-line-2);
    border-radius: var(--pn-r-sm);
}

.pn-cr-app #input-field:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(222,30,44,.12);
}

.pn-cr-app #input-progress { display: none; }

/* Actions */
.pn-cr-appbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.pn-cr-btngroup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pn-cr-app .pn-button--campaign-review {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 7px;
    border: 1px solid var(--pn-line-2);
    background: var(--pn-surface);
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s, border-color .16s, color .16s;
}

.pn-cr-app .pn-button--campaign-review:hover {
    background: #f5f7fa;
    border-color: #a9b4c4;
    color: var(--shade);
}

.pn-cr-app .pn-button--share {
    background: var(--primary-soft);
    border-color: #f3c9cd;
    color: var(--primary-dark);
}

.pn-cr-app .pn-button--share:hover {
    background: #fbe3e5;
    border-color: #eda9af;
    color: var(--primary-dark);
}

.pn-cr-app .delete-product:hover {
    background: var(--primary-soft);
    border-color: #f3c9cd;
    color: var(--primary-dark);
}

.pn-cr-app .pn-cr-btn--tour {
    border-style: dashed;
    color: var(--shade-medium);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.pn-cr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--pn-rail-w);
    align-items: start;
    gap: 18px;
    max-width: var(--pn-max);
    margin: 0 auto;
    padding: 18px 28px 44px;
}

.pn-cr-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   4. Panels
   -------------------------------------------------------------------------- */
.pn-cr-panel {
    background: var(--pn-surface);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r);
    box-shadow: var(--pn-shadow);
    overflow: hidden;
}

.pn-cr-panel__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 18px;
    align-items: flex-start !important;
    border-bottom: 1px solid var(--pn-line);
    background: #fff;
}

/* Explicit values with !important: the panel titles were rendering invisible on
   staging, and the h2 inherits from both the theme and Oxygen's headline styles.
   These six declarations remove every way the text could be hidden. */
.pn-cr-app .pn-cr-panel__title,
.pn-cr-app h2.pn-cr-panel__title {
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--text-l) !important;
    font-weight: 700 !important;
    letter-spacing: -.2px !important;
    text-transform: none !important;
    text-align: left !important;
    text-indent: 0 !important;
    color: var(--shade) !important;
    line-height: 1.35 !important;
    opacity: 1 !important;
    max-inline-size: none !important;
    white-space: normal !important;
}

.pn-cr-panel__body { padding: 16px; }

/* --------------------------------------------------------------------------
   5. Metric cards
   Explicit column counts rather than auto-fit, so the row never collapses to
   one column no matter how the container is sized.
   -------------------------------------------------------------------------- */
.pn-cr-app .pn-cr-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

@media (min-width: 620px)  { .pn-cr-app .pn-cr-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 900px)  { .pn-cr-app .pn-cr-metrics { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1180px) { .pn-cr-app .pn-cr-metrics { grid-template-columns: repeat(6, minmax(0,1fr)); } }

.pn-cr-app .pn-cr-metrics--detail { margin-top: 10px; }

.pn-cr-app .pn-cr-metric {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 84px;
    padding: 12px 13px;
    background: #fbfcfd;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-sm);
    text-align: left;
    transition: background-color .18s, border-color .18s;
}

.pn-cr-app .pn-cr-metric:hover {
    background: var(--pn-surface);
    border-color: var(--pn-line-2);
}

.pn-cr-app .pn-cr-metric--wide { grid-column: span 2; }

.pn-cr-app .pn-cr-metric__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; width: 100%;}
.pn-cr-app .pn-cr-metric__actions { display: contents; }
.pn-cr-app .pn-cr-metric__cta { margin-top: 7px; }

.pn-cr-app .pn-cr-metric .pn-card-title--camp-overview,
.pn-cr-app .pn-cr-metric h3,
.pn-cr-app .pn-cr-metric h4 {
    margin: 0;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--shade-medium);
    line-height: 1.35;
}

.pn-cr-app .pn-cr-metric .pn-card-text--camp-detail,
.pn-cr-app .pn-cr-metric .ct-text-block {
    font-size: 12.5px !important;
    font-weight: 700;
    line-height: 1.25;
    color: var(--shade) !important;
    letter-spacing: -.2px;
    word-break: break-word;
    hyphens: auto;
	margin-top: 1rem;
}

/* Unsaved meta reads as deliberate. Presentation only — no data invented. */
.pn-cr-app .drop_number_wrapper:empty::after,
.pn-cr-app .product_quantity_wrapper:empty::after,
.pn-cr-app .induction_date_wrapper:empty::after {
    content: "—";
    color: var(--shade-medium);
    font-weight: 600;
}

/* Cost card, matched by content with a positional fallback */
.pn-cr-app .pn-cr-metric:last-child {
    background: linear-gradient(180deg,#fff 0%,var(--primary-soft) 100%);
    border-color: #f3c9cd;
}

.pn-cr-app .pn-cr-metric:last-child .pn-card-text--camp-detail {
    color: var(--primary-dark) !important;
    font-size: 16px !important;
    font-weight: 800;
}

@supports selector(:has(*)) {
    .pn-cr-app .pn-cr-metric:last-child {
        background: #fbfcfd;
        border-color: var(--pn-line);
    }
    .pn-cr-app .pn-cr-metric:last-child .pn-card-text--camp-detail {
        color: var(--shade);
        font-size: 15.5px;
        font-weight: 700;
    }
    .pn-cr-app .pn-cr-metric:has(.campaign_cost_wrapper) {
        background: linear-gradient(180deg,#fff 0%,var(--primary-soft) 100%);
        border-color: #f3c9cd;
    }
    .pn-cr-app .pn-cr-metric:has(.campaign_cost_wrapper) .pn-card-text--camp-detail {
        color: var(--primary-dark);
        font-size: 18px;
        font-weight: 800;
    }
}

.pn-cr-app .pn-button--buy-campaign {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--primary);
    border-radius: 6px;
}

.pn-cr-app .pn-button--buy-campaign:hover { background: var(--primary-dark); color: #fff; }

/* Edit affordance. .btn-<key> and the icon ids are the JS contract. */
.pn-cr-app .pn-cr-metric .ct-fancy-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    opacity: .3;
    cursor: pointer;
    transition: opacity .18s, background-color .18s;
}

.pn-cr-app .pn-cr-metric:hover .ct-fancy-icon { opacity: 1; background: #eef1f5; }
.pn-cr-app .pn-cr-metric .ct-fancy-icon svg { width: 16px; height: 16px; display: block; }
.pn-cr-app .pn-cr-metric:hover .ct-fancy-icon { background: none !important;}

.pn-cr-app .pn-card-input--camp-detail,
.pn-cr-app #product_quantity {
    width: 100%;
    max-width: 100%;
    height: 32px;
    padding: 5px 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--shade);
    background: #fff;
    border: 1px solid var(--pn-line-2);
    border-radius: 6px;
    box-shadow: none;
}

.pn-cr-app .pn-card-input--camp-detail:focus,
.pn-cr-app #product_quantity:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(222,30,44,.12);
}

/* --------------------------------------------------------------------------
   6. Creative
   -------------------------------------------------------------------------- */
.pn-cr-app .pn-gallery__main-wrap {
    border-radius: var(--pn-r-sm);
    background: #f8fafc;
    border: 1px solid #eef1f5;
    max-height: 420px;
}

.pn-cr-app .pn-gallery__main { max-height: 420px; object-fit: contain; }
.pn-cr-app .pn-gallery__thumb { width: 58px; height: 58px; border-radius: 6px; }
.pn-cr-app .pn-gallery__thumb.active { border-color: var(--primary); }

/* --------------------------------------------------------------------------
   7. Audience
   -------------------------------------------------------------------------- */
.pn-cr-app .pn-cr-audience { display: block; width: 100%; }

.pn-cr-app .pn-cr-ablock {
    display: block;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--pn-line);
}

.pn-cr-app .pn-cr-ablock:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.pn-cr-app .pn-cr-ablock > h4,
.pn-cr-app .pn-cr-ablock .pn-card-title--camp-overview {
    margin: 0 0 3px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--shade-medium);
}

.pn-cr-app .pn-cr-ablock .pn-card-text--camp-detail,
.pn-cr-app .pn-cr-ablock .ct-text-block {
    font-size: 15px;
    font-weight: 700;
    color: var(--shade);
}

.pn-cr-app .pn-cr-ablock--empty {
    padding: 14px;
    margin-bottom: 0;
    background: #f8fafc;
    border: 1px dashed var(--pn-line-2);
    border-radius: var(--pn-r-sm);
}

.pn-cr-app .pn-cr-ablock--empty h4 {
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    color: var(--shade-dark);
}

/* Map. .audience-map is the JS hook — only the frame is styled. */
.pn-cr-app .pn-cr-map,
.pn-cr-app .audience-map {
    display: block;
    width: 100%;
    min-height: 300px;
    height: 300px;
    margin: 0 0 12px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-sm);
    overflow: hidden;
    background: #eef2f6;
    box-shadow: none;
    padding: 0;
}

.pn-cr-app .pn-cr-map > div,
.pn-cr-app .audience-map > div { border-radius: var(--pn-r-sm); }

/* Attribute list */
.pn-cr-app .pn--audience-demographic-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 20px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.5;
}

.pn-cr-app .pn--audience-demographic-info > li {
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid #eef1f5;
    color: var(--shade);
    word-break: break-word;
}

.pn-cr-app .pn--audience-demographic-info > li strong {
    display: block;
    margin-bottom: 1px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--shade-medium);
}

.pn-cr-app .pn--audience-demographic-info a {
    color: var(--primary-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(222,30,44,.25);
}

.pn-cr-app .pn--audience-demographic-info a:hover { border-bottom-color: var(--primary); }

/* Address breakdown */
.pn-cr-app .pn-cr-table { display: block; width: 100%; font-size: 13px; }

.pn-cr-app .pn-cr-table__row {
    display: grid;
    grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,.6fr);
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eef1f5;
}

.pn-cr-app .pn-cr-table__row:last-child { border-bottom: none; }

.pn-cr-app .pn-cr-table__row--head {
    padding-top: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--shade-medium);
}

.pn-cr-app .pn-cr-table__cell { min-width: 0; word-break: break-word; }
.pn-cr-app .pn-cr-table__cell--num { text-align: right; }

.pn-cr-app .pn-cr-postal-list {
    white-space: pre-line;
    font-size: 13px;
    line-height: 1.7;
    color: var(--shade);
}

/* --------------------------------------------------------------------------
   8. Addons
   -------------------------------------------------------------------------- */
.pn-cr-app .pn-addons__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-cr-app .pn-addons__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: var(--pn-surface);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-sm);
    box-shadow: none;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}

.pn-cr-app .pn-addons__item:hover {
    transform: translateY(-2px);
    border-color: var(--pn-line-2);
    box-shadow: var(--pn-shadow-mid);
}

.pn-cr-app .pn-addon-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    padding: 11px 12px 12px;
}

/* Image is a compact banded thumbnail, not a full-width block of flat red 
.pn-cr-app .pn-addon-content img.ct-image {
    width: 100%;
    height: 62px;
    object-fit: contain;
    align-self: stretch;
    padding: 0px !important;
    border: none;
    border-bottom: 1px solid var(--pn-line);
    border-radius: 0;
}*/

.pn-cr-app .pn-addon-content .pn-card-title--camp-overview {
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -.1px;
    color: var(--shade);
    margin: 0 0 2px;
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pn-cr-app .pn-addon-price,
.pn-cr-app .pn-addon-price .woocommerce-Price-amount {
    text-align: left;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.2;
}

.pn-cr-app .pn-addon-price { margin: 0 0 10px; }

.pn-cr-app .pn-addon-price-suffix {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--shade-medium);
    margin-left: 3px;
}

.pn-cr-app .pn-addon-controls {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: auto;
    padding-top: 9px;
    border-top: 1px solid #eef1f5;
}

.pn-cr-app .pn-addon-qty-label { display: block; margin: 0; min-width: 0; }

.pn-cr-app .pn-addon-qty-input {
    width: 100%;
    padding: 6px 4px;
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
    color: var(--shade);
    background: #fff;
    border: 1px solid var(--pn-line-2);
    border-radius: 6px;
}

.pn-cr-app .pn-addon-qty-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(222,30,44,.12);
}

.pn-cr-app .pn-addon-qty-input.readonly {
    background: #f1f4f8;
    color: var(--shade-medium);
    cursor: not-allowed;
}

.pn-cr-app .pn-addon-add-btn {
    width: 100%;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .16s;
}

.pn-cr-app .pn-addon-add-btn:hover { background: var(--primary-dark); }

.pn-cr-app .pn-addons-empty { font-size: 13px; color: var(--shade-medium); }

/* QR panel — dark accent */
.pn-cr-app .pn-cr-panel--qr .pn-cr-panel__body { background: transparent; }

.pn-cr-app .modern-qr-banner {
    background: linear-gradient(135deg,var(--pn-maroon) 0%,var(--pn-maroon-2) 100%);
    color: #fff;
    border: none;
    border-radius: var(--pn-r);
    box-shadow: var(--pn-shadow-dark);
}

.pn-cr-app .modern-qr-banner h2,
.pn-cr-app .modern-qr-banner h3,
.pn-cr-app .modern-qr-banner .pn-card-title--camp-overview { color: #fff; }

.pn-cr-app .modern-qr-banner .qr-text p,
.pn-cr-app .modern-qr-banner p { color: rgba(255,255,255,.72); }

.pn-cr-app .modern-qr-banner .qr-icon,
.pn-cr-app .modern-qr-banner .ct-fancy-icon {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--pn-r-sm);
    color: #fff;
}

.pn-cr-app .modern-qr-banner .qr-actions,
.pn-cr-app .modern-qr-banner .qr-price-box {
    background: rgba(255,255,255,.97);
    border-radius: var(--pn-r-sm);
}

.pn-cr-app .modern-qr-banner .qr-price,
.pn-cr-app .modern-qr-banner .pn-addon-price { color: var(--pn-maroon); font-weight: 800; }

.pn-cr-app .modern-qr-banner .qr-upgrade-btn {
    background: var(--pn-success);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. Order summary rail
   -------------------------------------------------------------------------- */
/* align-self: stretch is what makes position:sticky actually work. With the
   layout's `align-items: start`, this grid item collapsed to exactly the height
   of its sticky child, leaving zero distance for it to travel. */
.pn-cr-rail {
    min-width: 0;
    align-self: stretch;
    height: 100%;
}

.pn-cr-rail__sticky {
    position: sticky;
    top: calc(var(--pn-appbar-h) + 14px);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--pn-appbar-h) - 34px);
    background: var(--pn-surface);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r);
    box-shadow: var(--pn-shadow);
    overflow: hidden;
}

.pn-cr-panel__head--rail { flex: 0 0 auto; }

.pn-cr-rail__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 18px 16px;
}

/* ---- Line items ----------------------------------------------------------
   createGroupedProductHTMLOxygen() lives outside this plugin, so the row is
   laid out here as a resilient grid: thumb / details / price. The remove
   control is pulled out of the price column, which is what was overlapping
   the Plant a Tree amount.
   ------------------------------------------------------------------------ */
/* ---- Line items -----------------------------------------------------------
   handle_cr_dashboard_shortcode() runs the totals fragment through
   pn_cr_normalize_order_rows(), which hoists the img, title, qty, price and
   subtotal to be DIRECT children of the row. Grid placement below is therefore
   reliable regardless of how createGroupedProductHTMLOxygen() nests them.
   -------------------------------------------------------------------------- */
.pn-cr-app .pn-card--camp-pricing-table {
    position: relative;
    /* !important: this class is also styled by live-custom-css.css and by the
       external createGroupedProductHTMLOxygen() output, both of which set
       display and card chrome on it. */
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    grid-template-areas:
        "img title title"
        "img meta  total";
    align-items: center;
    column-gap: 12px;
    row-gap: 5px;
    padding: 14px 0 !important;
    margin: 0 !important;
    /* Strip the inherited card look — the rows sit inside the rail panel and
       should read as a list, not as stacked shadowed cards. */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    border-bottom: 1px solid #eef1f5 !important;
    border-radius: 0 !important;
}

/* Same for anything the source markup left behind inside the row */
.pn-cr-app .pn-card--camp-pricing-table > *,
.pn-cr-app .pn-cr-orow__meta {
    background: none;
    box-shadow: none;
}

.pn-cr-app .pn-card--camp-pricing-table:last-of-type { border-bottom: none !important; }

.pn-cr-app .pn-card--camp-pricing-table > img {
    grid-area: img;
    align-self: start;
    width: 46px;
    height: 46px;
    max-width: 46px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid #eef1f5;
    box-shadow: none !important;
    background: #fff;
    padding: 0 !important;
}

.pn-cr-app .pn-card--product-title {
    grid-area: title;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--shade);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-right: 20px;
}

.pn-cr-app .pn-cr-orow__meta {
    grid-area: meta;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--shade-medium);
    white-space: nowrap;
}

/* Reads as "1500 × $0.34" without needing the source markup to supply it */
.pn-cr-app .pn-cr-orow__meta .pn-card--product-qty + .pn-card--product-price::before {
    content: "×";
    margin-right: 4px;
    color: var(--pn-line-2);
}

.pn-cr-app .pn-card--product-qty,
.pn-cr-app .pn-card--product-price {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--shade-medium);
}

.pn-cr-app .pn-card--product-sub-total {
    grid-area: total;
    justify-self: end;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--shade);
    white-space: nowrap;
}

/* Everything the normalizer did not recognise. The pieces it did recognise are
   already placed above, so this is usually just emptied wrapper divs. Set to
   `display: block` if a row turns out to carry extra content worth showing. */
.pn-cr-app .pn-cr-orow__extra { display: none; }

.pn-cr-app .remove-carbon-item {
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    color: var(--shade-medium);
    background: #fff;
    border: 1px solid var(--pn-line);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .16s, color .16s, border-color .16s;
}

.pn-cr-app .pn-card--camp-pricing-table:hover .remove-carbon-item { opacity: 1; }

.pn-cr-app .remove-carbon-item:hover {
    color: var(--primary);
    border-color: #f3c9cd;
    background: var(--primary-soft);
}

/* ---- Totals — dark accent block ---------------------------------------- */
.pn-cr-app .woocommerce-checkout-review-order-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    margin: 12px 0 0;
    padding: 4px 18px 15px;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    background: linear-gradient(135deg,var(--pn-maroon) 0%,var(--pn-maroon-2) 100%);
    border-radius: var(--pn-r);
    overflow: hidden;
}

.pn-cr-app .woocommerce-checkout-review-order-table tr,
.pn-cr-app .woocommerce-checkout-review-order-table th,
.pn-cr-app .woocommerce-checkout-review-order-table td {
    background: transparent;
    background-image: none;
    border: none;
}

/* The thead SUBTOTAL caption duplicates the Subtotal row directly beneath it */
.pn-cr-app .woocommerce-checkout-review-order-table thead { display: none; }

.pn-cr-app .woocommerce-checkout-review-order-table th,
.pn-cr-app .woocommerce-checkout-review-order-table td {
    padding: 9px 0;
    font-size: 13.5px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,.12);
    word-break: break-word;
}

.pn-cr-app .woocommerce-checkout-review-order-table tfoot tr:first-child th,
.pn-cr-app .woocommerce-checkout-review-order-table tfoot tr:first-child td { padding-top: 12px; }

.pn-cr-app .woocommerce-checkout-review-order-table tfoot th {
    text-align: left;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255,255,255,.8);
    white-space: nowrap;
}

.pn-cr-app .woocommerce-checkout-review-order-table tfoot td,
.pn-cr-app .woocommerce-checkout-review-order-table tfoot td bdi,
.pn-cr-app .woocommerce-checkout-review-order-table tfoot td .amount {
    text-align: right;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

.pn-cr-app .woocommerce-checkout-review-order-table tr.cart-discount th,
.pn-cr-app .woocommerce-checkout-review-order-table tr.cart-discount td,
.pn-cr-app .woocommerce-checkout-review-order-table tr.cart-discount td bdi { color: #7ee2a8; }

.pn-cr-app .woocommerce-checkout-review-order-table .order-total th,
.pn-cr-app .woocommerce-checkout-review-order-table .order-total td,
.pn-cr-app .woocommerce-checkout-review-order-table .order-total td bdi,
.pn-cr-app .woocommerce-checkout-review-order-table .order-total td .amount {
    padding-top: 13px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #fff;
    border-bottom: none;
    border-top: 1px solid rgba(255,255,255,.2);
    white-space: nowrap;
}

.pn-cr-app .woocommerce-checkout-review-order-table tr:last-child th,
.pn-cr-app .woocommerce-checkout-review-order-table tr:last-child td { border-bottom: none; }

/* Rail actions */
.pn-cr-rail__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
    padding: 15px 18px 0;
    border-top: 1px solid var(--pn-line);
}

.pn-cr-app .pn-button--action {
    display: block;
    width: 100%;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: var(--pn-r-sm);
    box-shadow: 0 4px 12px rgba(222,30,44,.26);
    transition: background-color .16s, transform .16s, box-shadow .16s;
}

.pn-cr-app .pn-button--action:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(222,30,44,.32);
    color: #fff;
}

.pn-cr-app .pn--campaign-request-callback-btn {
    display: block;
    width: 100%;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--shade);
    background: var(--pn-surface);
    border: 1px solid var(--pn-line-2);
    border-radius: var(--pn-r-sm);
    transition: background-color .16s, border-color .16s;
}

.pn-cr-app .pn--campaign-request-callback-btn:hover {
    background: #f5f7fa;
    border-color: #a9b4c4;
}

.pn-cr-rail__note {
    flex: 0 0 auto;
    margin: 0;
    padding: 11px 18px 16px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--shade-medium);
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
    .pn-cr-app { --pn-rail-w: 350px; }
    .pn-cr-layout { padding: 16px 18px 36px; }
    .pn-cr-appbar__inner { padding: 9px 18px; }
}

@media (max-width: 1023px) {
    .pn-cr-layout { grid-template-columns: minmax(0,1fr); gap: 14px; }
    /* Mobile: no sticky, no internal scroll — the rail is just the last block
       in the flow and grows to its content. */
    .pn-cr-rail { align-self: auto; height: auto; }
    .pn-cr-rail__sticky {
        position: static;
        top: auto;
        max-height: none;
    }
    .pn-cr-rail__body {
        overflow-y: visible;
        max-height: none;
    }
    .pn-cr-rail__actions { flex-direction: row; }
    .pn-cr-rail__actions .pn-button--action { flex: 2 1 0; }
    .pn-cr-rail__actions .pn--campaign-request-callback-btn { flex: 1 1 0; }
    .pn-cr-app .remove-carbon-item { opacity: 1; }
}

@media (max-width: 767px) {
    .pn-cr-appbar__inner { padding: 8px 13px; gap: 9px; }
    .pn-cr-app .pn-h1--product-title,
    .pn-cr-app #spn-product-title { font-size: 15.5px; }

    .pn-cr-appbar__actions {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .pn-cr-appbar__actions::-webkit-scrollbar { display: none; }

    .pn-cr-layout { padding: 13px 13px 30px; }
    .pn-cr-panel__body { padding: 13px; }

    .pn-cr-app .pn-cr-metric { min-height: 74px; padding: 10px 11px; }
    .pn-cr-app .pn-cr-metric .pn-card-text--camp-detail { font-size: 14px; }
    .pn-cr-app .pn-cr-metric .ct-fancy-icon { opacity: .7; }

    .pn-cr-app .pn-cr-map,
    .pn-cr-app .audience-map { min-height: 220px; height: 220px; }

    .pn-cr-rail__actions { flex-direction: column; }

    .pn-cr-app .woocommerce-checkout-review-order-table .order-total th,
    .pn-cr-app .woocommerce-checkout-review-order-table .order-total td { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-cr-app *,
    .pn-cr-app *::before,
    .pn-cr-app *::after { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   11. Request Callback modal
   Replaces the Oxygen popup the old button triggered. Renders Gravity Form 54
   so all its existing notifications, hooks and validation still apply.
   -------------------------------------------------------------------------- */
.pn-cr-modal[hidden] { display: none; }

.pn-cr-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pn-cr-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.pn-cr-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: var(--pn-r);
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .4);
    overflow: hidden;
    animation: pn-cr-pop .18s ease-out;
}

@keyframes pn-cr-pop {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.pn-cr-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 15px 18px;
    border-bottom: 1px solid var(--pn-line);
    background: linear-gradient(180deg, #fcfdfe 0%, #f8fafc 100%);
}

.pn-cr-modal__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--shade);
}

.pn-cr-modal__close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    font-size: 20px;
    line-height: 1;
    color: var(--shade-medium);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: color .16s, background-color .16s, border-color .16s;
}

.pn-cr-modal__close:hover {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: #f3c9cd;
}

.pn-cr-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
}

/* Gravity Forms inside the modal */
.pn-cr-modal__body .gform_wrapper { margin: 0; }
.pn-cr-modal__body .gform_wrapper form { margin: 0; }

.pn-cr-modal__body .gfield_label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--shade-medium) !important;
}

.pn-cr-modal__body input[type=text],
.pn-cr-modal__body input[type=email],
.pn-cr-modal__body input[type=tel],
.pn-cr-modal__body textarea,
.pn-cr-modal__body select {
    width: 100%;
    padding: 9px 11px;
    font-size: 14px;
    color: var(--shade);
    background: #f8fafc;
    border: 1px solid var(--pn-line-2);
    border-radius: var(--pn-r-sm);
}

.pn-cr-modal__body input:focus,
.pn-cr-modal__body textarea:focus,
.pn-cr-modal__body select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(222, 30, 44, .12);
}

.pn-cr-modal__body .gform_footer input[type=submit],
.pn-cr-modal__body .gform_button {
    width: 100%;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: var(--pn-r-sm);
    cursor: pointer;
    transition: background-color .16s;
}

.pn-cr-modal__body .gform_footer input[type=submit]:hover,
.pn-cr-modal__body .gform_button:hover { background: var(--primary-dark); }

@media (max-width: 560px) {
    .pn-cr-modal { padding: 0; align-items: flex-end; }
    .pn-cr-modal__panel {
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--pn-r) var(--pn-r) 0 0;
    }
}


/* ==========================================================================
   12. OVERRIDES — appended last, so these win on source order
   ========================================================================== */

/* --------------------------------------------------------------------------
   12a. Make position:sticky actually possible

   sticky silently dies if ANY ancestor establishes a scroll container. Two
   things do that here:

   1. `overflow-x: hidden` on html/body/a theme wrapper. Almost every theme
      sets it to suppress horizontal scrollbars — and .pn-cr-app deliberately
      goes full-bleed with width:100vw, which makes that even more likely to be
      present. Critically, `overflow-x: hidden` computes overflow-y to `auto`,
      turning that element into the scroll container. The rail then sticks
      relative to something that never scrolls, so it looks like sticky is
      being ignored.
   2. Oxygen sections frequently carry `overflow: hidden`.

   `overflow: clip` suppresses horizontal scroll WITHOUT creating a scroll
   container, so sticky keeps working. Scoped with :has() so it only applies on
   pages that actually contain the dashboard.
   -------------------------------------------------------------------------- */
html:has(.pn-cr-app),
body:has(.pn-cr-app) {
    overflow-x: clip;
    overflow-y: visible;
}

body:has(.pn-cr-app) .ct-inner-content,
body:has(.pn-cr-app) .ct-section,
body:has(.pn-cr-app) .ct-section-inner-wrap,
body:has(.pn-cr-app) .ct-div-block:has(> .pn-cr-app),
body:has(.pn-cr-app) .ct-code-block:has(> .pn-cr-app) {
    overflow: visible !important;
}

/* The chain from the app down to the rail must not clip either */
.pn-cr-app,
.pn-cr-layout,
.pn-cr-rail {
    overflow: visible !important;
}

.pn-cr-rail {
    align-self: stretch !important;
    height: 100% !important;
    min-width: 0;
}

.pn-cr-rail__sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(var(--pn-appbar-h) + 14px) !important;
    max-height: calc(100vh - var(--pn-appbar-h) - 34px);
    display: flex;
    flex-direction: column;
    overflow: hidden;           /* rounds the panel; it is not an ancestor of
                                   anything sticky, so this is safe */
}

.pn-cr-rail__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   12b. Order summary rows — force the layout at any nesting depth

   pn_cr_normalize_order_rows() hoists these to direct children server-side, but
   this makes the layout correct even if that PHP is not deployed, or if
   createGroupedProductHTMLOxygen() changes its markup.

   `display: contents` dissolves the wrapper boxes so their children become
   grid items of the row directly. Using :has() with a descendant selector
   dissolves EVERY wrapper between the row and a known cell, at any depth.
   -------------------------------------------------------------------------- */
.pn-cr-app .pn-card--camp-pricing-table {
    position: relative;
    display: grid !important;
    grid-template-columns: 46px auto minmax(0, 1fr) auto !important;
    grid-template-areas:
        "img title title title"
        "img qty   price total" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    padding: 14px 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    border-bottom: 1px solid #eef1f5 !important;
    border-radius: 0 !important;
}

.pn-cr-app .pn-card--camp-pricing-table:last-of-type {
    border-bottom: none !important;
}

/* Dissolve every wrapper between the row and the cells */
.pn-cr-app .pn-card--camp-pricing-table div:has(.pn-card--product-title),
.pn-cr-app .pn-card--camp-pricing-table div:has(.pn-card--product-qty),
.pn-cr-app .pn-card--camp-pricing-table div:has(.pn-card--product-price),
.pn-cr-app .pn-card--camp-pricing-table div:has(.pn-card--product-sub-total),
.pn-cr-app .pn-card--camp-pricing-table div:has(.remove-carbon-item),
.pn-cr-app .pn-card--camp-pricing-table div:has(> img),
.pn-cr-app .pn-card--camp-pricing-table a:has(> img),
.pn-cr-app .pn-cr-orow__meta,
.pn-cr-app .pn-cr-orow__extra {
    display: contents !important;
}

/* Cell placement — descendant selectors, so depth does not matter */
.pn-cr-app .pn-card--camp-pricing-table img {
    grid-area: img !important;
    align-self: start !important;
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    min-width: 46px !important;
    object-fit: cover !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1px solid #eef1f5 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.pn-cr-app .pn-card--product-title {
    grid-area: title !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--shade) !important;
    text-align: left !important;
    padding: 0 20px 0 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.pn-cr-app .pn-card--product-qty {
    grid-area: qty !important;
    justify-self: start !important;
}

.pn-cr-app .pn-card--product-price {
    grid-area: price !important;
    justify-self: start !important;
}

.pn-cr-app .pn-card--product-qty,
.pn-cr-app .pn-card--product-price {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: var(--shade-medium) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.pn-cr-app .pn-card--product-price::before {
    content: "×";
    margin-right: 4px;
    color: var(--pn-line-2);
}

.pn-cr-app .pn-card--product-sub-total {
    grid-area: total !important;
    justify-self: end !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--shade) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.pn-cr-app .remove-carbon-item {
    position: absolute !important;
    top: 10px !important;
    right: 0 !important;
    z-index: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: var(--shade-medium) !important;
    background: #fff !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    cursor: pointer;
    opacity: 0;
    transition: opacity .16s, color .16s, border-color .16s;
}

.pn-cr-app .pn-card--camp-pricing-table:hover .remove-carbon-item { opacity: 1; }

.pn-cr-app .remove-carbon-item:hover {
    color: var(--primary) !important;
    border-color: #f3c9cd !important;
    background: var(--primary-soft) !important;
}

/* --------------------------------------------------------------------------
   12c. Mobile — unpin, no internal scroll
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .pn-cr-rail {
        align-self: auto !important;
        height: auto !important;
    }

    .pn-cr-rail__sticky {
        position: static !important;
        top: auto !important;
        max-height: none !important;
    }

    .pn-cr-rail__body {
        overflow-y: visible !important;
        max-height: none !important;
    }

    .pn-cr-app .remove-carbon-item { opacity: 1; }
}

@media (max-width: 560px) {
    /* Stack the numbers under the title on very narrow screens */
    .pn-cr-app .pn-card--camp-pricing-table {
        grid-template-columns: 42px auto minmax(0, 1fr) auto !important;
    }

    .pn-cr-app .pn-card--camp-pricing-table img {
        width: 42px !important;
        height: 42px !important;
        max-width: 42px !important;
        min-width: 42px !important;
    }

    .pn-cr-app .pn-card--product-title { font-size: 12.5px !important; }
    .pn-cr-app .pn-card--product-sub-total { font-size: 13.5px !important; }
}


/* ==========================================================================
   13. CAMPAIGN UPGRADES — addon cards
   Appended last and written to win outright.

   Specificity note: the Campaign Upgrades panel still carries the legacy
   id="div_block-4304-94660", and the old Oxygen code-block CSS targeted
   `#div_block-4304-94660 .pn-addon-*` with !important — that is (1,1,0) and
   beats a plain `.pn-cr-app .pn-addon-*` (0,2,0) no matter what order the
   files load in. Every selector below is doubled up: once plain, once with the
   id included, giving (1,2,0) + !important so it wins either way.

   Everything is excluded from .pn-cr-panel--qr, so the Trackable QR Code
   banner keeps its own dark treatment untouched.

   The real fix is deleting the old dashboard CSS from the Oxygen code block.
   This works whether or not that has happened.
   ========================================================================== */

/* --- Grid ---------------------------------------------------------------- */
.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addons__list,
.pn-cr-app #div_block-4304-94660 .pn-addons__list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

@media (min-width: 1500px) {
    .pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addons__list,
    .pn-cr-app #div_block-4304-94660 .pn-addons__list {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    }
}

/* --- Card ---------------------------------------------------------------- */
.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addons__item,
.pn-cr-app #div_block-4304-94660 .pn-addons__item {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--pn-surface) !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    list-style: none !important;
    transition: border-color .16s, box-shadow .16s, transform .16s !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addons__item:hover,
.pn-cr-app #div_block-4304-94660 .pn-addons__item:hover {
    transform: translateY(-2px);
    border-color: var(--pn-line-2) !important;
    box-shadow: var(--pn-shadow-mid) !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-content,
.pn-cr-app #div_block-4304-94660 .pn-addon-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 11px 12px 12px !important;
    margin: 0 !important;
    gap: 0 !important;
}

/* --- Image: full-bleed band across the card top, only when one exists ----- */
.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-content img,
.pn-cr-app #div_block-4304-94660 .pn-addon-content img {
    display: block !important;
    width: calc(100% + 24px) !important;
    max-width: calc(100% + 24px) !important;
    height: 76px !important;
    margin: -11px -12px 10px !important;
    padding: 8px !important;
    object-fit: contain !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- Title: two lines reserved so buttons line up across the row --------- */
.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-content .pn-card-title--camp-overview,
.pn-cr-app #div_block-4304-94660 .pn-addon-content .pn-card-title--camp-overview {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.6em !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 3 !important;
    letter-spacing: -.1px !important;
    text-transform: none !important;
    text-align: left !important;
    color: var(--shade) !important;
}

.pn-cr-main #div_block-4304-94660 .pn-addon-content img.ct-image {
    padding: 0 !important;
    margin-top: 0px !important;
}

/* --- Price and unit on ONE line ------------------------------------------ */
.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-price,
.pn-cr-app #div_block-4304-94660 .pn-addon-price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin: 0 0 9px !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    color: var(--primary-dark) !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-price .woocommerce-Price-amount,
.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-price bdi,
.pn-cr-app #div_block-4304-94660 .pn-addon-price bdi {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--primary-dark) !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-price-suffix,
.pn-cr-app #div_block-4304-94660 .pn-addon-price-suffix {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--shade-medium) !important;
}

/* --- Controls: qty + Add side by side, pinned to the card bottom --------- */
.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-controls,
.pn-cr-app #div_block-4304-94660 .pn-addon-controls {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 9px 0 0 !important;
    border-top: 1px solid #f1f4f7 !important;
    border-bottom: none !important;
    background: none !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-qty-label,
.pn-cr-app #div_block-4304-94660 .pn-addon-qty-label {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-qty-input,
.pn-cr-app #div_block-4304-94660 .pn-addon-qty-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: var(--shade) !important;
    background: #fff !important;
    border: 1px solid var(--pn-line-2) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-qty-input:focus,
.pn-cr-app #div_block-4304-94660 .pn-addon-qty-input:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(222, 30, 44, .12) !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-qty-input.readonly,
.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-qty-input[readonly],
.pn-cr-app #div_block-4304-94660 .pn-addon-qty-input[readonly] {
    background: #f1f4f8 !important;
    color: var(--shade-medium) !important;
    border-color: #e3e8ee !important;
    cursor: not-allowed !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-add-btn,
.pn-cr-app #div_block-4304-94660 .pn-addon-add-btn {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    line-height: 30px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #fff !important;
    background: var(--primary) !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color .16s !important;
}

.pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-add-btn:hover,
.pn-cr-app #div_block-4304-94660 .pn-addon-add-btn:hover {
    background: var(--primary-dark) !important;
}

/* --- Narrow screens ------------------------------------------------------ */
@media (max-width: 767px) {
    .pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addons__list,
    .pn-cr-app #div_block-4304-94660 .pn-addons__list {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 8px !important;
    }

    .pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-content,
    .pn-cr-app #div_block-4304-94660 .pn-addon-content {
        padding: 10px !important;
    }

    .pn-cr-app .pn-cr-panel:not(.pn-cr-panel--qr) .pn-addon-content img,
    .pn-cr-app #div_block-4304-94660 .pn-addon-content img {
        width: calc(100% + 20px) !important;
        max-width: calc(100% + 20px) !important;
        height: 64px !important;
        margin: -10px -10px 8px !important;
    }
}


/* ==========================================================================
   14. ORDER SUMMARY — multi-drop rows, sale pricing, remove control
   Appended last. Fixes three concrete things:

   1. `.pn-cr-orow__extra` was set to `display: contents` in section 12b, which
      overrode the `display: none` in section 9. That promoted every leftover
      wrapper the normalizer had already emptied into the grid, so its contents
      landed in the SAME grid areas as the real cells — which is what made the
      struck-through and sale prices sit on top of each other on multi-drop rows.
   2. WooCommerce emits <del> + <ins> for discounted lines. Multi-drop campaigns
      always have those, and nothing was styling them.
   3. The remove control was invisible until hover, which made it hard to find.
   ========================================================================== */

/* --- 1. Leftovers stay hidden. This must win over section 12b. ------------ */
.pn-cr-app .pn-cr-orow__extra,
.pn-cr-app .pn-card--camp-pricing-table .pn-cr-orow__extra {
    display: none !important;
}

/* --- Row grid ------------------------------------------------------------
   Two variants. Rows processed by pn_cr_normalize_order_rows() have a
   .pn-cr-orow__meta wrapper holding qty + price; raw rows do not. :has() picks
   the right one so both render identically.
   ------------------------------------------------------------------------ */

/* Normalized rows */
.pn-cr-app .pn-card--camp-pricing-table:has(.pn-cr-orow__meta) {
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    grid-template-areas:
        "img title title"
        "img meta  total" !important;
}

.pn-cr-app .pn-cr-orow__meta {
    grid-area: meta !important;
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 2px 5px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Raw rows — qty and price get their own tracks */
.pn-cr-app .pn-card--camp-pricing-table:not(:has(.pn-cr-orow__meta)) {
    grid-template-columns: 46px auto auto minmax(0, 1fr) !important;
    grid-template-areas:
        "img title title title"
        "img qty   price total" !important;
}

/* Row 2 must be free to grow — multi-drop lines carry two prices each */
.pn-cr-app .pn-card--camp-pricing-table {
    align-items: start !important;
    row-gap: 4px !important;
}

.pn-cr-app .pn-card--camp-pricing-table > img {
    align-self: start !important;
}

/* --- 2. Sale pricing: struck original + discounted price ------------------ */

/* Unit price — inline, wraps if it must */
.pn-cr-app .pn-card--product-qty,
.pn-cr-app .pn-card--product-price {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.35 !important;
}

.pn-cr-app .pn-card--product-price {
    display: inline-flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

/* Subtotal — struck price stacked above the amount actually charged */
.pn-cr-app .pn-card--product-sub-total {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: 1px !important;
    min-width: 0 !important;
    white-space: normal !important;
    text-align: right !important;
    line-height: 1.25 !important;
}

/* The struck-through original, wherever it appears */
.pn-cr-app .pn-card--product-price del,
.pn-cr-app .pn-card--product-price s,
.pn-cr-app .pn-card--product-sub-total del,
.pn-cr-app .pn-card--product-sub-total s,
.pn-cr-app .pn-cr-orow__meta del,
.pn-cr-app .pn-cr-orow__meta s {
    display: inline-block !important;
    order: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1px;
    color: var(--shade-medium) !important;
    opacity: .85;
    background: none !important;
}

.pn-cr-app .pn-card--product-price del bdi,
.pn-cr-app .pn-card--product-sub-total del bdi,
.pn-cr-app .pn-card--product-price s bdi,
.pn-cr-app .pn-card--product-sub-total s bdi {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: var(--shade-medium) !important;
}

/* The price actually charged */
.pn-cr-app .pn-card--product-price ins,
.pn-cr-app .pn-card--product-sub-total ins,
.pn-cr-app .pn-cr-orow__meta ins {
    order: 1;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
    background: none !important;
}

.pn-cr-app .pn-card--product-sub-total ins,
.pn-cr-app .pn-card--product-sub-total ins bdi {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--shade) !important;
}

.pn-cr-app .pn-card--product-price ins,
.pn-cr-app .pn-card--product-price ins bdi {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--shade-dark) !important;
}

/* A discounted line earns a subtle marker so it is obvious why it differs */
.pn-cr-app .pn-card--camp-pricing-table:has(.pn-card--product-sub-total del) .pn-card--product-sub-total ins,
.pn-cr-app .pn-card--camp-pricing-table:has(.pn-card--product-sub-total s) .pn-card--product-sub-total ins {
    color: var(--pn-success) !important;
}

/* Long multi-drop titles get more room before the remove control */
.pn-cr-app .pn-card--product-title {
    padding-right: 24px !important;
}

/* --- 3. Remove control: always visible, clearer target ------------------- */
.pn-cr-app .remove-carbon-item,
.pn-cr-app .remove-qr-item {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-decoration: none !important;
    color: var(--shade-medium) !important;
    background: #fff !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    opacity: .65 !important;              /* visible without hover */
    pointer-events: auto !important;
    transition: opacity .16s, color .16s, border-color .16s, background-color .16s;
}

.pn-cr-app .pn-card--camp-pricing-table:hover .remove-carbon-item,
.pn-cr-app .pn-card--camp-pricing-table:hover .remove-qr-item {
    opacity: 1 !important;
}

.pn-cr-app .remove-carbon-item:hover,
.pn-cr-app .remove-qr-item:hover {
    color: #fff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    opacity: 1 !important;
}

/* Nothing may paint over the remove control */
.pn-cr-app .pn-card--product-title,
.pn-cr-app .pn-card--product-sub-total,
.pn-cr-app .pn-cr-orow__meta {
    position: relative;
    z-index: 1;
}

/* --- Narrow rail --------------------------------------------------------- */
@media (max-width: 1240px) and (min-width: 1024px) {
    .pn-cr-app .pn-card--product-title { font-size: 12.5px !important; }
    .pn-cr-app .pn-card--product-sub-total ins,
    .pn-cr-app .pn-card--product-sub-total ins bdi,
    .pn-cr-app .pn-card--product-sub-total { font-size: 13px !important; }
}


/* ==========================================================================
   15. TOTALS TABLE — multi-drop savings row alignment
   The savings row carries a long coupon label ("Multidrop Campaign Savings")
   in the same cell as its amount. With table-layout:fixed and nowrap inherited
   from the other tfoot rows it overflowed the panel and clipped.
   ========================================================================== */

.pn-cr-app .woocommerce-checkout-review-order-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Give the label column a firm share so amounts always have room */
.pn-cr-app .woocommerce-checkout-review-order-table tfoot th {
    width: 44% !important;
    padding-right: 8px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-align: left !important;
    vertical-align: top !important;
}

.pn-cr-app .woocommerce-checkout-review-order-table tfoot td {
    width: 56% !important;
    text-align: right !important;
    vertical-align: top !important;
    overflow-wrap: anywhere;
}

/* Discount / savings rows: label wraps, amount gets its own right-aligned line */
.pn-cr-app .woocommerce-checkout-review-order-table tr.cart-discount th,
.pn-cr-app .woocommerce-checkout-review-order-table tr.order-savings th,
.pn-cr-app .woocommerce-checkout-review-order-table tr.cart-discount td,
.pn-cr-app .woocommerce-checkout-review-order-table tr.order-savings td {
    white-space: normal !important;
    line-height: 1.35 !important;
}

.pn-cr-app .woocommerce-checkout-review-order-table tr.cart-discount td,
.pn-cr-app .woocommerce-checkout-review-order-table tr.order-savings td {
    display: table-cell !important;
    font-size: 9px !important;
}

/* The coupon label sits above its amount rather than fighting it for one line */
.pn-cr-app .woocommerce-checkout-review-order-table tr.cart-discount td .woocommerce-Price-amount,
.pn-cr-app .woocommerce-checkout-review-order-table tr.cart-discount td bdi,
.pn-cr-app .woocommerce-checkout-review-order-table tr.order-savings td .woocommerce-Price-amount,
.pn-cr-app .woocommerce-checkout-review-order-table tr.order-savings td bdi {
    display: block !important;
    margin-top: 2px;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* Woo's "[Remove]" coupon link */
.pn-cr-app .woocommerce-checkout-review-order-table .woocommerce-remove-coupon {
    display: inline-block;
    margin-top: 2px;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    text-decoration: underline;
    color: rgba(255, 255, 255, .6) !important;
    white-space: nowrap;
}

.pn-cr-app .woocommerce-checkout-review-order-table .woocommerce-remove-coupon:hover {
    color: #fff !important;
}

/* Plain money rows stay on one line */
.pn-cr-app .woocommerce-checkout-review-order-table tr.cart-subtotal td,
.pn-cr-app .woocommerce-checkout-review-order-table tr.tax-total td,
.pn-cr-app .woocommerce-checkout-review-order-table tr.tax-rate td,
.pn-cr-app .woocommerce-checkout-review-order-table tr.fee td,
.pn-cr-app .woocommerce-checkout-review-order-table tr.order-total td {
    white-space: nowrap !important;
}

.pn-cr-app .woocommerce-checkout-review-order-table tr.order-total th {
    white-space: normal !important;
    vertical-align: bottom !important;
}

.pn-cr-app .woocommerce-checkout-review-order-table tr.order-total td {
    vertical-align: bottom !important;
}

/* --------------------------------------------------------------------------
   15b. Remove control — now present on every addon row
   pn_cr_normalize_order_rows() injects .remove-carbon-item into rows the
   external renderer left without one, so this styling now applies to all
   removable lines rather than just the one or two that shipped with it.
   -------------------------------------------------------------------------- */
.pn-cr-app .pn-card--camp-pricing-table[data-pn-removable] .pn-card--product-title {
    padding-right: 26px !important;
}

.pn-cr-app .remove-carbon-item,
.pn-cr-app .remove-qr-item {
    opacity: .55 !important;
}

.pn-cr-app .pn-card--camp-pricing-table:hover .remove-carbon-item,
.pn-cr-app .pn-card--camp-pricing-table:hover .remove-qr-item,
.pn-cr-app .remove-carbon-item:focus-visible,
.pn-cr-app .remove-qr-item:focus-visible {
    opacity: 1 !important;
}


/* ==========================================================================
   16. Remove control — guaranteed visible
   ========================================================================== */

/* If the server-side unwrap ever does not run, the wrapper must not affect
   layout. display:contents makes it invisible to the grid entirely. */
.pn-cr-app .pn-cr-rowmeta {
    display: contents !important;
}

/* Reserve space at the row's top-right and keep the control above everything */
.pn-cr-app .pn-card--camp-pricing-table[data-pn-removable] {
    padding-right: 24px !important;
}

.pn-cr-app .pn-card--camp-pricing-table[data-pn-removable] .pn-card--product-title {
    padding-right: 4px !important;
}

.pn-cr-app .pn-card--camp-pricing-table .remove-carbon-item,
.pn-cr-app .pn-card--camp-pricing-table .remove-qr-item {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: var(--shade-medium) !important;
    background: #fff !important;
    border: 1px solid var(--pn-line-2) !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    opacity: 1 !important;               /* always visible, not hover-only */
    visibility: visible !important;
    pointer-events: auto !important;
}

.pn-cr-app .pn-card--camp-pricing-table .remove-carbon-item:hover,
.pn-cr-app .pn-card--camp-pricing-table .remove-qr-item:hover {
    color: #fff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

/* Touch targets need to be bigger than 20px */
@media (hover: none) {
    .pn-cr-app .pn-card--camp-pricing-table .remove-carbon-item,
    .pn-cr-app .pn-card--camp-pricing-table .remove-qr-item {
        width: 26px !important;
        height: 26px !important;
        font-size: 15px !important;
    }

    .pn-cr-app .pn-card--camp-pricing-table[data-pn-removable] {
        padding-right: 30px !important;
    }
}


/* ==========================================================================
   17. Remove control — the renderer's own .remove-addon-item
   pn_cr_normalize_order_rows() lifts this button out of the hidden leftovers
   wrapper and strips its inline styles so these rules apply. It is the button
   wired to pn_remove_addon_from_order, which is the only remove path that also
   updates the parent's other_ids meta.
   ========================================================================== */

.pn-cr-app .pn-card--camp-pricing-table .remove-addon-item,
.pn-cr-app .pn-card--camp-pricing-table .remove-carbon-item,
.pn-cr-app .pn-card--camp-pricing-table .remove-qr-item {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    color: var(--shade-medium) !important;
    background: #fff !important;
    border: 1px solid var(--pn-line-2) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    outline: none;
    transition: color .16s, background-color .16s, border-color .16s, transform .16s;
}

.pn-cr-app .pn-card--camp-pricing-table .remove-addon-item svg {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
    stroke: currentColor !important;
}

.pn-cr-app .pn-card--camp-pricing-table .remove-addon-item:hover,
.pn-cr-app .pn-card--camp-pricing-table .remove-carbon-item:hover,
.pn-cr-app .pn-card--camp-pricing-table .remove-qr-item:hover {
    color: #fff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

.pn-cr-app .pn-card--camp-pricing-table .remove-addon-item:disabled {
    opacity: .45 !important;
    cursor: wait !important;
}

/* Reserve the gutter so nothing sits under the control */
.pn-cr-app .pn-card--camp-pricing-table:has(.remove-addon-item),
.pn-cr-app .pn-card--camp-pricing-table:has(.remove-carbon-item),
.pn-cr-app .pn-card--camp-pricing-table:has(.remove-qr-item),
.pn-cr-app .pn-card--camp-pricing-table[data-pn-removable] {
    padding-right: 28px !important;
}

@media (hover: none) {
    .pn-cr-app .pn-card--camp-pricing-table .remove-addon-item,
    .pn-cr-app .pn-card--camp-pricing-table .remove-carbon-item,
    .pn-cr-app .pn-card--camp-pricing-table .remove-qr-item {
        width: 28px !important;
        height: 28px !important;
    }

    .pn-cr-app .pn-card--camp-pricing-table[data-pn-removable] {
        padding-right: 34px !important;
    }
}

/* The fragment refresh swaps this wrapper's innerHTML — it must not add a box */
.pn-cr-app #pn-cr-totals-wrapper,
.pn-cr-app #pn-cr-details-wrapper {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.pn-cr-app #pn-cr-details-wrapper:empty {
    display: none;
}

.pn-cr-totals .woocommerce-checkout-review-order-table .order-total th{
    font-size: 12px !important;
}

.woocommerce-checkout-review-order-table .srp-points-caption-checkout{
    font-size: 10px !important;
}

.pn-addons {
    width: 100% !important;
}

.pn-cr-appbar__actions .pn-button--campaign-review, .pn-button--grad-title-bar {
    color: #fff !important;
    padding: 10px 5px !important;
}

.pn-card--my-order-review:has(.campaign_cost_wrapper) .pn-card-text--camp-detail {
    color: var(--primary) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
	
}

.pn-card--my-order-review .ct-fancy-icon {
	bottom: 0% !important;
	align-items: flex-end !important;
}

div:has(> .pn-gallery__main-wrap){
	width: 100% !important;
}