/* ==========================================================================
 * Oselia — загальні стандарти оформлення.
 * Контейнер: на всю ширину з боковими полями clamp(1rem,4vw,3rem).
 * Картка товару: картинка 3:4 з cover, під нею назва і ціна, без кнопки.
 * ========================================================================== */

/* --- Вертикальні відступи сторінки: удвічі менші за тему ---
 * Тема має цілу драбинку значень по брейкпоінтах: 7.1rem/7.4rem без
 * медіазапиту, далі 100 / 90 / 80 / 60 / 50px. Ділимо кожне навпіл і
 * повторюємо ті самі брейкпоінти, інакше на вужчих екранах лишиться старе.
 * Префікс body — щоб перебити правила теми з такою самою специфічністю.
 * Правила теми з !important (безрамкова головна, ≤600px) не чіпаємо. */
body .page_content_wrap{ padding-top:3.55rem; padding-bottom:3.7rem; }
@media(max-width:1439px){ body .page_content_wrap{ padding-top:50px; padding-bottom:50px; } }
@media(max-width:1279px){ body .page_content_wrap{ padding-top:45px; padding-bottom:45px; } }
@media(max-width:1023px){ body .page_content_wrap{ padding-top:40px; padding-bottom:40px; } }
@media(max-width:767px){  body .page_content_wrap{ padding-top:30px; padding-bottom:30px; } }
@media(max-width:479px){  body .page_content_wrap{ padding-top:25px; padding-bottom:25px; } }

/* --- Сторінка з картинкою збоку: текст ліворуч, знімок праворуч ---
 * Висоту задає текст: колонка зі знімком розтягується на всю висоту
 * рядка, а сам знімок обрізається по центру. Тому й не липкий —
 * прокручувати повз нього нічого.
 */
.osl-side{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:stretch;
}
.osl-side__text > *:first-child{ margin-top:0; }
/* сам знімок — фон: порожній блок не має власної висоти й не тягне
   рядок під себе, тому висоту задає лише текст. Адресу картинки
   й пропорції підставляє PHP інлайном. */
.osl-side__media{
  display:block;
  min-height:320px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media(max-width:900px){
  .osl-side{ grid-template-columns:1fr; }
  /* у стовпчик висоти від тексту вже немає — беремо власні пропорції знімка */
  .osl-side__media{ aspect-ratio:var(--osl-side-ratio,4/5); min-height:0; }
}

/* --- Шапка й підвал: той самий контейнер, що й у блоків сторінки ---
 * Рядки макетів (.sc_layouts_row) — секції Elementor у режимі boxed:
 * усередині них .elementor-container впирається в max-width від
 * --theme-var-page (1320px) і центрується, тож шапка з підвалом були
 * вужчі за контент. Знімаємо обмеження й даємо ті самі бокові поля.
 */
/* .elementor-top-section у селекторі не для краси: правило теми має
   такий самий вагу через :not(), і при рівності перемагав пізніший файл */
.sc_layouts_row.elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container{
  max-width:none;
  width:100%;
}
/* важливість потрібна: Elementor пише поля пер-елементним правилом
   виду .elementor-4614 .elementor-element.elementor-element-41d12c7,
   а воно специфічніше за будь-який загальний селектор */
/* Мінус 15px — це власний жолоб колонок Elementor
   (.elementor-element-populated має padding:15px). Віднімаємо його тут,
   щоб по краю вирівнявся сам вміст — лого й підвал стали в одну лінію
   з сіткою товарів, а не на 15px усередину. */
.sc_layouts_row.elementor-section{
  padding-left:calc(clamp(1rem,4vw,3rem) - 15px) !important;
  padding-right:calc(clamp(1rem,4vw,3rem) - 15px) !important;
}

/* --- Контейнер: магазин, архіви товарів і всі сторінки ---
 * Один стандарт на весь сайт: на всю ширину з боковими полями.
 * Кошик, оформлення й кабінет спершу лишали вужчими, але рамка тоді
 * не збігалася з рештою сайту — вирівняли.
 */
.woocommerce-shop .content_wrap,
.post-type-archive-product .content_wrap,
.tax-product_cat .content_wrap,
.tax-product_tag .content_wrap,
body.page .page_content_wrap > .content_wrap{
  width:100%; max-width:none; margin-inline:0;
  padding-inline:clamp(1rem,4vw,3rem);
  box-sizing:border-box;
}
/* сторінки, зібрані в Elementor, тримає ще й власний boxed-контейнер */
body.page .page_content_wrap .elementor-section.elementor-top-section.elementor-section-boxed > .elementor-container{
  max-width:none;
  width:100%;
}

/* --- Розкладка магазину: flex замість float і фіксованих ширин ---
 * Тема рахує ширини від --theme-var-content / --theme-var-sidebar, які прив'язані
 * до 1290px, тож у контейнері на всю ширину лишався незаповнений залишок.
 * Селектор саме .page_content_wrap > .content_wrap: на сторінці є ще один
 * .content_wrap — усередині мобільного меню, його чіпати не можна. */
.woocommerce-shop .page_content_wrap > .content_wrap,
.post-type-archive-product .page_content_wrap > .content_wrap,
.tax-product_cat .page_content_wrap > .content_wrap,
.tax-product_tag .page_content_wrap > .content_wrap{
  --osl-sidebar:clamp(240px,22vw,340px);
  --osl-gap:clamp(1.5rem,2.5vw,3rem);
  display:flex; align-items:flex-start;
  gap:var(--osl-gap);
}
.woocommerce-shop .page_content_wrap > .content_wrap > .content,
.post-type-archive-product .page_content_wrap > .content_wrap > .content,
.tax-product_cat .page_content_wrap > .content_wrap > .content,
.tax-product_tag .page_content_wrap > .content_wrap > .content{
  /* ширину рахуємо явно: flex-grow тут не спрацьовує — тема робить колонку
     shrink-to-fit, і вільного місця для розподілу не лишається */
  flex:0 0 calc(100% - var(--osl-sidebar) - var(--osl-gap));
  width:calc(100% - var(--osl-sidebar) - var(--osl-gap)) !important;
  max-width:none !important; min-width:0;
  float:none !important; margin:0 !important;
}
.woocommerce-shop .page_content_wrap > .content_wrap > .sidebar,
.post-type-archive-product .page_content_wrap > .content_wrap > .sidebar,
.tax-product_cat .page_content_wrap > .content_wrap > .sidebar,
.tax-product_tag .page_content_wrap > .content_wrap > .sidebar{
  flex:0 0 var(--osl-sidebar); width:var(--osl-sidebar) !important; max-width:none !important;
  float:none !important; margin:0 !important;
  position:sticky; align-self:flex-start;
  top:calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
}
/* сайдбар зліва — у розмітці він іде після контенту */
body.sidebar_left .page_content_wrap > .content_wrap > .sidebar{ order:-1; }
/* розпірка для float більше не потрібна */
.woocommerce-shop .page_content_wrap > .content_wrap > .clearfix,
.post-type-archive-product .page_content_wrap > .content_wrap > .clearfix,
.tax-product_cat .page_content_wrap > .content_wrap > .clearfix,
.tax-product_tag .page_content_wrap > .content_wrap > .clearfix{ display:none; }

@media(max-width:900px){
  .woocommerce-shop .page_content_wrap > .content_wrap,
  .post-type-archive-product .page_content_wrap > .content_wrap,
  .tax-product_cat .page_content_wrap > .content_wrap,
  .tax-product_tag .page_content_wrap > .content_wrap{ display:block; }
  /* колонки в стовпчик — обов'язково гасимо calc-ширини, інакше .content
     лишається вузьким на всю ширину мінус сайдбар, якого вже немає поруч */
  .woocommerce-shop .page_content_wrap > .content_wrap > .content,
  .post-type-archive-product .page_content_wrap > .content_wrap > .content,
  .tax-product_cat .page_content_wrap > .content_wrap > .content,
  .tax-product_tag .page_content_wrap > .content_wrap > .content,
  .woocommerce-shop .page_content_wrap > .content_wrap > .sidebar,
  .post-type-archive-product .page_content_wrap > .content_wrap > .sidebar,
  .tax-product_cat .page_content_wrap > .content_wrap > .sidebar,
  .tax-product_tag .page_content_wrap > .content_wrap > .sidebar{
    width:100% !important; flex:none; position:static;
  }
  .woocommerce-shop .page_content_wrap > .content_wrap > .sidebar,
  .post-type-archive-product .page_content_wrap > .content_wrap > .sidebar,
  .tax-product_cat .page_content_wrap > .content_wrap > .sidebar,
  .tax-product_tag .page_content_wrap > .content_wrap > .sidebar{ margin-top:clamp(1.5rem,4vw,2.5rem) !important; }
}

/* --- Сітка товарів: колонки в частках, а не в пікселях від 1290px ---
 * Тема рахує ширину li у px від --theme-var-content, через це вся колонка
 * ужимається під вміст і flex-grow не має що розподіляти. */
.woocommerce-shop ul.products,
.post-type-archive-product ul.products,
.tax-product_cat ul.products,
.tax-product_tag ul.products{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  /* по вертикалі більше, ніж по горизонталі: під карткою ще назва, ціна
     й ряд варіацій, і без запасу ряди читаються як суцільна стрічка */
  column-gap:clamp(1.1rem,2vw,1.8rem);
  row-gap:clamp(2.5rem,4vw,4rem);
  width:100% !important; margin:0 !important; padding:0 !important;
  list-style:none !important;
}
.woocommerce-shop ul.products::before, .woocommerce-shop ul.products::after,
.post-type-archive-product ul.products::before, .post-type-archive-product ul.products::after,
.tax-product_cat ul.products::before, .tax-product_cat ul.products::after{ content:none !important; display:none !important; }
.woocommerce-shop ul.products > li.product,
.post-type-archive-product ul.products > li.product,
.tax-product_cat ul.products > li.product,
.tax-product_tag ul.products > li.product{
  width:auto !important; max-width:none !important; min-width:0 !important;
  margin:0 !important; padding:0 !important; float:none !important; clear:none !important;
}
@media(max-width:1024px){
  .woocommerce-shop ul.products,
  .post-type-archive-product ul.products,
  .tax-product_cat ul.products,
  .tax-product_tag ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px){
  .woocommerce-shop ul.products,
  .post-type-archive-product ul.products,
  .tax-product_cat ul.products,
  .tax-product_tag ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* --- Картка товару в сітках магазину --- */
.woocommerce ul.products li.product .post_featured{ position:relative; overflow:hidden; }
.woocommerce ul.products li.product .post_featured img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail{
  width:100% !important; height:auto !important;
  aspect-ratio:3/4; object-fit:cover; display:block;
}
/* назва товару в картці.
   Потрібна вища специфічність, ніж у woocommerce.css: наш файл підключається
   раніше, а селектори там такі самі. Клас .woocommerce на сторінці магазину
   висить на самому <body>, тому пишемо складений body.woocommerce — варіант
   з нащадком (body .woocommerce) там не збігається ні з чим. Другий рядок —
   для блоків, де .woocommerce це div усередині сторінки. */
body.woocommerce ul.products li.product .woocommerce-loop-product__title,
body.woocommerce ul.products li.product .woocommerce-loop-category__title,
body.woocommerce ul.products li.product h3,
body .woocommerce ul.products li.product .woocommerce-loop-product__title,
body .woocommerce ul.products li.product .woocommerce-loop-category__title,
body .woocommerce ul.products li.product h3{
  font-size:22px;
  line-height:100%;
  font-weight:var(--theme-font-h2_font-weight);
}

/* --- Галерея в картці: три зони наведення і смужки-індикатори ---
   Зони стоять у розмітці перед смужками й картинками, тому все ловиться
   сусіднім комбінатором ~ без жодного скрипта. Зони — <span>, смужки —
   <div>, знімки — <img>: nth-of-type рахує в межах свого тега, інакше
   нумерація зон збилася б об сусідні елементи. */
.osl-hov{
  position:absolute; inset:0; display:flex;
  pointer-events:none; /* клік по картці має вести на товар */
}
.osl-hov__zone{ flex:1 1 0; pointer-events:auto; z-index:2; }
.osl-hov__img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .15s;
}
/* Біле по світлому інтер'єру не читається, тож під низ знімка кладемо
   ледь помітне затемнення — воно й тримає смужки, і підпис. Разом із
   ними з'являється лише при наведенні, щоб картка в спокої лишалась чистою. */
.osl-hov::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:72px; z-index:4;
  background:linear-gradient(to top, rgba(0,0,0,.32), rgba(0,0,0,0));
  opacity:0; transition:opacity .2s; pointer-events:none;
}
li.product:hover .osl-hov::after,
li.product:hover .osl-hov__bars{ opacity:1; }

/* z-index 5: тема кладе на знімок .mask (4) — під нею смужки блякнуть */
.osl-hov__bars{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:5;
  display:flex; gap:4px;
  opacity:0; transition:opacity .2s;
}
.osl-hov__bars i{
  flex:1 1 0; height:2px; border-radius:1px;
  background:rgba(255,255,255,.45);
  transition:background-color .15s;
}
.osl-hov__bars i:first-child{ background:#fff; }

.osl-hov__zone:nth-of-type(2):hover ~ .osl-hov__img:nth-of-type(1),
.osl-hov__zone:nth-of-type(3):hover ~ .osl-hov__img:nth-of-type(2){ opacity:1; }

.osl-hov__zone:nth-of-type(2):hover ~ .osl-hov__bars i:first-child,
.osl-hov__zone:nth-of-type(3):hover ~ .osl-hov__bars i:first-child{ background:rgba(255,255,255,.45); }
.osl-hov__zone:nth-of-type(2):hover ~ .osl-hov__bars i:nth-child(2),
.osl-hov__zone:nth-of-type(3):hover ~ .osl-hov__bars i:nth-child(3){ background:#fff; }

/* «+37 фото» — у куті знімка над смужками, тільки на правій третині */
.osl-hov__more{
  position:absolute; right:10px; bottom:20px; z-index:5;
  font-size:14px; font-weight:500; line-height:1; letter-spacing:.02em;
  color:#fff;
  opacity:0; transform:translateY(3px);
  transition:opacity .15s,transform .15s;
  pointer-events:none;
}
.osl-hov__zone:nth-of-type(3):hover ~ .osl-hov__more{ opacity:1; transform:none; }

/* Кнопка «в обране» від теми — 47px рівно в центрі знімка, тобто всередині
   середньої третини. Вона перехоплює курсор, тож повторюємо для неї те саме,
   що робить середня зона: інакше в центрі картки була б мертва пляма. */
.icons:hover ~ .osl-hov .osl-hov__img:nth-of-type(1){ opacity:1; }
.icons:hover ~ .osl-hov .osl-hov__bars i:first-child{ background:rgba(0,0,0,.16); }
.icons:hover ~ .osl-hov .osl-hov__bars i:nth-child(2){ background:rgba(0,0,0,.62); }

/* дотик третин не має: там показуємо просто головне фото */
@media(hover:none){
  .osl-hov{ display:none; }
}

/* --- Мініатюри варіацій під ціною в картці --- */
.osl-loop-swatches{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  margin-top:.65rem;
}
.osl-loop-swatches__item{
  display:block; width:30px; height:30px; box-sizing:border-box; overflow:hidden;
  border:1px solid var(--theme-color-bd_color,#D5D0C7);
  transition:border-color .2s;
}
.osl-loop-swatches__item img{
  display:block; width:100%; height:100%; object-fit:cover;
}
li.product:hover .osl-loop-swatches__item{ border-color:var(--theme-color-text_dark,#262320); }
.osl-loop-swatches__rest{
  font-size:12px; line-height:1; font-variant-numeric:tabular-nums;
  color:var(--theme-color-text_light,#7a736c);
}

/* кнопку прибираємо ще й стилями — на випадок, якщо її додасть плагін */
.woocommerce ul.products li.product .add_to_cart_wrap,
.woocommerce ul.products li.product .post_data .screen-reader-text{ display:none !important; }

/* --- Картка товару: контейнер, сітка галереї, липкий блок інформації --- */
.single-product .content_wrap{
  width:100%; max-width:none; margin-inline:0;
  padding-inline:clamp(1rem,4vw,3rem);
  box-sizing:border-box;
}
/* Дві колонки — тільки галерея + інформація, усередині власної обгортки
   .osl-product-top (її додає плагін). Вкладки, схожі та допродажі лишаються
   звичайними блоками div.product, їхні стилі не чіпаємо. */
.single-product .osl-product-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(320px,30%,520px);
  gap:clamp(1.5rem,3vw,3rem);
  align-items:start;
}
.single-product .osl-product-top > .woocommerce-product-gallery,
.single-product .osl-product-top > .summary{
  float:none !important; width:auto !important; max-width:none !important; margin:0 !important;
}
/* Прибираємо ліві відступи обох колонок:
   у галереї тема резервувала місце під колонку мініатюр (150px, на брейкпоінтах
   120/170/110), у блоку інформації woocommerce.css додає padding-left:60px під
   стару розкладку з float. У сітці ці відступи лише з'їдають ширину. */
.single-product .osl-product-top > .woocommerce-product-gallery,
.single-product .osl-product-top > .summary{ padding-left:0 !important; }
/* прилипає в межах обгортки, тобто рівно поки поруч галерея */
.single-product .osl-product-top > .summary{
  position:sticky; align-self:start;
  top:calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
}

/* галерея: великі картинки у дві колонки */
/* !important обов'язковий: woocommerce.css має правило
   .woocommerce div.product div.images .woocommerce-product-gallery__wrapper{display:block}
   з вищою специфічністю. Поки обгортка не стане справжнім grid, плитки
   лишаються inline-block і стискаються під картинку. */
.single-product .woocommerce-product-gallery__wrapper{
  display:grid !important;
  /* 6 колонок — спільний знаменник для рядів по 2 (span 3) і по 3 (span 2) */
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:clamp(.8rem,1.5vw,1.4rem);
  margin:0 !important; padding:0 !important; list-style:none;
}
.single-product .woocommerce-product-gallery__image{
  width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important;
  float:none !important;
  grid-column:span 3;            /* за замовчуванням 2 в ряд */
}
.single-product .woocommerce-product-gallery__image img{
  width:100% !important; height:auto !important;
  aspect-ratio:3/4; object-fit:cover; display:block;
}
/* Непарна кількість фото — останній ряд робимо з трьох.
   :nth-last-child(3):nth-child(odd) вибирає третє з кінця саме тоді, коли
   всього фото непарна кількість; далі беремо його та двох наступних сусідів.
   3 фото → один ряд по 3; 5 → 2 + 3; 7 → 2 + 2 + 3; 4 → 2 + 2. */
.single-product .woocommerce-product-gallery__image:nth-last-child(3):nth-child(odd),
.single-product .woocommerce-product-gallery__image:nth-last-child(3):nth-child(odd) ~ .woocommerce-product-gallery__image{
  grid-column:span 2;
}
/* єдине фото — на всю ширину, інакше висіло б половиною */
.single-product .woocommerce-product-gallery__image:first-child:last-child{ grid-column:span 6; }

@media(max-width:900px){
  .single-product .osl-product-top{ display:block; }
  .single-product .osl-product-top > .summary{ position:static; margin-top:clamp(1.5rem,4vw,2.5rem) !important; }
  .single-product .woocommerce-product-gallery__wrapper{ grid-template-columns:1fr !important; }
  .single-product .woocommerce-product-gallery__image,
  .single-product .woocommerce-product-gallery__image:nth-last-child(3):nth-child(odd),
  .single-product .woocommerce-product-gallery__image:nth-last-child(3):nth-child(odd) ~ .woocommerce-product-gallery__image,
  .single-product .woocommerce-product-gallery__image:first-child:last-child{ grid-column:auto; }
}

/* --- Обкладинка кореневого розділу --- */
.osl-cover{
  position:relative; margin:0 0 clamp(1.2rem,2.5vw,2rem);
  overflow:hidden; background:var(--theme-color-bg_color_2,rgba(38,35,32,.06));
}
.osl-cover img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/5; object-fit:cover;
}
.osl-cover__title{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(1rem,3vw,2rem) clamp(1rem,3vw,2.2rem);
  font-family:var(--theme-font-h2_font-family, inherit);
  font-weight:var(--theme-font-h2_font-weight, 700);
  font-size:clamp(1.4rem,3vw,2.4rem); line-height:1.1;
  text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,rgba(10,8,6,0),rgba(10,8,6,.62));
}
@media(max-width:600px){ .osl-cover img{ aspect-ratio:3/2; } }

/* --- Лінія категорій над сіткою --- */
/* смуга йде над обома колонками: .content_wrap у нас flex-рядок,
   тож дозволяємо перенос і віддаємо смузі весь перший рядок */
.woocommerce-shop .page_content_wrap > .content_wrap,
.post-type-archive-product .page_content_wrap > .content_wrap,
.tax-product_cat .page_content_wrap > .content_wrap,
.tax-product_tag .page_content_wrap > .content_wrap{ flex-wrap:wrap; }
/* order нижчий за сайдбар: у нього -1, інакше він стає перед смугою.
   min-width:0 обов'язковий — без нього flex-елемент не стискається нижче
   ширини вмісту, і смуга вилазить за контейнер разом зі скролом сторінки. */
.osl-cats{ flex:0 0 100%; order:-2; min-width:0; }

.osl-cats{
  position:relative; margin:0 0 clamp(1.6rem,3vw,2.6rem);
}
.osl-cats__scroll{
  display:flex; gap:clamp(.7rem,1.6vw,1.5rem);
  overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.osl-cats__scroll::-webkit-scrollbar{ display:none; }
/* стрілка притиснута до краю і вирівняна по центру картинок,
   а не всієї плитки: підпис лежить нижче і в центрування не входить */
.osl-cats__arrow{
  position:absolute; right:0; top:0; bottom:2.1rem; margin-block:auto;
  z-index:2;
  width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1; cursor:pointer;
  background:var(--theme-color-bg_color,#fff);
  color:var(--theme-color-text_dark,#262320);
  border:1px solid var(--theme-color-bd_color,#D5D0C7); border-radius:50%;
  transition:border-color .2s, background .2s;
}
.osl-cats__arrow--prev{ left:0; right:auto; }
.osl-cats__arrow:hover{ border-color:var(--theme-color-text_dark,#262320); }
.osl-cats__arrow[hidden]{ display:none; }

.osl-cat{
  flex:0 0 auto; scroll-snap-align:start;
  display:flex; flex-direction:column; gap:clamp(.7rem,1.2vw,1rem);
  width:clamp(118px,14vw,190px);
  box-sizing:border-box;
  border:0; padding:0; background:transparent;
  text-decoration:none; color:inherit;
}
/* картинка — квадрат без рамки й скруглень, підпис під нею */
.osl-cat__media{
  width:100%; aspect-ratio:1/1; border-radius:0;
  overflow:hidden; background:var(--theme-color-bg_color_2,#F1F1F1);
  display:block;
}
.osl-cat__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.osl-cat:hover .osl-cat__media img{ transform:scale(1.04); }
/* «Усі» — суцільна плашка замість картинки */
.osl-cat--all .osl-cat__media{ background:var(--theme-color-text_dark,#262320); }
.osl-cat__title{
  font-family:var(--theme-font-h4_font-family, inherit);
  font-weight:700;
  font-size:clamp(.78rem,1vw,.95rem); line-height:1.2;
  text-align:center; letter-spacing:.02em;
  color:var(--theme-color-text_dark,#262320);
  transition:color .2s;
}
.osl-cat:hover .osl-cat__title{ color:var(--theme-color-text_link,#D14119); }
.osl-cat.is-active .osl-cat__title{ color:var(--theme-color-text_link,#D14119); }
@media(max-width:600px){
  .osl-cat{ width:118px; }
  .osl-cats__arrow{ width:36px; height:36px; }
}

/* --- Варіації товару: картинка + постійний підпис ---
 * Плагін woo-variation-swatches показував лише картинку, а назву — підказкою
 * при наведенні через [data-wvstooltip]::before. Переиспользуємо цей самий
 * псевдоелемент як постійний підпис: контент у ньому вже потрібний
 * (attr(data-wvstooltip)), треба лише зняти абсолютне позиціонування
 * і приховування. ::after — це стрілка підказки, вона більше не потрібна. */
.woo-variation-swatches .variable-items-wrapper{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem !important;
  margin:0 !important; padding:0 !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item){
  width:auto !important; height:auto !important; min-width:0 !important;
  margin:0 !important; padding:0 !important;
  box-shadow:none !important;
  border:1px solid var(--theme-color-bd_color,#D5D0C7) !important;
  border-radius:0 !important;
  background:transparent !important;
  /* висоту плитки задає картинка 45px; підпис обмежений трьома рядками,
     тож порожнечі згори та знизу не лишається */
  display:flex !important; align-items:center; justify-content:space-between; gap:.4rem;
  overflow:hidden;
  transition:border-color .2s, box-shadow .2s;
}
/* підпис праворуч від картинки, текст по центру */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item)::before{
  position:static !important; opacity:1 !important; visibility:visible !important;
  transform:none !important; transition:none !important;
  /* не більше трьох рядків — рівно стільки вміщує картинка 45px.
     Довші назви обрізаються трикрапкою. */
  display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
  flex:1 1 auto; min-width:0;
  width:auto !important; max-width:none !important;
  /* плагін ставить підказці height:var(--tip-height) — 30px.
     Через це підпис довше двох рядків обрізався. */
  height:auto !important; max-height:none !important;
  margin:0 !important; padding:0 .4rem !important;
  background:transparent !important; box-shadow:none !important; border-radius:0 !important;
  color:var(--theme-color-text_dark,#262320) !important;
  font-size:11px !important; line-height:1.2 !important; font-weight:400 !important;
  text-align:center !important; white-space:normal !important;
  pointer-events:none;
}
/* стрілка підказки не потрібна */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item)::after{
  content:none !important; display:none !important;
}
/* галочка вибраного варіанта (плагін малює її фоном var(--wvs-tick)) — не потрібна */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) .variable-item-contents::before,
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) .variable-item-contents::after{
  content:none !important; display:none !important; background-image:none !important;
}
/* картинка крупніша і впритул до рамки */
/* плагін ставить обгортці width:100%, через це картинка «висіла» по центру
   і не діставала до рамки — стискаємо обгортку під саму картинку.
   order:-1 ставить картинку перед підписом: у розмітці вона йде після
   псевдоелемента ::before, тому без цього була б праворуч. */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) .variable-item-contents{
  order:-1;
  flex:0 0 auto; width:auto !important; max-width:none !important;
  display:flex !important;
  margin:0 !important; padding:0 !important; line-height:0;
}
/* картинка рівно 45×45, висоту плитки задає саме вона */
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) img.variable-item-image{
  width:45px !important; height:45px !important; max-width:none !important;
  object-fit:cover; display:block; margin:0 !important; border-radius:0 !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover{
  border-color:var(--theme-color-text_dark,#262320) !important;
}
/* активна варіація — фірмовим акцентом */
.woo-variation-swatches .variable-items-wrapper .variable-item.selected:not(.radio-variable-item),
.woo-variation-swatches .variable-items-wrapper .variable-item[aria-checked="true"]:not(.radio-variable-item){
  border-color:var(--theme-color-text_link,#D14119) !important;
  /* обводка назовні, а не inset — inset лягала поверх картинки */
  box-shadow:0 0 0 1px var(--theme-color-text_link,#D14119) !important;
}
.woo-variation-swatches .variable-items-wrapper .variable-item.selected:not(.radio-variable-item)::before,
.woo-variation-swatches .variable-items-wrapper .variable-item[aria-checked="true"]:not(.radio-variable-item)::before{
  color:var(--theme-color-text_link,#D14119) !important; font-weight:500 !important;
}

/* --- Хлібні крихти на картці товару (у правій колонці, над назвою) --- */
.osl-crumbs{ margin:0 0 clamp(.6rem,1.2vw,1rem); }
.osl-crumbs__trail{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .45rem;
  margin:0; padding:0; list-style:none;
  font-size:13px; line-height:1.5; color:var(--theme-color-text_light,#7a736c);
}
/* друга і наступні гілки — тим самим товаром, лише інший шлях: тихіше */
.osl-crumbs__trail li{ display:flex; align-items:baseline; gap:.45rem; }
.osl-crumbs__trail li + li::before{
  content:"›"; color:var(--theme-color-bd_color,#D5D0C7); font-size:1.1em; line-height:1;
}
.osl-crumbs__trail a{
  color:inherit; text-decoration:none; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.osl-crumbs__trail a:hover{
  color:var(--theme-color-text_dark,#262320);
  border-bottom-color:var(--theme-color-bd_color,#D5D0C7);
}
.osl-crumbs__trail a:focus-visible{ outline:2px solid var(--theme-color-text_link,#D14119); outline-offset:2px; }
.osl-crumbs__trail [aria-current="page"]{ color:var(--theme-color-text_dark,#262320); }

/* --- Підрозділи: пігулки над сіткою --- */
.osl-subcats{
  display:flex; flex-wrap:wrap; gap:.4rem .5rem;
  margin:0 0 clamp(1.1rem,2vw,1.6rem);
}
.osl-subcat{
  display:inline-flex; align-items:baseline; gap:.4rem;
  padding:.42rem .8rem;
  font-size:13px; line-height:1.2; white-space:nowrap;
  color:var(--theme-color-text_dark,#262320); text-decoration:none;
  border:1px solid var(--theme-color-bd_color,#D5D0C7);
  background:transparent;
  transition:border-color .2s, color .2s, background .2s;
}
.osl-subcat:hover{ border-color:var(--theme-color-text_dark,#262320); }
.osl-subcat.is-active{
  border-color:var(--theme-color-text_link,#D14119);
  color:var(--theme-color-text_link,#D14119);
}
.osl-subcat__n{
  font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--theme-color-text_light,#7a736c);
}
.osl-subcat.is-active .osl-subcat__n{ color:inherit; }
.osl-subcat--all{ border-style:dashed; }

/* Тема дає заголовкам віджетів margin-bottom:1.5em (≈21px) — під назвою
   фільтра зяяла дірка. Важливість потрібна: тим самим селектором тема
   перезадає відступ ще й у __responsive.css на кожному брейкпоінті
   (1.1em, 1em), і звичайне правило програє за порядком. */
.widget .widget_title,
.widget .widgettitle{ margin-bottom:0 !important; }

/* заголовки наших блоків у сайдбарі — невеликий відступ до списку.
   Глобальний нуль вище лишається: там 1.5em теми, а тут рівно стільки,
   скільки треба, щоб назва не злипалася з першим пунктом. */
.sidebar .osl-tree .osl-tree__title,
.sidebar .osl-facet .osl-facet__title,
.osl-tree__title,
.osl-facet__title{ margin-bottom:10px !important; }

/* --- Дерево гілки в сайдбарі --- */
/* заголовок — звичайним кольором заголовка, акцент лишаємо активному пункту */
.sidebar .osl-tree .osl-tree__title a,
.osl-tree__title a{
  color:inherit !important;
  text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.osl-tree__title a:hover{ border-bottom-color:currentColor; }
/* тема задає .widget ul власні маркери й відступ — гасимо адресно */
.sidebar .osl-tree__list,
.osl-tree__list{ list-style:none !important; margin:0 !important; padding-left:0 !important; }
/* кружечок тема вішає на посилання (a::before), а не на <li> */
.sidebar .osl-tree__list > li::before,
.osl-tree__list > li::before,
.sidebar .osl-tree__link::before,
.osl-tree__link::before{ content:none !important; display:none !important; }
.osl-tree__list > li{ padding-left:0 !important; }
.osl-tree__list--sub{
  margin:.15rem 0 .4rem .8rem !important;
  padding-left:.7rem !important;
  border-left:1px solid var(--theme-color-bd_color,#D5D0C7);
}
.osl-tree__link{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  padding:.3rem 0; font-size:14px; line-height:1.3;
  color:var(--theme-color-text_dark,#262320); text-decoration:none;
  transition:color .2s;
}
/* тема фарбує .sidebar a своїм кольором — акцент активного пункту б'ємо адресно */
.sidebar .osl-tree .osl-tree__link:hover,
.osl-tree__link:hover{ color:var(--theme-color-text_link,#D14119) !important; }
.sidebar .osl-tree .osl-tree__link.is-active,
.osl-tree__link.is-active{ color:var(--theme-color-text_link,#D14119) !important; font-weight:600; }
.osl-tree__n{
  font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--theme-color-text_light,#7a736c);
}
.osl-tree__list--sub .osl-tree__link{ font-size:13px; }

/* ==========================================================================
   Часті питання: заклик зліва, гармошка справа.
   Гармошка на <details> — без скрипта, працює й до завантаження JS теми.
   ========================================================================== */
.chh-faq{ padding-block:clamp(3rem,6vw,5rem); }
.chh-faq__grid{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:start;
}
@media(max-width:900px){ .chh-faq__grid{ grid-template-columns:1fr; } }

.chh-faq__title{
  margin:0 0 1.2rem;
  font-size:clamp(2rem,5vw,3.6rem); line-height:.98;
  text-transform:uppercase; letter-spacing:-.01em;
  color:var(--theme-color-text_dark,#262320);
}
.chh-faq__lead{
  margin:0 0 1.6rem; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.45;
  color:var(--theme-color-text_dark,#262320);
}
.chh-faq__btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95em 1.6em; border-radius:999px;
  background:var(--theme-color-text_dark,#262320); color:#fff !important;
  font-size:15px; line-height:1; text-decoration:none;
  transition:background-color .2s;
}
.chh-faq__btn:hover{ background:var(--theme-color-text_link,#D14119); }
.chh-faq__btn-arrow{ font-size:1.15em; line-height:1; }

.chh-faq__item{
  border-top:1px solid var(--theme-color-bd_color,#D5D0C7);
}
.chh-faq__item:last-child{ border-bottom:1px solid var(--theme-color-bd_color,#D5D0C7); }
/* типографіка — та сама, що в назви товару в каталозі
   (.woocommerce-loop-product__title): 22px, h2-накреслення, верхній регістр.
   Беремо змінні теми, а не значення — щоб зміна типографіки в налаштуваннях
   міняла заголовки питань разом із картками. */
.chh-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(1rem,2vw,1.5rem) 0; cursor:pointer;
  font-family:var(--theme-font-h2_font-family, inherit);
  font-size:22px;
  line-height:100%;
  font-weight:var(--theme-font-h2_font-weight, 700);
  text-transform:var(--theme-font-h2_text-transform, uppercase);
  letter-spacing:var(--theme-font-h2_letter-spacing, normal);
  color:var(--theme-color-text_dark,#262320);
  list-style:none; transition:color .2s;
}
/* стандартний трикутник прибираємо в обох рушіях */
.chh-faq__q::-webkit-details-marker{ display:none; }
.chh-faq__q::marker{ content:''; }
.chh-faq__q:hover{ color:var(--theme-color-text_link,#D14119); }

/* плюс, що перетворюється на хрестик: дві риски, друга повертається */
.chh-faq__sign{
  position:relative; flex:0 0 auto; width:18px; height:18px;
}
.chh-faq__sign::before,
.chh-faq__sign::after{
  content:''; position:absolute; left:50%; top:50%;
  width:16px; height:1.5px; background:currentColor;
  transform:translate(-50%,-50%); transition:transform .25s;
}
.chh-faq__sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.chh-faq__item[open] .chh-faq__sign::before{ transform:translate(-50%,-50%) rotate(45deg); }
.chh-faq__item[open] .chh-faq__sign::after{ transform:translate(-50%,-50%) rotate(-45deg); }

.chh-faq__a{
  padding:0 3rem clamp(1.2rem,2.5vw,1.8rem) 0;
  font-size:clamp(.95rem,1.2vw,1.05rem); line-height:1.55;
  color:var(--theme-color-text_light,#7a736c);
}
.chh-faq__a p{ margin:0 0 .8em; }
.chh-faq__a p:last-child{ margin-bottom:0; }
.chh-faq__a a{ color:var(--theme-color-text_link,#D14119); }
@media(max-width:600px){ .chh-faq__a{ padding-right:0; } }

/* --- Кошик, оформлення й кабінет: вміст на всю колонку ---
 * Тема робить .content вужчим і притискає вправо, лишаючи місце під
 * бічну колонку. На цих сторінках колонка не виводиться взагалі, тож
 * зліва зяяв порожній стовпчик у 450px.
 */
body.woocommerce-cart .page_content_wrap > .content_wrap > .content,
body.woocommerce-checkout .page_content_wrap > .content_wrap > .content,
body.woocommerce-account .page_content_wrap > .content_wrap > .content{
  width:100% !important;
  float:none !important;
}

/* --- Заголовки в кошику, оформленні й кабінеті ---
 * Тема задає розміри заголовків в em, тож вони успадковувалися від
 * різних батьків: у формі оформлення чотири h3 мали 30, 35, 35.003 і
 * 37px, а «Підсумки кошика» — 22px і вагу 600 замість 900.
 * Приводимо до одного розміру й до накреслення заголовків сайту.
 */
body.woocommerce-cart .content h2,
body.woocommerce-cart .content h3,
body.woocommerce-checkout .content h2,
body.woocommerce-checkout .content h3,
body.woocommerce-account .content h2,
body.woocommerce-account .content h3{
  font-family:var(--theme-font-h2_font-family, inherit);
  font-weight:var(--theme-font-h2_font-weight, 900);
  text-transform:var(--theme-font-h2_text-transform, uppercase);
  letter-spacing:var(--theme-font-h2_letter-spacing, normal);
  /* важливість — бо woocommerce-responsive.css задає розмір селекторами
     з id (#order_review_heading_payment) і довгими ланцюжками форми */
  font-size:26px !important;
  line-height:1.1 !important;
}

/* --- Назва товару в кошику й оформленні ---
 * Те саме накреслення, що й у назв у каталозі: Roboto Flex, вага h2.
 * Розмір лишаємо рядковий, регістр не чіпаємо — назви тут довгі.
 */
body.woocommerce-cart .woocommerce-cart-form td.product-name,
body.woocommerce-cart .woocommerce-cart-form td.product-name a,
body.woocommerce-checkout #order_review td.product-name,
body.woocommerce-checkout #order_review td.product-name a{
  font-family:var(--theme-font-h2_font-family, inherit);
  font-weight:var(--theme-font-h2_font-weight, 900);
}

/* --- Шапка на головній лежить поверх темного відео ---
 * Звичайні пункти меню тема вже робить білими, а активний пункт, його
 * підкреслення та іконки лишалися темними й тонули в кадрі.
 * Скоуп — клас шаблону головної, на решті сторінок шапка світла.
 */
body.chh-custom-home .top_panel .sc_layouts_item_icon{ color:#fff; }
/* лупа — окремий елемент, під .sc_layouts_item_icon не підпадає.
   Беремо тільки згорнуту іконку в шапці (прямий нащадок .search_modern):
   всередині розгорнутої форми лежить свій .search_submit, і він на темній
   підкладці оверлея має лишатися як є. */
body.chh-custom-home .top_panel .sc_layouts_search .search_modern > .search_submit{ color:#fff; }
body.chh-custom-home .top_panel .sc_layouts_search .search_modern > .search_submit:hover{
  color:var(--theme-color-text_link,#D14119);
}
/* важливість і .sc_layouts_menu_nav у селекторі потрібні: тема фарбує
   активний пункт правилом .menu_hover_zoom_line … > a з !important */
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current-menu-item > a,
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current-menu-ancestor > a,
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current_page_item > a{
  color:#fff !important;
}
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current-menu-item > a::after,
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current-menu-ancestor > a::after,
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current_page_item > a::after{
  background-color:#fff !important;
}
/* активний пункт під курсором поводиться як решта — акцентом.
   Селектор довший за правило вище навмисно: інакше білий переважив би */
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current-menu-item > a:hover,
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current-menu-ancestor > a:hover,
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current_page_item > a:hover{
  color:var(--theme-color-text_link,#D14119) !important;
}
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current-menu-item > a:hover::after,
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current-menu-ancestor > a:hover::after,
body.chh-custom-home .top_panel .sc_layouts_menu_nav > li.current_page_item > a:hover::after{
  background-color:var(--theme-color-text_link,#D14119) !important;
}

/* --- Підкреслення пункту меню під курсором — акцентом ---
 * Тема фарбує риску кольором тексту (--theme-color-text_dark) і для
 * наведення, і для активного пункту, хоча сам текст під курсором стає
 * акцентним. Вирівнюємо: риска йде за текстом. Діє на всіх сторінках.
 */
.menu_hover_zoom_line .sc_layouts_menu_nav > li:not(.menu-collapse) > a:hover::after,
.menu_hover_zoom_line .sc_layouts_menu_nav > li:not(.menu-collapse).sfHover > a::after{
  background-color:var(--theme-color-text_link,#D14119) !important;
}

/* --- Перемикач мов у шапці --- */
.osl-lang{ display:flex; align-items:center; gap:.15rem; }
.sc_layouts_row .osl-lang{ margin-right:.9rem; }
.osl-lang__item{
  display:inline-block; padding:.2rem .35rem;
  font-size:13px; line-height:1; letter-spacing:.04em;
  color:inherit !important; text-decoration:none; opacity:.55;
  transition:opacity .2s,color .2s;
}
.osl-lang__item:hover{ opacity:1; }
.osl-lang__item.is-active{ opacity:1; font-weight:600; }
/* роздільник між кодами, щоб «UA RU» не злипалися */
.osl-lang__item + .osl-lang__item{ border-left:1px solid currentColor; margin-left:.1rem; }

/* --- Колонки підвалу: каталог і довідка --- */
.acf-menu{ display:flex; flex-direction:column; text-align:left; }
.acf-menu__title{ font-weight:700; margin-bottom:10px; }
.acf-menu a{ padding:.15rem 0; }

/* юридичні посилання нижнього рядка */
.osl-legal{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.osl-legal__sep{ opacity:.45; }

/* --- Згортання довгих списків (без JS) ---
   Чекбокс стоїть перед <ul>, підпис — після; решту ховає CSS.
   Прибирати його з потоку через display:none не можна — тоді він
   випадає з фокуса і список не розкрити з клавіатури. */
.osl-more__cb{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
/* тема розсуває сусідні пункти списку віджета на 10px — у наших списках
   рядки й так мають власні відступи, разом виходило надто пухко */
.sidebar .osl-more__list li + li,
.osl-more__list li + li{ margin-top:0; }
.osl-more__list:not(.osl-more__list--head) > li:nth-child(n+4){ display:none; }
/* у дереві перший пункт — «Усі товари розділу», тож видно ще три типи */
.osl-more__list--head > li:nth-child(n+5){ display:none; }
.osl-more__cb:checked ~ .osl-more__list > li{ display:list-item; }

.osl-more{
  display:inline-block; margin-top:.35rem; cursor:pointer;
  font-size:13px; color:var(--theme-color-text_light,#7a736c);
  border-bottom:1px solid var(--theme-color-bd_color,#D5D0C7);
  transition:color .2s,border-color .2s;
}
.osl-more:hover{
  color:var(--theme-color-text_link,#D14119);
  border-bottom-color:currentColor;
}
.osl-more__cb:focus-visible ~ .osl-more{
  outline:2px solid var(--theme-color-text_link,#D14119); outline-offset:3px;
}
.osl-more__hide{ display:none; }
.osl-more__cb:checked ~ .osl-more .osl-more__show{ display:none; }
.osl-more__cb:checked ~ .osl-more .osl-more__hide{ display:inline; }

/* --- Фасети фільтрів (виробник, колір) --- */
/* відступ заголовка — вище, разом із деревом розділів */
.sidebar .osl-facet__list,
.osl-facet__list{ list-style:none !important; margin:0 !important; padding-left:0 !important; }
/* кружечок тема вішає на посилання, як і в дереві розділів */
.sidebar .osl-facet__list > li::before,
.osl-facet__list > li::before,
.sidebar .osl-facet__link::before,
.osl-facet__link::before{ content:none !important; display:none !important; }
.osl-facet__list > li{ padding-left:0 !important; }

.sidebar .osl-facet .osl-facet__link,
.osl-facet__link{
  display:flex; align-items:center; gap:.55rem;
  padding:.32rem 0; font-size:14px; line-height:1.3;
  color:var(--theme-color-text_dark,#262320) !important; text-decoration:none;
  transition:color .2s;
}
.sidebar .osl-facet .osl-facet__link:hover,
.osl-facet__link:hover{ color:var(--theme-color-text_link,#D14119) !important; }

.osl-facet__box{
  flex:0 0 auto; width:15px; height:15px; border-radius:2px;
  border:1px solid var(--theme-color-bd_color,#D5D0C7);
  background:transparent; position:relative; transition:border-color .2s,background-color .2s;
}
.osl-facet__link:hover .osl-facet__box{ border-color:var(--theme-color-text_link,#D14119); }
.osl-facet__link.is-active .osl-facet__box{
  border-color:var(--theme-color-text_link,#D14119);
  background:var(--theme-color-text_link,#D14119);
}
/* галочка — двома лініями, щоб не тягнути іконковий шрифт */
.osl-facet__link.is-active .osl-facet__box::after{
  content:''; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid #fff; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
.osl-facet__label{ flex:1 1 auto; min-width:0; }
.sidebar .osl-facet .osl-facet__link.is-active,
.osl-facet__link.is-active{ color:var(--theme-color-text_link,#D14119) !important; }
.osl-facet__n{
  flex:0 0 auto; font-size:11px; font-variant-numeric:tabular-nums;
  color:var(--theme-color-text_light,#7a736c);
}
.osl-facet__link.is-active .osl-facet__n{ color:inherit; }

/* кнопка «Фільтр» більше не потрібна: діапазон застосовується, щойно
   відпустив повзунок (див. filters.js) */
.widget_price_filter .price_slider_amount .button{ display:none !important; }

/* скидання — прямокутна кнопка на всю ширину, обведення без заливки */
.osl-facet-reset{ margin-top:.2rem; }
.sidebar .osl-facet-reset__link,
.osl-facet-reset__link{
  display:block; width:100%; box-sizing:border-box;
  padding:.85em 1em; border-radius:0;
  border:1px solid var(--theme-color-text_link,#D14119);
  background:transparent;
  color:var(--theme-color-text_link,#D14119) !important;
  font-size:12px; line-height:1; letter-spacing:.08em;
  text-align:center; text-transform:uppercase; text-decoration:none;
  transition:border-color .2s,color .2s;
}
.sidebar .osl-facet-reset__link:hover,
.osl-facet-reset__link:hover{
  border-color:var(--theme-color-text_dark,#262320);
  color:var(--theme-color-text_dark,#262320) !important;
}

/* на вузьких екранах пігулки не переносимо — 10 типів дають 6 рядів
   і з'їдають екран. Один рядок з горизонтальною прокруткою. */
@media(max-width:600px){
  .osl-subcats{
    flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:0;
  }
  .osl-subcats::-webkit-scrollbar{ display:none; }
  .osl-subcat{ flex:0 0 auto; }
}

/* ---------- доставка: Нова Пошта / Укрпошта ---------- */

/* «за тарифами перевізника» під назвою способу доставки */
.osl-ship__note{
	display:block;
	font-size:13px;
	line-height:1.3;
	opacity:.6;
	text-transform:none;
	margin-top:2px;
}

/* Поля плагіна йдуть одразу за платіжними даними — тримаємо той самий
   вертикальний ритм, що й у решти полів чекауту. */
.mrkv_ua_shipping_checkout_fields{
	margin-top:1.5em;
}
.mrkv_ua_shipping_checkout_fields .form-row{
	padding-inline:0;
}
/* Приховані технічні поля (ref, zipcode тощо) не мають лишати порожній рядок:
   input лежить усередині .woocommerce-input-wrapper, тому шукаємо нащадка. */
.mrkv_ua_shipping_checkout_fields .form-row:has(.input-hidden){
	margin:0 !important;
	padding:0;
}
/* Країна одна — поле лишається лише як прихований input. */
#billing_country_field{
	margin:0 !important;
	padding:0;
}

/* Список способів доставки в підсумку замовлення: тема притискає вміст
   комірки праворуч, і назви з приміткою ламаються на 3–4 рядки. */
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals th,
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals td{
	display:block;
	width:100%;
	text-align:left;
	padding-inline:0;
}
body.woocommerce-checkout #order_review tr.woocommerce-shipping-totals th{
	padding-bottom:.4em;
}
#shipping_method{
	margin:0;
	padding:0;
	list-style:none;
}
#shipping_method li{
	display:flex;
	align-items:flex-start;
	gap:.6em;
	margin:0 0 .7em;
	padding:0;
	text-align:left;
}
#shipping_method li:last-child{
	margin-bottom:0;
}
#shipping_method li input[type="radio"]{
	margin-top:.25em;
	flex:0 0 auto;
}
#shipping_method li label{
	margin:0;
	flex:1 1 auto;
	line-height:1.25;
}

/* ---------- Розгорнутий пошук у шапці ---------- */

/* Підкладка оверлея світла, а хрестик лишався білим і зникав на ній.
   Причина — правило самої головної `.chh-custom-home .top_panel_custom a`
   з `color:#fff !important`: воно фарбує в шапці геть усі посилання, і
   хрестик оверлея разом з ними. Перебиваємо його точковим селектором:
   чотири класи проти двох, і теж з важливістю — інакше !important не зняти. */
body.chh-custom-home .top_panel .search_wrap.search_opened .search_close,
body.chh-custom-home .top_panel .search_wrap.search_opened .search_close:hover{
	color:var(--theme-color-text_dark, #262320) !important;
}
/* на решті сторінок шапка світла — тут вистачає звичайного правила */
.search_wrap.search_opened .search_close,
.search_wrap.search_opened .search_close:hover{
	color:var(--theme-color-text_dark, #262320);
}

/* Лого в оверлеї тема віддає у 100px заввишки — воно перекриває сам рядок
   пошуку. На десктопі тримаємо 30px; height:auto потрібен, бо тема задає
   і height, і max-height водночас. */
@media (min-width:768px){
	.search_wrap.search_opened .search_header_wrap .logo_image{
		height:auto;
		max-height:30px;
		width:auto;
	}
}

/* ---------- Кошик ---------- */

/* Кнопка «Оновити кошик» лишається в розмітці: її натискає скрипт після
   зміни кількості. Показувати її нема потреби. */
body.woocommerce-cart .woocommerce-cart-form [name="update_cart"]{
	display:none !important;
}

/* Купон і кнопки винесені з таблиці в .cart-foot (шаблон теми):
   купон ліворуч, «Продовжити покупки» і «Перейти до оформлення» праворуч. */
body.woocommerce-cart .woocommerce-cart-form .cart-foot{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	margin-top:1.5rem;
}
body.woocommerce-cart .woocommerce-cart-form .cart-foot .actions{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
	gap:.75rem;
	margin-left:auto;
}
body.woocommerce-cart .woocommerce-cart-form .cart-foot .woo-actions-inner{
	display:flex;
	align-items:center;
	gap:.75rem;
	margin:0;
}
/* без купонів ліва колонка порожня — хай не забирає місце */
body.woocommerce-cart .woocommerce-cart-form .cart-foot .cart-coupon:empty{
	display:none;
}


/* Поки сторінка перезавантажується після зміни кількості — глушимо таблицю,
   щоб не тиснули двічі. */
body.woocommerce-cart .woocommerce-cart-form.osl-cart--busy{
	opacity:.55;
	pointer-events:none;
	transition:opacity .15s ease;
}

/* ---------- Обране в шапці ---------- */

/* Іконка живе всередині віджета кошика (див. mu-plugin oselia-wishlist.php),
   тож вирівнюємо їх в один ряд. */
.top_panel .elementor-widget-trx_sc_layouts_cart > .elementor-widget-container,
.top_panel .sc_layouts_item.elementor-widget-trx_sc_layouts_cart{
	display:flex;
	align-items:center;
	gap:.9em;
}
.osl-wish{
	position:relative;
	display:inline-flex;
	align-items:center;
	line-height:1;
	text-decoration:none;
	color:inherit;
}
.osl-wish__icon{ font-size:1.15em; }
/* лічильник — як у кошика: кружечок акцентом на кутику іконки */
.osl-wish__count{
	position:absolute;
	top:-.55em;
	right:-.7em;
	min-width:1.5em;
	height:1.5em;
	padding:0 .3em;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	border-radius:50%;
	background:var(--theme-color-text_link,#D14119);
	color:#fff;
	font-size:10px;
	font-weight:700;
	line-height:1;
}
.osl-wish__count--empty{ display:none; }

/* На телефоні в шапці й так тісно: зайві 14px розриву перекидали рядок
   з іконками під логотип. Тиснемо проміжок і саму іконку. */
@media (max-width:767px){
	.top_panel .elementor-widget-trx_sc_layouts_cart > .elementor-widget-container,
	.top_panel .sc_layouts_item.elementor-widget-trx_sc_layouts_cart{
		gap:.5em;
	}
	.osl-wish__icon{ font-size:1em; }
	/* Мобільний рядок шапки — окрема секція 50/50: ліворуч лого, праворуч
	   мова, кошик, обране, пошук і бургер у колонці ~187px. Тема дає кожній
	   іконці по 19px відступу, і з третьою іконкою рядок перекидався під
	   логотип. Важливість потрібна: Elementor пише відступи пер-елементним
	   правилом виду .elementor-4614 .elementor-element-XXXX. */
	.top_panel .sc_layouts_row .sc_layouts_item.elementor-widget-trx_sc_layouts_cart,
	.top_panel .sc_layouts_row .sc_layouts_item.elementor-widget-trx_sc_layouts_search,
	.top_panel .sc_layouts_row .sc_layouts_item.elementor-widget-trx_sc_layouts_menu{
		margin-left:9px !important;
	}
}

/* Сторінка обраного — та сама сітка, що й у каталозі, але на чотири в ряд. */
.osl-wish-grid ul.products{
	display:grid !important;
	grid-template-columns:repeat(4,minmax(0,1fr));
	column-gap:clamp(1.1rem,2vw,1.8rem);
	row-gap:clamp(2.5rem,4vw,4rem);
	width:100% !important; margin:0 !important; padding:0 !important;
	list-style:none !important;
}
.osl-wish-grid ul.products::before,
.osl-wish-grid ul.products::after{ content:none !important; display:none !important; }
.osl-wish-grid ul.products > li.product{
	width:auto !important; max-width:none !important; min-width:0 !important;
	margin:0 !important; padding:0 !important; float:none !important; clear:none !important;
}
@media(max-width:1024px){
	.osl-wish-grid ul.products{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:767px){
	.osl-wish-grid ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- Футер притиснутий до низу на коротких сторінках ----------
 * .page_wrap — прямий батько шапки, .page_content_wrap і футера; мобільне
 * меню й оверлей у ньому position:fixed і в потоці не беруть участі.
 * Колонкою на всю висоту вікна: вміст забирає вільне місце, футер
 * опиняється внизу. Адмінбар віднімаємо, інакше з'являється прокрутка. */
body .page_wrap{
	display:flex;
	flex-direction:column;
	min-height:calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height:calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}
body .page_wrap > .page_content_wrap{ flex:1 0 auto; }
body .page_wrap > .footer_wrap{ flex-shrink:0; }

/* Порожнє обране */
.osl-wish-empty{ text-align:center; padding:clamp(2rem,6vw,4rem) 0; }
.osl-wish-empty p{ margin:0 0 1.5rem; font-size:1.1em; }

/* ---------- Мобільне меню: максимум два рівні ----------
 * У меню 82 пункти в три рівні — на телефоні це нескінченний список.
 * Третій рівень ховаємо разом зі стрілкою розкриття в батьківського пункта,
 * інакше лишається кнопка, яка нічого не відкриває. Десктопне меню не чіпаємо:
 * там третій рівень випадає збоку й місця не займає.
 */
.menu_mobile .sub-menu .sub-menu{ display:none !important; }
.menu_mobile .sub-menu > .menu-item-has-children > a .open_child_menu{ display:none !important; }