/*
Theme Name: Brezza Di Colori
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/

/* === Checkout layout – само на страницата за поръчка === */

/* 0) Премахни стария padding от предния код */
.woocommerce-checkout { padding-top: 0 !important; }

/* 1) Карта/контейнер за по-добра четимост */
.woocommerce-checkout form.checkout {
  max-width: 1200px;
  margin: 24px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  border-radius: 8px;
}

/* 2) Дай offset под sticky header (намести СЪДЪРЖАНИЕТО, не хедъра) */
:root { --rb-header-h: 90px; } /* промени на реалната височина на твоя хедър */

.woocommerce-checkout .site-main,
.woocommerce-checkout #content,
.woocommerce-checkout .content-area,
.woocommerce-checkout main {
  margin-top: var(--rb-header-h);
}

/* + admin bar offset (добавя 32/46px) */
body.admin-bar .woocommerce-checkout .site-main,
body.admin-bar .woocommerce-checkout #content,
body.admin-bar .woocommerce-checkout .content-area,
body.admin-bar .woocommerce-checkout main {
  margin-top: calc(var(--rb-header-h) + 32px);
}
@media (max-width: 782px) {
  body.admin-bar .woocommerce-checkout .site-main,
  body.admin-bar .woocommerce-checkout #content,
  body.admin-bar .woocommerce-checkout .content-area,
  body.admin-bar .woocommerce-checkout main {
    margin-top: calc(var(--rb-header-h) + 46px);
  }
}

/* 3) Sticky header – да не „реже“ текста и да има фон */
.site-header.sticky,
header.sticky,
.header.sticky {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff;
}

/* Ако имаш включен admin bar, отмести sticky header-а надолу */
body.admin-bar .site-header.sticky,
body.admin-bar header.sticky,
body.admin-bar .header.sticky { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header.sticky,
  body.admin-bar header.sticky,
  body.admin-bar .header.sticky { top: 46px; }
}

/* 4) Мобилна оптимизация */
@media (max-width: 768px) {
  .woocommerce-checkout form.checkout {
    margin: 16px 10px;
    padding: 16px;
  }
}


/* ===== WooCommerce продукти – стилизирани като карти ===== */

/* Контейнер на списъка – компенсира хоризонталните марджини */
.woocommerce ul.products {
  margin-left: -12px;
  margin-right: -12px;
}

/* Карта на продукт */
.woocommerce ul.products li.product {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  overflow: hidden;
  margin: 0 12px 24px 12px;   /* хоризонтално 12px, вертикално 24px */
  box-sizing: border-box;     /* padding влиза в ширината */
}

.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  border-color: #ddd;
}

/* Продуктово изображение */
.woocommerce ul.products li.product a img {
  aspect-ratio: 4/3; /* ако искаш квадратни снимки – смени на 1/1 */
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  transition: transform .25s;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.04);
}

/* Заглавие на продукт */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  margin: 12px 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* ограничение до 2 реда */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Цена */
.woocommerce ul.products li.product .price {
  font-weight: 700;
  font-size: 18px;
  color: #111;
}
.woocommerce ul.products li.product .price del {
  color: #888;
  font-weight: 400;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: #d72638; /* смени на цвят по твоя бранд, ако искаш */
}

/* Бутон „Добави в количката“ – наследява цвета от темата */
.woocommerce ul.products li.product .button {
  width: 100%;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight: 700;
  transition: opacity .2s, transform .15s;
}
.woocommerce ul.products li.product .button:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* Форсиране на ширините при стандартни конфигурации */
@media (min-width: 992px){
  .woocommerce ul.products.columns-3 li.product {
    width: calc(33.333% - 24px) !important; /* 24px = 12px ляв + 12px десен марджин */
  }
  .woocommerce ul.products.columns-4 li.product {
    width: calc(25% - 24px) !important;
  }
}