.detail-wrap{max-width:1100px;margin:0 auto;padding:48px 40px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* ── Desktop: gallery sticky, info fluye ── */
@media(min-width:769px){
  .detail-wrap{align-items:start}
  .detail-gallery{position:sticky;top:80px;align-self:start}
  .detail-info{position:static;max-height:none;overflow-y:visible}
}
.detail-gallery{display:grid;grid-template-columns:80px 1fr;grid-template-rows:auto;gap:12px;align-items:start}
.detail-thumbs{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto;scrollbar-width:none;padding:2px}
.detail-thumb{width:76px;height:76px;background:var(--pearl);border-radius:10px;border:2px solid var(--cream4);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .22s cubic-bezier(.34,1.2,.64,1);overflow:hidden;position:relative;flex-shrink:0}
.detail-thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px;transition:transform .3s}
.detail-thumb:hover{border-color:var(--gold);transform:scale(1.05)}
.detail-thumb:hover img{transform:scale(1.08)}
.detail-thumb.active{border-color:var(--rose2);box-shadow:0 0 0 3px var(--rose3)}
.detail-main-img{grid-column:2;grid-row:1;width:100%;aspect-ratio:1;background:linear-gradient(145deg,var(--pearl),var(--cream2));border-radius:16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--cream4);position:relative;overflow:hidden;flex-direction:column;gap:12px;transition:background .4s ease;cursor:default;box-shadow:0 8px 40px rgba(92,74,61,.1)}
/* When no thumbs, main takes full width */
.detail-gallery:not(:has(.detail-thumbs)) .detail-main-img{grid-column:1/-1}
.detail-gallery:has(.detail-thumbs) .detail-main-img{grid-column:2}

/* Fade transition for image swap */
#detail-real-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:opacity .18s ease;cursor:zoom-in}
#detail-real-img.detail-img-fade{opacity:0!important}

/* Arrow navigation buttons */
.detail-gallery-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(253,250,247,.92);border:1px solid rgba(232,212,192,.6);
  color:var(--ink);font-size:20px;font-weight:300;
  cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);transition:all .2s cubic-bezier(.34,1.4,.64,1);
  line-height:1;
}
.detail-gallery-arrow:hover{background:var(--ink);color:var(--gold3);transform:translateY(-50%) scale(1.1)}
.detail-gallery-prev{left:10px}
.detail-gallery-next{right:10px}

/* Dot indicators */
.detail-gallery-dots{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:5;
}
.detail-gallery-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(44,31,26,.25);cursor:pointer;
  transition:all .22s cubic-bezier(.34,1.4,.64,1);
}
.detail-gallery-dot.active{background:var(--rose2);width:18px;border-radius:3px}
.detail-gallery-dot:hover{background:var(--rose2);opacity:.7}
.detail-info h1{font-family:var(--serif);font-size:34px;font-weight:300;font-style:italic;color:var(--ink);margin-bottom:10px;line-height:1.2}
.detail-price{font-family:var(--serif);font-size:38px;font-weight:300;font-style:italic;color:var(--rose2)}
.detail-desc{font-size:14px;color:var(--mink);line-height:1.8;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--cream4)}
.detail-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}

/* ── Botón Agregar al Carrito ── */
.btn-add-detail{
  width:100%;border:none;cursor:pointer;font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;
  background:var(--ink);
  color:var(--gold3);
  padding:18px 24px;
  border-radius:14px;
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .18s, box-shadow .18s, background .18s;
  box-shadow:0 4px 20px rgba(44,31,26,.25);
}
.btn-add-detail::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 60%);
  pointer-events:none;
}
.btn-add-detail:hover{
  background:#1a0f0a;
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(44,31,26,.35);
}
.btn-add-detail:active{transform:translateY(0);box-shadow:0 2px 10px rgba(44,31,26,.2)}
/* Ripple */
.btn-add-detail .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.18);
  transform:scale(0);animation:rippleAnim .5s linear;
  pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ── Botón WhatsApp ── */
.btn-wa-detail{
  width:100%;border:none;cursor:pointer;font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,#25d366 0%,#1db954 100%);
  color:#fff;
  padding:16px 24px;
  border-radius:14px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .18s, box-shadow .18s, filter .18s;
  box-shadow:0 4px 20px rgba(37,211,102,.3);
  position:relative;overflow:hidden;
}
.btn-wa-detail::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 60%);
  pointer-events:none;
}
.btn-wa-detail:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(37,211,102,.4);
}
.btn-wa-detail:active{transform:translateY(0)}

/* ── Botón Compartir ── */
.btn-share-wa{
  width:100%;background:transparent;
  border:1.5px solid var(--cream4);
  color:var(--mink);
  padding:12px 24px;
  border-radius:14px;
  font-size:12px;font-weight:600;letter-spacing:.06em;
  cursor:pointer;font-family:var(--sans);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .18s;
}
.btn-share-wa:hover{
  background:var(--cream3);
  border-color:var(--gold);
  color:var(--ink);
  transform:translateY(-1px);
}
.btn-share-wa:active{transform:translateY(0)}

.breadcrumb{padding:14px 40px;background:var(--cream2);border-bottom:1px solid var(--cream4);font-size:12px;color:var(--mink);letter-spacing:.04em;display:flex;align-items:center;gap:12px}
.btn-back{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1.5px solid var(--cream4);color:var(--ink2);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:30px;cursor:pointer;font-family:var(--sans);transition:all .2s;box-shadow:0 2px 8px rgba(44,31,26,.08);flex-shrink:0}

@media(max-width:768px){
  .detail-wrap{display:block;padding:0;position:relative}

  /* Breadcrumb compacto en mobile */
  .breadcrumb{padding:10px 14px;font-size:11px;gap:8px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
  .breadcrumb::-webkit-scrollbar{display:none}
  .btn-back{font-size:10px;padding:5px 10px;flex-shrink:0}

  /* Galería: fluye normalmente */
  .detail-gallery{
    position:relative;top:auto;z-index:1;width:100%;
    background:var(--white);
    border-bottom:1px solid var(--cream4);
    overflow:visible;grid-template-columns:1fr;gap:0;
    display:flex;flex-direction:column;
  }
  .detail-main-img{
    width:100%;height:280px;border-radius:0;border:none;
    box-shadow:none;aspect-ratio:unset;max-height:280px;grid-column:1;
    overflow:hidden;position:relative;order:1;
  }
  .detail-thumbs{
    display:flex;flex-direction:row;overflow-x:auto;
    padding:8px 12px;gap:8px;
    background:var(--cream2);border-top:1px solid var(--cream4);
    scrollbar-width:none;flex-wrap:nowrap;grid-column:1;max-height:none;
    order:2;
  }
  .detail-thumbs::-webkit-scrollbar{display:none}
  .detail-thumb{width:56px;height:56px;flex-shrink:0}
  .detail-gallery-arrow{width:32px;height:32px;font-size:17px}

  /* Info: padding-bottom = float bar (56px) + bottom nav (64px) + margen (20px) */
  .detail-info{padding:20px 16px 160px}

  /* Tipografía más compacta */
  .detail-header-title{font-size:24px;margin-bottom:6px}
  .detail-price-tag{font-size:28px;margin-bottom:12px}
  .detail-eyebrow{font-size:10px;margin-bottom:6px}
  .detail-desc{font-size:13px;line-height:1.7;margin-bottom:18px;padding-bottom:18px}

  /* Urgency bar compacta */
  .detail-urgency-bar{padding:8px 12px;margin-bottom:14px}
  .urgency-viewers,.urgency-stock{font-size:11px}

  /* Opciones más grandes para touch */
  .chip{padding:9px 16px;font-size:12px}
  .detail-opt-btn{padding:10px 16px;font-size:12px}

  /* Trust grid 2 cols */
  .detail-trust{grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;padding-top:20px}
  .trust-item{font-size:11px}

  /* Float bar: encima del bottom nav (64px) */
  .detail-float-bar{
    bottom:64px;
    padding:10px 14px;
  }
  .detail-float-price{font-size:20px}
  .detail-float-add{padding:13px 18px;font-size:11px;border-radius:8px}
  .detail-float-wa{padding:13px 14px;font-size:17px;border-radius:8px}
}

/* ── Option Selectors ── */
.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.chip {
  padding: 8px 16px;
  border: 1.5px solid var(--cream4);
  background: var(--white);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mink);
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip:hover { border-color: var(--gold); background: var(--cream3); }
.chip.active { border-color: var(--rose2); background: var(--rose3); color: var(--rose2); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; }

.peluche-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.peluche-card-opt {
  background: var(--white);
  border: 1.5px solid var(--cream4);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.peluche-card-opt:hover { border-color: var(--gold); transform: translateY(-2px); }
.peluche-card-opt.active { border-color: var(--rose2); background: var(--rose3); }
.peluche-card-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pearl);
}
.peluche-card-img img { width: 100%; height: 100%; object-fit: cover; }
.peluche-card-name { font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.peluche-card-check {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: var(--rose2);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  display: none;
  align-items: center;
  justify-content: center;
}
.peluche-card-opt.active .peluche-card-check { display: flex; }

/* ── Dedicatoria ── */
.dedica-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.dedica-card-opt {
  aspect-ratio: 1;
  border: 1.5px solid var(--cream4);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all .2s;
}
.dedica-card-opt.active { border-color: var(--rose2); }
.dedica-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 9px;
  padding: 4px;
  text-align: center;
}
.dedica-card-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: var(--rose2);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  display: none;
  align-items: center;
  justify-content: center;
}
.dedica-card-opt.active .dedica-card-check { display: flex; }

.dedica-input {
  width: 100%;
  padding: 12px;
  border: 1.5px solid var(--cream4);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  margin-top: 8px;
  outline: none;
}
.dedica-input:focus { border-color: var(--gold); }

/* ── Extra Detail Styles ── */
.urgency-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--rose3);
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.urgency-viewers { font-size: 11px; font-weight: 700; color: var(--rose2); }
.urgency-stock { font-size: 11px; font-weight: 700; color: #ef4444; }

.detail-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--cream4);
}
.trust-item {
  font-size: 12px;
  font-weight: 600;
  color: var(--mink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.trust-item::before { content: '✓'; color: var(--gold); font-weight: 800; }

/* ── Reviews ── */
.detail-reviews {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid var(--cream4);
}
.detail-reviews-header {
  margin-bottom: 32px;
}
.detail-reviews-title {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 16px;
}
.detail-reviews-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white);
  padding: 20px;
  border-radius: 12px;
  border: 1.5px solid var(--cream4);
}
.reviews-big-score {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 300;
  color: var(--rose2);
}
.reviews-stars-big {
  color: #ffc107;
  font-size: 18px;
  letter-spacing: 2px;
}
.reviews-count-txt {
  font-size: 12px;
  color: var(--mink);
  margin-top: 4px;
}
.review-item {
  background: var(--white);
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--cream4);
  margin-bottom: 16px;
  transition: box-shadow var(--transition);
}
.review-item:hover { box-shadow: 0 4px 20px var(--shadow); }
.review-item-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.review-avatar {
  width: 40px;
  height: 40px;
  background: var(--rose3);
  color: var(--rose2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.review-meta { flex: 1; }
.review-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.review-date { font-size: 11px; color: var(--mink); margin-top: 2px; }
.review-stars { color: #ffc107; font-size: 12px; }
.review-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink2);
  font-style: italic;
}
.review-photo {
  margin-top: 12px;
  width: 120px;
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--cream4);
}
.review-photo img { width: 100%; height: 100%; object-fit: cover; display:block; }
.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #22c55e;
  margin-top: 12px;
}
.review-verified::before { content: ''; }
.review-verified { display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:#22c55e;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:20px;padding:2px 7px;margin-left:6px;vertical-align:middle }
.review-date { font-size:11px;color:var(--mink);margin-left:auto;white-space:nowrap }
.review-loc { font-size:11px;color:var(--mink);margin-top:6px }

/* ── Reviews rating bars ── */
.reviews-bar-row { display:flex;align-items:center;gap:8px;margin-bottom:6px }
.reviews-bar-label { font-size:11px;color:#ffc107;letter-spacing:1px;width:60px;flex-shrink:0 }
.reviews-bar-track { flex:1;height:6px;background:var(--cream4);border-radius:3px;overflow:hidden }
.reviews-bar-fill { height:100%;background:linear-gradient(90deg,#ffc107,#f59e0b);border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1) }
.reviews-bar-count { font-size:11px;color:var(--mink);width:16px;text-align:right;flex-shrink:0 }

.reviews-list { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px }
@media(max-width:768px){ .reviews-list { grid-template-columns:1fr } }
/* ── Recently Viewed ── */
.recently-section {
  margin-top: 60px;
  padding: 40px 0;
  background: var(--cream2);
  border-radius: 16px;
}
.recently-title {
  text-align: center;
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 24px;
}
.recently-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 20px 10px;
  scrollbar-width: none;
}
.recently-item {
  width: 140px;
  flex-shrink: 0;
  cursor: pointer;
  text-align: center;
}
.recently-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border: 1px solid var(--cream4);
}
.recently-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recently-price {
    font-size: 11px;
    color: var(--rose2);
    font-weight: 700;
  }


/* ── Detail Page — Elementos generados por JS ── */
.detail-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--rose2);margin-bottom:8px}
.detail-header-title{font-family:var(--serif);font-size:34px;font-weight:300;font-style:italic;color:var(--ink);margin-bottom:10px;line-height:1.2}
.detail-price-tag{font-family:var(--serif);font-size:38px;font-weight:300;font-style:italic;color:var(--rose2);margin-bottom:16px}
.detail-includes{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:6px}
.detail-includes li{font-size:13px;color:var(--mink);padding-left:18px;position:relative;line-height:1.5}
.detail-includes li::before{content:'✦';position:absolute;left:0;color:var(--gold);font-size:10px;top:2px}

/* ── Option Groups ── */
.detail-option-group{margin-bottom:20px}
.detail-option-group{margin-bottom:24px}
.detail-option-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink2);margin-bottom:12px;display:flex;align-items:center;gap:6px;
}
.detail-option-label .opt-selected-val{
  font-size:11px;font-weight:600;color:var(--rose2);text-transform:none;
  letter-spacing:0;margin-left:4px;opacity:0;transition:opacity .2s;
}
.detail-option-label .opt-selected-val.visible{opacity:1;}

/* ── Pill buttons (sin imagen) ── */
.detail-option-btns{display:flex;flex-wrap:wrap;gap:8px}
.detail-opt-btn{
  display:flex;align-items:center;gap:6px;padding:9px 16px;
  border:1.5px solid var(--cream4);background:var(--white);border-radius:24px;
  font-size:12px;font-weight:600;color:var(--mink);cursor:pointer;
  font-family:var(--sans);transition:all .18s;position:relative;
}
.detail-opt-btn:hover{border-color:var(--gold);background:var(--cream3);color:var(--ink)}
.detail-opt-btn.active{
  border-color:var(--rose2);background:var(--rose3);color:var(--rose2);
  box-shadow:0 0 0 3px rgba(var(--rose2-rgb),.12);
}
.detail-opt-btn.has-color::before{
  content:'';width:11px;height:11px;border-radius:50%;
  background:var(--opt-color,var(--cream4));flex-shrink:0;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.08);
}

/* ── Image grid ── */
.detail-option-btns.img-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:10px;
  padding:4px 2px 4px;
}

.detail-opt-img-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 8px 8px;
  border:1.5px solid var(--cream4);background:var(--white);
  border-radius:14px;font-size:10px;font-weight:600;color:var(--mink);
  cursor:pointer;font-family:var(--sans);transition:all .18s;
  width:100%;text-align:center;line-height:1.3;position:relative;
}
.detail-opt-img-btn .opt-img-wrap{
  position:relative;width:68px;height:68px;border-radius:10px;overflow:hidden;flex-shrink:0;
}
.detail-opt-img-btn .opt-img-wrap img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .2s;
}
.detail-opt-img-btn:hover .opt-img-wrap img{transform:scale(1.06)}
.detail-opt-img-btn:hover{
  border-color:var(--gold);
  box-shadow:0 4px 14px rgba(44,31,26,.1);
  transform:translateY(-2px);
}
.detail-opt-img-btn.active{
  border-color:var(--rose2);
  background:var(--rose3);
  color:var(--rose2);
  box-shadow:0 0 0 3px rgba(220,100,120,.12);
}
/* Checkmark al seleccionar */
.detail-opt-img-btn .opt-check{
  position:absolute;top:5px;right:5px;
  width:18px;height:18px;border-radius:50%;
  background:var(--rose2);color:#fff;
  font-size:10px;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5);transition:all .18s;
  pointer-events:none;z-index:2;
}
.detail-opt-img-btn.active .opt-check{opacity:1;transform:scale(1);}
.detail-opt-img-btn span.opt-name{
  font-size:10px;font-weight:600;line-height:1.3;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:0 2px;
}

/* ── Peluche grid ── */
.peluche-opts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:10px;
  padding:4px 2px;
}

@media(max-width:600px){
  .peluche-opts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
    gap:8px;
    padding:4px 2px 10px;
    max-height:30dvh;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:var(--cream4) transparent;
  }
  .peluche-opts-grid::-webkit-scrollbar{width:4px}
  .peluche-opts-grid::-webkit-scrollbar-track{background:transparent}
  .peluche-opts-grid::-webkit-scrollbar-thumb{background:var(--cream4);border-radius:4px}
}

/* ── Collar type label ── */
.detail-collar-type-label{
  font-size:10px;font-weight:700;color:var(--mink);
  text-transform:uppercase;letter-spacing:.1em;
  margin:14px 0 8px;padding:0 2px;
  display:flex;align-items:center;gap:6px;
}
.detail-collar-type-label::after{
  content:'';flex:1;height:1px;background:var(--cream4);
}

/* ── Dedicatoria Section ── */
.detail-dedica-section{
  margin-bottom:20px;padding:18px;
  background:var(--cream2);border-radius:14px;
  border:1px solid var(--cream4);
}
.detail-dedica-input{
  width:100%;padding:11px 14px;border:1.5px solid var(--cream4);
  border-radius:10px;font-family:var(--sans);font-size:13px;color:var(--ink);
  background:var(--white);outline:none;margin-bottom:8px;transition:border-color .2s;
  box-sizing:border-box;
}
.detail-dedica-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(180,150,80,.1)}
.detail-dedica-textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--cream4);
  border-radius:10px;font-family:var(--sans);font-size:13px;color:var(--ink);
  background:var(--white);outline:none;resize:none;min-height:80px;
  margin-bottom:14px;transition:border-color .2s;box-sizing:border-box;
}
.detail-dedica-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(180,150,80,.1)}
.dedica-cards-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px;
}
.dedica-card-opt{
  aspect-ratio:1;border:2px solid var(--cream4);border-radius:10px;
  overflow:hidden;cursor:pointer;position:relative;transition:all .18s;
}
.dedica-card-opt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.dedica-card-opt:hover{border-color:var(--gold);transform:scale(1.04)}
.dedica-card-opt:hover img{transform:scale(1.06)}
.dedica-card-opt.active{border-color:var(--rose2);box-shadow:0 0 0 3px rgba(220,100,120,.15)}
.dedica-card-opt.active::after{
  content:'✓';position:absolute;top:4px;right:4px;
  width:18px;height:18px;border-radius:50%;
  background:var(--rose2);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* ── Dedica mode tabs ── */
.dedica-mode-tabs{
  display:flex;gap:8px;margin-bottom:14px;
}
.dedica-mode-tab{
  flex:1;padding:9px 12px;border:1.5px solid var(--cream4);border-radius:10px;
  background:var(--white);color:var(--ink2);font-size:13px;font-family:var(--sans);
  cursor:pointer;transition:all .18s;font-weight:500;
}
.dedica-mode-tab:hover{border-color:var(--gold);color:var(--ink)}
.dedica-mode-tab.active{
  border-color:var(--rose2);background:rgba(220,100,120,.07);
  color:var(--rose2);font-weight:700;
}
.dedica-card-selected-label{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding:8px 12px;background:rgba(220,100,120,.07);
  border:1px solid rgba(220,100,120,.2);border-radius:8px;
  font-size:12px;color:var(--rose2);font-weight:600;
}
/* Paneles de modo — siempre en DOM, sin display:none para evitar reflow */
.dedica-mode-panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  pointer-events:none;
  transition:max-height .2s ease, opacity .15s ease;
}
.dedica-mode-panel--active{
  max-height:900px;
  opacity:1;
  pointer-events:auto;
}
body.dark-mode .dedica-mode-tab{background:var(--cream2);border-color:var(--cream4);color:var(--ink2)}
body.dark-mode .dedica-mode-tab.active{background:rgba(220,100,120,.12);border-color:var(--rose2);color:var(--rose2)}

/* ── Detail responsive mejorado ── */
@media(max-width:768px){
  .detail-header-title{font-size:26px}
  .detail-price-tag{font-size:28px}
  .detail-opt-img-btn .opt-img-wrap{width:56px;height:56px}
}
@media(max-width:600px){
  .breadcrumb{padding:8px 12px;font-size:11px;gap:6px}
  .btn-back{font-size:10px;padding:5px 10px}
  .detail-info{padding:16px 14px 160px}
  .detail-header-title{font-size:21px}
  .detail-price-tag{font-size:26px}
  .detail-desc{font-size:13px}
  .detail-trust{grid-template-columns:1fr 1fr;gap:8px}
  .dedica-cards-row{grid-template-columns:repeat(3,1fr);gap:10px}
  .detail-option-btns.img-grid{grid-template-columns:repeat(3,1fr)}
  .detail-opt-img-btn{width:100%}
  .detail-opt-img-btn .opt-img-wrap{width:52px;height:52px}
  .detail-reviews-summary{flex-direction:column;text-align:center;gap:12px}
  .recently-item{width:110px}
  .related-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .related-name{font-size:11px}
  .related-price{font-size:14px}
}

@media(max-width:480px){
  .detail-main-img{height:260px;max-height:260px}
  .detail-thumb{width:52px;height:52px}
  .detail-header-title{font-size:20px}
  .detail-price-tag{font-size:24px}
  .chips-row{gap:6px}
  .chip{padding:8px 12px;font-size:11px}
  .detail-option-label{font-size:11px}
  .detail-opt-btn{padding:9px 12px;font-size:11px}
  /* Botones full width en mobile pequeño */
  .detail-actions{gap:8px}
  .btn-add-detail{padding:16px;font-size:12px}
  .btn-wa-detail{padding:14px;font-size:12px}
  /* Float bar aún más compacto */
  .detail-float-bar{bottom:60px;padding:8px 12px}
  .detail-float-price{font-size:18px}
  .detail-float-add{padding:12px 14px;font-size:10px}
  .detail-float-wa{padding:12px 12px;font-size:16px}
  .detail-info{padding:14px 12px 160px}
}

/* ── Collar / Anillo type selector (2 pasos) ── */
@keyframes collarVariantsIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes collarTabsOut {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0; transform:translateY(-6px); }
}

.collar-type-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}
.collar-type-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
  border: 2px solid var(--cream4);
  background: var(--white);
  border-radius: 14px;
  cursor: pointer;
  font-family: var(--sans);
  transition: all .18s;
  position: relative;
  overflow: hidden;
}
.collar-type-tab:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(44,31,26,.1);
}
.collar-type-tab.active {
  border-color: var(--rose2);
  background: var(--rose3);
  box-shadow: 0 0 0 3px rgba(220,100,120,.12);
}
.collar-tab-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform .2s;
}
.collar-type-tab:hover .collar-tab-img { transform: scale(1.06); }
.collar-tab-emoji {
  font-size: 32px;
  line-height: 1;
}
.collar-tab-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink2);
  text-align: center;
  letter-spacing: .02em;
}
.collar-type-tab.active .collar-tab-label { color: var(--rose2); }

/* Variantes panel */
.collar-variants {
  animation: collarVariantsIn .25s ease;
}
.collar-variants-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--mink);
  cursor: pointer;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid var(--cream4);
  background: var(--white);
  transition: all .15s;
}
.collar-variants-back:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: var(--cream3);
}

@media(max-width:600px) {
  .collar-tab-img { width: 52px; height: 52px; }
  .collar-tab-emoji { font-size: 26px; }
  .collar-tab-label { font-size: 10px; }
  .collar-type-tab { padding: 10px 6px 8px; border-radius: 12px; }
}

/* dark mode */
body.dark-mode .collar-type-tab { background: var(--cream2); border-color: var(--cream4); }
body.dark-mode .collar-type-tab:hover { border-color: var(--gold); }
body.dark-mode .collar-type-tab.active { background: var(--rose3); border-color: var(--rose2); }
body.dark-mode .collar-tab-label { color: var(--mink); }
body.dark-mode .collar-type-tab.active .collar-tab-label { color: var(--rose2); }
body.dark-mode .collar-variants-back { background: var(--cream2); border-color: var(--cream4); color: var(--mink); }
body.dark-mode .collar-variants-back:hover { border-color: var(--gold); color: var(--ink); }

/* ── Floating Add Button (mobile) ── */
.detail-float-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--white);
  border-top: 1px solid var(--cream4);
  padding: 12px 16px;
  gap: 10px;
  align-items: center;
  box-shadow: 0 -4px 24px rgba(44,31,26,.12);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.detail-float-bar.visible {
  transform: translateY(0);
}
@media(max-width:768px) {
  .detail-float-bar { display: flex; }
}
.detail-float-price {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  color: var(--rose2);
  flex: 1;
}
.detail-float-add {
  background: var(--ink);
  color: var(--gold3);
  border: none;
  padding: 14px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--sans);
  border-radius: 4px;
  flex: 2;
  transition: all .2s;
}
.detail-float-wa {
  background: #25d366;
  color: #fff;
  border: none;
  padding: 14px 16px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition: all .2s;
  flex-shrink: 0;
}

/* ── Lightbox ── */
.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}
.lightbox-overlay.open{display:flex}
.lightbox-img-wrap{max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}
.lightbox-img-wrap img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.lightbox-close{position:fixed;top:20px;right:24px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:9001}
.lightbox-close:hover{background:rgba(255,255,255,.3)}

/* ── Detail skeleton ── */
.skeleton-block{background:linear-gradient(90deg,var(--cream4) 25%,var(--cream2) 50%,var(--cream4) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.detail-skeleton .skeleton-line{border-radius:4px;background:linear-gradient(90deg,var(--cream4) 25%,var(--cream2) 50%,var(--cream4) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}

/* ── Urgency bar en detalle ── */
.detail-urgency-bar{display:flex;justify-content:space-between;align-items:center;background:var(--rose3);border:1px solid var(--rose);padding:8px 14px;border-radius:8px;margin-bottom:16px;gap:8px}
@media(max-width:480px){.detail-urgency-bar{flex-direction:column;gap:4px;text-align:center}}

/* ── Precio tachado + badge descuento ── */
.detail-price-original{font-family:var(--serif);font-size:20px;color:var(--mink);text-decoration:line-through;margin-right:8px;opacity:.7}
.detail-price-badge{display:inline-block;background:var(--rose2);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;margin-left:8px;vertical-align:middle;letter-spacing:.04em}

/* ── Productos relacionados ── */
#detail-secondary{max-width:960px;margin:0 auto;padding:0 24px 60px}
.related-section{margin-top:40px;padding-top:32px;border-top:1px solid var(--cream4)}
.related-title{font-family:var(--serif);font-size:22px;font-style:italic;color:var(--ink);margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.related-item{cursor:pointer;border-radius:12px;overflow:hidden;border:1px solid var(--cream4);background:var(--white);transition:all .2s;text-align:center}
.related-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px var(--shadow)}
.related-img{height:140px;background:var(--pearl);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:40px}
.related-img img{width:100%;height:100%;object-fit:cover}
.related-name{font-size:11px;font-weight:600;color:var(--ink);padding:6px 8px 3px;line-height:1.3}
.related-price{font-family:var(--serif);font-size:14px;color:var(--rose2);font-style:italic;padding-bottom:8px}
@media(max-width:600px){#detail-secondary{padding:0 14px 40px}.related-grid{grid-template-columns:repeat(2,1fr)}.related-img{height:110px}}

/* ── Catalog breadcrumb ── */
.catalog-breadcrumb{display:none;align-items:center;gap:8px;padding:10px 0 16px;flex-wrap:wrap}
.catalog-bc-label{font-size:11px;font-weight:700;color:var(--mink);text-transform:uppercase;letter-spacing:.08em}
.catalog-bc-chip{display:inline-flex;align-items:center;gap:6px;background:var(--rose3);border:1px solid var(--rose);color:var(--rose2);font-size:12px;font-weight:600;padding:5px 10px;border-radius:20px}
.catalog-bc-chip button{background:none;border:none;cursor:pointer;color:var(--rose2);font-size:13px;line-height:1;padding:0;margin-left:2px}
.catalog-bc-chip button:hover{color:var(--ink)}

/* ── Gallery arrows & dots dark mode ── */
body.dark-mode .detail-gallery-arrow{background:rgba(30,21,16,.92);border-color:var(--cream4);color:var(--ink)}
body.dark-mode .detail-gallery-arrow:hover{background:var(--ink);color:var(--gold3)}
body.dark-mode .detail-gallery-dot{background:rgba(240,232,224,.2)}
body.dark-mode .detail-gallery-dot.active{background:var(--rose2)}

/* ── Agotado note en detalle ── */
.detail-agotado-note{
  margin-top:8px;padding:10px 14px;
  background:#fdf0f0;border:1px solid #f5c6c6;border-radius:10px;
  color:#c0392b;font-size:13px;font-weight:600;text-align:center;
}

/* ── Talla de anillo ── */
.anillo-talla-guide-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 1px solid var(--cream4);
  border-radius: 20px; padding: 3px 10px;
  font-size: 11px; color: var(--mink); cursor: pointer;
  margin-left: 8px; font-family: var(--sans);
  transition: border-color .2s, color .2s;
}
.anillo-talla-guide-btn:hover { border-color: var(--rose2); color: var(--rose2); }

.anillo-talla-guide {
  margin-top: 12px; background: var(--cream2);
  border-radius: 14px; padding: 14px 16px;
  animation: culqiPop .25s ease;
}
.anillo-talla-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.anillo-talla-note { font-size: 11px; color: var(--mink); margin-bottom: 10px; line-height: 1.5; }
.anillo-talla-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
.anillo-talla-table th { background: var(--rose3); color: var(--rose2); padding: 6px 10px; text-align: center; font-weight: 700; }
.anillo-talla-table td { padding: 6px 10px; text-align: center; border-bottom: 1px solid var(--cream4); color: var(--ink2); }
.anillo-talla-table tr:last-child td { border-bottom: none; }
.anillo-talla-tip { font-size: 11px; color: var(--mink); line-height: 1.6; }
.anillo-talla-tip strong { color: var(--ink); }

/* ── Load more peluches ── */
.peluche-load-more {
  width: 100%; margin-top: 8px;
  padding: 10px; background: var(--cream2);
  border: 1.5px dashed var(--cream4); border-radius: 12px;
  font-size: 13px; color: var(--mink); cursor: pointer;
  font-family: var(--sans); transition: background .2s, border-color .2s;
}
.peluche-load-more:hover { background: var(--pearl); border-color: var(--rose2); color: var(--rose2); }