/* ==========================================================
   custom.css – Hoja de estilos personalizada de Urbanova
   ─────────────────────────────────────────────────────────
   Variables CSS que sobreescriben / extienden Bootstrap 5
   con la paleta de marca: Verde Hoja + Carbón + Blanco
   ========================================================== */

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

/* ── Variables de Marca Urbanova ─────────────── */
:root {
  /* Paleta principal – Verde Colibrí Urbanova (extraído del logo oficial) */
  --urb-green        : #39B820;
  --urb-green-dark   : #2D9018;
  --urb-green-light  : #6FCF58;
  --urb-green-pale   : #EBF7E8;
  --urb-carbon       : #1A1A1A;
  --urb-carbon-soft  : #2D2D2D;
  --urb-carbon-mid   : #424242;
  --urb-white        : #FFFFFF;
  --urb-off-white    : #F8F9FA;
  --urb-gray-light   : #EEEEEE;
  --urb-gray         : #9E9E9E;

  /* Tipografía */
  --font-primary     : 'Inter', sans-serif;
  --font-display     : 'Poppins', sans-serif;

  /* Sombras */
  --shadow-sm        : 0 2px 8px rgba(0,0,0,.08);
  --shadow-md        : 0 4px 20px rgba(0,0,0,.12);
  --shadow-lg        : 0 8px 40px rgba(0,0,0,.18);
  --shadow-green     : 0 4px 20px rgba(76,175,80,.30);

  /* Bordes */
  --radius-sm        : 8px;
  --radius-md        : 12px;
  --radius-lg        : 20px;
  --radius-pill      : 50px;

  /* Transiciones */
  --transition       : all .25s ease;
}

/* ── Reset y base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family     : var(--font-primary);
  background-color: var(--urb-off-white);
  color           : var(--urb-carbon);
  line-height     : 1.6;
}

/* ── Scrollbar personalizado ─────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--urb-gray-light); }
::-webkit-scrollbar-thumb { background: var(--urb-green); border-radius: 3px; }

/* ══════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════ */
.navbar-urbanova {
  background-color: var(--urb-carbon) !important;
  box-shadow      : var(--shadow-md);
  padding         : .75rem 1rem;
  position        : sticky;
  top             : 0;
  z-index         : 1030;
}

.navbar-brand-urbanova {
  font-family : var(--font-display);
  font-size   : 1.4rem;
  font-weight : 900;
  color       : var(--urb-white) !important;
  letter-spacing: .5px;
  text-decoration: none;
}

.navbar-brand-urbanova span {
  color: var(--urb-green);
}

/* ── Logo imagen en navbar ────────────────── */
.navbar-brand-logo {
  display        : flex;
  align-items    : center;
  text-decoration: none;
  flex-shrink    : 0;
}

.navbar-logo-img {
  height          : 50px;
  width           : auto;
  max-width       : 180px;
  object-fit      : contain;
  /* Recortar el fondo negro del logo para que se integre con el navbar oscuro */
  border-radius   : 6px;
  /* Leve brillo para destacar el colibrí verde sobre el navbar carbón */
  filter          : brightness(1.05) drop-shadow(0 0 6px rgba(57,184,32,.25));
  transition      : filter .25s ease;
}

.navbar-logo-img:hover {
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(57,184,32,.45));
}

.navbar-urbanova .nav-link {
  color      : rgba(255,255,255,.85) !important;
  font-weight: 500;
  transition : var(--transition);
  padding    : .4rem .8rem !important;
  border-radius: var(--radius-sm);
}

.navbar-urbanova .nav-link:hover {
  color           : var(--urb-white) !important;
  background-color: rgba(76,175,80,.2);
}

/* Barra de búsqueda en navbar */
.search-form .form-control {
  background  : rgba(255,255,255,.1);
  border      : 1px solid rgba(255,255,255,.2);
  color       : var(--urb-white);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  transition  : var(--transition);
}

.search-form .form-control::placeholder { color: rgba(255,255,255,.5); }
.search-form .form-control:focus {
  background  : rgba(255,255,255,.18);
  border-color: var(--urb-green);
  box-shadow  : 0 0 0 3px rgba(76,175,80,.25);
  color       : var(--urb-white);
}

.search-form .btn-search {
  background   : var(--urb-green);
  border       : none;
  color        : var(--urb-white);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  padding      : .4rem 1rem;
  transition   : var(--transition);
}

.search-form .btn-search:hover {
  background: var(--urb-green-dark);
}

/* Botón carrito */
.btn-cart {
  background  : transparent;
  border      : 2px solid rgba(255,255,255,.3);
  color       : var(--urb-white) !important;
  border-radius: var(--radius-sm);
  position    : relative;
  transition  : var(--transition);
}

.btn-cart:hover {
  border-color: var(--urb-green);
  background  : rgba(76,175,80,.15);
}

/* Badge del carrito */
.cart-badge {
  position   : absolute;
  top        : -6px;
  right      : -6px;
  background : var(--urb-green);
  color      : white;
  font-size  : .65rem;
  font-weight: 700;
  min-width  : 18px;
  height     : 18px;
  border-radius: 50%;
  display    : flex;
  align-items: center;
  justify-content: center;
  border     : 2px solid var(--urb-carbon);
  transition : var(--transition);
}

/* ══════════════════════════════════════════════
   BOTONES URBANOVA
   ══════════════════════════════════════════════ */
.btn-urb-primary {
  background   : var(--urb-green);
  border       : none;
  color        : var(--urb-white);
  font-weight  : 600;
  border-radius: var(--radius-sm);
  padding      : .55rem 1.4rem;
  transition   : var(--transition);
  box-shadow   : var(--shadow-green);
}

.btn-urb-primary:hover, .btn-urb-primary:focus {
  background: var(--urb-green-dark);
  color     : var(--urb-white);
  transform : translateY(-1px);
  box-shadow: 0 6px 24px rgba(76,175,80,.40);
}

.btn-urb-primary:active { transform: translateY(0); }

.btn-urb-dark {
  background   : var(--urb-carbon);
  border       : none;
  color        : var(--urb-white);
  font-weight  : 600;
  border-radius: var(--radius-sm);
  padding      : .55rem 1.4rem;
  transition   : var(--transition);
}

.btn-urb-dark:hover {
  background: var(--urb-carbon-soft);
  color     : var(--urb-white);
  transform : translateY(-1px);
}

.btn-urb-outline {
  background   : transparent;
  border       : 2px solid var(--urb-green);
  color        : var(--urb-green);
  font-weight  : 600;
  border-radius: var(--radius-sm);
  padding      : .5rem 1.4rem;
  transition   : var(--transition);
}

.btn-urb-outline:hover {
  background: var(--urb-green);
  color     : var(--urb-white);
  transform : translateY(-1px);
}

/* Feedback visual al agregar al carrito */
.btn-urb-primary.htmx-request {
  background: var(--urb-green-dark);
  cursor    : wait;
  opacity   : .85;
}

/* ══════════════════════════════════════════════
   HERO BANNER
   ══════════════════════════════════════════════ */
.hero-banner {
  background: linear-gradient(135deg, var(--urb-carbon) 0%, var(--urb-carbon-soft) 40%, #1B4D20 100%);
  color      : var(--urb-white);
  padding    : 80px 0;
  position   : relative;
  overflow   : hidden;
}

.hero-banner::before {
  content : '';
  position: absolute;
  inset   : 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(76,175,80,.18) 0%, transparent 65%);
  pointer-events: none;
}

/* El contenido del hero debe quedar por encima del overlay decorativo */
.hero-banner > .container-xl {
  position: relative;
  z-index : 1;
}

.hero-banner .hero-tag {
  display    : inline-block;
  background : var(--urb-green);
  color      : var(--urb-white);
  font-size  : .78rem;
  font-weight: 700;
  padding    : .3rem .8rem;
  border-radius: var(--radius-pill);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero-banner h1 {
  font-family : var(--font-display);
  font-size   : clamp(2rem, 5vw, 3.5rem);
  font-weight : 900;
  line-height : 1.15;
  margin-bottom: 1.25rem;
}

.hero-banner h1 span { color: var(--urb-green); }

.hero-banner .hero-price {
  font-size  : 1.1rem;
  color      : rgba(255,255,255,.7);
  margin-bottom: 2rem;
}

.hero-banner .hero-price strong {
  font-size: 1.8rem;
  color    : var(--urb-green-light);
}

/* Decoración circular */
.hero-circle {
  width        : 340px;
  height       : 340px;
  border-radius: 50%;
  background   : radial-gradient(circle, rgba(76,175,80,.25) 0%, transparent 70%);
  border       : 2px dashed rgba(76,175,80,.3);
  display      : flex;
  align-items  : center;
  justify-content: center;
  font-size    : 6rem;
  animation    : float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* ══════════════════════════════════════════════
   SECCIÓN DE CATEGORÍAS
   ══════════════════════════════════════════════ */
.section-title {
  font-family : var(--font-display);
  font-weight : 800;
  font-size   : 1.6rem;
  color       : var(--urb-carbon);
  position    : relative;
  margin-bottom: 1.5rem;
}

.section-title::after {
  content      : '';
  display      : block;
  width        : 48px;
  height       : 4px;
  background   : var(--urb-green);
  border-radius: 2px;
  margin-top   : .4rem;
}

/* Slider horizontal de chips de categoría para móvil */
.chips-scroll-container {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  white-space: nowrap;
  padding: .2rem .2rem .5rem .2rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.chips-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

@media (min-width: 992px) {
  .chips-scroll-container {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
  }
}

.category-chip {
  display        : inline-flex;
  align-items    : center;
  gap            : .4rem;
  padding        : .55rem 1.1rem;
  border-radius  : var(--radius-pill);
  background     : var(--urb-white);
  border         : 1.5px solid var(--urb-gray-light);
  color          : var(--urb-carbon);
  font-weight    : 500;
  font-size      : .875rem;
  text-decoration: none;
  transition     : var(--transition);
  box-shadow     : var(--shadow-sm);
  flex-shrink    : 0;
  white-space    : nowrap;
}

.category-chip:hover {
  border-color: var(--urb-green);
  color       : var(--urb-green);
  background  : var(--urb-green-pale);
  transform   : translateY(-2px);
  box-shadow  : var(--shadow-green);
}

.category-chip i {
  font-size: 1rem;
}

/* Badge de categoría / subcategoría */
.aisle-badge {
  display      : inline-block;
  background   : var(--urb-green-pale);
  color        : var(--urb-green-dark);
  font-size    : .72rem;
  font-weight  : 700;
  padding      : .15rem .55rem;
  border-radius: var(--radius-pill);
  border       : 1px solid var(--urb-green-light);
}

/* ══════════════════════════════════════════════
   TARJETAS DE PRODUCTO
   ══════════════════════════════════════════════ */
.product-card {
  background   : var(--urb-white);
  border       : 1px solid var(--urb-gray-light);
  border-radius: var(--radius-md);
  overflow     : hidden;
  transition   : var(--transition);
  box-shadow   : var(--shadow-sm);
  height       : 100%;
  display      : flex;
  flex-direction: column;
}

.product-card:hover {
  transform   : translateY(-4px);
  box-shadow  : var(--shadow-md);
  border-color: var(--urb-green-light);
}

.product-card__img-wrap {
  position       : relative;
  aspect-ratio   : 1 / 1;
  overflow       : hidden;
  background     : var(--urb-off-white);
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.product-card__img {
  width     : 80%;
  height    : 80%;
  object-fit: contain;
  transition : transform .4s ease;
}

.product-card:hover .product-card__img { transform: scale(1.06); }

.product-card__badge {
  position     : absolute;
  top          : 10px;
  left         : 10px;
  background   : #FF5722;
  color        : white;
  font-size    : .7rem;
  font-weight  : 700;
  padding      : .2rem .55rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.product-card__body {
  padding      : 1rem;
  flex         : 1;
  display      : flex;
  flex-direction: column;
}

.product-card__name {
  font-weight  : 600;
  font-size    : .9rem;
  color        : var(--urb-carbon);
  margin-bottom: .35rem;
  line-height  : 1.4;
  display      : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow     : hidden;
}

.product-card__aisle {
  font-size    : .75rem;
  color        : var(--urb-gray);
  margin-bottom: .6rem;
}

.product-card__price {
  margin-top   : auto;
  margin-bottom: .8rem;
}

.product-card__price .price-current {
  font-family : var(--font-display);
  font-size   : 1.2rem;
  font-weight : 800;
  color       : var(--urb-carbon);
}

.product-card__price .price-compare {
  font-size      : .8rem;
  text-decoration: line-through;
  color          : var(--urb-gray);
  margin-left    : .4rem;
}

.product-card__footer {
  padding    : 0 1rem 1rem;
}

/* ══════════════════════════════════════════════
   SIDEBAR / OFFCANVAS
   ══════════════════════════════════════════════ */
.offcanvas-urbanova {
  background : var(--urb-carbon) !important;
  color      : var(--urb-white) !important;
  width      : 290px !important;
}

.offcanvas-urbanova .offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding      : 1.25rem 1.5rem;
}

.offcanvas-urbanova .offcanvas-title {
  font-family : var(--font-display);
  font-weight : 700;
  color       : var(--urb-white);
  font-size   : 1.2rem;
}

.sidebar-category-link {
  display        : flex;
  align-items    : center;
  gap            : .75rem;
  padding        : .75rem 1.5rem;
  color          : rgba(255,255,255,.8) !important;
  text-decoration: none;
  transition     : var(--transition);
  border-left    : 3px solid transparent;
}

.sidebar-category-link:hover,
.sidebar-category-link.active {
  background  : rgba(76,175,80,.15);
  color       : var(--urb-white) !important;
  border-left-color: var(--urb-green);
}

.sidebar-category-link i { font-size: 1.1rem; }

.sidebar-aisle-tag {
  margin-left  : auto;
  font-size    : .68rem;
  background   : rgba(76,175,80,.25);
  color        : var(--urb-green-light);
  padding      : .1rem .4rem;
  border-radius: var(--radius-pill);
  font-weight  : 600;
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.footer-urbanova {
  background : var(--urb-carbon);
  color      : rgba(255,255,255,.75);
  padding    : 3rem 0 1.5rem;
  margin-top : 4rem;
}

.footer-urbanova .footer-brand {
  font-family : var(--font-display);
  font-size   : 1.6rem;
  font-weight : 900;
  color       : var(--urb-white);
}

.footer-urbanova .footer-brand span { color: var(--urb-green); }

.footer-urbanova .footer-slogan {
  color      : var(--urb-green-light);
  font-style : italic;
  font-size  : .9rem;
}

.footer-urbanova a {
  color          : rgba(255,255,255,.65);
  text-decoration: none;
  transition     : var(--transition);
}

.footer-urbanova a:hover { color: var(--urb-green-light); }

.footer-divider {
  border-color: rgba(255,255,255,.1);
  margin      : 2rem 0 1.5rem;
}

.footer-copy { font-size: .82rem; }

/* WhatsApp float button */
.btn-whatsapp {
  display        : inline-flex;
  align-items    : center;
  gap            : .5rem;
  background     : #25D366;
  color          : white !important;
  font-weight    : 600;
  padding        : .55rem 1.2rem;
  border-radius  : var(--radius-pill);
  text-decoration: none;
  transition     : var(--transition);
  box-shadow     : 0 4px 15px rgba(37,211,102,.4);
}

.btn-whatsapp:hover {
  background: #1ebe5a;
  transform : translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,.5);
}

/* ══════════════════════════════════════════════
   UTILITARIOS
   ══════════════════════════════════════════════ */
.text-urb-green  { color: var(--urb-green) !important; }
.text-urb-carbon { color: var(--urb-carbon) !important; }
.bg-urb-green    { background-color: var(--urb-green) !important; }
.bg-urb-carbon   { background-color: var(--urb-carbon) !important; }
.bg-urb-pale     { background-color: var(--urb-green-pale) !important; }

/* Rating estrellas */
.stars { color: #FFC107; font-size: .85rem; }

/* Loading spinner HTMX */
.htmx-indicator {
  display   : none;
  font-size : .8rem;
  color     : var(--urb-gray);
}
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator  { display: inline-block; }

/* Animaciones de entrada */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
  animation: fadeInUp .4s ease forwards;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-banner { padding: 48px 0; }
  .hero-circle { width: 200px; height: 200px; font-size: 4rem; }
  .search-form { display: none !important; }
}

@media (max-width: 576px) {
  .product-card__price .price-current { font-size: 1rem; }
}

/* ══════════════════════════════════════════════
   BOTÓN FLOTANTE DE CARRITO
   ══════════════════════════════════════════════ */
.floating-cart-wrapper {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1040;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.floating-cart-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--urb-green);
  color: var(--urb-white) !important;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 25px rgba(57, 184, 32, 0.45);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: .3px;
  transition: all 0.25s ease;
  animation: floatPulse 3s infinite ease-in-out;
}

.floating-cart-btn:hover {
  background-color: var(--urb-green-dark);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 30px rgba(45, 144, 24, 0.6);
  color: var(--urb-white) !important;
}

.floating-cart-badge {
  background: var(--urb-carbon);
  color: var(--urb-white);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

@keyframes floatPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (max-width: 576px) {
  .floating-cart-wrapper {
    bottom: 20px;
    right: 20px;
  }
  .floating-cart-btn {
    padding: 10px 16px;
    font-size: 0.88rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   Bloque C — Loading states, empty states, transiciones
   ══════════════════════════════════════════════════════════════ */

/* HTMX loading indicators (aparecen mientras hay request en curso) */
.htmx-indicator {
  opacity: 0;
  transition: opacity .2s;
  display: inline-block;
}
.htmx-request .htmx-indicator {
  opacity: 1;
}
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Skeleton loader (fondo animado gris) */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s infinite;
  border-radius: 6px;
  color: transparent;
}
@keyframes skeleton-loading {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Empty states consistentes */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}
.empty-state__icon {
  font-size: 3.5rem;
  opacity: .45;
  margin-bottom: .75rem;
  display: inline-block;
}
.empty-state__title {
  font-weight: 600;
  color: #333;
  margin-bottom: .25rem;
}
.empty-state__desc {
  font-size: .9rem;
  margin-bottom: 1rem;
}

/* Wishlist heart hover */
.wishlist-btn-wrap button:hover i.bi-heart {
  color: #e91e63 !important;
}

/* Cart badge animación al cambiar */
.floating-cart-badge {
  transition: transform .2s;
}
.floating-cart-btn:hover .floating-cart-badge {
  transform: scale(1.15);
}

/* Fade-in de resultados de búsqueda HTMX */
.htmx-swapping {
  opacity: 0;
  transition: opacity .1s;
}
.htmx-settling {
  opacity: 1;
  transition: opacity .2s;
}

/* Botón submit deshabilitado durante request */
button[hx-post]:disabled,
button.htmx-request {
  opacity: .6;
  cursor: wait;
}

/* Tabs admin: focus visible */
.nav-pills .nav-link:focus-visible {
  outline: 2px solid var(--urb-green, #39B820);
  outline-offset: 2px;
}

/* Cards con hover suave en el catálogo */
.product-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════════
   ADMIN MOBILE — Drawer hamburguesa
   ══════════════════════════════════════════════ */
.admin-mobile-topbar { display: none; }
.admin-sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  /* Top bar fijo con hamburguesa */
  .admin-mobile-topbar {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 1040;
    background: #1A1A1A;
    color: #fff;
    padding: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }
  .admin-mobile-topbar .brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .admin-mobile-topbar .brand img { height: 28px; width: 28px; border-radius: 50%; }
  .admin-mobile-topbar .hamburger-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .admin-mobile-topbar .hamburger-btn:active { background: rgba(255,255,255,.1); }

  /* En el celular la campana vive en la barra superior (la del cajón se esconde: el cajón recorta su menú) */
  .admin-sidebar #notif-badge { display: none !important; }
  .admin-mobile-topbar #notif-badge-mobile .dropdown-menu { position: fixed !important; top: 64px !important; right: 8px !important; left: auto !important; transform: none !important; }

  /* El layout del admin pasa a column */
  .d-flex:has(> .admin-sidebar) {
    flex-direction: column !important;
  }

  /* Sidebar como drawer deslizante desde la izquierda */
  .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    min-height: 0 !important;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 2000 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0 !important;
    display: block !important;
  }
  .admin-sidebar.open {
    transform: translateX(0) !important;
  }
  .admin-sidebar-backdrop {
    z-index: 1900 !important;
  }
  /* Asegurar que los items del nav son clickeables y visibles */
  .admin-sidebar ul,
  .admin-sidebar a,
  .admin-sidebar button {
    position: relative;
    z-index: 1;
  }

  /* Backdrop oscuro cuando drawer abierto */
  .admin-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1045;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  .admin-sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Contenido admin ocupa todo el ancho */
  .d-flex > main {
    width: 100% !important;
    padding: 1rem !important;
  }
}

/* Desktop: ocultar topbar móvil y backdrop */
@media (min-width: 992px) {
  .admin-mobile-topbar,
  .admin-sidebar-backdrop { display: none !important; }
}

/* Quick View button — solo visible al hover en desktop */
.product-card .qv-btn {
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity .2s ease, transform .2s ease;
}
.product-card:hover .qv-btn {
  opacity: .95;
  transform: translate(-50%, 0);
}
/* En móvil siempre visible */
@media (max-width: 768px) {
  .product-card .qv-btn {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

/* ══════════════════════════════════════════════
   Iconos clickeables del footer (dirección/tel/email)
   ══════════════════════════════════════════════ */
.footer-contact-link {
  transition: color .15s ease, transform .15s ease;
  display: inline-block;
}
.footer-contact-link:hover {
  color: #39B820 !important;
  transform: translateX(2px);
}
.footer-contact-link:hover i {
  transform: scale(1.1);
}

/* ══════════════════════════════════════════════
   Dashboard stat cards clickeables
   ══════════════════════════════════════════════ */
.dashboard-stat-link { color: inherit; display: block; }
.dashboard-stat-link .card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.dashboard-stat-link:hover .card {
  transform: translateY(-3px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important;
}
.dashboard-stat-link:hover .bi-arrow-right {
  transform: translateX(3px);
  transition: transform .15s ease;
}

/* ══════════════════════════════════════════════
   Admin sidebar dropdown (notificaciones)
   Asegura que el dropdown se pinte por encima de
   alertas y toasts de la página principal.
   ══════════════════════════════════════════════ */
.admin-sidebar {
  z-index: 100;
}
.admin-sidebar .dropdown-menu {
  z-index: 10050 !important;
}

/* ══════════════════════════════════════════════
   TOP BAR — Franja de anuncios sobre el navbar
   ══════════════════════════════════════════════ */
.urb-topbar {
  background: #0F0F0F;
  color: rgba(255,255,255,.75);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.urb-topbar a {
  transition: color .15s ease;
}
.urb-topbar a:hover {
  color: #39B820 !important;
}
.urb-topbar .text-urb-green {
  color: #39B820 !important;
}

/* ══════════════════════════════════════════════
   TRUST BAR — 4 pilares de confianza
   ══════════════════════════════════════════════ */
.urb-trustbar {
  background: linear-gradient(90deg, #1B4D20 0%, #257A2C 100%);
  color: #fff;
}
.urb-trustbar .trust-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
}
.urb-trustbar .trust-item i {
  font-size: 1.6rem;
  color: rgba(255,255,255,.85);
  flex-shrink: 0;
}
.urb-trustbar .trust-item .trust-title {
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.2;
  margin-bottom: .1rem;
}
.urb-trustbar .trust-item .trust-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.7);
  line-height: 1.2;
}

/* ══════════════════════════════════════════════
   PRODUCT CAROUSEL — galería deslizante del producto
   ══════════════════════════════════════════════ */
.product-carousel .carousel-indicators [data-bs-target] {
  background-color: rgba(0,0,0,.3);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
}
.product-carousel .carousel-indicators [data-bs-target].active {
  background-color: #39B820;
}
.product-carousel .carousel-control-prev-icon,
.product-carousel .carousel-control-next-icon {
  background-color: rgba(0,0,0,.4);
  border-radius: 50%;
  padding: 1.25rem;
  background-size: 45% 45%;
}
.product-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.product-carousel .carousel-control-next:hover .carousel-control-next-icon {
  background-color: #39B820;
}
/* Lupa: la foto se amplía bajo el mouse; en el celular, al tocarla se abre a pantalla completa */
.product-zoom { overflow: hidden; cursor: zoom-in; }
.product-zoom.is-zooming { cursor: crosshair; }
.product-zoom img { transition: transform .12s ease-out; will-change: transform; }
.product-zoom.is-zooming img { transition: none; }
.product-zoom-hint {
  position: absolute; right: .75rem; bottom: .75rem; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); color: #333; font-size: 1.05rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.15); pointer-events: none;
}
#productZoomModal .modal-body { touch-action: pinch-zoom; }
.thumb-btn {
  transition: border-color .15s ease, transform .15s ease;
}
.thumb-btn:hover {
  border-color: #39B820 !important;
  transform: scale(1.05);
}

/* ══════════════════════════════════════════════════════════════
   DISEÑO 2026 — colorimetría de marca Urbanova Medellín
   Carbón (logo) · verde colibrí (CMS → color primario) · verde bosque
   (franjas de los flyers) · dorado de los descuentos (CMS → color de
   acento) · fucsia del "tiquete fucsia". Contenido sobre blanco para
   que los productos respiren; la marca vive en header, menú, franjas,
   botones, descuentos y footer.
   ══════════════════════════════════════════════════════════════ */
:root {
  --urb-ink        : #161616;
  --urb-ink-soft   : #3A3A3A;
  --urb-carbon-2   : #222222;
  --urb-muted      : #6B6B6B;
  --urb-line       : #E7E7E3;
  --urb-surface    : #F5F7F3;
  --urb-forest     : #0F3D22;
  --urb-forest-2   : #17562F;
  --urb-gold       : var(--urb-accent, #FFC72C);
  --urb-fuchsia    : #E6007E;
  --urb-sale       : #E6007E;
  --radius-card    : 14px;
  --font-display   : 'Poppins', 'Inter', sans-serif;
}

body { background: #fff; color: var(--urb-ink); }
.urb-surface { background: var(--urb-surface); }
a { color: inherit; }

/* ── Barra superior: verde bosque ─────────────── */
.urb-topbar { background: var(--urb-forest); color: rgba(255,255,255,.9); font-size: .78rem; border: 0; }
.urb-topbar a { color: rgba(255,255,255,.8); text-decoration: none; }
.urb-topbar a:hover { color: var(--urb-gold) !important; }
.urb-topbar i { color: var(--urb-gold); }

/* ── Header carbón ───────────────────────────── */
.urb-header { position: sticky; top: 0; z-index: 1030; background: var(--urb-ink); }
.navbar-urbanova {
  background: var(--urb-ink) !important;
  box-shadow: none; border-bottom: 0; padding: 0; position: static;
}
.urb-header__row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
.navbar-logo-img { height: 56px; width: 56px; border-radius: 50%; filter: drop-shadow(0 0 8px rgba(57,184,32,.35)); }
.navbar-logo-img:hover { filter: drop-shadow(0 0 12px rgba(57,184,32,.55)); }
.navbar-brand-urbanova { color: #fff !important; font-family: var(--font-display); }
.urb-header__search { flex: 1; display: flex; max-width: 640px; margin: 0 auto; }
.search-form .form-control {
  background: #fff; border: 2px solid transparent; color: var(--urb-ink);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill); height: 44px; padding-left: 1.1rem;
}
.search-form .form-control::placeholder { color: #8A8A8A; }
.search-form .form-control:focus { background: #fff; color: var(--urb-ink); border-color: var(--urb-green); box-shadow: none; }
.search-form .btn-search {
  background: var(--urb-green); color: #fff; border: 0; width: 54px;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}
.search-form .btn-search:hover { background: var(--urb-green-dark); }
.urb-header__actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.urb-action, .urb-icon-btn {
  display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: 0;
  color: #fff !important; text-decoration: none; padding: .45rem .6rem; border-radius: 10px;
  font-size: .9rem; font-weight: 500; position: relative;
}
.urb-action i, .urb-icon-btn i { font-size: 1.35rem; }
.urb-action:hover, .urb-icon-btn:hover { background: rgba(255,255,255,.08); color: var(--urb-green) !important; }
.btn-cart { border: 0 !important; }
.btn-cart:hover { background: rgba(255,255,255,.08); border: 0; }
.cart-badge {
  position: absolute; top: 0; left: 1.45rem; right: auto; background: var(--urb-green); color: #fff;
  border: 2px solid var(--urb-ink); min-width: 19px; height: 19px; font-size: .65rem;
}

/* Menú de departamentos: gris carbón con acento verde */
.urb-catnav { background: var(--urb-carbon-2); border-bottom: 3px solid var(--urb-green); }
.urb-catnav__list { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; overflow: hidden; white-space: nowrap; }
.urb-catnav__list a, .urb-catnav__all {
  display: inline-block; padding: .65rem .7rem; color: rgba(255,255,255,.85); text-decoration: none;
  font-size: .88rem; font-weight: 500; border: 0; background: transparent; border-bottom: 2px solid transparent;
}
.urb-catnav__list a:hover { color: #fff; border-bottom-color: var(--urb-green); }
.urb-catnav__all { font-weight: 700; color: #fff; }
.urb-catnav__all i { color: var(--urb-green); }
.urb-catnav__list a.urb-catnav__sale {
  background: var(--urb-gold); color: var(--urb-ink) !important; font-weight: 800 !important;
  border-radius: 999px; padding: .3rem .9rem !important; margin: .3rem 0; border-bottom: 0 !important;
}
.urb-catnav__list a.urb-catnav__sale:hover { filter: brightness(1.05); }

@media (max-width: 991.98px) {
  .urb-header__row { flex-wrap: wrap; gap: .5rem; padding: .5rem 0 .65rem; }
  .navbar-logo-img { height: 44px; width: 44px; }
  .urb-header__search { order: 3; flex-basis: 100%; max-width: none; }
  .search-form .form-control { height: 40px; }
  .urb-header { border-bottom: 3px solid var(--urb-green); }
}
@media (max-width: 768px) {
  .search-form { display: flex !important; }
}

/* ── Botones ───────────────────────────────────── */
.btn-urb-primary { border-radius: 10px; box-shadow: none; font-weight: 700; }
.btn-urb-primary:hover, .btn-urb-primary:focus { transform: none; box-shadow: 0 6px 18px rgba(57,184,32,.3); }
.btn-urb-outline { border: 1.5px solid var(--urb-green); color: var(--urb-green-dark); border-radius: 10px; }
.btn-urb-outline:hover { background: var(--urb-green); color: #fff; transform: none; }
.btn-urb-gold { background: var(--urb-gold); color: var(--urb-ink); font-weight: 800; border: 0; }
.btn-urb-gold:hover { filter: brightness(1.05); color: var(--urb-ink); }

/* ── Portada: carrusel de banners ─────────────── */
.urb-hero-carousel { background: var(--urb-ink); }
.urb-hero-carousel .carousel-indicators [data-bs-target] { width: 9px; height: 9px; border-radius: 50%; border: 0; }
.urb-hero-carousel .carousel-indicators .active { background-color: var(--urb-green); }
.urb-hero-carousel .carousel-control-prev, .urb-hero-carousel .carousel-control-next { width: 6%; }
.hero-slide { position: relative; overflow: hidden; background: var(--urb-surface); }
.hero-slide__img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.hero-slide__caption { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.hero-slide__caption .container-xl { display: flex; }
.hero-slide__caption a { pointer-events: auto; }
.hero-slide__box { max-width: 520px; padding: 1.5rem 0; }
.hero-slide__caption--centro .container-xl { justify-content: center; text-align: center; }
.hero-slide__caption--derecha .container-xl { justify-content: flex-end; text-align: right; }
.hero-slide__title { font-family: var(--font-display); font-size: clamp(1.4rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.1; margin-bottom: .6rem; }
.hero-slide__text { font-size: clamp(.9rem, 1.4vw, 1.15rem); margin-bottom: 1.1rem; }
.hero-slide__caption.is-light { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero-slide__caption.is-dark { color: var(--urb-ink); }
#banner-preview .hero-slide__caption { padding: 0 1.5rem; }
@media (max-width: 767.98px) {
  .hero-slide__img { aspect-ratio: 1 / 1; }
  .hero-slide__box { max-width: 100%; padding: 1rem; }
}

/* Portada sin banners: carbón → verde bosque con la mascota */
.hero-banner {
  background: radial-gradient(ellipse at 80% 50%, rgba(57,184,32,.28) 0%, transparent 55%),
              linear-gradient(120deg, var(--urb-ink) 0%, var(--urb-ink) 35%, var(--urb-forest) 100%);
  color: #fff; padding: 56px 0;
}
.hero-banner::before { display: none; }
.hero-banner__grid { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.hero-banner__box { max-width: 640px; }
.hero-banner .hero-tag {
  background: var(--urb-gold); color: var(--urb-ink); border: 0;
  font-size: .72rem; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 1.1rem;
}
.hero-banner h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.5px; }
.hero-banner h1 .text-urb-green { color: var(--urb-green) !important; }
.hero-banner .hero-price { color: rgba(255,255,255,.75); font-size: 1.1rem; }
.hero-mascota { width: min(320px, 32vw); height: auto; max-height: 400px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); animation: float 6s ease-in-out infinite; }
@media (max-width: 768px) {
  .hero-banner { padding: 36px 0; }
  .hero-banner__grid { flex-direction: column-reverse; text-align: center; gap: .75rem; }
  .hero-banner__grid .d-flex { justify-content: center; }
  .hero-mascota { width: 150px; }
}

/* ── Beneficios: franja verde bosque ─────────────── */
.urb-benefits { background: var(--urb-forest); color: #fff; }
.urb-benefits__row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } /* 1 a 4 beneficios (CMS) */
.urb-benefit { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .95rem .5rem; font-size: .86rem; font-weight: 600; color: #fff; text-align: left; }
.urb-benefit i { font-size: 1.4rem; color: var(--urb-gold); }
.urb-benefit + .urb-benefit { border-left: 1px solid rgba(255,255,255,.12); }
@media (max-width: 767.98px) {
  .urb-benefits__row { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .urb-benefit { justify-content: flex-start; padding: .7rem .5rem; font-size: .8rem; }
  .urb-benefit:nth-child(3) { border-left: 0; }
  .urb-benefit:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
}

/* ── Títulos de sección: con la barrita verde de marca ── */
.urb-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.section-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -.3px; margin: 0; color: var(--urb-ink); }
.section-title::after { content: ''; display: block; width: 44px; height: 4px; background: var(--urb-green); border-radius: 2px; margin-top: .4rem; }
.justify-content-center .section-title::after { margin-left: auto; margin-right: auto; }
.urb-section-sub { color: var(--urb-muted); font-size: .92rem; margin: .35rem 0 0; }
.urb-link-more { color: var(--urb-green-dark); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.urb-link-more:hover { color: var(--urb-green); text-decoration: underline; }

/* ── Cupón: el "tiquete fucsia" ─────────────────── */
.urb-coupon {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: var(--radius-card); padding: 1rem 1.25rem; color: #fff; position: relative;
  background: linear-gradient(100deg, var(--urb-fuchsia) 0%, #C4006B 100%);
  box-shadow: 0 8px 22px rgba(230,0,126,.25);
}
.urb-coupon .text-muted { color: rgba(255,255,255,.85) !important; }
.urb-coupon__icon { font-size: 1.9rem; color: #fff; }
.urb-coupon__code { background: #fff; color: var(--urb-fuchsia); padding: .4rem .9rem; border-radius: 8px; font-weight: 800; font-size: 1rem; border: 2px dashed rgba(230,0,126,.4); }
.urb-coupon .btn-dark { background: var(--urb-ink); border-color: var(--urb-ink); }

/* ── Categorías con imagen ──────────────────────── */
.urb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 1.25rem .75rem; }
.urb-cat { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none; color: var(--urb-ink); text-align: center; }
.urb-cat__img {
  width: 104px; height: 104px; border-radius: 50%; background: var(--urb-green-pale); overflow: hidden;
  display: flex; align-items: center; justify-content: center; border: 3px solid transparent;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.urb-cat__img img { width: 100%; height: 100%; object-fit: cover; }
.urb-cat__img i { font-size: 2.2rem; color: var(--urb-green-dark); }
.urb-cat:hover .urb-cat__img { transform: translateY(-3px); border-color: var(--urb-green); box-shadow: 0 8px 20px rgba(57,184,32,.22); }
.urb-cat__name { font-size: .85rem; font-weight: 600; line-height: 1.25; }
@media (max-width: 767.98px) {
  .urb-cats { display: flex; overflow-x: auto; gap: 1rem; padding-bottom: .5rem; scrollbar-width: none; }
  .urb-cats::-webkit-scrollbar { display: none; }
  .urb-cat { flex: 0 0 84px; }
  .urb-cat__img { width: 76px; height: 76px; }
  .urb-cat__img i { font-size: 1.7rem; }
  .urb-cat__name { font-size: .76rem; }
}

/* Chips de categoría (listados) */
.category-chip { box-shadow: none; border-color: var(--urb-line); }
.category-chip:hover { border-color: var(--urb-green); color: var(--urb-green-dark); background: var(--urb-green-pale); transform: none; box-shadow: none; }

/* ── Tarjeta de producto ────────────────────────── */
.product-card { border: 1px solid var(--urb-line); border-radius: var(--radius-card); box-shadow: none; background: #fff; position: relative; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); border-color: var(--urb-green-light); }
.product-card__img-wrap { background: #fff; border-bottom: 1px solid var(--urb-line); }
.product-card__img { width: 86%; height: 86%; }
.product-card:hover .product-card__img { transform: scale(1.04); }
.product-card__badge {
  background: var(--urb-gold); color: var(--urb-ink); border-radius: 6px; font-size: .74rem; font-weight: 800;
  padding: .22rem .5rem; z-index: 2; text-transform: none;
}
.product-card__badge--muted { background: var(--urb-ink-soft); color: #fff; }
.product-card__body { padding: .85rem .9rem .5rem; }
.product-card__aisle { font-size: .7rem; color: var(--urb-green-dark); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; margin-bottom: .3rem; }
.product-card__name { font-size: .92rem; font-weight: 500; color: var(--urb-ink); }
.product-card__name a { color: var(--urb-ink); text-decoration: none; }
.product-card__price { margin-bottom: .4rem; }
.product-card__price .price-current { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--urb-ink); }
.product-card__price .price-compare { color: #9A9A9A; }
.product-card__footer { padding: 0 .9rem .9rem; }
.stars { color: var(--urb-gold); font-size: .78rem; }

/* ── Banner de promoción: estilo flyer ───────────── */
.urb-promo {
  position: relative; border-radius: 18px; overflow: hidden; color: #fff;
  background: radial-gradient(ellipse at 90% 20%, rgba(255,199,44,.25) 0%, transparent 45%),
              linear-gradient(120deg, var(--urb-forest) 0%, var(--urb-forest-2) 60%, var(--urb-green-dark) 100%);
  background-size: cover; background-position: center; min-height: 240px; display: flex; align-items: center;
  border: 3px solid var(--urb-gold);
}
.urb-promo--image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,61,34,.85) 0%, rgba(15,61,34,.2) 70%); }
.urb-promo__content { position: relative; padding: 2.5rem; max-width: 620px; }
.urb-promo__badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: 1.5px; background: var(--urb-gold); color: var(--urb-ink); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .9rem; }
.urb-promo__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.15; margin-bottom: .6rem; }
.urb-promo__text { color: rgba(255,255,255,.85); margin-bottom: 1.3rem; }
.urb-promo .btn-light { background: var(--urb-gold); border-color: var(--urb-gold); color: var(--urb-ink); font-weight: 800; }
@media (max-width: 767.98px) { .urb-promo__content { padding: 1.75rem 1.25rem; } }

/* ── Reseñas ───────────────────────────────────── */
.urb-review { background: #fff; border: 1px solid var(--urb-line); border-top: 4px solid var(--urb-green); border-radius: var(--radius-card); padding: 1.4rem; display: flex; flex-direction: column; }

/* ── Menú lateral (offcanvas): carbón ───────────── */
.offcanvas-urbanova { background: var(--urb-ink) !important; color: #fff !important; }
.offcanvas-urbanova .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.1); }
.offcanvas-urbanova .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.offcanvas-urbanova .accordion-button { color: #fff !important; }
.offcanvas-urbanova .accordion-button::after { filter: invert(1); }
.offcanvas-urbanova .accordion-button i { color: var(--urb-green) !important; }
.offcanvas-urbanova .accordion-header a { color: #fff !important; }
.offcanvas-urbanova .accordion-header a i { color: var(--urb-green) !important; }
.offcanvas-urbanova .accordion-body a { color: rgba(255,255,255,.7); }
.offcanvas-urbanova .accordion-body a:hover { color: var(--urb-green); }
.offcanvas-urbanova hr { border-color: rgba(255,255,255,.15); }
.offcanvas-urbanova .text-muted { color: rgba(255,255,255,.55) !important; }
.offcanvas-urbanova .form-control { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.offcanvas-urbanova .form-control::placeholder { color: rgba(255,255,255,.5); }
.offcanvas-urbanova .btn-dark { background: var(--urb-green); border-color: var(--urb-green); }
.sidebar-label { font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 1.2px; }
.sidebar-category-link { color: rgba(255,255,255,.85) !important; }
.sidebar-category-link i { color: var(--urb-green); }
.sidebar-category-link:hover, .sidebar-category-link.active { background: rgba(57,184,32,.15); color: #fff !important; border-left-color: var(--urb-green); }

/* ── Footer carbón con acentos verdes ───────────── */
.footer-urbanova { background: var(--urb-ink); color: rgba(255,255,255,.7); margin-top: 0 !important; border-top: 4px solid var(--urb-green); }
.footer-urbanova a { color: rgba(255,255,255,.7); }
.footer-urbanova a:hover { color: var(--urb-green); }
.footer-urbanova ul a { display: inline-block; padding: .1rem 0; text-decoration: none; }
.footer-urbanova ul i { color: var(--urb-green); }
.footer-heading { color: #fff; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 1rem; }
.footer-heading::after { content: ''; display: block; width: 28px; height: 3px; background: var(--urb-green); border-radius: 2px; margin-top: .4rem; }
.footer-pill { display: inline-flex; align-items: center; font-size: .75rem; border: 1px solid rgba(57,184,32,.5); border-radius: 999px; padding: .35rem .8rem; color: #fff; }
.footer-pill i { color: var(--urb-green); }
.footer-urbanova input[type=email] { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); }
.footer-urbanova input[type=email]::placeholder { color: rgba(255,255,255,.5); }
.footer-urbanova .btn-light { background: var(--urb-green); border-color: var(--urb-green); color: #fff; font-weight: 700; }
.footer-contact-link:hover { color: var(--urb-green) !important; }
.urb-trustbar { background: var(--urb-forest); color: #fff; }

/* ── Carrito flotante (solo celular) ────────────── */
.floating-cart-btn { background: var(--urb-green); box-shadow: 0 8px 24px rgba(57,184,32,.4); animation: none; }
.floating-cart-btn:hover { background: var(--urb-green-dark); transform: translateY(-2px); }
.floating-cart-badge { background: var(--urb-ink); }
@media (min-width: 992px) { .floating-cart-wrapper { display: none; } }

/* ── Ficha de producto ──────────────────────────── */
.product-carousel { border: 1px solid var(--urb-line) !important; box-shadow: none !important; }
.product-carousel .carousel-indicators [data-bs-target].active { background-color: var(--urb-green); }
.product-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.product-carousel .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--urb-green); }
.thumb-btn.border-success { border-color: var(--urb-green) !important; border-width: 2px !important; }
.thumb-btn:hover { border-color: var(--urb-green) !important; }
.breadcrumb a { color: var(--urb-muted); }
.breadcrumb a:hover { color: var(--urb-green-dark); }

/* Paginación y formularios con el verde de marca */
.pagination { --bs-pagination-active-bg: var(--urb-green); --bs-pagination-active-border-color: var(--urb-green); --bs-pagination-color: var(--urb-ink); --bs-pagination-hover-color: var(--urb-green-dark); --bs-pagination-focus-box-shadow: none; }
.form-check-input:checked { background-color: var(--urb-green); border-color: var(--urb-green); }
.form-control:focus, .form-select:focus { border-color: var(--urb-green); box-shadow: 0 0 0 .2rem rgba(57,184,32,.15); }

/* ── Tienda física + mapa ───────────────────────── */
.urb-store { display: grid; grid-template-columns: 1.4fr 1fr; background: #fff; border: 1px solid var(--urb-line); border-radius: 18px; overflow: hidden; }
.urb-store__map { min-height: 300px; background: var(--urb-surface); }
.urb-store__map iframe { display: block; min-height: 300px; }
.urb-store__info { padding: 1.75rem; display: flex; flex-direction: column; justify-content: center; }
.urb-store__name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin-bottom: 1rem; }
.urb-store__name i { color: var(--urb-green); }
.urb-store__list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .6rem; font-size: .95rem; }
.urb-store__list li { display: flex; gap: .65rem; align-items: flex-start; }
.urb-store__list i { color: var(--urb-green-dark); margin-top: .2rem; }
.urb-store__list a { color: inherit; text-decoration: none; }
.btn-store-directions { align-self: flex-start; }
@media (max-width: 767.98px) {
  .urb-store { grid-template-columns: 1fr; }
  .urb-store__map, .urb-store__map iframe { min-height: 240px; }
  .urb-store__info { padding: 1.25rem; }
  .btn-store-directions { align-self: stretch; text-align: center; }
}

/* ── Carrusel de portada ──────────────────────────────────────────────────────
   Computador: todas las diapositivas miden lo mismo y esa altura sigue la proporción 3:1 de los banners
   (1920×640), así la imagen se ve ENTERA —sin recortar textos— en cualquier ancho. Tope de 1600 px de ancho
   (533 px de alto): en pantallas más anchas la imagen queda centrada y los lados se rellenan con la misma
   imagen desenfocada. Celular: cada diapositiva mide lo que mide su imagen (sin recorte si no hay imagen
   para celular). */
.urb-hero-carousel { --hero-h: min(33.334vw, 533px); }
.urb-hero-carousel .carousel-item { height: var(--hero-h); }
.urb-hero-carousel .hero-slide { height: 100%; position: relative; overflow: hidden; }
.urb-hero-carousel .hero-slide picture { display: block; height: 100%; position: relative; z-index: 1; }
.urb-hero-carousel .hero-slide__img { display: block; width: min(100%, 1600px); height: 100%; margin: 0 auto; aspect-ratio: auto; object-fit: cover; }
.urb-hero-carousel .hero-slide__caption { z-index: 3; }
.urb-hero-carousel .hero-slide__link::after { z-index: 2; } /* todo el banner lleva al enlace; el texto y el botón quedan encima */
.urb-hero-carousel .carousel-control-prev, .urb-hero-carousel .carousel-control-next, .urb-hero-carousel .carousel-indicators { z-index: 4; }
.hero-slide.has-ambient::before { content: ''; display: none; position: absolute; inset: -24px; background: var(--ambient) center / cover no-repeat; filter: blur(28px) saturate(1.15); }
@media (min-width: 1601px) { .hero-slide.has-ambient::before { display: block; } }
.urb-hero-carousel .hero-banner { height: 100%; display: flex; align-items: center; padding: 0; }
.urb-hero-carousel .hero-banner > .container-xl { width: 100%; }
.urb-hero-carousel .carousel-indicators { margin-bottom: .6rem; }
.hero-slide video.hero-slide__img { display: block; }
/* Diapositiva de la mascota: que quepa en la misma altura (la del banner 3:1) también en tablet */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .urb-hero-carousel .hero-banner h1 { font-size: clamp(1.25rem, 3.4vw, 2.4rem); }
  .urb-hero-carousel .hero-banner .hero-price { font-size: .9rem; margin-bottom: .6rem !important; }
  .urb-hero-carousel .hero-banner .btn { padding: .35rem 1rem !important; font-size: .85rem; }
  .urb-hero-carousel .hero-mascota { width: auto; max-height: calc(var(--hero-h) - 24px); }
}
@media (max-width: 767.98px) {
  .urb-hero-carousel .carousel-item { height: auto; }
  .urb-hero-carousel .hero-slide, .urb-hero-carousel .hero-slide picture { height: auto; }
  /* Con imagen para celular (o relleno automático): formato vertical 900×1060 */
  .urb-hero-carousel .hero-slide.has-mobile .hero-slide__img { width: 100%; height: auto; aspect-ratio: 900 / 1060; }
  /* Sin imagen para celular, "completa": la de computador entera y a todo el ancho (3:1), sin espacio vacío */
  .urb-hero-carousel .hero-slide:not(.has-mobile) .hero-slide__img { width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: contain !important; object-position: center !important; transform: none !important; }
  /* Sin imagen para celular, "más grande": 4:3, llena más pantalla y recorta los lados (--mfx elige qué parte se ve) */
  .urb-hero-carousel .hero-slide.is-mob-grande .hero-slide__img { aspect-ratio: 4 / 3; object-fit: cover !important; object-position: var(--mfx, 50%) 50% !important; }
  /* Texto y botón encima: abajo y compactos para no tapar la imagen */
  .urb-hero-carousel .hero-slide__caption { align-items: flex-end; }
  .urb-hero-carousel .hero-slide__box { padding: .5rem .25rem 1.6rem; }
  .urb-hero-carousel .hero-slide__title { font-size: 1.15rem; margin-bottom: .3rem; }
  .urb-hero-carousel .hero-slide__text { font-size: .8rem; margin-bottom: .45rem; }
  .urb-hero-carousel .hero-slide__box .btn { padding: .3rem .9rem !important; font-size: .8rem; }
  .urb-hero-carousel .hero-slide.is-mob-completa .hero-slide__text { display: none; }
  .urb-hero-carousel .hero-slide.is-mob-completa .hero-slide__box { padding-bottom: .5rem; }
  /* Diapositiva de la mascota: mismo alto que los banners "más grande" (4:3), texto a la izquierda y mascota a la derecha */
  .urb-hero-carousel .hero-banner { height: auto; aspect-ratio: 4 / 3; padding: 0 0 1.4rem; }
  .urb-hero-carousel .hero-banner__grid { flex-direction: row; text-align: left; gap: .5rem; }
  .urb-hero-carousel .hero-banner__grid .d-flex { justify-content: flex-start; gap: .4rem !important; }
  .urb-hero-carousel .hero-banner h1 { font-size: clamp(1.15rem, 5.6vw, 1.6rem); margin-bottom: .35rem; }
  .urb-hero-carousel .hero-banner .hero-tag { font-size: .7rem; margin-bottom: .4rem; }
  .urb-hero-carousel .hero-banner .hero-price { font-size: .8rem; margin-bottom: .55rem !important; }
  .urb-hero-carousel .hero-banner .btn { padding: .3rem .8rem !important; font-size: .78rem; }
  .urb-hero-carousel .hero-mascota { width: 32vw; max-width: 140px; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-mascota { animation: none; } }

/* ── Editor de encuadre de banners (admin) ───────── */
.fit-option { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem; border: 1px solid #dee2e6; border-radius: 10px; background: #fff; cursor: pointer; }
.fit-option:has(input:checked) { border-color: #212529; box-shadow: 0 0 0 2px rgba(33,37,41,.12); }
.fit-option input { margin-top: .25rem; }
.fit-option small { display: block; color: #6c757d; font-size: .78rem; }
#banner-preview { position: relative; }
#banner-preview .hero-slide__img { height: 100%; width: 100%; aspect-ratio: auto; }
/* Vista previa en celular: texto y botón abajo y compactos, como en la portada */
#banner-preview.is-cel .hero-slide__caption { align-items: flex-end; padding: 0 .6rem; }
#banner-preview.is-cel .hero-slide__box { padding: .4rem 0 .6rem; }
#banner-preview.is-cel .hero-slide__title { font-size: 1rem; margin-bottom: .25rem; }
#banner-preview.is-cel .hero-slide__text { font-size: .72rem; margin-bottom: .35rem; }
#banner-preview.is-cel .btn { padding: .25rem .75rem !important; font-size: .72rem; white-space: nowrap; }

/* ── Filas deslizables (product-rail.ejs y videos de portada) ─────────
   Celular: se desliza con el dedo y asoma la siguiente tarjeta. Computador: flechas (main.js → [data-rail]). */
.urb-rail { position: relative; }
.urb-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 1.5rem) / 4); gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: .25rem; }
.urb-rail__track::-webkit-scrollbar { display: none; }
.urb-rail__track > * { scroll-snap-align: start; min-width: 0; }
.urb-rail__btn { position: absolute; top: 40%; z-index: 3; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--urb-line); background: #fff; color: var(--urb-ink); box-shadow: 0 4px 14px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.urb-rail__btn:hover { border-color: var(--urb-green); color: var(--urb-green); }
.urb-rail__btn--prev { left: -18px; }
.urb-rail__btn--next { right: -18px; }
.urb-rail__btn[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 991.98px) {
  .urb-rail__track { grid-auto-columns: calc((100% - 2 * 1rem) / 2.6); gap: 1rem; }
  .urb-rail__btn { display: none; }
}
@media (max-width: 575.98px) {
  .urb-rail__track { grid-auto-columns: 46%; gap: .75rem; }
}

/* ── Videos cortos de portada (formato vertical 9:16) ── */
.urb-rail__track:has(.urb-video) { grid-auto-columns: calc((100% - 4 * 1.5rem) / 5); }
.urb-video { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-card); overflow: hidden; background: var(--urb-forest); }
.urb-video__media { width: 100%; height: 100%; object-fit: cover; display: block; }
.urb-video__info { position: absolute; inset: auto 0 0 0; padding: 2.5rem .85rem .85rem; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent); }
.urb-video__title { font-weight: 700; font-size: .9rem; margin: 0 0 .2rem; }
.urb-video__link { color: var(--urb-gold); font-size: .8rem; font-weight: 600; text-decoration: none; }
/* Reel de Instagram: el reproductor trae encabezado y pie, así que es más alto que 9:16; el producto va debajo */
.urb-video--ig { aspect-ratio: auto; background: #fff; border: 1px solid var(--urb-line); }
/* Recorte del reproductor de Instagram: se ve solo el video (4:5). El iframe se sube la altura del encabezado
   (--ig-head) y el pie (me gusta, comentarios) queda fuera por overflow. Si Instagram cambia su diseño, ajustar --ig-head. */
.urb-video__crop { --ig-head: 56px; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #000; }
.urb-video__crop .urb-video__frame { position: absolute; top: calc(-1 * var(--ig-head)); left: -1px;
  width: calc(100% + 2px); height: calc(100% + var(--ig-head) + 320px); border: 0; background: #000; }
.urb-video__ig { display: inline-block; margin-top: .3rem; font-size: .75rem; color: var(--urb-muted); text-decoration: none; }
.urb-video__ig:hover { color: var(--urb-ink); }
.urb-video__below { padding: .6rem .8rem .75rem; border-top: 1px solid var(--urb-line); }
.urb-video__below .urb-video__title { color: var(--urb-ink); }
.urb-video__below .urb-video__link { color: var(--urb-green-dark, var(--urb-green)); }
@media (max-width: 991.98px) { .urb-rail__track:has(.urb-video) { grid-auto-columns: 38%; } }
@media (max-width: 575.98px) { .urb-rail__track:has(.urb-video) { grid-auto-columns: 62%; } }

/* ── Nuestras marcas (portada): ventanas que pasan solas, con los colores de la marca ── */
.urb-marcas { background: linear-gradient(120deg, var(--urb-ink, #161616) 0%, var(--urb-forest, #0F3D1E) 100%); overflow: hidden; }
.urb-marcas__wrap { position: relative; }
.urb-marcas__window {
  overflow-x: auto; overflow-y: hidden; padding: .75rem 0 1rem; scrollbar-width: none; cursor: grab;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.urb-marcas__window::-webkit-scrollbar { display: none; }
.urb-marcas__window.is-dragging { cursor: grabbing; }
.urb-marcas__window.is-dragging .urb-marca { pointer-events: none; }
.urb-marcas__track { display: flex; width: max-content; }
.urb-marcas__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.urb-marcas__btn:hover, .urb-marcas__btn:focus-visible { background: var(--urb-green, #39B820); }
.urb-marcas__btn--prev { left: 12px; }
.urb-marcas__btn--next { right: 12px; }
.urb-marcas__set { display: flex; gap: 1rem; padding-right: 1rem; flex: none; }
.urb-marca {
  position: relative; flex: none; width: 220px; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: .9rem 1rem; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--urb-green, #39B820), var(--urb-forest, #0F3D1E));
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.7); transition: transform .25s ease, box-shadow .25s ease;
}
.urb-marca::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.8) 100%); }
.urb-marca__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.urb-marca__name, .urb-marca__count { position: relative; z-index: 1; }
.urb-marca__name { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .5px; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.urb-marca__count { font-size: .8rem; font-weight: 600; color: var(--urb-gold, #FFC72C); }
.urb-marca:hover, .urb-marca:focus-visible { transform: scale(1.06); box-shadow: 0 0 0 3px var(--urb-green, #39B820), 0 16px 30px -12px rgba(0,0,0,.8); color: #fff; z-index: 2; }
.urb-marca:hover .urb-marca__img { transform: scale(1.08); }
@media (max-width: 767.98px) { .urb-marca { width: 160px; } .urb-marca__name { font-size: 1.05rem; } .urb-marcas__btn { display: none; } }

/* ── Filtros del catálogo: secciones plegables (tipo acordeón) ───────────── */
.urb-filter { border-bottom: 1px solid var(--urb-gray-light); padding: .65rem 0; }
.urb-filter:first-of-type { padding-top: 0; }
.urb-filter__title {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: .92rem; color: var(--urb-carbon); padding: .2rem 0;
}
.urb-filter__title::-webkit-details-marker { display: none; }
.urb-filter__title::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .8rem; transition: transform .2s; }
.urb-filter[open] > .urb-filter__title::after { transform: rotate(180deg); }
.urb-filter__body { padding-top: .6rem; }
.urb-filter__opt { margin-bottom: .35rem; }
.urb-filter__opt .form-check-input:checked { background-color: var(--urb-green); border-color: var(--urb-green); }
.urb-filter__more { display: none; }
.urb-filter.is-open .urb-filter__more { display: block; }
.urb-filter__toggle { color: var(--urb-green-dark); font-weight: 600; text-decoration: none; }
.urb-filter__bucket {
  display: block; font-size: .85rem; color: var(--urb-carbon); text-decoration: none;
  padding: .3rem .6rem; border-radius: .5rem; border: 1px solid transparent;
}
.urb-filter__bucket:hover { background: var(--urb-green-pale); color: var(--urb-carbon); }
.urb-filter__bucket.is-active { background: var(--urb-green-pale); border-color: var(--urb-green); font-weight: 600; }
.urb-filter__stars { color: #FFAD32; font-size: .78rem; margin-right: .2rem; }
.urb-filters .form-switch .form-check-input:checked { background-color: var(--urb-green); border-color: var(--urb-green); }

/* Etiquetas de precio del almacén (Admin → Etiquetas): circulito con el color de la etiqueta */
.etq-dot {
  display: inline-block; width: .85em; height: .85em; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .35); vertical-align: -.1em; margin-right: .3em;
}

/* Etiqueta de precio que ve el cliente (junto al precio): mismo color que la etiqueta física del almacén */
.etq-chip {
  display: inline-flex; align-items: center; gap: .1rem;
  font-size: .75rem; font-weight: 600; line-height: 1; color: #333;
  padding: .25rem .55rem; border: 1px solid #dcdcdc; border-radius: 999px; background: #fff;
  margin-top: .35rem; white-space: nowrap; align-self: flex-start; width: max-content; max-width: 100%;
}
.etq-chip .etq-dot { width: .8rem; height: .8rem; }

/* Sello con el logo encima de la foto, arriba a la derecha (solo en la web; la foto queda limpia para Google).
   Sin círculo ni fondo: un PNG sin fondo se ve tal cual; un JPG con fondo blanco se funde con la foto (multiply). */
.urb-sello {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 44px; height: 44px; pointer-events: none;
}
.urb-sello img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
}
.urb-sello--junto-corazon { right: 52px; }
.urb-sello.urb-sello--ficha { top: .75rem; right: .75rem; bottom: auto; left: auto; width: 64px; height: 64px; }
@media (max-width: 576px) {
  .urb-sello { width: 36px; height: 36px; top: 6px; right: 6px; }
  .urb-sello--junto-corazon { right: 46px; }
  .urb-sello.urb-sello--ficha { width: 52px; height: 52px; }
}
/* Otras esquinas (CMS → Identidad «Posición del sello»). Arriba a la izquierda baja un poco en las tarjetas
   para no tapar el aviso de descuento o «Agotado», que va en esa esquina. */
.urb-sello.urb-sello--arriba-izquierda { right: auto; left: 8px; top: 40px; }
.urb-sello.urb-sello--abajo-izquierda { top: auto; bottom: 8px; right: auto; left: 8px; }
.urb-sello.urb-sello--abajo-derecha { top: auto; bottom: 8px; right: 8px; }
.urb-sello.urb-sello--ficha.urb-sello--arriba-izquierda { top: .75rem; right: auto; left: .75rem; }
.urb-sello.urb-sello--ficha.urb-sello--abajo-izquierda { top: auto; bottom: 2.25rem; right: auto; left: .75rem; }
.urb-sello.urb-sello--ficha.urb-sello--abajo-derecha { top: auto; bottom: 2.25rem; right: 4.5rem; left: auto; }