/*########################################## 
* General css swiper products for Virtuemart 
* Design by WebDesign - sites-design.com 
* Copyright 2025 WebDesign 
* Licensed for WebDesign 
* Developer : http://www.sites-design.com 
###########################################*/    

    .swiper {width: 100%; height: 100%;}
    .swiper-slide {text-align: center; display: flex; justify-content: center; align-items: center;}
    .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;} 
	
/* ----  \\\\\\\\ ----- */
.category-products .moduletable.horizontal {max-width: 480px; margin: 20px auto 0;} 
.category-products {float: left; width: 65%; margin-left: 0.5%; margin-top: -12px; text-align: center;} 
.category-products::before {content: 'Os Mais Vendidos'; display: block; display: block; line-height: 16px; margin: 10px 0 -25px; background: #0284D1; position: relative; z-index: 2; text-align: center; font-weight: 700; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 1px;} 
.swiper.mySwiperprodutos.swiper-horizontal {padding: 0 40px;} 
.category-products .horizontal .swiper-slide {margin-bottom: 0;} 
.category-products .horizontal .swiper-slide div.spacer {margin: 0 auto; padding: 5px 2% 0; border: 1px solid #0284D1;} 
.category-products .horizontal div.titulo a {font-size: 12px !important; line-height: 1 !important; padding: 5px 0 0 !important;} 
.category-products .horizontal .imagem .img-orig, .category-products .horizontal .imagem .img-adic {height: 60px;} 
.category-products .horizontal .imagem a.modal-popup {padding: 0 !important;} 
.category-products .horizontal .imagem img, .category-products .horizontal .imagem .img-adic:hover img {max-height: 60px !important;} 
.category-products .desc, .category-products .PricediscountAmount.vm-display.vm-price-value, .category-products .PricetaxAmount.vm-display.vm-price-value {display: none;} 
.category-products .horizontal .PricesalesPrice.vm-display.vm-price-value {color: #05B388;} 
.category-products .link a {padding: 0 0 0 20px !important; font-size: 12px !important;} 
.category-products .horizontal .percentagem {left: 1px; background: rgba(7,174,135,0.5); font-size: 11px; letter-spacing: -0.5px; color: #333;} 
@media (max-width: 980px) {
  .category-products {display: none;} 
} 
/* ------------ */ 

.moduletable.horizontal {display: inline-block; width: 100%; margin: 20px 0 0; padding: 0; border: 0; border-bottom: 1px solid #218516; border-radius: 0;}   
.moduletable.horizontal.related {margin: 30px 0;} 
.moduletable.horizontal .vmheader {margin: 0;}      
.moduletable.horizontal .vmgroup.horizontal, .moduletable.horizontal .vmproduct.horizontal {margin: 0;}   
.moduletable.horizontal .vmgroup.horizontal, .moduletable.horizontal .vmproduct.horizontal {margin: 0 auto; max-width: 1520px;}   
.moduletable.horizontal h2 {background: #218516; font-weight: 200; font-family: "Open Sans", sans-serif; max-width: 1520px; color: #fff; margin: 0 auto 10px; padding: 4px 0; text-align: center; text-transform: uppercase; letter-spacing: 1px;}  
.moduletable.horizontal .swiper-wrapper {border-bottom: 0; padding: 0;}   
.product-relacionados .swiper.mySwiper.swiper-initialized.swiper-horizontal {border-bottom: 0;} 
  /* ----  -- ----- */

.horizontal .swiper-slide {margin-bottom: 10px;} 
.horizontal .swiper-slide div.spacer {background: #fff; width: 100%; margin: 5px auto; padding: 5px 2% 4px; border: 1px solid #ddd;}    
.horizontal .span3.product-field.product-field-type-M, .vmgroup .product-field-desc, .login-lpvp {display: none;}      
.horizontal .vm-customfields-wrap {margin: 0 0 2px; position: relative;}       
.horizontal .addtocart-area .product-fields {background: rgba(255, 255, 255, 0.85); position: relative; width: 98%; margin: -12px 1% 0;}     
.horizontal .product-fields .product-field {float: none; margin: 0; padding: 2px 0; text-align: center; width: 100%;}      

.horizontal div.spacer {background: #fff; width: 98%; height: 100%; margin: 0 auto; padding: 5px 1%; border: 1px solid #eee;}      
.horizontal div.spacer table:hover {cursor: grab;} 

  .horizontal .PricesalesPrice.vm-display.vm-price-value {font-size: 18px; color: #97CE03; font-weight: 700; margin-top: 0; position: relative; z-index: 1;} 
  .horizontal div.titulo {text-overflow: ellipsis; word-wrap: break-word; overflow: hidden; height: 36px;} 
  .horizontal .titulo a {font-size: 18px; color: #555; letter-spacing: -0.25px;} 
  .horizontal .titulo a:hover {color: #D20000; text-decoration: none;} 
  .horizontal div.imagem {display: inline-block; width: 98%; padding: 0 1% 0 0;} 
  .horizontal .imagem img {height: auto; max-width: 98% !important; max-height: 120px !important; margin: auto; width: auto;}       
  .horizontal .imagem .img-orig {background: #fff; width: 98%; height: 120px; text-align: center; margin: 0 auto;}     
  .horizontal .imagem .img-adic {background: #fff; position: absolute; left: 0; z-index: 1; width: 30%; height: 120px; margin: 0; filter: alpha(opacity=0); opacity: 0;} 
  .horizontal .imagem .img-adic:hover {filter: alpha(opacity=100);  opacity: 1;} 
  .horizontal .imagem .img-adic:hover img {max-height: 120px !important;} 
  .horizontal .imagem .img-adic img:hover {margin: auto;}  
  
.horizontal .product-price .vm-price-desc {color: #999;}
.horizontal .product-price span.PricesalesPrice {color: #777;}        
.horizontal .PricesalesPrice.vm-display.vm-price-value span.PricesalesPrice, .horizontal span.PricepriceWithoutTax, 
.horizontal span.PricepriceWithoutTax, .vmgroup.horizontal span.PricediscountedPriceWithoutTax {font-size: 16px !important; line-height: 1; font-weight: 700; margin: 2px auto;}  
.horizontal .PricediscountAmount.vm-display.vm-price-value .vm-price-desc {margin: 0 0 0 -50px;}    
.horizontal span.vm-price-desc {font-size: 12px; font-weight: 400; color: #777;}   

.horizontal .PricebasePriceWithTax.vm-display.vm-price-value {margin: 0;}    
.horizontal a.modal.notify.modal_link.cboxElement {color: #777; font-size: 12px;}   
.horizontal .product-fields .product-field {border: 0; padding: 0; border-radius: 0;}   
.horizontal .product-fields-title-wrapper strong {font-size: 12px; font-weight: 400;}  
.horizontal .product-fields-title-wrapper {display: inline;}   
.horizontal .inline-control-group {display: inline-flex !important;}    
.horizontal .PricesalesPrice.vm-display.vm-price-value {display: block; font-size: 32px; text-align: left; margin: 0; padding: 0;}
.horizontal .price-crossed div.PricebasePriceWithTax .PricebasePriceWithTax {display: none; font-size: 17px;}   

.horizontal .custom_promo {font-size: 9px; font-family: Arial;} 
.horizontal .price-crossed {position: relative; margin: 0; line-height: 1;}
.horizontal .percentagem {margin: 0; position: absolute; top: 5px; left: 5px; right: auto; z-index: 3; background: rgba(210,0,0,0.6); font-size: 12px; padding: 5px 3px; min-width: 35px; border-radius: 50%; border: 2px dotted #fff;}
.horizontal .PricediscountAmount.vm-display.vm-price-value {margin: 0;}   
.horizontal .notificar {margin-top: 2px; border: 1px solid #ddd; padding: 0 5px; text-align: center; line-height: 1;}   

.link {border: 1px solid #ddd; padding: 0 5px; text-align: center;} 
.link a {background-image: url('ico-ver.png'); background-repeat: no-repeat; background-position: left center; background-size: auto 12px; color: #218516; line-height: 18px; padding: 0 0 0 20px;} 
.link a:hover {background-image: url('ico-ver_hover.png'); color: #D20000; text-decoration: none;} 
/* ---************ --- */

.swiper-button-next, .swiper-button-prev {opacity: 0;} 
.swiper:hover .swiper-button-next, .swiper:hover .swiper-button-prev {opacity: 1;} 
.horizontal .swiper-button-next::after, .horizontal .swiper-button-prev::after {font-size: 36px; color: #777;} 
.swiper-button-next:hover, .swiper-button-prev:hover, 
.swiper-button-next:hover::after, .swiper-button-prev:hover::after {color: #D20000 !important;} 

@media (min-width: 1201px) and (max-width: 1980px) {
	.moduletable.horizontal h2 {font-size: 28px;}  
}  
	
@media (min-width: 981px) and (max-width: 1200px) {
	.moduletable.horizontal h2 {font-size: 24px;}  
} 

@media (min-width: 769px) and (max-width: 980px) {
	.moduletable.horizontal h2 {font-size: 22px; letter-spacing: 0;}  
}    
	
@media (max-width: 768px) {
	.moduletable.horizontal h2 {font-size: 20px;}  
	.horizontal .swiper-button-next::after, .horizontal .swiper-button-prev::after {font-size: 26px;} 
}      

@media (max-width: 480px) {
   .moduletable.horizontal.related {margin: 10px 0;} 
   .moduletable.horizontal {margin: 0;} 
   .horizontal .swiper-slide div.spacer {padding: 5px 1% 0;} 
   .horizontal .imagem .img-orig, .horizontal .imagem .img-adic {height: 120px;} 
   .horizontal .imagem img {max-height: 120px !important;} 
   .horizontal .desc {font-size: 12px !important; line-height: 13px !important;}
   .horizontal div.titulo {font-size: 14px !important; line-height: 17px !important; max-height: 46px; display: block;}
   .horizontal .PricesalesPrice.vm-display.vm-price-value span.PricesalesPrice, .horizontal span.PricepriceWithoutTax, 
   .horizontal span.PricepriceWithoutTax, .vmgroup.horizontal span.PricediscountedPriceWithoutTax {font-size: 15px !important; letter-spacing: -0.5px;} 
   .link a {font-size: 14px;} 
   .horizontal .swiper-button-next::after, .horizontal .swiper-button-prev::after {font-size: 24px; letter-spacing: 0;} 
}