<style>
/* ============================= */
/* VEMUTO – ZÁKLAD */
/* ============================= */


/* tlačidlá */
.btn,
.btn-cart,
.add-to-cart-button,
input[type="submit"] {
  background: #DB6416 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
}

.btn:hover,
.btn-cart:hover,
.add-to-cart-button:hover,
input[type="submit"]:hover {
  background: #9f4f2b !important;
  color: #ffffff !important;
}

/* menu */
.navigation-bar,
.navigation-bar .menu-level-1,
.header-navigation,
.main-navigation,
.navbar,
.navbar-inner {
  background-color: #2b2b2b !important;
}

.navigation-bar a,
.header-navigation a,
.main-navigation a,
.navbar a {
  color: #ffffff !important;
}

.navigation-bar a:hover,
.navigation-bar .active > a {
  color: #f0c3a8 !important;
}

/* ============================= */
/* HOMEPAGE */
/* ============================= */

homepage-content-wrapper {
  background: linear-gradient(to bottom, #fdf8f4 0%, #fdf8f4 100%) !important;
}

.homepage-box,
.box-homepage,
.section-homepage {
  padding: 80px 40px !important;
  margin: 60px 0 !important;
}

.homepage-box .container,
.box-homepage .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* ============================= */
/* PRODUKTOVÉ KARTY */
/* ============================= */

.product,
.products .product,
.products-block .product {
  background: #ffffff !important;
  border: 1px solid #eeeeee !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.04) !important;
  transition: all 0.2s ease !important;
}

.product:hover {
  box-shadow: 0 7px 18px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px);
}

.product .name,
.product .p-name {
  font-weight: 600 !important;
  color: #222 !important;
}

.product .price {
  font-weight: 700 !important;
  color: #222 !important;
}

.product .availability {
  color: #2f8f3a !important;
  font-weight: 600 !important;
}

/* ============================= */
/* VEMUTO – PRODUKT DETAIL */
/* ============================= */

.vmt-product-pro {
  max-width: 820px !important;
  margin: 0 !important;
  padding-bottom: 120px !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #222 !important;
}

/* HERO */
.vmt-hero {
  background: linear-gradient(135deg, #f3f4f5 0%, #ffffff 100%) !important;
  border: 1px solid #e6e6e6 !important;
  border-left: 3px solid #d8a184 !important;
  border-radius: 14px !important;
  padding: 26px 30px !important;
  margin-bottom: 24px !important;
}

.vmt-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: #DB6416 !important;
  text-transform: uppercase !important;
}

.vmt-hero h2 {
  font-size: 30px !important;
  line-height: 1.25 !important;
  margin: 12px 0 !important;
}

.vmt-hero p {
  color: #444 !important;
  margin: 0 !important;
}

/* predajný box */
.vmt-usecase {
  background: #fff3eb !important;
  border-left: 4px solid #DB6416 !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;
  margin: 12px 0 18px !important;
}

/* PARAMETRE BOX */
.vmt-points {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 28px !important;
}

.vmt-product-pro .vmt-points > div {
  background: #fbefe6 !important;
  border: 1px solid #edd8ca !important;
  border-radius: 14px !important;
  padding: 22px 16px !important;
  text-align: center !important;
  transition: all 0.2s ease !important;
}

.vmt-product-pro .vmt-points > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.vmt-points strong {
  display: block !important;
  font-size: 26px !important;
  color: #222 !important;
}

.vmt-points span {
  font-size: 13px !important;
  color: #666 !important;
}

/* SEKCIE */
.vmt-section {
  background: #fdf8f4 !important;
  border: 1px solid #e7e7e7 !important;
  border-radius: 14px !important;
  padding: 30px !important;
  margin-bottom: 28px !important;
}

.vmt-section h3 {
  font-size: 23px !important;
  margin: 0 0 18px !important;
}

/* BENEFITY */
.vmt-benefits {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.vmt-product-pro .vmt-benefits > div {
  background: #fbf3ed !important;
  border-radius: 14px !important;
  padding: 20px !important;
  min-height: 120px !important;
}

.vmt-benefits h4 {
  margin: 0 0 8px !important;
  font-size: 17px !important;
}

.vmt-benefits p {
  margin: 0 !important;
  color: #555 !important;
}

/* AKO SA POUŽÍVA */
.vmt-how {
  background: #fff8f3 !important;
  border: 1px solid #f0e1d6 !important;
}

.vmt-how ol {
  margin: 0 !important;
  padding-left: 22px !important;
}

.vmt-how li {
  margin-bottom: 8px !important;
}

/* TABUĽKA */
.vmt-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 8px !important;
}

.vmt-table th,
.vmt-table td {
  padding: 14px 16px !important;
  text-align: left !important;
}

.vmt-table th {
  width: 42% !important;
  background: #f1f1f1 !important;
  border-radius: 10px 0 0 10px !important;
  font-weight: 700 !important;
}

.vmt-table td {
  background: #fafafa !important;
  border-radius: 0 10px 10px 0 !important;
}

.vmt-table tr {
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}

.vmt-table tr:hover {
  transform: scale(1.01);
}

/* ÚDRŽBA */
.vmt-note {
  margin-top: 16px !important;
  font-size: 14px !important;
  color: #666 !important;
  border-top: 1px solid #ddd !important;
  padding-top: 18px !important;
}

/* SPODNÁ LEPIACA LIŠTA – nech neprekrýva obsah */
.type-product .p-detail-inner {
  padding-bottom: 140px !important;
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 768px) {
  .vmt-points,
  .vmt-benefits {
    grid-template-columns: 1fr !important;
  }

  .vmt-product-pro {
    max-width: 100% !important;
    padding-bottom: 140px !important;
  }

  .vmt-hero,
  .vmt-section {
    padding: 24px 20px !important;
  }

  .vmt-hero h2 {
    font-size: 24px !important;
  }
}
// recenzie prvok
/* Tmavší overlay na pozadí */
.ratings.five-only.content-only.ready {
  position: relative;
}

.ratings.five-only.content-only.ready::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
  pointer-events: none;
}

.ratings.five-only.content-only.ready > * {
  position: relative;
  z-index: 2;
}

/* Kartičky okolo hodnotení */
.review.five.content-yes {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Biely text v kartičkách */
.review.five.content-yes * {
  color: #ffffff !important;
}

/* Hviezdičky oranžové */
.review.five.content-yes .stars,
.review.five.content-yes [class*="star"] {
  color: #e07b2a !important;
}.review.five.content-yes {
  margin: 4px; 
}
/* Hodnotenia - pozadie a kartičky */
.ratings.five-only.content-only.ready {
  position: relative;
  padding: 60px 40px;
  overflow: hidden;
  background: url('https://www.vemuto.cz/user/documents/upload/Obrazkybannerclanky/banner-recenzie.png') center/cover no-repeat;
}
/* Nadpis recenzií */
.r-info h4 {
color: white;
}
/* Benefity */
.benefitBanner.position--benefitHomepage {
  background-color: #fff;
  padding: 20px 0;
  display: flex;
  gap: 12px;
}

.benefitBanner.position--benefitHomepage .benefitBanner__item {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: none;
  border: 1px solid #ede8e2;
  transition: box-shadow 0.2s ease;
  flex: 1;
}

.benefitBanner.position--benefitHomepage .benefitBanner__item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Telefón - 2 vedľa seba */
@media (max-width: 767px) {
  .benefitBanner.position--benefitHomepage {
    flex-wrap: wrap;
  }

  .benefitBanner.position--benefitHomepage .benefitBanner__item {
    flex: 1 1 calc(50% - 6px);
    min-width: calc(50% - 6px);
  }
}
.vm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:100%;margin:0;padding:0;list-style:none;}
.vm-card{background:#ffffff;border:1px solid #e5e2dc;border-radius:12px;overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:border-color .15s;}
.vm-card:hover{border-color:#C8622A;}
.vm-img-wrap{width:100%;padding-top:100%;position:relative;background:#EDEBE6;overflow:hidden;}
.vm-img-wrap img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
.vm-name{font-size:15px;font-weight:600;color:#1a1a1a;padding:10px 12px 12px;text-align:center;margin:0;display:block;}
@media(max-width:600px){.vm-grid{grid-template-columns:repeat(2,1fr);}}

.content-wrapper-in {
background-color: #fff;
}

.content-wrapper {
background-color: #fff;
}
.flag.flag-discount, .flag.flag-sleva {
    background-color: #DB6416 !important;
}
#footer {
background-color: #fff !important;
}
/* Benefity - 2x2 grid na landscape mobil */
@media (max-width: 900px) and (orientation: landscape) {
  .benefitBanner {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .benefitBanner__item {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}
.custom-footer__contact .container {
background-color: #fff !important;
}
.custom-footer__contact col-sm-6 col-lg-3 {
background-color: #fff !important;
}
</style>