/* Mangá Boom: visual "papel e nanquim" */
:root {
  --paper: #F4EEE2;
  --paper-2: #EDE5D5;
  --ink: #111111;
  --accent: #E4002B;
  --accent-dark: #B3122E;
  --muted: #3d3d3d;
  --muted-2: #4a4a4a;
  --white: #ffffff;
  --line-dark: #4a4a4a;
  --font-display: 'Dela Gothic One', sans-serif;
  --font-body: 'Zen Kaku Gothic New', sans-serif;
}

/* Tarefa 111 (29/10/2026): fontes hospedadas no proprio site (antes: CSS do Google Fonts
   com 555 KB no caminho da primeira pintura). Arquivos recortados de google/fonts (OFL). */
@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dela-400-latin-ext.v1.woff2') format('woff2');
  unicode-range: U+0100-0107,U+010A-0113,U+0116-011B,U+011E-0123,U+0126-012B,U+012E-0131,U+0136-0137,U+0139-013E,U+0141-0148,U+014A-014D,U+0150-015B,U+015E-016B,U+016E-017E,U+0192,U+01A0-01A1,U+01AF-01B0,U+01CD-01DC,U+0218-021B,U+0262,U+026A,U+0280,U+028F,U+0299,U+029C,U+029F,U+02C7,U+02DD,U+0304,U+0308,U+1D00,U+1D04-1D05,U+1D07,U+1D0A-1D0B,U+1D0F,U+1D18,U+1D1B-1D1C,U+1D20-1D22,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+2020;
}
@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dela-400-latin.v1.woff2') format('woff2');
  unicode-range: U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-200D,U+2010,U+2013-2015,U+2018-201A,U+201C-201E,U+2020-2022,U+2025-2026,U+202F-2034,U+2039-203D,U+2042,U+2044,U+2047-2049,U+2051,U+205F,U+20AC,U+2122,U+2190-2193,U+2197,U+2212,U+2215,U+2264-2265,U+25CF,U+2605,U+FFFD;
}
@font-face {
  font-family: 'Dela Gothic One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dela-400-jp.v1.woff2') format('woff2');
  unicode-range: U+3042,U+3046,U+304C,U+304F,U+3066-3068,U+308A,U+308C,U+3093,U+30A4,U+30AC-30AD,U+30AF,U+30B3-30B4,U+30B7-30B8,U+30BB,U+30C3,U+30C9,U+30D6,U+30DE,U+30E0,U+30E7,U+30E9,U+30EB-30EC,U+30EF,U+30F3,U+30FB-30FC,U+4E2D,U+4EBA,U+4F5C,U+54C1,U+5730,U+672C,U+68DA,U+691C,U+6C17,U+706B,U+7B2C,U+7D22,U+8A71,U+8AAD,U+98A8;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/zen-kaku-400-latin-ext.v1.woff2') format('woff2');
  unicode-range: U+0131,U+0152-0153,U+0174-0178,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF3;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/zen-kaku-400-latin.v1.woff2') format('woff2');
  unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+0308,U+2010,U+2013-2014,U+2016,U+2018-201A,U+201C-201E,U+2022,U+2025-2026,U+2030,U+2039-203B,U+2044,U+20AC,U+2190-2193,U+2212,U+2215,U+25CF,U+2605;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/zen-kaku-400-jp.v1.woff2') format('woff2');
  unicode-range: U+3042,U+3046,U+304C,U+304F,U+3066-3068,U+308A,U+308C,U+3093,U+30A4,U+30AC-30AD,U+30AF,U+30B3-30B4,U+30B7-30B8,U+30BB,U+30C3,U+30C9,U+30D6,U+30DE,U+30E0,U+30E7,U+30E9,U+30EB-30EC,U+30EF,U+30F3,U+30FB-30FC,U+4E2D,U+4EBA,U+4F5C,U+54C1,U+5730,U+672C,U+68DA,U+691C,U+6C17,U+706B,U+7B2C,U+7D22,U+8A71,U+8AAD,U+98A8;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/zen-kaku-500-latin-ext.v1.woff2') format('woff2');
  unicode-range: U+0131,U+0152-0153,U+0174-0178,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF3;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/zen-kaku-500-latin.v1.woff2') format('woff2');
  unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+0308,U+2010,U+2013-2014,U+2016,U+2018-201A,U+201C-201E,U+2022,U+2025-2026,U+2030,U+2039-203B,U+2044,U+20AC,U+2190-2193,U+2212,U+2215,U+25CF,U+2605;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/zen-kaku-500-jp.v1.woff2') format('woff2');
  unicode-range: U+3042,U+3046,U+304C,U+304F,U+3066-3068,U+308A,U+308C,U+3093,U+30A4,U+30AC-30AD,U+30AF,U+30B3-30B4,U+30B7-30B8,U+30BB,U+30C3,U+30C9,U+30D6,U+30DE,U+30E0,U+30E7,U+30E9,U+30EB-30EC,U+30EF,U+30F3,U+30FB-30FC,U+4E2D,U+4EBA,U+4F5C,U+54C1,U+5730,U+672C,U+68DA,U+691C,U+6C17,U+706B,U+7B2C,U+7D22,U+8A71,U+8AAD,U+98A8;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/zen-kaku-700-latin-ext.v1.woff2') format('woff2');
  unicode-range: U+0131,U+0152-0153,U+0174-0178,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF3;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/zen-kaku-700-latin.v1.woff2') format('woff2');
  unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+0308,U+2010,U+2013-2014,U+2016,U+2018-201A,U+201C-201E,U+2022,U+2025-2026,U+2030,U+2039-203B,U+2044,U+20AC,U+2190-2193,U+2212,U+2215,U+25CF,U+2605;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/zen-kaku-700-jp.v1.woff2') format('woff2');
  unicode-range: U+3042,U+3046,U+304C,U+304F,U+3066-3068,U+308A,U+308C,U+3093,U+30A4,U+30AC-30AD,U+30AF,U+30B3-30B4,U+30B7-30B8,U+30BB,U+30C3,U+30C9,U+30D6,U+30DE,U+30E0,U+30E7,U+30E9,U+30EB-30EC,U+30EF,U+30F3,U+30FB-30FC,U+4E2D,U+4EBA,U+4F5C,U+54C1,U+5730,U+672C,U+68DA,U+691C,U+6C17,U+706B,U+7B2C,U+7D22,U+8A71,U+8AAD,U+98A8;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/zen-kaku-900-latin-ext.v1.woff2') format('woff2');
  unicode-range: U+0131,U+0152-0153,U+0174-0178,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF3;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/zen-kaku-900-latin.v1.woff2') format('woff2');
  unicode-range: U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+0308,U+2010,U+2013-2014,U+2016,U+2018-201A,U+201C-201E,U+2022,U+2025-2026,U+2030,U+2039-203B,U+2044,U+20AC,U+2190-2193,U+2212,U+2215,U+25CF,U+2605;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/zen-kaku-900-jp.v1.woff2') format('woff2');
  unicode-range: U+3042,U+3046,U+304C,U+304F,U+3066-3068,U+308A,U+308C,U+3093,U+30A4,U+30AC-30AD,U+30AF,U+30B3-30B4,U+30B7-30B8,U+30BB,U+30C3,U+30C9,U+30D6,U+30DE,U+30E0,U+30E7,U+30E9,U+30EB-30EC,U+30EF,U+30F3,U+30FB-30FC,U+4E2D,U+4EBA,U+4F5C,U+54C1,U+5730,U+672C,U+68DA,U+691C,U+6C17,U+706B,U+7B2C,U+7D22,U+8A71,U+8AAD,U+98A8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--ink); }
a:hover { color: var(--accent-dark); }
h1, h2, h3, p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.display, .disp { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Texturas de mangá */
.halftone { background-image: radial-gradient(rgba(17,17,17,.16) 1.1px, transparent 1.6px); background-size: 9px 9px; }
.halftone-light { background-image: radial-gradient(rgba(255,255,255,.13) 1.1px, transparent 1.6px); background-size: 9px 9px; }
.speed-ink { background-image: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255,255,255,.16) 0deg 2deg, transparent 2deg 11deg); }

/* Animações */
@keyframes mbPop { 0% { transform: scale(.3) rotate(-20deg); opacity: 0 } 70% { transform: scale(1.15) rotate(-6deg); opacity: 1 } 100% { transform: scale(1) rotate(-8deg); opacity: 1 } }
@keyframes mbBlink { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes mbBob { 0%, 100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-8px) rotate(2deg) } }
@keyframes mbTicker { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.pop { animation: mbPop .55s cubic-bezier(.2,1.5,.4,1) .3s both; }
.live-dot { animation: mbBlink 1.6s ease-in-out infinite; }
.bob { animation: mbBob 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pop, .live-dot, .bob, .ticker-track { animation: none !important; }
  .card, .btn { transition: none !important; }
}

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 2.5px solid var(--ink); border-radius: 4px;
  font-weight: 900; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  background: var(--white); color: var(--ink);
}
.btn:hover { transform: translate(-2px, -2px); color: inherit; }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { color: var(--white); }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { color: var(--white); }
.btn-lg { min-height: 52px; padding: 0 20px; font-size: 16px; border-width: 3px; box-shadow: 5px 5px 0 var(--ink); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: var(--white); font-weight: 700; font-size: 14px; }
.btn-ghost-light:hover { color: var(--white); }
.btn svg { flex: 0 0 auto; }

/* Topo */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 68px;
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
  display: flex;
  align-items: center;
}
.site-header .wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); flex: 0 0 auto; }
.logo:hover { color: var(--ink); }
.logo-words { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.logo-words .big { font-size: 22px; line-height: 1; white-space: nowrap; }
.logo-words .ja { font-size: 11px; letter-spacing: .2em; margin-top: 4px; }
.logo svg { display: block; transform: rotate(-6deg); }
.main-nav {
  margin-left: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.main-nav a { text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; flex: 0 0 auto; }
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 900;
  font-size: 12px;
  background: var(--white);
  white-space: nowrap;
  flex: 0 0 auto;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; flex: 0 0 auto; }
.btn-header-cta {
  min-height: 38px;
  padding: 0 14px;
  font-size: 14px;
  border-width: 2px;
  white-space: nowrap;
  gap: 6px;
}

/* Banner: imagem inteira de fundo, com papel desfocado só atrás do texto */
.hero { position: relative; overflow: hidden; border-bottom: 3px solid var(--ink); background: var(--paper); min-height: clamp(480px, 40vw, 640px); display: flex; align-items: center; }
.hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero-scrim {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(max(24px, (100vw - 1240px) / 2 + 24px) + 660px);
  -webkit-backdrop-filter: blur(9px) saturate(.9); backdrop-filter: blur(9px) saturate(.9);
  background: linear-gradient(90deg, rgba(244,238,226,.95) 0%, rgba(244,238,226,.9) 62%, rgba(244,238,226,.55) 82%, rgba(244,238,226,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 70%, transparent 100%);
}
.hero-inner { position: relative; width: 100%; padding-top: 48px; padding-bottom: 52px; }
.hero-copy { max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.hero-kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip-ink { background: var(--ink); color: var(--white); padding: 5px 10px; font-size: 13px; letter-spacing: .12em; }
.chip-paper { font-weight: 900; font-size: 14px; background: var(--white); border: 2px solid var(--ink); padding: 3px 10px; }
.hero h1 { font-size: clamp(40px, 4.8vw, 72px); line-height: 1.04; }
.boom-word { color: var(--accent); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.hero-text { font-size: 18px; font-weight: 700; max-width: 26em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { font-size: 14px; color: var(--muted); font-weight: 500; }
@media (max-width: 1439px) { .hero-img { object-position: 35% center; } }
@media (max-width: 1100px) {
  .hero {
    min-height: 480px;
    display: flex !important;
    align-items: flex-end !important;
    padding-bottom: 32px !important;
    position: relative !important;
  }
  .hero-inner {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .hero-copy {
    max-width: 640px !important;
    gap: 12px !important;
  }
  .hero-img {
    object-position: center 15% !important;
  }
  .hero-scrim {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(244, 238, 226, 0.75) 65%, var(--paper) 85%, var(--paper) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  .hero h1 {
    text-shadow:
      0 0 14px var(--paper),
      0 0 8px var(--paper),
      0 0 4px var(--paper),
      2px 2px 0 var(--paper),
      -2px -2px 0 var(--paper),
      2px -2px 0 var(--paper),
      -2px 2px 0 var(--paper) !important;
  }
  .hero-text {
    text-shadow:
      0 0 10px var(--paper),
      0 0 6px var(--paper),
      1px 1px 0 var(--paper),
      -1px -1px 0 var(--paper) !important;
  }
}

/* Oferta do dia + mascote */
.spotlight { padding-top: 40px; padding-bottom: 56px; scroll-margin-top: 72px; }
.spotlight-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.boom-panel {
  flex: 1 1 360px; min-width: 0; position: relative; overflow: hidden; min-height: 290px;
  background-color: var(--paper); border: 4px solid var(--ink);
  display: flex; align-items: flex-end; padding: 0;
}
.boom-panel .boom-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.boom-panel .mascot {
  position: absolute;
  bottom: -14px;
  left: 7%;
  height: 76%;
  width: auto;
  max-width: none;
  display: block;
  z-index: 1;
}
.bubble-wrap {
  position: absolute;
  top: 8%;
  left: 36%;
  right: auto;
  width: max-content;
  max-width: none;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}
.manga-bubble {
  position: relative;
  display: inline-block;
  padding: 18px 30px 42px 30px;
}
.manga-bubble-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;
}
.manga-bubble-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.manga-bubble-content .bubble-kicker {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  line-height: 1.1;
}
.manga-bubble-content .bubble-main.display {
  font-size: 17.5px;
  line-height: 1.08;
  color: var(--accent);
  white-space: nowrap;
}
.bubble {
  position: relative;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 16px;
  padding: 10px 16px;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.bubble-two-lines {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.bubble-kicker {
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  line-height: 1.15;
}
.bubble-main {
  display: block;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
}
.bubble-main.display {
  font-size: 21px;
  line-height: 1.05;
  color: var(--accent);
  white-space: nowrap;
}
.bubble-tail {
  position: absolute;
  bottom: -18px;
  left: 18px;
  width: 28px;
  height: 20px;
  display: block;
  pointer-events: none;
}
.boom-caption { position: absolute; right: 8px; bottom: 8px; background: var(--ink); color: var(--white); font-size: 11px; font-weight: 700; padding: 2px 8px; z-index: 3; }

.deal-panel { flex: 1 1 480px; min-width: 0; position: relative; background: var(--white); border: 4px solid var(--ink); display: flex; flex-direction: column; }
.deal-head { background: var(--ink); color: var(--white); display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; gap: 12px; flex-wrap: wrap; }
.deal-head .display { font-size: 15px; }
.deal-head .when { font-size: 13px; color: #d6d6d6; }
.deal-body { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; align-items: center; flex: 1 1 auto; }
.deal-cover { flex: 0 0 150px; height: 210px; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink); background-color: #E8E2D4; }
.deal-cover img { max-width: 130px; max-height: 190px; object-fit: contain; box-shadow: 4px 4px 0 rgba(0,0,0,.3); background: var(--white); }
.deal-info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-right: 88px; }
@media (max-width: 560px) {
  .deal-info { padding-right: 0; }
}
.deal-info .meta { font-size: 13px; color: var(--muted-2); font-weight: 500; }
.deal-info .title { font-size: 19px; font-weight: 900; line-height: 1.25; }
.deal-info .old { font-size: 14px; color: var(--muted-2); text-decoration: line-through; }
.deal-info .price { font-size: 38px; line-height: 1; }
.deal-info .btn { align-self: flex-start; margin-top: 6px; }
.deal-panel .stamp-big { position: absolute; top: 46px; right: -14px; width: 98px; height: 98px; }
.coupon { display: inline-flex; align-self: flex-start; gap: 6px; align-items: center; border: 2px dashed var(--ink); padding: 3px 10px; font-size: 13px; font-weight: 700; background: #FFF6D6; }

/* Faixa rolante */
.ticker { background: var(--ink); color: var(--white); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); overflow: hidden; padding: 14px 0; }
.ticker-track { display: inline-flex; white-space: nowrap; animation: mbTicker 38s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; font-size: 18px; }
.ticker-item .pct { background: var(--accent); padding: 0 8px; }
.ticker-item .star { color: #8a8a8a; }

/* Seções */
.section { padding-top: 72px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 28px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.section-title { display: flex; flex-direction: column; gap: 10px; }
.chapter { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chapter .cap { background: var(--ink); color: var(--white); padding: 4px 10px; font-size: 14px; }
.chapter .ja { font-size: 17px; letter-spacing: .1em; }
.section h2 { font-size: clamp(32px, 4vw, 46px); line-height: 1.05; }
.section .lede { font-size: 16px; color: var(--muted); max-width: 40em; }

.seg { display: flex; border: 2.5px solid var(--ink); border-radius: 4px; overflow: hidden; font-weight: 700; font-size: 14px; }
.seg a { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; text-decoration: none; background: var(--white); color: var(--ink); }
.seg a + a { border-left: 2.5px solid var(--ink); }
.seg a[aria-current="true"] { background: var(--ink); color: var(--white); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; padding: 0 18px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; text-decoration: none; }
.chip[aria-current="true"] { background: var(--ink); color: var(--white); }

/* Cards de oferta */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; transition: opacity .15s ease; }
[data-offers-root][aria-busy="true"] .offer-grid,
[data-offers-root][aria-busy="true"] .empty,
.offer-grid[aria-busy="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.card { background: var(--white); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.card-cover { position: relative; height: 240px; border-bottom: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.card-cover img { max-width: 140px; max-height: 190px; object-fit: contain; box-shadow: 5px 5px 0 rgba(0,0,0,.28); background: var(--white); }
.card-tag { position: absolute; bottom: 12px; left: 12px; background: var(--white); border: 2px solid var(--ink); padding: 2px 9px; font-size: 12px; font-weight: 900; z-index: 2; }
.card .stamp { position: absolute; top: -10px; right: -10px; width: 60px; height: 60px; transform: rotate(-8deg); z-index: 2; }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.card-meta { font-size: 13px; color: var(--muted-2); font-weight: 500; }
.card-title { font-size: 17px; font-weight: 900; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.card-prices .price { font-size: 27px; line-height: 1; }
.card-prices .old { font-size: 14px; color: var(--muted-2); text-decoration: line-through; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.card-foot .btn { white-space: nowrap; padding: 0 14px; }
.store-pill { white-space: nowrap; font-size: 13px; font-weight: 700; border: 2px solid var(--ink); border-radius: 999px; padding: 3px 10px; }
.lowest { font-size: 12px; font-weight: 900; color: var(--accent-dark); }

/* Capa desenhada (quando a oferta não tem imagem) */
.book { width: 128px; height: 190px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 rgba(0,0,0,.28); display: flex; flex-direction: column; overflow: hidden; color: var(--white); position: relative; }
.book::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: rgba(0,0,0,.35); }
.book .b-title { background: var(--white); color: var(--ink); padding: 6px 8px 6px 12px; font-size: 13px; line-height: 1.12; border-bottom: 2px solid var(--ink); }
.book .b-vol { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.book .b-obi { background: var(--accent); border-top: 2px solid var(--ink); font-size: 10px; font-weight: 900; text-align: center; padding: 4px 0; letter-spacing: .1em; }

.empty { border: 3px dashed var(--ink); background: var(--white); padding: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.empty .display { font-size: 24px; }

.pager { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Lançamentos */
.dark { background-color: var(--ink); color: var(--white); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); position: relative; overflow: hidden; }
.dark .watermark { position: absolute; right: -70px; top: 20px; font-size: 200px; line-height: 1; color: rgba(255,255,255,.06); writing-mode: vertical-rl; pointer-events: none; }
.dark .wrap { position: relative; }
.dark .chapter .cap { background: var(--white); color: var(--ink); }
.dark .lede { color: #d6d6d6; }
.dark .seg { border-color: var(--white); }
.dark .seg a { background: var(--ink); color: var(--white); }
.dark .seg a + a { border-left-color: var(--white); }
.dark .seg a[aria-current="true"] { background: var(--accent); }
.rel-list { display: flex; flex-direction: column; border-top: 2px solid var(--line-dark); }
.rel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 2px solid var(--line-dark); }
.rel-date { flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; background: var(--white); color: var(--ink); border: 3px solid var(--white); padding: 6px 0; }
.rel-date .d { font-size: 28px; line-height: 1; }
.rel-date .m { font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.rel-info { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rel-info .t { font-size: 19px; font-weight: 900; }
.rel-info .p { font-size: 14px; color: #d6d6d6; }
.pill { font-size: 13px; font-weight: 900; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--white); }
.pill-pre { background: var(--accent); color: var(--white); }
.pill-out { background: var(--white); color: var(--ink); }
.dark .empty-dark { border: 2px dashed var(--line-dark); padding: 28px; color: #d6d6d6; }

/* Coleção */
.collection { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 88px; padding-bottom: 88px; }
.collection-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.collection-copy h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; }
.collection-copy p { font-size: 18px; font-weight: 500; max-width: 32em; }
.soon { background: var(--accent); color: var(--white); border: 3px solid var(--ink); padding: 4px 12px; font-size: 14px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--ink); }
.shelf-wrap { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; padding-top: 108px; position: relative; }
.shelf-say { position: absolute; top: 0; left: 24%; display: flex; align-items: center; gap: 16px; }
.shelf-say img { margin-bottom: -4px; }
.shelf-say .bubble-shelf { max-width: 240px; margin-bottom: 0; }
/* Tarefa 53: a ponta do balão da CAP. 03 fica na lateral esquerda, no meio da altura,
   aponta para o mascote e a junção é coberta pelo branco (4–10 px até ele). */
.bubble-shelf .bubble-tail {
  left: -10px;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 14px;
  height: 20px;
}
.shelf { display: flex; align-items: flex-end; gap: 6px; padding: 0 12px; overflow-x: auto; }
.spine { flex: 0 0 34px; background: #1B2A4A; border: 2.5px solid var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 0; color: var(--white); }
.spine .band { width: 18px; height: 4px; background: var(--accent); }
.spine .ja { font-size: 11px; writing-mode: vertical-rl; letter-spacing: .1em; }
.spine .n { font-size: 15px; }
.spine.missing { background: rgba(255,255,255,.6); border: 2.5px dashed var(--accent); justify-content: flex-end; color: var(--ink); }
.shelf-base { height: 12px; background: var(--ink); }
.legend { display: flex; gap: 18px; padding: 12px 12px 0; font-size: 14px; font-weight: 700; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 16px; height: 16px; display: inline-block; }

/* Guias */
.guides-band { border-top: 3px solid var(--ink); background: var(--paper-2); }
.guide-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.guide-card { flex: 1 1 300px; min-width: 0; text-decoration: none; color: var(--ink); }
.guide-top { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; height: 130px; padding: 16px 20px; border-bottom: 3px solid var(--ink); }
.guide-top .num { font-size: 64px; line-height: .9; }
.guide-top .sfx { position: absolute; right: 12px; top: 8px; font-size: 30px; line-height: 1; color: rgba(17,17,17,.75); transform: rotate(-6deg); }
.guide-top .kicker { background: var(--white); border: 2px solid var(--ink); padding: 2px 10px; font-size: 12px; font-weight: 900; }
.guide-bottom { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.guide-bottom .t { font-size: 20px; font-weight: 900; line-height: 1.25; }
.guide-bottom .more { font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* Páginas internas */
.page-head { border-bottom: 3px solid var(--ink); background: var(--white); }
.page-head .wrap { padding-top: 48px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 12px; }
.page-head h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.05; }
.page-head p { font-size: 18px; color: var(--muted); max-width: 40em; }
.prose { max-width: 760px; padding-top: 48px; padding-bottom: 88px; font-size: 18px; line-height: 1.7; }
.prose h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; margin: 40px 0 12px; }
.prose h3 { font-size: 21px; font-weight: 900; margin: 28px 0 8px; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 0; border: 3px solid var(--ink); background: var(--white); box-shadow: 4px 4px 0 var(--ink); }
.prose img { border: 3px solid var(--ink); }
.prose a { font-weight: 700; }

/* Rodapé */
.site-footer { background: var(--ink); color: var(--white); border-top: 3px solid var(--ink); }
.site-footer .wrap { padding-top: 64px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 40px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.footer-brand { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; }
.footer-brand p { color: #d6d6d6; max-width: 26em; }
.site-footer .logo { color: var(--white); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .h { font-weight: 900; font-size: 13px; letter-spacing: .1em; color: #bdbdbd; }
.footer-col a { color: var(--white); }
.footer-legal { border-top: 2px solid #3a3a3a; padding-top: 24px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #cfcfcf; line-height: 1.6; }
.footer-legal .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* ---------- Painel admin ---------- */
.admin { min-height: 100vh; }
.admin-bar { background: var(--ink); color: var(--white); }
.admin-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.admin-bar nav { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-bar nav a { color: var(--white); text-decoration: none; font-weight: 700; padding: 8px 12px; border-radius: 4px; }
.admin-bar nav a[aria-current="true"] { background: var(--accent); }
.admin-bar .brand { font-size: 18px; color: var(--white); text-decoration: none; }
.admin-main { padding-top: 32px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 28px; }
.admin-main h1 { font-family: var(--font-display); font-weight: 400; font-size: 32px; }
.admin-main h2 { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat { background: var(--white); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 16px 18px; }
.stat .n { font-family: var(--font-display); font-size: 34px; line-height: 1.1; }
.stat .l { font-size: 14px; font-weight: 700; color: var(--muted); }
.panel { background: var(--white); border: 3px solid var(--ink); padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.flash { border: 3px solid var(--ink); background: #E3F4DD; padding: 12px 16px; font-weight: 700; }
.flash.err { background: #FBE0E0; }
.tbl-wrap { overflow-x: auto; border: 3px solid var(--ink); background: var(--white); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 10px 12px; border-bottom: 1.5px solid #ddd; text-align: left; vertical-align: middle; }
.tbl th { background: var(--paper-2); font-weight: 900; white-space: nowrap; }
.tbl td.thumb img { width: 44px; height: 60px; object-fit: contain; background: var(--paper); }
.tbl .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tbl .actions form { margin: 0; }
.mini { min-height: 34px; padding: 0 10px; font-size: 13px; border-width: 2px; }
.badge { display: inline-block; font-size: 12px; font-weight: 900; padding: 2px 8px; border: 2px solid var(--ink); border-radius: 999px; white-space: nowrap; }
.badge.ok { background: #E3F4DD; } .badge.wait { background: #FFF1C9; } .badge.off { background: #eee; } .badge.no { background: #FBE0E0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 900; font-size: 14px; }
.field .hint { font-size: 13px; color: var(--muted); }
.field input[type="text"], .field input[type="url"], .field input[type="password"], .field input[type="date"], .field input[type="number"], .field select, .field textarea {
  min-height: 44px; padding: 8px 12px; border: 2.5px solid var(--ink); border-radius: 4px; background: var(--white); font: inherit; font-size: 15px; width: 100%;
}
.field textarea { min-height: 320px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 1.5; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; min-height: 32px; }
.checks input { width: 20px; height: 20px; accent-color: var(--accent); }
.login-box { max-width: 420px; margin: 80px auto; }
.code { font-family: ui-monospace, Consolas, monospace; background: var(--paper-2); border: 2px solid var(--ink); padding: 12px; overflow-x: auto; font-size: 13px; white-space: pre; }

/* Celular: duas colunas de ofertas e filtros que deslizam */
@media (max-width: 560px) {
  .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -24px; padding-right: 24px; scrollbar-width: none; }
  .chips .chip { flex: 0 0 auto; }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .card { box-shadow: 4px 4px 0 var(--ink); }
  .card-cover { height: 190px; }
  .card-cover img { max-width: 104px; max-height: 150px; }
  .book { width: 96px; height: 142px; }
  .book .b-title { font-size: 10px; padding: 5px 6px 5px 10px; }
  .book .b-vol { font-size: 28px; }
  .book .b-obi { font-size: 8px; }
  .card .stamp { width: 50px; height: 50px; top: -8px; right: -8px; }
  .card-tag { font-size: 11px; left: 8px; bottom: 8px; }
  .card-body { padding: 12px; gap: 4px; }
  .card-title { font-size: 14px; }
  .card-prices .price { font-size: 20px; }
  .card-prices .old { font-size: 12px; }
  .card-foot { flex-direction: column; align-items: stretch; }
  .card-foot .btn { width: 100%; }
  .store-pill { align-self: flex-start; font-size: 12px; }
  .main-nav { gap: 16px; font-size: 14px; }
  .section { padding-top: 56px; padding-bottom: 64px; }
  .boom-panel { min-height: 0; aspect-ratio: 1672 / 941; }
  .boom-panel .boom-bg { object-position: left top; }
  .boom-panel .mascot { height: 73%; bottom: -10px; left: 9%; }
  .bubble-wrap { top: 6%; left: 37%; right: auto; max-width: none; }
  .manga-bubble { padding: 11px 22px 26px 22px; }
  .manga-bubble-content .bubble-kicker { font-size: 9.5px; }
  .manga-bubble-content .bubble-main.display { font-size: 12px; }
  .boom-caption { display: none; }
  .bubble { padding: 8px 12px; }
  .bubble-main.display { font-size: 18px; }
  .deal-panel .stamp-big { top: 46px; right: -10px; width: 86px; height: 86px; }
  .shelf-say { left: 10%; }
}

.tbl td:last-child { min-width: 220px; }

/* Topo compacto: ações mobile e menu */
.mobile-actions { display: none; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.mobile-actions .btn-search-mobile { display: none; }
.mobile-menu { position: relative; }
.mobile-menu summary { list-style: none; width: 38px; min-height: 38px; padding: 0; border-width: 2px; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu[open] summary { background: var(--ink); color: var(--white); }
.mobile-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; min-width: 230px;
  background: var(--white); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  display: flex; flex-direction: column; padding: 12px; gap: 2px;
}
.mobile-panel a { font-weight: 900; font-size: 17px; text-decoration: none; padding: 10px 6px; border-bottom: 2px solid var(--paper-2); }
.mobile-panel a:last-child { border-bottom: 0; }
.mobile-panel .live-pill { margin-bottom: 6px; }

/* Logo com o Boomzinho */
.logo { gap: 8px; }
.logo-mascot { display: block; width: 40px; height: auto; transform: rotate(-4deg); }
.site-footer .logo-mascot { width: 56px; }
.logo-words { align-items: flex-start; }
.logo-words .big { font-size: 21px; white-space: nowrap; }
.site-footer .logo-words .big { font-size: 26px; }
.logo-words .boom { color: var(--accent); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.logo-dark .logo-words .boom { -webkit-text-stroke: 0; }

/* Abaixo de ~1100px: links vão para o menu ☰, nunca quebrando em 2 linhas */
@media (max-width: 1120px) {
  .main-nav, .header-actions { display: none; }
  .mobile-actions { display: flex; }
}
@media (min-width: 561px) and (max-width: 1120px) {
  .boom-panel .mascot { height: 73%; bottom: -12px; left: 7%; }
  .bubble-wrap { top: 8%; left: 36%; right: auto; max-width: none; }
  .manga-bubble { padding: 16px 26px 38px 26px; }
  .manga-bubble-content .bubble-main.display { font-size: 15px; }
}
@media (max-width: 700px) {
  .boom-panel .boom-bg { object-position: left top; }
  .boom-caption { display: none; }
}

@media (max-width: 820px) {
  .site-header { height: 60px; }
  .header-live-pill, .header-search { display: none !important; }
  .mobile-actions .btn-search-mobile { display: inline-flex; min-height: 38px; padding: 0 10px; border-width: 2px; }
  .site-header .logo-mascot { width: 36px; }
  .site-header .logo-words .big { font-size: 18px; }
  .logo { gap: 6px; }
}

@media (max-width: 520px) {
  .mobile-actions .lbl { display: none; }
  .mobile-actions .btn-header-cta { width: 38px; padding: 0; }
}

@media (max-width: 400px) {
  .site-header .wrap { gap: 8px; }
  .site-header .logo-mascot { width: 34px; }
  .site-header .logo-words .big { font-size: 16px; }
  .mobile-actions { gap: 6px; }
  .hero h1 { font-size: 34px; }
  .section h2, .collection-copy h2 { font-size: 28px; }
  .page-head h1 { font-size: 30px; }
  .seg a { padding: 0 12px; }
}

@media (max-width: 350px) {
  .site-header .logo-mascot { width: 30px; }
  .site-header .logo-words .big { font-size: 14px; }
  .logo { gap: 5px; }
}

/* ========================================================
   FASE 4: Catálogo Completo, Busca, Páginas de Série e Coleção
   ======================================================== */

/* Selo do volume sobre a capa */
.vol-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--ink);
  color: var(--white);
  border: 2px solid var(--white);
  box-shadow: 2.5px 2.5px 0 var(--ink);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 6px;
  line-height: 1;
  z-index: 2;
}
.vol-badge .vol-lbl {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #ddd;
}
.vol-badge .vol-num {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--white);
  margin-top: 1px;
}
.vol-badge.vol-single {
  padding: 2px 5px;
  background: var(--accent);
  border-color: var(--ink);
}
.vol-badge.vol-single .vol-lbl {
  color: #ffe5ea;
}
.vol-badge.vol-single .vol-num {
  font-size: 9px;
  letter-spacing: .04em;
}
.vol-badge.vol-range .vol-num {
  font-size: 13px;
}
@media (max-width: 560px) {
  .vol-badge {
    top: 6px;
    left: 6px;
    padding: 2px 5px;
  }
  .vol-badge .vol-num {
    font-size: 14px;
  }
}
.card-tag-pre {
  background: var(--ink) !important;
  color: var(--white) !important;
}

/* Card titles e subtítulos canônicos */
.card-series-name,
.card-series-name-link {
  display: block;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}
.card-series-name-link:hover {
  color: var(--accent);
}
.card-edition-subtitle {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-2);
  margin-top: 4px;
  line-height: 1.3;
}
.card-regular-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.card-regular-price .price-label {
  font-size: 11px;
  font-weight: 900;
  color: var(--muted-2);
  letter-spacing: .08em;
}
.card-regular-price .price {
  font-size: 27px;
  line-height: 1;
}
.lowest-history {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.card-foot-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.series-link {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--muted-2);
}
.series-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Header Search */
.header-search {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  height: 38px;
  max-width: 280px;
  flex: 1 1 160px;
  min-width: 140px;
}
.header-search input {
  flex: 1 1 auto;
  border: none;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  background: transparent;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.header-search .search-btn {
  background: transparent;
  border: none;
  padding: 0 10px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-search .search-btn:hover {
  color: var(--accent);
}
.btn-icon-only {
  min-height: 38px;
  padding: 0 10px;
}

/* Volume Grid & Botão Tenho */
.volume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 24px;
}
.btn-have {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  transition: all .12s ease;
}
.btn-have:hover {
  background: var(--paper-2);
}
.btn-have.active {
  background: #2E7D32;
  color: var(--white);
  border-color: #1B5E20;
}
.card-unavailable {
  padding: 8px 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

/* Séries Grid & Series Card */
.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}
.series-card {
  text-decoration: none;
}
.series-card-cover {
  position: relative;
  height: 220px;
  border-bottom: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.series-card-cover img {
  max-width: 140px;
  max-height: 180px;
  object-fit: contain;
  box-shadow: 4px 4px 0 rgba(0,0,0,.25);
  background: var(--white);
}
.promo-tag {
  background: var(--accent) !important;
  color: var(--white) !important;
  border-color: var(--ink) !important;
}
.card-series-name-link {
  color: var(--ink);
  text-decoration: none;
}
.card-series-name-link:hover {
  color: var(--accent);
}
.card-alt-name {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
.series-card-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  margin-top: 4px;
}
.series-card-stats .min-price {
  font-size: 14px;
  color: var(--muted-2);
}
.series-card-stats .min-price strong {
  font-size: 18px;
  color: var(--ink);
}

/* Página da Série */
.series-header {
  padding-top: 40px;
  padding-bottom: 30px;
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
}
.series-header-main {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: flex-start;
}
.series-cover-box {
  flex: 0 0 200px;
  height: 290px;
  border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  background: #E8E2D4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.series-cover-box img {
  max-width: 180px;
  max-height: 260px;
  object-fit: contain;
  background: var(--white);
  box-shadow: 4px 4px 0 rgba(0,0,0,.25);
}
.series-info-box {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.series-genre-badge {
  align-self: flex-start;
  background: var(--ink);
  color: var(--white);
  padding: 4px 10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .1em;
}
.series-title {
  font-size: clamp(32px, 4.5vw, 48px);
  line-height: 1.1;
}
.series-alt-names {
  font-size: 15px;
  color: var(--muted);
}
.series-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
  align-items: center;
}
.promo-alert {
  background: #FFE5E5;
  color: var(--accent-dark);
  font-weight: 900;
  padding: 2px 8px;
  border: 1.5px solid var(--accent);
  border-radius: 4px;
}

/* Tracker de Coleção */
.collection-tracker-card {
  margin-top: 14px;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 500px;
}
.tracker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tracker-title {
  font-size: 16px;
}
.tracker-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.tracker-progress-bar {
  height: 14px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}
.tracker-progress-fill {
  height: 100%;
  background: #2E7D32;
  transition: width .25s ease;
}
.tracker-quick-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  flex-wrap: wrap;
}
.quick-vol-input {
  width: 60px;
  height: 32px;
  border: 2px solid var(--ink);
  padding: 0 6px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  border-radius: 4px;
  margin-left: 6px;
}
.btn-sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* Abas de edição e filtros */
.edition-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.edition-tab {
  background: var(--white);
  border: 2.5px solid var(--ink);
  padding: 8px 18px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
}
.edition-tab.active {
  background: var(--ink);
  color: var(--white);
}
.series-grid-filters {
  margin-bottom: 24px;
}

/* Minha Coleção View */
.followed-series-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.followed-series-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 16px 20px;
}
.followed-series-thumb {
  width: 64px;
  height: 90px;
  object-fit: contain;
  border: 2px solid var(--ink);
  background: var(--paper-2);
}
.followed-series-info {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.followed-series-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
}
.followed-series-title:hover {
  color: var(--accent);
}
.followed-missing-text {
  font-size: 13px;
  color: var(--muted);
}

/* ==========================================================================
   Card aberto do volume (<dialog class="vol-dialog"> e página de volume)
   ========================================================================== */

/* Links de abertura do card na grade e nas ofertas */
.card-cover.vol-open {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.card-title-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card-title-link:hover {
  color: var(--accent-dark);
}
.card-edition-subtitle-link {
  display: block;
  margin-top: 4px;
  color: var(--muted-2);
  text-decoration: none;
}
.card-edition-subtitle-link .card-edition-subtitle {
  margin-top: 0;
}
.card-edition-subtitle-link:hover,
.card-edition-subtitle-link:hover .card-edition-subtitle {
  color: var(--accent-dark);
}

/* Trava de rolagem ao abrir modal */
body.vol-dialog-open {
  overflow: hidden;
}

/* Toast acessível de feedback */
.mb-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 4px;
  border: 2.5px solid var(--white);
  font-weight: 700;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 9999;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
.mb-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Modal Dialog Base */
dialog.vol-dialog {
  padding: 0;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  outline: none;
  box-shadow: 10px 10px 0 var(--accent);
  width: min(1080px, calc(100vw - 48px));
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  inset: 0;
  margin: auto;
}

dialog.vol-dialog::backdrop {
  background-color: rgba(26, 24, 22, 0.75);
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.7px);
  background-size: 10px 10px;
}

/* Card aberto interno */
.vol-detail-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  min-height: 100%;
}

.vol-drag-handle {
  display: none;
}

/* Barra de cima */
.vol-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 3px solid var(--ink);
  background: var(--white);
}
.vol-nav-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vol-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 2.5px solid var(--ink);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.vol-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Navegação pela lista de origem no topo do card */
.vol-list-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vol-list-counter {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
}
.vol-series-head-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vol-nav-btn.disabled,
.vol-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}


.vol-subnav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 4px;
  white-space: nowrap;
  box-sizing: border-box;
}
.vol-subnav-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Botões Tenho e Compartilhar no corpo do card (celular) */
.vol-body-actions {
  display: none;
}
@media (max-width: 767px) {
  .vol-body-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 8px;
    width: 100%;
    box-sizing: border-box;
  }
  .vol-body-have {
    flex: 1 1 auto;
    min-height: 44px;
    height: 44px;
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid var(--ink);
    border-radius: 4px;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    box-sizing: border-box;
  }
  .vol-body-share {
    flex: 1 1 auto;
    min-height: 44px;
    height: 44px;
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid var(--ink);
    border-radius: 4px;
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    width: auto;
    box-sizing: border-box;
  }
}

/* Transições de deslizar no card (≤ 200 ms) */
.vol-slide-enter-next {
  animation: mbSlideNext 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.vol-slide-enter-prev {
  animation: mbSlidePrev 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes mbSlideNext {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes mbSlidePrev {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vol-slide-enter-next, .vol-slide-enter-prev {
    animation: none !important;
  }
}
.vol-nav-progress {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.vol-nav-progress b {
  color: var(--ink);
}
.vol-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2.5px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.vol-dialog-close:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* Layout em duas colunas no computador */
.vol-detail-body {
  display: grid;
  grid-template-columns: 380px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "cover heading"
    "cover rest";
  align-items: start;
}

.vol-detail-cover-col {
  grid-area: cover;
  align-self: stretch;
  border-right: 3px solid var(--ink);
  background-color: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  position: relative;
  overflow: visible;
}

.vol-detail-cover-frame {
  position: relative;
  width: 240px;
  height: 344px;
  border: 2.5px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1F5F4A;
}

.vol-detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vol-detail-book {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  box-sizing: border-box;
  position: relative;
  color: #ffffff;
}

.vol-detail-book-title {
  font-weight: 900;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: .04em;
  position: relative;
}

.vol-detail-book-num {
  font-size: 64px;
  line-height: 1;
  align-self: center;
  position: relative;
}

.vol-detail-book-pub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  position: relative;
}

.vol-large-badge {
  position: absolute;
  left: -14px;
  bottom: -14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--white);
  padding: 4px 12px 4px 8px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.vol-large-badge .vtxt {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.vol-large-num {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
}

.vol-detail-stamp-wrap {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 80px;
  height: 80px;
  transform: rotate(-8deg);
  z-index: 2;
}

.vol-detail-stamp-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vol-tag-variant {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  font-weight: 900;
  background: var(--ink);
  color: var(--white);
  padding: 2px 8px;
  z-index: 2;
}

.vol-out-stripe {
  position: absolute;
  top: 40%;
  left: -20px;
  right: -20px;
  transform: rotate(-12deg);
  background: var(--paper);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  text-align: center;
  font-size: 18px;
  padding: 4px 0;
  z-index: 3;
  font-weight: 900;
}

/* Coluna de informações */
.vol-detail-heading-block {
  grid-area: heading;
  padding: 28px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vol-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vol-chip {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 3px 10px;
}
.vol-chip-genre {
  background: var(--ink);
  color: var(--white);
}
.vol-chip-edition,
.vol-chip-pub {
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
}

.vol-detail-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vol-detail-title {
  margin: 0;
  font-size: 44px;
  line-height: 1.02;
}
.vol-detail-subtitle {
  font-size: 18px;
  font-weight: 700;
}
.vol-detail-author {
  font-size: 14px;
  color: var(--muted);
}
.vol-mobile-cover-price {
  display: none;
}

.vol-detail-info-rest {
  grid-area: rest;
  padding: 18px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Boomzinho comenta */
.vol-blurb-box {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border: 2.5px solid var(--ink);
  padding: 14px 16px;
}
.vol-blurb-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: auto;
}
.vol-blurb-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vol-blurb-tag {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--accent-dark);
}
.vol-blurb-copy p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.vol-blurb-copy p + p {
  margin-top: 8px;
}

/* Dados da editora */
.vol-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2.5px solid var(--ink);
  background: var(--white);
}
.vol-data-cell {
  padding: 10px 12px;
  border-right: 2px solid var(--ink);
}
.vol-data-cell:last-child {
  border-right: none;
}
.vol-data-lbl {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--muted);
}
.vol-data-val {
  font-size: 15px;
  font-weight: 700;
}

/* Onde comprar */
.vol-store-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vol-store-heading {
  margin: 0;
  font-size: 16px;
}
.vol-store-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 2.5px solid var(--ink);
  background: var(--white);
}
.vol-store-name {
  flex: 0 0 120px;
  font-size: 14px;
  font-weight: 900;
}
.vol-store-price {
  font-size: 22px;
  line-height: 1;
}
.vol-store-pct {
  font-size: 12px;
  font-weight: 900;
  background: var(--accent);
  color: var(--white);
  padding: 2px 7px;
}
.vol-store-time {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}
.vol-store-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
}
.vol-store-disclaimer {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.vol-unavail-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 2.5px solid var(--ink);
  background: var(--paper-2);
}
.vol-unavail-title {
  font-size: 15px;
  font-weight: 900;
}
.vol-unavail-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}



/* Barra de ações inferior */
.vol-detail-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-top: 3px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.vol-action-price-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: auto;
}
.vol-action-label {
  font-size: 12px;
  font-weight: 700;
  color: #d9d2c5;
}
.vol-action-prices {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.vol-action-main-price {
  font-size: 34px;
  line-height: 1;
}
.vol-action-old-price {
  font-size: 14px;
  color: #d9d2c5;
  text-decoration: line-through;
}

.vol-action-buy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 2.5px solid var(--white);
  border-radius: 4px;
  background: var(--accent);
  color: var(--white);
  font-weight: 900;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
}
.vol-action-buy:hover {
  background: var(--accent-dark);
  color: var(--white);
}

.vol-action-have {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  border: 2.5px solid var(--white);
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
}
.vol-action-have.active {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.vol-action-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 2.5px solid var(--white);
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
  cursor: pointer;
}
.vol-action-share:hover {
  background: #2a2a2a;
}

/* ==========================================================================
   Versão Celular (até 767px): Folha de baixo para cima
   ========================================================================== */
@media (max-width: 767px) {
  dialog.vol-dialog {
    position: fixed;
    inset: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
    animation: none;
  }

  .vol-drag-handle {
    display: none;
  }

  .vol-detail-head {
    padding: 6px 16px 10px;
    border-bottom: 2.5px solid var(--ink);
    gap: 8px;
  }
  .vol-nav-cluster {
    flex: 1 1 auto;
    justify-content: space-between;
  }
  .vol-nav-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .vol-nav-lbl,
  .vol-nav-series {
    display: none;
  }
  .vol-nav-progress {
    flex: 1 1 auto;
    text-align: center;
    font-size: 14px;
  }

  .vol-detail-body {
    display: grid;
    grid-template-columns: 132px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "cover heading"
      "rest rest";
    gap: 14px 16px;
    padding: 16px;
  }
  .vol-detail-cover-col {
    grid-area: cover;
    padding: 0;
    border-right: none;
    background: transparent;
    display: block;
    overflow: visible;
  }
  .vol-detail-cover-frame {
    width: 132px;
    height: 188px;
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.28);
    overflow: visible;
  }
  .vol-large-badge {
    left: -8px;
    bottom: -8px;
    padding: 2px 8px 2px 5px;
    gap: 4px;
  }
  .vol-large-badge .vtxt {
    font-size: 8px;
    letter-spacing: .14em;
  }
  .vol-large-num {
    font-size: 24px;
  }
  .vol-detail-stamp-wrap {
    top: -12px;
    right: -12px;
    width: 52px;
    height: 52px;
  }
  .vol-out-stripe {
    top: 74px;
    left: -6px;
    right: -6px;
    font-size: 15px;
    padding: 3px 0;
  }

  .vol-detail-heading-block {
    grid-area: heading;
    padding: 0;
    gap: 6px;
  }
  .vol-detail-badges {
    gap: 6px;
  }
  .vol-chip {
    font-size: 11px;
    padding: 2px 8px;
  }
  .vol-detail-title {
    font-size: 26px;
    line-height: 1.05;
  }
  .vol-detail-subtitle {
    font-size: 15px;
  }
  .vol-detail-author {
    font-size: 13px;
  }
  .vol-mobile-cover-price {
    display: block;
    font-size: 13px;
    color: var(--muted);
  }
  .vol-mobile-cover-price b {
    color: var(--ink);
  }

  .vol-detail-info-rest {
    grid-area: rest;
    padding: 0;
    gap: 14px;
  }
  .vol-blurb-box {
    gap: 12px;
    padding: 12px 14px;
  }
  .vol-blurb-avatar {
    width: 40px;
  }
  .vol-blurb-copy p {
    font-size: 14px;
  }

  .vol-data-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vol-data-cell {
    padding: 9px 12px;
  }
  .vol-data-cell:nth-child(odd) {
    border-right: 2px solid var(--ink);
  }
  .vol-data-cell:nth-child(even) {
    border-right: none;
  }
  .vol-data-cell:nth-child(1),
  .vol-data-cell:nth-child(2) {
    border-bottom: 2px solid var(--ink);
  }

  .vol-store-row {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 10px 12px;
  }
  .vol-store-name {
    flex: 0 0 auto;
  }
  .vol-store-link {
    margin-left: auto;
  }
  .vol-store-time {
    flex: 1 1 100%;
    order: 10;
    margin-left: 0;
    font-size: 11px;
    color: var(--muted);
  }

  .vol-detail-foot {
    position: sticky;
    bottom: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px max(12px, env(safe-area-inset-bottom));
    background: var(--ink);
    border-top: 3px solid var(--ink);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .vol-detail-foot .vol-action-have,
  .vol-detail-foot .vol-action-share {
    display: none !important;
  }
  .vol-action-price-wrap {
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    flex: 0 0 auto;
    max-width: 110px;
  }
  .vol-action-label {
    font-size: 10px;
    color: #c5bdae;
    line-height: 1.1;
  }
  .vol-action-prices {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .vol-action-main-price {
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
  }
  .vol-action-old-price {
    font-size: 11px;
    color: #a09787;
    text-decoration: line-through;
  }
  .vol-action-buy {
    flex: 1 1 auto;
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 900;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    max-width: 230px;
    box-sizing: border-box;
  }
}

@keyframes mbSheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.vol-dialog {
    animation: none !important;
  }
}

/* ==========================================================================
   Página Completa do Volume (/serie/:slug/:parte)
   ========================================================================== */
.vol-page-container {
  max-width: 1080px;
  margin: 32px auto 64px;
}
.vol-page-nav {
  margin-bottom: 16px;
}
.vol-page-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
  text-decoration: none;
}
.vol-page-back:hover {
  color: var(--accent);
}
.vol-detail-full {
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--accent);
  background: var(--paper);
}

/* ==========================================================================
   PLANO MOBILE B (Mangá style + OfertasDiscos visual finish)
   ========================================================================== */

/* Prevenção global de escorregamento lateral horizontal */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

/* Visibilidade Responsiva */
@media (max-width: 700px) {
  .desktop-only {
    display: none !important;
  }
}
@media (min-width: 701px) {
  .mobile-only {
    display: none !important;
  }
}

/* 1. Barra de Busca Expansível no Topo Mobile (#mobile-search-bar) */
.mobile-search-bar {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 99;
  padding: 10px 16px;
  animation: mbSearchSlideDown 0.18s ease-out;
}
.mobile-search-bar[hidden] {
  display: none !important;
}
@keyframes mbSearchSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mobile-search-inner {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.mobile-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}
.mobile-search-form-icon {
  display: flex;
  align-items: center;
  color: var(--muted);
  flex: 0 0 auto;
}
.mobile-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 6px;
  font-family: inherit;
  font-size: 16px; /* Evita zoom automático no Safari/iOS */
  font-weight: 700;
  color: var(--ink);
  outline: none;
}
.mobile-search-input::-webkit-search-cancel-button,
.mobile-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.mobile-search-input::placeholder {
  color: var(--muted-2);
  font-weight: 500;
}
.btn-close-search {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 6px 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}
.btn-close-search:hover,
.btn-close-search:active {
  color: var(--accent);
}

/* Dropdown de Sugestões ao Vivo */
.header-search {
  position: relative;
}
.header-search .search-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
}
.search-suggestions-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  max-height: 380px;
  overflow-y: auto;
  z-index: 100;
}
.search-suggestions-dropdown[hidden] {
  display: none !important;
}
.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s ease;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.search-suggestion-item:last-child {
  border-bottom: none;
}
.search-suggestion-item:hover,
.search-suggestion-item:active {
  background: var(--paper-2);
}
.search-suggestion-thumb {
  width: 36px;
  height: 50px;
  flex: 0 0 36px;
  object-fit: cover;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
}
.search-suggestion-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.search-suggestion-title {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggestion-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.search-suggestion-badge {
  font-size: 10.5px;
  font-weight: 900;
  color: var(--accent-dark);
  background: #ffefe6;
  border: 1px solid #ffd5c2;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.search-suggestion-footer {
  padding: 10px 14px;
  background: var(--paper);
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  border-top: 2px solid var(--ink);
  box-sizing: border-box;
}
.search-suggestion-footer a {
  color: var(--ink);
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggestion-footer a:hover {
  color: var(--accent);
}
.search-suggestion-empty {
  padding: 16px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* 2. Carrossel "Mais recentes" com Mascote e Balão Mangá */
.recent-carousel-section {
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
  padding: 14px 0 18px;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: hidden;
}
.recent-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
}
.recent-carousel-mascot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.carousel-mascot-unit {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 0 0 82px;
  width: 82px;
}
.carousel-mascot {
  width: 44px;
  height: auto;
  display: block;
}
.carousel-manga-bubble {
  position: absolute;
  top: -12px;
  left: 18px;
  width: 60px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.recent-carousel-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 8px;
  width: 100%;
  box-sizing: border-box;
}
.carousel-bubble-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.carousel-bubble-text {
  position: relative;
  font-size: 8px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.02em;
  padding-bottom: 2px;
  padding-left: 0;
  padding-right: 0;
  white-space: nowrap;
}
.recent-carousel-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.chapter-mini {
  align-self: flex-start;
  background: var(--ink);
  color: var(--white);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 1px 5px;
}
.recent-carousel-heading {
  font-size: 18px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}
.recent-carousel-nav-arrows {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.carousel-arrow {
  width: 30px;
  height: 30px;
  background: var(--white);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.1s ease;
  line-height: 1;
  padding: 0;
}
.carousel-arrow:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.carousel-counter {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  padding: 0 4px;
}
.recent-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 12px;
  padding: 0 16px;
  width: 100%;
  box-sizing: border-box;
}
.recent-carousel-track::-webkit-scrollbar {
  display: none;
}
.recent-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
  box-sizing: border-box;
}
.recent-slide-card {
  background: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink); /* Destaque mantém sombra dura */
  display: flex;
  gap: 14px;
  padding: 12px;
  position: relative;
  box-sizing: border-box;
}
.recent-slide-cover {
  flex: 0 0 115px;
  height: 165px;
  position: relative;
  border: 2px solid var(--ink);
  overflow: hidden;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}
.recent-slide-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.stamp-carousel {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 44px;
  height: 44px;
  transform: rotate(-8deg);
  z-index: 2;
}
.slide-vol-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: var(--white);
  border: 1.5px solid var(--ink);
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 900;
  z-index: 2;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.recent-slide-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.recent-slide-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted-2);
}
.recent-slide-meta .store-tag {
  background: var(--ink);
  color: var(--white);
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 900;
}
.recent-slide-title {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.22;
  margin: 6px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recent-title-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.recent-title-link:hover {
  color: var(--accent);
}
.recent-slide-title .series-name {
  display: block;
}
.recent-slide-title .edition-sub {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-2);
  margin-top: 2px;
}
.recent-slide-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
}
.recent-price {
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}
.recent-old {
  font-size: 13px;
  color: var(--muted-2);
  text-decoration: line-through;
}
.recent-buy-btn {
  margin-top: 10px;
  width: 100% !important;
  justify-content: center !important;
  min-height: 40px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Faixa Telegram na Grade de Ofertas */
.grid-telegram-banner {
  grid-column: 1 / -1;
  background: #229ED9;
  color: var(--white);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 16px 14px;
  margin: 6px 0;
  box-sizing: border-box;
}
.grid-tg-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.grid-tg-title {
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--white);
}
.grid-tg-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.35;
}
.grid-tg-btn {
  align-self: flex-start;
  margin-top: 6px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 13.5px;
  font-weight: 900;
  padding: 0 14px;
  min-height: 38px;
}
.grid-tg-btn:hover {
  background: var(--paper-2);
}

/* Página de Busca (/busca) */
.search-page-bar-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  max-width: 580px;
  width: 100%;
  box-sizing: border-box;
}
.search-page-bar-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 2.5px solid var(--ink);
  background: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.search-page-bar-btn {
  white-space: nowrap;
  padding: 0 16px;
  min-height: 44px;
}
.miss-feedback {
  background: #eefbee;
  border: 2px solid #228b22;
  color: #155724;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  text-align: center;
}

/* ==========================================================================
   REGRAS ESPECÍFICAS MOBILE (< 700px) - PLANO B
   ========================================================================== */
@media (max-width: 700px) {
  /* 1. Banner de volta, compacto: ~300px com arte banner-mobile.webp e degradê bege */
  .hero {
    position: relative !important;
    overflow: hidden !important;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 0 0 20px 0 !important;
    border-bottom: 3px solid var(--ink) !important;
    background: var(--paper) !important;
    box-sizing: border-box !important;
  }
  .hero-picture,
  .hero-picture .hero-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    z-index: 0 !important;
  }
  .hero-scrim {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: linear-gradient(180deg, transparent 0%, transparent 45%, rgba(244, 238, 226, 0.75) 65%, var(--paper) 85%, var(--paper) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  .hero-inner {
    display: block !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero h1 {
    display: block !important;
    position: relative !important;
    z-index: 3 !important;
    font-size: 26px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    color: var(--ink) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    text-shadow: 0 1px 2px rgba(247, 243, 235, 0.9);
  }
  .hero-text {
    display: block !important;
    position: relative !important;
    z-index: 3 !important;
    font-size: 13.5px !important;
    line-height: 1.32 !important;
    margin: 0 !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .hero-kicker,
  .hero-note,
  .hero .cta-row {
    display: none !important;
  }

  /* 2. Filtros e Ordem: sem escorregamento lateral */
  .section#ofertas {
    padding-top: 16px !important;
    padding-bottom: 36px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .section-main-title {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  .section-main-title .offers-live-count {
    font-size: 16px !important;
    color: var(--muted) !important;
  }
  .offer-filters-head {
    margin-top: 6px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .chips.chips-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 2px 6px 2px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  .chips.chips-scroll::-webkit-scrollbar {
    display: none !important;
  }
  .chips .chip {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    white-space: nowrap !important;
  }
  .offer-filters-head .seg {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 3px 3px 0 var(--ink) !important;
  }
  .offer-filters-head .seg a {
    flex: 1 1 50% !important;
    text-align: center !important;
    padding: 8px 4px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 3. Topo compacto de /ofertas */
  .offers-page-head {
    padding: 14px 0 8px !important;
  }
  .offers-page-head .chapter {
    display: none !important;
  }
  .offers-page-head h1 {
    font-size: 24px !important;
    line-height: 1.1 !important;
    margin: 0 0 4px !important;
  }
  .offers-page-head p {
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  .offers-section-body {
    padding-top: 10px !important;
    padding-bottom: 32px !important;
  }

  /* 4. Grade de 2 Colunas Limpa no Celular (home, /ofertas, /serie/:slug) */
  .offer-grid,
  .volume-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Card da grade: 2px borda preta, SEM sombra dura, meta ~330px altura */
  .offer-grid .card,
  .volume-grid .card {
    border: 2px solid var(--ink) !important;
    box-shadow: none !important; /* Sem sombra dura nos cards da grade */
    display: flex !important;
    flex-direction: column !important;
    cursor: pointer !important;
    height: 322px !important;
    min-height: 310px !important;
    max-height: 330px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: var(--white) !important;
  }
  /* Capa na proporção mangá 2:3 */
  .offer-grid .card-cover,
  .volume-grid .card-cover {
    height: 188px !important;
    aspect-ratio: 2 / 3 !important;
    width: 100% !important;
    background-image: none !important;
    padding: 0 !important;
    border-bottom: 2px solid var(--ink) !important;
    overflow: hidden !important;
    position: relative !important;
    flex: 0 0 188px !important;
  }
  .offer-grid .card-cover img,
  .volume-grid .card-cover img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    box-shadow: none !important;
  }
  .offer-grid .card-cover .book,
  .volume-grid .card-cover .book {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Selos de desconto e de volume nos cantos */
  .card .stamp {
    width: 38px !important;
    height: 38px !important;
    top: -3px !important;
    right: -3px !important;
  }
  .card-cover .vol-badge {
    top: auto !important;
    bottom: 5px !important;
    left: 5px !important;
    right: auto !important;
    height: auto !important;
    padding: 2px 5px !important;
    font-size: 8.5px !important;
    border-width: 1.5px !important;
    box-shadow: 1.5px 1.5px 0 var(--ink) !important;
  }
  .card-cover .vol-badge .vol-num {
    font-size: 11.5px !important;
  }
  .card-tag {
    display: none !important;
  }

  /* Corpo do card em grid: linha 1 = preço nowrap na largura toda; linha 2 = preço antigo e ↗ */
  .offer-grid .card-body,
  .volume-grid .card-body {
    padding: 4px 8px 6px !important;
    column-gap: 6px !important;
    row-gap: 1px !important;
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto auto 44px !important;
    grid-template-areas:
      "meta meta"
      "title title"
      "sub sub"
      "price price"
      "old foot" !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .card-meta {
    grid-area: meta !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    color: var(--muted-2) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    margin: 0 !important;
  }
  .card-title {
    grid-area: title !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-height: 2.36em !important;
  }
  .card-edition-subtitle-link,
  .card-edition-subtitle {
    grid-area: sub !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    color: var(--muted-2) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  /* Preços: contêineres viram display: contents para separar linha 1 (.price) e linha 2 (.old) */
  .price-label,
  .lowest-history,
  .lowest,
  .coupon {
    display: none !important;
  }
  .card-prices-wrap,
  .card-regular-price,
  .card-prices {
    display: contents !important;
  }

  /* Linha 1 do rodapé: Preço com white-space: nowrap e a largura toda do card */
  .card-prices .price,
  .card-regular-price .price,
  .card .price {
    grid-area: price !important;
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    font-size: 19px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: end !important;
  }

  /* Linha 2 do rodapé: Preço antigo riscado à esquerda */
  .card-prices .old,
  .card .old {
    grid-area: old !important;
    display: block !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
    color: var(--muted-2) !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .card-unavailable {
    grid-area: price !important;
    grid-column: 1 / -1 !important;
    align-self: end !important;
    font-size: 11px !important;
    color: var(--muted-2) !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }

  /* Linha 2 do rodapé: Botão redondo ↗ de 44x44px à direita (sozinho se não houver preço antigo) */
  .card-foot {
    grid-area: foot !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    align-self: center !important;
    justify-self: end !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
    height: 44px !important;
  }
  .card-foot-left {
    display: none !important;
  }
  .offer-grid .card-foot .btn,
  .offer-grid .card-foot .btn-ink,
  .volume-grid .card-foot .btn,
  .volume-grid .card-foot .btn-ink {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 2px 2px 0 var(--ink) !important;
    border: 2px solid var(--ink) !important;
    background: var(--ink) !important;
    color: var(--white) !important;
  }
  .card-foot .btn-buy-text {
    display: none !important;
  }

  /* Página de série: botão Tenho compacto com área de toque de 44x44px */
  .volume-card .card-foot .btn-have {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 2px 2px 0 var(--ink) !important;
    border: 2px solid var(--ink) !important;
  }
  .volume-card .card-foot .btn-have .have-txt {
    display: none !important;
  }
}


/* ========================================================
   FASE 2 PARTE B: NÃO ACHOU? PEÇA UM MANGÁ & EM ALTA AGORA
   ======================================================== */

/* 1. Botão flutuante só no celular (aparece após rolar ~600px) */
.floating-ask-wrap {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: askPillFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes askPillFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.btn-floating-ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  height: 44px;
  box-sizing: border-box;
  background: var(--accent);
  color: var(--white);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0 16px 0 8px;
  font-family: var(--font-display, inherit);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
  touch-action: manipulation;
}

.btn-floating-ask:hover,
.btn-floating-ask:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}

.btn-floating-ask:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.ask-mascot-pill {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.btn-floating-close {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  cursor: pointer;
  touch-action: manipulation;
}

.btn-floating-close .close-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink, #111);
  background: var(--white, #fff);
  color: var(--ink, #111);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--ink, #111);
  transition: background 0.15s ease;
}

.btn-floating-close:hover .close-icon {
  background: #eee;
}

@media (min-width: 701px) {
  .floating-ask-wrap {
    display: none !important;
  }
}

/* 2. Link na barra de ordem (home e /ofertas) */
.order-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}





@media (max-width: 700px) {
  .order-bar-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }

  .order-bar-row .seg {
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;
  }

  .order-bar-row .seg a {
    flex: 1 1 50%;
    text-align: center;
    white-space: nowrap;
    padding: 8px 10px;
  }

  .order-bar-row 
}

.trending-preview-badge {
  display: inline-block;
  background: #ffecb5;
  color: #8f5b00;
  border: 1.5px solid #8f5b00;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 2px 2px 0 #8f5b00;
}

/* 3. Folha curta / Diálogo "Não achou? Peça um mangá" */
dialog.request-dialog {
  border: none;
  background: transparent;
  padding: 16px;
  max-width: 440px;
  width: 100%;
  margin: auto;
  box-sizing: border-box;
}

dialog.request-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

.request-sheet-inner {
  background: var(--paper, #faf8f4);
  border: 3px solid var(--ink, #111);
  box-shadow: 6px 6px 0 var(--ink, #111);
  padding: 22px 20px;
  position: relative;
  box-sizing: border-box;
}

.request-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.request-sheet-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
  color: var(--ink, #111);
}

.request-sheet-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border: 2px solid var(--ink, #111);
  background: var(--white, #fff);
  color: var(--ink, #111);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink, #111);
  padding: 0;
}

.request-sheet-hint {
  font-size: 13px;
  color: #555;
  margin: 0 0 16px 0;
  line-height: 1.4;
}

.request-field-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.request-input {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--ink, #111);
  background: var(--white, #fff);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
}

.request-input:focus {
  border-color: var(--color-accent, #c92a2a);
  box-shadow: 2px 2px 0 var(--ink, #111);
}

.request-submit-btn {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.request-success-box {
  border: 2px dashed var(--ink, #111);
  background: var(--white, #fff);
  padding: 16px;
  text-align: center;
  margin-top: 4px;
}

.request-success-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink, #111);
  margin-bottom: 6px;
}

.request-success-desc {
  font-size: 14px;
  color: #444;
  margin: 0 0 14px 0;
}

.request-success-box .btn-tg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

/* 4. Faixa horizontal "Em alta agora" */
.trending-section {
  margin: 28px auto 20px;
  padding: 0 var(--gutter, 16px);
  box-sizing: border-box;
}

.trending-head {
  margin-bottom: 12px;
}

.trending-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trending-subtitle {
  font-family: var(--font-body, inherit);
  font-size: 12px;
  font-weight: normal;
  color: #666;
  text-transform: none;
  letter-spacing: 0;
  display: inline-block;
  margin-left: 6px;
}

.trending-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.trending-track::-webkit-scrollbar {
  height: 6px;
}

.trending-track::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.trending-card {
  flex: 0 0 240px;
  min-width: 240px;
  max-width: 240px;
  scroll-snap-align: start;
  position: relative;
  background: var(--white, #fff);
  border: 2px solid var(--ink, #111);
  box-shadow: 3px 3px 0 var(--ink, #111);
  padding: 10px 10px 10px 38px;
  box-sizing: border-box;
  display: flex;
  border-radius: 2px;
}

.trending-rank {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display, inherit);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  color: var(--color-accent, #c92a2a);
  width: 26px;
  text-align: center;
  user-select: none;
}

.trending-card-inner {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: center;
  min-width: 0;
}

.trending-cover-link {
  flex: 0 0 54px;
  width: 54px;
  height: 81px;
  border: 1.5px solid var(--ink, #111);
  overflow: hidden;
  background: #edeae2;
  display: block;
  text-decoration: none;
}

.trending-cover-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.trending-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.trending-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trending-title-link {
  color: var(--ink, #111);
  text-decoration: none;
}

.trending-title-link:hover {
  text-decoration: underline;
}

.trending-sub {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trending-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
}

.trending-price {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink, #111);
  white-space: nowrap;
}

.trending-old-price {
  font-size: 11px;
  color: #888;
  text-decoration: line-through;
  white-space: nowrap;
}

.trending-action {
  margin-top: 4px;
}

.trending-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border: 1.5px solid var(--ink, #111);
  background: var(--ink, #111);
  color: var(--white, #fff);
  text-decoration: none;
  box-shadow: 1.5px 1.5px 0 #000;
  touch-action: manipulation;
}

.trending-buy-btn:hover {
  background: var(--color-accent, #c92a2a);
}


/* Botão "Não achou? Peça um mangá" na barra de ordem */
.btn-ask {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px 0 8px;
  background: var(--white); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1;
  cursor: pointer; white-space: nowrap; touch-action: manipulation;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-ask strong { color: var(--accent); font-weight: 900; }
.btn-ask-mascot { width: 30px; height: 30px; object-fit: contain; flex: none; }
.btn-ask:hover, .btn-ask:focus-visible { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-ask:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

@media (max-width: 700px) {
  .order-bar-row { gap: 12px; }
  .order-bar-row .btn-ask { width: 100%; justify-content: center; align-self: stretch; }
}

/* Faixa "Não achou?" dentro da grade */
.grid-ask-banner {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 16px;
  background-color: var(--paper-2);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  padding: 16px 18px; margin: 6px 0; box-sizing: border-box;
}
.grid-ask-mascot { width: 72px; height: 72px; object-fit: contain; flex: none; }
.grid-ask-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.grid-ask-title { font-size: 20px; line-height: 1.15; color: var(--ink); }
.grid-ask-text { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.grid-ask-btn { align-self: flex-start; margin-top: 4px; min-height: 44px; box-shadow: 3px 3px 0 var(--ink); }

@media (max-width: 700px) {
  .grid-ask-banner { padding: 14px; gap: 12px; }
  .grid-ask-mascot { width: 56px; height: 56px; }
  .grid-ask-title { font-size: 17px; }
  .grid-ask-btn { align-self: stretch; }
}


@media (min-width: 1101px) {
  .hero { min-height: 440px; }
  .hero-inner { padding-top: 36px; padding-bottom: 40px; }
  .hero-copy { gap: 14px; }
  .hero h1 { font-size: clamp(40px, 4.2vw, 62px); }
}

/* Página /series */
.series-index { display: flex; flex-direction: column; gap: 16px; }
.series-index-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
/* Tarefa 114: campo com sugestões de séries (mesma caixa da busca do topo, embaixo do campo). */
.series-index-search .sif { position: relative; flex: 1 1 320px; min-width: 0; display: flex; }
.series-index-search .sif input[type="search"] { flex: 1 1 auto; min-width: 0; }
.series-index-search input[type="search"] {
  flex: 1 1 320px; min-height: 48px; padding: 0 14px;
  border: 2.5px solid var(--ink); border-radius: 4px; background: var(--white);
  font: 500 16px var(--font-body); color: var(--ink);
}
.series-index-search select {
  flex: 0 1 220px; min-height: 48px; padding: 0 12px;
  border: 2.5px solid var(--ink); border-radius: 4px; background: var(--white);
  font: 700 15px var(--font-body); color: var(--ink);
}
.series-index-search .btn { min-height: 48px; }
.series-index-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.series-letters { display: flex; gap: 6px; flex-wrap: wrap; }
.series-letters a {
  min-width: 36px; height: 36px; padding: 0 8px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--white);
  font: 400 14px var(--font-display); color: var(--ink); text-decoration: none;
}
.series-letters a[aria-current="true"] { background: var(--ink); color: var(--white); }
@media (max-width: 700px) {
  .series-index-search .sif { flex: 1 1 100%; }
  .series-index-search input[type="search"] { flex: 1 1 100%; }
  .series-index-search select { flex: 1 1 0; min-width: 0; }
  .series-index-search .btn { flex: 0 0 auto; padding: 0 18px; }
  .series-letters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .series-letters a { flex: none; min-width: 40px; height: 40px; }
  .series-index .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .series-card .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .series-card .card-meta,
  .series-card .series-card-stats {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

@media (min-width: 701px) {
  .series-letters { gap: 4px; flex-wrap: nowrap; }
  .series-letters a { min-width: 32px; height: 34px; padding: 0 6px; font-size: 13px; }
}

/* Bloco Série Completa no card aberto */
.vol-series-panel { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 6px; }
.vol-series-cta {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px 14px 16px;
  background-color: var(--paper-2);
  background-image: radial-gradient(rgba(17,17,17,.10) 1.1px, transparent 1.6px);
  background-size: 9px 9px;
  border: 3px solid var(--ink); border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ink);
  color: var(--ink); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.vol-series-cta:hover, .vol-series-cta:focus-visible { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.vol-series-cta:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.vol-series-cta-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.vol-series-cta-kicker { font: 900 11px var(--font-body); letter-spacing: .12em; color: var(--accent); }
.vol-series-cta-title { font-size: 17px; line-height: 1.2; color: var(--ink); }
.vol-series-cta-arrow {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--white);
  border: 2.5px solid var(--ink); border-radius: 4px;
  font-size: 22px; font-weight: 900; line-height: 1;
}
.vol-series-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vol-series-steps .vol-subnav-btn { width: 100%; }
@media (max-width: 700px) { .vol-series-cta-title { font-size: 16px; } }


/* Botão Voltar e Migalhas na Série e Volume */
.series-crumbs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.btn-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px;
  background: var(--white); color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 4px;
  box-shadow: 3px 3px 0 var(--ink);
  font: 900 15px var(--font-body); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-back:hover, .btn-back:focus-visible { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }
.btn-back span { font-size: 18px; line-height: 1; }
.series-crumbs .crumb { font-size: 14px; font-weight: 700; color: var(--muted); }
.series-crumbs .crumb a { color: var(--ink); }
@media (max-width: 700px) {
  .series-header { padding-top: 16px; }
  .series-crumbs { margin-bottom: 14px; }
  .series-crumbs .crumb { display: none; }
}

/* Barra de baixo do card aberto no celular: preço em 1 linha e botão ajustado */
@media (max-width: 700px) {
  .vol-detail-foot .vol-action-price-wrap { flex: 0 0 auto; min-width: 0; }
  .vol-detail-foot .vol-action-main-price { white-space: nowrap; font-size: 20px; line-height: 1.1; }
  .vol-detail-foot .vol-action-old-price { display: block; white-space: nowrap; }
  .vol-detail-foot .vol-action-label { display: block; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vol-detail-foot .vol-action-buy { flex: 1 1 auto; min-width: 0; padding: 0 12px; font-size: 14px; white-space: nowrap; }
}

@media (max-width: 700px) {
  .vol-detail-foot .vol-action-buy { font-size: 13px; gap: 6px; padding: 0 10px; }
  .vol-detail-foot .vol-action-buy svg { width: 13px; height: 13px; flex: none; }
}

@media (max-width: 700px) {
  .vol-detail-full .vol-detail-foot { padding: 10px 10px 12px; gap: 10px; }
}



/* ==========================================================================
   Ajustes de cards, preco, filtros e dados do volume (23/10/2026)
   ========================================================================== */

/* 1. Titulo cortado no meio da linha (celular) */
@media (max-width: 700px) {
  .card .card-title {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }
  .card .card-title .card-series-name-link,
  .card .card-title .card-title-link {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    word-break: break-word;
  }
  .series-card .card-title .card-series-name-link {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
}

/* 2. Preco "a partir de" padronizado (cards de serie) */
.series-card-stats .min-price {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  font-size: 12px; line-height: 1.3; color: var(--muted-2);
}
.series-card-stats .min-price strong {
  display: block; white-space: nowrap;
  font-size: 20px; line-height: 1.15; color: var(--ink);
}
@media (max-width: 700px) {
  .series-card-stats .min-price strong { font-size: 18px; }
}

/* 3. Texto dos .seg centralizado (todo o site) */
.seg a, .seg button { justify-content: center; text-align: center; }
@media (max-width: 700px) { .seg a, .seg button { flex: 1 1 0; } }

/* 4. Filtro da pagina da serie vira chips */
button.chip { font-family: inherit; cursor: pointer; }
.chip.active { background: var(--ink); color: var(--white); }
.series-vol-filters { gap: 10px; }
@media (max-width: 700px) {
  .series-vol-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .series-vol-filters .chip { flex: 0 0 auto; }
}

/* 5. Quadrado vazio nos dados do volume */
.vol-data-grid .vol-data-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 701px) {
  .vol-data-grid .vol-data-cell:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
@media (max-width: 700px) {
  .vol-data-grid .vol-data-cell:last-child:nth-child(odd) {
    border-right: none;
  }
  .vol-data-grid .vol-data-cell:first-child:nth-last-child(-n+2),
  .vol-data-grid .vol-data-cell:first-child:nth-last-child(-n+2) ~ .vol-data-cell {
    border-bottom: none;
  }
}


/* ==========================================================================
   Correcoes da Revisao (23/10/2026)
   ========================================================================== */

/* 1. Card de oferta com titulo de 2 linhas: altura automatica */
@media (max-width: 700px) {
  .offer-grid .card { height: auto !important; max-height: none !important; }
  .offer-grid .card-body { height: auto !important; grid-template-rows: auto auto auto auto auto !important; }
  .offer-grid .card-meta { line-height: 12px !important; }
}

/* 2. Filtro da serie: esconder cards com hidden */
.volume-grid article[data-vol-id][hidden] { display: none !important; }

/* 3. Pagina do volume aberta direto: esconder navegacoes duplicadas */
.vol-detail-full .vol-list-nav,
.vol-detail-full .vol-series-head-nav { display: none !important; }

.vol-detail-full .vol-detail-head { display: none !important; }


/* ===== Guias ===== */
.guia-hero { background: var(--paper); border-bottom: 3px solid var(--ink); }
.guia-hero-inner { max-width: 860px; padding-top: 28px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 12px; }
.guia-kicker { align-self: flex-start; background: var(--ink); color: var(--white); font: 900 12px var(--font-body); letter-spacing: .14em; padding: 5px 10px; }
.guia-title { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; margin: 0; }
.guia-summary { font-size: 18px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 40em; }
.guia-meta { font-size: 14px; font-weight: 700; color: var(--muted-2); margin: 0; }
.guia-cover { margin: 12px 0 0; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--white); }
.guia-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.guia-body { max-width: 760px; }

.prose blockquote p:first-child strong:first-child {
  display: inline-block; background: var(--accent); color: var(--white);
  padding: 3px 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.prose blockquote ul { margin: 8px 0 0; }

.prose .guia-fig { margin: 28px 0; }
.prose .guia-fig img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--white); }
.prose .guia-fig figcaption { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }

.prose table { width: 100%; border-collapse: collapse; margin: 20px 0 24px; font-size: 16px; background: var(--white); border: 3px solid var(--ink); }
.prose th, .prose td { border: 2px solid var(--ink); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.45; }
.prose th { background: var(--ink); color: var(--white); font-weight: 900; }

.prose .guia-cta { margin: 28px 0; display: flex; flex-wrap: wrap; gap: 12px; }
.prose .guia-cta a.btn { text-decoration: none; }

.guide-top--img { height: auto !important; padding: 0 !important; aspect-ratio: 16 / 9; display: block; position: relative; overflow: hidden; border-bottom: 3px solid var(--ink); }
.guide-top--img .guide-top-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide-top--img .kicker { position: absolute; left: 12px; bottom: 12px; }
.guide-bottom .s { font-size: 14px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 700px) {
  .guia-hero-inner { padding-top: 16px; padding-bottom: 24px; }
  .guia-summary { font-size: 16px; }
  .guia-cover { box-shadow: 4px 4px 0 var(--ink); }
  .prose { font-size: 17px; }
  .prose table { display: block; overflow-x: auto; font-size: 14px; -webkit-overflow-scrolling: touch; }
  .prose th, .prose td { padding: 8px; min-width: 120px; }
  .prose .guia-cta .btn, .prose .guia-cta .btn-ask { width: 100%; justify-content: center; }
}


@media (max-width: 700px) {
  .prose table { display: table; overflow: visible; table-layout: fixed; width: 100%; font-size: 14px; }
  .prose th, .prose td { min-width: 0; padding: 8px; overflow-wrap: break-word; hyphens: auto; }
}

/* ===== Autocomplete da busca (24/10) ===== */
.header-search { overflow: visible; }
.header-search .search-suggestions-dropdown {
  top: calc(100% + 8px);
  left: -2px;
  right: auto;
  width: 440px;
  max-width: calc(100vw - 32px);
}
.search-suggestions-dropdown {
  max-height: min(560px, calc(100vh - 120px));
  overscroll-behavior: contain;
}
.search-suggestion-group {
  padding: 8px 14px 6px;
  font: 900 11px/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--paper);
  border-bottom: 1.5px solid #e3dccd;
}
.search-suggestion-item { border-bottom: 1.5px solid #e3dccd; }
.search-suggestion-item.is-active,
.search-suggestion-item:focus-visible {
  background: var(--paper-2);
  box-shadow: inset 4px 0 0 var(--accent);
  outline: none;
}
.search-suggestion-title {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.search-suggestion-title mark,
.search-suggestion-alt mark {
  background: none;
  color: var(--accent);
  font-weight: 900;
}
.search-suggestion-alt {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggestion-sub {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggestion-price {
  flex: none;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.search-suggestion-price strong {
  font: 400 16px/1.1 var(--font-display);
  color: var(--ink);
  white-space: nowrap;
}
.search-suggestion-off {
  font: 900 11px/1.4 var(--font-body);
  color: var(--white);
  background: var(--accent);
  padding: 0 6px;
  border-radius: 3px;
}
.search-suggestion-footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
}
.search-suggestion-footer a.is-active {
  color: var(--accent);
  text-decoration: underline;
}
.search-suggestion-empty { padding: 18px 14px; }
.search-suggestion-empty p {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink);
}
.search-suggestion-ask { margin: 0 auto; }
@media (max-width: 700px) {
  .search-suggestions-dropdown {
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
  }
  .search-suggestion-item { min-height: 64px; }
}

.search-suggestion-nostock {
  font: 900 11px/1.4 var(--font-body);
  color: var(--muted);
  border: 1.5px solid var(--muted);
  padding: 0 6px;
  border-radius: 3px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  #conteudo { padding-bottom: 84px; }
}

/* Caminho de navegação no padrão do site (24/10) */
.series-crumbs .crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.series-crumbs .crumb a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.series-crumbs .crumb a:hover,
.series-crumbs .crumb a:focus-visible {
  background: var(--paper-2);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
}
.series-crumbs .crumb-sep {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.series-crumbs .crumb-current {
  font-weight: 900;
  color: var(--ink);
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {
  .series-crumbs .crumb { display: none; }
}

/* Auditoria 24/10: alvos de toque de 44 px no celular */
@media (max-width: 820px) {
  .mobile-actions .btn-search-mobile { min-height: 44px; min-width: 44px; justify-content: center; }
  .mobile-menu summary { width: 44px; min-height: 44px; }
}
@media (max-width: 520px) {
  .mobile-actions .btn-header-cta { width: 44px; min-height: 44px; }
}
@media (max-width: 700px) {
  .carousel-arrow { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .recent-buy-btn { min-height: 44px; }
  .edition-tab { min-height: 44px; }
  .quick-vol-input { height: 44px; min-height: 44px; }
  [data-quick-btn] { min-height: 44px; }
  .request-sheet-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .search-suggestion-footer { padding: 0; }
  .search-suggestion-footer a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; }
}

@media (max-width: 700px) {
  .vol-detail-modal { padding-bottom: 88px; }
}

/* 24/10: "Ver oferta" com 44 px (vence o !important antigo) e botão flutuante escondido na página da série */
@media (max-width: 700px) {
  .recent-buy-btn { min-height: 44px !important; }
}
body:has([data-active-edition]) #floating-ask-wrap { display: none !important; }

/* 24/10: card que sobra na última linha de /guias não estica */ .guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* 24/10: link para o guia na página da série */
.series-guide-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%; margin: 4px 0 14px; padding: 6px 14px; background: #fff; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink); font-weight: 700; text-decoration: none; line-height: 1.25; }
.series-guide-link:hover { background: var(--ink); color: #fff; }
.series-guide-kicker { flex: none; background: #E4002B; color: #fff; font-size: 11px; letter-spacing: .06em; padding: 2px 6px; }
/* 24/10: preço de capa sai da grade e vai para "Onde comprar" */
.vol-mobile-cover-price { display: none !important; }
@media (min-width: 701px) {
  .vol-data-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.vol-price-compare { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: -10px; padding: 8px 12px; border: 2.5px solid var(--ink); border-top-style: dashed; border-top-width: 2px; background: var(--paper-2); font-size: 13px; color: var(--muted); }
.vol-price-compare-cover b { color: var(--ink); }
.vol-price-compare-cover s { color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.vol-price-compare-save { background: var(--accent); color: var(--white); font-weight: 900; font-size: 12px; letter-spacing: .02em; padding: 4px 8px; }
/* 24/10: dados do volume numa linha abaixo do autor (opção B) */
.vol-detail-meta { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.vol-detail-meta b { color: var(--ink); font-weight: 700; }
.vol-detail-meta-line span + span::before { content: "·"; margin: 0 6px; color: #b0a796; }
@media (max-width: 700px) { .vol-detail-meta { font-size: 12.5px; } }
/* 24/10: linha de dados do volume não quebra no meio dos itens */ .vol-detail-meta-line span { white-space: nowrap; } @media (max-width: 700px) { .vol-detail-meta-line span { display: block; } .vol-detail-meta-line span + span::before { content: none; } }

/* ===== 24/10: Minha coleção v2 (estante de lombadas) ===== */
.cv-head { position: relative; overflow: hidden; }
.cv-bg-kanji { position: absolute; right: -10px; top: -18px; font-family: "Dela Gothic One", sans-serif; font-size: 170px; line-height: 1; color: rgba(17,17,17,.05); pointer-events: none; }
.cv { padding-top: 6px; padding-bottom: 48px; }
.cv [hidden] { display: none !important; }
.cv.loading .cv-shelf { min-height: 220px; opacity: .5; }

.cv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cv-stat { background: var(--white); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px 14px; }
.cv-n { font-size: 30px; line-height: 1; }
.cv-l { font-size: 12px; font-weight: 900; letter-spacing: .08em; color: var(--muted); margin-top: 6px; }
.cv-stat.red { background: var(--accent); color: var(--white); }
.cv-stat.red .cv-l { color: #ffd9df; }
.cv-local { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
@media (max-width: 700px) { .cv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-n { font-size: 26px; } }

.cv-tabs { display: flex; margin: 24px 0 16px; border-bottom: 3px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.cv-tab { flex: none; background: none; border: 0; padding: 12px 16px; min-height: 44px; font-weight: 900; font-size: 15px; color: var(--muted); cursor: pointer; position: relative; }
.cv-tab.on { color: var(--ink); }
.cv-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; background: var(--accent); }
.cv-c { display: inline-block; min-width: 22px; padding: 1px 6px; margin-left: 6px; font-size: 12px; background: var(--paper-2); border: 1.5px solid var(--ink); color: var(--ink); }
.cv-tab.promo .cv-c { background: var(--accent); border-color: var(--accent); color: var(--white); }

.cv-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 420px) { .cv-shelf { grid-template-columns: minmax(0, 1fr); } }
.cv-card { position: relative; min-width: 0; background: var(--white); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); display: flex; flex-direction: column; }
.cv-top { display: flex; gap: 14px; padding: 14px; }
.cv-cover { width: 74px; height: 108px; flex: none; border: 2.5px solid var(--ink); display: flex; align-items: flex-end; padding: 6px; overflow: hidden; color: var(--white); font-family: "Dela Gothic One", sans-serif; font-size: 11px; line-height: 1.05; text-decoration: none; position: relative; }
.cv-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-cover.sm { width: 42px; height: 60px; padding: 0; }
.cv-info { flex: 1; min-width: 0; }
.cv-name { font-size: 19px; line-height: 1.1; margin: 0; }
.cv-name a { color: var(--ink); text-decoration: none; }
.cv-ed { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.cv-prog { margin-top: 10px; height: 12px; border: 2px solid var(--ink); background: var(--paper-2); position: relative; overflow: hidden; }
.cv-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width .5s cubic-bezier(.2,.9,.3,1.2); }
.cv-prog-l { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 5px; font-weight: 700; }
.cv-prog-l span:last-child { color: var(--muted); font-weight: 500; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cv-chip { font-size: 11.5px; font-weight: 900; padding: 2px 7px; border: 1.5px solid var(--ink); background: var(--paper); }
.cv-chip.hole { background: #fff1f3; border-color: var(--accent); color: var(--accent); }
.cv-chip.next { background: var(--ink); color: var(--white); }
.cv-stamp { position: absolute; right: 10px; top: 10px; z-index: 2; transform: rotate(8deg); border: 3px solid var(--accent); color: var(--accent); font-family: "Dela Gothic One", sans-serif; font-size: 13px; padding: 2px 8px; background: rgba(255,255,255,.88); }
.cv-foot { display: flex; border-top: 2.5px solid var(--ink); }
.cv-foot > * { flex: 1; min-height: 44px; background: var(--white); border: 0; font-weight: 900; font-size: 13.5px; color: var(--ink); text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cv-foot > * + * { border-left: 2.5px solid var(--ink); }
.cv-foot > *:hover { background: var(--paper-2); }
.cv-foot .buy { background: var(--accent); color: var(--white); }
.cv-foot .buy:hover { background: #c30025; }

.cv-map { display: none; min-width: 0; border-top: 2.5px dashed var(--ink); padding: 12px 14px 14px; background: var(--paper); }
.cv-card.open .cv-map { display: block; }
.cv-map-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.cv-legend { display: flex; gap: 10px; flex-wrap: wrap; }
.cv-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cv-lg { width: 12px; height: 12px; border: 1.5px solid var(--ink); display: inline-block; }
.cv-lg.miss { border: 1.5px dashed var(--accent); background: rgba(255,255,255,.6); }
.cv-lg.tag { background: var(--accent); }
.cv-ranges { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 4px 10px; margin: 0 -4px; min-width: 0; }
.cv-rg { flex: none; min-height: 36px; padding: 0 10px; border: 2px solid var(--ink); background: var(--white); font-weight: 900; font-size: 12.5px; cursor: pointer; position: relative; }
.cv-rg.full { background: var(--ink); color: var(--white); }
.cv-rg.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.cv-rg.has-promo::after { content: ""; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); }
.cv-bookshelf { padding-top: 26px; }
.cv-bookshelf + .cv-bookshelf { margin-top: 14px; }
.cv-books { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; align-items: end; padding: 0 4px; }
.cv-plank { height: 12px; background: var(--ink); margin: 0 -2px; box-shadow: 0 4px 0 #6b5f4e; }
.cv-spine { position: relative; padding: 0; border: 2px solid var(--ink); border-bottom: 0; background: var(--c, #1c2a4a); color: var(--white); font-family: "Dela Gothic One", sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer; transition: transform .15s; }
.cv-spine:hover { transform: translateY(-4px); }
.cv-spine:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cv-spine .bar { width: 56%; height: 4px; background: var(--accent); margin-top: 8px; }
.cv-spine .kj { writing-mode: vertical-rl; font-size: 10px; letter-spacing: .05em; }
.cv-spine .num { font-size: clamp(10px, 2.6vw, 14px); line-height: 1; margin-bottom: 6px; }
.cv-spine.miss { background: rgba(255,255,255,.6); border: 2px dashed var(--accent); border-bottom: 0; color: var(--ink); }
.cv-spine.miss .bar, .cv-spine.miss .kj { visibility: hidden; }
.cv-spine.slide { animation: cv-slidein .4s cubic-bezier(.2,.9,.3,1.2); }
@keyframes cv-slidein { from { transform: translateY(-36px); opacity: 0; } to { transform: none; opacity: 1; } }
.cv-ptag { position: absolute; top: -24px; left: 50%; z-index: 2; transform: translateX(-50%) rotate(-6deg); background: var(--accent); color: var(--white); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 900; font-size: 9.5px; padding: 2px 4px; white-space: nowrap; border: 1.5px solid var(--ink); }
.cv-quick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; font-size: 13px; font-weight: 700; }
.cv-quick input { width: 64px; height: 44px; border: 2.5px solid var(--ink); padding: 0 8px; font-weight: 900; font-size: 15px; margin-left: 6px; }
.cv-quick button { height: 44px; border: 2.5px solid var(--ink); background: var(--ink); color: var(--white); font-weight: 900; padding: 0 14px; cursor: pointer; }

.cv-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.cv-seg { display: inline-flex; border: 2.5px solid var(--ink); }
.cv-seg button { border: 0; background: var(--white); padding: 0 12px; min-height: 44px; font-weight: 900; font-size: 13px; cursor: pointer; }
.cv-seg button + button { border-left: 2.5px solid var(--ink); }
.cv-seg button.on { background: var(--ink); color: var(--white); }
.cv-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.cv-toggle input { width: 20px; height: 20px; accent-color: var(--accent); }
.cv-list { display: flex; flex-direction: column; gap: 10px; }
.cv-more { min-height: 44px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 900; font-size: 13px; padding: 0 14px; cursor: pointer; }
.cv-row { display: flex; align-items: center; gap: 12px; background: var(--white); border: 2.5px solid var(--ink); padding: 10px 12px; transition: opacity .2s, transform .2s; }
.cv-row.out { opacity: 0; transform: translateX(20px); }
.cv-ri { flex: 1; min-width: 0; }
.cv-rt { font-weight: 900; font-size: 14.5px; }
.cv-rs { font-size: 12.5px; color: var(--muted); }
.cv-holeflag { font-size: 11px; font-weight: 900; color: var(--accent); margin-left: 6px; }
.cv-rp { text-align: right; }
.cv-rp b { font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-size: 19px; display: block; line-height: 1.1; white-space: nowrap; }
.cv-rp small { font-size: 12px; color: var(--muted); }
.cv-pct { background: var(--accent); color: var(--white); font-family: "Zen Kaku Gothic New", sans-serif; font-size: 11.5px; font-weight: 900; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.cv-ract { display: flex; flex-direction: column; gap: 6px; }
.cv-ract a, .cv-ract button { min-height: 40px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 900; font-size: 12.5px; padding: 0 10px; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.cv-ract a { background: var(--accent); border-color: var(--accent); color: var(--white); }
.cv-ract a.ghost { background: var(--white); border-color: var(--ink); color: var(--ink); }
@media (max-width: 560px) {
  .cv-row { flex-wrap: wrap; }
  .cv-ri { flex-basis: calc(100% - 60px); }
  .cv-rp { text-align: left; flex: 1; }
  .cv-ract { flex-direction: row; }
}
.cv-note { padding: 18px; border: 2.5px dashed var(--ink); text-align: center; color: var(--muted); }

.cv-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
@media (max-width: 420px) { .cv-pgrid { grid-template-columns: minmax(0, 1fr); } }
.cv-pc { position: relative; display: flex; gap: 10px; background: var(--white); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px; }
.cv-pc .cv-cover.sm { width: 56px; height: 80px; }
.cv-burst { position: absolute; top: -10px; right: -8px; background: var(--accent); color: var(--white); font-weight: 900; font-size: 12px; padding: 5px 7px; border: 2px solid var(--ink); transform: rotate(6deg); }
.cv-pt { font-weight: 900; font-size: 14px; }
.cv-pv { font-size: 12.5px; color: var(--muted); }
.cv-pp { font-size: 20px; margin-top: 6px; }
.cv-pc s { font-size: 12px; color: var(--muted); }
.cv-pc a[data-offer] { display: inline-flex; align-items: center; min-height: 36px; margin-top: 4px; font-weight: 900; font-size: 13px; color: var(--ink); }

.cv-foot-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.cv-foot-actions button { background: none; border: 2px solid var(--ink); padding: 0 12px; min-height: 44px; font-weight: 700; font-size: 13px; cursor: pointer; }
.cv-foot-actions .danger { border-color: var(--accent); color: var(--accent); }

.cv-empty { text-align: center; padding: 20px 0 10px; }
.cv-empty-boom { display: block; margin: 0 auto 8px; animation: cv-wobble 3s ease-in-out infinite; }
@keyframes cv-wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) scale(1.04); } }
.cv-empty h2 { font-size: 26px; margin: 6px 0; }
.cv-empty > p { color: var(--muted); max-width: 460px; margin: 0 auto 14px; }
.cv-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin: 18px auto 20px; }
.cv-step { background: var(--white); border: 2.5px solid var(--ink); padding: 12px; text-align: left; font-size: 13.5px; }
.cv-step b { display: block; color: var(--accent); font-size: 22px; font-weight: 400; }
@media (max-width: 600px) { .cv-steps { grid-template-columns: minmax(0, 1fr); } }

.cv-toast { position: fixed; left: 50%; bottom: 20px; z-index: 300; transform: translateX(-50%) translateY(140px); max-width: calc(100% - 32px); background: var(--ink); color: var(--white); font-weight: 700; font-size: 14px; padding: 11px 16px; border: 2px solid var(--white); box-shadow: 4px 4px 0 var(--accent); transition: transform .25s cubic-bezier(.2,.9,.3,1.2); }
.cv-toast.on { transform: translateX(-50%) translateY(0); }
/* Tarefa 115: o toast escondido (sem .on) aparecia como um quadradinho preto no print/captura de tela inteira. */
.cv-toast:not(.on) { visibility: hidden; }
.cv-toast button { background: none; border: 0; color: #ffd0d8; font-weight: 900; margin-left: 10px; cursor: pointer; text-decoration: underline; min-height: 32px; }
@media (prefers-reduced-motion: reduce) { .cv-spine.slide, .cv-empty-boom { animation: none; } .cv-prog i, .cv-toast, .cv-row { transition: none; } }
/* 24/10/2026 22h: aviso da Minha coleção na largura do texto e "Desfazer" com 44 px */
.cv-toast { width: max-content; text-align: center; }
.cv-toast button { min-height: 44px; padding: 0 6px; }
/* 24/10/2026 22h: Minha coleção na página da série (faixa que muda + estante). Prefixo .scol- */
.scol { margin-top: 20px; max-width: 560px; border: 2.5px solid var(--ink); background: var(--white); box-shadow: 5px 5px 0 var(--ink); }
.scol[hidden], .scol [hidden] { display: none !important; }
.scol.is-loading { visibility: hidden; }
.scol-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 2.5px solid var(--ink); background: var(--white); color: var(--ink); font-family: var(--font-body); font-weight: 900; font-size: 15px; text-decoration: none; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.scol-btn.red { background: var(--accent); color: var(--white); }
.scol-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.scol-invite { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.scol-invite-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.scol-invite-txt strong { font-size: 16px; font-weight: 400; line-height: 1.2; }
.scol-invite-txt span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.scol-invite .scol-btn { flex: none; }
.scol-prog { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.scol-prog-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.scol-title { font-size: 14px; }
.scol-count { font-size: 14px; font-weight: 700; }
.scol-count b { font-size: 22px; font-weight: 400; }
.scol-bar { height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); overflow: hidden; }
.scol-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.scol-next { font-size: 14.5px; }
.scol-pct { color: var(--accent); font-weight: 900; }
.scol-muted { color: var(--muted); }
.scol-done { color: var(--accent); font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.scol-actions { display: flex; gap: 10px; }
.scol-buy { display: flex; flex: 1; min-width: 0; }
.scol-buy:empty { display: none; }
.scol-buy .scol-btn { flex: 1; }
.scol-backdrop { display: none; }
.scol-panel { border-top: 2.5px dashed var(--ink); background: var(--paper); padding: 14px 16px 16px; }
.scol-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.scol-panel-h .display { font-size: 18px; }
.scol-pn { font-size: 14px; font-weight: 900; }
.scol-hint { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.scol-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--muted); }
.scol-legend span { display: inline-flex; align-items: center; gap: 5px; }
.scol-lg-own { background: #1c2a4a; }
.scol-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 8px 10px; border: 2px solid var(--ink); background: var(--white); font-size: 14px; font-weight: 700; }
.scol-quick label { display: inline-flex; align-items: center; gap: 8px; }
.scol-quick input { width: 64px; height: 44px; border: 2.5px solid var(--ink); padding: 0 8px; font-weight: 900; font-size: 16px; font-family: var(--font-body); }
.scol-quick button { margin-left: auto; height: 44px; border: 2.5px solid var(--ink); background: var(--ink); color: var(--white); font-weight: 900; font-size: 14px; padding: 0 16px; cursor: pointer; }
.scol-close { width: 100%; margin-top: 14px; }
.scol .cv-rg { min-height: 44px; min-width: 64px; }
.scol .cv-ptag { font-size: 9px; padding: 2px 2px; letter-spacing: -.2px; }
@media (max-width: 700px) {
  .scol { max-width: none; }
  .scol-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(17, 17, 17, .55); }
  .scol.is-open .scol-backdrop { display: block; }
  .scol-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 401; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; border-top: 3px solid var(--ink); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 0 rgba(17, 17, 17, .15); animation: scol-up .25s cubic-bezier(.2, .9, .3, 1.1); }
  .scol-invite { padding: 12px 14px; }
}
@keyframes scol-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
html.scol-lock, html.scol-lock body { overflow: hidden; }
@media (min-width: 701px) { html.scol-lock, html.scol-lock body { overflow: visible; } }
.volume-card:has(.btn-have.active) .card-cover::after { content: "TENHO"; position: absolute; left: 50%; top: 46%; z-index: 3; transform: translate(-50%, -50%) rotate(-12deg); border: 3px solid var(--accent); color: var(--accent); background: rgba(244, 238, 226, .92); font-family: var(--font-display); font-size: 18px; padding: 4px 10px; letter-spacing: 1px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .scol-panel { animation: none; } .scol-bar i { transition: none; } }
/* 24/10/2026 22h45: com a folha da coleção aberta no celular, o aviso vai para o topo, por cima da folha */
@media (max-width: 700px) {
  html.scol-lock .cv-toast { z-index: 402; top: 16px; bottom: auto; transform: translateX(-50%) translateY(-160px); }
  html.scol-lock .cv-toast.on { transform: translateX(-50%) translateY(0); }
}
/* 24/10/2026 23h10: fundo dos cards com raios (a cor de cada card continua); capa desenhada com bolinhas */
.card-cover.halftone, .series-card-cover.halftone { background-image: repeating-conic-gradient(from 0deg at 50% 50%, rgba(17,17,17,.12) 0deg 2.2deg, transparent 2.2deg 10deg); background-size: auto; }
.book .b-vol.speed-ink { background-image: radial-gradient(rgba(255,255,255,.22) 1.3px, transparent 1.8px); background-size: 9px 9px; }
/* 25/10/2026 0h10: card do volume aberto no celular vira folha que se ajusta ao conteúdo; lojas em lista (.vsl-) */
.vsl { border: 2.5px solid var(--ink); background: var(--white); }
.vsl-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px 12px; padding: 10px 10px 10px 14px; }
.vsl-item + .vsl-item { border-top: 2px dashed #b9b0a0; }
.vsl-item.best { background: #FFF4F1; }
.vsl-name { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; font-weight: 900; font-size: 14px; }
.vsl-best { font-size: 9.5px; font-weight: 900; letter-spacing: .5px; background: var(--ink); color: var(--white); padding: 2px 5px; white-space: nowrap; }
.vsl-time { grid-column: 1; grid-row: 2; font-size: 11.5px; color: var(--muted); }
.vsl-prices { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.vsl-price { font-size: 22px; line-height: 1; white-space: nowrap; }
.vsl-pct { font-size: 11.5px; font-weight: 900; background: var(--accent); color: var(--white); padding: 1px 6px; }
.vsl-link { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; min-width: 64px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 4px; background: var(--white); color: var(--ink); font-weight: 900; font-size: 14px; text-decoration: none; white-space: nowrap; }
.vsl-item.best .vsl-link { background: var(--accent); color: var(--white); }
@media (max-width: 359px) { .vsl-item { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding-left: 12px; } .vsl-name { grid-column: 1 / 3; } .vsl-time { grid-column: 1 / 3; } .vsl-prices { grid-column: 1; grid-row: 3; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; } .vsl-link { grid-column: 2; grid-row: 3; min-width: 56px; padding: 0 10px; } }
@media (max-width: 767px) {
  dialog.vol-dialog { top: auto; bottom: 0; height: auto; max-height: calc(100dvh - 24px); border-top: 3px solid var(--ink); box-shadow: 0 -6px 0 rgba(17, 17, 17, .25); animation: mbSheetUp .25s cubic-bezier(.2, .9, .3, 1); }
  .vol-detail-modal { min-height: 0; padding-bottom: 0; }
  .vol-detail-modal .vol-drag-handle { display: flex; justify-content: center; padding: 8px 0 2px; }
  .vol-detail-modal .vol-drag-handle span { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--ink); opacity: .35; }
  .vol-detail-foot .vol-action-price-wrap { max-width: none; flex: 0 0 auto; }
  .vol-detail-foot .vol-action-label { max-width: none; overflow: visible; }
  .vol-detail-foot .vol-action-prices { flex-direction: column; align-items: flex-start; gap: 0; }
  .vol-detail-foot .vol-action-buy { white-space: normal; line-height: 1.15; text-align: center; height: auto; min-height: 48px; padding: 6px 10px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { dialog.vol-dialog { animation: none; } }
/* 25/10/2026 3h: divulgação do grupo do WhatsApp (botão verde, faixa com arte, menu e topo) */
.btn-wa { background: #25D366; color: var(--ink); border: 2.5px solid var(--ink); }
.btn-wa:hover, .btn-wa:focus-visible { background: #1EBE5A; color: var(--ink); }
.btn-wa svg { flex: none; }
.header-actions .btn-header-tg-icon { padding: 0 12px; }
.header-actions .btn-wa { gap: 8px; white-space: nowrap; }
.mobile-actions .btn-wa-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; background: #25D366; color: var(--ink); border: 2.5px solid var(--ink); }
.mobile-panel .menu-channels { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 2px dashed #c9c0b0; }
.mobile-panel .menu-channels a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 2.5px solid var(--ink); font-weight: 900; font-size: 15px; text-decoration: none; box-shadow: 3px 3px 0 var(--ink); }
.mobile-panel .menu-channels .btn-wa { background: #25D366; color: var(--ink); }
.mobile-panel .menu-channels .menu-tg { background: var(--accent); color: var(--white); }
.request-success-box .btn-wa { margin-bottom: 8px; }
.grid-wa-banner { grid-column: 1 / -1; display: flex; flex-direction: column; margin: 6px 0; border: 3px solid var(--ink); background: var(--white); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; box-sizing: border-box; }
.gwa-art { display: block; background: var(--paper); }
.gwa-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 3px solid var(--ink); }
.gwa-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-width: 0; }
.gwa-kicker { align-self: flex-start; background: #25D366; color: var(--ink); border: 2px solid var(--ink); font-weight: 900; font-size: 11px; letter-spacing: 1px; padding: 2px 8px; }
.gwa-title { font-size: 22px; line-height: 1.12; }
.gwa-text { margin: 0; font-size: 14.5px; line-height: 1.45; }
.gwa-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 18px; font-size: 16px; font-weight: 900; box-shadow: 4px 4px 0 var(--ink); text-align: center; }
.gwa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gwa-tg { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 900; font-size: 14px; color: var(--ink); text-decoration: underline; }
.gwa-out { font-size: 12px; font-weight: 700; color: var(--muted); }
.gwa-note { margin: 0; padding-top: 10px; border-top: 2px dashed #c9c0b0; font-size: 12px; line-height: 1.45; color: var(--muted); }
@media (min-width: 768px) {
  .grid-wa-banner { flex-direction: row; align-items: stretch; }
  .gwa-art { flex: 0 0 36%; border-right: 3px solid var(--ink); }
  .gwa-art img { height: 100%; aspect-ratio: 4 / 3; border-bottom: 0; }
  .gwa-body { justify-content: center; padding: 24px 28px; }
  .gwa-title { font-size: 28px; }
  .gwa-btn { align-self: flex-start; }
}
@media (max-width: 1359px) { .header-actions .wa-lbl-long, .header-actions .btn-header-tg-icon { display: none; } }
/* 25/10/2026 3h20: topo cabe em celular de 320 px (logo um pouco menor, botões com 44 px mantidos) */
@media (max-width: 359px) { .site-header .wrap { padding-left: 14px; padding-right: 14px; } .site-header .logo-words .big { font-size: 11.5px; } .site-header .logo-mascot { width: 28px; height: auto; } .mobile-actions { gap: 4px; } }
/* 25/10/2026 3h40: Telegram no azul oficial, logos oficiais e topo do celular com o Telegram (opção A aprovada) */
.btn-tg-blue { background: #26A5E4; color: var(--ink); border-color: var(--ink); }
.btn-tg-blue:hover, .btn-tg-blue:focus-visible { background: #1E96D1; color: var(--ink); }
.btn-tg-blue svg { flex: none; }
.mobile-actions .btn-tg-icon { display: none; }
.mobile-panel .menu-channels .menu-tg { background: #26A5E4; color: var(--ink); }
.gwa-tg svg { color: #26A5E4; flex: none; }
.footer-col .footer-ch { display: inline-flex; align-items: center; gap: 8px; }
.footer-col .footer-ch-wa svg { color: #25D366; flex: none; }
.footer-col .footer-ch-tg svg { color: #26A5E4; flex: none; }
@media (max-width: 1120px) {
  .site-header .wrap { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .site-header .logo { gap: 4px; }
  .site-header .logo-mascot { width: 30px; height: auto; }
  .site-header .logo-words .big { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1; }
  .mobile-actions { gap: 4px; }
  .mobile-actions .btn-tg-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; }
  .mobile-actions .btn-wa-icon .wa-pill-txt { display: none; }
}
@media (min-width: 390px) and (max-width: 1120px) {
  .mobile-actions .btn-wa-icon { width: auto; min-width: 44px; gap: 5px; padding: 0 9px 0 7px; font-size: 13.5px; font-weight: 900; white-space: nowrap; }
  .mobile-actions .btn-wa-icon .wa-pill-txt { display: inline; }
}
/* 25/10/2026 11h15: faixas da estante sem corte no PC, balão do "ACHEI!" fora do caminho do Boomzinho */
.cv-ranges { position: relative; }
.carousel-mascot-unit { flex: 0 0 104px; width: 104px; }
.carousel-manga-bubble { left: 50px; top: -16px; width: 56px; }

/* 25/10/2026 15h40: conta opcional — folha no celular, janela central no PC, cartão do convite na coleção */
html.conta-lock { overflow: hidden; }

.conta-dialog {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
  max-width: 100%;
}
.conta-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }

.conta-inner {
  position: relative;
  background: var(--paper, #f4eee2);
  border-top: 3px solid var(--ink, #111);
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.conta-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.conta-title { margin: 0; font-size: 20px; line-height: 1.2; color: var(--ink, #111); }

.conta-close {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink, #111);
  background: var(--white, #fff);
  color: var(--ink, #111);
  font-size: 24px; line-height: 1;
  box-shadow: 2px 2px 0 var(--ink, #111);
  cursor: pointer; padding: 0;
}

.conta-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; width: 100%;
  padding: 12px 14px;
  background: var(--white, #fff);
  border: 2px solid var(--ink, #111);
  box-shadow: 3px 3px 0 var(--ink, #111);
  color: var(--ink, #111);
  font-weight: 700; font-size: 16px; text-decoration: none;
  box-sizing: border-box;
}
.conta-google:hover { background: #f7f7f7; }

.conta-ou { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: #6b6b6b; font-size: 13px; }
.conta-ou::before, .conta-ou::after { content: ''; flex: 1; height: 2px; background: #d9cfba; }
.conta-ou span { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.conta-form { display: block; margin: 0; }
.conta-lbl { display: block; font-size: 13px; font-weight: 700; color: #3b3b3b; margin: 0 0 6px; }

.conta-input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--ink, #111);
  background: var(--white, #fff);
  color: var(--ink, #111);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  box-sizing: border-box;
}
.conta-input:focus { outline: 3px solid rgba(228, 0, 43, .35); outline-offset: 1px; }

.conta-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px;
  margin-top: 12px;
  font-size: 16px;
  box-sizing: border-box;
}
.conta-btn[disabled] { opacity: .55; cursor: not-allowed; }
.conta-btn-danger { background: var(--accent, #e4002b); color: #fff; border-color: var(--ink, #111); }

.conta-erro { margin: 10px 0 0; color: #b3122e; font-size: 14px; font-weight: 700; line-height: 1.35; }
.conta-priv { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #5a5a5a; }
.conta-priv a { color: inherit; text-decoration: underline; }

.conta-txt { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--ink, #111); word-break: break-word; }
.conta-dica { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #5a5a5a; }

.conta-link {
  display: block; width: 100%; min-height: 44px;
  margin-top: 6px; padding: 10px;
  background: none; border: 0;
  color: var(--ink, #111); font: inherit; font-size: 14px; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

.conta-email { margin: 0 0 4px; font-size: 16px; font-weight: 700; word-break: break-all; }
.conta-meta { margin: 0 0 14px; font-size: 13px; color: #5a5a5a; }
.conta-acoes { display: grid; gap: 10px; }
.conta-acoes .conta-btn { margin-top: 0; }

.cv-convite {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 18px;
  padding: 16px;
  background: var(--white, #fff);
  border: 3px solid var(--ink, #111);
  box-shadow: 5px 5px 0 var(--ink, #111);
  box-sizing: border-box;
}
.cv-convite-boom { flex: 0 0 auto; width: 76px; height: auto; }
.cv-convite-txt { min-width: 0; }
.cv-convite-txt h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.2; }
.cv-convite-txt p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: #3b3b3b; }
.cv-convite-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cv-convite-acoes .btn { min-height: 44px; }
.cv-convite-nao {
  min-height: 44px; padding: 10px 12px;
  background: none; border: 0; color: #5a5a5a;
  font: inherit; font-size: 14px; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

.cv-conta-linha { margin: 0 0 14px; font-size: 14px; color: #3b3b3b; }
.cv-conta-btn {
  min-height: 44px; padding: 6px 10px;
  background: none; border: 0; color: var(--accent, #e4002b);
  font: inherit; font-size: 14px; font-weight: 900;
  text-decoration: underline; cursor: pointer;
}

@media (min-width: 768px) {
  .conta-dialog { inset: 0; margin: auto; max-width: 420px; height: max-content; }
  .conta-inner {
    border: 3px solid var(--ink, #111);
    box-shadow: 6px 6px 0 var(--ink, #111);
    padding: 24px;
    max-height: none;
  }
}

@media (max-width: 359px) {
  .cv-convite { gap: 10px; padding: 14px; }
  .cv-convite-boom { width: 56px; }
}

/* 25/10/2026: [hidden] precisa vencer os display:flex das peças da conta */
.cv-convite[hidden],
.cv-conta-linha[hidden],
.conta-dialog [hidden] { display: none !important; }
/* 25/10/2026: apagar conta — link discreto, confirmação e spinner */
.conta-apagar-link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin: 8px 0 0; padding: 10px;
  background: none; border: 0; cursor: pointer;
  color: #B3001E; font: inherit; font-size: 14.5px; font-weight: 900;
  text-decoration: underline; text-underline-offset: 2px;
}
.conta-apagar-link:hover { color: #8f0017; }
.conta-dialog [data-conta-painel="confirmar"] .conta-txt { margin: 0 0 10px; }
.conta-spin {
  display: inline-block; width: 16px; height: 16px; margin-right: 10px;
  border: 3px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%;
  animation: conta-gira .7s linear infinite;
}
@keyframes conta-gira { to { transform: rotate(360deg); } }
.conta-btn-danger[data-travado] { opacity: 1; cursor: pointer; }
.conta-btn-danger.conta-apagando { opacity: .85; }
/* 25/10/2026 23h40: lista de lojas no card do volume (plano das lojas, parte 2) — ul.vsl, selo PRÉ-VENDA e linhas discretas */
ul.vsl { list-style: none; margin: 0; padding: 0; }
.vsl-lista .vsl-name { overflow-wrap: anywhere; }
.vsl-pre { font-size: 9.5px; font-weight: 900; letter-spacing: .5px; background: var(--ink); color: var(--white); padding: 2px 5px; white-space: nowrap; }
.vsl-item:not(.best) .vsl-price { font-size: 18px; }
.vsl-item:not(.best) .vsl-link { background: transparent; }
/* 26/10/2026 0h20: lojas no card abaixo de 400 px em 3 andares (selos+nome, preço+desconto na base, botão de largura total) */
@media (max-width: 399px) {
  .vsl-lista .vsl-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; }
  .vsl-lista .vsl-name { grid-column: 1; grid-row: 1; }
  .vsl-lista .vsl-time { grid-column: 1; grid-row: 2; white-space: nowrap; }
  .vsl-lista .vsl-prices { grid-column: 1; grid-row: 3; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; }
  .vsl-lista .vsl-price { font-size: 22px; line-height: 1.1; }
  .vsl-lista .vsl-link { grid-column: 1; grid-row: 4; width: 100%; min-height: 44px; }
}
/* 26/10/2026: título comprido não estica mais a coluna do card do volume (rolagem lateral em 259 páginas) */
@media (max-width: 700px) {
  .vol-detail-body { grid-template-columns: 132px minmax(0, 1fr); }
  .vol-detail-heading-block { min-width: 0; }
  .vol-detail-title, .vol-detail-subtitle, .vol-detail-author, .vol-detail-meta, .vol-detail-badges { overflow-wrap: anywhere; }
}

/* 26/10/2026: "Lancamentos e pre-vendas" (home) e pagina /lancamentos - opcao 1: amarelo de revista shonen */
.lanc { background: #FFD400; }
.lanc-tex { background: repeating-conic-gradient(from 0deg at 85% -10%, rgba(17,17,17,.07) 0deg 3deg, transparent 3deg 9deg), radial-gradient(rgba(17,17,17,.16) 1.1px, transparent 1.7px) 0 0/8px 8px; }
.lanc-inner { position: relative; padding-top: 34px; padding-bottom: 42px; }
.lanc-cap { display: inline-block; background: #111; color: #fff; font: 400 14px/1 var(--font-display); padding: 5px 10px; }
.lanc-ttl { font: 400 34px/1.02 var(--font-display); color: #111; margin: 12px 0 8px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.lanc-ttl span { display: inline-block; background: #111; color: #FFD400; padding: 0 8px; transform: rotate(-1.5deg); }
.lanc-lede { font-size: 15px; line-height: 1.45; color: #111; margin: 0 0 16px; }
/* 26/10/2026: no celular o Boomzinho entra no fluxo (alinhado à direita) para não cobrir o título; no PC (900+) vai para o canto. */
.lanc-boom { display: block; width: 96px; height: 96px; object-fit: contain; margin: 2px 0 12px auto; }
/* 29/10/2026 (tarefa 110, proposta E aprovada): no celular a arte vai para a grade ao lado do parágrafo (a linha própria dela some); vale só entre 360 e 899 px — no PC (900+) e abaixo de 360 continua como era. */
@media (min-width:360px) and (max-width:899px){
  .lanc-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center}
  .lanc-inner>*{grid-column:1/-1}
  .lanc-inner>.lanc-lede{grid-column:1;margin-bottom:0;padding-bottom:12px}
  .lanc-inner>.lanc-boom{grid-column:2;grid-row:3;width:84px;height:84px;margin:0}
}
.lanc-tabs { display: flex; border: 2.5px solid #111; background: #fff; margin-bottom: 12px; }
.lanc-tabs a { flex: 1 1 0; min-width: 0; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; color: #111; background: #fff; line-height: 1.15; text-align: center; padding: 4px 2px; text-decoration: none; }
.lanc-tabs a small { font-weight: 700; font-size: 11px; opacity: .75; }
.lanc-tabs a + a { border-left: 2.5px solid #111; }
.lanc-tabs a.on { background: var(--accent); color: #fff; }
/* Tarefa 114: enquanto a seção de lançamentos troca de mês (resposta leve), a lista esmaece. */
.lanc.is-lanc-loading .lanc-list,
.lanc.is-lanc-loading .lanc-countline,
.lanc.is-lanc-loading .lanc-empty,
.lanc.is-lanc-loading .lanc-more { opacity: .55; }
.lanc-countline { font-size: 13px; font-weight: 900; color: #111; margin: 0 0 14px; }
.lanc-list { display: flex; flex-direction: column; gap: 12px; }
.lanc-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; background: #fff; border: 2.5px solid #111; box-shadow: 4px 4px 0 #111; padding: 12px; }
.lanc-cov { width: 52px; height: 74px; }
.lanc-cov img { display: block; width: 52px; height: 74px; object-fit: cover; border: 2px solid #111; box-sizing: border-box; background: #eee; }
.lanc-cov .book { width: 52px; height: 74px; border-width: 2px; box-shadow: none; }
.lanc-cov .book .b-title { font-size: 7px; line-height: 1.1; padding: 2px 3px 2px 6px; overflow-wrap: anywhere; }
.lanc-cov .book .b-vol { font-size: 16px; }
.lanc-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lanc-t { font-weight: 900; font-size: 15.5px; line-height: 1.25; color: #111; overflow-wrap: anywhere; }
.lanc-p { font-size: 12.5px; color: #4a4a4a; }
.lanc-tag { align-self: flex-start; font-size: 10.5px; font-weight: 900; letter-spacing: .07em; padding: 3px 8px; border: 2px solid #111; border-radius: 999px; margin-top: 2px; background: #fff; color: #111; }
.lanc-row.pre .lanc-tag { background: var(--accent); color: #fff; }
.lanc-row.saiu .lanc-tag { background: #111; color: #fff; }
.lanc-row.breve .lanc-tag { border-style: dashed; }
.lanc-buy { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 2px dashed #cfc6b4; padding-top: 10px; flex-wrap: wrap; }
.lanc-pr { display: block; font: 400 21px/1 var(--font-display); color: #111; }
.lanc-st { font-size: 12px; color: #4a4a4a; }
.lanc-none { font-size: 13px; color: #4a4a4a; }
.lanc-btn { min-height: 44px; padding: 0 14px; border: 2.5px solid #111; font-weight: 900; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: #111; color: #fff; box-shadow: 3px 3px 0 #111; text-decoration: none; }
.lanc-btn.red { background: var(--accent); color: #fff; }
.lanc-btn.ghost { background: #fff; color: #111; }
.lanc-more { display: flex; justify-content: center; margin-top: 22px; }
.lanc-more .lanc-btn { max-width: 100%; text-align: center; white-space: normal; box-shadow: 4px 4px 0 #111; }
.lanc-empty { background: #fff; border: 2.5px solid #111; box-shadow: 4px 4px 0 #111; padding: 16px; font-weight: 700; color: #111; }
.lanc-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 16px; }
.lanc-chip { min-height: 44px; padding: 0 14px; border: 2.5px solid #111; border-radius: 999px; font-weight: 900; font-size: 13.5px; display: inline-flex; align-items: center; background: #fff; color: #111; text-decoration: none; }
.lanc-chip.on { background: #111; color: #fff; }
@media (min-width: 900px) {
  .lanc-inner { padding-top: 44px; padding-bottom: 56px; }
  .lanc-ttl { font-size: 44px; }
  .lanc-boom { position: absolute; right: 24px; top: 26px; width: 140px; height: 140px; margin: 0; }
  .lanc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
}
@media (max-width: 359px) {
  .lanc-boom { display: none; }
  .lanc-ttl { font-size: 29px; }
}

/* 26/10/2026 (tarefa 38): os dois kanji do selo ficavam borrados na Dela Gothic One — só o kanji passa a usar fonte de sistema sem serifa (peso normal); "CAP. 02 ·" continua na fonte de display. */
.lanc-cap-jp { font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, "MS Gothic", sans-serif; font-weight: 400; font-size: 14px; letter-spacing: .03em; }
/* 26/10/2026 (tarefa 38): a 320 px o logo do rodapé empurrava a página 7 px para fora da tela (scrollWidth 327) — logo menor só abaixo de 360 px; os 4 botões do topo seguem com 44 px. */
@media (max-width: 359px) {
  .site-footer .logo-mascot { width: 44px; }
  .site-footer .logo-words .big { font-size: 20px; }
}

/* 26/10/2026 (tarefa 38): a grade de guias (minmax 300px, 1fr) empurrava a home 4 px para fora da tela a 320 px — 1 coluna ocupando a largura só abaixo de 360 px. */
@media (max-width: 359px) {
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
}
/* 27/10/2026 (tarefa 39, CAP. 03): "Avise-me" — botão no card e na página do volume, folha de
   escolha (sobe de baixo no celular; diálogo central no PC) e a seção "Meus avisos" da conta. */
.btn-aviso {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font: 700 13px var(--font-body);
  background: var(--accent);
  color: var(--white);
  border: 2px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
}
.btn-aviso:hover { background: var(--accent-dark); }
.btn-aviso.aviso-ativo { background: #E9F6EE; color: #0D5C2E; border-color: #0D5C2E; }

.aviso-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  padding: 8px 14px;
  font: 900 16px/1.2 var(--font-body);
  text-align: center;
  background: var(--white);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
}
.aviso-btn:hover { background: var(--paper-2); }
.aviso-btn-chegou { background: var(--accent); color: var(--white); }
.aviso-btn-chegou:hover { background: var(--accent-dark); }
.aviso-btn.aviso-ativo,
.aviso-btn-chegou.aviso-ativo {
  background: #E9F6EE;
  color: #0D5C2E;
  border-color: #0D5C2E;
  box-shadow: 4px 4px 0 #0D5C2E;
}
/* 27/10/2026 (tarefa 42): estado "Confirme no Telegram" — amarelo/neutro, sem dizer ativo. */
.aviso-confirme {
  background: #FFF4CC;
  color: #7A5A00;
  border-color: #7A5A00;
  box-shadow: 3px 3px 0 #7A5A00;
}
.aviso-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

dialog.aviso-dialog {
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  max-width: 440px;
  margin: auto;
}
dialog.aviso-dialog::backdrop { background: rgba(0, 0, 0, .65); backdrop-filter: blur(2px); }
.aviso-sheet {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 10px 16px 18px;
  box-sizing: border-box;
}
.aviso-grab { width: 44px; height: 5px; margin: 2px auto 12px; background: #9a958c; border-radius: 9px; }
.aviso-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.aviso-titulo { margin: 0; font-size: 20px; line-height: 1.15; }
.aviso-fechar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}
.aviso-frase { margin: 6px 0 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.aviso-seg { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); margin-bottom: 14px; }
.aviso-seg-op {
  min-height: 44px;
  padding: 6px 8px;
  font: 900 13px/1.25 var(--font-body);
  background: var(--paper-2);
  color: #9a958c;
  border: 0;
  cursor: pointer;
}
.aviso-seg-op.on { background: var(--ink); color: var(--white); }
.aviso-seg-op:disabled { cursor: not-allowed; }
.aviso-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin-bottom: 10px;
  padding: 12px;
  background: var(--white);
  border: 3px solid var(--ink);
  cursor: pointer;
  text-align: left;
}
.aviso-opt:hover { background: var(--paper-2); }
.aviso-ic {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 900;
}
.aviso-ic-tg { background: #26A5E4; }
.aviso-ic-email { background: var(--ink); }
.aviso-opt-txt { flex: 1 1 auto; min-width: 0; }
.aviso-opt-txt b { display: block; font-size: 16px; }
.aviso-opt-txt small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.aviso-opt-txt small b { display: inline; font-size: inherit; }
.aviso-go { font-weight: 900; font-size: 20px; }
.aviso-cancelar { margin: 4px 0 10px; }
.aviso-btn-cancelar {
  width: 100%;
  min-height: 48px;
  background: var(--white);
  color: var(--ink);
  border: 3px solid var(--ink);
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
}
.aviso-nota { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.aviso-legal { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.aviso-legal a { color: var(--ink); }

.conta-avisos { margin: 14px 0 4px; text-align: left; }
.conta-avisos-titulo { margin: 0 0 8px; font-size: 15px; font-weight: 900; }
.conta-avisos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.conta-avisos-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--white);
  border: 2px solid var(--ink);
}
.conta-avisos-info { min-width: 0; }
.conta-avisos-info b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.conta-avisos-info small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.conta-avisos-cancelar {
  min-height: 44px;
  padding: 0 12px;
  font-weight: 900;
  font-size: 13px;
  background: var(--white);
  border: 2px solid var(--ink);
  cursor: pointer;
}
.conta-avisos-cancelar:disabled { opacity: .6; }
.conta-avisos-vazio { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* Celular: a folha sobe de baixo, como a do card do volume. */
@media (max-width: 767px) {
  dialog.aviso-dialog { position: fixed; inset: auto 0 0 0; margin: 0; max-width: 100%; width: 100%; }
  .aviso-sheet { border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -4px 0 var(--ink); max-height: 88dvh; overflow-y: auto; }
}

/* Os chips do rodapé do card no celular ganham a área de toque de 44 px, como o "Tenho". */
@media (max-width: 700px) {
  .volume-card .card-foot .btn-aviso {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 12px !important;
  }
}

/* Tarefa 52: link pequeno da seção CAP. 03 ("Já tem avisos?") com área de toque de 44 px. */
.collection-copy .collection-mini {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 2px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.collection-copy .collection-mini:hover { color: var(--accent); }

/* 28/10: aviso só de "quando chegar"; o seletor de tipo some */
#aviso-seg { display: none !important; }
/* 28/10 (tarefa 66): "Avisar" e selo "em promoção" no padrão do site */
.card .card-foot .btn-aviso {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 12px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 var(--ink);
  font-weight: 900; font-size: 12.5px; letter-spacing: .06em;
}
.card .card-foot .btn-aviso:hover { background: var(--ink); color: var(--white); }
.card .card-foot .btn-aviso:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.series-meta-row .promo-selo {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 10px;
  background: var(--accent); color: var(--white);
  border: 2px solid var(--ink); border-radius: 0; box-shadow: 2px 2px 0 var(--ink);
  font: inherit; font-weight: 900; font-size: 12.5px; letter-spacing: .04em;
  transform: rotate(-2deg); cursor: pointer;
}
.series-meta-row .promo-selo:hover { transform: rotate(-2deg) translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.series-meta-row .promo-selo:active { transform: rotate(-2deg) translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
@media (max-width: 700px) { .series-meta-row .promo-selo { min-height: 36px; } }

/* 28/10 (tarefa 68): "Avise-me quando chegar" no padrão do site (branco, borda e sombra) */
.vol-unavail-box .aviso-btn.aviso-btn-chegou {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; padding: 0 16px;
  background: var(--white); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink);
  font-weight: 900; font-size: 15px; letter-spacing: .05em;
  cursor: pointer;
}
.vol-unavail-box .aviso-btn.aviso-btn-chegou:hover { background: var(--ink); color: var(--white); }
.vol-unavail-box .aviso-btn.aviso-btn-chegou:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

/* Tarefa 84 — aviso automático da coleção: a chave no topo da /colecao. */
.cv-aviso { margin: 16px 0 2px; }
.cv-aviso-box {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  padding: 14px; cursor: pointer; min-height: 44px;
}
.cv-aviso-box:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.cv-aviso-box:focus-visible { outline: 3px solid #e23b34; outline-offset: 2px; }
.cv-aviso-sw { flex: none; width: 52px; height: 30px; border: 3px solid var(--ink); background: var(--ink); position: relative; margin-top: 2px; }
.cv-aviso-sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; background: #fff; }
.cv-aviso-sw.off { background: #fff; }
.cv-aviso-sw.off::after { right: auto; left: 3px; background: var(--ink); }
.cv-aviso-txt { min-width: 0; }
.cv-aviso-txt b { display: block; font-weight: 900; font-size: 15px; line-height: 1.3; }
.cv-aviso-txt span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

/* Tarefa 97 (28/10/2026): paragrafo "sobre a serie" na pagina da serie.
   Texto normal de 14,5 px, cor #222, largura maxima de 62 caracteres, negrito nos numeros. */
.serie-sobre { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: #222; max-width: 62ch; }
.serie-sobre b { font-weight: 700; color: var(--ink); }