/* ==========================================================================
   STIL.UA — стиль кабінету MULI Flow: білий / чорний / червоний, матове скло.
   Підключається після style.css; структура сторінок — без змін.
   ========================================================================== */
:root {
	--accent: #e11d2a;
	--accent-dark: #b3121d;
	--accent-soft: #fdecec;
	--ink: #111113;
	--text: #3a3a3f;
	--muted: #6b6b72;
	--line: rgba(17, 17, 19, .1);
	--bg: #efeff2;
	--soft: #ffffff;
	--soft-2: #e7e7ec;
	--warm: transparent;
	--dark: #111113;
	--glass: rgba(255, 255, 255, .62);
	--glass-solid: rgba(255, 255, 255, .82);
	--glass-border: rgba(255, 255, 255, .85);
	--r: 14px;
	--r-lg: 20px;
	--r-pill: 12px;
	--head: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
	--body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
	--shadow: 0 1px 2px rgba(17, 17, 19, .04), 0 10px 30px rgba(17, 17, 19, .06);
	--blur: blur(24px) saturate(170%);
}

/* Тло з м'якими плямами кольору — як у кабінеті */
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); font-weight: 400; letter-spacing: -.01em; position: relative; }
body::before, body::after { content: ""; position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(110px); }
body::before { width: 560px; height: 560px; background: var(--accent); opacity: .12; top: -220px; right: -160px; }
body::after { width: 480px; height: 480px; background: var(--ink); opacity: .06; bottom: -200px; left: -120px; }
.site, .site-main, main { background: transparent; }

h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
h3, h4 { font-weight: 700; letter-spacing: -.02em; }
a:hover { color: var(--accent); }
:focus-visible { outline-color: var(--accent); }
::selection { background: var(--accent); color: #fff; }

/* Кнопки: заокруглені прямокутники, чорна основна, червона — акцент */
.btn { border-radius: 12px; font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #26262a; color: #fff; }
.btn-light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-light:hover { background: var(--ink); color: #fff; }
.btn-ghost { background: rgba(255, 255, 255, .7); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: #fff; }

/* Верхня смужка й шапка — матове скло, що «пливе» над сторінкою */
.topbar, .site-header, .catbar { background: transparent; }
.topbar { border-bottom: 1px solid var(--line); }
.site-header {
	background: var(--glass-solid);
	-webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
	border-bottom: 1px solid var(--glass-border);
	box-shadow: 0 1px 0 rgba(17, 17, 19, .04);
}
.catbar { border-top: 1px solid var(--line); }
form.search { background: rgba(255, 255, 255, .9); border: 1px solid var(--line); border-radius: 12px; }
form.search:focus-within { border-color: var(--ink); }
.hround { border-radius: 12px; background: rgba(17, 17, 19, .06); }
.hround:hover, .hpill:hover { background: rgba(17, 17, 19, .1); }
.hpill { border-radius: 12px; background: rgba(17, 17, 19, .06); font-weight: 500; }
.hcta { border-radius: 12px; }
.catlist a { font-weight: 500; color: var(--ink); }
.catlist a:hover, .catlist a.is-active { color: var(--accent); }
.promo { background: var(--accent-soft); color: var(--accent-dark); border-radius: 10px; }
.top-phone { font-weight: 700; }
.topnav .sub-menu, .lang-dd-list { background: var(--glass-solid); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: 16px; }

/* Логотип STIL.UA */
.logo-text { font-family: var(--head); font-size: 26px; font-weight: 800; letter-spacing: -.04em; gap: 0; }
.logo-text b { font-weight: 800; }
.logo-text b::after { content: none; }
.logo-text i { font-style: normal; font-weight: 800; color: var(--accent); }
.logo-text.light b { color: #fff; }

/* Картки, банери, плитки — біле матове скло з заокругленням 20 */
.hero, .hero-slide, .tile, .cat-tile, .card, .product-card, .pcard, .rcard, .post-card, .about-box, .perk, .collection, .banner,
.box, .wcard, .info-card, .contact-card, .legal-box, .cfg, .summary-card, .quote-box {
	border-radius: var(--r-lg);
}
.product-card, .pcard, .post-card, .rcard, .perk, .wcard, .info-card, .contact-card, .box {
	background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
	border: 1px solid var(--glass-border); box-shadow: var(--shadow);
}
.hero-slide, .hero { background-color: #fff; }
.price, .pcard .price, .product-card .price { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }

/* Поля форм */
input[type=text], input[type=email], input[type=tel], input[type=search], input[type=number], input[type=password], select, textarea {
	border-radius: 12px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; }

/* Підвал — чорний, як бокове меню кабінету в темних місцях */
.site-footer { background: var(--ink); }
.site-footer a:hover { color: #fff; }

/* Хлібні крихти й шапка сторінки */
.page-head { background: transparent; }
.crumbs > span:last-child { color: var(--ink); font-weight: 700; }

/* Модальні вікна, кошик, чат — скло */
.modal-box, .cart-panel, .chat-win, .qv-box {
	background: var(--glass-solid); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
	border: 1px solid var(--glass-border); border-radius: 24px;
}

/* Банер-слайдер: світлі нейтральні тони замість теплих, біле скло */
.hero { background: transparent; }
.tone-sand { background: linear-gradient(135deg, #ffffff 0%, #f3f3f6 100%); }
.tone-mist { background: linear-gradient(135deg, #ffffff 0%, #eef0f4 100%); }
.tone-sage { background: linear-gradient(135deg, #ffffff 0%, #f1f1ee 100%); }
.slider { box-shadow: var(--shadow); border: 1px solid var(--glass-border); }
.slide-ico { background: var(--accent-soft); color: var(--accent); border-radius: 14px; }
.slide-price { font-weight: 800; letter-spacing: -.02em; }
.slider-nav > button { border-radius: 12px; }
.sl-dots button.is-active { background: var(--accent); }
.pfree { background: var(--accent-soft); color: var(--accent-dark); border-radius: 10px; }
/* Промокод і дрібні блоки — без бежевого */
.promo-box, .coupon, [class*="promo-"] { background: var(--glass); border: 1px solid var(--glass-border); }
/* Таблиця цін на телефоні — компактно, з гортанням убік */
@media (max-width: 640px) {
	.price-tables table { font-size: 13px; min-width: 520px; }
	.price-tables th, .price-tables td { padding: 9px 8px; white-space: nowrap; }
}
.co-ship-carrier { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.co-ship-none, .woocommerce-info, .woocommerce-message { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; }
#billing_country_field { display: none !important; }
.co-mto, .cart-note-mto { background: var(--accent-soft) !important; color: var(--ink); border-radius: 12px; }

/* ---------- Конструктор декору ---------- */
.cons-open-wrap { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.cons-open { align-self: flex-start; gap: 8px; border: 1px solid var(--line); background: #fff; }
.cons-open:hover { background: var(--ink); color: #fff; }
.cons-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.cons-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.cons-chip img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.cons-chip b { font-weight: 600; }
html.cons-lock { overflow: hidden; }
.cons-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(17, 17, 19, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cons-modal[hidden] { display: none; }
.cons-box { width: min(1240px, 100%); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; background: var(--glass-solid); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: 0 30px 80px rgba(17, 17, 19, .25); overflow: hidden; }
.cons-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.cons-head b { display: block; font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.cons-head span { font-size: 13px; color: var(--muted); }
.cons-x { width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(17, 17, 19, .06); font-size: 24px; line-height: 1; cursor: pointer; }
.cons-body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 0; min-height: 0; flex: 1; overflow: hidden; }
.cons-stage { position: relative; align-self: start; margin: 16px; border-radius: 16px; overflow: hidden; background: #fff; }
.cons-base, .cons-layer { display: block; width: 100%; height: auto; }
.cons-layers { position: absolute; inset: 0; pointer-events: none; }
.cons-layer { position: absolute; inset: 0; animation: consIn .25s ease; }
@keyframes consIn { from { opacity: 0; } to { opacity: 1; } }
.cons-dots { position: absolute; inset: 0; }
.cons-dot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; background: var(--accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); cursor: pointer; padding: 0; }
.cons-dot.on { background: var(--ink); }
.cons-dot-pulse { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--accent); opacity: .6; animation: consPulse 1.8s infinite; }
@keyframes consPulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } }
.cons-dot em { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 12px; font-weight: 700; background: #fff; color: var(--ink); padding: 3px 8px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); opacity: 0; transition: opacity .15s; pointer-events: none; }
.cons-dot:hover em, .cons-dot.on em { opacity: 1; }
.cons-side { border-left: 1px solid var(--line); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.cons-parts { display: flex; flex-direction: column; gap: 6px; }
.cons-part { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; }
.cons-part.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.cons-part img, .cons-part i { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: none; background: repeating-linear-gradient(45deg, #eee 0 6px, #f7f7f7 6px 12px); }
.cons-part b { display: block; font-size: 14px; color: var(--ink); }
.cons-part small { font-size: 12px; color: var(--muted); }
.cons-pal-h { font-weight: 700; font-size: 14px; margin-bottom: 8px; color: var(--ink); }
.cons-pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.cons-sw { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; text-align: center; }
.cons-sw img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; border: 1px solid var(--line); }
.cons-sw span { font-size: 11.5px; line-height: 1.25; color: var(--text); }
.cons-sw:hover { background: rgba(17, 17, 19, .04); }
.cons-sw.on { border-color: var(--accent); background: var(--accent-soft); }
.cons-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); }
.cons-note { margin: 0 auto 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
	.cons-modal { padding: 0; align-items: stretch; }
	.cons-box { max-height: none; height: 100dvh; border-radius: 0; }
	.cons-body { display: block; overflow-y: auto; }
	.cons-stage { margin: 10px; }
	.cons-head { padding: 12px 14px; }
	.cons-head b { font-size: 16px; }
	.cons-side { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
	.cons-parts { flex-direction: row; overflow-x: auto; }
	.cons-part { flex: none; }
	.cons-note { display: none; }
	.cons-foot { justify-content: flex-end; }
}

/* Stil 1.1.1: рядок категорій — на тому ж «склі», що й шапка: сторінка під ним не просвічує */
.catbar {
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
	border-bottom: 1px solid var(--glass-border);
	box-shadow: 0 6px 18px rgba(17, 17, 19, .05);
}
.sticky-head { background: transparent; }
.cat-more-list { background: #fff; }