/* ==========================================================================
   megáfrica, páginas de cabazes e brinquedos, variante C
   cabazes.css, depende de styles.css.

   Regras mantidas: zero border-radius, zero emojis, zero travessões longos.
   O hero e a faixa de oferta 10+1 vivem em styles.css, partilhados com a
   home. Aqui ficam apenas os ajustes de conteúdo e as peças específicas
   de cabazes e brinquedos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hub, herói (réplica do herói da home)
   -------------------------------------------------------------------------- */

.hero--hub .hero__lead {
  max-width: 52ch;
}

/* Chips de preço, no mesmo chip da home (.hero__seal). */
.hero__seal--stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
}

.hero__seal--stat strong {
  color: var(--red-dark);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero__seal--stat span {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

/* Breadcrumb do hub sobre o papel do herói. */
.hero--hub .cabaz-breadcrumb {
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   2. Grupos e grelha de cartões
   -------------------------------------------------------------------------- */

.cabaz-count {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.cabaz-count strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.cabaz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

/* Ajustes do cartão de produto para cabazes */
.cabaz-grid .product-card__media {
  aspect-ratio: 4 / 3;
}

.cabaz-grid .product-card__name {
  font-size: 1.02rem;
}

.cabaz-grid .product-card__desc {
  min-height: 3.1em;
}

.cabaz-card__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cabaz-card__price strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cabaz-card__price span {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.cabaz-points {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 8px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.cabaz-points strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. Detalhe, herói
   -------------------------------------------------------------------------- */

.cabaz-hero {
  border-bottom: 1px solid var(--line);
}

.cabaz-hero .page-hero__inner {
  max-width: none;
}

/* Breadcrumb simples: chevrons vermelhos, sem caixas. */
.cabaz-breadcrumb {
  margin-bottom: 16px;
}

.cabaz-breadcrumb li {
  border: 0;
  background: none;
  padding: 0;
}

.cabaz-breadcrumb li + li::before {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.55rem;
  color: var(--red-action);
}

.cabaz-breadcrumb a {
  color: var(--ink-soft);
  border-bottom: 0;
}

.cabaz-breadcrumb a:hover {
  color: var(--red-dark);
  border-bottom-color: transparent;
}

.cabaz-breadcrumb [aria-current="page"] {
  background: none;
  color: var(--ink);
  font-weight: 600;
}

.cabaz-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.cabaz-hero__media .seal {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  transform: rotate(-1.5deg);
}

.cabaz-hero__copy {
  min-width: 0;
}

.cabaz-hero__title {
  margin: 8px 0 10px;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.cabaz-hero__lead {
  max-width: 56ch;
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.55;
}

.cabaz-resumo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 18px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.cabaz-resumo li {
  position: relative;
  padding-left: 18px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.cabaz-resumo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background: var(--red-action);
}

.cabaz-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.cabaz-hero__meta .cabaz-points {
  margin-top: 0;
}

.cabaz-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   4. Detalhe, corpo
   -------------------------------------------------------------------------- */

.cabaz-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.cabaz-main {
  min-width: 0;
}

.cabaz-composition {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 22px 18px;
  margin-top: 36px;
}

.cabaz-composition .section-head {
  margin-bottom: 14px;
}

.cabaz-composition .section-head__actions {
  align-items: center;
}

.cabaz-composition__toggle {
  min-height: 44px;
}

.cabaz-sobre {
  margin-bottom: 10px;
}

.cabaz-sobre .section-head {
  margin-bottom: 14px;
}

.cabaz-sobre .cabaz-resumo {
  margin-top: 14px;
}

@media (min-width: 640px) {
  .cabaz-composition {
    padding: 28px;
  }
}

.cabaz-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.cabaz-group {
  border: 1px solid var(--line);
  background: var(--white);
}

.cabaz-group summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
  transition: background-color var(--dur-1) var(--ease);
}

.cabaz-group summary::-webkit-details-marker {
  display: none;
}

.cabaz-group summary:hover {
  background: var(--paper);
}

.cabaz-group summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.cabaz-group[open] summary {
  border-bottom: 1px solid var(--line);
  background: var(--sand);
}

.cabaz-group__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  background: var(--red-action);
  color: var(--white);
  font-size: 0.85rem;
}

.cabaz-group__name {
  flex: 1;
  min-width: 0;
}

.cabaz-group__count {
  flex: none;
  padding: 3px 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cabaz-group__chevron {
  flex: none;
  color: var(--red-action);
  font-size: 0.8rem;
  transition: transform var(--dur-2) var(--ease-out);
}

.cabaz-group[open] .cabaz-group__chevron {
  transform: rotate(180deg);
}

.cabaz-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 10px 14px 14px;
  list-style: none;
}

.cabaz-items li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.9rem;
  line-height: 1.4;
}

.cabaz-items li:last-child {
  border-bottom: 0;
}

.cabaz-qty {
  flex: none;
  min-width: 28px;
  padding: 1px 6px;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Ticket da oferta incluída */
.cabaz-oferta {
  margin-top: 26px;
  border: 1px solid var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

.cabaz-oferta__head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px dashed var(--line-strong);
  padding: 12px 14px;
}

.cabaz-oferta__head i {
  color: var(--red-action);
  font-size: 1.05rem;
}

.cabaz-oferta__head h2 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.cabaz-oferta ul {
  margin: 0;
  padding: 12px 14px;
  list-style: none;
}

.cabaz-oferta li {
  position: relative;
  padding: 4px 0 4px 20px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.cabaz-oferta li::before {
  content: "\f0da";
  position: absolute;
  left: 0;
  top: 4px;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--red-action);
}

.cabaz-note {
  margin-top: 18px;
}

/* --------------------------------------------------------------------------
   5. Detalhe, sidebar
   -------------------------------------------------------------------------- */

/* A sidebar é secundária: só existe em desktop e fica à direita. */
.cabaz-aside {
  display: none;
}

.cabaz-cta {
  border: 1px solid var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-1);
  padding: 16px;
}

.cabaz-cta__price {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cabaz-cta__hint {
  margin: 0 0 12px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

.cabaz-cta .btn--block + .btn--block {
  margin-top: 8px;
}

.cabaz-cta__more {
  display: block;
  margin-top: 12px;
}

.cabaz-info {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 16px;
}

.cabaz-info h2 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cabaz-info ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabaz-info li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 0.87rem;
  line-height: 1.45;
}

.cabaz-info li i {
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   6. Relacionados e faixa final
   -------------------------------------------------------------------------- */

.cabaz-related .cabaz-grid {
  margin-top: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Faixa final no estilo 10+1, com o número de pontos em destaque.
   O número e a etiqueta ficam empilhados para "1 500" caber na coluna. */
.offer-band--points .offer-band__figure {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: clamp(3rem, 9vw, 4.2rem);
  letter-spacing: -0.05em;
}

.offer-band--points .offer-band__figure span:last-child {
  font-size: 0.32em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.offer-band--hub-points .offer-band__figure {
  width: max-content;
  max-width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-left: 4px solid var(--white);
  text-shadow: 3px 3px 0 rgba(17, 17, 17, 0.18);
}

.offer-band--toys .toy-collage {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 260px;
  aspect-ratio: 5 / 4;
}

.toy-collage__image {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 3px solid var(--white);
  background: var(--white);
}

.toy-collage__image--main {
  grid-row: 1 / 3;
}

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

@media (min-width: 900px) {
  .offer-band--toys .offer-band__inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 48px;
  }
}

/* Faixa sem número gigante, para páginas sem pontos. */
@media (min-width: 900px) {
  .offer-band--plain .offer-band__inner {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (min-width: 1200px) {
  .offer-band--plain .offer-band__inner {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

/* --------------------------------------------------------------------------
   7. Brinquedos
   -------------------------------------------------------------------------- */

.brinquedo-age {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--gold-soft);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.brinquedo-age strong {
  color: var(--paper);
  font-size: 0.9rem;
}

.brinquedo-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.brinquedo-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.brinquedo-fact {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 12px;
}

.brinquedo-fact strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brinquedo-fact span {
  font-size: 0.92rem;
  font-weight: 600;
}

.brinquedo-demo {
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   8. Responsivo
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .cabaz-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cabaz-resumo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabaz-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }
}

@media (min-width: 1024px) {
  .cabaz-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cabaz-related .cabaz-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cabaz-hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 34px;
  }

  .cabaz-layout {
    grid-template-columns: minmax(0, 1fr) 304px;
  }

  .cabaz-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 104px;
  }

  .brinquedo-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media print {
  .cabaz-aside,
  .cabaz-related,
  .offer-band {
    display: none !important;
  }

  .cabaz-layout,
  .cabaz-hero__grid {
    display: block;
  }

  .cabaz-group {
    break-inside: avoid;
  }
}