/*
Theme Name: RCE Theme
Description: Mobile-first WooCommerce theme for the Reward Commerce Journey Engine. All business logic lives in the plugin; this theme only lays out markup and calls plugin slot functions. Fully functional (as plain WooCommerce) when the plugin is inactive.
Version: 0.2.0
Requires PHP: 8.1
Text Domain: rce-theme
*/

/* ==========================================================================
   Design tokens. Mobile-first: every rule is written for a phone, then
   widened at breakpoints. Nothing here encodes commerce logic.
   ========================================================================== */

:root {
	--rce-max-w:      480px;   /* narrow reading column: product + journey */
	--rce-wide-w:     1180px;  /* listing pages get room on larger screens */

	--rce-ink:        #14181f;
	--rce-ink-soft:   #5b6472;
	--rce-line:       #e4e8ee;
	--rce-bg:         #ffffff;
	--rce-bg-alt:     #f6f8fa;

	--rce-accent:     #1a7f5a;
	--rce-accent-ink: #ffffff;
	--rce-accent-dim: #e8f5ef;

	--rce-radius:     14px;
	--rce-radius-sm:  10px;
	--rce-shadow:     0 1px 2px rgba(20,24,31,.06), 0 8px 24px rgba(20,24,31,.06);
	--rce-space:      16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--rce-bg);
	color: var(--rce-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--rce-accent); }

.rce-wrap { max-width: var(--rce-max-w); margin: 0 auto; padding: 0 var(--rce-space); }

/* Listing pages breathe on desktop; the product page stays a narrow column so
   the journey panel keeps its focused, single-decision layout. */
.home .rce-wrap,
.archive .rce-wrap,
.post-type-archive-product .rce-wrap,
.tax-product_cat .rce-wrap { max-width: var(--rce-wide-w); }

.rce-slot:empty { display: none; }

/* ===== Site header: sticky, thumb-friendly ============================== */

.rce-header {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--rce-line);
}
.rce-header__inner {
	max-width: var(--rce-wide-w); margin: 0 auto;
	padding: 10px var(--rce-space);
	display: flex; align-items: center; gap: 12px;
}
.rce-header__brand {
	font-weight: 700; font-size: 17px; letter-spacing: -.01em;
	color: var(--rce-ink); text-decoration: none; margin-right: auto;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rce-header__nav { display: none; gap: 18px; }
.rce-header__nav a { color: var(--rce-ink-soft); text-decoration: none; font-size: 15px; }
.rce-header__nav a:hover { color: var(--rce-ink); }

.rce-cart {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 40px; padding: 0 14px; border-radius: 999px;
	background: var(--rce-accent-dim); color: var(--rce-accent);
	font-weight: 600; font-size: 14px; text-decoration: none;
}
.rce-cart__count {
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	background: var(--rce-accent); color: var(--rce-accent-ink);
	font-size: 12px; line-height: 20px; text-align: center;
}

/* ===== Hero ============================================================= */

.rce-hero {
	background: linear-gradient(180deg, var(--rce-accent-dim) 0%, var(--rce-bg) 100%);
	border-bottom: 1px solid var(--rce-line);
	padding: 36px 0 32px; margin-bottom: 28px;
}
.rce-hero__inner { max-width: var(--rce-wide-w); margin: 0 auto; padding: 0 var(--rce-space); text-align: center; }
.rce-hero__eyebrow {
	display: inline-block; padding: 5px 12px; border-radius: 999px;
	background: var(--rce-bg); border: 1px solid var(--rce-line);
	color: var(--rce-accent); font-size: 12px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px;
}
.rce-hero__title { margin: 0 0 10px; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; font-weight: 800; }
.rce-hero__sub { margin: 0 auto; max-width: 46ch; color: var(--rce-ink-soft); font-size: 16px; }
.rce-hero__cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; margin-top: 20px; padding: 0 26px; border-radius: 999px;
	background: var(--rce-accent); color: var(--rce-accent-ink);
	font-weight: 700; text-decoration: none;
}

/* ===== Sections ========================================================= */

.rce-section { max-width: var(--rce-wide-w); margin: 0 auto 40px; padding: 0 var(--rce-space); }
.rce-section__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.rce-section__title { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.rce-section__link { margin-left: auto; font-size: 14px; font-weight: 600; text-decoration: none; }
.rce-empty {
	padding: 40px 20px; text-align: center; color: var(--rce-ink-soft);
	background: var(--rce-bg-alt); border: 1px dashed var(--rce-line); border-radius: var(--rce-radius);
}

/* ===== Product grid: 2-up on phones, widening with the viewport ========= */

ul.products {
	display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 14px; margin: 0; padding: 0; list-style: none;
}
ul.products::before, ul.products::after { content: none !important; display: none !important; }

ul.products li.product {
	position: relative; margin: 0 !important; padding: 0;
	width: auto !important; float: none !important; clear: none !important;
	background: var(--rce-bg); border: 1px solid var(--rce-line);
	border-radius: var(--rce-radius); overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}
@media (hover: hover) {
	ul.products li.product:hover { box-shadow: var(--rce-shadow); transform: translateY(-2px); }
}
/* Card links carry no underline: the whole card reads as one target, and
   WooCommerce nests the title and amounts inside that same anchor. */
ul.products li.product a { text-decoration: none; }
ul.products li.product a:focus-visible { outline: 2px solid var(--rce-accent); outline-offset: 2px; }

ul.products li.product a img {
	width: 100%; aspect-ratio: 1/1; object-fit: contain;
	margin: 0; padding: 8px; background: var(--rce-bg-alt);
}
ul.products li.product .woocommerce-loop-product__title {
	margin: 0; padding: 12px 12px 4px; font-size: 14px; font-weight: 600;
	line-height: 1.35; color: var(--rce-ink);
}
ul.products li.product .woocommerce-Price-amount, ul.products li.product .amount { font-weight: 700; }
ul.products li.product ins, ul.products li.product del, ul.products li.product > span { padding: 0 12px; font-size: 15px; }
ul.products li.product del { opacity: .55; font-weight: 500; margin-right: 6px; }
ul.products li.product ins { text-decoration: none; }

ul.products li.product .button {
	display: block; margin: 10px 12px 12px; min-height: 42px; line-height: 42px;
	padding: 0 14px; border: 0; border-radius: var(--rce-radius-sm);
	background: var(--rce-accent); color: var(--rce-accent-ink);
	font-size: 14px; font-weight: 650; text-align: center; text-decoration: none; cursor: pointer;
}
ul.products li.product .button:hover { filter: brightness(1.06); }

ul.products li.product .onsale, .woocommerce span.onsale {
	position: absolute; top: 10px; left: 10px; z-index: 2;
	min-height: 0; min-width: 0; margin: 0; padding: 4px 10px; border-radius: 999px;
	background: var(--rce-ink); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.6;
}

/* ===== Single product: narrow, focused, journey-friendly ================ */

.single-product .rce-wrap { padding-top: 18px; }
.woocommerce div.product .product_title { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 8px; }

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	min-height: 50px; width: 100%; border-radius: var(--rce-radius-sm);
	background: var(--rce-accent); color: var(--rce-accent-ink); font-size: 16px; font-weight: 700;
}
.woocommerce div.product form.cart .quantity input.qty {
	min-height: 50px; width: 68px; text-align: center;
	border: 1px solid var(--rce-line); border-radius: var(--rce-radius-sm);
}
.woocommerce div.product form.cart { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.woocommerce div.product form.cart .variations { flex: 1 1 100%; }
.woocommerce div.product form.cart select {
	width: 100%; min-height: 46px; padding: 0 12px;
	border: 1px solid var(--rce-line); border-radius: var(--rce-radius-sm);
	background: var(--rce-bg); font-size: 16px; /* 16px avoids iOS zoom-on-focus */
}
.woocommerce-tabs ul.tabs { padding-left: 0 !important; }

/* ===== Plugin-owned surfaces. Presentation only: the plugin decides IF
   and WHAT renders here. ================================================= */

.rce-journey, .rce-final, .rce-demand {
	margin: 18px 0; padding: 18px; background: var(--rce-bg);
	border: 1px solid var(--rce-line); border-radius: var(--rce-radius); box-shadow: var(--rce-shadow);
}
.rce-journey__cta, .rce-final__cta {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; min-height: 50px; margin-top: 12px; padding: 0 20px;
	border: 0; border-radius: var(--rce-radius-sm);
	background: var(--rce-accent); color: var(--rce-accent-ink);
	font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.rce-journey__cta[disabled] { opacity: .45; cursor: not-allowed; }
.rce-journey__cta--continue { background: var(--rce-ink); }

.rce-reward {
	position: fixed; inset: 0; z-index: 100;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 14px; padding: 20px; background: rgba(10,14,20,.93); color: #fff;
}
.rce-reward__ad { width: 100%; max-width: 420px; min-height: 220px; background: #10161f; border-radius: var(--rce-radius); overflow: hidden; }
.rce-reward__counter { font-size: 15px; font-weight: 600; opacity: .9; }
.rce-final__image { width: 100%; border-radius: var(--rce-radius); margin-bottom: 12px; }

/* ===== Footer =========================================================== */

.rce-footer { margin-top: 48px; padding: 28px 0 40px; border-top: 1px solid var(--rce-line); background: var(--rce-bg-alt); }
.rce-footer__inner { max-width: var(--rce-wide-w); margin: 0 auto; padding: 0 var(--rce-space); text-align: center; color: var(--rce-ink-soft); font-size: 14px; }

/* ===== Breakpoints ====================================================== */

@media (min-width: 600px) {
	ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
	.rce-hero { padding: 52px 0 46px; }
	.rce-hero__title { font-size: 34px; }
	ul.products li.product .woocommerce-loop-product__title { font-size: 15px; }
}

@media (min-width: 900px) {
	.rce-header__nav { display: flex; }
	ul.products { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
	.rce-hero__title { font-size: 42px; }
	.rce-section__title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ===== Progressive reward ladder (Phase 7.2.13) =========================
   Matches the approved prototype: progress bar, numbered step cards,
   completed / current / locked states. One step is actionable at a time;
   the server's stage decides which, so a refresh resumes exactly here. */

.rce-ladder__head {
	display: flex; align-items: baseline; justify-content: space-between;
	margin: 18px 0 8px; font-weight: 700;
}
.rce-ladder__title { font-size: 15px; }
.rce-journey__progress { font-size: 14px; color: var(--rce-ink-soft); font-weight: 600; }

.rce-ladder__track {
	height: 10px; border-radius: 999px; background: var(--rce-bg-alt);
	overflow: hidden; margin-bottom: 14px;
}
.rce-ladder__fill {
	height: 100%; width: 0; border-radius: 999px;
	background: linear-gradient(90deg, var(--rce-accent), #5b4be0);
	transition: width .4s ease;
}

.rce-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.rce-ladder__step {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: 12px; align-items: center;
	padding: 14px;
	border: 1px solid var(--rce-line);
	border-radius: var(--rce-radius);
	background: var(--rce-bg);
}
.rce-ladder__step--completed { background: #f2faf5; border-color: #cdeeda; }
.rce-ladder__step--current   { border-color: var(--rce-accent); box-shadow: 0 0 0 3px var(--rce-accent-dim); }
.rce-ladder__step--locked    { opacity: .62; }

.rce-ladder__num {
	width: 40px; height: 40px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--rce-accent-dim); color: var(--rce-accent);
	font-weight: 800; font-size: 15px;
}
.rce-ladder__step--completed .rce-ladder__num { background: var(--rce-accent); color: #fff; }
.rce-ladder__step--locked .rce-ladder__num { background: var(--rce-bg-alt); color: var(--rce-ink-soft); }

.rce-ladder__step-title { font-weight: 700; font-size: 15px; }
.rce-ladder__step-desc  { font-size: 13px; color: var(--rce-ink-soft); margin-top: 2px; }

.rce-ladder__side { text-align: right; display: grid; gap: 6px; justify-items: end; }
.rce-ladder__step-price { font-weight: 800; color: #5b4be0; font-size: 14px; white-space: nowrap; }

.rce-ladder__side .rce-journey__cta--continue {
	width: auto; min-height: 40px; margin-top: 0; padding: 0 16px; font-size: 14px;
}
.rce-ladder__done {
	display: inline-block; padding: 7px 14px; border-radius: 999px;
	background: #8d959f; color: #fff; font-weight: 700; font-size: 13px;
}
.rce-ladder__locked {
	display: inline-block; padding: 7px 14px; border-radius: 999px;
	background: var(--rce-bg-alt); color: var(--rce-ink-soft); font-weight: 700; font-size: 13px;
}

/* Phones: the side column drops under the text so nothing squeezes. */
@media (max-width: 480px) {
	.rce-ladder__step { grid-template-columns: 36px 1fr; }
	.rce-ladder__num { width: 36px; height: 36px; }
	.rce-ladder__side { grid-column: 2; justify-items: start; text-align: left; }
}