/**
 * @file
 * SZOM Coin Theme - shop-layout.css
 * Webáruház oldalak kinézete - Commerce Kickstart-inspirált
 */

/* ========================================
   WEBSHOP ALAP LAYOUT
   ======================================== */

body.path-webshop,
body.page-shop {
  background-color: #f8f6f2 !important;
}

body.path-webshop #main-wrapper,
body.page-shop #main-wrapper {
  padding: 1.5rem 0 3rem !important;
}

body.path-webshop #main,
body.page-shop #main {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
}

/* Oldalsó szűrő sáv */
body.path-webshop #sidebar_first,
body.path-webshop .sidebar_first {
  background: #fff !important;
  border-right: 2px solid #e8e0d4 !important;
  padding: 1.5rem 1rem !important;
  border-radius: 8px 0 0 8px !important;
  min-width: 240px !important;
}

/* Szűrő form */
body.path-webshop .views-exposed-form {
  padding: 0 !important;
}

body.path-webshop .views-exposed-form h2 {
  color: #d4401a !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #d4401a !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem !important;
}

body.path-webshop .block-views h2 {
  color: #d4401a !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #d4401a !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem !important;
}

body.path-webshop .form-select {
  width: 100% !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  padding: 0.4rem 0.6rem !important;
  font-size: 0.9rem !important;
  margin-bottom: 1rem !important;
}

body.path-webshop .form-select:focus {
  border-color: #008068 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,128,104,0.2) !important;
}

body.path-webshop .form-item label {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #555 !important;
  margin-bottom: 0.25rem !important;
  display: block !important;
}

body.path-webshop .form-submit,
body.path-webshop .btn-primary {
  background-color: #008068 !important;
  border-color: #008068 !important;
  color: #fff !important;
  width: 100% !important;
  padding: 0.5rem !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

body.path-webshop .form-submit:hover,
body.path-webshop .btn-primary:hover {
  background-color: #006654 !important;
  border-color: #006654 !important;
}

body.path-webshop .description {
  font-size: 0.8rem !important;
  color: #888 !important;
}

/* ========================================
   TERMÉK RÁCS
   ======================================== */

body.path-webshop .views-view-grid,
body.path-webshop .view-content .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.5rem !important;
  padding: 1rem !important;
}

@media (max-width: 768px) {
  body.path-webshop .views-view-grid,
  body.path-webshop .view-content .row {
    gap: 1rem !important;
  }
}

body.path-webshop .views-row,
body.path-webshop .views-col {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease !important;
  padding: 1rem !important;
  flex: 1 1 200px !important;
  max-width: 280px !important;
}

body.path-webshop .views-row:hover,
body.path-webshop .views-col:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* Termék képek */
body.path-webshop .views-field-field-image img,
body.path-webshop .image-style-medium {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  margin-bottom: 0.75rem !important;
}

/* Termék cím */
body.path-webshop .views-field-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3 !important;
}

body.path-webshop .views-field-title a {
  color: #333 !important;
  text-decoration: none !important;
}

body.path-webshop .views-field-title a:hover {
  color: #d4401a !important;
}

/* Termék ár */
body.path-webshop .views-field-price__number,
body.path-webshop .commerce-price {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #d4401a !important;
  margin-bottom: 0.75rem !important;
}

/* Kosárba gomb */
body.path-webshop .button--add-to-cart,
body.path-webshop .form-submit.button--primary {
  background-color: #d4401a !important;
  border-color: #d4401a !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 0.4rem 0.8rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  width: 100% !important;
}

body.path-webshop .button--add-to-cart:hover {
  background-color: #b83516 !important;
  border-color: #b83516 !important;
}

/* Lapozó */
body.path-webshop .pager {
  text-align: center !important;
  padding: 1rem 0 !important;
}

body.path-webshop .pager__item a,
body.path-webshop .pager-item a {
  color: #008068 !important;
  border: 1px solid #008068 !important;
  padding: 0.3rem 0.6rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}

body.path-webshop .pager__item a:hover {
  background: #008068 !important;
  color: #fff !important;
}

body.path-webshop .pager__item--current {
  background: #008068 !important;
  color: #fff !important;
  padding: 0.3rem 0.6rem !important;
  border-radius: 4px !important;
}

/* ========================================
   TERMÉK OLDAL (product/N)
   ======================================== */

body.path-product #main-wrapper {
  padding: 2rem 0 3rem !important;
}

body.path-product .product-title,
body.path-product h1.page-title {
  color: #1a1a1a !important;
  font-size: 1.8rem !important;
  margin-bottom: 1rem !important;
}

body.path-product .product-price,
body.path-product .field--name-price {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #d4401a !important;
  margin: 1rem 0 !important;
}

/* Termék kártya szélesség javítás */
body.path-webshop .views-col {
  width: auto !important;
  min-width: 280px !important;
  max-width: 420px !important;
  flex: 1 1 280px !important;
}