/*
 * Lojinha (site): secao da pagina inicial da marca, loja completa, produto,
 * carrinho, pedido com Pix/comprovante e a previa do painel. Usa as cores da
 * marca (--g1, --g2, --g3, --accent) e os temas claro/escuro do site.
 */

.lj-sec { position: relative; }
.lj-frame { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 26px 22px 24px; isolation: isolate; }
.lj-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.lj-bg-soft::before { background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 16%, var(--surface)), color-mix(in srgb, var(--g3) 10%, var(--surface))); }
.lj-bg-brand::before { background: linear-gradient(130deg, var(--g2), var(--g1) 55%, var(--g3)); }
.lj-bg-dark::before { background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--g2) 45%, transparent), transparent 60%), linear-gradient(140deg, #0B1020, #151B33); }
.lj-sec.lj-on-dark { --lj-text: #fff; --lj-muted: rgba(255,255,255,.78); color: #fff; }
.lj-sec { --lj-text: var(--text); --lj-muted: var(--muted); }

.lj-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.lj-head__t { flex: 1; min-width: 0; }
.lj-eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.lj-on-dark .lj-eyebrow { color: rgba(255,255,255,.8); }
.lj-title { margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--lj-text); }
.lj-sub { margin: 6px 0 0; color: var(--lj-muted); max-width: 640px; }
.lj-see { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); white-space: nowrap; transition: transform .2s, background .2s; }
.lj-see:hover { transform: translateX(2px); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.lj-on-dark .lj-see { background: rgba(255,255,255,.18); color: #fff; }

.lj-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; scrollbar-width: none; }
.lj-chips::-webkit-scrollbar { display: none; }
.lj-chip { flex: none; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.lj-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lj-on-dark .lj-chip { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }
.lj-on-dark .lj-chip.on { background: #fff; color: var(--g2); }

/* ---- Cartao de produto ---- */
.lj-card { position: relative; display: flex; flex-direction: column; text-align: left; width: 100%; padding: 0; border: 0; font: inherit; color: var(--lj-text); cursor: pointer; border-radius: var(--r-lg); overflow: hidden; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; background: none; }
.lj-card:hover { transform: translateY(-4px); }
.lj-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cs-light { background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.cs-light:hover { box-shadow: var(--shadow); }
.cs-dark { background: #0B1020; color: #fff; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); }
.cs-glass { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lj-sec:not(.lj-on-dark) .cs-glass { background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--text); border-color: var(--line); }
.cs-color { background: linear-gradient(140deg, var(--g1), var(--g2) 55%, var(--g3)); color: #fff; box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--g2) 70%, transparent); }
.cs-outline { background: transparent; border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.cs-minimal { background: transparent; border-radius: 0; overflow: visible; }
.cs-minimal .lj-img { border-radius: var(--r-lg); }
.lj-img { position: relative; overflow: hidden; aspect-ratio: 1; margin: 5px; border-radius: calc(var(--r-lg) - 4px); background: linear-gradient(135deg, color-mix(in srgb, var(--g1) 20%, var(--strong)), color-mix(in srgb, var(--g3) 14%, var(--strong))); }
.cs-minimal .lj-img { margin: 0; }
.r-portrait .lj-img { aspect-ratio: 3 / 4; }
.r-landscape .lj-img { aspect-ratio: 4 / 3; }
.lj-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.lj-card:hover .lj-img img { transform: scale(1.06); }
.lj-img .lj-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: var(--accent-text); }
.lj-body { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px 13px; }
.cs-minimal .lj-body { padding: 10px 2px 4px; }
.lj-name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lj-price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.lj-price b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.lj-price s { font-size: 13px; opacity: .6; }
.lj-off { font-size: 11.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--success-soft); color: var(--success); }
.cs-dark .lj-off, .cs-color .lj-off, .cs-glass .lj-off, .lj-on-dark .cs-glass .lj-off { background: rgba(255,255,255,.22); color: #fff; }
.lj-stock { font-size: 12px; font-weight: 700; color: var(--warning); }
.cs-dark .lj-stock, .cs-color .lj-stock { color: #FDE68A; }
.lj-soldout { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,8,18,.55); color: #fff; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; }
.lj-tagspot { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* ---- Etiqueta (mesmos formatos e animacoes da Vitrine) ---- */
.lj-tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 18px -8px rgba(0,0,0,.45); position: relative; overflow: hidden; }
.lj-tag.sm { padding: 4px 9px; font-size: 11.5px; border-radius: 8px; }
.lt-color, .lt-pill { background: linear-gradient(120deg, var(--g1), var(--g2) 55%, var(--g3)); color: #fff; }
.lt-pill { border-radius: 999px !important; }
.lt-light { background: #fff; color: var(--g2); }
.lt-dark { background: #0A0F1C; color: #fff; border: 1px solid rgba(255,255,255,.18); }
.lt-glass { background: rgba(255,255,255,.24); color: #fff; border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lt-outline { background: rgba(255,255,255,.94); color: var(--g2); border: 1.5px solid var(--g2); }
.lt-neon { background: #080C16; color: var(--g1); border: 1.5px solid var(--g1); box-shadow: 0 0 14px color-mix(in srgb, var(--g1) 70%, transparent); }
.lt-stripe { background: #fff; color: var(--g2); padding-left: 14px; }
.lt-stripe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--g1), var(--g3)); }
.ta-float { animation: lj-float 2.4s ease-in-out infinite; }
.ta-pulse { animation: lj-pulse 1.1s ease-in-out infinite; }
.ta-wiggle { animation: lj-wiggle 2.6s ease-in-out infinite; }
.ta-glow { animation: lj-glow 1.6s ease-in-out infinite; }
.ta-pop { animation: lj-pop .7s cubic-bezier(.3,1.6,.5,1) both .25s; }
.ta-slide { animation: lj-slidein .7s cubic-bezier(.2,.8,.2,1) both .25s; }
.ta-drop { animation: lj-drop .8s cubic-bezier(.3,1.5,.5,1) both .25s; }
.ta-flip { animation: lj-flip .8s cubic-bezier(.2,.8,.2,1) both .25s; }
.ta-zoom { animation: lj-zoomin .7s cubic-bezier(.2,.8,.2,1) both .25s; }
.ta-shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); animation: lj-shine 2.4s ease-in-out infinite 1s; }
@keyframes lj-float { 50% { transform: translateY(-4px); } }
@keyframes lj-pulse { 50% { transform: scale(1.08); } }
@keyframes lj-wiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-6deg); } 85% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } }
@keyframes lj-glow { 50% { box-shadow: 0 0 22px color-mix(in srgb, var(--g1) 80%, transparent); } }
@keyframes lj-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes lj-slidein { from { transform: translateX(-30px); opacity: 0; } }
@keyframes lj-drop { from { transform: translateY(-30px); opacity: 0; } }
@keyframes lj-flip { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } }
@keyframes lj-zoomin { from { transform: scale(1.7); opacity: 0; } }
@keyframes lj-shine { to { left: 130%; } }

/* ---- Entrada dos cartoes (ao aparecer na tela) ---- */
.lj-anim .lj-it { opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms * var(--lj-speed, 1)); }
.lj-anim.in .lj-it { opacity: 1; transform: none; }
.an-rise .lj-it { transform: translateY(26px); }
.an-zoom .lj-it { transform: scale(.82); }
.an-flip .lj-it { transform: perspective(900px) rotateY(-70deg); transform-origin: left center; }
.an-slide .lj-it { transform: translateX(46px); }
.an-tilt .lj-it { transform: perspective(900px) rotateX(35deg) translateY(30px); transform-origin: bottom center; }
.an-fade .lj-it { transform: none; }

/* ---- Movimento das fotos ---- */
.mo-kenburns img { animation: lj-ken calc(14s * var(--lj-speed, 1)) ease-in-out infinite alternate; }
.mo-zoom img { animation: lj-zoom calc(12s * var(--lj-speed, 1)) ease-in-out infinite alternate; }
.mo-pan img { animation: lj-pan calc(12s * var(--lj-speed, 1)) ease-in-out infinite alternate; }
.mo-breathe img { animation: lj-breathe calc(4s * var(--lj-speed, 1)) ease-in-out infinite alternate; }
@keyframes lj-ken { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.2) translate(-3%, -2%); } }
@keyframes lj-zoom { from { transform: scale(1); } to { transform: scale(1.18); } }
@keyframes lj-pan { from { transform: scale(1.18) translateX(-5%); } to { transform: scale(1.18) translateX(5%); } }
@keyframes lj-breathe { from { transform: scale(1.02); } to { transform: scale(1.08); } }

/* ---- Formatos ---- */
.lj-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: thin; }
.lj-carousel > * { scroll-snap-align: start; }
.r-landscape .lj-carousel { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
.lj-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lj-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; grid-auto-flow: dense; }
.lj-mosaic .lj-big { grid-column: span 2; grid-row: span 2; }
.lj-mosaic .lj-big .lj-img { aspect-ratio: auto; flex: 1; min-height: 260px; }
.lj-mosaic .lj-big .lj-card { height: 100%; }
.lj-mosaic .lj-big .lj-name { font-size: 20px; }
.lj-list { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 18px; columns: 2; column-gap: 40px; }
.lj-on-dark .lj-list { background: rgba(255,255,255,.96); color: #0D1520; --lj-text: #0D1520; --lj-muted: #5f6772; }
.lj-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); background: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; break-inside: avoid; transition: transform .2s; }
.lj-row:hover { transform: translateX(3px); }
.lj-row__img { flex: none; width: 54px; height: 54px; border-radius: 14px; overflow: hidden; background: var(--strong); display: grid; place-items: center; color: var(--accent-text); }
.lj-row__img img { width: 100%; height: 100%; object-fit: cover; }
.lj-row__t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lj-row__top { display: flex; align-items: baseline; gap: 8px; }
.lj-row__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-row__dots { flex: 1; min-width: 14px; border-bottom: 2px dotted var(--line-strong); transform: translateY(-4px); }
.lj-row__price { font-weight: 800; color: var(--accent-text); white-space: nowrap; }
/* Descricao em ate duas linhas (o texto ja vem cortado em loja.js); a completa abre no produto. */
.lj-row__sub { font-size: 13px; line-height: 1.4; color: var(--lj-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

.lj-slides { position: relative; overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 21 / 9; min-height: 300px; background: #0B1020; box-shadow: var(--shadow); }
.r-portrait .lj-slides { aspect-ratio: 16 / 9; }
.lj-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; cursor: pointer; border: 0; padding: 0; width: 100%; text-align: left; font: inherit; color: #fff; background: none; }
.lj-slide.on { opacity: 1; visibility: visible; }
.lj-slide .lj-slide__img { position: absolute; inset: 0; overflow: hidden; }
.lj-slide .lj-slide__img img { width: 100%; height: 100%; object-fit: cover; }
.lj-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,18,.82), rgba(5,8,18,.25) 55%, transparent); }
.lj-slide__txt { position: absolute; left: clamp(20px, 5vw, 56px); bottom: clamp(22px, 5vw, 48px); right: 40%; z-index: 2; display: grid; gap: 10px; }
.lj-slide.on .lj-slide__txt > * { animation: lj-up .8s cubic-bezier(.2,.8,.2,1) both; }
.lj-slide.on .lj-slide__txt > *:nth-child(2) { animation-delay: .1s; }
.lj-slide.on .lj-slide__txt > *:nth-child(3) { animation-delay: .2s; }
.lj-slide.on .lj-slide__txt > *:nth-child(4) { animation-delay: .3s; }
@keyframes lj-up { from { opacity: 0; transform: translateY(24px); } }
.lj-slide__cat { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.lj-slide__name { margin: 0; font-size: clamp(26px, 4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.lj-slide .lj-price b { font-size: clamp(22px, 3vw, 32px); }
.lj-slide__cta { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); font-weight: 700; backdrop-filter: blur(8px); }
.lj-slide .lj-tagspot { top: 20px; left: clamp(20px, 5vw, 56px); }
.lj-dots { position: absolute; right: 22px; bottom: 22px; z-index: 3; display: flex; gap: 6px; }
.lj-dot { width: 7px; height: 7px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s, background .3s; }
.lj-dot.on { width: 26px; background: #fff; }
.lj-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; background: rgba(255,255,255,.15); }
.lj-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--g1), var(--g3)); }
.lj-progress i.run { width: 100%; transition: width linear; }
.lj-arrows { position: absolute; right: 22px; top: 22px; z-index: 3; display: flex; gap: 8px; }
.lj-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(5,8,18,.35); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 18px; backdrop-filter: blur(6px); }

.lj-spot { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.lj-spot__main { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: var(--r-xl); min-height: 380px; border: 0; padding: 0; cursor: pointer; color: #fff; text-align: left; font: inherit; background: #0B1020; }
.lj-spot__main .lj-slide__img { position: absolute; inset: 0; overflow: hidden; }
.lj-spot__main .lj-slide__img img { width: 100%; height: 100%; object-fit: cover; }
.lj-spot__main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(5,8,18,.85)); }
.lj-spot__main .lj-slide__txt { right: 24px; }
.lj-spot__side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }

/* ---- Botao do carrinho ---- */
.lj-fab { position: fixed; right: 18px; top: calc(var(--header-h, 64px) + 12px); z-index: 65; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: #fff; background: linear-gradient(120deg, var(--g1), var(--g2) 55%, var(--g3)); box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--g2) 80%, transparent); animation: lj-pop .5s cubic-bezier(.3,1.6,.5,1) both; }
/* No topo, logo abaixo do cabeçalho: embaixo já ficam o WhatsApp, o assistente e o menu do celular. */
.lj-fab__n { min-width: 26px; height: 26px; border-radius: 13px; padding: 0 7px; display: grid; place-items: center; background: rgba(255,255,255,.26); font-weight: 800; }
.lj-fab.bump { animation: lj-bump .5s ease; }
/* Sacola na barra do menu (pagina da marca). */
.lj-cart-btn.bump { animation: lj-bump .5s ease; }
.lj-cart-btn .lj-cart-n { background: var(--accent, var(--g2)); }
@keyframes lj-bump { 30% { transform: scale(1.12); } }

/* ---- Janelas: produto, loja, carrinho, pedido ---- */
.lj-pm { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; }
.lj-gal { display: grid; gap: 10px; }
.lj-gal__main { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; background: var(--strong); }
.lj-gal__main img { width: 100%; height: 100%; object-fit: cover; animation: lj-fadein .5s ease; }
@keyframes lj-fadein { from { opacity: 0; transform: scale(1.03); } }
.lj-gal__thumbs { display: flex; gap: 8px; overflow-x: auto; }
.lj-gal__thumb { flex: none; width: 62px; height: 62px; border-radius: 12px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--strong); }
.lj-gal__thumb.on { border-color: var(--accent); }
.lj-gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lj-info { display: grid; gap: 12px; align-content: start; min-width: 0; }
.lj-info h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.lj-info .lj-price b { font-size: 28px; }
.lj-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.lj-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--soft); color: var(--accent-text); }
.lj-pill.ok { background: var(--success-soft); color: var(--success); }
.lj-pill.warn { background: var(--warning-soft); color: var(--warning); }
.lj-pill.bad { background: var(--danger-soft); color: var(--danger); }
.lj-desc { color: var(--muted); white-space: pre-line; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.lj-qty { display: inline-flex; align-items: center; gap: 12px; }
.lj-qty button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--soft); color: var(--accent-text); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.lj-qty button:disabled { opacity: .35; cursor: default; }
.lj-qty b { min-width: 24px; text-align: center; font-size: 17px; }
.lj-buy { display: flex; gap: 10px; flex-wrap: wrap; }
.lj-buy .btn { flex: 1; min-width: 150px; }
/* Na pagina do produto cada botao ocupa a linha inteira: Adicionar ao carrinho e, abaixo, Comprar. */
.lj-buy--stack { flex-direction: column; }
.lj-buy--stack .btn { width: 100%; min-width: 0; }
.lj-note { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border-radius: var(--r-md); background: var(--soft); color: var(--muted); font-size: 13px; }
.lj-store-hero { border-radius: var(--r-xl); padding: 22px; color: #fff; background: linear-gradient(130deg, var(--g2), var(--g1) 55%, var(--g3)); display: grid; gap: 10px; margin-bottom: 16px; }
.lj-store-hero h3 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.lj-store-hero .lj-pill { background: rgba(0,0,0,.2); color: #fff; }
.lj-store-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.lj-store-tools input { flex: 1; }
.lj-store .lj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.lj-items { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--raised); }
.lj-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); }
.lj-item:last-child { border-bottom: 0; }
.lj-item__img { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; background: var(--strong); flex: none; display: grid; place-items: center; color: var(--accent-text); }
.lj-item__img img { width: 100%; height: 100%; object-fit: cover; }
.lj-item__t { flex: 1; min-width: 0; }
.lj-item__t b { display: block; }
.lj-item__t span { font-size: 13px; color: var(--muted); }
.lj-more-btn { justify-self: start; }
.lj-added { display: grid; gap: 16px; }
.lj-added__head { display: flex; align-items: center; gap: 14px; }
.lj-added__head .lj-item__img { position: relative; width: 64px; height: 64px; overflow: visible; }
.lj-added__head .lj-item__img img { border-radius: 12px; }
.lj-added__ok { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--success); color: #fff; border: 2px solid var(--bg, #fff); font-size: 14px; font-style: normal; animation: lj-pop .45s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.lj-added__k { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--success); }
.lj-goal { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--soft); }
.lj-goal p { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; }
.lj-goal p ion-icon { color: var(--accent-text); font-size: 18px; }
.lj-goal__bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lj-goal__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--g1), var(--g2)); transition: width .6s ease; }
.lj-more { display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.lj-more__card { display: grid; gap: 4px; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--raised); color: inherit; font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; animation: lj-slidein .4s ease both; }
.lj-more__card:hover { border-color: var(--accent); }
.lj-more__card b { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.lj-more__card > span:last-child { font-weight: 800; }
.lj-more__img { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--strong); display: grid; place-items: center; color: var(--accent-text); font-size: 26px; }
.lj-more__img img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .lj-added__ok, .lj-more__card { animation: none; } }
.lj-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lj-mode { position: relative; display: grid; gap: 4px; padding: 14px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--raised); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.lj-mode.on { border-color: var(--accent); background: var(--soft); }
.lj-mode:disabled { opacity: .45; cursor: default; }
.lj-mode ion-icon { font-size: 22px; color: var(--accent-text); }
.lj-mode small { color: var(--muted); }
.lj-sum { display: grid; gap: 6px; padding: 14px; border-radius: var(--r-md); background: var(--soft); }
.lj-sum div { display: flex; justify-content: space-between; }
.lj-sum .tot { font-size: 20px; font-weight: 800; }
.lj-steps { display: flex; }
.lj-step { flex: 1; display: grid; justify-items: center; gap: 6px; position: relative; font-size: 12px; font-weight: 600; color: var(--faint); }
.lj-step::before { content: ""; position: absolute; top: 15px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.lj-step:first-child::before { display: none; }
.lj-step.done { color: var(--text); }
.lj-step.done::before { background: var(--accent); }
.lj-step i { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--strong); color: var(--faint); font-style: normal; font-size: 15px; border: 3px solid var(--surface); }
.lj-step.done i { background: var(--accent); color: var(--on-accent); }
.lj-step.now i { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.lj-pix { display: grid; justify-items: center; gap: 10px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--raised); }
.lj-pix__v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.lj-pix__qr { width: 220px; height: 220px; padding: 10px; background: #fff; border-radius: 16px; }
.lj-pix__qr svg { width: 100%; height: 100%; }
.lj-pix__code { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; padding: 10px; border-radius: 10px; background: var(--strong); color: var(--muted); max-height: 70px; overflow: auto; }
.lj-done { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r-lg); color: #fff; background: linear-gradient(120deg, var(--g1), var(--g2) 55%, var(--g3)); animation: lj-pop .6s cubic-bezier(.3,1.6,.5,1) both; }
.lj-done ion-icon { font-size: 34px; }
.lj-orders { display: grid; gap: 10px; }
.lj-order { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--raised); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.lj-order:hover { border-color: var(--accent); }
.lj-badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--soft); color: var(--accent-text); }
.lj-badge.success { background: var(--success-soft); color: var(--success); }
.lj-badge.warning { background: var(--warning-soft); color: var(--warning); }
.lj-badge.danger { background: var(--danger-soft); color: var(--danger); }

@media (max-width: 1000px) {
  .lj-carousel { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
  .lj-grid, .lj-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lj-spot { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lj-frame { padding: 20px 14px 18px; border-radius: var(--r-lg); }
  .lj-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .lj-carousel { grid-auto-columns: 46%; gap: 12px; }
  .r-landscape .lj-carousel { grid-auto-columns: 72%; }
  .lj-grid, .lj-mosaic, .lj-store .lj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lj-mosaic .lj-big { grid-column: span 2; grid-row: auto; }
  .lj-mosaic .lj-big .lj-img { aspect-ratio: 4 / 3; min-height: 0; }
  .lj-list { columns: 1; padding: 4px 14px; }
  .lj-slides { aspect-ratio: 4 / 5; min-height: 0; }
  .lj-slide::after { background: linear-gradient(transparent 30%, rgba(5,8,18,.85)); }
  .lj-slide__txt { right: 20px; }
  .lj-spot__main { min-height: 300px; }
  .lj-pm { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lj-body { padding: 4px 10px 11px; }
  .lj-name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lj-anim .lj-it { opacity: 1; transform: none; transition: none; }
  [class*="mo-"] img, [class*="ta-"], .lj-slide.on .lj-slide__txt > * { animation: none !important; }
}

/* ---- Painel do site: configuracoes com a previa ao lado ---- */
.lj-kpi:hover { border-color: var(--accent); }
@media (max-width: 1180px) {
  .lj-cfg { grid-template-columns: 1fr !important; }
  .lj-cfg > div:last-child { position: static !important; order: -1; }
}

/* Cartoes da mesma linha com a mesma altura; desconto legivel sobre foto. */
.lj-carousel > .lj-it, .lj-grid > .lj-it, .lj-spot__side > .lj-it, .lj-spot > .lj-it { display: flex; }
.lj-carousel > .lj-it > .lj-card, .lj-grid > .lj-it > .lj-card, .lj-spot__side > .lj-it > .lj-card { flex: 1; }
.lj-slide .lj-off, .lj-spot__main .lj-off { background: rgba(255,255,255,.22); color: #fff; }
.lj-slide .lj-price s, .lj-spot__main .lj-price s { color: rgba(255,255,255,.75); opacity: 1; }
@media (max-width: 720px) {
  .lj-fab { right: 12px; top: calc(var(--header-h, 64px) + 8px); padding: 9px 14px 9px 10px; font-size: 14px; }
  .lj-fab__n { min-width: 22px; height: 22px; }
}

/* Carrinho: enderecos cadastrados (ate 3) para a entrega. */
.lj-addrs { display: grid; gap: 8px; margin-bottom: 8px; }
.lj-addr { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--raised); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.lj-addr > ion-icon { font-size: 20px; color: var(--muted); flex-shrink: 0; }
.lj-addr.on { border-color: var(--accent); background: var(--soft); }
.lj-addr.on > ion-icon { color: var(--accent); }
.lj-addr span { display: grid; gap: 2px; min-width: 0; }
.lj-addr small { color: var(--muted); }

/* Carrinho: pagar na entrega/retirada (dinheiro com troco ou cartao). */
.lj-paymeth { display: grid; gap: 10px; margin-top: 12px; }
.lj-paymeth .lj-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lj-paymeth .lj-mode { padding: 10px; }
.lj-money { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0 12px; background: var(--raised); }
.lj-money span { color: var(--muted); font-weight: 700; }
.lj-money input { border: 0; background: transparent; padding: 12px 0; flex: 1; min-width: 0; font: inherit; color: inherit; outline: none; }
.lj-paymeth .lj-chips { padding-bottom: 4px; margin-top: 8px; }
@media (max-width: 420px) { .lj-paymeth .lj-modes { grid-template-columns: 1fr 1fr; } }

/* Produto no celular: foto mais baixa e textos menores para caber na folha. */
@media (max-width: 640px) {
  .lj-gal__main { aspect-ratio: 4 / 3; max-height: 42vh; max-height: 42dvh; }
  .lj-gal__thumb { width: 52px; height: 52px; }
  .lj-info { gap: 10px; }
  .lj-info h3 { font-size: 20px; }
  .lj-info .lj-price b { font-size: 22px; }
  .lj-desc { font-size: 14px; line-height: 1.5; }
  .lj-buy .btn { min-width: 0; }
  .lj-item__t b { overflow-wrap: anywhere; }
}

/* Pedido: desconto da troca de pontos e pontos ganhos. */
.lj-sum .ok { color: var(--success, #15803D); }
.lj-sum .small { font-size: 12.5px; }

/* Fidelidade: faixa do clube, recompensas e troca no carrinho. */
.lj-loybar { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border: 0; border-radius: var(--r-md, 14px); background: linear-gradient(135deg, var(--accent, #2563EB), #7C3AED); color: #fff; text-align: left; cursor: pointer; font: inherit; }
.lj-loybar > span { display: grid; flex: 1; min-width: 0; }
.lj-loybar small { opacity: .9; }
.lj-loybar u { font-size: 13px; font-weight: 700; flex: none; }
.lj-loybal { display: grid; gap: 2px; padding: 14px; border-radius: var(--r-md, 14px); background: var(--soft); }
.lj-loybal b { font-size: 26px; }
.lj-loyrules { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.lj-loycost { display: grid; text-align: right; font-size: 18px; flex: none; }
.lj-loycost small { font-size: 11px; font-weight: 600; color: var(--muted); }
.lj-loycart { display: grid; gap: 6px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-md, 14px); }

/* Escolher recompensa: produto com foto/descricao/preco, desconto so com o valor. */
.lj-rws { display: grid; gap: 10px; }
.lj-rw { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--r-md, 14px); background: var(--raised, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lj-rw:disabled { opacity: .55; cursor: default; }
.lj-rw.on { border-color: var(--accent, #2563EB); }
.lj-rw .lj-item__t { display: grid; gap: 2px; }
.lj-rw__k { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--accent-text, var(--accent)); text-transform: uppercase; letter-spacing: .02em; }
.lj-rw__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lj-rw__big { font-size: 18px; }
.lj-rw__cost { display: grid; justify-items: end; flex: none; text-align: right; }
.lj-rw__cost b { font-size: 18px; }
.lj-rw__cost small { font-size: 11px; color: var(--muted); }
.lj-rw__cost em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--danger, #DC2626); max-width: 110px; }
.lj-rw__cost em.ok { color: var(--success, #15803D); }
.lj-rw--chosen { cursor: default; margin-bottom: 8px; }
.lj-rw.can { border-color: var(--success, #15803D); background: color-mix(in srgb, var(--success, #15803D) 7%, var(--raised, #fff)); }
.lj-rw__cost em { display: inline-flex; align-items: center; gap: 3px; }
.lj-rw__hint { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--success, #15803D); font-weight: 600; }
/* Janela do clube: o mesmo cartao da previa "Como o cliente ve" da aba Fidelidade. */
.lj-loycard { padding: 16px; border-radius: 16px; background: linear-gradient(135deg, var(--accent, #2563EB), #7C3AED); color: #fff; }
.lj-loycard__top { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.lj-loycard__bal { display: block; margin-top: 6px; opacity: .95; }
.lj-loycard ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.lj-loyrw { display: grid; gap: 6px; }
.lj-loyrw__i { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.lj-loyrw__i.can { border-color: var(--success, #15803D); }
.lj-loyrw__i em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--success, #15803D); }

/* Loja do cliente: janelas largas no computador (loja, produto e carrinho). */
@media (min-width: 641px) {
  .modal__panel.lj-wide-store { max-width: min(1180px, calc(100vw - 40px)); }
  .modal__panel.lj-wide-product { max-width: min(1000px, calc(100vw - 40px)); }
  .modal__panel.lj-wide-cart { max-width: min(760px, calc(100vw - 40px)); }
  .modal__panel:is(.lj-wide-store, .lj-wide-product) .modal__head { padding: 20px 26px 12px; }
  .modal__panel:is(.lj-wide-store, .lj-wide-product) .modal__body { padding: 4px 26px 26px; }
  .lj-wide-store .lj-store .lj-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
  .lj-wide-store .lj-store-hero { padding: 26px 28px; }
  .lj-wide-store .lj-store-tools input { max-width: 520px; }
}


/* Adicionais do produto (hamburguer extra, cheddar...): lista compacta, "− 0 +" a direita, ate 10 por item. */
.lj-addpick { display: grid; gap: 6px; margin: 2px 0 4px; }
.lj-addpick__h { display: flex; align-items: baseline; justify-content: space-between; }
.lj-addpick__h small { color: var(--faint); }
.lj-addpick__g { color: var(--muted); font-weight: 700; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; margin-top: 4px; }
.lj-addlist { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.lj-addrow { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 5px 6px 5px 12px; transition: background .2s; }
.lj-addrow + .lj-addrow { border-top: 1px solid var(--line); }
.lj-addrow.on { background: var(--soft); }
.lj-addrow__n { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lj-addrow__p { color: var(--accent-text); font-weight: 700; font-size: 13px; white-space: nowrap; }
.lj-stepper { margin-left: auto; display: inline-flex; align-items: center; border-radius: 999px; background: var(--strong); flex-shrink: 0; }
.lj-stepper button { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 20px; font-weight: 800; line-height: 1; padding: 0; }
.lj-stepper button.plus { background: var(--accent); color: var(--on-accent, #fff); }
.lj-stepper button:disabled { opacity: .35; cursor: default; }
.lj-stepper > b { min-width: 24px; text-align: center; font-size: 15px; }
.lj-stepper--lg button { width: 38px; height: 38px; }
.lj-stepper--lg > b { min-width: 30px; font-size: 17px; }
/* Mais especifico que .lj-pm span (painel.css), que vira grid dentro do produto. */
.lj-addrow .lj-stepper, .lj-qtyrow .lj-stepper { display: inline-flex; gap: 0; }
.lj-addrow .lj-addrow__p { display: inline; gap: 0; }
.lj-qtyrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.lj-addtxt { color: var(--accent-text); font-weight: 700; font-size: 13px; }