.dpc-mms-gallery__thumbnails .dpc-carousel-slide.swiper-slide {
  border-radius: 0 !important;
  background: var(--ui-background) !important;
}
.dpc-mms-gallery__container .dpc-mms-slide-count {
  display: none !important;
}
/* Only the thumbnail for the image being shown. The modal strip used to also outline its
   swiper-slide-active, which on a thumbs strip is its scroll position, not the selected
   image, so it lit a second thumbnail once the strip scrolled. The gallery now keeps
   swiper-slide-thumb-active correct in the modal too (US9-1013). */
.dpc-mms-gallery__thumbnails .dpc-carousel-slide.swiper-slide.swiper-slide-thumb-active {
  border-color: var(--text-emphasis) !important;
}
.dpc-mms-gallery__container > .dpc-mms-gallery__media > div[data-analytics-component="atomic-carousel"],
.dpc-mms-gallery__carousel {
  height: auto;
}
.dpc-mms-gallery__thumbnails .dpc-carousel-slide.swiper-slide img {
  padding: 0px !important;
}
.dpc-mms-gallery__container .swiper-pagination {
  margin: 0px;
}
/* Desktop image grid tiles (US9-1013): ramp-800 outline, lifting to ramp-100 on hover
   and keyboard focus. Both gallery classes sit on the container, so this outranks the
   base 8px radius in mixedMediaGallery.scss, which loads after this clientlib. */
.dpc-mms-gallery__container.dpc-mms-gallery--image-grid .dpc-mms-gallery__grid-tile {
  border: 1px solid var(--pdp-color-ramp-800);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}
.dpc-mms-gallery__container.dpc-mms-gallery--image-grid .dpc-mms-gallery__grid-tile:hover,
.dpc-mms-gallery__container.dpc-mms-gallery--image-grid .dpc-mms-gallery__grid-tile:focus-visible {
  border-color: var(--pdp-color-ramp-100);
}
/* Default */
.productdetailv2[class^="dpc-theme-"],
.productdetailv2[class*=" dpc-theme-"],
.productdetailv2 [class^="dpc-theme-"],
.productdetailv2 [class*=" dpc-theme-"] {
  --pdp-color-ramp-50: #B0CBFE;
  --pdp-color-ramp-100: #9FC1FF;
  --pdp-color-ramp-200: #7DACFF;
  --pdp-color-ramp-300: #5A96FF;
  --pdp-color-ramp-400: #337EFF;
  --pdp-color-ramp-450: #1971FF;
  --pdp-color-ramp-500: #1E61E1;
  --pdp-color-ramp-600: #1D42A8;
  --pdp-color-ramp-700: #142671;
  --pdp-color-ramp-800: #080D3F;
  --pdp-color-ramp-900: #010013;
}
/* Filter A: Blue */
.productdetailv2.product-sku-EDRARXD1[class^="dpc-theme-"],
.productdetailv2.product-sku-EDRARXV2P[class^="dpc-theme-"],
.productdetailv2.product-sku-EDRARXD1[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDRARXV2P[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDRARXD1 [class^="dpc-theme-"],
.productdetailv2.product-sku-EDRARXV2P [class^="dpc-theme-"],
.productdetailv2.product-sku-EDRARXD1 [class*=" dpc-theme-"],
.productdetailv2.product-sku-EDRARXV2P [class*=" dpc-theme-"] {
  --pdp-color-ramp-50: #D6E6FF;
  --pdp-color-ramp-100: #ADCCFF;
  --pdp-color-ramp-200: #83B1FF;
  --pdp-color-ramp-300: #5895FF;
  --pdp-color-ramp-400: #2476FF;
  --pdp-color-ramp-450: #0564F2;
  --pdp-color-ramp-500: #005CE2;
  --pdp-color-ramp-600: #0048B5;
  --pdp-color-ramp-700: #00358A;
  --pdp-color-ramp-800: #002361;
  --pdp-color-ramp-900: #00123C;
  --text-base: #ffffff;
  --text-offset: #FAFCFF;
  --text-link-base: #ffffff;
  --ui-border-color: #FAFCFF;
  --text-emphasis: var(--pdp-color-ramp-300);
  --text-link-highlight: var(--pdp-color-ramp-300);
  --ui-background: var(--pdp-color-ramp-900);
  --ui-background-offset: var(--pdp-color-ramp-800);
  --primary-brand-background: var(--pdp-color-ramp-450);
  --primary-brand-background-highlight: var(--pdp-color-ramp-600);
  --primary-brand-border: var(--pdp-color-ramp-450);
  --primary-brand-border-highlight: var(--pdp-color-ramp-600);
  --primary-offset-text: var(--pdp-color-ramp-900);
  --primary-offset-text-highlight: var(--pdp-color-ramp-900);
  --primary-offset-background-highlight: var(--pdp-color-ramp-100);
  --primary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-text-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-brand-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-offset-text-highlight: var(--pdp-color-ramp-100);
  --checkbox-highlight-indicator: var(--pdp-color-ramp-300);
  --radio-filled-icon: var(--pdp-color-ramp-300);
  --radio-highlight-indicator: var(--pdp-color-ramp-300);
  --input-base-input-background: var(--pdp-color-ramp-900);
  --input-disabled-input-background: var(--pdp-color-ramp-900);
  --indicator-brand-color-background-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-border-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-brand-color-border-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-border-highlight: var(--pdp-color-ramp-100);
}
.productdetailv2.product-sku-EDRARXD1[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDRARXV2P[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDRARXD1[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDRARXV2P[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDRARXD1 [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDRARXV2P [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDRARXD1 [class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDRARXV2P [class*=" dpc-theme-"] .dpc-theme-01 {
  --ui-background-offset: var(--pdp-color-ramp-300);
  --text-base: var(--pdp-color-ramp-900);
  --text-link-base: var(--pdp-color-ramp-900);
  --text-link-highlight: var(--pdp-color-ramp-600);
}
/* Filter 1: Purple */
.productdetailv2.product-sku-EDR1RXD1[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR1RXV2P[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR1RXD1[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR1RXV2P[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR1RXD1 [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR1RXV2P [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR1RXD1 [class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR1RXV2P [class*=" dpc-theme-"] {
  --pdp-color-ramp-50: #EBDDFF;
  --pdp-color-ramp-100: #D9BBFF;
  --pdp-color-ramp-200: #C796FF;
  --pdp-color-ramp-300: #B178EE;
  --pdp-color-ramp-400: #985FD3;
  --pdp-color-ramp-450: #894FC2;
  --pdp-color-ramp-500: #8046B8;
  --pdp-color-ramp-600: #692D9E;
  --pdp-color-ramp-700: #530D85;
  --pdp-color-ramp-800: #3A0061;
  --pdp-color-ramp-900: #21003B;
  --text-base: #ffffff;
  --text-offset: #FAFCFF;
  --text-link-base: #ffffff;
  --ui-border-color: #FAFCFF;
  --text-emphasis: var(--pdp-color-ramp-300);
  --text-link-highlight: var(--pdp-color-ramp-300);
  --ui-background: var(--pdp-color-ramp-900);
  --ui-background-offset: var(--pdp-color-ramp-800);
  --primary-brand-background: var(--pdp-color-ramp-450);
  --primary-brand-background-highlight: var(--pdp-color-ramp-600);
  --primary-brand-border: var(--pdp-color-ramp-450);
  --primary-brand-border-highlight: var(--pdp-color-ramp-600);
  --primary-offset-text: var(--pdp-color-ramp-900);
  --primary-offset-text-highlight: var(--pdp-color-ramp-900);
  --primary-offset-background-highlight: var(--pdp-color-ramp-100);
  --primary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-text-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-brand-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-offset-text-highlight: var(--pdp-color-ramp-100);
  --checkbox-highlight-indicator: var(--pdp-color-ramp-300);
  --radio-filled-icon: var(--pdp-color-ramp-300);
  --radio-highlight-indicator: var(--pdp-color-ramp-300);
  --input-base-input-background: var(--pdp-color-ramp-900);
  --input-disabled-input-background: var(--pdp-color-ramp-900);
  --indicator-brand-color-background-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-border-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-brand-color-border-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-border-highlight: var(--pdp-color-ramp-100);
}
.productdetailv2.product-sku-EDR1RXD1[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR1RXV2P[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR1RXD1[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR1RXV2P[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR1RXD1 [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR1RXV2P [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR1RXD1 [class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR1RXV2P [class*=" dpc-theme-"] .dpc-theme-01 {
  --ui-background-offset: var(--pdp-color-ramp-300);
  --text-base: var(--pdp-color-ramp-900);
  --text-link-base: var(--pdp-color-ramp-900);
  --text-link-highlight: var(--pdp-color-ramp-600);
}
/* Filter 2: Orange */
.productdetailv2.product-sku-EDR2RXD1[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR2RXV2P[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR2RXD1[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR2RXV2P[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR2RXD1 [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR2RXV2P [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR2RXD1 [class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR2RXV2P [class*=" dpc-theme-"] {
  --pdp-color-ramp-50: #FFDCD1;
  --pdp-color-ramp-100: #FFB6A1;
  --pdp-color-ramp-200: #FF8D6C;
  --pdp-color-ramp-300: #FF5820;
  --pdp-color-ramp-400: #DD4200;
  --pdp-color-ramp-450: #C53900;
  --pdp-color-ramp-500: #B73400;
  --pdp-color-ramp-600: #922800;
  --pdp-color-ramp-700: #6E1C00;
  --pdp-color-ramp-800: #4D1000;
  --pdp-color-ramp-900: #2E0600;
  --text-base: #ffffff;
  --text-offset: #FAFCFF;
  --text-link-base: #ffffff;
  --ui-border-color: #FAFCFF;
  --text-emphasis: var(--pdp-color-ramp-300);
  --text-link-highlight: var(--pdp-color-ramp-300);
  --ui-background: var(--pdp-color-ramp-900);
  --ui-background-offset: var(--pdp-color-ramp-800);
  --primary-brand-background: var(--pdp-color-ramp-450);
  --primary-brand-background-highlight: var(--pdp-color-ramp-600);
  --primary-brand-border: var(--pdp-color-ramp-450);
  --primary-brand-border-highlight: var(--pdp-color-ramp-600);
  --primary-offset-text: var(--pdp-color-ramp-900);
  --primary-offset-text-highlight: var(--pdp-color-ramp-900);
  --primary-offset-background-highlight: var(--pdp-color-ramp-100);
  --primary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-text-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-brand-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-offset-text-highlight: var(--pdp-color-ramp-100);
  --checkbox-highlight-indicator: var(--pdp-color-ramp-300);
  --radio-filled-icon: var(--pdp-color-ramp-300);
  --radio-highlight-indicator: var(--pdp-color-ramp-300);
  --input-base-input-background: var(--pdp-color-ramp-900);
  --input-disabled-input-background: var(--pdp-color-ramp-900);
  --indicator-brand-color-background-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-border-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-brand-color-border-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-border-highlight: var(--pdp-color-ramp-100);
}
.productdetailv2.product-sku-EDR2RXD1[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR2RXV2P[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR2RXD1[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR2RXV2P[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR2RXD1 [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR2RXV2P [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR2RXD1 [class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR2RXV2P [class*=" dpc-theme-"] .dpc-theme-01 {
  --ui-background-offset: var(--pdp-color-ramp-300);
  --text-base: var(--pdp-color-ramp-900);
  --text-link-base: var(--pdp-color-ramp-900);
  --text-link-highlight: var(--pdp-color-ramp-600);
}
/* Filter 3: Aqua */
.productdetailv2.product-sku-EDR3RXD1[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR3RXV2P[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR3RXD1[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR3RXV2P[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR3RXD1 [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR3RXV2P [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR3RXD1 [class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR3RXV2P [class*=" dpc-theme-"] {
  --pdp-color-ramp-50: #B5F0FF;
  --pdp-color-ramp-100: #66DDF8;
  --pdp-color-ramp-200: #48C3DE;
  --pdp-color-ramp-300: #23A9C4;
  --pdp-color-ramp-400: #0090A8;
  --pdp-color-ramp-450: #007F95;
  --pdp-color-ramp-500: #00768A;
  --pdp-color-ramp-600: #005D6D;
  --pdp-color-ramp-700: #004552;
  --pdp-color-ramp-800: #002F38;
  --pdp-color-ramp-900: #001A20;
  --text-base: #ffffff;
  --text-offset: #FAFCFF;
  --text-link-base: #ffffff;
  --ui-border-color: #FAFCFF;
  --text-emphasis: var(--pdp-color-ramp-300);
  --text-link-highlight: var(--pdp-color-ramp-300);
  --ui-background: var(--pdp-color-ramp-900);
  --ui-background-offset: var(--pdp-color-ramp-800);
  --primary-brand-background: var(--pdp-color-ramp-450);
  --primary-brand-background-highlight: var(--pdp-color-ramp-600);
  --primary-brand-border: var(--pdp-color-ramp-450);
  --primary-brand-border-highlight: var(--pdp-color-ramp-600);
  --primary-offset-text: var(--pdp-color-ramp-900);
  --primary-offset-text-highlight: var(--pdp-color-ramp-900);
  --primary-offset-background-highlight: var(--pdp-color-ramp-100);
  --primary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-text-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-brand-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-offset-text-highlight: var(--pdp-color-ramp-100);
  --checkbox-highlight-indicator: var(--pdp-color-ramp-300);
  --radio-filled-icon: var(--pdp-color-ramp-300);
  --radio-highlight-indicator: var(--pdp-color-ramp-300);
  --input-base-input-background: var(--pdp-color-ramp-900);
  --input-disabled-input-background: var(--pdp-color-ramp-900);
  --indicator-brand-color-background-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-border-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-brand-color-border-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-border-highlight: var(--pdp-color-ramp-100);
}
.productdetailv2.product-sku-EDR3RXD1[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR3RXV2P[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR3RXD1[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR3RXV2P[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR3RXD1 [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR3RXV2P [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR3RXD1 [class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR3RXV2P [class*=" dpc-theme-"] .dpc-theme-01 {
  --ui-background-offset: var(--pdp-color-ramp-300);
  --text-base: var(--pdp-color-ramp-900);
  --text-link-base: var(--pdp-color-ramp-900);
  --text-link-highlight: var(--pdp-color-ramp-600);
}
/* Filter 4: Green */
.productdetailv2.product-sku-EDR4RXD1[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR4RXV2P[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR4RXD1[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR4RXV2P[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR4RXD1 [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR4RXV2P [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR4RXD1 [class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR4RXV2P [class*=" dpc-theme-"] {
  --pdp-color-ramp-50: #A7FF98;
  --pdp-color-ramp-100: #7FE86E;
  --pdp-color-ramp-200: #64CD53;
  --pdp-color-ramp-300: #4AB338;
  --pdp-color-ramp-400: #2C9915;
  --pdp-color-ramp-450: #1E8900;
  --pdp-color-ramp-500: #1B7F00;
  --pdp-color-ramp-600: #136400;
  --pdp-color-ramp-700: #0C4B00;
  --pdp-color-ramp-800: #053300;
  --pdp-color-ramp-900: #021D00;
  --text-base: #ffffff;
  --text-offset: #FAFCFF;
  --text-link-base: #ffffff;
  --ui-border-color: #FAFCFF;
  --text-emphasis: var(--pdp-color-ramp-300);
  --text-link-highlight: var(--pdp-color-ramp-300);
  --ui-background: var(--pdp-color-ramp-900);
  --ui-background-offset: var(--pdp-color-ramp-800);
  --primary-brand-background: var(--pdp-color-ramp-450);
  --primary-brand-background-highlight: var(--pdp-color-ramp-600);
  --primary-brand-border: var(--pdp-color-ramp-450);
  --primary-brand-border-highlight: var(--pdp-color-ramp-600);
  --primary-offset-text: var(--pdp-color-ramp-900);
  --primary-offset-text-highlight: var(--pdp-color-ramp-900);
  --primary-offset-background-highlight: var(--pdp-color-ramp-100);
  --primary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-text-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-brand-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-offset-text-highlight: var(--pdp-color-ramp-100);
  --checkbox-highlight-indicator: var(--pdp-color-ramp-300);
  --radio-filled-icon: var(--pdp-color-ramp-300);
  --radio-highlight-indicator: var(--pdp-color-ramp-300);
  --input-base-input-background: var(--pdp-color-ramp-900);
  --input-disabled-input-background: var(--pdp-color-ramp-900);
  --indicator-brand-color-background-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-border-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-brand-color-border-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-border-highlight: var(--pdp-color-ramp-100);
}
.productdetailv2.product-sku-EDR4RXD1[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR4RXV2P[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR4RXD1[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR4RXV2P[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR4RXD1 [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR4RXV2P [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR4RXD1 [class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR4RXV2P [class*=" dpc-theme-"] .dpc-theme-01 {
  --ui-background-offset: var(--pdp-color-ramp-300);
  --text-base: var(--pdp-color-ramp-900);
  --text-link-base: var(--pdp-color-ramp-900);
  --text-link-highlight: var(--pdp-color-ramp-600);
}
/* Filter 5: Pink */
.productdetailv2.product-sku-EDR5RXD1[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR5RXV2P[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR5RXD1[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR5RXV2P[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR5RXD1 [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR5RXV2P [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR5RXD1 [class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR5RXV2P [class*=" dpc-theme-"] {
  --pdp-color-ramp-50: #FFDADF;
  --pdp-color-ramp-100: #FFB2BF;
  --pdp-color-ramp-200: #FF869F;
  --pdp-color-ramp-300: #FF4A7E;
  --pdp-color-ramp-400: #EA0064;
  --pdp-color-ramp-450: #D00058;
  --pdp-color-ramp-500: #C10052;
  --pdp-color-ramp-600: #9A0040;
  --pdp-color-ramp-700: #75002E;
  --pdp-color-ramp-800: #52001E;
  --pdp-color-ramp-900: #31000F;
  --text-base: #ffffff;
  --text-offset: #FAFCFF;
  --text-link-base: #ffffff;
  --ui-border-color: #FAFCFF;
  --text-emphasis: var(--pdp-color-ramp-300);
  --text-link-highlight: var(--pdp-color-ramp-300);
  --ui-background: var(--pdp-color-ramp-900);
  --ui-background-offset: var(--pdp-color-ramp-800);
  --primary-brand-background: var(--pdp-color-ramp-450);
  --primary-brand-background-highlight: var(--pdp-color-ramp-600);
  --primary-brand-border: var(--pdp-color-ramp-450);
  --primary-brand-border-highlight: var(--pdp-color-ramp-600);
  --primary-offset-text: var(--pdp-color-ramp-900);
  --primary-offset-text-highlight: var(--pdp-color-ramp-900);
  --primary-offset-background-highlight: var(--pdp-color-ramp-100);
  --primary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-text-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-brand-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-offset-text-highlight: var(--pdp-color-ramp-100);
  --checkbox-highlight-indicator: var(--pdp-color-ramp-300);
  --radio-filled-icon: var(--pdp-color-ramp-300);
  --radio-highlight-indicator: var(--pdp-color-ramp-300);
  --input-base-input-background: var(--pdp-color-ramp-900);
  --input-disabled-input-background: var(--pdp-color-ramp-900);
  --indicator-brand-color-background-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-border-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-brand-color-border-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-border-highlight: var(--pdp-color-ramp-100);
}
.productdetailv2.product-sku-EDR5RXD1[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR5RXV2P[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR5RXD1[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR5RXV2P[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR5RXD1 [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR5RXV2P [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR5RXD1 [class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR5RXV2P [class*=" dpc-theme-"] .dpc-theme-01 {
  --ui-background-offset: var(--pdp-color-ramp-300);
  --text-base: var(--pdp-color-ramp-900);
  --text-link-base: var(--pdp-color-ramp-900);
  --text-link-highlight: var(--pdp-color-ramp-600);
}
/* Filter 6: Navy */
.productdetailv2.product-sku-EDR6D1[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR6V2P[class^="dpc-theme-"],
.productdetailv2.product-sku-EDR6D1[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR6V2P[class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR6D1 [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR6V2P [class^="dpc-theme-"],
.productdetailv2.product-sku-EDR6D1 [class*=" dpc-theme-"],
.productdetailv2.product-sku-EDR6V2P [class*=" dpc-theme-"] {
  --pdp-color-ramp-50: #D3E7FF;
  --pdp-color-ramp-100: #A5CEFF;
  --pdp-color-ramp-200: #78B5FC;
  --pdp-color-ramp-300: #609BE1;
  --pdp-color-ramp-400: #4883C6;
  --pdp-color-ramp-450: #3973B5;
  --pdp-color-ramp-500: #306BAC;
  --pdp-color-ramp-600: #165392;
  --pdp-color-ramp-700: #003D75;
  --pdp-color-ramp-800: #002952;
  --pdp-color-ramp-900: #001631;
  --text-base: #ffffff;
  --text-offset: #FAFCFF;
  --text-link-base: #ffffff;
  --ui-border-color: #FAFCFF;
  --text-emphasis: var(--pdp-color-ramp-300);
  --text-link-highlight: var(--pdp-color-ramp-300);
  --ui-background: var(--pdp-color-ramp-900);
  --ui-background-offset: var(--pdp-color-ramp-800);
  --primary-brand-background: var(--pdp-color-ramp-450);
  --primary-brand-background-highlight: var(--pdp-color-ramp-600);
  --primary-brand-border: var(--pdp-color-ramp-450);
  --primary-brand-border-highlight: var(--pdp-color-ramp-600);
  --primary-offset-text: var(--pdp-color-ramp-900);
  --primary-offset-text-highlight: var(--pdp-color-ramp-900);
  --primary-offset-background-highlight: var(--pdp-color-ramp-100);
  --primary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-border-highlight: var(--pdp-color-ramp-100);
  --secondary-brand-text-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-border-highlight: var(--pdp-color-ramp-100);
  --secondary-offset-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-brand-text-highlight: var(--pdp-color-ramp-100);
  --tertiary-offset-text-highlight: var(--pdp-color-ramp-100);
  --checkbox-highlight-indicator: var(--pdp-color-ramp-300);
  --radio-filled-icon: var(--pdp-color-ramp-300);
  --radio-highlight-indicator: var(--pdp-color-ramp-300);
  --input-base-input-background: var(--pdp-color-ramp-900);
  --input-disabled-input-background: var(--pdp-color-ramp-900);
  --indicator-brand-color-background-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-border-active: var(--pdp-color-ramp-450);
  --indicator-brand-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-brand-color-border-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-background-highlight: var(--pdp-color-ramp-100);
  --indicator-offset-color-border-highlight: var(--pdp-color-ramp-100);
}
.productdetailv2.product-sku-EDR6D1[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR6V2P[class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR6D1[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR6V2P[class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR6D1 [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR6V2P [class^="dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR6D1 [class*=" dpc-theme-"] .dpc-theme-01,
.productdetailv2.product-sku-EDR6V2P [class*=" dpc-theme-"] .dpc-theme-01 {
  --ui-background-offset: var(--pdp-color-ramp-300);
  --text-base: var(--pdp-color-ramp-900);
  --text-link-base: var(--pdp-color-ramp-900);
  --text-link-highlight: var(--pdp-color-ramp-600);
}

/*
 * everydrop refresh: PDP delivery messaging (US9-955).
 *
 * The markup comes from digital-platform's shared deliverymessaging component,
 * which the legacy en_ca / fr_ca trays also render, so the atomic classes
 * cannot be added to the HTL. Colours therefore read the same theme custom
 * properties that .dpc-brand-text-* uses, and the type mirrors .dpc-disclaimer
 * (12px, 10px on mobile) since that step has no runtime token.
 *
 * Inherited styling fights the refresh design in three ways: the block is
 * centred, "FREE SHIPPING" is uppercase in a hardcoded teal, and the change
 * location link is black, which is invisible on the dark surface.
 *
 * This file ships in edv2.pdp-refresh, which structure/productdetailv2's
 * customheaderlibs.html only loads when brandModel.brand == 'everydrop-refresh',
 * so Canada and the legacy US tray are untouched.
 */
.delivery-messaging {
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--pdp-color-ramp-300);
  /*
     * Figma is exactly two lines:
     *   [icon] Free Shipping - Get it by <date>
     *          Estimated Shipping Date for <zip>
     * The shared markup nests the date and the label together inside
     * .pdp-tray__arrival-date, one wrapper below the free shipping row, so both
     * wrappers are flattened with display:contents and their pieces ordered
     * against this row instead. :not(.hide) keeps the shared show/hide working -
     * .hide is a single class and would otherwise lose to display:contents.
     * buyBox.js handles the parts CSS cannot (see reflowDeliveryMessaging).
     */
  /* circuit-breaker "not available" state (buyBox.js watchDeliveryAvailability).
       The grid-column/grid-row placements above assume the two-line sentence layout,
       which doesn't apply once the date is replaced by the unavailable message, so this
       drops the grid for a plain stacked list instead. */
  /* The component drops a hidden <svg> holder in as the container's first child,
       so it becomes a grid item and takes a cell during auto-placement. It renders
       nothing - the icon beside the copy carries its own inline copy of the same
       glyph - so it is taken out of the grid entirely. */
  /* Longhand start/end throughout rather than the `a / b` shorthand: LESS reads the
       slash as division, so `grid-column: 2 / -1` compiled to `grid-column: -2` and
       put the second line in the date's column instead of spanning from the copy. */
  /* The glyph is its own column, centred against both text lines. The shared
       component inlines its own svg with a hardcoded stroke, so that one is hidden
       and the Figma glyph applied as a mask instead, which lets it take the theme
       colour. */
  /* Line 1: copy then date, sharing the row beside the glyph. The shared component
       ships this line bold, but Figma sets the whole block at disclaimer weight -
       400 at the 12px/16px declared above, which is what @typography-disclaimer-*
       resolves to on this theme. */
  /* the date closes line 1, so it reads as one sentence with the copy before it */
  /* line 2 starts under line 1, not under the glyph. justify-self so the label
       sits at the start of the span it covers rather than stretching and letting
       the shared centring pull its text toward the middle. */
  /* the states that replace the arrival lines take the full width */
  /* estimated arrival date */
  /* productdetailv2.less pins @font-family-dm-sans on the label at the same three
       classes as this rule, so the second line rendered in DM Sans while the first
       stayed on the block's Inter; inherit puts it back on the brand face. */
  /* zip is echoed in several places and inherits an uppercase transform, plus a
       margin from the shared component that opens a gap mid-sentence once the node
       is moved inside the change-location link (see reflowDeliveryMessaging) */
  /* shared by the no-location prompt and the change-location affordance */
  /* buyBox.js moves this anchor inside the label so the zip closes the sentence
       (see reflowDeliveryMessaging); the shared component's left margin was sized
       for it standing alone on its own row and opens a gap after "for" here.
       inline rather than the component's inline-block for the same reason: an
       inline-block sits on the baseline and drags a descender gap under it, which
       grows the label's line box past 16px and opens the two rows apart. */
  /* no-location prompt, shown until a zip is known */
}
.delivery-messaging .delivery-messaging-top-content {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 4px;
  align-items: center;
}
.delivery-messaging .delivery-messaging-top-content.delivery-messaging-top-content--not-available {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}
.delivery-messaging .delivery-messaging-top-content.delivery-messaging-top-content--not-available .pdp-tray__arrival-date--info-value {
  text-align: center;
}
.delivery-messaging .pdp-tray__prp-delivery:not(.hide),
.delivery-messaging .pdp-tray__arrival-date:not(.hide) {
  display: contents;
}
.delivery-messaging .invisible-svgs {
  display: none;
}
.delivery-messaging .pdp-tray__prp-delivery .pdp-tray__prp-delivery--icon {
  grid-column: 1;
  grid-row-start: 1;
  grid-row-end: span 2;
  align-self: center;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  /* + the grid's 4px column-gap = the 8px Figma leaves after the glyph */
  margin-right: 4px;
  background-color: #FAFCFF;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 18V6C14 5.46957 13.7893 4.96086 13.4142 4.58579C13.0391 4.21071 12.5304 4 12 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H5M5 18C5 19.1046 5.89543 20 7 20C8.10457 20 9 19.1046 9 18M5 18C5 16.8954 5.89543 16 7 16C8.10457 16 9 16.8954 9 18M15 18H9M15 18C15 19.1046 15.8954 20 17 20C18.1046 20 19 19.1046 19 18M15 18C15 16.8954 15.8954 16 17 16C18.1046 16 19 16.8954 19 18M19 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17V13.35C21.9996 13.1231 21.922 12.903 21.78 12.726L18.3 8.376C18.2065 8.25888 18.0878 8.16428 17.9528 8.0992C17.8178 8.03412 17.6699 8.00021 17.52 8H14' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M14 18V6C14 5.46957 13.7893 4.96086 13.4142 4.58579C13.0391 4.21071 12.5304 4 12 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H5M5 18C5 19.1046 5.89543 20 7 20C8.10457 20 9 19.1046 9 18M5 18C5 16.8954 5.89543 16 7 16C8.10457 16 9 16.8954 9 18M15 18H9M15 18C15 19.1046 15.8954 20 17 20C18.1046 20 19 19.1046 19 18M15 18C15 16.8954 15.8954 16 17 16C18.1046 16 19 16.8954 19 18M19 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17V13.35C21.9996 13.1231 21.922 12.903 21.78 12.726L18.3 8.376C18.2065 8.25888 18.0878 8.16428 17.9528 8.0992C17.8178 8.03412 17.6699 8.00021 17.52 8H14' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.delivery-messaging .pdp-tray__prp-delivery .pdp-tray__prp-delivery--icon svg {
  display: none;
}
.delivery-messaging .pdp-tray__prp-delivery .pdp-tray__prp-delivery-text {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-transform: none;
  color: #FAFCFF;
}
.delivery-messaging .pdp-tray__arrival-date .pdp-tray__arrival-date--info-value {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  margin: 0;
  color: #FAFCFF;
}
.delivery-messaging .pdp-tray__arrival-date .pdp-tray__arrival-date--label {
  grid-column-start: 2;
  grid-column-end: -1;
  grid-row: 2;
  justify-self: start;
  margin: 0;
  color: var(--pdp-color-ramp-300);
}
.delivery-messaging .pdp-tray__arrival-date__timer,
.delivery-messaging .pdp-tray__arrival-location,
.delivery-messaging .pdp-tray__wp-no-location,
.delivery-messaging .pdp-tray__wp-loading {
  grid-column-start: 1;
  grid-column-end: -1;
}
.delivery-messaging .delivery-messaging-top-content,
.delivery-messaging .pdp-tray__arrival-date,
.delivery-messaging .pdp-tray__wp-no-location,
.delivery-messaging .pdp-tray__change-location-section {
  text-align: left;
}
.delivery-messaging .pdp-tray__arrival-date .pdp-tray__arrival-date--label,
.delivery-messaging .pdp-tray__arrival-date .pdp-tray__arrival-date--info-value {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: left;
  text-transform: none;
}
.delivery-messaging .pdp-tray__arrival-date .location-pdp,
.delivery-messaging .pdp-tray__wp-no-location .location-pdp,
.delivery-messaging .location-pdp {
  margin: 0;
  text-transform: none;
}
.delivery-messaging .change-location-button-pdp,
.delivery-messaging .change-location-button-pdp .change-location-link-pdp,
.delivery-messaging .change-location-button-pdp .location-pdp {
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  line-height: 16px;
  color: var(--pdp-color-ramp-300);
  text-decoration: underline;
}
.delivery-messaging .pdp-tray__arrival-date .change-location-button-pdp {
  display: inline;
  margin-left: 0;
  padding: 0;
  vertical-align: baseline;
}
.delivery-messaging .change-location-button-pdp:hover .change-location-link-pdp,
.delivery-messaging .change-location-button-pdp:focus .change-location-link-pdp {
  color: var(--text-link-highlight);
}
.delivery-messaging .pdp-tray__wp-no-location {
  color: var(--pdp-color-ramp-300);
}
@media only screen and (max-width: 767px) {
  .delivery-messaging {
    font-size: 10px;
    line-height: 12px;
  }
  .delivery-messaging .pdp-tray__prp-delivery .pdp-tray__prp-delivery-text,
  .delivery-messaging .pdp-tray__arrival-date .pdp-tray__arrival-date--label,
  .delivery-messaging .pdp-tray__arrival-date .pdp-tray__arrival-date--info-value,
  .delivery-messaging .change-location-button-pdp .change-location-link-pdp {
    font-size: 10px;
    line-height: 12px;
  }
}

/**
 * Rating summary beside the SKU on the refresh PDP (US9-955 / EDR-702).
 *
 * Type comes from the atomic classes on the markup (dpc-disclaimer,
 * dpc-brand-text-link); spacing, the star palette and the empty state live here.
 * Loaded from edv2.pdp-refresh, which is brand gated, so the legacy tray used by
 * en_ca / fr_ca is untouched.
 */
.edw-rating {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  /**
     * The shared star component hardcodes its palette into an inline <style> in every
     * SVG's <defs> - #f4b007 fills against #c9c9c9 empties - which is built for the
     * light legacy PDP and reads as grey on this background. Those are ordinary author
     * rules at (0,2,0), so scoping ours to the block wins on specificity alone; no
     * !important, and it holds regardless of which sheet lands last.
     */
  /**
     * Bazaarvoice injects its own markup and its own <style> blocks, built for a light
     * page: #666 stars on white, near-black text. On this ground it reads as disabled.
     *
     * Every BV rule replaced here is !important and hangs off [data-bv-show="rating_summary"],
     * and BV injects after our sheet, so an equal-specificity override loses on source
     * order even when it is important too. Each rule below is therefore one step more
     * specific than the BV rule it replaces, and important for the same reason. The
     * rules being beaten, as measured in the browser:
     *
     *   [data-bv-show=..]                                    color: black
     *   [data-bv-show=..] a, span                            color: inherit
     *   [data-bv-show=..] .bv_main_container                 flex-wrap: wrap
     *   [data-bv-show=..] .bv_main_container
     *                     .bv_avgRating_component_container  color: #3E3E3E
     */
}
.edw-rating__fallback {
  gap: 0.5rem;
  text-decoration: none;
}
.edw-rating__fallback.dn {
  display: none;
}
.edw-rating__fallback:hover,
.edw-rating__fallback:focus {
  text-decoration: underline;
}
.edw-rating__stars {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  /* One declaration drives every star state. Pointing all of them at currentColor
           hands the palette back to `color`, so this can become a dpc-brand-text-*
           utility on the markup whenever the design settles on a semantic token. It is
           a ramp step for the same reason the buy box modal's list icons are one:
           dpc-brand-text-emphasis resolves to --text-emphasis, which is ramp-300
           (#5895FF on Filter A) and reads too dark against this background.
           Neighbouring steps: ramp-100 #ADCCFF, ramp-200 #83B1FF. */
  color: var(--pdp-color-ramp-200);
  /* Each star is an <a>, and common.css carries `a { color: #00a0dd }`. A
           declaration on the element always beats a value inherited from an
           ancestor, however specific that ancestor's selector is, so the anchors
           have to be handed the block's colour rather than left to inherit it -
           otherwise currentColor below resolves against the link blue. */
}
.edw-rating__stars a {
  color: inherit;
}
.edw-rating__stars .icon.star,
.edw-rating__stars .icon.empty-star {
  fill: currentColor;
}
.edw-rating__stars .icon.empty-star {
  opacity: 0.4;
}
.edw-rating__stars stop {
  stop-color: currentColor;
}
.edw-rating__stars stop:last-child {
  stop-opacity: 0.4;
}
.edw-rating__value {
  font-weight: 700;
}
.edw-rating__count {
  text-decoration: underline;
}
.edw-rating__bv[data-bv-show] {
  display: inline-block;
  /* BV draws each star as an inline SVG filled by a two-stop linear gradient: the
           first stop is the filled colour, the second the empty remainder, and a partial
           star just moves the offset between them. Both stops carry their colour in an
           inline style attribute, which only !important can beat. Pointed at the ramp
           directly rather than currentColor, so the stars keep their colour independently
           of the text colour set below. */
  /* Per Figma: filled ramp-300 (#5895FF on Filter A), unfilled ramp-500. BV encodes
           the fill percentage in the gradient's x1/x2, not in the stop offsets, so the
           first stop is always the filled colour and the second always the remainder,
           whatever the rating. Both carry their colour in an inline style attribute,
           which only !important beats. Opacity is forced back to 1: the empty state is a
           ramp step of its own here, not the fill colour faded out. */
  /* Both read as disclaimer type on ramp-300; the average takes a weight override
           and the count an underline. Sized here rather than by adding dpc-disclaimer to
           the markup because BV sets its own font-size !important on these nodes, which
           the utility class would lose to. */
  /* The design carries the rating alone: stars, average, count. "Write a review"
           and "Ask a question" are not dropped functionality, both actions still exist
           in the reviews section further down the page. */
  /* Only the two buttons. bv_rating_summary_buttons_container is misleadingly
           named: it wraps the whole summary row, and hiding it takes the stars and
           the count with it. */
  /* Only the count reacts to hover. BV also darkens the average, which reads as
           the text disappearing against this ground, so it is pinned above. */
  /* The 8px gap is BV's own padding-right rather than a flex gap: it sets 10px on
           the stars and 0.1em on the average, both !important, and a gap would stack on
           top of them instead of replacing them. */
  /* Figma ships the star at 14x13 */
  /* The stars and the count sit inside real <button>s. BV gives them a background
           and a border, which paints a box around the row on hover against this ground.
           The wildcard is deliberate: BV nests several wrappers between the button and
           the text, and any of them can carry the hover fill. */
}
.edw-rating__bv[data-bv-show] stop {
  stop-opacity: 1 !important;
}
.edw-rating__bv[data-bv-show] stop:first-child {
  stop-color: var(--pdp-color-ramp-300) !important;
}
.edw-rating__bv[data-bv-show] stop:last-child {
  stop-color: var(--pdp-color-ramp-500) !important;
}
.edw-rating__bv[data-bv-show] .bv_main_container {
  /* BV wraps the row at this width, dropping its two buttons onto a second line
               that collides with the gallery beneath. */
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.edw-rating__bv[data-bv-show] .bv_main_container .bv_avgRating_component_container,
.edw-rating__bv[data-bv-show] .bv_main_container .bv_numReviews_component_container,
.edw-rating__bv[data-bv-show] .bv_main_container .bv_numReviews_text,
.edw-rating__bv[data-bv-show] .bv_main_container:hover .bv_avgRating_component_container,
.edw-rating__bv[data-bv-show] .bv_main_container:hover .bv_numReviews_component_container,
.edw-rating__bv[data-bv-show] .bv_main_container:hover .bv_numReviews_text,
.edw-rating__bv[data-bv-show] .bv_main_container button:hover .bv_avgRating_component_container,
.edw-rating__bv[data-bv-show] .bv_main_container button:hover .bv_numReviews_component_container,
.edw-rating__bv[data-bv-show] .bv_main_container button:hover .bv_numReviews_text {
  color: var(--pdp-color-ramp-300) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
.edw-rating__bv[data-bv-show] .bv_main_container .bv_button_review_or_question_container,
.edw-rating__bv[data-bv-show] .bv_main_container .bv_button_component_container {
  display: none !important;
}
.edw-rating__bv[data-bv-show] .bv_main_container .bv_avgRating_component_container {
  font-weight: 700 !important;
}
.edw-rating__bv[data-bv-show] .bv_main_container .bv_numReviews_component_container,
.edw-rating__bv[data-bv-show] .bv_main_container .bv_numReviews_text {
  text-decoration: underline !important;
}
.edw-rating__bv[data-bv-show] .bv_numReviews_component_container:hover,
.edw-rating__bv[data-bv-show] .bv_numReviews_component_container:hover .bv_numReviews_text,
.edw-rating__bv[data-bv-show] .bv_numReviews_text:hover {
  color: var(--text-link-highlight) !important;
}
.edw-rating__bv[data-bv-show] .bv_main_container .bv_stars_component_container,
.edw-rating__bv[data-bv-show] .bv_main_container .bv_avgRating_component_container {
  padding-right: 8px !important;
}
.edw-rating__bv[data-bv-show] .bv_main_container svg {
  width: 14px !important;
  height: 13px !important;
}
.edw-rating__bv[data-bv-show] button,
.edw-rating__bv[data-bv-show] .bv_main_container_row_flex,
.edw-rating__bv[data-bv-show] .bv_ratings_summary,
.edw-rating__bv[data-bv-show] .bv_stars_component_container,
.edw-rating__bv[data-bv-show] .bv_main_container div,
.edw-rating__bv[data-bv-show] .bv_main_container span,
.edw-rating__bv[data-bv-show] button:hover,
.edw-rating__bv[data-bv-show] .bv_main_container_row_flex:hover,
.edw-rating__bv[data-bv-show] .bv_ratings_summary:hover,
.edw-rating__bv[data-bv-show] .bv_stars_component_container:hover,
.edw-rating__bv[data-bv-show] .bv_main_container div:hover,
.edw-rating__bv[data-bv-show] .bv_main_container span:hover,
.edw-rating__bv[data-bv-show] button:focus,
.edw-rating__bv[data-bv-show] .bv_main_container_row_flex:focus,
.edw-rating__bv[data-bv-show] .bv_ratings_summary:focus,
.edw-rating__bv[data-bv-show] .bv_stars_component_container:focus,
.edw-rating__bv[data-bv-show] .bv_main_container div:focus,
.edw-rating__bv[data-bv-show] .bv_main_container span:focus,
.edw-rating__bv[data-bv-show] button:active,
.edw-rating__bv[data-bv-show] .bv_main_container_row_flex:active,
.edw-rating__bv[data-bv-show] .bv_ratings_summary:active,
.edw-rating__bv[data-bv-show] .bv_stars_component_container:active,
.edw-rating__bv[data-bv-show] .bv_main_container div:active,
.edw-rating__bv[data-bv-show] .bv_main_container span:active {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
/**
 * Registered / trademark marks in the product title. The atomic textline renders with
 * context='html', so registeredMark.js can wrap the character; this just keeps it from
 * pushing the line height around at h2 size.
 */
.edw-sup {
  font-size: 0.5em;
  line-height: 1;
  vertical-align: super;
  top: 0;
}
/**
 * Bazaarvoice rating histogram popover (US9-955 / EDR-702).
 *
 * Hovering the rating opens BV's own card: the 5-to-1 star breakdown and a "Read N
 * Reviews" button. It ships as a white panel with #666 labels and a mid-blue bar, which
 * is a light-page design dropped onto this ground.
 *
 * Scoped from .productdetailv2 rather than .edw-rating because the card is positioned
 * absolutely and does not sit inside the rating block. This whole file only loads from
 * edv2.pdp-refresh, which customheaderlibs gates on the everydrop-refresh brand, so
 * nothing here reaches another brand or the legacy tray.
 *
 * !important throughout for the same reason as the summary above: BV injects its own
 * <style> blocks after ours and marks these declarations important.
 */
.productdetailv2 .bv_modal_component_container {
  /* Every rule here is qualified with the card as well as the target. BV's own rules
       are the same two-class shape and inject after our sheet, so matching specificity
       loses on source order even when important: measured, .bv_modal_outer_content kept
       its 32px padding and black border until this chain went one level deeper. */
  background: var(--pdp-color-ramp-800) !important;
  border: 1px solid var(--pdp-color-ramp-700) !important;
  border-radius: 12px !important;
  color: var(--text-base) !important;
  box-shadow: none !important;
  /* BV draws a second, black border on this inner wrapper, just inside the card's own,
       which reads as a doubled edge. Its 32px padding is the dead space under the button. */
  /* The pointer is a 10px square on that wrapper, rotated 45deg and clipped by the card
       edge, so only its bottom and right borders are the two visible sides. It has to take
       the card's fill and edge or it stays a white notch on a navy card. */
  /* row label, its star glyph and the count on the right */
  /* The track needs to read against the ramp-800 card, so it sits two steps up rather
       than the one step the stars use against the page ground. */
  /* BV renders this as a filled white button; the design treats it as a link.
       The height is not BV's: common.css carries `button, .button { height: 3rem }`
       for the site's real buttons, and that 48px is what leaves the dead space under
       the link. */
  /* the row stars are the same gradient-filled SVGs as the summary */
}
.productdetailv2 .bv_modal_component_container .bv_modal_outer_content {
  border: 0 !important;
  padding: 24px 24px 16px !important;
}
.productdetailv2 .bv_modal_component_container .bv_modal_outer_content::before {
  background: var(--pdp-color-ramp-800) !important;
  border-bottom-color: var(--pdp-color-ramp-700) !important;
  border-right-color: var(--pdp-color-ramp-700) !important;
}
.productdetailv2 .bv_modal_component_container .bv_histogram_row_container,
.productdetailv2 .bv_modal_component_container .bv_histogram_row_prefix,
.productdetailv2 .bv_modal_component_container .bv_histogram_row_star,
.productdetailv2 .bv_modal_component_container .bv_histogram_row_rating {
  color: var(--text-base) !important;
}
.productdetailv2 .bv_modal_component_container .bv_histogram_row_bar_empty {
  background: var(--pdp-color-ramp-600) !important;
}
.productdetailv2 .bv_modal_component_container .bv_histogram_row_bar_filled {
  background: var(--pdp-color-ramp-300) !important;
}
.productdetailv2 .bv_modal_component_container .bv_button_buttonFull {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--pdp-color-ramp-300) !important;
  text-decoration: underline !important;
}
.productdetailv2 .bv_modal_component_container stop {
  stop-opacity: 1 !important;
}
.productdetailv2 .bv_modal_component_container stop:first-child {
  stop-color: var(--pdp-color-ramp-300) !important;
}
.productdetailv2 .bv_modal_component_container stop:last-child {
  stop-color: var(--pdp-color-ramp-500) !important;
}

/*
 * Refresh panel chrome: a dark floating surface with a 1px gradient ring and a
 * brand-coloured glow. Shared by the edr-refresh header flyouts and the PDP's
 * change-location modal so the two stay identical.
 *
 * Import only - not listed in any css.txt, and mixins with () emit nothing on
 * their own. Colours read the atomic theme custom properties, so a panel picks
 * up whatever dpc-theme-* class it sits under; on the refresh PDP that is the
 * per-filter ramp pdp-colors.less maps onto those same tokens.
 */
/* How far down the viewport a panel drawn inside a modal starts.
 *
 * modals.css centres .modal-box horizontally and gives it a 1.25rem / 2.5rem top
 * margin off a fixed, full-viewport .modal, which put the session timeout pair and
 * the PDP's change-location modal over the navigation. The header stack is 110px;
 * this leaves a clear gap under it so the panel reads as separate from the nav
 * behind it.
 *
 * Lives here rather than in either stylesheet because both use it and the two
 * modals are meant to open in the same place.
 */
/*
 * Refresh type styles that the theme tokens do not carry.
 *
 * Import only - not listed in any css.txt, and mixins with () emit nothing on
 * their own. Shared by the edr-refresh header flyouts and the refresh PDP so the
 * two stay identical; refresh-panel.less is the same arrangement for the panel
 * chrome.
 */
/* The four styles the header flyouts are built from. They lived in header.less
   while the header was the only thing drawing these panels; the PDP's
   change-location modal is the same panel and was reviewed as not matching the
   navigation - it was still on the legacy DM Sans - so they moved here, which is
   what this file is for.

   Each one reads straight from the theme tokens, so a brand that recompiles
   theme.less gets the new values in both places at once. */
/* atomic's .dpc-body2 / .dpc-body2-bold. The refresh theme has no
   @typography-body-2-* of its own - they are all `unset`, and the brandless
   default is still Roboto - so the stacks come from body-1 / body-bold and the
   metrics are the ones atomic compiles for those two classes from its per-brand
   $typography-*-body-2 tokens. @mobile-breakpoint (47.938rem) is atomic's $mobile
   (max-width: 767px) to the pixel.

   dpc-caption is uppercase in this brand, so sentence-case small copy sits on
   dpc-body2 rather than on the caption tokens. */
/*
 * Change-location modal, filter PDP refresh (US9-955).
 *
 * There is no everydrop markup to hang classes on: the shell is rendered by the
 * shared header component (digital-platform .../v3/userLocation/userLocation.html)
 * and mainmenu.js detaches the header's .location-block and appends it into
 * .user-location-modal-body when the modal opens. So this file restyles that
 * shared DOM in place rather than adding utility classes the way buyBox.html does.
 *
 * Colours are the same per-filter ramp the buy box uses. pdp-colors.less defines
 * the ramp on any [class*="dpc-theme-"] inside .productdetailv2.product-sku-*,
 * and basePage.html puts both the sku class and the brand's dpc-theme-* class on
 * <body>, so the tokens are inherited down here. Note the edr-refresh header
 * (header.less) already themes the same .location-block for the *dropdown*, but
 * with fixed @theme-04-* values and scoped to .location-nav-dropdown / .modal-overlay,
 * so none of it reaches the modal and none of it follows the filter theme.
 *
 * Scoped through #location-modal on purpose: the shared rules being replaced are
 * id- and !important-weighted (userLocation-v5.less), and this keeps the file free
 * of !important -- except for the two geometry properties noted below, where the
 * shared sheet's own !important leaves no other way through.
 */
.productdetailv2 {
  /* modals.css puts the shell at 1050 and the scrim at 1049; both have to clear
       the authored sticky utility nav (--mobileZIndex: 2000000003), the same
       ceiling the buy box details modal is raised to.

       Qualified with .modal-change-location on purpose. .modal-bg is the shared
       scrim for every modal on the page, so raising it unqualified also lifted it
       over the add-to-cart confirmation (#interstitial-modal.modal, z-index 9000
       from common.css), leaving that modal behind its own scrim. */
}
.productdetailv2 .modal-bg.modal-change-location {
  z-index: 2000000003;
}
.productdetailv2 #location-modal {
  z-index: 2000000004;
  /* modals.css gives every .modal .modal-content a 0.625rem vertical margin, which
           on this panel just pads the top and bottom inside the rounded box. */
  /* userLocation-v5.less paints this white with a black close glyph.
           Same ring and glow the header gives its flyouts, so the modal and the
           header's change-location dropdown read as one control. */
  /* The header row holds nothing but the close button, and the button is
           taken out of flow below, so the row should occupy no space at all.

           .desktop-tablet-styles() makes it `display: inline-block`. An empty
           inline-block still sits on a text baseline, so it generated a full
           line box - the element measured 377x0 but pushed everything under it
           down by a line height, which is the gap that was showing above
           "Current Location". Switching it to a block with no height removes the
           line box; .modal-body's -1rem in that same mixin was compensating for
           it and comes off with it, or the copy is pulled up too far.

           .modal-header and .close-button-wrapper both carry .position-relative
           in the markup, so an absolute close was resolving against the wrapper -
           which is what left the button down beside the headline instead of in
           the corner. They go static, along with .modal-content, so the button
           anchors to .modal-dialog.

           .modal-dialog deliberately stays positioned. It is the direct child the
           `> *` rule above lifts to z-index 3, and z-index does nothing on a
           static box: making it static would drop the whole panel behind the
           surface the glow mixin paints and the modal would render empty. So it
           is the containing block, and since it begins one gutter in from the
           panel edge, the close is offset back out by that gutter below. */
  /* Sits @close-inset in from the panel's own edge, the inset the session
           timeout modal's close uses (header.less), so the two modals close from
           the same spot. Measured out from .modal-dialog, which starts one
           @panel-gutter in, hence the negative offsets. */
  /* Type. Only the colours were being replaced here, so every line in the
           panel was still on the legacy DM Sans from userLocation-v5.less while
           the header dropdown next to it had moved to the refresh stacks -- which
           is what the review picked up. These are the same mixins header.less
           styles .location-block with, now shared from
           mixins/refresh-typography.less so the two cannot drift again. */
  /* the wrapper draws its own light border in the shared sheet; the field
           itself carries the outline here */
  /* everydrop's legacy `.button` (edv2.common util/global-classes.less) styles this
           for the old site: #8CD5EA ground, DIN 30640 Pro at 1rem, capitalised, with its
           own letter-spacing. Only the colours were being replaced here, so the type and
           geometry stayed legacy while the buy box CTA next to it used atomic's.

           Both halves now come from the same refresh tokens the atomic button compiles
           from, so this matches .dpc-button + .dpc-btn-primary-brand rather than
           approximating it. Covers #update-location-btn and the international-site link
           in the country suggestion. */
}
.productdetailv2 #location-modal .modal-content {
  margin: 0;
}
.productdetailv2 #location-modal .user-location-modal-box {
  position: relative;
  box-shadow: 0 5px 34px 0 color-mix(in srgb, var(--primary-brand-background) 50%, transparent);
  background: var(--ui-background);
  border-radius: 16px;
  color: var(--text-base);
  /* Geometry, reviewed against the header's change-location dropdown,
               which this modal is meant to be the same control as.

               userLocation-v5.less sizes it for the legacy white sheet -- 42rem
               wide on a 2.5rem/5rem gutter -- so the panel came out half the
               viewport with the field stranded in the middle of it. 425px and an
               even 24px gutter is what the dropdown already uses (header.less
               puts `padding: 24px` on .location-block).

               Both of those carry !important in .desktop-tablet-styles(), which
               is mixed into four separate media queries, so they cannot be
               out-weighed on specificity alone. The margin can: it is plain
               `margin-top: 8.5rem` there, and 8.5rem was not clearing the header.
               @refresh-modal-nav-clearance is the offset the session timeout
               modals take, so the two open in the same place. */
  max-width: 425px !important;
  padding: 24px !important;
  margin-top: 250px;
  /* clears the ring (1) and the surface (2) the panel mixin lays down */
}
.productdetailv2 #location-modal .user-location-modal-box:before,
.productdetailv2 #location-modal .user-location-modal-box:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 16px;
}
.productdetailv2 #location-modal .user-location-modal-box:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--primary-brand-background) 100%);
  z-index: 1;
}
.productdetailv2 #location-modal .user-location-modal-box:after {
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background: var(--ui-background);
  z-index: 2;
}
.productdetailv2 #location-modal .user-location-modal-box > * {
  position: relative;
  z-index: 3;
}
.productdetailv2 #location-modal .modal-content,
.productdetailv2 #location-modal .modal-header,
.productdetailv2 #location-modal .modal-header .close-button-wrapper {
  position: static;
}
.productdetailv2 #location-modal .modal-header {
  display: block;
  height: 0;
}
.productdetailv2 #location-modal .modal-body.user-location-modal-body {
  margin-top: 0;
}
.productdetailv2 #location-modal .modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 4;
  background: transparent;
  color: var(--text-base);
}
.productdetailv2 #location-modal .modal-close svg,
.productdetailv2 #location-modal .modal-close path {
  fill: currentColor;
}
.productdetailv2 #location-modal .location-headline-dropdown,
.productdetailv2 #location-modal .location-value {
  color: var(--text-base);
  font-family: 'Kanit', sans-serif;
  font-weight: 400 !important;
  font-size: 1.25rem !important;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}
.productdetailv2 #location-modal .location-text-block,
.productdetailv2 #location-modal .location-text-label {
  color: var(--text-offset);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 133%;
  letter-spacing: 0;
}
.productdetailv2 #location-modal .form-location-zip-code {
  border: 0;
  background: transparent;
}
.productdetailv2 #location-modal .form-input {
  border: 1px solid var(--pdp-color-ramp-500);
  border-radius: 8px;
  background: var(--pdp-color-ramp-800);
  color: var(--text-base);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 157.1%;
  letter-spacing: 0;
  /* userLocation-v5.less draws a 1px black outline here and zeroes the
               border; both lose to the #location-modal scope.

               The ring is a light ramp step, deliberately not the blue the border
               takes on focus. Ring and border in the same colour a pixel apart read
               as a doubled border rather than as focus, which is what the first
               version of this rule did. Offset 2px so the two edges stay separate. */
}
.productdetailv2 #location-modal .form-input::placeholder {
  color: var(--pdp-color-ramp-300);
}
.productdetailv2 #location-modal .form-input:focus-visible {
  border-color: var(--primary-brand-background);
  outline: none;
  outline-offset: 0px;
}
.productdetailv2 #location-modal .zip-code-error-message,
.productdetailv2 #location-modal .suggestion-message {
  color: var(--text-base);
  font-family: 'Inter', sans-serif;
}
.productdetailv2 #location-modal .button {
  width: 100%;
  /* .dpc-button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid;
  border-radius: 24px;
  padding: 0.5625rem 1.5625rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 112.5%;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  /* .dpc-btn-primary-brand */
  background: var(--primary-brand-background);
  border-color: var(--primary-brand-border);
  color: var(--primary-brand-text);
}
.productdetailv2 #location-modal .button:hover,
.productdetailv2 #location-modal .button:focus,
.productdetailv2 #location-modal .button:active {
  background: var(--primary-brand-background-highlight);
  border-color: var(--primary-brand-border-highlight);
  color: var(--primary-brand-text-highlight);
}

/*
 * Refresh type styles that the theme tokens do not carry.
 *
 * Import only - not listed in any css.txt, and mixins with () emit nothing on
 * their own. Shared by the edr-refresh header flyouts and the refresh PDP so the
 * two stay identical; refresh-panel.less is the same arrangement for the panel
 * chrome.
 */
/* The four styles the header flyouts are built from. They lived in header.less
   while the header was the only thing drawing these panels; the PDP's
   change-location modal is the same panel and was reviewed as not matching the
   navigation - it was still on the legacy DM Sans - so they moved here, which is
   what this file is for.

   Each one reads straight from the theme tokens, so a brand that recompiles
   theme.less gets the new values in both places at once. */
/* atomic's .dpc-body2 / .dpc-body2-bold. The refresh theme has no
   @typography-body-2-* of its own - they are all `unset`, and the brandless
   default is still Roboto - so the stacks come from body-1 / body-bold and the
   metrics are the ones atomic compiles for those two classes from its per-brand
   $typography-*-body-2 tokens. @mobile-breakpoint (47.938rem) is atomic's $mobile
   (max-width: 767px) to the pixel.

   dpc-caption is uppercase in this brand, so sentence-case small copy sits on
   dpc-body2 rather than on the caption tokens. */
/*
 * Add-to-cart interstitial, filter PDP refresh (US9-960).
 *
 * The modal is digital-platform's shared interstitial (productCard + ctaButtons
 * + delivery, markup rendered from the interstitial-product-card* Handlebars
 * partials), so there is no everydrop HTL to hang atomic's dpc-* classes on the
 * way buyBox.html does. It is restyled in place from here instead, the same way
 * location-modal.less handles the shared .location-block.
 *
 * Three legacy layers are being replaced, all of them still on the old brand:
 *   - interstitial/delivery/.../less/delivery.less - DIN 30640 Pro on the
 *     product title and the main CTA, DM Sans everywhere else
 *   - interstitial/productCard/.../less/subscriptions.less - DM Sans, and the
 *     old A11y blue (#037FA5) on the checkbox with the blue variant (#8CD5EA)
 *     as its hover ring
 *   - everydrop's `.button` in edv2.common (util/global-classes.less), which
 *     paints the pale #8CD5EA on "Proceed to Cart" and capitalizes its label
 * All three are single-class rules, so .productdetailv2 scoping is enough to
 * out-weigh them and this file needs no !important.
 *
 * Unlike header.less and buyBox.less, the tokens below are NOT wrapped in
 * var(--atomic-token, ...): those custom properties are the per-filter ramp
 * pdp-colors.less puts on <body>, and they are tuned for the dark themed
 * surfaces on the page - --text-base is #FAFCFF there, which would render this
 * modal's copy white on white. The confirmation sheet is plain white and sits
 * outside the themed card, so it takes the fixed theme-01 (Light) and brand
 * button values, which is what atomic draws a brand button with on a light
 * surface.
 *
 * Ships in edv2.pdp-refresh, which structure/productdetailv2's
 * customheaderlibs.html only loads when brandModel.brand == 'everydrop-refresh',
 * so the legacy US tray and en_ca / fr_ca are untouched.
 */
/* ------------------------------------------------------------------ tokens */
/* The pale ring the subscribe checkbox grows on hover. subscriptions.less draws
   it in the old blue variant (#8CD5EA); the refresh has no pale-blue button
   token, so it is derived from the brand blue the box itself is now filled with. */
/* ------------------------------------------------------------------ mixins */
/* .refresh-body-2-typography() and .refresh-body-2-bold-typography() come from the
   shared mixins/refresh-typography.less imported at the top -- header.less pulls in
   the same file, so the flyouts and this modal cannot drift apart. The headline and
   button mixins below stay local: this modal deliberately draws its headings bold
   and its buttons from the @color-* variables, where header.less uses the headline
   tokens' own weight and the var(--*-brand-*) custom properties. */
/* The Figma draws both headings bold. The headline tokens are weight 400, so the
   weight is taken from the bold body token instead - Kanit 700 is already how
   this brand sets its footer and page-list headlines. */
/* The treatments .dpc-btn-primary-brand / .dpc-btn-secondary-brand apply,
   asserted here because everydrop's `.button` matches at the same specificity. */
/* ------------------------------------------------------------------ card */
.productdetailv2 {
  /* --------------------------------------------------------- subscribe block */
  /* --------------------------------------------------------- footer CTAs */
}
.productdetailv2 .interstitial-product-card {
  /* "Added to Cart" / "Unable to add to cart" */
  /* the desktop-only "Proceed to Cart" affordance in the header rail is a bare
       text button, so only its type moves */
  /* Product name. Sized explicitly rather than left to the cascade: the shared
       sheet asks for 1rem here and the rendered title comes out far larger, so
       an inherited h2 rule is winning at higher specificity. */
  /* Model / Pack Type / Quantity - label regular, value bold */
  /* the shipping-estimate bar under the card. The green on the date is the
       brand's own success teal, not one of the blues being refreshed, so it is
       left as it is. */
}
.productdetailv2 .interstitial-product-card__header-title {
  font-weight: 400 ;
  font-size: 1.25rem ;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: none;
  color: #15191d;
}
@media all and (max-width: 47.938rem) {
  .productdetailv2 .interstitial-product-card__header-title {
    font-size: 1.125rem;
  }
}
.productdetailv2 .interstitial-product-card__appliances-quantity,
.productdetailv2 .interstitial-product-card__cart-limit-message {
  font-family: 'Inter', sans-serif;
}
.productdetailv2 .interstitial-product-card__main-cta-text {
  border-radius: 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 112.5%;
  letter-spacing: 0;
  text-transform: none;
  color: #15191d;
}
.productdetailv2 .interstitial-product-card__product-title-text {
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 116.7%;
  letter-spacing: 0;
  text-transform: none;
  color: #15191d;
}
@media all and (max-width: 47.938rem) {
  .productdetailv2 .interstitial-product-card__product-title-text {
    font-size: 1.25rem;
  }
}
.productdetailv2 .interstitial-product-card__product-specification {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  color: #15191d;
}
@media all and (max-width: 47.938rem) {
  .productdetailv2 .interstitial-product-card__product-specification {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.productdetailv2 .interstitial-product-card__product-specification-value {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}
@media all and (max-width: 47.938rem) {
  .productdetailv2 .interstitial-product-card__product-specification-value {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.productdetailv2 .interstitial-product-card .marketplace-product-label,
.productdetailv2 .interstitial-product-card__product-subscription-label,
.productdetailv2 .interstitial-product-card__protection-plans-title,
.productdetailv2 .interstitial-product-card__protection-plan-select,
.productdetailv2 .interstitial-product-card__protection-plans-learn-more a {
  font-family: 'Inter', sans-serif;
}
.productdetailv2 .interstitial-product-card__delivery {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
}
@media all and (max-width: 47.938rem) {
  .productdetailv2 .interstitial-product-card__delivery {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.productdetailv2 .interstitial-product-card__delivery-date {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}
.productdetailv2 .interstitial-product-subscriptions {
  font-family: 'Inter', sans-serif;
}
.productdetailv2 .interstitial-product-subscriptions__label {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  /* subscriptions.less paints the discount in the brand's teal */
}
@media all and (max-width: 47.938rem) {
  .productdetailv2 .interstitial-product-subscriptions__label {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}
.productdetailv2 .interstitial-product-subscriptions__label .percent-off {
  color: #1971ff;
}
.productdetailv2 .interstitial-product-subscriptions__terms,
.productdetailv2 .interstitial-product-subscriptions__delivery,
.productdetailv2 .interstitial-product-subscriptions__select-trigger span,
.productdetailv2 .interstitial-product-subscriptions__select-options__option {
  font-family: 'Inter', sans-serif;
}
.productdetailv2 .interstitial-product-subscriptions__terms a {
  color: #1971ff;
}
.productdetailv2 .interstitial-product-subscriptions__terms a:hover,
.productdetailv2 .interstitial-product-subscriptions__terms a:focus {
  color: #1d42a8;
}
.productdetailv2 .interstitial-product-subscriptions__checkbox-container input[type="checkbox"]:checked + .check-mark {
  background: #1971ff;
  border-color: #1971ff;
}
.productdetailv2 .interstitial-product-subscriptions__checkbox-container:hover:before {
  background: rgba(25, 113, 255, 0.2);
}
.productdetailv2 .interstitial-cta-buttons {
  /* "Continue Shopping" is an underlined text link on desktop, so it takes the
       button type without the secondary chrome */
  /* the loader the shared sheet spins inside the CTA reads the legacy palette */
  /* ctaButtons.less turns the secondary into a pill with four different black
       border widths and a gold (#D99E02) hover once the buttons stack */
}
.productdetailv2 .interstitial-cta-buttons__secondary.button {
  border-radius: 24px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 112.5%;
  letter-spacing: 0;
  text-transform: none;
  color: #15191d;
}
.productdetailv2 .interstitial-cta-buttons__secondary.button:hover,
.productdetailv2 .interstitial-cta-buttons__secondary.button:focus {
  color: #1d42a8;
}
.productdetailv2 .interstitial-cta-buttons__main.button {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 112.5%;
  letter-spacing: 0;
  text-transform: none;
  background: #1971ff;
  border: 2px solid #1971ff;
  border-radius: 24px;
  color: #ffffff;
  justify-content: center;
  padding: 0.5625rem 1.5625rem;
}
.productdetailv2 .interstitial-cta-buttons__main.button:hover,
.productdetailv2 .interstitial-cta-buttons__main.button:focus,
.productdetailv2 .interstitial-cta-buttons__main.button:active {
  background: #1d42a8;
  border-color: #1d42a8;
  color: #ffffff;
}
.productdetailv2 .interstitial-cta-buttons .digital-platform-loading-button--loader {
  border-color: #ffffff;
}
@media all and (max-width: 47.938rem) {
  .productdetailv2 .interstitial-cta-buttons__secondary.button {
    background: transparent;
    border: 2px solid #1971ff;
    border-radius: 24px;
    color: #1971ff;
  }
  .productdetailv2 .interstitial-cta-buttons__secondary.button:hover,
  .productdetailv2 .interstitial-cta-buttons__secondary.button:focus,
  .productdetailv2 .interstitial-cta-buttons__secondary.button:active {
    background: transparent;
    border-color: #1d42a8;
    color: #1d42a8;
  }
}

/**
 * Bazaarvoice review section on the refresh PDP (US9-955 / EDR-702).
 *
 * The shared displayReviews component wraps the BV container in legacy Bootstrap grid
 * markup (row / col-md-12 / panel-collapse). None of that CSS is loaded on the refresh
 * template, so the block would otherwise run full bleed; this pulls it back to the same
 * content width as the rest of the page. Loaded from edv2.pdp-refresh, which is brand
 * gated, so the v2 template and en_ca / fr_ca keep the legacy layout.
 */
.pr-reviews {
  width: 100%;
  max-width: var(--contentWidth);
  margin: 0 auto;
  padding: 0 var(--contentPadding);
}
.pr-reviews .row,
.pr-reviews [class^="col-"],
.pr-reviews [class*=" col-"] {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}

/**
 * Bazaarvoice review section (US9-955 / EDR-702).
 *
 * The reviews block below the PDP is BV's own markup styled by their hosted sheet:
 *   display.ugc.bazaarvoice.com/static/everydropwaterbrand/main_site/122/11610/en_US/stylesheets/screen.css
 * It is built for a light page and carries another brand's palette, a #c41239 red on the
 * action buttons and a #4a99ca blue on stars and badges.
 *
 * Two things about beating it. Their rules are !important, and their sheet loads from
 * BV's CDN after this clientlib, so matching specificity loses on source order. Every
 * selector below therefore repeats BV's own chain and prefixes `body` to outrank it.
 * Trimming the prefix drops these back under BV.
 *
 * Colours come from tokens rather than literals so the section follows whichever filter
 * theme the page resolves to, the same way the rating summary does. --primary-brand-*
 * is declared on the dpc-theme-* class that basePage puts on <body>, so it reaches here.
 *
 * Loaded from edv2.pdp-refresh, which customheaderlibs gates on the everydrop-refresh
 * brand, so none of this reaches another brand or the legacy tray.
 */
/* BV ships these as a solid #c41239 red. Repeating all four of their selectors rather
   than collapsing to .bv-button: they list them separately and the shorter form does
   not carry the same weight. */
body #BVRRContainer .bv-cv2-cleanslate button.bv-write-review,
body #BVRRContainer .bv-cv2-cleanslate button.bv-read-review,
body #BVRRContainer .bv-cv2-cleanslate button.bv-ask-question,
body #BVRRContainer .bv-cv2-cleanslate .bv-button {
  background: var(--primary-brand-background) !important;
  color: var(--primary-brand-text) !important;
  border-color: var(--primary-brand-border) !important;
}
body #BVRRContainer .bv-cv2-cleanslate button.bv-write-review:hover,
body #BVRRContainer .bv-cv2-cleanslate button.bv-read-review:hover,
body #BVRRContainer .bv-cv2-cleanslate button.bv-ask-question:hover,
body #BVRRContainer .bv-cv2-cleanslate .bv-button:hover,
body #BVRRContainer .bv-cv2-cleanslate button.bv-write-review:active,
body #BVRRContainer .bv-cv2-cleanslate button.bv-read-review:active,
body #BVRRContainer .bv-cv2-cleanslate button.bv-ask-question:active,
body #BVRRContainer .bv-cv2-cleanslate .bv-button:active,
body #BVRRContainer .bv-cv2-cleanslate button.bv-write-review:focus,
body #BVRRContainer .bv-cv2-cleanslate button.bv-read-review:focus,
body #BVRRContainer .bv-cv2-cleanslate button.bv-ask-question:focus,
body #BVRRContainer .bv-cv2-cleanslate .bv-button:focus {
  background: var(--primary-brand-background-highlight) !important;
  color: var(--primary-brand-text-highlight) !important;
  border-color: var(--primary-brand-border-highlight) !important;
}
/* The four #4a99ca rules: filled stars in the summary and in each review, the secondary
   ratings meter, and the badge glyph. ramp-300 resolves to #5895FF on Filter A, within a
   hair of the #5A96FF in the design, and unlike a literal it follows the other filters. */
body .bv-cv2-cleanslate .bv-core-container-122 .bv-rating-stars-on,
body .bv-cv2-cleanslate .bv-core-container-122 .bv-inline-rating-container .bv-rating-stars-on,
body .bv-cv2-cleanslate .bv-core-container-122 .bv-badge .bv-badge-icon {
  color: var(--pdp-color-ramp-300) !important;
}
body .bv-cv2-cleanslate .bv-core-container-122 .bv-content-secondary-ratings-value,
body .bv-cv2-cleanslate .bv-core-container-122 .bv-secondary-rating-summary-value {
  background-color: var(--pdp-color-ramp-300) !important;
  /* their fill is a gradient layered over that colour, which reintroduces the old blue */
  background-image: none !important;
}