/* Giggle — доповнення до верстки стенду для магазинних елементів,
   яких у статичному стенді не було (тости, опції товару, сортування, карта сайту). */

.gg-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px 20px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.gg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .gg-toast { bottom: 84px; } }

/* сортування у каталозі/пошуку */
.srt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.srt a {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.srt a:hover { border-color: rgba(0, 0, 0, .4); }
.srt a.is-on { background: #111; color: #fff; border-color: #111; }

.clist__bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.clist__cnt { font-size: 13px; opacity: .7; }
.clist__empty, .cart__empty { padding: 28px 0 40px; font-size: 17px; }

/* пошук на сторінці результатів */
.srch--page { margin: 0 0 18px; }

/* опції товару */
.pdp__opts { display: grid; gap: 14px; margin: 0 0 18px; }
.pdp__opt > label, .pdp__opt > span { display: block; font-size: 13px; opacity: .75; margin: 0 0 6px; }
.pdp__opt select,
.pdp__opt input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  box-sizing: border-box;
}
.pdp__opt label input[type="radio"],
.pdp__opt label input[type="checkbox"] { margin-right: 8px; }

/* карта сайту */
.smap { padding: 8px 0 56px; }
.smap__cols { display: grid; gap: 32px; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .smap__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .smap__cols { grid-template-columns: repeat(4, 1fr); } }
.smap__h { font-size: 17px; margin: 0 0 12px; }
.smap__list, .smap__list ul { list-style: none; margin: 0; padding: 0; }
.smap__list li { margin: 0 0 8px; }
.smap__list ul { margin: 8px 0 12px 14px; opacity: .75; font-size: 14px; }
.smap__list a { text-decoration: none; }
.smap__list a:hover { text-decoration: underline; }

/* пагінація OpenCart у новому дизайні */
.pgn ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.pgn li > a, .pgn li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
}
.pgn li > span { background: #111; color: #fff; border-color: #111; }
.pgn li > a:hover { border-color: rgba(0, 0, 0, .45); }

/* помилки форми контактів */
.cont__err { display: block; margin: 0 0 12px; color: #c0392b; font-size: 13px; }

/* ── форма відгуку на сторінці товару */
.prev__form {
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .07);
}
.prev__form label { display: block; margin: 0 0 14px; }
.prev__form label > span {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  color: rgba(0, 0, 0, .6);
}
.prev__form input[type="text"], .prev__form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  background: #fff;
  box-sizing: border-box;
}
.prev__form input[type="text"]:focus, .prev__form textarea:focus {
  outline: none;
  border-color: rgba(0, 0, 0, .5);
}
.prev__form textarea { resize: vertical; min-height: 110px; }
.prev__f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.prev__form .prev__set { display: inline-flex; flex-direction: row-reverse; gap: 4px; padding: 6px 0; }
.prev__form .prev__set input { position: absolute; opacity: 0; width: 0; height: 0; }
.prev__form .prev__set label {
  display: inline-flex;
  margin: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, .22);
  line-height: 0;
  transition: color .15s;
}
.prev__form .prev__set label svg { width: 22px; height: 22px; }
.prev__form .prev__set input:checked ~ label, .prev__form .prev__set label:hover, .prev__form .prev__set label:hover ~ label { color: #f0a500; }
.prev__note { margin: 0 0 14px; font-size: 13px; color: rgba(0, 0, 0, .5); }
.prev__msg { margin: 0 0 14px; font-size: 14px; }
.prev__msg.is-err { color: #c0392b; }
.prev__msg.is-ok { color: #1e8449; }
.prev__send {
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.prev__send:hover { background: #333; }
.prev__send[disabled] { opacity: .55; cursor: default; }
.prev__empty { margin: 0; text-align: center; color: rgba(0, 0, 0, .55); }
@media (max-width: 640px) {
  .prev__form { padding: 18px; border-radius: 16px; }
  .prev__f2 { grid-template-columns: 1fr; }
}

/* лайтбокс має перекривати липку панель, таб-бар і шапку */
.plb { z-index: 240; }

/* залишок і виробник у шапці картки товару */
.pdp__left, .pdp__brand {
  color: rgba(17, 17, 17, .62);
  font-size: 13px;
}
.pdp__left { color: #1e8449; }

/* ── ПРАВКИ ЗА ТЗ 02.09.2026 ───────────────────────────────────────────── */

/* 1. Порожня категорія: тільки текстовий опис на всю ширину (як на проді) */
.cdesc--bare { padding-top: 4px; }

/* 2. Фото товару: стрічка мініатюр, а не стовпець (у товару буває 70+ фото) */
.pdp__thumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 17, 17, .28) transparent;
  padding-bottom: 8px;
}
.pdp__thumbs::-webkit-scrollbar { height: 6px; }
.pdp__thumbs::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(17, 17, 17, .28); }
.pdp__thumbs::-webkit-scrollbar-track { background: transparent; }
.pdp__thumbs li {
  flex: 0 0 calc((100% - 30px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}
.pdp__thumbs button,
.pdp__thumbs li:nth-child(2) button,
.pdp__thumbs li:nth-child(3) button,
.pdp__thumbs li:nth-child(4) button {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
@media (max-width: 900px) {
  .pdp__thumbs li { flex-basis: calc((100% - 24px) / 4); }
}
@media (max-width: 560px) {
  .pdp__thumbs { gap: 8px; }
  .pdp__thumbs li { flex-basis: calc((100% - 24px) / 3.4); }
}

/* 3. Ліміт тексту в блоках головної (обрізання по словах — у контролері) */
.bubbles p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.art__t {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.art__d {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 4. МОБ-шапка: лого по центру, пошук — значком (модалка), рядок пошуку прибрано */
@media (max-width: 900px) {
  .hdri__in { position: relative; }
  .hdri__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  .hdri__srch { display: grid; margin-left: auto; }
  .hdri__fav { margin-left: 0; }
  .srch--m { display: none !important; }
}
@media (min-width: 901px) {
  .hdri__srch { display: none; }
}

/* підкатегорії плиткою на порожній категорії */
.ccat--sub { padding-top: 8px; }
.ccat--sub .ccat__car { overflow: visible; }

/* HTML-опис категорії: сітка посилань із теми (в новій верстці своїх стилів не було) */
.cdesc__in .blog-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.cdesc__in .blog-links-grid a {
  display: block;
  padding: 14px 16px;
  border: 1px solid #e5e2db;
  border-radius: 14px;
  background: #fff;
  color: #111;
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .2s, background .2s;
}
.cdesc__in .blog-links-grid a:hover { border-color: #111; background: #f6f5f2; }

/* МОБ-шапка: компактні іконки, «Обране» лишається лише в нижньому таббарі */
@media (max-width: 900px) {
  .hdri__in > .hdri__ic { width: 40px; height: 40px; }
  .hdri__in .hdri__fav { display: none; }
  .hdri__logo img { width: 104px; height: auto; }
  .hdri__srch svg { width: 19px; height: 19px; }
}

/* стрічка мініатюр не має розпирати колонку фото (flex-item min-width:auto) */
.pdp__ph, .pdp__stage, .pdp__thumbs { min-width: 0; max-width: 100%; }

/* 320px: соцмережі у футері не влазять у рядок */
@media (max-width: 380px) {
  .ft__soc { flex-wrap: wrap; }
}

/* закрита шторка фільтрів (position:fixed + translateX) розтягувала сторінку вправо на вузьких екранах;
   clip, а не hidden — інакше ламається position:sticky */
@media (max-width: 900px) {
  html { overflow-x: clip; }
}