/* Use the same approved surface on the Todos shortcut and inside the collection. */
#hair-gallery {
  --todos-surface: url('media/todos-textura-mineral-r24.webp');
}

#hair-gallery[open][data-material="all"][data-browsing="true"] {
  --material-image: var(--todos-surface);
}

#hair-gallery[open][data-material][data-browsing="true"] .hair-filters {
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  max-width: none;
}

#hair-gallery[open][data-material][data-browsing="true"] .hair-filters .mineral-choice[data-hair-filter="all"] {
  min-height: 124px;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px 15px;
  background: #302a22 var(--todos-surface) center / cover no-repeat;
}

#hair-gallery .mineral-choice[data-hair-filter="all"]::after {
  background: linear-gradient(0deg, #17110ff7 2%, #17110fbf 35%, #17110f08 78%);
}

#hair-gallery .mineral-choice[data-hair-filter="all"] .mineral-choice-name { font-size: 17px; font-weight: 700; }

#hair-gallery[data-material="all"][data-browsing="true"] [data-varal] {
  background: linear-gradient(180deg, #291d16f0, #281d16d1 45%, #251b16f5 95%);
}

#hair-gallery [data-varal] .varal-slot:only-child { margin-inline: auto; }
#hair-gallery [data-varal][data-single] .varal-track { width: 100%; justify-content: center; }

@media (max-width: 700px), (pointer: coarse) and (max-width: 900px) {
  #brand-opening .opening-beat :is(h1, p) {
    font-weight: 600;
    letter-spacing: -.024em;
  }

  #brand-opening .opening-beat .opening-prose {
    font-size: clamp(25px, 6.8vw, 32px);
    line-height: 1.25;
    letter-spacing: -.012em;
  }

  #brand-opening .opening-beat .opening-statement { font-size: clamp(33px, 8.8vw, 46px); }
  #brand-opening :is(.opening-actions :is(a, button), .opening-tilt) { font-size: 13px; font-weight: 650; }
  #brand-opening .opening-tilt { padding-inline: 6px 10px; }

  #experience :is(.cta, .journey-nav button, .stops a),
  #brand-ending :is(.tour-navigation button, .tour-stops a),
  body .localized-gallery-header .header-actions :is(button, a),
  #experience #scene-description > p {
    color: #fff4e4;
    font-size: max(14px, .875rem);
    font-weight: 600;
    text-shadow: 0 1px 5px #100a06;
  }

  #hair-gallery[open][data-material][data-browsing="true"] .hair-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  #hair-gallery[open][data-material][data-browsing="true"] .hair-filters .mineral-choice {
    width: 100%;
    min-width: 0;
    padding-inline: clamp(7px, 2.4vw, 12px);
  }

  #hair-gallery[open][data-material][data-browsing="true"] .hair-filters .mineral-choice[data-hair-filter="all"] {
    grid-column: 1 / -1;
    min-height: 105px;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    padding: 9px 12px;
  }

  #hair-gallery[open][data-material][data-browsing="true"] .mineral-choice-name {
    color: #fff7e9;
    font-size: 15px;
    font-weight: 650;
  }

  #hair-gallery[open][data-material][data-browsing="true"] .mineral-choice[data-hair-filter="all"] .mineral-choice-name {
    font-size: 18px;
  }

  #hair-gallery .catalogue-utility-r29 button,
  #hair-gallery .prepared-caption .prepared-open,
  #hair-gallery .piece-specs dt,
  #hair-gallery .piece-collection,
  #hair-gallery .piece-consult-note,
  #hair-gallery .piece-disclosure summary,
  #hair-gallery .piece-back,
  #photo-viewer .photo-viewer-header button,
  #photo-viewer :is(.photo-viewer-status, .photo-viewer-photo-position, .photo-viewer-piece-position) {
    font-size: 14px;
    font-weight: 600;
  }

  #hair-gallery .prepared-caption :is(.prepared-meta, .prepared-specs, p) {
    font-size: 13px;
    line-height: 1.45;
  }

  #hair-gallery .polaroid-studio[data-varal],
  #hair-gallery .polaroid-studio[data-varal][data-short="true"] {
    --varal-card: clamp(155px, 55vw, 222px);
    --varal-gap: 17px;
  }

  #hair-gallery [data-varal] .varal-heading { min-height: 57px; padding: 5px 8px 5px 13px; gap: 3px; }
  #hair-gallery [data-varal] .varal-heading h3 { font-size: clamp(28px, 8vw, 36px); }
  #hair-gallery [data-varal] .varal-tools { gap: 0; }
  #hair-gallery [data-varal] .varal-tools button { padding-inline: 5px; }
  #hair-gallery [data-varal] .varal-play span { display: none; }
  #hair-gallery [data-varal] .varal-footer { justify-content: space-between; padding: 4px 13px; }
  #hair-gallery [data-varal] .free-caption span,
  #hair-gallery [data-varal] #varal-help-v82 { font-size: 13px; }
  #hair-gallery [data-varal] .studio-grid { font-size: 14px; }
  #hair-gallery [data-varal] .varal-track { padding-block: 35px 20px; }
  #hair-gallery [data-varal] .varal-window::before,
  #hair-gallery [data-varal] .varal-window::after { top: 23px; }

}

@media (max-height: 500px) and (orientation: landscape) {
  #brand-opening .opening-beat .opening-prose { font-size: clamp(21px, 5.7dvh, 27px); }
}

/* Leave room for the full diagonal on narrow screens. */
@media (max-width: 600px), (pointer: coarse) and (max-width: 900px) {
  body #hair-gallery[open][data-material][data-browsing="true"] { display: block; }

  body #hair-gallery[open][data-material][data-browsing="true"] .vitrine-heading { display: contents; }

  body #hair-gallery[open][data-material][data-browsing="true"] .vitrine-heading > .dialog-top {
    position: sticky;
    top: 0;
    z-index: 12;
    min-height: 56px;
    margin: 0;
    padding: 0 56px 0 10px;
    background: var(--reading-paper) url('media/cotton-paper-v50.png') center / 640px;
  }

  body #hair-gallery[data-display-view="catalogue"] .dialog-top #close-hair { top: 6px; right: 6px; }

  body #hair-gallery[open][data-material][data-browsing="true"] .hair-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 4px 10px 12px;
    background: var(--reading-paper) url('media/cotton-paper-v50.png') center / 640px;
  }

  body #hair-gallery[open][data-material="all"][data-browsing="true"] .hair-filters .mineral-choice[data-hair-filter="all"] {
    min-block-size: clamp(170px, min(94vw, 46svh), 390px);
    padding: 12px 14px;
  }

  #hair-gallery .mineral-choice[data-hair-filter="all"]::after {
    background: linear-gradient(0deg, #17110fa6, #17110f22 22%, transparent 44%);
  }
}

@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (max-width: 900px) {
  body #hair-gallery[open][data-material="all"][data-browsing="true"] .hair-filters {
    grid-template-columns: min(44%, 300px) minmax(0, 1fr);
  }

  body #hair-gallery[open][data-material="all"][data-browsing="true"] .hair-filters .mineral-choice[data-hair-filter="all"] {
    grid-column: 1;
    grid-row: 1 / span 3;
    min-block-size: min(55svh, 220px);
  }

  body #hair-gallery[open][data-material="all"][data-browsing="true"] .hair-filters .mineral-choice:not([data-hair-filter="all"]) {
    grid-column: 2;
  }
}