/* =====================================================================
   Click2Bite · experiencia del cliente (menú, carrito, pago, seguimiento)
   ===================================================================== */

.store-body { background: var(--cream); color: var(--espresso); min-height: 100vh; overflow-x: hidden; }
.store-body a { color: var(--brand-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.store-body a:hover { color: var(--brand); }
.store-body a.btn-cta, .store-body a.btn-brand, .store-body a.btn-brand:hover { color: #fff; }
.store-body a.btn-ghost { color: var(--espresso); }
.store-body.lock { overflow: hidden; }
.st-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .st-container { padding: 0 28px; } }

/* ---------- Barra superior flotante ---------- */
.st-topbar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: 64px; display: flex; align-items: center; transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; }
.st-topbar .st-container { display: flex; align-items: center; gap: 12px; }
.st-topbar.solid { background: color-mix(in srgb, var(--cream) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
.st-top-brand { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--ease-out); text-decoration: none; color: var(--espresso); min-width: 0; }
.st-topbar.solid .st-top-brand { opacity: 1; transform: none; }
.st-top-brand img, .st-top-brand .st-mini-logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.st-top-brand strong { font-family: var(--font-display); font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-top-actions { margin-left: auto; display: flex; gap: 8px; }
.st-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-grid; place-items: center; border: 0; background: rgba(255, 255, 255, .92); color: var(--espresso); box-shadow: var(--shadow-1); position: relative; transition: transform .2s var(--ease-out), background .2s; font-size: 1.15rem; }
.st-icon-btn:hover { transform: translateY(-1px); background: #fff; }
.st-icon-btn .count { position: absolute; top: -4px; right: -4px; min-width: 21px; height: 21px; border-radius: 999px; background: var(--brand-strong, var(--brand)); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; padding: 0 5px; border: 2px solid var(--cream); }
.st-icon-btn .count:empty, .st-icon-btn .count[data-n="0"] { display: none; }

/* ---------- Portada ---------- */
.st-hero { position: relative; min-height: clamp(420px, 62vh, 620px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; background: #2a1b12; }
.st-hero-bg { position: absolute; inset: -2%; background-size: cover; background-position: center; z-index: -2; transform-origin: 70% 40%; animation: st-kenburns 22s ease-out both; }
img.st-hero-bg { display: block; width: 104%; height: 104%; object-fit: cover; object-position: center; }
.st-hero-bg.fallback { background: radial-gradient(1200px 500px at 85% 0%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(242, 163, 58, .35), transparent 60%), linear-gradient(135deg, #3a2317, #1b100a); }
.st-hero-bg.fallback::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 22px 22px; }
.st-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 11, 6, .55) 0%, rgba(20, 11, 6, .1) 30%, rgba(20, 11, 6, .45) 60%, rgba(20, 11, 6, .92) 100%), linear-gradient(90deg, rgba(20, 11, 6, .6), transparent 70%); }
.st-hero-inner { padding-top: 96px; padding-bottom: 44px; }
.st-hero-inner > * { animation: c2b-fade-up .8s var(--ease-out) both; }
.st-hero-inner > *:nth-child(2) { animation-delay: .08s; }
.st-hero-inner > *:nth-child(3) { animation-delay: .16s; }
.st-hero-inner > *:nth-child(4) { animation-delay: .24s; }
.st-hero-inner > *:nth-child(5) { animation-delay: .32s; }
.st-hero-inner > *:nth-child(6) { animation-delay: .4s; }
.st-logo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255, 255, 255, .92); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); background: var(--brand-strong, var(--brand)); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: #fff; margin-bottom: 14px; }
.st-eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; font-weight: 700; color: var(--saffron); }
.st-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.st-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 7vw, 4.6rem); line-height: .98; letter-spacing: -.03em; margin: 10px 0 12px; text-wrap: balance; font-variation-settings: "SOFT" 50, "WONK" 1; }
.st-desc { max-width: 620px; font-size: 1.05rem; color: rgba(255, 255, 255, .86); margin-bottom: 18px; text-wrap: pretty; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .9rem; font-weight: 600; color: #fff; }
.st-chip i { opacity: .9; }
.st-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; animation: c2b-pulse-dot 1.8s infinite; }
.st-chip.closed .dot { background: #f87171; animation: none; }
.st-hero-link { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; color: #fff; background: none; border: 0; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); }
.st-hero-link:hover { text-decoration-color: #fff; }
@keyframes st-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

.st-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); font-weight: 600; margin: -22px 0 18px; position: relative; z-index: 2; box-shadow: var(--shadow-2); }
.st-banner.warn { background: #fff7e6; color: #7a4b00; border: 1px solid #f7d9a6; }
.st-banner.info { background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--espresso); border: 1px solid color-mix(in srgb, var(--brand) 30%, #fff); }
.st-banner.info i { color: var(--brand); }
.st-test-pill { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--saffron); color: #2a1b12; }
#cartSheetBody .cart-head { padding-right: 72px; padding-top: 22px; }
.st-banner.test { background: var(--espresso); color: #fff; margin: 0; border-radius: 0; box-shadow: none; justify-content: center; font-size: .85rem; padding: 7px 12px; position: relative; z-index: 45; }

/* ---------- Navegación de categorías ---------- */
.st-nav { position: sticky; top: 64px; z-index: 30; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.st-nav-inner { display: flex; align-items: center; gap: 10px; }
.st-cats { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; flex: 1; scroll-behavior: smooth; }
.st-cats::-webkit-scrollbar { display: none; }
.st-cats a { position: relative; z-index: 1; flex-shrink: 0; padding: 9px 16px; border-radius: 999px; color: var(--cocoa); text-decoration: none; font-weight: 600; font-size: .95rem; transition: color .25s; }
.st-cats a:hover { color: var(--espresso); }
.st-cats a.active { color: #fff; }
.st-cats-pill { position: absolute; z-index: 0; top: 10px; height: calc(100% - 20px); border-radius: 999px; background: var(--espresso); transition: transform .45s var(--ease-out), width .45s var(--ease-out); pointer-events: none; }
.st-search { position: relative; flex-shrink: 0; }
.st-search input { width: 44px; height: 42px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%235d4737' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 13px center; padding: 0 0 0 40px; color: var(--espresso); transition: width .4s var(--ease-out), box-shadow .2s, border-color .2s; cursor: pointer; }
.st-search input:focus, .st-search input.has-text { width: min(62vw, 300px); padding-right: 14px; outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); cursor: text; }

/* ---------- Distribución principal ---------- */
.st-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 26px; padding-bottom: 130px; }
@media (min-width: 1100px) { .st-layout { grid-template-columns: minmax(0, 1fr) 360px; padding-bottom: 60px; } }

.st-section { scroll-margin-top: 140px; margin-bottom: 38px; }
.st-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.st-section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); margin: 0; font-weight: 650; }
.st-section-head .n { color: var(--muted); font-weight: 600; font-size: .95rem; }
.st-section-head::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); transform: translateY(-6px); }

/* ---------- Tarjetas de platillo ---------- */
.st-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .st-grid { grid-template-columns: 1fr 1fr; } }
/* Tiendas (pastelería, florería, mascotas…): cuadrícula de fotos, que vende mejor; los restaurantes conservan la lista. */
.st-grid.photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .st-grid.photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.photo-grid .dish { flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 8px 8px 12px; }
.photo-grid .dish-media { width: 100%; height: auto; aspect-ratio: 1; border-radius: calc(var(--r-lg) - 6px); }
.photo-grid .dish-body { padding: 0 4px; }
.photo-grid .dish-name { font-size: 1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.photo-grid .dish-desc { font-size: .82rem; -webkit-line-clamp: 2; }
.photo-grid .dish-foot { padding-top: 6px; gap: 6px; }
.photo-grid .dish-price { font-size: 1rem; }
.photo-grid .tag { font-size: .68rem; }
.photo-grid .dish-ph { font-size: 3rem; }
@media (max-width: 479.98px) { .photo-grid .dish-desc { display: none; } .photo-grid .dish-add { width: 34px; height: 34px; font-size: 1.2rem; } }
.photo-grid .dish.in-cart::before { top: 4px; left: 4px; }
.dish { position: relative; display: flex; gap: 14px; align-items: stretch; padding: 14px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); cursor: pointer; text-align: left; transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s; outline: none; }
.dish:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.dish:focus-visible { box-shadow: 0 0 0 4px var(--brand-glow); }
.dish-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dish-name { font-family: var(--font-display); font-weight: 650; font-size: 1.18rem; margin: 0 0 4px; line-height: 1.15; }
.dish-desc { color: var(--cocoa); font-size: .9rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dish-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dish-price { font-weight: 800; font-size: 1.05rem; }
.dish-price small { font-weight: 600; color: var(--muted); font-size: .78rem; margin-right: 3px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.tag-pop { background: #fff1d6; color: #8a4b00; }
.tag-out { background: #efe8df; color: var(--muted); }
.dish-media { position: relative; width: 118px; height: 118px; flex-shrink: 0; border-radius: var(--r-md); overflow: hidden; background: var(--brand-soft); }
@media (min-width: 720px) { .dish-media { width: 128px; height: 128px; } }
.dish-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.dish:hover .dish-media img { transform: scale(1.07); }
.dish-ph { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; color: var(--brand); background: radial-gradient(circle at 30% 25%, #fff 0, transparent 55%), linear-gradient(135deg, var(--brand-soft), var(--brand-tint)); }
.dish-add { position: absolute; right: 8px; bottom: 8px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: var(--espresso); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45); display: grid; place-items: center; font-size: 1.35rem; transition: transform .25s var(--ease-spring), background .2s, color .2s; }
.dish:hover .dish-add { background: var(--brand-strong, var(--brand)); color: #fff; transform: rotate(90deg); }
.dish.unavailable { cursor: not-allowed; }
.dish.unavailable .dish-media img, .dish.unavailable .dish-ph { filter: grayscale(1); opacity: .55; }
.dish.unavailable .dish-add { display: none; }
.dish.unavailable:hover { transform: none; box-shadow: var(--shadow-1); }
.dish.in-cart::before { content: attr(data-qty); position: absolute; top: -8px; left: -8px; min-width: 26px; height: 26px; border-radius: 999px; background: var(--brand-strong, var(--brand)); color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; padding: 0 7px; box-shadow: 0 6px 14px -6px var(--brand-glow); z-index: 2; animation: c2b-pop .4s var(--ease-spring); }
.st-empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.st-empty i { font-size: 2.4rem; display: block; margin-bottom: 8px; }

/* ---------- Favoritos (carrusel) ---------- */
.st-favs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 240px); gap: 14px; overflow-x: auto; padding: 4px 4px 14px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.fav { scroll-snap-align: start; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); cursor: pointer; transition: transform .35s var(--ease-out), box-shadow .35s; text-align: left; padding: 0; }
.fav:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--shadow-2); }
.fav-media { height: 150px; position: relative; overflow: hidden; background: var(--brand-soft); }
.fav-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.fav:hover .fav-media img { transform: scale(1.08); }
.fav-rank { position: absolute; top: 10px; left: 10px; background: rgba(20, 11, 6, .72); color: #fff; font-weight: 800; font-size: .78rem; border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(6px); }
.fav-body { padding: 12px 14px 14px; }
.fav-body strong { font-family: var(--font-display); font-size: 1.08rem; display: block; line-height: 1.15; }

/* ---------- Carrito (lateral en escritorio) ---------- */
.st-aside { display: none; }
@media (min-width: 1100px) { .st-aside { display: block; } }
.cart-card { position: sticky; top: 140px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden; }
.cart-head { padding: 18px 20px 10px; display: flex; align-items: center; justify-content: space-between; }
.cart-head h3 { margin: 0; font-size: 1.35rem; }
.cart-items { max-height: 46vh; overflow-y: auto; padding: 0 20px; }
.cart-line { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); animation: c2b-fade-up .35s var(--ease-out); }
.cart-line:last-child { border-bottom: 0; }
.cart-thumb { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--brand-soft); display: grid; place-items: center; font-family: var(--font-display); color: var(--brand); font-weight: 700; }
.cart-line .name { font-weight: 700; line-height: 1.2; }
.cart-line .meta { font-size: .8rem; color: var(--muted); }
.cart-line .price { font-weight: 700; font-size: .92rem; }
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--cream-2); border-radius: 999px; padding: 3px; }
.stepper button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; color: var(--espresso); display: grid; place-items: center; font-size: 1rem; box-shadow: var(--shadow-1); transition: transform .15s; }
.stepper button:active { transform: scale(.88); }
.stepper span { min-width: 26px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.stepper.lg button { width: 42px; height: 42px; font-size: 1.2rem; }
.stepper.lg span { min-width: 34px; font-size: 1.1rem; }
.cart-foot { padding: 16px 20px 20px; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--paper), var(--cream)); }
.cart-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.cart-row.total { font-weight: 800; font-size: 1.15rem; }
.cart-row.cart-fee { font-size: .88rem; color: var(--muted, #6b5d50); }
.progress-hint { font-size: .82rem; color: var(--cocoa); margin: 10px 0 6px; display: flex; gap: 6px; align-items: center; }
.progress-track { height: 8px; border-radius: 999px; background: var(--cream-2); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--saffron), var(--brand)); width: 0; transition: width .8s var(--ease-out); }
.cart-empty { text-align: center; padding: 26px 10px 30px; color: var(--muted); }
.cart-empty .plate { width: 92px; height: 92px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 42%, var(--cream-2) 43% 60%, #fff 61%); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; font-size: 1.8rem; color: var(--line-2); }
.upsell { margin-top: 12px; }
.upsell-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.upsell-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.upsell-chip { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .85rem; font-weight: 600; transition: border-color .2s, transform .2s; }
.upsell-chip:hover { border-color: var(--brand); transform: translateY(-1px); }
.upsell-chip img, .upsell-chip .cart-thumb { width: 30px; height: 30px; border-radius: 50%; }
.btn-cta { width: 100%; border: 0; border-radius: 999px; padding: 15px 20px; background: var(--brand-strong, var(--brand)); color: #fff; font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-shadow: 0 16px 30px -14px var(--brand-glow); transition: transform .2s var(--ease-out), background .2s, box-shadow .2s; text-decoration: none; }
.btn-cta:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1px); }
.btn-cta:active { transform: scale(.98); }
.btn-cta.disabled, .btn-cta:disabled { background: #cdbfb1; box-shadow: none; pointer-events: none; }
.btn-cta .amt { background: rgba(0, 0, 0, .2); padding: 4px 12px; border-radius: 999px; font-variant-numeric: tabular-nums; }

/* ---------- Barra de carrito (móvil) ---------- */
.st-cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--cream) 38%); transform: translateY(120%); transition: transform .5s var(--ease-spring); }
.st-cartbar.show { transform: none; }
.st-cartbar .btn-cta { max-width: 560px; margin: 0 auto; }
.st-cartbar .qty-badge { background: #fff; color: var(--brand-deep); border-radius: 999px; min-width: 28px; height: 28px; display: inline-grid; place-items: center; font-size: .85rem; padding: 0 8px; }
@media (min-width: 1100px) { .st-cartbar { display: none; } }

/* ---------- Hojas (bottom sheets) ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; pointer-events: none; }
.sheet.open { visibility: visible; pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(28, 16, 9, .55); opacity: 0; transition: opacity .35s; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-panel { position: relative; width: 100%; max-width: 620px; max-height: 92vh; display: flex; flex-direction: column; background: var(--paper); border-radius: 28px 28px 0 0; box-shadow: var(--shadow-3); transform: translateY(105%); transition: transform .5s var(--ease-out); overflow: hidden; }
.sheet.open .sheet-panel { transform: translateY(var(--drag, 0px)); }
.sheet.dragging .sheet-panel { transition: none; }
@media (min-width: 768px) {
    .sheet { align-items: center; padding: 24px; }
    .sheet-panel { border-radius: 28px; max-height: 88vh; transform: translateY(40px) scale(.96); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s; }
    .sheet.open .sheet-panel { transform: none; opacity: 1; }
    .sheet-grab { display: none; }
}
.sheet-grab { position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 999px; background: rgba(255, 255, 255, .8); z-index: 3; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); touch-action: none; cursor: grab; }
.sheet-grab-zone { position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 2; touch-action: none; }
.sheet-close { position: absolute; top: 14px; right: 14px; z-index: 4; }
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.sheet-foot { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 12px; align-items: center; background: var(--paper); }
.sheet-foot .btn-cta { flex: 1; }
.sheet-body { padding: 20px 22px 8px; }
.sheet-title { font-size: 1.6rem; margin: 0 0 6px; }

.ps-media { height: 260px; background: var(--brand-soft); position: relative; overflow: hidden; }
.ps-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.sheet.open .ps-media img { transform: none; }
.ps-media.no-img { height: 90px; background: linear-gradient(135deg, var(--brand-soft), var(--brand-tint)); }
.ps-head { padding: 20px 22px 6px; }
.ps-head h2 { font-size: 1.9rem; margin: 0 0 6px; line-height: 1.05; }
.ps-head p { color: var(--cocoa); margin: 0 0 8px; }
.ps-price { font-weight: 800; font-size: 1.15rem; }
.ps-group { padding: 16px 22px 6px; border-top: 8px solid var(--cream); margin-top: 12px; }
.ps-group.error { animation: c2b-shake .5s; }
.ps-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ps-group-head h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; margin: 0; }
.ps-group-head .hint { font-size: .8rem; color: var(--muted); }
.req { font-size: .72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--cream-2); color: var(--cocoa); white-space: nowrap; transition: background .3s, color .3s; }
.req.need { background: var(--espresso); color: #fff; }
.req.ok { background: var(--basil-soft); color: var(--basil); }
.ps-group.error .req.need { background: var(--danger); }
.opt { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; transition: background .2s; border-radius: 10px; }
.opt:last-child { border-bottom: 0; }
.opt:hover { background: var(--cream); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-mark { width: 24px; height: 24px; flex-shrink: 0; border: 2px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; transition: border-color .2s, background .2s, transform .2s var(--ease-spring); background: #fff; }
.opt-mark.box { border-radius: 8px; }
.opt-mark::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .25s var(--ease-spring); }
.opt-mark.box::after { width: 12px; height: 7px; border-radius: 0; background: none; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -3px; }
.opt input:checked + .opt-mark { border-color: var(--brand); background: var(--brand); transform: scale(1.06); }
.opt input:checked + .opt-mark::after { transform: scale(1); }
.opt input:checked + .opt-mark.box::after { transform: rotate(-45deg) scale(1); }
.opt input:focus-visible + .opt-mark { box-shadow: 0 0 0 4px var(--brand-glow); }
.opt-name { flex: 1; font-weight: 600; }
.opt-price { font-weight: 700; color: var(--cocoa); font-size: .92rem; }
.opt.disabled { opacity: .45; cursor: not-allowed; }
.ps-notes { padding: 16px 22px 22px; border-top: 8px solid var(--cream); margin-top: 12px; }

/* ---------- Menú 2.0: tamaños, mitades, cantidades y combos ---------- */
.ps-group-head .count { margin-left: auto; font-size: .78rem; font-weight: 800; color: var(--cocoa); background: var(--cream); padding: 3px 9px; border-radius: 999px; }
.variant-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 2px 0 10px; }
.vpill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 13px; border-radius: 16px; border: 2px solid var(--line-2); background: #fff; text-align: left; transition: border-color .2s, background .2s, transform .2s var(--ease-spring); }
.vpill strong { font-size: .95rem; line-height: 1.15; }
.vpill span { font-size: .82rem; font-weight: 700; color: var(--cocoa); }
.vpill:hover:not(:disabled) { border-color: var(--brand); }
.vpill.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-glow); transform: translateY(-1px); }
.vpill.on span { color: var(--brand-deep); }
.vpill:disabled { opacity: .45; cursor: not-allowed; }
.opt-qty { cursor: default; }
.opt-qty.on { background: var(--brand-soft); }
.opt-qty.on .opt-name { color: var(--brand-deep); }
.mini-stepper { display: inline-flex; align-items: center; gap: 6px; }
.mini-stepper b { min-width: 18px; text-align: center; font-size: .95rem; }
.mini-stepper button { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-2); background: #fff; display: grid; place-items: center; color: var(--espresso); transition: transform .15s, background .2s; }
.mini-stepper button[data-step="1"] { border-color: var(--brand); color: var(--brand-deep); }
.mini-stepper button:active:not(:disabled) { transform: scale(.9); }
.mini-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.ps-nested { margin: -2px 0 8px 36px; border-left: 3px solid var(--brand-tint); padding-left: 12px; }
.ps-group.nested { padding: 8px 0 2px; border-top: 0; margin-top: 0; }
.ps-group.nested .ps-group-head h3 { font-size: .92rem; }
.half-ico { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--brand); margin-right: 8px; vertical-align: -3px; background: linear-gradient(90deg, var(--brand) 50%, transparent 50%); }
.half-ico.right { background: linear-gradient(90deg, transparent 50%, var(--brand) 50%); }
.ps-half-rule { padding: 6px 22px 0; margin: 0; font-size: .8rem; color: var(--muted); }
.tag-diet { background: #eef5ea; color: #2f6b3f; }
.tag-picante { background: #fdecea; color: #b42318; }
.tag-nuevo { background: #efe7f7; color: #6b3f8a; }
.tag-recomendado { background: #fff1d6; color: #8a4b00; }
.tag-para-compartir { background: #e8f0fb; color: #1d4e89; }

/* ---------- Aviso emergente (toast) ---------- */
.st-toast { position: fixed; left: 50%; bottom: 96px; z-index: 80; transform: translate(-50%, 30px); opacity: 0; background: var(--espresso); color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 700; box-shadow: var(--shadow-3); transition: transform .4s var(--ease-spring), opacity .3s; display: flex; align-items: center; gap: 8px; pointer-events: none; white-space: nowrap; }
.st-toast.show { transform: translate(-50%, 0); opacity: 1; }
.st-toast i { color: #4ade80; }
@media (min-width: 1100px) { .st-toast { bottom: 32px; } }
.fly { position: fixed; left: 0; top: 0; z-index: 90; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; pointer-events: none; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5); background: var(--brand); }

/* ---------- Horarios ---------- */
.hours-table { width: 100%; }
.hours-table td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.hours-table tr.today td { font-weight: 800; color: var(--brand-deep); }

/* =====================================================================
   PAGO (checkout)
   ===================================================================== */
.co-top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--cream) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.co-top .st-container { display: flex; align-items: center; gap: 12px; height: 64px; }
.co-back { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-1); color: var(--espresso); text-decoration: none; font-size: 1.2rem; }
.co-top .who { line-height: 1.1; min-width: 0; }
.co-top .who small { color: var(--muted); display: block; font-size: .78rem; }
.co-top .who strong { font-family: var(--font-display); font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.co-steps { margin-left: auto; display: none; gap: 6px; align-items: center; font-size: .82rem; font-weight: 700; color: var(--muted); }
.co-steps .on { color: var(--espresso); }
.co-steps .sep { width: 22px; height: 2px; background: var(--line-2); border-radius: 2px; }
@media (min-width: 720px) { .co-steps { display: flex; } }

.co-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 0 150px; }
@media (min-width: 992px) { .co-layout { grid-template-columns: minmax(0, 1fr) 380px; padding-bottom: 60px; } }
.co-title { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 4px; }
.co-sub { color: var(--cocoa); margin-bottom: 18px; }
.co-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 20px; margin-bottom: 16px; animation: c2b-fade-up .6s var(--ease-out) both; }
.co-card:nth-of-type(2) { animation-delay: .06s; }
.co-card:nth-of-type(3) { animation-delay: .12s; }
.co-card:nth-of-type(4) { animation-delay: .18s; }
/* La lista de sugerencias de dirección (Google) debe quedar encima de la tarjeta "¿A nombre de quién?". */
#cardFulfillment { position: relative; z-index: 3; }
.co-card h2 { font-size: 1.35rem; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.co-card h2 .num { width: 30px; height: 30px; border-radius: 50%; background: var(--espresso); color: #fff; font-family: var(--font-body); font-size: .85rem; display: grid; place-items: center; flex-shrink: 0; }
.co-card.invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(192, 57, 43, .12); }

.ful-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ful-choice { position: relative; display: block; cursor: pointer; }
.ful-choice input { position: absolute; opacity: 0; }
.ful-tile { height: 100%; border: 2px solid var(--line); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 6px; background: #fff; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease-out); }
.ful-tile .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--cream-2); font-size: 1.4rem; color: var(--cocoa); transition: background .25s, color .25s, transform .4s var(--ease-spring); }
.ful-tile strong { font-size: 1.05rem; }
.ful-tile small { color: var(--muted); line-height: 1.3; }
.ful-choice input:checked + .ful-tile { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); transform: translateY(-2px); }
.ful-choice input:checked + .ful-tile .ico { background: var(--brand-strong, var(--brand)); color: #fff; transform: rotate(-8deg) scale(1.06); }
.ful-choice input:focus-visible + .ful-tile { box-shadow: 0 0 0 4px var(--brand-glow); }
.ful-choice.single { grid-column: 1 / -1; }

.pickup-info { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px; border-radius: var(--r-md); background: var(--cream); }
.pickup-info i { font-size: 1.3rem; color: var(--brand); }

/* ---------- Domicilio: mapa con pin ---------- */
/* minmax(0, 1fr): el buscador de Google tiene un ancho mínimo propio que, con «1fr», ensanchaba la columna y sacaba de la pantalla
   el buscador y «Usar mi ubicación» en celulares angostos. */
.addr-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.addr-actions > * { min-width: 0; max-width: 100%; }
@media (min-width: 560px) { .addr-actions { grid-template-columns: auto minmax(0, 1fr); } }
.btn-locate { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 12px 18px; font-weight: 700; border: 0; background: var(--espresso); color: #fff; box-shadow: var(--shadow-2); transition: transform .2s, background .2s; white-space: nowrap; }
.btn-locate:hover { background: #000; }
.btn-locate .spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: co-spin .7s linear infinite; }
.btn-locate.busy .spin { display: inline-block; }
.btn-locate.busy i { display: none; }
@keyframes co-spin { to { transform: rotate(360deg); } }
.place-search { position: relative; }
/* Claro siempre, como el resto del pago (con el celular en modo oscuro, Google lo pintaba negro). */
.place-search gmp-place-autocomplete { width: 100%; min-width: 0; max-width: 100%; color-scheme: light; }
.place-search .fallback-input { width: 100%; }
.saved-addr { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--r-md); border: 1.5px dashed var(--brand); background: var(--brand-soft); color: var(--espresso); transition: transform .2s; }
.saved-addr:hover { transform: translateY(-1px); }
.saved-addr i { font-size: 1.3rem; color: var(--brand); }
.saved-addr small { display: block; color: var(--cocoa); }

.map-wrap { position: relative; margin-top: 14px; border-radius: var(--r-lg); overflow: hidden; height: 300px; background: #e9e2d6; box-shadow: inset 0 0 0 1px var(--line); display: none; }
.map-wrap.show { display: block; animation: c2b-fade-up .5s var(--ease-out); }
@media (min-width: 768px) { .map-wrap { height: 340px; } }
.map-canvas { position: absolute; inset: 0; }
.map-pin { position: absolute; left: 50%; top: 50%; z-index: 3; width: 44px; height: 56px; margin: -56px 0 0 -22px; pointer-events: none; transition: transform .25s var(--ease-out); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.map-pin svg { width: 100%; height: 100%; }
.map-wrap.moving .map-pin { transform: translateY(-14px); }
.map-pin-shadow { position: absolute; left: 50%; top: 50%; z-index: 2; width: 16px; height: 6px; margin: -3px 0 0 -8px; border-radius: 50%; background: rgba(0, 0, 0, .35); transition: transform .25s, opacity .25s; }
.map-wrap.moving .map-pin-shadow { transform: scale(.6); opacity: .5; }
.map-wrap.drop .map-pin { animation: co-drop .6s var(--ease-spring); }
@keyframes co-drop { 0% { transform: translateY(-60px); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.map-hint { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 4; background: rgba(255, 253, 249, .95); border-radius: 999px; padding: 8px 14px; font-size: .85rem; font-weight: 600; text-align: center; box-shadow: var(--shadow-1); }
.map-quote { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; border-radius: 16px; padding: 10px 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-2); transition: background .3s, color .3s; background: #fff; }
.map-quote.ok { background: var(--basil); color: #fff; }
.map-quote.bad { background: var(--danger); color: #fff; }
.map-quote.wait { background: #fff; color: var(--cocoa); }

.quote-inline { margin-top: 12px; border-radius: 14px; padding: 12px 14px; font-weight: 600; display: none; align-items: center; gap: 8px; }
.quote-inline.show { display: flex; }
.quote-inline.ok { background: var(--basil-soft); color: var(--basil); }
.quote-inline.bad { background: var(--danger-soft); color: var(--danger); }
.quote-inline.wait, .quote-inline.info { background: var(--cream); color: var(--cocoa); }

.addr-confirm { margin-top: 16px; display: none; }
.addr-confirm.show { display: block; animation: c2b-fade-up .5s var(--ease-out); }
.addr-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .addr-grid { grid-template-columns: 2fr 1fr; } .addr-grid .full { grid-column: 1 / -1; } }
.quick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qchip { border: 1.5px solid var(--line-2); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 600; color: var(--cocoa); transition: all .2s var(--ease-out); }
.qchip:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-1px); }
.qchip.on { background: var(--brand-strong, var(--brand)); border-color: var(--brand); color: #fff; }
.field-note { font-size: .8rem; color: var(--muted); margin-top: 4px; }

.tip-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-choice input { position: absolute; opacity: 0; }
.tip-choice span { display: inline-flex; flex-direction: column; align-items: center; min-width: 76px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--line); background: #fff; font-weight: 800; cursor: pointer; transition: all .25s var(--ease-out); }
.tip-choice span small { font-weight: 600; color: var(--muted); font-size: .75rem; }
.tip-choice input:checked + span { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.tip-choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--brand-glow); }

.co-summary { position: sticky; top: 88px; }
.co-summary .co-card { padding: 0; overflow: hidden; }
.sum-head { padding: 18px 20px 6px; display: flex; justify-content: space-between; align-items: center; }
.sum-head h2 { margin: 0; font-size: 1.3rem; }
.sum-items { padding: 4px 20px 10px; }
.sum-line { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: .93rem; }
.sum-line:last-child { border-bottom: 0; }
.sum-line .q { font-weight: 800; color: var(--brand-deep); margin-right: 6px; }
.sum-line .opts { color: var(--muted); font-size: .8rem; }
.sum-totals { padding: 14px 20px 18px; background: var(--cream); border-top: 1px solid var(--line); }
.sum-totals .row-t { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--cocoa); }
.sum-totals .row-t.total { color: var(--espresso); font-size: 1.3rem; font-weight: 800; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); }
.sum-totals .row-t.free span:last-child { color: var(--basil); font-weight: 700; }
.pay-zone { padding: 0 20px 20px; background: var(--cream); }
.trust { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .8rem; margin-top: 10px; text-align: center; }
.co-paybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--cream) 35%); }
@media (min-width: 992px) { .co-paybar { display: none; } }
.co-terms { font-size: .76rem; line-height: 1.4; color: var(--muted); text-align: center; margin: 8px 0 0; }
.co-terms a { color: inherit; font-weight: 700; text-decoration: underline; }
.co-terms-bar { margin-top: 6px; color: var(--cocoa); }
.co-errors { border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); padding: 14px 16px; margin-bottom: 16px; border: 1px solid #f3c1bb; }
.co-errors ul { margin: 6px 0 0; padding-left: 18px; }
.co-notice { border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 14px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.co-notice.test { background: var(--espresso); color: #fff; }
.co-notice.warn { background: #fff7e6; color: #7a4b00; border: 1px solid #f7d9a6; }
.co-notice.info { background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--espresso); border: 1px solid color-mix(in srgb, var(--brand) 30%, #fff); }
.phone-field { position: relative; }
.phone-field .prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--cocoa); pointer-events: none; }
.phone-field input { padding-left: 52px; }
.remember { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--cocoa); margin-top: 12px; }

/* =====================================================================
   SEGUIMIENTO
   ===================================================================== */
.tr-hero { position: relative; overflow: hidden; background: radial-gradient(900px 400px at 100% 0%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 60%), linear-gradient(160deg, #3a2317, #1b100a); color: #fff; padding: 84px 0 110px; }
.tr-hero .st-container { max-width: 760px; }
.tr-rest { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tr-rest img, .tr-rest .st-mini-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .85); }
.tr-rest small { opacity: .75; display: block; }
.tr-rest strong { font-family: var(--font-display); font-size: 1.2rem; }
.tr-status { font-size: clamp(2.2rem, 7vw, 3.6rem); font-weight: 700; margin: 0; line-height: 1; letter-spacing: -.03em; }
.tr-msg { font-size: 1.1rem; color: rgba(255, 255, 255, .85); margin: 12px 0 0; max-width: 560px; }
.tr-eta { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font-weight: 700; }
.tr-when { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 12px 16px; border-radius: 18px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); max-width: 520px; }
.tr-when > i { font-size: 1.4rem; line-height: 1; margin-top: 2px; }
.tr-when small { display: block; opacity: .85; font-size: .82rem; }
.tr-when b { display: block; font-size: 1.05rem; }
.tr-when b::first-letter { text-transform: uppercase; }
.tr-when small.d-block { margin-top: 4px; }
.tr-eta b { font-size: 1.15rem; }
.tr-live { position: absolute; top: 20px; right: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.tr-live .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: c2b-pulse-dot 1.6s infinite; }
.tr-live.off .dot { background: #9ca3af; animation: none; }
.tr-illus { position: absolute; right: -10px; bottom: -6px; width: min(46vw, 300px); opacity: .95; pointer-events: none; }
@media (max-width: 640px) { .tr-illus { width: 120px; right: 8px; top: 64px; bottom: auto; } .tr-rest { padding-right: 110px; } }
.tr-body { margin-top: -70px; position: relative; z-index: 2; padding-bottom: 60px; }
.tr-body .st-container { max-width: 760px; }
.tr-progress { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 22px 20px 18px; margin-bottom: 16px; border: 1px solid var(--line); }
.tr-bar { position: relative; height: 8px; border-radius: 999px; background: var(--cream-2); margin: 6px 12px 18px; }
.tr-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--saffron), var(--brand)); width: 0; transition: width 1.2s var(--ease-out); }
.tr-bar-fill::after { content: ""; position: absolute; right: -6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px var(--brand-glow); animation: c2b-pulse-dot 1.6s infinite; }
.tr-steps { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; list-style: none; padding: 0; margin: 0; }
.tr-steps li { text-align: center; font-size: .8rem; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; transition: color .4s; }
.tr-steps li i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; background: var(--cream-2); color: var(--muted); transition: all .5s var(--ease-spring); }
.tr-steps li.done { color: var(--espresso); }
.tr-steps li.done i { background: var(--espresso); color: #fff; }
.tr-steps li.current { color: var(--brand-deep); }
.tr-steps li.current i { background: var(--brand-strong, var(--brand)); color: #fff; transform: scale(1.15); box-shadow: 0 8px 20px -8px var(--brand-glow); }
.tr-card { background: var(--paper); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-1); padding: 20px; margin-bottom: 16px; }
.tr-card h2 { font-size: 1.25rem; margin: 0 0 12px; }
.tr-addr { display: flex; gap: 12px; }
.tr-addr i { font-size: 1.3rem; color: var(--brand); }
.tr-kv { font-size: .88rem; color: var(--cocoa); margin-top: 6px; }
.tr-kv b { color: var(--espresso); }
.tr-alert { border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.tr-alert.ok { background: var(--basil-soft); color: var(--basil); }
.tr-alert.bad { background: var(--danger-soft); color: var(--danger); }
.tr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; }

/* Ilustraciones animadas del estado */
.ill-bell { transform-origin: 50% 12%; animation: ill-ring 1.6s ease-in-out infinite; }
@keyframes ill-ring { 0%, 50%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 40% { transform: rotate(-4deg); } }
.ill-steam path { stroke-dasharray: 60; animation: ill-steam 2.4s ease-in-out infinite; }
.ill-steam path:nth-child(2) { animation-delay: .4s; }
.ill-steam path:nth-child(3) { animation-delay: .8s; }
@keyframes ill-steam { 0% { stroke-dashoffset: 60; opacity: 0; } 30% { opacity: .9; } 100% { stroke-dashoffset: -60; opacity: 0; } }
.ill-ride { animation: ill-ride 1.2s ease-in-out infinite; }
@keyframes ill-ride { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ill-road { animation: ill-road .8s linear infinite; }
@keyframes ill-road { to { transform: translateX(-40px); } }
.ill-wheel { transform-box: fill-box; transform-origin: center; animation: co-spin .6s linear infinite; }
.ill-spark { animation: ill-spark 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ill-spark { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1.1); opacity: 1; } }

/* ---------- Pago simulado ---------- */
.dev-pay { max-width: 460px; margin: 0 auto; padding: 40px 16px 60px; }
.dev-card { background: var(--paper); border-radius: var(--r-xl); box-shadow: var(--shadow-3); overflow: hidden; border: 1px solid var(--line); animation: c2b-fade-up .6s var(--ease-out); }
.dev-card-top { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff; padding: 24px; }
.dev-cc { margin-top: 14px; border-radius: 16px; padding: 16px; background: linear-gradient(135deg, #2a1b12, #5d4737); color: #fff; font-family: ui-monospace, monospace; letter-spacing: .12em; box-shadow: var(--shadow-2); }

/* ---------- Pie ---------- */
.store-footer { padding: 30px 16px 120px; text-align: center; color: var(--muted); font-size: .85rem; }
.store-footer a { color: var(--cocoa); font-weight: 700; text-decoration: none; }
@media (min-width: 1100px) { .store-footer { padding-bottom: 40px; } }

/* ---------- Cupón ---------- */
.coupon { margin: 4px 0 14px; }
.coupon-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--brand) 55%, transparent); background: var(--brand-soft); color: var(--brand-deep, var(--brand)); font-weight: 700; cursor: pointer; transition: transform .2s var(--ease-out), background .2s; }
.coupon-toggle:hover { transform: translateY(-1px); }
.coupon-toggle .bi { font-size: 1.1rem; }
.coupon-form { display: flex; gap: 8px; animation: c2b-fade-up .35s var(--ease-out) both; }
.coupon-form .form-control { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; min-height: 48px; font-size: 16px; }
.coupon-form .btn { min-height: 48px; border-radius: 14px; padding-inline: 18px; font-weight: 700; }
.coupon-applied { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--basil-soft); border: 1px solid color-mix(in srgb, var(--basil) 35%, transparent); animation: pop-in .45s var(--ease-spring) both; }
.coupon-applied > .bi { color: var(--basil); font-size: 1.5rem; }
.coupon-applied strong { display: block; letter-spacing: .03em; }
.coupon-applied small { display: block; color: var(--muted); line-height: 1.3; }
.coupon-remove { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); }
.coupon-remove:hover { background: rgba(0,0,0,.06); }
.coupon-msg { margin-top: 8px; font-size: .88rem; color: #b42318; font-weight: 600; }
.sum-totals .row-t.discount { color: var(--basil); font-weight: 700; }
.sum-totals .row-t.discount b { letter-spacing: .03em; }
.pay-methods { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--muted); text-align: center; }
@keyframes pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Pedir de nuevo ---------- */
.reorder { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; margin: 4px 0 22px; padding: 16px 44px 16px 16px; border-radius: var(--r-lg, 22px); background: radial-gradient(360px 160px at 100% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%), var(--paper); border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); box-shadow: var(--shadow-1); animation: c2b-fade-up .6s var(--ease-out) both; }
.reorder-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-strong, var(--brand)); color: #fff; font-size: 1.4rem; }
.reorder-text { min-width: 0; }
.reorder-text strong { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.reorder-text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--cocoa); font-size: .92rem; }
.reorder-text small { color: var(--muted); }
.reorder-btn { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--espresso); color: #fff; font-weight: 800; font-size: 1rem; transition: transform .2s var(--ease-out); }
.reorder-btn span { background: rgba(255,255,255,.14); border-radius: 999px; padding: 4px 12px; font-variant-numeric: tabular-nums; }
.reorder-btn:active { transform: scale(.98); }
.reorder-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); }
@media (min-width: 720px) { .reorder { grid-template-columns: auto 1fr auto; padding-right: 48px; } .reorder-btn { grid-column: auto; } }

/* ---------- Seguimiento: reseña en Google y guardar en inicio ---------- */
.tr-review { text-align: center; background: radial-gradient(420px 180px at 50% 0%, color-mix(in srgb, var(--saffron) 22%, transparent), transparent 70%), var(--paper); }
.tr-review p { color: var(--cocoa); }
.tr-stars { display: inline-flex; gap: 4px; color: var(--saffron); font-size: 1.5rem; margin-bottom: 6px; }
.tr-stars i { animation: c2b-pop .5s var(--ease-spring) both; }
.tr-stars i:nth-child(2) { animation-delay: .08s; } .tr-stars i:nth-child(3) { animation-delay: .16s; } .tr-stars i:nth-child(4) { animation-delay: .24s; } .tr-stars i:nth-child(5) { animation-delay: .32s; }
.tr-install { position: relative; display: flex; align-items: center; gap: 14px; padding-right: 48px; animation: c2b-fade-up .6s var(--ease-out) both; }
.tr-install img { border-radius: 14px; box-shadow: var(--shadow-1); flex-shrink: 0; }
.tr-install-text { min-width: 0; flex: 1; }
.tr-install-text strong { display: block; }
.tr-install-text span { display: block; color: var(--muted); font-size: .9rem; }
.tr-install .btn { min-height: 44px; }
.tr-install-close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); }

/* Página de pago simulada: botones de celular */
.dev-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dev-wallet { min-height: 52px; border-radius: 12px; border: 0; background: #000; color: #fff; font-weight: 600; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.dev-wallet.dev-gpay { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.dev-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; margin: 6px 0; }
.dev-or::before, .dev-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Idioma en la portada del menú (sobre la foto) y en el pie */
.st-hero .lang-switch.st-hero-link, .st-hero .lang-switch.st-hero-link:hover { color: #fff; }

/* Tu pedido en curso: acceso directo a la página de seguimiento aunque el cliente la haya cerrado */
.active-order { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; padding: 14px 16px; border-radius: var(--r-lg, 22px); background: var(--espresso, #2a1b12); color: #fff; text-decoration: none; box-shadow: var(--shadow-1); animation: c2b-fade-up .5s var(--ease-out) both; }
.active-order:hover { color: #fff; filter: brightness(1.08); }
.active-order .ao-dot { width: 12px; height: 12px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 6px rgba(74, 222, 128, .2); flex: 0 0 auto; animation: kc-pulse 2s ease-in-out infinite; }
.active-order .ao-text { flex: 1; min-width: 0; line-height: 1.25; }
.active-order .ao-text strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.active-order .ao-text span { display: block; color: #e9dccd; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.active-order .ao-go { font-weight: 800; white-space: nowrap; background: var(--brand); border-radius: 99px; padding: 6px 12px; font-size: .9rem; }
@keyframes kc-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(74, 222, 128, .2); } 50% { box-shadow: 0 0 0 10px rgba(74, 222, 128, .05); } }
@media (prefers-reduced-motion: reduce) { .active-order, .active-order .ao-dot { animation: none; } }

/* Seguimiento: producto agotado y avisos al teléfono */
.sum-line.is-removed strong, .sum-line.is-removed .q { text-decoration: line-through; opacity: .6; }
.tag-out-inline { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 8px; border-radius: 99px; background: #fee2e2; color: #991b1b; vertical-align: middle; }
.tr-alert.warn { background: #fff7e6; color: #7a4a00; border-color: #f5d9a6; }
.tr-push { display: flex; align-items: center; gap: 14px; }
.tr-push > .bi { font-size: 1.6rem; color: var(--brand); }
.tr-push-text { flex: 1; min-width: 0; line-height: 1.3; }
.tr-push-text strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.tr-push-state { display: block; color: var(--cocoa); font-size: .9rem; }
.tr-push-state.ok { color: #1f7a45; font-weight: 700; }
.tr-push.on > .bi { color: #1f7a45; }
.tr-push .btn { white-space: nowrap; }

/* "Hecho con Click2Bite" con la mascota */
.store-powered { display: inline-flex; align-items: center; gap: 6px; }
.store-powered img { height: 21px; width: auto; }

/* ---------- Mis pedidos (sin cuenta: el teléfono guarda solo las ligas) ---------- */
.mo { max-width: 680px; margin: 0 auto; padding: 18px 16px 30px; }
.mo-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-bottom: 10px; }
.store-body a.mo-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--cocoa); text-decoration: none; }
.store-body a.mo-back:hover { color: var(--espresso); }
.mo-title { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 2.4rem); letter-spacing: -.02em; margin: 0 0 6px; overflow-wrap: anywhere; }
.mo-sub { color: var(--muted); font-size: .92rem; margin: 0 0 20px; display: flex; gap: 8px; align-items: flex-start; }
.mo-sub .bi { margin-top: 2px; }
.mo-h { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 10px; }
.mo-logo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--cream-2); }
.mo-initials { display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .95rem; }
.mo-live { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 10px; border-radius: var(--r-lg, 22px); background: var(--espresso, #2a1b12); color: #fff; text-decoration: none; box-shadow: var(--shadow-2); animation: c2b-fade-up .5s var(--ease-out) both; }
.store-body a.mo-live, .store-body a.mo-live:hover, .store-body a.active-order, .store-body a.active-order:hover { color: #fff; }
.mo-live:hover { filter: brightness(1.08); }
.mo-live .mo-logo { border: 2px solid rgba(255, 255, 255, .8); }
.mo-live-main { flex: 1; min-width: 0; line-height: 1.3; }
.mo-live-main strong { display: block; font-family: var(--font-display); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-live-main small { display: block; color: #e9dccd; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-live-status { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; }
.mo-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); flex: 0 0 auto; animation: mo-pulse 2s ease-in-out infinite; }
@keyframes mo-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); } 50% { box-shadow: 0 0 0 5px rgba(74, 222, 128, .08); } }
.mo-go { font-weight: 800; white-space: nowrap; background: var(--brand-strong, var(--brand)); color: #fff; border-radius: 99px; padding: 8px 14px; font-size: .9rem; flex: 0 0 auto; }
.mo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px; margin-bottom: 10px; border-radius: var(--r-lg, 22px); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.mo-row-main { flex: 1; min-width: 0; line-height: 1.3; }
.mo-row-main strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.mo-meta { display: block; color: var(--cocoa); font-size: .88rem; }
.mo-row-main small { display: block; color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-bad { color: var(--danger, #b42318); font-weight: 700; }
.mo-row-actions { display: flex; gap: 8px; width: 100%; }
.mo-row-actions .btn { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; }
@media (min-width: 560px) { .mo-row-actions { width: auto; } .mo-row-actions .btn { flex: 0 0 auto; padding-inline: 16px; } }
.mo-empty { text-align: center; padding: 34px 16px; border-radius: var(--r-lg, 22px); background: var(--paper); border: 1px dashed var(--line); color: var(--muted); }
.mo-empty > .bi { font-size: 2.2rem; color: var(--brand); display: block; margin-bottom: 8px; }
.mo-empty .btn { min-height: 44px; border-radius: 999px; padding-inline: 20px; }
.mo-more { margin: 16px 0 0; text-align: center; }
.store-body .mo-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--brand-deep, var(--brand)); text-decoration: none; }
.mo-help { margin-top: 22px; padding: 14px 16px; border-radius: var(--r-md, 16px); background: var(--cream-2); color: var(--cocoa); font-size: .9rem; line-height: 1.4; }
.mo-help strong { display: block; color: var(--espresso); margin-bottom: 2px; }
.mo-help span { display: block; }
.mo-help .btn { min-height: 40px; border-radius: 999px; }
.mo-clear { display: block; margin: 14px auto 0; color: var(--muted); font-size: .85rem; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .mo-live, .mo-dot { animation: none; } }

/* Menú: botón "Mis pedidos" con punto verde si hay uno en curso; liga en el pie */
.st-icon-btn .store-body a.st-icon-btn { color: var(--espresso); }
.store-myorders { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; }

/* Seguimiento: "Tu pedido no se pierde" */
.tr-keep { display: flex; flex-direction: column; gap: 12px; }
.tr-keep-text strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 2px; }
.tr-keep-text span { display: block; color: var(--cocoa); font-size: .9rem; line-height: 1.4; }
.tr-keep-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tr-keep-actions .btn { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-weight: 700; }
@media (max-width: 480px) { .tr-keep-actions .btn { flex: 1 1 calc(50% - 8px); justify-content: center; } }

/* ---------- "Pídenos directo": bienvenida al escanear la etiqueta de un pedido ---------- */
.welcome-sheet .sheet-panel { max-width: 560px; }
.ws-body { padding: 30px 22px 10px; }
.ws-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; padding-right: 44px; }
.ws-logo { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-1); }
.ws-logo-initials { display: grid; place-items: center; background: var(--brand-strong, var(--brand)); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.ws-eyebrow { margin: 0 0 2px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.ws-head h2 { font-family: var(--font-display); font-size: clamp(1.45rem, 5vw, 1.8rem); line-height: 1.08; margin: 0; text-wrap: balance; }
.ws-lead { color: var(--cocoa); margin: 6px 0 16px; text-wrap: pretty; }
.ws-gift { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 20px; color: #fff; overflow: hidden;
    background: radial-gradient(280px 140px at 100% 0%, rgba(255, 255, 255, .22), transparent 70%), linear-gradient(135deg, var(--brand), var(--brand-deep));
    box-shadow: 0 18px 34px -18px var(--brand-glow); animation: ws-pop .7s var(--ease-out) .25s both; }
.ws-gift::before, .ws-gift::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--paper); }
.ws-gift::before { left: -11px; }
.ws-gift::after { right: -11px; }
.ws-gift-amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.3rem, 10vw, 3rem); line-height: 1; letter-spacing: -.03em; padding: 0 6px 0 8px; border-right: 2px dashed rgba(255, 255, 255, .45); padding-right: 16px; white-space: nowrap; }
.ws-gift-text strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.ws-gift-text span { display: block; margin-top: 6px; font-size: .86rem; opacity: .92; }
.ws-terms { margin: 12px 4px 4px; padding-left: 18px; font-size: .84rem; color: var(--muted); }
.ws-terms li { margin: 2px 0; }
.ws-terms strong { color: var(--espresso); }
.ws-ended { display: flex; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--cream-2); color: var(--cocoa); font-size: .92rem; }
.ws-why { list-style: none; padding: 0; margin: 16px 0 14px; display: grid; gap: 10px; }
.ws-why li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.ws-why i { width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-deep); font-size: 1.05rem; }
.ws-why span { padding-top: 6px; line-height: 1.3; }
.ws-save { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 14px; margin: 16px 0 4px; border-radius: 18px; background: var(--cream); border: 1px dashed var(--line-2); }
.ws-save-icon { border-radius: 14px; box-shadow: var(--shadow-1); grid-row: span 2; align-self: start; }
.ws-save-text strong { display: block; }
.ws-save-text span { display: block; color: var(--muted); font-size: .88rem; line-height: 1.35; }
.ws-save-btn, .ws-howto { grid-column: 2; margin: 4px 0 0; justify-self: start; }
.ws-howto { font-size: .9rem; color: var(--cocoa); }
.ws-done { color: var(--basil); font-weight: 700; }
.ws-steps { padding-left: 20px; margin: 4px 0 12px; display: grid; gap: 8px; font-size: 1rem; }
@keyframes ws-pop { from { opacity: 0; transform: translateY(12px) scale(.96) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ws-gift { animation: none; } }

.gift-banner { position: relative; display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 12px 44px 12px 12px; border-radius: 18px; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep)); box-shadow: 0 14px 28px -16px var(--brand-glow); animation: c2b-fade-up .6s var(--ease-out) both; }
.gift-banner-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 1.2rem; flex-shrink: 0; }
.gift-banner-text { min-width: 0; }
.gift-banner-text strong { display: block; line-height: 1.2; }
.gift-banner-text span { display: block; font-size: .85rem; opacity: .9; }
.gift-banner-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #fff; opacity: .8; }
.gift-banner-close:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
.store-legal { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: inherit; font-size: .85rem; }
.co-privacy { font-size: .74rem; line-height: 1.45; color: #6b5d50; margin: 10px 0 0; text-align: left; }
.co-privacy a { font-weight: 700; }
.co-seller { font-size: .78rem; line-height: 1.45; color: #4a3d32; margin: 0 0 12px; padding: 8px 10px; background: #fbf6f0; border-radius: 10px; text-align: left; }
.co-seller strong { color: #2b1d14; }
.promo-optout { font-size: .85rem; color: #6b5d50; }

/* Menús desplegables del encabezado (idioma y sucursales): abren hacia la derecha para no salirse de la pantalla */
.st-hero .lang-menu-list { left: 0; right: auto; }
.st-hero .lang-menu-list.st-branches { min-width: 240px; max-width: min(320px, calc(100vw - 32px)); }
.st-hero .lang-menu > summary.st-hero-link { margin-top: 16px; }

/* Plan Cadena: otra sucursal que sí llega (o que está más cerca) y pedido pasado a esta sucursal */
.quote-inline:has(.alt-branch), .map-quote:has(.alt-branch) { flex-wrap: wrap; }
.quote-inline .q-text, .map-quote .q-text { flex: 1 1 0; min-width: 0; }
.alt-branch { flex: 1 1 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--ink, #2b1d14); font-weight: 500; line-height: 1.4; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.alt-branch b { color: var(--ink, #2b1d14); }
.alt-branch-btn { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; border: 0; border-radius: 999px; padding: 8px 16px; background: var(--brand, #e2531b); color: #fff; font-weight: 700; font-size: .9rem; cursor: pointer; }
.alt-branch-btn:hover { filter: brightness(1.05); }
.co-transfer { margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; background: var(--basil-soft, #ecfdf3); color: var(--basil, #065f46); font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.who-branch { display: block; color: var(--brand, #e2531b); font-weight: 700; }

/* ===== ¿Para cuándo? Pedidos con fecha (pastelerías, florerías y tiendas) ===== */
.when-box { margin-top: 16px; padding: 16px; border-radius: var(--r-md); background: var(--cream); border: 1px solid var(--line); }
.when-title { font-family: var(--font-body); font-size: 1rem; font-weight: 800; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; letter-spacing: 0; }
.when-title i { color: var(--brand); }
.when-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.when-choice { position: relative; display: block; cursor: pointer; margin: 0; }
.when-choice input { position: absolute; opacity: 0; }
.when-choice > span { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--r-md); background: #fff; transition: border-color .2s, box-shadow .2s; height: 100%; }
.when-choice small { color: var(--muted); }
.when-choice input:checked + span { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-glow); }
.when-choice input:focus-visible + span { box-shadow: 0 0 0 4px var(--brand-glow); }
.when-pick { display: none; margin-top: 14px; }
.when-box.later .when-pick { display: block; animation: when-in .35s var(--ease-out); }
.when-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.when-day { flex: 0 0 auto; min-width: 74px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 10px; border-radius: 14px; border: 1.5px solid var(--line-2); background: #fff; color: var(--espresso); font-size: .82rem; line-height: 1.2; transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease-out); }
.when-day span { text-transform: capitalize; color: var(--muted); font-weight: 600; }
.when-day strong { font-size: .95rem; }
.when-day small { font-size: .7rem; color: #b42318; font-weight: 700; }
.when-day:hover:not(:disabled) { border-color: var(--brand); transform: translateY(-1px); }
.when-day.on { background: var(--espresso); border-color: var(--espresso); color: #fff; }
.when-day.on span { color: rgba(255, 255, 255, .75); }
.when-day:disabled { opacity: .55; cursor: not-allowed; text-decoration: line-through; }
.when-note { margin: 10px 0 0; font-size: .85rem; color: var(--cocoa); display: flex; gap: 6px; align-items: flex-start; }
.when-note i { color: var(--brand); }
@keyframes when-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .when-box.later .when-pick { animation: none; } .when-day { transition: none; } }

/* Ver al repartidor en vivo (extra en el pago) */
.live-opt { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; transition: border-color .15s, background .15s; }
.live-opt:hover { border-color: var(--line-2); }
.live-opt:has(input:checked) { border-color: var(--grape, #7b4f8e); background: var(--grape-soft, #f1eaf6); }
.live-opt > .form-check-input { flex: none; margin: 0; width: 1.25em; height: 1.25em; accent-color: var(--grape, #7b4f8e); }
.live-opt > .form-check-input:checked { background-color: var(--grape, #7b4f8e); border-color: var(--grape, #7b4f8e); }
.live-ico { position: relative; flex: none; width: 84px; height: 64px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #fff3e3 0%, #fbe7cf 62%, #f3dcc0 62%); box-shadow: inset 0 0 0 1px #ecd9c0; }
.live-sky::before, .live-sky::after { content: ""; position: absolute; top: 9px; width: 18px; height: 6px; border-radius: 6px; background: #fff; opacity: .9; animation: live-cloud 3.2s linear infinite; }
.live-sky::after { top: 18px; width: 12px; animation-delay: -1.6s; opacity: .7; }
.live-road { position: absolute; left: 0; right: 0; bottom: 9px; height: 3px; background: repeating-linear-gradient(90deg, #fff 0 9px, transparent 9px 18px); animation: live-road .35s linear infinite; }
.live-mascot { position: absolute; left: 26px; bottom: 11px; width: 36px; height: auto; transform-origin: 50% 100%;
    filter: drop-shadow(0 3px 2px rgba(42, 27, 18, .25)); animation: live-bob .32s ease-in-out infinite alternate, live-drift 2.6s ease-in-out infinite alternate; }
.live-speed i { position: absolute; left: 6px; height: 3px; border-radius: 3px; background: var(--c2b-orange, #eb7115); opacity: .0; animation: live-speed .7s linear infinite; }
.live-speed i:nth-child(1) { top: 22px; width: 16px; }
.live-speed i:nth-child(2) { top: 31px; width: 22px; animation-delay: .23s; }
.live-speed i:nth-child(3) { top: 40px; width: 12px; animation-delay: .46s; }
.live-puff i { position: absolute; left: 22px; bottom: 11px; width: 8px; height: 8px; border-radius: 50%; background: #e8d3b8; animation: live-puff .7s ease-out infinite; }
.live-puff i:nth-child(2) { animation-delay: .35s; }
@keyframes live-road { to { background-position-x: -18px; } }
@keyframes live-bob { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-4px) rotate(5deg); } }
@keyframes live-drift { from { translate: -4px 0; } to { translate: 6px 0; } }
@keyframes live-speed { 0% { opacity: 0; transform: translateX(14px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateX(-10px); } }
@keyframes live-puff { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-16px, -5px) scale(1.4); } }
@keyframes live-cloud { from { transform: translateX(90px); } to { transform: translateX(-30px); } }
@media (prefers-reduced-motion: reduce) { .live-ico *, .live-ico *::before, .live-ico *::after { animation: none !important; } .live-speed i { opacity: .6; } }
.live-text .live-sub { color: var(--grape, #7b4f8e); font-weight: 700; font-size: .9rem; }
.live-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.live-text small { color: var(--cocoa); font-size: .84rem; line-height: 1.3; }
.live-text .live-gift { color: var(--grape, #7b4f8e); font-weight: 700; }
.live-price { flex: none; font-weight: 800; white-space: nowrap; }
.live-opt.gift .live-price { color: var(--basil); }

/* Página del pedido: repartidor en vivo */
.tr-livemap { border-color: color-mix(in srgb, var(--grape, #7b4f8e) 35%, transparent); }
.tlm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tlm-head h2 { margin: 0; }
.tlm-head h2 .bi { color: var(--grape, #7b4f8e); }
.tlm-gift { font-size: .8rem; font-weight: 800; color: var(--grape, #7b4f8e); background: var(--grape-soft, #f1eaf6); border-radius: 99px; padding: 3px 10px; }
.tlm-wait { margin: 0; color: var(--cocoa); }
.tlm-map { width: 100%; aspect-ratio: 4 / 3; max-height: 420px; border-radius: 16px; overflow: hidden; background: #f5efe6; }
.tlm-radar { width: 100%; height: 100%; display: block; }
.tlm-pulse { transform-origin: center; animation: tlm-pulse 1.8s ease-out infinite; transform-box: fill-box; }
@keyframes tlm-pulse { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tlm-pulse { animation: none; } }
.tlm-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.tlm-info strong { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.tlm-info small { color: var(--cocoa); }
.tlm-seen { font-size: .8rem; color: var(--basil); font-weight: 700; }
.tlm-seen.stale { color: #9a5b00; }
.tlm-refund { display: flex; gap: 10px; align-items: flex-start; background: var(--basil-soft); color: var(--basil); border-radius: 14px; padding: 10px 12px; font-weight: 600; }
.tlm-note { margin-top: 8px; font-size: .82rem; color: var(--muted); }
.tlm-map-box { position: relative; }
.tlm-google { position: absolute; right: 10px; bottom: 10px; border: 0; border-radius: 99px; padding: 8px 14px; font-weight: 800; font-size: .85rem; background: #fff; color: var(--espresso); box-shadow: 0 4px 14px rgba(42, 27, 18, .18); }
.tlm-mascot { animation: tlm-bob .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes tlm-bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tlm-mascot { animation: none; } }
@media (max-width: 480px) {
    .live-opt { display: grid; grid-template-columns: auto 72px 1fr; grid-template-areas: "chk ico txt" "chk ico price"; align-items: center; column-gap: 10px; row-gap: 2px; }
    .live-opt > .form-check-input { grid-area: chk; }
    .live-opt .live-ico { grid-area: ico; width: 72px; height: 60px; }
    .live-opt .live-text { grid-area: txt; }
    .live-opt .live-price { grid-area: price; justify-self: start; }
}

/* ===== Tarjeta de lealtad (Pídenos directo, Plan Pro y Cadena): el pin de Click2Bite es el sello ===== */
.loyal-card { --brand: #e0582b; position: relative; overflow: hidden; border-radius: 22px; padding: 18px 18px 16px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(135deg, var(--brand), #2a1810);
  box-shadow: 0 18px 40px -22px rgba(42,24,16,.65); }
.loyal-card::after { content: ""; position: absolute; right: -30px; bottom: -36px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.08); }
.loyal-card-head { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.loyal-card-head img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; }
.loyal-card-head strong { display: block; font-size: 1rem; line-height: 1.15; }
.loyal-card-head small { display: block; opacity: .85; font-size: .78rem; letter-spacing: .02em; }
.loyal-stamps { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; position: relative; z-index: 1; }
.loyal-stamp { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14);
  border: 2px dashed rgba(255,255,255,.45); }
.loyal-stamp img { width: 22px; height: 28px; object-fit: contain; opacity: .28; filter: grayscale(1); transition: transform .3s; }
.loyal-stamp.on { background: #fff; border: 2px solid #fff; }
.loyal-stamp.on img { opacity: 1; filter: none; animation: loyal-pop .5s cubic-bezier(.3,1.6,.5,1) both; }
.loyal-stamp.gift { background: #ffd54a; border: 2px solid #ffd54a; color: #2a1810; font-size: 1.1rem; }
.loyal-stamp.gift.ready { animation: loyal-glow 1.6s ease-in-out infinite; }
.loyal-card-foot { margin: 0; font-size: .86rem; line-height: 1.35; position: relative; z-index: 1; }
@keyframes loyal-pop { from { transform: scale(.3) rotate(-25deg); } to { transform: none; } }
@keyframes loyal-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,213,74,.7); } 50% { box-shadow: 0 0 0 8px rgba(255,213,74,0); } }
@media (prefers-reduced-motion: reduce) { .loyal-stamp.on img, .loyal-stamp.gift.ready { animation: none; } }
.tr-loyal { padding: 12px; }
.tr-loyal-terms { margin: 10px 4px 0; font-size: .74rem; line-height: 1.35; color: var(--muted, #7a6a5d); }
/* Anuncio de la tarjeta en el menú (con los sellos de este celular si ya pidió antes) */
.st-loyal { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 10px 14px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--brand, #e0582b), #2a1810); box-shadow: 0 10px 26px -18px rgba(42,24,16,.7); }
.st-loyal img { width: 26px; height: 33px; flex: none; }
.st-loyal strong { display: block; font-size: .92rem; line-height: 1.2; }
.st-loyal small { display: block; opacity: .9; font-size: .78rem; }
.st-loyal .st-loyal-dots { margin-left: auto; display: flex; gap: 4px; flex: none; }
.st-loyal .st-loyal-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); }
.st-loyal .st-loyal-dots i.on { background: #ffd54a; }
/* ===== Página de la marca (Plan Cadena): una liga y un QR para todas las sucursales ===== */
.bb { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; }
.bb-head { margin: 0 -16px 18px; padding: 34px 20px 26px; text-align: center; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18), transparent 55%), linear-gradient(135deg, var(--brand, #e0582b), #2a1810); border-radius: 0 0 28px 28px; }
.bb-logo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); }
.bb-head h1 { font-family: var(--font-display, serif); font-size: 1.8rem; margin: 10px 0 4px; }
.bb-head p { margin: 0 0 12px; opacity: .9; }
.bb-note { display: block; margin-top: 8px; opacity: .9; }
.bb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bb-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(42,24,16,.08);
  box-shadow: 0 10px 26px -20px rgba(42,24,16,.6); }
.bb-item.nearest { border-color: var(--brand, #e0582b); box-shadow: 0 0 0 2px var(--brand, #e0582b) inset, 0 14px 30px -20px rgba(42,24,16,.7); }
.bb-info { flex: 1 1 auto; min-width: 0; }
.bb-info strong { display: block; font-size: 1.05rem; }
.bb-info small { display: block; color: #7a6a5d; }
.bb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bb-tag { font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #f6efe8; color: #5b4636; display: inline-flex; align-items: center; gap: 4px; }
.bb-tag.open { background: #e5f6ea; color: #1f7a3c; }
.bb-tag.open .dot { width: 7px; height: 7px; border-radius: 50%; background: #22a04b; display: inline-block; }
.bb-tag.closed { background: #f4e5e2; color: #9a3b2a; }
.bb-tag.near { background: var(--brand, #e0582b); color: #fff; }
@media (max-width: 480px) { .bb-item { flex-direction: column; align-items: stretch; } .bb-item .btn { width: 100%; } }

/* «Mis lugares» (places.js): el botón ❤ de la tienda, la tarjeta del seguimiento, el aviso corto y, dentro de la app «Mis lugares»,
   la pastilla para regresar a la lista. Todo es extra: sin JavaScript no aparece nada. */
.st-place.is-saved i { color: #ff9db0; }
.tr-places .tr-places-ic { position: relative; flex-shrink: 0; }
.tr-places .tr-places-ic img { border-radius: 14px; }
.tr-places .tr-places-ic i { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .75rem; color: #fff; background: #e3306c; border: 2px solid #fff; }
.tr-places .btn.is-saved { background: #2f9a57; border-color: #2f9a57; }
.c2b-place-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 1090; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px);
    padding: 11px 18px; border-radius: 999px; color: #fff; font-weight: 700; font-size: .9rem; background: #1b100a; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .6);
    opacity: 0; transform: translate(-50%, 140%); transition: transform .4s var(--ease-spring, ease), opacity .25s; pointer-events: none; }
.c2b-place-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.c2b-place-toast i { color: #ff9db0; }
.store-body .c2b-place-toast a, .c2b-place-toast button { padding: 0; border: 0; background: none; color: #ffd27a; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.c2b-hubpill { position: fixed; left: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 1080; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px;
    border-radius: 999px; font-weight: 800; font-size: .85rem; background: #fff; border: 1px solid rgba(42, 27, 18, .08); box-shadow: 0 12px 26px -12px rgba(42, 27, 18, .55); }
.store-body a.c2b-hubpill, .store-body a.c2b-hubpill:hover { color: var(--espresso); text-decoration: none; }
.c2b-hubpill img { width: 16px; height: auto; }
@media (prefers-reduced-motion: reduce) { .c2b-place-toast { transition: none; } }
.tr-install.tr-places { padding-right: 16px; }
.tr-places .btn { margin-left: auto; white-space: nowrap; }
@media (max-width: 575.98px) { .tr-install.tr-places { flex-wrap: wrap; } .tr-places .btn { width: 100%; } }

/* Ícono de la app Click2Bite (el Pin) con el logo del negocio que queda adentro: tienda, seguimiento y la hoja de guardar. */
.c2b-appic { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
.c2b-appic > img:first-child { border-radius: 22%; box-shadow: var(--shadow-1); }
.c2b-appic .c2b-appic-biz { position: absolute; right: -7px; bottom: -7px; width: 48%; height: 48%; border-radius: 30%; object-fit: cover; background: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(43, 26, 15, .22); }
.ws-save-icon.c2b-appic { margin: 0 6px 6px 0; box-shadow: none; border-radius: 0; }

/* «Ve a tu repartidor en vivo» como botón claro: «+ Agregar +$3» (llamativo) y, ya marcado, «✓ Agregado» (tocar otra vez lo quita). */
.live-opt .live-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font-weight: 800; font-size: .9rem; color: #fff; background: var(--grape, #7b4f8e); border: 1.5px solid var(--grape, #7b4f8e); box-shadow: 0 8px 16px -10px rgba(123, 79, 142, .9); transition: background .15s, color .15s; }
.live-opt.gift .live-cta { color: #fff; }
.live-opt .live-cta .lc-on { display: none; }
.live-opt:has(input:checked) .live-cta { color: var(--grape, #7b4f8e); background: #fff; box-shadow: none; }
.live-opt:has(input:checked) .live-cta .lc-add { display: none; }
.live-opt:has(input:checked) .live-cta .lc-on { display: inline; }
.live-opt:hover .live-cta { filter: brightness(1.05); }

/* ---------- Liga rastreable de cada producto en la tienda (para Google): se ve igual y el clic sigue abriendo la ventana ---------- */
.store-body .dish-name a, .store-body .dish-name a:hover { color: inherit; text-decoration: none; }

/* ---------- Página de un producto: /{tienda}/p/{id}-{nombre} ---------- */
.pp-top { position: sticky; top: 0; z-index: 40; height: 60px; display: flex; align-items: center; background: color-mix(in srgb, var(--cream) 90%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.pp-top-inner { display: flex; align-items: center; gap: 12px; }
.store-body a.pp-back { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--espresso); text-decoration: none; }
.pp-back > i { font-size: 1.2rem; flex-shrink: 0; }
.pp-back img, .pp-back .st-mini-logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.pp-back .st-mini-logo { display: inline-grid; place-items: center; background: var(--brand); color: #fff; font-weight: 800; font-size: .85rem; }
.pp-back strong { font-family: var(--font-display); font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-main { padding-top: 16px; padding-bottom: 56px; }
.pp-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px; padding: 0; font-size: .88rem; color: var(--muted); }
.pp-crumbs li { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.pp-crumbs li + li::before { content: "›"; margin-right: 8px; color: var(--muted); }
.pp-crumbs li[aria-current] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--espresso); font-weight: 600; }
.store-body .pp-crumbs a { color: var(--cocoa); text-decoration: none; font-weight: 600; }
.store-body .pp-crumbs a:hover { color: var(--brand-deep); text-decoration: underline; }
.pp-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 900px) { .pp-card { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 44px; align-items: start; } }
.pp-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--brand-soft); box-shadow: var(--shadow-1); }
.pp-media.is-square { aspect-ratio: 1 / 1; }
.pp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-media .dish-ph { font-size: 5.5rem; }
.pp-media.is-out img, .pp-media.is-out .dish-ph { filter: grayscale(.85); opacity: .7; }
.pp-eyebrow { margin: 0 0 6px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pp-title { font-size: clamp(1.8rem, 4.4vw, 2.7rem); line-height: 1.08; margin: 0 0 8px; overflow-wrap: anywhere; }
.pp-by { margin: 0 0 16px; color: var(--cocoa); overflow-wrap: anywhere; }
.store-body .pp-by a { font-weight: 700; }
.pp-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.pp-price { font-weight: 800; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.pp-price small { font-weight: 600; color: var(--muted); font-size: .9rem; margin-right: 5px; }
.pp-stock { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .88rem; }
.pp-stock.is-in { background: #e7f5ec; color: #1d6b3d; }
.pp-stock.is-out { background: #efe8df; color: var(--muted); }
.pp-sizes { margin: 0 0 18px; }
.pp-sizes-title { font-size: 1.05rem; margin: 0 0 8px; }
.pp-sizes ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
.pp-sizes li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.pp-sizes li + li { border-top: 1px solid var(--line); }
.pp-sizes li > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.pp-sizes li strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-sizes li.is-out > span:first-child, .pp-sizes li.is-out strong { color: var(--muted); }
.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pp-desc { color: var(--cocoa); font-size: 1.02rem; line-height: 1.55; margin: 0 0 18px; white-space: pre-line; overflow-wrap: anywhere; }
.pp-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-weight: 600; margin: 0 0 16px; }
.pp-note i { margin-top: 2px; }
.pp-note.warn { background: #fff7e6; color: #7a4b00; border: 1px solid #f7d9a6; }
.pp-note.info { background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--espresso); border: 1px solid color-mix(in srgb, var(--brand) 30%, #fff); }
.pp-note.info i { color: var(--brand); }
.pp-cta { max-width: 460px; margin: 4px 0 16px; }
.pp-cta > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pp-ways { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--cocoa); font-weight: 600; font-size: .92rem; }
.pp-ways i { color: var(--brand); margin-right: 2px; }
.pp-related { margin-top: 48px; }
.store-body a.pp-rel, .store-body a.pp-rel:hover { color: var(--espresso); text-decoration: none; }
.pp-rel.unavailable { cursor: pointer; }
.pp-all { margin: 18px 0 0; font-weight: 700; }

/* ---------- Migas de pan en la portada de la tienda (Inicio › Giro · Ciudad › Comercio) ---------- */
.st-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0 0 16px; padding: 0; font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.st-crumbs li { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.st-crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .75; }
.st-crumbs li[aria-current] { color: #fff; }
.store-body .st-crumbs a, .store-body .st-crumbs a:hover { color: #fff; text-decoration: none; }
.store-body .st-crumbs a:hover { text-decoration: underline; }

/* ---------- Íconos: su lugar queda reservado (1em × 1em, la medida exacta de cada ícono de Bootstrap Icons) aunque su hoja de
   estilos llegue después de la primera pintura (tienda y página de producto, ver _PublicLayout): nada se recorre al llegar.
   Todo el selector va en :where() (especificidad 0,0,1), así que el contenido real de cada ícono (.bi-x::before, 0,1,1) siempre
   gana. ---------- */
:where(.store-body .bi)::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; }

/* ---------- Solo los íconos de Bootstrap Icons que usa Click2Bite (359 de 2,078): 35 KB en lugar de 131 KB. Para esos caracteres
   (unicode-range) el navegador usa este archivo; para cualquier otro ícono, el archivo completo de siempre (c2b-icons-full), que
   solo se baja si una página llega a usar uno que no está aquí (nada se rompe). Los rangos no se enciman, así el completo tampoco
   se pide «de respaldo» mientras carga el reducido. Una prueba (IconSubsetTests) revisa que estén todos los que aparecen en el
   código; si agregas uno nuevo, ahí viene cómo volver a generarlo. ---------- */
.store-body .bi::before { font-family: c2b-icons, c2b-icons-full !important; }
@font-face {
    font-family: c2b-icons;
    font-display: block;
    src: url("../fonts/bootstrap-icons-c2b-4d375a90.woff") format("woff");
    unicode-range: U+F102, U+F10A, U+F10D, U+F116-F118, U+F123, U+F128, U+F12B, U+F12F-F130, U+F134, U+F138, U+F144, U+F148, U+F14A, U+F14D, U+F170-F171, U+F174-F176, U+F179-F17B, U+F17D-F17E, U+F180, U+F182, U+F189-F18A, U+F194, U+F196, U+F19A, U+F1C3, U+F1C5-F1C7, U+F1D6, U+F1DA, U+F1E0-F1E2, U+F1E7-F1E8, U+F1EF, U+F1F3, U+F1F5, U+F209, U+F213-F214, U+F219, U+F220, U+F228, U+F246, U+F249-F24B, U+F251-F253, U+F255, U+F262, U+F264-F265, U+F267, U+F26A-F26B, U+F26F-F272, U+F282, U+F284-F285, U+F287-F28B, U+F290, U+F292-F293, U+F297, U+F2D1-F2D2, U+F2D6, U+F2D8-F2DA, U+F2DC, U+F2DF, U+F2E1, U+F2E3, U+F2EA, U+F2EE, U+F302, U+F309-F30D, U+F312, U+F319, U+F31C, U+F31E, U+F327, U+F32C, U+F32E-F32F, U+F332-F333, U+F337, U+F33A-F33B, U+F33E, U+F340-F343, U+F356, U+F368, U+F389, U+F38B, U+F391, U+F3B9, U+F3CC-F3CF, U+F3DA, U+F3E1, U+F3E6-F3E8, U+F3EA-F3EC, U+F3EE-F3F0, U+F3F2, U+F3F4, U+F3F9, U+F3FC, U+F3FE, U+F401, U+F403, U+F405, U+F407, U+F409, U+F40D, U+F414-F415, U+F417, U+F41F, U+F421, U+F423-F424, U+F42A-F42B, U+F42D, U+F42F-F431, U+F443-F444, U+F446, U+F44E-F44F, U+F456, U+F464-F465, U+F467, U+F46B-F46D, U+F470, U+F473, U+F475, U+F479-F47C, U+F47E-F47F, U+F484, U+F496, U+F49E, U+F4B1, U+F4B5-F4B6, U+F4C1-F4C3, U+F4CA-F4CB, U+F4CF-F4D1, U+F4D3, U+F4D5-F4D6, U+F4D9, U+F4DB, U+F4DD, U+F4E2, U+F4E6-F4E7, U+F4E9, U+F4F2-F4F4, U+F4F6-F4F7, U+F4FA, U+F4FD-F4FF, U+F501, U+F505, U+F50E-F50F, U+F518, U+F51F, U+F523, U+F525, U+F528, U+F52A, U+F52E-F531, U+F537-F538, U+F542-F543, U+F549-F54A, U+F557, U+F567, U+F56B, U+F57F-F580, U+F586, U+F588-F589, U+F58D, U+F591, U+F597, U+F5A2, U+F5A5, U+F5AD, U+F5AF-F5B1, U+F5B4, U+F5C1, U+F5CE, U+F5D3-F5D4, U+F5D6, U+F5DB, U+F5DE, U+F5E6-F5E7, U+F5EA, U+F5F8, U+F600, U+F602-F603, U+F60C, U+F610-F611, U+F615, U+F617-F618, U+F61B-F61D, U+F622-F623, U+F627, U+F62A, U+F62E, U+F630-F633, U+F63B, U+F63E, U+F64D-F64E, U+F658-F65B, U+F66B, U+F673, U+F675, U+F67F, U+F68C, U+F692, U+F6A5-F6A6, U+F6AA, U+F6AD-F6AE, U+F6B1, U+F6B3, U+F6C0, U+F6C9-F6CA, U+F6E0, U+F6ED-F6EE, U+F6FD-F6FE, U+F704-F705, U+F708, U+F70C-F70D, U+F710, U+F714, U+F73D, U+F743, U+F759, U+F769, U+F76F, U+F775-F776, U+F77A, U+F783, U+F785, U+F789, U+F78B, U+F7CD, U+F7DF, U+F7EB, U+F7F6, U+F82B, U+F82E, U+F831-F832, U+F844-F845, U+F847, U+F84C, U+F87C-F87D, U+F882, U+F8A7-F8A8, U+F8AB, U+F8AF, U+F8B3, U+F8E9, U+F8F7;
}
@font-face {
    font-family: c2b-icons-full;
    font-display: block;
    src: url("../lib/bootstrap-icons/fonts/bootstrap-icons.woff2?e34853135f9e39acf64315236852cd5a") format("woff2"), url("../lib/bootstrap-icons/fonts/bootstrap-icons.woff?e34853135f9e39acf64315236852cd5a") format("woff");
    unicode-range: U+F101, U+F103-F109, U+F10B-F10C, U+F10E-F115, U+F119-F122, U+F124-F127, U+F129-F12A, U+F12C-F12E, U+F131-F133, U+F135-F137, U+F139-F143, U+F145-F147, U+F149, U+F14B-F14C, U+F14E-F16F, U+F172-F173, U+F177-F178, U+F17C, U+F17F, U+F181, U+F183-F188, U+F18B-F193, U+F195, U+F197-F199, U+F19B-F1C2, U+F1C4, U+F1C8-F1D5, U+F1D7-F1D9, U+F1DB-F1DF, U+F1E3-F1E6, U+F1E9-F1EE, U+F1F0-F1F2, U+F1F4, U+F1F6-F208, U+F20A-F212, U+F215-F218, U+F21A-F21F, U+F221-F227, U+F229-F245, U+F247-F248, U+F24C-F250, U+F254, U+F256-F261, U+F263, U+F266, U+F268-F269, U+F26C-F26E, U+F273-F281, U+F283, U+F286, U+F28C-F28F, U+F291, U+F294-F296, U+F298-F2D0, U+F2D3-F2D5, U+F2D7, U+F2DB, U+F2DD-F2DE, U+F2E0, U+F2E2, U+F2E4-F2E9, U+F2EB-F2ED, U+F2EF-F301, U+F303-F308, U+F30E-F311, U+F313-F318, U+F31A-F31B, U+F31D, U+F31F-F326, U+F328-F32B, U+F32D, U+F330-F331, U+F334-F336, U+F338-F339, U+F33C-F33D, U+F33F, U+F344-F355, U+F357-F367, U+F369-F388, U+F38A, U+F38C-F390, U+F392-F3B8, U+F3BA-F3CB, U+F3D0-F3D9, U+F3DB-F3E0, U+F3E2-F3E5, U+F3E9, U+F3ED, U+F3F1, U+F3F3, U+F3F5-F3F8, U+F3FA-F3FB, U+F3FD, U+F3FF-F400, U+F402, U+F404, U+F406, U+F408, U+F40A-F40C, U+F40E-F413, U+F416, U+F418-F41E, U+F420, U+F422, U+F425-F429, U+F42C, U+F42E, U+F432-F442, U+F445, U+F447-F44D, U+F450-F455, U+F457-F463, U+F466, U+F468-F46A, U+F46E-F46F, U+F471-F472, U+F474, U+F476-F478, U+F47D, U+F480-F483, U+F485-F495, U+F497-F49D, U+F49F-F4B0, U+F4B2-F4B4, U+F4B7-F4C0, U+F4C4-F4C9, U+F4CC-F4CE, U+F4D2, U+F4D4, U+F4D7-F4D8, U+F4DA, U+F4DC, U+F4DE-F4E1, U+F4E3-F4E5, U+F4E8, U+F4EA-F4F1, U+F4F5, U+F4F8-F4F9, U+F4FB-F4FC, U+F500, U+F502-F504, U+F506-F50D, U+F510-F517, U+F519-F51E, U+F520-F522, U+F524, U+F526-F527, U+F529, U+F52B-F52D, U+F532-F536, U+F539-F541, U+F544-F548, U+F54B-F556, U+F558-F566, U+F568-F56A, U+F56C-F57E, U+F581-F585, U+F587, U+F58A-F58C, U+F58E-F590, U+F592-F596, U+F598-F5A1, U+F5A3-F5A4, U+F5A6-F5AC, U+F5AE, U+F5B2-F5B3, U+F5B5-F5C0, U+F5C2-F5CD, U+F5CF-F5D2, U+F5D5, U+F5D7-F5DA, U+F5DC-F5DD, U+F5DF-F5E5, U+F5E8-F5E9, U+F5EB-F5F7, U+F5F9-F5FF, U+F601, U+F604-F60B, U+F60D-F60F, U+F612-F614, U+F616, U+F619-F61A, U+F61E-F621, U+F624-F626, U+F628-F629, U+F62B-F62D, U+F62F, U+F634-F63A, U+F63C-F63D, U+F63F-F64C, U+F64F-F657, U+F65C-F66A, U+F66C-F672, U+F674, U+F676-F67E, U+F680-F68B, U+F68D-F691, U+F693-F6A4, U+F6A7-F6A9, U+F6AB-F6AC, U+F6AF-F6B0, U+F6B2, U+F6B4-F6BF, U+F6C1-F6C8, U+F6CB-F6DF, U+F6E1-F6EC, U+F6EF-F6FC, U+F6FF-F703, U+F706-F707, U+F709-F70B, U+F70E-F70F, U+F711-F713, U+F715-F73C, U+F73E-F742, U+F744-F758, U+F75A-F768, U+F76A-F76E, U+F770-F774, U+F777-F779, U+F77B-F782, U+F784, U+F786-F788, U+F78A, U+F78C-F7CC, U+F7CE-F7DE, U+F7E0-F7EA, U+F7EC-F7F5, U+F7F7-F82A, U+F82C-F82D, U+F82F-F830, U+F833-F843, U+F846, U+F848-F84B, U+F84D-F87B, U+F87E-F881, U+F883-F8A6, U+F8A9-F8AA, U+F8AC-F8AE, U+F8B0-F8B2, U+F8B4-F8E8, U+F8EA-F8F6, U+F8F8-F91E;
}