/* ============================================================
   ATENIA · Tienda pública (storefront) — mobile-first + overrides PC
   Autohospedado (sin CDNs). Generado de tienda.css + tienda-pc.css.
   El color de marca del tenant sobreescribe --orange en el wrapper.
   ============================================================ */

/* ============================================================
   ATENIA · Tienda pública (storefront)  —  mobile-first
   ============================================================ */
:root{
  --orange:#F86A2C; --orange-deep:#DD541C; --orange-soft:#FDE7D8; --orange-tint:#FFF3EA;
  --violet:#7C3AED; --violet-deep:#6A28D6; --violet-soft:#EDE8FE;
  --olive:#5E8C52; --olive-soft:#E5EFE2;
  --ink:#1C2030; --slate:#4A5165; --slate-soft:#8A91A6; --slate-faint:#B7BCC9;
  --line:#ECE7DE; --line-2:#F2EEE6; --cream:#FBF8F3; --canvas:#EFEAE2; --white:#FFFFFF;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(28,32,48,.06),0 1px 3px rgba(28,32,48,.05);
  --sh-md:0 6px 18px rgba(28,32,48,.10);
  --sh-lg:0 -10px 40px rgba(28,32,48,.18);
  --col:480px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Sin overscroll-behavior en el body: bloquearía el pull-to-refresh nativo del
   navegador. El encadenado de scroll se contiene en los sheets, no aquí. */
body{font-family:'Figtree',system-ui,sans-serif;background:var(--canvas);color:var(--ink);font-size:15px;-webkit-font-smoothing:antialiased}
.font-d{font-family:'Sora',sans-serif;letter-spacing:-.02em}
svg{display:block}
.ic{width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}
.ic.fill{fill:currentColor;stroke:none}.ic.sm{width:16px;height:16px}.ic.lg{width:24px;height:24px}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}

/* phone column */
.app{max-width:var(--col);margin:0 auto;background:var(--cream);min-height:100vh;position:relative;box-shadow:0 0 50px rgba(28,32,48,.10);padding-bottom:90px}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--line)}
.head-top{display:flex;align-items:center;gap:12px;padding:16px 18px 12px}
.logo-slot{width:48px;height:48px;border-radius:var(--r-pill);flex:none;box-shadow:var(--sh-sm)}
.head-top .nm{font-size:18px;font-weight:700;line-height:1.1}
.head-top .tg{font-size:12.5px;color:var(--slate-soft);margin-top:2px;display:flex;align-items:center;gap:6px}
.head-top .open-dot{width:7px;height:7px;border-radius:50%;background:var(--olive);flex:none}
.bell{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 13px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--slate);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.bell:hover{border-color:var(--orange);color:var(--orange-deep)}
.bell:disabled{opacity:.6;cursor:default}
.bell.on{background:var(--orange-soft);border-color:var(--orange);color:var(--orange-deep)}
.head-contacts{display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;padding:0 18px 12px;font-size:12.5px;color:var(--slate-soft)}
.searchbar{display:flex;align-items:center;gap:9px;padding:0 18px 12px;flex-wrap:wrap}
.search{flex:1;min-width:160px;display:flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 16px;color:var(--slate-soft)}
.searchbar .cur{flex-shrink:0}
.search input{flex:1;border:0;outline:0;background:none;font-size:14.5px;color:var(--ink)}
.search .ic{width:18px;height:18px}
.cur{display:inline-flex;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.cur button{border:0;background:none;font-family:'Sora';font-weight:600;font-size:13px;color:var(--slate);padding:7px 13px;border-radius:var(--r-pill);transition:.14s}
.cur button.on{background:var(--orange);color:#fff}
.cur-locked{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 13px;font-family:'Sora';font-weight:600;font-size:12.5px;color:var(--slate);white-space:nowrap}
.cur-locked svg{color:var(--orange)}
.cats{display:flex;gap:8px;overflow-x:auto;padding:2px 18px 14px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats button{flex:none;border:1px solid var(--line);background:var(--white);font-family:'Sora';font-weight:600;font-size:13.5px;color:var(--slate);padding:9px 16px;border-radius:var(--r-pill);transition:.14s;white-space:nowrap}
.cats button.on{background:var(--orange);color:#fff;border-color:var(--orange)}

/* ---------- banner ---------- */
.banner-wrap{padding:14px 18px 4px}
.banner{width:100%;height:150px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)}

/* ---------- catalog ---------- */
.catalog{padding:6px 18px 20px}
.cat-sec{padding-top:18px;scroll-margin-top:170px}
.cat-sec h2{font-family:'Sora';font-size:18px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.cat-sec h2 .ct{font-size:12px;color:var(--slate-soft);font-weight:500;font-family:'Figtree'}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;box-shadow:var(--sh-sm);position:relative}
.pc .nm{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25;font-family:'Sora';letter-spacing:-.01em}
.pc .ds{font-size:12.5px;color:var(--slate-soft);margin-top:5px;line-height:1.4;flex:1}
.pc .ws-tag{display:inline-block;width:fit-content;align-self:flex-start;font-size:11px;font-weight:700;color:#3f6212;background:#ecfccb;border-radius:6px;padding:2px 8px;margin-top:5px}
.citem .nm .ws-note{display:block;font-size:11px;font-weight:600;color:#65a30d;margin-top:1px}
/* Productos relacionados (upsell) en el carrito */
.rel-wrap{margin:14px 0 4px;border-top:1px solid var(--line-2);padding-top:12px}
.rel-title{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px;font-family:'Sora'}
.rel-scroll{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.rel-scroll::-webkit-scrollbar{display:none}
.rel-card{flex:0 0 108px;width:108px;border:1px solid var(--line);border-radius:12px;padding:7px;display:flex;flex-direction:column;gap:3px}
.rel-thumb{height:64px;border-radius:8px;background:var(--cream,#f4f1ec);display:grid;place-items:center;overflow:hidden}
.rel-thumb img{width:100%;height:100%;object-fit:cover}
.rel-noimg{width:26px;height:26px;color:#bdb6aa;opacity:.9}
.rel-name{font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.2;height:28px;overflow:hidden}
.rel-price{font-size:12px;font-weight:700;color:var(--orange-deep)}
.rel-add{margin-top:2px;border:0;background:var(--orange);color:#fff;border-radius:7px;padding:5px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:'Sora'}
.rel-add:hover{background:var(--orange-deep)}
.pc .ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.pc .pr{font-family:'Sora';font-weight:700;font-size:15px;color:var(--orange-deep);font-variant-numeric:tabular-nums;line-height:1.15}
.pc .pr small{display:block;font-size:11px;color:var(--slate-soft);font-weight:600}
.add{display:inline-flex;align-items:center;gap:5px;background:var(--orange);color:#fff;border:0;border-radius:var(--r-md);font-family:'Sora';font-weight:600;font-size:13px;padding:9px 13px;transition:.14s;white-space:nowrap}
.add:hover{background:var(--orange-deep)}
.add:active{transform:scale(.95)}
.add .ic{width:15px;height:15px;stroke-width:2.6}
.pc.added{animation:pop .35s ease}
/* Producto agotado: visible (marketing) pero no se puede agregar. */
.pc.agotado .thumb{opacity:.55;filter:grayscale(.35)}
.pc.agotado .nm,.pc.agotado .pr{opacity:.7}
.soldout{position:absolute;top:10px;left:10px;z-index:2;background:#dc2626;color:#fff;font-family:'Sora';font-weight:700;font-size:11px;letter-spacing:.02em;padding:3px 10px;border-radius:var(--r-pill);box-shadow:var(--sh-sm)}
.soldout-btn{background:#e5e7eb;color:#9ca3af;cursor:not-allowed}
.soldout-btn:hover{background:#e5e7eb}
@keyframes pop{0%{box-shadow:0 0 0 0 rgba(248,106,44,.45)}100%{box-shadow:0 0 0 10px rgba(248,106,44,0)}}
.qbadge{position:absolute;top:-7px;right:-7px;min-width:24px;height:24px;padding:0 7px;border-radius:var(--r-pill);background:var(--orange);color:#fff;font-family:'Sora';font-weight:700;font-size:12px;display:none;align-items:center;justify-content:center;box-shadow:var(--sh-sm)}
.pc.has .qbadge{display:flex}
.empty{text-align:center;color:var(--slate-soft);padding:50px 0;font-size:14.5px}

/* ---------- floating fabs ---------- */
.fabs{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;width:min(var(--col),100vw);display:flex;justify-content:space-between;align-items:center;padding:0 16px;pointer-events:none;z-index:40}
.fab{pointer-events:auto;border:0;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:9px;font-family:'Sora';font-weight:700;box-shadow:var(--sh-md);transition:.16s}
.fab:active{transform:scale(.96)}
.fab-ai{background:var(--violet);color:#fff;padding:9px 17px 9px 9px;font-size:13.5px}
.fab-ai:hover{background:var(--violet-deep)}
.fab-ai .ow{width:32px;height:32px;border-radius:9px;overflow:hidden;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.fab-ai .ow svg{width:32px;height:32px;display:block}
.fab-cart{background:var(--orange);color:#fff;padding:13px 18px;font-size:14.5px;font-variant-numeric:tabular-nums}
.fab-cart .ic{width:19px;height:19px}
.fab-cart .qn{background:#fff;color:var(--orange-deep);min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);font-size:12px;display:grid;place-items:center}
.fab-cart.hide{transform:translateY(90px);opacity:0;pointer-events:none}

/* ── Asistente = owl ANIMADO (como la landing): solo icono ── */
.owl-live{display:block}
.owl-live .owl-eyes{transform-box:fill-box;transform-origin:center;animation:owlBlink 4.8s ease-in-out infinite}
.owl-live .owl-pupils{transform-box:fill-box;transform-origin:center;animation:owlLook 5.6s ease-in-out infinite}
@keyframes owlBlink{0%,86%,100%{transform:scaleY(1)}90%,94%{transform:scaleY(.08)}}
@keyframes owlLook{0%,100%{transform:translate(0,0)}20%{transform:translate(-3px,0)}46%{transform:translate(0,1.4px)}72%{transform:translate(3px,-.4px)}}
@media(prefers-reduced-motion:reduce){.owl-live .owl-eyes,.owl-live .owl-pupils{animation:none}}
.fab-ai{background:none;box-shadow:none;padding:0;width:60px;height:60px;border-radius:18px;position:relative;flex:none}
.fab-ai:hover{background:none}
.fab-ai .owl-live{width:60px;height:60px;filter:drop-shadow(0 8px 20px rgba(124,58,237,.40));transition:transform .2s}
.fab-ai:hover .owl-live{transform:scale(1.07) rotate(-3deg)}
.fab-ai:active .owl-live{transform:scale(.95)}
.fab-ai::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;animation:fabPulse 2.6s infinite}
@keyframes fabPulse{0%{box-shadow:0 0 0 0 rgba(124,58,237,.40)}70%{box-shadow:0 0 0 14px rgba(124,58,237,0)}100%{box-shadow:0 0 0 0 rgba(124,58,237,0)}}

/* Móvil: owl a la izquierda, carrito a la derecha (sin estirar);
   el chat abre como tarjeta flotante JUSTO ENCIMA del owl. */
@media(max-width:560px){
  .fabs{justify-content:space-between;gap:10px;padding:0 12px;bottom:12px}
  .fab-ai{width:54px;height:54px}
  .fab-ai .owl-live{width:54px;height:54px}
  .fab-cart{height:54px;padding:0 18px;font-size:14px}   /* ancho según contenido */
  .sheet.asst{left:10px;right:10px;bottom:74px;top:auto;width:auto;max-width:none;height:auto;max-height:72vh;border-radius:20px;box-shadow:0 18px 50px rgba(28,32,48,.30);opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transition:transform .24s cubic-bezier(.32,.72,0,1),opacity .2s,visibility .24s}
  .sheet.asst.open{opacity:1;visibility:visible;transform:none}
  .sheet.asst .sheet-grab{display:none}
}

/* ---------- overlay + sheets ---------- */
.ov{position:fixed;inset:0;background:rgba(28,32,48,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.22s;z-index:50}
.ov.open{opacity:1;visibility:visible}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%) translateY(100%);width:min(var(--col),100vw);max-height:93vh;background:var(--white);border-radius:22px 22px 0 0;z-index:60;display:flex;flex-direction:column;transition:transform .26s cubic-bezier(.32,.72,0,1);box-shadow:var(--sh-lg);overflow:hidden}
.sheet.open{transform:translateX(-50%) translateY(0)}
.sheet-grab{width:38px;height:4px;border-radius:4px;background:var(--slate-faint);margin:9px auto 0;flex:none}
.sheet-head{display:flex;align-items:center;padding:12px 20px 14px;border-bottom:1px solid var(--line)}
.sheet-head h2{font-family:'Sora';font-size:19px;font-weight:700}
.sheet-head .cl{margin-left:auto;width:34px;height:34px;border-radius:var(--r-pill);background:var(--cream);border:0;display:grid;place-items:center;color:var(--slate)}
.sheet-head .cl:hover{background:var(--line)}
.sheet-body{overflow-y:auto;padding:16px 20px;flex:1;overscroll-behavior:contain}

/* ---------- cart ---------- */
.citem{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.citem .stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-pill);overflow:hidden;flex:none}
.citem .stepper button{width:32px;height:32px;border:0;background:var(--white);color:var(--orange);display:grid;place-items:center}
.citem .stepper button:hover{background:var(--orange-soft)}
.citem .stepper .q{min-width:26px;text-align:center;font-family:'Sora';font-weight:700;font-size:14px}
.citem .nm{flex:1;font-size:14px;font-weight:600;line-height:1.25}
.citem .nm small{display:block;color:var(--slate-soft);font-weight:500;font-size:12px;margin-top:1px}
.citem .ln{display:flex;flex-direction:column;align-items:flex-end;font-family:'Sora';font-weight:700;color:var(--orange-deep);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:14px}
.citem .ln .unit{font-weight:600;font-size:11px;color:var(--slate-soft);margin-top:1px}
.cart-empty{text-align:center;color:var(--slate-soft);padding:40px 10px}
.cart-empty .ic{width:46px;height:46px;margin:0 auto 14px;color:var(--slate-faint)}
.cart-empty b{font-family:'Sora';display:block;color:var(--slate);margin-bottom:4px}
/* Selector de pasarela en el carrito (tarjeta / TropiPay) */
.paymeth-wrap{margin:10px 0 2px}
.paymeth-q{font-size:12px;font-weight:600;color:var(--slate);margin-bottom:7px}
.paymeth{display:flex;gap:8px;flex-wrap:wrap}
.paymeth-btn{flex:1 1 0;min-width:140px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer;background:#fff;transition:border-color .14s,background .14s}
.paymeth-btn:hover{border-color:var(--orange-soft)}
.paymeth-btn.on{border-color:var(--orange);background:var(--orange-soft)}
.paymeth-btn .pm-label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25}
.paymeth-btn .pm-amt{display:block;font-size:14px;font-weight:700;color:var(--orange-deep);margin-top:2px}
.totline{display:flex;align-items:center;justify-content:space-between;padding:16px 2px 6px}
.totline .l{font-family:'Sora';font-weight:700;font-size:17px}
.totline .v{font-family:'Sora';font-weight:800;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}

/* delivery */
.deliv-q{font-family:'Sora';font-weight:700;font-size:14px;margin:8px 0 10px}
.deliv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.deliv .opt{border:1.6px solid var(--line);background:var(--white);border-radius:var(--r-lg);padding:14px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;transition:.14s}
.deliv .opt .ic{width:24px;height:24px;color:var(--slate)}
.deliv .opt b{font-family:'Sora';font-size:14px}
.deliv .opt span{font-size:12px;color:var(--slate-soft)}
.deliv .opt.sel{border-color:var(--orange);background:var(--orange-tint)}
.deliv .opt.sel .ic{color:var(--orange)}
.deliv .opt.sel b{color:var(--orange-deep)}
.deliv-form{background:var(--orange-tint);border:1px solid var(--orange-soft);border-radius:var(--r-lg);padding:16px;margin-top:14px}
.deliv-form .dh{font-family:'Sora';font-weight:700;color:var(--orange-deep);font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.deliv-form .dh .ic{width:17px;height:17px}
.fld{margin-bottom:13px}
.fld:last-child{margin-bottom:0}
.fld label{display:block;font-family:'Sora';font-size:13px;font-weight:600;margin-bottom:6px}
.fld label .req{color:var(--orange-deep)}
.fld label .opt2{color:var(--slate-soft);font-weight:500;font-family:'Figtree'}
.in{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);padding:11px 13px;font-size:14.5px;color:var(--ink);background:var(--white);outline:none;transition:.14s}
.in::placeholder{color:var(--slate-faint)}
.in:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
select.in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A91A6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
textarea.in{resize:vertical;min-height:64px}
.sheet-foot{padding:14px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--white)}
.btn-confirm{width:100%;border:0;border-radius:var(--r-md);background:var(--orange);color:#fff;font-family:'Sora';font-weight:700;font-size:16px;padding:16px;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.btn-confirm:hover{background:var(--orange-deep)}
.btn-confirm:disabled{opacity:.5}
.btn-confirm .ic{width:19px;height:19px}

/* ---------- assistant ---------- */
.asst .sheet-head{padding:0;border:0;display:block}
.asst-hd{background:linear-gradient(135deg,#7C3AED,#5B21B6);color:#fff;padding:18px 20px;display:flex;align-items:center;gap:13px;position:relative}
.asst-hd .av{width:46px;height:46px;border-radius:11px;overflow:hidden;flex:none;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.asst-hd .av svg{width:46px;height:46px;display:block}
.asst-hd h2{font-family:'Sora';font-size:17px;font-weight:700;line-height:1.1}
.asst-hd .st{font-size:12.5px;opacity:.9;display:flex;align-items:center;gap:6px;margin-top:2px}
.asst-hd .st .pip{width:7px;height:7px;border-radius:50%;background:#8AE6A0}
.asst-hd .cl{margin-left:auto;width:34px;height:34px;border-radius:var(--r-pill);background:rgba(255,255,255,.18);border:0;display:grid;place-items:center;color:#fff}
.asst-body{background:var(--cream);overflow-y:auto;flex:1;padding:18px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.msg{max-width:84%;padding:12px 15px;border-radius:16px;font-size:14.5px;line-height:1.45}
.msg.bot{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:5px;align-self:flex-start;box-shadow:var(--sh-sm)}
.msg.me{background:var(--orange);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.msg.bot b{color:var(--violet)}
/* Resaltado de productos/precios cuando el asistente habla de ellos */
.msg.bot .ai-hl{color:var(--violet);font-weight:700}
.msg.bot .ai-price{color:var(--orange-deep);font-weight:700;font-family:'Sora',sans-serif;white-space:nowrap}
.msg .prodrec{margin-top:9px;background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.msg .prodrec .pn{font-family:'Sora',sans-serif;font-weight:600;font-size:13px;color:var(--ink);line-height:1.2}
.msg .prodrec .pp{font-family:'Sora',sans-serif;font-weight:700;font-size:12.5px;color:var(--orange-deep);margin-top:2px}
.msg .prodrec .padd{flex:none;border:0;border-radius:9px;background:var(--orange);color:#fff;font-family:'Sora',sans-serif;font-weight:600;font-size:12px;padding:8px 12px;cursor:pointer;transition:.14s;display:inline-flex;align-items:center;gap:4px}
.msg .prodrec .padd:hover{background:var(--orange-deep)}
.msg .prodrec .padd:active{transform:scale(.95)}
.typing{display:flex;gap:4px;align-self:flex-start;background:var(--white);border:1px solid var(--line);padding:14px 16px;border-radius:16px;border-bottom-left-radius:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--slate-faint);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 12px;background:var(--cream)}
.chip{border:1px solid var(--violet-soft);background:var(--white);color:var(--violet);font-family:'Sora';font-weight:600;font-size:12.5px;padding:8px 13px;border-radius:var(--r-pill);transition:.14s}
.chip:hover{background:var(--violet-soft)}
.asst-input{display:flex;gap:9px;padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--white)}
.asst-input input{flex:1;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:12px 16px;font-size:14.5px;outline:none}
.asst-input input:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.asst-input .send{width:46px;height:46px;border-radius:50%;background:var(--violet);color:#fff;border:0;display:grid;place-items:center;flex:none}
.asst-input .send:active{transform:scale(.92)}

/* product card add-to-cart from chat */
.msg.bot .qadd{display:inline-flex;align-items:center;gap:6px;margin-top:9px;background:var(--orange);color:#fff;border:0;border-radius:var(--r-md);font-family:'Sora';font-weight:600;font-size:12.5px;padding:7px 11px}

/* toast */
.toast-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;z-index:120;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(var(--col),100vw);padding:0 16px}
.toast{background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:500;box-shadow:var(--sh-md);display:flex;align-items:center;gap:9px;animation:tup .3s ease}
.toast .ic{width:17px;height:17px;color:#7ED48E}
@keyframes tup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* footer */
.foot{text-align:center;padding:20px;color:var(--slate-soft);font-size:12.5px;border-top:1px solid var(--line)}
.foot .wm{font-family:'Sora';font-weight:700}
.foot .wm .ia{color:var(--violet);font-weight:800}



/* ============================================================
   COMPAT atenIA — integración con la app (scroll-spy, imágenes,
   variantes/atributos, line-clamp). Añadido sobre el diseño base.
   ============================================================ */
[x-cloak]{display:none!important}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* category pills son <a class="cat-pill"> para el scroll-spy */
.cats .cat-pill{flex:none;border:1px solid var(--line);background:var(--white);font-family:'Sora';font-weight:600;font-size:13.5px;color:var(--slate);padding:9px 16px;border-radius:var(--r-pill);transition:.14s;white-space:nowrap;text-decoration:none;display:inline-block}
.cats .cat-pill:hover{color:var(--ink)}
.cats .cat-pill.active{background:var(--orange);color:#fff;border-color:var(--orange)}

/* imagen del producto (opcional) dentro de la tarjeta del diseño */
.pc .thumb{width:100%;height:120px;border-radius:var(--r-md);object-fit:contain;margin-bottom:11px;background:#fff}
.pc .ds{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* variantes (talla/color) seleccionables y atributos informativos */
.pc .vrow{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:8px}
.pc .vk{font-size:10.5px;color:var(--slate-soft);font-weight:600;font-family:'Sora';margin-right:2px}
.pc .vbtn{border:1px solid var(--line);background:var(--white);color:var(--slate);font-family:'Sora';font-weight:600;font-size:11px;padding:4px 10px;border-radius:var(--r-pill);transition:.14s}
.pc .vbtn:hover{border-color:var(--slate-faint);color:var(--ink)}
.pc .vbtn.on{background:var(--orange);color:#fff;border-color:var(--orange)}
.pc .atag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:500;color:var(--orange-deep);background:var(--orange-tint);border:1px solid var(--orange-soft);padding:3px 9px;border-radius:var(--r-pill)}
.pc .verr{font-size:11px;color:var(--orange-deep);font-weight:600;margin-top:8px}
.pc .pr del{display:inline;font-size:11.5px;color:var(--slate-faint);font-weight:500;margin-left:5px}

/* overlay de éxito (pedido recibido) */
.done-ov{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;background:rgba(251,248,243,.97);backdrop-filter:blur(4px);padding:24px;text-align:center}
@keyframes popin{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
.done-ov .box{animation:popin .3s cubic-bezier(.34,1.56,.64,1)}
.done-ov .tick{width:80px;height:80px;border-radius:var(--r-pill);background:var(--orange);color:#fff;display:grid;place-items:center;margin:0 auto 20px}
.done-ov .tick svg{width:38px;height:38px;stroke-width:3}
.done-ov h2{font-family:'Sora';font-size:24px;font-weight:800;margin-bottom:6px}
.done-ov .rn{font-family:'Sora';font-size:30px;font-weight:800;color:var(--orange-deep);display:block;margin:6px 0;text-decoration:none}
.done-ov .track{display:inline-flex;align-items:center;gap:7px;font-family:'Sora';font-weight:600;font-size:14px;color:var(--orange-deep);background:var(--orange-tint);padding:9px 16px;border-radius:var(--r-pill);text-decoration:none;margin:8px 0 22px}
.done-ov .again{background:var(--orange);color:#fff;border:0;border-radius:var(--r-md);font-family:'Sora';font-weight:700;font-size:15px;padding:14px 28px}

/* error del checkout */
.checkout-err{font-size:13.5px;color:var(--orange-deep);font-weight:600;margin-top:4px}


/* ============================================================
   VISTA PC (escritorio) — overrides de tienda-pc.css
   ============================================================ */
@media(min-width:768px){
/* ============================================================
   ATENIA · Tienda pública — overrides para PC (vista de escritorio)
   Se carga DESPUÉS de tienda.css. Ancho contenido, no full-bleed.
   ============================================================ */

/* columna más ancha pero contenida */
.app{max-width:1080px;padding-bottom:48px;box-shadow:0 0 60px rgba(28,32,48,.08)}

.head-top{padding:22px 32px 16px}
.logo-slot{width:54px;height:54px}
.head-top .nm{font-size:22px}
.head-top .tg{font-size:13px}
.head-contacts{padding:0 32px 12px}
    .searchbar{padding:0 32px 16px}
.search{max-width:560px}
.cats{padding:2px 32px 18px;gap:10px}

.banner-wrap{padding:8px 32px 6px}
.banner{height:240px}

.catalog{padding:12px 32px 34px}
.cat-sec{scroll-margin-top:215px}
.cat-sec h2{font-size:20px;margin-bottom:14px}
.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pc{padding:16px}
.pc .nm{font-size:15px}
.pc .ds{font-size:13px}

/* botones flotantes anclados a las esquinas de la columna */
.fabs{left:50%;transform:translateX(-50%);width:min(1080px,100vw);padding:0 30px;bottom:26px}

/* carrito: pasa a panel lateral derecho (drawer) */
.sheet{left:auto;right:0;bottom:0;top:0;transform:translateX(100%);width:432px;max-width:100vw;height:100%;max-height:none;border-radius:0;box-shadow:-16px 0 48px rgba(28,32,48,.20)}
.sheet.open{transform:translateX(0)}
.sheet-grab{display:none}
.sheet-head{padding:20px 24px}

/* asistente: tarjeta flotante (esquina inferior izquierda, junto a su botón) */
.asst{left:30px;right:auto;bottom:100px;top:auto;width:392px;max-width:calc(100vw - 60px);height:580px;max-height:calc(100vh - 140px);border-radius:22px;transform:translateY(24px) scale(.97);opacity:0;visibility:hidden;box-shadow:0 26px 60px rgba(28,32,48,.28);transition:transform .26s cubic-bezier(.32,.72,0,1),opacity .2s,visibility .26s}
.asst.open{transform:none;opacity:1;visibility:visible}
.asst .asst-hd{border-radius:22px 22px 0 0}

/* dim más suave: en escritorio se siente abierto */
.ov{background:rgba(28,32,48,.34)}

/* hover de tarjetas en escritorio */
.pc{transition:transform .14s,box-shadow .14s}
.pc:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}

}