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

[data-theme='dermstore'] #site-header-nav {
  background-color: #222;
}

@media (max-width: 1500px) {
  [data-theme='dermstore'] #site-header-nav .nav-controls p {
    padding-left: 10px;
    padding-right: 10px;
    letter-spacing: 0.4px;
    white-space: nowrap;
  }
}

[data-theme='dermstore'] .nav-controls {
  color: #fff;
  text-transform: uppercase;
}

[data-theme='dermstore'] .nav-controls:hover,
[data-theme='dermstore'] .nav-controls.active {
  background-color: #fff;
  color: #000;
}

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

[data-theme='dermstore'] #layout-body .strip-banner {
  background-color: #ccc;
  color: #000;
  text-transform: none;
  transition:
    background-color 0.3s,
    color 0.3s;
}

[data-theme='dermstore'] #layout-body .strip-banner:hover {
  background-color: #e6e6e6;
}

[data-theme='dermstore'] #layout-body .strip-banner:focus {
  background-color: #000;
  color: #fff;
}

[data-theme='dermstore'] .nav-controls p,
[data-theme='dermstore'] .navigation-container .container>.sub-nav-item>a,
[data-theme='dermstore'] .strip-banner span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04rem;
}

[data-theme='dermstore'] .custom-pap {
  border-width: 1px;
}

.brand-logo-carousel-item {
  margin: 0 8px;
}

[data-theme='dermstore'] .customWidgetMargin {
  margin-bottom: 32px;
}

[data-theme='dermstore'] .title-container {
  margin-bottom: 1.5rem;
}

[data-theme='dermstore'] .heading {
  font-family: 'Libre Bodoni';
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.5px;
  text-transform: capitalize;
  margin-bottom: 24px;
}

[data-theme='dermstore'] #product-gallery div.force-aspect {
  aspect-ratio: auto;
}

[data-theme='dermstore'] #product-gallery img {
  object-fit: contain;
  width: auto;
}

[data-theme='dermstore'] #product-gallery .carousel {
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

[data-theme='dermstore'] .global-primary-banner .banner-text {
  width: 100%;
}

@media (min-width: 641px) {
  [data-theme='dermstore'] .global-primary-banner .banner-text {
    align-items: center;
    padding: 3rem;
    width: 50%;
  }

  [data-theme='dermstore'] .global-primary-banner-custom-padding {
    min-width: 265px;
  }

  [data-theme='dermstore'] #basket-heading {
    font-size: 28px;
    line-height: 38px;
  }
}

[data-theme='dermstore'] .basket-v2-bg {
  background-color: #FBF8F0;
}

[data-theme='dermstore'] .inline-ratings,
[data-theme='dermstore'] #ratingSummary {
  min-height: 20px;
}

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

[data-theme='dermstore'] #onetrust-footer,
[data-theme='dermstore'] #onetrust-footer-two {
  text-transform: uppercase;
}

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

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

[data-theme='dermstore'] .landscape-product-item {
  .bv_main_container.bv_inline_rating_container_center {
    justify-content: left !important;
  }
}

/* Loyalty sidesheet: --loyalty-brand drives redeem cards; summary overrides below */
[data-theme='dermstore'] {
  --loyalty-brand: #000;
  --loyalty-summary-bg: #000;
  --loyalty-summary-text: #fff;
  --loyalty-points-bg: #fff;
  --loyalty-points-border: #e5e7eb;
  --loyalty-indicator-size: 0.75rem;
}

[data-theme='dermstore'] [data-loyalty-optin-button] {
  background-color: var(--loyalty-brand, #000);
}



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

/* 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: other tenants (LF)
   keep the cover crop. */
[data-theme='dermstore'] .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='dermstore'] .pdp-v2-visual-swatch-carousel {
  container-type: size;
}

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

/* 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 and the top-align KV treatment. */
@media (min-width: 1024px) {
  [data-theme='dermstore'] .pdp-v2-slide {
    aspect-ratio: 1 / 1;
  }
}

[data-theme='dermstore'] .pdp-v2-description-band {
  background-color: #f3f3f3;
}

[data-theme='dermstore'] .pdp-v2-fbt {
  background-color: #f2f2f2;
}

[data-theme='dermstore'] .pdp-v2-fbt>h2 {
  font-family: 'Libre Bodoni';
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  color: #000000;
  text-transform: capitalize;
  letter-spacing: normal;
}

[data-theme='dermstore'] .pdp-v2-pap-banner {
  width: fit-content;
  font-weight: 500;
}

[data-theme='dermstore'] .pdp-v2-description-heading {
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
  color: #000000;
}

[data-theme='dermstore'] .pdp-v2-description .accordion-item-title {
  font-size: 18px;
}

/* Underline the BV 'Write a review' / 'Ask a question' CTAs so they read as
   clickable. BV CleanSlate rules are all !important, hence the id + !important. */
[data-theme='dermstore'] .pdp-v2-price-reviews-grid #ratingSummary .bv_button_buttonMinimalist {
  text-decoration: underline !important;
}

[data-theme='dermstore'] #pdp-v2-availability-message {
  color: #6b7280;
}

[data-theme='dermstore'] #sticky-atb-back-to-top {
  font-size: 14px;
  line-height: 20px;
}

[data-theme='dermstore'] .pdp-v2-brand .override-pdp-brand.title-font {
  font-family: 'Libre Bodoni';
  color: #000000;
}

[data-theme='dermstore'] .pdp-v2-brand .override-pdp-brand {
  text-transform: none;
}

[data-theme='dermstore'] .pdp-v2-title #product-title {
  font-family: 'Manrope';
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #000000;
}

[data-theme='dermstore'] #pdp-v2-sticky-right #product-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #000000;
}

[data-theme='dermstore'] .pdp-v2-price .pdp-v2-current-price {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  color: #000000;
}

[data-theme='dermstore'] .pdp-v2-price .pdp-v2-current-price.pdp-v2-price-discounted {
  color: hsl(var(--sale, 0 62.8% 30.6%));
}

[data-theme='dermstore'] .pdp-v2-price .pdp-v2-rrp {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6c7280;
}

[data-theme='dermstore'] .pdp-v2-price .pdp-v2-discount {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #000000;
}

@media (min-width: 1024px) {
  [data-theme='dermstore'] .pdp-v2-title #product-title {
    font-size: 20px;
    line-height: 28px;
  }

  [data-theme='dermstore'] #pdp-v2-sticky-right #product-subtitle {
    font-size: 16px;
    line-height: 24px;
  }

  [data-theme='dermstore'] .pdp-v2-price .pdp-v2-rrp,
  [data-theme='dermstore'] .pdp-v2-price .pdp-v2-discount {
    font-size: 16px;
    line-height: 24px;
  }
}