:root {
  --container-inline-padding: 16px;
  --section-block-padding-s: 1.5rem;
  --section-block-padding-l: 2rem;
  --block-padding-s: 0.625rem;
  --block-padding-m: 1rem;
  --block-padding-l: 1rem;

  --color-primary: #ffffff;
  --color-secondary: var(--foreground);
  --color-text: var(--color-text-neutral-medium);
  --color-button: rgb(233 28 36);
  --color-button-text: #ffffff;
  --color-highlight-card: var(--foreground);
  --color-subheader: var(--color-text-neutral-medium);

  --hover-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
  :root {
    --container-inline-padding: 24px;
    --section-block-padding-s: 2rem;
    --section-block-padding-l: 3rem;
    --block-padding-m: 1.5rem;
    --block-padding-l: 2.625rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --container-inline-padding: 80px;
    --section-block-padding-l: 5rem;
  }
}

.container {
  max-width: 1280px;
}

:is(.text-content, .cke_editable) {
  color: inherit !important;

  & > *:not(:first-child) {
    margin-block-start: 1.5rem;
  }

  & > *:not(:last-child) {
    margin-block-end: 1.5rem;
  }
}

/* Overlay gradient styling */
.paragraph--type--c-slide .overlay-gradient {
  pointer-events: none;
  background-image: linear-gradient(
    to top right,
    rgb(0 0 0 / 0.3) 0%,
    rgb(0 0 0 / 0.15) 40%,
    rgb(0 0 0 / 0) 70%
  );
}

.confusing-reaction::before {
  content: "🤔";
}

.fun-reaction::before {
  content: "🎉";
}

.great-reaction::before {
  content: "❤︝";
}

.helpful-reaction::before {
  content: "👝";
}

/* Section header paragraph type */

.section-header {
  padding-inline: var(--container-inline-padding);
  padding-block-start: var(--section-block-padding-l);
  padding-block-end: var(--section-block-padding-s);
  color: var(--color-text);

  & .Display-L,
  & .Parra-XL {
    padding-block-end: var(--block-padding-m);
  }
}

.section-header__content {
  border-bottom: 1px solid var(--color-text);
}

/* Retailer cards paragraph type */

:root {
  --retailer-card-background: #ffffff;
  --retailer-card-border-radius: 20px;
  --retailer-card-padding: 30px;
  --retailer-card-gap: 15px;
  --retailer-card-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  :root {
    --retailer-card-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  :root {
    --retailer-card-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  :root {
    --retailer-card-gap: 30px;
  }
}

.retailer-card {
  padding-inline: var(--container-inline-padding);
  padding-block-start: var(--section-block-padding-l);
  padding-block-end: var(--section-block-padding-s);
  color: var(--color-text);

  & .Display-M {
    padding-block-end: var(--block-padding-l);
  }

  & .Display-M.descript-exists {
    padding-block-end: 0;
  }
}

.retailer-card__items {
  display: grid;
  grid-template-columns: var(--retailer-card-columns);
  grid-auto-rows: 1fr;
  gap: var(--retailer-card-gap);
}

.retailer-card__item {
  position: relative;
  background-color: var(--retailer-card-background);
  padding: var(--retailer-card-padding);
  border-radius: var(--retailer-card-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;

  &:hover {
    box-shadow: var(--hover-box-shadow);
  }
}

.retailer-card__link {
  position: absolute;
  inset: 0;
  font-size: 0;
  z-index: 1;
}

.retailer-card__image {
  & img {
    max-width: 180px;
    width: 100%;
  }
}

/* Navigation cards paragraph type */

:root {
  --navigation-card-gap: 15px;
  --navigation-card-columns: 1fr;
  --navigation-card-rows: 120px;
  --navigation-card-border-radius: 10px;
  --navigation-card-padding: 10px;
}

@media (min-width: 600px) {
  :root {
    --navigation-card-columns: repeat(2, minmax(0, 620px));
    --navigation-card-rows: 120px;
  }
}

@media (min-width: 768px) {
  :root {
    --navigation-card-columns: repeat(2, minmax(0, 620px));
    --navigation-card-rows: 180px;
  }

  header {
    .Navigation {
      line-height: 24px;
      display: flex;
    }
  }
}

@media (min-width: 1024px) {
  :root {
    --navigation-card-rows: 220px;
    --navigation-card-padding: 20px;
  }
}

@media (min-width: 1440px) {
  :root {
    --navigation-card-gap: 30px;
    --navigation-card-rows: 250px;
  }

  header {
    .Navigation {
      line-height: 24px;
      display: flex;
    }
  }
}

.navigation-card {
  padding-inline: var(--container-inline-padding);
  padding-block: var(--section-block-padding-l);
}

.navigation-card__items {
  display: grid;
  grid-template-columns: var(--navigation-card-columns);
  grid-auto-rows: var(--navigation-card-rows);
  gap: var(--navigation-card-gap);
}

.navigation-card__item {
  background-color: var(--color-highlight-card);
  border-radius: var(--navigation-card-border-radius);
  color: var(--color-text);
  overflow: hidden;
  display: flex;
  position: relative;

  & .Display-S {
    padding-block-end: var(--block-padding-s);
  }

  & .Parra-M {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  & a::before {
    content: "";
    position: absolute;
    inset: 0;
  }

  &:hover {
    box-shadow: var(--hover-box-shadow);
  }
}

.navigation-card__image {
  aspect-ratio: 1/1;
  height: 100%;

  & * {
    width: 100%;
    height: 100%;
  }

  & img {
    object-fit: cover;
  }
}

.navigation-card__content {
  padding: var(--navigation-card-padding);
}

/* Accordion component styles */

.accordion .w-6 {
    width: 1.6rem;
}

/* Manga paragraph type */

.manga-embed {
  padding-inline: var(--container-inline-padding);
  padding-block: var(--section-block-padding-l);
  color: var(--color-text);
}

.manga-embed__content {
  margin-inline: auto;
  max-width: 700px;

  & .Display-M {
    text-align: center;
    padding-block-end: var(--block-padding-l);
  }
}

/* Input search bar */

input#search-bar {
  outline-color: transparent;

  &:focus {
    outline: none;
  }
}

/* Reset all text styles */
.reset-text {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  margin-block: inherit;
  line-height: inherit;
  font-style: inherit;
}

/* Image text and CTA paragraph - ensure heading tags inherit color from container */
.paragraph--type--image-text-and-cta h1,
.paragraph--type--image-text-and-cta h2,
.paragraph--type--image-text-and-cta h3 {
  color: inherit;
}

/* The styling of the brand name field for product page */
.brand-label a {
  color: var(--color-button);
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.brand-label a:hover {
  color: var(--color-button);
}

.brand-label a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.brand-label a:hover::after,
.brand-label a:focus-visible::after {
  transform: scaleX(1);
  color: var(--color-button);
}

/* The styling of View All button for product card */
.carousel-list .carousel-card a.button-standard:hover {
  color: var(--color-button-text);
}

.carousel-card.product-card .carousel-card-button {
  height: 100px;
  display: flex;
  justify-content: center;
}

.carousel-button.carousel-card.product-card {
    display: flex;
    align-items: center;
}

/* Thumbnails Carousel (zoom and lightbox) */

.thumbnails-carousel .carousel-track {
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.thumbnails-carousel .frame {
  touch-action: pinch-zoom;
  cursor: zoom-in;
  position: relative;

  &.hovering {
    & .lens {
      opacity: 1;
    }

    & .carousel-track {
      overflow: hidden;
    }
  }

  & img {
    user-select: none;
    -webkit-user-drag: none;
  }
}

.thumbnails-carousel .lens {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.thumbnails-carousel .hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(20,20,20,0.68);
  color: #fff;
  font-size: 0.7rem;
  padding: 4px 9px;
  border-radius: 20px;
  pointer-events: none;
}

.thumbnails-carousel .carousel-track > *,
.thumbnails-carousel .thumbnails .thumb {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.thumbnails-carousel-lightbox {
  padding: 0;
  border: none;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  background: transparent;
  place-content: center;
  color: #fff;

  &::backdrop {
    background: rgba(37, 41, 48, 0.7);
    backdrop-filter: blur(12px);
  }
}

.thumbnails-carousel-lightbox button {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 48px;
  height: 48px;
  text-indent: -100px;
  background: url("/themes/custom/purina/js/images/icon-close-small.svg") no-repeat center;
  background-size: cover;
  border: none;
  cursor: pointer;
  overflow: hidden;
}

.thumbnails-carousel-lightbox img {
  touch-action: pinch-zoom;
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
}

.thumbnails-carousel-lightbox iframe {
  background-color: rgba(20,20,20,0.68);
  width: 100%;
  min-height: 75vh;
}

.thumbnails-carousel-lightbox-title {
  position: absolute;
  top: -3rem;
}

.thumbnails-carousel-lightbox .carousel-list {
  padding-top: 3rem;
  gap: 80px;
}

/* Video carousel */

.carousel-list .custom-video-wrapper {
  width: 218px;
  height: 300px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.2s;

  @media (min-width: 768px) {
    width: 232px;
    height: 312px;
  }

  @media (min-width: 1440px) {
    width: 416px;
    height: 520px;
    border-radius: 24px;
  }
}

.carousel-list .custom-video-wrapper:has(.custom-play-button:hover, .video-details:hover) {
  border: 1px solid var(--Color-Interface-Hover-Stroke, #cfcfcf);
  background: var(--Color-Greys-White-100, #fff);
  box-shadow: 0px 8px 64px 0px rgba(0, 0, 0, 0.06);
  cursor: pointer;

  & .button-standard {
    background-color: rgb(37 41 48 / 1);
  }
}

.carousel-list .custom-video-wrapper .button-standard {
  width: 52px;
  padding-inline: 18px;
}

.carousel-list .custom-video-wrapper .video-details .Title-S:hover {
  cursor: text;
}

.carousel-list .custom-video-wrapper .video-thumbnail-image img {
  object-fit: cover;
  height: 100%;
}