/*
Theme Name: Makroo
Theme URI: https://makroo.com.br
Description: Tema-filho do Storefront com a identidade da Makroo (Grupo ANS). Layout "Mercadão": faixa escura, busca larga, barra azul de categorias, vitrine em cards 1:1, PIX 5%, despacho 24h.
Author: Makroo · Grupo ANS
Template: storefront
Version: 2.0.1
Text Domain: makroo
*/

/* ==================================================================
   1) VARIÁVEIS DA MARCA
   ================================================================== */
:root{
  --mk-blue:#2B6BFF; --mk-blue-dark:#1B4FD1; --mk-blue-tint:#EAF0FF;
  --mk-yellow:#FFCE00; --mk-yellow-dark:#E6B800;
  --mk-green:#12B76A; --mk-green-tint:#E4F7EE; --mk-green-dark:#0B8A50;
  --mk-ink:#16181D; --mk-graphite:#3D4149; --mk-muted:#6C727F; --mk-line:#E3E6EC;
  --mk-bg:#EDEFF3; --mk-danger:#E5352B;
  --mk-shadow:0 1px 2px rgba(22,24,29,.04),0 6px 18px rgba(22,24,29,.07);
  --mk-shadow-lg:0 14px 40px rgba(22,24,29,.14);
  --mk-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

/* ==================================================================
   2) BASE
   ================================================================== */
body,
body.woocommerce,
button, input, select, textarea,
.widget h1,.widget h2,.widget h3{
  font-family:var(--mk-font);
}
body{ background:var(--mk-bg); color:var(--mk-ink); line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:var(--mk-blue); text-decoration:none; }
a:hover{ color:var(--mk-blue-dark); }
h1,h2,h3,h4,h5{ font-family:var(--mk-font); color:var(--mk-ink); letter-spacing:-.5px; font-weight:800; }

.mk-wrap{ max-width:1320px; margin:0 auto; padding:0 20px; }
.col-full{ max-width:1320px !important; padding-left:20px; padding-right:20px; }

.mk-ic{ width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none; }
.mk-ic.sm{ width:16px;height:16px; }
.mk-ic.lg{ width:23px;height:23px; }
.mk-ic.xs{ width:13px;height:13px; }

/* pílulas / selos */
.mk-pill{ display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:6px;line-height:1;letter-spacing:.2px; }
.mk-pill.blue{ background:var(--mk-blue);color:#fff; }
.mk-pill.yellow{ background:var(--mk-yellow);color:var(--mk-ink); }
.mk-pill.green{ background:var(--mk-green-tint);color:var(--mk-green-dark); }
.mk-pill.green-solid{ background:var(--mk-green);color:#fff; }
.mk-pill.off{ background:var(--mk-danger);color:#fff; }
.mk-pill.ink{ background:var(--mk-ink);color:#fff; }

/* ==================================================================
   3) FAIXA ESCURA DO TOPO
   ================================================================== */
.mk-topstrip{ background:var(--mk-ink); color:#c3c8d4; font-size:12.5px; }
.mk-topstrip .mk-wrap{ display:flex;justify-content:space-between;align-items:center;min-height:36px;gap:14px;flex-wrap:wrap; }
.mk-topstrip a{ color:#c3c8d4; }
.mk-topstrip a:hover{ color:#fff; }
.mk-topstrip .mk-x{ display:flex;align-items:center;gap:7px; }
.mk-topstrip .mk-x b{ color:var(--mk-yellow);font-weight:800; }
.mk-topstrip .mk-links{ display:flex;gap:22px;align-items:center; }

/* ==================================================================
   4) CABEÇALHO
   ================================================================== */
.site-header{
  background:#fff !important; box-shadow:0 2px 10px rgba(22,24,29,.06);
  padding:0 !important; border:0 !important; margin:0 !important;
  position:sticky; top:0; z-index:60;
}
.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ .admin-bar .site-header{ top:46px; } }
.site-header .col-full{ padding-top:0 !important; padding-bottom:0 !important; }

.mk-topbar{ display:flex;align-items:center;gap:22px;min-height:76px;padding:10px 0; }

/* logo */
.mk-logo{ display:flex;flex-direction:column;justify-content:center;line-height:1;flex:none; }
.mk-logo .mk-wm{ font-weight:900;font-size:30px;letter-spacing:-1.2px;display:flex;align-items:center;color:var(--mk-ink); }
.mk-logo .mk-oo{ display:inline-flex;align-items:center;margin-left:2px; }
.mk-logo .mk-oo svg{ height:.82em;width:auto;display:block; }
.mk-logo .mk-tag{ font-size:8.5px;letter-spacing:2.5px;color:var(--mk-muted);font-weight:700;margin-top:5px;margin-left:2px; }
.mk-logo.dark .mk-wm{ color:#fff; }

/* busca */
.mk-search{ flex:1;display:flex;align-items:center;background:#fff;border:2px solid var(--mk-ink);border-radius:10px;height:48px;max-width:720px;overflow:hidden;margin:0; }
.mk-search input[type="search"], .mk-search input[type="text"]{
  flex:1;border:none !important;outline:none;font-family:var(--mk-font);font-size:15px;padding:0 16px;background:transparent;color:var(--mk-ink);
  height:100%;box-shadow:none !important;border-radius:0;
}
.mk-search input::placeholder{ color:var(--mk-muted); }
.mk-search button{ background:var(--mk-blue);border:none;color:#fff;height:100%;width:56px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;border-radius:0;padding:0; }
.mk-search button:hover{ background:var(--mk-blue-dark); }

/* atalhos do cabeçalho */
.mk-hicons{ display:flex;align-items:center;gap:4px;margin-left:auto; }
.mk-hicon{ display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:10px;color:var(--mk-graphite);font-size:13px;font-weight:600;transition:.15s;position:relative; }
.mk-hicon:hover{ background:#EEF0F4;color:var(--mk-blue); }
.mk-hicon .mk-col{ display:flex;flex-direction:column;line-height:1.15; }
.mk-hicon .mk-col small{ font-size:10.5px;color:var(--mk-muted);font-weight:500; }
.mk-hicon .mk-b{ position:absolute;top:3px;left:26px;background:var(--mk-danger);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff; }

/* esconde o cabeçalho padrão do Storefront */
.site-header .site-branding,
.site-header .site-search,
.site-header .main-navigation,
.site-header .secondary-navigation,
.site-header .site-header-cart,
.storefront-primary-navigation{ display:none !important; }

/* ==================================================================
   5) BARRA AZUL DE CATEGORIAS
   ================================================================== */
.mk-catbar{ background:var(--mk-blue); }
.mk-catbar .mk-wrap{ display:flex;align-items:center;gap:4px;height:46px;overflow-x:auto;scrollbar-width:none; }
.mk-catbar .mk-wrap::-webkit-scrollbar{ display:none; }
.mk-catbar a{ font-size:13.5px;font-weight:600;color:#eaf0ff;padding:7px 13px;border-radius:8px;white-space:nowrap;transition:.14s;display:flex;align-items:center;gap:7px; }
.mk-catbar a:hover{ background:rgba(255,255,255,.16);color:#fff; }
.mk-catbar .mk-all{ background:rgba(0,0,0,.16);color:#fff;font-weight:700; }
.mk-catbar .mk-spacer{ flex:1; }
.mk-catbar .mk-hot{ color:var(--mk-yellow);font-weight:800; }

/* ==================================================================
   6) HOME — BANNER, PROMOS, CATEGORIAS
   ================================================================== */
.mk-hero{ display:grid;grid-template-columns:1fr 300px;gap:16px;margin:20px 0; }
.mk-banner{ position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(115deg,#1B4FD1 0%,#2B6BFF 55%,#4d84ff 100%);color:#fff;padding:44px 48px;min-height:300px;display:flex;flex-direction:column;justify-content:center; }
.mk-banner .mk-blob{ position:absolute;border-radius:50%;background:rgba(255,255,255,.09); }
.mk-banner .mk-b1{ width:360px;height:360px;right:-90px;top:-120px; }
.mk-banner .mk-b2{ width:180px;height:180px;right:180px;bottom:-90px;background:rgba(255,206,0,.18); }
.mk-banner .mk-kick{ display:inline-flex;align-items:center;gap:7px;background:var(--mk-yellow);color:var(--mk-ink);font-weight:800;font-size:12.5px;padding:5px 12px;border-radius:7px;width:fit-content;margin-bottom:16px;position:relative;letter-spacing:.3px; }
.mk-banner h1{ font-size:40px;line-height:1.06;letter-spacing:-1.4px;font-weight:900;max-width:560px;position:relative;color:#fff;margin:0; }
.mk-banner h1 em{ font-style:normal;color:var(--mk-yellow); }
.mk-banner p{ font-size:16px;opacity:.94;margin-top:14px;max-width:440px;position:relative;font-weight:500;color:#fff; }
.mk-banner .mk-cta{ display:flex;gap:12px;margin-top:26px;position:relative;flex-wrap:wrap; }

.mk-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:10px;border:none;cursor:pointer;transition:.16s;background:var(--mk-blue);color:#fff;white-space:nowrap; }
.mk-btn:hover{ background:var(--mk-blue-dark);color:#fff; }
.mk-btn.yellow{ background:var(--mk-yellow);color:var(--mk-ink); }
.mk-btn.yellow:hover{ background:var(--mk-yellow-dark);color:var(--mk-ink); }
.mk-btn.white{ background:#fff;color:var(--mk-blue); }
.mk-btn.white:hover{ background:#f2f5ff;color:var(--mk-blue-dark); }

.mk-side-stack{ display:flex;flex-direction:column;gap:16px; }
.mk-side-card{ background:#fff;border-radius:14px;padding:18px 20px;box-shadow:var(--mk-shadow);flex:1;display:flex;flex-direction:column;gap:6px;justify-content:center; }
.mk-side-card .mk-ico{ width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:4px; }
.mk-side-card .mk-ico.b{ background:var(--mk-blue-tint);color:var(--mk-blue); }
.mk-side-card .mk-ico.g{ background:var(--mk-green-tint);color:var(--mk-green-dark); }
.mk-side-card h4{ font-size:15.5px;font-weight:800;margin:0; }
.mk-side-card p{ font-size:12.5px;color:var(--mk-muted);line-height:1.45;margin:0; }

.mk-promo-row{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:6px; }
.mk-promo{ border-radius:14px;padding:22px 24px;position:relative;overflow:hidden;min-height:128px;display:flex;flex-direction:column;justify-content:center; }
.mk-promo h3{ font-size:19px;font-weight:900;letter-spacing:-.4px;margin:0;color:inherit; }
.mk-promo p{ font-size:13px;margin:5px 0 12px;max-width:78%;font-weight:500; }
.mk-promo a{ font-weight:800;font-size:13px;display:inline-flex;align-items:center;gap:5px;width:fit-content; }
.mk-promo.blue{ background:var(--mk-blue);color:#fff; } .mk-promo.blue h3{color:#fff} .mk-promo.blue a{ color:var(--mk-yellow); }
.mk-promo.yellow{ background:var(--mk-yellow);color:var(--mk-ink); } .mk-promo.yellow a{ color:var(--mk-blue-dark); }
.mk-promo.green{ background:var(--mk-green);color:#fff; } .mk-promo.green h3{color:#fff} .mk-promo.green a{ color:#eafff5; }
.mk-promo .mk-big{ position:absolute;right:-6px;bottom:-14px;font-size:78px;font-weight:900;opacity:.16;letter-spacing:-3px;line-height:1; }

.mk-section-head{ display:flex;align-items:center;justify-content:space-between;margin:30px 0 16px; }
.mk-section-title{ font-size:22px;font-weight:900;letter-spacing:-.5px;display:flex;align-items:center;gap:10px;margin:0; }
.mk-section-title .mk-bar{ width:5px;height:22px;border-radius:3px;background:var(--mk-blue);display:block; }
.mk-section-title .mk-bar.y{ background:var(--mk-yellow); }
.mk-section-title .mk-bar.g{ background:var(--mk-green); }
.mk-section-head a.mk-more{ font-size:13.5px;color:var(--mk-blue);font-weight:700;display:flex;align-items:center;gap:5px; }

.mk-cats{ display:grid;grid-template-columns:repeat(6,1fr);gap:12px; }
.mk-cat{ background:#fff;border:1px solid var(--mk-line);border-radius:12px;padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:.16s;color:var(--mk-graphite); }
.mk-cat:hover{ transform:translateY(-3px);box-shadow:var(--mk-shadow-lg);border-color:var(--mk-blue);color:var(--mk-graphite); }
.mk-cat .mk-ci{ width:52px;height:52px;border-radius:14px;background:var(--mk-blue-tint);color:var(--mk-blue);display:flex;align-items:center;justify-content:center;transition:.16s; }
.mk-cat:hover .mk-ci{ background:var(--mk-blue);color:#fff; }
.mk-cat span{ font-size:12.5px;font-weight:700;text-align:center; }

.mk-deal-band{ background:linear-gradient(90deg,#16181D,#2B6BFF);border-radius:14px;padding:14px 22px;display:flex;align-items:center;gap:16px;color:#fff;margin:30px 0 16px; }
.mk-deal-band .mk-zap{ width:40px;height:40px;border-radius:11px;background:var(--mk-yellow);color:var(--mk-ink);display:grid;place-items:center;flex:none; }
.mk-deal-band b{ font-size:19px;font-weight:900;letter-spacing:-.4px; }
.mk-deal-band span{ font-size:13px;opacity:.9; }

/* ==================================================================
   7) VITRINE — CARDS DE PRODUTO
   ================================================================== */
.woocommerce ul.products,
ul.products{
  display:grid !important;
  grid-template-columns:repeat(5,1fr) !important;
  gap:14px !important;
  margin:0 0 30px !important;
  list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ display:none !important; }

.woocommerce ul.products li.product,
ul.products li.product{
  width:100% !important; margin:0 !important; float:none !important; clear:none !important;
  background:#fff;border:1px solid var(--mk-line);border-radius:12px;overflow:hidden;
  transition:.18s;display:flex;flex-direction:column;position:relative;padding:0 !important;
}
.woocommerce ul.products li.product:hover{ transform:translateY(-4px);box-shadow:var(--mk-shadow-lg);border-color:transparent; }
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{ display:none !important; }

.mk-thumb{ position:relative;aspect-ratio:1/1;background:#fff;padding:16px;overflow:hidden;display:block; }
.mk-thumb img{ width:100% !important;height:100% !important;object-fit:contain;margin:0 !important;border-radius:0; }
.mk-thumb .mk-badges{ position:absolute;top:9px;left:9px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2; }
.mk-thumb .mk-fav{ position:absolute;top:9px;right:9px;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--mk-line);display:flex;align-items:center;justify-content:center;color:var(--mk-muted);transition:.15s;z-index:2; }
.mk-thumb .mk-fav:hover{ color:var(--mk-danger);border-color:var(--mk-danger); }

.mk-body{ text-align:left; padding:12px 14px 15px;display:flex;flex-direction:column;gap:6px;flex:1;border-top:1px solid #F1F2F5; }
.mk-name{ text-align:left; font-size:13px;font-weight:500;color:var(--mk-graphite);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px;margin:0; }
.mk-pricewrap{ display:flex;flex-direction:column;gap:1px;min-height:46px;justify-content:center; }
.mk-old{ font-size:12px;color:var(--mk-muted);text-decoration:line-through;min-height:15px; }
.mk-price{ font-size:22px;font-weight:800;color:var(--mk-ink);letter-spacing:-.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.mk-price .mk-disc{ font-size:13px;font-weight:800;color:var(--mk-green-dark); }
.mk-install{ font-size:11.5px;color:var(--mk-graphite);min-height:16px;display:flex;align-items:center; }
.mk-install b{ color:var(--mk-green-dark);font-weight:700;margin-left:4px; }
.mk-freight{ font-size:11.5px;color:var(--mk-green-dark);font-weight:800;display:flex;align-items:center;gap:5px;min-height:16px; }
.mk-seller-line{ font-size:11px;color:var(--mk-muted);display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:8px; }
.mk-seller-line .mk-star{ color:var(--mk-yellow);display:inline-flex; }
.mk-cart-btn{ margin-top:10px; }
.woocommerce ul.products li.product .mk-cart-btn a.button{
  width:100%;justify-content:center;background:var(--mk-blue);color:#fff;font-weight:700;border-radius:9px;font-size:13px;padding:10px 12px;margin:0;display:flex;align-items:center;gap:6px;
}
.woocommerce ul.products li.product .mk-cart-btn a.button:hover{ background:var(--mk-blue-dark);color:#fff; }
.woocommerce ul.products li.product .mk-cart-btn a.added_to_cart{ display:none; }

/* ==================================================================
   8) PÁGINA DO PRODUTO
   ================================================================== */
.single-product div.product .price{ font-size:34px;font-weight:900;color:var(--mk-ink);letter-spacing:-1px; }
.single-product div.product .price del{ font-size:16px;color:var(--mk-muted);font-weight:400; }
.single-product div.product .price ins{ text-decoration:none; }
.mk-selo-pix{ display:inline-flex;align-items:center;gap:8px;background:var(--mk-green-tint);color:var(--mk-green-dark);border:1px solid #bde9d3;border-radius:10px;padding:10px 14px;font-weight:800;font-size:14px;margin:0 0 14px; }
.mk-selos{ display:flex;flex-direction:column;gap:9px;margin-top:16px; }
.mk-selos .mk-t{ display:flex;align-items:center;gap:9px;font-size:13px;color:var(--mk-graphite); }
.mk-selos .mk-t .mk-ic{ color:var(--mk-green); }
.woocommerce span.onsale{
  background:var(--mk-danger) !important;color:#fff !important;border-radius:6px !important;
  font-weight:800;font-size:12px;padding:5px 10px;min-height:0;min-width:0;line-height:1.1;top:12px;left:12px;right:auto;margin:0;
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .button{ background:var(--mk-blue);color:#fff;border-radius:10px;font-weight:700; }
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .button:hover{ background:var(--mk-blue-dark);color:#fff; }

/* ==================================================================
   9) TÍTULOS / CONTEÚDO
   ================================================================== */
.site-content{ padding-top:0 !important; }
.woocommerce-products-header{ display:none; }
.storefront-breadcrumb{ background:transparent;margin:0;padding:14px 0 0; }
.storefront-breadcrumb .col-full{ padding-bottom:0; }
.entry-content, .page .entry-content{ font-size:15.5px;color:var(--mk-graphite);line-height:1.7; }
.page .entry-header .entry-title, .single-post .entry-title{ font-size:30px;font-weight:900; }
.woocommerce-result-count, .woocommerce-ordering{ font-size:13px;color:var(--mk-muted); }

/* ==================================================================
   10) RODAPÉ
   ================================================================== */
.site-footer{ background:var(--mk-ink) !important;color:#a9afbd !important;margin-top:56px;padding:44px 0 24px !important; }
.mk-footer-cols{ display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:28px; }
.site-footer h5{ color:#fff;font-weight:800;font-size:14px;margin:0 0 13px; }
.site-footer a{ display:block;font-size:13px;padding:5px 0;color:#a9afbd; }
.site-footer a:hover{ color:#fff; }
.mk-footer-about{ font-size:13px;line-height:1.6;max-width:270px;margin-top:12px; }
.mk-pay-badges{ display:flex;gap:8px;margin-top:16px;flex-wrap:wrap; }
.mk-pay-badges span{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:6px 11px;font-size:11px;color:#fff;font-weight:600; }
.mk-copy{ border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;font-size:12.5px;color:#7a8090;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; }
.mk-copy a{ display:inline;color:#7a8090; }

/* ==================================================================
   11) BOTÃO DE WHATSAPP
   ================================================================== */
.mk-whats{ position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.42);z-index:120;transition:.16s; }
.mk-whats:hover{ transform:translateY(-3px);color:#fff; }
.mk-whats svg{ width:29px;height:29px;fill:currentColor; }

/* ==================================================================
   12) RESPONSIVO
   ================================================================== */
@media (max-width:1200px){
  .woocommerce ul.products, ul.products{ grid-template-columns:repeat(4,1fr) !important; }
  .mk-cats{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:980px){
  .mk-hero{ grid-template-columns:1fr; }
  .mk-side-stack{ flex-direction:row; }
  .mk-promo-row{ grid-template-columns:1fr; }
  .woocommerce ul.products, ul.products{ grid-template-columns:repeat(3,1fr) !important; }
  .mk-footer-cols{ grid-template-columns:1fr 1fr;gap:22px; }
}
@media (max-width:768px){
  .mk-topbar{ flex-wrap:wrap;gap:10px;min-height:auto; }
  .mk-search{ order:3;flex-basis:100%;max-width:none;height:44px; }
  .mk-hicons{ gap:0; }
  .mk-hicon .mk-col{ display:none; }
  .mk-hicon .mk-b{ left:24px; }
  .mk-topstrip .mk-links{ display:none; }
  .mk-topstrip .mk-wrap{ justify-content:center;text-align:center; }
  .mk-banner{ padding:26px 22px;min-height:auto; }
  .mk-banner h1{ font-size:24px;letter-spacing:-.8px; }
  .mk-banner p{ font-size:13.5px; }
  .mk-banner .mk-cta .mk-btn{ flex:1;justify-content:center; }
  .mk-side-stack{ flex-direction:column; }
  .woocommerce ul.products, ul.products{ grid-template-columns:repeat(2,1fr) !important;gap:10px !important; }
  .mk-price{ font-size:19px; }
  .mk-section-title{ font-size:18px; }
  .mk-footer-cols{ grid-template-columns:1fr; }
  .mk-logo .mk-wm{ font-size:24px; }
}

/* alinhamento do card (Storefront centraliza por padrão) */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .mk-body,
.woocommerce ul.products li.product .woocommerce-loop-product__title{ text-align:left !important; }
.woocommerce ul.products li.product a{ text-decoration:none; }