/* ============================================================
   BENTO BRAND — single-product-styles.css
   Luxury eccentric edition
   Tipografía: Cormorant Garamond + Jost
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jost:wght@200;300;400;500&display=swap');

/* ── VARIABLES ─────────────────────────────────────────── */
:root {
  --bsp-ink:       #1a110b;
  --bsp-espresso:  #2c1f18;
  --bsp-mocha:     #4a3328;
  --bsp-warm:      #b5a99a;
  --bsp-sand:      #d8cfc6;
  --bsp-cream:     #f5f1ed;
  --bsp-parchment: #faf8f6;
  --bsp-white:     #ffffff;
  --bsp-accent:    #8c5a3a;
  --bsp-accent-lt: #c4906e;
  --bsp-muted:     #9a8f86;
  --bsp-line:      #ece7e2;
  --bsp-success:   #4a7a4a;
  --bsp-error:     #7a3b30;

  --bsp-font-serif: 'Cormorant Garamond', Georgia, serif;
  --bsp-font-sans:  'Jost', system-ui, sans-serif;

  --bsp-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bsp-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET WOOCOMMERCE ─────────────────────────────────── */
.woocommerce div.product,
.woocommerce #content div.product,
.bento-pdp .woocommerce-product-gallery,
.bento-pdp .entry-summary {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* ── BREADCRUMB ────────────────────────────────────────── */
.bsp-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 52px;
  font-family: var(--bsp-font-sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsp-sand);
  border-bottom: 1px solid var(--bsp-line);
  background: var(--bsp-white);
}
.bsp-breadcrumb a {
  color: var(--bsp-sand);
  text-decoration: none;
  transition: color 0.2s;
}
.bsp-breadcrumb a:hover { color: var(--bsp-espresso); }
.bsp-breadcrumb .bsp-current { color: var(--bsp-espresso); font-weight: 500; }
.bsp-sep { opacity: 0.4; }

/* ── GRID PRINCIPAL ────────────────────────────────────── */
.bsp-main {
  display: grid !important;
  grid-template-columns: 54% 46% !important;
  width: 100% !important;
  background: var(--bsp-white);
  align-items: start;
}

/* ── GALERÍA ───────────────────────────────────────────── */
.bsp-gallery {
  display: grid !important;
  grid-template-columns: 70px 1fr !important;
  gap: 12px !important;
  padding: 40px 32px 40px 40px !important;
  background: var(--bsp-parchment) !important;
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  float: none !important;
  width: auto !important;
}

/* Thumbnails desktop (columna izquierda) */
.bsp-thumbs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow-y: auto;
  max-height: 80vh;
  scrollbar-width: none;
}
.bsp-thumbs::-webkit-scrollbar { display: none; }

.bsp-thumb {
  width: 64px !important;
  height: 80px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 1.5px solid transparent !important;
  flex-shrink: 0 !important;
  transition: border-color 0.22s, opacity 0.22s !important;
  opacity: 0.55;
}
.bsp-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.bsp-thumb.active {
  border-color: var(--bsp-espresso) !important;
  opacity: 1 !important;
}
.bsp-thumb:hover { opacity: 0.85 !important; }

/* Imagen principal */
.bsp-main-img {
  position: relative !important;
  overflow: hidden !important;
  background: var(--bsp-cream) !important;
  cursor: zoom-in;
}
.bsp-main-img img,
.bsp-main-img #bspActiveImg {
  width: 100% !important;
  display: block !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  transition: transform 0.7s var(--bsp-ease), opacity 0.2s !important;
}
.bsp-main-img:hover img { transform: scale(1.04) !important; }

.bsp-no-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bsp-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bsp-font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--bsp-warm);
}

/* Badge */
.bsp-badge {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  font-family: var(--bsp-font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 0.22em !important;
  padding: 6px 14px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}
.bsp-badge-sale { background: var(--bsp-error) !important; color: #fff !important; }
.bsp-badge-new  { background: var(--bsp-espresso) !important; color: #fff !important; }

/* Wishlist button */
.bsp-wishlist {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  z-index: 3 !important;
  transition: transform 0.2s !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.bsp-wishlist:hover { background: none !important; transform: scale(1.15) !important; }
.bsp-wishlist.bsp-wishlisted { background: none !important; }
.bsp-wishlist.bsp-wishlisted svg { fill: #fafafa !important; }
.bsp-wishlist svg { transition: fill 0.2s, stroke 0.2s !important; width: 22px; height: 22px; }

/* Contador imagen */
.bsp-img-counter {
  position: absolute;
  bottom: 16px;
  right: 16px;
  font-family: var(--bsp-font-sans);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.8);
  background: rgba(26,17,11,0.45);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
}
.bsp-cnt-sep { margin: 0 3px; opacity: 0.5; }

/* ── INFO PANEL ────────────────────────────────────────── */
.bsp-info {
  padding: 48px 52px 48px 44px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  border-left: 1px solid var(--bsp-line) !important;
  background: var(--bsp-white) !important;
  float: none !important;
  width: auto !important;
  min-height: 100%;
}

.bsp-category-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bsp-category {
  font-family: var(--bsp-font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  color: var(--bsp-accent-lt) !important;
  font-weight: 500 !important;
}
.bsp-sku {
  font-family: var(--bsp-font-sans);
  font-size: 9px;
  color: var(--bsp-sand);
  letter-spacing: 0.12em;
}

.bsp-title {
  font-family: var(--bsp-font-serif) !important;
  font-size: clamp(40px, 4.5vw, 62px) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  line-height: 1.0 !important;
  color: var(--bsp-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased !important;
}

.bsp-short-desc,
.bsp-short-desc p {
  font-family: var(--bsp-font-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--bsp-muted) !important;
  line-height: 1.90 !important;
  margin: 0 !important;
  padding-left: 14px !important;
  border-left: 1.5px solid var(--bsp-line) !important;
}

/* Precio */
.bsp-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.bsp-price-now {
  font-family: var(--bsp-font-sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--bsp-ink);
  letter-spacing: -0.01em;
}
/* WooCommerce price HTML dentro de bsp-price-now */
.bsp-price-now .price,
.bsp-price-now p.price {
  font-family: var(--bsp-font-sans) !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: var(--bsp-ink) !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
.bsp-price-now .price ins,
.bsp-price-now p.price ins {
  text-decoration: none !important;
  background: none !important;
}
.bsp-price-was {
  font-family: var(--bsp-font-sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--bsp-sand);
  text-decoration: line-through;
  letter-spacing: 0.01em;
}

.bsp-rule {
  height: 1px;
  background: var(--bsp-line);
  border: none;
  width: 100%;
}

/* ── ATRIBUTOS / SWATCHES ──────────────────────────────── */
.bsp-attr-block { display: flex; flex-direction: column; gap: 10px; }
.bsp-attr-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bsp-opt-label {
  font-family: var(--bsp-font-sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bsp-warm);
  display: block;
}
.bsp-color-name {
  font-family: var(--bsp-font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--bsp-muted);
  font-weight: 300;
}
.bsp-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bsp-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--bsp-spring), box-shadow 0.18s;
  outline: none;
}
.bsp-swatch:hover { transform: scale(1.12); }
.bsp-swatch.active {
  border-color: var(--bsp-espresso);
  box-shadow: 0 0 0 3px rgba(44,31,24,0.12);
}

/* ── STOCK ─────────────────────────────────────────────── */
.bsp-stock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bsp-font-sans);
  font-size: 11px;
  font-weight: 300;
  color: var(--bsp-success);
  letter-spacing: 0.04em;
}
.bsp-stock-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bsp-success);
  flex-shrink: 0;
  animation: bspPulse 2.5s ease-in-out infinite;
}
@keyframes bspPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(74,122,74,0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(74,122,74,0); }
}

/* ── QUANTITY ──────────────────────────────────────────── */
.bsp-qty-block {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bsp-quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--bsp-line);
  background: var(--bsp-parchment);
  overflow: hidden;
  width: fit-content;
}
.bsp-qty-btn {
  width: 40px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 300;
  color: var(--bsp-espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s;
  user-select: none;
}
.bsp-qty-btn:hover { background: var(--bsp-espresso); color: var(--bsp-white); }
.bsp-qty {
  width: 48px;
  height: 44px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--bsp-line);
  border-right: 1px solid var(--bsp-line);
  font-family: var(--bsp-font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--bsp-ink);
  background: var(--bsp-white);
  outline: none;
  -moz-appearance: textfield;
}
.bsp-qty::-webkit-inner-spin-button,
.bsp-qty::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── CTA BUTTONS ───────────────────────────────────────── */
.bsp-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bsp-btn-buynow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 19px 28px !important;
  background: var(--bsp-espresso) !important;
  color: var(--bsp-white) !important;
  border: none !important;
  font-family: var(--bsp-font-sans) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: background 0.28s var(--bsp-ease), letter-spacing 0.28s, box-shadow 0.28s, transform 0.14s var(--bsp-spring) !important;
  position: relative !important;
  overflow: hidden !important;
}
.bsp-btn-buynow::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transition: left 0.5s var(--bsp-ease);
}
.bsp-btn-buynow:hover::after { left: 160%; }
.bsp-btn-buynow:hover {
  background: var(--bsp-mocha) !important;
  letter-spacing: 0.34em !important;
  box-shadow: 0 6px 28px rgba(44,31,24,0.20) !important;
}
.bsp-btn-buynow:active { transform: scale(0.99) !important; }

.bsp-btn-cart {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 17px 28px !important;
  background: transparent !important;
  color: var(--bsp-espresso) !important;
  border: 1px solid var(--bsp-espresso) !important;
  font-family: var(--bsp-font-sans) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: background 0.25s, color 0.25s, letter-spacing 0.25s, transform 0.14s var(--bsp-spring) !important;
}
.bsp-btn-cart:hover {
  background: var(--bsp-espresso) !important;
  color: var(--bsp-white) !important;
  letter-spacing: 0.33em !important;
}
.bsp-btn-cart:active { transform: scale(0.99) !important; }
.bsp-btn-cart.done {
  background: var(--bsp-espresso) !important;
  color: var(--bsp-white) !important;
}
.bsp-btn-cart:disabled { opacity: 0.6; pointer-events: none; }

/* WooCommerce variable form dentro de .bsp-info */
.bsp-info .variations_form .variations {
  width: 100% !important;
  border: none !important;
  border-collapse: collapse !important;
}
.bsp-info .variations td,
.bsp-info .variations th {
  padding: 8px 0 !important;
  border: none !important;
  vertical-align: middle !important;
}
.bsp-info .variations label {
  font-family: var(--bsp-font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--bsp-warm) !important;
  font-weight: 500 !important;
}
.bsp-info .variations select {
  border: 1px solid var(--bsp-line) !important;
  padding: 12px 14px !important;
  font-family: var(--bsp-font-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--bsp-ink) !important;
  background: var(--bsp-parchment) !important;
  width: 100% !important;
  border-radius: 0 !important;
  outline: none !important;
  transition: border-color 0.2s !important;
}
.bsp-info .variations select:focus { border-color: var(--bsp-espresso) !important; }
.bsp-info .single_add_to_cart_button {
  width: 100% !important;
  padding: 18px 28px !important;
  background: var(--bsp-espresso) !important;
  color: var(--bsp-white) !important;
  border: none !important;
  font-family: var(--bsp-font-sans) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: background 0.25s, letter-spacing 0.25s !important;
  margin-top: 14px !important;
}
.bsp-info .single_add_to_cart_button:hover {
  background: var(--bsp-mocha) !important;
  letter-spacing: 0.34em !important;
}

/* ── ACCORDION ─────────────────────────────────────────── */
.bsp-accordion {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bsp-line);
}
.bsp-acc-item { border-bottom: 1px solid var(--bsp-line); }
.bsp-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--bsp-font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bsp-espresso);
  text-align: left;
  transition: color 0.2s;
}
.bsp-acc-trigger:hover { color: var(--bsp-accent); }

.bsp-acc-icon { flex-shrink: 0; transition: transform 0.3s var(--bsp-ease); }
.bsp-acc-item.open .icon-v { transform-origin: center; transform: scaleY(0); opacity: 0; transition: transform 0.25s, opacity 0.2s; }
.icon-v { transition: transform 0.25s, opacity 0.2s; }

.bsp-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--bsp-ease);
  overflow: hidden;
}
.bsp-acc-item.open .bsp-acc-body { grid-template-rows: 1fr; }
.bsp-acc-inner {
  overflow: hidden;
  font-family: var(--bsp-font-sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--bsp-muted);
  line-height: 1.9;
  padding-bottom: 18px;
}
.bsp-acc-inner p { margin: 0 0 8px; }

/* Rating */
.bsp-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bsp-review-link {
  font-family: var(--bsp-font-sans);
  font-size: 10px;
  font-weight: 300;
  color: var(--bsp-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
  padding: 0;
}
.bsp-review-link:hover { color: var(--bsp-espresso); }

/* ── TOAST ─────────────────────────────────────────────── */
.bsp-toast {
  position: fixed !important;
  bottom: 36px !important;
  right: 36px !important;
  z-index: 9999 !important;
  background: var(--bsp-espresso) !important;
  color: var(--bsp-white) !important;
  padding: 14px 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--bsp-font-sans) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 8px 36px rgba(0,0,0,0.16) !important;
  transform: translateY(80px) !important;
  opacity: 0 !important;
  transition: transform 0.36s var(--bsp-spring), opacity 0.28s !important;
  pointer-events: none !important;
  min-width: 200px !important;
}
.bsp-toast.bsp-toast-show {
  transform: translateY(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.bsp-toast-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bsp-accent-lt);
  flex-shrink: 0;
}

/* ── TABS ──────────────────────────────────────────────── */
.bsp-tabs-wrap {
  border-top: 1px solid var(--bsp-line);
  background: var(--bsp-white);
}
.bsp-tabs {
  display: flex;
  padding: 0 52px;
  border-bottom: 1px solid var(--bsp-line);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.bsp-tabs::-webkit-scrollbar { display: none; }
.bsp-tab {
  padding: 20px 28px;
  font-family: var(--bsp-font-sans);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bsp-sand);
  cursor: pointer;
  border: none;
  border-bottom: 1.5px solid transparent;
  background: none;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  font-weight: 500;
  position: relative;
  top: 1px;
}
.bsp-tab.active { color: var(--bsp-ink); border-bottom-color: var(--bsp-espresso); }
.bsp-tab:hover { color: var(--bsp-espresso); }
.bsp-tab-panel { display: none; }
.bsp-tab-panel.active { display: block; }
.bsp-tab-content {
  padding: 44px 52px;
  font-family: var(--bsp-font-sans);
  font-size: 14px;
  font-weight: 300;
  color: var(--bsp-muted);
  line-height: 2.0;
  max-width: 740px;
  -webkit-font-smoothing: antialiased;
}
.bsp-tab-content strong { color: var(--bsp-espresso); font-weight: 500; }
.bsp-tab-content p { margin-bottom: 14px; }

/* Tabla detalle */
.bsp-attr-table { width: 100%; border-collapse: collapse; }
.bsp-attr-table tr { border-bottom: 1px solid var(--bsp-line); }
.bsp-attr-label-td {
  font-family: var(--bsp-font-sans);
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsp-warm);
  padding: 14px 16px 14px 0;
  width: 150px;
  font-weight: 500;
}
.bsp-attr-value {
  font-family: var(--bsp-font-sans);
  font-size: 13px;
  color: var(--bsp-ink);
  padding: 14px 0;
  font-weight: 300;
}

/* ── RELACIONADOS ──────────────────────────────────────── */
.bsp-related-wrap {
  padding: 72px 52px;
  border-top: 1px solid var(--bsp-line);
  background: var(--bsp-parchment);
}
.bsp-related-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 40px;
}
.bsp-related-title {
  font-family: var(--bsp-font-serif);
  font-size: 40px;
  font-weight: 300;
  color: var(--bsp-ink);
  margin: 0;
}
.bsp-related-all {
  font-family: var(--bsp-font-sans);
  font-size: 9px;
  color: var(--bsp-warm);
  text-decoration: none;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid var(--bsp-line);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.bsp-related-all:hover { color: var(--bsp-espresso); border-bottom-color: var(--bsp-espresso); }
.bsp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.bsp-rel-card { display: flex; flex-direction: column; gap: 14px; }
.bsp-rel-img-wrap {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--bsp-cream);
}
.bsp-rel-img-wrap img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--bsp-ease);
}
.bsp-rel-img-wrap:hover img { transform: scale(1.05); }
.bsp-rel-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bsp-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bsp-font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--bsp-warm);
  padding: 20px;
  text-align: center;
}
.bsp-rel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,17,11,0.30);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  opacity: 0;
  transition: opacity 0.28s var(--bsp-ease);
}
.bsp-rel-img-wrap:hover .bsp-rel-overlay { opacity: 1; }
.bsp-rel-overlay span {
  font-family: var(--bsp-font-sans);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bsp-white);
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 2px;
}
.bsp-rel-info { display: flex; flex-direction: column; gap: 5px; }
.bsp-rel-name {
  font-family: var(--bsp-font-serif);
  font-size: 19px;
  font-style: italic;
  color: var(--bsp-ink);
  text-decoration: none;
  font-weight: 300;
  line-height: 1.2;
  transition: color 0.2s;
}
.bsp-rel-name:hover { color: var(--bsp-accent); }
.bsp-rel-price .price,
.bsp-rel-price p.price {
  font-family: var(--bsp-font-sans) !important;
  font-size: 12px !important;
  color: var(--bsp-muted) !important;
  font-weight: 300 !important;
  margin: 0 !important;
}

/* ── STICKY MOBILE CTA ─────────────────────────────────── */
.bsp-sticky-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--bsp-white);
  border-top: 1px solid var(--bsp-line);
  padding: 12px 20px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 -4px 24px rgba(26,17,11,0.08);
}
.bsp-sticky-cta.visible { display: flex; }
.bsp-sticky-price {
  font-family: var(--bsp-font-sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--bsp-ink);
}
.bsp-sticky-btns { display: flex; gap: 8px; align-items: center; }
.bsp-sticky-wish {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--bsp-line);
  background: var(--bsp-parchment);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bsp-espresso);
  flex-shrink: 0;
  transition: background 0.2s;
}
.bsp-sticky-wish:hover { background: #fce8e3; }
.bsp-sticky-add {
  padding: 0 18px;
  height: 42px;
  background: var(--bsp-parchment);
  border: 1px solid var(--bsp-espresso);
  font-family: var(--bsp-font-sans);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bsp-espresso);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.bsp-sticky-add:hover { background: var(--bsp-espresso); color: var(--bsp-white); }
.bsp-sticky-buy {
  padding: 0 22px;
  height: 42px;
  background: var(--bsp-espresso);
  border: none;
  font-family: var(--bsp-font-sans);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bsp-white);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s;
}
.bsp-sticky-buy:hover { background: var(--bsp-mocha); }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .bsp-main { grid-template-columns: 52% 48% !important; }
  .bsp-title { font-size: 44px !important; }
  .bsp-info { padding: 36px 36px 36px 32px !important; }
  .bsp-gallery { padding: 28px 20px 28px 28px !important; }
}

@media (max-width: 900px) {
  .bsp-main {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .bsp-gallery {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    position: relative !important;
    top: auto !important;
    display: block !important;
  }
  /* En móvil: imagen arriba, thumbs abajo como fila */
  .bsp-main-img { margin-bottom: 12px; }
  .bsp-thumbs {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 8px !important;
    max-height: none !important;
    padding-bottom: 4px;
    scrollbar-width: none !important;
  }
  .bsp-thumbs::-webkit-scrollbar { display: none !important; }
  .bsp-thumb {
    width: 58px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
  }
  .bsp-info {
    padding: 28px 22px !important;
    gap: 18px !important;
    border-left: none !important;
    border-top: 1px solid var(--bsp-line) !important;
  }
  .bsp-title { font-size: clamp(32px, 8vw, 48px) !important; }
  .bsp-tabs { padding: 0 22px !important; }
  .bsp-tab-content { padding: 28px 22px !important; }
  .bsp-related-wrap { padding: 44px 22px !important; }
  .bsp-related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .bsp-related-title { font-size: 28px !important; }
  .bsp-breadcrumb { padding: 12px 22px !important; }
  .bsp-toast { right: 16px !important; left: 16px !important; bottom: 80px !important; }
}

@media (max-width: 480px) {
  .bsp-title { font-size: 30px !important; }
  .bsp-price-now { font-size: 22px !important; }
  .bsp-related-grid { grid-template-columns: repeat(2, 1fr) !important; }
}