/* Storefront in the Editorial model (boards LojaEditorial and LojaEditorialCelular): minimal, magazine like.
   Loaded after store.css, only for a store whose appearance has the layout "editorial" (body.ed-store, see base.html).
   Phone first; the wide layout starts at 900px, as in store.css. Every class of this file starts with "ed-".
   The body also carries viv-minimo: black on white is the model's base. Fonts, the corners of the photos, the shape of
   the product photo and the columns of a phone come from the store's appearance, and so do, since canvas v20, the
   --ed-* variables below (Appearance.editorialStyle writes them into base.html's <style> when they differ from these
   defaults): the notice bar and the banner dots (--ed-ui), the header and the categories row (--ed-hdr-*, --ed-cats-line:
   the header color chosen in Aparência, with the text and line of the standard header), section titles (--ed-title),
   the story block (--ed-about) and the prices of the cards (--ed-price). */
body.ed-store { --ink: #111111; --soft: #555555; --muted: #777777; --line: #ececec; --chip: #d6d6d6; --field: #c8c8c8; --ground: #ffffff; --card: #ffffff; --ed-ui: #111; --ed-hdr-bg: #fff; --ed-hdr-fg: #111; --ed-hdr-line: #ececec; --ed-cats-line: #f3f3f3; --ed-title: #111; --ed-about: #f5f2ee; --ed-price: #111; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.ed-store > * { --brand: #111111; --brand-soft: #f5f2ee; }

/* --- header: notice bar, logo between the menu and the order, categories --- */
/* The three stay at the top of a phone, as on its board. On a computer the notice bar scrolls away and the rest stays
   (store_editorial.js measures the bar; 34px is its height on one line). */
.ed-top { position: sticky; top: 0; z-index: 20; background: var(--ed-hdr-bg); }
/* A phone shows one notice at a time. They lie over each other in one cell, so the bar is as tall as the tallest
   (a long one takes two lines) and the page does not move when they pass. */
.ed-ann { min-height: 30px; padding: 4px 12px; display: grid; align-items: center; background: var(--ed-ui); color: #fff; font-size: 10px; line-height: 1.4; text-align: center; }
.ed-ann span { grid-area: 1 / 1; min-width: 0; visibility: hidden; text-transform: uppercase; letter-spacing: .16em; overflow-wrap: anywhere; }
.ed-ann span.on { visibility: visible; }
.ed-hdr { position: relative; background: var(--ed-hdr-bg); color: var(--ed-hdr-fg); border-bottom: 1px solid var(--ed-hdr-line); }
.ed-hrow { height: 58px; padding: 0 8px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.ed-icon { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ed-hdr-fg); }
.ed-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
/* The count on the bag of a phone (the board's cbadge; the standard header's cart-badge is not used here). */
.cbadge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--ed-hdr-fg); color: var(--ed-hdr-bg); font-size: 10px; font-weight: 500; line-height: 1; }
.cbadge[hidden] { display: none; }
/* The name of the store is its logo. A longer name gets less room between the letters (the class comes from Editorial.logoClass). */
.ed-logo { min-width: 0; padding-left: .42em; color: var(--ed-hdr-fg); font-size: 18px; font-weight: 500; letter-spacing: .42em; line-height: 1.3; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-logo.ed-logo-m { padding-left: .2em; font-size: 15px; letter-spacing: .2em; }
.ed-logo.ed-logo-s { padding-left: .06em; font-size: 13px; letter-spacing: .06em; }
@media (max-width: 359px) {
  .ed-logo { padding-left: .3em; font-size: 16px; letter-spacing: .3em; }
  .ed-logo.ed-logo-m { padding-left: .1em; font-size: 13.5px; letter-spacing: .1em; }
  .ed-logo.ed-logo-s { padding-left: 0; font-size: 12px; letter-spacing: 0; }
}
.ed-cats { height: 42px; padding: 0 16px; display: flex; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--ed-cats-line); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ed-cats::-webkit-scrollbar { display: none; }
.ed-cats a { flex-shrink: 0; color: var(--ed-hdr-fg); text-decoration: none; }
.ed-cats a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
/* The menu of a phone covers the screen. It is the target of the ☰ link, or gets .open from the script.
   It stands beside the header, not inside it, and above everything a page fixes to the screen
   (store.css: the bar at the foot 30, the filter sheets 40). */
.ed-menu { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; flex-direction: column; gap: 4px; padding: 16px 20px 32px; overflow-y: auto; background: #fff; }
.ed-menu:target, .ed-menu.open { display: flex; }
.ed-menu > a { flex-shrink: 0; padding: 14px 0; border-bottom: 1px solid #f0f0f0; color: #111; font-size: 15px; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.ed-menu > a.ed-menu-x { align-self: flex-end; width: 44px; height: 44px; padding: 0; border: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; letter-spacing: 0; }
.ed-menu form { flex-shrink: 0; display: flex; align-items: center; margin-bottom: 6px; border-bottom: 1px solid #111; }
.ed-menu input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; font-size: 16px; }
.ed-menu button { width: 44px; height: 44px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* --- home --- */
.ed-store .home > main { padding: 0; }
.ed-store .home > main > .wrap { max-width: none; padding: 0; }
/* The hero: images only, the banners side by side in a row that snaps. A phone sees one at a time. */
.ed-hero { position: relative; }
.ed-slides { height: clamp(420px, 123vw, 600px); display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ed-slides::-webkit-scrollbar { display: none; }
.ed-slide { flex: 0 0 100%; height: 100%; display: block; scroll-snap-align: start; background: #f5f2ee; }
.ed-slide picture { display: block; height: 100%; }
.ed-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Thin lines; each button is taller than its line so that a finger finds it. */
.ed-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 8px; }
.ed-dots button { position: relative; width: 12px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .3s; }
.ed-dots button::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: #c8c3bd; }
.ed-dots button[aria-current] { width: 28px; }
.ed-dots button[aria-current]::before { background: var(--ed-ui); }
/* "Regras de compra" in one line. */
.ed-rules { margin: 20px 16px 0; padding: 11px 0; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; color: #555; font-size: 10.5px; letter-spacing: .14em; line-height: 1.6; text-align: center; text-transform: uppercase; }
.ed-sec { padding: 44px 16px 0; }
.ed-st { margin: 0 0 6px; padding-left: .24em; color: var(--ed-title); font-size: 13px; font-weight: 500; letter-spacing: .24em; text-align: center; text-transform: uppercase; }
.ed-ss { margin: 0 0 32px; color: #777; font-size: 13px; text-align: center; }
.ed-ss + .ed-link { margin-top: 0; }
.ed-st + .ed-grid { margin-top: 32px; } /* a list without the line under its title */
.ed-link { display: block; width: max-content; max-width: 100%; margin: 40px auto 0; padding-bottom: 4px; border-bottom: 1px solid #111; color: #111; font-size: 12px; letter-spacing: .2em; text-decoration: none; text-transform: uppercase; }
/* Categories: photo tiles in a row that scrolls sideways. */
.ed-tiles { margin: 0 -16px; padding: 0 16px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.ed-tiles::-webkit-scrollbar { display: none; }
.ed-tile { flex-shrink: 0; width: 240px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #111; font-size: 12.5px; letter-spacing: .22em; text-align: center; text-decoration: none; text-transform: uppercase; }
.ed-shot { width: 100%; aspect-ratio: 4 / 5; display: block; overflow: hidden; border-radius: var(--r-s); background-color: #c9b9a4; }
.ed-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* "Sobre a loja" as the story block. */
.ed-story { margin-top: 56px; padding: 40px 16px; background: var(--ed-about); }
.ed-store .ed-story h2 { margin: 0 0 16px; font-size: 22px; font-weight: 400; letter-spacing: .02em; line-height: 1.2; }
.ed-story p { max-width: 460px; margin: 0 0 24px; color: #555; white-space: pre-line; }
.ed-story .ed-link { margin: 0; }

/* --- product card --- */
.ed-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 28px 10px; }
.ed-pc { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: #111; text-decoration: none; }
.ed-pimg { position: relative; display: block; aspect-ratio: var(--ratio); overflow: hidden; border-radius: var(--r-s); background-color: #e9e5df; }
.ed-pimg-link { display: block; width: 100%; height: 100%; }
.ed-pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-badge { position: absolute; top: 12px; left: 12px; padding: 3px 8px; background: #fff; font-size: 10.5px; letter-spacing: .16em; }
.ed-badge-off { background: #111; color: #fff; }
.ed-ask { position: absolute; left: 12px; bottom: 12px; padding: 3px 8px; background: rgba(255, 255, 255, .92); font-size: 10.5px; letter-spacing: .06em; }
.ed-q { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .94); color: #111; font-size: 11.5px; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; transform: translateY(100%); transition: transform .25s; }
.ed-pc:hover .ed-q, .ed-pc:focus-within .ed-q { transform: none; }
.ed-pn { margin-top: 8px; color: #111; font-size: 12.5px; line-height: 1.35; text-align: left; text-decoration: none; }
.ed-pn:hover { text-decoration: underline; text-underline-offset: 4px; }
/* On a phone "+ Escolher grade" is the outlined button under the price (the board's mgrade). */
.ed-mgrade { margin-top: 6px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #111; color: #111; font-size: 10.5px; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.ed-pp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; }
.ed-pp > span { color: var(--ed-price); }
.ed-pp s { color: #999; font-size: 12.5px; }
.ed-sws { min-width: 0; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.ed-sws i { width: 12px; height: 12px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ed-sws span { min-width: 0; margin-left: 4px; color: #999; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- footer --- */
.ed-foot { padding: 40px 16px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; color: #555; font-size: 13px; }
.ed-store .shell:not(.home) .ed-foot { border-top: 1px solid #ececec; }
.ed-foot b { display: block; margin-bottom: 14px; color: #111; font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.ed-foot span, .ed-foot a { display: block; margin-bottom: 8px; color: #555; text-decoration: none; }
.ed-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* The store itself: after the links on a phone, the first column on a computer. The logo is drawn on a computer only. */
.ed-foot-id { grid-column: 1 / -1; order: 1; }
.ed-foot .ed-logo { display: none; }
.ed-copy { margin: 0 16px; padding: 20px 0 28px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #ececec; color: #999; font-size: 11.5px; letter-spacing: .06em; }
.ed-copy > span:first-child { text-transform: uppercase; }
.ed-copy a { color: inherit; text-decoration: none; }
.ed-copy a:hover { text-decoration: underline; }
/* A bar fixed to the foot of the screen (product, order) must not cover the last lines. */
.shell > .bar ~ .ed-copy { padding-bottom: 120px; }

/* --- the other pages: their own structure, with the Editorial look --- */
/* No bottom navigation in this model: a page ends with the footer. */
.ed-store main { padding-bottom: 48px; }
.ed-store .display { font-weight: 500; }
.ed-store .btn { font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.ed-store .btn.sm, .ed-store .btn.outline { font-size: 11.5px; letter-spacing: .1em; }
.ed-store .link-btn { font-weight: 500; }
.ed-store .section-head h2 { font-weight: 500; }
.ed-store .item .price strong, .ed-store .bigprice strong { font-weight: 500; }

/* --- the drawer (canvas v18): Entrar / Criar conta, Minha conta, Carrinho, Escolher grade --- */
/* A <dialog> at the right edge, the whole width of a phone and 420px on a computer; it stands beside the header
   (store/_chrome_editorial.html), above the menu (50) and everything a page fixes to the screen. */
.ed-dr { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; background: #fff; color: #111; box-shadow: -12px 0 40px rgba(0, 0, 0, .12); z-index: 60; }
/* A closed one is hidden here: "display: flex" above weighs more than the browser's own rule for a closed dialog. */
.ed-dr:not([open]) { display: none; }
.ed-dr::backdrop { background: rgba(0, 0, 0, .32); }
.ed-dr-h { flex-shrink: 0; height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ececec; font-size: 12.5px; }
.ed-dr-title { letter-spacing: .14em; text-transform: uppercase; }
.ed-dr-x { width: 40px; height: 40px; margin-right: -10px; padding: 0; border: 0; background: none; color: #111; font-size: 26px; line-height: 1; cursor: pointer; }
.ed-dr-b { flex: 1 1 auto; min-height: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
/* The content of the drawer, and of its page: a column of blocks. The same blocks stand on the page without the drawer. */
.ed-dr-body { display: flex; flex-direction: column; gap: 16px; }
.ed-dr-body > *, .ed-dr-form > * { flex-shrink: 0; min-width: 0; }
.ed-dr-form { display: flex; flex-direction: column; gap: 16px; }
.ed-dr-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #ececec; }
.ed-dr-tabs a { height: 44px; margin-bottom: -1px; display: flex; align-items: center; justify-content: center; border-bottom: 2px solid transparent; color: #999; font-size: 12px; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.ed-dr-tabs a.on { color: #111; border-bottom-color: #111; }
.ed-dr-note { margin: 0; padding: 12px 14px; background: #f5f2ee; font-size: 13px; }
.ed-dr-err { margin: 0; color: #b3261e; font-size: 13px; }
.ed-dr-sm { margin: 0; color: #888; font-size: 12px; line-height: 1.5; }
.ed-dr-sm.ed-ok { color: #17703d; }
.ed-dr-sm.ed-warn { color: #8a5a00; }
.ed-dr-addr { color: #111; }
.ed-dr-addr span { color: #777; }
.ed-dr-sec { align-self: flex-start; margin-top: 10px; padding-bottom: 2px; border-bottom: 1px solid #111; color: #111; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ed-dr-lbl { align-self: flex-start; margin-top: 8px; color: #777; font-size: 11px; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
a.ed-dr-lbl:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Fields: an uppercase small label over a line. */
.ed-fl { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: #555; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.ed-fl input, .ed-fl select { width: 100%; height: 46px; padding: 0; border: 0; border-bottom: 1px solid #cfcfcf; border-radius: 0; outline: 0; background: transparent; color: #111; font: inherit; font-size: 16px; letter-spacing: 0; text-transform: none; }
.ed-fl select { appearance: none; -webkit-appearance: none; padding-right: 18px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center / 12px 8px; }
.ed-fl input:focus, .ed-fl select:focus { border-bottom-color: #111; }
.ed-fl input[type="date"] { min-width: 0; }
.ed-fl-err { color: #b3261e; font-size: 12px; letter-spacing: 0; text-transform: none; }
/* "opcional" beside a label's name ("Observação"), on the same line. */
.ed-fl span small { color: #999; letter-spacing: 0; text-transform: none; }
.ed-fl2 { display: flex; gap: 16px; }
.ed-fl2 .ed-fl { flex: 1 1 0; }
.ed-fl2 .ed-fl-uf { flex: 0 0 70px; }
.ed-consent { display: flex; gap: 10px; align-items: flex-start; color: #555; font-size: 12.5px; line-height: 1.45; }
.ed-consent input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #111; }
.ed-consent a { color: #111; }
/* The black button, its outlined twin and the underlined link. */
.ed-btn { width: 100%; height: 50px; padding: 0 16px; border: 1px solid #111; border-radius: 0; display: flex; align-items: center; justify-content: center; background: #111; color: #fff; font: inherit; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.ed-btn:disabled, .ed-btn[aria-disabled="true"] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.ed-btn-ghost { background: #fff; color: #111; }
.ed-lnk { align-self: flex-start; padding: 0; border: 0; background: none; color: #555; font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.ed-lnk:hover { color: #111; }
/* Minha conta */
.ed-ac-hi { display: flex; align-items: center; gap: 14px; }
.ed-ac-av { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #111; color: #fff; font-size: 16px; letter-spacing: .06em; }
.ed-ac-hi div { min-width: 0; display: flex; flex-direction: column; }
.ed-ac-hi b { font-size: 17px; font-weight: 500; }
.ed-ac-hi div span { color: #777; font-size: 13px; }
.ed-ac-o { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; color: #777; font-size: 13px; text-decoration: none; }
.ed-ac-o div { min-width: 0; display: flex; flex-direction: column; }
.ed-ac-o b { color: #111; font-size: 14px; font-weight: 500; }
.ed-store .ed-ac-st { flex-shrink: 0; padding: 4px 8px; border-radius: 0; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; white-space: nowrap; }
.ed-ac-d { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px 12px; font-size: 13.5px; }
.ed-ac-d span { color: #777; }
.ed-ac-d b { font-weight: 500; overflow-wrap: anywhere; }
/* Carrinho */
.ed-ct-empty { padding: 40px 8px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ed-ct-empty p { margin: 0; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; }
.ed-ct-empty span { margin-bottom: 12px; color: #777; font-size: 13px; }
.ed-ct-sent { padding-bottom: 8px; }
.ed-ct-it { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }
.ed-ct-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background-color: #e9e5df; }
.ed-ct-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-ct-in { display: flex; flex-direction: column; gap: 3px; color: #666; font-size: 12.5px; }
.ed-ct-in b { color: #111; font-size: 14px; font-weight: 500; }
.ed-ct-warn { color: #8a5a00; }
.ed-ct-ac { display: flex; gap: 16px; margin-top: 4px; }
.ed-ct-ac form { display: contents; }
.ed-ct-tot { margin-top: 4px; display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; }
.ed-ct-tot b { font-size: 20px; font-weight: 500; }
/* The products and the Correios freight above the total (canvas v22), and the quote row of the Correios block. */
.ed-ct-sum { display: flex; flex-direction: column; gap: 4px; }
.ed-ct-row { display: flex; justify-content: space-between; font-size: 13px; color: #555; } /* hidden ones: store.css's [hidden] */
.ed-fq-err { margin: 0; color: #b3261e; font-size: 13px; } /* the block's own sentence, drawn as .ed-dr-err but not one: the refusals of the form are those */
/* The quote row (board `.frq`, canvas v23): a boxed 42px field and the black uppercase "Calcular"; in the cart's "Frete"
   section (.ed-fq) and in the product page's "Frete e prazo" (.ed-pd-fr, its label .ed-pd-frl and its rows .ed-pd-frr). */
.ed-frq { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-frq .cep-note { flex-basis: 100%; margin-top: 0; } /* store_cep.js's note, under the field and the button */
.ed-frq input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #d6d6d6; border-radius: 0; outline: 0; background: #fff; color: #111; font: inherit; font-size: 15px; }
.ed-frq input:focus { border-color: #111; }
.ed-frq .ed-btn { width: auto; flex-shrink: 0; height: 42px; padding: 0 16px; font-size: 11.5px; letter-spacing: .14em; }
.ed-fq, .fq-res { display: flex; flex-direction: column; gap: 10px; }
.ed-ink { color: #111; }
.ed-pd-fr { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ed-pd-frl { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.ed-pd-frr { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: baseline; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid #eee; }
.ed-pd-frr span { color: #777; }
.ed-ct-bar { height: 3px; background: #eee; }
.ed-ct-bar span { display: block; height: 100%; background: #111; }
/* "Entrega": three chips, and under them the fields of the chosen way. The radio buttons are real; :has() shows the chosen
   way's fields without scripts, and a browser without :has() shows the fields of every way with the radio buttons themselves. */
.ed-sh { display: flex; flex-direction: column; gap: 12px; }
.ed-sh-o { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ed-sh-2 { grid-template-columns: 1fr 1fr; }
.ed-sh-b { position: relative; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid #d6d6d6; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.ed-sh-b small { font-size: 10.5px; letter-spacing: .04em; opacity: .7; text-transform: none; }
.ed-sh-b input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ed-sh-b:has(input:checked) { border-color: #111; background: #111; color: #fff; }
.ed-sh-b:has(input:focus-visible) { outline: 2px solid #111; outline-offset: 2px; }
.ed-sh-f { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #f7f5f2; }
.ed-sh [data-delivery] { display: none; }
.ed-sh:has(input[name="delivery"][value="onibus"]:checked) [data-delivery="onibus"], .ed-sh:has(input[name="delivery"][value="correios"]:checked) [data-delivery="correios"], .ed-sh:has(input[name="delivery"][value="retirada"]:checked) [data-delivery="retirada"] { display: flex; }
@supports not selector(:has(a)) {
  .ed-sh [data-delivery] { display: flex; }
  .ed-sh-b input { position: static; width: auto; height: auto; opacity: 1; }
}
/* Escolher grade */
.ed-gd-top { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; align-items: center; }
.ed-gd-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background-color: #e9e5df; }
.ed-gd-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-gd-top > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ed-gd-top b { font-size: 16px; font-weight: 500; }
.ed-gd-top s { color: #999; font-size: 12.5px; }
.ed-gd-grid { display: grid; gap: 8px; align-items: center; }
.ed-gd-hz { color: #777; font-size: 11.5px; letter-spacing: .12em; text-align: center; }
.ed-gd-c i { display: block; width: 22px; height: 22px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ed-gd-cn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ed-gd-in { width: 100%; height: 44px; padding: 0; border: 1px solid #d6d6d6; border-radius: 0; outline: 0; background: #fff; color: #111; font: inherit; font-size: 17px; text-align: center; -moz-appearance: textfield; }
.ed-gd-in::-webkit-outer-spin-button, .ed-gd-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ed-gd-in:focus { border-color: #111; }
.ed-gd-in.has { border-color: #111; background: #111; color: #fff; }
.ed-gd-out, .ed-gd-none { height: 44px; display: flex; align-items: center; justify-content: center; border: 1px dashed #d6d6d6; color: #aaa; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.ed-gd-none { border-color: transparent; }
.ed-gd-q { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-gd-q button { height: 34px; padding: 0 12px; border: 1px solid #d6d6d6; border-radius: 0; display: flex; align-items: center; gap: 8px; background: #fff; color: #111; font: inherit; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ed-gd-q i { width: 12px; height: 12px; display: inline-block; }
html:not(.js) .ed-jsonly { display: none; }
/* The message of the order just placed. */
.ed-chat { display: flex; flex-direction: column; gap: 8px; }
.ed-bubble { padding: 12px 14px; background: #f5f2ee; font-size: 13px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
/* The toast: "12 peças no carrinho". A popover (shown after the drawer, so above it); the browser's own popover rule is undone. */
.ed-tst { position: fixed; inset: auto auto 24px 50%; z-index: 70; width: max-content; margin: 0; padding: 12px 20px; border: 0; transform: translateX(-50%); overflow: visible; background: #111; color: #fff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ed-tst[hidden] { display: none; }
/* The same contents as pages: a column in the middle. */
.ed-page { max-width: 480px; margin: 0 auto; }
.ed-page-title { margin: 0 0 20px; font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }

/* --- the catalog view (board `.cvw`) and the product page (board `.pdp`), canvas v22; a phone first, as the board's `.m` --- */
.ed-cvw, .ed-pdp { max-width: 1240px; margin: 0 auto; }
/* What a link may land on (/#ed-rules, #grade, a photo #ed-m-N) stops under the header that stays at the top, not behind it. */
.ed-rules, .ed-pd-gd, .ed-pd-strip > img, .ed-pd-strip > video { scroll-margin-top: calc(var(--ed-stick, 121px) + 16px); }
/* The breadcrumb "Início / …" of both pages. */
.ed-pd-bc { margin: 0 0 10px; display: flex; gap: 8px; color: #888; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.ed-pd-bc a { color: inherit; text-decoration: none; }
.ed-pd-bc a:hover { color: #111; }
.ed-pd-bc > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The title with the count, the search row, the bar of chips and sorts (stacked on a phone), the empty state. */
.ed-cv-hd { margin: 4px 0 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ed-store .ed-cv-hd h1 { margin: 0; font-family: inherit; font-size: 24px; font-weight: 400; letter-spacing: .01em; }
.ed-cv-hd span { flex-shrink: 0; color: #888; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ed-cv-s { max-width: 520px; height: 48px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #111; }
.ed-cv-s svg { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: #111; stroke-width: 1.6; }
.ed-cv-s input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: #111; font: inherit; font-size: 15px; }
.ed-cv-s input::-webkit-search-cancel-button { -webkit-appearance: none; } /* the row has its own × */
.ed-cv-x { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #888; font-size: 20px; text-decoration: none; }
.ed-cv-bar { margin: 14px 0 20px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.ed-cv-chs, .ed-cv-sos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ed-cv-chs::-webkit-scrollbar, .ed-cv-sos::-webkit-scrollbar { display: none; }
.ed-cv-ch, .ed-cv-so { flex-shrink: 0; height: 34px; padding: 0 14px; border: 1px solid #ddd; display: flex; align-items: center; gap: 6px; background: #fff; color: #111; font-size: 11.5px; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.ed-cv-ch.on { border-color: #111; background: #111; color: #fff; }
.ed-cv-so { border-color: transparent; color: #888; }
.ed-cv-so.on { color: #111; text-decoration: underline; text-underline-offset: 6px; }
.ed-cv-empty { padding: 60px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ed-cv-empty p { margin: 0; font-size: 18px; }
.ed-cv-reset { height: 42px; padding: 0 20px; border: 1px solid #111; display: flex; align-items: center; background: #fff; color: #111; font-size: 11.5px; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
/* The product page: on a phone one column, the photo first (the whole width), the thumbnails as a row under it, then the info. */
.ed-pd-g { display: grid; grid-template-columns: minmax(0, 1fr); }
.ed-pd-main { position: relative; order: 1; margin: 0 -14px; aspect-ratio: var(--ratio); overflow: hidden; background-color: #f5f2ee; }
.ed-pd-strip { height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ed-pd-strip::-webkit-scrollbar { display: none; }
.ed-pd-strip img, .ed-pd-strip video { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; scroll-snap-align: start; background: #f5f2ee; }
.ed-pd-ar { position: absolute; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); color: #111; }
.ed-pd-ar svg { width: 20px; height: 20px; fill: none; stroke: #111; stroke-width: 1.6; }
.ed-pd-l { left: 8px; }
.ed-pd-r { right: 8px; }
.ed-pd-cnt { position: absolute; right: 14px; bottom: 14px; padding: 4px 10px; background: rgba(255, 255, 255, .92); color: #111; font-size: 11.5px; letter-spacing: .1em; }
.ed-pd-thumbs { order: 2; padding-top: 10px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.ed-pd-thumbs::-webkit-scrollbar { display: none; }
.ed-pd-th { position: relative; flex: 0 0 56px; width: 56px; aspect-ratio: 3 / 4; display: block; overflow: hidden; background: #e9e5df; opacity: .6; outline-offset: 2px; }
.ed-pd-th.on { opacity: 1; outline: 1.5px solid #111; }
.ed-pd-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-pd-th-v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #111; font-size: 14px; }
.ed-pd-info { order: 3; padding-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.ed-pd-info > * { flex-shrink: 0; min-width: 0; }
.ed-ref { color: #777; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.ed-store .ed-pd-n { margin: -6px 0 0; font-family: inherit; font-size: 21px; font-weight: 400; letter-spacing: -.005em; line-height: 1.2; }
.ed-pd-pr { display: flex; align-items: baseline; gap: 10px; font-size: 20px; }
.ed-pd-pr s { color: #999; font-size: 14px; }
.ed-pd-pr small { color: #777; font-size: 13px; }
.ed-pd-rule { margin-top: -8px; color: #777; font-size: 12.5px; }
.ed-pd-cl { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ed-pd-sws { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-pd-sw { width: 38px; height: 38px; padding: 3px; border: 1px solid #ddd; display: block; background: #fff; }
.ed-pd-sw i { display: block; width: 100%; height: 100%; }
.ed-pd-sw.on { border-color: #111; }
/* The color of a grade row shows that color's photo (script); the row of the photo on the screen is outlined. */
.ed-pd-gd .ed-gd-c { cursor: pointer; }
.ed-pd-gd .ed-gd-c.ed-pd-cur i { outline: 1.5px solid #111; outline-offset: 2px; }
/* "Detalhes": a <details>, open as the page opens; the + / − is drawn here. */
.ed-pd-acc { margin-top: 6px; border-top: 1px solid #e6e6e6; }
.ed-pd-acc summary { height: 48px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e6e6; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; list-style: none; cursor: pointer; }
.ed-pd-acc summary::-webkit-details-marker { display: none; }
.ed-pd-acc summary::after { content: "+"; font-size: 16px; letter-spacing: 0; }
.ed-pd-acc[open] summary::after { content: "−"; }
.ed-pd-accb { padding: 12px 0; border-bottom: 1px solid #e6e6e6; color: #444; font-size: 13.5px; }
.ed-pd-accb p { margin: 0 0 6px; }
.ed-pd-wa { align-self: flex-start; color: #1a7f45; font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.ed-pd-rel-t { margin-top: 64px; }

@media (min-width: 900px) {
  .ed-top.ed-with-ann { top: -34px; }
  .ed-ann { min-height: 34px; padding: 4px 48px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 48px; font-size: 11px; }
  .ed-ann span, .ed-ann span.on { visibility: visible; }
  /* The two sides are never narrower than their links; the name takes what is left between them and is cut when it is longer. */
  .ed-hrow { height: 76px; padding: 0 48px; grid-template-columns: 1fr auto 1fr; column-gap: 24px; }
  .ed-hnav { display: flex; gap: 28px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
  .ed-hnav a { color: var(--ed-hdr-fg); text-decoration: none; }
  .ed-hnav a:hover { text-decoration: underline; text-underline-offset: 6px; }
  .ed-hright { justify-self: end; }
  .ed-logo { padding-left: .42em; font-size: 24px; }
  .ed-logo.ed-logo-m { padding-left: .3em; font-size: 21px; letter-spacing: .3em; }
  .ed-logo.ed-logo-s { padding-left: .14em; font-size: 18px; letter-spacing: .14em; }
  .ed-cats { height: auto; min-height: 44px; padding: 6px 48px; flex-wrap: wrap; justify-content: center; gap: 4px 34px; overflow: visible; font-size: 12.5px; letter-spacing: 0; text-transform: none; }
  .ed-cats a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .ed-menu, .ed-menu:target, .ed-menu.open { display: none; }

  /* The current banner and the next one, side by side; a single banner takes the row. */
  .ed-slides { height: clamp(480px, 48vw, 640px); }
  @media (min-width: 1441px) { .ed-slides { height: max(640px, min(44.45vw, 100vh - 170px)); } }
  .ed-slide { flex-basis: 50%; }
  .ed-hero-one .ed-slide { flex-basis: 100%; }
  .ed-dots { bottom: 10px; }
  .ed-rules { margin: 0 48px; padding: 18px 0; border-top: 0; font-size: 13px; letter-spacing: .18em; }
  .ed-home > :not(.ed-hero) + .ed-rules { margin-top: 56px; border-top: 1px solid #ececec; }
  .ed-sec { padding: 72px 48px 0; }
  .ed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; }
  .ed-pn { font-size: 13.5px; }
  .ed-pp { font-size: 14px; }
  /* Four tiles to a row; three or five when that fills the rows (3, 5 or 6 categories). A last row with fewer is centered. */
  .ed-tiles { margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; gap: 40px 20px; overflow: visible; }
  .ed-tile { width: calc((100% - 60px) / 4); }
  .ed-tiles-3 .ed-tile { width: calc((100% - 40px) / 3); }
  .ed-tiles-5 .ed-tile { width: calc((100% - 80px) / 5); }
  .ed-story { margin-top: 96px; padding: 80px 48px; display: flex; justify-content: center; text-align: center; }
  .ed-story > div { max-width: 720px; }
  .ed-store .ed-story h2 { font-size: 30px; }
  .ed-story p { margin-left: auto; margin-right: auto; }
  .ed-story .ed-link { margin: 0 auto; }

  .ed-foot { padding: 64px 48px 32px; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .ed-foot-id { grid-column: auto; order: 0; }
  .ed-foot .ed-logo { display: block; margin-bottom: 14px; padding-left: 0; color: #111; font-size: 18px; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .ed-foot .ed-logo.ed-logo-m { font-size: 16px; }
  .ed-foot .ed-logo.ed-logo-s { font-size: 14px; }
  .ed-copy { margin: 0 48px; flex-direction: row; justify-content: space-between; gap: 24px; }
  .shell > .bar ~ .ed-copy { padding-bottom: 110px; }

  .ed-store main { padding: 36px 0 96px; }
  .ed-store main > .wrap { max-width: 1440px; padding: 0 48px; }

  .ed-page { margin-top: 24px; }

  /* The catalog view: the chips at the left, the sorts at the right. */
  .ed-pd-bc { margin-bottom: 20px; }
  .ed-store .ed-cv-hd h1 { font-size: 30px; }
  .ed-cv-bar { margin: 18px 0 28px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  /* The product page: thumbnails | photo | info, the info staying under the header as the page scrolls (the header
     does not slide away in this model: --ed-stick, store_editorial.js). */
  .ed-pd-g { grid-template-columns: 72px minmax(0, 1fr) 400px; gap: 24px 36px; align-items: start; }
  .ed-pd-g.ed-pd-bare { grid-template-columns: minmax(0, 1fr) 400px; }
  .ed-pd-thumbs { order: 0; max-height: 640px; padding-top: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .ed-pd-th { flex-basis: auto; width: 100%; }
  .ed-pd-main { order: 0; margin: 0; max-height: 720px; }
  .ed-pd-ar { width: 44px; height: 44px; margin-top: -22px; }
  .ed-pd-l { left: 14px; }
  .ed-pd-r { right: 14px; }
  .ed-pd-info { order: 0; position: sticky; top: calc(var(--ed-stick, 121px) + 20px); padding-top: 0; }
  .ed-store .ed-pd-n { font-size: 26px; }
}

/* "Preço só para clientes cadastrados" (canvas v24, boards LojaEditorial, LojaEditorialCelular): the bar over the header
   (.lkbar, store/_chrome_editorial.html) and the Pix card in the Editorial's lines (store/_pix.html). */
.lkbar { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid #e5e5e5; background: #f6f6f4; color: #111; font: inherit; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; height: 30px; line-height: 30px; text-align: center; text-decoration: none; cursor: pointer; }
.ed-store .lock-price, .ed-store .ed-pp .lock-price, .ed-store .ed-pd-pr .lock-price { font-size: 13px; font-weight: 600; color: #6b625b; letter-spacing: 0; text-transform: none; }
.ed-store .pxc { border-color: #e5e5e5; border-radius: 0; margin-bottom: 8px; }
.ed-store .pxq { width: 160px; height: 160px; }
.ed-store .pxt { font-size: 13px; text-transform: uppercase; letter-spacing: .16em; font-weight: 500; }
.ed-store .pxs { color: #777; }
.ed-store .pxk { background: #f6f6f4; }
.ed-store .pxbt, .ed-store .pxbt2 { border-radius: 0; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.ed-store .pxbt { background: #111; }
.ed-store .pxbt2 { border-color: #e5e5e5; }
.ed-store .pxw span { color: #4a3a10; font-size: 12.5px; }
.ed-store .pxok { color: #1f6b46; font-size: 11px; }
@media (min-width: 900px) {
  .lkbar { font-size: 11px; height: 32px; line-height: 32px; }
}