/**
 * Modern Single Product Page — hook-based 3-column layout.
 *
 * Theme renders the page as usual; we transform the WooCommerce product
 * container into a CSS grid so the first row becomes 3 columns
 * (gallery | summary | order panel) and tabs/related span all columns
 * underneath. No template override — theme tabs, breadcrumbs, related,
 * header and footer stay native.
 *
 * @package WPAIC
 */

/* ================================================================
 * Hide theme sidebar + residual widgets on product pages (Modern)
 * ============================================================== */

body.wpaic-product-modern .sidebar,
body.wpaic-product-modern #secondary,
body.wpaic-product-modern .widget-area,
body.wpaic-product-modern .secondary-area,
body.wpaic-product-modern .sidebar-wrapper,
body.wpaic-product-modern aside.sidebar,
body.wpaic-product-modern aside#secondary,
body.wpaic-product-modern .the7-floating-block,
body.wpaic-product-modern .the7-floating-block-wrapper,
body.wpaic-product-modern #wpaic-shopping-assistant-root,
body.wpaic-product-modern .wpaic-shopping-assistant-launcher,
body.wpaic-product-modern .product-the7-share-container {
	display: none !important;
}

/* The7 wraps #content inside a fixed-width column even when the sidebar is hidden.
   We force the whole chain to full-width with a very specific selector chain that beats
   the theme's `#main.sidebar-right #content { width: ... }` rule. */

body.wpaic-product-modern #main #content,
body.wpaic-product-modern .wf-container-main #content,
body.wpaic-product-modern #main.sidebar-right #content,
body.wpaic-product-modern .content-wrap,
body.wpaic-product-modern .main-page-wrapper,
body.wpaic-product-modern #content,
body.wpaic-product-modern #primary,
body.wpaic-product-modern .wf-container-main,
body.wpaic-product-modern .wf-container-content,
body.wpaic-product-modern .wf-cell-main,
body.wpaic-product-modern .wf-cell-content {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	box-sizing: border-box !important;
}

/* Break the7's flex/table sidebar wrapper so #content stops sharing space. */
body.wpaic-product-modern .wf-container-main,
body.wpaic-product-modern #main.sidebar-right {
	display: block !important;
}

body.wpaic-product-modern .wf-container-sidebar,
body.wpaic-product-modern .wf-cell-sidebar,
body.wpaic-product-modern .wf-sidebar,
body.wpaic-product-modern aside.wf-cell-sidebar,
body.wpaic-product-modern aside.wf-sidebar,
body.wpaic-product-modern #main.sidebar-right > aside.sidebar,
body.wpaic-product-modern #main > aside#sidebar {
	display: none !important;
	width: 0 !important;
	flex: 0 0 0 !important;
}

/* Cap product container at a comfortable max-width and centre it. */
body.wpaic-product-modern div.product {
	max-width: 1320px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ================================================================
 * Theme palette tokens
 * ============================================================== */

body.wpaic-product-modern {
	--wpm-bg: #ffffff;
	--wpm-surface: #f8fafc;
	--wpm-surface-hover: #f1f5f9;
	--wpm-text: #0f172a;
	--wpm-text-muted: #64748b;
	--wpm-border: #e2e8f0;
	--wpm-border-strong: #cbd5e1;
	--wpm-accent: #0f172a;
	--wpm-accent-fg: #ffffff;
	--wpm-accent-hover: #1e293b;
	--wpm-radius: 14px;
	--wpm-radius-sm: 8px;
	--wpm-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
	--wpm-shadow-lg: 0 10px 30px -10px rgba(15, 23, 42, .10), 0 6px 15px -5px rgba(15, 23, 42, .06);
	--wpm-gap: 32px;
}

/* Force a single font everywhere in our Modern blocks — the7 mixes
   "Google Sans" (h1/h3) with "Google Sans Flex" (body/buttons) which
   looks mismatched. Pin everything to the heading face so badges, order
   panel, buttons and meta all share one typeface. */
body.wpaic-product-modern .wpaic-modern-order,
body.wpaic-product-modern .wpaic-modern-order *,
body.wpaic-product-modern .wpaic-modern-badges,
body.wpaic-product-modern .wpaic-modern-badges * {
	font-family: "Google Sans", "Golos Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}

/* ================================================================
 * Transform `.product` container into 3-col grid
 * (gallery | summary | order panel) in row 1.
 * Tabs / related / upsells span full width in row 2+.
 * ============================================================== */

/* First row split into 5 fractions: 1/5 gallery, 3/5 summary, 1/5 order panel.
   Row 2+ (tabs, related, upsells) take the first 4/5 — the right column stays
   free so the sticky Order Details never overlaps tab content. */

body.wpaic-product-modern div.product {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.7fr) minmax(0, 1.3fr);
	column-gap: var(--wpm-gap);
	row-gap: 48px;
	align-items: start;
}

/* Defensive: reset theme floats on gallery/summary that conflict with grid. */
body.wpaic-product-modern div.product > .woocommerce-product-gallery,
body.wpaic-product-modern div.product > .summary,
body.wpaic-product-modern div.product > .summary.entry-summary {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
}

body.wpaic-product-modern div.product > .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
}
body.wpaic-product-modern div.product > .summary,
body.wpaic-product-modern div.product > .summary.entry-summary {
	grid-column: 2;
	grid-row: 1;
}
body.wpaic-product-modern div.product > .wpaic-modern-order {
	grid-column: 3;
	/* Span all rows so position:sticky stays active for the entire page
	   scroll — otherwise the panel "escapes into the stratosphere" when
	   the user scrolls past row 1 (gallery/summary height). */
	grid-row: 1 / -1;
	align-self: start;
}

/* Tabs / related / upsells / product_meta — first two columns only,
   so they never run under the sticky Order Details. */
body.wpaic-product-modern div.product > .woocommerce-tabs,
body.wpaic-product-modern div.product > .related,
body.wpaic-product-modern div.product > .upsells,
body.wpaic-product-modern div.product > .product_meta {
	grid-column: 1 / span 2;
}

@media (max-width: 1100px) {
	/* Tablet: gallery+summary on row 1, order panel on row 1 col 2 spanning.
	   Drop the 1:2:2 split since the order panel would get too narrow. */
	body.wpaic-product-modern div.product {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
		row-gap: 32px;
	}
	body.wpaic-product-modern div.product > .summary,
	body.wpaic-product-modern div.product > .summary.entry-summary {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	body.wpaic-product-modern div.product > .woocommerce-product-gallery {
		grid-column: 1;
		grid-row: 1;
	}
	body.wpaic-product-modern div.product > .wpaic-modern-order {
		grid-column: 2;
		grid-row: 1;
	}
	body.wpaic-product-modern div.product > .woocommerce-tabs,
	body.wpaic-product-modern div.product > .related,
	body.wpaic-product-modern div.product > .upsells {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

@media (max-width: 768px) {
	body.wpaic-product-modern div.product {
		display: flex !important;
		flex-direction: column;
		gap: 24px;
	}
	body.wpaic-product-modern div.product > * {
		width: 100% !important;
	}
}

/* ================================================================
 * Gallery polish
 * ============================================================== */

body.wpaic-product-modern .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
body.wpaic-product-modern .woocommerce-product-gallery .woocommerce-product-gallery__image {
	border-radius: var(--wpm-radius);
	overflow: hidden;
	background: var(--wpm-surface);
}

body.wpaic-product-modern .woocommerce-product-gallery .woocommerce-product-gallery__image img,
body.wpaic-product-modern .woocommerce-product-gallery img.wp-post-image {
	width: 100% !important;
	height: auto !important;
	display: block;
	border-radius: var(--wpm-radius);
}

body.wpaic-product-modern .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

body.wpaic-product-modern .woocommerce-product-gallery .flex-control-thumbs li {
	width: calc(25% - 6px);
	margin: 0;
	float: none !important;
}

body.wpaic-product-modern .woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: var(--wpm-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	transition: border-color .15s ease;
	width: 100%;
	height: auto;
}

body.wpaic-product-modern .woocommerce-product-gallery .flex-control-thumbs img:hover,
body.wpaic-product-modern .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--wpm-accent);
}

body.wpaic-product-modern .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	background: rgba(255, 255, 255, .9);
	border-radius: 999px;
	top: 16px;
	right: 16px;
	box-shadow: var(--wpm-shadow);
}

/* ================================================================
 * Summary (middle column): title, price, excerpt, meta
 * ============================================================== */

body.wpaic-product-modern .summary .product_title,
body.wpaic-product-modern .summary h1.product_title {
	font-size: clamp(22px, 2.1vw, 32px) !important;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wpm-text);
	margin: 0 0 12px;
	word-break: normal;
	overflow-wrap: break-word;
}

body.wpaic-product-modern .summary .woocommerce-product-rating {
	margin: 0 0 16px;
}

body.wpaic-product-modern .summary p.price,
body.wpaic-product-modern .summary span.price,
body.wpaic-product-modern .summary .price {
	font-size: clamp(20px, 1.9vw, 28px) !important;
	font-weight: 700;
	color: var(--wpm-text);
	margin: 0 0 20px;
}

body.wpaic-product-modern .summary .price del {
	font-size: 16px;
	color: var(--wpm-text-muted);
	font-weight: 400;
	margin-right: 8px;
	opacity: .7;
}

body.wpaic-product-modern .summary .price ins {
	background: transparent;
	text-decoration: none;
}

body.wpaic-product-modern .summary .woocommerce-product-details__short-description {
	color: var(--wpm-text);
	font-size: 15px;
	line-height: 1.7;
	margin: 16px 0 24px;
}

body.wpaic-product-modern .summary .woocommerce-product-details__short-description p {
	margin: 0 0 12px;
}

body.wpaic-product-modern .summary .product_meta {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--wpm-border);
	color: var(--wpm-text-muted);
	font-size: 13px;
	line-height: 1.8;
}

/* ================================================================
 * Order panel (right column, sticky)
 * ============================================================== */

body.wpaic-product-modern .wpaic-modern-order {
	position: relative;
	width: 100%;
	float: none !important;
}

body.wpaic-product-modern--sticky .wpaic-modern-order {
	position: sticky;
	top: 0;
}

@media (max-width: 1100px) {
	body.wpaic-product-modern--sticky .wpaic-modern-order {
		position: static;
	}
}

body.wpaic-product-modern .wpaic-modern-order__card {
	background: var(--wpm-bg);
	border: 1px solid var(--wpm-border);
	border-radius: var(--wpm-radius);
	padding: 24px;
	box-shadow: var(--wpm-shadow-lg);
}

body.wpaic-product-modern .wpaic-modern-order__title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--wpm-border);
	color: var(--wpm-text);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Force a strict vertical stack of rows — the7 sometimes leaks
   `.quantity { float:left }` which would put qty and the next row
   on the same visual line. */
body.wpaic-product-modern .wpaic-modern-order__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

body.wpaic-product-modern .wpaic-modern-order__row {
	display: block;
	width: 100%;
	clear: both;
	margin: 0;
}

body.wpaic-product-modern .wpaic-modern-order__label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--wpm-text-muted);
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Quantity widget — kill floats, fix size, ensure it doesn't collide with next row. */
body.wpaic-product-modern .wpaic-modern-order__form .quantity {
	display: inline-flex !important;
	align-items: center;
	background: var(--wpm-surface);
	border: 1px solid var(--wpm-border);
	border-radius: var(--wpm-radius-sm);
	overflow: hidden;
	height: 40px;
	width: auto;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.wpaic-product-modern .wpaic-modern-order__form .quantity input.qty {
	width: 48px !important;
	height: 100% !important;
	border: none !important;
	background: transparent !important;
	text-align: center !important;
	font-size: 14px;
	font-weight: 600;
	color: var(--wpm-text);
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
}

body.wpaic-product-modern .wpaic-modern-order__form .quantity input.qty::-webkit-outer-spin-button,
body.wpaic-product-modern .wpaic-modern-order__form .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

body.wpaic-product-modern .wpaic-modern-order__form .quantity input.qty:focus {
	outline: none !important;
}

/* Some themes inject +/- buttons inside .quantity. Style them. */
body.wpaic-product-modern .wpaic-modern-order__form .quantity .plus,
body.wpaic-product-modern .wpaic-modern-order__form .quantity .minus {
	width: 32px;
	height: 100%;
	background: transparent;
	border: none;
	color: var(--wpm-text);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body.wpaic-product-modern .wpaic-modern-order__form .quantity .plus:hover,
body.wpaic-product-modern .wpaic-modern-order__form .quantity .minus:hover {
	background: var(--wpm-surface-hover);
}

/* MOQ hint — own row, never inline with qty. */
body.wpaic-product-modern .wpaic-modern-order__moq {
	font-size: 12px;
	color: var(--wpm-text-muted);
	margin: 0;
	padding: 8px 12px;
	background: var(--wpm-surface);
	border-radius: var(--wpm-radius-sm);
	font-weight: 500;
	line-height: 1.4;
}

/* Total row — label left, value right, divider above. */
body.wpaic-product-modern .wpaic-modern-order__row--total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	margin-top: 4px;
	border-top: 1px solid var(--wpm-border);
}

body.wpaic-product-modern .wpaic-modern-order__total-label {
	font-size: 13px;
	font-weight: 500;
	color: var(--wpm-text-muted);
}

body.wpaic-product-modern .wpaic-modern-order__total-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--wpm-text);
	white-space: nowrap;
}

body.wpaic-product-modern .wpaic-modern-order__total-value .amount,
body.wpaic-product-modern .wpaic-modern-order__total-value bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Actions row — two buttons side by side, equal width, single line each. */
body.wpaic-product-modern .wpaic-modern-order__row--actions {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 6px;
	width: 100%;
}

body.wpaic-product-modern .wpaic-modern-order__form .single_add_to_cart_button,
body.wpaic-product-modern .wpaic-modern-order .wpaic-add-to-quote-btn,
body.wpaic-product-modern .wpaic-modern-order .wpaic-compare-btn,
body.wpaic-product-modern .wpaic-modern-order__btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 calc(50% - 4px) !important;
	min-width: 0 !important;
	width: calc(50% - 4px) !important;
	max-width: calc(50% - 4px) !important;
	height: 40px;
	min-height: 40px;
	padding: 0 10px !important;
	border-radius: var(--wpm-radius-sm) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	cursor: pointer;
	transition: all .15s ease;
	border: 1px solid transparent;
	box-sizing: border-box;
	text-decoration: none;
	margin: 0 !important;
	float: none !important;
	text-transform: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Primary — "Добавить в заявку" (standard WC submit button on масла.сайт). */
body.wpaic-product-modern .wpaic-modern-order__form .single_add_to_cart_button,
body.wpaic-product-modern .wpaic-modern-order .wpaic-add-to-quote-btn {
	background: var(--wpm-accent) !important;
	color: var(--wpm-accent-fg) !important;
	border-color: var(--wpm-accent) !important;
}

body.wpaic-product-modern .wpaic-modern-order__form .single_add_to_cart_button:hover,
body.wpaic-product-modern .wpaic-modern-order__form .single_add_to_cart_button:focus,
body.wpaic-product-modern .wpaic-modern-order .wpaic-add-to-quote-btn:hover,
body.wpaic-product-modern .wpaic-modern-order .wpaic-add-to-quote-btn:focus {
	background: var(--wpm-accent-hover) !important;
	border-color: var(--wpm-accent-hover) !important;
	color: var(--wpm-accent-fg) !important;
	transform: translateY(-1px);
	box-shadow: var(--wpm-shadow-lg);
}

body.wpaic-product-modern .wpaic-modern-order__form .single_add_to_cart_button:active,
body.wpaic-product-modern .wpaic-modern-order .wpaic-add-to-quote-btn:active {
	transform: translateY(0);
}

/* Secondary — "Сравнить" (Compare). */
body.wpaic-product-modern .wpaic-modern-order .wpaic-compare-btn {
	background: var(--wpm-bg) !important;
	color: var(--wpm-accent) !important;
	border-color: var(--wpm-border-strong) !important;
}

body.wpaic-product-modern .wpaic-modern-order .wpaic-compare-btn:hover {
	background: var(--wpm-surface) !important;
	border-color: var(--wpm-accent) !important;
	color: var(--wpm-accent) !important;
}

body.wpaic-product-modern .wpaic-modern-order .wpaic-compare-btn.is-added {
	background: var(--wpm-surface) !important;
	color: var(--wpm-accent) !important;
	border-color: var(--wpm-accent) !important;
}

body.wpaic-product-modern .wpaic-modern-order .wpaic-compare-btn__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* ================================================================
 * Variation form (variable products) inside our order card
 * ============================================================== */

body.wpaic-product-modern .wpaic-modern-order .variations_form {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.wpaic-product-modern .wpaic-modern-order .variations {
	margin: 0;
	width: 100%;
	border: none;
}

body.wpaic-product-modern .wpaic-modern-order .variations tr {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

body.wpaic-product-modern .wpaic-modern-order .variations td {
	padding: 0;
	display: block;
	width: 100%;
	border: none;
	background: transparent;
}

body.wpaic-product-modern .wpaic-modern-order .variations td.label label {
	font-size: 13px;
	font-weight: 600;
	color: var(--wpm-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

body.wpaic-product-modern .wpaic-modern-order .variations select {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--wpm-border);
	border-radius: var(--wpm-radius-sm);
	background: var(--wpm-bg);
	font-size: 15px;
	color: var(--wpm-text);
}

body.wpaic-product-modern .wpaic-modern-order .single_variation_wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.wpaic-product-modern .wpaic-modern-order .woocommerce-variation-price {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

body.wpaic-product-modern .wpaic-modern-order .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.wpaic-product-modern .wpaic-modern-order .reset_variations {
	font-size: 12px;
	color: var(--wpm-text-muted);
	display: inline-block;
	margin-top: 4px;
}

/* ================================================================
 * Misc — WC notices inside the order card stay compact.
 * ============================================================== */

body.wpaic-product-modern .wpaic-modern-order__card .woocommerce-message,
body.wpaic-product-modern .wpaic-modern-order__card .woocommerce-info,
body.wpaic-product-modern .wpaic-modern-order__card .woocommerce-error {
	margin: 12px 0;
	border-radius: var(--wpm-radius-sm);
	padding: 12px 16px;
	font-size: 13px;
}

/* ================================================================
 * Meta badges (category + SKU) under gallery thumbnails
 * ============================================================== */

body.wpaic-product-modern .wpaic-modern-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

body.wpaic-product-modern .wpaic-modern-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 12px;
	background: var(--wpm-surface);
	color: var(--wpm-text);
	border: 1px solid var(--wpm-border);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	white-space: nowrap;
	font-family: inherit;
}

body.wpaic-product-modern .wpaic-modern-badge--cat {
	color: var(--wpm-text);
}

body.wpaic-product-modern .wpaic-modern-badge--sku {
	color: var(--wpm-text-muted);
	font-variant-numeric: tabular-nums;
}

/* Compact compare icon inside the small button. */
body.wpaic-product-modern .wpaic-modern-order .wpaic-compare-btn__icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}