:root {
  --blue: #0033c6;
  --blue-dark: #00279a;
  --blue-soft: #f6f9fe;
  --text: #444;
  --text-2: #555;
  --muted: #777;
  --line: #ccc;
  --line-soft: #e7e7e7;
  --bg: #fcfcfc;
  --hdr: #f7f7f7;
  --card: #fafafa;
  --green: #2c5c0a;
  --red: #ca1717;
  --star: #ce7317;
  --star-off: #d9d9d9;
  --yellow: #ffb600;
  --yellow-ink: #735100;
  --radius: 8px;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.a11y-zoom body { zoom: 1.15; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--blue); color: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.container { width: 100%; max-width: 1376px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.hdr { background: var(--hdr); position: relative; z-index: 30; }
.hdr-top { display: flex; align-items: center; height: 72px; }
.logo {
  font-weight: 900; font-size: 29px; letter-spacing: -0.8px; line-height: 1;
  color: var(--blue); flex: none; width: 160px; white-space: nowrap;
}
.logo span { color: #1f7bff; }
.logo-sm { font-size: 24px; width: auto; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--blue); position: relative; }
.a11y-btn { margin-left: 29px; width: 26px; height: 26px; border-radius: 50%; flex: none; }
.a11y-btn[aria-pressed="true"] { background: var(--blue); color: #fff; }

.search { position: relative; flex: 1 1 625px; max-width: 625px; margin-left: 28px; height: 42px; }
.search input {
  width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
  padding: 0 48px 0 24px; font-size: 14px; color: var(--text-2); outline: none; -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--text-2); opacity: 1; }
.search input::-webkit-search-cancel-button { display: none; }
.search input:focus { border-color: var(--blue); }
.search > button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #555; display: flex; padding: 4px; }

.ac {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px 0; z-index: 40; max-height: 70vh; overflow: auto;
}
.ac a { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 13px; color: var(--text); }
.ac a:hover, .ac a.on { background: #f1f4fc; }
.ac img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.ac .ac-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac .ac-price { color: var(--blue); font-weight: 800; white-space: nowrap; }
.ac .ac-all { color: var(--blue); font-weight: 700; border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 10px; }

.cep-btn { display: flex; align-items: center; gap: 9px; margin-left: 24px; color: var(--blue); font-size: 16px; white-space: nowrap; flex: none; }
.cep-btn span { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.account {
  display: flex; align-items: center; justify-content: space-between; margin-left: 24px; height: 42px;
  background: #ebebeb; border-radius: 4px; padding: 0 22px 0 25px; width: 237px; flex: none;
}
.account-btn { display: flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 700; font-size: 14px; white-space: nowrap; }
.fav-link { width: 26px; height: 26px; }
.cart-btn { margin-left: 15px; width: 30px; height: 30px; flex: none; }
.badge-count {
  position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
}

.hdr-nav { display: flex; align-items: center; justify-content: space-between; height: 38px; padding-top: 4px; position: relative; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.hdr-nav a, .hdr-nav .nav-right button, .dept-btn { color: var(--blue); font-size: 14px; }
.hdr-nav a:hover, .hdr-nav .nav-right button:hover, .dept-btn:hover { text-decoration: underline; }
.dept-btn { display: flex; align-items: center; gap: 4px; margin-left: 1px; }
.cupom { background: var(--red); color: #fff; font-weight: 700; font-size: 14px; height: 21px; line-height: 21px; padding: 0 9px; border-radius: 11px; }
.cupom:hover { background: #a91212; }
.dept-menu {
  position: absolute; left: 16px; top: 100%; background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 16px 0; min-width: 300px; z-index: 50; display: grid; grid-template-columns: 1fr 1fr; min-width: 520px;
}
.dept-menu h4 { margin: 0 0 6px; padding: 0 20px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.dept-menu a { display: block; padding: 8px 20px; color: var(--text) !important; font-size: 14px !important; }
.dept-menu a:hover { background: #f1f4fc; color: var(--blue) !important; text-decoration: none !important; }

/* ---------- Main / busca ---------- */
.main { flex: 1; padding: 0 20px 56px 46px; outline: none; }
.page-title { margin: 21px 0 0; font-size: 28px; line-height: 1.3; font-weight: 700; color: var(--blue); letter-spacing: -.1px; }
.suggest-label { margin: 41px 0 0; font-size: 16px; font-weight: 700; color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 13px; }
.chip {
  display: inline-flex; align-items: center; height: 23px; padding: 0 8px; border: 1px solid #c4c4c4; border-radius: 2px;
  background: #f6f6f6; color: var(--text-2); font-size: 12px; white-space: nowrap;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }

.layout { display: grid; grid-template-columns: 309px minmax(0, 1fr); gap: 24px; margin-top: 25px; align-items: start; }

/* Sidebar */
.full-box {
  display: flex; justify-content: space-between; align-items: flex-start; height: 57px; padding: 14px 8px 0 9px;
  background: var(--hdr); border: 1px solid #e3e3e3; border-radius: var(--radius); font-weight: 700; font-size: 14px; color: var(--text);
}
.full-box label { cursor: pointer; padding-top: 1px; }
.switch { position: relative; width: 44px; height: 24px; flex: none; margin-top: 1px; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; background: #d8d8d8; border-radius: 12px; transition: background .2s; }
.switch .knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; display: flex; align-items: center; justify-content: center;
}
.switch .knob::before { content: ''; width: 8px; height: 2px; border-radius: 1px; background: #444; }
.switch input:checked ~ .track { background: var(--blue); }
.switch input:checked ~ .knob { transform: translateX(20px); }
.switch input:checked ~ .knob::before { width: 4px; height: 8px; background: none; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); border-radius: 0; }
.switch input:focus-visible ~ .track { outline: 2px solid var(--blue); outline-offset: 2px; }

.filters { margin-top: 17px; border: 1px solid var(--line); border-radius: 4px; padding: 0 16px 16px; background: var(--bg); }
.fgroup + .fgroup { border-top: 1px solid var(--line-soft); }
.fgroup-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 4px 13px 0;
  font-size: 16px; font-weight: 700; color: var(--text-2); text-align: left;
}
.fgroup-head svg { transition: transform .2s; }
.fgroup.closed .fgroup-head svg { transform: rotate(180deg); }
.fgroup.closed .fgroup-body { display: none; }
.fgroup-body { padding-bottom: 8px; }
.fgroup:first-child .fgroup-body { padding-bottom: 22px; }
.fgroup + .fgroup .fgroup-head { padding-top: 20px; }
.price-labels, .price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.price-labels { font-size: 13px; color: var(--text); margin-top: 4px; }
.price-inputs { margin-top: 9px; }
.price-inputs input {
  width: 100%; height: 60px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  padding: 0 14px; font-size: 12px; color: var(--text-2); outline: none;
}
.price-inputs input:focus { border-color: var(--blue); }
.range { position: relative; height: 18px; margin: 21px 7px 0 8px; }
.range-track { position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: #d6dbe8; }
.range-fill { position: absolute; top: 0; bottom: 0; background: var(--blue); border-radius: 2px; }
.range input {
  position: absolute; left: -9px; width: calc(100% + 18px); top: 0; height: 18px; margin: 0; background: none;
  pointer-events: none; -webkit-appearance: none; appearance: none;
}
.range input::-webkit-slider-runnable-track { background: none; height: 18px; }
.range input::-moz-range-track { background: none; height: 18px; }
.range input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); border: 0; cursor: grab;
}
.range input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); border: 0; cursor: grab; }
.range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0,51,198,.25); }
.price-minmax { display: flex; justify-content: space-between; margin-top: 13px; font-size: 13px; color: var(--text-2); }
.btn-apply {
  width: 100%; height: 40px; margin-top: 18px; border: 2px solid var(--blue); border-radius: 3px; background: var(--blue-soft);
  color: var(--blue); font-weight: 700; font-size: 15px;
}
.btn-apply:hover { background: #e8eefc; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid #555; border-radius: 3px; background: #fff; flex: none; cursor: pointer; display: grid; place-content: center; }
.check input:checked { background: var(--blue); border-color: var(--blue); }
.check input:checked::before { content: ''; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check .stars { margin-right: 2px; }
.clear-filters { display: inline-block; margin-top: 12px; color: var(--blue); font-weight: 700; font-size: 13px; text-decoration: underline; }

/* Resultados */
.results-head { display: flex; justify-content: space-between; align-items: flex-start; padding-top: 14px; margin-bottom: 43px; gap: 16px; }
.count { margin-top: 22px; font-size: 12px; font-weight: 700; color: var(--text); }
.sort { width: 226px; flex: none; }
.sort label { display: block; font-size: 12px; color: var(--text); margin-bottom: 7px; }
.select { position: relative; }
.select select {
  width: 100%; height: 49px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); padding: 0 40px 0 16px;
  font-size: 14px; color: var(--text-2); -webkit-appearance: none; appearance: none; cursor: pointer; outline: none;
}
.select select:focus { border-color: var(--blue); }
.select svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #333; }
.filter-toggle { display: none; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.card {
  position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); transition: box-shadow .2s, border-color .2s; min-width: 0;
}
.card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); border-color: #bbb; }
.card-link { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 20px; color: var(--text); }
.card-img { height: 180px; display: flex; align-items: center; justify-content: center; }
.card-img img { width: 100%; height: 100%; object-fit: contain; }
.card-title {
  margin: 14px 0 0; font-size: 14px; font-weight: 700; line-height: 21px; color: var(--text-2); height: 42px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rating { display: flex; align-items: center; margin-top: 12px; font-size: 12px; color: var(--text-2); }
.stars { display: inline-flex; gap: 4px; }
.star { position: relative; width: 16px; height: 16px; display: inline-block; }
.star svg { position: absolute; inset: 0; width: 16px; height: 16px; }
.star .on { color: var(--star); }
.star .off { color: var(--star-off); }
.star-clip { position: absolute; inset: 0; overflow: hidden; }
.rating .n { margin-left: 9px; }
.price-old { display: flex; align-items: center; gap: 8px; margin-top: 23px; min-height: 18px; }
.price-old s { font-size: 12px; color: var(--muted); }
.badge-off { background: var(--green); color: #fff; font-weight: 800; font-size: 12px; line-height: 16px; padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.inst { margin: 4px 0 0; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--text); }
.pix { margin: 6px 0 0; font-size: 21px; font-weight: 800; line-height: 28px; color: var(--blue); letter-spacing: .1px; }
.pix-label { margin: 3px 0 0; font-size: 12px; color: var(--blue); font-weight: 600; }
.tags { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: auto; padding-top: 22px; }
.tag { font-size: 7px; font-weight: 800; line-height: 10px; padding: 0 4px; border-radius: 2px; text-transform: uppercase; letter-spacing: .1px; white-space: nowrap; }
.tag-rules { background: var(--yellow); color: var(--yellow-ink); }
.tag-retira { background: var(--blue); color: #fff; padding: 0 12px; }
.tag-full { background: #0b8a3e; color: #fff; }

.card-fav, .card-add { position: absolute; opacity: 0; transition: opacity .15s; }
.card:hover .card-fav, .card:hover .card-add, .card-fav.on, .card-fav:focus-visible, .card-add:focus-visible { opacity: 1; }
.card-fav {
  top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.16);
  display: flex; align-items: center; justify-content: center; color: var(--blue);
}
.card-fav.on svg path { fill: var(--blue); }
.card-add {
  left: 24px; right: 24px; top: 166px; height: 36px; border-radius: 4px; background: var(--blue); color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.card-add:hover { background: var(--blue-dark); }

.more { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 32px; font-size: 13px; color: var(--muted); }
.btn-outline {
  height: 44px; padding: 0 28px; border: 2px solid var(--blue); border-radius: 4px; color: var(--blue); background: var(--blue-soft); font-weight: 700; font-size: 15px;
}
.btn-outline:hover { background: #e8eefc; }
.btn-primary {
  height: 48px; padding: 0 28px; border-radius: 4px; background: var(--blue); color: #fff; font-weight: 800; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-primary:disabled { background: #9aa7cf; cursor: not-allowed; }

.empty { grid-column: 1 / -1; padding: 48px 24px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); background: #fff; }
.empty h2 { margin: 0 0 8px; color: var(--blue); font-size: 22px; }
.empty p { margin: 0 0 16px; color: var(--text-2); }
.empty .chips { justify-content: center; }

/* ---------- Produto ---------- */
.crumbs { margin-top: 20px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--blue); }
.crumbs a:hover { text-decoration: underline; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; margin-top: 20px; align-items: start; }
.gallery { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
.thumbs { display: flex; flex-direction: column; gap: 10px; }
.thumbs button { width: 72px; height: 72px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 6px; overflow: hidden; }
.thumbs button.on { border: 2px solid var(--blue); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; }
.main-img { position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--radius); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden; }
.main-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.main-img .card-fav { opacity: 1; top: 16px; right: 16px; }
.mirror { transform: scaleX(-1); }
.zoom { transform: scale(1.7) translateY(14%); }
.buybox h1 { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--text); }
.pdp-meta { margin-top: 8px; font-size: 12px; color: var(--muted); }
.pdp-meta a { color: var(--blue); font-weight: 700; }
.buybox .rating { margin-top: 10px; }
.price-box { margin-top: 20px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.price-box .price-old { margin-top: 0; }
.pdp-pix { margin-top: 6px; font-size: 32px; font-weight: 800; color: var(--blue); line-height: 1.2; }
.pdp-pix small { font-size: 16px; font-weight: 700; }
.pdp-econ { margin-top: 4px; font-size: 13px; color: #0b7a34; font-weight: 700; }
.pdp-inst { margin-top: 10px; font-size: 14px; color: var(--text); }
.link-btn { color: var(--blue); font-weight: 700; font-size: 13px; text-decoration: underline; margin-top: 8px; }
.inst-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.inst-table td { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.inst-table td:last-child { text-align: right; color: var(--muted); }
.opt-label { margin: 20px 0 8px; font-weight: 700; font-size: 14px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { min-width: 76px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-weight: 700; color: var(--text-2); }
.opt.on { border: 2px solid var(--blue); color: var(--blue); background: var(--blue-soft); }
.buy-row { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.qty button { width: 40px; height: 100%; font-size: 20px; color: var(--blue); font-weight: 700; }
.qty button:disabled { color: #bbb; cursor: default; }
.qty span { min-width: 30px; text-align: center; font-weight: 700; }
.qty.sm { height: 34px; }
.qty.sm button { width: 30px; font-size: 17px; }
.buy-row .btn-primary { flex: 1; min-width: 160px; }
.buy-row .btn-outline { height: 48px; }
.pdp-tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.pdp-tags .tag { font-size: 10px; line-height: 18px; padding: 0 8px; }
.ship { margin-top: 20px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.ship h3 { margin: 0 0 10px; font-size: 14px; }
.ship form { display: flex; gap: 8px; }
.ship input { flex: 1; min-width: 0; height: 42px; border: 1px solid var(--line); border-radius: 4px; padding: 0 12px; outline: none; background: var(--bg); }
.ship input:focus { border-color: var(--blue); }
.ship .btn-outline { height: 42px; padding: 0 18px; }
.ship-list { list-style: none; padding: 0; margin: 12px 0 0; }
.ship-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.ship-list b { color: var(--text); }
.ship-list .free { color: #0b7a34; font-weight: 800; }
.ship-note { margin: 8px 0 0; font-size: 11px; color: var(--muted); }
.pdp-section { margin-top: 40px; }
.pdp-section h2 { font-size: 20px; color: var(--blue); margin: 0 0 14px; }
.pdp-section p { line-height: 1.7; color: var(--text-2); max-width: 900px; margin: 0 0 10px; }
.specs { border-collapse: collapse; width: 100%; max-width: 760px; font-size: 14px; background: #fff; border: 1px solid var(--line-soft); }
.specs th, .specs td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.specs th { width: 38%; background: #f5f6f8; color: var(--text); font-weight: 700; }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- Carrinho ---------- */
.cart-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; margin-top: 24px; align-items: start; }
.cart-list { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.cart-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; padding: 20px; align-items: center; }
.cart-item + .cart-item { border-top: 1px solid var(--line-soft); }
.cart-item img { width: 96px; height: 96px; object-fit: contain; }
.cart-item .ci-name { font-weight: 700; color: var(--text); line-height: 1.35; }
.cart-item .ci-name:hover { color: var(--blue); }
.ci-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ci-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.ci-remove { color: var(--blue); font-size: 13px; font-weight: 700; text-decoration: underline; }
.ci-price { text-align: right; white-space: nowrap; }
.ci-price .pix { font-size: 18px; margin: 0; line-height: 1.2; }
.ci-price small { display: block; font-size: 11px; color: var(--muted); }
.summary { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 20px; position: sticky; top: 16px; }
.summary h2 { margin: 0 0 12px; font-size: 18px; color: var(--text); }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; }
.sum-row.total { border-top: 1px solid var(--line-soft); margin-top: 6px; padding-top: 14px; font-weight: 800; }
.sum-row.total span:last-child { color: var(--blue); font-size: 22px; }
.sum-sub { font-size: 12px; color: var(--muted); text-align: right; margin-top: -4px; }
.coupon-form { display: flex; gap: 8px; margin: 12px 0 4px; }
.coupon-form input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 4px; padding: 0 12px; text-transform: uppercase; outline: none; }
.coupon-form input:focus { border-color: var(--blue); }
.coupon-form .btn-outline { height: 40px; padding: 0 14px; font-size: 14px; }
.coupon-ok { font-size: 12px; color: #0b7a34; font-weight: 700; }
.summary .btn-primary { width: 100%; margin-top: 16px; }
.summary .back { display: block; text-align: center; margin-top: 12px; color: var(--blue); font-weight: 700; font-size: 14px; }

/* Drawer */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 60; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: #fff; z-index: 70; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease; box-shadow: -8px 0 30px rgba(0,0,0,.15); visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.drawer-head h2 { margin: 0; font-size: 18px; color: var(--blue); }
.drawer-body { flex: 1; overflow: auto; }
.drawer-body .cart-item { grid-template-columns: 64px minmax(0, 1fr); padding: 16px 20px; gap: 12px; align-items: start; }
.drawer-body .cart-item img { width: 64px; height: 64px; }
.drawer-body .ci-name { font-size: 13px; }
.drawer-body .ci-price { text-align: left; margin-top: 6px; }
.drawer-empty { padding: 48px 24px; text-align: center; color: var(--text-2); }
.drawer-foot { border-top: 1px solid var(--line-soft); padding: 16px 20px 20px; display: grid; gap: 10px; }
.drawer-foot .sum-row { padding: 0; }
.drawer-foot .btn-primary, .drawer-foot .btn-outline { width: 100%; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.45); }
.modal-box { position: relative; width: min(440px, 100%); background: #fff; border-radius: 10px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: calc(100vh - 32px); overflow: auto; }
.modal-close { position: absolute; top: 14px; right: 14px; color: #555; }
.modal h2 { margin: 0 32px 8px 0; font-size: 20px; color: var(--blue); }
.modal p { margin: 0 0 16px; color: var(--text-2); line-height: 1.5; }
.modal form { display: flex; gap: 8px; }
.modal input[type="text"], .modal input[type="email"] { flex: 1; min-width: 0; height: 46px; border: 1px solid var(--line); border-radius: 4px; padding: 0 14px; font-size: 16px; outline: none; }
.modal input:focus { border-color: var(--blue); }
.modal .btn-primary { height: 46px; }
.modal .muted-link { display: inline-block; margin-top: 12px; color: var(--blue); font-size: 13px; text-decoration: underline; }
.modal .err { color: var(--red); font-size: 13px; margin: 8px 0 0; min-height: 1em; }
.modal .stack { display: grid; gap: 10px; }
.modal .stack .btn-primary, .modal .stack .btn-outline { width: 100%; }
.coupon-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 2px dashed var(--red); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
.coupon-code b { font-size: 22px; letter-spacing: 2px; color: var(--red); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: #1f2430; color: #fff; padding: 12px 18px; border-radius: 6px;
  font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 90; max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Footer */
.ftr { background: var(--hdr); border-top: 1px solid var(--line-soft); margin-top: 24px; }
.ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 36px; padding-bottom: 28px; }
.ftr p { color: var(--text-2); line-height: 1.6; margin: 12px 0 0; max-width: 320px; }
.ftr h3 { margin: 0 0 12px; font-size: 14px; color: var(--text); }
.ftr-grid button { display: block; color: var(--blue); font-size: 14px; padding: 4px 0; }
.ftr-grid button:hover { text-decoration: underline; }
.pay { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pay li { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 4px 8px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.ftr-bottom { border-top: 1px solid var(--line-soft); padding-top: 14px; padding-bottom: 18px; font-size: 12px; color: var(--muted); }

/* ---------- Responsivo ---------- */
@media (max-width: 1400px) {
  .main { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 1240px) {
  .hdr-nav .nav-right { display: none; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .account { width: auto; gap: 20px; }
}
@media (max-width: 1023px) {
  .hdr-top { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 10px; row-gap: 10px; }
  .logo { width: auto; }
  .search { order: 10; flex: 1 1 100%; max-width: none; margin-left: 0; }
  .cep-btn { margin-left: auto; font-size: 14px; }
  .account { padding: 0 12px; margin-left: 12px; }
  .account-btn span { display: none; }
  .hdr-nav { overflow-x: auto; scrollbar-width: none; }
  .hdr-nav::-webkit-scrollbar { display: none; }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(340px, 90%); background: var(--bg); z-index: 70; overflow: auto; padding: 16px;
    transform: translateX(-100%); transition: transform .25s ease; visibility: hidden;
  }
  .sidebar.open { transform: none; visibility: visible; }
  .sidebar-head { display: flex !important; }
  .filter-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 4px;
    background: #fff; color: var(--blue); font-weight: 700;
  }
  .results-head { align-items: flex-end; margin-bottom: 20px; flex-wrap: wrap; }
  .count { margin-top: 0; width: 100%; order: 3; }
  .pdp { grid-template-columns: 1fr; gap: 24px; }
  .cart-page { grid-template-columns: 1fr; }
  .summary { position: static; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .dept-menu { position: fixed; left: 16px; right: 16px; top: auto; min-width: 0; grid-template-columns: 1fr; max-height: 70vh; overflow: auto; }
}
@media (max-width: 760px) {
  .grid, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card-link { padding: 14px 12px 14px; }
  .card-img { height: 140px; }
  .card-add { display: none; }
  .card-fav { opacity: 1; top: 8px; right: 8px; width: 30px; height: 30px; }
  .pix { font-size: 18px; }
  .page-title { font-size: 22px; }
  .suggest-label { margin-top: 24px; font-size: 14px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .sort { width: 190px; }
  .cep-btn span { max-width: 130px; }
  .a11y-btn { margin-left: 12px; }
  .cart-btn { margin-left: 12px; }
  .cart-item { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-item img { width: 72px; height: 72px; }
  .cart-item .ci-price { grid-column: 2; text-align: left; }
  .gallery { grid-template-columns: 1fr; }
  .thumbs { flex-direction: row; order: 2; }
  .ftr-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 420px) {
  .cep-btn span { display: none; }
  .logo { font-size: 25px; }
}
.sidebar-head { display: none; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sidebar-head h2 { margin: 0; font-size: 18px; color: var(--blue); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }