/* ============================================================
   ALBERCAS CED — Estilos exclusivos para productos.html
   Selector de categorías + contenedor visual del embed oficial
   de Shopify (Buy Button). Se apoya en variables y clases
   globales de css/styles.css. No duplica estilos globales.
   ============================================================ */

/* ---------- Hero de catálogo ---------- */
.catalog-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:2rem;
}

/* ---------- Tres cards de confianza (reutilizan .feature) ---------- */
.trust-grid{
  display:grid;
  gap:1.2rem;
  grid-template-columns:1fr;
}
@media(min-width:720px){
  .trust-grid{ grid-template-columns:repeat(3,1fr); }
}
.trust-grid .feature{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.4rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.trust-grid .feature:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh);
  border-color:var(--aqua);
}

/* ---------- Selector visual de categorías (tabs tipo píldora) ---------- */
.shopify-tablist-wrap{
  position:relative;
  margin-top:2.4rem;
}
.shopify-tablist-wrap::before,
.shopify-tablist-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:32px;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity .2s ease;
}
.shopify-tablist-wrap::before{
  left:0;
  background:linear-gradient(90deg, var(--mist), transparent);
}
.shopify-tablist-wrap::after{
  right:0;
  background:linear-gradient(-90deg, var(--mist), transparent);
}
@media(max-width:860px){
  .shopify-tablist-wrap::before,
  .shopify-tablist-wrap::after{ opacity:1; }
}

.shopify-tablist{
  display:flex;
  gap:.55rem;
  padding:.4rem;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.shopify-tablist::-webkit-scrollbar{ height:6px; }
.shopify-tablist::-webkit-scrollbar-thumb{
  background:var(--aqua-200);
  border-radius:999px;
}

.shopify-tab{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.62rem 1.05rem;
  border-radius:var(--r-pill);
  font-family:var(--body);
  font-weight:600;
  font-size:.92rem;
  color:var(--ink-soft);
  background:transparent;
  border:1px solid transparent;
  white-space:nowrap;
  cursor:pointer;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.shopify-tab:hover{
  color:var(--deep);
  background:var(--aqua-100);
}
.shopify-tab:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}
.shopify-tab.is-active{
  color:#fff;
  background:var(--deep);
  border-color:var(--deep);
  box-shadow:0 8px 22px -14px rgba(19,63,77,.65);
}

/* ---------- Contenedor visual del embed ---------- */
.shopify-embed-shell{
  position:relative;
  width:100%;
  max-width:100%;
  margin-top:2rem;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  padding:clamp(1rem, 3vw, 2rem);
  overflow-x:auto;
  overflow-y:visible;
}
.shopify-embed-shell::before{
  content:"";
  position:absolute;
  inset:-30% -20% auto auto;
  width:280px;
  height:280px;
  background:radial-gradient(circle, rgba(127,200,206,.18), transparent 62%);
  pointer-events:none;
  z-index:0;
}
.shopify-embed-shell > *{ position:relative; z-index:1; }

/* ---------- Paneles de categoría ---------- */
.shopify-panels{
  display:block;
  min-height:360px;
}
.shopify-category-panel{
  min-height:320px;
  animation:shopifyFade .3s ease both;
}
.shopify-category-panel[hidden]{ display:none !important; }
@keyframes shopifyFade{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .shopify-category-panel{ animation:none; }
}

.shopify-collection-node{ width:100%; }

/* ---------- Estados de carga y error ---------- */
.shopify-status{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:3rem 1.4rem;
  text-align:center;
  color:var(--ink-soft);
  font-size:1rem;
}
.shopify-status.is-loading{
  color:var(--deep);
  font-weight:600;
}
.shopify-spinner{
  display:inline-block;
  width:34px;
  height:34px;
  border-radius:50%;
  border:3px solid var(--aqua-200);
  border-top-color:var(--brand);
  animation:shopifySpin .9s linear infinite;
}
@keyframes shopifySpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .shopify-spinner{ animation-duration:2.4s; }
}

.shopify-status.is-error p{
  max-width:44ch;
  color:var(--ink);
  font-weight:600;
}
.shopify-status-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  justify-content:center;
}

/* ---------- Aviso debajo del catálogo ---------- */
.catalog-disclaimer{
  margin-top:1.4rem;
  padding:1rem 1.2rem;
  background:var(--mist);
  border:1px solid var(--line);
  border-radius:var(--r);
  font-size:.9rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.bg-mist .catalog-disclaimer{
  background:#fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .catalog-hero-actions .btn{
    width:100%;
    justify-content:center;
  }
  .shopify-tablist{
    border-radius:var(--r);
    padding:.35rem;
  }
  .shopify-tab{
    padding:.55rem .9rem;
    font-size:.88rem;
  }
  .shopify-embed-shell{
    padding:1rem;
  }
  /* Evita conflictos con stickies dentro de esta sección en móvil */
  #catalogo-shopify [style*="position:sticky"]{
    position:relative !important;
    top:auto !important;
  }
}

@media (max-width: 480px){
  .shopify-embed-shell{
    border-radius:var(--r);
    padding:.9rem;
  }
}