/* Витрина плагина. Вид повторяет блоки WooCommerce на pizza-service.pro (OceanWP + JetWooBuilder + Side Cart),
   размеры и шрифтовые стеки сняты с их страниц (09.10.2026): категории Roboto 20/600, плитка 312px с рамкой 2px,
   карточка — фото 600×450 и панель с тенью, шторка корзины 270px. Шрифты не грузим — их подключает тема сайта. */
.olkhaSites {
	--olkhaAccent: rgb(183, 28, 37);
	--olkhaAccentSoft: rgba(183, 28, 37, .08);
	--olkhaBorder: rgb(197, 196, 196);
	--olkhaText: rgb(74, 74, 74);
	--olkhaLabel: rgb(35, 129, 168);
	--olkhaBody: "Open Sans", sans-serif;
	--olkhaHeading: Roboto, sans-serif;
	--olkhaButton: "Shrift 1", sans-serif;
	font-family: var(--olkhaBody);
	font-size: 14px;
	line-height: 1.8;
	color: var(--olkhaText);
	max-width: 1430px;
	margin: 0 auto;
	padding: 26px 10px 60px;
	box-sizing: border-box;
}
.olkhaSites *, .olkhaSites *::before, .olkhaSites *::after { box-sizing: border-box; }
[v-cloak] { display: none; }
.olkhaSites button { font: inherit; cursor: pointer; }
.olkhaSites button:disabled { cursor: default; opacity: .45; }
/* темы подчёркивают ссылки — у блоков сайта подчёркиваний нет */
.olkhaSites a.olkhaSitesTile, .olkhaSites a.olkhaSitesTile *, .olkhaSites .olkhaSitesFolders a, .olkhaSites .olkhaSitesCrumbs a, .olkhaSites a.olkhaSitesButton { text-decoration: none !important; }

.olkhaSitesNotice { padding: 12px 16px; margin-bottom: 16px; background: #f6f6f6; border-left: 3px solid var(--olkhaBorder); }
.olkhaSitesNoticeError { border-left-color: var(--olkhaAccent); color: var(--olkhaAccent); }

/* Каталог: категории слева (354px), плитки 3 в ряд по 312px */
.olkhaSitesMenu { display: grid; grid-template-columns: 358px 1fr; gap: 30px; align-items: start; }
.olkhaSitesFolders { border: 2px solid #4a4a4a; border-radius: 4px; padding-bottom: 4px; position: sticky; top: 20px; }
.olkhaSitesFoldersTitle { font: 600 22px/1 var(--olkhaHeading); text-transform: uppercase; color: #000; padding: 16px 16px; border-bottom: 2px solid #4a4a4a; margin-bottom: 4px; }
.olkhaSitesFolders a { display: block; padding: 7px 18px; font: 600 20px/20px var(--olkhaHeading); text-transform: uppercase; color: rgba(0, 0, 0, .86); }
.olkhaSitesFolders a + a { margin-top: 10px; }
.olkhaSitesFolders a:hover, .olkhaSites .olkhaSitesFolderActive { color: var(--olkhaAccent); }

.olkhaSitesGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 312px)); gap: 40px 41px; }
.olkhaSitesTile { display: flex; flex-direction: column; align-items: center; text-align: center; border: 2px solid var(--olkhaBorder); padding: 4px 4px 15px; color: inherit; }
.olkhaSitesTile:hover { border-color: #999; }
.olkhaSitesTilePhoto { width: 100%; aspect-ratio: 1; background: #2b2b2b; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.olkhaSitesTilePhoto img { width: 100%; height: 100%; object-fit: cover; }
.olkhaSitesNoPhoto { color: #bbb; padding: 20px; font-size: 18px; }
.olkhaSitesTileFolder { margin: 20px 0 8px; font: italic 300 12px/12px var(--olkhaBody); text-transform: uppercase; color: var(--olkhaText); }
.olkhaSitesTileName { font: 600 14px/1.5 var(--olkhaBody); color: #333; min-height: 2.6em; padding: 0 6px; }
.olkhaSitesPrice { margin: 18px 0 14px; font: 600 20px/20px var(--olkhaHeading); color: var(--olkhaAccent); }
.olkhaSitesButton { display: inline-block; background: var(--olkhaAccent); color: #fff !important; border: 2px solid var(--olkhaAccent); border-radius: 2px; padding: 5px 12px; font: 500 14px/21px var(--olkhaButton); letter-spacing: 1.4px; }
.olkhaSitesStop { padding: 5px 12px; border: 1px dashed #999; color: #777; font-size: 14px; }
.olkhaSitesTileStop .olkhaSitesTilePhoto img { filter: grayscale(1); opacity: .5; }

/* Страница позиции: фото 600×450, панель с тенью */
.olkhaSitesItem { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 540px); gap: 50px; justify-content: center; align-items: start; padding-top: 40px; }
.olkhaSitesItemPhoto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.olkhaSitesItemPanel { background: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, .1); padding: 50px 60px; margin-top: -10px; }
.olkhaSitesCrumbs { font-size: 13px; color: #aaa; margin-bottom: 40px; }
.olkhaSitesCrumbs a { color: #333; }
.olkhaSitesItemName { font: 600 28px/28px var(--olkhaHeading); letter-spacing: .6px; color: #000; margin: 0 0 10px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.olkhaSitesItemPrice { font: 400 36px/1.4 var(--olkhaHeading); color: var(--olkhaAccent); margin: 20px 0 12px; }
.olkhaSitesWeight { font: 400 15px var(--olkhaBody); color: #888; margin-left: 14px; }
.olkhaSitesText { font-size: 14px; line-height: 1.8; margin: 0 0 10px; }
.olkhaSitesOptionBlock { margin-top: 20px; }
.olkhaSitesOptionTitle { display: block; font: 600 14px/1.8 var(--olkhaBody); text-transform: uppercase; color: var(--olkhaLabel); margin-bottom: 6px; }
.olkhaSitesHint { font-size: 11px; font-weight: 400; color: #999; text-transform: none; margin-left: 6px; }
/* размеры и варианты — кнопками, оформленными как поля выбора сайта (13px, рамка #ddd, скругление 3px) */
.olkhaSitesSizes { display: flex; gap: 6px; }
.olkhaSitesSizes button { flex: 1; min-height: 40px; padding: 4px 6px; background: #fff; border: 1px solid #ddd; border-radius: 3px; color: #333; font: 400 13px/1.3 var(--olkhaBody); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.olkhaSitesSizes small, .olkhaSitesChips small { color: #888; font-size: 12px; }
.olkhaSitesChips { display: flex; flex-wrap: wrap; gap: 6px; }
.olkhaSitesChips button { min-height: 36px; padding: 4px 12px; background: #fff; border: 1px solid #ddd; border-radius: 3px; color: #333; font: 400 13px/1.3 var(--olkhaBody); display: inline-flex; gap: 6px; align-items: center; }
.olkhaSites .olkhaSitesChosen { background: var(--olkhaAccentSoft); border-color: var(--olkhaAccent); box-shadow: inset 0 0 0 1px var(--olkhaAccent); color: #000; }
.olkhaSites .olkhaSitesChosen > span::before { content: '✓ '; color: var(--olkhaAccent); font-weight: 700; }
.olkhaSitesMore { margin-top: 8px; background: none; border: 0; padding: 0; color: var(--olkhaLabel); text-decoration: underline; font-size: 13px; }
.olkhaSites textarea { width: 100%; border: 1px solid #ddd; border-radius: 3px; padding: 8px 12px; font: 400 13px/1.5 var(--olkhaBody); color: #333; }
/* количество и «В корзину» — как у сайта: кнопки 36×36, поле 36×42, красная кнопка 42px */
.olkhaSitesBuy { display: flex; gap: 10px; align-items: center; margin-top: 26px; }
.olkhaSitesQty { display: inline-flex; align-items: center; }
.olkhaSitesQty button { width: 36px; height: 36px; background: #fff; border: 1px solid rgb(228, 228, 228); color: #777; font-size: 13px; }
.olkhaSitesQty span { width: 36px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #000; color: #000; font-size: 12px; }
.olkhaSitesButtonBuy { flex: 1; min-height: 42px; background: var(--olkhaAccent); border: 1px solid var(--olkhaAccent); color: #fff; font: 600 12px/12px var(--olkhaBody); text-transform: uppercase; letter-spacing: 1.2px; padding: 14px 20px; }

/* Корзина: круглая кнопка 60px с красной тенью и счётчиком, шторка 270px */
.olkhaSitesCartButton { position: fixed; right: 10px; bottom: 15px; z-index: 9998; width: 60px; height: 60px; border-radius: 50%; border: 0; background: #fff; color: var(--olkhaAccent); display: flex; align-items: center; justify-content: center; box-shadow: var(--olkhaAccent) 0 1px 4px 0; }
.olkhaSitesCartBadge { position: absolute; top: -8px; left: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--olkhaAccent); color: #fff; font: 400 13px/28px var(--olkhaBody); text-align: center; }
.olkhaSitesShade { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, .7); }
.olkhaSitesCart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9999; width: 270px; max-width: 100vw; background: #fff; display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform .25s; font: 400 13px/1.8 var(--olkhaBody); color: #000; }
.olkhaSitesCartOpened { transform: none; }
/* вошедшему админу шторку не прячет чёрная панель WordPress (32px, на телефоне 46px) */
.admin-bar .olkhaSitesCart { top: 32px; }
@media (max-width: 782px) { .admin-bar .olkhaSitesCart { top: 46px; } }
.olkhaSitesCartHead { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; min-height: 75px; border-bottom: 1px solid #eee; font-size: 14px; position: relative; }
.olkhaSitesCartBag { position: relative; display: inline-flex; color: #000; }
.olkhaSitesCartBag b { position: absolute; left: 0; right: 0; top: 13px; text-align: center; font: 400 13px/1 var(--olkhaBody); }
.olkhaSitesClose { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 20px; line-height: 1; color: #000; }
.olkhaSitesCartEmpty { padding: 30px 15px; color: #888; text-align: center; }
.olkhaSitesCartLine { display: flex; gap: 15px; padding: 16px 13px; border-bottom: 1px solid #eee; }
.olkhaSitesCartLine img { width: 61px; height: 61px; object-fit: cover; border-radius: 5px 5px 0 0; flex: none; }
.olkhaSitesCartLineText { flex: 1; min-width: 0; }
.olkhaSitesCartLineName { font-weight: 600; line-height: 1.8; }
.olkhaSitesCartLineMods { font-size: 12px; line-height: 1.5; color: #555; }
.olkhaSitesCartLineBottom { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.olkhaSitesCartLine .olkhaSitesQty button { width: 26px; height: 26px; }
.olkhaSitesCartLine .olkhaSitesQty span { width: 28px; height: 26px; border-color: #e4e4e4; }
.olkhaSitesCartFoot { margin-top: auto; padding: 8px 18px; box-shadow: rgba(0, 0, 0, .1) 0 -5px 10px 0; display: flex; flex-direction: column; gap: 5px; }
.olkhaSitesCartTotal { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; }
.olkhaSitesCartFoot .olkhaSitesButton { width: 100%; border: 0; padding: 5px; font: 600 13px/13px var(--olkhaBody); text-transform: uppercase; letter-spacing: 1.3px; }

/* Оформление — как /checkout/ сайта: две колонки, поля 40px с рамкой #ddd, «Ваш заказ» на сером */
.olkhaSitesCheckout { display: grid; grid-template-columns: minmax(0, 538px) minmax(0, 538px); gap: 44px; justify-content: center; padding-top: 30px; }
.olkhaSitesSectionTitle { font: 600 13px/1.4 var(--olkhaBody); text-transform: uppercase; letter-spacing: .6px; color: #333; padding-bottom: 12px; margin: 24px 0 18px; border-bottom: 1px solid #e9e9e9; }
.olkhaSitesCheckoutForm .olkhaSitesSectionTitle:first-child, .olkhaSitesCheckoutOrder .olkhaSitesSectionTitle:first-child { margin-top: 0; }
.olkhaSitesField { display: block; font: 400 13px/1.6 var(--olkhaBody); color: #333; margin-bottom: 16px; position: relative; }
.olkhaSitesField abbr { color: var(--olkhaAccent); text-decoration: none; border: 0; }
.olkhaSitesField input, .olkhaSitesField textarea, .olkhaSitesField select { display: block; width: 100%; margin-top: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid #ddd; border-radius: 3px; font: 400 13px/1.5 var(--olkhaBody); color: #333; background: #fff; }
.olkhaSitesFieldRow { display: flex; gap: 12px; }
.olkhaSitesFieldRow .olkhaSitesField { flex: 1; min-width: 0; }
.olkhaSitesSuggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; border: 1px solid #ddd; border-top: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.olkhaSitesSuggestions button { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #f0f0f0; padding: 8px 12px; font-size: 13px; color: #333; }
.olkhaSitesSuggestions button:hover { background: #f7f7f7; }
.olkhaSitesRadios { display: flex; gap: 24px; margin-bottom: 12px; font-size: 14px; }
.olkhaSitesRadios label, .olkhaSitesMethod, .olkhaSitesPayments label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.olkhaSitesRadioOff { opacity: .45; }
.olkhaSitesHintLine { font-size: 12px; color: #888; margin-bottom: 10px; }
.olkhaSitesOrderTable { width: 100%; border-collapse: collapse; background: #f7f7f7; font: 400 13px/1.6 var(--olkhaBody); color: #333; margin: 0; }
.olkhaSitesOrderTable th, .olkhaSitesOrderTable td { padding: 14px 20px; border: 0; border-bottom: 1px solid #fff; text-align: left; vertical-align: top; }
.olkhaSitesOrderTable thead th { font-weight: 600; text-transform: uppercase; letter-spacing: .6px; padding: 22px 20px; }
.olkhaSitesOrderTable td:last-child, .olkhaSitesOrderTable thead th:last-child { text-align: right; color: var(--olkhaAccent); }
.olkhaSitesOrderTable tfoot th { font-weight: 600; width: 50%; }
.olkhaSitesOrderTable tfoot th .olkhaSitesMethod { margin-top: 8px; font-weight: 400; text-transform: none; letter-spacing: normal; }
.olkhaSitesOrderTotal th, .olkhaSitesOrderTotal td { font-size: 15px; font-weight: 700 !important; }
.olkhaSitesPayments { margin-top: 24px; background: #f7f7f7; }
.olkhaSitesPayments > label { padding: 18px 20px; border-bottom: 2px solid #fff; font: 600 14px var(--olkhaBody); color: #222; }
.olkhaSitesPayments .olkhaSitesField { padding: 0 20px 14px; margin: 0; }
.olkhaSitesConsent { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 14px; font-size: 13px; line-height: 1.6; color: #333; }
.olkhaSitesConsent input { margin-top: 4px; }
.olkhaSitesButtonSubmit { width: 100%; min-height: 56px; font-size: 14px; }
.olkhaSitesDone { max-width: 640px; margin: 40px auto; text-align: center; }
.olkhaSitesDone h1 { font: 600 28px/1.3 var(--olkhaHeading); color: #000; margin-bottom: 16px; }
.olkhaSitesDone p { font-size: 15px; margin: 0 0 8px; }
.olkhaSitesDone .olkhaSitesButton { margin-top: 20px; }

/* Телефон */
@media (max-width: 900px) {
	.olkhaSitesMenu { grid-template-columns: 1fr; gap: 16px; }
	.olkhaSitesFolders { position: static; display: flex; overflow-x: auto; border-width: 1px; padding: 0; }
	.olkhaSitesFoldersTitle { display: none; }
	.olkhaSitesFolders a { flex: none; font-size: 15px; padding: 12px 12px; }
	.olkhaSitesFolders a + a { margin-top: 0; }
	.olkhaSitesGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.olkhaSitesTileFolder { margin-top: 14px; }
	.olkhaSitesPrice { font-size: 18px; margin: 12px 0 10px; }
	.olkhaSitesButton { letter-spacing: .3px; padding: 5px 8px; }
	.olkhaSitesItem { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
	.olkhaSitesItemPanel { padding: 24px 16px 0; box-shadow: none; margin-top: 0; }
	.olkhaSitesCrumbs { margin-bottom: 14px; }
	.olkhaSitesItemName { font-size: 24px; line-height: 1.2; }
	.olkhaSitesItemPrice { font-size: 30px; }
	/* «В корзину» с ценой прилипает к низу экрана — видна, сколько ни листай топпинги */
	/* z-index выше плавающей кнопки звонка темы (иначе она ложится на «−»), ниже шторки корзины и панели WordPress */
	.olkhaSitesBuy { position: sticky; bottom: 0; z-index: 9990; margin: 20px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); }
	.olkhaSitesCartButtonRaised { bottom: 86px; }
	.olkhaSitesCheckout { grid-template-columns: 1fr; gap: 10px; padding-top: 10px; }
	.olkhaSitesOrderTable th, .olkhaSitesOrderTable td { padding: 12px 12px; }
}