/* ===== TripTea — Product page (desktop) ==================================
   Figma nodes:
     541:9150 (Product page root, 1920-Main)
     541:9152 (top card: gallery + body)
     541:9202 (brewing-method block)
     705:29444 (related products carousel)

   Desktop-only: mobile layout will be added in a separate pass once Figma
   delivers the 390-main variant.
*/

/* Stock product.twig used to live inside Bootstrap's #content wrapper which
   capped width to col-sm-12 (~1140). Our new layout is full-bleed white card +
   coloured section bands, so we neutralise that ancestor here. */
#content:has(.tt-product) {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
}

/* ===== Section bands (full-bleed background) ============================= */

.tt-product,
.tt-brewing {
	font-family: 'DM Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "case", "cpsp";
	color: #2B2B2B;
}

.tt-product--breakout,
.tt-brewing--breakout {
	position: relative;
	width: 100vw;
	max-width: 1704px;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
}

/* Desktop (1201+): width:100vw only caps at 1704px (108px gutter) once the
   viewport clears 1704px — below that it's full-bleed. Flatten the gutter
   to exactly 108px across the whole desktop range. Tablet/mobile untouched. */
@media (min-width: 1201px) {
	.tt-product--breakout,
	.tt-brewing--breakout {
		width: min(1704px, calc(100vw - 216px));
	}
}

.tt-product *,
.tt-brewing *,
.tt-product *::before, .tt-product *::after,
.tt-brewing *::before, .tt-brewing *::after {
	box-sizing: border-box;
}

/* ===== Top product card (Figma 541:9152) ================================= */

.tt-product {
	background: #FFFFFF;
	border-top: 1px solid #EAEAEA;
}

/* Outer wrapper carries the asymmetric Figma padding (left 192 / right 305).
   Breadcrumbs sit above the main flex row, both aligned to this padded box. */
.tt-product__inner {
	display: flex;
	padding-top: 64px;
	padding-bottom: 103px;
	padding-left: 16px;
	padding-right: 16px;
	flex-direction: column;
	gap: 24px;
	max-width: 1704px;
	margin: 0 auto;
}

/* Desktop (1201+): the 16px padding above is on top of the breakout's
   108px gutter above (108+16=124px to visible content), so it doesn't line
   up with the header's flush 108px. It's the only gutter tablet/mobile
   have, so it must stay for them — cancel it only once the breakout's
   margin is doing the job instead. */
@media (min-width: 1201px) {
	.tt-product__inner {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Breadcrumbs — DM Sans 14/150, Tea Brown crumb links, Medium Gray current item.
   Separator is a 4×4 SVG circle filled with Warm Sand (Figma assets/sep). */
.tt-product__crumbs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	/* Pin the row to body width — parent uses align-items: flex-start so
	   nav otherwise grows to content width and the ellipsis never engages. */
	width: 100%;
	min-width: 0;
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
}
.tt-product__crumb {
	flex: 0 0 auto;
	color: #8B5E3C;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease;
}
.tt-product__crumb:hover { color: #4A3426; text-decoration: underline; }
/* Last crumb (the product name) takes remaining space and truncates with "…"
   when the row would otherwise wrap. Full name is still visible in the H1 below. */
.tt-product__crumb:last-of-type {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #6B6B6B;
	pointer-events: none;
	text-decoration: none;
}
.tt-product__crumb-sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4px;
	height: 4px;
}

/* Top row — gallery on left, body on right. Figma column gap = 83px. */
.tt-product__top {
	display: flex;
	gap: 83px;
	align-items: flex-start;
	align-self: stretch;
}

/* ===== Gallery (4 thumbs vertical + main image) ========================== */

.tt-product__gallery {
	display: flex;
	gap: 24px;
	flex: 0 0 698px;
	width: 698px;
}

.tt-product__thumbs {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(4, 1fr);
	gap: 16px;
	flex: 0 0 120px;
	width: 120px;
}

/* Figma: 120×120, 1.5px Dark Tea border on every thumb, 8px radius.
   Active state currently differentiated only by the border thickness — there's
   no separate hover/active style in Figma yet. Keep a subtle hover for affordance. */
.tt-product__thumb {
	appearance: none;
	-webkit-appearance: none;
	border: 1.5px solid #4A3426;
	padding: 0;
	margin: 0;
	background: #D9D9D9;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	width: 100%;
	height: 100%;
	display: block;
	transition: opacity 0.15s ease;
}

.tt-product__thumb--more {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-tea-brown);
	color: var(--color-white);
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 36px;
	font-weight: 700;
	cursor: default;
}
.tt-product__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tt-product__thumb:hover { opacity: 0.85; }
.tt-product__thumb--active { opacity: 1; }

.tt-product__main-img {
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 1;
	height: auto;
	border-radius: 8px;
	overflow: hidden;
	background: #D9D9D9;
}
.tt-product__main-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===== Body (info column) ================================================ */

/* Figma body column: fixed width 643. Per-element gaps differ (21 / 21 / 15 / 25 /
   24 / 32 / 32), so we drop the parent `gap` and set explicit margin-bottoms on
   each direct child below instead of a single uniform value. */
.tt-product__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.tt-product__body > * { margin-bottom: 0; }
.tt-product__crumbs        { margin-bottom: 21px; }
.tt-product__title         { margin-bottom: 21px; }
.tt-product__rating        { margin-bottom: 15px; }
.tt-product__meta          { margin-bottom: 25px; }
.tt-product__description   { margin-bottom: 24px; }
.tt-product__specs         { margin-bottom: 24px; }
.tt-product__gramming-row  { margin-bottom: 32px; }
.tt-product__price-row     { margin-bottom: 32px; }
.tt-product__cart-row      { margin-bottom: 0; }

/* Title — Tea Brown H2 (DM Sans ExtraBold 36 / 120). margin-bottom is set in
   the body-spacing block above so we don't reset it here. */
.tt-product__title {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	font-weight: 800;
	font-size: 36px;
	line-height: 120%;
	color: var(--color-dark-tea);
}

.tt-product__rating {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	order: -1;        
	flex-basis: 100%;  
}
.tt-product__star { display: block; }

/* Same clickable-star reset as .tt-product-card__star-btn (bestsellers_block.css) — submits to the admin moderation queue. */
.tt-product__star-btn {
	display: inline-flex;
	padding: 0;
	border: none;
	background: none;
	line-height: 0;
	cursor: pointer;
}

/* Hover preview: same cumulative outline as .tt-product-card__star-btn (bestsellers_block.css) — see comment there. */
.tt-product__star-btn.tt-star-hover-preview svg path {
	stroke: #8B5E3C;
	stroke-width: 1;
}

/* Meta row: Артикул label+value + tick-circle + В наявності. DM Sans 12/140.
   Figma: 34px between the SKU group and the stock badge, 8px inside the badge
   between icon and text, baseline-centred so the SVG aligns with the cap height. */
.tt-product__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 34px;   
	row-gap: 0px;  
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 140%;
}
.tt-product__sku-label { color: #6B6B6B; }
.tt-product__sku-value { color: #2B2B2B; }

.tt-product__stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #4A3426;
	line-height: 1; /* drop the 140% line-box so icon + text sit on the same baseline */
}
.tt-product__stock svg { color: #8B5E3C; display: block; flex: 0 0 16px; }
/* Pre-order state — text + alarm-clock icon both Medium Gray. Override the
   default svg color above so it matches the parent. */
.tt-product__stock--pre_order { color: #6B6B6B; }
.tt-product__stock--pre_order svg { color: #6B6B6B; }
.tt-product__stock--out_of_stock { color: #C62828; }
.tt-product__stock--out_of_stock svg { color: #C62828; }

/* Description — DM Sans 14/150 Medium Gray. */
.tt-product__description {
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #6B6B6B;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	align-self: stretch;
}
.tt-product__description p { margin: 0 0 8px; }
.tt-product__description p:last-child { margin-bottom: 0; }

/* Specs grid — Матеріал/Склад/Упаковка/etc. 2-column card grid, same on mobile. */
.tt-product__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: 100%;
	align-self: stretch;
}
.tt-product__spec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 16px;
	background: var(--color-soft-cream);
	border-radius: var(--border-radius-md);
}
.tt-product__spec-label {
	font-size: 13px;
	color: var(--color-tea-brown);
}
.tt-product__spec-value {
	font-size: 15px;
	font-weight: 700;
	color: #000000;
}

/* Gramming: label ON TOP, chip list BELOW (column, gap 16). Figma. */
.tt-product__gramming-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}
.tt-product__gramming-label {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 140%;
	color: #4A3426;
}

/* Chip list — 72×48, padding 8 12, radius 8. Active = solid Tea Brown bg + white text.
   Inactive = white bg + 1px Light Gray border + Medium Gray text. Both DM Sans 18 Bold. */
.tt-product__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 15px; /* Figma: 15 between adjacent chips. */
	margin: 0;
	padding: 0;
	list-style: none;
}
.tt-product__chip {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 72px;
	height: 48px;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #EAEAEA;
	background: #FFFFFF;
	color: #6B6B6B;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
	user-select: none;
	min-width: max-content;
}
.tt-product__chip:hover { border-color: #8B5E3C; color: #8B5E3C; }
.tt-product__chip--active {
	background: #8B5E3C;
	border-color: #8B5E3C;
	color: #FFFFFF;
}
.tt-product__chip--active:hover { color: #FFFFFF; }

/* Headline price — Dark Text H2 (DM Sans ExtraBold 36 / 120). margin-bottom
   is set in the body-spacing block; don't reset it here. */
.tt-product__price-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
}
/* "Was-price" — rendered only when the product has an active special and no
   gramming. Same brown line-through pattern as the tt_sets cards on home. */
.tt-product__old-price {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 150%;
	color: #8B5E3C;
	text-decoration: line-through;
}
.tt-product__price {
	font-family: 'DM Sans', sans-serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 120%;
	color: #2B2B2B;
}

/* Cart row: counter | add-to-cart | wishlist. Add-to-cart takes remaining width. */
.tt-product__cart-row {
	display: flex;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

/* Counter: 140×48, 1px Light Gray border, 8 radius. */
.tt-product__counter {
	display: flex;
	width: 140px;
	height: 48px;
	padding: 8px 12px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	border-radius: 8px;
	border: 1px solid #EAEAEA;
	background: #FFFFFF;
}
.tt-product__counter-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #4A3426;
	cursor: pointer;
	transition: color 0.15s ease;
}
.tt-product__counter-btn:hover { color: #8B5E3C; }
.tt-product__counter-input {
	flex: 1 0 0;
	min-width: 0;
	height: 32px;
	border: 0;
	padding: 0;
	text-align: center;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
	color: #4A3426;
	background: transparent;
	outline: none;
}

/* Add-to-cart — 48 tall, flex:1 0 0, Tea Brown bg, white text. Hover #6F472B. */
.tt-product__add-to-cart {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	height: 48px;
	padding: 8px 12px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex: 1 0 0;
	border: 0;
	border-radius: 8px;
	background: #8B5E3C;
	color: #FFFFFF;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	cursor: pointer;
	transition: background 0.15s ease;
}
.tt-product__add-to-cart:hover { background: #6F472B; }
.tt-product__add-to-cart svg {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
}
/* Disabled state — pre-order or out-of-stock. Mirrors tt_bestsellers card:
   light-gray bg, white icon+text, not-allowed cursor, hover is a no-op. */
.tt-product__add-to-cart:disabled {
	background: #EAEAEA;
	color: #FFFFFF;
	cursor: not-allowed;
}
.tt-product__add-to-cart:disabled:hover { background: #EAEAEA; }

/* Wishlist heart — 48×48 button with 1px Light Gray border, gray heart inside. */
.tt-product__wishlist {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid #EAEAEA;
	border-radius: 8px;
	background: #FFFFFF;
	color: #6B6B6B;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	flex-shrink: 0;
}
.tt-product__wishlist:hover { color: #8B5E3C; border-color: #8B5E3C; }
.tt-product__wishlist--active { color: #8B5E3C; }
.tt-product__wishlist--active svg path { fill: #8B5E3C; }

/* ===== Brewing method block (Figma 541:9202) ============================== */

.tt-brewing {
	position: relative;
	background: #FAF7F2; /* Secondary Colors/Soft Cream */
	min-height: 628px;
	padding: 64px 192px;
	box-sizing: border-box;
	overflow: hidden; /* clip the dragon watermark that bleeds past the right edge */
}

/* Decorative dragon watermark — same asset the home-page "Корисні статті"
   block uses (image/articles/dragon-watermark.png). Anchored to the right
   edge with a small negative top offset so it peeks above the section and
   sinks just below the tips block, like the Figma frame. Pointer-events
   disabled so it never traps clicks aimed at cards behind it. */
.tt-brewing::before {
	content: "";
	position: absolute;
	top: -126px;
	right: 0;
	width: 881px;
	height: 940px;
	background-image: url('../image/articles/dragon-watermark.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.05;
}

/* Content sits above the watermark via positive z-index. Width hugs naturally
   since the section padding (192 each side) already crops to 1536 at 1920vw. */
.tt-brewing__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Title — H2 DM Sans ExtraBold 36 / 120 / Dark Tea. 47px gap to the cards grid
   (tightened to 12px when a description paragraph follows — see below). */
.tt-brewing__title {
	margin: 0 0 47px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 800;
	font-size: 36px;
	line-height: 120%;
	color: #4A3426;
}
.tt-brewing__title:has(+ .tt-brewing__description) {
	margin-bottom: 12px;
}

/* Description — optional paragraph under the title (e.g. "Склад набору" intro
   text). DM Sans 14/150 Medium Gray, capped width so it doesn't stretch full-bleed. */
.tt-brewing__description {
	margin: 0 0 32px;
	max-width: 760px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #6B6B6B;
}

/* Card row — flex instead of grid because the card count isn't fixed (admin
   can add 3, 4, 5... cards): flex-wrap + justify-content: center keeps every
   row — including a partial last one — centered instead of grid stretching
   cards to fill leftover columns. Each card's flex-basis below still targets
   ~4 per row at 1920 (366px each: (1536 − 3×24) ÷ 4), it just isn't a hard
   column count anymore. */
.tt-brewing__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-bottom: 24px;
}
/* "Набори" variant — Склад набору: ~3 per row of photo+text cards instead of
   ~4 per row of centered icon cards. */
.tt-brewing--set .tt-brewing__card {
	flex-basis: calc(33.333% - 16px);
}
/* When admin leaves "Поради" empty, the tips block doesn't render — the cards
   become the last child of the inner column, and the 24px gap below them
   becomes empty whitespace. Drop the margin so the section ends flush. */
.tt-brewing__cards:last-child {
	margin-bottom: 0;
}
/* Same idea for the section's enforced min-height: without tips the 628px
   floor leaves a big stretch of empty cream background. Release it when
   there's no tips block. (:has support: Chrome/Edge/Safari ≥2022, FF ≥2023.) */
.tt-brewing:not(:has(.tt-brewing__tips)) {
	min-height: 0;
}

/* Card — flex-basis targets ~4 per row (grow: 0 so a partial last row stays
   the same width as full rows instead of stretching to fill it — that's
   what .tt-brewing__cards' justify-content: center is centering); shrink: 1
   still lets cards narrow together at tighter desktop widths, same as the
   old 1fr grid tracks did. Padding 24/16, 1px Warm Sand border, radius 16.
   Centred content via flex column. */
.tt-brewing__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 0 1 calc(25% - 18px);
	padding: 24px 16px;
	background: #FFFFFF;
	border-radius: 16px;
	border: 1px solid #E7D7C8;
	text-align: center;
}

/* Icon box — 48×48, Light Beige bg, 8 radius. Padding 12 (slight asymmetric
   in Figma — 12 13 12 12 — too small to perceive, normalised to 12). */
.tt-brewing__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 12px;
	background: #F5EFE7;
	border-radius: 8px;
}
.tt-brewing__card-icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* Label — Body Large DM Sans 18 / 150 / Dark Tea, centred. */
.tt-brewing__card-label {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 150%;
	color: #4A3426;
	text-align: center;
}
/* Value — H4 DM Sans Bold 22 / 130 / Dark Tea, centred. */
.tt-brewing__card-value {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 130%;
	color: #4A3426;
	text-align: center;
}
/* Subtitle — Small Text DM Sans 14 / 150 / Medium Gray, centred. */
.tt-brewing__card-subtitle {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #6B6B6B;
	text-align: center;
}

/* "Набори" variant — Склад набору: row layout (photo left, text right) instead
   of the tea card's centred column. Same border/radius/background as the base
   card so the two designs still feel like one family. */
.tt-brewing--set .tt-brewing__card {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 16px;
	text-align: left;
}
.tt-brewing__card-photo {
	width: 56px;
	height: 56px;
	flex: 0 0 56px;
	border-radius: 8px;
	object-fit: cover;
	background: #F5EFE7;
}
.tt-brewing__card-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
/* Index — "01".."06", small bold Tea Brown, same family as tips bullets. */
.tt-brewing__card-index {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #8B5E3C;
}
/* Title — bold black, left-aligned (overrides the centred tea .card-value look). */
.tt-brewing__card-title {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 130%;
	color: #000000;
}
.tt-brewing--set .tt-brewing__card-subtitle {
	text-align: left;
}

/* Tips block — full-width pill, Light Beige bg, 24px padding (right side flush
   with content edge per Figma's asymmetric 24/0/24/24 padding). */
.tt-brewing__tips {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 24px 24px 24px;
	background: #F5EFE7;
	border-radius: 16px;
}
/* Title — H4 DM Sans Bold 22 / 130 / Dark Tea. 16px gap to the list below. */
.tt-brewing__tips-title {
	margin: 0 0 16px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 130%;
	color: #4A3426;
}
.tt-brewing__tips-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	/* No extra gap — Figma relies on the 150% line-height (24px) for spacing
	   between consecutive bullets. */
}
/* Tip text — Body Regular DM Sans 16 / 150 / Dark Text. Bullet is rendered by
   CSS pseudo (admin only types the line, no leading "•" needed). */
.tt-brewing__tips-list li {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	color: #2B2B2B;
	padding-left: 16px;
	position: relative;
}
.tt-brewing__tips-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: #2B2B2B;
}

/* ===== Related products carousel =========================================
   HTML is rendered via common/tt_product_carousel.twig using tt-bestsellers__*
   classes, so all structural CSS comes from bestsellers_block.css.
   Only the old-price layout is scoped here via the .tt-related hook that
   the include adds to the <section> element. */

.tt-related .tt-product-card__prices {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tt-related .tt-product-card__old-price {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 150%;
	color: #8B5E3C;
	text-decoration: line-through;
}

/* ===== Gallery responsive visibility =====================================
   Below 1200px the original gallery (sibling of .tt-product__body) is hidden
   and the duplicate inside .tt-product__body becomes visible.
   At 1200px and above the situation is reversed. */

.tt-product__gallery--mobile {
	display: none;
}

.tt-product__actions {
	width: 100%;
	display: flex;
	gap: 16px;
	align-items: center;
	align-self: stretch;
}

@media (max-width: 1199px) {
	.tt-brewing__card {
		flex-basis: calc(50% - 12px);
	}
	.tt-brewing--breakout {
		padding: 40px 16px;
	}
	.tt-product__gallery:not(.tt-product__gallery--mobile) {
		display: none;
	}
	.tt-product__body {
		flex: 1 1 0;
		width: 100%;
		min-width: 0;
	}
	.tt-product__gallery--mobile {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
		align-self: center;
		margin-bottom: 21px;
	}
	.tt-product__actions {
		width: fit-content;
	}
	.tt-gallery-swiper {
		max-width: 698px;
	}
	.tt-gallery-thumbs {
		max-width: 698px;
		align-self: center;
	}
	.tt-product__add-to-cart span {
		display: none;
	}
	.tt-product__cart-row {
		justify-content: space-between;
	}
}

/* ===== True mobile pass (Figma 390-main, product page) ====================
   Reflows the info column via CSS Grid named areas — no DOM/Twig changes.
   `display: contents` on .tt-product__cart-row unwraps it so its two
   children (counter, actions) become independent grid items, which is
   what lets the qty counter sit next to the price row instead of next
   to the add-to-cart button as it does on desktop/tablet. Order below:
   breadcrumbs → image → sku/stock → title → rating → gramming chips →
   price+qty → add-to-cart/wishlist → description.
============================================================================ */
@media (max-width: 767px) {

	.tt-product__inner {
		padding: 16px;
		gap: 16px;
	}

	/* Mobile stays the same single-line + ellipsis behavior as desktop (see
	   the base .tt-product__crumbs rules above) — just a tighter bottom
	   margin to match this breakpoint's spacing. */
	.tt-product__crumbs {
		margin-bottom: 0;
	}

	.tt-product__body {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 16px;
		width: 100%;
		grid-template-areas:
			"crumbs      crumbs"
			"gallery     gallery"
			"title       title"
			"gramming    gramming"
			"price       counter"
			"actions     actions"
			"meta        meta"
			"description description"
			"rating      rating";
	}

	.tt-product__crumbs          { grid-area: crumbs; }
	.tt-product__gallery--mobile { grid-area: gallery; }
	.tt-product__meta {
		grid-area: meta;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
		margin-bottom: 0;
	}
	.tt-product__title {
		grid-area: title;
		font-size: 22px;
		font-weight: 700;
		line-height: 130%;
		margin-bottom: 0;
	}
	.tt-product__rating {
		grid-area: rating;
		gap: 2px;
		margin-bottom: 0;
		order: 3;          
		flex-basis: auto;  
		gap: 2px;
		margin-bottom: 0;
	}
	.tt-product__gramming-row {
		min-width: 0;
		grid-area: gramming;
		margin-bottom: 0;
		padding-bottom: 16px;
		border-bottom: 1px solid #FAF7F2;
		display: flex;
		flex-direction: column;   /* лейбл над списком */
		align-items: flex-start;
		gap: 8px;
	}

	.tt-product__price-row {
		grid-area: price;
		align-self: center;
		margin-bottom: 0;
	}
	.tt-product__description {
		grid-area: description;
		margin-bottom: 0;
	}

	.tt-product__cart-row {
		display: contents;
	}
	.tt-product__counter {
		grid-area: counter;
		align-self: center;
		width: 120px;
		padding: 8px 20px;
	}
	.tt-product__actions {
		grid-area: actions;
		width: 100%;
	}

	.tt-product__add-to-cart span {
		display: inline;
	}

	.tt-brewing__title {
		font-size: 28px;
	}

	.tt-brewing::before {
		top: -32px;
		right: -60px;
		width: 480px;
		height: 512px;
	}
	.tt-brewing__cards {
		gap: 8px;
	}
	.tt-product__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
		gap: 8px;
		min-width: 0;   /* ← ключовий фікс */
		width: 100%;    /* щоб точно займав всю доступну ширину */
	}
	.tt-product__chips::-webkit-scrollbar {
		display: none; 
	}
	.tt-product__chip {
		flex-shrink: 0;
		width: 56px;
		height: 40px;
		padding: 6px 8px;
		font-size: 14px;
	}
	.tt-gallery-swiper__dots {
		margin-bottom: -30px;   
		padding-bottom: 0;
	}


}

/* ===== Mobile gallery — Swiper components ================================= */

.tt-gallery-swiper {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 24px;
	overflow: hidden;
	background: #D9D9D9;
}

.tt-gallery-swiper .swiper-slide {
	width: 100%;
	height: 100%;
}

.tt-gallery-swiper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tt-gallery-swiper__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
}

.tt-gallery-swiper__dots .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #E7D7C8;
	opacity: 1;
	margin: 0;
	cursor: pointer;
	transition: background 0.15s ease;
}

.tt-gallery-swiper__dots .swiper-pagination-bullet-active {
	background: #8B5E3C;
}

.tt-gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	width: 100%;
}

.tt-gallery-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	margin: 0;
	border: 1.5px solid transparent;
	border-radius: 16px;
	overflow: hidden;
	background: #D9D9D9;
	cursor: pointer;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}

.tt-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tt-gallery-thumb:hover { opacity: 0.85; }
.tt-gallery-thumb--active { border-color: #4A3426; }

/* ===== Lightbox =========================================================== */

.tt-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--color-white);
	display: flex;
	flex-direction: column;
}

.tt-lightbox[hidden] { display: none; }

.tt-lightbox__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 32px;
	border-bottom: 1px solid #EAEAEA;
	flex-shrink: 0;
}

.tt-lightbox__title {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 130%;
	color: #2B2B2B;
}

.tt-lightbox__close {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	color: #4A3426;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
}
.tt-lightbox__close:hover { opacity: 0.7; }

.tt-lightbox__body {
	flex: 1 1 0;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 20px 32px; /* 20px × 2 = 40px vertical — used in image height calc below */
	height: 100%;
}

.tt-lightbox__img-wrap {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	aspect-ratio: 1/1;
	height: 100%;
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-lightbox__img {
	display: block;
	height: 100%;
	width: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
}

/* Nav buttons — visible only above 1200px */
.tt-lightbox__nav {
	appearance: none;
	-webkit-appearance: none;
	display: none;
	flex-shrink: 0;
	padding: 12px;
	color: var(--color-dark-tea, #4A3426);
	border: 1px solid var(--color-dark-tea, #4A3426);
	border-radius: 16px;
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tt-lightbox__nav:disabled {
	background: var(--color-light-beige, #F5EFE7);
	border-color: transparent;
	color: var(--color-warm-sand, #E7D7C8);
	cursor: default;
}
.tt-lightbox__nav svg {
	display: block;
	width: 32px;
	height: 32px;
}

@media (min-width: 1200px) {
	.tt-lightbox__nav { display: flex; align-items: center; justify-content: center; }
}

/* Thumbnail strip */
.tt-lightbox__thumbs {
	display: flex;
	gap: 12px;
	padding: 16px 32px;
	overflow-x: auto;
	justify-content: center;
	flex-shrink: 0;
	scrollbar-width: none;
}
.tt-lightbox__thumbs::-webkit-scrollbar { display: none; }

.tt-lightbox__thumb {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	padding: 0;
	margin: 0;
	border: 1.5px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: #D9D9D9;
	cursor: pointer;
	transition: border-color 0.15s ease, opacity 0.15s ease;
}
.tt-lightbox__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tt-lightbox__thumb:hover { opacity: 0.8; }
.tt-lightbox__thumb--active { border-color: #4A3426; }