/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --typography-body-md-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-body-md-fontSize: var(--primitives-font-size-16);
  --typography-body-md-fontWeight: var(--primitives-font-weight-500);
  --typography-body-md-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-body-md-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-body-sm-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-body-sm-fontSize: var(--primitives-font-size-14);
  --typography-body-sm-fontWeight: var(--primitives-font-weight-500);
  --typography-body-sm-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-body-sm-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-body-xs-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-body-xs-fontSize: var(--primitives-font-size-13);
  --typography-body-xs-fontWeight: var(--primitives-font-weight-500);
  --typography-body-xs-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-body-xs-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-body-xxs-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-body-xxs-fontSize: var(--primitives-font-size-12);
  --typography-body-xxs-fontWeight: var(--primitives-font-weight-500);
  --typography-body-xxs-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-body-xxs-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-component-button-lg-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-component-button-lg-fontSize: var(--primitives-font-size-16);
  --typography-component-button-lg-fontWeight: var(--primitives-font-weight-600);
  --typography-component-button-lg-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-component-button-lg-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-component-button-md-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-component-button-md-fontSize: var(--primitives-font-size-14);
  --typography-component-button-md-fontWeight: var(--primitives-font-weight-600);
  --typography-component-button-md-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-component-button-md-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-component-button-sm-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-component-button-sm-fontSize: var(--primitives-font-size-12);
  --typography-component-button-sm-fontWeight: var(--primitives-font-weight-600);
  --typography-component-button-sm-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-component-button-sm-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-component-button-xl-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-component-button-xl-fontSize: var(--primitives-font-size-20);
  --typography-component-button-xl-fontWeight: var(--primitives-font-weight-700);
  --typography-component-button-xl-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-component-button-xl-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-display-lg-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-display-lg-fontSize-desktop: var(--primitives-font-size-48);
  --typography-display-lg-fontSize-mobile: var(--primitives-font-size-40);
  --typography-display-lg-fontWeight: var(--primitives-font-weight-800);
  --typography-display-lg-letterSpacing: var(--primitives-font-letterSpacing-2);
  --typography-display-lg-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-display-md-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-display-md-fontSize-desktop: var(--primitives-font-size-40);
  --typography-display-md-fontSize-mobile: var(--primitives-font-size-32);
  --typography-display-md-fontWeight: var(--primitives-font-weight-800);
  --typography-display-md-letterSpacing: var(--primitives-font-letterSpacing-2);
  --typography-display-md-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-display-xl-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-display-xl-fontSize-desktop: var(--primitives-font-size-64);
  --typography-display-xl-fontSize-mobile: var(--primitives-font-size-48);
  --typography-display-xl-fontWeight: var(--primitives-font-weight-800);
  --typography-display-xl-letterSpacing: var(--primitives-font-letterSpacing-2);
  --typography-display-xl-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-display-xxl-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-display-xxl-fontSize-desktop: var(--primitives-font-size-82);
  --typography-display-xxl-fontSize-mobile: var(--primitives-font-size-64);
  --typography-display-xxl-fontWeight: var(--primitives-font-weight-800);
  --typography-display-xxl-letterSpacing: var(--primitives-font-letterSpacing-2);
  --typography-display-xxl-lineHeight: var(--primitives-font-lineHeight-100);
  --typography-heading-h1-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-heading-h1-fontSize-desktop: var(--primitives-font-size-32);
  --typography-heading-h1-fontSize-mobile: var(--primitives-font-size-26);
  --typography-heading-h1-fontWeight: var(--primitives-font-weight-700);
  --typography-heading-h1-letterSpacing-desktop: var(--primitives-font-letterSpacing-2);
  --typography-heading-h1-letterSpacing-mobile: var(--primitives-font-letterSpacing-0);
  --typography-heading-h1-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-heading-h2-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-heading-h2-fontSize-desktop: var(--primitives-font-size-28);
  --typography-heading-h2-fontSize-mobile: var(--primitives-font-size-24);
  --typography-heading-h2-fontWeight: var(--primitives-font-weight-700);
  --typography-heading-h2-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-heading-h2-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-heading-h3-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-heading-h3-fontSize-desktop: var(--primitives-font-size-24);
  --typography-heading-h3-fontSize-mobile: var(--primitives-font-size-20);
  --typography-heading-h3-fontWeight: var(--primitives-font-weight-700);
  --typography-heading-h3-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-heading-h3-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-heading-h4-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-heading-h4-fontSize-desktop: var(--primitives-font-size-20);
  --typography-heading-h4-fontSize-mobile: var(--primitives-font-size-18);
  --typography-heading-h4-fontWeight: var(--primitives-font-weight-700);
  --typography-heading-h4-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-heading-h4-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-heading-h5-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-heading-h5-fontSize-desktop: var(--primitives-font-size-16);
  --typography-heading-h5-fontSize-mobile: var(--primitives-font-size-15);
  --typography-heading-h5-fontWeight: var(--primitives-font-weight-700);
  --typography-heading-h5-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-heading-h5-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-heading-h6-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-heading-h6-fontSize: var(--primitives-font-size-14);
  --typography-heading-h6-fontWeight: var(--primitives-font-weight-700);
  --typography-heading-h6-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-heading-h6-lineHeight: var(--primitives-font-lineHeight-125);
  --typography-reading-md-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-reading-md-fontSize: var(--primitives-font-size-16);
  --typography-reading-md-fontWeight: var(--primitives-font-weight-500);
  --typography-reading-md-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-reading-md-lineHeight: var(--primitives-font-lineHeight-150);
  --typography-reading-md-paragraphSpacing: var(--primitives-font-paragraphSpacing-16);
  --typography-reading-sm-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-reading-sm-fontSize: var(--primitives-font-size-14);
  --typography-reading-sm-fontWeight: var(--primitives-font-weight-500);
  --typography-reading-sm-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-reading-sm-lineHeight: var(--primitives-font-lineHeight-150);
  --typography-reading-sm-paragraphSpacing: var(--primitives-font-paragraphSpacing-14);
  --typography-reading-xs-fontFamily: var(--primitives-font-family-sharpSans);
  --typography-reading-xs-fontSize: var(--primitives-font-size-13);
  --typography-reading-xs-fontWeight: var(--primitives-font-weight-500);
  --typography-reading-xs-letterSpacing: var(--primitives-font-letterSpacing-0);
  --typography-reading-xs-lineHeight: var(--primitives-font-lineHeight-150);
  --typography-reading-xs-paragraphSpacing: var(--primitives-font-paragraphSpacing-14);
}
:root {
  --typography-display-lg-fontSize: var(--typography-display-lg-fontSize-mobile);
  --typography-display-md-fontSize: var(--typography-display-md-fontSize-mobile);
  --typography-display-xl-fontSize: var(--typography-display-xl-fontSize-mobile);
  --typography-display-xxl-fontSize: var(--typography-display-xxl-fontSize-mobile);
  --typography-heading-h1-fontSize: var(--typography-heading-h1-fontSize-mobile);
  --typography-heading-h1-letterSpacing: var(--typography-heading-h1-letterSpacing-mobile);
  --typography-heading-h2-fontSize: var(--typography-heading-h2-fontSize-mobile);
  --typography-heading-h3-fontSize: var(--typography-heading-h3-fontSize-mobile);
  --typography-heading-h4-fontSize: var(--typography-heading-h4-fontSize-mobile);
  --typography-heading-h5-fontSize: var(--typography-heading-h5-fontSize-mobile);
}

@media (min-width: 700px) {
  :root {
    --typography-display-lg-fontSize: var(--typography-display-lg-fontSize-desktop);
    --typography-display-md-fontSize: var(--typography-display-md-fontSize-desktop);
    --typography-display-xl-fontSize: var(--typography-display-xl-fontSize-desktop);
    --typography-display-xxl-fontSize: var(--typography-display-xxl-fontSize-desktop);
    --typography-heading-h1-fontSize: var(--typography-heading-h1-fontSize-desktop);
    --typography-heading-h1-letterSpacing: var(--typography-heading-h1-letterSpacing-desktop);
    --typography-heading-h2-fontSize: var(--typography-heading-h2-fontSize-desktop);
    --typography-heading-h3-fontSize: var(--typography-heading-h3-fontSize-desktop);
    --typography-heading-h4-fontSize: var(--typography-heading-h4-fontSize-desktop);
    --typography-heading-h5-fontSize: var(--typography-heading-h5-fontSize-desktop);
  }
}

.typography-body-md {
  font-family: var(--typography-body-md-fontFamily);
  font-weight: var(--typography-body-md-fontWeight);
  font-size: var(--typography-body-md-fontSize);
  line-height: var(--typography-body-md-lineHeight);
  letter-spacing: var(--typography-body-md-letterSpacing);
}

.typography-body-sm {
  font-family: var(--typography-body-sm-fontFamily);
  font-weight: var(--typography-body-sm-fontWeight);
  font-size: var(--typography-body-sm-fontSize);
  line-height: var(--typography-body-sm-lineHeight);
  letter-spacing: var(--typography-body-sm-letterSpacing);
}

.typography-body-xs {
  font-family: var(--typography-body-xs-fontFamily);
  font-weight: var(--typography-body-xs-fontWeight);
  font-size: var(--typography-body-xs-fontSize);
  line-height: var(--typography-body-xs-lineHeight);
  letter-spacing: var(--typography-body-xs-letterSpacing);
}

.typography-body-xxs {
  font-family: var(--typography-body-xxs-fontFamily);
  font-weight: var(--typography-body-xxs-fontWeight);
  font-size: var(--typography-body-xxs-fontSize);
  line-height: var(--typography-body-xxs-lineHeight);
  letter-spacing: var(--typography-body-xxs-letterSpacing);
}

.typography-component-button-lg {
  font-family: var(--typography-component-button-lg-fontFamily);
  font-weight: var(--typography-component-button-lg-fontWeight);
  font-size: var(--typography-component-button-lg-fontSize);
  line-height: var(--typography-component-button-lg-lineHeight);
  letter-spacing: var(--typography-component-button-lg-letterSpacing);
}

.typography-component-button-md {
  font-family: var(--typography-component-button-md-fontFamily);
  font-weight: var(--typography-component-button-md-fontWeight);
  font-size: var(--typography-component-button-md-fontSize);
  line-height: var(--typography-component-button-md-lineHeight);
  letter-spacing: var(--typography-component-button-md-letterSpacing);
}

.typography-component-button-sm {
  font-family: var(--typography-component-button-sm-fontFamily);
  font-weight: var(--typography-component-button-sm-fontWeight);
  font-size: var(--typography-component-button-sm-fontSize);
  line-height: var(--typography-component-button-sm-lineHeight);
  letter-spacing: var(--typography-component-button-sm-letterSpacing);
}

.typography-component-button-xl {
  font-family: var(--typography-component-button-xl-fontFamily);
  font-weight: var(--typography-component-button-xl-fontWeight);
  font-size: var(--typography-component-button-xl-fontSize);
  line-height: var(--typography-component-button-xl-lineHeight);
  letter-spacing: var(--typography-component-button-xl-letterSpacing);
}

.typography-display-lg {
  font-family: var(--typography-display-lg-fontFamily);
  font-weight: var(--typography-display-lg-fontWeight);
  font-size: var(--typography-display-lg-fontSize);
  line-height: var(--typography-display-lg-lineHeight);
  letter-spacing: var(--typography-display-lg-letterSpacing);
}

.typography-display-md {
  font-family: var(--typography-display-md-fontFamily);
  font-weight: var(--typography-display-md-fontWeight);
  font-size: var(--typography-display-md-fontSize);
  line-height: var(--typography-display-md-lineHeight);
  letter-spacing: var(--typography-display-md-letterSpacing);
}

.typography-display-xl {
  font-family: var(--typography-display-xl-fontFamily);
  font-weight: var(--typography-display-xl-fontWeight);
  font-size: var(--typography-display-xl-fontSize);
  line-height: var(--typography-display-xl-lineHeight);
  letter-spacing: var(--typography-display-xl-letterSpacing);
}

.typography-display-xxl {
  font-family: var(--typography-display-xxl-fontFamily);
  font-weight: var(--typography-display-xxl-fontWeight);
  font-size: var(--typography-display-xxl-fontSize);
  line-height: var(--typography-display-xxl-lineHeight);
  letter-spacing: var(--typography-display-xxl-letterSpacing);
}

.typography-heading-h1 {
  font-family: var(--typography-heading-h1-fontFamily);
  font-weight: var(--typography-heading-h1-fontWeight);
  font-size: var(--typography-heading-h1-fontSize);
  line-height: var(--typography-heading-h1-lineHeight);
  letter-spacing: var(--typography-heading-h1-letterSpacing);
}

.typography-heading-h2 {
  font-family: var(--typography-heading-h2-fontFamily);
  font-weight: var(--typography-heading-h2-fontWeight);
  font-size: var(--typography-heading-h2-fontSize);
  line-height: var(--typography-heading-h2-lineHeight);
  letter-spacing: var(--typography-heading-h2-letterSpacing);
}

.typography-heading-h3 {
  font-family: var(--typography-heading-h3-fontFamily);
  font-weight: var(--typography-heading-h3-fontWeight);
  font-size: var(--typography-heading-h3-fontSize);
  line-height: var(--typography-heading-h3-lineHeight);
  letter-spacing: var(--typography-heading-h3-letterSpacing);
}

.typography-heading-h4 {
  font-family: var(--typography-heading-h4-fontFamily);
  font-weight: var(--typography-heading-h4-fontWeight);
  font-size: var(--typography-heading-h4-fontSize);
  line-height: var(--typography-heading-h4-lineHeight);
  letter-spacing: var(--typography-heading-h4-letterSpacing);
}

.typography-heading-h5 {
  font-family: var(--typography-heading-h5-fontFamily);
  font-weight: var(--typography-heading-h5-fontWeight);
  font-size: var(--typography-heading-h5-fontSize);
  line-height: var(--typography-heading-h5-lineHeight);
  letter-spacing: var(--typography-heading-h5-letterSpacing);
}

.typography-heading-h6 {
  font-family: var(--typography-heading-h6-fontFamily);
  font-weight: var(--typography-heading-h6-fontWeight);
  font-size: var(--typography-heading-h6-fontSize);
  line-height: var(--typography-heading-h6-lineHeight);
  letter-spacing: var(--typography-heading-h6-letterSpacing);
}

.typography-reading-md {
  font-family: var(--typography-reading-md-fontFamily);
  font-weight: var(--typography-reading-md-fontWeight);
  font-size: var(--typography-reading-md-fontSize);
  line-height: var(--typography-reading-md-lineHeight);
  letter-spacing: var(--typography-reading-md-letterSpacing);
}

.typography-reading-sm {
  font-family: var(--typography-reading-sm-fontFamily);
  font-weight: var(--typography-reading-sm-fontWeight);
  font-size: var(--typography-reading-sm-fontSize);
  line-height: var(--typography-reading-sm-lineHeight);
  letter-spacing: var(--typography-reading-sm-letterSpacing);
}

.typography-reading-xs {
  font-family: var(--typography-reading-xs-fontFamily);
  font-weight: var(--typography-reading-xs-fontWeight);
  font-size: var(--typography-reading-xs-fontSize);
  line-height: var(--typography-reading-xs-lineHeight);
  letter-spacing: var(--typography-reading-xs-letterSpacing);
}

/* Typography base reset - matches MUI Typography behavior - backwards compatibility */
.iOKiie0hDsrCi759xqtN {
  margin: 0;
  color: var(--pigment-typography-component-color, inherit);
}

/* Typography variant styles - using design token variables from base.css */
.p5tw92Xy51MhWycMVjU3 {
  font-family: var(--typography-display-xl-fontFamily);
  font-weight: var(--typography-display-xl-fontWeight);
  font-size: var(--typography-display-xl-fontSize);
  line-height: var(--typography-display-xl-lineHeight);
  letter-spacing: var(--typography-display-xl-letterSpacing);
}

.J_rvOdx1RE4qbm79vOSA {
  font-family: var(--typography-display-lg-fontFamily);
  font-weight: var(--typography-display-lg-fontWeight);
  font-size: var(--typography-display-lg-fontSize);
  line-height: var(--typography-display-lg-lineHeight);
  letter-spacing: var(--typography-display-lg-letterSpacing);
}

.c0634FIplYXTemkz1B9W {
  font-family: var(--typography-display-md-fontFamily);
  font-weight: var(--typography-display-md-fontWeight);
  font-size: var(--typography-display-md-fontSize);
  line-height: var(--typography-display-md-lineHeight);
  letter-spacing: var(--typography-display-md-letterSpacing);
}

.q8nQ7KiPmD89vJ5la810 {
  font-family: var(--typography-heading-h1-fontFamily);
  font-weight: var(--typography-heading-h1-fontWeight);
  font-size: var(--typography-heading-h1-fontSize);
  line-height: var(--typography-heading-h1-lineHeight);
  letter-spacing: var(--typography-heading-h1-letterSpacing);
}

.fwT88QKILFz0A0nFRQj9 {
  font-family: var(--typography-heading-h2-fontFamily);
  font-weight: var(--typography-heading-h2-fontWeight);
  font-size: var(--typography-heading-h2-fontSize);
  line-height: var(--typography-heading-h2-lineHeight);
  letter-spacing: var(--typography-heading-h2-letterSpacing);
}

.le845T58ynz7SWi7WNJ9 {
  font-family: var(--typography-heading-h3-fontFamily);
  font-weight: var(--typography-heading-h3-fontWeight);
  font-size: var(--typography-heading-h3-fontSize);
  line-height: var(--typography-heading-h3-lineHeight);
  letter-spacing: var(--typography-heading-h3-letterSpacing);
}

.XyZV4ku2OrXaSrdx83qx {
  font-family: var(--typography-heading-h4-fontFamily);
  font-weight: var(--typography-heading-h4-fontWeight);
  font-size: var(--typography-heading-h4-fontSize);
  line-height: var(--typography-heading-h4-lineHeight);
  letter-spacing: var(--typography-heading-h4-letterSpacing);
}

.xiTKwNnJLQ8MRjnhVmTq {
  font-family: var(--typography-heading-h5-fontFamily);
  font-weight: var(--typography-heading-h5-fontWeight);
  font-size: var(--typography-heading-h5-fontSize);
  line-height: var(--typography-heading-h5-lineHeight);
  letter-spacing: var(--typography-heading-h5-letterSpacing);
}

.AOuNIks_CFHSjlFvgwMy {
  font-family: var(--typography-heading-h6-fontFamily);
  font-weight: var(--typography-heading-h6-fontWeight);
  font-size: var(--typography-heading-h6-fontSize);
  line-height: var(--typography-heading-h6-lineHeight);
  letter-spacing: var(--typography-heading-h6-letterSpacing);
}

.ZWzEivHRdxYhoPunHuCN {
  font-family: var(--typography-reading-md-fontFamily);
  font-weight: var(--typography-reading-md-fontWeight);
  font-size: var(--typography-reading-md-fontSize);
  line-height: var(--typography-reading-md-lineHeight);
  letter-spacing: var(--typography-reading-md-letterSpacing);
  text-align: left;
}

.Yib49zH_rbX4UMUBKyur {
  font-family: var(--typography-reading-sm-fontFamily);
  font-weight: var(--typography-reading-sm-fontWeight);
  font-size: var(--typography-reading-sm-fontSize);
  line-height: var(--typography-reading-sm-lineHeight);
  letter-spacing: var(--typography-reading-sm-letterSpacing);
  text-align: left;
}

.rzDs7NL4htAhMrg_47pV {
  font-family: var(--typography-reading-xs-fontFamily);
  font-weight: var(--typography-reading-xs-fontWeight);
  font-size: var(--typography-reading-xs-fontSize);
  line-height: var(--typography-reading-xs-lineHeight);
  letter-spacing: var(--typography-reading-xs-letterSpacing);
  text-align: left;
}

.Wy42ODA4dPnKAQ2cobyt {
  font-family: var(--typography-body-md-fontFamily);
  font-weight: var(--typography-body-md-fontWeight);
  font-size: var(--typography-body-md-fontSize);
  line-height: var(--typography-body-md-lineHeight);
  letter-spacing: var(--typography-body-md-letterSpacing);
}

.O6gWUi5PhTDDKHzEJNUg {
  font-family: var(--typography-body-sm-fontFamily);
  font-weight: var(--typography-body-sm-fontWeight);
  font-size: var(--typography-body-sm-fontSize);
  line-height: var(--typography-body-sm-lineHeight);
  letter-spacing: var(--typography-body-sm-letterSpacing);
}

.i6rDGDmEStTiqLQeKDEK {
  font-family: var(--typography-body-xs-fontFamily);
  font-weight: var(--typography-body-xs-fontWeight);
  font-size: var(--typography-body-xs-fontSize);
  line-height: var(--typography-body-xs-lineHeight);
  letter-spacing: var(--typography-body-xs-letterSpacing);
}

/* Figma: Title/Large */
.WlvBtL8I3ry_hFy29oAE {
  font-family: var(--typography-title-lg-fontFamily);
  font-weight: var(--typography-title-lg-fontWeight);
  font-size: var(--typography-title-lg-fontSize);
  line-height: var(--typography-title-lg-lineHeight);
  letter-spacing: var(--typography-title-lg-letterSpacing);
}

/* Figma: Title/Medium */
.zLwo5iGSO_oUqJJRbXPY {
  font-family: var(--typography-title-md-fontFamily);
  font-weight: var(--typography-title-md-fontWeight);
  font-size: var(--typography-title-md-fontSize);
  line-height: var(--typography-title-md-lineHeight);
  letter-spacing: var(--typography-title-md-letterSpacing);
}

/* Figma: UI Text/Micro */
.hG1flcAYhfiy2NRt4Yv1 {
  font-family: var(--typography-body-xxs-fontFamily);
  font-weight: var(--typography-body-xxs-fontWeight);
  font-size: var(--typography-body-xxs-fontSize);
  line-height: var(--typography-body-xxs-lineHeight);
  letter-spacing: var(--typography-body-xxs-letterSpacing);
}

/* Figma: UI Text/Link/Default */
.QRbsKA40KKDGxX_fEIXP {
  font-family: var(--typography-ui-link-md-fontFamily);
  font-weight: var(--typography-ui-link-md-fontWeight);
  font-size: var(--typography-ui-link-md-fontSize);
  line-height: var(--typography-ui-link-md-lineHeight);
  letter-spacing: var(--typography-ui-link-md-letterSpacing);
}

/* Figma: UI Text/Link/Small */
.LD8p_jKdkqFWnjfgoJth {
  font-family: var(--typography-ui-link-sm-fontFamily);
  font-weight: var(--typography-ui-link-sm-fontWeight);
  font-size: var(--typography-ui-link-sm-fontSize);
  line-height: var(--typography-ui-link-sm-lineHeight);
  letter-spacing: var(--typography-ui-link-sm-letterSpacing);
}

/* Figma: UI Text/Link/Tiny */
.dgQxHKzPWEQnFoh1bHQm {
  font-family: var(--typography-ui-link-xs-fontFamily);
  font-weight: var(--typography-ui-link-xs-fontWeight);
  font-size: var(--typography-ui-link-xs-fontSize);
  line-height: var(--typography-ui-link-xs-lineHeight);
  letter-spacing: var(--typography-ui-link-xs-letterSpacing);
}

/* Figma: UI Text/Link/Micro */
.KeJJvMSPr6Mtz1Q3ze2E {
  font-family: var(--typography-ui-link-2xs-fontFamily);
  font-weight: var(--typography-ui-link-2xs-fontWeight);
  font-size: var(--typography-ui-link-2xs-fontSize);
  line-height: var(--typography-ui-link-2xs-lineHeight);
  letter-spacing: var(--typography-ui-link-2xs-letterSpacing);
}

/* Figma: UI Text/Action/Default */
.f08u4dU_oW8inJtAE8El {
  font-family: var(--typography-ui-action-md-fontFamily);
  font-weight: var(--typography-ui-action-md-fontWeight);
  font-size: var(--typography-ui-action-md-fontSize);
  line-height: var(--typography-ui-action-md-lineHeight);
  letter-spacing: var(--typography-ui-action-md-letterSpacing);
}

/* Figma: UI Text/Action/Small */
.lxMqxW8r95OrrNly9inD {
  font-family: var(--typography-ui-action-sm-fontFamily);
  font-weight: var(--typography-ui-action-sm-fontWeight);
  font-size: var(--typography-ui-action-sm-fontSize);
  line-height: var(--typography-ui-action-sm-lineHeight);
  letter-spacing: var(--typography-ui-action-sm-letterSpacing);
}

/* Figma: UI Text/Action/Tiny */
.zc7XlIKM1obz7SUHNlag {
  font-family: var(--typography-ui-action-xs-fontFamily);
  font-weight: var(--typography-ui-action-xs-fontWeight);
  font-size: var(--typography-ui-action-xs-fontSize);
  line-height: var(--typography-ui-action-xs-lineHeight);
  letter-spacing: var(--typography-ui-action-xs-letterSpacing);
}

/* Figma: UI Text/Action/Micro */
.kNvqh1roo9ZJXs1e9hGA {
  font-family: var(--typography-ui-action-2xs-fontFamily);
  font-weight: var(--typography-ui-action-2xs-fontWeight);
  font-size: var(--typography-ui-action-2xs-fontSize);
  line-height: var(--typography-ui-action-2xs-lineHeight);
  letter-spacing: var(--typography-ui-action-2xs-letterSpacing);
}

/* Figma: Title/Small */
.uC2cd_J9f5d_prg6buTU {
  font-family: var(--typography-title-sm-fontFamily);
  font-weight: var(--typography-title-sm-fontWeight);
  font-size: var(--typography-title-sm-fontSize);
  line-height: var(--typography-title-sm-lineHeight);
  letter-spacing: var(--typography-title-sm-letterSpacing);
}

/* Figma: Paragraph/Large (NEW) */
.QMXoDNp8MXhwlwDuQwjf {
  font-family: var(--typography-reading-lg-fontFamily);
  font-weight: var(--typography-reading-lg-fontWeight);
  font-size: var(--typography-reading-lg-fontSize);
  line-height: var(--typography-reading-lg-lineHeight);
  letter-spacing: var(--typography-reading-lg-letterSpacing);
  text-align: left;
}

/* Figma: Paragraph/Link/Large (NEW) */
.XOTrK1lIlZBKFQIF3Uoo {
  font-family: var(--typography-reading-link-lg-fontFamily);
  font-weight: var(--typography-reading-link-lg-fontWeight);
  font-size: var(--typography-reading-link-lg-fontSize);
  line-height: var(--typography-reading-link-lg-lineHeight);
  letter-spacing: var(--typography-reading-link-lg-letterSpacing);
  text-align: left;
}

/* Figma: Paragraph/Link/Default */
._n8dN7Ct0pi2kknRVBEA {
  font-family: var(--typography-reading-link-md-fontFamily);
  font-weight: var(--typography-reading-link-md-fontWeight);
  font-size: var(--typography-reading-link-md-fontSize);
  line-height: var(--typography-reading-link-md-lineHeight);
  letter-spacing: var(--typography-reading-link-md-letterSpacing);
  text-align: left;
}

/* Figma: Paragraph/Link/Small */
._3ldtmSnrgO2bJScweBV {
  font-family: var(--typography-reading-link-sm-fontFamily);
  font-weight: var(--typography-reading-link-sm-fontWeight);
  font-size: var(--typography-reading-link-sm-fontSize);
  line-height: var(--typography-reading-link-sm-lineHeight);
  letter-spacing: var(--typography-reading-link-sm-letterSpacing);
  text-align: left;
}

/* Figma: Paragraph/Link/Tiny */
.YgWruKu8jGQ6LT0nxBGd {
  font-family: var(--typography-reading-link-xs-fontFamily);
  font-weight: var(--typography-reading-link-xs-fontWeight);
  font-size: var(--typography-reading-link-xs-fontSize);
  line-height: var(--typography-reading-link-xs-lineHeight);
  letter-spacing: var(--typography-reading-link-xs-letterSpacing);
  text-align: left;
}

/* Figma: Paragraph/Heavy/Large (NEW) */
.V6zUs8N1_87z4K_wepnn {
  font-family: var(--typography-reading-heavy-lg-fontFamily);
  font-weight: var(--typography-reading-heavy-lg-fontWeight);
  font-size: var(--typography-reading-heavy-lg-fontSize);
  line-height: var(--typography-reading-heavy-lg-lineHeight);
  letter-spacing: var(--typography-reading-heavy-lg-letterSpacing);
  text-align: left;
}

/* Figma: Paragraph/Heavy/Default */
.GpbXTgoMoY6Y8DCe11YQ {
  font-family: var(--typography-reading-heavy-md-fontFamily);
  font-weight: var(--typography-reading-heavy-md-fontWeight);
  font-size: var(--typography-reading-heavy-md-fontSize);
  line-height: var(--typography-reading-heavy-md-lineHeight);
  letter-spacing: var(--typography-reading-heavy-md-letterSpacing);
  text-align: left;
}

/* Figma: Paragraph/Heavy/Small */
.ySZBFpKIDXiodsFl24Rh {
  font-family: var(--typography-reading-heavy-sm-fontFamily);
  font-weight: var(--typography-reading-heavy-sm-fontWeight);
  font-size: var(--typography-reading-heavy-sm-fontSize);
  line-height: var(--typography-reading-heavy-sm-lineHeight);
  letter-spacing: var(--typography-reading-heavy-sm-letterSpacing);
  text-align: left;
}

/* Figma: Paragraph/Heavy/Tiny */
.RY_zKyHSuQbvOe6u_3cx {
  font-family: var(--typography-reading-heavy-xs-fontFamily);
  font-weight: var(--typography-reading-heavy-xs-fontWeight);
  font-size: var(--typography-reading-heavy-xs-fontSize);
  line-height: var(--typography-reading-heavy-xs-lineHeight);
  letter-spacing: var(--typography-reading-heavy-xs-letterSpacing);
  text-align: left;
}

/* Text alignment utilities */
.UIlCUy7KEQOogJsdgHgH {
  text-align: left;
}

.uPfbv_cleGzbSuSAOeq0 {
  text-align: center;
}

.efmAHofbPoepvLPjW6Gq {
  text-align: right;
}

.ROApUSqraqS6u6CkhQxl {
  text-align: justify;
}

/* Font weight modifiers */
.DIOps1KHTSHqFnDAmq2E {
  font-weight: 400;
}

.kd4YaGLHa_zyGbq1IWH4 {
  font-weight: 500;
}

.cV5gb_15WFjDj3OdVPLw {
  font-weight: 600;
}

.Any82xK0BMtf60wXwUpz {
  font-weight: 700;
}

.Iez_qHXPszeRgjWevD9A {
  font-weight: 800;
}

.fttwMumGioPQGKJjy83g {
  margin-bottom: 0.35em;
}

/* No wrap utility - prevents text wrapping with ellipsis overflow */
.tO6haETbputrXfEV8H5g {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* TODO(design-tokens): Primary fill uses primitives directly until new-brand semantic tokens ship — see Button.spec.md */

/*
 * The base rule is split by who is expected to win a conflict.
 *
 * `:where(.button)` (zero specificity) holds only what a consumer's own single-class override is
 * legitimately expected to beat, and that no ambient element reset touches: where the button sits
 * in its context (`position`, `display`), how its content is aligned (`align-items`,
 * `justify-content`, e.g. a left-aligned full-width button), its `transition` (e.g. a consumer
 * animating `transform`), and the themeable custom properties. Order between two CSS Modules files isn't guaranteed across
 * bundlers or between dev and production builds, so a tie at one class each can flip. That is how
 * this started (PR #1290): Dialog's `.closeButton { position: absolute }` tied with `.button {
 * position: relative }`, won in `next dev` and lost in a production build. The same holds for
 * PopupCard's `.close` and reco's FavoriteButton, which also set `position: absolute`, and for a
 * consumer hiding a Button with `display: none`.
 *
 * `.button` (one class) holds Button's own identity and box plumbing, the properties app resets do
 * set on `button`/`a`: font, box-sizing, border, background, outline, text decoration, wrapping,
 * shape, plus `isolation`, which the `::before` layering depends on. Zero specificity loses to *any* ambient
 * element rule, so an app reset like `button { font-family: sans-serif }` or `* { box-sizing:
 * inherit }` under a content-box ancestor silently restyled or resized every Button. At one class,
 * those plain element and universal rules lose. Resets with a pseudo-class, such as `a:hover` or
 * `a:visited`, still outrank one class; that trade-off is accepted rather than raising specificity
 * further. Every variant/size/state rule that re-sets one of these properties sits later in this
 * file, so it still wins the tie on source order.
 */
:where(.tAXfnylpsuCJdcNnO1My) {
  /*
   * `--pigment-button-loading-duration` is JS-owned: Button.tsx sets it inline (in lockstep with its
   * `LOADING_TRANSITION_MS` constant) on the same element and at the same time as every
   * `.entering`/`.loading`/`.leaving` class below that reads it, so the 9999s literal never
   * actually applies. The absurd value is the point: should a future rule ever read this variable
   * without Button.tsx also setting the inline override, the result is an unmissable multi-hour
   * stall rather than a slightly-off timing that passes a casual look. (`initial` would make
   * `var()` invalid, but for `animation-duration` that fails silently to 0s — the opposite of loud.)
   * `--pigment-button-loading-slide-distance` is CSS-only, so this is its only definition.
   */
  --pigment-button-loading-duration: 9999s;
  --pigment-button-loading-slide-distance: 15px;
  /* TODO(design-tokens): hardcoded minimum tappable height — replace with a themeable token once one exists. */
  --pigment-button-min-tap-height: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 100ms ease;
  /* Containing block for ::before/::after/.dots (all position: absolute). Not `contain:
     layout` — that's a WebKit bug: it misaligns inline-flex siblings by a few px inside
     a flex-end row (e.g. DialogCommonActions' 3-button layout). */
  position: relative;
}

.tAXfnylpsuCJdcNnO1My {
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  border: none;
  background-color: transparent;
  font-family: var(--primitives-font-family-sharpSans);
  text-decoration: none;
  outline: none;
  isolation: isolate; /* keeps ::before's negative z-index scoped to this button */
  white-space: nowrap;
}

/* Background/border/shadow live here so hover/active can "grow" the shape via inset without affecting layout */
.tAXfnylpsuCJdcNnO1My::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-sizing: border-box;
  transition: inset 100ms ease-out, box-shadow 100ms ease, background-color 100ms ease;
}

.tAXfnylpsuCJdcNnO1My:not([aria-disabled='true']):not([aria-busy='true']):active::before {
  transition-duration: 50ms;
}

.tAXfnylpsuCJdcNnO1My[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.3;
}

/*
 * Loading fades less than a plain disabled button, since it's a transient state rather than a
 * non-interactive one. This can't be a plain `transition: opacity`: the phase class and `aria-busy`
 * are both derived from the same JS phase state (see Button.tsx) and so land in one React commit,
 * and a CSS transition doesn't reliably animate a property change bundled with that. @keyframes
 * always animates.
 * `.loading` is a steady state with no timed edge, so it just holds the value the entering keyframe
 * already faded to.
 *
 * Must stay after the `[aria-disabled='true']` rule above. The two are the same specificity (one
 * class plus one attribute, versus two classes), so a button that is both disabled and loading
 * resolves on source order alone, and the transient 0.5 loading fade is the intended winner over
 * disabled's 0.3. Reordering these blocks silently flips that combination to the heavier dim.
 */
.tAXfnylpsuCJdcNnO1My.gVvjw3d5kL_KfIk1iK1H {
  animation: xfPZ8AKUB2RQ_9GeVDD5 var(--pigment-button-loading-duration) ease-in-out forwards;
}

.tAXfnylpsuCJdcNnO1My.pjgcplAHMqD9nBuGNZQe {
  opacity: 0.5;
}

/* The .entering keyframe played backwards */
.tAXfnylpsuCJdcNnO1My.ODRnqEkZomLh1B8Leu7K {
  animation: xfPZ8AKUB2RQ_9GeVDD5 var(--pigment-button-loading-duration) ease-in-out reverse forwards;
}

@keyframes xfPZ8AKUB2RQ_9GeVDD5 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

/*
 * `aria-disabled` and `aria-busy` are set independently (see Button.tsx), so both have to be
 * excluded: a loading but not disabled button still blocks clicks via the JS guard, and so must not
 * show pointer/hover/press feedback either. The same double exclusion applies to every other
 * hover/active rule below.
 */
.tAXfnylpsuCJdcNnO1My:not([aria-disabled='true']):not([aria-busy='true']) {
  cursor: pointer;
}

/*
 * Explicit `default`, not `wait`/`progress` (which overstate a single button's transient state) and
 * not left unset: Button is polymorphic, so an unset cursor falls through to the root element's own
 * native default — e.g. a link's pointer-on-hover — silently undoing the "not clickable right now"
 * signal for `component="a"`.
 */
.tAXfnylpsuCJdcNnO1My[aria-busy='true']:not([aria-disabled='true']) {
  cursor: default;
}

/*
 * TODO(design-tokens): interim new-brand focus-visible treatment — a thicker inkyRed-500 ring,
 * not yet backed by an approved semantic token (existing `--activity-focus-*` tokens are the old
 * blue palette). Swap to the real token once it ships.
 */
.tAXfnylpsuCJdcNnO1My:focus-visible {
  outline: 4px solid var(--primitives-color-inkyRed-500);
  outline-offset: 2px;
}

/* Full width */
.EVre6jsLbk8E0gHZSajc {
  width: 100%;
}

/*
 * Sizes: `--pigment-button-height` is each size's single source of truth for its own `height` (below)
 * and for the `minWidth="default"` floor (further down), which is derived as a multiple of it.
 */
.SKuzeSZDi7zflQ7wlOLY {
  --pigment-button-height: 32px;
  height: var(--pigment-button-height);
  padding: 8px 12px;
  gap: 6px;
  font-weight: var(--typography-component-button-sm-fontWeight);
  font-size: 13px;
  line-height: 16px;
}

/*
 * Invisible hit-area expansion, so every size meets `--pigment-button-min-tap-height` even when its
 * own visible `--pigment-button-height` falls under that floor (currently only `.small`). `max()`-based
 * rather than hardcoded to `.small`, so it keeps working if either value changes — a themed override
 * of the floor, or a size's height. Sizes that already clear the floor get a same-size no-op
 * pseudo-element. Only height is expanded, not width.
 */
.tAXfnylpsuCJdcNnO1My::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: max(var(--pigment-button-height), var(--pigment-button-min-tap-height));
}

.opL6ad2D9yCx14JXl_U4 {
  --pigment-button-height: 40px;
  height: var(--pigment-button-height);
  padding: 8px 15px;
  gap: 6px;
  font-weight: var(--typography-component-button-md-fontWeight);
  font-size: 14px;
  line-height: 18px;
}

.ngkJduO_6BPTSbGYeFC1 {
  --pigment-button-height: 48px;
  height: var(--pigment-button-height);
  padding: 12px 18px;
  gap: 8px;
  font-weight: var(--typography-component-button-lg-fontWeight);
  font-size: 16px;
  line-height: 20px;
}

.jEJPxFFzXqC52reGxWQN {
  --pigment-button-height: 56px;
  height: var(--pigment-button-height);
  padding: 16px 22px;
  gap: 8px;
  font-weight: var(--typography-component-button-xl-fontWeight);
  font-size: 16px;
  line-height: 20px;
}

/*
 * The mixed units are deliberate and signed off by UX, not an oversight to unify: "default" is
 * relative because its whole job is staying proportional to whatever size the button is, while
 * "wide"/"extraWide" are absolute because Figma specifies them as fixed widths.
 */
.UxBhuTS5cBM92mkfYfmj {
  min-width: calc(var(--pigment-button-height) * 2.25);
}

.Bz6UsaB1Wt0AtfdXputM {
  min-width: 190px;
}

.D0sqUQrsltYxWS7Io4y6 {
  min-width: 300px;
}

/*
 * On touch devices a tap satisfies `:hover` too, and without this guard the elevated/tinted hover
 * look gets stuck on the tapped button until the user taps elsewhere — no real pointer ever leaves
 * to clear it. Every hover rule below is gated the same way.
 */
@media (hover: hover) and (pointer: fine) {
  /* Shared elevation shadows for solid-fill variants (Primary, Secondary) */
  .SoESCJca8p1F3ARo9j4q:not([aria-disabled='true']):not([aria-busy='true']):hover::before,
  .NANi61PWsD54yfa0adFA:not([aria-disabled='true']):not([aria-busy='true']):hover::before {
    inset: -2px;
    box-shadow: 0px 12px 20px 2px rgba(0, 0, 0, 0.08), 0px 8px 16px 0px rgba(0, 0, 0, 0.08);
  }
}

.SoESCJca8p1F3ARo9j4q:not([aria-disabled='true']):not([aria-busy='true']):active::before,
.NANi61PWsD54yfa0adFA:not([aria-disabled='true']):not([aria-busy='true']):active::before {
  inset: -1px;
  box-shadow: 0px 6px 12px 2px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
}

/* Primary */
.SoESCJca8p1F3ARo9j4q {
  color: var(--interactive-text-onFill);
}

.SoESCJca8p1F3ARo9j4q::before {
  background-color: var(--primitives-color-charcoal-900);
}

.SoESCJca8p1F3ARo9j4q.IZQ1gNUf63WVExqLTqez {
  color: var(--neutral-text-primary);
}

.SoESCJca8p1F3ARo9j4q.IZQ1gNUf63WVExqLTqez::before {
  background-color: var(--neutral-background-primary);
}

/* Secondary */
.NANi61PWsD54yfa0adFA {
  color: var(--neutral-text-primary);
}

.NANi61PWsD54yfa0adFA::before {
  background-color: transparent;
  border: 2px solid var(--primitives-color-charcoal-900);
}

.NANi61PWsD54yfa0adFA.IZQ1gNUf63WVExqLTqez {
  color: var(--neutral-text-primaryOnFill);
}

/* Only border-color differs when inverse; hover/pressed reuse the shared shadow/inset rule above */
.NANi61PWsD54yfa0adFA.IZQ1gNUf63WVExqLTqez::before {
  border-color: var(--interactive-border-strongOnFill);
}

/* Tertiary — no border/shadow, just a subtle dark-tint overlay */
.hTy3PNQUEsTmjHDopQqa {
  color: var(--neutral-text-primary);
}

.hTy3PNQUEsTmjHDopQqa::before {
  background-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .hTy3PNQUEsTmjHDopQqa:not([aria-disabled='true']):not([aria-busy='true']):hover::before {
    inset: -2px;
    background-color: rgba(0, 0, 0, 0.05);
  }
}

.hTy3PNQUEsTmjHDopQqa:not([aria-disabled='true']):not([aria-busy='true']):active::before {
  inset: -1px;
  background-color: rgba(0, 0, 0, 0.1);
}

/*
 * Overrides the base `::before` transition (100ms, tuned for hover/press feedback) so the tint's
 * fade is paced by the same duration as the button's opacity dim. Left at 100ms, the tint finishes
 * changing color well before the parent's opacity settles and the two animations visibly desync.
 */
.hTy3PNQUEsTmjHDopQqa.gVvjw3d5kL_KfIk1iK1H::before,
.hTy3PNQUEsTmjHDopQqa.ODRnqEkZomLh1B8Leu7K::before {
  transition: inset 100ms ease-out, box-shadow 100ms ease,
    background-color var(--pigment-button-loading-duration) ease-in-out;
}

.hTy3PNQUEsTmjHDopQqa.gVvjw3d5kL_KfIk1iK1H::before,
.hTy3PNQUEsTmjHDopQqa.pjgcplAHMqD9nBuGNZQe::before {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Leaving is the reverse of entering, so it fades back to the resting value, not the loading tint. */
.hTy3PNQUEsTmjHDopQqa.ODRnqEkZomLh1B8Leu7K::before {
  background-color: transparent;
}

.hTy3PNQUEsTmjHDopQqa.IZQ1gNUf63WVExqLTqez {
  color: var(--neutral-text-primaryOnFill);
}

@media (hover: hover) and (pointer: fine) {
  .hTy3PNQUEsTmjHDopQqa.IZQ1gNUf63WVExqLTqez:not([aria-disabled='true']):not([aria-busy='true']):hover::before {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

.hTy3PNQUEsTmjHDopQqa.IZQ1gNUf63WVExqLTqez:not([aria-disabled='true']):not([aria-busy='true']):active::before {
  background-color: rgba(255, 255, 255, 0.14);
}

.hTy3PNQUEsTmjHDopQqa.IZQ1gNUf63WVExqLTqez.gVvjw3d5kL_KfIk1iK1H::before,
.hTy3PNQUEsTmjHDopQqa.IZQ1gNUf63WVExqLTqez.ODRnqEkZomLh1B8Leu7K::before {
  transition: inset 100ms ease-out, box-shadow 100ms ease,
    background-color var(--pigment-button-loading-duration) ease-in-out;
}

.hTy3PNQUEsTmjHDopQqa.IZQ1gNUf63WVExqLTqez.gVvjw3d5kL_KfIk1iK1H::before,
.hTy3PNQUEsTmjHDopQqa.IZQ1gNUf63WVExqLTqez.pjgcplAHMqD9nBuGNZQe::before {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Fades back to the resting value — see the non-inverse rule above. */
.hTy3PNQUEsTmjHDopQqa.IZQ1gNUf63WVExqLTqez.ODRnqEkZomLh1B8Leu7K::before {
  background-color: transparent;
}

/* Nudges text down to correct for Sharp Sans's ascent/descent not being visually centered within its line box */
.FwmXCcg8IfRKMYT1OnpZ {
  transform: translateY(0.49px);
}

/*
 * Button.tsx already skips rendering `.label` for empty `children`; this also covers children that
 * render nothing at runtime (e.g. a component returning `null` below a breakpoint). An empty `.label`
 * would otherwise stay a flex item in `.content` and cost a `gap` beside the icon.
 */
.FwmXCcg8IfRKMYT1OnpZ:empty {
  display: none;
}

/* Negative margin offsets whitespace baked into each icon's own artwork */
.UY6T9FO4BLMjvzppPgdF {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
}

.UY6T9FO4BLMjvzppPgdF > svg {
  width: 100%;
  height: 100%;
}

.SKuzeSZDi7zflQ7wlOLY .UY6T9FO4BLMjvzppPgdF {
  width: 18px;
  height: 18px;
  margin-left: -2px;
  margin-right: -2px;
}

.opL6ad2D9yCx14JXl_U4 .UY6T9FO4BLMjvzppPgdF {
  width: 20px;
  height: 20px;
  margin-left: -2px;
  margin-right: -2px;
}

.ngkJduO_6BPTSbGYeFC1 .UY6T9FO4BLMjvzppPgdF,
.jEJPxFFzXqC52reGxWQN .UY6T9FO4BLMjvzppPgdF {
  width: 24px;
  height: 24px;
  margin-left: -3px;
  margin-right: -3px;
}

/*
 * A square tap target must not squish into an oval in a tight flex row. Zero specificity, like the
 * other layout-in-context rules in `:where(.button)`, so a consumer's own `flex-shrink` still wins.
 */
:where(.ISSJ5ythjJ8JMs4c8wzg) {
  flex-shrink: 0;
}

/*
 * Square, with the negative-margin icon compensation dropped: that compensation exists to align an
 * icon against an adjacent label, and there is no label here. A pill radius on an equal-width/height
 * box already renders as a circle, so no radius override is needed. Must stay after the size/icon
 * rules above, since these same-specificity overrides win the cascade tie-break on source order.
 */
.ISSJ5ythjJ8JMs4c8wzg {
  width: var(--pigment-button-height);
  padding: 0;
}

.ISSJ5ythjJ8JMs4c8wzg .UY6T9FO4BLMjvzppPgdF {
  margin-left: 0;
  margin-right: 0;
}

/*
 * A text Button's width is content-driven and never needs a floor, so the base `.button::after` rule
 * only floors height. An iconOnly button is square, so the floor extends to width too, centered on
 * both axes. Must stay after `.button::after` to win the same-specificity tie-break.
 */
.ISSJ5ythjJ8JMs4c8wzg::after {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(var(--pigment-button-height), var(--pigment-button-min-tap-height));
}

/*
 * .content (label + icons) stays in normal flow even while fully hidden, so it keeps driving the
 * button's width; .dots is an absolutely-positioned overlay, mounted only while busy (see
 * Button.tsx) since it has no layout role to preserve.
 *
 * Whichever layer is going away always slides left and whichever is appearing always slides in from
 * the right, both on the same duration and easing, like two sides of one rotating drum — only the
 * opacity direction differs. Each phase's start/end values line up with the adjacent phase's while
 * the element is at opacity 0, so the instant position resets never produce a visible jump.
 */
@keyframes uKWIaJ6UXJZcimoddBjQ {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(-1 * var(--pigment-button-loading-slide-distance)));
  }
}

@keyframes DEeZTwPunljFTiZMjyqi {
  from {
    opacity: 0;
    transform: translateX(var(--pigment-button-loading-slide-distance));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.oAUgZFi9OVn_UX8onnId {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: translateX(0);
}

.SKuzeSZDi7zflQ7wlOLY .oAUgZFi9OVn_UX8onnId,
.opL6ad2D9yCx14JXl_U4 .oAUgZFi9OVn_UX8onnId {
  gap: 6px;
}

.ngkJduO_6BPTSbGYeFC1 .oAUgZFi9OVn_UX8onnId,
.jEJPxFFzXqC52reGxWQN .oAUgZFi9OVn_UX8onnId {
  gap: 8px;
}

._5U4mCT_yUDoCLtRvHhvU {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(var(--pigment-button-loading-slide-distance));
  pointer-events: none;
}

.SKuzeSZDi7zflQ7wlOLY ._5U4mCT_yUDoCLtRvHhvU,
.opL6ad2D9yCx14JXl_U4 ._5U4mCT_yUDoCLtRvHhvU {
  gap: 4px;
}

.ngkJduO_6BPTSbGYeFC1 ._5U4mCT_yUDoCLtRvHhvU,
.jEJPxFFzXqC52reGxWQN ._5U4mCT_yUDoCLtRvHhvU {
  gap: 5px;
}

/* Entering: content exits left, dots enter from the right — same slide timing, opposite fade */
.gVvjw3d5kL_KfIk1iK1H .oAUgZFi9OVn_UX8onnId {
  pointer-events: none;
  animation: uKWIaJ6UXJZcimoddBjQ var(--pigment-button-loading-duration) ease-in-out forwards;
}

.gVvjw3d5kL_KfIk1iK1H ._5U4mCT_yUDoCLtRvHhvU {
  animation: DEeZTwPunljFTiZMjyqi var(--pigment-button-loading-duration) ease-in-out forwards;
}

/*
 * Steady loading: content stays hidden/out of the way, dots stay shown. Deliberately opacity-only
 * (not `visibility: hidden`, which would additionally strip this text from the accessibility tree)
 * so the button keeps a stable accessible name throughout — see Button.tsx. The tradeoff is that
 * this (invisible) text stays selectable during the loading state, which is considered a minor risk.
 */
.pjgcplAHMqD9nBuGNZQe .oAUgZFi9OVn_UX8onnId {
  opacity: 0;
  transform: translateX(calc(-1 * var(--pigment-button-loading-slide-distance)));
  pointer-events: none;
}

.pjgcplAHMqD9nBuGNZQe ._5U4mCT_yUDoCLtRvHhvU {
  opacity: 1;
  transform: translateX(0);
}

/* Leaving: dots (currently shown) exit left, content enters from the right — same slide timing, opposite fade */
.ODRnqEkZomLh1B8Leu7K ._5U4mCT_yUDoCLtRvHhvU {
  pointer-events: none;
  animation: uKWIaJ6UXJZcimoddBjQ var(--pigment-button-loading-duration) ease-in-out forwards;
}

.ODRnqEkZomLh1B8Leu7K .oAUgZFi9OVn_UX8onnId {
  visibility: visible;
  animation: DEeZTwPunljFTiZMjyqi var(--pigment-button-loading-duration) ease-in-out forwards;
}

@keyframes irSeBBcW8Y0bWgCaZph3 {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
    filter: blur(0.5px);
  }
}

.eI_VU7R6jb8ClGRAFJp6 {
  border-radius: 50%;
  background-color: currentColor;
  animation: irSeBBcW8Y0bWgCaZph3 1.1s ease-in-out infinite;
}

.SKuzeSZDi7zflQ7wlOLY .eI_VU7R6jb8ClGRAFJp6,
.opL6ad2D9yCx14JXl_U4 .eI_VU7R6jb8ClGRAFJp6 {
  width: 5px;
  height: 5px;
}

.ngkJduO_6BPTSbGYeFC1 .eI_VU7R6jb8ClGRAFJp6,
.jEJPxFFzXqC52reGxWQN .eI_VU7R6jb8ClGRAFJp6 {
  width: 6px;
  height: 6px;
}

.eI_VU7R6jb8ClGRAFJp6:nth-child(2) {
  animation-delay: 150ms;
}

.eI_VU7R6jb8ClGRAFJp6:nth-child(3) {
  animation-delay: 300ms;
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tAXfnylpsuCJdcNnO1My,
  .tAXfnylpsuCJdcNnO1My::before,
  .tAXfnylpsuCJdcNnO1My.gVvjw3d5kL_KfIk1iK1H,
  .tAXfnylpsuCJdcNnO1My.ODRnqEkZomLh1B8Leu7K,
  .gVvjw3d5kL_KfIk1iK1H .oAUgZFi9OVn_UX8onnId,
  .gVvjw3d5kL_KfIk1iK1H ._5U4mCT_yUDoCLtRvHhvU,
  .ODRnqEkZomLh1B8Leu7K .oAUgZFi9OVn_UX8onnId,
  .ODRnqEkZomLh1B8Leu7K ._5U4mCT_yUDoCLtRvHhvU,
  .eI_VU7R6jb8ClGRAFJp6 {
    transition: none;
    animation: none;
  }
}

/* The standard visually-hidden recipe: out of flow and clipped to nothing, but still rendered, so
   it stays in the accessibility tree. `display: none` / `visibility: hidden` would remove it from
   that tree, which is the opposite of the point. */
.jeOMPgV1nbjFS8wuG7AW {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Root — wraps arrow overlay + keen-slider track */
.jCPmfMoGFM1wwQjNrBaR {
  position: relative;
  display: flex;
  width: 100%;
  height: max-content;
}

/* Arrow overlay — sits over the slider; pointer-events: none so cards remain draggable */
.Nu8L9WY2u47Nl1n1AsCw {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

/* Arrow button — Pigment Button supplies size, colors, hover/pressed and focus. The resting shadow
   sits on the root because Button draws its hover/pressed shadows on ::before, so the two layer
   instead of one overriding the other; it lifts the white button off busy imagery behind it. */
.FgGpKfHdhoBLl2NbpCRr {
  pointer-events: auto;
  flex-shrink: 0;
  margin: 0 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.08);
}

/* keen-slider clips every slide (and the track) with overflow: hidden, which cuts off Card's hover
   shadow and focus ring. Slides don't need clipping; the track does, since it hides off-screen
   slides. Inline padding can't make room because keen-slider sizes slides from the track's
   border-box width, so:
   - block axis: padding cancelled by a negative margin, which works in every browser;
   - inline axis: overflow-clip-margin shows Card's focus ring past the track edge. Browsers without
     overflow-clip-margin keep clipping at the edge.
   Doubled selectors outrank keen-slider's own `:not([data-keen-slider-disabled])` rules. */
.jCPmfMoGFM1wwQjNrBaR.jCPmfMoGFM1wwQjNrBaR .keen-slider {
  padding-block: var(--space-componentLayout-sm);
  margin-block: calc(-1 * var(--space-componentLayout-sm));
  overflow: clip;
  /* Set inline by Carousel.tsx; overflow-clip-margin doesn't accept min(), so the cap is computed there. */
  overflow-clip-margin: var(--reco-carousel-clip-margin, 0px);
}

.jCPmfMoGFM1wwQjNrBaR.jCPmfMoGFM1wwQjNrBaR .keen-slider .keen-slider__slide {
  overflow: visible;
}

._nA5WDDGpXElUsi6ONK8 {
  display: flex;
  gap: var(--space-inline-sm); /* 8px, per design */
  margin-left: auto;
  flex-shrink: 0;
}

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

/* Shared shimmer animation — override --shimmer-highlight for a lighter mid-stop */
.fFpJKraLJhaUc62UN5cj {
  background: linear-gradient(
    90deg,
    var(--neutral-background-subtle) 25%,
    var(--shimmer-highlight, var(--neutral-background-subtleOpaque)) 50%,
    var(--neutral-background-subtle) 75%
  );
  background-size: 200% 100%;
  animation: fFpJKraLJhaUc62UN5cj 1.5s infinite;
}

.W1kzJep01Xqelk9VlbOI {
  margin: 2.5rem 0;
}

.aeWInM4KxzvkarThvRJe {
  height: 2rem;
  width: 12.5rem;
  border-radius: 0.25rem;
  margin-bottom: 1.5rem;
}

.gT_eXqY2dCraBig7VFDw {
  display: grid;
}

.GXTU0FMip_xIrQUGCS1A {
  --shimmer-highlight: var(--neutral-background-pageBG);
  border-radius: 0.5rem;
  padding-top: 100%;
  position: relative;
}

.jZk9krpfkPTIhOPy2oSV {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: var(--neutral-background-primary);
  border-radius: 0 0 0.5rem 0.5rem;
}

.kiSw2eTJ0f8VDLld_Cm4 {
  height: 1rem;
  border-radius: 0.125rem;
  margin-bottom: 0.5rem;
}

.W3C0zm130TVvy2tDPRdE {
  height: 0.875rem;
  width: 60%;
  border-radius: 0.125rem;
}

/* Badge component styles */

.zucCh7Z0qCUYoBI7pLuB {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
  position: relative;
  border-radius: var(--radius-sm);
  font-family: var(--primitives-font-family-sharpSans);
  font-weight: var(--primitives-font-weight-800);
  line-height: var(--primitives-font-lineHeight-100);
  white-space: nowrap;
}

/* Sizes */

.hZeMhAU0UHgkYO3U36KH {
  height: 18px;
  gap: 2px;
  padding: 4px;
  font-size: var(--primitives-font-size-12);
}

.yG3PlnJmtFDuFZUyQl8e {
  height: 21px;
  gap: 3px;
  padding: 4px 5px;
  font-size: var(--primitives-font-size-12);
}

.g5nzPOepF3zNaaWcvkT0 {
  height: 24px;
  gap: 4px;
  padding: 4px 6px;
  font-size: var(--primitives-font-size-13);
}

/* Icon */

.JoC3pGIftUkrdtk1FHy6 {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.JoC3pGIftUkrdtk1FHy6 > svg,
.JoC3pGIftUkrdtk1FHy6 svg {
  width: 14px;
  height: 14px;
}

.g5nzPOepF3zNaaWcvkT0 .JoC3pGIftUkrdtk1FHy6 > svg,
.g5nzPOepF3zNaaWcvkT0 .JoC3pGIftUkrdtk1FHy6 svg {
  width: 16px;
  height: 16px;
}

/* Label */

.wOnYFIOfu_tpTez26ouR {
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

/* Color x Emphasis: solid fills (high, core) and subtle tints (low) */

.zJo_cxmu20rBFkeEmAd6.UEerlHBR92wefxh_GTP9,
.zJo_cxmu20rBFkeEmAd6.z8T4uGuHZpJ1VvkdcpOX {
  background-color: var(--primitives-color-charcoal-900);
  color: var(--neutral-text-primaryOnFill);
}

.zJo_cxmu20rBFkeEmAd6.yGXYEn6MlUrUamEUNfFj {
  background-color: var(--primitives-color-charcoal-100);
  color: var(--primitives-color-charcoal-900);
}

.Fn3gsrRLFK3lhIurEDOl.UEerlHBR92wefxh_GTP9 {
  background-color: var(--primitives-color-inkyRed-800);
  color: var(--primitives-color-inkyRed-150);
}

.Fn3gsrRLFK3lhIurEDOl.z8T4uGuHZpJ1VvkdcpOX {
  background-color: var(--primitives-color-brand-inkyRed-core);
  color: var(--neutral-text-primaryOnFill);
}

.Fn3gsrRLFK3lhIurEDOl.yGXYEn6MlUrUamEUNfFj {
  background-color: var(--primitives-color-inkyRed-100);
  color: var(--primitives-color-inkyRed-700);
}

.LIaTVgfdZc0TTe8rosAS.UEerlHBR92wefxh_GTP9 {
  background-color: var(--primitives-color-grassGreen-800);
  color: var(--primitives-color-grassGreen-150);
}

.LIaTVgfdZc0TTe8rosAS.z8T4uGuHZpJ1VvkdcpOX {
  background-color: var(--primitives-color-grassGreen-600);
  color: var(--neutral-text-primaryOnFill);
}

.LIaTVgfdZc0TTe8rosAS.yGXYEn6MlUrUamEUNfFj {
  background-color: var(--primitives-color-grassGreen-100);
  color: var(--primitives-color-grassGreen-700);
}

/* Icon colors per color × emphasis */

.zJo_cxmu20rBFkeEmAd6.UEerlHBR92wefxh_GTP9 .JoC3pGIftUkrdtk1FHy6,
.zJo_cxmu20rBFkeEmAd6.z8T4uGuHZpJ1VvkdcpOX .JoC3pGIftUkrdtk1FHy6,
.Fn3gsrRLFK3lhIurEDOl.z8T4uGuHZpJ1VvkdcpOX .JoC3pGIftUkrdtk1FHy6,
.LIaTVgfdZc0TTe8rosAS.z8T4uGuHZpJ1VvkdcpOX .JoC3pGIftUkrdtk1FHy6 {
  color: var(--neutral-icon-onFill);
}

.zJo_cxmu20rBFkeEmAd6.yGXYEn6MlUrUamEUNfFj .JoC3pGIftUkrdtk1FHy6 {
  color: var(--neutral-icon-default);
}

.Fn3gsrRLFK3lhIurEDOl.yGXYEn6MlUrUamEUNfFj .JoC3pGIftUkrdtk1FHy6 {
  color: var(--primitives-color-inkyRed-700);
}

.LIaTVgfdZc0TTe8rosAS.yGXYEn6MlUrUamEUNfFj .JoC3pGIftUkrdtk1FHy6 {
  color: var(--primitives-color-grassGreen-700);
}

/*
 * onBackground: frosted glass treatment, only applied together with the
 * matching *Low emphasis class (component only sets it when emphasis="low").
 * Rendered via ::before (not an extra DOM node) so label/icon can layer above
 * it at z-index: 1.
 */

.yGXYEn6MlUrUamEUNfFj.XdRBlIGhQc07j2LuHvlA {
  background-color: transparent;
  backdrop-filter: blur(2px);
}

.yGXYEn6MlUrUamEUNfFj.XdRBlIGhQc07j2LuHvlA::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.8;
  z-index: 0;
}

.zJo_cxmu20rBFkeEmAd6.yGXYEn6MlUrUamEUNfFj.XdRBlIGhQc07j2LuHvlA::before {
  background-color: var(--primitives-color-neutral-white900);
}

.Fn3gsrRLFK3lhIurEDOl.yGXYEn6MlUrUamEUNfFj.XdRBlIGhQc07j2LuHvlA::before {
  background-color: var(--primitives-color-inkyRed-150);
}

.LIaTVgfdZc0TTe8rosAS.yGXYEn6MlUrUamEUNfFj.XdRBlIGhQc07j2LuHvlA::before {
  background-color: var(--primitives-color-grassGreen-150);
}

.wnZLC6jId753yJaMgby0 {
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 2px; /* raw — no matching unit token */
}

.B_LYuoCiyycVmmpLjFvE {
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 8px; /* raw — no matching unit token */
}

.o_HSCDNGQh00Jy35q7no {
  font-family: var(--typography-body-sm-fontFamily);
  font-size: var(--typography-body-sm-fontSize);
  font-weight: var(--typography-body-sm-fontWeight);
  line-height: 1;
  letter-spacing: var(--typography-body-sm-letterSpacing);
  color: var(--neutral-text-primary);
}

/* size="small" uses uiTextTiny (body-xs) for the count instead of the default uiTextSmall (body-sm) */
.RWtb_VKd5ajeZBmo5GMg {
  font-family: var(--typography-body-xs-fontFamily);
  font-size: var(--typography-body-xs-fontSize);
  font-weight: var(--typography-body-xs-fontWeight);
  letter-spacing: var(--typography-body-xs-letterSpacing);
}

.OwYlFtitCL6HpP3EYFa7 {
  display: flex;
  align-items: center;
  line-height: 1;
}

.bGvvv5QnqYH6jtc9tUzI {
  display: flex;
}

.bGvvv5QnqYH6jtc9tUzI svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Star dimensions follow the `size` prop, matching the standard row's 16px/20px variants. */
.oA9RpNok8hFDl7RnLG2Z {
  width: 20px;
  height: 20px;
  margin: 0 -1.5px; /* offsets ~1.5px of transparent margin baked into the star SVG at this size */
}

.EFgT9zppItTOJtU5vf1G {
  width: 16px;
  height: 16px;
  margin: 0 -1.2px; /* the medium offset scaled to the 16px star (1.5 * 16/20) */
}

.ndqc71lo2iq8ZKWX2LKw {
  font-family: var(--typography-body-sm-fontFamily);
  font-size: var(--typography-body-sm-fontSize);
  font-weight: var(--typography-body-sm-fontWeight);
  line-height: 1;
  letter-spacing: var(--typography-body-sm-letterSpacing);
  color: var(--neutral-text-primary);
  margin-left: 4px; /* raw — no matching unit token */
}

.B8aLsAWMHSxyau8rzVXm {
  color: var(--neutral-text-secondary);
  font-size: var(--typography-body-xxs-fontSize); /* resolves to 12px, matching ProductRating's count text */
  line-height: 1;
  margin-left: 2px; /* raw — no matching unit token */
}

._9jaWaJh49sbNK4CI_RA {
  opacity: 0.38;
}

.aww5472zjR30ZokLkd2T {
  position: relative;
  display: flex;
}

.FJCOnU8fTpbDSGPDn2w_,
.js4p9NbiK7RY5RTwiCmU {
  display: block;
}

.js4p9NbiK7RY5RTwiCmU {
  position: absolute;
  top: 0;
  left: 0;
}

/* Size variants — the star SVG has ~2px of transparent margin baked in; offset it with a
   negative margin on the row container instead of cropping the SVG, so the star always renders
   full and unclipped even if the margin estimate is slightly off. */
.JE9xEVeRCye7vFkUJko2 {
  margin: 0 -1px;
}

.JE9xEVeRCye7vFkUJko2 .FJCOnU8fTpbDSGPDn2w_,
.JE9xEVeRCye7vFkUJko2 .js4p9NbiK7RY5RTwiCmU {
  width: 16px;
  height: 16px;
}

.mIJIqSE9Ti7BJ9Q5ps7b {
  margin: 0 -2px;
}

.mIJIqSE9Ti7BJ9Q5ps7b .FJCOnU8fTpbDSGPDn2w_,
.mIJIqSE9Ti7BJ9Q5ps7b .js4p9NbiK7RY5RTwiCmU {
  width: 20px;
  height: 20px;
}

/*
 * --pigment-card-* are Card-local implementation details (ADR-19). The
 * per-size radii are the exception: --pigment-card-radius-* read the shared
 * --radius-cardXs/Sm/Md/Lg tokens, so a surface that is not a Card can match
 * a Card of a given size. (--radius-card is a separate, single-value token.)
 * Sizes are keyed to the Card's own rendered inline-size via CSS container
 * queries.
 */

/*
 * `.root` can't declare `container-type` on itself (a container can't be a
 * query subject of the container it establishes), so `sizeContainer` is a
 * plain wrapper that establishes it instead.
 */
.VuiJ8_fEGZOBFdiVfLE3 {
  display: block;

  /* Named per size so the @container breakpoints and the `size` prop's
     size-{tier}-at-{bp} overrides below both resolve the same source of truth. */
  /* xs was 18px; dropped to 16px per team design feedback — a deliberate, unrelated adjustment,
     not a stray value from tuning the padding-floor selector below. */
  --pigment-card-radius-xs: var(--radius-cardXs);
  --pigment-card-radius-sm: var(--radius-cardSm);
  --pigment-card-radius-md: var(--radius-cardMd);
  --pigment-card-radius-lg: var(--radius-cardLg);

  --pigment-card-media-inset-xs: 8px;
  --pigment-card-media-inset-sm: 10px;
  --pigment-card-media-inset-md: 12px;
  --pigment-card-media-inset-lg: 16px;

  --pigment-card-content-padding-x-xs: 8px;
  --pigment-card-content-padding-x-sm: 12px;
  --pigment-card-content-padding-x-md: 16px;
  --pigment-card-content-padding-x-lg: 24px;

  --pigment-card-content-padding-y-xs: 12px;
  --pigment-card-content-padding-y-sm: 12px;
  --pigment-card-content-padding-y-md: 16px;
  --pigment-card-content-padding-y-lg: 24px;

  --pigment-card-content-gap-xs: 4px;
  --pigment-card-content-gap-sm: 6px;
  --pigment-card-content-gap-md: 8px;
  --pigment-card-content-gap-lg: 8px;

  /*
   * Reference values only — a container-query condition can't consume a
   * custom property (`min-width: var(...)` isn't valid), so these can't
   * drive the @container rules below directly. They exist so a consumer
   * building their own size-aware markup inside a Card has a documented,
   * stable number to write into their own `@container pigment-card` rule
   * instead of reverse-engineering one from behavior. Note that which of the
   * two sets is live depends on the Card's current orientation, which may
   * itself vary by viewport — see the Orientation section. Each literal
   * min-width below must be kept in sync with its matching variable by
   * hand — see the comment above each @container block.
   */
  --pigment-card-breakpoint-vertical-sm: 180px;
  --pigment-card-breakpoint-vertical-md: 250px;
  --pigment-card-breakpoint-vertical-lg: 400px;
  --pigment-card-breakpoint-horizontal-sm: 320px;
  --pigment-card-breakpoint-horizontal-md: 380px;
  --pigment-card-breakpoint-horizontal-lg: 500px;

  /* xs is the mobile-first default — no query needed */
  --pigment-card-radius: var(--pigment-card-radius-xs);
  --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-xs);
  --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-xs);
  --pigment-card-content-gap: var(--pigment-card-content-gap-xs);
  --pigment-card-media-inset: var(--pigment-card-media-inset-xs);

  container-type: inline-size;
  /*
   * Two names: `pigment-card` is the stable, consumer-facing handle documented
   * above, and `pigment-card-vertical`/`pigment-card-horizontal` is swapped per
   * orientation by the `orientation-*-at-*` rules in the Orientation section.
   * Everything orientation-dependent reads the orientation back through the
   * second name. This default is the fallback for the case where no orientation
   * class lands here — without it nothing would match and every tier below
   * would silently fall back to `xs`. That case is reachable through Card's
   * public API, so this is load-bearing, not dead code: `orientation={{}}` is a
   * legal `ResponsiveProp` and emits no class at all, and a breakpoint object
   * with no `sm` entry (`{ md: 'horizontal' }`) emits nothing below its
   * smallest breakpoint. Both land here and render vertical.
   */
  container-name: pigment-card pigment-card-vertical;
}

/*
 * box-shadow is composed from two CSS variables (elevation, selected ring)
 * since it's a single property that a second declaration would clobber
 * rather than merge — and kept on .root itself (not a pseudo-element child)
 * so it isn't clipped by `overflow: hidden` below, which only clips
 * descendants, not the element's own box-shadow/outline.
 *
 * Each variable's default matches the shadow-layer count/order of its "on"
 * state, with spread/blur zeroed out instead of collapsed to one shadow —
 * box-shadow transitions can't interpolate between mismatched layer counts.
 *
 * A consumer's `style.boxShadow` (see `ROOT_STYLE_KEYS` in Card.tsx) replaces
 * both layers outright and freezes the hover/active elevation swap below —
 * standard CSS, not a bug.
 */
.hEu6ums6fVtxXgk0ffcs {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--neutral-background-primary);
  border: 1px solid var(--neutral-border-default);
  overflow: hidden;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  border-radius: var(--pigment-card-radius);
  --pigment-card-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 0px rgba(0, 0, 0, 0);
  /* TODO(ADR-25): raw primitive, not brand-swappable. Move to a semantic token once one exists. */
  --pigment-card-selected-ring-shadow: inset 0 0 0 0 var(--primitives-color-charcoal-900),
    0 0 0 0 var(--primitives-color-charcoal-900);
  box-shadow: var(--pigment-card-selected-ring-shadow), var(--pigment-card-elevation-shadow);
  transition: border-radius 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  /* `--pigment-card-content-padding-x/y` (the public name — see the "Advanced" docs section) is
     derived from the size-tier's raw `-base` value here, once, rather than being the thing the
     size-tier/@container rules set directly. That split exists so the no-media floor below can
     override the public name safely: redeclaring `--pigment-card-content-padding-x` in terms of
     itself on this same element (`.root`, where the tier rules above already set it) would be a
     CSS custom-property reference cycle (invalid, falls back to nothing) — deriving it from a
     *different*-named variable isn't. Any consumer element anywhere inside Card — not just inside
     CardContent — that reads the public name for its own layout sees the true effective value. */
  --pigment-card-content-padding-x: var(--pigment-card-content-padding-x-base);
  --pigment-card-content-padding-y: var(--pigment-card-content-padding-y-base);
}

/* Without visible CardMedia, CardContent touches (at least some of) `.root`'s rounded corners
   directly, so its padding is floored at the radius here — applied to every CardContent block
   uniformly (not just one actually adjacent to a corner), since consistent padding across sibling
   content blocks matters more than corner-precision. With CardMedia present, the plain per-tier
   value already reads fine, since CardMedia's own inset handles the corners it's adjacent to.

   "Visible" is per breakpoint: CardMedia's `hidden` prop adds `media-hidden-at-{bp}` for each
   breakpoint where it's hidden (via `getRangeScopedClassNames` in Card.tsx), and each block
   below applies only within its own breakpoint's range, so it hides that media and counts it as
   absent there. A Card with no CardMedia at all matches every block. */
@media (max-width: 699.95px) {
  .iDyPepfUhCk3x6EhkG1Q {
    display: none;
  }

  .hEu6ums6fVtxXgk0ffcs:not(:has(> .rMFpgZcNejKLIk6PNNo8:not(.iDyPepfUhCk3x6EhkG1Q))) {
    --pigment-card-content-padding-x: max(var(--pigment-card-radius), var(--pigment-card-content-padding-x-base));
    --pigment-card-content-padding-y: max(var(--pigment-card-radius), var(--pigment-card-content-padding-y-base));
  }
}

@media (min-width: 700px) and (max-width: 1023.95px) {
  .lFZBkCBF0M8GDCPn9T4J {
    display: none;
  }

  .hEu6ums6fVtxXgk0ffcs:not(:has(> .rMFpgZcNejKLIk6PNNo8:not(.lFZBkCBF0M8GDCPn9T4J))) {
    --pigment-card-content-padding-x: max(var(--pigment-card-radius), var(--pigment-card-content-padding-x-base));
    --pigment-card-content-padding-y: max(var(--pigment-card-radius), var(--pigment-card-content-padding-y-base));
  }
}

@media (min-width: 1024px) and (max-width: 1299.95px) {
  .K0lGYH7NTqih0UYhonXz {
    display: none;
  }

  .hEu6ums6fVtxXgk0ffcs:not(:has(> .rMFpgZcNejKLIk6PNNo8:not(.K0lGYH7NTqih0UYhonXz))) {
    --pigment-card-content-padding-x: max(var(--pigment-card-radius), var(--pigment-card-content-padding-x-base));
    --pigment-card-content-padding-y: max(var(--pigment-card-radius), var(--pigment-card-content-padding-y-base));
  }
}

@media (min-width: 1300px) {
  .xjCw0ZosapM9tc2uHw8r {
    display: none;
  }

  .hEu6ums6fVtxXgk0ffcs:not(:has(> .rMFpgZcNejKLIk6PNNo8:not(.xjCw0ZosapM9tc2uHw8r))) {
    --pigment-card-content-padding-x: max(var(--pigment-card-radius), var(--pigment-card-content-padding-x-base));
    --pigment-card-content-padding-y: max(var(--pigment-card-radius), var(--pigment-card-content-padding-y-base));
  }
}

/*
 * Horizontal cards need more total width for the same visual "size" (media
 * sits beside content, not above it), so each breakpoint sits higher for
 * horizontal than for vertical: +140px at sm, +130px at md, +100px at lg.
 * The two sets are selected by container *name* (`pigment-card-vertical` vs
 * `pigment-card-horizontal`), not by a class on `.root`, so they are written
 * once here and serve every breakpoint — see the Orientation section.
 */
/* Keep in sync with --pigment-card-breakpoint-vertical-sm */
@container pigment-card-vertical (min-width: 180px) {
  .hEu6ums6fVtxXgk0ffcs {
    --pigment-card-radius: var(--pigment-card-radius-sm);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-sm);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-sm);
    --pigment-card-content-gap: var(--pigment-card-content-gap-sm);
    --pigment-card-media-inset: var(--pigment-card-media-inset-sm);
  }
}

/* Keep in sync with --pigment-card-breakpoint-vertical-md */
@container pigment-card-vertical (min-width: 250px) {
  .hEu6ums6fVtxXgk0ffcs {
    --pigment-card-radius: var(--pigment-card-radius-md);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-md);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-md);
    --pigment-card-content-gap: var(--pigment-card-content-gap-md);
    --pigment-card-media-inset: var(--pigment-card-media-inset-md);
  }
}

/* Keep in sync with --pigment-card-breakpoint-vertical-lg */
@container pigment-card-vertical (min-width: 400px) {
  .hEu6ums6fVtxXgk0ffcs {
    --pigment-card-radius: var(--pigment-card-radius-lg);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-lg);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-lg);
    --pigment-card-content-gap: var(--pigment-card-content-gap-lg);
    --pigment-card-media-inset: var(--pigment-card-media-inset-lg);
  }
}

/* Keep in sync with --pigment-card-breakpoint-horizontal-sm */
@container pigment-card-horizontal (min-width: 320px) {
  .hEu6ums6fVtxXgk0ffcs {
    --pigment-card-radius: var(--pigment-card-radius-sm);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-sm);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-sm);
    --pigment-card-content-gap: var(--pigment-card-content-gap-sm);
    --pigment-card-media-inset: var(--pigment-card-media-inset-sm);
  }
}

/* Keep in sync with --pigment-card-breakpoint-horizontal-md */
@container pigment-card-horizontal (min-width: 380px) {
  .hEu6ums6fVtxXgk0ffcs {
    --pigment-card-radius: var(--pigment-card-radius-md);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-md);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-md);
    --pigment-card-content-gap: var(--pigment-card-content-gap-md);
    --pigment-card-media-inset: var(--pigment-card-media-inset-md);
  }
}

/* Keep in sync with --pigment-card-breakpoint-horizontal-lg */
@container pigment-card-horizontal (min-width: 500px) {
  .hEu6ums6fVtxXgk0ffcs {
    --pigment-card-radius: var(--pigment-card-radius-lg);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-lg);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-lg);
    --pigment-card-content-gap: var(--pigment-card-content-gap-lg);
    --pigment-card-media-inset: var(--pigment-card-media-inset-lg);
  }
}

/*
 * The `size` prop, fixing a tier instead of auto-detecting it. Card emits a `size-{tier}-at-{bp}`
 * class for each breakpoint with a fixed tier (via `getRangeScopedClassNames` in Card.tsx), and each block
 * below applies only within its own breakpoint's range, so a breakpoint set to `'auto'` gets no
 * class there and falls back to the @container rules above. The doubled selector outranks those
 * rules (`.root`, one class) regardless of source order.
 */
@media (max-width: 699.95px) {
  ._IFeKujy86qtqep186nk._IFeKujy86qtqep186nk {
    --pigment-card-radius: var(--pigment-card-radius-xs);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-xs);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-xs);
    --pigment-card-content-gap: var(--pigment-card-content-gap-xs);
    --pigment-card-media-inset: var(--pigment-card-media-inset-xs);
  }

  .wcRYtud63M0THCBtTrck.wcRYtud63M0THCBtTrck {
    --pigment-card-radius: var(--pigment-card-radius-sm);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-sm);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-sm);
    --pigment-card-content-gap: var(--pigment-card-content-gap-sm);
    --pigment-card-media-inset: var(--pigment-card-media-inset-sm);
  }

  .TPYocS4VFLUl8f2nnpXj.TPYocS4VFLUl8f2nnpXj {
    --pigment-card-radius: var(--pigment-card-radius-md);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-md);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-md);
    --pigment-card-content-gap: var(--pigment-card-content-gap-md);
    --pigment-card-media-inset: var(--pigment-card-media-inset-md);
  }

  .hOTpnUwP6Q7yo4gvXuIm.hOTpnUwP6Q7yo4gvXuIm {
    --pigment-card-radius: var(--pigment-card-radius-lg);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-lg);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-lg);
    --pigment-card-content-gap: var(--pigment-card-content-gap-lg);
    --pigment-card-media-inset: var(--pigment-card-media-inset-lg);
  }
}

@media (min-width: 700px) and (max-width: 1023.95px) {
  .xoEkETTG6WCCN4EoXag6.xoEkETTG6WCCN4EoXag6 {
    --pigment-card-radius: var(--pigment-card-radius-xs);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-xs);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-xs);
    --pigment-card-content-gap: var(--pigment-card-content-gap-xs);
    --pigment-card-media-inset: var(--pigment-card-media-inset-xs);
  }

  .TKXYwdCnH5tgqOSWw2hK.TKXYwdCnH5tgqOSWw2hK {
    --pigment-card-radius: var(--pigment-card-radius-sm);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-sm);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-sm);
    --pigment-card-content-gap: var(--pigment-card-content-gap-sm);
    --pigment-card-media-inset: var(--pigment-card-media-inset-sm);
  }

  .E1_pnUaW4ZCGlafF0pQk.E1_pnUaW4ZCGlafF0pQk {
    --pigment-card-radius: var(--pigment-card-radius-md);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-md);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-md);
    --pigment-card-content-gap: var(--pigment-card-content-gap-md);
    --pigment-card-media-inset: var(--pigment-card-media-inset-md);
  }

  .CSLZruNOrFU0RFpy1zGA.CSLZruNOrFU0RFpy1zGA {
    --pigment-card-radius: var(--pigment-card-radius-lg);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-lg);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-lg);
    --pigment-card-content-gap: var(--pigment-card-content-gap-lg);
    --pigment-card-media-inset: var(--pigment-card-media-inset-lg);
  }
}

@media (min-width: 1024px) and (max-width: 1299.95px) {
  .RBwumXk56Uvo3Z3zRMp3.RBwumXk56Uvo3Z3zRMp3 {
    --pigment-card-radius: var(--pigment-card-radius-xs);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-xs);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-xs);
    --pigment-card-content-gap: var(--pigment-card-content-gap-xs);
    --pigment-card-media-inset: var(--pigment-card-media-inset-xs);
  }

  ._Hy_AbfaEnWWBO8AsoQv._Hy_AbfaEnWWBO8AsoQv {
    --pigment-card-radius: var(--pigment-card-radius-sm);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-sm);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-sm);
    --pigment-card-content-gap: var(--pigment-card-content-gap-sm);
    --pigment-card-media-inset: var(--pigment-card-media-inset-sm);
  }

  .CFqHM1oKABIiiAntMtIg.CFqHM1oKABIiiAntMtIg {
    --pigment-card-radius: var(--pigment-card-radius-md);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-md);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-md);
    --pigment-card-content-gap: var(--pigment-card-content-gap-md);
    --pigment-card-media-inset: var(--pigment-card-media-inset-md);
  }

  .zSVB5e3yGjnjVKsswdtI.zSVB5e3yGjnjVKsswdtI {
    --pigment-card-radius: var(--pigment-card-radius-lg);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-lg);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-lg);
    --pigment-card-content-gap: var(--pigment-card-content-gap-lg);
    --pigment-card-media-inset: var(--pigment-card-media-inset-lg);
  }
}

@media (min-width: 1300px) {
  .GZvq2YNwXVCCwWbtEeLm.GZvq2YNwXVCCwWbtEeLm {
    --pigment-card-radius: var(--pigment-card-radius-xs);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-xs);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-xs);
    --pigment-card-content-gap: var(--pigment-card-content-gap-xs);
    --pigment-card-media-inset: var(--pigment-card-media-inset-xs);
  }

  .JupJaYyVv1KMENLu6e0V.JupJaYyVv1KMENLu6e0V {
    --pigment-card-radius: var(--pigment-card-radius-sm);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-sm);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-sm);
    --pigment-card-content-gap: var(--pigment-card-content-gap-sm);
    --pigment-card-media-inset: var(--pigment-card-media-inset-sm);
  }

  .eUZ7mGdqCihTRlYjMpP2.eUZ7mGdqCihTRlYjMpP2 {
    --pigment-card-radius: var(--pigment-card-radius-md);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-md);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-md);
    --pigment-card-content-gap: var(--pigment-card-content-gap-md);
    --pigment-card-media-inset: var(--pigment-card-media-inset-md);
  }

  .VG3wMQG1xwwXnWaxavag.VG3wMQG1xwwXnWaxavag {
    --pigment-card-radius: var(--pigment-card-radius-lg);
    --pigment-card-content-padding-x-base: var(--pigment-card-content-padding-x-lg);
    --pigment-card-content-padding-y-base: var(--pigment-card-content-padding-y-lg);
    --pigment-card-content-gap: var(--pigment-card-content-gap-lg);
    --pigment-card-media-inset: var(--pigment-card-media-inset-lg);
  }
}

/* ─── Orientation ────────────────────────────────────────────────────────── */

/*
 * Orientation lives in `sizeContainer`'s `container-name`, not in a class on
 * `.root`, so each rule below is written once and serves every breakpoint: the
 * `orientation-*-at-*` rules at the end of this section only swap the name, and
 * everything orientation-dependent — these rules and the size tiers above —
 * reads it back through a container query. Keying off a class instead would mean
 * duplicating all of it once per breakpoint.
 *
 * `min-width: 0px` is deliberately always true. These blocks are scoped by
 * container *name* alone, and a container query needs some condition to parse.
 *
 * The rules below are bare classes, not `.root > ...`, deliberately: a consumer
 * wrapping CardContent in a `display: contents` element (a `<form>` around
 * content plus actions) leaves it a real flex item of `.root` that still needs
 * these rules, but a child combinator stops matching it — selectors read the DOM
 * tree, flex layout reads the layout tree.
 */
@container pigment-card-vertical (min-width: 0px) {
  .hEu6ums6fVtxXgk0ffcs {
    flex-direction: column;
  }

  /* No inset on the edge where media meets content — that seam is handled by
     CardContent's own padding instead. */
  .rMFpgZcNejKLIk6PNNo8 {
    margin: var(--pigment-card-media-inset) var(--pigment-card-media-inset) 0 var(--pigment-card-media-inset);
  }

  /* Drop padding on the edge facing the next CardContent block, so adjacent
     blocks' padding doesn't stack and double the gap between them. */
  .j39l0C7HTyz_A5q0LKin:has(+ .j39l0C7HTyz_A5q0LKin) {
    padding-bottom: 0;
  }

  /* Together, these two rules pin CardActions (and anything after it) to the bottom edge when
     `.root` has extra height beyond its content — e.g. an equal-height grid via `height: 100%`
     above. `flex-grow` lets CardContent itself fill that extra space. Scoped to vertical
     orientation only, and only the last CardContent block. */
  .j39l0C7HTyz_A5q0LKin:last-child {
    flex-grow: 1;
  }

  .G9lFVkjOLK6hPldcFnt0 {
    margin-top: auto;
  }
}

@container pigment-card-horizontal (min-width: 0px) {
  .hEu6ums6fVtxXgk0ffcs {
    flex-direction: row;
  }

  .rMFpgZcNejKLIk6PNNo8 {
    flex: 0 0 auto;
    /* Defaults to 1/3 of card width, accounting for the padding */
    width: calc((100% - var(--pigment-card-media-inset) - 2 * var(--pigment-card-content-padding-x)) / 3);
    /* Same variable/fallback as the base `.media` rule below (not a plain `height: auto`) — both
       declarations have equal specificity, so without this they'd compete on source order alone,
       and whichever "won" would silently drop a `height` prop's effect in this orientation. */
    height: var(--pigment-card-media-height, auto);
    align-self: stretch;
    margin: var(--pigment-card-media-inset) 0 var(--pigment-card-media-inset) var(--pigment-card-media-inset);
  }

  .j39l0C7HTyz_A5q0LKin {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .j39l0C7HTyz_A5q0LKin:has(+ .j39l0C7HTyz_A5q0LKin) {
    padding-right: 0;
  }
}

/*
 * Responsive orientation, mobile-first: `sm` is the baseline (no media query)
 * and each larger breakpoint overrides it by source order. These land on
 * `sizeContainer`, not `.root`, because `container-name` is what they set.
 *
 * Class names match the `{prefix}-{value}-at-{breakpoint}` contract that
 * `getResponsiveClassNames` builds — see `src/adapters/responsivity`. Renaming
 * one here without renaming it there silently drops the variant (the adapter
 * dev-warns on the missing class); `cssModuleBreakpoints.test.ts` enforces that
 * every breakpoint variant exists.
 */
.zanU69pC4IaRIcA_J8St {
  container-name: pigment-card pigment-card-vertical;
}

.XWSTMiVlRxjCOREMEfv4 {
  container-name: pigment-card pigment-card-horizontal;
}

@media (min-width: 700px) {
  .OuXKbK1GKHMlwzTY_82O {
    container-name: pigment-card pigment-card-vertical;
  }

  .StyC0j0nmxS3vmgoU0LM {
    container-name: pigment-card pigment-card-horizontal;
  }
}

@media (min-width: 1024px) {
  .pLWqdSPJpm9AIUJqRY28 {
    container-name: pigment-card pigment-card-vertical;
  }

  .F7YA5szQN9cR9VLfIpcQ {
    container-name: pigment-card pigment-card-horizontal;
  }
}

@media (min-width: 1300px) {
  .PQPQBtP7dQfWy09JtTA3 {
    container-name: pigment-card pigment-card-vertical;
  }

  .BlL63g2fMRxBGS5cNo34 {
    container-name: pigment-card pigment-card-horizontal;
  }
}

/* ─── Clickable ──────────────────────────────────────────────────────────── */

/*
 * A clickable Card's link/button is `.surface`: stretched over the whole Card and painted *behind*
 * its content (`z-index: -1` inside the stacking context `isolation` makes here, so it stays above
 * `.root`'s own background). The content then passes pointer events through to it, except for the
 * controls in the allowlist below, which catch their own. Hover, pressed and focus are read off the
 * surface with `:has()`, so pointing at or pressing a nested control never lights up the Card.
 */
.tRdWzUZs1SOUV7wMfPtZ {
  isolation: isolate;
}

.f24vyxwLosHNX1IvfEk2 {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* The ring is drawn on `.root` below, where `overflow: hidden` can't clip it. Gated on `:has()`
   support, since that's what draws it, so no browser is left without a focus indicator. */
@supports selector(:has(*)) {
  .f24vyxwLosHNX1IvfEk2:focus-visible {
    outline: none;
  }
}

/* Zero specificity throughout, so any `pointer-events` a consumer sets on their own content wins. */
:where(.tRdWzUZs1SOUV7wMfPtZ) > :where(:not(.f24vyxwLosHNX1IvfEk2)) {
  pointer-events: none;
}

/*
 * Leaf controls only: a composite container (listbox, toolbar, group) stays pass-through, so the
 * gaps between its options still activate the Card. `tabindex="-1"` doesn't count: it marks a
 * programmatic focus target (a heading, a roving group's wrapper), not a control, and roving
 * options are caught by their role instead. Scoped to `:not(.disabled)` so a disabled Card's
 * `pointer-events: none` still reaches nested controls through inheritance. `data-card-interactive`
 * opts anything else in, e.g. a custom control, a scroll area, or text that should stay selectable.
 * Being zero-specificity, any `pointer-events: none` a control sets on itself wins; in development,
 * Card warns when that happens to an enabled control (`NESTED_CONTROL_SELECTOR` in Card.tsx). A
 * `pointer-events: none` set on a wrapper does NOT reach the controls inside it, since each control
 * gets `auto` directly; only a disabled Card nested in this one is exempted, via `:not()`.
 */
:where(.tRdWzUZs1SOUV7wMfPtZ:not(.R0ICWrfljYwnoXTPqcRp))
  :where(
    a[href],
    button,
    input,
    select,
    textarea,
    label,
    summary,
    iframe,
    video[controls],
    audio[controls],
    [contenteditable]:not([contenteditable='false']),
    [tabindex]:not([tabindex='-1']),
    [role='button'],
    [role='link'],
    [role='checkbox'],
    [role='radio'],
    [role='switch'],
    [role='tab'],
    [role='menuitem'],
    [role='menuitemcheckbox'],
    [role='menuitemradio'],
    [role='option'],
    [role='slider'],
    [role='spinbutton'],
    [role='combobox'],
    [role='textbox'],
    [role='searchbox'],
    [role='treeitem'],
    [data-card-interactive]
  ):not(:where(.R0ICWrfljYwnoXTPqcRp *)) {
  pointer-events: auto;
}

/*
 * A disabled control is a dead spot, never a way through to the Card: clicking a disabled "Customize"
 * button must not open the product. Some controls turn off their own pointer events when disabled
 * (Link's button style, and the `<label>` that wraps Checkbox, Radio, and Toggle), which would hand
 * the click to the surface, so this rule outranks them on purpose. `<a href>` is left out: the
 * allowlist above already gives it pointer events, and whether a disabled link navigates is up to
 * the link itself. A disabled `<fieldset>` matches `:disabled` too, so the whole fieldset becomes a
 * dead spot. Nothing inside a disabled Card nested in this one is re-enabled, here or above: it
 * keeps inheriting that Card's `pointer-events: none`.
 */
.tRdWzUZs1SOUV7wMfPtZ:not(.R0ICWrfljYwnoXTPqcRp)
  :is(:disabled, [aria-disabled='true']:not(a[href]), label:has(:disabled, [aria-disabled='true'])):not(.R0ICWrfljYwnoXTPqcRp *) {
  pointer-events: auto;
}

.tRdWzUZs1SOUV7wMfPtZ:not(.R0ICWrfljYwnoXTPqcRp):has(> .f24vyxwLosHNX1IvfEk2:hover) {
  --pigment-card-elevation-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.08);
}

.tRdWzUZs1SOUV7wMfPtZ:not(.R0ICWrfljYwnoXTPqcRp):has(> .f24vyxwLosHNX1IvfEk2:active) {
  /* Second layer zeroed (not omitted) to match .root's shadow-layer count. */
  --pigment-card-elevation-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

/* TODO(ADR-25): raw primitive, not brand-swappable. Move to a semantic token once one exists. */
.tRdWzUZs1SOUV7wMfPtZ:not(.R0ICWrfljYwnoXTPqcRp):has(> .f24vyxwLosHNX1IvfEk2:focus-visible) {
  outline: 4px solid var(--primitives-color-inkyRed-500);
  outline-offset: 2px;
}

/* Selected cards already show a ring via box-shadow, so the focus outline
   sits 3px out instead of 2px to keep clear of it. */
.tRdWzUZs1SOUV7wMfPtZ:not(.R0ICWrfljYwnoXTPqcRp).KeuueQGURM1fkrZt116A:has(> .f24vyxwLosHNX1IvfEk2:focus-visible) {
  outline-offset: 3px;
}

/* pointer-events: none also blocks nested interactive children (e.g.
   CardActions buttons), which Card can't reach into to disable individually.
   Doesn't cover keyboard access — pass `disabled` to those children too. */
.R0ICWrfljYwnoXTPqcRp {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* ─── Selected ───────────────────────────────────────────────────────────── */

.KeuueQGURM1fkrZt116A {
  /* 4px ring: 2px inset shadow + .root's 1px border (recolored to match,
     so it doesn't show as a seam) + 1px outset shadow. */
  border-color: var(--primitives-color-charcoal-900);
  --pigment-card-selected-ring-shadow: inset 0 0 0 2px var(--primitives-color-charcoal-900),
    0 0 0 1px var(--primitives-color-charcoal-900);
}

/* ─── CardMedia ──────────────────────────────────────────────────────────── */

.rMFpgZcNejKLIk6PNNo8 {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: max(6px, calc(var(--pigment-card-radius) - var(--pigment-card-media-inset)));
  /* Backs any gap that a fully-opaque, box-filling `object-fit: cover` photo never exposes — a
     transparent PNG, or `object-fit: contain` (any aspect ratio not matching the box) letterboxes
     against this instead of showing whatever's behind (`.root`'s own background, or nothing at
     all for a custom child). Border-radius already clips a box's own background regardless of
     `overflow`, so this respects the rounded corners with no extra rule needed. */
  background-color: var(--neutral-background-subtle);
  transition: margin 200ms ease, border-radius 200ms ease;
  /* Routed through custom properties (set inline by CardMedia.tsx, both undefined by default)
     rather than writing `aspect-ratio`/`height` directly into `style`, so the actual property
     assignment lives here at ordinary stylesheet specificity instead of as an unbeatable inline
     literal. A consumer who needs a value to vary by breakpoint can add their own class via
     CardMedia's `className` and set `aspect-ratio`/`height` directly in their own stylesheet,
     rather than fighting `!important` against an inline declaration. `height` naturally wins over
     `aspect-ratio` whenever both are definite, per ordinary CSS sizing rules — no JS branching
     needed to enforce that. */
  aspect-ratio: var(--pigment-card-media-aspect-ratio, 1 / 1);
  height: var(--pigment-card-media-height, auto);
}

.mGEOhRUtBcxVqEn9_Klv {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ─── CardContent ────────────────────────────────────────────────────────── */

.j39l0C7HTyz_A5q0LKin {
  display: flex;
  flex-direction: column;
  gap: var(--pigment-card-content-gap);
  padding: var(--pigment-card-content-padding-y) var(--pigment-card-content-padding-x);
  min-width: 0;
  transition: padding 200ms ease, gap 200ms ease;
}

/* ─── CardActions ────────────────────────────────────────────────────────── */

.G9lFVkjOLK6hPldcFnt0 {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}

.G9lFVkjOLK6hPldcFnt0.PDPp4YsmfSPofbjRmYs4 {
  flex-direction: row;
  flex-wrap: wrap;
}

.G9lFVkjOLK6hPldcFnt0.bBWdsuoiJL_1R9SKj_H4 {
  flex-direction: column;
}

/* Children are reordered in the DOM (see CardActions in Card.tsx), not via row-reverse here, so
   Tab order matches the rendered layout when both actions fit on one row. `wrap-reverse` (not
   `wrap`) compensates for that same DOM reversal when they don't fit: it puts the *last* DOM
   child (the primary action) on the first/top line, restoring "primary on top" once stacked.
   That's visually correct in both states; the one accepted trade-off is Tab order in the stacked
   state specifically, which still follows DOM order (secondary, then primary) — bottom-to-top —
   since no CSS property can make focus order track a wrap-driven visual position. */
.G9lFVkjOLK6hPldcFnt0._dv8CU_gYYttO8ptkdan {
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

.G9lFVkjOLK6hPldcFnt0._dv8CU_gYYttO8ptkdan > * {
  flex: 1 1 0%;
  min-width: max-content;
}

.v8Dh63xeYT6FQ62YJSLQ {
  height: 100%;
}

@media (max-width: 699px) {
  .krQjqHRIdJIlH9A0ni5q {
    aspect-ratio: 1.1;
  }
}

/* Fits the image to the media box's height and centers it, so the top and bottom (a model's head and
   feet) never crop: a wider-than-box image loses its sides to CardMedia's overflow, a narrower one
   shows the gray backing beside it. object-fit can't pick per aspect ratio, so the box does. */
.KMcO_8TEjaFpWyE01R9G {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: auto;
  /* Beats app-wide `img { max-width: 100% }` resets, which would squeeze a wide image back inside */
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  /* Blends the white Imgix background into CardMedia's gray backing */
  mix-blend-mode: darken;
}

/* Card docs' corner-overlay recipe: tracks Card's media inset at every size tier.
   Two classes to beat Badge's `.root { position: relative }` regardless of CSS load order. */
.krQjqHRIdJIlH9A0ni5q .fC70Ivod9EBs2BidGPaW {
  position: absolute;
  top: calc(var(--pigment-card-media-inset) * 0.75);
  left: calc(var(--pigment-card-media-inset) * 0.75);
}

/* Name */
.n_WZd8YNR8_rnz22WLHS {
  color: var(--neutral-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 2.2rem;
}

/* Price */
.s0XGB4uQ8O_ATx10vyqL {
  line-height: 1.25;
}

.gDbBuYS0R3CPyF9WxkDz {
  color: var(--neutral-text-primary);
}

.BjiONyrWspbeUUSAbsbF {
  font-weight: 700;
}

.cWG0jdvXAGGQcVOYvg8P {
  color: var(--neutral-text-secondary);
  text-decoration: line-through;
  margin-right: 0.25rem;
}

.oLCjTfxaQsOWnkXDjnrD {
  font-weight: 700;
  color: var(--partnership-text-largeOrBold);
}

/* Min qty */
.US8tExfpJTGHKpk3vphK {
  color: var(--neutral-text-primary);
}

/* ColorSwatch component styles */

.YQKb4NoQ5LC3Y38kVrA9 {
  /* Width of the light-color outline ring (.outline::before). The subtlety ring's inset is derived
     from it, so the two can't drift apart. */
  --pigment-color-swatch-outline-width: var(--borderWidth-default);

  box-sizing: border-box;
  border-radius: var(--radius-swatch);
  cursor: pointer;
  display: inline-block;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: box-shadow 150ms ease;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  /* The swatch's color is its content, like an image. Forced colors (Windows High Contrast) would
     otherwise replace it with the system background and drop the box-shadow focus ring, leaving
     a blank swatch with an invisible checkmark. */
  forced-color-adjust: none;
}

/* Size variants */
.XWYebZaE4BZCZKzODGvP {
  width: 1.5rem;
  height: 1.5rem;
}

.xemaWJrwfxntOTS_7tvw {
  width: 2rem;
  height: 2rem;
}

.YQKb4NoQ5LC3Y38kVrA9::before {
  content: '';
  box-sizing: border-box;
  border-radius: var(--radius-swatch);
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Light color outline. Only applied to light swatches (see needsOutline() in colors.ts). */
.j0Jbte3jykwJfcxiGE5A::before {
  /* Opaque gray, not a translucent border token: mix-blend-mode: darken needs a solid
     comparison color so the border stays visible where the swatch is lighter than it,
     and disappears where the swatch is darker — a translucent color can't do that. */
  border: var(--pigment-color-swatch-outline-width) solid var(--primitives-color-neutral-gray200);
  mix-blend-mode: darken;
}

/* Hover state */
.YQKb4NoQ5LC3Y38kVrA9:hover {
  box-shadow: 0 0 0 2px var(--neutral-border-default);
}

/* Display-only mode */
.rpeHNKWWpQbYyOl05k1H {
  pointer-events: none;
}

/* Focused state */
.YQKb4NoQ5LC3Y38kVrA9:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--neutral-background-primary), 0 0 0 2px var(--interactive-border-bold) !important;
}

.rpeHNKWWpQbYyOl05k1H:focus-visible {
  box-shadow: none !important;
}

/* Check icon */
.QJOWgGaO3KDSYN4n8X9I {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.XWYebZaE4BZCZKzODGvP .QJOWgGaO3KDSYN4n8X9I {
  width: 1rem;
  height: 1rem;
}

.xemaWJrwfxntOTS_7tvw .QJOWgGaO3KDSYN4n8X9I {
  width: 1.25rem;
  height: 1.25rem;
}

/* No ink icon */
.TttPXW4pHEN5FJol_UVs {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.XWYebZaE4BZCZKzODGvP .TttPXW4pHEN5FJol_UVs {
  max-width: 1.5rem;
}

.xemaWJrwfxntOTS_7tvw .TttPXW4pHEN5FJol_UVs {
  max-width: 2rem;
}

/*
 * Subtlety indicator (dashed circular ring). Inset by the outline ring's width plus 1px of
 * separation, so the dashed ring clears the outline instead of touching it. Deliberately not a
 * spacing token: the value is tied to the outline, not to the spacing scale. Renders 2px on every
 * side, matching v0's SubtleSwatch (the provenance for this value).
 */
.P_p7MZfVDoPi_iu8S5dJ {
  box-sizing: border-box;
  position: absolute;
  border-radius: var(--radius-swatch);
  inset: calc(var(--pigment-color-swatch-outline-width) + 1px);
  overflow: hidden;
}

/* Present-in-design dot indicator */
.LvDX8mf12KYCJqMZzb1h {
  position: absolute;
  bottom: -1px;
  right: -1px;
  border-radius: 50%;
  background: #000;
  border: 1px solid #fff;
  box-sizing: content-box;
}

.LvDX8mf12KYCJqMZzb1h {
  width: 8px;
  height: 8px;
}

.IfyXIongHoLIYnqJFrZN {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.RdARsm1gsFcFzs78Ww2S {
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: -0.12px;
  color: var(--interactive-text-weak);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   SPACING PROPS - Padding
   ========================================================================== */

.QlLOWuhwbmpeDZSdz5RZ {
  padding-top: var(--pigment-layout-pt-at-sm);
}

@media (min-width: 700px) {
  .QlLOWuhwbmpeDZSdz5RZ {
    padding-top: var(--pigment-layout-pt-at-md, var(--pigment-layout-pt-at-sm));
  }
}

@media (min-width: 1024px) {
  .QlLOWuhwbmpeDZSdz5RZ {
    padding-top: var(--pigment-layout-pt-at-lg, var(--pigment-layout-pt-at-md, var(--pigment-layout-pt-at-sm)));
  }
}

@media (min-width: 1300px) {
  .QlLOWuhwbmpeDZSdz5RZ {
    padding-top: var(
      --pigment-layout-pt-at-xl,
      var(--pigment-layout-pt-at-lg, var(--pigment-layout-pt-at-md, var(--pigment-layout-pt-at-sm)))
    );
  }
}

.ouGJpb8i8nosR6oVBLoP {
  padding-right: var(--pigment-layout-pr-at-sm);
}

@media (min-width: 700px) {
  .ouGJpb8i8nosR6oVBLoP {
    padding-right: var(--pigment-layout-pr-at-md, var(--pigment-layout-pr-at-sm));
  }
}

@media (min-width: 1024px) {
  .ouGJpb8i8nosR6oVBLoP {
    padding-right: var(--pigment-layout-pr-at-lg, var(--pigment-layout-pr-at-md, var(--pigment-layout-pr-at-sm)));
  }
}

@media (min-width: 1300px) {
  .ouGJpb8i8nosR6oVBLoP {
    padding-right: var(
      --pigment-layout-pr-at-xl,
      var(--pigment-layout-pr-at-lg, var(--pigment-layout-pr-at-md, var(--pigment-layout-pr-at-sm)))
    );
  }
}

.gp7G0ys202JikuGFq_Cj {
  padding-bottom: var(--pigment-layout-pb-at-sm);
}

@media (min-width: 700px) {
  .gp7G0ys202JikuGFq_Cj {
    padding-bottom: var(--pigment-layout-pb-at-md, var(--pigment-layout-pb-at-sm));
  }
}

@media (min-width: 1024px) {
  .gp7G0ys202JikuGFq_Cj {
    padding-bottom: var(--pigment-layout-pb-at-lg, var(--pigment-layout-pb-at-md, var(--pigment-layout-pb-at-sm)));
  }
}

@media (min-width: 1300px) {
  .gp7G0ys202JikuGFq_Cj {
    padding-bottom: var(
      --pigment-layout-pb-at-xl,
      var(--pigment-layout-pb-at-lg, var(--pigment-layout-pb-at-md, var(--pigment-layout-pb-at-sm)))
    );
  }
}

.edDSY9I5uaBicBdYwB_Y {
  padding-left: var(--pigment-layout-pl-at-sm);
}

@media (min-width: 700px) {
  .edDSY9I5uaBicBdYwB_Y {
    padding-left: var(--pigment-layout-pl-at-md, var(--pigment-layout-pl-at-sm));
  }
}

@media (min-width: 1024px) {
  .edDSY9I5uaBicBdYwB_Y {
    padding-left: var(--pigment-layout-pl-at-lg, var(--pigment-layout-pl-at-md, var(--pigment-layout-pl-at-sm)));
  }
}

@media (min-width: 1300px) {
  .edDSY9I5uaBicBdYwB_Y {
    padding-left: var(
      --pigment-layout-pl-at-xl,
      var(--pigment-layout-pl-at-lg, var(--pigment-layout-pl-at-md, var(--pigment-layout-pl-at-sm)))
    );
  }
}

/* ==========================================================================
   SPACING PROPS - Margin
   ========================================================================== */

.gS8NrGIzFh1KJG5oT57p {
  margin-top: var(--pigment-layout-mt-at-sm);
}

@media (min-width: 700px) {
  .gS8NrGIzFh1KJG5oT57p {
    margin-top: var(--pigment-layout-mt-at-md, var(--pigment-layout-mt-at-sm));
  }
}

@media (min-width: 1024px) {
  .gS8NrGIzFh1KJG5oT57p {
    margin-top: var(--pigment-layout-mt-at-lg, var(--pigment-layout-mt-at-md, var(--pigment-layout-mt-at-sm)));
  }
}

@media (min-width: 1300px) {
  .gS8NrGIzFh1KJG5oT57p {
    margin-top: var(
      --pigment-layout-mt-at-xl,
      var(--pigment-layout-mt-at-lg, var(--pigment-layout-mt-at-md, var(--pigment-layout-mt-at-sm)))
    );
  }
}

.dRUfIzzWrnmtvNf9oG1r {
  margin-right: var(--pigment-layout-mr-at-sm);
}

@media (min-width: 700px) {
  .dRUfIzzWrnmtvNf9oG1r {
    margin-right: var(--pigment-layout-mr-at-md, var(--pigment-layout-mr-at-sm));
  }
}

@media (min-width: 1024px) {
  .dRUfIzzWrnmtvNf9oG1r {
    margin-right: var(--pigment-layout-mr-at-lg, var(--pigment-layout-mr-at-md, var(--pigment-layout-mr-at-sm)));
  }
}

@media (min-width: 1300px) {
  .dRUfIzzWrnmtvNf9oG1r {
    margin-right: var(
      --pigment-layout-mr-at-xl,
      var(--pigment-layout-mr-at-lg, var(--pigment-layout-mr-at-md, var(--pigment-layout-mr-at-sm)))
    );
  }
}

.cTVQeQ8lTxlVrL1XD1HA {
  margin-bottom: var(--pigment-layout-mb-at-sm);
}

@media (min-width: 700px) {
  .cTVQeQ8lTxlVrL1XD1HA {
    margin-bottom: var(--pigment-layout-mb-at-md, var(--pigment-layout-mb-at-sm));
  }
}

@media (min-width: 1024px) {
  .cTVQeQ8lTxlVrL1XD1HA {
    margin-bottom: var(--pigment-layout-mb-at-lg, var(--pigment-layout-mb-at-md, var(--pigment-layout-mb-at-sm)));
  }
}

@media (min-width: 1300px) {
  .cTVQeQ8lTxlVrL1XD1HA {
    margin-bottom: var(
      --pigment-layout-mb-at-xl,
      var(--pigment-layout-mb-at-lg, var(--pigment-layout-mb-at-md, var(--pigment-layout-mb-at-sm)))
    );
  }
}

.wGKG1c7GSK6aPdUqSimv {
  margin-left: var(--pigment-layout-ml-at-sm);
}

@media (min-width: 700px) {
  .wGKG1c7GSK6aPdUqSimv {
    margin-left: var(--pigment-layout-ml-at-md, var(--pigment-layout-ml-at-sm));
  }
}

@media (min-width: 1024px) {
  .wGKG1c7GSK6aPdUqSimv {
    margin-left: var(--pigment-layout-ml-at-lg, var(--pigment-layout-ml-at-md, var(--pigment-layout-ml-at-sm)));
  }
}

@media (min-width: 1300px) {
  .wGKG1c7GSK6aPdUqSimv {
    margin-left: var(
      --pigment-layout-ml-at-xl,
      var(--pigment-layout-ml-at-lg, var(--pigment-layout-ml-at-md, var(--pigment-layout-ml-at-sm)))
    );
  }
}

/* ==========================================================================
   SIZING PROPS
   ========================================================================== */

.fA_iU34MtkN0J_UAQjtN {
  width: var(--pigment-layout-width-at-sm);
}

@media (min-width: 700px) {
  .fA_iU34MtkN0J_UAQjtN {
    width: var(--pigment-layout-width-at-md, var(--pigment-layout-width-at-sm));
  }
}

@media (min-width: 1024px) {
  .fA_iU34MtkN0J_UAQjtN {
    width: var(--pigment-layout-width-at-lg, var(--pigment-layout-width-at-md, var(--pigment-layout-width-at-sm)));
  }
}

@media (min-width: 1300px) {
  .fA_iU34MtkN0J_UAQjtN {
    width: var(
      --pigment-layout-width-at-xl,
      var(--pigment-layout-width-at-lg, var(--pigment-layout-width-at-md, var(--pigment-layout-width-at-sm)))
    );
  }
}

.ytKW9F9INKBtT6XxWHX4 {
  height: var(--pigment-layout-height-at-sm);
}

@media (min-width: 700px) {
  .ytKW9F9INKBtT6XxWHX4 {
    height: var(--pigment-layout-height-at-md, var(--pigment-layout-height-at-sm));
  }
}

@media (min-width: 1024px) {
  .ytKW9F9INKBtT6XxWHX4 {
    height: var(--pigment-layout-height-at-lg, var(--pigment-layout-height-at-md, var(--pigment-layout-height-at-sm)));
  }
}

@media (min-width: 1300px) {
  .ytKW9F9INKBtT6XxWHX4 {
    height: var(
      --pigment-layout-height-at-xl,
      var(--pigment-layout-height-at-lg, var(--pigment-layout-height-at-md, var(--pigment-layout-height-at-sm)))
    );
  }
}

.FGxjMkxKX7GB86X90eFp {
  min-width: var(--pigment-layout-minWidth-at-sm);
}

@media (min-width: 700px) {
  .FGxjMkxKX7GB86X90eFp {
    min-width: var(--pigment-layout-minWidth-at-md, var(--pigment-layout-minWidth-at-sm));
  }
}

@media (min-width: 1024px) {
  .FGxjMkxKX7GB86X90eFp {
    min-width: var(
      --pigment-layout-minWidth-at-lg,
      var(--pigment-layout-minWidth-at-md, var(--pigment-layout-minWidth-at-sm))
    );
  }
}

@media (min-width: 1300px) {
  .FGxjMkxKX7GB86X90eFp {
    min-width: var(
      --pigment-layout-minWidth-at-xl,
      var(--pigment-layout-minWidth-at-lg, var(--pigment-layout-minWidth-at-md, var(--pigment-layout-minWidth-at-sm)))
    );
  }
}

.L8vaQ7rws7l5HJJ8xB3Q {
  max-width: var(--pigment-layout-maxWidth-at-sm);
}

@media (min-width: 700px) {
  .L8vaQ7rws7l5HJJ8xB3Q {
    max-width: var(--pigment-layout-maxWidth-at-md, var(--pigment-layout-maxWidth-at-sm));
  }
}

@media (min-width: 1024px) {
  .L8vaQ7rws7l5HJJ8xB3Q {
    max-width: var(
      --pigment-layout-maxWidth-at-lg,
      var(--pigment-layout-maxWidth-at-md, var(--pigment-layout-maxWidth-at-sm))
    );
  }
}

@media (min-width: 1300px) {
  .L8vaQ7rws7l5HJJ8xB3Q {
    max-width: var(
      --pigment-layout-maxWidth-at-xl,
      var(--pigment-layout-maxWidth-at-lg, var(--pigment-layout-maxWidth-at-md, var(--pigment-layout-maxWidth-at-sm)))
    );
  }
}

.poz0WeOmbus1bTmv9RWH {
  min-height: var(--pigment-layout-minHeight-at-sm);
}

@media (min-width: 700px) {
  .poz0WeOmbus1bTmv9RWH {
    min-height: var(--pigment-layout-minHeight-at-md, var(--pigment-layout-minHeight-at-sm));
  }
}

@media (min-width: 1024px) {
  .poz0WeOmbus1bTmv9RWH {
    min-height: var(
      --pigment-layout-minHeight-at-lg,
      var(--pigment-layout-minHeight-at-md, var(--pigment-layout-minHeight-at-sm))
    );
  }
}

@media (min-width: 1300px) {
  .poz0WeOmbus1bTmv9RWH {
    min-height: var(
      --pigment-layout-minHeight-at-xl,
      var(--pigment-layout-minHeight-at-lg, var(--pigment-layout-minHeight-at-md, var(--pigment-layout-minHeight-at-sm)))
    );
  }
}

.onEmTRXviyfzYHZEw790 {
  max-height: var(--pigment-layout-maxHeight-at-sm);
}

@media (min-width: 700px) {
  .onEmTRXviyfzYHZEw790 {
    max-height: var(--pigment-layout-maxHeight-at-md, var(--pigment-layout-maxHeight-at-sm));
  }
}

@media (min-width: 1024px) {
  .onEmTRXviyfzYHZEw790 {
    max-height: var(
      --pigment-layout-maxHeight-at-lg,
      var(--pigment-layout-maxHeight-at-md, var(--pigment-layout-maxHeight-at-sm))
    );
  }
}

@media (min-width: 1300px) {
  .onEmTRXviyfzYHZEw790 {
    max-height: var(
      --pigment-layout-maxHeight-at-xl,
      var(--pigment-layout-maxHeight-at-lg, var(--pigment-layout-maxHeight-at-md, var(--pigment-layout-maxHeight-at-sm)))
    );
  }
}

/* ==========================================================================
   DISPLAY PROPS
   ========================================================================== */

.MqCTLKx7K3Pe4Z_u7pxY {
  display: var(--pigment-layout-display-at-sm);
}

@media (min-width: 700px) {
  .MqCTLKx7K3Pe4Z_u7pxY {
    display: var(--pigment-layout-display-at-md, var(--pigment-layout-display-at-sm));
  }
}

@media (min-width: 1024px) {
  .MqCTLKx7K3Pe4Z_u7pxY {
    display: var(--pigment-layout-display-at-lg, var(--pigment-layout-display-at-md, var(--pigment-layout-display-at-sm)));
  }
}

@media (min-width: 1300px) {
  .MqCTLKx7K3Pe4Z_u7pxY {
    display: var(
      --pigment-layout-display-at-xl,
      var(--pigment-layout-display-at-lg, var(--pigment-layout-display-at-md, var(--pigment-layout-display-at-sm)))
    );
  }
}

.zTD3YFqAWYlGzmvqvrgZ {
  overflow: var(--pigment-layout-overflow-at-sm);
}

@media (min-width: 700px) {
  .zTD3YFqAWYlGzmvqvrgZ {
    overflow: var(--pigment-layout-overflow-at-md, var(--pigment-layout-overflow-at-sm));
  }
}

@media (min-width: 1024px) {
  .zTD3YFqAWYlGzmvqvrgZ {
    overflow: var(
      --pigment-layout-overflow-at-lg,
      var(--pigment-layout-overflow-at-md, var(--pigment-layout-overflow-at-sm))
    );
  }
}

@media (min-width: 1300px) {
  .zTD3YFqAWYlGzmvqvrgZ {
    overflow: var(
      --pigment-layout-overflow-at-xl,
      var(--pigment-layout-overflow-at-lg, var(--pigment-layout-overflow-at-md, var(--pigment-layout-overflow-at-sm)))
    );
  }
}

/* max-width breakpoints mirror MUI's down() boundary: value - 0.05px */

.sqNVM2CdCa3qdHNWpI1T {
  display: flex;

  /* Default values (sm breakpoint - mobile first) */
  flex-direction: var(--pigment-stack-direction-at-sm, column);
  gap: var(--pigment-stack-gap-at-sm, 0);
  align-items: var(--pigment-stack-align-items-at-sm);
  justify-content: var(--pigment-stack-justify-content-at-sm);

  /* Medium breakpoint (700px+) */
  @media (min-width: 700px) {
    flex-direction: var(--pigment-stack-direction-at-md, var(--pigment-stack-direction-at-sm, column));
    gap: var(--pigment-stack-gap-at-md, var(--pigment-stack-gap-at-sm, 0));
    align-items: var(--pigment-stack-align-items-at-md, var(--pigment-stack-align-items-at-sm));
    justify-content: var(--pigment-stack-justify-content-at-md, var(--pigment-stack-justify-content-at-sm));
  }

  /* Large breakpoint (1024px+) */
  @media (min-width: 1024px) {
    flex-direction: var(
      --pigment-stack-direction-at-lg,
      var(--pigment-stack-direction-at-md, var(--pigment-stack-direction-at-sm, column))
    );
    gap: var(--pigment-stack-gap-at-lg, var(--pigment-stack-gap-at-md, var(--pigment-stack-gap-at-sm, 0)));
    align-items: var(
      --pigment-stack-align-items-at-lg,
      var(--pigment-stack-align-items-at-md, var(--pigment-stack-align-items-at-sm))
    );
    justify-content: var(
      --pigment-stack-justify-content-at-lg,
      var(--pigment-stack-justify-content-at-md, var(--pigment-stack-justify-content-at-sm))
    );
  }

  /* Extra large breakpoint (1300px+) */
  @media (min-width: 1300px) {
    flex-direction: var(
      --pigment-stack-direction-at-xl,
      var(
        --pigment-stack-direction-at-lg,
        var(--pigment-stack-direction-at-md, var(--pigment-stack-direction-at-sm, column))
      )
    );
    gap: var(
      --pigment-stack-gap-at-xl,
      var(--pigment-stack-gap-at-lg, var(--pigment-stack-gap-at-md, var(--pigment-stack-gap-at-sm, 0)))
    );
    align-items: var(
      --pigment-stack-align-items-at-xl,
      var(--pigment-stack-align-items-at-lg, var(--pigment-stack-align-items-at-md, var(--pigment-stack-align-items-at-sm)))
    );
    justify-content: var(
      --pigment-stack-justify-content-at-xl,
      var(
        --pigment-stack-justify-content-at-lg,
        var(--pigment-stack-justify-content-at-md, var(--pigment-stack-justify-content-at-sm))
      )
    );
  }
}

/* ─── Backdrop ────────────────────────────────────────────────────────────── */

.oNMN4T_fHqgG6QkAZFCb {
  position: fixed;
  inset: 0;
  /* z-index matches v0 MUI Modal (see Menu.module.css for the same value).
     Without it, position:fixed + z-index:auto doesn't establish a stacking
     context, so unrelated positioned page content (e.g. Storybook's docs
     toolbar) can paint above the backdrop despite the portal's DOM order. */
  z-index: 1300;
  background-color: var(--neutral-background-backdrop);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms ease;
}

.oNMN4T_fHqgG6QkAZFCb[data-starting-style],
.oNMN4T_fHqgG6QkAZFCb[data-ending-style] {
  opacity: 0;
}

/* ─── Viewport ────────────────────────────────────────────────────────────── */

/*
 * The Viewport is the full-screen positioning container. For scroll='content'
 * it flex-centers the Popup; for scroll='body' it is itself the scroll container.
 * Variant-specific overrides are applied via CSS data attributes set from JS.
 */

.KFbANOfO01hpj18dE8Zz {
  position: fixed;
  inset: 0;
  /* Matches .backdrop's z-index so the popup stacks above it and above
     unrelated positioned page content; see .backdrop for rationale. */
  z-index: 1300;
  outline: none;
}

/* Default: flex-center the surface (scroll='content' default) */
.KFbANOfO01hpj18dE8Zz.tTkaxM3nQk8xRKzpJmNR {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-componentLayout-md); /* mobile default */
}

@media (min-width: 700px) {
  .KFbANOfO01hpj18dE8Zz.tTkaxM3nQk8xRKzpJmNR {
    padding: var(--space-componentLayout-xl); /* desktop override */
  }
}

/* bottomSheet: anchored to bottom, no padding override needed on viewport */
.KFbANOfO01hpj18dE8Zz.tTkaxM3nQk8xRKzpJmNR.zNnQqKMVqrUkqfeEsQwW {
  padding: 0;
}

/*
 * scroll='body': the viewport itself scrolls.
 * Uses the inline-block / vertical-align middle trick to center the popup
 * while allowing the viewport to scroll taller-than-viewport content.
 */
.KFbANOfO01hpj18dE8Zz.IX_PEdiFevyvmAu58mv1 {
  overflow-y: auto;
  overflow-x: hidden;
  /* Hide native scrollbar (scrollbar is visible only on content mode) */
  scrollbar-width: none;
  text-align: center;
  padding: var(--space-componentLayout-md);
}

.KFbANOfO01hpj18dE8Zz.IX_PEdiFevyvmAu58mv1::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}

@media (min-width: 700px) {
  .KFbANOfO01hpj18dE8Zz.IX_PEdiFevyvmAu58mv1 {
    padding: var(--space-componentLayout-xl);
  }
}

/* ─── Popup (Surface) ─────────────────────────────────────────────────────── */

/*
 * Base surface styles applied to Dialog.Popup (role="dialog").
 * These represent the "default desktop" variant.
 */
.QVzpvfT3HNTlCFgQlt58 {
  display: flex;
  flex-direction: column;
  outline: none;
  position: relative;
  /* No global box-sizing reset in this package (see other components' .root
     rules for the same pattern) — without it, the inline paddingTop/paddingBottom
     set from JS (Dialog.tsx) would add on top of `max-height: 100%` below instead
     of being included in it, overflowing past .viewport's own padding. */
  box-sizing: border-box;
  background-color: var(--neutral-background-primary);
  border-radius: var(--radius-default);
  /* TODO: no v3 shadow token — raw value from v0 shadow.large */
  box-shadow: 0px 13px 37px rgba(0, 0, 0, 0.21);
  max-width: 100%;
  width: 600px; /* md default */

  /* Transition: fade by default */
  transition: opacity 200ms ease;
}

/* Fade: starting/ending state */
.QVzpvfT3HNTlCFgQlt58[data-starting-style],
.QVzpvfT3HNTlCFgQlt58[data-ending-style] {
  opacity: 0;
}

/* scroll='body': popup renders inline for the vertical-align centering trick */
.KFbANOfO01hpj18dE8Zz.IX_PEdiFevyvmAu58mv1 .QVzpvfT3HNTlCFgQlt58 {
  display: inline-flex;
  text-align: left;
  vertical-align: middle;
}

/* scroll='content': popup grows to fill available space, content scrolls inside */
.KFbANOfO01hpj18dE8Zz.tTkaxM3nQk8xRKzpJmNR .QVzpvfT3HNTlCFgQlt58 {
  max-height: 100%;
}

/* ─── Popup widths ────────────────────────────────────────────────────────── */

.UL8cp2RmCdppB20CeCip {
  width: 420px;
}

.FMuxzoyLuYfq4jjOlAyQ {
  width: 600px;
}

.R6cpbZ7WABHmWVaCi9O6 {
  width: 900px;
}

.CbTuomy07hkuDkVYbGRB {
  width: 100%;
}

/* ─── Mobile default variant (--md-down) ─────────────────────────────────── */

@media (max-width: 699.95px) {
  .QVzpvfT3HNTlCFgQlt58 {
    /* Mobile: always full width */
    width: 100%;
  }
}

/* ─── fullScreen variant ──────────────────────────────────────────────────── */

/*
 * fullScreen on desktop: applied at --md-up when desktopVariant='fullScreen'
 */
@media (min-width: 700px) {
  .QVzpvfT3HNTlCFgQlt58.oiVxbDPrACQx64d1QzFX {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    /* Slide-up transition instead of fade */
    transition: transform 200ms ease;
  }

  .QVzpvfT3HNTlCFgQlt58.oiVxbDPrACQx64d1QzFX[data-starting-style],
  .QVzpvfT3HNTlCFgQlt58.oiVxbDPrACQx64d1QzFX[data-ending-style] {
    opacity: 1;
    transform: translateY(100%);
  }
}

/* fullScreen viewport: fill the whole screen */
@media (min-width: 700px) {
  .KFbANOfO01hpj18dE8Zz.oiVxbDPrACQx64d1QzFX {
    padding: 0;
    align-items: stretch;
  }
}

/*
 * fullScreen on mobile: applied at --md-down when mobileVariant='fullScreen'
 */
@media (max-width: 699.95px) {
  .QVzpvfT3HNTlCFgQlt58.j2eeTKnBgpt0_2z3Im_k {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    /* Slide-up transition */
    transition: transform 200ms ease;
  }

  .QVzpvfT3HNTlCFgQlt58.j2eeTKnBgpt0_2z3Im_k[data-starting-style],
  .QVzpvfT3HNTlCFgQlt58.j2eeTKnBgpt0_2z3Im_k[data-ending-style] {
    opacity: 1;
    transform: translateY(100%);
  }
}

@media (max-width: 699.95px) {
  .KFbANOfO01hpj18dE8Zz.j2eeTKnBgpt0_2z3Im_k {
    padding: 0;
    align-items: stretch;
  }
}

/* ─── bottomSheet variant (--md-down only) ───────────────────────────────── */

@media (max-width: 699.95px) {
  .QVzpvfT3HNTlCFgQlt58.zNnQqKMVqrUkqfeEsQwW {
    width: 100%;
    max-height: 50%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    /* TODO: no v3 shadow token for bottomSheet */
    box-shadow: 0px 0px 56px rgba(0, 0, 0, 0.29);
    /* Slide-up transition */
    transition: transform 200ms ease;
    align-self: flex-end;
  }

  .QVzpvfT3HNTlCFgQlt58.zNnQqKMVqrUkqfeEsQwW[data-starting-style],
  .QVzpvfT3HNTlCFgQlt58.zNnQqKMVqrUkqfeEsQwW[data-ending-style] {
    opacity: 1;
    transform: translateY(100%);
  }
}

/* ─── Title area ──────────────────────────────────────────────────────────── */

.Yz0Ysx7scvh1EcxRhQpW {
  flex: 0 0 auto;
  padding-bottom: var(--space-stack-sm);
}

/* ─── Close button ────────────────────────────────────────────────────────── */

/*
 * Positioned absolute against .popup (the nearest positioned ancestor), not
 * floated in .titleArea. `.titleArea` is a flex item, so a flex item always
 * establishes its own block formatting context regardless of `overflow` —
 * meaning a floated child is unavoidably counted in the item's height, and
 * removing `overflow: hidden` alone can't stop the button from expanding the
 * title row. Absolute positioning removes it from flow entirely.
 * `top`/`right` are resolved against .popup's padding edge (i.e. the surface's
 * true outer corner, ignoring the surface's own padding), so the button sits a
 * fixed 4px from the dialog corner regardless of `padding` overrides. See
 * `.titleWithCloseButton` for the title's reserved clearance.
 */
.oZRtotBcXsVysmhTav6k {
  position: absolute;
  top: 4px;
  right: 4px;
}

/* ─── Dialog Title (h2) ───────────────────────────────────────────────────── */

.l_pJJXu_pxgWYP2N0hsi {
  font-weight: var(--primitives-font-weight-700);
  font-size: var(--primitives-font-size-20);
  line-height: var(--primitives-font-lineHeight-125);
  margin: 0;
  padding-bottom: 0;
}

/* Reserve clearance for the absolutely positioned close button (48px Button,
   size="large" iconOnly + 4px corner gap) so title text wraps before reaching
   under it. Applied only when the close button is rendered. */
.h2Ac9Eae16nqFgilXFwD {
  padding-right: 52px;
}

/* ─── DialogContent ───────────────────────────────────────────────────────── */

.JrJml08vGwRumx8s1OKL {
  flex: 1 1 auto;
  /* Flex items default to min-height:auto, which floors this item at its
     content's intrinsic height and lets it push .popup past max-height
     instead of scrolling internally. min-height:0 lets it shrink to fit. */
  min-height: 0;
  padding-bottom: var(--space-stack-sm);
  overflow-y: auto;
  font-size: var(--primitives-font-size-14);
  line-height: 20px; /* no v3 line-height token for the 14px/20px pairing — raw value */
}

/* Overflowing content with nothing focusable inside is itself a tab stop, so it can be scrolled
   from the keyboard. The outline is inset so the popup's edge never clips it. */
.JrJml08vGwRumx8s1OKL:focus-visible {
  outline: 2px solid var(--activity-focus-border);
  outline-offset: -2px;
}

.X6_D_LVIkLO0r8yE2hhZ {
  overflow-y: visible;
}

/* scroll='body': content does not scroll itself */
.LG_rBZMHNnT0Q1GicnTz {
  overflow-y: visible;
}

/* Dividers active: top + bottom border + extra padding */
.CPDeUQ9VjpocpxZ6utUD {
  border-top: 1px solid var(--neutral-border-default);
  border-bottom: 1px solid var(--neutral-border-default);
  padding-top: var(--space-componentLayout-md);
  padding-bottom: var(--space-componentLayout-md);
  margin-top: var(--space-detailLayout-md);
}

/* ─── DialogActions ───────────────────────────────────────────────────────── */

.M5knH_dHB3E8ibbq9P_q {
  flex: 0 0 auto;
  padding-top: var(--space-componentLayout-md); /* fixed, not overridable */
}

/* ─── DialogCommonActions responsive layout ──────────────────────────────── */

/* Desktop (--md-up): tertiary button (3rd) gets left-side flex-grow */
@media (min-width: 700px) {
  .tItK4StUhvILDCxK6Um4 {
    flex-grow: 1;
    margin-left: -8px; /* negative of --space-stack-sm to close gap on left */
  }
}

/* Mobile (--md-down): tertiary button gets small top margin for visual separation */
@media (max-width: 699.95px) {
  .tItK4StUhvILDCxK6Um4 {
    margin-top: 6px;
  }
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .oNMN4T_fHqgG6QkAZFCb,
  .QVzpvfT3HNTlCFgQlt58,
  .QVzpvfT3HNTlCFgQlt58.oiVxbDPrACQx64d1QzFX,
  .QVzpvfT3HNTlCFgQlt58.j2eeTKnBgpt0_2z3Im_k,
  .QVzpvfT3HNTlCFgQlt58.zNnQqKMVqrUkqfeEsQwW {
    transition: none;
  }
}

.zcLnhomBN4c5APlrpXrK {
  display: inline-flex;
  position: relative;
}

.VAD6p1ZKHS1fHUD6DZej {
  position: fixed;
  background: var(--neutral-background-primary);
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: -2px -4px 10px 0px rgba(0, 0, 0, 0.02), 0px 6px 12px 0px rgba(0, 0, 0, 0.11);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
}

.VAD6p1ZKHS1fHUD6DZej.WnJw0ynf5EhmJeT92Vac {
  opacity: 1;
  pointer-events: auto;
}

.cH4de9vxz_UBG08z8Vwn,
.opHvY0jDQjOEbR6lt6QA {
  transform: translateX(-50%);
}

.x6uqL0U_scbR32Z4zJdX,
.iJajlgRRhhGhM8zwHPwX {
  transform: translateY(-50%);
}

/* The sheet supplies the padding and the width; stretch whatever the content root sized for the hover panel. */
div.iq9uDe7lvOPbYWLmCoV7 > * {
  width: 100%;
  padding: 0;
}

/* Two-column table only (no Save column): split in half so the price column starts mid-sheet instead of hugging
   the quantity. With a Save column the fixed-width columns keep their default sizing. */
div.iq9uDe7lvOPbYWLmCoV7 table th:first-child:nth-last-child(2) {
  width: 50%;
}

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

.iPEGIj_tht6yC4UMWGym {
  padding: 1rem;
  width: 332px;
}

.mUXAB8q569LMhc8wT9NU {
  color: var(--neutral-text-primary);
  margin-bottom: 0.5rem;
}

/* Table */
.QXF8XA0AtzbE_4PhiW4A {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-sm, 0.25rem);
  overflow: hidden;
}

.vPkSdyFBsCc06sCWZZNk th {
  text-align: left;
  padding: 4px 8px 4px 0;
  color: var(--neutral-text-primary);
  font-weight: 700;
}

.vPkSdyFBsCc06sCWZZNk th:first-child {
  padding-left: 16px;
}

.vcGW7KQgKMkpq7tYKmk6 {
  width: 108px;
}

.N8RocI3pMVrL815jU24E {
  width: 80px;
}

.LyoD7lJ1QvwsSv4oZbTR td {
  padding: 4px 8px 4px 0;
  color: var(--neutral-text-primary);
}

.LyoD7lJ1QvwsSv4oZbTR td:first-child {
  padding-left: 16px;
}

.LyoD7lJ1QvwsSv4oZbTR:nth-child(odd) {
  background: var(--neutral-background-subtle);
}

.m1Mdxrqico5ZbppvyGkC {
  color: var(--neutral-text-secondary);
  margin-left: 4px;
}

/* Save badge */
.MVLD813vAX1TvvSIKNOr {
  display: inline-flex;
  align-items: center;
  background: rgba(25, 128, 56, 0.2);
  border-radius: var(--radius-pill, 999px);
  padding: 2px 8px 2px 6px;
  font-weight: 600;
}

/* Price shimmer during loading */
.Qhy2DsrFFNM4WabhTfAD {
  display: inline-block;
  width: 3rem;
  height: 0.875rem;
  border-radius: var(--radius-xs, 0.125rem);
  background: linear-gradient(
    90deg,
    var(--neutral-background-subtle) 25%,
    var(--neutral-background-subtleOpaque) 50%,
    var(--neutral-background-subtle) 75%
  );
  background-size: 200% 100%;
  animation: Ulm9GK0u3u8TO34kfr0W 1.5s infinite;
}

/* Footer */
.OTdQuW5K6qmcYwY8nl50 {
  margin-top: 0.5rem;
  color: var(--neutral-text-primary);
}

.QdWXDqKI5qqO1m8ZRGQt {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

.QdWXDqKI5qqO1m8ZRGQt li + li {
  margin-top: 0.125rem;
}

.KhFmKmg3_PEDEUS8FGfR {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.125rem 0.5rem;
  line-height: 1.25;
}

.Bqao0gEAiwPsIkndwqGD {
  color: var(--neutral-text-primary);
}

.ZvjIqkGBUT4gQF0N25XC {
  font-weight: 700;
}

.mckjkMNhxoGN4EZOXBdn {
  color: var(--neutral-text-secondary);
  text-decoration: line-through;
  margin-right: 0.25rem;
}

.tI8jCuATtbkknTAzUGGA {
  font-weight: 700;
  color: var(--partnership-text-largeOrBold);
}

.KjaLut1ZbvB3vptfRixp {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--interactive-text-default);
  text-decoration: none;
  line-height: 1.25;
}

.KjaLut1ZbvB3vptfRixp:hover {
  color: var(--interactive-text-defaultHover);
  text-decoration: underline;
}

/* Brand-refresh links are semibold and underlined at rest, with the underline thickening to 2px on
   hover (UX, 2026-10-09). Scoped to the ambient brand, since this export also renders on classic
   pages, which keep the look above. RecommendationsProductCard's Card stamps refresh-26 itself. */
[data-pigment-brand='refresh-26'] .KjaLut1ZbvB3vptfRixp {
  font-weight: var(--typography-ui-link-2xs-fontWeight);
  text-decoration: var(--primitives-font-decoration-underline);
  text-decoration-thickness: var(--primitives-borderWidth-1px);
}

[data-pigment-brand='refresh-26'] .KjaLut1ZbvB3vptfRixp:hover {
  text-decoration-thickness: var(--primitives-borderWidth-2px);
}

.qPpH454gALU5gB5UVl6u {
  margin: 2.5rem 0;
  width: 100%;
}

.efXtP2eR6Jg_u35VnTmw {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.fG0B1ErvtdzKZdfVRS8X {
  color: var(--neutral-text-primary);
}