@layer pages {
/*
static/css/pages/materials.css
CSS específico da página /materials — arsenal, filtros sidebar, product cards.
Seletores compartilhados (materiais recomendados) movidos para components/materials-card.css.
*/

/* ========== ARSENAL DE MATERIAIS ========== */
.main-arsenal {
  --materials-nav-offset: clamp(72px, 10vw, 128px);

  max-width: var(--grid-max-width);
  width: 100%;
  margin: 0 auto;
  padding: clamp(var(--space-05), 4vw, var(--space-07));
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  border: 1px solid var(--color-outline);
  box-shadow: var(--shadow-soft);
}

[id="reviews-modal-overlay"] {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(8px);
}

[id="reviews-modal-overlay"].active {
  display: flex;
}

[id="reviews-modal-overlay"] .modal {
  width: min(760px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-1, var(--card));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgb(0 0 0 / 50%);
}

[id="reviews-modal-overlay"] .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

[id="reviews-modal-overlay"] .modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--text);
  font-size: 1.1rem;
}

[id="reviews-modal-overlay"] .modal-close-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgb(255 255 255 / 6%);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
}

[id="reviews-modal-overlay"] .modal-body {
  overflow: auto;
  padding: 20px 22px;
}

.main-arsenal::before,
.main-arsenal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.main-arsenal::before {
  background:
    radial-gradient(120% 80% at 0% 0%, rgb(194 23 40 / 35%), transparent 55%),
    radial-gradient(85% 70% at 100% 0%, rgb(255 179 71 / 28%), transparent 60%),
    linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 0%));
  opacity: 0.75;
}

.main-arsenal::after {
  background-image: linear-gradient(135deg, rgb(255 255 255 / 8%) 0%, transparent 35%),
    linear-gradient(45deg, rgb(255 255 255 / 6%) 10%, transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.4;
}

.main-arsenal>* {
  position: relative;
  z-index: 1;
}

/* Header do Arsenal */
.arsenal-header {
  text-align: left;
  margin-bottom: var(--space-06);
  padding: clamp(var(--space-05), 3vw, var(--space-07));
  background:
    linear-gradient(135deg, rgb(5 4 11 / 60%), rgb(5 4 11 / 40%)),
    linear-gradient(135deg, rgb(194 23 40 / 90%) 0%, rgb(255 179 71 / 80%) 100%);
  border-radius: var(--radius-md);
  color: var(--color-surface-contrast);
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: 0 25px 60px rgb(5 4 11 / 45%);
  position: relative;
  overflow: hidden;
}

.arsenal-header::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgb(255 255 255 / 25%), transparent 45%),
    radial-gradient(circle at 80% 0%, rgb(255 255 255 / 20%), transparent 45%);
  opacity: 0.35;
  pointer-events: none;
}

.arsenal-hero {
  display: grid;
  gap: var(--space-04);
}

.arsenal-hero h1 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-03);
  font-size: clamp(2rem, 3vw, 2.8rem);
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.arsenal-hero h1 i {
  width: 36px;
  height: 36px;
}

.arsenal-subtitle {
  font-size: 1.1rem;
  color: rgb(255 255 255 / 80%);
  margin: 0;
}

.arsenal-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-04);
  margin-top: var(--space-04);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-02);
  padding: var(--space-04);
  background: rgb(255 255 255 / 8%);
  border-radius: var(--radius-md);
  border: 1px solid rgb(255 255 255 / 20%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%);
  min-height: 120px;
  text-align: center;
}

.stat-number {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-surface-contrast);
}

.stat-label {
  font-size: 0.9rem;
  color: rgb(255 255 255 / 80%);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Navegação Rápida */
.arsenal-nav {
  position: sticky;
  top: var(--materials-nav-offset);
  background: var(--glass);
  border-radius: var(--radius-md);
  padding: var(--space-05);
  margin-bottom: var(--space-05);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  z-index: 2;
}

.arsenal-nav h3 {
  margin-bottom: var(--space-03);
  color: var(--text);
  font-size: 1.1rem;
}

/* ==============================
   LAYOUT FLEX: SIDEBAR + MAIN
   Sidebar não reduz o container principal.
   ============================== */
.arsenal-page-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
  width: 100%;
}

/* Sidebar fica fixa à esquerda, sem comprimir a section */
.arsenal-page-layout>.arsenal-sidebar {
  flex-shrink: 0;
  width: 280px;
  margin-right: var(--space-04);
}

/* A section principal mantém seu tamanho original */
.arsenal-main-section {
  flex: 1;
  min-width: 0;

  /* Mantém o max-width original da .main-arsenal (var(--grid-max-width)) */
}

/* ── Botão Mobile para abrir filtros ── */
.arsenal-mobile-filter-btn {
  display: none;

  /* Oculto em desktop */
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  margin-bottom: var(--space-04);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.arsenal-mobile-filter-btn:hover {
  border-color: var(--accent);
  background: rgb(255 102 204 / 8%);
}

.arsenal-mobile-filter-btn .filter-badge {
  min-width: 20px;
  height: 20px;
  background: var(--accent);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ── Overlay Mobile ── */
.arsenal-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 60%);
  z-index: 1099;
  backdrop-filter: blur(4px);
}

.arsenal-sidebar-overlay.active {
  display: block;
}

/* ==============================
   SIDEBAR DE FILTROS
   ============================== */
.arsenal-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-04);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 10%) transparent;
}

.arsenal-sidebar::-webkit-scrollbar {
  width: 4px;
}

.arsenal-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.arsenal-sidebar::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 12%);
  border-radius: 4px;
}

/* ── Sidebar Header ── */
.arsenal-sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-04);
  padding-bottom: var(--space-03);
  border-bottom: 1px solid var(--border);
}

.arsenal-sidebar .sidebar-title {
  gap: 8px;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.08em;
}

.arsenal-sidebar .sidebar-section {
  background: none;
  padding: 0;
  padding-bottom: var(--space-03);
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgb(255 255 255 / 6%);
  margin-bottom: var(--space-04);
  align-self: unset;
}

.arsenal-sidebar .sidebar-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.arsenal-sidebar .sidebar-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--text);
  font-size: 0.9rem;
}

.arsenal-sidebar .sidebar-option:hover {
  background: rgb(255 102 204 / 7%);
}

.arsenal-sidebar .sidebar-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Custom Checkbox/Radio ── */
.arsenal-sidebar .sidebar-checkbox,
.arsenal-sidebar .sidebar-radio {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Price Range ── */
.arsenal-sidebar .sidebar-price-range {
  padding: 0 2px;
}

.price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: rgb(255 255 255 / 4%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.price-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgb(255 102 204 / 10%);
}

.price-input::placeholder {
  color: var(--text-3, rgb(255 255 255 / 35%));
}

.price-separator {
  color: var(--text-2);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Sidebar Stars ── */
.arsenal-sidebar .sidebar-stars .stars {
  color: #f1c40f;
  letter-spacing: 1px;
}

.arsenal-sidebar .sidebar-stars .star-empty {
  opacity: 0.3;
}

/* ── Sidebar Actions ── */
.arsenal-sidebar .sidebar-actions {
  padding-top: var(--space-03);
  border-top: 1px solid var(--border);
}

.arsenal-sidebar .sidebar-clear-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
}

/* ==============================
   CONTEÚDO PRINCIPAL (ao lado da sidebar)
   ============================== */
.arsenal-main {
  flex: 1;
  min-width: 0;
}

/* ── Barra de Busca (Simplificada) ── */
.arsenal-search-wrapper {
  margin: 0 0 var(--space-05);
}

.arsenal-search-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  transition: all var(--trans);
  padding-left: 16px;
}

.arsenal-search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(255 102 204 / 15%);
}

.search-bar-icon {
  width: 20px;
  height: 20px;
  color: var(--text-2);
  flex-shrink: 0;
}

.arsenal-search-bar .search-input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  outline: none;
}

/* Mensagem de Nenhum Resultado */
.arsenal-no-results {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-08) var(--space-04);
  margin: var(--space-06) auto;
  max-width: 500px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.arsenal-no-results i,
.arsenal-no-results svg {
  width: 64px;
  height: 64px;
  color: var(--muted);
  margin-bottom: var(--space-04);
  opacity: 0.6;
}

.arsenal-no-results h3 {
  font-size: 1.25rem;
  color: var(--text);
  margin: 0 0 var(--space-02);
}

.arsenal-no-results p {
  color: var(--muted);
  margin: 0 0 var(--space-04);
}

.arsenal-no-results .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.category-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-02);
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-01);
  padding: 0.5rem 1rem;
  background: var(--glass);
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  transition: all 0.25s ease;
  border: 1px solid var(--border);
  letter-spacing: 0.02em;
}

.category-link:hover,
.category-link:focus-visible {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgb(255 77 166 / 35%);
}

/* Container de Materiais */
.materiais-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-06);
}

/* Categoria de Material */
.material-category {
  scroll-margin-top: calc(var(--materials-nav-offset) + var(--space-04));
  transition: background 0.3s, border-color 0.3s;
  padding: var(--space-04);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}

.material-category.highlight {
  background: var(--glass);
  border-color: var(--accent);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-03);
  margin-bottom: var(--space-04);
  padding-bottom: var(--space-03);
  border-bottom: 1px solid var(--border);
}

.category-header h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  color: var(--text);
  margin: 0;
}

.product-count {
  background: var(--glass);
  color: var(--text);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--border);
}

/* Grid de Produtos */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-04);
}

/* Card de Produto */
.product-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--color-outline);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgb(5 4 11 / 35%);
}

.product-image {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  background: var(--glass);
  border-bottom: 1px solid var(--color-outline);
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.store-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgb(5 4 11 / 75%);
  color: white;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  border: 1px solid rgb(255 255 255 / 20%);
}

.product-content {
  padding: var(--space-05);
  display: flex;
  flex-direction: column;
  gap: var(--space-03);
  flex: 1;
}

.product-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  margin: 0;
  font-family: var(--font-display);
}

.product-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

.btn-product {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Galeria Adicional */
.product-gallery {
  display: flex;
  gap: 0.5rem;
  padding: 0 var(--space-04) var(--space-04);
}

.product-gallery img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid var(--border);
}

.product-gallery img:hover {
  transform: scale(1.1);
  border-color: var(--accent);
}

/* ===== DUAL-PATH LAYOUT (Bridge Pages) ===== */
.dual-path-card {
  overflow: visible;

  /* Sobrescreve o flex-direction: column do .product-card base */
  display: block;
}

.card-dual-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.card-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Barra lateral "Saber Mais" */
.card-side-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  background: linear-gradient(180deg, rgb(0 217 255 / 8%), rgb(0 217 255 / 15%));
  border-left: 1px solid rgb(0 217 255 / 20%);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card-side-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--accent), #00a8cc);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-side-action:hover::before {
  opacity: 1;
}

.card-side-action:hover {
  width: 56px;
}

.side-action-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  padding: 16px 8px;
}

.side-action-content i {
  width: 18px;
  height: 18px;
  color: var(--accent);
  transition: color 0.3s;
}

.card-side-action:hover .side-action-content i {
  color: #000;
}

.side-action-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.3s;
  white-space: nowrap;
}

.card-side-action:hover .side-action-text {
  color: #000;
}

/* CTA Principal destacado */
.btn-cta-primary {
  background: linear-gradient(135deg, var(--accent), #00a8cc);
  color: #000;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 12px rgb(0 217 255 / 30%);
}

.btn-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgb(0 217 255 / 40%);
}

.btn-cta-primary i {
  width: 18px;
  height: 18px;
}

/* Botões secundários compactos */
.card-secondary-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-icon-only {
  flex: 1;
  min-width: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon-only i {
  width: 16px;
  height: 16px;
}

/* Responsivo: Sidebar vira drawer em mobile */
@media (width <= 768px) {
  .arsenal-mobile-filter-btn {
    display: flex;
  }

  .arsenal-page-layout {
    flex-direction: column;
  }

  .arsenal-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    max-height: none;
    z-index: 1100;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-05);
    overflow-y: auto;
    animation: sidebarSlideIn 0.3s ease;
    background: var(--card, #1a1a2e);
    backdrop-filter: blur(24px);
  }

  .arsenal-sidebar.open {
    display: block;
  }

  .arsenal-sidebar .sidebar-close-btn {
    display: flex;
  }

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@keyframes sidebarSlideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsivo: Mobile - Barra inferior */
@media (width <= 480px) {
  .card-dual-container {
    flex-direction: column;
  }

  .card-side-action {
    width: 100%;
    height: 44px;
    border-left: none;
    border-top: 1px solid rgb(0 217 255 / 20%);
  }

  .card-side-action:hover {
    width: 100%;
    height: 48px;
  }

  .side-action-content {
    flex-direction: row;
    padding: 8px 16px;
  }

  .side-action-text {
    writing-mode: horizontal-tb;
    transform: none;
  }

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

  .arsenal-sidebar {
    width: 280px;
  }
}

/* Botão Voltar ao Topo */
.btn-back-to-top {
  position: fixed;
  bottom: clamp(1.5rem, 4vw, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  border: 1px solid var(--color-outline-strong);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 35px rgb(5 4 11 / 45%);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 60;
  pointer-events: none;
}

.btn-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.btn-back-to-top:hover {
  box-shadow: 0 20px 40px rgb(194 23 40 / 35%);
}

@media (prefers-reduced-motion: reduce) {
  .btn-back-to-top,
  .product-card,
  .category-link {
    transition: none;
  }
}

/* Responsividade */
@media (width <= 1024px) {
  .main-arsenal {
    --materials-nav-offset: 0px;

    padding: var(--space-05);
  }

  .arsenal-nav {
    position: relative;
    top: auto;
  }
}

@media (width <= 768px) {
  .arsenal-hero {
    text-align: center;
  }

  .arsenal-hero h1 {
    flex-direction: column;
  }

  .arsenal-subtitle {
    font-size: 1rem;
  }

  .arsenal-stats {
    gap: var(--space-03);
  }

  .stat-number {
    font-size: 2rem;
  }

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

  .category-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-back-to-top {
    width: 48px;
    height: 48px;
  }
}

/* ===== CSS inline migrado da Fase 3 ===== */

/* Migrado de templates/materials.html */
.subtag-pills {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin: 12px 0 16px;
                padding-bottom: 16px;
                border-bottom: 1px solid rgb(255 255 255 / 10%);
            }

            .subtag-pill {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 8px 16px;
                background: rgb(255 255 255 / 5%);
                border: 1px solid rgb(255 255 255 / 10%);
                border-radius: 20px;
                color: var(--text-secondary, #aaa);
                font-size: 0.875rem;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.2s ease;
            }

            .subtag-pill:hover {
                background: rgb(255 255 255 / 10%);
                border-color: rgb(255 255 255 / 20%);
                color: var(--text-primary, #fff);
            }

            .subtag-pill.active {
                background: linear-gradient(135deg, var(--accent-primary, #ff6b9d) 0%, var(--accent-secondary, #c44569) 100%);
                border-color: transparent;
                color: #fff;
                box-shadow: 0 2px 8px rgb(255 107 157 / 30%);
            }

            .subtag-pill .pill-count {
                opacity: 0.7;
                font-size: 0.75rem;
            }

            .subtag-pill.active .pill-count {
                opacity: 0.9;
            }

.materials-page__material-layout {
  max-width: 800px;
  width: 90%;
  max-height: 85vh;
}

.materials-page__material-muted-text {
  color: #888;
  font-size: 0.8rem;
}

.materials-page__product-rating-warning-flex-text {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #f1c40f;
}

.materials-page__badge-coupon-interactive {
  cursor: pointer;
}

.materials-page__arsenal-no-results-hidden {
  display: none;
}

@media (width <= 768px) {
  .search-bar-container {
    flex-wrap: wrap;
    gap: 12px;
  }

  .search-bar-container>div[style*="flex-grow: 1"] {
    order: -1;
    width: 100%;
    flex-basis: 100%;
  }

  .search-bar-container>div[style*="display: flex"],
  [id="sort-filter"] {
    flex: 1;
    width: auto;
    justify-content: center;
    margin-left: 0;
    min-width: 0;
  }

  .search-bar-container>div[style*="display: flex"] {
    gap: 8px;
  }

  [id="currency-filter"] {
    max-width: none;
    width: 100%;
  }

  .material-category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .subtag-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 12px;
  }

  .subtag-pills::-webkit-scrollbar {
    display: none;
  }

  .subtag-pill {
    flex-shrink: 0;
  }
}

@media (width <= 480px) {
  .material-category-grid {
    grid-template-columns: 1fr;
  }
}
}