/* Catálogo: uma única estrutura de filtros e uma grade previsível. */
.page-shop { background: #fff; color: #111; }
.shop-heading { padding-top: 32px; padding-bottom: 0; }
.shop-breadcrumb { margin-bottom: 26px; font-size: 12px; color: #656565; }
.shop-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.shop-breadcrumb li + li::before { content: '/'; margin-right: 8px; color: #999; }
.shop-breadcrumb a:hover { text-decoration: underline; color: #111; }
.shop-heading h1 { max-width: 100%; font-family: var(--font-display); font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-transform: none; overflow-wrap: anywhere; }
.shop-heading > p { margin-top: 12px; max-width: 640px; font-size: 14px; color: #656565; line-height: 1.6; }
.shop-category-nav { display: flex; gap: 28px; margin-top: 26px; border-bottom: 1px solid var(--color-red); }
.shop-category-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 0; font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.shop-category-nav a[aria-current] { border-bottom-color: #111; }
.shop-category-nav a:hover { color: #b52b24; }
.shop-subcategories { display: flex; flex-wrap: wrap; gap: 4px 22px; padding-top: 9px; }
.shop-subcategories[hidden] { display: none; }
.shop-subcategories a { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; color: #656565; }
.shop-subcategories a[aria-current], .shop-subcategories a:hover { color: #111; text-decoration: underline; text-underline-offset: 5px; }
.shop-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; padding-top: 30px; padding-bottom: 80px; }
.shop-filters { min-width: 0; align-self: start; }
.shop-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 10px; }
.shop-filter-heading h2 { font: 600 15px var(--font-body); text-transform: none; letter-spacing: 0; }
.shop-clear { min-height: 44px; padding: 6px; color: #666; text-decoration: underline; font-size: 12px; text-underline-offset: 3px; }
.shop-clear:disabled { opacity: .45; cursor: default; }
.shop-filter-group { border-top: 1px solid var(--color-red); padding: 8px 0 16px; }
.shop-filter-group summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 13px; list-style: none; }
.shop-filter-group summary::-webkit-details-marker { display: none; }
.shop-filter-group summary::after { content: '+'; font-size: 18px; font-weight: 400; }
.shop-filter-group[open] summary::after { content: '−'; }
.shop-size-options { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 6px; }
.shop-size-options button { min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #d8d8d8; border-radius: 2px; font-size: 12px; background: #fff; }
.shop-size-options button[aria-pressed="true"] { border-color: #111; background: #111; color: #fff; }
.shop-color-options { display: grid; grid-template-columns: 1fr; gap: 0; }
.shop-color-options button { display: flex; align-items: center; gap: 10px; min-height: 44px; text-align: left; font-size: 12px; padding: 5px 4px; border: 1px solid transparent; border-radius: 2px; }
.shop-color-options button[aria-pressed="true"] { border-color: #111; background: #f6f6f4; }
.shop-color-dot { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid #0002; border-radius: 50%; background: var(--swatch); }
.shop-filter-note { color: #666; font-size: 12px; line-height: 1.6; }
.shop-price-control { padding: 4px 0 8px; }
.shop-price-control label { display: block; margin-bottom: 6px; font-size: 12px; }
.shop-price-control input { width: 100%; min-height: 44px; accent-color: #111; cursor: pointer; }
.shop-price-control > div { display: flex; justify-content: space-between; color: #777; font-size: 11px; }
.shop-products { min-width: 0; }
.shop-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; min-height: 44px; }
#products-count { color: #656565; font-size: 13px; }
.shop-toolbar-actions { display: flex; align-items: center; gap: 12px; }
.shop-toolbar select, #btn-mobile-filters { min-height: 44px; border: 1px solid #ddd; padding: 9px 12px; background: #fff; font-family: var(--font-body); font-size: 12px; border-radius: 2px; color: #111; }
.shop-toolbar select { max-width: 185px; cursor: pointer; }
#btn-mobile-filters, .shop-filter-close, .shop-filter-footer { display: none; }
.shop-active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.shop-active-filters[hidden] { display: none; }
.shop-active-filters button { display: flex; gap: 14px; align-items: center; min-height: 44px; max-width: 100%; padding: 8px 12px; background: #f4f4f2; border: 1px solid #e5e5e5; font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.shop-active-filters button span { font-size: 19px; }
.shop-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 18px; min-width: 0; }
.shop-product-grid > * { min-width: 0; }
.shop-skeleton { min-height: 220px; aspect-ratio: 3 / 5; background: #f3f3f1; border-radius: 2px; }
.shop-empty { grid-column: 1 / -1; padding: 66px 20px; text-align: center; background: #f7f7f5; }
.shop-empty h3 { font-family: var(--font-display); font-size: 25px; line-height: 1.2; text-transform: none; }
.shop-empty p { max-width: 400px; margin: 12px auto 24px; font-size: 14px; line-height: 1.6; color: #656565; }
.shop-empty .btn { white-space: normal; }
.shop-filter-overlay { position: fixed; inset: 0; background: #0007; z-index: 1190; }
.shop-filter-overlay[hidden] { display: none; }
.page-shop :is(button, a, select, input, summary):focus-visible { outline: 2px solid #b52b24; outline-offset: 4px; }

@media (max-width: 1250px) {
  .shop-layout { grid-template-columns: 172px minmax(0, 1fr); gap: 28px; }
  .shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 16px; }
}
@media (max-width: 959px) {
  .shop-heading { padding-top: 24px; }
  .shop-layout { display: block; padding-top: 24px; }
  .shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #btn-mobile-filters { display: inline-flex; align-items: center; justify-content: center; }
  .shop-filters { position: fixed; top: 0; left: 0; width: min(360px, 91vw); height: 100dvh; background: #fff; z-index: 1200; padding: 0 22px; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateX(-100%); transition: transform 180ms ease; }
  .shop-filters.is-open { visibility: visible; transform: translateX(0); }
  .shop-filter-heading { position: sticky; top: 0; z-index: 1; padding: 13px 0; margin-bottom: 2px; background: #fff; border-bottom: 1px solid var(--color-red); }
  .shop-filter-heading h2 { margin-right: auto; }
  .shop-filter-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 28px; }
  .shop-color-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .shop-filter-footer { display: block; position: sticky; bottom: 0; background: #fff; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-red); }
  .shop-filter-footer .btn { width: 100%; }
}
@media (max-width: 639px) {
  .shop-breadcrumb { margin-bottom: 20px; font-size: 11px; }
  .shop-heading h1 { font-size: 32px; }
  .shop-heading > p { font-size: 13px; }
  .shop-category-nav { gap: 0; justify-content: space-between; margin-top: 20px; }
  .shop-category-nav a { font-size: 12px; }
  .shop-subcategories { gap: 0 18px; }
  .shop-subcategories a { font-size: 12px; }
  .shop-layout { padding-top: 20px; padding-bottom: 54px; }
  .shop-toolbar { gap: 12px 6px; margin-bottom: 18px; }
  .shop-toolbar > div:first-child { flex: 1 0 100%; }
  .shop-toolbar-actions { width: 100%; justify-content: space-between; }
  .shop-toolbar-actions select, #btn-mobile-filters { width: calc(50% - 6px); max-width: none; }
  .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .shop-skeleton { min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) { .shop-filters { transition: none; } }