/*
 * Cart/Checkout/My Account branding (PROJECT_SPEC §14: "clean branded
 * WooCommerce checkout"). Applies our design tokens to WooCommerce's
 * own markup rather than replacing it with custom templates — see
 * docs/ARCHITECTURE.md §9 for why, and for the classic-vs-Blocks
 * caveat these selectors work around by targeting both.
 *
 * Confirmed live (Venmo/Zelle checkout investigation) that this site's
 * Cart and Checkout pages use the WooCommerce Cart/Checkout *blocks*
 * (Store API), not the classic [woocommerce_cart]/[woocommerce_checkout]
 * shortcodes — most of this file's classic-only selectors (.col2-set,
 * #order_review, table.shop_table) have therefore never applied on the
 * live site at all. Kept for the My Account pages, which are still
 * classic templates regardless (confirmed unaffected), but the block
 * classes below (wc-block-*) are what actually render Cart/Checkout —
 * this only adds decorative styling (color/radius/shadow/spacing) on
 * top of WooCommerce Blocks' own structural layout CSS, not a rebuilt
 * layout, since that base CSS is already correct and I can't verify a
 * rebuilt one visually from here. Class names are WooCommerce's
 * documented, stable Blocks theming API; if anything doesn't land
 * pixel-perfect, a screenshot beats guessing further blind.
 */

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content {
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm) var(--wp--preset--spacing--xl);
}

/* Buttons: classic (.button) and block (.wp-block-button-ish) share our token-based look already via theme.json's button element styles — just tighten a few WooCommerce-specific ones. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
#place_order {
	border-radius: var(--wp--custom--radius--input) !important;
	background: var(--wp--preset--color--near-black) !important;
	color: var(--wp--preset--color--warm-white) !important;
	border: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-checkout-place-order-button:hover,
#place_order:hover {
	background: var(--wp--preset--color--charcoal) !important;
}

/* Tables */
.woocommerce table.shop_table,
.woocommerce-checkout-review-order-table {
	border-radius: var(--wp--custom--radius--card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow-elevation--low);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--light-gray);
	padding: 1rem;
}

/* Form fields: classic + block */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input,
.wc-block-components-address-form select {
	border-radius: var(--wp--custom--radius--input) !important;
	border: 1.5px solid var(--wp--preset--color--light-gray) !important;
}

/* Checkout two-column layout (classic already does this structurally via .col2-set; this just gives it breathing room and a right-column card treatment matching PROJECT_SPEC §14: "left contact/shipping/payment + right order summary"). */
.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--lg);
}

@media (min-width: 961px) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: 1.3fr 1fr;
	}
}

.woocommerce-checkout #order_review,
.wc-block-checkout__sidebar,
.wc-block-cart__sidebar {
	background: var(--wp--preset--color--warm-white) !important;
	border-radius: var(--wp--custom--radius--card) !important;
	padding: var(--wp--preset--spacing--md) !important;
	box-shadow: var(--wp--custom--shadow-elevation--low) !important;
	align-self: start;
}

/* ---------- Cart & Checkout blocks (Store API) ----------
   !important throughout this section: live testing (the Venmo/Zelle
   payment-method text overlapping its radio circle, and this section's
   styling not visibly landing at all) confirms the same pattern hit
   repeatedly elsewhere on this site — WooCommerce's own block CSS
   loads with enough specificity/order to beat a plain single-class
   rule here. Padding is the one property in this section that's
   deliberately NOT a blanket override — see the radio-option comment
   below for why. */

.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
	margin-top: var(--wp--preset--spacing--sm);
}

/* WooCommerce Blocks' own default stylesheet puts a card treatment
   (border/background/box-shadow) on the checkout/cart root and on the
   left "fields" column out of the box — invisible on this site until
   page-checkout.html/page-cart.html started rendering these blocks
   wrapped in our own layout for the first time. Stripped here so the
   only boxes on the page are the ones this file adds on purpose (the
   sidebar card further down, individual steps/radio options) instead
   of stacking a second, unstyled one underneath them. Deliberately
   NOT touching the totals/sidebar column classes — the order-summary
   rule below relies on styling one of those itself. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout-fields-block,
.wp-block-woocommerce-cart-items-block {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Each checkout step ("Contact information," "Shipping address,"
   "Payment options," …) as a clearly separated section rather than
   WC Blocks' own unstyled default flow. */
.wc-block-components-checkout-step {
	padding-bottom: var(--wp--preset--spacing--md) !important;
	margin-bottom: var(--wp--preset--spacing--md) !important;
	border-bottom: 1px solid var(--wp--preset--color--light-gray) !important;
}

.wc-block-components-checkout-step:last-child {
	border-bottom: none !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 700 !important;
}

.wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--charcoal) !important;
	font-size: var(--wp--preset--font-size--small) !important;
}

/* Radio options — shipping method AND payment method (Venmo/Zelle
   included) both use this same component. [aria-checked] rather than
   guessing an exact BEM "is-selected" modifier class name, since the
   component is built on an accessible role="radio" pattern.
   Real bug fixed here: this previously used the `padding` SHORTHAND,
   which resets all four sides — that silently collapsed WC Blocks' own
   larger padding-left (reserved for the absolutely-positioned radio
   circle) down to 1rem, not enough room, so the circle overlapped the
   first few characters of every label ("USPS Ground Advantage" read
   as "PS Ground Advantage", "Venmo" as "nmo," etc.). Only the sides
   this section actually needs to change are set now; padding-left is
   deliberately left alone. */
.wc-block-components-radio-control__option {
	border: 1.5px solid var(--wp--preset--color--light-gray) !important;
	border-radius: var(--wp--custom--radius--control) !important;
	padding-block: 0.85rem !important;
	padding-right: 1rem !important;
	margin-bottom: 0.6rem !important;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wc-block-components-radio-control__option[aria-checked="true"] {
	border-color: var(--wp--preset--color--near-black) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--near-black) !important;
}

/* Both shipping-method and payment-method radio groups render with WC
   Blocks' own "highlight checked" treatment (payment methods always;
   shipping whenever the block enables it — screenshot showed both).
   That treatment draws its own border/box-shadow at a hardcoded 4px
   radius that doesn't know about --radius--control above — with every
   option already fully bordered/rounded on its own, the only visible
   effect left was that mismatched hardcoded corner poking out past
   each option's larger rounded corner. Two separate copies of it exist
   and both need disabling, not just one — the option label itself
   (`__option--checked-option-highlighted`) AND, for payment methods
   specifically, a second wrapper one level up
   (`-accordion-option--checked-option-highlighted`) that boxes the
   *entire* selected accordion item, label plus its expanded redirect-
   gateway content ("After submission, you will be redirected…") —
   fixing only the first still left this second one drawing its own
   square-cornered box around both. Every option already carries its
   own full border and its own [aria-checked] treatment above, so all
   of this is pure redundant duplication once identified — not load-
   bearing for anything this site's markup needs. */
.wc-block-components-radio-control--highlight-checked::after,
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option::after {
	display: none !important;
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: none !important;
}

/* ---------- Classic payment method list (the "Pay for order" page) ----------
   WooCommerce never actually rebuilt checkout/form-pay.php (the page
   behind both a declined-payment retry link and an admin-created
   order's "customer payment link") on top of the Checkout block — it
   always renders the old ul.wc_payment_methods/li.wc_payment_method
   markup, completely different classes than the .wc-block-components-
   radio-control__option styled above, so none of that styling reached
   this page at all: default browser radio buttons, no card treatment,
   nothing matching the rest of the site. Same visual language as the
   block version above (card border, radius, checked state), rebuilt
   against the classic selectors this one page actually renders. */
.wc_payment_methods {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.wc_payment_methods .wc_payment_method {
	position: relative;
	border: 1.5px solid var(--wp--preset--color--light-gray);
	border-radius: var(--wp--custom--radius--control);
	margin-bottom: 0.6rem;
	transition: border-color 150ms ease, box-shadow 150ms ease;
	overflow: hidden;
}

.wc_payment_methods .wc_payment_method:has(> input.input-radio:checked) {
	border-color: var(--wp--preset--color--near-black);
	box-shadow: 0 0 0 1px var(--wp--preset--color--near-black);
}

.wc_payment_methods .wc_payment_method > label {
	display: block;
	padding: 0.85rem 1rem 0.85rem 3rem;
	cursor: pointer;
}

/* Native radio, custom-drawn to match the Blocks version's circle-plus-
   dot rather than each browser's own default appearance — the two
   checkouts sit one click apart (a declined payment sends the customer
   straight back here) and shouldn't look like different sites. */
.wc_payment_methods .wc_payment_method > input.input-radio {
	appearance: none;
	position: absolute;
	left: 1rem;
	top: 1.05rem;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--charcoal);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
}

.wc_payment_methods .wc_payment_method > input.input-radio:checked {
	border-color: var(--wp--preset--color--near-black);
}

.wc_payment_methods .wc_payment_method > input.input-radio:checked::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--near-black);
}

.wc_payment_methods .payment_box {
	background: var(--wp--preset--color--warm-white);
	padding: 0 1rem 1rem 3rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
}

/* The default theme draws a small css-triangle "speech bubble" arrow
   pointing up from this box to its radio — a nice touch on WC's own
   plain white background, but it sits at a fixed left offset that
   lands under the radio circle now that this box has its own
   background and the radio has its own custom look above; simpler to
   drop it than to keep re-deriving its position against both. */
.wc_payment_methods .payment_box::before {
	display: none;
}

.yp-blocks-payment-description {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
	margin-top: 0.35rem;
}

/* The Venmo/Zelle "send payment to" account — venmo-payment-method.js /
   zelle-payment-method.js. Its own line (not folded into the plain
   description text above) so it reads as the one actionable detail in
   this section, not just more copy. */
.yp-blocks-payment-handle {
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--wp--preset--color--light-gray);
	border-radius: var(--wp--custom--radius--control);
}

.yp-blocks-payment-handle strong {
	font-family: var(--wp--preset--font-family--mono);
}

/* Order-received page's "Pay with Venmo" QR (class-manual-payment-
   gateway.php's payment_action_html()) — email's own copy of this is
   styled separately in woocommerce/emails/email-styles.php, since
   email HTML can't share a stylesheet with the rest of the site. */
.yp-payment-qr {
	display: block;
	margin-top: 0.5rem;
	padding: 0.5rem;
	border: 1px solid var(--wp--preset--color--light-gray);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--white);
}

.yp-payment-qr-caption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
	margin-top: 0.35rem;
}

/* Order summary (right column): line items + totals */
.wc-block-components-order-summary-item {
	padding-block: 0.6rem !important;
}

/* Same navy backdrop as the cart page and Shop Labels gallery cards —
   this is the checkout sidebar's own copy of the line-item thumbnail. */
.wc-block-components-order-summary-item__image {
	/* Explicit square box + object-fit below — without both, a source
	   photo that's naturally tall and narrow (a standing vial, not a
	   square product shot) renders at its own intrinsic aspect ratio
	   inside this flex row: full height, barely any width, cropping
	   out almost the entire label. */
	width: 3.5rem !important;
	height: 3.5rem !important;
	flex-shrink: 0;
	background: var(--wp--custom--gradient-navy) !important;
	border-radius: var(--wp--custom--radius--control) !important;
	overflow: hidden;
}

.wc-block-components-order-summary-item__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: var(--wp--custom--radius--control) !important;
}

.wc-block-components-totals-item {
	font-size: var(--wp--preset--font-size--small) !important;
}

.wc-block-components-totals-footer-item {
	font-size: var(--wp--preset--font-size--large) !important;
	font-weight: 700 !important;
	padding-top: 0.75rem !important;
	border-top: 1px solid var(--wp--preset--color--light-gray) !important;
}

/* Every rendered price (line items, subtotal, shipping, total) —
   decorative only, same as the rest of this file: WooCommerce Blocks
   wraps each amount in this one class regardless of which totals row
   it's in, so a single rule covers cart and checkout consistently. */
.wc-block-components-formatted-money-amount {
	font-family: var(--wp--preset--font-family--mono) !important;
}

/* Coupon code / any other collapsible panel */
.wc-block-components-panel {
	border-top: 1px solid var(--wp--preset--color--light-gray) !important;
	padding-top: 1rem !important;
	margin-top: 1rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
}

/* Notices (errors, "your session expired," etc.) */
.wc-block-components-notice-banner {
	border-radius: var(--wp--custom--radius--control) !important;
}

/* Cart line items */
.wc-block-cart-items {
	border-radius: var(--wp--custom--radius--card) !important;
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow-elevation--low) !important;
}

/* Same navy "on a light table" backdrop as the Shop Labels gallery
   cards (patterns.css) — consistent product-photography treatment
   from browsing through to checkout. */
.wc-block-cart-item__image {
	width: 5.5rem !important;
	height: 5.5rem !important;
	flex-shrink: 0;
	background: var(--wp--custom--gradient-navy) !important;
	border-radius: var(--wp--custom--radius--control) !important;
	overflow: hidden;
}

.wc-block-cart-item__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: var(--wp--custom--radius--control) !important;
}

/* Account page */
/* Vertical stack, not wrapped horizontal pills — with 9 items now
   (Dashboard/Orders/Saved Designs/Rewards/Proofs/Downloads/Addresses/
   Account details/Log out) a flex-wrap row was packing unevenly by
   available width, reading as disorganized clusters rather than a
   predictable list. A stack has no such wrapping ambiguity regardless
   of how many endpoints this ever grows to. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 0.6rem 1rem;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--light-gray);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--near-black);
	transition: background-color 150ms ease, color 150ms ease;
}

.woocommerce-MyAccount-navigation a:hover {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--warm-white);
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--warm-white);
}

/* ---------- Dashboard (woocommerce/myaccount/dashboard.php override) ---------- */

.yp-account-welcome {
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: 1.5rem;
}

.yp-account-quicklinks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.yp-account-quicklink {
	display: block;
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow-elevation--low);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.yp-account-quicklink:hover {
	box-shadow: var(--wp--custom--shadow-elevation--medium);
	transform: translateY(-2px);
}

.yp-account-quicklink strong {
	display: block;
	margin-bottom: 0.3rem;
}

.yp-account-quicklink span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
}

/* ---------- Rewards tab ---------- */

.yp-rewards-balance {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
	border-radius: var(--wp--custom--radius--card);
	background: linear-gradient(120deg, rgba(0, 174, 239, 0.1), rgba(236, 0, 140, 0.1), rgba(255, 242, 0, 0.1));
	border: 1.5px solid rgba(236, 0, 140, 0.22);
}

.yp-rewards-balance__points {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
}

.yp-rewards-balance__label {
	color: var(--wp--preset--color--charcoal);
}

.yp-rewards-balance__value {
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
}

.yp-rewards-redeem-form {
	margin-bottom: 2rem;
}

.yp-rewards-history {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.yp-rewards-history__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1rem;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow-elevation--low);
	font-size: var(--wp--preset--font-size--small);
}

.yp-rewards-history__date {
	display: block;
	color: var(--wp--preset--color--charcoal);
	font-size: 0.8rem;
}

.yp-rewards-history__amounts {
	display: flex;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	flex-shrink: 0;
}

.yp-rewards-history__earned {
	color: var(--wp--preset--color--cyan-deep);
}

.yp-rewards-history__redeemed {
	color: var(--wp--preset--color--magenta-deep);
}

/* ---------- Refer a Friend (part of the Rewards tab) ---------- */

.yp-referrals {
	margin-bottom: 2rem;
}

.yp-referrals__link-row {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.6rem;
}

.yp-referrals__link {
	flex: 1;
	min-width: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	border-radius: var(--wp--custom--radius--input);
	border: 1.5px solid var(--wp--preset--color--light-gray);
	padding: 0.6rem 0.75rem;
	background: var(--wp--preset--color--warm-white);
	color: var(--wp--preset--color--near-black);
}

.yp-referrals__stats {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
}

/* ---------- Proofs tab ---------- */

.yp-proofs-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.yp-proof-card {
	display: flex;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow-elevation--low);
}

.yp-proof-card__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--control);
	/* No real artwork exists for a one-off Custom Order yet — same
	   "coming soon," not-broken placeholder language as the Customer
	   Inspiration tiles, until real AI-generated previews replace it. */
	background: linear-gradient(135deg, rgba(0, 174, 239, 0.14), rgba(236, 0, 140, 0.14));
	color: var(--wp--preset--color--magenta-deep);
}

.yp-proof-card__body {
	flex: 1;
	min-width: 0;
}

.yp-proof-card__header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.yp-proof-card__status {
	font-size: var(--wp--preset--font-size--small);
	padding: 0.25rem 0.7rem;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--light-gray);
}

.yp-proof-card__date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
	margin: 0.25rem 0 0.75rem;
}

.yp-proof-card__files {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Order detail "Reorder" link ---------- */

.yp-reorder-link {
	margin-top: 0.5rem;
}

.yp-reorder-link a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* ---------- Saved Designs (My Account) ---------- */

.yp-saved-designs-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.yp-saved-design-card {
	display: flex;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow-elevation--low);
}

.yp-saved-design-card__thumb {
	width: 5rem;
	height: 5rem;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--light-gray);
	flex-shrink: 0;
}

.yp-saved-design-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

.yp-saved-design-card__body span {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
}

.yp-saved-design-card__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
}

.yp-saved-design-card__actions form {
	margin: 0;
}