/* Shared cross-sell card styles. Extracted 2026-06-23 from 15 byte-identical
   inline <style> blocks across product PDPs (dedup). Per-page cross-sell CARD
   HTML stays inline (recommendations vary by page). Outlier variants (remedium,
   bpc-157, reta pens, glow) keep their own inline CSS pending a visual-QA pass. */
      .cross-sell {
        max-width: 1160px;
        margin: 0 auto;
        padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 40px);
        border-top: 1px solid rgba(31,19,27,0.08);
      }
      .cross-sell__eyebrow {
        font-family: var(--mono, 'DM Mono', monospace);
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--pink);
        margin: 0 0 10px;
      }
      .cross-sell__title {
        font-family: var(--serif, 'Cormorant Garamond', serif);
        font-size: clamp(28px, 4vw, 40px);
        font-weight: 400;
        color: #1f1720;
        line-height: 1.1;
        margin: 0 0 6px;
      }
      .cross-sell__sub {
        font-family: var(--sans, 'Outfit', sans-serif);
        font-size: 15px;
        color: #625460;
        line-height: 1.6;
        max-width: 58ch;
        margin: 0 0 28px;
      }
      .cross-sell__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
      }
      .cross-sell__card {
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border: 1px solid rgba(31,19,27,0.08);
        border-radius: 10px;
        overflow: hidden;
        text-decoration: none;
        color: inherit;
        transition: border-color .25s, transform .25s, box-shadow .25s;
      }
      .cross-sell__card:hover {
        border-color: color-mix(in srgb, var(--pink) 45%, transparent);
        transform: translateY(-3px);
        box-shadow: 0 14px 36px color-mix(in srgb, var(--pink) 12%, transparent);
      }
      .cross-sell__img-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px 24px;
        background: linear-gradient(180deg, #fcf1f5 0%, #ffffff 100%);
        border-bottom: 1px solid rgba(31,19,27,0.08);
        min-height: 180px;
      }
      .cross-sell__img {
        width: 130px;
        height: 130px;
        object-fit: contain;
        transition: transform .3s;
      }
      .cross-sell__card:hover .cross-sell__img { transform: scale(1.05); }
      .cross-sell__body {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 20px 22px 22px;
        gap: 10px;
      }
      .cross-sell__name {
        font-family: var(--sans, 'Outfit', sans-serif);
        font-size: 19px;
        font-weight: 500;
        color: #1f1720;
        margin: 0;
        line-height: 1.25;
      }
      .cross-sell__spec {
        font-family: var(--sans, 'Outfit', sans-serif);
        font-size: 13px;
        color: #625460;
        line-height: 1.55;
        margin: 0;
      }
      .cross-sell__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: auto;
        padding-top: 14px;
        border-top: 1px solid rgba(31,19,27,0.08);
      }
      .cross-sell__link {
        font-family: var(--mono, 'DM Mono', monospace);
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: #fff;
        background: var(--pink);
        min-height: 36px;
        padding: 0 14px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        transition: background .2s, transform .2s;
      }
      .cross-sell__card:hover .cross-sell__link {
        background: var(--pink);
        transform: translateX(2px);
      }
      @media (max-width: 600px) {
        .cross-sell__grid { grid-template-columns: 1fr; }
        .cross-sell__img-wrap { min-height: 150px; padding: 22px 18px; }
        .cross-sell__img { width: 110px; height: 110px; }
      }
/* recon-bridge: prominent calculator link (2026-06-10) */
.recon-bridge { width: min(1220px, calc(100vw - 48px)); margin: 26px auto 0; }
.recon-bridge__card { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 20px 24px; background: #fffafc; border: 1px solid rgba(219,38,108,0.22); border-radius: 18px; }
.recon-bridge__kicker { color: var(--pink-text, #b91d5b); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.recon-bridge__text { margin: 8px 0 0; line-height: 1.55; max-width: 560px; color: #1f1720; }
.recon-bridge__cta { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; border-radius: 999px; background: #db266c; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.recon-bridge__cta:hover { background: #c01f5c; }
@media (max-width: 720px) { .recon-bridge__card { flex-direction: column; align-items: stretch; } .recon-bridge__cta { justify-content: center; white-space: normal; text-align: center; } }