/* =========================================================
PUERTAS CANO · TIENDA EASYSTORE / ORBIT
========================================================= */

:root {
--cano-page-bg: #fafafa;
--cano-card-bg: #ffffff;
--cano-text: #1f2430;
--cano-muted: #6e7687;
--cano-border: #dbe1ea;
--cano-green: #2ba84a;
--cano-green-hover: #238c3e;
}

/* =========================================================
FONDO GENERAL
========================================================= */

html,
body,
.body-innerwrapper,
#sp-main-body,
#sp-component,
.sp-component-area,
main,
.page-content,
.com-easystore {
background: var(--cano-page-bg) !important;
}

/* Cabecera blanca para separarla del contenido */
#sp-header,
#sp-header.header-sticky {
background: #ffffff !important;
}

/* =========================================================
CABECERA DE PÁGINA Y BREADCRUMB
========================================================= */

.page-header,
.page-header-area,
.sp-page-title {
background: transparent !important;
}

.easystore-category-page .page-header,
.easystore-products-page .page-header {
margin-bottom: 24px;
}

.easystore-category-page .page-header h1,
.easystore-products-page .page-header h1 {
margin-bottom: 8px;
color: var(--cano-text);
font-size: 52px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
}

.breadcrumb {
margin-top: 10px;
margin-bottom: 0;
padding: 12px 16px !important;
background: #eef1f6 !important;
border-radius: 10px;
font-size: 14px;
}

/* =========================================================
BARRA SUPERIOR: BUSCADOR Y ORDENACIÓN
========================================================= */

.orbit-shop-top-filter,
.easystore-filter-container,
.easystore-toolbar,
.shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 30px;
}

.orbit-shop-top-filter .search,
.easystore-filter-container .search,
.easystore-toolbar .search {
flex: 1 1 320px;
}

.orbit-shop-top-filter input[type="search"],
.orbit-shop-top-filter input[type="text"],
.easystore-filter-container input[type="search"],
.easystore-filter-container input[type="text"],
.easystore-toolbar input[type="search"],
.easystore-toolbar input[type="text"] {
width: 100%;
height: 54px;
padding: 0 20px;
background: #ffffff !important;
border: 1px solid var(--cano-border) !important;
border-radius: 28px !important;
box-shadow: none !important;
}

.orbit-shop-top-filter select,
.easystore-filter-container select,
.easystore-toolbar select {
min-width: 220px;
height: 48px;
padding: 0 18px;
background: #e9eef7 !important;
border: 1px solid var(--cano-border) !important;
border-radius: 24px !important;
}

/* =========================================================
FILTROS LATERALES
========================================================= */

.orbit-shop-filter,
.easystore-sidebar,
.easystore-filters-sidebar {
padding-right: 20px;
background: transparent;
}

.orbit-shop-filter .filter-title,
.easystore-sidebar .filter-title,
.easystore-filters-sidebar .filter-title {
margin-bottom: 18px;
color: var(--cano-text);
font-size: 28px;
font-weight: 700;
}

.orbit-shop-filter .filter-group,
.easystore-sidebar .filter-group,
.easystore-filters-sidebar .filter-group {
margin-bottom: 22px;
padding: 0;
background: transparent;
border: 0;
}

.orbit-shop-filter ul,
.easystore-sidebar ul,
.easystore-filters-sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

.orbit-shop-filter li,
.easystore-sidebar li,
.easystore-filters-sidebar li {
margin-bottom: 12px;
}

.orbit-shop-filter a,
.easystore-sidebar a,
.easystore-filters-sidebar a {
color: var(--cano-green);
text-decoration: none;
}

.orbit-shop-filter a:hover,
.easystore-sidebar a:hover,
.easystore-filters-sidebar a:hover {
color: var(--cano-text);
}

/* =========================================================
GRID Y TARJETAS DE PRODUCTO
========================================================= */

.easystore-products,
.orbit-productlist,
.products-grid,
.shop-products {
row-gap: 34px;
}

.easystore-product-item,
.product-item,
.shop-product-item,
.orbit-productlist .product-inner {
height: 100%;
padding: 0 0 18px;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transition: transform 0.2s ease;
}

.easystore-product-item:hover,
.product-item:hover,
.shop-product-item:hover,
.orbit-productlist .product-inner:hover {
transform: translateY(-3px);
}

/* =========================================================
CAJA BLANCA DE LA IMAGEN
========================================================= */

.easystore-product-image,
.product-image,
.shop-product-image,
.orbit-productlist-thumb-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1 / 1;
margin-bottom: 18px;
padding: 22px !important;
overflow: hidden;
background: var(--cano-card-bg) !important;
border-radius: 28px !important;
box-shadow: 0 1px 3px rgba(21, 31, 53, 0.03);
}

.easystore-product-image img,
.product-image img,
.shop-product-image img,
.orbit-productlist-thumb-wrapper img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
background: transparent !important;
border-radius: 16px;
object-fit: contain;
}

/* Wishlist */
.easystore-product-item .wishlist,
.easystore-product-item .favorite,
.orbit-productlist .wishlist {
opacity: 0.7;
}

/* =========================================================
INFORMACIÓN DEL PRODUCTO
========================================================= */

.easystore-product-category,
.product-category {
display: block;
margin-bottom: 8px;
color: var(--cano-green);
font-size: 14px;
line-height: 1.3;
}

.easystore-product-title,
.product-title,
.orbit-productlist h3 {
margin-bottom: 12px;
color: var(--cano-text);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
}

.easystore-product-title a,
.product-title a,
.orbit-productlist h3 a {
color: var(--cano-text);
text-decoration: none;
}

.easystore-product-title a:hover,
.product-title a:hover,
.orbit-productlist h3 a:hover {
color: var(--cano-green);
}

.easystore-product-price,
.product-price,
.orbit-productlist .price {
margin-bottom: 16px;
color: var(--cano-text);
font-size: 22px;
font-weight: 700;
line-height: 1.1;
}

.easystore-product-price del,
.product-price del,
.orbit-productlist .price del {
margin-left: 8px;
color: #d05b6d;
font-size: 16px;
opacity: 0.8;
}

/* =========================================================
BOTONES
========================================================= */

.easystore-btn-add-to-cart,
.easystore-product-item .btn,
.product-item .btn,
.orbit-productlist .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 22px;
color: #ffffff;
background: var(--cano-green);
border: 1px solid var(--cano-green);
border-radius: 14px;
box-shadow: none;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease;
}

.easystore-btn-add-to-cart:hover,
.easystore-product-item .btn:hover,
.product-item .btn:hover,
.orbit-productlist .btn:hover {
color: #ffffff;
background: var(--cano-green-hover);
border-color: var(--cano-green-hover);
}

/* =========================================================
PAGINACIÓN
========================================================= */

.pagination {
margin-top: 40px;
}

.pagination .page-link {
margin: 0 4px;
color: var(--cano-text);
border: 1px solid #e3e8f0;
border-radius: 12px;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {
.easystore-category-page .page-header h1,
.easystore-products-page .page-header h1 {
font-size: 38px;
}

.orbit-shop-filter,
.easystore-sidebar,
.easystore-filters-sidebar {
margin-bottom: 30px;
padding-right: 0;
}

.easystore-product-image,
.product-image,
.shop-product-image,
.orbit-productlist-thumb-wrapper {
padding: 18px !important;
border-radius: 22px !important;
}

.easystore-product-price,
.product-price,
.orbit-productlist .price {
font-size: 21px;
}
}
/* =========================================================
   AJUSTE FINAL · FONDO GENERAL + TARJETAS DE PUERTAS
   ========================================================= */

/* 1) FONDO GENERAL GRIS PÁLIDO */
html,
body,
body.site,
.body-wrapper,
.body-innerwrapper,
#sp-main-body,
#sp-component,
.sp-component-area,
.main-body,
.page-content,
.site-content,
.layout-fluid,
.com-easystore,
.easystore-category-page,
.easystore-products-page {
  background: #f5f6fa !important;
}

/* El contenido interior no debe volver a pintar blanco */
#sp-main-body > .container,
#sp-main-body > .container-fluid,
#sp-component > .container,
#sp-component > .container-fluid,
.sp-component-area > .container,
.sp-component-area > .container-fluid {
  background: transparent !important;
}

/* Mantener cabecera blanca */
#sp-header,
#sp-header.header-sticky {
  background: #ffffff !important;
}

/* 2) TARJETA DEL PRODUCTO SIN FONDO */
.easystore-product-item,
.product-item,
.shop-product-item,
.orbit-productlist .product-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 18px !important;
}

/* 3) CAJA DE IMAGEN MÁS VERTICAL PARA PUERTAS */
.easystore-product-image,
.product-image,
.shop-product-image,
.orbit-productlist-thumb-wrapper {
  background: #ffffff !important;
  border-radius: 28px !important;
  aspect-ratio: 1 / 1 !important;
  min-height: unset !important;
  height: auto !important;
  padding: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
  box-shadow: 0 1px 3px rgba(21, 31, 53, 0.04) !important;
}

/* 4) HACER QUE LA PUERTA APROVECHE MÁS EL ESPACIO */
.easystore-product-image img,
.product-image img,
.shop-product-image img,
.orbit-productlist-thumb-wrapper img {
  width: auto !important;
  height: 100% !important;
  max-height: none !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* 5) SI ALGUNA IMAGEN VA ENVUELTA EN ENLACE */
.easystore-product-image a,
.product-image a,
.shop-product-image a,
.orbit-productlist-thumb-wrapper a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* 6) EN MÓVIL: CAJA UN POCO MÁS COMPACTA */
@media (max-width: 991.98px) {
  .easystore-product-image,
  .product-image,
  .shop-product-image,
  .orbit-productlist-thumb-wrapper {
    aspect-ratio: 4 / 5 !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .easystore-product-image img,
  .product-image img,
  .shop-product-image img,
  .orbit-productlist-thumb-wrapper img {
    max-width: 94% !important;
  }
}
.bg-light {
    background-color: white !important;
}