@font-face {
  font-family: 'Sentient Extralight Italic';
  src: url('https://s1.thcdn.com/fe/fonts/espa/Sentient-ExtralightItalic.woff');
}

@font-face {
  font-family: 'Sentient Extralight';
  src: url('https://s1.thcdn.com/fe/fonts/espa/Sentient-Extralight.woff');
}

@font-face {
  font-family: 'Switzer Light';
  src: url('https://s1.thcdn.com/fe/fonts/espa/Switzer-Light.woff');
}

[data-theme='espaskincare'] nav#site-header-nav .nav-highlight > .nav-controls > a > p {
  font-weight: 700;
  color: #e25334;
}

[data-theme='espaskincare'] .strip-banner.stripBanner {
  color: #000000;
  background-color: #f5ecd8;

  span {
    color: #000000;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.4px;
    background-color: #f5ecd8;
  }
}

[data-theme='espaskincare'] .footer-style {
  background: #f5ecd8;
}

[data-theme='espaskincare'] #frequently-bought-together .container-gradient {
  background: linear-gradient(rgb(255, 255, 255) 50%, #f5ecd8 50%);
}

[data-theme='espaskincare'] .override-bg {
  background: #f5ecd8;
}

[data-theme='espaskincare'] .usp-banner {
  background-color: #f2f2f2;
}

[data-theme='espaskincare'] .override-border {
  border: none;
}

[data-theme='espaskincare'] .footer-item-title-style {
  font-family: 'Switzer Light';
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
}

[data-theme='espaskincare'] #add-both-to-basket {
  text-transform: none;
}

[data-theme='espaskincare'] .strip-banner.stripBanner {
  span {
    text-transform: none;
  }
}

[data-theme='espaskincare'] .footer-iconPlus {
  fill: #121212;
}

[data-theme='espaskincare'] .choices-preview {
  justify-content: center;
}

[data-theme='espaskincare'] atbo-quantity-selector {
  margin-left: auto;
  margin-right: auto;
}

symbol#basket-plus > rect {
  fill: #1e1e1e;
}

/* 1:1 assets — square desktop gallery tiles so the imagery fills the frame
   instead of letterboxing in the default 3:4 slide. Mobile keeps the fixed
   carousel height. */
@media (min-width: 1024px) {
  [data-theme='espaskincare'] .pdp-v2-slide {
    aspect-ratio: 1 / 1;
  }
}

[data-theme='espaskincare'] .pdp-v2-slide,
[data-theme='espaskincare'] .pdp-v2-fbt-image,
[data-theme='espaskincare'] .pdp-v2-fbt-carousel,
[data-theme='espaskincare'] .pdp-v2-fbt-slide,
[data-theme='espaskincare'] .pdp-v2-visual-swatch-carousel,
[data-theme='espaskincare'] .pdp-v2-visual-swatch-slide {
  background-color: #ffffff;
}

[data-theme='espaskincare'] .pdp-v2-fbt-image {
  aspect-ratio: 1 / 1;
}

/* Specificity here overrides ModernImage's appended `object-cover` — this
   tenant's 1:1 assets letterbox in the sheet's portrait slide instead of
   being side-cropped, pinned to the top so the placeholder band sits below
   the image, not around it. Tenant-scoped on purpose: LF UK keeps the
   cover crop. */
[data-theme='espaskincare'] .pdp-v2-visual-swatch-carousel .pdp-v2-visual-swatch-slide img {
  object-fit: contain;
  object-position: top;
}

/* Centre the pips in that band, both axes. The 1:1 image ends 100cqw from the
   top, so the band spans 100cqw to 100cqh and its midpoint sits
   50cqh - 50cqw from the bottom; 5px is half the pip row's height. The 0.5rem
   floor keeps the pips on-screen if the carousel ever renders wider than tall
   (height-constrained image, no band). */
[data-theme='espaskincare'] .pdp-v2-visual-swatch-carousel {
  container-type: size;
}

[data-theme='espaskincare'] #pdp-v2-visual-swatch-carousel-pips {
  left: 50%;
  transform: translateX(-50%);
  bottom: max(calc(50cqh - 50cqw - 5px), 0.5rem);
}