/* Homepage size finder ribbon + guided assistant */
.find-size-ribbon {
  --bb-primary: #1a6fed;
  --bb-accent: #0cc8c0;
  --bb-ink: #0b0f1a;
  --bb-muted: #6b7280;
  --bb-card: #ffffff;
  --bb-border: rgba(11, 15, 26, 0.09);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 48px;
  max-width: 1240px;
  margin: 40px auto 72px;
  padding: 52px 56px;
  overflow: hidden;
  color: #fff;
  border-radius: 28px;
  background: linear-gradient(112deg, #102b61 0%, #1661ca 52%, #0ba9cc 100%);
  box-shadow: 0 28px 58px rgba(17, 77, 161, .2);
}

.find-size-ribbon::before,
.find-size-ribbon::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
}

.find-size-ribbon::before { width: 540px; height: 540px; top: -350px; right: -95px; }
.find-size-ribbon::after { width: 330px; height: 330px; bottom: -245px; left: 36%; }

.find-size-ribbon__eyebrow,
.bb-agent__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 0 16px;
  padding: 8px 12px;
  color: #baffd9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  border-radius: 999px;
  background: rgba(5, 203, 174, .13);
}

.find-size-ribbon h2 {
  max-width: 600px;
  margin: 0;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .98;
}

.find-size-ribbon h2 em { color: #91f5dc; font-style: normal; }

.find-size-ribbon__copy > p {
  max-width: 555px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.83);
  font-size: 18px;
  line-height: 1.55;
}

.find-size-ribbon__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255,255,255,.9);
  font-size: 14px;
  font-weight: 700;
}

.find-size-ribbon__proof li::before { content: "✓"; margin-right: 7px; color: #8effd3; }

.find-size-ribbon__panel {
  align-self: center;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 24px;
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 32px rgba(5, 35, 91, .14);
  backdrop-filter: blur(14px);
}

.find-size-ribbon__panel-title { margin: 0 0 16px; font-size: 17px; font-weight: 750; }

.find-size-ribbon__search {
  display: flex;
  gap: 10px;
  padding: 7px 7px 7px 16px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
}

.find-size-ribbon__search input {
  min-width: 0;
  flex: 1;
  color: var(--bb-ink);
  font: inherit;
  font-size: 15px;
  border: 0;
  outline: 0;
  background: transparent;
}

.find-size-ribbon__search input::placeholder { color: #7a8497; }

.find-size-ribbon__search button,
.find-size-ribbon__main,
.find-size-ribbon__assistant,
.bb-agent__quick,
.bb-agent__send,
.bb-agent-launcher {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.find-size-ribbon__search button {
  flex: none;
  padding: 11px 15px;
  color: #fff;
  border-radius: 11px;
  background: var(--bb-primary);
}

.find-size-ribbon__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }

.find-size-ribbon__main,
.find-size-ribbon__assistant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 15px;
}

.find-size-ribbon__main { color: #09376b; background: #fff; box-shadow: 0 12px 25px rgba(5, 27, 70, .16); }
.find-size-ribbon__assistant { color: #fff; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.08); }

.find-size-ribbon__search button:hover,
.find-size-ribbon__main:hover,
.find-size-ribbon__assistant:hover,
.bb-agent__quick:hover,
.bb-agent__send:hover,
.bb-agent-launcher:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(4, 32, 78, .2); }

.find-size-ribbon__search button:focus-visible,
.find-size-ribbon__main:focus-visible,
.find-size-ribbon__assistant:focus-visible,
.bb-agent__quick:focus-visible,
.bb-agent__send:focus-visible,
.bb-agent-launcher:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.bb-agent {
  position: fixed;
  z-index: 1005;
  right: 24px;
  bottom: 24px;
}

.bb-agent-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, #1a6fed, #0cc8c0);
  box-shadow: 0 16px 36px rgba(26, 111, 237, .34);
}

.bb-agent-launcher__dot { width: 10px; height: 10px; border-radius: 50%; background: #bdffda; box-shadow: 0 0 0 4px rgba(189,255,218,.18); }

.bb-agent__panel {
  position: absolute;
  right: 0;
  bottom: 70px;
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr) auto;
  width: min(390px, calc(100vw - 32px));
  min-height: 500px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.98);
  color: var(--bb-ink);
  border: 1px solid var(--bb-border);
  border-radius: 24px;
  background: var(--bb-card);
  box-shadow: 0 28px 70px rgba(11, 29, 62, .24);
  transition: opacity .2s ease, transform .2s ease;
}

.bb-agent.is-open .bb-agent__panel { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

.bb-agent__header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; color: #fff; background: linear-gradient(135deg, #163b7d, #1a6fed); }
.bb-agent__avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 14px; background: rgba(255,255,255,.16); font-size: 19px; }
.bb-agent__header h3 { margin: 0; font-size: 16px; }
.bb-agent__header p { margin: 3px 0 0; color: rgba(255,255,255,.76); font-size: 12px; }
.bb-agent__close { margin-left: auto; padding: 5px; color: #fff; cursor: pointer; border: 0; background: transparent; font-size: 25px; line-height: 1; }

.bb-agent__messages { display: flex; flex-direction: column; gap: 14px; padding: 20px; overflow-y: auto; background: #f7f8fa; }
.bb-agent__message { max-width: 88%; padding: 12px 14px; border-radius: 16px 16px 16px 4px; color: #18233a; background: #fff; box-shadow: 0 4px 13px rgba(11, 15, 26, .06); font-size: 14px; line-height: 1.46; }
.bb-agent__message--user { align-self: end; border-radius: 16px 16px 4px 16px; color: #fff; background: #1a6fed; }
.bb-agent__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-agent__quick { padding: 9px 12px; color: #145cc2; border: 1px solid #c9ddff; border-radius: 12px; background: #fff; font-size: 13px; }
.bb-agent__quick:hover { border-color: #1a6fed; background: #ebf2ff; box-shadow: none; }

.bb-agent__composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--bb-border); background: #fff; }
.bb-agent__composer input { min-width: 0; flex: 1; padding: 11px 12px; color: var(--bb-ink); border: 1px solid #dce3ee; border-radius: 12px; outline: none; font: inherit; font-size: 13px; }
.bb-agent__composer input:focus { border-color: #1a6fed; box-shadow: 0 0 0 3px rgba(26,111,237,.13); }
.bb-agent__send { width: 43px; color: #fff; border-radius: 12px; background: #1a6fed; }

@media (max-width: 960px) {
  .find-size-ribbon { grid-template-columns: 1fr; gap: 28px; margin: 32px 20px 56px; padding: 40px 30px; }
  .find-size-ribbon__copy > p { font-size: 16px; }
}

@media (max-width: 600px) {
  .find-size-ribbon { margin: 20px 14px 44px; padding: 30px 20px; border-radius: 24px; }
  .find-size-ribbon h2 { font-size: 39px; }
  .find-size-ribbon__panel { padding: 14px; border-radius: 18px; }
  .find-size-ribbon__search { padding-left: 12px; }
  .find-size-ribbon__search button { padding: 10px 12px; }
  .find-size-ribbon__actions { grid-template-columns: 1fr; }
  .bb-agent { right: 14px; bottom: 14px; }
  .bb-agent-launcher { min-height: 52px; padding: 0 16px; }
  .bb-agent__panel { right: 0; bottom: 64px; min-height: min(520px, calc(100vh - 95px)); border-radius: 22px; }
}

/* Staging refresh: assistant hero sits at the top and remains viewport-safe. */
.hero { display: none !important; }

.find-size-ribbon {
  width: 100vw;
  max-width: none;
  margin: 0 0 64px calc(50% - 50vw);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .92fr);
  align-items: center;
  gap: clamp(28px, 5vw, 84px);
  padding: clamp(56px, 8vw, 104px) max(24px, calc((100vw - 1180px) / 2));
  border-radius: 0;
}

.find-size-ribbon__copy { max-width: 620px; }
.find-size-ribbon__eyebrow { letter-spacing: .13em; }
.find-size-ribbon h2 { font-size: clamp(44px, 7vw, 84px); line-height: .98; letter-spacing: -.045em; margin: 0 0 28px; }
.find-size-ribbon__copy > p { max-width: 590px; line-height: 1.65; }
.find-size-ribbon__panel { width: 100%; box-sizing: border-box; padding: clamp(22px, 3vw, 34px); border-radius: 24px; }
.find-size-ribbon__search { grid-template-columns: minmax(0, 1fr) auto; }
.find-size-ribbon__search input { min-width: 0; }
.find-size-ribbon__actions { grid-template-columns: 1fr 1fr; }

.bb-agent { right: 16px; bottom: 16px; z-index: 1200; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.bb-agent.is-open { pointer-events: auto; }
.bb-agent__panel { width: 100%; max-height: min(680px, calc(100dvh - 110px)); min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.bb-agent__messages { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bb-agent.is-open .bb-agent-launcher { visibility: hidden; pointer-events: none; }

@media (max-width: 760px) {
  .find-size-ribbon { width: 100%; margin: 0 0 44px; padding: 48px 20px; grid-template-columns: 1fr; }
  .find-size-ribbon h2 { font-size: clamp(40px, 12vw, 60px); }
  .find-size-ribbon__copy > p { font-size: 16px; line-height: 1.55; }
  .find-size-ribbon__panel { padding: 20px; }
  .find-size-ribbon__actions { grid-template-columns: 1fr; }
  .bb-agent { right: 12px; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; }
.bb-agent__panel { max-height: calc(100dvh - 24px); border-radius: 24px; }
}

/* Keep the assistant available without competing with the centered size wizard. */
body:has(#wizard.open) .bb-agent:not(.is-open) {
  right: 18px;
  bottom: 18px;
  left: auto;
  width: 52px;
}

body:has(#wizard.open) .bb-agent:not(.is-open) .bb-agent-launcher {
  display: grid;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  font-size: 0;
  pointer-events: auto;
}

body:has(#wizard.open) .bb-agent:not(.is-open) .bb-agent-launcher__dot {
  display: none;
}

body:has(#wizard.open) .bb-agent:not(.is-open) .bb-agent-launcher::after {
  content: "✦";
  font-size: 21px;
  line-height: 1;
}

@media (max-width: 620px) {
  body:has(#wizard.open) .bb-agent:not(.is-open) {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: auto;
    width: 46px;
  }

  body:has(#wizard.open) .bb-agent:not(.is-open) .bb-agent-launcher {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
  }
}

/* Production compact hero: one full-width entry point directly below the header. */
.find-size-ribbon.bb-smart-routing-hero,
.find-size-ribbon {
  width: 100% !important;
  max-width: none !important;
  min-height: min(590px, calc(100svh - 82px));
  margin: 0 0 42px !important;
  padding: clamp(38px, 5vw, 68px) max(24px, calc((100vw - 1180px) / 2)) !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, .88fr) !important;
  gap: clamp(30px, 5vw, 78px) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.find-size-ribbon .bb-measure-ghost { display: none !important; }
.find-size-ribbon__panel.bb-assistant-panel {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 540px !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
}
.find-size-ribbon__copy.bb-smart-routing-hero {
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.find-size-ribbon__copy { max-width: 610px; }
.find-size-ribbon h2 { font-size: clamp(46px, 5.8vw, 76px) !important; margin-bottom: 22px !important; }
.find-size-ribbon__copy > p { margin-top: 0; }
.find-size-ribbon__proof { margin-top: 22px; }
.find-size-ribbon__panel { max-width: 540px; justify-self: end; }

@media (max-width: 760px) {
  .find-size-ribbon.bb-smart-routing-hero,
  .find-size-ribbon {
    width: 100% !important;
    min-height: auto;
    margin: 0 0 28px !important;
    padding: 38px 20px 42px !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    border-radius: 0 !important;
  }
  .find-size-ribbon h2 { font-size: clamp(40px, 12vw, 56px) !important; }
  .find-size-ribbon__panel { max-width: none; justify-self: stretch; }
  .find-size-ribbon__panel.bb-assistant-panel { max-width: none !important; }
}

/* Staging visual cue: measurement silhouette behind the assistant panel. */
.find-size-ribbon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.find-size-ribbon::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 460'%3E%3Cg fill='none' stroke='%23b8fff1' stroke-width='4' opacity='.8'%3E%3Ccircle cx='120' cy='42' r='24'/%3E%3Cpath d='M120 66 C88 70 78 96 84 138 L95 208 C100 235 101 275 88 330 L70 438 M120 66 C152 70 162 96 156 138 L145 208 C140 235 139 275 152 330 L170 438 M95 208 C110 215 130 215 145 208 M88 330 C110 338 130 338 152 330 M70 438H105 M170 438H135'/%3E%3Cpath stroke-dasharray='8 8' d='M80 140H160 M96 208H144 M88 330H152'/%3E%3C/g%3E%3C/svg%3E")
      no-repeat 78% 50% / min(34vw, 520px) auto,
    radial-gradient(circle at 82% 48%, rgba(105, 238, 220, .18), transparent 42%);
}

.find-size-ribbon::after {
  content: "";
  position: absolute;
  width: min(520px, 42vw);
  height: min(520px, 42vw);
  right: clamp(10px, 5vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(155, 236, 255, .24);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(155, 236, 255, .08), 0 0 0 70px rgba(155, 236, 255, .05);
  pointer-events: none;
  z-index: 0;
}

.find-size-ribbon > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .find-size-ribbon::before {
    background-size: 260px auto;
    background-position: 92% 10%;
    opacity: .12;
  }

  .find-size-ribbon::after {
    width: 260px;
    height: 260px;
    right: -90px;
    top: 18%;
  }
}