/**
 * Single product page — Figma reconciliation.
 *
 * Every value here comes from the Figma master frame "Product Page V4 - Mobile"
 * (163:1036), rounded onto the 4px rhythm and the whole-pixel type scale in
 * tokens.css. Where the frame carries a fractional number it is because the
 * artboard was scaled, not because the designer chose 19.5 — so 19.5 → 20,
 * 21.5 → 20, 24.5 → 24, 14.553 → 14, 10.954 → 11.
 *
 * This file only corrects what the build got wrong. Blocks that already match
 * the design — the sticky bar, the accordion, the guarantee row internals, the
 * feature-card shell, the header geometry — are deliberately absent.
 *
 * Loaded on `is_product()` only, after every module stylesheet, so it is the
 * last word in the cascade without needing `!important`.
 *
 * The design is mobile-only (no desktop artboard exists). Type and colour apply
 * at every width because they are the brand system; the tightened vertical
 * rhythm is scoped to mobile so the desktop two-column layout keeps its gutter.
 */

/* ══════════════════════════════════════════════════════════════════════
   1 · Page rhythm
   Flatsome gives every `.section` 30px of vertical padding and every `.col`
   another 30px at the bottom, so two consecutive blocks sat 90px apart. The
   design butts them together and lets each block carry its own padding.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 849px) {

	.custom-product-page > .section {
		padding-top: 0;
		padding-bottom: 0;
	}

	/*
	 * One inset for the whole page: 20px from the viewport edge, matching the
	 * design's 19.5px gutter. Flatsome's 15px is too wide and the guarantee
	 * block nested its own gutter inside it, ending up 34.5px in.
	 */
	.custom-product-page .col,
	.custom-product-page .col-inner > .row > .col {
		padding-left: var(--kw-gutter);
		padding-right: var(--kw-gutter);
		padding-bottom: 0;
	}

	.custom-product-page .row {
		margin-left: 0;
		margin-right: 0;
	}


	/*
	 * The sticky bar is `position: fixed`, so its section paints nothing — a
	 * break "before" it is meaningless. What the 24px actually buys is the gap
	 * before the footer: 24 here plus the footer's own 36 is the ~60 the design
	 * leaves between the last block and the dark ground.
	 */
	.custom-product-page > .section:has(.kw-sticky-atc) > .section-content {
		padding-top: var(--kw-space-6);
	}

	/*
	 * The last-offer block carries its own 24px margins for the surfaces where
	 * it sits inline (the cart, the side panel). Here it is the only thing in a
	 * section, so the section rhythm governs and its margins would double up.
	 * The buy-together block keeps its margins — it really is inline, inside
	 * the add-to-cart form.
	 */
	.custom-product-page .kwd-block--product-last-offer {
		margin-top: 0;
		margin-bottom: 0;
	}
}


/* ══════════════════════════════════════════════════════════════════════
   2 · Buy box typography
   The description, the trust chips and the payment row all inherited the
   theme's 16px/400 body and its warm `#332c23` ink. The design sets a cool
   grey secondary ink and a smaller, heavier scale.
   ══════════════════════════════════════════════════════════════════════ */

/*
 * Buy-box rhythm. Measured against the artboard the column reads
 * 6 / 13 / 15 / 20 / 20 / 20 / 23 / 26 / 15 / 21 — one 20px step between
 * blocks, tightening where two lines belong together (rating → title,
 * title → description) and inside the CTA group.
 */

/* Rating row → title: 13px in the design, 3px of line-box slack in the build. */
.custom-product-page .product-title-container {
	margin-top: var(--kw-space-2);
}

/* Product title — 24px, not the theme's 26.88px. */
.custom-product-page .product-title-container .product-title {
	font-size: var(--kw-fs-title);
	line-height: 1.25;
	color: var(--kw-ink);
	margin-bottom: var(--kw-space-2);
}

/*
 * Short description — 14px, muted. The wrapper stays SemiBold so anything that
 * is not a paragraph (a bare text node, a <strong>) still reads as the lead-in
 * the design draws; the paragraphs themselves are Regular.
 */
.custom-product-page .product-short-description {
	padding-bottom: 0;
	margin-bottom: var(--kw-space-5);
	font-size: var(--kw-fs-body);
	font-weight: var(--kw-fw-semi);
	line-height: 1.45;
	color: var(--kw-ink-muted);
}

.custom-product-page .product-short-description p {
	font-size: inherit;
	/*
	 * Not inherit: the wrapper is SemiBold, and inheriting made every paragraph
	 * of body copy bold. Stated outright so the weight does not follow whatever
	 * the wrapper happens to be set to next.
	 */
	font-weight: var(--kw-fw-regular, 400);
	line-height: inherit;
	color: inherit;
}

/*
 * The emoji list is five one-line items, not five paragraphs. The design sets
 * them 4px apart; the theme's 8px paragraph margin plus a 25.6px line box put
 * them 34px apart and the list stopped reading as a list.
 */
.custom-product-page .product-short-description p + p {
	margin-bottom: var(--kw-space-1);
}

.custom-product-page .product-short-description p:last-child {
	margin-bottom: 0;
}

/* The lead paragraph keeps its own separation from the bullets. */
.custom-product-page .product-short-description > p:first-child {
	margin-bottom: var(--kw-space-4);
}

/* Emoji sit on the text baseline rather than pushing the line box open. */
.custom-product-page .product-short-description img.emoji {
	width: 1em;
	height: 1em;
	vertical-align: -.15em;
	margin: 0 .25em 0 0;
}

/* ══════════════════════════════════════════════════════════════════════
   3 · Rating row
   The label is a link into the reviews section — the design underlines it, so
   the affordance does not rest on colour alone.
   ══════════════════════════════════════════════════════════════════════ */

.kw-product-reviews-summary__inner {
	text-decoration: none;
}

.kw-product-reviews-summary__text {
	text-decoration: underline;
	text-underline-position: from-font;
}

.kw-product-reviews-summary__count {
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════
   4 · Carousel labels
   Size (13px) and colour (#2a8bbc) were already right; the horizontal padding
   was not — 12px is what puts a chip at the design's 36px height instead of
   41px. This rule is scoped to .kw-carousel, so it covers both strips: the
   trust chips and the benefit row beneath the price.
   ══════════════════════════════════════════════════════════════════════ */

.custom-product-page .kw-carousel .kw-container .text {
	/* Regular, not SemiBold. These labels sit beside an icon at 13px, where the
	   heavier weight read as emphasis the row does not intend — nothing here is
	   more important than anything else in it. Stated rather than left to §8's
	   Medium, because this selector outranks that one and would otherwise put
	   the labels at a weight neither rule chose deliberately. */
	font-weight: var(--kw-fw-regular, 400);
	/* The chip is one line. The theme's 1.6 body leading opened the pill to
	   41px; the design draws 36px. */
	line-height: 1.2;
}

/* ══════════════════════════════════════════════════════════════════════
   5 · Price block
   The sale price had drifted to the brand blue, which stops a discount reading
   as a discount, and the struck price to #95d5ff, which fails 4.5:1 on white.
   The design's answer is red for the offer, grey for what it replaces.
   ══════════════════════════════════════════════════════════════════════ */

.custom-product-page .product-price-container .product-page-price {
	gap: var(--kw-space-3);
	align-items: center;
}

/* Sale price — 28px Bold, `--kw-danger`. */
.custom-product-page .product-price-container .product-page-price ins,
.custom-product-page .product-price-container .product-page-price ins span.amount,
.custom-product-page .product-price-container .product-page-price ins bdi {
	font-size: var(--kw-fs-price);
	font-weight: var(--kw-fw-bold);
	line-height: 1.1;
	color: var(--kw-danger);
	text-decoration: none;
}

/* Struck price — 16px SemiBold, faint grey. */
.custom-product-page .product-price-container .product-page-price del,
.custom-product-page .product-price-container .product-page-price del span.amount,
.custom-product-page .product-price-container .product-page-price del bdi {
	font-size: var(--kw-fs-lead);
	font-weight: var(--kw-fw-semi);
	line-height: 1.2;
	color: var(--kw-ink-faint);
}

/* The currency symbol tracks its own price, not a separate weight. */
.custom-product-page .product-page-price .woocommerce-Price-currencySymbol {
	font-weight: inherit;
}

/*
 * Discount badge — a pill, not a 40px circle. Flatsome positions the sale
 * wrapper absolutely for the catalogue card; on the product page it is a
 * third item in the price row.
 */
.custom-product-page .product-page-price .product-sale-wrapper {
	position: static;
	margin: 0;
	width: auto;
	height: auto;
	align-self: center;
}

.custom-product-page .product-page-price .product-sale-label {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 5px 10px;
	border-radius: var(--kw-radius-pill);
	background: var(--kw-danger);
	color: #fff;
	font-size: var(--kw-fs-body);
	font-weight: var(--kw-fw-bold);
	line-height: 1.2;
	white-space: nowrap;
}

/*
 * The 30-day-lowest-price line is a legal requirement, not part of the design.
 * It belongs under the price at caption size — the negative top margin was
 * pulling it into the price row.
 *
 * `.best-price-wrapper` was the old lowestprice plugin's markup; kw-lowest-price
 * prints a bare `.kw-lp` span, and on the `plain` template ships no stylesheet
 * of its own, so without this the line inherits body size and ink.
 */
.custom-product-page .best-price-wrapper,
.custom-product-page .kw-lp {
	display: block;
	margin: var(--kw-space-2) 0 0;
	font-size: var(--kw-fs-caption);
	line-height: 1.5;
	color: var(--kw-ink-muted);
}

.custom-product-page .product-price-container .price-wrapper .price {
	margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   6 · Add to cart
   The design draws a 52px button on a 12px radius with a cart glyph and the
   card shadow, and types the label in caps at tracking zero. The build had a
   56px/8px button with no icon, no shadow, and `text-transform: uppercase`
   plus 0.48px tracking — the combination the house standard rules out.
   ══════════════════════════════════════════════════════════════════════ */

.custom-product-page .add-to-cart-container .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kw-space-2);
	width: 100%;
	min-height: 52px;
	height: 52px;
	padding: 0 var(--kw-space-5);
	/* Flatsome's customizer prints `button:not(.icon) { border-radius: 8px
	   !important }` inline in <head>. Both are important, so specificity
	   decides — same workaround the sticky bar already uses. */
	border-radius: var(--kw-radius) !important;
	background-color: var(--kw-accent);
	box-shadow: var(--kw-shadow-card);
	font-size: var(--kw-fs-lead);
	font-weight: var(--kw-fw-bold);
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	margin-bottom: var(--kw-space-1);
}


/*
 * Same cart mark as the sticky bar, so the two add-to-cart controls read as
 * one control in two places. Decorative — the label carries the meaning.
 */
.custom-product-page .add-to-cart-container .single_add_to_cart_button::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M1.5372 1.5372H3.0372L5.0322 10.8527C5.10538 11.1938 5.2952 11.4988 5.56898 11.7151C5.84276 11.9314 6.18338 12.0455 6.5322 12.0377H13.8672C14.2086 12.0372 14.5396 11.9202 14.8055 11.7061C15.0714 11.492 15.2563 11.1936 15.3297 10.8602L16.5672 5.28739H3.8397M6.74985 15.7506C6.74985 16.1648 6.41406 16.5006 5.99985 16.5006C5.58563 16.5006 5.24985 16.1648 5.24985 15.7506C5.24985 15.3363 5.58563 15.0005 5.99985 15.0005C6.41406 15.0005 6.74985 15.3363 6.74985 15.7506ZM14.9998 15.7506C14.9998 16.1648 14.6641 16.5006 14.2498 16.5006C13.8356 16.5006 13.4998 16.1648 13.4998 15.7506C13.4998 15.3363 13.8356 15.0005 14.2498 15.0005C14.6641 15.0005 14.9998 15.3363 14.9998 15.7506Z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The loading state hides the label; it must hide the glyph too. */
.custom-product-page .single_add_to_cart_button.loading::before {
	display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   7 · Payment row
   12px SemiBold muted, as in the design — it inherited 16px/400 body ink.
   ══════════════════════════════════════════════════════════════════════ */

.custom-product-page .payment-methods {
	margin-top: 0;
	gap: var(--kw-space-3);
	font-size: var(--kw-fs-caption);
	font-weight: var(--kw-fw-semi);
	line-height: 1.4;
	color: var(--kw-ink-muted);
}

.custom-product-page .payment-methods__cod {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* ══════════════════════════════════════════════════════════════════════
   8 · Cards — feature grid and guarantee rows
   The shells were built exactly right. Only the body copy weight drifted:
   the design sets Medium, the build left it Regular.
   ══════════════════════════════════════════════════════════════════════ */

.custom-product-page .kw-container--flex .text p,
.custom-product-page .kw-container--flex .text {
	font-weight: var(--kw-fw-medium);
	/* Figma sets these blocks to normal leading; the theme's 1.6 body value
	   added ~9px to every card. */
	line-height: 1.35;
}

/* Card and row titles stay Bold — they are marked up as <strong>. */
.custom-product-page .kw-container--flex .text strong,
.custom-product-page .kw-container--flex .text b {
	font-weight: var(--kw-fw-bold);
}

/* ══════════════════════════════════════════════════════════════════════
   9 · Flip book
   The arrows are authored as circles in book-flip.css, but Flatsome's button
   radius lands later in the cascade and squares them off.

   The design draws one arrow, forward only. Keeping a visible back control
   would be the safer call if forward were the only way through — it is not:
   the swiper takes a swipe in both directions, so nothing is unreachable.
   ══════════════════════════════════════════════════════════════════════ */

.custom-product-page .kw-flip__arrow {
	/* See the add-to-cart note above — same inline `!important` from the
	   customizer, same fix. */
	border-radius: 50% !important;
	text-transform: none;
	letter-spacing: 0;
	margin: 0!important;
}

/*
 * The gallery used to hide its back arrow here, on the same "forward only"
 * reasoning as the flip control above. Both arrows are shown now: the gallery
 * is the page's hero and people scrub back and forth through it, so making
 * "previous" reachable only by swipe or by hitting the thumbnail strip cost
 * more than the second control does.
 *
 * Nothing to declare — the base rules in the shortcode's own stylesheet
 * already place and style both arrows.
 */

/* ══════════════════════════════════════════════════════════════════════
   11 · Sticky bar price colours
   `.kw-sticky-atc__price` and `__save` set the right colour, then
   WooCommerce's `.woocommerce-Price-amount` repainted the number itself
   near-black. The amount should inherit from the line it sits on.
   ══════════════════════════════════════════════════════════════════════ */

.kw-sticky-atc__price .woocommerce-Price-amount,
.kw-sticky-atc__price .woocommerce-Price-currencySymbol,
.kw-sticky-atc__save .woocommerce-Price-amount,
.kw-sticky-atc__save .woocommerce-Price-currencySymbol {
	color: inherit;
}

/* ══════════════════════════════════════════════════════════════════════
   12 · Personalisation toggle
   The card is the page's signature block; its selected side uses the accent,
   not the deep blue that the top bar and the sticky price already carry.
   ══════════════════════════════════════════════════════════════════════ */

.custom-product-page .personalizacija-toggle__btn.is-active {
	background: var(--kw-accent);
}