/*
Theme Name: MoldurOn
Theme URI: https://molduron.com.br
Author: MoldurOn
Description: Tema sob medida da loja da MoldurOn - fabrica de molduras, atacado e varejo. Marca irma da PosterOn: mesma estrutura visual, cor propria (verde de oficina) e o pardo do MDF como material. A pagina de produto se comporta como um desenho de fabricacao: cotas, linhas de chamada e numeros em tabular-nums, porque quem compra moldura decide por MEDIDA, nao por foto.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: molduron
Tags: e-commerce, two-columns, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   TOKENS - herdados da home (mesmos valores, para o site inteiro
   parecer uma coisa so). Trocar aqui muda o site todo.
   ============================================================ */
:root{
  --canvas:#EDE8DE;          /* o pardo do MDF, lavado */
  --panel:#F6F2EA;           /* superficie elevada */
  --ink:#191612;
  --text-secondary:#5A554B;
  --accent:#1B5E45;          /* verde de maquina de oficina */
  --accent-hover:#144635;
  --accent-muted:rgba(27,94,69,.14);
  --pardo:#C9A87C;           /* o MDF de verdade */
  --pardo-claro:#E7DCC8;
  --line:#D8D2C4;
  --line-forte:#B9B1A0;
  --alerta:#8C3A1E;

  --display:'Sora',-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --mono:ui-monospace,Consolas,'Cascadia Mono',monospace;

  --ease:cubic-bezier(.22,.61,.24,1);
  --raio:2px;                /* quase reto: moldura nao tem canto arredondado */
  --gap:clamp(16px,2.4vw,28px);
  --larg:min(1180px,92vw);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--accent-hover)}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(30px,4.2vw,52px)}
h2{font-size:clamp(23px,2.7vw,34px)}
h3{font-size:clamp(18px,1.6vw,21px)}

/* numeros SEMPRE em tabular: medida que dança na tela vira medida em que
   ninguem confia. Vale para preco, cota, peso e SKU. */
.mon-num,.price,.woocommerce-Price-amount,.mon-cota,.mon-sku{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.mon-wrap{width:var(--larg);margin-inline:auto}
.mon-eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;
}

/* ============================================================
   A ASSINATURA: o corte 45 (meia-esquadria)
   Um canto chanfrado em vez de borda comum. E a operacao que define
   o produto - a moldura so existe porque quatro perfis se encontram a 45.
   ============================================================ */
.mon-chanfro{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  /* o chanfro sai no canto superior direito e no inferior esquerdo */
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.mon-chanfro--fino{clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px))}

/* ============================================================
   CABECALHO
   ============================================================ */
.mon-head{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.mon-head__in{
  width:var(--larg);margin-inline:auto;
  display:flex;align-items:center;gap:var(--gap);
  min-height:64px;
}
.mon-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);flex:0 0 auto}
/* A logo oficial (23/09) é um logotipo horizontal (320x110): o tamanho vem da ALTURA,
   e a largura segue o viewBox. width:auto num svg sem width/height colapsa em alguns
   navegadores - por isso a largura vai explícita (34px x 320/110,4 = 98,5px). */
.mon-brand svg{height:34px;width:98.5px;display:block}
.mon-brand img{max-height:34px;width:auto}

.mon-nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.mon-nav a{
  color:var(--ink);text-decoration:none;font-size:14.5px;
  padding:6px 0;border-bottom:1.5px solid transparent;transition:border-color .18s var(--ease)
}
.mon-nav a:hover,.mon-nav .current-menu-item>a{border-bottom-color:var(--accent)}

.mon-cart{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink);text-decoration:none;
  padding:8px 13px;border:1px solid var(--line-forte);border-radius:var(--raio);
}
.mon-cart:hover{border-color:var(--accent);color:var(--accent)}
.mon-burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}

/* ============================================================
   BOTOES
   ============================================================ */
.mon-btn,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:14px 26px;border-radius:var(--raio);border:1px solid var(--accent);
  background:var(--accent);color:#fff;text-decoration:none;cursor:pointer;
  transition:background .18s var(--ease),transform .18s var(--ease);
  line-height:1.15;
}
.mon-btn:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;transform:translateY(-1px)
}
.mon-btn--vazado,.woocommerce a.button.wc-backward{
  background:transparent;color:var(--accent);border-color:var(--line-forte)
}
.mon-btn--vazado:hover{background:var(--accent-muted);color:var(--accent-hover);border-color:var(--accent)}
.woocommerce button.button:disabled,.woocommerce button.button.alt:disabled{
  background:var(--line);border-color:var(--line);color:var(--text-secondary);opacity:1
}

/* ============================================================
   LOJA (archive) - a grade
   ============================================================ */
.mon-loja__topo{padding:38px 0 22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.mon-loja__topo h1{margin-bottom:6px}
.mon-loja__lede{color:var(--text-secondary);max-width:56ch;margin:0}

.woocommerce ul.products,
.woocommerce-page ul.products{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:var(--gap);margin:0;padding:0;list-style:none
}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}
.woocommerce ul.products li.product{
  width:auto!important;margin:0!important;float:none!important;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);
  padding:0;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),transform .2s var(--ease)
}
/* HOVER DO CARTAO (pedido dele, 22/08): o cartao "puxa o branco" ao passar o mouse.
   O fundo em repouso e o --panel (bege); no hover vai a branco puro, com sombra e a
   borda no verde da marca. A diferenca precisa ser visivel de relance numa vitrine
   de 30 cartoes iguais - so mexer na borda quase nao aparecia. */
.woocommerce ul.products li.product:hover{
  border-color:var(--accent);transform:translateY(-2px);
  background:#fff;box-shadow:0 10px 26px -12px rgba(25,22,18,.28)
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{color:var(--accent)}
.woocommerce ul.products li.product a img{margin:0;border-bottom:1px solid var(--line);background:#fff}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display);font-size:15.5px!important;font-weight:700;line-height:1.25;
  padding:14px 15px 4px!important;margin:0
}
.woocommerce ul.products li.product .price{
  display:block;padding:0 15px;color:var(--ink)!important;font-size:14px!important;margin:0
}
.woocommerce ul.products li.product .price del{color:var(--text-secondary);opacity:.7}
.woocommerce ul.products li.product .mon-card__meta{
  padding:6px 15px 0;font-family:var(--mono);font-size:11px;color:var(--text-secondary);
  letter-spacing:.04em
}
.woocommerce ul.products li.product .button{
  margin:13px 15px 15px;width:calc(100% - 30px);font-size:13.5px;padding:11px 14px
}

/* ============================================================
   PRODUTO - o layout de duas colunas
   ============================================================ */
/* A PROPORCAO E DELIBERADA E DIFERENTE DA POSTERON.
   La o produto E a imagem (poster), entao a foto manda. Aqui a foto e sempre a
   mesma moldura vazia - repeti-la grande nao informa nada. Quem compra moldura
   decide por MEDIDA e PRECO, entao a coluna de decisao e a maior. */
.mon-prod{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,3.4vw,46px);padding:30px 0 10px}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto!important;float:none!important;margin:0!important}
.woocommerce div.product div.images img{background:#fff;border:1px solid var(--line);border-radius:var(--raio)}
.woocommerce div.product .flex-control-thumbs{margin-top:11px;display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.woocommerce div.product .flex-control-thumbs li{width:auto;margin:0;float:none}
.woocommerce div.product .flex-control-thumbs img{
  border:1px solid var(--line);border-radius:var(--raio);opacity:.62;transition:opacity .16s,border-color .16s
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover{opacity:1;border-color:var(--accent)}

.woocommerce div.product .product_title{margin:2px 0 10px}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  color:var(--ink)!important;font-size:clamp(23px,2.5vw,31px)!important;font-weight:700;margin:0 0 4px
}
.woocommerce div.product p.price del{font-size:.6em;color:var(--text-secondary)}
.mon-precoNota{font-size:12.5px;color:var(--text-secondary);margin:0 0 18px}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--text-secondary);font-size:15px;margin:0 0 20px;max-width:52ch
}

/* ---- O DIAGRAMA DE COTAS: a assinatura da pagina ---- */
.mon-diag{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);
  padding:17px 17px 13px;margin:0 0 22px
}
.mon-diag__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px
}
.mon-diag__head h3{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);margin:0
}
.mon-diag__head span{font-family:var(--mono);font-size:11px;color:var(--text-secondary)}
.mon-diag svg{width:100%;height:auto;display:block}
.mon-diag__cotas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:9px;margin-top:13px;
  border-top:1px dashed var(--line-forte);padding-top:12px
}
.mon-cota{display:flex;flex-direction:column;gap:1px}
.mon-cota b{font-size:14.5px;font-weight:700;color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}
.mon-cota span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-secondary);font-family:var(--body)}
.mon-diag__aviso{
  margin:11px 0 0;font-size:12.5px;color:var(--alerta);display:flex;gap:7px;align-items:flex-start;line-height:1.45
}
.mon-diag__aviso svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}

/* ---- Variacoes como swatch, nao como select ---- */
.woocommerce div.product form.cart .variations{margin:0 0 16px;border:0;width:100%}
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td{display:block;width:100%;padding:0;border:0}
.woocommerce div.product form.cart .variations tr{margin-bottom:14px}
.woocommerce div.product form.cart .variations td.label{margin-bottom:7px}
.woocommerce div.product form.cart .variations label{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:600
}
.mon-swatches{display:flex;flex-wrap:wrap;gap:8px}
.mon-swatch{text-decoration:none;
  font-family:var(--body);font-size:14px;padding:10px 17px;
  border:1px solid var(--line-forte);border-radius:var(--raio);background:var(--panel);
  color:var(--ink);cursor:pointer;transition:all .16s var(--ease);line-height:1.2
}
.mon-swatch:hover{border-color:var(--accent);color:var(--accent)}
.mon-swatch[aria-pressed="true"],.mon-swatch[aria-current]{
  border-color:var(--accent);background:var(--accent);color:#fff;font-weight:600
}
.mon-swatch--cor{display:inline-flex;align-items:center;gap:8px}
.mon-swatch--cor i{
  width:15px;height:15px;border-radius:1px;border:1px solid var(--line-forte);display:block
}
.mon-swatch[data-valor="Preta"] i{background:#191612}
.mon-swatch[data-valor="Branca"] i{background:#fff}
.woocommerce div.product form.cart .variations select{
  /* fica de reserva: se o JS nao rodar, o select nativo continua funcionando */
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap
}
.mon-sem-js .woocommerce div.product form.cart .variations select{
  position:static;width:100%;height:auto;clip:auto;padding:11px;border:1px solid var(--line-forte)
}
.woocommerce div.product form.cart .reset_variations{
  font-family:var(--mono);font-size:11.5px;color:var(--text-secondary);margin-left:2px
}

.woocommerce div.product form.cart{margin-bottom:22px}
.woocommerce div.product form.cart div.quantity{margin-right:10px}
.woocommerce .quantity .qty{
  width:74px;padding:13px 8px;border:1px solid var(--line-forte);border-radius:var(--raio);
  background:var(--panel);color:var(--ink);font-family:var(--mono);font-size:15px;text-align:center
}
.woocommerce div.product form.cart .button{flex:1;min-width:190px}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.woocommerce div.product .woocommerce-variation-price{margin-bottom:13px}

/* ---- A GRADE DE TAMANHOS: o que substitui a imagem grande ----
   O lojista nao quer navegar 10 paginas para comparar 10 precos. Ele quer a
   escada inteira na frente, com o atual marcado. Isso e vantagem de quem vende
   moldura (catalogo fechado e comparavel) e nao existe em loja de poster. */
.mon-grade{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);
  margin:0 0 22px;overflow:hidden
}
.mon-grade__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 16px 11px;border-bottom:1px solid var(--line)
}
.mon-grade__head h3{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);margin:0
}
.mon-grade__head span{font-family:var(--mono);font-size:11px;color:var(--text-secondary)}
.mon-grade__lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(114px,1fr));gap:0;background:var(--panel)}
.mon-grade__item{
  display:flex;flex-direction:column;gap:2px;padding:11px 12px;background:var(--panel);
  text-decoration:none;color:var(--ink);transition:background .15s var(--ease)
}
.mon-grade__item:hover{background:var(--accent-muted);color:var(--ink)}
.mon-grade__item b{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700;
  letter-spacing:-.01em
}
.mon-grade__item i{
  font-style:normal;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:12.5px;color:var(--accent);font-weight:600
}
.mon-grade__item s{font-size:10.5px;color:var(--text-secondary);text-decoration:none;letter-spacing:.03em}
.mon-grade__item--atual{background:var(--ink);color:var(--pardo-claro);cursor:default}
.mon-grade__item--atual:hover{background:var(--ink);color:var(--pardo-claro)}
.mon-grade__item--atual i{color:#8FB9A6}
.mon-grade__item--atual s{color:#A79E8C}
.mon-grade__rodape{
  padding:10px 16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--text-secondary)
}
.mon-grade__rodape a{font-weight:600}

/* ---- Ficha tecnica ---- */
.mon-ficha{border-top:1px solid var(--line);margin-top:6px;padding-top:16px}
.mon-ficha dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0;font-size:13.5px}
.mon-ficha dt{color:var(--text-secondary);font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding-top:2px}
.mon-ficha dd{margin:0;font-weight:500}
.mon-ficha .mon-sku{font-size:13px}

/* ---- Abas ---- */
.woocommerce div.product .woocommerce-tabs{margin-top:44px;border-top:1px solid var(--line);padding-top:8px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 22px;display:flex;gap:26px;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;border:0;border-radius:0;padding:0;margin:0
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none;border:0;box-shadow:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-secondary);padding:12px 0;border-bottom:2px solid transparent;font-weight:600
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--accent);border-bottom-color:var(--accent)}
.woocommerce div.product .woocommerce-tabs .panel{
  max-width:74ch;font-size:15px;color:var(--ink);padding:0
}
.woocommerce div.product .woocommerce-tabs .panel h2{display:none}
.woocommerce div.product .woocommerce-tabs .panel p{margin:0 0 1em}

/* ============================================================
   CARRINHO / CHECKOUT
   ============================================================ */
.woocommerce table.shop_table{
  border:1px solid var(--line);border-radius:var(--raio);border-collapse:collapse;background:var(--panel)
}
.woocommerce table.shop_table th{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);border-bottom:1px solid var(--line);padding:14px 12px
}
.woocommerce table.shop_table td{border-top:1px solid var(--line);padding:14px 12px}
.woocommerce-cart table.cart img{width:64px;border:1px solid var(--line);border-radius:var(--raio)}
.woocommerce .cart_totals h2,.woocommerce-checkout h3{font-size:19px}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single{
  padding:12px;border:1px solid var(--line-forte);border-radius:var(--raio);
  background:var(--panel);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.3
}
.woocommerce form .form-row label{font-size:13px;color:var(--text-secondary);margin-bottom:5px}
/* OS AVISOS DA LOJA (27/09, ele: "quando se adiciona um item no carrinho, uma animação muito ruim aparece, aprimore
   isso e deixe mais bonito"). Era o texto colado na borda (o CSS do Woo está desligado e o padding era 0), e o Woo
   ainda foca o aviso meio segundo depois (tabindex -1, para o leitor de tela). Agora é um cartão: selo à esquerda,
   botão à direita. No de SUCESSO a moldura verde se desenha em volta no sentido do relógio (o gesto do .motif da
   home e do aviso de rolar), o selo salta, o "ok" se risca e o carrinho do topo dá um pulo. Informação e erro têm o
   mesmo corpo, sem a festa. Sem contorno de foco: o aviso não é controle. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  position:relative;margin:14px 0 22px;padding:16px 20px 16px 62px;list-style:none;
  border:1px solid var(--line);border-radius:var(--raio);background-color:var(--panel);color:var(--ink);
  font-size:15px;line-height:1.45;box-shadow:0 16px 36px -24px rgba(25,22,18,.45)
}
.woocommerce-message:focus,.woocommerce-info:focus,.woocommerce-error:focus{outline:none}
.woocommerce-error li+li{margin-top:6px}
.woocommerce-message:has(>.button),.woocommerce-info:has(>.button){display:flex;align-items:center;gap:10px 22px}
.woocommerce .woocommerce-message>.button,.woocommerce .woocommerce-info>.button{order:2;flex:none;margin:-4px 0 -4px auto;padding:11px 20px;font-size:14px}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{
  content:"";position:absolute;left:18px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  background:var(--accent) center/16px no-repeat
}
.woocommerce-message::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke-dasharray='22' stroke-dashoffset='22'%3E%3Canimate attributeName='stroke-dashoffset' to='0' dur='.35s' begin='.6s' fill='freeze'/%3E%3C/path%3E%3C/svg%3E")}
.woocommerce-info::before{background-color:var(--text-secondary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E")}
.woocommerce-error::before{top:14px;margin-top:0;background-color:var(--alerta);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5h.01'/%3E%3C/svg%3E")}
/* a festa, só no de sucesso: 4 linhas de 2px (fundo em degradê) crescendo uma depois da outra */
.woocommerce-message{
  border-color:transparent;background-origin:border-box;
  background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent)),
    linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--accent),var(--accent));
  background-position:left top,right top,right bottom,left bottom;background-repeat:no-repeat;
  background-size:0 2px,2px 0,0 2px,2px 0;
  animation:mon-aviso-entra .5s var(--ease) both,mon-aviso-moldura 1.2s linear .35s forwards
}
.woocommerce-message::before{animation:mon-aviso-selo .5s cubic-bezier(.34,1.56,.64,1) .25s both}
body:has(.woocommerce-message>.wc-forward) .mon-cart{animation:mon-carrinho-pulo .7s var(--ease) 1.3s}
@keyframes mon-aviso-entra{from{opacity:0;transform:translateY(-12px)}}
@keyframes mon-aviso-selo{from{transform:scale(0)}}
/* o tempo de cada lado acompanha o comprimento (o aviso é largo e baixo), para o traço andar em velocidade só */
@keyframes mon-aviso-moldura{
  0%{background-size:0 2px,2px 0,0 2px,2px 0}
  42%{background-size:100% 2px,2px 0,0 2px,2px 0}
  50%{background-size:100% 2px,2px 100%,0 2px,2px 0}
  92%{background-size:100% 2px,2px 100%,100% 2px,2px 0}
  100%{background-size:100% 2px,2px 100%,100% 2px,2px 100%}
}
@keyframes mon-carrinho-pulo{40%{transform:translateY(-3px) scale(1.07);border-color:var(--accent);color:var(--accent)}}
@media (max-width:600px){
  .woocommerce-message,.woocommerce-info,.woocommerce-error{padding:14px 14px 14px 56px;font-size:14.5px}
  .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{left:14px;top:14px;margin-top:0}
  .woocommerce-message:has(>.button),.woocommerce-info:has(>.button){flex-wrap:wrap}
  .woocommerce .woocommerce-message>.button,.woocommerce .woocommerce-info>.button{flex:1 1 100%;margin:2px 0 0}
}
@media (prefers-reduced-motion:reduce){
  .woocommerce-message,.woocommerce-message::before,.mon-cart{animation:none!important}
  .woocommerce-message{background-size:100% 2px,2px 100%,100% 2px,2px 100%}
  .woocommerce-message::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
}

/* ============================================================
   PAGINAS INSTITUCIONAIS
   ============================================================ */
.mon-pagina{padding:40px 0 60px}
.mon-pagina__head{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px}
.mon-conteudo{max-width:70ch;font-size:15.5px}
.mon-conteudo h2{font-size:22px;margin-top:1.9em}
.mon-conteudo h3{font-size:17px;margin-top:1.5em}
.mon-conteudo ul,.mon-conteudo ol{padding-left:1.15em}
.mon-conteudo li{margin-bottom:.42em}
.mon-conteudo table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:14.5px}
.mon-conteudo th,.mon-conteudo td{border:1px solid var(--line);padding:9px 11px;text-align:left}
.mon-conteudo th{background:var(--panel);font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}

/* ============================================================
   RODAPE
   ============================================================ */
/* ============================================================
   RODAPÉ — refinado em 22/08 a pedido dele ("algo moderno e gracioso")
   ============================================================
   O que mudou e por quê:
   - FILETE VERDE no topo, na cor da marca: separa o rodapé do conteúdo sem
     precisar de margem enorme, e assina a peça.
   - Coluna da marca mais larga e respirando: ela é a âncora visual, o resto é lista.
   - Link com SUBLINHADO QUE CRESCE em vez de aparecer de uma vez. Underline
     nasce ligado e some no hover é o padrão; crescer da esquerda dá movimento
     sem piscar.
   - Título de coluna com um TRAÇO curto antes: marca a hierarquia sem caixa nem
     borda, que pesariam num rodapé escuro.
*/
.mon-foot{
  background:var(--ink);color:var(--pardo-claro);margin-top:70px;
  padding:0 0 26px;font-size:14px;position:relative
}
/* o filete: a mesma diagonal de 45 graus da marca, em fio fino */
.mon-foot::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--accent) 0%,#2E8A67 38%,transparent 78%)
}
.mon-foot .mon-wrap{padding-top:52px}
.mon-foot a{color:var(--pardo-claro);text-decoration:none;position:relative}
.mon-foot a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:currentColor;transition:right .28s var(--ease)
}
.mon-foot a:hover{color:#fff}
.mon-foot a:hover::after{right:0}
.mon-foot a:focus-visible{outline:2px solid #2E8A67;outline-offset:3px;border-radius:2px}

.mon-foot__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:var(--gap)}
.mon-foot h4{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#8FB9A6;margin:0 0 15px;font-weight:600;
  display:flex;align-items:center;gap:9px
}
/* o traço da hierarquia: fino, curto, na cor do verde claro do rodapé */
.mon-foot h4::before{content:"";width:16px;height:1px;background:#4E7A67;flex:none}
.mon-foot ul{list-style:none;padding:0;margin:0}
.mon-foot li{margin-bottom:10px;line-height:1.45}
.mon-foot__brand b{font-family:var(--display);font-size:19px;color:#F3EFE6}
.mon-foot__brand svg{height:36px;width:104px}   /* o logotipo negativo (nome claro, verde oficial) */
.mon-foot__tag{color:#A79E8C;margin:13px 0 0;max-width:32ch;line-height:1.6}
.mon-foot__base{
  border-top:1px solid #2E2A24;margin-top:40px;padding-top:19px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:#8A8274
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:900px){
  .mon-prod{grid-template-columns:1fr;gap:26px}
  .mon-foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .mon-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--canvas);border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:8px 0
  }
  .mon-nav.is-open{display:flex}
  .mon-nav a{padding:12px 6vw;border-bottom:0;width:100%}
  .mon-burger{display:block;margin-left:auto;order:3}
  .mon-cart{order:2;margin-left:auto}
  .mon-foot__grid{grid-template-columns:1fr}
  .woocommerce div.product .flex-control-thumbs{grid-template-columns:repeat(5,1fr)}
}

/* ============================================================
   ACESSIBILIDADE
   ============================================================ */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal
}
.mon-pular{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:11px 18px;z-index:100;border-radius:0 0 var(--raio) 0
}
.mon-pular:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   PARTE 2 - as superfícies que faltavam
   Escrito depois do resto, com a mesma régua: nada de cor nova,
   nada de raio novo, nada de sombra. Só a linguagem que já existe
   (régua fina, mono tabular, chanfro a 45) aplicada onde faltava.
   ============================================================ */

/* ---- PRODUTO: o que não é foto nem coluna de decisão ocupa a linha toda ----
   Abas, "quem viu também" e a etiqueta de promoção são filhos diretos do
   div.product. Sem esta regra eles entram como células da grade de 2 colunas e
   a aba Descrição vai parar dentro da coluna estreita da foto. */
.mon-prod{position:relative}
.mon-prod > *:not(.images):not(.summary):not(.mon-gal){grid-column:1/-1}
.mon-prod > .onsale{
  position:absolute;top:12px;left:12px;z-index:2;grid-column:auto;
  background:var(--accent);color:#fff;font-family:var(--mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:var(--raio);margin:0
}

/* ---- CAMINHO (breadcrumb) ---- */
.mon-crumbs{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--text-secondary);
  padding:16px 0 0
}
.mon-crumbs a{color:var(--text-secondary);text-decoration:none}
.mon-crumbs a:hover{color:var(--accent);text-decoration:underline}
.mon-crumbs__sep{padding:0 .5em;color:var(--line-forte)}

/* ---- FILTRO DE TAMANHO NO TOPO DA VITRINE ---- */
.mon-filtro{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:20px}
.mon-filtro__rot{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);font-weight:600;flex:0 0 auto
}
.mon-filtro .mon-swatch{padding:8px 14px;font-size:13.5px}

/* ---- PÁGINAS ---- */
.mon-pagina__meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--text-secondary);margin:8px 0 0
}
.mon-conteudo--largo{max-width:none}

/* ---- LISTA DE PUBLICAÇÕES ----
   Linha de lista de corte, não cartão: data em mono na coluna da esquerda,
   régua fina separando. Não finge capa onde não há foto. */
.mon-lista{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.mon-lista li{border-bottom:1px solid var(--line)}
.mon-artigo{
  display:grid;grid-template-columns:108px minmax(0,1fr);gap:var(--gap);
  padding:20px 0;align-items:baseline
}
.mon-artigo__d{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-secondary);
  font-variant-numeric:tabular-nums
}
.mon-artigo__t{
  font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;
  color:var(--ink);text-decoration:none;display:block;margin-bottom:6px;
  transition:color .16s var(--ease)
}
.mon-artigo__t:hover{color:var(--accent)}
.mon-artigo__r{color:var(--text-secondary);font-size:14.5px;margin:0;max-width:62ch}

.mon-capa{margin:0 0 26px}
.mon-capa img{border:1px solid var(--line);border-radius:var(--raio)}
.mon-capa figcaption{
  font-family:var(--mono);font-size:11.5px;color:var(--text-secondary);margin-top:8px
}

.mon-vizinhos{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  border-top:1px solid var(--line);margin-top:40px;padding-top:20px
}
.mon-vizinhos a{display:block;text-decoration:none;color:var(--ink)}
.mon-vizinhos--dir{text-align:right}
.mon-vizinhos span{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:4px
}
.mon-vizinhos b{font-family:var(--display);font-size:15.5px;line-height:1.25}
.mon-vizinhos a:hover b{color:var(--accent)}

/* ---- ESTADO VAZIO ---- */
.mon-vazio{padding:clamp(28px,5vw,48px);text-align:center;margin-top:8px}
.mon-vazio h2{font-size:clamp(21px,2.2vw,27px);margin-bottom:.4em}
.mon-vazio p{color:var(--text-secondary);margin:0 0 18px}
.mon-vazio .search-form{justify-content:center}

/* ---- PAGINAÇÃO ---- */
.mon-pag,.woocommerce-pagination{margin:34px 0 0}
.mon-pag .nav-links,.woocommerce-pagination ul{
  display:flex;gap:7px;flex-wrap:wrap;list-style:none;padding:0;margin:0;border:0
}
.woocommerce-pagination ul li{border:0;margin:0}
.page-numbers{
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  min-width:38px;padding:9px 12px;text-align:center;text-decoration:none;
  border:1px solid var(--line-forte);border-radius:var(--raio);
  color:var(--ink);background:var(--panel);display:block
}
a.page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}
.page-numbers.dots{border-color:transparent;background:none}

/* ---- BUSCA ---- */
.search-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.search-form label{flex:1 1 220px;margin:0}
.search-field{
  width:100%;padding:12px 14px;border:1px solid var(--line-forte);border-radius:var(--raio);
  background:var(--panel);color:var(--ink);font-family:var(--body);font-size:15px
}
.search-submit{
  font-family:var(--display);font-weight:700;font-size:14px;padding:12px 22px;cursor:pointer;
  border:1px solid var(--accent);border-radius:var(--raio);background:var(--accent);color:#fff
}
.search-submit:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* ---- 404: a moldura vazia ----
   Numa fábrica de molduras, moldura vazia não é erro - é o produto. Então a
   página que não achou nada aparece DENTRO de uma, com o corte a 45 nos quatro
   cantos. É o único lugar da página onde há gesto; o resto fica quieto. */
.mon-404{padding:0 0 70px;text-align:center}
.mon-moldura{
  --perfil:clamp(14px,2.4vw,24px);
  position:relative;background:var(--ink);padding:var(--perfil);
  border-radius:var(--raio);max-width:730px;margin:clamp(30px,6vw,64px) auto 0
}
.mon-moldura__area{
  background:var(--panel);
  padding:clamp(28px,5vw,56px) clamp(20px,4vw,46px)
}
.mon-moldura__area h1{font-size:clamp(25px,3.2vw,40px);margin-bottom:.45em}
.mon-moldura__m{
  position:absolute;width:calc(var(--perfil) * 1.4143);height:1px;
  background:rgba(255,255,255,.30);pointer-events:none
}
.mon-moldura__m--te{top:0;left:0;transform-origin:0 0;transform:rotate(45deg)}
.mon-moldura__m--td{top:0;right:0;transform-origin:100% 0;transform:rotate(-45deg)}
.mon-moldura__m--be{bottom:0;left:0;transform-origin:0 100%;transform:rotate(-45deg)}
.mon-moldura__m--bd{bottom:0;right:0;transform-origin:100% 100%;transform:rotate(45deg)}
.mon-404__lede{color:var(--text-secondary);margin:0 auto;max-width:46ch}
.mon-404__saida{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:14px}
.mon-404__linhas{font-size:14px;color:var(--text-secondary);margin:0}
.mon-404__saida .search-form{margin-top:4px;max-width:440px;width:100%}

/* ---- RODAPÉ: contato ---- */
.mon-foot__contato{list-style:none;padding:0;margin:15px 0 0}
.mon-foot__contato li{margin-bottom:7px}
.mon-foot__hora{color:#A79E8C}

@media (max-width:680px){
  .mon-artigo{grid-template-columns:1fr;gap:6px}
  .mon-vizinhos{grid-template-columns:1fr;gap:18px}
  .mon-vizinhos--dir{text-align:left}
  .mon-filtro{gap:9px}
}
.mon-swatch[disabled]{opacity:.42;cursor:not-allowed;border-style:dashed}
.mon-swatch[disabled]:hover{border-color:var(--line-forte);color:var(--ink)}
/* wp_nav_menu com items_wrap '%3$s' devolve <li> soltos dentro do <nav>: sem esta
   linha, o menu que ele montar no painel aparece com marcador de lista. */
.mon-nav li{list-style:none;display:block;margin:0}

/* ---- correções vistas na primeira renderização no ar (21/08) ---- */

/* O cartão inteiro é um link: sem isto o título sai verde e sublinhado, como
   se fosse texto de corpo com link, e a grade perde o silêncio. */
.woocommerce ul.products li.product a{color:var(--ink);text-decoration:none}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{color:var(--accent)}

/* A tira de miniaturas é um <ol>: sem isto o WooCommerce numera "1. 2. 3." ao
   lado de cada foto. */
.woocommerce div.product .flex-control-thumbs{list-style:none;padding:0}
.woocommerce div.product .flex-control-nav{list-style:none;padding:0;margin:0}

/* A lupa do zoom fica sobre a foto, no canto, e não solta acima dela. */
.woocommerce div.product div.images{position:relative}
.woocommerce div.product .woocommerce-product-gallery__trigger{
  position:absolute;top:10px;right:10px;z-index:3;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);
  text-decoration:none;font-size:16px;line-height:1
}
.woocommerce div.product .woocommerce-product-gallery__trigger:hover{border-color:var(--accent)}

/* Célula vazia no fim da grade de tamanhos não pode aparecer como bloco cinza:
   a linha agora é desenhada por borda no item, não pelo fundo do contêiner. */
.mon-grade__item{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

/* O diagrama tem viewBox de 300x210: solto em coluna de 700px ele vira um bloco
   de 480px de altura e as cotas saem gigantes. A assinatura tem de ser a mais
   memorável da página, não a mais alta dela. */
.mon-diag svg{max-width:430px;margin-inline:auto}

/* A foto NAO gruda. Ela grudava para nao deixar vazio o lado esquerdo, mas na leitura
   real acompanhava o scroll e atrapalhava o texto da direita (relato dele, 22/08).
   Vazio embaixo da foto e melhor que foto por cima do texto. */
@media (min-width:901px){
  .woocommerce div.product div.images{align-self:start}
}

/* ---- ATACADO: a escada de desconto ----
   Tabela, não cartões: é uma escada de valores comparáveis, e escada se lê em
   coluna. Números em mono tabular para alinhar na vírgula. */
.mon-atacado{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);
  margin:0 0 22px;overflow:hidden
}
.mon-atacado__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 17px 11px;border-bottom:1px solid var(--line)
}
.mon-atacado__head h3{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);margin:0
}
.mon-atacado__head span{font-family:var(--mono);font-size:11px;color:var(--text-secondary)}
.mon-atacado__tab{width:100%;border-collapse:collapse}
.mon-atacado__tab tr{border-bottom:1px solid var(--line)}
.mon-atacado__tab tr:last-child{border-bottom:0}
.mon-atacado__tab th{
  text-align:left;font-weight:400;font-size:14.5px;padding:11px 17px;color:var(--ink)
}
.mon-atacado__off{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;
  color:var(--accent);font-weight:700;text-align:right;padding:11px 10px;white-space:nowrap
}
.mon-atacado__un{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:14px;
  color:var(--text-secondary);text-align:right;padding:11px 17px;white-space:nowrap;min-width:92px
}
.mon-atacado__pix{
  margin:0;padding:11px 17px;border-top:1px solid var(--line-forte);
  background:var(--accent-muted);font-size:13.5px;color:var(--ink)
}

/* O desconto aparece como linha no carrinho: verde e legível, não como "taxa". */
.woocommerce-cart .cart-subtotal + tr .amount,
.woocommerce table.shop_table tr.fee .amount{color:var(--accent);font-weight:700}

/* ============================================================
   MENU CENTRAL (21/08) — o padrão que ele já conhece da loja da PosterOn:
   marca à esquerda, navegação no MEIO, carrinho à direita. Grid de 3 colunas
   (1fr auto 1fr) porque `margin:auto` num flex centraliza no espaço que sobra,
   não na tela — com a marca de um lado e o carrinho do outro, o menu sairia
   torto.
   ============================================================ */
.mon-head__in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--gap);min-height:64px
}
/* 24/09 - A MESMA BARRA DA HOME (e da PosterOn): menu à ESQUERDA, logo GRANDE ao CENTRO
   (64px, encolhe para 36px ao rolar - body.rolou), carrinho à direita. Ele: "a barra
   superior não funciona em todas as páginas" - agora é uma só. */
/* 24/09 (3a rodada) - logo AO CENTRO (absoluta), menu e carrinho À DIREITA. Igual à home. */
/* 24/09 - ele: "a posição da logo está diferente da home em relação às outras páginas".
   Medido a 1366 px: a barra da home tinha 76 px de altura e ia de ponta a ponta (padding 4vw);
   a das outras páginas tinha 40 px e ficava presa nos 1180 px do conteúdo - a logo de 64 px
   vazava para cima. Agora as duas têm a MESMA caixa: 76 px, largura total, 4vw de margem. */
.mon-head__in{display:flex;justify-content:space-between;position:relative;
  width:auto;margin:0;padding:0 4vw;min-height:76px}
/* 25/09 - so no CABECALHO: a regra solta pegava a logo do RODAPE (mesma classe) e a punha sobre o texto */
.mon-head .mon-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.mon-foot .mon-brand{position:static;transform:none;margin-bottom:14px}
/* 25/09 - menu à esquerda, logo ao centro, carrinho à direita (igual à home) */
.mon-nav{order:1;display:flex;align-items:center;margin:0}
.mon-head .mon-brand svg{height:64px;width:185.5px;transition:height .35s var(--ease),width .35s var(--ease)}
body.rolou .mon-head .mon-brand svg{height:36px;width:104.3px}
/* em tela media (notebook menor) o menu a direita encostava na logo central */
/* (26/09) a logo não encolhe mais a 1180 px: fica com 64 px como na PosterOn */
@media (max-width:1100px){.mon-menu{gap:12px}.mon-menu > li > a{font-size:13.5px}}
.mon-head__dir{order:3;margin-left:auto;display:flex;align-items:center;gap:10px}

.mon-menu{display:flex;align-items:center;gap:clamp(14px,2vw,28px);list-style:none;margin:0;padding:0}
.mon-menu > li{position:relative;list-style:none;margin:0}
.mon-menu > li > a{
  display:block;color:var(--ink);text-decoration:none;font-size:14.5px;
  padding:8px 0;border-bottom:1.5px solid transparent;white-space:nowrap;
  transition:border-color .18s var(--ease),color .18s var(--ease)
}
.mon-menu > li > a:hover,
.mon-menu > li.current-menu-item > a,
.mon-menu > li.current-menu-parent > a{border-bottom-color:var(--accent)}

/* a setinha só onde existe submenu — é ela que avisa que há mais embaixo */
.mon-menu > li.menu-item-has-children > a::after{
  content:"";display:inline-block;margin-left:7px;vertical-align:middle;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)
}

.sub-menu{
  position:absolute;top:100%;left:50%;z-index:70;
  transform:translateX(-50%) translateY(7px);
  min-width:212px;list-style:none;margin:0;padding:7px 0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);
  box-shadow:0 14px 34px rgba(25,22,18,.10);
  opacity:0;visibility:hidden;
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s
}
.mon-menu > li:hover > .sub-menu,
.mon-menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub-menu li{list-style:none;margin:0}
.sub-menu a{
  display:block;padding:9px 17px;font-size:14px;white-space:nowrap;
  color:var(--ink);text-decoration:none;border:0
}
.sub-menu a:hover{background:var(--accent-muted);color:var(--accent)}

/* a ponte invisível entre o item e o submenu: sem ela o menu fecha no vão de 7px */
.mon-menu > li.menu-item-has-children::after{
  content:"";position:absolute;top:100%;left:0;right:0;height:9px
}

/* menu do celular a partir de 1000 px (como a PosterOn); logo de 56 px (com o carrinho e o menu, 64 px não cabia em 375) */
@media (max-width:1000px){
  .mon-head__in{justify-content:space-between}
  .mon-head .mon-brand{position:static;transform:none;order:1}
  .mon-head .mon-brand svg{height:56px;width:162.3px}
  body.rolou .mon-head .mon-brand svg{height:36px;width:104.3px}
  .mon-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--canvas);border-bottom:1px solid var(--line);padding:4px 0
  }
  .mon-nav.is-open{display:block}
  .mon-menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .mon-menu > li > a{padding:16px 6vw;border-bottom:1px solid var(--line)}
  .mon-menu > li.menu-item-has-children > a::after{float:right;margin-top:7px}
  /* no celular o submenu fica aberto: menu que exige dois toques esconde catálogo */
  .sub-menu{
    position:static;transform:none;opacity:1;visibility:visible;
    border:0;box-shadow:none;background:transparent;padding:2px 0 8px;min-width:0
  }
  .sub-menu a{padding:9px 6vw 9px calc(6vw + 18px);color:var(--text-secondary);font-size:13.5px}
  .mon-menu > li.menu-item-has-children::after{content:none}
  .mon-burger{display:block}
}

/* 25/09 - diferenciais: faixa da vitrine e lista da página de produto (functions.php, mon_diferenciais) */
.mon-dif-faixa{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;font-weight:600;color:var(--ink)}
.mon-dif-faixa li{display:flex;align-items:center;gap:7px}
.mon-dif-faixa svg{width:18px;height:18px;color:var(--accent);flex:none}
.mon-dif{clear:both;margin:40px 0 10px;padding:28px 0 0;border-top:1px solid var(--line)}
.mon-dif__tit{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.mon-dif ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mon-dif li{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.mon-dif li svg{width:24px;height:24px;color:var(--accent);flex:none;margin-top:2px}
.mon-dif b{display:block;font-size:14.5px;margin-bottom:4px}
.mon-dif span{display:block;font-size:13px;line-height:1.5;color:var(--text-secondary)}
@media (max-width:900px){.mon-dif ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.mon-dif ul{grid-template-columns:1fr}}

/* 25/09 - com "Diferenciais" o menu encostava na logo centrada em 1366 px: mais justo até 1500 */
/* 26/09 - o mesmo topo da PosterOn: 93 px no topo (logo de 64 a 14 px da borda), 76 px ao rolar,
   links a 0,92rem com 1,4rem entre eles */
.mon-head__in{min-height:93px;align-items:center;transition:min-height .35s var(--ease)}
body.rolou .mon-head__in{min-height:76px}

.mon-menu{gap:1.4rem}.mon-menu > li > a{font-size:.92rem}
@media (min-width:1001px) and (max-width:1180px){.mon-menu{gap:12px}.mon-menu > li > a{font-size:13.5px}}

/* ============================================================
   25/09 - A PÁGINA DE PRODUTO: galeria por variação, preço, detalhes
   ============================================================ */
/* foto, diagrama e seleção no MESMO plano: a foto agora tem 100 poses e merece a coluna maior */
.mon-prod{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
.mon-gal{position:relative}
.mon-gal__palco{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--raio);background:#fff;aspect-ratio:1400/1094;cursor:zoom-in;outline:0}
.mon-gal__palco:focus-visible{box-shadow:0 0 0 3px var(--accent-muted)}
.mon-gal__img{width:100%;height:100%;object-fit:cover;display:block;border:0!important;border-radius:0!important;transition:transform .25s var(--ease);transform-origin:50% 50%}
.mon-gal__palco.zoom .mon-gal__img{transform:scale(2.1)}
.mon-gal__bt{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:999px;border:1px solid var(--line);
  background:rgba(246,242,234,.94);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:border-color .16s,color .16s}
.mon-gal__bt:hover{border-color:var(--accent);color:var(--accent)}
.mon-gal__bt svg{width:20px;height:20px}
.mon-gal__bt--esq{left:10px}.mon-gal__bt--dir{right:10px}
.mon-gal__n,.mon-gal__leg{position:absolute;bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(246,242,234,.94);border:1px solid var(--line);border-radius:999px;padding:5px 10px;color:var(--text-secondary);z-index:2;pointer-events:none}
.mon-gal__n{right:10px}.mon-gal__leg{left:10px}
.mon-gal__tira{display:flex;gap:7px;margin-top:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:4px}
.mon-gal__tira button{flex:0 0 72px;padding:0;border:1px solid var(--line);border-radius:var(--raio);background:#fff;cursor:pointer;overflow:hidden;scroll-snap-align:start;opacity:.62;transition:opacity .16s,border-color .16s}
.mon-gal__tira button img{display:block;width:100%;height:auto;aspect-ratio:120/94;object-fit:cover;border:0!important;border-radius:0!important}
.mon-gal__tira button:hover,.mon-gal__tira button[aria-current="true"]{opacity:1;border-color:var(--accent)}

/* preço */
.mon-preco{margin:0 0 6px}
.mon-preco__rot{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-weight:600;margin-bottom:2px}
.mon-preco__valor{font-family:var(--display);font-weight:700;font-size:34px;line-height:1.1;color:var(--ink);letter-spacing:-.01em}
.mon-preco__valor .woocommerce-Price-amount{font-family:var(--display)}
.mon-preco__valor del{font-size:.55em;color:var(--text-secondary);font-weight:500}
.mon-preco__valor ins{text-decoration:none}
.mon-preco__valor--certo{color:var(--accent)}
.mon-preco__sub{display:block;margin-top:6px;font-size:12.5px;color:var(--text-secondary)}
.mon-preco__sub b{color:var(--accent)}
.woocommerce div.product .woocommerce-variation-price{display:none}
.mon-precoNota{margin:0 0 16px}

/* os detalhes, abaixo das colunas */
.mon-detalhes{margin-top:28px;border-top:1px solid var(--line);padding-top:8px}
.mon-detalhes__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.9fr);gap:0 28px;align-items:start}
.mon-det{border-bottom:1px solid var(--line);padding:6px 0 18px}
.mon-det summary{list-style:none;cursor:default;padding:14px 0 10px}
.mon-det summary::-webkit-details-marker{display:none}
.mon-det summary h2{font-size:17px;margin:0;display:flex;align-items:center;justify-content:space-between}
.mon-det summary h2::after{content:"";width:9px;height:9px;border-right:2px solid var(--line-forte);border-bottom:2px solid var(--line-forte);transform:rotate(45deg);display:none}
.mon-det__lead{font-size:14.5px;color:var(--text-secondary);margin:0 0 14px}
.mon-det .mon-grade{margin:0}
.mon-det .mon-ficha{border-top:0;margin-top:0;padding-top:0}
.mon-det .mon-atacado{margin:0}
.mon-desc{columns:2;column-gap:40px;font-size:15px;max-width:none}
.mon-desc h3{font-size:15.5px;margin:18px 0 6px;break-after:avoid}
.mon-desc h3:first-child{margin-top:0}
.mon-desc p{margin:0 0 10px;break-inside:avoid}
.mon-desc__links{column-span:all;padding-top:6px;color:var(--text-secondary)}
.mon-det .mon-dif{border-top:0;margin:0;padding:0}
@media (max-width:1100px){.mon-detalhes__grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .mon-prod{grid-template-columns:1fr}
  .mon-detalhes__grid{grid-template-columns:1fr}
  .mon-det summary{cursor:pointer}
  .mon-det summary h2::after{display:block}
  .mon-det[open] summary h2::after{transform:rotate(-135deg)}
  .mon-desc{columns:1}
  .mon-preco__valor{font-size:30px}
  .mon-gal__tira button{flex-basis:64px}
}
/* 25/09 - o diagrama vem depois da seleção e menor: a seleção tem de caber na 1ª tela */
.mon-diag svg{max-width:340px}
.mon-diag{margin-top:6px}
/* 25/09 (2) - coluna da foto: galeria + diagrama, grudada ao rolar; a coluna da decisão fica curta */
/* sem sticky: os detalhes estão DENTRO do mesmo contêiner e a foto grudada passava por cima deles */
.mon-gal .mon-diag{margin-top:14px}
.mon-gal .mon-diag svg{max-width:300px}
@media (max-width:900px){.mon-gal{position:static}}
/* 25/09 (3) - seletores | painel "A medida certa" LADO A LADO; comprar embaixo, na largura toda */
.mon-prod{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.woocommerce div.product .summary form.variations_form{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 20px;align-items:start}
.woocommerce div.product .summary form.variations_form > *{grid-column:1/-1}
.woocommerce div.product .summary form.variations_form > table.variations{grid-column:1;grid-row:1;margin:0}
.woocommerce div.product .summary form.variations_form > .mon-diag{grid-column:2;grid-row:1;margin:0 0 18px;padding:13px 14px 11px}
.summary .mon-diag svg{max-width:100%;margin:0}
.summary .mon-diag__cotas{grid-template-columns:1fr;gap:6px;margin-top:9px;padding-top:9px}
.summary .mon-cota{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px}
.summary .mon-cota b{font-size:13px}
.summary .mon-diag__aviso{font-size:11.5px}
.woocommerce div.product .summary .single_variation_wrap{margin-top:4px}
@media (max-width:1100px){.woocommerce div.product .summary form.variations_form{grid-template-columns:1fr}
  .woocommerce div.product .summary form.variations_form > .mon-diag{grid-column:1;grid-row:auto}}
/* 25/09 (3) - grade de tamanhos sob a foto; embaixo ficam 2 colunas (ficha | atacado) */
.mon-gal .mon-grade{margin:14px 0 0}
.mon-gal .mon-grade__lista{grid-template-columns:repeat(5,minmax(0,1fr))}
.mon-gal .mon-grade__item{padding:10px 10px}
.mon-detalhes__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media (max-width:1100px){.mon-gal .mon-grade__lista{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}}
@media (max-width:900px){.mon-detalhes__grid{grid-template-columns:1fr}}
/* 25/09 (4) - ele: "alinhada, os elementos mais ou menos do mesmo tamanho vertical".
   Os dois viram painéis da MESMA altura (stretch); os seletores se distribuem na altura, e o desenho
   encolhe (max 180 px) para os dois ficarem perto um do outro em vez de o painel ter o dobro. */
.woocommerce div.product .summary form.variations_form{align-items:stretch}
.woocommerce div.product .summary form.variations_form > table.variations{
  display:block;height:auto;align-self:stretch;margin:0 0 18px;box-sizing:border-box;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--raio);padding:14px 16px}
.woocommerce div.product .summary form.variations_form > table.variations tbody{display:flex;flex-direction:column;justify-content:space-between;height:100%;gap:12px}
.woocommerce div.product .summary form.variations_form > table.variations tr{margin:0}
.summary .mon-diag svg{max-height:180px;width:auto;max-width:100%;margin:0 auto}
.summary .mon-diag__head{margin-bottom:6px}
.summary .mon-diag__cotas{gap:4px;margin-top:8px;padding-top:8px}
.summary .mon-cota b{font-size:12.5px}
.summary .mon-cota span{font-size:10px}
.summary .mon-diag__aviso{font-size:11px;margin-top:8px}
@media (max-width:1100px){.woocommerce div.product .summary form.variations_form > table.variations tbody{height:auto}}
/* 25/09 (5) - a caixa dos seletores: botões do mesmo grupo dividem a largura por igual (nada quebra
   de linha, "Sem acrílico" cabia mal), grupos com o mesmo espaço entre si, centrados na altura. */
.woocommerce div.product .summary form.variations_form > table.variations tbody{justify-content:center;gap:18px}
.summary table.variations .mon-swatches{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.summary table.variations .mon-swatch{padding:10px 6px;font-size:13.5px;white-space:nowrap;justify-content:center;text-align:center}
.summary table.variations .mon-swatch--cor{gap:6px}
.woocommerce div.product .summary form.variations_form .reset_variations{display:inline-block;margin-top:8px}
/* 25/09 (6) - o simulador do Melhor Envio vestido com a cara da página (ele: "não parece que pertence à
   página"). Vem DEPOIS do comprar (order), numa linha só: rótulo em mono como os outros · CEP · resultado. */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .quantity{order:1}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button{order:2}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto{order:3;flex:1 1 100%;
  background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--raio)!important;
  padding:12px 16px!important;margin:6px 0 0!important;box-shadow:none!important;width:auto!important;max-width:none!important}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .calculatorRow,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .row{display:block;width:100%!important;padding:0!important;margin:0!important;float:none!important;background:none!important}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .col-75{display:flex!important;align-items:center;gap:14px;width:100%!important;padding:0!important;margin:0!important;float:none!important}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .col-75 p{margin:0!important;padding:0!important;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:8px}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .col-75 p::before{content:"";width:18px;height:18px;flex:none;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h13v11H1zM14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='5.5' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h13v11H1zM14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='5.5' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E") center/contain no-repeat}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto #inputCep{flex:1 1 auto;max-width:200px;margin:0 0 0 auto!important;padding:10px 12px!important;height:auto!important;
  border:1px solid var(--line-forte)!important;border-radius:var(--raio)!important;background:#fff!important;font-family:var(--mono)!important;font-size:14px!important;color:var(--ink);box-shadow:none!important}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto #inputCep:focus{outline:0;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-muted)!important}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto #calcular-frete-loader img{width:18px;height:18px;margin-top:8px}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete table{width:100%;margin:10px 0 0;border-collapse:collapse;font-size:13.5px}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete td,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete th{padding:7px 0;border:0;border-top:1px solid var(--line);text-align:left;background:none}
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete small{display:block;font-size:12px;color:var(--text-secondary);margin-top:6px}
/* 25/09 - com o menu à ESQUERDA, o submenu centrado sob o item vazava para fora da tela (ele: "o hover corta
   um pedaço do lado esquerdo"). Agora alinha pela esquerda do item. */
@media (min-width:901px){.mon-menu .sub-menu{left:-12px;transform:translateY(7px)}
.mon-menu > li:hover > .sub-menu,.mon-menu > li:focus-within > .sub-menu{transform:translateY(0)}}

/* ============================================================
   25/09 - CELULAR, A PALAVRA FINAL (fica no FIM do arquivo de propósito)
   Medido a 375 px: a página de produto estava em DUAS colunas (147 + 172 px) e mais larga que a tela
   (424 px): as regras de desktop acrescentadas depois do @media de 900 px o anulavam. Tudo que é de
   celular e disputa com regra de desktop mora aqui, depois de todas elas.
   ============================================================ */
@media (max-width:900px){
  .mon-prod{grid-template-columns:minmax(0,1fr)}
  .woocommerce div.product .summary form.variations_form{grid-template-columns:minmax(0,1fr)}
  .woocommerce div.product .summary form.variations_form > .mon-diag{grid-column:1;grid-row:auto}
  .woocommerce div.product .summary form.variations_form > table.variations tbody{height:auto}
  .mon-detalhes__grid{grid-template-columns:minmax(0,1fr)}
  /* ordem no celular: foto -> miniaturas -> título, preço e compra -> todos os tamanhos -> detalhes.
     A grade mora dentro da .mon-gal (coluna da foto); display:contents a solta para a ordem valer. */
  .mon-prod > *{order:10}
  .mon-gal{display:contents}
  .mon-gal__palco{order:1}
  .mon-gal__tira{order:2;min-width:0}
  .mon-prod > .summary{order:3}
  .mon-gal .mon-grade{order:4;margin:6px 0 0}
  .mon-gal .mon-grade__lista{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .mon-gal__bt{width:36px;height:36px}
  /* no celular o botão de comprar vem logo depois da seleção; o desenho das medidas desce */
  .woocommerce div.product .summary form.variations_form > *{order:5}
  .woocommerce div.product .summary form.variations_form > table.variations{order:1}
  .woocommerce div.product .summary form.variations_form > .single_variation_wrap{order:2}
  .woocommerce div.product .summary form.variations_form > .mon-diag{order:3;margin-top:14px}
  .mon-preco__valor{font-size:28px}
}
/* 25/09 - Minha conta no topo das páginas internas: discreto, ao lado do carrinho */
.mon-conta{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;font-size:13.5px;padding:8px 4px}
.mon-conta:hover{color:var(--accent)}
.mon-conta svg{width:18px;height:18px;flex:none}
@media (max-width:1100px){.mon-conta span{display:none}}
@media (max-width:680px){.mon-conta{order:1}}
/* 25/09 - o modelo do rodapé da PosterOn: "Fábrica de molduras." grande, depois o texto curto */
.mon-foot__titulo{font-family:var(--display);font-weight:700;font-size:1.35rem;color:#F5F3EC;margin:16px 0 8px;letter-spacing:-.01em;line-height:1.2}
.mon-foot__titulo + .mon-foot__tag{margin-top:0}

/* 26/09 - CELULAR, padrão comum com a PosterOn (ele: "a versão mobile otimizada da mesma forma nos dois sites").
   Medido a 375 px: a loja tinha 24 cartões em 1 coluna (12.953 px de rolagem) -> 2 colunas; o rodapé empilhava as
   3 colunas -> marca na largura toda e "A loja" | "Ajuda" lado a lado. */
@media (max-width:600px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:13.5px!important;padding:10px 10px 2px!important}
  .woocommerce ul.products li.product .price{padding:0 10px;font-size:13px!important}
  .woocommerce ul.products li.product .mon-card__meta{padding:4px 10px 0}
  .woocommerce ul.products li.product .button{margin:10px;width:calc(100% - 20px);font-size:13px;padding:10px 6px}
  .mon-foot__grid{grid-template-columns:1fr 1fr;gap:28px 20px}
  .mon-foot__brand{grid-column:1/-1}
}

/* ============================================================
   26/09 - MINHA CONTA (ele: "está todo quebrado o layout, melhore e deixe mais bonito").
   O WooCommerce aqui roda SEM a folha dele (woocommerce_enqueue_styles vazio): os campos saíam com
   201 px e o rótulo ao lado, o "Lembre-me" colado no botão e o botão de ver a senha com 15 x 5 px.
   Deslogado: dois cartões lado a lado (Entrar | Criar conta). Logado: menu à esquerda, conteúdo à direita.
   ============================================================ */
.woocommerce-account .mon-conteudo{max-width:none}
.mon-conta-intro{color:var(--text-secondary);font-size:15.5px;max-width:62ch;margin:-8px 0 26px}
#customer_login{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
#customer_login::before,#customer_login::after{content:none}
#customer_login .u-column1,#customer_login .u-column2{width:auto!important;float:none!important;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px}
#customer_login .u-column1{border-top:3px solid var(--accent)}
#customer_login h2{font-size:20px;margin:0 0 4px}
#customer_login .mon-conta-sub{font-size:13.5px;color:var(--text-secondary);margin:0 0 18px}
.woocommerce-account .woocommerce-form .form-row,
.woocommerce-lost-password .woocommerce-form .form-row,
.woocommerce-account .woocommerce-EditAccountForm .form-row,
.woocommerce-account .woocommerce-address-fields .form-row{display:block;width:100%;margin:0 0 14px;padding:0;float:none}
.woocommerce-account .woocommerce-form .form-row label,
.woocommerce-lost-password .woocommerce-form .form-row label,
.woocommerce-account .woocommerce-EditAccountForm .form-row label,
.woocommerce-account .woocommerce-address-fields .form-row label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 6px}
.woocommerce-account .woocommerce-form .required,.woocommerce-account .woocommerce-EditAccountForm .required{color:var(--accent);text-decoration:none;border:0}
.woocommerce-account form .form-row input.input-text,
.woocommerce-lost-password form .form-row input.input-text{width:100%;box-sizing:border-box;height:46px;background:#fff}
.woocommerce-account form .form-row input.input-text:focus,
.woocommerce-lost-password form .form-row input.input-text:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
/* o "ver a senha" do WooCommerce, sem a folha dele: um olho dentro do campo */
.woocommerce .password-input{position:relative;display:block}
.woocommerce .password-input input.input-text{padding-right:44px}
.woocommerce .show-password-input{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  border:0;border-radius:8px;background:transparent;cursor:pointer;padding:0}
.woocommerce .show-password-input::after{content:"";position:absolute;inset:8px;background:var(--text-secondary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.woocommerce .show-password-input.display-password::after{background:var(--accent)}
.woocommerce .show-password-input:hover{background:var(--accent-muted)}
/* "Lembre-me" numa linha, o botão na largura toda embaixo */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme){display:flex;flex-direction:column;align-items:stretch;gap:14px}
.woocommerce-form-login__rememberme{display:inline-flex!important;align-items:center;gap:8px;font-size:13.5px!important;font-weight:500!important;color:var(--text-secondary)!important;cursor:pointer}
.woocommerce-form-login__rememberme input{width:16px;height:16px;accent-color:var(--accent);margin:0}
.woocommerce-account .woocommerce-form .button,.woocommerce-lost-password .woocommerce-form .button,
.woocommerce-account .woocommerce-EditAccountForm .button,.woocommerce-account .woocommerce-address-fields .button{
  width:100%;height:48px;border:0;border-radius:var(--raio);background:var(--accent);color:#fff;font-family:var(--display);
  font-weight:600;font-size:15px;cursor:pointer;margin:0}
.woocommerce-account .woocommerce-form .button:hover,.woocommerce-lost-password .woocommerce-form .button:hover,
.woocommerce-account .woocommerce-EditAccountForm .button:hover,.woocommerce-account .woocommerce-address-fields .button:hover{background:var(--accent-hover);color:#fff}
.woocommerce-form-register .button{background:var(--ink)!important}
.woocommerce-form-register .button:hover{background:#000!important}
.woocommerce-LostPassword{margin:14px 0 0;font-size:13.5px;text-align:center}
.woocommerce-form-register p:not(.form-row){font-size:13.5px;color:var(--text-secondary);margin:0 0 16px}
.woocommerce-privacy-policy-text p{font-size:12px!important;color:var(--text-secondary)}
/* logado: menu à esquerda, conteúdo à direita */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-MyAccount-navigation{float:none!important;width:auto!important;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation a{display:block;padding:11px 14px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:14.5px}
.woocommerce-MyAccount-navigation a:hover{background:var(--accent-muted);color:var(--accent)}
.woocommerce-MyAccount-navigation .is-active a{background:var(--accent);color:#fff}
.woocommerce-MyAccount-navigation .is-active a:hover{color:#fff}
.woocommerce-MyAccount-content{float:none!important;width:auto!important;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 26px;font-size:15px}
.woocommerce-MyAccount-content p:first-child{margin-top:0}
.woocommerce-account .woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.woocommerce-account .woocommerce-Addresses::before,.woocommerce-account .woocommerce-Addresses::after{content:none}
.woocommerce-account .woocommerce-Address{width:auto!important;float:none!important;border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.woocommerce-account .woocommerce-Address-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.woocommerce-account .woocommerce-Address-title h2{font-size:17px;margin:0 0 8px}
.woocommerce-account .form-row-first,.woocommerce-account .form-row-last{display:inline-block!important;width:calc(50% - 8px)!important;vertical-align:top}
.woocommerce-account .form-row-first{margin-right:12px!important}
.woocommerce-account fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:18px 0}
.woocommerce-account fieldset legend{font-weight:600;padding:0 6px}
/* "perdeu a senha" e "definir senha": o formulário num cartão só, centrado */
.woocommerce-lost-password .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-ResetPassword{max-width:460px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:14px;padding:26px}
@media (max-width:760px){
  #customer_login{grid-template-columns:1fr}
  #customer_login .u-column1,#customer_login .u-column2{padding:22px 18px 18px}
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr;gap:16px}
  .woocommerce-MyAccount-navigation ul{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin}
  .woocommerce-MyAccount-navigation a{white-space:nowrap;padding:9px 12px;font-size:13.5px}
  .woocommerce-MyAccount-content{padding:18px 16px}
  .woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr}
  .woocommerce-account .form-row-first,.woocommerce-account .form-row-last{display:block!important;width:100%!important;margin-right:0!important}
}
/* "perdeu a senha": o formulário do WooCommerce ali não tem a classe .woocommerce-form - mesma roupa por classe própria */
.woocommerce-ResetPassword .form-row{display:block;width:100%!important;float:none!important;margin:0 0 14px;padding:0}
.woocommerce-ResetPassword .form-row label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:0 0 6px}
.woocommerce-ResetPassword input.input-text{width:100%;box-sizing:border-box;height:46px;background:#fff}
.woocommerce-ResetPassword .button{width:100%;height:48px;border:0;border-radius:var(--raio);background:var(--accent);color:#fff;font-family:var(--display);font-weight:600;font-size:15px;cursor:pointer}
.woocommerce-ResetPassword .button:hover{background:var(--accent-hover);color:#fff}
.woocommerce-ResetPassword > p:first-child{margin-top:0;color:var(--text-secondary);font-size:14.5px}

/* 26/09 - igual à PosterOn: no celular "Minha conta" é item do menu, e abaixo de 600 px o ícone sai do topo */
.mon-menu .so-celular{display:none}
@media (max-width:1000px){.mon-menu .so-celular{display:block}}
@media (max-width:600px){.mon-conta{display:none}}

/* ============================================================
   26/09 - GALERIA NO CELULAR (ele: "quando clica dá zoom e não consegue passar para a próxima foto")
   Faixa de arrastar nativa (scroll-snap) no lugar da foto única; sem zoom no toque; tocar abre a
   tela cheia. No computador nada muda (a classe .movel só entra em tela de toque ou estreita).
   ============================================================ */
.mon-gal__palco.movel{cursor:pointer}
.mon-gal__palco.movel .mon-gal__img,.mon-gal__palco.movel .mon-gal__bt{display:none}
.mon-gal__trilho{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.mon-gal__trilho::-webkit-scrollbar{display:none}
.mon-gal__slide{flex:0 0 100%;height:100%;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.mon-gal__slide img{width:100%;height:100%;object-fit:cover;display:block;border:0!important;border-radius:0!important}
.mon-gal__palco.movel::after{content:"";position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:999px;
  background:rgba(246,242,234,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191612' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/16px no-repeat;
  border:1px solid var(--line);pointer-events:none}
/* a tela cheia */
.mon-tela{position:fixed;inset:0;z-index:400;background:#11100e;display:flex;flex-direction:column;touch-action:pan-x pan-y pinch-zoom}
.mon-tela[hidden]{display:none}
.mon-tela__topo{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 16px;color:#EDE8DE;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.mon-tela__leg{color:#A79E8C;text-transform:uppercase}
.mon-tela__fechar{margin-left:auto;width:44px;height:44px;border-radius:999px;border:1px solid rgba(237,232,222,.28);
  background:rgba(237,232,222,.08);color:#EDE8DE;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.mon-tela__trilho{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.mon-tela__trilho::-webkit-scrollbar{display:none}
.mon-tela__slide{flex:0 0 100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.mon-tela__slide img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.mon-tela__dica{margin:0;padding:10px 16px 16px;text-align:center;color:#8A8274;font-size:12px}
html.mon-tela-aberta,html.mon-tela-aberta body{overflow:hidden}
html.mon-tela-aberta .mon-zap{display:none}


/* ============================================================
   26/09 - ZOOM TRAVADO NO CELULAR (a trava: functions.php, seção 21) + dois ajustes do produto no celular
   ============================================================ */
/* sem zoom de toque duplo (no iPhone é o que sobra depois da trava da pinça); a tela cheia da galeria
   continua com a pinça (.mon-tela: pan-x pan-y pinch-zoom, que cabe dentro do manipulation) */
html{touch-action:manipulation}
@media (max-width:600px){
  /* frete: o rótulo em cima e o campo na largura toda ("Informe seu cep" saía cortado), com 16 px - abaixo
     disso o iPhone amplia a página sozinho ao tocar no campo */
  #woocommerce-correios-calculo-de-frete-na-pagina-do-produto .col-75{flex-wrap:wrap;gap:10px}
  #woocommerce-correios-calculo-de-frete-na-pagina-do-produto #inputCep{flex:1 1 100%;max-width:none;margin:0!important;font-size:16px!important}
  .woocommerce .quantity .qty{font-size:16px}
  /* trilha do produto numa linha só: o nome do produto é o título logo abaixo */
  .single-product .mon-crumbs__i:last-child,.single-product .mon-crumbs__sep:nth-last-child(2){display:none}
}


/* ============================================================
   26/09 - LOJA E CARRINHO NO CELULAR (ele: "verifique agora o mobile da loja e do carrinho")
   ============================================================ */
/* cartão: o botão sempre no pé - título de 2 e de 3 linhas na mesma fileira deixava os "Ver opções" desalinhados */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link{flex:1 0 auto}
/* a <ul> da paginação também tem a classe .page-numbers e herdava o fundo dos botões: sobrava uma faixa clara */
.woocommerce-pagination ul{background:none}
/* carrinho e finalizar compra são BLOCOS do WooCommerce: o botão principal vinha no cinza-escuro padrão do
   WordPress, de canto reto e com a fonte do sistema. Fica igual aos botões da loja. */
.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button,.wc-block-components-totals-coupon__button{
  font-family:var(--display)!important;font-weight:700;letter-spacing:.01em;border-radius:var(--raio)!important;
  background:var(--accent)!important;border:1px solid var(--accent)!important;color:#fff!important;
  transition:background .18s var(--ease),transform .18s var(--ease)}
.wc-block-cart__submit-button:hover,.wc-block-components-checkout-place-order-button:hover,.wc-block-components-totals-coupon__button:hover{
  background:var(--accent-hover)!important;border-color:var(--accent-hover)!important;color:#fff!important;transform:translateY(-1px)}
.wc-block-components-totals-coupon__button:disabled{
  background:var(--line)!important;border-color:var(--line)!important;color:var(--text-secondary)!important;transform:none}


/* ============================================================
   26/09 - FINALIZAR COMPRA E CARRINHO NO CELULAR
   O título da página tinha filete + 26 px de margem, e o bloco do WooCommerce abre com mais 24 px e o próprio
   filete: dois traços com um vão vazio entre eles, logo no topo. No celular o título encosta no bloco.
   ============================================================ */
@media (max-width:700px){
  .woocommerce-cart .mon-pagina__head,.woocommerce-checkout .mon-pagina__head{border-bottom:0;margin-bottom:0;padding-bottom:4px}
  .wp-block-woocommerce-checkout,.wp-block-woocommerce-cart{padding-top:6px}
}


/* ============================================================
   26/09 - MENU DO CELULAR (ele: "quando clica nos três pauzinhos o fundo continua se mexendo e o menu fica no
   meio atrapalhando"). Com o menu aberto o <html> ganha .nav-aberta (inc/tema.js): a página não rola, o resto
   escurece e tocar fora fecha. A home tem o próprio menu e a própria classe (.menu-aberto, no front-page.php).
   ============================================================ */
@media (max-width:1000px){
  /* só o <html>: overflow no <body> faz dele o rolador, o cabeçalho sticky deixa de grudar e o menu abria FORA da
     tela com a página rolada (medido: -707 px) */
  html.nav-aberta{overflow:hidden}
  html.nav-aberta .mon-head{background:var(--canvas)}
  html.nav-aberta body::after{content:"";position:fixed;inset:0;z-index:59;background:rgba(25,22,18,.38);touch-action:none}
  .mon-nav.is-open{max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}
}

/* ============================================================
   26/09 - MINHA CONTA NO CELULAR (ele: "verifique agora o mobile da minha conta")
   Entrar, cadastrar e recuperar senha estavam certos a 375 px (cartões empilhados, nada vazando); só os campos
   saíam com 15 px. No celular vão a 16 px: letra maior para quem enxerga pouco e, abaixo de 16, o iPhone amplia a
   página sozinho ao tocar no campo. Vale para todos os formulários do WooCommerce.
   ============================================================ */
@media (max-width:600px){
  .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
  .select2-container--default .select2-selection--single{font-size:16px}
}

/* ============================================================
   26/09 - PÁGINAS DE AJUDA NO CELULAR (ele: "verifique agora o mobile das páginas de ajuda")
   As cinco estavam certas a 375 px. No Contato, o WhatsApp e o e-mail eram alvos de 21 px de altura: no celular o
   toque vale 45 px (preenchimento invisível), sem mudar o desenho.
   ============================================================ */
@media (max-width:600px){
  .mon-contato a{display:inline-block;padding:12px 0}
}

/* ============================================================
   26/09 - CATEGORIAS NO CELULAR (ele: "verifique agora o mobile das páginas de categoria")
   Estavam certas a 375 px (2 colunas, maiores primeiro, botões alinhados). O título passou a dizer o que é a página
   ("Molduras com fundo pardo", woocommerce.php) e os botões de tamanho escrevem "60×90". No celular os botões de
   tamanho (loja e categorias) ficam com 44 px de altura: eram 34, pequenos para o dedo.
   ============================================================ */
@media (max-width:600px){
  .mon-filtro .mon-swatch{padding:13px 15px;font-size:15px}
}

/* ============================================================
   26/09 - CARRINHO EM BLOCOS NO CELULAR: alvos de toque (achado ao conferir o carrinho da PosterOn, que é igual)
   Medido a 375 px: − e + com 30x25, a quantidade com 25 px de altura e letra 13, a lixeira 24x24, o nome 13 px.
   Pequeno para o dedo de quem tem menos habilidade. No celular tudo passa de 44 px e o nome sobe para 15.
   ============================================================ */
@media (max-width:600px){
  /* a linha "quantidade + lixeira" tem ~153 px no celular (mais que isso a tabela passa da tela: medido 370-382 px);
     por isso os botões ficam 34 x 44 e o espaço entre o seletor e a lixeira sai (a lixeira de 44 já tem folga) */
  .wc-block-components-quantity-selector{min-height:44px;width:108px!important}
  .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{min-width:34px;min-height:44px}
  .wc-block-cart-item__quantity{gap:0!important}
  .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{min-height:44px;font-size:16px}
  .wc-block-cart-item__remove-link{min-width:44px;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center}
  .wc-block-cart .wc-block-components-product-name{font-size:15px!important}
}

/* 27/09 - a página filtrada abre na âncora #filtro-tamanho (functions.php, seções 11 e 24): o filtro fica logo abaixo
   do cabeçalho fixo, com folga, e não escondido atrás dele */
#filtro-tamanho{scroll-margin-top:112px}
@media (max-width:1000px){#filtro-tamanho{scroll-margin-top:96px}}

/* 27/09 - CEP no checkout (functions.php, seção 26): enquanto consulta o CEP, um aro girando dentro do campo */
.wc-block-components-text-input[data-mon-cep=buscando]::after{content:"";position:absolute;right:14px;top:50%;
  width:16px;height:16px;margin-top:-8px;border:2px solid var(--line-forte);border-top-color:var(--accent);
  border-radius:50%;animation:mon-gira .7s linear infinite;pointer-events:none}
@keyframes mon-gira{to{transform:rotate(360deg)}}

/* 27/09 - o prazo de envio (functions.php, seção 27): embaixo do frete no carrinho e no cálculo da página de produto */
.wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-shipping::after,
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto .resultado-frete::after{display:block;margin-top:8px;
  font-size:12.5px;line-height:1.45;color:var(--text-secondary)}