/* Paleta Justin Bieber (tons neutros; era a paleta Hailey) — carregada depois do design system. */
:root {
  --hailey-background: #c9c7c5;
  --hailey-detail: #1b1b1b;
  --hailey-text: #4a4747;
  --hailey-title: #1b1b1b;
  --hailey-surface: #e4e2e0;
  --hailey-surface-soft: #d6d4d2;
  --hailey-border: rgba(27, 27, 27,.22);
  --hailey-on-dark: #f7f6f4;
  --hailey-hero-backdrop: linear-gradient(180deg, #1f1e1e 0%, #5a5857 25%, #8a8786 53%, #b0adab 78%, #c9c7c5 100%);
  --ink: var(--hailey-title);
  --paper: var(--hailey-background);
  --fog: var(--hailey-surface-soft);
  --muted: var(--hailey-text);
  --line: var(--hailey-border);
  --accent: var(--hailey-detail);
  --demi-body-bg: var(--hailey-background);
  --demi-hero-bg: var(--hailey-background);
  --demi-hero-smoke: var(--hailey-detail);
  --dlp-body: var(--hailey-background);
  --dlp-surface: var(--hailey-surface);
  --dlp-pink: var(--hailey-surface-soft);
  --dlp-blue: var(--hailey-detail);
  --dlp-blue-dark: var(--hailey-title);
  --dlp-muted: var(--hailey-text);
  --dlp-border: var(--hailey-border);
  --dlp-image-border: var(--hailey-border);
}

body,
.gallery-site,
.gallery-site .gallery-home,
.gallery-site .archive-content,
.gallery-site .public-index-page,
.gallery-site .archive-browser {
  background-color: var(--hailey-background) !important;
}

.gallery-site {
  --gallery-bg: var(--hailey-background) !important;
  --gallery-surface: var(--hailey-surface) !important;
  --gallery-text: var(--hailey-text) !important;
  --gallery-title: var(--hailey-title) !important;
  --gallery-accent: var(--hailey-detail) !important;
  --hero-bg: var(--hailey-background) !important;
  --hero-smoke: var(--hailey-detail) !important;
  color: var(--hailey-text) !important;
}

.gallery-site :where(.archive-content, .public-index-page, .archive-browser, .gallery-home) {
  color: var(--hailey-text) !important;
}

.gallery-site :where(.archive-content, .public-index-page, .archive-browser) :where(h1, h2, h3, h4, h5, h6),
.gallery-site .archive-intro :where(h1, h1 strong, h1 small),
.gallery-site :where(
  .archive-section-title h2,
  .album-copy strong,
  .category-copy strong,
  .all-album-copy strong,
  .ranking-list strong,
  .year-copy strong,
  .browser-album-grid strong,
  .month-grid strong,
  .thumb_title,
  .thumb_caption
) {
  color: var(--hailey-title) !important;
}

.gallery-site :where(
  .archive-section-title > div > span,
  .public-index-heading p,
  .section-kicker,
  .eyebrow,
  .album-copy small,
  .album-copy em,
  .category-copy small,
  .thumbnail-card > div > small,
  .thumbnail-card p,
  .all-album-copy small,
  .all-album-copy em,
  .ranking-list small,
  .archive-breadcrumb,
  .browser-title > div > span,
  .year-copy small,
  .browser-album-grid small,
  .browser-album-grid em,
  .month-grid small,
  .month-grid em,
  .month-grid i,
  .archive-statline,
  .lightbox-info > p,
  .lightbox-info dt
) {
  color: var(--hailey-text) !important;
}

.gallery-site :where(
  .archive-section,
  .browser-title,
  .public-index-heading,
  .updated-album,
  .category-section,
  .category-list,
  .category-group,
  .category-row,
  .category-years-panel,
  .folder-symbol,
  .public-index-filters,
  .ranking-period,
  .ranking-list,
  .browser-month-card,
  .browser-album-card,
  .gallery-empty-state
) {
  border-color: var(--hailey-border) !important;
}

.gallery-home .category-section,
.gallery-home .category-section :where(.category-list, .category-group, .category-row, .category-years-panel),
.gallery-site .media-placeholder {
  background-color: #d0cecc !important;
}

.gallery-home .category-section .category-row {
  transition: background-color .25s ease !important;
}

.gallery-home .category-section .category-row:hover {
  background-color: #ddc3b7 !important;
}

.gallery-home .category-section .category-row .folder-symbol {
  position: relative;
}

.gallery-home .category-section .category-row .folder-symbol::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b22d46' d='M12 21.3 4.2 13.6l-1.1-1.1a5.5 5.5 0 0 1 7.8-7.8L12 5.8l1-1.1a5.5 5.5 0 0 1 7.8 7.8l-1.1 1.1L12 21.3Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.gallery-home .category-section .category-row:hover .folder-symbol::after {
  opacity: 1;
}

.gallery-site :where(
  .archive-section-title > button,
  .archive-section-title > a,
  .ranking-period a.active,
  .album-view-switch a.active,
  .photo-size-switch a.active,
  .view-mode.active,
  .archive-pagination .active
),
.gallery-home .archive-search :where(button, a),
.gallery-home .popular-rank {
  border-color: var(--hailey-detail) !important;
  background-color: var(--hailey-detail) !important;
  color: var(--hailey-on-dark) !important;
}

.gallery-site .gallery-nav,
.gallery-site .gallery-footer,
.gallery-home :where(.throwback-window, .throwback-card, .gallery-empty-state.dark) {
  border-color: var(--hailey-title) !important;
  background-color: var(--hailey-title) !important;
  color: var(--hailey-on-dark) !important;
}

.gallery-home .archive-intro {
  min-height: clamp(400px, 48vh, 480px) !important;
  margin-bottom: -12px !important;
  border-bottom: 0 !important;
  background: var(--hailey-hero-backdrop) !important;
  box-shadow: inset 0 -2px 0 #c9c7c5 !important;
}

.gallery-site.gallery-home .archive-content {
  position: relative !important;
  z-index: auto !important;
  overflow: visible !important;
  margin-top: -8px !important;
  padding-top: 12px !important;
  background-color: #c9c7c5 !important;
}

@media (max-width: 700px) {
  .gallery-home .archive-intro {
    min-height: 420px !important;
  }

  .gallery-home .archive-intro-inner {
    padding: 260px 0 16px !important;
  }
}

.gallery-home .archive-intro::before {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(27, 27, 27,.2) 0%, rgba(27, 27, 27,.12) 42%, transparent 72%),
    var(--hailey-hero-backdrop) !important;
  filter: blur(34px) saturate(.96) !important;
  opacity: 1 !important;
  transform: scale(1.08) !important;
  animation: none !important;
}

.gallery-home .archive-intro::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  inset: auto 0 0 !important;
  display: block !important;
  height: clamp(360px, 38vw, 480px) !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    rgba(201, 199, 197,0) 0%,
    rgba(201, 199, 197,0) 38%,
    rgba(201, 199, 197,.04) 46%,
    rgba(201, 199, 197,.1) 54%,
    rgba(201, 199, 197,.2) 62%,
    rgba(201, 199, 197,.34) 70%,
    rgba(201, 199, 197,.5) 78%,
    rgba(201, 199, 197,.68) 86%,
    rgba(201, 199, 197,.84) 92%,
    rgba(201, 199, 197,.94) 97%,
    #c9c7c5 100%
  ) !important;
  box-shadow: none !important;
}

.gallery-home .hero-photo {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-composite: initial !important;
  mask-composite: initial !important;
}

.gallery-home .archive-content::before {
  display: block !important;
  top: -150px !important;
  height: 380px !important;
  background: linear-gradient(
    180deg,
    #c9c7c5 0%,
    rgba(201, 199, 197,.82) 30%,
    rgba(201, 199, 197,.5) 56%,
    rgba(201, 199, 197,.18) 82%,
    rgba(201, 199, 197,0) 100%
  ) !important;
  filter: blur(44px) !important;
}

.gallery-home .hero-smoke::before,
.gallery-home .hero-smoke::after,
.gallery-home .hero-smoke i {
  background: radial-gradient(ellipse at center, rgba(27, 27, 27,.58) 0%, rgba(27, 27, 27,.24) 30%, rgba(27, 27, 27,.08) 52%, transparent 73%) !important;
}

.gallery-home .hero-smoke {
  display: none !important;
}

.gallery-home .hero-toolbar {
  min-height: 29px !important;
  padding: 2px 4px !important;
  border-color: rgba(186, 183, 181,.5) !important;
  border-radius: 30px !important;
  background-color: #1b1b1b !important;
  color: #fafaf8 !important;
  box-shadow: 0 16px 38px rgba(27, 27, 27,.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.gallery-home .archive-intro .archive-stats-bar > div {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gallery-site :where(a, button, input, select, textarea):focus-visible {
  outline-color: var(--hailey-detail) !important;
}

/* Componentes que tinham a paleta antiga gravada diretamente no CSS. */
.admin-control-dock {
  position: sticky !important;
  z-index: 50 !important;
  overflow: visible !important;
  transform: translateY(-55px) !important;
  background: linear-gradient(to bottom, rgba(186, 183, 181,.98) 72%, rgba(186, 183, 181,0)) !important;
}

.admin-control-dock .admin-nav,
.admin-control-dock .admin-nav::before {
  border-color: rgba(255, 255, 255,.16) !important;
  background: var(--hailey-title) !important;
  color: var(--hailey-on-dark) !important;
}

.admin-control-dock .admin-nav {
  position: relative !important;
  z-index: 51 !important;
}

.admin-control-dock .admin-nav-item {
  color: rgba(255, 255, 255,.82) !important;
}

.admin-control-dock .admin-nav-item:hover,
.admin-control-dock .admin-nav-item.active {
  border-color: rgba(255, 255, 255,.16) !important;
  background: var(--hailey-detail) !important;
  color: var(--hailey-on-dark) !important;
}

.gallery-home .updated-album .album-thumb,
.gallery-home .updated-album .album-copy {
  border-color: var(--hailey-border) !important;
  background: var(--hailey-surface) !important;
}

.gallery-site .album-thumb i,
.gallery-home .updated-album .album-thumb i {
  border-color: var(--hailey-detail) !important;
  background: var(--hailey-detail) !important;
  color: var(--hailey-on-dark) !important;
}

.gallery-home .updated-album .album-copy strong {
  color: var(--hailey-title) !important;
}

.gallery-home .updated-album .album-copy em,
.gallery-home .updated-album > b {
  color: var(--hailey-text) !important;
}

.gallery-home .category-section .category-year-buttons :where(button, a) {
  border-color: var(--hailey-border) !important;
  background: var(--hailey-surface) !important;
  color: var(--hailey-title) !important;
}

.gallery-home .category-section .category-year-buttons :where(button, a):hover,
.gallery-home .category-section .category-year-buttons :where(button, a):focus-visible {
  border-color: var(--hailey-detail) !important;
  background: var(--hailey-detail) !important;
  color: var(--hailey-on-dark) !important;
}

.admin-shell,
.admin-main,
.admin-content {
  background-color: var(--hailey-background) !important;
  color: var(--hailey-text) !important;
}

.admin-shell :where(h1, h2, h3, h4, h5, h6, .panel-title strong) {
  color: var(--hailey-title) !important;
}

.admin-shell :where(.new-upload, .upload-submit, button.primary, a.primary) {
  border-color: var(--hailey-detail) !important;
  background-color: var(--hailey-detail) !important;
  color: #f7f6f4 !important;
}

/* Menu superior — vidro marfim e tipografia editorial da arte. */
.gallery-site .gallery-topbar.hero-mode {
  top: 58px !important;
}

.gallery-site .gallery-nav {
  height: 50px !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
  border-color: rgba(111,64,55,.2) !important;
  background: #ffffe2 !important;
  box-shadow: 0 0 28px 7px rgba(255,255,226,.58) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.gallery-site .gallery-nav :where(
  a,
  button,
  .language-trigger,
  .language-icon,
  .login-entry,
  .logout-entry,
  .admin-entry,
  .arq-ico
) {
  color: #3b3939 !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
}

.gallery-site .gallery-nav :where(a, button, .language-trigger, .logout-entry) {
  text-transform: uppercase !important;
  letter-spacing: -1px !important;
}

.gallery-site .gallery-nav .nav-primary :where(a, button),
.gallery-site .gallery-nav .logout-entry {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -1px !important;
  text-decoration-line: underline !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  transition: color .25s ease, text-decoration-color .25s ease !important;
}

.gallery-site .gallery-nav .nav-primary :where(a, button):hover,
.gallery-site .gallery-nav .nav-primary :where(a, button).active,
.gallery-site .gallery-nav .logout-entry:hover {
  background: transparent !important;
  color: #1b1b1b !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-decoration-line: underline !important;
  text-decoration-color: #1b1b1b !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

.gallery-site .gallery-nav .nav-primary :where(a, button)::after {
  background: transparent !important;
}

.gallery-site .gallery-nav .nav-primary :where(a, button):hover::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
}

.gallery-site .gallery-nav .nav-primary :where(a, button) + :where(a, button)::before,
.gallery-site .gallery-nav :where(.nav-utility-divider, .utility-divider) {
  background: #dfbbab !important;
}

.gallery-site .gallery-nav :where(.nav-category-menu, .language-menu) {
  border-color: rgba(111,64,55,.18) !important;
  background: rgba(255,254,212,.96) !important;
  box-shadow: 0 16px 38px rgba(65,35,30,.2) !important;
}

.gallery-site .gallery-nav :where(.nav-category-menu, .language-menu) :where(a, button):hover,
.gallery-site .gallery-nav :where(.nav-category-menu, .language-menu) :where(a, button).active {
  background: rgba(111,64,55,.1) !important;
  color: #3b3939 !important;
}

.gallery-site .gallery-nav .nav-brand {
  width: 58px !important;
  min-width: 58px !important;
  height: 38px !important;
  padding: 0 10px !important;
  background: transparent !important;
  overflow: visible !important;
}

.gallery-site .gallery-nav .nav-brand .brand-mark {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 34px !important;
  flex-basis: 38px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.gallery-site .gallery-nav .nav-brand .brand-mark img.nav-logo-image[width][height] {
  width: 38px !important;
  max-width: 38px !important;
  height: 34px !important;
  max-height: 34px !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

.gallery-site .gallery-footer .footer-brand img {
  object-fit: contain !important;
  object-position: center !important;
}

/* Cartões de álbuns recentes — fundo e moldura solicitados. */
.gallery-home .updated-album .album-thumb,
.gallery-home .updated-album .album-copy {
  border-color: #d0cecc !important;
  background: #d0cecc !important;
}

.gallery-home .updated-album .album-thumb {
  border-color: #ba998a !important;
}

/* Mais vistas com o mesmo acabamento visual dos álbuns recentes. */
.gallery-home .popular-thumb {
  border-color: #ba998a !important;
  background: #d0cecc !important;
}

.gallery-home .popular-copy {
  border-color: #d0cecc !important;
  background: #d0cecc !important;
}

/* Boas-vindas no espaço entre o hero e os álbuns recentes. */
.gallery-home .gallery-welcome {
  position: relative;
  z-index: 6;
  width: min(1080px, 100%);
  margin: -60px auto 4px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  overflow: hidden;
  border: 2px solid #aaa7a5;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,226,.88), rgba(214,183,168,.82));
  box-shadow: none;
  color: #1b1b1b;
}

.gallery-home .gallery-welcome::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -105px;
  width: 260px;
  height: 190px;
  border-radius: 50%;
  background: rgba(27, 27, 27,.08);
  filter: blur(30px);
  pointer-events: none;
}

.gallery-home .gallery-welcome-tv {
  position: relative;
  width: 120px;
  aspect-ratio: 322 / 257;
  display: block;
  filter: drop-shadow(0 15px 20px rgba(27, 27, 27,.24));
}

.gallery-home .gallery-welcome-screen {
  position: absolute;
  z-index: 1;
  left: 9.5%;
  top: 10.5%;
  width: 70%;
  height: 70.5%;
  overflow: hidden;
  border-radius: 4%;
  background: #321b20;
  box-shadow: inset 0 0 18px rgba(0,0,0,.34);
}

.gallery-home .gallery-welcome-screen img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: sepia(.55) saturate(.78) contrast(1.04) brightness(.96);
  border-radius: 0 !important;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .9s ease, transform 4.8s ease;
}

.gallery-home .gallery-welcome-screen img.is-active {
  opacity: 1;
  transform: scale(1);
}

.gallery-home .gallery-welcome-tv-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;
  border-radius: 0 !important;
  pointer-events: none;
}

.gallery-home .gallery-welcome p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #1b1b1b !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0;
  text-align: justify;
  text-align-last: left;
}

.gallery-home .gallery-welcome strong {
  color: #1b1b1b !important;
  font-weight: 800;
}

@media (max-width: 700px) {
  .gallery-home .gallery-welcome {
    margin-top: 0;
    padding: 21px;
    grid-template-columns: 1fr;
    gap: 14px;
    border-radius: 18px;
  }

  .gallery-home .gallery-welcome-tv {
    width: min(150px, 100%);
    margin: 0 auto;
  }

  .gallery-home .gallery-welcome p {
    font-size: 12px;
    line-height: 1.68;
  }
}

/* Títulos principais do corpo com a mesma linguagem tipográfica do menu. */
.gallery-site :where(
  .archive-section-title h2,
  .uploads-title h2,
  .browser-title h1,
  .month-browser-title h1,
  .public-index-heading h1,
  .archive-subhero-title strong
) {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  text-transform: uppercase !important;
  letter-spacing: -1px !important;
}

/* Busca compacta do hero: fechada mostra somente a lupa. */
.gallery-home .archive-search {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: width .32s ease, flex-basis .32s ease, background-color .25s ease !important;
}

.gallery-home .archive-search .archive-search-toggle {
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 21px !important;
  margin: 0 4px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #000000 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: color .25s ease !important;
}

.gallery-home .archive-search .archive-search-toggle:hover,
.gallery-home .archive-search .archive-search-toggle:focus-visible {
  background: transparent !important;
  color: #000000 !important;
  outline: 0 !important;
}

.gallery-home .archive-search .archive-search-toggle .arq-ico {
  width: 14px !important;
  height: 14px !important;
}

.gallery-home .archive-search:not(.is-open) input,
.gallery-home .archive-search:not(.is-open) > button[type="submit"] {
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.gallery-home .archive-search input,
.gallery-home .archive-search > button[type="submit"] {
  transition: opacity .22s ease, width .32s ease, flex-basis .32s ease, margin .32s ease, padding .32s ease !important;
}

.gallery-home .hero-toolbar :where(
  .archive-search input,
  .archive-search > button[type="submit"],
  .archive-stats-bar span,
  .archive-stats-bar strong
) {
  font-size: 8px !important;
  color: #fafaf8 !important;
}

.gallery-home .hero-toolbar .archive-search input::placeholder {
  color: rgba(255,255,240,.78) !important;
}

.gallery-home .hero-toolbar .archive-stats-bar > div > i {
  background: #000000 !important;
}

@media (min-width: 981px) {
  .gallery-home .hero-toolbar {
    align-self: flex-start !important;
    margin-left: 24px !important;
    margin-right: 0 !important;
    transform: translateY(211px) !important;
  }

  .gallery-home .archive-search {
    width: 42px !important;
    flex-basis: 42px !important;
    height: 23px !important;
  }

  .gallery-home .archive-intro .archive-stats-bar > div {
    min-height: 23px !important;
  }

  .gallery-home .archive-search.is-open {
    width: 205px !important;
    flex-basis: 205px !important;
  }

  .gallery-home .archive-search.is-open input {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding: 0 7px 0 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .gallery-home .archive-search.is-open > button[type="submit"] {
    width: 34px !important;
    min-width: 34px !important;
    flex: 0 0 34px !important;
    height: 21px !important;
    margin: 0 5px 0 2px !important;
    padding: 0 7px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 980px) {
  .gallery-home .archive-search {
    width: 46px !important;
    max-width: 100% !important;
    height: 46px !important;
    padding: 2px !important;
    flex-wrap: nowrap !important;
  }

  .gallery-home .archive-search.is-open {
    width: min(360px, calc(100vw - 36px)) !important;
  }

  .gallery-home .archive-search.is-open input {
    width: auto !important;
    min-width: 0 !important;
    height: 40px !important;
    flex: 1 1 auto !important;
    padding: 0 8px 0 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .gallery-home .archive-search.is-open > button[type="submit"] {
    width: 42px !important;
    min-width: 42px !important;
    height: 34px !important;
    flex: 0 0 42px !important;
    margin: 0 3px !important;
    padding: 0 7px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Throwback: cartões claros, leitura nítida e recorte lateral suavizado. */
.gallery-home .throwback-window {
  padding: 18px !important;
  border: 1px solid #1b1b1b !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ca5c75 0%, #1b1b1b 100%) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0,.2) !important;
}

.gallery-home .throwback-window::before,
.gallery-home .throwback-window::after {
  top: 0 !important;
  bottom: 0 !important;
  z-index: 3 !important;
  width: 34px !important;
  height: auto !important;
  border-radius: 0 !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none !important;
}

.gallery-home .throwback-window::before {
  left: 0 !important;
  background: linear-gradient(90deg, #c4536e 8%, rgba(196,83,110,0)) !important;
}

.gallery-home .throwback-window::after {
  right: 0 !important;
  background: linear-gradient(270deg, #b63450 8%, rgba(182,52,80,0)) !important;
}

.gallery-home .throwback-track {
  gap: 12px !important;
}

.gallery-home .throwback-card {
  width: 178px !important;
  flex-basis: 178px !important;
  border: 1px solid rgba(255,255,240,.62) !important;
  border-radius: 12px !important;
  background: #efd0d7 !important;
  color: #3b3939 !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0,.2) !important;
}

.gallery-home .throwback-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 22px rgba(111,64,55,.16) !important;
}

.gallery-home .throwback-card > button,
.gallery-home .throwback-card > a {
  width: calc(100% - 12px) !important;
  margin: 6px 6px 0 !important;
  border: 1px solid #d49aa7 !important;
  border-radius: 8px !important;
  background: #e5b5c0 !important;
  color: #3b3939 !important;
}

.gallery-home .throwback-card > button img,
.gallery-home .throwback-card > a img {
  opacity: 1 !important;
  filter: sepia(.08) saturate(.9) !important;
}

.gallery-home .throwback-card > button > span,
.gallery-home .throwback-card > a > span {
  background: #1b1b1b !important;
  color: #fafaf8 !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0,.18) !important;
}

.gallery-home .throwback-card > button::after,
.gallery-home .throwback-card > a::after {
  border-color: rgba(255,255,240,.72) !important;
  background-color: rgba(27, 27, 27,.9) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffff0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.7a5.5 5.5 0 0 0-7.8 0L12 5.8l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.3l7.8-7.7 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E") !important;
}

.gallery-home .throwback-card > div {
  min-height: 82px !important;
  padding: 11px 12px 12px !important;
}

.gallery-home .throwback-card h3 {
  height: 34px !important;
  min-height: 34px !important;
  color: #3b3939 !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

.gallery-home .throwback-card p {
  margin-top: 7px !important;
  color: #000000 !important;
  font-size: 8.5px !important;
  letter-spacing: .025em !important;
}

@media (max-width: 620px) {
  .gallery-home .throwback-window {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .gallery-home .throwback-card {
    width: 152px !important;
    flex-basis: 152px !important;
  }
}

/* Compact photo controls: one restrained toolbar instead of loose large buttons. */
.gallery-site.cpg-page-displayimage .cpg-photo-bar {
  min-height: 50px !important;
  margin-bottom: 12px !important;
  padding: 6px 7px !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px rgba(255, 255, 255,.24) !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar-left,
.gallery-site.cpg-page-displayimage .cpg-photo-bar-right {
  gap: 3px !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar-right {
  padding: 4px !important;
  border: 1px solid #aaa7a5 !important;
  border-radius: 10px !important;
  background: rgba(186, 183, 181,.72) !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-photo-back {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #1b1b1b !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-photo-back:hover {
  background: #f7f6f4 !important;
  color: #1b1b1b !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-pos {
  font-size: 9px !important;
  letter-spacing: .12em !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar-right > :where(span, a),
.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-admin-strip,
.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-admin-strip .buttonlist,
.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-admin-strip .buttonlist ul {
  margin: 0 !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-admin-strip.is-docked {
  padding: 0 4px 0 0 !important;
  border-right: 1px solid rgba(27, 27, 27,.2) !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-admin-strip .buttonlist ul {
  gap: 2px !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar :where(
  #pic_info_button > a,
  #slideshow_button > a,
  .cpg-photo-cmd,
  .cpg-photo-steps > a,
  .cpg-admin-strip .buttonlist a
) {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #1b1b1b !important;
  transition: color .2s ease, background-color .2s ease, transform .2s ease !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar :where(
  #pic_info_button > a,
  #slideshow_button > a,
  .cpg-photo-cmd,
  .cpg-photo-steps > a,
  .cpg-admin-strip .buttonlist a
):hover {
  background-color: #f7f6f4 !important;
  color: #1b1b1b !important;
  transform: translateY(-1px) !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-photo-steps {
  margin-left: 1px !important;
  padding-left: 4px !important;
  gap: 1px !important;
  border-left: 1px solid rgba(27, 27, 27,.2) !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-photo-cmd {
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 15px 15px !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar .cpg-photo-cmd:hover {
  color: transparent !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar img {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  object-fit: contain !important;
  opacity: .78 !important;
}

@media (max-width: 760px) {
  .gallery-site.cpg-page-displayimage .cpg-photo-bar {
    grid-template-columns: 1fr auto !important;
  }

  .gallery-site.cpg-page-displayimage .cpg-photo-pos {
    position: static !important;
    transform: none !important;
  }

  .gallery-site.cpg-page-displayimage .cpg-photo-bar-right {
    max-width: 62vw !important;
    overflow-x: auto !important;
  }
}

/* The Coppermine admin dock uses the exact same geometry on every page. */
.gallery-site:not(.gallery-home) .admin-control-dock {
  width: min(1120px, 92vw) !important;
  max-width: min(1120px, 92vw) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-top: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 50px !important;
  padding: 6px !important;
  justify-content: flex-start !important;
  gap: 3px !important;
  overflow-x: auto !important;
  border-radius: 10px !important;
}

.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav::before {
  min-height: 34px !important;
  padding: 0 12px 0 8px !important;
  flex: 0 0 auto !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
}

.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav-item {
  width: auto !important;
  min-width: max-content !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  color: rgba(255, 255, 255,.82) !important;
  font-size: 8px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: .015em !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}

.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav-item .admin-icon {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav-item .admin-icon :where(img, .arq-ico) {
  width: 14px !important;
  height: 14px !important;
}

@media (max-width: 760px) {
  .gallery-site:not(.gallery-home) .admin-control-dock {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
  }
}

/* Footer editorial: créditos laterais e logo central em medalhão. */
.gallery-site .gallery-footer {
  height: 110px !important;
  min-height: 110px !important;
  margin-top: 110px !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #1b1b1b !important;
  box-shadow: none !important;
}

.gallery-home .archive-content {
  padding-bottom: 0 !important;
}

.gallery-home #mais-vistos {
  padding-bottom: 34px !important;
}

.gallery-site .gallery-footer > .content-wrap.footer-layout {
  width: min(1120px, 90vw) !important;
  height: 110px !important;
  min-height: 110px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 14vw, 190px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(28px, 5vw, 72px) !important;
}

.gallery-site .gallery-footer .footer-brand,
.gallery-site .gallery-footer .footer-brand .brand-mark {
  width: clamp(170px, 14vw, 190px) !important;
  min-width: clamp(170px, 14vw, 190px) !important;
  height: clamp(170px, 14vw, 190px) !important;
}

.gallery-site .gallery-footer .footer-brand {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

.gallery-site .gallery-footer .footer-brand .brand-mark {
  padding: clamp(27px, 2.5vw, 34px) !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f7f6f4 !important;
  box-shadow: 0 0 22px 6px rgba(255, 255, 255,.4) !important;
  box-sizing: border-box !important;
}

.gallery-site .gallery-footer .footer-brand img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

.gallery-site .gallery-footer .footer-credit {
  width: auto !important;
  margin: 0 !important;
  color: #f7f6f4 !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -.2px !important;
  text-transform: uppercase !important;
  transform: translateY(0) !important;
}

.gallery-site .gallery-footer .footer-credit-theme {
  grid-column: 1 !important;
  text-align: right !important;
}

.gallery-site .gallery-footer .footer-credit-right {
  grid-column: 3 !important;
  text-align: left !important;
}

.gallery-site .gallery-footer .footer-credit a {
  color: #f7f6f4 !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
  vertical-align: baseline !important;
  transition: color .2s ease, opacity .2s ease !important;
}

.gallery-site .gallery-footer .footer-credit a:hover {
  color: #bab7b5 !important;
}

@media (max-width: 700px) {
  .gallery-site .gallery-footer {
    min-height: 190px !important;
    margin-top: 82px !important;
    padding: 78px 0 22px !important;
  }

  .gallery-site .gallery-footer > .content-wrap.footer-layout {
    min-height: 90px !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    justify-items: center !important;
  }

  .gallery-site .gallery-footer .footer-brand,
  .gallery-site .gallery-footer .footer-brand .brand-mark {
    width: 145px !important;
    min-width: 145px !important;
    height: 145px !important;
  }

  .gallery-site .gallery-footer .footer-credit-theme,
  .gallery-site .gallery-footer .footer-credit-right {
    grid-column: 1 !important;
    width: 100% !important;
    text-align: center !important;
    transform: none !important;
  }

  .gallery-site .gallery-footer .footer-credit-theme { grid-row: 1 !important; }
  .gallery-site .gallery-footer .footer-credit-right { grid-row: 2 !important; }
}

/* -------------------------------------------------------------------------
   Páginas internas — mesma configuração da entrega final do Arquivex.
   A estrutura, os breakpoints e o comportamento permanecem iguais ao tema
   de referência; somente as superfícies e os estados usam a paleta Hailey.
   ------------------------------------------------------------------------- */
.gallery-site:not(.gallery-home) .gallery-topbar.archive-mode {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  min-height: 62px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gallery-site:not(.gallery-home) .gallery-header-inner {
  width: min(1180px, calc(100% - 36px)) !important;
  height: 62px !important;
  min-width: 0 !important;
}

.gallery-site:not(.gallery-home) .gallery-nav {
  max-width: calc(100% - 36px) !important;
  min-width: 0 !important;
  height: 44px !important;
  margin: 8px auto 0 !important;
  padding: 0 10px !important;
  flex: 0 1 auto !important;
  border: 1px solid #dfbbab !important;
  border-radius: 30px !important;
  background: #ffffe2 !important;
  color: #3b3939 !important;
  box-shadow: 0 0 18px rgba(255,255,226,.72) !important;
}

.gallery-site:not(.gallery-home) .gallery-nav :where(a, button) {
  color: #3b3939 !important;
}

.gallery-site:not(.gallery-home) .archive-subhero {
  height: 120px !important;
  min-height: 120px !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: #c9c7c5 !important;
}

.gallery-site:not(.gallery-home) .archive-subhero::before {
  inset: -16% !important;
  background-color: #c9c7c5 !important;
  filter: sepia(18%) saturate(.78) brightness(.82) blur(18px) !important;
}

.gallery-site:not(.gallery-home) .archive-subhero-photo {
  inset: 0 !important;
  background-position: center 44% !important;
  background-size: cover !important;
  opacity: .76 !important;
}

.gallery-site:not(.gallery-home) .archive-subhero::after {
  background: linear-gradient(180deg, rgba(201, 199, 197,.04), #c9c7c5 100%) !important;
}

.gallery-site:not(.gallery-home) .archive-browser {
  min-height: 62vh !important;
  padding-top: 42px !important;
  padding-bottom: 76px !important;
  background: #c9c7c5 !important;
}

.gallery-site:not(.gallery-home) .archive-breadcrumb {
  margin-bottom: 10px !important;
  color: #4a4747 !important;
}

.gallery-site:not(.gallery-home) .archive-breadcrumb a {
  color: #1b1b1b !important;
}

.cpg-page-thumbnails .photo-browser-title {
  min-height: 0 !important;
  margin: 8px 0 30px !important;
  padding: clamp(22px, 2.7vw, 34px) !important;
  align-items: center !important;
  border: 2px solid #aaa7a5 !important;
  border-radius: 14px !important;
  background: #d0cecc !important;
  box-shadow: 0 14px 36px rgba(27, 27, 27,.08) !important;
}

.cpg-page-thumbnails .photo-browser-title p {
  color: #1b1b1b !important;
}

.cpg-page-thumbnails .photo-browser-title h1 {
  max-width: 720px !important;
  color: #1b1b1b !important;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: clamp(20px, 1.8vw, 25px) !important;
  line-height: 1.18 !important;
  letter-spacing: -1px !important;
  text-transform: uppercase !important;
}

.cpg-page-thumbnails .cpg-gallery-slot > table,
.cpg-page-thumbnails .cpg-gallery-slot > .maintable,
.cpg-page-thumbnails .cpg-gallery-slot .maintable {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.photo-browser-tools {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  position: static !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  inset: auto !important;
  display: block !important;
  transform: none !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist ul {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist li {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist a {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #aaa7a5 !important;
  border-radius: 50% !important;
  background: #f7f6f4 !important;
  color: #1b1b1b !important;
  box-shadow: none !important;
  transform: none !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist a:hover {
  border-color: #1b1b1b !important;
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
  transform: translateY(-2px) !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist img {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  opacity: .72 !important;
}

.thumbnail-size-switch {
  display: inline-grid !important;
  grid-template-columns: repeat(3, auto) !important;
  overflow: hidden !important;
  border: 1px solid #aaa7a5 !important;
  border-radius: 8px !important;
  background: #bab7b5 !important;
}

.thumbnail-size-switch button {
  min-width: 76px !important;
  height: 40px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-right: 1px solid #aaa7a5 !important;
  background: transparent !important;
  color: #1b1b1b !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.thumbnail-size-switch button:last-child { border-right: 0 !important; }
.thumbnail-size-switch button.active {
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
}

.cpg-page-thumbnails .thumbnail-grid,
.cpg-page-thumbnails .thumbnail-grid[data-arq-size="small"] {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 24px 11px !important;
}

.cpg-page-thumbnails .thumbnail-grid[data-arq-size="medium"] {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.cpg-page-thumbnails .thumbnail-grid[data-arq-size="large"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 30px 15px !important;
}

.cpg-page-thumbnails .thumbnail-card {
  min-width: 0 !important;
  transform: none !important;
}

.cpg-page-thumbnails .thumbnail-image {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #aaa7a5 !important;
  border-radius: 10px !important;
  background: #d0cecc !important;
  box-shadow: 0 9px 24px rgba(27, 27, 27,.1) !important;
}

.cpg-page-thumbnails .thumbnail-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 32% !important;
}

.cpg-page-thumbnails .thumbnail-card > .thumbnail-meta-wrap {
  min-height: 36px !important;
  margin: 0 !important;
  padding: 8px 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.cpg-page-thumbnails .thumbnail-meta {
  min-height: 28px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  color: #4a4747 !important;
}

.cpg-page-thumbnails .thumbnail-views {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1b1b1b !important;
  box-shadow: none !important;
  transform: none !important;
}

.cpg-page-thumbnails .thumbnail-views b {
  color: #1b1b1b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.cpg-page-thumbnails .thumbnail-views small {
  color: #4a4747 !important;
  font-size: 9px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.cpg-page-thumbnails .thumbnail-views :where(b, small),
.cpg-page-thumbnails .thumbnail-meta-icon {
  color: #1b1b1b !important;
}

.cpg-page-thumbnails .thumbnail-heart {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  inset: auto !important;
  border-color: #aaa7a5 !important;
  background: #d0cecc !important;
  color: #1b1b1b !important;
}

.cpg-page-thumbnails .thumbnail-heart:hover,
.cpg-page-thumbnails .thumbnail-heart.is-saved {
  border-color: #1b1b1b !important;
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
}

.cpg-page-thumbnails .archive-pagination :where(a, b) {
  border-color: #aaa7a5 !important;
  background: #d0cecc !important;
  color: #1b1b1b !important;
}

.cpg-page-thumbnails .archive-pagination .active {
  border-color: #1b1b1b !important;
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
}

/* Visualização individual: palco, controles e filme nativos do Arquivex. */
.cpg-page-displayimage .cpg-photo-bar,
.cpg-page-displayimage .cpg-filmstrip,
.cpg-page-displayimage #rating_stars {
  border-color: #aaa7a5 !important;
  background: #d0cecc !important;
  box-shadow: none !important;
}

.cpg-page-displayimage .cpg-photo-bar :where(a, .cpg-photo-cmd),
.cpg-page-displayimage .cpg-photo-bar .cpg-admin-strip .buttonlist a {
  border-color: #aaa7a5 !important;
  background: #bab7b5 !important;
  color: #1b1b1b !important;
}

.cpg-page-displayimage .cpg-photo-bar :where(a, .cpg-photo-cmd):hover,
.cpg-page-displayimage .cpg-photo-bar .cpg-admin-strip .buttonlist a:hover {
  border-color: #1b1b1b !important;
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
}

.cpg-page-displayimage .cpg-photo {
  border-color: #aaa7a5 !important;
  background: #d0cecc !important;
  box-shadow: none !important;
}

.cpg-page-displayimage .cpg-photo-stage,
.cpg-page-displayimage .cpg-photo-stage[style] {
  background: #d0cecc !important;
}

.cpg-page-displayimage .cpg-stage-nav {
  border-color: #aaa7a5 !important;
  background: #f7f6f4 !important;
  color: #1b1b1b !important;
}

.cpg-page-displayimage .cpg-stage-nav:hover {
  border-color: #1b1b1b !important;
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
}

.cpg-page-displayimage .cpg-filmstrip td.thumb:has(img.middlethumb) .thumbLink {
  box-shadow: 0 0 0 2px #1b1b1b, 0 0 0 5px #d0cecc !important;
}

.cpg-page-displayimage .cpg-photo-meta {
  border-color: #aaa7a5 !important;
}

.arq-photo-lightbox {
  background: rgba(27, 27, 27,.82) !important;
}

.arq-lightbox-close,
.arq-lightbox-nav {
  border-color: #aaa7a5 !important;
  background: #f7f6f4 !important;
  color: #1b1b1b !important;
}

.arq-lightbox-save,
.arq-lightbox-close:hover,
.arq-lightbox-nav:hover {
  border-color: #1b1b1b !important;
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
}

@media (max-width: 980px) {
  .cpg-page-thumbnails .photo-browser-title {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .photo-browser-tools { width: 100% !important; justify-content: space-between !important; }
  .cpg-page-thumbnails .thumbnail-grid,
  .cpg-page-thumbnails .thumbnail-grid[data-arq-size="small"] { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .cpg-page-thumbnails .thumbnail-grid[data-arq-size="medium"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .cpg-page-thumbnails .thumbnail-grid[data-arq-size="large"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .gallery-site:not(.gallery-home) .gallery-topbar.archive-mode { min-height: 58px !important; }
  .gallery-site:not(.gallery-home) .gallery-header-inner {
    width: calc(100% - 20px) !important;
    height: 58px !important;
  }
  .gallery-site:not(.gallery-home) .archive-subhero {
    height: 96px !important;
    min-height: 96px !important;
  }
}

@media (max-width: 620px) {
  .photo-browser-tools { align-items: flex-start !important; flex-direction: column !important; }
  .thumbnail-size-switch { width: 100% !important; }
  .thumbnail-size-switch button { min-width: 0 !important; width: 100% !important; padding: 0 7px !important; }
  .cpg-page-thumbnails .thumbnail-grid,
  .cpg-page-thumbnails .thumbnail-grid[data-arq-size="small"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cpg-page-thumbnails .thumbnail-grid[data-arq-size="medium"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cpg-page-thumbnails .thumbnail-grid[data-arq-size="large"] { grid-template-columns: 1fr !important; }
}

/* Palco e filme da fotografia: medidas finais da versão de referência. */
.gallery-site.cpg-page-displayimage .archive-content {
  width: min(1280px, 94vw) !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar {
  position: relative !important;
  min-height: 58px !important;
  margin-bottom: 12px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  border: 1px solid #aaa7a5 !important;
  border-radius: 14px !important;
  background: #d0cecc !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar-left,
.gallery-site.cpg-page-displayimage .cpg-photo-bar-right {
  width: auto !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-bar-left { justify-self: start !important; }
.gallery-site.cpg-page-displayimage .cpg-photo-bar-right { justify-self: end !important; }

.gallery-site.cpg-page-displayimage .cpg-photo-pos {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #1b1b1b !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo {
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #aaa7a5 !important;
  border-radius: 14px !important;
  background: #d0cecc !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-stage,
.gallery-site.cpg-page-displayimage .cpg-photo-stage[style] {
  width: 100% !important;
  min-height: clamp(520px, 66vh, 760px) !important;
  height: clamp(520px, 66vh, 760px) !important;
  padding: 22px 88px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #d0cecc !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-stage img.image,
.gallery-site.cpg-page-displayimage .cpg-photo-stage:not(.cpg-photo-stage--fullsize) img.image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 0 !important;
  transform: none !important;
}

.gallery-site.cpg-page-displayimage .cpg-filmstrip {
  position: relative !important;
  min-height: 116px !important;
  height: 116px !important;
  margin-top: 12px !important;
  padding: 12px 198px 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 1px solid #aaa7a5 !important;
  border-radius: 14px !important;
  background: #d0cecc !important;
}

.gallery-site.cpg-page-displayimage .cpg-filmstrip > table {
  width: auto !important;
  height: 88px !important;
  max-width: calc(100% - 210px) !important;
  margin: 0 auto !important;
  table-layout: auto !important;
}

.gallery-site.cpg-page-displayimage .cpg-filmstrip .tape,
.gallery-site.cpg-page-displayimage .cpg-filmstrip .tape[style] {
  width: auto !important;
  height: 88px !important;
  margin: 0 auto !important;
  border-spacing: 8px 0 !important;
  table-layout: auto !important;
}

.gallery-site.cpg-page-displayimage .cpg-filmstrip .tape td.thumb,
.gallery-site.cpg-page-displayimage .cpg-filmstrip .thumbLink,
.gallery-site.cpg-page-displayimage .cpg-filmstrip a.thumbLink {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.gallery-site.cpg-page-displayimage .cpg-filmstrip img.strip_image,
.gallery-site.cpg-page-displayimage .cpg-filmstrip img.strip_image.middlethumb {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;
  margin: 0 !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

.gallery-site.cpg-page-displayimage .cpg-photo-meta {
  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  width: 164px !important;
  min-height: 62px !important;
  transform: translateY(-50%) !important;
  border-left: 1px solid #aaa7a5 !important;
}

@media (max-width: 800px) {
  .gallery-site.cpg-page-displayimage .cpg-photo-stage,
  .gallery-site.cpg-page-displayimage .cpg-photo-stage[style] {
    min-height: 58vh !important;
    height: 58vh !important;
    padding: 14px 50px !important;
  }
  .gallery-site.cpg-page-displayimage .cpg-filmstrip {
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 8px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .gallery-site.cpg-page-displayimage .cpg-filmstrip > table { max-width: 100% !important; }
  .gallery-site.cpg-page-displayimage .cpg-photo-meta {
    position: static !important;
    width: auto !important;
    min-height: 44px !important;
    padding: 8px 12px 0 !important;
    border-top: 1px solid #aaa7a5 !important;
    border-left: 0 !important;
    transform: none !important;
  }
}

/* Modal de tamanho original, mantido sobre a página e sem alterar permissões. */
html.arq-lightbox-open,
html.arq-lightbox-open body { overflow: hidden !important; }

.arq-photo-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  width: 100vw !important;
  height: 100vh !important;
  padding: 70px 82px 84px !important;
  display: block !important;
  overflow: hidden !important;
  background: rgba(27, 27, 27,.82) !important;
  backdrop-filter: blur(3px) sepia(12%) !important;
  -webkit-backdrop-filter: blur(3px) sepia(12%) !important;
}

.arq-photo-lightbox[hidden] { display: none !important; }
.arq-lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

.arq-lightbox-image {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
}

.arq-lightbox-image img {
  width: auto !important;
  height: auto !important;
  max-width: min(1040px, calc(100vw - 190px)) !important;
  max-height: calc(100vh - 130px) !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  box-shadow: 0 25px 75px rgba(27, 27, 27,.3) !important;
  pointer-events: auto !important;
}

.arq-lightbox-close,
.arq-lightbox-nav,
.arq-lightbox-save {
  position: fixed !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.arq-lightbox-close {
  top: 18px !important;
  right: 20px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 7px !important;
  font-size: 25px !important;
}

.arq-lightbox-nav {
  top: 50% !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  transform: translateY(-50%) !important;
  font-size: 20px !important;
}

.arq-lightbox-nav.is-prev { left: 22px !important; }
.arq-lightbox-nav.is-next { right: 22px !important; }
.arq-lightbox-save {
  left: 50% !important;
  bottom: 18px !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  transform: translateX(-50%) !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

@media (max-width: 700px) {
  .arq-photo-lightbox { padding: 64px 54px 82px !important; }
  .arq-lightbox-image img {
    max-width: calc(100vw - 108px) !important;
    max-height: calc(100vh - 150px) !important;
  }
  .arq-lightbox-nav { width: 40px !important; height: 40px !important; }
  .arq-lightbox-nav.is-prev { left: 7px !important; }
  .arq-lightbox-nav.is-next { right: 7px !important; }
  .arq-lightbox-save { width: calc(100vw - 32px) !important; }
}

/* Compact album toolbar: title, thumbnail scale and admin actions share one row. */
.cpg-page-thumbnails .photo-browser-title {
  min-height: 116px !important;
  margin-bottom: 24px !important;
  padding: 22px 26px !important;
  gap: 24px !important;
}

.cpg-page-thumbnails .photo-browser-title > div:first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.cpg-page-thumbnails .photo-browser-title p {
  margin: 0 0 7px !important;
}

.cpg-page-thumbnails .photo-browser-title h1 {
  margin: 0 !important;
}

.cpg-page-thumbnails .photo-browser-tools {
  padding: 5px !important;
  gap: 3px !important;
  border: 1px solid #aaa7a5 !important;
  border-radius: 12px !important;
  background: rgba(186, 183, 181,.72) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255,.32) !important;
}

.cpg-page-thumbnails .thumbnail-size-switch {
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
}

.cpg-page-thumbnails .thumbnail-size-switch button {
  min-width: 66px !important;
  height: 34px !important;
  padding: 0 11px !important;
  border-right-color: rgba(27, 27, 27,.18) !important;
  border-radius: 0 !important;
  transition: color .2s ease, background-color .2s ease !important;
}

.cpg-page-thumbnails .thumbnail-size-switch button:first-child {
  border-radius: 8px 0 0 8px !important;
}

.cpg-page-thumbnails .thumbnail-size-switch button:last-child {
  border-radius: 0 8px 8px 0 !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist {
  padding-left: 4px !important;
  border-left: 1px solid rgba(27, 27, 27,.2) !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist ul {
  gap: 2px !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist a {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .2s ease, background-color .2s ease, transform .2s ease !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist a:hover {
  background: #f7f6f4 !important;
  color: #1b1b1b !important;
  transform: translateY(-1px) !important;
}

.cpg-page-thumbnails .photo-browser-title .buttonlist img {
  width: 15px !important;
  height: 15px !important;
  opacity: .78 !important;
}

@media (max-width: 980px) {
  .cpg-page-thumbnails .photo-browser-title {
    min-height: 0 !important;
    padding: 20px !important;
  }

  .cpg-page-thumbnails .photo-browser-tools {
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 620px) {
  .cpg-page-thumbnails .photo-browser-title {
    gap: 16px !important;
  }

  .cpg-page-thumbnails .photo-browser-tools {
    width: 100% !important;
    align-items: center !important;
    flex-direction: row !important;
    overflow-x: auto !important;
  }

  .cpg-page-thumbnails .thumbnail-size-switch {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  .cpg-page-thumbnails .thumbnail-size-switch button {
    width: auto !important;
    min-width: 62px !important;
  }
}


/* =============================================================================
   As telas internas ficam por último de propósito: este arquivo é carregado
   depois do style.css, e as regras acima são `!important` — sem isso o desenho
   portado perderia para elas em posição, moldura e grade. Nada foi apagado; o
   que existia continua no arquivo, só deixa de valer onde as duas se cruzam.
   ========================================================================== */

/* O tom das superfícies destas telas: o mesmo dos cartões de categoria da
   capa. A --hailey-surface é mais clara e continua valendo no resto do tema —
   aqui as placas pediam um tom mais fechado para não boiar sobre o fundo. */
/* A borda acompanha: um tom só um pouco mais fechado que a superfície, o
   mesmo filete dos cartões da capa. */
:root {
  --arq-superficie: #d0cecc;
  --arq-borda: #aaa7a5;
}

/* =============================================================================
   PORTE DAS TELAS INTERNAS — mesmo desenho do demi_lovato_gallery

   Bloco a bloco igual ao do outro tema: página de álbum, visualizador,
   Small/Medium/Large, barra PAINEL, trilha de navegação, paginação, lightbox,
   Fotos mais vistas e a página de categoria.

   A diferença é só a cor: nenhuma delas está escrita à mão aqui. Tudo aponta
   para as variáveis da palette.css (--hailey-*), que é carregada depois deste
   arquivo — então mexer na paleta lá remexe estas telas junto, sem tocar aqui.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Cabeçalho do álbum
   -------------------------------------------------------------------------- */
.gallery-site .archive-content.archive-browser .photo-browser-title {
  position: relative !important;
  min-height: 0 !important;
  margin: 6px 0 30px !important;
  padding: 24px clamp(22px, 2.2vw, 32px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 26px !important;
  border: 1px solid var(--arq-borda) !important;
  border-bottom: 1px solid var(--arq-borda) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, var(--arq-superficie) 0%, var(--hailey-surface-soft) 100%) !important;
  box-shadow: 0 16px 38px rgba(27, 27, 27,.16) !important;
}
.gallery-site .archive-content.archive-browser .photo-browser-title::after { display: none !important; }
.gallery-site .archive-content.archive-browser .photo-browser-title > div:first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.gallery-site .archive-content.archive-browser .photo-browser-title > div:first-child > p {
  margin: 0 0 9px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--dlp-muted) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .2em !important;
}
.gallery-site .archive-content.archive-browser .photo-browser-title > div:first-child > p::before {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a47057' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.7a5.5 5.5 0 0 0-7.8 0L12 5.8l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.3l7.8-7.7 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.gallery-site .archive-content.archive-browser .photo-browser-title h1 {
  max-width: 780px !important;
  margin: 0 !important;
  color: var(--dlp-blue-dark) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.015em !important;
  -webkit-line-clamp: 2 !important;
}

/* Ferramentas: só o seletor de tamanho — os atalhos de admin saíram do cartão. */
.gallery-site .archive-content.archive-browser .photo-browser-tools {
  flex: 0 0 auto !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-size-switch {
  padding: 4px !important;
  display: inline-flex !important;
  gap: 2px !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 999px !important;
  background: var(--hailey-on-dark) !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-size-switch button {
  min-width: 70px !important;
  height: 32px !important;
  padding: 0 15px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--dlp-muted) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  transition: background .2s ease, color .2s ease !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-size-switch button:hover { color: var(--dlp-blue-dark) !important; }
.gallery-site .archive-content.archive-browser .thumbnail-size-switch button.active {
  background: var(--dlp-blue) !important;
  color: var(--hailey-on-dark) !important;
  box-shadow: 0 6px 15px rgba(27, 27, 27,.22) !important;
}

/* -----------------------------------------------------------------------------
   2. Cartões de miniatura — a mesma peça dos cartões de álbum da capa
   -------------------------------------------------------------------------- */
.gallery-site .archive-content.archive-browser .thumbnail-grid {
  max-width: 1150px !important;
  margin: 0 auto 14px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.1vw, 28px) !important;
  align-items: start !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-card {
  min-width: 0 !important;
  padding: 9px 9px 0 !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 22px !important;
  background: var(--arq-superficie) !important;
  box-shadow: 0 14px 34px rgba(27, 27, 27,.15) !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 44px rgba(27, 27, 27,.18) !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-image {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--arq-borda) !important;
  box-shadow: none !important;
  transform: none !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-card:hover .thumbnail-image {
  transform: none !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-image img,
.gallery-site .archive-content.archive-browser .thumbnail-image img.image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  border-radius: 15px !important;
  object-fit: cover !important;
  object-position: 50% 22% !important;
  filter: none !important;
  opacity: .88 !important;
  transform: none !important;
  transition: opacity .22s ease !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-card:hover .thumbnail-image img { opacity: 1 !important; }
.gallery-site .archive-content.archive-browser .thumbnail-image > span { display: none !important; }
.gallery-site .archive-content.archive-browser .thumbnail-meta-wrap {
  position: relative !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 25px 8px 13px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-meta {
  min-height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
/* O rótulo mostra a dimensão do arquivo original, não o nome. */
.gallery-site .archive-content.archive-browser .thumbnail-sequence {
  color: var(--dlp-blue-dark) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  font-variant-numeric: tabular-nums !important;
}
/* Selo de views: encaixado na borda de baixo da foto, recortado do cartão. */
.gallery-site .archive-content.archive-browser .thumbnail-views {
  position: absolute !important;
  z-index: 3 !important;
  left: 50% !important;
  top: 0 !important;
  min-height: 30px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 2px solid var(--arq-superficie) !important;
  border-radius: 999px !important;
  background: var(--dlp-blue) !important;
  box-shadow: 0 8px 18px rgba(27, 27, 27,.24) !important;
  transform: translate(-50%, -50%) !important;
  white-space: nowrap !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-views b,
.gallery-site .archive-content.archive-browser .thumbnail-views small,
.gallery-site .archive-content.archive-browser .thumbnail-views svg {
  color: var(--hailey-on-dark) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-views b { font-size: 10px !important; }
.gallery-site .archive-content.archive-browser .thumbnail-meta-icon { width: 13px !important; height: 13px !important; }
.gallery-site .archive-content.archive-browser .thumbnail-heart {
  position: static !important;
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 50% !important;
  background: var(--hailey-on-dark) !important;
  color: var(--dlp-muted) !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-heart:hover,
.gallery-site .archive-content.archive-browser .thumbnail-heart.is-saved {
  background: var(--dlp-blue) !important;
  border-color: var(--dlp-blue) !important;
  color: var(--hailey-on-dark) !important;
  transform: translateY(-1px) !important;
}
.gallery-site .archive-content.archive-browser .thumbnail-heart-icon { width: 16px !important; height: 16px !important; }

/* -----------------------------------------------------------------------------
   3. Visualizador de foto
   Três peças empilhadas: barra de comando, palco e tira de miniaturas.
   -------------------------------------------------------------------------- */

/* -- Barra de comando: voltar | posição | ferramentas ----------------------
   Em grade de três colunas para a posição ("FILE 4/21") ficar centrada mesmo
   quando o lado direito cresce — com o menu de administração encaixado ali, o
   centro absoluto batia em cima dos ícones. */
.gallery-site .archive-content.archive-browser .cpg-photo-bar {
  position: relative !important;
  min-height: 66px !important;
  margin: 0 0 16px !important;
  padding: 11px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 18px !important;
  background: var(--arq-superficie) !important;
  box-shadow: 0 14px 32px rgba(27, 27, 27,.13) !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-bar-left { justify-self: start !important; }
.gallery-site .archive-content.archive-browser .cpg-photo-bar-right {
  justify-self: end !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-pos {
  position: static !important;
  justify-self: center !important;
  color: var(--dlp-blue-dark) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  transform: none !important;
  white-space: nowrap !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-back {
  min-height: 40px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--dlp-blue) !important;
  border-radius: 999px !important;
  background: var(--dlp-blue) !important;
  color: var(--hailey-on-dark) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 18px rgba(27, 27, 27,.18) !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-back:hover {
  border-color: var(--dlp-blue-dark) !important;
  background: var(--dlp-blue-dark) !important;
  color: var(--hailey-on-dark) !important;
}
/* Informação, apresentação e o menu de edição: botões redondos iguais. */
.gallery-site .archive-content.archive-browser .cpg-photo-bar #pic_info_button a,
.gallery-site .archive-content.archive-browser .cpg-photo-bar #slideshow_button a,
.gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-admin-strip a {
  width: 40px !important;
  height: 40px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 50% !important;
  background: var(--hailey-on-dark) !important;
  color: var(--dlp-blue-dark) !important;
  font-size: 0 !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-bar #pic_info_button a:hover,
.gallery-site .archive-content.archive-browser .cpg-photo-bar #slideshow_button a:hover,
.gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-admin-strip a:hover {
  border-color: var(--dlp-blue) !important;
  background: var(--dlp-blue) !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-admin-strip,
.gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-admin-strip ul {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 8px !important;
  list-style: none !important;
  border: 0 !important;
  background: transparent !important;
}
/* Os dois ícones do core são <img> trocados por `content:` — a cor é fixa no
   dado, então aqui eles recebem a versão azul da paleta. */
.gallery-site .archive-content.archive-browser #pic_info_button img {
  content: url("data:image/svg+xml !important;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d3d33' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 11v5.4M12 7.9h.01'/%3E%3C/svg%3E") !important;
  width: 17px !important;
  height: 17px !important;
}
.gallery-site .archive-content.archive-browser #slideshow_button img {
  content: url("data:image/svg+xml !important;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d3d33' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.6' width='18' height='12.8' rx='1.6'/%3E%3Cpath d='m10.4 9 4.4 2.6-4.4 2.6Z'/%3E%3Cpath d='M8.4 20.6h7.2'/%3E%3C/svg%3E") !important;
  width: 17px !important;
  height: 17px !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-cmd {
  min-height: 40px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 999px !important;
  background: var(--hailey-on-dark) !important;
  color: var(--dlp-blue-dark) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-cmd:hover {
  border-color: var(--dlp-blue) !important;
  background: var(--dlp-blue) !important;
  color: var(--hailey-on-dark) !important;
}
/* Setas: um só grupo segmentado. */
.gallery-site .archive-content.archive-browser .cpg-photo-steps {
  display: inline-flex !important;
  overflow: hidden !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 999px !important;
  background: var(--hailey-on-dark) !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-steps a {
  width: 42px !important;
  height: 38px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--dlp-blue-dark) !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-steps a + a { border-left: 1px solid var(--arq-borda) !important; }
.gallery-site .archive-content.archive-browser .cpg-photo-steps a:hover {
  background: var(--dlp-blue) !important;
  color: var(--hailey-on-dark) !important;
}
.gallery-site .archive-content.archive-browser .cpg-nav-icon { width: 16px !important; height: 16px !important; }

/* -- Palco --------------------------------------------------------------- */
.gallery-site .archive-content.archive-browser .cpg-photo { position: relative !important; margin: 0 !important; }
.gallery-site .archive-subhero + .archive-browser .cpg-photo-stage,
.gallery-site .archive-content.archive-browser .cpg-photo-stage {
  position: relative !important;
  min-height: min(50vh, 520px) !important;
  padding: clamp(20px, 2.8vw, 36px) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 22px !important;
  background: linear-gradient(160deg, var(--arq-superficie) 0%, var(--hailey-surface-soft) 100%) !important;
  box-shadow: 0 20px 46px rgba(27, 27, 27,.14) !important;
}
/* A única marca d'água da página: um coração grande, quase apagado. */
.gallery-site .archive-content.archive-browser .cpg-photo-stage::after {
  content: "" !important;
  position: absolute !important;
  right: -34px !important;
  bottom: -44px !important;
  z-index: 0 !important;
  width: 190px !important;
  height: 190px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a47057'%3E%3Cpath d='M12 21.3 3.6 13a5.6 5.6 0 0 1 7.9-7.9L12 5.7l.5-.6a5.6 5.6 0 0 1 7.9 7.9Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  opacity: .04 !important;
  pointer-events: none !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-stage > * { position: relative !important; z-index: 1 !important; }
.gallery-site .archive-content.archive-browser .cpg-photo-stage img {
  max-width: 100% !important;
  max-height: min(66vh, 720px) !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 40px rgba(27, 27, 27,.16) !important;
}
.gallery-site .archive-content.archive-browser .cpg-stage-nav {
  position: absolute !important;
  z-index: 4 !important;
  top: 50% !important;
  width: 52px !important;
  height: 52px !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 50% !important;
  background: var(--hailey-on-dark) !important;
  color: var(--dlp-blue-dark) !important;
  box-shadow: 0 12px 26px rgba(27, 27, 27,.16) !important;
  transform: translateY(-50%) !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.gallery-site .archive-content.archive-browser .cpg-stage-prev { left: 26px !important; }
.gallery-site .archive-content.archive-browser .cpg-stage-next { right: 26px !important; }
.gallery-site .archive-content.archive-browser .cpg-stage-nav:hover {
  border-color: var(--dlp-blue) !important;
  background: var(--dlp-blue) !important;
  color: var(--hailey-on-dark) !important;
  transform: translateY(-50%) scale(1.05) !important;
}
.gallery-site .archive-content.archive-browser .cpg-stage-nav .cpg-nav-icon { width: 20px !important; height: 20px !important; }

/* -- Tira de miniaturas --------------------------------------------------- */
.gallery-site .archive-content.archive-browser .cpg-filmstrip {
  position: relative !important;
  margin-top: 16px !important;
  padding: 16px 200px 16px 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--arq-borda) !important;
  border-top: 1px solid var(--arq-borda) !important;
  border-radius: 18px !important;
  background: var(--arq-superficie) !important;
  box-shadow: 0 14px 32px rgba(27, 27, 27,.11) !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip > table { width: 100% !important; }
.gallery-site .archive-content.archive-browser .cpg-filmstrip > table td:nth-child(2) { width: 100% !important; }
.gallery-site .archive-content.archive-browser .cpg-filmstrip #film { margin: 0 auto !important; }
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink {
  padding: 3px !important;
  display: block !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: var(--arq-borda) !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip img {
  border: 0 !important;
  border-radius: 9px !important;
  filter: none !important;
  opacity: .5 !important;
  transform: none !important;
  transition: opacity .2s ease !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip a:hover img,
.gallery-site .archive-content.archive-browser .cpg-filmstrip img.middlethumb { opacity: 1 !important; }
.gallery-site .archive-content.archive-browser .cpg-filmstrip td.thumb:has(img.middlethumb) .thumbLink {
  border-color: var(--dlp-blue) !important;
  box-shadow: 0 0 0 2px var(--dlp-blue) !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .prev_strip a,
.gallery-site .archive-content.archive-browser .cpg-filmstrip .next_strip a {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 50% !important;
  background: var(--hailey-on-dark) !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .prev_strip a:hover,
.gallery-site .archive-content.archive-browser .cpg-filmstrip .next_strip a:hover {
  border-color: var(--dlp-blue) !important;
  background: var(--dlp-blue) !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-meta {
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  min-width: 150px !important;
  padding-left: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  border-left: 1px solid var(--arq-borda) !important;
  transform: translateY(-50%) !important;
}
.gallery-site .archive-content.archive-browser .cpg-current-views {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--dlp-blue-dark) !important;
}
.gallery-site .archive-content.archive-browser .cpg-current-views b,
.gallery-site .archive-content.archive-browser .cpg-current-views small,
.gallery-site .archive-content.archive-browser .cpg-current-views svg { color: var(--dlp-blue-dark) !important; }
.gallery-site .archive-content.archive-browser .cpg-current-views b { font-size: 13px !important; font-weight: 900 !important; }
.gallery-site .archive-content.archive-browser .cpg-current-views small {
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}
.gallery-site .archive-content.archive-browser .cpg-current-meta-icon { width: 17px !important; height: 17px !important; }
.gallery-site .archive-content.archive-browser .cpg-current-heart {
  position: static !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 50% !important;
  background: var(--hailey-on-dark) !important;
  color: var(--dlp-muted) !important;
}
.gallery-site .archive-content.archive-browser .cpg-current-heart:hover,
.gallery-site .archive-content.archive-browser .cpg-current-heart.is-saved {
  border-color: var(--dlp-blue) !important;
  background: var(--dlp-blue) !important;
  color: var(--hailey-on-dark) !important;
}
.gallery-site .archive-content.archive-browser .cpg-current-heart .thumbnail-heart-icon { width: 17px !important; height: 17px !important; }
.gallery-site .archive-content.archive-browser .maintable:has(#voting_title) { display: none !important; }

/* -- Telas estreitas ------------------------------------------------------- */
@media (max-width: 1000px) {
  .gallery-site .archive-content.archive-browser .thumbnail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}
@media (max-width: 900px) {
  .gallery-site .archive-content.archive-browser .photo-browser-title {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  .gallery-site .archive-content.archive-browser .photo-browser-tools {
    align-self: stretch !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .gallery-site .archive-content.archive-browser .cpg-photo-bar {
    grid-template-columns: 1fr auto !important;
    row-gap: 10px !important;
  }
  .gallery-site .archive-content.archive-browser .cpg-photo-pos {
    grid-row: 2 !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
  .gallery-site .archive-content.archive-browser .cpg-photo-bar-right { flex-wrap: wrap !important; justify-content: flex-end !important; }
  .gallery-site .archive-content.archive-browser .cpg-filmstrip { padding: 16px 16px 78px !important; }
  .gallery-site .archive-content.archive-browser .cpg-photo-meta {
    left: 16px !important;
    right: 16px !important;
    top: auto !important;
    bottom: 16px !important;
    min-width: 0 !important;
    padding: 13px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--arq-borda) !important;
    transform: none !important;
  }
  .gallery-site .archive-content.archive-browser .cpg-stage-nav { width: 44px !important; height: 44px !important; }
  .gallery-site .archive-content.archive-browser .cpg-stage-prev { left: 12px !important; }
  .gallery-site .archive-content.archive-browser .cpg-stage-next { right: 12px !important; }
}
@media (max-width: 620px) {
  .gallery-site .archive-content.archive-browser .thumbnail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .gallery-site .archive-content.archive-browser .thumbnail-size-switch button { min-width: 58px !important; padding: 0 10px !important; }
  .gallery-site .archive-content.archive-browser .cpg-photo-bar { align-items: flex-start !important; }
  .gallery-site .archive-content.archive-browser .cpg-photo-bar-right { width: 100% !important; justify-content: flex-end !important; }
}

/* -----------------------------------------------------------------------------
   4. As tabelas do core que embrulham estes blocos
   starttable() devolve uma <div class="maintable"> com fundo próprio. Em volta
   do cabeçalho, da barra e do palco ela virava uma segunda placa, um tom mais
   clara, aparecendo por baixo dos cartões.
   -------------------------------------------------------------------------- */
.gallery-site .archive-content.archive-browser .maintable:has(.public-index-page),
.gallery-site .archive-content.archive-browser .maintable:has(.photo-browser-title),
.gallery-site .archive-content.archive-browser .maintable:has(.archive-breadcrumb),
.gallery-site .archive-content.archive-browser .maintable:has(.thumbnail-grid),
.gallery-site .archive-content.archive-browser .maintable:has(.browser-album-grid),
.gallery-site .archive-content.archive-browser .maintable:has(.cpg-photo-bar),
.gallery-site .archive-content.archive-browser .maintable:has(.cpg-photo),
.gallery-site .archive-content.archive-browser .maintable:has(.cpg-filmstrip) {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* -----------------------------------------------------------------------------
   5. Small / Medium / Large
   O seletor já existia no cabeçalho e no JavaScript (que escreve `data-arq-size`
   na grade), mas nenhuma regra respondia a esse atributo — os três botões não
   mudavam nada. São estas.

   A escala é 6 / 5 / 4 por fileira, padrão a de seis. Como o cartão encolhe
   bastante nesse passo, a moldura, o selo e o coração encolhem junto.
   -------------------------------------------------------------------------- */
@media (min-width: 1001px) {
  .gallery-site .archive-content.archive-browser .thumbnail-grid[data-arq-size="small"] {
    max-width: 100% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  .gallery-site .archive-content.archive-browser .thumbnail-grid[data-arq-size="medium"] {
    max-width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 17px !important;
  }
  .gallery-site .archive-content.archive-browser .thumbnail-grid[data-arq-size="large"] {
    max-width: 1220px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  /* Seis por fileira: acabamento proporcional ao cartão menor. */
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-card {
    padding: 6px 6px 0 !important;
    border-radius: 15px !important;
  }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-image,
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-image img { border-radius: 10px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-meta-wrap { padding: 19px 5px 9px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-meta { min-height: 26px !important; gap: 6px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-views { min-height: 23px !important; padding: 0 8px !important; gap: 4px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-views b { font-size: 9px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-views small { font-size: 7px !important; letter-spacing: .08em !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-meta-icon { width: 11px !important; height: 11px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-sequence { font-size: 8px !important; letter-spacing: .1em !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-heart { width: 26px !important; height: 26px !important; flex-basis: 26px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="small"] .thumbnail-heart-icon { width: 13px !important; height: 13px !important; }

  /* Cinco por fileira. */
  .gallery-site .archive-content.archive-browser [data-arq-size="medium"] .thumbnail-card {
    padding: 7px 7px 0 !important;
    border-radius: 16px !important;
  }
  .gallery-site .archive-content.archive-browser [data-arq-size="medium"] .thumbnail-image,
  .gallery-site .archive-content.archive-browser [data-arq-size="medium"] .thumbnail-image img { border-radius: 11px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="medium"] .thumbnail-meta-wrap { padding: 20px 6px 10px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="medium"] .thumbnail-views { min-height: 25px !important; padding: 0 10px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="medium"] .thumbnail-sequence { font-size: 8.5px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="medium"] .thumbnail-heart { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }

  /* Quatro por fileira — o passo mais aberto da escala. */
  .gallery-site .archive-content.archive-browser [data-arq-size="large"] .thumbnail-card {
    padding: 8px 8px 0 !important;
    border-radius: 18px !important;
  }
  .gallery-site .archive-content.archive-browser [data-arq-size="large"] .thumbnail-image,
  .gallery-site .archive-content.archive-browser [data-arq-size="large"] .thumbnail-image img { border-radius: 13px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="large"] .thumbnail-meta-wrap { padding: 22px 7px 12px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="large"] .thumbnail-views { min-height: 27px !important; padding: 0 12px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="large"] .thumbnail-sequence { font-size: 9px !important; }
  .gallery-site .archive-content.archive-browser [data-arq-size="large"] .thumbnail-heart { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
}

/* -----------------------------------------------------------------------------
   6. A barra PAINEL, idêntica à da capa
   O bloco "Correções isoladas" pinta de azul-escuro todo texto e toda borda
   dentro de `.archive-subhero + .archive-browser`, com `!important`. A barra de
   administração mora ali dentro, e por tabela os botões ganhavam borda rosa e
   texto azul — na capa eles são texto claro sem borda.
   -------------------------------------------------------------------------- */
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav {
  border-color: rgba(27, 27, 27,.28) !important;
  background: var(--hailey-detail) !important;
  color: var(--arq-superficie) !important;
}
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav::before {
  border-right-color: rgba(255, 255, 255,.34) !important;
  background: var(--hailey-detail) !important;
  color: var(--arq-superficie) !important;
}
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--arq-superficie) !important;
}
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item:hover,
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item.active {
  border-color: rgba(255, 255, 255,.28) !important;
  background: var(--hailey-title) !important;
  color: var(--hailey-on-dark) !important;
}
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item .admin-icon,
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item .admin-icon .arq-ico {
  color: var(--hailey-surface-soft) !important;
}

/* -----------------------------------------------------------------------------
   7. Trilha de navegação
   O core entrega os links soltos, separados por nós de texto " > " — que o
   `gap` do flex empurrava para longe e o `text-transform` engordava. Zerando a
   fonte do contêiner esses nós somem sem tocar no HTML do Coppermine, e cada
   link a partir do segundo desenha o próprio separador.
   -------------------------------------------------------------------------- */
.gallery-site .archive-content.archive-browser .archive-breadcrumb {
  margin: 0 0 14px !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}
.gallery-site .archive-content.archive-browser .archive-breadcrumb a,
.gallery-site .archive-content.archive-browser .archive-breadcrumb strong {
  color: var(--hailey-text) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}
.gallery-site .archive-content.archive-browser .archive-breadcrumb a:hover {
  color: var(--hailey-title) !important;
  text-decoration: none !important;
}
/* O último elo é a página em que se está: sem cor de link. */
.gallery-site .archive-content.archive-browser .archive-breadcrumb a:last-of-type,
.gallery-site .archive-content.archive-browser .archive-breadcrumb strong {
  color: var(--hailey-title) !important;
  font-weight: 900 !important;
}
.gallery-site .archive-content.archive-browser .archive-breadcrumb a + a::before,
.gallery-site .archive-content.archive-browser .archive-breadcrumb a + strong::before {
  content: "\00BB" !important;
  margin: 0 11px !important;
  display: inline-block !important;
  color: var(--hailey-text) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  vertical-align: -1px !important;
}

/* -----------------------------------------------------------------------------
   8. Paginação
   O quadradinho da página atual vinha preto do design system antigo.
   -------------------------------------------------------------------------- */
.gallery-site .archive-content.archive-browser .archive-pagination {
  align-items: center !important;
  gap: 6px !important;
}
.gallery-site .archive-content.archive-browser .archive-pagination :where(a, b) {
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 8px !important;
  background: var(--hailey-on-dark) !important;
  color: var(--hailey-title) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}
.gallery-site .archive-content.archive-browser .archive-pagination a:hover,
.gallery-site .archive-content.archive-browser .archive-pagination b.active {
  border-color: var(--hailey-detail) !important;
  background: var(--hailey-detail) !important;
  color: var(--arq-superficie) !important;
}
.gallery-site .archive-content.archive-browser .archive-pagination b.disabled {
  border-style: dashed !important;
  background: transparent !important;
  color: var(--hailey-text) !important;
}
.gallery-site .archive-content.archive-browser .archive-pagination .cpg-tabs-count {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--hailey-text) !important;
  font-weight: 700 !important;
}

/* -----------------------------------------------------------------------------
   9. Visualizador em tela cheia (lightbox)

   O JavaScript já montava o modal — fundo, fechar, setas, imagem e o botão de
   salvar — mas não havia uma linha de CSS para ele: o bloco nascia no fim do
   <body>, sem posição, e a foto aparecia empilhada abaixo do rodapé.

   `[hidden]` precisa de `!important` porque o `display: flex` abaixo venceria o
   `display: none` que o atributo carrega.
   -------------------------------------------------------------------------- */
html.arq-lightbox-open,
html.arq-lightbox-open body { overflow: hidden !important; }

.arq-photo-lightbox[hidden] { display: none !important; }
.arq-photo-lightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  padding: 72px 116px 104px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.arq-photo-lightbox .arq-lightbox-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(201, 199, 197,.94) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  cursor: zoom-out !important;
}
.arq-photo-lightbox .arq-lightbox-image {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  pointer-events: none !important;
}
/* O teto da foto sai da conta do próprio padding, não de uma percentagem: a
   altura de `.arq-lightbox-image` é automática, e `max-height: 100%` sobre uma
   altura automática não resolve — era por isso que a foto saía em tamanho real,
   estourando a tela. */
.arq-photo-lightbox .arq-lightbox-image img {
  max-width: min(100%, calc(100vw - 232px)) !important;
  max-height: calc(100vh - 176px) !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  border-radius: 6px !important;
  box-shadow: 0 26px 60px rgba(27, 27, 27,.22) !important;
  object-fit: contain !important;
}
/* Fechar, anterior e próxima: a mesma peça em três lugares. */
.arq-photo-lightbox .arq-lightbox-close,
.arq-photo-lightbox .arq-lightbox-nav {
  position: absolute !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid var(--arq-borda) !important;
  background: var(--arq-superficie) !important;
  color: var(--hailey-title) !important;
  line-height: 1 !important;
  box-shadow: 0 12px 28px rgba(27, 27, 27,.16) !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
}
.arq-photo-lightbox .arq-lightbox-close:hover,
.arq-photo-lightbox .arq-lightbox-nav:hover {
  background: var(--hailey-detail) !important;
  border-color: var(--hailey-detail) !important;
  color: var(--arq-superficie) !important;
}
.arq-photo-lightbox .arq-lightbox-close {
  top: clamp(16px, 2.2vh, 26px) !important;
  right: clamp(16px, 1.8vw, 26px) !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  font-size: 21px !important;
  font-weight: 400 !important;
}
.arq-photo-lightbox .arq-lightbox-nav {
  top: 50% !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  font-size: 20px !important;
  text-decoration: none !important;
  transform: translateY(-50%) !important;
}
.arq-photo-lightbox .arq-lightbox-nav:hover { transform: translateY(-50%) scale(1.04) !important; }
.arq-photo-lightbox .arq-lightbox-nav.is-prev { left: clamp(14px, 2vw, 28px) !important; }
.arq-photo-lightbox .arq-lightbox-nav.is-next { right: clamp(14px, 2vw, 28px) !important; }
.arq-photo-lightbox .arq-lightbox-save {
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  bottom: clamp(18px, 3vh, 32px) !important;
  min-height: 46px !important;
  padding: 0 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--hailey-title) !important;
  border-radius: 999px !important;
  background: var(--hailey-title) !important;
  color: var(--arq-superficie) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 14px 30px rgba(27, 27, 27,.28) !important;
  transform: translateX(-50%) !important;
  transition: background .2s ease, transform .2s ease !important;
}
.arq-photo-lightbox .arq-lightbox-save:hover {
  background: var(--hailey-title) !important;
  border-color: var(--hailey-title) !important;
  color: var(--arq-superficie) !important;
  transform: translateX(-50%) translateY(-2px) !important;
}
@media (max-width: 760px) {
  .arq-photo-lightbox { padding: 62px 14px 92px !important; }
  .arq-photo-lightbox .arq-lightbox-image img {
    max-width: min(100%, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 154px) !important;
  }
  .arq-photo-lightbox .arq-lightbox-nav {
    top: auto !important;
    bottom: 20px !important;
    width: 46px !important;
    height: 46px !important;
    transform: none !important;
  }
  .arq-photo-lightbox .arq-lightbox-nav:hover { transform: scale(1.04) !important; }
  .arq-photo-lightbox .arq-lightbox-nav.is-prev { left: 14px !important; }
  .arq-photo-lightbox .arq-lightbox-nav.is-next { right: 14px !important; }
  .arq-photo-lightbox .arq-lightbox-save { bottom: 24px !important; min-height: 40px !important; padding: 0 16px !important; font-size: 9px !important; }
}

/* =============================================================================
   10. FOTOS MAIS VISTAS

   A ordem inverteu: os controles sobem para uma linha própria no alto, fechada
   por um filete !important; embaixo dele o título, com o rótulo RANKING alinhado à direita
   na mesma base; e a linha de apoio por último. Feito com uma grade de áreas
   nomeadas — o HTML continua na ordem original, só o desenho mudou.

   Nada de moldura, sombra ou brilho branco por dentro: era isso que dava o ar
   de plástico. Sobra papel — uma cor só, um filete de cabelo e a luz quente
   atravessando devagar.
   ========================================================================== */

/* A seção herdava do design system um fundo chapado igual ao do corpo. Igual
   não é o mesmo: logo acima dela o degradê do topo ainda está descendo, e a
   chapa o cortava numa linha reta, com emenda também na direita. */
.gallery-site .archive-content.archive-browser .public-index-page {
  min-height: 0 !important;
  padding: 4px 0 40px !important;
  background: transparent !important;
}

.gallery-site .archive-content.archive-browser .public-index-heading {
  position: relative !important;
  isolation: isolate !important;
  min-height: 0 !important;
  margin: 10px 0 26px !important;
  padding: 26px clamp(24px, 2.6vw, 38px) 30px !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--arq-superficie) !important;
  box-shadow: none !important;
}
/* A luz que passa: quente, não branca, e larga o bastante para não virar um
   risco de espelho atravessando a faixa. z-index negativo dentro de um contexto
   de empilhamento pinta acima do fundo do cartão e abaixo do texto. */
.gallery-site .archive-content.archive-browser .public-index-heading::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: -60% -20% !important;
  background: linear-gradient(
    100deg,
    transparent 34%,
    rgba(255, 255, 255,.26) 44%,
    rgba(255, 255, 255,.52) 50%,
    rgba(255, 255, 255,.26) 56%,
    transparent 66%
  ) !important;
  transform: translateX(-130%) !important;
  animation: arq-reflexo 11s cubic-bezier(.4,0,.25,1) infinite !important;
  pointer-events: none !important;
}
@keyframes arq-reflexo {
  0%, 70% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-site .archive-content.archive-browser .public-index-heading::after { animation: none !important; opacity: .35 !important; }
}

/* A grade que reordena tudo sem tocar no HTML. */
.gallery-site .archive-content.archive-browser .public-index-copy {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "controles controles"
    "titulo    rotulo"
    "apoio     apoio" !important;
  align-items: end !important;
  column-gap: 24px !important;
}

/* 1. Linha de controles, no alto, sobre um filete. */
.gallery-site .archive-content.archive-browser .ranking-controls {
  grid-area: controles !important;
  margin: 0 0 22px !important;
  padding-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  border-bottom: 1px solid var(--arq-borda) !important;
}
.gallery-site .archive-content.archive-browser .ranking-period {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .ranking-period a {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 2px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--hailey-text) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
/* Separador entre os dois períodos: um ponto, não uma cápsula. */
.gallery-site .archive-content.archive-browser .ranking-period a + a::before {
  content: "" !important;
  width: 3px !important;
  height: 3px !important;
  margin: 0 14px !important;
  border-radius: 50% !important;
  background: rgba(27, 27, 27,.5) !important;
}
.gallery-site .archive-content.archive-browser .ranking-period a:hover { color: var(--hailey-title) !important; }
.gallery-site .archive-content.archive-browser .ranking-period a.active {
  color: var(--hailey-title) !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .ranking-period a.active::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -5px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--hailey-detail) !important;
}
.gallery-site .archive-content.archive-browser .public-index-back {
  min-height: 0 !important;
  height: auto !important;
  padding: 2px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--hailey-text) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.gallery-site .archive-content.archive-browser .public-index-back:hover { color: var(--hailey-title) !important; }

/* 2. O título e o rótulo à direita, na mesma base.
   A mesma letra dos outros títulos do site — a Inter que o tema já carrega —
   no peso médio, sem negrito, com o espacejamento fechado. */
.gallery-site .archive-content.archive-browser .public-index-heading h1 {
  grid-area: titulo !important;
  margin: 0 !important;
  color: var(--hailey-title) !important;
  font-family: var(--gallery-title-font, Inter), Arial, sans-serif !important;
  font-size: clamp(29px, 3.2vw, 42px) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -.03em !important;
}
.gallery-site .archive-content.archive-browser .public-index-heading p {
  grid-area: rotulo !important;
  margin: 0 0 5px !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--hailey-text) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .24em !important;
  white-space: nowrap !important;
}
.gallery-site .archive-content.archive-browser .public-index-heading p::before {
  content: "" !important;
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a47057' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.7a5.5 5.5 0 0 0-7.8 0L12 5.8l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.3l7.8-7.7 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
/* 3. A linha de apoio fecha o bloco. */
.gallery-site .archive-content.archive-browser .public-index-heading > .public-index-copy > span {
  grid-area: apoio !important;
  max-width: none !important;
  margin-top: 13px !important;
  display: block !important;
  color: var(--hailey-text) !important;
  font-size: 11.5px !important;
  font-style: italic !important;
  line-height: 1.5 !important;
}

/* -- A lista -------------------------------------------------------------- */
.gallery-site .archive-content.archive-browser .ranking-list {
  overflow: hidden !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 20px !important;
  background: var(--arq-superficie) !important;
  box-shadow: 0 14px 34px rgba(27, 27, 27,.14) !important;
}
.gallery-site .archive-content.archive-browser .ranking-list > a {
  min-height: 96px !important;
  padding: 13px 22px !important;
  grid-template-columns: 46px 68px minmax(0,1fr) auto 22px !important;
  gap: 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--arq-borda) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background .2s ease !important;
}
.gallery-site .archive-content.archive-browser .ranking-list > a:last-child { border-bottom: 0 !important; }
.gallery-site .archive-content.archive-browser .ranking-list > a:hover { background: rgba(255, 255, 255,.4) !important; }

/* A miniatura como fotografia com moldura: papel rosa-claro em volta, foto
   arredondada dentro e o enquadramento puxado para cima, onde estão os rostos. */
.gallery-site .archive-content.archive-browser .ranking-thumb {
  width: 68px !important;
  height: 86px !important;
  padding: 5px !important;
  display: block !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 15px !important;
  background: var(--arq-superficie) !important;
  box-shadow: 0 8px 18px rgba(27, 27, 27,.13) !important;
  transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .26s ease !important;
}
.gallery-site .archive-content.archive-browser .ranking-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  object-position: 50% 18% !important;
  filter: none !important;
  opacity: .94 !important;
  transition: opacity .2s ease !important;
}
.gallery-site .archive-content.archive-browser .ranking-list > a:hover .ranking-thumb {
  transform: translateY(-3px) rotate(-2deg) !important;
  box-shadow: 0 14px 26px rgba(27, 27, 27,.2) !important;
}
.gallery-site .archive-content.archive-browser .ranking-list > a:hover .ranking-thumb img { opacity: 1 !important; }
.gallery-site .archive-content.archive-browser .ranking-position {
  color: var(--hailey-text) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
  font-variant-numeric: tabular-nums !important;
}
.gallery-site .archive-content.archive-browser .ranking-list span b {
  margin-bottom: 5px !important;
  color: var(--hailey-title) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}
.gallery-site .archive-content.archive-browser .ranking-list span small {
  color: var(--hailey-text) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.gallery-site .archive-content.archive-browser .ranking-list em {
  padding: 6px 11px !important;
  border-radius: 999px !important;
  background: var(--hailey-detail) !important;
  color: var(--hailey-on-dark) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  box-shadow: 0 6px 14px rgba(27, 27, 27,.2) !important;
}
.gallery-site .archive-content.archive-browser .ranking-arrow {
  width: 17px !important;
  height: 17px !important;
  color: var(--hailey-text) !important;
  transition: color .2s ease, transform .2s ease !important;
}
.gallery-site .archive-content.archive-browser .ranking-list > a:hover .ranking-arrow {
  color: var(--hailey-detail) !important;
  transform: translateX(3px) !important;
}
/* O primeiro colocado: um degradê discreto, não um bloco de cor. */
.gallery-site .archive-content.archive-browser .ranking-winner {
  min-height: 108px !important;
  background: linear-gradient(90deg, rgba(27, 27, 27,.34), rgba(27, 27, 27,0) 62%) !important;
}
.gallery-site .archive-content.archive-browser .ranking-winner:hover {
  background: linear-gradient(90deg, rgba(27, 27, 27,.46), rgba(255, 255, 255,.35) 62%) !important;
}
.gallery-site .archive-content.archive-browser .ranking-winner .ranking-position {
  color: var(--hailey-detail) !important;
  font-size: 25px !important;
}
/* A primeira já nasce inclinada, ligando a linha ao topo da página. */
.gallery-site .archive-content.archive-browser .ranking-winner .ranking-thumb {
  width: 76px !important;
  height: 96px !important;
  border-color: var(--arq-borda) !important;
  box-shadow: 0 12px 24px rgba(27, 27, 27,.18) !important;
  transform: rotate(-2.5deg) !important;
}
.gallery-site .archive-content.archive-browser .ranking-winner:hover .ranking-thumb { transform: translateY(-3px) rotate(-4.5deg) !important; }
.gallery-site .archive-content.archive-browser .ranking-winner .ranking-thumb img { opacity: 1 !important; }

@media (max-width: 860px) {
  .gallery-site .archive-content.archive-browser .public-index-heading { padding: 22px 20px 24px !important; }
  .gallery-site .archive-content.archive-browser .public-index-copy {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "controles" "rotulo" "titulo" "apoio" !important;
  }
  .gallery-site .archive-content.archive-browser .public-index-heading p {
    justify-self: start !important;
    margin-bottom: 10px !important;
  }
  .gallery-site .archive-content.archive-browser .ranking-list > a {
    grid-template-columns: 34px 58px minmax(0,1fr) 18px !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .gallery-site .archive-content.archive-browser .ranking-thumb,
  .gallery-site .archive-content.archive-browser .ranking-winner .ranking-thumb { width: 58px !important; height: 74px !important; }
  .gallery-site .archive-content.archive-browser .ranking-list em { display: none !important; }
}

/* =============================================================================
   11. CATEGORIA — a página do "escolha o ano"

   Duas coisas estavam quebradas aqui. O bloco `.category-direct-years`, que o
   PHP monta quando a categoria só tem anos dentro, nunca teve uma linha de CSS:
   o rótulo e a ajuda saíam colados um no outro ("CHOOSE A YEARSelect a
   year…"), porque são um <span> e um <small> soltos, ambos em linha. E os
   cartões de ano ainda vinham do design system antigo — cinza, 39px de altura,
   com hover preto.

   O cabeçalho passa a ser o mesmo cartão das outras telas internas.
   ========================================================================== */

.gallery-site .archive-content.archive-browser .archive-section {
  padding: 6px 0 32px !important;
  border-bottom: 0 !important;
}

/* -- Cabeçalho da seção --------------------------------------------------- */
.gallery-site .archive-content.archive-browser .category-section .archive-section-title {
  margin: 10px 0 24px !important;
  padding: 26px clamp(22px, 2.2vw, 32px) !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 26px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: var(--arq-superficie) !important;
}
.gallery-site .archive-content.archive-browser .category-section .archive-section-title > div > span {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--hailey-text) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
}
.gallery-site .archive-content.archive-browser .category-section .archive-section-title > div > span::before {
  content: "" !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a47057' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.7a5.5 5.5 0 0 0-7.8 0L12 5.8l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1.1L12 21.3l7.8-7.7 1.1-1.1a5.5 5.5 0 0 0-.1-7.8Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
.gallery-site .archive-content.archive-browser .category-section .archive-section-title h2 {
  margin: 9px 0 0 !important;
  color: var(--hailey-title) !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
}
.gallery-site .archive-content.archive-browser .category-section .archive-section-title > p {
  width: 245px !important;
  margin: 0 0 4px !important;
  color: var(--hailey-text) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}
/* Nesta página não existe lista de categorias embaixo — só os anos. Os títulos
   de coluna ficavam soltos no ar, sem tabela nenhuma para encabeçar. */
.gallery-site .archive-content.archive-browser .category-section:has(.category-direct-years) .archive-section-title > p {
  display: none !important;
}

/* -- O rótulo "escolha o ano" --------------------------------------------- */
.gallery-site .archive-content.archive-browser .category-direct-years > div:first-child,
.gallery-site .archive-content.archive-browser .category-years-panel > div:first-child {
  margin: 0 0 16px !important;
  padding: 0 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.gallery-site .archive-content.archive-browser .category-direct-years > div:first-child > span,
.gallery-site .archive-content.archive-browser .category-years-panel > div:first-child > span {
  color: var(--hailey-text) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}
.gallery-site .archive-content.archive-browser .category-direct-years > div:first-child > small,
.gallery-site .archive-content.archive-browser .category-years-panel > div:first-child > small {
  color: var(--hailey-text) !important;
  font-size: 11.5px !important;
  font-style: italic !important;
  line-height: 1.5 !important;
}

/* -- Os cartões de ano ----------------------------------------------------- */
.gallery-site .archive-content.archive-browser .category-year-buttons {
  max-width: 880px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)) !important;
  justify-content: start !important;
  gap: 13px !important;
}
.gallery-site .archive-content.archive-browser .category-year-buttons a {
  min-height: 92px !important;
  padding: 17px 19px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  grid-template-areas:
    "ano   seta"
    "conta seta" !important;
  align-items: center !important;
  gap: 3px 14px !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 18px !important;
  background: var(--arq-superficie) !important;
  box-shadow: 0 12px 26px rgba(27, 27, 27,.12) !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.gallery-site .archive-content.archive-browser .category-year-buttons a:hover {
  border-color: var(--hailey-detail) !important;
  background: var(--arq-superficie) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 34px rgba(27, 27, 27,.18) !important;
}
.gallery-site .archive-content.archive-browser .category-year-buttons strong {
  grid-area: ano !important;
  color: var(--hailey-title) !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}
.gallery-site .archive-content.archive-browser .category-year-buttons small {
  grid-area: conta !important;
  margin: 0 !important;
  color: var(--hailey-text) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
.gallery-site .archive-content.archive-browser .category-year-buttons span {
  grid-area: seta !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 50% !important;
  background: var(--hailey-on-dark) !important;
  color: var(--hailey-title) !important;
  font-size: 0 !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}
.gallery-site .archive-content.archive-browser .category-year-buttons a:hover span {
  border-color: var(--hailey-detail) !important;
  background: var(--hailey-detail) !important;
  color: var(--hailey-on-dark) !important;
  transform: translateX(2px) !important;
}
.gallery-site .archive-content.archive-browser .category-year-buttons .inline-action-icon { width: 15px !important; height: 15px !important; }

/* -- A linha de estatística fecha a seção ---------------------------------- */
.gallery-site .archive-content.archive-browser .archive-statline {
  margin: 26px 0 0 !important;
  color: var(--hailey-text) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}
.gallery-site .archive-content.archive-browser .archive-statline a { color: var(--hailey-title) !important; }

@media (max-width: 860px) {
  .gallery-site .archive-content.archive-browser .category-section .archive-section-title {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 22px 20px !important;
  }
  .gallery-site .archive-content.archive-browser .category-year-buttons {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  }
}

/* Só os anos dentro da lista: sem a linha que fecha a tabela de categorias. */
.gallery-site .archive-content.archive-browser .category-list:has(.category-direct-years) {
  border-top: 0 !important;
  padding-top: 0 !important;
}
/* "4 ALBUMS · 53 PHOTOS" quebrava em duas linhas dentro do cartão. */
.gallery-site .archive-content.archive-browser .category-year-buttons {
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)) !important;
}
.gallery-site .archive-content.archive-browser .category-year-buttons small {
  letter-spacing: .06em !important;
  white-space: nowrap !important;
}

/* Últimos acertos da barra da foto: o botão de e-card precisa da largura do
   próprio texto, e os dois ícones do core (informação e apresentação) são
   <img> trocados por `content` — a cor vai gravada no dado, então eles são
   redesenhados aqui no tom escuro da paleta. */
.gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-photo-cmd {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-bar #pic_info_button img {
  content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d3d33' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 11v5.4M12 7.9h.01'/%3E%3C/svg%3E") !important;
  width: 17px !important;
  height: 17px !important;
  filter: none !important;
  opacity: 1 !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-bar #slideshow_button img {
  content: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d3d33' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.6' width='18' height='12.8' rx='1.6'/%3E%3Cpath d='m10.4 9 4.4 2.6-4.4 2.6Z'/%3E%3Cpath d='M8.4 20.6h7.2'/%3E%3C/svg%3E") !important;
  width: 17px !important;
  height: 17px !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Uma caixa só no seletor de tamanho.
   A .photo-browser-tools ganhava moldura, fundo e brilho interno num bloco
   anterior, e o seletor ganha a pílula aqui — davam duas bordas concêntricas em
   volta da mesma coisa. A de fora sai: ela é só o contêiner que alinha. */
.gallery-site .archive-content.archive-browser .photo-browser-tools {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Uma caixa só na barra da foto, e a tira sem buracos.

   1. O grupo da direita também ganhava moldura e fundo próprios num bloco
      anterior — mais uma borda dentro da borda da barra. Os botões já têm
      contorno cada um; a caixa em volta sai.
   2. Quando o álbum tem menos fotos do que a tira comporta, o Coppermine
      preenche o resto com células vazias. Elas ficavam ocupando espaço no meio
      da fila e partiam as miniaturas em dois grupos. */
.gallery-site .archive-content.archive-browser .cpg-photo-bar-right {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip td.thumb:not(:has(a)) {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
}

/* O contador fica no meio da barra sem depender de posição absoluta: em flex
   ele é o item do meio e as margens automáticas o empurram para o centro do
   espaço que sobra entre o botão de voltar e as ferramentas. */
.gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-photo-pos {
  position: static !important;
  margin: 0 auto !important;
  transform: none !important;
  inset: auto !important;
}

/* =============================================================================
   O TOPO DAS PÁGINAS INTERNAS

   Estava com 120px de altura e a fotografia entrando por um lado só, terminando
   em corte seco — parecia defeito, não desenho. A capa não é tocada: tudo aqui
   está preso a `:not(.gallery-home)`.

   A faixa agora é uma tira baixa com a foto cobrindo a largura inteira,
   enquadrada um pouco acima do centro (a marca d'água "HAILEY BIEBER BRASIL"
   fica na parte de baixo da arte e repeti-la em toda página interna seria
   ruído — ela já está no logo do menu). Três dissoluções cuidam das emendas:
   uma escurece de leve o alto, atrás do menu flutuante, outra dissolve o pé na
   cor do corpo, e a terceira apaga as laterais para a tira não acabar em
   parede reta.
   ========================================================================== */
.gallery-site:not(.gallery-home) .archive-subhero {
  position: relative !important;
  height: clamp(148px, 16vw, 208px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 0 !important;
  background: var(--hailey-background) !important;
}
/* O desfoque que preenchia o fundo não tem mais o que preencher. */
.gallery-site:not(.gallery-home) .archive-subhero::before {
  display: none !important;
}
.gallery-site:not(.gallery-home) .archive-subhero-photo {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  /* A mesma arte da capa, centrada. */
  background-image: var(--arq-hero-image) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: saturate(.96) !important;
  opacity: 1 !important;
  animation: none !important;
  clip-path: none !important;
}
.gallery-site:not(.gallery-home) .archive-subhero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg,
      rgba(27, 27, 27,.34) 0%,
      rgba(27, 27, 27,0) 42%,
      rgba(201, 199, 197,.42) 74%,
      var(--hailey-background) 100%),
    linear-gradient(90deg,
      var(--hailey-background) 0%,
      rgba(201, 199, 197,0) 15% 85%,
      var(--hailey-background) 100%) !important;
}
@media (max-width: 760px) {
  .gallery-site:not(.gallery-home) .archive-subhero {
    height: 124px !important;
  }
}

/* =============================================================================
   BARRA E TIRA DA FOTO — os dois acertos finais
   ========================================================================== */

/* 1. O contador no meio de verdade.
   Em flex com space-between ele ficava onde sobrasse espaço. Volta a ser uma
   grade de três faixas: as laterais dividem o resto em partes iguais, então a
   do meio cai no centro da barra, não no centro do que sobrou. Para o lado
   direito caber sem empurrar nada, o botão de e-card perde o texto longo — a
   ação é a mesma, o rótulo é que encolhe. */
.gallery-site .archive-content.archive-browser .cpg-photo-bar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: initial !important;
  gap: 12px !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-bar-left { justify-self: start !important; }
.gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-photo-pos {
  justify-self: center !important;
  margin: 0 !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-bar-right {
  justify-self: end !important;
  flex-wrap: nowrap !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-photo-cmd {
  font-size: 0 !important;
  padding: 0 14px !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-photo-cmd::after {
  content: "E-CARD";
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

/* 2. A tira centrada e com moldura.
   Uma das células vinha com 380px em vez de 58: a tabela interna herdava
   largura total e distribuía a sobra numa célula só, abrindo aquele buraco no
   meio das miniaturas. `max-content` faz a tabela encolher até o conteúdo, e
   aí a margem automática centraliza o conjunto. */
.gallery-site .archive-content.archive-browser .cpg-filmstrip #film > table.tape,
.gallery-site .archive-content.archive-browser .cpg-filmstrip table.tape {
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 auto !important;
  table-layout: auto !important;
  border-spacing: 9px 0 !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip #film {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .tape td.thumb {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  padding: 0 !important;
  vertical-align: middle !important;
}
/* Cada miniatura ganha a mesma moldura das fotos do ranking. */
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink {
  width: 62px !important;
  height: 80px !important;
  padding: 3px !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 12px !important;
  background: var(--hailey-on-dark) !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  border-radius: 9px !important;
  object-fit: cover !important;
  opacity: .62 !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip a:hover img,
.gallery-site .archive-content.archive-browser .cpg-filmstrip img.middlethumb { opacity: 1 !important; }
.gallery-site .archive-content.archive-browser .cpg-filmstrip td.thumb:has(img.middlethumb) .thumbLink {
  border-color: var(--hailey-detail) !important;
  box-shadow: 0 0 0 2px var(--hailey-detail) !important;
}

/* =============================================================================
   A TIRA DE MINIATURAS — moldura e centro

   1. A moldura saía maior que a foto porque a largura declarada não incluía o
      preenchimento: 62px + 3px de cada lado davam 68px de caixa com 56px de
      área útil, e a imagem, pedida em 100%, sobrava para fora. Com
      `border-box` a conta fecha e a foto preenche a moldura inteira.
   2. A tira ficava à esquerda do centro porque o cartão reservava 200px na
      direita para o contador. O contador é absoluto, não precisa da reserva —
      sem ela a tira centraliza na mesma linha vertical da foto de cima.
   ========================================================================== */
.gallery-site .archive-content.archive-browser .cpg-filmstrip {
  padding: 16px !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip > table {
  width: calc(100% - 190px) !important;
  margin: 0 auto 0 0 !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .tape td.thumb {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink {
  box-sizing: border-box !important;
  width: 64px !important;
  height: 84px !important;
  padding: 3px !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid var(--arq-borda) !important;
  border-radius: 11px !important;
  background: var(--hailey-on-dark) !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink img {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  border: 0 !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  object-position: 50% 25% !important;
}
/* O contador continua ancorado à direita, agora por cima e não empurrando. */
.gallery-site .archive-content.archive-browser .cpg-photo-meta {
  right: 18px !important;
  padding-left: 20px !important;
}

/* A tira alinhada com a foto de cima.
   O contador ocupa uma faixa de 190px na direita, e a tabela da tira vive no
   espaço restante — o centro dela cai 95px à esquerda do centro do cartão. O
   deslocamento devolve exatamente esses 95px, então as miniaturas ficam na
   mesma linha vertical da fotografia. As setas continuam nas pontas da
   tabela, longe do contador. */
.gallery-site .archive-content.archive-browser .cpg-filmstrip #film {
  transform: translateX(95px) !important;
}

/* As setas junto das miniaturas, e a tira um pouco menor.
   Em vez de a tabela ocupar a largura toda (com as setas jogadas nas pontas do
   cartão), ela encolhe até o conteúdo e o conjunto inteiro — seta, miniaturas,
   seta — é centralizado de uma vez. Assim o deslocamento manual de antes deixa
   de ser necessário: o centro da tira é o centro do cartão, igual ao da foto. */
.gallery-site .archive-content.archive-browser .cpg-filmstrip > table {
  width: max-content !important;
  max-width: calc(100% - 200px) !important;
  margin: 0 auto !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip #film {
  transform: none !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .prev_strip,
.gallery-site .archive-content.archive-browser .cpg-filmstrip .next_strip {
  width: 44px !important;
  padding: 0 4px !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .prev_strip a,
.gallery-site .archive-content.archive-browser .cpg-filmstrip .next_strip a {
  width: 32px !important;
  height: 32px !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .tape {
  border-spacing: 7px 0 !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .tape td.thumb {
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink {
  width: 56px !important;
  height: 74px !important;
  border-radius: 10px !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink img {
  border-radius: 7px !important;
}

/* Uma borda só nas miniaturas da tira, em #d7d4d2.
   Antes havia duas linhas: o filete da moldura e o recorte da foto arredondada
   por dentro dela, separados pelo marfim do preenchimento. Some o marfim e some
   o preenchimento — a foto encosta na borda, que passa a ser a única. */
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink {
  padding: 0 !important;
  border: 1px solid #d7d4d2 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink img {
  border-radius: 8px !important;
}
/* A atual continua marcada, mas pela cor da própria borda — sem anel extra. */
.gallery-site .archive-content.archive-browser .cpg-filmstrip td.thumb:has(img.middlethumb) .thumbLink {
  border-color: var(--hailey-detail) !important;
  box-shadow: none !important;
}

/* Borda de 3px, e a foto encaixada nela.
   A faixa clara que aparecia entre a borda e a fotografia era desencontro de
   raios: a moldura arredondava num valor e a imagem noutro, e o vão entre as
   duas curvas mostrava o fundo. Agora quem recorta é só a moldura, pelo
   `overflow`; a imagem entra sem raio próprio e encosta nos quatro lados.
   Selecionada, muda a cor da mesma borda — nada é acrescentado em volta. */
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink {
  padding: 0 !important;
  overflow: hidden !important;
  border: 3px solid #d7d4d2 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip td.thumb:has(img.middlethumb) .thumbLink {
  border-color: var(--hailey-detail) !important;
  box-shadow: none !important;
}

/* A borda da direita sumia porque a miniatura era mais larga que a célula.
   Um bloco anterior fixa `min-width: 58px` na .thumbLink; a largura que eu pedi
   é 56px, e o mínimo vence — o elemento ficava 2px maior que a célula e esses
   2px, que são exatamente a borda direita, eram cortados. Aqui as três medidas
   (mínima, largura e máxima) passam a dizer a mesma coisa. */
.gallery-site .archive-content.archive-browser .cpg-filmstrip .thumbLink {
  box-sizing: border-box !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 74px !important;
  min-height: 74px !important;
  max-height: 74px !important;
}
.gallery-site .archive-content.archive-browser .cpg-filmstrip .tape td.thumb {
  overflow: visible !important;
}

/* O visualizador em tela cheia: foto no centro e fundo translúcido.

   A foto encostava no canto superior esquerdo por um desencontro entre dois
   blocos: um deles põe `display: block` no modal e centraliza pela grade do
   invólucro, o outro troca esse invólucro para `flex` — e um flex sem eixo
   definido empilha tudo no começo. Aqui o invólucro passa a centralizar nos
   dois eixos, não importa o que o modal seja. */
.arq-photo-lightbox .arq-lightbox-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
}
.arq-photo-lightbox .arq-lightbox-image img {
  margin: auto !important;
  object-fit: contain !important;
}
/* O fundo deixa a página aparecer por baixo. */
.arq-photo-lightbox {
  background: rgba(27, 27, 27,.55) !important;
  backdrop-filter: blur(6px) saturate(.9) !important;
  -webkit-backdrop-filter: blur(6px) saturate(.9) !important;
}
.arq-photo-lightbox .arq-lightbox-backdrop {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* A fotografia ocupando o palco, com 30px em cima e 30px embaixo.
   Para a imagem poder crescer até a altura disponível, o palco precisa ter
   altura definida — com `min-height` a porcentagem da imagem não tem contra o
   que resolver e ela fica no tamanho natural, que é o que a deixava pequena.
   Altura fixa no palco, 30px de respiro e a foto preenchendo o resto. */
.gallery-site .archive-content.archive-browser .cpg-photo-stage {
  height: clamp(430px, 64vh, 700px) !important;
  min-height: 0 !important;
  padding: 30px !important;
  place-items: center !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-stage a {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.gallery-site .archive-content.archive-browser .cpg-photo-stage img {
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* =============================================================================
   O TOPO DAS INTERNAS: menu sobre a imagem

   O menu ocupava uma faixa própria acima da fotografia — por isso a imagem
   começava depois dele. Tirando o cabeçalho do fluxo (absoluto, no topo da
   página), a faixa sobe e passa a nascer no alto: o menu flutua por cima da
   arte, como na capa. Só nas páginas internas.
   ========================================================================== */
.gallery-site:not(.gallery-home) { position: relative !important; }
.gallery-site:not(.gallery-home) .gallery-topbar.archive-mode {
  position: absolute !important;
  z-index: 30 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
/* Cem pixels a mais de altura, e a arte centrada na faixa. */
.gallery-site:not(.gallery-home) .archive-subhero {
  height: clamp(250px, 23vw, 310px) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.gallery-site:not(.gallery-home) .archive-subhero-photo {
  background-position: center center !important;
  background-size: cover !important;
}
/* Um escurecimento no alto para o menu ler bem sobre qualquer trecho da arte. */
.gallery-site:not(.gallery-home) .archive-subhero::after {
  background:
    linear-gradient(180deg,
      rgba(27, 27, 27,.42) 0%,
      rgba(27, 27, 27,.10) 26%,
      rgba(27, 27, 27,0) 46%,
      rgba(201, 199, 197,.45) 78%,
      var(--hailey-background) 100%),
    linear-gradient(90deg,
      var(--hailey-background) 0%,
      rgba(201, 199, 197,0) 15% 85%,
      var(--hailey-background) 100%) !important;
}
@media (max-width: 760px) {
  .gallery-site:not(.gallery-home) .archive-subhero { height: 190px !important; }
}

/* ================================================================
   TOPO DAS PÁGINAS INTERNAS — a arte ocupando a faixa inteira
   ================================================================
   A camada de baixo (style.css) desenha essa foto como uma coluna
   estreita centrada por conta própria:

       inset: 0 auto 0 50% !important;
       width: min(76vw, 1800px) !important;
       transform: translateX(-50%);

   O `inset: 0` que eu já aplicava aqui derrubava só o `left: 50%`.
   O `translateX(-50%)` continuava valendo e empurrava a arte meia
   largura para fora da tela — por isso o PNG aparecia colado na
   esquerda. Zerar a transform e mandar a camada ocupar 100% resolve
   sem trocar a imagem: continua sendo o mesmo PNG da home.

   A máscara horizontal também sai: o ::after desta faixa já faz o
   degradê nas laterais, e as duas juntas comiam as bordas da arte. */
.gallery-site:not(.gallery-home) .archive-subhero-photo {
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* ================================================================
   TOPO DAS PÁGINAS INTERNAS — o encontro com o fundo
   ================================================================
   A arte terminava numa linha reta, e a faixa parecia colada por
   cima da página. Agora a própria camada da foto vai perdendo
   opacidade nos últimos 40% da altura (máscara vertical), enquanto
   o véu por cima fecha na cor de fundo. Como os dois degradês têm
   a mesma curva, o olho não encontra onde uma coisa acaba e a
   outra começa. */
.gallery-site:not(.gallery-home) .archive-subhero-photo {
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, #000 46%,
    rgba(0, 0, 0, .92) 62%,
    rgba(0, 0, 0, .62) 78%,
    rgba(0, 0, 0, .26) 90%,
    rgba(0, 0, 0, 0) 100%) !important;
  mask-image: linear-gradient(180deg,
    #000 0%, #000 46%,
    rgba(0, 0, 0, .92) 62%,
    rgba(0, 0, 0, .62) 78%,
    rgba(0, 0, 0, .26) 90%,
    rgba(0, 0, 0, 0) 100%) !important;
}

.gallery-site:not(.gallery-home) .archive-subhero {
  background: var(--hailey-background) !important;
}

.gallery-site:not(.gallery-home) .archive-subhero::after {
  background:
    /* leitura do menu no alto */
    linear-gradient(180deg,
      rgba(27, 27, 27, .40) 0%,
      rgba(27, 27, 27, .10) 24%,
      rgba(27, 27, 27, 0) 44%,
      rgba(201, 199, 197, .30) 66%,
      rgba(201, 199, 197, .70) 82%,
      rgba(201, 199, 197, .94) 93%,
      var(--hailey-background) 100%),
    /* laterais dissolvendo no mesmo tom */
    linear-gradient(90deg,
      var(--hailey-background) 0%,
      rgba(201, 199, 197, .55) 6%,
      rgba(201, 199, 197, 0) 17% 83%,
      rgba(201, 199, 197, .55) 94%,
      var(--hailey-background) 100%) !important;
}

/* A faixa e o conteúdo abaixo dela são a mesma superfície: sem
   borda, sem sombra e sem espaço em branco entre as duas. */
.gallery-site:not(.gallery-home) .archive-subhero {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* ================================================================
   O DEGRADÊ FECHA EM #bdbab8
   ================================================================
   A faixa terminava em `--hailey-background` (#c9c7c5), meio tom
   acima do que a página realmente mostra logo abaixo — daí a linha
   reta aparecendo no encontro. Todo o fim do degradê, e a própria
   cor da faixa, passam a ser a cor do fundo: #bdbab8. */
.gallery-site:not(.gallery-home) .archive-subhero {
  background: #bdbab8 !important;
}

.gallery-site:not(.gallery-home) .archive-subhero::after {
  background:
    linear-gradient(180deg,
      rgba(27, 27, 27, .40) 0%,
      rgba(27, 27, 27, .10) 24%,
      rgba(27, 27, 27, 0) 44%,
      rgba(189, 186, 184, .30) 64%,
      rgba(189, 186, 184, .62) 78%,
      rgba(189, 186, 184, .88) 90%,
      rgba(189, 186, 184, .98) 97%,
      #bdbab8 100%),
    linear-gradient(90deg,
      #bdbab8 0%,
      rgba(189, 186, 184, .55) 6%,
      rgba(189, 186, 184, 0) 17% 83%,
      rgba(189, 186, 184, .55) 94%,
      #bdbab8 100%) !important;
}

/* ================================================================
   A ARTE UM POUCO MENOR DENTRO DA FAIXA
   ================================================================
   Com `cover` o PNG era esticado até a largura inteira da tela, e
   como a faixa é baixa sobrava só uma fatia bem ampliada dela. Aqui
   a imagem passa a ser desenhada a 80% da largura: o mesmo PNG,
   mais recuado, mostrando mais do enquadramento original.

   As laterais que sobram não ficam vazias — o degradê horizontal do
   ::after foi alargado até 24% para dissolver a arte no fundo bem
   antes de a imagem terminar. */
.gallery-site:not(.gallery-home) .archive-subhero-photo {
  background-color: #bdbab8 !important;
  background-size: 80% auto !important;
  background-position: center 44% !important;
  background-repeat: no-repeat !important;
}

.gallery-site:not(.gallery-home) .archive-subhero::after {
  background:
    linear-gradient(180deg,
      rgba(27, 27, 27, .40) 0%,
      rgba(27, 27, 27, .10) 24%,
      rgba(27, 27, 27, 0) 44%,
      rgba(189, 186, 184, .30) 64%,
      rgba(189, 186, 184, .62) 78%,
      rgba(189, 186, 184, .88) 90%,
      rgba(189, 186, 184, .98) 97%,
      #bdbab8 100%),
    linear-gradient(90deg,
      #bdbab8 0%,
      rgba(189, 186, 184, .78) 7%,
      rgba(189, 186, 184, .34) 15%,
      rgba(189, 186, 184, 0) 24% 76%,
      rgba(189, 186, 184, .34) 85%,
      rgba(189, 186, 184, .78) 93%,
      #bdbab8 100%) !important;
}

/* ================================================================
   PAINEL DE ADMINISTRAÇÃO — paleta neutra
   ================================================================
   O painel tinha ficado com o carmim #1b1b1b herdado da cópia do
   outro tema: uma cor saturada demais ao lado do rosé da galeria.
   Aqui a casca inteira passa para tons quentes e neutros da mesma
   família do site — barra lateral em taupe escuro, topo em areia
   clara — mantendo o carmim só onde ele ainda é útil como acento
   (a marca ativa do menu). */
.admin-shell {
  --adm-rail:      #92705f;  /* barra lateral */
  --adm-rail-deep: #7d5c4d;  /* item ativo */
  --adm-rail-ink:  #f6ece6;  /* texto sobre a barra */
  --adm-rail-mute: rgba(246, 236, 230, .62);
  --adm-top:       #dcc5b8;  /* faixa superior */
  --adm-ink:       #4f4c4b;  /* texto sobre claro */
  --adm-ink-soft:  #6f6c6b;
  --adm-card:      #ebe9e7;  /* cartões */
  --adm-line:      rgba(40, 38, 38, .16);
}

.admin-sidebar {
  background: var(--adm-rail) !important;
  color: var(--adm-rail-ink) !important;
  border-right: 1px solid rgba(40, 38, 38, .18) !important;
}

/* A marca não precisa mais da placa colorida atrás — o logo do site
   tem fundo transparente e lê bem direto sobre o taupe. */
.admin-sidebar .admin-brand,
.admin-sidebar .admin-brand .brand-mark {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.admin-sidebar .admin-brand .brand-mark img,
.admin-sidebar .admin-logo-image {
  width: auto !important;
  height: 30px !important;
  max-width: 132px !important;
  object-fit: contain !important;
}

/* Menu lateral: repouso apagado, ativo com uma placa um tom abaixo. */
.admin-sidebar .admin-nav-item,
.admin-sidebar nav a,
.admin-sidebar nav button {
  color: var(--adm-rail-mute) !important;
  background: transparent !important;
}
.admin-sidebar .admin-nav-item:hover,
.admin-sidebar nav a:hover,
.admin-sidebar nav button:hover {
  color: var(--adm-rail-ink) !important;
  background: rgba(255, 255, 255, .08) !important;
}
.admin-sidebar .admin-nav-item.active,
.admin-sidebar nav a.active,
.admin-sidebar nav button.active {
  background: var(--adm-rail-deep) !important;
  color: var(--adm-rail-ink) !important;
}
.admin-sidebar .admin-nav-item.active::before,
.admin-sidebar nav a.active::before,
.admin-sidebar nav button.active::before {
  background: #e7cfc2 !important;
}
.admin-sidebar .admin-icon,
.admin-sidebar .admin-icon .arq-ico,
.admin-sidebar .admin-icon svg {
  color: currentColor !important;
  stroke: currentColor !important;
}
/* Os rótulos de seção (CONTENT, PEOPLE, SYSTEM) eram quase brancos. */
.admin-sidebar :where(.admin-nav-group, .admin-nav-label, .admin-nav-wrap > span, .admin-nav-wrap > p, .admin-section-label) {
  color: rgba(246, 236, 230, .48) !important;
}

/* Faixa superior: areia clara, sem o bloco de cor forte. */
.admin-topbar {
  background: var(--adm-top) !important;
  color: var(--adm-ink) !important;
  border-bottom: 1px solid var(--adm-line) !important;
}
.admin-topbar .back-to-gallery,
.admin-topbar .logout-entry,
.admin-topbar a {
  color: var(--adm-ink) !important;
  border-color: var(--adm-line) !important;
  background: transparent !important;
}
.admin-topbar .back-to-gallery:hover,
.admin-topbar .logout-entry:hover,
.admin-topbar a:hover {
  color: #52362d !important;
}

/* Conteúdo: um fundo mais sereno que o rosé da galeria, cartões
   claros e tipografia num marrom neutro em vez do vermelho. */
.admin-shell,
.admin-main,
.admin-content {
  background-color: #d3bcb1 !important;
  color: var(--adm-ink) !important;
}
.admin-shell :where(h1, h2, h3, h4, h5, h6, .panel-title strong),
.admin-content :where(h1, h2, h3) {
  color: #3f3c3b !important;
}
.admin-content :where(.admin-eyebrow, .panel-eyebrow, .admin-title-row p, .admin-title-row small) {
  color: var(--adm-ink-soft) !important;
}

.admin-content .stat-card,
.admin-content :where(.cpg-panel, .cpg-panel-card, .admin-card, .admin-panel) {
  background: var(--adm-card) !important;
  border: 1px solid var(--adm-line) !important;
  color: var(--adm-ink) !important;
  box-shadow: none !important;
}
.admin-content .stat-card p {
  color: var(--adm-ink-soft) !important;
}
.admin-content .stat-card strong {
  color: #3f3c3b !important;
}
.admin-content .stat-card > i {
  border: 1px solid var(--adm-line) !important;
  color: var(--adm-ink-soft) !important;
}

.admin-content .cpg-panel-row {
  color: var(--adm-ink) !important;
  border-bottom-color: var(--adm-line) !important;
}
.admin-content .cpg-panel-row strong { color: #3f3c3b !important; }
.admin-content .cpg-panel-row small  { color: var(--adm-ink-soft) !important; }
.admin-content .cpg-panel-row:hover  { background: rgba(40, 38, 38, .05) !important; }

/* ================================================================
   PAINEL — a origem da cor forte
   ================================================================
   A casca do painel não pinta nada com valores literais: ela lê os
   tokens `--dlp-*`, e o seletor `.admin-shell .admin-sidebar` tem
   especificidade maior do que qualquer regra minha em `.admin-topbar`
   sozinho. Então o certo não é brigar com aquele bloco e sim trocar
   os tokens que ele consome — e só dentro do painel, para o resto do
   tema continuar com a paleta da galeria. */
.admin-shell {
  --dlp-body:         #d3bcb1;  /* fundo do conteúdo */
  --dlp-surface:      #ebe9e7;  /* cartões e campos */
  --dlp-pink:         #e7cfc2;  /* marca do item ativo */
  --dlp-blue:         #92705f;  /* barra lateral e faixa do topo */
  --dlp-blue-dark:    #4f4c4b;  /* texto escuro e item ativo */
  --dlp-muted:        #6f6c6b;
  --dlp-border:       rgba(40, 38, 38, .18);
  --dlp-image-border: rgba(40, 38, 38, .22);
}

/* O topo divide a cor da barra lateral, então o texto dele volta a
   ser claro — eu tinha escurecido quando a ideia era um topo areia. */
.admin-shell .admin-topbar {
  background: var(--dlp-blue) !important;
  color: #f6ece6 !important;
  border-bottom: 1px solid rgba(40, 38, 38, .22) !important;
}
.admin-shell .admin-topbar :where(a, .back-to-gallery, .logout-entry) {
  color: rgba(246, 236, 230, .82) !important;
  border-color: rgba(246, 236, 230, .35) !important;
  background: transparent !important;
}
.admin-shell .admin-topbar :where(a, .back-to-gallery, .logout-entry):hover {
  color: #fff6f0 !important;
}

/* A marca do painel usa o selo redondo: ele tem contraste próprio e
   não depende da cor da barra atrás. */
.admin-sidebar .admin-brand .brand-mark img,
.admin-sidebar .admin-logo-image {
  width: 38px !important;
  height: 38px !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: contain !important;
}

/* Os rótulos de seção da barra lateral estavam com 14px e a mesma
   força de cor dos links — gritavam mais do que o próprio menu.
   Agora são uma legenda: miúdos, espaçados e apagados. */
.admin-sidebar .admin-nav-section {
  display: block !important;
  margin: 18px 0 6px 10px !important;
  color: rgba(246, 236, 230, .45) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}
.admin-sidebar .admin-nav-section:first-child {
  margin-top: 4px !important;
}

/* O selo estava sendo cortado: `.brand-mark` é uma caixa de 36×36 com
   `overflow: hidden`, e a imagem tinha 38×38 — sobrava 1px de cada
   lado, que a caixa aparava. A caixa passa a acompanhar a imagem, e
   sem recorte nenhum. */
.admin-sidebar .admin-brand,
.admin-sidebar .admin-brand .brand-mark {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  overflow: visible !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
}
.admin-sidebar .admin-brand .brand-mark img,
.admin-sidebar .admin-logo-image {
  width: 42px !important;
  height: 42px !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 50% !important;
}

/* ================================================================
   PAINEL — o rosa de volta, só na tipografia
   ================================================================
   A casca neutra ficou serena demais: nada puxava o olho. O carmim
   da galeria volta como acento, e apenas em texto — as legendas
   miúdas, os números dos cartões, os títulos das linhas e o traço do
   item ativo. Nenhum bloco de cor, nenhum fundo. */
.admin-shell {
  --adm-rosa: #1b1b1b;
  --adm-rosa-claro: #d98a9b;
}

/* Legendas: "PANEL", "RECENTLY UPDATED", "PHOTOS", "ALBUMS"… */
.admin-content .admin-title-row p,
.admin-content .panel-title p,
.admin-content .stat-card p {
  color: var(--adm-rosa) !important;
  letter-spacing: .16em !important;
}

/* Os números do acervo — é o dado que a página existe para mostrar. */
.admin-content .stat-card strong {
  color: var(--adm-rosa) !important;
}
.admin-content .stat-card > i {
  color: var(--adm-rosa) !important;
  border-color: rgba(27, 27, 27, .28) !important;
}

/* Nome da galeria embaixo do título. */
.admin-content .admin-title-row span {
  color: var(--adm-rosa) !important;
}

/* Lista de álbuns: título em carmim, contagem discreta. */
.admin-content .cpg-panel-row strong {
  color: var(--adm-rosa) !important;
}
.admin-content .cpg-panel-row:hover strong {
  color: #8f2036 !important;
}

/* O traço do item ativo no menu lateral. */
.admin-sidebar .admin-nav-item.active::before,
.admin-sidebar nav a.active::before,
.admin-sidebar nav button.active::before {
  background: var(--adm-rosa-claro) !important;
  width: 3px !important;
}

/* Links dentro do conteúdo do painel. */
.admin-content a:not(.cpg-panel-row):not(.admin-nav-item) {
  color: var(--adm-rosa) !important;
}
.admin-content a:not(.cpg-panel-row):not(.admin-nav-item):hover {
  color: #8f2036 !important;
}

/* Quatro títulos de álbum inteiros em carmim viravam quatro frases
   vermelhas — mais bloco de cor do que acento. Eles voltam ao marrom
   e o carmim fica reservado para o passar do mouse; o destaque da
   lista continua sendo a legenda em cima dela. */
.admin-content .cpg-panel-row strong {
  color: #3f3c3b !important;
}
.admin-content .cpg-panel-row:hover strong {
  color: var(--adm-rosa) !important;
}

/* ================================================================
   BARRA PAINEL — a mesma cor da capa nas páginas internas
   ================================================================
   Eram duas cores diferentes por um engano meu: o bloco da capa
   pinta a barra com `--hailey-title` (#1b1b1b) e o bloco das páginas
   internas ficou com `--hailey-detail` (#1b1b1b), que é o carmim.
   O texto também divergia — `--arq-superficie` (#d0cecc) lá dentro,
   contra o marfim a 82% da capa.

   Daqui em diante as internas repetem exatamente os valores da capa:
   mesmo fundo, mesma borda, mesmo texto, mesmo estado ativo. */
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav,
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav::before,
.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav,
.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav::before {
  border-color: rgba(255, 255, 255, .16) !important;
  background: var(--hailey-title) !important;
  color: var(--hailey-on-dark) !important;
}
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav::before,
.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav::before {
  border-right-color: rgba(255, 255, 255, .16) !important;
}

.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item,
.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav-item {
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .82) !important;
}

.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item:hover,
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item.active,
.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav-item:hover,
.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav-item.active {
  border-color: rgba(255, 255, 255, .16) !important;
  background: var(--hailey-detail) !important;
  color: var(--hailey-on-dark) !important;
}

.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item .admin-icon,
.gallery-site .archive-content.archive-browser .admin-control-dock .admin-nav-item .admin-icon .arq-ico,
.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav-item .admin-icon,
.gallery-site:not(.gallery-home) .admin-control-dock .admin-nav-item .admin-icon .arq-ico {
  color: rgba(255, 255, 255, .82) !important;
}

/* ================================================================
   BOTÃO "VER MAIS"
   ================================================================
   Três ajustes:

   1. A sombra sai. Eram duas — `0 8px 24px` mais um brilho difuso —
      e num fundo claro elas deixavam o botão parecendo descolado da
      página.

   2. O brilho passa a ser outro. Antes era uma faixa branca estreita
      (34% de largura, .72 de opacidade) atravessando de ponta a
      ponta em .65s: um lampejo duro. Agora é uma faixa larga, quase
      transparente e desfocada, que cruza mais devagar e com uma
      curva de saída suave — luz passando, não flash.

   3. Borda de 4px num vermelho um pouco mais claro que o fundo do
      botão, a 30% de opacidade. Com `border-box` ela cresce para
      dentro, então o botão mantém a altura que já tinha. */
.gallery-site .archive-section-title > a,
.gallery-site .archive-section-title > button {
  box-sizing: border-box !important;
  min-height: 40px !important;
  border: 4px solid rgba(210, 90, 115, .3) !important;
  box-shadow: none !important;
  transition: background .3s ease, border-color .3s ease, transform .3s ease !important;
}

.gallery-site .archive-section-title > a:hover,
.gallery-site .archive-section-title > button:hover {
  border-color: rgba(226, 122, 144, .38) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.gallery-site .archive-section-title > a::before,
.gallery-site .archive-section-title > button::before {
  top: -60% !important;
  left: -70% !important;
  width: 62% !important;
  height: 220% !important;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .10) 32%,
    rgba(255, 255, 255, .20) 50%,
    rgba(255, 255, 255, .10) 68%,
    rgba(255, 255, 255, 0) 100%) !important;
  filter: blur(6px) !important;
  transform: skewX(-14deg) translateX(-160%) !important;
  transition: transform 1.15s cubic-bezier(.22, .61, .36, 1) !important;
}

.gallery-site .archive-section-title > a:hover::before,
.gallery-site .archive-section-title > button:hover::before {
  transform: skewX(-14deg) translateX(320%) !important;
}

/* ================================================================
   CELULAR — o topo da capa
   ================================================================
   Tudo aqui vive dentro do @media, então o desktop não é tocado.

   O que estava errado:

   • `.archive-intro` tinha 640px de altura e `padding-top: 92px`,
     mas a `.hero-photo` só cobria os 251px de cima. Os ~340px que
     sobravam viravam uma faixa lisa de fundo entre a arte e a barra
     de busca — o buraco no meio da tela.

   • O menu era uma pílula de 273px encostada na esquerda dentro de
     um cabeçalho de 480px, porque no desktop ele é dimensionado pelo
     conteúdo e ali o conteúdo é curto (hambúrguer + marca + idioma).

   • A barra de busca e as estatísticas ficavam num bloco vermelho
     chapado, empilhado em duas linhas soltas.

   O que passa a valer: a arte ocupa uma faixa 4:3 no alto — mais
   alta que antes e cobrindo de ponta a ponta, sem sobra —, o menu
   se abre na largura toda e a barra de busca vira uma peça só,
   logo abaixo da foto. */
@media (max-width: 760px) {

  /* -- 1. A arte cobrindo a faixa inteira ------------------------ */
  .gallery-site.gallery-home .archive-intro {
    /* 4:3 dá altura de sobra sem cortar a assinatura da arte, que
       ocupa a faixa central da imagem. */
    --arq-hero-alt: min(58vh, calc(100vw * 3 / 4));
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 18px !important;
  }

  .gallery-site.gallery-home .hero-photo {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: var(--arq-hero-alt) !important;
    background-size: cover !important;
    background-position: center 42% !important;
    background-repeat: no-repeat !important;
  }

  /* O degradê de fechamento acompanha a nova altura da arte. */
  .gallery-site.gallery-home .archive-intro::after {
    top: auto !important;
    bottom: auto !important;
    height: calc(var(--arq-hero-alt) * .42) !important;
    transform: translateY(calc(var(--arq-hero-alt) * .58)) !important;
  }
  .gallery-site.gallery-home .archive-intro::before {
    height: var(--arq-hero-alt) !important;
  }

  /* O conteúdo começa logo depois da foto, sem o vão de 260px. */
  .gallery-site.gallery-home .archive-intro-inner {
    padding: calc(var(--arq-hero-alt) + 16px) 0 0 !important;
    min-height: 0 !important;
  }

  /* -- 2. O menu na largura toda -------------------------------- */
  .gallery-site .gallery-topbar {
    top: 12px !important;
  }
  .gallery-site .gallery-header-inner {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
  }
  .gallery-site .gallery-nav {
    width: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 6px 10px !important;
  }
  .gallery-site .gallery-nav .nav-brand {
    order: 2 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .gallery-site .gallery-nav .mobile-nav {
    order: 1 !important;
    flex: 0 0 auto !important;
  }
  .gallery-site .gallery-nav .header-utilities {
    order: 3 !important;
    flex: 0 0 auto !important;
    gap: 2px !important;
  }

  /* -- 3. Busca e números numa peça só -------------------------- */
  .gallery-site.gallery-home .hero-toolbar {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    border-radius: 18px !important;
    background: var(--hailey-title) !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search {
    width: 100% !important;
    margin: 0 !important;
    justify-content: flex-start !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
    text-align: center !important;
  }
}

/* ================================================================
   CELULAR — ajustes finos do topo
   ================================================================ */
@media (max-width: 760px) {

  /* A barra PAINEL da capa sobe 55px por transform para encostar no
     herói do desktop. Com o herói novo ela caía em cima da busca. */
  .gallery-site.gallery-home .admin-control-dock {
    transform: none !important;
    margin: 14px 0 6px !important;
    background: none !important;
  }
  .gallery-site.gallery-home .archive-content {
    padding-top: 0 !important;
  }

  /* A arte dissolve no fundo em vez de terminar numa linha reta. */
  .gallery-site.gallery-home .hero-photo {
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 62%,
      rgba(0, 0, 0, .78) 78%,
      rgba(0, 0, 0, .34) 91%,
      rgba(0, 0, 0, 0) 100%) !important;
    mask-image: linear-gradient(180deg,
      #000 0%, #000 62%,
      rgba(0, 0, 0, .78) 78%,
      rgba(0, 0, 0, .34) 91%,
      rgba(0, 0, 0, 0) 100%) !important;
  }

  /* Busca: o botão vira uma pílula de verdade, para a linha não
     ficar com um ícone solto num bloco vazio. */
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle {
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 14px !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .12) !important;
    color: var(--hailey-on-dark) !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle svg {
    color: var(--hailey-on-dark) !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle::after {
    content: "Buscar";
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search input:not([style*="flex"]) {
    color: var(--hailey-on-dark) !important;
  }

  /* Os quatro números ocupam a largura toda, dois a dois. */
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    justify-content: stretch !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div > span {
    width: 100% !important;
    justify-content: center !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .10) !important;
  }
}

/* ================================================================
   CELULAR — duas correções do bloco anterior
   ================================================================ */
@media (max-width: 760px) {

  /* 1. Eu tinha transformado `.archive-stats-bar` em grade de duas
     colunas, mas ela tem um único filho: aquele filho caía numa
     coluna de 193px e a grade de verdade, que é a de dentro, ficava
     com colunas de 74px — daí as pílulas se encavalando. A barra
     volta a ser um bloco simples; quem divide em dois é o filho. */
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar {
    display: block !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div > span {
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 9px !important;
  }

  /* 2. A máscara começava a apagar em 62% da altura — bem em cima da
     assinatura da arte, que ficava lavada. O degradê desce para os
     últimos 12%, abaixo do "BRASIL". */
  .gallery-site.gallery-home .hero-photo {
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 88%,
      rgba(0, 0, 0, .72) 94%,
      rgba(0, 0, 0, .28) 98%,
      rgba(0, 0, 0, 0) 100%) !important;
    mask-image: linear-gradient(180deg,
      #000 0%, #000 88%,
      rgba(0, 0, 0, .72) 94%,
      rgba(0, 0, 0, .28) 98%,
      rgba(0, 0, 0, 0) 100%) !important;
  }

  /* 3. A busca dividia a linha com um vazio grande à direita.
     Agora ela ocupa a largura toda como um campo. */
  .gallery-site.gallery-home .hero-toolbar .archive-search {
    justify-content: center !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ================================================================
   CELULAR — o rótulo PAINEL do topo
   ================================================================
   `.admin-entry` é uma caixa de 28px feita para o ícone sozinho, mas
   ela tem um `::after` com a palavra "PAINEL" que precisa de 27px —
   o texto saía cortado em "PAINE". No celular a caixa passa a se
   dimensionar pelo conteúdo. */
@media (max-width: 760px) {
  .gallery-site .header-utilities .admin-entry {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    gap: 5px !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }
  .gallery-site .header-utilities .admin-entry::after {
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

/* ================================================================
   CELULAR — o topo das páginas internas
   ================================================================
   A faixa das internas herdava o desenho do desktop: 190px de altura
   com a arte desenhada a 80% da largura. Numa tela estreita sobrava
   uma tira fina e, com os degradês laterais comendo as pontas, quase
   nada da imagem. No celular ela ganha altura e a arte volta a
   cobrir de ponta a ponta; os degradês das laterais saem, porque
   numa largura dessas eles só apagariam a foto inteira. */
@media (max-width: 760px) {
  .gallery-site:not(.gallery-home) .archive-subhero {
    height: clamp(200px, 46vw, 260px) !important;
  }

  .gallery-site:not(.gallery-home) .archive-subhero-photo {
    background-size: cover !important;
    background-position: center 38% !important;
  }

  .gallery-site:not(.gallery-home) .archive-subhero::after {
    background: linear-gradient(180deg,
      rgba(27, 27, 27, .44) 0%,
      rgba(27, 27, 27, .12) 26%,
      rgba(27, 27, 27, 0) 48%,
      rgba(189, 186, 184, .34) 70%,
      rgba(189, 186, 184, .74) 86%,
      rgba(189, 186, 184, .96) 95%,
      #bdbab8 100%) !important;
  }
}

/* ================================================================
   CELULAR — a barra do visualizador
   ================================================================
   No desktop ela é uma grade de três faixas com `nowrap` do lado
   direito, para "FOTO 1/6" cair no centro exato da barra. Numa tela
   estreita as três faixas não cabem: o botão "Voltar aos álbuns"
   quebrava em três linhas e ficava por cima dos ícones.

   No celular a barra vira uma coluna só: posição em cima, botão de
   voltar no meio e os comandos embaixo, podendo quebrar em linhas. */
@media (max-width: 760px) {
  .gallery-site .archive-content.archive-browser .cpg-photo-bar {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 12px 14px !important;
  }

  .gallery-site .archive-content.archive-browser .cpg-photo-bar .cpg-photo-pos {
    order: -1 !important;
    justify-self: center !important;
  }

  .gallery-site .archive-content.archive-browser .cpg-photo-bar-left {
    justify-self: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .gallery-site .archive-content.archive-browser .cpg-photo-bar-left > a {
    white-space: nowrap !important;
  }

  .gallery-site .archive-content.archive-browser .cpg-photo-bar-right {
    justify-self: center !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }
}

/* ================================================================
   O BOTÃO DE ESCOLHER ARQUIVOS NO UPLOAD
   ================================================================
   O botão nunca sumiu — ele estava sem roupa. O reset que abre o
   `style.css` zera o controle nativo:

       ::file-selector-button {
         border: 0 solid; margin: 0; padding: 0;
         background-color: #0000; border-radius: 0;
         color: inherit; font: inherit;
       }

   Sem fundo, sem borda e sem respiro, o "Escolher arquivos" vira
   texto corrido ao lado de "Nenhum arquivo escolhido" — clicável,
   mas sem nenhum sinal de que é um botão. Aqui ele volta a parecer
   um: pílula cheia, no mesmo vermelho do resto do painel. */
.admin-shell input[type="file"],
.gallery-site input[type="file"] {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  color: #4f4c4b !important;
  font-size: 12px !important;
  cursor: pointer !important;
}

.admin-shell input[type="file"]::file-selector-button,
.gallery-site input[type="file"]::file-selector-button {
  margin-inline-end: 12px !important;
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .2s ease !important;
}
.admin-shell input[type="file"]::file-selector-button:hover,
.gallery-site input[type="file"]::file-selector-button:hover {
  background: #1b1b1b !important;
}

/* Safari antigo usa o nome antigo do pseudo-elemento. */
.admin-shell input[type="file"]::-webkit-file-upload-button,
.gallery-site input[type="file"]::-webkit-file-upload-button {
  margin-inline-end: 12px !important;
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

/* Os campos de arquivo da tela de aparência são invisíveis de
   propósito: eles cobrem o rótulo inteiro para a caixa toda virar
   área de clique. Aqueles continuam como estavam. */
.admin-shell .appearance-assets input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
}

/* O campo de arquivo tinha largura fixa e `overflow: clip`, então o
   "Nenhum arquivo escolhido" (e depois o nome do arquivo) saía
   cortado no meio. */
.admin-shell input[type="file"]:not(.appearance-assets input),
.gallery-site input[type="file"] {
  min-width: min(520px, 100%) !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* O link "Inserir da lista", ao lado de Palavras-chave, caía numa
   coluna de 15px e quebrava letra por letra. */
.admin-shell a.greybox {
  display: inline-block !important;
  width: auto !important;
  white-space: nowrap !important;
  margin-top: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* ================================================================
   PÁGINA DE ENVIO DE FOTOS
   ================================================================
   O Coppermine entrega esta tela como uma `<table>` crua: coluna de
   rótulos à esquerda, controle à direita, tudo separado por fios de
   1px. Numa largura de 1400px a coluna dos rótulos ficava com 409px
   para caber a palavra "Álbum" — muito branco à toa — e a área de
   arrastar era uma tirinha pontilhada de 45px de altura.

   A tabela continua sendo uma tabela no HTML (o Coppermine escreve
   `<tr>`/`<td>` direto do PHP e mexer nisso quebraria o upload). O
   que muda é só a apresentação: cada linha vira uma grade de duas
   colunas com medida humana, e a área de soltar arquivos passa a ser
   o centro da página, que é o que a pessoa veio fazer aqui. */

/* -- A folha ---------------------------------------------------- */
.admin-shell.cpg-page-upload .admin-content {
  max-width: 940px !important;
}

.admin-shell.cpg-page-upload table.maintable,
.admin-shell.cpg-page-upload table.maintable > tbody {
  display: block !important;
  width: 100% !important;
  border-collapse: separate !important;
}

.admin-shell.cpg-page-upload table.maintable {
  border: 1px solid rgba(40, 38, 38, .16) !important;
  border-radius: 20px !important;
  background: #ebe9e7 !important;
  overflow: hidden !important;
}

/* -- As linhas -------------------------------------------------- */
.admin-shell.cpg-page-upload table.maintable > tbody > tr {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px 24px !important;
  padding: 18px 28px !important;
  border-bottom: 1px solid rgba(40, 38, 38, .10) !important;
}
.admin-shell.cpg-page-upload table.maintable > tbody > tr:last-child {
  border-bottom: 0 !important;
}

.admin-shell.cpg-page-upload table.maintable td {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: middle !important;
}

/* Linhas de uma coluna só (o cabeçalho, o aviso de tamanho, o
   rodapé de "Continuar") ocupam a largura inteira. */
.admin-shell.cpg-page-upload table.maintable > tbody > tr:has(> td:only-child) > td {
  grid-column: 1 / -1 !important;
}

/* -- Rótulos ---------------------------------------------------- */
.admin-shell.cpg-page-upload table.maintable > tbody > tr > td:first-child:not(:only-child) {
  align-self: center !important;
  color: #6f6c6b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
}

/* -- Cabeçalho e aviso de tamanho ------------------------------- */
.admin-shell.cpg-page-upload table.maintable > tbody > tr:first-child {
  padding: 26px 28px 20px !important;
  border-bottom: 1px solid rgba(40, 38, 38, .14) !important;
}

.admin-shell.cpg-page-upload table.maintable strong {
  display: inline-flex !important;
  align-items: center !important;
  padding: 7px 15px !important;
  border-radius: 999px !important;
  background: rgba(27, 27, 27, .10) !important;
  color: #1b1b1b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* -- Campos ----------------------------------------------------- */
.admin-shell.cpg-page-upload select.listbox,
.admin-shell.cpg-page-upload input.textinput,
.admin-shell.cpg-page-upload input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 44px !important;
  padding: 0 15px !important;
  border: 1px solid rgba(40, 38, 38, .22) !important;
  border-radius: 12px !important;
  background: #fdf6f1 !important;
  color: #4f4c4b !important;
  font-family: inherit !important;
  font-size: 13px !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.admin-shell.cpg-page-upload select.listbox:focus,
.admin-shell.cpg-page-upload input.textinput:focus,
.admin-shell.cpg-page-upload input[type="text"]:focus {
  outline: 0 !important;
  border-color: #1b1b1b !important;
  box-shadow: 0 0 0 3px rgba(27, 27, 27, .14) !important;
}

.admin-shell.cpg-page-upload input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #1b1b1b !important;
  cursor: pointer !important;
}

/* -- O "?" de ajuda e o link "Inserir da lista" ----------------- */
.admin-shell.cpg-page-upload a.greybox:has(img) {
  width: 19px !important;
  height: 19px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(27, 27, 27, .12) !important;
  color: #1b1b1b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}
/* O "?" vinha de `.greybox::before`, e o link de texto herdava a
   interrogação — virava "?Inserir da lista". */
.admin-shell.cpg-page-upload a.greybox:not(:has(img))::before {
  content: none !important;
}
.admin-shell.cpg-page-upload a.greybox:not(:has(img)) {
  color: #1b1b1b !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* -- A área de arquivos ----------------------------------------- */
.admin-shell.cpg-page-upload #h5upldrow > td:last-child > div {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 10px !important;
}
.admin-shell.cpg-page-upload #h5upldrow > td:last-child > div > br {
  display: none !important;
}

.admin-shell.cpg-page-upload #dropArea {
  order: 1 !important;
  flex: 1 0 100% !important;
  min-height: 176px !important;
  margin: 0 !important;
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px dashed rgba(40, 38, 38, .30) !important;
  border-radius: 16px !important;
  background: rgba(253, 246, 241, .6) !important;
  color: #6f6c6b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-align: center !important;
  transition: border-color .2s ease, background .2s ease !important;
}
.admin-shell.cpg-page-upload #dropArea::before {
  content: "" !important;
  width: 46px !important;
  height: 46px !important;
  margin-bottom: 13px !important;
  border-radius: 50% !important;
  background: rgba(27, 27, 27, .10) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b22d46' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 15.5V4.5'/><path d='m7.8 8.7 4.2-4.2 4.2 4.2'/><path d='M4.5 14.5v3.75c0 .69.56 1.25 1.25 1.25h12.5c.69 0 1.25-.56 1.25-1.25V14.5'/></svg>") center / 23px 23px no-repeat !important;
}
.admin-shell.cpg-page-upload #dropArea:hover {
  border-color: rgba(27, 27, 27, .55) !important;
  background: rgba(27, 27, 27, .05) !important;
}

.admin-shell.cpg-page-upload #upload_field { order: 2 !important; flex: 0 0 auto !important; }
.admin-shell.cpg-page-upload #autorient   { order: 3 !important; flex: 0 0 auto !important; margin-left: 4px !important; }
.admin-shell.cpg-page-upload #h5upldrow label {
  order: 4 !important;
  flex: 0 0 auto !important;
  color: #6f6c6b !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.admin-shell.cpg-page-upload #progress_report { order: 5 !important; flex: 1 0 100% !important; }

/* -- A barra de progresso --------------------------------------- */
.admin-shell.cpg-page-upload #totprogress {
  height: 8px !important;
  margin: 6px 0 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(40, 38, 38, .14) !important;
  overflow: hidden !important;
}
.admin-shell.cpg-page-upload #progress_report_bar {
  height: 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #1b1b1b !important;
  transition: width .25s ease !important;
}
.admin-shell.cpg-page-upload #progress_report > div:last-of-type,
.admin-shell.cpg-page-upload #qcount {
  color: #6f6c6b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* -- O rodapé que aparece quando o envio termina ---------------- */
.admin-shell.cpg-page-upload #gotoedit button {
  padding: 11px 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #1b1b1b !important;
  color: #f7f6f4 !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
.admin-shell.cpg-page-upload #gotoedit button:hover {
  background: #1b1b1b !important;
}

/* Duas correções do bloco acima.

   1. Algumas linhas desta tela são escondidas por `style="display:none"`
      no próprio HTML e reveladas depois pelo JavaScript do plugin —
      o aviso amarelo "NOT AVAILABLE WITH THIS WEB BROWSER" e o rodapé
      "Continuar". Meu `display: grid !important` passava por cima do
      inline e trazia o aviso para a tela. Este guarda-corpo devolve a
      última palavra para quem escondeu.

   2. Os `<td>` de rótulo trazem `width="30%"` no HTML. Como item de
      grade isso virava 57px de largura e a legenda quebrava uma
      palavra por linha. */
.admin-shell.cpg-page-upload table.maintable > tbody > tr[style*="display"][style*="none"] {
  display: none !important;
}

.admin-shell.cpg-page-upload table.maintable td {
  width: auto !important;
  max-width: none !important;
}

/* A caixa de arrastar não chegava à borda da coluna porque o `div`
   que o plugin envolve tudo tem largura própria. E, já que ela agora
   vem antes do botão, ganha uma segunda linha ligando as duas
   formas de escolher a foto. */
.admin-shell.cpg-page-upload #h5upldrow > td:last-child > div {
  width: 100% !important;
  max-width: 100% !important;
}
.admin-shell.cpg-page-upload #dropArea::after {
  content: "ou escolha pelo botão abaixo";
  margin-top: 7px;
  color: #a58a7e;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* Com a caixa de arrastar ocupando a coluna inteira, o flex jogava a
   caixinha "Girar as fotos" para a ponta direita e o rótulo dela
   caía sozinho na linha de baixo. Uma grade resolve: cada peça sabe
   em qual coluna e em qual linha fica.

   A ordem final é: caixa de arrastar, botão + nome do arquivo,
   opção de girar e, por último, a barra de progresso. */
.admin-shell.cpg-page-upload #h5upldrow > td:last-child > div {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px 9px !important;
}
.admin-shell.cpg-page-upload #dropArea       { grid-column: 1 / -1 !important; }
.admin-shell.cpg-page-upload #upload_field   { grid-column: 1 / -1 !important; }
.admin-shell.cpg-page-upload #autorient      { grid-column: 1 !important; justify-self: start !important; margin: 0 !important; }
.admin-shell.cpg-page-upload #h5upldrow label { grid-column: 2 !important; justify-self: start !important; }
.admin-shell.cpg-page-upload #progress_report { grid-column: 1 / -1 !important; }

/* O seletor de método no alto da página herdava o espaçamento de
   letra dos títulos do painel — "V á r i a s   f o t o s". Num
   controle de formulário isso só atrapalha a leitura. */
.admin-shell.cpg-page-upload .archive-section-title select,
.admin-shell.cpg-page-upload .cpg-title-cell select {
  height: 44px !important;
  padding: 0 40px 0 16px !important;
  border: 1px solid rgba(40, 38, 38, .22) !important;
  border-radius: 12px !important;
  background-color: #fdf6f1 !important;
  color: #4f4c4b !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* ================================================================
   OS CARTÕES DE MÊS, ANO E ÁLBUM — fora o branco puro
   ================================================================
   Estes três grupos ainda vinham com `background: white` e sombra
   preta (`rgba(0,0,0,.04)`), herança do desenho original. Branco
   puro sobre o rosé da galeria abre um buraco frio no meio da
   página, e sombra preta sobre fundo quente lê como sujeira.

   Passam para o marfim do tema e para sombras na cor da própria
   paleta. */
.gallery-site .month-grid > a,
.gallery-site .month-grid > button,
.gallery-site .year-grid > a,
.gallery-site .year-grid > button,
.gallery-site .browser-album-grid > a,
.gallery-site .browser-album-grid > button {
  border-color: rgba(27, 27, 27, .20) !important;
  background: var(--hailey-on-dark) !important;
  color: var(--hailey-title) !important;
  box-shadow: 0 4px 14px rgba(27, 27, 27, .07) !important;
}

.gallery-site .month-grid > a:hover,
.gallery-site .month-grid > button:hover,
.gallery-site .year-grid > a:hover,
.gallery-site .year-grid > button:hover,
.gallery-site .browser-album-grid > a:hover,
.gallery-site .browser-album-grid > button:hover {
  border-color: rgba(27, 27, 27, .42) !important;
  box-shadow: 0 11px 24px rgba(27, 27, 27, .16) !important;
}

/* ================================================================
   PLACEHOLDER DOS MESES SEM FOTO
   ================================================================
   O quadrado que aparece no lugar da prévia, quando o mês não tem
   foto nenhuma, vinha com um degradê cinza (#ececé8 → #dadad5) do
   desenho original. Agora é a cor do tema. */
.gallery-site :where(.month-preview, .year-cover, .album-thumb, .media-placeholder).empty,
.gallery-site .month-preview.empty,
.gallery-site .year-cover.empty {
  background: #cbc8c6 !important;
  background-image: none !important;
}

/* ================================================================
   CAPA DO CELULAR — arte própria
   ================================================================
   A arte do desktop é 2:1: numa tela em pé ela só cabia como uma
   tira. Agora o celular tem a sua, em 4:5, e a faixa passa a ter
   exatamente essa proporção — com `cover` a imagem aparece inteira,
   sem corte nenhum.

   Só o celular troca. O desktop continua com a arte de sempre. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .archive-intro {
    --arq-hero-alt: min(68vh, calc(100vw * 5 / 4)) !important;
  }

  .gallery-site.gallery-home .hero-photo {
    background-image: url("images/hero-hailey-mobile.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* A assinatura da arte termina por volta de 86% da altura, então o
     degradê de saída começa depois dela. */
  .gallery-site.gallery-home .hero-photo {
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 90%,
      rgba(0, 0, 0, .74) 95%,
      rgba(0, 0, 0, 0) 100%) !important;
    mask-image: linear-gradient(180deg,
      #000 0%, #000 90%,
      rgba(0, 0, 0, .74) 95%,
      rgba(0, 0, 0, 0) 100%) !important;
  }
}

/* Em telas curtas (celular deitado, aparelhos baixos) a faixa fica
   menor que os 4:5 da arte e o `cover` precisa cortar. Ancorando em
   65% da altura, o corte come o teto do cenário — que não faz falta
   — e a assinatura "HAILEY BIEBER BRASIL", que fica embaixo,
   continua inteira. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .hero-photo {
    background-position: center 65% !important;
  }
}

/* ================================================================
   TELA "ADICIONAR EM LOTE" (searchnew.php)
   ================================================================
   Mesma casca da tela de envio: um cartão só, linhas com medida
   humana e o quadro de escolher a pasta como peça central. */
.admin-shell.cpg-page-searchnew .admin-content {
  max-width: 940px !important;
}

.admin-shell.cpg-page-searchnew table.maintable,
.admin-shell.cpg-page-searchnew table.maintable > tbody {
  display: block !important;
  width: 100% !important;
  border-collapse: separate !important;
}
.admin-shell.cpg-page-searchnew table.maintable {
  border: 1px solid rgba(40, 38, 38, .16) !important;
  border-radius: 20px !important;
  background: #ebe9e7 !important;
  overflow: hidden !important;
}
.admin-shell.cpg-page-searchnew table.maintable > tbody > tr {
  display: grid !important;
  grid-template-columns: 190px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px 24px !important;
  padding: 18px 28px !important;
  border-bottom: 1px solid rgba(40, 38, 38, .10) !important;
}
.admin-shell.cpg-page-searchnew table.maintable > tbody > tr[style*="display"][style*="none"] {
  display: none !important;
}
.admin-shell.cpg-page-searchnew table.maintable > tbody > tr:last-child {
  border-bottom: 0 !important;
}
.admin-shell.cpg-page-searchnew table.maintable td {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.admin-shell.cpg-page-searchnew table.maintable > tbody > tr:has(> td:only-child) > td {
  grid-column: 1 / -1 !important;
}
.admin-shell.cpg-page-searchnew table.maintable > tbody > tr:first-child {
  padding: 26px 28px 20px !important;
  border-bottom: 1px solid rgba(40, 38, 38, .14) !important;
}

/* O quadro do seletor de pastas. */
.admin-shell.cpg-page-searchnew iframe {
  width: 100% !important;
  height: 330px !important;
  border: 1px solid rgba(40, 38, 38, .20) !important;
  border-radius: 16px !important;
  background: #ebe9e7 !important;
}

/* O texto que explica o que essa tela faz. */
.admin-shell.cpg-page-searchnew table.maintable strong {
  display: block !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border-left: 3px solid rgba(27, 27, 27, .45) !important;
  background: rgba(27, 27, 27, .07) !important;
  color: #4f4c4b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* As duas opções de baixo: rótulo à esquerda, "Sim / Não" à direita. */
.admin-shell.cpg-page-searchnew td.tablef {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 16px !important;
  color: #6f6c6b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}
.admin-shell.cpg-page-searchnew td.tablef label.clickable_option {
  margin-right: 14px !important;
  color: #4f4c4b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
}
.admin-shell.cpg-page-searchnew input[type="radio"] {
  width: 17px !important;
  height: 17px !important;
  margin-right: 6px !important;
  accent-color: #1b1b1b !important;
  cursor: pointer !important;
}
.admin-shell.cpg-page-searchnew a.greybox:has(img) {
  width: 19px !important;
  height: 19px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(27, 27, 27, .12) !important;
  color: #1b1b1b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* ================================================================
   CARTÕES DE MÊS, ANO E ÁLBUM — #cbc8c6
   ================================================================
   O marfim do tema deixava esses cartões amarelados demais ao lado
   do rosé da página. Passam para #cbc8c6.

   Como o quadrado da prévia usa a mesma cor, ele ganha um contorno
   fino para continuar se lendo como o lugar da foto. */
.gallery-site .month-grid > a,
.gallery-site .month-grid > button,
.gallery-site .year-grid > a,
.gallery-site .year-grid > button,
.gallery-site .browser-album-grid > a,
.gallery-site .browser-album-grid > button {
  background: #cbc8c6 !important;
  border-color: rgba(27, 27, 27, .26) !important;
  color: var(--hailey-title) !important;
}

.gallery-site :where(.month-preview, .year-cover, .album-thumb).empty,
.gallery-site .month-preview.empty,
.gallery-site .year-cover.empty {
  background: #cbc8c6 !important;
  background-image: none !important;
  border: 1px solid rgba(27, 27, 27, .20) !important;
  box-sizing: border-box !important;
}

/* ================================================================
   CELULAR — menu que abre, barra mais alta e busca compacta
   ================================================================ */
@media (max-width: 760px) {

  /* -- 1. A barra estava baixa demais --------------------------- */
  /* `.gallery-site .gallery-topbar.hero-mode { top: 58px }` tem três
     partes de especificidade e ganhava do meu `top: 12px`, que tem
     duas. Os 58px são o respiro que a capa pede no desktop; no
     celular a barra sobe para junto do topo. */
  .gallery-site .gallery-topbar.hero-mode,
  .gallery-site .gallery-topbar.archive-mode {
    top: 10px !important;
  }

  /* -- 2. O menu do hambúrguer abria fora da tela --------------- */
  /* O painel é `position: absolute; right: 0` e o elemento que servia
     de âncora era `.mobile-nav`: uma caixa de 38px encostada na
     esquerda. Com `right: 0` medido a partir dela, o menu crescia
     para a esquerda e saía da tela — abria em x = -139px, que é
     aquele retângulo vermelho aparecendo pela lateral.

     Agora quem ancora é a barra inteira, e o painel ocupa a largura
     dela. */
  .gallery-site .gallery-nav {
    position: relative !important;
  }
  .gallery-site .mobile-nav {
    position: static !important;
  }
  .gallery-site .mobile-nav-menu {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    top: calc(100% + 8px) !important;
    padding: 8px !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(27, 27, 27, .28) !important;
  }
  .gallery-site .mobile-nav-menu > a {
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
  }

  /* -- 3. Busca e números mais enxutos -------------------------- */
  .gallery-site.gallery-home .hero-toolbar {
    max-width: 380px !important;
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle {
    height: 32px !important;
    padding: 0 12px !important;
    gap: 6px !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle::after {
    font-size: 8.5px !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div {
    gap: 5px !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div > span {
    padding: 4px 3px !important;
    border-radius: 8px !important;
    font-size: 8px !important;
  }

  /* -- 4. A TV do texto de boas-vindas -------------------------- */
  /* Uma coluna só: a TV centrada e maior, o texto embaixo, e o
     conjunto com menos ar em volta. */
  .gallery-site .gallery-welcome {
    padding: 18px 16px 20px !important;
    gap: 16px !important;
    justify-items: center !important;
    text-align: center !important;
  }
  .gallery-site .gallery-welcome-tv {
    width: 190px !important;
    height: 152px !important;
    margin: 0 auto !important;
  }
  .gallery-site .gallery-welcome p {
    text-align: left !important;
  }
}

/* ================================================================
   CELULAR — dois acertos do bloco anterior
   ================================================================ */
@media (max-width: 760px) {

  /* 1. O cartão de boas-vindas subia por cima dos números.

     `.archive-intro` continuava com `max-height: 640px` e
     `overflow: hidden`. Eu tinha soltado `height` e `min-height`,
     mas não o teto: como a faixa nova é mais alta, o conteúdo
     media 730px dentro de uma caixa travada em 640, e o excedente
     era cortado — a barra de busca ficava metade para fora e o
     conteúdo seguinte subia por cima dela. */
  .gallery-site.gallery-home .archive-intro {
    max-height: none !important;
    overflow: visible !important;
  }

  /* 2. Os links do menu do hambúrguer eram marrom-escuro sobre o
     carmim do painel: dava para ver que havia texto e não para
     ler. */
  .gallery-site .mobile-nav-menu > a {
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
  }
  .gallery-site .mobile-nav-menu > a:hover,
  .gallery-site .mobile-nav-menu > a:focus-visible,
  .gallery-site .mobile-nav-menu > a[aria-current] {
    background: rgba(255, 255, 255, .14) !important;
    color: #f7f6f4 !important;
  }
}

/* ================================================================
   O BOTÃO DO MENU (hambúrguer)
   ================================================================
   As três barras tinham 6,7px de espessura com raio 8px — quase
   pastilhas. Fechado virava um borrão; aberto, as duas barras
   giradas 45° se sobrepunham e desenhavam um ">" em vez de um X.

   Barras finas resolvem as duas leituras de uma vez. O deslocamento
   do X acompanha a nova medida: metade da barra (1,25px) mais o
   respiro (5px) até o centro. */
@media (max-width: 760px) {
  .gallery-site .mobile-nav-toggle {
    gap: 5px !important;
  }
  .gallery-site .mobile-nav-toggle span {
    width: 21px !important;
    height: 2.5px !important;
    border-radius: 2px !important;
    transition: transform .25s ease, opacity .18s ease !important;
  }
  .gallery-site .mobile-nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(7.5px) rotate(45deg) !important;
  }
  .gallery-site .mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important;
  }
  .gallery-site .mobile-nav-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-7.5px) rotate(-45deg) !important;
  }
}

/* ================================================================
   CELULAR — busca e números numa linha só
   ================================================================
   A busca ocupava uma faixa inteira em cima e os números vinham
   embaixo, então o cartão precisava de duas alturas. Só que os
   números moram dentro de `.archive-stats-bar > div`, um nível
   abaixo da busca — não dá para alinhar os dois enquanto essa
   caixa intermediária existir no fluxo.

   `display: contents` resolve sem tocar no HTML: a barra e o div
   de dentro deixam de gerar caixa, e as quatro pastilhas sobem
   para o mesmo flex da busca. Aí tudo se organiza numa fita só,
   que quebra de linha sozinha conforme couber. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .hero-toolbar {
    width: auto !important;
    max-width: min(420px, calc(100% - 24px)) !important;
    padding: 7px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 20px !important;
  }

  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar,
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div {
    display: contents !important;
  }

  /* A busca vira uma pastilha do mesmo tamanho das outras. */
  .gallery-site.gallery-home .hero-toolbar .archive-search {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle {
    width: auto !important;
    height: 30px !important;
    padding: 0 13px !important;
    gap: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .18) !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle::after {
    content: "Buscar";
    font-size: 8.5px;
  }

  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div > span {
    width: auto !important;
    flex: 0 0 auto !important;
    height: 30px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .10) !important;
    font-size: 8.5px !important;
    white-space: nowrap !important;
  }
}

/* ================================================================
   CELULAR — o cartão de boas-vindas
   ================================================================
   A TV tomava quase todo o cartão e o texto vinha depois de um vão
   grande, como se fossem dois blocos sem relação. Agora a TV é um
   selo no alto, menor, e o texto começa logo abaixo. */
@media (max-width: 760px) {
  .gallery-site .gallery-welcome {
    padding: 16px 16px 18px !important;
    gap: 12px !important;
    border-radius: 18px !important;
  }
  .gallery-site .gallery-welcome-tv {
    width: 132px !important;
    height: 106px !important;
  }
  .gallery-site .gallery-welcome p {
    font-size: 12.5px !important;
    line-height: 1.7 !important;
  }
}

/* Correção do bloco acima: soltas numa fita, as cinco pastilhas
   quebravam 4 + 1 e a última ficava órfã no meio da segunda linha.

   Composição mais estável: a busca de um lado, fixa, e os quatro
   números numa grade 2×2 do outro. Ninguém fica sobrando e a
   altura é sempre a mesma, em qualquer largura de tela. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .hero-toolbar {
    max-width: min(400px, calc(100% - 24px)) !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div > span {
    width: 100% !important;
    height: 27px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
  }

  /* A busca ocupa as duas linhas ao lado da grade. */
  .gallery-site.gallery-home .hero-toolbar .archive-search {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle {
    height: 100% !important;
    min-height: 59px !important;
    padding: 0 15px !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 14px !important;
  }
}

/* A busca tinha virado uma lasca alta com o ícone e a palavra
   empilhados: mais larga, mais alta e com canto diferente das
   pastilhas ao lado — parecia um buraco no cartão, não um botão.

   Volta a ser o que ela é: um ícone. Círculo do tamanho de uma
   pastilha, centrado na altura da grade, com a lupa em marfim.
   A palavra sai (o rótulo continua no aria-label do botão, para
   leitor de tela), e o cartão fica com duas formas só — círculo e
   pastilha — em vez de três. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .hero-toolbar .archive-search {
    align-self: center !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    gap: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .16) !important;
    transition: background .2s ease !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle:hover,
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle:focus-visible {
    background: rgba(255, 255, 255, .3) !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle::after {
    content: none !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* ================================================================
   A FITA DE NÚMEROS NO CELULAR — igual à da capa
   ================================================================
   Eu vinha inventando composição nova (pastilhas, grade 2×2, botão
   quadrado) quando o tema já tem uma que funciona: no desktop essa
   barra é uma fita fina de 381×29 — lupa, e os quatro números
   separados por fios de 1px, sem caixa nenhuma em volta de cada um.
   É limpa porque tem uma forma só.

   O que eu tinha feito foi justamente desmontar isso: virei a lista
   em grade, dei fundo a cada número e escondi os divisores (aqueles
   `<i>` que ficavam com `display: none`). Daí as três formas
   brigando dentro de um cartão pequeno.

   Aqui a fita da capa volta, só que apertada para caber em tela
   estreita: divisor com metade da margem e texto que encolhe junto
   com a largura da tela. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .hero-toolbar {
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 auto !important;
    padding: 3px 5px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 30px !important;
    background: var(--hailey-detail) !important;
  }

  .gallery-site.gallery-home .hero-toolbar .archive-search {
    flex: 0 0 auto !important;
    align-self: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: transparent !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle::after {
    content: none !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search-toggle svg {
    width: 14px !important;
    height: 14px !important;
  }

  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar {
    display: block !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    gap: 0 !important;
    grid-template-columns: none !important;
  }

  /* Os números: sem caixa, sem altura fixa — só texto. */
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div > span {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border-radius: 0 !important;
    background: none !important;
    font-size: clamp(6.5px, 1.9vw, 8px) !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;
  }

  /* Os divisores voltam a aparecer. */
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div > i {
    display: block !important;
    flex: 0 0 auto !important;
    width: 1px !important;
    height: 14px !important;
    margin: 0 clamp(5px, 1.6vw, 9px) !important;
    background: rgba(0, 0, 0, .85) !important;
  }
}

/* A fita ficou com 52px de altura para um conteúdo de 30: o campo
   de busca recolhido continua com 38px de altura mesmo com largura
   zero, e a barra dos números carregava altura de sobra da versão
   em grade. Os dois passam a medir o que mostram. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .hero-toolbar .archive-search {
    height: 30px !important;
    min-height: 0 !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-search input {
    height: 26px !important;
    min-height: 0 !important;
  }
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar,
  .gallery-site.gallery-home .hero-toolbar .archive-stats-bar > div {
    height: auto !important;
    min-height: 0 !important;
  }
}

/* A fita descia 16px abaixo do fim da arte e ficava boiando entre a
   capa e o conteúdo. Sobe para dentro da faixa, apoiada no degradê
   de saída — como no desktop, onde ela repousa sobre a própria
   fotografia. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .archive-intro-inner {
    padding-top: calc(var(--arq-hero-alt) - 34px) !important;
  }
}

/* ================================================================
   CELULAR — a TV ao lado do texto
   ================================================================
   Empilhada, a TV virava um bloco isolado com o texto começando
   longe dela. Lado a lado — TV à esquerda, texto à direita, como no
   desktop — os dois voltam a ser uma coisa só, e o cartão fica bem
   mais baixo.

   A TV encolhe para 118px, que é o que sobra de largura confortável
   para o texto não ficar com linhas curtas demais. */
@media (max-width: 760px) {
  .gallery-site .gallery-welcome {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: start !important;
    gap: 14px !important;
    padding: 16px !important;
    text-align: left !important;
  }
  .gallery-site .gallery-welcome-tv {
    width: 118px !important;
    height: 94px !important;
    margin: 2px 0 0 !important;
    flex: 0 0 auto !important;
  }
  .gallery-site .gallery-welcome p {
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.68 !important;
    text-align: left !important;
  }
}

/* Em telas bem estreitas duas colunas espremem o texto em linhas de
   três palavras. Aí a TV volta para cima, centrada. */
@media (max-width: 400px) {
  .gallery-site .gallery-welcome {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }
  .gallery-site .gallery-welcome-tv {
    margin: 0 auto 2px !important;
  }
}

/* ================================================================
   CELULAR — o texto contornando a TV
   ================================================================
   Em grade de duas colunas o texto fica preso na coluna dele: as
   linhas param na altura da TV e o espaço embaixo dela sobra vazio.
   Para o texto passar por baixo é preciso tirar a TV do fluxo e
   deixá-la flutuando — aí as primeiras linhas correm ao lado e as
   seguintes voltam a ocupar a largura inteira do cartão.

   O `::after` com `clear: both` existe porque, com a TV flutuando,
   ela deixa de contar para a altura do cartão: sem ele, um texto
   curto faria a TV vazar para fora da caixa. */
@media (max-width: 760px) {
  .gallery-site .gallery-welcome {
    display: block !important;
    padding: 16px !important;
  }
  .gallery-site .gallery-welcome::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
  }
  .gallery-site .gallery-welcome-tv {
    float: left !important;
    width: 118px !important;
    height: 94px !important;
    margin: 2px 14px 6px 0 !important;
  }
  .gallery-site .gallery-welcome p {
    margin: 0 !important;
    text-align: left !important;
  }
}

/* Abaixo de 400px a TV continua flutuando, só que menor — assim o
   texto ao lado dela ainda cabe sem virar linhas de três palavras. */
@media (max-width: 400px) {
  .gallery-site .gallery-welcome {
    justify-items: initial !important;
  }
  .gallery-site .gallery-welcome-tv {
    width: 96px !important;
    height: 77px !important;
    margin: 2px 12px 6px 0 !important;
  }
}

/* Eu tinha forçado `text-align: left` no celular e com isso quebrei
   o justificado que o texto tem no desktop — a margem da direita
   ficava toda irregular. Volta a fechar dos dois lados, com quebra
   de sílaba para as linhas ao lado da TV não abrirem buracos entre
   as palavras. */
@media (max-width: 760px) {
  .gallery-site .gallery-welcome p {
    text-align: justify !important;
    text-justify: inter-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }
}

/* Uma linha a menos correndo ao lado da TV.

   Quantas linhas cabem ao lado de um elemento flutuante é conta
   simples: a linha fica ao lado enquanto o topo dela estiver acima
   do pé da TV. Com a TV medindo 100px (94 + 6 de margem) e a linha
   19,3px, cabiam cinco.

   Para caírem quatro, o pé da TV precisa ficar dentro da quarta
   linha. Fiz pelos dois lados, para não ter que encolher demais a
   TV: ela desce para 92px no total e a entrelinha sobe para ~23,4px
   — 4 × 23,4 = 93,6, logo abaixo do pé. O texto também ganha meio
   ponto de corpo, que no celular só ajuda. */
@media (max-width: 760px) {
  .gallery-site .gallery-welcome-tv {
    width: 106px !important;
    height: 85px !important;
    margin: 2px 13px 7px 0 !important;
  }
  .gallery-site .gallery-welcome p {
    font-size: 12px !important;
    line-height: 1.95 !important;
  }
}

/* ================================================================
   CELULAR — PEQUENA / MÉDIA / GRANDE voltam a funcionar
   ================================================================
   Havia uma regra em `@media (max-width: 620px)` fixando a grade em
   duas colunas sem olhar o `data-arq-size`:

       .gallery-site .archive-content.archive-browser .thumbnail-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
       }

   Ela tem a mesma especificidade das regras por tamanho e aparece
   depois delas no arquivo, então ganhava sempre: os três botões
   mudavam o atributo e a grade continuava igual.

   No celular os três tamanhos passam a significar:
       PEQUENA  3 por fileira   (o padrão)
       MÉDIA    2 por fileira
       GRANDE   1 por fileira
   ================================================================ */
@media (max-width: 620px) {
  .gallery-site .archive-content.archive-browser .thumbnail-grid,
  .gallery-site .archive-content.archive-browser .thumbnail-grid[data-arq-size="small"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .gallery-site .archive-content.archive-browser .thumbnail-grid[data-arq-size="medium"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .gallery-site .archive-content.archive-browser .thumbnail-grid[data-arq-size="large"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  /* Com três por fileira o cartão fica estreito: a etiqueta de
     visualizações e a linha de dimensão encolhem junto. */
  .gallery-site .archive-content.archive-browser .thumbnail-grid[data-arq-size="small"] .thumbnail-views,
  .gallery-site .archive-content.archive-browser .thumbnail-grid:not([data-arq-size]) .thumbnail-views {
    padding: 3px 7px !important;
    font-size: 7.5px !important;
    gap: 4px !important;
  }
  .gallery-site .archive-content.archive-browser .thumbnail-grid[data-arq-size="small"] .thumbnail-sequence,
  .gallery-site .archive-content.archive-browser .thumbnail-grid:not([data-arq-size]) .thumbnail-sequence {
    font-size: 7.5px !important;
    letter-spacing: .02em !important;
  }
  .gallery-site .archive-content.archive-browser .thumbnail-grid[data-arq-size="small"] .thumbnail-heart,
  .gallery-site .archive-content.archive-browser .thumbnail-grid:not([data-arq-size]) .thumbnail-heart {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ================================================================
   CELULAR — o topo das páginas internas
   ================================================================
   A faixa vinha lavada: o véu de cima começa a fechar na cor de
   fundo já aos 70% da altura, o que numa faixa de 230px significa
   que os últimos 70px são quase cor chapada — e a arte, que já é
   clara, sumia junto com a assinatura.

   Agora o degradê só entra nos últimos 28%, o escurecimento do topo
   (que existe para o menu ler bem) fica mais curto, e a faixa ganha
   um pouco de altura. O conteúdo também sobe: 42px de respiro entre
   a faixa e a trilha era medida de desktop. */
@media (max-width: 760px) {
  .gallery-site:not(.gallery-home) .archive-subhero {
    height: clamp(215px, 52vw, 290px) !important;
  }

  .gallery-site:not(.gallery-home) .archive-subhero::after {
    background: linear-gradient(180deg,
      rgba(27, 27, 27, .34) 0%,
      rgba(27, 27, 27, .06) 18%,
      rgba(27, 27, 27, 0) 34%,
      rgba(189, 186, 184, 0) 72%,
      rgba(189, 186, 184, .55) 86%,
      rgba(189, 186, 184, .92) 95%,
      #bdbab8 100%) !important;
  }

  .gallery-site:not(.gallery-home) .archive-subhero-photo {
    background-position: center 34% !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .gallery-site:not(.gallery-home) .archive-browser {
    padding-top: 16px !important;
  }
  .gallery-site:not(.gallery-home) .archive-breadcrumb {
    margin-bottom: 14px !important;
  }
}

/* ================================================================
   O CABEÇALHO DO ANO — mesmo cartão do cabeçalho de álbum
   ================================================================
   As duas telas internas tratavam o mesmo elemento de dois jeitos:
   na página do álbum, `.browser-title` é um cartão (borda 2px
   #aaa7a5, fundo #d0cecc, raio 14, sombra); na página do ano, ficava
   solto no fundo, com um fio de 1px embaixo e o "voltar" jogado
   depois do subtítulo como texto sublinhado. No celular, onde tudo
   empilha, isso virava uma pilha de linhas sem forma.

   Agora o cabeçalho do ano é o mesmo cartão do álbum — mesma borda,
   mesmo fundo, mesmo raio — e o "voltar" virou pílula em vez de
   texto com risco embaixo. */
.gallery-site .browser-title.month-browser-title {
  min-height: 0 !important;
  margin: 8px 0 30px !important;
  padding: clamp(20px, 2.7vw, 34px) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 18px 24px !important;
  border: 2px solid #aaa7a5 !important;
  border-bottom: 2px solid #aaa7a5 !important;
  border-radius: 14px !important;
  background: #d0cecc !important;
  box-shadow: 0 14px 36px rgba(27, 27, 27, .08) !important;
}

.gallery-site .month-browser-title > div:first-child {
  flex: 1 1 260px !important;
  min-width: 0 !important;
}
.gallery-site .month-browser-title p {
  margin: 0 0 6px !important;
  color: #1b1b1b !important;
}
.gallery-site .month-browser-title h1 {
  margin: 0 !important;
}
.gallery-site .month-browser-title > div:first-child > span {
  display: block !important;
  margin-top: 8px !important;
  color: var(--hailey-text) !important;
}

.gallery-site .month-browser-title .browser-actions {
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto !important;
}

/* O "voltar" era texto com um risco embaixo; vira pílula. */
.gallery-site .month-browser-title .browser-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 38px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(27, 27, 27, .28) !important;
  border-radius: 999px !important;
  background: var(--hailey-on-dark) !important;
  color: var(--hailey-title) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}
.gallery-site .month-browser-title .browser-back:hover {
  border-color: var(--hailey-detail) !important;
  background: var(--hailey-detail) !important;
  color: var(--hailey-on-dark) !important;
}

/* No celular o cartão vira uma coluna e a pílula ocupa a linha toda,
   virando alvo de toque de verdade. */
@media (max-width: 760px) {
  .gallery-site .browser-title.month-browser-title {
    margin: 4px 0 20px !important;
    padding: 18px 16px !important;
    gap: 14px !important;
  }
  .gallery-site .month-browser-title .browser-actions {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .gallery-site .month-browser-title .browser-back {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Correção: eu tinha dado `flex: 1 1 260px` ao bloco do título. Como
   uma regra anterior põe este cabeçalho em `flex-direction: column`
   no celular, aquele 260px deixou de ser largura mínima e virou
   ALTURA — daí o vão enorme entre o subtítulo e o botão. Base auto,
   e a direção declarada de propósito em cada largura. */
.gallery-site .browser-title.month-browser-title {
  flex-direction: row !important;
  align-items: center !important;
}
.gallery-site .month-browser-title > div:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: auto !important;
}

@media (max-width: 760px) {
  .gallery-site .browser-title.month-browser-title {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .gallery-site .month-browser-title > div:first-child {
    flex: 0 0 auto !important;
  }
}

/* ================================================================
   CELULAR — a arte das páginas internas vira a mesma da capa
   ================================================================
   As internas continuavam com a arte 2:1 do desktop, que numa tela
   em pé só cabe como uma tira. Passam a usar o mesmo PNG retrato da
   capa, e a faixa ganha altura para a imagem ter onde respirar.

   A faixa não chega aos 4:5 inteiros da arte — isso empurraria o
   conteúdo longe demais numa página interna —, então o `cover`
   corta. Ancorando em 70% da altura o corte tira um pouco do teto
   do cenário e mantém tanto o rosto quanto a assinatura. */
@media (max-width: 760px) {
  .gallery-site:not(.gallery-home) .archive-subhero {
    height: min(56vh, calc(100vw * 0.95)) !important;
  }

  .gallery-site:not(.gallery-home) .archive-subhero-photo {
    background-image: url("images/hero-hailey-mobile.jpg") !important;
    background-position: center 70% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

/* ================================================================
   A CAPA DO CELULAR NÃO PODE SUMIR SE O ARQUIVO FALTAR
   ================================================================
   Quando `hero-hailey-mobile.jpg` não está no servidor, o navegador
   simplesmente não pinta nada e a faixa fica um retângulo vazio —
   foi exatamente o que aconteceu no site no ar.

   `background-image` aceita uma pilha de camadas: a de cima é a arte
   do celular, a de baixo é a mesma arte do desktop que a página já
   usa. Se a primeira falhar (404), a camada não é desenhada e a de
   baixo aparece no lugar. Nunca mais faixa vazia — no pior caso ela
   mostra a arte larga, que é o que se via antes.

   As duas camadas precisam de `background-size`/`position` próprios,
   um valor por camada, na mesma ordem. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .hero-photo {
    background-image: url("images/hero-hailey-mobile.jpg"), var(--arq-hero-image) !important;
    background-position: center 65%, center 45% !important;
    background-size: cover, cover !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  .gallery-site:not(.gallery-home) .archive-subhero-photo {
    background-image: url("images/hero-hailey-mobile.jpg"), var(--arq-hero-image) !important;
    background-position: center 70%, center 38% !important;
    background-size: cover, cover !important;
    background-repeat: no-repeat, no-repeat !important;
  }
}

/* ================================================================
   A CAPA DO CELULAR NUNCA MAIS FICA EM BRANCO
   ================================================================
   `background-image` aceita várias camadas, e uma camada que dá 404
   simplesmente não é pintada — a de baixo aparece no lugar dela.
   Então a arte do celular passa a vir com a arte do desktop
   embaixo: se `hero-hailey-mobile.jpg` faltar no servidor, em vez
   da faixa vazia o visitante vê a capa de sempre.

   Isso é rede de proteção, não conserto: o arquivo continua tendo
   que subir para a capa retrato aparecer. Mas um upload incompleto
   deixa de derrubar o topo do site. */
@media (max-width: 760px) {
  .gallery-site.gallery-home .hero-photo {
    background-image: url("images/hero-hailey-mobile.jpg"), var(--arq-hero-image) !important;
    background-position: center 65%, center center !important;
    background-size: cover, cover !important;
    background-repeat: no-repeat, no-repeat !important;
  }

  .gallery-site:not(.gallery-home) .archive-subhero-photo {
    background-image: url("images/hero-hailey-mobile.jpg"), var(--arq-hero-image) !important;
    background-position: center 70%, center 38% !important;
    background-size: cover, cover !important;
    background-repeat: no-repeat, no-repeat !important;
  }
}

/* ================================================================
   A MINIATURA DO ÁLBUM PREENCHENDO O CARTÃO
   ================================================================
   A capa tinha altura fixa (96px) enquanto o cartão cresce conforme
   o título: com uma linha os dois batiam, com duas o cartão ia para
   104px e sobravam 8px de fundo embaixo da imagem — a "borda" que
   aparecia. Em títulos longos, como os do site no ar, a sobra é
   ainda maior.

   Agora a capa acompanha a altura do cartão, qualquer que seja ela.
   Vale no desktop também: lá o mesmo vão existia, só que menor.

   E o "Ver miniaturas" ganha respiro: estava a 5px do título,
   parecendo parte dele. */
.gallery-site .browser-album-grid.is-list > a {
  align-items: stretch !important;
}

.gallery-site .browser-album-grid.is-list > a > span {
  height: auto !important;
  min-height: 100% !important;
  align-self: stretch !important;
}

.gallery-site .browser-album-grid.is-list > a > span > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.gallery-site .browser-album-grid.is-list > a > div {
  align-self: center !important;
}

.gallery-site .browser-album-grid.is-list > a > div > em {
  margin-top: 12px !important;
}

@media (max-width: 760px) {
  .gallery-site .browser-album-grid.is-list > a > div > em {
    margin-top: 11px !important;
  }
}