/*
 * Страница товара.
 * Значения прототипа: колонки 1.15fr / 1fr, gap 64, миниатюры 88px слева,
 * кадр 4:5, цена 24, характеристики в рамке 18/0, гармошка 14 капсом.
 */

.sb-pdp-wrap {
	padding-block: 0 var(--sb-space-24);
	background: var(--sb-bg);
	color: var(--sb-text);
	font-family: var(--sb-font-body);
	font-size: var(--sb-size-base);
	line-height: var(--sb-leading-base);
}

.sb-pdp {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 64px;
	padding-top: var(--sb-space-12);
}

/* Только для скринридеров */
.sb-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ======================================================================
   Галерея
   ====================================================================== */

.sb-pdp__gal {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: var(--sb-space-4);
	align-items: start;
}

/* Одно фото — колонка миниатюр не нужна */
.sb-pdp__gal:not(:has(.sb-pdp__thumbs)) {
	grid-template-columns: 1fr;
}

.sb-pdp__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--sb-space-3);
}

.sb-pdp__thumb {
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	border: 1px solid transparent;
	background: #FAF4E1;
	cursor: pointer;
}

.sb-pdp__thumb.is-on {
	border-color: var(--sb-accent);
}

.sb-pdp__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sb-pdp__main {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #FAF4E1;
}

.sb-pdp__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sb-pdp__noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--sb-bg-alt);
}

/* Снимки упаковки без фона: вписываем с полями, а не обрезаем */
.sb-pdp__gal.is-pack .sb-pdp__main,
.sb-pdp__gal.is-pack .sb-pdp__thumb {
	background: transparent;
}

.sb-pdp__gal.is-pack .sb-pdp__img {
	object-fit: contain;
	padding: 4% 8%;
}

.sb-pdp__gal.is-pack .sb-pdp__thumb img {
	object-fit: contain;
	padding: 8%;
}

/* ======================================================================
   Правая колонка
   ====================================================================== */

/* Колонка едет за прокруткой, пока листаешь описание */
.sb-pdp__col {
	position: sticky;
	top: 96px;
	align-self: start;
}

.sb-pdp .sb-pdp__title {
	margin: 0;
	font-size: var(--sb-size-2xl);
	letter-spacing: 0.005em;
	text-wrap: balance;
}

.sb-pdp .sb-pdp__quote {
	margin: 14px 0 0;
	font-style: italic;
	color: #333;
}

.sb-pdp .sb-pdp__price {
	margin: 18px 0;
	font-family: var(--sb-font-display);
	font-weight: 500;
	font-size: 1.5rem;   /* 24 */
}

.sb-pdp__price .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

.sb-pdp__price del { opacity: 0.45; font-size: 0.8em; }
.sb-pdp__price ins { text-decoration: none; color: var(--sb-accent); }

/* --- Характеристики ------------------------------------------------------ */
.sb-pdp__picto {
	display: flex;
	gap: 28px;

	margin: 0 0 var(--sb-space-6);
	padding: 18px 0;
	list-style: none;

	border-top: 1px solid rgb(198 182 165 / 0.7);
	border-bottom: 1px solid rgb(198 182 165 / 0.7);
}

.sb-pdp__picto li {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 0.875rem;   /* 14 */
	line-height: 1.29;
}

.sb-pdp__picto svg {
	flex: 0 0 auto;
}

/* --- Форма покупки WooCommerce -------------------------------------------
   Разметку даёт WooCommerce, мы только приводим её к виду прототипа. */
.sb-pdp__col form.cart {
	display: flex;
	gap: var(--sb-space-3);
	align-items: stretch;
	margin: 0;
}

.sb-pdp__col form.cart .quantity {
	display: flex;
	align-items: center;
	overflow: hidden;

	border: 1.5px solid var(--sb-accent-deep);
	border-radius: 999px;
	background: rgb(156 46 27 / 0.06);
}

.sb-pdp__col form.cart .quantity input[type="number"] {
	width: 56px;
	height: 44px;
	padding: 0;

	border: 0;
	background: transparent;
	color: var(--sb-accent-deep);

	font-family: var(--sb-font-display);
	font-weight: 500;
	font-size: 1rem;
	text-align: center;
	-moz-appearance: textfield;
}

.sb-pdp__col form.cart .quantity input::-webkit-outer-spin-button,
.sb-pdp__col form.cart .quantity input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Кнопку WooCommerce приводим к нашей .sb-btn */
.sb-pdp__col form.cart button[type="submit"],
.sb-pdp__col form.cart .single_add_to_cart_button {
	flex: 1;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding-inline: 26px;

	border: 1.5px solid var(--sb-accent-deep);
	border-radius: 999px;
	background: rgb(156 46 27 / 0.06);
	color: var(--sb-accent-deep);

	font-family: var(--sb-font-display);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	cursor: pointer;
	transition: background var(--sb-transition), color var(--sb-transition), border-color var(--sb-transition);
}

.sb-pdp__col form.cart button[type="submit"]:hover,
.sb-pdp__col form.cart .single_add_to_cart_button:hover {
	background: var(--sb-accent);
	border-color: var(--sb-accent);
	color: var(--sb-beige);
}

/* --- Доставка -------------------------------------------------------------- */
.sb-pdp .sb-pdp__deliv {
	display: flex;
	gap: 10px;
	align-items: center;

	margin: var(--sb-space-4) 0 0;
	font-size: 0.875rem;
	color: #3D3D3D;
}

/* ======================================================================
   Гармошка
   ====================================================================== */

.sb-pdp__acc {
	margin-top: var(--sb-space-10);
	border-top: 1px solid var(--sb-border);
}

.sb-pdp__acc-h {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 18px 0;

	border: 0;
	border-bottom: 1px solid var(--sb-border);
	background: none;
	color: inherit;

	font-family: var(--sb-font-display);
	font-weight: 500;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;

	cursor: pointer;
}

/* Знак рисуем стилями: разметка не должна знать о состоянии */
.sb-pdp__acc-h span::before {
	content: '+';
	font-size: 1.125rem;
	line-height: 1;
}

.sb-pdp__acc-h[aria-expanded="true"] span::before {
	content: '–';
}

.sb-pdp__acc-b {
	display: none;
	padding: 4px 0 24px;
	border-bottom: 1px solid var(--sb-border);
	font-size: 1rem;
	line-height: 1.625;
}

.sb-pdp__acc-b.is-on {
	display: block;
}

/* --- Таблица КБЖУ ---------------------------------------------------------- */
.sb-pdp__nutri {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;   /* 15 */
}

.sb-pdp__nutri th,
.sb-pdp__nutri td {
	padding: 9px 0;
	border-bottom: 1px solid rgb(198 182 165 / 0.7);
	font-weight: 400;
	text-align: left;
}

.sb-pdp__nutri td {
	text-align: right;
	font-family: var(--sb-font-display);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.sb-pdp .sb-pdp__note {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	line-height: 1.38;
	color: #4A4A4A;
}

/* ======================================================================
   Похожие товары
   ====================================================================== */

.sb-pdp__related {
	margin-top: var(--sb-space-24);
}

.sb-pdp .sb-pdp__related-title,
.sb-pdp__related-title {
	margin: 0 0 var(--sb-space-10);
	font-family: var(--sb-font-display);
	font-weight: var(--sb-weight-heading);
	font-size: var(--sb-size-2xl);
	line-height: var(--sb-leading-heading);
	letter-spacing: 0.005em;
}

/* ======================================================================
   Полоса покупки на телефоне
   ====================================================================== */

.sb-pdp__sticky {
	display: none;
}

/* ======================================================================
   Адаптив
   ====================================================================== */

@media (max-width: 1100px) {
	.sb-pdp {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sb-space-8);
	}

	.sb-pdp__col {
		position: static;
	}

	.sb-pdp__gal {
		grid-template-columns: 1fr;
	}

	/* Миниатюры уходят под главное фото строкой */
	.sb-pdp__thumbs {
		flex-direction: row;
		order: 2;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.sb-pdp__thumbs::-webkit-scrollbar { display: none; }

	.sb-pdp__thumb {
		flex: 0 0 72px;
		width: 72px;
	}

	.sb-pdp__main { order: 1; }

	.sb-pdp__picto {
		flex-wrap: wrap;
		gap: 14px 20px;
	}

	.sb-pdp__picto li {
		flex: 0 0 calc(50% - 10px);
	}

	.sb-pdp__related .sb-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Полоса покупки: кнопка всегда под рукой, пока читаешь описание */
	.sb-pdp__sticky[hidden] {
		display: none;
	}

	.sb-pdp__sticky {
		display: flex;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 40;

		gap: var(--sb-space-3);
		align-items: center;
		padding: 10px 16px;

		background: var(--sb-bg);
		border-top: 1px solid var(--sb-border);
	}

	.sb-pdp__sticky strong {
		font-family: var(--sb-font-display);
		font-weight: 500;
		font-size: 1.125rem;
	}

	.sb-pdp__sticky .sb-btn {
		flex: 1;
	}
}

@media (max-width: 560px) {
	.sb-pdp__related .sb-products__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}