/* Final cascade lock for the approved desktop, tablet, and mobile states. */

:root {
  --gala-glass: rgb(241 241 241 / 60%);
  --gala-glass-blur: 5.411px;
  --gala-mobile-gap: 2px;
  --gala-mobile-side: 11px;
  --gala-mobile-width: calc(100vw - (var(--gala-mobile-side) * 2));
}

/* Prevent iOS Safari from inflating marquee copy independently of the UI. */
.refinement-marquee,
.apply-title-marquee,
.apply-exit-marquee,
.gala-marquee-track,
.gala-marquee-group,
.gala-marquee-group > span {
  font-size: var(--gala-ui-size, 9px) !important;
  line-height: 1 !important;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body.nav-option-2 {
  --gala-info-panel-max: min(466px, calc(100dvh - 118px));
}

.info-content,
.home-is-hidden .info-content {
  padding: 26px 34px 22px 31px;
}

.info-copy {
  display: grid;
  gap: 10px;
  line-height: 11px;
  white-space: normal;
}

.info-copy p {
  margin-bottom: 0;
  white-space: pre-wrap;
}

.apply-page .apply-check input,
.apply-page .apply-online-selector input,
.apply-page .apply-choice input,
.apply-page .apply-chip-row input,
.apply-page .apply-size-options input {
  appearance: none;
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 0;
  background: #f1f1f1;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
}

/* V4 exit confirmation: exact compact desktop composition from Figma 32:9417. */
.apply-page .apply-exit {
  position: fixed !important;
  top: 18px !important;
  left: 32px !important;
  right: auto !important;
  bottom: auto !important;
  display: none !important;
  width: 387px !important;
  max-width: calc(100vw - 64px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  color: #f1f1f1 !important;
  z-index: 40 !important;
}

.apply-page .apply-exit.is-visible {
  display: block !important;
}

.apply-page .apply-exit-dialog {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 40px 20px !important;
  background: #0c0c0c !important;
}

.apply-page .apply-exit-message {
  display: block !important;
  width: 298.766px !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #f1f1f1 !important;
  font: 400 9px/normal "Suisse Int'l", Arial, sans-serif !important;
  letter-spacing: 1.08px !important;
  text-transform: uppercase !important;
}

.apply-page .apply-exit-message p {
  margin: 0 !important;
}

.apply-page .apply-exit-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  gap: 0 !important;
}

.apply-page .apply-exit-actions button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 127.48px !important;
  width: 127.48px !important;
  height: 31.433px !important;
  min-height: 31.433px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f1f1f1 !important;
  color: #0c0c0c !important;
  font: 400 9px/normal "Suisse Int'l", Arial, sans-serif !important;
  letter-spacing: 1.08px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.apply-page .apply-exit-actions button:hover,
.apply-page .apply-exit-actions button:focus-visible {
  background: #fff !important;
  color: #0c0c0c !important;
}

.apply-page .apply-exit-marquee {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 31.43px !important;
  margin-top: 1.77px !important;
  border: 0 !important;
  background: #0c0c0c !important;
}

.apply-page .apply-exit-marquee-track {
  height: 31.43px !important;
  padding: 7.963px 0 !important;
  font: 400 9px/normal "Suisse Int'l", Arial, sans-serif !important;
  letter-spacing: 1.08px !important;
}

.apply-page.exit-confirmation-is-visible .apply-panel-main,
.apply-page.exit-confirmation-is-visible .apply-exit-trigger {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 701px) {
  .refinement-thumb {
    background-color: var(--gala-glass);
  }

  .refinement-thumb:not(.is-active):hover,
  .refinement-thumb:focus-visible {
    background-color: var(--gala-glass);
  }

  .refinement-thumb img {
    visibility: visible;
    mix-blend-mode: multiply;
  }
}

@media (max-width: 700px) {
  .apply-page .apply-exit {
    top: 11px !important;
    left: 11px !important;
    width: calc(100vw - 22px) !important;
    max-width: none !important;
  }

  .apply-page .apply-exit-dialog {
    padding: 32px 20px !important;
  }

  .apply-page .apply-exit-actions {
    gap: 12px !important;
  }

  .apply-page .apply-exit-actions button {
    flex: 1 1 0 !important;
    width: auto !important;
  }
}

.apply-page .apply-check input,
.apply-page .apply-size-options input {
  color: #f1f1f1;
}

.apply-page .apply-online-selector input,
.apply-page .apply-choice input,
.apply-page .apply-chip-row input {
  color: #0c0c0c;
}

.apply-page .apply-check input:checked,
.apply-page .apply-online-selector input:checked,
.apply-page .apply-choice input:checked,
.apply-page .apply-chip-row input:checked,
.apply-page .apply-size-options input:checked {
  border-width: 1px;
  background: linear-gradient(#0c0c0c, #0c0c0c) center / 4px 4px no-repeat #f1f1f1;
  box-shadow: none;
}

.apply-page .apply-exit {
  position: fixed;
  inset: 18px 26px auto;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 2px;
  width: auto;
  max-height: calc(100vh - 36px);
  padding: 0;
  color: #f1f1f1;
  background: transparent;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.apply-page .apply-exit.is-visible {
  display: flex;
}

.apply-page .apply-exit-actions {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.apply-page .apply-exit-actions button {
  width: min(394px, 35%);
  height: 64px;
}

.apply-piece-notes {
  min-height: 53px;
  height: 53px;
  resize: none;
}

.apply-exit-trigger {
  display: grid;
  width: max-content;
  justify-items: start;
  text-align: left;
}

.apply-exit-trigger .apply-exit-default {
  grid-area: 1 / 1;
  opacity: 1;
  transition: opacity 180ms ease;
}

.apply-exit-trigger .apply-exit-hover {
  position: absolute;
  top: 50%;
  right: 0;
  width: max-content;
  transform: translateY(-50%);
  text-align: left;
  opacity: 0;
  transition: opacity 180ms ease;
}

.apply-exit-trigger:hover .apply-exit-default,
.apply-exit-trigger:focus-visible .apply-exit-default {
  opacity: 0;
}

.apply-exit-trigger:hover .apply-exit-hover,
.apply-exit-trigger:focus-visible .apply-exit-hover {
  opacity: 1;
}

@media (min-width: 701px) and (max-width: 1024px) {
  :root {
    --gala-nav-width: 387px;
    --gala-cell-height: 31.43px;
  }

  body.nav-option-2 {
    --gala-info-panel-max: min(466px, calc(100dvh - 118px));
  }

  .refinement-main,
  .info-content,
  .home-is-hidden .info-content,
  .apply-panel {
    width: 387px;
    max-width: 387px;
  }

  .refinement-main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 31.43px 31.43px;
    gap: 2px;
  }

  .info-content,
  .home-is-hidden .info-content {
    top: calc(17px + 31.43px + 2px);
    left: 29px;
    box-sizing: border-box;
    height: auto;
    max-height: var(--gala-info-panel-max);
    overflow-y: auto;
  }

  .apply-chrome,
  .apply-shell,
  .apply-title-marquee {
    width: 100%;
    max-width: 100%;
  }

  .apply-page .apply-exit {
    inset: 17px 29px auto;
  }
}

@media (max-width: 700px) {
  .refinement-nav {
    inset: 14px var(--gala-mobile-side) auto;
    width: var(--gala-mobile-width);
  }

  .refinement-main {
    width: 100%;
    gap: var(--gala-mobile-gap);
    grid-template-rows: 31.43px 31.43px;
  }

  .refinement-logo,
  .refinement-action,
  .refinement-marquee,
  .site-footer .sidebar-toggle,
  .site-footer .footer-instagram,
  .site-footer .footer-faq,
  .site-footer .footer-legal {
    background: var(--gala-glass);
    backdrop-filter: blur(var(--gala-glass-blur));
    -webkit-backdrop-filter: blur(var(--gala-glass-blur));
  }

  .refinement-logo,
  .refinement-action,
  .refinement-marquee {
    height: 31.43px;
  }

  .refinement-thumbs {
    position: fixed;
    right: auto;
    bottom: calc(14px + 31.43px + var(--gala-mobile-gap));
    left: var(--gala-mobile-side);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 31.43px;
    gap: var(--gala-mobile-gap);
    width: var(--gala-mobile-width);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .refinement-thumb {
    position: relative;
    display: grid;
    place-items: center;
    padding: 2.6px;
    border-radius: 0;
    background-color: var(--gala-glass);
    backdrop-filter: blur(var(--gala-glass-blur));
    -webkit-backdrop-filter: blur(var(--gala-glass-blur));
    isolation: auto;
  }

  .refinement-thumb:not(.is-active):hover,
  .refinement-thumb:focus-visible {
    background-color: var(--gala-glass);
  }

  .refinement-thumb img {
    position: relative;
    width: 100%;
    height: 26.23px;
    object-fit: contain;
    visibility: visible;
    mix-blend-mode: multiply;
  }

  .site-footer {
    inset: auto var(--gala-mobile-side) 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 31.43px;
    gap: var(--gala-mobile-gap);
    width: var(--gala-mobile-width);
  }

  .site-footer .sidebar-toggle,
  .site-footer .footer-instagram,
  .site-footer .footer-faq,
  .site-footer .footer-legal {
    display: grid;
    width: 100%;
    height: 31.43px;
    place-items: center;
    padding: 0;
    text-align: center;
  }

  .site-footer .sidebar-toggle {
    position: static;
    grid-column: 1;
  }

  .site-footer .sidebar-toggle.text-swap {
    justify-items: center;
    text-align: center;
  }

  .site-footer .sidebar-toggle.text-swap > span {
    justify-self: center;
    text-align: center;
  }

  .site-footer .footer-instagram.text-swap > span,
  .site-footer .footer-faq.text-swap > span,
  .site-footer .footer-legal.text-swap > span {
    position: static;
    width: auto;
    justify-self: center;
    text-align: center;
  }

  .site-footer .footer-legal.text-swap,
  .site-footer .footer-faq.text-swap,
  .site-footer .footer-faq.text-swap:hover,
  .site-footer .footer-faq.text-swap:focus-visible,
  .site-footer .footer-legal.text-swap:hover,
  .site-footer .footer-legal.text-swap:focus-visible {
    width: 100%;
  }

  .footer-links {
    display: contents;
  }

  .footer-instagram {
    grid-column: 2;
  }

  .footer-links > .footer-legal {
    grid-column: 4;
    grid-row: 1;
    display: grid;
  }

  .footer-links > .footer-faq {
    grid-column: 3;
    grid-row: 1;
  }

  .apply-is-open .site-footer .footer-instagram,
  .apply-is-open .site-footer .footer-legal {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .footer-credit,
  .footer-links > span[aria-hidden="true"] {
    display: none;
  }

  .refinement-marquee {
    font-size: var(--gala-ui-size);
  }

  body.nav-option-2 {
    --gala-info-panel-max: min(466px, calc(100dvh - 94.866px));
  }

  .info-content {
    top: calc(14px + 31.433px + 2px);
    left: 11px;
    box-sizing: border-box;
    width: calc(100vw - 22px);
    height: auto;
    max-height: var(--gala-info-panel-max);
    overflow-y: auto;
  }

  .home-is-hidden .info-content {
    top: calc(14px + 31.433px + var(--gala-mobile-gap));
    left: var(--gala-mobile-side);
    width: var(--gala-mobile-width);
  }

  .info-is-open .refinement-main,
  .info-is-open .refinement-marquee,
  .home-is-hidden.info-is-open .apply-title-marquee {
    width: 100%;
    max-width: 100%;
  }

  .apply-panel {
    top: 14px;
    left: 11px;
    width: calc(100vw - 22px);
  }

  .apply-chrome,
  .apply-shell {
    width: 100%;
  }

  .apply-shell {
    max-height: calc(100vh - 116px);
    padding: 40px 20px;
  }

  .apply-exit-trigger {
    position: static;
    display: grid;
    width: 100%;
    margin: 18.475px 0 0;
    transform: none;
    justify-items: center;
    white-space: nowrap;
    text-align: center;
  }

  .apply-exit-trigger .apply-exit-hover {
    display: none !important;
  }

  .apply-exit-trigger:hover .apply-exit-default,
  .apply-exit-trigger:focus-visible .apply-exit-default {
    opacity: 1;
  }

  .apply-member-signin {
    right: auto;
    bottom: 14px;
    left: var(--gala-mobile-side);
    display: grid;
    width: calc((var(--gala-mobile-width) - (2 * var(--gala-mobile-gap))) / 3);
    height: 31.43px;
    place-items: center;
    padding: 0;
    text-align: center;
  }

  .apply-member-default {
    display: none;
  }

  .apply-member-hover {
    position: static;
    opacity: 1;
  }

  .apply-page .apply-exit {
    inset: 14px 11px auto;
    width: auto;
    max-height: calc(100vh - 28px);
  }

  .apply-page .apply-exit-actions {
    gap: 0;
  }

  .apply-page .apply-exit-actions button {
    width: 127.48px;
    height: 31.433px;
  }
}