/* ============================================================
   04-catalog.css
   Каталог /shop, сетка товаров, карточки + счётчик + кнопка В корзину
   Грузится на /shop, категориях, страницах с шорткодом [products]
   ============================================================ */

/* ============================================================
   WOOCOMMERCE — каталог /shop
   GeneratePress нейтральная, поэтому стили работают чисто.
   ============================================================ */

.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
@media (max-width:1024px){
  .woocommerce ul.products{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width:768px){
  .woocommerce ul.products{ grid-template-columns:repeat(2, 1fr); gap:10px }
}

/* Карточка товара */
.woocommerce ul.products li.product{
  background:var(--hg-card);
  border-radius:var(--hg-radius-md);
  padding:14px;
  margin:0;
  width:auto;
  float:none;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .2s, box-shadow .2s;
  box-shadow:var(--hg-shadow-sm);
  list-style:none;
  box-sizing:border-box;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);
  box-shadow:var(--hg-shadow-md);
}

/* Картинка */
.woocommerce ul.products li.product img{
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:var(--hg-radius-sm);
  background:#fafafa;
  padding:6px;
  margin:0 0 12px 0;
  width:100%;
  height:auto;
  box-shadow:none;
}

/* Название */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3{
  font-family:'Manrope', sans-serif;
  font-size:14px;
  font-weight:700;
  padding:0;
  margin:3px 0 7px 0;
  line-height:1.3;
  color:var(--hg-ink);
  text-transform:none;
  letter-spacing:0;
}

/* Звёзды рейтинга */
.woocommerce ul.products li.product .star-rating{
  font-size:13px;
  color:var(--hg-star);
  margin:5px 0 7px 0;
  height:auto;
  width:6em;
}

/* Цена */
.woocommerce ul.products li.product .price{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:16px;
  color:var(--hg-ink);
  margin:6px 0 10px 0;
  margin-top:auto;     /* отталкивает кнопку к низу карточки */
  line-height:1.2;
}
.woocommerce ul.products li.product .price del{
  font-size:12px;
  color:var(--hg-muted);
  font-weight:400;
  font-family:'Manrope', sans-serif;
  opacity:1;
}
.woocommerce ul.products li.product .price ins{
  background:none;
  text-decoration:none;
  font-weight:700;
}

/* Sale badge -> «-N%» */
.woocommerce span.onsale{
  background:var(--hg-pink);
  color:#fff;
  font-family:'Unbounded', sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:8px;
  min-height:auto;
  min-width:auto;
  line-height:1.2;
  top:14px;
  left:14px;
  right:auto;
  margin:0;
  border:none;
  position:absolute;
  text-shadow:none;
}

/* === КНОПКА "В КОРЗИНУ" + СЧЁТЧИК НА КАРТОЧКЕ === */

.hg-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  width:100%;
  box-sizing:border-box;
}

.hg-qty-wrap{
  display:inline-flex;
  align-items:center;
  background:#FFE4F0;
  border-radius:10px;
  overflow:hidden;
  height:42px;
  flex-shrink:0;
}
.hg-qty-btn{
  width:30px;
  height:42px;
  border:none;
  background:transparent;
  font-size:18px;
  font-weight:700;
  color:var(--hg-ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Manrope', sans-serif;
  padding:0;
  line-height:1;
  flex-shrink:0;
  -webkit-appearance:none;
  appearance:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.hg-qty-btn:hover{ background:rgba(0,0,0,.07) }
.hg-qty-btn:active{ background:rgba(0,0,0,.12) }
.hg-qty-val{
  min-width:22px;
  text-align:center;
  font-family:'Unbounded', sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--hg-ink);
  line-height:1;
  user-select:none;
}

.woocommerce ul.products li.product .hg-card-actions .button,
.woocommerce ul.products li.product .hg-card-actions a.button,
.woocommerce ul.products li.product .hg-add-btn,
.woocommerce ul.products li.product .hg-select-options{
  flex:1 1 0;
  min-width:0;
  height:42px;
  background:var(--hg-lime);
  color:var(--hg-ink);
  border-radius:10px;
  padding:0 12px;
  font-family:'Manrope', sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-align:center;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-appearance:none;
  appearance:none;
  box-sizing:border-box;
  cursor:pointer;
}
.woocommerce ul.products li.product .hg-card-actions .button:hover,
.woocommerce ul.products li.product .hg-add-btn:hover,
.woocommerce ul.products li.product .hg-select-options:hover{
  background:var(--hg-lime-dark);
  color:var(--hg-ink);
}

/* МОБИЛА: счётчик и кнопка столбцом во всю ширину */
@media (max-width:768px){
  .hg-card-actions{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .hg-qty-wrap{
    width:100%;
    height:44px;
    justify-content:space-between;
  }
  .hg-qty-btn{ width:48px; height:44px; font-size:20px }
  .hg-qty-val{ flex:1; font-size:15px }
  
  .woocommerce ul.products li.product .hg-card-actions .button,
  .woocommerce ul.products li.product .hg-add-btn,
  .woocommerce ul.products li.product .hg-select-options{
    width:100%;
    height:44px;
    font-size:12px;
    padding:0 12px;
    letter-spacing:.04em;
  }
}

/* === СТАНДАРТНАЯ КНОПКА WOOCOMMERCE (без счётчика) === */
.woocommerce ul.products li.product:not(:has(.hg-card-actions)) .button,
.woocommerce ul.products li.product:not(:has(.hg-card-actions)) a.add_to_cart_button{
  background:var(--hg-lime);
  color:var(--hg-ink);
  border-radius:10px;
  padding:10px 16px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:none;
  font-family:'Manrope', sans-serif;
  text-decoration:none;
  margin-top:8px;
}
.woocommerce ul.products li.product a.added_to_cart{ display:none }
/* ============================================================
   УВЕДОМЛЕНИЯ
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:#fff;
  border-top:none;
  border-radius:var(--hg-radius-md);
  padding:16px 20px;
  box-shadow:var(--hg-shadow-sm);
  border-left:4px solid var(--hg-lime);
}
.woocommerce-info{ border-left-color:var(--hg-pink) }
.woocommerce-error{ border-left-color:#d63638 }

/* Пагинация */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  border:none;
  background:#fff;
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;
  font-family:'Unbounded', sans-serif;
  margin:0 3px;
  box-shadow:var(--hg-shadow-sm);
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--hg-ink);
  color:#fff;
}
/* Принудительно 4 колонки для shortcode products на главной */
.hg-products-grid.products,
.woocommerce ul.products.hg-products-grid{
  grid-template-columns:repeat(4, 1fr) !important;
}
@media (max-width:1024px){
  .hg-products-grid.products,
  .woocommerce ul.products.hg-products-grid{
    grid-template-columns:repeat(3, 1fr) !important;
  }
}
@media (max-width:768px){
  .hg-products-grid.products,
  .woocommerce ul.products.hg-products-grid{
    grid-template-columns:repeat(2, 1fr) !important;
  }
}

/* ============================================================
   ФИКС сетки товаров (убираем дырки от WooCommerce columns-N)
   ============================================================ */

.wp-block-shortcode .woocommerce ul.products,
.entry-content .woocommerce ul.products,
.woocommerce.columns-4 ul.products,
.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
  width:100%;
  max-width:100%;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  float:none;
  width:auto;
  margin:0;
  clear:none;
}

@media (max-width:1200px){
  .wp-block-shortcode .woocommerce ul.products,
  .entry-content .woocommerce ul.products,
  .woocommerce ul.products{
    grid-template-columns:repeat(3, 1fr);
  }
}
@media (max-width:768px){
  .wp-block-shortcode .woocommerce ul.products,
  .entry-content .woocommerce ul.products,
  .woocommerce ul.products{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
}

/* Обнуляем wc-классы columns-N */
.woocommerce.columns-1,
.woocommerce.columns-2,
.woocommerce.columns-3,
.woocommerce.columns-4,
.woocommerce.columns-5,
.woocommerce.columns-6{
  display:block;
  padding:0;
  margin:0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce::before,
.woocommerce::after{
  display:none !important;
  content:none !important;
}

.woocommerce ul.products,
.entry-content .woocommerce ul.products,
.wp-block-shortcode .woocommerce ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:14px !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  width:100% !important;
}

.woocommerce ul.products li.product,
.woocommerce ul.products > li,
.entry-content .woocommerce ul.products li.product{
  float:none !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  margin-left:0 !important;
  padding:14px !important;
  clear:none !important;
  display:flex !important;
  flex-direction:column !important;
}

@media (max-width:1200px){
  .woocommerce ul.products,
  .entry-content .woocommerce ul.products,
  .wp-block-shortcode .woocommerce ul.products{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width:768px){
  .woocommerce ul.products,
  .entry-content .woocommerce ul.products,
  .wp-block-shortcode .woocommerce ul.products{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }
}

/* ============================================================
   ФИКС: МОБИЛЬНАЯ КНОПКА "В КОРЗИНУ"
   ============================================================ */
@media (max-width:768px){
  .woocommerce ul.products li.product .hg-card-actions .hg-add-btn,
  .woocommerce ul.products li.product .hg-card-actions a.add_to_cart_button,
  .woocommerce ul.products li.product .hg-card-actions .button,
  .woocommerce ul.products li.product .hg-card-actions a.button{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;
    height:42px !important;
    min-height:42px !important;
    flex:0 0 auto !important;
    align-self:stretch !important;
    background:var(--hg-lime, #D4FF3A) !important;
    color:var(--hg-ink, #0B0B0B) !important;
    border:none !important;
    border-radius:10px !important;
    padding:0 12px !important;
    font-family:'Manrope', sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    text-align:center !important;
    text-decoration:none !important;
    line-height:1 !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    box-sizing:border-box !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    overflow:visible !important;
    white-space:nowrap !important;
  }
  
  .woocommerce ul.products li.product .hg-card-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin-top:12px !important;
  }
}
