/* PDP Widget container */
.rf-widget {
  /* relative so the nudge tooltip can anchor to the button in inline mode */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--rf-widget-padding, 4px);
  background: var(--rf-widget-bg, #F6F6F5);
  border: var(--rf-widget-border-weight, 0) solid var(--rf-widget-border-color, #F6F6F5);
  border-radius: var(--rf-widget-border-radius, 0);
}


.rf-widget--nudge .rf-widget__btn {
  animation: rf-nudge-pulse 2s ease-out infinite;
}

@keyframes rf-nudge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.35); }
  70%  { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rf-widget--nudge .rf-widget__btn { animation: none; }
}

.rf-widget__nudge {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  padding: 8px 14px;
  background: #101828;
  color: #FFFFFF;
  font-family: var(--rf-btn-text-font-family, sans-serif);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  border: none;
  animation: rf-nudge-in 0.25s ease-out;
}

.rf-widget__nudge::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #101828;
}

/* When the button floats in a TOP corner of the image, the bubble opens below */
.rf-widget__nudge--below {
  bottom: auto;
  top: calc(100% + 12px);
}

.rf-widget__nudge--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #101828;
}

@keyframes rf-nudge-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Button bar */
.rf-widget__btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 24px;
  gap: 8px;
  width: 100%;
  height: 56px;
  background: var(--rf-btn-bg, linear-gradient(90deg, #000000 0%, #595959 100%));
  border: var(--rf-btn-border-weight, 0) solid var(--rf-btn-border-color, #000000);
  border-radius: var(--rf-btn-border-radius, 0);
  cursor: pointer;
}

/* Icon + label + badge group */
.rf-widget__btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
}

/* Icon */
.rf-widget__btn-content svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* "AI TRY ON" label */
.rf-widget__label {
  font-family: var(--rf-btn-text-font-family, 'Jost', sans-serif);
  font-style: normal;
  font-weight: var(--rf-btn-text-font-weight, 300);
  font-size: var(--rf-btn-text-font-size, 14px);
  line-height: var(--rf-btn-text-line-height, 120%);
  letter-spacing: var(--rf-btn-text-letter-spacing, 0);
  text-transform: var(--rf-btn-text-transform, uppercase);
  color: var(--rf-btn-text-color, #F9FAFB);
}

/* "New" badge */
.rf-widget__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  background: #FFFFFF;
  border-radius: 0;
  font-family: 'Jost', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: #101828;
}


.rf-widget--overlay {
  position: absolute;

  z-index: var(--rf-overlay-z, 10);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  width: auto;
  max-width: calc(100% - 2 * var(--rf-overlay-offset, 12px));
}


.rf-widget--overlay-top-left {
  top: var(--rf-overlay-top, var(--rf-overlay-offset, 12px));
  left: var(--rf-overlay-left, var(--rf-overlay-offset, 12px));
}
.rf-widget--overlay-top-right {
  top: var(--rf-overlay-top, var(--rf-overlay-offset, 12px));
  right: var(--rf-overlay-right, var(--rf-overlay-offset, 12px));
}
.rf-widget--overlay-bottom-left {
  bottom: var(--rf-overlay-bottom, var(--rf-overlay-offset, 12px));
  left: var(--rf-overlay-left, var(--rf-overlay-offset, 12px));
}
.rf-widget--overlay-bottom-right {
  bottom: var(--rf-overlay-bottom, var(--rf-overlay-offset, 12px));
  right: var(--rf-overlay-right, var(--rf-overlay-offset, 12px));
}

.rf-widget--overlay .rf-widget__btn {
  width: auto;
  height: 40px;
  padding: 0 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
  white-space: nowrap;
}

.rf-widget--overlay .rf-widget__btn:hover {
  transform: scale(1.04);
}

/* The floating button never shows the subtitle row */
.rf-widget--overlay .rf-widget__subtitle {
  display: none;
}

/* Icon-only round variant */
.rf-widget--overlay-icon .rf-widget__btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 10px;
}

.rf-widget--overlay-icon .rf-widget__label,
.rf-widget--overlay-icon .rf-widget__badge {
  display: none;
}

.rf-widget--overlay-icon .rf-widget__btn-content svg {
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 749px) {
  /* 44px minimum touch target (Apple HIG / Android accessibility) */
  .rf-widget--overlay .rf-widget__btn {
    height: 44px;
    padding: 0 14px;
  }

  .rf-widget--overlay-icon .rf-widget__btn {
    width: 44px;
    height: 44px;
    padding: 0;
  }


  .rf-widget__nudge {
    white-space: normal;
    max-width: min(240px, calc(100vw - 24px));
    text-align: center;
  }

  .rf-widget--overlay-top-left .rf-widget__nudge,
  .rf-widget--overlay-bottom-left .rf-widget__nudge {
    left: 0;
    transform: none;
  }

  .rf-widget--overlay-top-left .rf-widget__nudge::after,
  .rf-widget--overlay-bottom-left .rf-widget__nudge::after {
    left: 22px;
    transform: none;
  }

  .rf-widget--overlay-top-right .rf-widget__nudge,
  .rf-widget--overlay-bottom-right .rf-widget__nudge {
    left: auto;
    right: 0;
    transform: none;
  }

  .rf-widget--overlay-top-right .rf-widget__nudge::after,
  .rf-widget--overlay-bottom-right .rf-widget__nudge::after {
    left: auto;
    right: 22px;
    transform: none;
  }
}

/* Nudge entrance animation uses translateX(-50%) which the corner-pinned
   mobile variants override — give them their own non-shifting keyframes */
@media screen and (max-width: 749px) {
  .rf-widget--overlay .rf-widget__nudge {
    animation: rf-nudge-in-pinned 0.25s ease-out;
  }

  @keyframes rf-nudge-in-pinned {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* Subtitle row */
.rf-widget__subtitle {
  display: block;
  padding: 8px 0;
  width: 100%;
  margin: 0;
  text-align: var(--rf-widget-text-align, center);
  font-family: var(--rf-widget-text-font-family, 'Jost', sans-serif);
  font-style: normal;
  font-weight: var(--rf-widget-text-font-weight, 400);
  font-size: var(--rf-widget-text-font-size, 14px);
  line-height: var(--rf-widget-text-line-height, 140%);
  letter-spacing: var(--rf-widget-text-letter-spacing, 0.01em);
  color: var(--rf-widget-text-color, #777571);
  text-transform: var(--rf-widget-text-transform, none);
}

.rf-widget__btn--updating {
  opacity: .55;
  transition: opacity .18s ease-out;
}


quick-add-modal .rf-widget,
modal-dialog .rf-widget,
quick-add-dialog .rf-widget,
dialog .rf-widget,
[class*="quick-add"] .rf-widget,
[id*="QuickAdd"] .rf-widget {
  display: none !important;
}



.rf-my-row,
td.rf-my-cell,
th.rf-my-cell {
  background: var(--rf-my-row-bg, rgba(17, 17, 17, 0.06));
  font-weight: 600;
}

/* The size we recommended, marked down its whole row or column. */
.rf-size-picked {
  background: var(--rf-picked-bg, rgba(17, 17, 17, 0.06));
  font-weight: 600;
}

/* Where the shopper falls outside the band, say so quietly rather than in red:
   being 2cm over is information, not an error. */
.rf-my-row [data-rf-status="above"]::after,
td.rf-my-cell[data-rf-status="above"]::after {
  content: " \2191";
  opacity: 0.55;
}

.rf-my-row [data-rf-status="below"]::after,
td.rf-my-cell[data-rf-status="below"]::after {
  content: " \2193";
  opacity: 0.55;
}

caption.rf-my-cell {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding-bottom: 6px;
}

@media (prefers-color-scheme: dark) {
  .rf-my-row,
  td.rf-my-cell,
  th.rf-my-cell,
  .rf-size-picked {
    background: var(--rf-my-row-bg, rgba(255, 255, 255, 0.10));
  }
}

.rf-widget[data-rf-size="small"] { --rf-launcher-height: 32px; --rf-launcher-inset: 10px; }
.rf-widget[data-rf-size="medium"] { --rf-launcher-height: 36px; --rf-launcher-inset: 14px; }
.rf-widget[data-rf-size="large"] { --rf-launcher-height: 44px; --rf-launcher-inset: 18px; }
.rf-widget[data-rf-size]:not([data-rf-size="legacy"]) .rf-widget__btn {
  position: relative;
  box-sizing: border-box;
  height: auto;
  min-height: var(--rf-launcher-height);
  width: fit-content;
  max-width: 100%;
  padding: 6px var(--rf-launcher-inset);
}
.rf-widget[data-rf-size]:not([data-rf-size="legacy"]) .rf-widget__btn::after {
  content: '';
  position: absolute;
  inset: min(0px, calc((var(--rf-launcher-height) - 44px) / 2)) 0;
}
.rf-widget[data-rf-size]:not([data-rf-size="legacy"]).rf-widget--overlay-icon .rf-widget__btn {
  width: var(--rf-launcher-height);
  height: var(--rf-launcher-height);
  padding: 0;
}
.rf-widget[data-rf-design]:not([data-rf-design="legacy"]):not(.rf-widget--overlay) {
  padding: 0;
  border: 0;
  background: transparent;
}
.rf-widget[data-rf-design]:not([data-rf-design="legacy"]) .rf-widget__btn {
  width: fit-content;
  max-width: 100%;
  box-shadow: none;
  transform: none;
  white-space: normal;
  animation: none;
}
.rf-widget[data-rf-design]:not([data-rf-design="legacy"]) .rf-widget__label {
  overflow-wrap: anywhere;
}
.rf-widget[data-rf-design="filled"] .rf-widget__btn {
  color: var(--rf-btn-text-color);
  background: var(--rf-btn-solid-bg);
  border: 0;
}
.rf-widget[data-rf-design="outline"] .rf-widget__btn {
  background: transparent;
  border: 1px solid var(--rf-btn-border-color);
  color: var(--rf-btn-border-color);
}
.rf-widget[data-rf-design="text"] .rf-widget__btn {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-inline: 0;
  color: var(--rf-btn-border-color);
}
.rf-widget[data-rf-design="text"] .rf-widget__label {
  text-decoration: underline;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
}
.rf-widget[data-rf-design="text"] .rf-widget__label,
.rf-widget[data-rf-design="outline"] .rf-widget__label { color: inherit; }
.rf-widget[data-rf-design]:not([data-rf-design="legacy"]) .rf-widget__btn svg path { fill: currentColor; }
.rf-widget[data-rf-font-source="theme"] .rf-widget__label {
  font-family: var(--font-body-family, var(--font-body, inherit));
}
.rf-widget[data-rf-design]:not([data-rf-design="legacy"]) .rf-widget__btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.rf-widget[data-rf-font-source="theme"] .rf-widget__btn { font-family: inherit; }

.rf-widget[data-rf-design]:not([data-rf-design="legacy"]) .rf-widget__nudge { display: none; }

.rf-widget[data-rf-design]:not([data-rf-design="legacy"]) .rf-widget__badge { display: none; }
.rf-pdp-size-mark{display:inline-block;margin-left:.5em;padding:.05em .45em;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:500 .55em/1.6 inherit;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;white-space:nowrap;opacity:.85;pointer-events:none}
.rf-pdp-size-label--recommended{position:relative}
.rf-size-link{display:inline-block;margin:.5rem 0 0;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:.875em;line-height:1.4;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}.rf-size-link:hover{text-decoration-thickness:2px}.rf-size-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}