/* 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. Its colors are variables: white by default, the color chosen in
   Aparência (base.html puts it on the header as --hdr-bg with the class hdr-dark or hdr-light, further down), and
   see-through with white text over the banners that open the home page on a phone (.over, further down). */
.top { --fg: var(--ink); --sub: var(--muted); --mark-bg: var(--brand); --mark-fg: #fff; --cur: var(--brand); --hdr-bg: var(--card); --hdr-line: var(--line); --hdr-field: var(--chip); --hdr-accent: var(--brand); --hdr-btn-bg: var(--brand); --hdr-btn-fg: #fff; --hdr-hover: var(--chip); position: sticky; top: 0; z-index: 20; background: var(--hdr-bg); color: var(--fg); box-shadow: 0 1px 0 var(--hdr-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; }
/* The logo image is shown whole, on white whatever the header, and scaled by "Tamanho do logo" (an inline transform). */
.brand .mark.with-logo { background: #fff; }
.brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.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(--hdr-btn-bg, var(--brand)); color: var(--hdr-btn-fg, #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; }
/* The filters of "Meus pedidos": the board draws them a little smaller, and the one chosen in the store's color. */
.chips.tint .chip { min-height: 38px; padding: 0 14px; font-size: 13px; }
.chips.tint .chip.on { border-color: var(--brand); background: var(--brand); }
.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; }
.pill.conf-pill { background: #efeafe; color: #4b31c4; }
.pill.packed-pill { background: #fff1d6; color: #8a5a00; }
.pill.sent-pill { background: #e4efff; color: #2253c4; }
.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.through::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 .cancelled .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; }
  /* The band takes the color chosen in Aparência like the phone's header does: white unless the store chose one
     ("Preto" is the dark band the wide store had before the choice existed). */
  .top { box-shadow: 0 1px 0 var(--hdr-line); }
  .top.solid { box-shadow: 0 1px 0 var(--hdr-line), 0 6px 16px rgba(30, 26, 26, .12); }
  .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: 1px solid var(--hdr-field); border-radius: var(--r-tag); background: #fff; overflow: hidden; }
  .top .search:focus-within { outline: 2px solid var(--fg); outline-offset: 2px; }
  .top .search input { height: 40px; padding: 0 14px; font-size: 14px; }
  .top .search button { width: 58px; height: 34px; margin-right: 3px; border: 0; border-radius: max(0px, var(--r-tag) - 1px); background: var(--hdr-accent); 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 10px; gap: 6px; border-radius: var(--r-s); background: var(--hdr-btn-bg); color: var(--hdr-btn-fg); 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: var(--hdr-hover); }
  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: minimo, discreto, equilibrado, vibrante --- */
body:not(.viv-discreto) .item .price strong { color: var(--brand); }
body:not(.viv-discreto):not(.viv-minimo) .tag { background: #e8461e; color: #fff; }
body:not(.viv-discreto):not(.viv-minimo) .tag.light { background: #0e8f7e; color: #fff; }
body:not(.viv-discreto):not(.viv-minimo) footer.foot { background: var(--brand-soft); }
body.viv-discreto .carousel, body.viv-discreto .slide, body.viv-minimo .carousel, body.viv-minimo .slide { background: #3a3430; } /* neutral, and dark enough for the white header over it */
/* "minimo" is black and white: inside the page the color of the store gives way to the ink (buttons, notice bar,
   current tab, prices) and the highlights turn neutral, on a white page. The body itself keeps the color of the store
   as --store, and that one stays on the logo. */
body.viv-minimo { --store: var(--brand); --ground: #ffffff; }
body.viv-minimo > * { --brand: #1e1a1a; --brand-soft: #f4f1ec; }
body.viv-minimo .top { --mark-bg: var(--store); --mark-fg: #fff; }
@media (max-width: 899px) { .js body.viv-minimo .over > .top:not(.solid) { --mark-bg: #fff; --mark-fg: var(--store); } }

/* --- the color of the header (Aparência, "Cor do cabeçalho") --- */
/* base.html gives the header --hdr-bg and hdr-dark or hdr-light (dark = relative luminance under .35, Appearance.look).
   A dark one: white text and icons, the mark white with the header's color (as the logo on the dark band was), the
   search field without a border, the "Pedido" button and the badge white, the active tab white, no bottom line.
   A light one keeps the colors of the white header on its own background. The see-through header over the banners
   of a phone (.over) is not changed by either. */
body .top.hdr-dark { --fg: #fff; --sub: rgba(255, 255, 255, .72); --mark-bg: #fff; --mark-fg: var(--hdr-bg); --cur: #fff; --hdr-line: transparent; --hdr-field: transparent; --hdr-accent: var(--hdr-bg); --hdr-btn-bg: #fff; --hdr-btn-fg: var(--hdr-bg); --hdr-hover: rgba(255, 255, 255, .5); }
body .top.hdr-dark .search:focus-within { outline-color: #fff; }
body.viv-minimo .hpanel, body.viv-minimo .hpanel.trends { --tone: #1e1a1a; }
body.viv-minimo .off, body.viv-minimo .tabbar .cart-badge { background: #1e1a1a; }
body.viv-minimo .ask { color: #1e1a1a; }
body.viv-minimo .circles a.narrow-only .circle { background-color: #1e1a1a !important; } /* the flat shortcuts; a category keeps its photo */
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; }

/* --- buyer's order: the notice, its problems, cancelling, and "Relatar um problema" (board Main, canvas v10) --- */
.anchor { scroll-margin-top: 84px; } /* the header floats over the page: what an address points at stops under it */
.okmsg.strong { border-radius: var(--r-m); color: #1f6b46; font-size: 13px; font-weight: 700; }
.order-card .pill { flex-shrink: 0; white-space: nowrap; }
.btn.inkline { min-height: 48px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); font-size: 14.5px; white-space: normal; text-align: center; }
/* What the store changed on the order after it was placed (panel v15: lines and discount), newest first. */
.oc-changes { display: flex; flex-direction: column; gap: 8px; }
.oc-changes > strong { font-size: 14px; }
.oc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.oc-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 0 10px; font-size: 13px; overflow-wrap: anywhere; }
.oc-list li::before { content: ""; grid-row: span 2; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--brand, var(--ink)); }
.oc-list small { grid-column: 2; font-size: 11.5px; color: var(--muted); }
/* A problem: who said what, the answer box while it is open, how it ended. */
.tk { background: var(--card); border: 1.5px solid #f0c9b9; border-radius: var(--r-m); overflow: hidden; }
.tk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px; background: #fffaf7; }
.tk-head > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tk-head b { font-size: 14px; }
.tk-head small { font-size: 12px; color: var(--muted); }
.tk-st { flex-shrink: 0; padding: 4px 8px; border-radius: var(--r-tag); background: var(--warn-bg); color: #8a3a0c; font-size: 10.5px; font-weight: 800; }
.tk-st.andamento { background: #fff1d6; color: #8a5a00; }
.tk-st.resolvida { background: #e4f1e8; color: #1f6b46; }
.tk-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid #f3ece6; }
.tk-msg { max-width: 85%; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; overflow-wrap: anywhere; }
.tk-msg.theirs { align-self: flex-start; background: #f3efeb; }
.tk-msg.mine { align-self: flex-end; background: var(--brand-soft); }
.tk-msg small { font-size: 10.5px; font-weight: 800; color: var(--muted); }
.tk-msg span { font-size: 13px; white-space: pre-line; }
.tk-photos { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-photos.mine { align-self: flex-end; justify-content: flex-end; }
.tk-photos img { width: 56px; height: 56px; border-radius: var(--r-s); object-fit: cover; display: block; background: #d9d0c6; }
.tk-reply { display: flex; gap: 6px; }
.tk-reply input[type=text] { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 10px; border: 1px solid var(--field); border-radius: var(--r-s); background: var(--card); font-size: 16px; }
.tk-reply input[type=text]:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.tk-reply button { height: 42px; padding: 0 12px; border: 0; border-radius: var(--r-btn); background: var(--brand); color: #fff; font-weight: 800; cursor: pointer; }
.tk-solved { min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: #1f6b46; font-size: 13px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.tk-sol { font-size: 12.5px; font-weight: 700; color: #1f6b46; }
/* One answer out of a few, drawn as chips over real radio buttons: the reasons to cancel, the kinds of problem. */
.choices { display: flex; flex-wrap: wrap; gap: 6px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; height: 40px; padding: 0 12px; border: 1px solid var(--chip); border-radius: var(--r-btn); background: var(--card); font-size: 13px; font-weight: 700; }
.choice input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.choices.tint .choice input:checked + span { border-color: var(--brand); background: var(--brand); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* "Cancelar pedido". Without scripts the question with its reasons is a card on the page; with them the button opens it as a sheet. */
.cx { display: flex; flex-direction: column; gap: 8px; }
.cx-open { display: none; height: 44px; border: 1px solid #e7b9a4; border-radius: var(--r-btn); background: var(--card); color: var(--warn-fg); font-weight: 800; cursor: pointer; }
.cx-hint { font-size: 11.5px; color: #7a716a; text-align: center; }
.cx-sheet .backdrop, .cx-keep { display: none; }
.cx-panel { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #e7b9a4; border-radius: var(--r-m); background: var(--card); }
.cx-panel b { font-size: 18px; }
.cx-acts { display: flex; gap: 8px; }
.cx-acts .btn { flex: 1 1 0; min-height: 48px; padding: 0 10px; }
.btn.cx-go { background: var(--warn-fg); }
.js .cx-open { display: block; }
.js .cx-sheet { display: none; }
.js .cx-sheet.open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 40; }
.js .cx-sheet .backdrop { display: block; }
.js .cx-keep { display: inline-flex; }
.js .cx-panel { flex-shrink: 0; padding: 18px 16px 22px; border: 0; border-radius: 10px 10px 0 0; }
/* "Relatar um problema" */
.rp-set { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rp-q { padding: 0; font-size: 13.5px; font-weight: 800; }
.rp-q span { font-weight: 500; color: var(--muted); }
fieldset.rp-set > legend { margin-bottom: 8px; }
.rp-line { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); cursor: pointer; }
.rp-line input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rp-line i { width: 22px; height: 22px; border: 1.5px solid var(--brand); border-radius: 5px; background: var(--card); color: #fff; font-size: 12px; font-style: normal; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rp-line input:checked + i { background: var(--brand); }
.rp-line input:checked + i::after { content: "✓"; }
.rp-line input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.rp-line img, .rp-ph { width: 36px; height: 46px; border-radius: 4px; object-fit: cover; background: #d9d0c6; flex-shrink: 0; display: block; }
.rp-line strong { display: block; font-size: 13px; font-weight: 700; }
.rp-line small { display: block; font-size: 11.5px; color: var(--muted); }
.rp textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--field); border-radius: var(--r-s); background: var(--card); font: inherit; font-size: 16px; color: inherit; resize: vertical; }
.rp textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
/* The photos: a plain file field without scripts; with them (.rp-js) the pictures chosen and "+ Foto". */
.rp-file { max-width: 100%; font-size: 14px; }
.rp-photos { display: none; flex-wrap: wrap; gap: 8px; }
.rp-js .rp-photos { display: flex; }
.rp-js .rp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rp-add { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border: 1.5px dashed #c9bdb1; border-radius: var(--r-s); background: #faf7f4; color: var(--soft); font-size: 11px; font-weight: 700; cursor: pointer; }
.rp-add:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rp-shot { position: relative; width: 64px; height: 64px; }
.rp-shot img { width: 100%; height: 100%; border-radius: var(--r-s); object-fit: cover; display: block; background: #d9d0c6; }
.rp-shot button { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; padding: 0; border: 2px solid var(--ground); border-radius: 50%; background: var(--ink); color: #fff; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rp-clear { align-self: center; height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--brand); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rp-err { font-size: 13px; font-weight: 700; color: var(--warn-fg); }
/* --- checkout: "Usar a mesma entrega do último pedido" --- */
.uselast { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px dashed var(--brand); border-radius: var(--r-m); background: var(--card); color: var(--ink); text-align: left; text-decoration: none; }
.uselast > b { font-size: 18px; font-weight: 400; }
.uselast > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.uselast strong { font-size: 13.5px; font-weight: 800; color: var(--brand); }
.uselast small { font-size: 12px; color: var(--soft); }
@media (min-width: 900px) {
  /* On a wide screen the question to cancel is a box in the middle of the page instead of a sheet from the bottom. */
  .js .cx-sheet.open { align-items: center; justify-content: center; }
  .js .cx-sheet .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; }
  .js .cx-panel { position: relative; width: 440px; padding: 22px; border-radius: 10px; }
}

/* --- "Loja verificada pela lote1" (board Main, canvas v13): the strip under the banners of the home page and its sheet (store/_verified.html) --- */
/* The strip is the first block of the stack; when the banners open the page they go before it (the board draws it under them). */
.vf-block { display: flex; flex-direction: column; }
.vf-block + .s-banner { order: -1; }
.vf-strip { display: flex; align-items: center; gap: 10px; margin: 0 -2px; padding: 9px 12px; border: 1px solid #cfe9d8; border-radius: var(--r-m); background: #effaf3; color: #17703d; text-decoration: none; }
.vf-mark { width: 24px; height: 24px; border-radius: 50%; background: #1f9d55; color: #fff; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vf-mark.lg { width: 36px; height: 36px; font-size: 18px; }
.vf-lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vf-lines strong { font-size: 13px; font-weight: 800; color: #17703d; }
.vf-lines small { font-size: 11.5px; color: #3c5a47; }
.vf-more { font-weight: 800; color: #17703d; }
/* The sheet: a script opens it as a modal; without scripts (no .scripted) its link (#verificada) shows it, from the bottom of a phone's screen. */
.vf { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 50; width: 100%; max-width: none; max-height: calc(100% - 48px); margin: 0; padding: 0; border: 0; outline: 0; border-radius: 10px 10px 0 0; background: #fff; color: var(--ink); overflow: auto; box-shadow: 0 0 0 100vmax rgba(20, 16, 16, .45); }
.vf:not([open]) { display: none; } /* a browser without <dialog> has no rule of its own that hides a closed one */
.vf:not(.scripted):target { display: block; }
.vf:modal { box-shadow: none; }
.vf::backdrop { background: rgba(20, 16, 16, .45); }
.vf-panel { display: flex; flex-direction: column; gap: 12px; padding: 20px 16px 24px; }
.vf-head { display: flex; align-items: center; gap: 10px; }
.vf-who { display: flex; flex-direction: column; min-width: 0; }
.vf-who b { font-size: 17px; }
.vf-who span { font-size: 12px; font-weight: 700; color: #17703d; }
.vf-rows { display: flex; flex-direction: column; border: 1px solid #ece5de; border-radius: var(--r-m); overflow: hidden; font-size: 13px; }
.vf-rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f2ece6; }
.vf-rows > div:last-child { border-bottom: 0; }
.vf-rows > div > span:first-child { color: #6b625b; flex-shrink: 0; }
.vf-rows > div > span:last-child { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.vf-tip { font-size: 12.5px; line-height: 1.5; color: #4a423c; }
.vf-acts { display: flex; gap: 8px; }
.vf-ok { flex: 1 1 auto; height: 46px; border-radius: var(--r-btn); background: var(--brand); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.vf-report { height: 46px; padding: 0 14px; border: 1px solid #d9d0c7; border-radius: var(--r-btn); background: #fff; color: #9b2c1f; font-weight: 800; display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.vf-note { font-size: 12px; color: #6b625b; }
@media (min-width: 900px) {
  /* A compact strip under the banners, and the sheet as a box in the middle of the page. */
  .vf-block { align-items: flex-start; }
  .vf-strip { margin: 0; min-width: 420px; }
  .vf { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 460px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25), 0 0 0 100vmax rgba(20, 16, 16, .45); }
  .vf:modal { box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
  .vf-panel { padding: 22px; }
}

/* --- the wide standard store (board DesktopCatalogo, canvas v18): header nav, product page, cart, account box --- */
/* Everything here is for 900px and up (the .wide elements are hidden below). The phone pages are untouched. */
/* The account box: a <dialog> that store_wide.js fills with the page the header link names (/conta/entrar/, /conta/criar/,
   /conta/); without scripts those pages draw the same box (.lg-page) in the middle of the page. */
.lg-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100vh - 40px); overflow-y: auto; margin: auto; padding: 0; border: 0; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(30, 26, 26, .25); }
.lg-dialog:not([open]) { display: none; }
.lg-dialog::backdrop { background: rgba(30, 26, 26, .45); }
.lg-box { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.lg-box > * { flex-shrink: 0; }
.lg-box h2 { font-size: 26px; }
.lg-sub { font-size: 13.5px; color: var(--soft); margin-top: -8px; }
.lg-x { display: none; position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f6f1ec; font-size: 20px; cursor: pointer; align-items: center; justify-content: center; }
.lg-dialog .lg-x { display: flex; }
.lg-btn { height: 50px; border-radius: var(--r-btn); border: 0; background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.lg-btn.ghost { background: #fff; border: 1px solid var(--brand); color: var(--brand); }
.lg-link { align-self: center; height: 36px; border: 0; background: transparent; color: var(--brand); font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.lg-or { display: flex; align-items: center; gap: 12px; color: #7a716a; font-size: 12px; }
.lg-or span { flex: 1 1 auto; height: 1px; background: #e2d9cf; }
.lg-sec { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); margin-top: 6px; }
.lg-hi { display: flex; align-items: center; gap: 12px; }
.lg-hi div { display: flex; flex-direction: column; min-width: 0; }
.lg-hi b { font-size: 18px; }
.lg-hi span { font-size: 13px; color: var(--muted); }
.lg-hi .lg-av { width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.lg-lbl { font-size: 13px; font-weight: 800; margin-top: 6px; }
.lg-ad { font-size: 13.5px; color: var(--soft); }
.lg-o { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0ebe5; color: inherit; text-decoration: none; }
.lg-o div { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.lg-o b { color: var(--ink); font-size: 14px; }
.lg-o .pill { white-space: nowrap; letter-spacing: 0; text-transform: none; font-size: 11.5px; padding: 4px 8px; }
.lg-form { display: flex; flex-direction: column; gap: 12px; }
.lg-box .errors { font-size: 13px; }
.lg-box .consent { padding: 0; }
.ck-f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; min-width: 0; }
.ck-f small { font-weight: 500; color: var(--muted); }
.ck-f input, .ck-f select { font-weight: 500; height: 42px; border: 1px solid var(--chip); border-radius: var(--r-s); padding: 0 12px; font-size: 15px; outline: 0; min-width: 0; background: var(--card); color: var(--ink); }
.ck-f input:focus, .ck-f select:focus { border-color: var(--ink); }
.ck-f .pw { height: 42px; }
.ck-f .pw input { height: 100%; }
.ck-f .error { font-weight: 700; }
.ck-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-uf { grid-template-columns: 1fr 70px; }
.ck-err { font-size: 13px; color: #b3261e; font-weight: 600; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r-m); font-weight: 700; font-size: 14px; z-index: 60; }
@media (min-width: 900px) {
  /* header: "Entrar" / "Olá, Nome" and "Carrinho (N)" as text, in the header's own color */
  .hd-r { display: flex; gap: 28px; justify-content: flex-end; }
  .hd-r a { padding: 6px 0; font-size: 15px; font-weight: 700; color: var(--fg); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .hd-r a:hover { border-bottom-color: var(--fg); }
  .lg-page { display: flex; justify-content: center; padding: 8px 0; }
  .lg-page .lg-box { width: 440px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(30, 26, 26, .08); }
  /* product: breadcrumb, the sticky gallery with its thumbnails in a column, the grid of colors and sizes */
  .pd-crumbs { display: block; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
  .pd-crumbs a { color: inherit; text-decoration: underline; }
  .pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .pd .product { display: contents; }
  .pd .product > .stack { display: none; }
  .gallery { display: flex; gap: 12px; align-items: flex-start; }
  .gallery .media { flex: 1 1 auto; min-width: 0; }
  .gallery .thumbs { order: -1; flex: 0 0 72px; flex-direction: column; gap: 10px; padding: 0; overflow: visible; }
  .gallery .thumbs:empty { display: none; }
  .gallery .thumb { width: 72px; height: 96px; margin: 0; box-shadow: inset 0 0 0 2px transparent; border: 2px solid transparent; }
  .gallery .thumb.on { border-color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
  .pd-info { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
  .pd-head { display: flex; flex-direction: column; gap: 6px; }
  .pd-ref { font-size: 12.5px; color: var(--muted); font-weight: 700; }
  .pd-head h1 { font-size: 30px; line-height: 1.12; }
  .pd-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
  .pd-price b { font-size: 28px; font-weight: 800; color: var(--brand); }
  .pd-price > span { font-size: 13px; color: var(--muted); }
  .pd-price .old { font-size: 15px; }
  .pd-min { font-size: 13px; color: var(--muted); }
  .pd-rule { align-self: flex-start; margin-top: 4px; font-size: 13px; background: #fff4e5; border: 1px solid #f2c98f; color: var(--soft); padding: 6px 10px; border-radius: var(--r-s); }
  .pd-rule strong { color: #8a4b00; }
  .pd-grid { display: grid; gap: 6px; align-items: center; }
  .pd-hc { text-align: center; font-size: 12.5px; font-weight: 800; color: var(--muted); }
  .pd-cn { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; }
  .pd-cn:hover .pd-cnt { text-decoration: underline; }
  .pd-cnt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-sw { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
  .pd-c { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
  .pd-c input { width: 100%; height: 42px; border: 1.5px solid var(--chip); border-radius: var(--r-s); text-align: center; font-size: 17px; font-weight: 800; outline: 0; background: #fff; padding: 0; }
  .pd-c input::placeholder { color: #c9c0b8; font-weight: 500; }
  .pd-c input:focus { border-color: var(--ink); }
  .pd-c.has input { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
  .pd-c.off input { background: #f2eee9; border-style: dashed; color: #b4aca6; opacity: 1; }
  .pd-c small { font-size: 10.5px; color: var(--muted); white-space: nowrap; min-height: 0; }
  .pd-c small:empty { display: none; }
  .pd-c.off small { color: #b23c12; font-weight: 700; }
  .pd-g { display: none; height: 42px; border: 0; background: transparent; color: var(--brand); font-size: 12.5px; font-weight: 800; cursor: pointer; padding: 0 4px; white-space: nowrap; align-self: start; }
  .js .pd-g { display: inline-flex; align-items: center; }
  .pd-g:hover { text-decoration: underline; }
  .pd-act { display: flex; flex-direction: column; gap: 8px; }
  .pd-add { width: 100%; height: 56px; border: 0; border-radius: var(--r-btn); background: var(--brand); color: #fff; font-weight: 800; font-size: 17px; cursor: pointer; }
  .pd-add:disabled { opacity: .4; cursor: not-allowed; }
  .pd-note { font-size: 13px; color: var(--muted); text-align: center; min-height: 18px; }
  .pd-note.is-warn { color: #b23c12; }
  .pd-note.is-ok { color: #17703d; }
  .pd-det { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
  .pd-det > div, .pd-more { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
  .pd-det > div > span { color: var(--muted); }
  .pd-det > div > b { font-weight: 600; }
  .pd-more { display: flex; justify-content: space-between; width: 100%; font-weight: 700; color: var(--ink); text-decoration: none; }
  .pd-more span { color: var(--muted); }
  .pd-rel { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
  .pd-rel h2 { font-size: 22px; }
  .pd-rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .pcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--ink); text-decoration: none; }
  .pcard .pic { display: block; margin: 0; }
  .pcard:hover .pic { filter: brightness(1.06); }
  .pcard .name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
  .pcard .price { font-weight: 800; font-size: 16px; }
  .pcard .price small { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 3px; }
  /* cart: the models at the left, each with its editable grid; the sticky column at the right */
  .ck-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
  .ck-head > div { display: flex; flex-direction: column; gap: 4px; }
  .ck-head h1 { font-size: 32px; }
  .ck-back { font-weight: 700; color: var(--brand); font-size: 14px; text-decoration: none; }
  .ck { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
  .ck-list { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .ck-list .warn { font-size: 14px; padding: 12px 14px; }
  .ck-it { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; }
  .ck-img { display: block; width: 120px; aspect-ratio: 3 / 4; border-radius: var(--r-s); overflow: hidden; background: #d9d0c6; }
  .ck-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ck-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .ck-top { display: flex; justify-content: space-between; gap: 12px; }
  .ck-top > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ck-n { font-size: 16px; font-weight: 800; color: var(--ink); text-decoration: none; }
  .ck-n:hover { color: var(--brand); text-decoration: underline; }
  .ck-sub { font-size: 12.5px; color: var(--muted); }
  .ck-top b { font-size: 18px; }
  .ck-grid { display: grid; gap: 6px; align-items: center; }
  .ck-hz { text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); }
  .ck-cn { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; min-width: 0; }
  .ck-cn i { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
  .ck-cnt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ck-in { width: 100%; height: 38px; border: 1.5px solid var(--chip); border-radius: var(--r-s); text-align: center; font-size: 15px; font-weight: 800; outline: 0; background: #fff; padding: 0; }
  .ck-in:focus { border-color: var(--ink); }
  .ck-in.has { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
  .ck-in:disabled { background: #f2eee9; border-style: dashed; opacity: 1; }
  .ck-rt { text-align: center; font-weight: 800; font-size: 14px; }
  .ck-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .ck-foot .grow { flex: 1 1 auto; }
  .ck-warn { font-size: 12.5px; font-weight: 700; color: #b23c12; background: var(--warn-bg); padding: 5px 10px; border-radius: var(--r-s); }
  .ck-lnk { background: none; border: 0; padding: 0; font-size: 13px; color: var(--muted); text-decoration: underline; cursor: pointer; }
  .ck-lnk:hover { color: #b3261e; }
  .ck-save { height: 34px; padding: 0 12px; border: 1px solid var(--chip); border-radius: var(--r-btn); background: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
  /* With scripts each change is saved as it is made (store_wide.js) and the button is out of sight, but still drawn:
     it stays the form's first submit button, the one Enter presses, in every browser. */
  .js .ck-save { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ck-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
  .ck-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
  .ck-box > b { font-size: 17px; }
  .ck-row { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--soft); }
  .ck-tot { border-top: 1px solid var(--line); padding-top: 10px; color: var(--ink); font-size: 15px; }
  .ck-tot b { font-size: 22px; }
  .ck-bar { height: 6px; border-radius: 3px; background: #efe8e1; overflow: hidden; }
  .ck-bar span { display: block; height: 100%; background: #c98a2b; }
  .ck-bar.ok span { background: #1f9d55; }
  .ck-min { font-size: 13px; font-weight: 700; color: #8a5a00; }
  .ck-min.ok { color: #17703d; }
  .ck-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f6f1ec; border-radius: var(--r-s); padding: 12px; }
  .ck-me div { display: flex; flex-direction: column; font-size: 13px; color: var(--soft); min-width: 0; }
  .ck-me b { font-size: 14.5px; color: var(--ink); }
  .ck-in2 { font-size: 13px; color: var(--soft); }
  .ck-in2 a { color: var(--brand); font-weight: 800; text-decoration: underline; }
  .ck-fl { font-size: 13px; font-weight: 700; padding: 0; }
  .ck-ship { display: flex; flex-direction: column; gap: 10px; position: relative; }
  .ck-radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .ck-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ck-opts.ck-o2 { grid-template-columns: 1fr 1fr; }
  .ck-o { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 9px 10px; border-radius: var(--r-s); border: 1.5px solid var(--chip); background: #fff; cursor: pointer; min-width: 0; }
  .ck-o b { font-size: 13px; }
  .ck-o span { font-size: 11px; color: var(--muted); line-height: 1.3; }
  .ck-o.on { border-color: var(--brand); background: var(--brand-soft); }
  .ck-radio:focus-visible ~ .ck-opts .ck-o.on { outline: 2px solid var(--ink); outline-offset: 2px; }
  /* The chosen way's fields, without scripts: the radio is a sibling before its box. */
  .ck-ship .sh-box { display: none; }
  .ck-radio[value="onibus"]:checked ~ .sh-box[data-delivery="onibus"], .ck-radio[value="correios"]:checked ~ .sh-box[data-delivery="correios"], .ck-radio[value="retirada"]:checked ~ .sh-box[data-delivery="retirada"] { display: flex; }
  .ck-radio[value="onibus"]:checked ~ .ck-opts [for="w-onibus"], .ck-radio[value="correios"]:checked ~ .ck-opts [for="w-correios"], .ck-radio[value="retirada"]:checked ~ .ck-opts [for="w-retirada"],
  .ck-radio[value="pac"]:checked ~ .ck-opts [for="w-pac"], .ck-radio[value="sedex"]:checked ~ .ck-opts [for="w-sedex"],
  .ck-radio[value="manha"]:checked ~ .ck-opts [for="w-manha"], .ck-radio[value="tarde"]:checked ~ .ck-opts [for="w-tarde"] { border-color: var(--brand); background: var(--brand-soft); }
  .sh-box { display: flex; flex-direction: column; gap: 10px; background: #faf7f4; border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; position: relative; }
  .sh-t { font-size: 12.5px; font-weight: 800; color: var(--brand); }
  .sh-ad { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
  .sh-ad span { color: var(--muted); font-size: 12px; }
  .sh-note { font-size: 12px; color: var(--muted); }
  .ck-btn { height: 50px; width: 100%; border: 0; border-radius: var(--r-btn); background: var(--brand); color: #fff; font-weight: 800; font-size: 15.5px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
  .ck-btn:disabled, .ck-btn[aria-disabled=true] { opacity: .4; cursor: not-allowed; pointer-events: none; }
  .ck-box .consent { padding: 4px 0; }
  .ck-small { font-size: 12px; color: var(--muted); line-height: 1.5; }
  .ck-empty { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .ck-empty b { font-size: 20px; }
  .ck-empty span { color: var(--muted); margin-bottom: 8px; }
  .ck-empty .ck-btn { width: auto; padding: 0 22px; }
  /* the order registered: the card in the middle, the message that will be sent, "Abrir WhatsApp" */
  .done-page { max-width: 640px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 40px 32px; }
  .done-page .check { background: #1f9d55; color: #fff; }
  .done-page .done-head h1 { font-size: 26px; }
  .done-page .chat { background: #e7f7ee; }
  .done-page .chat > span { color: #17703d; }
  .done-page .bubble { align-self: stretch; max-width: none; background: transparent; padding: 0; border-radius: 0; font-size: 13px; }
}

/* --- layouts chosen in Aparência (board PersonalizarLoja, canvas v19) --- */
/* Each choice is a class the store of today does not have: "imm" on the shell of the home page, cat-topo / cat-lista /
   cat-vitrine on the catalog, pd-rolagem / pd-compacto on the product page. Without them nothing below applies. */

/* "Imersivo" (StoreController.home adds "imm", only while the banners are the first block of the page): one tall banner
   from edge to edge that fades into the page (470px on a 390px phone, 720px on a 1280px screen), the dots above the
   fade, and the header lying over it, see-through with white text, until the page moves. That header is the phone's
   .over, which "imm" extends to a wide screen: store_header.js marks the header .solid once the page moved, so without
   scripts the header keeps its color and the banner starts under it. */
.imm > main { padding-top: 0; }
.imm .hero { margin-bottom: 0; }
.imm .slide { height: clamp(470px, 120.5vw, 640px); }
.imm .carousel::after { display: block; top: 0; bottom: 0; height: auto; border-radius: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, var(--ground) 100%); }
.imm .slide-nav { bottom: 17%; } /* 80px of the 470 */
.imm .dot-btn { width: 20px; height: 20px; }
.imm .dot-btn span, .imm .dot-btn[aria-current] span { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: none; opacity: .7; }
.imm .dot-btn[aria-current] span { opacity: 1; outline: 1.5px solid #fff; outline-offset: 3px; }
@media (min-width: 900px) {
  .imm.over { --top-h: 104px; }
  .imm.over.bare { --top-h: 66px; }
  .js .imm.over > main { margin-top: calc(var(--top-h) * -1); }
  .js .imm.over > .top:not(.solid) { --fg: #fff; --sub: rgba(255, 255, 255, .8); --mark-bg: #fff; --mark-fg: var(--brand); --cur: #fff; --hdr-line: transparent; --hdr-field: transparent; --hdr-hover: rgba(255, 255, 255, .5); background: transparent; box-shadow: none; }
  .js body.viv-minimo .imm.over > .top:not(.solid) { --mark-bg: #fff; --mark-fg: var(--store); }
  .imm .hero { display: block; height: auto; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .imm .carousel { border-radius: 0; }
  .js .imm.over .carousel::before { display: block; height: 220px; } /* the shade under the header, only while it can lie there */
  .imm .slide { height: clamp(480px, 56.25vw, 720px); }
  .imm .slide-dots { bottom: 21%; gap: 4px; } /* 150px of the 720 */
  .imm .dot-btn { width: 28px; height: 28px; }
  .imm .dot-btn span, .imm .dot-btn[aria-current] span { width: 14px; height: 14px; }
  .imm .dot-btn[aria-current] span { outline-offset: 5px; }
}

/* The catalog ("Layout das outras páginas"). "Filtros ao lado" is the page as it always was. "Filtros no topo", "Lista"
   and "Vitrine" have the filters as a bar of chips above the products (store/_filters_top.html, the same fields as the
   form beside the products): a group opens under its chip on a wide screen and as a sheet at the foot of a phone. Each
   is a <details>, so it opens without scripts, and has its own button to send what was ticked. */
.ft-bar { display: flex; align-items: center; gap: 6px; margin: 0 -14px; padding: 2px 14px; overflow-x: auto; scrollbar-width: none; }
.ft-bar::-webkit-scrollbar { display: none; }
.ft-bar > * { flex-shrink: 0; }
.ft-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--chip); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
summary.ft-chip { list-style: none; }
summary.ft-chip::-webkit-details-marker { display: none; }
summary.ft-chip::after { content: "▾"; font-size: 11px; }
.ft-chip.has { border-color: var(--ink); }
.ft-chip.on, .ft-switch input:checked + .ft-chip { border-color: var(--ink); background: var(--ink); color: #fff; }
.ft-chip b { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; }
.ft-chip small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.ft-switch input:checked + .ft-chip small { color: #fff; opacity: .75; }
.ft-switch { position: relative; }
.ft-switch input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ft-switch input:focus-visible + .ft-chip, summary.ft-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ft-go { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 800; }
.js .ft-go { display: none; } /* with scripts a switch is sent as it is flipped (store_catalog.js); without them this button sends it */
.ft-panel { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: 76vh; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 10px 10px 0 0; background: var(--card); box-shadow: 0 0 0 100vmax rgba(20, 16, 16, .45); cursor: default; }
.ft-panel legend, .ft-title { padding: 0; margin-bottom: 10px; padding-right: 44px; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.ft-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; } /* as the side sheets' "Fechar" */
.ft-panel .prices .opt.any { display: block; }
.ft-panel .sort-list { padding: 0; }
.ft-apply { position: sticky; bottom: 0; flex-shrink: 0; width: 100%; min-height: 48px; } /* in sight however long the list above it */
html:not(.js) .ft-bar { flex-wrap: wrap; overflow: visible; } /* "Filtrar" is the last chip: it must not be out of sight */
.cat-vitrine .results .grid { grid-template-columns: minmax(0, 1fr); }
/* "Lista": one line per model (store/_row.html). The photo, what a card says of the model, the price, and the button
   that leads to its page; on a phone the button takes the line under the text. */
.lr-list { display: flex; flex-direction: column; gap: 8px; }
.lr-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); color: var(--ink); text-decoration: none; }
.lr-row .pic { margin: 0; border-radius: var(--r-s); }
.lr-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lr-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.lr-row .tag { position: static; display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; vertical-align: 1px; }
.lr-meta { font-size: 11.5px; color: var(--muted); }
.lr-row .ask { position: static; display: inline-block; margin-left: 6px; padding: 0 6px; background: #fff4e5; font-size: 10.5px; }
.lr-colors { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.lr-colors .dot { width: 10px; height: 10px; }
.lr-price { text-align: right; white-space: nowrap; }
.lr-price strong { font-size: 15px; font-weight: 800; }
.lr-price small { margin-left: 3px; font-size: 11px; color: var(--muted); }
.lr-price .old { display: block; }
body:not(.viv-discreto) .lr-price strong { color: var(--brand); }
.lr-btn { grid-column: 2 / 4; display: flex; align-items: center; justify-content: center; height: 38px; padding: 0 12px; border-radius: var(--r-btn); background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; }
@media (max-width: 899px) {
  /* Without scripts nothing opens the phone's sheet of "Filtros ao lado": the filters are then part of the page, above
     the products, with the sheet's own button. */
  html:not(.js) .two-btn, html:not(.js) .filters .backdrop, html:not(.js) .filters .sheet-head button { display: none; }
  html:not(.js) .filters { display: block; position: static; }
  html:not(.js) .filters .panel { max-height: none; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-m); }
}
@media (min-width: 900px) {
  /* And nothing sends the form beside the products when a box is ticked: its button, hidden there, is drawn. */
  html:not(.js) .filters .sheet-foot { display: grid; padding: 14px 0 0; border-top: 0; }
  .ft-bar { flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; overflow: visible; }
  .ft-chip { height: 40px; padding: 0 18px; font-size: 14px; }
  .ft-drop { position: relative; }
  .ft-panel { position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; right: auto; bottom: auto; width: max-content; min-width: 250px; max-width: 320px; max-height: 60vh; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 12px 30px rgba(30, 26, 26, .14); }
  .ft-panel legend { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); } /* read aloud, not drawn: the chip says it */
  .ft-x { display: none; } /* a box under its chip closes by the chip, by a click outside or by Escape */
  .ft-apply { min-height: 40px; }
  .js .ft-apply { display: none; } /* a ticked box is sent at once */
  .cat-vitrine .results .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .lr-list { gap: 10px; }
  .lr-row { grid-template-columns: 96px minmax(0, 1fr) 130px 170px; gap: 20px; padding: 12px 16px; }
  .lr-row:hover { border-color: var(--field); }
  .lr-name { font-size: 15px; }
  .lr-row .tag { font-size: 11px; }
  .lr-meta, .lr-colors { font-size: 13.5px; }
  .lr-colors .dot { width: 12px; height: 12px; }
  .lr-price strong { font-size: 18px; }
  .lr-btn { grid-column: auto; height: 42px; font-size: 15px; }
}

/* The product page ("Layout das outras páginas"). "Clássico" is the page as it always was. The other two are a class on
   .pd and arrange the same gallery (#pd-media, #pd-thumbs) and the same two forms. "Compacto": store_product.js draws
   every photo of the color in #pd-thumbs and marks the gallery .stacked; the big picture then gives way to them, reduced
   to its "Promoção" tag so the tag is not lost. "Carrossel" (pd-rolagem): the script marks the gallery .car, draws the
   arrows and uses #pd-thumbs for the dots; without it the page's own photos stand there, one under the other. For a
   color without photos the big picture stays: a block of the color, as on the classic page.
   The grid of the wide form marks the color whose photos show (.pd-cn[aria-pressed=true], the board's "on"). */
.pd-cn[aria-pressed=true] { background: #f3ede6; outline: 1.5px solid var(--ink); }
/* "Carrossel": one photo at a time, round arrows at its sides, the counter in a dark pill at the top right, the dots at
   its foot (the current one white, the others at 60 %), and the color of the photo as a caption. */
.pd-rolagem .gallery { position: relative; }
.pd-rolagem .thumbs { flex-direction: column; gap: 10px; padding: 10px 0 0; overflow: visible; }
.pd-rolagem .thumbs > img, .pd-rolagem .thumbs > video { width: 100%; display: block; }
/* Without scripts (the page gave the gallery pd-own: it holds the product's own photos and the script has not drawn the
   carousel) the big picture is reduced to its tag over the photos, as the compact layout does. */
.pd-rolagem .gallery.pd-own:not(.car) .media { display: block; width: auto; height: auto; aspect-ratio: auto; border-radius: 0; background: none !important; overflow: visible; pointer-events: none; }
.pd-rolagem .gallery.pd-own:not(.car) .media > :not(.tag) { display: none; }
.pd-rolagem .gallery.pd-own:not(.car) .media .tag { position: static; display: inline-block; margin-bottom: 8px; }
.pd-rolagem .gallery.car .thumbs { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; flex-direction: row; justify-content: center; gap: 5px; padding: 0; pointer-events: none; }
.pd-rolagem .gallery.car .thumb { position: relative; width: 18px; height: 18px; margin: 0; border-radius: 50%; background: none; box-shadow: none; pointer-events: auto; }
.pd-rolagem .gallery.car .thumb::after { content: ""; position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.pd-rolagem .gallery.car .thumb.on::after { background: #fff; }
.pd-arr { position: absolute; top: 50%; z-index: 2; width: 26px; height: 26px; margin-top: -13px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pd-arr.l { left: 8px; }
.pd-arr.r { right: 8px; }
.pd-rolagem .media-count { top: 8px; right: 8px; bottom: auto; left: auto; padding: 2px 7px; border-radius: 999px; background: rgba(30, 26, 26, .7); color: #fff; font-size: 9px; font-weight: 700; }
.pd-rolagem .media-zoom { top: auto; bottom: 14px; }
.pd-cap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 11px; white-space: nowrap; pointer-events: none; }
/* "Compacto": the photos as a row of small pictures, then the grade across the page, at both widths. */
.pd-compacto .gallery { position: static; display: block; margin: 0; }
.pd-compacto .media { width: 68px; height: auto; aspect-ratio: 3 / 4; border-radius: var(--r-s); }
.pd-compacto .media-zoom, .pd-compacto .media-count { display: none; }
.pd-compacto .media .tag { top: 4px; left: 4px; padding: 2px 5px; font-size: 9.5px; } /* it must fit the small block */
.pd-compacto .gallery.stacked .media { display: block; width: auto; aspect-ratio: auto; border-radius: 0; background: none !important; overflow: visible; pointer-events: none; }
.pd-compacto .gallery.stacked .media > :not(.tag) { display: none; }
.pd-compacto .gallery.stacked .media .tag { position: static; display: inline-block; margin-bottom: 8px; padding: 4px 8px; font-size: 11px; }
.pd-compacto .thumbs { gap: 8px; padding: 0; }
.pd-compacto .thumb { width: 68px; height: auto; aspect-ratio: 3 / 4; margin: 0; box-shadow: none; cursor: zoom-in; }
@media (min-width: 900px) {
  /* The carousel on a computer: larger arrows, counter and dots; the gallery is one block (the dots lie over the photo). */
  .pd-rolagem .gallery { display: block; position: sticky; }
  .pd-rolagem .gallery.car .thumbs { bottom: 20px; gap: 9px; }
  .pd-rolagem .gallery.car .thumb { width: 24px; height: 24px; border: 0; }
  .pd-rolagem .gallery.car .thumb::after { top: 7px; left: 7px; width: 10px; height: 10px; }
  .pd-arr { width: 48px; height: 48px; margin-top: -24px; font-size: 28px; }
  .pd-arr.l { left: 16px; }
  .pd-arr.r { right: 16px; }
  .pd-rolagem .media-count { top: 16px; right: 16px; padding: 4px 12px; font-size: 14px; }
  .pd-cap { padding: 4px 10px; font-size: 15px; }
  /* Without scripts "+1 grade" is not drawn, but it still holds its cell: taken out of the grid (as it was), every
     row lost its last column and the cells slid under the wrong sizes, in every arrangement of this page. */
  html:not(.js) .pd-g { display: block; visibility: hidden; }
  .pd.pd-compacto { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pd-compacto .media .tag { top: 8px; left: 8px; padding: 4px 8px; font-size: 11px; }
  .pd-compacto .media, .pd-compacto .gallery .thumb { width: 130px; }
  .pd-compacto .gallery .thumbs { flex: none; flex-direction: row; flex-wrap: wrap; order: 0; }
  .pd-compacto .gallery .thumb { height: auto; border: 0; box-shadow: none; }
}

/* --- "Categorias", the phone's categories screen at /categorias/ (board Main isCats, canvas v21): the search button,
   the quick chips, "Ver tudo" in the store's colour and two-column tiles with two covers each. From 900px the same page
   draws the tiles in four columns and leaves the search to the header's field (the board has no computer version). --- */
.cg { display: flex; flex-direction: column; gap: 14px; }
.cg-search { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: var(--r-btn); border: 1px solid var(--chip); background: var(--card); color: var(--muted); font-size: 15px; text-decoration: none; }
.cg-search svg { color: var(--soft); flex-shrink: 0; }
.cg h1 { margin-top: 4px; font-size: 22px; }
.cg-quick { display: flex; gap: 8px; margin: 0 -14px; padding: 0 14px; overflow-x: auto; scrollbar-width: none; }
.cg-quick::-webkit-scrollbar { display: none; }
.cg-quick a { flex-shrink: 0; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-btn); border: 1px solid var(--chip); background: var(--card); color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cg-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 96px; padding: 0 18px; border-radius: var(--r-m); background-color: var(--brand); color: #fff; text-decoration: none; }
.cg-all > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-all strong { font-size: 20px; }
.cg-all small { font-size: 12.5px; opacity: .85; }
.cg-all b { font-size: 22px; font-weight: 400; }
.cg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cg-tile { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-m); overflow: hidden; background: var(--card); color: var(--ink); text-decoration: none; }
.cg-covers { display: grid; grid-template-columns: 1fr 1fr; width: 100%; aspect-ratio: 1 / 1; }
.cg-cover { display: block; min-width: 0; overflow: hidden; background-color: var(--field); }
.cg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-text { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.cg-name { font-size: 15px; font-weight: 800; }
.cg-count { font-size: 12px; color: var(--muted); }
@media (min-width: 900px) {
  .cg { gap: 18px; }
  .cg h1 { font-size: 34px; }
  .cg-quick { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .cg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}