/* ── MAIN ── */
.main-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem;
}
.results-count{font-size:.875rem;color:var(--brown-l)}
.results-count strong{color:var(--terra);font-weight:600}
.sort-select{
  padding:.4rem .75rem;border:1.5px solid var(--cream-d);border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif;font-size:.875rem;background:var(--white);
  color:var(--brown);cursor:pointer;outline:none;
}
.sort-select:focus{border-color:var(--terra)}

/* Tabs categoría */
.cat-tabs{
  display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap;margin:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  /* Contiene el scroll dentro del área sin desbordarse */
  max-width:100%;
  width:100%;
  -webkit-overflow-scrolling:touch;
}
.catalog-nav-bar{
  display:flex!important;
  align-items:center!important;
  gap:.75rem!important;
  min-width:0!important;
  margin-bottom:1.25rem!important;
}
.catalog-nav-bar .sidebar-toggle-column,
.catalog-nav-bar .sort-toggle-column{
  display:flex!important;
  align-items:center!important;
  position:relative;
  top:auto;
  flex:0 0 auto;
  padding:4px 0!important;
  margin:0!important;
}
.catalog-nav-bar .filters-toggle-btn,
.catalog-nav-bar .sort-toggle-btn{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.5rem!important;
  min-height:44px!important;
  padding:0 .75rem!important;
  border:1px solid var(--cream-d)!important;
  border-radius:var(--r-pill)!important;
  background:var(--white)!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
  margin:0!important;
}
#storeSection .catalog-nav-bar .filters-toggle-btn,
#storeSection .catalog-nav-bar .sort-toggle-btn{
  color:var(--brown-m)!important;
}
#storeSection .catalog-nav-bar .filters-toggle-btn:hover,
#storeSection .catalog-nav-bar .sort-toggle-btn:hover{
  color:var(--terra)!important;
}
.catalog-nav-bar .toggle-icon{
  width:24px!important;
  height:24px!important;
  box-shadow:none!important;
  border:none!important;
  flex:0 0 24px;
}
.catalog-nav-bar .cat-tabs{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  scroll-snap-type:x proximity;
  scroll-padding-inline:.25rem;
}
.catalog-nav-bar .cat-tabs .cat-tab{
  scroll-snap-align:start;
}
.cat-tabs-more{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  gap:.4rem;
  min-height:44px;
  padding:0 .875rem;
  border:1px solid var(--cream-d);
  border-radius:var(--r-pill);
  background:var(--white);
  color:var(--terra);
  cursor:pointer;
  font:700 .8rem/1 'DM Sans',sans-serif;
  white-space:nowrap;
  transition:var(--transition);
}
.cat-tabs-more:hover,
.cat-tabs-more:focus-visible{
  border-color:var(--terra);
  box-shadow:0 4px 12px rgba(216,125,98,.12);
  outline:none;
}
.cat-tabs-more[hidden]{display:none;}
.cat-tabs-more.is-at-end svg{transform:rotate(180deg);}
.cat-tabs-more svg{transition:transform .2s ease;}
}
.main-header .sort-toggle-column{
  display:flex;
  position:relative;
  top:auto;
  margin-left:auto;
  padding:0;
}
@media(max-width:768px){
  .catalog-nav-bar{align-items:center;flex-wrap:nowrap;}
  .catalog-nav-bar .cat-tabs{min-width:0;}
  .cat-tabs-more{padding:0 .7rem;}
  .cat-tabs-more-label{display:none;}
}
@media(max-width:560px){
  .main-header{align-items:flex-start;flex-direction:column;gap:.625rem;}
  .main-header .sort-toggle-column{margin-left:0;}
}
.cat-tab{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 1rem;border-radius:var(--r-pill);
  border:1px solid var(--cream-d);
  font-size:.8rem;font-weight:700;cursor:pointer;
  background:var(--white);color:var(--brown-m);
  white-space:nowrap;transition:var(--transition);
  box-sizing:border-box;
}
#storeSection .cat-tab:hover,
#storeSection button.cat-tab:hover {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-color: #d87d62 !important;
  color: #d87d62 !important;
}
#storeSection button.cat-tab:focus,
#storeSection button.cat-tab:active,
#storeSection .cat-tab:focus,
#storeSection .cat-tab:active {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #5A3D2B !important;
  border-color: #EDE4DC !important;
  outline: none !important;
}
#storeSection .cat-tab.active,
#storeSection .o2-favorites-tab.active,
#storeSection button.cat-tab.active,
#storeSection button.cat-tab.active:hover,
#storeSection button.cat-tab.active:focus,
#storeSection button.cat-tab.active:active,
#storeSection .cat-tab.active:focus,
#storeSection .o2-favorites-tab.active:focus {
  background-color: #d87d62 !important;
  background: #d87d62 !important;
  border-color: #d87d62 !important;
  color: #ffffff !important;
  outline: none !important;
}

/* ── GRID PRODUCTOS ── */
/* ── GRID PRODUCTOS ── */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  grid-auto-rows:350px;
  gap:1.25rem;
}

/* ── FLIP CARD SYSTEM ── */
.pc-scene{
  perspective:1000px;
  cursor:pointer;
  height:100%;
}
.pc-card{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pc-scene:hover .pc-card{
  transform:rotateY(180deg);
}

/* ── CARAS SHARED ── */
.pc-face{
  position:absolute;
  inset:0;
  border-radius:var(--r);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid var(--cream-d);
  background:var(--white);
  transition:opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.pc-scene:hover .pc-face{
  box-shadow:0 12px 32px rgba(196,112,74,0.1), 0 4px 10px rgba(30,21,18,0.04);
  border-color:var(--terra);
}

/* ── FRONT FACE (Imagen, Nombre, Precio) ── */
.pc-front{
  transform:rotateY(0deg);
  z-index: 2;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 1;
  pointer-events: auto;
}
/* Evita que el frente capture eventos cuando la tarjeta está dada la vuelta */
.pc-scene:hover .pc-front {
  opacity: 0;
  pointer-events: none;
}

.pc-img-wrap{
  position:relative;
  overflow:hidden;
  background:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  flex:1 1 auto;
  min-height:0;
}
.pc-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  opacity:0.95;
  transition:transform 0.5s ease;
}
.pc-body{
  padding:0.5rem 1rem 0.75rem;
  flex:0 0 86px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:90px;
  box-sizing:border-box;
}

/* ── BACK FACE (Imagen completa + botón flotante sin tocar bordes) ── */
.pc-back{
  transform:rotateY(180deg);
  z-index: 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
  pointer-events: none; /* Desactivado por defecto */
}
/* Activamos punteros en el reverso únicamente cuando la tarjeta está rotada */
.pc-scene:hover .pc-back {
  opacity: 1;
  pointer-events: auto;
}

.pc-img-back{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--white);
  padding:2rem 2rem 4rem 2rem; /* Más espacio abajo para que no toque ni baje sobre el botón */
  box-sizing:border-box;
}
.pc-back-overlay{
  display:none; /* Quitado el degradado negro molesto */
}
.pc-quick-btn{
  position:absolute;
  bottom:1rem;
  left:1rem;
  right:1rem;
  padding:0.6rem 1rem;
  background:var(--terra);
  color:var(--white);
  border:none;
  border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif;
  font-size:0.82rem;
  font-weight:700;
  cursor:pointer;
  letter-spacing:0.03em;
  box-shadow:0 4px 12px rgba(196,112,74,0.35);
  transition:background 0.2s ease, transform 0.2s ease;
  z-index:5;
  transform:translateZ(5px); /* Empuja el botón en el eje Z para que el navegador lo detecte encima */
}
.pc-quick-btn:hover{
  background:var(--brown-d);
  transform:translateY(-1px);
}

/* Preserved utilities used by modal etc. */
.card-badge-circle{
  position:absolute;
  top:0.75rem;
  left:0.75rem;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.65rem;
  font-weight:700;
  color:var(--white);
  letter-spacing:0.5px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  text-transform:uppercase;
  z-index:2;
}
.badge-hot{background:#ea7c5b;}
.badge-vs{background:#2a9d8f;}
.wishlist-btn{
  position:absolute;
  top:0.75rem;
  right:0.75rem;
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:var(--white);
  color:var(--brown-m);
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:var(--transition);
  box-shadow:0 2px 8px rgba(30,21,18,0.08);
  z-index:10;
  padding-bottom:1px;
}
.wishlist-btn:hover{transform:scale(1.1);color:var(--terra);}
.wishlist-btn.active{color:var(--terra);font-weight:bold;}
/* Legacy classes kept for modal compatibility */
.product-card-body{padding:1.25rem;flex:1;display:flex;flex-direction:column;justify-content:space-between;}
.product-name{
  font-family:'DM Sans',sans-serif;
  font-size:0.92rem;
  font-weight:600;
  color:var(--brown-d);
  line-height:1.45;
  margin-bottom:0.5rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  height:40px;
}
.product-price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.78rem;
  color:var(--brown-l);
  font-family:'DM Sans',sans-serif;
  border-top:1px solid rgba(30,21,18,0.04);
  padding-top:0.75rem;
  margin-top:0.5rem;
}
.price-range{color:var(--terra);font-weight:700;}
.price-moq{font-weight:500;color:var(--brown-m);}

/* Skeleton loader */
.skeleton{animation:shimmer 1.5s infinite}
@keyframes shimmer{
  0%{background:var(--cream-d)}50%{background:var(--cream)}100%{background:var(--cream-d)}
}
.skel-card{
  background:var(--white);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-l);
}
.skel-img{aspect-ratio:1;background:var(--cream-d);animation:shimmer 1.5s infinite}
.skel-body{padding:1rem}
.skel-line{height:.75rem;border-radius:4px;margin-bottom:.5rem;animation:shimmer 1.5s infinite}
.skel-line.w60{width:60%}
.skel-line.w80{width:80%}
.skel-line.w40{width:40%}

/* ── PAGINACIÓN ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:2rem;flex-wrap:wrap}
.page-btn{
  padding:.4rem .875rem;border-radius:var(--r-sm);
  border:1.5px solid var(--cream-d);background:var(--white);
  font-size:.875rem;cursor:pointer;color:var(--brown-m);
  transition:var(--transition);
}
.page-btn:hover{border-color:var(--terra);color:var(--terra)}
.page-btn.active{background:var(--terra);border-color:var(--terra);color:var(--white);font-weight:600}
.page-btn:disabled{opacity:.4;cursor:default}

/* Catalog navigation owns its layout. Do not inherit sticky/positioning from
   Elementor controls or the filter drawer. */
#storeSection .main-header { position:relative; min-height:44px; }
#storeSection .main-header .sort-toggle-column { position:static !important; top:auto !important; z-index:auto !important; align-self:center; margin-left:auto !important; }
#storeSection .catalog-nav-bar { display:flex !important; align-items:center !important; min-width:0 !important; }
#storeSection .catalog-nav-bar .sidebar-toggle-column { position:static !important; top:auto !important; z-index:auto !important; }
#storeSection .catalog-nav-bar .cat-tabs { min-width:0; overflow-x:auto; mask-image:linear-gradient(to right,#000 0%,#000 92%,transparent 100%); -webkit-mask-image:linear-gradient(to right,#000 0%,#000 92%,transparent 100%); }
#storeSection .cat-tabs-more { width:44px; min-width:44px; padding:0; justify-content:center; border-color:var(--cream-d); color:var(--brown-m); background:var(--white); box-shadow:0 1px 4px rgba(30,21,18,.05); }
#storeSection button.cat-tabs-more { border-radius:999px !important; }
#storeSection .cat-tabs-more:hover,#storeSection .cat-tabs-more:focus-visible { color:var(--terra); border-color:var(--terra); background:var(--cream-l); }
#storeSection .cat-tabs-more.is-at-end { color:var(--brown-m); }

@media(max-width:768px){
  #storeSection .cat-tabs-more { min-width:44px; width:44px; padding:0; }
}