/* JG Ajustes — Layout da loja (alternador 2/3/4 colunas) Classes no /: jgaj-shop-cols-2 | jgaj-shop-cols-3 | jgaj-shop-cols-4 */ .jgaj-shop-switcher{ display:inline-flex; gap:8px; align-items:center; margin-right:10px; vertical-align:middle; } .jgaj-shop-switcher .jgaj-shop-btn{ width:34px; height:34px; border:1px solid rgba(0,0,0,0.12); background:#fff; border-radius:6px; padding:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: all .15s ease; line-height:1; } .jgaj-shop-switcher .jgaj-shop-btn:hover{ border-color: rgba(0,0,0,0.25); } .jgaj-shop-switcher .jgaj-shop-btn.active{ border-color: rgba(0,0,0,0.45); box-shadow: 0 0 0 2px rgba(0,0,0,0.06); } .jgaj-shop-ico svg{ display:block; } /* ====== GRID ====== */ html.jgaj-shop-cols-2 .woocommerce ul.products, body.jgaj-shop-cols-2 .woocommerce ul.products, html.jgaj-shop-cols-3 .woocommerce ul.products, body.jgaj-shop-cols-3 .woocommerce ul.products, html.jgaj-shop-cols-4 .woocommerce ul.products, body.jgaj-shop-cols-4 .woocommerce ul.products{ display:grid !important; gap:24px; } /* Ignora floats/clear do tema (ex.: Enfold/Woo) */ html.jgaj-shop-cols-2 .woocommerce ul.products li.product, body.jgaj-shop-cols-2 .woocommerce ul.products li.product, html.jgaj-shop-cols-3 .woocommerce ul.products li.product, body.jgaj-shop-cols-3 .woocommerce ul.products li.product, html.jgaj-shop-cols-4 .woocommerce ul.products li.product, body.jgaj-shop-cols-4 .woocommerce ul.products li.product{ float:none !important; clear:none !important; width:auto !important; margin:0 !important; box-sizing:border-box !important; } /* define colunas */ html.jgaj-shop-cols-2 .woocommerce ul.products, body.jgaj-shop-cols-2 .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); } html.jgaj-shop-cols-3 .woocommerce ul.products, body.jgaj-shop-cols-3 .woocommerce ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)); } html.jgaj-shop-cols-4 .woocommerce ul.products, body.jgaj-shop-cols-4 .woocommerce ul.products{ grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Responsivo: no mobile, no máximo 2 colunas */ @media (max-width: 767px){ html.jgaj-shop-cols-3 .woocommerce ul.products, body.jgaj-shop-cols-3 .woocommerce ul.products, html.jgaj-shop-cols-4 .woocommerce ul.products, body.jgaj-shop-cols-4 .woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .jgaj-shop-switcher{ gap:6px; margin-right:8px; } .jgaj-shop-switcher .jgaj-shop-btn{ width:32px; height:32px; } }