/* ===== Tía Vicenta v278 · mejora integral estable ===== */
:root {
  --tv-v278-radius: 22px;
  --tv-v278-card: rgba(18, 28, 49, .92);
  --tv-v278-line: rgba(255, 170, 56, .28);
  --tv-v278-soft-line: rgba(255,255,255,.10);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}

body {
  overscroll-behavior-y: contain;
}

body:not(.app-ready) .app-shell,
body:not(.app-ready) main,
body:not(.app-ready) .topbar,
body:not(.app-ready) .cart-float {
  visibility: visible !important;
  opacity: 1 !important;
}

.topbar {
  width: min(1264px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
}

.topbar-inner {
  min-height: 96px;
  gap: 16px !important;
}

.brand {
  min-width: 252px;
  align-items: center !important;
  gap: 12px !important;
}

.brand-logo {
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 62px !important;
  min-width: 62px !important;
}

.brand-logo img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.36));
}

.brand-logo #brandStatus,
.store-status.brand-status-attached-v278 {
  position: static !important;
  transform: none !important;
  margin: -2px 0 0 !important;
  padding: 3px 7px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 72px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  font-size: 9.5px !important;
  letter-spacing: .01em !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.18) !important;
}

.brand-logo #brandStatus::before,
.store-status.brand-status-attached-v278::before {
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
}

.brand-status-row {
  display: none !important;
}

.brand-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.brand-title {
  line-height: .94 !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
}

.brand-tag {
  margin-top: 5px !important;
  opacity: .72 !important;
  max-width: 220px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.search {
  min-width: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

.search:focus-within {
  border-color: rgba(255, 170, 56, .75) !important;
  box-shadow: 0 0 0 4px rgba(255, 154, 34, .12), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.top-actions {
  gap: 10px !important;
  align-items: stretch !important;
}

.top-actions .pill-btn {
  min-height: 52px !important;
  border-radius: 20px !important;
}

#themeBtn {
  min-width: 134px !important;
}

.hero-banner-card,
.hero-banner-art,
.hero-banner-picture,
.hero-banner-image,
.hero-banner-content,
.hero-banner-copy {
  border-left: 0 !important;
  border-right: 0 !important;
  outline: 0 !important;
}

.hero-banner-card::before,
.hero-banner-card::after,
.hero-banner-art::before,
.hero-banner-art::after,
.hero-banner-picture::before,
.hero-banner-picture::after,
.hero-banner-content::before,
.hero-banner-content::after,
.hero-banner-copy::before,
.hero-banner-copy::after {
  content: none !important;
  display: none !important;
}

.hero-banner-card {
  overflow: hidden !important;
  border-radius: 22px !important;
  border-color: rgba(255,170,56,.38) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.30) !important;
}

.hero-location-row {
  gap: 9px !important;
}

.hero-hours-btn,
.hero-location-btn {
  animation: tv-v278-soft-pulse 2.6s ease-in-out infinite;
}

.hero-location-btn {
  animation-delay: .8s;
}

@keyframes tv-v278-soft-pulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(255,153,32,.18); transform: translateY(0); }
  50% { box-shadow: 0 16px 36px rgba(255,153,32,.30); transform: translateY(-1px); }
}

.home-quick-nav {
  width: min(1264px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.home-quick-nav > button {
  min-width: 0 !important;
  min-height: 76px !important;
  border-radius: 20px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.home-quick-nav > button:nth-child(n+5) {
  display: none !important;
}

.home-quick-nav > button b,
.home-quick-nav > button small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.promo-premium,
.promo-banners,
#promoBanners {
  width: min(1264px, calc(100% - 32px)) !important;
  margin-inline: auto !important;
}

body.search-is-active-v278 .hero,
body.search-is-active-v278 .quick-nav-wrap,
body.search-is-active-v278 #promoBanners,
body.search-is-active-v278 .promo-premium {
  display: none !important;
}

body.search-is-active-v278 #menu {
  margin-top: 18px !important;
}

body.search-is-active-v278 #menuTitle::after {
  content: " · resultados de búsqueda";
  color: #ff9f2d;
  font-size: .68em;
}

.drawer {
  box-shadow: -30px 0 80px rgba(0,0,0,.42) !important;
}

.drawer-head {
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.cart-item {
  border-radius: 20px !important;
  border-color: rgba(255,255,255,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
}

.cart-item-main {
  align-items: center !important;
}

.cart-thumb-wrap,
.cart-thumb {
  border-radius: 16px !important;
}

.cart-remove-icon {
  min-width: 40px !important;
  min-height: 40px !important;
}

.qty-control {
  min-height: 48px !important;
  overflow: hidden !important;
}

.qty-control button,
.tv-qty-tap-target {
  min-width: 48px !important;
  min-height: 48px !important;
  font-size: 20px !important;
}

.drawer-foot {
  border-top: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(180deg, rgba(13,20,35,.92), rgba(12,18,31,.98)) !important;
  backdrop-filter: blur(18px) !important;
}

.shipping-box.hidden,
.shipping-box[hidden],
.total-row.shipping-total-row-v278[hidden],
.total-row.shipping-total-row-v274[hidden] {
  display: none !important;
}

#checkoutBtn.hidden,
#checkoutBtn[disabled],
#checkoutBtn[aria-disabled="true"] {
  display: none !important;
}

#checkoutBtn:not(.hidden):not([disabled]) {
  display: flex !important;
}

.checkout-panel.show {
  animation: tv-v278-panel-in .18s ease-out both;
}

@keyframes tv-v278-panel-in {
  from { opacity: .65; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.input.input-missing-v278,
.textarea.input-missing-v278 {
  border-color: rgba(255, 79, 79, .95) !important;
  box-shadow: 0 0 0 4px rgba(255, 79, 79, .14) !important;
}

body.checkout-final-v278 .checkout-panel.show {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.checkout-final-v278 #checkoutBtn {
  display: flex !important;
}

body.checkout-final-v278 #continueBtn {
  display: none !important;
}

@media (min-width: 901px) {
  .topbar-inner {
    display: grid !important;
    grid-template-columns: max-content minmax(320px, 1fr) max-content !important;
    align-items: center !important;
  }

  .topbar-inner > .search {
    width: 100% !important;
    max-width: none !important;
  }

  .hero-banner-card {
    width: min(900px, calc(100% - 40px)) !important;
  }

  .hero-banner-copy h1 {
    font-size: clamp(56px, 5.4vw, 82px) !important;
  }

  .drawer {
    width: min(420px, 100vw) !important;
  }
}

@media (max-width: 900px) {
  .topbar {
    width: calc(100% - 20px) !important;
    margin-top: 10px !important;
  }

  .topbar-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px !important;
    border-radius: 22px !important;
  }

  .brand {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  .brand-logo {
    width: 54px !important;
    min-width: 54px !important;
  }

  .brand-logo img {
    width: 42px !important;
    height: 42px !important;
  }

  .brand-logo #brandStatus,
  .store-status.brand-status-attached-v278 {
    max-width: 64px !important;
    font-size: 8.5px !important;
    padding: 3px 6px !important;
  }

  .brand-title {
    font-size: clamp(26px, 8vw, 38px) !important;
  }

  .brand-tag {
    display: none !important;
  }

  .search {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 16px !important;
  }

  .top-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .top-actions.has-install {
    grid-template-columns: 1fr 1fr !important;
  }

  .top-actions .pill-btn {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 42px !important;
    border-radius: 16px !important;
    padding: 8px 10px !important;
  }

  #installBtn {
    grid-column: 1 / -1 !important;
    min-height: 46px !important;
  }

  #themeBtn {
    min-width: 0 !important;
  }

  .hero {
    margin-top: 10px !important;
  }

  .hero-banner-card {
    width: calc(100% - 20px) !important;
    border-radius: 18px !important;
  }

  .hero-banner-art {
    min-height: clamp(206px, 62vw, 292px) !important;
  }

  .hero-banner-image {
    object-position: 62% center !important;
  }

  .hero-banner-content {
    width: 58% !important;
    padding: 14px 0 14px 14px !important;
  }

  .hero-banner-logo {
    display: none !important;
  }

  .hero-banner-copy h1 {
    font-size: clamp(31px, 10vw, 48px) !important;
    line-height: .88 !important;
    letter-spacing: -.05em !important;
  }

  .hero-banner-copy p {
    margin-top: 8px !important;
    font-size: clamp(11px, 3.5vw, 15px) !important;
    line-height: 1.05 !important;
  }

  .hero-location-row {
    margin-top: 10px !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
  }

  .hero-hours-btn,
  .hero-location-btn {
    min-height: 32px !important;
    padding: 7px 9px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    max-width: 50% !important;
  }

  .hero-location-btn span {
    max-width: 78px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hero-location-btn b {
    display: none !important;
  }

  .quick-nav-wrap {
    margin-top: 12px !important;
  }

  .quick-nav-head {
    display: none !important;
  }

  .home-quick-nav {
    width: calc(100% - 20px) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .home-quick-nav > button {
    min-height: 64px !important;
    border-radius: 14px !important;
    padding: 7px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 3px !important;
  }

  .home-quick-nav > button span {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 15px !important;
  }

  .home-quick-nav > button b {
    width: 100% !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  .home-quick-nav > button small {
    display: none !important;
  }

  .promo-premium,
  .promo-banners,
  #promoBanners {
    width: calc(100% - 20px) !important;
  }

  .drawer {
    width: min(100vw, 430px) !important;
    border-radius: 22px 0 0 22px !important;
  }

  .drawer-body {
    padding-inline: 12px !important;
  }

  .drawer-foot {
    padding: 12px !important;
  }

  .cart-item {
    padding: 10px !important;
  }

  .cart-thumb-wrap {
    width: 58px !important;
    height: 58px !important;
  }

  .cart-name {
    font-size: 14px !important;
    line-height: 1.05 !important;
  }

  .cart-details {
    font-size: 11px !important;
  }

  .checkout-grid {
    grid-template-columns: 1fr !important;
  }

  .field,
  .field.span {
    grid-column: auto !important;
  }
}

@media (max-width: 380px) {
  .topbar {
    width: calc(100% - 12px) !important;
  }

  .topbar-inner {
    padding: 10px !important;
  }

  .brand-title {
    font-size: 25px !important;
  }

  .home-quick-nav {
    width: calc(100% - 12px) !important;
    gap: 5px !important;
  }

  .home-quick-nav > button {
    min-height: 58px !important;
    padding: 6px 3px !important;
  }

  .home-quick-nav > button span {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    font-size: 14px !important;
  }

  .home-quick-nav > button b {
    font-size: 9px !important;
  }

  .hero-banner-card {
    width: calc(100% - 12px) !important;
  }

  .hero-banner-copy h1 {
    font-size: clamp(28px, 9.4vw, 40px) !important;
  }

  .hero-banner-copy p {
    font-size: 10px !important;
  }

  .hero-location-row {
    gap: 5px !important;
  }

  .hero-hours-btn,
  .hero-location-btn {
    padding-inline: 7px !important;
    font-size: 8.5px !important;
  }
}


/* ===== Tía Vicenta v279 · corrección de errores críticos: scroll + estado ===== */

/* 1) Scroll seguro: evita que la página quede trabada después de cerrar carrito/modal. */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: auto !important;
}

html:not(.app-loading) body.tv-scroll-safe-v279:not(.drawer-open):not(.modal-open) {
  overflow-y: auto !important;
  position: static !important;
  inset: auto !important;
  height: auto !important;
  min-height: 100vh !important;
  touch-action: pan-y !important;
}

html:not(.app-loading) body.tv-scroll-safe-v279:not(.drawer-open):not(.modal-open) .app {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  touch-action: pan-y !important;
}

body.tv-scroll-safe-v279 main,
body.tv-scroll-safe-v279 #menu,
body.tv-scroll-safe-v279 #categoryList,
body.tv-scroll-safe-v279 .category-body {
  touch-action: pan-y !important;
}

body.tv-scroll-safe-v279.drawer-open {
  overflow: hidden !important;
}

body.tv-scroll-safe-v279 #cartDrawer.drawer.show {
  overflow: hidden !important;
  touch-action: pan-y !important;
}

body.tv-scroll-safe-v279 #cartDrawer.drawer.show .drawer-body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scrollbar-gutter: stable !important;
}

body.tv-scroll-safe-v279 #cartDrawer.drawer.show .addon-list,
body.tv-scroll-safe-v279 #cartDrawer.drawer.show #cartItems,
body.tv-scroll-safe-v279 #cartDrawer.drawer.show .cart-details {
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* 2) El estado Cerrado/Abierto NUNCA debe quedar debajo del logo.
   Queda al lado del logo, debajo del título, pegado visualmente a la marca. */
html body header.topbar .brand#brandTap {
  display: grid !important;
  grid-template-columns: 64px minmax(0, max-content) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
  width: max-content !important;
  max-width: 360px !important;
  min-width: 0 !important;
}

html body header.topbar .brand#brandTap .brand-logo {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  justify-self: start !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  margin: 0 !important;
}

html body header.topbar .brand#brandTap .brand-copy {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  display: grid !important;
  grid-template-columns: max-content !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-content: start !important;
  justify-items: start !important;
  gap: 3px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body header.topbar .brand#brandTap .brand-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  justify-self: start !important;
  width: max-content !important;
  max-width: 270px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(28px, 2.65vw, 38px) !important;
  line-height: .9 !important;
  white-space: nowrap !important;
  text-align: left !important;
  transform: none !important;
}

html body header.topbar .brand#brandTap .brand-tag {
  display: none !important;
}

html body header.topbar .brand#brandTap .brand-status-row {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  align-self: start !important;
  width: max-content !important;
  max-width: 160px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

html body header.topbar .brand#brandTap #brandStatus.store-status,
html body header.topbar .brand#brandTap #brandStatus.store-status.brand-status-attached-v279 {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: 160px !important;
  min-width: 0 !important;
  min-height: 20px !important;
  height: 20px !important;
  padding: 0 7px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transform: none !important;
  margin: 0 !important;
}

html body header.topbar .brand#brandTap #brandStatus.store-status::before {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  flex: 0 0 7px !important;
  box-shadow: none !important;
}

/* Mobile: logo izquierda, nombre y estado a la derecha. No debajo del logo. */
@media (max-width: 760px) {
  html body header.topbar .brand#brandTap {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  html body header.topbar .brand#brandTap .brand-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    align-self: center !important;
  }

  html body header.topbar .brand#brandTap .brand-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, max-content) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  html body header.topbar .brand#brandTap .brand-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: calc(100vw - 128px) !important;
    font-size: clamp(25px, 8vw, 31px) !important;
    line-height: .9 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body header.topbar .brand#brandTap .brand-status-row {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    max-width: 122px !important;
  }

  html body header.topbar .brand#brandTap #brandStatus.store-status {
    max-width: 122px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    gap: 4px !important;
  }

  html body header.topbar .brand#brandTap #brandStatus.store-status::before {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    flex-basis: 6px !important;
  }

  body.tv-scroll-safe-v279 #cartDrawer.drawer.show {
    height: min(94dvh, 820px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top)) !important;
  }

  body.tv-scroll-safe-v279 #cartDrawer.drawer.show .drawer-body {
    max-height: none !important;
  }
}


/* v419: home hero removed at user's request */
body .hero,
body .tv-home-banner,
body .hero-banner-card,
body .hero-banner-content,
body .hero-banner-copy,
body .hero-location-row {
  display: none !important;
}

body #promoBanners,
body .promo-banners {
  margin-top: 10px !important;
}

body #menu {
  margin-top: 10px !important;
}