/**
 * Cart page -- built for one job: getting to checkout.
 *
 * Loaded on is_cart() by fg_enqueue_cart_styles(). Behaviour in
 * assets/js/cart.js. The core cart/cart.php template is UNTOUCHED -- the whole
 * redesign is CSS over the stock table markup, plus a small script.
 *
 * Design decisions, all in service of conversion:
 *  - Single narrow column (620px). A cart is a receipt, not a spreadsheet:
 *    the six-column table renders as simple item rows at every width, so
 *    there is no separate mobile layout to get wrong.
 *  - One loud action: "Checkout — $X" (total on the button, like Pay on
 *    checkout). Everything else is quiet.
 *  - No visible "Update cart" button when JS is available -- quantity changes
 *    submit themselves. A manual update step is a place to stall.
 *  - Coupon collapsed behind the same "Have a coupon or gift card?" line as
 *    checkout. An open code field invites leaving to hunt for one. Both of
 *    these degrade gracefully: without JS the coupon field and Update button
 *    render as normal.
 *  - Unit price column hidden; the line subtotal is the number that matters
 *    here, and the qty box sits right next to it.
 *
 * Scoped body.woocommerce-cart -- the usual one-level specificity edge over
 * the late-loading external stylesheets. Tokens shared with checkout.css.
 */

:root {
	--fg-green: #50ae26;
	--fg-green-dark: #46991f;
	--fg-ink: #1c1e21;
	--fg-muted: #6b7280;
	--fg-line: #e2e5e8;
	--fg-field: #b8bfc6;
	--fg-surface: #ffffff;
	--fg-radius: 0; /* square corners across the store, per design */
}

/* -------------------------------------------------------------------------
 * Container: one readable column, like checkout.
 * ---------------------------------------------------------------------- */
body.woocommerce-cart #content {
	max-width: 620px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

body.woocommerce-cart #content > h2 {
	max-width: none;
	width: 100%;
	margin: 0 0 18px;
	box-sizing: border-box;
}

body.woocommerce-cart .fullpostentry,
body.woocommerce-cart #blogcontent,
body.woocommerce-cart .fp__woo-commerce #blogcontent {
	max-width: none;
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	font-family: Lato, arial, helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fg-ink);
}

/* -------------------------------------------------------------------------
 * Notices: same card language as checkout.
 * ---------------------------------------------------------------------- */
body.woocommerce-cart .fp__woo-commerce .woocommerce-message,
body.woocommerce-cart .fp__woo-commerce .woocommerce-info,
body.woocommerce-cart .fp__woo-commerce .woocommerce-error {
	box-shadow: none;
	outline: none;
	background: var(--fg-surface);
	background-color: var(--fg-surface);
	border: 1px solid var(--fg-line);
	border-left: 4px solid var(--fg-green);
	border-radius: var(--fg-radius);
	margin: 0 0 16px;
	padding: 13px 16px;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fg-ink);
	text-align: left;
}

body.woocommerce-cart .fp__woo-commerce .woocommerce-error {
	border-left-color: #d63638;
	color: #b32d2e;
}

body.woocommerce-cart .fp__woo-commerce .woocommerce-message .button {
	position: static;
	display: inline;
	margin: 0 0 0 6px;
	padding: 0;
	min-width: 0;
	background: none;
	border: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--fg-green);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Items: the stock table rendered as simple rows in a card.
 * ---------------------------------------------------------------------- */
body.woocommerce-cart .fp__woo-commerce table.woocommerce-cart-form__contents {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 14px;
	padding: 6px 18px;
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	background: var(--fg-surface);
	box-sizing: border-box;
}

body.woocommerce-cart .fp__woo-commerce .woocommerce-cart-form__contents thead {
	display: none;
}

body.woocommerce-cart .fp__woo-commerce .woocommerce-cart-form__contents tbody {
	display: block;
	width: 100%;
}

body.woocommerce-cart .fp__woo-commerce .woocommerce-cart-form__contents tr.cart_item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--fg-line);
}

body.woocommerce-cart .fp__woo-commerce .woocommerce-cart-form__contents tr.cart_item:last-of-type {
	border-bottom: 0;
}

body.woocommerce-cart .fp__woo-commerce .woocommerce-cart-form__contents tr.cart_item td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	text-align: left;
}

/* Row anatomy: [thumb] [name + meta, grows] [qty] [subtotal] [x] */
body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-thumbnail {
	order: 1;
	flex: 0 0 56px;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-thumbnail img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border: 1px solid var(--fg-line);
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-name {
	order: 2;
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
	line-height: 1.35;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-name a {
	color: var(--fg-ink);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-name a:hover {
	color: var(--fg-green);
}

/* Variation meta (Size: Large) under the name. */
body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-name dl.variation {
	display: block;
	margin: 3px 0 0;
	font-size: 12px;
	color: var(--fg-muted);
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item dl.variation dt,
body.woocommerce-cart .fp__woo-commerce tr.cart_item dl.variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item dl.variation dd p {
	display: inline;
	margin: 0;
}

/* The line subtotal is the number that matters; the unit price column is
   noise beside a qty box. */
body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-price {
	display: none;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-quantity {
	order: 3;
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item .quantity {
	display: block;
	/* blog-style.css gives .quantity inside the cart form width:150px -- the td
	   then sizes around it, starving the name column into per-character
	   wrapping on phones. The td override alone missed this inner div. */
	width: auto;
	min-width: 0;
	margin: 0;
	text-align: left;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item .quantity label {
	display: none;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item input.qty {
	box-sizing: border-box;
	width: 60px;
	min-width: 0;
	padding: 8px 6px;
	border: 1px solid var(--fg-field);
	border-radius: var(--fg-radius);
	font-size: 15px;
	text-align: center;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item input.qty:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
	outline: none;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-subtotal {
	order: 4;
	flex: 0 0 auto;
	min-width: 64px;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-remove {
	order: 5;
	flex: 0 0 auto;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 0;
	background: none;
	color: var(--fg-muted);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

body.woocommerce-cart .fp__woo-commerce tr.cart_item a.remove:hover {
	color: #d63638;
}

/* -------------------------------------------------------------------------
 * Actions row: coupon (collapsed by JS) + Update cart (hidden by JS).
 *
 * Both JS behaviours key off .fg-cart-enhanced, which cart.js sets on the
 * form -- so with JS unavailable this row renders as a normal open coupon
 * field and a visible Update button. Nothing is lost, only quieter.
 * ---------------------------------------------------------------------- */
body.woocommerce-cart .fp__woo-commerce .woocommerce-cart-form__contents tr:not(.cart_item) {
	display: block;
}

body.woocommerce-cart .fp__woo-commerce .woocommerce-cart-form__contents td.actions {
	display: block;
	padding: 12px 0 10px;
	border: 0;
	border-top: 1px solid var(--fg-line);
	text-align: left;
}

body.woocommerce-cart .fp__woo-commerce td.actions .coupon {
	display: flex;
	gap: 8px;
	align-items: stretch;
	margin: 0 0 10px;
}

/* JS-collapsed state. */
body.woocommerce-cart .fp__woo-commerce .fg-cart-enhanced td.actions .coupon {
	display: none;
}

body.woocommerce-cart .fp__woo-commerce .fg-cart-enhanced.fg-coupon-open td.actions .coupon {
	display: flex;
}

body.woocommerce-cart .fp__woo-commerce td.actions .coupon label {
	display: none;
}

body.woocommerce-cart .fp__woo-commerce td.actions .coupon .input-text {
	box-sizing: border-box;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	max-width: 240px;
	padding: 10px 12px;
	border: 1px solid var(--fg-field);
	border-radius: var(--fg-radius);
	font-size: 14px;
	text-transform: uppercase;
}

body.woocommerce-cart .fp__woo-commerce td.actions .coupon .input-text:focus {
	border-color: var(--fg-green);
	box-shadow: 0 0 0 3px rgba(80, 174, 38, 0.15);
	outline: none;
}

body.woocommerce-cart .fp__woo-commerce td.actions .button {
	position: static;
	min-width: 0;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var(--fg-field);
	border-radius: var(--fg-radius);
	background: var(--fg-surface);
	background-color: var(--fg-surface);
	color: var(--fg-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

body.woocommerce-cart .fp__woo-commerce td.actions .button:hover:not(:disabled) {
	border-color: var(--fg-green);
	color: var(--fg-green);
	opacity: 1;
}

body.woocommerce-cart .fp__woo-commerce td.actions .button:disabled {
	opacity: 0.55;
	cursor: default;
}

/* With JS, quantity changes submit themselves; the manual button only takes
   up space and adds a step. Kept in the DOM -- cart.js clicks it. */
body.woocommerce-cart .fp__woo-commerce .fg-cart-enhanced td.actions > .button[name="update_cart"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	clip: rect( 0, 0, 0, 0 ) !important;
	overflow: hidden !important;
	padding: 0;
	border: 0;
}

/* The "Have a coupon or gift card?" toggle cart.js injects. */
body.woocommerce-cart .fp__woo-commerce .fg-cart-coupon-toggle {
	display: block;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--fg-green);
	text-decoration: underline;
	cursor: pointer;
	text-align: left;
}

/* -------------------------------------------------------------------------
 * Totals: full-width card, then the one loud button.
 * ---------------------------------------------------------------------- */
body.woocommerce-cart .fp__woo-commerce .cart-collaterals {
	display: block;
}

body.woocommerce-cart .fp__woo-commerce .cart-collaterals .cart_totals {
	width: 100%;
	max-width: none;
	float: none;
	padding: 16px 18px;
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	background: var(--fg-surface);
	box-sizing: border-box;
}

/* "Cart totals" heading says nothing the numbers don't. */
body.woocommerce-cart .fp__woo-commerce .cart_totals > h2 {
	display: none;
}

body.woocommerce-cart .fp__woo-commerce .cart_totals table {
	width: 100%;
	max-width: none;
	margin: 0;
	border-collapse: collapse;
	background: none;
}

body.woocommerce-cart .fp__woo-commerce .cart_totals th,
body.woocommerce-cart .fp__woo-commerce .cart_totals td {
	padding: 9px 0;
	border: 0;
	background: none;
	font-size: 14px;
	vertical-align: top;
}

body.woocommerce-cart .fp__woo-commerce .cart_totals th {
	text-align: left;
	font-weight: 400;
	color: var(--fg-ink);
}

body.woocommerce-cart .fp__woo-commerce .cart_totals td {
	text-align: right;
}

body.woocommerce-cart .fp__woo-commerce .cart_totals .order-total th,
body.woocommerce-cart .fp__woo-commerce .cart_totals .order-total td {
	border-top: 1px solid var(--fg-line);
	padding-top: 12px;
	font-size: 17px;
	font-weight: 700;
}

body.woocommerce-cart .fp__woo-commerce .cart_totals .order-total td {
	color: var(--fg-green);
}

/*
 * Shipping row. The stray dot was the browser's list bullet: shipping methods
 * render as a <ul>, normally de-bulleted by the woocommerce.css this theme
 * disables (same fix as the checkout summary).
 */
body.woocommerce-cart .fp__woo-commerce .cart_totals ul.woocommerce-shipping-methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-cart .fp__woo-commerce .cart_totals ul.woocommerce-shipping-methods li {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-cart .fp__woo-commerce .cart_totals ul.woocommerce-shipping-methods label {
	display: inline;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: var(--fg-ink);
}

/*
 * Destination line and calculator, hidden on the cart. Shipping here is free
 * or included in the price for everyone except the international flat rate --
 * checkout collects the address regardless and applies that rate there, so on
 * the cart these lines are address noise between the customer and the button.
 */
body.woocommerce-cart .fp__woo-commerce .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .fp__woo-commerce .cart_totals .woocommerce-shipping-calculator,
body.woocommerce-cart .fp__woo-commerce .cart_totals .shipping-calculator-button {
	display: none;
}

body.woocommerce-cart .fp__woo-commerce .wc-proceed-to-checkout {
	margin: 14px 0 0;
	padding: 0;
}

body.woocommerce-cart .fp__woo-commerce .wc-proceed-to-checkout a.checkout-button {
	position: static;
	display: block;
	width: 100%;
	margin: 0;
	padding: 16px 24px;
	border: 0;
	border-radius: var(--fg-radius);
	background-color: var(--fg-green);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease;
}

body.woocommerce-cart .fp__woo-commerce .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--fg-green-dark);
	color: #fff;
	opacity: 1;
}

/* Reassurance + the quiet way back, added by fg_cart_after_totals(). */
body.woocommerce-cart .fp__woo-commerce .fg-cart-reassure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--fg-muted);
}

body.woocommerce-cart .fp__woo-commerce .fg-cart-lock {
	flex: 0 0 11px;
	width: 11px;
	height: 9px;
	position: relative;
	border: 1.5px solid var(--fg-muted);
	border-radius: 2px; /* draws the padlock body, not UI rounding */
	margin-top: 3px;
}

body.woocommerce-cart .fp__woo-commerce .fg-cart-lock::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -6px;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border: 1.5px solid var(--fg-muted);
	border-bottom: 0;
	border-radius: 4px 4px 0 0; /* padlock shackle */
}

body.woocommerce-cart .fp__woo-commerce .fg-cart-continue {
	margin: 10px 0 0;
	font-size: 14px;
	text-align: center;
}

body.woocommerce-cart .fp__woo-commerce .fg-cart-continue a {
	color: var(--fg-green);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Empty cart.
 * ---------------------------------------------------------------------- */
body.woocommerce-cart .fp__woo-commerce .cart-empty {
	margin: 0 0 16px;
	padding: 32px 18px;
	border: 1px solid var(--fg-line);
	border-radius: var(--fg-radius);
	background: var(--fg-surface);
	font-size: 16px;
	text-align: center;
	color: var(--fg-ink);
}

body.woocommerce-cart .fp__woo-commerce .return-to-shop {
	text-align: center;
}

body.woocommerce-cart .fp__woo-commerce .return-to-shop a.button {
	position: static;
	display: inline-block;
	margin: 0;
	padding: 13px 28px;
	border: 0;
	border-radius: var(--fg-radius);
	background-color: var(--fg-green);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Tight screens: keep the row shape, shrink the chrome.
 * ---------------------------------------------------------------------- */
/* Phones: two-line rows. Line one is thumbnail + name at full width, so long
   membership names wrap by words instead of being crushed into a one-word
   column; line two carries qty, subtotal and remove. */
@media (max-width: 480px) {
	body.woocommerce-cart .fp__woo-commerce tr.cart_item {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-thumbnail {
		flex-basis: 44px;
	}

	body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-thumbnail img {
		width: 44px;
		height: 44px;
	}

	body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-name {
		flex: 1 1 calc( 100% - 58px );
		overflow-wrap: normal;
	}

	/* Second line: qty left, subtotal pushed right, x at the end. */
	body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-quantity {
		margin-left: 58px; /* aligns under the name, past the thumbnail */
	}

	body.woocommerce-cart .fp__woo-commerce tr.cart_item td.product-subtotal {
		margin-left: auto;
	}

	body.woocommerce-cart .fp__woo-commerce tr.cart_item input.qty {
		width: 52px;
	}

	body.woocommerce-cart .fp__woo-commerce td.actions .coupon .input-text {
		max-width: none;
	}
}

/* Express checkout button (Apple Pay / Google Pay / Link), printed after the
   Checkout button inside .wc-proceed-to-checkout. Revealed by Stripe's JS. */
body.woocommerce-cart .fp__woo-commerce #wc-stripe-express-checkout-element {
	margin: 10px 0 0 !important;
	clear: both;
}

/* The theme zeroes #content's side padding on small screens, leaving the page
   title and cards flush against the viewport edge. */
@media (max-width: 700px) {
	body.woocommerce-cart #content {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* -------------------------------------------------------------------------
 * Dark mode ("theme-fg" cookie -> body.dark-mode; the external styles turn
 * #wrapper near-black). Every rule in this file reads the tokens, so dark
 * support is this flip. Anything hardcoded light above was converted to a
 * token when this block landed -- keep it that way.
 * ---------------------------------------------------------------------- */
body.dark-mode {
	--fg-ink: #e8eaed;
	--fg-muted: #9aa1a8;
	--fg-line: #3a3d41;
	--fg-field: #5b6167;
	--fg-surface: #242628;
}