/* ============================================
   BRUNO PETSHOP — Design System & Styles
   Adapted for TiendaNube Theme
   ============================================ */

/* === Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@600;700&family=Jost:wght@300;400;500;600;700&display=swap');

/* === Custom Properties === */
:root {
  /* Colors — paleta "porcelana y bronce" (elegancia clase alta) */
  --color-olive: #33322D;
  --color-olive-light: #5C5A52;
  --color-olive-dark: #211F1B;
  --color-cta: #A9834E;
  --color-cta-hover: #8C6B3D;
  --color-cta-light: rgba(169, 131, 78, 0.12);
  --color-bg: #FBFAF7;
  --color-bg-alt: #F3EFE7;
  --color-bg-dark: #1B1A16;
  --color-text: #161513;
  --color-text-secondary: #3E3B35;
  --color-text-light: #6F6A5F;
  --color-gold: #C1A268;
  --color-gold-light: #EDE3CC;
  --color-white: #FFFFFF;
  --color-border: #E7E1D5;
  --color-success: #4CAF50;
  --color-whatsapp: #25D366;

  /* Typography — fuentes finas */
  --font-body: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Container */
  --container-max: 1200px;
  --container-padding: 1.5rem;
}

/* === Utility === */
.bruno-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.bruno-section-title {
  font-family: var(--font-display) !important;
  font-size: 2.2rem !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  text-align: center !important;
  margin-bottom: var(--space-sm) !important;
}

.bruno-section-subtitle {
  font-size: 1.05rem !important;
  color: var(--color-text-secondary) !important;
  text-align: center !important;
  margin-bottom: var(--space-3xl) !important;
  max-width: 550px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Bruno buttons - prefixed to avoid conflicts */
.bruno-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.85rem 2rem;
  border-radius: var(--radius-md);
  font-weight: 400;
  font-size: 1rem;
  transition: all var(--transition-base);
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.bruno-btn-primary {
  background: var(--color-cta);
  color: var(--color-white);
  box-shadow: 0 4px 15px rgba(201, 111, 74, 0.35);
}

.bruno-btn-primary:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 111, 74, 0.45);
  color: var(--color-white);
}

.bruno-btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.bruno-btn-secondary:hover {
  border-color: var(--color-olive);
  color: var(--color-olive);
}

/* Scroll Reveal Animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */
/* Sticky stack: keeps announcement bar + header glued to top while scrolling */
.bruno-sticky-stack {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9998;
}

/* Prevent double-sticky conflict: header inside the stack must not sticky itself */
.bruno-sticky-stack .head-fix,
.bruno-sticky-stack .js-head-main.head-fix {
  position: static !important;
  top: auto !important;
}

.bruno-announcement-bar {
  background: var(--color-olive);
  color: var(--color-white);
  text-align: center;
  padding: 0.55rem var(--container-padding);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-family: var(--font-body);
  /* Misma sombra negra que "¡ENVÍO GRATIS!" para toda la tira */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.55);
}

.bruno-announcement-bar span {
  font-weight: 500;
}

.announcement-emoji {
  font-size: 1.3rem;
  vertical-align: middle;
}

/* "¡ENVÍO GRATIS!" blanco con sombra negra para que resalte sobre el fondo oliva */
.bruno-announcement-bar .announcement-free {
  color: #FFD34D !important;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: 0.12em;
  display: inline-block;
  margin-right: 8px;
}

@keyframes announcement-free-pulse {
  /* El latido ocurre rápido al principio... */
  0% {
    transform: scale(1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.55);
  }
  10% {
    transform: scale(1.14);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1), 0 0 14px rgba(0, 0, 0, 0.7);
  }
  /* ...y se queda quieto el resto del tiempo hasta repetir a los 3s */
  20%, 100% {
    transform: scale(1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.55);
  }
}

/* Respeta a quienes desactivan animaciones por accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .bruno-announcement-bar .announcement-free {
    animation: none;
  }
}

/* ============================================
   SCROLLING TICKER BAR
   ============================================ */
.ticker-bar {
  background: linear-gradient(135deg, var(--color-olive-dark) 0%, var(--color-olive) 50%, var(--color-olive-light) 100%);
  overflow: hidden;
  white-space: nowrap;
  z-index: 999;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 35s linear infinite;
  gap: 0;
}

.ticker-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 8px 2rem 8px 0;
  flex-shrink: 0;
}

.ticker-bar,
.ticker-bar *,
.ticker-item,
.ticker-item *,
.ticker-label,
.ticker-content {
  color: #ffffff !important;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff !important;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
  font-family: var(--font-body);
}

.ticker-label {
  margin-right: 4px;
  color: #ffffff !important;
}

.ticker-pay-icon {
  height: 22px;
  width: auto;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: contain;
}

.ticker-divider {
  color: #ffffff !important;
  opacity: 0.8;
  font-size: 0.7rem;
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ============================================
   HERO SECTION
   ============================================ */
.bruno-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  padding: var(--space-3xl) var(--container-padding);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

.hero-content {
  z-index: 2;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-cta-light);
  color: var(--color-cta);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-xl);
  font-size: 0.85rem;
  font-weight: 400;
  margin-bottom: var(--space-lg);
  animation: pulse-badge 2s infinite;
  font-family: var(--font-body);
}

@keyframes pulse-badge {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

.hero-title {
  font-family: var(--font-display) !important;
  font-size: 3.5rem !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-lg) !important;
}

.hero-title .highlight {
  color: var(--color-olive);
  position: relative;
}

.hero-title .highlight::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(125, 139, 106, 0.15);
  border-radius: 4px;
  z-index: -1;
}

.hero-description {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
  max-width: 480px;
  font-family: var(--font-body);
}

.hero-buttons {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

.hero-stats {
  display: flex;
  gap: var(--space-2xl);
}

.hero-stat {
  display: flex;
  flex-direction: column;
}

.hero-stat-number {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-olive);
  font-family: var(--font-body);
}

.hero-stat-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.hero-image {
  position: relative;
  z-index: 1;
}

.hero-image::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(125, 139, 106, 0.15) 0%, transparent 70%);
  border-radius: var(--radius-full);
  z-index: -1;
}

.hero-floating-card {
  position: absolute;
  background: var(--color-white);
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 400;
  animation: float 3s ease-in-out infinite;
  z-index: 3;
  font-family: var(--font-body);
}

.hero-floating-card.card-1 {
  bottom: 15%;
  right: -15px;
  animation-delay: 0s;
}

.hero-floating-card.card-2 {
  top: 10%;
  right: 10%;
  animation-delay: 1.5s;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* === Offers Carousel === */
.carousel-title {
  font-family: var(--font-display) !important;
  font-size: 2.2rem !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-md) !important;
  text-align: center !important;
}

.offers-carousel {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.carousel-track {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: all;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-cta);
  color: var(--color-white);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-xl);
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 5;
  box-shadow: var(--shadow-md);
}

.slide-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1.5rem 1.5rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: var(--color-white);
  z-index: 4;
}

.slide-info h3 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.2rem !important;
  color: var(--color-white) !important;
}

.slide-info p {
  font-size: 0.9rem;
  opacity: 0.9;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
  line-height: 1;
}

.carousel-arrow:hover {
  background: var(--color-white);
  transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
  left: 12px;
}

.carousel-next {
  right: 12px;
}

.carousel-dots {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.carousel-dot.active {
  background: var(--color-white);
  width: 28px;
  border-radius: 5px;
}

/* ============================================
   CATEGORIES SECTION
   ============================================ */
.bruno-categories {
  padding: var(--space-4xl) 0 var(--space-3xl);
  margin-top: var(--space-2xl);
  background: var(--color-white);
  display: flex;
  align-items: center;
}

.categories-carousel {
  position: relative;
}

/* (Se eliminaron los velos degradé de los bordes: nublaban la primera y la
   última tarjeta de categoría. Con 5 categorías no hay scroll que insinuar.) */
.categories-carousel::before,
.categories-carousel::after {
  content: none !important;
}

.categories-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  z-index: 3;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 2.5rem;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-base);
  line-height: 1;
}

.categories-arrow:hover {
  color: var(--color-olive);
}

.categories-arrow-left {
  left: -20px;
}

.categories-arrow-right {
  right: -20px;
}

.categories-grid {
  display: flex;
  gap: var(--space-xl);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--space-sm) var(--space-md) var(--space-lg);
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* "safe center": centra si las categorias entran, pero si hay muchas
     arranca desde el inicio para que la primera NO quede cortada */
  justify-content: safe center;
}

.categories-grid::-webkit-scrollbar {
  display: none;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  border-radius: var(--radius-xl);
  background: transparent;
  border: none;
  transition: all var(--transition-base);
  cursor: pointer;
  text-align: center;
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 140px;
}

.category-card:hover {
  transform: translateY(-8px);
}

.category-icon {
  width: 165px;
  height: 165px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.category-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  transition: transform 0.4s ease;
}

.category-card:hover .category-icon {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.category-card:hover .category-icon img {
  transform: scale(1.1);
}

.category-name {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-text);
  font-family: var(--font-body);
  white-space: nowrap;
}

/* Category card as link — preserves visual style */
a.category-card {
  text-decoration: none;
  color: inherit;
}

/* Placeholder icon fallback (kept for safety) */
.category-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--color-olive);
  background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
  border-radius: var(--radius-xl);
}

/* ============================================
   PRODUCTS SECTION
   ============================================ */
.bruno-products {
  padding: var(--space-4xl) 0;
  background: var(--color-bg);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.product-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.product-badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  background: #E53935;
  color: var(--color-white);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 2;
}

.product-badge.bestseller {
  background: var(--color-gold);
}

.product-badge.new {
  background: var(--color-olive);
}

.product-wishlist {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  z-index: 2;
  color: var(--color-text-light);
  font-size: 1rem;
  border: none;
  cursor: pointer;
}

.product-wishlist:hover {
  color: #E74C3C;
  transform: scale(1.1);
}

.product-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: var(--color-bg);
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-image img {
  transform: scale(1.08);
}

.product-info {
  padding: var(--space-lg);
}

.product-category {
  font-size: 0.78rem;
  color: var(--color-olive);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
}

.product-name {
  font-weight: 400 !important;
  font-size: 1.05rem !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-sm) !important;
  line-height: 1.3 !important;
  font-family: var(--font-body) !important;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.stars {
  color: var(--color-gold);
  font-size: 0.85rem;
}

.rating-count {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

.product-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-md);
}

.product-price {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-text);
  font-family: var(--font-body);
}

.product-price .original {
  text-decoration: line-through;
  text-decoration-color: #E53935;
  text-decoration-thickness: 2px;
  color: var(--color-text-light);
  font-size: 0.9rem;
  font-weight: 400;
  margin-right: var(--space-xs);
}

.product-add-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-olive);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
}

.product-add-btn:hover {
  background: var(--color-cta);
  transform: scale(1.1);
  color: var(--color-white);
  text-decoration: none;
}

/* Product image as link */
.bruno-product-image-link {
  display: block;
  text-decoration: none;
}

/* Product name as link */
.product-name a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.product-name a:hover {
  color: var(--color-olive);
}

/* Inline add-to-cart form */
.bruno-add-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

/* Product add button as link (for variant products) */
a.product-add-btn {
  text-decoration: none;
  color: var(--color-white);
  font-weight: 500;
  line-height: 1;
}

/* Disabled / out of stock */
.product-add-btn-disabled {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-border);
  color: var(--color-text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Installments */
.bruno-installments {
  font-size: 0.8rem;
  color: var(--color-olive);
  font-weight: 500;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
}

/* Empty products fallback */
.bruno-empty-products {
  display: flex;
  justify-content: center;
  padding: var(--space-3xl) 0;
}

.bruno-empty-message {
  text-align: center;
  color: var(--color-text-secondary);
  max-width: 450px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.bruno-empty-message strong {
  color: var(--color-text);
}

.bruno-empty-hint {
  font-size: 0.9rem;
  margin-top: var(--space-sm);
  color: var(--color-text-light);
}

.products-cta {
  text-align: center;
  margin-top: var(--space-3xl);
}

/* === Productos section — unify typography with header menu (Inter) + black === */
.bruno-products .bruno-section-title,
.bruno-products .bruno-section-subtitle,
.bruno-products .product-name,
.bruno-products .product-name a,
.bruno-products .product-price,
.bruno-products .product-price .original,
.bruno-products .product-category {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

/* Pagination */
.bruno-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding: var(--space-md) 0;
}

.pagination-btn {
  padding: 0.7rem 1.5rem;
  background: var(--color-olive);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 400;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled) {
  background: var(--color-olive-dark);
  transform: translateY(-1px);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-info {
  font-weight: 400;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

/* ============================================
   BRANDS / MARCAS
   ============================================ */
.bruno-brands {
  background: linear-gradient(135deg, var(--color-olive-dark) 0%, var(--color-olive) 50%, var(--color-olive-light) 100%);
  padding: var(--space-2xl) 0;
  position: relative;
  overflow: hidden;
}

.bruno-brands::before {
  content: '🐾';
  position: absolute;
  font-size: 15rem;
  opacity: 0.06;
  top: -40px;
  right: -20px;
  transform: rotate(-15deg);
}

.promo-inner {
  text-align: center;
  color: var(--color-white);
  position: relative;
  z-index: 1;
}

.promo-title {
  font-family: var(--font-display) !important;
  font-size: 2.8rem !important;
  font-weight: 500 !important;
  margin-bottom: var(--space-md) !important;
  color: var(--color-white) !important;
}

.promo-subtitle {
  font-size: 1.15rem;
  opacity: 0.9;
  margin-bottom: var(--space-xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  align-items: center;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  transition: all var(--transition-base);
  width: 100%;
  max-height: 120px;
}

.brand-item:hover {
  transform: translateY(-4px);
}

.brand-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: all var(--transition-base);
}

.brand-item:hover img {
  transform: scale(1.08);
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.bruno-testimonials {
  padding: var(--space-4xl) 0;
  background: var(--color-bg);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.testimonial-card {
  background: var(--color-white);
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-base);
  position: relative;
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.testimonial-card::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--color-olive-light);
  opacity: 0.3;
  position: absolute;
  top: var(--space-md);
  right: var(--space-xl);
  line-height: 1;
}

.testimonial-stars {
  color: var(--color-gold);
  font-size: 0.95rem;
  margin-bottom: var(--space-md);
}

.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.testimonial-info .name {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-text);
}

.testimonial-info .verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--color-success);
  font-weight: 500;
}

/* ============================================
   INSTAGRAM / SOCIAL PROOF
   ============================================ */
.bruno-instagram {
  padding: var(--space-4xl) 0;
  background: var(--color-white);
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

.ig-post {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

.ig-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.ig-post-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
}

.ig-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1.5px solid var(--color-border);
}

.ig-username {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--color-text);
}

.ig-post-image {
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.ig-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.ig-post:hover .ig-post-image img {
  transform: scale(1.03);
}

/* Video sin sonido en las tarjetas de Instagram: encaja igual que la foto */
.ig-post-image .ig-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  transition: transform var(--transition-slow);
}
.ig-post:hover .ig-post-image .ig-video {
  transform: scale(1.03);
}

/* H1 accesible para SEO pero invisible (no altera el diseño) */
.bruno-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bloque "Sobre Bruno's" — texto SEO de cierre, discreto y armonico */
.bruno-seo-about {
  padding: 44px 16px 50px;
  background: #faf7f0;
  text-align: center;
}
.bruno-seo-about .bruno-container {
  max-width: 820px;
}
.bruno-seo-about-title {
  font-family: var(--font-display, "Playfair Display", Georgia, serif);
  font-size: 1.4rem;
  color: #1c1c1a;
  margin: 0 0 14px;
}
.bruno-seo-about p {
  color: #6b6b66;
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 auto 10px;
  max-width: 760px;
}
.bruno-seo-about p strong {
  color: #4a4a45;
  font-weight: 500;
}
@media (max-width: 600px) {
  .bruno-seo-about { padding: 32px 16px 38px; }
  .bruno-seo-about-title { font-size: 1.2rem; }
  .bruno-seo-about p { font-size: 0.9rem; }
}

.ig-post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}

.ig-actions-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ig-icon {
  width: 22px;
  height: 22px;
  cursor: pointer;
  color: var(--color-text);
  transition: transform var(--transition-fast);
}

.ig-icon:hover {
  transform: scale(1.15);
}

.ig-heart {
  color: #ED4956;
}

.ig-save {
  color: var(--color-text);
}

/* ============================================
   NEWSLETTER
   ============================================ */
.bruno-newsletter {
  padding: var(--space-lg) 0;
  background: var(--color-bg-alt);
  margin-bottom: 0 !important;
}

.newsletter-inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.newsletter-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.newsletter-title {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  margin-bottom: var(--space-xs) !important;
  color: var(--color-text) !important;
}

.newsletter-text {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
}

.newsletter-form {
  display: flex;
  gap: var(--space-sm);
  max-width: 480px;
  margin: 0 auto;
}

.newsletter-form input {
  flex: 1;
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.newsletter-form input:focus {
  outline: none;
  border-color: var(--color-olive);
}

.newsletter-form button {
  padding: 0.9rem 1.8rem;
  background: var(--color-cta);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.95rem;
  transition: all var(--transition-base);
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.newsletter-form button:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
}

/* ============================================
   FOOTER
   ============================================ */
.bruno-footer {
  background: linear-gradient(180deg, #1f1f1d 0%, #121211 100%);
  color: rgba(255, 255, 255, 0.88);
  padding: 4.2rem 0 1.4rem; /* altura reducida ~30% */
  margin-top: 0 !important;
  border-top: none !important;
  /* Fina línea verde de marca arriba, sin pelear con los border-top !important */
  box-shadow: inset 0 3px 0 var(--color-olive);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: start;          /* contenido de cada columna a la izquierda */
  text-align: left;
  align-items: start;
  gap: var(--space-3xl);
  margin: 0 0 var(--space-2xl);
}

/* Listas y enlaces alineados a la izquierda */
.bruno-footer .footer-column ul {
  align-items: flex-start;
}
.bruno-footer .footer-contact li,
.bruno-footer .footer-contact a {
  justify-content: flex-start;
}

/* Columna de medios de pago — logos alineados a la izquierda */
.footer-payments .footer-pay-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  max-width: 130px;
}
.footer-payments .footer-pay-logos img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain;
  background: #fff;
  border-radius: 5px;
  padding: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.footer-brand .logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-white);
  margin-bottom: var(--space-md);
  text-decoration: none;
}

.footer-brand .logo-icon-img {
  height: 42px;
  width: auto;
  border-radius: var(--radius-full);
}

.footer-brand p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-lg);
}

.footer-social {
  display: flex;
  gap: var(--space-md);
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all var(--transition-fast);
  text-decoration: none;
  color: white;
}

.footer-social a:hover {
  background: var(--color-olive);
  transform: translateY(-3px);
}

.footer-column h4 {
  color: var(--color-white) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  margin-bottom: var(--space-lg) !important;
  font-family: var(--font-body) !important;
}

.footer-column ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.62) !important;
  transition: color var(--transition-fast);
  text-decoration: none;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  line-height: 1.4 !important;
}

.bruno-footer .footer-column li {
  line-height: 1.4;
}

.footer-column a:hover {
  color: var(--color-olive-light) !important;
  padding-left: 3px;
}

/* WhatsApp inline icon in footer contact (legacy) */
.footer-wa-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  fill: currentColor;
  flex-shrink: 0;
}

/* Contact column — icon + text perfectly inline, icon never wraps */
.footer-contact li {
  list-style: none !important;
}
.footer-contact a {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
.footer-contact .footer-ct-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  color: rgba(255, 255, 255, 0.75) !important;
}
.footer-contact a > span,
.footer-contact .__cf_email__ {
  display: inline-block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.footer-bottom {
  border-top: none;
  padding-top: var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
}

.payment-icons {
  display: flex;
  gap: var(--space-sm);
  font-size: 1.4rem;
}

/* ============================================
   WHATSAPP FLOATING BUTTON
   ============================================ */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
}

.whatsapp-float a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--color-whatsapp);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  color: var(--color-white);
  font-size: 1.8rem;
  transition: all var(--transition-base);
  animation: whatsapp-pulse 2s infinite;
  text-decoration: none;
}

.whatsapp-float a:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

.whatsapp-float a svg {
  width: 32px;
  height: 32px;
  fill: var(--color-white);
}

@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-tooltip {
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-white);
  color: var(--color-text);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 400;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
}

/* ============================================
   MOBILE NAV OVERLAY
   ============================================ */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.mobile-nav.active {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav-content {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 300px;
  background: var(--color-white);
  padding: var(--space-3xl) var(--space-xl);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-xl);
}

.mobile-nav.active .mobile-nav-content {
  transform: translateX(0);
}

.mobile-nav-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  font-size: 1.5rem;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.mobile-nav-links a {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-text);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.mobile-nav-links a:hover {
  color: var(--color-olive);
}

/* ============================================
   WELCOME POPUP
   ============================================ */
.welcome-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  padding: var(--space-lg);
}

.welcome-popup-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.welcome-popup {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  max-width: 820px;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: scaleIn 0.3s ease;
}

.popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-text);
  z-index: 5;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.popup-close:hover {
  background: var(--color-border);
  transform: scale(1.1);
}

.popup-content {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}

.popup-form-side {
  padding: 2.5rem;
}

.popup-title {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--color-text) !important;
  margin-bottom: 1.8rem !important;
}

.popup-highlight {
  color: var(--color-cta);
  font-weight: 500;
}

.popup-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.popup-field {
  margin-bottom: var(--space-lg);
}

.popup-field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin-bottom: 6px;
}

.popup-field input,
.popup-field select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition-fast);
}

.popup-field input:focus,
.popup-field select:focus {
  outline: none;
  border-color: var(--color-olive);
}

.popup-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
}

.popup-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-olive);
  cursor: pointer;
}

.popup-submit {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  padding: 0.9rem 2rem;
}

.popup-image-side {
  position: relative;
  overflow: hidden;
}

/* ============================================
   WELCOME POPUP — Variante BANNER (envio + cuotas)
   Reemplaza el form viejo por un banner llamativo
   ============================================ */
.welcome-popup-banner {
  background: #FBFAF7 !important;
  max-width: 920px !important;
  border-radius: 20px !important;
  overflow: hidden;
  border: 1px solid #1c1c1a;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4) !important;
}

.welcome-popup-banner .popup-close {
  background: transparent !important;
  color: #1c1c1a !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  width: 26px;
  height: 26px;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1;
  padding: 0;
  top: 12px;
  right: 14px;
}

.welcome-popup-banner .popup-close:hover {
  background: transparent !important;
  color: #33322D !important;
  transform: scale(1.2);
}

.popup-banner-content {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 0.6rem;
  padding: 2.5rem 2.8rem;
}

.popup-banner-text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.popup-banner-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.popup-banner-eyebrow {
  display: inline-block;
  font-family: var(--font-body, sans-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #33322D;
  background: rgba(125, 139, 106, 0.12);
  padding: 5px 12px;
  border-radius: 999px;
  align-self: flex-start;
  width: fit-content;
}

.popup-banner-title {
  font-family: var(--font-display, "Playfair Display", Georgia, serif) !important;
  font-size: clamp(1.7rem, 4.2vw, 2.5rem) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  color: #1c1c1a !important;
  margin: 0 !important;
  letter-spacing: -0.02em;
}

.popup-banner-accent {
  color: #33322D !important;
  font-weight: 600;
  position: relative;
  display: inline-block;
  padding: 0 4px;
}

.popup-banner-accent::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  height: 8px;
  background: rgba(201, 168, 76, 0.45);
  z-index: -1;
  border-radius: 2px;
}

.popup-banner-subtitle {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.55;
  color: #2d2d2a;
  margin: 0;
  font-weight: 500;
}

.popup-banner-subtitle strong {
  color: #1c1c1a;
  font-weight: 500;
}

.popup-banner-divider {
  height: 2px;
  background: linear-gradient(to right, rgba(28, 28, 26, 0.2), rgba(28, 28, 26, 0.05));
  margin: 4px 0;
  border-radius: 1px;
}

/* Lado de la ilustracion (camion con logo) */
.popup-banner-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.bruno-truck-svg,
.bruno-truck-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  animation: brunoTruckRoll 1.2s ease-out 0.2s both;
}

/* La imagen ya viene con fondo transparente, no necesita blend mode */
.bruno-truck-img {
  background: transparent;
}

/* Logo de Mercado Pago dentro del eyebrow de financiacion */
.popup-banner-eyebrow-mp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-left: 6px !important;
  padding-right: 12px !important;
}

.popup-banner-mp-logo {
  height: 24px !important;
  width: auto !important;
  max-width: 40px;
  display: inline-block !important;
  vertical-align: middle;
  object-fit: contain;
}

/* Alcancía del eyebrow "No pagues de más" — mismo tamaño que el logo de MP */
.popup-banner-piggy {
  height: 24px;
  width: 24px;
  flex: 0 0 auto;
}

@keyframes brunoTruckRoll {
  from {
    transform: translateX(60px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* === Responsive banner === */
@media (max-width: 768px) {
  .welcome-popup-banner {
    max-width: 96vw !important;
    border-width: 1px;
  }
  .popup-banner-content {
    grid-template-columns: 1fr;
    padding: 2rem 1.4rem 1.6rem;
    gap: 1.2rem;
  }
  .popup-banner-text {
    gap: 1rem;
    order: 2;
  }
  .popup-banner-illustration {
    padding: 0;
    order: 1;
  }
  .bruno-truck-svg,
  .bruno-truck-img {
    width: 100%;
    max-width: 320px;
  }
  .popup-banner-illustration {
    margin: 0;
  }
  .popup-banner-title {
    font-size: 1.6rem !important;
    text-align: center;
  }
  .popup-banner-subtitle {
    text-align: center;
    font-size: 0.95rem;
  }
  .popup-banner-eyebrow {
    align-self: center;
  }
  .popup-banner-row {
    align-items: center;
  }
}

@media (max-width: 420px) {
  .popup-banner-title {
    font-size: 1.4rem !important;
  }
  .bruno-truck-svg,
  .bruno-truck-img {
    max-width: 260px;
  }
}

.popup-image-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-guau {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-cta);
  color: var(--color-white);
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-xl);
  font-size: 1.1rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================
   GLOBAL OVERRIDES FOR TIENDANUBE
   ============================================ */
body {
  font-family: var(--font-body) !important;
  background-color: var(--color-bg) !important;
  -webkit-font-smoothing: antialiased !important;
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  font-family: var(--font-display) !important;
}

/* Hide TiendaNube default home sections when our custom ones load */
.js-home-sections-container {
  display: none !important;
}

/* Style TiendaNube header to match */
.head-main,
.js-head-main {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
  .popup-content {
    grid-template-columns: 1fr;
  }

  .popup-image-side {
    display: none;
  }

  .popup-form-side {
    padding: 2rem 1.5rem;
  }

  .popup-title {
    font-size: 1.3rem !important;
  }

  .popup-form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .hero-title {
    font-size: 2.8rem !important;
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 1.2rem;
  }

  .bruno-hero {
    min-height: auto;
    padding: var(--space-xl) 0;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--container-padding);
  }

  .hero-title {
    font-size: 2.4rem !important;
  }

  .hero-image {
    order: -1;
  }

  .hero-floating-card {
    display: none;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-buttons .bruno-btn {
    width: 100%;
    justify-content: center;
  }

  .bruno-section-title {
    font-size: 1.8rem !important;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .brands-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-lg) !important;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .promo-title {
    font-size: 2rem !important;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .mobile-nav {
    display: block;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem !important;
  }

  .hero-stats {
    gap: var(--space-lg);
  }

  .products-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
  }

  .brands-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-md) !important;
  }

  .whatsapp-float a {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
  }
}

/* ============================================
   TIENDANUBE HEADER — Bruno Style Override
   Forces single-row layout: Logo → Nav → Search → Utils
   ============================================ */

/* === Main Header Container === */
.bruno-header {
  background: var(--color-white) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0 !important;
  font-family: var(--font-body) !important;
  box-shadow: none !important;
}

/* === Single-Row Layout === */
.bruno-header-inner {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  /* Menos aire a la IZQUIERDA para hacer lugar a "Ofertas" sin tocar la derecha */
  padding: 0.6rem 2rem 0.6rem 0.75rem !important;
  min-height: 60px !important;
}

/* Achico solo el espacio entre el logo y el menú (corre el menú hacia la izquierda,
   le da lugar a "Ofertas" y no mueve nada del lado derecho) */
.bruno-header-inner > .bruno-header-logo {
  margin-right: -1.1rem !important;
}

/* Prevent TiendaNube from stacking rows */
.bruno-header .head-row,
.bruno-header .container,
.bruno-header .container-fluid,
.bruno-header .row {
  display: contents !important;
}

/* === Logo + Brand Name — SIDE BY SIDE === */
.bruno-header-logo {
  flex: 0 0 auto !important;
}

.bruno-logo-link {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
  text-decoration: none !important;
  color: var(--color-text) !important;
}

.bruno-logo-img {
  height: 54px !important;
  width: 54px !important;
  border-radius: 50% !important;
  border: 3px solid var(--color-gold) !important;
  box-shadow: 0 0 0 1px rgba(193, 162, 104, 0.35) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.bruno-brand-name {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* Mobile search: por default ocultos (se muestran via media query mobile) */
.bruno-mobile-search-form,
.bruno-mobile-search-toggle {
  display: none;
}

/* === Navigation Links — Well spaced === */
.bruno-header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  flex: 0 0 auto !important;
}

.bruno-header-nav a {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  padding: 0.45rem 0.75rem !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  letter-spacing: 0.01em !important;
}

.bruno-header-nav a:hover {
  color: var(--color-olive) !important;
  background: rgba(125, 139, 106, 0.06) !important;
}

/* === Search Bar — más ancha === */
.bruno-header-search {
  flex: 1 1 auto !important;
  min-width: 280px !important;
  max-width: 500px !important;
}

.bruno-header-search .search-container {
  width: 100% !important;
  margin: 0 !important;
}

.bruno-header-search .form-group {
  position: relative !important;
  margin: 0 !important;
}

.bruno-header-search .form-control,
.bruno-header-search input[type="search"],
.bruno-header-search .js-search-input,
.bruno-header-search .search-input {
  border: 1.5px solid #262521 !important;
  border-radius: 50px !important;
  padding: 0.5rem 2.8rem 0.5rem 1.2rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  background: var(--color-bg) !important;
  transition: border-color var(--transition-fast) !important;
  width: 100% !important;
  height: 40px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

.bruno-header-search .form-control:focus,
.bruno-header-search input[type="search"]:focus,
.bruno-header-search .js-search-input:focus {
  border-color: var(--color-olive) !important;
  outline: none !important;
  background: var(--color-white) !important;
}

.bruno-header-search .search-input-submit {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
}

.bruno-header-search .search-input-submit .icon-inline {
  width: 18px !important;
  height: 18px !important;
  color: #262521 !important;
}

/* === Search Suggest Dropdown — clean white, aligned to the search bar === */
/* Position/width: only in the desktop bar, floating right below the input */
.bruno-header-search {
  position: relative !important;
}

.bruno-header-search .search-suggest {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Appearance: applies to EVERY search box (desktop bar + lupa modal) */
.search-suggest {
  max-height: calc(100vh - 140px) !important;
  background: var(--color-white) !important;
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 99999 !important;
}

.search-suggest-list {
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
}

.search-suggest-item {
  padding: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.search-suggest-item:last-of-type {
  border-bottom: none !important;
}

.search-suggest-link {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: background var(--transition-fast) !important;
}

.search-suggest-link:hover {
  background: rgba(125, 139, 106, 0.06) !important;
}

.search-suggest-image-container {
  flex: 0 0 auto !important;
  width: 52px !important;
  padding: 0 !important;
}

.search-suggest-image {
  width: 52px !important;
  height: 52px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid var(--color-border) !important;
  display: block !important;
  background: var(--color-bg) !important;
}

.search-suggest-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.search-suggest-name {
  margin: 0 0 2px 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Letters matching the search query, painted green (covers every tag the
   Tienda Nube `highlight` filter might output) */
.search-suggest-name strong,
.search-suggest-name b,
.search-suggest-name em,
.search-suggest-name mark,
.search-suggest-name .highlight,
.search-suggest-name .highlighted-text {
  color: var(--color-olive) !important;
  background: transparent !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

.search-suggest-text p {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  color: var(--color-text-secondary) !important;
  line-height: 1.2 !important;
}

.search-suggest-icon {
  color: var(--color-text-secondary) !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 auto !important;
}

.search-suggest .btn,
.js-search-suggest-all-link.btn {
  display: block !important;
  width: calc(100% - 12px) !important;
  margin: 4px 6px 8px 6px !important;
  padding: 9px !important;
  text-align: center !important;
  background: var(--color-olive) !important;
  background-color: var(--color-olive) !important;
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
}

.search-suggest .btn:hover,
.js-search-suggest-all-link.btn:hover {
  background: var(--color-olive-dark) !important;
  background-color: var(--color-olive-dark) !important;
}

/* === Utility Icons — Match reference image === */
.bruno-header-utils {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.bruno-header-utils .utilities-container {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 2.4rem !important;
}

.bruno-header-utils .utilities-item {
  position: relative !important;
}

/* Each utility: icon on top, text below */
.bruno-header-utils .utility-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  text-align: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.bruno-header-utils .utility-head a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  text-decoration: none !important;
  color: var(--color-text) !important;
  position: relative !important;
}

/* Icon sizing — compact */
.bruno-header-utils .icon-inline,
.bruno-header-utils svg.icon-inline {
  width: 20px !important;
  height: 20px !important;
  color: var(--color-text) !important;
}

/* Inline SVG icons (cart, phone, user) — render guaranteed, independent of sprite */
.bruno-header-utils .bruno-inline-icon {
  display: inline-block !important;
  fill: none !important;
  stroke: var(--color-text) !important;
  color: var(--color-text) !important;
  flex-shrink: 0 !important;
}

/* Utility labels under icons — same font as .category-name, smaller size */
.bruno-header-utils .utility-name {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  display: block !important;
}

/* === Cart special: icon + badge + $0.00 in a ROW === */
.bruno-util-cart .utility-head,
.bruno-util-cart .utility-head a {
  flex-direction: row !important;
  gap: 0.4rem !important;
}

/* Bajar el carrito: el globito de arriba lo hacía ver descentrado */
.bruno-util-cart {
  margin-top: 7px !important;
}

.bruno-util-cart .icon-inline,
.bruno-util-cart svg.icon-inline {
  width: 22px !important;
  height: 22px !important;
}

.bruno-cart-price {
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  white-space: nowrap !important;
}

/* Cart badge — red dot on top-right of cart icon */
.badge-amount {
  background: var(--color-cta) !important;
  color: #FFFFFF !important;
  font-size: 0.6rem !important;
  min-width: 15px !important;
  height: 15px !important;
  line-height: 15px !important;
  border-radius: var(--radius-full) !important;
  font-weight: 500 !important;
  padding: 0 3px !important;
  position: absolute !important;
  top: -5px !important;
  right: auto !important;
  left: 12px !important;
}

/* Dropdown menus */
.subutility-list,
.nav-dropdown-content {
  background: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--space-sm) !important;
  z-index: 9999 !important;
}

.subutility-list-item a,
.nav-accounts-link {
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--color-text) !important;
  padding: 0.5rem 0.8rem !important;
  border-radius: var(--radius-sm) !important;
}

.subutility-list-item a:hover,
.nav-accounts-link:hover {
  background: var(--color-bg) !important;
  color: var(--color-olive) !important;
}

/* === Mobile Hamburger === */
.bruno-mobile-menu {
  flex: 0 0 auto !important;
}

.bruno-mobile-menu a {
  color: var(--color-text) !important;
  padding: 0.3rem !important;
}

.bruno-mobile-menu .icon-inline {
  width: 24px !important;
  height: 24px !important;
}

/* === Category page — sidebar + header: Inter + black === */
.category-body,
.category-body h1,
.category-body h2,
.category-body h3,
.category-body h4,
.category-body h5,
.category-body h6,
.category-body .title-section,
.category-body p,
.category-body span,
.category-body a,
.category-body label,
.category-body li,
.category-body .btn-link,
.category-body .btn-link-primary,
.category-body .chip,
.category-body .checkbox-container,
.page-header,
.page-header h1,
.page-header h2,
.page-header .title {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

/* Keep hover color consistent (olive, not reddish) */
.category-body a:hover,
.category-body .btn-link:hover,
.category-body .btn-link-primary:hover {
  color: var(--color-olive) !important;
}

/* Breadcrumbs — same font / black, not reddish */
.breadcrumbs,
.breadcrumbs .crumb,
.breadcrumbs .crumb a,
.breadcrumbs .crumb.active,
.breadcrumbs .divider {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}
.breadcrumbs .crumb a:hover {
  color: var(--color-olive) !important;
}

/* Category controls bar (sort-by dropdown "Más vendidos", filter counts, etc.) */
.js-category-controls,
.category-controls,
.category-controls select,
.category-controls option,
.category-controls label,
.category-controls span,
.category-controls a,
.category-controls .btn-default,
.category-controls .font-weight-bold {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}
.category-controls a:hover,
.category-controls .btn-default:hover {
  color: var(--color-olive) !important;
}

/* === Related / complementary products section title — black, Inter === */
.section-products-related,
.section-products-related h1,
.section-products-related .h1,
.section-products-related h2,
.section-products-related .h2,
.section-products-related .text-primary,
.js-related-products h1,
.js-related-products .h1,
.js-related-products h2,
.js-related-products .h2,
.js-related-products .text-primary,
.js-complementary-products h1,
.js-complementary-products .h1,
.js-complementary-products h2,
.js-complementary-products .h2,
.js-complementary-products .text-primary {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

/* === Payment method logos (below price) — click opens TN modal === */
.bruno-pay-logos-link {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
}

.bruno-pay-logos-link:hover {
  opacity: 0.75 !important;
  text-decoration: none !important;
}

.bruno-pay-real-logo {
  width: 38px !important;
  height: 24px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  flex-shrink: 0 !important;
}

/* === Payments modal (#installments-modal) — unified typography === */
#installments-modal,
#installments-modal h1,
#installments-modal h2,
#installments-modal h3,
#installments-modal h4,
#installments-modal h5,
#installments-modal h6,
#installments-modal p,
#installments-modal span,
#installments-modal a,
#installments-modal li,
#installments-modal label,
#installments-modal .text-primary,
#installments-modal .text-accent,
#installments-modal .modal-title {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

/* Trust icons (Compra protegida / Cambios y devoluciones) on product page
   + generic icons inside payments modal — olive color.
   Does NOT affect brand logos (those are <img>, not <svg>). */
#installments-modal svg.icon-inline,
#installments-modal svg.svg-icon-primary,
#installments-modal svg.svg-icon-accent,
#installments-modal svg.svg-icon-text,
.js-product-container .form-row svg.svg-icon-text,
.js-product-container .form-row svg.icon-inline,
.js-product-detail .form-row svg.svg-icon-text,
.js-product-detail .form-row svg.icon-inline {
  color: var(--color-olive) !important;
  fill: var(--color-olive) !important;
}

/* === Payments modal — Bruno: header Mercado Pago + separadores === */
.bruno-mp-promo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #FAFAF7;
}
.bruno-mp-promo-logo {
  height: 22px;
  width: auto;
  flex-shrink: 0;
}
.bruno-mp-promo-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text) !important;
}
.bruno-mp-promo-text strong {
  color: var(--color-olive) !important;
  font-weight: 500;
}

/* Tabs de medios de pago: un poco de aire debajo */
#installments-modal .js-tab-container {
  margin-top: 4px;
}
#installments-modal .tab-group {
  margin-bottom: 0;
}

/* Aplano las "cajas" amontonadas de cada medio de pago (estilo limpio) */
#installments-modal .box.p-3,
#installments-modal .js-info-payment-method-container {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 0 4px 0 !important;
}

/* Separador prolijo arriba del título de CADA medio de pago */
#installments-modal .js-payment-method-title {
  border-top: 1px solid var(--color-border) !important;
  padding-top: 16px !important;
  margin-top: 16px !important;
  font-weight: 500 !important;
}

/* Logos de tarjetas: tamaño parejo y separados */
#installments-modal .card-img {
  height: 24px !important;
  width: auto !important;
  margin: 2px 6px 2px 0 !important;
  vertical-align: middle !important;
}

/* Oculto la pestaña "Mercado Pago - Hasta 20% OFF": está repetida,
   el texto de arriba (header) ya lo dice */
#installments-modal .js-payments-tab-group {
  display: none !important;
}

/* Tabla de cuotas: que no se estire de punta a punta. Pego todo a la izquierda */
#installments-modal .js-payments-table {
  width: auto !important;
  max-width: 100% !important;
}
#installments-modal .js-payments-table td {
  padding: 4px 18px 4px 0 !important;
  white-space: normal !important;
}
#installments-modal .js-payments-table td.text-right {
  text-align: left !important;
}

/* "Volver al producto": también pegado a la izquierda */
#installments-modal .modal-footer .text-right {
  text-align: left !important;
}
#installments-modal .modal-footer .pull-right {
  float: none !important;
}

/* Saco el scroll horizontal innecesario del modal */
#installments-modal .modal-body,
#installments-modal .js-tab-panel,
#installments-modal .tab-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* === Product Pages — unified typography: Inter + black, respect sizes === */
.js-product-container,
.js-product-container h1,
.js-product-container h2,
.js-product-container h3,
.js-product-container h4,
.js-product-container h5,
.js-product-container .product-name,
.js-product-container .product-description,
.js-product-container p,
.js-product-container span,
.js-product-container a,
.js-product-container label,
.js-product-container li {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

.js-item-product .item-image {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

.js-item-product {
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
}

.js-item-product:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* === Footer Legal === */
.footer-legal {
  background: #111 !important;
  padding: 10px 0 !important;
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.5) !important;
}

.footer-legal a:hover {
  color: var(--color-olive-light) !important;
}

/* === Kill white bar between newsletter and footer === */
footer.bruno-footer {
  margin-top: 0 !important;
  border-top: none !important;
}

/* TiendaNube wrapper adds .mt-4 around footer */
.bruno-footer.mt-4,
footer.mt-4,
.mt-4:has(> .bruno-footer),
.bruno-footer+.footer-legal,
.js-footer-legal {
  margin-top: 0 !important;
  border-top: none !important;
}

/* === Header Responsive === */
@media (max-width: 767px) {
  .bruno-header-inner {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    padding: 0.5rem 1rem !important;
    min-height: auto !important;
  }

  .bruno-header-logo {
    flex: 1 1 auto !important;
  }

  .bruno-logo-img {
    height: 34px !important;
    width: 34px !important;
  }

  .bruno-brand-name {
    font-size: 1.3rem !important;
  }

  .bruno-header-nav {
    display: none !important;
  }

  .bruno-header-search {
    display: none !important;
  }

  /* Keep utils visible but compact on mobile */
  .bruno-header-utils .utility-name {
    display: none !important;
  }

  .bruno-header-utils .utilities-container {
    gap: 0.8rem !important;
  }

  .bruno-header-utils .icon-inline {
    width: 22px !important;
    height: 22px !important;
  }

  /* === MOBILE SEARCH BAR EN EL HEADER === */
  .bruno-mobile-search-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--color-text);
    border-radius: 999px;
    transition: background 0.18s ease;
    flex-shrink: 0;
    order: 5;
  }

  .bruno-mobile-search-toggle:hover,
  .bruno-mobile-search-toggle:focus {
    background: rgba(0, 0, 0, 0.06);
    outline: none;
  }

  .bruno-mobile-search-toggle svg {
    display: block;
  }

  .bruno-search-svg-close { display: none !important; }

  .bruno-header-inner.is-searching .bruno-search-svg-open { display: none !important; }
  .bruno-header-inner.is-searching .bruno-search-svg-close { display: block !important; }

  /* Form de busqueda mobile: colapsado por default, se expande con .is-searching */
  .bruno-mobile-search-form {
    display: flex !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    opacity: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: flex-basis 0.32s ease, width 0.32s ease, opacity 0.22s ease, margin 0.3s ease;
  }

  .bruno-header-inner.is-searching .bruno-mobile-search-form {
    flex: 1 1 auto !important;
    width: auto !important;
    opacity: 1;
    margin: 0 6px;
  }

  .bruno-mobile-search-input {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 8px 14px;
    border: 1.5px solid #1a1a1a;
    border-radius: 0;
    background: #FBFAF7;
    font-size: 14px;
    font-family: var(--font-body);
    color: #1c1c1a;
    outline: none;
    box-sizing: border-box;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .bruno-mobile-search-input::placeholder {
    color: #8c8473;
  }

  .bruno-mobile-search-input:focus {
    border-color: #1a1a1a;
    box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12);
  }

  /* Brand name "Bruno's": slide-out a la izquierda cuando la busqueda esta activa */
  .bruno-brand-name {
    display: inline-block !important;
    max-width: 200px !important;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.32s ease, opacity 0.22s ease, transform 0.32s ease, margin 0.32s ease !important;
    transform: translateX(0);
  }

  .bruno-header-inner.is-searching .bruno-brand-name {
    max-width: 0 !important;
    opacity: 0 !important;
    transform: translateX(-30px) !important;
    margin-left: -8px !important;
  }
  /* === FIN MOBILE SEARCH === */

  /* === Instagram: show only first 2 posts on mobile === */
  .instagram-grid .ig-post:nth-child(n+3) {
    display: none !important;
  }

  .instagram-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-md) !important;
  }

  /* === Hero stats: center on mobile === */
  .hero-stats {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* === Footer: remove white bar between footer and legal === */
  .bruno-footer {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  .footer-bottom {
    border-top: none !important;
  }

  .js-footer-legal,
  .footer-legal {
    border-top: none !important;
    margin-top: 0 !important;
  }

  /* === Fix horizontal scroll on mobile === */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* === Categories: revert desktop height on mobile === */
  .bruno-categories {
    min-height: auto !important;
    display: block !important;
    padding: var(--space-lg) 0 var(--space-3xl) !important;
  }

  .categories-grid {
    justify-content: flex-start !important;
  }

  .category-icon {
    width: 120px !important;
    height: 120px !important;
  }

  .category-card {
    min-width: 130px !important;
  }

  /* === Mobile menu: remove orange topbar === */
  .navigation-topbar {
    background-color: var(--color-bg) !important;
    background: var(--color-bg) !important;
  }
}
/* ============================================================
   NUCLEAR OVERRIDE — Force Inter + black everywhere.
   Kill reddish "primary_color" theme color globally.
   Applied at the END of the file for maximum precedence.
   ============================================================ */

/* Font family: everything Inter, except logo "Bruno's" (Playfair) */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body p, body span, body a, body label, body li, body div,
body td, body th, body input, body select, body textarea, body button,
body .text-primary, body .text-accent, body .text-danger,
body .btn, body .btn-link, body .btn-link-primary,
body .title-primary, body .title-section,
body .panel, body .panel-header, body .panel-subheader,
body .page-header, body .page-header .title,
body .breadcrumbs, body .breadcrumbs .crumb,
body .form-label, body .form-control,
body .product-name, body .product-price, body .product-description,
body .js-price-container, body .price-compare,
body .modal, body .modal-title, body .modal-header, body .modal-body, body .modal-footer,
body .chip, body .badge, body .label,
body .headbar, body .panel-footer, body .summary, body .summary-total,
body .accordion, body .tab-item, body .announcement {
  font-family: var(--font-body) !important;
}

body .bruno-brand-name,
body .bruno-brand-name *,
body .footer-brand .logo span {
  font-family: var(--font-display) !important;
}

/* Color: kill primary/accent red on text everywhere */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6,
body p, body span, body label, body li,
body .text-primary, body .text-accent,
body .title-primary, body .title-section,
body .panel-header, body .panel-subheader,
body .page-header, body .page-header .title,
body .breadcrumbs, body .breadcrumbs .crumb, body .breadcrumbs .crumb.active, body .breadcrumbs .divider,
body .js-price-display, body .price-compare,
body .product-name, body .product-price,
body .modal-title, body .summary-title,
body .announcement, body .chip,
body .js-price-container h2, body .js-price-container h4 {
  color: var(--color-text) !important;
}

/* Links: default black, olive on hover */
body a,
body .btn-link,
body .btn-link-primary {
  color: var(--color-text) !important;
}
body a:hover,
body .btn-link:hover,
body .btn-link-primary:hover {
  color: var(--color-olive) !important;
}

/* SVG "primary/accent" fills that render red — make them olive */
body svg.svg-icon-primary,
body svg.svg-icon-accent,
body .text-primary svg,
body .text-accent svg {
  color: var(--color-olive) !important;
  fill: var(--color-olive) !important;
}

/* ====== EXCEPTIONS — keep original color for explicit elements ====== */

/* Red badge "Oferta" */
body .product-badge {
  color: #fff !important;
}

/* Red strike-through on original price */
body .product-price .original {
  text-decoration-color: #E53935 !important;
}

/* Keep Oferta/CTA primary button text white */
body .bruno-btn-primary,
body .bruno-btn-primary *,
body .btn-primary,
body .btn-primary * {
  color: #fff !important;
}

/* Footer: keep link color as-is (already 60% white on dark bg) */
body .bruno-footer,
body .bruno-footer h4,
body .footer-column a,
body .footer-column h4 {
  color: inherit !important;
}
body .footer-column h4 {
  color: var(--color-white) !important;
}
body .footer-column a {
  color: rgba(255, 255, 255, 0.6) !important;
}
body .footer-column a:hover {
  color: var(--color-olive-light) !important;
  padding-left: 3px;
}
body .bruno-footer * {
  font-family: var(--font-body) !important;
}

/* Payment button — keep olive text/border */
body .bruno-pay-methods-btn {
  color: var(--color-olive) !important;
}
body .bruno-pay-methods-btn:hover {
  color: #fff !important;
}

/* Icons marked explicitly olive (product page trust + payments modal) */
#installments-modal svg.icon-inline,
#installments-modal svg.svg-icon-primary,
#installments-modal svg.svg-icon-accent,
#installments-modal svg.svg-icon-text,
.js-product-container .form-row svg.svg-icon-text,
.js-product-container .form-row svg.icon-inline,
.js-product-detail .form-row svg.svg-icon-text,
.js-product-detail .form-row svg.icon-inline {
  color: var(--color-olive) !important;
  fill: var(--color-olive) !important;
}

/* Whatsapp float button keeps its green */
body .whatsapp-float,
body .whatsapp-float * {
  color: #fff !important;
}

/* === Remove white/cream backgrounds around logos and trust icons === */
body img[src*="logo"],
body img[alt*="logo"],
body img[alt*="Logo"],
body .headbar-logo-img,
body .security-seal-badge,
body .security-seal-badge img,
body .security-seal img,
body .panel-subheader:before {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* === Footer brand: white rounded pill around logo + "Bruno's" === */
.footer-brand .logo,
body .footer-brand .logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 16px 8px 10px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  text-decoration: none !important;
  width: fit-content !important;
  margin-bottom: var(--space-md) !important;
}

.footer-brand .logo .logo-icon-img {
  height: 40px !important;
  width: auto !important;
  border-radius: 0 !important;
}

.footer-brand .logo span {
  color: #1C1C1A !important;
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* === Header nav dropdowns (Categorías / Productos on hover) === */
.bruno-header-nav .bruno-nav-item-has-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.bruno-header-nav .bruno-nav-item-has-dropdown > a {
  padding: 0.45rem 0.75rem !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--transition-fast) !important;
}

.bruno-header-nav .bruno-nav-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  min-width: 220px !important;
  background: #ffffff !important;
  border: 1px solid var(--color-olive) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
  z-index: 9999 !important;
}

.bruno-header-nav .bruno-nav-item-has-dropdown:hover > .bruno-nav-dropdown,
.bruno-header-nav .bruno-nav-item-has-dropdown:focus-within > .bruno-nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.bruno-header-nav .bruno-nav-dropdown li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bruno-header-nav .bruno-nav-dropdown li a {
  display: block !important;
  padding: 0.55rem 1rem !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  border-radius: 0 !important;
}

.bruno-header-nav .bruno-nav-dropdown li a:hover {
  background: rgba(125, 139, 106, 0.08) !important;
  color: var(--color-olive) !important;
}

/* === Utility dropdowns (Mi cuenta + Centro de Ayuda) — hover with olive border === */
.bruno-util-help,
.bruno-util-account {
  position: relative !important;
}

.bruno-util-help .subutility-list,
.bruno-util-help .nav-dropdown-content,
.bruno-util-account .subutility-list,
.bruno-util-account .nav-dropdown-content {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--color-olive) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-8px) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
  z-index: 9999 !important;
  display: block !important;
}

/* Puente invisible: cubre el hueco entre el botón y el menú */
/* para que el dropdown no se cierre al mover el cursor hacia él. */
.bruno-util-help .subutility-list::before,
.bruno-util-help .nav-dropdown-content::before,
.bruno-util-account .subutility-list::before,
.bruno-util-account .nav-dropdown-content::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 0 !important;
  right: 0 !important;
  height: 8px !important;
  background: transparent !important;
}

/* Help dropdown: wider (phone + email need space) */
.bruno-util-help .subutility-list,
.bruno-util-help .nav-dropdown-content {
  min-width: 240px !important;
}

/* My account dropdown: smaller, centered text */
.bruno-util-account .subutility-list,
.bruno-util-account .nav-dropdown-content {
  min-width: 160px !important;
}

.bruno-util-account .subutility-list-item a,
.bruno-util-account .nav-accounts-link {
  justify-content: center !important;
  text-align: center !important;
}

.bruno-util-help:hover .subutility-list,
.bruno-util-help:focus-within .subutility-list,
.bruno-util-help:hover .nav-dropdown-content,
.bruno-util-help:focus-within .nav-dropdown-content,
.bruno-util-account:hover .subutility-list,
.bruno-util-account:focus-within .subutility-list,
.bruno-util-account:hover .nav-dropdown-content,
.bruno-util-account:focus-within .nav-dropdown-content {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.bruno-util-help .subutility-list-item,
.bruno-util-account .subutility-list-item {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bruno-util-help .subutility-list-item a,
.bruno-util-account .subutility-list-item a,
.bruno-util-account .nav-accounts-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0.55rem 1rem !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}

.bruno-util-help .subutility-list-item a:hover,
.bruno-util-account .subutility-list-item a:hover,
.bruno-util-account .nav-accounts-link:hover {
  background: rgba(125, 139, 106, 0.08) !important;
  color: var(--color-olive) !important;
}

/* Icons in dropdown items (whatsapp, phone, email) — forced visible */
.bruno-util-dropdown-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  color: var(--color-olive) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Solid icons (WhatsApp / phone) — filled with olive */
.bruno-util-dropdown-icon[fill="currentColor"] {
  fill: var(--color-olive) !important;
  stroke: none !important;
}

/* Outline icons (email envelope) — no fill, olive stroke */
.bruno-util-dropdown-icon[fill="none"] {
  fill: none !important;
  stroke: var(--color-olive) !important;
  stroke-width: 1.6 !important;
}

/* ============================================
   MOBILE HAMBURGER + NAV-PANEL (mobile menu)
   ============================================ */

/* Hamburger icon — black */
.bruno-hamburger-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px !important;
  color: #1C1C1A !important;
}

.bruno-hamburger-icon {
  width: 28px !important;
  height: 28px !important;
  stroke: #1C1C1A !important;
  color: #1C1C1A !important;
  display: block !important;
}

/* Mobile nav-hamburger modal: white background, olive borders, olive text */
#nav-hamburger,
#nav-hamburger .modal-dialog,
#nav-hamburger .modal-content,
#nav-hamburger .modal-body,
#nav-hamburger .modal-header,
#nav-hamburger .modal-footer,
#nav-hamburger .nav-hamburger,
.nav-hamburger .modal-content,
.nav-hamburger .modal-body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--color-olive) !important;
}

/* All text inside the mobile menu → olive */
#nav-hamburger *,
#nav-hamburger h1,
#nav-hamburger h2,
#nav-hamburger h3,
#nav-hamburger h4,
#nav-hamburger h5,
#nav-hamburger h6,
#nav-hamburger p,
#nav-hamburger span,
#nav-hamburger a,
#nav-hamburger li,
#nav-hamburger strong,
#nav-hamburger label,
#nav-hamburger .nav-list-link,
#nav-hamburger .nav-accounts-link,
#nav-hamburger .nav-accounts-item,
#nav-hamburger .nav-item {
  color: var(--color-olive) !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Hover state inside mobile menu */
#nav-hamburger a:hover,
#nav-hamburger .nav-list-link:hover,
#nav-hamburger .nav-accounts-link:hover {
  color: var(--color-olive-dark) !important;
  background: rgba(125, 139, 106, 0.08) !important;
}

/* Thin olive separators between items */
#nav-hamburger .nav-list > li,
#nav-hamburger .nav-list-item,
#nav-hamburger .nav-account > li,
#nav-hamburger .nav-accounts-item,
#nav-hamburger .nav-item {
  border-color: var(--color-olive) !important;
  border-width: 0 0 1px 0 !important;
  border-style: solid !important;
}

#nav-hamburger .nav-list > li:last-child,
#nav-hamburger .nav-account > li:last-child {
  border-bottom: 0 !important;
}

/* Modal container: thin olive outline */
#nav-hamburger .modal-content,
.nav-hamburger .modal-content {
  border: 1px solid var(--color-olive) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}

/* Topbar inside mobile menu (close button) — white bg, olive icons */
#nav-hamburger .navigation-topbar,
#nav-hamburger .modal-topbar,
#nav-hamburger .js-modal-close {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--color-olive) !important;
  border-color: var(--color-olive) !important;
}

#nav-hamburger .icon-inline,
#nav-hamburger svg {
  color: var(--color-olive) !important;
  fill: var(--color-olive) !important;
  stroke: var(--color-olive) !important;
}

/* Close button X icon */
#nav-hamburger .js-modal-close .icon-inline,
#nav-hamburger .js-modal-close svg {
  color: var(--color-olive) !important;
  fill: var(--color-olive) !important;
}

/* Hide social links (Instagram, Facebook, etc.) in mobile menu topbar */
#nav-hamburger .navigation-topbar .col-8,
#nav-hamburger .social-icon,
#nav-hamburger .social-icon-rounded {
  display: none !important;
}

/* Footer contact on mobile — icons + text inline, text always visible */
@media (max-width: 768px) {
  .footer-contact {
    display: block !important;
  }

  .footer-contact ul {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  .footer-contact li {
    display: block !important;
    margin-bottom: 8px !important;
  }

  .footer-contact a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    white-space: normal !important;
    min-width: 0 !important;
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  .footer-contact .footer-ct-icon {
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
  }

  .footer-contact a > span {
    display: inline-block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* Cloudflare email protection span — also visible */
  .footer-contact .__cf_email__ {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
  }
}

/* ============================================
   CONTACT PAGE — QUIÉNES SOMOS
   Tipografía unificada — Poppins (sans-serif gruesa y clara):
     - Títulos: Poppins 40px / 800, color olive
     - Subtítulos: Poppins 24px / 700, color olive
     - Texto:   Poppins 18px / 500, color negro
     - Forzado con !important para vencer estilos de Tiendanube
   ============================================ */
.bruno-about {
  --about-font: var(--font-body);
  --about-title-size: 40px;
  --about-title-size-sm: 24px;
  --about-text-size: 18px;
  --about-section-pad: 80px;
  --about-block-width: 1080px;
  --about-narrow-width: 1040px;
  --about-list-width: 820px;

  background: var(--color-white);
  overflow: hidden;
  font-family: var(--about-font) !important;
}

/* Forzar Poppins en todos los descendientes (vence reglas de Tiendanube) */
.bruno-about,
.bruno-about *,
.bruno-about *::before,
.bruno-about *::after {
  font-family: var(--about-font) !important;
}

.bruno-about .bruno-container {
  max-width: var(--about-block-width);
}

.bruno-about .about-narrow {
  max-width: var(--about-narrow-width);
}

/* Bloques (secciones) — alternancia blanco/cream para separación visual */
.about-block {
  padding: var(--about-section-pad) 0;
}

.bruno-about .about-block:nth-of-type(even) {
  background: var(--color-bg);
}

.bruno-about .about-block:nth-of-type(odd) {
  background: var(--color-white);
}

/* ----- TÍTULOS (Poppins ExtraBold 800, olive) ----- */
.bruno-about .about-title,
.bruno-about h1.about-title,
.bruno-about h2.about-title,
.bruno-about h3.about-title {
  font-size: var(--about-title-size) !important;
  font-weight: 500 !important;
  color: var(--color-olive) !important;
  line-height: 1.2 !important;
  margin: 0 0 24px !important;
  text-align: center;
  letter-spacing: -0.02em;
}

.bruno-about .about-title-center {
  text-align: center !important;
}

.bruno-about .about-title-sm {
  font-size: var(--about-title-size-sm) !important;
  font-weight: 500 !important;
  margin: 0 0 12px !important;
}

/* ----- TEXTOS (Poppins Medium 500, negro) ----- */
.bruno-about .about-text,
.bruno-about p.about-text,
.bruno-about span.about-text,
.bruno-about li.about-text {
  font-size: var(--about-text-size) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  line-height: 1.7 !important;
  margin: 0 0 18px;
  text-align: center;
}

.about-text:last-child {
  margin-bottom: 0;
}

.about-text strong {
  font-weight: 500;
  color: var(--color-text);
}

.about-text-center {
  text-align: center;
}

/* Párrafos dentro de bloques anchos: alineación izquierda firme para mejor lectura */
.bruno-about .about-narrow .about-text {
  text-align: left !important;
}

/* La cita destacada se mantiene centrada aunque esté dentro de about-narrow */
.bruno-about .about-narrow p.about-quote,
.bruno-about p.about-quote {
  text-align: center !important;
}

/* ----- HERO ----- */
.about-hero {
  text-align: center;
  padding-top: 96px;
  padding-bottom: 80px;
}

.bruno-about .about-hero .about-title {
  font-size: 56px !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  margin-bottom: 24px !important;
}

.bruno-about .about-hero .about-text {
  font-size: 20px !important;
  font-weight: 500 !important;
  max-width: 720px;
  margin: 0 auto;
  color: var(--color-text) !important;
}

.bruno-about .about-hero .about-video {
  margin: 32px auto 40px;
}

/* ----- STATS (4 columnas simétricas, sin cajas decorativas) ----- */
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.about-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  border-left: 1px solid var(--color-border);
}

.about-stat:first-child {
  border-left: 0;
}

.bruno-about .about-stat-number {
  font-size: 52px !important;
  font-weight: 500 !important;
  color: var(--color-cta) !important;
  line-height: 1 !important;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

.bruno-about .about-stat-label {
  margin-bottom: 0;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
}

/* ----- CITA DESTACADA (centrada, sin border) ----- */
.bruno-about .about-quote {
  font-style: italic !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--color-olive) !important;
  line-height: 1.45 !important;
  text-align: center !important;
  max-width: 640px;
  margin: 48px auto;
  padding: 0 20px;
}

/* ----- VIDEO ----- */
.about-video {
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}

.about-video iframe,
.about-video video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.about-video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
}

.about-video-placeholder .about-text {
  margin: 0;
  color: var(--color-text-secondary);
  text-align: center;
}

/* ----- FEATURES (estilo editorial: números grandes, separadores finos, sin cards) ----- */
.about-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1180px;
  margin: 0 auto;
  border-top: 2px solid var(--color-olive);
  border-bottom: 2px solid var(--color-olive);
}

.about-feature {
  position: relative;
  padding: 40px 28px;
  text-align: left;
  background: transparent;
  border-right: 1px solid var(--color-border);
  transition: background 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-feature:last-child {
  border-right: 0;
}

/* Número grande en CTA naranja */
.bruno-about .about-feature-num {
  display: block;
  font-family: var(--about-font);
  font-size: 56px;
  font-weight: 500;
  color: var(--color-cta);
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -0.04em;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
  transform-origin: left center;
}

/* Línea fina debajo del número que crece en hover */
.about-feature::after {
  content: '';
  position: absolute;
  top: 90px;
  left: 28px;
  width: 28px;
  height: 2px;
  background: var(--color-olive);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

/* Override del título para alinearlo a la izquierda dentro de la feature */
.bruno-about .about-feature .about-title {
  text-align: left !important;
  margin: 0 0 12px !important;
  transition: color 0.3s ease;
}

.bruno-about .about-feature .about-text {
  margin: 0 !important;
  text-align: left !important;
  color: var(--color-text-secondary) !important;
}

/* Hover */
.about-feature:hover {
  background: var(--color-bg);
}

.about-feature:hover .about-feature-num {
  transform: scale(1.08);
}

.about-feature:hover::after {
  width: 64px;
  background: var(--color-cta);
}

.about-feature:hover .about-title {
  color: var(--color-cta) !important;
}

/* ----- LISTA DE COMPROMISO (alineación izquierda para mejor lectura) ----- */
.about-list {
  list-style: none;
  padding: 0;
  max-width: var(--about-list-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
}

.bruno-about .about-list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
  text-align: left !important;
  font-size: var(--about-text-size) !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

.bruno-about .about-list li strong {
  display: block;
  color: var(--color-olive) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  margin-bottom: 6px;
}

/* ----- CTA FINAL (simple) ----- */
.about-cta {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.about-cta .about-text {
  margin-bottom: 24px;
  text-align: center;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 960px) {
  .bruno-about {
    --about-section-pad: 48px;
  }

  .about-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-feature:nth-child(2) {
    border-right: 0;
  }

  .about-feature:nth-child(3),
  .about-feature:nth-child(4) {
    border-top: 1px solid var(--color-border);
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
  }

  .about-stat:nth-child(odd) {
    border-left: 0;
  }

  .about-stat:nth-child(3) {
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
  }

  .about-stat:nth-child(4) {
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
  }
}

@media (max-width: 640px) {
  .bruno-about {
    --about-title-size: 22px;
    --about-title-size-sm: 18px;
    --about-section-pad: 40px;
  }

  .about-stats {
    grid-template-columns: 1fr;
  }

  .about-stat {
    border-left: 0;
    border-top: 1px solid var(--color-border);
    padding: 20px 0;
  }

  .about-stat:first-child {
    border-top: 0;
  }

  .about-stat-number {
    font-size: 28px;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .about-feature {
    border-right: 0 !important;
    border-top: 1px solid var(--color-border) !important;
  }

  .about-feature:first-child {
    border-top: 0 !important;
  }

  .about-feature-num {
    font-size: 44px !important;
  }

  .about-feature::after {
    top: 76px !important;
  }
}

/* Bruno: pulse animation on cart when product is added */
#ajax-cart {
  display: inline-flex;
  align-items: center;
  transform-origin: center;
  will-change: transform;
}

@keyframes bruno-cart-pulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.22); }
  50%  { transform: scale(0.94); }
  75%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.bruno-cart-pulse {
  animation: bruno-cart-pulse 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Bruno: hide the legacy "added to cart" floating notification, just in case */
.js-alert-added-to-cart {
  display: none !important;
}

/* ============================================
   PRODUCTO — Imagen completa + valoración estilo ML
   ============================================ */

/* Imagen principal del producto: caja de alto fijo (estilo Mercado Libre). */
/* La foto se ajusta dentro de la caja, completa y sin recortarse. */
.product-image-container .js-product-slide-link {
  padding-bottom: 0 !important;
  height: 580px !important;
  display: block !important;
}

.product-image-container .js-product-slide-img,
.product-image-container .product-slider-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  border-radius: 0 !important;
}

@media (max-width: 768px) {
  .product-image-container .js-product-slide-link {
    height: 400px !important;
  }
}

/* Galería de producto: miniaturas compactas + imagen principal pegada a ellas */
@media (min-width: 768px) {
  .bruno-product-gallery {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  .bruno-product-gallery > .col-2 {
    flex: 0 0 56px !important;
    max-width: 56px !important;
    width: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .bruno-product-gallery > .product-image-container {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cada miniatura: cuadrada y compacta, sin depender del alto de la foto */
  .bruno-product-gallery .product-thumb {
    padding-bottom: 0 !important;
    width: 56px !important;
    height: 56px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important;
    border: 1px solid #d8d8d0 !important;
    border-radius: 0 !important;
  }

  /* Miniatura seleccionada: borde celeste */
  .bruno-product-gallery .product-thumb.selected {
    border: 2px solid #2d9cdb !important;
  }

  .bruno-product-gallery .product-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* "Lo que tenés que saber de este producto" + botón Ver características */
.bruno-features {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
}

.bruno-features-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-olive);
  margin: 0 0 12px;
}

.bruno-features-text {
  position: relative;
  max-height: 132px;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  transition: max-height 0.35s ease;
}

.bruno-features-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-white));
  pointer-events: none;
}

.bruno-features.is-expanded .bruno-features-text {
  max-height: 6000px;
}

.bruno-features.is-expanded .bruno-features-text::after {
  display: none;
}

.bruno-features-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  background: transparent;
  border: 1.5px solid var(--color-olive);
  border-radius: var(--radius-md);
  color: var(--color-olive);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.bruno-features-btn:hover {
  background: var(--color-olive);
  color: var(--color-white);
}

/* ============================================
   PRODUCTO — Tarjeta única estilo Mercado Libre
   ============================================ */

/* Fondo gris en toda la página de producto */
#single-product {
  background: #ededed;
  padding: 24px 0;
}

/* Contenedor padre blanco que agrupa galería + información */
.bruno-pdp-card {
  background: var(--color-white);
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bruno-pdp-detail {
  font-family: var(--font-body);
}

/* Encabezado del producto dentro de la tarjeta */
.bruno-pdp-detail .page-header {
  padding: 0 !important;
  margin: 0 0 6px !important;
}

.bruno-pdp-detail .page-header .container {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.bruno-pdp-detail .js-product-name {
  font-size: 22px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
}

/* Link a la categoría (reemplaza el breadcrumb en la página de producto) */
.bruno-cat-link,
.bruno-cat-link:link,
.bruno-cat-link:visited,
.bruno-cat-link:hover,
.bruno-cat-link:active {
  color: #2d9cdb !important;
}

.bruno-cat-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 18px;
  text-decoration: none;
}

.bruno-cat-link:hover {
  text-decoration: underline;
}

/* Columna izquierda: todo alineado contra el borde izquierdo */
.bruno-pdp-col-left .page-header,
.bruno-pdp-col-left .page-header .container,
.bruno-pdp-col-left .page-header .row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  text-align: left !important;
}

/* Más espacio entre el título y las estrellas + fuente tipo Mercado Libre */
.bruno-pdp-col-left .js-product-name {
  margin-bottom: 14px !important;
  font-family: var(--font-body) !important;
}

/* "Lo que tenés que saber": separada con línea arriba */
.bruno-pdp-detail .bruno-features {
  margin-top: 0;
  padding-top: 20px;
  border-top: 1px solid #e6e6e6;
}

/* --- Columna derecha: tamaños y distribución tipo Mercado Libre --- */

/* Precio anterior (tachado, chico, arriba del precio) */
.bruno-pdp-detail .price-compare {
  font-size: 15px !important;
  color: var(--color-text-light) !important;
  margin-bottom: 2px !important;
}

/* Precio actual, grande y liviano como ML */
.bruno-pdp-detail .js-price-display {
  font-size: 29px !important;
  font-weight: 400 !important;
  font-family: var(--font-body) !important;
  line-height: 1.2 !important;
}

/* Botón principal de compra: grande, ancho completo, estilo ML */
.bruno-pdp-detail .js-addtocart {
  height: 50px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

/* Logos de medios de pago: separados del precio */
.bruno-pdp-detail .bruno-pay-logos-link {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
}

/* Aire entre los bloques del formulario de compra */
.bruno-pdp-detail .form-row {
  margin-bottom: 0 !important;
}

/* Barra de progreso de envío gratis (verde) */
.bruno-fs-bar {
  margin: 16px 0 4px;
}

.bruno-fs-bar-text {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text);
}

.bruno-fs-bar-text strong {
  color: #A97D18;
}

.bruno-fs-bar-track {
  height: 9px;
  background: #e6e6e6;
  border-radius: 999px;
  overflow: hidden;
}

.bruno-fs-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #EAC44F 0%, #FBEDA0 25%, #EAC44F 50%, #FBEDA0 75%, #EAC44F 100%);
  background-size: 200% 100%;
  animation: brunoCuotasShine 2s linear infinite;
  box-shadow: 0 0 8px rgba(234, 196, 79, 0.8);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.bruno-fs-bar-cta {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.bruno-fs-bar.is-complete .bruno-fs-bar-text {
  color: #A97D18;
  font-weight: 400;
}

/* Aviso "15% de descuento con transferencia" — arriba de la columna de compra */
.bruno-transfer-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(90deg, #D9AC33 0%, #EAC44F 40%, #F9E184 50%, #EAC44F 60%, #D9AC33 100%);
  background-size: 200% 100%;
  animation: brunoCuotasShine 2.5s linear infinite;
  color: #FFFFFF;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 1), -1px 1px 2px rgba(0, 0, 0, 0.95), 0 2px 4px rgba(0, 0, 0, 1), 0 4px 9px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 0, 0, 0.65);
  border-radius: 8px;
  padding: 9px 14px;
  margin: 0 0 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(217, 172, 51, 0.4);
  /* El cartel es clickeable: lleva directo a "Comprar ahora" */
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bruno-transfer-promo:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 3px 12px rgba(217, 172, 51, 0.45);
}

.bruno-transfer-promo:active {
  transform: scale(0.98);
}

/* Logo MP dentro del aviso: excepción al ocultamiento global de logos de Mercado Pago,
   en chip blanco para que se lea sobre el fondo verde */
.bruno-transfer-promo .bruno-transfer-promo-logo {
  display: block !important;
  width: 58px;
  height: auto;
  background: #fff;
  border-radius: 6px;
  padding: 4px 6px;
  flex-shrink: 0;
}

.bruno-transfer-promo-text {
  font-family: var(--font-body);
  line-height: 1.3;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.bruno-transfer-promo-line1 {
  display: block;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
}

.bruno-transfer-promo-line2 {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: #fff;
}

/* Barra de progreso de cuotas sin interés (dos metas: 2 y 3 cuotas) */
.bruno-cuotas-bar {
  margin: 0 0 16px;
}

.bruno-cuotas-bar-text {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text);
}

.bruno-cuotas-bar-text strong {
  color: #00a650;
}

.bruno-cuotas-bar-track {
  position: relative;
  height: 9px;
  background: #e6e6e6;
  border-radius: 999px;
  overflow: hidden;
}

/* Relleno: verde brillante en toda la barra, con destello animado */
.bruno-cuotas-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #EAC44F 0%, #FBEDA0 25%, #EAC44F 50%, #FBEDA0 75%, #EAC44F 100%);
  background-size: 200% 100%;
  animation: brunoCuotasShine 2s linear infinite;
  box-shadow: 0 0 8px rgba(234, 196, 79, 0.8);
  border-radius: 999px;
  transition: width 0.4s ease;
}

@keyframes brunoCuotasShine {
  from { background-position: 0 0; }
  to { background-position: -200% 0; }
}

/* Marquita blanca en el punto de la meta de 2 cuotas */
.bruno-cuotas-bar-mark {
  position: absolute;
  top: 0;
  height: 100%;
  width: 2px;
  margin-left: -1px;
  background: #fff;
}

/* Globos de diálogo de las dos metas (borde negro delgado), los dos arriba de la barra */
.bruno-cuotas-bubble-row-top {
  position: relative;
  height: 30px;
}

.bruno-cuotas-bubble {
  position: absolute;
  bottom: 7px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
  color: #333;
}

/* Meta alcanzada: el globo se pinta de verde */
.bruno-cuotas-bubble.is-done {
  border-color: #A9834E;
  color: #A97D18;
  font-weight: 400;
}

.bruno-cuotas-bubble.is-done::before {
  border-top-color: #A9834E;
}

/* Globo de 2 cuotas: la flechita apunta a la marca de los $30.000 (75% de la barra)
   y el cuerpo queda entero a la izquierda de la marca para no tocar al globo de 3 cuotas */
.bruno-cuotas-bubble-2 {
  left: 75%;
  transform: translateX(-100%);
}

.bruno-cuotas-bubble-2::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 100%;
  margin-left: -14px;
  border: 5px solid transparent;
  border-top-color: #000;
}

.bruno-cuotas-bubble-2::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 100%;
  margin-left: -13px;
  border: 4px solid transparent;
  border-top-color: #fff;
}

/* Globo de 3 cuotas: al final de la barra, flechita hacia abajo */
.bruno-cuotas-bubble-3 {
  right: 0;
}

.bruno-cuotas-bubble-3::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 14px;
  border: 5px solid transparent;
  border-top-color: #000;
}

.bruno-cuotas-bubble-3::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 15px;
  border: 4px solid transparent;
  border-top-color: #fff;
}

.bruno-cuotas-bar.is-complete .bruno-cuotas-bar-text {
  color: #A97D18;
  font-weight: 400;
}

/* ============================================
   PRODUCTO — Imagen a la izquierda, info+compra a la derecha
   Desde 768px (antes recién a 992px: en pantallas/zoom medianos
   la caja de compra caía DEBAJO de la imagen en vez de a la derecha).
   ============================================ */

@media (min-width: 768px) {
  /* Usamos #single-product (ID) + !important porque el grid del tema
     pisaba la regla con clases sueltas y la compra seguía cayendo abajo. */
  #single-product .section-single-product {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }
  #single-product .section-single-product > .col-12 {
    -ms-flex: 0 0 47% !important;
    flex: 0 0 47% !important;
    max-width: 47% !important;
  }
  #single-product .section-single-product > .col {
    -ms-flex: 1 1 53% !important;
    flex: 1 1 53% !important;
    max-width: 53% !important;
    min-width: 0 !important;
  }
}

/* ============================================
   PRODUCTO — Zona derecha en 2 columnas (info + compra)
   ============================================ */

@media (min-width: 992px) {
  .bruno-pdp-cols {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  .bruno-pdp-col-left {
    flex: 1 1 42%;
    min-width: 0;
  }
  .bruno-pdp-col-right {
    flex: 1 1 58%;
    min-width: 0;
  }
}

/* Cuotas + "Ver mas detalles": que no se encimen, que el link caiga abajo si no entra */
.bruno-pdp-col-right .js-product-payments-container {
  flex-wrap: wrap;
  align-items: center;
}

.bruno-pdp-col-right #btn-installments {
  width: 100%;
  display: block;
  margin-top: 4px;
  padding-left: 0;
}

/* Columna derecha = caja de compra, con su propio contenedor */
.bruno-pdp-col-right {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 18px;
}

@media (max-width: 991px) {
  .bruno-pdp-col-right {
    margin-top: 20px;
  }
}

/* Carteles de envío / retiro / stock */
.bruno-buy-info {
  margin: 14px 0 18px;
}

.bruno-buy-info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin-bottom: 9px;
}

.bruno-buy-info-row svg {
  color: #00a650;
  flex-shrink: 0;
  margin-top: 1px;
}

.bruno-buy-info-row strong {
  color: var(--color-text);
}

/* ============================================
   SHIPPING CALCULATOR (CP -> precio)
   Layout NO genera overflow horizontal: label arriba,
   input + boton en linea debajo. Cabe en cualquier ancho.
   ============================================ */
.bruno-shipping-calc-row {
  display: block !important;
  padding: 2px 0;
  margin-bottom: 9px;
  min-width: 0;
  max-width: 100%;
}

.bruno-shipping-calc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.bruno-shipping-calc-label {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
  white-space: normal;
}

.bruno-shipping-calc-input {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding: 8px 10px;
  border: 1.5px solid #1a1a1a;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #1c1c1a !important;
  background: #FBFAF7 !important;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-sizing: border-box;
}

.bruno-shipping-calc-input::placeholder {
  color: #8c8473;
  font-weight: 500;
}

.bruno-shipping-calc-input:focus {
  border-color: #1a1a1a;
  background: #FFFBF0 !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12);
}

.bruno-shipping-calc-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: var(--color-olive);
  color: var(--color-white);
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(125, 139, 106, 0.25);
  transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.bruno-shipping-calc-btn:hover,
.bruno-shipping-calc-btn:focus {
  background: var(--color-olive-dark, #586527);
  box-shadow: 0 4px 14px rgba(125, 139, 106, 0.4);
  transform: translateY(-1px);
}

.bruno-shipping-calc-btn:active {
  transform: translateY(0);
}

.bruno-shipping-calc-result {
  font-size: 13px;
  line-height: 1.45;
  margin: 8px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.bruno-shipping-calc-result:empty {
  display: none;
  margin: 0;
}

.bruno-shipping-calc-result.is-ok {
  color: #1b5e20;
  background: #E8F5E9;
  border: 1.5px solid #2E7D32;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.bruno-shipping-calc-result.is-ok strong {
  color: #1B5E20;
  font-size: 17px;
  font-weight: 500;
  display: inline-block;
}

.bruno-shipping-calc-change {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: none;
  color: #2E7D32;
  font-size: 12px;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}

.bruno-shipping-calc-change:hover {
  color: #1B5E20;
  text-decoration: none;
}

.bruno-shipping-calc-result.is-warning {
  color: var(--color-text-secondary);
  background: rgba(26, 156, 74, 0.08);
  border-left: 3px solid #1a9c4a;
  padding: 8px 10px;
  border-radius: 4px;
}

.bruno-shipping-calc-result.is-warning a {
  color: var(--color-olive);
  font-weight: 400;
  text-decoration: underline;
}

.bruno-shipping-calc-result.is-error {
  color: #b71c1c;
  font-size: 12px;
}

/* ============================================
   MOBILE-ONLY: ocultar bloque "Lo que tenés que saber"
   En celular solo se ven los datos de compra (envío,
   retiro, stock, calculadora, etc.). En desktop sigue igual.
   ============================================ */
@media (max-width: 767px) {
  .bruno-features {
    display: none !important;
  }
}

/* ============================================
   MOBILE-ONLY: reordenar columnas de producto
   Fusiona col-left + col-right en un solo flujo
   y reordena con flex order. NO afecta desktop.
   Orden mobile:
   1) titulo / valoracion / precio / Ver medios de pago (col-left natural)
   2) FORM completo (cantidad, botones, Compra protegida, Cambios y devoluciones)
   3) Bloque envio (CABA/GBA, calculadora, retiro, stock, mas detalles)
   4) Resto de col-right (cuotas, msg envio gratis, modales) al final
   ============================================ */
@media (max-width: 991px) {
  .bruno-pdp-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .bruno-pdp-col-left,
  .bruno-pdp-col-right {
    display: contents !important;
  }

  /* Resto de col-right al final por defecto */
  .bruno-pdp-col-right > * {
    order: 100;
  }

  /* FORM: justo despues de "Ver medios de pago" (col-left items siguen con order 0) */
  .bruno-pdp-col-right > .js-product-form {
    order: 5;
  }

  /* Bloque envio (CABA/GBA + calculadora + retiro + stock + mas detalles):
     justo despues del form, debajo de los banners "Cambios y devoluciones" */
  .bruno-pdp-col-right > .bruno-buy-info {
    order: 10;
  }
}

/* Botones de compra: apilados, ancho completo (solo la fila de compra) */
.bruno-pdp-col-right .bruno-buy-row {
  display: block !important;
  margin: 0 !important;
}

.bruno-pdp-col-right .bruno-buy-row > * {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Botón "Comprar ahora" — sólido, color principal */
.bruno-buy-now-btn {
  display: block;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 8px;
  background: var(--color-olive);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bruno-buy-now-btn:hover {
  background: var(--color-olive-dark);
}

/* Botón "Agregar al carrito" — mismo tamaño, color claro */
.bruno-pdp-col-right .js-addtocart {
  height: 50px !important;
  border-radius: 8px !important;
  background: var(--color-bg-alt) !important;
  color: var(--color-olive) !important;
  border: 1px solid var(--color-olive) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

.bruno-pdp-col-right .js-addtocart:hover {
  background: #e8e0d2 !important;
}

/* "Lo que tenés que saber": lista de 4 ítems */
.bruno-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.bruno-features-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  /* Freno de seguridad: ningún punto puede pasar de 2 renglones,
     así nunca se arma un paredón de texto aunque la descripción venga rara. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bruno-features-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-olive);
}

/* Descripción completa del producto, abajo, ancho completo */
.bruno-pdp-description {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e6e6e6;
}

.bruno-pdp-description-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-olive);
  margin: 0 0 16px;
}

/* "Ver medios de pago" — link celeste chico debajo del precio */
.bruno-payments-link,
.bruno-payments-link:link,
.bruno-payments-link:visited,
.bruno-payments-link:hover,
.bruno-payments-link:active {
  color: #2d9cdb !important;
}

.bruno-payments-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
  text-decoration: none;
}

.bruno-payments-link:hover {
  text-decoration: underline;
}

/* "Envío a todo el país" destacado en verde, un poco más grande */
.bruno-ship-highlight {
  color: #00a650 !important;
  font-size: 15px;
}

/* "CABA-GBA" en negro bold para diferenciar del verde */
.bruno-ship-region {
  color: #1c1c1a !important;
  font-size: 15px;
  font-weight: 500;
}

/* Link "Más detalles y formas de entrega" */
.bruno-shipping-modal-link,
.bruno-shipping-modal-link:link,
.bruno-shipping-modal-link:visited,
.bruno-shipping-modal-link:hover,
.bruno-shipping-modal-link:active {
  color: #2d9cdb !important;
}

.bruno-shipping-modal-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
  text-decoration: none;
}

.bruno-shipping-modal-link:hover {
  text-decoration: underline;
}

/* Modal de opciones de envío y retiro */
.bruno-ship-modal-opt {
  margin-bottom: 22px;
}

.bruno-ship-modal-opt:last-child {
  margin-bottom: 0;
}

.bruno-ship-modal-opt-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-olive);
  margin: 0 0 10px;
}

.bruno-ship-modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bruno-ship-modal-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.bruno-ship-modal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00a650;
}

.bruno-ship-modal-list li strong {
  color: var(--color-olive);
}

.bruno-ship-modal-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 10px;
}

.bruno-ship-modal-subtitle {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  margin: 14px 0 6px;
}

/* Cuotas + "Ver detalles": si entran van en un renglón (botón a la derecha);
   si no entran, el botón cae abajo y las cuotas se ven completas. */
.bruno-pdp-col-right .js-product-payments-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 4px 8px !important;
  margin-bottom: 14px !important;
}

.bruno-pdp-col-right .js-product-installments-container,
.bruno-pdp-col-right .js-product-installments-container * {
  white-space: normal !important;
  font-size: 12px !important;
}

.bruno-pdp-col-right .js-product-installments-container {
  width: auto !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

.bruno-pdp-col-right #btn-installments,
.bruno-pdp-col-right #btn-installments * {
  color: #2d9cdb !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

.bruno-pdp-col-right #btn-installments {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  text-align: center !important;
}
.bruno-pdp-col-right #btn-installments .d-block,
.bruno-pdp-col-right #btn-installments span {
  text-align: center !important;
  width: 100% !important;
}

/* Producto sin cuotas: link a todos los medios de pago, pegado a la izquierda
   (si no, queda centrado/suelto en el medio de la caja de compra) */
.bruno-pdp-col-right .bruno-all-payments-link {
  display: inline-block !important;
  align-self: flex-start !important;
  text-align: left !important;
  width: auto !important;
  max-width: 100% !important;
  color: #2d9cdb !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
}

/* ===== Estilo unificado para TODOS los modales ===== */
/* Header verde con texto blanco (incluye los modales de pantalla completa) */
.modal-header,
.js-modal .modal-header,
.js-fullscreen-modal .modal-header {
  background: var(--color-olive) !important;
}

.modal-header,
.modal-header *,
.modal-header h3,
.modal-header h4 {
  color: #ffffff !important;
}

/* Cross-selling ("¡Descuento exclusivo!"): header verde uniforme, sin */
/* espacio blanco arriba ni a los costados, siguiendo el redondeo del modal. */
#js-cross-selling-modal .modal-header {
  margin: 0 !important;
  width: 100% !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
}

/* Botón de cerrar: círculo blanco con cruz. Sin tocar 'position' para no */
/* desubicarlo — el tema ya lo posiciona en la esquina del modal. */
.modal-close {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  transition: none !important;
}

.modal-close:hover {
  background: #ffffff !important;
}

/* Ocultamos el ícono SVG original (da problemas) y dibujamos la cruz con un carácter */
.modal-close .modal-close-icon {
  display: none !important;
}

.modal-close::before {
  content: "\2715" !important;
  display: block !important;
  color: var(--color-olive) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

/* Modales sin header verde: círculo verde con cruz blanca */
.modal-close.no-header {
  background: var(--color-olive) !important;
}

.modal-close.no-header::before {
  color: #ffffff;
}

/* ===== Ajustes propios del modal cross-selling ("¡Descuento exclusivo!") ===== */

/* Cruz de cerrar: más chica y centrada de forma simétrica en el header verde. */
#js-cross-selling-modal .modal-close-top-right {
  top: 50% !important;
  right: 0.75rem !important;
  transform: translateY(-50%) !important;
}

#js-cross-selling-modal .modal-close {
  width: 24px !important;
  height: 24px !important;
}

#js-cross-selling-modal .modal-close::before {
  font-size: 11px !important;
}

/* Etiqueta de descuento (ej: "5% OFF"): mismo verde claro que el resto */
/* de los descuentos de la tienda, en vez del verde oscuro. */
#js-cross-selling-modal .label-top-left,
#js-cross-selling-modal .label-accent {
  background: var(--color-olive-light) !important;
  color: #ffffff !important;
}

/* Selector de cantidad — dropdown estilo Mercado Libre */
.bruno-qty {
  position: relative;
  margin-bottom: 16px;
}

.bruno-qty-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #d8d8d0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}

.bruno-qty-trigger svg {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.bruno-qty.is-open .bruno-qty-trigger svg {
  transform: rotate(180deg);
}

.bruno-qty-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #d8d8d0;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  z-index: 20;
  padding: 6px;
}

.bruno-qty.is-open .bruno-qty-menu {
  display: block;
}

.bruno-qty-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
}

.bruno-qty-opt:hover {
  background: var(--color-bg-alt);
}

.bruno-qty-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-top: 4px;
  border-top: 1px solid #eee;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.bruno-qty-custom input {
  width: 72px;
  padding: 6px 8px;
  border: 1px solid #d8d8d0;
  border-radius: 6px;
  font-size: 14px;
}

/* Valoración (estrellas + puntaje) + unidades vendidas */
.bruno-product-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.bruno-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

.bruno-stars::before {
  content: "\2605\2605\2605\2605\2605";
  color: #d8d8d0;
  letter-spacing: 2px;
  font-size: 15px;
}

.bruno-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.bruno-stars-fill::before {
  content: "\2605\2605\2605\2605\2605";
  color: #2d9cdb;
  letter-spacing: 2px;
  font-size: 15px;
}

.bruno-rating-score {
  font-weight: 400;
  color: var(--color-text);
}

.bruno-rating-sep {
  color: var(--color-text-light);
}

.bruno-rating-sold {
  color: var(--color-text-secondary);
}

/* Lightbox: visor ampliado de imágenes del producto */
.bruno-lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
}

.bruno-lightbox.is-open {
  display: flex;
}

.bruno-lb-img {
  max-width: 86vw;
  max-height: 86vh;
  object-fit: contain;
}

.bruno-lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
}

.bruno-lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.bruno-lb-prev {
  left: 18px;
}

.bruno-lb-next {
  right: 18px;
}

.bruno-lb-close:hover,
.bruno-lb-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   OPINIONES DEL PRODUCTO (estilo Mercado Libre)
   ============================================ */
.bruno-reviews {
  background: #ededed;
  padding: 8px 0 32px;
}

.bruno-reviews-card {
  background: var(--color-white);
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-family: var(--font-body);
}

.bruno-reviews-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-olive);
  margin: 0 0 20px;
}

/* ----- Resumen ----- */
.bruno-reviews-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid #e6e6e6;
}

.bruno-reviews-score-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bruno-reviews-score {
  font-size: 52px;
  font-weight: 400;
  line-height: 1;
  color: #2d9cdb;
}

.bruno-reviews-score-stars {
  color: #2d9cdb;
  font-size: 16px;
  letter-spacing: 2px;
  margin-top: 4px;
}

.bruno-reviews-count {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.bruno-reviews-bars {
  flex: 1;
  min-width: 220px;
}

.bruno-rev-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.bruno-rev-bar-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  width: 34px;
  flex-shrink: 0;
}

.bruno-rev-bar-track {
  flex: 1;
  height: 9px;
  background: #e6e6e6;
  border-radius: 999px;
  overflow: hidden;
}

.bruno-rev-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-olive);
  border-radius: 999px;
}

/* ----- Lista de opiniones ----- */
.bruno-review {
  padding: 16px 0;
  border-bottom: 1px solid #efefef;
}

.bruno-review:last-child {
  border-bottom: 0;
}

.bruno-review-stars {
  color: #2d9cdb;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.bruno-review-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 6px;
}

.bruno-review-author {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.bruno-reviews-empty {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Puntaje y estrellas de las opiniones: celeste forzado */
.bruno-reviews-score {
  color: #2d9cdb !important;
}

.bruno-reviews-score-stars,
.bruno-review-stars,
.bruno-rev-star {
  color: #2d9cdb !important;
}

/* Botón "Opinar" y formulario de opinión */
.bruno-opinar-btn {
  display: inline-block;
  margin: 4px 0 18px;
  padding: 11px 26px;
  background: #2d9cdb;
  color: #ffffff !important;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
}

.bruno-opinar-btn:hover {
  background: #2680c2;
}

/* El form vive dentro del modal: no necesita su propio marco */
.bruno-opinion-form {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.bruno-opinion-label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 6px;
}

.bruno-opinion-stars {
  margin-bottom: 14px;
  font-size: 28px;
  line-height: 1;
}

.bruno-opinion-stars span {
  color: #d8d8d0 !important;
  cursor: pointer;
  transition: color 0.12s ease;
}

.bruno-opinion-stars span.is-on {
  color: #2d9cdb !important;
}

.bruno-opinion-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d8d8d0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 14px;
}

.bruno-opinion-submit {
  padding: 11px 26px;
  background: var(--color-olive);
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
}

.bruno-opinion-submit:hover {
  background: var(--color-olive-dark);
}

.bruno-opinion-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Honeypot anti-bot: invisible para humanos pero presente para bots */
.bruno-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mensaje de error si fallo el envio */
.bruno-opinion-error {
  background: #FDECEA;
  border: 1.5px solid #b71c1c;
  color: #b71c1c;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  margin-top: 12px;
}

/* ============================================
   MODAL DE OPINION
   Overlay full-screen + caja centrada con dos vistas:
   (1) form  (2) pantalla de gracias profesional
   ============================================ */
.bruno-opinion-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 12, 0.65);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: brunoOpinionFade 0.18s ease-out;
  overflow-y: auto;
}

@keyframes brunoOpinionFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bruno-opinion-modal {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  max-width: 540px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 36px 32px 32px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
  animation: brunoOpinionScale 0.22s ease-out;
}

@keyframes brunoOpinionScale {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.bruno-opinion-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 4px 12px;
  border-radius: 8px;
  transition: all 0.18s ease;
  font-family: var(--font-body);
}

.bruno-opinion-modal-close:hover {
  background: #f0f0f0;
  color: #1c1c1a;
}

.bruno-opinion-modal-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: #1c1c1a;
  margin: 0 0 6px;
  line-height: 1.2;
}

.bruno-opinion-modal-subtitle {
  font-size: 14px;
  color: #6d6d6d;
  margin: 0 0 22px;
  line-height: 1.45;
}

.bruno-opinion-modal-subtitle strong {
  color: var(--color-olive);
  font-weight: 400;
}

/* === Vista de Gracias === */
.bruno-opinion-thanks-view {
  text-align: center;
  padding: 8px 0 4px;
}

.bruno-opinion-thanks-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #E8F5E9;
  color: #2E7D32;
  font-size: 42px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 20px;
  border: 3px solid #2E7D32;
  line-height: 1;
}

.bruno-opinion-thanks-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: #1c1c1a;
  margin: 0 0 16px;
  line-height: 1.2;
}

.bruno-opinion-thanks-text {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin: 0 0 14px;
}

.bruno-opinion-thanks-text strong {
  color: var(--color-olive);
}

.bruno-opinion-thanks-signoff {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-olive);
  margin: 18px 0 22px;
}

.bruno-opinion-thanks-btn {
  background: var(--color-olive);
  color: #fff;
  border: 0;
  padding: 12px 36px;
  font-size: 15px;
  font-weight: 400;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
  font-family: var(--font-body);
  box-shadow: 0 4px 14px rgba(125, 139, 106, 0.25);
}

.bruno-opinion-thanks-btn:hover {
  background: var(--color-olive-dark);
  transform: translateY(-1px);
}

/* Responsive: mobile */
@media (max-width: 480px) {
  .bruno-opinion-modal-overlay {
    padding: 10px;
    align-items: flex-end;
  }
  .bruno-opinion-modal {
    padding: 28px 20px 24px;
    border-radius: 16px;
    max-height: 92vh;
  }
  .bruno-opinion-modal-title,
  .bruno-opinion-thanks-title {
    font-size: 22px;
  }
  .bruno-opinion-stars {
    font-size: 32px;
  }
  .bruno-opinion-thanks-icon {
    width: 64px;
    height: 64px;
    font-size: 36px;
  }
}

/* ============================================
   HERO BANNERS CAROUSEL (full-width, arriba del home)
   ============================================ */
.bruno-hero-banners {
  background: var(--color-bg, #FBFAF7);
  padding: 0 !important;
  margin: 0 !important;
}

/* TiendaNube envuelve el contenido del home en un .mt-4 que separa del header.
   Cuando contiene el banner, esa separacion la eliminamos para que la imagen pegue al ticker. */
.mt-4:has(> .bruno-hero-banners),
.mt-4:has(.bruno-hero-banners) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.hero-banners-carousel {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  background: #FBFAF7;
}

/* Gradiente que funde la imagen del banner con el fondo de la pagina (sin linea de corte) */
.hero-banners-carousel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Velo corto: solo funde el borde inferior, sin lavar el texto de los banners */
  height: 30%;
  background: linear-gradient(
    to bottom,
    rgba(251, 250, 247, 0) 0%,
    rgba(251, 250, 247, 0.35) 55%,
    rgba(251, 250, 247, 0.9) 100%
  );
  pointer-events: none;
  z-index: 3;
}

.hero-banners-track {
  position: relative;
  width: 100%;
  /* Banners de compu recortados parejos a 2.4:1 (el celu usa su propia foto 16:9) */
  aspect-ratio: 2.4 / 1;
}

.hero-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.hero-banner-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Refuerzo: aunque haya cache vieja en el servidor con el ::before blureado, lo neutralizamos */
.hero-banner-slide::before {
  display: none !important;
  content: none !important;
}

.hero-banner-slide img,
.hero-banner-slide picture,
.hero-banner-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-banner-slide img {
  object-fit: cover;
  object-position: center top;
  background: #FBFAF7;
}

/* Banner 1 (solo compu): la foto va corrida hacia ARRIBA para que la consola con
   los objetos quede a la vista; el hueco de abajo lo tapan las tarjetas + el velo */
/* Los banners de compu ya vienen recortados iguales (2.4:1) — sin corrimientos */

.hero-banner-slide[data-index="4"] img {
  object-fit: cover;
}
.hero-banner-slide[data-index="4"]::after,
.hero-banner-slide[data-index="2"]::after {
  content: none !important;
}

.hero-banners-arrow {
  display: none !important;
}

.hero-banners-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
}

.hero-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
  transition: all 0.18s ease;
}

.hero-banner-dot.is-active {
  background: #1c1c1a;
  border-color: #1c1c1a;
  transform: scale(1.15);
}

.hero-banner-dot:hover {
  background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 768px) {
  /* En celular va la versión propia del banner (16:9 completa, banner-N-cel.jpg) */
  .hero-banners-track {
    aspect-ratio: 16 / 9;
  }
  .hero-banner-slide img,
  .hero-banner-slide[data-index="4"] img {
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
  }
  .hero-banner-dot {
    width: 8px;
    height: 8px;
  }
}

/* ============================================
   PRODUCTOS DESTACADOS — Carrusel horizontal estilo ML
   Scroll-snap + flechas que avanzan card por card
   ============================================ */
.ml-carousel {
  position: relative;
  margin: 24px 0 30px;
}

/* Variante: productos FLOTANDO sobre el banner (sin contenedor blanco) */
.bruno-products-overlap {
  position: relative;
  z-index: 10;
  /* Tarjetas bien montadas sobre el banner (los textos terminan antes del 45% de alto) */
  margin-top: -21%;
  padding: 0 !important;
  padding-bottom: 24px !important;
  background: transparent !important;
}

/* Tarjetas del carrusel destacados: grandes (pedido de Agustín) */
.bruno-products-overlap .ml-product-card {
  min-width: 150px;
  max-width: 185px;
}
.bruno-products-overlap .ml-product-image {
  padding: 8px;
}
.bruno-products-overlap .ml-product-name {
  font-size: 12px;
}
.bruno-products-overlap .ml-product-price {
  font-size: 0.95rem;
}

.bruno-products-overlap .ml-carousel {
  margin: 0;
}

.bruno-products-overlap .bruno-container {
  background: transparent !important;
}

@media (max-width: 1100px) {
  .bruno-products-overlap {
    margin-top: -21%;
  }
}

@media (max-width: 768px) {
  .bruno-products-overlap {
    margin-top: -55px;
  }
  /* Tarjetas overlap MUCHO mas chicas en mobile */
  /* Tarjetas EXACTAS al carrusel mobile de brunospetshop.com (medido en vivo):
     42% de ancho, FOTO A SANGRE (sin margen), nombre 9px, precio 12.8px, envío 8px */
  .bruno-products-overlap .ml-product-card {
    flex: 0 0 42% !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 10px !important;
  }
  .bruno-products-overlap .ml-product-image {
    padding: 0 !important;
  }
  .bruno-products-overlap .ml-product-image img {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .bruno-products-overlap .ml-product-name {
    font-size: 9px !important;
    min-height: 2.4em !important;
    margin: 0 0 3px !important;
  }
  .bruno-products-overlap .ml-product-price {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  .bruno-products-overlap .ml-product-shipping {
    font-size: 8px !important;
    margin: 3px 0 0 !important;
    white-space: nowrap !important;
  }
  .bruno-products-overlap .ml-product-info {
    padding: 6px 6px 8px !important;
    gap: 2px !important;
  }
}

@media (max-width: 480px) {
  .bruno-products-overlap {
    margin-top: -20px;
  }
  .bruno-products-overlap .ml-product-card {
    flex: 0 0 42% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .bruno-products-overlap .ml-product-name {
    font-size: 9px !important;
  }
  .bruno-products-overlap .ml-product-price {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  .bruno-products-overlap .ml-product-shipping {
    font-size: 8px !important;
    white-space: nowrap !important;
  }
}

.ml-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 4px 14px;
  scroll-padding-left: 4px;
  /* "safe center": centra cuando los productos entran, pero si hay muchos
     arranca desde el inicio para que el primero NO quede cortado */
  justify-content: safe center;
}

.ml-carousel-track::-webkit-scrollbar {
  display: none;
}

.ml-product-card {
  flex: 0 0 calc((100% - 5 * 12px) / 6);
  min-width: 140px;
  max-width: 180px;
  scroll-snap-align: start;
  background: #ffffff;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.ml-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.ml-product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ml-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.ml-product-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #00a650;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.ml-product-info {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  background: #ffffff;
  text-align: center;
}

.ml-product-name {
  font-size: 15.5px;
  font-weight: 500;
  color: #333;
  line-height: 1.35;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body, sans-serif);
  min-height: 2.7em;
  text-align: center;
}

.ml-product-original {
  font-size: 12px;
  color: #888;
  text-decoration: line-through;
  line-height: 1.2;
  margin: 0;
  text-align: center;
}

.ml-product-price {
  font-size: 1.25rem;
  font-weight: 500;
  color: #1c1c1a;
  line-height: 1.1;
  margin: 0 0 4px;
  text-align: center;
}

.ml-product-shipping {
  font-size: 13.5px;
  font-weight: 500;
  color: #00a650 !important;
  line-height: 1.2;
  margin: 6px 0 0;
  letter-spacing: 0.02em;
  display: block;
  width: 100%;
  text-align: center;
}

/* Flechas del carrusel ML */
.ml-carousel-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  color: #1c1c1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: all 0.18s ease;
  opacity: 0.95;
}

.ml-carousel-arrow:hover {
  background: #f5f5f0;
  transform: translateY(-50%) scale(1.08);
  opacity: 1;
}

.ml-carousel-arrow:disabled {
  opacity: 0.4;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
}

.ml-carousel-prev { left: -18px; }
.ml-carousel-next { right: -18px; }

@media (max-width: 1100px) {
  .ml-product-card {
    flex: 0 0 calc((100% - 4 * 12px) / 5);
  }
}

@media (max-width: 768px) {
  .ml-product-card {
    flex: 0 0 calc((100% - 3 * 12px) / 4);
    min-width: 120px;
  }
  .ml-product-price {
    font-size: 1.05rem;
  }
  .ml-product-name {
    font-size: 12px;
  }
  /* BRUNO: flechas en su propio carril lateral, FUERA de las tarjetas
     (para no apretar un producto sin querer al tocar la flecha) */
  .ml-carousel {
    padding-left: 40px;
    padding-right: 40px;
  }
  .ml-carousel-arrow {
    width: 34px;
    height: 34px;
  }
  .ml-carousel-prev { left: 2px; }
  .ml-carousel-next { right: 2px; }
}

@media (max-width: 480px) {
  .ml-product-card {
    flex: 0 0 40%;
    min-width: 0;
  }
  .ml-carousel {
    padding-left: 34px;
    padding-right: 34px;
  }
  .ml-carousel-arrow {
    width: 30px;
    height: 30px;
  }
}

/* ============================================
   GRILLA DE PRODUCTOS (debajo de Categorias)
   5 filas en desktop (4 cols) - mas botton naranja CTA
   ============================================ */
.bruno-products-grid-section {
  padding: 30px 0 50px;
}

.ml-products-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

/* En grilla, las tarjetas no llevan los limites del carrusel */
.ml-products-grid .ml-product-card {
  flex: none;
  min-width: 0;
  max-width: none;
  width: 100%;
}

/* Limit 18 productos visibles SIEMPRE (incluso si el JS no corre) */
.ml-products-grid .ml-product-card:nth-child(n+19) {
  display: none !important;
}

@media (max-width: 1300px) {
  .ml-products-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1080px) {
  .ml-products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 860px) {
  .ml-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .ml-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* CTA "Ver mas productos" - boton naranja en el centro */
.bruno-grid-cta {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.bruno-btn-orange {
  display: inline-block;
  background: var(--color-cta);
  color: #ffffff !important;
  padding: 14px 38px;
  border-radius: 999px;
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  border: 0;
  cursor: pointer;
}

.bruno-btn-orange:hover,
.bruno-btn-orange:focus {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 107, 53, 0.45);
  color: #ffffff !important;
}

.bruno-btn-orange:active {
  transform: translateY(0);
}

/* ===== BRUNO: botones de compra en tarjetas de listado (SOLO celular) ===== */
.bruno-mobile-actions { display: none; }
@media (max-width: 767.98px) {
  .bruno-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 2px 10px;
    margin-top: 2px;
  }
  .bruno-mobile-actions form { margin: 0; width: 100%; }
  .bruno-card-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .03em;
    padding: 11px 8px;
    border-radius: 7px;
    border: 2px solid transparent;
    line-height: 1.1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: filter .15s ease, background .15s ease;
  }
  /* COMPRAR — verde oliva de la web, texto SIEMPRE blanco (un toque lleva al carrito) */
  .bruno-card-btn-buy,
  .bruno-card-btn-buy:link,
  .bruno-card-btn-buy:visited,
  .bruno-card-btn-buy:hover,
  .bruno-card-btn-buy:focus,
  .bruno-card-btn-buy:active {
    background: linear-gradient(180deg, var(--color-olive) 0%, var(--color-olive-dark) 100%);
    color: #ffffff !important;
    box-shadow: 0 3px 8px rgba(125, 139, 106, .32);
  }
  .bruno-card-btn-buy:active { filter: brightness(.94); }
  /* AGREGAR — blanco hueso con borde verde oliva (suma al carrito y deja seguir) */
  .bruno-card-btn-add {
    background: #FBFAF7;
    color: var(--color-olive) !important;
    border-color: var(--color-olive);
  }
  .bruno-card-btn-add:active { background: #f1ead6; }
}

/* ============================================
   BRUNO: 50% OFF estetico (cartel + precio tachado)
   100% visual — el precio real cobrado no cambia.
   ============================================ */

/* Cartel "50% OFF" — verde con texto blanco */
.bruno-badge-off {
  background: #00a650;
  color: #fff !important;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1;
  white-space: nowrap;
}

/* Variante flotante: esquina superior de la imagen (grilla de categorias/busqueda) */
.bruno-badge-float {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* En home ya es un .ml-product-badge posicionado: verde + un poco mas grande */
.ml-product-badge.bruno-badge-off {
  background: #00a650;
  font-size: 13px;
  padding: 4px 9px;
}

/* Variante en linea: al lado del precio (pagina de producto) */
.bruno-badge-inline {
  display: inline-block;
  font-size: 14px;
  padding: 4px 11px;
  border-radius: 5px;
  vertical-align: middle;
}

/* En CELULAR (la compu queda igual):
   - Tamano intermedio para la lista de abajo y las categorias/busqueda.
   - El carrusel de destacados (tarjetas chiquitas) va mas chico aparte,
     asi no tapa el producto ni se corta. */
@media (max-width: 768px) {
  .bruno-badge-float,
  .ml-product-badge.bruno-badge-off {
    font-size: 11px;
    padding: 3px 7px;
    letter-spacing: 0.2px;
    border-radius: 4px;
  }
  .bruno-badge-float {
    top: 6px;
    left: 6px;
  }
  /* Solo el carrusel de destacados (tarjetas pequenas): mas chico */
  .bruno-products-overlap .ml-product-badge.bruno-badge-off {
    font-size: 8px;
    padding: 2px 5px;
  }
}
@media (max-width: 480px) {
  .bruno-products-overlap .ml-product-badge.bruno-badge-off {
    font-size: 7px;
    padding: 1px 4px;
  }
}

/* Precio "antes" tachado en grilla y pagina de producto */
.bruno-fake-original {
  display: inline-block;
  color: #8a8a8a;
  text-decoration: line-through;
  font-weight: 400;
  margin-right: 6px;
}

/* En la pagina de producto el tachado es un <h4>: que no quede gigante */
h4.bruno-fake-original {
  font-size: 1rem;
  opacity: 0.85;
}

/* ============================================
   BRUNO: Guia de talles (link celeste + modal)
   ============================================ */
#single-product a.bruno-size-guide-link,
.bruno-size-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2da9e1 !important;
  font-weight: 400;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}
#single-product a.bruno-size-guide-link:hover,
.bruno-size-guide-link:hover {
  color: #1c8fc4 !important;
  text-decoration: underline;
}
.bruno-size-guide-link svg { flex: 0 0 auto; }

/* Modal */
.bruno-sizeguide-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 20px;
}
.bruno-sizeguide-overlay.is-open { display: flex; }
.bruno-sizeguide-box {
  position: relative;
  background: #fff;
  border-radius: 14px;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  animation: brunoSgIn 0.22s ease;
}
@keyframes brunoSgIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.bruno-sizeguide-close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #333;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.bruno-sizeguide-close:hover { background: #fff; color: #000; }
.bruno-sizeguide-scroll {
  overflow-y: auto;
  max-height: 88vh;
}
.bruno-sizeguide-img {
  display: block;
  width: 100%;
  height: auto;
}
.bruno-sizeguide-text {
  padding: 18px 22px 24px;
  color: #333;
  font-size: 0.92rem;
  line-height: 1.5;
}
.bruno-sizeguide-text h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: #1c1c1a;
}
.bruno-sizeguide-text ol {
  margin: 0 0 12px;
  padding-left: 20px;
}
.bruno-sizeguide-text ol li { margin-bottom: 7px; }
.bruno-sizeguide-text p { margin: 0 0 10px; }
.bruno-sizeguide-note {
  font-size: 0.84rem;
  color: #777;
  background: #f6f6f2;
  border-radius: 8px;
  padding: 10px 12px;
}

body.bruno-sizeguide-lock { overflow: hidden; }

/* ============================================================
   Esconder "Ofertas" de los menús de categorías (para no duplicarlo),
   PERO dejando visible el botón propio del header (.bruno-nav-ofertas).
   La sección sigue accesible por link directo (brunospetshop.com/ofertas).
   ============================================================ */
a[href$="/ofertas/"]:not(.bruno-nav-ofertas),
a[href$="/ofertas"]:not(.bruno-nav-ofertas) { display: none !important; }
/* Ocultar también el ítem completo del menú (li) para no dejar un hueco */
li:has(> a[href$="/ofertas/"]:not(.bruno-nav-ofertas)),
li:has(> a[href$="/ofertas"]:not(.bruno-nav-ofertas)) { display: none !important; }

/* FORZAR siempre visible el botón propio "Ofertas" del header (gana a cualquier regla). */
nav.bruno-header-nav a.bruno-nav-ofertas,
.bruno-header-nav a.bruno-nav-ofertas {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
   ELEGANCIA — capa final "porcelana y bronce" (tienda de hogar)
   Títulos en serif fina (Cormorant Garamond), botones en
   mayúsculas espaciadas, bordes netos y sombras suaves.
   ============================================================ */

body {
  font-weight: 400;
  letter-spacing: 0.01em;
}

.bruno-section-title,
.promo-title,
.newsletter-title,
.bruno-seo-about-title,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.bruno-section-title {
  font-size: 2.6rem;
  font-weight: 700;
  -webkit-text-stroke: 0.8px currentColor;
  color: var(--color-text);
}

.bruno-section-subtitle {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

/* Nombre de la marca en el header: la serif elegante de la página */
body .bruno-brand-name,
body .bruno-brand-name * {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  -webkit-text-stroke: 0.5px currentColor;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  font-size: 1.6rem !important;
}

/* Navegación del header: fina, sin mayúsculas corridas (solo la inicial) */
.bruno-header-nav a {
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  font-size: 1.05rem !important;
}

/* Botones: mayúsculas espaciadas, sin gordura */
.bruno-btn-orange,
.newsletter-form button,
button[type="submit"] {
  font-family: var(--font-body);
  font-weight: 400 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* Barra de anuncio y ticker: susurro, no grito */
.bruno-announcement-bar {
  letter-spacing: 0.08em;
  font-weight: 400;
}
.ticker-item {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* Tarjetas de producto: precio serif grande, nombre liviano */
.ml-product-name {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.ml-product-price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}

/* Sombras más suaves en toda la tienda */
.ml-product-card,
.category-card,
.ig-post {
  box-shadow: 0 1px 2px rgba(38, 37, 33, 0.05);
}
.ml-product-card:hover {
  box-shadow: 0 10px 30px rgba(38, 37, 33, 0.1);
}

/* El header va SOLO con el nombre de la marca (sin logo redondo) */
body .bruno-header-logo .bruno-logo-img {
  display: none !important;
}

/* ===== Ajustes de CELULAR (correcciones 2026-08-19) ===== */
@media (max-width: 767px) {
  /* El nombre no debe cortarse: más chico y con menos aire entre letras */
  body .bruno-brand-name,
  body .bruno-brand-name * {
    font-size: 1.12rem !important;
    letter-spacing: 0.07em !important;
    -webkit-text-stroke: 0.4px currentColor;
  }
  /* La tira de arriba SIEMPRE en un renglón */
  .bruno-announcement-bar {
    font-size: 0.68rem !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .anuncio-extra { display: none !important; }
}

/* ===== Carrusel de destacados: tarjetas EXACTAS a Bruno's Petshop ===== */
body .bruno-products-overlap .ml-product-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #333 !important;
  letter-spacing: 0 !important;
}
body .bruno-products-overlap .ml-product-price {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #1c1c1a !important;
  letter-spacing: 0 !important;
}
body .bruno-products-overlap .ml-product-shipping {
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ===== CELULAR: carrusel de destacados IDÉNTICO a brunospetshop.com =====
   (al final del archivo y con "body" adelante para ganarle a las reglas de compu) */
@media (max-width: 768px) {
  body .bruno-products-overlap .ml-product-name { font-size: 13px !important; letter-spacing: 0 !important; }
  body .bruno-products-overlap .ml-product-price { font-size: 1.2rem !important; font-weight: 700 !important; }
  body .bruno-products-overlap .ml-product-shipping { font-size: 9.5px !important; font-weight: 700 !important; }
  body .bruno-products-overlap .ml-carousel-arrow { display: none !important; }
  body .bruno-products-overlap .ml-carousel { padding-left: 0 !important; padding-right: 0 !important; }
  /* Categorías más cerca del carrusel en celular (menos aire vacío) */
  body .bruno-categories { margin-top: 0 !important; padding-top: 1.2rem !important; }
  body .bruno-products-overlap { padding-bottom: 8px !important; }
}

/* "Elegancia a precios imposibles" de la tira superior: SIEMPRE blanco puro */
body .bruno-announcement-bar,
body .bruno-announcement-bar .anuncio-extra {
  color: #FFFFFF !important;
}

/* El banner SIEMPRE a pantalla completa (en TN el home viene envuelto en un contenedor) */
body .bruno-hero-banners{width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;max-width:none !important;}

/* Legibilidad general: letra base más grande y tinta negra (2026-08-20) */
html { font-size: 17px; }
body { color: var(--color-text); }

/* ===== PÁGINA DE PRODUCTO: letra más grande para que lea todo el mundo (2026-08-20) ===== */
#single-product .product-description,
#single-product .product-description p,
#single-product .product-description li {
  font-size: 1.15rem !important;
  line-height: 1.75 !important;
  color: var(--color-text) !important;
}
#single-product .product-name {
  font-size: 2rem !important;
}
#single-product .product-price {
  font-size: 2.1rem !important;
}
#single-product label,
#single-product .form-group,
#single-product span:not(.bruno-transfer-promo-line1):not(.bruno-transfer-promo-line2) {
  font-size: 1.05rem;
}
#single-product .bruno-fs-bar-text,
#single-product .bruno-cuotas-bar-text,
#single-product .bruno-fs-bar-cta {
  font-size: 15px !important;
}
#single-product .bruno-transfer-promo-line1 { font-size: 1.15rem !important; }
#single-product .bruno-transfer-promo-line2 { font-size: 0.98rem !important; }
#single-product .bruno-slogan { font-size: 1.05rem !important; }

/* Los globitos "2 cuotas"/"3 cuotas" de la barra vuelven a su tamaño chiquito
   (el agrandado general de la página de producto los había inflado) */
#single-product .bruno-cuotas-bubble,
#single-product .bruno-cuotas-bubble span {
  font-size: 10px !important;
}

/* Precios de las tarjetas (home y listados): la MISMA fuente que Bruno's (Inter negrita).
   Solo los precios; el resto de la tarjeta queda igual. */
body .ml-product-price,
body .product-price,
body .js-price-container,
body .item-product .price {
  font-family: 'Inter', var(--font-body), sans-serif !important;
  font-weight: 700 !important;
}
/* TODOS los precios de la web con la misma fuente (Inter, como la petshop) */
#single-product .product-price,
body .bruno-cart-price,
body .price,
body .price-compare,
body .summary-total,
body .js-cart-total,
body .cart-item-price,
body .oferta-price-now,
body .ml-product-price,
body .product-price {
  font-family: 'Inter', var(--font-body), sans-serif !important;
}

/* Precios de tarjetas un poco más chicos (2026-08-20) */
body .ml-product-price { font-size: 1.12rem !important; }
body .bruno-products-overlap .ml-product-price { font-size: 1.2rem !important; }
body .product-price,
body .item-product .price,
body .js-price-container { font-size: 1.02rem !important; }

/* ===== UNA SOLA FUENTE PARA TODOS LOS PRECIOS (Inter, como la petshop) ===== */
body .ml-product-price,
body .bruno-products-overlap .ml-product-price,
body .bruno-products .ml-product-price,
#single-product .product-price,
body .product-price,
body .price,
body .price-compare,
body .bruno-cart-price,
body .summary-total,
body .js-cart-total,
body .cart-item-price,
body .oferta-price-now,
body .js-price-container,
body .js-price-display,
body #price_display,
body .item-price,
body .price-display {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

/* Nombre del producto en su página: bien en negrita para que se destaque */
#single-product .product-name,
#single-product h1.product-name {
  font-weight: 700 !important;
}

/* El cajón de sugerencias del buscador NO se muestra vacío (dibujaba una línea suelta) */
body .search-suggest:empty {
  display: none !important;
  border: 0 !important;
}

/* ===== BANDA DE MARCA CENTRADA (nombre + eslogan) ===== */
.bruno-brand-band {
  background: var(--color-white);
  text-align: center;
  padding: 14px 12px 0;
}
.bruno-brand-band-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--color-text);
}
.bruno-brand-band-name {
  font-family: var(--font-display);
  font-weight: 700;
  -webkit-text-stroke: 0.5px currentColor;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 1.75rem;
  line-height: 1.1;
}
.bruno-brand-band-slogan {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
/* el nombre viejo se va del header */
body .bruno-header-logo { display: none !important; }
@media (max-width: 767px) {
  .bruno-brand-band { padding: 10px 8px 7px; }
  .bruno-brand-band-name { font-size: 1.15rem; letter-spacing: 0.12em; }
  .bruno-brand-band-slogan { font-size: 0.78rem; }
}

/* Sin líneas horizontales en el header (pedido 2026-08-20) */
body .bruno-header,
body .js-head-main {
  border-bottom: none !important;
}
body .bruno-cats-wrap {
  /* como la petshop: solo línea horizontal arriba, sin verticales */
  border-top: 1px solid #d9d9d9 !important;
  border-bottom: none !important;
}
body .bruno-cats-strip a { border-left: none !important; }
/* El cajón de sugerencias no se muestra si no tiene sugerencias (aunque tenga espacios) */
body .search-suggest:not(:has(.search-suggest-item)) {
  display: none !important;
  border: 0 !important;
}

body .bruno-header-inner { padding-top: 0.15rem !important; padding-bottom: 0.45rem !important; min-height: 0 !important; }

/* CELULAR: fila carrito + menú + lupa bien distribuida bajo la marca */
@media (max-width: 767px) {
  body .bruno-header-inner {
    justify-content: center !important;
    gap: 1.6rem !important;
  }
}

/* CELULAR: menos aire entre el header y la tira de categorías */
@media (max-width: 767px) {
  body .bruno-header-inner { padding-bottom: 0.1rem !important; }
  body .bruno-cats-wrap { margin-top: 0 !important; }
}

/* CELULAR: la caja de búsqueda NO ocupa lugar hasta tocar la lupa; categorías más grandes */
@media (max-width: 767px) {
  body .bruno-header-inner:not(.is-searching) .bruno-mobile-search-form {
    display: none !important;
  }
  body .bruno-cats-strip a {
    font-size: 0.78rem !important;
    gap: 4px !important;
    padding: 0.45rem 0.8rem 0.5rem !important;
  }
  body .bruno-cats-strip a svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* CELULAR: aplanar la fila del header (el bloque del carrito medía 59px) */
@media (max-width: 767px) {
  body .bruno-header-utils { display: flex !important; align-items: center !important; }
  body .bruno-header-utils .utilities-container { gap: 0.8rem !important; }
  body .bruno-util-cart { margin-top: 0 !important; }
  body .bruno-util-cart .utility-head,
  body .bruno-util-cart .utility-head a { padding: 0 !important; }
  body .bruno-header-inner { padding-top: 0 !important; padding-bottom: 0 !important; }
  body .bruno-brand-band { padding-bottom: 0 !important; }
}

/* CELULAR: fila del header APLANADA de una vez (carrito medía 59px por herencias de compu) */
@media (max-width: 767px) {
  body .bruno-header-utils { display: flex !important; align-items: center !important; }
  body .bruno-header-utils .utilities-container { gap: 0.8rem !important; align-items: center !important; }
  body .bruno-util-cart { margin-top: 0 !important; }
  body .bruno-util-cart .utility-head,
  body .bruno-util-cart .utility-head a { padding: 0 !important; margin: 0 !important; }
  body .bruno-header-inner { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
  body .bruno-brand-band { padding-bottom: 0 !important; }
  body .bruno-mobile-menu a, body .bruno-mobile-search-toggle { padding-top: 2px !important; padding-bottom: 2px !important; }
}

/* CELULAR: al tocar la lupa, la caja de búsqueda ocupa TODO el ancho en su propia línea,
   justo encima de las categorías */
@media (max-width: 767px) {
  body .bruno-header-inner.is-searching .bruno-mobile-search-form {
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 99;
    padding: 6px 12px 10px !important;
  }
  body .bruno-mobile-search-form .bruno-mobile-search-input,
  body .bruno-mobile-search-form input[type="search"] {
    width: 100% !important;
    flex: 1 1 auto !important;
    height: 40px !important;
    border: 1.5px solid #262521 !important;
    border-radius: 50px !important;
    padding: 0.4rem 1.1rem !important;
    background: var(--color-bg) !important;
    font-size: 16px !important;
  }
}

/* El bloque fijo de arriba (anuncio + marca + header) con fondo blanco SÓLIDO:
   ningún hueco interno deja ver lo que scrollea por detrás */
body .bruno-sticky-stack {
  background: #FFFFFF !important;
}
body .bruno-brand-band { margin: 0 !important; }
body .bruno-header { margin: 0 !important; }

/* ===== TARJETAS DE LISTADOS Y RELACIONADOS: TODAS IGUALES (v2 limpia) =====
   La regla base del tema pone width:auto en la foto (por eso salían tiras).
   Contenedor cuadrado + foto que lo llena. Nada más. */
body .item-product .item-image {
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  height: auto !important;
}
body .item-product .item-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}
body .item-product .item-name {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.9em !important;
  line-height: 1.4 !important;
}

/* ===== COLUMNA DE FILTROS (listados): tarjeta prolija, sin encimarse ===== */
body #filters {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px 20px;
  overflow: hidden;
}
/* Títulos de sección (Categorías / Filtrar por / Precio) */
body #filters h2, body #filters h3, body #filters h4, body #filters h5,
body #filters legend, body #filters [class*="title"] {
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  letter-spacing: 0.02em;
  margin-bottom: 10px !important;
}
/* Lista de categorías: renglones cómodos */
body #filters a {
  display: block;
  font-size: 0.98rem !important;
  color: var(--color-text) !important;
  padding: 5px 0 !important;
  line-height: 1.35 !important;
}
body #filters a:hover { color: var(--color-cta) !important; }
/* Etiquetas Desde / Hasta */
body #filters label {
  font-size: 0.88rem !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 4px !important;
}
/* Campos de precio: grandes y claros */
body #filters .filter-input-price,
body #filters .js-price-filter-input {
  width: 100% !important;
  height: 42px !important;
  border: 1.5px solid #262521 !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  padding: 0 12px !important;
  background: var(--color-bg) !important;
}
/* Botón Aplicar: a lo ancho de la columna, bronce */
body #filters .js-price-filter-btn {
  position: static !important;
  float: none !important;
  transform: none !important;
  width: 100% !important;
  height: 42px !important;
  margin: 12px 0 0 !important;
  border-radius: 8px !important;
  background: var(--color-cta) !important;
  border-color: var(--color-cta) !important;
  color: #fff !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* El botón redondo se convierte en botón rectangular a lo ancho */
/* Nada dentro de la columna puede desbordarla */
body #filters * { max-width: 100%; }

/* Filtro de precio: Desde/Hasta apilados a lo ancho + botón Aplicar visible */
body #filters .js-price-filter-container .form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body #filters .filter-input-price-container {
  display: block !important;
  width: 100% !important;
}
body #filters .js-price-filter-btn:not(.btn-circle) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: var(--color-cta) !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  text-transform: uppercase;
}
body #filters .js-price-filter-btn:not(.btn-circle).disabled {
  opacity: 0.55 !important;
}

/* El botón Aplicar venía aplastado a 0 de alto: altura forzada */
body #filters .js-price-filter-btn:not(.btn-circle) {
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  overflow: visible !important;
}

/* Botón Aplicar del filtro de precio: rectangular, bronce, a lo ancho */
body #filters .js-price-filter-btn.btn-circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  position: static !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 12px 0 0 !important;
  border-radius: 8px !important;
  background: var(--color-cta) !important;
  border-color: var(--color-cta) !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 1 !important;
}
body #filters .js-price-filter-btn.btn-circle.disabled { opacity: 0.55 !important; }
body #filters .js-price-filter-btn.btn-circle span,
body #filters .js-price-filter-btn.btn-circle .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
body #filters .js-price-filter-btn.btn-circle svg { width: 16px !important; height: 16px !important; stroke: #fff !important; }

/* Tarjeta de filtros: borde negro, alineada con las categorías de arriba,
   y botón Aplicar SOLO con texto (la flecha se encimaba) */
body #filters {
  border: 1px solid #262521 !important;
  margin-left: 4px !important;
}
body #filters .js-price-filter-btn.btn-circle svg { display: none !important; }

/* ============================================
   FILTROS DE CATEGORÍA SEPARADOS DE LOS PRODUCTOS (2026-08-20)
   La tarjeta "Filtrar por / Precio / Aplicar" venía con pr-0 (sin aire
   a la derecha) y quedaba pegada a la grilla. Se corre uniforme hacia
   la izquierda dejando un canal de 34px contra los productos.
   ============================================ */
@media (min-width: 768px) {
  .category-body .row > .col-md-2.pr-0 {
    padding-right: 34px !important;
  }
}

/* ============================================
   CARTEL DE COOKIES LEGIBLE (2026-08-20)
   Con la paleta porcelana el texto del aviso quedaba negro sobre
   fondo oscuro. Texto (y negritas) en blanco.
   ============================================ */
.js-notification-cookie-banner,
.js-notification-cookie-banner strong {
  color: #ffffff !important;
}