/* ==========================================================================
   Single product page  —  /product/{SKU}/
   ==========================================================================
   Layout:
     - Outer shell stays at 1000px (theme-wide).
     - .td-product__top is a 2-column flex: image (left) + info (right).
     - Tabs sit immediately under the image, equal-width totalling image width,
       with a small gap between them. No side padding on first or last tab.
     - .td-product__panels spans the full shell width below the two columns.
   ========================================================================== */

.td-product {
	padding: 0;
}

.td-product-missing {
	padding: 0 0 64px;
}

.td-product-missing__card {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 40px 24px 0;
}

.td-product-missing__title {
	margin: 0 0 12px;
	font-family: 'Rubik', sans-serif;
	font-size: 22px;
	font-weight: 600;
	color: #1f2937;
}

.td-product-missing__text {
	margin: 0;
	color: #4e7184;
	font-size: 15px;
	line-height: 1.6;
}

/* -----------------------------------------------------------
   Two-column top
   ----------------------------------------------------------- */

.td-product__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	margin-bottom: 32px;
}

/* -----------------------------------------------------------
   Left column — image card + tabs strip
   ----------------------------------------------------------- */

.td-product__media {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.td-product-hero {
	position: relative;  /* positioning context for the overlaid photos button */
	background: #f4f6f8;
	border-radius: 7px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.td-product-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.td-product-hero__empty {
	color: #afc3ce;
	font-size: 14px;
}

/* Desktop tab header — sits at the top of the panels: the two tabs grouped
 * on the left, the active panel's copy button on the right. Hidden on mobile
 * (where .td-product-tabs--m is used). align-items:flex-end keeps the copy
 * button's baseline level with where the rotated tabs feed into the panel. */
.td-product-tabhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

/* Tabs — grouped on the left of the header, content-width, with rounded
 * bottom corners (rotated 180°) so they feed down into the panel below. */

.td-product-tabs {
	display: flex;
	gap: 6px;
}

.td-product-tab {
	flex: 0 0 auto;
	min-width: 0;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	background: transparent;
	border: 0;
	border-top: 2px solid transparent;
	color: #afc3ce;
	font-family: 'Rubik', sans-serif;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: color .15s, border-color .15s;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.td-product-tab:hover {
	color: #4e7184;
}

.td-product-tab.is-active {
	color: #4e7184;
	border-top-color: #4e7184;
	font-weight: 600;
}

/* -----------------------------------------------------------
   Right column — info
   ----------------------------------------------------------- */

.td-product__info {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-top: 10px;
}

.td-product__title {
	display: block;
	margin: 0;
	font-family: 'Rubik', sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.35;
}

/* Inline copy button — sits as part of the text flow so it lands right
 * after the last word, regardless of how the title wraps. */
.td-copy-btn--inline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	vertical-align: middle;
	background: transparent;
	border: 0;
	color: #afc3ce;
	cursor: pointer;
	border-radius: 4px;
	transition: color .15s, background-color .15s;
}

.td-copy-btn--inline:hover {
	color: #4e7184;
	background: #f2f6f9;
}

.td-copy-btn--inline.is-success {
	color: #4e7184;
}

.td-product__sku .td-copy-btn {
	padding: 2px;
}

/* SKU + category share one row, separated by a vertical divider (the
 * category's left border). The -10px coupling to the title now lives on
/* SKU and category stacked one below another in their own section,
 * no divider. */
.td-product__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin-top: 0;
}

.td-product__sku {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #4e7184;
	font-size: 14px;
}

.td-product__sku strong {
	color: #4e7184;
	font-weight: 600;
	margin-left: 4px;
}

/* Stock indicator — icon + plain (not bold) text */

.td-product__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 400;
	margin-top: -6px;
}

.td-product__stock.is-in {
	color: #2dc270;
}

.td-product__stock.is-out {
	color: #d62828;
}

/* Variations */

.td-product__variations {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 4px;
}

.td-variation {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #1f2937;
}

.td-variation__label {
	font-weight: 600;
	color: #4e7184;
}

.td-variation__select {
	height: 40px;
	padding: 0 28px 0 12px;
	border: 1px solid #d6dce0;
	border-radius: 7px;
	background: #ffffff
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234e7184' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		no-repeat right 10px center / 12px 8px;
	color: #1f2937;
	font-family: 'Rubik', sans-serif;
	font-size: 14px;
	min-width: 130px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color .15s;
}

.td-variation__select:focus {
	outline: 0;
	border-color: #4e7184;
}

.td-variation__select.is-error {
	border-color: #d62828;
	background-color: #fff5f5;
}

/* Drop price */

.td-product__drop-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 16px;
	padding-top: 10px;
}

.td-product__drop-price-label {
	color: #4e7184;
	font-weight: 600;
}

.td-product__drop-price-value {
	color: #2dc270;
	font-weight: 700;
	font-size: 22px;
}

.td-product__currency {
	font-size: 12px;
	font-weight: 600;
	margin-left: 2px;
	vertical-align: super;
}

/* Sale price (Ваша цена продажи) */

.td-product__sale-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 2px !important;
}

.td-product__sale-pill {
	display: inline-flex;
	align-items: center;
	background: #f2f6f9;
	border: 1px solid #e4e7ea;
	border-left: 0;
	border-radius: 0 8px 8px 0;
	padding: 6px 6px 6px 0;
	gap: 14px;
	width: fit-content;
}

.td-product__sale-label {
	color: #4e7184;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	padding-left: 14px;
}

.td-product__sale-field {
	display: inline-flex;
	align-items: stretch;
	background: #ffffff;
	border: 1px solid #d6dce0;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
	transition: border-color .15s, background-color .15s;
}

.td-product__sale-input {
	width: 70px;
	height: 36px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: #1f2937;
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	-moz-appearance: textfield;
}

.td-product__sale-input::-webkit-outer-spin-button,
.td-product__sale-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.td-product__sale-input:focus {
	outline: 0;
}

.td-product__sale-input::placeholder {
	color: #afc3ce;
	opacity: 1;
}

.td-product__sale-field:focus-within {
	border-color: #4e7184;
}

.td-product__sale-field.is-error {
	border-color: #d62828;
	background-color: #fff5f5;
}

.td-product__sale-suffix {
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	border-left: 1px solid #e4e7ea;
	color: #7c7c7c;
	font-size: 13px;
	font-weight: 500;
	background: #fafbfc;
}

.td-product__sale-error {
	color: #d62828;
	font-size: 13px;
}

/* Quantity stepper */

.td-product__cta-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 10px !important;
}

.td-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #d6dce0;
	border-radius: 7px;
	overflow: hidden;
	background: #ffffff;
	height: 48px;
	flex-shrink: 0;
}

.td-qty__btn {
	width: 38px;
	background: transparent;
	border: 0;
	color: #4e7184;
	font-size: 18px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.td-qty__btn:hover {
	background: #f2f6f9;
	color: #1f2937;
}

.td-qty__input {
	width: 48px;
	border: 0;
	border-left: 1px solid #d6dce0;
	border-right: 1px solid #d6dce0;
	text-align: center;
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
	background: transparent;
	-moz-appearance: textfield;
}

.td-qty__input::-webkit-outer-spin-button,
.td-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.td-qty__input:focus {
	outline: 0;
}

/* Дропать */

.td-product__cta {
	flex: 1;
	height: 48px;
	min-width: 220px;
	padding: 0 24px;
	background: #2dc270;
	color: #ffffff;
	border: 0;
	border-radius: 7px;
	font-family: 'Rubik', sans-serif;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s, opacity .15s;
}

.td-product__cta:hover {
	background: #1d9350;
}

.td-product__cta.is-disabled,
.td-product__cta:disabled {
	background: #2dc270;
	opacity: .45;
	cursor: not-allowed;
}

.td-product__cta.is-blocked {
	cursor: not-allowed;
}

/* Category — sits below the SKU in the stacked .td-product__meta. */

.td-product__category {
	margin: 0;
	color: #4e7184;
	font-size: 14px;
}

.td-product__category span,
.td-product__category-link {
	color: #1f2937;
	font-weight: 500;
	margin-left: 4px;
}

.td-product__category-link {
	color: #4e7184;
	text-decoration: none;
	transition: color .15s;
}

.td-product__category-link:hover {
	color: #2dc270;
	text-decoration: underline;
}

/* -----------------------------------------------------------
   Copy button
   ----------------------------------------------------------- */

.td-copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 4px;
	background: transparent;
	border: 0;
	color: #afc3ce;
	cursor: pointer;
	border-radius: 4px;
	transition: color .15s, background-color .15s;
	flex-shrink: 0;
}

.td-copy-btn:hover {
	color: #4e7184;
	background: #f2f6f9;
}

.td-copy-btn.is-success {
	color: #4e7184;
}

.td-copy-btn--lg {
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 500;
	color: #4e7184;
	border: 1px solid #d6dce0;
}

.td-copy-btn--lg:hover {
	color: #ffffff;
	background: #4e7184;
	border-color: #4e7184;
}

/* -----------------------------------------------------------
 * Tab panels — full-width grey strip below the product columns.
 * The .td-shell inside re-constrains the body to the standard
 * 1000px content boundary.
 * ----------------------------------------------------------- */

.td-product-panels {
	background: #f7f7f7;
	border-top: 1px solid #e4e7ea;
	padding: 0 0 28px;
}

.td-product-panel[hidden] {
	display: none !important;
}

.td-product-panel__body {
	position: relative;
	color: #1f2937;
	font-size: 14px;
	line-height: 1.6;
	background: #f7f7f7;
	padding: 20px 0 0;
}

.td-product-panel__copy {
	flex: 0 0 auto;
	align-self: center;  /* vertically centered in the header, not bottom-aligned */
}

/* The copy button lives in the tab header and is toggled per active tab
 * (hidden entirely while the photos panel shows). Beats .td-copy-btn's
 * display:inline-flex via the higher-specificity attribute selector. */
.td-product-panel__copy[hidden] {
	display: none;
}

.td-product-desc p {
	margin: 0 0 12px;
}

.td-product-desc p:first-child {
	margin-top: 0;
}

.td-product-desc p:last-child {
	margin-bottom: 0;
}

.td-product-empty {
	color: #7c7c7c;
	font-style: italic;
}

/* Specs table */

.td-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.td-specs th,
.td-specs td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #eef2f5;
}

.td-specs th {
	width: 38%;
	color: #4e7184;
	font-weight: 500;
	background: #fafbfc;
}

.td-specs td {
	color: #1f2937;
}

/* Description text is normalised to the same size as a specs table cell
   (.td-specs td → 14px from .td-specs). The catch-all clamps any scraped
   inline-sized markup so the two panels always read at one size. Applies
   on every viewport, not just mobile. */
.td-product-desc,
.td-product-desc * {
	font-size: 14px !important;
}

.td-specs__unit {
	color: #7c7c7c;
	margin-left: 4px;
}

/* -----------------------------------------------------------
 * Photos tab — horizontal carousel per section
 * ----------------------------------------------------------- */

.td-photos-section {
	margin-top: 0;
}

.td-photos__heading {
	margin: 0 0 12px;
	font-family: 'Rubik', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #4e7184;
}

/* Visible divider between Главні фото and Додаткові фото. */
.td-photos-divider {
	border: 0;
	border-top: 1px solid #e4e7ea;
	margin: 28px 0;
}

/* Carousel: horizontal scroll, snap to tile boundaries. */
.td-photos--carousel {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px; /* room for the scrollbar */
}

.td-photos--carousel::-webkit-scrollbar {
	height: 12px;
}

.td-photos--carousel::-webkit-scrollbar-thumb {
	background: #afc3ce;
	border-radius: 6px;
	border: 2px solid #f7f7f7;
}

.td-photos--carousel::-webkit-scrollbar-thumb:hover {
	background: #4e7184;
}

.td-photos--carousel::-webkit-scrollbar-track {
	background: transparent;
}

/* Firefox */
.td-photos--carousel {
	scrollbar-width: auto;
	scrollbar-color: #afc3ce transparent;
}

.td-photos__tile {
	position: relative;
	margin: 0;
	flex: 0 0 220px;
	width: 220px;
	height: 220px;
	background: #ffffff;
	border-radius: 7px;
	overflow: hidden;
	scroll-snap-align: start;
}

.td-photos__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: zoom-in;
}

.td-photos__btn--download {
	position: absolute;
	top: auto;
	bottom: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #4e7184;
	color: #ffffff;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .15s;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.td-photos__btn--download:hover {
	background: #1f2937;
	color: #ffffff;
}

/* -----------------------------------------------------------
   Lightbox
   ----------------------------------------------------------- */

.td-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.td-lightbox[hidden] {
	display: none !important;
}

.td-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.86);
}

.td-lightbox__frame {
	position: relative;
	display: inline-flex;
	z-index: 1;
}

.td-lightbox__img {
	display: block;
	max-width: 90vw;
	max-height: 88vh;
	object-fit: contain;
	border-radius: 7px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.td-lightbox__close {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #ffffff;
	color: #1f2937;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background-color .15s, color .15s;
}

.td-lightbox__close:hover {
	background: #4e7184;
	color: #ffffff;
}

.td-lightbox__download {
	position: absolute;
	top: auto;
	bottom: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(78, 113, 132, 0.92);
	color: #ffffff;
	border-radius: 6px;
	text-decoration: none;
	z-index: 2;
	transition: background-color .15s;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.td-lightbox__download:hover {
	background: #1f2937;
	color: #ffffff;
}

.td-lightbox__nav {
	position: relative;
	width: 48px;
	height: 48px;
	margin: 0 24px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: #1f2937;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	flex-shrink: 0;
	transition: background-color .15s, color .15s;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.td-lightbox__nav:hover {
	background: #4e7184;
	color: #ffffff;
}

.td-lightbox__nav[hidden] {
	display: none !important;
}

/* Mobile: let a tall image show at full width and scroll vertically instead of
   being shrunk to fit the viewport height. Controls are pinned to the viewport
   so they stay reachable while the image scrolls. */
@media ( max-width: 900px ) {
	.td-lightbox {
		align-items: flex-start;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.td-lightbox__backdrop {
		position: fixed;
	}
	.td-lightbox__frame {
		margin: auto;
		width: 100%;
		justify-content: center;
	}
	.td-lightbox__img {
		max-width: 100%;
		max-height: none;
		border-radius: 0;
	}
	.td-lightbox__close {
		position: fixed;
		top: 12px;
		right: 12px;
	}
	.td-lightbox__download {
		position: fixed;
		bottom: 12px;
		right: 12px;
	}
	/* No on-screen nav on mobile — the user swipes left/right to change
	   image (see product.js). */
	.td-lightbox__nav {
		display: none;
	}
}

/* -----------------------------------------------------------
   Toast (copy feedback)
   ----------------------------------------------------------- */

.td-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #1f2937;
	color: #ffffff;
	padding: 10px 18px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}

.td-toast[hidden] {
	display: none;
}

.td-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* -----------------------------------------------------------
 * Similar products — full-width white strip with horizontal rail
 * of cards. Only rendered when there are siblings in the same
 * category that are currently in stock.
 * ----------------------------------------------------------- */

.td-product-similar {
	background: #ffffff;
	border-top: 1px solid #e4e7ea;
	padding: 28px 0 48px;
}

.td-product-similar__title {
	margin: 0 0 18px;
	font-family: 'Rubik', sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
}

.td-product-similar__rail {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 12px;
}

.td-product-similar__rail::-webkit-scrollbar {
	height: 12px;
}

.td-product-similar__rail::-webkit-scrollbar-thumb {
	background: #afc3ce;
	border-radius: 6px;
	border: 2px solid #ffffff;
}

.td-product-similar__rail::-webkit-scrollbar-thumb:hover {
	background: #4e7184;
}

.td-product-similar__rail::-webkit-scrollbar-track {
	background: transparent;
}

.td-product-similar__rail {
	scrollbar-width: auto;
	scrollbar-color: #afc3ce transparent;
}

/* ---- Card ---- */

.td-similar-card {
	flex: 0 0 200px;
	width: 200px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	scroll-snap-align: start;
}

.td-similar-card__image {
	display: block;
	width: 200px;
	height: 200px;
	background: #f4f6f8;
	border-radius: 7px;
	overflow: hidden;
	transition: transform .15s;
}

.td-similar-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.td-similar-card__image:hover {
	transform: translateY(-2px);
}

.td-similar-card__noimage {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, #eef2f5 25%, transparent 25%) -10px 0,
		linear-gradient(225deg, #eef2f5 25%, transparent 25%) -10px 0,
		linear-gradient(315deg, #eef2f5 25%, transparent 25%),
		linear-gradient(45deg,  #eef2f5 25%, transparent 25%);
	background-size: 20px 20px;
	background-color: #f4f6f8;
}

.td-similar-card__title {
	color: #4e7184;
	text-decoration: none;
	font-family: 'Rubik', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 36px;
}

.td-similar-card__title:hover {
	color: #1f2937;
}

.td-similar-card__price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.td-similar-card__price-label {
	color: #4e7184;
	font-size: 13px;
	font-weight: 500;
}

.td-similar-card__price-value {
	color: #2dc270;
	font-weight: 700;
	font-size: 16px;
}

.td-similar-card__currency {
	font-size: 10px;
	font-weight: 600;
	margin-left: 2px;
	vertical-align: super;
}

/* ============================================================
 * Mobile (≤ 720px) — single-column rebuild
 * ============================================================ */

.td-product-tabs--m { display: none; }

/* Photos button — overlaid on the bottom strip of the hero on ALL viewports.
   Translucent (#afc3ce, matches .td-search__btn) so the photo reads through;
   corners clipped by the hero's overflow:hidden. On mobile it opens the photos
   modal; on desktop it reveals + scrolls to the photos panel (product.js
   branches on viewport). */
.td-product__photos-btn {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	padding: 0 16px;
	background: rgba( 78, 113, 132, .72 );  /* #4e7184 — default dark teal */
	color: #ffffff;
	border: 0;
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}
.td-product__photos-btn:hover,
.td-product__photos-btn:active { background: rgba( 63, 93, 109, .85 ); }  /* #3f5d6d — darker on hover */
.td-product__photos-btn svg { flex: 0 0 auto; }

@media (max-width: 720px) {
	.td-product__top {
		grid-template-columns: 1fr;
		gap: 0;
		margin-bottom: 0;  /* mobile gap is handled by .td-product-panels margin-top */
	}

	.td-product__info {
		padding-top: 20px;
		gap: 14px;
		text-align: left;
		align-items: stretch;
	}

	/* Title — 16px on mobile (per v0.9.153 spec). */
	.td-product__title { font-size: 17px; line-height: 1.3; }

	/* Two variations forced onto a single row on mobile. */
	.td-product__variations {
		flex-wrap: nowrap;
		gap: 12px;
		margin-top: 10px;
	}
	.td-variation {
		flex: 1 1 0;
		min-width: 0;
	}
	.td-variation__select {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		padding-right: 24px;
	}

	.td-product__cta-row { gap: 10px; }
	.td-product__cta { min-width: 0; padding: 0 16px; }
	/* Narrower stepper so the green Дропати button claims more of the row. */
	.td-qty__btn   { width: 32px; }
	.td-qty__input { width: 36px; }

	/* Mobile tab nav — first child of the panels shell. Side padding comes
	   from the shell (default gutters). 16px gap between tabs; 12px below the
	   nav before the panel. */
	.td-product-tabs--m {
		display: flex;
		gap: 16px;
		width: 100%;
		margin: 0 0 12px;
		border: 0;
		border-radius: 0;
	}
	/* Each tab is a single <button> — text in center, copy SVG sits
	   2px after the text. One element per tab; clicking the SVG
	   triggers copy, clicking anywhere else switches the panel. */
	.td-product-tab--m {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 2px;
		height: 48px;
		min-width: 0;
		padding: 0 8px;
		background: transparent;
		border: 0;
		border-top: 2px solid transparent;
		font-family: inherit;
		font-size: 14px;
		font-weight: 500;
		color: #afc3ce;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: color .15s, border-color .15s;
	}
	.td-product-tab--m.is-active {
		color: #4e7184;
		border-top-color: #4e7184;
		font-weight: 600;
	}
	/* Copy SVG — inline, with extra left margin so it sits clearly apart from
	   the tab text. margin (not padding) keeps the 14px icon at full size
	   under the global box-sizing:border-box. Inherits the tab's color
	   (teal inactive, white active); turns green on success. */
	.td-product-tab--m__copy {
		flex: 0 0 auto;
		margin-left: 6px;
		color: currentColor;
		cursor: pointer;
	}
	.td-product-tab--m__copy.is-success {
		color: #2dc270;
	}

	/* Desktop tab header is hidden on mobile — the .td-product-tabs--m nav
	   inside the shell drives the panels here instead. */
	.td-product-tabhead { display: none; }

	/* 42px gap between the product columns above and the panels section, so
	   the tabs don't butt straight up against the Дропати button. */
	.td-product-panels { margin-top: 42px; padding: 0 0 36px; }
	/* The mobile tab nav is now the first child of this shell, so its 16px
	   side padding doubles as the nav's "default side padding". Top is 0 —
	   the nav has no margin and feeds straight into the panel below it. */
	.td-product-panels > .td-shell {
		padding-top: 0;
		padding-left: 16px;
		padding-right: 16px;
	}

	.td-product-panel__copy { display: none; }
	.td-product-panel__body {
		font-size: 14px;
		line-height: 1.55;
		padding: 0;
	}

	/* Split the specs label/value column down the middle of the screen. */
	.td-specs th { width: 50%; }

	/* Description content — kill external padding/margin from other
	   stylesheets that were giving the first <p> a 130px right-pad. */
	.td-product-desc,
	.td-product-desc > div,
	.td-product-desc p,
	.td-product-desc ul,
	.td-product-desc ol,
	.td-product-desc li {
		padding: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.td-product-desc p {
		margin: 0 0 12px 0 !important;
		font-size: 14px !important;
		line-height: 1.55 !important;
	}
	.td-product-desc li {
		margin: 0 0 4px 0 !important;
		font-size: 14px !important;
		line-height: 1.55 !important;
	}
	.td-product-desc ul,
	.td-product-desc ol {
		margin: 0 0 12px 0 !important;
		padding-left: 20px !important;
	}
	.td-product-desc div[style*="font-size"] { font-size: 14px !important; }
	.td-product-desc b,
	.td-product-desc strong,
	.td-product-desc span {
		font-size: 14px !important;
		line-height: 1.55 !important;
	}
}

/* ============================================================
 * Photos popup modal
 * ============================================================ */

.td-product-photos-modal[hidden] { display: none; }
.td-product-photos-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 16px;   /* default 16px breathing room around the card on mobile */
}
.td-product-photos-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 15, 23, 42, .55 );
	cursor: pointer;
}
.td-product-photos-modal__card {
	position: relative;
	width: 100%;
	max-width: 720px;
	max-height: calc( 100vh - 32px );
	background: #ffffff;
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 -8px 32px rgba( 15, 23, 42, .22 );
	animation: td-product-photos-slideup .22s ease;
}
@keyframes td-product-photos-slideup {
	from { transform: translateY( 16px ); opacity: 0; }
	to   { transform: translateY( 0    ); opacity: 1; }
}
.td-product-photos-modal__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid #e4e7ea;
}
.td-product-photos-modal__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
}
.td-product-photos-modal__close {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 7px;
	color: #4e7184;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.td-product-photos-modal__close:hover { background: #f2f6f9; color: #1f2937; }
.td-product-photos-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px;
}
.td-product-photos-modal__body .td-photos-section + .td-photos-section,
.td-product-photos-modal__body .td-photos-divider + .td-photos-section { margin-top: 20px; }
body.td-product-photos-open { overflow: hidden; }

/* Photo carousels inside the modal — force an always-visible, fatter
   scrollbar so the horizontal scroll is obvious and easy to grab. */
.td-product-photos-modal__body .td-photos--carousel {
	overflow-x: scroll;          /* always show the bar, not only on hover */
	padding-bottom: 14px;        /* room for the taller bar */
	scrollbar-width: auto;       /* Firefox: normal-width, not thin */
	scrollbar-color: #afc3ce #eef2f5;
}
.td-product-photos-modal__body .td-photos--carousel::-webkit-scrollbar {
	height: 16px;
}
.td-product-photos-modal__body .td-photos--carousel::-webkit-scrollbar-track {
	background: #eef2f5;
	border-radius: 8px;
}
.td-product-photos-modal__body .td-photos--carousel::-webkit-scrollbar-thumb {
	background: #afc3ce;
	border-radius: 8px;
	border: 3px solid #ffffff;   /* white gutter against the modal's white body */
}
.td-product-photos-modal__body .td-photos--carousel::-webkit-scrollbar-thumb:hover {
	background: #4e7184;
}

/* The modal's centred / 24px-padded desktop treatment only kicks in at the
   project's real desktop breakpoint, so the 16px bottom-sheet padding holds
   across every mobile and tablet width (≤900px). */
@media (min-width: 901px) {
	.td-product-photos-modal { align-items: center; padding: 24px; }
	.td-product-photos-modal__card { border-radius: 12px; max-height: 86vh; }
}