/* Styles added by assistant: product detail / cart UI helpers */

/* Buttons */
.btn{ padding:12px 26px; border-radius:12px; font-weight:700; cursor:pointer; border:none; }
.btn-add{ background:#2e7d32; color:#fff; box-shadow:0 6px 18px rgba(46,125,50,0.14); }
.btn-buy{ background:#9c1d50; color:#fff; box-shadow:0 6px 18px rgba(156,29,80,0.14); }

/* Cart sidebar helpers */
.cart-modal-bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,0);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, background .25s ease;
  z-index:10999;
  overflow-y:auto;
  padding:10px 0; /* deja aire arriba/abajo para un scroll completo */
}
.cart-modal-bg.open{
  background:radial-gradient(circle at 75% 25%, rgba(255,214,227,0.65), rgba(24,6,16,0.65));
  opacity:1;
  pointer-events:auto;
  backdrop-filter:blur(2px);
}

body.cart-locked{
  overflow:hidden;
}

.cart-panel{
  --cart-panel-gap: -80px;
  position:fixed;
  top:0;
  right:var(--cart-panel-gap);
  width:min(600px,100vw);
  max-width:100vw;
  height:calc(100vh - 12px);
  max-height:calc(100vh - 8px); /* evita que el panel se corte y permite hacer scroll en carritos largos */
  background:#fff;
  border-radius:28px 0 0 28px;
  box-shadow:-24px 0 60px rgba(28,2,15,0.2);
  padding:36px 28px 190px;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:rgba(156,29,80,0.65) transparent;
  display:flex;
  flex-direction:column;
  gap:24px;
  scroll-padding-bottom:0;
  scrollbar-gutter:stable both-edges;
  transform:translateX(calc(100% - var(--cart-panel-offset, 0px)));
  transition:transform .36s cubic-bezier(.2,.9,.2,1);
  will-change:transform;
}
.cart-panel::-webkit-scrollbar{
  width:10px;
}
.cart-panel::-webkit-scrollbar-track{
  background:transparent;
}
.cart-panel::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#f8cfe0,#e0a1c4);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.cart-panel::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#f39ac5,#d671a4);
}
.cart-modal-bg.open .cart-panel{
  transform:translateX(calc(var(--cart-panel-offset, 0px) * -1));
}

.cart-panel__close{
  position:absolute;
  top:18px;
  right:18px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  background:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,0.12);
  color:#55102c;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.cart-panel__close:hover{background:#fdf1f6;}

.cart-panel__hero{
  background:linear-gradient(135deg, #ffe3f3 0%, #ffd7d0 45%, #fff5ec 100%);
  border-radius:22px;
  padding:20px 22px;
  color:#55102c;
  box-shadow:0 20px 45px rgba(156,29,80,0.15);
  position:relative;
  overflow:hidden;
}
.cart-panel__hero::after{
  content:'';
  position:absolute;
  inset:auto -40px -60px auto;
  width:160px;
  height:160px;
  background:rgba(255,255,255,0.4);
  filter:blur(22px);
  border-radius:50%;
}
.cart-panel__hero h3{
  margin:8px 0 6px;
  font-size:1.45rem;
  font-weight:800;
}
.cart-panel__hero p{
  margin:0;
  font-size:0.95rem;
  color:#5c1b3d;
}
.cart-panel__pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.7);
  font-size:0.85rem;
  font-weight:700;
  transform: translateY(-14px);
}
.cart-panel__status{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
}
.cart-panel__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#41b883;
  box-shadow:0 0 0 6px rgba(65,184,131,0.35);
  display:inline-block;
}

.cart-panel__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.cart-card{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:18px;
  padding:16px 18px;
  border-radius:24px;
  border:1px solid #f4e6ef;
  box-shadow:0 20px 45px rgba(26,6,15,0.08);
  background:#fff;
  align-items:center;
}
.cart-card__media{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.cart-card__media img{
  width:68px;
  height:68px;
  object-fit:contain;
  border-radius:18px;
  background:#fff;
  border:1px solid #f0e2ea;
  padding:6px;
  box-shadow:0 10px 22px rgba(0,0,0,0.05);
}
.cart-card__badge{
  font-size:0.65rem;
  text-transform:uppercase;
  color:#9c1d50;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.cart-card__info{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.cart-card__title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:#2b0f1d;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.cart-card__price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.cart-card__price{
  color:#198a31;
  font-weight:800;
  font-size:1.05rem;
}
.subtotal-span{
  color:#5b1a35;
  font-weight:600;
}
.cart-card__qty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.cart-update-form{
  display:flex;
}
.qty-control{
  display:flex;
  align-items:center;
  gap:10px;
  background:#f8eff4;
  border-radius:999px;
  padding:4px 10px;
}
.qty-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
  color:#9c1d50;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.qty-btn.cart-plus{color:#2e7d32;}
.qty-btn:disabled{opacity:0.4;cursor:not-allowed;}
.cantidad-span{
  min-width:28px;
  text-align:center;
  font-weight:700;
  color:#55102c;
}
.cart-card__note{
  font-size:0.85rem;
  color:#6d6d7d;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f7fbff;
  padding:4px 10px;
  border-radius:999px;
}
.cart-card__side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.cart-card__fav{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #f0e2ea;
  background:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,0.08);
  color:#b3a4ad;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.cart-card__fav[aria-pressed="true"]{
  color:#f1a400;
  border-color:#f9d891;
  background:#fff8e6;
}
.cart-card__remove{
  background:#ffe7ef;
  border:none;
  color:#a30037;
  font-weight:700;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease;
}
.cart-card__remove:hover{background:#ffd2e1;}

.cart-panel__summary{
  background:#faf5f8;
  border-radius:18px;
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.cart-panel__summary span{
  display:block;
  font-size:0.9rem;
  color:#6d5c63;
}
.cart-panel__summary strong{
  font-size:1.35rem;
  color:#1c8a36;
}
.cart-panel__summary p{
  margin:0;
  font-size:0.85rem;
  color:#7f6d75;
}

.cart-panel__perks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.cart-panel__perks span{
  font-size:0.83rem;
  background:#f6f6fb;
  border-radius:12px;
  padding:6px 10px;
  color:#5c5164;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.cart-panel__cta{
  display:flex;
  flex-direction:column;
  width: 94%;
  gap:12px;
  position:static;
  bottom:auto;
  padding-bottom:0;
  margin-top:16px;
  background:none;
  backdrop-filter:none;
  z-index:auto;
}

.cart-empty{
  background:linear-gradient(145deg,#fff3f7,#f7fbff);
  border-radius:26px;
  text-align:center;
  padding:60px 30px;
  box-shadow:0 30px 60px rgba(0,0,0,0.08);
  color:#7d5c6c;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.cart-empty__icon{
  font-size:2.6rem;
}
.cart-empty h4{
  margin:0;
  font-size:1.25rem;
  color:#55102c;
}
.cart-empty p{
  margin:0 0 6px;
  font-size:0.95rem;
}

@media (max-width: 520px){
  .cart-panel{
    border-radius:0;
    width:100%;
  }
  .cart-card{
    grid-template-columns:1fr;
    text-align:left;
  }
  .cart-card__side{
    flex-direction:row;
    justify-content:flex-end;
  }
}

/* Thumbs */
.thumb-gallery img.selected{ border-color:#388e3c; box-shadow:0 6px 16px rgba(56,142,60,0.12); }

/* Toast */
.toast-ctl{ position:fixed; right:18px; bottom:18px; z-index:12000; display:flex; flex-direction:column; gap:8px; }
.toast{ background:#111; color:#fff; padding:10px 14px; border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,0.14); opacity:0.98; }

/* Tabs */
.tab-pane{ display:none; opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; }
.tab-pane.active{ display:block; opacity:1; transform:none; }

/* CTA styles for cart summary */
.cta-primary{ background: linear-gradient(90deg,#9c1d50,#76164e); color:#fff; padding:14px 18px; border-radius:14px; text-align:center; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-shadow:0 12px 36px rgba(156,29,80,0.16); border:none; font-weight:800; font-size:1rem; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.cta-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 46px rgba(156,29,80,0.2); }
.cta-secondary{ background:linear-gradient(90deg,#2e7d32,#22602a); color:#fff; padding:14px 18px; border-radius:14px; text-align:center; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; box-shadow:0 12px 36px rgba(46,125,50,0.14); border:none; font-weight:800; font-size:1rem; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.cta-secondary:hover{ transform:translateY(-3px); box-shadow:0 18px 46px rgba(46,125,50,0.18); }

/* CTA icon spacing */
.cta-primary .cta-icon, .cta-secondary .cta-icon{ margin-right:6px; vertical-align:middle; width:20px; height:20px; display:inline-block; }

/* Ensure header right area floats above modal overlay */
.site-header .header-right{ position:relative; z-index:60; }

/* Spinner */
.btn-spinner{ display:inline-block; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,0.3); border-top-color:rgba(255,255,255,0.95); animation:spin .8s linear infinite; vertical-align:middle; margin-left:8px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Ripple effect */
.ripple{ position:relative; overflow:hidden; }
.ripple .rip{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,0.35); animation:rip .6s ease-out; pointer-events:none; }
@keyframes rip{ to{ transform:scale(4); opacity:0; } }