/* Post-Purchase Upsell — order-received page (Tom's boards E1 + E2) and the checkout disclosure.
   Tokens from the spec; fonts come from the theme (Rift = headline preset, Apercu = primary preset). */

.nox-ppu {
	--ppu-ink: #0c0d0d;
	--ppu-page: #F8F8F8;
	--ppu-border: #e0e0e0;
	--ppu-gray: #5C5C5C;
	--ppu-struck: #8B8B8B;
	--ppu-text: #1c1c1c;
	--ppu-primary: #2b97f3;
	--ppu-primary-dark: #0C71C7;
	--ppu-deal-bg: #e4f2fe;
	--ppu-deal-border: #b8dcfb;
	--ppu-neon: #ccff00;
	--ppu-alert-bg: #fdecec;
	--ppu-alert-border: #f0b4b4;
	--ppu-alert: #d93025;
	--ppu-rift: var(--wp--preset--font-family--headline, "Rift", sans-serif);
	--ppu-apercu: var(--wp--preset--font-family--primary, "Apercu Regular", sans-serif);
	font-family: var(--ppu-apercu);
	color: var(--ppu-ink);
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1040px;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.45;
}
.nox-ppu * { box-sizing: border-box; }
.nox-ppu p { margin: 0; }
.nox-ppu button { font: inherit; }
.nox-ppu .nox-ppu-rift,
.nox-ppu-card__name, .nox-ppu-thanks__title, .nox-ppu-panel__title, .nox-ppu-cta, .nox-ppu-badge, .nox-ppu-tag, .nox-ppu-addedtag, .nox-ppu-continue {
	font-family: var(--ppu-rift);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1;
}

/* The theme prints the page title ("Thank you!") above the WooCommerce content; E2 has its own heading. */
body.woocommerce-order-received .o-section > .container > h1.c-h--full { display: none; }

/* ---------- shared bits ---------- */
.nox-ppu-check { display: inline-grid; place-items: center; border-radius: 50%; background: var(--ppu-neon); color: var(--ppu-ink); flex: none; }
.nox-ppu-check--sm { width: 28px; height: 28px; }
.nox-ppu-check--sm svg { width: 16px; height: 16px; }
.nox-ppu-check--lg { width: 36px; height: 36px; }
.nox-ppu-check--lg svg { width: 20px; height: 20px; }
@media (min-width: 768px) { .nox-ppu-check--lg { width: 44px; height: 44px; } .nox-ppu-check--lg svg { width: 24px; height: 24px; } }

/* ---------- E1: offer page ---------- */
.nox-ppu-offer { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.nox-ppu-offer.is-collapsing { transition: height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease; opacity: 0; }

.nox-ppu-strip { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ppu-border); background: #fff; }
.nox-ppu-strip__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nox-ppu-strip__text strong { font-size: 15px; }
.nox-ppu-strip__meta { font-size: 13px; color: var(--ppu-gray); }
.nox-ppu-strip__details { margin-left: auto; background: none; border: 0; padding: 10px 0 10px 10px; font-size: 14px; font-weight: 700; color: var(--ppu-ink); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.nox-ppu-strip__caret { display: inline-block; transition: transform .2s; }
.nox-ppu-strip__details[aria-expanded="true"] .nox-ppu-strip__caret { transform: rotate(180deg); }

/* Details drawer: slides open directly under the confirmation row */
.nox-ppu-drawer { overflow: hidden; }
.nox-ppu-drawer[hidden] { display: none; }
.nox-ppu-drawer.is-animating { transition: height .35s cubic-bezier(.4,0,.2,1); }
.nox-ppu-drawer__inner { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 8px; }
.nox-ppu-drawer .nox-ppu-cols { gap: 16px; }
.nox-ppu-drawer .nox-ppu-panel { padding: 14px 16px; }
.nox-ppu-drawer .nox-ppu-panel__title { font-size: 16px; }
.nox-ppu-drawer .nox-ppu-row__thumb { width: 48px; height: 48px; }
.nox-ppu-drawer .nox-ppu-totals__grand { font-size: 16px !important; }

.nox-ppu-deal { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--ppu-deal-border); border-radius: 6px; background: var(--ppu-deal-bg); font-size: 14px; }
@media (min-width: 768px) { .nox-ppu-deal { font-size: 16px; padding: 14px 18px; } }
.nox-ppu-timer { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--ppu-primary-dark); border-radius: 4px; background: #fff; color: var(--ppu-primary-dark); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nox-ppu-timer.is-low { color: var(--ppu-alert); border-color: var(--ppu-alert); }

.nox-ppu-card { position: relative; display: grid; grid-template-columns: 1fr; gap: 20px; padding: 16px; border: 1px solid var(--ppu-border); border-radius: 8px; background: #fff; overflow: hidden; }
@media (min-width: 768px) { .nox-ppu-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 24px; } }
.nox-ppu-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--ppu-neon); transform: translateX(-100%); opacity: 0; }
.nox-ppu-card.is-busy::before { opacity: 1; animation: nox-ppu-sweep 1.4s cubic-bezier(.4,0,.2,1) infinite; }
.nox-ppu-card.is-busy .nox-ppu-card__body > :not(.nox-ppu-cta),
.nox-ppu-card.is-done .nox-ppu-card__body > * { opacity: .6; transition: opacity .2s; }
@keyframes nox-ppu-sweep { 0% { transform: translateX(-100%); } 60% { transform: translateX(0); } 100% { transform: translateX(100%); } }

.nox-ppu-card__media { display: flex; flex-direction: column; gap: 10px; }
.nox-ppu-card__image { position: relative; border: 1px solid var(--ppu-border); border-radius: 8px; overflow: hidden; background: #fff; }
.nox-ppu-card__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.nox-ppu-badge { position: absolute; top: 12px; right: 12px; z-index: 1; padding: 6px 9px; border-radius: 4px; background: var(--ppu-neon); color: var(--ppu-ink); font-size: 13px; letter-spacing: .08em; }
.nox-ppu-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nox-ppu-thumb { padding: 0; border: 1px solid var(--ppu-border); border-radius: 6px; background: #fff; overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; }
.nox-ppu-thumb.is-selected { border: 2px solid var(--ppu-ink); }
.nox-ppu-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nox-ppu-card__body { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 768px) { .nox-ppu-card__body { gap: 16px; padding-top: 8px; } }
.nox-ppu-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 4px; background: var(--ppu-ink); color: #fff; font-size: 12px; letter-spacing: .08em; }
.nox-ppu-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.nox-ppu-card__name { margin: 0; font-size: 32px; letter-spacing: .05em; }
@media (min-width: 768px) { .nox-ppu-card__name { font-size: 40px; } }
.nox-ppu-price { white-space: nowrap; font-size: 15px; }
.nox-ppu-price s { color: var(--ppu-struck); }
.nox-ppu-price strong { font-size: 26px; margin-left: 6px; }
@media (min-width: 768px) { .nox-ppu-price strong { font-size: 30px; } }
.nox-ppu-qty { font-size: 14px; color: var(--ppu-gray); margin-top: -6px; }
.nox-ppu-pitch { font-size: 15px; color: var(--ppu-text); line-height: 1.45; }
@media (min-width: 768px) { .nox-ppu-pitch { font-size: 17px; } }
.nox-ppu-checks { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ppu-text); }
@media (min-width: 768px) { .nox-ppu-checks { display: flex; } }
.nox-ppu-checks li { display: flex; align-items: center; gap: 10px; }
.nox-ppu-checks svg { color: var(--ppu-primary); flex: none; }

.nox-ppu-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 4px; padding: 20px 24px; border: 0; border-radius: 8px; background: var(--ppu-primary); color: #fff; font-size: 20px; cursor: pointer; transition: background .2s ease; }
.nox-ppu-cta:hover, .nox-ppu-cta:focus-visible { background: var(--ppu-primary-dark); }
.nox-ppu-cta:focus-visible, .nox-ppu-thumb:focus-visible, .nox-ppu-decline:focus-visible, .nox-ppu-strip__details:focus-visible { outline: 3px solid var(--ppu-ink); outline-offset: 3px; }
.nox-ppu-cta[aria-busy="true"] { background: var(--ppu-primary-dark); cursor: progress; }
.nox-ppu-cta:disabled:not([aria-busy="true"]) { opacity: .5; cursor: not-allowed; }
.nox-ppu-cta__spin { display: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: nox-ppu-spin .8s linear infinite; }
.nox-ppu-cta__busy { display: none; }
.nox-ppu-cta[aria-busy="true"] .nox-ppu-cta__spin, .nox-ppu-cta[aria-busy="true"] .nox-ppu-cta__busy { display: inline-block; }
.nox-ppu-cta[aria-busy="true"] .nox-ppu-cta__idle { display: none; }
.nox-ppu-cta.is-shake { animation: nox-ppu-shake .4s ease; }
@keyframes nox-ppu-spin { to { transform: rotate(360deg); } }
@keyframes nox-ppu-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.nox-ppu-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--ppu-alert-border); border-left: 5px solid var(--ppu-alert); border-radius: 8px; background: var(--ppu-alert-bg); color: var(--ppu-ink); font-size: 15px; line-height: 1.4; animation: nox-ppu-fadein .3s ease both; }
.nox-ppu-alert[hidden] { display: none; }
.nox-ppu-alert__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--ppu-alert); color: #fff; display: grid; place-items: center; font-weight: 700; }
.nox-ppu-alert__title { display: block; font-size: 16px; }

.nox-ppu-decline { align-self: center; min-height: 44px; padding: 10px 12px; border: 0; background: none; color: var(--ppu-gray); font-size: 14px; text-decoration: underline; cursor: pointer; }
.nox-ppu-decline:disabled { opacity: .5; cursor: not-allowed; }
.nox-ppu-fine { text-align: center; font-size: 12px; color: var(--ppu-gray); line-height: 1.45; }
@media (min-width: 768px) { .nox-ppu-fine { font-size: 13px; } }
.nox-ppu-fine b { color: var(--ppu-ink); }

/* ---------- E2: order summary ---------- */
.nox-ppu-summary { display: flex; flex-direction: column; gap: 20px; }
.nox-ppu-summary[hidden] { display: none; }
.nox-ppu-summary.is-revealed { animation: nox-ppu-fadein .45s ease both; }
.nox-ppu-added { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--ppu-deal-border); border-radius: 6px; background: var(--ppu-deal-bg); font-size: 14px; animation: nox-ppu-fadein .4s ease both; }
@media (min-width: 768px) { .nox-ppu-added { font-size: 16px; } }
.nox-ppu-thanks { display: flex; align-items: center; gap: 14px; }
.nox-ppu-thanks__meta { display: block; font-size: 13px; color: var(--ppu-gray); }
.nox-ppu-thanks__title { margin: 0; font-size: 30px; letter-spacing: .05em; }
@media (min-width: 768px) { .nox-ppu-thanks__title { font-size: 40px; } }

.nox-ppu-cols { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 768px) { .nox-ppu-cols { grid-template-columns: 3fr 2fr; } }
.nox-ppu-panel { padding: 16px; border: 1px solid var(--ppu-border); border-radius: 8px; background: #fff; }
@media (min-width: 768px) { .nox-ppu-panel { padding: 20px; } }
.nox-ppu-panel__title { margin: 0 0 12px; font-size: 18px; letter-spacing: .05em; }
@media (min-width: 768px) { .nox-ppu-panel__title { font-size: 22px; } }
.nox-ppu-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ppu-border); }
.nox-ppu-row__thumb { flex: none; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: #f0f0f0; }
.nox-ppu-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .nox-ppu-row__thumb { width: 80px; height: 80px; } }
.nox-ppu-row__text { min-width: 0; flex: 1 1 auto; }
.nox-ppu-row__name { font-weight: 700; font-size: 15px; }
@media (min-width: 768px) { .nox-ppu-row__name { font-size: 16px; } }
.nox-ppu-row__sub { font-size: 12px; color: var(--ppu-gray); margin-top: 2px; }
.nox-ppu-row__price { font-weight: 700; white-space: nowrap; }
.nox-ppu-addedtag { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 6px; border-radius: 4px; background: var(--ppu-neon); color: var(--ppu-ink); font-size: 11px; letter-spacing: .08em; }
.nox-ppu-totals { margin: 12px 0 0; }
.nox-ppu-totals div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 15px; }
.nox-ppu-totals dt, .nox-ppu-totals dd { margin: 0; }
.nox-ppu-totals__grand { margin-top: 6px; padding-top: 12px !important; border-top: 1px solid var(--ppu-border); font-weight: 700; font-size: 18px !important; }
@media (min-width: 768px) { .nox-ppu-totals__grand { font-size: 20px !important; } }
.nox-ppu-side { display: flex; flex-direction: column; gap: 20px; }
.nox-ppu-details { display: grid; gap: 12px; margin: 0; }
.nox-ppu-details dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ppu-gray); }
.nox-ppu-details dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.nox-ppu-continue { display: block; padding: 18px; border-radius: 8px; background: var(--ppu-ink); color: #fff !important; text-align: center; text-decoration: none !important; font-size: 17px; }
@media (min-width: 768px) { .nox-ppu-continue { font-size: 18px; } }
.nox-ppu-continue:hover { background: #2a2a2a; }

@keyframes nox-ppu-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.nox-ppu-cta__spin, .nox-ppu-card.is-busy::before, .nox-ppu-added, .nox-ppu-alert, .nox-ppu-summary.is-revealed, .nox-ppu-cta.is-shake { animation: none !important; }
	.nox-ppu-offer.is-collapsing { transition: none; }
}

/* ---------- checkout disclosure ---------- */
.nox-ppu-consent { margin: .75rem 0 0; font-size: 12px; line-height: 1.45; color: #5C5C5C; text-align: center; }
.nox-ppu-consent--express, .nox-ppu-consent--express-product, .nox-ppu-consent--express-cart { margin: .5rem 0 0; text-align: center; clear: both; }
.nox-ppu-consent[hidden] { display: none; }
/* WooCommerce's terms/privacy sentence above Place Order: same fine-print treatment as the line below it. */
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: .75rem 0; font-size: 12px; line-height: 1.45; color: #5C5C5C; text-align: center; }
.woocommerce-checkout .woocommerce-privacy-policy-text a { color: inherit; text-decoration: underline; }