/* =============================================================
   WPC plan rows — offer list UI (overrides Rehub parent theme)
   Coupon code typography uses a system monospace stack instead of a
   webfont — saves a network request and avoids FOIT/FOUT on slow links.
   ============================================================= */

/* ============================================================
   OFFERLIST WRAPPER
   ============================================================ */
body .wpc-offerlist {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 24px;
    box-shadow: none;
}

body .wpc-offerlist-head {
    padding: 14px 22px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
    border-bottom: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

body .wpc-offerlist-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
    padding: 0;
    border: none;
    background: transparent;
}

body .wpc-offerlist-platform {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 7px;
    color: #475569;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

body .wpc-offerlist-platform svg {
    width: 16px;
    height: 16px;
    display: block;
}

body .wpc-offerlist-count {
    font-size: 12px;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   OFFERBOX ROW
   ============================================================ */
body .wpc-plan-row {
    /* Track contract. plans.css owns the row's shape; a page skin may retune
       these four widths for its own context, but must not declare
       grid-template-columns, child placement or any variant rule itself.
       The track lists live in the >= 721px block below, so the mobile stack
       has nothing more specific to fight. */
    --wpc-plan-thumb: 40px;
    --wpc-plan-discount: 64px;
    --wpc-plan-price: 96px;
    --wpc-plan-cta: 172px;
    --wpc-plan-gap: 14px;
    --wpc-plan-pad: 16px 22px;
    display: grid;
    align-items: center;
    gap: var(--wpc-plan-gap);
    padding: var(--wpc-plan-pad);
    background: #fff;
    font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    transition: background 0.15s;
    box-shadow: none;
    box-sizing: border-box;
}

body .wpc-plan-row:hover { background: #fafbfc; }

/* Reset all <p> inside offerbox/offerlist to kill article p { margin } */
body .wpc-plan-row p,
body .wpc-offerlist p,
body article .wpc-plan-row p,
body .post .wpc-plan-row p,
body article .wpc-offerlist p,
body .post .wpc-offerlist p {
    margin: 0;
    padding: 0;
}

/* Kill any stray <br> wpautop leaves around shortcodes */
body .wpc-offerlist > br,
body .wpc-offerlist + br {
    display: none;
}

/* Featured (Best Deal) — amber tint. Gradient terminates on #fafbfc (not #fff)
   so it stays visible on white site backgrounds */
body .wpc-plan-row.is-featured {
    background: linear-gradient(90deg, #fef3c7 0%, #fef9e7 50%, #fafbfc 100%);
}
body .wpc-plan-row.is-featured:hover {
    background: linear-gradient(90deg, #fde68a 0%, #fef3c7 50%, #f1f5f9 100%);
}

/* ============================================================
   EDITOR'S PICK — manual hand-pick highlight (wpc_pick="yes")
   Lavender/indigo theme, distinct from Best Deal's amber
   ============================================================ */
body .wpc-plan-row.is-editor-pick {
    background: linear-gradient(90deg, #e0e7ff 0%, #ede9fe 50%, #fafbfc 100%);
}
body .wpc-plan-row.is-editor-pick:hover {
    background: linear-gradient(90deg, #c7d2fe 0%, #ddd6fe 50%, #f1f5f9 100%);
}

/* Standalone editor-pick: slight indigo border + inset glow */
body .wpc-plan-row.is-standalone.is-editor-pick {
    border-color: #c7d2fe;
    box-shadow: 0 1px 0 #e0e7ff inset, 0 1px 3px rgba(99, 102, 241, 0.06);
}

/* Combined: row is BOTH Editor's Pick AND Best Deal — blend lavender into amber */
body .wpc-plan-row.is-featured.is-editor-pick {
    background: linear-gradient(90deg, #e0e7ff 0%, #fef3c7 55%, #fafbfc 100%);
}
body .wpc-plan-row.is-featured.is-editor-pick:hover {
    background: linear-gradient(90deg, #c7d2fe 0%, #fde68a 55%, #f1f5f9 100%);
}

/* Standalone */
body .wpc-plan-row.is-standalone {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin-bottom: 12px;
}
body .wpc-plan-row.is-standalone:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.06);
}

/* Grouped inside offerlist */
body .wpc-offerlist .wpc-plan-row {
    border: none;
    border-bottom: 1px solid #f1f5f9;
    border-radius: 0;
    margin-bottom: 0;
}
body .wpc-offerlist .wpc-plan-row:last-child { border-bottom: none; }

/* Track lists ---------------------------------------------------
   Everything below is scoped to >= 721px. Under that width the row stacks
   (see the mobile block at the end of this file) and no track list applies,
   so the two layouts can never shadow each other.

   The decision is per row, not per group. A row that draws no price has no
   price track: the discount sits directly beside the CTA and the title takes
   the width back. Reserving the track so rows line up across a list was tried
   and rejected — it leaves a visible gap on every row that has no price, and
   the reader reads a row, not a column. */
@media (min-width: 721px) {
    body .wpc-plan-row {
        grid-template-columns:
            var(--wpc-plan-thumb) minmax(0, 1fr)
            var(--wpc-plan-discount) var(--wpc-plan-price) var(--wpc-plan-cta);
    }

    /* No price — the discount badge still shows, next to the CTA. */
    body .wpc-plan-row.is-no-price {
        grid-template-columns:
            var(--wpc-plan-thumb) minmax(0, 1fr)
            var(--wpc-plan-discount) var(--wpc-plan-cta);
    }

    /* No discount — happens with non-numeric prices like "Best Price!" or when
       the discount cannot be computed (price="$10" with no price_old). */
    body .wpc-plan-row.is-no-discount {
        grid-template-columns:
            var(--wpc-plan-thumb) minmax(0, 1fr)
            var(--wpc-plan-price) var(--wpc-plan-cta);
    }

    /* Neither — rare but possible. */
    body .wpc-plan-row.is-no-price.is-no-discount {
        grid-template-columns: var(--wpc-plan-thumb) minmax(0, 1fr) var(--wpc-plan-cta);
    }
}

/* Expired */
body .wpc-plan-row.is-expired { opacity: 0.6; }

/* ============================================================
   THUMB
   ============================================================ */
body .wpc-ob-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid #f1f5f9;
    overflow: hidden;
    padding: 4px;
    box-sizing: border-box;
    margin: 0;
}

body .wpc-ob-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: block;
}

body .wpc-ob-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #cbd5e1;
}
body .wpc-ob-thumb-placeholder svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* ============================================================
   INFO COLUMN
   ============================================================ */
body .wpc-ob-info {
    min-width: 0;
    padding: 0;
    margin: 0;
}

body .wpc-ob-title {
    font-size: 15px;
    font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 700;
    margin: 0 0 3px;
    padding: 0;
    color: #1a1d24;
    line-height: 1.35;
    border: none;
    background: transparent;
    /* Slightly extra space between title text and the trailing badge cluster.
       This widens the natural " " separator we render in PHP, so when the
       badges wrap to a new line the gap disappears with it — no orphan indent. */
    word-spacing: 4px;
}

/* Title text — inline so badges sit alongside it on the same line.
   When title wraps, badges flow naturally to the end of the last line.
   word-spacing on the parent is neutralized here so the title's own words
   keep their normal spacing. */
body .wpc-ob-title-text {
    display: inline;
    word-spacing: normal;
}

/* Badges container — inline-flex so the whole cluster stays together,
   nowrap so the cluster never internally breaks (max 2 badges per spec). */
body .wpc-ob-badges {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
    flex-wrap: nowrap;
    word-spacing: normal;
    /* Nudge up slightly so small caps badges align with title's optical center */
    position: relative;
    top: -1px;
}

body .wpc-ob-best-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fbbf24;
    color: #78350f;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-block;
}

/* Editor's Pick badge — indigo→violet gradient to differentiate from Best Deal */
body .wpc-ob-editor-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 4px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.25);
}

body .wpc-ob-editor-badge .icon {
    font-size: 10px;
    line-height: 1;
    font-weight: 400;
}

/* Description with show-more toggle */
body .wpc-ob-desc-wrap {
    margin: 0;
    padding: 0;
}

body .wpc-ob-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    padding: 0;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: max-height 0.2s ease;
}

body .wpc-ob-desc.is-expanded {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}

/* Font-size override that beats the post prose rule
   `.wpc-post .post-inner p{font-size:16px}` (0,2,1) when the offerbox is
   embedded in article content. Specificity here = 0,2,2. Only size +
   line-height, so the line-clamp/toggle on the base rule stay intact. */
body .wpc-plan-row p.wpc-ob-desc,
body .wpc-offerlist p.wpc-ob-desc {
    font-size: 14px;
    line-height: 1.55;
}

body .wpc-ob-desc-toggle {
    /* A <button> does not inherit the font family; without this the toggle
       renders in the UA default while the row around it is Inter. */
    font-family: inherit;
    background: none;
    border: none;
    padding: 0;
    margin-top: 2px;
    color: #2563eb;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
    display: none; /* shown via JS if text overflows */
}

body .wpc-ob-desc-toggle:hover { color: #1d4ed8; text-decoration: underline; }

body .wpc-ob-desc-wrap.has-overflow .wpc-ob-desc-toggle { display: inline-block; }

body .wpc-ob-meta {
    font-size: 12.5px;
    color: #6b7280;
    margin: 4px 0 0;
    padding: 0;
    line-height: 1.55;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

body .wpc-ob-expiry {
    color: #dc2626;
    font-weight: 600;
    white-space: nowrap;
}

body .wpc-ob-expiry--expired {
    color: #9ca3af;
    font-weight: 500;
}

/* ============================================================
   DISCOUNT BADGE
   ============================================================ */
body .wpc-ob-discount {
    background: #fef2f2;
    color: #dc2626;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 8px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    line-height: 1;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
    border: none;
    display: block;
}

body .wpc-ob-discount.is-top {
    background: #dc2626;
    color: #fff;
}

/* ============================================================
   PRICE COLUMN
   ============================================================ */
body .wpc-ob-price {
    text-align: right;
    white-space: nowrap;
    line-height: 1.2;
    width: 100%;
    margin: 0;
    padding: 0;
}

body .wpc-ob-price-now {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #1a1d24;
    letter-spacing: -0.01em;
    background: transparent;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

body .wpc-plan-row.is-text-price .wpc-ob-price-now {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: normal;
}

body .wpc-ob-price-old {
    display: block;
    font-size: 12px;
    color: #666d7b;
    text-decoration: line-through;
    font-weight: 500;
    margin-top: 1px;
    padding: 0;
    background: transparent;
}

/* ============================================================
   CTA BUTTON
   ============================================================ */
body .wpc-ob-cta,
body a.wpc-ob-cta {
    /* Form controls do not inherit the font family, so without this the CTA
       label renders in the UA default (Arial) inside an Inter row. */
    font-family: inherit;
    background: linear-gradient(135deg, #e85a28, #b23408);
    color: #fff;
    padding: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: none;
    transition: background 0.15s, transform 0.1s;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    width: 100%;
    text-decoration: none;
    position: relative;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    line-height: 1;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    min-height: auto;
    height: auto;
    box-sizing: border-box;
}

body .wpc-ob-cta:hover,
body a.wpc-ob-cta:hover {
    background: linear-gradient(135deg, #e85a25, #b53502);
    color: #fff;
    text-decoration: none;
}

body .wpc-ob-cta:active,
body a.wpc-ob-cta:active { transform: scale(0.98); }

body .wpc-ob-cta:focus,
body a.wpc-ob-cta:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 106, 48, 0.25);
}

/* Coupon mode */
/* Coupon mode — ticket look, matches the store page .getbtn:
   striped white code face + dashed perforation + solid accent Copy. */
body .wpc-ob-cta.is-coupon,
body a.wpc-ob-cta.is-coupon {
    background: #fff;
    border: 1.5px solid #d64113;
    border-radius: 9px;
    box-shadow: none;
    color: #b23408;
}

body .wpc-ob-cta.is-coupon:hover,
body a.wpc-ob-cta.is-coupon:hover {
    background: #fff;
    color: #b23408;
}

body .wpc-ob-cta.is-coupon .wpc-ob-cta-code {
    padding: 8px 10px;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: repeating-linear-gradient(90deg, #fff, #fff 6px, #fff7f3 6px, #fff7f3 12px);
    border-right: 1.5px dashed #d64113;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 13px;
    color: #b23408;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
}

body .wpc-ob-cta.is-coupon .reveal-mask {
    display: inline-block;
    color: rgba(197, 54, 11, 0.55);
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-left: 1px;
    letter-spacing: 0.08em;
    font-size: 13px;
    line-height: 1;
}

body .wpc-ob-cta.is-coupon .wpc-ob-cta-action {
    padding: 8px 12px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #d64113;
    white-space: nowrap;
    color: #fff;
    transition: background 0.15s;
}

body .wpc-ob-cta.is-coupon:hover .wpc-ob-cta-action {
    background: #b23408;
}

/* Deal mode */
body .wpc-ob-cta.is-deal .wpc-ob-cta-action {
    padding: 10px 18px;
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
}

body .wpc-ob-cta .arrow {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.15s;
}

body .wpc-ob-cta:hover .arrow { transform: translateX(2px); }

/* ============================================================
   DEAL MODE — blue gradient to contrast with coupon (orange)
   ============================================================ */
body .wpc-ob-cta.is-deal,
body a.wpc-ob-cta.is-deal {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

body .wpc-ob-cta.is-deal:hover,
body a.wpc-ob-cta.is-deal:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af);
}

body .wpc-ob-cta.is-deal:focus,
body a.wpc-ob-cta.is-deal:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

body .wpc-ob-hover-tooltip {
    --wpc-tooltip-arrow-left: 50%;
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    max-width: min(240px, calc(100vw - 16px));
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: #202632;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.18);
    color: #fff;
    font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 80ms ease, transform 80ms ease, visibility 0s linear 80ms;
}

body .wpc-ob-hover-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

body .wpc-ob-hover-tooltip::after {
    position: absolute;
    top: 100%;
    left: var(--wpc-tooltip-arrow-left);
    width: 8px;
    height: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #202632;
    content: "";
    transform: translate(-50%, -4px) rotate(45deg);
}

body .wpc-ob-hover-tooltip.is-below::after {
    top: auto;
    bottom: 100%;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    transform: translate(-50%, 4px) rotate(45deg);
}

/* ============================================================
   REVEALED STATE — after first click
   Visual: green gradient + inline checkmark.
   Action shrinks to an icon-only arrow so the full code stays visible.
   ============================================================ */
/* Revealed keeps the white ticket look (matches the masked state); the
   only green is the small success check in the code area. The old solid
   emerald button + dark code overlay read as murky, so it's gone. */
body .wpc-ob-cta.is-coupon.is-revealed {
    background: #fff;
}

body .wpc-ob-cta.is-coupon.is-revealed:hover {
    background: #fff;
}

/* Screen-reader-only helper (keeps "Visit store" accessible while hidden visually) */
body .wpc-ob-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Inline success check inside the code area (green dot, white tick) */
body .wpc-ob-cta.is-coupon.is-revealed .wpc-ob-cta-code::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background: #16a34a;
    color: #fff;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
    margin-right: 7px;
    flex-shrink: 0;
    line-height: 1;
}

/* Code area keeps the striped ticket face; text stays dark-orange */
body .wpc-ob-cta.is-coupon.is-revealed .wpc-ob-cta-code {
    background: repeating-linear-gradient(90deg, #fff, #fff 6px, #fff7f3 6px, #fff7f3 12px);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border-right: 1.5px dashed #d64113;
    color: #b23408;
    align-items: center;
    padding: 9px 12px;
}

body .wpc-ob-cta.is-coupon.is-revealed .wpc-ob-cta-code-visible {
    font-size: 13px;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    min-width: 0;
    max-width: 100%;
}

/* Action shrinks to an icon-only orange arrow chip (matches Copy) */
body .wpc-ob-cta.is-coupon.is-revealed .wpc-ob-cta-action {
    flex: 0 0 auto;
    min-width: 0;
    width: 42px;
    padding: 9px 0;
    justify-content: center;
    gap: 0;
    background: #d64113;
    color: #fff;
}

body .wpc-ob-cta.is-coupon.is-revealed:hover .wpc-ob-cta-action {
    background: #b23408;
}

body .wpc-ob-cta.is-coupon.is-revealed .wpc-ob-cta-action .arrow {
    font-size: 16px;
    font-weight: 700;
    transition: transform 0.2s ease;
}

body .wpc-ob-cta.is-coupon.is-revealed:hover .wpc-ob-cta-action .arrow {
    transform: translateX(3px);
}

/* Adjust font/letter-spacing based on coupon length so we avoid ellipsis when possible */
body .wpc-ob-cta.is-coupon.is-revealed.code-len-short .wpc-ob-cta-code-visible { font-size: 14px; }
body .wpc-ob-cta.is-coupon.is-revealed.code-len-mid   .wpc-ob-cta-code-visible { font-size: 13px; }
body .wpc-ob-cta.is-coupon.is-revealed.code-len-long  .wpc-ob-cta-code-visible { font-size: 12px; letter-spacing: 0.01em; }
body .wpc-ob-cta.is-coupon.is-revealed.code-len-xlong .wpc-ob-cta-code-visible { font-size: 11px; letter-spacing: 0; }
body .wpc-ob-cta.is-coupon.is-revealed.code-len-xlong .wpc-ob-cta-code { padding: 9px 8px; }

/* ---- xxlong: code is too long for single line, stack vertically ---- */
/* Layout becomes: [✓ FULL_CODE_HERE_FULL_WIDTH] (top)
                   [        Visit store →      ] (bottom) */
body .wpc-ob-cta.is-coupon.is-revealed.code-len-xxlong {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}

body .wpc-ob-cta.is-coupon.is-revealed.code-len-xxlong .wpc-ob-cta-code {
    flex: 1 1 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1.5px dashed #d64113;
    justify-content: center;
    padding: 7px 10px;
    background: repeating-linear-gradient(90deg, #fff, #fff 6px, #fff7f3 6px, #fff7f3 12px);
}

body .wpc-ob-cta.is-coupon.is-revealed.code-len-xxlong .wpc-ob-cta-code-visible {
    font-size: 11.5px;
    letter-spacing: 0;
    text-align: center;
}

/* In stack mode, bring back the "Visit store" label as a small bottom strip */
body .wpc-ob-cta.is-coupon.is-revealed.code-len-xxlong .wpc-ob-cta-action {
    width: 100%;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    gap: 4px;
}

/* In stack mode the SR-only label becomes visible (we want users to see it) */
body .wpc-ob-cta.is-coupon.is-revealed.code-len-xxlong .wpc-ob-sr-only {
    position: static !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
}

body .wpc-ob-cta.is-coupon.is-revealed.code-len-xxlong .wpc-ob-cta-action .arrow {
    font-size: 13px;
}

/* Subsequent copy click flash: tint only the action chip green with the
   "✓ Copied!" label — the code face keeps its striped ticket look. */
body .wpc-ob-cta.is-just-copied .wpc-ob-cta-action {
    background: #16a34a !important;
    color: #fff !important;
}

/* When the icon-only action shows "✓ Copied!" we need it to fit */
body .wpc-ob-cta.is-coupon.is-revealed.is-just-copied .wpc-ob-cta-action {
    width: auto;
    min-width: 80px;
    padding: 9px 10px;
    font-size: 11.5px;
    font-weight: 700;
}

body .wpc-ob-cta.is-coupon.is-revealed.is-copy-failed .wpc-ob-cta-action {
    width: auto;
    min-width: 96px;
    padding: 9px 10px;
    background: #b42318 !important;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================
   INLINE NOTICE (Deal mode confirmation)
   Sits at the bottom of the offerbox row, slides in from above
   ============================================================ */
body .wpc-plan-row {
    position: relative;
}

body .wpc-ob-notice {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 -4px;
    padding: 10px 14px;
    background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    color: #166534;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

body .wpc-ob-notice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body .wpc-ob-notice-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: #16a34a;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

body .wpc-ob-notice-text {
    flex: 1 1 auto;
}

body .wpc-ob-notice-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #16a34a;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    font-weight: 400;
    opacity: 0.6;
    transition: opacity 0.15s;
}

body .wpc-ob-notice-close:hover { opacity: 1; }

/* ============================================================
   COUPON POPUP
   ============================================================ */
body .wpc-coupon-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body .wpc-coupon-modal.is-open { display: flex; }

body .wpc-coupon-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}

body .wpc-coupon-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
    text-align: center;
    box-sizing: border-box;
}

body .wpc-coupon-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
}

body .wpc-coupon-modal-close:hover { color: #1f2937; }

body .wpc-coupon-modal-title {
    font-size: 15px;
    color: #475569;
    margin: 0 0 18px;
    font-weight: 600;
    line-height: 1.4;
}

body .wpc-coupon-modal-code-wrap {
    display: flex;
    align-items: stretch;
    border: 2px dashed #fb923c;
    border-radius: 10px;
    overflow: hidden;
    /* Cream fill lives on the code cell, not the wrap, so the rounded
       overflow-clip never reveals a stray strip around the Copy button. */
    background: transparent;
    margin: 0 0 16px;
}

body .wpc-coupon-modal-code {
    flex: 1 1 auto;
    padding: 14px 16px;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    color: #7c2d12;
    letter-spacing: 0.05em;
    text-align: center;
    user-select: all;
    background: #fff7ed;
    line-height: 1.2;
    word-break: break-all;
    display: flex;
    align-items: center;
    justify-content: center;
}

body .wpc-coupon-modal-copy {
    flex: 0 0 auto;
    padding: 0 22px;
    background: linear-gradient(135deg, #e85a28, #b23408);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s;
}

body .wpc-coupon-modal-copy:hover {
    background: linear-gradient(135deg, #e85a25, #b53502);
}

body .wpc-coupon-modal-copy.is-copied {
    background: #16a34a;
}

body .wpc-coupon-modal-copy.is-copying {
    cursor: wait;
    opacity: .78;
}

body .wpc-coupon-modal-copy.is-copy-failed {
    max-width: 180px;
    padding: 0 14px;
    background: #b42318;
    font-size: 11px;
    line-height: 1.25;
}

/* Second chance at the store, between the code and the note — the position
   Rehub's own popup uses. It carries the row CTA's gradient because it is the
   same action, reached a second time. */
body .wpc-coupon-modal-go {
    display: block;
    margin: 16px 0 14px;
    padding: 13px 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e85a28, #b23408);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    transition: background 0.15s;
}
/* The `display` above outranks the UA sheet's `[hidden] { display: none }`,
   so the hidden state has to be restated at author level or the link shows
   itself whenever it has no destination. */
body .wpc-coupon-modal-go[hidden] { display: none; }
body .wpc-coupon-modal-go:hover,
body .wpc-coupon-modal-go:focus {
    background: linear-gradient(135deg, #e85a25, #b53502);
    color: #fff;
    text-decoration: none;
}
body .wpc-coupon-modal-go:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 106, 48, 0.35);
}

body .wpc-coupon-modal-note {
    font-size: 12.5px;
    color: #6b7280;
    margin: 0;
    line-height: 1.55;
}

/* ============================================================
   RESPONSIVE — Mobile ≤ 720px
   ============================================================ */
@media (max-width: 720px) {
    body .wpc-plan-row {
        grid-template-columns: 40px 1fr auto;
        gap: 10px 12px;
        padding: 14px 16px;
    }

    body .wpc-ob-thumb        { grid-column: 1; grid-row: 1; }
    body .wpc-ob-info         { grid-column: 2 / 4; grid-row: 1; }
    body .wpc-ob-discount     { grid-column: 1 / 2; grid-row: 2; width: auto; justify-self: start; }
    body .wpc-ob-price        { grid-column: 2 / 4; grid-row: 2; text-align: right; }
    body .wpc-ob-cta          { grid-column: 1 / 4; grid-row: 3; width: 100%; }

    /* No variant re-templating is needed here any more: every desktop track
       list now sits behind (min-width: 721px), so nothing more specific than
       the stack above can reach this width. */

    /* Full-width ticket: the striped code face grows and COPY hugs content
       (a fixed 110px code face left a blank strip after the COPY segment). */
    body .wpc-ob-cta.is-coupon .wpc-ob-cta-code {
        flex: 1 1 auto;
        min-width: 110px;
    }

    body .wpc-offerlist-head {
        padding: 12px 16px;
        flex-wrap: wrap;
    }

    body .wpc-coupon-modal-dialog {
        padding: 28px 20px 20px;
    }

    body .wpc-coupon-modal-code {
        font-size: 16px;
        padding: 12px 10px;
    }

    body .wpc-coupon-modal-copy {
        padding: 0 16px;
        font-size: 12px;
    }
}

/* Small phones: tighten the row — description drops to one clamped line
   (still expandable via "Show more"). */
@media (max-width: 480px) {
    body .wpc-ob-desc {
        -webkit-line-clamp: 1;
    }
}