/* ===========================================================================
 * Shop styling.
 *
 * Sets no raw value. Every colour, size, radius, shadow and duration is a
 * var() from the theme's tokens.css, declared as a dependency in
 * includes/class-assets.php. A palette change in the theme reaches the
 * checkout without a line changing here.
 *
 * Same conventions as the theme: one class per rule, no @layer (WordPress
 * global styles arrive unlayered and would beat it), no !important.
 *
 * The checkout inherits the app surface. Long-form reading flips to the
 * reading surface via .is-document in the theme; a checkout is not reading.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * 1. Shell — WooCommerce pages render inside the theme's main landmark
 * ------------------------------------------------------------------------ */

.woocommerce-page .site-main,
.woocommerce .site-main {
	padding-block: var(--section-y);
}

.woocommerce-page .woocommerce,
.woocommerce-page .woocommerce-notices-wrapper,
.woocommerce-page .entry__content {
	width: 100%;
	max-width: var(--w-page);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------------------
 * 2. Forms
 * ------------------------------------------------------------------------ */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0 0 var(--space-5);
	padding: 0;
}

.woocommerce form .form-row label {
	font-size: var(--t-xs);
	font-weight: var(--weight-strong);
	color: var(--text-secondary);
}

.woocommerce form .form-row .required {
	color: var(--live);
	text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 3rem;
	padding: 0.7em 0.85em;
	background-color: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-family: var(--font-text);
	font-size: var(--t-sm);
	line-height: 1.4;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-color: var(--focus);
}

.woocommerce form .form-row .description {
	color: var(--text-secondary);
	font-size: var(--t-xs);
}

/* The only field whose error state matters enough to colour. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--live);
}

/* ---------------------------------------------------------------------------
 * 3. Buttons — reuse the theme's button, do not redefine it
 * ------------------------------------------------------------------------ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.72em 1.35em;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background-color: var(--primary);
	color: var(--primary-fg);
	font-family: var(--font-text);
	font-size: var(--t-sm);
	font-weight: var(--weight-strong);
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--glow-primary);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #place_order:hover {
	background-color: var(--c-cyan-400);
	color: var(--c-ink-900);
}

.woocommerce #place_order {
	width: 100%;
	padding: 0.9em 1.8em;
	font-size: var(--t-base);
}

/* ---------------------------------------------------------------------------
 * 4. Checkout layout
 * ------------------------------------------------------------------------ */

.woocommerce-checkout .woocommerce form.checkout {
	display: grid;
	gap: var(--space-7);
	align-items: start;
}

@media (min-width: 62em) {
	.woocommerce-checkout .woocommerce form.checkout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
	}
}

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3 {
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: var(--weight-strong);
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	font-variation-settings: "wdth" var(--wdth-display);
	color: var(--text-primary);
	margin-bottom: var(--space-5);
}

/* The order summary is the one elevated surface here, matching the guide
 * panel's role on the home page. */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	position: sticky;
	top: 5.5rem;
	padding: var(--space-6);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.woocommerce table.shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: var(--t-sm);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-3) 0;
	border: 0;
	border-bottom: 1px solid var(--border);
	text-align: left;
	color: var(--text-primary);
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
	font-weight: var(--weight-strong);
}

.woocommerce table.shop_table .order-total td,
.woocommerce table.shop_table .order-total th {
	border-bottom: 0;
	padding-top: var(--space-4);
	font-size: var(--t-md);
}

.woocommerce .amount {
	font-variant-numeric: tabular-nums;
	font-variation-settings: "wdth" var(--wdth-numeral);
}

.woocommerce del .amount {
	color: var(--text-secondary);
}

.woocommerce ins {
	background: none;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 5. Payment
 * ------------------------------------------------------------------------ */

.woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
	margin-top: var(--space-5);
}

.woocommerce-checkout #payment ul.payment_methods {
	display: grid;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: 0 0 var(--space-5);
	border-bottom: 1px solid var(--border);
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4);
	background-color: var(--bg-primary);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-size: var(--t-sm);
	font-weight: var(--weight-medium);
	color: var(--text-primary);
}

.woocommerce-checkout #payment div.payment_box {
	flex-basis: 100%;
	margin: 0;
	padding: var(--space-3) 0 0;
	background: none;
	color: var(--text-secondary);
	font-size: var(--t-xs);
	line-height: var(--lh-body);
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 6. Notices
 * ------------------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
	padding: var(--space-4) var(--space-5);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-left: 2px solid var(--primary);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-size: var(--t-sm);
	list-style: none;
}

.woocommerce-error {
	border-left-color: var(--live);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

/* ---------------------------------------------------------------------------
 * 7. Order received
 * ------------------------------------------------------------------------ */

.woocommerce-order {
	max-width: var(--w-prose);
}

.woocommerce-thankyou-order-received {
	font-family: var(--font-display);
	font-size: var(--t-lg);
	font-weight: var(--weight-strong);
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	font-variation-settings: "wdth" var(--wdth-display);
	color: var(--text-primary);
	margin-bottom: var(--space-6);
}

.woocommerce ul.order_details {
	display: grid;
	gap: 1px;
	margin: 0 0 var(--space-7);
	padding: 0;
	background-color: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	list-style: none;
}

.woocommerce ul.order_details li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-4) var(--space-5);
	background-color: var(--bg-primary);
	border: 0;
	color: var(--text-secondary);
	font-size: var(--t-xs);
	text-transform: none;
}

.woocommerce ul.order_details li strong {
	color: var(--text-primary);
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 48em) {
	.woocommerce ul.order_details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * 8. Credentials on the confirmation page
 *
 * The one thing the customer came back for. It gets the elevated surface and
 * the accent rule; everything else on the page stays quiet around it.
 * ------------------------------------------------------------------------ */

.iptv-credentials {
	margin-block: var(--space-7);
	padding: var(--space-6);
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-left: 2px solid var(--primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.iptv-credentials__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: var(--weight-strong);
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	font-variation-settings: "wdth" var(--wdth-display);
	color: var(--text-primary);
}

.iptv-credentials__list {
	display: grid;
	gap: var(--space-4);
	margin: 0;
}

.iptv-credentials__row {
	display: grid;
	gap: var(--space-1);
}

.iptv-credentials__row dt {
	color: var(--text-secondary);
	font-size: var(--t-xs);
	font-weight: var(--weight-strong);
}

/* Credentials are typed by hand into a television remote. Tabular figures and
 * a selectable block matter more here than elegance. */
.iptv-credentials__row dd {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	background-color: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-size: var(--t-sm);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
	user-select: all;
}

@media (min-width: 40em) {
	.iptv-credentials__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * 9. Confirmation — what happens next
 * ------------------------------------------------------------------------ */

.iptv-next {
	margin-block: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--border);
}

.iptv-next__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: var(--weight-strong);
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	font-variation-settings: "wdth" var(--wdth-display);
	color: var(--text-primary);
}

/* A genuine sequence, so it is numbered — same rule the home page follows. */
.iptv-next__list {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: iptv-step;
}

.iptv-next__step {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	align-items: baseline;
	gap: var(--space-3);
	color: var(--text-secondary);
	font-size: var(--t-sm);
	counter-increment: iptv-step;
}

.iptv-next__step::before {
	content: counter(iptv-step);
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: var(--weight-display);
	font-variation-settings: "wdth" var(--wdth-numeral);
	font-variant-numeric: tabular-nums;
	color: var(--primary-text);
	line-height: 1;
}

.iptv-next__note {
	margin: var(--space-5) 0 0;
	color: var(--text-secondary);
	font-size: var(--t-xs);
}

/* ---------------------------------------------------------------------------
 * 10. Empty cart
 * ------------------------------------------------------------------------ */

.iptv-empty {
	max-width: 44ch;
	padding-block: var(--space-8);
}

.iptv-empty__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--t-lg);
	font-weight: var(--weight-strong);
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	font-variation-settings: "wdth" var(--wdth-display);
	color: var(--text-primary);
}

.iptv-empty__body {
	margin: var(--space-4) 0 0;
	color: var(--text-secondary);
	font-size: var(--t-md);
	line-height: var(--lh-tight);
}

.iptv-empty__action {
	margin: var(--space-6) 0 0;
}

/* ---------------------------------------------------------------------------
 * 11. Shop and product pages
 *
 * Four virtual products with no images. The archive is a plain list, not a
 * gallery grid, because there is nothing to look at - the plan cards on the
 * home page are the real storefront.
 * ------------------------------------------------------------------------ */

.woocommerce-shell {
	padding-block: var(--space-8);
}

.woocommerce .woocommerce-products-header__title,
.woocommerce .product_title {
	font-family: var(--font-display);
	font-size: var(--t-xl);
	font-weight: var(--weight-display);
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	font-variation-settings: "wdth" var(--wdth-display);
	color: var(--text-primary);
	margin-bottom: var(--space-6);
}

.woocommerce ul.products {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-5);
	width: auto;
	float: none;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: var(--weight-strong);
	line-height: var(--lh-title);
	letter-spacing: var(--track-title);
	font-variation-settings: "wdth" var(--wdth-display);
	color: var(--text-primary);
}

.woocommerce ul.products li.product a {
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product .price {
	color: var(--text-primary);
	font-size: var(--t-md);
	font-weight: var(--weight-strong);
	font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .price del {
	color: var(--text-secondary);
	font-weight: var(--weight-text);
	font-size: var(--t-sm);
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	display: inline-block;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.15em 0.5em;
	position: static;
	background-color: var(--primary);
	border-radius: var(--radius-sm);
	color: var(--primary-fg);
	font-size: var(--t-xs);
	font-weight: var(--weight-strong);
	line-height: 1.6;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product div.summary {
	color: var(--text-secondary);
	font-size: var(--t-sm);
	line-height: var(--lh-body);
}

.woocommerce div.product p.price {
	color: var(--text-primary);
	font-size: var(--t-lg);
	font-weight: var(--weight-display);
	font-variation-settings: "wdth" var(--wdth-numeral);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 48em) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 68em) {
	.woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}