/* =========================
Tarjeta de bienvenida
========================= */


.eco-how {
  padding: 28px 18px;
  margin: 24px 0;
  background: #f8fbf6;
  border-radius: 16px;
  text-align: center;
}

.eco-how h2 {
  color: #2E7D32;
  font-size: 28px;
  margin-bottom: 10px;
}

.eco-how-intro {
  max-width: 760px;
  margin: 0 auto 24px;
  color: #444;
  font-size: 15px;
  line-height: 1.6;
}

.eco-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.eco-step {
  background: #fff;
  border: 1px solid rgba(46,125,50,0.14);
  border-radius: 14px;
  padding: 20px 16px;
  box-shadow: 0 5px 14px rgba(0,0,0,0.06);
}

.eco-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #2E7D32;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.eco-step:nth-child(2) span { background: #ff6600; }
.eco-step:nth-child(3) span { background: #1565C0; }
.eco-step:nth-child(4) span { background: #43A047; }

.eco-step h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.eco-step p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 991px) {
  .eco-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .eco-steps {
    grid-template-columns: 1fr;
  }
}

/* =========================
   ESTILO GENERAL
========================= */

body {
  background-color: #FAFAFA;
  color: #333333;
}
#wrapper {
    padding-top: 1.563rem;
    background: #ffffff;
}
h1, h2, h3, h4, h5, h6 {
    color: #333232;
}
.text-muted {
    color: #4b4b4b !important;
}
/* =========================
   HEADER
========================= */

.header-nav {
  background-color: #66BB6A;
}

.header-top {
  background-color: #ffffff;
}

.header a {
  color: white;
}
#header {
    position: relative;
    z-index: 999;
    color: #000000;
    background: #fff;
}
#block_myaccount_infos .myaccount-title a, #header a, #wrapper .breadcrumb li a, .block-contact .block-contact-title, .block-contact .navbar-toggler .material-icons, .linklist .blockcms-title a {
    color: #000000;
}

#header a:hover {
    color: #ffffff;
      font-weight: bold;
}

#header .header-top {
    padding: 0.25rem 0;
}
#wrapper {
    padding-top: 0.563rem;
    background: #fff
}
.block-categories {
    padding: 0.563rem 1.25rem;
    margin-bottom: 0.563rem;
    background: #fff
}
#search_filters,#search_filters_brands,#search_filters_suppliers {
    padding: 0.563rem 1.25rem;
    margin-bottom: 0.563rem;
    background: #ed69245e;
}
.header-top .search-widgets form input[type=text] {
    width: 100%;
    min-width: inherit;
    color: #4cbb6c;
    background: #f6f6f6
}
/* =========================
   BOTONES
========================= */

.btn-primary {
  background-color: #F57C00;
  border-color: #F57C00;
}

.btn-primary:hover {
  background-color: #FFA726;
  border-color: #FFA726;
}
#header .header-top a[data-depth="0"] {
    color: #2E7D32;
    text-transform: uppercase;
}
#header .top-menu a[data-depth="0"]:hover, a:hover {
    color: #1E88E5;
    text-decoration: none;
}
/* =========================
   ENLACES
========================= */

a {  color: #2E7D32;
}

a:hover {
  color: #66BB6A;
}

/* =========================
   PRECIOS
========================= */

.price {
  color: #F57C00;
  font-weight: bold;
}
.product-prices .tax-shipping-delivery-label {
    font-size: .8125rem;
    color: #67bc6f;
    word-wrap: break-word;
    display: grid;
}
.product-prices .tax-shipping-delivery-label .delivery-information {
    padding: 0 0 0 2px;
    font-weight: 700;
    color: #ef7625;
}
.product-prices .tax-shipping-delivery-label {
    font-size: .8125rem;
    color: #000000;
    word-wrap: break-word;
    display: grid;
}
/* =========================
   PRODUCTO
========================= */
.product-description{
    font-size: .8375rem;
    font-weight: 400;
    color: #000;
}
.product-tabs-row {
  margin-top: 2rem;
}

.product-tabs-wrapper {
  width: 100%;
}

.product-tabs-wrapper .tabs {
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
}
.page-content.page-cms ul,p {
    font-size: .8375rem;
    font-weight: 400;
    color: #000;
}
.tabs .nav-tabs .nav-link {
    color: #355c1a;
    border: 0 solid #fff0
}
.tabs .nav-tabs .nav-link.active,.tabs .nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: #f57c00 3px solid;
}
.page-content.page-cms ul,p {
    font-size: .8375rem;
    font-weight: 400;
    color: #000
}
#wrapper .breadcrumb li a {
    color: #7a7a7a!important;
    font-size: 10px;
}
#wrapper .breadcrumb li:last-child {
    margin: 0;
    color: #7a7a7a;
    content: "/";
    font-size: 10px;
}
.product-flags li.product-flag {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: .3125rem .4375rem;
    margin-top: .625rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    word-break: break-word;
    pointer-events: auto;
    background: #72a118d1;
    border-radius: 9px;
    border: 1px solid #fff0;
    box-shadow: 0 5px 6px rgb(0 0 0 / 40%);
}
.product-flags li.product-flag.discount,.product-flags li.product-flag.discount-amount,.product-flags li.product-flag.discount-percentage {
    background-color: #ff6f28cf;
}
.product-miniature .product-flags li.product-flag.online-only {
    top: 13.1rem;
    background: #0e457ce3;
}
/* BOToN AñADIR AL CARRITO */
.btn-primary,
.add-to-cart,
button[data-button-action="add-to-cart"] {

  background: #2E7D32;
  color: #fff;
  border: none;

  padding: 12px 20px;
  border-radius: 8px;

  font-weight: 600;
  font-size: 15px;

  cursor: pointer;

  transition: all 0.2s ease;

  /* Volumen */
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* HOVER */
.btn-primary:hover,
.add-to-cart:hover,
button[data-button-action="add-to-cart"]:hover {

  background: #388E3C;

  /* efecto levantar */
  transform: translateY(-2px);

  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* CLICK (muy importante para sensaci贸n real) */
.btn-primary:active,
.add-to-cart:active,
button[data-button-action="add-to-cart"]:active {

  transform: translateY(1px);

  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* FOCUS (accesibilidad + efecto pro) */
.btn-primary:focus,
.add-to-cart:focus,
button[data-button-action="add-to-cart"]:focus {

  outline: none;
  box-shadow: 0 0 0 3px rgba(46,125,50,0.3);
}
/* =========================
   MENU
========================= */

#top-menu a {
  color: #ed6924;
}

#top-menu a:hover {
  color: #ffa726;
}
#wrapper .breadcrumb li a {
    color: #7a7a7a !important;
}
.breadcrumb{
    color: #7a7a7a !important;
}
#mobile_top_menu_wrapper .top-menu .sub-menu li>a {
    padding: .625rem;
    font-weight: 600;
    border-bottom: 1px solid #67bc6f;
}
#mobile_top_menu_wrapper .js-top-menu-bottom a,.dropdown,body#checkout section.checkout-step small {
    color: #105090;
}
.hidden-md-up.text-sm-center.mobile {
  background: #fff;
  border-bottom: 2px solid #2E7D32;
  padding: 10px 0;
}
@media (max-width: 767px) {
  #left-column {
    display: none !important;
  }

  #content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
#search_widget form {
        width: 115px;
        padding: 9px 8px 5px 13px;
        outline: none;
        background-color: rgb(0 0 0 / 8%);
        border: none;
        border-radius: 5px;
        font-size: .75rem;
        position: relative;
        margin-top: -43px;
        margin-left: 67px;
    }
#search_widget form input {
        width: 115px;
        padding: 9px 8px 5px 13px;
        outline: none;
        background-color: rgb(0 0 0 / 8%);
        border: none;
        border-radius: 5px;
        font-size: .75rem;
        position: fixed;
        margin-top: -43px;
        margin-left: 67px;
    }
/* =========================
   FOOTER
========================= */

.footer-container {
    background-color: #bdcd8e;
    color: #fff
}
.footer-container li a Specificity: (0,1,2) {
    font-size: .875rem;
    color: #ffffff;
    font-weight: 200;
}
.block-contact,.footer-container li a {
    font-size: .775rem;
    color: #ffffff;
    font-weight: 200;
}
.account-list a:hover,.block_newsletter form button[type=submit] .search:hover,.footer-container li a:hover {
    color: #000
}
/* =========================
   BANDERAS
========================= */
.product-flags li.product-flag.online-only::before {
  content: none !important;
  display: none !important;
}
.product-miniature .product-flags li.product-flag.online-only {
    top: 13.1rem;
    background: #0e457c;
}
/* =========================
   MODULO TRANSFERENCIA BANCARIA
========================= */
.eco-bank-transfer {
  background: #fafdf8;
  border: 1px solid #dfe5d8;
  border-radius: 10px;
  padding: 15px;
}

.eco-bank-transfer dt {
  font-weight: 700;
  margin-top: 10px;
}

.button-eco-bank-transfer {
  margin-left: 1px;
  padding: 6px 12px;
  font-size: 9px;
  display: block;
  background: #ed8040;
  color: #000;
}
/* =========================
   RESOLUCIONES ASPECTO
========================= */
@media (max-width: 1199px) {
    .navbar-toggleable-lg .navbar-brand {
        display:block;
        float: none;
        margin-top: .5rem;
        margin-right: 0
    }

    .navbar-toggleable-lg .navbar-nav {
        margin-top: .5rem;
        margin-bottom: .5rem
    }

    .navbar-toggleable-lg .navbar-nav .dropdown-menu {
        position: static;
        float: none
    }

    .hidden-lg-down {
        display: none!important
    }

    .carousel .carousel-inner {
        height: auto
    }
}
/* =========================
   RESOLUCIONES Y ASPECTO MOVIL
========================= */
#mobile_top_menu_wrapper .top-menu .sub-menu li>a
Specificity: (1,2,2)
 {
    padding: .625rem;
    font-weight: 600;
    border-bottom: 1px solid #000000;
}

@media (min-width: 768px) {
  #search_widget {

  }
}
.header-top #search_widget input {
        width: 92px;
        padding: 9px 8px 5px 13px;
        outline: none;
        background-color: rgb(0 0 0 / 8%);
        border: none;
        border-radius: 5px;
        font-size: .75rem;
        position: fixed;
        margin-top: 0px;
        margin-left: 0px;
    }
#search_widget form input {
        width: 209px;
        padding: 10px 27px 5px 30px;
        outline: none;
        background-color: #f1f1f1;
        border: none;
        border-radius: 5px;
        font-size: 0.85rem;
        position: fixed;
        margin-top: -42px;
        margin-left: 102px;
    }
    /* BOTONES ECO COMPRA GRUPAL - ACCESO RESTRINGIDO */
.btn-eco {
  display: inline-block;
  margin: 8px;
  padding: 12px 22px;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;

  box-shadow: 0 6px 0 rgba(0,0,0,0.2);
  transform: translateY(0);
  transition: all 0.15s ease;
}

.btn-eco:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px rgba(0,0,0,0.25);
  filter: brightness(1.1);
}

.btn-eco:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

/* Colores */
.btn-orange { background:#ff6600; }
.btn-blue   { background:#0000ff; }
.btn-green  { background:#25D366; }
/* BOTONES PÁGINA ACCESO RESTRINGIDO */
#content.page-restricted a.btn-eco {
  display: inline-block !important;
  margin: 8px !important;
  padding: 12px 22px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: 0 6px 0 rgba(0,0,0,0.22) !important;
  transform: translateY(0);
  transition: all 0.15s ease;
}

#content.page-restricted a.btn-eco:hover {
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.25) !important;
  filter: brightness(1.1);
}

#content.page-restricted a.btn-eco:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0,0,0,0.22) !important;
}

#content.page-restricted a.btn-orange {
  background: linear-gradient(180deg, #ff7a1a, #ff6600) !important;
}

#content.page-restricted a.btn-blue {
  background: linear-gradient(180deg, #1a1aff, #0000ff) !important;
}

#content.page-restricted a.btn-green {
  background: linear-gradient(180deg, #2fe070, #25D366) !important;
}

.card {
    position: relative;
    display: contents;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid rgb(0 0 0 / .125)
}
/* =========================
   CORRECCIONES FINALES ECO
========================= */

/* Evita que las tarjetas de subcategoría se rompan por .card { display: contents; } */
#subcategories.card {
  display: block !important;
}

/* =========================
   SUBCATEGORÍAS COMPACTAS
========================= */

#subcategories {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
}

#subcategories .subcategory-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ff6600 !important;
  margin: 0 0 12px 0 !important;
}

/* Lista adaptativa */
#subcategories .subcategories-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
}

/* Cada subcategoría */
#subcategories .subcategories-list li {
  width: auto !important;
  max-width: none !important;
  flex: 0 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

/* Ocultar imágenes */
#subcategories .subcategory-image,
#subcategories picture,
#subcategories img {
  display: none !important;
}

/* Ocultar descripciones */
#subcategories .cat_desc {
  display: none !important;
}

/* Quitar estilos del título interno */
#subcategories h5 {
  margin: 0 !important;
  padding: 0 !important;
}

/* Botón sutil */
#subcategories .subcategory-name {
  display: inline-block !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(46, 125, 50, 0.20) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2E7D32 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
  transition: all 0.15s ease !important;
}

/* Hover */
#subcategories .subcategory-name:hover {
  color: #ff6600 !important;
  border-color: rgba(255, 102, 0, 0.35) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10) !important;
  transform: translateY(-1px) !important;
}

/* Click */
#subcategories .subcategory-name:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* Móvil */

  #subcategories .subcategories-list {
    gap: 6px !important;

}
  #subcategories .subcategory-name {
    padding: 7px 11px !important;
    font-size: 13px !important;
  }

/* FORZAR ALINEACIÓN IZQUIERDA SUBCATEGORÍAS */
#subcategories,
#subcategories .subcategories-list,
#subcategories .subcategories-list li {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* =========================
   SUBCATEGORÍAS - TEMA GLOBAL
========================= */

#subcategories ul {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: left;
}

#subcategories .subcategory-image,
#subcategories picture,
#subcategories img {
  display: none !important;
}

#subcategories .cat_desc {
  display: none !important;
}

#subcategories .subcategory-name {
  display: inline-block !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(46, 125, 50, 0.20) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #2E7D32 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

#subcategories .subcategory-name:hover {
  color: #ff6600 !important;
  border-color: rgba(255, 102, 0, 0.35) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.10) !important;
}
#subcategories ul li .subcategory-image a {
    display: none;
}
