/* 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 whatever the intensity the merchant chose. Fonts, the corners of the
   photos, the shape of the product photo and the columns of a phone still come from the store's appearance. */
body.ed-store { --ink: #111111; --soft: #555555; --muted: #777777; --line: #ececec; --chip: #d6d6d6; --field: #c8c8c8; --ground: #ffffff; --card: #ffffff; 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: #fff; }
/* 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: #111; 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: #fff; border-bottom: 1px solid #ececec; }
.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: #111; }
.ed-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ed-icon .cart-badge { top: 5px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 9.5px; font-weight: 500; }
/* 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: #111; 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 #f3f3f3; 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: #111; 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: #111; }
/* "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; 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: #f5f2ee; }
.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 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); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; transform: translateY(100%); transition: transform .25s; }
.ed-pc:hover .ed-q, .ed-pc:focus-visible .ed-q { transform: none; }
.ed-pn { margin-top: 8px; font-size: 12.5px; line-height: 1.35; }
.ed-pp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 13px; }
.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; }

@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, .ed-find summary { color: #111; text-decoration: none; }
  .ed-hnav a:hover, .ed-find summary: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; }
  /* "Buscar" opens a field under the header. */
  .ed-find summary { list-style: none; cursor: pointer; }
  .ed-find summary::-webkit-details-marker { display: none; }
  .ed-find form { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; display: flex; align-items: center; gap: 24px; padding: 12px 48px 18px; border-bottom: 1px solid #ececec; background: #fff; }
  .ed-find input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0; border: 0; border-bottom: 1px solid #111; border-radius: 0; outline: 0; background: transparent; font-size: 16px; letter-spacing: 0; text-transform: none; }
  .ed-find input:focus-visible { border-bottom-width: 2px; }
  .ed-find button { padding: 0; border: 0; background: none; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
  .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-grid.ed-grid-fill { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .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; }
  /* What sticks to the top of the page stays under the header, which does not slide away in this model. */
  .ed-store .gallery { top: calc(var(--ed-stick, 121px) + 16px); }
}