/* =====================================================================
   BIOCASCA — folha de tema
   ---------------------------------------------------------------------
   Carregada DEPOIS do CSS do template. Só muda aparência: nenhum
   ficheiro .asp muda de estrutura.

   PARA DESLIGAR: apagar a linha que a carrega no header.asp e o site
   volta exatamente ao aspeto anterior.

   O laranja do logótipo passa a ser a cor de ação (botões, preços,
   links). O castanho da barra sai.
   ===================================================================== */

:root{
  /* Laranja do logótipo, tirado do próprio ficheiro: #f15000.
     Antes estava #e8622a, um valor aproximado a olho - ficava mais
     apagado e mais rosado do que a chama do logo. */
  --bc-laranja:      #f15000;   /* chama do logótipo */
  --bc-laranja-esc:  #c53f00;
  --bc-laranja-claro:#fff3ec;

  --bc-tinta:   #1b1f23;   /* texto principal */
  --bc-tinta2:  #5c666f;   /* texto secundário */
  --bc-tinta3:  #8b949e;   /* texto ténue */
  --bc-linha:   #e8ebee;
  --bc-fundo:   #ffffff;
  --bc-fundo2:  #f7f8f9;   /* fundos suaves */

  --bc-r:  10px;           /* raio dos cantos */
  --bc-r-s: 6px;
  --bc-sombra:   0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --bc-sombra-h: 0 8px 24px rgba(16,24,40,.10);
  --bc-transicao: .18s ease;
}

/* ---------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------- */
body{
  color: var(--bc-tinta);
  background: var(--bc-fundo);
  -webkit-font-smoothing: antialiased;
}
a{ transition: color var(--bc-transicao); }
a:hover{ color: var(--bc-laranja); }

h1,h2,h3,h4,h5{ color: var(--bc-tinta); letter-spacing:-.01em; }

/* ---------------------------------------------------------------------
   BARRA DE TOPO  (era castanho escuro)
   --------------------------------------------------------------------- */
.header-top{
  background: var(--bc-fundo2) !important;
  border-bottom: 1px solid var(--bc-linha);
  color: var(--bc-tinta2);
}
.header-top a,
.header-top h6,
.header-top .telephone{ color: var(--bc-tinta2) !important; font-weight:500; }
.header-top a:hover{ color: var(--bc-laranja) !important; }
.header-top .social-icon{ color: var(--bc-tinta3) !important; }
.header-top .social-icon:hover{ color: var(--bc-laranja) !important; }
.header-top .separator{ background: var(--bc-linha); }

/* ---------------------------------------------------------------------
   ZONA DO LOGÓTIPO
   --------------------------------------------------------------------- */
.header-middle{
  background: var(--bc-fundo);
  padding: 6px 0;
}
.header .logo img{ transition: opacity var(--bc-transicao); }
.header .logo:hover img{ opacity:.82; }

/* pesquisa */
.header-search .form-control,
.header-search input[type=search]{
  background: var(--bc-fundo2) !important;
  border: 1px solid var(--bc-linha) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  color: var(--bc-tinta);
  box-shadow: none !important;
  transition: border-color var(--bc-transicao), background var(--bc-transicao);
}
.header-search .form-control:focus{
  background: #fff !important;
  border-color: var(--bc-laranja) !important;
}
.header-search .btn{ color: var(--bc-tinta2) !important; background: transparent !important; }
.header-search .btn:hover{ color: var(--bc-laranja) !important; }

/* ---------------------------------------------------------------------
   MENU PRINCIPAL
   O header.asp injeta um <style> com as cores dos botões, por isso aqui
   é preciso !important para o sobrepor.
   --------------------------------------------------------------------- */
.header-bottom,
.header-bottom.sticky-header{
  background: var(--bc-fundo) !important;
  border-top: 1px solid var(--bc-linha);
  border-bottom: 1px solid var(--bc-linha);
  padding: 4px 0 !important;
  box-shadow: none;
}
.header-bottom.fixed{ box-shadow: var(--bc-sombra-h); }

.main-nav .menu{ gap: 2px; }
.main-nav .menu > li{ margin-right: 2px !important; }
.main-nav .menu > li > a{
  background: transparent !important;
  color: var(--bc-tinta2) !important;
  border-radius: var(--bc-r-s) !important;
  padding: 11px 15px !important;
  font-weight: 600 !important;
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: none;
  position: relative;
  transition: background var(--bc-transicao), color var(--bc-transicao);
}
.main-nav .menu > li > a:hover,
.main-nav .menu > li.active > a,
.main-nav .menu > li:hover > a{
  background: var(--bc-laranja-claro) !important;
  color: var(--bc-laranja-esc) !important;
}
/* submenus */
.main-nav .submenu{ border:0 !important; }
.main-nav .submenu > ul,
.main-nav .menu ul{
  border: 1px solid var(--bc-linha) !important;
  border-radius: var(--bc-r) !important;
  box-shadow: var(--bc-sombra-h) !important;
  padding: 6px !important;
  background: #fff !important;
}
.main-nav .submenu li a{
  background: transparent !important;
  border-radius: var(--bc-r-s) !important;
  padding: 8px 12px !important;
  color: var(--bc-tinta2) !important;
  margin: 0 !important;
}
.main-nav .submenu li a:hover{
  background: var(--bc-fundo2) !important;
  color: var(--bc-laranja-esc) !important;
}

/* carrinho */
.cart-dropdown .cart-count{
  background: var(--bc-laranja) !important;
  border: 2px solid #fff;
  font-weight: 700;
}
.cart-dropdown > a{ color: var(--bc-tinta) !important; }
.cart-dropdown > a:hover{ color: var(--bc-laranja) !important; }
.dropdown-cart-action .btn{ border-radius: var(--bc-r-s) !important; }

/* ---------------------------------------------------------------------
   BOTÕES
   --------------------------------------------------------------------- */
.btn{
  border-radius: var(--bc-r-s) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  padding: 11px 22px;
  border-width: 1px;
  transition: all var(--bc-transicao);
  box-shadow: none;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: none; }

.btn-success,
.btn-primary,
.paction.add-cart,
.btn-product{
  background: var(--bc-laranja) !important;
  border-color: var(--bc-laranja) !important;
  color: #fff !important;
}
.btn-success:hover,
.btn-primary:hover,
.paction.add-cart:hover,
.btn-product:hover{
  background: var(--bc-laranja-esc) !important;
  border-color: var(--bc-laranja-esc) !important;
  box-shadow: 0 4px 12px rgba(232,98,42,.28);
}
.btn-warning{
  background: #fff !important;
  border-color: var(--bc-linha) !important;
  color: var(--bc-tinta) !important;
}
.btn-warning:hover{
  background: var(--bc-fundo2) !important;
  border-color: var(--bc-tinta3) !important;
}

/* ---------------------------------------------------------------------
   MIGALHAS
   --------------------------------------------------------------------- */
.breadcrumb-nav{
  background: transparent !important;
  border: 0 !important;
  padding: 18px 0 4px;
}
.breadcrumb{ background: transparent !important; padding:0 !important; margin:0 !important; }
.breadcrumb-item, .breadcrumb-item a{ color: var(--bc-tinta3) !important; font-size:13px; }
.breadcrumb-item a:hover{ color: var(--bc-laranja) !important; }
.breadcrumb-item.active{ color: var(--bc-tinta2) !important; }

/* ---------------------------------------------------------------------
   CARTÕES DE PRODUTO
   --------------------------------------------------------------------- */
.product-card,
.product-item,
.product-default{
  background: #fff;
  border: 1px solid var(--bc-linha);
  border-radius: var(--bc-r);
  overflow: hidden;
  transition: box-shadow var(--bc-transicao), transform var(--bc-transicao),
              border-color var(--bc-transicao);
}
.product-card:hover,
.product-item:hover,
.product-default:hover{
  border-color: transparent;
  box-shadow: var(--bc-sombra-h);
  transform: translateY(-3px);
}
/* Fundo das fotos de produto: branco. As fotos dos electrodomesticos
   sao recortadas em branco - um cinzento por tras dava uma moldura
   suja em volta do aparelho. */
.product-image{ background: #fff; }

.product-title,
.product-title a{
  color: var(--bc-tinta) !important;
  font-weight: 600 !important;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0;
}
.product-title a:hover{ color: var(--bc-laranja) !important; }

.product-badge{
  background: var(--bc-laranja) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  letter-spacing: .02em;
}

.product-pricing,
.price-box{ color: var(--bc-tinta); }
.product-price,
.price-box .float-left:last-child{ color: var(--bc-laranja) !important; font-weight: 700 !important; }
.old-price, .price-box s{ color: var(--bc-tinta3) !important; font-weight: 400 !important; }

/* ---------------------------------------------------------------------
   FICHA DE PRODUTO
   --------------------------------------------------------------------- */
.product-single-container{ padding-top: 8px; }
.product-single-gallery .product-single-image{ border-radius: var(--bc-r); background: #fff; }
.product-single-details h1,
.product-single-details h2{ font-size: 26px; line-height:1.25; margin-bottom: 8px; }
.product-desc, .product-desc-content{ color: var(--bc-tinta2); line-height:1.7; }

.product-single-qty .form-control,
input[type=number].horizontal-quantity{
  background: #fff !important;
  border: 1px solid var(--bc-linha) !important;
  border-radius: var(--bc-r-s) !important;
  text-align: center;
}

/* abas */
.nav-tabs{ border-bottom: 1px solid var(--bc-linha) !important; }
.nav-tabs .nav-link{
  border: 0 !important;
  color: var(--bc-tinta2) !important;
  font-weight: 600;
  padding: 12px 4px !important;
  margin-right: 26px;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
.nav-tabs .nav-link.active{
  color: var(--bc-laranja) !important;
  border-bottom-color: var(--bc-laranja) !important;
}

/* ---------------------------------------------------------------------
   FORMULÁRIOS
   --------------------------------------------------------------------- */
.form-control, select, textarea, input[type=text], input[type=email], input[type=password]{
  border: 1px solid var(--bc-linha) !important;
  border-radius: var(--bc-r-s) !important;
  padding: 10px 13px;
  color: var(--bc-tinta);
  box-shadow: none !important;
  transition: border-color var(--bc-transicao), box-shadow var(--bc-transicao);
}
.form-control:focus, select:focus, textarea:focus{
  border-color: var(--bc-laranja) !important;
  box-shadow: 0 0 0 3px rgba(232,98,42,.12) !important;
}
label{ color: var(--bc-tinta2); font-weight:600; font-size:13px; }

/* ---------------------------------------------------------------------
   TABELAS  (carrinho e listagens)
   --------------------------------------------------------------------- */
.table thead th{
  border-top: 0 !important;
  border-bottom: 1px solid var(--bc-linha) !important;
  color: var(--bc-tinta2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  padding: 12px 10px;
}
.table td{ border-color: #f1f3f5 !important; vertical-align: middle; padding: 14px 10px; }
.table-totals td{ border: 0 !important; }
.cart-summary{
  background: var(--bc-fundo2);
  border: 1px solid var(--bc-linha);
  border-radius: var(--bc-r);
  padding: 20px;
}
.cart-summary .table-totals td{ padding: 8px 4px; }

/* passos do checkout */
.checkout-progress-bar li.active span,
.checkout-progress-bar li.active:before{ background: var(--bc-laranja) !important; border-color: var(--bc-laranja) !important; }

/* ---------------------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------------------- */
.footer{
  background: var(--bc-fundo2) !important;
  border-top: 1px solid var(--bc-linha);
  color: var(--bc-tinta2);
}
.footer-middle{ padding: 46px 0 30px; }
.footer .widget-title{
  color: var(--bc-tinta) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700 !important;
  margin-bottom: 14px;
}
.footer a{ color: var(--bc-tinta2) !important; }
.footer a:hover{ color: var(--bc-laranja) !important; }
.footer-bottom{ border-top: 1px solid var(--bc-linha); }
.footer-copyright{ color: var(--bc-tinta3) !important; font-size: 12px; }
.footer .social-icon{ color: var(--bc-tinta3) !important; }
.footer .social-icon:hover{ color: var(--bc-laranja) !important; }

/* ---------------------------------------------------------------------
   BLOCOS DE INFORMAÇÃO / DESTAQUES DA HOMEPAGE
   --------------------------------------------------------------------- */
.info-box{
  background: #fff !important;
  border: 1px solid var(--bc-linha);
  border-radius: var(--bc-r);
  padding: 18px 20px;
  transition: box-shadow var(--bc-transicao), transform var(--bc-transicao);
}
.info-box:hover{ box-shadow: var(--bc-sombra-h); transform: translateY(-2px); }
.info-box h4{ font-size: 14px !important; font-weight: 600 !important; margin: 0 !important; }
.info-box i{ color: var(--bc-laranja) !important; }

.widget{ margin-bottom: 26px; }

/* imagens grandes das secções */
.main img.img-fluid,
.main img.img-responsive{ border-radius: var(--bc-r); }

/* ---------------------------------------------------------------------
   TIPOGRAFIA E ESPAÇO
   --------------------------------------------------------------------- */
.main{ padding-bottom: 20px; }
.container{ max-width: 1240px; }
p{ line-height: 1.7; }

/* alinhamentos herdados do template que ficam melhor assim */
.price-box{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.price-box .float-left{ float:none !important; }

/* ---------------------------------------------------------------------
   AJUSTES PARA ECRÃS PEQUENOS
   --------------------------------------------------------------------- */
@media (max-width: 991px){
  .main-nav .menu > li > a{ padding: 10px 12px !important; font-size: 13.5px; }
  .header-middle{ padding: 4px 0; }
  .cart-summary{ padding: 16px; }
  .product-single-details h1,
  .product-single-details h2{ font-size: 21px; }
}
@media (max-width: 575px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .btn{ padding: 11px 18px; }
}

/* ---------------------------------------------------------------------
   IMPRESSÃO
   --------------------------------------------------------------------- */
@media print{
  .header-top, .header-bottom, .footer, .breadcrumb-nav,
  .checkout-methods, .btn{ display: none !important; }
  body{ background:#fff; }
}