/*
 * Стилі, які цей проєкт пише сам, на відміну від style.css / post.css /
 * wp-inline.css -- ті зняті з оригіналу дослівно: відео товару, форма
 * замовлення (.order-*) і таблиця розмірів круга (.product-table).
 *
 * Палітра й ритм узяті з тих трьох файлів: Raleway, помаранчевий #ff7100,
 * майже чорний #16171b, сірий блок #f6f6f6, кнопка .prod_popup (post.css),
 * тінь картки як у .tab_heading.active. Скруглень на сайті немає -- і тут
 * теж.
 */

.product-videos {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 30px;
}

.product-videos-item {
	margin: 0;
}

.product-videos-item video {
	width: 100%;
	max-width: 640px;
	height: auto;
	display: block;
}

.product-videos-item figcaption {
	margin-top: 8px;
	font-size: 14px;
}


/* ---- Таблиця розмірів круга (next/includes/wheel_table.html) ------------
 * Справжня <table>, а не div-и старого style.css (.product-table-row-item),
 * тому стилі свої, але ті самі: сіра клітинка на білому зазорі, жирний
 * заголовок. На вузькому екрані гортається всередині обгортки, а не тягне
 * сторінку вшир.
 */

.product-table-wrapper {
	margin: 30px 0 40px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.product-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	font-size: 15px;
	color: var(--c-ink);
}

.product-table th,
.product-table td {
	padding: 10px 12px;
	text-align: center;
	white-space: nowrap;
	background-color: var(--c-surface-muted);
}

.product-table th {
	font-weight: 700;
	background-color: var(--c-surface-strong);
}

.product-table td:first-child {
	font-weight: 700;
}

/* ---- Картка форми замовлення --------------------------------------------
 * Спільна для круга, пасти, бруска й аксесуара
 * (next/includes/order_form_head.html, order_contact_fields.html).
 *
 * Та сама мова, що в єдиній формі оригіналу -- «Залишились питання?» на
 * головній (.contacts-form-wrapper): темна плита #16171b на всю ширину
 * контейнера, заголовок з помаранчевою рискою зліва, поля 17px на
 * напівпрозорому білому з тонкою білою рамкою, помаранчева кнопка, яка на
 * hover стає білою. Вибір -- ряд плиток-чипів (.char li оригіналу), а не
 * системний select.
 */

.order-form {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 60px;
	margin: 60px 0;
	padding: 50px 60px 60px;
	background-color: var(--c-ink);
	color: var(--c-on-dark);
	scroll-margin-top: 100px;
}

/* Голова, повідомлення й кнопка -- на всю ширину; параметри (.order-col)
 * ліворуч, контакти праворуч. */
.order-form-head,
.order-form-message,
.order-form > .order-form-note,
.order-actions {
	grid-column: 1 / -1;
}

.order-col {
	grid-column: 1;
	min-width: 0;
}

.order-section-contacts {
	grid-column: 2;
}

.order-form-head {
	margin-bottom: 40px;
}

.order-form-kicker {
	display: block;
	margin-bottom: 15px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--c-accent);
}

.order-form-title {
	margin: 0 0 15px;
	padding-left: 20px;
	border-left: 3px solid var(--c-accent);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--c-on-dark);
}

.order-form-desc {
	margin: 0;
	max-width: 720px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--c-on-dark-muted);
}

/* «Замовте за телефоном»: поза картою (паста, брусок, аксесуар) -- світла
 * плашка; всередині темної карти круга -- темна. */
.order-form-note {
	margin: 40px 0;
	padding: 25px 30px;
	border-left: 3px solid var(--c-accent);
	background-color: var(--c-surface-muted);
	font-size: 17px;
	line-height: 1.5;
	color: var(--c-text);
}

.order-form > .order-form-note {
	margin: 0;
	background-color: var(--c-on-dark-fill);
	color: var(--c-on-dark);
}

/* Повідомлення після відправки -- у картці, там, де натиснули кнопку
 * (core/orders.py редиректить на #order); самі повідомлення -- .notice. */
.order-form-message {
	display: grid;
	gap: var(--s-2);
	margin: 0 0 35px;
}

.order-section {
	margin: 0 0 30px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.order-section-title {
	display: block;
	width: 100%;
	margin-bottom: 25px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--c-on-dark-line);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-on-dark-muted);
}

.order-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 25px 30px;
}

/* Динамічні поля круга (#wheel-fields, #wheel-hardness-fields) не мають
 * своєї клітинки: display:contents кладе їх у ту саму сітку. */
.order-fields {
	display: contents;
}

/* Ряд чипів -- на всю ширину сітки; числові поля -- по два в ряд. */
.order-field-choice,
.order-field-wide,
.field--wide {
	grid-column: 1 / -1;
}

/* Чип з фокусом клавіатури: сам radio схований у ньому. */
.order-chip:has(input:focus-visible) {
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
}

/* Чипи: radio всередині label; обраний -- помаранчевий. */
.order-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.order-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid var(--c-on-dark-border);
	background-color: var(--c-on-dark-fill);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-on-dark);
	cursor: pointer;
	user-select: none;
	transition: border-color .25s, background-color .25s, color .25s;
}

.order-chip input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.order-chip:hover {
	border-color: var(--c-on-dark);
}

.order-chip:has(input:checked) {
	border-color: var(--c-accent);
	background-color: var(--c-accent);
	color: var(--c-on-accent);
}

/* Значення, яке задає круг, а не обирає покупець. */
.order-chip.is-static {
	border-color: transparent;
	background-color: var(--c-on-dark-fill-hover);
	cursor: default;
}

/* Живе резюме: позначення круга або ціна. */
.order-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 25px;
	margin: 5px 0 30px;
	padding: 22px 25px;
	border-left: 3px solid var(--c-accent);
	background-color: var(--c-on-dark-fill);
}

.order-summary-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-on-dark-muted);
}

.order-summary-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-on-dark);
	word-break: break-word;
}

.order-summary-value:empty::before {
	content: "\2014";
	color: var(--c-on-dark-muted);
}

.order-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
	margin-top: 10px;
}

.order-privacy {
	flex: 1 1 260px;
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-on-dark-muted);
}

.order-privacy a {
	color: var(--c-accent);
	text-decoration: none;
	transition: color .25s;
}

.order-privacy a:hover {
	color: var(--c-on-dark);
}

@media only screen and (max-width: 1320px) {
	.order-form {
		column-gap: 40px;
		padding: 40px 40px 50px;
	}
}

@media only screen and (max-width: 1023px) {
	.order-form {
		grid-template-columns: minmax(0, 1fr);
		padding: 40px 30px;
	}

	.order-col,
	.order-section-contacts {
		grid-column: 1;
	}

	.order-form-desc {
		max-width: none;
	}
}

@media only screen and (max-width: 767px) {
	.order-form {
		margin: 40px 0;
		padding: 30px 20px 35px;
		scroll-margin-top: 70px;
	}

	.order-form-head {
		margin-bottom: 30px;
	}

	.order-form-title {
		font-size: 22px;
	}

	.order-form-desc,
	.order-form-note {
		font-size: 15px;
	}

	.order-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* Числові параметри короткі -- два в ряд і на телефоні. */
	.order-section-params .order-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.order-chip {
		min-height: 48px;
		padding: 0 18px;
		font-size: 16px;
	}

	.order-summary-value {
		font-size: 20px;
	}

	.order-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.order-submit {
		width: 100%;
		min-width: 0;
		padding: 18px 20px;
	}

	.order-privacy {
		text-align: center;
	}
}


/* ---- Третій рівень меню (next/includes/header.html) ----------------------
 * Вендорений style.css знає лише `.mnu .sub-menu li a { margin-top: 10px }`;
 * підрозділи «Заточки ножів» вкладаються ще на рівень і зсуваються праворуч,
 * щоб читалися як діти свого пункту, а не як його сусіди.
 */

.mnu .sub-menu .sub-menu {
	padding-left: 20px;
}


/* ---- Склад сету (next/pages/set.html) ------------------------------------
 * Один список каменів на варіант; set_variants.js лишає видимим обраний.
 */

.set-composition {
	margin-top: 30px;
}

.set-composition-title {
	font-size: 20px;
	margin: 0 0 12px;
}

.set-composition-list {
	margin: 0;
	padding-left: 20px;
}

.set-composition-list a {
	color: var(--c-accent-text);
	text-decoration: underline;
}

/* ---- Корисні статті (next/pages/articles.html, article.html) --------------
 * Плитки списку -- ті самі .catalog-item, що в каталозі; анонс і дата нові.
 * Кнопка «Купити зараз» -- .prod_popup зі старого post.css, лише відступи.
 */

.catalog-item-text {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.4;
}

.catalog-item-date {
	margin: 6px 0 0;
	font-size: 13px;
	opacity: .7;
}

.article-buy {
	margin: 24px 0;
}

.article-figure {
	margin: 24px 0;
}

.article-figure img {
	max-width: 100%;
	height: auto;
}

.article-figure figcaption {
	margin-top: 8px;
	font-size: 14px;
}

/* ---- Кошик (cart/, en only) -------------------------------------------- */

/* Два шляхи однієї картки на en: цінові скрипти ставлять .has-price, коли
 * обраний варіант має ціну -- тоді видно кнопку кошика, а не заявку.
 * Без JS класу нема: видно лише заявку, як на uk/ru. */
.order-form.has-price .order-request-only {
	display: none;
}

.order-form:not(.has-price) .order-cart-only {
	display: none;
}

.order-form .order-cart-only {
	grid-column: 1 / -1;
}

.header-cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 20px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.cart-title {
	margin: 20px 0 30px;
}

.cart-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 30px;
}

.cart-table th,
.cart-table td {
	padding: 14px 10px;
	border-bottom: 1px solid var(--c-border-light);
	text-align: left;
	vertical-align: middle;
}

.cart-table th {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.cart-item a {
	font-weight: 600;
	color: inherit;
}

.cart-item-summary {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	opacity: 0.75;
}

.cart-price,
.cart-line-total {
	white-space: nowrap;
}

.cart-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 60px;
}

.cart-total {
	margin: 0;
	font-size: 22px;
}

.cart-total strong {
	margin-left: 10px;
}

.cart-note {
	flex-basis: 100%;
	margin: 0;
	font-size: 14px;
	opacity: 0.75;
}

.cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.cart-empty {
	margin: 0 0 60px;
	font-size: 18px;
}

@media (max-width: 767px) {
	.cart-table thead {
		display: none;
	}

	.cart-table tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 6px 14px;
		padding: 14px 0;
		border-bottom: 1px solid var(--c-border-light);
	}

	.cart-table td {
		padding: 0;
		border: 0;
	}

	.cart-item {
		grid-column: 1;
		grid-row: 1;
	}

	/* No header row on a phone: each cell names itself. */
	.cart-table td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: var(--s-1);
		font: 700 var(--t-label) var(--f-family);
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--c-text-muted);
	}

	.cart-remove {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
	}
}

/* ---- Оформлення (checkout/) ------------------------------------------- */

.checkout-summary {
	margin-bottom: 20px;
}

.checkout-summary-title {
	margin: 0 0 14px;
	font-size: 20px;
}

.checkout-lines {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.checkout-lines li {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--c-border-light);
}

.checkout-line-title {
	font-weight: 600;
}

.checkout-line-summary {
	opacity: 0.75;
}

.checkout-line-total {
	margin-left: auto;
}

.checkout-done-lead {
	font-size: 22px;
}

/* ---- Кабінет і вхід (accounts/, allauth) -------------------------------- */


.account {
	display: grid;
	gap: 24px;
	padding-top: 40px;
	padding-bottom: 60px;
}

.account-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--c-border-light);
}

.account-nav a {
	color: inherit;
	text-decoration: none;
	opacity: 0.75;
}

.account-nav a[aria-current="page"] {
	font-weight: 700;
	opacity: 1;
}

.account-logout {
	margin-left: auto;
}

.account-logout button {
	border: 0;
	background: none;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.account-card {
	max-width: 640px;
}

.account-card h1 {
	margin: 0 0 18px;
	font-size: 28px;
}

.account-card form {
	display: grid;
	gap: 14px;
	margin: 16px 0;
}

.account-card form > .btn {
	justify-self: start;
}

.account-card a:not(.btn) {
	color: var(--link);
}

.account-orders {
	display: grid;
	gap: 18px;
	max-width: none;
}

.account-order {
	padding: 16px 20px;
	border: 1px solid var(--c-border-light);
	border-radius: 0;
}

.account-order-head {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-bottom: 10px;
	font-weight: 600;
}

.account-order ul {
	margin: 0;
	padding-left: 18px;
}

/* ---- Ручне замовлення (режим менеджера, orders/manual.py) --------------- */

.order-manual {
	grid-column: 1 / -1;
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 2px dashed var(--c-accent);
	border-radius: 0;
}

.order-manual select,
.order-manual textarea,
.order-manual input[type="number"] {
	width: 100%;
}

/* The manager always files a request: the cart path is hidden, the request
 * path shown, whatever the price scripts decided. */
.order-form:has(.order-manual) .order-cart-only {
	display: none !important;
}

.order-form:has(.order-manual) .order-request-only {
	display: block !important;
}


/* ---- Pages without a hero picture (cart, checkout, articles, sets,
 * accessories, sign-in and the cabinet) ----------------------------------
 * The theme's header is absolute and transparent, laid over each page's
 * hero picture; the theme makes it solid and in-flow only for the page
 * templates it knew (style.css: .page-template-page-product-c1-1 header
 * ...). These pages carry `solid-header` on <body> for the same result. */
.solid-header .header {
	position: relative;
	background: var(--c-ink);
}

/* The header's own links are white like the rest of it. */
.header-account,
.header-cart {
	margin-left: 18px;
	margin-right: 16px;
	color: var(--c-on-dark);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.header-account:hover,
.header-cart:hover {
	color: var(--c-accent);
}


/* ---- Messages: the site-wide list and the account card's ---------------
 * Each message is a .notice (ui.css); here only where the list sits. */
.site-messages {
	display: grid;
	gap: var(--s-2);
	margin-top: var(--s-5);
}

.account-card > .notice {
	margin-bottom: var(--s-4);
}

/* ---- Карта сайту (next/pages/sitemap.html) ------------------------------ */

/* The theme fixes .sm at 1290px; the .c-container inside sets the width. */
.sm {
	width: auto;
}

.sitemap-list,
.sitemap-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sitemap-list {
	display: grid;
	gap: var(--s-2);
	margin-bottom: var(--s-9);
}

.sitemap-list ul {
	display: grid;
	gap: var(--s-1);
	margin: var(--s-2) 0 var(--s-3) var(--s-4);
	padding-left: var(--s-3);
	border-left: 1px solid var(--c-border-light);
}

.sitemap-list a {
	font: 600 var(--t-body) var(--f-family);
	color: var(--c-ink);
}

.sitemap-list ul a {
	font-weight: 500;
	color: var(--c-text);
}

.sitemap-list a:hover {
	color: var(--c-accent-text);
}

/* ---- Брусок без фото: опис на всю ширину, без порожньої половини -------- */

.product_main_content--no-photos .prod_main_context {
	width: 100%;
}

/* ---- Склад сету, посилання в порожньому кошику й під оформленням --------- */

.set-composition-list {
	padding-left: var(--s-5);
}

.set-composition-list li {
	margin-bottom: var(--s-1);
	font: var(--t-body) var(--f-family);
}

/* The theme makes every link inline-block, which drops a wrapped link's
 * bullet to its last line. */
.set-composition-list a {
	display: inline;
}

.cart-empty a,
.cart-note a {
	color: var(--c-accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Картка замовлення на телефоні --------------------------------------
 * Одна колонка полів (ім'я й телефон не стоять поруч різної висоти), чипи --
 * рівною сіткою, без порожнього низу під кнопкою. */

@media (max-width: 767px) {
	.order-form .order-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.order-chips {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	.order-chip {
		justify-content: center;
		text-align: center;
	}

	.order-form {
		padding-bottom: var(--s-6);
	}

	.order-actions {
		gap: var(--s-3);
	}
}

/* ---- Вітрина дизайн-системи (/styleguide/, лише персонал) ---------------- */

.styleguide {
	padding-block: var(--s-6) var(--s-9);
	color: var(--c-text);
}

.styleguide-lead {
	max-width: 70ch;
	font: var(--t-body) var(--f-family);
}

.styleguide-section {
	margin-top: var(--s-8);
}

.styleguide-section h2 {
	margin: 0 0 var(--s-5);
	font: 700 var(--t-h1) var(--f-family);
	text-transform: uppercase;
	color: var(--c-ink);
}

.styleguide-section h3 {
	margin: var(--s-6) 0 var(--s-3);
	font: 700 var(--t-h3) var(--f-family);
	color: inherit;
}

.styleguide-swatches,
.styleguide-scale {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.styleguide-swatches li,
.styleguide-scale li {
	display: grid;
	gap: var(--s-1);
	font: var(--t-small) var(--f-family);
}

.styleguide-swatch {
	height: 56px;
	border: 1px solid var(--c-border-light);
}

.styleguide-table {
	display: block;
	overflow-x: auto;
}

.styleguide-sample {
	display: inline-block;
	padding: var(--s-1) var(--s-3);
	border: 1px solid;
	font-weight: 700;
}

.styleguide-space {
	display: block;
	height: 12px;
	background-color: var(--c-accent);
}

.styleguide-dark {
	display: block;
	margin: 0;
}

.styleguide-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-6) var(--s-8);
}

.styleguide-block {
	display: grid;
	align-content: start;
	gap: var(--s-3);
	min-width: 0;
}

.styleguide-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
}

@media (max-width: 767px) {
	.styleguide-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Відступ під суцільною шапкою ---------------------------------------
 * post.css / wp-inline.css відсувають брусок (190px) і політику (150px) з-під
 * шапки, що лежить поверх сторінки. Під суцільною шапкою цей відступ порожній. */

.solid-header .product_main,
.solid-header .privacy_policy_page {
	padding-top: var(--s-8);
}