/* ============================================================
   components.css — Botones, Tarjetas, Categorías, Filtros, Productos
   ============================================================ */

/* ── IMÁGENES DE PRODUCTO ───────────────────────────────── */
.prod-img-thumb {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  padding: 12px;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), filter var(--t-norm);
  position: relative; z-index: 1;
}
.prod-card:hover .prod-img-thumb {
  transform: scale(1.08) translateY(-4px);
  filter: drop-shadow(0 0 18px rgba(255,45,120,0.4));
}

.prod-emoji-fallback {
  font-size: 5rem; z-index: 1; position: relative;
  transition: transform var(--t-spring), filter var(--t-norm);
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.prod-card:hover .prod-emoji-fallback {
  transform: scale(1.15) translateY(-4px);
  filter: drop-shadow(0 0 18px rgba(255,45,120,0.5));
}

.modal-img-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.prod-img-modal {
  max-width: 100%; max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(196,0,255,0.35));
  transition: transform var(--t-spring);
}
.modal-overlay.open .prod-img-modal { transform: scale(1.03); }

/* ── BOTONES ────────────────────────────────────────────── */
.btn-neon {
  background: linear-gradient(135deg, var(--c-pink), var(--c-pink2));
  color: #fff; border: none; padding: 14px 40px; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all var(--t-norm);
  box-shadow: var(--glow-pink), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative; overflow: hidden;
}
.btn-neon::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
  opacity: 0; transition: opacity var(--t-fast);
}
.btn-neon:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--glow-pink), 0 14px 40px rgba(255,45,120,0.55); }
.btn-neon:hover::after { opacity: 1; }

.btn-ghost {
  background: transparent; border: 1.5px solid rgba(196,0,255,0.4);
  color: var(--c-purple); padding: 14px 40px; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.06em; transition: all var(--t-norm);
}
.btn-ghost:hover {
  border-color: var(--c-cyan); color: var(--c-cyan);
  box-shadow: var(--glow-cyan); transform: translateY(-2px);
}

/* ── CATEGORÍAS ─────────────────────────────────────────── */
.cats-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin-top: 40px;
}
.cat-card {
  background: rgba(19,0,40,0.8); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 26px 18px;
  text-align: center; cursor: pointer;
  transition: all var(--t-norm); position: relative; overflow: hidden;
  backdrop-filter: blur(10px);
}
.cat-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-norm);
}
.c-pink::before   { background: linear-gradient(135deg, rgba(255,45,120,0.15), transparent); }
.c-cyan::before   { background: linear-gradient(135deg, rgba(0,245,255,0.1), transparent); }
.c-gold::before   { background: linear-gradient(135deg, rgba(255,204,0,0.12), transparent); }
.c-purple::before { background: linear-gradient(135deg, rgba(196,0,255,0.12), transparent); }
.c-green::before  { background: linear-gradient(135deg, rgba(0,255,153,0.1), transparent); }
.c-red::before    { background: linear-gradient(135deg, rgba(255,60,40,0.15), transparent); }
.c-amber::before  { background: linear-gradient(135deg, rgba(255,165,0,0.13), transparent); }

.cat-card:hover { transform: translateY(-8px); }
.cat-card:hover::before { opacity: 1; }
.c-pink:hover   { border-color: rgba(255,45,120,0.6);  box-shadow: 0 16px 40px rgba(255,45,120,0.2), inset 0 0 30px rgba(255,45,120,0.05); }
.c-cyan:hover   { border-color: rgba(0,245,255,0.5);   box-shadow: 0 16px 40px rgba(0,245,255,0.15); }
.c-gold:hover   { border-color: rgba(255,204,0,0.5);   box-shadow: 0 16px 40px rgba(255,204,0,0.15); }
.c-purple:hover { border-color: rgba(196,0,255,0.6);   box-shadow: 0 16px 40px rgba(196,0,255,0.2); }
.c-green:hover  { border-color: rgba(0,255,153,0.5);   box-shadow: 0 16px 40px rgba(0,255,153,0.12); }
.c-red:hover    { border-color: rgba(255,60,40,0.6);   box-shadow: 0 16px 40px rgba(255,60,40,0.2); }
.c-amber:hover  { border-color: rgba(255,165,0,0.55);  box-shadow: 0 16px 40px rgba(255,165,0,0.18); }

.cat-emoji { font-size: 2rem; display: block; margin-bottom: 10px; transition: transform var(--t-spring); }
.cat-card:hover .cat-emoji { transform: scale(1.28) rotate(-8deg); }
.cat-name  { font-weight: 700; font-size: 0.86rem; margin-bottom: 4px; }
.cat-count { font-size: 0.72rem; color: var(--c-muted); }
.cat-arrow {
  position: absolute; top: 14px; right: 16px; font-size: 0.9rem; color: var(--c-pink);
  opacity: 0; transform: translateX(-6px); transition: all var(--t-norm);
}
.cat-card:hover .cat-arrow { opacity: 1; transform: translateX(0); }

/* ── FILTROS ────────────────────────────────────────────── */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-lbl { font-size: 0.7rem; color: var(--c-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-right: 4px; }
.f-btn {
  background: none; border: 1px solid rgba(196,0,255,0.2); color: var(--c-muted);
  padding: 7px 18px; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; transition: all var(--t-norm);
}
.f-btn:hover { border-color: rgba(255,45,120,0.5); color: var(--c-pink); }
.f-btn.on {
  background: linear-gradient(135deg, var(--c-pink), var(--c-pink2));
  color: #fff; border-color: transparent; font-weight: 700; box-shadow: var(--glow-pink);
}

/* ── GRID DE PRODUCTOS ──────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.prod-card {
  background: rgba(19,0,40,0.85); border: 1px solid var(--c-border);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  transition: all var(--t-norm); position: relative;
  backdrop-filter: blur(10px);
}
.prod-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255,45,120,0.4);
  box-shadow: 0 24px 50px rgba(0,0,0,0.6), 0 0 40px rgba(196,0,255,0.12), inset 0 0 30px rgba(255,45,120,0.03);
}

.prod-img-wrap {
  height: 210px; position: relative;
  background: linear-gradient(135deg, rgba(20,0,45,0.9), rgba(10,0,25,0.95));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.prod-img-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 70%, rgba(196,0,255,0.1), transparent 65%);
  opacity: 0; transition: opacity var(--t-norm);
}
.prod-card:hover .prod-img-wrap::before { opacity: 1; }
.prod-img-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(196,0,255,0.02) 3px, rgba(196,0,255,0.02) 4px);
  opacity: 0; transition: opacity var(--t-norm);
}
.prod-card:hover .prod-img-wrap::after { opacity: 1; }

.prod-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.pbadge { padding: 3px 10px; border-radius: 4px; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.pb-new  { background: var(--c-cyan); color: #000; }
.pb-hot  { background: var(--c-pink); color: #fff; box-shadow: var(--glow-pink); }
.pb-sale { background: var(--c-gold); color: #000; }

.stock-pill {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  background: rgba(10,0,20,0.88); backdrop-filter: blur(8px);
  padding: 4px 10px; border-radius: var(--r-full);
  font-size: 0.68rem; font-weight: 700; border: 1px solid var(--c-border);
}
.sdot { width: 6px; height: 6px; border-radius: 50%; }
.s-in  .sdot { background: var(--c-green);   box-shadow: var(--glow-green); }
.s-in  span  { color: var(--c-green); }
.s-low .sdot { background: var(--c-warning);  box-shadow: var(--glow-gold); }
.s-low span  { color: var(--c-warning); }
.s-out .sdot { background: var(--c-danger); }
.s-out span  { color: var(--c-danger); }

.quick-overlay {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(10,0,22,0.78);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--t-norm);
}
.prod-card:hover .quick-overlay { opacity: 1; }
.qbtn {
  background: linear-gradient(135deg, var(--c-pink), var(--c-purple));
  color: #fff; border: none; padding: 10px 28px; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em;
  transform: translateY(10px); box-shadow: var(--glow-pink); transition: all var(--t-norm);
}
.prod-card:hover .qbtn { transform: translateY(0); }

.prod-body { padding: 16px 20px; }
.prod-cat-tag {
  font-size: 0.68rem; color: var(--c-purple); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 5px;
  text-shadow: 0 0 10px rgba(196,0,255,0.4);
}
.prod-name    { font-weight: 700; font-size: 1rem; line-height: 1.3; margin-bottom: 6px; }
.prod-flavors { font-size: 0.75rem; color: var(--c-muted); line-height: 1.55; margin-bottom: 14px; }
.prod-foot    { display: flex; align-items: center; justify-content: space-between; }
.prod-price   { display: flex; align-items: baseline; gap: 6px; }
.price-main {
  font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.04em;
  background: linear-gradient(135deg, #fff, rgba(240,232,255,0.9));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.add-btn {
  background: linear-gradient(135deg, var(--c-pink), var(--c-pink2));
  border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.1rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-spring); box-shadow: 0 4px 14px rgba(255,45,120,0.45); flex-shrink: 0;
}
.add-btn:hover { transform: rotate(90deg) scale(1.15); box-shadow: var(--glow-pink); }
/* Botón sabor: no gira, pulsa */
.add-btn[title="Elegir sabor"]:hover { transform: scale(1.2); animation: heartbeat 0.5s ease; }
.add-btn:disabled { background: rgba(255,255,255,0.07); box-shadow: none; transform: none; cursor: not-allowed; }

.no-results { grid-column: 1/-1; text-align: center; padding: 60px; color: var(--c-muted); }

/* ── WISHLIST HEART BUTTON ──────────────────────────────── */
.wish-btn {
  position: absolute; bottom: 10px; right: 10px; z-index: 4;
  background: rgba(10,0,20,0.75); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,45,120,0.2); color: var(--c-muted);
  width: 32px; height: 32px; border-radius: 50%; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--t-spring); cursor: pointer;
}
.wish-btn:hover { color: var(--c-pink); border-color: var(--c-pink); background: rgba(255,45,120,0.15); transform: scale(1.2); }
.wish-btn.active { color: var(--c-pink); border-color: var(--c-pink); background: rgba(255,45,120,0.12); box-shadow: var(--glow-pink); }

/* ── LIGHT MODE — component overrides ──────────────────── */
[data-theme="light"] .prod-card { background: rgba(255,255,255,0.92); border-color: rgba(196,0,255,0.1); }
[data-theme="light"] .prod-card:hover { border-color: rgba(255,45,120,0.35); }
[data-theme="light"] .prod-img-wrap { background: linear-gradient(135deg, rgba(235,220,255,0.9), rgba(215,200,255,0.95)); }
[data-theme="light"] .cat-card { background: rgba(255,255,255,0.85); }
[data-theme="light"] .f-btn { background: rgba(255,255,255,0.7); border-color: rgba(130,0,255,0.2); }
[data-theme="light"] .f-btn.on { background: linear-gradient(135deg, var(--c-pink), var(--c-pink2)); color: #fff; border-color: transparent; }
[data-theme="light"] .wish-btn { background: rgba(255,255,255,0.85); }

/* ── MODAL: SIZE SELECTOR ───────────────────────────────── */
.modal-sizes-section {
  margin-bottom: 16px;
}
.sizes-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-muted);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.size-req {
  font-size: .65rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c-pink);
  background: rgba(255,45,120,.1); border: 1px solid rgba(255,45,120,.25);
  padding: 1px 6px; border-radius: 4px;
}
.sizes-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.size-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  transition: all var(--t-norm); color: var(--c-text); min-width: 72px;
}
.size-btn:hover {
  border-color: rgba(255,45,120,.5); background: rgba(255,45,120,.08);
}
.size-btn.selected {
  border-color: var(--c-pink); background: rgba(255,45,120,.15);
  box-shadow: 0 0 0 2px rgba(255,45,120,.25);
}
.size-label-text {
  font-size: .78rem; font-weight: 600; line-height: 1.2;
}
.size-price-text {
  font-size: .72rem; color: var(--c-pink); font-weight: 700;
}
[data-theme="light"] .size-btn {
  background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12);
}
[data-theme="light"] .size-btn:hover {
  border-color: rgba(255,45,120,.5); background: rgba(255,45,120,.06);
}
[data-theme="light"] .size-btn.selected {
  border-color: var(--c-pink); background: rgba(255,45,120,.1);
}