@font-face {
  font-display: swap;
  font-family: 'Metropolis Regular';
  font-weight: 325;
  src:
    url('https://s1.thcdn.com/fe/fonts/christopherobin/Metropolis-Regular.woff2'),
    url('https://s1.thcdn.com/fe/fonts/christopherobin/Metropolis-Regular.woff');
}

@font-face {
  font-display: swap;
  font-family: 'Metropolis Extra Light';
  font-weight: 300;
  src:
    url('https://s1.thcdn.com/fe/fonts/christopherobin/Metropolis-ExtraLight.woff2'),
    url('https://s1.thcdn.com/fe/fonts/christopherobin/Metropolis-ExtraLight.woff');
}

@font-face {
  font-display: swap;
  font-family: 'Metropolis Semi-Bold';
  font-weight: 350;
  src:
    url('https://s1.thcdn.com/fe/fonts/christopherobin/Metropolis-SemiBold.woff2'),
    url('https://s1.thcdn.com/fe/fonts/christopherobin/Metropolis-SemiBold.woff');
}

@font-face {
  font-display: swap;
  font-family: 'Dapifer Book';
  src:
    url(//static.thcdn.com/fe/fonts/christopherobin/dapifer-book.woff)
      format('woff'),
    url(//static.thcdn.com/fe/fonts/christopherobin/dapifer-book.woff2)
      format('woff2');
}

[data-theme='christopherobin'] .strip-banner.stripBanner {
  background-color: #d34b3a;

  span {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.4px;
  }
  &:hover {
    color: #952434;
    background-color: #ffffff;
  }
  &:focus {
    background-color: #952434;
    text-decoration: underline;
    color: inherit;
  }
}

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

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

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

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

/* 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='christopherobin'] .pdp-v2-slide {
    aspect-ratio: 1 / 1;
  }
}

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

[data-theme='christopherobin'] .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='christopherobin'] .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='christopherobin'] .pdp-v2-visual-swatch-carousel {
  container-type: size;
}

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