/* =========================================================================
   Acordes de Aromas — estilo mobile
   Carregado apenas em telas pequenas via media="(max-width: 820px)".
   Ajusta a navegação, tipografia e grades para o celular.
   ========================================================================= */

/* Trava o overflow horizontal: impede que a página role para os lados
   ou "diminua o zoom" quando algum elemento largo (ex.: a fileira de
   categorias) tenta ultrapassar a largura da tela. */
html,body{max-width:100%;overflow-x:hidden}
body{font-size:16px}
.wrap{padding:0 20px}

/* ---------- navegação mobile ---------- */
.nav-toggle{display:flex;margin-left:auto;order:3}
.header-inner{gap:1rem;min-height:64px;padding:.6rem 20px}
.brand img{height:48px}
.header-actions{margin-left:0;gap:.9rem;order:2}

.main-nav{
  position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;
  background:var(--cream);flex-direction:column;gap:0;padding:5rem 2rem 2rem;
  box-shadow:-20px 0 50px -20px rgba(94,63,40,.4);transition:right .32s ease;
  margin-left:0;z-index:85;align-items:flex-start;
}
.main-nav.open{right:0}
.main-nav a{font-size:1.05rem;letter-spacing:.1em;padding:1rem 0;width:100%;border-bottom:1px solid var(--line-soft)}
.main-nav a::after{display:none}
.nav-backdrop{position:fixed;inset:0;background:rgba(61,42,28,.4);z-index:80;opacity:0;pointer-events:none;transition:opacity .3s}
.nav-backdrop.show{opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.announcement{font-size:.6rem;letter-spacing:.1em;padding:.55rem 14px}

/* ---------- home ---------- */
.hero{padding:2.5rem 0 1rem}
.hero-grid{grid-template-columns:1fr;gap:2rem}
.hero-visual{order:-1}
.hero-visual .frame{aspect-ratio:1/1;border-radius:180px 180px 20px 20px;max-width:360px;margin:0 auto}
.hero h1{font-size:clamp(2.6rem,13vw,3.6rem)}
.hero-text{max-width:100%;font-size:1.05rem}
.hero-cta{flex-direction:column}
.hero-cta .btn{width:100%;justify-content:center}
.hero-orb{display:none}

.notes-strip{margin:2.5rem 0 0;padding:1.8rem 0}
.notes-labels{padding:0}
.note-label .n{font-size:.95rem}
.note-label .k{font-size:.6rem;letter-spacing:.16em}

.section{padding:3rem 0}
.section-head{margin-bottom:2rem}

/* grades */
.product-grid,.product-grid.cols-4{grid-template-columns:1fr 1fr;gap:1rem}
.trust-row{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
.banner-cta{padding:2.2rem 1.5rem}

/* ---------- produtos ---------- */
.shop-toolbar{flex-direction:column;align-items:stretch}
.search-box{width:100%}
.search-box input{width:100%}
.cat-cloud{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;max-width:100%;scrollbar-width:none}
.cat-cloud::-webkit-scrollbar{display:none}
.cat-chip{white-space:nowrap;flex-shrink:0}

/* detalhe */
.product-detail{grid-template-columns:1fr;gap:1.8rem;padding:1.5rem 0 3rem}
.pd-media{position:static}
.pd-actions{flex-direction:column}
.pd-actions .btn{width:100%;justify-content:center}

/* sobre */
.about-row.cols-2{grid-template-columns:1fr}
.about-block.text{padding:1.8rem}

/* contato */
.contact-grid{grid-template-columns:1fr;gap:1.8rem}

/* carrinho / checkout */
.cart-layout{grid-template-columns:1fr;gap:1.5rem}
.summary{position:static}
.cart-item{grid-template-columns:70px 1fr;gap:.9rem}
.cart-item .ci-thumb{width:70px;height:70px}
.ci-price{grid-column:2;text-align:left;margin-top:.5rem}
.cart-item .ci-price{text-align:right}
.field-row,.field-row-3{grid-template-columns:1fr}
.form-section{padding:1.5rem}

/* pedido */
.pix-box{padding:1.5rem}
.pix-box img{width:200px;height:200px}
.pix-code{flex-direction:column}

/* rodapé */
.footer-grid{grid-template-columns:1fr 1fr;gap:2rem 1.5rem;padding:3rem 20px 2rem}
.footer-brand{grid-column:1 / -1}
.footer-base-inner{flex-direction:column;gap:.7rem;text-align:center}

.whats-float{bottom:18px;right:18px;width:52px;height:52px}

/* legal */
.legal{padding:2rem 0 3rem}
.legal h1{font-size:2rem}

.notfound h1{font-size:4.5rem}

/* ---------- admin (mobile) ---------- */
.admin-shell{grid-template-columns:1fr}
.admin-sidebar{position:fixed;top:0;left:-100%;width:80%;max-width:290px;z-index:80;transition:left .3s ease}
.admin-sidebar.open{left:0}
.mobile-admin-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--cream);cursor:pointer}
.mobile-admin-toggle svg{width:20px;height:20px;color:var(--cocoa)}
.admin-main{padding:1.2rem 1.1rem 3rem}
.admin-topbar h1{font-size:1.4rem}
.stat-grid{grid-template-columns:1fr 1fr;gap:.8rem}
.about-builder{grid-template-columns:1fr}
.add-block-panel{position:static}
.form-grid-2{grid-template-columns:1fr}
.admin-table{display:block;overflow-x:auto;white-space:nowrap}
.admin-backdrop{position:fixed;inset:0;background:rgba(61,42,28,.4);z-index:75;opacity:0;pointer-events:none;transition:.3s}
.admin-backdrop.show{opacity:1;pointer-events:auto}

/* v2 — responsivo: contas, timeline, conta do cliente */
.account-grid{grid-template-columns:1fr;gap:1.2rem}
.auth-card{padding:1.8rem 1.4rem}
.nav-account-mobile{display:block !important;color:var(--brass) !important;font-weight:500}
.order-timeline{max-width:100%;gap:.2rem}
.order-timeline .ot-step span{font-size:.62rem;max-width:60px}
.checkout-account{flex-wrap:wrap}
.ci-update-form{gap:.4rem}
.order-row{flex-wrap:wrap}
.cart-item .ci-unit{text-align:right}