/* ===== Lemury custom overrides (inline via static_inline = sempre fresco) ===== */
/* ==== COR DA MARCA: CORAL (revertido do rosé a pedido do cliente). ==== */
:root{ --coral:#FF5A3C; --coral-dark:#e8462a; }

/* ===== Páginas institucionais (Sobre, Trocas, FAQ, Privacidade...) — cara Lemury ===== */
.page-header{ text-align:center; margin:34px 0 4px; }
.page-header .breadcrumbs, .page-header nav, .page-header ol{ justify-content:center; display:flex; flex-wrap:wrap; }
.page-header h1{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; font-size:34px; color:var(--ink,#111); letter-spacing:.2px; }
.user-content{ max-width:760px; margin:0 auto; font-family:var(--body-font,'DM Sans'),sans-serif; color:#3a3a3a; line-height:1.75; font-size:15.5px; }
.user-content h2{ font-family:var(--heading-font,'Space Grotesk'),sans-serif; font-size:21px; font-weight:600; color:var(--ink,#111); margin:36px 0 10px; }
.user-content h3{ font-family:var(--heading-font,'Space Grotesk'),sans-serif; font-size:16.5px; font-weight:600; color:var(--ink,#111); margin:26px 0 8px; }
.user-content p{ margin:0 0 14px; }
.user-content ul, .user-content ol{ margin:0 0 16px; padding-left:22px; }
.user-content li{ margin:0 0 7px; }
.user-content a{ color:var(--coral,#FF5A3C); text-decoration:underline; }
.user-content strong{ color:var(--ink,#111); font-weight:600; }
.user-content hr{ border:0; border-top:1px solid #ececec; margin:28px 0; }
.user-content small{ color:#8a8a8a; }
@media(max-width:760px){ .page-header h1{ font-size:27px; } .user-content{ font-size:15px; padding:0 2px; } }

/* ===== Hover do card: só troca p/ 2ª imagem se ela existir (senão ficava bloco cinza) ===== */
.card:hover .thumb .img1{ opacity:1 !important; }
.card.has-hover-img:hover .thumb .img1{ opacity:0 !important; }
.card:not(.has-hover-img):hover .thumb .img1{ transform:scale(1.04); }

/* ==== Lemury: PDP — imagem principal (swiper nativo) preenche o .gallery-main ==== */
.gallery-main .swiper-container{ width:100%; height:100%; }
.gallery-main .swiper-wrapper{ height:auto; }
.gallery-main .js-product-slide-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gallery-main img{ aspect-ratio:auto; }
.product .gallery-main{ background:var(--soft, #f6f5f3); border-radius:12px; overflow:hidden; }
/* ==== Lemury: PDP — produto com 1 imagem (sem coluna de thumbs) ocupa largura total ==== */
.product .gallery .gallery-main.w-100{ grid-column: 1 / -1; width:100%; }
.product .gallery-main .swiper-container,
.product .gallery-main .swiper-wrapper,
.product .gallery-main .swiper-slide{ width:100%; }
/* ==== Lemury: PDP com 1 imagem (sem thumbs) — galeria em bloco, imagem grande ==== */
.product .gallery.gallery-single{ display:block !important; }
.product .gallery.gallery-single .gallery-main{ display:block !important; width:100% !important; max-width:520px !important; }
.product .gallery.gallery-single .gallery-main img{ width:100% !important; height:auto !important; aspect-ratio:3/4; object-fit:cover; }
/* ==== Lemury: PDP — galeria (flex resolve 1 ou várias imagens) + colunas sem squeeze ==== */
.product{ grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) !important; align-items:start; }
.pinfo{ min-width:0; }
/* Galeria em GRID (igual ao proto-pages) — era display:flex !important, mas no flex a coluna de
   thumbs define a altura da linha (12 fotos estouravam a página) e o truque height:0/min-height:100%
   que limita a coluna à altura da foto SÓ funciona em grid. Aqui ficam só os retoques visuais. */
.gallery{ display:grid !important; grid-template-columns:84px minmax(0,1fr); gap:14px; }
.gallery .thumbs img{ width:84px; height:106px; object-fit:cover; border-radius:8px; cursor:pointer; }
.gallery .gallery-main{ min-width:0; position:relative; border-radius:14px; overflow:hidden; }
.gallery-main img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block; }
@media(max-width:900px){
  .product{ grid-template-columns:1fr !important; gap:20px; }
  .gallery{ grid-template-columns:1fr !important; }
  .gallery .gallery-main{ order:1; }
  .gallery .thumbs{ order:2; height:auto; min-height:0; flex-direction:row; }
  .gallery .thumbs .th-scroll{ flex-direction:row; overflow-y:hidden; overflow-x:auto; gap:10px; }
  .gallery .thumbs .th-nav{ display:none !important; }
  .gallery .thumbs img{ width:64px; height:80px; }
  .gallery .gal-arrow{ display:none; }
  .gallery .gallery-main img{ max-height:560px; }
}
/* ==== Lemury: PDP — calculadora de frete (CEP) sem o position:absolute nativo que quebrava ==== */
.shipping-calc{ margin-top:18px; padding:16px 18px; border:1px solid #ececec; border-radius:14px; background:#fff; }
.shipping-calc > .lbl{ font-weight:700; margin-bottom:10px; font-size:15px; }
.shipping-calc .form-label{ display:none; }
.shipping-calc .shipping-calculator-head{ position:static !important; height:auto !important; min-height:0 !important; margin:0 !important; }
.shipping-calc .shipping-calculator-form,
.shipping-calc .js-shipping-calculator-form{ position:static !important; opacity:1 !important; transform:none !important; visibility:visible !important; width:100% !important; }
.shipping-calc .js-shipping-calculator-with-zipcode{ display:none !important; }
.shipping-calc .input-append{ display:flex; gap:8px; align-items:stretch; }
.shipping-calc .input-append .form-control, .shipping-calc input[name="zipcode"]{ flex:1 1 auto; min-width:0; height:46px; border:1px solid #dcdcdc; border-radius:10px; padding:0 14px; font-size:15px; }
.shipping-calc .js-calculate-shipping, .shipping-calc .btn-inline{ flex:0 0 auto; height:46px; padding:0 20px; background:#111; color:#fff; border:0; border-radius:10px; cursor:pointer; font-weight:600; white-space:nowrap; }
.shipping-calc .js-shipping-zipcode-help, .shipping-calc a.btn-link{ display:inline-block; margin-top:10px; font-size:13px; color:var(--coral,#FF5A3C); text-decoration:underline; padding:0; }
.shipping-calc .js-shipping-calculator-response .opt,
.shipping-calc .shipping-method{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid #f0f0f0; font-size:14px; }

/* ==== Lemury: PDP — compartilhar como círculos ==== */
.pshare{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line,#ececec); font-size:14px; color:#777; }
.pshare .lem-share-row{ display:inline-flex; gap:10px; margin:0 !important; align-items:center; }
.pshare a, .pshare .lem-share-btn{ width:40px; height:40px; border-radius:50%; border:1px solid #e3e3e3; display:inline-flex; align-items:center; justify-content:center; color:#111; transition:background .2s,color .2s,border-color .2s; margin:0 !important; }
.pshare a:hover, .pshare .lem-share-btn:hover{ background:#111; color:#fff; border-color:#111; }
/* os ícones de marca são <path> sólidos; o tema usa fill:none global (ícones de contorno) → forçar fill */
.pshare svg{ width:17px; height:17px; fill:currentColor !important; stroke:none !important; }
.pshare svg *{ fill:currentColor !important; stroke:none !important; }

/* ==== Lemury: PDP — modal de pagamento mais limpo ==== */
.fullscreen-modal .card, .modal .card{ border:1px solid #eee; border-radius:12px; }

/* ============================================================================
   Lemury: HEADER — o menu nativo é div.nav-desktop > ul.nav-desktop-list > li > a.
   Forçamos esse markup ao layout PLANO e CENTRALIZADO do protótipo (.nav flex).
============================================================================ */
.header .bar,
.header .js-head-row{ position:relative !important; display:flex !important; align-items:center; justify-content:space-between !important; height:78px; gap:24px; }
.header .logo-container{ display:flex; align-items:center; flex:0 0 auto; }
.header .logo-container a, .header .logo-container .brand-text, .header .brand-logo{ display:inline-flex; align-items:center; text-decoration:none; color:var(--ink,#111); font-family:var(--heading-font,'Space Grotesk'),sans-serif; font-weight:700; font-size:22px; letter-spacing:-.02em; line-height:1; white-space:nowrap; margin:0; }
.header .logo-container img, .header .brand-logo img{ height:34px; width:auto; max-width:180px; display:block; }
@media(max-width:760px){ .header .logo-container img, .header .brand-logo img{ height:26px; max-width:140px; } .header .logo-container a, .header .logo-container .brand-text{ font-size:18px; } }
/* nav CENTRALIZADO de verdade (absoluto) — independe das larguras de marca/tools */
.header .nav{ position:absolute !important; left:50%; top:0; bottom:0; transform:translateX(-50%); display:flex !important; align-items:center; justify-content:center; width:auto !important; max-width:62%; min-width:0; }
.header .nav .nav-desktop,
.header .nav .js-nav-desktop{ display:flex !important; justify-content:center; align-items:center; width:auto !important; }
.header .nav .nav-desktop-list,
.header .nav .js-nav-desktop-list{ display:flex !important; flex-wrap:nowrap; align-items:center; justify-content:center; gap:30px; list-style:none; margin:0 !important; padding:0 !important; width:auto !important; float:none !important; }
.header .nav .nav-item,
.header .nav .nav-item-desktop,
.header .nav .nav-main-item{ margin:0; padding:0; list-style:none; position:relative; float:none; }
.header .nav .nav-item-container{ display:inline-flex; align-items:center; }
.header .nav .nav-list-link,
.header .nav a.nav-list-link{ display:inline-block; padding:6px 0 !important; margin:0 !important; font-family:var(--h); font-weight:500; font-size:13.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); background:none; border:0; line-height:1; white-space:nowrap; }
.header .nav .nav-list-link:hover,
.header .nav .nav-list-link.selected,
.header .nav .nav-list-link-featured{ color:var(--coral); }
.header .nav .nav-desktop-list-arrow{ display:none !important; }
/* ---- SUBMENU / dropdown de subcategorias — controlado: escondido por padrão, abre no hover,
   ancorado ABAIXO do item, sem o .container full-width nativo (que estava bugando) ---- */
.header .nav .nav-dropdown,
.header .nav .item-with-subitems{ position:relative; }
.header .nav .nav-dropdown-content,
.header .nav .desktop-dropdown{
	position:absolute !important; top:100% !important; left:50% !important; right:auto !important; bottom:auto !important;
	transform:translateX(-50%) translateY(10px) !important;
	margin:0 !important; min-width:210px; width:max-content; max-width:340px;
	background:#fff; border:1px solid var(--line,#ececec); border-radius:10px;
	box-shadow:0 16px 40px rgba(0,0,0,.13); padding:8px 0 !important;
	opacity:0; visibility:hidden; pointer-events:none;
	transition:opacity .18s ease, transform .18s ease; z-index:200;
}
.header .nav .nav-dropdown:hover > .nav-dropdown-content,
.header .nav .nav-dropdown:hover > .desktop-dropdown,
.header .nav .nav-dropdown:hover .nav-dropdown-content,
.header .nav .nav-dropdown:hover .desktop-dropdown{
	opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
	transform:translateX(-50%) translateY(0) !important;
}
.header .nav .desktop-dropdown-container{ width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; }
.header .nav .desktop-list-subitems,
.header .nav .list-subitems{ display:flex !important; flex-direction:column !important; column-count:1 !important; columns:auto !important; list-style:none; margin:0 !important; padding:0 !important; float:none !important; min-width:200px; }
.header .nav .list-subitems li{ display:block; margin:0; position:static; }
.header .nav .list-subitems .nav-list-link,
.header .nav .list-subitems a{ display:block !important; padding:9px 20px !important; white-space:nowrap; font-size:13px !important; text-transform:none !important; letter-spacing:0 !important; font-weight:400 !important; color:var(--ink,#111) !important; }
.header .nav .list-subitems a:hover{ background:var(--soft,#f6f5f3); color:var(--coral,#FF5A3C) !important; }
/* banners de megamenu não usados neste layout simples */
.header .nav .desktop-dropdown .nav-banners,
.header .nav .desktop-dropdown-container .nav-banners{ display:none !important; }
.header .tools,
.header .utilities-container{ display:flex; justify-content:flex-end; align-items:center; gap:18px; }
.header .tools .header-utility{ display:inline-flex; align-items:center; }
.header .tools .ic{ width:22px; height:22px; }
@media(max-width:900px){
  .header .nav{ display:none !important; }
  .header .menu-toggle{ display:flex !important; flex:0 0 auto; }
}
/* ---- Tablet (768–900px): o modal do hambúrguer tem classe modal-md-bottom/modal-md-width-medium
   que o joga pro meio/baixo da tela. Forçamos GAVETA À ESQUERDA (igual ao mobile). Não toca no mobile (<768). ---- */
@media (min-width:768px) and (max-width:900px){
  .modal.modal-nav-hamburger{
    position:fixed !important;
    top:0 !important; bottom:0 !important; left:0 !important; right:auto !important;
    width:360px !important; max-width:86vw !important;
    height:100% !important; max-height:100% !important; min-height:100% !important;
    margin:0 !important; border-radius:0 !important; transform:none !important;
  }
  .modal.modal-nav-hamburger .modal-body{ height:auto !important; max-height:calc(100% - 56px) !important; overflow-y:auto !important; }
}

/* ============================================================================
   Lemury: CARD do carrossel — garante os blocos do protótipo (cor/tamanho/pix)
   mesmo que a CSS nativa do tema tente sobrescrever.
============================================================================ */
.card .sizes{ display:flex !important; gap:7px; justify-content:center; margin:0 0 12px; flex-wrap:wrap; }
.card .sizes span{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line,#ececec); display:flex; align-items:center; justify-content:center; font-family:var(--h); font-weight:500; font-size:11px; color:var(--ink,#111); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.card .sizes span.sel{ background:var(--ink,#111); color:#fff; border-color:var(--ink,#111); }
.card .colors{ display:flex !important; gap:12px; justify-content:center; margin:0 0 9px; }
.card .colors i{ width:14px; height:14px; border-radius:50%; border:1px solid var(--line,#ececec); display:block; cursor:pointer; }
.card .colors i.sel, .card .colors i.selected{ box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink,#111); }
/* Tamanho 100% esgotado + card indisponível: visual + sem interação */
.card .sizes span.out{ opacity:.4; text-decoration:line-through; cursor:not-allowed; pointer-events:none; }
.card:not([data-available]) .sizes span,
.card:not([data-available]) .colors i{ pointer-events:none; opacity:.55; }

/* Notificação "adicionado ao carrinho" — MOBILE: toast flutuante abaixo do header.
   A CSS nativa que a fixa mira ".head-row", mas o header real é ".js-head-row" → a regra
   não casava e a notificação ficava em FLUXO dentro do header, empurrando os ícones. */
@media (max-width: 767px){
  .js-head-row .notification-cart-container,
  .notification-cart-container{
    position: fixed !important;
    top: 84px !important; bottom: auto !important;
    left: 10px !important; right: 10px !important;
    width: auto !important; max-width: none !important;
    max-height: calc(100vh - 100px) !important; overflow: auto !important;
    z-index: 1500 !important;
    background: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(17,17,17,.18) !important;
  }
  .notification-cart-container .notification{ border: none !important; border-radius: 14px !important; }
  .notification-cart-container.notification-hidden{ display: none !important; }
}

.card .price-pix{ display:flex; align-items:center; gap:6px; color:var(--coral,#FF5A3C); font-size:13px; font-weight:600; margin-top:3px; }
.card .price-pix .pixi{ width:13px; height:13px; fill:var(--coral,#FF5A3C); flex:none; }

/* ============================================================================
   Lemury: RESPONSIVIDADE — faixa tablet (761–900px) ficava com layout "desktop"
   apertado (benefícios 4-col, módulo 2-col) porque o protótipo só quebra em 760.
   Alinhamos tudo ao breakpoint de 900 (onde o carrossel e o hambúrguer já mudam).
============================================================================ */
@media(max-width:900px){
  .benefits .grid{ grid-template-columns:1fr 1fr !important; gap:18px 24px; }
  .benefit{ justify-content:flex-start; }
  .module .grid{ grid-template-columns:1fr !important; }
  .module .pic{ min-height:300px; }
  .module .txt{ padding:36px 24px !important; }
}

/* Footer no mobile: marca em largura total (some o vão) + colunas de links equilibradas */
@media(max-width:760px){
  .footer .grid{ grid-template-columns:1fr 1fr !important; gap:28px 20px; }
  .footer .grid > div:first-child{ grid-column:1 / -1; }
}
@media(max-width:460px){
  .footer .grid{ grid-template-columns:1fr 1fr !important; }
  .footer .fbrand{ font-size:22px; }
}

/* ============================================================================
   Lemury: PDP — área de compra (.cart-line). Corrige o OVERLAP (a .qty 138px
   transbordava o container nativo de 110px, e o botão sobrepunha) + botão com
   altura normal preenchendo o espaço.
============================================================================ */
.cart-line{ align-items:flex-start !important; }
.cart-line .form-quantity-container{ width:auto !important; flex:0 0 auto !important; min-width:0 !important; }
.cart-line .qty{ width:auto !important; }
.cart-line .cart-button-container{ flex:1 1 200px !important; min-width:0 !important; display:flex !important; flex-direction:column; gap:8px; }
.cart-line .cart-button-container .js-addtocart.js-prod-submit-form{
	display:flex !important; align-items:center; justify-content:center;
	width:100% !important; min-width:0 !important; height:auto !important; min-height:54px;
	padding:14px 18px !important; white-space:nowrap;
}
.cart-line .cart-button-container .js-addtocart-placeholder{ width:100% !important; min-width:0 !important; }
/* PDP: remove a borda EXTERNA do wrapper nativo dos swatches (a.btn-variant/.js-insta-variant)
   em TODAS as telas — o botão visível é o interno (.btn-variant-content). Antes só o mobile tirava. */
.sizes-opt a.btn-variant, .sizes-opt a.js-insta-variant,
.swatches a.btn-variant, .swatches a.js-insta-variant{ border:0 !important; padding:0 !important; background:none !important; box-shadow:none !important; }
/* Botão "Sem estoque" (nostock) com cara de desabilitado — não coral (não parece clicável) */
.js-addtocart.nostock, .cart-button-container .js-addtocart.nostock, input.js-addtocart.nostock{ background:#dcdcdc !important; color:#8a8a8a !important; cursor:not-allowed !important; box-shadow:none !important; }
/* Mensagem de erro de estoque: ABAIXO do botão, largura total (não espreme o botão) */
.cart-line .cart-button-container .alert, .cart-line .cart-button-container .alert-warning{
	width:100% !important; margin:0 !important; order:2; font-size:13px; line-height:1.45;
	padding:10px 12px; border-radius:8px; background:#fff6f2 !important; border:1px solid var(--coral,#FF5A3C) !important; color:var(--coral-dark,#e8462a) !important;
}

/* Mobile (≤760px): variações/quantidade/botão estavam grandes demais — escala mobile-nativa */
@media(max-width:760px){
	.opt-label{ margin:16px 0 8px !important; font-size:12px !important; }
	.sizes-opt{ gap:8px !important; }
	.sizes-opt a.btn-variant{ padding:0 !important; border:0 !important; background:none !important; min-width:0 !important; }
	.sizes-opt span, .sizes-opt .btn-variant-content{ min-width:42px !important; padding:9px 8px !important; font-size:13px !important; }
	.swatches{ gap:9px !important; }
	.swatches a.js-insta-variant{ padding:0 !important; border:0 !important; }
	.swatches .btn-variant-content, .swatches i{ width:30px !important; height:30px !important; }
	.qty button{ width:40px !important; height:46px !important; font-size:18px !important; }
	.qty input{ width:42px !important; height:46px !important; font-size:15px !important; }
	.cart-line{ margin:16px 0 12px !important; gap:10px !important; }
	.cart-line .cart-button-container .js-addtocart.js-prod-submit-form{ min-height:48px; padding:13px 14px !important; font-size:12.5px !important; letter-spacing:.06em; }
	.pinfo .pname, .product .pname{ font-size:clamp(21px,6.2vw,27px) !important; }
	.prod-benefits{ gap:10px !important; }
	.prod-benefits > div{ font-size:12.5px !important; }
}

/* ============================================================================
   Lemury: "Produtos similares/relacionados" — título no mesmo Playfair itálico
   dos títulos de seção da home (.showcase .top h2).
============================================================================ */
.js-related-products .h5, .js-complementary-products .h5,
.js-related-products [data-store="section-title"], .js-complementary-products [data-store="section-title"]{
	font-family:'Playfair Display',serif !important; font-style:italic !important; font-weight:500 !important;
	font-size:clamp(22px,2.6vw,30px) !important; letter-spacing:0 !important; text-transform:none !important;
}

/* ============================================================================
   Lemury: CARDS do carrossel/relacionados — altura igual e botão COMPRAR
   sempre alinhado embaixo (independe de ter desconto ou não).
============================================================================ */
.track > .card, .swiper-products-slider .swiper-slide, .swiper-products-slider .swiper-slide > .card{ height:auto; }
.card{ display:flex; flex-direction:column; height:100%; }
.card .info{ display:flex; flex-direction:column; flex:1 1 auto; }
.card .buy{ margin-top:auto; }
/* garante respiro entre a última linha de preço (parcelas/Pix) e o botão COMPRAR
   mesmo no card mais alto (onde o margin-top:auto colapsa pra 0). Mantém o botão
   alinhado embaixo (margin-top:auto) + um respiro mínimo via margin na linha de preço. */
.card .price-inst{ margin-bottom:14px; }
.card .info > .price-pix:last-of-type{ margin-bottom:2px; }

/* ============================================================================
   Lemury: HEADER MOBILE — logo à esquerda (junto do menu), ícones menos
   espaçados, e o badge do carrinho sem cortar na borda.
============================================================================ */
@media(max-width:760px){
	.header .bar, .header .js-head-row{ justify-content:flex-start !important; gap:10px !important; padding-left:14px !important; padding-right:12px !important; }
	.header .menu-toggle{ flex:0 0 auto; }
	.header .logo-container{ margin-right:auto !important; padding-left:2px; }
	.header .logo-container img, .header .brand-logo img{ height:24px; max-width:130px; }
	.header .logo-container a, .header .logo-container .brand-text{ font-size:17px; }
	.header .tools, .header .utilities-container{ gap:6px !important; padding-right:2px; flex:0 0 auto; }
	.header .tools > a, .header .tools > span, .header .tools .header-utility, .header .tools .cart{
		padding:5px !important; margin:0 !important; min-width:0 !important; width:auto !important;
		display:inline-flex !important; align-items:center; justify-content:center; line-height:0 !important;
	}
	.header .tools .ic, .header .tools .header-utility svg, .header .tools .cart svg, .header .tools .icon-inline{ width:21px !important; height:21px !important; }
	.header .cart{ position:relative; }
	.header .cart .count{ right:-2px !important; top:-3px !important; }
}

/* ============================================================================
   Lemury: BUSCA — painel que abre do topo pelo ícone de busca (#nav-search).
============================================================================ */
.modal.modal-nav-search{
	position:fixed !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important;
	width:100% !important; max-width:none !important; height:auto !important; max-height:none !important; min-height:0 !important;
	margin:0 !important; border-radius:0 !important; transform:none !important; overflow:visible !important;
	padding:20px 16px 22px !important; box-shadow:0 12px 34px rgba(0,0,0,.14); background:#fff;
}
.modal.modal-nav-search .modal-header{ position:absolute !important; top:8px; right:8px; padding:0 !important; min-height:0 !important; margin:0 !important; background:none !important; }
.modal.modal-nav-search .modal-body{ padding:0 !important; overflow:visible !important; max-height:none !important; height:auto !important; width:100% !important; }
.nav-search-panel{ width:100% !important; max-width:680px; margin:0 auto; padding-top:6px; }
.nav-search-label{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; font-size:20px; margin-bottom:12px; color:var(--ink,#111); }
/* força o form nativo a ocupar a largura toda */
.modal.modal-nav-search form, .modal.modal-nav-search .js-search-form,
.modal.modal-nav-search .nav-search-group, .modal.modal-nav-search .input-group{ width:100% !important; max-width:100% !important; }
.nav-search-group{ position:relative; display:flex !important; align-items:center; }
.nav-search-input{ width:100% !important; max-width:100% !important; height:52px !important; border:1px solid var(--line,#ececec) !important; border-radius:10px !important; padding:0 58px 0 16px !important; font-size:16px !important; background:#fff !important; box-shadow:none !important; box-sizing:border-box !important; }
.nav-search-input:focus{ outline:none !important; border-color:var(--ink,#111) !important; }
.nav-search-submit{ position:absolute !important; right:6px; top:50%; transform:translateY(-50%) !important; width:42px; height:42px; display:inline-flex !important; align-items:center; justify-content:center; background:var(--coral,#FF5A3C) !important; color:#fff !important; border:0 !important; border-radius:8px; cursor:pointer; margin:0 !important; }
.nav-search-submit svg{ width:20px; height:20px; }
/* botão "limpar" (X) nativo removido — vinha desalinhado (svg-icon-mask sem centralizar) */
.nav-search-clear, .modal.modal-nav-search .js-empty-search, .modal.modal-nav-search .search-empty-btn{ display:none !important; }
.nav-search-suggestions{ margin-top:10px; width:100% !important; }
@media(min-width:761px){ .modal.modal-nav-search{ padding:26px 24px 28px !important; } .nav-search-label{ font-size:24px; } }

/* ============================================================================
   Lemury: CATEGORIAS (bolinhas) no MOBILE — maiores, com peek de ~2,5 itens
   (igual carrossel) + dots de paginação (criados via JS no home.tpl).
============================================================================ */
.cats .cat-dots{ display:none; }
@media(max-width:760px){
	.cats .circ-row{ gap:16px !important; justify-content:flex-start !important; }
	.cats .circ{ width:120px !important; }
	.cats .circ .ring{ width:108px !important; height:108px !important; }
	.cats .circ span{ font-size:13px !important; }
	.cats .cat-dots{ display:flex; justify-content:center; gap:7px; margin-top:18px; }
	.cats .cat-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line,#ececec); cursor:pointer; transition:background .25s ease, width .25s ease; }
	.cats .cat-dots span.active{ background:var(--ink,#111); width:24px; border-radius:5px; }
}

/* WhatsApp FAB — REMOVIDO a pedido do cliente (esconde qualquer botão flutuante de WhatsApp). */
.wa-fab, .js-whatsapp-chat, .whatsapp-chat, .whatsapp-button, [class*="whatsapp-float"]{ display:none !important; }

/* Barra fixa de compra (mobile) — botão coral. A .pdp-sticky base vem do proto-pages.css. */
.pdp-sticky .js-sticky-addtocart{ background:var(--coral,#FF5A3C) !important; color:#fff !important; border:0; text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:13px; border-radius:3px; }
.pdp-sticky .js-sticky-addtocart:active{ transform:scale(.99); }

/* Calculadora de CEP: garante que input+botão nunca estourem em telas estreitas */
@media(max-width:420px){
  .shipping-calc .input-append{ flex-wrap:wrap; }
  .shipping-calc .input-append .form-control,
  .shipping-calc input[name="zipcode"]{ flex:1 1 100%; }
  .shipping-calc .js-calculate-shipping,
  .shipping-calc .btn-inline{ flex:1 1 100%; }
}

/* ============================================================================
   Lemury — PÁGINAS INSTITUCIONAIS · KIT UNIFICADO (hero + faixa CTA + contatos)
   ========================================================================== */
.lp-hero{ position:relative; display:flex; align-items:flex-end; min-height:230px; overflow:hidden; background:var(--ink,#111); }
.lp-hero::before{ content:""; position:absolute; inset:0; background-image:var(--lp-hero-img); background-size:cover; background-position:center top; }
.lp-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62)); }
.lp-hero .container{ position:relative; z-index:1; padding-top:34px; padding-bottom:30px; }
.lp-hero .eyebrow{ margin-bottom:6px; }
.lp-hero h1{ color:#fff; font-family:var(--h); font-weight:700; line-height:1.05; font-size:clamp(28px,7vw,46px); margin:0; letter-spacing:-.01em; }
.lp-hero .lp-sub{ color:rgba(255,255,255,.92); margin:10px 0 0; max-width:540px; font-size:15px; line-height:1.5; }
.lp-hero--solid::before{ display:none; }
@media(min-width:760px){ .lp-hero{ min-height:300px; } .lp-hero .container{ padding-top:50px; padding-bottom:46px; } .lp-hero .lp-sub{ font-size:16px; } }

.lp-band{ background:var(--soft,#f6f5f3); text-align:center; padding:48px 0; margin-top:8px; }
.lp-band .container{ max-width:680px; }
.lp-band .eyebrow{ display:block; margin-bottom:8px; }
.lp-band h2{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; font-size:clamp(24px,5vw,32px); margin:0 0 10px; color:var(--ink,#111); }
.lp-band p{ color:var(--muted,#666); margin:0 auto 20px; max-width:520px; line-height:1.6; }
.lp-band .btn{ margin-bottom:4px; }
@media(min-width:760px){ .lp-band{ padding:64px 0; } }

.lp-contacts{ display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; align-items:center; margin-top:14px; font-family:var(--h); font-size:14px; }
.lp-contacts a{ color:var(--ink,#111); text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:7px; }
.lp-contacts a:hover{ color:var(--coral,#FF5A3C); }

/* ============================================================================
   Lemury — 404: carrossel "Você também vai amar" não pode estourar a largura
   (no desktop um card vazava ~13px). Mantém os botões prev/next, que ficam fora
   do .swiper-container (são irmãos), então não são cortados.
   ========================================================================== */
#page-error .swiper-container{ overflow:hidden; }
#page-error .position-relative{ max-width:100%; }

/* ============================================================================
   Lemury — VISTOS RECENTEMENTE (PDP) · carrossel simples com scroll horizontal
   ========================================================================== */
.rv-section{ padding-top:8px; }
.rv-head h2{ font-family:'Playfair Display',serif; font-style:italic; font-weight:500; font-size:clamp(22px,4.5vw,30px); margin:0 0 20px; color:var(--ink,#111); }
.rv-row{ display:flex; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; scrollbar-width:thin; }
.rv-row::-webkit-scrollbar{ height:4px; }
.rv-row::-webkit-scrollbar-thumb{ background:var(--line,#ececec); border-radius:4px; }
.rv-card{ flex:0 0 auto; width:150px; text-decoration:none; color:var(--ink,#111); }
.rv-thumb{ display:block; width:100%; aspect-ratio:3/4; background:var(--soft,#f6f5f3); border-radius:8px; overflow:hidden; }
.rv-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.rv-card:hover .rv-thumb img{ transform:scale(1.04); }
.rv-name{ display:block; font-family:var(--b); font-size:13px; margin-top:8px; line-height:1.35; max-height:2.7em; overflow:hidden; }
.rv-price{ display:block; font-family:var(--h); font-weight:600; font-size:14px; margin-top:3px; }
@media(min-width:760px){ .rv-card{ width:180px; } }

/* ============================================================================
   Lemury — ACESSIBILIDADE: foco visível para navegação por teclado
   ========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible{
  outline:2px solid var(--coral,#FF5A3C) !important; outline-offset:2px !important; border-radius:2px;
}

/* ============================================================================
   Lemury — 404: campo de busca pra não dar beco sem saída
   ========================================================================== */
.nf-search{ display:flex; gap:8px; max-width:420px; margin:18px auto 0; }
.nf-search input{ flex:1; height:48px; border:1px solid var(--line,#ececec); border-radius:8px; padding:0 16px; font-size:15px; background:#fff; }
.nf-search input:focus{ outline:none; border-color:var(--ink,#111); }
.nf-search button{ flex:0 0 auto; width:52px; height:48px; display:inline-flex; align-items:center; justify-content:center; background:var(--coral,#FF5A3C); color:#fff; border:0; border-radius:8px; cursor:pointer; }
.nf-search button svg{ width:20px; height:20px; }

/* ============================================================================
   Lemury — AVISO DE COOKIES: barra inferior de ponta a ponta (em vez da
   caixinha pequena no canto inferior esquerdo). Mantém o botão nativo "Entendi".
   ========================================================================== */
/* NÃO mexer em `display` aqui — o JS nativo usa display:none/block pra mostrar/esconder
   ao aceitar; sobrescrever com !important deixaria a barra fixa pra sempre. */
.js-notification-cookie-private.notification{
  left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  width:100% !important; max-width:none !important; margin:0 !important; border:0 !important; border-radius:0 !important;
  background:var(--ink,#111) !important; color:#fff !important; text-align:center;
  padding:14px 20px !important; z-index:1200 !important; box-shadow:0 -6px 24px rgba(0,0,0,.18) !important;
}
.js-notification-cookie-private .notification-message{ color:#fff !important; margin:0 10px 0 0 !important; font-size:14px; line-height:1.6; display:inline; }
.js-notification-cookie-private .notification-message strong{ color:#fff !important; }
.js-notification-cookie-private .js-acknowledge-cookies-private{
  display:inline-block; vertical-align:middle; background:var(--coral,#FF5A3C) !important; color:#fff !important; border:0 !important; margin:0 !important;
  font-family:var(--h) !important; font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:12px;
  padding:8px 20px !important; border-radius:3px !important; cursor:pointer; text-decoration:none !important; white-space:nowrap;
}
.js-notification-cookie-private .js-acknowledge-cookies-private:hover{ background:var(--coral-dark,#e8462a) !important; }

/* Rodapé — 3 colunas (removida a coluna "Categorias", redundante com o menu do topo) */
.footer .grid{ grid-template-columns:1.6fr 1fr 1fr; }

/* ============================================================================
   Lemury — CARRINHO: calculadora de frete (CEP). O nativo usa position:absolute
   e a .shipping-calculator-head colapsava p/ ~20px enquanto o form (~150px, com
   o "Não sei meu CEP") vazava por cima do "Resumo do pedido". Mesmo fix da PDP:
   deixa o form em fluxo normal (static) e usa só o formulário (esconde o estado
   "Mudar CEP", que ficava sobreposto).
   ========================================================================== */
.cart-fulfillment-info .shipping-calculator-head{ position:static !important; height:auto !important; min-height:0 !important; margin:0 !important; }
.cart-fulfillment-info .js-shipping-calculator-form{ position:static !important; opacity:1 !important; transform:none !important; visibility:visible !important; width:100% !important; }
.cart-fulfillment-info .js-shipping-calculator-with-zipcode{ display:none !important; }
.cart-fulfillment-info .js-shipping-calculator-form{ text-align:left; }
/* "Não sei meu CEP" herdava o padding do .btn (16px 32px) → ficava indentado e com espaço grande. Zera. */
.cart-fulfillment-info .js-shipping-calculator-form a.btn-link{ display:inline-block; padding:0 !important; margin:6px 0 0 !important; text-align:left; font-size:13px; }
/* aproxima o resultado do frete (Entrega em domicílio) do form, sem o vão gigante */
.cart-fulfillment-info .js-shipping-calculator-response{ margin-top:6px !important; margin-bottom:0 !important; }
.cart-fulfillment-info{ padding-bottom:0 !important; }

/* Carrinho: "Continuar comprando" como back-link discreto no topo (era um link com sublinhado laranja, parecendo título, solto entre itens e o CEP) */
.cart-back{ margin:16px 0 2px; }
.cart-back a{ display:inline-flex; align-items:center; gap:7px; font-family:var(--h),sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted,#666); text-decoration:none; }
.cart-back a:hover{ color:var(--coral,#FF5A3C); }
.cart-back .arr{ font-size:15px; line-height:1; }

/* Mobile: aproxima o "Resumo do pedido" da área de cima (o gap do grid era 38px → virava um vão enorme antes do resumo) */
@media(max-width:860px){ .inner .cart{ gap:16px !important; } }

/* Carrinho — separa a seção de CEP do divisor acima e aproxima o label do input */
.cart-page-fulfillment{ margin-top:16px; }
.cart-fulfillment-info .form-label{ margin:0 0 8px !important; }

/* ============================================================================
   Lemury — CARRINHO: item com layout limpo (mesma estrutura desktop + mobile):
   [imagem] | linha de cima (nome/variante — preço) / linha de baixo (qtd — remover).
   Resolve a parte de cima "voando" (qtd e remover ficavam em blocos soltos).
   ========================================================================== */
.inner .cart-item{ grid-template-columns:96px 1fr !important; align-items:start; }
.cart-item .cart-item-info-container{ display:flex; flex-direction:column; align-items:stretch !important; min-width:0; }
.cart-item .ci-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.cart-item .ci-head .cart-item-name-container{ min-width:0; }
.cart-item .ci-price-block{ flex:0 0 auto; text-align:right; white-space:nowrap; }
.cart-item .ci-price-block .cart-compare-price-container{ display:flex; justify-content:flex-end; align-items:baseline; font-size:12.5px; margin-bottom:2px; }
.cart-item .ci-price-block .ci-price{ font-size:16px; }
.cart-item .ci-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.cart-item .ci-actions .ci-remove{ flex:0 0 auto; }
.cart-item .cart-item-quantity{ margin:0; }
.cart-item .cart-item-quantity .qty{ display:inline-flex !important; width:auto !important; }
@media(max-width:760px){
  .inner .cart-item{ grid-template-columns:80px 1fr !important; gap:14px; }
  .cart-item img, .cart-item .cart-item-image{ width:80px !important; height:104px !important; }
}

/* ============================================================================
   PÁGINA DE PRODUTOS (categoria/busca): filtros, grid, card, alinhamentos.
   ========================================================================== */

/*UM mecanismo de filtro: sidebar estática no desktop real (>920);
   no resto, o filtro é o modal nativo #modal-filters (esconde a sidebar/sheet). */
@media (min-width:921px){
  .listing{ grid-template-columns:248px minmax(0,1fr) !important; gap:40px !important; }
  .listing > aside.filters{
    position:static !important; transform:none !important; max-height:none !important;
    width:auto !important; border-radius:0 !important; box-shadow:none !important;
    transition:none !important; overflow:visible !important; z-index:auto !important;
  }
}
@media (max-width:920px){
  .listing > aside.filters{ display:none !important; }
}
.filters-backdrop{ display:none !important; }

/*Sem tier de tablet: 3 colunas entre 600-920px (sidebar oculta, grid full) */
@media (min-width:600px) and (max-width:920px){
  .product-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:18px !important; }
}

/*Botão "APLICAR" do preço (era um quadradinho 43x43 com só uma setinha) */
@media (min-width:768px){
  .category-body .price-filter-container .price-filter-btn,
  [data-component="modal-filters"] .price-filter-container .price-filter-btn{
    width:auto !important; height:40px !important; min-width:0 !important; padding:0 18px !important;
    font-size:12px !important; font-family:var(--h),sans-serif;
    text-transform:uppercase; letter-spacing:.06em; font-weight:600; line-height:1;
    color:var(--coral,#FF5A3C) !important; background:#fff !important;
    border:1px solid var(--coral,#FF5A3C) !important; border-radius:6px !important;
  }
  .category-body .price-filter-container .price-filter-btn:before,
  [data-component="modal-filters"] .price-filter-container .price-filter-btn:before{ display:none !important; }
  .category-body .price-filter-container .price-filter-btn:hover,
  [data-component="modal-filters"] .price-filter-container .price-filter-btn:hover{ background:var(--coral,#FF5A3C) !important; color:#fff !important; }
}

/*Filtro de preço robusto (flex) no lugar de inline-block/inline-table */
.category-body .price-filter-container .form-group,
[data-component="modal-filters"] .price-filter-container .form-group{ display:flex !important; align-items:flex-end; flex-wrap:wrap; gap:8px; }
.category-body .price-filter-container .filter-input-price-container,
[data-component="modal-filters"] .price-filter-container .filter-input-price-container{ width:auto !important; flex:1 1 72px; min-width:72px; display:block !important; }
.category-body .price-filter-container .filter-input-price,
[data-component="modal-filters"] .price-filter-container .filter-input-price{ width:100% !important; }

/* Filtro de cor: REMOVER a bolinha de swatch (cliente: ficou sem sentido) — fica só o checkbox + nome da cor */
.category-body .checkbox-container .checkbox-color,
[data-component="modal-filters"] .checkbox-container .checkbox-color{ display:none !important; }

/*Acordeão do modal mobile: 1 divisória por grupo (não 2) */
[data-component="modal-filters"] .filter-accordion{ border-bottom:0 !important; }
[data-component="modal-filters"] .filter-accordion + .filter-accordion{ border-top:1px solid #ececec; }

/*Mensagem "sem resultados" com a marca (categoria + busca) */
[data-component="filter.message"]{
  text-align:center; padding:48px 20px; color:#6b6b6b;
  font-family:'Playfair Display',serif; font-style:italic; font-size:20px;
}

/*Barra de controles (Filtrar | Ordenar) no mobile: 1 linha cheia, 50/50, toque >=44px */
.toolbar .filter-toggle{ min-height:44px; padding:11px 16px; }
.toolbar .sort{ min-height:44px; }
@media (max-width:920px){
  .toolbar{ gap:10px; flex-wrap:wrap; }
  .toolbar .right{ flex:1 1 100%; display:flex; gap:10px; align-items:stretch; }
  .toolbar .right > *{ flex:1 1 0; min-width:0; }
  .toolbar .filter-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .toolbar .sort{ width:100% !important; max-width:100%; }
}

/*Nome do card com altura fixa (2 linhas) — alinha cor/tamanho/preço entre cards da fileira */
.card .name{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
  width:100%; line-height:1.35; min-height:2.7em; margin:0 0 11px;
}

/*Botão COMPRAR na mesma base mesmo sem "Compra rápida" */
.card:not(:has(.quickshop-trigger-container)) .buy{ margin-bottom:32px; }

/*Bolinhas de cor do card: hitbox maior (sem inflar o dot) */
/* Bolinhas de cor do card: hitbox maior (sem inflar o dot). Gap definido lá em cima (.card .colors). */
.card .colors i{ position:relative; }
.card .colors i::after{ content:""; position:absolute; inset:-7px; border-radius:50%; }

/*Chips de tamanho do card são informativos (não clicáveis) */
.card .sizes span{ cursor:pointer; transition:.15s; }
.card .sizes span:hover{ border-color:var(--ink,#111); }
.card .sizes span.sel, .card .sizes span.selected{ background:var(--ink,#111); color:#fff; border-color:var(--ink,#111); }

/*"Compra rápida" com alvo de toque decente */
.quickshop-trigger-container{ margin-top:6px; }
.quickshop-trigger-container .btn-link{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 10px; }

/*"Sem estoque" no card (quando sem preço) discreto */
.card .price-now.price-out{ color:#9a9a9a; }

/* ============================================================================
   QUICK-SHOP MODAL — alinhar ao padrão do site (cliente: botão estranho, efeito,
   tamanhos e fontes quebrando o padrão).
   ========================================================================== */
/* Botão "Adicionar ao carrinho": altura normal (era 68px), 1 linha, SEM o efeito
   de "pulo" no hover (transform) que nenhum outro botão tem. */
#quickshop-modal #quickshop-form .js-addtocart,
#quickshop-modal #quickshop-form .btn-primary,
#quickshop-modal #quickshop-form input[type="submit"]{
  min-height:48px !important; height:48px !important; padding:0 18px !important;
  font-family:var(--h),sans-serif !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:.08em !important; line-height:1 !important; white-space:nowrap;
  border-radius:3px !important; box-shadow:none !important;
  transition:background-color .2s ease !important; transform:none !important;
}
#quickshop-modal #quickshop-form .js-addtocart:hover,
#quickshop-modal #quickshop-form .btn-primary:hover,
#quickshop-modal #quickshop-form input[type="submit"]:hover{
  transform:none !important; box-shadow:none !important; background:var(--coral-dark,#e8462a) !important;
}
/* Nome e preço com a tipografia da marca */
#quickshop-modal .js-item-name{ font-family:var(--h),sans-serif !important; font-weight:600 !important; font-size:18px !important; line-height:1.25; margin-bottom:8px; }
#quickshop-modal .js-price-display{ font-family:var(--h),sans-serif !important; font-weight:700 !important; }
#quickshop-modal .js-compare-price-display{ color:#9a9a9a; }
/* Rótulos das variações (TAMANHO / COR) consistentes com a PDP */
#quickshop-modal .js-insta-variation-label,
#quickshop-modal .form-label,
#quickshop-modal .variation-label{ font-family:var(--h),sans-serif !important; font-size:11.5px !important; text-transform:uppercase; letter-spacing:.06em; color:var(--ink,#111); }
/* Quantidade compacta (não esticar) */
#quickshop-modal .js-quantity.qty{ display:inline-flex !important; width:auto !important; }
/* Respiro do conteúdo no mobile */
#quickshop-modal #quickshop-form{ margin-top:4px; }

/* Distribuição/layout no MOBILE: a imagem dominava e empurrava nome/preço/variações/botão
   pra baixo da dobra. Imagem compacta e centralizada → infos visíveis sem rolar tanto. */
@media (max-width:767px){
  #quickshop-modal .quickshop-image-container{ width:180px; max-width:56%; margin:2px auto 14px; }
  #quickshop-modal .js-quickshop-image-padding{ padding:0 !important; height:auto !important; }
  #quickshop-modal .js-quickshop-img{ position:static !important; width:100% !important; height:auto !important; aspect-ratio:3/4; object-fit:cover; border-radius:10px; display:block; }
  #quickshop-modal .js-item-name{ font-size:17px !important; }
}

/* Slider de fotos do quick-shop (scroll-snap; 1 foto = estático, 2+ = desliza com bolinhas) */
.qs-slider{ position:relative; width:100%; }
.qs-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; border-radius:10px; scrollbar-width:none; }
.qs-track::-webkit-scrollbar{ display:none; }
.qs-slide{ flex:0 0 100%; scroll-snap-align:center; }
.qs-slide img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block; border-radius:10px; background:var(--soft,#f6f5f3); }
.qs-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:8px; }
.qs-dot{ width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#d8d8d8; cursor:pointer; transition:background .2s; }
.qs-dot.active{ background:var(--coral,#FF5A3C); }

/* Quick-shop: quantidade EM CIMA + botão full-width EMBAIXO (antes se sobrepunham:
   o botão de 1 linha ficava mais largo que a célula e invadia a quantidade). */
#quickshop-modal #quickshop-form .grid-auto-1{ display:block !important; }
#quickshop-modal #quickshop-form .grid-auto-1 .js-quantity.qty{ height:48px !important; margin:0 0 10px !important; }
#quickshop-modal #quickshop-form .cart-button-container{ width:100%; }
#quickshop-modal #quickshop-form .js-addtocart,
#quickshop-modal #quickshop-form input[type="submit"]{ width:100% !important; }
/* Condições de pagamento (Pix + parcelas) clonadas do card, como na página de produto */
#quickshop-modal .js-qs-payinfo{ margin-top:10px; }
#quickshop-modal .js-qs-payinfo .price-pix{ display:flex; align-items:center; gap:6px; margin:3px 0; color:var(--coral,#FF5A3C); font-size:14px; font-weight:600; }
#quickshop-modal .js-qs-payinfo .price-pix svg,
#quickshop-modal .js-qs-payinfo .price-pix .pixi{ width:15px !important; height:15px !important; min-width:15px; flex:0 0 auto; }
#quickshop-modal .js-qs-payinfo .price-inst{ margin:3px 0; color:#555; font-size:13px; }

/* Pix na PÁGINA DE PRODUTO (placeholder 5%, igual card/modal — estava faltando) */
.pdp-pix{ display:flex; align-items:center; gap:7px; margin:8px 0 2px; color:var(--coral,#FF5A3C); font-size:16px; font-weight:600; font-family:var(--h),sans-serif; }
.pdp-pix .pixi{ width:17px !important; height:17px !important; flex:0 0 auto; fill:currentColor; }
/* Símbolo oficial do Pix (logo "moinho") — sempre na cor do texto (coral), em card/modal/PDP */
.price-pix .pixi{ fill:currentColor !important; }

/* ===== Modal "Meios de pagamento" ===== */
/* Esconder a aba do gateway "Nuvem Pago" (cliente não quer exibir; só há 1 gateway) */
/* esconde a nav de abas inteira (gateway "Nuvem Pago" + as setinhas ◄► de scroll das abas) — só há 1 gateway */
#installments-modal .js-payments-tab-group{ display:none !important; }

/* Carrossel de produtos: quando NÃO transborda (poucos cards), centraliza (setas escondidas via JS) */
.carousel .track.no-scroll{ justify-content:center; }
/* Bandeiras (visa/master/elo...) LADO A LADO — estavam empilhadas (.card-img era display:block) */
#installments-modal .js-info-payment-method .card-img{ display:inline-block !important; vertical-align:middle; margin:0 8px 8px 0; }
#installments-modal .js-info-payment-method .mt-2{ line-height:1.2; }

/* ===== Quick-shop MOBILE: bottom-sheet do tamanho do conteúdo + botão fixo no rodapé ===== */
@media (max-width:767px){
  /* sheet cresce de baixo até o conteúdo (no máx 90vh) — acaba a barra de rolagem "sem sentido" da tela cheia */
  #quickshop-modal{ top:auto !important; bottom:0 !important; height:auto !important; max-height:90vh !important; border-radius:16px 16px 0 0 !important; }
  #quickshop-modal .modal-body{ height:auto !important; max-height:90vh !important; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:0 !important; }
  /* botão "Adicionar ao carrinho" fixo no rodapé do sheet */
  #quickshop-modal #quickshop-form .cart-button-container{ position:sticky; bottom:0; background:#fff; padding:12px 0 14px; margin-top:6px; z-index:3; box-shadow:0 -8px 12px -6px rgba(0,0,0,.08); }
}

/* ===== Correções: descrição do produto + tabela de medidas ===== */
/* Descrição: texto à esquerda (o .user-content é centralizado por max-width+margin auto) + só 1 divisória */
#single-product [data-store^="product-description"] .prod-acc .user-content{ margin-left:0 !important; }
#single-product [data-store^="product-description"] .prod-acc .acc-item{ border-top:0 !important; border-bottom:0 !important; }
/* Modal Tabela de medidas: tabela alinhada, usando a largura toda */
#size-guide-modal .user-content{ max-width:none !important; margin:0 !important; }
#size-guide-modal table{ width:100% !important; border-collapse:collapse !important; }
#size-guide-modal th, #size-guide-modal td{ text-align:left !important; padding:8px 12px !important; border-bottom:1px solid #ececec !important; }
#size-guide-modal thead th{ border-bottom:2px solid #ddd !important; font-weight:600 !important; }

/* ===== Favoritos (MeFavorita) na PÁGINA DO PRODUTO: coração sobre a imagem (canto sup. direito) =====
   O app coloca o #MF_product_save no lugar errado (dentro do frete); o product.tpl move ele
   pra dentro do .gallery-main e adiciona .mf-on-image. Aqui ele vira um ícone discreto. */
#single-product .gallery-main{ position:relative; }
#MF_product_save.mf-on-image{
  position:absolute !important; top:14px !important; right:14px !important; left:auto !important; bottom:auto !important;
  z-index:5 !important; margin:0 !important; padding:0 !important;
  width:42px !important; height:42px !important; min-height:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border:0 !important; border-radius:50% !important;
  background:rgba(255,255,255,.92) !important; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgba(0,0,0,.15) !important; cursor:pointer;
  font-size:0 !important; line-height:0 !important; overflow:hidden;
  transition:background .15s ease, transform .12s ease;
}
#MF_product_save.mf-on-image:hover{ background:#fff !important; transform:scale(1.06); }
#MF_product_save.mf-on-image *{ margin:0 !important; }
/* o botão contém um texto oculto ("Adicionar aos Favoritos") que rouba largura mesmo em font-size:0
   e empurra o svg pra esquerda → centralizar o coração de forma absoluta (à prova de texto). */
#MF_product_save.mf-on-image svg{ position:absolute !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; width:22px !important; height:22px !important; fill:none !important; stroke:#111 !important; stroke-width:2px !important; }
#MF_product_save.mf-on-image.active svg,
#MF_product_save.mf-on-image[data-infavorite] svg,
#MF_product_save.mf-on-image.MF_active svg{ fill:#FF5A3C !important; stroke:#FF5A3C !important; }

/* ===== Opina: "Perguntas e Respostas" — identidade Lemury =====
   O app injeta styles próprios em runtime (#opina-dynamic-css / #opina-fix-css);
   por isso os seletores são qualificados com .container_questions_wrapper (e id nos
   botões) pra vencer por especificidade. Coral só no acento — resto quieto. */
.container_questions_wrapper{ max-width:860px !important; margin:0 auto !important; }
.container_questions_wrapper .container_questions_title{ background:transparent !important; border:0 !important; padding:0 !important; margin:0 0 26px !important; text-align:center !important; }
.container_questions_wrapper .container_questions_title .container_title{ font-family:"Space Grotesk",sans-serif !important; font-weight:600 !important; font-size:23px !important; color:#111 !important; letter-spacing:.2px !important; position:relative !important; display:inline-block !important; padding-bottom:12px !important; }
.container_questions_wrapper .container_questions_title .container_title::after{ content:"" !important; position:absolute !important; left:50% !important; bottom:0 !important; transform:translateX(-50%) !important; width:46px !important; height:3px !important; background:#FF5A3C !important; border-radius:2px !important; }
.container_questions_wrapper .container_form_questions_opina{ background:#fafafa !important; border:1px solid #ededed !important; border-radius:14px !important; padding:22px !important; margin:0 auto 26px !important; }
.container_questions_wrapper .formulario label{ font-family:"Space Grotesk",sans-serif !important; font-weight:600 !important; font-size:14px !important; color:#111 !important; display:block !important; margin-bottom:8px !important; }
.container_questions_wrapper .input_question_opina{ width:100% !important; border:1px solid #e0e0e0 !important; border-radius:10px !important; padding:13px 14px !important; font-family:"DM Sans",sans-serif !important; font-size:15px !important; color:#111 !important; background:#fff !important; box-sizing:border-box !important; margin:0 !important; }
.container_questions_wrapper .input_question_opina:focus{ outline:none !important; border-color:#FF5A3C !important; box-shadow:0 0 0 3px rgba(255,90,60,.12) !important; }
.container_questions_wrapper .buttons_envio{ margin-top:14px !important; }
.container_questions_wrapper #botaoPergunta, .container_questions_wrapper #botaoEmail{ background:#FF5A3C !important; color:#fff !important; border:0 !important; border-radius:10px !important; padding:13px 28px !important; font-family:"Space Grotesk",sans-serif !important; font-weight:600 !important; font-size:14px !important; letter-spacing:.3px !important; cursor:pointer !important; }
.container_questions_wrapper #botaoPergunta:hover, .container_questions_wrapper #botaoEmail:hover{ filter:brightness(.94) !important; }
.container_questions_wrapper .container_questions_opina{ display:flex !important; flex-direction:column !important; gap:16px !important; }
.container_questions_wrapper .container_opina_perguntas{ border:1px solid #ededed !important; border-radius:14px !important; overflow:hidden !important; background:#fff !important; }
.container_questions_wrapper .container_question_opina{ background:#fff !important; border-radius:0 !important; padding:16px 18px 16px 48px !important; position:relative !important; border-bottom:1px solid #f0f0f0 !important; }
.container_questions_wrapper .container_question_opina span{ font-family:"Space Grotesk",sans-serif !important; font-weight:600 !important; color:#111 !important; font-size:15px !important; }
.container_questions_wrapper .container_question_opina::before{ content:"P" !important; position:absolute !important; left:16px !important; top:15px !important; width:23px !important; height:23px !important; border-radius:50% !important; background:#FF5A3C !important; color:#fff !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:12px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.container_questions_wrapper .store_answer{ background:#fafafa !important; padding:14px 18px 16px 48px !important; position:relative !important; }
.container_questions_wrapper .store_answer::before{ content:"R" !important; position:absolute !important; left:16px !important; top:14px !important; width:23px !important; height:23px !important; border-radius:50% !important; background:#111 !important; color:#fff !important; font-family:"Space Grotesk",sans-serif !important; font-weight:700 !important; font-size:12px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.container_questions_wrapper .store_answer .text_answer{ font-family:"DM Sans",sans-serif !important; color:#444 !important; font-size:15px !important; line-height:1.55 !important; }

/* ===== Correções pós-auditoria (jul/2026) ===== */
/* Selo TrustedSite (widget de terceiros, position:fixed com z-index altíssimo): no mobile ele fica
   cortado na borda direita e sobrepõe o botão "FINALIZAR COMPRA" do carrinho → esconder no mobile. */
@media (max-width:767px){
  [id^="trustedsite"]{ display:none !important; }
}
/* Título do produto (Playfair itálico): line-height ~1.1 cortava a parte de baixo das letras na 2ª linha. */
.pinfo .pname, .product .pname{ line-height:1.28 !important; padding-bottom:2px; }
/* Barra de avisos (topo) no mobile: respiro nas laterais + texto branco pleno pra contraste. */
@media (max-width:760px){
  .announce .container{ padding-left:14px !important; padding-right:14px !important; }
  .announce .item{ color:#fff !important; }
}
/* Newsletter (home): título único em Playfair. Antes tinha 2x "Newsletter" — o <h2> nativo (herdava
   Barlow, maior) foi REMOVIDO e o eyebrow (Playfair itálico, menor) virou o título, aumentado. */
.news .eyebrow.light.news-title{ font-size:clamp(28px,3.4vw,38px) !important; line-height:1.15 !important; margin-bottom:14px !important; display:block; }