/* /public/css/partial_product_card.css — REPLACE with this full file */

/* ---- surfaces: mirror XXL surfaces but namespaced for pcard ---- */
:root {
  --pcard-surface-0: var(--section-light-background-color);
  --pcard-surface-1: var(--section-medium-background-color);
  --pcard-surface-2: var(--section-dark-background-color);
  --pcard-surface-3: var(--section-darkest-background-color);
  --pcard-surface-4: var(--section-darkestdark-background-color);
}

/* ---- layout & chrome ---- */
.pcard {
  width: 100%;
  margin: 0;
  margin-bottom: 32px;
  min-width: 330px;
}

.pcard-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pcard-surface-1);
  background: var(--pcard-surface-2);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}

.pcard-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 40px;
  padding-right: 40px;
}

.pcard-main {
  display: flex;
  flex-direction: row;
  gap: 28px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 12px;
  margin-bottom: 20px;
  align-items: center;
}

.pcard-shell:not(:has(.pcard-badges)) .pcard-main {
  margin-top: 20px;
}


.pcard-media-wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  align-self: stretch;
  padding-right: 28px;
  border-right: 1px solid var(--pcard-surface-0);
}


.pcard-media-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: visible;
}


.pcard-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  align-self: stretch;
  justify-content: center;
}

.pcard-key-features {
  border-top: 1px solid var(--pcard-surface-0)
}

@media (max-width: 1150px) {
  .pcard-main {
    flex-direction: column;
    gap: 0px;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .pcard-media-wrapper {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--pcard-surface-0)
  }

  .pcard-media-container {
    padding: 0px 20px 20px 20px;
  }

  .pcard-content {
    padding: 20px;
    width: auto;
  }

}

@media (max-width: 825px) {
  .pcard-badges {
    justify-content: space-between;
  }
}

/* ───────────────────────────────────────────────────────────
   Content
─────────────────────────────────────────────────────────── */

.pcard-content-title {
  display: block;
  text-align: center;
}


.pcard-title-mobile {
  display: none;
}

@media (max-width: 1150px) {
  .pcard-content-title {
    display: none;
  }


  .pcard-title-mobile {
    display: block;
    padding: 15px 20px;
  }

}

.pcard-content-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 24px;
}

@media (max-width: 825px) {
  .pcard-content-top {
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 20px;
  }

}

.pcard-content-bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pcard-content-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.pcard-content-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}







/* /public/css/partial_product_card.css — REPLACE ONLY THIS WHOLE TITLE BLOCK (adds title link hover underline) */
/* /public/css/partial_product_card.css — REPLACE ONLY THIS WHOLE TITLE BLOCK */
.pcard-title {
  margin: 0;
  text-transform: capitalize;
  color: var(--white-color-1);
  font-family: var(--identity-font);
  font-weight: 600;
  font-size: var(--ft-24-20);
  line-height: 1.5;
  text-align: left;
  /* 2-line clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.pcard-title.pcard-title--raw {
  text-transform: none;
}

.pcard-title-link {
  color: inherit;
  text-decoration: none;
}

.pcard-title-link:visited {
  color: inherit;
}

/* Always keep keyboard focus styling (accessibility) */
.pcard-title-link:focus-visible {
  text-decoration-line: underline;
  text-decoration-color: var(--card-color, var(--site-color));
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Hover + pointer cursor ONLY on real pointer devices (mouse/trackpad) */
@media (hover: hover) and (pointer: fine) {
  .pcard-title-link {
    cursor: pointer;
  }

  .pcard-title-link:hover {
    text-decoration-line: underline;
    text-decoration-color: var(--card-color, var(--site-color));
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
  }
}



.pcard-features {
  list-style: none;
  margin: 0px 0 0 4px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.pcard-features li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  color: var(--white-color-2);
  font-family: var(--identity-font);
  font-size: var(--ft-16-14);
  font-weight: 400;
  line-height: 1.35;
  margin-left: 2px;
}

.pcard-features li strong {
  font-weight: 600;
}

/* Consistent tick icon across browsers (SVG, not font glyph) */
.pcard-tick {
  color: var(--card-color, var(--site-color));
  display: inline-flex;
  width: 20px;          /* matches your grid first column */
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;     /* small baseline nudge to match your screenshot */
}

.pcard-tick-svg {
  width: 14px;
  height: 14px;
  display: block;
}




/* ───────────────────────────────────────────────────────────
  Brand LInk
─────────────────────────────────────────────────────────── */
.pcard-media-brand-link {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-self: flex-start;
}

.pcard-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white-color-1);
  text-decoration: none;
  text-transform: capitalize;
  font-family: var(--identity-font);
  font-weight: 700;
  font-size: var(--ft-19-18);
  line-height: 1.1;
}


.pcard-price-tag {
  color: var(--white-color-1);
  width: 1em;
  height: 1.1em;
}


@media (max-width: 825px) {
  .pcard-media-brand-link {
    margin-top: 5px;
  }

  .pcard-content-left {
    gap: 0;
  }
}

/* ───────────────────────────────────────────────────────────
   CTA (retailer pill + green buy button for dark mode)
─────────────────────────────────────────────────────────── */

/* /public/css/partial_product_card.css — FULL BLOCK REPLACEMENT (CTA section)
   Replace your entire CTA section with this whole block:
   Start at:  @keyframes pcard-button-sweep
   End at:    the closing brace of the last @media (min-width: 1151px) rule below.

   Goals:
   - Natural (idle) state = more “card-color” / category color (brighter, less muddy)
   - Hover state = darker, higher contrast, with the sweep animation
*/

/* /public/css/partial_product_card.css — FULL BLOCK REPLACEMENT (CTA section)
   Replace your entire CTA section with this whole block:
   Start at:  @keyframes pcard-button-sweep
   End at:    the closing brace of the last @media (min-width: 1151px) rule below.

   Update per request:
   - NO “gets darker” on hover.
   - Hover sweep happens with a LIGHTER sheen only (brighter highlight), while base stays category-colored.
   - Still lifts + shadow on hover for feedback.
*/

@keyframes pcard-button-sweep {
  0% {
    background-position: -95% 0, 0 0;
  }

  50% {
    background-position: 95% 0, 0 0;
  }

  100% {
    background-position: -95% 0, 0 0;
  }
}

.pcard-cta-wrapper {
  max-width: 334px;
  padding: 0;
}

.pcard-cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}

.pcard-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  max-width: 240px;
  box-sizing: border-box;

  padding: 14px 20px;
  border-radius: 8px;
  text-decoration: none;

  font-family: var(--identity-font);
  font-weight: 600;
  font-size: var(--ft-17-16);
  line-height: 1;

  color: var(--white-color-1);

  /* Sheen layer parked until hover */
  background-repeat: no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: -95% 0, 0 0;

  transition:
    box-shadow 0.18s ease-out,
    transform 0.12s ease-out,
    filter 0.18s ease-out,
    background-color 0.18s ease-out,
    border-color 0.18s ease-out,
    color 0.18s ease-out;
  will-change: transform;
}

/* PRIMARY: BUY / SEARCH / CHECK PRICE
   Base: category gradient (not dark).
   Hover: SAME base + brighter sweep (no darkening).
*/
.pcard-cta--buy {
  border: none;

  background-image:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.00) 34%,
      rgba(255, 255, 255, 0.00) 50%,
      rgba(255, 255, 255, 0.00) 66%),
    linear-gradient(to right,
      var(--card-color, var(--site-start-color)),
      var(--card-accent, var(--site-end-color)));

  background-blend-mode: normal;
}

.pcard-cta--buy:hover,
.pcard-cta--buy:focus-visible {
  animation: pcard-button-sweep 1.7s linear infinite;
  animation-delay: -0.15s;

  background-image:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.00) 34%,
      rgba(255, 255, 255, 0.50) 50%,
      rgba(255, 255, 255, 0.00) 66%),
    linear-gradient(to right,
      var(--card-color, var(--site-start-color)),
      var(--card-accent, var(--site-end-color)));

  background-blend-mode: overlay;

  box-shadow: 0 14px 30px rgba(var(--card-rgb, 0, 0, 0), 0.42);
  transform: translateY(-1px);
  filter: saturate(1.06) brightness(1.03);
}

.pcard-cta--buy:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(var(--card-rgb, 0, 0, 0), 0.36);
}

/* PRIMARY: COMING SOON
   Base: subtle tinted surface (lighter, not dark).
   Hover: brighter sweep + slightly stronger border (no darkening).
*/
.pcard-cta--coming-soon {
  color: var(--white-color-1);

  background-image:
    linear-gradient(to right,
      color-mix(in srgb, var(--card-color, var(--site-start-color)) 18%, var(--pcard-surface-2)),
      color-mix(in srgb, var(--card-color, var(--site-start-color)) 12%, var(--pcard-surface-2)));

  border: 1.5px solid color-mix(in srgb,
      var(--card-color, var(--site-start-color)) 55%,
      rgba(255, 255, 255, 0.10));
}

.pcard-cta--coming-soon:hover,
.pcard-cta--coming-soon:focus-visible {
  animation: pcard-button-sweep 1.7s linear infinite;
  animation-delay: -0.15s;

  /* add the sweep as a separate top layer on hover */
  background-image:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.00) 34%,
      rgba(255, 255, 255, 0.32) 50%,
      rgba(255, 255, 255, 0.00) 66%),
    linear-gradient(to right,
      color-mix(in srgb, var(--card-color, var(--site-start-color)) 18%, var(--pcard-surface-2)),
      color-mix(in srgb, var(--card-color, var(--site-start-color)) 12%, var(--pcard-surface-2)));

  background-blend-mode: overlay;

  border-color: var(--card-color, var(--site-start-color));
  box-shadow: 0 14px 30px rgba(var(--card-rgb, 0, 0, 0), 0.36);
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.pcard-cta--coming-soon:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(var(--card-rgb, 0, 0, 0), 0.30);
}

/* SECONDARY: outline companion
   Base stays light/neutral; hover uses the same lighter sweep (no darkening fill).
*/
.pcard-cta--secondary {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
  border: 1.5px solid rgba(var(--card-rgb, 255, 255, 255), 0.65);
  color: var(--card-color, var(--site-start-color));
}

.pcard-cta--secondary:hover,
.pcard-cta--secondary:focus-visible {
  animation: pcard-button-sweep 1.7s linear infinite;
  animation-delay: -0.15s;

  background-image:
    linear-gradient(100deg,
      rgba(255, 255, 255, 0.00) 20%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0.00) 80%),
    linear-gradient(to right, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));

  background-blend-mode: overlay;

  border-color: var(--card-color, var(--site-start-color));
  color: var(--white-color-1);

  box-shadow: 0 14px 30px rgba(var(--card-rgb, 0, 0, 0), 0.32);
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.pcard-cta--secondary:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(var(--card-rgb, 0, 0, 0), 0.26);
}

.pcard-cta-retailer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pcard-cta-retailer img {
  display: block;
  height: 1.3em;
  width: auto;
}

.pcard-cta-text {
  white-space: nowrap;
  font-weight: 700;
  text-transform: uppercase;
}

/* Mobile alignment: retailer logo left + text centered */
@media (max-width: 825px) {
  .pcard-cta-wrapper {
    max-width: 100%;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    box-shadow: unset;
  }

  .pcard-cta-group {
    width: 100%;
  }

  .pcard-cta {
    max-width: 100%;
    width: 100%;

    padding: 10px 20px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* left • center • right */
    align-items: center;
    justify-items: center;
    gap: 10px;
  }

  .pcard-cta-retailer {
    grid-column: 1;
    justify-self: start;
  }

  .pcard-cta-text {
    grid-column: 2;
    justify-self: center;
    text-align: center;
  }
}

/* Desktop side/grid layout: keep compact sizing */
@media (min-width: 1151px) {

  .layout-side .pcard-cta--buy,
  .layout-grid .pcard-cta--buy,
  .layout-side .pcard-cta--coming-soon,
  .layout-grid .pcard-cta--coming-soon {
    padding: 12px 12px;
    max-width: 178px;
    border-radius: 8px;
    margin: 3rem 0 1rem;
    box-sizing: border-box;
  }

  .layout-side .pcard-cta--secondary,
  .layout-grid .pcard-cta--secondary {
    max-width: 178px;
    padding: 12px 12px;
    border-radius: 8px;
    margin: 0 0 1rem;
    box-sizing: border-box;
  }
}


/* ───────────────────────────────────────────────────────────
   KeyTake Aways (smooth expand + one-way “Show more”)
   • EXACTLY 3 text lines visible when collapsed (chip not counted)
   • Arrow sits to the RIGHT of “Show more”
─────────────────────────────────────────────────────────── */

/* /public/css/partial_product_card.css — REPLACE ONLY THIS WHOLE “KeyTake Aways” BLOCK */

.pcard-content-bottom p {
  color: var(--grey-color-1);
  font-family: var(--identity-font);
  font-weight: 400;
  font-size: var(--ft-17-15);
  line-height: 1.5;
  margin: 0;
}

.pcard-content-bottom a {
  color: var(--card-color, var(--site-color));
}

.pcard-content-bottom a:hover {
  text-decoration: underline;
}

.pcard-kt {
  position: relative;
  display: grid;
  gap: 6px;
}

.pcard-kt-content-mobile {
  display: none;
}

/* hidden checkbox driver */
.pcard-kt-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* collapsible wrapper with animation (first 3 lines visible when collapsed) */
.pcard-kt-content {
  font-size: var(--ft-17-15);
  line-height: 1.5;
  --kt-anim-max: 1600px;
  overflow: hidden;
  transform-origin: top;
  transform: translateY(0);
  transition: max-height 420ms cubic-bezier(.2, .65, .2, 1),
    transform 420ms cubic-bezier(.2, .65, .2, 1);
  will-change: max-height, transform;
}

/* Key takeaway body (desktop uses height clamp instead of -webkit-line-clamp) */
/* /public/css/partial_product_card.css — REPLACE START: .pcard-kt-content { ... } + .pcard-kt-text { ... }
   REPLACE END: end of .pcard-kt-text rule */

/* collapsible wrapper with animation */
.pcard-kt-content {
  overflow: hidden;
}

/* ✅ Real 3-line clamp + ellipsis */
.pcard-kt-text {
  margin: 0;
  color: var(--white-color-2);
  font-family: var(--identity-font);
  font-weight: 400;
  font-size: var(--ft-17-15);
  line-height: 1.5;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Expanded: remove clamp */
.pcard-kt-toggle:checked~.pcard-kt-content .pcard-kt-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}


/* when opened: animate height */
.pcard-kt-toggle:checked~.pcard-kt-content {
  max-height: var(--kt-anim-max);
}

/* “Show more / Show less” chip */
.pcard-kt-more {
  align-self: start;
  display: inline-flex;
  flex-direction: row;
  text-transform: capitalize;
  align-items: center;
  gap: 8px;
  color: var(--card-color, var(--site-color));
  text-decoration: underline;
  font-family: var(--identity-font);
  font-weight: 600;
  font-size: var(--ft-15-14);
  line-height: 1.2;
  cursor: pointer;
  transition: color .18s ease, transform .06s ease, text-decoration-color .18s ease;
  margin-top: .5rem;
}

.pcard-kt-more:hover {
  transform: translateY(-1px);
}

/* keep explicit order: text first, chevron second (right) */
.pcard-kt-more span {
  order: 1;
}

.pcard-kt-more .pcard-kt-chevron {
  order: 2;
  transition: transform .2s ease;
  font-size: var(--ft-22-21);
  width: 1em;
  height: 1em;
}

/* swap Show more ↔ Show less */
.pcard-kt-less-text {
  display: none;
}

.pcard-kt-toggle:checked~.pcard-kt-more .pcard-kt-more-text {
  display: none;
}

.pcard-kt-toggle:checked~.pcard-kt-more .pcard-kt-less-text {
  display: inline;
}

.pcard-kt-toggle:checked~.pcard-kt-more .pcard-kt-chevron {
  transform: rotate(180deg);
}

/* JS sets [hidden] when there is no real overflow */
.pcard-kt-more[hidden] {
  display: none !important;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pcard-kt-content {
    transition: none;
  }

  .pcard-kt-more .pcard-kt-chevron {
    transition: none;
  }
}

@media (max-width: 825px) {
  .pcard-content-bottom {
    display: none;
  }

  .pcard-kt-content-mobile {
    display: block;
  }

  .pcard-kt-content-mobile p {
    color: var(--white-color-2);
    font-family: var(--identity-font);
    font-weight: 400;
    font-size: var(--ft-17-15);
    line-height: 1.5;
    margin: 0;
  }

  .pcard-kt-content-mobile a {
    color: var(--card-color, var(--site-color));
  }

  .pcard-kt-content-mobile a:hover {
    text-decoration: underline;
  }
}


/* ───────────────────────────────────────────────────────────
   Colors
─────────────────────────────────────────────────────────── */
/* partial_product_card.css — REPLACE THIS WHOLE “Colors” SECTION
   Start at the comment:
     /* ───────────────────────────────────────────────────────────
        Colors
     ... 
   End right before:
     /* ───────────────────────────────────────────────────────────
        TOP RANK & BADGE
*/

/* ───────────────────────────────────────────────────────────
    Colors
 ─────────────────────────────────────────────────────────── */

.pcard-available {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--pcard-surface-1);
  border: 1px solid var(--pcard-surface-0);
  color: var(--white-color-1);
  font-family: var(--identity-font);
  font-size: var(--font-size-16px);
  line-height: 1.4;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 6px;
}

.pcard-available-label {
  font-weight: 400;
  margin-right: 0;
  white-space: nowrap;
}

.pcard-colors-link {
  color: var(--card-color, var(--site-color));
  text-decoration-line: underline;
  text-transform: capitalize;
  text-decoration-color: var(--card-color, var(--site-color));
  text-underline-offset: 2px;
  font-weight: 400;
  white-space: nowrap;
}

.pcard-color-circles {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding-left: 6px;
}

.pcard .color-circle {
  width: calc(var(--font-size-17px) + 6px);
  height: calc(var(--font-size-17px) + 6px);
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--grey-color-3);
  box-sizing: border-box;
  margin: 0;
}

.pcard-available-mobile {
  display: none;
}

@media (max-width: 825px) {
  .pcard-available-mobile {
    display: flex;
    align-self: flex-start;
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    background: var(--pcard-surface-1);
    border: 1px solid var(--pcard-surface-0);
    color: var(--white-color-1);
    font-family: var(--identity-font);
    font-size: var(--font-size-16px);
    font-weight: 500;
    line-height: 1.4;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 10px;
    box-sizing: border-box;
    row-gap: 6px;
  }
}


/* ───────────────────────────────────────────────────────────
   TOP RANK & BADGE
─────────────────────────────────────────────────────────── */


.pcard-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 0 0 8px 8px;
  background: var(--accent-color-3);
  color: var(--white-color-1);
  font-family: var(--identity-font);
  font-weight: 700;
  border: 1px solid var(--pcard-surface-1);
}



.pcard-badge {
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--pcard-surface-0);
  border: 1px solid var(--pcard-surface-1);
}

.pcard-ribbon {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px 4px 10px;
  min-height: 28px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}



.pcard-ribbon-rank,
.pcard-ribbon-badge {
  display: inline-flex;
  align-items: center;
}

.pcard-ribbon-rank {
  color: var(--white-color-1);
  font-family: var(--identity-font);
  font-weight: 700;
  font-size: var(--ft-18-17)
}

.pcard-ribbon-badge {
  color: var(--white-color-1);
  font-family: var(--identity-font);
  font-weight: 500;
  font-size: var(--ft-18-17)
}

.pcard-ribbon-sep {
  width: 1px;
  height: 20px;
  margin: 0 8px;
  background: rgba(255, 255, 255, .85);
  border-radius: 1px;
}

.pcard-badges .pcard-ribbon+.pcard-score {
  margin-left: 10px;
}


.pcard-score-star {
  fill: var(--card-color, var(--site-color));
}


.pcard-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--white-color-1);
  font-family: var(--identity-font);
  font-weight: 400;
  font-size: var(--ft-17-16);
}

.pcard-score svg {
  width: 1.25em;
  height: 1.25em;
}

.pcard-score span {
  margin-left: 6px;
}

.pcard-score-label {
  margin-left: 6px;
}

@media (max-width: 825px) {
  .pcard-score {
    margin-top: 4px;
  }
}

/* ───────────────────────────────────────────────────────────
   TOP RANK & BADGE
─────────────────────────────────────────────────────────── */


.pcard-ribbon {
  background: var(--card-color, var(--site-background-gradient));
}

.rank1 .pcard-ribbon {
  background: rgb(255, 179, 0)
}



/* ───────────────────────────────────────────────────────────
   Key Features
─────────────────────────────────────────────────────────── */


/* default (unchanged): they sit inline on one row */
.pcard-key-features-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.pcard-key-features-btns-left,
.pcard-key-features-btns-right {
  display: flex;
  gap: 10px;
}


@media (max-width: 600px) {
  .pcard-key-features-btns {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
    align-items: stretch;
  }

  .pcard-key-features-btns-left {
    order: 2;
    flex: 1 0 100%;
    width: 100%;
  }

  .pcard-key-features-btns-left .pcard-kf-btn {
    width: 100%;
    align-self: stretch;
    justify-content: center;
    text-align: center;
  }

  .pcard-key-features-btns-right {
    order: 1;
    flex: 1 0 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .pcard-key-features-btns-right .pcard-kf-btn {
    justify-content: center;
    text-align: center;
  }
}


.pcard-key-features {
  align-items: flex-start;
  padding: 16px 32px 16px;
  border-top: 1px solid var(--pcard-surface-0);
}

@media (max-width: 1150px) {
  .pcard-key-features {
    padding: 16px 20px 16px;
  }
}

.pcard-kf-toggle {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pcard-kf-toggle:checked ~ .pcard-key-features-btns .pcard-key-features-btns-left .pcard-kf-btn[for] {
  background: var(--card-color, var(--site-color));
  color: var(--white-color-1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.pcard-kf-toggle:checked ~ .pcard-key-features-btns .pcard-key-features-btns-left .pcard-kf-btn[for] .pcard-kf-chevron {
  transform: rotate(180deg);
}
/* /public/css/partial_product_card.css — REPLACE ONLY THIS BUTTON STYLE BLOCK */
.pcard-kf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9999px;
  border: 1.5px solid var(--card-color, var(--site-color));
  color: var(--card-color, var(--site-color));
  background: transparent;
  cursor: pointer;
  user-select: none;
  font-family: var(--identity-font);
  font-weight: 600;
  font-size: var(--font-size-14px);
  align-self: flex-start;
  text-decoration: none;
  /* for <a> variants */
  transition: background-color .18s ease, color .18s ease,
    border-color .18s ease, box-shadow .18s ease, transform .06s ease;
}

.pcard-kf-btn:hover,
.pcard-kf-btn:focus-visible {
  background: var(--card-color);
  /* inverse on hover/focus */
  color: var(--white-color-1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  outline: none;
}

.pcard-kf-btn:active {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--card-color, var(--site-color)) 88%, black);
  /* subtle press */
  border-color: color-mix(in srgb, var(--card-color, var(--site-color)) 88%, black);
}

/* keep the chip filled when the section is open */
.pcard-kf-toggle:checked+.pcard-kf-btn {
  background: var(--card-color, var(--site-color));
  color: var(--white-color-1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.pcard-kf-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.pcard-kf-chevron {
  transition: transform .2s ease;
  font-size: var(--ft-20-19);
  width: 1em;
  height: 1em;
}

.pcard-kf-toggle:checked+.pcard-kf-btn .pcard-kf-chevron {
  transform: rotate(180deg);
}

@media (max-width: 600px) {
  .pcard-kf-btn {
    border-radius: 6px;
  }
}

/* /public/css/partial_product_card.css — REPLACE ONLY THIS "Key Features reveal" BLOCK */

/* Smooth expand/collapse for the specs content */
.pcard-key-features {
  --kf-anim-max: 2400px;
  /* adjust if your specs can be taller */
}

.pcard-key-features .pcard-features-content {
  overflow: hidden;
  width: 100%;
  max-height: 0;
  /* collapsed */
  opacity: 0;
  padding-top: 0;
  transform-origin: top;
  transform: translateY(-6px);
  transition:
    max-height 420ms cubic-bezier(.2, .65, .2, 1),
    opacity 220ms ease,
    padding-top 320ms ease,
    transform 420ms cubic-bezier(.2, .65, .2, 1);
  will-change: max-height, opacity, transform, padding-top;
  pointer-events: none;
  /* avoid clicks while hidden */
}

.pcard-kf-toggle:checked~.pcard-features-content {
  max-height: var(--kf-anim-max);
  /* expanded */
  opacity: 1;
  padding-top: 12px;
  transform: translateY(0);
  pointer-events: auto;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pcard-key-features .pcard-features-content {
    transition: none;
  }
}


.pcard-shell,
.pcard-key-features .pcard-features-content,
.pcard-kt-content-mobile {
  overflow-anchor: none;
}
/* ───────────────────────────────────────────────────────────
   Custom Specs
─────────────────────────────────────────────────────────── */


.pcard-key-features .egXXL-summary-row.specs-row {
  margin-top: 1rem;
}

/* ───────────────────────────────────────────────────────────
   Carousel
─────────────────────────────────────────────────────────── */


.pcard-media .carousel-pt {
  width: 310px;
}

.pcard-media .carousel-pt-slide-item {
  border: none
}

.pcard-media .carousel-pt-img-container {
  height: clamp(185px, 150.3333px + 8.6667vw, 250px);
  /* 1150 - 400 */
  aspect-ratio: 4/3;
}

.pcard-media .carousel-pt-slide-item img {
  object-fit: scale-down;
}

.pcard-media .carousel-pt-thumbnail-wrapper {
  height: 65px
}

.pcard-media .carousel-pt-thumbnail-container {
  margin: 0px auto 0;
}

.pcard-media .carousel-pt-thumbnail {
  aspect-ratio: 4/3;
  border-radius: 2px;
  opacity: 1;
}

.pcard-media .carousel-pt-thumbnail.active {
  border: 1px solid var(--card-color, var(--site-color));
  opacity: 1;
}

.pcard-media .carousel-pt .arrow-container-wrapper,
.pcard-media .carousel-pt-zoom-button,
.pcard-media .carousel-pt .thumbnail-scroll-btn {
  display: none;
}



/* /public/css/partial_carousel.css — APPEND THIS BLOCK (dots for thumbnails under 825px) */
@media (max-width: 825px) {

  .pcard-media .carousel-pt-thumbnail-wrapper {
    height: 10px
  }


  .pcard-media .carousel-pt-container,
  .pcard-media .carousel-pt-thumbnail-container {
    padding: 0;
  }

  .pcard-media .carousel-pt-thumbnail-container {
    gap: .6rem;
    padding: 1rem 0 0 0;
    background: transparent;
  }

  .pcard-media .carousel-pt-thumbnail-wrapper {
    height: 22px;
    /* compact rail */
    gap: 10px;
    /* space between dots */
    justify-content: center;
    /* center the dots row */
    overflow: visible;
    /* ensure dots aren't clipped */
  }

  /* base container for each dot */
  .pcard-media .carousel-pt-thumbnail {
    width: 22px;
    height: 22px;
    border: none !important;
    /* override image thumbnail border */
    border-radius: 50%;
    background: transparent !important;
    opacity: 1 !important;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    cursor: pointer;
  }

  /* hide the actual thumbnail image; we'll draw a dot instead */
  .pcard-media .carousel-pt-thumbnail img {
    display: none !important;
  }

  /* the dot itself */
  .pcard-media .carousel-pt-thumbnail::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .35);
    /* inactive */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  }

  /* active slide indicator uses your card accent color */
  .pcard-media .carousel-pt-thumbnail.active::before {
    background: var(--card-color, var(--site-color));
    box-shadow: none;
  }

  /* subtle hover feedback */
  .pcard-media .carousel-pt-thumbnail:hover::before {
    transform: scale(1.1);
  }

  .pcard-media .carousel-pt-thumbnail:nth-child(n+7):not(.active) {
    display: none !important;
  }

  .pcard-media .carousel-pt-thumbnail-wrapper:has(.carousel-pt-thumbnail.active:nth-child(n+7)) .carousel-pt-thumbnail:nth-child(6):not(.active) {
    display: none !important;
  }
}









/* ───────────────────────────────────────────────────────────
   Compare
─────────────────────────────────────────────────────────── */


/* /public/css/partial_product_card.css — ADD: absolute wrapper for Vault toggle */
.pcard-vault-abs {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1000;
  pointer-events: none;
  /* container never blocks; inner toggle handles clicks */
}

/* Keep the toggle clickable and scale to match carousel's control size */
.pcard-vault-abs .compare-toggle {
  pointer-events: auto;
  font-size: var(--font-size-18px)
}


.pcard-vault-abs-mobile {
  display: none;
}

@media (max-width:1150px) {
  .pcard-vault-abs .compare-toggle {
    font-size: var(--font-size-17px)
  }
}

@media (max-width:825px) {

  .pcard-vault-abs-mobile {
    display: block;
    bottom: 24px;
    right: 20px;
    z-index: 1000;
    pointer-events: none;
  }

  .pcard-vault-abs-mobile .compare-toggle {
    pointer-events: auto;
    font-size: var(--ft-18-16)
  }

  .pcard-vault-abs {
    display: none;
  }

}










/* ───────────────────────────────────────────────────────────
   Compare
─────────────────────────────────────────────────────────── */

/* /public/css/partial_product_card.css — REPLACE THIS WHOLE “MOBILE SHOW-MORE BLOCK” */

/* /public/css/partial_product_card.css — REPLACE THIS WHOLE “MOBILE SHOW-MORE BLOCK”
   Goals:
   - No scroll-jump on tap (inputs are fixed off-screen so focus can’t yank the page)
   - Mobile expands to FULL content height (JS sets --pcard-kt-mobile-open-max per card)
   - Smooth open/close and stable scroll anchoring behavior
*/

.pcard-mobile-expand {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pcard-mobile-morebtn {
  display: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.pcard-mobile-morebtn .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pcard-mobile-morebtn[hidden] {
  display: none !important;
}

@media (max-width: 825px) {
  .pcard-kt-content-mobile {
    display: block;
    --kt-mobile-lines: 3;
    font-size: var(--ft-17-15);
    line-height: 1.5;

    max-height: calc(var(--kt-mobile-lines) * 1em * 1.5);
    overflow: hidden;

    transition: max-height 420ms cubic-bezier(.2, .65, .2, 1);
    will-change: max-height;

    overflow-anchor: none;
  }

  .pcard-kt-content-mobile .pcard-kt-text {
    display: block;
    overflow: visible;
  }

  .pcard-kt-content-mobile p {
    color: var(--white-color-2);
    font-family: var(--identity-font);
    font-weight: 400;
    font-size: var(--ft-17-15);
    line-height: 1.5;
    margin: 0;
  }

  .pcard-kt-content-mobile a {
    color: var(--card-color, var(--site-color));
  }

  .pcard-kt-content-mobile a:hover {
    text-decoration: underline;
  }

  .pcard-content-left > .pcard-features li:nth-of-type(n + 4) {
    display: none;
  }

  .pcard-mobile-morebtn {
    display: block;
    width: 100%;
    height: 30px;
    border-radius: 6px;
    background: var(--pcard-surface-1);
    position: relative;
    cursor: pointer;
    user-select: none;
    box-shadow: inset 0 0 0 1px var(--pcard-surface-0);
    transition: background .18s ease, box-shadow .18s ease, transform .06s ease;
  }

  .pcard-mobile-morebtn:hover {
    background: color-mix(in srgb, var(--pcard-surface-1) 92%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pcard-surface-0) 80%, #fff);
    transform: translateY(-1px);
  }

  .pcard-mobile-morebtn:focus-visible {
    outline: 2px solid var(--card-color, var(--site-color));
    outline-offset: 2px;
  }

  .pcard-mobile-morebtn .pcard-mobile-more-chevron {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--white-color-1);
    opacity: .9;
    transition: transform .2s ease;
  }

  .pcard-mobile-more-chevron {
    width: 24px;
    height: 24px;
  }

  .pcard-mobile-less-text {
    display: none;
  }

  .pcard-mobile-expand:checked ~ .pcard-features li {
    display: grid;
  }

  .pcard-mobile-expand:checked ~ .pcard-kt-content-mobile {
    max-height: var(--pcard-kt-mobile-open-max, 9999px);
  }

  .pcard-mobile-expand:checked ~ .pcard-mobile-morebtn .pcard-mobile-more-chevron {
    transform: translate(-50%, -50%) rotate(180deg);
  }

  .pcard-mobile-expand:checked ~ .pcard-mobile-morebtn .pcard-mobile-more-text {
    display: none;
  }

  .pcard-mobile-expand:checked ~ .pcard-mobile-morebtn .pcard-mobile-less-text {
    display: inline;
  }
}






.pcard-cta-wrapper-small {
  display: none;
}


@media (min-width: 1151px) {

  .layout-side .pcard-cta-wrapper-small,
  .layout-grid .pcard-cta-wrapper-small {
    display: block;
  }

  .layout-side .pcard-media-layout,
  .layout-grid .pcard-media-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .layout-side .pcard-title,
  .layout-grid .pcard-title {
    font-size: var(--font-size-21px);
  }

  .layout-side .pcard-media-container,
  .layout-grid .pcard-media-container {
    justify-content: flex-start;
    padding-top: 1rem;
  }

  .layout-side .pcard-media .carousel-pt,
  .layout-grid .pcard-media .carousel-pt {
    width: 175px;
  }

  .layout-side .pcard-media .carousel-pt-img-container,
  .layout-grid .pcard-media .carousel-pt-img-container {
    width: 179px;
    height: unset;
  }

  .layout-side .carousel-pt-slide-item,
  .layout-grid .carousel-pt-slide-item {
    margin-right: 8px
  }

  .layout-side .pcard-media-brand-link,
  .layout-grid .pcard-media-brand-link {
    margin-top: 8px;
  }

  .layout-side .pcard-brand-link,
  .layout-grid .pcard-brand-link {
    font-size: var(--font-size-16px);
  }

  .layout-side .pcard-media .carousel-pt-thumbnail-wrapper,
  .layout-grid .pcard-media .carousel-pt-thumbnail-wrapper {
    height: 45px;
    gap: 6px;
  }

  .layout-side .carousel-pt-thumbnail.active,
  .layout-grid .carousel-pt-thumbnail.active {
    border: 1px solid var(--card-color, var(--site-color));
  }

  /* Hidden by default; we only reveal this CTA on desktop when the page uses side layout */
  .pcard-cta-bottom {
    display: none;
  }

  .layout-side .pcard-cta-wrapper,
  .layout-grid .pcard-cta-wrapper {
    display: block;
    padding: 0;
  }


  .layout-side .pcard-cta-retailer img,
  .layout-grid .pcard-cta-retailer img {}

  .layout-side .pcard-cta-text,
  .layout-grid .pcard-cta-text {
    font-size: var(--ft-15-14);
    font-weight: 700;
    text-transform: uppercase;
  }

  .layout-side .pcard .pcard-content-right,
  .layout-grid .pcard .pcard-content-right {
    display: none;
  }

  .layout-side .pcard .pcard-content-left,
  .layout-grid .pcard .pcard-content-left {
    flex: 1 1 100%;
    width: 100%;
  }

  .layout-side .pcard .pcard-cta-bottom,
  .layout-grid .pcard .pcard-cta-bottom {
    display: block;
  }

  .layout-side .pcard-ribbon-rank,
  .layout-grid .pcard-ribbon-rank {
    font-size: var(--font-size-17px);
  }

  .layout-side .pcard-ribbon-badge,
  .layout-grid .pcard-ribbon-badge {
    font-size: var(--font-size-17px);
  }

  .layout-side .pcard-score,
  .layout-grid .pcard-score {
    font-size: var(--font-size-16px);
  }

  /* Keep the toggle clickable and scale to match carousel's control size */
  .layout-side .pcard-vault-abs .compare-toggle,
  .layout-grid .pcard-vault-abs .compare-toggle {
    font-size: var(--font-size-17px)
  }
}











/* ───────────────────────────────────────────────────────────
   Product Cards Row (grid wrapper)
─────────────────────────────────────────────────────────── */

.pcard-row {
  display: flex;
  flex-direction: column;
  gap: var(--pcard-row-gap, 24px);
  width: 100%;
}

.pcard-row-item {
  width: 100%;
}






/* /public/css/partial_product_card.css — APPEND THIS WHOLE BLOCK (Coming Soon CTA variant) */

.pcard-cta--coming-soon {
  background: var(--pcard-surface-1);
  border: 1px solid var(--pcard-surface-0);
}

.pcard-cta--coming-soon:hover {
  background: var(--pcard-surface-2);
  color: var(--white-color-1);
}

.layout-side .pcard-cta--coming-soon,
.layout-grid .pcard-cta--coming-soon {
  background: var(--pcard-surface-1);
}

.layout-side .pcard-cta--coming-soon:hover,
.layout-grid .pcard-cta--coming-soon:hover {
  background: var(--pcard-surface-2);
}






/* /public/css/partial_product_card.css — REPLACE your prior "zoom indicator" block with this
   Fix: icon is attached to the *moving* Flickity cell (.carousel-pt-slide-item),
   so it slides out/in with each image as the carousel animates.
*/
@media (hover: hover) and (pointer: fine) {

  /* Ensure each slide cell can host an absolutely-positioned indicator */
  .pcard[data-pcard-carousel-tap="zoom" i] .pcard-media .carousel-pt-slide-item,
  .product-card-row[data-pcards-row-carousel-tap="zoom" i] .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-slide-item,
  .pcard-row[data-pcards-row-carousel-tap="zoom" i] .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-slide-item {
    position: relative;
  }

  /* The indicator itself (per-slide, moves with the slide item) */
  .pcard[data-pcard-carousel-tap="zoom" i] .pcard-media .carousel-pt-slide-item::after,
  .product-card-row[data-pcards-row-carousel-tap="zoom" i] .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-slide-item::after,
  .pcard-row[data-pcards-row-carousel-tap="zoom" i] .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-slide-item::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: clamp(13px, 3vw, 16px);
    height: clamp(13px, 3vw, 16px);

    opacity: 0;
    transition: opacity 140ms ease;
    pointer-events: none;

    color: rgba(255, 255, 255, 0.95);
    background-color: currentColor;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cpath%20d%3D%22m122.733%2010.606-.002%2028.053a5.342%205.342%200%200%201-5.339%205.338%205.34%205.34%200%200%201-5.337-5.34V23.499L78.302%2057.253a5.32%205.32%200%200%201-3.775%201.563%205.33%205.33%200%200%201-3.777-1.563%205.341%205.341%200%200%201%200-7.551l33.754-33.755h-15.16a5.34%205.34%200%200%201%200-10.68h28.053c1.415%200%202.771.563%203.773%201.565a5.348%205.348%200%200%201%201.563%203.774zM49.132%2071.317l-33.184%2033.186V89.344a5.338%205.338%200%201%200-10.676-.001l-.005%2028.052a5.34%205.34%200%200%200%205.341%205.338H38.66a5.34%205.34%200%200%200%205.339-5.339%205.34%205.34%200%200%200-5.339-5.342H23.503L56.684%2078.87a5.34%205.34%200%200%200%200-7.553%205.348%205.348%200%200%200-7.552%200z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cpath%20d%3D%22m122.733%2010.606-.002%2028.053a5.342%205.342%200%200%201-5.339%205.338%205.34%205.34%200%200%201-5.337-5.34V23.499L78.302%2057.253a5.32%205.32%200%200%201-3.775%201.563%205.33%205.33%200%200%201-3.777-1.563%205.341%205.341%200%200%201%200-7.551l33.754-33.755h-15.16a5.34%205.34%200%200%201%200-10.68h28.053c1.415%200%202.771.563%203.773%201.565a5.348%205.348%200%200%201%201.563%203.774zM49.132%2071.317l-33.184%2033.186V89.344a5.338%205.338%200%201%200-10.676-.001l-.005%2028.052a5.34%205.34%200%200%200%205.341%205.338H38.66a5.34%205.34%200%200%200%205.339-5.339%205.34%205.34%200%200%200-5.339-5.342H23.503L56.684%2078.87a5.34%205.34%200%200%200%200-7.553%205.348%205.348%200%200%200-7.552%200z%22%2F%3E%3C%2Fsvg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    z-index: 5;
  }

  /* Hover-only reveal (per slide tile) */
  .pcard[data-pcard-carousel-tap="zoom" i] .pcard-media .carousel-pt-slide-item:hover::after,
  .product-card-row[data-pcards-row-carousel-tap="zoom" i] .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-slide-item:hover::after,
  .pcard-row[data-pcards-row-carousel-tap="zoom" i] .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-slide-item:hover::after {
    opacity: 0.92;
  }
}


@media (hover: hover) and (pointer: fine) {

  /* Default = grab (even if the slide image is wrapped in an <a>) */
  .pcard-media .carousel-pt-container .flickity-viewport,
  .pcard-media .carousel-pt-img-container,
  .pcard-media .carousel-pt-img-container *,
  .pcard-media .carousel-pt-img-wrapper,
  .pcard-media .carousel-pt-img,
  .pcard-media .carousel-pt-image,
  .pcard-media .carousel-pt-img-container a {
    cursor: grab;
  }

  .pcard-media .carousel-pt-container .flickity-viewport.is-pointer-down,
  .pcard-media .carousel-pt-container .flickity-viewport.is-pointer-down *,
  .pcard-media .carousel-pt-img-container:active,
  .pcard-media .carousel-pt-img-container:active * {
    cursor: grabbing;
  }

  /* Per-card carouselTap: pointer only when it's actionable */
  .pcard[data-pcard-carousel-tap]:not([data-pcard-carousel-tap="grab" i]):not([data-pcard-carousel-tap="none" i]):not([data-pcard-carousel-tap="false" i]):not([data-pcard-carousel-tap="0" i]) .pcard-media .carousel-pt-container .flickity-viewport,
  .pcard[data-pcard-carousel-tap]:not([data-pcard-carousel-tap="grab" i]):not([data-pcard-carousel-tap="none" i]):not([data-pcard-carousel-tap="false" i]):not([data-pcard-carousel-tap="0" i]) .pcard-media .carousel-pt-img-container,
  .pcard[data-pcard-carousel-tap]:not([data-pcard-carousel-tap="grab" i]):not([data-pcard-carousel-tap="none" i]):not([data-pcard-carousel-tap="false" i]):not([data-pcard-carousel-tap="0" i]) .pcard-media .carousel-pt-img-container *,
  .pcard[data-pcard-carousel-tap]:not([data-pcard-carousel-tap="grab" i]):not([data-pcard-carousel-tap="none" i]):not([data-pcard-carousel-tap="false" i]):not([data-pcard-carousel-tap="0" i]) .pcard-media .carousel-pt-img-container a {
    cursor: pointer;
  }

  /* Row-level carouselTap applies only when a card does NOT override with its own carouselTap */
  .product-card-row[data-pcards-row-carousel-tap]:not([data-pcards-row-carousel-tap="grab" i]):not([data-pcards-row-carousel-tap="none" i]):not([data-pcards-row-carousel-tap="false" i]):not([data-pcards-row-carousel-tap="0" i]) .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-container .flickity-viewport,
  .product-card-row[data-pcards-row-carousel-tap]:not([data-pcards-row-carousel-tap="grab" i]):not([data-pcards-row-carousel-tap="none" i]):not([data-pcards-row-carousel-tap="false" i]):not([data-pcards-row-carousel-tap="0" i]) .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-img-container,
  .product-card-row[data-pcards-row-carousel-tap]:not([data-pcards-row-carousel-tap="grab" i]):not([data-pcards-row-carousel-tap="none" i]):not([data-pcards-row-carousel-tap="false" i]):not([data-pcards-row-carousel-tap="0" i]) .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-img-container *,
  .product-card-row[data-pcards-row-carousel-tap]:not([data-pcards-row-carousel-tap="grab" i]):not([data-pcards-row-carousel-tap="none" i]):not([data-pcards-row-carousel-tap="false" i]):not([data-pcards-row-carousel-tap="0" i]) .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-img-container a,
  .pcard-row[data-pcards-row-carousel-tap]:not([data-pcards-row-carousel-tap="grab" i]):not([data-pcards-row-carousel-tap="none" i]):not([data-pcards-row-carousel-tap="false" i]):not([data-pcards-row-carousel-tap="0" i]) .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-container .flickity-viewport,
  .pcard-row[data-pcards-row-carousel-tap]:not([data-pcards-row-carousel-tap="grab" i]):not([data-pcards-row-carousel-tap="none" i]):not([data-pcards-row-carousel-tap="false" i]):not([data-pcards-row-carousel-tap="0" i]) .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-img-container,
  .pcard-row[data-pcards-row-carousel-tap]:not([data-pcards-row-carousel-tap="grab" i]):not([data-pcards-row-carousel-tap="none" i]):not([data-pcards-row-carousel-tap="false" i]):not([data-pcards-row-carousel-tap="0" i]) .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-img-container *,
  .pcard-row[data-pcards-row-carousel-tap]:not([data-pcards-row-carousel-tap="grab" i]):not([data-pcards-row-carousel-tap="none" i]):not([data-pcards-row-carousel-tap="false" i]):not([data-pcards-row-carousel-tap="0" i]) .pcard:not([data-pcard-carousel-tap]) .pcard-media .carousel-pt-img-container a {
    cursor: pointer;
  }
}