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

/* === Google Fonts === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

/* === Custom Properties === */
:root {
  /* Colors */
  --color-olive: #6B7A2F;
  --color-olive-light: #8A9C4A;
  --color-olive-dark: #4E5A22;
  --color-cta: #E8722A;
  --color-cta-hover: #D4621F;
  --color-cta-light: rgba(232, 114, 42, 0.1);
  --color-bg: #FAFAF7;
  --color-bg-alt: #F3EDE4;
  --color-bg-dark: #1C1C1A;
  --color-text: #1C1C1A;
  --color-text-secondary: #6B6B63;
  --color-text-light: #9A9A92;
  --color-gold: #C9A84C;
  --color-gold-light: #F5E6B8;
  --color-white: #FFFFFF;
  --color-border: #E8E4DC;
  --color-success: #4CAF50;
  --color-whatsapp: #25D366;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Playfair Display', 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: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --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: 700 !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: 600;
  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(232, 114, 42, 0.35);
}

.bruno-btn-primary:hover {
  background: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 114, 42, 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);
}

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

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

/* "¡ENVÍO GRATIS!" verde lima brillante con efecto MUY llamativo */
.bruno-announcement-bar .announcement-free {
  color: #C6FF3D;
  font-weight: 900;
  font-size: 1.05em;
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(198, 255, 61, 0.7);
  animation: announcement-free-pulse 3s ease-in-out infinite;
  display: inline-block;
  padding: 0 2px;
}

@keyframes announcement-free-pulse {
  /* El latido con brillo ocurre rápido al principio... */
  0% {
    transform: scale(1);
    text-shadow: 0 0 8px rgba(198, 255, 61, 0.6);
  }
  10% {
    transform: scale(1.14);
    text-shadow: 0 0 18px rgba(198, 255, 61, 1), 0 0 30px rgba(198, 255, 61, 0.6);
  }
  /* ...y se queda quieto el resto del tiempo hasta repetir a los 3s */
  20%, 100% {
    transform: scale(1);
    text-shadow: 0 0 8px rgba(198, 255, 61, 0.6);
  }
}

/* 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 20s 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: 600;
  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: 600;
  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: 800 !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(107, 122, 47, 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: 800;
  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(107, 122, 47, 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: 600;
  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: 700 !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: 700;
  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: 700 !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-4xl);
  background: var(--color-white);
  min-height: 85vh;
  display: flex;
  align-items: center;
}

.categories-carousel {
  position: relative;
}

.categories-carousel::before,
.categories-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.categories-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--color-white) 0%, transparent 100%);
}

.categories-carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--color-white) 0%, transparent 100%);
}

.categories-carousel.at-start::before {
  opacity: 0;
}

.categories-carousel.at-end::after {
  opacity: 0;
}

.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;
  justify-content: 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: 140px;
  height: 140px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  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: 0.95rem;
  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: 800;
  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: 700;
  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: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
}

.product-name {
  font-weight: 600 !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: 800;
  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: 700;
  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: 600;
  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: 600;
  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: 800 !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: 600;
  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: 600;
  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);
}

.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: 700 !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: 700;
  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: 700 !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: 600;
  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: 600;
  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: 700 !important;
  line-height: 1.3 !important;
  color: var(--color-text) !important;
  margin-bottom: 1.8rem !important;
}

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

.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: 700;
  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: #FAF6EC !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: #6B7A2F !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: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6B7A2F;
  background: rgba(107, 122, 47, 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: 900 !important;
  line-height: 1.05 !important;
  color: #1c1c1a !important;
  margin: 0 !important;
  letter-spacing: -0.02em;
}

.popup-banner-accent {
  color: #6B7A2F !important;
  font-weight: 900;
  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: 800;
}

.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;
}

@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: 800;
  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;
  gap: 1.5rem !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0.6rem 2rem !important;
  min-height: 60px !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: 40px !important;
  width: 40px !important;
  border-radius: 50% !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: 800 !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(107, 122, 47, 0.06) !important;
}

/* === Search Bar — Proportional width === */
.bruno-header-search {
  flex: 1 1 auto !important;
  min-width: 225px !important;
  max-width: 345px !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: 2px solid var(--color-border) !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: var(--color-text-secondary) !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(107, 122, 47, 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: 700 !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: 700 !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: 600 !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: auto !important;
  margin-right: auto !important;
}

.bruno-header-utils .utilities-container {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 1.5rem !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: 600 !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;
}

.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: 600 !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: var(--color-white) !important;
  font-size: 0.55rem !important;
  min-width: 15px !important;
  height: 15px !important;
  line-height: 15px !important;
  border-radius: var(--radius-full) !important;
  font-weight: 700 !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;
}

/* === 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: #FAF6EC;
    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-3xl) 0 !important;
  }

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

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

  .category-card {
    min-width: 110px !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: 800 !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(107, 122, 47, 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(107, 122, 47, 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(107, 122, 47, 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: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --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: 800 !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: 700 !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: 700;
  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: 800 !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: 800 !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: 600 !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: 800;
  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: 700 !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: 'Poppins', 'Inter', sans-serif;
}

.bruno-features-title {
  font-size: 18px;
  font-weight: 700;
  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: 600;
  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: 'Poppins', 'Inter', sans-serif;
}

/* 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: 600 !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: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif !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: 600 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif !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: 600 !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: #00a650;
}

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

.bruno-fs-bar-fill {
  height: 100%;
  width: 0;
  background: #00a650;
  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: #00a650;
  font-weight: 600;
}

/* ============================================
   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: 600;
  color: #1c1c1a !important;
  background: #FAF6EC !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: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(107, 122, 47, 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(107, 122, 47, 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: 600;
  line-height: 1.4;
}

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

.bruno-shipping-calc-change {
  display: inline-block;
  margin-top: 6px;
  background: none;
  border: none;
  color: #2E7D32;
  font-size: 12px;
  font-weight: 600;
  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(201, 168, 76, 0.1);
  border-left: 3px solid var(--color-gold, #c9a84c);
  padding: 8px 10px;
  border-radius: 4px;
}

.bruno-shipping-calc-result.is-warning a {
  color: var(--color-olive);
  font-weight: 600;
  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: 600;
  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: 600 !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: 700;
  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: 800;
}

/* 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: 700;
  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: 700;
  color: var(--color-text);
  margin: 14px 0 6px;
}

/* Cuotas + "Ver detalles" en un solo renglón, el botón celeste a la derecha */
.bruno-pdp-col-right .js-product-payments-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
}

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

.bruno-pdp-col-right .js-product-installments-container {
  width: auto !important;
  max-width: none !important;
  flex: 0 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: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 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;
}

/* 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: 700 !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;
}

/* 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: 'Poppins', 'Inter', sans-serif;
  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: 600;
  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: 'Poppins', 'Inter', sans-serif;
}

.bruno-reviews-title {
  font-size: 22px;
  font-weight: 700;
  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: 600;
  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: 600;
  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: 600;
  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: 600;
  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: 700;
  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: 600;
}

/* === 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: 800;
  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: 700;
  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: 700;
  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: 600;
  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(107, 122, 47, 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, #FAF6EC);
  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: #FAF6EC;
}

/* 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;
  height: 70%;
  background: linear-gradient(
    to bottom,
    rgba(250, 246, 236, 0) 0%,
    rgba(250, 246, 236, 0.2) 25%,
    rgba(250, 246, 236, 0.5) 50%,
    rgba(250, 246, 236, 0.85) 75%,
    #FAF6EC 100%
  );
  pointer-events: none;
  z-index: 3;
}

.hero-banners-track {
  position: relative;
  width: 100%;
  aspect-ratio: 2.35 / 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 a {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-banner-slide img {
  object-fit: cover;
  object-position: center top;
  background: #FAF6EC;
  transform: translateY(-22%);
}

/* Banner 5: achicar y bajar un poco mas que las demas */
.hero-banner-slide[data-index="4"] img {
  object-fit: contain;
  transform: translateY(-5%) scale(0.8);
  transform-origin: center top;
}

/* Banner 6: difuminar ambos laterales para que se fundan con el crema de los costados.
   La imagen esta a scale(0.8), o sea sus bordes reales caen ~10% y ~90% del ancho:
   el crema arranca pleno ahi y se desvanece hacia el centro, tapando el salto. */
.hero-banner-slide[data-index="4"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #FAF6EC 0%,
    #FAF6EC 10%,
    rgba(250, 246, 236, 0) 30%,
    rgba(250, 246, 236, 0) 70%,
    #FAF6EC 90%,
    #FAF6EC 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Banner 3: difuminar el costado derecho para que las flores se fundan con el crema */
.hero-banner-slide[data-index="2"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30%;
  background: linear-gradient(to right, rgba(250, 246, 236, 0) 0%, rgba(250, 246, 236, 0.6) 60%, #FAF6EC 100%);
  pointer-events: none;
  z-index: 2;
}

.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) {
  .hero-banners-track {
    aspect-ratio: 1.9 / 1;
  }
  .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;
  margin-top: -380px;
  padding: 0 !important;
  padding-bottom: 24px !important;
  background: transparent !important;
}

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

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

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

@media (max-width: 768px) {
  .bruno-products-overlap {
    margin-top: -130px;
  }
  /* Tarjetas overlap MUCHO mas chicas en mobile */
  .bruno-products-overlap .ml-product-card {
    flex: 0 0 calc((100% - 4 * 8px) / 5) !important;
    min-width: 80px !important;
    max-width: 115px !important;
    border-radius: 10px !important;
  }
  .bruno-products-overlap .ml-product-name {
    font-size: 10px !important;
    min-height: 2.4em !important;
    margin: 0 0 3px !important;
  }
  .bruno-products-overlap .ml-product-price {
    font-size: 0.85rem !important;
  }
  .bruno-products-overlap .ml-product-original {
    font-size: 10px !important;
  }
  .bruno-products-overlap .ml-product-shipping {
    font-size: 9px !important;
    margin: 3px 0 0 !important;
  }
  .bruno-products-overlap .ml-product-info {
    padding: 6px 6px 8px !important;
    gap: 2px !important;
  }
  .bruno-products-overlap .ml-product-image img {
    padding: 6px !important;
  }
}

@media (max-width: 480px) {
  .bruno-products-overlap {
    margin-top: -80px;
  }
  .bruno-products-overlap .ml-product-card {
    flex: 0 0 30% !important;
    min-width: 0 !important;
    max-width: 120px !important;
  }
  .bruno-products-overlap .ml-product-name {
    font-size: 9px !important;
  }
  .bruno-products-overlap .ml-product-price {
    font-size: 0.78rem !important;
  }
  .bruno-products-overlap .ml-product-shipping {
    font-size: 8px !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;
  justify-content: 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: 700;
  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: 13px;
  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: 700;
  color: #1c1c1a;
  line-height: 1.1;
  margin: 0 0 4px;
  text-align: center;
}

.ml-product-shipping {
  font-size: 11px;
  font-weight: 700;
  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;
  pointer-events: none;
  transform: translateY(-50%) scale(0.85);
}

.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;
  }
  .ml-carousel-prev { left: 4px; }
  .ml-carousel-next { right: 4px; }
}

@media (max-width: 480px) {
  .ml-product-card {
    flex: 0 0 40%;
    min-width: 0;
  }
  .ml-carousel-arrow {
    width: 34px;
    height: 34px;
  }
}

/* ============================================
   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: #FF6B35;
  color: #ffffff !important;
  padding: 14px 38px;
  border-radius: 999px;
  font-family: var(--font-body, sans-serif);
  font-weight: 700;
  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: #E55A2B;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(255, 107, 53, 0.45);
  color: #ffffff !important;
}

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