/* SCALA · магазин, v0.2.0: product pages. Design: "SCALA · нов сайт · образец", version 20 (artboards No42 … Grana, Shop). */

/* ---------- palettes by line (body class from the parent: sc-theme-whisky / wine / bars) ---------- */

body.single-product {
	--p-bg: #0D0B08; --p-panel: #120E0A; --p-card: #0D0B08; --p-fg: #EFE6D2; --p-muted: #C9BCA2; --p-dim: #A89A80;
	--p-acc: #D1A862; --p-line: rgba(209,168,98,.3); --p-line2: rgba(209,168,98,.16);
	--btn-bg: #D1A862; --btn-fg: #0D0B08;
}
body.single-product.sc-theme-wine {
	--p-bg: #24090F; --p-panel: #2C0E15; --p-card: #24090F; --p-fg: #F2EBDD; --p-muted: #E0D2C0; --p-dim: #CDBFAE;
	--p-acc: #E3C08A; --p-line: rgba(227,192,138,.32); --p-line2: rgba(227,192,138,.16);
	--btn-bg: #E3C08A; --btn-fg: #24090F;
}
body.single-product.sc-theme-bars {
	--p-bg: #F7F1E7; --p-panel: #FFFFFF; --p-card: #FFFFFF; --p-fg: #2A1B23; --p-muted: #4A3740; --p-dim: #5A4650;
	--p-acc: #B2242D; --p-line: rgba(42,27,35,.22); --p-line2: rgba(42,27,35,.12);
	--btn-bg: #B2242D; --btn-fg: #FFF8F0;
}
body.single-product { background: var(--p-bg); color: var(--p-fg); --mood-bg: var(--p-bg); --mood-fg: var(--p-fg); --mood-accent: var(--p-acc); --mood-muted: var(--p-dim); }
body.single-product a { color: var(--p-acc); }
body.single-product .sc-header { border-bottom: 1px solid var(--p-line2); }

.sc-p-notices .woocommerce-notices-wrapper:not(:empty) { max-width: calc(var(--sc-inner) + 2 * var(--sc-gut)); margin: 0 auto; padding: 16px var(--sc-gut) 0; }
.sc-p-notices .woocommerce-message, .sc-p-notices .woocommerce-error, .sc-p-notices .woocommerce-info {
	margin: 0; padding: 14px 18px; list-style: none; border: 1px solid var(--p-line); color: var(--p-fg); font-size: 14px;
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px;
}
.sc-p-notices .woocommerce-message .button { order: 2; color: var(--p-acc); font-weight: 700; }

/* ---------- base ---------- */

.sc-product { background: var(--p-bg); color: var(--p-fg); }
.sc-product :where(p, h1, h2, h3, figure, ul, ol, table) { margin: 0; }
.sc-product :where(h1, h2, h3) { font-weight: 400; }
.sc-product .eyebrow { color: var(--p-acc); }
.sc-product .wp-block-image img { display: block; }

.sc-p-sec { display: flex; flex-direction: column; gap: 40px; padding: 88px var(--sc-pad); }
.sc-p-sec--panel { background: var(--p-panel); border-top: 1px solid var(--p-line2); }
.sc-p-sec h2 { font-family: var(--f-serif); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 1; }
.sc-p-head { display: flex; flex-direction: column; gap: 14px; }
.sc-p-head h2 { font-size: clamp(36px, 4.4vw, 56px); }

/* ---------- hero ---------- */

.sc-p-hero {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 56px; align-items: center;
	padding: 56px var(--sc-pad) 88px;
}
.sc-p-art { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; }
.sc-p-art > * { position: relative; }
.sc-p-art--rings::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: min(700px, 125%); aspect-ratio: 1; transform: translate(-50%, -54%);
	background: var(--sc-img-rings) center / contain no-repeat; opacity: .45; pointer-events: none;
}
.sc-p-art--waves::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 330px; transform: translateY(-50%);
	background: var(--sc-img-waves) center / auto 100% no-repeat; pointer-events: none;
}
.sc-p-art .sc-label-img { width: min(340px, 72%); }
.sc-p-art .sc-photo-tilt { width: min(520px, 100%); }

.sc-p-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.sc-p-title { font-family: var(--f-serif); font-size: clamp(52px, 6.4vw, 88px); line-height: .95; letter-spacing: -.01em; text-wrap: balance; }
.sc-p-claim { font-family: var(--f-serif); font-size: clamp(34px, 3.8vw, 48px); line-height: 1; color: var(--p-acc); }
.sc-p-tagline { font-family: var(--f-serif); font-style: italic; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; color: var(--p-acc); }
.sc-theme-bars .sc-p-tagline { font-weight: 500; }

.sc-p-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sc-p-claim + .sc-p-tags { margin-top: -8px; }
.sc-p-tags:has(.sc-p-seal) { gap: 18px; }
.sc-p-band { padding: 10px 18px; background: var(--p-acc); color: var(--p-bg); font-weight: 800; font-size: 13px; line-height: 1.4; letter-spacing: .12em; }
.sc-p-tag { padding: 9px 16px; border: 1px solid var(--p-acc); color: var(--p-acc); font-weight: 800; font-size: 13px; line-height: 1.4; letter-spacing: .12em; }
.sc-p-seal {
	width: 132px; height: 132px; flex: none; border-radius: 50%; border: 1px solid var(--p-acc);
	box-shadow: inset 0 0 0 5px var(--p-bg), inset 0 0 0 6px var(--p-line);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px; text-align: center;
}
.sc-p-seal__k { font-size: 9px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; }
.sc-p-seal__v { font-family: var(--f-serif); font-size: 34px; font-weight: 600; line-height: 1.1; color: var(--p-acc); }

.sc-p-lead { font-size: 19px; line-height: 1.5; font-weight: 600; }
.sc-p-sub { font-size: 17px; line-height: 1.5; font-style: italic; color: var(--p-muted); }
.sc-p-lead + .sc-p-sub { margin-top: -14px; }

ul.sc-p-chips { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.sc-p-chips li {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 8px 6px;
	border: 1px solid var(--p-acc); border-radius: 8px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .03em; line-height: 1.3;
}
.sc-p-chips strong { font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--p-acc); }
.sc-p-chips sup { font-size: .7em; vertical-align: .45em; line-height: 0; }
.sc-p-foot { font-size: 12px; color: var(--p-dim); }

/* buy box (rendered from the paragraph .sc-buy) */
.sc-buy { padding: 6px; border: 1px solid var(--p-line); }
.sc-buy__in { padding: 22px 24px; border: 1px solid var(--p-line2); display: flex; flex-direction: column; gap: 18px; }
.sc-buy__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.sc-buy__box { font-size: 12px; color: var(--p-dim) !important; }
.sc-buy__now { font-size: 28px; font-weight: 700; }
.sc-buy__old { font-size: 13px; font-weight: 500; opacity: .75; }
.sc-buy__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; }
.sc-qty { display: inline-flex; align-items: center; border: 1px solid var(--p-line); border-radius: 999px; }
.sc-qty__btn { width: 48px; height: 50px; background: none; border: 0; color: var(--p-fg); font-size: 22px; line-height: 1; cursor: pointer; }
.sc-qty__input {
	width: 40px; height: 50px; padding: 0; border: 0; background: transparent; color: var(--p-fg); text-align: center;
	font: 700 16px/1 var(--f-sans); -moz-appearance: textfield; appearance: textfield;
}
.sc-qty__input::-webkit-outer-spin-button, .sc-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-buy__form .sc-btn-link { flex: 1 1 220px; min-height: 50px; }
.sc-buy__form .sc-btn-link[disabled] { opacity: .6; cursor: progress; transform: none; }
.sc-buy__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--p-dim); }
.sc-buy__foot a { font-weight: 600; color: var(--p-acc); }
.sc-buy__msg { font-size: 13px; color: var(--p-acc); }
.sc-buy__out { font-weight: 700; color: var(--p-dim); }

/* ---------- benefits ---------- */

.sc-p-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 1px; background: var(--p-line); border: 1px solid var(--p-line); }
.sc-p-benefit { background: var(--p-panel); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.sc-p-benefit p { font-size: 14px; line-height: 1.6; color: var(--p-muted); }
.sc-p-benefit p.sc-p-benefit__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--f-display); font-size: 20px; line-height: 1.3; color: var(--p-fg); }
.sc-p-benefit__head strong { font-family: var(--f-sans); font-size: 16px; font-weight: 700; color: var(--p-acc); text-align: right; }
.sc-p-note { font-size: 14px; color: var(--p-muted); }

/* ---------- ingredients and nutrition table ---------- */

.sc-p-label { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 56px; align-items: start; }
.sc-p-label__text { display: flex; flex-direction: column; gap: 16px; }
.sc-p-ingr { font-size: 16px; line-height: 1.75; color: var(--p-muted); }
.sc-p-ingr strong, .sc-p-facts strong { color: var(--p-fg); }
.sc-p-ingr strong:first-child { font-weight: 700; }
.sc-p-allerg { font-size: 15px; line-height: 1.7; color: var(--p-muted); }
.sc-p-facts { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.sc-p-facts p { font-size: 14px; line-height: 1.7; color: var(--p-dim); }
.sc-p-facts strong { font-weight: 600; }

.sc-p-nutr-box { padding: 6px; border: 1px solid var(--p-line); min-width: 0; }
.sc-p-nutr { display: flex; flex-direction: column; overflow-x: auto; }
.sc-p-nutr figcaption { order: -1; margin: 0; padding: 18px 20px 12px; text-align: left; font-family: var(--f-display); font-size: 20px; letter-spacing: .04em; color: var(--p-fg); border: 1px solid var(--p-line2); border-bottom: 0; }
.sc-p-nutr figcaption em { font-family: var(--f-sans); font-style: normal; font-size: 13px; letter-spacing: 0; color: var(--p-dim); }
.sc-p-nutr table { width: 100%; border-collapse: collapse; border: 1px solid var(--p-line2); font-size: 15px; }
.sc-p-nutr figcaption + table, .sc-p-nutr table:has(+ figcaption) { border-top: 0; }
.sc-p-nutr td, .sc-p-nutr th { padding: 11px 20px; border: 0; border-top: 1px solid var(--p-line2); text-align: right; white-space: nowrap; font-weight: 700; }
.sc-p-nutr td:first-child, .sc-p-nutr th:first-child { text-align: left; font-weight: 500; white-space: normal; }
.sc-p-nutr thead th { font-weight: 500; color: var(--p-dim); border-top: 0; }
.sc-p-nutr thead th:first-child { font-weight: 600; color: var(--p-fg); }
.sc-p-nutr td em { font-style: normal; font-weight: 400; color: var(--p-muted); padding-left: 16px; display: inline-block; }
.sc-p-nutr tr:has(td em) td:not(:first-child) { font-weight: 400; }
.sc-p-tfoot { padding: 12px 20px 14px; font-size: 12px; color: var(--p-dim); }

/* ---------- recipes ---------- */

.sc-p-recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px; }
.sc-p-recipe { background: var(--p-card); border: 1px solid var(--p-line2); display: flex; flex-direction: column; }
.sc-p-recipe__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sc-p-recipe__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.sc-p-recipe__body h3 { font-family: var(--f-serif); font-weight: 500; font-size: 28px; line-height: 1.1; }
.sc-p-recipe__body p { font-size: 15px; line-height: 1.65; color: var(--p-muted); }

/* ---------- small screens ---------- */

@media (max-width: 600px) {
	.sc-p-hero { padding-top: 32px; padding-bottom: 64px; gap: 28px; }
	.sc-p-art { min-height: 0; padding: 40px 0; }
	.sc-p-art--waves::before { height: 240px; }
	.sc-p-sec { padding-top: 64px; padding-bottom: 64px; gap: 28px; }
	.sc-buy__in { padding: 18px 16px; }
	.sc-p-nutr td, .sc-p-nutr th { padding: 10px 12px; }
	.sc-p-nutr td em { padding-left: 10px; }
}

/* ---------- shop and product categories (0.2.7): the cards in the theme's style ---------- */

.sc-woo .woocommerce-breadcrumb { margin: 0 0 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--w-dim); }
.sc-woo .woocommerce-breadcrumb a { color: var(--w-dim); text-decoration: none; }
.sc-woo .woocommerce-breadcrumb a:hover { color: var(--w-acc); }
.sc-woo .woocommerce-products-header__title { margin-bottom: 10px; }
.sc-woo .woocommerce-result-count { margin: 12px 0 0; font-size: 13px; color: var(--w-dim); }
.sc-woo .woocommerce-ordering select {
	min-height: 44px; padding: 0 42px 0 18px; border: 1px solid var(--w-line); border-radius: 999px; cursor: pointer;
	background: var(--w-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D1A862' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center;
	color: var(--w-fg); font: 600 13px/1.2 var(--f-sans); -webkit-appearance: none; appearance: none;
}
.sc-woo .woocommerce-message, .sc-woo .woocommerce-info, .sc-woo .woocommerce-error { background: var(--w-card); color: var(--w-fg); border-top-color: var(--w-acc); }

body .sc-woo ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 48px 24px; margin: 32px 0 0; padding: 0; clear: both; }
body .sc-woo ul.products::before, body .sc-woo ul.products::after { display: none; }
body .sc-woo ul.products li.product { float: none !important; clear: none !important; width: auto !important; margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 14px; text-align: left; }
body .sc-woo ul.products li.product a.woocommerce-loop-product__link { position: relative; display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
body .sc-woo ul.products li.product a img {
	display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0; border: 1px solid var(--w-line2);
	box-shadow: 0 26px 44px -30px rgba(0,0,0,.9); transition: border-color .3s ease, transform .4s ease;
}
body .sc-woo ul.products li.product a:hover img { border-color: var(--w-line); transform: translateY(-3px); }
body .sc-woo ul.products li.product .woocommerce-loop-product__title { margin: 0; padding: 4px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 19px; line-height: 1.35; letter-spacing: .03em; color: var(--w-fg); }
body .sc-woo ul.products li.product .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: var(--w-acc); font-size: 20px; font-weight: 700; }
body .sc-woo ul.products li.product .price del { order: 2; color: var(--w-dim); opacity: .85; font-size: 13px; font-weight: 500; }
body .sc-woo ul.products li.product .price ins { text-decoration: none; font-weight: 700; }
body .sc-woo ul.products li.product .onsale {
	top: 12px; left: 12px; right: auto; z-index: 1; min-width: 0; min-height: 0; margin: 0; padding: 6px 12px; border-radius: 999px;
	background: var(--w-acc); color: var(--w-bg); font: 800 10px/1.2 var(--f-sans); letter-spacing: .14em; text-transform: uppercase;
}
body .sc-woo ul.products li.product .button {
	margin-top: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px;
	border: 0; border-radius: 999px; background: var(--w-acc); color: var(--w-bg); font: 700 13px/1.2 var(--f-sans);
	letter-spacing: .06em; text-transform: uppercase; text-align: center; transition: background-color .3s ease, transform .2s ease;
}
body .sc-woo ul.products li.product .button:hover { background: var(--w-acc-h); color: var(--w-bg); transform: translateY(-1px); }
body .sc-woo ul.products li.product .button.loading { opacity: .6; }
body .sc-woo ul.products li.product .added_to_cart { display: none; }

body .sc-woo nav.woocommerce-pagination ul { border: 0; }
body .sc-woo nav.woocommerce-pagination ul li { border: 0; margin: 0 4px; }
body .sc-woo nav.woocommerce-pagination ul li a, body .sc-woo nav.woocommerce-pagination ul li span { min-width: 42px; min-height: 42px; display: inline-grid; place-items: center; border: 1px solid var(--w-line); border-radius: 999px; color: var(--w-fg); }
body .sc-woo nav.woocommerce-pagination ul li span.current, body .sc-woo nav.woocommerce-pagination ul li a:hover { background: var(--w-acc); color: var(--w-bg); }

@media (max-width: 600px) {
	body .sc-woo ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 14px; }
	body .sc-woo ul.products li.product .woocommerce-loop-product__title { font-size: 15px; }
	body .sc-woo ul.products li.product .price { font-size: 17px; }
	body .sc-woo ul.products li.product .button { min-height: 42px; padding: 0 10px; font-size: 11px; letter-spacing: .03em; }
	body .sc-woo ul.products li.product .onsale { top: 8px; left: 8px; padding: 4px 8px; font-size: 9px; }
}

/* ---------- No42: the heartbeat line on both sides of the label, as on the home page (0.2.8) ---------- */
.sc-p-art--pulse { overflow: hidden; }
.sc-p-art--pulse > * { z-index: 1; }
.sc-p-art--pulse::before, .sc-p-art--pulse::after {
	content: ""; position: absolute; z-index: 0; top: 50%; height: 320px; width: 100%; transform: translateY(-50%);
	pointer-events: none; opacity: .62;
}
.sc-p-art--pulse::before { left: calc(50% + min(170px, 36%) - 2px); background: url(../img/pulse-right.svg) left center / auto 100% no-repeat; }
.sc-p-art--pulse::after { right: calc(50% + min(170px, 36%) - 2px); background: url(../img/pulse-left.svg) right center / auto 100% no-repeat; }
@media (max-width: 600px) {
	.sc-p-art--pulse::before, .sc-p-art--pulse::after { height: 180px; }
}

/* ---------- the old packaging until the new film is ready (0.2.9-0.2.10): product meta "scala_old_pack" ---------- */
.sc-p-art--twopack { gap: 18px; }
.sc-p-art--twopack .sc-label-img { width: min(300px, 52%); }
.sc-p-art--twopack .sc-oldpack-fig { position: relative; z-index: 1; width: min(235px, 40%); margin: 0; }
.sc-p-art--twopack .sc-oldpack-fig img { display: block; width: 100%; height: auto; aspect-ratio: 25 / 46; object-fit: cover; border-radius: 4px; background: #fff; border: 1px solid rgba(209,168,98,.22); box-shadow: 0 26px 44px -30px rgba(0,0,0,.9); }
.sc-p-art--many { flex-direction: column; gap: 28px; }
.sc-p-art--many .sc-oldpack-fig { width: min(300px, 70%); }
.sc-p-art--many .sc-oldpack-fig img { aspect-ratio: 1; }

/* ---------- box price (0.2.11): "за кутия" after the price ---------- */
.sc-price-box { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--w-dim); }
body .sc-woo ul.products li.product .price .sc-price-box { align-self: baseline; }