/*
 * Show de Brownie theme.
 * Loaded after the legacy Bellaria CSS: new components use the `sb-` prefix,
 * and the "Legacy overrides" section restyles the old markup still used by inner pages.
 * Colour tokens live in styles/globals.css.
 */

/* ---------- Base ---------- */
:root {
  --content-max: 1200px;
  /* Side spacing of every section: keeps content within --content-max while backgrounds stay full-bleed */
  --gutter: max(clamp(22px, 7vw, 100px), calc((100vw - var(--content-max)) / 2));
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
}

body.menu-open { overflow: hidden; }

.page-wrapper { background-color: var(--color-cream); }

h1, h2, h3, h4, h5, h6 { color: var(--color-brown); }

::selection { background: var(--color-brown); color: var(--color-cream); }

:focus-visible { outline: 3px solid var(--color-brown); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brown);
  color: #fff;
  font: 700 0.92rem var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.sb-btn:hover { transform: translateY(-2px); background: var(--color-brown-deep); color: #fff; }
/* the legacy a:visited / a:focus rules are more specific than .sb-btn and would paint visited buttons brown on brown */
a.sb-btn, a.sb-btn:visited, a.sb-btn:focus, a.sb-btn:hover { color: #fff; }
a.sb-btn-cream, a.sb-btn-cream:visited, a.sb-btn-cream:focus { color: var(--color-brown); }
a.sb-btn-cream:hover { color: var(--color-brown-deep); }
a.sb-round-btn, a.sb-round-btn:visited, a.sb-round-btn:focus { color: #fff1dc; }
a.sb-round-btn:hover { color: #fff; }
.sb-btn span { display: inline-flex; align-items: center; font-size: 2rem; font-weight: 400; line-height: 1; transform: translateY(-0.06em); }
.sb-btn-sm { min-height: 40px; padding: 0 18px; font-size: 0.85rem; justify-content: center; }
.sb-btn-cream { background: var(--color-paper); color: var(--color-brown); white-space: nowrap; }
.sb-btn-cream:hover { background: #fff; color: var(--color-brown-deep); }

.sb-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-brown);
}

/* ---------- Header / topbar ---------- */
.sb-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(18px, 4vw, 56px);
  pointer-events: none;
}

.sb-topbar > * { pointer-events: auto; }


.sb-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.sb-round-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--color-brown);
  color: #fff1dc;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 6px 16px #2c101033;
  transition: transform 0.2s, background 0.2s;
}

.sb-round-btn i { color: #fff1dc; }
.sb-round-btn:hover { background: var(--color-brown-deep); color: #fff; transform: translateY(-2px); }
.sb-round-btn:hover i { color: #fff; }
.sb-menu-btn span { width: 22px; height: 2px; border-radius: 4px; background: #fff1dc; }

.sb-cart { position: relative; }

.sb-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-brown);
  color: #fff;
  font: 700 0.7rem/20px var(--font-body);
  text-align: center;
}

/* Drawer */
.sb-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #180a05a8;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.sb-scrim.is-visible { opacity: 1; visibility: visible; }

.sb-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  width: min(390px, 88vw);
  padding: 30px 26px;
  background: linear-gradient(160deg, #54280f, var(--color-brown-deep));
  color: var(--color-cream);
  overflow-y: auto;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
  box-shadow: 20px 0 60px #1b0b0650;
}

.sb-drawer.is-open { transform: none; visibility: visible; }

/* Slim, rounded scrollbar in the brand colours */
.sb-drawer {
  scrollbar-width: thin;
  scrollbar-color: #b78a68 transparent;
}

.sb-drawer::-webkit-scrollbar { width: 8px; }
.sb-drawer::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.sb-drawer::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #b78a68;
  background-clip: padding-box;
}
.sb-drawer::-webkit-scrollbar-thumb:hover { background: var(--color-tan); background-clip: padding-box; }

.sb-drawer-close {
  position: absolute;
  top: 12px;
  right: 20px;
  border: 0;
  background: transparent;
  color: var(--color-cream);
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
}

.sb-drawer-brand {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 30px 0 34px;
  color: var(--color-cream);
  font: 1.8rem var(--font-display);
}

.sb-drawer-brand span, .sb-drawer-brand small { color: var(--color-cream); }
.sb-drawer-brand img { filter: brightness(0) invert(0.92) sepia(0.2); }
.sb-drawer-brand small { font: 500 0.8rem var(--font-body); letter-spacing: 0.4em; }

.sb-drawer-nav { display: flex; flex-direction: column; }

.sb-drawer-nav a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 12px;
  border-bottom: 1px solid #98745b75;
  border-radius: 0;
  color: var(--color-cream);
  font-size: 0.97rem;
  transition: background 0.2s;
}

.sb-drawer-nav a i { width: 28px; text-align: center; font-size: 1.25rem; }
.sb-drawer-nav a b { margin-left: auto; font-size: 1.8rem; font-weight: 400; }
.sb-drawer-nav a:hover,
.sb-drawer-nav a.is-current { background: #ffffff1a; border-radius: 12px; color: #fff; }

.sb-whatsapp-btn {
  display: block;
  margin-top: 28px;
  padding: 16px 10px;
  border-radius: 999px;
  background: var(--color-whatsapp);
  color: #fff;
  text-align: center;
  font-weight: 700;
}

.sb-whatsapp-btn:hover { color: #fff; filter: brightness(1.08); }
.sb-whatsapp-btn i { margin-right: 8px; font-size: 1.2rem; vertical-align: -2px; }

.sb-drawer-note {
  margin: 44px 0 20px;
  text-align: center;
  font: 1.25rem/1.5 var(--font-display);
  white-space: pre-line;
  transform: rotate(-3deg);
}

/* ---------- Hero ---------- */
.sb-hero {
  position: relative;
  min-height: 680px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  padding: 100px var(--gutter) 100px;
  background: radial-gradient(ellipse at 20% 30%, #fffaf0 0, transparent 55%), var(--color-tan);
}

/* Inner pages reuse the hero: a bit shorter, with a cream wave into the page content */
.sb-hero--page { min-height: 560px; padding-bottom: 80px; }

.sb-page-title { padding: 36px var(--gutter) 0; background: var(--color-cream); }
.sb-page-title h1 { display: flex; align-items: center; gap: 14px; max-width: var(--content-max); margin: 0 auto; color: var(--color-brown); font: clamp(2rem, 4vw, 3rem) / 1.25 var(--font-display); font-weight: 400; }
.sb-page-subtitle { max-width: var(--content-max); margin: 10px auto 0; padding-left: 62px; /* boom 34 + gap 14 - pull 32 + title padding 46 */ color: var(--color-ink); font-size: 1.15rem; line-height: 1.5; }
.sb-page-title h1 .sb-title-boom:first-child { margin-right: -32px; }
.sb-page-title-text { position: relative; isolation: isolate; padding: 10px 46px 12px; }
.sb-page-title-text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(/images/subtitle-section-bg.png) no-repeat center / 100% 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 5%, #000 75%);
  mask-image: linear-gradient(to right, transparent 5%, #000 75%);
}
.sb-hero--page::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%23fbebd4' d='M0 40V22C180 0 330 38 560 22s420-30 640-6c100 11 180 12 240 4v20z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

.sb-hero-content { position: relative; top: -56px; left: 72px; z-index: 1; display: grid; justify-items: center; width: fit-content; max-width: 700px; }

.sb-brand-lockup { display: grid; justify-items: center; gap: 4px; margin-bottom: 32px; color: var(--color-brown); }
.sb-brand-name { font: clamp(2.05rem, 4.6vw, 3.8rem) var(--font-display); line-height: 1.2; }
.sb-brand-name, .sb-drawer-brand span { font-weight: 400; }
.sb-brand-sub { --rule-w: 43px; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.4em; }

/* "— DOCERIA —": a rule on each side of the word */
.sb-brand-sub,
.sb-drawer-brand small { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.sb-brand-sub::before,
.sb-brand-sub::after,
.sb-drawer-brand small::before,
.sb-drawer-brand small::after { content: ""; flex: none; width: var(--rule-w, 34px); height: 1px; background: currentColor; opacity: 0.7; }

.sb-hero h1 {
  margin: 8px 0 22px;
  font: clamp(1.7rem, 3.6vw, 2.9rem) / 1.3 var(--font-display);
  color: var(--color-brown);
  white-space: pre-line;
  text-align: center;
  transform: rotate(-10deg);
  transform-origin: center;
}
/* Tagline and description share one left edge, offset from the logo block */
.sb-hero h1,
.sb-hero-description { justify-self: start; position: relative; left: -24px; }

.sb-hero-heart { display: block; width: 30px; height: auto; margin: 8px auto 0; }

.sb-hero-description { max-width: 560px; margin: 8px 0 0; white-space: pre-line; font-size: 1.2rem; line-height: 1.6; color: var(--color-ink); }

/* The photo layer spans the whole hero, behind the text. Below 1000px it is sized by width, so the
   transparent left fade of the PNG is never cropped (a soft top fade hides any gap above it). */
.sb-hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sb-hero-image .hero-bg {
  inset: auto 0 0 auto;
  /* on wide screens keep the photo near the content area instead of the far screen edge */
  right: max(0px, calc((100vw - var(--content-max)) / 2 - 300px));
  width: 80%;
  height: auto;
  aspect-ratio: 1536 / 1024;
  background-image: url(/images/products-bg.png);
  background-repeat: no-repeat; /* at fractional sizes a repeated tile shows the photo's opaque right edge as a line on the left */
  background-size: 100% 100%;
  background-position: center;
}

/* On wide screens size the photo by the hero's height instead: it fills the hero (no gap above it)
   and can never grow past it on ultrawide screens. Only the fully transparent part of the
   image can fall off the left edge at this width. */
@media (min-width: 1000px) {
  .sb-hero-image .hero-bg {
    bottom: 15%;
    width: auto;
    height: min(80%, 36.6vw);
    aspect-ratio: 1536 / 1024;
  }
}

/* Legacy global p/a colours must not leak into dark sections */
.sb-experiences-title, .sb-strip, .sb-testimonials p, .sb-footer p, .sb-drawer p { color: inherit; }
.sb-footer a, .sb-drawer a { text-decoration: none; }

/* ---------- Sections ---------- */
.sb-experiences {
  position: relative;
  margin-top: -1px;
  padding: 70px var(--gutter) 90px;
  background: var(--color-brown);
  color: var(--color-cream);
}

.sb-experiences::before,
.sb-experiences::after,
.sb-testimonials::before,
.sb-testimonials::after,
.page-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Wavy top edge (brown shape rising into the previous section) */
.sb-experiences::before,
.sb-testimonials::before {
  top: -39px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%232c1010' d='M0 40V22C180 0 330 38 560 22s420-30 640-6c100 11 180 12 240 4v24z'/%3E%3C/svg%3E");
}

/* Wavy bottom edge (brown shape flowing into the next section) */
.sb-experiences::after,
.sb-testimonials::after {
  bottom: -39px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%232c1010' d='M0 0v14c120 14 260 24 440 12s360-30 560-14c180 14 320 10 440-4V0z'/%3E%3C/svg%3E");
}

/* Extra wavy edges for the experiences section */
.sb-experiences { --card-overhang: 340px; display: flow-root; padding-top: 25px; padding-bottom: 0; margin-bottom: calc(var(--card-overhang) + 110px); }
.sb-experiences::before,
.sb-experiences::after { height: 100px; }
.sb-experiences::before {
  top: -99px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%232c1010' d='M0 100V55C100 20 200 25 300 50S430 85 560 60S700 15 860 35S1000 80 1130 62S1300 25 1440 45V100z'/%3E%3C/svg%3E");
}
.sb-experiences::after {
  bottom: -99px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%232c1010' d='M0 0V40C90 70 210 80 330 55S480 15 600 38S780 85 900 68S1060 30 1180 42S1350 78 1440 55V0z'/%3E%3C/svg%3E");
}

.sb-section-title { margin-bottom: 40px; text-align: center; }
.sb-section-title h2 { margin: 6px 0 0; font: clamp(1.9rem, 3.6vw, 2.9rem) / 1.25 var(--font-display); color: inherit; }
.sb-section .sb-section-title h2 { color: var(--color-brown); }

.sb-experiences-title {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
  font: clamp(1.6rem, 3.4vw, 2.5rem) / 1.35 var(--font-display);
  color: var(--color-cream);
}

.sb-experiences-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.sb-experiences-title span { white-space: pre-line; }

.sb-title-boom {
  width: 34px;
  aspect-ratio: 14.4647 / 22.5841;
  height: auto;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url(/images/boom.svg) no-repeat center / contain;
  mask: url(/images/boom.svg) no-repeat center / contain;
}

.sb-title-boom-right { transform: scaleX(-1); }

.sb-experience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; z-index: 1; max-width: var(--content-max); margin: 0 auto calc(-1 * var(--card-overhang)); }

.sb-experience {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 18px;
  border-radius: 30px 30px 24px 24px;
  background: var(--color-paper);
  color: var(--color-ink);
  text-align: center;
  box-shadow: 0 14px 34px #1b0b0640;
}

.sb-experience-photo { position: relative; margin-bottom: 38px; }
.sb-experience-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px 22px 18px 18px; }

.sb-experience-icon {
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 4px solid var(--color-paper);
  border-radius: 50%;
  background: var(--color-brown);
  color: var(--color-cream);
  font-size: 1.6rem;
}

.sb-experience h3 { margin: 14px 0 10px; font: 1.9rem var(--font-display); }
.sb-experience h3 span { display: inline-block; padding: 10px 42px 12px; background: url(/images/subtitle-section-bg.png) no-repeat center / 100% 100%; }
.sb-experience p { flex: 1; margin: 0 0 20px; padding: 0 10px; line-height: 1.55; color: var(--color-ink); }
.sb-experience .sb-btn { width: 100%; color: #fff; }
.sb-experience .sb-btn:hover { color: #fff; }

.sb-strip {
  position: relative;
  margin-top: 70px;
  padding: 44px var(--gutter) 48px;
  background: var(--color-brown);
  color: var(--color-cream);
}

.sb-strip::before {
  content: "";
  position: absolute;
  top: -39px;
  left: 0;
  right: 0;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%232c1010' d='M0 40V22C180 0 330 38 560 22s420-30 640-6c100 11 180 12 240 4v24z'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
}

.sb-strip ul { display: flex; justify-content: center; max-width: var(--content-max); margin: 0 auto; padding: 0; list-style: none; }
.sb-strip li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 6px 18px; border-right: 1px solid #b78a68; font-weight: 500; line-height: 1.35; }
.sb-strip li:last-child { border-right: 0; }
.sb-strip i { font-size: 2.1rem; }

.sb-section { padding: 90px var(--gutter) 80px; }
.sb-section-tan { background: #ead3b7; }

.sb-search-bar { position: relative; z-index: 2; margin: -95px 0 35px; padding: 0 var(--gutter); }
.sb-search {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
}
.sb-search i {
  position: absolute;
  top: 50%;
  left: 26px;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--color-muted);
  pointer-events: none;
}
.sb-search input[type="search"] {
  width: 100%;
  height: 60px;
  padding: 0 26px 0 58px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font: 500 1rem var(--font-body);
  box-shadow: 0 8px 22px #2c10100f;
}
.sb-search input[type="search"]:focus { outline: none; box-shadow: 0 8px 26px #2c101033; }
.sb-search input::placeholder { color: var(--color-muted); }
.sb-search-empty { margin: 0 0 24px; text-align: center; color: var(--color-muted); }

/* Product page: one card per variant with a quantity selector */
.sb-variants-section { padding: 40px var(--gutter) 90px; background: var(--color-cream); }
.sb-variants { max-width: var(--content-max); margin: 0 auto; }
.sb-variants-section-select { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-weight: 700; color: var(--color-brown); }
.sb-variants-section-select select { height: 44px; padding: 0 16px; border: 1px solid var(--color-line); border-radius: 999px; background: #fff; color: var(--color-ink); font: 500 1rem var(--font-body); }
.sb-variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }
.sb-variant { display: grid; grid-template-columns: 40% 1fr; gap: 0; align-content: start; overflow: hidden; padding: 0; border: 1px solid #e0c9ad; border-radius: 20px; background: var(--color-paper); box-shadow: 0 12px 30px #3516080d; }
/* The photo sits flush against the card border; the card clips it to the rounded corners */
/* Out of stock: the whole card turns gray */
.sb-variant.is-out-of-stock { border-color: #d4d4d4; background: #ececec; box-shadow: none; }
.sb-variant.is-out-of-stock .sb-variant-image { filter: grayscale(1); opacity: .7; }
.sb-variant.is-out-of-stock .sb-variant-body h3,
.sb-variant.is-out-of-stock .sb-variant-body p,
.sb-variant.is-out-of-stock .sb-variant-price { color: #8a8a8a; }
.sb-variant.is-out-of-stock .sb-variant-stock { color: #6f6f6f; font-weight: 700; }
.sb-variant-image { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.sb-variant-body { display: flex; flex-direction: column; align-items: flex-start; padding: 14px 14px 10px 16px; }
.sb-variant-body h3 { margin: 0 0 8px; font: 1.35rem var(--font-display); color: var(--color-brown); }
.sb-variant-body p { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.5; color: var(--color-ink); }
.sb-variant-body p span { display: block; }
.sb-variant-body p strong { text-transform: capitalize; }
.sb-variant-price { margin-top: auto; margin-bottom: 8px; font: 700 1rem var(--font-body); color: var(--color-brown); }
.sb-variant-stock { font-size: 0.85rem; color: var(--color-muted); }
/* Full-width selector: decrease at one end, increase at the other, the quantity in between.
   A faint top and bottom line runs flush with the buttons' edges, from the center of one button to the center of the other, so it never sticks out past them. */
.sb-qty { position: relative; display: flex; align-items: center; gap: 14px; align-self: stretch; width: 100%; margin: 12px 0; }
.sb-qty::before { content: ""; position: absolute; top: 0; bottom: 0; left: 17px; right: 17px; border-top: 1px solid #e8d9c3; border-bottom: 1px solid #e8d9c3; }
.sb-qty span { position: relative; flex: 1; min-width: 24px; text-align: center; font-weight: 700; color: var(--color-brown); }
.sb-qty button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--color-brown); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sb-qty button:disabled { opacity: .4; cursor: default; }
.sb-variant-success { grid-column: 1 / -1; margin: 0; padding: 0 14px 14px; font-size: 0.9rem; font-weight: 700; text-align: center; color: #2f7d4f; }
.sb-variant-error { grid-column: 1 / -1; margin: 0; padding: 0 14px 14px 32px; font-size: 0.88rem; color: #e53e3e; }
.sb-variant-add { grid-column: 1 / -1; justify-content: center; gap: 10px; width: auto; margin: 4px 14px 14px; }
.sb-order-config { display: grid; grid-template-columns: minmax(0, 380px) 1fr; max-width: 820px; overflow: hidden; border: 1px solid #e0c9ad; border-radius: 20px; background: var(--color-paper); box-shadow: 0 12px 30px #3516080d; }
.sb-variant-grid > .sb-order-config { grid-column: 1 / -1; width: 100%; }
.sb-order-config-image { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.sb-order-config-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; }
.sb-order-config-body h3 { margin: 0; font: 1.5rem var(--font-display); color: var(--color-brown); }
.sb-order-config-field { display: flex; flex-direction: column; gap: 6px; width: 100%; font-weight: 700; color: var(--color-brown); text-transform: capitalize; }
.sb-order-config-field select { height: 44px; padding: 0 16px; border: 1px solid var(--color-line); border-radius: 999px; background: #fff; color: var(--color-ink); font: 500 1rem var(--font-body); text-transform: none; }
.sb-order-config .sb-variant-add { grid-column: auto; width: 100%; margin: 0; }
.sb-order-config .sb-variant-success, .sb-order-config .sb-variant-error { padding: 0; }
@media (max-width: 700px) { .sb-order-config { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .sb-variant-grid { grid-template-columns: 1fr; }
}

.sb-category-bar { position: relative; z-index: 1; margin: -40px 0 0; padding: 30px var(--gutter) 0; background: var(--color-brown); }
.sb-category-bar::before,
.sb-category-bar::after { content: ""; position: absolute; left: 0; width: 100%; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.sb-category-bar::before {
  bottom: 100%;
  height: 70px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%232c1010' d='M0 100V55C100 20 200 25 300 50S430 85 560 60S700 15 860 35S1000 80 1130 62S1300 25 1440 45V100z'/%3E%3C/svg%3E");
}
.sb-category-bar::after {
  top: 100%;
  height: 70px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%232c1010' d='M0 0V40C90 70 210 80 330 55S480 15 600 38S780 85 900 68S1060 30 1180 42S1350 78 1440 55V0z'/%3E%3C/svg%3E");
}
.sb-category-bar + .sb-page-title { padding-top: 90px; }
.sb-category-bar ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 30px; max-width: var(--content-max); margin: 0 auto; padding: 0; list-style: none; }
.sb-category-bar li { margin: 0; }
.sb-category-bar button { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 90px; padding: 0; border: 0; background: none; color: var(--color-cream); font: 500 1rem/1.2 var(--font-body); cursor: pointer; }
.sb-category-circle { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--color-cream); box-shadow: 0 0 0 4px transparent; transition: box-shadow .2s, transform .2s; }
.sb-category-icon { display: block; width: 46px; height: 46px; background-color: var(--color-brown); mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; transition: background-color .2s; }
.sb-category-bar button:hover .sb-category-circle { transform: translateY(-3px); }
.sb-category-bar button.is-active .sb-category-circle { background: var(--color-brown); box-shadow: 0 0 0 4px #d9a98a; }
.sb-category-bar button.is-active .sb-category-icon { background-color: #fff; }
.sb-category-name { padding-bottom: 4px; border-bottom: 3px solid transparent; }
.sb-category-bar button.is-active .sb-category-name { font-weight: 700; border-bottom-color: var(--color-cream); }
@media (max-width: 800px) {
  /* Leave room below the hero text for the search pill that overlaps the hero bottom */
  .sb-hero.sb-hero--page { padding-bottom: 140px; }
  .sb-page-title h1 { justify-content: center; text-align: center; }
  .sb-page-subtitle { padding-left: 0; text-align: center; }
  .sb-category-bar { padding-top: 62px; padding-bottom: 14px; }
  .sb-category-bar ul { gap: 18px 14px; }
  .sb-category-bar button { width: 76px; font-size: .9rem; }
  .sb-category-circle { width: 64px; height: 64px; }
  .sb-category-icon { width: 36px; height: 36px; }
}

.sb-card-grid { display: grid; gap: 24px; max-width: var(--content-max); margin: 0 auto; }
.sb-card-grid-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.sb-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e0c9ad;
  border-radius: 24px;
  background: var(--color-paper);
  box-shadow: 0 12px 30px #3516080d;
}

.sb-card > img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sb-card-body { display: flex; flex: 1; flex-direction: column; padding: 22px; text-align: center; }
.sb-card-body h3 { margin: 0 0 10px; font: 1.35rem var(--font-display); }
.sb-card-body p { margin: 0 0 18px; font-size: 0.92rem; line-height: 1.6; color: var(--color-ink); }
.sb-product .sb-card-body { text-align: left; }
.sb-product .sb-card-body p { flex: 1; }
.sb-product .sb-btn { width: 100%; }
.sb-price { margin-bottom: 8px; font: 700 1rem var(--font-body); color: var(--color-brown); }
.sb-price small { margin-right: 6px; font: 700 1rem var(--font-body); color: var(--color-brown); }
.sb-price sup { margin-right: 3px; font-size: inherit; vertical-align: baseline; }

.sb-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 1;
  box-shadow: 0 12px 30px #3516081a;
}

.sb-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.sb-tile:hover img { transform: scale(1.06); }

.sb-tile h3 {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 36px 16px 16px;
  background: linear-gradient(to top, #2c1010e6, transparent);
  color: #fff;
  font: 1.15rem var(--font-display);
  text-align: center;
}

.sb-about-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 55px var(--gutter);
  background: #ead3b7;
}

.sb-about-strip .sb-eyebrow { font: clamp(1.7rem, 3vw, 2.4rem) var(--font-display); letter-spacing: 0; text-transform: none; color: var(--color-brown); }
.sb-about-strip p:not(.sb-eyebrow) { max-width: 640px; margin: 10px 0 0; line-height: 1.7; }

/* ---------- Testimonials ---------- */
.sb-testimonials {
  position: relative;
  margin: 40px 0;
  padding: 80px var(--gutter);
  background: var(--color-brown);
  color: var(--color-cream);
}

.sb-testimonials .sb-section-title h2 { color: var(--color-cream); }
.sb-testimonials-inner { max-width: var(--content-max); margin: 0 auto; }

.sb-testimonials .testimonial-block .inner-box {
  height: 100%;
  padding: 28px 24px;
  border: 1px solid #b78a6855;
  border-radius: 22px;
  background: #ffffff10;
  text-align: center;
}

.sb-testimonial-photo { width: 76px; height: 76px; margin-bottom: 14px; border-radius: 50%; object-fit: cover; border: 3px solid var(--color-tan); }
.sb-testimonials .testimonial-block .text { color: var(--color-cream); line-height: 1.7; font-size: 0.95rem; }
.sb-testimonials .testimonial-block .name { margin-top: 14px; font: 1.1rem var(--font-display); color: #e7b98d; }

.sb-testimonials .carousel-btn {
  border: 0;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-brown);
}

.sb-testimonials .carousel-btn:hover:not(:disabled) { background: #fff; color: var(--color-brown-deep); }

/* ---------- Footer ---------- */
.sb-footer {
  position: relative;
  background: var(--color-brown-deep);
  color: var(--color-cream);
  padding: 56px var(--gutter) 24px;
  text-align: center;
}

/* Wavy top edge, same wave as the category bar. It is a mask filled with the footer's own background, so it follows `sectionColor` too */
.sb-footer::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 70px;
  background-color: inherit;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V55C100 20 200 25 300 50S430 85 560 60S700 15 860 35S1000 80 1130 62S1300 25 1440 45V100z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V55C100 20 200 25 300 50S430 85 560 60S700 15 860 35S1000 80 1130 62S1300 25 1440 45V100z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.sb-footer-inner { max-width: var(--content-max); margin: 0 auto; }

/* Checkout call to action at the top of the footer: outlined pill with the boom.svg burst on both sides (mirrored on the right) */
.sb-footer.sb-footer--with-action { padding-top: 28px; }
.sb-footer-action { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 40px; padding-bottom: 36px; border-bottom: 1px solid #78513a; }
.sb-finish-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 340px; padding: 22px 60px; border: 3px solid var(--color-cream); border-radius: 999px; background: transparent; color: var(--color-cream); font: 700 1.35rem var(--font-body); cursor: pointer; transition: background-color .2s, color .2s; }
.sb-finish-btn:hover:not(:disabled) { background: var(--color-cream); color: var(--color-brown-deep); }
.sb-finish-btn:disabled { opacity: .6; cursor: default; }
.sb-finish-btn i { font-size: 1.6rem; }
.sb-finish-btn::before,
.sb-finish-btn::after { content: ""; position: absolute; top: 50%; width: 30px; height: 46px; background-color: var(--color-cream); mask: url("/images/boom.svg") center / contain no-repeat; -webkit-mask: url("/images/boom.svg") center / contain no-repeat; }
.sb-finish-btn::before { right: calc(100% + 20px); transform: translateY(-50%); }
.sb-finish-btn::after { left: calc(100% + 20px); transform: translateY(-50%) scaleX(-1); }
.sb-finish-error { margin: 0; padding: 0; list-style: none; font-size: .9rem; color: #ffb4a8; }
@media (max-width: 800px) {
  .sb-finish-btn { min-width: min(340px, 100%); padding: 20px 28px; font-size: 1.2rem; }
  .sb-finish-btn::before,
  .sb-finish-btn::after { display: none; }
}
.sb-footer-logo { filter: brightness(0) invert(0.92) sepia(0.2); }
.sb-footer-thanks { margin: 14px 0 30px; font: clamp(1.4rem, 3vw, 2rem) var(--font-display); }
.sb-footer-tagline { margin: 0 0 30px; font-size: 0.9rem; opacity: 0.8; }

.sb-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 48px; margin: 0; padding: 0; list-style: none; }
.sb-footer-links a { display: flex; align-items: center; gap: 12px; color: var(--color-cream); text-align: left; }
.sb-footer-links a:hover { color: #fff; }
.sb-footer-links b { display: block; font-size: 0.9rem; }
.sb-footer-links small { display: block; font-size: 0.78rem; opacity: 0.75; }

.sb-footer-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-cream);
  color: var(--color-brown);
  font-size: 1.3rem;
}

.sb-footer-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid #78513a; font-size: 0.8rem; opacity: 0.75; }
.sb-footer-bottom p { margin: 4px 0; }
.sb-footer-bottom a { color: inherit; text-decoration: underline; }

/* ---------- Legacy overrides (inner pages) ---------- */
.auto-container { max-width: var(--content-max); }

.page-title {
  position: relative;
  padding: 140px 0 80px;
  background: radial-gradient(ellipse at 20% 30%, #fffaf0 0, transparent 55%), var(--color-tan);
  text-align: center;
}



.page-title::after {
  bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%23fbebd4' d='M0 40V22C180 0 330 38 560 22s420-30 640-6c100 11 180 12 240 4v20z'/%3E%3C/svg%3E");
}

.page-title .divider {
  height: 70px;
  margin-bottom: 8px;
  background-image: url(../images/logo-no-bg.svg);
  background-position: center;
}

.page-title h1 {
  color: var(--color-brown);
  font: clamp(2rem, 4vw, 3rem) / 1.25 var(--font-display);
  font-weight: 400;
}

.pricing-section { padding-top: 40px !important; padding-bottom: 80px; background: var(--color-cream); }

.theme-btn,
.theme-btn.btn-style-one,
.theme-btn.btn-style-two {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brown);
  color: #fff;
  font: 700 0.9rem var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.theme-btn::before,
.theme-btn::after,
.theme-btn span::before,
.theme-btn span::after { display: none; }

.theme-btn:hover { background: var(--color-brown-deep); color: #fff; transform: translateY(-2px); }

.contact-card {
  border: 1px solid var(--color-line);
  border-radius: 22px;
  background: var(--color-paper);
  box-shadow: 0 8px 22px #4a24120a;
}

.contact-card a:hover { color: var(--color-brown) !important; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
  border: 1px solid #e2c6a8;
  border-radius: 10px;
  background: #fffdf9;
  color: var(--color-ink);
  font-family: var(--font-body);
}

input:focus,
select:focus,
textarea:focus { border-color: #8c5734; outline: none; box-shadow: 0 0 0 3px #8c57341a; }

.scroll-to-top { color: var(--color-brown); }
.preloader { background-color: var(--color-cream); }

/* Corner shape behind the menu button (hero and inner-page banners) */
.sb-hero::before,
.page-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: clamp(136px, 15.2vw, 240px);
  height: auto;
  background-color: transparent;
  aspect-ratio: 111.7567 / 105.924;
  background: url(/images/top-left.svg) no-repeat top left / 100% 100%;
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
  /* The content wrapper dissolves so the photo can sit between the tagline and the description */
  .sb-hero { display: flex; flex-direction: column; align-items: center; min-height: 0; padding: 100px 24px 76px; }
  .sb-hero-content { display: contents; }
  .sb-brand-lockup { order: 1; margin-bottom: 20px; }
  .sb-hero h1 { order: 3; left: 0; margin: 0 0 8px; }
  .sb-hero-image { order: 2; position: relative; inset: auto; width: calc(100% + 48px); margin: 0 -24px; }
  .sb-hero-image .hero-bg { position: relative; inset: auto; width: 100%; }
  .sb-hero-description { order: 4; left: 0; margin-top: 4px; text-align: center; }
  .sb-hero::before,
  .page-title::before { width: clamp(190px, 50vw, 300px); }

  .sb-experiences { padding: 25px 18px 0; }
  .sb-experiences::before,
  .sb-experiences::after { height: 40px; }
  .sb-experiences::before { top: -39px; }
  .sb-experiences::after { bottom: -39px; }
  .sb-experiences-title span { white-space: normal; }
  .sb-hero-description { white-space: normal; }
  .sb-strip { padding-bottom: 20px; }
  .sb-footer { padding-top: 28px; }
  .sb-footer::before { height: 40px; }
  .sb-footer-links { display: grid; grid-template-columns: max-content; justify-content: center; gap: 18px; }
  .sb-experience-grid { grid-template-columns: 1fr; max-width: 420px; }
  .sb-strip ul { flex-direction: column; gap: 14px; align-items: stretch; }
  .sb-strip li { justify-content: flex-start; border-right: 0; }

  .sb-section { padding: 70px 18px 60px; }
  .sb-card-grid-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
  .sb-about-strip { flex-direction: column; padding: 45px 24px; text-align: center; }
  .sb-testimonials { padding: 70px 18px; }

  .page-title { padding: 110px 0 60px; }
}

@media (max-width: 420px) {
  .sb-card-grid-4 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Pre-order page: the form on the left, the order summary on the right */
.sb-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; max-width: var(--content-max); margin: 0 auto; }
.sb-checkout-aside { position: sticky; top: 24px; padding: 24px; border: 1px solid #e0c9ad; border-radius: 20px; background: var(--color-paper); box-shadow: 0 12px 30px #3516080d; }
@media (max-width: 900px) {
  .sb-checkout { grid-template-columns: 1fr; }
  .sb-checkout-aside { position: static; }
}

.sb-back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-brown); text-decoration: none; }
.sb-panel { margin-bottom: 24px; padding: 22px; border: 1px solid #eadcc6; border-radius: 20px; background: var(--color-paper); box-shadow: 0 12px 30px #3516080d; }
.sb-panel-title { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font: 700 1.15rem var(--font-body); color: var(--color-brown); }
.sb-panel-title .fa { font-size: 1.3rem; }
.sb-option-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 8px; }
.sb-option { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border: 1px solid #cdb89b; border-radius: 12px; background: transparent; color: var(--color-brown); font: 600 1rem var(--font-body); cursor: pointer; }
.sb-option .fa { font-size: 1.3rem; }
.sb-option.is-selected { border-color: var(--color-brown); background: var(--color-brown); color: #fff; box-shadow: 0 4px 0 #1a0808; }
.sb-option.is-selected::after { content: "\f00c"; position: absolute; top: -8px; right: -8px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e9b872; color: var(--color-brown); font: 900 11px 'Font Awesome 5 Free'; }
.sb-finish { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 16px 32px; border: 0; border-radius: 12px; background: var(--color-brown); color: #fff; font: 700 1.05rem var(--font-body); cursor: pointer; }
.sb-finish:disabled { opacity: .6; cursor: not-allowed; }

.sb-page-title-above { max-width: var(--content-max); margin: 0 auto 12px; }
.sb-page-title-plain h1 .fa { flex: 0 0 48px; font-size: 2.2rem; text-align: center; }
.sb-page-title-plain .sb-page-title-text { padding: 0; }
.sb-page-title-plain .sb-page-title-text::before { content: none; }
.sb-page-title-plain h1 { gap: 14px; }
.sb-page-title-above a.sb-back-link, .sb-page-title-above a.sb-back-link:visited { color: var(--color-brown); }

/* "Seu pedido" card of the pre-order page */
.sb-checkout-aside { padding: 0; border: 0; background: none; box-shadow: none; }
.sb-summary { padding: 22px; border: 1px solid #eadcc6; border-radius: 20px; background: var(--color-paper); box-shadow: 0 12px 30px #3516080d; }
.sb-summary-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #eadcc6; }
.sb-summary-header h3 { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 1.2rem var(--font-body); color: var(--color-brown); }
.sb-summary-header h3 .fa { font-size: 1.4rem; }
.sb-summary-header a.sb-summary-edit, .sb-summary-header a.sb-summary-edit:visited { display: inline-flex; align-items: center; gap: 8px; color: var(--color-brown); font-weight: 600; text-decoration: none; }
.sb-summary-items { margin: 0; padding: 0; list-style: none; }
.sb-summary-items li { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid #eadcc6; }
.sb-summary-items img, .sb-summary-noimage { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; }
.sb-summary-noimage { display: flex; align-items: center; justify-content: center; background: var(--color-cream); color: var(--color-brown); font-size: 1.6rem; }
.sb-summary-items li div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-summary-items strong { font-weight: 600; color: var(--color-ink); }
.sb-summary-items small { color: var(--color-muted); text-transform: capitalize; }
.sb-summary-items small:empty { display: none; }
.sb-summary-items span { color: var(--color-muted); font-size: .95rem; }
.sb-summary-items b { align-self: end; color: var(--color-brown); white-space: nowrap; }
.sb-summary-totals { margin: 0; padding: 14px 0 0; }
.sb-summary-totals div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; color: var(--color-ink); }
.sb-summary-totals dt, .sb-summary-totals dd { margin: 0; font-weight: 400; }
.sb-summary-totals .sb-summary-total { margin-top: 8px; padding-top: 14px; border-top: 1px solid #eadcc6; color: var(--color-brown); }
.sb-summary-total dt, .sb-summary-total dd { font-size: 1.3rem; font-weight: 700; }
.sb-summary-status { margin-top: 18px; padding: 18px; border: 1px solid #eadcc6; border-radius: 16px; text-align: center; }
.sb-summary-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #f9d9a8; color: var(--color-brown); font-weight: 600; font-size: .95rem; }
.sb-summary-status p { margin: 14px 0 10px; color: var(--color-ink); font-size: .95rem; line-height: 1.5; }
.sb-summary-status > .fa { color: var(--color-brown); }
.sb-finish .sb-title-boom { width: 22px; }
.sb-option-stacked { flex-direction: column; gap: 8px; }

/* Shopping cart page */
.sb-cart-panel-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; color: var(--color-muted); font-size: .95rem; }
.sb-cart-items li { grid-template-columns: 80px 1fr auto auto; }
.sb-cart-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.sb-cart-remove { align-self: center; padding: 8px; border: 0; background: none; color: var(--color-muted); font-size: 1rem; cursor: pointer; }
.sb-cart-remove:hover { color: #e53e3e; }
.sb-cart-empty { max-width: 560px; margin: 0 auto; padding: 40px 22px; text-align: center; }
.sb-cart-empty > .fa { font-size: 2.6rem; color: #e0c49c; }
.sb-cart-empty p { margin: 16px 0 24px; color: var(--color-ink); font-size: 1.05rem; }

/* My orders pages */
.sb-status { display: inline-block; padding: 7px 16px; border-radius: 999px; color: #fff; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.sb-order-list { display: grid; gap: 18px; max-width: var(--content-max); margin: 0 auto; }
.sb-order-list .sb-panel { margin-bottom: 0; }
.sb-order-card { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 24px; }
.sb-order-card-main { display: flex; flex-direction: column; gap: 4px; }
.sb-order-card-main strong { font-size: 1.15rem; color: var(--color-brown); }
.sb-order-card-main small { color: var(--color-muted); }
.sb-order-card-type { display: inline-flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: .9rem; font-weight: 600; }
.sb-order-card-total { min-width: 110px; text-align: right; font-size: 1.15rem; color: var(--color-brown); }
.sb-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; color: var(--color-muted); }
.sb-pagination button { padding: 10px 20px; border: 1px solid #cdb89b; border-radius: 12px; background: transparent; color: var(--color-brown); font: 600 .95rem var(--font-body); cursor: pointer; }
.sb-pagination button:disabled { opacity: .5; cursor: not-allowed; }
.sb-order-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.sb-order-head div { display: flex; flex-direction: column; gap: 2px; }
.sb-order-head div span { color: var(--color-muted); font-size: .9rem; }
.sb-order-head strong { font-size: 1.5rem; color: var(--color-brown); }
.sb-order-line { margin: 0 0 4px; color: var(--color-ink); font-weight: 600; }
.sb-order-muted { margin: 0; color: var(--color-muted); font-size: .95rem; }
.sb-pix { text-align: center; }
.sb-pix .sb-panel-title { justify-content: flex-start; }
.sb-pix > img { width: 280px; max-width: 100%; margin-bottom: 16px; }
.sb-pix-code { text-align: left; }
.sb-pix-code > span { display: block; margin-bottom: 6px; color: var(--color-muted); font-size: .9rem; }
.sb-pix-code div { display: flex; align-items: center; gap: 10px; }
.sb-pix-code code { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #e0c9ad; border-radius: 12px; font-size: .8rem; word-break: break-all; color: var(--color-ink); }
.sb-pix-copy { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--color-brown); color: #fff; font: 600 .9rem var(--font-body); cursor: pointer; }
.sb-cancel { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; max-width: var(--content-max); margin: 24px auto 0; }
.sb-cancel ul { margin: 0; padding-left: 18px; color: #e53e3e; font-size: .9rem; }
.sb-cancel button { padding: 14px 32px; border: 1px solid #c0392b; border-radius: 12px; background: transparent; color: #c0392b; font: 700 1rem var(--font-body); cursor: pointer; }
.sb-cancel button:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 800px) {
  .sb-order-card { grid-template-columns: 1fr auto; gap: 14px; }
  .sb-order-card .sb-btn { grid-column: 1 / -1; justify-content: center; }
}

.sb-placed { max-width: var(--content-max); margin: 0 auto; }
a.sb-next-order, a.sb-next-order:visited { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--content-max); margin: 0 auto 24px; padding: 16px 22px; border: 1px solid #e9b872; border-radius: 16px; background: #f9d9a8; color: var(--color-brown); font-weight: 700; text-decoration: none; }

/* Auth pages (register, verify-email) */
.sb-auth-panel { max-width: var(--content-max); margin: 0 auto; }
.sb-auth-success { text-align: center; }
.sb-auth-success > .fa { font-size: 3rem; color: #2f7d4f; }
.sb-auth-success h3 { margin: 14px 0 8px; font: 700 1.4rem var(--font-body); color: var(--color-brown); }
.sb-auth-success p { margin: 0 0 24px; color: var(--color-ink); }
a.sb-finish, a.sb-finish:visited { color: #fff; text-decoration: none; }
.sb-code-input { display: flex; justify-content: center; gap: 10px; margin: 0 0 24px; }
.sb-code-input input { width: 52px; height: 62px; padding: 0; border: 1.5px solid var(--color-line); border-radius: 14px; background: var(--color-paper); color: var(--color-brown); font: 700 1.7rem var(--font-body); text-align: center; caret-color: transparent; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sb-code-input input:focus { outline: none; border-color: var(--color-brown-soft); box-shadow: 0 0 0 4px rgba(96, 53, 30, .15); transform: translateY(-2px); }
.sb-code-input input.is-filled { border-color: var(--color-brown-soft); }
.sb-code-input input:disabled { opacity: .6; }
@media (max-width: 420px) {
  .sb-code-input { gap: 6px; }
  .sb-code-input input { width: 42px; height: 52px; font-size: 1.4rem; border-radius: 12px; }
}