.footer__custom-text-title {
  padding-block-end: 15px;
  font-weight: bold;
}

@media (max-width: 959px) {
  .footer__custom-text-title {
    padding-block-start: 15px;
    font-size: 16px;
  }
}
.footer__email-subscribe-title {
  font-weight: bold;
}
.footer__email-subscribe .field {
  margin-block-end: 0;
}
.footer__email-subscribe form {
  width: 100%;
}
.footer .tips-card {
  margin-block: 10px;
}
.footer__image img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
.footer__localization-form form {
  display: contents;
}
.footer__localization-form form select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 959px) {
  .footer__localization-form .localization__selector {
    width: 100%;
  }
}
.footer__navigation {
  position: relative;
}
.footer__navigation-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
}
.footer__navigation-title .icon__arrow,
.footer__navigation-title .icon__minus {
  display: none;
}
@media (max-width: 959px) {
  .footer__navigation-title {
    padding-block-start: 15px;
  }

  .footer__navigation-title .icon__arrow {
    display: inline;
  }

  .footer__navigation-title .icon__minus {
    display: none;
  }
}
.footer__navigation-item {
  padding-block-start: 4px;
}
.footer__navigation-item a {
  display: block;
}
.footer__navigation-item--active a {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.footer__navigation-item--active a:hover {
  text-decoration: underline;
}
@media (max-width: 959px) {
  .footer__navigation-content {
    height: 0;
    padding-block-end: 15px;
    overflow: hidden;
    opacity: 0;
  }
}
.footer__navigation::after {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  display: none;
  width: 100%;
  height: 1px;
  content: "";
  background-color: rgba(var(--color-text), 0.1);
}
@media (max-width: 959px) {
  .footer__navigation::after {
    display: block;
  }
}
@media (max-width: 959px) {
  .footer__navigation[open] .footer__navigation-title .icon__arrow {
    display: none;
  }

  .footer__navigation[open] .footer__navigation-title .icon__minus {
    display: inline;
  }
}
.footer__navigation[open] .footer__navigation-content {
  height: auto;
  opacity: 1;
}
.footer__payment-icons > svg {
  width: auto;
  height: 22px;
}
.footer__social-media-title {
  font-weight: bold;
}
.footer__social-media-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.footer__social-media-content li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: background-color 200ms ease;
}
.footer__social-media-content li a:hover {
  background-color: #ffffff;
}
.footer__social-media-content svg {
  width: 24px;
  height: 24px;
}
.footer {
  background-color: rgb(var(--color-background));
}

/* Queen Cosmetics footer — match live site */

/* About + social band sits on a light-gray background, distinct from the white menu band */
.footer__custom-text,
.footer__social-media {
  text-align: center;
}

.footer__custom-text-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* About body copy: larger, roomier line-height (live = 16px / 1.7) */
.footer__custom-text-content,
.footer__custom-text-content p {
  font-size: 16px;
  line-height: 1.7;
}
/* Space between the two about paragraphs */
.footer__custom-text-content p + p {
  margin-block-start: 1.2em;
}

/* Nav columns centered, sitting closer together */
.footer .footer__navigation,
.footer .footer__navigation-content {
  text-align: center;
}
.footer .footer__navigation-title {
  justify-content: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  font-family: var(--sort-title-font);
}
.footer .footer__navigation-item a {
  text-align: center;
}

/* Footer nav links: Montserrat, uppercase, dark gray (not purple) */
.footer .footer__navigation-item a {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  transition: opacity 200ms ease;
  font-family: var(--sort-body-font);
}

.footer .footer__navigation-item a:hover {
  color: #333333;
  opacity: 0.7;
  text-decoration: none;
}

/* Light-gray band behind the ABOUT + social blocks (full-bleed, seamless) */
.footer__group:has(.footer__custom-text),
.footer__group:has(.footer__social-media) {
  position: relative;
  z-index: 0;
}
/* Keep the About text above the gray bands (the next group's band bleeds
   -40px upward, which was painting over the last line on mobile). */
.footer__group:has(.footer__custom-text) .footer__custom-text,
.footer__group:has(.footer__social-media) .footer__social-media {
  position: relative;
  z-index: 1;
}
/* Room below the About copy so the last line clears the band overlap. */
@media (max-width: 959px) {
  .footer__group:has(.footer__custom-text) {
    padding-block-end: 16px;
  }
}

@media (max-width: 767px) {
  .footer .footer__navigation,
  .footer .footer__navigation-content {
    text-align: left;
  }
  .footer .footer__navigation-title {
    justify-content: left;
    font-size: 13px;
  }
  .footer .footer__navigation-item a {
    text-align: left;
  }
}

.footer__group:has(.footer__custom-text)::before,
.footer__group:has(.footer__social-media)::before {
  content: "";
  position: absolute;
  /* Full-bleed to the viewport edges via symmetric vw insets. 50vw includes the
     scrollbar width, so this can overshoot by the scrollbar; the body's
     `overflow-x: clip` safety net absorbs that overshoot without a scrollbar. */
  inset-inline: calc(50% - 50vw);
  width: auto;
  background-color: #f2f2f2;
  z-index: -1;
}
/* About group: gray starts at the group's padding box (40px above the heading)
   and bleeds down through the gap to the social group. Top gray padding (40px)
   then matches the social group's bottom gray padding (40px). */
.footer__group:has(.footer__custom-text)::before {
  inset-block-start: 0;
  inset-block-end: -40px;
}

@media (max-width: 767px) {
  .footer__group:has(.footer__custom-text)::before, .footer__group:has(.footer__social-media)::before {
    background-color: #fff2f9;
  }
}

.footer__group:has(.footer__social-media) {
  padding-block-end: 40px;
}
.footer__group:has(.footer__social-media)::before {
  inset-block-start: -40px;
  inset-block-end: 0;
}

/* Gray divider above the copyright line */
.footer__copyright {
  position: relative;
  padding-top: 28px;
  margin-top: 8px;
}
.footer__copyright::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--page-padding) * 2);
  height: 1px;
  background-color: #e2e2e2;
}

/* ============================================================
   Queen Cosmetics — footer responsive behaviour
   - No accordion on small screens: menus are always expanded
   - Tablet keeps the two menu columns side by side
   - Social icons stay centered at every width
   ============================================================ */

/* 1) Kill the accordion everywhere — menu content always visible, no toggle. */
@media (max-width: 959px) {
  .footer__navigation-content,
  .footer__navigation[open] .footer__navigation-content {
    height: auto !important;
    overflow: visible;
    opacity: 1 !important;
    padding-block-end: 0;
  }
  /* hide the expand/collapse icons */
  .footer__navigation-title .icon__arrow,
  .footer__navigation-title .icon__minus {
    display: none !important;
  }
  /* the title is no longer a tappable accordion header */
  .footer__navigation-title {
    padding-block-start: 0;
    cursor: default;
  }
  /* remove the per-column divider line used by the accordion layout */
  .footer__navigation::after {
    display: none !important;
  }
}

/* 2) Tablet (600–959px): keep the two menu columns side by side.
   The menus group stacks to a column at ≤959px via the block layout — force
   it back to a centered row on tablet widths. */
@media (min-width: 600px) and (max-width: 959px) {
  .footer__group:has(.footer__navigation) {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    column-gap: 80px;
  }
}

/* 3) Social icons centered at all widths.
   The .footer__social-media wrapper is a flex container that can default to
   flex-start (pushing the icon row left); center it AND its content. */
.footer__social-media,
.footer .footer__social-media {
  justify-content: center !important;
  align-items: center;
  text-align: center;
}
.footer__social-media-content,
.footer .footer__social-media-content {
  justify-content: center !important;
  margin-inline: auto;
}