/* Ported from vonn-app/app/components/conversation/styles.css:
   Rich Outfit Card, Outfit carousel, and the 720px mobile layout. */
.conv-carousel {
  --surface: #fff;
  --rule: #f0e0d0;
  --rule-soft: #f5ebe0;
  --ink: #16110e;
  --ink-muted: #806050;
  --ink-soft: #2d1b14;
  --accent: #b45a3c;
  --font-premium: "Avenir Next", "Neue Haas Grotesk Text", "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin-top: 1rem;
  margin-bottom: 1rem;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-premium);
}
.conv-carousel .conv-card { background: var(--surface); border-radius: 12px; border: 1px solid var(--rule); margin: 0; padding: 0; box-shadow: 0 2px 8px rgba(180,100,60,.04); overflow: hidden; }
.conv-card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1.25rem 1rem; }
.conv-card-title { font-family: var(--font-premium); font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.015em; line-height: 1.18; }
.conv-card-body { display: grid; grid-template-columns: 68px minmax(0, 42%) minmax(0, 1fr); gap: .875rem; padding: 0 1.25rem 1.25rem; }
.conv-thumbs { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.conv-thumb-group { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.conv-thumb-group-ensemble { border-top: 1px solid var(--rule); padding-top: .9rem; }
.conv-thumb-group-title { color: var(--ink-muted); font-size: .76rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.conv-thumb { width: 68px; height: 86px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--rule-soft); padding: 0; position: relative; transition: border-color .15s ease; }
.conv-thumb.is-active { border-color: var(--accent); }
.conv-thumb:disabled { cursor: default; }
.conv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.conv-thumb-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.5rem; color: var(--ink-muted); }
.conv-gallery-controls { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px; background: rgba(255,253,249,.96); color: #391d2b; }
.conv-gallery-controls button { min-width: 36px; min-height: 36px; border: 0; background: transparent; color: inherit; font-size: 1.5rem; cursor: pointer; }
.conv-gallery-controls button:disabled { opacity: .3; cursor: default; }
.conv-gallery-count { font-size: .78rem; white-space: nowrap; }
.conv-hero { border-radius: 12px; overflow: hidden; background: var(--rule-soft); aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); position: relative; min-width: 0; align-self: start; }
.conv-hero img { width: 100%; height: 100%; object-fit: contain; display: block; }
.conv-hero.is-product img { object-fit: cover; object-position: center; }
.conv-hero-empty { font-style: italic; font-size: .9rem; padding: 1rem; text-align: center; }
.conv-detail { display: flex; flex-direction: column; min-width: 0; }
.conv-detail-title { font-family: var(--font-premium); font-size: 1.18rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; letter-spacing: -.018em; line-height: 1.2; }
.conv-detail-desc { font-size: .85rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 1rem; overflow-wrap: anywhere; }
.conv-detail .product-card { border: 0; border-radius: 0; background: transparent; }
.conv-detail .product-body { padding: 0; }
.conv-detail .product-title { font-family: var(--font-premium); font-size: 1.18rem; line-height: 1.2; letter-spacing: -.018em; min-height: 0; overflow-wrap: anywhere; }
.conv-detail .product-price { font-size: 1.05rem; }
.conv-detail .shop-link { display: flex; align-items: center; justify-content: center; padding: .75rem; border-radius: 8px; background: var(--accent); color: white; text-decoration: none; }
.conv-detail .outfit-actions { margin-top: 1rem; padding-top: 1rem; }
.conv-detail .commerce-grounding { overflow-wrap: anywhere; }
.conv-outfit-items { list-style: none; padding: .875rem 0 0; margin: 0 0 1rem; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: .875rem; }
.conv-outfit-item { display: flex; flex-direction: column; gap: .35rem; }
.conv-outfit-item-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.conv-outfit-item-info { flex: 1; min-width: 0; }
.conv-outfit-item-brand { color: var(--ink-muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.conv-outfit-item-title { font-family: var(--font-premium); color: var(--ink); font-size: .82rem; font-weight: 650; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; display: block; max-width: 100%; border: 0; padding: 0; background: transparent; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.conv-outfit-item-price { font-size: .8rem; font-weight: 600; color: var(--ink); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.conv-carousel-header { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-bottom: .5rem; padding: 0 .25rem; }
.conv-carousel-counter { font-size: .8rem; font-weight: 600; letter-spacing: .05em; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.conv-carousel-nav { display: flex; gap: .35rem; flex-shrink: 0; }
.conv-carousel-nav button { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-muted); cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease; }
.conv-carousel-nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.conv-carousel-nav button:disabled { opacity: .35; cursor: not-allowed; }
.conv-carousel-slot { outline: none; }
.conv-carousel-slot:focus-visible, .conv-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.conv-carousel-slot .conv-card { margin-top: 0; }
.conv-carousel-note { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .75rem; }
.conv-carousel .pdp-look { width: 100%; max-width: none; }
.pdp-look .pdp-look-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 4px; padding: 20px 10px 16px 20px; }
.pdp-look .pdp-look-title { min-width: 0; margin: 0; color: #391d2b; font-family: "Instrument Serif", Georgia, serif; font-size: 2rem; line-height: 1.08; font-weight: 400; letter-spacing: -.03em; }
.pdp-look .pdp-look-title-group { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.pdp-look .conv-card-body { padding-top: 0; }
.pdp-look .conv-detail { min-height: 260px; align-self: stretch; }
.pdp-look .conv-detail-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pdp-look .conv-detail-actions { margin-top: auto; padding: 12px; }
.pdp-product { padding: 12px; }
.pdp-product p { color: #716761; }
.pdp-look .pdp-product .conv-detail-title { font-family: var(--font-premium); font-size: 1.3rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.pdp-garment-title { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; text-align: left; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.pdp-garment-title:focus-visible, .conv-gallery-controls button:focus-visible { outline: 2px solid #71243f; outline-offset: 2px; }
.pdp-garment-title:not(button):not(a) { text-decoration: none; cursor: default; }
.pdp-product .pdp-garment-title:is(button, a):hover { color: #71243f; }
.pdp-look .pdp-product-description,
.pdp-look .pdp-overview-reasons { color: #544942; font-family: var(--font-premium); font-size: .88rem; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.pdp-look .pdp-product-description { margin: .5rem 0 .8rem; }
.pdp-look .pdp-product-description p { margin: 0 0 .65rem; color: inherit; }
.pdp-look .pdp-product-description p:last-of-type { margin-bottom: 0; }
.pdp-look .pdp-description-more { display: inline; margin: .35rem 0 0; border: 0; background: transparent; padding: 0; color: #71243f; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pdp-look .pdp-description-more:hover { color: #4c172b; }
.pdp-look .pdp-description-more:focus-visible, .pdp-description-dialog-close:focus-visible { outline: 2px solid #71243f; outline-offset: 3px; }
.pdp-description-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(80vh, 760px); overflow-y: auto; border: 1px solid #ded5ca; border-radius: 16px; background: #fffdf9; padding: clamp(20px, 4vw, 32px); color: #16110e; box-shadow: 0 24px 80px #34263148; }
.pdp-description-dialog::backdrop { background: #2119209c; }
.pdp-description-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.pdp-description-dialog h2 { margin: 0; font-family: var(--font-premium, sans-serif); font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
.pdp-description-dialog-close { flex: none; border: 0; background: transparent; color: #71243f; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.pdp-description-dialog-body { color: #544942; font-family: var(--font-premium, sans-serif); font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.pdp-description-dialog-body p { margin: 0 0 1rem; }
.pdp-description-dialog-body p:last-child { margin-bottom: 0; }
.pdp-feedback-dialog { width: min(520px, calc(100vw - 32px)); max-height: min(85vh, 720px); overflow-y: auto; border: 1px solid #ded5ca; border-radius: 16px; background: #fffdf9; padding: clamp(22px, 4vw, 32px); color: #16110e; box-shadow: 0 24px 80px #34263148; font-family: var(--font-premium, "Avenir Next", sans-serif); }
.pdp-feedback-dialog::backdrop { background: #2119209c; }
.pdp-feedback-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pdp-feedback-heading h2 { margin: 0; color: #391d2b; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(1.7rem, 4vw, 2.1rem); font-weight: 400; line-height: 1.1; }
.pdp-feedback-close { flex: none; border: 0; background: transparent; color: #6e625b; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.pdp-feedback-intro { margin: 14px 0 22px; color: #716761; font-size: .92rem; line-height: 1.5; }
.pdp-feedback-reasons { margin: 0; padding: 0; border: 0; }
.pdp-feedback-reasons legend, .pdp-feedback-label { margin-bottom: 10px; color: #391d2b; font-size: .9rem; font-weight: 700; }
.pdp-feedback-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-feedback-choice { min-height: 40px; border: 1px solid #ded5ca; border-radius: 999px; background: #fff; padding: 8px 14px; color: #544942; font: inherit; font-size: .85rem; cursor: pointer; }
.pdp-feedback-choice:hover { border-color: #71243f; }
.pdp-feedback-choice[aria-pressed="true"] { border-color: #71243f; background: #f9eef2; color: #71243f; }
.pdp-feedback-label { display: block; margin: 22px 0 10px; }
.pdp-feedback-comment { display: block; box-sizing: border-box; width: 100%; min-height: 92px; resize: vertical; border: 1px solid #ded5ca; border-radius: 10px; background: #fff; padding: 12px; color: #16110e; font: inherit; font-size: .9rem; line-height: 1.5; }
.pdp-feedback-comment::placeholder { color: #948983; }
.pdp-feedback-error { margin: 12px 0 0; color: #9d3043; font-size: .85rem; }
.pdp-feedback-error[hidden] { display: none; }
.pdp-feedback-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.pdp-feedback-actions button { min-height: 44px; border-radius: 9px; padding: 10px 18px; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.pdp-feedback-cancel { border: 1px solid #ded5ca; background: #fff; color: #391d2b; }
.pdp-feedback-submit { border: 1px solid #71243f; background: #71243f; color: #fff; }
.pdp-feedback-submit:hover:not(:disabled) { background: #4c172b; }
.pdp-feedback-actions button:disabled { opacity: .5; cursor: not-allowed; }
.pdp-feedback-dialog button:focus-visible, .pdp-feedback-comment:focus-visible { outline: 2px solid #71243f; outline-offset: 2px; }
.pdp-look .pdp-product-retailer { margin: 0 0 .6rem; color: #806050; font-size: .78rem; font-weight: 650; }
.pdp-look .pdp-product-price { margin: 0 0 .6rem; color: #16110e; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pdp-delivery-estimate { margin: 0 0 .6rem; color: #705f55; font-size: 12px; line-height: 1.45; }
.pdp-look .pdp-evidence-badges { display: flex; align-items: center; gap: .375rem; flex-wrap: nowrap; overflow-x: auto; padding: .1rem 0 .25rem; }
.pdp-look .pdp-evidence-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; border: 1px solid #dccbd1; border-radius: 5px; background: transparent; color: #71243f; text-decoration: none; box-sizing: border-box; }
.pdp-look .pdp-evidence-badge.is-unverified { border-color: #ded8d2; background: transparent; color: #8c827d; }
.pdp-look .pdp-evidence-badge svg { flex: none; }
.pdp-look a.pdp-evidence-badge:hover { border-color: #71243f; background: transparent; }
.pdp-look a.pdp-evidence-badge:focus-visible { outline: 2px solid #71243f; outline-offset: 2px; }
.pdp-look .pdp-overview-title { margin: 0 0 1.2rem; color: #391d2b; font-family: "Instrument Serif", Georgia, serif; font-size: 1.7rem; line-height: 1.2; font-weight: 400; }
.pdp-look .pdp-overview-unavailable { margin: 0; max-width: 34ch; color: #73645d; font-family: var(--font-premium); font-size: .88rem; line-height: 1.5; }
.pdp-look .pdp-overview-reasons { margin: 0; padding: 0; list-style: none; }
.pdp-look .pdp-overview-reasons li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; padding: 0 0 1rem; border-bottom: 1px solid var(--rule); }
.pdp-look .pdp-overview-reasons li + li { margin-top: 1rem; }
.pdp-look .pdp-overview-reasons li::before { content: ""; width: 7px; height: 7px; margin: .55em auto 0; border-radius: 50%; background: #71243f; box-shadow: 0 0 0 4px #f7edf0; }
.pdp-ensemble-links { display: grid; gap: .55rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; list-style: none; counter-reset: garment; border-top: 1px solid var(--rule); }
.pdp-ensemble-link { min-width: 0; color: #544942; font-size: .8rem; line-height: 1.4; counter-increment: garment; }
.pdp-ensemble-link .pdp-garment-title { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1rem; gap: .45rem; align-items: center; box-sizing: border-box; width: 100%; min-height: 60px; padding: .75rem .85rem; border: 1px solid #e8dcd1; border-radius: 9px; background: #faf7f3; color: #544942; font-size: .82rem; line-height: 1.4; }
.pdp-ensemble-link .pdp-garment-title::before { content: counter(garment, decimal-leading-zero); color: #9b8177; font-variant-numeric: tabular-nums; }
.pdp-ensemble-link .pdp-garment-title:is(button, a)::after { content: "›"; color: #84656f; font-size: 1.35rem; line-height: 1; }
.pdp-ensemble-link .pdp-garment-title:is(button, a):hover { border-color: #c8aeb7; background: #f7f0f1; color: #391d2b; }
.pdp-outfit-total { margin-top: auto; padding: 1.4rem 12px 0; display: grid; gap: .4rem; border-top: 1px solid var(--rule); }
.pdp-outfit-total-label { color: #716761; font-size: .8rem; }
.pdp-outfit-total-value { color: #391d2b; font-family: "Instrument Serif", Georgia, serif; font-size: 1.8rem; font-weight: 400; line-height: 1.2; }
.pdp-outfit-total-note { color: #716761; font-size: .74rem; line-height: 1.4; }
.pdp-product-role { text-transform: capitalize; color: #806050; font-size: .78rem; font-weight: 700; }
.pdp-look .pdp-look-actions { display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; gap: 0; padding: 0; }
.pdp-look .pdp-icon-action { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #71243f; text-decoration: none; cursor: pointer; }
.pdp-look .pdp-icon-action:hover:not(:disabled) { background: #f9eef2; }
.pdp-look .pdp-icon-action:focus-visible { outline: 3px solid #71243f; outline-offset: 2px; }
.pdp-look .pdp-icon-action:disabled { cursor: default; opacity: .7; }
.pdp-look .pdp-icon-action.is-saved svg { fill: #71243f; }
.save-failure-toast { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 1000; max-width: min(360px, calc(100vw - 40px)); border: 1px solid #d9b0b6; border-radius: 12px; background: #fffaf9; box-shadow: 0 12px 36px rgba(57, 29, 43, .18); padding: 14px 18px; color: #71243f; font-size: .9rem; font-weight: 650; line-height: 1.4; }
.pdp-look .pdp-icon-remove { color: #6e625b; }
.pdp-look .pdp-look-messages { grid-column: 1 / -1; color: #716761; font-size: .85rem; }
.pdp-look .pdp-look-messages[hidden], .pdp-look .pdp-look-messages [hidden] { display: none; }
.pdp-look .pdp-primary-cta { display: flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; border: 1px solid #71243f; border-radius: 10px; background: #71243f; padding: .65rem 1rem; color: #fff; font: inherit; font-size: .9rem; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; }
.pdp-look .pdp-primary-cta:hover:not(:disabled) { background: #4c172b; }
.pdp-look .pdp-primary-cta:disabled { opacity: .55; cursor: not-allowed; }
.pdp-look .pdp-tryon-action { display: grid; gap: 8px; }
.pdp-look .pdp-tryon-feedback { color: #8b2e26; font-size: .85rem; line-height: 1.4; }
.pdp-look .pdp-tryon-feedback[hidden] { display: none; }
.pdp-look .pdp-product-actions { display: flex; flex-direction: column; gap: .5rem; }
.pdp-look .pdp-product-actions .pdp-primary-cta:first-child:not(:last-child) { background: #fff; color: #71243f; }
.pdp-look .pdp-product-actions .pdp-primary-cta:first-child:not(:last-child):hover:not(:disabled) { background: #f9eef2; }
@media (max-width: 720px) {
  .conv-card-body { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0 .85rem 1rem; }
  .conv-thumbs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; align-items: flex-start; }
  .conv-thumb-group { flex-direction: row; flex: none; align-items: flex-end; }
  .conv-thumb-group-title { position: absolute; top: 0; left: 0; }
  .conv-thumb-group { position: relative; padding-top: 20px; }
  .conv-thumb-group-ensemble { border-top: 0; border-left: 1px solid var(--rule); padding-left: .9rem; }
  .conv-thumb-group-ensemble .conv-thumb-group-title { left: .9rem; }
  .conv-thumb { flex-shrink: 0; width: 56px; height: 70px; }
  .conv-detail { min-height: auto; }
  .conv-card-header { padding-left: .85rem; padding-right: .85rem; }
  .conv-hero { width: 100%; }
  .pdp-look .pdp-look-header { column-gap: 8px; padding: 16px 6px 16px 14px; }
  .pdp-look .pdp-look-title { font-size: 1.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .conv-thumb, .conv-carousel-nav button { transition: none; }
}