/*
 Theme Name:  Hello Elementor Child
 Theme URI:   https://example.com
 Description: Child theme for Hello Elementor
 Author:      You
 Template:    hello-elementor
 Version:     1.0.0
 Text Domain: hello-elementor-child
*/
/* Во всю ширину */
.wc-archive.wc-archive--full{
  /* Hello часто ограничивает контейнеры — убираем лимит */
  max-width: none !important;
  width: 100%;
}
.site-main.wc-archive .elementor-container,
.site-main.wc-archive .container {
  max-width: none !important;
}

/* Шапка архива */
.wc-archive__head{margin:24px 0 12px}
.wc-archive__title{margin:0 0 10px;font-size:40px;line-height:1.2}
.wc-archive__breadcrumbs{
  display:flex; align-items:center; gap:12px; min-height:56px;
}
.wc-archive__breadcrumbs .woocommerce-breadcrumb{margin:0}
.pf-open-btn{
  margin-left:auto; display:inline-flex; gap:.5rem; align-items:center;
  padding:.7rem 1rem; border:0; border-radius:10px;
  background:#0d3b66; color:#fff; font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.15); cursor:pointer
}
.pf-open-btn svg{width:18px;height:18px;fill:currentColor}

/* Сетка категорий */
.wc-cats-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:24px; margin:16px 0 28px; padding:0; list-style:none;
}
.wc-cat{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.06);transition:transform .2s}
.wc-cat:hover{transform:translateY(-2px)}
.wc-cat a{display:block;text-decoration:none;color:inherit}
.wc-cat__thumb img{display:block;width:100%;height:auto}
.wc-cat__title{margin:10px 12px 12px;font-size:16px;line-height:1.35;font-weight:600}

/* 5 товаров в ряд + карточка */
ul.products{display:grid;grid-template-columns:repeat(5, minmax(0,1fr));gap:24px}
ul.products li.product.mp-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.06)}
.mp-card__thumb{position:relative;display:block;overflow:hidden}
.mp-card__thumb img{display:block;width:100%;height:auto;transition:opacity .25s, transform .35s}
.mp-card__thumb .mp-card__thumb--hover{
  position:absolute; inset:0; opacity:0; pointer-events:none;
}
.mp-card__thumb:hover img{transform:scale(1.03)}
.mp-card__thumb:hover .mp-card__thumb--hover{opacity:1}
.mp-card__body{padding:14px}
.mp-card__title{margin:0 0 6px;font-size:16px;line-height:1.35}
.mp-card__title a{text-decoration:none;color:inherit}
.mp-card__dims{font-size:12px;color:#6b7280;margin-bottom:8px}
.mp-card__price{font-weight:700;margin-bottom:10px}
ul.products li.product .button{width:100%;text-align:center;border-radius:10px}

/* Адаптив */
@media (max-width: 1200px){
  .wc-cats-grid, ul.products{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (max-width: 1024px){
  .wc-cats-grid, ul.products{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width: 767px){
  .wc-cats-grid, ul.products{grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
  .wc-archive__title{font-size:30px}
  .wc-archive__breadcrumbs{flex-wrap:wrap;row-gap:10px}
  .pf-open-btn{margin-left:0}
}
/* 100% ширина для Woo архивов */
body.post-type-archive-product .site-main,
body.tax-product_cat .site-main {
  max-width: none !important;
  width: 100% !important;
}

/* иногда Hello/Elementor вешают ограничения на внутренние контейнеры */
body.post-type-archive-product .site-main .container,
body.tax-product_cat .site-main .container,
body.post-type-archive-product .site-main .elementor-container,
body.tax-product_cat .site-main .elementor-container {
  max-width: none !important;
  width: 100% !important;
}
div#primary {
    padding: 0px 10px;
}
@media (max-width: 575px) {
    .page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header), body:not([class*=elementor-page-]) .site-main {
        padding-inline-end: 0px;
        padding-inline-start: 0px;
    }
	.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
    float: left;
}
}
.woocommerce ul.products.columns-5 li.product, .woocommerce-page ul.products.columns-5 li.product {
    width: 100%;
}
.woocommerce ul.products::before {
    content: " ";
    display: none;
}
/* контейнер изображения */
.mp-thumb{position:relative;display:block;overflow:hidden}
.mp-thumb__img{display:block;width:100%;height:auto;transition:opacity .25s ease, transform .35s ease}
.mp-thumb__img--hover{position:absolute;inset:0;opacity:0;pointer-events:none}

/* эффект наведения — только если есть второе фото */
.mp-thumb.has-hover:hover .mp-thumb__img--hover{opacity:1}
.mp-thumb.has-hover:hover .mp-thumb__img--main{opacity:0;transform:scale(1.03)}
/* Короткое описание под названием в каталоге */
.mp-card__excerpt{
  margin: 4px 0 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #6b7280; /* приглушённый серый */
  /* если нужно в одну строку с троеточием — раскомментируйте: */
  /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */
}
/* ============ FIX: фото-акцент single ============ */

/* 1) Грид-каркас страницы */
.mp-single.mp-photo{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 480px; /* poster | sidebar */
  gap:48px;
  align-items:start;
}
@media (max-width:1280px){ .mp-single.mp-photo{ grid-template-columns:minmax(0,1fr) 400px; gap:36px; } }
@media (max-width:1023px){  .mp-single.mp-photo{ grid-template-columns:1fr; gap:24px; } }

/* 2) Снимаем "флоаты" и любые узкие ширины у Woo/Hello */
.single-product .product div.images,
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery.images,
.single-product .woocommerce-product-gallery__wrapper{
  float:none !important;
  width:auto !important;
  max-width:none !important;
}
.mp-photo__gallery{ min-width:0; }          /* важный фикс для grid */
.mp-photo__summary{ position:sticky; top:96px; }
@media (max-width:1023px){ .mp-photo__summary{ position:static; } }

/* 3) Делаем саму галерею двухколоночной: превью + постер */
.mp-photo__gallery .woocommerce-product-gallery{
  display:grid !important;
  grid-template-columns: 96px 1fr;
  column-gap:16px;
  align-items:start;
}

/* 3a) Постер (большой кадр) */
.mp-photo__gallery .woocommerce-product-gallery__wrapper{
  grid-column:2;
  border-radius:18px; overflow:hidden;
  box-shadow:0 14px 38px rgba(0,0,0,.10);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img{
  width:100%; height:auto;
  aspect-ratio: 4/5; object-fit: cover;
  transition: transform .35s ease;
}
.woocommerce-product-gallery:hover .woocommerce-product-gallery__image img{ transform:scale(1.01); }

/* 3b) Вертикальная лента превью */
.mp-photo__gallery .flex-control-thumbs{
  grid-column:1;
  display:grid; gap:10px;
  max-height: calc(100vh - 180px);
  overflow:auto; padding-right:6px;
  scrollbar-width:thin;
}
.mp-photo__gallery .flex-control-thumbs li{ list-style:none; }
.mp-photo__gallery .flex-control-thumbs img{
  display:block; width:100%; height:100%;
  aspect-ratio:1/1; object-fit:cover;
  border-radius:12px; cursor:pointer;
  opacity:.85; transition:opacity .2s, transform .2s, box-shadow .2s;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.mp-photo__gallery .flex-control-thumbs img.flex-active,
.mp-photo__gallery .flex-control-thumbs img:hover{
  opacity:1; transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}

/* 4) Лупа (zoom) — компактнее и поверх постера */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger{
  top:14px; right:14px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  z-index:3;
}

/* 5) Заголовок/цена/кнопка (можно оставить как были) */
.mp-photo__summary .product_title{ margin:0 0 10px; font-size:46px; line-height:1.1; font-weight:800; }
.mp-photo__price .price{ font-size:28px; font-weight:800; display:flex; gap:10px; white-space:nowrap; }
.mp-photo__price del{ opacity:.5; font-weight:600; }
.mp-photo__excerpt{ margin:12px 0 18px; color:#4b5563; font-size:16px; line-height:1.5; }
.mp-photo__cta .single_add_to_cart_button{ width:100%; padding:1rem 1.2rem; border-radius:12px; font-weight:700; font-size:16px; }
.mp-photo__meta{ margin-top:14px; font-size:13px; color:#6b7280; }
.mp-photo__meta .sku_wrapper,
.mp-photo__meta .posted_in,
.mp-photo__meta .tagged_as{ display:block; margin:.25rem 0; }

/* 6) Мобильный вариант — превью под постером горизонтально */
@media (max-width:1023px){
  .mp-photo__gallery .woocommerce-product-gallery{ grid-template-columns:1fr; row-gap:12px; }
  .mp-photo__gallery .flex-control-thumbs{ grid-column:1; display:flex; gap:10px; max-height:none; overflow:auto; padding:0 2px; }
  .mp-photo__gallery .flex-control-thumbs img{ width:92px; height:92px; aspect-ratio:1/1; }
  .mp-photo__summary .product_title{ font-size:34px; }
  .mp-photo__price .price{ font-size:24px; }
}
/* === SINGLE: на всю ширину страницы === */
body.single-product .site-main,
body.single-product .site-main .container,
body.single-product .site-main .elementor-container{
  max-width:none !important;
  width:100% !important;
  padding-left:24px; padding-right:24px;  /* можно 16/32 по вкусу */
}

/* каркас single: галерея слева (занимает всё), summary справа фикс. ширины */
.mp-single.mp-photo{
  display:grid;
  grid-template-columns: minmax(0,1fr) 520px; /* левая колонка + правая панель */
  gap:56px;
  align-items:start;
}
.mp-photo__summary{ position:sticky; top:96px; }
@media (max-width:1200px){
  .mp-single.mp-photo{ grid-template-columns: 1fr; gap:28px; }
  .mp-photo__summary{ position:static; }
}

/* Снимаем чужие "float/width" у Woo/Hello */
.single-product .product div.images,
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery.images,
.single-product .woocommerce-product-gallery__wrapper{
  float:none !important;
  width:auto !important;
  max-width:none !important;
}

/* Скрываем стандартные thumbs-снизу/сбоку */
.mp-photo__gallery .flex-control-thumbs{ display:none !important; }

/* Делаем саму обёртку галереи сеткой 2×N */
.mp-photo__gallery .woocommerce-product-gallery{ display:block !important; }
.mp-photo__gallery .flex-viewport{
  height:auto !important; max-height:none !important;
}
.mp-photo__gallery .woocommerce-product-gallery__wrapper{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
  width:auto !important;
  height:auto !important;
  transform:none !important;   /* если слайдер пытался двигать wrapper */
}

/* Каждая картинка — блок без флотов/ширин с красивыми углами */
.mp-photo__gallery .woocommerce-product-gallery__image{
  width:auto !important; float:none !important; margin:0 !important;
}
.mp-photo__gallery .woocommerce-product-gallery__image a,
.mp-photo__gallery .woocommerce-product-gallery__image img{
  display:block; width:100%; height:auto;
  border-radius:16px; object-fit:cover;
  /* если хочешь ровную сетку по высоте, включи аспект: */
  /* aspect-ratio: 4 / 5; */
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  transition:transform .3s ease;
}
.mp-photo__gallery .woocommerce-product-gallery__image:hover img{ transform:scale(1.01); }

/* Лупа (zoom) — аккуратная и поверх сетки */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger{
  top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.9); box-shadow:0 8px 20px rgba(0,0,0,.12); z-index:3;
}

/* Красивая правая колонка (можно оставить твои прежние правила) */
.mp-photo__summary .product_title{ margin:0 0 10px; font-size:46px; line-height:1.1; font-weight:800; }
@media (max-width:1200px){ .mp-photo__summary .product_title{ font-size:34px; } }
.mp-photo__price .price{ font-size:28px; font-weight:800; display:flex; gap:10px; white-space:nowrap; }
.mp-photo__price del{ opacity:.5; font-weight:600; }
.mp-photo__excerpt{ margin:12px 0 18px; color:#4b5563; font-size:16px; line-height:1.5; }
.mp-photo__cta .single_add_to_cart_button{ width:100%; padding:1rem 1.2rem; border-radius:12px; font-weight:700; font-size:16px; }
.mp-photo__meta{ margin-top:14px; font-size:13px; color:#6b7280; }
/* Убираем анимации/масштаб у изображений галереи на ховер */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img,
.mp-photo__gallery .woocommerce-product-gallery__image img{
  transform: none !important;
  transition: none !important;
}

/* Перекрываем возможные глобальные правила "на ховер" */
.woocommerce-product-gallery:hover .woocommerce-product-gallery__image img{
  transform: none !important;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    width: 100%;
}
/* ====== BREADCRUMBS ====== */
.mp-breadcrumbs{
  margin: 8px 0 18px;
  font-size:13.5px;
  color:#6b7280;
  display:flex; gap:.35rem; flex-wrap:wrap;
}
.mp-breadcrumbs a{color:inherit; text-decoration:none;}
.mp-breadcrumbs a:hover{color:#0d3b66; text-decoration:underline;}
.mp-breadcrumbs .crumb:last-child{color:#111827; font-weight:600;}

/* ---------------------------
   TABS — clean underline style
   --------------------------- */

/* контейнер табов */
.woocommerce-tabs{ margin-top:42px; }

/* сама полоска табов */
.woocommerce-tabs .tabs{
  display:flex;
  align-items:center;
  gap:26px;
  padding:0;
  margin:0 0 14px 0;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-bottom:1px solid #e5e7eb;           /* базовая линия */
}

/* убийцы "точек"/декора, которые темы любят добавлять */
.woocommerce-tabs .tabs,
.woocommerce-tabs .tabs li{ list-style:none !important; }
.woocommerce-tabs .tabs:before,
.woocommerce-tabs .tabs li:before,
.woocommerce-tabs .tabs li:after{ content:none !important; display:none !important; }

/* отдельный таб */
.woocommerce-tabs .tabs li{
  margin:0 !important; padding:0 !important;
  border:0 !important; background:transparent !important;
}

/* ссылка-таба */
.woocommerce-tabs .tabs li a{
  display:block;
  padding:14px 2px 12px;
  font-weight:800;
  color:#6b7280;
  text-decoration:none;
  border-bottom:3px solid transparent;       /* индикатор */
  transition: color .2s ease, border-color .2s ease;
}

/* hover/focus */
.woocommerce-tabs .tabs li a:hover,
.woocommerce-tabs .tabs li a:focus{
  color:#111827;
}

/* активный таб с цветным индикатором (подгони при желании) */
.woocommerce-tabs .tabs li.active a{
  color:#111827;
  border-color:#7C3AED; /* фиолетовый как на кнопке; можно #0d3b66 */
}

/* панель таба — аккуратная карточка */
.woocommerce-Tabs-panel{
  margin-top:0;
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:14px;
  padding:22px 24px;
  box-shadow:0 14px 30px rgba(0,0,0,.06);
}

/* типографика внутри панелей */
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3{
  margin:.2em 0 .6em;
  font-weight:800;
}
.woocommerce-Tabs-panel p{ margin:.6em 0; line-height:1.7; }
.woocommerce-Tabs-panel ul{ margin:.6em 0 .8em 1.2em; }
.woocommerce-Tabs-panel li{ margin:.35em 0; }

/* мобильный отступ/прокрутка, если табов много */
@media (max-width: 640px){
  .woocommerce-tabs .tabs{
    gap:18px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
}
/* раскладка: галерея слева, справа общий aside */
.mp-single.mp-photo{
  display:grid;
  grid-template-columns: minmax(0,1fr) 520px;
  gap:56px;
  align-items:start;
}

/* липким делаем общий контейнер с H1 + summary */
.mp-aside{
  position: sticky;
  top: 96px; /* подгони под высоту шапки */
}

/* на мобилках липкость отключаем и раскладываем столбцом */
@media (max-width:1023px){
  .mp-single.mp-photo{
    grid-template-columns: 1fr;
    gap:24px;
  }
  .mp-aside{ position: static; top:auto; }
}
@media (max-width: 640px) {
    main#primary section.related.products li.product {
        width: 100%!important;
    }
}
/* --- Desktop (как сейчас): галерея слева, справа липкий блок (H1+summary) --- */
.mp-single.mp-photo{
  display:grid;
  grid-template-columns: minmax(0,1fr) 520px;
  grid-template-areas: "gallery aside";
  gap:56px;
  align-items:start;
}
.mp-photo__gallery{ grid-area: gallery; }
.mp-aside{ grid-area: aside; position: sticky; top: 96px; } /* заголовок + summary прилипают вместе */
.mp-title{ margin: 0 0 12px; font-weight:800; line-height:1.15; font-size:46px; }
@media (max-width: 1200px){ .mp-title{ font-size:34px; } }

/* --- Mobile: H1 -> над галереей, потом галерея, потом summary --- */
@media (max-width:1023px){
  .mp-single.mp-photo{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "gallery"
      "summary";
    gap: 18px;
  }

  /* «распаковываем» обёртку, чтобы её дочерние элементы стали grid-элементами */
  .mp-aside{
    display: contents;         /* Safari/Chrome/Firefox поддерживают */
    position: static; top:auto; /* липкость отключаем на мобилке */
  }

  /* раскладываем дочерние элементы по областям */
  .mp-title{ grid-area: title; }
  .mp-photo__gallery{ grid-area: gallery; }
  .mp-photo__summary{ grid-area: summary; }

  /* чуть компактнее типографика на мобилках */
  .mp-title{ font-size:28px; margin: 6px 0 2px; }
}