<?php
/**
 * Front-end shop layout CSS (collection grid + PDP + builder fixes).
 *
 * Product page proportions/typography calibrated against Commerce7 Spectra
 * template: https://dmitru-com.v2-template.commerce7.com/product/...
 *
 * @package C7DBT
 */

defined( 'ABSPATH' ) || exit;

class C7DBT_Shop_Layout {

	/**
	 * Hooks.
	 */
	public function hooks() {
		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_front' ), 110 );
	}

	/**
	 * Emit layout CSS after Brand Kit / C7 styles.
	 */
	public function enqueue_front() {
		$settings = C7DBT_Settings::get();
		if ( empty( $settings['layout_enabled'] ) ) {
			return;
		}
		if ( is_customize_preview() ) {
			return;
		}
		if ( isset( $_GET['elementor-preview'] ) ) { // phpcs:ignore
			return;
		}

		$css = $this->build_css( $settings );
		if ( '' === trim( $css ) ) {
			return;
		}

		$deps = array();
		if ( wp_style_is( 'c7dbt-branding', 'registered' ) || wp_style_is( 'c7dbt-branding', 'enqueued' ) ) {
			$deps[] = 'c7dbt-branding';
		}
		foreach ( array( 'c7wp', 'commerce7', 'c7-base', 'c7css', 'wp-commerce7' ) as $handle ) {
			if ( wp_style_is( $handle, 'registered' ) || wp_style_is( $handle, 'enqueued' ) ) {
				$deps[] = $handle;
			}
		}

		wp_register_style( 'c7dbt-layout', false, $deps, C7DBT_VERSION );
		wp_enqueue_style( 'c7dbt-layout' );
		wp_add_inline_style( 'c7dbt-layout', $css );
	}

	/**
	 * Detect active page builder key.
	 *
	 * @return string
	 */
	public static function detect_builder() {
		if ( defined( 'ELEMENTOR_VERSION' ) || did_action( 'elementor/loaded' ) ) {
			return 'elementor';
		}
		if ( defined( 'ET_BUILDER_VERSION' ) || function_exists( 'et_setup_theme' ) ) {
			return 'divi';
		}
		if ( defined( 'BRICKS_VERSION' ) || class_exists( '\Bricks\Theme', false ) ) {
			return 'bricks';
		}
		if ( defined( 'CT_VERSION' ) || defined( 'OXYGEN_IFRAME' ) ) {
			return 'oxygen';
		}
		if ( function_exists( 'wp_is_block_theme' ) && wp_is_block_theme() ) {
			return 'gutenberg';
		}
		return 'gutenberg';
	}

	/**
	 * Build layout CSS.
	 *
	 * @param array $settings Settings.
	 * @return string
	 */
	public function build_css( array $settings ) {
		$desktop = max( 1, min( 4, absint( $settings['layout_cols_desktop'] ) ) );
		$tablet  = max( 1, min( 4, absint( $settings['layout_cols_tablet'] ) ) );
		$mobile  = max( 1, min( 4, absint( $settings['layout_cols_mobile'] ) ) );
		$col_gap = max( 0, absint( $settings['layout_col_gap'] ) );
		$row_gap = max( 0, absint( $settings['layout_row_gap'] ) );
		$width   = max( 800, min( 1600, absint( $settings['layout_page_width'] ) ) );
		$style   = sanitize_key( $settings['layout_card_style'] );
		$pdp     = sanitize_key( $settings['layout_pdp_preset'] );
		$builder = sanitize_key( $settings['layout_builder_mode'] );

		if ( 'auto' === $builder ) {
			$builder = self::detect_builder();
		}

		// Spectra template: page width + 18px body / 1.6 line-height.
		$css  = ":root {\n";
		$css .= "\t--c7-page-width: {$width}px;\n";
		$css .= "\t--c7dbt-col-gap: {$col_gap}px;\n";
		$css .= "\t--c7dbt-row-gap: {$row_gap}px;\n";
		$css .= "}\n";
		$css .= "#c7-content, .c7-content, .c7-product-detail, .c7-product-collection {\n";
		$css .= "\tfont-size: var(--c7-font-size, 18px);\n";
		$css .= "\tline-height: 1.6;\n";
		$css .= "}\n";

		$css .= $this->collection_css( $desktop, $tablet, $mobile, $style );
		$css .= $this->pdp_css( $pdp );
		$css .= $this->mobile_base_css();
		if ( 'off' !== $builder ) {
			$css .= $this->builder_css( $builder );
		}

		return apply_filters( 'c7dbt_layout_css', $css, $settings );
	}

	/**
	 * Join a list of selectors with a suffix on EACH item.
	 * Avoids the CSS trap: "A, B .child" only suffixes the last selector.
	 *
	 * @param array  $selectors Base selectors.
	 * @param string $suffix    Suffix like ' .c7-product__image'.
	 * @return string
	 */
	private function suffix_each( array $selectors, $suffix = '' ) {
		$out = array();
		foreach ( $selectors as $sel ) {
			$out[] = $sel . $suffix;
		}
		return implode( ",\n", $out );
	}

	/**
	 * Collection grid CSS.
	 *
	 * @param int    $desktop Desktop cols.
	 * @param int    $tablet  Tablet cols.
	 * @param int    $mobile  Mobile cols.
	 * @param string $style   catalog|horizontal|auto.
	 * @return string
	 */
	private function collection_css( $desktop, $tablet, $mobile, $style ) {
		$use_catalog = ( 'catalog' === $style );

		$wrap = array(
			'#c7-content .c7-product-collection__products',
			'.c7-product-collection__products',
		);
		$featured_wrap = array(
			'#c7-content .c7-product-collection__products--featured',
			'.c7-product-collection__products--featured',
		);
		$featured_list = array(
			'#c7-content .c7-product-collection__products--featured .c7-product-collection__product-list',
			'.c7-product-collection__products--featured .c7-product-collection__product-list',
		);
		$main_list = array(
			'#c7-content .c7-product-collection__products > .c7-product-collection__product-list',
			'.c7-product-collection__products > .c7-product-collection__product-list',
			'#c7-content .c7-related-products__product-list',
			'.c7-related-products__product-list',
		);
		$cards = array(
			'#c7-content .c7-product-collection .c7-product',
			'.c7-product-collection .c7-product',
			'#c7-content .c7-related-products .c7-product',
			'.c7-related-products .c7-product',
		);

		$css  = $this->suffix_each( $wrap ) . " {\n";
		$css .= "\tdisplay: block !important;\n";
		$css .= "\twidth: 100% !important;\n";
		$css .= "\tmax-width: 100% !important;\n";
		$css .= "\tbox-sizing: border-box !important;\n";
		$css .= "}\n";

		$css .= $this->suffix_each( $featured_wrap ) . " {\n";
		$css .= "\tdisplay: block !important;\n";
		$css .= "\twidth: 100% !important;\n";
		$css .= "\tmax-width: 100% !important;\n";
		$css .= "\tbox-sizing: border-box !important;\n";
		$css .= "}\n";

		$feat_cols = min( 2, $desktop );
		$css      .= $this->suffix_each( $featured_list ) . " {\n";
		$css      .= "\tdisplay: grid !important;\n";
		$css      .= "\tgrid-template-columns: repeat({$feat_cols}, minmax(0, 1fr)) !important;\n";
		$css      .= "\tcolumn-gap: var(--c7dbt-col-gap, 30px) !important;\n";
		$css      .= "\trow-gap: var(--c7dbt-row-gap, 80px) !important;\n";
		$css      .= "\tmargin: 40px 0 60px !important;\n";
		$css      .= "\twidth: 100% !important;\n";
		$css      .= "\tmax-width: 100% !important;\n";
		$css      .= "\talign-items: stretch !important;\n";
		$css      .= "\tbox-sizing: border-box !important;\n";
		$css      .= "}\n";

		$css .= $this->suffix_each( $main_list ) . " {\n";
		$css .= "\tdisplay: grid !important;\n";
		$css .= "\tgrid-template-columns: repeat({$desktop}, minmax(0, 1fr)) !important;\n";
		$css .= "\tcolumn-gap: var(--c7dbt-col-gap, 30px) !important;\n";
		$css .= "\trow-gap: var(--c7dbt-row-gap, 80px) !important;\n";
		$css .= "\tmargin: 40px 0 60px !important;\n";
		$css .= "\twidth: 100% !important;\n";
		$css .= "\tmax-width: 100% !important;\n";
		$css .= "\talign-items: stretch !important;\n";
		$css .= "\tbox-sizing: border-box !important;\n";
		$css .= "}\n";

		$css .= $this->suffix_each( $cards ) . " {\n";
		$css .= "\tmin-width: 0 !important;\n";
		$css .= "\tmax-width: 100% !important;\n";
		$css .= "\twidth: 100% !important;\n";
		$css .= "\theight: 100% !important;\n";
		$css .= "\tbox-sizing: border-box !important;\n";
		$css .= "\toverflow: visible !important;\n";
		$css .= "\tfloat: none !important;\n";
		$css .= "}\n";

		// Collection titles — C7 base 22px (Spectra bumps to 24px); clamp long titles.
		$css .= $this->suffix_each( $cards, ' .c7-product__title' ) . " {\n";
		$css .= "\tfont-size: 24px !important;\n";
		$css .= "\tline-height: 1.4 !important;\n";
		$css .= "\tmargin-bottom: 5px !important;\n";
		$css .= "\tdisplay: -webkit-box !important;\n";
		$css .= "\t-webkit-box-orient: vertical !important;\n";
		$css .= "\t-webkit-line-clamp: 2 !important;\n";
		$css .= "\toverflow: hidden !important;\n";
		$css .= "}\n";

		// Normalize uneven copy: equal-height details column + clamped teaser + ATC at bottom.
		$css .= $this->suffix_each( $cards, ' .c7-product__details' ) . " {\n";
		$css .= "\tdisplay: flex !important;\n";
		$css .= "\tflex-direction: column !important;\n";
		$css .= "\tflex: 1 1 auto !important;\n";
		$css .= "\tmin-width: 0 !important;\n";
		$css .= "\tmin-height: 0 !important;\n";
		$css .= "}\n";
		$css .= $this->suffix_each( $cards, ' .c7-product__teaser' ) . " {\n";
		$css .= "\tdisplay: -webkit-box !important;\n";
		$css .= "\t-webkit-box-orient: vertical !important;\n";
		$css .= "\t-webkit-line-clamp: 3 !important;\n";
		$css .= "\toverflow: hidden !important;\n";
		$css .= "\ttext-overflow: ellipsis !important;\n";
		$css .= "\tmargin-bottom: 10px !important;\n";
		$css .= "\tmax-width: 100% !important;\n";
		$css .= "\tline-height: 1.5 !important;\n";
		$css .= "}\n";
		$css .= $this->suffix_each( $cards, ' .c7-product__add-to-cart' ) . " {\n";
		$css .= "\tmargin-top: auto !important;\n";
		$css .= "\tmargin-bottom: 0 !important;\n";
		$css .= "\tmax-width: 100% !important;\n";
		$css .= "\twidth: 100% !important;\n";
		$css .= "}\n";
		$css .= $this->suffix_each( $cards, ' .c7-product__add-to-cart__price' ) . " {\n";
		$css .= "\tmargin: 12px 0 !important;\n";
		$css .= "}\n";

		if ( $use_catalog ) {
			$css .= $this->suffix_each( $cards ) . " {\n";
			$css .= "\tdisplay: flex !important;\n";
			$css .= "\tflex-direction: column !important;\n";
			$css .= "\tflex-wrap: nowrap !important;\n";
			$css .= "\talign-items: stretch !important;\n";
			$css .= "}\n";
			$css .= $this->suffix_each( $cards, ' .c7-product__image' ) . ",\n";
			$css .= $this->suffix_each( $cards, ' .c7-product__photo' ) . " {\n";
			$css .= "\tflex: 0 0 auto !important;\n";
			$css .= "\twidth: 100% !important;\n";
			$css .= "\tmax-width: 100% !important;\n";
			$css .= "\tmargin-right: 0 !important;\n";
			$css .= "\tmargin-bottom: 20px !important;\n";
			$css .= "\ttext-align: center !important;\n";
			$css .= "\tfloat: none !important;\n";
			$css .= "}\n";
			$css .= $this->suffix_each( $cards, ' .c7-product__image img' ) . ",\n";
			$css .= $this->suffix_each( $cards, ' .c7-product__photo img' ) . " {\n";
			$css .= "\tmax-width: 100% !important;\n";
			$css .= "\tmax-height: 300px !important;\n";
			$css .= "\twidth: auto !important;\n";
			$css .= "\theight: auto !important;\n";
			$css .= "\tmargin-left: auto !important;\n";
			$css .= "\tmargin-right: auto !important;\n";
			$css .= "\tdisplay: block !important;\n";
			$css .= "}\n";
			$css .= $this->suffix_each( $cards, ' .c7-product__details' ) . " {\n";
			$css .= "\twidth: 100% !important;\n";
			$css .= "\tmax-width: 100% !important;\n";
			$css .= "\tfloat: none !important;\n";
			$css .= "}\n";
		} else {
			// Horizontal = Commerce7 / Spectra default (≥769px).
			$css .= "@media screen and (min-width: 769px) {\n";
			$css .= "\t" . $this->suffix_each( $cards ) . " {\n";
			$css .= "\t\tdisplay: flex !important;\n";
			$css .= "\t\tflex-direction: row !important;\n";
			$css .= "\t\tflex-wrap: nowrap !important;\n";
			$css .= "\t\talign-items: stretch !important;\n";
			$css .= "\t}\n";
			$css .= "\t" . $this->suffix_each( $cards, ' .c7-product__image' ) . ",\n\t" . $this->suffix_each( $cards, ' .c7-product__photo' ) . " {\n";
			$css .= "\t\tflex: 0 0 140px !important;\n";
			$css .= "\t\twidth: 140px !important;\n";
			$css .= "\t\tmax-width: 140px !important;\n";
			$css .= "\t\tmargin-right: 20px !important;\n";
			$css .= "\t\tmargin-bottom: 0 !important;\n";
			$css .= "\t\tfloat: none !important;\n";
			$css .= "\t\talign-self: flex-start !important;\n";
			$css .= "\t}\n";
			$css .= "\t" . $this->suffix_each( $cards, ' .c7-product__image img' ) . ",\n\t" . $this->suffix_each( $cards, ' .c7-product__photo img' ) . " {\n";
			$css .= "\t\tmax-height: 300px !important;\n";
			$css .= "\t\tmax-width: 100% !important;\n";
			$css .= "\t\twidth: auto !important;\n";
			$css .= "\t\theight: auto !important;\n";
			$css .= "\t\tdisplay: block !important;\n";
			$css .= "\t}\n";
			$css .= "\t" . $this->suffix_each( $cards, ' .c7-product__details' ) . " {\n";
			$css .= "\t\twidth: auto !important;\n";
			$css .= "\t\tmax-width: none !important;\n";
			$css .= "\t\tfloat: none !important;\n";
			$css .= "\t}\n";
			$css .= "}\n";
		}

		$css .= "@media (max-width: 1000px) {\n";
		$css .= "\t" . $this->suffix_each( $main_list ) . " { grid-template-columns: repeat({$tablet}, minmax(0, 1fr)) !important; }\n";
		$css .= "\t" . $this->suffix_each( $featured_list ) . " { grid-template-columns: repeat(" . min( 2, $tablet ) . ", minmax(0, 1fr)) !important; }\n";
		$css .= "}\n";

		$css .= "@media (max-width: 768px) {\n";
		$css .= "\t" . $this->suffix_each( $main_list ) . " { grid-template-columns: repeat({$mobile}, minmax(0, 1fr)) !important; row-gap: 40px !important; }\n";
		$css .= "\t" . $this->suffix_each( $featured_list ) . " { grid-template-columns: 1fr !important; row-gap: 40px !important; }\n";
		$css .= "\t" . $this->suffix_each( $cards ) . " { flex-direction: column !important; }\n";
		$css .= "\t" . $this->suffix_each( $cards, ' .c7-product__image' ) . ",\n\t" . $this->suffix_each( $cards, ' .c7-product__photo' ) . " {\n";
		$css .= "\t\tflex: 0 0 auto !important;\n";
		$css .= "\t\twidth: 100% !important;\n";
		$css .= "\t\tmax-width: 100% !important;\n";
		$css .= "\t\tmargin-right: 0 !important;\n";
		$css .= "\t\tmargin-bottom: 20px !important;\n";
		$css .= "\t}\n";
		$css .= "\t" . $this->suffix_each( $cards, ' .c7-product__image img' ) . ",\n\t" . $this->suffix_each( $cards, ' .c7-product__photo img' ) . " { max-height: 250px !important; }\n";
		$css .= "}\n";

		return $css;
	}

	/**
	 * Product detail presets.
	 *
	 * Measured from Spectra template (1280px viewport):
	 * - .c7-product: display flex; row; no gap
	 * - .c7-product__image: flex 0 0 350px; margin-right 40px
	 * - .c7-product__details: flex 1 1 0% (sibling of image — NOT __info)
	 * - .c7-product__info: flex; gap 40px (content + specs, nested in details)
	 * - h1: 46px / 700 / margin 10px 0 20px / left
	 * - body: 18px / line-height 1.6
	 * - ATC: margin 30px 0 50px; max-width 600px
	 *
	 * @param string $preset Preset key.
	 * @return string
	 */
	private function pdp_css( $preset ) {
		$roots = array( '#c7-content .c7-product-detail', '.c7-product-detail' );

		$css  = $this->suffix_each( $roots ) . " {\n";
		$css .= "\tmax-width: var(--c7-page-width, 1300px);\n";
		$css .= "\tmargin-left: auto;\n";
		$css .= "\tmargin-right: auto;\n";
		$css .= "\tfont-size: var(--c7-font-size, 18px);\n";
		$css .= "\tline-height: 1.6;\n";
		$css .= "}\n";

		// Title — Spectra template size (overrides C7 CDN 36px).
		$css .= $this->suffix_each( $roots, ' h1' ) . ",\n";
		$css .= $this->suffix_each( $roots, ' h1.c7-h1' ) . ",\n";
		$css .= $this->suffix_each( $roots, ' .c7-product__title h1' ) . " {\n";
		$css .= "\tfont-size: 46px !important;\n";
		$css .= "\tfont-weight: 700 !important;\n";
		$css .= "\tline-height: 1.6 !important;\n";
		$css .= "\tmargin: 10px 0 20px !important;\n";
		$css .= "\ttext-align: left !important;\n";
		$css .= "}\n";

		$css .= $this->suffix_each( $roots, ' .c7-product__subtitle' ) . " {\n";
		$css .= "\tfont-size: var(--c7-font-size, 18px) !important;\n";
		$css .= "\tline-height: 1.6 !important;\n";
		$css .= "\tmargin: 0 0 10px !important;\n";
		$css .= "}\n";

		$css .= $this->suffix_each( $roots, ' .c7-product__add-to-cart' ) . " {\n";
		$css .= "\tmargin: 30px 0 50px !important;\n";
		$css .= "\tmax-width: 600px !important;\n";
		$css .= "}\n";

		$css .= $this->suffix_each( $roots, ' .c7-product__add-to-cart__price' ) . " {\n";
		$css .= "\tfont-size: var(--c7-font-size, 18px) !important;\n";
		$css .= "\tmargin: 20px 0 !important;\n";
		$css .= "}\n";

		$css .= $this->suffix_each( $roots, ' .c7-product__image' ) . " { text-align: center !important; }\n";
		$css .= $this->suffix_each( $roots, ' .c7-product__image img' ) . " {\n";
		$css .= "\tmax-width: 100% !important;\n";
		$css .= "\theight: auto !important;\n";
		$css .= "\tdisplay: block !important;\n";
		$css .= "\tmargin: 0 auto !important;\n";
		$css .= "}\n";

		switch ( $preset ) {
			case 'stacked':
				$css .= $this->suffix_each( $roots, ' .c7-product' ) . " {\n";
				$css .= "\tdisplay: flex !important;\n";
				$css .= "\tflex-direction: column !important;\n";
				$css .= "\tflex-wrap: nowrap !important;\n";
				$css .= "\talign-items: stretch !important;\n";
				$css .= "\ttext-align: left !important;\n";
				$css .= "\tgap: 0 !important;\n";
				$css .= "}\n";
				$css .= $this->suffix_each( $roots, ' .c7-product__image' ) . " {\n";
				$css .= "\tflex: 0 0 auto !important;\n";
				$css .= "\twidth: 100% !important;\n";
				$css .= "\tmax-width: 420px !important;\n";
				$css .= "\tmargin: 0 auto 20px !important;\n";
				$css .= "}\n";
				$css .= $this->suffix_each( $roots, ' .c7-product__details' ) . " {\n";
				$css .= "\tflex: 1 1 auto !important;\n";
				$css .= "\twidth: 100% !important;\n";
				$css .= "\tmax-width: 640px !important;\n";
				$css .= "\tmargin: 0 auto !important;\n";
				$css .= "}\n";
				break;

			case 'centered':
				$css .= $this->suffix_each( $roots, ' .c7-product' ) . " {\n";
				$css .= "\tdisplay: flex !important;\n";
				$css .= "\tflex-direction: column !important;\n";
				$css .= "\tflex-wrap: nowrap !important;\n";
				$css .= "\talign-items: center !important;\n";
				$css .= "\ttext-align: center !important;\n";
				$css .= "\tgap: 0 !important;\n";
				$css .= "}\n";
				$css .= $this->suffix_each( $roots, ' h1' ) . ",\n";
				$css .= $this->suffix_each( $roots, ' h1.c7-h1' ) . " { text-align: center !important; }\n";
				$css .= $this->suffix_each( $roots, ' .c7-product__image' ) . " {\n";
				$css .= "\tflex: 0 0 auto !important;\n";
				$css .= "\twidth: 100% !important;\n";
				$css .= "\tmax-width: 360px !important;\n";
				$css .= "\tmargin: 0 auto 20px !important;\n";
				$css .= "}\n";
				$css .= $this->suffix_each( $roots, ' .c7-product__details' ) . " {\n";
				$css .= "\tflex: 1 1 auto !important;\n";
				$css .= "\twidth: 100% !important;\n";
				$css .= "\tmax-width: 560px !important;\n";
				$css .= "\tmargin: 0 auto !important;\n";
				$css .= "\ttext-align: center !important;\n";
				$css .= "}\n";
				$css .= $this->suffix_each( $roots, ' .c7-product__add-to-cart' ) . " { margin-left: auto !important; margin-right: auto !important; }\n";
				break;

			case 'balanced':
				$css .= "@media screen and (min-width: 769px) {\n";
				$css .= "\t" . $this->suffix_each( $roots, ' .c7-product' ) . " {\n";
				$css .= "\t\tdisplay: flex !important;\n";
				$css .= "\t\tflex-direction: row !important;\n";
				$css .= "\t\tflex-wrap: nowrap !important;\n";
				$css .= "\t\talign-items: flex-start !important;\n";
				$css .= "\t\tgap: 0 !important;\n";
				$css .= "\t\ttext-align: left !important;\n";
				$css .= "\t}\n";
				$css .= "\t" . $this->suffix_each( $roots, ' .c7-product__image' ) . " {\n";
				$css .= "\t\tflex: 0 0 42% !important;\n";
				$css .= "\t\twidth: 42% !important;\n";
				$css .= "\t\tmax-width: 480px !important;\n";
				$css .= "\t\tmargin-right: 40px !important;\n";
				$css .= "\t\tmargin-bottom: 0 !important;\n";
				$css .= "\t}\n";
				$css .= "\t" . $this->suffix_each( $roots, ' .c7-product__details' ) . " {\n";
				$css .= "\t\tflex: 1 1 0% !important;\n";
				$css .= "\t\twidth: auto !important;\n";
				$css .= "\t\tmax-width: none !important;\n";
				$css .= "\t\tmin-width: 0 !important;\n";
				$css .= "\t\ttext-align: left !important;\n";
				$css .= "\t}\n";
				$css .= "}\n";
				break;

			case 'classic':
			default:
				// Exact Spectra / Commerce7 side-by-side proportions.
				$css .= "@media screen and (min-width: 769px) {\n";
				$css .= "\t" . $this->suffix_each( $roots, ' .c7-product' ) . " {\n";
				$css .= "\t\tdisplay: flex !important;\n";
				$css .= "\t\tflex-direction: row !important;\n";
				$css .= "\t\tflex-wrap: nowrap !important;\n";
				$css .= "\t\talign-items: flex-start !important;\n";
				$css .= "\t\tgap: 0 !important;\n";
				$css .= "\t\ttext-align: left !important;\n";
				$css .= "\t}\n";
				$css .= "\t" . $this->suffix_each( $roots, ' .c7-product__image' ) . " {\n";
				$css .= "\t\tflex: 0 0 350px !important;\n";
				$css .= "\t\twidth: 350px !important;\n";
				$css .= "\t\tmax-width: 350px !important;\n";
				$css .= "\t\tmargin-right: 40px !important;\n";
				$css .= "\t\tmargin-bottom: 0 !important;\n";
				$css .= "\t}\n";
				$css .= "\t" . $this->suffix_each( $roots, ' .c7-product__details' ) . " {\n";
				$css .= "\t\tflex: 1 1 0% !important;\n";
				$css .= "\t\twidth: auto !important;\n";
				$css .= "\t\tmax-width: none !important;\n";
				$css .= "\t\tmin-width: 0 !important;\n";
				$css .= "\t\ttext-align: left !important;\n";
				$css .= "\t}\n";
				$css .= "}\n";
				break;
		}

		// Nested info row (description + wine specs) — Spectra ≥1001px.
		if ( ! in_array( $preset, array( 'stacked', 'centered' ), true ) ) {
			$css .= "@media screen and (min-width: 1001px) {\n";
			$css .= "\t" . $this->suffix_each( $roots, ' .c7-product__info' ) . " {\n";
			$css .= "\t\tdisplay: flex !important;\n";
			$css .= "\t\tflex-direction: row !important;\n";
			$css .= "\t\tgap: 40px !important;\n";
			$css .= "\t}\n";
			$css .= "\t" . $this->suffix_each( $roots, ' .c7-product__content' ) . ",\n";
			$css .= "\t" . $this->suffix_each( $roots, ' .c7-product__specs' ) . " {\n";
			$css .= "\t\tflex: 1 1 0% !important;\n";
			$css .= "\t\tmin-width: 0 !important;\n";
			$css .= "\t}\n";
			$css .= "}\n";
		}

		return $css;
	}

	/**
	 * Always-on mobile safety (matches C7 / Spectra ≤768px).
	 *
	 * @return string
	 */
	private function mobile_base_css() {
		$css  = "@media screen and (max-width: 768px) {\n";
		$css .= "\t#c7-content .c7-product-detail .c7-product,\n\t.c7-product-detail .c7-product {\n";
		$css .= "\t\tdisplay: flex !important;\n";
		$css .= "\t\tflex-direction: column !important;\n";
		$css .= "\t\talign-items: stretch !important;\n";
		$css .= "\t\ttext-align: left !important;\n";
		$css .= "\t\tgap: 0 !important;\n";
		$css .= "\t}\n";
		$css .= "\t#c7-content .c7-product-detail h1,\n\t.c7-product-detail h1,\n";
		$css .= "\t#c7-content .c7-product-detail h1.c7-h1,\n\t.c7-product-detail h1.c7-h1 {\n";
		$css .= "\t\tfont-size: 32px !important;\n";
		$css .= "\t\tline-height: 1.3 !important;\n";
		$css .= "\t}\n";
		$css .= "\t#c7-content .c7-product-detail .c7-product__image,\n\t.c7-product-detail .c7-product__image {\n";
		$css .= "\t\tflex: 0 0 auto !important;\n";
		$css .= "\t\twidth: 100% !important;\n";
		$css .= "\t\tmax-width: 100% !important;\n";
		$css .= "\t\tmargin-right: 0 !important;\n";
		$css .= "\t\tmargin-bottom: 20px !important;\n";
		$css .= "\t}\n";
		$css .= "\t#c7-content .c7-product-detail .c7-product__image img,\n\t.c7-product-detail .c7-product__image img {\n";
		$css .= "\t\tmax-height: 350px !important;\n";
		$css .= "\t}\n";
		$css .= "\t#c7-content .c7-product-detail .c7-product__details,\n\t.c7-product-detail .c7-product__details {\n";
		$css .= "\t\tflex: 1 1 auto !important;\n";
		$css .= "\t\twidth: 100% !important;\n";
		$css .= "\t\tmax-width: 100% !important;\n";
		$css .= "\t}\n";
		$css .= "\t#c7-content .c7-product-detail .c7-product__info,\n\t.c7-product-detail .c7-product__info {\n";
		$css .= "\t\tdisplay: block !important;\n";
		$css .= "\t}\n";
		$css .= "\t#c7-content .c7-product__add-to-cart,\n\t.c7-product__add-to-cart { width: 100%; max-width: 100% !important; }\n";
		$css .= "}\n";
		return $css;
	}

	/**
	 * Builder-specific spacing / constrained-layout fixes.
	 *
	 * @param string $builder Builder key.
	 * @return string
	 */
	private function builder_css( $builder ) {
		$css  = "/* C7DBT builder fix: {$builder} */\n";
		$css .= "#c7-content, .c7-content, .wp-block-c7wp-default, .wp-block-c7wp-collection {\n";
		$css .= "\tmax-width: none !important;\n\twidth: 100% !important;\n}\n";
		$css .= ".c7-wrapper { max-width: var(--c7-page-width, 1300px); margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }\n";

		switch ( $builder ) {
			case 'elementor':
				$css .= ".elementor-widget-container #c7-content, .elementor #c7-content { max-width: none !important; }\n";
				break;
			case 'divi':
				$css .= ".et_pb_module #c7-content, .et_pb_code_inner #c7-content { max-width: none !important; }\n";
				break;
			case 'bricks':
				$css .= ".brxe-div #c7-content, .bricks-element #c7-content { max-width: none !important; }\n";
				break;
			case 'oxygen':
				$css .= ".ct-div-block #c7-content { max-width: none !important; }\n";
				break;
			case 'gutenberg':
			default:
				$css .= ".entry-content > .wp-block-c7wp-default,\n.entry-content > .wp-block-c7wp-collection,\n";
				$css .= ".is-layout-constrained > .wp-block-c7wp-default,\n.is-layout-constrained > .wp-block-c7wp-collection,\n";
				$css .= ".is-layout-constrained > #c7-content,\n.entry-content > #c7-content {\n";
				$css .= "\tmax-width: none !important;\n\twidth: 100% !important;\n}\n";
				$css .= ".entry-content .wp-block-c7wp-default,\n.entry-content .wp-block-c7wp-collection { margin-block-start: 0; margin-block-end: 0; }\n";
				break;
		}

		return $css;
	}
}