* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* El carrito, el modal de transportadora, la barra de "agregar al carrito" y
   varios otros elementos se muestran/ocultan con el atributo HTML "hidden"
   (elemento.hidden = true/false en el JS). Pero varias clases de acá abajo
   les fijan un "display" propio (flex, inline-flex, etc.), y una regla de
   nuestra propia hoja de estilos siempre le gana a la regla "[hidden] {
   display: none }" del navegador, sin importar cuál sea más específica. Sin
   esta línea, esos elementos quedaban visibles en pantalla aunque JavaScript
   los hubiera marcado como "hidden" — esto era la causa real de que el modal
   apareciera "trabado" sobre la página. Con "!important" nos aseguramos de
   que esto no vuelva a pasar, sea cual sea el elemento. */
[hidden] { display: none !important; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg, #fbf4ec);
  color: #33261e;
  padding-bottom: 90px;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.main { max-width: 720px; margin: 0 auto; padding: 16px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid #f0e2d3;
}
.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  max-width: 720px;
  margin: 0 auto;
  gap: 8px;
}
.site-logo {
  display: flex;
  align-items: center;
  padding: 4px;
  margin: -4px;
  border-radius: 12px;
}
.site-logo:active { background: #f6ece0; }
/* El logo ahora tiene fondo transparente (antes tenía fondo color crema), así
   que lo agrandamos: se ve bien apoyado directamente sobre el header blanco. */
.site-logo img { height: 88px; width: auto; }
.site-header__icons { display: flex; align-items: center; gap: 4px; flex: none; }
.icon-btn {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  position: relative;
}
.icon-btn--placeholder { visibility: hidden; }
.icon-btn__img { width: 22px; height: 22px; object-fit: contain; display: block; }
.cart-icon { background: transparent; }
.cart-icon .icon-btn__img { width: 28px; height: 28px; }
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.category-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 16px 12px;
  max-width: 720px;
  margin: 0 auto;
  scrollbar-width: none;
}
.category-nav::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: #f6ece0;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary);
  white-space: nowrap;
}
.chip--active { background: var(--primary); color: #fff; }

/* Sections & grid */
.page-title { color: var(--secondary); font-size: 22px; margin: 4px 0 16px; }
.category-section { margin-bottom: 28px; }
.category-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.category-section__head h2 { font-size: 18px; color: var(--secondary); margin: 0; }
.see-all { font-size: 13px; color: var(--primary); font-weight: 600; }
.see-all--block { display: block; text-align: center; margin-top: 8px; }
.eyebrow { color: var(--primary); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 4px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.product-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(107,69,48,0.08);
  display: flex;
  flex-direction: column;
}
.product-card__image { position: relative; aspect-ratio: 1/1; background: #f6ece0; }
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
}
.product-card__body { padding: 10px 12px 14px; }
.product-card__stock { font-size: 11px; color: #8a7669; }
.product-card__name {
  font-size: 13px; font-weight: 600; margin: 4px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 34px;
}
.price { font-weight: 700; color: var(--secondary); }
.price--old { text-decoration: line-through; color: #a99; font-weight: 400; font-size: 12px; margin-right: 6px; }
.price--promo { color: var(--primary); }
.price--lg { font-size: 24px; }

.empty-state { text-align: center; padding: 60px 20px; color: #8a7669; }
.empty-state__muted { font-size: 13px; }

/* Product detail */
.product-gallery { display: flex; gap: 8px; overflow-x: auto; border-radius: 14px; margin-bottom: 14px; }
.product-gallery__img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; flex: none; scroll-snap-align: start; }
.product-gallery { scroll-snap-type: x mandatory; }
.product-title { font-size: 20px; color: var(--secondary); margin: 0 0 8px; }
.product-price { margin: 0 0 14px; }
.add-to-cart-widget { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.product-detail__stock { font-size: 13px; color: #8a7669; }
.qty-stepper { display: flex; align-items: center; gap: 14px; background: #f6ece0; border-radius: 999px; padding: 6px 16px; }
.qty-btn { background: none; border: none; font-size: 16px; color: var(--secondary); }
.qty-value { font-weight: 700; min-width: 16px; text-align: center; }
.qty-btn:disabled { opacity: .35; }
.add-to-cart-widget__in-cart { font-size: 12px; color: #8a7669; margin: -14px 0 22px; }
.product-description h2, .product-video h2 { font-size: 15px; color: var(--secondary); margin-bottom: 6px; }
.product-description p { line-height: 1.6; color: #4a382d; font-size: 14px; }
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 12px; overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-native { width: 100%; border-radius: 12px; }
.whatsapp-question { font-size: 13px; margin-top: 20px; color: #4a382d; }
.whatsapp-question a { color: #25D366; font-weight: 700; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px; border: none;
  font-weight: 700; font-size: 15px;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--whatsapp { background: #25D366; color: #fff; }
.link-btn { background: none; border: none; color: var(--primary); font-weight: 600; font-size: 13px; text-decoration: underline; }

/* Cart bar */
.cart-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #f0e2d3;
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;
  z-index: 30;
}
.cart-bar__info { display: flex; flex-direction: column; }
.cart-bar__total { font-weight: 700; color: var(--secondary); font-size: 16px; }
.cart-bar__count { font-size: 12px; color: #8a7669; }

/* Cart page */
.cart-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.cart-item { display: flex; gap: 10px; background: #fff; border-radius: 12px; padding: 10px; align-items: center; }
.cart-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: #f6ece0; }
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__name { font-size: 13px; font-weight: 600; margin: 0 0 2px; }
.cart-item__stock { font-size: 11px; color: #8a7669; }
.cart-actions { display: flex; justify-content: space-between; margin: 14px 0; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--secondary); margin: 14px 0 6px; }
textarea, input[type=text], input[type=tel], input[type=number] {
  width: 100%; border: 1px solid #e7d7c4; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit;
  background: #fff;
}
.char-count { text-align: right; font-size: 11px; color: #a99; margin: 2px 0 0; }
.section-title { font-size: 16px; color: var(--secondary); margin: 20px 0 10px; }
.delivery-options, .payment-options { display: flex; flex-direction: column; gap: 10px; }
.delivery-option, .payment-option {
  display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #f0e2d3; border-radius: 12px; padding: 12px;
  cursor: pointer;
}
.delivery-option:has(input:checked), .payment-option:has(input:checked) { border-color: var(--primary); background: #fff8f2; }
.delivery-option input, .payment-option input { margin-top: 4px; accent-color: var(--primary); }
.delivery-option__icon, .payment-option__icon { font-size: 18px; }
.delivery-option__note { font-size: 12px; color: #8a7669; margin: 2px 0 0; }
.chevron { margin-left: auto; color: #c9b8a6; }
.courier-chosen { margin-top: 8px; background: #f6ece0; border-radius: 8px; padding: 8px; font-size: 12px; cursor: pointer; }
.courier-chosen__change { display: block; margin-top: 2px; color: var(--primary); font-weight: 700; }
.payment-option__extra { margin-top: 10px; width: 100%; }
.transfer-info { white-space: pre-line; font-size: 12px; background: #f6ece0; border-radius: 8px; padding: 8px; }

.cart-summary {
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #f0e2d3;
  padding: 14px 16px; z-index: 30;
}
.cart-summary--static { position: static; border: 1px solid #f0e2d3; border-radius: 12px; margin: 20px 0; }
.cart-summary__row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: #4a382d; }
.cart-summary__row--total { font-size: 16px; font-weight: 700; color: var(--secondary); padding-top: 8px; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; z-index: 50; }
.modal__panel { background: #fff; border-radius: 16px 16px 0 0; padding: 20px; width: 100%; max-width: 720px; margin: 0 auto; }
.modal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.courier-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.courier-option { border: 1px solid #f0e2d3; border-radius: 10px; padding: 12px; display: flex; align-items: flex-start; gap: 10px; }
.courier-option strong { display: block; font-size: 14px; }
.courier-option p { font-size: 12px; color: #8a7669; margin: 2px 0 0; }

/* Checkout */
.phone-field { display: flex; gap: 8px; }
.phone-prefix { background: #f6ece0; border-radius: 10px; padding: 10px 12px; font-weight: 600; color: var(--secondary); }
.form-error { color: #c0392b; font-size: 13px; margin-top: 10px; }
.field-row { display: flex; gap: 12px; }
.field-row > div { flex: 1; min-width: 0; }

/* Talles / colores del producto */
.variant-picker { margin-bottom: 18px; }
.variant-picker__empty { font-size: 13px; color: #a13a3a; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-option {
  background: #fff; border: 1px solid #e7d7c4; border-radius: 999px; padding: 8px 16px;
  font-size: 13px; font-weight: 600; color: #4a382d; cursor: pointer;
}
.variant-option.is-selected { border-color: var(--primary); background: #fff8f2; color: var(--primary); }
.variant-option__stock { font-weight: 400; color: #8a7669; }
.variant-option.is-selected .variant-option__stock { color: var(--primary); }
.cart-item__variant { font-weight: 400; color: #8a7669; }

/* Footer */
.site-footer { text-align: center; font-size: 12px; color: #a99; padding: 30px 16px 10px; }
.site-footer__muted { margin-top: 4px; }

.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #f0e2d3;
  padding: 14px 16px; z-index: 60; font-size: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.cookie-banner button { background: var(--primary); color: #fff; border: none; padding: 8px 14px; border-radius: 8px; font-size: 12px; white-space: nowrap; }

@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Buscador (barra que se muestra/oculta con el ícono de lupa del header) */
.site-search {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  max-width: 720px;
  margin: 0 auto;
}
.site-search input {
  flex: 1;
  border: 1px solid #e7d7c4;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
}
.site-search button[type="submit"] { background: var(--primary); color: #fff; flex: none; }

/* Menú lateral (hambúrguer) */
.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 70;
}
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82%;
  max-width: 320px;
  background: #fff;
  z-index: 71;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
  animation: nav-drawer-in 0.18s ease-out;
}
@keyframes nav-drawer-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f0e2d3;
  flex: none;
}
.nav-drawer__title { font-weight: 700; color: var(--secondary); font-size: 16px; }
.nav-drawer__links { flex: 1; overflow-y: auto; padding: 8px 0; }
.nav-drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #4a382d;
}
.nav-drawer__link:active { background: #f6ece0; }
.nav-drawer__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
  background: #f6ece0;
}
.nav-drawer__dot--img { background: none; object-fit: contain; }
.nav-drawer__foot { padding: 14px 16px; border-top: 1px solid #f0e2d3; flex: none; }
.nav-drawer__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: #25d366;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
}
.nav-drawer__whatsapp-icon { width: 22px; height: 22px; object-fit: contain; }

/* Portada (hero) de la página de inicio */
.hero {
  border-radius: 18px;
  margin: 4px 0 20px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.hero--placeholder {
  background: linear-gradient(135deg, #fbe3d4, #f6ece0);
  padding: 40px 20px;
}
.hero__paws { font-size: 20px; opacity: 0.5; margin-bottom: 8px; letter-spacing: 10px; }
.hero__title { font-size: 24px; color: var(--secondary); margin: 0 0 6px; font-family: Georgia, serif; }
.hero__heart { color: var(--primary); }
.hero__subtitle { font-size: 13px; color: #8a7669; margin: 0; }
.hero--photo {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #f6ece0;
  display: flex;
  align-items: flex-end;
}
.hero__overlay {
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.hero--photo .hero__title, .hero--photo .hero__subtitle { color: #fff; }

/* Botones de categoría "personalizados" (fila de íconos circulares) */
.category-icons {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 22px;
  scrollbar-width: none;
}
.category-icons::-webkit-scrollbar { display: none; }
.category-icons__item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 66px;
  text-align: center;
}
.category-icons__circle {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}
.category-icons__label { font-size: 11px; font-weight: 600; color: var(--secondary); line-height: 1.2; }

/* Alternador de vista grilla / lista */
.view-toggle { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 12px; }
.view-toggle__btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #e7d7c4;
  background: #fff;
  font-size: 15px;
  color: #8a7669;
}
.view-toggle__btn.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

.product-grid--list { display: flex; flex-direction: column; gap: 10px; }
.product-grid--list .product-card { flex-direction: row; }
.product-grid--list .product-card__image { width: 96px; aspect-ratio: 1/1; flex: none; }
.product-grid--list .product-card__body { flex: 1; padding: 10px 12px; }
.product-grid--list .product-card__name { min-height: 0; -webkit-line-clamp: 2; }

/* Contacto / redes sociales en el pie de página */
.site-footer__social { display: flex; justify-content: center; gap: 12px; margin-bottom: 10px; }
.social-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-btn img { width: 100%; height: 100%; object-fit: contain; }
.site-footer__handles { font-size: 12px; color: #8a7669; margin: 0 0 12px; }

/* Menú fijo de escritorio/laptop (barra lateral). En celular queda oculto del
   todo (display:none acá abajo) y se usa el ☰ + la gaveta lateral en su
   lugar; a partir del ancho definido en el media query de más abajo pasa a
   mostrarse siempre, sin necesidad de tocar ningún botón. */
.side-sidebar { display: none; }
.side-sidebar__logo { display: block; text-align: center; margin-bottom: 4px; }
.side-sidebar__logo img { width: 170px; height: auto; margin: 0 auto; }
.side-card { background: #fff; border: 1px solid #f0e2d3; border-radius: 14px; padding: 16px; }
.side-card__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 12px;
}
.side-card__row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #4a382d;
  padding: 6px 0;
}
.side-card__icon { width: 22px; height: 22px; object-fit: contain; flex: none; }
.side-card__icon--emoji { display: flex; align-items: center; justify-content: center; font-size: 16px; }
.side-card__delivery { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #4a382d; }
.side-card__delivery-note { margin: 0; font-size: 12px; color: #8a7669; line-height: 1.5; }
.side-card--categories { padding: 12px 8px; }
.side-card--categories .side-card__title { padding: 0 8px; }
.side-card__cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #4a382d;
}
.side-card__cat.is-active { background: #f6ece0; color: var(--primary); }
.side-card__cat-icon { width: 26px; height: 26px; object-fit: contain; flex: none; }
.side-card__cat-icon--home {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: #f6ece0;
  border-radius: 50%;
}

@media (min-width: 1000px) {
  body { padding-left: 280px; }
  .side-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    overflow-y: auto;
    padding: 22px 18px;
    background: #fff;
    border-right: 1px solid #f0e2d3;
    z-index: 40;
  }
  /* El menú fijo ya muestra las categorías siempre — no hace falta el botón
     de hambúrguer en este ancho de pantalla. */
  #menu-toggle { display: none; }
  /* Estos elementos usan position:fixed (no siguen el padding-left del body
     como el resto del contenido), así que hay que correrlos a mano para que
     no queden tapados detrás del menú fijo. */
  .cookie-banner, .cart-bar, .cart-summary, .modal { left: 280px; }
}