/*
 * Loja/Delivery (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; overflow-x: clip; }
.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, .section .lj-sec .lj-title { margin: 0; font-size: min(calc(clamp(24px, 3vw, 34px) * var(--lj-tscale, 1)), 12vw); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--lj-text); overflow-wrap: anywhere; flex: none; }
/* Final colorido (o mesmo acabamento dos titulos das outras secoes da marca). */
.lj-grad { --gt1: color-mix(in srgb, var(--g3, var(--accent)) 88%, #000); --gt2: color-mix(in srgb, var(--g2, var(--accent)) 78%, #000); background: linear-gradient(100deg, var(--gt1), var(--gt2) 50%, var(--gt1)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: lj-gradtext 7s ease-in-out infinite alternate; padding-bottom: .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-theme="dark"] .lj-grad, .lj-on-dark .lj-grad { --gt1: color-mix(in srgb, var(--g3, var(--accent)) 62%, #fff); --gt2: color-mix(in srgb, var(--g1, var(--accent)) 70%, #fff); }
@keyframes lj-gradtext { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.lj-head.is-center { flex-direction: column; align-items: center; text-align: center; }
.lj-head.is-center .lj-sub { margin-left: auto; margin-right: auto; }
.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; isolation: isolate; 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; }
/* --lj-zm: intensidade do zoom (Formato › Zoom do movimento): 0 sem zoom, .4 suave, 1 normal, 1.7 forte. */
@keyframes lj-ken { from { transform: scale(calc(1 + .05 * var(--lj-zm, 1))) translate(0, 0); } to { transform: scale(calc(1 + .2 * var(--lj-zm, 1))) translate(calc(-3% * var(--lj-zm, 1)), calc(-2% * var(--lj-zm, 1))); } }
@keyframes lj-zoom { from { transform: scale(1); } to { transform: scale(calc(1 + .18 * var(--lj-zm, 1))); } }
@keyframes lj-pan { from { transform: scale(calc(1 + .18 * var(--lj-zm, 1))) translateX(calc(-5% * var(--lj-zm, 1))); } to { transform: scale(calc(1 + .18 * var(--lj-zm, 1))) translateX(calc(5% * var(--lj-zm, 1))); } }
@keyframes lj-breathe { from { transform: scale(calc(1 + .02 * var(--lj-zm, 1))); } to { transform: scale(calc(1 + .08 * var(--lj-zm, 1))); } }

/* ---- Formatos ---- */
.lj-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--lj-view, 4) - 1) * var(--lj-gap, 16px)) / var(--lj-view, 4)); gap: var(--lj-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 { --lj-view: 3; }
.lj-grid { display: grid; grid-template-columns: repeat(var(--lj-cols, 4), minmax(0, 1fr)); gap: var(--lj-gap, 18px); }
.lj-mosaic { display: grid; grid-template-columns: repeat(var(--lj-cols, 4), minmax(0, 1fr)); gap: var(--lj-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-static .lj-group { animation: none; }
.lj-list { min-width: 0; 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%; max-width: 100%; min-width: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; break-inside: avoid; transition: transform .2s; }
@media (hover: hover) { .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; }
/* minmax(0, 1fr) e min-width: 0: nome comprido termina em reticencias (sem alargar a linha alem da tela). */
.lj-row__t { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.lj-row__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lj-row__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.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-prod { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; }
.lj-gal { display: grid; gap: 10px; }
/* isolation: a etiqueta (z-index 2) fica presa na foto; antes passava por cima do topo fixo da janela ao rolar (celular). */
.lj-gal__main { position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; background: var(--strong); isolation: isolate; }
.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 { --lj-view: 3; }
  .lj-grid, .lj-mosaic { grid-template-columns: repeat(var(--lj-cols-md, 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: var(--lj-card-sm, 46%); }
  .r-landscape .lj-carousel { grid-auto-columns: 72%; }
  .lj-grid, .lj-mosaic { grid-template-columns: repeat(var(--lj-cols-sm, 2), minmax(0, 1fr)); }
  .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; }
  /* Celular: uma coluna sem multicolunas (mais leve) e a lista longa so desenha o que esta perto da tela. */
  .lj-list { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr); padding: 4px 14px; }
  .lj-list > .lj-row { content-visibility: auto; contain-intrinsic-size: auto 81px; }
  .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-prod { 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-flnote { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.lj-flinfo { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--strong); color: var(--accent-text); cursor: pointer; font-size: 19px; padding: 0; }
.lj-flinfo[aria-expanded="true"] { background: var(--accent); color: var(--on-accent, #fff); }
.lj-flexplain { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--soft); font-size: 13.5px; line-height: 1.5; }
.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; }

/* Categorias acima dos produtos: botoes, abas sublinhadas ou cartoes com emoji. */
.lj-head.is-center + .lj-cats, .lj-head.is-center ~ [data-lj-loy] + .lj-cats { justify-content: center; }
.lj-cats.cs-tabs { gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: 0; margin-bottom: 16px; }
.lj-cats.cs-tabs .lj-chip { border: 0; border-radius: 0; background: none; padding: 10px 14px 12px; color: var(--muted); position: relative; }
.lj-cats.cs-tabs .lj-chip::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--g1, var(--accent)), var(--g2, var(--accent))); transform: scaleX(0); transition: transform .25s ease; }
.lj-cats.cs-tabs .lj-chip.on { color: var(--text); background: none; }
.lj-cats.cs-tabs .lj-chip.on::after { transform: scaleX(1); }
.lj-on-dark .lj-cats.cs-tabs { border-color: rgba(255,255,255,.2); }
.lj-on-dark .lj-cats.cs-tabs .lj-chip { color: rgba(255,255,255,.7); }
.lj-on-dark .lj-cats.cs-tabs .lj-chip.on { color: #fff; }
.lj-cats.cs-cards { gap: 10px; padding-bottom: 16px; }
.lj-cats.cs-cards .lj-chip { display: grid; justify-items: center; gap: 6px; min-width: 92px; padding: 12px 12px 10px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--shadow-sm); }
.lj-cats.cs-cards .lj-chip:hover { transform: translateY(-2px); }
.lj-cats.cs-cards .lj-chip.on { background: linear-gradient(135deg, var(--g1, var(--accent)), var(--g2, var(--accent)) 60%, var(--g3, var(--accent))); border-color: transparent; color: #fff; }
.lj-cat__em { font-size: 26px; line-height: 1; }
.lj-cat__n { font-size: 13px; font-weight: 700; white-space: nowrap; }
/* "Todos": produtos separados por categoria, com o nome acima. */
.lj-group + .lj-group { margin-top: 22px; }
.lj-group__t, .section .lj-group__t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--lj-text); }
.lj-group__t small { font-size: 12px; font-weight: 700; color: var(--lj-muted); background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 2px 8px; border-radius: 999px; }
.lj-group__t::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lj-on-dark .lj-group__t::after { background: rgba(255,255,255,.2); }
.lj-anim.in .lj-group { animation: lj-up .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--gi, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .lj-anim.in .lj-group { animation: none; } }
/* Combo no carrinho e no pedido. */
.lj-combo-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: linear-gradient(120deg, var(--g1, var(--accent)), var(--g2, var(--accent))); vertical-align: 1px; }
.lj-ocombos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }

/* Adicionado ao carrinho: no celular os dois botoes um embaixo do outro
   ("Continuar comprando" nao cabia ao lado de "Ver carrinho"). */
@media (max-width: 560px) {
  .lj-buy--foot { flex-direction: column-reverse; }
  .lj-buy--foot .btn { width: 100%; flex: none; }
}
.lj-buy .btn { white-space: normal; text-align: center; }

/* Escolha dos sabores na lista: barra animada no rodape; os sabores possiveis ficam normais e o resto apagado (sem borda). */
.lj-flbar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 130; width: min(620px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 22px; color: #fff; background: linear-gradient(120deg, var(--g1), var(--g2) 55%, var(--g3)); box-shadow: 0 22px 48px -16px color-mix(in srgb, var(--g2) 85%, transparent), 0 0 0 1px rgba(255,255,255,.18) inset; transform: translateX(-50%); animation: lj-flin .55s cubic-bezier(.3,1.5,.5,1) both; }
.lj-flbar.bump .lj-flbar__go { animation: lj-flbump .6s ease; }
.lj-flbar__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 26px; animation: lj-flspin 2.6s ease-in-out infinite; }
.lj-flbar__t { display: grid; gap: 3px; min-width: 0; flex: 1; }
.lj-flbar__t small { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.lj-flbar__go { font-size: 18px; line-height: 1.15; }
.lj-flbar__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lj-flbar__chip { border: 0; font: inherit; font-size: 12px; font-weight: 700; color: inherit; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.22); cursor: pointer; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lj-flbar__chip.is-base { cursor: default; background: rgba(255,255,255,.34); }
.lj-flbar__x { flex: none; border: 1px solid rgba(255,255,255,.55); background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: 13px; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.lj-flbar__x:hover { background: rgba(255,255,255,.16); }
.lj-flpicking .modal__body { padding-bottom: 130px; }
.lj-flpicking main, .lj-flpicking .site-footer { padding-bottom: 110px; }
.lj-fl-off { opacity: .4; filter: grayscale(.6); pointer-events: none; transition: opacity .3s, filter .3s; }
.lj-flrow { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; background: none; }
.lj-flrow + .lj-flrow, .lj-addrow + .lj-flrow { border-top: 1px solid var(--line); }
.lj-flrow--empty { cursor: pointer; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lj-flrow--empty .lj-addrow__n { color: var(--muted); }
.lj-flrow__go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 13px; color: var(--on-accent, #fff); background: linear-gradient(120deg, var(--g1), var(--g2) 60%, var(--g3)); padding: 8px 12px 8px 14px; border-radius: 999px; box-shadow: 0 8px 18px -10px var(--g2); transition: transform .15s; }
.lj-flrow--empty:hover .lj-flrow__go { transform: translateX(2px); }
.lj-flswap { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 4px 0; }
@keyframes lj-flin { from { opacity: 0; transform: translate(-50%, 40px) scale(.94); } }
@keyframes lj-flbump { 30% { transform: scale(1.08); } 60% { transform: scale(.98); } }
@keyframes lj-flspin { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-14deg); } 90% { transform: rotate(10deg); } }
@media (max-width: 640px) { .lj-flbar { bottom: max(10px, env(safe-area-inset-bottom)); padding: 10px; gap: 10px; border-radius: 18px; } .lj-flbar__ic { width: 38px; height: 38px; font-size: 21px; } .lj-flbar__go { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .lj-flbar, .lj-flbar__ic, .lj-flbar.bump .lj-flbar__go { animation: none; } }

/* Janela do produto: quantidade e Adicionar/Comprar no rodape fixo (fora da area que rola). */
.lj-pfoot { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.lj-pfoot .lj-qtyrow { border: 0; padding: 0; }
.lj-pfoot .lj-buy, .lj-pfoot .lj-buy--stack { flex: 1; flex-direction: row; min-width: 280px; }
.lj-pfoot .lj-buy .btn { flex: 1; width: auto; min-width: 0; }
.lj-pfoot .lj-buy .btn.primary { flex: 1.35; }
@media (min-width: 641px) { .modal__panel.lj-wide-product .modal__foot { padding: 14px 26px 18px; } }
@media (max-width: 640px) {
  .lj-pfoot .lj-qtyrow { width: 100%; justify-content: space-between; }
  .lj-pfoot .lj-buy, .lj-pfoot .lj-buy--stack { min-width: 0; width: 100%; }
  .lj-pfoot .lj-buy .btn { white-space: nowrap; font-size: 14.5px; padding: 0 12px; }
  .lj-hide-sm { display: none; }
}
.lj-flbar__acts { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lj-flbar__back { border: 0; background: #fff; color: var(--g2, #2563EB); font: inherit; font-weight: 800; font-size: 13px; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
@media (max-width: 640px) { .lj-flbar { flex-wrap: wrap; } .lj-flbar__acts { width: 100%; } .lj-flbar__acts button { flex: 1; } }

/* Opcoes da categoria (tipo de massa, borda, tipo de pao): uma escolha por grupo, valor em reais. */
.lj-opts { display: grid; gap: 10px; }
.lj-optrow { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; background: none; cursor: pointer; padding-right: 12px; }
.lj-optrow + .lj-optrow { border-top: 1px solid var(--line); }
.lj-optrow:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lj-optrow.on { background: var(--soft); }
.lj-optrow .lj-addrow__p { margin-left: auto; }
.lj-optrow:not(.on) .lj-addrow__p { color: var(--muted); font-weight: 600; }
.lj-optrow__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--faint); display: grid; place-items: center; transition: border-color .15s; }
.lj-optrow.on .lj-optrow__dot { border-color: var(--accent); }
.lj-optrow.on .lj-optrow__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: lj-optpop .2s ease-out; }
.lj-optrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lj-optpick.lj-need .lj-addlist { border-color: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); animation: lj-optshake .4s ease-in-out; }
.lj-optpick.lj-need .lj-addpick__h small { color: var(--warning); font-weight: 700; }
@keyframes lj-optpop { from { transform: scale(.3); } }
@keyframes lj-optshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .lj-optrow.on .lj-optrow__dot::after, .lj-optpick.lj-need .lj-addlist { animation: none; } }


/* =============================================================================
 * Ajustes de cada formato (Assistente › Formato da vitrine) e os formatos
 * Mural, Revista, Bento, Faixas, Cardapio ilustrado, Circulos, Polaroid,
 * Esteira e Galeria. Classes lx-<ajuste>-<valor> na secao (loja.js).
 * ========================================================================== */
.lj-sec { --lj-gap-base: 16px; --lj-gap: var(--lj-gap-base); --lj-zm: 1; --lj-ov: 1; }
.lj-sec.lx-gap-tight { --lj-gap-base: 8px; }
.lj-sec.lx-gap-airy { --lj-gap-base: 28px; }
.lj-sec.lx-zoom-none { --lj-zm: 0; }
.lj-sec.lx-zoom-soft { --lj-zm: .4; }
.lj-sec.lx-zoom-strong { --lj-zm: 1.7; }
.lj-sec.lx-zoom-none [class*="mo-"] img { animation: none; }
.lj-sec.lx-overlay-none { --lj-ov: 0; }
.lj-sec.lx-overlay-soft { --lj-ov: .55; }
.lj-sec.lx-overlay-strong { --lj-ov: 1; }
/* Cantos: os tokens de raio redefinidos so dentro da secao. */
.lj-sec.lx-corners-square { --r-md: 0px; --r-lg: 0px; --r-xl: 0px; }
.lj-sec.lx-corners-round { --r-md: 18px; --r-lg: 26px; --r-xl: 34px; }
.lj-sec.lx-corners-square .lj-img { border-radius: 0; }
/* Tamanho dos itens (Carrossel, Circulos, Esteira). */
.lj-sec.lx-size-small { --lj-view: 5; --lj-card-sm: 38%; --lj-ci: 84px; --lj-tkw: 150px; }
.lj-sec.lx-size-large { --lj-view: 3; --lj-card-sm: 70%; --lj-ci: 150px; --lj-tkw: 260px; }
.lj-sec.lx-size-large.r-landscape .lj-carousel { --lj-view: 2; }

/* Produto inteiro: a foto nao e cortada; nas fotos grandes, a mesma foto desfocada faz o fundo. */
.lx-imagefit-contain :is(.lj-img, .lj-slide__img, .lj-ban__img, .lj-menu__img, .lj-circle__img, .lj-pola__img, .lj-tk__img) img:not(.lj-blur) { object-fit: contain; }
.lx-imagefit-contain .lj-img { background: var(--raised); }
.lj-blur { position: absolute; inset: -10%; width: 120% !important; height: 120% !important; object-fit: cover; filter: blur(26px) saturate(1.2); opacity: .55; transform: none !important; animation: none !important; }
.lx-imagefit-contain .lj-slide__img img:not(.lj-blur), .lx-imagefit-contain .lj-ban__img img:not(.lj-blur) { position: relative; z-index: 1; }
.lx-imagefit-contain .lj-slide__img, .lx-imagefit-contain .lj-ban__img { background: #0B1020; }

/* Escurecer a foto (Slides, Destaque, Bento, Galeria). */
.lj-slide::after, .lj-spot__main::after { opacity: var(--lj-ov); }
.lj-sec.lx-overlay-strong .lj-slide::after { background: linear-gradient(90deg, rgba(5,8,18,.92), rgba(5,8,18,.55) 60%, rgba(5,8,18,.3)); }

/* Altura (Slides, Destaque, Galeria, Faixas). */
.lj-sec.lx-height-short .lj-slides { aspect-ratio: 3 / 1; min-height: 240px; }
.lj-sec.lx-height-tall .lj-slides { aspect-ratio: 16 / 10; }
.lj-sec.lx-height-short .lj-spot__main { min-height: 280px; }
.lj-sec.lx-height-tall .lj-spot__main { min-height: 520px; }

/* Posicao do texto sobre a foto. */
.lj-sec.lx-textpos-center .lj-slide__txt { left: 8%; right: 8%; justify-items: center; text-align: center; }
.lj-sec.lx-textpos-center .lj-slide__cta { justify-self: center; }
.lj-sec.lx-textpos-center .lj-slide::after { background: radial-gradient(ellipse at center, rgba(5,8,18,.7), rgba(5,8,18,.25) 70%); }
.lj-sec.lx-textpos-right .lj-slide__txt { left: 40%; right: clamp(20px, 5vw, 56px); justify-items: end; text-align: right; }
.lj-sec.lx-textpos-right .lj-slide__cta { justify-self: end; }
.lj-sec.lx-textpos-right .lj-slide::after { background: linear-gradient(270deg, rgba(5,8,18,.82), rgba(5,8,18,.25) 55%, transparent); }
.lj-sec.lx-textpos-right .lj-slide .lj-tagspot { left: auto; right: clamp(20px, 5vw, 56px); }
.lj-sec.lx-textpos-center .lj-spot__main .lj-slide__txt { left: 24px; right: 24px; }
.lj-sec.lx-textpos-right .lj-spot__main .lj-slide__txt { left: 24px; right: 24px; }
/* Abaixo da foto: a foto aparece inteira e o texto fica num painel embaixo. */
.lj-sec.lx-textpos-below .lj-slide { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lj-sec.lx-textpos-below .lj-slide .lj-slide__img { position: relative; inset: auto; }
.lj-sec.lx-textpos-below .lj-slide::after { display: none; }
.lj-sec.lx-textpos-below .lj-slide__txt { position: relative; left: auto; right: auto; bottom: auto; padding: 16px clamp(18px, 4vw, 34px) 18px; background: var(--raised); color: var(--text); grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; }
.lj-sec.lx-textpos-below .lj-slide__txt > :not(.lj-slide__cta):not(.lj-price) { grid-column: 1; }
.lj-sec.lx-textpos-below .lj-slide__txt .lj-price { grid-column: 1; }
.lj-sec.lx-textpos-below .lj-slide__txt .lj-slide__cta { grid-column: 2; grid-row: 1 / span 4; background: var(--accent); color: var(--on-accent); border: 0; }
.lj-sec.lx-textpos-below .lj-slide__name { font-size: clamp(20px, 2.6vw, 30px); }
.lj-sec.lx-textpos-below .lj-slide .lj-price b { font-size: clamp(18px, 2.2vw, 24px); }
.lj-sec.lx-textpos-below .lj-slide .lj-price s { color: var(--muted); }
.lj-sec.lx-textpos-below .lj-slide .lj-off { background: var(--soft); color: var(--accent-text); }
.lj-sec.lx-textpos-below .lj-slides { background: var(--raised); border: 1px solid var(--line); }
.lj-sec.lx-textpos-below .lj-dots, .lj-sec.lx-textpos-below .lj-arrows { top: 18px; bottom: auto; }
.lj-sec.lx-textpos-below .lj-dots { right: auto; left: 18px; }
.lj-sec.lx-textpos-below .lj-slides { aspect-ratio: 16 / 9; }
.lj-sec.lx-textpos-below.lx-height-short .lj-slides { aspect-ratio: 5 / 2; }
.lj-sec.lx-textpos-below.lx-height-tall .lj-slides { aspect-ratio: 4 / 3; }

/* Troca entre produtos (Slides e Galeria). */
.lj-sec.lx-transition-slide .lj-slide { transform: translateX(6%); transition: opacity .8s ease, visibility .8s, transform .9s cubic-bezier(.2,.8,.2,1); }
.lj-sec.lx-transition-zoom .lj-slide { transform: scale(1.08); transition: opacity .9s ease, visibility .9s, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.lj-sec:is(.lx-transition-slide, .lx-transition-zoom) .lj-slide.on { transform: none; }

/* Descricao curta (Slides, Destaque, Revista, Faixas). */
.lj-desc { font-size: 15px; line-height: 1.45; opacity: .9; max-width: 560px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Lista de precos: 1 ou 2 colunas no computador. */
.lj-sec.lay-list .lj-list { columns: var(--lj-cols, 2); }

/* ---- Mural: fotos inteiras, cada uma na sua altura ---- */
.lj-masonry { columns: var(--lj-cols, 4); column-gap: var(--lj-gap); }
.lj-masonry > .lj-it { break-inside: avoid; margin-bottom: var(--lj-gap); display: block; }
.lj-masonry .lj-img { aspect-ratio: auto !important; }
.lj-masonry .lj-img img { position: relative; height: auto; display: block; }
.lj-masonry .lj-img .lj-ph { position: relative; aspect-ratio: 1; }

/* ---- Revista ---- */
.lj-mag { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(var(--lj-gap) + 10px); align-items: stretch; }
.lj-mag.is-right > .lj-it { order: 2; }
.lj-mag > .lj-it { display: flex; }
.lj-mag__main { flex: 1; display: grid; grid-template-rows: minmax(260px, 1fr) auto; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--raised); color: var(--lj-text); text-align: left; font: inherit; cursor: pointer; }
.lj-mag__img { position: relative; overflow: hidden; min-height: 300px; background: var(--strong); }
.lj-mag__img img:not(.lj-blur) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-imagefit-contain .lj-mag__img img:not(.lj-blur) { object-fit: contain; z-index: 1; }
.lj-mag__img .lj-tagspot { position: absolute; top: 14px; left: 14px; z-index: 2; }
.lj-mag__txt { display: grid; gap: 8px; padding: 20px 22px 22px; }
.lj-mag__txt .lj-slide__cat { color: var(--accent-text); opacity: 1; }
.lj-mag__name { margin: 0; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.02em; line-height: 1.1; }
.lj-mag__txt .lj-slide__cta { background: var(--accent); color: var(--on-accent); border: 0; }
.lj-mag__list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 4px; counter-reset: none; }
.lj-mag__list button { display: grid; grid-template-columns: auto 64px minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--lj-text); font: inherit; text-align: left; cursor: pointer; transition: transform .2s; }
@media (hover: hover) { .lj-mag__list button:hover { transform: translateX(4px); } }
.lj-mag__n { font-size: 26px; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(140deg, var(--g1), var(--g3)); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 38px; }
.lj-mag__th { position: relative; width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; background: var(--strong); display: grid; place-items: center; color: var(--accent-text); }
.lj-mag__th img { width: 100%; height: 100%; object-fit: cover; }
.lj-mag__t { display: grid; gap: 2px; min-width: 0; }
.lj-mag__t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lj-mag__t .lj-price b { font-size: 15px; }
.lj-mag__more { margin-top: calc(var(--lj-gap) + 10px); }

/* ---- Bento ---- */
.lj-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; grid-auto-flow: dense; gap: var(--lj-gap); }
.lj-bento > .lj-it { display: flex; min-height: 0; }
.lj-bento .lj-b2x2 { grid-column: span 2; grid-row: span 2; }
.lj-bento .lj-b2x1 { grid-column: span 2; }
.lj-bento .lj-b1x2 { grid-row: span 2; }
.lj-tile { position: relative; flex: 1; overflow: hidden; border: 0; padding: 0; border-radius: var(--r-xl); background: #0B1020; color: #fff; font: inherit; text-align: left; cursor: pointer; isolation: isolate; }
.lj-tile .lj-slide__img { position: absolute; inset: 0; overflow: hidden; }
.lj-tile .lj-slide__img img:not(.lj-blur) { position: relative; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.lx-imagefit-contain .lj-tile .lj-slide__img img:not(.lj-blur) { object-fit: contain; }
@media (hover: hover) { .lj-tile:hover .lj-slide__img img:not(.lj-blur) { transform: scale(1.05); } }
.lj-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(5,8,18,.85)); opacity: var(--lj-ov); }
.lj-tile__txt { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: grid; gap: 2px; }
.lj-tile__txt b { font-size: 16px; line-height: 1.2; }
.lj-b2x2 .lj-tile__txt b { font-size: clamp(20px, 2.4vw, 28px); }
.lj-tile .lj-price b { color: #fff; }
.lj-tile .lj-price s { color: rgba(255,255,255,.75); }
.lj-tile .lj-off { background: rgba(255,255,255,.22); color: #fff; }
.lj-tile .lj-tagspot { top: 12px; left: 12px; }
.lj-sec.lx-overlay-none .lj-tile__txt { text-shadow: 0 1px 10px rgba(0,0,0,.6); }

/* ---- Faixas ---- */
.lj-bans { display: grid; gap: var(--lj-gap); }
.lj-bans > .lj-it { display: flex; }
.lj-ban { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; width: 100%; padding: 0; border-radius: var(--r-xl); overflow: hidden; color: var(--lj-text); font: inherit; text-align: left; cursor: pointer; transition: transform .25s, box-shadow .25s; }
@media (hover: hover) { .lj-ban:hover { transform: translateY(-3px); } }
.lj-ban.is-right .lj-ban__img { order: 2; }
.lj-ban__img { position: relative; overflow: hidden; min-height: 240px; background: var(--strong); }
.lx-height-short .lj-ban__img { min-height: 170px; }
.lx-height-tall .lj-ban__img { min-height: 340px; }
.lj-ban__img img:not(.lj-blur) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-imagefit-contain .lj-ban__img img:not(.lj-blur) { position: absolute; }
.lj-ban__img .lj-tagspot { position: absolute; top: 12px; left: 12px; z-index: 2; }
.lj-ban__txt { display: grid; align-content: center; gap: 8px; padding: clamp(18px, 3vw, 34px); }
.lj-ban__txt .lj-slide__cat { color: var(--accent-text); opacity: 1; }
.cs-dark .lj-ban__txt .lj-slide__cat, .cs-color .lj-ban__txt .lj-slide__cat, .cs-glass .lj-ban__txt .lj-slide__cat { color: inherit; opacity: .8; }
.lj-ban__name { margin: 0; font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.02em; line-height: 1.12; }
.lj-ban .lj-price b { font-size: 20px; }
.lj-ban .lj-slide__cta { background: var(--accent); color: var(--on-accent); border: 0; }
.cs-color .lj-ban .lj-slide__cta, .lj-ban.cs-color .lj-slide__cta { background: rgba(255,255,255,.22); color: #fff; }
.cs-minimal.lj-ban { border-radius: var(--r-xl); }

/* ---- Cardapio ilustrado ---- */
.lj-menu { display: grid; grid-template-columns: repeat(var(--lj-cols, 2), minmax(0, 1fr)); gap: 6px calc(var(--lj-gap) + 18px); }
.lj-menu__it { display: flex; align-items: center; gap: 14px; padding: 12px 0; border: 0; border-bottom: 1px dashed var(--line-strong); background: none; color: var(--lj-text); font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: transform .2s; }
@media (hover: hover) { .lj-menu__it:hover { transform: translateX(3px); } }
.lj-menu__img { position: relative; flex: none; width: 92px; height: 92px; border-radius: var(--r-lg); overflow: hidden; background: var(--strong); display: grid; place-items: center; color: var(--accent-text); }
.lj-menu__img img { width: 100%; height: 100%; object-fit: cover; }
.lj-menu__img .lj-soldout { font-size: 10px; }
.lj-menu__t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lj-menu__top { display: flex; align-items: baseline; gap: 10px; }
.lj-menu__top b { flex: 1; min-width: 0; font-size: 16px; line-height: 1.25; }
.lj-menu__top em { font-style: normal; font-weight: 800; color: var(--accent-text); white-space: nowrap; }
.lj-on-dark .lj-menu__top em { color: #fff; }
.lj-menu__d { font-size: 13px; line-height: 1.45; color: var(--lj-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- Circulos ---- */
.lj-circles { display: flex; gap: var(--lj-gap); overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lj-circle { flex: none; width: calc(var(--lj-ci, 112px) + 16px); display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--lj-text); font: inherit; text-align: center; cursor: pointer; scroll-snap-align: start; }
.lj-circle__img { position: relative; width: var(--lj-ci, 112px); height: var(--lj-ci, 112px); border-radius: 50%; overflow: hidden; padding: 3px; background: linear-gradient(140deg, var(--g1), var(--g2), var(--g3)); transition: transform .25s; }
.lj-circle__img img, .lj-circle__img .lj-ph { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--raised); border: 3px solid var(--surface); position: relative; }
@media (hover: hover) { .lj-circle:hover .lj-circle__img { transform: scale(1.06) rotate(-3deg); } }
.lj-circle b { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
.lj-circle em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--accent-text); }
.lj-on-dark .lj-circle em { color: #fff; }

/* ---- Polaroid ---- */
.lj-polas { display: grid; grid-template-columns: repeat(var(--lj-cols, 4), minmax(0, 1fr)); gap: calc(var(--lj-gap) + 8px); padding: 10px 4px; }
.lj-polas > .lj-it { display: flex; }
.lj-sec { --lj-tilt: 2.5; }
.lj-sec.lx-tilt-none { --lj-tilt: 0; }
.lj-sec.lx-tilt-strong { --lj-tilt: 5.5; }
.lj-pola { flex: 1; display: grid; gap: 10px; padding: 10px 10px 16px; border: 0; background: #fff; color: #1d2330; font: inherit; text-align: center; cursor: pointer; box-shadow: 0 14px 30px -16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.08); transform: rotate(calc(var(--rot, 0) * var(--lj-tilt) * 1deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
@media (hover: hover) { .lj-pola:hover { transform: rotate(0deg) scale(1.04); box-shadow: 0 24px 44px -18px rgba(0,0,0,.5); } }
.lj-pola__img { position: relative; aspect-ratio: 1; overflow: hidden; background: #eef0f4; display: grid; place-items: center; color: #8a93a3; }
.r-portrait .lj-pola__img { aspect-ratio: 3 / 4; }
.r-landscape .lj-pola__img { aspect-ratio: 4 / 3; }
.lj-pola__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lj-pola__img .lj-tagspot { position: absolute; top: 8px; left: 8px; }
.lj-pola__t { display: grid; gap: 2px; }
.lj-pola__t b { font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive; font-size: 21px; font-weight: 700; line-height: 1.1; }
.lj-pola__t em { font-style: normal; font-weight: 800; font-size: 14px; color: color-mix(in srgb, var(--g2) 80%, #000); }

/* ---- Esteira ---- */
.lj-ticker { overflow: hidden; margin-inline: -4px; padding: 6px 0 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.lj-ticker__track { display: flex; gap: var(--lj-gap); width: max-content; animation: lj-tick calc(var(--lj-tk, 30s) * var(--lj-speed, 1)) linear infinite; }
.lj-ticker.is-right .lj-ticker__track { animation-direction: reverse; }
.lj-ticker:hover .lj-ticker__track, .lj-ticker:focus-within .lj-ticker__track { animation-play-state: paused; }
@keyframes lj-tick { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--lj-gap) / 2)); } }
.lj-tk { flex: none; width: var(--lj-tkw, 200px); display: grid; gap: 6px; padding: 8px 8px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--raised); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .2s; }
@media (hover: hover) { .lj-tk:hover { transform: translateY(-4px); } }
.lj-tk__img { position: relative; aspect-ratio: 1; border-radius: calc(var(--r-lg) - 4px); overflow: hidden; background: var(--strong); display: grid; place-items: center; color: var(--accent-text); }
.r-portrait .lj-tk__img { aspect-ratio: 3 / 4; }
.r-landscape .lj-tk__img { aspect-ratio: 4 / 3; }
.lj-tk__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lj-tk__img .lj-tagspot { position: absolute; top: 8px; left: 8px; }
.lj-tk b { font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 2px; }
.lj-tk em { font-style: normal; font-weight: 800; font-size: 14px; color: var(--accent-text); padding-inline: 2px; }

/* ---- Galeria ---- */
.lj-gly { display: grid; gap: 12px; }
.lj-gly.th-side { grid-template-columns: minmax(0, 1fr) 112px; align-items: stretch; }
.lj-gly__stage { position: relative; }
.lj-gly__thumbs { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.lj-gly.th-side .lj-gly__thumbs { flex-direction: column; overflow-x: hidden; overflow-y: auto; height: 0; min-height: 100%; }
.lj-thumb.lj-dot { position: relative; flex: none; width: 92px; height: 72px; border-radius: var(--r-md); overflow: hidden; padding: 0; background: var(--strong); opacity: .55; border: 2px solid transparent; transition: opacity .25s, border-color .25s, transform .25s; }
.lj-gly.th-side .lj-thumb.lj-dot { width: 100%; height: 84px; }
.lj-thumb.lj-dot.on { width: 92px; opacity: 1; border-color: var(--accent); background: var(--strong); }
.lj-gly.th-side .lj-thumb.lj-dot.on { width: 100%; }
.lj-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .lj-thumb.lj-dot:hover { opacity: 1; transform: translateY(-2px); } }

@media (max-width: 1000px) {
  .lj-masonry { columns: var(--lj-cols-md, 3); }
  .lj-polas, .lj-menu { grid-template-columns: repeat(var(--lj-cols-md, 3), minmax(0, 1fr)); }
  .lj-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lj-mag { grid-template-columns: minmax(0, 1fr); }
  .lj-mag.is-right > .lj-it { order: 0; }
}
@media (max-width: 720px) {
  .lj-sec { --lj-gap: calc(var(--lj-gap-base) * .75); }
  .lj-masonry { columns: var(--lj-cols-sm, 2); }
  .lj-polas { grid-template-columns: repeat(var(--lj-cols-sm, 2), minmax(0, 1fr)); gap: 16px; }
  .lj-pola__t b { font-size: 18px; }
  .lj-menu { grid-template-columns: minmax(0, 1fr); }
  .lj-menu__img { width: 76px; height: 76px; }
  .lj-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .lj-bento .lj-b1x2 { grid-row: span 1; }
  .lj-ban { grid-template-columns: minmax(0, 1fr); }
  .lj-ban.is-right .lj-ban__img { order: 0; }
  .lj-ban__img { min-height: 200px; }
  .lx-height-short .lj-ban__img { min-height: 150px; }
  .lx-height-tall .lj-ban__img { min-height: 280px; }
  .lj-gly.th-side { grid-template-columns: minmax(0, 1fr); }
  .lj-gly.th-side .lj-gly__thumbs { flex-direction: row; overflow-x: auto; height: auto; min-height: 0; }
  .lj-gly.th-side .lj-thumb.lj-dot, .lj-gly.th-side .lj-thumb.lj-dot.on { width: 92px; height: 72px; }
  .lj-thumb.lj-dot, .lj-thumb.lj-dot.on { width: 74px; height: 58px; }
  .lj-sec.lx-height-short .lj-slides { aspect-ratio: 1 / 1; min-height: 0; }
  .lj-sec.lx-height-tall .lj-slides { aspect-ratio: 3 / 4; }
  .lj-sec.lx-textpos-right .lj-slide__txt, .lj-sec.lx-textpos-center .lj-slide__txt { left: 20px; right: 20px; }
  .lj-sec.lx-textpos-right .lj-slide::after, .lj-sec.lx-textpos-center .lj-slide::after { background: linear-gradient(transparent 30%, rgba(5,8,18,.85)); }
  .lj-sec.lx-textpos-below .lj-slides { aspect-ratio: 4 / 5; }
  .lj-sec.lx-textpos-below .lj-slide__txt { grid-template-columns: minmax(0, 1fr); }
  .lj-sec.lx-textpos-below .lj-slide__txt .lj-slide__cta { grid-column: 1; grid-row: auto; justify-self: start; }
  .lj-desc { font-size: 14px; -webkit-line-clamp: 2; }
  .lj-mag__img { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .lj-ticker__track { animation: none; }
  .lj-ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Faixas que deslizam na horizontal: nunca mostram a barra vertical (o
   cartao que sobe ou cresce ao passar o mouse nao cria rolagem para baixo). */
.lj-carousel, .lj-circles, .lj-chips, .lj-gly__thumbs, .lj-ticker, .lj-more { overflow-y: hidden; }
.lj-circles { padding-top: 8px; }
.lj-gly.th-side .lj-gly__thumbs { overflow-y: auto; scrollbar-width: none; }
.lj-gly.th-side .lj-gly__thumbs::-webkit-scrollbar { display: none; }
@media (max-width: 720px) { .lj-gly.th-side .lj-gly__thumbs { overflow-y: hidden; } }

/* Duracao do servico (ou outra informacao curta) abaixo do nome. */
.lj-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--lj-muted); }
.lj-slide__txt .lj-meta, .lj-tile .lj-meta { color: inherit; opacity: .85; }
.lj-menu__t .lj-meta { font-size: 12px; }

/* Slides e Galeria: texto ao lado da foto (metade texto, metade foto). */
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slides { background: var(--raised); border: 1px solid var(--line); }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide::after { display: none; }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide .lj-slide__img { position: relative; inset: auto; grid-row: 1; }
.lj-sec.lx-textpos-side_right .lj-slide .lj-slide__img { grid-column: 1; }
.lj-sec.lx-textpos-side_left .lj-slide .lj-slide__img { grid-column: 2; }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide__txt { position: relative; left: auto; right: auto; bottom: auto; grid-row: 1; align-content: center; padding: clamp(22px, 4vw, 52px); background: var(--raised); color: var(--text); }
.lj-sec.lx-textpos-side_right .lj-slide__txt { grid-column: 2; }
.lj-sec.lx-textpos-side_left .lj-slide__txt { grid-column: 1; }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide__cat { color: var(--accent-text); opacity: 1; }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide__name { font-size: clamp(24px, 3vw, 38px); }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide .lj-price s { color: var(--muted); }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide .lj-off { background: var(--soft); color: var(--accent-text); }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide__cta { background: var(--accent); color: var(--on-accent); border: 0; backdrop-filter: none; }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-dot { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-dot.on { background: var(--accent); }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-thumb.lj-dot { background: var(--strong); }
.lj-sec.lx-textpos-side_left .lj-dots { right: auto; left: calc(clamp(22px, 4vw, 52px)); }
.lj-sec.lx-textpos-side_right .lj-dots { right: clamp(22px, 4vw, 52px); }
.lj-sec.lx-textpos-side_left .lj-slide .lj-tagspot { left: calc(50% + 18px); }
.lj-sec.lx-textpos-side_right .lj-arrows { right: 18px; }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-arrow { background: rgba(5,8,18,.5); }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slides { aspect-ratio: 2 / 1; }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right).lx-height-short .lj-slides { aspect-ratio: 5 / 2; }
.lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right).lx-height-tall .lj-slides { aspect-ratio: 3 / 2; }
@media (max-width: 720px) {
  /* Celular: a foto em cima e o texto embaixo (lado a lado ficaria apertado). */
  .lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide .lj-slide__img { grid-column: 1; grid-row: 1; }
  .lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slide__txt { grid-column: 1; grid-row: 2; padding: 16px 18px 18px; }
  .lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-slides, .lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right).lx-height-short .lj-slides, .lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right).lx-height-tall .lj-slides { aspect-ratio: 4 / 5; }
  .lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-dots { top: 16px; bottom: auto; left: 16px; right: auto; }
  .lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-dot { background: rgba(255,255,255,.6); }
  .lj-sec:is(.lx-textpos-side_left, .lx-textpos-side_right) .lj-dot.on { background: #fff; }
  .lj-sec.lx-textpos-side_left .lj-slide .lj-tagspot { left: 16px; top: 44px; }
}

/* Sem foto nos formatos de foto grande (servicos sem imagem, por exemplo): degrade da marca com o icone. */
:is(.lj-slide__img, .lj-ban__img, .lj-mag__img, .lj-thumb) > .lj-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(40px, 6vw, 72px); color: rgba(255,255,255,.88); background: linear-gradient(135deg, var(--g1, var(--accent)), var(--g2, var(--accent)) 55%, var(--g3, var(--accent))); }
.lj-thumb > .lj-ph { font-size: 22px; }
/* Texto abaixo ou ao lado: a foto ocupa a linha inteira da grade (sem foto, o
   botao nao estica a linha sozinho e o espaco da foto ficava com altura 0). */
.lj-sec:is(.lx-textpos-below, .lx-textpos-side_left, .lx-textpos-side_right) .lj-slide > .lj-slide__img { height: 100%; }

/* Previa dos assistentes: a troca aparece na hora (a entrada so na etapa Animacoes). */
.lj-instant .lj-it, .lj-instant .lj-group { transition: none !important; animation: none !important; }