/* ====================================================================
   iVALENEEXPRESS — HOME 2.0  (layout inspirado no mockup MercadoAngola,
   marca mantida: iValeneExpress)
   --------------------------------------------------------------------
   Tudo o que este ficheiro estiliza vive sob o namespace .mkx-* para
   não colidir com o tema antigo (bootstrap/theme/campanhas), que
   continua carregado. Nada aqui depende do grid do Bootstrap.
   ==================================================================== */

:root{
  --mkx-orange:#f26a1b;      --mkx-orange-d:#d9531a;   --mkx-orange-l:#fff2e9;
  --mkx-red:#e03131;         --mkx-red-d:#c92a2a;
  --mkx-navy:#0f1b2e;        --mkx-navy-2:#16233a;
  --mkx-ink:#1f2937;         --mkx-muted:#64748b;      --mkx-muted-2:#8a96a6;
  --mkx-line:#e6e9ef;        --mkx-line-2:#eef1f6;
  --mkx-bg:#f4f5f7;          --mkx-white:#fff;
  --mkx-blue:#2563eb;
  --mkx-shadow:0 1px 3px rgba(16,27,46,.08),0 1px 2px rgba(16,27,46,.04);
  --mkx-shadow-h:0 8px 24px rgba(16,27,46,.12);
  --mkx-radius:12px; --mkx-radius-sm:9px; --mkx-radius-lg:16px;
  --mkx-wrap:1720px;
}

/* ── Reset local ──────────────────────────────────────────────────── */
.mkx-header, .mkx-header *, .mkx-main, .mkx-main *, .mkx-footer, .mkx-footer *{
  box-sizing:border-box;
}
.mkx-header, .mkx-main, .mkx-footer{
  font-family:'Roboto',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--mkx-ink); line-height:1.45; -webkit-font-smoothing:antialiased;
}
.mkx-main a, .mkx-header a, .mkx-footer a{ text-decoration:none; color:inherit; }
.mkx-wrap{ width:100%; max-width:var(--mkx-wrap); margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .mkx-wrap{ padding:0 14px; } }

/* Containers grid/flex sempre à largura do pai — impede que colapsem para
   min-content (e transbordem) quando outra folha do tema interfere no
   contexto de dimensionamento de certas páginas internas. */
.mkx-hero, .mkx-cats, .mkx-prod-wrap, .mkx-prod-grid, .mkx-prod-scroll,
.mkx-tri, .mkx-3col, .mkx-svc-grid, .mkx-stores, .mkx-trustrow, .mkx-trust,
.mkx-footer__grid, .mkx-nav .mkx-wrap, .mkx-head-main .mkx-wrap{ width:100%; min-width:0; }
.mkx-header, .mkx-footer, .mkx-main{ width:100%; overflow-x:clip; }
body.mkx-body{ background:var(--mkx-bg) !important; }

/* Esconde o rodapé/tira antigos caso apareçam por baixo do novo */
.mkx-body .footer-cta-bar{ display:none; }

/* ====================================================================
   HEADER
   ==================================================================== */
.mkx-header{ background:var(--mkx-white); border-bottom:1px solid var(--mkx-line);
  position:relative; z-index:1000; }

/* Faixa superior fina (utilidades) */
.mkx-topbar{ background:var(--mkx-navy); color:#cdd6e4; font-size:12.5px; }
.mkx-topbar .mkx-wrap{ display:flex; align-items:center; justify-content:space-between;
  min-height:34px; gap:12px; }
.mkx-topbar a{ color:#cdd6e4; }
.mkx-topbar a:hover{ color:#fff; }
.mkx-topbar__left i{ color:var(--mkx-orange); margin-right:5px; }
.mkx-topbar__right{ display:flex; gap:18px; align-items:center; }
.mkx-topbar__right a{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

/* Linha principal: logo | pesquisa | acções */
.mkx-head-main .mkx-wrap{ display:flex; align-items:center; gap:22px;
  padding-top:14px; padding-bottom:14px; }

.mkx-logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.mkx-logo__img{ height:44px; width:auto; display:block; }
.mkx-logo__txt{ display:flex; flex-direction:column; line-height:1.05; }
.mkx-logo__name{ font-size:20px; font-weight:800; letter-spacing:-.02em; }
.mkx-logo__name b{ color:var(--mkx-orange); font-weight:800; }
.mkx-logo__tag{ font-size:11px; color:var(--mkx-muted); font-weight:500; }

/* Chip de localização */
.mkx-loc{ display:flex; align-items:center; gap:8px; flex-shrink:0;
  padding:8px 12px; border:1px solid var(--mkx-line); border-radius:var(--mkx-radius-sm);
  background:var(--mkx-white); }
.mkx-loc i{ color:var(--mkx-orange); font-size:16px; }
.mkx-loc__txt{ display:flex; flex-direction:column; line-height:1.1; }
.mkx-loc__l{ font-size:10.5px; color:var(--mkx-muted); }
.mkx-loc__v{ font-size:13px; font-weight:700; }

/* Barra de pesquisa */
.mkx-search{ flex:1 1 auto; min-width:0; }
.mkx-search form{ display:flex; align-items:stretch; height:46px;
  border:2px solid var(--mkx-orange); border-radius:var(--mkx-radius-sm);
  overflow:hidden; background:var(--mkx-white); }
.mkx-search input[type=text]{ flex:1 1 auto; min-width:0; border:0; outline:0;
  padding:0 16px; font-size:14px; color:var(--mkx-ink); background:transparent; }
.mkx-search__cat{ position:relative; flex-shrink:0; border-left:1px solid var(--mkx-line);
  display:flex; align-items:center; }
.mkx-search__cat select{ border:0; outline:0; background:transparent; height:100%;
  padding:0 30px 0 14px; font-size:13px; color:var(--mkx-ink); cursor:pointer;
  -webkit-appearance:none; appearance:none; max-width:170px; }
.mkx-search__cat::after{ content:"\f107"; font-family:FontAwesome; position:absolute;
  right:12px; color:var(--mkx-muted); pointer-events:none; }
.mkx-search__btn{ flex-shrink:0; border:0; background:var(--mkx-orange); color:#fff;
  width:56px; font-size:17px; cursor:pointer; transition:background .15s; }
.mkx-search__btn:hover{ background:var(--mkx-orange-d); }

/* Acções à direita */
.mkx-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.mkx-act{ display:flex; align-items:center; gap:8px; padding:6px 10px;
  border-radius:var(--mkx-radius-sm); color:var(--mkx-ink); position:relative; }
.mkx-act:hover{ background:var(--mkx-line-2); }
.mkx-act > i{ font-size:20px; color:var(--mkx-navy); }
.mkx-act__txt{ display:flex; flex-direction:column; line-height:1.15; }
.mkx-act__t1{ font-size:11px; color:var(--mkx-muted); }
.mkx-act__t2{ font-size:13px; font-weight:700; white-space:nowrap; }
.mkx-act__badge{ position:absolute; top:2px; left:24px; background:var(--mkx-red);
  color:#fff; font-size:10px; font-weight:700; min-width:17px; height:17px;
  border-radius:9px; display:flex; align-items:center; justify-content:center;
  padding:0 4px; border:2px solid #fff; }
.mkx-btn-vender{ display:inline-flex; align-items:center; gap:8px; background:var(--mkx-orange);
  color:#fff !important; font-weight:700; font-size:14px; padding:11px 18px;
  border-radius:var(--mkx-radius-sm); white-space:nowrap; transition:background .15s; }
.mkx-btn-vender:hover{ background:var(--mkx-orange-d); }

/* Botão hamburguer (mobile) */
.mkx-burger{ display:none; background:none; border:0; font-size:22px; color:var(--mkx-navy);
  padding:6px 8px; cursor:pointer; }

/* ── Barra de navegação de categorias ─────────────────────────────── */
/* Barra secundária global: é a MESMA em todas as páginas públicas (vive em
   cabecalho.php). Leva os atalhos por tipo de oferta e as categorias; o
   destaque (Ofertas do Dia) e a ajuda ficam à direita. */
.mkx-nav{ background:linear-gradient(180deg,#123a7a 0%,#0f2f66 100%);
  border-top:0; border-bottom:1px solid rgba(255,255,255,.08); }
.mkx-nav .mkx-wrap{ display:flex; align-items:center; gap:8px; min-height:50px; min-width:0; }
.mkx-nav__all{ display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.12);
  color:#fff; font-weight:700; font-size:13.5px; padding:10px 15px;
  border-radius:var(--mkx-radius-sm); flex-shrink:0; align-self:center;
  border:1px solid rgba(255,255,255,.18); transition:.15s; }
.mkx-nav__all:hover{ background:rgba(255,255,255,.2); }
.mkx-nav__all i{ font-size:15px; }
/* O scroll horizontal, quando é preciso, vive AQUI dentro — nunca na página. */
.mkx-nav__links{ display:flex; align-items:center; gap:2px; flex:1 1 auto;
  min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; }
.mkx-nav__links::-webkit-scrollbar{ display:none; }
.mkx-nav__links a{ display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.88);
  border-radius:7px; white-space:nowrap; flex:0 0 auto; transition:.15s; }
.mkx-nav__links a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.mkx-nav__links a.is-activo{ background:rgba(255,255,255,.18); color:#fff; font-weight:700; }
.mkx-nav__links a i{ font-size:14px; opacity:.9; }
.mkx-nav__links a.mkx-nav__at--promo i{ color:#fdba74; opacity:1; } /* Promoções: único destaque laranja na barra */
.mkx-nav__ofertas{ display:inline-flex; align-items:center; gap:7px;
  color:#ffd9a3 !important; font-weight:700; font-size:13.5px; padding:8px 12px;
  white-space:nowrap; border-radius:7px; transition:.15s; }
.mkx-nav__ofertas:hover, .mkx-nav__ofertas.is-activo{ background:rgba(255,255,255,.14); color:#fff !important; }
.mkx-nav__ofertas i{ font-size:15px; }
.mkx-nav .mkx-nav__more{ color:rgba(255,255,255,.88); }
.mkx-nav .mkx-nav__more:hover{ background:rgba(255,255,255,.14); color:#fff; }

/* Dropdown "Todas as categorias" + "Mais" */
.mkx-drop{ position:relative; flex-shrink:0; }
.mkx-drop__panel{ position:absolute; top:calc(100% + 6px); left:0; z-index:1200;
  background:#fff; border:1px solid var(--mkx-line); border-radius:var(--mkx-radius);
  box-shadow:var(--mkx-shadow-h); min-width:240px; padding:8px; display:none;
  max-height:70vh; overflow-y:auto; }
.mkx-drop.open .mkx-drop__panel{ display:block; }
.mkx-drop__panel a{ display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:7px; font-size:13.5px; color:#374151; }
.mkx-drop__panel a:hover{ background:var(--mkx-orange-l); color:var(--mkx-orange-d); }
.mkx-drop__panel img{ width:20px; height:20px; object-fit:contain; }
.mkx-nav__more{ display:inline-flex; align-items:center; gap:5px; padding:8px 12px;
  font-size:13.5px; font-weight:500; color:#374151; border-radius:7px; cursor:pointer;
  white-space:nowrap; background:none; border:0; }
.mkx-nav__more:hover{ background:var(--mkx-orange-l); color:var(--mkx-orange-d); }

/* ====================================================================
   MAIN
   ==================================================================== */
.mkx-main{ padding:22px 0 8px; }
.mkx-main .mkx-wrap + .mkx-wrap{ margin-top:22px; }
.mkx-section{ margin-bottom:26px; }

/* Cabeçalho de secção */
.mkx-sec-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-bottom:14px; }
.mkx-sec-head__t{ font-size:19px; font-weight:800; color:var(--mkx-ink); margin:0; letter-spacing:-.01em; }
.mkx-sec-head__s{ font-size:13px; color:var(--mkx-muted); margin:2px 0 0; }
.mkx-sec-head__link{ font-size:13px; font-weight:600; color:var(--mkx-blue); white-space:nowrap; }
.mkx-sec-head__link:hover{ text-decoration:underline; }

/* ── HERO ─────────────────────────────────────────────────────────── */
/* Réplica do mockup: banner largo (1331×411) + coluna de 2 cartões (388 de largura).
   No desktop as medidas internas estão em cqw (1cqw = 1% da largura do banner/cartão),
   por isso tudo escala na mesma proporção do mockup. */
.mkx-hero{ display:grid; grid-template-columns:minmax(0,3.43fr) minmax(0,1fr); gap:clamp(12px,1.25vw,21px); }
.mkx-hero__main{ position:relative; border-radius:var(--mkx-radius-lg); overflow:hidden;
  aspect-ratio:1331/411; width:100%; background:#0a1622; isolation:isolate; container-type:inline-size; }
.mkx-hs{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .6s ease, visibility 0s linear .6s; }
.mkx-hs.is-on{ opacity:1; visibility:visible; transition:opacity .6s ease; z-index:1; }
.mkx-hs--img img{ width:100%; height:100%; object-fit:cover; display:block; }

.mkx-hs picture{ display:contents; }
.mkx-hs__bg{ position:absolute; top:0; right:0; height:100%; width:auto; max-width:none;
  aspect-ratio:1536/685; object-fit:cover; object-position:right center; z-index:0; }
/* Textos decorativos do mockup sobre a fotografia (posições medidas no mockup) */
.mkx-hs__script{ position:absolute; z-index:2; left:85cqw; top:1.4cqw; font-family:'Kalam',cursive;
  font-size:2.75cqw; line-height:1.08; color:#fff; transform:rotate(-8deg); transform-origin:left top;
  text-shadow:0 2px 10px rgba(0,0,0,.35); pointer-events:none; }
.mkx-hs__script svg{ display:block; width:7.6cqw; height:1.1cqw; margin:.1cqw 0 0 .6cqw; fill:none;
  stroke:#fff; stroke-width:2.4; stroke-linecap:round; }
.mkx-hs__tag{ position:absolute; z-index:2; right:1.8cqw; top:22.6cqw; color:#fff; pointer-events:none;
  font-family:'Nunito Sans','Roboto',sans-serif; font-size:.9cqw; font-weight:700; line-height:1.45;
  letter-spacing:.01em; text-shadow:0 1px 6px rgba(0,0,0,.55); }
.mkx-hs__tag b{ display:block; font-size:1.35cqw; font-weight:800; line-height:1.15; margin-bottom:.15cqw; }
.mkx-hs::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,#0a1622 0%,#0b1a2c 36%,rgba(11,28,50,.9) 43%,
    rgba(14,34,62,.5) 49%,rgba(14,34,62,0) 57%); }
.mkx-hs--img::before{ display:none; }

.mkx-hs__txt{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  align-items:flex-start; color:#fff; font-family:'Nunito Sans','Roboto',system-ui,sans-serif;
  padding:3.9cqw 0 0 3.6cqw; max-width:60%; }
.mkx-hs__txt h1{ font-family:inherit; font-size:4.43cqw; line-height:1.03; font-weight:800;
  letter-spacing:-.012em; margin:0; color:#fff; white-space:nowrap; text-shadow:0 2px 14px rgba(0,0,0,.25); }
.mkx-hs__txt h1 span{ background:linear-gradient(90deg,#ff7a1a,#ff9a3c); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; color:#ff8a2b; }
.mkx-hs__txt p{ font-size:max(13px,1.555cqw); line-height:1.52; color:rgba(255,255,255,.93);
  margin:1.6cqw 0 0; font-weight:400; white-space:nowrap; }
.mkx-hs__cta{ display:inline-flex; align-items:center; justify-content:center; gap:1.1cqw;
  width:17.4cqw; height:4.66cqw; margin-top:1cqw;
  background:linear-gradient(180deg,#ff8a1f 0%,#f96a1c 100%); color:#fff !important;
  font-weight:700; font-size:max(13px,1.32cqw); border-radius:.6cqw; white-space:nowrap;
  box-shadow:0 .6cqw 1.6cqw rgba(242,106,27,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s, filter .15s; }
.mkx-hs__cta:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.mkx-hs__cta svg{ width:1.45em; height:1.45em; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; }
.mkx-hs__badges{ list-style:none; margin:auto 0 1.4cqw; padding:0; display:flex; gap:1.7cqw; }
.mkx-hs__badges li{ display:inline-flex; align-items:center; gap:.85cqw; font-size:max(11px,1.06cqw);
  color:rgba(255,255,255,.92); white-space:nowrap; }
.mkx-hs__badges svg{ width:1.75cqw; height:1.75cqw; min-width:18px; min-height:18px; flex:0 0 auto;
  fill:none; stroke:#3fd07f; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mkx-hs__badges svg.is-fill path:first-child{ fill:#2fbf6c; stroke:#2fbf6c; }
.mkx-hs__badges svg.is-fill .ck{ stroke:#fff; stroke-width:2.2; }

/* Setas e pontos (só renderizados quando há campanhas) — posições do mockup */
.mkx-hs__nav{ position:absolute; top:51.6%; z-index:5; width:max(30px,2.55cqw); height:max(30px,2.55cqw);
  transform:translateY(-50%); border-radius:50%; border:0; background:rgba(255,255,255,.95); color:#1f2937;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:0 3px 10px rgba(0,0,0,.25); transition:background .15s; }
.mkx-hs__nav:hover{ background:#fff; }
.mkx-hs__nav svg{ width:50%; height:50%; fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; }
.mkx-hs__nav--prev{ left:.4cqw; } .mkx-hs__nav--next{ right:1.1cqw; }
.mkx-hs__dots{ position:absolute; z-index:5; left:70.3%; bottom:1.4cqw; transform:translateX(-50%);
  display:flex; gap:.95cqw; }
.mkx-hs__dots button{ width:max(7px,.6cqw); height:max(7px,.6cqw); border-radius:50%; border:0; padding:0;
  cursor:pointer; background:rgba(255,255,255,.8); }
.mkx-hs__dots button.is-on{ background:#ff8a1f; }

/* Coluna lateral: 2 cartões */
.mkx-hero__side{ display:flex; flex-direction:column; gap:clamp(10px,.9vw,13px); min-width:0; }
.mkx-hero__side > a{ flex:1 1 0; min-height:0; }
.mkx-hero__side .mkx-promo{ min-height:0; }
.mkx-pc{ position:relative; display:block; border-radius:var(--mkx-radius-lg); overflow:hidden;
  container-type:inline-size; isolation:isolate; transition:transform .15s, box-shadow .15s; }
.mkx-pc:hover{ transform:translateY(-2px); box-shadow:var(--mkx-shadow-h); }
.mkx-pc picture{ position:absolute; inset:0; z-index:0; }
.mkx-pc__bg{ width:100%; height:100%; object-fit:cover; object-position:right center; display:block; }
.mkx-pc--tecno{ background:#b9cff7; }
.mkx-pc--casa{ background:#f39a3c; }
.mkx-pc__body{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column;
  align-items:flex-start; font-family:'Nunito Sans','Roboto',system-ui,sans-serif; }
.mkx-pc__marca, .mkx-pc__t{ display:block; white-space:nowrap; }
.mkx-pc__btn{ display:inline-flex; align-items:center; justify-content:center; gap:1.6cqw;
  font-weight:700; border-radius:1.6cqw; white-space:nowrap; }
.mkx-pc__btn svg{ width:1.3em; height:1.3em; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; }
/* TECNO */
.mkx-pc--tecno .mkx-pc__body{ padding:10.1cqw 0 0 6.9cqw; }
.mkx-pc--tecno .mkx-pc__marca{ font-size:7.6cqw; line-height:1; font-weight:900; color:#16318e;
  letter-spacing:.02em; }
.mkx-pc--tecno .mkx-pc__t{ font-size:5.9cqw; line-height:1.2; font-weight:600; color:#1c3f9a; margin-top:2.5cqw; }
.mkx-pc--tecno .mkx-pc__btn{ width:37.6cqw; height:9.8cqw; margin:2.1cqw 0 0 -1.5cqw; font-size:3.8cqw;
  color:#fff; background:linear-gradient(180deg,#2448e0,#1a38cf); box-shadow:0 1cqw 2.4cqw rgba(26,56,207,.3); }
/* CASA MODERNA */
.mkx-pc--casa .mkx-pc__body{ padding:8cqw 0 0 6.9cqw; }
.mkx-pc--casa .mkx-pc__marca{ font-size:5.5cqw; line-height:1; font-weight:800; color:#fff; letter-spacing:.01em; }
.mkx-pc--casa .mkx-pc__t{ font-size:7cqw; line-height:1.12; font-weight:600; color:#fff; margin-top:2.6cqw; }
.mkx-pc--casa .mkx-pc__btn{ width:28.6cqw; height:9.3cqw; margin:3cqw 0 0 -.3cqw; font-size:3.8cqw;
  color:#c43d22; background:#fff; box-shadow:0 1cqw 2.4cqw rgba(140,60,10,.18); }

/* 992–1199px: banner a toda a largura e os 2 cartões lado a lado por baixo */
@media (min-width:992px) and (max-width:1199.98px){
  .mkx-hero{ grid-template-columns:1fr 1fr; }
  .mkx-hero__main{ grid-column:1 / -1; }
  .mkx-hero__side{ display:contents; }
  .mkx-hero__side > a{ aspect-ratio:388/197; }
}

/* < 992px: fotografia inteira em cima, texto por baixo; cartões lado a lado */
@media (max-width:991.98px){
  .mkx-hero{ grid-template-columns:1fr 1fr; }
  .mkx-hero__main{ grid-column:1 / -1; aspect-ratio:auto; container-type:normal; }
  .mkx-hero__side{ display:contents; }
  .mkx-hero__side > a{ aspect-ratio:388/197; }
  .mkx-hs{ position:relative; display:flex; flex-direction:column; }
  .mkx-hs:not(.is-on){ position:absolute; }
  .mkx-hs__bg{ position:relative; width:100%; height:auto; aspect-ratio:4/3; object-position:55% 100%; }
  .mkx-hs__script, .mkx-hs__tag{ display:none; }
  .mkx-hs::before{ inset:auto 0 auto 0; top:0; height:0; padding-top:75%;
    background:linear-gradient(180deg,rgba(10,22,34,0) 84%,#0a1622 100%); }
  .mkx-hs__txt{ max-width:100%; height:auto; padding:22px 28px 28px; margin-top:0; }
  .mkx-hs__txt h1{ font-size:clamp(26px,5.2vw,40px); line-height:1.1; white-space:normal; }
  .mkx-hs__txt p{ font-size:clamp(14px,2vw,17px); margin-top:12px; white-space:normal; }
  .mkx-hs__cta{ width:auto; height:auto; padding:14px 30px; margin-top:18px; font-size:15px; gap:10px; border-radius:8px; }
  .mkx-hs__badges{ margin:20px 0 0; flex-wrap:wrap; gap:10px 20px; }
  .mkx-hs__badges li{ font-size:13px; gap:8px; }
  .mkx-hs__badges svg{ width:22px; height:22px; }
  .mkx-hs--img{ aspect-ratio:1331/411; }
  .mkx-hs__nav{ top:calc(min(100vw, 992px) * 3 / 4 / 2); width:34px; height:34px; }
  .mkx-hs__nav--prev{ left:8px; } .mkx-hs__nav--next{ right:8px; }
  .mkx-hs__dots{ left:50%; bottom:12px; gap:8px; }
}
@media (max-width:620px){
  .mkx-hero{ grid-template-columns:1fr; }
  .mkx-hs__txt{ padding:18px 18px 22px; }
  .mkx-hs__txt h1 br, .mkx-hs__txt p br{ display:none; }
}

/* Botão laranja genérico (ex.: "Ver todos os produtos" no fim da home) */
.mkx-hero__cta{ display:inline-flex; align-items:center; gap:9px; background:var(--mkx-orange);
  color:#fff !important; font-weight:700; font-size:15px; padding:13px 26px;
  border-radius:var(--mkx-radius-sm); transition:background .15s,transform .15s; }
.mkx-hero__cta:hover{ background:var(--mkx-orange-d); transform:translateY(-1px); }

/* slot vazio p/ imagem do utilizador */
.mkx-slot{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px; color:rgba(255,255,255,.55); font-size:12px;
  border:2px dashed rgba(255,255,255,.35); border-radius:inherit; z-index:1; text-align:center; padding:10px; }
.mkx-slot i{ font-size:24px; }

/* ── TIRA DE CATEGORIAS (ícones) ──────────────────────────────────── */
.mkx-cats{ display:grid; grid-template-columns:repeat(10,1fr); gap:12px; }
.mkx-cat{ display:flex; flex-direction:column; align-items:center; gap:9px;
  background:var(--mkx-white); border:1px solid var(--mkx-line); border-radius:var(--mkx-radius);
  padding:16px 8px; text-align:center; transition:box-shadow .15s,transform .15s,border-color .15s; }
.mkx-cat:hover{ box-shadow:var(--mkx-shadow-h); transform:translateY(-2px); border-color:transparent; }
.mkx-cat__ic{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:20px; }
.mkx-cat__ic img{ width:26px; height:26px; object-fit:contain; }
.mkx-cat__badge{ width:52px; height:52px; border-radius:14px; object-fit:contain; display:block; }
.mkx-cat:hover .mkx-cat__badge{ transform:none; }
.mkx-cat__t{ font-size:12px; font-weight:600; color:#374151; line-height:1.2; }
/* cores rotativas dos ícones */
.mkx-cat:nth-child(10n+1) .mkx-cat__ic{ background:#e7f0ff; color:#2563eb; }
.mkx-cat:nth-child(10n+2) .mkx-cat__ic{ background:#ffe9e9; color:#e03131; }
.mkx-cat:nth-child(10n+3) .mkx-cat__ic{ background:#fff2e0; color:#e8720f; }
.mkx-cat:nth-child(10n+4) .mkx-cat__ic{ background:#e6f7ee; color:#12b76a; }
.mkx-cat:nth-child(10n+5) .mkx-cat__ic{ background:#e8eef8; color:#123a7a; }
.mkx-cat:nth-child(10n+6) .mkx-cat__ic{ background:#e7f6ff; color:#0ea5e9; }
.mkx-cat:nth-child(10n+7) .mkx-cat__ic{ background:#ffe9f3; color:#e0338a; }
.mkx-cat:nth-child(10n+8) .mkx-cat__ic{ background:#eef2f6; color:#475569; }
.mkx-cat:nth-child(10n+9) .mkx-cat__ic{ background:#e6f7ee; color:#12b76a; }
.mkx-cat:nth-child(10n+10) .mkx-cat__ic{ background:#f1f2f5; color:#64748b; }

/* ── GRELHA PRODUTOS + PROMO LATERAL ──────────────────────────────── */
/* Largura do cartão = fracção fixa da linha (--mkx-pc-n cartões visíveis),
   nunca "1fr" por item: com 1fr, uma secção com um só produto esticava o
   cartão (e a imagem quadrada) à largura toda da página. Assim o cartão tem
   sempre o mesmo tamanho, haja 1 ou 12 produtos, e as secções alinham. */
.mkx-main{ --mkx-pc-n:7; --mkx-pc-gap:14px; }
.mkx-prod-wrap{ --mkx-pc-n:6; display:grid; grid-template-columns:1fr 210px; gap:16px; align-items:stretch; }
.mkx-prod-scroll{ display:grid; grid-auto-flow:column; justify-content:start;
  grid-auto-columns:calc((100% - (var(--mkx-pc-n) - 1) * var(--mkx-pc-gap)) / var(--mkx-pc-n));
  gap:var(--mkx-pc-gap); overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; }
.mkx-prod-scroll::-webkit-scrollbar{ height:7px; }
.mkx-prod-scroll::-webkit-scrollbar-thumb{ background:#cbd3de; border-radius:4px; }
.mkx-prod-grid{ display:grid; grid-template-columns:repeat(var(--mkx-pc-n),minmax(0,1fr)); gap:var(--mkx-pc-gap); }
@media (max-width:1499.98px){ .mkx-main{ --mkx-pc-n:6; } .mkx-prod-wrap{ --mkx-pc-n:5; } }
@media (max-width:1199.98px){ .mkx-main{ --mkx-pc-n:5; } .mkx-prod-wrap{ --mkx-pc-n:4; } }
@media (max-width:899.98px){ .mkx-main, .mkx-prod-wrap{ --mkx-pc-n:3; } }
@media (max-width:619.98px){ .mkx-main, .mkx-prod-wrap{ --mkx-pc-n:2; --mkx-pc-gap:10px; } }

.mkx-pcard{ background:var(--mkx-white); border:1px solid var(--mkx-line);
  border-radius:var(--mkx-radius); overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .15s,transform .15s,border-color .15s; position:relative; }
.mkx-pcard:hover{ box-shadow:var(--mkx-shadow-h); transform:translateY(-3px); border-color:transparent; }
.mkx-pcard__imgw{ position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden;
  border-bottom:1px solid var(--mkx-line-2); }
.mkx-pcard__imgw > a{ display:block; width:100%; height:100%; }
/* contain: a foto do produto aparece inteira (sem cortes), seja qual for a proporção */
.mkx-pcard__imgw img{ display:block; width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .3s; }
.mkx-pcard:hover .mkx-pcard__imgw img{ transform:scale(1.05); }
.mkx-pcard__disc{ position:absolute; top:8px; left:8px; background:var(--mkx-red); color:#fff;
  font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px; }
.mkx-pcard__fav{ position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.92); border:0; color:#94a3b8; display:flex; align-items:center;
  justify-content:center; cursor:pointer; box-shadow:var(--mkx-shadow); }
.mkx-pcard__fav:hover{ color:var(--mkx-red); }
.mkx-pcard__body{ padding:11px 12px 13px; display:flex; flex-direction:column; flex:1; }
.mkx-pcard__name{ font-size:13px; font-weight:600; color:#374151; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:35px; margin:0 0 6px; }
.mkx-pcard__price{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:6px; }
.mkx-pcard__new{ font-size:16px; font-weight:800; color:var(--mkx-ink); }
.mkx-pcard__old{ font-size:12px; color:var(--mkx-muted-2); text-decoration:line-through; }
.mkx-pcard__foot{ display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:7px; }
.mkx-pcard__rate{ font-size:11.5px; color:var(--mkx-muted); display:inline-flex; align-items:center; gap:4px; }
.mkx-pcard__rate i{ color:#f5a623; }
.mkx-pcard__ship{ font-size:11px; color:#12b76a; display:inline-flex; align-items:center; gap:4px; }
.mkx-pcard__cart{ display:block; margin-top:9px; text-align:center; background:var(--mkx-orange-l);
  color:var(--mkx-orange-d) !important; font-size:12.5px; font-weight:700; padding:8px;
  border-radius:8px; transition:background .15s; }
.mkx-pcard:hover .mkx-pcard__cart{ background:var(--mkx-orange); color:#fff !important; }

/* Cartão promo lateral (verde etc.) */
.mkx-sidepromo{ border-radius:var(--mkx-radius); overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:26px 18px; color:#fff; min-height:100%;
  background:linear-gradient(160deg,#15a45e,#0c8a4c); }
.mkx-sidepromo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.mkx-sidepromo__body{ position:relative; z-index:2; }
.mkx-sidepromo h3{ font-size:18px; font-weight:800; margin:0 0 14px; line-height:1.2; }
.mkx-sidepromo__ic{ font-size:40px; margin-bottom:12px; opacity:.9; }
.mkx-sidepromo__btn{ display:inline-flex; align-items:center; gap:6px; background:#fff;
  color:#0c8a4c !important; font-weight:700; font-size:13px; padding:9px 18px; border-radius:8px; }

/* Três cabeçalhos lado a lado (destaque/tendência/novidades) */
.mkx-tri{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-bottom:14px; }
@media (max-width:900px){ .mkx-tri{ grid-template-columns:1fr; gap:6px; } }

/* ── SERVIÇOS + LOJAS + PROMO ─────────────────────────────────────── */
.mkx-3col{ display:grid; grid-template-columns:1fr 1fr 230px; gap:16px; align-items:stretch; }

.mkx-svc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mkx-svc{ background:var(--mkx-white); border:1px solid var(--mkx-line); border-radius:var(--mkx-radius);
  overflow:hidden; transition:box-shadow .15s,transform .15s; }
.mkx-svc:hover{ box-shadow:var(--mkx-shadow-h); transform:translateY(-2px); }
.mkx-svc__img{ aspect-ratio:16/10; background:#eef1f6; overflow:hidden; }
.mkx-svc__img img{ width:100%; height:100%; object-fit:cover; }
.mkx-svc__b{ padding:10px 12px; }
.mkx-svc__t{ font-size:13px; font-weight:600; color:#374151; margin:0 0 3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
.mkx-svc__p{ font-size:12.5px; color:var(--mkx-orange-d); font-weight:700; margin:0 0 2px; }
.mkx-svc__r{ font-size:11px; color:var(--mkx-muted); }
.mkx-svc__r i{ color:#f5a623; }

.mkx-stores{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.mkx-store{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px;
  background:var(--mkx-white); border:1px solid var(--mkx-line); border-radius:var(--mkx-radius);
  padding:14px 6px; transition:box-shadow .15s,transform .15s; }
.mkx-store:hover{ box-shadow:var(--mkx-shadow-h); transform:translateY(-2px); }
.mkx-store__logo{ width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:1px solid var(--mkx-line); background:#fff; }
.mkx-store__ini{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:20px; font-weight:800; color:#fff; }
.mkx-store__n{ font-size:11.5px; font-weight:600; color:#374151; line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.mkx-store__btn{ font-size:11px; font-weight:700; color:var(--mkx-orange-d);
  border:1px solid var(--mkx-orange); border-radius:20px; padding:3px 12px; margin-top:2px; }
.mkx-store__btn:hover{ background:var(--mkx-orange); color:#fff !important; }

.mkx-bizpromo{ border-radius:var(--mkx-radius); overflow:hidden; position:relative; color:#fff;
  display:flex; flex-direction:column; justify-content:center; padding:26px 20px; text-align:center;
  background:linear-gradient(160deg,#1d4ed8,#123a7a); min-height:100%; }
.mkx-bizpromo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.mkx-bizpromo__body{ position:relative; z-index:2; }
.mkx-bizpromo__ic{ font-size:34px; margin-bottom:12px; opacity:.92; }
.mkx-bizpromo h3{ font-size:17px; font-weight:800; margin:0 0 8px; line-height:1.22; }
.mkx-bizpromo p{ font-size:12.5px; opacity:.9; margin:0 0 16px; }
.mkx-bizpromo__btn{ display:inline-flex; align-items:center; gap:6px; background:#fff;
  color:#123a7a !important; font-weight:700; font-size:13px; padding:9px 18px; border-radius:8px; }

/* ── TIRA DE CONFIANÇA + 2 BANNERS ────────────────────────────────── */
.mkx-trustrow{ display:grid; grid-template-columns:1.15fr .95fr .95fr; gap:16px; align-items:stretch; }
.mkx-trust{ background:var(--mkx-white); border:1px solid var(--mkx-line); border-radius:var(--mkx-radius);
  display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:6px; }
.mkx-trust__it{ display:flex; align-items:center; gap:11px; padding:12px 12px; }
.mkx-trust__ic{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:17px; flex-shrink:0; }
.mkx-trust__it:nth-child(1) .mkx-trust__ic{ background:#fff2e0; color:#e8720f; }
.mkx-trust__it:nth-child(2) .mkx-trust__ic{ background:#e7f0ff; color:#2563eb; }
.mkx-trust__it:nth-child(3) .mkx-trust__ic{ background:#e6f7ee; color:#12b76a; }
.mkx-trust__it:nth-child(4) .mkx-trust__ic{ background:#e8eef8; color:#123a7a; }
.mkx-trust__t{ font-size:12.5px; font-weight:700; color:#374151; }
.mkx-trust__s{ font-size:11px; color:var(--mkx-muted); }
.mkx-cta2{ border-radius:var(--mkx-radius); overflow:hidden; position:relative; color:#fff;
  display:flex; flex-direction:column; justify-content:center; padding:20px 22px; min-height:118px; }
.mkx-cta2 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.mkx-cta2--world{ background:linear-gradient(120deg,#0b6b53,#0e8a63); }
.mkx-cta2--sell{ background:linear-gradient(120deg,#e8720f,#f0a021); }
.mkx-cta2__body{ position:relative; z-index:2; }
.mkx-cta2 h3{ font-size:16px; font-weight:800; margin:0 0 4px; }
.mkx-cta2 p{ font-size:12px; opacity:.92; margin:0 0 12px; }
.mkx-cta2__btn{ display:inline-flex; align-items:center; gap:6px; background:#fff;
  color:#1f2937 !important; font-weight:700; font-size:12.5px; padding:8px 15px; border-radius:7px; }

/* ── Estados vazios ───────────────────────────────────────────────── */
.mkx-empty{ background:var(--mkx-white); border:1px dashed var(--mkx-line); border-radius:var(--mkx-radius);
  padding:34px 20px; text-align:center; color:var(--mkx-muted); grid-column:1/-1; }
.mkx-empty i{ font-size:30px; color:#cbd3de; display:block; margin-bottom:10px; }
.mkx-empty a{ color:var(--mkx-orange-d); font-weight:700; }

/* ====================================================================
   FOOTER
   ==================================================================== */
.mkx-footer{ background:var(--mkx-navy); color:#aebbcd; margin-top:34px; }
.mkx-footer__top{ padding:40px 0 30px; border-bottom:1px solid rgba(255,255,255,.08); }
.mkx-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.5fr; gap:28px; }
.mkx-footer__brand .mkx-logo__name{ color:#fff; }
.mkx-footer__brand .mkx-logo__tag{ color:#8595ab; }
.mkx-footer__brand p{ font-size:12.5px; color:#8595ab; margin:14px 0 0; line-height:1.6; }
.mkx-footer h4{ color:#fff; font-size:13.5px; font-weight:700; margin:0 0 14px; letter-spacing:.02em; }
.mkx-footer ul{ list-style:none; margin:0; padding:0; }
.mkx-footer ul li{ margin-bottom:9px; }
.mkx-footer ul a{ font-size:12.8px; color:#aebbcd; }
.mkx-footer ul a:hover{ color:#fff; }
.mkx-news p{ font-size:12.5px; color:#8595ab; margin:0 0 12px; }
.mkx-news__form{ display:flex; height:42px; border-radius:8px; overflow:hidden; background:#1c2a42; }
.mkx-news__form input{ flex:1; min-width:0; border:0; background:transparent; color:#fff;
  padding:0 14px; font-size:13px; outline:0; }
.mkx-news__form button{ border:0; background:var(--mkx-orange); color:#fff; width:48px; font-size:16px; cursor:pointer; }
.mkx-news__form button:hover{ background:var(--mkx-orange-d); }
.mkx-social{ display:flex; gap:10px; margin-top:16px; }
.mkx-social a{ width:34px; height:34px; border-radius:50%; background:#1c2a42; display:flex;
  align-items:center; justify-content:center; color:#aebbcd; font-size:15px; }
.mkx-social a:hover{ background:var(--mkx-orange); color:#fff; }
.mkx-footer__bottom{ padding:16px 0; }
.mkx-footer__bottom .mkx-wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mkx-footer__bottom, .mkx-footer__bottom a{ font-size:12px; color:#8595ab; }
.mkx-footer__pay{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mkx-footer__pay img{ height:26px; }
.mkx-footer__tags{ color:#8595ab; }
.mkx-footer__tags b{ color:#c9d3e0; font-weight:600; }

/* ====================================================================
   RESPONSIVO
   ==================================================================== */
/* Cabeçalho entre 993px e 1439px: a pesquisa ficava com 48px úteis a 1280px
   (as acções à direita ocupavam 650px). Favoritos e Ajuda passam a só ícone
   (têm title e aria-label) e a
   localização sai abaixo de 1366px. A pesquisa recupera ~400px. */
@media (max-width:1439.98px){
  .mkx-act--compacto .mkx-act__txt{ display:none; }
  .mkx-head-main .mkx-wrap{ gap:16px; }
  .mkx-search__cat select{ max-width:140px; }
}
@media (max-width:1365.98px){
  .mkx-loc{ display:none; }
}

@media (max-width:1100px){
  .mkx-cats{ grid-template-columns:repeat(5,1fr); }
  .mkx-footer__grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:992px){
  .mkx-loc{ display:none; }
  .mkx-act__txt{ display:none; }
  .mkx-3col{ grid-template-columns:1fr; }
  .mkx-bizpromo{ min-height:150px; }
  .mkx-trustrow{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .mkx-head-main .mkx-wrap{ flex-wrap:wrap; gap:12px; }
  .mkx-burger{ display:block; order:0; }
  .mkx-logo{ order:1; }
  .mkx-actions{ order:2; margin-left:auto; }
  .mkx-search{ order:3; flex-basis:100%; }
  .mkx-btn-vender .mkx-btn-vender__t{ display:none; }
  /* Em ecrãs pequenos a barra secundária não desaparece: transforma-se numa
     faixa deslizável dentro da própria barra. O menu do burger continua a
     abri-la em coluna, mas o scroll nunca sai para a página. */
  .mkx-nav{ position:relative; }
  .mkx-nav .mkx-wrap{ gap:6px; }
  .mkx-nav__links{ display:flex; }
  .mkx-nav__links a{ padding:8px 11px; font-size:13px; }
  .mkx-nav__all .mkx-nav__all-txt{ display:none; }
  .mkx-nav.open .mkx-nav__links{ display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:#0f2f66; border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:var(--mkx-shadow-h); padding:8px; z-index:1200; align-items:stretch;
    overflow-x:visible; max-height:70vh; overflow-y:auto; }
  .mkx-prod-wrap{ grid-template-columns:1fr; }
  .mkx-sidepromo{ min-height:120px; }
}
@media (max-width:620px){
  .mkx-cats{ grid-template-columns:repeat(3,1fr); }
  .mkx-svc-grid{ grid-template-columns:1fr; }
  .mkx-stores{ grid-template-columns:repeat(3,1fr); }
  .mkx-trust{ grid-template-columns:1fr; }
  .mkx-footer__grid{ grid-template-columns:1fr 1fr; }
  .mkx-sec-head__t{ font-size:17px; }
  .mkx-topbar__left{ display:none; }
}
@media (max-width:420px){
  .mkx-cats{ grid-template-columns:repeat(2,1fr); }
  .mkx-stores{ grid-template-columns:repeat(2,1fr); }
  .mkx-footer__grid{ grid-template-columns:1fr; }
}

/* ====================================================================
   AJUSTES FINOS DE RESPONSIVIDADE (telemóveis pequenos)
   ==================================================================== */

/* Cartões promocionais do hero: altura natural no telemóvel/tablet, para
   o texto (título de 2 linhas + descrição + botão) nunca ser cortado. */
@media (max-width:991px){
}

/* Ecrãs muito estreitos (≤430px): a barra de categorias e as acções
   do cabeçalho reorganizam-se para nada ficar cortado. */
@media (max-width:430px){
  /* Nada de flex-wrap aqui: a barra mantém-se numa linha e desliza na
     horizontal dentro de si própria — assim não empurra a página nem
     corta texto. */
  .mkx-nav .mkx-wrap{ flex-wrap:nowrap; gap:6px; }
  .mkx-nav__all{ padding:9px 11px; font-size:12.5px; }
  .mkx-nav__all i.fa-angle-down{ display:none; }
  .mkx-nav__ofertas{ padding:8px 9px; font-size:12.5px; }
  .mkx-nav__links a{ font-size:12.5px; padding:7px 10px; }
  .mkx-actions{ gap:1px; }
  .mkx-act{ padding:6px 5px; }
  .mkx-act > i{ font-size:18px; }
  .mkx-act__badge{ left:20px; }
  .mkx-btn-vender{ padding:9px 11px; }
}

/* Muito estreito (≤340px): o logótipo encolhe um pouco para dar espaço. */
@media (max-width:340px){
  .mkx-logo__img{ height:34px; }
  .mkx-act > i{ font-size:17px; }
  .mkx-btn-vender{ padding:8px 9px; }
}

/* Lojas em destaque: logótipo próprio da loja (quadrado ou rectangular) sem deformar */
.mkx-store__ini--logo{ background:#fff; box-shadow:inset 0 0 0 1px rgba(15,42,82,.12); overflow:hidden; }
.mkx-store__ini--logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; padding:5px; display:block; }