/**
 * assets/css/woocommerce.css
 *
 * WooCommerce-specific overrides: product grid cards, single-product
 * summary layout, and the Section 6 spec/features/scenarios/FAQ blocks.
 * Only enqueued on WooCommerce pages (is_woocommerce()/is_cart()/
 * is_checkout()) — see functions.php's sgcb_enqueue_assets().
 *
 * Targets both:
 *  - `.sgcb-product-card` (this theme's own woocommerce/content-product.php
 *    override, once it exists)
 *  - WooCommerce's own default `ul.products > li.product` grid markup, as a
 *    fallback for any query that still renders through the *default plugin
 *    template* (e.g. if content-product.php is ever reverted or a plugin
 *    bypasses wc_get_template_part()). Keeping both selectors costs little
 *    and avoids a second unstyled-grid surprise like the one that prompted
 *    this stylesheet.
 *
 * @package sgcb
 */

/* ==========================================================================
   1. Product grid (shop root, category archives, homepage rows)
   ========================================================================== */

/* Fluid column count: instead of jumping 2 → 3 → 4 columns at fixed
   breakpoints (which left an awkward width band where 4 stretched-out
   columns had more room than they needed, right after the filter
   sidebar switches from an off-canvas drawer to a static column at
   960px), auto-fill computes how many 220px-minimum columns actually
   fit the available width and adds/drops one as the window resizes —
   so a card's width stays close to 220-300px at any viewport instead
   of stretching to fill leftover space. clamp() lets the gap scale
   smoothly with viewport width too, rather than jumping between 2-3
   fixed values. */
.products,
.sgcb-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --- Beat WooCommerce's own plugin stylesheet ---------------------------
   WooCommerce's default frontend CSS ships selectors like
   `.woocommerce ul.products.columns-4 li.product` (float + fixed width,
   from its older column-count grid system). Chained across four
   class/element selectors, that combination outweighs our plain `.products`
   / `li.product` rules above no matter what order the stylesheets load in
   — specificity decides the winner, not enqueue order. WooCommerce also
   sets `float`/`width`/`margin` per-item, which our grid doesn't need and
   which visibly squeezes the cards if left in place.
   The block below mirrors WooCommerce's own selector shape (so it's at
   least as specific) and explicitly resets the float-grid properties it
   sets, for every columns-N variant WooCommerce might render. Same fluid
   auto-fill approach as the block above, since this is the rule that
   actually wins in practice (WooCommerce prints ul.products.columns-4
   in the markup, so this more-specific selector — not the plain
   .products one above — is what's live on the page). */
.woocommerce ul.products[class*="columns-"],
.woocommerce-page ul.products[class*="columns-"],
ul.products[class*="columns-"] {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: clamp(16px, 2vw, 24px) !important;
}

.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
ul.products[class*="columns-"] li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* --- Kill WooCommerce core's legacy clearfix pseudo-elements ------------
   WooCommerce's own plugin stylesheet still ships a float-era clearfix:
     .woocommerce ul.products:before, .woocommerce ul.products:after {
         content: ' '; display: table;
     }
   `display: table` still generates a real box even though the parent is
   now `display: grid` (set above) — browsers place that ::before box as
   an actual grid item, first in source order, so it silently claims
   column 1 on every grid this rule applies to. Visually this reads as
   "the first product card is missing" (it isn't; the pseudo-element is
   just sitting in that cell instead), and everything shifts one column
   right for however many rows it takes to run out of that offset. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.products::before,
.products::after,
.sgcb-product-grid::before,
.sgcb-product-grid::after {
	content: none !important;
	display: none !important;
}

/* NOTE: these homepage rows also render via the WC loop, so their <ul> can
   carry the same columns-N class the generic override above targets. These
   selectors are written to be MORE specific than that override (context
   class + attribute selector) and marked !important so the carousel layout
   always wins here, regardless of which columns-N WooCommerce assigns. */
.sgcb-home-badge-row .products,
.sgcb-home-category-row .products,
.sgcb-home-badge-row .products[class*="columns-"],
.sgcb-home-category-row .products[class*="columns-"] {
	display: grid;
	grid-auto-flow: column !important;
	/* Card width steps up at the SAME breakpoints the catalog grid uses
	   (main.css §1: 2/3/4 columns at 0/700/960px), so a card here ends up
	   roughly the same width as its catalog counterpart at every screen
	   size — not permanently pinned near mobile width on desktop, which
	   is what made these look like disproportionately tall, narrow
	   versions of the same card (the title/meta/button/SKU block below
	   the image is fixed-height regardless of card width, so a too-narrow
	   card makes that block dominate and look stretched). */
	grid-template-columns: repeat(8, minmax(150px, 1fr)) !important;
	overflow-x: auto;
	/* Extra room on every edge (not just bottom) so a card's hover
	   box-shadow + translateY(-3px) lift has space to render instead of
	   getting sliced flat by the scroll container's own edge — negative
	   margin below cancels this back out so the row still lines up with
	   its heading and keeps the same spacing to the next row/section. */
	padding: 10px 3px 24px;
	margin: -10px -3px -16px;
	scroll-snap-type: x proximity;
	/* The native scrollbar is replaced by the dot pagination main.js
	   builds right after this element (.sgcb-carousel-dots) — keeping
	   both would be a redundant, mismatched pair of scroll indicators. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

@media (min-width: 700px) {
	.sgcb-home-badge-row .products,
	.sgcb-home-category-row .products,
	.sgcb-home-badge-row .products[class*="columns-"],
	.sgcb-home-category-row .products[class*="columns-"] {
		grid-template-columns: repeat(8, minmax(200px, 1fr)) !important;
	}
}

@media (min-width: 960px) {
	.sgcb-home-badge-row .products,
	.sgcb-home-category-row .products,
	.sgcb-home-badge-row .products[class*="columns-"],
	.sgcb-home-category-row .products[class*="columns-"] {
		grid-template-columns: repeat(8, minmax(260px, 1fr)) !important;
	}
}

.sgcb-home-badge-row .products::-webkit-scrollbar,
.sgcb-home-category-row .products::-webkit-scrollbar {
	display: none;
}

.sgcb-home-badge-row .products > *,
.sgcb-home-category-row .products > * {
	scroll-snap-align: start;
}

li.product,
.sgcb-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	list-style: none;
	border: 1px solid var(--sgcb-color-border) !important;
	border-radius: var(--sgcb-radius);
	padding: 18px !important;
	background: #fff;
	overflow: hidden;
	box-sizing: border-box !important;
	transition: box-shadow var(--sgcb-transition-fast), transform var(--sgcb-transition-fast), border-color var(--sgcb-transition-fast);
}

/* --- Mobile-only tuning (phones, ≤599px) --------------------------------
   Two separate problems show up only at real phone widths, both from
   settings that work fine on tablet/desktop:
   1. The catalog grid's auto-fill minimum (220px) doesn't leave room for
      2 columns once the container's padding is subtracted from a ~360-
      400px phone screen, so it silently collapses to 1 column.
   2. The homepage carousel's mobile card minimum (150px) combined with
      the title's 4-line reservation (sized for a much wider desktop
      card) produces an unusually tall, narrow card — the exact
      "stretched" look. Desktop/tablet keep the fluid grid and 4-line
      title from the last two rounds of changes; only this breakpoint's
      numbers change.
   (A previous pass here also swapped the product photo's object-fit to
   `cover` on mobile to kill letterboxing on wide "box + bottle" shots —
   that traded letterboxing for outright cropping of the product, which is
   worse. The image rule below has been reverted to `contain`, matching
   desktop, so the full photo always shows on phones too.) */
@media (max-width: 599px) {
	.products,
	.sgcb-product-grid,
	.woocommerce ul.products[class*="columns-"],
	.woocommerce-page ul.products[class*="columns-"],
	ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}

	.sgcb-home-badge-row .products,
	.sgcb-home-category-row .products,
	.sgcb-home-badge-row .products[class*="columns-"],
	.sgcb-home-category-row .products[class*="columns-"] {
		grid-template-columns: repeat(8, minmax(180px, 1fr)) !important;
	}

	.woocommerce-loop-product__title,
	.sgcb-product-card__title {
		font-size: 12px !important;
		line-height: 1.35 !important;
		/* Full title, no truncation — a fixed line count kept cutting real
		   product names off mid-word regardless of how many lines were
		   allowed. Letting the box grow with the text is the only way to
		   guarantee the whole name is always visible; cards in a row may
		   end up slightly different heights when titles differ in length,
		   which is normal for a catalog grid. */
		display: block !important;
		-webkit-line-clamp: unset !important;
		-webkit-box-orient: unset !important;
		overflow: visible !important;
		text-overflow: clip !important;
		min-height: 0 !important;
	}

	li.product,
	.sgcb-product-card {
		padding: 10px !important;
	}
}

li.product:hover,
.sgcb-product-card:hover {
	border-color: var(--sgcb-color-primary-light);
	box-shadow: var(--sgcb-shadow-md);
	transform: translateY(-3px);
}

.sgcb-product-card__link {
	display: block;
	color: inherit;
}

li.product img,
.sgcb-product-card__image img {
	border-radius: var(--sgcb-radius-sm);
	aspect-ratio: 1 / 1;
	/* WooCommerce always prints real width/height attributes on this img,
	   taken from the source photo's actual proportions (this shop's
	   "woocommerce_thumbnail" size is not hard-cropped, so a portrait
	   bottle shot gets e.g. height="600" while a square jug shot gets
	   height="300"). Browsers turn those attributes into an implicit
	   `height` the same way an inline style would, and that implicit
	   height wins over `aspect-ratio` above because nothing here
	   overrode it — so every card's image box was silently taking on its
	   own product photo's native aspect ratio instead of the intended
	   square, and everything below it (title/price/button/SKU) landed at
	   a different vertical position from card to card. `height: auto`
	   removes that implicit height so `aspect-ratio: 1/1` is what
	   actually sizes the box, on every product regardless of its source
	   photo's shape. */
	height: auto;
	/* `contain` (not `cover`) so the whole product photo always shows —
	   `cover` was cropping tightly into whichever part of the image
	   happened to sit at the center, which for a wide product photo (e.g.
	   a box + bottle side by side) meant showing only a thin sliver of it
	   instead of the full product shot. White (not the alternating-section
	   grey) so the image never reads as if it's sitting in its own grey
	   box inside the white card. */
	object-fit: contain;
	background: var(--sgcb-color-bg);
	width: 100%;
	padding: 10px;
	margin-bottom: 12px;
	transition: transform var(--sgcb-transition-fast);
	box-sizing: border-box;
}

.sgcb-product-card__image {
	position: relative;
	overflow: hidden;
	border-radius: var(--sgcb-radius-sm);
}

/* Subtle image zoom on hover, on top of the existing card-level lift
   (li.product:hover / .sgcb-product-card:hover above). Clipped by
   .sgcb-product-card__image's overflow: hidden so the zoom stays inside
   the card's rounded corners instead of spilling over neighbours. */
li.product:hover img,
.sgcb-product-card:hover .sgcb-product-card__image img {
	transform: scale(1.03);
}

/* Mobile-only image sizing (phones, ≤599px). Previously this dropped the
   forced 1:1 aspect-ratio so wide "jug + bottle" shots wouldn't get
   letterboxed — but that meant image heights (and therefore title/price/
   button start position) could differ between cards in the same row,
   which read as broken alignment. Client decision (2026-07-20): keep the
   same forced square + object-fit: contain as desktop, so every card
   aligns perfectly; wide photos will show white bars above/below inside
   their square box instead of varying the card height. Only padding/
   margin stay mobile-specific here; aspect-ratio/height are inherited
   from the shared desktop rule above (li.product img, .sgcb-product-card__image img). */
@media (max-width: 599px) {
	li.product img,
	.sgcb-product-card__image img {
		padding: 6px;
		margin-bottom: 8px;
	}
}

.woocommerce-loop-product__title,
.sgcb-product-card__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
	margin: 0 0 10px;
	/* min-height reserves 4 lines' worth so every card in a row is the
	   same height whether its title is short or long. */
	min-height: calc(1.4em * 4) !important;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: break-word;
	word-break: break-word;
}

.sgcb-product-card:hover .sgcb-product-card__title {
	color: var(--sgcb-color-primary);
}

/* Grid cards are too narrow for a description line — this only shows up
   in list view (see the .is-list-view rule further down this file), which
   has the horizontal room for it. */
.sgcb-product-card__desc {
	display: none;
}

.price,
.sgcb-product-card__price {
	font-family: var(--sgcb-font-heading);
	font-size: 14px;
	font-weight: 700;
	color: var(--sgcb-color-primary);
	white-space: nowrap;
}

.price del {
	color: var(--sgcb-color-text-muted);
	font-weight: 400;
	margin-right: 8px;
}

.price ins {
	text-decoration: none;
}

/* Card price: deliberately un-styled as a container (no pill background/
   radius) — the "brutalist" treatment lives on the .sgcb-product-card__price
   ins/del children below instead, so the sale price reads as a stamped,
   hard-edged tag rather than a soft rounded chip. Client decision
   (2026-07-20): replace the pastel pill look; (2026-07-20, revised): first
   pass used a bright color fill + offset drop-shadow, which read as a
   playful game-UI button rather than brutalist — dropped the shadow and
   the color fill in favor of flat black/white and zero radius, which is
   the harder, more serious end of the style. */
.sgcb-product-card__price {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}

/* The sale/current price: plain bold black text, no fill, no border —
   client decision (2026-07-20): drop the solid block background entirely. */
.sgcb-product-card__price ins {
	display: inline-flex;
	align-items: center;
	color: var(--sgcb-color-text);
	letter-spacing: 0.01em;
	text-decoration: none;
}

/* The old/regular price sits plain outside the tag — muted, crossed out,
   no background of its own, so it visually reads as "discarded" next to
   the bold block. */
.sgcb-product-card__price del {
	color: var(--sgcb-color-text-muted);
	font-weight: 500;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Sale price (2026-07-20, client-requested layout): old price + a "-XX%"
   badge stacked above the bold new price, instead of the flat side-by-side
   del/ins pair above. Only applied when content-product.php has computed a
   real discount percentage — every other price (no sale, price ranges,
   "Цена по запросу") keeps the plain layout untouched. */
.sgcb-product-card__price--sale {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.sgcb-product-card__price-top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sgcb-product-card__price--sale del {
	margin-right: 0;
}

.sgcb-product-card__price--sale ins {
	font-size: 15px;
	font-weight: 800;
}

/* Discount percent badge — brand blue fill (client decision 2026-07-20:
   blue, not the red/orange used in the reference screenshot). */
.sgcb-product-card__discount {
	display: inline-flex;
	align-items: center;
	padding: 2px 6px;
	background: var(--sgcb-color-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	border-radius: 4px;
	white-space: nowrap;
}

/* No sale — single price, no ins/del markup at all. Same flat, square-
   cornered system: a plain 1px outline, no fill, no shadow. */
.sgcb-product-card__price--on-request {
	display: inline-flex;
	padding: 3px 10px;
	background: none;
	color: var(--sgcb-color-text-muted);
	font-weight: 700;
	border: 1px solid var(--sgcb-color-text);
	border-radius: 0;
}

/* Card grid is 2 columns at ≤599px (see the max-width:599px block
   further down), which leaves narrow cards where the regular + sale
   price tag can outgrow its row. Shrink it slightly, and let it wrap
   instead of overflowing when long (7-digit) prices don't fit on one
   line — see the max-width:599px and max-width:380px blocks below. */
@media (max-width: 599px) {
	.sgcb-product-card__price {
		font-size: 11px;
		flex-wrap: wrap;
		max-width: 100%;
		row-gap: 4px;
	}

	.sgcb-product-card__price ins {
		white-space: nowrap;
	}

	.sgcb-product-card__price del {
		white-space: nowrap;
	}

	.sgcb-product-card__price--sale ins {
		font-size: 13px;
	}

	.sgcb-product-card__discount {
		font-size: 9px;
		padding: 1px 5px;
	}
}

/* Even narrower phones (2-column grid gets tight below ~380px) — once a
   7-digit sale price plus its crossed-out regular price no longer both
   fit on one line, stack them so each price stays intact and readable
   rather than wrapping mid-number. */
@media (max-width: 380px) {
	.sgcb-product-card__price {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
	}
}

/* --- Stock status + price row, "В Корзину" button, SKU ---
   .sgcb-product-card__actions (the wrapper around meta + cart-btn + sku)
   gets margin-top: auto so the whole group sinks to the bottom of the
   card. Since every card in a grid row is stretched to the same height
   (default CSS Grid behaviour), this keeps the buttons flush along one
   shared baseline no matter how many lines a given title wrapped to. */

.sgcb-product-card__actions {
	margin: auto 0 0;
}

.sgcb-product-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 8px;
	margin: 0 0 10px;
}

.sgcb-product-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
}

.sgcb-product-card__stock svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}

.sgcb-product-card__stock--in {
	color: var(--sgcb-color-badge-new);
}

.sgcb-product-card__stock--out {
	color: var(--sgcb-color-text-muted);
}

.sgcb-product-card__cart-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 12px;
	border-radius: var(--sgcb-radius-sm);
	background: var(--sgcb-color-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	transition: background var(--sgcb-transition-fast), transform var(--sgcb-transition-fast);
}

.sgcb-product-card__cart-btn svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.sgcb-product-card__cart-btn:hover {
	background: var(--sgcb-color-primary-dark);
}

.sgcb-product-card__cart-btn:active {
	transform: scale(0.98);
}

.sgcb-product-card__cart-btn.is-added {
	background: var(--sgcb-color-whatsapp);
}

/* Swap icon + label (not just background) so "added" feedback is legible,
   not just a color flash — .is-added stays on for as long as the product
   is in the cart (cart.js syncAddButtons), toggling off if it's removed. */
.sgcb-product-card__cart-btn-icon--added,
.sgcb-product-card__cart-btn-label--added {
	display: none;
}

.sgcb-product-card__cart-btn.is-added .sgcb-product-card__cart-btn-icon--default,
.sgcb-product-card__cart-btn.is-added .sgcb-product-card__cart-btn-label--default {
	display: none;
}

.sgcb-product-card__cart-btn.is-added .sgcb-product-card__cart-btn-icon--added,
.sgcb-product-card__cart-btn.is-added .sgcb-product-card__cart-btn-label--added {
	display: inline-flex;
}

/* Shared row for the SKU (left) + view counter (right). Carries the
   divider/spacing that used to live on .sgcb-product-card__sku directly,
   now that sku has a flex sibling instead of being the only thing on
   this line — see content-product.php's ob_start() comment for why this
   whole row is skipped when neither piece has anything to show. */
.sgcb-product-card__footer {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--sgcb-color-border);
}

.sgcb-product-card__sku {
	min-width: 0;
	flex: 1 1 auto;
	font-size: 11px;
	color: var(--sgcb-color-text-muted);
	/* A long SKU (e.g. several codes joined by "&") used to wrap onto 2-3
	   lines. CSS Grid stretches every card in a row to match the tallest
	   one, so that single long SKU was inflating every other card in the
	   same row too, pushing their (deliberately bottom-anchored) meta/
	   button block down and leaving a big empty gap — the "stretched and
	   long" cards. Truncating to one line here keeps every card's natural
	   height consistent regardless of SKU length. Full value still reads
	   via the title="" tooltip added in content-product.php. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sgcb-product-card__views {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 4px;
	margin-left: auto;
	font-size: 11px;
	color: var(--sgcb-color-text-muted);
	white-space: nowrap;
}

.sgcb-product-card__views svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
}

/* --- List view (toggled by the catalog toolbar's grid/list buttons,
   assets/js/filters.js) --- one column, image on the left, details on the
   right, instead of the stacked grid card. Only affects the catalog
   results grid, not homepage rows/carousels.

   Needs !important and the extra `ul.products[class*="columns-"]` selector
   to actually beat section 1's own "Beat WooCommerce's own plugin
   stylesheet" block above (`grid-template-columns: repeat(4, 1fr)
   !important` at 960px+) — without matching both its !important and its
   selector shape (element + two classes/attributes), list view silently
   lost to that rule and stayed stuck at 4 columns. */
.sgcb-catalog__results.is-list-view .products,
.sgcb-catalog__results.is-list-view ul.products[class*="columns-"] {
	grid-template-columns: 1fr !important;
}

.sgcb-catalog__results.is-list-view .sgcb-product-card {
	display: grid;
	/* Image column bumped 170px -> 240px so the photo actually reads as the
	   card's focal point (matching the reference layout) instead of a
	   small thumbnail lost in a wide row. minmax(0, 1fr) instead of plain
	   1fr stops the text column from being forced wider than the space
	   actually available (the same grid-blowout risk as the category
	   sidebar above), and title/desc below also get an explicit max-width
	   so on very wide screens the text still wraps into a tidy paragraph
	   instead of stretching into one sparse, near-full-width line. */
	grid-template-columns: 240px minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	padding: 20px;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius);
}

/* NOTE: without grid-column here, .sgcb-product-card__link (which wraps
   BOTH the image and the title) auto-places as a single grid item into the
   parent's first track only (170px) — the title then has to fit inside
   that 170px column too, which crushed it down to nothing and left column
   2 (1fr) sitting empty. It needs to span both the image and title tracks
   so the title actually gets the 1fr column the parent grid reserved for
   it — this is why the product name looked missing in list view. */
.sgcb-catalog__results.is-list-view .sgcb-product-card__link {
	display: grid;
	grid-column: 1 / 3;
	grid-template-columns: 240px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: start;
	gap: 6px 24px;
}

.sgcb-catalog__results.is-list-view .sgcb-product-card__title {
	/* Grid view clamps to 3 lines at 14px with a fixed min-height so
	   equal-height cards line up; list view has a full row of vertical
	   room and a wide text column, so it's sized up and no longer needs
	   that fixed min-height. max-width caps the line length itself — the
	   grid column can still be very wide on a large screen, but text past
	   ~65 characters/line gets hard to read, and letting it run the full
	   column width was what made the row look sparse/unbalanced. */
	grid-column: 2;
	grid-row: 1;
	min-height: 0;
	margin: 0;
	max-width: 560px;
	-webkit-line-clamp: 3;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.sgcb-catalog__results.is-list-view .sgcb-product-card__desc {
	grid-column: 2;
	grid-row: 2;
	max-width: 560px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sgcb-color-text-muted);
	/* Clamped to 4 lines so every card in the list is the same height
	   regardless of how long that product's description happens to be —
	   letting it run free (previous version) made row heights vary card to
	   card. min-height reserves that same 4-line block even when the
	   description is short (or, now that content-product.php always falls
	   back to the full description, effectively never empty) so a short
	   description doesn't leave its row shorter than its neighbours. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.5em * 4);
}

.sgcb-catalog__results.is-list-view .sgcb-product-card__image {
	grid-column: 1;
	grid-row: 1 / 3;
	width: 240px;
	height: 240px;
	/* Grid view's img rule (further up this file) sets aspect-ratio: 1/1
	   and margin-bottom: 12px, both meant for a photo stacked ABOVE the
	   title. In list view the photo sits beside the title in a fixed-
	   height box instead, so that aspect-ratio fought the fixed height
	   (shrinking the image well short of the box) and that margin-bottom
	   pushed it toward the top instead of centering it — this centers it
	   properly and lets it fill the enlarged box. */
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	padding: 8px;
	box-sizing: border-box;
}

.sgcb-catalog__results.is-list-view .sgcb-product-card__image img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	margin-bottom: 0;
	padding: 0;
}

/* .sgcb-product-card__actions wraps meta + cart-btn + sku as ONE grid cell
   (grid-column: 3, single row) instead of the three of them each claiming
   their own grid-row inside column 3. Splitting them across 3 separate
   rows made those rows part of the shared grid track, so the image+title
   column (which only ever occupied row 1) ended visibly shorter than the
   actions column — the image stopped ~240px down while the button and SKU
   line kept going, leaving a gap under the photo. Now that the three are
   a single item, the card grid's own `align-items: center` (set above)
   centers the whole actions block against the image+title block instead
   of pinning it to row 1's height. */
.sgcb-catalog__results.is-list-view .sgcb-product-card__actions {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	margin: 0;
}

.sgcb-catalog__results.is-list-view .sgcb-product-card__meta {
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}

/* Price reads as a large, bold headline figure here (matching the
   reference layout) instead of the small rounded pill grid view uses —
   grid cards are narrow enough that the pill treatment keeps the price
   compact, but list view has the room to make it the visual anchor of the
   right-hand column. */
.sgcb-catalog__results.is-list-view .sgcb-product-card__price {
	display: block;
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: 26px;
	font-weight: 800;
	color: var(--sgcb-color-primary);
}

.sgcb-catalog__results.is-list-view .sgcb-product-card__price--on-request {
	display: inline-flex;
	background: var(--sgcb-color-bg-alt);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sgcb-color-text-muted);
}

.sgcb-catalog__results.is-list-view .sgcb-product-card__cart-btn {
	width: auto;
	min-width: 190px;
	padding: 14px 22px;
	font-size: 14px;
}

.sgcb-catalog__results.is-list-view .sgcb-product-card__footer {
	margin-top: 0;
}

@media (max-width: 599px) {
	.sgcb-catalog__results.is-list-view .sgcb-product-card {
		grid-template-columns: 132px 1fr;
		gap: 14px;
		padding: 14px;
	}

	.sgcb-catalog__results.is-list-view .sgcb-product-card__link {
		grid-template-columns: 132px 1fr;
		grid-template-rows: auto;
		grid-row: 1;
		gap: 14px;
	}

	/* Desktop's image spans 2 internal rows (title + description) so it can
	   sit centered alongside both. On mobile the description is hidden
	   (rule below) but that row was still being reserved to fit the image,
	   leaving a tall blank gap between the title and the stock/price block
	   underneath. Un-spanning it to row 1 only removes that dead space. */
	.sgcb-catalog__results.is-list-view .sgcb-product-card__image {
		grid-row: 1;
		width: 132px;
		height: 132px;
	}

	.sgcb-catalog__results.is-list-view .sgcb-product-card__title {
		font-size: 15px;
	}

	.sgcb-catalog__results.is-list-view .sgcb-product-card__desc {
		display: none;
	}

	.sgcb-catalog__results.is-list-view .sgcb-product-card__cart-btn {
		min-width: 0;
		width: 100%;
		padding: 12px 16px;
	}

	/* Actions (stock/price + button + SKU) now span the FULL card width on
	   their own row below the image+title header, instead of being
	   squeezed into the 1fr title column only (grid-column: 2). That
	   squeeze left the whole 132px image column empty underneath the
	   photo and crushed the price/button down to a narrow strip — this
	   spans both columns instead, matching the reference card, which puts
	   price and the CTA button across the card's full width beneath a
	   compact image+title header row. */
	.sgcb-catalog__results.is-list-view .sgcb-product-card__actions {
		grid-column: 1 / 3;
		grid-row: 2;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		margin: 4px 0 0;
		padding-top: 14px;
		border-top: 1px solid var(--sgcb-color-border);
	}

	.sgcb-catalog__results.is-list-view .sgcb-product-card__meta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}

	.sgcb-catalog__results.is-list-view .sgcb-product-card__price {
		font-size: 22px;
	}

	/* No text-align override needed here anymore: .sgcb-product-card__footer
	   is a flex row now (stretched full-width by the actions column's
	   align-items: stretch above), so sku sits at the start and
	   .sgcb-product-card__views' margin-left: auto pushes it to the end —
	   the same left/right split as grid view, without any extra CSS. */
}

/* ==========================================================================
   2. Product badges (Хит продаж / Новинка)
   ========================================================================== */

.sgcb-product-badges {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sgcb-product-badges__badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 4px 8px;
	border-radius: 4px;
	color: #fff;
}

.sgcb-product-badges__badge--bestseller {
	background: var(--sgcb-color-badge-bestseller);
}

.sgcb-product-badges__badge--new {
	background: var(--sgcb-color-badge-new);
}

/* Single-product page renders badges inline, above the title, not
   absolutely positioned over an image. */
.sgcb-single-product__summary .sgcb-product-badges {
	position: static;
	flex-direction: row;
	margin-bottom: 12px;
}

/* ==========================================================================
   3. Single product page
   ========================================================================== */

.sgcb-single-product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

/* CSS Grid tracks default to a min-width of "auto" (their content's
   min-content size), not 0 — so any single child with an intrinsically
   wide box (most often a title/spec value containing one long unbroken
   word, since browsers only wrap at whitespace by default) silently
   forces the shared 1fr column wider than the viewport on mobile. Every
   section here (.gallery, .summary, and the specs/features/scenarios/FAQ
   blocks appended after them — see content-single-product.php) sits in
   that same single column below 900px, so the overflow shows up on the
   whole page, not just the section that caused it, and only on products
   whose title/specs happen to contain a long-enough word to trigger it.
   Same fix already used for an analogous flex-row overflow above, see
   .sgcb-home-hero__carousel's min-width: 0. */
.sgcb-single-product > * {
	min-width: 0;
}

.sgcb-single-product__gallery {
	position: relative;
}

.woocommerce-product-gallery {
	position: relative;
	border-radius: var(--sgcb-radius);
}

/* WooCommerce's default sale flash ("Sale!") — previously rendered as
   raw unstyled text above the gallery and, worse, counted as its own
   grid child (see content-single-product.php), which pushed the
   summary column out of place. Now that it's wrapped inside
   .sgcb-single-product__gallery alongside the gallery, style it as a
   small ribbon badge over the top-left corner of the product photo. */
.onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	margin: 0;
	background: var(--sgcb-color-badge-sale);
	color: #fff;
	font-family: var(--sgcb-font-heading);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 8px 14px;
	border-radius: var(--sgcb-radius-sm);
	pointer-events: none;
}

/* Gallery zoom trigger — previously the raw 🔍 glyph rendered inline
   as plain text. Style it as a small circular icon button in the
   top-right corner of the image, matching the site's card/badge
   language. */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--sgcb-color-bg);
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	color: var(--sgcb-color-primary);
	text-decoration: none;
	transition: background var(--sgcb-transition);
	/* WooCommerce prints its own 🔍 emoji as this link's text content —
	   hide that glyph and draw a clean line-style search icon instead,
	   matching the SVG icon language used elsewhere (e.g. the catalog
	   grid/list toggle in inc/woocommerce-hooks.php). currentColor via
	   mask-image keeps it themeable through the existing color token. */
	font-size: 0;
}

.woocommerce-product-gallery__trigger::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16' y2='16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16' y2='16'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.woocommerce-product-gallery__trigger:hover {
	background: var(--sgcb-color-primary-light);
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border-radius: var(--sgcb-radius);
	position: relative;
}

/* Safety net: only ever show the first product photo in the main image
   area by default — same principle as flexslider's own core CSS
   (".slides > li { display: none } .slides > li:first-child { display:
   block }"), applied to WooCommerce's actual gallery markup. Without
   this, every image assigned to a product renders in normal document
   flow, one after another (which is what was showing two full-size
   photos side by side instead of one photo + a thumbnail strip below).
   Once WooCommerce's gallery/slider script initializes, its own
   JS-driven show/hide of the active slide takes over from here. */
.woocommerce-product-gallery__image {
	display: none;
}

.woocommerce-product-gallery__image:first-child {
	display: block;
}

/* Cap how much vertical space the main product photo can take. Some
   product photos (e.g. tall storage cabinets) are much taller than
   wide, and a plain "width: 100%; height: auto" scales those to a huge
   on-page height on every screen size. max-height + width:auto keeps
   the image's own aspect ratio (no cropping, no distortion) but stops
   it from growing past a sane height; margin auto re-centers it in the
   gallery column for images that end up narrower than the column as a
   result. Mobile gets a lower cap since the gallery column is also the
   full viewport width there (single-column layout below 900px, see
   the "@media (min-width: 900px)" rule further down this file). */
.woocommerce-product-gallery__image img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 420px;
	display: block;
	margin: 0 auto;
	border-radius: var(--sgcb-radius);
}

@media (min-width: 900px) {
	.woocommerce-product-gallery__image img {
		max-height: 560px;
	}
}

/* Product photos with a transparent background (PNG cutouts) need a
   solid canvas behind them everywhere the zoom feature can render
   them — otherwise the see-through areas fall through to whatever
   happens to be behind the image at that moment instead of looking
   like a clean product shot. This covers both zoom paths WooCommerce
   ships: the desktop hover-zoom (jquery.zoom draws its magnified copy
   as a plain `.zoomImg` element — background-image only, no
   background-color of its own) and the click-to-open PhotoSwipe
   lightbox (`.pswp__bg` is its full-screen backdrop, black by
   default). Forcing both to the site's white so only the product
   image itself is visible, on a plain white field, in either case. */
.woocommerce-product-gallery__wrapper,
.zoomImg {
	background-color: var(--sgcb-color-bg);
}

.pswp__bg {
	background-color: var(--sgcb-color-bg) !important;
}

/* Thumbnail strip below the main photo — one thumbnail per gallery image,
   click/tap to swap the main photo (WooCommerce's own flexslider JS wires
   the click; this just makes the strip visible and usable). The old rule
   above was a blanket ".woocommerce-product-gallery img { width: 100% }"
   that ALSO matched these small thumbnails, blowing each one up to the
   full gallery width — which is why only the single featured photo ever
   showed and the rest of a product's images were effectively invisible. */
.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.flex-control-thumbs li {
	width: 64px;
	flex: 0 0 64px;
}

.flex-control-thumbs img {
	display: block;
	width: 100%;
	height: 64px;
	object-fit: cover;
	border-radius: var(--sgcb-radius-sm);
	cursor: pointer;
	opacity: 0.6;
	border: 2px solid transparent;
	box-sizing: border-box;
	transition: opacity var(--sgcb-transition), border-color var(--sgcb-transition);
}

.flex-control-thumbs img:hover {
	opacity: 1;
}

.flex-control-thumbs .flex-active-slide img {
	opacity: 1;
	border-color: var(--sgcb-color-primary);
}

.sgcb-single-product__summary {
	max-width: 640px;
}

.sgcb-single-product__summary .product_title {
	font-size: 26px;
	margin-bottom: 10px;
	overflow-wrap: break-word;
	word-break: break-word;
	/* main.css's global h1-h6 rule sets text-wrap: balance for nicer
	   2-3 word headings. On product titles that also need break-word
	   (long unbroken Cyrillic compound words like
	   "многофункциональная"), Chrome's balance algorithm doesn't account
	   for the mid-word break points break-word introduces, so it can
	   drop the break-word fallback entirely and let the word overflow
	   the viewport instead. Titles here are longer, full sentences
	   anyway, so balance isn't doing useful work — opt this element back
	   out to the normal wrap so break-word can actually apply. */
	text-wrap: wrap;
}

.sgcb-single-product__summary .price {
	font-size: 24px;
	display: block;
	margin-bottom: 16px;
}

.sgcb-single-product__summary .woocommerce-product-details__short-description {
	color: var(--sgcb-color-text-muted);
	line-height: 1.7;
	margin-bottom: 20px;
}

.sgcb-single-product__summary .stock {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: var(--sgcb-radius-sm);
	background: var(--sgcb-color-bg-alt);
	margin-bottom: 16px;
}

/* Product meta (SKU / Category / Tags) — woocommerce/single-product/meta.php
   theme override wraps each in its own <span class="...">; stack them one
   per line here instead of the default inline run-together layout. */
.sgcb-product-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 16px;
	font-size: 14px;
	color: var(--sgcb-color-text-muted, #666);
}

.sgcb-product-meta > span {
	display: block;
}

.sgcb-single-product__summary .stock.out-of-stock {
	background: #fdeceb;
	color: #c0392b;
}

.sgcb-single-product__summary .variations {
	width: 100%;
	margin-bottom: 16px;
}

.sgcb-single-product__summary .variations td {
	padding: 6px 0;
	display: block;
}

.sgcb-single-product__summary .variations select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
}

.sgcb-single-product .related.products {
	margin-top: 32px;
}

.sgcb-single-product .related.products > h2 {
	font-size: 20px;
	margin-bottom: 16px;
}

@media (min-width: 900px) {
	.sgcb-single-product {
		grid-template-columns: 1fr 1fr;
	}

	/*
	 * Everything printed after the gallery/summary pair (children 1 and
	 * 2 of this grid) — specs table, features block, scenarios, FAQ,
	 * and WooCommerce's own default related-products section — comes
	 * through as further direct children of this same 2-column grid
	 * (see woocommerce/content-single-product.php: they're all hooked
	 * to woocommerce_after_single_product_summary, fired inside
	 * #product-<id> after .summary closes). Without an explicit span,
	 * CSS Grid auto-placement drops each into whichever column has
	 * room next instead of running full width — for related products
	 * specifically, that squeezed its own internal 4-column card grid
	 * down to half the page width, producing badly cramped narrow
	 * cards.
	 *
	 * Targeting this structurally by position (nth-child, 3rd child
	 * onward) rather than by each section's individual class name is
	 * deliberate: a class-list approach silently stops working the
	 * moment any one class doesn't match the actual rendered markup
	 * exactly (a previous version of this rule had that problem) — the
	 * structural version below can't miss, since it doesn't depend on
	 * knowing every class WooCommerce's own uncustomized templates use.
	 */
	.sgcb-single-product > :nth-child(n + 3) {
		grid-column: 1 / -1 !important;
		width: 100% !important;
	}
}

/* --- Catalog-mode CTA ("Заказать в WhatsApp" / "Написать нам") --- */

.sgcb-product-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0;
}

.sgcb-product-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border-radius: var(--sgcb-radius-sm);
	font-weight: 700;
	font-size: 15px;
	transition: background var(--sgcb-transition), transform var(--sgcb-transition);
}

.sgcb-product-cta__button--whatsapp {
	background: var(--sgcb-color-whatsapp);
	color: #fff;
}

.sgcb-product-cta__button--whatsapp:hover {
	background: var(--sgcb-color-whatsapp-dark);
}

.sgcb-product-cta__button--cart {
	background: var(--sgcb-color-primary);
	color: #fff;
}

.sgcb-product-cta__button--cart:hover {
	background: var(--sgcb-color-primary-dark);
}

.sgcb-product-cta__button--cart.is-added {
	background: var(--sgcb-color-whatsapp);
}

.sgcb-product-cta__button-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sgcb-product-cta__button-label--added {
	display: none;
}

.sgcb-product-cta__button--cart.is-added .sgcb-product-cta__button-label--default {
	display: none;
}

.sgcb-product-cta__button--cart.is-added .sgcb-product-cta__button-label--added {
	display: inline-flex;
}

.sgcb-product-cta__button-label--added svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.sgcb-product-cta__cart-row {
	display: flex;
	align-items: stretch;
	gap: 10px;
	width: 100%;
}

/* --- Shared qty stepper (single-product CTA row + cart page rows) --- */

.sgcb-qty-stepper {
	display: flex;
	align-items: center;
	border: 1px solid var(--sgcb-color-border);
	border-radius: var(--sgcb-radius-sm);
	overflow: hidden;
}

.sgcb-qty-stepper__btn {
	width: 40px;
	height: 100%;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--sgcb-color-text-muted);
	background: var(--sgcb-color-bg-alt);
	transition: color var(--sgcb-transition-fast), background var(--sgcb-transition-fast);
}

.sgcb-qty-stepper__btn:hover {
	color: var(--sgcb-color-primary);
	background: var(--sgcb-color-primary-light);
}

.sgcb-qty-stepper__input,
.sgcb-qty-stepper__value {
	width: 44px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	border: none;
	background: transparent;
	color: var(--sgcb-color-text);
}

.sgcb-qty-stepper__input::-webkit-outer-spin-button,
.sgcb-qty-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sgcb-qty-stepper__input {
	-moz-appearance: textfield;
}

.sgcb-product-cta__button--contact {
	background: transparent;
	border: 1px solid var(--sgcb-color-border);
	color: var(--sgcb-color-text);
}

.sgcb-product-cta__button--contact:hover {
	border-color: var(--sgcb-color-primary);
	color: var(--sgcb-color-primary);
}

/* Press feedback on every CTA button (both variants) — there's no real
   add-to-cart in catalog mode, so this + the loading state just below are
   this theme's equivalent of an add-to-cart button's hover/active states. */
.sgcb-product-cta__button:active {
	transform: scale(0.97);
}

/* Brief loading state, toggled by assets/js/main.js for ~500ms right after
   a tap/click — WhatsApp buttons navigate via target="_blank", which on
   slower mobile connections can take a moment to actually switch apps;
   this gives immediate visual confirmation the tap registered instead of
   the button looking inert while the OS hands off to WhatsApp. */
.sgcb-product-cta__button.is-loading {
	color: transparent;
	pointer-events: none;
	position: relative;
}

.sgcb-product-cta__button.is-loading::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: sgcb-spin 0.6s linear infinite;
}

.sgcb-product-cta__button--contact.is-loading::after {
	border-color: rgba(26, 47, 143, 0.25);
	border-top-color: var(--sgcb-color-primary);
}

.sgcb-product-cta__hint {
	width: 100%;
	font-size: 13px;
	color: var(--sgcb-color-text-muted);
}

/* Small phones: two buttons side by side ("Заказать в WhatsApp" /
   "Написать нам") get tight fast on ~360px screens with Cyrillic text.
   Stack full-width instead of letting the label wrap inside the button. */
@media (max-width: 380px) {
	.sgcb-product-cta__button {
		flex: 1 1 100%;
	}
}

/* --- Video block (renders first among after-summary sections, see
   woocommerce/content-single-product.php priority 14) --- */

.sgcb-product-video {
	margin-top: 40px;
}

.sgcb-product-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
	background: var(--sgcb-color-bg-dark);
	border: 1px solid var(--sgcb-color-border);
	box-shadow: var(--sgcb-shadow-md);
}

.sgcb-product-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Custom poster + play button, replacing YouTube's own embed
   thumbnail (channel avatar, title overlay, "Смотреть на YouTube"
   pill) with something that matches the rest of the page. The real
   player only loads once this is clicked — see initProductVideoFacade()
   in assets/js/main.js. */
.sgcb-product-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.sgcb-product-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sgcb-transition), filter var(--sgcb-transition);
}

/* Bottom-up scrim so the play button stays legible over bright
   thumbnails without darkening the whole frame like a YouTube
   overlay does. */
.sgcb-product-video__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(14, 21, 48, 0.5) 0%, rgba(14, 21, 48, 0) 45%);
	pointer-events: none;
}

.sgcb-product-video__play:hover .sgcb-product-video__poster,
.sgcb-product-video__play:focus-visible .sgcb-product-video__poster {
	transform: scale(1.04);
	filter: brightness(0.85);
}

.sgcb-product-video__play-icon {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--sgcb-color-primary);
	box-shadow: 0 8px 24px rgba(26, 47, 143, 0.45);
	transition: transform var(--sgcb-transition), background var(--sgcb-transition);
}

.sgcb-product-video__play:hover .sgcb-product-video__play-icon,
.sgcb-product-video__play:focus-visible .sgcb-product-video__play-icon {
	background: var(--sgcb-color-primary-dark);
	transform: scale(1.08);
}

.sgcb-product-video__play-icon svg {
	width: 22px;
	height: 22px;
	margin-left: 3px; /* optical centering: a triangle's visual weight sits left of its bounding box */
	fill: #fff;
}

/* Quiet pulsing ring, purely decorative — skipped under reduced motion. */
.sgcb-product-video__play-icon::before {
	content: "";
	position: absolute;
	inset: -8px;
	border: 2px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	animation: sgcb-video-pulse 2.2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.sgcb-product-video__play-icon::before {
		animation: none;
	}
}

@keyframes sgcb-video-pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.8;
	}
	100% {
		transform: scale(1.35);
		opacity: 0;
	}
}

.sgcb-product-video__play:focus-visible {
	outline: 3px solid var(--sgcb-color-primary);
	outline-offset: 4px;
}

@media (min-width: 700px) {
	.sgcb-product-video__play-icon {
		width: 88px;
		height: 88px;
	}

	.sgcb-product-video__play-icon svg {
		width: 32px;
		height: 32px;
	}
}

/* Selector strip — only rendered when a product has 2+ videos (see
   video-block.php). One big player above, small clickable thumbnails
   below to switch what's loaded into it; avoids the old approach of
   giving every video its own full-size frame, which got unwieldy fast
   once a product had more than 2-3 clips. */
.sgcb-product-video__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.sgcb-product-video__tab {
	position: relative;
	display: block;
	width: 84px;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	background: var(--sgcb-color-bg-alt);
	border: 2px solid transparent;
	opacity: 0.7;
	transition: opacity var(--sgcb-transition), border-color var(--sgcb-transition), transform var(--sgcb-transition);
}

.sgcb-product-video__tab:hover {
	opacity: 1;
	transform: translateY(-2px);
}

.sgcb-product-video__tab.is-active {
	opacity: 1;
	border-color: var(--sgcb-color-primary);
	box-shadow: var(--sgcb-shadow);
}

.sgcb-product-video__tab:focus-visible {
	opacity: 1;
	outline: 2px solid var(--sgcb-color-primary);
	outline-offset: 2px;
}

.sgcb-product-video__tab-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgcb-product-video__tab-index {
	position: absolute;
	top: 4px;
	left: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: rgba(14, 21, 48, 0.72);
	border-radius: 9px;
}

@media (min-width: 700px) {
	.sgcb-product-video__tab {
		width: 112px;
	}
}

/* --- Specs table --- */

.sgcb-product-specs {
	margin-top: 32px;
}

.sgcb-product-specs__heading,
.sgcb-product-features__heading,
.sgcb-product-scenarios__heading,
.sgcb-product-faq__heading,
.sgcb-product-video__heading {
	font-size: 20px;
	margin-bottom: 16px;
}

.sgcb-product-specs__table {
	width: 100%;
	max-width: 900px;
	border-collapse: separate;
	border-spacing: 0;
}

.sgcb-product-specs {
	background: #fff;
	border: 1px solid var(--sgcb-color-border);
	border-radius: 14px;
	padding: clamp(14px, 2.4vw, 20px);
	box-shadow: 0 12px 28px rgba(20, 25, 60, 0.04);
}

.sgcb-product-specs__table {
	margin: 0;
}

.sgcb-product-specs__row {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 18px;
	padding: 12px 8px;
	align-items: start;
	border-bottom: 1px solid var(--sgcb-color-border);
}

.sgcb-product-specs__row:last-child {
	border-bottom: none;
}

.sgcb-product-specs__label,
.sgcb-product-specs__value {
	text-align: left;
	padding: 0;
	font-size: 14px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.sgcb-product-specs__label {
	color: var(--sgcb-color-text-muted);
	font-weight: 600;
	width: auto;
}

.sgcb-product-specs__value {
	color: var(--sgcb-color-text);
}

@media (max-width: 767px) {
	.sgcb-product-specs__row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 10px 8px;
	}

	.sgcb-product-specs__label {
		font-size: 13px;
	}

	.sgcb-product-specs__value {
		font-size: 14px;
	}
}

/* --- Features block --- */

.sgcb-product-features {
	margin-top: 40px;
}

.sgcb-product-features__list {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
}

.sgcb-product-features__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
	border: 1px solid var(--sgcb-color-border);
	border-radius: 18px;
	box-shadow: 0 12px 28px rgba(20, 25, 60, 0.08);
	transition: transform var(--sgcb-transition-slow), box-shadow var(--sgcb-transition-slow), border-color var(--sgcb-transition-slow);
}

.sgcb-product-features__item:hover {
	transform: translateY(-2px);
	border-color: rgba(26, 47, 143, 0.18);
	box-shadow: 0 18px 36px rgba(20, 25, 60, 0.12);
}

.sgcb-product-features__bullets,
.sgcb-product-scenarios__bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.sgcb-product-features__bullet,
.sgcb-product-scenarios__bullet {
	position: relative;
	padding-left: 20px;
	color: var(--sgcb-color-text-muted);
	line-height: 1.7;
	font-size: 15px;
}

.sgcb-product-features__bullet::before,
.sgcb-product-scenarios__bullet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--sgcb-color-primary);
	transform: translateY(-50%);
}

.sgcb-product-features__image {
	display: block;
	width: auto;
	max-width: min(100%, 460px);
	height: auto;
	max-height: clamp(220px, 42vw, 320px);
	object-fit: contain;
	border-radius: 14px;
	box-shadow: 0 10px 26px rgba(20, 25, 60, 0.12);
}

.sgcb-product-features__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 3vw, 32px);
	border-top: 1px solid rgba(26, 47, 143, 0.08);
	border-left: 4px solid var(--sgcb-color-primary);
}

.sgcb-product-features__item-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 12px;
	margin: 0;
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.22;
}

.sgcb-product-features__item-index {
	flex: 0 0 auto;
	font-family: var(--sgcb-font-heading);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--sgcb-color-primary);
	background: rgba(26, 47, 143, 0.08);
	border-radius: 999px;
	padding: 6px 10px;
}

.sgcb-product-features__item-text {
	margin: 0;
	font-size: 15px;
	color: var(--sgcb-color-text-muted);
	line-height: 1.7;
}

.sgcb-product-features__bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.sgcb-product-features__bullet {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	color: var(--sgcb-color-text-muted);
	line-height: 1.7;
}

.sgcb-product-features__bullet + .sgcb-product-features__bullet {
	margin-top: 0;
}

.sgcb-product-features__bullet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 9px;
	height: 9px;
	border-radius: 3px;
	background: var(--sgcb-color-primary);
	transform: translateY(-50%);
}

.sgcb-product-features__item--no-media .sgcb-product-features__body {
	border-top: none;
	border-left-width: 4px;
}

/* media-only feature: show a larger centered image and hide empty body */
.sgcb-product-features__item--media-only .sgcb-product-features__body {
	display: none;
}

.sgcb-product-features__item--media-only .sgcb-product-features__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(20px, 3vw, 34px);
}

.sgcb-product-features__item--media-only .sgcb-product-features__image {
	max-width: 88%;
	max-height: none;
	object-fit: contain;
}

.sgcb-product-features__item--media-only .sgcb-product-features__gallery {
	max-width: 520px;
	margin: 0 auto;
}

/* Feature slots with 2+ photos (Фото 1–6 in ACF) render as a clickable
   thumbnail grid instead of one large image — each tile opens the
   full-size photo in a new tab, no lightbox dependency needed. */
.sgcb-product-features__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	width: 100%;
}

.sgcb-product-features__gallery-item {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 6px 16px rgba(20, 25, 60, 0.1);
}

.sgcb-product-features__gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sgcb-transition-fast);
}

.sgcb-product-features__gallery-item:hover .sgcb-product-features__gallery-image,
.sgcb-product-features__gallery-item:focus-visible .sgcb-product-features__gallery-image {
	transform: scale(1.06);
}

@media (min-width: 768px) {
	.sgcb-product-features__item {
		grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
	}

	.sgcb-product-features__item--reverse {
		grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
	}

	.sgcb-product-features__item--reverse .sgcb-product-features__media {
		order: 2;
		border-bottom: none;
		border-left: 1px solid var(--sgcb-color-border);
	}

	.sgcb-product-features__item--reverse .sgcb-product-features__body {
		order: 1;
		border-left: none;
		border-right: 3px solid var(--sgcb-color-primary);
	}

	.sgcb-product-features__media {
		border-bottom: none;
		border-right: 1px solid var(--sgcb-color-border);
		min-height: 100%;
	}

	.sgcb-product-features__body {
		border-top: none;
	}

	.sgcb-product-features__image {
		max-width: 100%;
		max-height: clamp(260px, 30vw, 420px);
	}

	.sgcb-product-features__item--no-media {
		grid-template-columns: 1fr;
	}

	.sgcb-product-features__item--no-media .sgcb-product-features__body {
		border-left: 3px solid var(--sgcb-color-primary);
		border-right: none;
	}
}

@media (min-width: 960px) {
	.sgcb-product-features {
		margin-top: 40px;
	}

	.sgcb-product-features__item-heading {
		font-size: 19px;
	}

	.sgcb-product-features__item-text,
	.sgcb-product-features__bullet {
		font-size: 15px;
	}

	.sgcb-product-features__media {
		padding: clamp(22px, 2.8vw, 34px);
	}

	.sgcb-product-features__body {
		padding: clamp(24px, 3vw, 36px);
	}
}

@media (max-width: 767px) {
	.sgcb-product-features {
		margin-top: 24px;
	}

	.sgcb-product-features__list {
		gap: 12px;
	}

	.sgcb-product-features__item {
		border-radius: 14px;
		box-shadow: 0 8px 18px rgba(20, 25, 60, 0.07);
	}

	.sgcb-product-features__media {
		min-height: 0;
		aspect-ratio: 16 / 11;
		padding: 12px;
		/* Center media content and ensure consistent sizing on mobile */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sgcb-product-features__media--gallery {
		aspect-ratio: auto;
		display: grid;
		align-items: stretch;
		justify-content: stretch;
	}

	.sgcb-product-features__gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}

	.sgcb-product-features__image {
		max-height: 100%;
		max-width: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		display: block;
	}

	.sgcb-product-features__body {
		gap: 8px;
		padding: 14px 14px 16px;
		border-top-width: 1px;
		border-left-width: 0;
	}

	.sgcb-product-features__item-heading {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		font-size: 16px;
		line-height: 1.15;
	}

	.sgcb-product-features__item-index {
		padding: 4px 8px;
		font-size: 10px;
		letter-spacing: 0.1em;
		line-height: 1;
	}

	.sgcb-product-features__item-title {
		font-size: 17px;
		line-height: 1.18;
	}

	.sgcb-product-features__item-text,
	.sgcb-product-bullet,
	.sgcb-product-features__bullet,
	.sgcb-product-scenarios__bullet {
		font-size: 13px;
		line-height: 1.55;
	}

	.sgcb-product-features__bullets,
	.sgcb-product-scenarios__bullets {
		gap: 7px;
	}

	.sgcb-product-features__bullet,
	.sgcb-product-scenarios__bullet {
		padding-left: 18px;
	}

	.sgcb-product-features__bullet::before,
	.sgcb-product-scenarios__bullet::before {
		width: 7px;
		height: 7px;
		top: 0.7em;
	}
}

/* --- Application scenarios (pure-CSS radio/label tabs) --- */

.sgcb-product-scenarios {
	margin-top: 36px;
	padding: clamp(18px, 3vw, 28px);
	background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
	border: 1px solid var(--sgcb-color-border);
	border-radius: 20px;
	box-shadow: 0 12px 30px rgba(20, 25, 60, 0.08);
}

.sgcb-product-scenarios__heading,
.sgcb-product-faq__heading {
	font-size: clamp(22px, 2.4vw, 30px);
	margin-bottom: 18px;
}

.sgcb-product-scenarios__tab-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px;
	margin-bottom: 18px;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid var(--sgcb-color-border);
	border-radius: 16px;
}

.sgcb-product-scenarios__tab-label {
	padding: 11px 16px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	color: var(--sgcb-color-text-muted);
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: color var(--sgcb-transition-fast), border-color var(--sgcb-transition-fast), background var(--sgcb-transition-fast), box-shadow var(--sgcb-transition-fast);
	background: transparent;
}

.sgcb-product-scenarios__panel {
	display: none;
	grid-template-columns: 1fr;
	gap: 18px;
	align-items: center;
	padding: clamp(14px, 2.5vw, 22px);
	background: #fff;
	border: 1px solid var(--sgcb-color-border);
	border-radius: 18px;
}

.sgcb-product-scenarios__panel-heading {
	font-size: clamp(18px, 2vw, 22px);
	margin-bottom: 8px;
}

.sgcb-product-scenarios__panel-text {
	color: var(--sgcb-color-text-muted);
	line-height: 1.75;
	font-size: 15px;
	margin: 0;
}

.sgcb-product-scenarios__bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.sgcb-product-scenarios__bullet {
	position: relative;
	padding-left: 20px;
	color: var(--sgcb-color-text-muted);
	line-height: 1.7;
	font-size: 15px;
}

.sgcb-product-scenarios__bullet::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--sgcb-color-primary);
	transform: translateY(-50%);
}

.sgcb-product-scenarios__image {
	border-radius: 16px;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: 0 10px 22px rgba(20, 25, 60, 0.10);
}

@media (min-width: 700px) {
	.sgcb-product-scenarios__panel {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		align-items: center;
	}

	.sgcb-product-scenarios__panel-heading,
	.sgcb-product-scenarios__panel-text {
		max-width: 52ch;
	}
}

/* Wiring each radio input to its matching tab label + panel. Static IDs
   (retail/wholesale/customization) — safe because single-product.php
   renders exactly one product per page, per this partial's own docblock. */
#sgcb-product-scenario-tab-retail:checked ~ .sgcb-product-scenarios__tab-list label[for="sgcb-product-scenario-tab-retail"],
#sgcb-product-scenario-tab-wholesale:checked ~ .sgcb-product-scenarios__tab-list label[for="sgcb-product-scenario-tab-wholesale"],
#sgcb-product-scenario-tab-customization:checked ~ .sgcb-product-scenarios__tab-list label[for="sgcb-product-scenario-tab-customization"] {
	color: var(--sgcb-color-primary);
	background: var(--sgcb-color-primary-light);
	border-color: rgba(26, 47, 143, 0.12);
	box-shadow: inset 0 0 0 1px rgba(26, 47, 143, 0.08);
}

#sgcb-product-scenario-tab-retail:checked ~ .sgcb-product-scenarios__panels .sgcb-product-scenarios__panel--retail,
#sgcb-product-scenario-tab-wholesale:checked ~ .sgcb-product-scenarios__panels .sgcb-product-scenarios__panel--wholesale,
#sgcb-product-scenario-tab-customization:checked ~ .sgcb-product-scenarios__panels .sgcb-product-scenarios__panel--customization {
	display: grid;
	/* display:none -> grid can't be transitioned, so this uses a keyframe
	   animation instead — animations (unlike transitions) do run across a
	   display change, since they start once the element is actually
	   painted in its new display state. */
	animation: sgcb-fade-in-up var(--sgcb-transition-slow);
}

/* JS-driven enhancement: keep visual parity when .is-active is toggled
   by JavaScript (fallback for environments where :checked wiring fails). */
.sgcb-product-scenarios__tab-label.is-active {
	color: var(--sgcb-color-primary);
	background: var(--sgcb-color-primary-light);
	border-color: rgba(26, 47, 143, 0.12);
	box-shadow: inset 0 0 0 1px rgba(26, 47, 143, 0.08);
}

.sgcb-product-scenarios__panel.is-active {
	display: grid;
	animation: sgcb-fade-in-up var(--sgcb-transition-slow);
}

.sgcb-product-scenarios__panel--retail,
.sgcb-product-scenarios__panel--customization {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.sgcb-product-scenarios__panel--retail .sgcb-product-scenarios__image,
.sgcb-product-scenarios__panel--customization .sgcb-product-scenarios__image {
	order: 2;
}

.sgcb-product-scenarios__panel--retail .sgcb-product-scenarios__panel-copy,
.sgcb-product-scenarios__panel--customization .sgcb-product-scenarios__panel-copy {
	order: 1;
}

.sgcb-product-scenarios__panel--wholesale .sgcb-product-scenarios__image {
	order: 1;
}

.sgcb-product-scenarios__panel--wholesale .sgcb-product-scenarios__panel-copy {
	order: 2;
}

.sgcb-product-scenarios__panel-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}

@keyframes sgcb-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --- FAQ accordion (native <details>/<summary>) --- */

.sgcb-product-faq {
	margin: 36px 0;
	padding: clamp(18px, 3vw, 28px);
	background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
	border: 1px solid var(--sgcb-color-border);
	border-radius: 20px;
	box-shadow: 0 12px 30px rgba(20, 25, 60, 0.08);
	max-width: 900px;
}

.sgcb-product-faq__item {
	border: 1px solid var(--sgcb-color-border);
	border-radius: 16px;
	background: #fff;
	padding: 0;
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color var(--sgcb-transition-fast), box-shadow var(--sgcb-transition-fast), transform var(--sgcb-transition-fast);
}

.sgcb-product-faq__item:hover {
	border-color: rgba(26, 47, 143, 0.16);
	box-shadow: 0 10px 22px rgba(20, 25, 60, 0.08);
}

.sgcb-product-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	padding: 16px 18px;
	font-size: 16px;
	line-height: 1.4;
}

.sgcb-product-faq__question::-webkit-details-marker {
	display: none;
}

.sgcb-product-faq__question::after {
	content: "+";
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--sgcb-color-primary-light);
	color: var(--sgcb-color-primary);
	font-size: 18px;
	line-height: 1;
}

.sgcb-product-faq__item[open] .sgcb-product-faq__question::after {
	content: "–";
}

.sgcb-product-faq__answer {
	padding: 0 18px 18px;
	color: var(--sgcb-color-text-muted);
	line-height: 1.7;
	font-size: 15px;
	border-top: 1px solid rgba(26, 47, 143, 0.08);
}

.sgcb-product-faq__answer p:first-child {
	margin-top: 14px;
}

@media (max-width: 767px) {
	.sgcb-product-scenarios,
	.sgcb-product-faq {
		padding: 14px;
		border-radius: 16px;
		margin-top: 28px;
	}

	.sgcb-product-scenarios__tab-list {
		display: flex;
		flex-wrap: nowrap;
		padding: 6px;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.sgcb-product-scenarios__tab-list::-webkit-scrollbar {
		display: none;
	}

	.sgcb-product-scenarios__tab-label {
		flex: 0 0 auto;
		font-size: 11px;
		padding: 8px 12px;
		line-height: 1.15;
		width: auto;
		white-space: nowrap;
	}

	.sgcb-product-scenarios__panel {
		gap: 12px;
		padding: 14px;
		width: 100%;
		margin-inline: 0;
	}

	.sgcb-product-scenarios__image {
		aspect-ratio: 16 / 10;
		max-width: 100%;
		width: 100%;
	}

	.sgcb-product-scenarios__panel-heading {
		font-size: 17px;
		text-align: left;
	}

	.sgcb-product-scenarios__panel-copy {
		width: 100%;
		max-width: 100%;
		align-items: stretch;
		text-align: left;
	}

	.sgcb-product-scenarios__panel-text,
	.sgcb-product-scenarios__bullets {
		width: 100%;
	}

	.sgcb-product-scenarios__panel-text,
	.sgcb-product-faq__answer {
		font-size: 14px;
		line-height: 1.65;
	}

	.sgcb-product-scenarios__bullets {
		gap: 8px;
		text-align: left;
	}

	.sgcb-product-scenarios__bullet {
		font-size: 14px;
		line-height: 1.6;
		padding-left: 18px;
	}

	.sgcb-product-faq__question {
		padding: 14px 14px;
		font-size: 15px;
	}

	.sgcb-product-faq__item {
		width: 100%;
		margin-inline: 0;
	}

	.sgcb-product-faq__answer {
		padding: 0 14px 14px;
	}

	.sgcb-product-faq__question::after {
		width: 26px;
		height: 26px;
	}
}

/* --- Related products (WooCommerce's own default markup/heading) --- */

.related.products {
	/* Without this, `.related.products` also matches the bare `.products`
	   grid selector at the top of this file (§1), turning THIS wrapper
	   into its own grid too. It then has two children — the <h2> and the
	   <ul class="products columns-4"> — so auto-placement drops the ul
	   into a single grid cell (~1/4 of the row on desktop), and the ul's
	   own 4-column card grid has to squeeze into that already-narrow
	   cell. That's the "cards way too narrow, text wrapping letter by
	   letter" bug — this override makes the wrapper a plain block so
	   only the inner <ul> (matched by the ul.products[class*="columns-"]
	   rules in §1) is a grid, at full section width. */
	display: block;
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--sgcb-color-border);
}

.related.products > h2 {
	font-size: 20px;
	margin-bottom: 20px;
}

/* Related-products cards should match the catalog grid card style exactly
   (same content-product.php markup/CSS) but without the "В Корзину"
   button — this is the only place that button is hidden; the catalog
   grid and homepage rows keep it. */
.related.products .sgcb-product-card__cart-btn {
	display: none;
}

/* ==========================================================================
   4. Cart/checkout — technically still reachable by direct URL (brief
      Section 3 leaves them "technically functional... but not linked
      anywhere"), so give them baseline readable styling rather than none,
      without investing in a full checkout redesign nobody will see.
   ========================================================================== */

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	padding: 10px;
	border-bottom: 1px solid var(--sgcb-color-border);
	text-align: left;
}

/* ==========================================================================
   5. Product view counter ("N просмотров сегодня / за неделю")
   ========================================================================== */

.sgcb-product-views {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	color: var(--sgcb-color-text-muted);
	font-size: 13px;
}

.sgcb-product-views__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}