.section {
  padding-block: clamp(3.25rem, 6.5vw, 6rem);
}

.section--rule {
  border-top: 1px solid var(--line);
}

.section--plum {
  background: var(--deep);
  color: white;
}

.section--plum :where(h1, h2, h3, h4) {
  color: white;
}

.section--plum :where(p, .lead) {
  color: var(--on-deep);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.section-head > div > p {
  max-width: 48ch;
  margin-top: 0.75rem;
  color: var(--muted);
}

.section-head > a,
.section-more {
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 640;
}

.section-more {
  margin-top: 1.5rem;
}

.narrow {
  width: min(calc(100% - 3rem), 48.75rem);
  margin-inline: auto;
}

.lead {
  max-width: 65ch;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.6;
}

.breadcrumbs {
  width: min(calc(100% - 3rem), var(--max));
  margin: 1.35rem auto 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.breadcrumbs li:not(:last-child)::after {
  color: var(--line);
  content: "/";
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 620;
}

.page-intro {
  width: min(calc(100% - 3rem), var(--max));
  margin-inline: auto;
  padding-block: clamp(2.25rem, 5vw, 4.75rem);
}

.page-intro:not(.page-intro--split) {
  max-width: min(calc(100% - 3rem), 64rem);
}

.page-intro--split {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.page-intro--split > .page-intro__copy,
.page-intro--split > .page-intro__media {
  min-width: 0;
}

.page-intro__media {
  min-width: 0;
}

.page-intro__media img,
.stain-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  object-fit: cover;
}

.page--product .page-intro--split {
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
}

.page--product .page-intro__media {
  display: grid;
  min-height: 22rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  place-items: center;
}

.page--product .page-intro__media .product-photo {
  width: auto;
  max-width: 100%;
  height: clamp(15rem, 29vw, 23rem);
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
}

.page--product .page-intro__media figcaption {
  width: 100%;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: left;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 2.875rem;
  padding: 0.75rem 1.2rem;
  border-radius: 0.5rem;
  background: var(--brand);
  color: white;
  font-size: 0.9rem;
  font-weight: 680;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

.btn:hover {
  background: var(--deep);
  color: white;
}

.btn--secondary,
.btn.secondary {
  border: 1px solid var(--brand);
  background: transparent;
  color: var(--accent-ink);
}

.btn--secondary:hover,
.btn.secondary:hover {
  background: var(--soft);
  color: var(--accent-ink);
}

.btn--quiet {
  background: transparent;
  color: var(--brand);
  text-decoration: underline;
}

.arrow {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  vertical-align: middle;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(21rem, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.75rem);
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 6rem);
}

.home-hero h1 em,
.home-hero h1 strong {
  color: var(--brand);
  font-style: normal;
}

.home-hero__media {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--soft);
}

.home-hero__media img {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  object-fit: cover;
}

.home-hero__caption {
  padding: 1.4rem 1.65rem 1.55rem;
}

.home-hero__caption h2 {
  font-size: 1.5rem;
}

.home-hero__caption a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  color: var(--accent-ink);
  font-size: 0.84rem;
  font-weight: 680;
}

.stain-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.25rem;
}

.stain-grid--catalog {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stain-card {
  min-width: 0;
}

.stain-card > a,
a.stain-card {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.stain-card img {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 0.85rem;
  border-radius: 0.75rem;
  object-fit: cover;
  transition: outline-color 150ms ease-out;
}

.stain-card__title,
.stain-card > a > span,
a.stain-card > span {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 690;
  line-height: 1.35;
}

.stain-card a:hover img,
a.stain-card:hover img {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.stain-card p {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.media-credit {
  max-width: 75ch;
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.context-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem 2rem;
}

.context-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.context-card:hover {
  color: var(--brand);
}

.context-card h3 {
  color: inherit;
  font-size: 1.2rem;
}

.context-card p {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.83rem;
  flex: 1;
}

.context-card__link {
  margin-top: 1rem;
  font-size: 0.78rem;
  font-weight: 680;
}

.section--plum .context-card {
  border-top-color: rgb(247 223 242 / 36%);
  color: white;
}

.section--plum .context-card:hover {
  color: white;
}

.section--plum .context-card p {
  color: var(--on-deep);
}

.section--plum .detail-link,
.section--plum .detail-link:hover,
.section--plum .detail-link:focus-visible {
  color: white;
}

.section--plum .detail-link {
  text-decoration-color: rgb(247 223 242 / 72%);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.product-card {
  display: flex;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.product-card__media,
.product-card > .photo,
.product-card > a.photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 13rem;
  padding: 1.5rem 1.6rem 1rem;
  background: var(--paper);
}

.product-card__media img,
.product-card > .photo img,
.product-card > a.photo img,
.product-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__body {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  padding: 1rem 1.2rem 1.35rem;
}

.product-card__body h2,
.product-card__body h3 {
  font-size: 1.02rem;
}

.product-card__body h2 a,
.product-card__body h3 a {
  text-decoration: none;
}

.product-card__body p {
  margin-block: 0.75rem;
  color: var(--muted);
  font-size: 0.82rem;
  flex: 1;
}

.detail-link {
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 630;
}

.product-card__buy {
  padding: 1rem 1.2rem 1.2rem;
  border-top: 1px solid var(--line);
  background: var(--soft);
}

.product-card__buy > :first-child {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--accent-ink);
  font-size: 0.7rem;
  font-weight: 680;
}

.shops {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.product-card .shops {
  flex-direction: column;
}

.shop-link,
.shops a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.4rem;
  font-size: 0.77rem;
  font-weight: 690;
  line-height: 1.25;
  text-decoration: none;
}

.shop-link--amazon,
.shops .amazon {
  background: var(--amazon);
  color: white;
}

.shop-link--amazon:hover,
.shops .amazon:hover {
  background: #111d22;
  color: white;
}

.shop-link--mercado-livre,
.shops .ml {
  background: var(--mercado-livre);
  color: #433b17;
}

.shop-link--mercado-livre:hover,
.shops .ml:hover {
  background: #f4d649;
  color: #302a10;
}

.commerce-note {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.tips-grid > a {
  display: block;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
}

.tips-grid h3 {
  min-height: 2.75em;
  font-size: 1.08rem;
}

.tips-grid p {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.article,
.prose {
  max-width: 72ch;
}

.article > :where(p, ul, ol, dl, table, blockquote),
.prose > :where(p, ul, ol, dl, table, blockquote) {
  margin-top: 1rem;
}

.article > :where(h2, h3, h4),
.prose > :where(h2, h3, h4) {
  margin-top: 2.75rem;
  margin-bottom: 0.8rem;
}

.article :where(ul, ol),
.prose :where(ul, ol) {
  padding-left: 1.25rem;
}

.article li + li,
.prose li + li {
  margin-top: 0.45rem;
}

.article :where(th, td),
.prose :where(th, td) {
  padding: 0.8rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.article th,
.prose th {
  color: var(--accent-ink);
  font-size: 0.83rem;
}

.answer-first {
  max-width: 72ch;
  margin-block: 0 2rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--accent-ink);
  font-size: 1.04rem;
  font-weight: 560;
}

.answer-first > :where(h2, h3) {
  margin-bottom: 0.6rem;
  color: var(--accent-ink);
  font-size: 1.3rem;
}

.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
  align-items: start;
  gap: clamp(2rem, 6vw, 4.5rem);
}

.guide-aside {
  position: sticky;
  top: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--soft);
}

.guide-aside h2 {
  font-size: 1.3rem;
}

.guide-aside ul {
  padding-left: 1.15rem;
  margin-block: 1rem 1.25rem;
  font-size: 0.86rem;
}

.condition-panel {
  margin-block: 2rem 2.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.condition-panel > h2,
.condition-panel legend {
  margin-bottom: 0.55rem;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 720;
  letter-spacing: -0.02em;
}

.condition-panel > p {
  max-width: 65ch;
  color: var(--muted);
  font-size: 0.88rem;
}

.condition-panel fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.condition-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.condition-field {
  min-width: 0;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 660;
}

.condition-field select,
.condition-field input:not([type="checkbox"]):not([type="radio"]),
.condition-panel select,
.condition-panel input:not([type="checkbox"]):not([type="radio"]) {
  display: block;
  width: 100%;
  min-height: 2.8rem;
  margin-top: 0.45rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid #8c7587;
  border-radius: 0.4rem;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 450;
}

.condition-check,
.condition-panel label:has(input[type="checkbox"]) {
  display: flex;
  align-items: start;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding-block: 0.6rem;
  font-size: 0.86rem;
  font-weight: 560;
}

.condition-check input,
.condition-panel input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--brand);
  flex: 0 0 auto;
}

.condition-feedback {
  min-height: 1.5em;
  margin-top: 1rem;
  color: var(--accent-ink);
  font-size: 0.86rem;
  font-weight: 620;
}

.method-list {
  max-width: 72ch;
}

.method-card {
  padding-block: 2rem 2.25rem;
  border-top: 1px solid var(--line);
}

.method-card:last-child {
  border-bottom: 1px solid var(--line);
}

.method-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.method-card__number {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  place-items: center;
  background: var(--deep);
  color: white;
  font-size: 0.92rem;
  font-weight: 740;
}

.method-card__head h2,
.method-card__head h3 {
  margin-top: 0.2rem;
  font-size: 1.55rem;
}

.method-card__head p {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.method-status {
  width: fit-content;
  margin: 1rem 0 0;
  padding: 0.4rem 0.6rem;
  border-radius: 0.35rem;
  background: var(--soft);
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 680;
}

.method-conditions {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.method-conditions > :where(p, ul) + :where(p, ul) {
  margin-top: 0.6rem;
}

.method-conditions ul {
  padding-left: 1.15rem;
}

.method-steps {
  margin-block: 1.4rem;
  padding-left: 1.35rem;
}

.method-steps li {
  padding-left: 0.35rem;
}

.method-steps li + li {
  margin-top: 0.75rem;
}

.method-spot-test {
  display: flex;
  align-items: start;
  gap: 0.65rem;
  margin-bottom: 1rem;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 560;
}

.method-spot-test input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--brand);
  flex: 0 0 auto;
}

.method-card[data-ui-state="ready"] .method-status,
.method-card[data-ui-state="active"] .method-status {
  background: var(--brand);
  color: white;
}

.method-card[data-ui-state="active"] {
  border-top-color: var(--brand);
}

.method-card[data-ui-state="blocked"] .method-status,
.method-card[data-ui-state="stopped"] .method-status {
  background: #efe6eb;
  color: #63334f;
}

.method-card[data-ui-state="success"] .method-status {
  background: #e2f2e7;
  color: #245b37;
}

[data-preview-theme="dark"] .method-card[data-ui-state="blocked"] .method-status,
.dark .method-card[data-ui-state="blocked"] .method-status,
[data-preview-theme="dark"] .method-card[data-ui-state="stopped"] .method-status,
.dark .method-card[data-ui-state="stopped"] .method-status {
  background: #4f2a42;
  color: #f3d7e8;
}

[data-preview-theme="dark"] .method-card[data-ui-state="success"] .method-status,
.dark .method-card[data-ui-state="success"] .method-status {
  background: #173d27;
  color: #d9f3e2;
}

.attempt-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.attempt-actions .btn,
.attempt-actions button {
  min-height: 2.8rem;
}

[data-rinse-confirmation] {
  display: flex;
  align-items: start;
  gap: 0.65rem;
  margin-top: 1.15rem;
  padding: 1rem;
  border-radius: 0.65rem;
  background: var(--soft);
  color: var(--accent-ink);
  font-size: 0.84rem;
  font-weight: 580;
}

[data-rinse-confirmation] input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--brand);
  flex: 0 0 auto;
}

[data-reset-piece] {
  margin-top: 1.25rem;
}

.notice,
.evidence-block {
  max-width: 72ch;
  margin-block: 1.5rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--paper);
}

.notice > :where(h2, h3),
.evidence-block > :where(h2, h3) {
  margin-bottom: 0.55rem;
  font-size: 1.15rem;
}

.notice p,
.evidence-block p {
  font-size: 0.88rem;
}

.notice--caution {
  border-color: #a96f20;
  background: #fff8e8;
  color: #4d3719;
}

.notice--caution :where(h2, h3) {
  color: #4d3719;
}

.notice--unknown {
  background: var(--soft);
  color: var(--accent-ink);
}

[data-preview-theme="dark"] .notice--caution,
.dark .notice--caution {
  border-color: #d3a35f;
  background: #3a2a16;
  color: #ffebc7;
}

[data-preview-theme="dark"] .notice--caution :where(h2, h3),
.dark .notice--caution :where(h2, h3) {
  color: #ffebc7;
}

.source-list {
  max-width: 72ch;
  padding-left: 1.25rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.source-list li + li {
  margin-top: 0.7rem;
}

.source-ref {
  font-weight: 620;
}

.related-links {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.related-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: var(--paper);
  font-size: 0.82rem;
  font-weight: 620;
  text-decoration: none;
}

.index-list {
  border-top: 1px solid var(--line);
}

.index-row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.3fr) auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 5.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.index-row h2,
.index-row h3 {
  font-size: 1.12rem;
}

.index-row p {
  color: var(--muted);
  font-size: 0.84rem;
}

.symbol-groups {
  display: grid;
  gap: 3.25rem;
}

.symbol-group > h2 {
  margin-bottom: 1.4rem;
}

.symbol-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.symbol-item {
  padding: 1.25rem 1.25rem 1.35rem 0;
  border-bottom: 1px solid var(--line);
}

.symbol-item h3 {
  font-size: 1rem;
}

.symbol-item p {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.article:has(.symbol-grid) {
  max-width: none;
}

.symbol-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.symbol-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow-wrap: anywhere;
}

.symbol-diagram {
  width: clamp(5.75rem, 8vw, 7.5rem);
  height: auto;
  max-width: 100%;
  margin-bottom: 1rem;
  flex: 0 0 auto;
}

.symbol-card__body {
  min-width: 0;
}

.symbol-card__body > h4 {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.symbol-card__body > h5 {
  margin: 1.15rem 0 0.35rem;
  font-size: 0.82rem;
}

.symbol-card__body > p,
.symbol-card__body > ul {
  font-size: 0.82rem;
}

.symbol-card__body > p + p {
  margin-top: 0.65rem;
}

.symbol-card__body > ul {
  padding-left: 1.15rem;
}

.symbol-card__description {
  color: var(--muted);
}

.symbol-card .editorial-sources {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.symbol-card .editorial-sources > h4 {
  margin-bottom: 0.6rem;
  font-size: 0.86rem;
}

.symbol-card .source-list {
  padding-left: 1rem;
  font-size: 0.72rem;
}

[data-preview-theme="dark"] .symbol-diagram,
.dark .symbol-diagram {
  border-radius: 0.55rem;
  background: #fcfafb;
}

.section details {
  max-width: 72ch;
  border-top: 1px solid var(--line);
}

.section details:last-child {
  border-bottom: 1px solid var(--line);
}

.section details + details {
  margin-top: 0;
}

.section details summary {
  padding: 1.05rem 0.25rem;
  color: var(--ink);
  font-weight: 680;
  line-height: 1.4;
  cursor: pointer;
}

.section details summary::marker {
  color: var(--brand);
}

.section details[open] summary {
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.section details > :not(summary) {
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}

.section details > :last-child {
  margin-bottom: 1.25rem;
}

.section details > .notice:first-of-type {
  margin-top: 0;
}

.page--home :is(#como-identificar, #lavagem-e-etiqueta, #metodologia-e-fontes) {
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
}

.page--home :is(#como-identificar, #lavagem-e-etiqueta, #metodologia-e-fontes) .section-head {
  margin-bottom: 1rem;
}

.page--home + .site-footer {
  margin-top: 0;
}

.page--home #lavagem-e-etiqueta .detail-link {
  display: inline-flex;
  margin-top: 0.25rem;
}

.page--home #lavagem-e-etiqueta .detail-link + .detail-link {
  margin-left: 1.25rem;
}

.video-frame {
  overflow: hidden;
  width: min(100%, 45rem);
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--deep);
}

.video-frame figcaption {
  padding: 1rem 1.2rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.video-disclaimer {
  color: var(--accent-ink);
  font-weight: 680;
}

.transcript {
  max-width: 72ch;
  margin-top: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.transcript summary {
  padding-block: 0.9rem;
  color: var(--accent-ink);
  font-weight: 680;
  cursor: pointer;
}

.transcript__body {
  padding-bottom: 1.25rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.75fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 4.5rem);
}

.product-detail__media {
  position: sticky;
  top: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.product-detail__media > img {
  width: 100%;
  height: 22rem;
  padding: 2rem;
  object-fit: contain;
}

.product-detail__media .product-card__buy {
  border-top: 1px solid var(--line);
}

.empty-state {
  max-width: 42rem;
  padding-block: clamp(3rem, 8vw, 7rem);
}

.empty-state p {
  margin-block: 1rem 1.5rem;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .stain-grid--catalog {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .context-grid {
    gap-inline: 1.5rem;
  }

  .product-grid {
    gap: 1.1rem;
  }

  .product-card__body,
  .product-card__buy {
    padding-inline: 1rem;
  }
}

@media (max-width: 800px) {
  .section {
    padding-block: 2.75rem;
  }

  .section-head {
    align-items: start;
    flex-direction: column;
    margin-bottom: 1.5rem;
  }

  .narrow,
  .breadcrumbs,
  .page-intro {
    width: min(calc(100% - 2.75rem), var(--max));
  }

  .page-intro {
    padding-block: 1.75rem 3rem;
  }

  .page-intro--split,
  .home-hero,
  .guide-layout,
  .product-detail {
    grid-template-columns: 1fr;
  }

  .page--product .page-intro--split {
    grid-template-columns: 1fr;
  }

  .page--product .page-intro__media {
    min-height: 0;
    padding: 1.25rem;
  }

  .page--product .page-intro__media .product-photo {
    height: min(18rem, 68vw);
  }

  .home-hero {
    gap: 1.75rem;
    padding-top: 1.25rem;
  }

  .home-hero__media img {
    aspect-ratio: 16 / 10;
  }

  .stain-grid,
  .stain-grid--catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 0.8rem;
  }

  .stain-card__title,
  .stain-card > a > span,
  a.stain-card > span {
    font-size: 0.79rem;
  }

  .context-grid,
  .product-grid,
  .tips-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .context-grid {
    gap: 1.75rem 1.25rem;
  }

  .product-card__media,
  .product-card > .photo,
  .product-card > a.photo {
    height: 10rem;
    padding: 1.1rem 0.9rem 0.6rem;
  }

  .product-card__body h2,
  .product-card__body h3 {
    font-size: 0.9rem;
  }

  .product-card__body p {
    font-size: 0.75rem;
  }

  .shop-link,
  .shops a {
    padding-inline: 0.6rem;
    font-size: 0.68rem;
  }

  .guide-aside,
  .product-detail__media {
    position: static;
  }

  .condition-fields {
    grid-template-columns: 1fr;
  }

  .attempt-actions {
    flex-direction: column;
  }

  .attempt-actions .btn,
  .attempt-actions button {
    width: 100%;
  }

  .index-row {
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
  }

  .index-row p {
    grid-column: 1 / -1;
  }

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

  .symbol-grid {
    grid-template-columns: 1fr;
  }

  .symbol-card {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
  }

  .symbol-diagram {
    width: 6rem;
    margin-bottom: 0;
  }
}

@media (max-width: 430px) {
  .narrow,
  .breadcrumbs,
  .page-intro {
    width: min(calc(100% - 2rem), var(--max));
  }

  .stain-grid,
  .stain-grid--catalog {
    gap-inline: 0.65rem;
  }

  .context-grid,
  .product-grid,
  .tips-grid {
    gap-inline: 0.75rem;
  }

  .product-card__body,
  .product-card__buy {
    padding-inline: 0.7rem;
  }

  .product-card__body h2,
  .product-card__body h3 {
    overflow-wrap: anywhere;
  }

  .answer-first,
  .condition-panel,
  .notice,
  .evidence-block {
    padding: 1.1rem;
  }

  .method-card__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .method-card__number {
    width: 2rem;
    height: 2rem;
  }

  .method-card__head h2,
  .method-card__head h3 {
    font-size: 1.3rem;
  }

  .symbol-list {
    grid-template-columns: 1fr;
  }

  .symbol-card {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    padding: 1rem;
    gap: 0.8rem;
  }

  .symbol-diagram {
    width: 5.5rem;
  }

  .page--home #lavagem-e-etiqueta .detail-link + .detail-link {
    margin-left: 0.8rem;
  }

  .product-detail__media > img {
    height: 17rem;
  }
}

/* Revisão geral: consulta compacta e estados de tratamento explícitos. */
.section { padding-block: clamp(1.75rem, 3vw, 3rem); }
.section-head { margin-bottom: 1.1rem; }
.section h2 { font-size: clamp(1.4rem, 2.3vw, 2rem); }
.page-intro { padding-block: 1.75rem 2rem; }
.page-intro > .wrap { width: 100%; }
.page-intro h1 { max-width: 24ch; font-size: clamp(2rem, 3.6vw, 3.5rem); line-height: 1.08; }
.page-intro .lead { margin-top: 1rem; font-size: 1rem; }
.page-intro--split { gap: 2rem; }
.page-intro__media img { max-height: 20rem; }
.page--product .page-intro__media { min-height: 0; padding: 1rem; }
.page--product .page-intro__media .product-photo { height: 16rem; }
.page-jumps { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-bottom: 1rem; }
.page-jumps a { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent-ink); font-weight: 650; }
.home-hero { padding-block: 2rem; gap: 2rem; }
.home-hero h1 { font-size: clamp(2.4rem, 4.2vw, 4.25rem); }
.home-hero h1 :is(em, strong), .btn--quiet { color: var(--accent-ink); }
.stain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.stain-card { min-width: 0; }
.stain-card h3 { margin-block: .7rem .4rem; font-size: 1.05rem; }
.stain-card p { font-size: .9rem; }
.stain-card .detail-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .88rem; font-weight: 650; }
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.product-card__media { height: 12rem; padding: 1.25rem; background: #fff; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.product-card__body { padding: 1.25rem; gap: .65rem; }
.product-card__body h3 { font-size: 1.1rem; }
.product-card__body p { font-size: .9rem; }
.product-card__buy { padding: 1rem 1.25rem; }
.product-card .detail-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }
.shop-link, .shops a { min-height: 44px; font-size: .8rem; }
.condition-panel { max-width: 48rem; margin-block: .5rem 1rem; padding: 1.5rem; }
.condition-panel > h3 { margin-bottom: .6rem; }
.condition-panel > p { font-size: .95rem; }
.condition-panel .condition-fields { margin-block: 1.5rem; gap: 1.2rem 1.5rem; }
.condition-fields legend { font-size: 1rem; padding-bottom: .75rem; }
.condition-field { display: block; font-size: .9rem; font-weight: 600; }
.condition-panel select { min-height: 48px; font-size: .95rem; }
.condition-panel [data-reset-piece] { display: flex; margin-top: 1rem; }
.condition-feedback { padding: .85rem; margin-bottom: .5rem; border-left: 3px solid var(--accent-ink); background: var(--soft); }
.process-help { margin-top: 1rem; }
summary { cursor: pointer; min-height: 44px; padding-block: .7rem; color: var(--accent-ink); font-weight: 650; line-height: 1.45; }
summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
details > p, details > ul { margin-top: .75rem; }
.method-list { max-width: 52rem; }
.method-card { padding: 1.5rem 0; }
.method-card__head h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.25; }
.method-status { width: 100%; padding: 1rem; font-size: 1rem; line-height: 1.55; border-left: 4px solid currentColor; }
.method-outcome { margin-top: 1rem; font-size: 1rem; }
.method-conditions { margin-block: .5rem 1rem; font-size: .9rem; }
.method-procedure { margin-top: 1rem; border-top: 1px solid var(--line); }
.method-procedure > summary { font-size: .95rem; }
.method-spot-test { font-size: .95rem; padding: 1rem; background: var(--soft); border-radius: .5rem; }
.method-spot-test input, .method-transition input { min-width: 22px; min-height: 22px; }
.method-card[data-incompatible="true"] .method-status,
.method-card[data-result-state="damage"] .method-status,
.method-card[data-result-state="selection-change"] .method-status { background: #fbe7e4; color: #832a20; }
[data-preview-theme="dark"] .method-card[data-incompatible="true"] .method-status,
[data-preview-theme="dark"] .method-card[data-result-state="damage"] .method-status,
[data-preview-theme="dark"] .method-card[data-result-state="selection-change"] .method-status { background: #48211e; color: #ffd5ce; }
.method-transition { display: grid; gap: 1rem; padding: 1.25rem; background: var(--soft); border-radius: .5rem; width: 100%; }
.method-transition label { display: flex; gap: .75rem; align-items: start; line-height: 1.5; }
.method-transition h4 { font-size: 1.15rem; }
.attempt-actions { margin-top: 1rem; gap: .75rem; }
.more-links { margin-top: .8rem; }
.symbol-index { display: flex; flex-wrap: wrap; gap: .65rem; padding-bottom: 1rem; }
.symbol-index a { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: .5rem; text-decoration: none; font-weight: 650; color: var(--accent-ink); background: var(--paper); }
.symbol-index span { font-size: 1.4rem; }
.symbol-version { margin-block: .75rem; padding: .6rem 1.1rem; }
.symbol-version > summary { font-size: 1rem; }
.symbol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.symbol-card { display: block; padding: .65rem; min-width: 0; }
.symbol-card > summary { display: flex; align-items: center; gap: .75rem; list-style: none; }
.symbol-card > summary::after { content: "+"; margin-left: auto; }
.symbol-card[open] > summary::after { content: "−"; }
.symbol-card .symbol-diagram { width: 4.5rem; height: auto; flex-shrink: 0; margin: 0; }
.symbol-card__heading { font-size: .95rem; }
.symbol-card__body { padding: .25rem .5rem .75rem; }
.symbol-card__body :is(p, li) { font-size: .95rem; }
.symbol-card__body h5 { margin-block: 1rem .5rem; font-size: .95rem; }
@media (max-width: 800px) {
  .page-intro h1 { font-size: clamp(1.9rem, 8.2vw, 2.6rem); }
  .page-intro--split { gap: 1.25rem; }
  .page-intro__media img { max-height: 13rem; aspect-ratio: 16 / 9; }
  .page--product .page-intro__media .product-photo { height: 12rem; }
  .home-hero h1 { font-size: clamp(2.2rem, 9.2vw, 3rem); }
  .home-hero__media img { max-height: 14rem; object-fit: cover; }
  .home-hero__caption { padding: 1rem; }
  .stain-grid, .stain-grid--catalog { grid-template-columns: 1fr; gap: 1.1rem; }
  .stain-card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
  .stain-card img { width: 5.5rem; height: 5.5rem; border-radius: .65rem; object-fit: cover; }
  .stain-card h3 { margin-top: 0; font-size: 1.05rem; }
  .product-grid, .context-grid, .tips-grid { grid-template-columns: 1fr; }
  .product-card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-content: start; }
  .product-card__media { height: 9rem; padding: .75rem; border-radius: .5rem; margin: .75rem 0 0 .75rem; }
  .product-card__body { padding: 1rem; }
  .product-card__buy { grid-column: 1 / -1; padding: 1rem; }
  .product-card__body h3 { font-size: 1.05rem; overflow-wrap: normal; }
  .product-card__body p { font-size: .9rem; }
  .condition-panel { padding: 1.1rem; }
  .condition-fields { grid-template-columns: 1fr; }
  .symbol-grid { grid-template-columns: 1fr; }
}
.product-card__body p { flex: none; margin: 0; }
.detail-link { color: var(--accent-ink); }
.product-purchase { padding-inline: 1rem; border-top: 1px solid var(--line); }
.product-purchase > summary { font-size: .88rem; }
.product-purchase .product-card__buy { margin: 0 -1rem; border: 0; }
@media (max-width: 800px) {
  .product-card { height: auto; }
  .product-purchase { grid-column: 1 / -1; }
  .stain-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .stain-grid--home .stain-card { display: block; border: 0; padding: 0; }
  .stain-grid--home .stain-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: .75rem; }
  .stain-grid--home .stain-card h3 { font-size: 1rem; }
}

/* 2026 redesign — utility first, fabric as the visual material. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--brand);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 1.7rem;
  height: 2px;
  background: currentColor;
  content: "";
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.3fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
  min-height: calc(100svh - 7rem);
  padding-block: clamp(3rem, 7vw, 7rem) clamp(4rem, 8vw, 8rem);
}

.home-hero__copy {
  max-width: 57rem;
}

.home-hero h1 {
  max-width: 12.6ch;
  margin-top: 1.25rem;
  font-size: clamp(3.4rem, 7.8vw, 7.8rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.home-hero .lead {
  max-width: 46ch;
  margin-top: 1.7rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
}

.home-hero__note {
  display: grid;
  gap: 1rem;
  padding-block: 1.2rem;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}

.home-hero__note strong {
  color: var(--ink);
}

.home-hero__note-number {
  color: var(--brand);
  font-family: ui-serif, Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
}

.stain-finder {
  position: relative;
  z-index: 5;
  width: min(100%, 47rem);
  margin-top: 2.6rem;
}

.stain-finder > label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.88rem;
  font-weight: 750;
}

.stain-finder__field {
  position: relative;
}

.stain-finder__field svg {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  width: 1.35rem;
  height: 1.35rem;
  transform: translateY(-50%);
  color: var(--accent-ink);
}

.stain-finder input {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.75rem 3.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  outline: 0;
  background: var(--paper);
  box-shadow: 0 20px 50px rgb(53 31 43 / 9%);
  color: var(--ink);
  font-size: 1.1rem;
}

.stain-finder input:focus {
  border-color: var(--accent-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-ink) 18%, transparent), 0 20px 50px rgb(53 31 43 / 9%);
}

.stain-finder__results {
  position: absolute;
  top: calc(100% - 3.8rem);
  right: 0;
  left: 0;
  z-index: 10;
  overflow: hidden;
  padding: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--paper);
  box-shadow: 0 24px 60px rgb(37 24 34 / 18%);
}

.stain-finder__results a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0.65rem;
  text-decoration: none;
}

.stain-finder__results a:hover,
.stain-finder__results a:focus {
  background: var(--soft);
}

.stain-finder__results span {
  color: var(--accent-ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.stain-finder__status {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.76rem;
}

.stain-finder__popular {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.stain-finder__popular a {
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: 0.75rem;
  font-weight: 680;
  text-decoration: none;
}

.stain-finder__all {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: 1rem;
  color: var(--accent-ink);
  font-size: 0.84rem;
  font-weight: 750;
}

.scroll-story {
  position: relative;
  height: 380vh;
  background: #d9d2c8;
}

.scroll-story__sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
  height: 100svh;
  min-height: 42rem;
  background: #d9d2c8;
}

.scroll-story__media,
.scroll-story__media::after {
  position: absolute;
  inset: 0;
}

.scroll-story__media::after {
  background: linear-gradient(90deg, rgb(25 14 22 / 78%) 0%, rgb(25 14 22 / 38%) 42%, transparent 72%);
  content: "";
}

.scroll-story__media img[data-scroll-frame] {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-story__fallback-clean {
  display: none;
}

.scroll-story__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  color: #fffaf4;
}

.scroll-story__copy .eyebrow,
.scroll-story__copy h2 {
  color: #fffaf4;
}

.scroll-story__copy h2 {
  max-width: 10ch;
  margin-top: 1rem;
  font-size: clamp(3.2rem, 6vw, 6.7rem);
  line-height: 0.92;
}

.scroll-story__steps {
  display: grid;
  width: min(100%, 29rem);
  gap: 0;
  margin-top: 3rem;
  padding: 0;
  list-style: none;
}

.scroll-story__steps li {
  display: grid;
  grid-template-columns: 2rem 7rem 1fr;
  gap: 0.7rem;
  align-items: baseline;
  padding-block: 0.7rem;
  border-top: 1px solid rgb(255 250 244 / 28%);
  opacity: 0.42;
  transition: opacity 180ms ease, transform 180ms ease;
}

.scroll-story__steps li[data-active] {
  transform: translateX(0.5rem);
  opacity: 1;
}

.scroll-story__steps span,
.scroll-story__steps small {
  font-size: 0.72rem;
}

.scroll-story__steps small {
  line-height: 1.4;
}

.scroll-story[data-static="true"] {
  height: auto;
  padding-block: 4rem;
}

.scroll-story[data-static="true"] .scroll-story__sticky {
  position: relative;
  height: auto;
  min-height: 0;
}

.scroll-story[data-static="true"] .scroll-story__media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.scroll-story[data-static="true"] .scroll-story__media::after,
.scroll-story[data-static="true"] .scroll-story__wash {
  display: none;
}

.scroll-story[data-static="true"] .scroll-story__media img {
  display: block;
  width: 100%;
  height: auto;
}

.scroll-story[data-static="true"] .scroll-story__copy {
  height: auto;
  padding-block: 3rem 0;
}

.scroll-story[data-static="true"] .scroll-story__copy h2 {
  font-size: clamp(2.7rem, 6vw, 5rem);
}

.section {
  padding-block: clamp(4rem, 7vw, 7.5rem);
}

.section:nth-of-type(even):not(.section--plum) {
  background: color-mix(in srgb, var(--paper) 58%, transparent);
}

.section-head {
  margin-bottom: clamp(1.8rem, 4vw, 3.5rem);
}

.section h2,
.page-intro h1 {
  color: var(--ink);
}

.section h2 {
  max-width: 18ch;
  font-size: clamp(2.2rem, 4.5vw, 4.5rem);
  line-height: 0.98;
}

.section--plum {
  background: var(--brand);
}

.section--plum .section-head h2 {
  color: var(--on-deep);
}

.page-intro {
  padding-block: clamp(3.5rem, 7vw, 7rem) clamp(3rem, 6vw, 5rem);
}

.page-intro h1 {
  max-width: 19ch;
  font-size: clamp(3rem, 6.2vw, 6.5rem);
  line-height: 0.94;
}

.page-intro .lead {
  max-width: 58ch;
  margin-top: 1.6rem;
  color: var(--muted);
  font-size: 1.08rem;
}

.page-intro--split {
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.page-intro__media {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 28px 70px rgb(48 28 39 / 11%);
}

.page-intro__media img {
  max-height: 31rem;
}

.breadcrumbs {
  padding-top: 1rem;
}

.breadcrumbs ol {
  gap: 0.5rem;
}

.breadcrumbs a {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stain-grid,
.stain-grid--catalog {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.25rem;
}

.stain-card img {
  border-radius: 1.1rem;
  box-shadow: 0 12px 30px rgb(45 26 37 / 8%);
}

.stain-card h3 {
  font-size: 1rem;
}

.context-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.context-card,
.product-card,
.tips-grid > a,
.symbol-card {
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 1.15rem;
  background: var(--paper);
  box-shadow: 0 18px 45px rgb(43 25 36 / 6%);
}

.context-card {
  padding: 1.6rem;
}

.section--plum .context-card {
  border-color: rgb(255 250 244 / 22%);
  background: rgb(255 250 244 / 9%);
  box-shadow: none;
}

.product-grid {
  gap: 1rem;
}

.product-card {
  overflow: hidden;
}

.product-card__media {
  background: #fff;
}

.condition-panel {
  padding: clamp(1.4rem, 4vw, 2.6rem);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  background: var(--paper);
  box-shadow: 0 22px 60px rgb(43 25 36 / 7%);
}

.condition-fields {
  counter-reset: condition;
}

.condition-field {
  position: relative;
  counter-increment: condition;
  padding-left: 2.2rem;
}

.condition-field::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: 50%;
  background: var(--soft);
  color: var(--brand);
  content: counter(condition);
  font-size: 0.7rem;
  font-weight: 800;
}

.condition-panel select {
  border-radius: 0.75rem;
  background-color: var(--paper);
}

.method-card {
  margin-block: 0;
  padding: 2rem 0;
}

.method-status,
.notice,
.answer-first {
  border-radius: 0.9rem;
}

.answer-first {
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
  background: color-mix(in srgb, var(--soft) 72%, var(--paper));
}

.detail-link {
  color: var(--accent-ink);
  font-weight: 750;
}

.btn,
.attempt-actions button {
  border-radius: 999px;
}

@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .home-hero__note {
    grid-template-columns: 3rem 1fr;
    align-items: start;
    max-width: 37rem;
  }

  .context-grid,
  .stain-grid,
  .stain-grid--catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .site-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    overflow-x: visible;
  }

  .site-nav a {
    min-width: 0;
    text-align: center;
  }

  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-block: 3.5rem 4.5rem;
  }

  .home-hero__copy,
  .home-hero__note,
  .stain-finder {
    min-width: 0;
    max-width: 100%;
  }

  .home-hero h1 {
    max-width: 10ch;
    font-size: clamp(3.35rem, 16vw, 5.1rem);
  }

  .home-hero .lead {
    margin-top: 1.25rem;
    font-size: 1rem;
  }

  .stain-finder {
    margin-top: 2rem;
  }

  .stain-finder input {
    min-height: 4rem;
    padding-inline: 3.25rem 1rem;
    font-size: 1rem;
  }

  .stain-finder__popular {
    flex-wrap: wrap;
    margin-right: 0;
    padding-right: 0;
    overflow-x: visible;
  }

  .stain-finder__popular a {
    flex: 0 0 auto;
  }

  .scroll-story {
    height: 330vh;
  }

  .scroll-story__sticky {
    min-height: 38rem;
  }

  .scroll-story__media::after {
    background: linear-gradient(0deg, rgb(25 14 22 / 82%) 0%, rgb(25 14 22 / 26%) 70%, transparent 100%);
  }

  .scroll-story__copy {
    justify-content: flex-end;
    padding-bottom: 2.5rem;
  }

  .scroll-story__copy h2 {
    font-size: clamp(3rem, 13vw, 4.6rem);
  }

  .scroll-story__steps {
    margin-top: 2rem;
  }

  .scroll-story__steps li {
    grid-template-columns: 1.8rem 6rem 1fr;
  }

  .section {
    padding-block: 4rem;
  }

  .section h2 {
    font-size: clamp(2.4rem, 11vw, 3.5rem);
  }

  .page-intro h1 {
    font-size: clamp(3rem, 13.5vw, 4.4rem);
  }

  .page-intro--split {
    gap: 2rem;
  }

  .page-intro__media img {
    max-height: 19rem;
    aspect-ratio: 4 / 3;
  }

  .context-grid {
    grid-template-columns: 1fr;
  }

  .stain-grid,
  .stain-grid--catalog,
  .stain-grid--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 0.8rem;
  }

  .stain-grid .stain-card,
  .stain-grid--catalog .stain-card,
  .stain-grid--home .stain-card {
    display: block;
    padding: 0;
    border: 0;
  }

  .stain-grid .stain-card img,
  .stain-grid--catalog .stain-card img,
  .stain-grid--home .stain-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin-bottom: 0.7rem;
  }

  .stain-card .detail-link {
    min-height: 0;
    font-size: 0.78rem;
  }

  .condition-field {
    padding-left: 0;
    padding-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-story {
    height: auto;
    padding-block: 4rem;
  }

  .scroll-story__sticky {
    position: relative;
    height: auto;
    min-height: 0;
  }
}

/* September 2026: direct guidance and a single scroll opening. */
.scroll-story--hero { height: 280svh; }
.scroll-story--hero .scroll-story__sticky { min-height: 0; }
.scroll-story--hero h1 { color: #fffaf4; font-size: clamp(3rem, 5.7vw, 6rem); line-height: .98; letter-spacing: -.05em; max-width: 14ch; margin: .75rem 0 1rem; }
.scroll-story--hero .lead { color: #fffaf4; max-width: 38ch; font-size: 1.05rem; }
.scroll-story--hero .scroll-story__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 48rem); gap: 1.25rem; margin-top: 2rem; }
.scroll-story--hero .scroll-story__steps li { display: flex; flex-direction: column; gap: .4rem; border: 0; border-top: 2px solid #ffffff66; padding: 1rem 0 0; opacity: .55; transition: opacity .15s; }
.scroll-story--hero .scroll-story__steps li[data-active] { opacity: 1; border-top-color: #fffaf4; background: transparent; }
.scroll-story--hero .scroll-story__steps strong { font-size: clamp(1rem, 2vw, 1.45rem); }
.story-skip { color: #fffaf4; margin-top: 1.5rem; width: fit-content; font-size: .85rem; text-underline-offset: .3em; }
.scroll-story--hero[data-static="true"] { height: auto; padding: 0; }
.scroll-story--hero[data-static="true"] .scroll-story__sticky { min-height: 42rem; }
.scroll-story--hero[data-static="true"] .scroll-story__media { position: absolute; display: block; }
.scroll-story--hero[data-static="true"] .scroll-story__media::after { display: block; }
.scroll-story--hero[data-static="true"] .scroll-story__fallback-clean { display: none; }
.scroll-story--hero[data-static="true"] .scroll-story__copy { min-height: 42rem; padding-block: 3rem; color: #fffaf4; }
.scroll-story--hero[data-static="true"] .scroll-story__steps li { opacity: 1; }
.stain-card--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; padding: 1.25rem; gap: .85rem; height: 100%; }
.stain-card--link h3 { margin: 0; font-size: 1.3rem; }
.stain-card--link .stain-photo { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: .65rem; }
.stain-card--link p { margin: 0; font-size: .9rem; line-height: 1.5; }
.stain-card--link:hover { box-shadow: 0 8px 24px #34213618; transform: translateY(-2px); }
a:focus-visible, select:focus-visible { outline: 3px solid #268780; outline-offset: 5px; }
.home-utilities { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-block: 4rem; }
.home-utilities h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.home-utilities ul { list-style: none; padding: 0; display: grid; gap: .75rem; }
.home-utilities a { color: inherit; text-underline-offset: .3em; }
.editor-choice { display: inline-flex; align-items: center; width: fit-content; color: #fdf8ed; background: #493449; border-radius: 99px; padding: .4rem .75rem; font-size: .72rem; font-weight: 700; letter-spacing: .025em; }
.product-card__body .editor-choice { margin: .3rem 0; }
.method-reading { padding: clamp(1.25rem, 3vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; margin-bottom: 1.5rem; }
.method-reading h3 { margin-top: .5rem; font-size: 1.65rem; }
.method-reading .method-steps { padding-left: 1.5rem; }
.method-reading .method-steps li { margin: .75rem 0; }
.method-reading__conditions { color: var(--muted); font-size: .9rem; }
.method-reading__next { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; }
.advanced-entry { padding-block: 2rem; }
.advanced-picker { display: block; width: min(100%, 42rem); margin: 1rem 0 2rem; padding: .8rem; font: inherit; }
.institutional { max-width: 52rem; margin: auto; padding: 2rem 1.5rem 4rem; }
.institutional h2 { margin-top: 2.5rem; font-size: 1.75rem; }
.institutional p, .institutional li { line-height: 1.75; }
.source-group { border-bottom: 1px solid #ddd3ca; padding: 1rem 0; }
.source-group summary { cursor: pointer; font-weight: 650; }
.source-group a { overflow-wrap: anywhere; }
.product-placeholder { display: grid; place-content: center; min-height: 12rem; background: #eee8dd; color: #63545c; text-align: center; padding: 1.5rem; border-radius: .75rem; }
@media (max-width: 700px) {
  .site-header .site-nav { display: none; }
  .site-header.is-scrolled .site-nav, .site-header:focus-within .site-nav { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; box-sizing: border-box; justify-content: space-around; gap: .2rem; padding: .85rem .4rem; background: #fbf7ef; border-bottom: 1px solid #ddd3ca; box-shadow: 0 3px 16px #34213614; }
  .site-header .site-nav a { font-size: .72rem; white-space: nowrap; }
  .scroll-story--hero { height: 240svh; }
  .scroll-story--hero h1 { font-size: clamp(2.35rem, 9vw, 3.6rem); max-width: 13ch; }
  .scroll-story--hero .scroll-story__copy { padding-top: 3.5rem; padding-bottom: 2rem; justify-content: center; }
  .scroll-story--hero .scroll-story__steps { gap: .65rem; margin-top: 1.3rem; }
  .scroll-story--hero .scroll-story__steps li { padding: .7rem 0 0; }
  .scroll-story--hero .scroll-story__steps small { font-size: .65rem; }
  .scroll-story--hero .scroll-story__steps strong { font-size: .95rem; }
  .scroll-story--hero .lead { font-size: .95rem; }
  .home-utilities { grid-template-columns: 1fr; gap: 2rem; }
  .scroll-story--hero[data-static="true"] .scroll-story__sticky, .scroll-story--hero[data-static="true"] .scroll-story__copy { min-height: 38rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stain-card--link:hover { transform: none; }
  .scroll-story--hero .scroll-story__steps li { transition: none; }
}

/* Review: complete the film after scroll entry, then keep its final panel visible. */
@font-face { font-family: 'Google Sans Flex'; src: url('../assets/fonts/google-sans-flex.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
.scroll-story--hero { height: 100svh; }
.scroll-story--hero .scroll-story__copy { font-family: 'Google Sans Flex', sans-serif; }
.scroll-story--hero h1 { font-family: 'Google Sans Flex', sans-serif; font-weight: 600; letter-spacing: -.045em; }
.stain-grid .stain-card--link { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1.15rem; background: var(--paper); box-shadow: none; transform: none; }
.stain-grid .stain-card--link h3, .stain-grid .stain-card--link p { margin: 0; }
.stain-grid .stain-card--link img, .stain-grid .stain-card--link:hover img { margin: 0; box-shadow: none; outline: none; transform: none; border: 0; }
.stain-grid .stain-card--link:hover { box-shadow: none; transform: none; }
.product-card { --card-padding: 1.25rem; display: flex; background: #fff; box-shadow: none; position: relative; }
.product-card__main { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; position: relative; }
.product-card__main:focus-visible { outline: 3px solid var(--brand); outline-offset: -4px; }
.product-card__media { margin: 0; border-radius: 0; height: 12rem; padding: var(--card-padding); background: #fff; }
.product-card__body { padding: var(--card-padding); }
.product-card__buy { background: #fff; padding: var(--card-padding); }
.product-card .product-card__buy > p { display: none; }
.product-card .shops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-padding); margin: 0; }
.product-card .shops a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 48px; padding: .65rem .35rem; text-align: center; font-size: .85rem; border: 0; border-radius: .5rem; }
.shop-link--mercado-livre { background: #ffe600 !important; color: #292929 !important; }
.shop-link--amazon { background: #e4e6e8 !important; color: #232f3e !important; }
.product-card .editor-choice { position: absolute; z-index: 1; top: 0; right: 0; width: 3.6rem; height: 3.6rem; border-radius: 0; clip-path: polygon(0 0,100% 0,100% 100%); padding: .4rem .55rem 0 0; display: flex; align-items: flex-start; justify-content: flex-end; font-size: 1.2rem; }
.product-card .editor-choice__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.product-card__main:hover .editor-choice, .product-card__main:focus-visible .editor-choice { background: #68295b; }
@media (max-width: 700px) { .product-card { --card-padding: 1rem; } .scroll-story--hero { height: 100svh; } }

.scroll-story--hero .scroll-story__steps strong { font-family: 'Google Sans Flex', sans-serif; }

/* Supplied partner wordmarks; accessible text remains on each link. */
.shop-link--mercado-livre { background: #ffe600 !important; }
.shop-link--amazon { background: #232f3e !important; color: #fff !important; }
.shops .shop-link::before { content: ''; display: block; width: 100%; height: 30px; background: center / contain no-repeat; }
.shops .shop-link--mercado-livre::before { background-image: url('../assets/brand/mercado-livre.png'); }
.shops .shop-link--amazon::before { background-image: url('../assets/brand/amazon.png'); }
.shops .shop-link { position: relative; }
.shop-link__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.product-card .shops a { padding: .7rem; }

/* Slightly enlarge the Amazon wordmark without changing the button geometry. */
.shops .shop-link--amazon::before { transform: scale(1.15); }

@media (max-width: 700px) {
  .product-card .product-card__media { height: 18rem; }
}

/* Card titles share a slightly larger, readable scale across viewports. */
.product-card .product-card__body h3,
.stain-grid .stain-card--link h3 { font-size: 1.25rem; line-height: 1.25; }

/* Three equal 15-frame stages; completed steps retain their highlight. */
.scroll-story--hero .story-number { width: 2.25rem; height: 2.25rem; overflow: visible; flex-shrink: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 800; }
.story-number__disc { opacity: 0; transition: opacity 220ms ease; }
.story-number__plain { opacity: 1; transition: opacity 220ms ease; }
[data-story-step][data-active] .story-number__disc { opacity: 1; }
[data-story-step][data-active] .story-number__plain { opacity: 0; }
.scroll-story--hero .scroll-story__steps strong { transform-origin: left center; transition: transform 280ms ease 140ms; }
.scroll-story--hero .scroll-story__steps li[data-active] strong { transform: scale(1.08); }
.scroll-story--hero .scroll-story__steps li { transition: opacity 220ms ease, border-color 220ms ease; }
@media (prefers-reduced-motion: reduce) {
  .scroll-story--hero .scroll-story__steps strong,
  .scroll-story--hero .scroll-story__steps li,
  .story-number__disc, .story-number__plain { transition: none; }
}

.scroll-story--hero .story-number__plain { font-weight: 400; }
.scroll-story--hero .story-number mask text { font-weight: 800; }

/* Identical circle footprint in both states: outline then solid cutout. */
.scroll-story--hero .story-number__outline { opacity: 1; transition: opacity 220ms ease; }
.scroll-story--hero [data-story-step][data-active] .story-number__outline { opacity: 0; }
.scroll-story--hero .story-number__plain { font-weight: 400; }
.scroll-story--hero .story-number mask text { font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .scroll-story--hero .story-number__outline { transition: none; } }

/* Approved mosaic home, with a compact sticky lowercase wordmark. */
:root { --cyan: #08cfe0; }
.site-logo { letter-spacing: -.025em; color: var(--brand); font-size:1.35rem; }
.site-logo:hover { color:var(--brand); }
.site-logo strong { font-weight:800; }
.site-logo span { font-weight:450; }
.product-card .editor-choice,
.product-card__main:hover .editor-choice,
.product-card__main:focus-visible .editor-choice { background:var(--brand); }
body[data-page-kind="home"] .site-header { --collapse:0; position:sticky; top:0; z-index:20; width:100%; max-width:none; margin:0; padding:calc(24px - 12px * var(--collapse)) 5vw; min-height:0; background:var(--bg); display:flex; justify-content:space-between; border-radius:0; box-shadow:none; border:0; }
body[data-page-kind="home"] .site-header .site-logo { display:flex; align-items:center; gap:calc(20px - 10px * var(--collapse)); font-size:clamp(27px,calc(8vw - 4vw * var(--collapse)),116px); line-height:1.1; }
body[data-page-kind="home"] .site-header .site-logo img { width:clamp(36px,calc(8vw - 4vw * var(--collapse)),116px); height:auto; }
body[data-page-kind="home"] .site-header .site-nav { position:static; visibility:hidden; opacity:0; box-shadow:none; border:0; background:transparent; }
body[data-page-kind="home"] .site-header.is-scrolled .site-nav { visibility:visible; opacity:1; }
body[data-page-kind="home"] .site-header.is-scrolled .site-nav a { font-size:clamp(.72rem, calc(1rem - .18rem * var(--collapse)), 1rem); }
body[data-page-kind="home"] .site-main { padding-top:0; }
.mosaic-hero { max-width:1500px; margin:auto; padding:28px 5vw 64px; display:grid; grid-template-columns:.9fr 1.1fr; gap:5vw; align-items:start; }
.mosaic-kicker { color:var(--brand); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.11em; margin:0 0 20px; }
.mosaic-intro h1 { font-size:clamp(40px,4.5vw,70px); line-height:1.04; letter-spacing:-.045em; margin:0; max-width:14ch; }
.mosaic-intro h1 em { color:var(--brand); font-style:normal; }
.mosaic-lead { font-size:17px; line-height:1.65; max-width:43ch; margin:26px 0; color:var(--muted); }
.mosaic-primary { display:flex; width:100%; box-sizing:border-box; align-items:center; justify-content:space-between; gap:40px; color:#172126; background:var(--cyan); padding:18px 24px; border-radius:12px; font-size:20px; font-weight:650; text-decoration:none; }
.mosaic-primary:hover,.mosaic-primary:focus-visible { background:#59e0ec; color:#111; }
.mosaic-primary span { font-size:22px; }
.mosaic-moments { margin:0; }
.mosaic-moments__picture { display:block; }
.mosaic-moments img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; border-radius:28px 7px 28px 7px; }
.mosaic-moments figcaption { font-size:clamp(23px,2.2vw,34px); font-weight:650; line-height:1.13; letter-spacing:-.025em; color:var(--deep); margin:0 0 20px; padding-left:18px; border-left:5px solid var(--cyan); }
@media(max-width:700px){
 body[data-page-kind="home"] .site-header { padding:calc(14px - 7px * var(--collapse)) 18px; flex-wrap:wrap; gap:0; }
 body[data-page-kind="home"] .site-header .site-logo { font-size:calc(10.5vw - 5.25vw * var(--collapse)); gap:calc(8px - 4px * var(--collapse)); }
 body[data-page-kind="home"] .site-header .site-logo img { width:calc(12vw - 6vw * var(--collapse)); }
 body[data-page-kind="home"] .site-header .site-nav { display:none; }
 body[data-page-kind="home"] .site-header.is-scrolled .site-nav { display:none; }
 body[data-page-kind="home"] .site-header .site-nav a { padding:6px 3px; font-size:11px; }
 .mosaic-hero { grid-template-columns:1fr; padding:24px 20px 40px; gap:30px; }
 .mosaic-intro h1 { font-size:43px; max-width:15ch; }
 .mosaic-lead { font-size:16px; margin:20px 0; }
 .mosaic-kicker { font-size:10px; margin-bottom:14px; }
 .mosaic-primary { padding:15px 20px; }
 .mosaic-moments img { height:auto; aspect-ratio:auto; object-fit:contain; border-radius:18px; }
}

/* R06 home content: these rules intentionally do not affect catalogue cards. */
.page--home .section { padding-block:24px; }
.page--home .stain-grid--home { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.page--home .stain-grid--home .stain-card { display:grid; grid-template-columns:minmax(7.5rem, 42%) minmax(0, 1fr); align-items:center; gap:20px; padding:12px; border:1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); border-radius:1rem; background:var(--paper); box-shadow:0 5px 16px color-mix(in srgb, var(--deep) 9%, transparent); }
.page--home .stain-grid--home .stain-card .stain-photo { grid-column:1; grid-row:1; width:100%; height:auto; aspect-ratio:1; margin:0; object-fit:cover; border-radius:.65rem; }
.page--home .stain-grid--home .stain-card__content { grid-column:2; grid-row:1; }
.page--home .stain-grid--home .stain-card h3 { margin:0 0 .35rem; font-size:18px; line-height:1.12; }
.page--home .stain-grid--home .stain-card p { margin:0; font-size:14px; line-height:1.45; }
.home-utilities { grid-template-columns:1fr; padding-block:24px; gap:20px; }
.home-utility-panel { display:flex; min-height:100%; flex-direction:column; padding:clamp(1.4rem, 3vw, 2.25rem); background:#fffdf8; border:1px solid #ded6ce; border-radius:1rem; box-shadow:0 10px 28px #3421360d; }
.home-utility-panel h2 { margin:0 0 .65rem; }
.home-utility-panel p { margin:0 0 1.25rem; color:var(--muted); }
.home-utility-panel__links { display:flex; flex-wrap:wrap; gap:.75rem 1rem; }
.home-utility-panel ul { margin:0; }
.page--home #produtos-e-transparencia { padding-block:24px; background:rgb(244, 229, 215); }
.home-product-mosaic { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px; overflow:hidden; border:2px solid #fff; border-radius:.9rem; background:#fff; }
.home-product-showcase { display:block; color:inherit; text-decoration:none; }
.home-product-tile { display:block; overflow:hidden; aspect-ratio:1; background:#fff; }
.home-product-tile .product-photo { display:block; width:100%; height:100%; padding:10%; object-fit:contain; background:#fff; }
.home-product-showcase:focus-visible { outline:3px solid var(--cyan); outline-offset:5px; border-radius:.75rem; }
.home-products-cta { margin-top:20px; }
.site-footer__inner { grid-template-columns:1fr; gap:1.5rem; padding-block:24px; }
.site-footer__note { grid-column:auto; margin:0; max-width:76ch; transform:translateY(-12px); }
.site-footer__note strong { color:var(--on-deep); }
.site-footer .site-logo, .site-footer .site-logo:hover, .site-footer .site-logo:focus-visible { color:var(--on-deep); }
.site-footer__nav { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1.5rem; justify-content:stretch; }
.site-footer__nav-group { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.site-footer__nav-group a { text-decoration:none; }
.site-footer__nav-group a + a::before { content:"|"; margin-right:.45rem; opacity:.45; }
.site-footer__nav-group--institutional { justify-content:flex-end; text-align:right; }
.home-stain-selection { min-width:0; }
.home-category-menu { margin-top:clamp(2.5rem, 5vw, 4.5rem); }
.home-category-menu h2 { margin:0 0 .75rem; padding-left:1rem; color:var(--muted); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.home-category-list { overflow:hidden; border:1px solid var(--line); border-radius:1rem; background:var(--paper); }
.home-category-list a { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3.75rem; margin-left:1rem; padding:.8rem 1rem .8rem 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:1rem; font-weight:620; }
.home-category-list a:last-child { border-bottom:0; color:var(--brand); }
.home-category-list a:hover { background:var(--soft); }
.home-category-list__chevron { color:var(--muted); font-size:1.65rem; font-weight:400; line-height:1; }
.category-back { margin:0 0 1.5rem; }
.category-back a { color:var(--brand); font-weight:650; text-underline-offset:.25em; }
.home-utility-panel__links { align-items:stretch; }
.home-utility-panel__cta { display:inline-flex; width:fit-content; align-items:center; justify-content:center; }
@media(max-width:700px){
  .page--home .stain-grid--home { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px 10px; }
  .page--home .stain-grid--home .stain-card { display:flex; min-width:0; flex-direction:column; align-items:center; gap:9px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; text-align:center; }
  .page--home .stain-grid--home .stain-card .stain-photo { width:86px; height:86px; flex:0 0 86px; border:3px solid var(--paper); border-radius:50%; box-shadow:0 0 0 1px var(--line), 0 5px 12px color-mix(in srgb, var(--deep) 10%, transparent); object-fit:cover; }
  .page--home .stain-grid--home .stain-card__content { min-width:0; }
  .page--home .stain-grid--home .stain-card h3 { max-width:11ch; margin:0 auto; font-size:14px; font-weight:680; line-height:1.15; }
  .page--home .stain-grid--home .stain-card p { display:none; }
  .home-product-mosaic { gap:2px; }
  .home-utility-panel__cta { width:100%; }
  .site-footer__nav { grid-template-columns:1fr 1fr; gap:1rem; }
  .site-footer__nav-group { align-content:flex-start; align-items:flex-start; flex-direction:column; gap:.45rem; }
  .site-footer__nav-group a + a::before { content:none; }
}

/* Header resizing must not feed browser scroll anchoring back into its own size. */
body[data-page-kind="home"] { overflow-anchor: none; }