:root {
  --pink-paper: #f9eaf4;
  --kuromi-pattern: url("media/kuromi-estampado.png");
}
.tab-icon, #nav-filters, #open-filters { display: none; }
.youtube-tag {
  display: inline-block;
  margin-left: 3px;
  padding: 2px 5px;
  border-radius: 6px;
  color: #802346;
  background: #fae8ef;
  letter-spacing: 0;
  text-transform: none;
}
.catalog-tools, #filters-inline, #selected-materials { grid-column: 1 / -1; }
#filter-controls {
  display: grid;
  gap: 10px;
  min-width: 0;
}
#filter-panel { margin-top: 1px; }
.hero-art::before {
  background: linear-gradient(#fff9, #fff9), var(--kuromi-pattern) center / 245px;
}
.filter-reset:focus-visible, #open-filters:focus-visible { outline-offset: 2px; }
@media (min-width: 800px) {
  #jump-tutorial { display: none; }
}

@media (max-width: 639px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .top-inner { padding-block: 3px; }
  #main-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 5px max(12px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-radius: 0;
    border-top: 1px solid #e7d3ed;
    background: linear-gradient(#fff6fbf5,#fff6fbf5), var(--kuromi-pattern) center / 270px;
    box-shadow: 0 -5px 16px #32134d14;
  }
  body[data-view="catalogo"] #main-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body[data-view="catalogo"] #nav-filters { display: grid; }
  #main-nav a, #nav-filters {
    display: grid;
    place-items: center;
    gap: 0;
    min-height: 52px;
    padding: 4px;
    border-radius: 11px;
    color: #56376d;
    font-weight: 700;
    font-size: .78rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }
  #nav-filters { background: transparent; border: 0; font-weight: 700; }
  .tab-icon { display: block; font-size: 1.23rem; }
  #main-nav a[aria-current] { color: #4b2370; background: #eee0f6; box-shadow: none; }
  .hero { padding: 16px 12px 12px; }
  .hero-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-actions a:nth-child(2) { grid-column: 1 / -1; }
  .catalog-heading { padding-bottom: 9px; }
  .catalog-heading h1 { font-size: clamp(1.85rem, 7.4vw, 2.8rem); }
  .filters { gap: 8px; padding: 9px; }
  .filters > .filter-header, #filters-inline { display: none; }
  .catalog-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  #open-filters { display: inline-flex; padding-inline: 9px; border: 0; gap: 5px; }
  #filter-badge:not(:empty) {
    min-width: 18px;
    padding-inline: 3px;
    border-radius: 999px;
    color: #39204d;
    background: #ead6fa;
    font-size: .75rem;
  }
  #selected-materials { margin: 0; }
  #selected-materials .selected-chip { background: #f3e7fb; }
  .cards { grid-template-columns: minmax(0,1fr); }
  .card { display: grid; grid-template-columns: clamp(82px, 27vw, 145px) minmax(0,1fr); border-radius: 14px; }
  .card .photo { min-height: 100%; aspect-ratio: auto; }
  .card-body { min-width: 0; padding: 9px 10px 4px; gap: 5px; }
  .card-body .intro { line-height: 1.35; }
  .card-body .tags { margin-top: 0; }
  .card-link { margin-top: auto; }
  .detail-header { background: linear-gradient(#fff8fdef,#fff), var(--kuromi-pattern) center / 350px; }
  .detail-grid { grid-template-areas: "intro" "steps" "media"; }
  .detail-header { grid-area: intro; }
  .detail-copy { grid-area: steps; }
  .detail-side { grid-area: media; scroll-margin-top: 10px; }
  #detail[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #detail-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 12px;
  }
  #detail-nav-slot #main-nav { position: static; }
  #filters-dialog {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    height: auto;
    max-height: min(87dvh, 720px);
    margin: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 34px #30144033;
  }
  #filters-dialog[open] { display: flex; flex-direction: column; }
  .drawer-header, .drawer-footer {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    background: #fff8fd;
  }
  .drawer-header { border-bottom: 1px solid var(--line); }
  .drawer-header h2 { font-size: 1.45rem; margin-right: auto; }
  .drawer-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: white; font-size: 1.4rem; }
  #filters-drawer-body { overflow: auto; overscroll-behavior: contain; padding: 11px 13px; }
  #filters-dialog summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    list-style: none;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid #ddc5ef;
    border-radius: 9px;
    color: #502b81;
    background: #faf3fd;
  }
  #filters-dialog summary::-webkit-details-marker { display: none; }
  .drawer-footer { border-top: 1px solid var(--line); padding-bottom: max(9px, env(safe-area-inset-bottom)); }
  .drawer-footer button { width: 100%; border: 0; }
}