/* ===== MeneroSyn • Woo (isolated, stable) ===== */
.msshop{
  --bg:#0b0f12; --surface:#101418; --elev:#0f1519;
  --text:#eaf1f4; --muted:#a8b6bf;
  --line:#1a262d; --line-2:#22323a;
  --accent:#06d6b6; --accent-2:#1aa4ff; --ink:#062e2a;
  --ring:rgba(6,214,182,.35); --shadow:0 10px 30px rgba(0,0,0,.35);
  --gutter:32px;           /* відступ між картками */
  --col-min:340px;         /* мінімальна ширина картки */
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(26,164,255,.06), transparent 60%),
    radial-gradient(1200px 600px at 90% 110%, rgba(6,214,182,.07), transparent 55%),
    var(--bg);
}

/* Контейнер і хедер */
.msshop .ms-wrap{width:min(1400px,96vw);margin:0 auto;padding:28px 22px;}
.msshop .ms-shop-head{border-bottom:1px solid var(--line);}
.msshop .ms-h1{font:800 2rem/1.2 ui-sans-serif,system-ui;margin:0;}
.is-msshop .elementor-section.elementor-section-boxed>.elementor-container,
.is-msshop .site-main,.is-msshop .content-area{max-width:none!important}

/* Лейаут сторінки */
.msshop .ms-shop__grid{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
@media (max-width:980px){.msshop .ms-shop__grid{grid-template-columns:1fr}}

/* Сайдбар */
.msshop .ms-sidebox{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.msshop .ms-sidebox+.ms-sidebox{margin-top:16px}
.msshop .ms-sidebox__title{font:800 1.05rem/1.1 ui-sans-serif;margin:0 0 .9rem}

/* Тулбар */
.msshop .ms-toolbar{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:16px;padding:10px 12px;margin:4px 0 18px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.msshop .ms-result{color:var(--muted);font-weight:600;white-space:nowrap}
.msshop .woocommerce-ordering select,.msshop .ms-perpage select{appearance:none;background:var(--elev);color:var(--text);border:1px solid var(--line);border-radius:12px;min-width:140px;padding:.55rem 2.2rem .55rem .8rem}
.msshop .woocommerce-result-count,.msshop form.woocommerce-ordering{display:none!important}

/* === ГРІД ПРОДУКТІВ (стабільні відступи) === */
.msshop .ms-shop__content ul.products{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(var(--col-min),1fr))!important;
  gap:var(--gutter)!important;
  padding:0!important;margin:0!important;list-style:none;
}
.msshop .ms-shop__content ul.products li.product{
  float:none!important;width:auto!important;max-width:none!important;margin:0!important;clear:none!important;
  box-sizing:border-box!important;
}

/* === КАРТКА ПОСТЕР === */
.msshop .woocommerce ul.products li.product,
.msshop .ms-card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .22s,border-color .22s,box-shadow .22s;
  display:flex;flex-direction:column;
}
.msshop .woocommerce ul.products li.product:hover,
.msshop .ms-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 0 0 3px var(--ring),0 8px 22px rgba(0,0,0,.28)}

/* ▸ ФІКС ЗОБРАЖЕНЬ: співвідношення задає контейнер, фото не роз’їжджається */
.msshop .ms-card__media,
.msshop .woocommerce ul.products li.product a:first-child{
  display:block; width:100%; aspect-ratio:4/5; /* задаємо пропорцію саме контейнеру */
  overflow:hidden; background:#0a0d10;
}
.msshop .ms-card__media img,
.msshop .woocommerce ul.products li.product a:first-child img{
  display:block; width:100% !important; height:100% !important; max-width:100% !important;
  object-fit:cover; object-position:center;
}

/* Нижня панель */
.msshop .ms-card__footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.28)),#11171c;border-top:1px solid var(--line)}
.msshop .woocommerce ul.products li.product .woocommerce-loop-product__title,
.msshop .ms-card__title{font:800 .98rem/1.15 ui-sans-serif;margin:0 0 6px;color:var(--text)}
.msshop .woocommerce ul.products li.product .price,
.msshop .ms-card__info .price{display:block;font-weight:800;margin:0;color:var(--text);opacity:.9}

/* Кнопка */
.msshop .woocommerce ul.products li.product .button,
.msshop .ms-card__cta .button{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  padding:.6rem 1rem;border-radius:12px;border:1px solid transparent;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));color:var(--ink);font-weight:800;
  transition:transform .15s,filter .15s,box-shadow .15s;margin:0;
}
.msshop .woocommerce ul.products li.product .button:hover,
.msshop .ms-card__cta .button:hover{filter:brightness(.95);box-shadow:0 8px 20px rgba(6,214,182,.25);transform:translateY(-1px)}

/* Бейджі */
.msshop .woocommerce ul.products li.product .onsale{top:12px;left:12px;right:auto;background:linear-gradient(90deg,#ffbd66,#ff9b3d);color:#200;border-radius:10px;padding:.35rem .5rem;font-weight:800;box-shadow:var(--shadow)}

/* Пагінація */
.msshop .woocommerce nav.woocommerce-pagination ul{border-color:var(--line)}
.msshop .woocommerce nav.woocommerce-pagination ul li a,
.msshop .woocommerce nav.woocommerce-pagination ul li span{background:var(--surface);border-color:var(--line);color:var(--text);border-radius:12px}
.msshop .woocommerce nav.woocommerce-pagination ul li a:hover,
.msshop .woocommerce nav.woocommerce-pagination ul li span.current{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}

/* Адаптив */
@media (min-width:1280px){ .msshop{--gutter:36px;--col-min:360px} }
@media (max-width:480px){ .msshop .ms-card__footer{grid-template-columns:1fr} }

/* ==== HARD FIX: медіа-контейнер і зображення у будь-якій розмітці ==== */

/* 1) Контейнер медіа: або наш .ms-card__media, або стандартний Woo лінк */
.msshop .ms-card__media,
.msshop .woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:block !important;
  width:100% !important;
  aspect-ratio: 4 / 5 !important;    /* зміни на 3 / 4, якщо хочеш іншу пропорцію */
  overflow:hidden !important;
  background:#0a0d10;
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}

/* 2) Саме зображення — заповнює контейнер і не тягне його */
.msshop .ms-card__media img,
.msshop .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:0 !important;
}

/* 3) Скинути сторонні стилі, що ламають висоту/ширину зображення */
.msshop .woocommerce ul.products li.product img{
  width:100% !important;
  height:auto !important;            /* базово */
}
.msshop .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
  height:100% !important;            /* у нашому контейнері — 100% */
}

/* 4) Сама картка не має внутрішніх падінгів над медіа (щоб не було стрибків) */
.msshop .woocommerce ul.products li.product,
.msshop .ms-card{
  padding:0 !important;
}

/* ===== 2 товари в ряд + стабільні зображення ===== */

/* Центруємо сам контент магазину і обмежуємо ширину,
   щоб 2 колонки не ставали гігантськими на ultra-wide */
.msshop .ms-shop__content{
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

/* РІВНО 2 КОЛОНКИ (на мобільних — 1) */
.msshop .ms-shop__content ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 28px !important;
  row-gap: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 700px){
  .msshop .ms-shop__content ul.products{
    grid-template-columns: 1fr !important;
  }
}

/* Повністю глушимо старі флоути/ширини теми */
.msshop .ms-shop__content ul.products li.product{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  max-width: none !important;
  clear: none !important;
  box-sizing: border-box !important;
}

/* ---- Фікс пропорції зображення (4:5) — працює навіть зі стандартною розміткою Woo ---- */
/* Контейнер медіа: посилання з прев’ю або наш .ms-card__media */
.msshop ul.products li.product a.woocommerce-LoopProduct-link,
.msshop .ms-card__media{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* Створюємо «паддінг-бокс» 4:5 (висота = 125% від ширини) */
.msshop ul.products li.product a.woocommerce-LoopProduct-link::before,
.msshop .ms-card__media::before{
  content: "";
  display: block;
  padding-top: 125%; /* 4:5 */
}

/* Фото займає весь бокс, не тягне картку */
.msshop ul.products li.product a.woocommerce-LoopProduct-link img,
.msshop .ms-card__media img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Низ картки (щоб кнопка/ціна не злипались) */
.msshop .woocommerce ul.products li.product .woocommerce-loop-product__title{ margin: 10px 14px 6px !important; }
.msshop .woocommerce ul.products li.product .price{ margin: 0 14px 10px !important; }
.msshop .woocommerce ul.products li.product .button{ margin: 0 14px 16px !important; }

/* FIX: не займай першу клітинку гріда службовими псевдоелементами */
.msshop .ms-shop__content ul.products::before,
.msshop .ms-shop__content ul.products::after {
  content: none !important;
  display: none !important;
}

/* на всяк випадок глушимо службові li/clearfix усередині списку */
.msshop .ms-shop__content ul.products > li.clear,
.msshop .ms-shop__content ul.products > li.clr {
  display: none !important;
}
/* показати сортування у нашому тулбарі */
.msshop .ms-ordering form.woocommerce-ordering{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
}
/* ==== Toolbar: ordering + per-page в один ряд ==== */
.msshop .ms-toolbar__right{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* не дозволяємо формам займати 100% ширини/йти блоком */
.msshop .ms-toolbar__right .ms-ordering,
.msshop .ms-toolbar__right .ms-perpage{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* самі форми теж інлайн */
.msshop .ms-ordering form.woocommerce-ordering,
.msshop .ms-perpage{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
}

/* селекти — автоширина, без фул-віду */
.msshop .ms-ordering select,
.msshop .ms-perpage select{
  width: auto !important;
  min-width: 160px !important; /* підкрути за смаком */
}

/* на дуже вузьких екранах дозволимо перенос у два рядки */
@media (max-width: 520px){
  .msshop .ms-toolbar__right{ flex-wrap: wrap !important; row-gap: 8px !important; }
}
/* === FINAL: вирівнюємо "Latest" і "Show N" на одній лінії === */
.msshop .ms-toolbar__right{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}

/* прибираємо будь-які зовнішні відступи у форм */
.msshop .ms-toolbar__right .ms-ordering,
.msshop .ms-toolbar__right .ms-perpage,
.msshop .ms-toolbar__right .ms-ordering form,
.msshop .ms-toolbar__right .ms-perpage{ 
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  max-width:none !important;
  white-space:nowrap !important;
}

/* на вузьких екранах дозволяємо перенос */
@media (max-width:520px){
  .msshop .ms-toolbar__right{ flex-wrap:wrap !important; row-gap:8px !important; }
}

/* м’який лоадер */
.msshop .ms-shop__content.is-loading{
  position: relative;
  opacity: .65;
  transition: opacity .15s ease;
}
.msshop .ms-shop__content.is-loading::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120px 120px at 50% 40%, rgba(255,255,255,.08), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,.03) 12px 24px);
  border-radius: 16px;
  pointer-events:none;
}

/* ===== MS Widget: Product Categories ===== */
.msshop .ms-widget-cats .ms-cats{ list-style:none; margin:0; padding:0; }
.msshop .ms-widget-cats .ms-cats__item{ margin:0 0 .55rem; }

.msshop .ms-widget-cats .ms-cats__link{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; text-decoration:none;
  padding:.6rem .8rem;
  color:var(--text);
  background: rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:12px;
  transition:.18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.msshop .ms-widget-cats .ms-cats__item.is-active > .ms-cats__link{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

.msshop .ms-widget-cats .ms-cats__link:hover{
  border-color: var(--accent);
  background: rgba(6,214,182,.08);
}

.msshop .ms-widget-cats .ms-cats__name{
  font-weight: 700;
  line-height: 1.2;
}
.msshop .ms-widget-cats .ms-cats__count{
  font-weight: 800;
  font-size:.85rem;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  padding:.15rem .45rem;
  border-radius: 8px;
  min-width: 2.1rem;
  text-align: center;
}

/* дитячий список */
.msshop .ms-widget-cats .ms-cats--child{ margin:.5rem 0 0 .5rem; }
.msshop .ms-widget-cats .ms-cats--child .ms-cats__link{
  background: rgba(255,255,255,.015);
  border-style: dashed;
}