/* Storefront. Phone first; the wide layout starts at 900px.
   Brand colors, fonts and corner shapes come from the store's appearance (see base.html). */
:root {
  --ink: #1e1a1a; --soft: #4a423c; --muted: #6b625b; --line: #ece5de; --field: #cfc5bb; --chip: #d9d0c7;
  --ground: #fbf8f5; --card: #ffffff; --warn-bg: #fdf0e6; --warn-fg: #9a3412; --ok-fg: #2f6b4a; --wa: #1f6b46;
  --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif;
  --r-s: 6px; --r-m: 8px; --r-btn: 6px; --r-tag: 4px; --ratio: 3 / 4; --cols: 2;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.4; overflow-x: clip; }
body.sheet-open { overflow: hidden; }
h1, h2, p { margin: 0; }
a { color: var(--brand); }
button, input, select { font: inherit; color: inherit; }
button:disabled { opacity: .38; cursor: not-allowed; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.display { font-family: var(--font-display); font-weight: 700; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 14px; }
.grow { flex: 1 1 auto; min-width: 0; }
@media (max-width: 899px) { .wide { display: none !important; } }
.ph { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .10) 0 12px, rgba(255, 255, 255, 0) 12px 24px); }

/* --- header --- */
.announce { padding: 8px 16px; background: var(--brand); color: #fff; text-align: center; font-size: 13px; font-weight: 700; }
/* The header floats over the page: store_header.js slides it away on the way down (.away), brings it back on the way up
   and marks it .solid once the page has moved. It has three looks, so its colors are variables: white on a phone,
   see-through with white text over the banners that open the home page (.over, further down), a dark band on a wide screen. */
.top { --fg: var(--ink); --sub: var(--muted); --mark-bg: var(--brand); --mark-fg: #fff; --cur: var(--brand); position: sticky; top: 0; z-index: 20; background: var(--card); color: var(--fg); box-shadow: 0 1px 0 var(--line), 0 4px 12px rgba(30, 26, 26, .06); transition: transform .28s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.top.away { transform: translateY(-100%); box-shadow: none; }
.top > .wrap { display: flex; align-items: center; gap: 4px; min-height: 60px; padding: 0 6px 0 12px; }
.acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tabs .wrap { display: flex; gap: 18px; height: 40px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.tabs .wrap::-webkit-scrollbar { display: none; }
.tabs a { flex-shrink: 0; display: flex; align-items: center; height: 40px; border-bottom: 3px solid transparent; color: inherit; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tabs a[aria-current] { border-bottom-color: var(--cur); font-weight: 800; }
.brand { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
.brand .mark { width: 34px; height: 34px; border-radius: 50%; background: var(--mark-bg); color: var(--mark-fg); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; overflow: hidden; transition: background .2s ease, color .2s ease; }
.brand .mark img { width: 100%; height: 100%; object-fit: cover; }
.brand strong { display: block; font-size: 16px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand small { display: block; font-size: 11px; color: var(--sub); }
.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; flex-shrink: 0; }
.icon-btn.back { margin-left: -8px; }
.cart-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-s); background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.me { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); border: 1.5px solid var(--brand); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.me.lg { width: 56px; height: 56px; font-size: 18px; flex-shrink: 0; border: 0; }

/* --- layout and pieces --- */
main { padding: 14px 0 120px; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack > * { min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; min-height: 40px; }
.section-head h2 { font-size: 19px; }
.section-head a { font-weight: 700; font-size: 13px; text-decoration: none; padding: 0 4px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 20px; border: 0; border-radius: var(--r-btn); background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn.dark { background: var(--ink); }
.btn.wa { background: var(--wa); }
.btn.ghost { border: 1px solid var(--chip); background: var(--card); color: var(--ink); font-weight: 700; }
.btn.line { border: 1px solid var(--brand); background: var(--card); color: var(--brand); }
.btn.outline { border: 1px solid var(--brand); background: var(--card); color: var(--brand); font-weight: 700; min-height: 40px; padding: 0 14px; font-size: 12.5px; }
.btn.sm { min-height: 42px; padding: 0 16px; font-size: 13px; font-weight: 700; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled=true] { opacity: .38; cursor: not-allowed; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px 2px; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll > * { flex-shrink: 0; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--chip); border-radius: var(--r-btn); background: var(--card); color: var(--ink); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.chip.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.search { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: var(--r-btn); background: var(--card); border: 1px solid var(--chip); color: var(--muted); }
.search input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--ink); }
.search:focus-within { border-color: var(--ink); }
.empty { padding: 28px 20px; border-radius: var(--r-m); background: var(--card); border: 1px dashed #d3c9bf; text-align: center; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.empty strong { color: var(--ink); font-size: 15px; font-weight: 700; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.narrow { max-width: 560px; margin: 0 auto; }

/* --- home --- */
/* Phone: the banners run from edge to edge and a sheet with round corners comes up over their last 10px;
   the blocks follow 12px apart, the cards 12px from the edges (the products keep the 14px of every page). */
.home > main { padding-bottom: 0; }
.home .stack { gap: 12px; }
.home .stack > .s-novidades, .home .stack > .s-mais { margin-top: 10px; }
.carousel { position: relative; margin: 0 -14px; overflow: hidden; background: var(--brand); }
/* A shade under the header, which lies over the banners (see .over), and the top of the sheet. */
.carousel::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 130px; background: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); pointer-events: none; }
.carousel::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(var(--r-s) * -2); height: calc(var(--r-s) * 2 + 10px); border-radius: calc(var(--r-s) * 2) calc(var(--r-s) * 2) 0 0; background: var(--ground); pointer-events: none; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
/* A banner is one image and one link: whatever it says is inside the artwork. 420px tall on a 390px phone, and in step with wider ones. */
.slide { flex: 0 0 100%; scroll-snap-align: start; display: block; height: clamp(420px, 107.7vw, 560px); background: var(--brand); color: #fff; text-decoration: none; }
.slide picture { display: block; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A banner still without an image: its description on a flat block of the same height. */
.slide-text { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; }
.slide-text strong { font-size: 26px; line-height: 1.04; }
.slide-text small { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .85); }
/* Arrows and dots in white over the foot of the banner; only the buttons take the taps, the rest is still the banner's link. */
.slide-nav { position: absolute; z-index: 2; left: 0; right: 0; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.slide-nav button { border: 0; padding: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.slide-nav > button { width: 32px; height: 32px; color: rgba(255, 255, 255, .85); font-size: 11px; }
.slide-dots { display: flex; align-items: center; gap: 2px; }
.dot-btn { width: 24px; height: 28px; display: flex; align-items: center; justify-content: center; }
.dot-btn span { width: 6px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .45); box-shadow: 0 0 2px rgba(0, 0, 0, .3); transition: width .3s; }
.dot-btn[aria-current] span { width: 20px; background: #fff; }
@media (max-width: 899px) {
  /* The banners that open the home page go behind the header, which is see-through with white text until the page moves.
     --top-h is the height of the header (store_header.js measures it). Without scripts the header never turns solid,
     so it stays white and the banners start under it. */
  .over { --top-h: 100px; }
  .over.bare { --top-h: 60px; }
  .over > main { padding-top: 0; }
  .js .over > main { margin-top: calc(var(--top-h) * -1); }
  .js .over > .top:not(.solid) { --fg: #fff; --sub: rgba(255, 255, 255, .8); --mark-bg: #fff; --mark-fg: var(--brand); --cur: #fff; background: transparent; box-shadow: none; }
  .hero { margin-bottom: -10px; } /* the next block starts 2px under the banners: there the padding of the sheet ends */
}
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 -2px; }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.fact > span { font-size: 10.5px; color: var(--muted); }
.fact strong { font-size: 14px; font-weight: 800; }
/* Round shortcuts to the categories, then new arrivals and promotions: four per line inside a white card. */
.cats { position: relative; margin: 0 -2px; padding: 16px 8px; border-radius: var(--r-m); background: var(--card); }
.circles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
.circles a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
.circle { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff; flex-shrink: 0; }
.circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "Ofertas" (and "Tendências" beside it on a wide screen): a white card, its title and prices in the color of the panel.
   On a phone the products are a row that scrolls sideways. */
.panels { margin: 2px -2px 0; }
.hpanel { --tone: #e8461e; padding: 14px 0 14px 12px; border-radius: var(--r-m); background: var(--card); }
.hpanel.trends { --tone: #5b3fd6; }
.hpanel-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding-right: 8px; }
.hpanel-head h2 { font-size: 19px; color: var(--tone); }
.hpanel-head a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 16px; text-decoration: none; }
.hpanel-head a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* the whole heading leads to the list */
.picks { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 0 0; scrollbar-width: none; }
.picks::-webkit-scrollbar { display: none; }
.pick { position: relative; flex: 0 0 112px; min-width: 0; display: flex; flex-direction: column; gap: 5px; color: var(--ink); text-decoration: none; }
.shot { position: relative; display: block; height: 142px; border-radius: var(--r-s); overflow: hidden; background-color: #d9d0c6; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.off { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: var(--r-tag); background: #e8461e; color: #fff; font-size: 10.5px; font-weight: 800; }
.pick strong { font-size: 15px; font-weight: 800; color: var(--tone); }
.pick .name { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.about-card h2 { font-size: 17px; }
.about { color: var(--soft); font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.step b { font-size: 30px; color: var(--brand); }
.step strong { font-weight: 800; }
.step span { font-size: 14px; line-height: 1.5; color: var(--soft); }

/* --- product cards --- */
.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 16px 12px; }
.item { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--ink); text-decoration: none; }
.pic { position: relative; aspect-ratio: var(--ratio); border-radius: var(--r-m); overflow: hidden; background-color: #d9d0c6; margin-bottom: 5px; }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag { position: absolute; top: 8px; left: 8px; padding: 4px 8px; border-radius: var(--r-tag); background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; }
.tag.light { background: #fff; color: var(--ink); }
.ask { position: absolute; bottom: 8px; left: 8px; padding: 3px 8px; border-radius: var(--r-tag); background: rgba(255, 255, 255, .92); color: #8a5a00; font-size: 11px; font-weight: 700; }
.item .name { font-size: 13px; font-weight: 600; line-height: 1.3; padding: 0 2px; }
.item .price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 0 2px; }
.item .price strong { font-size: 15px; font-weight: 800; }
.item .price small { font-size: 11px; color: var(--muted); }
.old { font-size: 12px; color: #7a716a; text-decoration: line-through; }
.item .meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); padding: 0 2px; flex-wrap: wrap; }
.item .meta .dots { display: flex; gap: 5px; }
.dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex-shrink: 0; }

/* --- catalog --- */
.catalog { display: flex; flex-direction: column; gap: 12px; }
.catalog > * { min-width: 0; }
.cat-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 4px; }
.cat-head > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex: 1 1 auto; min-width: 0; }
.cat-head h1 { font-size: 22px; }
.cat-head .count { font-size: 12.5px; flex-shrink: 0; }
.two-btn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tool { height: 44px; border-radius: var(--r-btn); border: 1px solid var(--chip); background: var(--card); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; min-width: 0; padding: 0 10px; }
.tool.on { border-color: var(--ink); }
.tool span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips.active { gap: 6px; align-items: center; }
.pillx { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 12px; border-radius: var(--r-btn); background: var(--brand-soft); color: var(--ink); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.pillx span { font-size: 15px; }
.clear { display: inline-flex; align-items: center; height: 34px; padding: 0 10px; color: var(--brand); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.results { min-width: 0; padding-bottom: 12px; }
/* sheets: filters and sort slide up from the bottom on a phone */
.filters, .sheet { display: none; position: fixed; inset: 0; z-index: 40; flex-direction: column; }
.filters.open, .sheet.open { display: flex; }
.backdrop { flex: 1 1 auto; min-height: 96px; border: 0; padding: 0; background: rgba(20, 16, 16, .45); cursor: pointer; }
.panel { flex-shrink: 0; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border-radius: 10px 10px 0 0; }
.sheet-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 10px 18px; border-bottom: 1px solid var(--line); }
.sheet-head span { font-size: 18px; }
.sheet-head button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 18px; }
.sheet-foot { flex-shrink: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; padding: 12px 16px 18px; border-top: 1px solid var(--line); }
.sheet-foot .btn { min-height: 48px; padding: 0 10px; }
.filters legend { padding: 0; margin-bottom: 10px; font-weight: 800; font-size: 14px; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.opts.fsizes { display: flex; flex-wrap: wrap; }
.opts.toggles { display: flex; flex-direction: column; gap: 0; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt .box { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1.5px solid var(--chip); border-radius: var(--r-s); background: var(--card); font-size: 13px; font-weight: 600; }
.opt .box small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.opt .dot { width: 20px; height: 20px; }
.opt input:checked + .box { border-color: var(--ink); }
.opt input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }
.opt.fsize .box { min-width: 48px; justify-content: center; font-weight: 800; font-size: 13.5px; }
.opt.fsize input:checked + .box, .prices .opt input:checked + .box { background: var(--ink); border-color: var(--ink); color: #fff; }
.prices .opt .box { justify-content: center; font-weight: 700; text-align: center; }
.prices .opt .box .grow { flex: 0 1 auto; }
.prices .opt input:checked + .box small { color: #fff; opacity: .75; }
.prices .opt.any { display: none; }
.opt.toggle .box { min-height: 56px; padding: 0; border: 0; border-top: 1px solid #f2ece6; border-radius: 0; gap: 12px; font-size: 15px; }
.opt.toggle .box .grow { display: flex; flex-direction: column; }
.opt.toggle b { font-weight: 700; }
.opt.toggle em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 400; }
.opt.toggle i { position: relative; width: 48px; height: 28px; border-radius: 14px; background: #d3c9bf; flex-shrink: 0; transition: background .15s; }
.opt.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
.opt.toggle input:checked + .box i { background: var(--brand); }
.opt.toggle input:checked + .box i::after { left: 23px; }
.sort-list { display: flex; flex-direction: column; padding: 6px 8px 18px; }
.sort-list a { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: var(--r-s); color: var(--ink); font-size: 15px; text-decoration: none; }
.sort-list a.on { background: #faf7f4; font-weight: 800; }
.sort-list a svg { color: var(--brand); }

/* --- product --- */
.product { display: grid; gap: 16px; }
.product > * { min-width: 0; }
.gallery { margin: -14px -14px 0; }
.media { position: relative; display: block; width: 100%; height: 400px; padding: 0; border: 0; overflow: hidden; background-color: #d9d0c6; cursor: zoom-in; }
.media:disabled { cursor: default; opacity: 1; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media .tag { top: 14px; left: 14px; }
.media-zoom { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.media-count { position: absolute; left: 14px; bottom: 14px; padding: 3px 8px; border-radius: var(--r-tag); background: rgba(255, 255, 255, .9); color: #3a3430; font-size: 11px; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 16px 0; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { position: relative; width: 52px; height: 66px; margin: 4px 2px; padding: 0; border: 0; border-radius: var(--r-s); overflow: hidden; background: #d9d0c6; flex-shrink: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px transparent; }
.thumb.on { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--brand); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-s); }
.thumb span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; background: rgba(30, 26, 26, .3); }
.ref { font-size: 11.5px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.product h1 { font-size: 24px; line-height: 1.12; }
.bigprice { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.bigprice strong { font-family: var(--font-body); font-size: 24px; font-weight: 800; color: var(--brand); }
.bigprice .muted { font-size: 13px; }
.note { align-self: flex-start; padding: 6px 10px; border-radius: var(--r-s); background: var(--brand-soft); font-size: 12.5px; color: var(--soft); }
.colors { display: flex; flex-wrap: wrap; gap: 12px; }
.color { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px transparent, inset 0 0 0 1px rgba(0, 0, 0, .1); }
.color[aria-pressed=true] { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--brand), inset 0 0 0 1px rgba(0, 0, 0, .1); }
.color .count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--r-s); background: var(--ink); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.size { display: flex; align-items: center; gap: 12px; min-height: 60px; border-bottom: 1px solid var(--line); }
.size.out { opacity: .55; }
.size .z { min-width: 44px; height: 36px; padding: 0 6px; border-radius: var(--r-s); background: var(--card); border: 1px solid var(--chip); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13.5px; flex-shrink: 0; }
.size .st { flex: 1 1 auto; font-size: 12.5px; color: #5d5650; }
.size .st.out { color: var(--warn-fg); }
.size .st.ok { color: var(--ok-fg); }
.size .st.ask { color: #8a5a00; }
.stepper { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--chip); background: var(--card); font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.stepper button[data-step="1"] { border: 0; background: var(--brand); color: #fff; }
.stepper input { width: 34px; height: 44px; border: 0; background: transparent; text-align: center; font-weight: 800; font-size: 16px; padding: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 6px; }
.row-head strong { font-size: 13.5px; font-weight: 700; }
.details { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); font-size: 13px; color: var(--soft); }

/* --- bars at the bottom of the screen --- */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--card); border-top: 1px solid var(--line); padding: 12px 2px 18px; }
.bar .wrap { display: flex; align-items: center; gap: 12px; }
.bar .col { flex-direction: column; align-items: stretch; gap: 6px; }
.bar strong { display: block; font-size: 15px; font-weight: 800; }
.bar small { display: block; font-size: 12px; color: var(--muted); }
.bar .hint { font-size: 11.5px; text-align: center; color: var(--muted); }
.bar .btn { min-height: 48px; }
.bar .col .btn { min-height: 50px; }
.round-wa { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--chip); color: var(--wa); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* --- bottom navigation of a phone: on the home page, the catalog, and the buyer's account and orders --- */
/* Under the sheets (40) and the bars (30), which never share a page with it. Pages keep 120px free at the bottom. */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(62px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--card); border-top: 1px solid var(--line); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none; }
.tabbar a[aria-current] { color: var(--brand); font-weight: 800; }
.tabbar b { height: 18px; font-size: 18px; font-weight: inherit; line-height: 1; }
.tabbar .cart-badge { top: 6px; right: auto; left: 50%; margin-left: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e8461e; font-size: 10px; }

/* --- cart, checkout, order --- */
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.page-head h1 { font-size: 24px; }
.page-head span { font-size: 12.5px; color: var(--muted); }
.line-head { display: flex; gap: 12px; align-items: flex-start; }
.line-head .thumb { width: 60px; height: 76px; margin: 0; border-radius: var(--r-s); object-fit: cover; background: #d9d0c6; flex-shrink: 0; display: block; box-shadow: none; cursor: default; }
.line-head .grow { display: flex; flex-direction: column; gap: 3px; }
.line-head strong { font-size: 14px; font-weight: 700; line-height: 1.25; }
.line-head small { color: var(--muted); font-size: 12px; }
.line-head .sub { font-size: 15px; font-weight: 800; }
.color-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.color-row strong { font-weight: 600; flex-shrink: 0; }
.color-row .sizes-txt { flex: 1 1 auto; min-width: 0; color: var(--soft); }
.color-row .pcs { color: var(--muted); flex-shrink: 0; }
.warn { padding: 8px 10px; border-radius: var(--r-s); background: var(--warn-bg); color: var(--warn-fg); font-size: 12.5px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.link-btn { min-height: 40px; padding: 0 14px; border: 1px solid var(--chip); border-radius: var(--r-btn); background: var(--card); color: var(--ink); font-weight: 700; font-size: 12.5px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.link-btn.danger, .link-btn.plain { border: 0; background: transparent; color: #7a716a; font-weight: 600; }
.link-btn.plain { color: var(--brand); font-weight: 700; padding: 0 4px; }
.progress { height: 8px; border-radius: 4px; background: #efe8e1; overflow: hidden; }
.progress span { display: block; height: 8px; border-radius: 4px; background: var(--brand); }
.progress.ok span { background: var(--wa); }
.sum { display: flex; flex-direction: column; gap: 10px; }
.sum > div { display: flex; justify-content: space-between; gap: 12px; color: var(--soft); font-size: 13.5px; }
.sum > div.total { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 800; font-size: 16px; }
.minmsg { font-size: 12.5px; font-weight: 600; color: var(--warn-fg); }
.minmsg.ok { color: var(--ok-fg); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 700; }
.field input, .field select { width: 100%; height: 48px; border: 1px solid var(--field); border-radius: var(--r-s); padding: 0 12px; background: var(--card); font-size: 16px; }
.field input:focus, .field select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; }
.hintline { font-size: 12px; line-height: 1.5; color: var(--muted); }
.error { color: var(--warn-fg); font-weight: 700; font-size: 13px; }
.errors { margin: 0; padding: 12px 14px; list-style: none; border-radius: var(--r-m); background: var(--warn-bg); color: var(--warn-fg); font-weight: 700; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.consent { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; font-size: 12.5px; line-height: 1.5; color: var(--soft); cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); flex-shrink: 0; }
.callout { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--brand-soft); font-size: 13px; line-height: 1.4; }
.callout.col { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
.callout .btn { min-height: 40px; padding: 0 16px; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.pill { display: inline-block; padding: 5px 10px; border-radius: var(--r-tag); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pill.warn-pill { background: var(--warn-bg); color: #8a3a0c; }
.pill.ok-pill { background: #e4f1e8; color: #1f6b46; }
.pill.off-pill { background: #eeeae6; color: #5d5650; }
.done-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 8px 0; }
.done-head h1 { font-size: 24px; }
.done-head p { font-size: 13px; line-height: 1.5; color: var(--soft); }
.check { width: 56px; height: 56px; border-radius: 50%; background: #e4f1e8; color: var(--wa); display: flex; align-items: center; justify-content: center; }
.chat { border-radius: var(--r-m); background: #efe7dd; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat > span { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.bubble { align-self: flex-end; max-width: 92%; background: #dcf3d0; border-radius: 8px 8px 2px 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* --- buyer account --- */
.hello { display: flex; align-items: center; gap: 14px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trio div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.trio span { font-size: 11.5px; color: var(--muted); }
.trio strong { font-size: 17px; }
.menu { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.menu a, .menu button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.menu > :last-child, .menu form:last-child button { border-bottom: 0; }
.menu strong { display: block; font-weight: 700; }
.menu small { display: block; font-size: 12.5px; color: var(--muted); }
.menu .danger { color: var(--warn-fg); font-weight: 700; }
.order-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); color: var(--ink); text-decoration: none; }
.order-card .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.order-card .thumbs { display: flex; gap: 6px; padding: 0; }
.order-card .thumbs span, .order-card .thumbs img { width: 40px; height: 52px; border-radius: var(--r-s); background: #d9d0c6; object-fit: cover; display: block; }
.timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #cfc5bb; }
.timeline li:last-child::before { display: none; }
.timeline li.done::before { background: var(--ok-fg); }
.timeline .mark { width: 28px; height: 28px; border-radius: 50%; background: #cfc5bb; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; z-index: 1; }
.timeline .done .mark { background: var(--ok-fg); }
.timeline .off .mark { background: #5d5650; }
.timeline .next { opacity: .6; }
.timeline strong { display: block; }
.timeline small { color: var(--muted); font-size: 12.5px; }
.sep { display: flex; align-items: center; gap: 12px; color: #7a716a; font-size: 12px; margin-top: 6px; }
.sep::before, .sep::after { content: ""; flex: 1 1 auto; height: 1px; background: #e2d9cf; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; font-size: 12.5px; padding-top: 10px; border-top: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; }
.caps { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.pw { display: flex; align-items: center; height: 48px; border: 1px solid var(--field); border-radius: var(--r-s); background: var(--card); overflow: hidden; }
.pw:focus-within { outline: 2px solid var(--ink); outline-offset: 1px; }
.pw input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0 !important; outline: none !important; background: transparent; padding: 0 12px; font-size: 16px; }
.pw button { height: 44px; padding: 0 14px; border: 0; background: transparent; color: var(--brand); font-weight: 800; font-size: 13px; cursor: pointer; }
.okmsg { padding: 10px 12px; border-radius: var(--r-s); background: #e4f1e8; color: #2f6b4a; font-size: 12.5px; line-height: 1.45; }

/* --- full-screen media viewer --- */
.viewer { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #0d0b0b; color: #fff; overflow: hidden; }
.viewer[open] { display: flex; flex-direction: column; }
.viewer::backdrop { background: rgba(13, 11, 11, .86); }
.viewer-top { height: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; font-size: 13px; font-weight: 700; }
.viewer-top button, .viewer-nav button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px; cursor: pointer; }
.viewer-nav button:disabled { opacity: .3; }
.viewer-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.viewer-stage img, .viewer-stage video { max-width: 100%; max-height: 100%; display: block; }
.viewer-nav { flex-shrink: 0; display: flex; justify-content: space-between; padding: 10px 14px 18px; }

/* --- footer --- */
footer.foot { margin-top: 30px; background: var(--card); border-top: 1px solid var(--line); padding: 22px 4px calc(90px + env(safe-area-inset-bottom, 0px)); font-size: 13px; color: var(--soft); } /* 28px, then the bottom navigation */
footer.foot .wrap { display: flex; flex-direction: column; gap: 6px; }
footer.foot .wrap > div { display: flex; flex-direction: column; gap: 6px; }
footer.foot strong { color: var(--ink); }
footer.foot a { color: var(--soft); }
footer.foot a.map { min-height: 32px; display: flex; align-items: center; font-weight: 700; color: var(--brand); text-decoration: none; }
footer.foot .host { margin-top: 10px; font-size: 11px; color: #7a716a; }

/* --- wide screens --- */
@media (min-width: 900px) {
  .narrow-only { display: none !important; }
  body { font-size: 15px; }
  .wrap { padding: 0 24px; }
  /* header: the store's rules in a strip (home page), then a dark band with the logo, the search and three icons, and the tabs */
  .strip { background: #f6efe4; border-bottom: 1px solid #ece2d3; font-size: 13.5px; }
  .strip .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip a { height: 38px; padding: 0 10px; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; color: var(--soft); text-decoration: none; white-space: nowrap; }
  .strip a + a { border-left: 1px solid #e2d6c3; }
  .strip b { color: var(--brand); }
  .strip span { overflow: hidden; text-overflow: ellipsis; }
  .top { --fg: #fff; --mark-bg: #fff; --mark-fg: #1e1a1a; --cur: #fff; background: #1e1a1a; box-shadow: none; }
  .top.solid { box-shadow: 0 6px 16px rgba(30, 26, 26, .18); }
  .top > .wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; gap: 24px; min-height: 0; padding: 14px 24px 10px; }
  .icon-btn.back { display: none; }
  .brand { gap: 12px; }
  .brand .mark { width: 40px; height: 40px; font-size: 15px; }
  .brand strong { font-size: 22px; line-height: 1.1; letter-spacing: .02em; }
  .top .search { height: 42px; padding: 0; gap: 0; border: 0; border-radius: var(--r-tag); background: #fff; overflow: hidden; }
  .top .search:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
  .top .search input { height: 42px; padding: 0 14px; font-size: 14px; }
  .top .search button { width: 58px; height: 36px; margin-right: 3px; border: 0; border-radius: max(0px, var(--r-tag) - 1px); background: #1e1a1a; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
  .acts { justify-content: flex-end; gap: 6px; }
  .icon-btn.count { width: auto; padding: 0 8px; gap: 6px; border-radius: var(--r-s); font-weight: 800; }
  .tabs .wrap { gap: 0 24px; flex-wrap: wrap; height: auto; padding: 0 24px; overflow: visible; }
  .tabs a { height: auto; padding: 8px 0 9px; font-size: 14.5px; font-weight: 500; }
  .tabs a:not([aria-current]):hover { border-bottom-color: rgba(255, 255, 255, .5); }
  main { padding: 28px 0 80px; }
  .stack { gap: 44px; }
  .section-head { margin-bottom: 18px; align-items: baseline; min-height: 0; }
  .section-head h2 { font-size: 28px; }
  .section-head a { font-size: 15px; }
  /* home: three columns 300px tall (picture tiles, the banners, picture tiles), the categories in one row,
     "Ofertas" beside "Tendências", then the products */
  .home > main { padding-top: 18px; }
  .home .stack { gap: 32px; }
  .home .stack > .s-novidades, .home .stack > .s-mais { margin-top: 0; }
  /* Blocks nobody arranged: the panels come before the products, as the wide board draws them. */
  .std > .s-promo { order: 1; }
  .std > .s-novidades { order: 2; }
  .std > .s-mais { order: 3; }
  .std > .s-about { order: 4; }
  .std > .s-how { order: 5; }
  /* The banners take the whole row. */
  .hero { display: flex; height: 380px; }
  .carousel { flex: 1 1 0; min-width: 0; margin: 0; border-radius: var(--r-s); }
  .carousel::before, .carousel::after { display: none; }
  .slide { height: 380px; }
  .slide-text { gap: 12px; padding: 28px 64px; }
  .slide-text strong { font-size: 40px; line-height: 1; }
  .slide-text small { font-size: 15px; line-height: 1.5; }
  /* The arrows at the sides of the banner, the dots at its foot. */
  .slide-nav { position: static; }
  .slide-nav > button { position: absolute; z-index: 2; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 14px; }
  .slide-nav > [data-slide=prev] { left: 12px; }
  .slide-nav > [data-slide=next] { right: 12px; }
  .slide-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 14px; justify-content: center; gap: 4px; pointer-events: none; }
  .dot-btn { height: 16px; }
  .dot-btn span { height: 6px; background: rgba(255, 255, 255, .55); box-shadow: none; }
  /* One row of eight categories; with more, the row scrolls and store_home.js shows the two round buttons. */
  .cats { margin: 0; padding: 0 44px; border-radius: 0; background: none; }
  .circles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .circles::-webkit-scrollbar { display: none; }
  .circles a { flex: 0 0 calc((100% - 84px) / 8); scroll-snap-align: start; gap: 10px; font-size: 14.5px; font-weight: 400; line-height: 1.4; }
  .circle { position: relative; width: 100%; max-width: 104px; height: auto; aspect-ratio: 1; box-shadow: none; }
  /* A hairline around the photo, so a pale one does not melt into the page. */
  .circle::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
  .cats-move { position: absolute; top: 40px; width: 36px; height: 36px; padding: 0; border: 1px solid #e2d9cf; border-radius: 50%; background: #fff; cursor: pointer; }
  .cats-move[data-cats="-1"] { left: 0; }
  .cats-move[data-cats="1"] { right: 0; }
  /* Two panels side by side, three products each; a panel alone in its row shows six. */
  .panels { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .panels.one { grid-template-columns: minmax(0, 1fr); }
  .hpanel { padding: 14px; border-radius: var(--r-s); display: flex; flex-direction: column; gap: 12px; }
  .hpanel-head { padding: 0; }
  .hpanel-head h2 { font-size: 22px; font-style: italic; }
  .hpanel-head a { width: auto; height: auto; font-size: 20px; }
  .picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; overflow: visible; padding: 0; }
  .panels.one .picks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pick { gap: 6px; }
  .pick:nth-child(n+4) { display: none; }
  .panels.one .pick:nth-child(n+4) { display: flex; }
  .panels.one .pick:nth-child(n+7) { display: none; }
  .shot { height: auto; aspect-ratio: var(--ratio); border-radius: var(--r-tag); }
  .pick strong { font-size: 20px; }
  .pick .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* read aloud, not drawn: the photo and the price speak */
  .pick .line { font-size: 13.5px; color: var(--tone); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; }
  .item { gap: 5px; }
  .pic { margin-bottom: 5px; }
  .tag { top: 10px; left: 10px; padding: 4px 10px; font-size: 11.5px; }
  .item .name { font-size: 14.5px; }
  .item .price strong { font-size: 17px; }
  .item .price small { font-size: 12px; }
  .old { font-size: 13px; }
  .item .meta { font-size: 12.5px; gap: 6px; }
  /* catalog */
  .catalog { gap: 16px; }
  .cat-head > div { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; }
  .crumbs { font-size: 13px; color: var(--muted); }
  .crumbs a { color: inherit; }
  .cat-head h1 { font-size: 34px; }
  .cat-head .count { font-size: 15px; }
  .sort-select { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
  .sort-select select { height: 42px; padding: 0 12px; border: 1px solid var(--chip); border-radius: var(--r-btn); background: var(--card); font-size: 14px; font-weight: 600; cursor: pointer; }
  .chips.scroll { flex-wrap: wrap; margin: 0; padding: 0; }
  .pillx { font-size: 13px; }
  .cat-body { display: flex; gap: 28px; align-items: flex-start; }
  .filters, .filters.open { display: block; position: sticky; top: 16px; inset: auto; z-index: 0; flex: 0 0 240px; }
  .filters .backdrop, .filters .sheet-head, .filters .sheet-foot { display: none; }
  .filters .panel { max-height: none; overflow: visible; background: transparent; border-radius: 0; }
  .sheet-body { overflow: visible; padding: 0; gap: 22px; }
  .filters legend { margin-bottom: 6px; }
  .opts, .opts.toggles { display: flex; flex-direction: column; gap: 0; }
  .opt .box, .opt.toggle .box { min-height: 34px; padding: 0 6px 0 34px; border: 0; border-radius: var(--r-s); background: transparent; font-size: 14px; font-weight: 400; gap: 10px; justify-content: flex-start; }
  .opt .box:hover { background: #f6f1ec; }
  .opt .box::before { content: ""; position: absolute; left: 6px; top: 8px; width: 18px; height: 18px; border: 1.5px solid #8a8079; border-radius: 3px; background: var(--card); }
  .opt input[type=radio] + .box::before { border-radius: 50%; }
  .opt input:checked + .box::before { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--card); }
  .opt input:checked + .box, .prices .opt input:checked + .box { background: transparent; color: var(--ink); border: 0; }
  .prices .opt input:checked + .box small { color: var(--muted); opacity: 1; }
  .opt .box small { font-size: 12px; }
  .opt .dot { width: 16px; height: 16px; }
  .prices .opt.any { display: block; }
  .prices .opt .box { text-align: left; font-weight: 400; }
  .prices .opt .box .grow { flex: 1 1 auto; }
  .opts.fsizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .opt.fsize .box { min-width: 0; min-height: 38px; padding: 0; border: 1px solid var(--chip); background: var(--card); justify-content: center; font-weight: 800; font-size: 13px; }
  .opt.fsize .box::before { display: none; }
  .opt.fsize input:checked + .box { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
  .opt.toggle b { font-weight: 400; }
  .results { flex: 1 1 560px; }
  .results .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 18px; }
  .results .empty { padding: 48px 24px; }
  .results .empty strong { font-size: 17px; font-weight: 800; }
  .sheet, .sheet.open { display: none; }
  /* product */
  .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .gallery { margin: 0; position: sticky; top: 16px; }
  .media { height: auto; aspect-ratio: 3 / 4; border-radius: var(--r-m); }
  .thumbs { padding: 10px 0 0; }
  .product h1 { font-size: 34px; }
  .bigprice strong { font-size: 30px; }
  .viewer { width: min(620px, 94vw); max-width: none; height: auto; max-height: 94vh; margin: auto; border-radius: var(--r-m); }
  .viewer-stage img, .viewer-stage video { max-height: calc(94vh - 140px); }
  /* footer */
  footer.foot { margin-top: 64px; padding: 36px 0; font-size: 14px; }
  footer.foot .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
  footer.foot a.map { min-height: 0; color: var(--soft); text-decoration: underline; }
  footer.foot .host { margin-top: 0; font-size: 12.5px; }
  .bar { padding: 12px 0 16px; }
}

/* --- color intensity chosen by the merchant: discreto, equilibrado, vibrante --- */
body:not(.viv-discreto) .item .price strong { color: var(--brand); }
body:not(.viv-discreto) .tag { background: #e8461e; color: #fff; }
body:not(.viv-discreto) .tag.light { background: #0e8f7e; color: #fff; }
body:not(.viv-discreto) footer.foot { background: var(--brand-soft); }
body.viv-discreto .carousel, body.viv-discreto .slide { background: #3a3430; } /* neutral, and dark enough for the white header over it */
body.viv-discreto .bigprice strong { color: var(--ink); }
body.viv-vibrante .section-head h2 { color: var(--brand); }
body.viv-vibrante .stat { border-color: transparent; }
body.viv-vibrante .stat:nth-child(6n+1) { background: #efeafe; } body.viv-vibrante .stat:nth-child(6n+1) .sv { color: #4b31c4; }
body.viv-vibrante .stat:nth-child(6n+2) { background: #e2f6f1; } body.viv-vibrante .stat:nth-child(6n+2) .sv { color: #0b7a68; }
body.viv-vibrante .stat:nth-child(6n+3) { background: #fff1d6; } body.viv-vibrante .stat:nth-child(6n+3) .sv { color: #a55a00; }
body.viv-vibrante .stat:nth-child(6n+4) { background: #fde6f0; } body.viv-vibrante .stat:nth-child(6n+4) .sv { color: #b8236a; }
body.viv-vibrante .stat:nth-child(6n+5) { background: #e4efff; } body.viv-vibrante .stat:nth-child(6n+5) .sv { color: #2253c4; }
body.viv-vibrante .stat:nth-child(6n+6) { background: #e3f5e7; } body.viv-vibrante .stat:nth-child(6n+6) .sv { color: #1d7a3a; }
body.viv-vibrante .tc:nth-child(6n+1) { background: #fde6f0; color: #9c1f5a; border-color: #f6c3da; }
body.viv-vibrante .tc:nth-child(6n+2) { background: #efeafe; color: #4b31c4; border-color: #d8cdfb; }
body.viv-vibrante .tc:nth-child(6n+3) { background: #e2f6f1; color: #0b6f60; border-color: #b9e8dc; }
body.viv-vibrante .tc:nth-child(6n+4) { background: #e4efff; color: #2253c4; border-color: #c3d8fb; }
body.viv-vibrante .tc:nth-child(6n+5) { background: #fff1d6; color: #995300; border-color: #f6d9a0; }
body.viv-vibrante .tc:nth-child(6n+6) { background: #ffe8df; color: #b23c12; border-color: #f8c8b5; }

/* --- checkout: how the buyer receives the order --- */
.dlegend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 800; }
.dopt { position: relative; display: block; cursor: pointer; }
.dopt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dopt .box { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--chip); border-radius: var(--r-m); background: var(--card); }
.dopt .box > span { display: flex; flex-direction: column; gap: 2px; }
.dopt strong { font-weight: 800; font-size: 14.5px; }
.dopt small { font-size: 12.5px; line-height: 1.4; color: var(--soft); }
.dopt i { width: 20px; height: 20px; margin-top: 1px; border: 2px solid var(--chip); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dopt i::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.dopt input:checked + .box { border-color: var(--brand); background: var(--brand-soft); }
.dopt input:checked + .box i { border-color: var(--brand); }
.dopt input:checked + .box i::after { background: var(--brand); }
.dopt input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 2px; }

/* --- "regra de compra das cores": rule box on the product page, colors still to take, the bar while something is missing --- */
.rulebox { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid #f2c98f; border-radius: var(--r-s); background: #fff4e5; }
.rulebox strong { font-size: 13px; font-weight: 800; color: #8a4b00; }
.rulebox span { font-size: 12.5px; color: var(--soft); }
.rulebox button { align-self: flex-start; height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-btn); background: #8a4b00; color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.color.lack:not([aria-pressed=true]) { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px #f2a54a, inset 0 0 0 1px rgba(0, 0, 0, .1); }
.bar small.is-warn { color: #9a3412; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.bar small.is-ok { color: #2f6b4a; }