/* UAKEY — кастомні стилі поверх OCT Promo.
   Підключається в catalog/view/theme/oct_promo/template/common/header.twig після {% for style in styles %}.
   Сервер: catalog/view/theme/oct_promo/stylesheet/uakey.css */

/* Мегаменю: панель платформи без підкатегорій — групи посилань у ряд, а не стовпчиком у col-xl-3 */
@media (min-width: 992px) {
  .pr-menu-catalog-inner > .col-xl-3 {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem 2.5rem;
    padding: 0.5rem 1rem 1rem;
  }
  .pr-menu-catalog-inner > .col-xl-3 > .pr-menu-list-landings {
    flex: 1 1 220px;
    min-width: 200px;
    max-width: 320px;
    margin: 0;
  }
  .pr-menu-catalog-inner > .col-xl-3 > .pr-menu-list-landings > li {
    margin-bottom: 0 !important;
  }
  /* порожній список підкатегорій (у нас плоскі категорії) */
  .pr-menu-catalog-inner > .pr-menu-catalog-items:not(:has(li)) {
    display: none !important;
  }
}

.pr-menu-list-landings-link {
  display: block;
  padding: 0.2rem 0;
  line-height: 1.35;
}

/* Верхня панель nav#top на десктопі не потрібна (інфо-лінки є в головному меню).
   На мобільному (<992px) цей самий елемент є виїзним бургер-меню — його не чіпаємо
   (перевірено: якщо вирізати з шаблону, бургер на телефоні перестає працювати).
   Ховаємо без display:none, щоб елемент лишався в потоці для скриптів теми. */
@media (min-width: 992px) {
  nav#top {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
}

/* Бекдроп мобільного меню (#overlay) у неактивному стані лишається намальованим
   з opacity:0 — на iOS Safari він просвічує темним під тулбаром. Не малюємо його зовсім. */
#overlay:not(.active) {
  visibility: hidden;
}

/* ============================================================================
   Система кнопок (спек за консультацією GPT 5.6):
   - Жовтий #FFE600 — одна головна конверсійна дія екрана: «До кошика», «Оформити замовлення»,
     CTA слайда, фінальне підтвердження. Текст/іконки на жовтому — тільки #0B0D12.
   - Графіт #11131A — стан «У кошику» (додано) та навігаційні кнопки («Каталог товарів»).
   - Outline — вторинні дії: «Купити в 1 клік», купони/сертифікати.
   Файл теми all.css підключається у футері (після цього файлу) і фарбує .added у
   var(--pr-interactive-color) з білим текстом — тому тут селектори з префіксом html
   (вища специфічність) + !important.
   ========================================================================== */

/* --- Жовтий primary CTA --- */
.button-primary.button-cart,
#button-cart,
#oct-popup-button-cart,
.pr-product-fixed-cart-btn,
.pr-module-cart-btn,
.pr-sidebar-cart a.button-primary[href*="checkout/checkout"],
a.button-primary[href*="route=checkout/checkout"],
#button-go,
#btn-verify-sms {
  background-color: #FFE600 !important;
  border-color: #FFE600 !important;
  color: #0B0D12 !important;
  font-weight: 700;
}
.button-primary.button-cart:hover,
#button-cart:hover,
#oct-popup-button-cart:hover,
.pr-product-fixed-cart-btn:hover,
.pr-module-cart-btn:hover,
.pr-sidebar-cart a.button-primary[href*="checkout/checkout"]:hover,
a.button-primary[href*="route=checkout/checkout"]:hover,
#button-go:hover,
#btn-verify-sms:hover {
  background-color: #F2D900 !important;
  border-color: #F2D900 !important;
  color: #0B0D12 !important;
}
.button-primary.button-cart:active,
#button-cart:active,
#button-go:active {
  background-color: #DCC700 !important;
  border-color: #DCC700 !important;
}
.button-primary.button-cart svg path,
#button-cart svg path,
.pr-product-fixed-cart-btn svg path,
.pr-module-cart-btn svg path,
.button-primary.button-cart:hover svg path,
#button-cart:hover svg path,
.pr-product-fixed-cart-btn:hover svg path {
  stroke: #0B0D12 !important;
}
/* Іконка кошика в картці — SVG-маска зі спрайта, колір = background-color */
.button-cart .button-icon-cart {
  background-color: #0B0D12 !important;
}
/* Степер кількості всередині жовтої кнопки картки: штрихи +/- були #E5E9EF (невидимі на жовтому) */
.button-cart .buttons-quantity .number {
  background-color: #fff !important;
  color: #11131A !important;
}
.button-cart .buttons-quantity .controls button {
  background-color: #fff !important;
}
.button-cart .buttons-quantity svg path {
  stroke: #11131A !important;
}
/* Степер на сторінці товару: +/- були майже білі на білому */
.pr-product-buttons-quantity .controls svg path {
  stroke: #3E4454 !important;
}

/* --- Стан «У кошику» (.added): графіт + білий текст + галочка --- */
html .button-cart.added,
html #button-cart.added,
html #oct-popup-button-cart.added,
html .pr-product-fixed-cart-btn.added,
html .pr-module-cart-btn.added,
html button[onclick*="cart.add"].added {
  background-color: #11131A !important;
  border-color: #11131A !important;
  color: #FFFFFF !important;
  transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out;
}
html .button-cart.added:hover:not([disabled]),
html #button-cart.added:hover:not([disabled]),
html #oct-popup-button-cart.added:hover:not([disabled]),
html .pr-product-fixed-cart-btn.added:hover:not([disabled]),
html .pr-module-cart-btn.added:hover:not([disabled]) {
  background-color: #3E4454 !important;
  border-color: #3E4454 !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
}
html .button-cart.added:focus-visible,
html #button-cart.added:focus-visible {
  outline: 3px solid #FFE600;
  outline-offset: 2px;
}
/* Галочка замість іконки кошика */
html .button-cart.added .button-icon-cart {
  background-color: #FFFFFF !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") !important;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") !important;
  -webkit-mask-size: 18px 18px !important;
  mask-size: 18px 18px !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}
html #button-cart.added > svg,
html #oct-popup-button-cart.added > svg,
html .pr-product-fixed-cart-btn.added > svg {
  display: none;
}
html #button-cart.added::before,
html #oct-popup-button-cart.added::before,
html .pr-product-fixed-cart-btn.added::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-color: #FFFFFF;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.5l5 5L20 6.5'/></svg>") center / contain no-repeat;
}
html .pr-product-fixed-cart-btn.added::before {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}
/* Степер у темній кнопці: білий блок з темними гліфами (all.css уже робить фон білим) */
html .button-cart.added .buttons-quantity .number,
html .button-cart.added .buttons-quantity .controls button {
  background-color: #FFFFFF !important;
  color: #11131A !important;
}
html .button-cart.added .buttons-quantity svg path {
  stroke: #11131A !important;
}

/* --- Wishlist / Compare «додано»: м'який жовтий фон, темна іконка (замість жовтого з білою іконкою) --- */
html .pr-module-item-button-wishlist.added,
html .pr-module-item-button-compare.added,
html .pr-wishlist-btn.added,
html .pr-compare-btn.added {
  background-color: #FFF8B8 !important;
  border-color: #E6CF00 !important;
  color: #11131A !important;
}
html .pr-module-item-button-wishlist.added:hover,
html .pr-module-item-button-compare.added:hover,
html .pr-wishlist-btn.added:hover,
html .pr-compare-btn.added:hover {
  background-color: #FFF3A0 !important;
  opacity: 1 !important;
  transform: none !important;
}
html .pr-module-item-button-wishlist.added svg path,
html .pr-module-item-button-compare.added svg path,
html .pr-wishlist-btn.added svg path,
html .pr-compare-btn.added svg path {
  stroke: #11131A !important;
}
html .pr-module-item-button-wishlist.added svg path,
html .pr-wishlist-btn.added svg path {
  fill: #11131A !important;
}
html .pr-wishlist-btn.added .pr-btn-icon,
html .pr-compare-btn.added .pr-btn-icon {
  filter: none !important;
}

/* --- «Купити в 1 клік»: outline (вторинна дія, не конкурує з жовтим CTA) --- */
.pr-buy-one-click-btn,
.pr-product-one-click-btn {
  background-color: #FFFFFF !important;
  border: 1.5px solid #11131A !important;
  color: #11131A !important;
  font-weight: 600;
}
.pr-buy-one-click-btn:hover,
.pr-product-one-click-btn:hover {
  background-color: #F5F6F8 !important;
  color: #11131A !important;
}
.pr-buy-one-click-btn:active,
.pr-product-one-click-btn:active {
  background-color: #E5E9EF !important;
}
.pr-buy-one-click-btn svg path,
.pr-product-one-click-btn svg path {
  stroke: #11131A !important; /* у розмітці захардкоджено #0C296A (старий синій теми) */
}

/* --- Купони / сертифікати на сторінці кошика та оформлення: outline замість графіту --- */
#button-coupon,
#button-voucher {
  background-color: #FFFFFF !important;
  border: 1.5px solid #11131A !important;
  color: #11131A !important;
}
#button-coupon:hover,
#button-voucher:hover {
  background-color: #F5F6F8 !important;
  color: #11131A !important;
}

/* --- «Показати ще» в категорії та в каруселях «Мультитовари» на головній: тема дає .button-success (зелений);
   робимо жовтою, як головні CTA. Іконка-стрілка в розмітці має stroke="#FFFDFF" — перефарбовуємо в графіт --- */
.oct-load-more-button.button-success,
.pr-module-show-more .button-success {
  background-color: #FFE600 !important;
  border-color: #FFE600 !important;
  color: #0B0D12 !important;
  font-weight: 700;
  gap: .5rem;
}
.oct-load-more-button.button-success:hover,
.pr-module-show-more .button-success:hover {
  background-color: #F2D900 !important;
  color: #0B0D12 !important;
  opacity: 1 !important;
}
.oct-load-more-button.button-success:active,
.pr-module-show-more .button-success:active {
  background-color: #DCC700 !important;
}
.oct-load-more-button svg path,
.pr-module-show-more .button-success svg path {
  stroke: #0B0D12 !important;
}

/* --- Лічильники в шапці: жовтий бейдж з темною цифрою і білим обводом; нульові приховує
   маленький скрипт у footer.twig (клас .uakey-zero) --- */
.pr-header-buttons-item-count {
  background-color: #FFE600 !important;
  color: #11131A !important;
  font-weight: 800 !important;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  box-shadow: 0 0 0 2px #fff;
}
.pr-header-buttons-item-count.uakey-zero {
  display: none !important;
}

/* --- Рейтинг на картках: при 0 відгуків ховаємо зірки (шум, схоже на низьку оцінку), висоту тримаємо --- */
.pr-module-item-rating:has(.pr-module-item-rating-stars[data-rating="0"]) {
  visibility: hidden;
}

/* --- Бічний кошик: спокійніша типографіка, сума біля кнопки, без важких сірих плашок --- */
.pr-sidebar-cart .pr-sidebar-cart-top {
  background-color: #fff !important;
  border-bottom: 1px solid #E5E9EF;
}
.pr-sidebar-cart .pr-sidebar-cart-top .pr-sidebar-cart-products-count {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #11131A !important;
  font-variant-numeric: tabular-nums;
}
.pr-sidebar-cart .pr-sidebar-cart-products-delete {
  font-size: 13px;
  color: #6B7280 !important;
}
.pr-sidebar-cart .pr-sidebar-cart-content {
  display: flex;
  flex-direction: column;
}
.pr-sidebar-cart .pr-sidebar-cart-products { order: 1; padding: 0 !important; }
.pr-sidebar-cart .pr-sidebar-cart-total { order: 2; }
.pr-sidebar-cart .pr-sidebar-cart-footer { order: 3; }
.pr-sidebar-cart .pr-sidebar-cart-recommended { order: 4; }
.pr-sidebar-cart #free_shipping_html, .pr-sidebar-cart #error_minimum { order: 0; }
.pr-sidebar-cart .pr-sidebar-cart-total {
  background-color: transparent !important;
  padding: 1rem 0 0 !important;
  margin: 1rem 0 0.75rem !important;
  border-top: 1px solid #E5E9EF;
}
.pr-sidebar-cart .pr-sidebar-cart-total span:first-child {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #6B7280 !important;
}
.pr-sidebar-cart .pr-sidebar-cart-total #modalCartTotalsText {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #11131A !important;
  font-variant-numeric: tabular-nums;
}
.pr-sidebar-cart .pr-sidebar-cart-product {
  padding: 1rem 0;
  border-bottom: 1px solid #E5E9EF;
}
.pr-sidebar-cart .pr-sidebar-cart-product:last-child { border-bottom: 0; }
.pr-sidebar-cart .pr-sidebar-cart-product-image img { border-radius: 8px; }
.pr-sidebar-cart .pr-sidebar-cart-product-title { font-weight: 600 !important; }
.pr-sidebar-cart .pr-sidebar-cart-product-bottom > span.fsz-20 { font-size: 16px !important; font-weight: 700 !important; }
/* Захардкоджені штрихи #4F5F99 (старий колір теми) у хрестику та +/- */
.pr-sidebar-cart .pr-sidebar-cart-close svg path,
.pr-sidebar-cart .pr-quantity-button svg path {
  stroke: #3E4454 !important;
}
.pr-sidebar-cart .pr-sidebar-cart-footer .button-primary {
  padding-top: .9rem;
  padding-bottom: .9rem;
  font-size: 15px;
}
/* Блок «Купити в 1 клік» у кошику — окрема м'яка плашка */
.pr-sidebar-cart .pr-sidebar-cart-footer .pr-buyoneclick {
  background-color: #F5F6F8;
  border-radius: 10px;
  padding: 1rem !important;
  margin-bottom: 1rem;
}
/* Кнопка-іконка «в 1 клік» в input-group: без зайвих рамок зліва, скруглення справа */
.pr-buyoneclick .input-group .pr-buy-one-click-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Слайдер головної (Slideshow Plus): розмита копія зображення слайду як фон + затемнення
   ліворуч під текст (як у ggstore). URL фону для кожного слайду підставляє патч у
   template/octemplates/module/oct_slideshow_plus.twig (::before {background-image}). */
.main-slideshow .pr-slideshow-plus-slide {
  border-radius: 18px;
}
/* Не копія картинки, а м'яке кольорове світіння за нею: сильний блюр, зсув під картинку */
.main-slideshow .pr-slideshow-plus-slide::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background-position: right center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  filter: blur(70px) saturate(1.3) brightness(0.6);
  opacity: 0.85;
  pointer-events: none;
}
/* Тінь ліворуч під текст (значення взяті з ggstore) */
.main-slideshow .pr-slideshow-plus-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(2, 9, 18, 0.86) 0%, rgba(2, 9, 18, 0.78) 25%, rgba(2, 9, 18, 0.62) 41%, rgba(2, 9, 18, 0.38) 54%, rgba(2, 9, 18, 0.15) 66%, rgba(2, 9, 18, 0.03) 74%, rgba(2, 9, 18, 0) 80%);
  pointer-events: none;
}
/* Картинка товару: на всю висоту слайда праворуч, лівий край розчиняється у фоні */
.main-slideshow .pr-slideshow-plus-slide > img {
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  block-size: 100%;
  width: auto;
  max-width: 70%;
  object-fit: contain;
  object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.24) 7%, rgba(0, 0, 0, 0.76) 17%, #000 27%, #000 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.24) 7%, rgba(0, 0, 0, 0.76) 17%, #000 27%, #000 100%);
}
.main-slideshow .pr-slideshow-plus-slide-info {
  z-index: 2;
  max-width: 55%;
}
.main-slideshow .pr-slideshow-plus-slide-title {
  font-size: 30px !important; /* перекриває утиліти fsz-24 / fw-600 з !important */
  font-weight: 800 !important;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.main-slideshow .pr-slideshow-plus-slide-text p {
  font-size: 15px !important;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 0.75rem !important;
  margin-bottom: 1.75rem !important;
}
/* Ціна у слайді: <span class="uakey-slide-price">{price:ID}</span> в описі слайду */
.uakey-slide-price {
  display: block;
  margin-top: 1rem;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.uakey-slide-price s {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.64);
  vertical-align: middle;
}
/* CTA слайда — брендовий жовтий з чорним текстом (перекриває inline-кольори кнопки зі слайду) */
.main-slideshow .pr-slideshow-plus-slide-info .button {
  font-weight: 700;
  background-color: #FFE600 !important;
  border-color: #FFE600 !important;
  color: #0B0D12 !important;
}
.main-slideshow .pr-slideshow-plus-slide-info .button:hover {
  background-color: #F2D900 !important;
  border-color: #F2D900 !important;
  color: #0B0D12 !important;
}

/* Десктоп: картинка займає праві 60% слайда (cover), текст вертикально по центру,
   стрілка не налазить на текст */
@media (min-width: 768px) {
  .main-slideshow .pr-slideshow-plus-slide {
    min-height: 360px;
  }
  /* Картинка на всю висоту слайда у власній пропорції, без обрізання */
  .main-slideshow .pr-slideshow-plus-slide > img {
    width: auto;
    max-width: 70%;
    object-fit: contain;
    object-position: right center;
  }
  .main-slideshow .pr-slideshow-plus-slide-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(360px - 3rem);
    max-width: 50%;
    padding: 0 0 0 2.75rem !important;
  }
  .main-slideshow .pr-slideshow-plus-slide-title {
    font-size: 32px !important;
  }
  .uakey-slide-price {
    font-size: 32px;
  }
  .main-slideshow .pr-slideshow-plus-slide-info .button {
    margin-top: 1.25rem !important;
    padding: 0.9rem 1.75rem;
    font-size: 15px;
    border-radius: 12px;
  }
  .pr-slideshow-plus .swiper-button-prev,
  .pr-slideshow-plus .swiper-button-next {
    top: 50%;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(2, 9, 18, 0.55);
    border-color: rgba(255, 255, 255, 0.3);
    z-index: 5;
  }
  .pr-slideshow-plus .swiper-button-prev {
    left: 1rem !important;
  }
  .pr-slideshow-plus .swiper-button-next {
    right: 1rem !important;
  }
}

/* Мобільна версія: картинка зверху на всю ширину, текст знизу поверх затемнення */
@media (max-width: 767px) {
  .main-slideshow .pr-slideshow-plus-slide {
    min-height: 0;
  }
  .main-slideshow .pr-slideshow-plus-slide::before {
    background-position: center top;
    background-size: 100% auto;
  }
  .main-slideshow .pr-slideshow-plus-slide::after {
    background: linear-gradient(180deg, rgba(2, 9, 18, 0) 20%, rgba(2, 9, 18, 0.55) 45%, rgba(2, 9, 18, 0.9) 65%);
  }
  .main-slideshow .pr-slideshow-plus-slide > img {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: none;
    height: 250px;
    block-size: 250px;
    object-fit: cover;
    object-position: center top;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, 0) 100%);
  }
  .main-slideshow .pr-slideshow-plus-slide-info {
    max-width: none;
    padding-top: 175px;
    padding-bottom: 1.5rem !important;
  }
  .main-slideshow .pr-slideshow-plus-slide-text p {
    margin-bottom: 0.5rem !important;
  }
  .main-slideshow .pr-slideshow-plus-slide-info .button {
    margin-top: 1rem !important;
  }
  .main-slideshow .pr-slideshow-plus-slide-title {
    font-size: 26px !important;
  }
  .uakey-slide-price {
    font-size: 26px;
  }
}