/* stylelint-disable selector-class-pattern, no-descending-specificity */

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/** Variables start **/
 :root {
     /* Colors Primary - OK - 1 query */
     --color-primary-light-purple: rgba(163, 93, 214, 1);
     --color-primary-light-purple-two: rgba(154, 83, 198, 1);
     --color-primary-light-purple-10: rgba(244, 237, 249, 1);
     --color-primary-dark-purple: rgba(43, 28, 69, 1);
     --color-primary-cream: rgba(255, 236, 212, 1);

     /* !!not in style guide */
     --color-purple: rgba(139, 50, 194, 1);

     /* Secondary - OK */
     --color-secondary-light-red: rgba(255, 70, 21, 1);
     --color-secondary-light-red-10: rgba(229, 4, 8, 1);
     --color-secondary-light-red-20: rgba(251, 97, 97, 1);
     --color-secondary-dark-red: rgba(224, 49, 0, 1);
     --color-secondary-light-green: rgba(63, 182, 92, 1);
     --color-secondary-dark-green: rgba(43, 125, 63, 1);
     --color-secondary-yellow: rgba(255, 217, 0, 1);
     --color-secondary-orange: rgba(253, 153, 65, 1);
     --color-secondary-blue: rgba(63, 63, 235, 1);
     --color-secondary-blue-10: rgba(57, 57, 211, 1);
     --color-secondary-blue-20: rgba(50, 50, 188, 1);
     --color-secondary-light-blue: rgba(224, 242, 255, 1);
     --color-secondary-dark-blue: rgba(0, 73, 110, 1);
     --color-secondary-dark-red-10: rgba(182, 40, 0, 1);
     --color-secondary-dark-red-20: rgba(141, 31, 0, 1);

     /* Neutrals - OK - 1 query */
     --color-neutral-black: rgba(0, 0, 0, 1);
     --color-neutral-tundora: rgba(77, 77, 77, 1);
     --color-neutral-gray: rgba(115, 115, 115, 1);
     --color-neutral-gray-two: rgba(153, 153, 153, 1);
     --color-neutral-silver: rgba(186, 186, 186, 1);
     --color-neutral-silver-two: rgba(207, 208, 211, 1);
     --color-neutral-alto: rgba(224, 224, 224, 1);
     --color-neutral-light-gray: rgba(249, 249, 249, 1);
     --color-neutral-mid-gray: rgba(234, 229, 232, 1);
     --color-neutral-mid-gray-two: rgba(187, 187, 187, 1);
     --color-neutral-white: rgba(255, 255, 255, 1);

     /* These variables are unaligned with staging2 currently -
     these will need to be updated and organised in the future ->
       Secondary & not-in-style-guide colors
     */

   /* !!not in style guide */
   --color-neutral-gray-light: rgba(255, 255, 255, 0.30);
   --color-links-dark-blue: rgba(47, 64, 97, 1);
   --color-review-grey: rgba(230, 230, 230, 1);
   --color-review-yellow: rgba(255, 209, 0, 1);
   --color-review-black: rgba(41, 47, 54, 1);
   --color-review-gray: rgba(238, 238, 238, 1);

     /* Secondary */
     --clr-light-red: rgba(255, 70, 21, 1);
     --clr-dark-red: rgba(224, 49, 0, 1);
     --clr-light-green: rgba(63, 182, 92, 1);
     --clr-dark-green: rgba(43, 125, 63, 1);
     --clr-dark-green-trans: rgba(43, 125, 63, 0.1);
     --clr-yellow: rgba(255, 217, 0, 1);
     --clr-orange: rgba(253, 153, 65, 1);
     --clr-blue: rgba(63, 63, 235, 1);
     --clr-light-purple: rgba(246, 238, 250, 1);

     /* !!not in style guide */
     --color-neutral-gray-light: rgba(255, 255, 255, 0.30);
     --color-links-dark-blue: rgba(47, 64, 97, 1);
     --color-review-grey: rgba(230, 230, 230, 1);
     --color-review-yellow: rgba(255, 209, 0, 1);
     --color-review-black: rgba(41, 47, 54, 1);
     --color-review-gray: rgba(238, 238, 238, 1);

     /* Typography */
     --body-font-family: "Inner Tight", sans-serif;
     --heading-font-primary-family: "Rebond Grotesque", sans-serif;

     --font-size-base: 1rem;
     --font-size-small: 0.875rem;
     --font-size-x-small: 0.75rem;

     --line-height-default: 150%;
     --line-height-s: 120%;
     --line-height-xs: 100%;

     /* Titles - same as headings? */
     --font-size-title-display-primary-xl: 4.5rem;
     --font-size-title-display-primary-l: 3.75rem;
     --font-size-title-display-primary-m: 3rem;
     --font-size-title-display-primary-s: 2.5rem;

     --font-size-title-display-secondary-xl: 4.5rem;
     --font-size-title-display-secondary-l: 3.75rem;
     --font-size-title-display-secondary-m: 3rem;
     --font-size-title-display-secondary-s: 2.5rem;

     --font-size-title-display-tertiary-xl: 5.125rem;
     --font-size-title-display-tertiary-l: 4.5rem;
     --font-size-title-display-tertiary-m: 3.75rem;
     --font-size-title-display-tertiary-s: 3rem;

     --font-size-title-semantic-primary-xxl: 2rem;
     --font-size-title-semantic-primary-xl: 1.75rem;
     --font-size-title-semantic-primary-l: 1.5rem;
     --font-size-title-semantic-primary-m: 1.25rem;
     --font-size-title-semantic-primary-s: 1.125rem;
     --font-size-title-semantic-primary-xs: 1rem;

     --font-size-title-semantic-secondary-xxl: 2rem;
     --font-size-title-semantic-secondary-xl: 1.75rem;
     --font-size-title-semantic-secondary-l: 1.5rem;
     --font-size-title-semantic-secondary-m: 1.25rem;
     --font-size-title-semantic-secondary-s: 1.125rem;
     --font-size-title-semantic-secondary-xs: 1rem;

     --font-size-title-semantic-tertiary-xl: 2.75rem;
     --font-size-title-semantic-tertiary-l: 2rem;
     --font-size-title-semantic-tertiary-m: 1.75rem;
     --font-size-title-semantic-tertiary-s: 1.625rem;
     --font-size-title-semantic-tertiary-xs: 1.5rem;

     /* Nested font sizes */
     --font-size-xxs: var(--font-size-title-semantic-primary-xs);
     --font-size-xs: var(--font-size-title-semantic-primary-s);
     --font-size-s: var(--font-size-title-semantic-primary-m);
     --font-size-ms: var(--font-size-title-semantic-primary-m);
     --font-size-m: var(--font-size-title-semantic-primary-m);
     --font-size-ml: var(--font-size-title-semantic-primary-l);
     --font-size-l: var(--font-size-title-semantic-primary-l);
     --font-size-xl: var(--font-size-title-semantic-primary-xl);
     --font-size-xxl: var(--font-size-title-semantic-primary-xxl);
     --font-size-xxxl: var(--font-size-title-semantic-primary-xxl);

     /* Headings */
     --font-size-h1: 2rem;
     --font-size-h2: 1.75rem;
     --font-size-h3: 1.5rem;
     --font-size-h4: 1.25rem;
     --font-size-h5: 1.125rem;

     /* Button Text */
     --font-size-button-l: 1.25rem;
     --font-size-button-m: 1rem;
     --font-size-button-s: 0.875rem;

     /* Font Weights */
     --font-weight-light: 300;
     --font-weight-regular: 400;
     --font-weight-semi-bold: 500;
     --font-weight-bold: 600;
     --font-weight-extra-bold: 700;
     --font-weight-black: 900;

     /* Spacing */
     --spacing-none: 0;
     --spacing-xxs: 2px;
     --spacing-xs: 4px;
     --spacing-xsii: 6px;
     --spacing-s: 8px; /* Divisible by 8 */
     --spacing-si: 10px;
     --spacing-sii: 12px;
     --spacing-siii: 14px; /* Changed from 15px to 14px */
     --spacing-m: 16px; /* Divisible by 8 */
     --spacing-mii: 18px;
     --spacing-miii: 20px;
     --spacing-miv: 22px;
     --spacing-l: 24px; /* Divisible by 8 */
     --spacing-li: 26px;
     --spacing-lii: 28px;
     --spacing-liii: 30px;
     --spacing-xl: 32px; /* Divisible by 8 */
     --spacing-xli: 34px;
     --spacing-xlii: 36px;
     --spacing-xlii: 38px;
     --spacing-xxl: 40px; /* Divisible by 8 */
     --spacing-3xl: 48px; /* Divisible by 8 */
     --spacing-4xl: 56px; /* Divisible by 8 */
     --spacing-5xl: 64px; /* Divisible by 8 */

     /* Padding */
     --padding-none: 0;
     --padding-xxs: 2px;
     --padding-xs: 4px;
     --padding-xsii: 6px;
     --padding-s: 8px; /* Divisible by 8 */
     --padding-si: 10px;
     --padding-sii: 12px;
     --padding-siii: 14px; /* Changed from 15px to 14px */
     --padding-m: 16px; /* Divisible by 8 */
     --padding-mii: 18px;
     --padding-miii: 20px;
     --padding-miv: 22px;
     --padding-l: 24px; /* Divisible by 8 */
     --padding-li: 26px;
     --padding-lii: 28px;
     --padding-liii: 30px;
     --padding-xl: 32px; /* Divisible by 8 */
     --padding-xli: 34px;
     --padding-xlii: 36px;
     --padding-xlii: 38px;
     --padding-xxl: 40px; /* Divisible by 8 */
     --padding-3xl: 48px; /* Divisible by 8 */
     --padding-4xl: 56px; /* Divisible by 8 */
     --padding-5xl: 64px; /* Divisible by 8 */

     /* Gap */
     --gap-none: 0;
     --gap-xxs: 2px;
     --gap-xs: 4px;
     --gap-xsii: 6px;
     --gap-s: 8px; /* Divisible by 8 */
     --gap-si: 10px;
     --gap-sii: 12px;
     --gap-siii: 14px; /* Changed from 15px to 14px */
     --gap-m: 16px; /* Divisible by 8 */
     --gap-mii: 18px;
     --gap-miii: 20px;
     --gap-miv: 22px;
     --gap-l: 24px; /* Divisible by 8 */
     --gap-li: 26px;
     --gap-lii: 28px;
     --gap-liii: 30px;
     --gap-xl: 32px; /* Divisible by 8 */
     --gap-xli: 34px;
     --gap-xlii: 36px;
     --gap-xlii: 38px;
     --gap-xxl: 40px; /* Divisible by 8 */
     --gap-3xl: 48px; /* Divisible by 8 */
     --gap-4xl: 56px; /* Divisible by 8 */
     --gap-5xl: 64px; /* Divisible by 8 */

     /* Border Radius */
     --border-radius-none: 0px;
     --border-radius-xxs: 2px;
     --border-radius-xs: 4px;
     --border-radius-s: 8px;
     --border-radius-m: 16px;
     --border-radius-l: 24px;
     --border-radius-xl: 32px;
     --border-radius-round: 9999px;

     /* Margins */
     --margin-none: 0;
     --margin-xxs: 2px;
     --margin-xs: 4px;
     --margin-xsii: 6px;
     --margin-s: 8px; /* Divisible by 8 */
     --margin-si: 10px;
     --margin-sii: 12px;
     --margin-siii: 14px; /* Changed from 15px to 14px */
     --margin-m: 16px; /* Divisible by 8 */
     --margin-mii: 18px;
     --margin-miii: 20px;
     --margin-miv: 22px;
     --margin-l: 24px; /* Divisible by 8 */
     --margin-li: 26px;
     --margin-lii: 28px;
     --margin-liii: 30px;
     --margin-xl: 32px; /* Divisible by 8 */
     --margin-xli: 34px;
     --margin-xlii: 36px;
     --margin-xlii: 38px;
     --margin-xxl: 40px; /* Divisible by 8 */
     --margin-3xl: 48px; /* Divisible by 8 */
     --margin-4xl: 56px; /* Divisible by 8 */
     --margin-5xl: 64px; /* Divisible by 8 */

     /* Gutters */
     --gutter-none: 0;
     --gutter-xxs: 2px;
     --gutter-xs: 4px;
     --gutter-xsii: 6px;
     --gutter-s: 8px; /* Divisible by 8 */
     --gutter-si: 10px;
     --gutter-sii: 12px;
     --gutter-siii: 14px; /* Changed from 15px to 14px */
     --gutter-m: 16px; /* Divisible by 8 */
     --gutter-mii: 18px;
     --gutter-miii: 20px;
     --gutter-miv: 22px;
     --gutter-l: 24px; /* Divisible by 8 */
     --gutter-li: 26px;
     --gutter-lii: 28px;
     --gutter-liii: 30px;
     --gutter-xl: 32px; /* Divisible by 8 */
     --gutter-xli: 34px;
     --gutter-xlii: 36px;
     --gutter-xlii: 38px;
     --gutter-xxl: 40px; /* Divisible by 8 */
     --gutter-3xl: 48px; /* Divisible by 8 */
     --gutter-4xl: 56px; /* Divisible by 8 */
     --gutter-5xl: 64px; /* Divisible by 8 */

     /* Columns */
     --columns-s: 8;
     --columns-m: 12;
     --columns-l: 12;
 }
/** Variables end **/

/** Typography start **/
:root {
  --clr-link: var(--color-secondary-blue);
  --clr-link-hover: var(--color-secondary-blue);
  --clr-link-outline: var(--color-primary-dark-purple);

  --clr-link-secondary: var(--color-neutral-white);
  --clr-link-secondary-hover: var(--color-secondary-yellow);
  --clr-link-secondary-outline: var(--color-neutral-white);

  --clr-link-tertiary: var(--color-neutral-white);
  --clr-link-tertiary-hover: var(--color-neutral-white);
  --clr-link-tertiary-outline: var(--color-neutral-white);
}

/* html {
  font-size: 62.5%;
} */

body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  font-family: var(--body-font-family);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-primary-family);
  color: var(--color-primary-dark-purple);
  font-weight: var(--font-weight-extra-bold);
  scroll-margin: var(--spacing-xxl);
  line-height: var(--line-height-s);
  margin-top: 0;
}

h1 {
  font-size: var(--font-size-h2);
  margin-bottom: var(--spacing-xl);
}

h2{
  font-size: var(--font-size-h3);
  margin-bottom: var(--spacing-xl);
}

h3 {
  font-size: var(--font-size-h4);
  margin-bottom: var(--spacing-lii);
}

h4 {
  font-size: var(--font-size-h5);
  margin-bottom: var(--spacing-l);
}

h5 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-l);
}

h6 {
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-l);
}

/* links */
a:any-link {
  color: var(--clr-link);
  text-decoration: none;
  word-break: break-word;
  font-family: var(--body-font-family);
}

a:hover {
  color: var(--clr-link-hover);
  text-decoration: underline;
}

a:focus {
  color: var(--clr-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 1px solid var(--clr-link-outline);
}

a.secondary:any-link {
  color: var(--clr-link-secondary);
  text-decoration: none;
  word-break: break-word;
}

a.secondary:hover {
  color: var(--clr-link-secondary-hover);
  text-decoration: underline;
}

a.secondary:focus {
  color: var(--clr-link-secondary-hover);
  text-decoration: underline;
}

a.secondary:focus-visible {
  outline: 1px solid var(--clr-link-secondary-outline);
}

a.tertiary:any-link {
  color: var(--clr-link-tertiary);
  text-decoration: none;
  word-break: break-word;
}

a.tertiary:hover {
  color: var(--clr-link-tertiary-hover);
  text-decoration: underline;
}

a.tertiary:focus {
  color: var(--clr-link-tertiary-hover);
  text-decoration: underline;
}

a.tertiary:focus-visible {
  outline: 1px solid var(--clr-link-tertiary-outline);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: var(--spacing-s);
  margin-bottom: var(--spacing-xxs);
}

code,
pre {
  font-size: var(--font-size-base);
}

pre {
  padding: var(--spacing-m);
  border-radius: var(--border-radius-s);
  overflow-x: auto;
  white-space: pre;
}

p{
  margin: 0;
  margin-bottom: var(--spacing-l);
}

ul li{
  line-height: var(--line-height-default);
}

strong {
  font-weight: var(--font-weight-bold);
}

.default-content-wrapper p + p {
  padding-top: var(--spacing-m);
}

strong {
  font-weight: var(--font-weight-bold);
}

@media (min-width: 1024px) {
  p:not(.tabs p):not(.alphabet-links-title):not(.search-popover__noresults p) {
    max-width: 725px;
  }

  h1 {
    font-size: var(--font-size-h1);
  }

  h2 {
    font-size: var(--font-size-h2);
  }

  h3 {
    font-size: var(--font-size-h3);
  }

  h4 {
    font-size: var(--font-size-h4);
  }

  h5 {
    font-size: var(--font-size-h5);
  }

  h6 {
    font-size: var(--font-size-base);
  }
}
/** Typography end **/

/** Layout start **/
:root {
  /* Layout */
  --site-gutter: var(--spacing-m);
  --desktop-max-width: calc(1140px + (var(--grid-gutter-m) * 2));
  /* This may need to be verified */
}

@media (min-width: 768px) {
  :root {
    --site-gutter: var(--spacing-l);
  }
}

@media (min-width: 1024px) {
  :root {
    --site-gutter: var(--spacing-xl);
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-black);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

main>.section:first-of-type {
  margin-top: 0;
}

main>.section>div {
  max-width: var(--desktop-max-width);
  padding: 0 var(--site-gutter);
  margin: 0 auto;
}

.default-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

/* main .section:not(.breadcrumb-container):nth-child(2) .default-content-wrapper {
  gap: var(--spacing-m);
} */

.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6 {
  margin-bottom: 0;
}

h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
  margin-top: 0;
}

.section p {
  margin-top: 0;
  margin-bottom: 0;
}

.section p + p {
  margin-top: var(--spacing-s);
}

body:not(.breadcrumbs-visible) main .breadcrumb-container + .section {
    /**
     * This has been commented out to help LCP with PDP skeleton content
     * this may need to be re-assessed.
     */
    margin-top: var(--spacing-l);
}

main .section .default-content-wrapper {
  gap: var(--spacing-l);
}

main *:not(.section) + .section {
  margin: var(--spacing-xxl) auto;
}

main .section + .section:not(.product-details) {
  margin: var(--spacing-mii) auto;
}

@media (min-width: 1024px) {
  .max-width-two-thirds:not(.section) {
    max-width: calc((100% / 3) * 2);
  }

  .section.max-width-two-thirds > div > * {
    max-width: calc((100% / 3) * 2);
  }

  /* main .section:not(.breadcrumb-container):nth-child(2) .default-content-wrapper {
    gap: var(--spacing-s);
  } */
}
/** Layout end **/

body {
  /* display: none; */
  margin: 0;
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-tundora);
  min-height: 75vh
}

@media(min-width: 768px) {
  body > main:first-of-type {
    height: 100vh;
    max-height: 100vh;
  }
}

body.appear {
    display: block;
}

body.appear > main:first-of-type {
    height: auto;
    max-height: none;
}

* {
    box-sizing: border-box;
    font-variation-settings: "slnt" 0;
    font-synthesis: none;
}

/* stylelint-disable no-empty-source */
:root, .dropin-design {
    /* Adobe Commerce Dropin design tokens */
    --color-brand-300: #6d6d6d;
    --color-brand-500: #454545;
    --color-brand-600: #383838;
    --color-brand-700: #2b2b2b;
    --color-neutral-50: var(--color-neutral-white);
    --color-neutral-100: #fafafa;
    --color-neutral-200: #f5f5f5;
    --color-neutral-300: #e8e8e8;
    --color-neutral-400: #d6d6d6;
    --color-neutral-500: #b8b8b8;
    --color-neutral-600: #8f8f8f;
    --color-neutral-700: #666;
    --color-neutral-800: #3d3d3d;
    --color-neutral-900: #292929;
    --color-positive-200: #eff5ef;
    --color-positive-500: #7fb078;
    --color-positive-800: #53824c;
    --color-informational-200: #eeeffb;
    --color-informational-500: #6978d9;
    --color-informational-800: #5d6dd6;
    --color-warning-200: #fdf3e9;
    --color-warning-500: #e79f5c;
    --color-warning-800: #cc7a2e;
    --color-alert-200: #ffebeb;
    --color-alert-500: #db7070;
    --color-alert-800: #c35050;
    --primary-medium-purple-500-default: #a75dd6;
    --search-focus-border-color: var(--color-primary-light-purple-two);
    --primary-ocean-blue-50: #e0f2ff;
    --color-button-active: var(--color-brand-700);
    --color-button-focus: var(--color-neutral-400);
    --color-button-hover: var(--color-brand-600);
    --color-action-button-active: var(--color-neutral-50);
    --color-action-button-hover: var(--color-neutral-300);
    --color-opacity-16: rgb(255 255 255 / 16%);
    --color-opacity-24: rgb(255 255 255 / 24%);
    --grid-1-columns: 4;
    --grid-1-margins: 0;
    --grid-2-columns: 12;
    --grid-2-margins: 0;
    --grid-3-columns: 12;
    --grid-3-margins: 0;
    --grid-4-columns: 12;
    --grid-4-margins: 0;
    --grid-5-columns: 12;
    --grid-5-margins: 0;
    --shape-border-radius-1: 3px;
    --shape-border-radius-2: 8px;
    --shape-border-radius-3: 24px;
    --shape-border-width-1: 1px;
    --shape-border-width-2: 1.5px;
    --shape-border-width-3: 2px;
    --shape-border-width-4: 4px;
    --shape-shadow-1: 0 0 16px 0 rgb(0 0 0 / 16%);
    --shape-shadow-2: 0 2px 16px 0 rgb(0 0 0 / 16%);
    --shape-shadow-3: 0 2px 3px 0 rgb(0 0 0 / 16%);
    --shape-icon-stroke-1: 1px;
    --shape-icon-stroke-2: 1.5px;
    --shape-icon-stroke-3: 2px;
    --shape-icon-stroke-4: 4px;
    --type-base-font-family: roboto, roboto-fallback;
    --type-condensed-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif;
    --type-display-1-font: normal normal 300 6.0rem/7.2rem var(--type-base-font-family);
    --type-display-1-letter-spacing: 0.04em;
    --type-display-2-font: normal normal 300 4.8rem/5.6rem
    var(--type-base-font-family);
    --type-display-2-letter-spacing: 0.04em;
    --type-display-3-font: normal normal 300 3.4rem/4rem
    var(--type-base-font-family);
    --type-display-3-letter-spacing: 0.04em;
    --type-headline-1-font: normal normal 400 2.4rem/3.2rem var(--type-condensed-font-family);
    --type-headline-1-letter-spacing: 0.04em;
    --type-headline-2-default-font: normal normal 300 2.0rem/2.4rem var(--type-condensed-font-family);
    --type-headline-2-default-letter-spacing: 0.04em;
    --type-headline-2-strong-font: normal normal 400 2.0rem/2.4rem var(--type-condensed-font-family);
    --type-headline-2-strong-letter-spacing: 0.04em;
    --type-body-1-default-font: normal normal 300 1.6rem/2.4rem
    var(--type-base-font-family);
    --type-body-1-default-letter-spacing: 0.04em;
    --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem
    var(--type-base-font-family);
    --type-body-1-strong-letter-spacing: 0.04em;
    --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem
    var(--type-base-font-family);
    --type-body-1-emphasized-letter-spacing: 0.04em;
    --type-body-2-default-font: normal normal 300 1.4rem/2rem
    var(--type-base-font-family);
    --type-body-2-default-letter-spacing: 0.04em;
    --type-body-2-strong-font: normal normal 400 1.4rem/2rem
    var(--type-base-font-family);
    --type-body-2-strong-letter-spacing: 0.04em;
    --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem
    var(--type-base-font-family);
    --type-body-2-emphasized-letter-spacing: 0.04em;
    --type-button-1-font: normal normal 400 2rem/2.6rem
    var(--type-base-font-family);
    --type-button-1-letter-spacing: 0.08em;
    --type-button-2-font: normal normal 400 1.6rem/2.4rem
    var(--type-base-font-family);
    --type-button-2-letter-spacing: 0.08em;
    --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem
    var(--type-base-font-family);
    --type-details-caption-1-letter-spacing: 0.08em;
    --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem
    var(--type-base-font-family);
    --type-details-caption-2-letter-spacing: 0.08em;
    --type-details-overline-font: normal normal 400 1.2rem/2rem
    var(--type-base-font-family);
    --type-details-overline-letter-spacing: 0.16em;

    /* Additional tokens */
    --type-fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono',
    monospace;
    --grid-gutter-m: var(--spacing-m);
    --gutter-s: 16px;
    --gutter-m: 24px;
    --gutter-l: 24px;
    --background-color: var(--color-neutral-50);
    --nav-height: 6.4rem;
    --site-gutter: var(--spacing-m);
    --desktop-max-width: calc(1140px + (var(--grid-gutter-m) * 2));
}

@media (min-width: 768px) {
  :root {
    --site-gutter: var(--spacing-l);
  }
}

@media (min-width: 1024px) {
  :root {
    --site-gutter: var(--spacing-xl);
  }
}

header .header,
footer .footer {
    visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
    visibility: visible;
}

main img {
    max-width: 100%;
    width: auto;
    height: auto;
}

@media (max-width: 1023px) {
    .section h2#save-more-onyour-pets{
      padding: var(--spacing-l) 0;
      margin: 0;
      text-align: center;
    }
}

main > .section > div {
  max-width: var(--desktop-max-width);
  padding: 0 var(--site-gutter);
  margin: 0 auto;
}

@media (min-width: 768px) {
  main > .section > div {
    padding: 0 var(--grid-gutter-m);
  }
}

.default-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.section.fragment-container .cards-container {
    display: grid;
    gap: 0;
}

.section.fragment-container .cards-container .default-content-wrapper {
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */
}

.section.fragment-container.blog-cards-container .cards-container .default-content-wrapper {
    justify-content: center;
}

.section .category-cards-section .default-content-wrapper {
    justify-content: start;
}

.splide{
  position:relative;
  visibility:hidden
}

.splide.is-initialized,.splide.is-rendered{
  visibility:visible
}

 /* Moving generic styles from cards.css  */
.section.blog-cards-container > .default-content-wrapper,
.section.carousel-container > .default-content-wrapper {
    display: contents;
    align-items: center;
}

.section.cards-container,
.section.blog-cards-container,
.section.carousel-container{
    position: relative;
    padding-bottom: 0;
}

.fragment.cards-container h1,
.fragment.blog-cards-container h1,
.section.cards-container h1,
.section.blog-cards-container h1 {
 margin-bottom: var(--spacing-xxl);
}
.fragment.carousel-container h1,
.section.carousel-container h1 {
 margin-bottom: var(--spacing-lii);
}

.section.cards-container > .default-content-wrapper h2,
.section.blog-cards-container > .default-content-wrapper h2,
.section.carousel-container > .default-content-wrapper h2{
    text-align: center;
}

.section.cards-container > .default-content-wrapper .button-container,
.section.blog-cards-container > .default-content-wrapper .button-container,
.section.carousel-container > .default-content-wrapper .button-container
{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 0 var(--spacing-m);
    display: block;
}

.section.carousel-container > .default-content-wrapper .button-container,
.section.fragment-container .carousel-container .default-content-wrapper p.button-container {
    width: unset;
    left: 50%;
    transform: translate(-50%, 0);
}

.section.fragment-container .carousel-container .default-content-wrapper p.button-container {
    bottom: calc(-72px);
}


/* .section.blog-cards-container .default-content-wrapper p.button-container,
.section .carousel-container .default-content-wrapper p.button-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 0 var(--spacing-m);
    display: block;
} */

.section.fragment-container {
    position: relative;
}

.section .default-content-wrapper {
    display: flex;
}

.product-details > div:not(.product-details__wrapper) {
    display: none;
}

.product-carousel:not([data-block-status="loaded"]) {
    display: none;
}
.product-carousel:not([data-block-status="loaded"]) {
    display: none;
}

.product-details .prescription-icon {
    display: none;
}

.product-gallery .video-thumb {
  height: 100%;
  display: flex;
  justify-content: stretch;
  align-items: center;
}

.product-gallery .video-thumb img{
  border-radius: var(--border-radius-s);
  min-height: 380px;
  object-fit: cover;
}

/* Min height for elements to combat layout shift */
body > header{
    min-height: 196px;
}

@media(min-width: 768px) {
    body > header{
        min-height: 112px;
    }

    .breadcrumb-container {
        min-height: 67px;
        display: block !important;
    }
}

@media(min-width: 1024px) {
    body > header{
        min-height: 213px;
    }
}

.product-details-container {
    min-height: 75vh;
    /*display: block !important;*/
}

.product-details-wrapper {
    min-height: 2200px;
}


.disclaimer-data-sheet {
    min-height: 24px;
}

/* PDOLP-962: I understand this is a CLS workaround, but it was causing issues with the title review stars positioning */
.product-details__header {
    min-height: 64px;
}

.product-details__savings{
    min-height: 72px;
    position: absolute;
    top: 0;
    right: 0;
}

.product-details__header.has-savings .product-details__name  {
    padding-right: 100px;
}

.product-details__payment-providers {
  min-height: 42px;
}

.product-details__accreditations {
    min-height: 126px;
}

@media(min-width: 768px) {
    .product-details-container {
        margin-top: var(--spacing-miii) !important;
    }

    .product-details-wrapper {
        min-height: 1500px;
    }
}

.product-details__configuration {
    min-height: 380px;
}

.product-details__gallery .gallery-item {
    aspect-ratio: 1/1;
}

.quick-view-modal .product-details__gallery .gallery-item, .product-details__gallery {
    aspect-ratio: auto;
}

@media(min-width: 1024px) {
    .product-details__gallery .gallery-item, .product-details__gallery {
        min-height: 567px
    }

    .quick-view-modal .product-details__gallery .gallery-item, .product-details__gallery {
        min-height: unset;
    }

    .product-details-wrapper {
        min-height: 1400px;
    }
}

/**
 * Skeleton styles for product details to give SSR layout.
 */
 .product-details img, .product-details picture {
     aspect-ratio: 1/1;
     display: block;
 }
 .product-details-container {
     /**
     * Hide the original section that houses the PDP dropin.
     */
     display: none;
 }

 .product-details__header {
     display: grid;
     min-height: 64px;
     gap: var(--spacing-m);
     margin-bottom: var(--spacing-l);
 }

 .product-details > div:not(.product-details__wrapper) {
     display: none;
 }

 .product-details__wrapper.skeleton .product-details__name {
     margin: 0;
     font-size: var(--font-size-h4);
 }

.product-details__wrapper.skeleton.hidden {
  display: none;
}

.product-details__wrapper.skeleton ~ div:not(.product-details__wrapper):not(.view-full-details-container) {
  display: none;
}

.product-details__wrapper {
    display: grid;
}

@media (min-width: 768px) {
    .product-details__wrapper {
        grid-template-columns: repeat(var(--grid-3-columns), 1fr);
        grid-column-gap: var(--spacing-l);
        position: relative;
    }

    .product-details__left-column {
        display: block;
        grid-column: 1 / span 6;
    }

    .product-details__right-column {
        grid-column: 7 / span 6;
    }

    .product-details__right-column .product-details__gallery {
        display: none;
    }

    .product-details__wrapper.skeleton .product-details__name {
        font-size: var(--font-size-h3);
    }
}

/* Completely different approach - no ::after element */
.shimmer-animation {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #F9F9F9 0%,
    #E0E0E0 50%,
    #F9F9F9 100%
  );
  background-size: 200% 100%;
  animation: shimmerBackground 1.2s infinite linear;
  border-radius: var(--border-radius-xs);
}

@keyframes shimmerBackground {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* No ::after element = no compositing issues */
.shimmer-animation.shimmer-removed {
  animation: none;
  background: #F9F9F9;
}

.product-details__status.shimmer-animation {
  display: block;
  min-height: 33px;
  width: 100%;
  grid-column: 1 / span 3;
  grid-row: 2 / span 1;
}
.product-details__subscriptions.shimmer-animation {
  min-height: 420px;
}
.product-details__radio-options.shimmer-animation {
    min-height: 96px;
    margin: 0 0 var(--spacing-m) 0;
}
.product-details__price {
    min-height: 38px;
}
.product-details__price:has(.pdp-vet-price-container){
  min-height: 62px;
}
.product-details__price.hidden {
  min-height: 0;
}
.product-details__price.hidden > *{
  display: none;
}