/* Спливаюче вікно кошика (#shoppingCart) - у стилі сторінок «Кошик» і «Оформлення замовлення».
   Підключається на всіх сторінках через app/partials/fonts_head.php (без блокування показу:
   вікно приховане, доки його не відкрили). Розмітка товару, шкала доставки, лічильник - js/main.js. */

/* Шухляда праворуч. На телефоні - теж шухляда (як на ПК), а не на весь екран:
   ліворуч лишається смужка затемненої сторінки, торкнувшись якої вікно закривається. */
.modal-shopping-cart .modal-content{max-width:420px !important;width:100%;background:#fff}
/* заокруглений край з боку, звідки виїжджає, - як у мобільного меню (там - праворуч) */
.modal.fullRight.modal-shopping-cart .modal-dialog .modal-content{border-radius:22px 0 0 22px;box-shadow:-16px 0 40px rgba(24,24,24,.14)}
@media (max-width:575px){ .modal-shopping-cart .modal-content{max-width:calc(100% - 44px) !important} }

/* Шапка: «Кошик» + кількість */
.modal-shopping-cart .header{padding:22px 24px 14px;border-bottom:1px solid rgba(24,24,24,.08)}
.modal-shopping-cart .header .title{display:flex;align-items:center;gap:10px;margin:0;font-size:22px;line-height:30px;font-weight:500;color:#181818}
.modal-shopping-cart .mc-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:#181818;color:#fff;font-family:var(--ff-body);font-size:12px;font-weight:600;line-height:1}
.modal-shopping-cart .mc-count[hidden]{display:none}
.modal-shopping-cart .header .icon-close-popup{width:38px;height:38px;font-size:13px;color:#181818;background:#faf8f4;border:1px solid rgba(24,24,24,.08);transition:background .15s,border-color .15s}
@media (hover:hover) and (pointer:fine){ .modal-shopping-cart .header .icon-close-popup:hover{background:#fff;border-color:rgba(24,24,24,.25)} }

/* Один прокручуваний блок: товари, а одразу під ними «Разом» і кнопки.
   Якщо товарів багато - нижній блок «прилипає» до низу вікна (кнопку оформлення видно завжди). */
.modal-shopping-cart .wrap{min-height:0;overflow:hidden}
.modal-shopping-cart .tf-mini-cart-wrap{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.modal-shopping-cart .tf-mini-cart-wrap .tf-mini-cart-main{flex:none}
.modal-shopping-cart .tf-mini-cart-wrap .tf-mini-cart-main .tf-mini-cart-sroll{position:static;overflow:visible}
.modal-shopping-cart .tf-mini-cart-wrap .tf-mini-cart-bottom{position:sticky;bottom:0;z-index:2;background:#fff;box-shadow:0 -12px 24px -20px rgba(24,24,24,.35);border-top:1px solid rgba(24,24,24,.08)}

/* Шкала безкоштовної доставки */
.modal-shopping-cart .mc-ship{margin:16px 24px 4px;padding:12px 14px 14px;border-radius:14px;background:#faf8f4;border:1px solid rgba(24,24,24,.06)}
.modal-shopping-cart .mc-ship[hidden]{display:none}
.modal-shopping-cart .mc-ship__text{font-size:13px;line-height:1.4;color:#6f6a61}
.modal-shopping-cart .mc-ship__text b{color:#181818;font-weight:600;white-space:nowrap}
.modal-shopping-cart .mc-ship__track{height:4px;margin-top:10px;border-radius:2px;background:rgba(24,24,24,.08);overflow:hidden}
.modal-shopping-cart .mc-ship__track span{display:block;height:100%;border-radius:2px;background:#181818;transition:width .5s ease}
.modal-shopping-cart .mc-ship.is-done .mc-ship__text{display:flex;align-items:center;gap:8px;color:#181818;font-weight:600}
.modal-shopping-cart .mc-ship.is-done .mc-ship__text::before{content:"";width:6px;height:11px;margin:0 3px 3px 2px;border-right:2px solid #181818;border-bottom:2px solid #181818;transform:rotate(45deg)}

/* Товар: фото | назва + ✕, під нею ціна, внизу - кількість або «Єдиний екземпляр» */
.modal-shopping-cart .tf-mini-cart-item{margin:0 24px;padding:18px 0;gap:16px;align-items:stretch;border-bottom:1px solid rgba(24,24,24,.08);transition:opacity .2s}
.modal-shopping-cart .tf-mini-cart-item:last-child{border-bottom:0}
.modal-shopping-cart .tf-mini-cart-item[data-loading="1"]{opacity:.45;pointer-events:none}
.modal-shopping-cart .tf-mini-cart-item .tf-mini-cart-image{display:block;width:76px;height:96px;flex:0 0 76px;border-radius:12px;overflow:hidden;background:#faf8f4}
.modal-shopping-cart .tf-mini-cart-item .tf-mini-cart-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
@media (hover:hover){ .modal-shopping-cart .tf-mini-cart-item .tf-mini-cart-image:hover img{transform:scale(1.04)} }
.modal-shopping-cart .tf-mini-cart-info{min-width:0;display:flex;flex-direction:column;gap:4px}
.modal-shopping-cart .mc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-shopping-cart .mc-title{font-size:15px;line-height:1.35;color:#181818;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.modal-shopping-cart .tf-mini-cart-item .mc-remove{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -4px 0 0;padding:0;border-radius:50%;border:0;background:transparent;color:#8a857c;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
@media (hover:hover) and (pointer:fine){ .modal-shopping-cart .tf-mini-cart-item .mc-remove:hover{background:#faf8f4;color:#181818} }
.modal-shopping-cart .mc-price{font-size:15px;line-height:22px;font-weight:600;color:#181818}
.modal-shopping-cart .mc-unit{margin-left:6px;font-size:12px;font-weight:400;color:#6f6a61}
.modal-shopping-cart .mc-unique,
.modal-shopping-cart .mc-qty{margin-top:auto;align-self:flex-start}
.modal-shopping-cart .mc-unique{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:#faf8f4;border:1px solid rgba(24,24,24,.08);font-size:12px;color:#6f6a61}
.modal-shopping-cart .mc-unique::before{content:"";width:5px;height:5px;border-radius:50%;background:#c9a86a}
.modal-shopping-cart .mc-qty{display:inline-flex;align-items:center;justify-content:center;gap:2px;height:34px;padding:0 3px;border-radius:999px;background:#faf8f4;border:1px solid rgba(24,24,24,.1)}
/* − і + рівно по центру своїх кружечків (тема додає кнопкам відступи й вирівнювання тексту) */
.modal-shopping-cart .mc-qty button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;min-width:0;margin:0;padding:0 !important;border:0;border-radius:50%;background:none;color:#181818;font-family:var(--ff-body);font-size:17px;font-weight:400;line-height:1;text-align:center;letter-spacing:0;text-indent:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s}
@media (hover:hover) and (pointer:fine){ .modal-shopping-cart .mc-qty button:hover:not(:disabled){background:#fff} }
.modal-shopping-cart .mc-qty button:disabled{opacity:.3;cursor:default}
.modal-shopping-cart .mc-qty input{flex:0 0 28px;width:28px;height:28px;margin:0;padding:0 !important;border:0;background:transparent;text-align:center;font-size:16px;line-height:28px;color:#181818;-moz-appearance:textfield}
.modal-shopping-cart .mc-qty input::-webkit-outer-spin-button,
.modal-shopping-cart .mc-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Порожній кошик */
.modal-shopping-cart .mc-empty{padding:48px 24px;text-align:center;color:#6f6a61}
.modal-shopping-cart .mc-empty p{margin:0 0 16px;font-size:15px}
.modal-shopping-cart .mc-empty__link{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border-radius:999px;background:#181818;color:#fff;font-size:14px;font-weight:600;text-decoration:none}
@media (hover:hover) and (pointer:fine){ .modal-shopping-cart .mc-empty__link:hover{background:#3d3933;color:#fff} } /* як основні кнопки сайту */
.modal-shopping-cart .tf-mini-cart-wrap.is-empty .tf-mini-cart-bottom{display:none}

/* «Разом» і кнопки - одна під одною на всю ширину, головна дія перша */
.modal-shopping-cart .tf-mini-cart-bottom-wrap{padding:16px 24px 18px}
.modal-shopping-cart .tf-cart-totals-discounts{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px}
.modal-shopping-cart .tf-cart-totals-discounts h2{font-size:16px !important;line-height:24px !important;font-weight:500;color:#181818}
.modal-shopping-cart .tf-totals-total-value{font-size:20px;line-height:28px;font-weight:600;color:#181818}
.modal-shopping-cart .tf-mini-cart-bottom-wrap .tf-mini-cart-view-checkout{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}
.modal-shopping-cart .tf-mini-cart-bottom-wrap .tf-mini-cart-view-checkout .tf-btn{height:50px;padding:0 16px;border-radius:999px !important;font-size:15px;line-height:1.2;text-transform:none;white-space:nowrap}
.modal-shopping-cart .tf-mini-cart-bottom-wrap .tf-mini-cart-view-checkout .btn-fill{order:-1}
/* кольори кнопок (чорна «Оформити», біла «Переглянути кошик») - спільна система кнопок у app/partials/fonts_head.php */
.modal-shopping-cart .text-btn-uppercase{font-size:12px;letter-spacing:.12em;color:#6f6a61}
@media (hover:hover) and (pointer:fine){ .modal-shopping-cart .text-btn-uppercase:hover{color:#181818} }

@media (max-width:575px){
  .modal-shopping-cart .header{padding:18px 18px 12px}
  .modal-shopping-cart .header .title{font-size:20px}
  .modal-shopping-cart .mc-ship{margin:14px 18px 2px}
  .modal-shopping-cart .tf-mini-cart-item{margin:0 18px;gap:14px}
  .modal-shopping-cart .tf-mini-cart-item .tf-mini-cart-image{width:68px;height:86px;flex-basis:68px}
  .modal-shopping-cart .tf-mini-cart-bottom-wrap{padding:14px 18px calc(16px + env(safe-area-inset-bottom))}
}

/* ===== Мобільне меню (#mobileMenu, шухляда зліва) - в одному стилі з вікном кошика =====
   Розмітка меню - на кожній сторінці; «Мова»/«Валюта» вставляє app/core/lang.php.
   Файл вантажиться без блокування показу - меню приховане, доки його не відкрили. */
#mobileMenu{max-width:min(380px,calc(100% - 44px));border-radius:0 22px 22px 0;overflow:hidden;background:#fff;box-shadow:16px 0 40px rgba(24,24,24,.14)}
#mobileMenu .mb-canvas-content{min-width:0;max-width:none;padding-top:70px}
#mobileMenu .icon-close-popup{top:18px;left:auto;right:18px;width:38px;height:38px;border-radius:50%;font-size:13px;color:#181818;background:#faf8f4;border:1px solid rgba(24,24,24,.08);transition:background .15s,border-color .15s,transform .3s}
@media (hover:hover) and (pointer:fine){ #mobileMenu .icon-close-popup:hover{color:#181818;background:#fff;border-color:rgba(24,24,24,.25)} }
#mobileMenu .mb-body{padding:0 22px calc(18px + env(safe-area-inset-bottom));border-bottom:0}

/* пункти: великі, з тонкими розділювачами; звичайні посилання - зі стрілкою › */
#mobileMenu .nav-ul-mb .nav-mb-item{padding:0;border-bottom:1px solid rgba(24,24,24,.08)}
#mobileMenu .nav-ul-mb .nav-mb-item:last-child{border-bottom:0}
#mobileMenu .nav-ul-mb .nav-mb-item .mb-menu-link{min-height:58px;font-size:19px;line-height:26px;font-weight:500;letter-spacing:-.01em;color:#181818;-webkit-tap-highlight-color:transparent}
#mobileMenu .nav-ul-mb .mb-menu-link:not([data-bs-toggle])::after{content:"";width:8px;height:8px;margin-right:6px;border-top:1.5px solid #181818;border-right:1.5px solid #181818;transform:rotate(45deg);opacity:.35;transition:opacity .15s,transform .15s}
#mobileMenu .nav-ul-mb .mb-menu-link:not([data-bs-toggle]):active::after{opacity:.8;transform:translateX(2px) rotate(45deg)}

/* «+» розкриття - у кружечку; відкрито - «−» */
#mobileMenu .nav-ul-mb .btn-open-sub{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#faf8f4;border:1px solid rgba(24,24,24,.08)}
#mobileMenu .nav-ul-mb .btn-open-sub::before{width:1.5px;height:11px}
#mobileMenu .nav-ul-mb .btn-open-sub::after{width:11px;height:1.5px}
#mobileMenu .nav-ul-mb .mb-menu-link:not(.collapsed) .btn-open-sub{background:#181818;border-color:#181818}
#mobileMenu .nav-ul-mb .mb-menu-link:not(.collapsed) .btn-open-sub::before,
#mobileMenu .nav-ul-mb .mb-menu-link:not(.collapsed) .btn-open-sub::after{background-color:#fff}
#mobileMenu .nav-ul-mb .sub-nav-link .btn-open-sub{width:24px;height:24px;background:#fff}
#mobileMenu .nav-ul-mb .sub-nav-link .btn-open-sub::before{height:9px}
#mobileMenu .nav-ul-mb .sub-nav-link .btn-open-sub::after{width:9px}

/* категорії каталогу - бежева картка */
#mobileMenu .nav-ul-mb .sub-nav-menu{margin:0 0 14px;padding:4px 14px;border-radius:16px;background:#faf8f4}
#mobileMenu .nav-ul-mb .sub-nav-menu > li + li{border-top:1px solid rgba(24,24,24,.06)}
#mobileMenu .nav-ul-mb .sub-nav-link{min-height:44px;line-height:1.35;font-size:15px;color:#4d4a44;-webkit-tap-highlight-color:transparent}
#mobileMenu .nav-ul-mb .sub-nav-link:active{color:#181818}
#mobileMenu .nav-ul-mb .sub-nav-menu .sub-nav-menu{margin:0 0 8px 2px;padding:0 0 0 12px;border-radius:0;background:none;border-left:1px solid rgba(24,24,24,.12)}
#mobileMenu .nav-ul-mb .sub-nav-menu .sub-nav-menu > li + li{border-top:0}
#mobileMenu .nav-ul-mb .sub-nav-menu .sub-nav-menu .sub-nav-link{min-height:38px;font-size:14px;color:#6f6a61}

/* низ: мова, валюта, контакти */
#mobileMenu .mb-other-content{padding-top:22px}
#mobileMenu .mb-lang-bottom,
#mobileMenu .mb-currency-bottom{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid rgba(24,24,24,.08)}
#mobileMenu .mb-info{margin:0;padding:2px 14px;border-radius:16px;background:#faf8f4}
#mobileMenu .mb-other-content .mb-info li{min-height:46px;margin:0;font-size:14px;line-height:20px}
#mobileMenu .mb-other-content .mb-info li + li{border-top:1px solid rgba(24,24,24,.06)}
#mobileMenu .mb-other-content .mb-info li .icon{flex:0 0 auto;font-size:18px;margin-right:12px;color:#6f6a61}
#mobileMenu .mb-info a{flex:1 1 auto;min-width:0;padding:12px 0;color:#181818;overflow-wrap:anywhere;-webkit-tap-highlight-color:transparent}