.jph,
.jph * {
  box-sizing: border-box;
}

.jph {
  --jph-primary: #008dcc;
  --jph-primary-hover: #003c71;
  --jph-primary-soft: #eaf4ff;
  --jph-on-primary: #ffffff;
  --jph-accent: #f5c400;
  --jph-success: #14945f;
  --jph-danger: #ed2634;
  --jph-surface: #ffffff;
  --jph-surface-alt: #f4f8fb;
  --jph-line: #e7edf2;
  --jph-ink: #142b3f;
  --jph-muted: #6c7b87;
  --jph-font-family: inherit;
  --jph-font-heading: 25px;
  --jph-font-category: 14px;
  --jph-font-banner-title: 27px;
  --jph-font-banner-text: 13px;
  --jph-font-button: 13px;
  --jph-font-product-name: 14px;
  --jph-font-price: 23px;
  --jph-font-pill: 13px;
  --jph-banner-title-transform: uppercase;
  --jph-radius-category: 14px;
  --jph-radius-banner: 18px;
  --jph-radius-product: 18px;
  --jph-radius-pill: 999px;
  --jph-radius-button: 10px;
  --jph-border-width: 1px;
  --jph-margin-top: 28px;
  --jph-margin-bottom: 34px;
  --jph-title-gap: 14px;
  --jph-category-columns: 6;
  --jph-category-gap: 13px;
  --jph-category-height: 82px;
  --jph-category-padding-x: 16px;
  --jph-category-padding-y: 14px;
  --jph-main-gap: 18px;
  --jph-banner-gap: 14px;
  --jph-banner-height: 435px;
  --jph-banner-content-padding: 22px;
  --jph-card-width: 304px;
  --jph-product-width: 286px;
  --jph-product-padding: 15px;
  --jph-pill-columns: 4;
  --jph-pill-gap: 12px;
  --jph-pill-height: 62px;
  --jph-pill-padding-x: 16px;
  --jph-pill-padding-y: 9px;
  --jph-shadow: 0 5px 18px rgba(5, 46, 77, .09);
  --jph-shadow-hover: 0 16px 34px rgba(5, 46, 77, .18);
  --jph-hover-lift: 3px;
  --jph-image-scale: 1.04;
  --jph-duration: 220ms;
  --jph-mobile-category-width: 165px;
  --jph-mobile-category-height: 76px;
  --jph-mobile-banner-width: 82vw;
  --jph-mobile-banner-height: 410px;
  --jph-mobile-gap: 11px;
  --jph-mobile-side-bleed: 15px;
  position: relative;
  width: 100%;
  margin: var(--jph-margin-top) 0 var(--jph-margin-bottom);
  color: var(--jph-ink);
  font-family: var(--jph-font-family);
  line-height: 1.35;
}

.jph a {
  color: inherit;
  text-decoration: none;
}

.jph a:hover,
.jph a:focus {
  color: inherit;
  text-decoration: none;
}

.jph img {
  display: block;
  max-width: 100%;
}

.jph__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--jph-title-gap);
}

.jph__section-title {
  margin: 0;
  color: var(--jph-ink);
  font-size: var(--jph-font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.jph__categories {
  display: grid;
  grid-template-columns: repeat(var(--jph-category-columns), minmax(0, 1fr));
  gap: var(--jph-category-gap);
  margin-bottom: var(--jph-main-gap);
}

.jph__category {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--jph-category-height);
  padding: var(--jph-category-padding-y) 43% var(--jph-category-padding-y) var(--jph-category-padding-x);
  overflow: hidden;
  border: var(--jph-border-width) solid transparent;
  border-radius: var(--jph-radius-category);
  background: var(--jph-category-bg, var(--jph-primary-soft));
  color: var(--jph-category-color, var(--jph-ink));
  transition: transform var(--jph-duration) ease, box-shadow var(--jph-duration) ease, border-color var(--jph-duration) ease;
}

.jph__category:hover,
.jph__category:focus,
.jph__category.is-active {
  z-index: 1;
  border-color: var(--jph-primary);
  box-shadow: var(--jph-shadow-hover);
  transform: translateY(calc(0px - var(--jph-hover-lift)));
}

.jph__category.is-active::after {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jph-primary);
  content: '';
}

.jph__category-title {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--jph-font-category);
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.jph__category-media {
  position: absolute;
  top: 5px;
  right: 4px;
  bottom: 5px;
  display: flex;
  width: 43%;
  align-items: center;
  justify-content: center;
}

.jph__category-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(14, 44, 67, .15));
  transition: transform var(--jph-duration) ease;
}

.jph__category:hover .jph__category-media img {
  transform: scale(var(--jph-image-scale)) rotate(-1deg);
}

.jph__category-fallback {
  position: absolute;
  top: 17px;
  right: 18px;
  display: flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--jph-surface);
  opacity: .78;
}

.jph__category-fallback svg {
  width: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.jph__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--jph-product-width);
  gap: var(--jph-main-gap);
  align-items: stretch;
}

.jph__main--no-product {
  grid-template-columns: minmax(0, 1fr);
}

.jph__main--no-slider {
  grid-template-columns: minmax(220px, var(--jph-product-width));
  justify-content: end;
}

.jph__slider-shell {
  position: relative;
  min-width: 0;
}

.jph__track {
  display: flex;
  gap: var(--jph-banner-gap);
  height: calc(var(--jph-banner-height) + 3px);
  padding: 0 2px 3px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.jph__track::-webkit-scrollbar,
.jph__categories::-webkit-scrollbar,
.jph__pills::-webkit-scrollbar {
  display: none;
}

.jph__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}


.jph__story-progress {
  display: flex;
  gap: 4px;
  min-width: 0;
}

.jph__story-progress--banners {
  position: relative;
  z-index: 8;
  width: 100%;
  padding: 0 10px 8px;
  pointer-events: auto;
}

.jph__story-progress--products {
  flex: 0 0 auto;
  padding: 8px var(--jph-product-padding) 0;
}

.jph__story-segment {
  position: relative;
  display: block;
  height: 4px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  flex: 1 1 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: rgba(255, 255, 255, .48);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  cursor: pointer;
}

.jph__story-progress--products .jph__story-segment {
  background: var(--jph-line);
  box-shadow: none;
}

.jph__story-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--jph-primary);
  transition: none;
}

.jph__story-progress--banners .jph__story-segment {
  height: 3px;
  background: rgba(var(--jph-primary-rgb), .16);
  box-shadow: none;
}

.jph__story-progress--banners .jph__story-fill {
  background: var(--jph-primary);
  box-shadow: none;
}

.jph__story-segment.is-complete .jph__story-fill {
  width: 100%;
}

.jph__story-segment:focus {
  box-shadow: 0 0 0 2px rgba(var(--jph-primary-rgb), .22);
}

.jph__banner {
  position: relative;
  flex: 0 0 max(var(--jph-card-width), 304px);
  width: max(var(--jph-card-width), 304px);
  height: var(--jph-banner-height);
  overflow: hidden;
  border: var(--jph-border-width) solid transparent;
  border-radius: var(--jph-radius-banner);
  background: var(--jph-banner-bg, var(--jph-primary));
  color: var(--jph-banner-color, var(--jph-on-primary));
  box-shadow: var(--jph-shadow);
  scroll-snap-align: start;
  isolation: isolate;
  transition: transform var(--jph-duration) ease, box-shadow var(--jph-duration) ease, border-color var(--jph-duration) ease;
}

.jph__banner:hover,
.jph__banner:focus {
  border-color: var(--jph-primary);
  box-shadow: var(--jph-shadow-hover);
  transform: translateY(calc(0px - var(--jph-hover-lift)));
}

.jph__banner-picture,
.jph__banner-picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.jph__banner-picture img {
  object-fit: cover;
  transition: transform var(--jph-duration) ease;
}

.jph__banner:hover .jph__banner-picture img {
  transform: scale(var(--jph-image-scale));
}

.jph__banner-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(var(--jph-banner-bg-rgb, 1,25,48), 0) 0%, rgba(var(--jph-banner-bg-rgb, 1,25,48), .02) 28%, rgba(var(--jph-banner-bg-rgb, 1,25,48), .10) 40%, rgba(var(--jph-banner-bg-rgb, 1,25,48), .26) 50%, rgba(var(--jph-banner-bg-rgb, 1,25,48), .58) 64%, rgba(var(--jph-banner-bg-rgb, 1,25,48), .84) 78%, rgba(var(--jph-banner-bg-rgb, 1,25,48), .97) 90%, rgba(var(--jph-banner-bg-rgb, 1,25,48), 1) 100%);
}

.jph__banner-content {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 53%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--jph-banner-content-padding);
}

.jph__banner-badge {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  max-width: calc(100% - 28px);
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--jph-primary-hover);
  box-shadow: 0 8px 24px rgba(17, 34, 51, .10);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.jph__banner-badge-icon-wrap {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: hidden;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(9, 26, 43, .14);
}

.jph__banner-badge-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  max-width: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%);
}

.jph__banner-badge--no-icon {
  min-height: 40px;
  padding-left: 15px;
}

.jph__banner-badge-text {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jph__banner-title {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--jph-banner-title-lines, 3);
  margin-bottom: 8px;
  font-size: var(--jph-banner-title-size, var(--jph-font-banner-title));
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-transform: var(--jph-banner-title-transform);
  text-shadow: 0 2px 15px rgba(0, 0, 0, .18);
}

.jph__banner-text {
  display: block;
  max-width: 95%;
  margin-bottom: 15px;
  color: inherit;
  font-size: var(--jph-font-banner-text);
  font-weight: 600;
  line-height: 1.32;
  opacity: .9;
}

/* Banner layouts ------------------------------------------------------ */
.jph__banner--fit-contain .jph__banner-picture img {
  object-fit: contain;
}

.jph__banner--fit-cover .jph__banner-picture img {
  object-fit: cover;
}

.jph__banner--position-top .jph__banner-picture img {
  object-position: center top;
}

.jph__banner--position-center .jph__banner-picture img {
  object-position: center center;
}

.jph__banner--position-bottom .jph__banner-picture img {
  object-position: center bottom;
}

.jph__banner--no-image-zoom:hover .jph__banner-picture img {
  transform: none;
}

.jph__banner--align-center .jph__banner-content {
  align-items: center;
  text-align: center;
}

.jph__banner--align-center .jph__banner-title,
.jph__banner--align-center .jph__banner-text {
  margin-right: auto;
  margin-left: auto;
}

.jph__banner--align-right .jph__banner-content {
  align-items: flex-end;
  text-align: right;
}

.jph__banner--align-right .jph__banner-title,
.jph__banner--align-right .jph__banner-text {
  margin-left: auto;
}

.jph__banner--layout-split {
  background: var(--jph-banner-bg, var(--jph-primary));
}

.jph__banner--layout-split .jph__banner-picture {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  height: var(--jph-banner-image-height, 55%);
  overflow: hidden;
  background: var(--jph-surface-alt);
}

.jph__banner--layout-split .jph__banner-picture img {
  background: var(--jph-surface-alt);
}

.jph__banner--layout-split .jph__banner-shade {
  display: none;
}

.jph__banner--layout-split .jph__banner-content {
  top: var(--jph-banner-image-height, 55%);
  bottom: 0;
  min-height: 0;
  justify-content: center;
  overflow: hidden;
  padding-top: 20px;
  background: var(--jph-banner-bg, var(--jph-primary));
}

.jph__banner--layout-split .jph__banner-badge {
  top: 14px;
  left: 14px;
}

.jph__banner--layout-split .jph__banner-title {
  margin-bottom: 6px;
  line-height: 1.04;
  text-shadow: none;
}

.jph__banner--layout-split .jph__banner-text {
  max-width: 100%;
  margin-bottom: 11px;
  font-size: calc(var(--jph-font-banner-text) - 1px);
  line-height: 1.24;
}


.jph__banner--layout-image {
  background: var(--jph-surface-alt);
}

.jph__banner--layout-image .jph__banner-picture,
.jph__banner--layout-image .jph__banner-picture img {
  inset: 0;
  height: 100%;
}

.jph__banner--layout-image .jph__banner-picture img {
  object-fit: cover;
}

.jph__banner--layout-image .jph__banner-shade,
.jph__banner--layout-image .jph__banner-badge,
.jph__banner--layout-image .jph__banner-content {
  display: none;
}

.jph__banner-button,
.jph__day-button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--jph-radius-button);
  background: var(--jph-surface);
  color: var(--jph-primary-hover);
  font-size: var(--jph-font-button);
  font-weight: 800;
  line-height: 1;
}

.jph__banner-button svg,
.jph__day-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform var(--jph-duration) ease;
}

.jph__banner:hover .jph__banner-button svg,
.jph__day-button:hover svg {
  transform: translateX(3px);
}

.jph__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--jph-border-width) solid var(--jph-line);
  border-radius: 50%;
  outline: none;
  background: var(--jph-surface);
  color: var(--jph-primary-hover);
  box-shadow: var(--jph-shadow-hover);
  opacity: 0;
  transform: translateY(-50%) scale(.92);
  transition: opacity var(--jph-duration) ease, transform var(--jph-duration) ease;
}

.jph__slider-shell--story .jph__arrow {
  top: calc(50% + 6px);
}

.jph__main--banner-story .jph__day {
  margin-top: 11px;
}

.jph__slider-shell:hover .jph__arrow,
.jph__arrow:focus {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.jph__arrow--prev {
  left: 10px;
}

.jph__arrow--next {
  right: 10px;
}

.jph__arrow svg {
  width: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.jph__arrow[disabled] {
  cursor: default;
  opacity: 0 !important;
}

.jph__day {
  position: relative;
  display: flex;
  min-width: 0;
  height: calc(var(--jph-banner-height) + 3px);
  flex-direction: column;
  overflow: hidden;
  border: calc(var(--jph-border-width) + 1px) solid var(--jph-primary);
  border-radius: var(--jph-radius-product);
  background: var(--jph-surface);
  box-shadow: var(--jph-shadow);
  transition: transform var(--jph-duration) ease, box-shadow var(--jph-duration) ease;
}

.jph__day:hover {
  box-shadow: var(--jph-shadow-hover);
  transform: translateY(calc(0px - var(--jph-hover-lift)));
}


.jph__day-nav {
  position: absolute;
  z-index: 9;
  top: 46%;
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--jph-line);
  border-radius: 50%;
  outline: none;
  background: rgba(255, 255, 255, .94);
  color: var(--jph-primary-hover);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  opacity: .78;
  transform: translateY(-50%);
  transition: opacity var(--jph-duration) ease, transform var(--jph-duration) ease, background var(--jph-duration) ease;
}

.jph__day:hover .jph__day-nav,
.jph__day-nav:focus,
.jph__day-nav:hover {
  opacity: 1;
  background: var(--jph-surface);
  transform: translateY(-50%) scale(1.04);
}

.jph__day-nav--prev {
  left: 8px;
}

.jph__day-nav--next {
  right: 8px;
}

.jph__day-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.jph__day-slides {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
}

.jph__day-slide {
  position: absolute;
  inset: 0;
  display: flex;
  min-height: 0;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(12px);
  transition: opacity var(--jph-duration) ease, transform var(--jph-duration) ease, visibility 0s linear var(--jph-duration);
}

.jph__day-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition-delay: 0s;
}

.jph__day-head {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px var(--jph-product-padding) 8px;
}

.jph__day-label {
  color: var(--jph-ink);
  font-size: 18px;
  font-weight: 900;
}

.jph__day-discount {
  display: inline-flex;
  min-width: 46px;
  height: 29px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--jph-danger);
  color: var(--jph-on-primary);
  font-size: 13px;
  font-weight: 900;
}

.jph__timer {
  margin: 0 var(--jph-product-padding) 5px;
  padding: 7px 10px;
  border-radius: var(--jph-radius-button);
  background: var(--jph-surface-alt);
  text-align: center;
}

.jph__timer-label {
  display: block;
  margin-bottom: 4px;
  color: var(--jph-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.jph__timer-values {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.jph__timer-values > span {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.jph__timer-values b {
  min-width: 22px;
  color: var(--jph-primary-hover);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.jph__timer-values small {
  color: var(--jph-muted);
  font-size: 8px;
  text-transform: uppercase;
}

.jph__timer-values i {
  color: var(--jph-muted);
  font-size: 12px;
  font-style: normal;
}

.jph__day-image-link {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 3px calc(var(--jph-product-padding) + 4px) 0;
  overflow: hidden;
}

.jph__day-image-link img {
  width: 100%;
  height: 100%;
  max-height: 205px;
  object-fit: contain;
  transition: transform var(--jph-duration) ease;
}

.jph__day:hover .jph__day-image-link img {
  transform: scale(var(--jph-image-scale));
}

.jph__day-body {
  padding: 8px var(--jph-product-padding) calc(var(--jph-product-padding) - 1px);
}

.jph__day-name {
  display: -webkit-box;
  min-height: 39px;
  margin-bottom: 6px;
  overflow: hidden;
  color: var(--jph-ink);
  font-size: var(--jph-font-product-name);
  font-weight: 700;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.jph__day-name:hover {
  color: var(--jph-primary);
}

.jph__day-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  color: var(--jph-muted);
  font-size: 11px;
}

.jph__day-meta svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.jph__day-price {
  display: flex;
  min-height: 29px;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}

.jph__day-price-current {
  color: var(--jph-danger);
  font-size: var(--jph-font-price);
  font-weight: 900;
  letter-spacing: -.03em;
}

.jph__day-price-old {
  color: var(--jph-muted);
  font-size: 13px;
  text-decoration: line-through;
}

.jph__day-button {
  width: 100%;
  min-height: 39px;
  background: var(--jph-primary);
  color: var(--jph-on-primary);
  transition: background var(--jph-duration) ease, transform var(--jph-duration) ease;
}

.jph__day-button:hover,
.jph__day-button:focus {
  background: var(--jph-primary-hover);
  color: var(--jph-on-primary);
  transform: translateY(-1px);
}

.jph__pills {
  display: grid;
  grid-template-columns: repeat(var(--jph-pill-columns), minmax(0, 1fr));
  gap: var(--jph-pill-gap);
  margin-top: var(--jph-main-gap);
}

.jph__pill {
  display: flex;
  min-width: 0;
  min-height: var(--jph-pill-height);
  align-items: center;
  gap: 12px;
  padding: var(--jph-pill-padding-y) var(--jph-pill-padding-x);
  border: var(--jph-border-width) solid transparent;
  border-radius: var(--jph-radius-pill);
  background: var(--jph-pill-bg, var(--jph-primary-soft));
  transition: transform var(--jph-duration) ease, border-color var(--jph-duration) ease, box-shadow var(--jph-duration) ease;
}

.jph__pill:hover,
.jph__pill:focus {
  border-color: var(--jph-primary);
  box-shadow: var(--jph-shadow-hover);
  transform: translateY(calc(0px - var(--jph-hover-lift)));
}

.jph__pill-icon {
  display: flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--jph-surface);
}

.jph__pill-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jph__pill-icon--generated {
  background: var(--jph-pill-accent, var(--jph-primary));
  color: var(--jph-on-primary);
}

.jph__pill-icon--generated svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.jph__pill-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  color: var(--jph-ink);
  font-size: var(--jph-font-pill);
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.jph--animation-off *,
.jph--animation-off *::before,
.jph--animation-off *::after {
  transition-duration: 0ms !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .jph__categories {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .jph__main {
    grid-template-columns: minmax(0, 1fr) min(var(--jph-product-width), 270px);
  }

  .jph__pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .jph__category--hide-desktop {
    display: none;
  }
}

@media (max-width: 767px) {
  .jph {
    margin-top: min(var(--jph-margin-top), 20px);
    margin-bottom: min(var(--jph-margin-bottom), 26px);
  }

  .jph__section-title {
    font-size: min(var(--jph-font-heading), 21px);
  }

  .jph__categories {
    display: grid;
    grid-auto-columns: minmax(max(var(--jph-mobile-category-width), 165px), 47vw);
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: repeat(2, var(--jph-mobile-category-height));
    gap: var(--jph-mobile-gap);
    margin-right: calc(0px - var(--jph-mobile-side-bleed));
    margin-bottom: var(--jph-main-gap);
    padding-right: var(--jph-mobile-side-bleed);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .jph__category {
    height: var(--jph-mobile-category-height);
    padding: min(var(--jph-category-padding-y), 11px) 39% min(var(--jph-category-padding-y), 11px) min(var(--jph-category-padding-x), 12px);
    border-radius: min(var(--jph-radius-category), 16px);
    scroll-snap-align: start;
  }

  .jph__category-title {
    font-size: min(var(--jph-font-category), 12.8px);
    -webkit-line-clamp: 3;
  }

  .jph__category--hide-mobile {
    display: none;
  }

  .jph__category:hover,
  .jph__category:focus {
    transform: none;
  }

  .jph__main,
  .jph__main--no-product,
  .jph__main--no-slider {
    display: block;
  }

  .jph__slider-shell {
    margin-right: calc(0px - var(--jph-mobile-side-bleed));
  }

  .jph__track {
    height: calc(var(--jph-mobile-banner-height) + 6px);
    gap: var(--jph-mobile-gap);
    padding-right: var(--jph-mobile-side-bleed);
  }

  .jph__banner {
    flex-basis: min(max(var(--jph-mobile-banner-width), 84vw), 392px);
    width: min(max(var(--jph-mobile-banner-width), 84vw), 392px);
    height: var(--jph-mobile-banner-height);
    border-radius: min(var(--jph-radius-banner), 24px);
  }

  .jph__banner-content {
    padding: min(var(--jph-banner-content-padding), 21px);
  }

  .jph__banner-title {
    font-size: min(var(--jph-banner-title-size, var(--jph-font-banner-title)), 24px);
  }

  .jph__banner-text {
    font-size: min(var(--jph-font-banner-text), 13px);
  }

  .jph__arrow {
    display: none;
  }

  .jph__main--banner-story .jph__day {
    margin-top: var(--jph-main-gap);
  }

  .jph__day {
    height: auto;
    min-height: 390px;
    margin-top: var(--jph-main-gap);
    border-radius: min(var(--jph-radius-product), 24px);
  }

  .jph__day-slides {
    min-height: 390px;
  }

  .jph__story-progress--banners {
    padding-right: 8px;
    padding-left: 8px;
  }

  .jph__day-nav {
    width: 36px;
    height: 36px;
    opacity: .92;
  }

  .jph__day-image-link {
    min-height: 180px;
    max-height: 215px;
  }

  .jph__day-image-link img {
    max-height: 205px;
  }

  .jph__pills {
    display: flex;
    gap: var(--jph-mobile-gap);
    margin-right: calc(0px - var(--jph-mobile-side-bleed));
    padding-right: var(--jph-mobile-side-bleed);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .jph__pill {
    flex: 0 0 min(78vw, 290px);
    min-height: min(var(--jph-pill-height), 72px);
    scroll-snap-align: start;
  }
}

@media (max-width: 380px) {
  .jph__categories {
    grid-auto-columns: max(max(var(--jph-mobile-category-width), 165px), 49vw);
  }

  .jph__category {
    padding-right: 36%;
  }

  .jph__banner {
    flex-basis: max(88vw, min(92vw, var(--jph-mobile-banner-width)));
    width: max(88vw, min(92vw, var(--jph-mobile-banner-width)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .jph *,
  .jph *::before,
  .jph *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Item colour modes.
 * individual: banner background and text come from each banner.
 * mixed: individual banner background with theme text colour.
 * theme: theme background and text intentionally replace banner values.
 */
.jph--item-colors-individual .jph__banner {
  --jph-banner-color-effective: var(--jph-banner-color, var(--jph-on-primary));
}

.jph--item-colors-mixed .jph__category,
.jph--item-colors-mixed .jph__pill {
  color: var(--jph-ink);
}

.jph--item-colors-mixed .jph__banner {
  --jph-banner-color: var(--jph-on-primary);
  --jph-banner-color-effective: var(--jph-on-primary);
}

.jph--item-colors-theme .jph__banner {
  --jph-banner-bg: var(--jph-primary);
  --jph-banner-bg-rgb: var(--jph-primary-rgb);
  --jph-banner-color: var(--jph-on-primary);
  --jph-banner-color-effective: var(--jph-on-primary);
}

.jph--item-colors-theme .jph__category {
  background: var(--jph-primary-soft) !important;
  color: var(--jph-ink) !important;
}


.jph--item-colors-theme .jph__pill {
  background: var(--jph-surface-alt) !important;
}

.jph--item-colors-theme .jph__pill-icon--generated {
  background: var(--jph-primary) !important;
}

/* Keep banner text tied to the resolved banner colour even when Journal styles links. */
.jph .jph__banner,
.jph .jph__banner:link,
.jph .jph__banner:visited,
.jph .jph__banner:hover,
.jph .jph__banner:focus,
.jph .jph__banner:active,
.jph .jph__banner-content,
.jph .jph__banner-title,
.jph .jph__banner-text {
  color: var(--jph-banner-color-effective, var(--jph-banner-color, var(--jph-on-primary)));
}

/* v1.2.0: protect button colors from Journal/theme link rules */
.jph .jph__day-button,
.jph .jph__day-button:link,
.jph .jph__day-button:visited,
.jph .jph__day-button:hover,
.jph .jph__day-button:focus,
.jph .jph__day-button:active {
  color: var(--jph-on-primary) !important;
}
.jph .jph__day-button svg {
  stroke: currentColor !important;
}
.jph .jph__banner-button,
.jph .jph__banner-button:link,
.jph .jph__banner-button:visited,
.jph .jph__banner-button:hover,
.jph .jph__banner-button:focus,
.jph .jph__banner-button:active {
  color: var(--jph-primary-hover) !important;
}

/* v1.3.0: category palette takes precedence over the legacy global item-colour mode. */
.jph[class*="jph--category-colors-"] .jph__category {
  background: var(--jph-category-bg, var(--jph-primary-soft)) !important;
  color: var(--jph-category-color, var(--jph-ink)) !important;
}