/**
 * Yodha Fuel — Single Product page styles.
 *
 * Loaded only on is_product() (see inc/enqueue.php) — every selector
 * below is either this theme's own namespaced .yf-product-* class, or a
 * WooCommerce-native class (.woocommerce-product-gallery, .product_title,
 * .price, .cart, .quantity, .single_add_to_cart_button, .stock,
 * .product_meta, .woocommerce-tabs, .related …) always scoped inside the
 * .yf-product ancestor — never a bare global rule — per the same
 * namespacing discipline already used in shop.css.
 *
 * MARKUP SOURCE: none of the native classes below come from a template
 * override in this theme. woocommerce/single-product.php only adds the
 * outer .yf-product.yf-container wrapper; everything inside it —
 * .images/.summary siblings, the purchase form, the tabs, stock/meta — is
 * rendered by WooCommerce's own unmodified content-single-product.php via
 * its native hooks. This file's job is entirely to re-skin that native
 * output, the same "style native markup from CSS" approach already used
 * for WooCommerce's sorting/pagination controls in shop.css.
 *
 * TWO-COLUMN LAYOUT: WooCommerce's own template renders the product
 * gallery (.images) and purchase summary (.summary.entry-summary) as
 * direct sibling elements inside one #product-<id> wrapper, followed by
 * .woocommerce-tabs and — via woocommerce/single-product/related.php's
 * override — this theme's own .yf-product-related section, as further
 * siblings of those two. Turning that same wrapper into a CSS grid at
 * tablet/desktop — with the tabs/related items each spanning both
 * columns — produces the two-column layout without any markup override.
 * display: grid on the parent also neutralizes any float/width Storefront
 * might set on .images/.summary itself (a floated/percentage-widthed
 * child of a grid container has its float computed as none and its own
 * width ignored in favour of the grid track — this is standard CSS grid
 * behaviour, not something this file has to force with !important), the
 * same class of Storefront-collision this project hit once already with
 * .content-area — this time neutralized by the layout mode itself rather
 * than worked around after the fact.
 *
 * Mobile-first: base rules are the 375px default, breakpoints layer up at
 * 768 / 1024px, matching every other stylesheet in this theme.
 */

/* ============================================================
   BREADCRUMB
   ============================================================ */
.yf-product .woocommerce-breadcrumb {
	margin: 0 0 var(--space-lg);
	padding: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.yf-product .woocommerce-breadcrumb a {
	color: var(--color-text-muted);
}

.yf-product .woocommerce-breadcrumb a:hover,
.yf-product .woocommerce-breadcrumb a:focus {
	color: var(--yodha-orange);
}

/* ============================================================
   ONSALE BADGE — native WooCommerce <span class="onsale">Sale!</span>,
   rendered as a direct sibling of .images/.summary inside #product-<id>.
   Left unstyled it flows in normal document flow as a plain bordered box
   above the gallery (exactly the "SALE! box at the top of the page" bug
   reported after testing) instead of overlaying the product image the way
   Storefront's own theme intends. Rather than reverse-engineer Storefront's
   absolute-positioning rules against this theme's own gallery layout, the
   badge is hidden outright per explicit request — no sale-badge requirement
   was part of the original spec, and every price already shows the
   strikethrough/sale price natively via .price del/ins above.
   ============================================================ */
.yf-product .onsale {
	display: none;
}

/* ============================================================
   PRODUCT LAYOUT — single column (mobile) → two columns (tablet/desktop)
   ============================================================ */
.yf-product .product {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.yf-product .product > .images,
.yf-product .product > .summary {
	float: none !important;
	width: auto !important;
	margin: 0;
}

/* Storefront/WooCommerce give .product a content:"" clearfix pair
   (::before/::after, display:table) to contain the floats of its classic
   float-based gallery/summary layout — invisible under that layout, but
   under display:grid (set above) each becomes a real, empty grid item.
   ::before renders before every real child, so it silently occupies row 1
   / column 1, shoving the gallery into row 1 / column 2 and the summary
   into row 2 / column 1 — confirmed live via computed styles as the actual
   cause of the gallery-top-right / title-floating-below-left misalignment
   reported after testing.
   The actual rule responsible is Storefront's own
   ".single-product div.product::before/::after" — scoped to the
   single-product body class specifically, so it only ever fires here, and
   its "div.product" combination out-specifies ".yf-product .product" (an
   extra type selector) while also loading after our stylesheet, so it was
   winning the cascade and silencing the content:none/display:none rule
   below on its own. !important is used deliberately and narrowly here:
   this is a permanent, one-time neutralization of a legacy float-clearfix
   that has no purpose once the layout above is display:grid, not a
   specificity fight with anything else on the page. */
.yf-product .product::before,
.yf-product .product::after {
	content: none !important;
	display: none !important;
}

/* ============================================================
   GALLERY — native WooCommerce markup (.woocommerce-product-gallery,
   populated by WooCommerce core's own JS when wc-product-gallery-zoom /
   -lightbox / -slider theme support is declared — see inc/theme-setup.php
   — no custom JS here). A fixed aspect-ratio on the main image area
   reserves its space before the image finishes loading, preventing
   layout shift; reuses the same --card-image-aspect token already used
   by the product-card component elsewhere on the site.
   ============================================================ */
.yf-product .woocommerce-product-gallery {
	max-width: 100%;
}

.yf-product .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
}

.yf-product .woocommerce-product-gallery__image {
	aspect-ratio: var(--card-image-aspect);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.yf-product .woocommerce-product-gallery__image a,
.yf-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Thumbnail strip (FlexSlider markup, bundled with WooCommerce core). */
.yf-product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: var(--space-sm) 0 0;
	padding: 0;
	list-style: none;
}

.yf-product .flex-control-thumbs li {
	width: 64px;
	height: 64px;
}

.yf-product .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: var(--border-width-thick) solid transparent;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.yf-product .flex-control-thumbs img:hover,
.yf-product .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--yodha-orange);
}

/* ============================================================
   SUMMARY — title, rating, price, short description, highlights,
   purchase form, stock, meta. All native WooCommerce markup/classes.
   ============================================================ */
.yf-product .summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* ============================================================
   TRUST BADGES — template-parts/product/badges.php, hooked before the
   title (see inc/single-product.php). A compact pill row rather than the
   homepage Trust section's full title+description cards, since this sits
   directly above the product title in a much narrower vertical space.
   ============================================================ */
.yf-product-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0 0 var(--space-xs);
	padding: 0;
	list-style: none;
}

.yf-product-badges__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: var(--space-2xs) var(--space-sm);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-full);
	background-color: var(--color-bg-alt);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	color: var(--color-text);
}

.yf-product-badges__icon {
	width: 14px;
	height: 14px;
	color: var(--yodha-orange);
	flex-shrink: 0;
}

.yf-product .product_title {
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	margin: 0;
	color: var(--color-heading);
}

/* Rating — WooCommerce's own star-rating markup (a <div> with a
   percentage-width :before overlay), restyled in brand orange rather
   than WooCommerce's default yellow. */
.yf-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.yf-product .star-rating {
	color: var(--yodha-orange);
	font-size: var(--fs-body);
}

.yf-product .woocommerce-review-link {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

.yf-product .woocommerce-review-link:hover,
.yf-product .woocommerce-review-link:focus {
	color: var(--yodha-orange);
}

/* Price — native wc_get_price_html() output (a <p class="price">
   wrapping <del>/<ins> exactly like the product-card price block). */
.yf-product .summary > .price {
	display: block;
	font-size: var(--fs-price-lg);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}

.yf-product .summary > .price del {
	margin-right: var(--space-xs);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
	text-decoration: line-through;
}

.yf-product .summary > .price ins {
	text-decoration: none;
	color: var(--color-heading);
}

/* Short description — native the_excerpt() output inside the summary. */
.yf-product .woocommerce-product-details__short-description {
	color: var(--color-text);
	line-height: var(--lh-body);
}

.yf-product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
   PRODUCT HIGHLIGHTS — this theme's own component (see
   template-parts/product/highlights.php). Real WooCommerce product
   attributes only; renders nothing when a product has none.
   ------------------------------------------------------------ */
.yf-product-highlights {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
	padding: var(--space-md);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-md);
	list-style: none;
}

.yf-product-highlights__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
}

.yf-product-highlights__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--yodha-orange);
}

.yf-product-highlights__text {
	font-size: var(--fs-small);
	color: var(--color-text);
}

.yf-product-highlights__label {
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

/* ------------------------------------------------------------
   VARIATIONS — native WooCommerce variation form (e.g. Pack Size).
   WooCommerce's own markup is a plain <table class="variations">; the
   rules below de-table it into a simple block layout (no visual table
   lines, which this theme never used anywhere else either) rather than
   fighting Storefront's native table styling rule by rule.

   SWATCHES (assets/js/variation-swatches.js): per explicit request to
   replace the native <select> dropdown with clickable options. That
   script builds the .yf-variation-swatches button row as a sibling
   immediately after each <select> and visually hides the <select> itself
   (kept in the DOM, not display:none — see that file's doc comment for
   why) via .yf-variation-select--enhanced below, the same offscreen-clip
   technique as WordPress's own .screen-reader-text, so it stays WooCommerce's
   real, working form control without being visible or focusable.
   ------------------------------------------------------------ */
.yf-product .variations {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.yf-product .variations tr,
.yf-product .variations th,
.yf-product .variations td {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	text-align: left;
}

.yf-product .variations tr + tr {
	margin-top: var(--space-sm);
}

.yf-product .variations th {
	margin-bottom: var(--space-2xs);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
}

.yf-variation-select--enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.yf-variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

.yf-variation-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: var(--space-2xs) var(--space-sm);
	background-color: var(--color-bg);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.yf-variation-swatch:hover,
.yf-variation-swatch:focus-visible {
	border-color: var(--yodha-orange);
	color: var(--yodha-orange);
}

.yf-variation-swatch.is-selected {
	background-color: var(--color-heading);
	border-color: var(--color-heading);
	color: var(--white);
}

.yf-variation-swatch.is-disabled,
.yf-variation-swatch:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.yf-product .reset_variations {
	display: inline-block;
	margin-top: var(--space-xs);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.yf-product .reset_variations:hover,
.yf-product .reset_variations:focus {
	color: var(--yodha-orange);
}

.yf-product .woocommerce-variation-price .price {
	font-size: var(--fs-price-lg);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}

.yf-product .woocommerce-variation-add-to-cart {
	margin-top: var(--space-sm);
}

/* ------------------------------------------------------------
   PURCHASE FORM — native <form class="cart"> (quantity + Add to Cart +
   this theme's Buy Now button), native stock text (wc_get_stock_html()).
   ------------------------------------------------------------ */
.yf-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin: 0;
}

.yf-product .quantity {
	margin: 0;
}

.yf-product .quantity .qty {
	width: 76px;
	height: var(--btn-height-md);
	padding: 0 var(--space-sm);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--fs-body);
	text-align: center;
}

/* Restyles WooCommerce's own native Add to Cart button (no template
   override needed to change its class — this is the same "style the
   native class directly" approach already used for
   .woocommerce-ordering .orderby in shop.css) to match this theme's
   .yf-btn--primary look exactly. */
.yf-product .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-height-md);
	padding: 0 var(--btn-padding-x-lg);
	background-color: var(--yodha-orange);
	border: var(--btn-border-width) solid var(--yodha-orange);
	border-radius: var(--btn-radius);
	color: var(--white);
	font-size: var(--fs-button);
	font-weight: var(--fw-button);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.yf-product .single_add_to_cart_button:hover,
.yf-product .single_add_to_cart_button:focus {
	background-color: var(--yodha-orange-dark);
	border-color: var(--yodha-orange-dark);
	color: var(--white);
}

.yf-product .single_add_to_cart_button.disabled {
	background-color: var(--color-border);
	border-color: var(--color-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* This theme's own Buy Now button — template-parts CTA look (secondary
   variant) reused directly via the shared .yf-btn classes printed by
   inc/single-product.php, so it needs no extra sizing rules here beyond
   matching height with the native button beside it. */
.yf-product .yf-product__buy-now {
	height: var(--btn-height-md);
}

/* Payment method icons — inc/single-product.php's yodha_fuel_payment_icons(),
   which prints only whichever enabled WooCommerce payment gateways' own
   get_icon() markup exists (real configured gateways only, never a
   hard-coded card-network claim). Renders nothing when no gateway
   contributes an icon, so this block simply doesn't appear in that case. */
.yf-product-payment-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-2xs);
}

.yf-product-payment-icons__label {
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.yf-product-payment-icons__row {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

.yf-product-payment-icons__row img {
	height: 24px;
	width: auto;
	border-radius: var(--radius-sm);
	border: var(--border-width) solid var(--color-border);
	background-color: var(--color-bg);
	padding: 2px 4px;
}

/* Stock status — native wc_get_stock_html() output, a <p class="stock">
   with in-stock / out-of-stock / low-in-stock as additional classes. */
.yf-product .stock {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
}

.yf-product .stock.in-stock {
	color: var(--color-success);
}

.yf-product .stock.out-of-stock {
	color: var(--color-danger);
}

/* Meta — native SKU / category / tag line (single-product/meta.php),
   each part only present when that data actually exists on the product. */
.yf-product .product_meta {
	margin: 0;
	padding-top: var(--space-sm);
	border-top: var(--border-width) solid var(--color-border);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}

.yf-product .product_meta > span {
	display: block;
	margin-bottom: var(--space-2xs);
}

.yf-product .product_meta a {
	color: var(--color-text-muted);
}

.yf-product .product_meta a:hover,
.yf-product .product_meta a:focus {
	color: var(--yodha-orange);
}

/* ============================================================
   MARKETING STATEMENT BANNER — template-parts/product/statement.php,
   hooked between the summary and the tabs (see inc/single-product.php).
   Styled to match the homepage's Brand Banner (dark background, diagonal
   accent, centered short statement) — that CSS lives in home.css, which
   isn't loaded on the product page, so the same visual treatment is
   reproduced here rather than pulling in the whole homepage stylesheet.
   ============================================================ */
.yf-product-statement {
	position: relative;
	background-color: var(--warrior-dark-soft);
	color: var(--color-text-inverse);
	overflow: hidden;
	border-radius: var(--radius-md);
}

.yf-product-statement::before {
	content: "";
	position: absolute;
	inset: -20% -10%;
	background: linear-gradient(115deg, transparent 55%, rgba(245, 83, 1, 0.18) 55%, rgba(245, 83, 1, 0.18) 62%, transparent 62%);
	pointer-events: none;
}

.yf-product-statement__inner {
	position: relative;
	text-align: center;
	padding: var(--space-xl) var(--space-lg);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.yf-product-statement__heading {
	color: var(--color-text-inverse);
	font-size: clamp(1.375rem, 4vw, 1.75rem);
	max-width: 28ch;
	margin: 0;
}

.yf-product-statement__subtext {
	color: var(--color-text-inverse-muted);
	max-width: 52ch;
	margin: 0;
}

/* ============================================================
   TABS — native .woocommerce-tabs (Description / Additional information
   / Reviews), rendered by woocommerce_output_product_data_tabs().
   ============================================================ */
.yf-product .woocommerce-tabs {
	margin-top: var(--space-xl);
	padding-top: var(--space-xl);
	border-top: var(--border-width) solid var(--color-border);
}

.yf-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	margin: 0 0 var(--space-lg);
	padding: 0;
	list-style: none;
	border-bottom: var(--border-width) solid var(--color-border);
	/* Storefront's own default for ul.tabs is float:left at a fixed
	   percentage width — a legacy "vertical tab list on the left" sidebar
	   design. Confirmed live via computed styles as the cause of the
	   nav-boxed-in-a-narrow-column / content-offset-far-right layout
	   reported after testing (the same float-vs-modern-layout collision
	   already hit once on .images/.summary). Cleared here so the nav runs
	   as a full-width horizontal bar per the flex rules above.
	   !important: a plain override still lost to a more specific Storefront
	   rule for this exact element (confirmed live — the plain float:none
	   above was not enough, forcing this !important as the deliberate,
	   final word on this one property, the same reasoning already used for
	   the .product::before/::after clearfix above). */
	float: none !important;
	width: 100% !important;
}

.yf-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
}

.yf-product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: var(--space-xs) 0 var(--space-sm);
	color: var(--color-text-muted);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	font-size: var(--fs-label);
	border-bottom: var(--border-width-thick) solid transparent;
	margin-bottom: -1px;
}

.yf-product .woocommerce-tabs ul.tabs li.active a,
.yf-product .woocommerce-tabs ul.tabs li a:hover,
.yf-product .woocommerce-tabs ul.tabs li a:focus {
	color: var(--color-heading);
	border-bottom-color: var(--yodha-orange);
}

/* Storefront's own active-tab indicator is a Font Awesome triangle glyph
   drawn via ::after on the <li>, absolutely positioned using pixel offsets
   that assume Storefront's default tab padding/line-height. Since the
   rules above give the tabs their own smaller padding and an underline
   instead, that glyph's offsets no longer line up — confirmed live via
   computed style (its ::after sits at roughly the vertical midpoint of the
   tab, translated further up), landing on top of the label text instead of
   below it (the "arrow merged with the text" bug reported after testing).
   This theme's underline already communicates the active tab, so the
   glyph is removed rather than repositioned to match a private, unversioned
   Storefront offset that could shift again on a theme update. */
.yf-product .woocommerce-tabs ul.tabs li::before,
.yf-product .woocommerce-tabs ul.tabs li::after,
.yf-product .woocommerce-tabs ul.tabs li a::before,
.yf-product .woocommerce-tabs ul.tabs li a::after {
	content: none;
	display: none;
}

.yf-product .woocommerce-tabs .woocommerce-Tabs-panel {
	/* Storefront's own default floats this panel right at a fixed
	   percentage width, next to ul.tabs' float:left sidebar list — see the
	   note on ul.tabs above. Cleared so the panel is a normal full-width
	   block sitting BELOW the nav bar, matching the reference layout the
	   client asked to match.
	   max-width was originally capped at 72ch for readable line length, but
	   that left roughly half the panel's width as dead space next to the
	   text (confirmed via screenshot) — removed at explicit request so the
	   Description tab uses the full panel width, leaving room to add more
	   content in the center rather than a single narrow text column.
	   !important: same as ul.tabs above — a plain override still lost to a
	   more specific Storefront rule for this exact element, confirmed live. */
	float: none !important;
	width: 100% !important;
	max-width: 100%;
	line-height: var(--lh-body);
	color: var(--color-text);
}

.yf-product .woocommerce-tabs .woocommerce-Tabs-panel h2 {
	font-size: var(--fs-h3);
	margin: 0 0 var(--space-sm);
}

.yf-product .woocommerce-tabs table.shop_attributes {
	width: 100%;
	max-width: 60ch;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.yf-product .woocommerce-tabs table.shop_attributes th,
.yf-product .woocommerce-tabs table.shop_attributes td {
	padding: var(--space-xs) var(--space-sm);
	border-bottom: var(--border-width) solid var(--color-border);
	text-align: left;
}

.yf-product .woocommerce-tabs table.shop_attributes th {
	width: 40%;
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

/* ============================================================
   RELATED PRODUCTS — woocommerce/single-product/related.php reuses
   .yf-section / .yf-container / .yf-product-grid / .yf-product-card,
   already fully styled in home.css/components.css. .yf-section already
   supplies this section's own top/bottom spacing and hairline divider
   (see layout.css) — no extra margin is added here, to avoid the same
   padding/margin-doubling pattern already found and fixed twice
   elsewhere in this project (.yf-section > .yf-container in home.css,
   .yf-shop > .yf-container in shop.css). The same fix applies here:
   .yf-product-related's own nested .yf-container would otherwise ALSO
   stack its own vertical padding on top of .yf-section's.
   ============================================================ */
.yf-product-related > .yf-container {
	padding-top: 0;
	padding-bottom: 0;
}

/* ============================================================
   BREAKPOINTS — 768 / 1024px, matching every other stylesheet.
   ============================================================ */
@media (min-width: 768px) {
	.yf-product .product {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2xl);
		align-items: start;
	}

	/* Tabs and related products each span the full two-column width
	   rather than continuing the grid's auto-placement into a third/
	   fourth cell. .yf-product-related (not WooCommerce's default
	   .related.products) is the actual wrapper here because
	   woocommerce/single-product/related.php replaces the native related-
	   products markup with this theme's own section — see that file. */
	.yf-product .product > .woocommerce-tabs,
	.yf-product .product > .yf-product-related,
	.yf-product .product > .yf-product-statement {
		grid-column: 1 / -1;
	}

	.yf-product .product > .yf-product-statement {
		margin-bottom: var(--space-xl);
	}

	.yf-product .product_title {
		font-size: var(--fs-h1);
	}
}

@media (min-width: 1024px) {
	.yf-product .product {
		gap: var(--space-3xl);
	}
}