:root{
  --bg:#f6f7fb; --card:#fff; --line:#e7e9ef; --text:#0f172a; --muted:#475569;
  --radius-card:20px; --radius-img:14px; --radius-pill:999px;
  --shadow: 0 4px 18px rgba(16,24,40,.06);
/*  --buy:#1f7a35;*/
  --buy:#000000;
  --off-gap:5px;           /* distância máxima entre ofertas */
  --off-per-row:3;          /* quantidade alvo de ofertas visíveis por card */
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1380px;margin:0px auto;padding:0 16px;overflow-x:hidden}

/* Header */
.site-header{display:grid;grid-template-columns:1fr auto;grid-template-areas:"slogan logo" "search search";align-items:center;gap:12px;margin:1px 0 1px; background-color: #ffbc00ab; padding: 20px;}
.slogan{grid-area:slogan;font-size:18px;font-weight:100;line-height:1.25;color:#2b2f36;text-align:center}
.logo{grid-area:logo;justify-self:end}
.logo img{height:90px;width:auto;display:block}
.searchbar{grid-area:search;position:relative;width:100%}
.searchbar input{border:1px solid var(--line);background:#fff;padding:12px 48px 12px 14px;border-radius:var(--radius-pill);width:100%;font-size:14px;
  font-family:'Nunito','Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.searchbar button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:1px solid var(--line);
  border-radius:var(--radius-pill);cursor:pointer;background:#fff center/18px no-repeat url('img/buscar.png')}
@media(min-width:992px){
  .site-header{grid-template-columns:1fr auto 1fr;grid-template-areas:"slogan logo search";gap:16px}
  .slogan{font-size:20px}
  .logo{justify-self:center}
  .searchbar{justify-self:end;max-width:450px;width:100%}
}

/* Filtros */
.controls{display:flex;gap:10px;flex-wrap:nowrap;overflow:auto;padding-bottom:2px;margin:1px 0 14px; /*background-color: #ffbc0054;*/ padding: 10px;}
.controls select{border:1px solid var(--line);background:#fff;padding:10px 12px;border-radius:12px;min-width:180px;font-size:14px;flex:1 1 0;
  font-family:'Nunito','Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; text-transform: uppercase;}
@media(min-width:992px){
  .controls{width:80%;margin:6px auto 14px;justify-content:center}
  .controls select{min-width:0}
}

/* GRID */
.grid{display:grid;gap:10px;grid-template-columns:1fr;align-items:stretch;justify-items:stretch;max-width:100%}
.grid>*{min-width:0}
@media (min-width:680px){  .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:960px){  .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1220px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1520px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr))} }

/* Cards */
.product-card{background:var(--card);border:1px solid #e6e8ee;border-radius:var(--radius-card);padding:12px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;height:100%;min-height:520px}
.pc-img{position:relative;width:100%;aspect-ratio:1/1;background:#fff center/cover no-repeat;border-radius:var(--radius-img);display:block}
.pc-img::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow: inset 0 10px 24px rgba(0,0,0,.06), inset 0 -12px 28px rgba(0,0,0,.07)}

.pc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-top:6px}
.pc-title{flex:1 1 auto;text-align:left;font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.3px;margin:6px 8px 2px 8px;word-break:break-word;
  font-family:'Nunito','Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
/* Ícone de compartilhar 38px */
.pc-share-icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;
  border:none;background:transparent;box-shadow:none;text-decoration:none;margin-top:6px}
.pc-share-icon img{width:24px;height:24px;display:block}

.pc-desc{color:#374151;font-size:14px;text-align:left;line-height:1.46;padding:0 8px;overflow-wrap:anywhere}

/* Ofertas — 3 por card; ícones dimensionados pela largura disponível e gap máx 10px */
.pc-offers{display:flex;gap:var(--off-gap);margin:2px 2px 0;align-items:flex-end;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin-top:auto;padding-bottom:8px}
.pc-off{
  flex:0 0 calc((100% - (var(--off-gap) * (var(--off-per-row) - 1))) / var(--off-per-row));
  min-width:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px
}
.pc-offers::-webkit-scrollbar{height:8px}
.pc-offers::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:999px}
.pc-offers::-webkit-scrollbar-track{background:transparent}

/* Elementos blocados — MESMA largura: preço, ícone e botão */
.pc-label, .pc-price, .pc-actions{width:100%;text-align:center;display:flex;justify-content:center;align-items:center}
.pc-label{font-size:11px;/*color:#6b7280;*/color:#000;text-transform:lowercase;line-height:1;margin-top:2px;
  font-family:'Nunito','Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.pc-label.buy{color:var(--buy);font-weight:100}
.pc-price{font-size:15px;font-weight:800;color:#0f172a;margin-top:2px;
  font-family:'Nunito','Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.pc-price.buy{color:var(--buy)}

/* Ícone loja ajusta automaticamente ao bloco .pc-off */
.pc-icon-wrap{
  width: clamp(60px, calc(100% - 4px), 92px);
  aspect-ratio: 1 / 1;
  border-radius:16px;padding:0;background:transparent;border:none;box-shadow:none;display:grid;place-items:center
}
.pc-icon{width:100%;height:100%;object-fit:contain;display:block;border-radius:10px}

/* Botões de foto menores, sem quebra de linha do texto */
.pc-actions .pc-btn{font-size:8px;padding:4px 8px;border-radius:var(--radius-pill);border:1px solid #e5e7eb;background:#f1f5f9;color:#111;cursor:pointer;white-space:nowrap}
.pc-actions .pc-btn.active{background:#111;color:#fff;border-color:#111}
.pc-actions .pc-btn[disabled], .pc-actions .pc-btn.disabled{display:none !important}

.loader{display:none;place-items:center;padding:40px;color:#6b7280}
.loader.active{display:grid}
.empty{padding:40px;text-align:center;color:#6b7280}
.footer{padding:18px 0;text-align:center;color:#6b7280;font-size:14px}

/* WhatsApp share: 38x38 px exatos */
.pc-share-icon{
  width:38px;
  height:38px;
  padding:0;           /* garante que não “coma” espaço interno */
  border:none;
  background:transparent;
  box-shadow:none;
  line-height:0;       /* evita espaço extra do inline-content */
}
.pc-share-icon img{
  width:38px;
  height:38px;
  display:block;       /* remove gaps como inline-image */
  object-fit:contain;  /* preserva o aspecto do arquivo */
}

/* ===== PATCH de UI (filtros 50px, voltar ao topo, limpar-busca) ===== */
:root { --filtro-radius: 50px; }

/* Campos de filtro arredondados (selects e input de busca) */
.filters select,
.filters input[type="search"],
.filter-bar select,
.filter-bar input[type="search"] {
  border-radius: var(--filtro-radius) !important;
}

/* Botão voltar ao topo (usa mg/topo.png) */
#backToTop{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 48px; height: 48px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.65) url("img/topo.png") center/70% no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  cursor: pointer; display: none; z-index: 999;
}
#backToTop:hover{ filter: brightness(.95); }

/* Estrutura para o botão de limpar no campo de busca */
.search-wrap { position: relative; }
.search-wrap .search-input { padding-right: 66px; }
.search-wrap .search-clear{
  position: absolute;
  right: 44px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border: none; background: transparent;
  background-image: url("img/apagar.png");
  background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
  opacity: .85; cursor: pointer; display: none;
}
.search-wrap .search-clear:hover{ opacity: 1; }

/* Linha extra com variações (N3/N4) nos cards */
.meta.nv{opacity:.85;font-size:.9rem;margin-top:2px}



/* === Mobile responsiveness (<= 600px) — no functional changes === */
@media (max-width: 600px){
  .site-header{
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "search"
      "slogan";
    gap: 12px;
    padding: 12px 16px;
  }
  .logo{ justify-self:center; }
  .logo img{ height:64px; }
  .slogan{ font-size:16px; line-height:1.3; }

  /* Avoid iOS zoom by using >=16px font-size on inputs */
  .searchbar input{ font-size:16px; padding:12px 48px 12px 16px; }
  .searchbar button{ width:40px; height:40px; }

  /* Filters: allow wrapping and comfortable touch targets */
  .controls{ flex-wrap: wrap; gap: 8px; overflow: visible; }
  .controls select{ min-width: 46%; flex: 1 1 46%; font-size:16px; padding:12px; }
}

@media (max-width: 380px){
  .controls select{ min-width: 100%; flex-basis: 100%; }
  .logo img{ height:56px; }
}



/* === Top disclaimer container (leve e menor no mobile) === */
.top-disclaimer{
  font-size:12px; line-height:1.35; color:#374151;
  padding:8px 8px; 
/*  margin:12px 0 10px;
background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 4px 18px rgba(16,24,40,.06);
  overflow:hidden; /* para animação de cortina */
  max-height:200px; /* altura inicial adequada para 2-3 linhas */
  transition:max-height .5s ease, margin .5s ease, padding .5s ease, opacity .4s ease;
  text-align: center;
}

/* === Header mobile: logo à esquerda, slogan em duas linhas à direita; busca abaixo centralizada === */
@media (max-width: 768px){
  .site-header{
    grid-template-columns: 2fr 5fr;
    grid-template-areas:
      "logo slogan"
      "search search";
    gap: 10px;
    padding: 12px;
  }
  .logo{grid-area:logo; justify-self:start; align-self:center;}
  .slogan{grid-area:slogan; justify-self:end; text-align:right; font-size:14px; line-height:1.2;}
  .searchbar{grid-area:search; justify-self:center; width:100%; max-width:640px;}
}

/* === Botões do menu (selects) menores + seta 5px da direita (mobile/tablet) === */
@media (max-width: 768px){
  .controls{gap:8px; flex-wrap:wrap}
  .controls select{
    -webkit-appearance:none; appearance:none;
    padding:8px 36px 8px 12px; /* menor altura */
    background-color:#fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9l6 6 6-6' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right 5px center; /* seta 5px da margem */
    background-size:18px 18px;
    min-width: calc(50% - 10px);
    font-size:14px;
  }
  .searchbar input{ font-size:16px; padding:8px 44px 8px 12px; height:auto; } /* mesma altura dos selects */
  .searchbar button{ width:36px; height:36px; } /* lupa proporcional */
}


/* === Desktop-only menu refinements (no functional changes) === */
@media (min-width: 768px){
  /* 1) Arrow moved 5px to the left inside the select (custom arrow overlay) */
  .controls select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 44px; /* room for arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9l6 6 6-6' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center; /* 5px more to the left vs right 5px */
    background-size: 18px 18px;
    border-radius: 12px;
  }
  /* Hide default arrow in some browsers */
  .controls select::-ms-expand{ display:none; }

  /* 2) Dropdown (submenu) visual: rounded, subtle separators, translucent white bg, slightly smaller font */
  .controls select option{
    background-color: rgba(255,255,255,0.40);
    color: #0f172a;
    font-size: 95%;
  }
  /* 1px divider between options (simulates spacing) */
  .controls select option + option{
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  /* Hover/selected background matches the header yellow */
  .controls select option:hover,
  .controls select option:checked{
    background-color: #FFCC00;
    color: #0f172a;
  }
}


/* === Custom dropdown (>=768px) — progressive enhancement; mobile usa select nativo === */
@media (min-width: 768px){
.controls .cs{position:relative; display:inline-block; width:100%;.controls .cs-hidden{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none;}
  .controls .cs-trigger{
    display:flex; align-items:center; justify-content:space-between;
    width:100%;
    border:1px solid var(--line); background:#fff; border-radius:12px;
    padding:10px 40px 10px 12px; font-size:14px; line-height:1.2;
    cursor:pointer; box-shadow:var(--shadow);
  }
  .controls .cs-trigger:after{
    content:''; width:18px; height:18px; flex:0 0 18px;
    background: no-repeat center/18px 18px url("data:image/svg+xml;charset=UTF-8,%3csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6 9l6 6 6-6' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    margin-left:8px; margin-right:10px;
}
/* seta 5px mais à esquerda vs 5px da borda */
  }
  .controls .cs.open .cs-trigger{border-color:#d1d5db; box-shadow:0 8px 24px rgba(16,24,40,.12)}
  .controls .cs-menu{
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
    background:rgba(255,255,255,.40); backdrop-filter:saturate(140%) blur(4px);
    border:1px solid rgba(0,0,0,.06); border-radius:12px; box-shadow:0 20px 40px rgba(16,24,40,.14);
    padding:6px 0; display:none; max-height:340px; overflow:auto;
  }
  .controls .cs.open .cs-menu{display:block}
  .controls .cs-item{
    list-style:none; margin:0; padding:9px 12px; font-size:95%; color:#0f172a; cursor:pointer;
  }
  .controls .cs-item + .cs-item{ border-top:1px solid rgba(0,0,0,.06); } /* 1px entre itens */
  .controls .cs-item[aria-selected="true"]{ background:#ffcc00; }
  .controls .cs-item:hover{ background:#ffcc00; }
}


/* === Remove 'X' nativo do campo de busca (Chrome/Safari/Edge) === */
.searchbar input[type="search"]::-webkit-search-decoration,
.searchbar input[type="search"]::-webkit-search-cancel-button,
.searchbar input[type="search"]::-webkit-search-results-button,
.searchbar input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance: none;
  display: none;
  height: 0;
  width: 0;
}
/* Edge/IE */
.searchbar input[type="search"]::-ms-clear,
.searchbar input[type="search"]::-ms-reveal{
  display: none;
  width: 0;
  height: 0;
}

/* Fallback amplo (caso o markup não use .searchbar) */
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none; display:none; }
input[type="search"]::-ms-clear, input[type="search"]::-ms-reveal{ display:none; }

/* === Top Curtain Banner (scoped) === */
    #TopCurtainBanner{
      overflow:hidden;
      max-height:0;
      opacity:0;
      transition:max-height .6s ease, opacity .3s ease;
      margin:8px 0 12px;
      background:#fffbe6;
      border:0px solid #f0d96a;
      border-radius:6px;
      box-shadow:0 8px 24px rgba(16,24,40,.08);
      color:#333;
	  font-size:0.75rem !important;
	  text-align:center;
    }
    #TopCurtainBanner.is-open{ opacity:1; }
    #TopCurtainBanner .inner{ padding:10px 16px; position:relative; }
    #TopCurtainBanner .banner-close{
      position:absolute; right:8px; top:6px;
      background:transparent; border:0; font-size:20px; line-height:1; cursor:pointer; color:#333;
    }
    @media (max-width:640px){
      #TopCurtainBanner{ border-radius:8px; }
      #TopCurtainBanner .inner{ padding:8px 12px; }
    }