/* =========================================================
   FLORIENS — МОБІЛЬНА ВЕРСІЯ (усі сторінки)
   Активується на екранах ≤768px.
   ========================================================= */

@media (max-width: 768px) {

/* ---------- БАЗОВЕ ---------- */
/* Захист від горизонтальної прокрутки: якщо будь-який елемент десь
   на сторінці "пробиває" ширину екрана (плагін, віджет, довгий текст
   без переносу), він просто обрізається, а не розтягує всю сторінку.
   Це не лікує причину, але гарантовано прибирає видимий симптом —
   горизонтальний скрол і обрізані краї карток. */
html,body{overflow-x:clip;max-width:100vw}
.floriens-main,.fco-accordion,.fco-step,.woocommerce-checkout form.checkout{
  max-width:100%;box-sizing:border-box}

/* Місце під нижнє меню + safe-area для iPhone (вирізана нижня зона) */
body{padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px))}
.fl-container{padding-left:12px;padding-right:12px}

/* ---------- SEO BAR ---------- */
.floriens-seo-bar{display:none}

/* ---------- ШАПКА ---------- */
.floriens-header{padding:8px 0}
.floriens-header .fl-container{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px}

/* Бургер зліва */
.fl-burger{display:flex!important;align-items:center;justify-content:center;
  width:40px;height:40px;flex-shrink:0;background:none;border:none;cursor:pointer;padding:0}
.fl-burger span{position:relative;width:22px;height:2px;background:#2E7D32;border-radius:2px;
  transition:background .2s}
.fl-burger span::before,.fl-burger span::after{content:"";position:absolute;left:0;
  width:22px;height:2px;background:#2E7D32;border-radius:2px;transition:transform .25s}
.fl-burger span::before{top:-7px}
.fl-burger span::after{top:7px}
body.fl-menu-open .fl-burger span{background:transparent}
body.fl-menu-open .fl-burger span::before{transform:translateY(7px) rotate(45deg)}
body.fl-menu-open .fl-burger span::after{transform:translateY(-7px) rotate(-45deg)}

/* Лого по центру-зліва */
.floriens-logo-box{flex:0 0 auto;order:1}
.fl-burger{order:0}
.floriens-logo-box span{font-size:20px}

/* Іконки праворуч */
/* .floriens-header-right — обгортка (в header.php) навколо: статус,
   телефон/месенджери, вибір міста і кошика. display:contents
   "розчиняє" обгортку, щоб діти стали прямими flex-елементами .fl-container.
   У верхньому рядку показуємо телефон і кошик компактними іконками —
   заповнюємо порожнє місце праворуч від лого. Статус ховаємо (він є
   у нижньому таб-барі). */
.floriens-header-right{display:contents}
.floriens-status-btn{display:none!important}

/* Телефон — проста іконка-кнопка у верхньому рядку (без тексту "Контакти") */
.phone-wrap{order:3;margin-left:auto;flex-shrink:0}
.floriens-contact-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  padding:0;background:#F1F8F1;border:none;border-radius:10px;color:#2E7D32;font-size:0;cursor:pointer}
.floriens-contact-btn svg{width:20px!important;height:20px!important}
/* На мобільному месенджер-дропдаун вирівнюємо праворуч, щоб не вилазив за екран */
.phone-dropdown{right:0;left:auto}

/* Кошик — компактна іконка у верхньому рядку */
.floriens-cart-btn{order:4;flex-shrink:0;position:relative;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;background:#2E7D32;border-radius:10px;color:#fff}
.floriens-cart-btn svg{width:20px!important;height:20px!important;stroke:#fff}
.floriens-cart-btn .cart-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
  padding:0 4px;background:#E63946;color:#fff;border-radius:9px;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
/* Ховаємо лічильник кошика якщо він порожній (0) — щоб не висіла зайва цятка.
   У header.php цифра завжди друкується, тож ховаємо через :empty не вийде;
   лишаємо як є — 0 показується, це нормально й зрозуміло. */

/* Пошук — окремим рядком під лого */
.floriens-search-wrap{order:8;flex:1 1 100%;width:100%;margin-top:6px}
/* Кнопку "Знайти" НЕ переозначуємо на мобільному — хай виглядає точно
   як на десктопі (зелена заливка + лупа + тінь зі style.css). Тільки
   трохи зменшуємо горизонтальний padding, щоб влізла на вузькому екрані. */
.floriens-search-wrap>button[type=submit]{padding:13px 18px!important;font-size:13px!important}

/* Місто — окремим рядком під лого (як пошук), на всю ширину.
   Так довгі назви ("Кам'янець-Подільський") не обрізаються посеред
   слова: місту вистачає місця в один рядок, а бургер+лого лишаються
   у верхньому рядку без тісноти. */
.floriens-city-box{order:7;flex:1 1 100%;width:100%;max-width:100%;margin-top:6px;
  padding:6px 10px;background:#F1F8F1;border-radius:8px}
.fc-trigger{width:100%;justify-content:flex-start}
.fc-trigger-text{min-width:0;flex:1}
.fc-trigger-city{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.fc-trigger-region{font-size:11px}
.floriens-delivery-inline{display:none} /* ховаємо текст доставки, лишаємо тільки місто */
.floriens-city-divider{display:none}

/* ---------- БУРГЕР-МЕНЮ (виїжджає зліва) ---------- */
.fl-mobile-menu{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:320px;z-index:1000;
  background:#fff;box-shadow:2px 0 20px rgba(0,0,0,.15);
  transform:translateX(-100%);transition:transform .28s ease;overflow-y:auto;
  display:flex;flex-direction:column}
body.fl-menu-open .fl-mobile-menu{transform:translateX(0)}
.fl-mobile-overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transition:opacity .28s}
body.fl-menu-open .fl-mobile-overlay{opacity:1;visibility:visible}

.fl-mm-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px;background:#2E7D32;color:#fff}
.fl-mm-head span{font-size:18px;font-weight:700;letter-spacing:1px}
.fl-mm-close{background:none;border:none;color:#fff;font-size:26px;cursor:pointer;
  line-height:1;padding:0;width:30px;height:30px}
.fl-mm-body{padding:8px 0;flex:1}
.fl-mm-body a{display:flex;align-items:center;gap:10px;padding:13px 18px;
  color:#1a1a1a;text-decoration:none;font-size:15px;border-bottom:1px solid #f4f4f4}
.fl-mm-body a:active{background:#f4f9f4}
.fl-mm-body a.fl-mm-featured{color:#E63946;font-weight:600}
.fl-mm-section{padding:12px 18px 6px;font-size:11px;font-weight:700;color:#999;
  text-transform:uppercase;letter-spacing:.5px}
.fl-mm-foot{padding:16px 18px;border-top:1px solid #eee;background:#fafafa}
.fl-mm-foot a{display:block;padding:6px 0;color:#2E7D32;font-size:14px;text-decoration:none}

/* Місто-кнопка у меню Ще (відкриває існуючий city-picker) */
.fl-mm-city{display:flex;align-items:center;gap:10px;width:100%;padding:14px 18px;
  background:#F1F8F1;border:none;border-bottom:1px solid #f4f4f4;cursor:pointer;
  font-family:inherit;text-align:left}
.fl-mm-city-dot{width:8px;height:8px;border-radius:50%;background:#2E7D32;flex-shrink:0}
.fl-mm-city-text{display:flex;flex-direction:column;flex:1;min-width:0}
.fl-mm-city-name{font-size:15px;font-weight:600;color:#1a1a1a;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-mm-city-change{font-size:12px;color:#2E7D32}
.fl-mm-city svg{color:#999;flex-shrink:0}

/* Розділювачі в меню Ще */
.fl-mm-divider{height:8px;background:#f7f7f5;border-top:1px solid #f0f0ec;border-bottom:1px solid #f0f0ec;margin:4px 0}

/* Блок "Зв'язатися з нами" */
.fl-mm-foot-title{font-size:11px;font-weight:700;color:#999;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:10px}
.fl-mm-contact{font-weight:600!important}
.fl-mm-messengers{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.fl-mm-msg{display:flex!important;align-items:center;justify-content:center;
  padding:10px 8px!important;border-radius:8px;font-size:13px;font-weight:600;
  color:#fff!important;text-align:center}
.fl-mm-msg.tg{background:#0088cc}
.fl-mm-msg.wa{background:#25D366}
.fl-mm-msg.vb{background:#7360F2}
.fl-mm-msg.sg{background:#3A76F0}

/* ---------- НИЖНЄ МЕНЮ (таб-бар) ---------- */
.fl-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:900;
  display:flex;background:#fff;border-top:1px solid #e8e8e8;
  box-shadow:0 -2px 12px rgba(0,0,0,.06);height:60px;
  padding-bottom:env(safe-area-inset-bottom, 0px)}
.fl-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:#888;text-decoration:none;font-size:10px;
  position:relative;transition:color .15s}
.fl-bottom-nav a.is-active,.fl-bottom-nav a:active{color:#2E7D32}
.fl-bottom-nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.fl-bottom-nav .fl-bn-badge{position:absolute;top:6px;right:calc(50% - 20px);
  min-width:16px;height:16px;padding:0 4px;background:#E63946;color:#fff;
  border-radius:10px;font-size:10px;font-weight:700;display:flex;align-items:center;
  justify-content:center;line-height:1}

/* ---------- КАТАЛОГ / СІТКА ТОВАРІВ ---------- */
.floriens-layout{grid-template-columns:1fr!important}
.floriens-sidebar{display:none!important}
.floriens-main{padding:12px!important}

/* ---------- ВІТРИНА КАТЕГОРІЙ (сторінка /katalog/) ---------- */
.floriens-katalog-title{margin:4px 0 14px}

/* Велика виділена плитка "Квіти" (головний розділ) */
.floriens-cat-hero{position:relative;display:block;border-radius:14px;overflow:hidden;
  margin-bottom:18px;min-height:150px;background:#2E7D32}
.floriens-cat-hero img{width:100%;height:150px;object-fit:cover;display:block}
.fch-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.fch-text{position:absolute;left:16px;bottom:14px;right:16px;display:flex;flex-direction:column;gap:2px}
.fch-name{color:#fff;font-size:24px;font-weight:700;line-height:1.1}
.fch-sub{color:rgba(255,255,255,.9);font-size:13px}

/* Заголовки секцій рівня 2 */
.fl-kat-section-title{font-size:13px;font-weight:700;color:#888;text-transform:uppercase;
  letter-spacing:.5px;margin:18px 0 10px}

/* Шапка рівня 2: назад + заголовок */
.fl-kat-head{margin-bottom:8px}
.fl-kat-back{display:inline-block;color:#2E7D32;font-size:14px;text-decoration:none;margin-bottom:4px}
.fl-kat-head .floriens-katalog-title{margin:0}

/* Посилання "Усі квіти" */
.fl-kat-all{display:block;text-align:center;margin:16px 0 4px;padding:12px;
  border:1px solid #2E7D32;border-radius:10px;color:#2E7D32;font-weight:600;
  font-size:14px;text-decoration:none}

.floriens-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.floriens-cat-tile{display:flex;flex-direction:column;background:#fff;border:1px solid #e8e8e8;
  border-radius:12px;overflow:hidden;text-decoration:none;color:#1a1a1a}
.floriens-cat-tile:active{background:#f4f9f4}
.fct-image{aspect-ratio:1/1;background:#f4f4f2;overflow:hidden}
.fct-image img{width:100%;height:100%;object-fit:cover;display:block}
.fct-image-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px}
.fct-body{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px}
.fct-name{font-size:14px;font-weight:600;line-height:1.3}
.fct-count{flex-shrink:0;min-width:22px;height:22px;padding:0 6px;background:#F1F8F1;color:#2E7D32;
  border-radius:11px;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}

.woocommerce .products,.floriens-products-grid{grid-template-columns:repeat(2,1fr)!important;
  gap:10px!important}
.floriens-home-wide .floriens-products-grid{grid-template-columns:repeat(2,1fr)!important}
body .floriens-home-wide{width:100vw!important;max-width:100vw!important;margin-left:0!important;margin-right:0!important;left:0!important;position:relative!important;overflow:hidden!important}
.floriens-layout{grid-template-columns:1fr!important;max-width:100vw!important;overflow-x:hidden!important}

/* Ціна не обрізається в картці */
.floriens-product-card .product-price,
.fhs-card .product-price{white-space:nowrap;overflow:visible!important;text-overflow:unset!important}
.floriens-page-title{font-size:20px}
.floriens-page-header{flex-direction:column;align-items:flex-start;gap:8px}

/* Картинки товарів вписуємо в картку — щоб не вилазили за межі */
.woocommerce ul.products li.product{overflow:hidden}
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img{width:100%!important;height:auto!important;
  max-width:100%!important;object-fit:cover;display:block;aspect-ratio:1/1;
  border-radius:8px}

/* Картка товару компактніше */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13px!important}
.woocommerce ul.products li.product .price{font-size:14px!important}
.floriens-buy-btn{padding:8px 14px!important;font-size:12px!important;width:100%}

/* Плашки НП / Акція / Розпродаж в межах картки */
.woocommerce ul.products li.product .floriens-np-tag{max-width:calc(100% - 12px);font-size:9px!important}
.woocommerce span.onsale{font-size:11px!important;padding:3px 8px!important}

/* ---------- ХЛІБНІ КРИХТИ ---------- */
.woocommerce-breadcrumb{font-size:11px!important;overflow-x:auto;white-space:nowrap;
  -webkit-overflow-scrolling:touch;padding-bottom:4px}

/* ---------- СТОРІНКА ТОВАРУ ---------- */
.woocommerce div.product{display:block!important}
.woocommerce div.product .images,
.woocommerce div.product .woocommerce-product-gallery{width:100%!important;margin-bottom:16px}
.woocommerce div.product .summary,
.woocommerce div.product div.summary{width:100%!important;margin:0!important;float:none!important}
.woocommerce div.product .product_title{font-size:22px!important}
.single-product .floriens-price-box,
.single-product .price{font-size:24px!important}
.woocommerce div.product form.cart .single_add_to_cart_button,
.single_add_to_cart_button{width:100%!important;padding:15px!important;font-size:16px!important}
/* Блок контактів на товарі */
.floriens-messenger-buttons,.floriens-contact-block{flex-wrap:wrap}

/* Схожі товари ("related") — 2 колонки замість 4, картинка не фіксованої висоти */
.woocommerce .related.products ul.products{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
.woocommerce .related.products ul.products li.product img{height:auto!important;aspect-ratio:1/1;object-fit:cover}

/* ---------- ОФОРМЛЕННЯ (checkout) ---------- */
.woocommerce-checkout form.checkout{grid-template-columns:1fr!important;gap:16px}
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading{grid-column:1!important;grid-row:auto!important;
  margin-top:0!important}
.woocommerce-checkout #order_review{position:static!important;margin-top:12px!important}
.fco-row-2{grid-template-columns:1fr!important}
.fco-step-head{padding:14px 15px!important;gap:10px}
.fco-step-body{padding:0 15px 15px!important}
.fco-next{width:100%!important;padding:14px!important}
/* Підсумок вгору на мобільному — можна бачити суму */
.woocommerce-checkout #order_review_heading{order:-1}

/* Вибір способу зв'язку з отримувачем — рівна сітка 2×2 замість
   довільного переносу (на вузькому екрані 4 кнопки поспіль занадто тісні) */
.fco-messenger-opts{display:grid!important;grid-template-columns:1fr 1fr!important}
/* П.2 — «Звичайний дзвінок» та інші довгі назви не мають вилазити за кнопку:
   переносимо текст всередині кнопки й вирівнюємо по центру.
   body-префікс + @media підвищують специфічність, щоб перебити
   .fco-msg span{white-space:nowrap} зі style.css. */
@media (max-width:768px){
  body .fco-msg{
    justify-content:center!important;
    align-items:center!important;
    text-align:center!important;
    padding:10px 6px!important;
    font-size:12.5px!important;
    min-height:46px!important;
    box-sizing:border-box!important;
    white-space:normal!important;
  }
  body .fco-msg span{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
    line-height:1.2!important;
  }
}

/* Крок і поля — трохи компактніше на дуже вузьких екранах, кнопки
   мовно завжди легко натискаються пальцем (мінімум ~44px висоти) */
.fco-check,.fco-radio{padding:12px!important}
.floriens-checkout-fields input[type=text],
.floriens-checkout-fields input[type=tel],
.floriens-checkout-fields input[type=email],
.floriens-checkout-fields input[type=date],
.floriens-checkout-fields select,
.floriens-checkout-fields textarea,
.fco-city-select{padding:13px!important;font-size:16px!important} /* 16px — щоб iOS не зумив при фокусі */

/* П.4 — інпут пошуку міста має ЛІВИЙ відступ під лупу і ПРАВИЙ під хрестик.
   Загальне правило .floriens-checkout-fields input{padding:13px} перебиває це —
   повертаємо з підвищеною специфічністю (body + @media). */
@media (max-width:768px){
  body .fco-city-search .fco-city-search-input,
  body .floriens-checkout-fields .fco-city-search-input,
  body input.fco-city-search-input{
    padding-left:42px!important;
    padding-right:42px!important;
  }
  body .fco-city-search .fco-city-search-icon{
    left:14px!important;
    z-index:2!important;
  }
}

/* Підсумок замовлення — компактніші відступи, товар з фото не тісний */
.woocommerce-checkout #order_review{padding:13px!important}
.fco-item-img{width:44px!important;height:44px!important}

/* П.5 — рядок підсумків (Сума / Доставка / Разом): назва зліва, число справа,
   число не переноситься по цифрах. body + @media для перемоги над style.css. */
@media (max-width:768px){
  body.woocommerce-checkout #order_review table th,
  body.woocommerce-checkout #order_review table td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td{
    padding:8px 4px!important;
    vertical-align:middle!important;
  }
  body.woocommerce-checkout #order_review table td,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table td{
    text-align:right!important;
    white-space:nowrap!important;
    width:1%!important;
  }
  body.woocommerce-checkout #order_review table th,
  body.woocommerce-checkout .woocommerce-checkout-review-order-table th{
    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
  }
  body.woocommerce-checkout #order_review .order-total td,
  body.woocommerce-checkout #order_review .order-total .amount,
  body.woocommerce-checkout #order_review .order-total bdi,
  body.woocommerce-checkout .order-total .amount,
  body.woocommerce-checkout .order-total bdi{
    white-space:nowrap!important;
    font-size:18px!important;
    line-height:1.2!important;
    display:inline-block!important;
  }
}
/* Запасний селектор — якщо тема рендерить таблицю за класом, а не за id */
.woocommerce-checkout-review-order-table td{
  text-align:right!important;
  white-space:nowrap!important;
}
.woocommerce-checkout-review-order-table th{
  text-align:left!important;
}

/* Кнопка "Оформити замовлення" — крупна, легко натиснути пальцем */
.woocommerce-checkout #place_order{padding:16px!important;font-size:16px!important}

/* Телефон з прапором (intl-tel-input) — на вузькому екрані список
   країн має розкриватись СТРОГО в межах ширини екрана, інакше він
   "пробиває" сторінку вбік і з'являється горизонтальний скрол. */
#fco_phone_wrap .iti__country-list{
  width:100%!important;max-width:100%!important;left:0!important;right:0!important}
#fco_phone_wrap .iti__country-name{max-width:60vw}
#fco_phone_wrap .iti__tel-input{padding-left:70px!important;font-size:16px!important}
#fco_phone_wrap .iti__selected-country{padding:0 6px 0 10px!important;font-size:13px!important}

/* Поштовий блок Нової пошти — на вузькому екрані менше внутрішніх відступів */
.fco-np-block{padding:12px!important}

/* ---------- КОШИК ---------- */
.woocommerce-cart table.cart{display:block;overflow-x:hidden}
.woocommerce-cart .cart_totals{width:100%!important;float:none!important}

/* ---------- АКАУНТ ---------- */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{width:100%!important;float:none!important;
  margin-bottom:16px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:6px}
.woocommerce-account .woocommerce-MyAccount-navigation li{width:auto;border:none!important}
.woocommerce-account .woocommerce-MyAccount-navigation li a{padding:8px 12px;background:#f4f4f4;
  border-radius:8px;font-size:13px}

/* ---------- ГОЛОВНА ---------- */
.floriens-home-seo,.floriens-home-cities{padding:20px 14px!important}
.floriens-front-cats{grid-template-columns:1fr!important;gap:12px}
.front-cat-block{margin-bottom:8px}

/* Картки товарів на головній (front-page.php) — окремий шаблон від каталогу,
   тому дублюємо ту саму мобільну оптимізацію, що вже є для .woocommerce ul.products */
.product-image-wrap{height:auto!important;aspect-ratio:1/1;width:100%}
.product-image-wrap img{width:100%!important;height:100%!important;object-fit:cover}
/* Вирівнювання кнопок "Купити" в один ряд незалежно від довжини назви.
   Картка — flex-колонка, тіло розтягується, футер (ціна+кнопка) завжди
   притиснутий донизу. min-height під назву резервує місце під 2 рядки. */
.floriens-product-card{display:flex;flex-direction:column}
.floriens-product-card .product-body{display:flex;flex-direction:column;flex:1}
.floriens-product-card .product-name{font-size:13px!important;line-height:1.35;
  min-height:36px!important;margin-bottom:6px}
.floriens-product-card .product-price{font-size:14px!important}
.floriens-product-card .product-footer{margin-top:auto;flex-direction:column;align-items:stretch;gap:8px}
.floriens-product-card .add-to-cart-btn{width:100%;text-align:center;padding:8px 14px!important;font-size:12px!important}

/* ---------- ФУТЕР ---------- */
.floriens-footer .fl-container{flex-direction:column;gap:14px;text-align:center}
.floriens-footer-nav{flex-wrap:wrap;justify-content:center;gap:10px}

/* ---------- ОНЛАЙН-ЧАТ ---------- */
/* Піднімаємо кнопку чату над нижнім меню.
   Реальний клас кнопки з footer.php — .floriens-chat-float.
   Раніше тут був неправильний селектор (.floriens-online-chat), тому
   кнопка не піднімалась і перекривала пункт "Статус" у нижньому таб-барі. */
.floriens-chat-float{bottom:88px!important;right:16px!important}

/* ---------- ПРИБИРАЄМО ПЛАВАЮЧУ "ЗАМОВИТИ ДЗВІНОК" ----------
   Форма (#fl-cb-overlay) лишається — її тепер відкриває кнопка
   "Замовити дзвінок" з екрана "Зв'язатися з нами" в шапці.
   Ховаємо тільки саму плаваючу кнопку, щоб не було двох FAB. */
#fl-cb-fab{display:none!important}

/* ---------- ПОПАП "ОБЕРІТЬ СПОСІБ СПІЛКУВАННЯ" (мобільний) ---------- */
/* Перевизначаємо десктопний стиль: на мобільному — bottom-sheet
   на всю ширину з темним фоном, виїжджає знизу. */
.fl-chat-choice-overlay{
  position:fixed;
  inset:0;
  bottom:0;right:0;  /* повертаємо розтягування на весь екран */
  background:rgba(0,0,0,.45);
  justify-content:center;
  align-items:flex-end;
}
.fl-chat-choice-box{
  width:100%;
  max-width:100%;
  border-radius:16px 16px 0 0;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -8px 40px rgba(0,0,0,.2);
  border:none;
}
.fl-cc-title{font-size:16px;margin-bottom:14px}
.fl-cc-item{padding:13px 14px;margin-bottom:8px;border-radius:10px;font-size:15px}
.fl-cc-item svg{width:20px;height:20px}

/* ---------- ТЕЛЕФОННИЙ ЕКРАН "ЗВ'ЯЗАТИСЯ З НАМИ" ---------- */
/* Перемикання видимості: на мобільному — кнопки дзвінка, месенджери ховаємо
   (вони доступні у попапі "Онлайн-чат"). */
.pd-mobile-only{display:block!important}
.pd-desktop-only{display:none!important}
.pd-title{font-size:16px;font-weight:700;color:#1a1a1a;margin-bottom:12px}
.pd-call-btn{display:block;text-align:center;background:#2E7D32;color:#fff;
  padding:12px;border-radius:8px;font-size:15px;font-weight:600;text-decoration:none;margin-top:10px}
.pd-callback-btn{display:block;width:100%;text-align:center;background:#fff;color:#2E7D32;
  border:2px solid #2E7D32;padding:10px;border-radius:8px;font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;margin-top:8px}

}

/* ---------- ДУЖЕ ВУЗЬКІ (≤380px) ---------- */
@media (max-width: 380px){
/* город тепер на всю ширину — окреме обмеження не потрібне */
  .floriens-logo-box span{font-size:18px}
  .fl-bottom-nav a{font-size:9px}
}

/* ---------- ПОКАЗУЄМО МОБІЛЬНІ ЕЛЕМЕНТИ ТІЛЬКИ НА МОБІЛЬНОМУ ---------- */
.fl-burger,.fl-mobile-menu,.fl-mobile-overlay,.fl-bottom-nav{display:none}
@media (max-width:768px){
  .fl-mobile-menu,.fl-mobile-overlay{display:flex}
  .fl-bottom-nav{display:flex}
}

/* Блок MOBILE HEADER LANGUAGE/CURRENCY видалено як дублікат — стилі перенесено до блоку FINAL MOBILE HEADER LAYOUT нижче */

/* =========================================================
   FLORIENS — FIX CHECKOUT MOBILE WIDTH
   Причина: desktop-правило .woocommerce-checkout .floriens-main
   имеет большую специфичность и оставляло width:100% + padding,
   из-за чего карточки checkout становились шире экрана.
   ========================================================= */
@media (max-width: 768px){
  html, body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.woocommerce-checkout .floriens-main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body.woocommerce-checkout form.checkout,
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout .floriens-checkout-fields,
  body.woocommerce-checkout .fco-accordion,
  body.woocommerce-checkout .fco-step,
  body.woocommerce-checkout .fco-step-body,
  body.woocommerce-checkout .fco-row-2,
  body.woocommerce-checkout .form-row,
  body.woocommerce-checkout .woocommerce-input-wrapper{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body.woocommerce-checkout .fco-step{
    overflow:hidden!important;
  }

  body.woocommerce-checkout .floriens-checkout-fields input[type=text],
  body.woocommerce-checkout .floriens-checkout-fields input[type=tel],
  body.woocommerce-checkout .floriens-checkout-fields input[type=email],
  body.woocommerce-checkout .floriens-checkout-fields input[type=date],
  body.woocommerce-checkout .floriens-checkout-fields select,
  body.woocommerce-checkout .floriens-checkout-fields textarea,
  body.woocommerce-checkout .floriens-checkout-fields .fco-city-select{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body.woocommerce-checkout #fco_phone_wrap,
  body.woocommerce-checkout #fco_phone_wrap .iti{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}


/* =========================================================
   FLORIENS — FINAL CHECKOUT MOBILE WIDTH FIX
   ========================================================= */
@media (max-width:768px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}

  body.woocommerce-checkout .floriens-layout{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  body.woocommerce-checkout .floriens-main{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:12px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  body.woocommerce-checkout form.checkout,
  body.woocommerce-checkout form.checkout > *,
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout .floriens-checkout-fields,
  body.woocommerce-checkout .fco-accordion,
  body.woocommerce-checkout .fco-step,
  body.woocommerce-checkout .fco-step-head,
  body.woocommerce-checkout .fco-step-body,
  body.woocommerce-checkout .fco-row-2,
  body.woocommerce-checkout .form-row,
  body.woocommerce-checkout .woocommerce-input-wrapper{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  body.woocommerce-checkout form.checkout{
    display:block!important;
    margin:0!important;
    padding:0!important;
  }

  body.woocommerce-checkout .fco-step{
    margin-left:0!important;
    margin-right:0!important;
    overflow:hidden!important;
  }

  body.woocommerce-checkout .fco-step-body{
    padding-left:14px!important;
    padding-right:14px!important;
    overflow:hidden!important;
  }

  body.woocommerce-checkout input,
  body.woocommerce-checkout select,
  body.woocommerce-checkout textarea,
  body.woocommerce-checkout button{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body.woocommerce-checkout #fco_phone_wrap,
  body.woocommerce-checkout #fco_phone_wrap .iti,
  body.woocommerce-checkout #fco_phone_wrap input{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* =========================================================
   FLORIENS — FINAL MOBILE HEADER LAYOUT
   Один узгоджений блок для всіх мобільних.
   Верхній рядок: бургер + логотип + мова/валюта + телефон + кошик.
   Місто та пошук — окремими рядками.
   ========================================================= */
@media (max-width:768px){
  .floriens-header .fl-container{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    column-gap:6px!important;
    row-gap:0!important;
    box-sizing:border-box!important;
  }

  /* Бургер */
  .fl-burger{
    order:0!important;
    flex:0 0 32px!important;
    width:32px!important;
    min-width:32px!important;
    max-width:32px!important;
    margin:0!important;
  }

  /* Логотип — залишаємо погоджений розмір */
  .floriens-logo-box{
    order:1!important;
    flex:0 0 150px!important;
    width:150px!important;
    min-width:150px!important;
    max-width:150px!important;
    margin:0!important;
    overflow:hidden!important;
  }

  .floriens-logo-box span{
    display:block!important;
    font-size:18px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Мова / валюта */
  .floriens-mobile-settings{
    order:2!important;
    display:block!important;
    position:relative!important;
    flex:0 0 76px!important;
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
    height:40px!important;
    margin:0!important;
    z-index:10001!important;
  }

  .fl-mobile-settings-btn{
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
    height:40px!important;
    margin:0!important;
    padding:0 4px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    white-space:nowrap!important;
    /* Фірмовий стиль: суцільна зелена заливка з білим текстом (як логотип/кошик) */
    background:#2E7D32!important;
    border:0!important;
    border-radius:10px!important;
    color:#fff!important;
    font-weight:600!important;
    cursor:pointer!important;
  }

  .fl-mobile-settings-chevron{display:none!important}

  .fl-mobile-settings-current{
    display:block!important;
    width:auto!important;
    max-width:none!important;
    flex:0 0 auto!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    font-size:11px!important;
    color:#fff!important;
    font-weight:600!important;
  }

  /* П.1 — ВИПАДАЮЧИЙ СПИСОК мова/валюта.
     Раніше стилів не було: заголовки й кнопки вилазили за межі шапки.
     Робимо акуратну картку, прив'язану до кнопки, у межах екрана. */
  .fl-mobile-settings-dropdown{
    display:none!important;
    position:absolute!important;
    top:calc(100% + 6px)!important;
    right:0!important;
    left:auto!important;
    width:180px!important;
    max-width:calc(100vw - 24px)!important;
    padding:8px!important;
    margin:0!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border:1px solid #e0e0e0!important;
    border-radius:12px!important;
    box-shadow:0 8px 28px rgba(0,0,0,.18)!important;
    z-index:10002!important;
  }
  .floriens-mobile-settings.open .fl-mobile-settings-dropdown{
    display:block!important;
  }

  .fl-mobile-settings-title{
    display:block!important;
    padding:6px 8px 4px!important;
    margin:0!important;
    color:#999!important;
    font-size:10px!important;
    font-weight:700!important;
    text-transform:uppercase!important;
    letter-spacing:.5px!important;
    background:transparent!important;
  }
  .fl-mobile-settings-title-currency{
    margin-top:4px!important;
    border-top:1px solid #f0f0f0!important;
    padding-top:8px!important;
  }

  .fl-mobile-settings-options{
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    width:100%!important;
  }

  .fl-mobile-settings-option{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:40px!important;
    padding:9px 10px!important;
    margin:0!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#333!important;
    font-size:14px!important;
    font-weight:500!important;
    text-align:left!important;
    cursor:pointer!important;
  }
  .fl-mobile-settings-option.active{
    background:#E8F5E9!important;
    color:#2E7D32!important;
    font-weight:700!important;
  }
  .fl-mobile-settings-option span{
    white-space:nowrap!important;
  }

  /* Телефон */
  .phone-wrap{
    order:3!important;
    flex:0 0 28px!important;
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    margin:0!important;
  }

  .floriens-contact-btn{
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
    height:40px!important;
    margin:0!important;
    padding:0!important;
  }

  /* Корзина */
  .floriens-cart-btn{
    order:4!important;
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:40px!important;
    margin:0!important;
  }

  /*
     Город — примусово новий рядок.
     flex-shrink:0 + flex-basis:100% не дають йому
     стискатися і ставати праворуч від кошика.
  */
  .floriens-city-box{
    order:7!important;
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    margin-top:6px!important;
    box-sizing:border-box!important;
  }

  /* Пошук — наступний окремий рядок */
  .floriens-search-wrap{
    order:8!important;
    flex:0 0 100%!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }
}

/* На дуже вузьких екранах трохи зменшуємо тільки праву групу,
   щоб кошик гарантовано залишався у верхньому рядку iPhone 7. */
@media (max-width:380px){
  .floriens-header .fl-container{
    column-gap:5px!important;
    padding-left:12px!important;
    padding-right:6px!important;
  }

  .floriens-mobile-settings{
    flex-basis:72px!important;
    width:72px!important;
    min-width:72px!important;
    max-width:72px!important;
  }

  .fl-mobile-settings-btn{
    width:72px!important;
    min-width:72px!important;
    max-width:72px!important;
  }

  .phone-wrap{
    flex-basis:28px!important;
    width:28px!important;
    min-width:28px!important;
    max-width:28px!important;
  }

  .floriens-cart-btn{
    flex-basis:38px!important;
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
  }

  .floriens-city-box{
    flex-basis:100%!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
  }

  .floriens-search-wrap{
    flex-basis:100%!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
  }
}

/* =========================================================
   FLORIENS — ПК: ховаємо мобільний перемикач мови/валюти
   На десктопі використовується верхня панель SEO з перемикачами.
   Мобільну версію не змінюємо.
   ========================================================= */
@media (min-width:769px){
  .floriens-mobile-settings{display:none!important;}
}

/* =========================================================
   FLORIENS — БЛОК УМОВ ДОСТАВКИ на сторінці товару
   (single-product-mobile.php → .floriens-sp-delivery)
   Стилів раніше не було взагалі — тому SVG-іконки роздувались
   на всю ширину і на ПК, і на мобілі. Тут задаємо акуратний
   вигляд: рядок = маленька іконка + текст + бейдж ціни.
   Працює на всіх пристроях (поза @media).
   ========================================================= */
.floriens-sp-delivery{
    margin:14px 0;
    border:1px solid #e6e6e6;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}
.floriens-sp-delivery-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid #f0f0f0;
}
.floriens-sp-delivery-row:last-child{
    border-bottom:0;
}
/* Головне: фіксуємо розмір іконки, щоб SVG не роздувався */
.floriens-sp-del-icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#F1F8F2;
    color:#2E7D32;
}
.floriens-sp-del-icon svg{
    width:22px;
    height:22px;
    display:block;
}
.floriens-sp-del-text{
    flex:1 1 auto;
    min-width:0;
}
.floriens-sp-del-title{
    font-size:14px;
    font-weight:600;
    color:#222;
    line-height:1.25;
}
.floriens-sp-del-desc{
    font-size:12px;
    color:#8a8a8a;
    line-height:1.3;
    margin-top:2px;
}
.floriens-sp-del-badge{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:13px;
    font-weight:700;
    color:#2E7D32;
    background:#E8F5E9;
    padding:5px 10px;
    border-radius:8px;
}
.floriens-sp-del-badge.red{
    color:#C62828;
    background:#FDECEA;
}

/* ==========================================================
   ГОЛОВНА — СЕКЦІЯ "ХІТИ ПРОДАЖІВ" (featured)
   Кольорова обгортка + горизонтальний свайп карток.
   Готова структура під майбутню секцію "Знижки" (sale) —
   переиспользовуватиме ті ж класи + модифікатор --sale.
   ========================================================== */
@media (max-width:768px){

/* --- Обгортка секції --- */
.fhs-featured{
  position:relative;
  margin-top:14px!important;
  margin-bottom:22px!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:0!important;
  padding:16px 0 18px;
  border-radius:0;
  overflow:visible;
  width:100vw!important;
}
.fhs-featured--hit{
  background:linear-gradient(180deg,#E8F5E9 0%,#F1F8E9 100%);
}
.fhs-featured--sale{
  background:linear-gradient(180deg,#FDEDEB 0%,#FEF5F4 100%);
}

/* --- Шапка секції: іконка + заголовок + підзаголовок + кнопка "Дивитися всі" --- */
.fhs-featured .fhs-header{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;
  padding:0 14px;
  margin-bottom:12px;
}
.fhs-featured .fhs-heading{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  width:100%;
}
.fhs-featured .fhs-icon-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  flex-shrink:0;
}
.fhs-featured--hit .fhs-icon-badge{
  background:#FFC107;color:#fff;
}
.fhs-featured--sale .fhs-icon-badge{
  background:#E53935;color:#fff;
}
.fhs-featured .fhs-icon-svg{
  width:18px;height:18px;display:block;
}
.fhs-featured .fhs-title{
  font-size:20px!important;font-weight:700;margin:0;
  color:#1B5E20;
  line-height:1.2;
}
.fhs-featured--sale .fhs-title{
  color:#8B1E1E;
}
.fhs-featured .fhs-subtitle{
  width:100%;
  font-size:12px;color:#666;font-weight:400;
  margin-top:-2px;
  line-height:1.3;
}

/* Кнопка "Дивитися всі" — пігулка */
.fhs-featured .fhs-more-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;
  color:#2E7D32;
  padding:8px 14px;
  border-radius:20px;
  font-size:13px;font-weight:600;
  text-decoration:none;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  align-self:flex-start;
  margin-top:4px;
}
.fhs-featured--sale .fhs-more-pill{color:#C62828}
.fhs-featured .fhs-more-pill .fhs-arrow-svg{
  width:14px;height:14px;
}

/* --- Горизонтальний свайп карток --- */
.fhs-featured .fhs-grid--scroll{
  display:flex!important;
  grid-template-columns:none!important;
  gap:12px!important;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:none!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  padding:2px 12px 4px;
  margin:0;
  scrollbar-width:none;
}
.fhs-featured .fhs-grid--scroll::-webkit-scrollbar{display:none}

/* Картка: 2 в кадрі + натяк на третю */
.fhs-featured .fhs-card{
  flex:0 0 46vw!important;
  max-width:220px!important;
  min-width:150px!important;
  scroll-snap-align:none;
  background:#fff;
  border:none;
  border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
  overflow:hidden;
}

/* Фото картки */
.fhs-featured .fhs-card .product-image-wrap{
  aspect-ratio:1/1;
  border-bottom:none;
  background:#fafafa;
}

/* Бейдж "ХІТ 🔥" — червона пігулка з іконкою вогника */
.fhs-featured .fhs-badge-hit{
  top:8px!important;left:8px!important;
  background:#E53935!important;color:#fff!important;
  padding:4px 8px!important;
  border-radius:6px!important;
  font-size:11px!important;font-weight:700!important;
  display:inline-flex!important;align-items:center;gap:3px;
  letter-spacing:0.3px;
}
.fhs-featured .fhs-badge-hit::after{content:'🔥';display:inline-block;width:13px;height:13px;overflow:hidden;font-size:11px;line-height:1;vertical-align:middle;margin-left:2px}

/* Бейдж знижки "-20%" — для майбутньої секції sale */
.fhs-featured .fhs-badge-sale{
  top:8px!important;left:8px!important;
  background:#E53935!important;color:#fff!important;
  padding:4px 9px!important;
  border-radius:6px!important;
  font-size:12px!important;font-weight:700!important;
}

/* Тіло картки */
.fhs-featured .fhs-card .product-body{
  padding:10px 12px 12px!important;
}
.fhs-featured .fhs-card .product-name{
  font-size:12px!important;
  min-height:32px!important;
  margin-bottom:6px!important;
  color:#1a1a1a;
  font-weight:500;
}
.fhs-featured .fhs-card .product-name a{color:#1a1a1a}

/* Футер картки: ціна зверху, кнопка знизу */
.fhs-featured .fhs-card .product-footer{
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  gap:6px!important;
  margin-top:auto;
}
.fhs-featured .fhs-card .product-price{
  font-size:12px!important;
  font-weight:700;
  color:#1B5E20;
  white-space:nowrap;
}
.fhs-featured .fhs-card .fhs-buy-btn{
  width:100%!important;
  padding:7px 10px!important;
  font-size:11px!important;
  display:inline-flex!important;
  align-items:center;gap:4px;
  border-radius:6px!important;
  line-height:1;
  white-space:nowrap;
  justify-content:center!important;
}
.fhs-featured .fhs-card .fhs-buy-btn .fhs-cart-svg{
  width:12px;height:12px;flex-shrink:0;
}

} /* /@media 768 */

/* --- Декоративні іскорки: адаптація мобільна --- */
@media (max-width:768px){
/* Верхня/нижня смуги — тонші */
.fhs-featured::before{
  top:48px;height:18px;
}
.fhs-featured::after{
  height:16px;
}
/* Бічні смуги — ховаємо (на мобільній між padding і картками немає місця) */
.fhs-featured .fhs-grid::before,
.fhs-featured .fhs-grid::after{
  display:none;
}
}