/* =========================
   Tiendy Store — Mobile polish
   (pegar al final del custom_store.css)
   ========================= */

:root{
  --ts-primary: var(--color-primario, #24C6DC);
  --ts-secondary: var(--color-secundario, #FF9A00);
}

a { -webkit-tap-highlight-color: transparent; }

.navbar .navbar-brand { max-width: 65vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar .btn { white-space: nowrap; }
.navbar .btn-cart{ padding-left:.65rem; padding-right:.65rem; }

/* Cards de productos (home + listados) */
.card-img-top{
  width: 100%;
  height: auto;
  object-fit: cover;
}
@supports (aspect-ratio: 1 / 1){
  .card-img-top{ aspect-ratio: 1 / 1; }
}

/* Tipografía y “aire” en mobile */
@media (max-width: 575.98px){
  .container{ padding-left: 12px; padding-right: 12px; }
  h1,h2,h3{ letter-spacing: .2px; }
  h3{ font-size: 1.15rem; }

  .row.g-3{ --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  .row.g-2{ --bs-gutter-x: .6rem;  --bs-gutter-y: .6rem; }

  .card .card-body{ padding: .6rem !important; }
  .card .btn{ padding-top: .55rem; padding-bottom: .55rem; }
  .btn.w-100{ border-radius: 12px; }

  /* Carrusel más “pro” en celu */
  #homeCarousel .carousel-inner{ border-radius: 18px !important; }
  #homeCarousel .carousel-item img{ aspect-ratio: 16 / 7 !important; }
}

/* Botones con color de marca (sin romper Bootstrap) */
.btn-primary{
  background: var(--ts-primary);
  border-color: var(--ts-primary);
}
.btn-primary:hover, .btn-primary:focus{
  filter: brightness(.95);
  background: var(--ts-primary);
  border-color: var(--ts-primary);
}
.btn-outline-primary{
  color: var(--ts-primary);
  border-color: rgba(0,0,0,.12);
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
  background: rgba(36,198,220,.12);
  border-color: rgba(36,198,220,.35);
  color: #0b5e6a;
}

/* Imágenes nunca “reventadas” */
img{ max-width: 100%; height: auto; }