/**
 * Product Price Table — the design.
 *
 * Loads on the FRONTEND and in the EDITOR (block.json's "style" handle is
 * enqueued in both contexts), so there is one definition of the layout
 * and the editor preview cannot drift away from what visitors see.
 *
 * Scoped entirely under .wp-block-cenforce-product-price-table (the
 * block's real wrapper class, from get_block_wrapper_attributes()) so it
 * can never leak onto another block, page or WooCommerce element.
 *
 * COLOURS/SIZES. All block-specific values are custom properties on the
 * wrapper: --ppt-accent, --ppt-dark, --ppt-link, --ppt-text, --ppt-width,
 * --ppt-price-col. Override them on .wp-block-cenforce-product-price-table
 * to retheme the block without touching the rules below.
 *
 * BUTTON. No colour/padding/radius rules are defined here on purpose —
 * render.php puts the theme's own "btn-flame" class on the link, the
 * same universal button the footer's newsletter "Subscribe" button
 * (.vx-nl-btn, theme.css ~line 3369) rides on. .ppt-button below only
 * adds this block's own spacing on top of it.
 *
 * @package cenforce-theme
 */

.wp-block-cenforce-product-price-table {
	--ppt-accent: #FFD000;
	--ppt-dark: #111111;
	--ppt-link: #8A6A00;
	--ppt-text: #1A1A1A;
	--ppt-width: 560px;
	--ppt-price-col: 150px;

	display: block;
	box-sizing: border-box;
	max-width: var(--ppt-width);
	margin: 32px 0;
	font-family: var(--font-body, 'Inter', sans-serif);
}

/* ---- Heading ----------------------------------------------------------
   font-family/weight/size/colour all come from .section-title (applied in
   render.php) — the theme's own universal section-heading style, also
   used by "Available Dosages", "You May Also Need" and "Reviews". Per
   the no-drift rule documented at theme.css:1139-1142 (a past per-section
   heading scale was deliberately removed from this theme), ppt-heading
   does not restate any of those — only this block's own spacing. */

.wp-block-cenforce-product-price-table .ppt-heading {
	margin: 0 0 18px;
}

/* Guards against any global heading decoration (bullets, icons, a
   ::before/::after from a generic h2 rule) showing up inside this block. */
.wp-block-cenforce-product-price-table .ppt-heading::before,
.wp-block-cenforce-product-price-table .ppt-heading::after {
	content: none;
	display: none;
}

/* ---- Rows --------------------------------------------------------------
   No card, no background, no border — the rows sit directly on the page. */

.wp-block-cenforce-product-price-table .ppt-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-cenforce-product-price-table .ppt-row {
	display: grid;
	grid-template-columns: 1fr var(--ppt-price-col);
	column-gap: 20px;
	align-items: baseline;
	padding: 6px 0;
	margin: 0;
	font-size: 17px;
	line-height: 1.4;
	list-style: none;
}

/* This block is often rendered inside .pdp-desc (the product description
   area), whose prose styling paints every "ul li" with a 7px gold square
   bullet: .pdp-desc ul li::before (theme.css:978) at specificity (0,1,3).
   .wp-block-cenforce-product-price-table .ppt-row::before is (0,2,1) —
   two classes beats one class regardless of element count — so this wins
   outright with no !important, the same fix already used for the product
   slider track at theme.css:3812-3814. */
.wp-block-cenforce-product-price-table .ppt-row::before,
.wp-block-cenforce-product-price-table .ppt-row::after,
.wp-block-cenforce-product-price-table .ppt-row::marker {
	content: none;
	display: none;
}

.wp-block-cenforce-product-price-table .ppt-name {
	min-width: 0;
	font-weight: 500;
	overflow-wrap: anywhere;
}

.wp-block-cenforce-product-price-table .ppt-name,
.wp-block-cenforce-product-price-table span.ppt-name {
	color: var(--ppt-link);
}

.wp-block-cenforce-product-price-table a.ppt-name {
	text-decoration: none;
}

.wp-block-cenforce-product-price-table a.ppt-name:hover,
.wp-block-cenforce-product-price-table a.ppt-name:focus {
	color: var(--ppt-dark);
	text-decoration: underline;
	text-decoration-color: var(--ppt-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.wp-block-cenforce-product-price-table .ppt-price {
	text-align: left;
	white-space: nowrap;
	color: var(--ppt-text);
}

/* ---- Button ------------------------------------------------------------
   Colour, padding, radius and hover state come from .btn-flame (applied
   in render.php); only this block's own spacing is added here. */

.wp-block-cenforce-product-price-table .ppt-button {
	display: flex;
	width: fit-content;
	margin: 22px auto 0;
}

/* ---- Editor-only affordances ------------------------------------------
   The row-editing fields shown in the canvas; never rendered on the
   frontend (render.php has no equivalent markup). */

.wp-block-cenforce-product-price-table .ppt-row-editor {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--line, #E4E2DC);
}

.wp-block-cenforce-product-price-table .ppt-row-editor:last-of-type {
	border-bottom: 0;
}

.wp-block-cenforce-product-price-table .ppt-row-fields {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.wp-block-cenforce-product-price-table .ppt-row-actions {
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
	padding-bottom: 8px;
}

.wp-block-cenforce-product-price-table .ppt-button-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line, #E4E2DC);
}

/* ---- Mobile ------------------------------------------------------------ */

@media (max-width: 767px) {
	.wp-block-cenforce-product-price-table {
		max-width: 100%;
	}

	.wp-block-cenforce-product-price-table .ppt-row {
		grid-template-columns: 1fr auto;
		column-gap: 12px;
		font-size: 15px;
	}

	.wp-block-cenforce-product-price-table .ppt-price {
		text-align: right;
	}

	.wp-block-cenforce-product-price-table .ppt-row-fields {
		grid-template-columns: 1fr;
	}

	.wp-block-cenforce-product-price-table .ppt-button-fields {
		grid-template-columns: 1fr;
	}
}