/* ============================
   BASE
============================ */
:root {
  --bg: #faf7f3;
  --cream: #fffaf3;
  --cream-2: #f3ede4;
  --text: #2b2620;
  --muted: #7a6a58;
  --gold: #c49a6c;
  --gold-dark: #b1834f;
  --border: #e4d7c7;
  --black: #0d0d0d;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

img {
  max-width: 100%;
}

button,
a {
  font-family: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ============================
   HEADER
============================ */
header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(250, 247, 243, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2d7c8;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}

.logo-mark {
  position: relative;
  width: 176px;
  height: 118px;
  flex: 0 0 auto;
}

.logo-base {
  position: absolute;
  inset: 0;
  background-image: url("../../public/assets/logo/logo-base.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.logo-smoke {
  position: absolute;
  left: 62.450%;
  top: 21.570%;
  width: 17.800%;
  height: 26.486%;
  background-image: url("../../public/assets/logo/logo-smoke.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: 50% 85%;
  animation: logoSmokeFloat 3.9s ease-in-out infinite;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12));
}

.logo-text {
  font-size: 0.84rem;
  font-weight: 700;
  color: #6a5f52;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes logoSmokeFloat {
  0% { transform: translateY(0) rotate(-3deg) scale(0.98); opacity: 0.95; }
  30% { transform: translateY(-1px) rotate(1deg) scale(1.01); opacity: 1; }
  60% { transform: translateY(-4px) rotate(3deg) scale(1.04); opacity: 0.97; }
  85% { transform: translateY(-2px) rotate(-1deg) scale(1.02); opacity: 0.98; }
  100% { transform: translateY(0) rotate(-2deg) scale(0.99); opacity: 0.95; }
}

nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

nav a {
  font-size: 0.88rem;
  text-decoration: none;
  color: #3b332a;
}

nav a:hover {
  color: var(--gold-dark);
}

.nav-cart-btn {
  gap: 0.35rem;
}

.nav-cart-count {
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0 0.28rem;
}

.btn-outline {
  border: 1px solid var(--gold);
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
  color: #3b332a;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.btn-outline:hover {
  background: var(--gold);
  color: #fff;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
}

/* ============================
   HERO / CAROUSEL PREMIUM
============================ */
.hero-carousel {
  position: relative;
  margin-bottom: 1.5rem;
}

.carousel-container {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 360px;
  max-height: 520px;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
  box-shadow: 0 18px 44px rgba(43, 38, 32, 0.16);
  border: 1px solid rgba(196, 154, 108, 0.16);
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-slide.active {
  opacity: 1;
  z-index: 2;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.78));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
}

.carousel-content {
  max-width: 520px;
  color: #fff;
  text-align: left;
}

.hero-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f3d7a7;
  margin-bottom: 0.65rem;
}

.hero-title {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.08;
  margin: 0 0 0.75rem;
}

.hero-sub {
  font-size: 0.98rem;
  line-height: 1.45;
  opacity: 0.9;
  margin: 0 0 1rem;
  max-width: 560px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  padding: 0.58rem 1.1rem;
  font-size: 0.86rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.hero-cta:hover {
  background: var(--gold-dark);
}

.hero-pills {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  min-width: 150px;
}

.hero-pill {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f7efe4;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  font-size: 0.78rem;
  text-align: center;
  backdrop-filter: blur(4px);
}

.hero-brand-panel {
  width: min(360px, 36%);
  min-width: 280px;
  background: rgba(16, 13, 10, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 1rem;
  color: #fffaf3;
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.hero-brand-logo-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.hero-brand-panel .logo-mark {
  width: 112px;
  height: 76px;
}

.hero-brand-name {
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #f3d7a7;
  line-height: 1.25;
}

.hero-brand-sub {
  margin-top: 0.22rem;
  color: rgba(255, 250, 243, 0.76);
  font-size: 0.76rem;
  line-height: 1.35;
}

.hero-brand-comment {
  margin: 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 250, 243, 0.92);
  font-size: 0.9rem;
  line-height: 1.5;
}

.hero-brand-comment::before {
  content: "“";
  color: #f3d7a7;
  font-size: 1.25rem;
  line-height: 0;
  margin-right: 0.15rem;
}

.hero-brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.hero-brand-tag {
  border: 1px solid rgba(196, 154, 108, 0.38);
  background: rgba(196, 154, 108, 0.14);
  color: #f7efe4;
  border-radius: 999px;
  padding: 0.32rem 0.68rem;
  font-size: 0.72rem;
  font-weight: 700;
}

.brand-slide {
  background:
    radial-gradient(circle at 22% 45%, rgba(196, 154, 108, 0.12), transparent 30%),
    radial-gradient(circle at 82% 15%, rgba(177, 131, 79, 0.10), transparent 28%),
    linear-gradient(135deg, #fffdf9 0%, #faf7f3 48%, #f3ede4 100%);
}

.brand-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196,154,108,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,154,108,0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.28;
  z-index: 0;
}

.brand-slide .carousel-overlay {
  background: transparent;
  color: #3b332a;
  justify-content: center;
  padding: 2.2rem 2.4rem;
  z-index: 1;
}

/* Premium modal for backend cart changes */
#checkoutBackendError.premium-modal {
  font-family: inherit;
  color: var(--text);
}

.premium-modal-inner {
  display: block;
}

.premium-modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 6px;
}

.premium-modal-text {
  color: var(--muted);
  margin-bottom: 10px;
  font-size: 0.96rem;
}

.premium-modal-changes {
  max-height: 240px;
  overflow: auto;
  margin-bottom: 12px;
}

.premium-modal-changes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.premium-modal-changes li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.04);
}

.premium-modal-changes .change-name {
  color: var(--text);
  font-weight: 600;
}

.premium-modal-changes .change-prices {
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.premium-modal-btn {
  background: var(--gold);
  color: #111;
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  font-weight: 800;
  cursor: pointer;
}

.premium-modal-btn:hover {
  background: var(--gold-dark);
}

@media (max-width: 520px) {
  #checkoutBackendError.premium-modal {
    width: 94% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 12% !important;
  }
}

.brand-slide-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(330px, 44%) minmax(380px, 1fr);
  align-items: center;
  gap: clamp(1.8rem, 4vw, 4rem);
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.brand-logo-column {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 290px;
}

.brand-logo-column::before {
  content: "";
  position: absolute;
  width: min(92%, 420px);
  height: min(92%, 300px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.58) 46%, rgba(255,255,255,0) 72%);
  filter: blur(1px);
}

.brand-logo-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.brand-logo-badge .logo-mark {
  width: clamp(300px, 33vw, 430px);
  height: clamp(202px, 22vw, 290px);
  filter: drop-shadow(0 18px 30px rgba(43, 38, 32, 0.10));
}

.brand-info-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  min-width: 0;
}

.brand-info-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.brand-slide .hero-tag {
  color: #8c6230;
  margin-bottom: 0.75rem;
}

.brand-slide .hero-title {
  color: #2f281f;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  max-width: 640px;
  letter-spacing: -0.03em;
}

.brand-slide .hero-sub {
  color: #67594a;
  opacity: 1;
  max-width: 610px;
  font-size: 1rem;
  line-height: 1.6;
}

.brand-slide .hero-cta {
  width: fit-content;
  margin-top: 0.2rem;
}

.brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.brand-tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(196, 154, 108, 0.30);
  background: rgba(255, 255, 255, 0.55);
  color: #7a5836;
  border-radius: 999px;
  padding: 0.38rem 0.76rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
}

.brand-photo-card {
  position: relative;
  width: min(100%, 560px);
  min-height: 132px;
  border-radius: 28px;
  overflow: hidden;
  border: none;
  box-shadow: 0 20px 42px rgba(43, 38, 32, 0.13);
  isolation: isolate;
}

.brand-photo-card img {
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
  display: block;
}

.brand-photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(47, 40, 31, 0.50), rgba(47, 40, 31, 0.10));
}

.brand-photo-caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.85rem;
  z-index: 1;
  color: #fffaf3;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  border: none;
  color: #fff;
  font-size: 2rem;
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  z-index: 6;
}

.carousel-arrow.left { left: 1rem; }
.carousel-arrow.right { right: 1rem; }

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.carousel-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 6;
}

.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.carousel-dots button.active {
  background: #fff;
}

/* ============================
   MARQUESINA
============================ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid #e2d7c8;
  border-bottom: 1px solid #e2d7c8;
  padding: 0.65rem 0;
  margin: 1rem 0 2rem;
}

.marquee-inner {
  display: inline-block;
  animation: marquee var(--marquee-speed, 22s) linear infinite;
  font-size: 0.9rem;
  color: #3b332a;
  letter-spacing: 0.05em;
}

.marquee-inner:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

/* ============================
   SECCIONES
============================ */
.section {
  margin-bottom: 2.3rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #3b332a;
}

.section-sub {
  font-size: 0.82rem;
  color: #8a7a66;
  margin-top: 0.18rem;
}

.info-card {
  background: #fff;
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: 14px;
  color: #4b4035;
}

.info-card p {
  margin: 0.35rem 0;
}

.delivery-card {
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  border: 1px solid rgba(196, 154, 108, 0.35);
  border-radius: 20px;
  padding: 1.15rem;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1rem;
  align-items: center;
  box-shadow: 0 10px 22px rgba(43, 38, 32, 0.06);
}

.delivery-icon {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: linear-gradient(135deg, #2f281f 0%, #4b4035 100%);
  color: #fffaf3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  box-shadow: 0 12px 22px rgba(43, 38, 32, 0.18);
}

.delivery-title {
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
  font-weight: 800;
  color: #3b332a;
}

.delivery-text {
  margin: 0;
  color: #6a5f52;
  font-size: 0.9rem;
  line-height: 1.5;
}

.delivery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.delivery-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  background: rgba(196, 154, 108, 0.14);
  border: 1px solid rgba(196, 154, 108, 0.28);
  color: #7a5836;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.menu-intro {
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  border: 1px solid rgba(196, 154, 108, 0.35);
  border-left: 4px solid var(--gold);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  color: #4b4035;
  line-height: 1.45;
  box-shadow: 0 8px 20px rgba(43, 38, 32, 0.05);
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.menu-intro-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: #2f281f;
  color: #fffaf3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(47, 40, 31, 0.16);
}

.menu-intro-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #3b332a;
  margin-bottom: 0.18rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-intro-text {
  font-size: 0.86rem;
  color: #6a5f52;
}

.menu-intro-text strong {
  color: #b1834f;
}

.empty-state {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  border: 1px dashed rgba(196, 154, 108, 0.42);
  border-radius: 18px;
  padding: 1.1rem;
  color: #6a5f52;
  text-align: center;
}

.empty-state-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #3b332a;
  margin-bottom: 0.25rem;
}

.empty-state-text {
  font-size: 0.86rem;
  line-height: 1.45;
}

.catalog-page {
  display: none;
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  border: 1px solid rgba(196, 154, 108, 0.32);
  border-radius: 22px;
  padding: 1.15rem;
  box-shadow: 0 12px 30px rgba(43, 38, 32, 0.07);
}

.catalog-page.active {
  display: block;
}

.catalog-page .section-header {
  margin-bottom: 1rem;
}

.catalog-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .menu-intro {
    padding: 0.9rem;
  }

  .menu-intro-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
}


/* ============================
   CÓMO COMPRAR / FAQ / EVENTOS
============================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.step-card {
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  border: 1px solid rgba(196, 154, 108, 0.32);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 10px 22px rgba(43, 38, 32, 0.05);
}

.step-number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2f281f;
  color: #fffaf3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 850;
  margin-bottom: 0.75rem;
}

.step-title {
  font-size: 0.95rem;
  font-weight: 850;
  color: #3b332a;
  margin-bottom: 0.32rem;
}

.step-text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #6a5f52;
}

.events-premium-card {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(280px, 0.9fr);
  gap: 1rem;
  align-items: stretch;
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  border: 1px solid rgba(196, 154, 108, 0.34);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(43, 38, 32, 0.07);
}

.events-premium-copy {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.events-kicker {
  color: #a97946;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 850;
  margin-bottom: 0.5rem;
}

.events-title {
  margin: 0 0 0.55rem;
  color: #3b332a;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.15;
}

.events-text {
  margin: 0;
  color: #6a5f52;
  font-size: 0.92rem;
  line-height: 1.5;
}

.events-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1rem 0 1.1rem;
}

.events-list span {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(196, 154, 108, 0.22);
  border-radius: 999px;
  padding: 0.42rem 0.7rem;
  color: #5d4f42;
  font-size: 0.78rem;
  font-weight: 750;
  text-align: center;
}

.events-premium-image {
  min-height: 280px;
  position: relative;
}

.events-premium-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.events-premium-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.28), rgba(0,0,0,0.04));
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.95rem;
  box-shadow: 0 8px 18px rgba(43, 38, 32, 0.04);
}

.faq-item strong {
  display: block;
  color: #3b332a;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.faq-item span {
  color: #6a5f52;
  font-size: 0.84rem;
  line-height: 1.45;
}

/* ============================
   CHECKOUT MEJORADO
============================ */
.checkout-options {
  background: #fff;
  border: 1px solid rgba(196, 154, 108, 0.28);
  border-radius: 14px;
  padding: 0.82rem;
  display: grid;
  gap: 0.7rem;
}

.checkout-options-title {
  color: #3b332a;
  font-weight: 850;
  font-size: 0.86rem;
}

/* Ajuste post-Etapa 3: ".checkout-options" (con su propio
   .checkout-options-title "Datos para coordinar el pedido") se mueve tal
   cual dentro de la Smart Preview Card de Coordinacion, que ya repite ese
   mismo texto en su encabezado -duplicacion puramente visual-. Se oculta
   SOLO dentro de #orderStepOverlayV165: el mismo selector de clase que usa
   #guestCheckoutPanel ("Datos de contacto", en el carrito) no se ve
   afectado porque ese panel nunca se mueve a este overlay. El nodo, sus
   clases y el resto del formulario (.checkout-grid y sus campos) quedan
   intactos -solo cambia el renderizado visual de este titulo puntual-. */
#orderStepOverlayV165 .checkout-options-title {
  display: none;
}

/* Ajuste Etapa 3 (pedido del usuario): ocultar el campo "Cantidad de
   personas" SOLO dentro de #orderStepOverlayV165 ("Datos para hacer el
   pedido"). Auditado antes de aplicar: #checkoutPeople no tiene atributo
   required, no aparece en collectMissingFields()/validateCheckoutRequired()
   (guest-checkout-account-pages.js) -ningun flujo de validacion exige
   completarlo-, y ni create.php/update.php ni ningun otro endpoint de
   ordenes lo leen o lo persisten (confirmado por busqueda en api/orders/):
   es puramente informativo para el mensaje de WhatsApp. Mesa Armenia/
   combos no lo referencian (su propio selector de personas fue retirado en
   una etapa anterior, nunca uso este input). display:none en el <label>
   completo saca el input del flujo de tabulacion sin necesitar tabindex y
   sin dejar hueco reservado; el ID/valor/listeners de #checkoutPeople
   siguen intactos en el DOM -solo se oculta aca, en el resto del sitio
   (si en algun momento el input se viera antes de moveCheckoutBlocksV165
   dentro del carrito) sigue visible sin cambios-. */
#orderStepOverlayV165 .checkout-field:has(#checkoutPeople) {
  display: none;
}

/* Ajuste Etapa 3 (compactar Coordinacion, inspirado visualmente en un
   prototipo aportado por el usuario -sin reutilizar su logica-): dentro de
   #orderStepOverlayV165 nada mas, "Entrega o retiro" ocupa el ancho
   completo de la tarjeta (para que quepan comodo los 2 botones) y
   "Fecha deseada"/"Horario aproximado" quedan en 2 columnas en el mismo
   ancho donde ya alcanzan, gracias a que siguen siendo los unicos 2 items
   restantes del grid de 2 columnas (Cantidad de personas ya esta retirada
   del flujo por la regla de arriba). Si el ancho no alcanza (mobile
   angosto), el media query de abajo vuelve a 1 columna -nunca se fuerza
   el ajuste-. */
#orderStepOverlayV165 .checkout-field:has(#checkoutDeliveryType) {
  grid-column: 1 / -1;
}

#orderStepOverlayV165 .checkout-grid {
  gap: 0.5rem;
  align-items: start;
}

#orderStepOverlayV165 .checkout-field {
  gap: 0.22rem;
}

/* #checkoutDeliveryType sigue siendo un <select> real y operable -solo se
   oculta visualmente (misma tecnica "sr-only" por clip que usa el resto
   del sitio, nunca display:none, para no perder su semantica de control
   de formulario) y se saca del orden de tabulacion via tabindex="-1" en el
   HTML; el grupo de botones de abajo es el que recibe foco y pasa a ser
   la superficie accesible principal. */
.v165-delivery-select-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Misma tecnica sr-only que .v165-delivery-select-sr, con nombre propio
   para no acoplar el calendario de Fecha a la clase del toggle de
   Entrega/Retiro -ambas son utilidades independientes, sin relacion
   funcional entre si-. */
.v165-field-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.v165-coord-date-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 44px;
  padding: 0.58rem 0.65rem;
  border: 1px solid #d8c7b1;
  border-radius: 12px;
  background: #fffaf3;
  color: #3b332a;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  text-align: left;
}

.v165-coord-date-trigger:focus-visible {
  outline: 2px solid var(--gold, #c49a6c);
  outline-offset: 2px;
}

.v165-coord-date-trigger-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #8a7a68;
}

.v165-coord-date-trigger span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v165-coord-date-trigger-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #8a7a68;
  transition: transform 0.15s;
}

.v165-coord-date-trigger[aria-expanded="true"] .v165-coord-date-trigger-chevron {
  transform: rotate(180deg);
}

/* Panel INLINE (no flotante/absoluto) a proposito: el acordeon de
   Coordinacion usa overflow:hidden para su animacion de colapso
   (.v165-step-collapse-inner); un popup absoluto podria quedar recortado
   si cae cerca del borde inferior. Empuja el contenido hacia abajo en vez
   de flotar encima -funcionalmente identico, visualmente casi igual a la
   referencia, sin el riesgo de recorte-. */
.v165-coord-calendar {
  /* Sigue siendo hermano de .checkout-grid (evita el bug de desborde/
     estiramiento de fila ya corregido), pero se acota al mismo ancho que
     ocupaba la columna de Fecha -misma cuenta que
     grid-template-columns:repeat(2,1fr) con gap:0.5rem-, para que visualmente
     quede "en su lugar" bajo Fecha deseada y no ocupe las 2 columnas. */
  width: 100%;
  max-width: calc((100% - 0.5rem) / 2);
  box-sizing: border-box;
  margin-top: 0.4rem;
  padding: 0.5rem 0.4rem;
  border: 1px solid #d8c7b1;
  border-radius: 12px;
  background: #fffaf3;
}

.v165-coord-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.v165-coord-calendar-nav {
  border: none;
  background: none;
  font-size: 1rem;
  line-height: 1;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  cursor: pointer;
  color: #6a5f52;
}

.v165-coord-calendar-nav:hover {
  background: rgba(196, 154, 108, 0.14);
}

.v165-coord-calendar-month {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 800;
  font-size: 0.66rem;
  color: #3b332a;
  line-height: 1.2;
}

.v165-coord-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.58rem;
  color: #8a7a68;
  margin-bottom: 0.3rem;
}

.v165-coord-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.1rem;
}

.v165-coord-calendar-cell {
  aspect-ratio: 1;
  min-width: 0;
  width: 100%;
  border: none;
  background: none;
  border-radius: 999px;
  font-size: 0.68rem;
  color: #3b332a;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.v165-coord-calendar-cell:hover:not(:disabled):not(.selected) {
  background: #faeeda;
  color: #633806;
}

.v165-coord-calendar-cell:active:not(:disabled) {
  transform: scale(0.92);
}

.v165-coord-calendar-cell:focus-visible {
  outline: 2px solid var(--gold, #c49a6c);
  outline-offset: 1px;
}

.v165-coord-calendar-cell.today {
  font-weight: 800;
}

.v165-coord-calendar-cell.today::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: #ba7517;
}

.v165-coord-calendar-cell.selected {
  background: #ba7517;
  color: #fff;
  font-weight: 800;
  animation: v165CalendarPop 0.22s ease;
}

.v165-coord-calendar-cell.selected::after {
  background: #fff;
}

.v165-coord-calendar-cell:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.v165-coord-calendar-cell-empty {
  visibility: hidden;
  cursor: default;
}

@keyframes v165CalendarPop {
  0% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v165-coord-calendar-cell {
    transition: none;
    animation: none !important;
  }
}

/* Menu propio de Horario, mismo ancho de columna que el calendario pero
   alineado a la derecha (margin-left:auto) para quedar bajo "Horario
   aproximado" -columna 2- en vez de bajo "Fecha deseada". */
.v165-coord-time-menu {
  width: 100%;
  max-width: calc((100% - 0.5rem) / 2);
  box-sizing: border-box;
  margin-left: auto;
  margin-top: 0.4rem;
  border: 1px solid #d8c7b1;
  border-radius: 12px;
  background: #fffaf3;
  overflow: hidden;
}

.v165-coord-time-option {
  display: block;
  width: 100%;
  padding: 0.6rem 0.65rem;
  border: none;
  border-bottom: 1px solid rgba(196, 154, 108, 0.2);
  background: none;
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  color: #3b332a;
  cursor: pointer;
}

.v165-coord-time-option:last-child {
  border-bottom: none;
}

.v165-coord-time-option:hover {
  background: rgba(196, 154, 108, 0.1);
}

.v165-coord-time-option.selected {
  background: #faeeda;
  color: #633806;
  font-weight: 800;
}

.v165-coord-time-option:focus-visible {
  outline: 2px solid var(--gold, #c49a6c);
  outline-offset: -2px;
}

.v165-delivery-toggle {
  display: flex;
  gap: 0.4rem;
}

.v165-delivery-toggle-btn {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(196, 154, 108, 0.32);
  background: #fff;
  color: #4a3f33;
  font: inherit;
  font-weight: 750;
  font-size: 0.86rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.v165-delivery-toggle-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.v165-delivery-toggle-btn[aria-pressed="true"] {
  background: #faeeda;
  border-color: #ba7517;
  color: #633806;
}

.v165-delivery-toggle-btn:focus-visible {
  outline: 2px solid var(--gold, #c49a6c);
  outline-offset: 2px;
}

.v165-delivery-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Ajuste visual Coordinacion (referencia aprobada por el usuario):
   encabezado con icono + titulo unico, separador y campos Fecha/Horario
   con apariencia compacta de "select" (icono/chevron puramente
   decorativos, pointer-events:none -el click sigue llegando al input
   real debajo-). #checkoutDate/#checkoutTime no cambian de tipo, id,
   validaciones ni listeners; el calendario nativo sigue siendo el mismo,
   solo se le resta opacidad a su propio indicador para no duplicar icono
   con el chevron decorativo (sigue siendo clickeable, misma area). */
.v165-coord-title-icon {
  width: 19px;
  height: 19px;
  color: #8a6a3d;
  flex: 0 0 auto;
}

.v165-coord-block .v165-step-block-title {
  justify-content: flex-start;
  gap: 0.5rem;
}

/* .checkout-options se mueve completo dentro de esta tarjeta
   (moveCheckoutBlocksV165) con su propio fondo/borde/padding -eso
   generaba una "tarjeta dentro de la tarjeta", justo lo que la
   referencia no muestra-. Se aplana SOLO aca (unica aparicion de esta
   clase en todo el sitio, confirmado); el resto de .checkout-options
   -grid, campos, validaciones- sigue intacto. */
#orderStepOverlayV165 .checkout-options {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.v165-coord-divider {
  height: 1px;
  background: rgba(196, 154, 108, 0.24);
  margin: 0 0 0.68rem;
}

/* Punto de retiro discreto (referencia: sin tarjeta/recuadro grande
   anidado). renderCheckoutShippingModalityV185() (includes/home.php)
   sigue siendo quien arma el contenido (titulo+direccion+instrucciones)
   de #checkoutPickupInfoV185 -no se toca esa logica-; solo se le quita
   el fondo/padding de "caja" y se deja como texto simple dentro de la
   tarjeta de Coordinacion. */
#orderStepOverlayV165 #checkoutPickupInfoV185 {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-top: 0.55rem !important;
  font-size: 0.82rem !important;
  color: #6a5f52;
}

#orderStepOverlayV165 #checkoutPickupInfoV185 strong {
  display: block;
  color: #3b332a;
  font-weight: 800;
  margin-bottom: 0.15rem;
}

.checkout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.checkout-field {
  display: grid;
  gap: 0.32rem;
  font-size: 0.76rem;
  color: #7a6a58;
}

.checkout-field input,
.checkout-field select {
  width: 100%;
  border: 1px solid #d8c7b1;
  border-radius: 12px;
  padding: 0.58rem 0.65rem;
  background: #fffaf3;
  color: #3b332a;
  font: inherit;
}

.checkout-review-overlay {
  position: fixed;
  inset: 0;
  z-index: 390;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(3px);
}

.checkout-review-modal {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fffaf3;
  border: 1px solid rgba(196, 154, 108, 0.32);
  border-radius: 22px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.30);
  padding: 1rem;
}

.checkout-review-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 0.85rem;
}

.checkout-review-title {
  margin: 0;
  color: #3b332a;
  font-size: 1.2rem;
}

.checkout-review-sub {
  margin: 0.25rem 0 0;
  color: #7a6a58;
  font-size: 0.84rem;
  line-height: 1.4;
}

.checkout-review-close {
  border: none;
  background: transparent;
  color: #7a6a58;
  font-size: 1.35rem;
  cursor: pointer;
}

.checkout-review-content {
  display: grid;
  gap: 0.8rem;
}

.review-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.8rem;
}

.review-block-title {
  color: #3b332a;
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.55rem;
}

.review-lines {
  display: grid;
  gap: 0.38rem;
  color: #6a5f52;
  font-size: 0.84rem;
  line-height: 1.45;
}

.review-line {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px dashed rgba(216, 199, 177, 0.7);
  padding-bottom: 0.32rem;
}

.review-line:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.checkout-review-actions {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

@media (max-width: 760px) {
  .steps-grid,
  .events-premium-card,
  .faq-grid,
  .checkout-grid {
    grid-template-columns: 1fr;
  }

  .events-list {
    grid-template-columns: 1fr;
  }

  .events-premium-image {
    min-height: 220px;
  }
}

/* ============================
   PRODUCTOS
============================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}

.product-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.product-image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge-stack {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  max-width: calc(100% - 4.4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  pointer-events: none;
}

.badge {
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
  /* normal (no break-word/anywhere): puede pasar de línea entre
     palabras, pero nunca corta una palabra por la mitad (ej. no
     partir "DESTACADO" en "DESTACAD"+"O"). */
  overflow-wrap: normal;
  word-break: normal;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}

.badge-new { background: #2f855a; }
.badge-offer { background: #c53030; }
.badge-special-offer { background: #b7791f; }
.badge-limited { background: #b83280; }
.badge-sold-out { background: #2b2620; }

/* Nuevo/Destacado son siempre una sola palabra fija (ver catalog.js,
   crearProductoHTML): nunca deben partirse ni bajar de línea. El resto
   de los badges (% OFF, oferta especial con texto libre del admin,
   "Agotado por hoy") puede tener varias palabras y sí debe poder
   pasar de línea entre ellas, así que quedan con white-space:normal. */
.badge-new,
.badge-limited {
  white-space: nowrap;
}

.product-body {
  padding: 0.75rem 0.82rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.product-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #3b332a;
}

.product-desc {
  font-size: 0.8rem;
  color: #7a6a58;
  line-height: 1.35;
  flex: 1;
}

.product-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.22rem;
}

.product-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  border-radius: 999px;
  padding: 0.18rem 0.46rem;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
  background: #fffaf3;
  border: 1px solid rgba(196, 154, 108, 0.26);
  color: #7a5836;
  white-space: nowrap;
}

.product-flag.today {
  background: #eef8f0;
  border-color: rgba(47, 133, 90, 0.24);
  color: #2f855a;
}

.product-flag.order {
  background: #f7efe4;
  border-color: rgba(196, 154, 108, 0.32);
  color: #7a5836;
}

.product-flag.lead-time {
  background: #f9f0dc;
  border-color: rgba(177, 131, 79, 0.28);
  color: #8a5f2b;
}

.product-flag.minimum {
  background: #fff1f1;
  border-color: rgba(197, 48, 48, 0.18);
  color: #a43a3a;
}

.admin-feature-note {
  margin-top: 0.65rem;
  border: 1px dashed rgba(196, 154, 108, 0.38);
  background: #fffaf3;
  border-radius: 14px;
  padding: 0.7rem;
  color: #6a5f52;
  font-size: 0.8rem;
  line-height: 1.4;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.3rem;
}

.product-price {
  font-size: 0.92rem;
  font-weight: 750;
  color: #3b332a;
}

.product-price-old {
  font-size: 0.78rem;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #c53030;
  color: #c53030;
  background: #fff1f1;
  border: 1px solid rgba(197, 48, 48, 0.18);
  border-radius: 999px;
  padding: 0.08rem 0.38rem;
  margin-right: 0.35rem;
  font-weight: 800;
}

/* Leyenda fiscal secundaria (BACKLOG-FISCAL-001): línea discreta debajo de
   un precio/total efectivo. Sin caja, sin fondo, sin badge — nunca compite
   visualmente con el precio principal. Reutilizada en detalle de producto,
   "Más información", carrito, checkout y Armá tu Mesa. */
.price-fiscal-note {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
}

.product-actions {
  margin-top: 0.45rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.45rem;
}

.btn-add {
  flex: 1;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: #f7efe4;
  color: #3b332a;
  font-size: 0.8rem;
  padding: 0.38rem 0.65rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.btn-add:hover {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold-dark);
}

.btn-quick {
  font-size: 0.75rem;
  border: none;
  background: transparent;
  color: #7a6a58;
  cursor: pointer;
  text-decoration: underline;
}

.favorite-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 250, 243, 0.88);
  color: #7a6a58;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(0,0,0,0.12);
  transition: transform 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.favorite-btn:hover {
  transform: scale(1.06);
  color: #c53030;
}

.favorite-btn.active {
  color: #c53030;
  background: #fff1f1;
  border-color: rgba(197, 48, 48, 0.28);
}

.favorite-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}


/* ============================
   PROMO SEMANAL / ENVÍO GRATIS OPCIONAL
============================ */
.product-card.promo-card {
  background: linear-gradient(145deg, #2f281f 0%, #17130f 100%);
  color: #fffaf3;
  min-height: 100%;
  border-color: rgba(196, 154, 108, 0.38);
  box-shadow: 0 14px 30px rgba(47, 40, 31, 0.20);
}

.product-card.promo-card:hover {
  box-shadow: 0 18px 38px rgba(47, 40, 31, 0.28);
}

.promo-card-media {
  position: relative;
  min-height: 170px;
  overflow: hidden;
  background: #17130f;
}

.promo-card-media img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  display: block;
  opacity: 0.58;
  transform: scale(1.04);
}

.promo-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(23,19,15,0.92) 100%);
}

.promo-card-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
}

.promo-card-kicker {
  position: absolute;
  top: 0.72rem;
  left: 0.72rem;
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.58rem;
}

.promo-card-title {
  font-size: 1.25rem;
  line-height: 1.04;
  font-weight: 850;
  color: #fffaf3;
  margin-bottom: 0.35rem;
}

.promo-card-text {
  font-size: 0.82rem;
  color: rgba(255,250,243,0.84);
  line-height: 1.36;
  margin-bottom: 0.7rem;
}

.promo-card-action {
  width: fit-content;
  border: 1px solid rgba(255,255,255,0.22);
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  padding: 0.42rem 0.78rem;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.free-shipping-home-card {
  background: linear-gradient(135deg, #2f281f 0%, #17130f 100%);
  color: #fffaf3;
  border-radius: 18px;
  padding: 1rem;
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(196,154,108,0.42);
  box-shadow: 0 12px 28px rgba(47, 40, 31, 0.20);
}

.free-shipping-home-card .eyebrow {
  color: #f3d7a7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 850;
  margin-bottom: 0.25rem;
}

.free-shipping-home-card strong {
  font-size: 1.15rem;
  color: #fffaf3;
}

.free-shipping-home-card p {
  margin: 0.35rem 0 0;
  color: rgba(255,250,243,0.78);
  font-size: 0.84rem;
  line-height: 1.4;
}

.free-shipping-home-card .amount {
  color: #f3d7a7;
  font-size: 1.45rem;
  font-weight: 900;
  white-space: nowrap;
}

/* Etapa 7 (fidelidad a maqueta): bloque de envío sin cargo mas compacto
   -icono+texto dinamico destacado, barra fina, titulo+umbral como leyenda
   chica-, ya sin el encabezado en mayusculas/badge que tenia antes. Sin
   tarjeta propia (border/bg) cuando vive dentro de .cart-benefit-card: una
   sola tarjeta flotante como en la maqueta. */
.cart-free-shipping-box {
  display: grid;
  gap: 0.4rem;
  padding-top: 0.2rem;
}

.cart-free-shipping-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-free-shipping-icon {
  width: 18px;
  height: 18px;
  color: var(--gold-dark, #b1834f);
  flex-shrink: 0;
}

.cart-free-shipping-text {
  font-size: 0.86rem;
  font-weight: 750;
  color: #3b332a;
  line-height: 1.3;
}

.cart-free-shipping-bar {
  height: 5px;
  border-radius: 999px;
  background: #f1e4d4;
  overflow: hidden;
}

.cart-free-shipping-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  width: 0%;
}

.cart-free-shipping-caption {
  font-size: 0.74rem;
  color: #7a6a58;
}

@media (max-width: 620px) {
  .free-shipping-home-card {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .free-shipping-home-card .amount {
    font-size: 1.18rem;
  }
}

/* ============================
   POPUP DESCUENTO PREMIUM
============================ */
.discount-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
}

.discount-popup {
  width: min(460px, 100%);
  background: var(--cream);
  color: #3b332a;
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28);
  position: relative;
  animation: discountPopupIn 0.32s ease;
  border: 1px solid rgba(196, 154, 108, 0.25);
}

@keyframes discountPopupIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.discount-popup-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  border: none;
  background: transparent;
  color: #8a7a66;
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1;
}

.discount-popup-close:hover {
  color: #3b332a;
}

.discount-popup-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.55rem;
}

.discount-popup-title {
  font-size: 1.22rem;
  line-height: 1.25;
  margin: 0 2rem 0.55rem 0;
  font-weight: 780;
  color: #3b332a;
}

.discount-popup-text {
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0 0 0.75rem;
  color: #7a6a58;
}

.discount-popup-coupon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #2f281f;
  color: #fffaf3;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
}

.discount-popup-coupon span {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.discount-popup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.discount-popup-btn {
  border: none;
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(196, 154, 108, 0.25);
}

.discount-popup-btn:hover {
  background: var(--gold-dark);
}

.discount-popup-link {
  border: none;
  background: transparent;
  color: #7a6a58;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

.discount-popup-link:hover {
  color: #3b332a;
}

/* ============================
   MODAL PRODUCTO
============================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 220;
}

.modal {
  width: min(780px, 100%);
  background: #fffaf3;
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 1.1fr;
  box-shadow: var(--shadow);
  position: relative;
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  border: none;
  background: rgba(255, 250, 243, 0.9);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  color: #6a5f52;
  z-index: 2;
}

.modal-img-wrap {
  min-height: 290px;
  background: #eee;
}

.modal-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.modal-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
  color: #3b332a;
}

.modal-price {
  color: var(--gold-dark);
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.modal-desc {
  color: #6a5f52;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.modal-actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  border-radius: 999px;
  padding: 0.58rem 1rem;
  font-size: 0.86rem;
  cursor: pointer;
  border: 1px solid var(--gold);
}

.btn-primary {
  background: var(--gold);
  color: #fff;
}

.btn-primary:hover {
  background: var(--gold-dark);
}

.btn-secondary {
  background: transparent;
  color: #3b332a;
}

.btn-secondary:hover {
  background: #f7efe4;
}


/* ============================
   CUENTA / LOGIN PARA PEDIDOS
============================ */
.nav-account-btn {
  gap: 0.35rem;
}

.account-status {
  border: 1px solid rgba(196, 154, 108, 0.32);
  background: #fff;
  border-radius: 14px;
  padding: 0.75rem;
  color: #3b332a;
  display: grid;
  gap: 0.45rem;
}

.account-status-title {
  font-size: 0.84rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.account-status-text {
  font-size: 0.78rem;
  color: #7a6a58;
  line-height: 1.35;
}

.account-status .btn-outline {
  width: fit-content;
  padding: 0.32rem 0.75rem;
  font-size: 0.76rem;
}

.auth-overlay {
  z-index: 280;
}

.auth-modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: #fffaf3;
  border-radius: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(196, 154, 108, 0.25);
  position: relative;
  padding: 1.15rem;
}

.auth-modal-header {
  padding-right: 2.5rem;
  margin-bottom: 0.9rem;
}

.auth-modal-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-dark);
  margin-bottom: 0.35rem;
}

.auth-modal-title {
  margin: 0;
  color: #3b332a;
  font-size: 1.35rem;
  line-height: 1.25;
}

.auth-modal-intro {
  margin: 0.45rem 0 0;
  color: #7a6a58;
  font-size: 0.88rem;
  line-height: 1.45;
}

.auth-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  border: none;
  background: #fff;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  color: #6a5f52;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.auth-tabs {
  display: flex;
  gap: 0.5rem;
  background: #f3ede4;
  border: 1px solid #e4d7c7;
  padding: 0.28rem;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 0.95rem;
}

.auth-tab {
  border: none;
  background: transparent;
  color: #7a6a58;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}

.auth-tab.active {
  background: #fffaf3;
  color: #3b332a;
  box-shadow: 0 5px 12px rgba(0,0,0,0.06);
}

.auth-form {
  display: none;
  gap: 0.8rem;
}

.auth-form.active {
  display: grid;
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.auth-field {
  display: grid;
  gap: 0.32rem;
  font-size: 0.78rem;
  font-weight: 750;
  color: #6a5f52;
}

.auth-field.full {
  grid-column: 1 / -1;
}

.auth-field input,
.auth-field textarea {
  width: 100%;
  border: 1px solid #d8c7b1;
  border-radius: 12px;
  padding: 0.65rem;
  font: inherit;
  color: #3b332a;
  background: #fff;
}

.auth-field textarea {
  resize: vertical;
  min-height: 72px;
}

.auth-notice {
  background: #fff;
  border: 1px dashed #d8c7b1;
  border-radius: 14px;
  padding: 0.75rem;
  font-size: 0.8rem;
  color: #7a6a58;
  line-height: 1.4;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.auth-helper {
  font-size: 0.76rem;
  color: #8a7a66;
  line-height: 1.35;
}

.account-card {
  display: none;
  background: #fff;
  border: 1px solid #e4d7c7;
  border-radius: 16px;
  padding: 0.9rem;
  gap: 0.6rem;
}

.account-card.active {
  display: grid;
}

.account-card-title {
  font-weight: 800;
  color: #3b332a;
}

.account-card-data {
  color: #7a6a58;
  font-size: 0.84rem;
  line-height: 1.45;
}

.account-dashboard {
  display: grid;
  gap: 0.75rem;
}

.account-section {
  background: #fffaf3;
  border: 1px solid #eadbc8;
  border-radius: 14px;
  padding: 0.75rem;
}

.account-section-title {
  font-size: 0.78rem;
  font-weight: 850;
  color: #3b332a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
}

.account-mini-list {
  display: grid;
  gap: 0.45rem;
  color: #7a6a58;
  font-size: 0.82rem;
  line-height: 1.4;
}

.account-mini-item {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(228, 215, 199, 0.7);
  padding-bottom: 0.4rem;
}

.account-mini-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.verification-box {
  display: none;
  margin-top: 0.9rem;
  background: #fff;
  border: 1px solid rgba(196, 154, 108, 0.32);
  border-radius: 16px;
  padding: 0.9rem;
}

.verification-box.active {
  display: grid;
  gap: 0.8rem;
}

.verification-demo-code {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: #2f281f;
  color: #fffaf3;
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.06em;
}

@media (max-width: 620px) {
  .auth-grid {
    grid-template-columns: 1fr;
  }

  .auth-tabs {
    width: 100%;
  }

  .auth-tab {
    flex: 1;
  }

  .auth-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .auth-actions .btn-primary,
  .auth-actions .btn-secondary {
    width: 100%;
  }
}

/* ============================
   COOKIES
============================ */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 260;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 940px;
  margin: 0 auto;
  background: rgba(47, 40, 31, 0.97);
  color: #fffaf3;
  border: 1px solid rgba(196, 154, 108, 0.48);
  border-radius: 18px;
  padding: 0.95rem 1rem;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(8px);
}

.cookie-copy {
  display: grid;
  gap: 0.25rem;
  line-height: 1.35;
}

.cookie-title {
  color: #f3d7a7;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cookie-text {
  font-size: 0.84rem;
  color: rgba(255, 250, 243, 0.88);
}

.cookie-actions {
  display: flex;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.cookie-btn {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fffaf3;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.cookie-btn.primary {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}

.cookie-btn:hover {
  opacity: 0.9;
}

.cookie-inline-link {
  border: none;
  background: transparent;
  color: #f3d7a7;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.cookie-preferences-overlay {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(3px);
}

.cookie-preferences-modal {
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  background: #fffaf3;
  color: #3b332a;
  border: 1px solid rgba(196, 154, 108, 0.34);
  border-radius: 22px;
  padding: 1.2rem;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.26);
  position: relative;
}

.cookie-preferences-intro,
.legal-copy {
  color: #6a5f52;
  font-size: 0.86rem;
  line-height: 1.48;
}

.cookie-preference-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  background: #fff;
  border: 1px solid #eadbc8;
  border-radius: 16px;
  padding: 0.85rem;
  margin-top: 0.7rem;
}

.cookie-preference-row strong {
  color: #3b332a;
}

.cookie-preference-row p {
  margin: 0.25rem 0 0;
  color: #7a6a58;
  font-size: 0.8rem;
  line-height: 1.35;
}

.cookie-switch {
  position: relative;
  width: 48px;
  height: 26px;
  display: inline-block;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d8c7b1;
  cursor: pointer;
  transition: background 0.18s ease;
}

.cookie-switch span::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}

.cookie-switch input:checked + span {
  background: #c49a6c;
}

.cookie-switch input:checked + span::before {
  transform: translateX(22px);
}

.cookie-switch input:disabled + span {
  opacity: 0.65;
  cursor: not-allowed;
}

.cookie-preferences-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.withdrawal-form {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.withdrawal-form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #4b4035;
}

.withdrawal-form input,
.withdrawal-form textarea {
  width: 100%;
  border: 1px solid #d8c7b1;
  border-radius: 12px;
  padding: 0.64rem 0.72rem;
  font: inherit;
  color: #3b332a;
  background: #fff;
}

.withdrawal-form textarea {
  min-height: 88px;
  resize: vertical;
}

@media (max-width: 620px) {
  .cookie-preferences-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-preferences-actions button {
    width: 100%;
  }

  .cookie-preference-row {
    grid-template-columns: 1fr;
  }
}

/* ============================
   BOTONES FLOTANTES PREMIUM
============================ */
.floating-stack {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.floating-btn {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d2a977, var(--gold));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.floating-btn:hover {
  background: linear-gradient(145deg, #c49a6c, #a87842);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.floating-btn svg {
  width: 25px;
  height: 25px;
  display: block;
}

.floating-btn.whatsapp {
  background: linear-gradient(145deg, #32d074, #178d4c);
}

.floating-btn.whatsapp:hover {
  background: linear-gradient(145deg, #2bbe69, #137a41);
}

.floating-btn.cart {
  background: linear-gradient(145deg, #2f281f, #17130f);
}

.floating-btn.qr {
  background: linear-gradient(145deg, #fffaf3, #eadbc8);
  color: #3b332a;
  border-color: rgba(196, 154, 108, 0.45);
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #c53030;
  color: #fff;
  border: 2px solid #fffaf3;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0 0.25rem;
}

/* ============================
   CARRITO
============================ */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
}

.cart-drawer {
  width: min(430px, 100%);
  min-height: 100%;
  background: #fffaf3;
  box-shadow: -18px 0 45px rgba(0, 0, 0, 0.28);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}

.cart-header h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #3b332a;
}

.cart-close {
  border: none;
  background: transparent;
  color: #7a6a58;
  font-size: 1.3rem;
  cursor: pointer;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: auto;
  padding-right: 0.2rem;
  flex: 1;
}

.cart-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 0.7rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.55rem;
}

.cart-item img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 11px;
}

.cart-item-name {
  font-weight: 750;
  color: #3b332a;
  font-size: 0.9rem;
}

.cart-item-price {
  color: #7a6a58;
  font-size: 0.82rem;
  margin-top: 0.12rem;
}

.cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* Etapa 7 (Carrito, fidelidad a maqueta): fila unica miniatura/info/
   cantidad, en vez del apilado anterior (.cart-item-bottom, que sigue
   existiendo sin uso aca para no romper el renderCart() inactivo de
   cart.js, ver su propio comentario CART-011). Clase adicional sobre
   .cart-item: no reemplaza su regla base, la especializa. Tamaños y
   proporciones (miniatura 62px, pastilla 36px/botones 34px) igual que la
   maqueta de referencia. */
.cart-item.cart-item-compact {
  grid-template-columns: 62px 1fr auto;
  align-items: center;
}

.cart-item-compact img {
  width: 62px;
  height: 62px;
}

.cart-item-info {
  min-width: 0;
}

.cart-item-info .cart-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-item-info .cart-item-price {
  margin-top: 0.15rem;
}

.cart-item-info .cart-item-price strong {
  color: #3b332a;
}

.qty-control-trash {
  border: none;
  background: transparent;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9c4b3d;
  cursor: pointer;
  padding: 0;
}

.qty-control-trash svg {
  width: 16px;
  height: 16px;
}

.cart-item-compact .qty-control {
  height: 36px;
}

.cart-item-compact .qty-control button {
  width: 34px;
  height: 34px;
}

/* Pedido minimo del Carrito (ensureMinimumBox, includes/home.php): debajo
   de "Te sugerimos", pegado al cierre; con poco contenido baja junto con el
   cierre al pie del area visible (margin-top:auto pasa del cierre a este
   bloque). Compacto cuando el minimo esta alcanzado y con el faltante
   destacado cuando no. Solo presentacion. */
#cartBodyScroll > .cart-minimum-box {
  margin: 0;
}

#cartOverlay #cartBodyScroll > .cart-minimum-box.show {
  margin-top: auto;
}

#cartOverlay #cartBodyScroll > .cart-minimum-box.show + #cartFooterBar {
  margin-top: 0;
}

/* Barra del minimo: transicion perceptible para la entrada 0% -> real
   (renderMinimumBox, al entrar el bloque en pantalla) y entre porcentajes
   al cambiar cantidades. Sin animacion con movimiento reducido. */
#cartMinimumFillV63 {
  transition: width 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  #cartMinimumFillV63 {
    transition: none;
  }
}

#cartBodyScroll > .cart-minimum-box.reached {
  padding: 0.55rem 0.8rem;
  gap: 0.3rem;
}

#cartBodyScroll > .cart-minimum-box.reached .cart-minimum-text {
  font-size: 0.78rem;
}

#cartBodyScroll > .cart-minimum-box.reached .cart-progress-track {
  height: 5px;
}

#cartBodyScroll > .cart-minimum-box.blocked .cart-minimum-text {
  color: #975a16;
  font-weight: 700;
}


.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d8c7b1;
  border-radius: 999px;
  overflow: hidden;
  background: #fffaf3;
}

.qty-control button {
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: #3b332a;
  font-weight: 800;
}

/* CART-011 (Mesas): "+" deshabilitado porque la Mesa no es multiplicable. */
.qty-control button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.qty-control span {
  min-width: 24px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 800;
}

.cart-remove {
  border: none;
  background: transparent;
  color: #9c4b3d;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
}

.cart-empty {
  background: #fff;
  border: 1px dashed #d8c7b1;
  border-radius: 14px;
  color: #7a6a58;
  padding: 1rem;
  text-align: center;
}

.cart-summary {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  display: grid;
  gap: 0.75rem;
}

.cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #3b332a;
}

.cart-total-row strong {
  font-size: 1.15rem;
}

.cart-final-row {
  border-top: 1px dashed rgba(216, 199, 177, 0.8);
  padding-top: 0.55rem;
}

.cart-discount-row {
  color: #9c4b3d;
}

.cart-discount-row strong {
  color: #c53030;
}

/* Etapa 7 (Carrito): cabecera fija (Etapa 6) / cuerpo con un unico scroll
   vertical / pie fijo -mismo patron de grilla de 3 filas ya usado en Datos
   (.v165-order-panel) y Revision (.checkout-review-modal/-body)-. Se
   escriben con selector #cartOverlay para ganarle de forma segura, por
   especificidad (no por orden de carga), a las reglas previas de
   .cart-drawer/.cart-items/.cart-summary que vienen de layouts legacy
   anteriores (V44 mas abajo en este archivo, y un <style> inyectado en
   runtime por guest-checkout-account-pages.js): no se tocan esas reglas
   para no arriesgar otros flujos que puedan depender de ellas, solo se las
   gana donde hace falta. */
#cartOverlay .cart-drawer {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

#cartOverlay .cart-body-scroll {
  overflow-y: auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

#cartOverlay .cart-items {
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}

#cartOverlay .cart-summary {
  overflow: visible !important;
}

/* Etapa 7 (fidelidad a maqueta): la maqueta no muestra un desglose de
   Subtotal/Descuento en el cuerpo -solo el Total final (pie, con el
   subtotal anterior tachado si hay beneficio) y el detalle de "Beneficio
   aplicado" dentro de su propia tarjeta-. Los nodos siguen existiendo y
   actualizandose en cada render (fuente real sin cambios), solo se ocultan
   visualmente para no duplicar el total en dos lugares. */
#cartOverlay .cart-summary > .cart-total-row {
  display: none !important;
}

/* Etapa 7: el formulario de invitado no se muestra dentro del Carrito
   -queda para Datos del pedido, moveCheckoutBlocksV165() lo reubica ahi
   (patches-v153-v174.js)-; se oculta por CSS (no por display inline, que
   syncGuestPanel() -guest-checkout-account-pages.js- sigue alternando sin
   saber de este cambio) para que nunca aparezca en el Carrito aunque el
   movimiento todavia no haya ocurrido. */
#cartOverlay #guestCheckoutPanel {
  display: none !important;
}

/* Leyenda fiscal: unica aparicion, en el pie fijo del Carrito debajo del
   Total estimado (#cartFooterBar), discreta para no agrandar el pie en
   mobile. Sin recorte (ellipsis): el importe legal nunca se oculta. */
.cart-tax-note {
  text-align: left;
  font-size: 0.68rem;
  line-height: 1.25;
  color: #a8957c;
  margin-top: 0.1rem;
}

/* Hallazgo real (Etapa 7): un <style> inyectado en runtime por
   guest-checkout-account-pages.js (injectStyles()) fija
   ".cart-summary>.smart-suggestions-box{order:20}", que gana por
   especificidad de clase y reordena visualmente las Recomendaciones AL
   FINAL de .cart-summary (que es display:grid, donde `order` sí aplica)
   sin importar su posicion real en el DOM. Se neutraliza con selector por
   ID (mayor especificidad, independiente del momento en que se inyecte ese
   estilo) y un order NEGATIVO -mas bajo que el 0 por defecto de cualquier
   otro hijo de .cart-summary (total-row, #cartBenefitNotice, etc.),
   garantiza primer lugar sin tener que fijarle order a cada hermano-.
   Etapa 8: ya no existe #cartBenefitCard (la gestion de beneficio se mudó
   a Datos), el orden visual real pedido ahora es Productos ->
   Recomendaciones -> aviso compacto -> pie fijo. */
#smartSuggestionsBox {
  order: -1;
}

/* Pie de una sola fila principal -Total estimado a la izquierda (con el
   subtotal anterior tachado al lado si hay beneficio aplicado), botón
   principal a la derecha-, reutilizado tal cual en las 3 pantallas del
   checkout (Carrito: Etapa 7, #cartFooterBar/#cartFooterPreviousTotal;
   Datos: Etapa 8, #orderFooterBarV165/#orderFooterPreviousTotalV165)
   -mismas clases genéricas, ninguna pantalla define su propia versión-. El
   único texto auxiliar del pie es "Paso N de 3". */
.cart-footer-bar {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  margin-top: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.cart-footer-totals {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cart-footer-total-label {
  font-size: 0.78rem;
  color: #7a6a58;
  white-space: nowrap;
}

/* Etapa 8: el pie de Datos reutiliza estas mismas clases con un botón más
   largo ("Revisar pedido" vs "Continuar →" del Carrito) dentro de
   .v165-order-actions, que tiene una regla previa ".v165-order-actions
   .btn-primary{width:100%}" (pensada para el footer apilado anterior) -esa
   regla tapaba por completo el total a la izquierda-. Se neutraliza acá
   (selector mas especifico) y se evita que el boton se encoja o le robe
   ancho al total, que era lo que ademas causaba el salto de línea en
   "Total estimado". */
.cart-footer-bar .btn-primary,
#orderFooterBarV165 .btn-primary,
#cartFooterBar .btn-primary {
  width: auto !important;
  flex: 0 0 auto;
  white-space: nowrap;
}

.cart-footer-totals strong {
  font-size: 1.3rem;
  font-weight: 800;
  color: #2b2620;
  letter-spacing: -0.01em;
}

.cart-footer-totals s {
  font-size: 0.8rem;
  color: #a8957c;
  font-weight: 400;
  margin-left: 0.4rem;
}

#cartBottomV165.v165-cart-bottom {
  margin-top: 0;
  flex: 0 0 auto;
}

/* Columna derecha del cierre (Carrito y Datos): boton + "Paso N de 3"
   debajo, centrado respecto del ancho del boton (no del pie completo). */
#cartBottomV165.v165-cart-bottom,
#orderFooterBarV165 .order-footer-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

#cartBottomV165 .v165-cart-bottom-note,
#orderFooterBarV165 .order-footer-cta .v165-cart-bottom-note {
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

/* Cierre del Carrito dentro del contenido desplazable (#cartBodyScroll,
   flex column): margin-top:auto lo lleva al pie del area visible cuando hay
   poco contenido y al final del scroll cuando hay mucho. */
#cartOverlay #cartBodyScroll > #cartFooterBar {
  margin-top: auto;
  flex: 0 0 auto;
  padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
}

/* Izquierda del cierre: importe (con el anterior tachado al lado si hay
   beneficio) y la leyenda fiscal debajo del importe. */
#cartFooterBar .cart-footer-totals,
#orderFooterBarV165 .cart-footer-totals {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.4rem;
}

#cartFooterBar .cart-footer-total-label,
#cartFooterBar .cart-tax-note,
#orderFooterBarV165 .cart-footer-total-label,
#orderFooterBarV165 .cart-tax-note {
  grid-column: 1 / -1;
}

#cartFooterBar .cart-footer-totals s {
  margin-left: 0;
}

/* Tarjeta "Beneficio y envío" en Datos del pedido (Etapa 8, reemplaza la
   ubicacion de Etapa 7) -plana, una sola superficie, sin tarjetas internas
   anidadas ni badge negro-. Usa el mismo acordeon global .v165-step-block
   (includes/overlays.php) que el resto de las tarjetas de Datos; el
   contenido (cupón + envío) vive directo dentro, sin su propio fondo.
   Clases con prefijo "cart-benefit-" por historia (nacieron en el Carrito
   durante Etapa 7), reutilizadas tal cual -no son especificas de esa
   pantalla, solo icono/minibar genericos del bloque. */
.cart-benefit-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(196, 154, 108, 0.16);
  color: #7a5325;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cart-benefit-icon-wrap.ok {
  background: rgba(196, 154, 108, 0.28);
  color: var(--gold-dark, #b1834f);
}

.cart-benefit-icon-wrap .cart-benefit-icon {
  width: 18px;
  height: 18px;
}

/* Datos del pedido: cada seccion conserva su icono identificador en el
   circulo (etiqueta / usuario / calendario / documento, mismo patron que la
   Revision) y la seccion completa se indica con una tilde verde aparte
   (.v165-step-check), sin reemplazar el icono. La clase .ok la sigue
   decidiendo la validacion real (syncStepNum / cupon aplicado). */
#orderStepOverlayV165 .cart-benefit-icon-wrap {
  position: relative;
}

#orderStepOverlayV165 .v165-step-num.cart-benefit-icon-wrap {
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(196, 154, 108, 0.16);
  color: #7a5325;
}

#orderStepOverlayV165 .v165-step-num.cart-benefit-icon-wrap.ok {
  background: rgba(196, 154, 108, 0.28);
  color: var(--gold-dark, #b1834f);
}

#orderStepOverlayV165 .v165-step-num .cart-benefit-icon {
  width: 18px;
  height: 18px;
}

.v165-step-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #3f8a55;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}

#orderStepOverlayV165 .v165-step-check svg {
  width: 9px;
  height: 9px;
}

#orderStepOverlayV165 .cart-benefit-icon-wrap.ok .v165-step-check {
  display: flex;
}

/* Acordeones cerrados de Datos: .v165-order-body es una grilla que ocupa
   todo el alto del panel y, con align-content por defecto (stretch),
   repartia el alto sobrante entre las tarjetas cerradas (28-42px vacios en
   cada una). Con "start" cada tarjeta mide solo su contenido; la
   separacion entre tarjetas sigue siendo el gap de la grilla. */
#orderStepOverlayV165 .v165-order-body,
#orderStepOverlayV165 .v165-step-block {
  align-content: start;
}

#orderBenefitBlockV165 .v165-step-header {
  gap: 0.6rem;
}

#orderBenefitBlockV165 .v165-step-block-title {
  gap: 0.5rem;
}

/* Minibarra: solo visible con la tarjeta contraída (resumen compacto del
   progreso de envío), oculta cuando está expandida porque ahí ya se ve la
   barra completa dentro de .cart-free-shipping-bar. */
.cart-benefit-minibar {
  height: 3px;
  border-radius: 2px;
  background: rgba(196, 154, 108, 0.22);
  margin: 0.35rem 0.85rem 0;
  overflow: hidden;
}

.cart-benefit-minibar i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  font-style: normal;
}

/* El minibar es hermano ANTERIOR a .v165-step-collapse en el DOM (va
   despues del boton header, antes del colapso) -por eso se togglea en base
   al propio boton toggle, el unico hermano previo real, no al colapso. */
#orderBenefitToggleV165[aria-expanded="true"] ~ .cart-benefit-minibar {
  display: none;
}

#orderBenefitBlockV165 .v165-step-collapse-inner {
  display: grid;
  gap: 0.7rem;
}

.cart-coupon-box {
  display: grid;
  gap: 0.55rem;
}

.cart-coupon-rule {
  font-size: 0.74rem;
  color: #a8957c;
}

.cart-coupon-link {
  border: none;
  background: transparent;
  color: #7a6a58;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
  width: fit-content;
}

.cart-coupon-applied {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(196, 154, 108, 0.14);
  color: #5e4210;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
}

.cart-coupon-applied-icon {
  color: var(--gold-dark, #b1834f);
  flex-shrink: 0;
  display: flex;
}

.cart-coupon-applied-icon svg {
  width: 18px;
  height: 18px;
}

.cart-coupon-applied-detail {
  font-size: 0.8rem;
  color: #7a6650;
}

.cart-coupon-gift {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1.5px dashed var(--gold);
  background: rgba(196, 154, 108, 0.1);
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
}

.cart-coupon-gift-icon {
  color: var(--gold-dark, #b1834f);
  flex-shrink: 0;
  display: flex;
}

.cart-coupon-gift-icon svg {
  width: 20px;
  height: 20px;
}

.cart-coupon-gift-detail {
  font-size: 0.78rem;
  color: #7a6650;
}

.cart-coupon-pill {
  margin-left: auto;
  height: 34px;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.cart-coupon-manual-row {
  display: flex;
  gap: 0.5rem;
}

.cart-coupon-manual-row input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid #d8c7b1;
  border-radius: 999px;
  padding: 0.52rem 0.78rem;
  background: #fff;
  color: #2f281f;
  font: inherit;
}

.cart-coupon-manual-row .btn-outline {
  flex-shrink: 0;
  padding: 0.4rem 0.9rem;
}

.review-coupon-line strong {
  color: #c53030;
}

.review-total-final {
  border-top: 1px solid rgba(216, 199, 177, 0.8);
  padding-top: 0.45rem;
  margin-top: 0.15rem;
}

.cart-notes-label {
  font-size: 0.8rem;
  color: #7a6a58;
  display: grid;
  gap: 0.35rem;
}

.cart-notes-label textarea {
  width: 100%;
  min-height: 74px;
  border: 1px solid #d8c7b1;
  border-radius: 12px;
  padding: 0.65rem;
  resize: vertical;
  background: #fff;
  color: #3b332a;
  font-family: inherit;
}

.cart-actions {
  display: grid;
  gap: 0.55rem;
}

.mobile-cart-primary-action {
  display: none;
}

.mobile-cart-primary-action .btn-primary {
  width: 100%;
}

.mobile-cart-primary-action-note {
  margin: 0.38rem 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #7a6a58;
}

.cart-whatsapp-note {
  margin: 0.25rem 0 0;
  color: #7a6a58;
  font-size: 0.76rem;
  line-height: 1.38;
  background: #fff;
  border: 1px dashed #d8c7b1;
  border-radius: 12px;
  padding: 0.65rem 0.72rem;
}


/* ============================
   TOAST PRODUCTO AGREGADO
============================ */
.add-toast {
  position: fixed;
  right: 1.2rem;
  bottom: 9.7rem;
  z-index: 345;
  width: min(330px, calc(100vw - 2rem));
  background: #2f281f;
  color: #fffaf3;
  border: 1px solid rgba(196, 154, 108, 0.45);
  border-radius: 16px;
  padding: 0.8rem;
  box-shadow: 0 16px 38px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.add-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.add-toast-title {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
}

.add-toast-text {
  display: block;
  font-size: 0.76rem;
  color: rgba(255, 250, 243, 0.78);
  line-height: 1.35;
}

.add-toast button {
  border: 1px solid rgba(255,255,255,0.28);
  background: #c49a6c;
  color: #fff;
  border-radius: 999px;
  padding: 0.42rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.add-toast button:hover {
  background: #b1834f;
}

@media (max-width: 620px) {
  .add-toast {
    left: 1rem;
    right: 1rem;
    bottom: 8.8rem;
    width: auto;
  }
}


/* ============================
   PAGO ONLINE OPCIONAL
   Configurado desde admin_settings mediante el runtime público de pagos
============================ */
.payment-box {
  display: none;
  background: #fff;
  border: 1px solid rgba(196, 154, 108, 0.35);
  border-radius: 14px;
  padding: 0.8rem;
  color: #3b332a;
}
.payment-box.active { display: block; }
.payment-box-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: #3b332a;
  margin-bottom: 0.25rem;
}
.payment-box-title svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex: 0 0 auto;
}
.payment-box-text {
  margin: 0;
  color: #7a6a58;
  font-size: 0.78rem;
  line-height: 1.35;
}
.payment-methods {
  display: none;
  gap: 0.55rem;
  margin-top: 0.55rem;
}
.payment-methods.active { display: grid; }
.btn-payment {
  border: none;
  background: linear-gradient(145deg, #2f281f, #17130f);
  color: #fffaf3;
  border-radius: 999px;
  padding: 0.62rem 1rem;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(47, 40, 31, 0.18);
}
.btn-payment:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(47, 40, 31, 0.24);
}
.payment-disabled-note {
  display: none;
  margin: 0.35rem 0 0;
  color: #9c8a76;
  font-size: 0.76rem;
  line-height: 1.35;
}
.payment-disabled-note.active { display: block; }

/* ============================
   MODAL QR
============================ */

.qr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 230;
}

.qr-modal {
  background: #fffaf3;
  padding: 1rem;
  border-radius: 18px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow);
}

.qr-modal img {
  width: 100%;
  border-radius: 12px;
}

.qr-close {
  margin-top: 0.8rem;
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
}

/* ============================
   NEWSLETTER
============================ */
.newsletter-box {
  background: var(--cream-2);
  border: 1px solid var(--border);
  padding: 1.4rem;
  border-radius: 16px;
  text-align: center;
}

.newsletter-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #3b332a;
  margin-bottom: 0.35rem;
}

.newsletter-desc {
  font-size: 0.9rem;
  color: #6a5f52;
  margin-bottom: 1rem;
}

.newsletter-form {
  display: flex;
  gap: 0.55rem;
  max-width: 520px;
  margin: 0 auto;
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 0.62rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #c9b9a5;
  background: #fffaf3;
}

.newsletter-btn {
  background: var(--gold);
  color: #fff;
  border: none;
  padding: 0.62rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.newsletter-btn:hover {
  background: var(--gold-dark);
}

/* ============================
   FOOTER
============================ */
footer {
  background: #1a1a1a;
  color: #f5f5f5;
  padding: 2.5rem 1rem;
  margin-top: 3rem;
  border-top: 3px solid var(--gold);
}

.footer-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

footer h3,
footer h4 {
  color: var(--gold);
  margin-top: 0;
}

footer p {
  opacity: 0.82;
  line-height: 1.5;
}

footer a {
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
}

footer a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

footer a:hover {
  opacity: 1;
  color: #f3d7a7;
}

.footer-copy {
  text-align: center;
  margin: 2rem 0 0;
  opacity: 0.6;
}

/* ============================
   RESPONSIVE
============================ */
@media (max-width: 760px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.1rem;
  }

  .carousel-overlay {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
  }

  .hero-pills {
    display: none;
  }

  .hero-brand-panel {
    width: 100%;
    min-width: 0;
    padding: 0.85rem;
  }

  .hero-brand-panel .logo-mark {
    width: 94px;
    height: 64px;
  }

  .hero-brand-comment {
    font-size: 0.82rem;
  }

  .carousel-arrow {
    display: none;
  }

  .section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .modal {
    grid-template-columns: 1fr;
  }

  .modal-img-wrap {
    min-height: 220px;
  }

  .newsletter-form,
  .cookie-banner,
  .discount-popup-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .discount-popup-btn,
  .discount-popup-link {
    width: 100%;
    text-align: center;
  }

  .floating-stack {
    right: 0.9rem;
    bottom: 0.9rem;
  }

  .floating-btn {
    width: 50px;
    height: 50px;
  }

  .cart-drawer {
    width: 100%;
  }

  .mobile-cart-primary-action {
    display: block;
    background: #fffaf3;
    border: 1px solid rgba(196, 154, 108, 0.32);
    border-radius: 14px;
    padding: 0.72rem;
  }

  .cart-actions .btn-primary {
    display: none;
  }

  .brand-slide .carousel-overlay {
    padding: 1.4rem 1rem;
  }

  .brand-slide-layout {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    text-align: center;
  }

  .brand-logo-column {
    min-height: 150px;
  }

  .brand-logo-badge .logo-mark {
    width: 220px;
    height: 148px;
  }

  .brand-slide .hero-cta {
    margin-left: auto;
    margin-right: auto;
  }

  .brand-tags {
    justify-content: center;
  }

  .brand-photo-card,
  .brand-photo-card img {
    min-height: 110px;
  }

  .logo-mark {
    width: 138px;
    height: 94px;
  }

  .logo-text {
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    white-space: normal;
    max-width: 120px;
    line-height: 1.25;
  }

  .delivery-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .delivery-icon {
    margin: 0 auto;
  }

  .delivery-tags {
    justify-content: center;
  }
}


/* ============================
   AJUSTES MOBILE COMPACTOS
   Optimizado para navegador en celular
============================ */
@media (max-width: 760px) {
  body {
    font-size: 15px;
  }

  header {
    position: sticky;
  }

  .header-inner {
    padding: 0.45rem 0.75rem 0.5rem;
    gap: 0.45rem;
  }

  .logo {
    gap: 0.55rem;
    width: 100%;
  }

  .logo-mark {
    width: 96px;
    height: 64px;
  }

  .logo-text {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    max-width: none;
    line-height: 1.2;
  }

  nav {
    gap: 0.72rem;
    padding-bottom: 0.22rem;
    scrollbar-width: thin;
  }

  nav a {
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .btn-outline {
    padding: 0.31rem 0.72rem;
    font-size: 0.76rem;
  }

  .nav-account-btn,
  .nav-cart-btn {
    white-space: nowrap;
  }

  main {
    padding: 0.7rem 0.78rem 7.25rem;
  }

  .carousel-container {
    min-height: 285px;
    height: 42vh;
    max-height: 360px;
    border-radius: 16px;
  }

  .carousel-overlay {
    padding: 1.05rem;
  }

  .hero-title {
    font-size: 1.45rem;
    line-height: 1.12;
    margin-bottom: 0.55rem;
  }

  .hero-sub {
    font-size: 0.84rem;
    line-height: 1.38;
    margin-bottom: 0.75rem;
  }

  .hero-tag {
    font-size: 0.64rem;
    margin-bottom: 0.45rem;
  }

  .hero-cta {
    padding: 0.47rem 0.86rem;
    font-size: 0.78rem;
  }

  .brand-slide .carousel-overlay {
    padding: 0.85rem;
  }

  .brand-logo-column {
    min-height: 112px;
  }

  .brand-logo-badge .logo-mark {
    width: 160px;
    height: 108px;
  }

  .brand-photo-card,
  .brand-photo-card img {
    min-height: 88px;
  }

  .marquee {
    margin: 0.7rem 0 1.25rem;
    padding: 0.48rem 0;
  }

  .marquee-inner {
    font-size: 0.78rem;
  }

  .section {
    margin-bottom: 1.45rem;
  }

  .section-header {
    gap: 0.5rem;
    margin-bottom: 0.65rem;
  }

  .section-title {
    font-size: 0.98rem;
    letter-spacing: 0.05em;
  }

  .section-sub {
    font-size: 0.75rem;
    line-height: 1.28;
  }

  .steps-grid,
  .faq-grid,
  .events-list,
  .checkout-grid {
    gap: 0.72rem;
  }

  .step-card,
  .faq-item {
    padding: 0.78rem;
    border-radius: 15px;
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: 0.74rem;
    margin-bottom: 0.48rem;
  }

  .step-title,
  .faq-item strong {
    font-size: 0.84rem;
  }

  .step-text,
  .faq-item span {
    font-size: 0.76rem;
    line-height: 1.38;
  }

  .menu-intro {
    padding: 0.78rem;
    gap: 0.62rem;
    border-radius: 14px;
    margin-bottom: 0.82rem;
  }

  .menu-intro-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 0.82rem;
  }

  .menu-intro-title {
    font-size: 0.78rem;
  }

  .menu-intro-text {
    font-size: 0.76rem;
    line-height: 1.38;
  }

  .catalog-page {
    padding: 0.82rem;
    border-radius: 18px;
  }

  .catalog-page-actions {
    justify-content: flex-start;
    gap: 0.45rem;
  }

  .product-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .product-card {
    border-radius: 14px;
  }

  .product-image-wrap {
    aspect-ratio: 16 / 10;
    max-height: 245px;
  }

  .product-body {
    padding: 0.66rem 0.72rem 0.72rem;
    gap: 0.28rem;
  }

  .product-name {
    font-size: 0.86rem;
  }

  .product-desc {
    font-size: 0.74rem;
    line-height: 1.32;
  }

  .product-price {
    font-size: 0.86rem;
  }

  .product-price-old {
    font-size: 0.70rem;
    padding: 0.05rem 0.32rem;
  }

  .product-actions {
    margin-top: 0.35rem;
    gap: 0.35rem;
    align-items: stretch;
  }

  .btn-add {
    padding: 0.36rem 0.6rem;
    font-size: 0.76rem;
  }

  .btn-quick {
    min-width: 74px;
    font-size: 0.70rem;
    align-self: center;
  }

  .badge-stack {
    top: 0.4rem;
    left: 0.4rem;
    max-width: calc(100% - 0.6rem);
    gap: 0.3rem;
  }

  /* Sistema uniforme de badges mobile: mismo ancho/alto/padding/radio
     para los 5 tipos, centrado por flex, siempre una sola linea
     (nowrap), font-size >=10px. El corazon de favoritos se movio a la
     esquina inferior derecha de la imagen (ver .favorite-btn mas abajo)
     para liberar todo el ancho superior para los badges: a 320px de
     viewport el corazon arriba dejaba solo ~50px utiles, insuficiente
     para "AGOTADO POR HOY" legible; abajo, los badges pueden usar casi
     todo el ancho de la imagen. Ancho (6.75rem) medido para que
     "AGOTADO POR HOY" -el texto mas largo hoy- entre completo con
     padding a 0.625rem/10px de font-size y letter-spacing 0.02em. */
  .badge {
    box-sizing: border-box;
    width: 6.75rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.19rem 0.25rem;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
    white-space: nowrap;
  }

  .favorite-btn {
    width: 40px;
    height: 40px;
    top: auto;
    bottom: 0.55rem;
    right: 0.55rem;
  }

  .favorite-btn svg {
    width: 19px;
    height: 19px;
  }

  .events-premium-copy {
    padding: 0.95rem;
  }

  .events-title {
    font-size: 1.08rem;
  }

  .events-text,
  .events-list li {
    font-size: 0.78rem;
  }

  .delivery-card {
    padding: 0.9rem;
    border-radius: 17px;
  }

  .delivery-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 1.2rem;
  }

  .delivery-title {
    font-size: 0.92rem;
  }

  .delivery-text {
    font-size: 0.76rem;
  }

  .delivery-tag {
    font-size: 0.68rem;
    padding: 0.26rem 0.56rem;
  }

  .floating-stack {
    right: 0.65rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    gap: 0.48rem;
  }

  .floating-btn {
    width: 44px;
    height: 44px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  }

  .floating-btn svg {
    width: 21px;
    height: 21px;
  }

  .floating-btn.qr {
    display: none;
  }

  .cart-count {
    min-width: 18px;
    height: 18px;
    font-size: 0.64rem;
  }

  .add-toast {
    bottom: 6.7rem;
  }

  .cart-drawer {
    width: 100%;
  }

  .cart-head,
  .cart-footer {
    padding: 0.78rem;
  }

  .cart-body {
    padding: 0.78rem;
  }

  .cart-item {
    gap: 0.55rem;
  }

  .cart-item img {
    width: 58px;
    height: 58px;
  }

  .cart-title {
    font-size: 0.88rem;
  }

  .cart-empty,
  .cart-note,
  .checkout-options,
  .payment-box {
    font-size: 0.76rem;
  }

  .checkout-review-modal,
  .auth-modal,
  .modal {
    border-radius: 18px;
  }
}

@media (max-width: 390px) {
  .logo-mark {
    width: 86px;
    height: 58px;
  }

  .logo-text {
    font-size: 0.58rem;
    letter-spacing: 0.07em;
  }

  nav {
    gap: 0.58rem;
  }

  nav a,
  .btn-outline {
    font-size: 0.72rem;
  }

  .product-image-wrap {
    max-height: 220px;
  }

  .hero-title {
    font-size: 1.28rem;
  }
}



/* ============================
   MOBILE ULTRA COMPACTO
   Ajuste agresivo para browser de celular
============================ */
@media (max-width: 760px) {
  html, body {
    overflow-x: hidden;
  }

  body {
    font-size: 14px;
  }

  header {
    position: sticky;
  }

  .header-inner {
    display: block;
    padding: 0.28rem 0.5rem 0.32rem;
  }

  .logo {
    width: 100%;
    gap: 0.42rem;
    margin-bottom: 0.18rem;
  }

  .logo-mark {
    width: 74px !important;
    height: 50px !important;
  }

  .logo-text {
    font-size: 0.48rem !important;
    letter-spacing: 0.075em !important;
    line-height: 1.1 !important;
  }

  nav {
    width: 100%;
    gap: 0.42rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.18rem;
  }

  nav a {
    flex: 0 0 auto;
    font-size: 0.70rem !important;
  }

  .btn-outline,
  .nav-account-btn,
  .nav-cart-btn {
    flex: 0 0 auto;
    font-size: 0.66rem !important;
    padding: 0.22rem 0.48rem !important;
    min-height: 0 !important;
  }

  .nav-cart-count {
    min-width: 0.9rem;
    height: 0.9rem;
    font-size: 0.55rem;
  }

  main {
    padding: 0.45rem 0.5rem 5.7rem !important;
  }

  .hero-carousel {
    margin-bottom: 0.72rem !important;
  }

  .carousel-container {
    min-height: 205px !important;
    height: 205px !important;
    max-height: 205px !important;
    border-radius: 13px !important;
  }

  .carousel-overlay {
    padding: 0.72rem !important;
  }

  .carousel-content {
    max-width: 92% !important;
  }

  .hero-tag {
    font-size: 0.50rem !important;
    margin-bottom: 0.3rem !important;
    letter-spacing: 0.11em !important;
  }

  .hero-title {
    font-size: 1.02rem !important;
    line-height: 1.12 !important;
    margin-bottom: 0.34rem !important;
    letter-spacing: -0.02em !important;
  }

  .hero-sub {
    font-size: 0.68rem !important;
    line-height: 1.24 !important;
    margin-bottom: 0.48rem !important;
    max-height: 3.6em !important;
    overflow: hidden !important;
  }

  .hero-cta {
    font-size: 0.64rem !important;
    padding: 0.32rem 0.62rem !important;
  }

  .carousel-arrow {
    display: none !important;
  }

  .carousel-dots {
    bottom: 0.42rem !important;
    gap: 0.28rem !important;
  }

  .carousel-dots button {
    width: 7px !important;
    height: 7px !important;
  }

  .brand-slide .carousel-overlay {
    padding: 0.52rem !important;
  }

  .brand-slide-layout {
    display: grid !important;
    grid-template-columns: 0.65fr 1.35fr !important;
    gap: 0.45rem !important;
    align-items: center !important;
  }

  .brand-logo-column {
    min-height: 0 !important;
  }

  .brand-logo-column::before {
    width: 115px !important;
    height: 82px !important;
  }

  .brand-logo-badge .logo-mark {
    width: 118px !important;
    height: 80px !important;
  }

  .brand-info-column {
    gap: 0.38rem !important;
  }

  .brand-slide .hero-title {
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0.28rem !important;
  }

  .brand-slide .hero-sub {
    font-size: 0.62rem !important;
    line-height: 1.22 !important;
    max-height: 3.8em !important;
  }

  .brand-tags {
    gap: 0.28rem !important;
    margin-top: 0.35rem !important;
  }

  .brand-tag {
    font-size: 0.52rem !important;
    padding: 0.18rem 0.38rem !important;
  }

  .brand-photo-card {
    display: none !important;
  }

  .marquee {
    margin: 0.45rem 0 0.8rem !important;
    padding: 0.34rem 0 !important;
  }

  .marquee-inner {
    font-size: 0.68rem !important;
  }

  .section {
    margin-bottom: 1.05rem !important;
  }

  .section-header {
    margin-bottom: 0.45rem !important;
    gap: 0.35rem !important;
  }

  .section-title {
    font-size: 0.82rem !important;
    letter-spacing: 0.055em !important;
  }

  .section-sub {
    font-size: 0.66rem !important;
    line-height: 1.22 !important;
  }

  .steps-grid,
  .faq-grid,
  .events-list,
  .checkout-grid {
    gap: 0.5rem !important;
  }

  .step-card {
    display: grid !important;
    grid-template-columns: 30px 1fr !important;
    column-gap: 0.55rem !important;
    align-items: start !important;
    padding: 0.56rem !important;
    border-radius: 13px !important;
  }

  .step-number {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.66rem !important;
    margin: 0 !important;
  }

  .step-title {
    font-size: 0.74rem !important;
    margin-bottom: 0.14rem !important;
  }

  .step-text {
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
  }

  .menu-intro,
  .catalog-page,
  .delivery-card,
  .faq-item,
  .checkout-options {
    padding: 0.58rem !important;
    border-radius: 12px !important;
  }

  .menu-intro-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    font-size: 0.68rem !important;
  }

  .menu-intro-title {
    font-size: 0.68rem !important;
  }

  .menu-intro-text,
  .faq-item span,
  .delivery-text {
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
  }

  .faq-item strong,
  .delivery-title {
    font-size: 0.74rem !important;
  }

  .product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }

  .product-card {
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    min-height: 0 !important;
    border-radius: 12px !important;
  }

  .product-image-wrap {
    aspect-ratio: auto !important;
    height: 136px !important;
    max-height: 136px !important;
  }

  .product-body {
    padding: 0.48rem 0.52rem !important;
    gap: 0.18rem !important;
  }

  .product-name {
    font-size: 0.74rem !important;
    line-height: 1.15 !important;
  }

  .product-desc {
    font-size: 0.62rem !important;
    line-height: 1.22 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-price {
    font-size: 0.74rem !important;
  }

  .product-price-old {
    font-size: 0.58rem !important;
    padding: 0.03rem 0.24rem !important;
    margin-right: 0.18rem !important;
  }

  .product-actions {
    margin-top: 0.22rem !important;
    gap: 0.25rem !important;
  }

  .btn-add {
    font-size: 0.66rem !important;
    padding: 0.28rem 0.42rem !important;
  }

  .btn-quick {
    font-size: 0.60rem !important;
    min-width: 58px !important;
  }

  .badge-stack {
    top: 0.4rem !important;
    left: 0.4rem !important;
    max-width: calc(100% - 0.6rem) !important;
    gap: 0.3rem !important;
  }

  .badge {
    box-sizing: border-box !important;
    width: 6.75rem !important;
    height: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.19rem 0.25rem !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .favorite-btn {
    width: 30px !important;
    height: 30px !important;
    top: auto !important;
    bottom: 0.38rem !important;
    right: 0.38rem !important;
  }

  .favorite-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  .events-premium-card {
    border-radius: 15px !important;
  }

  .events-premium-copy {
    padding: 0.65rem !important;
  }

  .events-kicker {
    font-size: 0.56rem !important;
    margin-bottom: 0.28rem !important;
  }

  .events-title {
    font-size: 0.88rem !important;
    margin-bottom: 0.28rem !important;
  }

  .events-text,
  .events-list span {
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
  }

  .events-premium-image {
    min-height: 132px !important;
  }

  .delivery-card {
    grid-template-columns: 44px 1fr !important;
    text-align: left !important;
    gap: 0.55rem !important;
  }

  .delivery-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    font-size: 0.95rem !important;
  }

  .delivery-tags {
    justify-content: flex-start !important;
    gap: 0.3rem !important;
  }

  .delivery-tag {
    font-size: 0.56rem !important;
    padding: 0.18rem 0.38rem !important;
  }

  .newsletter-box {
    padding: 0.8rem !important;
    border-radius: 13px !important;
  }

  .newsletter-title {
    font-size: 0.86rem !important;
  }

  .newsletter-desc {
    font-size: 0.68rem !important;
  }

  .floating-stack {
    right: 0.58rem !important;
    bottom: calc(0.62rem + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0.42rem !important;
  }

  .floating-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .floating-btn svg {
    width: 19px !important;
    height: 19px !important;
  }

  .cart-count {
    min-width: 17px !important;
    height: 17px !important;
    font-size: 0.58rem !important;
  }

  footer {
    padding: 1.2rem 0.65rem !important;
  }

  footer h3,
  footer h4 {
    font-size: 0.82rem !important;
  }

  footer p,
  footer a {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 390px) {
  .hero-title {
    font-size: 0.94rem !important;
  }

  .hero-sub {
    font-size: 0.64rem !important;
  }

  .carousel-container {
    min-height: 190px !important;
    height: 190px !important;
    max-height: 190px !important;
  }

  .product-image-wrap {
    height: 122px !important;
    max-height: 122px !important;
  }

  .product-name {
    font-size: 0.70rem !important;
  }

  .product-desc {
    font-size: 0.58rem !important;
  }
}



/* ============================
   FIX MOBILE: CÓMO COMPRAR COMPACTO
   Corrige texto angosto y tarjetas excesivamente altas
============================ */
@media (max-width: 760px) {
  #como-comprar.section {
    margin-bottom: 1rem !important;
  }

  #como-comprar .section-header {
    margin-bottom: 0.45rem !important;
  }

  #como-comprar .section-title {
    font-size: 0.92rem !important;
  }

  #como-comprar .section-sub {
    font-size: 0.68rem !important;
  }

  #como-comprar .steps-grid,
  .steps-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.48rem !important;
  }

  #como-comprar .step-card,
  .step-card {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 0.55rem !important;
    row-gap: 0.08rem !important;
    align-items: start !important;
    padding: 0.56rem 0.62rem !important;
    border-radius: 12px !important;
    min-height: auto !important;
  }

  #como-comprar .step-number,
  .step-number {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin: 0 !important;
    font-size: 0.66rem !important;
  }

  #como-comprar .step-title,
  .step-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 0 0.08rem !important;
    font-size: 0.76rem !important;
    line-height: 1.15 !important;
  }

  #como-comprar .step-text,
  .step-text {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 0.66rem !important;
    line-height: 1.23 !important;
    max-width: none !important;
  }
}

@media (max-width: 380px) {
  #como-comprar .step-card,
  .step-card {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    column-gap: 0.48rem !important;
    padding: 0.5rem 0.54rem !important;
  }

  #como-comprar .step-number,
  .step-number {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    font-size: 0.6rem !important;
  }

  #como-comprar .step-title,
  .step-title {
    font-size: 0.72rem !important;
  }

  #como-comprar .step-text,
  .step-text {
    font-size: 0.62rem !important;
  }
}



/* ============================
   DETALLE DE PRODUCTO / GALERÍA / REDES
   Agregado para última versión
============================ */
.modal-gallery {
  position: relative;
  min-height: 330px;
}

.modal-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(47, 40, 31, 0.58);
  color: #fffaf3;
  cursor: pointer;
  z-index: 3;
  font-size: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-gallery-arrow.left { left: 0.7rem; }
.modal-gallery-arrow.right { right: 0.7rem; }

.modal-thumbs {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  gap: 0.45rem;
  z-index: 3;
}

.modal-thumb {
  width: 54px;
  height: 42px;
  border-radius: 10px;
  border: 2px solid rgba(255, 250, 243, 0.68);
  background-size: cover;
  background-position: center;
  opacity: 0.72;
  cursor: pointer;
}

.modal-thumb.active {
  border-color: var(--gold);
  opacity: 1;
}

.modal-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.1rem 0 1rem;
}

.modal-info-pill {
  background: #fff;
  border: 1px solid rgba(196, 154, 108, 0.24);
  border-radius: 14px;
  padding: 0.58rem;
}

.modal-info-pill strong {
  display: block;
  color: #3b332a;
  font-size: 0.76rem;
  margin-bottom: 0.18rem;
}

.modal-info-pill span {
  display: block;
  color: #6a5f52;
  font-size: 0.74rem;
  line-height: 1.3;
}

.product-detail-page {
  display: none;
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  border: 1px solid rgba(196, 154, 108, 0.32);
  border-radius: 24px;
  padding: 1.2rem;
  box-shadow: 0 12px 30px rgba(43, 38, 32, 0.07);
}

.product-detail-page.active {
  display: block;
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 1.2rem;
  align-items: start;
}

.product-detail-media {
  background: #fff;
  border: 1px solid rgba(196, 154, 108, 0.24);
  border-radius: 22px;
  padding: 0.75rem;
  box-shadow: 0 12px 26px rgba(43, 38, 32, 0.06);
}

.product-detail-main-gallery {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.product-detail-main-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

.product-detail-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 250, 243, 0.72);
  background: rgba(43, 38, 32, 0.58);
  color: #fffaf3;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  z-index: 2;
  font-size: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.product-detail-gallery-arrow:hover {
  background: rgba(43, 38, 32, 0.78);
  transform: translateY(-50%) scale(1.04);
}

.product-detail-gallery-arrow.left { left: 0.75rem; }
.product-detail-gallery-arrow.right { right: 0.75rem; }

.product-detail-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.product-detail-thumb {
  height: 70px;
  border-radius: 14px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.product-detail-thumb.active {
  border-color: var(--gold);
}

.product-detail-content {
  display: grid;
  gap: 0.85rem;
}

.product-detail-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a97946;
  font-weight: 850;
}

.product-detail-title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.08;
  color: #3b332a;
}

.product-detail-price {
  color: var(--gold-dark);
  font-size: 1.1rem;
  font-weight: 850;
}

.product-detail-desc {
  color: #6a5f52;
  line-height: 1.55;
  margin: 0;
}

.product-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.product-detail-info-card {
  background: #fff;
  border: 1px solid rgba(196, 154, 108, 0.22);
  border-radius: 16px;
  padding: 0.82rem;
}

.product-detail-info-card strong {
  display: block;
  color: #3b332a;
  font-size: 0.82rem;
  margin-bottom: 0.28rem;
}

.product-detail-info-card span {
  color: #6a5f52;
  font-size: 0.8rem;
  line-height: 1.42;
}

.product-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.admin-dynamic-anchor {
  display: grid;
  gap: 2.3rem;
}

.social-box {
  background: linear-gradient(135deg, #2f281f 0%, #17130f 100%);
  color: #fffaf3;
  border-radius: 24px;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(196, 154, 108, 0.36);
  box-shadow: 0 16px 32px rgba(43, 38, 32, 0.13);
}

.social-kicker {
  color: #f3d7a7;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 850;
  margin-bottom: 0.35rem;
}

.social-title {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  line-height: 1.12;
}

.social-text {
  margin: 0.55rem 0 0;
  color: rgba(255, 250, 243, 0.78);
  font-size: 0.9rem;
  line-height: 1.45;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: flex-end;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border-radius: 999px;
  padding: 0.58rem 0.86rem;
  background: rgba(255, 250, 243, 0.08);
  border: 1px solid rgba(255, 250, 243, 0.18);
  color: #fffaf3;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 750;
}

.social-link:hover {
  background: rgba(196, 154, 108, 0.25);
  color: #fff;
}

.social-dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.footer-social-list {
  display: grid;
  gap: 0.35rem;
}

.footer-social-list a {
  display: inline-flex;
  width: fit-content;
}

@media (max-width: 760px) {
  .modal {
    max-height: calc(100vh - 1rem);
    overflow: auto;
  }

  .modal-gallery {
    min-height: 210px;
  }

  .modal-info-grid,
  .product-detail-info-grid {
    grid-template-columns: 1fr;
  }

  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  .product-detail-page {
    padding: 0.85rem;
    border-radius: 18px;
  }

  .product-detail-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .product-detail-thumb {
    height: 52px;
  }

  .product-detail-actions .btn-primary,
  .product-detail-actions .btn-secondary {
    width: 100%;
  }

  .social-box {
    grid-template-columns: 1fr;
    padding: 1rem;
    border-radius: 18px;
  }

  .social-links {
    justify-content: flex-start;
  }

  .social-link {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.52rem 0.7rem;
  }
}


/* ============================
   ADMIN DEMO / FACTURACIÓN ARCA-READY
   Esta sección es solo maqueta local. En producción irá separada y protegida.
============================ */
.admin-demo-panel {
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  border: 1px solid rgba(196, 154, 108, 0.32);
  border-radius: 22px;
  padding: 1rem;
  box-shadow: 0 12px 28px rgba(43, 38, 32, 0.06);
}
.admin-demo-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.admin-demo-kicker { color:#a87842; font-size:.72rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.25rem; }
.admin-demo-title { margin:0; color:#2f281f; font-size:1.2rem; line-height:1.2; }
.admin-demo-text { margin:.35rem 0 0; color:#6a5f52; font-size:.88rem; line-height:1.45; max-width:760px; }
.admin-demo-status { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.4rem .75rem; background:#2f281f; color:#fffaf3; font-size:.75rem; font-weight:800; white-space:nowrap; }
.admin-demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; }
.admin-demo-card { background:rgba(255,255,255,.82); border:1px solid rgba(228,215,199,.95); border-radius:18px; padding:.9rem; display:grid; gap:.65rem; }
.admin-demo-card.wide { grid-column:span 2; }
.admin-card-title { font-weight:850; color:#3b332a; font-size:.93rem; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.admin-card-sub { color:#7a6a58; font-size:.8rem; line-height:1.4; }
.admin-config-list, .admin-invoice-list, .admin-checklist { display:grid; gap:.45rem; }
.admin-config-row, .admin-invoice-row, .admin-check-row { display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem; border-bottom:1px dashed rgba(196,154,108,.22); padding-bottom:.42rem; color:#4b4035; font-size:.8rem; line-height:1.35; }
.admin-config-row:last-child, .admin-invoice-row:last-child, .admin-check-row:last-child { border-bottom:0; padding-bottom:0; }
.admin-config-row strong, .admin-invoice-row strong, .admin-check-row strong { color:#2f281f; }
.admin-pill { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.2rem .48rem; font-size:.68rem; font-weight:850; white-space:nowrap; background:rgba(196,154,108,.16); color:#8a5c2e; border:1px solid rgba(196,154,108,.24); }
.admin-pill.ok { color:#276749; background:rgba(47,133,90,.12); border-color:rgba(47,133,90,.22); }
.admin-pill.pending { color:#975a16; background:rgba(214,158,46,.12); border-color:rgba(214,158,46,.28); }
.admin-actions { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; margin-top:.2rem; }
.admin-actions .btn-outline, .admin-actions .btn-primary, .admin-actions .btn-secondary { padding:.42rem .75rem; font-size:.78rem; }
.admin-note-box { background:rgba(47,40,31,.05); border:1px dashed rgba(196,154,108,.35); border-radius:14px; padding:.75rem; color:#6a5f52; font-size:.8rem; line-height:1.45; }
.admin-empty { color:#8a7a66; font-size:.8rem; line-height:1.4; }
@media (max-width:780px) { .admin-demo-head{flex-direction:column;} .admin-demo-grid{grid-template-columns:1fr;} .admin-demo-card.wide{grid-column:span 1;} }
@media (max-width:520px) { .admin-demo-panel{padding:.82rem;border-radius:18px;} .admin-demo-title{font-size:1.02rem;} .admin-demo-text,.admin-card-sub,.admin-note-box{font-size:.78rem;} .admin-config-row,.admin-invoice-row,.admin-check-row{font-size:.76rem;} }


/* ============================
   ADMIN DEMO / SECCIONES MODULARES
============================ */
.admin-module-panel {
  margin-bottom: 1rem;
}

.admin-section-list {
  display: grid;
  gap: 0.7rem;
}

.admin-section-row {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(228,215,199,0.95);
  border-radius: 16px;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr 0.6fr auto;
  gap: 0.65rem;
  align-items: end;
}

.admin-section-row.disabled {
  opacity: 0.56;
}

.admin-field {
  display: grid;
  gap: 0.28rem;
}

.admin-field label {
  color: #7a6a58;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-input,
.admin-select {
  width: 100%;
  border: 1px solid #d8c7b1;
  border-radius: 11px;
  background: #fff;
  color: #3b332a;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.48rem 0.58rem;
}

.admin-mini-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #3b332a;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.admin-mini-toggle input {
  accent-color: #c49a6c;
}

.admin-section-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: stretch;
}

.admin-section-meta {
  color: #8a7a66;
  font-size: 0.72rem;
  line-height: 1.35;
}

.admin-preview-box {
  background: #fff;
  border: 1px dashed #d8c7b1;
  border-radius: 16px;
  padding: 0.8rem;
  color: #6a5f52;
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-preview-box strong {
  color: #3b332a;
}

.admin-module-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.admin-summary-item {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(228,215,199,0.95);
  border-radius: 16px;
  padding: 0.75rem;
}

.admin-summary-number {
  color: #2f281f;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
}

.admin-summary-label {
  margin-top: 0.25rem;
  color: #7a6a58;
  font-size: 0.74rem;
  font-weight: 750;
}

.admin-create-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.65rem;
  align-items: end;
}

@media (max-width: 920px) {
  .admin-section-row,
  .admin-create-grid,
  .admin-module-summary {
    grid-template-columns: 1fr;
  }

  .admin-section-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


/* ============================
   CURSOR PREMIUM + HOVER NAV
============================ */
@media (hover: hover) and (pointer: fine) {
  body.cursor-premium-enabled,
  body.cursor-premium-enabled a,
  body.cursor-premium-enabled button,
  body.cursor-premium-enabled input,
  body.cursor-premium-enabled textarea,
  body.cursor-premium-enabled select,
  body.cursor-premium-enabled [onclick] {
    cursor: none;
  }

  .cursor-dot,
  .cursor-ring {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.18s ease, width 0.18s ease, height 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  }

  .cursor-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(196, 154, 108, 0.14);
  }

  .cursor-ring {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(196, 154, 108, 0.72);
    mix-blend-mode: multiply;
  }

  body.cursor-premium-enabled.cursor-visible .cursor-dot,
  body.cursor-premium-enabled.cursor-visible .cursor-ring {
    opacity: 1;
  }

  body.cursor-hovering .cursor-dot {
    width: 10px;
    height: 10px;
    background: #2f281f;
  }

  body.cursor-hovering .cursor-ring {
    width: 52px;
    height: 52px;
    border-color: rgba(47, 40, 31, 0.48);
    background: rgba(196, 154, 108, 0.10);
  }
}

nav a,
nav .btn-outline {
  position: relative;
}

nav a::after,
nav .btn-outline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.45rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.18s ease;
}

nav a:hover::after,
nav .btn-outline:hover::after,
nav a:focus-visible::after,
nav .btn-outline:focus-visible::after {
  width: 70%;
}

nav a:hover,
nav .btn-outline:hover {
  color: var(--gold-dark);
}



/* ============================
   HEADER SIMPLE CORREGIDO V15
   Vuelve a menú limpio + botones Mi cuenta / Carrito tipo borde.
   Sin círculos decorativos ni botones blancos sobrepuestos.
============================ */
.header-simple-v15 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.72rem 1rem !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.logo-simple-v15 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1rem !important;
  text-decoration: none;
  color: var(--text);
  flex: 0 0 auto;
}

.logo-simple-v15 .logo-mark {
  width: 218px !important;
  height: 146px !important;
}

.logo-simple-v15 .logo-text {
  font-size: 0.68rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.19em !important;
  font-weight: 850 !important;
  text-transform: uppercase;
  color: #6f6152 !important;
  white-space: nowrap;
}

.nav-simple-v15 {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem !important;
  flex-wrap: nowrap;
}

.nav-simple-v15 a {
  color: #3b332a !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.nav-simple-v15 a:hover,
.nav-simple-v15 a:focus-visible {
  color: var(--gold-dark) !important;
}

.nav-simple-v15 .btn-outline {
  border: 1px solid var(--gold) !important;
  border-radius: 999px !important;
  padding: 0.42rem 0.9rem !important;
  color: #3b332a !important;
  background: transparent !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-shadow: none !important;
}

.nav-simple-v15 .btn-outline:hover,
.nav-simple-v15 .btn-outline:focus-visible {
  background: var(--gold) !important;
  color: #fff !important;
  border-color: var(--gold) !important;
}

.nav-simple-v15 .btn-outline:hover .nav-cart-count,
.nav-simple-v15 .btn-outline:focus-visible .nav-cart-count {
  background: #fff !important;
  color: var(--gold-dark) !important;
}

.back-to-top {
  top: auto !important;
  bottom: 92px !important;
  right: 86px !important;
  padding: 0.52rem 0.82rem !important;
  font-size: 0.84rem !important;
  border-radius: 999px !important;
  min-width: 0 !important;
  max-width: 150px !important;
}

#inicio,
#como-comprar,
#con-descuento,
#ofertas,
#menu,
#mas-vendidos,
#mas-visitados,
#low-carb,
#eventos,
#envios,
#catalogPage,
#productDetailPage,
#admin-demo,
#adminBillingPanel {
  scroll-margin-top: 126px !important;
}

@media (max-width: 940px) {
  .header-simple-v15 {
    gap: 0.9rem;
  }

  .logo-simple-v15 .logo-mark {
    width: 190px !important;
    height: 127px !important;
  }

  .logo-simple-v15 .logo-text {
    font-size: 0.62rem !important;
    letter-spacing: 0.16em !important;
  }

  .nav-simple-v15 {
    gap: 0.72rem !important;
  }

  .nav-simple-v15 a {
    font-size: 0.82rem !important;
  }

  .nav-simple-v15 .btn-outline {
    padding: 0.4rem 0.72rem !important;
    font-size: 0.76rem !important;
  }
}

@media (max-width: 760px) {
  .header-simple-v15 {
    flex-wrap: wrap;
    align-items: center;
    padding: 0.68rem 0.78rem !important;
    gap: 0.52rem;
  }

  .logo-simple-v15 {
    width: 100%;
    gap: 0.72rem !important;
  }

  .logo-simple-v15 .logo-mark {
    width: 172px !important;
    height: 115px !important;
  }

  .logo-simple-v15 .logo-text {
    font-size: 0.56rem !important;
    letter-spacing: 0.12em !important;
  }

  .nav-simple-v15 {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 0.42rem 0.35rem !important;
    align-items: center;
  }

  .nav-simple-v15 a {
    text-align: center;
    font-size: 0.72rem !important;
  }

  .nav-simple-v15 .nav-account-btn,
  .nav-simple-v15 .nav-cart-btn {
    grid-column: span 2;
    justify-self: end;
  }

  .nav-simple-v15 .nav-account-btn {
    grid-column: 4 / 5;
  }

  .nav-simple-v15 .nav-cart-btn {
    grid-column: 5 / 6;
  }

  .nav-simple-v15 .btn-outline {
    min-height: 38px;
    padding: 0.42rem 0.62rem !important;
    font-size: 0.70rem !important;
  }

  .back-to-top {
    right: 72px !important;
    bottom: 88px !important;
    padding: 0.48rem 0.72rem !important;
    font-size: 0.78rem !important;
    max-width: 130px !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 170px !important;
  }
}



/* ============================
   AJUSTE V16: PROPORCIÓN LOGO/TEXTO + VOLVER ARRIBA
============================ */
.logo-simple-v15 {
  gap: 1.1rem !important;
}

.logo-simple-v15 .logo-mark {
  width: 270px !important;
  height: 180px !important;
}

.logo-simple-v15 .logo-text {
  font-size: 0.62rem !important;
  line-height: 1.08 !important;
  letter-spacing: 0.20em !important;
  color: #6f6152 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.back-to-top {
  position: fixed !important;
  right: 86px !important;
  bottom: 92px !important;
  top: auto !important;
  z-index: 210 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #2f281f !important;
  color: #fffaf3 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
  padding: 0.52rem 0.82rem !important;
  font-size: 0.84rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.02em !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  min-width: 0 !important;
  max-width: 150px !important;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 940px) {
  .logo-simple-v15 .logo-mark {
    width: 230px !important;
    height: 154px !important;
  }

  .logo-simple-v15 .logo-text {
    font-size: 0.58rem !important;
    letter-spacing: 0.17em !important;
  }
}

@media (max-width: 760px) {
  .logo-simple-v15 {
    gap: 0.82rem !important;
  }

  .logo-simple-v15 .logo-mark {
    width: 204px !important;
    height: 136px !important;
  }

  .logo-simple-v15 .logo-text {
    font-size: 0.52rem !important;
    letter-spacing: 0.12em !important;
    max-width: none !important;
  }

  .back-to-top {
    right: 72px !important;
    bottom: 88px !important;
    padding: 0.48rem 0.72rem !important;
    font-size: 0.80rem !important;
    max-width: 136px !important;
  }
}

@media (max-width: 420px) {
  .logo-simple-v15 .logo-mark {
    width: 188px !important;
    height: 126px !important;
  }

  .logo-simple-v15 .logo-text {
    font-size: 0.49rem !important;
    letter-spacing: 0.10em !important;
  }
}



/* ============================
   HEADER FINAL V17: RESPONSIVE ORDENADO + VOLVER ARRIBA CENTRADO
============================ */
.header-final-v17 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.58rem 1rem 0.72rem !important;
  display: block !important;
}

.header-actions-v17 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.62rem;
  margin-bottom: 0.26rem;
}

.header-actions-v17 .btn-outline,
.header-actions-v17 .btn-outline:visited {
  border: 1px solid var(--gold) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #3b332a !important;
  padding: 0.42rem 0.9rem !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.header-actions-v17 .btn-outline:hover,
.header-actions-v17 .btn-outline:focus-visible {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}

.header-actions-v17 .btn-outline:hover .nav-cart-count,
.header-actions-v17 .btn-outline:focus-visible .nav-cart-count {
  background: #fffaf3 !important;
  color: var(--gold-dark) !important;
}

.header-main-v17 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.35rem;
}

.logo-final-v17 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1.15rem !important;
  flex: 0 0 auto;
  min-width: 0;
}

.logo-final-v17 .logo-mark {
  width: 245px !important;
  height: 164px !important;
}

.logo-final-v17 .logo-text {
  font-size: 0.58rem !important;
  line-height: 1.06 !important;
  letter-spacing: 0.20em !important;
  color: #6f6152 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}

.nav-final-v17 {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem !important;
  flex: 1 1 auto;
  min-width: 0;
}

.nav-final-v17 a,
.nav-final-v17 a:visited {
  color: #3b332a !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0.24rem 0 !important;
  position: relative;
}

.nav-final-v17 a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.22rem;
  height: 2px;
  border-radius: 999px;
  background: var(--gold);
  opacity: 0;
  transform: scaleX(0.65);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-final-v17 a:hover,
.nav-final-v17 a:focus-visible {
  color: var(--gold-dark) !important;
}

.nav-final-v17 a:hover::after,
.nav-final-v17 a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Volver arriba centrado */
.back-to-top {
  left: 50% !important;
  right: auto !important;
  bottom: 92px !important;
  top: auto !important;
  transform: translate(-50%, 10px) !important;
  z-index: 210 !important;
  padding: 0.52rem 0.86rem !important;
  font-size: 0.84rem !important;
  max-width: 150px !important;
}

.back-to-top.show {
  transform: translate(-50%, 0) !important;
}

#inicio,
#como-comprar,
#con-descuento,
#ofertas,
#menu,
#mas-vendidos,
#mas-visitados,
#low-carb,
#eventos,
#envios,
#catalogPage,
#productDetailPage,
#admin-demo,
#adminBillingPanel {
  scroll-margin-top: 150px !important;
}

@media (max-width: 960px) {
  .header-main-v17 {
    gap: 0.9rem;
  }

  .logo-final-v17 {
    gap: 0.8rem !important;
  }

  .logo-final-v17 .logo-mark {
    width: 205px !important;
    height: 137px !important;
  }

  .logo-final-v17 .logo-text {
    font-size: 0.52rem !important;
    letter-spacing: 0.15em !important;
  }

  .nav-final-v17 {
    gap: 0.72rem !important;
  }

  .nav-final-v17 a {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 760px) {
  .header-final-v17 {
    padding: 0.58rem 0.72rem 0.68rem !important;
  }

  .header-actions-v17 {
    margin-bottom: 0.36rem;
    gap: 0.46rem;
  }

  .header-actions-v17 .btn-outline {
    padding: 0.42rem 0.72rem !important;
    font-size: 0.74rem !important;
  }

  .header-main-v17 {
    display: grid;
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
  }

  .logo-final-v17 {
    gap: 0.56rem !important;
    min-width: 0;
  }

  .logo-final-v17 .logo-mark {
    width: 160px !important;
    height: 107px !important;
  }

  .logo-final-v17 .logo-text {
    font-size: 0.46rem !important;
    letter-spacing: 0.10em !important;
    white-space: normal !important;
    max-width: 104px;
  }

  .nav-final-v17 {
    justify-content: flex-end;
    align-content: center;
    gap: 0.38rem 0.62rem !important;
    flex-wrap: wrap;
  }

  .nav-final-v17 a {
    font-size: 0.74rem !important;
    padding: 0.18rem 0 !important;
  }

  .back-to-top {
    left: 50% !important;
    right: auto !important;
    bottom: 88px !important;
    transform: translate(-50%, 10px) !important;
    padding: 0.48rem 0.72rem !important;
    font-size: 0.8rem !important;
  }

  .back-to-top.show {
    transform: translate(-50%, 0) !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 175px !important;
  }
}

@media (max-width: 430px) {
  .header-main-v17 {
    grid-template-columns: minmax(164px, auto) minmax(0, 1fr);
    gap: 0.44rem;
  }

  .logo-final-v17 .logo-mark {
    width: 142px !important;
    height: 95px !important;
  }

  .logo-final-v17 .logo-text {
    font-size: 0.42rem !important;
    letter-spacing: 0.08em !important;
    max-width: 92px;
  }

  .nav-final-v17 {
    gap: 0.28rem 0.5rem !important;
  }

  .nav-final-v17 a {
    font-size: 0.69rem !important;
  }
}



/* ============================
   HEADER V18: AJUSTE FINAL ESPACIOS / LOGO / BOTONES
============================ */
header {
  background: var(--bg) !important; /* mismo fondo que el body: #faf7f3 */
  backdrop-filter: none !important;
}

.header-final-v17 {
  max-width: 1200px;
  padding: 0.42rem 1rem 0.55rem !important;
}

.header-actions-v17 {
  margin-bottom: 0.08rem !important;
  gap: 0.58rem !important;
}

/* Ingresar / Carrito con la misma familia visual que "Más descuentos" */
.header-actions-v17 .btn-outline,
.header-actions-v17 .btn-outline:visited {
  padding: 0.38rem 0.85rem !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: #3b332a !important;
  border: 1px solid var(--gold) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.header-actions-v17 .btn-outline:hover,
.header-actions-v17 .btn-outline:focus-visible {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
}

.header-actions-v17 .nav-cart-count {
  font-weight: 800 !important;
}

.header-main-v17 {
  justify-content: flex-start !important;
  gap: 2.1rem !important;
}

.logo-final-v17 {
  gap: 0.95rem !important;
}

.logo-final-v17 .logo-mark {
  width: 275px !important;
  height: 184px !important;
}

.logo-final-v17 .logo-text {
  font-size: 0.56rem !important;
  letter-spacing: 0.18em !important;
  font-weight: 850 !important;
}

.nav-final-v17 {
  flex: 0 1 auto !important;
  margin-left: clamp(0.35rem, 2.4vw, 2.4rem) !important;
  gap: 1rem !important;
}

.nav-final-v17 a,
.nav-final-v17 a:visited {
  font-size: 0.92rem !important;
  font-weight: 850 !important;
}

.back-to-top {
  left: 50% !important;
  right: auto !important;
  bottom: 88px !important;
  transform: translate(-50%, 10px) !important;
}

.back-to-top.show {
  transform: translate(-50%, 0) !important;
}

#inicio,
#como-comprar,
#con-descuento,
#ofertas,
#menu,
#mas-vendidos,
#mas-visitados,
#low-carb,
#eventos,
#envios,
#catalogPage,
#productDetailPage,
#admin-demo,
#adminBillingPanel {
  scroll-margin-top: 138px !important;
}

@media (max-width: 960px) {
  .header-final-v17 {
    padding: 0.5rem 0.82rem 0.62rem !important;
  }

  .header-main-v17 {
    gap: 1rem !important;
  }

  .logo-final-v17 .logo-mark {
    width: 220px !important;
    height: 147px !important;
  }

  .logo-final-v17 .logo-text {
    font-size: 0.5rem !important;
    letter-spacing: 0.14em !important;
  }

  .nav-final-v17 {
    margin-left: 0.6rem !important;
    gap: 0.68rem !important;
  }

  .nav-final-v17 a {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 760px) {
  .header-final-v17 {
    padding: 0.52rem 0.72rem 0.64rem !important;
  }

  .header-actions-v17 {
    margin-bottom: 0.24rem !important;
    gap: 0.46rem !important;
  }

  .header-actions-v17 .btn-outline {
    padding: 0.38rem 0.74rem !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
  }

  .header-main-v17 {
    display: grid !important;
    grid-template-columns: minmax(215px, auto) minmax(0, 1fr) !important;
    gap: 0.52rem !important;
    align-items: center !important;
  }

  .logo-final-v17 {
    gap: 0.58rem !important;
  }

  .logo-final-v17 .logo-mark {
    width: 178px !important;
    height: 119px !important;
  }

  .logo-final-v17 .logo-text {
    font-size: 0.44rem !important;
    letter-spacing: 0.09em !important;
    white-space: normal !important;
    max-width: 105px !important;
  }

  .nav-final-v17 {
    margin-left: 0 !important;
    justify-content: flex-end !important;
    align-content: center !important;
    gap: 0.34rem 0.56rem !important;
    flex-wrap: wrap !important;
  }

  .nav-final-v17 a {
    font-size: 0.73rem !important;
    padding: 0.16rem 0 !important;
  }

  .back-to-top {
    left: 50% !important;
    right: auto !important;
    bottom: 86px !important;
    transform: translate(-50%, 10px) !important;
  }

  .back-to-top.show {
    transform: translate(-50%, 0) !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 166px !important;
  }
}

@media (max-width: 430px) {
  .header-main-v17 {
    grid-template-columns: minmax(190px, auto) minmax(0, 1fr) !important;
    gap: 0.42rem !important;
  }

  .logo-final-v17 .logo-mark {
    width: 158px !important;
    height: 106px !important;
  }

  .logo-final-v17 .logo-text {
    font-size: 0.40rem !important;
    letter-spacing: 0.075em !important;
    max-width: 92px !important;
  }

  .nav-final-v17 {
    gap: 0.26rem 0.46rem !important;
  }

  .nav-final-v17 a {
    font-size: 0.68rem !important;
  }
}



/* ============================
   HEADER V21: BOTONES SUPERIORES IGUALES A "MÁS DESCUENTOS"
   Estado normal transparente, sin fondo crema ni dorado fijo.
============================ */
.header-actions-v17 .btn-outline,
.header-actions-v17 .btn-outline:visited,
.header-actions-v17 .btn-outline:focus,
.header-actions-v17 .btn-outline:active {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  color: #3b332a !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.header-actions-v17 .btn-outline:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fffaf3 !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.header-actions-v17 .btn-outline:focus-visible {
  background: transparent !important;
  border-color: var(--gold) !important;
  color: #3b332a !important;
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}

.header-actions-v17 .nav-cart-count {
  background: rgba(196, 154, 108, 0.14) !important;
  color: var(--gold-dark) !important;
}

.header-actions-v17 .btn-outline:hover .nav-cart-count {
  background: #fffaf3 !important;
  color: var(--gold-dark) !important;
}

.header-actions-v17 .btn-outline:focus-visible .nav-cart-count {
  background: rgba(196, 154, 108, 0.14) !important;
  color: var(--gold-dark) !important;
}



/* ============================
   HEADER V22: COLOR Y PESO DE TEXTO DE BOTONES SUPERIORES
   Igualados visualmente al botón "Más descuentos".
============================ */
.header-actions-v17 .btn-outline,
.header-actions-v17 .btn-outline:visited,
.header-actions-v17 .btn-outline:focus,
.header-actions-v17 .btn-outline:active {
  color: #3b332a !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: geometricPrecision !important;
}

.header-actions-v17 .btn-outline:hover {
  color: #fffaf3 !important;
  font-weight: 400 !important;
}

.header-actions-v17 .btn-outline:focus-visible {
  color: #3b332a !important;
  font-weight: 400 !important;
}

.header-actions-v17 .nav-cart-count {
  font-weight: 400 !important;
}



/* ============================
   HEADER V23: MOBILE COMPACTO
   Logo + bajada agrupados a la izquierda; menú simple a la derecha.
============================ */
@media (max-width: 760px) {
  .header-final-v17 {
    padding: 0.42rem 0.72rem 0.54rem !important;
  }

  .header-actions-v17 {
    justify-content: flex-end !important;
    gap: 0.42rem !important;
    margin-bottom: 0.14rem !important;
  }

  .header-actions-v17 .btn-outline {
    padding: 0.34rem 0.68rem !important;
    font-size: 0.76rem !important;
    line-height: 1.08 !important;
  }

  .header-main-v17 {
    display: grid !important;
    grid-template-columns: minmax(150px, 0.46fr) minmax(150px, 0.54fr) !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .logo-final-v17 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0.08rem !important;
    min-width: 0 !important;
  }

  .logo-final-v17 .logo-mark {
    width: 154px !important;
    height: 95px !important;
  }

  .logo-final-v17 .logo-text {
    display: block !important;
    max-width: 154px !important;
    margin-left: 0.25rem !important;
    white-space: nowrap !important;
    font-size: 0.43rem !important;
    line-height: 1 !important;
    letter-spacing: 0.085em !important;
  }

  .nav-final-v17 {
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: end !important;
    justify-items: start !important;
    align-content: center !important;
    gap: 0.36rem 0.62rem !important;
    margin-left: 0 !important;
    flex-wrap: initial !important;
    text-align: left !important;
  }

  .nav-final-v17 a,
  .nav-final-v17 a:visited {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
    padding: 0.12rem 0 !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 150px !important;
  }
}

@media (max-width: 430px) {
  .header-final-v17 {
    padding: 0.38rem 0.72rem 0.5rem !important;
  }

  .header-actions-v17 {
    margin-bottom: 0.08rem !important;
  }

  .header-actions-v17 .btn-outline {
    padding: 0.32rem 0.62rem !important;
    font-size: 0.74rem !important;
  }

  .header-main-v17 {
    grid-template-columns: minmax(142px, 0.45fr) minmax(145px, 0.55fr) !important;
    gap: 0.42rem !important;
  }

  .logo-final-v17 .logo-mark {
    width: 146px !important;
    height: 90px !important;
  }

  .logo-final-v17 .logo-text {
    max-width: 146px !important;
    margin-left: 0.18rem !important;
    font-size: 0.405rem !important;
    letter-spacing: 0.07em !important;
  }

  .nav-final-v17 {
    gap: 0.32rem 0.54rem !important;
  }

  .nav-final-v17 a,
  .nav-final-v17 a:visited {
    font-size: 0.69rem !important;
  }
}

@media (max-width: 370px) {
  .header-main-v17 {
    grid-template-columns: minmax(132px, 0.43fr) minmax(140px, 0.57fr) !important;
    gap: 0.34rem !important;
  }

  .logo-final-v17 .logo-mark {
    width: 136px !important;
    height: 84px !important;
  }

  .logo-final-v17 .logo-text {
    max-width: 136px !important;
    font-size: 0.38rem !important;
    letter-spacing: 0.06em !important;
  }

  .nav-final-v17 {
    gap: 0.3rem 0.46rem !important;
  }

  .nav-final-v17 a,
  .nav-final-v17 a:visited {
    font-size: 0.66rem !important;
  }
}



/* ============================
   HEADER V24: MOBILE LOGO ARRIBA + TEXTO DEBAJO + MENÚ MÁS A LA IZQUIERDA
   Mantiene desktop intacto.
============================ */
@media (max-width: 760px) {
  .header-final-v17 {
    padding: 0.36rem 0.72rem 0.44rem !important;
  }

  .header-actions-v17 {
    margin-bottom: 0 !important;
  }

  .header-main-v17 {
    display: grid !important;
    grid-template-columns: minmax(132px, 0.40fr) minmax(0, 0.60fr) !important;
    gap: 0.18rem !important;
    align-items: start !important;
    margin-top: -0.08rem !important;
  }

  .logo-final-v17 {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    transform: translateY(-0.34rem) !important;
    max-width: 148px !important;
  }

  .logo-final-v17 .logo-mark {
    width: 148px !important;
    height: 70px !important;
    margin: 0 0 -0.06rem 0 !important;
    overflow: visible !important;
  }

  .logo-final-v17 .logo-base,
  .logo-final-v17 .logo-smoke {
    inset: -12px 0 -14px 0 !important;
    background-position: left center !important;
  }

  .logo-final-v17 .logo-text {
    display: block !important;
    margin: 0 0 0 0.32rem !important;
    max-width: 148px !important;
    white-space: nowrap !important;
    font-size: 0.405rem !important;
    line-height: 1 !important;
    letter-spacing: 0.07em !important;
  }

  .nav-final-v17 {
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: start !important;
    justify-items: start !important;
    align-content: start !important;
    align-self: start !important;
    margin-left: 0 !important;
    padding-top: 1.18rem !important;
    gap: 0.38rem 0.62rem !important;
    text-align: left !important;
    transform: translateX(-0.12rem) !important;
  }

  .nav-final-v17 a,
  .nav-final-v17 a:visited {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
    padding: 0.10rem 0 !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 136px !important;
  }
}

@media (max-width: 430px) {
  .header-final-v17 {
    padding: 0.34rem 0.72rem 0.42rem !important;
  }

  .header-actions-v17 .btn-outline {
    padding: 0.32rem 0.62rem !important;
    font-size: 0.74rem !important;
  }

  .header-main-v17 {
    grid-template-columns: minmax(126px, 0.38fr) minmax(0, 0.62fr) !important;
    gap: 0.12rem !important;
  }

  .logo-final-v17 {
    max-width: 140px !important;
    transform: translateY(-0.38rem) !important;
  }

  .logo-final-v17 .logo-mark {
    width: 140px !important;
    height: 66px !important;
  }

  .logo-final-v17 .logo-base,
  .logo-final-v17 .logo-smoke {
    inset: -12px 0 -13px 0 !important;
  }

  .logo-final-v17 .logo-text {
    max-width: 140px !important;
    margin-left: 0.28rem !important;
    font-size: 0.39rem !important;
    letter-spacing: 0.065em !important;
  }

  .nav-final-v17 {
    padding-top: 1.08rem !important;
    gap: 0.34rem 0.54rem !important;
    transform: translateX(-0.10rem) !important;
  }

  .nav-final-v17 a,
  .nav-final-v17 a:visited {
    font-size: 0.69rem !important;
  }
}

@media (max-width: 370px) {
  .header-main-v17 {
    grid-template-columns: minmax(118px, 0.36fr) minmax(0, 0.64fr) !important;
    gap: 0.08rem !important;
  }

  .logo-final-v17 {
    max-width: 132px !important;
  }

  .logo-final-v17 .logo-mark {
    width: 132px !important;
    height: 62px !important;
  }

  .logo-final-v17 .logo-text {
    max-width: 132px !important;
    font-size: 0.365rem !important;
    letter-spacing: 0.055em !important;
  }

  .nav-final-v17 {
    padding-top: 1rem !important;
    gap: 0.30rem 0.46rem !important;
  }

  .nav-final-v17 a,
  .nav-final-v17 a:visited {
    font-size: 0.66rem !important;
  }
}



/* ============================
   HEADER V25: MOBILE - MENÚ CORRIDO A LA IZQUIERDA
   Ajuste puntual sobre v24: reduce la primera columna del header mobile
   para que el menú no quede pegado al margen derecho.
============================ */
@media (max-width: 760px) {
  .header-main-v17 {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    column-gap: 0.12rem !important;
  }

  .logo-final-v17 {
    max-width: 136px !important;
  }

  .logo-final-v17 .logo-mark {
    width: 136px !important;
    height: 66px !important;
    overflow: hidden !important;
  }

  .logo-final-v17 .logo-base,
  .logo-final-v17 .logo-smoke {
    inset: -10px 0 -12px 0 !important;
    background-position: left center !important;
  }

  .logo-final-v17 .logo-text {
    max-width: 136px !important;
    margin-left: 0.12rem !important;
  }

  .nav-final-v17 {
    justify-content: start !important;
    justify-items: start !important;
    padding-top: 0.98rem !important;
    transform: translateX(-0.64rem) !important;
    gap: 0.34rem 0.58rem !important;
  }
}

@media (max-width: 430px) {
  .header-main-v17 {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    column-gap: 0.08rem !important;
  }

  .logo-final-v17 {
    max-width: 132px !important;
    transform: translateY(-0.36rem) !important;
  }

  .logo-final-v17 .logo-mark {
    width: 132px !important;
    height: 64px !important;
    overflow: hidden !important;
  }

  .logo-final-v17 .logo-base,
  .logo-final-v17 .logo-smoke {
    inset: -10px 0 -12px 0 !important;
  }

  .logo-final-v17 .logo-text {
    max-width: 132px !important;
    margin-left: 0.08rem !important;
    font-size: 0.385rem !important;
    letter-spacing: 0.06em !important;
  }

  .nav-final-v17 {
    padding-top: 0.94rem !important;
    transform: translateX(-0.78rem) !important;
    gap: 0.34rem 0.54rem !important;
  }
}

@media (max-width: 370px) {
  .header-main-v17 {
    grid-template-columns: 104px minmax(0, 1fr) !important;
  }

  .logo-final-v17 {
    max-width: 126px !important;
  }

  .logo-final-v17 .logo-mark {
    width: 126px !important;
    height: 61px !important;
  }

  .logo-final-v17 .logo-text {
    max-width: 126px !important;
    font-size: 0.36rem !important;
    letter-spacing: 0.052em !important;
  }

  .nav-final-v17 {
    transform: translateX(-0.86rem) !important;
    gap: 0.30rem 0.46rem !important;
  }
}



/* ============================
   HEADER V31: LOGO ARRIBA + MENÚ DEBAJO
   Reemplazo aislado para evitar overrides acumulados de V17/V25.
============================ */
.site-header-stacked-v31 {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(250, 247, 243, 0.97) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2d7c8;
}

.site-header-stacked-v31__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.52rem 1rem 0.58rem !important;
}

.site-header-stacked-v31__top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}

.stacked-logo-v31,
.stacked-logo-v31:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.95rem !important;
  color: var(--text) !important;
  text-decoration: none !important;
  min-width: 0 !important;
  flex: 0 1 auto !important;
  transform: none !important;
}

.stacked-logo-v31 .logo-mark {
  position: relative !important;
  width: 220px !important;
  height: 147px !important;
  flex: 0 0 220px !important;
  margin: 0 !important;
  overflow: visible !important;
}

.stacked-logo-v31 .logo-base {
  position: absolute !important;
  inset: 0 !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.stacked-logo-v31 .logo-smoke {
  position: absolute !important;
  left: 62.45% !important;
  top: 21.57% !important;
  width: 17.8% !important;
  height: 26.486% !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transform-origin: 50% 85% !important;
  animation: logoSmokeFloat 3.9s ease-in-out infinite !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.12)) !important;
}

.stacked-logo-v31 .logo-text {
  display: inline-block !important;
  white-space: nowrap !important;
  font-size: 0.62rem !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #6a5f52 !important;
  margin: 0 !important;
  max-width: none !important;
}

.stacked-actions-v31 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.62rem !important;
  flex: 0 0 auto !important;
}

.stacked-actions-v31 .btn-outline,
.stacked-actions-v31 .btn-outline:visited {
  border: 1px solid var(--gold) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #3b332a !important;
  padding: 0.40rem 0.86rem !important;
  min-height: 34px !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.stacked-actions-v31 .btn-outline:hover,
.stacked-actions-v31 .btn-outline:focus-visible {
  background: var(--gold) !important;
  color: #fff !important;
  border-color: var(--gold) !important;
}

.stacked-actions-v31 .btn-outline:hover .nav-cart-count,
.stacked-actions-v31 .btn-outline:focus-visible .nav-cart-count {
  background: #fffaf3 !important;
  color: var(--gold-dark) !important;
}

.stacked-nav-v31 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.20rem !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0.28rem 0 0 !important;
  padding: 0.38rem 0 0 !important;
  border-top: 1px solid rgba(196,154,108,0.18);
  transform: none !important;
}

.stacked-nav-v31 a,
.stacked-nav-v31 a:visited {
  color: #3b332a !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  padding: 0.15rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.stacked-nav-v31 a:hover,
.stacked-nav-v31 a:focus-visible {
  color: var(--gold-dark) !important;
}

.back-to-top {
  left: 50% !important;
  right: auto !important;
  bottom: 88px !important;
  transform: translate(-50%, 10px) !important;
  padding: 0.56rem 0.92rem !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 180px !important;
  border-radius: 999px !important;
}

.back-to-top.show {
  transform: translate(-50%, 0) !important;
}

#inicio,
#como-comprar,
#con-descuento,
#ofertas,
#menu,
#mas-vendidos,
#mas-visitados,
#low-carb,
#eventos,
#envios,
#catalogPage,
#productDetailPage,
#admin-demo,
#adminBillingPanel {
  scroll-margin-top: 148px !important;
}

@media (max-width: 760px) {
  .site-header-stacked-v31__inner {
    padding: 0.42rem 0.72rem 0.50rem !important;
  }

  .site-header-stacked-v31__top {
    align-items: center !important;
    gap: 0.62rem !important;
  }

  .stacked-logo-v31 {
    gap: 0.48rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .stacked-logo-v31 .logo-mark {
    width: 136px !important;
    height: 91px !important;
    flex-basis: 136px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.38rem !important;
    letter-spacing: 0.06em !important;
    white-space: normal !important;
    width: 52px !important;
    max-width: 52px !important;
  }

  .stacked-actions-v31 {
    gap: 0.42rem !important;
  }

  .stacked-actions-v31 .btn-outline {
    padding: 0.34rem 0.62rem !important;
    min-height: 35px !important;
    font-size: 0.74rem !important;
  }

  .stacked-nav-v31 {
    justify-content: center !important;
    gap: 0.46rem 0.72rem !important;
    margin-top: 0.22rem !important;
    padding-top: 0.34rem !important;
  }

  .stacked-nav-v31 a,
  .stacked-nav-v31 a:visited {
    font-size: 0.74rem !important;
    line-height: 1.05 !important;
  }

  .back-to-top {
    left: 50% !important;
    right: auto !important;
    bottom: 86px !important;
    transform: translate(-50%, 10px) !important;
  }

  .back-to-top.show {
    transform: translate(-50%, 0) !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 150px !important;
  }
}

@media (max-width: 420px) {
  .stacked-logo-v31 .logo-mark {
    width: 128px !important;
    height: 86px !important;
    flex-basis: 128px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.36rem !important;
    width: 48px !important;
    max-width: 48px !important;
  }

  .stacked-actions-v31 .btn-outline {
    padding: 0.33rem 0.58rem !important;
    font-size: 0.72rem !important;
  }

  .stacked-nav-v31 {
    gap: 0.42rem 0.62rem !important;
  }

  .stacked-nav-v31 a,
  .stacked-nav-v31 a:visited {
    font-size: 0.70rem !important;
  }
}



/* ============================
   AJUSTE V32 - HEADER APILADO: LOGO/TEXTO OCUPAN EL ANCHO + BOTONES COMO "MÁS DESCUENTOS"
============================ */
.site-header-stacked-v31__inner {
  padding: 0.46rem 1rem 0.52rem !important;
}

.site-header-stacked-v31__top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 1rem !important;
}

.stacked-logo-v31,
.stacked-logo-v31:visited {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(1rem, 3vw, 2.35rem) !important;
  min-width: 0 !important;
}

.stacked-logo-v31 .logo-mark {
  width: 260px !important;
  height: 174px !important;
  flex: 0 0 260px !important;
}

.stacked-logo-v31 .logo-text {
  font-size: 0.66rem !important;
  letter-spacing: 0.20em !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  color: #6a5f52 !important;
}

/* Ingresar / Carrito: mismo lenguaje visual que "Más descuentos" */
.stacked-actions-v31 {
  gap: 0.58rem !important;
}

.stacked-actions-v31 .btn-outline,
.stacked-actions-v31 .btn-outline:visited {
  border: 1px solid var(--gold) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #3b332a !important;
  padding: 0.38rem 0.85rem !important;
  min-height: 34px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
}

.stacked-actions-v31 .btn-outline:hover,
.stacked-actions-v31 .btn-outline:focus-visible {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

.stacked-actions-v31 .btn-outline:hover .nav-cart-count,
.stacked-actions-v31 .btn-outline:focus-visible .nav-cart-count {
  background: #fffaf3 !important;
  color: var(--gold-dark) !important;
}

.stacked-nav-v31 {
  margin-top: 0.18rem !important;
  padding-top: 0.34rem !important;
  gap: 1.15rem !important;
}

@media (max-width: 960px) {
  .site-header-stacked-v31__inner {
    padding: 0.42rem 0.82rem 0.5rem !important;
  }

  .stacked-logo-v31 {
    gap: 0.9rem !important;
  }

  .stacked-logo-v31 .logo-mark {
    width: 210px !important;
    height: 141px !important;
    flex-basis: 210px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.48rem !important;
    letter-spacing: 0.13em !important;
  }
}

@media (max-width: 760px) {
  .site-header-stacked-v31__inner {
    padding: 0.42rem 0.72rem 0.50rem !important;
  }

  .site-header-stacked-v31__top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 0.55rem !important;
  }

  .stacked-logo-v31 {
    gap: 0.48rem !important;
  }

  .stacked-logo-v31 .logo-mark {
    width: 148px !important;
    height: 99px !important;
    flex-basis: 148px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.39rem !important;
    letter-spacing: 0.055em !important;
    white-space: normal !important;
    width: 58px !important;
    max-width: 58px !important;
  }

  .stacked-actions-v31 {
    gap: 0.42rem !important;
  }

  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    padding: 0.36rem 0.64rem !important;
    min-height: 35px !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
  }

  .stacked-nav-v31 {
    margin-top: 0.18rem !important;
    padding-top: 0.32rem !important;
    gap: 0.46rem 0.72rem !important;
  }
}

@media (max-width: 420px) {
  .stacked-logo-v31 .logo-mark {
    width: 140px !important;
    height: 94px !important;
    flex-basis: 140px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.37rem !important;
    width: 52px !important;
    max-width: 52px !important;
  }

  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    padding: 0.34rem 0.58rem !important;
    font-size: 0.73rem !important;
  }
}



/* ============================
   AJUSTE V33 - WEB: LOGO Y TEXTO MÁS GRANDES, MENOS AIRE VISUAL
============================ */
@media (min-width: 961px) {
  .site-header-stacked-v31__inner {
    padding: 0.38rem 1rem 0.46rem !important;
  }

  .site-header-stacked-v31__top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 0.95rem !important;
  }

  .stacked-logo-v31,
  .stacked-logo-v31:visited {
    gap: clamp(1.25rem, 3.6vw, 3.1rem) !important;
  }

  .stacked-logo-v31 .logo-mark {
    width: 320px !important;
    height: 214px !important;
    flex: 0 0 320px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.82rem !important;
    letter-spacing: 0.22em !important;
    font-weight: 850 !important;
    line-height: 1.05 !important;
  }

  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    padding: 0.40rem 0.90rem !important;
  }

  .stacked-nav-v31 {
    margin-top: 0.08rem !important;
    padding-top: 0.30rem !important;
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .stacked-logo-v31 .logo-mark {
    width: 285px !important;
    height: 190px !important;
    flex-basis: 285px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.74rem !important;
    letter-spacing: 0.19em !important;
  }
}



/* ============================
   AJUSTE V34 - MOBILE: LOGO/TEXTO MÁS PRESENTES Y PRODUCTOS MÁS LEGIBLES
   Objetivo: mantener la estructura V33, pero mejorar escala visual en celular.
============================ */
@media (max-width: 760px) {
  .site-header-stacked-v31__inner {
    padding: 0.58rem 0.82rem 0.56rem !important;
  }

  .site-header-stacked-v31__top {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 0.72rem !important;
    align-items: center !important;
  }

  .stacked-logo-v31,
  .stacked-logo-v31:visited {
    gap: 0.62rem !important;
    align-items: center !important;
  }

  .stacked-logo-v31 .logo-mark {
    width: 176px !important;
    height: 118px !important;
    flex: 0 0 176px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.48rem !important;
    letter-spacing: 0.075em !important;
    line-height: 1.08 !important;
    width: 74px !important;
    max-width: 74px !important;
    white-space: normal !important;
    font-weight: 850 !important;
  }

  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    font-size: 0.80rem !important;
    min-height: 40px !important;
    padding: 0.44rem 0.76rem !important;
  }

  .stacked-nav-v31 {
    margin-top: 0.32rem !important;
    padding-top: 0.42rem !important;
    gap: 0.55rem 0.82rem !important;
  }

  .stacked-nav-v31 a,
  .stacked-nav-v31 a:visited {
    font-size: 0.80rem !important;
    font-weight: 850 !important;
  }

  /* Tarjetas de producto mobile: más parecidas en escala a apps de delivery,
     pero manteniendo el estilo visual actual del sitio. */
  .product-grid {
    gap: 0.78rem !important;
  }

  .product-card {
    grid-template-columns: 39% 61% !important;
    border-radius: 14px !important;
    min-height: 160px !important;
  }

  .product-image-wrap {
    height: 160px !important;
    max-height: 160px !important;
  }

  .product-body {
    padding: 0.64rem 0.70rem !important;
    gap: 0.26rem !important;
  }

  .product-name {
    font-size: 0.92rem !important;
    line-height: 1.16 !important;
    font-weight: 850 !important;
  }

  .product-desc {
    font-size: 0.78rem !important;
    line-height: 1.28 !important;
    -webkit-line-clamp: 2 !important;
  }

  .product-price {
    font-size: 0.96rem !important;
    line-height: 1.15 !important;
    font-weight: 850 !important;
  }

  .product-price-old {
    font-size: 0.68rem !important;
    padding: 0.05rem 0.32rem !important;
    margin-right: 0.24rem !important;
  }

  .product-flag {
    font-size: 0.68rem !important;
    padding: 0.20rem 0.48rem !important;
  }

  .product-actions {
    margin-top: 0.32rem !important;
    gap: 0.34rem !important;
  }

  .btn-add {
    font-size: 0.78rem !important;
    padding: 0.38rem 0.54rem !important;
    min-height: 34px !important;
  }

  .btn-quick {
    font-size: 0.72rem !important;
    min-width: 70px !important;
  }

  .badge {
    box-sizing: border-box !important;
    width: 6.75rem !important;
    height: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.19rem 0.25rem !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .favorite-btn {
    width: 42px !important;
    height: 42px !important;
  }
}

/* Extiende el sistema uniforme de badges (ver arriba, max-width:760px)
   al hueco de tablet vertical/horizontal chica 761-900px, donde no
   aplica ninguno de los 3 bloques mobile de arriba ni el sistema
   desktop refinado (que recien empieza en min-width:901px con
   hover:hover+pointer:fine -precedente ya usado para el mismo hueco en
   el header, rama fix/mobile-header-compact). Sin esto, "AGOTADO POR
   HOY"/"SOLO POR HOY" volverian a partirse en dos lineas en esa franja
   (768x1024 incluido). El corazon de favoritos no se reubica aca: a
   este ancho la imagen ya tiene espacio de sobra y no hay colision. */
@media (min-width: 761px) and (max-width: 900px) {
  .badge-stack {
    max-width: calc(100% - 0.6rem) !important;
  }

  .badge {
    box-sizing: border-box !important;
    width: 6.75rem !important;
    height: 1.4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.19rem 0.25rem !important;
    font-size: 0.625rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .stacked-logo-v31 .logo-mark {
    width: 166px !important;
    height: 111px !important;
    flex-basis: 166px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.46rem !important;
    width: 70px !important;
    max-width: 70px !important;
    letter-spacing: 0.065em !important;
  }

  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    font-size: 0.76rem !important;
    padding: 0.42rem 0.66rem !important;
  }

  .stacked-nav-v31 a,
  .stacked-nav-v31 a:visited {
    font-size: 0.76rem !important;
  }

  .product-card {
    grid-template-columns: 38% 62% !important;
    min-height: 154px !important;
  }

  .product-image-wrap {
    height: 154px !important;
    max-height: 154px !important;
  }

  .product-body {
    padding: 0.58rem 0.62rem !important;
  }

  .product-name {
    font-size: 0.88rem !important;
  }

  .product-desc {
    font-size: 0.74rem !important;
  }

  .product-price {
    font-size: 0.92rem !important;
  }
}



/* ============================
   AJUSTE V35: MOBILE HEADER - TEXTO MARCA MÁS GRANDE / BOTONES MÁS CHICOS
============================ */
@media (max-width: 760px) {
  .site-header-stacked-v31__inner {
    padding: 0.58rem 0.78rem 0.56rem !important;
  }

  .site-header-stacked-v31__top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 0.48rem !important;
    row-gap: 0.25rem !important;
  }

  .stacked-logo-v31,
  .stacked-logo-v31:visited {
    grid-column: 1 / 2 !important;
    display: grid !important;
    grid-template-columns: auto auto !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 0.62rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .stacked-logo-v31 .logo-mark {
    width: 176px !important;
    height: 118px !important;
    flex: 0 0 176px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.76rem !important;
    line-height: 1.02 !important;
    letter-spacing: 0.08em !important;
    font-weight: 900 !important;
    white-space: normal !important;
    max-width: 120px !important;
    text-align: left !important;
  }

  .stacked-actions-v31 {
    grid-column: 2 / 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.34rem !important;
    flex-wrap: nowrap !important;
  }

  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    min-height: 38px !important;
    padding: 0.38rem 0.62rem !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
  }

  .stacked-actions-v31 .nav-cart-count {
    min-width: 1.02rem !important;
    height: 1.02rem !important;
    font-size: 0.62rem !important;
    padding: 0 0.22rem !important;
  }

  .stacked-nav-v31 {
    margin-top: 0.36rem !important;
    padding-top: 0.38rem !important;
    justify-content: center !important;
    gap: 0.94rem !important;
  }

  .stacked-nav-v31 a,
  .stacked-nav-v31 a:visited {
    font-size: 0.84rem !important;
    font-weight: 900 !important;
  }
}

@media (max-width: 420px) {
  .stacked-logo-v31 .logo-mark {
    width: 162px !important;
    height: 108px !important;
    flex-basis: 162px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.72rem !important;
    max-width: 104px !important;
    letter-spacing: 0.07em !important;
  }

  .stacked-actions-v31 {
    gap: 0.26rem !important;
  }

  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    min-height: 36px !important;
    padding: 0.36rem 0.54rem !important;
    font-size: 0.72rem !important;
  }

  .stacked-nav-v31 {
    gap: 0.72rem !important;
  }

  .stacked-nav-v31 a,
  .stacked-nav-v31 a:visited {
    font-size: 0.8rem !important;
  }
}

@media (max-width: 380px) {
  .stacked-logo-v31 .logo-mark {
    width: 150px !important;
    height: 100px !important;
    flex-basis: 150px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.68rem !important;
    max-width: 92px !important;
  }

  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    padding: 0.34rem 0.46rem !important;
    font-size: 0.69rem !important;
  }
}



/* ============================
   AJUSTE V36: MOBILE HEADER SIN COMPRESIÓN
   Estructura mobile:
   1) Mi cuenta / Carrito arriba a la derecha
   2) Logo + texto en una línea propia
   3) Menú debajo centrado
============================ */
@media (max-width: 760px) {
  .site-header-stacked-v31__inner {
    padding: 0.50rem 0.78rem 0.50rem !important;
  }

  .site-header-stacked-v31__top {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.36rem !important;
  }

  .stacked-actions-v31 {
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.32rem !important;
    flex-wrap: nowrap !important;
  }

  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    min-height: 34px !important;
    padding: 0.34rem 0.58rem !important;
    font-size: 0.70rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .stacked-actions-v31 .nav-cart-count {
    min-width: 0.98rem !important;
    height: 0.98rem !important;
    font-size: 0.58rem !important;
    padding: 0 0.20rem !important;
  }

  .stacked-logo-v31,
  .stacked-logo-v31:visited {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.70rem !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .stacked-logo-v31 .logo-mark {
    width: 176px !important;
    height: 118px !important;
    flex: 0 0 176px !important;
  }

  .stacked-logo-v31 .logo-text {
    display: block !important;
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0.075em !important;
    font-weight: 900 !important;
    white-space: normal !important;
    width: auto !important;
    max-width: 148px !important;
    text-align: left !important;
    color: #5f5448 !important;
    margin: 0 !important;
  }

  .stacked-nav-v31 {
    margin-top: 0.38rem !important;
    padding-top: 0.38rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.76rem !important;
    flex-wrap: wrap !important;
  }

  .stacked-nav-v31 a,
  .stacked-nav-v31 a:visited {
    font-size: 0.80rem !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .stacked-logo-v31 .logo-mark {
    width: 166px !important;
    height: 111px !important;
    flex-basis: 166px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.74rem !important;
    max-width: 136px !important;
    letter-spacing: 0.065em !important;
  }

  .stacked-nav-v31 {
    gap: 0.66rem !important;
  }

  .stacked-nav-v31 a,
  .stacked-nav-v31 a:visited {
    font-size: 0.76rem !important;
  }
}

@media (max-width: 380px) {
  .stacked-actions-v31 .btn-outline,
  .stacked-actions-v31 .btn-outline:visited {
    padding: 0.32rem 0.50rem !important;
    font-size: 0.68rem !important;
  }

  .stacked-logo-v31 .logo-mark {
    width: 156px !important;
    height: 104px !important;
    flex-basis: 156px !important;
  }

  .stacked-logo-v31 .logo-text {
    font-size: 0.70rem !important;
    max-width: 126px !important;
  }

  .stacked-nav-v31 {
    gap: 0.54rem !important;
  }
}



/* ============================
   HEADER V39 - OPCIÓN 2 PREMIUM
   Header aislado: estructura superior + navegación con íconos
============================ */
.site-header-option2-v39 {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(250, 247, 243, 0.985) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(196, 154, 108, 0.24);
}

.header39-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.72rem 1rem 0.62rem;
}

.header39-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  min-height: 112px;
}

.header39-brand,
.header39-brand:visited {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.4rem;
  text-decoration: none;
  color: var(--text);
  min-width: 0;
}

.header39-brand .logo-mark {
  position: relative !important;
  width: 228px !important;
  height: 152px !important;
  flex: 0 0 228px !important;
  margin: 0 !important;
  overflow: visible !important;
}

.header39-brand .logo-base {
  position: absolute !important;
  inset: 0 !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.header39-brand .logo-smoke {
  position: absolute !important;
  left: 62.45% !important;
  top: 21.57% !important;
  width: 17.8% !important;
  height: 26.486% !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  animation: logoSmokePulse 3.8s ease-in-out infinite !important;
  transform-origin: 45% 70%;
  opacity: 0.96;
}

.header39-brand .logo-text {
  display: inline-block;
  color: #5e5145 !important;
  font-size: 0.78rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-weight: 900 !important;
  white-space: nowrap;
  max-width: none !important;
}

.header39-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.72rem;
  white-space: nowrap;
}

.header39-mobile-left {
  display: none !important;
}

.header39-account,
.header39-cart,
.header39-account:visited,
.header39-cart:visited {
  min-height: 40px;
  padding: 0.48rem 0.92rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(196, 154, 108, 0.86) !important;
  background: rgba(255, 250, 243, 0.78) !important;
  color: #3d3329 !important;
  font-size: 0.86rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.005em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 12px rgba(75, 55, 35, 0.05) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.header39-account:hover,
.header39-cart:hover,
.header39-account:focus-visible,
.header39-cart:focus-visible {
  background: linear-gradient(180deg, #5a4736, #3f3024) !important;
  color: #fff !important;
  border-color: #4c3b2d !important;
  box-shadow: 0 10px 24px rgba(58, 43, 30, 0.18), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  transform: translateY(-1px);
}

.header39-action-icon {
  font-size: 0.88em;
  line-height: 1;
  opacity: 0.9;
}

.header39-cart .nav-cart-count {
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  background: #c49a6c !important;
  color: #fff !important;
  font-weight: 900;
}

.header39-cart:hover .nav-cart-count,
.header39-cart:focus-visible .nav-cart-count {
  background: #f2e2cf !important;
  color: #463427 !important;
}

.header39-nav {
  margin-top: 0.7rem;
  padding: 0.68rem 0 0.18rem;
  border-top: 1px solid rgba(196, 154, 108, 0.24);
  border-bottom: 1px solid rgba(196, 154, 108, 0.36);
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 0.35rem;
}

.header39-nav a,
.header39-nav a:visited {
  position: relative;
  min-height: 54px;
  padding: 0.18rem 0.36rem 0.62rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: #3d3329 !important;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 12px 12px 0 0;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.header39-nav a::after {
  content: "";
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 0.16rem;
  height: 2px;
  border-radius: 999px;
  background: #c49a6c;
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.header39-nav a:hover,
.header39-nav a:focus-visible,
.header39-nav a.is-active {
  color: #ad7638 !important;
  background: linear-gradient(180deg, rgba(218, 194, 166, 0.12), rgba(255,255,255,0));
  transform: translateY(-1px);
}

.header39-nav a:hover::after,
.header39-nav a:focus-visible::after,
.header39-nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.header39-nav-icon {
  color: #9a7147;
  font-size: 1.18rem;
  line-height: 1;
  font-weight: 600;
}

/* centra el botón Volver arriba si existe en la maqueta */
.back-to-top {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

#inicio,
#como-comprar,
#con-descuento,
#ofertas,
#menu,
#mas-vendidos,
#mas-visitados,
#low-carb,
#eventos,
#envios,
#catalogPage,
#productDetailPage,
#admin-demo,
#adminBillingPanel {
  scroll-margin-top: 178px !important;
}

@media (max-width: 760px) {
  .header39-inner {
    padding: 0.7rem 0.78rem 0.58rem;
  }

  .header39-top {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "account brand cart";
    gap: 0.55rem;
    min-height: 112px;
  }

  .header39-mobile-left {
    grid-area: account;
    display: inline-flex !important;
    align-self: start;
    margin-top: 0.14rem;
  }

  .header39-brand {
    grid-area: brand;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.14rem !important;
    text-align: center;
    min-width: 0;
  }

  .header39-brand .logo-mark {
    width: 170px !important;
    height: 92px !important;
    flex: 0 0 92px !important;
  }

  .header39-brand .logo-text {
    font-size: 0.72rem !important;
    letter-spacing: 0.055em !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    max-width: 190px !important;
  }

  .header39-actions {
    grid-area: cart;
    justify-content: flex-end;
    align-self: start;
    margin-top: 0.14rem;
  }

  .header39-desktop-action {
    display: none !important;
  }

  .header39-account,
  .header39-cart,
  .header39-account:visited,
  .header39-cart:visited {
    min-height: 34px;
    padding: 0.38rem 0.58rem !important;
    font-size: 0.72rem !important;
    gap: 0.26rem;
  }

  .header39-cart .nav-cart-count {
    width: 1.05rem;
    min-width: 1.05rem;
    height: 1.05rem;
    font-size: 0.62rem;
  }

  .header39-action-icon {
    display: none;
  }

  .header39-nav {
    margin-top: 0.58rem;
    padding-top: 0.54rem;
    gap: 0.12rem;
  }

  .header39-nav a {
    min-height: 50px;
    padding: 0.12rem 0.08rem 0.52rem;
    font-size: 0.67rem;
    letter-spacing: 0;
    text-transform: none;
    gap: 0.22rem;
  }

  .header39-nav-icon {
    font-size: 1.05rem;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 190px !important;
  }
}

@media (max-width: 390px) {
  .header39-inner {
    padding-left: 0.62rem;
    padding-right: 0.62rem;
  }

  .header39-top {
    gap: 0.38rem;
  }

  .header39-brand .logo-mark {
    width: 154px !important;
    height: 84px !important;
    flex-basis: 84px !important;
  }

  .header39-brand .logo-text {
    font-size: 0.66rem !important;
    max-width: 168px !important;
  }

  .header39-account,
  .header39-cart,
  .header39-account:visited,
  .header39-cart:visited {
    padding: 0.34rem 0.48rem !important;
    font-size: 0.68rem !important;
  }

  .header39-nav a {
    font-size: 0.63rem;
  }
}



/* ============================
   HEADER V40 - OPCIÓN 2 CORREGIDA
   Igual criterio visual aprobado: íconos lineales, Mi cuenta/Carrito, sin botón Ingresar.
============================ */
.site-header-option2-v40 {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(250, 247, 243, 0.97) !important;
  border-bottom: 1px solid rgba(196,154,108,0.24);
  backdrop-filter: blur(8px);
}

.header40-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.72rem 1rem 0.62rem;
}

.header40-top {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand actions";
  align-items: center;
  gap: 1.2rem;
  min-height: 112px;
}

.header40-brand,
.header40-brand:visited {
  grid-area: brand;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2.1rem !important;
  color: var(--text) !important;
  text-decoration: none !important;
  width: fit-content;
  min-width: 0;
}

.header40-brand .logo-mark {
  position: relative !important;
  width: 138px !important;
  height: 128px !important;
  flex: 0 0 138px !important;
  overflow: visible !important;
}

.header40-brand .logo-base {
  position: absolute !important;
  inset: 0 !important;
  background-image: url("../../public/assets/logo/atugusto-logo-header.png") !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.header40-brand .logo-smoke {
  position: absolute !important;
  left: 62.45% !important;
  top: 21.57% !important;
  width: 17.8% !important;
  height: 26.486% !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  opacity: 0.98;
  animation: smokePulse 2.8s ease-in-out infinite;
}

.header40-brand .logo-text {
  display: block !important;
  max-width: none !important;
  color: #6b5948 !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0.12em !important;
  font-weight: 850 !important;
  text-transform: uppercase;
  white-space: nowrap !important;
}

.header40-actions {
  grid-area: actions;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.78rem;
  white-space: nowrap;
}

.header40-mobile-account {
  display: none !important;
}

.header40-action {
  border: 1px solid rgba(196, 154, 108, 0.86);
  background: rgba(255, 250, 243, 0.66);
  color: #3b332a;
  border-radius: 999px;
  min-height: 38px;
  padding: 0.43rem 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62), 0 4px 13px rgba(70,48,28,0.04);
}

.header40-action:hover,
.header40-action:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.header40-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.header40-action .nav-cart-count {
  background: var(--gold);
  color: #fff;
  margin-left: 0.05rem;
}

.header40-action:hover .nav-cart-count,
.header40-action:focus-visible .nav-cart-count {
  background: rgba(255,255,255,0.92);
  color: var(--gold-dark);
}

.header40-nav {
  margin-top: 0.58rem;
  padding: 0.64rem 0 0.52rem;
  border-top: 1px solid rgba(196,154,108,0.22);
  border-bottom: 1px solid rgba(196,154,108,0.42);
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  justify-items: center;
  gap: 0.75rem;
  position: relative;
}

.header40-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,154,108,0.65), transparent);
}

.header40-nav a,
.header40-nav a:visited {
  position: relative;
  display: inline-flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  color: #372f27 !important;
  text-decoration: none !important;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.15;
  padding: 0.18rem 0.5rem 0.38rem;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: color 0.18s ease, transform 0.18s ease;
}

.header40-nav a::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--gold);
  opacity: 0;
  transform: scaleX(0.45);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.header40-nav a:hover,
.header40-nav a:focus-visible,
.header40-nav a.is-active {
  color: var(--gold-dark) !important;
  transform: translateY(-1px);
}

.header40-nav a:hover::after,
.header40-nav a:focus-visible::after,
.header40-nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.header40-nav-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.header40-nav a.is-active .header40-nav-icon,
.header40-nav a:hover .header40-nav-icon,
.header40-nav a:focus-visible .header40-nav-icon {
  color: var(--gold-dark);
}

.back-to-top {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

#inicio,
#como-comprar,
#con-descuento,
#ofertas,
#menu,
#mas-vendidos,
#mas-visitados,
#low-carb,
#eventos,
#envios,
#catalogPage,
#productDetailPage,
#admin-demo,
#adminBillingPanel {
  scroll-margin-top: 182px !important;
}

/* ============================
   HEADER V41 - AJUSTES DE ADMIN + ANCLAJES
   - Menú superior responde al admin: si la sección está oculta, el link se oculta.
   - Anclajes con offset real para que el header no tape títulos.
============================ */
.header40-nav a[hidden] {
  display: none !important;
}

#con-descuento,
#ofertas,
#menu,
#eventos,
#envios,
#como-comprar,
#mas-vendidos,
#mas-visitados,
#low-carb,
#preguntas-frecuentes,
#redes-sociales,
#admin-demo,
#adminBillingPanel {
  scroll-margin-top: 240px !important;
}

@media (max-width: 760px) {
  #con-descuento,
  #ofertas,
  #menu,
  #eventos,
  #envios,
  #como-comprar,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #preguntas-frecuentes,
  #redes-sociales,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 258px !important;
  }
}



/* ============================
   V43: CTA MOBILE ARRIBA EN CARRITO + BOTÓN INGRESAR
============================ */
.mobile-cart-top-action {
  display: none;
}

.header40-account span:last-child {
  font-weight: 850;
}

@media (max-width: 760px) {
  .mobile-cart-top-action {
    display: block;
    background: linear-gradient(135deg, #fffaf3 0%, #f7efe4 100%);
    border: 1px solid rgba(196, 154, 108, 0.32);
    border-radius: 14px;
    padding: 0.72rem;
    box-shadow: 0 8px 18px rgba(43, 38, 32, 0.05);
  }

  .mobile-cart-top-action .btn-primary {
    width: 100%;
    min-height: 48px;
    font-size: 0.95rem;
    font-weight: 850;
  }

  .mobile-cart-top-action + .cart-coupon-box {
    margin-top: -0.1rem;
  }
}



/* ============================
   V44: CARRITO CON SCROLL INTERNO Y CTA SOLO ABAJO
============================ */
.cart-overlay {
  overflow: hidden !important;
  align-items: stretch !important;
}

.cart-drawer {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

.cart-items {
  flex: 0 0 auto !important;
  max-height: 32vh;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

.cart-summary {
  flex: 0 0 auto !important;
  padding-bottom: 1.25rem;
}

.mobile-cart-top-action {
  display: none !important;
}

.mobile-cart-primary-action {
  display: none;
}

@media (max-width: 760px) {
  .cart-drawer {
    width: 100% !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .cart-items {
    max-height: 24vh;
  }

  .mobile-cart-primary-action {
    display: block !important;
    background: #fffaf3;
    border: 1px solid rgba(196, 154, 108, 0.32);
    border-radius: 14px;
    padding: 0.72rem;
  }

  .mobile-cart-primary-action .btn-primary {
    width: 100%;
    min-height: 48px;
    font-size: 0.95rem;
    font-weight: 850;
  }

  .cart-actions .btn-primary {
    display: none !important;
  }
}

.checkout-review-overlay {
  overflow: hidden !important;
}

.checkout-review-modal {
  max-height: min(90vh, 820px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  .checkout-review-overlay {
    align-items: stretch !important;
    padding: 0.75rem;
  }

  .checkout-review-modal {
    max-height: calc(100dvh - 1.5rem) !important;
    width: 100% !important;
  }
}



/* ============================
   V45 - LOGO MOBILE 245px (eliminado)
   Sizing de .logo-mark en mobile: consolidado en la seccion canonica
   de arriba (confirmado redundante via getComputedStyle -esta regla
   quedaba pisada por V46/V47/V48 antes de llegar a aplicarse).
============================ */

/* ============================
   V46: LOGO MÁS GRANDE EN WEB Y MOBILE
   - Desktop: aplica el tamaño del preview aprobado.
   - Mobile: logo centrado al máximo posible sin pisar Ingresar/Carrito.
   - No se toca lógica, productos ni carrito.
============================ */
@media (min-width: 761px) {
  .header40-inner {
    padding-top: 0.78rem !important;
    padding-bottom: 0.64rem !important;
  }

  .header40-top {
    min-height: 136px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 1.1rem !important;
  }

  .header40-brand,
  .header40-brand:visited {
    gap: 2.4rem !important;
  }

  .header40-brand .logo-mark {
    width: 320px !important;
    height: 172px !important;
    flex: 0 0 320px !important;
  }

  .header40-brand .logo-text {
    font-size: 0.90rem !important;
    letter-spacing: 0.19em !important;
    font-weight: 850 !important;
  }
}

/* Mobile de V46 (eliminado): sizing/layout de .header40-top, .header40-
   brand, .logo-mark, .header40-action y .header40-nav en mobile quedan
   consolidados en la seccion canonica de arriba (confirmado redundante
   via getComputedStyle -pisado por V47/V48 antes de aplicarse). La
   parte desktop (min-width:761px) de V46, arriba, no se toca. */



/* ============================
   V47 - LOGO MÁS GRANDE WEB + MOBILE, HEADER OPCIÓN 2
   Ajuste visual solamente: no toca productos, carrito ni lógica.
============================ */
.site-header-option2-v40 {
  background: rgba(250, 247, 243, 0.992) !important;
}

.header40-inner {
  max-width: 1200px !important;
  padding: 0.58rem 1rem 0.5rem !important;
}

.header40-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "brand actions" !important;
  align-items: center !important;
  column-gap: 2rem !important;
  min-height: 150px !important;
}

.header40-brand {
  grid-area: brand !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2.25rem !important;
  width: auto !important;
  max-width: 780px !important;
  text-align: left !important;
}

.header40-brand .logo-mark {
  width: 237px !important;
  height: 220px !important;
  flex: 0 0 237px !important;
  margin: 0 !important;
  overflow: visible !important;
}

.header40-brand .logo-base {
  background-image: url("../../public/assets/logo/atugusto-logo-header.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.header40-brand .logo-smoke {
  left: 62.45% !important;
  top: 21.57% !important;
  width: 17.8% !important;
  height: 26.486% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0.96 !important;
  animation: logoSmokePulse 3.8s ease-in-out infinite !important;
}

.header40-brand .logo-text {
  font-size: 0.9rem !important;
  letter-spacing: 0.20em !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
  color: #6b5d4e !important;
  white-space: nowrap !important;
  max-width: none !important;
}

.header40-actions {
  grid-area: actions !important;
  display: inline-flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.72rem !important;
  align-self: start !important;
  padding-top: 1.2rem !important;
}

.header40-mobile-account {
  display: none !important;
}

.header40-desktop-account {
  display: inline-flex !important;
}

.header40-nav {
  margin-top: 0.16rem !important;
  padding-top: 0.64rem !important;
  padding-bottom: 0.54rem !important;
}

/* Mobile de V47 (eliminado): sizing/layout de .header40-top, .header40-
   brand, .logo-mark, .header40-action, .header40-nav en mobile quedan
   consolidados en la seccion canonica (ver mas abajo, se ubica luego de
   V47/V48 para ganar la cascada real, no solo por casualidad). La parte
   sin @media de V47, arriba, no se toca (fondo del header, max-width,
   layout base de desktop, animacion de humo del logo). */



/* ============================
   V48 - AJUSTE MOBILE: LOGO MÁS ARRIBA, MENÚ MÁS CERCA Y LLAMA ANIMADA
   Solo corrige header responsive; no toca productos, carrito ni lógica.
============================ */
.header40-brand .logo-smoke {
  animation: logoSmokeFloat 3.9s ease-in-out infinite !important;
  transform-origin: 50% 85% !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12)) !important;
}

/* ============================
   HEADER MOBILE - SECCION CANONICA (consolidada)
   Reemplaza la cadena historica de bloques superpuestos para el mismo
   header mobile (base 760/390 + V45 + V46-mobile + V47-mobile +
   V48-mobile), confirmados redundantes/inalcanzables via getComputedStyle
   antes de borrarlos: cada uno volvia a fijar .header40-top/.header40-
   brand/.logo-mark/.header40-nav con !important, y solo la ULTIMA
   declaracion de cada propiedad en orden de aparicion llegaba a
   aplicarse (V48-mobile era la ganadora real: logo-mark en ~211-229px
   de alto, header total en ~336-354px, 42-52% del viewport en mobile
   chico/habitual). Se ubica aqui, luego de las partes sin @media de
   V47/V48 (arriba: fondo del header, layout base, animacion de humo del
   logo), para ganar la cascada por orden real de aparicion -no por
   estar al final del archivo como en el intento anterior.
   Se conservan sin tocar: el logo mas grande de V46 (min-width:761px,
   mas arriba en el archivo, ya no aplica en la practica dentro de este
   rango por lo de abajo) y el sistema hover/pointer:fine mas adelante
   en este archivo (min-width:901px, ese si sigue siendo el desktop
   real con mouse), la animacion de la llama de V48 (arriba, no es de
   tamaño), y toda regla no relacionada al header que compartia el
   mismo bloque @media.

   Umbral 761-900px (tablet vertical/horizontal chica): medido con
   getComputedStyle, esa franja no caia en este bloque compacto (que
   terminaba en 760px) ni en el sistema desktop refinado (que empieza
   recien en min-width:901px con hover:hover+pointer:fine). Caia en un
   tercer tramo huerfano heredado de la parte sin @media de V47 (logo
   330x220px, header ~290px/29% del viewport), generando un salto de
   ~134px al cruzar 760->761px. Se decidio extender este layout
   compacto hasta 900px -exactamente el limite inferior del tier
   desktop existente, sin crear ni hueco ni superposicion- en vez de
   crear una transicion intermedia nueva o dejar el salto sin resolver.
============================ */
@media (max-width: 900px) {
  .header40-inner {
    padding: 0.5rem 0.7rem 0.42rem !important;
  }

  .header40-top {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "account brand actions" !important;
    align-items: start !important;
    min-height: auto !important;
    row-gap: 0.22rem !important;
    column-gap: 0.5rem !important;
  }

  .header40-mobile-account {
    grid-area: account !important;
    display: inline-flex !important;
    align-self: start !important;
    margin-top: 0 !important;
  }

  .header40-desktop-account {
    display: none !important;
  }

  .header40-brand {
    grid-area: brand !important;
    width: 100% !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.12rem !important;
    text-align: center !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .header40-brand .logo-mark {
    width: 69px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    margin: 0 auto !important;
  }

  .header40-brand .logo-text {
    font-size: 0.66rem !important;
    letter-spacing: 0.08em !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    max-width: 190px !important;
    margin-top: 0 !important;
  }

  .header40-actions {
    grid-area: actions !important;
    align-self: start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 0 !important;
  }

  .header40-action {
    min-height: 38px !important;
    padding: 0.34rem 0.54rem !important;
    font-size: 0.68rem !important;
    gap: 0.28rem !important;
  }

  .header40-action svg,
  .header40-action-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .header40-cart .nav-cart-count,
  .nav-cart-count {
    min-width: 1rem !important;
    height: 1rem !important;
    font-size: 0.62rem !important;
  }

  .header40-nav {
    margin-top: 0.3rem !important;
    padding: 0.4rem 0 0.32rem !important;
    gap: 0.1rem !important;
  }

  .header40-nav a {
    flex-direction: column !important;
    gap: 0.18rem !important;
    font-size: 0.68rem !important;
    padding: 0.08rem 0.08rem 0.34rem !important;
    min-height: 44px !important;
  }

  .header40-nav-icon,
  .header40-nav-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 205px !important;
  }
}

@media (max-width: 390px) {
  .header40-brand .logo-mark {
    width: 60px !important;
    height: 56px !important;
    flex-basis: 56px !important;
  }

  .header40-brand .logo-text {
    font-size: 0.6rem !important;
  }

  .header40-action {
    padding: 0.32rem 0.46rem !important;
    font-size: 0.64rem !important;
  }

  .header40-nav a {
    font-size: 0.63rem !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel {
    scroll-margin-top: 195px !important;
  }
}



/* ============================
   CUENTA EDITABLE / ENTREGA EDITABLE V50
   Base: V48. No modifica header, menú, productos ni lógica comercial.
============================ */
.account-edit-panel,
.delivery-edit-panel {
  margin-top: 0.9rem;
  background: #fffaf3;
  border: 1px solid rgba(196, 154, 108, 0.30);
  border-radius: 16px;
  padding: 0.95rem;
  box-shadow: 0 8px 18px rgba(43, 38, 32, 0.05);
}

.account-edit-title,
.delivery-edit-title {
  color: #3b332a;
  font-size: 0.9rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.account-edit-note,
.delivery-edit-note {
  margin: 0.28rem 0 0.8rem;
  color: #7a6a58;
  font-size: 0.82rem;
  line-height: 1.4;
}

.account-edit-grid,
.delivery-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.auth-field-wide {
  grid-column: 1 / -1;
}

.account-edit-actions,
.delivery-edit-actions {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.delivery-edit-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: flex-start;
}

.delivery-edit-close {
  border: 0;
  background: transparent;
  color: #7a6a58;
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1;
}

.delivery-edit-panel.demo-highlight,
.account-edit-panel.demo-highlight {
  animation: editPanelPulse 1.4s ease 1;
}

@keyframes editPanelPulse {
  0% { box-shadow: 0 0 0 0 rgba(196,154,108,0.36); }
  100% { box-shadow: 0 0 0 16px rgba(196,154,108,0); }
}

@media (max-width: 760px) {
  .account-edit-grid,
  .delivery-edit-grid {
    grid-template-columns: 1fr;
  }

  .delivery-edit-actions .btn-primary,
  .delivery-edit-actions .btn-secondary,
  .account-edit-actions .btn-primary,
  .account-edit-actions .btn-secondary {
    width: 100%;
  }
}



/* ============================
   V52 - PRODUCTOS SELECCIONADOS + ADMIN OFERTAS POR PRODUCTO
============================ */
.product-add-button {
  min-width: 96px;
}

.product-qty-selected {
  flex: 1;
  min-height: 35px;
  border-radius: 999px;
  border: 1px solid rgba(196, 154, 108, 0.95);
  background: var(--gold);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(196, 154, 108, 0.18);
}

.product-qty-control-inline {
  flex: 1;
  min-height: 35px;
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  border: 1px solid rgba(196, 154, 108, 0.95);
  background: #fffaf3;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(196, 154, 108, 0.12);
}

.product-qty-control-inline button {
  height: 35px;
  border: 0;
  background: transparent;
  color: #3b332a;
  cursor: pointer;
  font-weight: 900;
}

.product-qty-trash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-qty-trash svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #7a5836;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-qty-number {
  background: rgba(196, 154, 108, 0.14) !important;
  color: #3b332a !important;
  font-size: 0.88rem;
}

.product-qty-plus {
  background: var(--gold) !important;
  color: #fff !important;
  font-size: 1rem;
}

.product-qty-selected:hover,
.product-qty-control-inline button:hover {
  filter: brightness(0.98);
}


.admin-weekly-promo-box {
  display: grid;
  gap: 0.7rem;
}

.admin-weekly-promo-row {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(228,215,199,0.95);
  border-radius: 16px;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.75rem;
  align-items: start;
}

.admin-weekly-promo-row.disabled {
  opacity: 0.62;
}

.admin-weekly-promo-preview {
  border-radius: 15px;
  border: 1px solid rgba(196,154,108,0.28);
  background: linear-gradient(135deg, rgba(47,40,31,0.92), rgba(31,25,19,0.9));
  color: #fffaf3;
  min-height: 150px;
  padding: 1rem;
  display: grid;
  align-content: end;
  gap: 0.25rem;
  overflow: hidden;
  position: relative;
}

.admin-weekly-promo-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--weekly-promo-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}

.admin-weekly-promo-preview > * {
  position: relative;
  z-index: 1;
}

.admin-weekly-kicker {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: rgba(196,154,108,0.92);
  color: #fffaf3;
  padding: 0.18rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-weekly-title {
  font-size: 1.02rem;
  line-height: 1.15;
  font-weight: 850;
}

.admin-weekly-text {
  color: rgba(255,250,243,0.86);
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-weekly-controls {
  display: grid;
  gap: 0.55rem;
}

.admin-weekly-toggle-grid {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

@media (max-width:780px) {
  .admin-weekly-promo-row {
    grid-template-columns: 1fr;
  }
}

.admin-product-offer-list {
  display: grid;
  gap: 0.65rem;
  max-height: 420px;
  overflow: auto;
  padding-right: 0.25rem;
}

.admin-product-offer-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) 0.7fr 0.9fr 0.8fr;
  gap: 0.65rem;
  align-items: center;
  border: 1px solid rgba(228,215,199,0.95);
  background: rgba(255,255,255,0.78);
  border-radius: 16px;
  padding: 0.62rem;
}

.admin-product-offer-row.active {
  border-color: rgba(196, 154, 108, 0.65);
  background: rgba(255,250,243,0.96);
}

.admin-product-offer-main {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0.6rem;
  align-items: center;
  min-width: 0;
}

.admin-product-offer-main img {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(196,154,108,0.28);
}

.admin-product-offer-main strong,
.admin-product-offer-main span,
.admin-product-offer-main small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-product-offer-main strong {
  color: #3b332a;
  font-size: 0.84rem;
}

.admin-product-offer-main span {
  color: #7a6a58;
  font-size: 0.76rem;
  margin-top: 0.08rem;
}

.admin-product-offer-main small {
  color: #9a8a76;
  font-size: 0.7rem;
  margin-top: 0.12rem;
}

@media (max-width: 920px) {
  .admin-product-offer-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .product-actions {
    gap: 0.4rem;
  }

  .product-qty-selected,
  .product-qty-control-inline {
    min-height: 40px;
  }

  .product-qty-control-inline {
    grid-template-columns: 40px 1fr 40px;
  }

  .product-qty-control-inline button {
    height: 40px;
  }
}



/* ============================
   V54 - AJUSTE CONTROL DE CANTIDAD
   - Si hay más de 1 unidad, aparece menos y descuenta de a una.
   - Si queda 1 unidad, aparece trash para eliminar.
   - Producto seleccionado toma tono crema marcado.
============================ */
.product-qty-selected {
  background: linear-gradient(180deg, #fff8ef 0%, #f0ddc6 100%) !important;
  border-color: rgba(196, 154, 108, 0.98) !important;
  color: #4a392c !important;
  box-shadow: 0 7px 16px rgba(136, 94, 48, 0.16), inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

.product-qty-selected:hover {
  background: linear-gradient(180deg, #f4e4d1 0%, #dfc09b 100%) !important;
  color: #2f261f !important;
  filter: none !important;
}

.product-qty-control-inline {
  border-color: rgba(196, 154, 108, 0.9) !important;
  background: #fff8ef !important;
  box-shadow: 0 7px 16px rgba(136, 94, 48, 0.13), inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.product-qty-minus {
  background: #f3e4d1 !important;
  color: #7a5836 !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
}

.product-qty-number {
  background: rgba(196, 154, 108, 0.18) !important;
  color: #4a392c !important;
  font-weight: 900 !important;
}

.product-qty-plus {
  background: var(--gold) !important;
  color: #fff !important;
}

.product-qty-trash svg {
  stroke: #7a5836 !important;
}


/* ============================
   EXPERIENCIAS PREMIUM V56
   Promo semanal animada, cupón no invasivo, armá tu mesa y pedido inteligente
============================ */
.experience-coupon-band {
  margin: 0 0 1.25rem;
  display: none;
  border: 1px solid rgba(196,154,108,0.34);
  background:
    linear-gradient(135deg, rgba(255,250,243,0.98), rgba(243,237,228,0.98)),
    radial-gradient(circle at 6% 10%, rgba(196,154,108,0.16), transparent 28%);
  border-radius: 20px;
  padding: 0.86rem 1rem;
  box-shadow: 0 10px 26px rgba(43,38,32,0.06);
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.experience-coupon-band.show {
  display: flex;
}

.experience-coupon-copy {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.experience-coupon-icon {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2f281f, #4a3a2d);
  color: #fffaf3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 9px 18px rgba(43,38,32,0.16);
}

.experience-coupon-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.experience-coupon-title {
  font-size: 0.9rem;
  color: #3b332a;
  font-weight: 850;
}

.experience-coupon-text {
  font-size: 0.8rem;
  color: #7a6a58;
  line-height: 1.35;
  margin-top: 0.12rem;
}

.experience-coupon-code {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  background: #2f281f;
  color: #fffaf3;
  padding: 0.18rem 0.48rem;
  font-weight: 850;
  font-size: 0.72rem;
  margin-left: 0.25rem;
}

.experience-coupon-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.experience-btn {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  padding: 0.48rem 0.84rem;
  cursor: pointer;
  white-space: nowrap;
}

.experience-btn:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}

.experience-btn.secondary {
  background: transparent;
  color: #6a5f52;
}

.experience-btn.secondary:hover {
  color: #3b332a;
  background: #f7efe4;
}

.weekly-promo-stage {
  display: none;
  margin-bottom: 1rem;
}

.weekly-promo-stage.show {
  display: block;
}

.weekly-promo-landed-card {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(196,154,108,0.35);
  background:
    linear-gradient(135deg, rgba(255,250,243,0.98), rgba(244,236,226,0.96));
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  min-height: 210px;
  box-shadow: 0 16px 34px rgba(43,38,32,0.08);
}

.weekly-promo-landed-media {
  position: relative;
  min-height: 210px;
  background: #17130f;
  overflow: hidden;
}

.weekly-promo-landed-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.72;
  transform: scale(1.04);
}

.weekly-promo-landed-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23,19,15,0.28), rgba(23,19,15,0.74));
}

.weekly-promo-landed-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.weekly-promo-kicker {
  width: fit-content;
  border-radius: 999px;
  background: #2f281f;
  color: #fffaf3;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 850;
  margin-bottom: 0.75rem;
}

.weekly-promo-landed-title {
  margin: 0 0 0.4rem;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.05;
  color: #2f281f;
}

.weekly-promo-landed-text {
  color: #6a5f52;
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 0 0.95rem;
}

.weekly-promo-landed-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.promo-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20,16,12,0.42);
  backdrop-filter: blur(5px);
}

.promo-intro-overlay.show {
  display: flex;
}

.promo-intro-card {
  width: min(520px, 100%);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,250,243,0.98), rgba(241,232,220,0.98));
  color: #2f281f;
  border: 1px solid rgba(196,154,108,0.38);
  box-shadow: 0 28px 80px rgba(0,0,0,0.32);
  overflow: hidden;
  transform-origin: center;
  animation: promoIntroIn 0.65s cubic-bezier(.2,.8,.2,1);
}

@keyframes promoIntroIn {
  from { opacity: 0; transform: translateY(18px) scale(.96) rotate(-1deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.promo-intro-card.fly-away {
  animation: promoIntroFly 0.82s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes promoIntroFly {
  0% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
  55% { opacity: .96; transform: translateY(-10px) scale(.94) rotate(2deg); filter: blur(.1px); }
  100% { opacity: 0; transform: translateY(210px) scale(.64) rotate(8deg); filter: blur(1px); }
}

.promo-intro-media {
  position: relative;
  height: 190px;
  background: #17130f;
  overflow: hidden;
}

.promo-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .68;
  transform: scale(1.05);
}

.promo-intro-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(196,154,108,0.22), transparent 32%),
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(23,19,15,0.78));
}

.promo-intro-smoke {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 62px;
  height: 62px;
  z-index: 2;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 35%, rgba(218,43,42,0.92), transparent 28%),
    radial-gradient(circle at 58% 38%, rgba(33,90,170,0.86), transparent 30%),
    radial-gradient(circle at 48% 66%, rgba(244,173,43,0.92), transparent 28%);
  filter: blur(9px);
  opacity: .88;
  animation: promoSmokeFloat 2.8s ease-in-out infinite alternate;
}

@keyframes promoSmokeFloat {
  from { transform: translateY(0) rotate(-3deg) scale(.98); }
  to { transform: translateY(-8px) rotate(6deg) scale(1.08); }
}

.promo-intro-body {
  padding: 1.25rem;
}

.promo-intro-title {
  margin: 0 0 0.5rem;
  font-size: 1.62rem;
  line-height: 1.08;
  color: #2f281f;
}

.promo-intro-text {
  margin: 0 0 1rem;
  color: #6a5f52;
  line-height: 1.45;
  font-size: .92rem;
}

.promo-intro-actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}

.table-builder-section {
  position: relative;
}

.table-builder-card {
  border-radius: 24px;
  border: 1px solid rgba(196,154,108,0.34);
  background:
    radial-gradient(circle at 8% 0%, rgba(196,154,108,0.12), transparent 26%),
    linear-gradient(135deg, rgba(255,250,243,0.98), rgba(242,234,224,0.96));
  box-shadow: 0 16px 34px rgba(43,38,32,0.07);
  padding: 1.15rem;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(260px, 1fr);
  gap: 1rem;
}

.table-builder-lead {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.table-builder-title {
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  line-height: 1.06;
  margin: 0 0 0.55rem;
  color: #2f281f;
}

.table-builder-text {
  color: #6a5f52;
  line-height: 1.45;
  font-size: 0.92rem;
  margin: 0;
}

.table-builder-controls {
  display: grid;
  gap: 0.8rem;
}

.table-builder-label {
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a5836;
}

.table-builder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.38rem;
}

.table-chip {
  border: 1px solid rgba(196,154,108,0.55);
  background: rgba(255,255,255,0.72);
  color: #3b332a;
  border-radius: 999px;
  padding: 0.45rem 0.78rem;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.table-chip.active {
  background: #2f281f;
  color: #fffaf3;
  border-color: #2f281f;
}

.table-builder-result {
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(228,215,199,0.95);
  padding: 0.9rem;
  display: grid;
  gap: 0.65rem;
}

.table-result-title {
  color: #2f281f;
  font-weight: 900;
  font-size: 0.96rem;
}

.table-result-items {
  display: grid;
  gap: 0.42rem;
}

.table-result-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  color: #6a5f52;
  font-size: 0.82rem;
}

.table-result-row strong {
  color: #3b332a;
}

.table-result-price {
  color: #3b332a;
  font-weight: 850;
}

.table-result-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Etapa 7 (fidelidad a maqueta): sin tarjeta propia (border/gradient) para
   todo el bloque -la referencia solo tiene una etiqueta chica + la grilla
   de tarjetas individuales-. */
.smart-suggestions-box {
  margin-top: 0.75rem;
  display: none;
  gap: 0.6rem;
}

.smart-suggestions-box.show {
  display: grid;
}

.smart-suggestions-title {
  color: #2f281f;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Grilla compacta de hasta 3 columnas por fila (admite filas adicionales
   si algun dia hay mas de 3 sugerencias), reemplaza la fila horizontal
   anterior. */
.smart-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.smart-suggestion-item {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid rgba(228,215,199,0.84);
  border-radius: 13px;
  text-align: left;
}

/* Fila superior: foto real pequeña a la izquierda, fondo crema de la
   tarjeta visible a la derecha, botón "+" dorado circular completamente
   fuera de la foto (no superpuesto) -decision explicita del usuario: el
   "+" no va sobre la fotografia-. */
.smart-suggestion-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

.smart-suggestion-top img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.smart-suggestion-add {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(196, 154, 108, 0.35);
}

.smart-suggestion-add:active {
  transform: scale(0.92);
}

.smart-suggestion-name {
  color: #3b332a;
  font-weight: 850;
  font-size: 0.74rem;
  line-height: 1.22;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.smart-suggestion-price {
  color: #7a6a58;
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-experience-panel {
  display: grid;
  gap: 0.8rem;
}

.admin-experience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.admin-experience-card {
  border: 1px solid rgba(228,215,199,0.95);
  background: rgba(255,255,255,0.72);
  border-radius: 16px;
  padding: 0.8rem;
  display: grid;
  gap: 0.55rem;
}

.admin-experience-title {
  font-weight: 900;
  color: #2f281f;
  font-size: 0.9rem;
}

.admin-experience-text {
  color: #7a6a58;
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-experience-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem 0.75rem;
}

.admin-experience-options label {
  font-size: 0.76rem;
  color: #3b332a;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

@media (max-width: 760px) {
  .experience-coupon-band,
  .experience-coupon-copy,
  .experience-coupon-actions {
    align-items: stretch;
  }

  .experience-coupon-band {
    flex-direction: column;
  }

  .experience-coupon-actions {
    justify-content: flex-start;
  }

  .weekly-promo-landed-card,
  .table-builder-card {
    grid-template-columns: 1fr;
  }

  .weekly-promo-landed-media {
    min-height: 165px;
  }

  .admin-experience-grid {
    grid-template-columns: 1fr;
  }
}



/* ============================
   V57 - Ajustes experiencias premium
   - Evita duplicar Promo semanal como producto cuando ya existe tarjeta destacada.
   - Fondo editable para la tarjeta que aterriza en Ofertas.
   - Texto de sugerencias más claro en el carrito.
============================ */
.weekly-promo-landed-card.v57-weekly-style-premium {
  background:
    radial-gradient(circle at 18% 12%, rgba(196,154,108,0.28), transparent 30%),
    linear-gradient(135deg, #201711 0%, #3f2e22 48%, #5d432d 100%) !important;
  border-color: rgba(214, 181, 136, 0.42) !important;
  box-shadow: 0 22px 46px rgba(31, 21, 13, 0.22) !important;
}

.weekly-promo-landed-card.v57-weekly-style-premium .weekly-promo-landed-body {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}

.weekly-promo-landed-card.v57-weekly-style-premium .weekly-promo-landed-title,
.weekly-promo-landed-card.v57-weekly-style-premium .weekly-promo-landed-text {
  color: #fffaf3 !important;
}

.weekly-promo-landed-card.v57-weekly-style-premium .weekly-promo-landed-text {
  opacity: 0.86;
}

.weekly-promo-landed-card.v57-weekly-style-premium .weekly-promo-kicker {
  background: rgba(255,250,243,0.94) !important;
  color: #3b2a1d !important;
}

.weekly-promo-landed-card.v57-weekly-style-premium .experience-btn {
  background: #fffaf3 !important;
  color: #2f281f !important;
  border-color: rgba(255,250,243,0.72) !important;
}

.weekly-promo-landed-card.v57-weekly-style-premium .experience-btn.secondary {
  background: rgba(255,255,255,0.08) !important;
  color: #fffaf3 !important;
  border-color: rgba(255,250,243,0.32) !important;
}

.weekly-promo-landed-card.v57-weekly-style-image {
  background: #18120d !important;
  border-color: rgba(214,181,136,0.42) !important;
}

.weekly-promo-landed-card.v57-weekly-style-image .weekly-promo-landed-body {
  background:
    linear-gradient(135deg, rgba(22,16,11,0.94), rgba(71,49,31,0.82));
}

.weekly-promo-landed-card.v57-weekly-style-image .weekly-promo-landed-title,
.weekly-promo-landed-card.v57-weekly-style-image .weekly-promo-landed-text {
  color: #fffaf3 !important;
}

.weekly-promo-landed-card.v57-weekly-style-custom {
  background: var(--v57-weekly-custom-bg, #3f2e22) !important;
  border-color: rgba(214,181,136,0.42) !important;
}

.weekly-promo-landed-card.v57-weekly-style-custom .weekly-promo-landed-title,
.weekly-promo-landed-card.v57-weekly-style-custom .weekly-promo-landed-text {
  color: #fffaf3 !important;
}

.smart-suggestions-title.v57-smart-title,
.smart-suggestions-title {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 0.88rem !important;
  line-height: 1.25 !important;
}

.v57-admin-extra {
  margin-top: 0.8rem;
  border-top: 1px solid rgba(228,215,199,0.95);
  padding-top: 0.8rem;
}

.v57-admin-extra .admin-field input[type="color"] {
  width: 100%;
  height: 38px;
  padding: 0.18rem;
  border-radius: 10px;
}



/* ============================
   V66: REDISEÑO PREMIUM INGRESAR / CREAR CUENTA
   Solo afecta el modal de cuenta. No toca header, productos ni carrito.
============================ */
.auth-modal {
  width: min(980px, calc(100vw - 1.4rem)) !important;
  max-height: min(92vh, 860px) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(250px, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas:
    "side head"
    "side card"
    "side forms";
  overflow: hidden !important;
  background: linear-gradient(135deg, #fffaf3 0%, #f7efe4 100%) !important;
  border-radius: 26px !important;
  border: 1px solid rgba(196, 154, 108, 0.34) !important;
}

.auth-close {
  z-index: 5;
  top: 1rem !important;
  right: 1rem !important;
  background: rgba(255,250,243,0.94) !important;
  border: 1px solid rgba(196,154,108,0.28) !important;
  color: #3b332a !important;
}

.auth-side-panel-v66 {
  grid-area: side;
  min-height: 100%;
  padding: 1.35rem 1.18rem;
  background:
    radial-gradient(circle at 18% 12%, rgba(214, 181, 136, 0.38), transparent 34%),
    linear-gradient(145deg, #30281f 0%, #463729 48%, #1e1914 100%);
  color: #fffaf3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}

.auth-side-panel-v66::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 46%);
  pointer-events: none;
}

.auth-side-eyebrow-v66 {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #e7c79b;
  font-weight: 850;
}

.auth-side-title-v66 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.08;
  font-weight: 900;
  max-width: 12rem;
}

.auth-side-text-v66 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255,250,243,0.78);
  font-size: 0.88rem;
  line-height: 1.5;
}

.auth-side-steps-v66 {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.55rem;
}

.auth-side-step-v66 {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 0.55rem;
  align-items: start;
  padding: 0.62rem;
  border-radius: 16px;
  background: rgba(255,250,243,0.09);
  border: 1px solid rgba(231,199,155,0.18);
}

.auth-side-step-v66 span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(231,199,155,0.22);
  color: #ffe7c0;
  font-size: 0.78rem;
  font-weight: 900;
  grid-row: span 2;
}

.auth-side-step-v66 strong {
  font-size: 0.82rem;
  line-height: 1.15;
}

.auth-side-step-v66 small {
  color: rgba(255,250,243,0.68);
  font-size: 0.72rem;
  line-height: 1.3;
}

.auth-side-note-v66 {
  position: relative;
  z-index: 1;
  margin-top: 0.15rem;
  padding: 0.74rem;
  border-radius: 14px;
  color: #f7e3c6;
  background: rgba(13,13,13,0.18);
  border: 1px dashed rgba(231,199,155,0.28);
  font-size: 0.74rem;
  line-height: 1.4;
}

.auth-modal-header {
  grid-area: head;
  padding: 1.35rem 3.4rem 0.4rem 1.35rem !important;
  margin: 0 !important;
}

.auth-modal-kicker {
  font-size: 0.66rem !important;
  letter-spacing: 0.18em !important;
  color: #9c6d39 !important;
  font-weight: 900;
}

.auth-modal-title {
  font-size: clamp(1.28rem, 2.4vw, 1.8rem) !important;
  letter-spacing: -0.025em;
}

.auth-modal-intro {
  font-size: 0.9rem !important;
  max-width: 31rem;
}

#accountLoggedCard {
  grid-area: card;
  margin: 0.75rem 1.35rem 1.35rem 1.35rem;
}

#accountFormsWrap {
  grid-area: forms;
  padding: 0.65rem 1.35rem 1.35rem 1.35rem;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.auth-tabs {
  width: 100% !important;
  margin-bottom: 0.75rem !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 16px !important;
  background: #eee3d5 !important;
  padding: 0.32rem !important;
}

.auth-tab {
  min-height: 44px;
  font-size: 0.88rem !important;
  font-weight: 850 !important;
  color: #6a5a48 !important;
  border-radius: 13px !important;
}

.auth-tab.active {
  background: linear-gradient(180deg, #fffaf3, #fff4e8) !important;
  color: #2f281f !important;
  box-shadow: 0 7px 20px rgba(70, 50, 29, 0.08), inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

.auth-notice {
  background: linear-gradient(135deg, rgba(255,250,243,0.98), rgba(246,235,222,0.98)) !important;
  border: 1px solid rgba(196,154,108,0.35) !important;
  border-radius: 17px !important;
  padding: 0.82rem 0.9rem !important;
  color: #62513f !important;
}

.auth-helper {
  color: #7a6a58 !important;
}

.auth-form.active,
.verification-box.active {
  display: grid !important;
  gap: 0.82rem !important;
  animation: authFadeInV66 0.22s ease both;
}

@keyframes authFadeInV66 {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.auth-grid,
.account-edit-grid,
.delivery-edit-grid {
  gap: 0.78rem !important;
}

.auth-form-section-title-v66 {
  grid-column: 1 / -1;
  margin: 0.2rem 0 -0.15rem;
  color: #3b332a;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.auth-form-section-title-v66::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(196,154,108,0.42), transparent);
}

.auth-field {
  color: #5f5143 !important;
  font-weight: 820 !important;
}

.auth-field input,
.auth-field textarea,
.auth-field select,
.account-edit-grid input,
.account-edit-grid textarea,
.account-edit-grid select,
.delivery-edit-grid input,
.delivery-edit-grid textarea,
.delivery-edit-grid select {
  border-radius: 14px !important;
  border: 1px solid rgba(216,199,177,0.95) !important;
  background: rgba(255,255,255,0.92) !important;
  min-height: 44px;
  padding: 0.7rem 0.78rem !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.auth-field input:focus,
.auth-field textarea:focus,
.auth-field select:focus,
.account-edit-grid input:focus,
.account-edit-grid textarea:focus,
.account-edit-grid select:focus,
.delivery-edit-grid input:focus,
.delivery-edit-grid textarea:focus,
.delivery-edit-grid select:focus {
  border-color: rgba(196,154,108,0.95) !important;
  box-shadow: 0 0 0 4px rgba(196,154,108,0.13), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  outline: none !important;
  background: #fff !important;
}

.auth-actions {
  padding-top: 0.12rem;
}

.auth-actions .btn-primary,
.account-edit-actions .btn-primary,
.delivery-edit-actions .btn-primary {
  min-height: 42px;
  padding: 0.64rem 1.06rem !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 18px rgba(177,131,79,0.16);
}

.auth-actions .btn-secondary,
.account-edit-actions .btn-secondary,
.delivery-edit-actions .btn-secondary {
  min-height: 42px;
  padding: 0.64rem 1rem !important;
  border-radius: 999px !important;
  font-weight: 820 !important;
  background: rgba(255,250,243,0.72) !important;
  border: 1px solid rgba(196,154,108,0.42) !important;
}

.auth-login-intro-v66 {
  display: grid;
  gap: 0.28rem;
  padding: 0.85rem;
  border-radius: 17px;
  background: #fff;
  border: 1px solid rgba(228,215,199,0.95);
  color: #3b332a;
}

.auth-login-intro-v66 strong {
  font-size: 0.98rem;
}

.auth-login-intro-v66 span {
  color: #7a6a58;
  font-size: 0.84rem;
  line-height: 1.4;
}

.verification-box {
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(196,154,108,0.32) !important;
  padding: 1rem !important;
}

.verification-demo-code {
  border-radius: 999px !important;
  width: fit-content;
  padding: 0.46rem 0.82rem !important;
  background: #332920 !important;
  color: #fffaf3 !important;
  font-weight: 900;
}

.account-card.active {
  border-radius: 20px !important;
  padding: 1rem !important;
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 10px 26px rgba(43,38,32,0.06);
}

.account-section,
.account-edit-panel,
.delivery-edit-panel {
  border-radius: 18px !important;
}

@media (max-width: 860px) {
  .auth-modal {
    width: min(100%, calc(100vw - 1rem)) !important;
    max-height: calc(100dvh - 1rem) !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "side"
      "head"
      "card"
      "forms";
    overflow-y: auto !important;
  }

  .auth-side-panel-v66 {
    min-height: auto;
    padding: 1rem 1rem 0.9rem;
    gap: 0.62rem;
  }

  .auth-side-title-v66 {
    max-width: none;
    font-size: 1.12rem;
  }

  .auth-side-text-v66 {
    font-size: 0.8rem;
  }

  .auth-side-steps-v66 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .auth-side-step-v66 {
    grid-template-columns: 1fr;
    padding: 0.55rem;
    gap: 0.28rem;
  }

  .auth-side-step-v66 span {
    width: 24px;
    height: 24px;
    grid-row: auto;
    font-size: 0.7rem;
  }

  .auth-side-step-v66 small {
    display: none;
  }

  .auth-side-note-v66 {
    display: none;
  }

  .auth-modal-header {
    padding: 0.95rem 3.25rem 0.2rem 1rem !important;
  }

  #accountFormsWrap {
    padding: 0.6rem 1rem 1rem !important;
    overflow: visible;
  }

  #accountLoggedCard {
    margin: 0.65rem 1rem 1rem !important;
  }

  .auth-grid,
  .account-edit-grid,
  .delivery-edit-grid {
    grid-template-columns: 1fr !important;
  }

  .auth-field.full,
  .auth-field-wide {
    grid-column: auto !important;
  }
}

@media (max-width: 520px) {
  .auth-overlay {
    padding: 0.45rem !important;
    align-items: stretch !important;
  }

  .auth-side-steps-v66 {
    grid-template-columns: 1fr;
  }

  .auth-side-step-v66 {
    grid-template-columns: 26px 1fr;
    align-items: center;
  }

  .auth-side-step-v66 strong {
    font-size: 0.78rem;
  }

  .auth-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .auth-tab {
    font-size: 0.82rem !important;
  }

  .auth-modal-title {
    font-size: 1.22rem !important;
  }
}



/* ============================
   V67: SCROLL INTERNO EN LOGIN PREMIUM WEB
   Corrige el formulario en desktop para poder completar todos los campos.
============================ */
@media (min-width: 861px) {
  .auth-overlay {
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-modal {
    height: min(92vh, 860px) !important;
    max-height: min(92vh, 860px) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .auth-side-panel-v66 {
    min-height: 0 !important;
    height: 100% !important;
  }

  #accountFormsWrap {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 1.8rem !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;
  }

  #accountFormsWrap::-webkit-scrollbar {
    width: 9px;
  }

  #accountFormsWrap::-webkit-scrollbar-track {
    background: rgba(243, 237, 228, 0.75);
    border-radius: 999px;
  }

  #accountFormsWrap::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.58);
    border-radius: 999px;
    border: 2px solid rgba(243, 237, 228, 0.75);
  }

  #accountFormsWrap::-webkit-scrollbar-thumb:hover {
    background: rgba(177, 131, 79, 0.76);
  }
}



/* ============================
   V72 - MI CUENTA COMO PÁGINA + FAVORITOS COMO SECCIÓN
============================ */
.account-page-v72 {
  display: none;
  order: 72;
}

.account-page-v72.active {
  display: block;
}

.account-page-shell-v72 {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.45fr);
  gap: 1rem;
  align-items: start;
}

.account-hero-v72,
.account-card-v72 {
  border: 1px solid rgba(196,154,108,.28);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,250,243,.96), rgba(246,238,228,.94));
  box-shadow: 0 14px 34px rgba(70, 50, 28, .08);
}

.account-hero-v72 {
  padding: 1.15rem;
  position: sticky;
  top: calc(var(--header-offset, 150px) + 1rem);
}

.account-kicker-v72 {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dark);
  font-weight: 900;
  margin-bottom: .4rem;
}

.account-title-v72 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.03;
  color: #2f281f;
}

.account-intro-v72 {
  color: #796956;
  line-height: 1.45;
  margin: .75rem 0 1rem;
}

.account-summary-v72 {
  display: grid;
  gap: .65rem;
}

.account-summary-row-v72 {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .7rem;
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(196,154,108,.18);
}

.account-summary-icon-v72 {
  width: 31px;
  height: 31px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(196,154,108,.18);
  color: #7a5127;
  flex: 0 0 auto;
}

.account-summary-icon-v72 svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-summary-row-v72 strong {
  display: block;
  font-size: .82rem;
  color: #3c3329;
  margin-bottom: .15rem;
}

.account-summary-row-v72 span {
  display: block;
  font-size: .79rem;
  color: #7a6a58;
  line-height: 1.35;
}

.account-main-v72 {
  display: grid;
  gap: 1rem;
}

.account-card-v72 {
  padding: 1rem;
}

.account-card-head-v72 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.account-card-title-v72 {
  margin: 0;
  font-size: 1.08rem;
  color: #2f281f;
}

.account-card-sub-v72 {
  margin: .2rem 0 0;
  color: #7a6a58;
  font-size: .86rem;
  line-height: 1.4;
}

.account-info-grid-v72 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.account-info-item-v72 {
  padding: .78rem;
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(196,154,108,.18);
}

.account-info-item-v72 small {
  display: block;
  color: #9a846b;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 900;
  margin-bottom: .22rem;
}

.account-info-item-v72 span {
  color: #3b332a;
  font-weight: 750;
  line-height: 1.35;
}

.account-actions-v72 {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .85rem;
}

.account-mini-order-v72 {
  display: grid;
  gap: .45rem;
}

.account-order-line-v72 {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dashed rgba(196,154,108,.22);
  padding-bottom: .38rem;
  color: #7a6a58;
  font-size: .86rem;
}

.account-order-line-v72 strong {
  color: #3b332a;
  text-align: right;
}

.account-help-grid-v72 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.account-help-item-v72 {
  border: 1px solid rgba(196,154,108,.22);
  border-radius: 16px;
  background: rgba(255,255,255,.62);
  padding: .8rem;
}

.account-help-item-v72 strong {
  display:block;
  color:#3b332a;
  margin-bottom:.25rem;
}

.account-help-item-v72 span {
  color:#7a6a58;
  font-size:.82rem;
  line-height:1.35;
}

.favorites-section-v72 {
  display: none;
  order: 56;
}

.favorites-section-v72.active {
  display: block;
}

.favorites-empty-v72 {
  border: 1px solid rgba(196,154,108,.25);
  background: linear-gradient(145deg, rgba(255,250,243,.94), rgba(247,239,230,.92));
  border-radius: 22px;
  padding: 1rem;
  color: #7a6a58;
  line-height: 1.45;
}

.account-favorites-mini-v72 {
  display: grid;
  gap: .55rem;
}

.account-fav-row-v72 {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .55rem;
  border: 1px solid rgba(196,154,108,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.65);
}

.account-fav-row-v72 img {
  width: 54px;
  height: 44px;
  object-fit: cover;
  border-radius: 12px;
}

.account-fav-row-v72 strong {
  display:block;
  color:#3b332a;
  font-size:.86rem;
}

.account-fav-row-v72 span {
  color:#7a6a58;
  font-size:.78rem;
}

@media (max-width: 780px) {
  .account-page-shell-v72 {
    grid-template-columns: 1fr;
  }

  .account-hero-v72 {
    position: static;
  }

  .account-info-grid-v72,
  .account-help-grid-v72 {
    grid-template-columns: 1fr;
  }

  .account-card-head-v72 {
    flex-direction: column;
  }

  .account-fav-row-v72 {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .account-fav-row-v72 .btn-secondary {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* ============================
   V87 - Análisis del negocio
============================ */
.analytics-v87-grid { align-items:stretch; }
.analytics-v87-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; background:linear-gradient(135deg, rgba(255,250,243,.96), rgba(196,154,108,.12)); }
.analytics-v87-period { display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }
.analytics-v87-kpi { min-height:142px; justify-content:center; }
.analytics-v87-kpi span { color:#8a6d4d; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.analytics-v87-kpi strong { display:block; color:#241e18; font-size:2.05rem; line-height:1; margin:.25rem 0; }
.analytics-v87-kpi em { color:#7a6a58; font-size:.78rem; font-style:normal; }
.analytics-v87-funnel, .analytics-v87-bars { display:grid; gap:.6rem; margin-top:.75rem; }
.analytics-v87-funnel div, .analytics-v87-bars div { display:grid; grid-template-columns:minmax(120px,1fr) minmax(110px,2fr) auto; align-items:center; gap:.65rem; color:#5d5146; font-size:.8rem; }
.analytics-v87-funnel i, .analytics-v87-bars i { display:block; height:12px; border-radius:999px; background:linear-gradient(90deg, #2b2620, #c49a6c); box-shadow:0 6px 14px rgba(43,38,32,.12); }
.analytics-v87-funnel strong, .analytics-v87-bars strong { color:#2f281f; font-size:.82rem; }
.analytics-v87-split { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:.7rem 0; }
.analytics-v87-split div { border:1px solid rgba(196,154,108,.25); background:rgba(255,250,243,.8); border-radius:16px; padding:.8rem; text-align:center; }
.analytics-v87-split strong { display:block; color:#2b2620; font-size:1.45rem; }
.analytics-v87-split span { color:#7a6a58; font-size:.78rem; font-weight:800; }
.analytics-v87-table { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-top:.75rem; }
.analytics-v87-table div { border:1px solid rgba(228,215,199,.95); border-radius:16px; background:rgba(255,255,255,.72); padding:.75rem; }
.analytics-v87-table span, .analytics-v87-table em { display:block; color:#7a6a58; font-size:.76rem; font-style:normal; }
.analytics-v87-table strong { display:block; color:#2b2620; font-size:.95rem; margin:.12rem 0; }
.analytics-v87-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.75rem; }
.analytics-v87-tags span { border-radius:999px; padding:.34rem .62rem; background:rgba(47,40,31,.06); border:1px solid rgba(196,154,108,.22); color:#5a4939; font-size:.74rem; font-weight:850; }
@media (max-width:780px){ .analytics-v87-hero{flex-direction:column;} .analytics-v87-funnel div,.analytics-v87-bars div{grid-template-columns:1fr;} .analytics-v87-table{grid-template-columns:1fr;} .analytics-v87-period{justify-content:flex-start;} }



/* Inline style block migrado desde index.html */
/* ============================
   V58 - Promo semanal más dinámica + scroll mobile más preciso
============================ */
.promo-intro-overlay.show {
  perspective: 1000px;
}

.promo-intro-card {
  animation: promoIntroInV58 0.44s cubic-bezier(.16, .9, .22, 1.08) !important;
  will-change: transform, opacity, filter;
}

@keyframes promoIntroInV58 {
  0% { opacity: 0; transform: translateY(26px) scale(.90) rotateX(7deg) rotate(-2deg); filter: blur(2px); }
  62% { opacity: 1; transform: translateY(-4px) scale(1.025) rotateX(0) rotate(.6deg); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
}

.promo-intro-card::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.24) 46%, transparent 58%);
  opacity: 0;
  transform: translateX(-40%) rotate(8deg);
}

.promo-intro-overlay.show .promo-intro-card::after {
  animation: promoIntroShineV58 0.75s ease 0.08s both;
}

@keyframes promoIntroShineV58 {
  0% { opacity: 0; transform: translateX(-42%) rotate(8deg); }
  35% { opacity: .78; }
  100% { opacity: 0; transform: translateX(42%) rotate(8deg); }
}

.promo-intro-card.fly-away,
.promo-intro-card.fly-away-fast {
  animation: promoIntroFlyV58 0.50s cubic-bezier(.38, .02, .18, 1) forwards !important;
}

@keyframes promoIntroFlyV58 {
  0% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
  38% { opacity: 1; transform: translateY(-20px) scale(.92) rotate(-5deg); filter: blur(.2px); }
  100% { opacity: 0; transform: translateY(150px) translateX(38px) scale(.50) rotate(16deg); filter: blur(1.2px); }
}

.promo-intro-smoke {
  animation: promoSmokeFloatV58 1.45s ease-in-out infinite alternate !important;
}

@keyframes promoSmokeFloatV58 {
  from { transform: translateY(0) rotate(-6deg) scale(.96); filter: blur(8px) saturate(1.05); }
  to { transform: translateY(-11px) rotate(9deg) scale(1.14); filter: blur(9px) saturate(1.22); }
}

/* Ajuste visual para que el anclaje mobile no quede tan arriba de la sección */
@media (max-width: 760px) {
  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel,
  #tableBuilderSection {
    scroll-margin-top: 138px !important;
  }
}

.v58-admin-note {
  margin-top: 0.45rem;
  padding: 0.58rem 0.66rem;
  border-radius: 12px;
  background: rgba(47, 40, 31, 0.05);
  border: 1px solid rgba(196,154,108,0.22);
  color: #6a5f52;
  font-size: 0.76rem;
  line-height: 1.35;
}


/* ============================
   V67: SCROLL INTERNO EN LOGIN PREMIUM WEB
   Corrige el formulario en desktop para poder completar todos los campos.
============================ */
@media (min-width: 861px) {
  .auth-overlay {
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-modal {
    height: min(92vh, 860px) !important;
    max-height: min(92vh, 860px) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .auth-side-panel-v66 {
    min-height: 0 !important;
    height: 100% !important;
  }

  #accountFormsWrap {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 1.8rem !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;
  }

  #accountFormsWrap::-webkit-scrollbar {
    width: 9px;
  }

  #accountFormsWrap::-webkit-scrollbar-track {
    background: rgba(243, 237, 228, 0.75);
    border-radius: 999px;
  }

  #accountFormsWrap::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.58);
    border-radius: 999px;
    border: 2px solid rgba(243, 237, 228, 0.75);
  }

  #accountFormsWrap::-webkit-scrollbar-thumb:hover {
    background: rgba(177, 131, 79, 0.76);
  }
}



/* Inline style block migrado desde index.html */
/* ============================
   V59 - Orden administrable + fondos para Armá tu mesa
============================ */
main#inicio {
  display: flex;
  flex-direction: column;
}

.table-builder-card.v59-table-bg-premium {
  background:
    radial-gradient(circle at 9% 0%, rgba(196,154,108,0.32), transparent 28%),
    linear-gradient(135deg, #3a2a20 0%, #17120e 100%) !important;
  color: #fffaf3;
  border-color: rgba(196,154,108,0.48);
  box-shadow: 0 18px 42px rgba(31, 22, 14, 0.20);
}
.table-builder-card.v59-table-bg-premium .eyebrow,
.table-builder-card.v59-table-bg-premium .table-builder-label { color: #e6c49e; }
.table-builder-card.v59-table-bg-premium .table-builder-title,
.table-builder-card.v59-table-bg-premium .table-builder-text { color: #fffaf3; }
.table-builder-card.v59-table-bg-premium .table-chip { background: rgba(255,250,243,0.12); color: #fffaf3; border-color: rgba(230,196,158,0.56); }
.table-builder-card.v59-table-bg-premium .table-chip.active { background: #c49a6c; color: #1b130f; border-color: #c49a6c; }

.table-builder-card.v59-table-bg-gold {
  background:
    radial-gradient(circle at 8% 0%, rgba(70,48,28,0.12), transparent 28%),
    linear-gradient(135deg, #e8d3b7 0%, #c49a6c 100%) !important;
  border-color: rgba(134,91,48,0.34);
}
.table-builder-card.v59-table-bg-gold .table-builder-title { color: #2f281f; }
.table-builder-card.v59-table-bg-gold .table-builder-text { color: #514233; }

.table-builder-card.v59-table-bg-photo {
  background: linear-gradient(135deg, rgba(20,16,13,0.86), rgba(55,38,25,0.72));
  background-size: cover;
  background-position: center;
  color: #fffaf3;
  border-color: rgba(196,154,108,0.55);
  box-shadow: 0 18px 44px rgba(31, 22, 14, 0.22);
}
.table-builder-card.v59-table-bg-photo .eyebrow,
.table-builder-card.v59-table-bg-photo .table-builder-label { color: #e6c49e; }
.table-builder-card.v59-table-bg-photo .table-builder-title,
.table-builder-card.v59-table-bg-photo .table-builder-text { color: #fffaf3; }
.table-builder-card.v59-table-bg-photo .table-chip { background: rgba(255,250,243,0.14); color: #fffaf3; border-color: rgba(230,196,158,0.56); }
.table-builder-card.v59-table-bg-photo .table-chip.active { background: #c49a6c; color: #1b130f; border-color: #c49a6c; }

.table-builder-card.v59-table-bg-custom {
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,0.14), transparent 26%),
    linear-gradient(135deg, var(--v59-table-custom, #3f2e22), color-mix(in srgb, var(--v59-table-custom, #3f2e22) 72%, #000 28%)) !important;
  color: #fffaf3;
  border-color: rgba(196,154,108,0.45);
}
.table-builder-card.v59-table-bg-custom .eyebrow,
.table-builder-card.v59-table-bg-custom .table-builder-label { color: #f1d6b2; }
.table-builder-card.v59-table-bg-custom .table-builder-title,
.table-builder-card.v59-table-bg-custom .table-builder-text { color: #fffaf3; }
.table-builder-card.v59-table-bg-custom .table-chip { background: rgba(255,250,243,0.14); color: #fffaf3; border-color: rgba(230,196,158,0.56); }
.table-builder-card.v59-table-bg-custom .table-chip.active { background: #c49a6c; color: #1b130f; border-color: #c49a6c; }

.admin-v59-extra-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  align-items: end;
}
.admin-v59-extra-grid .full { grid-column: 1 / -1; }
.admin-v59-note {
  border: 1px dashed rgba(196,154,108,.38);
  background: rgba(255,250,243,.72);
  border-radius: 14px;
  padding: .68rem .75rem;
  color: #6a5f52;
  font-size: .78rem;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .admin-v59-extra-grid { grid-template-columns: 1fr; }
}


/* ============================
   V67: SCROLL INTERNO EN LOGIN PREMIUM WEB
   Corrige el formulario en desktop para poder completar todos los campos.
============================ */
@media (min-width: 861px) {
  .auth-overlay {
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-modal {
    height: min(92vh, 860px) !important;
    max-height: min(92vh, 860px) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .auth-side-panel-v66 {
    min-height: 0 !important;
    height: 100% !important;
  }

  #accountFormsWrap {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 1.8rem !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;
  }

  #accountFormsWrap::-webkit-scrollbar {
    width: 9px;
  }

  #accountFormsWrap::-webkit-scrollbar-track {
    background: rgba(243, 237, 228, 0.75);
    border-radius: 999px;
  }

  #accountFormsWrap::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.58);
    border-radius: 999px;
    border: 2px solid rgba(243, 237, 228, 0.75);
  }

  #accountFormsWrap::-webkit-scrollbar-thumb:hover {
    background: rgba(177, 131, 79, 0.76);
  }
}



/* Inline style block migrado desde index.html */
/* ============================
   V60 - Favoritos con aviso de sesión + newsletter al final
============================ */
.favorite-login-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 18px);
  z-index: 460;
  width: min(92vw, 430px);
  background: linear-gradient(135deg, #2f281f 0%, #17130f 100%);
  color: #fffaf3;
  border: 1px solid rgba(196,154,108,0.45);
  border-radius: 18px;
  padding: 0.82rem 1rem;
  box-shadow: 0 18px 44px rgba(20, 14, 8, 0.28);
  display: none;
  align-items: flex-start;
  gap: 0.72rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.favorite-login-toast.visible {
  display: flex;
  opacity: 1;
  transform: translate(-50%, 0);
}
.favorite-login-toast-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(196,154,108,0.22);
  color: #e8c49a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
.favorite-login-toast-title {
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.2;
  margin-bottom: .15rem;
}
.favorite-login-toast-text {
  font-size: .78rem;
  color: rgba(255,250,243,0.82);
  line-height: 1.35;
}
.favorite-login-toast-action {
  margin-left: auto;
  flex: 0 0 auto;
  border: 1px solid rgba(255,250,243,0.22);
  background: rgba(255,250,243,0.08);
  color: #fffaf3;
  border-radius: 999px;
  padding: .36rem .68rem;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}
.favorite-login-toast-action:hover {
  background: #c49a6c;
  border-color: #c49a6c;
  color: #1b130f;
}
@media (max-width: 760px) {
  .favorite-login-toast {
    bottom: 1rem;
    padding: .74rem .82rem;
    border-radius: 16px;
  }
  .favorite-login-toast-action {
    display: none;
  }
}


/* ============================
   V67: SCROLL INTERNO EN LOGIN PREMIUM WEB
   Corrige el formulario en desktop para poder completar todos los campos.
============================ */
@media (min-width: 861px) {
  .auth-overlay {
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-modal {
    height: min(92vh, 860px) !important;
    max-height: min(92vh, 860px) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .auth-side-panel-v66 {
    min-height: 0 !important;
    height: 100% !important;
  }

  #accountFormsWrap {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 1.8rem !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;
  }

  #accountFormsWrap::-webkit-scrollbar {
    width: 9px;
  }

  #accountFormsWrap::-webkit-scrollbar-track {
    background: rgba(243, 237, 228, 0.75);
    border-radius: 999px;
  }

  #accountFormsWrap::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.58);
    border-radius: 999px;
    border: 2px solid rgba(243, 237, 228, 0.75);
  }

  #accountFormsWrap::-webkit-scrollbar-thumb:hover {
    background: rgba(177, 131, 79, 0.76);
  }
}



/* Inline style block migrado desde index.html */
/* ============================
   V62 - Admin unificado para experiencias: fotos, reglas y edición clara
============================ */
.v62-admin-box {
  margin-top: .8rem;
  border: 1px solid rgba(196,154,108,.28);
  background: rgba(255,250,243,.78);
  border-radius: 16px;
  padding: .85rem;
  display: grid;
  gap: .75rem;
}
.v62-admin-title {
  font-weight: 900;
  color: #2f281f;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .78rem;
}
.v62-admin-text {
  color: #6a5f52;
  font-size: .82rem;
  line-height: 1.42;
}
.v62-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.v62-admin-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.v62-admin-full { grid-column: 1 / -1; }
.v62-admin-preview-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: .7rem;
  align-items: center;
}
.v62-admin-preview-row img {
  width: 88px;
  height: 58px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(196,154,108,.28);
}
.v62-rule-table {
  border: 1px solid rgba(228,215,199,.9);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.6);
}
.v62-rule-row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.6fr auto;
  gap: .5rem;
  align-items: center;
  padding: .58rem .65rem;
  border-bottom: 1px solid rgba(228,215,199,.8);
  font-size: .78rem;
  color: #5f5247;
}
.v62-rule-row:last-child { border-bottom: 0; }
.v62-rule-row strong { color: #2f281f; }
.v62-rule-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .22rem .52rem;
  background: #f3e4cf;
  color: #7b542f;
  font-weight: 850;
  font-size: .7rem;
  white-space: nowrap;
}
.v62-muted-note {
  border: 1px dashed rgba(196,154,108,.36);
  border-radius: 13px;
  padding: .6rem .7rem;
  color: #6a5f52;
  font-size: .78rem;
  line-height: 1.4;
}
.v62-admin-box input[type="file"] {
  font-size: .78rem;
  color: #5f5247;
}
/* Ocultamos el control viejo de visual de tarjeta dentro de Experiencias para que no parezca repetido. V62 lo mueve conceptualmente a Oferta semanal. */
#adminExperiencePanel .v57-admin-extra {
  display: none !important;
}
@media (max-width: 760px) {
  .v62-admin-grid,
  .v62-admin-grid.three,
  .v62-rule-row {
    grid-template-columns: 1fr;
  }
  .v62-admin-preview-row {
    grid-template-columns: 1fr;
  }
  .v62-admin-preview-row img {
    width: 100%;
    height: 130px;
  }
}


/* ============================
   V63 - ADMIN PREMIUM ORGANIZADO + AJUSTES COMERCIALES
============================ */
.admin-demo-panel.admin-v63-active {
  padding: 0;
  overflow: hidden;
  background: #fbf6ef;
}
.admin-v63-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 680px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(196,154,108,.28);
  box-shadow: 0 18px 42px rgba(43,38,32,.08);
}
.admin-v63-sidebar {
  background: linear-gradient(180deg, #2f281f 0%, #17130f 100%);
  color: #fffaf3;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.admin-v63-brand {
  padding: .75rem .7rem 1rem;
  border-bottom: 1px solid rgba(255,250,243,.14);
}
.admin-v63-kicker { font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; color:#d8b88f; font-weight:850; }
.admin-v63-title { margin:.28rem 0 0; font-size:1.05rem; line-height:1.16; font-weight:900; }
.admin-v63-sub { margin:.25rem 0 0; color:rgba(255,250,243,.66); font-size:.78rem; line-height:1.35; }
.admin-v63-nav { display:grid; gap:.35rem; }
.admin-v63-tab {
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:rgba(255,250,243,.78);
  text-align:left;
  padding:.62rem .72rem;
  display:flex;
  align-items:center;
  gap:.62rem;
  cursor:pointer;
  font-weight:800;
  font-size:.84rem;
  transition:background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.admin-v63-tab:hover { background:rgba(255,250,243,.07); color:#fffaf3; transform:translateX(2px); }
.admin-v63-tab.active { background:#fffaf3; color:#2f281f; border-color:rgba(196,154,108,.42); }
.admin-v63-tab-icon { width:1.25rem; text-align:center; color:#d7b081; }
.admin-v63-main { padding:1.05rem; background:linear-gradient(135deg,#fffaf3 0%,#f3ede4 100%); min-width:0; }
.admin-v63-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.admin-v63-page-title { margin:0; font-size:1.35rem; color:#2f281f; line-height:1.16; }
.admin-v63-page-sub { margin:.28rem 0 0; color:#6f6255; font-size:.88rem; line-height:1.45; max-width:780px; }
.admin-v63-status { background:#2f281f; color:#fffaf3; border-radius:999px; padding:.42rem .72rem; font-size:.72rem; font-weight:850; white-space:nowrap; }
.admin-v63-pane { display:none; }
.admin-v63-pane.active { display:block; }
.admin-v63-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.admin-v63-card {
  background:rgba(255,255,255,.85);
  border:1px solid rgba(228,215,199,.95);
  border-radius:18px;
  padding:.9rem;
  box-shadow:0 10px 24px rgba(43,38,32,.04);
}
.admin-v63-card.wide { grid-column:1 / -1; }
.admin-v63-card-title { color:#2f281f; font-weight:900; font-size:.94rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.35rem; }
.admin-v63-card-sub { color:#7a6a58; font-size:.8rem; line-height:1.42; margin-bottom:.7rem; }
.admin-v63-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.admin-v63-field { display:grid; gap:.28rem; font-size:.75rem; color:#7a6a58; font-weight:800; letter-spacing:.02em; }
.admin-v63-input, .admin-v63-select, .admin-v63-textarea {
  width:100%; border:1px solid rgba(196,154,108,.34); border-radius:12px; background:#fffaf3; color:#2f281f;
  padding:.55rem .65rem; font:inherit; font-size:.84rem; font-weight:650;
}
.admin-v63-textarea { min-height:86px; resize:vertical; line-height:1.4; }
.admin-v63-checks { display:grid; gap:.42rem; }
.admin-v63-check { display:flex; align-items:center; gap:.45rem; color:#4b4035; font-weight:760; font-size:.82rem; }
.admin-v63-check input { accent-color:#c49a6c; }
.admin-v63-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.admin-v63-btn {
  border-radius:999px; border:1px solid rgba(196,154,108,.8); background:#fffaf3; color:#3b332a; padding:.52rem .86rem;
  cursor:pointer; font-weight:850; font-size:.82rem; box-shadow:0 4px 12px rgba(88,62,37,.05); transition:all .16s ease;
}
.admin-v63-btn:hover { background:#c49a6c; color:#fff; border-color:#b1834f; transform:translateY(-1px); }
.admin-v63-btn.primary { background:#c49a6c; color:#fff; border-color:#b1834f; }
.admin-v63-btn.dark { background:#2f281f; color:#fffaf3; border-color:#2f281f; }
.admin-v63-note { border:1px dashed rgba(196,154,108,.4); background:#fffaf3; border-radius:14px; padding:.7rem; color:#6a5f52; font-size:.8rem; line-height:1.45; margin-top:.7rem; }
.admin-v63-mini-list { display:grid; gap:.45rem; }
.admin-v63-row { display:flex; justify-content:space-between; align-items:center; gap:.8rem; border-bottom:1px dashed rgba(196,154,108,.22); padding:.42rem 0; font-size:.82rem; color:#4b4035; }
.admin-v63-row:last-child { border-bottom:0; }
.admin-v63-pill { border-radius:999px; padding:.18rem .48rem; background:rgba(196,154,108,.14); color:#8a5c2e; font-size:.68rem; font-weight:900; border:1px solid rgba(196,154,108,.24); white-space:nowrap; }
.admin-v63-pill.ok { color:#276749; background:rgba(47,133,90,.12); border-color:rgba(47,133,90,.24); }
.admin-v63-pill.warn { color:#975a16; background:rgba(214,158,46,.12); border-color:rgba(214,158,46,.28); }
.admin-v63-legacy { margin-top:1rem; }
.admin-v63-legacy summary { cursor:pointer; font-weight:900; color:#6f4c24; padding:.55rem .7rem; border:1px solid rgba(196,154,108,.24); border-radius:14px; background:#fffaf3; }
.admin-v63-legacy .admin-demo-grid { margin-top:.9rem; }

.favorite-login-toast {
  background:linear-gradient(135deg,#fffaf3 0%,#f6eadc 100%) !important;
  color:#2f281f !important;
  border:1px solid rgba(196,154,108,.46) !important;
  box-shadow:0 18px 42px rgba(72,52,31,.16) !important;
}
.favorite-login-toast-icon { background:rgba(196,154,108,.18) !important; color:#9f6d34 !important; }
.favorite-login-toast-title { color:#2f281f !important; }
.favorite-login-toast-text { color:#6a5f52 !important; }
.favorite-login-toast-action { background:#c49a6c !important; color:#fff !important; border-color:#b1834f !important; display:inline-flex !important; align-items:center; }
.favorite-login-toast-action:hover { background:#2f281f !important; color:#fffaf3 !important; }
.btn-add.product-add-button, .product-qty-selected, .product-qty-control-inline {
  background:#fffaf3 !important;
  border-color:rgba(196,154,108,.65) !important;
  color:#3b332a !important;
}
.btn-add.product-add-button:hover, .product-qty-selected:hover {
  background:#d3aa79 !important; color:#fff !important; border-color:#b1834f !important;
}
.cart-minimum-box {
  display:none;
  border:1px solid rgba(196,154,108,.28);
  border-radius:16px;
  padding:.8rem;
  background:#fffaf3;
  gap:.45rem;
  margin:.8rem 0;
}
.cart-minimum-box.show { display:grid; }
.cart-minimum-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem; color:#3b332a; font-weight:900; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; }
.cart-minimum-text { color:#6a5f52; font-size:.82rem; line-height:1.38; }
.cart-progress-track { width:100%; height:8px; background:#efe3d2; border-radius:999px; overflow:hidden; }
.cart-progress-fill { width:0; height:100%; background:#c49a6c; border-radius:999px; transition:width .18s ease; }
.cart-minimum-box.reached .cart-progress-fill { background:#7a9b63; }
.cart-minimum-box.blocked { border-color:rgba(151,90,22,.28); background:#fff8ed; }
.v63-disabled-checkout-note { color:#975a16; font-size:.78rem; line-height:1.35; margin-top:.45rem; display:none; }
.v63-disabled-checkout-note.show { display:block; }

@media (max-width: 860px) {
  .admin-v63-shell { grid-template-columns:1fr; }
  .admin-v63-sidebar { position:relative; }
  .admin-v63-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-v63-tab { font-size:.78rem; padding:.52rem .58rem; }
  .admin-v63-grid, .admin-v63-form-grid { grid-template-columns:1fr; }
  .admin-v63-topbar { flex-direction:column; }
}


/* ============================
   V67: SCROLL INTERNO EN LOGIN PREMIUM WEB
   Corrige el formulario en desktop para poder completar todos los campos.
============================ */
@media (min-width: 861px) {
  .auth-overlay {
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-modal {
    height: min(92vh, 860px) !important;
    max-height: min(92vh, 860px) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .auth-side-panel-v66 {
    min-height: 0 !important;
    height: 100% !important;
  }

  #accountFormsWrap {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 1.8rem !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;
  }

  #accountFormsWrap::-webkit-scrollbar {
    width: 9px;
  }

  #accountFormsWrap::-webkit-scrollbar-track {
    background: rgba(243, 237, 228, 0.75);
    border-radius: 999px;
  }

  #accountFormsWrap::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.58);
    border-radius: 999px;
    border: 2px solid rgba(243, 237, 228, 0.75);
  }

  #accountFormsWrap::-webkit-scrollbar-thumb:hover {
    background: rgba(177, 131, 79, 0.76);
  }
}



/* Inline style block migrado desde index.html */
.favorite-login-toast,
.favorite-login-toast.visible {
  pointer-events: auto !important;
}
.favorite-login-toast-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
@media (max-width: 760px) {
  .favorite-login-toast {
    align-items: center;
  }
  .favorite-login-toast-action {
    display: inline-flex !important;
    padding: .38rem .7rem;
    font-size: .72rem;
  }
}


/* ============================
   V65: DOMICILIO CASA / EDIFICIO
============================ */
.building-field.is-hidden {
  display: none !important;
}

.building-required-mark {
  color: var(--gold-dark);
  font-weight: 900;
}

.auth-field select {
  width: 100%;
  border: 1px solid #d8c7b1;
  border-radius: 11px;
  background: #fff;
  color: #3b332a;
  font: inherit;
  font-size: 0.86rem;
  padding: 0.52rem 0.58rem;
}

.auth-field select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* ============================
   V67: SCROLL INTERNO EN LOGIN PREMIUM WEB
   Corrige el formulario en desktop para poder completar todos los campos.
============================ */
@media (min-width: 861px) {
  .auth-overlay {
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .auth-modal {
    height: min(92vh, 860px) !important;
    max-height: min(92vh, 860px) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .auth-side-panel-v66 {
    min-height: 0 !important;
    height: 100% !important;
  }

  #accountFormsWrap {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 1.8rem !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;
  }

  #accountFormsWrap::-webkit-scrollbar {
    width: 9px;
  }

  #accountFormsWrap::-webkit-scrollbar-track {
    background: rgba(243, 237, 228, 0.75);
    border-radius: 999px;
  }

  #accountFormsWrap::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.58);
    border-radius: 999px;
    border: 2px solid rgba(243, 237, 228, 0.75);
  }

  #accountFormsWrap::-webkit-scrollbar-thumb:hover {
    background: rgba(177, 131, 79, 0.76);
  }
}



/* Inline style block migrado desde index.html */
.product-detail-video-card {
  display: none;
  border: 1px solid rgba(196, 154, 108, 0.26);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,250,243,0.98), rgba(243,237,228,0.94));
  padding: 0.85rem;
  box-shadow: 0 10px 24px rgba(43, 38, 32, 0.06);
}
.product-detail-video-card.show {
  display: grid;
  gap: 0.72rem;
}
.product-detail-video-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}
.product-detail-video-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a97946;
  font-weight: 900;
  margin-bottom: 0.18rem;
}
.product-detail-video-title {
  color: #332b23;
  font-size: 1rem;
  line-height: 1.18;
  font-weight: 900;
}
.product-detail-video-text {
  margin: 0.35rem 0 0;
  color: #6a5f52;
  font-size: 0.84rem;
  line-height: 1.42;
}
.product-detail-video-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.34rem 0.62rem;
  background: rgba(196,154,108,0.14);
  border: 1px solid rgba(196,154,108,0.28);
  color: #7a5836;
  font-size: 0.72rem;
  font-weight: 850;
  white-space: nowrap;
}
.product-detail-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #17130f;
  border: 1px solid rgba(47,40,31,0.16);
  box-shadow: 0 12px 26px rgba(43, 38, 32, 0.12);
}
.product-detail-video-frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.admin-v69-video-preview {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.7rem;
  align-items: center;
  padding: 0.72rem;
  border: 1px dashed rgba(196,154,108,0.42);
  border-radius: 16px;
  background: rgba(255,250,243,0.72);
  color: #6a5f52;
  font-size: 0.82rem;
  line-height: 1.38;
}
.admin-v69-video-thumb {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f281f, #17130f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f3d7a7;
  font-weight: 900;
}
@media (max-width: 760px) {
  .product-detail-video-card { padding: 0.72rem; border-radius: 18px; }
  .product-detail-video-head { display: grid; }
  .product-detail-video-badge { justify-self: start; }
  .product-detail-video-title { font-size: 0.95rem; }
  .product-detail-video-text { font-size: 0.8rem; }
  .admin-v69-video-preview { grid-template-columns: 1fr; }
}


/* Inline style block migrado desde index.html */
body.product-detail-open .back-to-top {
  display: none !important;
}

.product-detail-actions {
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.75rem !important;
  margin-top: 0.45rem !important;
  padding-bottom: 0.35rem !important;
}

.product-detail-cart-action {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 188px !important;
  width: 188px !important;
  flex: 0 0 188px !important;
}

.product-detail-cart-action .btn-add,
.product-detail-cart-action .product-qty-selected,
.product-detail-cart-action .product-qty-control-inline {
  width: 100% !important;
  flex: 0 0 100% !important;
  min-width: 188px !important;
  min-height: 42px !important;
}

.product-detail-cart-action .btn-add {
  padding: 0.58rem 1rem !important;
  font-size: 0.88rem !important;
  font-weight: 750 !important;
}

.product-detail-cart-action .product-qty-selected {
  background: linear-gradient(180deg, #f4eadc, #ead8c2) !important;
  color: #3b332a !important;
  border-color: rgba(196, 154, 108, 0.95) !important;
  font-size: 0.95rem !important;
  box-shadow: 0 8px 18px rgba(196, 154, 108, 0.16) !important;
}

.product-detail-cart-action .product-qty-control-inline {
  grid-template-columns: 42px 1fr 42px !important;
  min-height: 42px !important;
}

.product-detail-cart-action .product-qty-control-inline button {
  height: 42px !important;
  font-size: 1rem !important;
}

.product-detail-cart-action .product-qty-number {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
}

@media (max-width: 760px) {
  .product-detail-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.55rem !important;
  }

  .product-detail-cart-action,
  .product-detail-cart-action .btn-add,
  .product-detail-cart-action .product-qty-selected,
  .product-detail-cart-action .product-qty-control-inline,
  .product-detail-actions .btn-secondary {
    width: 100% !important;
    min-width: 0 !important;
    flex-basis: auto !important;
  }
}


/* Inline style block migrado desde index.html */
@media (min-width: 861px) {
  .auth-modal.account-logged-scroll-v74 {
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "side head"
      "side card"
      "side card" !important;
  }

  .auth-modal.account-logged-scroll-v74 #accountLoggedCard {
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 1.35rem !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;
  }

  .auth-modal.account-logged-scroll-v74 #accountLoggedCard::-webkit-scrollbar {
    width: 9px;
  }

  .auth-modal.account-logged-scroll-v74 #accountLoggedCard::-webkit-scrollbar-track {
    background: rgba(243, 237, 228, 0.75);
    border-radius: 999px;
  }

  .auth-modal.account-logged-scroll-v74 #accountLoggedCard::-webkit-scrollbar-thumb {
    background: rgba(196, 154, 108, 0.58);
    border-radius: 999px;
    border: 2px solid rgba(243, 237, 228, 0.75);
  }

  .auth-modal.account-logged-scroll-v74 #accountLoggedCard::-webkit-scrollbar-thumb:hover {
    background: rgba(177, 131, 79, 0.76);
  }
}

.auth-field input:invalid,
.auth-field textarea:invalid,
.auth-field select:invalid {
  border-color: rgba(177, 72, 57, 0.72) !important;
}


/* Inline style block migrado desde index.html */
.password-field-v75 {
  position: relative;
}

.password-field-v75 input[type="password"],
.password-field-v75 input[type="text"] {
  padding-right: 3.15rem !important;
}

.password-reveal-button-v75 {
  position: absolute;
  right: 0.65rem;
  bottom: 0.58rem;
  width: 2.18rem;
  height: 2.18rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(196, 154, 108, 0.46);
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.94);
  color: #7a5732;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(43, 38, 32, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  z-index: 2;
}

.password-reveal-button-v75:hover,
.password-reveal-button-v75.is-active {
  background: rgba(196, 154, 108, 0.18);
  border-color: rgba(177, 131, 79, 0.72);
  color: #4a3420;
  transform: translateY(-1px);
}

.password-reveal-button-v75 svg {
  width: 1.08rem;
  height: 1.08rem;
  display: block;
}

.postal-optional-note-v75 {
  color: #8b765f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: none;
}


/* Inline style block migrado desde index.html */
/* ============================
   V76 - MOBILE ANCHORS + CAROUSEL SWIPE
   - Ajusta el salto de menú en mobile usando el borde real del header.
   - Permite pasar el carrusel con gesto horizontal.
============================ */
.carousel-container {
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.carousel-container.is-dragging {
  cursor: grabbing;
}

.carousel-slide img,
.brand-photo-card img {
  -webkit-user-drag: none;
  user-select: none;
}

@media (max-width: 760px) {
  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel,
  #accountPageV72,
  #favoritesSectionV72 {
    scroll-margin-top: var(--atg-mobile-scroll-margin-v76, 138px) !important;
  }
}


/* Inline style block migrado desde index.html */
/* ============================
   V77 - ADMIN VISUAL DE CARRUSEL
============================ */
.admin-carousel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .75rem;
  border: 1px dashed rgba(196,154,108,.34);
  border-radius: 16px;
  background: rgba(255,250,243,.72);
}

.admin-carousel-summary {
  color: #5f5144;
  font-size: .82rem;
  line-height: 1.4;
}

.admin-carousel-editor {
  display: grid;
  gap: .9rem;
}

.admin-carousel-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: .85rem;
  padding: .85rem;
  border: 1px solid rgba(228,215,199,.96);
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 10px 24px rgba(47,40,31,.045);
}

.admin-carousel-row.disabled {
  opacity: .58;
}

.admin-carousel-thumb {
  min-height: 148px;
  border-radius: 16px;
  border: 1px solid rgba(196,154,108,.25);
  background: linear-gradient(135deg, rgba(47,40,31,.08), rgba(196,154,108,.18));
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.admin-carousel-thumb.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(196,154,108,.24), rgba(255,250,243,.95));
}

.admin-carousel-thumb.brand::after {
  content: "Marca";
  position: absolute;
  inset: auto .55rem .55rem .55rem;
  border-radius: 999px;
  padding: .24rem .45rem;
  text-align: center;
  font-size: .66rem;
  font-weight: 850;
  color: #3b332a;
  background: rgba(255,250,243,.86);
  border: 1px solid rgba(196,154,108,.24);
}

.admin-carousel-thumb .logo-mark {
  width: 86px;
  height: 58px;
}

.admin-carousel-thumb-label {
  position: absolute;
  left: .55rem;
  top: .55rem;
  border-radius: 999px;
  padding: .22rem .48rem;
  background: rgba(47,40,31,.84);
  color: #fffaf3;
  font-size: .68rem;
  font-weight: 850;
}

.admin-carousel-controls {
  display: grid;
  gap: .75rem;
}

.admin-carousel-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  flex-wrap: wrap;
}

.admin-carousel-titleline {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  color: #2f281f;
  font-size: .88rem;
  font-weight: 850;
}

.admin-carousel-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

.admin-carousel-fields .span-2 { grid-column: span 2; }
.admin-carousel-fields .span-4 { grid-column: span 4; }

.admin-textarea {
  min-height: 72px;
  resize: vertical;
}

.admin-carousel-status {
  min-height: 1.1rem;
  color: #8a5c2e;
  font-size: .76rem;
  font-weight: 750;
}

@media (max-width: 900px) {
  .admin-carousel-row { grid-template-columns: 1fr; }
  .admin-carousel-thumb { min-height: 170px; }
  .admin-carousel-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-carousel-fields .span-4 { grid-column: span 2; }
}

@media (max-width: 560px) {
  .admin-carousel-toolbar { align-items: stretch; }
  .admin-carousel-toolbar .admin-actions { width: 100%; }
  .admin-carousel-toolbar .admin-actions button { flex: 1 1 auto; }
  .admin-carousel-row { padding: .7rem; border-radius: 16px; }
  .admin-carousel-fields { grid-template-columns: 1fr; }
  .admin-carousel-fields .span-2,
  .admin-carousel-fields .span-4 { grid-column: span 1; }
}


/* Inline style block migrado desde index.html */
.carousel-container {
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

.product-modal-back-btn {
  width: 100%;
}

.product-detail-back-inline {
  width: 100%;
}


/* Inline style block migrado desde index.html */
.product-modal-back-btn {
  width: auto !important;
  min-width: 92px !important;
  flex: 0 0 auto !important;
}

#productModal .modal-actions {
  align-items: center !important;
  gap: 0.5rem !important;
}

#productModal .modal-actions .btn-primary,
#productModal .modal-actions .btn-secondary {
  width: auto !important;
  min-height: 36px !important;
  padding: 0.44rem 0.78rem !important;
  font-size: 0.8rem !important;
  line-height: 1.1 !important;
  flex: 0 0 auto !important;
}

.product-detail-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}

.product-detail-cart-action {
  min-width: 132px !important;
  width: 132px !important;
  flex: 0 0 132px !important;
}

.product-detail-cart-action .btn-add,
.product-detail-cart-action .product-qty-selected,
.product-detail-cart-action .product-qty-control-inline {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  flex: 0 0 auto !important;
}

.product-detail-cart-action .btn-add {
  padding: 0.44rem 0.72rem !important;
  font-size: 0.8rem !important;
}

.product-detail-cart-action .product-qty-control-inline {
  grid-template-columns: 34px 1fr 34px !important;
  min-height: 36px !important;
}

.product-detail-cart-action .product-qty-control-inline button {
  height: 36px !important;
}

.product-detail-actions > .btn-secondary {
  width: auto !important;
  min-width: 92px !important;
  min-height: 36px !important;
  padding: 0.44rem 0.78rem !important;
  font-size: 0.8rem !important;
  flex: 0 0 auto !important;
}

.product-detail-back-inline {
  display: none !important;
}

.product-actions {
  align-items: center !important;
  gap: 0.42rem !important;
}

.product-actions .btn-add,
.product-actions .product-qty-selected,
.product-actions .product-qty-control-inline {
  flex: 0 1 108px !important;
  min-width: 88px !important;
  max-width: 118px !important;
  min-height: 34px !important;
}

.product-actions .btn-add {
  padding: 0.36rem 0.62rem !important;
  font-size: 0.78rem !important;
}

.product-actions .product-qty-control-inline {
  grid-template-columns: 32px 1fr 32px !important;
}

.product-actions .product-qty-control-inline button {
  height: 34px !important;
}

.product-actions .btn-quick {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  #productModal .modal-actions {
    flex-wrap: wrap !important;
  }

  #productModal .modal-actions .btn-primary,
  #productModal .modal-actions .btn-secondary {
    width: auto !important;
  }

  .product-detail-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.48rem !important;
  }

  .product-detail-cart-action {
    width: 122px !important;
    min-width: 122px !important;
    flex: 0 0 122px !important;
  }

  .product-detail-actions > .btn-secondary {
    width: auto !important;
    min-width: 88px !important;
    flex: 0 0 auto !important;
  }

  .product-actions .btn-add,
  .product-actions .product-qty-selected,
  .product-actions .product-qty-control-inline {
    min-width: 78px !important;
    max-width: 108px !important;
    flex-basis: 96px !important;
  }
}


/* Inline style block migrado desde index.html */
.home-commercial-blocks-v84 {
  max-width: 1200px;
  margin: 0 auto 1rem;
  padding: 0 1rem;
  display: grid;
  gap: 0.9rem;
}

.home-commercial-blocks-v84 > .menu-intro,
.home-commercial-blocks-v84 > .free-shipping-home-card {
  margin: 0 !important;
  width: 100% !important;
}

.product-detail-actions .btn-secondary[data-v84-back="true"],
.product-detail-page .catalog-page-actions .btn-outline[data-v84-back="true"] {
  cursor: pointer;
}

.admin-v84-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.admin-v84-mini-grid .wide {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .home-commercial-blocks-v84 {
    padding: 0 0.9rem;
    gap: 0.7rem;
  }

  .admin-v84-mini-grid {
    grid-template-columns: 1fr;
  }
}


/* Inline style block migrado desde index.html */
.admin-premium-toast-v85 {
  position: fixed;
  right: 1.25rem;
  bottom: 8.2rem;
  z-index: 520;
  width: min(390px, calc(100vw - 2rem));
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffaf3 0%, #f7efe4 100%);
  color: #2b2620;
  border: 1px solid rgba(196, 154, 108, 0.48);
  box-shadow: 0 18px 44px rgba(47, 40, 31, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.admin-premium-toast-v85.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.admin-premium-toast-v85-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #2f281f;
  color: #fffaf3;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(47, 40, 31, 0.22);
}

.admin-premium-toast-v85-body {
  min-width: 0;
  flex: 1;
}

.admin-premium-toast-v85-title {
  display: block;
  font-size: 0.92rem;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-premium-toast-v85-text {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #6f5f4d;
}

.admin-premium-toast-v85-close {
  border: 0;
  background: rgba(196, 154, 108, 0.18);
  color: #7a5430;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 620px) {
  .admin-premium-toast-v85 {
    left: 1rem;
    right: 1rem;
    bottom: 7.8rem;
    width: auto;
  }
}


/* Inline style block migrado desde index.html */
.modal-gallery,
.product-detail-main-gallery {
  touch-action: pan-y;
  user-select: none;
}

.modal-gallery.is-gallery-dragging,
.product-detail-main-gallery.is-gallery-dragging {
  cursor: grabbing;
}


/* Inline style block migrado desde index.html */
.product-card.product-out-of-stock .product-image-wrap img,
.product-card.product-out-of-stock .promo-card-media img { filter: grayscale(.18) saturate(.82); opacity: .72; }
.product-flag.stock { background:#f4eee6; border-color:rgba(196,154,108,.34); color:#6d4b2b; }
.product-flag.no-stock { background:#fff2ec; border-color:rgba(166,72,36,.22); color:#9a4a24; }
.btn-add.product-add-button.is-disabled,
.btn-add.product-add-button:disabled,
.product-qty-plus:disabled,
.modal-actions button:disabled { opacity:.58; cursor:not-allowed; pointer-events:none; box-shadow:none; }
.product-stock-note-v90 { margin-top:.45rem; padding:.55rem .7rem; border-radius:14px; border:1px solid rgba(196,154,108,.28); background:rgba(255,250,243,.86); color:#6a5f52; font-size:.78rem; line-height:1.35; }
.product-stock-note-v90 strong { color:#2f281f; }
.admin-v90-stock-card .admin-v63-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.admin-v90-product-status { display:grid; gap:.35rem; padding:.75rem; border-radius:16px; border:1px solid rgba(196,154,108,.24); background:rgba(255,250,243,.7); color:#6a5f52; font-size:.8rem; line-height:1.4; }
.admin-v90-product-status strong { color:#2f281f; }
.admin-v90-inline-check { display:flex; align-items:center; gap:.5rem; min-height:41px; border:1px solid rgba(228,215,199,.9); border-radius:12px; padding:.5rem .65rem; background:rgba(255,255,255,.72); color:#4b4035; font-size:.82rem; font-weight:700; }
.admin-v90-inline-check input { accent-color:#c49a6c; }
@media (max-width:720px) { .admin-v90-stock-card .admin-v63-form-grid { grid-template-columns:1fr; } }


/* Inline style block migrado desde index.html */
  .assistant-fab-v117 {
    right: 1.15rem !important;
    bottom: 14.25rem !important;
    z-index: 330 !important;
  }

  .assistant-fab-v117 .assistant-avatar-v117,
  .assistant-head-v117 .assistant-avatar-v117 {
    background-image: url("../../public/assets/diguin-avatar.png") !important;
    background-color: transparent !important;
    background-size: cover !important;
    background-position: center 12% !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  }

  .assistant-fab-v117 .assistant-avatar-v117 {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 999px !important;
  }

  .assistant-head-v117 .assistant-avatar-v117 {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 999px !important;
  }

  @media (max-width: 760px) {
    .assistant-fab-v117 {
      right: 1.02rem !important;
      bottom: 8.35rem !important;
      width: 56px !important;
      height: 56px !important;
      min-width: 56px !important;
      padding: 0 !important;
      border: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 999px !important;
    }

    .assistant-fab-copy-v117 {
      display: none !important;
    }

    .assistant-fab-v117 .assistant-avatar-v117 {
      width: 56px !important;
      height: 56px !important;
      min-width: 56px !important;
      border-radius: 999px !important;
      box-shadow: 0 10px 24px rgba(47, 40, 31, 0.18) !important;
    }
  }


/* Inline style block migrado desde index.html */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {

  .site-header-option2-v40 {
    background: rgba(250, 247, 243, 0.985) !important;
    border-bottom: 1px solid rgba(196,154,108,0.24) !important;
  }

  .header40-inner {
    max-width: min(1240px, calc(100vw - 4rem)) !important;
    padding: 0.18rem 1rem 0.14rem !important;
  }

  .header40-top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "brand actions" !important;
    align-items: center !important;
    gap: 0.8rem !important;
    min-height: 54px !important;
  }

  .header40-brand,
  .header40-brand:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(0.85rem, 2vw, 1.45rem) !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .header40-brand .logo-mark {
    width: 82px !important;
    height: 76px !important;
    flex: 0 0 82px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .header40-brand .logo-base,
  .header40-brand .logo-smoke {
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  .header40-brand .logo-text {
    font-size: 0.88rem !important;
    line-height: 1 !important;
    letter-spacing: 0.30em !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    color: #6b5948 !important;
  }

  .header40-actions {
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.58rem !important;
    margin: 0 !important;
  }

  .header40-action {
    min-height: 32px !important;
    padding: 0.38rem 0.82rem !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
  }

  .header40-action-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  .nav-cart-count {
    min-width: 19px !important;
    height: 19px !important;
    font-size: 0.72rem !important;
  }

  .header40-nav {
    margin-top: 0.10rem !important;
    padding: 0.28rem 0 0.22rem !important;
    gap: clamp(1rem, 4vw, 4.5rem) !important;
    border-top: 1px solid rgba(196,154,108,0.18) !important;
    border-bottom: 1px solid rgba(196,154,108,0.34) !important;
  }

  .header40-nav a,
  .header40-nav a:visited {
    font-size: 0.82rem !important;
    line-height: 1 !important;
    gap: 0.32rem !important;
    padding: 0.14rem 0.4rem 0.24rem !important;
  }

  .header40-nav-icon svg {
    width: 15px !important;
    height: 15px !important;
  }

  main {
    padding-top: 0.55rem !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel,
  #arma-tu-mesa {
    scroll-margin-top: 98px !important;
  }

  /* Evita que el asistente arranque con una caja gigante vacía */
  .assistant-panel-v117 {
    grid-template-rows: auto minmax(0, auto) auto !important;
    max-height: min(680px, calc(100vh - 1.4rem)) !important;
  }

  .assistant-body-v117 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0.72rem !important;
    overflow: auto !important;
  }

  .assistant-msg-v117,
  .assistant-body-v117 > .v117-chip-row {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Notebook 13/14/15: todavía más compacto */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (max-width: 1500px),
       (hover: hover) and (pointer: fine) and (min-width: 901px) and (max-height: 860px) {

  .header40-inner {
    max-width: min(1220px, calc(100vw - 3rem)) !important;
    padding: 0.10rem 0.85rem 0.10rem !important;
  }

  .header40-top {
    min-height: 46px !important;
    gap: 0.65rem !important;
  }

  .header40-brand {
    gap: 0.82rem !important;
  }

  .header40-brand .logo-mark {
    width: 70px !important;
    height: 65px !important;
    flex: 0 0 70px !important;
  }

  .header40-brand .logo-text {
    font-size: 0.78rem !important;
    letter-spacing: 0.26em !important;
  }

  .header40-action {
    min-height: 30px !important;
    padding: 0.32rem 0.72rem !important;
    font-size: 0.78rem !important;
  }

  .header40-nav {
    margin-top: 0.04rem !important;
    padding: 0.22rem 0 0.18rem !important;
  }

  .header40-nav a,
  .header40-nav a:visited {
    font-size: 0.78rem !important;
    padding: 0.10rem 0.36rem 0.18rem !important;
  }

  .header40-nav-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  main {
    padding-top: 0.42rem !important;
  }

  #inicio,
  #como-comprar,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #eventos,
  #envios,
  #catalogPage,
  #productDetailPage,
  #admin-demo,
  #adminBillingPanel,
  #arma-tu-mesa {
    scroll-margin-top: 82px !important;
  }
}

/* Mobile intacto */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  /* sin cambios */
}


/* Inline style block migrado desde index.html */
/* Logo: un poco más grande que v150, sin recuperar el header alto anterior */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .header40-top {
    min-height: 62px !important;
  }

  .header40-brand .logo-mark {
    width: 103px !important;
    height: 96px !important;
    flex: 0 0 103px !important;
  }

  .header40-brand .logo-text {
    font-size: 0.92rem !important;
    letter-spacing: 0.30em !important;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (max-width: 1500px),
       (hover: hover) and (pointer: fine) and (min-width: 901px) and (max-height: 860px) {
  .header40-top {
    min-height: 56px !important;
  }

  .header40-brand .logo-mark {
    width: 91px !important;
    height: 85px !important;
    flex: 0 0 91px !important;
  }

  .header40-brand .logo-text {
    font-size: 0.84rem !important;
    letter-spacing: 0.27em !important;
  }
}

/* Asistente: corregir primer render en mobile.
   Evita saludo y chips gigantes antes de hacer una búsqueda. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .assistant-panel-v117 {
    top: auto !important;
    bottom: 0.75rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 1.5rem) !important;
    grid-template-rows: auto minmax(0, auto) auto !important;
    overflow: hidden !important;
  }

  .assistant-body-v117 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.72rem !important;
    padding: 0.95rem !important;
    max-height: calc(100dvh - 13.5rem) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .assistant-msg-v117 {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    padding: 0.76rem 0.84rem !important;
    font-size: 0.88rem !important;
    line-height: 1.42 !important;
  }

  .assistant-msg-v117.user {
    margin-left: 2.5rem !important;
  }

  .assistant-body-v117 > .v117-chip-row,
  .assistant-body-v117 .v117-chip-row {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0.42rem !important;
    margin-top: 0 !important;
  }

  .assistant-body-v117 .v117-chip {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 999px !important;
    padding: 0.42rem 0.72rem !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Si el banner de cookies está visible, la ayuda no debe taparlo. */
body.cookies-visible-v152 .assistant-fab-v117 {
  display: none !important;
}

body.cookies-visible-v152 .assistant-panel-v117.show {
  display: none !important;
}


/* Inline style block migrado desde index.html */
.v153-benefit-note {
  color: #7a6a58;
  font-size: .78rem;
  line-height: 1.36;
}
.v153-table-benefit {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  margin-top: .45rem;
  padding: .42rem .64rem;
  border-radius: 999px;
  border: 1px solid rgba(184,150,62,.40);
  background: rgba(255,250,243,.88);
  color: #7a5836;
  font-size: .80rem;
  font-weight: 900;
}
.v153-table-benefit strong {
  color: #2f281f;
}
.admin-v153-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .65rem;
}
.admin-v153-benefit-grid .wide { grid-column: 1 / -1; }
.admin-v153-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  overflow: hidden;
  border-radius: 12px;
}
.admin-v153-mini-table th,
.admin-v153-mini-table td {
  border: 1px solid rgba(196,154,108,.24);
  padding: .38rem .45rem;
  text-align: left;
}
.admin-v153-mini-table th {
  background: rgba(244,236,221,.72);
  color: #7a5836;
}
@media (max-width: 760px) {
  .admin-v153-benefit-grid { grid-template-columns: 1fr; }
}


/* Inline style block migrado desde index.html */
  /* El banner legal tiene prioridad visual sobre ayudas y flotantes. */
  .cookie-banner {
    z-index: 720 !important;
  }

  .cookie-preferences-overlay,
  #cookiePreferencesModal,
  #privacyPolicyModal {
    z-index: 760 !important;
  }

  /* Si cookies está visible, ocultar Diguin Manti. */
  body.cookie-banner-active-v154 .assistant-fab-v117,
  body.cookie-banner-active-v154 #assistantFabV117,
  body.cookie-banner-active-v154 .assistant-panel-v117,
  body.cookie-banner-active-v154 #assistantPanelV117,
  body.cookie-banner-active-v154 #assistantBackdropV117,
  body.cookie-banner-active-v154 #assistantBackdropV122,
  body.cookie-banner-active-v154 #assistantBackdropV123,
  body.cookie-banner-active-v154 #assistantBackdropV121,
  body.cookie-banner-active-v154 #assistantBackdropV152 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  @media (max-width: 760px), (hover: none), (pointer: coarse) {
    body.cookie-banner-active-v154 .assistant-fab-v117,
    body.cookie-banner-active-v154 #assistantFabV117,
    body.cookie-banner-active-v154 .assistant-panel-v117,
    body.cookie-banner-active-v154 #assistantPanelV117 {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
  }


/* Inline style block migrado desde index.html */
  .v157-benefit-inline {
    margin: 0.72rem 0 0.35rem;
    border: 1px solid rgba(196,154,108,.42);
    background:
      linear-gradient(135deg, rgba(255,250,243,.96), rgba(247,239,228,.96)),
      radial-gradient(circle at 8% 0%, rgba(196,154,108,.16), transparent 32%);
    border-radius: 16px;
    padding: 0.72rem 0.82rem;
    display: grid;
    gap: 0.18rem;
    color: #4a3826;
  }
  .v157-benefit-inline .kicker {
    color: #9a6b34;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .v157-benefit-inline strong {
    color: #2f281f;
    font-size: 0.96rem;
  }
  .v157-benefit-inline span:last-child {
    color: #6a5f52;
    font-size: 0.80rem;
    line-height: 1.35;
  }

  .v157-table-group {
    border: 1px solid rgba(196,154,108,.42);
    background:
      linear-gradient(145deg, rgba(255,250,243,.98), rgba(247,239,228,.96)),
      radial-gradient(circle at 0% 0%, rgba(196,154,108,.12), transparent 30%);
    border-radius: 18px;
    padding: 0.86rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 10px 22px rgba(43,38,32,.06);
  }
  .v157-table-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
  }
  .v157-table-group-title {
    color: #2f281f;
    font-size: 0.98rem;
    font-weight: 950;
    line-height: 1.15;
  }
  .v157-table-group-sub {
    margin-top: 0.18rem;
    color: #7a6a58;
    font-size: 0.78rem;
    line-height: 1.25;
  }
  .v157-table-benefit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(184,150,62,.36);
    background: rgba(232,201,122,.20);
    color: #6c4d23;
    border-radius: 999px;
    padding: 0.25rem 0.52rem;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
  }
  .v157-table-items {
    display: grid;
    gap: 0.38rem;
    margin: 0.6rem 0;
  }
  .v157-table-item {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 0.45rem;
    align-items: center;
    color: #4a3826;
    font-size: 0.82rem;
  }
  .v157-table-item img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 10px;
  }
  .v157-table-item strong {
    color: #2f281f;
  }
  .v157-table-total {
    border-top: 1px solid rgba(196,154,108,.24);
    margin-top: 0.58rem;
    padding-top: 0.55rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: #2f281f;
    font-size: 0.86rem;
  }
  .v157-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.66rem;
  }
  .v157-table-actions button {
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.38);
    background: #fffaf3;
    color: #4a3826;
    font-size: 0.75rem;
    font-weight: 850;
    padding: 0.38rem 0.65rem;
    cursor: pointer;
  }
  .v157-table-actions button.danger {
    color: #a43a3a;
    border-color: rgba(197,48,48,.22);
    background: #fff1f1;
  }
  .v157-manual-title {
    color: #7a5836;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin: 0.35rem 0 0.52rem;
  }

  .v157-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(47,40,31,.36);
    backdrop-filter: blur(3px);
  }
  .v157-modal-overlay.show {
    display: flex;
  }
  .v157-modal {
    width: min(440px, 100%);
    border: 1px solid rgba(196,154,108,.44);
    background: #fffaf3;
    color: #3b332a;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
    padding: 1rem;
  }
  .v157-modal-title {
    font-weight: 950;
    font-size: 1rem;
    color: #2f281f;
    margin-bottom: .35rem;
  }
  .v157-modal-text {
    color: #6a5f52;
    font-size: .88rem;
    line-height: 1.42;
  }
  .v157-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .95rem;
  }
  .v157-modal-actions button {
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.38);
    background: #fff;
    color: #4a3826;
    font-weight: 850;
    padding: .52rem .86rem;
    cursor: pointer;
  }
  .v157-modal-actions button.primary {
    background: var(--gold);
    border-color: var(--gold-dark);
    color: #fffaf3;
  }

  @media (max-width: 760px) {
    .v157-table-group-head {
      display: grid;
    }
    .v157-table-benefit {
      width: fit-content;
    }
  }


/* Inline style block migrado desde index.html */
  /* Evita que el bloque "Armá tu mesa" parezca saltar cuando cambia la cantidad,
     sin mostrar texto si la regla no tiene beneficio. */
  #tableBuilderResult.table-builder-result {
    min-height: 318px !important;
    align-content: start !important;
  }

  @media (max-width: 760px) {
    #tableBuilderResult.table-builder-result {
      min-height: 345px !important;
    }
  }


/* Inline style block migrado desde index.html */
  .table-custom-people-v161 {
    margin-top: .55rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
  }

  .table-custom-people-v161 label {
    color: #6a5f52;
    font-size: .78rem;
    font-weight: 850;
  }

  .table-custom-people-v161 input {
    width: 96px;
    border: 1px solid rgba(196,154,108,.38);
    background: rgba(255,255,255,.88);
    color: #2f281f;
    border-radius: 999px;
    padding: .42rem .62rem;
    font-size: .84rem;
    outline: none;
  }

  .table-custom-people-v161 input:focus {
    border-color: rgba(184,150,62,.72);
    box-shadow: 0 0 0 4px rgba(184,150,62,.12);
  }

  .table-custom-people-v161 button {
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.38);
    background: #fffaf3;
    color: #4a3826;
    font-size: .78rem;
    font-weight: 850;
    padding: .42rem .68rem;
    cursor: pointer;
  }

  #tableBuilderResult.table-builder-result {
    min-height: 345px !important;
    align-content: start !important;
  }

  .v161-table-card {
    border: 1px solid rgba(196,154,108,.44);
    background:
      linear-gradient(145deg, rgba(255,250,243,.98), rgba(247,239,228,.96)),
      radial-gradient(circle at 0 0, rgba(196,154,108,.14), transparent 34%);
    border-radius: 18px;
    padding: .78rem;
    display: grid;
    gap: .56rem;
  }

  .v161-table-kicker {
    color: #9a6b34;
    font-size: .68rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .v161-table-title {
    color: #2f281f;
    font-size: .96rem;
    font-weight: 950;
    line-height: 1.12;
  }

  .v161-table-text {
    color: #6a5f52;
    font-size: .78rem;
    line-height: 1.32;
  }

  .v161-table-items {
    display: grid;
    gap: .28rem;
    border-top: 1px solid rgba(196,154,108,.22);
    border-bottom: 1px solid rgba(196,154,108,.22);
    padding: .48rem 0;
  }

  .v161-table-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .38rem;
    align-items: center;
    color: #4a3826;
    font-size: .76rem;
  }

  .v161-table-line strong {
    color: #2f281f;
  }

  .v161-table-total {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    color: #2f281f;
    font-size: .82rem;
  }

  .v161-table-benefit {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid rgba(184,150,62,.36);
    background: rgba(232,201,122,.20);
    color: #6c4d23;
    border-radius: 999px;
    padding: .24rem .52rem;
    font-size: .70rem;
    font-weight: 900;
  }

  .v161-table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
  }

  .v161-table-actions button {
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.36);
    background: #fffaf3;
    color: #4a3826;
    padding: .34rem .58rem;
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
  }

  .v161-table-actions button.primary {
    background: var(--gold);
    color: #fffaf3;
    border-color: var(--gold-dark);
  }


/* Inline style block migrado desde index.html */
  body.v165-cart-simplified .cart-drawer {
    display: grid;
    /* Esta plantilla fue pensada para 3 secciones (header / contenido / resumen),
       pero .cart-drawer tiene hijos directos de más (cart-header, cartEmpty,
       cartItemsTitleAtg, cartItems, cart-summary). El track "minmax(0,1fr)"
       permite colapsar a 0 su fila, y esa fila termina cayendo sobre #cartEmpty
       (carrito vacío) o sobre #cartItemsTitleAtg (carrito con productos): el
       texto sigue viéndose por overflow:visible pero sin alto propio, pisando
       la fila siguiente ("Productos seleccionados" sobre "Todavía no agregaste...").
       El scroll interno del drawer ya lo resuelve por separado la capa V44
       (.cart-drawer{overflow-y:auto}), así que ninguna fila necesita poder
       colapsar a 0: con "auto" cada hijo mide su propio contenido real. */
    grid-template-rows: auto auto auto auto auto;
  }

  body.v165-cart-simplified .cart-items {
    overflow: auto;
    padding-bottom: 0.75rem;
  }

  body.v165-cart-simplified .cart-summary {
    border-top: 1px solid rgba(196,154,108,.24);
    padding-top: 0.8rem;
    background:
      linear-gradient(180deg, rgba(255,250,243,.98), rgba(250,247,243,.99));
  }

  body.v165-cart-simplified .cart-summary > .cart-free-shipping-box,
  body.v165-cart-simplified .cart-summary > .cart-coupon-box,
  body.v165-cart-simplified .cart-summary > .cart-coupon-error,
  body.v165-cart-simplified .cart-summary > .account-status,
  body.v165-cart-simplified .cart-summary > .delivery-edit-panel,
  body.v165-cart-simplified .cart-summary > .checkout-options,
  body.v165-cart-simplified .cart-summary > .mobile-cart-primary-action,
  body.v165-cart-simplified .cart-summary > .cart-notes-label,
  body.v165-cart-simplified .cart-summary > .payment-box,
  body.v165-cart-simplified .cart-summary > .payment-methods,
  body.v165-cart-simplified .cart-summary > .cart-actions,
  body.v165-cart-simplified .cart-summary > .cart-whatsapp-note {
    display: none !important;
  }

  .v165-cart-bottom {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.78rem;
  }

  .v165-cart-bottom .btn-primary {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    font-size: 0.94rem;
  }

  .v165-cart-bottom-note {
    color: #7a6a58;
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: center;
  }

  .v165-order-overlay {
    position: fixed;
    inset: 0;
    z-index: 370;
    display: none;
    align-items: center;
    justify-content: flex-end;
    background: rgba(31,25,19,.42);
    backdrop-filter: blur(3px);
  }

  .v165-order-overlay.show {
    display: flex;
  }

  .v165-order-panel {
    width: min(560px, 100%);
    height: 100%;
    background: #fffaf3;
    color: #2f281f;
    border-left: 1px solid rgba(196,154,108,.32);
    box-shadow: -18px 0 54px rgba(0,0,0,.20);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .v165-order-head {
    padding: 1rem;
    border-bottom: 1px solid rgba(196,154,108,.22);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    background:
      radial-gradient(circle at 0 0, rgba(196,154,108,.13), transparent 34%),
      linear-gradient(135deg, #fffaf3, #f7efe4);
  }

  .v165-order-title {
    margin: 0;
    color: #2f281f;
    font-size: 1.12rem;
    line-height: 1.1;
  }

  .v165-order-sub {
    margin: 0.25rem 0 0;
    color: #6a5f52;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .v165-order-close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.36);
    background: rgba(255,255,255,.72);
    color: #4a3826;
    cursor: pointer;
    font-size: 1.1rem;
  }

  /* Etapa 6 (identidad visual compartida de cabecera: Carrito/Datos/
     Revision/Pedido recibido). Paleta REAL del sitio, misma que ya usaba
     .v165-order-close (borde rgba(196,154,108,.36), fondo rgba(255,255,255,.72),
     texto #4a3826) -se factoriza en una clase compartida en vez de duplicar
     valores o traer los hex de la maqueta de referencia-. Solo agrega
     flecha+progreso; no reemplaza ningun handler, no quita ningun boton. */
  .atg-ckh-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.36);
    background: rgba(255,255,255,.72);
    color: #4a3826;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s;
  }

  .atg-ckh-icon-btn:hover,
  .atg-ckh-icon-btn:active {
    background: rgba(196,154,108,.18);
  }

  .atg-ckh-icon-btn:focus-visible {
    outline: 2px solid var(--gold, #c49a6c);
    outline-offset: 2px;
  }

  .atg-ckh-icon-btn svg {
    width: 18px;
    height: 18px;
  }

  .atg-ckh-center {
    flex: 1 1 auto;
    min-width: 0;
  }

  .atg-ckh-progress {
    display: flex;
    gap: 5px;
    margin-top: 7px;
  }

  .atg-ckh-progress i {
    height: 3px;
    flex: 1 1 0;
    border-radius: 2px;
    background: rgba(196,154,108,.22);
    transition: background .3s;
    font-style: normal;
  }

  .atg-ckh-progress i.on {
    background: var(--gold-dark, #b1834f);
  }

  @media (prefers-reduced-motion: reduce) {
    .atg-ckh-icon-btn,
    .atg-ckh-progress i {
      transition: none;
    }
  }

  .v165-order-body {
    overflow: auto;
    overscroll-behavior: contain;
    padding: 0.95rem;
    display: grid;
    gap: 0.82rem;
  }

  .v165-step-block {
    border: 1px solid rgba(196,154,108,.28);
    background: rgba(255,255,255,.62);
    border-radius: 18px;
    padding: 0.85rem;
    display: grid;
    /* Etapa 3: el espaciado entre encabezado y contenido se mueve a
       .v165-step-collapse-inner (padding-top) en vez de este gap, para que
       no quede un hueco reservado cuando la tarjeta esta colapsada (altura
       0 via grid-template-rows en .v165-step-collapse). */
    gap: 0;
  }

  .v165-step-block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: #2f281f;
    font-weight: 950;
    font-size: 0.88rem;
  }

  /* Etapa 3 (Smart Preview Cards): boton real de encabezado -accesible por
     teclado y lector de pantalla de forma nativa, sin reimplementar foco/
     Enter/Space-, resumen siempre visible, e indicador colapsable via CSS
     grid-template-rows (0fr/1fr) que respeta prefers-reduced-motion. */
  .v165-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .v165-step-header:focus-visible {
    outline: 2px solid var(--gold, #c49a6c);
    outline-offset: 3px;
    border-radius: 10px;
  }

  .v165-step-header-text {
    display: grid;
    gap: .28rem;
    min-width: 0;
    flex: 1 1 auto;
  }

  .v165-step-summary {
    font-size: .76rem;
    font-weight: 600;
    color: #7a6a58;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v165-step-summary:empty {
    display: none;
  }

  .v165-step-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid #7a5325;
    border-bottom: 2px solid #7a5325;
    transform: rotate(45deg);
    transition: transform .22s ease;
    margin-top: -2px;
  }

  .v165-step-header[aria-expanded="true"] .v165-step-chevron {
    transform: rotate(-135deg);
    margin-top: 4px;
  }

  /* Ajuste final (Revisión): botón "Editar" dentro del encabezado de cada
     tarjeta -el encabezado pasó a ser un div role="button" (ver reviewCard()
     en guest-checkout-account-pages.js) para poder anidar este botón real
     sin HTML invalido-. Mismo tono dorado que el resto de los enlaces de
     acción del checkout (.v165-order-link-action), sin paleta nueva. */
  .v165-step-edit {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: .2rem .3rem;
    margin: 0;
    color: var(--gold-dark, #b1834f);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
  }

  .v165-step-edit:hover,
  .v165-step-edit:focus-visible {
    text-decoration: underline;
  }

  /* Etapa 8: numero de paso del acordeon guiado (Tus datos/Coordinación/
     Notas y pago), se convierte en check cuando la seccion queda marcada
     como revisada (syncStepNum, order-step-smart-preview.js). */
  .v165-step-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(196, 154, 108, 0.4);
    color: #7a6a58;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
  }

  .v165-step-num.ok {
    border-color: transparent;
    background: rgba(76, 148, 96, 0.16);
    color: #3f7a4f;
  }

  .v165-step-num.ok svg {
    width: 14px;
    height: 14px;
  }

  .v165-step-continue {
    width: 100%;
    justify-content: center;
    margin-top: 0.2rem;
  }

  .v165-step-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
  }

  .v165-step-collapse.expanded {
    grid-template-rows: 1fr;
  }

  .v165-step-collapse-inner {
    overflow: hidden;
    min-height: 0;
  }

  .v165-step-collapse.expanded .v165-step-collapse-inner {
    padding-top: .68rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .v165-step-collapse,
    .v165-step-chevron {
      transition: none;
    }
  }

  .v165-step-badge {
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.36);
    background: rgba(232,201,122,.16);
    color: #7a5325;
    padding: .18rem .48rem;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .v165-step-slot {
    display: grid;
    gap: 0.62rem;
  }

  .v165-step-slot:empty {
    display: none;
  }

  .v165-order-actions {
    padding: 0.65rem 1rem 0.75rem;
    border-top: 1px solid rgba(196,154,108,.24);
    background: rgba(255,250,243,.98);
    display: grid;
    gap: 0.4rem;
  }

  .v165-order-actions .btn-primary,
  .v165-order-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .v165-order-secondary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.48rem;
  }

  /* Footer compacto #orderStepOverlayV165 (ajuste post-Etapa 3): "Volver al
     carrito"/"Seguir comprando" como enlaces de texto reales -<button> real,
     no <a>, para conservar foco/teclado nativos sin href/role postizo-. */
  .v165-order-secondary-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .v165-order-link-action {
    background: none;
    border: none;
    margin: 0;
    padding: .4rem .3rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    font: inherit;
    font-weight: 750;
    font-size: .82rem;
    color: #7a5325;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .v165-order-link-action:focus-visible {
    outline: 2px solid var(--gold, #c49a6c);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .v165-order-secondary-sep {
    color: #a8957e;
    font-size: .8rem;
  }

  /* "Copiar detalle" en esta pantalla: se sigue generando (mismo onclick,
     mismo texto) pero oculto puntualmente -no se toca .v165-order-actions
     ni .v165-order-secondary-links, solo este boton especifico-. display:none
     ya lo saca del orden de tabulacion, sin necesitar tabindex. */
  .v165-copy-detail-hidden {
    display: none;
  }

  @media (max-width: 760px) {
    .v165-order-overlay {
      align-items: flex-end;
    }

    .v165-order-panel {
      width: 100%;
      height: min(92dvh, 760px);
      border-radius: 22px 22px 0 0;
      border-left: 0;
      border-top: 1px solid rgba(196,154,108,.32);
    }

    .v165-order-secondary-row {
      grid-template-columns: 1fr;
    }

    .v165-order-body {
      padding: 0.8rem;
    }
  }


/* Inline style block migrado desde index.html */
  /* El drawer del carrito tiene z-index alto en versiones previas;
     el segundo paso debe quedar por encima. */
  #orderStepOverlayV165.v165-order-overlay,
  .v165-order-overlay {
    z-index: 1600 !important;
  }

  #orderStepOverlayV165 .v165-order-panel,
  .v165-order-panel {
    z-index: 1601 !important;
    position: relative !important;
  }

  @media (hover: hover) and (pointer: fine) and (min-width: 901px) {
    /* Compacta solo la sección Armá tu mesa en desktop.
       No toca mobile ni la lógica de cálculo/cantidad personalizada. */
    #arma-tu-mesa.table-builder-section {
      margin-top: 1.15rem !important;
    }

    #arma-tu-mesa .section-header {
      margin-bottom: 0.55rem !important;
    }

    #arma-tu-mesa .section-title {
      font-size: 1.42rem !important;
      line-height: 1.05 !important;
    }

    #arma-tu-mesa .section-sub {
      font-size: 0.84rem !important;
      line-height: 1.25 !important;
    }

    #arma-tu-mesa .table-builder-card {
      padding: 0.88rem !important;
      gap: 0.82rem !important;
      grid-template-columns: minmax(0, 0.72fr) minmax(350px, 1fr) !important;
      align-items: center !important;
      min-height: 0 !important;
    }

    #arma-tu-mesa .table-builder-title {
      font-size: clamp(1.34rem, 2vw, 1.72rem) !important;
      line-height: 1.05 !important;
      margin-bottom: 0.38rem !important;
    }

    #arma-tu-mesa .table-builder-text {
      font-size: 0.84rem !important;
      line-height: 1.34 !important;
    }

    #arma-tu-mesa .table-builder-controls {
      gap: 0.54rem !important;
    }

    #arma-tu-mesa .table-builder-label {
      font-size: 0.68rem !important;
    }

    #arma-tu-mesa .table-builder-chips {
      gap: 0.36rem !important;
      margin-top: 0.24rem !important;
    }

    #arma-tu-mesa .table-chip {
      padding: 0.34rem 0.62rem !important;
      font-size: 0.74rem !important;
    }

    #arma-tu-mesa .table-custom-people-v161,
    #arma-tu-mesa .table-custom-people-v160 {
      margin-top: 0.34rem !important;
      gap: 0.34rem !important;
    }

    #arma-tu-mesa .table-custom-people-v161 label,
    #arma-tu-mesa .table-custom-people-v160 label {
      font-size: 0.72rem !important;
    }

    #arma-tu-mesa .table-custom-people-v161 input,
    #arma-tu-mesa .table-custom-people-v160 input {
      width: 86px !important;
      padding: 0.32rem 0.56rem !important;
      font-size: 0.78rem !important;
    }

    #arma-tu-mesa .table-custom-people-v161 button,
    #arma-tu-mesa .table-custom-people-v160 button {
      padding: 0.34rem 0.62rem !important;
      font-size: 0.74rem !important;
    }

    #arma-tu-mesa .table-builder-result {
      padding: 0.72rem !important;
      gap: 0.44rem !important;
      border-radius: 16px !important;
      min-height: 0 !important;
    }

    #arma-tu-mesa #tableBuilderResult.table-builder-result {
      min-height: 0 !important;
    }

    #arma-tu-mesa .table-result-title {
      font-size: 0.88rem !important;
    }

    #arma-tu-mesa .table-result-items {
      gap: 0.28rem !important;
    }

    #arma-tu-mesa .table-result-row {
      gap: 0.42rem !important;
      font-size: 0.76rem !important;
      line-height: 1.2 !important;
    }

    #arma-tu-mesa .table-result-actions {
      gap: 0.42rem !important;
    }

    #arma-tu-mesa .table-result-actions .experience-btn {
      padding: 0.42rem 0.66rem !important;
      font-size: 0.74rem !important;
      min-height: 0 !important;
    }

    #arma-tu-mesa .v157-benefit-inline,
    #arma-tu-mesa .v156-benefit-inline,
    #arma-tu-mesa .v155-table-benefit-fixed {
      margin: 0.42rem 0 0.22rem !important;
      padding: 0.54rem 0.64rem !important;
      border-radius: 14px !important;
      gap: 0.12rem !important;
    }

    #arma-tu-mesa .v157-benefit-inline .kicker,
    #arma-tu-mesa .v156-benefit-inline .kicker,
    #arma-tu-mesa .v155-table-benefit-fixed .v155-kicker {
      font-size: 0.62rem !important;
    }

    #arma-tu-mesa .v157-benefit-inline strong,
    #arma-tu-mesa .v156-benefit-inline strong,
    #arma-tu-mesa .v155-table-benefit-fixed strong {
      font-size: 0.82rem !important;
      line-height: 1.15 !important;
    }

    #arma-tu-mesa .v157-benefit-inline span:last-child,
    #arma-tu-mesa .v156-benefit-inline span:last-child,
    #arma-tu-mesa .v155-table-benefit-fixed span:last-child {
      font-size: 0.72rem !important;
      line-height: 1.25 !important;
    }

    #arma-tu-mesa .experience-coupon-text {
      font-size: 0.74rem !important;
      line-height: 1.25 !important;
    }
  }

  @media (hover: hover) and (pointer: fine) and (min-width: 901px) and (max-width: 1500px),
         (hover: hover) and (pointer: fine) and (min-width: 901px) and (max-height: 860px) {
    #arma-tu-mesa .table-builder-card {
      grid-template-columns: minmax(0, 0.68fr) minmax(330px, 1fr) !important;
      padding: 0.78rem !important;
    }

    #arma-tu-mesa .table-builder-title {
      font-size: clamp(1.2rem, 1.8vw, 1.52rem) !important;
    }

    #arma-tu-mesa .table-builder-text {
      font-size: 0.80rem !important;
    }
  }


/* Inline style block migrado desde index.html */
  #checkoutReview.checkout-review-overlay,
  .checkout-review-overlay {
    z-index: 1900 !important;
  }

  #checkoutReview .checkout-review-modal,
  .checkout-review-modal {
    z-index: 1901 !important;
    position: relative !important;
  }


/* Inline style block migrado desde index.html */
  body.v169-review-step #checkoutReview.checkout-review-overlay,
  body.v169-review-step .checkout-review-overlay {
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    z-index: 1900 !important;
    background: rgba(31,25,19,.42) !important;
    backdrop-filter: blur(3px) !important;
  }

  /* Etapa 5: grid de 3 filas (cabecera/cuerpo scrolleable/pie), mismo patron
     ya aprobado en Etapa 3 (.v165-order-panel). Antes .checkout-review-modal
     scrolleaba entero con el pie en position:sticky -sin fila propia
     reservada, el pie terminaba flotando sobre el ultimo contenido en vez
     de empujarlo-; ahora el pie es una fila real del grid: el contenido NUNCA
     puede quedar detras, en ningun viewport. */
  body.v169-review-step #checkoutReview .checkout-review-modal,
  body.v169-review-step .checkout-review-modal {
    width: min(560px, 100%) !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid rgba(196,154,108,.32) !important;
    box-shadow: -18px 0 54px rgba(0,0,0,.20) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1901 !important;
  }

  body.v169-review-step .checkout-review-body {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
  }

  /* Ya no necesita position:sticky (fila propia del grid, ver arriba):
     se conserva el aspecto de "piso" -fondo opaco, borde superior- y se
     agrega el margen de safe-area inferior en dispositivos con gesto/notch. */
  body.v169-review-step .checkout-review-actions {
    background: rgba(255,250,243,.98) !important;
    border-top: 1px solid rgba(196,154,108,.24) !important;
    padding-top: 0.85rem !important;
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom)) !important;
  }

  @media (max-width: 760px) {
    /* Incidente mobile (unificacion con Carrito/Datos): mismo problema que
       Datos del pedido -hoja inferior topeada a 92dvh/760px con esquinas
       redondeadas, dejando un margen superior donde se veia el Carrito
       (seguia "abierto" de fondo) oscurecido-. Ahora ocupa el viewport
       completo, igual que .cart-overlay/.cart-drawer y .v165-order-panel. */
    body.v169-review-step #checkoutReview.checkout-review-overlay,
    body.v169-review-step .checkout-review-overlay {
      align-items: stretch !important;
      justify-content: flex-end !important;
    }

    body.v169-review-step #checkoutReview .checkout-review-modal,
    body.v169-review-step .checkout-review-modal {
      width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      border-radius: 0 !important;
      border-left: 0 !important;
      border-top: 0 !important;
    }
  }


/* Inline style block migrado desde index.html */
  :root {
    --atg-cart-step-width-v170: 430px;
  }

  /* Paso 2: datos para hacer el pedido */
  #orderStepOverlayV165.v165-order-overlay,
  .v165-order-overlay {
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  #orderStepOverlayV165 .v165-order-panel,
  .v165-order-panel {
    width: min(var(--atg-cart-step-width-v170), 100vw) !important;
    max-width: min(var(--atg-cart-step-width-v170), 100vw) !important;
    height: 100% !important;
  }

  .v165-order-head {
    padding: 0.82rem 0.95rem !important;
  }

  .v165-order-title {
    font-size: 1rem !important;
  }

  .v165-order-sub {
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
  }

  .v165-order-body {
    padding: 0.78rem !important;
    gap: 0.68rem !important;
  }

  .v165-step-block {
    padding: 0.72rem !important;
    border-radius: 16px !important;
    gap: 0 !important;
  }

  .v165-step-block-title {
    font-size: 0.82rem !important;
  }

  .v165-step-summary {
    font-size: .72rem !important;
  }

  .v165-step-badge {
    font-size: 0.62rem !important;
    padding: 0.16rem 0.42rem !important;
  }

  .v165-order-actions {
    padding: 0.55rem 0.88rem 0.65rem !important;
    gap: 0.32rem !important;
  }

  .v165-order-secondary-row {
    gap: 0.42rem !important;
  }

  .v165-order-link-action {
    font-size: 0.8rem !important;
    min-height: 34px !important;
  }

  /* Compacta formularios movidos al paso 2 para que no se sienta más ancho/pesado */
  #orderStepOverlayV165 input,
  #orderStepOverlayV165 select,
  #orderStepOverlayV165 textarea,
  #orderStepOverlayV165 .checkout-input,
  #orderStepOverlayV165 .checkout-select,
  #orderStepOverlayV165 .checkout-textarea {
    font-size: 0.82rem !important;
  }

  #orderStepOverlayV165 .delivery-grid,
  #orderStepOverlayV165 .delivery-form-grid {
    grid-template-columns: 1fr !important;
    gap: 0.54rem !important;
  }

  /* Ajuste Etapa 3 (compactar Coordinacion): se retira .checkout-grid de la
     regla de arriba a proposito -medido en vivo (390px): "Fecha deseada" y
     "Horario aproximado" caben comodos en 2 columnas (148px cada input,
     sin overflow, "dd/mm/aaaa" y "Ej: 20:30" legibles), y la altura de la
     tarjeta Coordinacion baja de ~223px a ~159px. El selector del picker
     nativo de fecha es UI propia del SO, no depende del ancho del input.
     "Entrega o retiro" (grid-column:1/-1 mas abajo) sigue ocupando el
     ancho completo igual. */
  #orderStepOverlayV165 .checkout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem !important;
  }

  /* Paso 3: revisión final */
  body.v169-review-step #checkoutReview.checkout-review-overlay,
  body.v169-review-step .checkout-review-overlay {
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  body.v169-review-step #checkoutReview .checkout-review-modal,
  body.v169-review-step .checkout-review-modal {
    width: min(var(--atg-cart-step-width-v170), 100vw) !important;
    max-width: min(var(--atg-cart-step-width-v170), 100vw) !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  body.v169-review-step .checkout-review-modal {
    padding: 0.92rem !important;
  }

  body.v169-review-step .checkout-review-modal h3,
  body.v169-review-step .checkout-review-title {
    font-size: 1rem !important;
  }

  body.v169-review-step .checkout-review-intro,
  body.v169-review-step .checkout-review-sub {
    font-size: 0.78rem !important;
    line-height: 1.28 !important;
  }

  body.v169-review-step .checkout-review-section,
  body.v169-review-step .checkout-review-card,
  body.v169-review-step .review-block {
    border-radius: 16px !important;
    padding: 0.72rem !important;
  }

  body.v169-review-step .checkout-review-row,
  body.v169-review-step .review-row {
    font-size: 0.80rem !important;
  }

  body.v169-review-step .checkout-review-actions {
    gap: 0.48rem !important;
  }

  @media (max-width: 760px) {
    :root {
      --atg-cart-step-width-v170: 100vw;
    }

    /* Incidente mobile (causa raiz real): esta es la regla que efectivamente
       gana en el navegador -ID+clase mas !important, la ultima de varias
       copias de ".v165-order-overlay"/".checkout-review-overlay" que existen
       en este archivo (ver tambien ~14245 y ~14688, ya ajustadas pero sin
       efecto real por esto mismo; se dejan igualadas por consistencia, no
       se depende de ellas)-. Volvia a convertir Datos y Revision en hoja
       inferior (align-items:flex-end, altura topeada a 92dvh/760px,
       esquinas redondeadas) encima del valor stretch/100% ya fijado mas
       arriba en este mismo bloque para el resto de los anchos. Ahora
       coincide con el Carrito: viewport completo, sin margen superior. */
    #orderStepOverlayV165.v165-order-overlay,
    .v165-order-overlay,
    body.v169-review-step #checkoutReview.checkout-review-overlay,
    body.v169-review-step .checkout-review-overlay {
      align-items: stretch !important;
      justify-content: flex-end !important;
    }

    #orderStepOverlayV165 .v165-order-panel,
    .v165-order-panel,
    body.v169-review-step #checkoutReview .checkout-review-modal,
    body.v169-review-step .checkout-review-modal {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      border-radius: 0 !important;
    }
  }


/* Inline style block migrado desde index.html */
  .v171-copy-toast {
    position: fixed;
    right: 1.05rem;
    bottom: 1.05rem;
    z-index: 2200;
    max-width: min(360px, calc(100vw - 2rem));
    border: 1px solid rgba(196,154,108,.42);
    background:
      radial-gradient(circle at 0 0, rgba(232,201,122,.20), transparent 34%),
      linear-gradient(145deg, rgba(255,250,243,.98), rgba(247,239,228,.98));
    color: #3b332a;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(31,25,19,.22);
    padding: .82rem .92rem;
    display: none;
    align-items: flex-start;
    gap: .66rem;
  }

  .v171-copy-toast.show {
    display: flex;
    animation: v171ToastIn .18s ease-out both;
  }

  .v171-copy-toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(184,150,62,.18);
    color: #7a5325;
    border: 1px solid rgba(184,150,62,.32);
    font-weight: 950;
    flex: 0 0 auto;
  }

  .v171-copy-toast-title {
    font-weight: 950;
    color: #2f281f;
    font-size: .92rem;
    line-height: 1.15;
  }

  .v171-copy-toast-text {
    margin-top: .14rem;
    color: #6a5f52;
    font-size: .78rem;
    line-height: 1.32;
  }

  @keyframes v171ToastIn {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  @media (max-width: 760px) {
    .v171-copy-toast {
      right: .75rem;
      left: .75rem;
      bottom: .85rem;
      max-width: none;
    }
  }


/* Inline style block migrado desde index.html */
  .v172-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31,25,19,.42);
    backdrop-filter: blur(4px);
  }

  .v172-modal-overlay.show {
    display: flex;
  }

  .v172-modal {
    width: min(440px, 100%);
    border: 1px solid rgba(196,154,108,.44);
    background:
      radial-gradient(circle at 0 0, rgba(232,201,122,.20), transparent 34%),
      linear-gradient(145deg, rgba(255,250,243,.99), rgba(247,239,228,.98));
    color: #3b332a;
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(31,25,19,.28);
    padding: 1rem;
  }

  .v172-modal-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #b8963e;
    color: #fffaf3;
    border: 1px solid #8a6d2a;
    font-weight: 950;
    font-size: 1.2rem;
    margin-bottom: .72rem;
  }

  .v172-modal-title {
    color: #2f281f;
    font-size: 1.05rem;
    line-height: 1.12;
    font-weight: 950;
    margin-bottom: .38rem;
  }

  .v172-modal-text {
    color: #6a5f52;
    font-size: .88rem;
    line-height: 1.44;
  }

  .v172-order-number {
    margin: .72rem 0;
    border: 1px solid rgba(196,154,108,.32);
    background: rgba(255,255,255,.58);
    border-radius: 16px;
    padding: .62rem .72rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: #6a5f52;
    font-size: .78rem;
  }

  .v172-order-number strong {
    color: #2f281f;
    font-size: .92rem;
    letter-spacing: .04em;
  }

  /* Etapa 10: tarjeta compacta para el mensaje de próximos pasos -mismo
     tono crema/dorado que .v172-order-number, con un ícono a la izquierda
     en vez de quedar como texto suelto-. */
  .v172-modal-note {
    margin: .72rem 0;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    border: 1px solid rgba(196,154,108,.32);
    background: rgba(255,255,255,.58);
    border-radius: 16px;
    padding: .62rem .72rem;
    color: #6a5f52;
    font-size: .82rem;
    line-height: 1.42;
    text-align: left;
  }

  .v172-modal-note svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #3f7a4f;
    margin-top: 1px;
  }

  .v172-modal-actions {
    margin-top: .94rem;
    display: grid;
    gap: .58rem;
  }

  /* Etapa 10: CTA único -"Ver mi pedido"- con un ícono al lado del texto. */
  .v172-modal-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
  }

  .v172-modal-cta svg {
    width: 18px;
    height: 18px;
  }

  .v172-modal-actions.two {
    grid-template-columns: 1fr 1fr;
  }

  .v172-modal-actions button {
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.38);
    background: #fffaf3;
    color: #4a3826;
    font-weight: 850;
    padding: .58rem .86rem;
    cursor: pointer;
  }

  .v172-modal-actions button.primary {
    background: var(--gold);
    border-color: var(--gold-dark);
    color: #fffaf3;
  }

  .v172-modal-actions button.secondary {
    background: rgba(255,255,255,.66);
  }

  @media (max-width: 760px) {
    /* Incidente mobile (unificacion de las 4 pantallas): "Pedido recibido"
       pasa de dialogo chico centrado a ocupar el viewport completo, igual
       que Carrito/Datos/Revision -el contenido (icono+titulo+texto+
       acciones) se mantiene centrado verticalmente dentro del panel, sin
       reestructurar cabecera/cuerpo/pie (este paso no tiene navegacion
       hacia atras ni contenido largo que requiera scroll propio). */
    .v172-modal-overlay {
      align-items: stretch;
      justify-content: center;
      padding: 0;
    }

    .v172-modal {
      width: 100%;
      height: 100%;
      height: 100dvh;
      border-radius: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .v172-modal-actions.two {
      grid-template-columns: 1fr;
    }

    /* Etapa 10 (rediseño "Pedido recibido"): este paso es terminal -no
       tiene navegación hacia atrás ni contenido largo-, así que el
       viewport completo de arriba (pensado para Carrito/Datos/Revisión,
       donde evitaba que la pantalla anterior quedara oscurecida detrás)
       solo le deja un margen enorme vacío arriba/abajo del contenido
       centrado. Se revierte SOLO para #orderReceivedOverlayV172 (selector
       por id, no toca "¿Pudiste enviar...?" ni el resto de las pantallas)
       a una tarjeta compacta centrada, igual que en desktop. */
    #orderReceivedOverlayV172.v172-modal-overlay {
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    #orderReceivedOverlayV172 .v172-modal {
      width: min(440px, 100%);
      height: auto;
      max-height: 90dvh;
      border-radius: 24px;
      display: block;
      justify-content: normal;
    }
  }


/* Inline style block migrado desde index.html */
  .v173-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31,25,19,.38);
    backdrop-filter: blur(3px);
  }

  .v173-alert-overlay.show {
    display: flex;
  }

  .v173-alert {
    width: min(430px, 100%);
    border: 1px solid rgba(196,154,108,.44);
    background:
      radial-gradient(circle at 0 0, rgba(232,201,122,.20), transparent 34%),
      linear-gradient(145deg, rgba(255,250,243,.99), rgba(247,239,228,.98));
    color: #3b332a;
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(31,25,19,.28);
    padding: 1rem;
  }

  .v173-alert-icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(184,150,62,.16);
    color: #7a5325;
    border: 1px solid rgba(184,150,62,.32);
    font-weight: 950;
    margin-bottom: .65rem;
  }

  .v173-alert-title {
    color: #2f281f;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.15;
    margin-bottom: .32rem;
  }

  .v173-alert-text {
    color: #6a5f52;
    font-size: .86rem;
    line-height: 1.42;
  }

  .v173-alert-actions {
    margin-top: .9rem;
    display: flex;
    justify-content: flex-end;
  }

  .v173-alert-actions button {
    border-radius: 999px;
    border: 1px solid rgba(184,150,62,.48);
    background: var(--gold);
    color: #fffaf3;
    font-weight: 850;
    padding: .56rem 1rem;
    cursor: pointer;
  }

  .v173-orders-list {
    display: grid;
    gap: .68rem;
  }

  .v173-order-card {
    border: 1px solid rgba(196,154,108,.30);
    background: rgba(255,255,255,.58);
    border-radius: 18px;
    padding: .78rem;
    display: grid;
    gap: .52rem;
  }

  .v173-order-top {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: flex-start;
  }

  .v173-order-id {
    color: #2f281f;
    font-weight: 950;
    font-size: .95rem;
    line-height: 1.1;
  }

  .v173-order-date {
    color: #7a6a58;
    font-size: .74rem;
    margin-top: .16rem;
  }

  .v173-order-status {
    border-radius: 999px;
    border: 1px solid rgba(184,150,62,.36);
    background: rgba(232,201,122,.18);
    color: #6f4c24;
    padding: .20rem .50rem;
    font-size: .66rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  .v173-order-status.pending-send {
    border-color: rgba(160,120,80,.36);
    background: rgba(255,250,243,.75);
    color: #7a5b37;
  }

  .v173-order-lines {
    display: grid;
    gap: .28rem;
    color: #6a5f52;
    font-size: .80rem;
  }

  .v173-order-line {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
  }

  .v173-order-line strong {
    color: #2f281f;
  }

  .v173-order-products {
    border-top: 1px dashed rgba(196,154,108,.30);
    padding-top: .45rem;
    color: #6a5f52;
    font-size: .78rem;
    line-height: 1.32;
  }

  .v173-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
  }

  .v173-order-actions button {
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.38);
    background: #fffaf3;
    color: #4a3826;
    font-size: .74rem;
    font-weight: 850;
    padding: .40rem .64rem;
    cursor: pointer;
  }

  .v173-help-card {
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }

  .v173-help-card:hover {
    transform: translateY(-1px);
    border-color: rgba(184,150,62,.58);
    box-shadow: 0 12px 24px rgba(47,40,31,.08);
  }

  .v173-session-actions {
    margin-top: .72rem;
    border-top: 1px solid rgba(196,154,108,.22);
    padding-top: .72rem;
    display: flex;
    justify-content: flex-end;
  }

  .v173-session-actions button {
    border-radius: 999px;
  }

  @media (max-width: 760px) {
    .v173-order-top {
      display: grid;
    }

    .v173-order-status {
      width: fit-content;
    }

    .v173-session-actions {
      justify-content: stretch;
    }

    .v173-session-actions button {
      width: 100%;
    }
  }


/* Inline style block migrado desde index.html */
  .v175-order-note{border:1px solid rgba(196,154,108,.30);background:rgba(255,250,243,.72);border-radius:14px;padding:.55rem .62rem;color:#6a5f52;font-size:.76rem;line-height:1.34}
  .v173-order-status.editing{border-color:rgba(160,120,80,.36)!important;background:rgba(255,250,243,.82)!important;color:#7a5b37!important}
  .v173-order-status.confirming{border-color:rgba(184,150,62,.40)!important;background:rgba(232,201,122,.20)!important;color:#6f4c24!important}
  .v173-order-status.confirmed{border-color:rgba(74,112,76,.30)!important;background:rgba(74,112,76,.10)!important;color:#456b45!important}
  .v175-active-order-section{margin-bottom:1.1rem;border:1.5px solid rgba(196,154,108,.55);border-radius:18px;padding:.9rem .9rem .5rem;background:rgba(255,250,243,.72)}
  .v175-active-order-title{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#a07040;margin-bottom:.65rem}


/* Inline style block migrado desde index.html */
  .cart-close,
  .assistant-close-v117 {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
  }

  #orderStepOverlayV165 .v165-order-body {
    scroll-behavior: auto !important;
  }

/* Inline style block migrado desde index.html */
  .admin-payments-panel-v177 {
    margin-top: 1rem;
  }

  .admin-payment-summary-v177 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .72rem;
    margin-bottom: .9rem;
  }

  .admin-payment-summary-card-v177 {
    border: 1px solid rgba(196,154,108,.28);
    background: rgba(255,255,255,.70);
    border-radius: 16px;
    padding: .72rem;
    display: grid;
    gap: .24rem;
  }

  .admin-payment-summary-card-v177 small {
    color: #7a6a58;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
  }

  .admin-payment-summary-card-v177 strong {
    color: #2f281f;
    font-size: .88rem;
    line-height: 1.15;
  }

  .admin-payment-field-v177 {
    display: grid;
    gap: .26rem;
    color: #6a5f52;
    font-size: .76rem;
    font-weight: 850;
  }

  .admin-payment-field-v177 input,
  .admin-payment-field-v177 select {
    width: 100%;
    border: 1px solid rgba(196,154,108,.34);
    background: #fffaf3;
    color: #2f281f;
    border-radius: 12px;
    padding: .52rem .62rem;
    outline: none;
    font-size: .80rem;
  }

  .admin-payment-field-v177 input:focus,
  .admin-payment-field-v177 select:focus {
    border-color: rgba(184,150,62,.70);
    box-shadow: 0 0 0 4px rgba(184,150,62,.10);
  }

  .admin-payment-field-v177.switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid rgba(196,154,108,.22);
    background: rgba(255,255,255,.55);
    border-radius: 14px;
    padding: .55rem .62rem;
  }

  .admin-payment-field-v177.switch input {
    width: 20px;
    height: 20px;
    accent-color: #b8963e;
  }

  .admin-payment-form-grid-v177 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .62rem;
    margin-top: .65rem;
  }

  .admin-payment-columns-v177 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .82rem;
    margin-top: .78rem;
  }

  .admin-card-title.small-v177 {
    font-size: .84rem;
    margin-bottom: .18rem;
  }

  .admin-payment-methods-v177 {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .78rem 0;
  }

  .admin-payment-methods-v177 label {
    border: 1px solid rgba(196,154,108,.30);
    background: rgba(255,250,243,.78);
    border-radius: 999px;
    padding: .36rem .56rem;
    color: #4a3826;
    font-size: .74rem;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
    gap: .32rem;
  }

  .admin-payment-methods-v177 input {
    accent-color: #b8963e;
  }

  .v177-payment-choice {
    border: 1px solid rgba(196,154,108,.32);
    background: rgba(255,255,255,.66);
    border-radius: 16px;
    padding: .68rem;
    display: grid;
    gap: .45rem;
  }

  .v177-payment-choice-title {
    color: #2f281f;
    font-weight: 950;
    font-size: .88rem;
  }

  .v177-payment-choice-text {
    color: #6a5f52;
    font-size: .78rem;
    line-height: 1.35;
  }

  .v177-payment-choice .btn-payment,
  .v177-payment-choice .btn-primary {
    width: 100%;
    justify-content: center;
  }

  @media (max-width: 900px) {
    .admin-payment-summary-v177,
    .admin-payment-form-grid-v177,
    .admin-payment-columns-v177 {
      grid-template-columns: 1fr;
    }
  }


/* Inline style block migrado desde index.html */
  .v180-payment-actions {
    display: grid;
    gap: .5rem;
  }

  .v180-payment-actions.two {
    grid-template-columns: 1fr 1fr;
  }

  .v180-payment-actions .btn-primary,
  .v180-payment-actions .btn-payment {
    width: 100%;
    justify-content: center;
  }

  .v180-payment-warning {
    border: 1px solid rgba(196,154,108,.32);
    background: rgba(255,250,243,.76);
    color: #6a5f52;
    border-radius: 14px;
    padding: .62rem .72rem;
    font-size: .78rem;
    line-height: 1.35;
  }

  body.v180-whatsapp-disabled #paymentBox.active,
  body.v180-online-enabled #paymentBox.active {
    display: block !important;
  }

  body.v180-whatsapp-disabled .cart-whatsapp-note {
    display: none !important;
  }

  @media (max-width: 760px) {
    .v180-payment-actions.two {
      grid-template-columns: 1fr;
    }
  }


/* Inline style block migrado desde index.html */
  body.v181-whatsapp-off #btnWhatsapp,
  body.v181-whatsapp-off .cart-whatsapp-note {
    display: none !important;
  }

  .v181-channel-actions {
    display: grid;
    gap: .5rem;
  }

  .v181-channel-actions.two {
    grid-template-columns: 1fr 1fr;
  }

  .v181-channel-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }

  @media (max-width: 760px) {
    .v181-channel-actions.two {
      grid-template-columns: 1fr;
    }
  }


/* Inline style block migrado desde index.html */
  .admin-legal-panel-v182 {
    margin-top: 1rem;
  }

  .admin-legal-summary-v182 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .72rem;
    margin-bottom: .9rem;
  }

  .admin-legal-summary-card-v182 {
    border: 1px solid rgba(196,154,108,.28);
    background: rgba(255,255,255,.70);
    border-radius: 16px;
    padding: .72rem;
    display: grid;
    gap: .24rem;
  }

  .admin-legal-summary-card-v182 small {
    color: #7a6a58;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
  }

  .admin-legal-summary-card-v182 strong {
    color: #2f281f;
    font-size: .88rem;
    line-height: 1.15;
  }

  .admin-legal-field-v182 {
    display: grid;
    gap: .26rem;
    color: #6a5f52;
    font-size: .76rem;
    font-weight: 850;
  }

  .admin-legal-field-v182 input,
  .admin-legal-field-v182 select,
  .admin-legal-field-v182 textarea {
    width: 100%;
    border: 1px solid rgba(196,154,108,.34);
    background: #fffaf3;
    color: #2f281f;
    border-radius: 12px;
    padding: .52rem .62rem;
    outline: none;
    font-size: .80rem;
    font-family: inherit;
  }

  .admin-legal-field-v182 input:focus,
  .admin-legal-field-v182 select:focus,
  .admin-legal-field-v182 textarea:focus {
    border-color: rgba(184,150,62,.70);
    box-shadow: 0 0 0 4px rgba(184,150,62,.10);
  }

  .admin-legal-field-v182.switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid rgba(196,154,108,.22);
    background: rgba(255,255,255,.55);
    border-radius: 14px;
    padding: .55rem .62rem;
  }

  .admin-legal-field-v182.switch input {
    width: 20px;
    height: 20px;
    accent-color: #b8963e;
  }

  .admin-legal-doc-grid-v182 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .62rem;
    margin: .65rem 0;
  }

  .admin-card-title.small-v182 {
    font-size: .84rem;
    margin-top: .75rem;
    margin-bottom: .18rem;
  }

  .admin-withdrawal-list-v182,
  .admin-price-history-v182 {
    display: grid;
    gap: .48rem;
    margin-top: .55rem;
  }

  .legal-row-v182 {
    border: 1px solid rgba(196,154,108,.24);
    background: rgba(255,255,255,.62);
    border-radius: 14px;
    padding: .56rem .62rem;
    display: grid;
    gap: .18rem;
  }

  .legal-row-v182 strong {
    color: #2f281f;
    font-size: .82rem;
  }

  .legal-row-v182 span {
    color: #6a5f52;
    font-size: .74rem;
    line-height: 1.32;
  }

  .legal-modal-overlay-v182 {
    position: fixed;
    inset: 0;
    z-index: 2750;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31,25,19,.46);
    backdrop-filter: blur(4px);
  }

  .legal-modal-overlay-v182.show {
    display: flex;
  }

  .legal-modal-v182 {
    width: min(720px, 100%);
    max-height: min(86dvh, 780px);
    overflow: auto;
    border: 1px solid rgba(196,154,108,.44);
    background:
      radial-gradient(circle at 0 0, rgba(232,201,122,.20), transparent 34%),
      linear-gradient(145deg, rgba(255,250,243,.99), rgba(247,239,228,.98));
    color: #3b332a;
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(31,25,19,.28);
    padding: 1rem;
  }

  .legal-modal-head-v182 {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    border-bottom: 1px solid rgba(196,154,108,.24);
    padding-bottom: .72rem;
    margin-bottom: .72rem;
  }

  .legal-modal-title-v182 {
    margin: 0;
    color: #2f281f;
    font-size: 1.08rem;
    font-weight: 950;
    line-height: 1.12;
  }

  .legal-modal-sub-v182 {
    margin: .22rem 0 0;
    color: #6a5f52;
    font-size: .82rem;
    line-height: 1.35;
  }

  .legal-modal-close-v182 {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.36);
    background: rgba(255,255,255,.72);
    color: #4a3826;
    cursor: pointer;
    font-size: 1.1rem;
  }

  .legal-content-v182 {
    display: grid;
    gap: .72rem;
    color: #5f5348;
    font-size: .86rem;
    line-height: 1.48;
  }

  .legal-content-v182 h4 {
    margin: .25rem 0 .1rem;
    color: #2f281f;
    font-size: .92rem;
  }

  .withdrawal-form-v182 {
    display: grid;
    gap: .58rem;
    margin-top: .4rem;
  }

  .withdrawal-form-v182 label {
    display: grid;
    gap: .25rem;
    color: #6a5f52;
    font-size: .78rem;
    font-weight: 850;
  }

  .withdrawal-form-v182 input,
  .withdrawal-form-v182 textarea {
    border: 1px solid rgba(196,154,108,.34);
    background: #fffaf3;
    color: #2f281f;
    border-radius: 12px;
    padding: .56rem .64rem;
    font-family: inherit;
  }

  .legal-footer-links-v182 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .9rem;
    margin-top: .75rem;
    font-size: .82rem;
  }

  .legal-footer-links-v182 a {
    color: #7a5325;
    font-weight: 850;
    text-decoration: none;
  }

  @media (max-width: 900px) {
    .admin-legal-summary-v182,
    .admin-legal-doc-grid-v182 {
      grid-template-columns: 1fr;
    }

    .legal-modal-overlay-v182 {
      align-items: flex-end;
      padding: .75rem;
    }

    .legal-modal-v182 {
      max-height: 90dvh;
      border-radius: 22px;
    }
  }


/* Inline style block migrado desde index.html */
  .admin-orders-panel-v183 {
    margin-top: 1rem;
  }

  .admin-orders-summary-v183 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .72rem;
    margin-bottom: .9rem;
  }

  .admin-orders-summary-card-v183 {
    border: 1px solid rgba(196,154,108,.28);
    background: rgba(255,255,255,.70);
    border-radius: 16px;
    padding: .72rem;
    display: grid;
    gap: .24rem;
  }

  .admin-orders-summary-card-v183 small {
    color: #7a6a58;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
  }

  .admin-orders-summary-card-v183 strong {
    color: #2f281f;
    font-size: .96rem;
    line-height: 1.15;
  }

  .admin-orders-toolbar-v183 {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: .75rem;
    margin-bottom: .85rem;
    flex-wrap: wrap;
  }

  .admin-orders-filter-v183 {
    display: grid;
    gap: .25rem;
    color: #6a5f52;
    font-size: .76rem;
    font-weight: 850;
    min-width: min(260px, 100%);
  }

  .admin-orders-filter-v183 select {
    border: 1px solid rgba(196,154,108,.34);
    background: #fffaf3;
    color: #2f281f;
    border-radius: 12px;
    padding: .52rem .62rem;
    outline: none;
    font-size: .80rem;
  }

  .admin-orders-list-v183 {
    display: grid;
    gap: .75rem;
  }

  .admin-order-card-v183 {
    border: 1px solid rgba(196,154,108,.30);
    background: rgba(255,255,255,.74);
    border-radius: 18px;
    padding: .86rem;
    display: grid;
    gap: .62rem;
  }

  .admin-order-top-v183 {
    display: flex;
    justify-content: space-between;
    gap: .85rem;
    align-items: flex-start;
  }

  .admin-order-id-v183 {
    color: #2f281f;
    font-weight: 950;
    font-size: 1rem;
    line-height: 1.12;
  }

  .admin-order-sub-v183 {
    color: #7a6a58;
    font-size: .75rem;
    margin-top: .14rem;
    line-height: 1.32;
  }

  .admin-order-status-v183 {
    border-radius: 999px;
    border: 1px solid rgba(184,150,62,.36);
    background: rgba(232,201,122,.18);
    color: #6f4c24;
    padding: .22rem .56rem;
    font-size: .66rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  .admin-order-status-v183.confirmado {
    border-color: rgba(74,112,76,.30);
    background: rgba(74,112,76,.10);
    color: #456b45;
  }

  .admin-order-status-v183.cancelado {
    border-color: rgba(160,70,70,.26);
    background: rgba(160,70,70,.08);
    color: #8a3636;
  }

  .admin-order-grid-v183 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
  }

  .admin-order-mini-v183 {
    border: 1px solid rgba(196,154,108,.20);
    background: rgba(255,250,243,.62);
    border-radius: 14px;
    padding: .5rem .56rem;
    display: grid;
    gap: .10rem;
  }

  .admin-order-mini-v183 small {
    color: #7a6a58;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 900;
  }

  .admin-order-mini-v183 strong {
    color: #2f281f;
    font-size: .82rem;
    line-height: 1.18;
  }

  .admin-order-mini-v183.admin-order-contact-final strong {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Valores tecnicos (Template ID / WA Message ID) en la lista de mensajes
     de WhatsApp: nunca deben invadir columnas vecinas del grid. */
  .admin-wa-technical {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    font-size: .70rem;
  }

  .admin-wa-copy-btn {
    border: 1px solid rgba(196,154,108,.30);
    background: rgba(255,255,255,.7);
    border-radius: 8px;
    padding: 0 .32rem;
    font-size: .78rem;
    line-height: 1.5;
    cursor: pointer;
    color: #6f4c24;
  }

  .admin-order-products-v183 {
    border-top: 1px dashed rgba(196,154,108,.30);
    padding-top: .48rem;
    color: #6a5f52;
    font-size: .80rem;
    line-height: 1.36;
  }

  .admin-order-actions-v183 {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
  }

  .admin-order-actions-v183 button {
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.38);
    background: #fffaf3;
    color: #4a3826;
    font-size: .74rem;
    font-weight: 850;
    padding: .42rem .68rem;
    cursor: pointer;
  }

  .admin-order-actions-v183 button.primary {
    background: var(--gold);
    border-color: var(--gold-dark);
    color: #fffaf3;
  }

  .admin-order-actions-v183 button.danger {
    border-color: rgba(160,70,70,.42);
    background: rgba(160,70,70,.08);
    color: #8a3636;
  }

  .admin-order-actions-v183 button.admin-order-current-final {
    opacity: .62;
    cursor: default;
  }

  .admin-order-status-dialog-v183 {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(47,40,31,.42);
  }

  .admin-order-status-dialog-v183.show {
    display: flex;
  }

  .admin-order-status-dialog-panel-v183 {
    width: min(440px, 100%);
    border: 1px solid rgba(196,154,108,.32);
    border-radius: 18px;
    background: #fffaf3;
    box-shadow: 0 24px 60px rgba(47,40,31,.26);
    padding: 1rem;
    color: #3c3026;
  }

  .admin-order-status-dialog-head-v183,
  .admin-order-status-dialog-actions-v183 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
  }

  .admin-order-status-dialog-head-v183 h3 {
    margin: 0;
    font-size: 1.05rem;
  }

  .admin-order-status-dialog-head-v183 button,
  .admin-order-status-dialog-actions-v183 button {
    border-radius: 999px;
    border: 1px solid rgba(196,154,108,.38);
    background: #fffaf3;
    color: #4a3826;
    font-weight: 850;
    cursor: pointer;
    padding: .46rem .78rem;
  }

  .admin-order-status-dialog-actions-v183 button.primary {
    background: var(--gold);
    border-color: var(--gold-dark);
    color: #fffaf3;
  }

  .admin-order-status-dialog-actions-v183 button.danger {
    border-color: rgba(160,70,70,.42);
    background: rgba(160,70,70,.08);
    color: #8a3636;
  }

  .admin-order-status-dialog-panel-v183 p {
    margin: .7rem 0;
    color: #6a5f52;
    line-height: 1.4;
  }

  .admin-order-status-reason-v183 {
    display: grid;
    gap: .38rem;
    margin: .75rem 0;
  }

  .admin-order-status-reason-v183 label,
  .admin-order-status-reason-v183 small {
    font-size: .78rem;
    font-weight: 850;
  }

  .admin-order-status-reason-v183 small {
    color: #8a3636;
  }

  .admin-order-status-reason-v183 select,
  .admin-order-status-reason-v183 textarea {
    width: 100%;
    border: 1px solid rgba(196,154,108,.36);
    border-radius: 14px;
    background: #fff;
    color: #2f281f;
    padding: .68rem .72rem;
    font: inherit;
  }

  .admin-order-status-reason-v183 select {
    cursor: pointer;
  }

  .admin-order-status-reason-v183 textarea {
    resize: vertical;
    min-height: 94px;
  }

  body:not(.assistant-open) .assistant-panel-v117:not(.show),
  body:not(.assistant-open) #assistantPanelV117:not(.show) {
    pointer-events: none !important;
  }

  @media (max-width: 900px) {
    .admin-orders-summary-v183,
    .admin-order-grid-v183 {
      grid-template-columns: 1fr;
    }

    .admin-order-top-v183 {
      display: grid;
    }

    .admin-order-status-v183 {
      width: fit-content;
    }
  }


/* Inline style block migrado desde index.html */
  #assistantPanelV117:not(.show),
  .assistant-panel-v117:not(.show) {
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  body.assistant-closed-v184 #assistantPanelV117,
  body.assistant-closed-v184 .assistant-panel-v117 {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  body.assistant-closed-v184 [id^="assistantBackdrop"],
  body.assistant-closed-v184 [class*="assistant-backdrop"],
  body.assistant-closed-v184 [id*="assistantOverlay"],
  body.assistant-closed-v184 [class*="assistant-overlay"] {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .assistant-close-v117 {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    z-index: 9999 !important;
  }


/* Inline style block migrado desde index.html */
  #assistantPanelV117.show,
  .assistant-panel-v117.show,
  body.assistant-closed-v184 #assistantPanelV117.show,
  body.assistant-closed-v184 .assistant-panel-v117.show,
  body.assistant-closed-v185 #assistantPanelV117.show,
  body.assistant-closed-v185 .assistant-panel-v117.show {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #assistantFabV117,
  .assistant-fab-v117 {
    pointer-events: auto !important;
    visibility: visible;
    opacity: 1;
  }

  body.assistant-open-v185 #assistantPanelV117,
  body.assistant-open-v185 .assistant-panel-v117 {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.assistant-closed-v185 #assistantPanelV117:not(.show),
  body.assistant-closed-v185 .assistant-panel-v117:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }


/* Inline style block migrado desde index.html */
.checkout-channel-actions{display:grid;gap:.5rem}
.checkout-channel-actions.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.admin-order-notifications{display:flex;flex-wrap:wrap;gap:.38rem;border-top:1px dashed rgba(196,154,108,.30);padding-top:.48rem}
.admin-order-notification-pill{border:1px solid rgba(196,154,108,.28);background:rgba(255,250,243,.72);border-radius:999px;padding:.25rem .52rem;color:#5f5348;font-size:.70rem;font-weight:850}
.admin-order-notification-pill.ok{border-color:rgba(74,112,76,.30);background:rgba(74,112,76,.10);color:#456b45}
.admin-order-notification-pill.fail{border-color:rgba(160,70,70,.28);background:rgba(160,70,70,.08);color:#8a3636}
@media(max-width:900px){.checkout-channel-actions.two{grid-template-columns:1fr}}


/* Inline style block migrado desde index.html */
.admin-ops-panel-v187{margin-top:1rem}.admin-ops-summary-v187,.ops-dashboard-grid-v187{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.72rem;margin-bottom:.9rem}.ops-summary-card-v187,.ops-metric-v187,.ops-row-v187,.ops-note-v187{border:1px solid rgba(196,154,108,.28);background:rgba(255,255,255,.70);border-radius:16px;padding:.72rem;display:grid;gap:.22rem}.ops-summary-card-v187 small,.ops-metric-v187 small{color:#7a6a58;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.ops-summary-card-v187 strong,.ops-metric-v187 strong,.ops-row-v187 strong{color:#2f281f;font-size:.9rem;line-height:1.15}.ops-row-v187 span,.ops-note-v187{color:#6a5f52;font-size:.78rem;line-height:1.38}.ops-row-v187.warn{border-color:rgba(184,120,40,.30);background:rgba(255,244,220,.72)}.ops-row-v187.critical{border-color:rgba(160,70,70,.28);background:rgba(160,70,70,.08)}.admin-ops-toggles-v187{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.48rem;margin:.65rem 0}.admin-ops-toggles-v187 label,.ops-toolbar-v187 label{border:1px solid rgba(196,154,108,.28);background:rgba(255,250,243,.70);border-radius:14px;padding:.52rem .62rem;color:#4a3826;font-size:.78rem;font-weight:850;display:flex;align-items:center;gap:.38rem}.admin-ops-toggles-v187 input[type=checkbox]{accent-color:#b8963e;width:18px;height:18px}.ops-toolbar-v187{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.68rem 0}.ops-toolbar-v187 input{border:1px solid rgba(196,154,108,.32);background:#fffaf3;border-radius:10px;padding:.38rem .48rem;color:#2f281f}.ops-list-v187{display:grid;gap:.5rem;margin-top:.58rem}.ops-queue-log-grid-v187,.ops-local-grid-v187{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.65rem}.ops-hidden-v187{display:none!important}@media(max-width:900px){.admin-ops-summary-v187,.ops-dashboard-grid-v187,.admin-ops-toggles-v187,.ops-queue-log-grid-v187,.ops-local-grid-v187{grid-template-columns:1fr}}


/* Inline style block migrado desde index.html */
  .admin-home-grid-v188 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .85rem;
  }

  .admin-home-grid-v188 button {
    border: 1px solid rgba(196,154,108,.32);
    background:
      radial-gradient(circle at top left, rgba(232,201,122,.16), transparent 44%),
      rgba(255,250,243,.78);
    color: #2f281f;
    border-radius: 18px;
    padding: .86rem;
    text-align: left;
    cursor: pointer;
    min-height: 112px;
    box-shadow: 0 12px 28px rgba(47,40,31,.06);
  }

  .admin-home-grid-v188 button strong {
    display: block;
    font-size: .94rem;
    color: #2f281f;
    margin-bottom: .28rem;
  }

  .admin-home-grid-v188 button span {
    display: block;
    color: #6a5f52;
    font-size: .78rem;
    line-height: 1.35;
  }

  .admin-section-hidden-v188 {
    display: none !important;
  }

  .admin-back-v188 {
    margin-bottom: .75rem;
  }

  .admin-back-v188 button {
    border: 1px solid rgba(196,154,108,.34);
    background: #fffaf3;
    color: #4a3826;
    border-radius: 999px;
    padding: .45rem .72rem;
    font-size: .76rem;
    font-weight: 850;
    cursor: pointer;
  }

  @media (max-width: 900px) {
    .admin-home-grid-v188 {
      grid-template-columns: 1fr;
    }
  }


/* Inline style block migrado desde index.html */
  .admin-design-summary-v189 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .72rem;
    margin-bottom: .9rem;
  }

  .design-summary-card-v189,
  .design-effect-card-v189 {
    border: 1px solid rgba(196,154,108,.28);
    background: rgba(255,255,255,.70);
    border-radius: 16px;
    padding: .72rem;
    display: grid;
    gap: .24rem;
  }

  .design-summary-card-v189 small {
    color: #7a6a58;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
  }

  .design-summary-card-v189 strong,
  .design-effect-card-v189 strong {
    color: #2f281f;
    font-size: .90rem;
    line-height: 1.15;
  }

  .design-effect-card-v189 span {
    color: #6a5f52;
    font-size: .76rem;
    line-height: 1.35;
  }

  .admin-design-field-v189 {
    display: grid;
    gap: .26rem;
    color: #6a5f52;
    font-size: .76rem;
    font-weight: 850;
  }

  .admin-design-field-v189 input,
  .admin-design-field-v189 select,
  .design-section-row-v189 select,
  .design-section-row-v189 input,
  .design-preview-controls-v189 select {
    width: 100%;
    border: 1px solid rgba(196,154,108,.34);
    background: #fffaf3;
    color: #2f281f;
    border-radius: 12px;
    padding: .52rem .62rem;
    outline: none;
    font-size: .80rem;
  }

  .admin-design-field-v189.switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border: 1px solid rgba(196,154,108,.22);
    background: rgba(255,255,255,.55);
    border-radius: 14px;
    padding: .55rem .62rem;
  }

  .admin-design-field-v189.switch input {
    width: 20px;
    height: 20px;
    accent-color: #b8963e;
  }

  .design-effect-grid-v189 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .58rem;
    margin-top: .65rem;
  }

  .design-section-list-v189 {
    display: grid;
    gap: .48rem;
    margin-top: .65rem;
  }

  .design-section-row-v189 {
    border: 1px solid rgba(196,154,108,.24);
    background: rgba(255,255,255,.62);
    border-radius: 14px;
    padding: .56rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr .7fr auto;
    gap: .5rem;
    align-items: center;
  }

  .design-section-row-v189 strong {
    color: #2f281f;
    font-size: .82rem;
  }

  .design-section-row-v189 label {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #6a5f52;
    font-size: .74rem;
    font-weight: 850;
  }

  .design-section-row-v189 button {
    border: 1px solid rgba(196,154,108,.34);
    background: #fffaf3;
    color: #4a3826;
    border-radius: 999px;
    padding: .38rem .55rem;
    font-weight: 850;
    cursor: pointer;
  }

  .design-preview-controls-v189 {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .65rem 0;
  }

  .design-preview-controls-v189 select {
    width: min(280px, 100%);
  }

  .design-preview-v189 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .62rem;
    perspective: 900px;
    overflow: hidden;
    padding: .25rem;
  }

  .design-preview-card-v189 {
    min-height: 94px;
    border: 1px solid rgba(196,154,108,.34);
    background:
      radial-gradient(circle at top left, rgba(232,201,122,.18), transparent 44%),
      #fffaf3;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #2f281f;
    font-weight: 950;
    box-shadow: 0 16px 32px rgba(47,40,31,.08);
  }

  @media (max-width: 900px) {
    .admin-design-summary-v189,
    .design-effect-grid-v189,
    .design-preview-v189 {
      grid-template-columns: 1fr;
    }

    .design-section-row-v189 {
      grid-template-columns: 1fr;
    }
  }


/* Inline style block migrado desde index.html */
  #admin-demo .section-title {
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    letter-spacing: -0.02em;
  }

  #admin-demo .section-title::after {
    content: " premium";
    color: #b8963e;
    font-weight: 950;
  }

  #admin-demo > .section-header > div:last-child {
    display: none !important;
  }

  .admin-section-hidden-v188 {
    display: none !important;
  }

  .admin-home-panel-v188,
  .admin-demo-panel {
    scroll-margin-top: 92px;
  }

  .admin-home-grid-v188 button {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .admin-home-grid-v188 button:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(47,40,31,.12);
    border-color: rgba(184,150,62,.62);
  }

  /* V190 preview: efectos mucho más claros en demo */
  .design-preview-v189 {
    min-height: 152px;
    align-items: center;
    overflow: visible !important;
  }


/* Inline style block migrado desde index.html */
  /* Ocultar índice paralelo anterior cuando el admin premium viejo está activo */
  #adminHomePanelV188 {
    display: none !important;
  }

  #adminShellV63 .admin-demo-panel {
    margin: 0;
    box-shadow: none;
  }

  #adminShellV63 .admin-back-v188 {
    display: none !important;
  }

  #adminShellV63 .admin-v63-pane > .admin-demo-panel,
  #adminShellV63 .admin-v63-pane > div > .admin-demo-panel {
    border-radius: 20px;
    background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  }

  #adminShellV63 .admin-v63-nav .admin-v63-tab {
    text-align: left;
  }

  /* FIX V63 ADMIN SHELL COLLAPSE (Mayo 2026) */
  /* Parche crítico para que #adminShellV63 sea visible: override de overflow: hidden del padre */
  
  /* Solución 1: Hacer visible el padre inmediatamente */
  #admin-demo {
    display: block !important;
    visibility: visible !important;
  }

  #adminSectionsPanel {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    height: auto !important;
  }
  
  /* Solución 2: Forzar visibilidad del shell directamente */
  #adminShellV63 {
    display: grid !important;
    height: auto !important;
    min-height: 680px !important;
    overflow: visible !important;
    visibility: visible !important;
  }
  
  /* Solución 3: Asegurar que el grid se expande */
  .admin-v63-shell {
    display: grid !important;
    height: auto !important;
    min-height: 680px !important;
    overflow: visible !important;
  }
  
  /* Solución 4: Sidebar y main visibles */
  .admin-v63-sidebar {
    overflow: visible !important;
    visibility: visible !important;
  }
  
  .admin-v63-main {
    min-height: 680px !important;
    overflow: visible !important;
    visibility: visible !important;
  }
  
  /* Solución 5: Cuando la clase active está presente (redundante pero seguro) */
  #adminSectionsPanel.admin-v63-active {
    height: auto !important;
    min-height: 680px !important;
    overflow: visible !important;
  }

  /* Demo de efectos muchísimo más marcada */
  .design-preview-v189 {
    min-height: 170px !important;
    overflow: visible !important;
    perspective: 1100px !important;
    align-items: center;
  }




/* Inline style block migrado desde index.html */
#productModal .modal-gallery,
#productModal .modal-gallery img,
.product-detail-main-gallery,
.product-detail-main-gallery img {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

#productModal .modal-gallery img,
.product-detail-main-gallery img {
  pointer-events: auto;
}


/* Inline style block migrado desde index.html */
.admin-v91-muted-help {
  margin-top: -0.15rem;
  color: #7a6a58;
  font-size: .76rem;
  line-height: 1.35;
}


/* Inline style block migrado desde index.html */
.product-card.product-out-of-stock {
  opacity: .66;
  filter: grayscale(.18);
}
.product-card.product-out-of-stock .product-image-wrap img,
.product-card.product-out-of-stock .promo-card-media img {
  filter: grayscale(.35) saturate(.72);
}
.product-card.product-out-of-stock .product-name,
.product-card.product-out-of-stock .product-desc,
.product-card.product-out-of-stock .product-price {
  color: rgba(43, 38, 32, .58);
}
.product-card.product-out-of-stock .btn-quick {
  opacity: .85;
}
.product-card.product-out-of-stock .btn-add,
.product-card.product-out-of-stock .product-add-button,
.product-card.product-out-of-stock .product-qty-plus {
  cursor: not-allowed;
}
.stock-rule-v93 {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 20px;
  border: 1px solid rgba(196,154,108,.34);
  background: linear-gradient(135deg, rgba(255,250,243,.98), rgba(243,237,228,.9));
  box-shadow: 0 14px 32px rgba(43,38,32,.08);
  color: #4f4438;
  font-size: .84rem;
  line-height: 1.48;
}
.stock-rule-v93 strong {
  display: block;
  margin-bottom: .25rem;
  color: #2b2620;
  font-size: .92rem;
}
.stock-rule-v93 ul {
  margin: .45rem 0 0 1.05rem;
  padding: 0;
}
.stock-rule-v93 li { margin: .18rem 0; }


/* Inline style block migrado desde index.html */
.product-card.product-at-stock-limit:not(.product-out-of-stock) {
  border-color: rgba(196,154,108,.46);
  background: linear-gradient(180deg, rgba(255,250,243,.98), rgba(246,239,229,.96));
}
.product-card.product-at-stock-limit:not(.product-out-of-stock) .product-image-wrap img,
.product-card.product-at-stock-limit:not(.product-out-of-stock) .promo-card-media img {
  opacity: .86;
}
.product-card.product-at-stock-limit .product-qty-plus.is-disabled,
.product-card.product-at-stock-limit .product-qty-plus[aria-disabled="true"] {
  opacity: .46;
  cursor: not-allowed;
}
.product-card.product-at-stock-limit .product-qty-selected,
.product-card.product-at-stock-limit .product-qty-number {
  border-color: rgba(196,154,108,.58);
  background: rgba(255,250,243,.96);
}
.product-stock-limit-hint-v94 {
  margin-top: .45rem;
  padding: .48rem .62rem;
  border-radius: 14px;
  border: 1px solid rgba(196,154,108,.30);
  background: rgba(255,250,243,.92);
  color: #6c5641;
  font-size: .76rem;
  line-height: 1.35;
}
.product-stock-limit-hint-v94 strong { color:#2b2620; }


/* Inline style block migrado desde index.html */
.product-stock-limit-hint-v94 {
  display: none !important;
}
.stock-limit-toast-v95 {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 9999;
  width: min(390px, calc(100vw - 2rem));
  padding: 1rem 1.1rem;
  border-radius: 22px;
  border: 1px solid rgba(196,154,108,.46);
  background: linear-gradient(135deg, rgba(255,250,243,.98), rgba(246,236,222,.98));
  color: #2b2620;
  box-shadow: 0 20px 48px rgba(43,38,32,.22);
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: .78rem;
  align-items: start;
  transform: translateY(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.stock-limit-toast-v95.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.stock-limit-toast-v95-icon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(196,154,108,.18);
  color: #8b6337;
  font-weight: 900;
  font-size: 1.05rem;
}
.stock-limit-toast-v95-title {
  font-weight: 900;
  letter-spacing: .02em;
  margin-bottom: .2rem;
}
.stock-limit-toast-v95-text {
  color: #6f5a46;
  line-height: 1.38;
  font-size: .92rem;
}
.stock-limit-toast-v95-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(196,154,108,.30);
  background: rgba(255,255,255,.58);
  color: #6f5a46;
  cursor: pointer;
  font-weight: 900;
}
.product-detail-info-card.product-stock-card-v95,
.product-stock-note-v90.product-stock-note-v95 {
  border-color: rgba(196,154,108,.40);
  background: rgba(255,250,243,.96);
}
.product-stock-note-v90.product-stock-note-v95 {
  margin-top: .75rem;
  padding: .85rem .95rem;
  border-radius: 18px;
  color: #6f5a46;
  line-height: 1.4;
}
.product-stock-note-v90.product-stock-note-v95 strong,
.product-detail-info-card.product-stock-card-v95 strong {
  color: #2b2620;
}
@media (max-width: 720px) {
  .stock-limit-toast-v95 {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    border-radius: 20px;
  }
}


/* Inline style block migrado desde index.html */
#productModal #modalInfoGrid #modalStockNoteV90.product-stock-note-v96 {
  margin: 0 !important;
  padding: 0.58rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(196, 154, 108, 0.28) !important;
  background: rgba(255, 250, 243, 0.96) !important;
  color: #6a5f52 !important;
  box-shadow: none !important;
  align-self: stretch;
}
#productModal #modalInfoGrid #modalStockNoteV90.product-stock-note-v96 strong {
  display: block;
  color: #3b332a;
  font-size: 0.76rem;
  margin-bottom: 0.18rem;
}
#productModal #modalInfoGrid #modalStockNoteV90.product-stock-note-v96 span {
  display: block;
  color: #6a5f52;
  font-size: 0.74rem;
  line-height: 1.3;
}
#productModal .modal-actions {
  margin-top: 0.18rem;
}
.product-card.product-at-stock-limit .product-qty-plus.is-disabled,
.product-card.product-at-stock-limit .product-qty-plus[aria-disabled="true"] {
  pointer-events: auto !important;
}


/* Inline style block migrado desde index.html */
.stock-limit-toast-v97 {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 100000;
  width: min(430px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: .82rem;
  align-items: start;
  padding: 1.05rem 1.12rem;
  border-radius: 24px;
  border: 1px solid rgba(196, 154, 108, .48);
  background: linear-gradient(135deg, rgba(255, 250, 243, .99), rgba(246, 236, 222, .99));
  color: #2b2620;
  box-shadow: 0 22px 54px rgba(43, 38, 32, .24);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.stock-limit-toast-v97.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.stock-limit-toast-v97-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(196, 154, 108, .18);
  color: #8b6337;
  font-weight: 950;
  font-size: 1.08rem;
  line-height: 1;
}
.stock-limit-toast-v97-title {
  display: block;
  color: #2b2620;
  font-weight: 950;
  letter-spacing: .02em;
  margin: .02rem 0 .22rem;
}
.stock-limit-toast-v97-text {
  display: block;
  color: #6a5a49;
  font-size: .94rem;
  line-height: 1.38;
}
.stock-limit-toast-v97-close {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(196, 154, 108, .32);
  background: rgba(255, 255, 255, .62);
  color: #6a5a49;
  cursor: pointer;
  font-weight: 900;
}
@media (max-width: 720px) {
  .stock-limit-toast-v97 {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    width: auto;
    border-radius: 21px;
  }
}


/* Inline style block migrado desde index.html */
.stock-limit-toast-v97,
.stock-limit-toast-v95 {
  border-color: rgba(177, 131, 79, .62) !important;
  background: linear-gradient(135deg, rgba(239, 224, 205, .99), rgba(223, 199, 166, .99)) !important;
  color: #241d16 !important;
  box-shadow: 0 24px 58px rgba(43, 38, 32, .30) !important;
}
.stock-limit-toast-v97-icon,
.stock-limit-toast-v95-icon {
  background: rgba(43, 38, 32, .13) !important;
  color: #6f4a24 !important;
}
.stock-limit-toast-v97-title,
.stock-limit-toast-v95-title {
  color: #241d16 !important;
}
.stock-limit-toast-v97-text,
.stock-limit-toast-v95-text {
  color: #4d3b2b !important;
}
.stock-limit-toast-v97-close,
.stock-limit-toast-v95-close {
  background: rgba(255, 250, 243, .72) !important;
  color: #4d3b2b !important;
}
#productModal #modalInfoGrid #modalStockNoteV90.product-stock-empty-v98 span,
#productDetailStockCardV90.product-stock-empty-v98 span {
  color: #4a2714 !important;
  font-weight: 820 !important;
}
#productModal #modalInfoGrid #modalStockNoteV90.product-stock-empty-v98,
#productDetailStockCardV90.product-stock-empty-v98 {
  border-color: rgba(166, 72, 36, .32) !important;
  background: rgba(255, 244, 236, .96) !important;
}
#productDetailStockCardV90.product-stock-empty-v98 span {
  display: inline-block;
  margin-top: .18rem;
}


/* Inline style block migrado desde index.html */
#stockLimitToastV97,
#stockLimitToastV95,
.stock-limit-toast-v97,
.stock-limit-toast-v95 {
  pointer-events: auto !important;
  z-index: 120000 !important;
}
#stockLimitToastV97 *,
#stockLimitToastV95 *,
.stock-limit-toast-v97 *,
.stock-limit-toast-v95 * {
  pointer-events: auto !important;
}
.stock-limit-toast-v97-close,
.stock-limit-toast-v95-close {
  position: relative !important;
  z-index: 120002 !important;
  cursor: pointer !important;
  user-select: none !important;
}
body.stock-limit-toast-visible-v99 .add-toast.show {
  bottom: 16.2rem !important;
}
@media (max-width: 720px) {
  body.stock-limit-toast-visible-v99 .add-toast.show {
    bottom: 12.9rem !important;
  }
}
@media (max-width: 420px) {
  body.stock-limit-toast-visible-v99 .add-toast.show {
    bottom: 14.4rem !important;
  }
}


/* Inline style block migrado desde index.html */
/* El problema de v99 era que el toast quedaba con pointer-events activo aun oculto.
   Eso podía tapar botones de la vista rápida en desktop. */
#stockLimitToastV97,
#stockLimitToastV95,
.stock-limit-toast-v97,
.stock-limit-toast-v95 {
  pointer-events: none !important;
  z-index: 130000 !important;
}
#stockLimitToastV97.is-visible,
#stockLimitToastV95.is-visible,
.stock-limit-toast-v97.is-visible,
.stock-limit-toast-v95.is-visible {
  pointer-events: auto !important;
}
#stockLimitToastV97.is-visible *,
#stockLimitToastV95.is-visible *,
.stock-limit-toast-v97.is-visible *,
.stock-limit-toast-v95.is-visible * {
  pointer-events: auto !important;
}
.stock-limit-toast-v97-close,
.stock-limit-toast-v95-close {
  position: relative !important;
  z-index: 130002 !important;
  display: grid !important;
  place-items: center !important;
  min-width: 32px !important;
  min-height: 32px !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}


/* Inline style block migrado desde index.html */
/* Los avisos de versiones anteriores quedaban abajo y podían tapar botones del modal.
   Se ocultan completamente y se reemplazan por #stockLimitToastV101. */
#stockLimitToastV95,
#stockLimitToastV97,
.stock-limit-toast-v95,
.stock-limit-toast-v97 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Como el nuevo aviso va arriba, el toast normal de carrito no necesita desplazarse. */
body.stock-limit-toast-visible-v99 .add-toast.show {
  bottom: 1.15rem !important;
}
@media (max-width: 720px) {
  body.stock-limit-toast-visible-v99 .add-toast.show {
    bottom: 1rem !important;
  }
}

.stock-limit-toast-v101 {
  position: fixed;
  top: 1.15rem;
  right: 1.15rem;
  bottom: auto;
  z-index: 150000;
  width: min(430px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: 42px 1fr 34px;
  gap: .82rem;
  align-items: start;
  padding: 1.05rem 1.12rem;
  border-radius: 24px;
  border: 1px solid rgba(177, 131, 79, .64);
  background: linear-gradient(135deg, rgba(239, 224, 205, .99), rgba(223, 199, 166, .99));
  color: #241d16;
  box-shadow: 0 24px 58px rgba(43, 38, 32, .30);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.stock-limit-toast-v101.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.stock-limit-toast-v101-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(43, 38, 32, .13);
  color: #6f4a24;
  font-weight: 950;
  font-size: 1.08rem;
  line-height: 1;
}
.stock-limit-toast-v101-title {
  display: block;
  color: #241d16;
  font-weight: 950;
  letter-spacing: .02em;
  margin: .02rem 0 .22rem;
}
.stock-limit-toast-v101-text {
  display: block;
  color: #4d3b2b;
  font-size: .94rem;
  line-height: 1.38;
}
.stock-limit-toast-v101-close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(196, 154, 108, .36);
  background: rgba(255, 250, 243, .76);
  color: #4d3b2b;
  cursor: pointer;
  font-weight: 950;
  display: grid;
  place-items: center;
  padding: 0;
  pointer-events: auto;
  touch-action: manipulation;
}
.stock-limit-toast-v101-close:hover {
  background: rgba(255, 250, 243, .98);
}

/* Deja más compacto el aviso de stock dentro de vista rápida para que no agrande tanto la ventana. */
#productModal #modalStockNoteV90.product-stock-note-v90 {
  margin-top: .2rem !important;
  padding: .68rem .82rem !important;
  border-radius: 16px !important;
  font-size: .81rem !important;
  line-height: 1.34 !important;
}

@media (max-width: 720px) {
  .stock-limit-toast-v101 {
    left: 1rem;
    right: 1rem;
    top: calc(env(safe-area-inset-top, 0px) + .85rem);
    width: auto;
    border-radius: 21px;
    grid-template-columns: 38px 1fr 32px;
    padding: .95rem 1rem;
  }
  .stock-limit-toast-v101-icon {
    width: 38px;
    height: 38px;
  }
}


/* Inline style block migrado desde index.html */
body.product-modal-lock-v102 {
  position: fixed !important;
  width: 100% !important;
  overflow: hidden !important;
  left: 0 !important;
  right: 0 !important;
}

#productModal {
  overscroll-behavior: contain;
}

#productModal.product-modal-v102-open {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#productModal .modal {
  max-height: calc(100dvh - 2rem);
  overflow: hidden;
}

#productModal .modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}

#productModal .modal-info-grid {
  align-items: stretch;
}

#productModal #modalStockNoteV90.product-stock-note-v90,
#productModal #modalStockNoteV90.product-stock-note-v96,
#productModal #modalStockNoteV90.product-stock-note-v102 {
  min-height: 58px !important;
  margin: 0 !important;
  padding: .58rem .68rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(196, 154, 108, .30) !important;
  background: rgba(255, 250, 243, .97) !important;
  box-shadow: none !important;
  color: #5d5146 !important;
  transition: none !important;
  align-self: stretch;
}

#productModal #modalStockNoteV90.product-stock-note-v102 strong,
#productModal #modalStockNoteV90.product-stock-note-v96 strong {
  display: block;
  color: #3b332a !important;
  font-size: .76rem !important;
  margin-bottom: .16rem !important;
}

#productModal #modalStockNoteV90.product-stock-note-v102 span,
#productModal #modalStockNoteV90.product-stock-note-v96 span {
  display: block;
  color: #5f4a38 !important;
  font-size: .74rem !important;
  line-height: 1.3 !important;
}

#productModal #modalStockNoteV90.product-stock-empty-v98,
#productModal #modalStockNoteV90.product-stock-empty-v102 {
  border-color: rgba(166, 72, 36, .34) !important;
  background: rgba(255, 244, 236, .98) !important;
}

#productModal #modalStockNoteV90.product-stock-empty-v98 span,
#productModal #modalStockNoteV90.product-stock-empty-v102 span {
  color: #442312 !important;
  font-weight: 820 !important;
}

.stock-limit-toast-v101 {
  z-index: 2147483000 !important;
  grid-template-columns: 42px 1fr !important;
  padding-right: 3.55rem !important;
  overflow: visible !important;
}

.stock-limit-toast-v101.is-visible {
  pointer-events: auto !important;
}

.stock-limit-toast-v101-close {
  position: absolute !important;
  top: .58rem !important;
  right: .58rem !important;
  z-index: 2147483001 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  font-size: 1.24rem !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  line-height: 1 !important;
}

.stock-limit-toast-v101-close::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
}

/* El aviso oculto (sin .is-visible, opacity 0) queda en el DOM: su boton de
   cierre tiene pointer-events:auto !important propio, que gana al
   pointer-events:none del contenedor, y seguia capturando clics invisible
   sobre la franja superior (flecha/× del Carrito y de Datos, boton del
   carrito del header) hasta recargar la pagina. Solo es clickeable mientras
   el aviso esta visible. */
#stockLimitToastV101:not(.is-visible),
#stockLimitToastV101:not(.is-visible) *,
#stockLimitToastV101:not(.is-visible) .stock-limit-toast-v101-close,
#stockLimitToastV101:not(.is-visible) .stock-limit-toast-v101-close::before {
  pointer-events: none !important;
}

@media (max-width: 760px) {
  #productModal.product-modal-v102-open {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: .72rem !important;
  }

  #productModal .modal {
    width: 100% !important;
    max-height: calc(100dvh - 1.45rem) !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
  }

  #productModal .modal-img-wrap {
    flex: 0 0 auto !important;
    min-height: 158px !important;
    height: clamp(158px, 31dvh, 218px) !important;
    max-height: 218px !important;
  }

  #productModal .modal-img-wrap img {
    height: 100% !important;
  }

  #productModal .modal-body {
    flex: 1 1 auto !important;
    padding: .95rem !important;
    max-height: none !important;
  }

  #productModal .modal-title {
    font-size: 1.18rem !important;
    margin-bottom: .28rem !important;
  }

  #productModal .modal-price {
    margin-bottom: .38rem !important;
  }

  #productModal .modal-desc {
    margin-bottom: .64rem !important;
    line-height: 1.42 !important;
  }

  #productModal .modal-info-grid {
    gap: .42rem !important;
  }

  #productModal #modalStockNoteV90.product-stock-note-v90,
  #productModal #modalStockNoteV90.product-stock-note-v96,
  #productModal #modalStockNoteV90.product-stock-note-v102 {
    min-height: 52px !important;
    padding: .52rem .62rem !important;
  }

  #productModal .modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 4 !important;
    background: linear-gradient(180deg, rgba(255,250,243,.86), #fffaf3 34%) !important;
    padding-top: .62rem !important;
    padding-bottom: .12rem !important;
    margin-top: .55rem !important;
  }

  #productModal .modal-actions .btn-primary,
  #productModal .modal-actions .btn-secondary {
    min-height: 38px !important;
  }

  .stock-limit-toast-v101 {
    padding-right: 3.25rem !important;
  }

  .stock-limit-toast-v101-close {
    top: .45rem !important;
    right: .45rem !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}


/* Inline style block migrado desde index.html */
#productModalBackBtnV81 {
  position: relative;
  z-index: 6;
}


/* Inline style block migrado desde index.html */
.product-return-focus-v104 {
  box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.30), 0 18px 36px rgba(0,0,0,0.14) !important;
  transition: box-shadow .28s ease;
}


/* Inline style block migrado desde index.html */
/* Ocultamos los bloques heredados: varias versiones anteriores los modificaban con timeouts
   y eso generaba el movimiento visual del texto. */
#modalStockNoteV90,
#productDetailStockCardV90 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

#productModal #modalStockNoteV109 {
  margin: 0 !important;
  padding: .58rem .68rem !important;
  border-radius: 14px !important;
  border: 1px solid rgba(196, 154, 108, .30) !important;
  background: rgba(255, 250, 243, .97) !important;
  color: #5d5146 !important;
  box-shadow: none !important;
  align-self: stretch;
  min-height: 58px !important;
  transition: none !important;
  animation: none !important;
  contain: layout paint;
}

#productModal #modalStockNoteV109.is-hidden {
  display: none !important;
}

#productModal #modalStockNoteV109 strong {
  display: block;
  color: #3b332a !important;
  font-size: .76rem !important;
  margin-bottom: .16rem !important;
  line-height: 1.18 !important;
}

#productModal #modalStockNoteV109 span {
  display: block;
  color: #5f4a38 !important;
  font-size: .74rem !important;
  line-height: 1.3 !important;
}

#productModal #modalStockNoteV109.is-empty {
  border-color: rgba(166, 72, 36, .34) !important;
  background: rgba(255, 244, 236, .98) !important;
}

#productModal #modalStockNoteV109.is-empty span {
  color: #442312 !important;
  font-weight: 820 !important;
}

#productDetailStockCardV109.product-detail-info-card {
  transition: none !important;
  animation: none !important;
  contain: layout paint;
}

#productDetailStockCardV109.is-hidden {
  display: none !important;
}

#productDetailStockCardV109.is-empty {
  border-color: rgba(166, 72, 36, .34) !important;
  background: rgba(255, 244, 236, .98) !important;
}

#productDetailStockCardV109.is-empty span {
  color: #442312 !important;
  font-weight: 820 !important;
}

@media (max-width: 760px) {
  #productModal #modalStockNoteV109 {
    min-height: 52px !important;
    padding: .52rem .62rem !important;
  }
}


/* Inline style block migrado desde index.html */
#stockLimitToastV101.stock-limit-toast-v101 {
  top: 1.15rem !important;
  right: 1.15rem !important;
  left: auto !important;
  width: min(420px, calc(100vw - 2rem)) !important;
  display: grid !important;
  grid-template-columns: 36px 1fr 34px !important;
  align-items: start !important;
  gap: .82rem !important;
  padding: .88rem .92rem .88rem .92rem !important;
  padding-right: .92rem !important;
  border-radius: 16px !important;
  border: 1px solid rgba(196, 154, 108, .46) !important;
  background:
    linear-gradient(135deg, rgba(255, 250, 243, .99), rgba(250, 243, 232, .99)) !important;
  color: #2b2620 !important;
  box-shadow:
    0 16px 34px rgba(43, 38, 32, .14),
    0 3px 10px rgba(196, 154, 108, .12) !important;
  transform: translateY(-8px) !important;
  transition: opacity .2s ease, transform .2s ease !important;
  overflow: visible !important;
  pointer-events: none !important;
}

#stockLimitToastV101.stock-limit-toast-v101.is-visible {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

#stockLimitToastV101 .stock-limit-toast-v101-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(196, 154, 108, .50) !important;
  background: rgba(255, 250, 243, .76) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45) !important;
}

#stockLimitToastV101 .stock-limit-toast-v101-icon::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 1.8px solid #c49a6c;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
}

#stockLimitToastV101 .stock-limit-toast-v101-icon::after {
  content: "";
  width: 8px;
  height: 1.8px;
  background: #c49a6c;
  border-radius: 999px;
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translateX(-50%);
  box-shadow: 0 7px 0 rgba(196, 154, 108, .92);
}

#stockLimitToastV101 .stock-limit-toast-v101-title {
  color: #2b2620 !important;
  font-size: .98rem !important;
  font-weight: 850 !important;
  letter-spacing: .005em !important;
  line-height: 1.18 !important;
  margin: .02rem 0 .24rem !important;
}

#stockLimitToastV101 .stock-limit-toast-v101-text {
  color: #6b5a48 !important;
  font-size: .91rem !important;
  line-height: 1.38 !important;
  font-weight: 500 !important;
}

#stockLimitToastV101 .stock-limit-toast-v101-close {
  position: static !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: #7a6a58 !important;
  font-size: 1.35rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 2147483001 !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
}

#stockLimitToastV101 .stock-limit-toast-v101-close:hover {
  background: rgba(196, 154, 108, .12) !important;
  color: #3b332a !important;
  transform: scale(1.04) !important;
}

#stockLimitToastV101 .stock-limit-toast-v101-close::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  border-radius: 999px !important;
}

@media (max-width: 720px) {
  #stockLimitToastV101.stock-limit-toast-v101 {
    left: .85rem !important;
    right: .85rem !important;
    top: calc(env(safe-area-inset-top, 0px) + .78rem) !important;
    width: auto !important;
    grid-template-columns: 34px 1fr 34px !important;
    gap: .72rem !important;
    padding: .82rem .82rem !important;
    border-radius: 15px !important;
  }

  #stockLimitToastV101 .stock-limit-toast-v101-title {
    font-size: .94rem !important;
  }

  #stockLimitToastV101 .stock-limit-toast-v101-text {
    font-size: .85rem !important;
  }
}


/* Inline style block migrado desde index.html */
#stockLimitToastV101 .stock-limit-toast-v101-icon {
  background: rgba(255, 250, 243, .76) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23c49a6c%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z%27/%3E%3Cpath d=%27m3.3 7 8.7 5 8.7-5%27/%3E%3Cpath d=%27M12 22V12%27/%3E%3C/svg%3E") center/18px 18px no-repeat !important;
}
#stockLimitToastV101 .stock-limit-toast-v101-icon::before,
#stockLimitToastV101 .stock-limit-toast-v101-icon::after {
  content: none !important;
  display: none !important;
}


/* Inline style block migrado desde index.html */
@media (max-width: 760px) {
  .product-card.promo-card {
    display: block;
    overflow: hidden;
    background: linear-gradient(145deg, #201711 0%, #35261b 46%, #4b3525 100%);
    border-radius: 22px;
  }

  .product-card.promo-card .promo-card-media {
    min-height: 220px;
    position: relative;
  }

  .product-card.promo-card .promo-card-media img {
    min-height: 220px;
    height: 220px;
    width: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.42;
    transform: scale(1.02);
  }

  .product-card.promo-card .promo-card-media::after {
    background:
      linear-gradient(180deg, rgba(20,14,10,0.16) 0%, rgba(20,14,10,0.34) 34%, rgba(20,14,10,0.82) 100%);
  }

  .product-card.promo-card .promo-card-content {
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.9rem;
    inset: auto 0.9rem 0.9rem 0.9rem;
    display: grid;
    gap: 0.55rem;
    justify-content: start;
    align-content: end;
    padding: 0.95rem 0.95rem 1rem;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(39,28,20,0.88), rgba(26,19,14,0.90));
    border: 1px solid rgba(214,181,136,0.24);
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
    backdrop-filter: blur(2px);
  }

  .product-card.promo-card .promo-card-kicker {
    position: static;
    top: auto;
    left: auto;
    margin: 0 0 0.05rem;
    font-size: 0.76rem;
    padding: 0.35rem 0.72rem;
    background: rgba(255, 238, 210, 0.94);
    color: #5a3b1d;
  }

  .product-card.promo-card .promo-card-title {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.08;
    color: #fffaf3;
    max-width: 12ch;
    text-wrap: balance;
  }

  .product-card.promo-card .promo-card-text {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.45;
    color: rgba(255,250,243,0.92);
    max-width: 28ch;
  }

  .product-card.promo-card .promo-card-action {
    margin-top: 0.08rem;
    padding: 0.64rem 1rem;
    font-size: 0.92rem;
    font-weight: 850;
    background: linear-gradient(145deg, #e8c59b, #c89a64);
    color: #fffaf3;
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  }
}


/* Inline style block migrado desde index.html */
@media (max-width: 760px) {
  .product-card.promo-card {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    min-height: 192px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #201711 0%, #35261b 46%, #4b3525 100%) !important;
    align-items: stretch !important;
  }

  .product-card.promo-card .promo-card-media {
    min-height: 192px !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .product-card.promo-card .promo-card-media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 192px !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.34 !important;
    transform: scale(1.03) !important;
  }

  .product-card.promo-card .promo-card-media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(19,14,10,0.12) 0%, rgba(19,14,10,0.34) 62%, rgba(19,14,10,0.58) 100%) !important;
  }

  .product-card.promo-card .promo-card-content {
    position: static !important;
    inset: auto !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 1rem 0.95rem !important;
    background: linear-gradient(135deg, rgba(29,21,15,0.96), rgba(44,31,22,0.92)) !important;
    border-left: 1px solid rgba(214,181,136,0.18) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
  }

  .product-card.promo-card .promo-card-kicker {
    position: static !important;
    margin: 0 !important;
    font-size: 0.74rem !important;
    padding: 0.34rem 0.7rem !important;
    background: rgba(255, 238, 210, 0.96) !important;
    color: #5a3b1d !important;
  }

  .product-card.promo-card .promo-card-title {
    margin: 0 !important;
    font-size: 1.12rem !important;
    line-height: 1.08 !important;
    color: #fffaf3 !important;
    max-width: none !important;
    text-wrap: balance;
  }

  .product-card.promo-card .promo-card-text {
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    color: rgba(255,250,243,0.9) !important;
    max-width: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-card.promo-card .promo-card-action {
    margin-top: 0.1rem !important;
    padding: 0.62rem 0.95rem !important;
    font-size: 0.9rem !important;
    font-weight: 850 !important;
    background: linear-gradient(145deg, #e8c59b, #c89a64) !important;
    color: #fffaf3 !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.16) !important;
  }
}


/* Inline style block migrado desde index.html */
/* ============================
   V116 - Promo semanal mobile en dos columnas reales
   - La tarjeta promo-card tiene la imagen y el contenido distribuidos a lo ancho.
   - Corrige el caso donde se veía solo la foto por estar el contenido dentro de promo-card-media.
============================ */
@media (max-width: 760px) {
  article.product-card.promo-card {
    display: block !important;
    min-height: 184px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #201711 0%, #332419 52%, #4b3525 100%) !important;
    box-shadow: 0 16px 32px rgba(47, 40, 31, 0.18) !important;
  }

  article.product-card.promo-card .promo-card-media {
    display: grid !important;
    grid-template-columns: 42% 58% !important;
    align-items: stretch !important;
    min-height: 184px !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    overflow: hidden !important;
    background: #201711 !important;
  }

  article.product-card.promo-card .promo-card-media::after {
    display: none !important;
    content: none !important;
  }

  article.product-card.promo-card .promo-card-media > img {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 184px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    opacity: 0.58 !important;
    transform: none !important;
    filter: saturate(0.95) contrast(1.02) !important;
  }

  article.product-card.promo-card .promo-card-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: relative !important;
    inset: auto !important;
    z-index: 2 !important;
    min-height: 184px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0.46rem !important;
    padding: 0.86rem 0.88rem !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(196,154,108,0.18), transparent 34%),
      linear-gradient(135deg, rgba(33,24,17,0.98), rgba(54,38,26,0.96)) !important;
    border-left: 1px solid rgba(214,181,136,0.2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  article.product-card.promo-card .promo-card-kicker {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
    font-size: 0.66rem !important;
    line-height: 1.05 !important;
    padding: 0.32rem 0.62rem !important;
    border-radius: 999px !important;
    background: rgba(255, 238, 210, 0.96) !important;
    color: #5a3b1d !important;
    letter-spacing: 0.08em !important;
  }

  article.product-card.promo-card .promo-card-title {
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    color: #fffaf3 !important;
    font-size: 1.02rem !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    text-wrap: balance;
  }

  article.product-card.promo-card .promo-card-text {
    display: -webkit-box !important;
    margin: 0 !important;
    max-width: none !important;
    color: rgba(255,250,243,0.9) !important;
    font-size: 0.80rem !important;
    line-height: 1.32 !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  article.product-card.promo-card .promo-card-action {
    width: fit-content !important;
    margin-top: 0.1rem !important;
    padding: 0.52rem 0.82rem !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    background: linear-gradient(145deg, #e8c59b, #c89a64) !important;
    color: #fffaf3 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.16) !important;
  }
}

@media (max-width: 390px) {
  article.product-card.promo-card .promo-card-media {
    grid-template-columns: 40% 60% !important;
    min-height: 176px !important;
  }

  article.product-card.promo-card .promo-card-media > img,
  article.product-card.promo-card .promo-card-content {
    min-height: 176px !important;
  }

  article.product-card.promo-card .promo-card-content {
    padding: 0.78rem 0.76rem !important;
    gap: 0.38rem !important;
  }

  article.product-card.promo-card .promo-card-title {
    font-size: 0.96rem !important;
  }

  article.product-card.promo-card .promo-card-text {
    font-size: 0.76rem !important;
    line-height: 1.28 !important;
    -webkit-line-clamp: 4 !important;
  }

  article.product-card.promo-card .promo-card-action {
    font-size: 0.78rem !important;
    padding: 0.48rem 0.74rem !important;
  }
}


/* Inline style block migrado desde index.html */
:root{--gold:#b8963e;--gold-dark:#9a7a2a;--gold-light:#e8c97a;--deep:#1a1208;--shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.06)}
body{font-family:'Inter',system-ui,sans-serif!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.hero-title,.product-name,.events-title,.delivery-title,.product-detail-title,.social-title,.section-title{font-family:'Playfair Display',Georgia,serif!important}.hero-title,.events-title,.delivery-title,.product-detail-title,.social-title{letter-spacing:-.01em!important}.product-name{font-weight:600!important;letter-spacing:-.005em!important}.hero-cta{font-weight:500!important;letter-spacing:.02em!important;box-shadow:0 2px 8px rgba(184,150,62,.35)!important}.hero-cta:hover{box-shadow:0 4px 16px rgba(184,150,62,.45)!important;transform:translateY(-1px)}.section{margin-bottom:3.5rem!important}.section-header{margin-bottom:1.4rem!important}.section-sub{font-size:.88rem!important}.section-title{font-size:1.55rem!important;font-weight:700!important;letter-spacing:-.01em!important;text-transform:none!important;color:#2b2620!important;line-height:1.2!important}.section-title::after{content:'';display:block;width:40px;height:2px;background:var(--gold);margin-top:.55rem;border-radius:2px}
.catalog-search-v117{margin:0 0 1.05rem;border:1px solid rgba(196,154,108,.30);background:radial-gradient(circle at 6% 0%,rgba(184,150,62,.12),transparent 24%),linear-gradient(145deg,rgba(255,250,243,.98),rgba(247,239,228,.96));border-radius:22px;padding:.95rem;box-shadow:0 12px 28px rgba(47,40,31,.07)}.catalog-search-v117.hide,.assistant-fab-v117.hide{display:none!important}.catalog-search-title-v117{color:#2f281f;font-weight:900;font-size:.98rem}.catalog-search-sub-v117{color:#6a5f52;font-size:.82rem;line-height:1.35;margin-top:.18rem}.catalog-search-box-v117{display:grid;grid-template-columns:1fr auto;gap:.55rem;align-items:center;margin-top:.75rem}.catalog-search-box-v117 input{width:100%;border:1px solid rgba(196,154,108,.38);background:rgba(255,255,255,.82);border-radius:999px;padding:.72rem .95rem;color:#2f281f;outline:none;font-size:.94rem}.catalog-search-box-v117 input:focus{border-color:rgba(184,150,62,.72);box-shadow:0 0 0 4px rgba(184,150,62,.12)}.v117-chip-row{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:.68rem}.v117-chip{border:1px solid rgba(184,150,62,.38);background:rgba(255,255,255,.74);color:#4a3826;border-radius:999px;padding:.42rem .72rem;font-size:.78rem;font-weight:850;cursor:pointer}.v117-chip:hover{background:rgba(232,201,122,.22);border-color:rgba(184,150,62,.72)}.v117-results{display:none;margin-top:.82rem;gap:.56rem}.v117-results.show{display:grid}.v117-card{display:grid;grid-template-columns:54px 1fr;gap:.66rem;align-items:center;border:1px solid rgba(228,215,199,.94);background:rgba(255,255,255,.82);border-radius:16px;padding:.58rem}.v117-card img{width:54px;height:54px;object-fit:cover;border-radius:13px}.v117-name{color:#2f281f;font-weight:900;font-size:.9rem;line-height:1.14}.v117-meta{color:#7a6a58;font-size:.76rem;line-height:1.25;margin-top:.12rem}.v117-actions{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.45rem}.v117-actions button{border-radius:999px;border:1px solid rgba(196,154,108,.36);background:#fffaf3;color:#4a3826;padding:.34rem .58rem;font-size:.72rem;font-weight:850;cursor:pointer}.v117-actions button.primary{background:var(--gold);color:#fffaf3;border-color:var(--gold-dark)}.v117-empty{border:1px dashed rgba(196,154,108,.42);border-radius:16px;padding:.84rem;color:#6a5f52;background:rgba(255,255,255,.62);font-size:.86rem}
/* Resaltado de "Ver producto" (openCatalogProduct, catalog.js): borde
   y halo temporales, no cambia tamaño/layout de la card ni tapa sus
   botones. La pulsacion es puramente decorativa -se apaga sola con
   reduced-motion, el halo estatico sigue quedando-. */
.product-card-highlight{outline:3px solid var(--gold-dark);outline-offset:3px;box-shadow:0 0 0 8px rgba(196,154,108,.28);animation:productCardHighlightPulse 1.4s ease-in-out 1}
@keyframes productCardHighlightPulse{0%{box-shadow:0 0 0 0 rgba(196,154,108,.55)}60%{box-shadow:0 0 0 14px rgba(196,154,108,0)}100%{box-shadow:0 0 0 8px rgba(196,154,108,.28)}}
@media (prefers-reduced-motion: reduce){.product-card-highlight{animation:none}}
/* Confirmacion discreta + accesible de "Ver producto"
   (#catalogProductStatus, catalog.js): toast fijo abajo al centro,
   doble proposito -texto visible para todos, aria-live="polite" para
   lectores de pantalla-. */
.catalog-product-status{position:fixed;left:50%;bottom:5.6rem;transform:translateX(-50%) translateY(10px);max-width:calc(100vw - 2rem);background:linear-gradient(145deg,#2f281f,#1a1208);color:#fffaf3;padding:.62rem 1.05rem;border-radius:999px;font-size:.82rem;font-weight:800;text-align:center;box-shadow:0 14px 32px rgba(47,40,31,.28);z-index:340;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.catalog-product-status.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){.catalog-product-status{transition:none}}
.assistant-fab-v117{position:fixed;right:1rem;bottom:6.15rem;z-index:330;display:flex;align-items:center;gap:.6rem;border:1px solid rgba(196,154,108,.46);background:linear-gradient(145deg,rgba(255,250,243,.97),rgba(247,239,228,.96));color:#2f281f;border-radius:999px;padding:.48rem .72rem .48rem .48rem;box-shadow:0 16px 34px rgba(47,40,31,.16);cursor:pointer}.assistant-avatar-v117{width:42px;height:42px;min-width:42px;border-radius:999px;border:1px solid rgba(184,150,62,.52);background:linear-gradient(145deg,#e8c97a,#9a7a2a);background-size:cover;background-position:center;display:grid;place-items:center;color:#fffaf3;font-weight:900;overflow:hidden}.assistant-fab-copy-v117{display:grid;line-height:1.05}.assistant-fab-copy-v117 strong{font-size:.82rem}.assistant-fab-copy-v117 span{font-size:.70rem;color:#7a6a58;margin-top:.12rem}.assistant-panel-v117{position:fixed;right:1rem;bottom:6.15rem;z-index:335;width:min(410px,calc(100vw - 2rem));max-height:min(720px,calc(100vh - 2rem));display:none;grid-template-rows:auto 1fr auto;border-radius:24px;overflow:hidden;border:1px solid rgba(196,154,108,.42);background:linear-gradient(145deg,#fffaf3,#f4ecdd);box-shadow:0 28px 80px rgba(47,40,31,.28)}.assistant-panel-v117.show{display:grid}.assistant-head-v117{display:flex;gap:.72rem;align-items:center;padding:.95rem;background:linear-gradient(145deg,#2f281f,#1a1208);color:#fffaf3}.assistant-head-v117 .assistant-avatar-v117{width:48px;height:48px;min-width:48px}.assistant-title-v117{font-weight:900;font-size:1rem;line-height:1.12}.assistant-secondary-v117{color:rgba(255,250,243,.82);font-size:.82rem;margin-top:.1rem}.assistant-subtitle-v117{color:rgba(255,250,243,.70);font-size:.74rem;margin-top:.18rem}.assistant-close-v117{margin-left:auto;border:0;width:36px;height:36px;border-radius:999px;background:rgba(255,250,243,.12);color:#fffaf3;cursor:pointer;font-size:1.2rem}.assistant-body-v117{overflow:auto;padding:.95rem;display:grid;gap:.72rem}.assistant-msg-v117{border-radius:18px;padding:.76rem .84rem;background:#fff;border:1px solid rgba(228,215,199,.88);color:#4a3826;line-height:1.42;font-size:.88rem}.assistant-msg-v117.user{margin-left:2.5rem;background:rgba(232,201,122,.22);border-color:rgba(184,150,62,.34)}.assistant-tools-v117{display:flex;justify-content:flex-end;padding:0 .95rem .1rem}.assistant-clear-v117{border:1px solid rgba(196,154,108,.4);background:transparent;color:#7a5836;font-size:.72rem;font-weight:800;border-radius:999px;padding:.28rem .68rem;cursor:pointer}/* Cajon "Opciones rapidas" de Diguin: fila propia dentro del grid del
   panel (auto 1fr auto -> + esta fila auto), entre el historial y el
   formulario. Al no vivir dentro de #assistantBody (que es lo unico
   que se reemplaza en cada busqueda/limpieza/restauracion), sobrevive
   solo, sin necesitar reinsertarse -y nunca tapa mensajes porque es un
   renglon de grid real, no un overlay-. Se ancla al panel (no a la
   pagina): position:sticky sin ancestro con scroll equivale aca a
   quedarse fijo en su lugar dentro del panel. */
.assistant-quick-drawer-v117{position:sticky;bottom:0;z-index:2;padding:0 .95rem;background:transparent}
.assistant-quick-toggle-v117{width:100%;display:flex;align-items:center;gap:.45rem;border:1px solid rgba(196,154,108,.38);background:rgba(255,250,243,.92);color:#4a3826;border-radius:999px;padding:.5rem .85rem;font-size:.82rem;font-weight:800;cursor:pointer;box-shadow:0 6px 16px rgba(47,40,31,.09);transition:box-shadow .22s ease,transform .22s ease}
.assistant-quick-toggle-v117:hover{box-shadow:0 8px 20px rgba(47,40,31,.13)}
.assistant-quick-toggle-v117:active{transform:scale(.97)}
.assistant-quick-toggle-v117:focus-visible{outline:2px solid var(--gold-dark);outline-offset:2px}
.assistant-quick-toggle-icon{font-size:.9rem}
.assistant-quick-toggle-label{flex:1;text-align:left}
.assistant-quick-toggle-chevron{display:inline-block;transition:transform .24s ease}
#assistantQuickToggle[aria-expanded="true"] .assistant-quick-toggle-chevron{transform:rotate(180deg)}
.assistant-quick-panel-v117{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(6px);transition:grid-template-rows .25s ease,opacity .22s ease,transform .25s ease}
.assistant-quick-panel-v117.open{grid-template-rows:1fr;opacity:1;transform:translateY(0)}
.assistant-quick-panel-inner{overflow:hidden;min-height:0}
.assistant-quick-panel-title{font-size:.78rem;font-weight:800;color:#7a5836;margin:.55rem 0 .4rem}
.assistant-quick-chip-row{display:flex;flex-wrap:wrap;max-height:5.4rem;overflow-x:auto;overflow-y:hidden;gap:.4rem;padding-bottom:.6rem;scrollbar-width:thin}
.assistant-quick-chip{flex:0 0 auto;border:1px solid rgba(196,154,108,.4);background:#fff;color:#4a3826;border-radius:999px;padding:.4rem .75rem;font-size:.78rem;font-weight:700;cursor:pointer;transition:transform .16s ease,background .16s ease}
.assistant-quick-chip:hover{background:rgba(232,201,122,.18)}
.assistant-quick-chip:active{transform:scale(.95)}
.assistant-quick-chip:focus-visible{outline:2px solid var(--gold-dark);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .assistant-quick-toggle-chevron,
  .assistant-quick-panel-v117,
  .assistant-quick-toggle-v117,
  .assistant-quick-chip{transition:none!important}
}
.assistant-input-v117{display:grid;grid-template-columns:1fr auto;gap:.5rem;padding:.82rem;border-top:1px solid rgba(228,215,199,.88);background:rgba(255,250,243,.96)}.assistant-input-v117 input{border:1px solid rgba(196,154,108,.38);background:#fff;border-radius:999px;padding:.72rem .9rem;outline:none;color:#2f281f}.assistant-input-v117 button{border-radius:999px;border:1px solid var(--gold-dark);background:var(--gold);color:#fffaf3;font-weight:900;padding:.72rem .95rem;cursor:pointer}.admin-v117-panel{margin-top:1rem;border:1px solid rgba(196,154,108,.32);border-radius:20px;padding:.9rem;background:rgba(255,250,243,.74);display:grid;gap:.78rem}.admin-v117-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.admin-v117-field{display:grid;gap:.28rem}.admin-v117-field label{font-size:.73rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#7a5836}.admin-v117-field input,.admin-v117-field textarea,.admin-v117-field select{width:100%;border:1px solid rgba(196,154,108,.34);background:#fff;color:#2f281f;border-radius:13px;padding:.56rem .62rem;font:inherit}.admin-v117-field textarea{min-height:78px;resize:vertical}.admin-v117-pills{display:flex;flex-wrap:wrap;gap:.38rem}.admin-v117-pill{border-radius:999px;border:1px solid rgba(196,154,108,.38);background:rgba(255,255,255,.78);padding:.34rem .58rem;color:#4a3826;font-size:.74rem;font-weight:800}.admin-v117-actions{display:flex;gap:.45rem;flex-wrap:wrap}@media(max-width:760px){.section{margin-bottom:2.4rem!important}.catalog-search-v117{border-radius:18px;padding:.78rem}.catalog-search-box-v117,.assistant-input-v117{grid-template-columns:1fr}.assistant-fab-v117{right:.82rem;bottom:5.25rem;padding-right:.54rem}.assistant-fab-copy-v117{display:none}.assistant-panel-v117{left:.75rem;right:.75rem;bottom:5.25rem;width:auto;max-height:calc(100vh - 6.2rem);border-radius:20px}.admin-v117-grid{grid-template-columns:1fr}}


/* Inline style block migrado desde index.html */
.catalog-search-box-v117{grid-template-columns:1fr auto auto!important}.catalog-clear-v118{border-radius:999px;border:1px solid rgba(196,154,108,.36);background:#fffaf3;color:#4a3826;font-weight:850;padding:.72rem .9rem;cursor:pointer}.catalog-clear-v118:hover{background:rgba(232,201,122,.22);border-color:rgba(184,150,62,.72)}.assistant-msg-v118-hint{font-size:.78rem;color:#7a6a58;margin-top:.18rem}.v117-empty strong{color:#2f281f}@media(max-width:760px){.catalog-search-box-v117{grid-template-columns:1fr!important}.catalog-clear-v118{width:100%}}


/* Inline style block migrado desde index.html */
/* ============================
   V123 - Corrección final sobre base v118
   - Búsqueda precisa: no suma productos solo por estar disponibles.
   - Avatar visible completo.
   - Botón del asistente alineado con accesos flotantes, sin quedar al costado.
   - En mobile queda más cerca del carrito.
============================ */

.assistant-backdrop-v123 {
  position: fixed;
  inset: 0;
  z-index: 332;
  display: none;
  background: rgba(26, 18, 8, 0.34);
  backdrop-filter: blur(2px);
}

.assistant-backdrop-v123.show {
  display: block;
}

body.assistant-lock-v123 {
  position: fixed !important;
  overflow: hidden !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  touch-action: none !important;
}

body.assistant-open-v123 .assistant-fab-v117 {
  display: none !important;
}

.assistant-fab-v117 {
  right: 1.2rem !important;
  bottom: 10.35rem !important;
  z-index: 330 !important;
}

.assistant-panel-v117 {
  right: 1rem !important;
  bottom: 8.1rem !important;
  z-index: 335 !important;
  max-height: min(720px, calc(100dvh - 2rem)) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overscroll-behavior: contain !important;
}

.assistant-body-v117 {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.assistant-avatar-v117 {
  background-color: #fbf2e5 !important;
  background-image: url("../../public/assets/diguin-avatar.png") !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

.assistant-fab-v117 .assistant-avatar-v117 {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

.assistant-head-v117 .assistant-avatar-v117 {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
}

/* Volver arriba robusto */
.back-to-top,
#backToTopBtn {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 86px !important;
  top: auto !important;
  transform: translate(-50%, 10px) !important;
  z-index: 325 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 190px !important;
  padding: 0.56rem 0.92rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #2f281f !important;
  color: #fffaf3 !important;
  box-shadow: 0 14px 30px rgba(0,0,0,0.24) !important;
  font-size: 0.84rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease !important;
}

.back-to-top.show,
#backToTopBtn.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

body.assistant-open-v123 #backToTopBtn,
body.assistant-open-v123 .back-to-top {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Oculta "Volver arriba" mientras el toast de catalogProductStatus esta
   visible (Producto encontrado/Mesa encontrada/destino no encontrado):
   durante el hallazgo el foco es la tarjeta/seccion resaltada, no este
   boton. Mismo patron que body.assistant-open-v123 de arriba (!important
   necesario: .back-to-top.show/#backToTopBtn.show de mas arriba en este
   archivo tambien usan !important en opacity/visibility/pointer-events,
   asi que sin !important esta regla no ganaria). No toca
   position/left/right/transform: no cambia su ubicacion. */
body.catalog-status-visible #backToTopBtn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.catalog-status-visible #backToTopBtn {
    transition: none !important;
  }
}

@media (max-width: 760px) {
  .assistant-fab-v117 {
    right: 1.08rem !important;
    bottom: 7.05rem !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    padding: 0.42rem !important;
    border-radius: 999px !important;
  }

  .assistant-fab-copy-v117 {
    display: none !important;
  }

  .assistant-fab-v117 .assistant-avatar-v117 {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .assistant-panel-v117 {
    left: 0.75rem !important;
    right: 0.75rem !important;
    bottom: 6.25rem !important;
    width: auto !important;
    max-height: calc(100dvh - 7.3rem) !important;
    border-radius: 20px !important;
  }

  .back-to-top,
  #backToTopBtn {
    bottom: 84px !important;
    padding: 0.52rem 0.82rem !important;
    font-size: 0.80rem !important;
    max-width: 170px !important;
  }
}


/* Inline style block migrado desde index.html */
/* ============================
   V124 - Ajuste visual final del flotante Asistente de compra
   - Avatar sin fondo blanco agregado.
   - Sin doble círculo/borde dorado interno.
   - Flotante web/mobile un poco más arriba.
============================ */

.assistant-avatar-v117 {
  background-image: url("../../public/assets/diguin-avatar.png") !important;
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

.assistant-fab-v117 {
  right: 1.2rem !important;
  bottom: 11.85rem !important;
  z-index: 330 !important;
  border-color: rgba(196,154,108,.36) !important;
  box-shadow: 0 16px 34px rgba(47,40,31,.15) !important;
}

.assistant-fab-v117 .assistant-avatar-v117 {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}

.assistant-head-v117 .assistant-avatar-v117 {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
}

@media (max-width: 760px) {
  .assistant-fab-v117 {
    right: 1.08rem !important;
    bottom: 7.95rem !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: 0 12px 30px rgba(47,40,31,.18) !important;
  }

  .assistant-fab-v117 .assistant-avatar-v117 {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 999px !important;
  }

  .assistant-panel-v117 {
    bottom: 6.65rem !important;
    max-height: calc(100dvh - 7.7rem) !important;
  }
}


/* Inline style block migrado desde index.html */
/* Web: subo un poco la ayuda para que no se superponga con el QR/accesos */
.assistant-fab-v117 {
  right: 1rem !important;
  bottom: 15.25rem !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: .48rem .76rem .48rem .48rem !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, rgba(255,250,243,.97), rgba(247,239,228,.96)) !important;
  border: 1px solid rgba(196,154,108,.36) !important;
  box-shadow: 0 16px 34px rgba(47,40,31,.15) !important;
}

.assistant-fab-v117 .assistant-fab-copy-v117 {
  display: grid !important;
}

.assistant-fab-v117 .assistant-avatar-v117 {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 999px !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Mobile: dejo también la cápsula con texto, no solo el círculo */
@media (max-width: 760px) {
  .assistant-fab-v117 {
    right: .82rem !important;
    bottom: 7.9rem !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 1.65rem) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: .52rem !important;
    padding: .42rem .68rem .42rem .42rem !important;
    border-radius: 999px !important;
    background: linear-gradient(145deg, rgba(255,250,243,.98), rgba(247,239,228,.96)) !important;
    border: 1px solid rgba(196,154,108,.38) !important;
    box-shadow: 0 14px 30px rgba(47,40,31,.16) !important;
  }

  .assistant-fab-v117 .assistant-avatar-v117 {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
  }

  .assistant-fab-copy-v117 {
    display: grid !important;
    line-height: 1.05 !important;
    min-width: 74px !important;
  }

  .assistant-fab-copy-v117 strong {
    font-size: .78rem !important;
    white-space: nowrap !important;
  }

  .assistant-fab-copy-v117 span {
    font-size: .68rem !important;
    color: #7a6a58 !important;
    white-space: nowrap !important;
  }

  .assistant-panel-v117 {
    bottom: 6.5rem !important;
    max-height: calc(100dvh - 7.55rem) !important;
  }
}

/* Tarjeta admin para marquesina */
.admin-v126-marquee-note {
  color: #7a6a58;
  font-size: .8rem;
  line-height: 1.42;
}


/* Inline style block migrado desde index.html */
/* El asistente queda visible normalmente, pero por debajo de modales/drawers cuando existan. */
.assistant-fab-v117 {
  z-index: 330 !important;
}

.assistant-panel-v117 {
  z-index: 335 !important;
}

.assistant-backdrop-v117,
.assistant-backdrop-v121,
.assistant-backdrop-v122,
.assistant-backdrop-v123 {
  z-index: 332 !important;
}

/* Carrito y modales siempre tienen prioridad visual sobre la ayuda. */
.cart-overlay,
#cartOverlay,
.product-modal,
.product-detail-page,
.quick-view-modal,
.modal,
.auth-modal,
.checkout-review-modal,
.account-modal {
  z-index: 900 !important;
}

.cart-drawer,
#cartOverlay .cart-drawer,
.product-modal-content,
.modal-content,
.auth-modal-card,
.checkout-review-card,
.account-modal-card {
  z-index: 910 !important;
}

/* Si la ayuda está cerrada, no debe quedar ningún fondo interceptando clics. */
.assistant-backdrop-v128 {
  position: fixed;
  inset: 0;
  display: none;
  pointer-events: none;
}


/* Inline style block migrado desde index.html */
body.assistant-focus-v133 .assistant-panel-v117 {
  z-index: 1400 !important;
}

body.assistant-focus-v133 .assistant-fab-v117 {
  z-index: 1390 !important;
}

body.assistant-focus-v133 .assistant-backdrop-v117,
body.assistant-focus-v133 .assistant-backdrop-v121,
body.assistant-focus-v133 .assistant-backdrop-v122,
body.assistant-focus-v133 .assistant-backdrop-v123,
body.assistant-focus-v133 .assistant-backdrop-v128 {
  z-index: 1380 !important;
}


/* Inline style block migrado desde index.html */
/* El panel nunca debe quedar más alto que la pantalla: la X tiene que verse siempre. */
.assistant-panel-v117 {
  top: 1rem !important;
  bottom: 1rem !important;
  max-height: none !important;
  height: auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

.assistant-body-v117 {
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 760px) {
  .assistant-panel-v117 {
    top: 0.75rem !important;
    bottom: 0.75rem !important;
    max-height: none !important;
    height: auto !important;
  }
}


/* Inline style block migrado desde index.html */
  #assistantPanelV117 .v203-table {
    border: 1px solid rgba(196,154,108,.30);
    background: rgba(255,250,243,.92);
    border-radius: 18px;
    padding: .75rem;
    display: grid;
    gap: .52rem;
  }

  #assistantPanelV117 .v203-table-title {
    color: #2f281f;
    font-size: .96rem;
    font-weight: 950;
    line-height: 1.15;
  }

  #assistantPanelV117 .v203-table-line {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: .4rem;
    font-size: .78rem;
    color: #5f5348;
    align-items: center;
  }

  #assistantPanelV117 .v203-table-line strong {
    color: #2f281f;
  }

  #assistantPanelV117 .v203-table-actions {
    display: flex;
    gap: .42rem;
    flex-wrap: wrap;
  }

  #assistantPanelV117 .v203-table-actions button {
    border: 1px solid rgba(196,154,108,.34);
    background: #fffaf3;
    color: #4a3826;
    border-radius: 999px;
    padding: .4rem .58rem;
    font-size: .73rem;
    font-weight: 850;
    cursor: pointer;
  }

  #assistantPanelV117 .v203-table-actions button.primary {
    background: #b8963e;
    border-color: #a77f30;
    color: #fffaf3;
  }

  #assistantPanelV117 .v204-welcome {
    display: grid;
    gap: .56rem;
    margin-bottom: .58rem;
  }

  #assistantPanelV117 .v204-welcome-message {
    border: 1px solid rgba(196,154,108,.28);
    background: rgba(255,250,243,.92);
    border-radius: 18px;
    padding: .74rem .82rem;
    color: #5f5348;
    font-size: .84rem;
    line-height: 1.38;
  }

  #assistantPanelV117 .v204-welcome-message strong {
    color: #2f281f;
  }

  #assistantPanelV117 .v204-note {
    color: #7a6a58;
    font-size: .76rem;
    line-height: 1.34;
    padding: 0 .1rem;
  }

  #assistantPanelV117 .v204-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
  }

  #assistantPanelV117 .v204-chip {
    border: 1px solid rgba(196,154,108,.36);
    background: #fffaf3;
    color: #4a3826;
    border-radius: 999px;
    padding: .38rem .58rem;
    font-size: .74rem;
    font-weight: 850;
    cursor: pointer;
  }

  #assistantPanelV117 .v204-chip.primary {
    background: #b8963e;
    border-color: #a77f30;
    color: #fffaf3;
  }

  .v204-card-prep {
    opacity: .01;
    transform: translate3d(var(--v204-x, -22px), var(--v204-y, 14px), 0) rotate(var(--v204-r, -1.5deg)) scale(.992);
    will-change: opacity, transform;
    backface-visibility: hidden;
  }

  .v204-card-in {
    opacity: 1 !important;
    transform: translate3d(0,0,0) rotate(0deg) scale(1) !important;
    transition: opacity 580ms cubic-bezier(.2,.72,.2,1), transform 580ms cubic-bezier(.2,.72,.2,1);
    transition-delay: var(--v204-delay, 0ms);
  }


/* Inline style block migrado desde index.html */
  /* Cuando ya hubo interacción de carrito, las cards no vuelven a animarse ni saltar */
  body.v205-freeze-cards .product-card,
  body.v205-freeze-cards .favorite-card-v72,
  body.v205-freeze-cards .favorite-product-card,
  body.v205-freeze-cards .account-fav-row-v72,
  body.v205-freeze-cards [data-product-card],
  body.v205-freeze-cards .menu-card,
  body.v205-freeze-cards .card-product,
  body.v205-freeze-cards .producto-card,
  body.v205-freeze-cards .dish-card,
  body.v205-freeze-cards article.product-card,
  .v205-card-fixed-hard {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    visibility: visible !important;
    will-change: auto !important;
  }

  body.v205-freeze-cards .atg-product-reveal-v189,
  body.v205-freeze-cards .revealed-v189,
  body.v205-freeze-cards .v204-card-prep,
  body.v205-freeze-cards .v204-card-in,
  body.v205-freeze-cards .v204-card-seen {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    visibility: visible !important;
    will-change: auto !important;
  }

  #assistantPanelV117 .v206-mesa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    margin-top: .45rem;
  }

  #assistantPanelV117 .v206-mesa-actions button {
    border: 1px solid rgba(196,154,108,.34);
    background: #fffaf3;
    color: #4a3826;
    border-radius: 999px;
    padding: .4rem .58rem;
    font-size: .73rem;
    font-weight: 850;
    cursor: pointer;
  }

  #assistantPanelV117 .v206-mesa-actions button.primary {
    background: #b8963e;
    color: #fffaf3;
    border-color: #a77f30;
  }


/* Login/crear cuenta: capa unica, arriba de todo, sin interferencias */
  body.account-modal-stable #accountModal {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2147483640 !important;
    background: rgba(0, 0, 0, 0.58) !important;
    padding: 1rem !important;
    transform: none !important;
  }

  body.account-modal-stable #accountModal .auth-modal {
    position: relative !important;
    width: min(720px, calc(100vw - 2rem)) !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    pointer-events: auto !important;
    z-index: 2147483641 !important;
    transform: none !important;
    cursor: auto !important;
    scroll-behavior: auto !important;
  }

  body.account-modal-stable #accountModal *,
  body.account-modal-stable #accountModal input,
  body.account-modal-stable #accountModal select,
  body.account-modal-stable #accountModal textarea,
  body.account-modal-stable #accountModal button,
  body.account-modal-stable #accountModal label {
    pointer-events: auto !important;
  }

  body.account-modal-stable #accountModal .auth-close {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 2147483642 !important;
  }

  body.account-modal-stable #cartOverlay,
  body.account-modal-stable #checkoutReview,
  body.account-modal-stable #orderStepOverlayV165,
  body.account-modal-stable .cart-overlay,
  body.account-modal-stable .checkout-review-overlay,
  body.account-modal-stable .order-step-overlay,
  body.account-modal-stable #assistantPanelV117,
  body.account-modal-stable #assistantFabV117 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  @media (hover: hover) and (pointer: fine) {
    body.cursor-premium-enabled #accountModal,
    body.cursor-premium-enabled #accountModal *,
    body.cursor-premium-enabled #accountPageV72,
    body.cursor-premium-enabled #accountPageV72 * {
      cursor: auto !important;
    }

    body.cursor-premium-enabled #accountModal button,
    body.cursor-premium-enabled #accountModal [onclick],
    body.cursor-premium-enabled #accountModal .account-help-item-v72,
    body.cursor-premium-enabled #accountPageV72 button,
    body.cursor-premium-enabled #accountPageV72 [onclick],
    body.cursor-premium-enabled #accountPageV72 .account-help-item-v72 {
      cursor: pointer !important;
    }

    body.cursor-premium-enabled #accountModal input:not([disabled]):not([readonly]),
    body.cursor-premium-enabled #accountModal textarea:not([disabled]):not([readonly]),
    body.cursor-premium-enabled #accountModal .account-edit-panel input:not([disabled]):not([readonly]),
    body.cursor-premium-enabled #accountModal .account-edit-panel textarea:not([disabled]):not([readonly]) {
      cursor: text !important;
    }

    body.cursor-premium-enabled #accountModal select:not([disabled]),
    body.cursor-premium-enabled #accountPageV72 select:not([disabled]) {
      cursor: pointer !important;
    }

    body.cursor-premium-enabled #accountModal input[disabled],
    body.cursor-premium-enabled #accountModal input[readonly],
    body.cursor-premium-enabled #accountModal textarea[disabled],
    body.cursor-premium-enabled #accountModal textarea[readonly],
    body.cursor-premium-enabled #accountPageV72 .account-mini-item,
    body.cursor-premium-enabled #accountPageV72 .v173-order-line,
    body.cursor-premium-enabled #accountPageV72 .v173-order-products,
    body.cursor-premium-enabled #accountPageV72 .account-info-item-v72 {
      cursor: default !important;
    }
  }


/* Inline style block migrado desde index.html */
  .design-preview-v189.v219-preview {
    overflow: visible !important;
  }

  .design-preview-v189.v219-preview .design-preview-card-v189 {
    opacity: 1;
    transform: none;
    will-change: opacity, transform;
    animation-fill-mode: both;
    animation-duration: var(--v219-preview-duration, 840ms);
    animation-timing-function: cubic-bezier(.2,.72,.2,1);
  }

  .design-preview-v189.v219-preview.v219-cardStackFan .design-preview-card-v189 {
    animation-name: v219PreviewStack;
  }

  .design-preview-v189.v219-preview.v219-deckSpread .design-preview-card-v189 {
    animation-name: v219PreviewDeck;
  }

  .design-preview-v189.v219-preview.v219-cardCascade .design-preview-card-v189 {
    animation-name: v219PreviewCascade;
  }

  .design-preview-v189.v219-preview .design-preview-card-v189:nth-child(1) {
    --v219-x: -170px;
    --v219-r: -10deg;
    animation-delay: 0ms;
  }

  .design-preview-v189.v219-preview .design-preview-card-v189:nth-child(2) {
    --v219-x: -115px;
    --v219-r: -7deg;
    animation-delay: 100ms;
  }

  .design-preview-v189.v219-preview .design-preview-card-v189:nth-child(3) {
    --v219-x: -60px;
    --v219-r: -4deg;
    animation-delay: 200ms;
  }

  .design-preview-v189.v219-preview .design-preview-card-v189:nth-child(4) {
    --v219-x: -20px;
    --v219-r: -2deg;
    animation-delay: 300ms;
  }

  @keyframes v219PreviewStack {
    0% {
      opacity: 0;
      transform: translate3d(var(--v219-x), 20px, 0) rotate(var(--v219-r)) scale(.84);
    }
    72% {
      opacity: 1;
      transform: translate3d(10px, -6px, 0) rotate(1deg) scale(1.016);
    }
    100% {
      opacity: 1;
      transform: translate3d(0,0,0) rotate(0) scale(1);
    }
  }

  @keyframes v219PreviewDeck {
    0% {
      opacity: 0;
      transform: translate3d(0, 36px, 0) rotate(var(--v219-r)) scale(.90);
    }
    62% {
      opacity: 1;
      transform: translate3d(calc(var(--v219-x) / -12), -8px, 0) rotate(calc(var(--v219-r) * -.20)) scale(1.014);
    }
    100% {
      opacity: 1;
      transform: translate3d(0,0,0) rotate(0) scale(1);
    }
  }

  @keyframes v219PreviewCascade {
    0% {
      opacity: 0;
      transform: translate3d(0, 46px, 0) scale(.96);
    }
    72% {
      opacity: 1;
      transform: translate3d(0, -6px, 0) scale(1.01);
    }
    100% {
      opacity: 1;
      transform: translate3d(0,0,0) scale(1);
    }
  }

  .v219-product-anim {
    opacity: 0;
    will-change: opacity, transform;
    backface-visibility: hidden;
  }

  .v219-product-anim.v219-in {
    animation-fill-mode: both;
    animation-duration: var(--v219-duration, 840ms);
    animation-delay: var(--v219-delay, 0ms);
    animation-timing-function: cubic-bezier(.2,.72,.2,1);
  }

  .v219-product-anim.v219-cardStackFan.v219-in {
    animation-name: v219ProductStack;
  }

  .v219-product-anim.v219-deckSpread.v219-in {
    animation-name: v219ProductDeck;
  }

  .v219-product-anim.v219-cardCascade.v219-in {
    animation-name: v219ProductCascade;
  }

  @keyframes v219ProductStack {
    0% {
      opacity: 0;
      transform: translate3d(var(--v219-stack-x,-180px), var(--v219-stack-y,14px), 0) rotate(var(--v219-stack-r,-8deg)) scale(.86);
    }
    72% {
      opacity: 1;
      transform: translate3d(10px,-5px,0) rotate(1deg) scale(1.012);
    }
    100% {
      opacity: 1;
      transform: translate3d(0,0,0) rotate(0) scale(1);
    }
  }

  @keyframes v219ProductDeck {
    0% {
      opacity: 0;
      transform: translate3d(0,34px,0) rotate(var(--v219-spread-r,-4deg)) scale(.92);
    }
    62% {
      opacity: 1;
      transform: translate3d(var(--v219-spread-x,0),-7px,0) rotate(calc(var(--v219-spread-r,0deg)*-.25)) scale(1.012);
    }
    100% {
      opacity: 1;
      transform: translate3d(0,0,0) rotate(0) scale(1);
    }
  }

  @keyframes v219ProductCascade {
    0% {
      opacity: 0;
      transform: translate3d(0,42px,0) scale(.96);
    }
    72% {
      opacity: 1;
      transform: translate3d(0,-6px,0) scale(1.008);
    }
    100% {
      opacity: 1;
      transform: translate3d(0,0,0) scale(1);
    }
  }

  .v219-product-done {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    visibility: visible !important;
  }


/* Auth forms - migrado desde index.html Etapa 1 */
.auth-inline-link-row {
  margin: 0.55rem 0 0;
  text-align: right;
}

.auth-text-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: #8b6a2f;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.auth-text-link:hover,
.auth-text-link:focus-visible {
  color: #1e1712;
}

.password-recovery-view {
  display: none;
}

.password-recovery-view.active {
  display: block;
}

.password-recovery-message {
  display: none;
  margin: 0.85rem 0;
  padding: 0.72rem 0.9rem;
  border: 1px solid #d8c28b;
  border-radius: 12px;
  background: #fffaf0;
  color: #4d3b1d;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.3;
}

.password-recovery-message.show {
  display: block;
}

.password-recovery-message.error {
  border-color: #b42318;
  background: #fff3f0;
  color: #8a1f17;
}

.cart-coupon-error {
  margin: 0.6rem 0 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid #b42318;
  border-radius: 12px;
  background: #fff3f0;
  color: #8a1f17;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.cart-coupon-error[hidden] {
  display: none;
}


/* ============================
   D2-real-1 - Catalogo / detalle como VISTA full-screen real (overlay)
   #catalogPage y #productDetailPage, cuando estan .active, pasan a overlay
   fijo que tapa la home y arranca desde arriba (no dependen del scroll a la
   posicion de la seccion en el flujo). z-index 150: por encima de home(0-6),
   header(80) y flotantes(90); por debajo de modales/carrito/toast(220-345)
   para que esos abran ENCIMA. Selector por id => gana a las reglas .section
   previas. Reversible (borrar este bloque + el JS + el script tag).
============================ */
#catalogPage.active,
#productDetailPage.active {
  position: fixed !important;
  inset: 0 !important;
  z-index: 150 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  padding: 1.9rem 1.1rem 3rem !important;
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%) !important;
  scroll-margin-top: 0 !important;
}

/* La vista real arranca desde arriba: el header del bloque queda visible */
#catalogPage.active .section-header,
#catalogPage.active .catalog-page-actions {
  margin-top: 0 !important;
}

/* Bloqueo de scroll de la home detras mientras la vista esta activa.
   html Y body: bloquear solo body no alcanza en mobile -el elemento raiz
   sigue siendo el que realmente scrollea y sin esto la home se movia
   detras del overlay y Chrome llegaba a disparar pull-to-refresh.
   overscroll-behavior-y:none (no contain): contain igual deja que Chrome
   Android interprete el gesto en el viewport raiz y dispare su propio
   pull-to-refresh; none lo desactiva del todo en el raiz mientras la
   vista esta abierta, sin afectar el scroll vertical normal adentro del
   panel (ver #catalogPage.active/#productDetailPage.active). */
html.atg-view-open,
body.atg-view-open {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
  overscroll-behavior-x: none !important;
}

/* Con la vista full-screen abierta (overlay z-index 150), el stack flotante
   (carrito/WhatsApp/QR, z-index 90) queda tapado. Se eleva a 160: por encima
   del overlay y por debajo de drawers/modales/popups (220+). */
body.atg-view-open .floating-stack {
  z-index: 160 !important;
}

/* ============================
   QUICK WINS VISUALES (Fase 1 pulido)
   - Anclas: el header sticky (~117px desktop) tapaba los titulos de seccion;
     el valor efectivo previo era 82px. Regla final ganadora por orden de cascada.
   - Carrito: el panel ya muestra el encabezado "Productos seleccionados"
     (#cartItemsTitleAtg); el titulo de grupo V157 repetia el mismo texto
     cuando es el primer elemento de la lista.
============================ */
#como-comprar,
#arma-tu-mesa,
#con-descuento,
#ofertas,
#menu,
#mas-vendidos,
#mas-visitados,
#low-carb,
#favoritos-cliente,
#eventos,
#envios,
#preguntas-frecuentes,
#redes-sociales,
#newsletter {
  scroll-margin-top: 140px !important;
}

@media (max-width: 760px) {
  #como-comprar,
  #arma-tu-mesa,
  #con-descuento,
  #ofertas,
  #menu,
  #mas-vendidos,
  #mas-visitados,
  #low-carb,
  #favoritos-cliente,
  #eventos,
  #envios,
  #preguntas-frecuentes,
  #redes-sociales,
  #newsletter {
    scroll-margin-top: 358px !important;
  }
}

#cartItemsTitleAtg + #cartItems > .v157-manual-title:first-child {
  display: none;
}

/* ============================
   FASE 3B — flotantes mobile compactos
   Debe quedar al FINAL del archivo: las capas previas de
   .assistant-fab-v117 / .back-to-top usan !important y gana la última.
============================ */
@media (max-width: 760px) {
  /* Diguin y el stack de carrito/WhatsApp comparten la misma base inferior,
     zona segura de iOS incluida. Antes solo el stack la sumaba: en Safari iOS
     el carrito subia y quedaba debajo de Diguin. */
  :root {
    --floating-stack-bottom: calc(0.62rem + env(safe-area-inset-bottom, 0px));
  }

  .floating-stack {
    bottom: var(--floating-stack-bottom) !important;
  }

  /* Diguin pasa de cápsula con texto (146px de ancho, tapaba el botón
     "Agregar" de las cards del Menú) a burbuja de 56px pegada al margen.
     Altura: base del stack + carrito y WhatsApp (40px c/u) + su separación
     (0.42rem) + aire. Con zona segura cero da los mismos 7.4rem de antes. */
  .assistant-fab-v117 {
    right: 0.65rem !important;
    bottom: calc(var(--floating-stack-bottom) + 80px + 0.42rem + 1.36rem) !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: 0 12px 30px rgba(47, 40, 31, 0.18) !important;
  }

  .assistant-fab-v117 .assistant-fab-copy-v117 {
    display: none !important;
  }

  .assistant-fab-v117 .assistant-avatar-v117 {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 999px !important;
  }

  /* Volver arriba en mobile: el eje vertical (bottom bajo + safe-area) es
     el que evita tapar titulo/CTA/precio/Vista rapida de las cards -eso se
     conserva sin cambios-. El eje horizontal vuelve a quedar centrado
     (left:50% + translateX(-50%), igual que la regla base de desktop mas
     arriba en este archivo) en lugar de pegado a la izquierda. El
     translateX(-50%) se combina en el mismo transform que ya maneja la
     animacion de entrada (traslacion en Y de 10px -> 0 al mostrarse), no
     se agrega una propiedad aparte ni se pisa la animacion existente. */
  .back-to-top,
  #backToTopBtn {
    left: 50% !important;
    right: auto !important;
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)) !important;
    transform: translate(-50%, 10px) !important;
  }

  .back-to-top.show,
  #backToTopBtn.show {
    transform: translate(-50%, 0) !important;
  }
}

/* Con el panel de Diguin abierto, Volver arriba debe ocultarse. La regla
   original usaba body.assistant-open-v123, clase que el JS actual solo
   remueve y nunca agrega (regla muerta): el botón quedaba asomando por
   debajo del panel. Se replica con las clases que el JS sí aplica hoy. */
body.assistant-open .back-to-top,
body.assistant-open #backToTopBtn,
body.assistant-open-v185 .back-to-top,
body.assistant-open-v185 #backToTopBtn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================
   Integridad carrito/checkout
   - CTA "Hacer pedido" deshabilitado con carrito vacío
     (lo controla syncCartCtaState en guest-checkout-account-pages.js).
   - Nota de pago del panel V165 (overlays.php).
============================ */
.v165-cart-bottom .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.6);
}

#cartEmpty #cartEmptyMenuBtn {
  display: inline-flex;
  margin-top: 0.6rem;
}

.v165-payment-note {
  margin: 0.55rem 0 0;
  color: #6a5f52;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ============================
   Avisos públicos únicos (showSiteNotice, public/js/site-notices.js)
   - Arriba y centrado a proposito: Diguin, carrito y "Volver arriba"
     viven todos abajo (z-index 210-345); un aviso ahi arriba nunca los
     tapa. z-index 9600: por encima de carrito/modales (900-910) y de
     cualquier overlay existente, por debajo del toast de stock
     (.stock-limit-toast-v95, 9999) para no competir con el mas
     especifico.
   - pointer-events:none en la region (para no bloquear clicks en el
     header/contenido detras del espacio vacio entre avisos) y
     pointer-events:auto en cada aviso individual.
============================ */
/* top:5rem (no 0.85rem) por defecto -no solo con Diguin/carrito
   abiertos-: overlays con boton cerrar propio arriba de todo (Diguin
   ~73px, carrito ~52px medidos reales) quedaban con ese boton tapado y
   no clickeable por un aviso mas alto. Una sola posicion segura por
   defecto es mas robusta que una regla puntual por cada overlay -no
   depende de conocer la clase de estado exacta de cada uno-. Sigue
   siendo claramente "arriba" de la pantalla, no al medio. */
.site-notice-region {
  position: fixed;
  top: max(5rem, calc(1rem + env(safe-area-inset-top, 0px)));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9600;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
  width: min(420px, calc(100vw - 1.6rem));
  pointer-events: none;
}

.site-notice {
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.72rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgba(196, 154, 108, 0.36);
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  color: #2b2620;
  box-shadow: 0 14px 32px rgba(43, 38, 32, 0.18);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-notice.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-notice--success { border-color: rgba(76, 148, 96, 0.42); }
.site-notice--warning { border-color: rgba(196, 132, 46, 0.46); }
.site-notice--error { border-color: rgba(190, 62, 62, 0.5); background: linear-gradient(135deg, #fff5f3 0%, #f6e5e2 100%); }

.site-notice-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.site-notice-title {
  font-weight: 850;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

.site-notice-text {
  font-size: 0.86rem;
  line-height: 1.4;
  color: #4a3826;
  word-break: break-word;
}

.site-notice-close {
  flex-shrink: 0;
  margin-left: auto;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(196, 154, 108, 0.34);
  background: rgba(255, 255, 255, 0.6);
  color: #6a5f52;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.site-notice-close:focus-visible,
.site-notice-close:focus {
  outline: 2px solid var(--gold-dark, #9a7a2a);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .site-notice-region {
    width: calc(100vw - 1.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-notice {
    transition: none;
  }
}

/* ============================
   Diálogo accesible único (showAppDialog, public/js/site-notices.js)
   z-index 9700: por encima del toast de avisos (site-notice-region 9600) y
   de cualquier overlay/modal existente del sitio (carrito, producto,
   catálogo fullscreen, checkout) -puede dispararse desde dentro de
   cualquiera de ellos, p.ej. reemplazo de beneficio dentro del carrito-.
============================ */
.app-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(43, 38, 32, 0.55);
}

.app-dialog-overlay.show {
  display: flex;
}

.app-dialog-panel {
  width: min(420px, 100%);
  box-sizing: border-box;
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  border-radius: 18px;
  border: 1px solid rgba(196, 154, 108, 0.36);
  box-shadow: 0 20px 48px rgba(43, 38, 32, 0.32);
  padding: 1.3rem 1.4rem;
}

.app-dialog-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 850;
  color: #2b2620;
}

.app-dialog-message {
  margin: 0 0 1.1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #4a3826;
}

.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.app-dialog-btn {
  border-radius: 999px;
  padding: 0.62rem 1.1rem;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
}

.app-dialog-btn--secondary {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(196, 154, 108, 0.4);
  color: #4a3826;
}

.app-dialog-btn--primary {
  background: var(--gold, #b8963e);
  border-color: var(--gold-dark, #9a7a2a);
  color: #fffaf3;
}

.app-dialog-btn--destructive {
  background: #b23b3b;
  border-color: #8f2c2c;
  color: #fff5f3;
}

.app-dialog-btn:focus-visible,
.app-dialog-btn:focus {
  outline: 2px solid var(--gold-dark, #9a7a2a);
  outline-offset: 2px;
}

body.app-dialog-open {
  overflow: hidden;
}

/* ============================
   SOLICITUD DE PRESUPUESTO + ETIQUETAS DE EVENTOS Y ENVIOS
   Debe quedar al final: las reglas mobile previas de .events-list span y
   .delivery-tag usan !important.
============================ */
.quote-request-overlay {
  position: fixed;
  inset: 0;
  z-index: 750; /* sobre el banner de cookies (720), bajo los modales legales (760) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(26, 18, 8, 0.46);
  backdrop-filter: blur(3px);
}

.quote-request-overlay[hidden] {
  display: none;
}

.quote-request-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: min(92dvh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fffaf3;
  color: #3b332a;
  border: 1px solid rgba(196, 154, 108, 0.34);
  border-radius: 22px;
  padding: 1.35rem 1.25rem 1.25rem;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.26);
}

.quote-request-close {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.quote-request-close:focus-visible,
.quote-request-form input:focus-visible,
.quote-request-form select:focus-visible,
.quote-request-form textarea:focus-visible,
.quote-request-actions button:focus-visible,
.events-tag-option:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 2px;
}

.quote-request-title {
  margin: 0 2.8rem 0.35rem 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.2;
  color: #2b2620;
}

.quote-request-intro,
.quote-request-note {
  margin: 0;
  color: #6a5f52;
  font-size: 0.86rem;
  line-height: 1.45;
}

.quote-request-note {
  font-size: 0.78rem;
}

.quote-request-form {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.quote-request-field {
  display: grid;
  gap: 0.32rem;
}

.quote-request-field[hidden] {
  display: none;
}

.quote-request-field label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #4b4035;
}

.quote-request-form input,
.quote-request-form select,
.quote-request-form textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  border: 1px solid #d8c7b1;
  border-radius: 12px;
  padding: 0.62rem 0.75rem;
  font: inherit;
  font-size: 16px; /* evita el zoom automatico de iOS al enfocar */
  color: #3b332a;
  background: #fff;
}

.quote-request-form textarea {
  min-height: 112px;
  resize: vertical;
}

.quote-request-form [aria-invalid="true"] {
  border-color: #b4412f;
}

.quote-request-error {
  color: #9c3524;
  font-size: 0.8rem;
  line-height: 1.3;
}

.quote-request-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.quote-request-status {
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  font-size: 0.88rem;
  line-height: 1.4;
  background: #f7efe4;
  color: #4b4035;
}

.quote-request-status[data-tone="success"] {
  background: #e8f3e6;
  color: #2f5a2a;
}

.quote-request-status[data-tone="error"] {
  background: #fbe9e5;
  color: #8a2f20;
}

.quote-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.quote-request-actions button {
  min-height: 44px;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

.quote-request-actions button[hidden] {
  display: none;
}

.quote-request-submit:disabled {
  opacity: 0.65;
  cursor: progress;
}

.quote-request-view[hidden] {
  display: none;
}

/* Fecha aproximada + cantidad de personas: dos columnas; se apilan en
   pantallas angostas (ver media query). min-width:0 evita que el input date
   de iOS desborde la columna. */
.quote-request-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.quote-request-row .quote-request-field {
  min-width: 0;
}

.quote-request-form input[type="date"] {
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  display: block;
}

.quote-request-form input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

/* Confirmacion de envio. */
.quote-request-success {
  padding: 0.6rem 0 0.2rem;
  text-align: center;
}

.quote-request-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0.4rem auto 0.9rem;
  border-radius: 50%;
  background: #e5f2e1;
  color: #2f7a35;
  box-shadow: 0 0 0 8px rgba(47, 122, 53, 0.08);
}

.quote-request-success-title {
  margin: 0 0 0.5rem;
  text-align: center;
}

/* Recibe foco por codigo (tabindex=-1) solo para que el lector de pantalla
   anuncie la confirmacion; no es un control, no necesita indicador visible. */
.quote-request-success-title:focus,
.quote-request-success-title:focus-visible {
  outline: none;
}

.quote-request-success-text {
  margin: 0 auto;
  max-width: 34rem;
  color: #6a5f52;
  font-size: 0.92rem;
  line-height: 1.5;
}

.quote-request-summary {
  margin: 1.2rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(196, 154, 108, 0.34);
  border-radius: 14px;
  background: #fff;
  text-align: left;
}

.quote-request-summary[hidden],
.quote-request-summary-item[hidden] {
  display: none;
}

.quote-request-summary-title {
  margin: 0 0 0.55rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a5836;
}

.quote-request-summary-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.quote-request-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.9rem;
  line-height: 1.35;
}

.quote-request-summary-item dt {
  color: #6a5f52;
}

.quote-request-summary-item dd {
  margin: 0;
  font-weight: 700;
  color: #3b332a;
  text-align: right;
  overflow-wrap: anywhere;
}

.quote-request-success-actions {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin-top: 1.3rem;
}

.quote-request-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

.quote-request-back:focus-visible,
.quote-request-urgent:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 2px;
}

.quote-request-urgent {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.4rem;
  color: #2f7a35;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.quote-request-urgent[hidden] {
  display: none;
}

/* Con el formulario abierto: sin scroll de fondo y sin flotantes encima de
   los campos (el teclado de mobile los dejaria sobre el formulario). */
body.quote-request-open {
  overflow: hidden;
}

body.quote-request-open .floating-stack,
body.quote-request-open .assistant-fab-v117,
body.quote-request-open #backToTopBtn {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 620px) {
  .quote-request-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .quote-request-modal {
    width: 100%;
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
    padding: 1.15rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .quote-request-actions {
    flex-direction: column;
  }

  .quote-request-actions button,
  .quote-request-back {
    width: 100%;
  }

  .quote-request-success-actions {
    justify-items: stretch;
  }

  .quote-request-urgent {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .quote-request-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Etiquetas de Eventos como controles (solo con accion quote_form). */
.events-tag-option {
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  border: 1px solid rgba(177, 131, 79, 0.55);
  border-radius: 999px;
  background: #fff;
  color: #4a3826;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.events-tag-option::after {
  content: " →";
  color: var(--gold-dark);
}

.events-tag-option:hover {
  background: rgba(232, 201, 122, 0.22);
  border-color: var(--gold-dark);
}

.events-tag-option:active {
  background: rgba(232, 201, 122, 0.34);
}

/* Acciones del bloque Eventos: mismo tamano, tipografia y radio; principal
   dorado (formulario) y secundario claro con borde dorado (WhatsApp). En
   pantallas angostas se apilan a ancho completo por el flex-basis. */
.events-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}

.events-cta-group[hidden] {
  display: none;
}

.events-cta {
  flex: 1 1 13rem;
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  box-sizing: border-box;
  padding: 0.7rem 1.2rem;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.events-cta-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

.events-cta-primary:hover {
  background: var(--gold-dark);
  border-color: var(--gold-dark);
}

.events-cta-secondary {
  background: #fffaf3;
  color: #4a3826;
}

.events-cta-secondary:hover {
  background: rgba(232, 201, 122, 0.22);
  border-color: var(--gold-dark);
}

.events-cta:focus-visible {
  outline: 3px solid var(--gold-dark);
  outline-offset: 2px;
}

.events-cta-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.events-cta-icon svg {
  width: 100%;
  height: 100%;
}

/* Logo de WhatsApp en su verde de marca sobre el boton claro. */
.events-cta-secondary .events-cta-icon-whatsapp {
  color: #25d366;
}

.events-cta-label {
  min-width: 0;
}

/* Etiquetas informativas de Envios: lista de texto, sin forma de boton. */
.delivery-tags {
  gap: 0.35rem 0.9rem !important;
}

.delivery-tag {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #5d4f42 !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  cursor: default;
}

.delivery-tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.42rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}

@media (max-width: 760px) {
  .events-tag-option {
    font-size: 0.82rem !important;
  }

  .events-list span {
    font-size: 0.75rem !important;
  }

  .delivery-tag {
    font-size: 0.78rem !important;
  }
}

/* Estado del catálogo mientras llega api/products/list.php (o si falla la
   primera carga). Ocupa todo el ancho de la grilla, mismo tono que
   .empty-state. */
.catalog-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  min-height: 4.5rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px dashed rgba(196, 154, 108, 0.42);
  background: linear-gradient(135deg, #fffaf3 0%, #f3ede4 100%);
  color: #6a5f52;
  font-size: 0.9rem;
  text-align: center;
}

.catalog-status-spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(196, 154, 108, 0.35);
  border-top-color: var(--gold);
  animation: catalog-status-spin 0.9s linear infinite;
}

@keyframes catalog-status-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-status-spinner { animation: none; }
}