/* _content/ProcapsMainSite/Components/Elements/AccountFlyout.razor.rz.scp.css */
/* ======================================================
   Account Flyout — scoped styles
   Shown after login. Matches LoginFlyout chrome for a seamless feel.
   ====================================================== */

.af-inner[b-iyuw9ayelx] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #fff;
    font-family: Inter, sans-serif;
    color: #003b3c;
    outline: none;
}

/* Header — user info (left) + close X (right) */
.af-header[b-iyuw9ayelx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 32px;
    min-height: 72px;
    box-sizing: border-box;
}

.af-close[b-iyuw9ayelx] {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    transition: background 0.15s ease;
}

.af-close:hover[b-iyuw9ayelx] {
    background: #f3f4f6;
}

/* ---- User info block (lives inside header, top-left) ---- */
.af-user[b-iyuw9ayelx] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.af-avatar[b-iyuw9ayelx] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ebfafa;
    color: #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.af-user-info[b-iyuw9ayelx] {
    flex: 1;
    min-width: 0;
}

.af-email[b-iyuw9ayelx] {
    font-size: 14px;
    font-weight: 500;
    color: #003b3c;
    margin: 0 0 2px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.af-view-profile[b-iyuw9ayelx] {
    font-size: 13px;
    color: #009296;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease;
    line-height: 1.2;
}

.af-view-profile:hover[b-iyuw9ayelx] {
    color: #006366;
}

/* ---- Nav list ---- */
.af-nav[b-iyuw9ayelx] {
    padding: 8px 32px 24px;
    animation: af-fade-in-b-iyuw9ayelx 260ms cubic-bezier(0.22, 0.61, 0.36, 1) 40ms both;
}

.af-nav-list[b-iyuw9ayelx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.af-nav-link[b-iyuw9ayelx] {
    display: block;
    width: 100%;
    padding: 2px 0;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    color: #003b3c;
    cursor: pointer;
    transition: color 0.15s ease;
}

.af-nav-link:hover[b-iyuw9ayelx],
.af-nav-link:focus-visible[b-iyuw9ayelx] {
    color: #009296;
    outline: none;
}

/* ---- Cards ---- */
.af-cards[b-iyuw9ayelx] {
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: af-fade-in-b-iyuw9ayelx 260ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms both;
}

.af-card[b-iyuw9ayelx] {
    background: #fff;
    border: 1px solid #d9e2e2;
    border-radius: 12px;
    padding: 20px;
}

.af-card-label[b-iyuw9ayelx] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #4a6a6b;
    margin: 0 0 12px;
}

.af-muted[b-iyuw9ayelx] {
    font-size: 14px;
    color: #4a6a6b;
    margin: 0;
}

/* Order layout within card */
.af-order[b-iyuw9ayelx] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.af-order-images[b-iyuw9ayelx] {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.af-img-layer[b-iyuw9ayelx] {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    border: 2px solid #fff;
    overflow: hidden;
    background: #f3f6f6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.af-img-layer img[b-iyuw9ayelx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.af-img-layer-1[b-iyuw9ayelx] { left: 0;    top: 0;    z-index: 3; }
.af-img-layer-2[b-iyuw9ayelx] { left: 6px;  top: 6px;  z-index: 2; }
.af-img-layer-3[b-iyuw9ayelx] { left: 12px; top: 12px; z-index: 1; }

/* Autoship: single product image (not stacked) */
.af-autoship-img[b-iyuw9ayelx] {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f6f6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.af-autoship-img img[b-iyuw9ayelx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.af-order-info[b-iyuw9ayelx] {
    flex: 1;
    min-width: 0;
}

.af-order-title[b-iyuw9ayelx] {
    font-size: 13px;
    font-weight: 500;
    color: #003b3c;
    margin: 0 0 2px;
}

.af-order-sub[b-iyuw9ayelx] {
    font-size: 12px;
    color: #4a6a6b;
    margin: 0 0 6px;
}

.af-badge[b-iyuw9ayelx] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: #e0f7f8;
    color: #009296;
    text-transform: capitalize;
}

.af-order-total[b-iyuw9ayelx] {
    font-size: 14px;
    font-weight: 500;
    color: #003b3c;
    margin: 0;
    white-space: nowrap;
}

/* Card actions */
.af-card-actions[b-iyuw9ayelx] {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #d9e2e2;
}

.af-btn[b-iyuw9ayelx] {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.af-btn-outline[b-iyuw9ayelx] {
    background: transparent;
    color: #003b3c;
    border: 1px solid #d9e2e2;
}

.af-btn-outline:hover[b-iyuw9ayelx] {
    border-color: #009296;
    color: #009296;
}

.af-btn-filled[b-iyuw9ayelx] {
    background: #009296;
    border: 1px solid #009296;
    color: #fff;
}

.af-btn-filled:hover[b-iyuw9ayelx] {
    background: #fff;
    color: #009296;
}

/* ---- Footer ---- */
.af-footer[b-iyuw9ayelx] {
    margin-top: auto;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.af-logout[b-iyuw9ayelx] {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid #009296;
    color: #009296;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.af-logout:hover[b-iyuw9ayelx] {
    background: #009296;
    color: #fff;
}

.af-help[b-iyuw9ayelx] {
    font-size: 13px;
    color: #4a6a6b;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.af-help-link[b-iyuw9ayelx] {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #009296;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    vertical-align: baseline;
    line-height: inherit;
}

.af-help-link:hover[b-iyuw9ayelx] {
    color: #006366;
}

/* ---- Animations ---- */
@keyframes af-fade-in-b-iyuw9ayelx {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Mobile ---- */
@media (max-width: 599px) {
    .af-header[b-iyuw9ayelx] { padding: 16px 20px; }
    .af-nav[b-iyuw9ayelx] { padding: 8px 20px 24px; }
    .af-cards[b-iyuw9ayelx] { padding: 0 20px; }
    .af-footer[b-iyuw9ayelx] { padding: 32px 20px; }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .af-nav[b-iyuw9ayelx],
    .af-cards[b-iyuw9ayelx] {
        animation: none;
    }
}
/* _content/ProcapsMainSite/Components/Elements/CollectionHeader.razor.rz.scp.css */
/* ======================================================
   Collection Header — scoped
   Used across: individual collection pages, Specials, Health Issue,
   Body Function, Body Part, Product Category, etc.
   Breakpoints: ≤959 mobile | 960-1279 tablet | 1280-1599 lg | 1600+ xl
   ====================================================== */

.ch[b-3cydvruxt2] {
    background: #F6F2EC;
    width: 100%;
}

.ch-inner[b-3cydvruxt2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

/* ---- Text side ---- */
.ch-text[b-3cydvruxt2] {
    padding: 60px 40px;
}

.ch-title[b-3cydvruxt2] {
    font-family: 'STIX Two Text', serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #003b3c;
    margin: 0 0 16px;
    text-transform: capitalize;
}

.ch-subtitle[b-3cydvruxt2] {
    font-family: Inter, sans-serif;
    font-size: 20px;
    line-height: 1.5;
    color: #003b3c;
    margin: 0;
    max-width: 640px;
}

/* ---- Image side — reserve space via aspect-ratio to prevent layout shift ---- */
.ch-image-wrap[b-3cydvruxt2] {
    background-color: #F6F2EC;
    aspect-ratio: 1440 / 708;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ch-image[b-3cydvruxt2] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ======================================================
   Lg: 1280–1599px — scaled-down type
   ====================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
    .ch-title[b-3cydvruxt2] { font-size: 54px; }
    .ch-subtitle[b-3cydvruxt2] { font-size: 18px; }
    .ch-text[b-3cydvruxt2] { padding: 48px 40px; }
}

/* ======================================================
   Tablet: 960–1279px — tighter type, still side-by-side
   ====================================================== */
@media (min-width: 960px) and (max-width: 1279px) {
    .ch-title[b-3cydvruxt2] { font-size: 42px; }
    .ch-subtitle[b-3cydvruxt2] { font-size: 18px; }
    .ch-text[b-3cydvruxt2] { padding: 40px 40px; }
}

/* ======================================================
   Mobile: ≤959px — stacked (image top, text below)
   ====================================================== */
@media (max-width: 959px) {
    .ch[b-3cydvruxt2] {
        background: #fff;
    }

    .ch-inner[b-3cydvruxt2] {
        grid-template-columns: 1fr;
    }

    /* Image first on mobile. Aspect-ratio (1440/708) inherits from the desktop
       rule above — mobile uses the same banner asset, so the same aspect
       reserves the right loading-state shape. */
    .ch-image-wrap[b-3cydvruxt2] {
        order: 1;
        background-color: #F6F2EC;
    }

    /* Switch object-fit to cover on mobile — eliminates sub-pixel rounding
       gaps that contain produces between the image and the wrap edges. Since
       the image's aspect matches the wrap's aspect exactly, nothing is
       cropped — cover just fills edge-to-edge cleanly. */
    .ch-image[b-3cydvruxt2] {
        object-fit: cover;
    }

    .ch-text[b-3cydvruxt2] {
        order: 2;
        padding: 32px 20px;
        background: #fff;
    }

    .ch-title[b-3cydvruxt2] { font-size: 30px; margin: 0 0 12px; }
    .ch-subtitle[b-3cydvruxt2] { font-size: 16px; }
}
/* _content/ProcapsMainSite/Components/Elements/EmailContactDrawer.razor.rz.scp.css */
/* ======================================================
   Email Contact Drawer — scoped styles
   Slides in from the right when user clicks "Email us".
   ====================================================== */

.ecd-inner[b-jkvmq3cmbw] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #fff;
    font-family: Inter, sans-serif;
    color: #003b3c;
    outline: none;
}

/* ---- Header ---- */
/* No divider line — whitespace alone separates header from body for a cleaner,
   editorial feel. Bottom padding is intentionally tight so the subhead in the
   body sits close to the title, reading as one "title block".

   Padding aligned with AccountFlyout: 20px top + 32px horizontal (desktop),
   16px top + 20px horizontal (mobile, see media query at the bottom of this
   file) so the two right-side drawers read as siblings. */
.ecd-header[b-jkvmq3cmbw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* 32px horizontal matches the body's left/right padding so the
       title's left edge sits in the same column as the body content
       and the close X aligns with the body's right edge. Updated 2026-04-30
       across all right-side drawers — old 24px convention had the title
       outdent 8px, which read as misaligned. */
    padding: 20px 32px 8px;
    box-sizing: border-box;
}

.ecd-title[b-jkvmq3cmbw] {
    font-family: 'STIX Two Text', serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    /* Matches LoginFlyout's .lf-title — site-wide drawer STIX-title
       letter-spacing convention. */
    letter-spacing: -0.5px;
    color: #003b3c;
    margin: 0;
}

.ecd-close[b-jkvmq3cmbw] {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

@media (hover: hover) {
    .ecd-close:hover[b-jkvmq3cmbw] {
        background: #f3f4f6;
    }
}

/* ---- Body (the scrollable content area) ---- */
/* Top padding is tight so the subhead pulls close to the title above. The
   subhead's margin-bottom creates the breathing room before the form starts.
   Horizontal padding (32px desktop, 20px mobile) matches the header above
   and AccountFlyout's main content area for sibling parity. */
.ecd-body[b-jkvmq3cmbw] {
    padding: 12px 32px 32px;
    overflow-y: auto;
    flex: 1;
}

.ecd-subhead[b-jkvmq3cmbw] {
    font-size: 15px;
    line-height: 1.5;
    color: #406c6d;
    margin: 0 0 20px;
}

/* Two-up row (First name | Last name). Stacks on mobile with the same gap as
   the form, so vertical rhythm is identical to other field-to-field gaps.
   Side-by-side at 600px+ where the drawer expands to 480px. Horizontal gap is
   tighter (12px) since horizontal voids read as wider than vertical voids of
   the same size. Works cleanly because all MudTextFields use Margin="Margin.None"
   — the flex `gap` is the single source of truth for spacing. */
.ecd-row-2col[b-jkvmq3cmbw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 600px) {
    .ecd-row-2col[b-jkvmq3cmbw] {
        flex-direction: row;
        gap: 12px;
    }

    .ecd-row-2col > *[b-jkvmq3cmbw] {
        flex: 1;
        min-width: 0;
    }
}

/* ---- Form ---- */
/* Gap value is 10px but the visual field-to-field measurement comes out to
   ~20px because MudBlazor reserves ~10px inside each .mud-input-control for
   the helper-text container (kept even on fields without HelperText, so all
   fields are the same height). Tune this number, not the visual target. */
.ecd-form[b-jkvmq3cmbw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- Action buttons (used in form footer + success state) ---- */
.ecd-actions[b-jkvmq3cmbw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 18px;
}

@media (min-width: 480px) {
    .ecd-actions[b-jkvmq3cmbw] {
        flex-direction: row;
    }
}

.ecd-btn[b-jkvmq3cmbw] {
    flex: 1;
    border-radius: 9999px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 16px;
    padding: 12px 28px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.ecd-btn:disabled[b-jkvmq3cmbw] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ecd-btn-filled[b-jkvmq3cmbw] {
    background-color: #009296;
    color: #fff;
    border-color: #009296;
}

@media (hover: hover) {
    .ecd-btn-filled:not(:disabled):hover[b-jkvmq3cmbw] {
        background-color: #00b4ae;
        border-color: #00b4ae;
    }
}

.ecd-btn-outline[b-jkvmq3cmbw] {
    background-color: transparent;
    color: #003b3c;
    border-color: #003b3c;
}

@media (hover: hover) {
    .ecd-btn-outline:not(:disabled):hover[b-jkvmq3cmbw] {
        background-color: rgba(0, 59, 60, 0.05);
    }
}

/* ---- Error banner (above form during error state) ---- */
.ecd-error-banner[b-jkvmq3cmbw] {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* ---- Success state ---- */
/* Generous padding gives the success moment its own breathing room — feels
   like a confirmation rather than a transition. */
.ecd-success[b-jkvmq3cmbw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
}

.ecd-success-icon[b-jkvmq3cmbw] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: #ebfafa;
    color: #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.ecd-success-title[b-jkvmq3cmbw] {
    font-family: 'STIX Two Text', serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.5px;
    color: #003b3c;
    margin: 0 0 8px;
}

.ecd-success-text[b-jkvmq3cmbw] {
    font-size: 15px;
    line-height: 1.6;
    color: #406c6d;
    margin: 0 0 40px;
    max-width: 320px;
}

.ecd-success .ecd-actions[b-jkvmq3cmbw] {
    width: 100%;
}

/* ---- Mobile ----
   Horizontal padding tightens to 20px to match AccountFlyout's mobile rule.
   Header top reduces too so the title block doesn't dominate small screens. */
@media (max-width: 599px) {
    .ecd-header[b-jkvmq3cmbw] { padding: 16px 20px 8px; }
    .ecd-body[b-jkvmq3cmbw]   { padding: 12px 20px 32px; }
}
/* _content/ProcapsMainSite/Components/Elements/LiteYouTubeEmbed.razor.rz.scp.css */
/* Lite YouTube embed — fills its parent container.

   Visual contract:
   - .lyt fills the parent (parent owns aspect-ratio + border-radius)
   - Black background prevents flash of empty/cream while poster loads
   - .lyt-trigger is a real <button> for keyboard / screen-reader support
   - Whole image is the click target — button is the *visual cue*, not
     the only tappable area. User can tap anywhere on the poster.
   - .lyt-play sits in the BOTTOM-LEFT corner so it doesn't cover
     centered title text or top-anchored brand marks on the cover frame
   - Solid-white circle + drop-shadow on the SVG handles contrast on
     any poster (dark cover: white pops; light cover: shadow grounds it).
     No tint overlay over the cover image itself — preserves the
     original cover composition and color exactly as designed.
   - .lyt-iframe replaces the trigger after activation, fills 100% */

.lyt[b-668p2vrdg0] {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
}

.lyt-trigger[b-668p2vrdg0] {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: block;
    position: relative;
    background-color: #000;
    -webkit-tap-highlight-color: transparent;
}

.lyt-poster[b-668p2vrdg0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.lyt-trigger:hover .lyt-poster[b-668p2vrdg0] {
    transform: scale(1.015);
}

.lyt-play[b-668p2vrdg0] {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 56px;
    height: 56px;
    pointer-events: none;
    transition: transform 0.2s ease;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.35));
}

.lyt-trigger:hover .lyt-play[b-668p2vrdg0],
.lyt-trigger:focus-visible .lyt-play[b-668p2vrdg0] {
    transform: scale(1.08);
}

.lyt-trigger:focus[b-668p2vrdg0] { outline: none; }
.lyt-trigger:focus-visible[b-668p2vrdg0] {
    outline: 2px solid #009296;
    outline-offset: 4px;
}

.lyt-iframe[b-668p2vrdg0] {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (min-width: 768px) {
    .lyt-play[b-668p2vrdg0] {
        bottom: 24px;
        left: 24px;
        width: 64px;
        height: 64px;
    }
}

@media (min-width: 1280px) {
    .lyt-play[b-668p2vrdg0] {
        bottom: 28px;
        left: 28px;
        width: 72px;
        height: 72px;
    }
}
/* _content/ProcapsMainSite/Components/Elements/LoginFlyout.razor.rz.scp.css */
/* ======================================================
   Login Flyout — scoped styles
   Two-step passwordless flow: email → verification code → redirect
   ====================================================== */

/* (Drawer width rules live in the inline <style> block below — MudDrawer
   is portaled outside scoped CSS reach, so they need to be global.) */

/* Drawer inner layout */
.lf-inner[b-igh0sme6pq] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #fff;
    font-family: Inter, sans-serif;
    color: #003b3c;
}

/* ---- Header (back + close) ---- */
.lf-header[b-igh0sme6pq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    min-height: 72px;
    box-sizing: border-box;
}

.lf-header-spacer[b-igh0sme6pq] {
    width: 32px;
    height: 32px;
    display: inline-block;
}

.lf-close[b-igh0sme6pq] {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    transition: background 0.15s ease;
}

.lf-close:hover[b-igh0sme6pq] {
    background: #f3f4f6;
}

/* ---- Step body ---- */
.lf-step[b-igh0sme6pq] {
    padding: 40px 32px 32px;
    animation: lf-step-in-b-igh0sme6pq 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes lf-step-in-b-igh0sme6pq {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Back button — lives in the header, left side */
.lf-back[b-igh0sme6pq] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ebfafa;
    color: #009296;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.18s ease;
}

.lf-back:hover[b-igh0sme6pq] {
    background: #d4f1f2;
}

/* ---- Typography ---- */
.lf-title[b-igh0sme6pq] {
    font-family: "STIX Two Text", serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #003b3c;
    margin: 0 0 12px;
}

.lf-sub[b-igh0sme6pq] {
    font-size: 15px;
    line-height: 1.5;
    color: #4a6a6b;
    margin: 0 0 28px;
}

.lf-sub strong[b-igh0sme6pq] {
    color: #003b3c;
    font-weight: 500;
}

/* ---- Form ---- */
.lf-field[b-igh0sme6pq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.lf-label[b-igh0sme6pq] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #4a6a6b;
}

.lf-input[b-igh0sme6pq] {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #D9E2E2;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    color: #003b3c;
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.lf-input:focus[b-igh0sme6pq] {
    border-color: #009296;
    box-shadow: 0 0 0 3px rgba(0, 146, 150, 0.12);
}

.lf-input--code[b-igh0sme6pq] {
    font-size: 22px;
    letter-spacing: 8px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---- Inline error ---- */
.lf-error[b-igh0sme6pq] {
    font-size: 14px;
    color: #c0392b;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #fdecea;
    border-radius: 8px;
    animation: lf-step-in-b-igh0sme6pq 200ms ease both;
}

/* ---- Primary CTA ---- */
.lf-btn[b-igh0sme6pq] {
    width: 100%;
    height: 52px;
    border: 1px solid #009296;
    border-radius: 999px;
    background: #009296;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lf-btn:hover:not(:disabled)[b-igh0sme6pq] {
    background: #fff;
    color: #009296;
}

.lf-btn:disabled[b-igh0sme6pq] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Spinner inside button */
.lf-btn-spinner[b-igh0sme6pq] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: lf-spin-b-igh0sme6pq 0.8s linear infinite;
}

@keyframes lf-spin-b-igh0sme6pq {
    to { transform: rotate(360deg); }
}

/* ---- Resend link ---- */
.lf-resend[b-igh0sme6pq] {
    display: block;
    width: 100%;
    margin-top: 18px;
    background: none;
    border: none;
    color: #009296;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    padding: 8px;
    transition: color 0.15s ease;
}

.lf-resend:hover:not(:disabled)[b-igh0sme6pq] {
    color: #006366;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lf-resend:disabled[b-igh0sme6pq] {
    color: #9ca3a3;
    cursor: not-allowed;
}

/* ---- Success state ---- */
.lf-success[b-igh0sme6pq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 32px;
    gap: 20px;
}

.lf-success-spinner[b-igh0sme6pq] {
    width: 36px;
    height: 36px;
    border: 3px solid #ebfafa;
    border-top-color: #009296;
    border-radius: 50%;
    animation: lf-spin-b-igh0sme6pq 0.8s linear infinite;
}

.lf-success-text[b-igh0sme6pq] {
    font-size: 17px;
    color: #003b3c;
    margin: 0;
}

/* ---- Mobile ---- */
@media (max-width: 599px) {
    .lf-header[b-igh0sme6pq] { padding: 16px 20px; }
    .lf-step[b-igh0sme6pq] { padding: 32px 20px 24px; }
    .lf-title[b-igh0sme6pq] { font-size: 28px; }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .lf-step[b-igh0sme6pq],
    .lf-error[b-igh0sme6pq],
    .lf-btn-spinner[b-igh0sme6pq],
    .lf-success-spinner[b-igh0sme6pq] {
        animation: none;
    }
}
/* _content/ProcapsMainSite/Components/Elements/MainFlyoutCart.razor.rz.scp.css */
/* ======================================================
   Main Flyout Cart — scoped styles

   Slides in from the right when user clicks the cart icon
   (or when external code fires DrawerUIService.OnOpen).
   Mirrors the AccountFlyout + EmailContactDrawer chrome so
   the right-side drawer family reads as one designed system.
   ====================================================== */

/* ---- Trigger (cart icon in nav bar) ----
   The button also carries the .rightIcons class (defined globally in
   MainHeaderMenu's <style>) so its margin matches the sibling icons
   (search, heart, login). The siblings are <img> elements which align
   to the text baseline by default; a <button> wrapper has its own
   baseline at the bottom of its content box, so we explicitly match
   the img alignment with vertical-align: middle + font-size/line-height
   reset to neutralize any inherited text spacing. */
.mfc-trigger[b-q4msg39uju] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    /* The button carries the global .rightIcons class for top-margin parity
       with sibling icons (search/heart/login). But cart is the LAST icon in
       the row and needs to sit flush at the right edge — override the right
       margin here. Scoped CSS specificity (0,0,2,0) beats the global
       .rightIcons rule (0,0,1,0) across both desktop and mobile rules. */
    margin-right: 0;
    cursor: pointer;
    /* Explicit 26×26 size + box-sizing matches the sibling <img> elements
       (which are also 26×26 via inline style). Same dimensions = same
       baseline-aligned position next to other right-side icons. */
    width: 26px;
    height: 26px;
    box-sizing: content-box;
    display: inline-block;
    vertical-align: baseline;
    font-size: 0;
    line-height: 0;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
    /* Anchor for the count badge (positioned absolute relative to button) */
    position: relative;
}

.mfc-trigger-icon[b-q4msg39uju] {
    width: 26px;
    height: 26px;
    display: block;
    vertical-align: middle;
}

.mfc-trigger:focus-visible[b-q4msg39uju] {
    outline: 2px solid #009296;
    outline-offset: 4px;
}

/* Cart count badge — sits at the top-right of the cart icon, brand teal
   filled circle with white text. Hidden when cart is empty (Razor side). */
.mfc-trigger-badge[b-q4msg39uju] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #009296;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
    /* Subtle white ring lifts the badge off the teal nav background so it
       reads cleanly when nav itself is brand teal (homepage, collection
       pages, etc). */
    box-shadow: 0 0 0 1.5px #fff;
}

/* ======================================================
   Drawer inner container
   ====================================================== */
/* MudDrawer portals its contents but the [b-hash] attribute travels
   with the markup, so scoped CSS still reaches everything inside
   .mfc-inner. The drawer paper itself (width override) is global —
   see the <style> block in the .razor file. */
.mfc-inner[b-q4msg39uju] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #fff;
    font-family: Inter, sans-serif;
    color: #003b3c;
    outline: none;
}

/* ======================================================
   Header — title + close X. No divider line; whitespace alone
   separates the header from the body, matching AccountFlyout +
   EmailContactDrawer (drawer-conventions doc).
   ====================================================== */
.mfc-header[b-q4msg39uju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Horizontal padding matches the body (32px desktop / 20px mobile)
       so the title's left edge sits in the same column as everything
       below it. Vertical padding preserves the drawer-family contract
       (20 top / 8 bottom = breathing room before the body content). */
    padding: 20px 32px 8px;
    box-sizing: border-box;
}

@media (max-width: 599px) {
    .mfc-header[b-q4msg39uju] { padding: 20px 20px 8px; }
}

.mfc-title[b-q4msg39uju] {
    font-family: 'STIX Two Text', serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    /* Matches LoginFlyout's .lf-title — site-wide drawer STIX-title
       letter-spacing convention. Slightly tighter than the font's default
       reads more polished at the 24–32px size range we use. */
    letter-spacing: -0.5px;
    color: #003b3c;
    margin: 0;
}

/* Right-side group in the header: the "View full cart" escape link
   and the X close button. 12px gap keeps the link clear of the X tap
   target without feeling disconnected from it. */
.mfc-header-actions[b-q4msg39uju] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Quiet escape-hatch link to the full cart page. Sized down so the
   title still owns the header's visual weight, and so it doesn't
   visually compete with the CHECKOUT button in the footer. */
.mfc-header-link[b-q4msg39uju] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 2px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #009296;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

@media (hover: hover) {
    .mfc-header-link:hover[b-q4msg39uju] { color: #007e82; }
}

.mfc-header-link:focus-visible[b-q4msg39uju] {
    outline: 2px solid #009296;
    outline-offset: 2px;
    border-radius: 2px;
}

/* 36×36 circle, hover #f3f4f6, sits at the right edge of the header.
   Matches the X-button position across all right-side drawers. */
.mfc-close[b-q4msg39uju] {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

@media (hover: hover) {
    .mfc-close:hover[b-q4msg39uju] { background: #f3f4f6; }
}

.mfc-close:focus-visible[b-q4msg39uju] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

/* ======================================================
   Body — scrollable list of items. Padding mirrors EmailContactDrawer
   (32px desktop / 20px mobile horizontal) for sibling consistency.
   ====================================================== */
.mfc-body[b-q4msg39uju] {
    padding: 12px 32px 0;
    overflow-y: auto;
    flex: 1;
}

@media (max-width: 599px) {
    .mfc-body[b-q4msg39uju] { padding: 12px 20px 0; }
}

/* ======================================================
   Free shipping bar — same visual contract as the cart page's
   .cp-shipping-bar: truck icon + text in a flex row, optional
   progress meter below. In the success state (FreeShippingMet),
   the meter is omitted in markup and the bar takes a soft teal
   background to confirm the unlock cleanly.
   ====================================================== */
.mfc-shipping-bar[b-q4msg39uju] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #F5F9F9;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Success state shares the same neutral-teal background as the in-progress
   state — the unlock is signaled via text color (teal) + progress-bar removal,
   not a background color shift. Keeps the bar reading as one consistent
   surface across both states. */
.mfc-shipping-bar-success[b-q4msg39uju] {
    background: #F5F9F9;
}

.mfc-shipping-bar-row[b-q4msg39uju] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Truck icon — same SVG + nested wrapper structure as the cart page
   so the icon scales/positions identically across both views. */
.mfc-shipping-bar-icon-wrap[b-q4msg39uju] {
    overflow: clip;
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.mfc-shipping-bar-icon-mid[b-q4msg39uju] {
    position: absolute;
    inset: 10.42% 2.08% 6.25% 6.25%;
}

.mfc-shipping-bar-icon-inner[b-q4msg39uju] {
    position: absolute;
    inset: -4.5% -4.09%;
}

.mfc-shipping-bar-icon-svg[b-q4msg39uju] {
    display: block;
    width: 100%;
    height: 100%;
}

.mfc-shipping-text[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #003b3c;
    margin: 0;
}

.mfc-shipping-bar-success .mfc-shipping-text[b-q4msg39uju] {
    color: #009296;
}

.mfc-shipping-text-strong[b-q4msg39uju] {
    font-weight: 500;
}

/* Progress meter — track is a soft teal tint, fill is brand teal.
   Width is set inline from the computed FreeShippingProgress (0-100).
   Smooth transition gives the bar a satisfying fill when items are
   added or removed. */
.mfc-shipping-bar-track[b-q4msg39uju] {
    height: 6px;
    background: rgba(0, 146, 150, 0.15);
    border-radius: 999px;
    overflow: hidden;
}

.mfc-shipping-bar-fill[b-q4msg39uju] {
    height: 100%;
    background: #009296;
    border-radius: 999px;
    transition: width 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .mfc-shipping-bar-fill[b-q4msg39uju] {
        transition: none;
    }
}

/* ======================================================
   Item card — flex row replacing the old float-based layout
   that was clipping the line price at the right edge.
   ====================================================== */
/* Enter/leave/sibling-shift transitions are handled by auto-animate
   (see /js/cartAutoAnimate.js, attached in MainFlyoutCart.OnAfterRenderAsync).
   Keep this rule scoped to layout only — no transitions here. */
.mfc-item[b-q4msg39uju] {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 146, 150, 0.12);
}

.mfc-item:last-child[b-q4msg39uju] {
    border-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .mfc-item[b-q4msg39uju] {
        transition: none;
    }
}

.mfc-item-image[b-q4msg39uju] {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    object-fit: contain;
    background: #F6F2EC;
    border-radius: 12px;
}

.mfc-item-content[b-q4msg39uju] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Item row — mirrors Cart.razor (.cp-item-row / .cp-item-info / .cp-item-price-col). */
.mfc-item-row[b-q4msg39uju] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.mfc-item-info[b-q4msg39uju] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mfc-item-name[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #003b3c;
    line-height: 1.4;
    margin: 0;
}

.mfc-item-variant[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #406c6d;
    margin: 0;
}

/* Per-item promo pill — same treatment as Cart.razor (.cp-promo-pill). */
.mfc-promo-pill[b-q4msg39uju] {
    background: #D84315;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.mfc-promo-pill-text[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin: 0;
}

.mfc-item-attrs[b-q4msg39uju] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.mfc-attr-row[b-q4msg39uju] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mfc-attr-text[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 13px;
}

.mfc-attr-text-autoship[b-q4msg39uju] { color: #009296; }

.mfc-attr-text-flexpay[b-q4msg39uju] { color: #906afe; }

.mfc-flexpay-block[b-q4msg39uju] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mfc-item-price-col[b-q4msg39uju] {
    text-align: right;
    flex-shrink: 0;
}

.mfc-item-price-discounted[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: #D84315;
    margin: 0;
}

.mfc-item-price-original[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #406c6d;
    text-decoration: line-through;
    margin: 4px 0 0;
}

.mfc-item-savings[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #009296;
    font-weight: 500;
    margin: 4px 0 0;
}

.mfc-item-price[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: #003b3c;
    margin: 0;
    flex-shrink: 0;
}

.mfc-pill[b-q4msg39uju] {
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.mfc-pill-autoship[b-q4msg39uju] { background-color: #009296; }
.mfc-pill-flexpay[b-q4msg39uju]  { background-color: #906afe; }

.mfc-item-flexpay-note[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #406c6d;
    line-height: 1.4;
    margin: 2px 0 0;
}

/* ======================================================
   Item actions — qty stepper + delete
   ====================================================== */
.mfc-item-actions[b-q4msg39uju] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.mfc-qty-stepper[b-q4msg39uju] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Qty stepper — same visual treatment as the cart page (dark teal
   border, dark icon, teal-pop on hover), but kept at a smaller 28×28
   size because the drawer is the dense quick-view; cart page is
   the spacious deliberation moment. Same family, drawer-appropriate
   proportions. */
.mfc-qty-btn[b-q4msg39uju] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #003B3C;
    background: transparent;
    color: #003b3c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.mfc-qty-btn:disabled[b-q4msg39uju] {
    border-color: #C2CFCF;
    color: #C2CFCF;
    cursor: not-allowed;
}

@media (hover: hover) {
    .mfc-qty-btn:not(:disabled):hover[b-q4msg39uju] {
        border-color: #009296;
        color: #009296;
        background-color: rgba(0, 146, 150, 0.06);
    }
}

.mfc-qty-btn:focus-visible[b-q4msg39uju] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

.mfc-qty-value[b-q4msg39uju] {
    min-width: 24px;
    text-align: center;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #003b3c;
}

/* Free-typing qty input. Resets browser defaults so it matches the
   .mfc-qty-value visual cell, then hides the native number spinner
   (we have our own +/- buttons). On focus, a soft teal underline
   signals editability without a heavy outlined-textfield treatment. */
.mfc-qty-input[b-q4msg39uju] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 36px;
    text-align: center;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #003b3c;
    box-shadow: 0 1px 0 transparent;
    transition: box-shadow 0.15s ease;
    cursor: text;
}

.mfc-qty-input[b-q4msg39uju]::-webkit-outer-spin-button,
.mfc-qty-input[b-q4msg39uju]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mfc-qty-input:focus[b-q4msg39uju] {
    outline: none;
    box-shadow: 0 1px 0 #009296;
}

.mfc-qty-input:disabled[b-q4msg39uju] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .mfc-qty-input[b-q4msg39uju] {
        transition: none;
    }
}

/* Trash matches the cart page — muted grey by default so it sits as a
   secondary action next to the more prominent qty stepper, then pops
   teal on hover to confirm intent. */
.mfc-item-delete[b-q4msg39uju] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #406c6d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
    .mfc-item-delete:not(:disabled):hover[b-q4msg39uju] {
        color: #009296;
    }
}

.mfc-item-delete:disabled[b-q4msg39uju] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mfc-item-delete:focus-visible[b-q4msg39uju] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

/* ======================================================
   Empty state — generous padding gives the moment its own
   breathing room, mirrors EmailContactDrawer's success state.
   ====================================================== */
.mfc-empty[b-q4msg39uju] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 32px;
    gap: 16px;
}

.mfc-empty-title[b-q4msg39uju] {
    font-family: 'STIX Two Text', serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.5px;
    color: #003b3c;
    margin: 0;
}

.mfc-empty-text[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #406c6d;
    margin: 0 0 12px;
    max-width: 320px;
}

/* ======================================================
   Footer — pinned at bottom, totals + actions
   ====================================================== */
/* Subtle top divider keeps the totals visually separate from the
   scrolling cart items above. flex-shrink: 0 ensures the footer
   never collapses even if the body has many items. */
.mfc-footer[b-q4msg39uju] {
    border-top: 1px solid rgba(0, 146, 150, 0.15);
    padding: 16px 32px 24px;
    background: #fff;
    box-sizing: border-box;
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .mfc-footer[b-q4msg39uju] { padding: 16px 20px 24px; }
}

.mfc-totals-row[b-q4msg39uju] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

/* Refined typography — 14px / 400 across the breakdown rows, matching
   the cart page's spec exactly. Calm, premium read instead of chunky. */
.mfc-totals-label[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #003b3c;
}

.mfc-totals-value[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #003b3c;
}

/* Final total — bigger via size, weight stays medium (500). Same spec
   as the cart page's .cp-totals-total. */
.mfc-totals-total .mfc-totals-label[b-q4msg39uju],
.mfc-totals-total .mfc-totals-value[b-q4msg39uju] {
    font-size: 18px;
    font-weight: 500;
}

/* Discount line takes the brand teal — frames the moment as a positive
   savings event rather than money being subtracted. Matches the cart
   page's full summary so the two views read with one consistent color
   language: teal = good things happening (free shipping, savings). */
.mfc-totals-discount .mfc-totals-label[b-q4msg39uju],
.mfc-totals-discount .mfc-totals-value[b-q4msg39uju] {
    color: #009296;
}

/* Small attribution note under the totals — explains where the
   Total Discount line came from so the savings doesn't read as a
   mystery deduction. Sits left-aligned, brand teal, slightly
   smaller than body copy. */
.mfc-discount-note[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #009296;
    margin-top: 4px;
}

.mfc-totals-order .mfc-totals-label[b-q4msg39uju],
.mfc-totals-order .mfc-totals-value[b-q4msg39uju] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #666;
    font-weight: 400;
}

/* ======================================================
   Action buttons — CHECKOUT (filled) + View full cart (link)
   ====================================================== */
.mfc-actions[b-q4msg39uju] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 12px;
}

.mfc-btn[b-q4msg39uju] {
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 14px 32px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.mfc-btn:disabled[b-q4msg39uju] {
    opacity: 0.6;
    cursor: not-allowed;
}

.mfc-btn-filled[b-q4msg39uju] {
    background-color: #009296;
    color: #fff;
    border-color: #009296;
    letter-spacing: 1.92px;
}

@media (hover: hover) {
    .mfc-btn-filled:not(:disabled):hover[b-q4msg39uju] {
        background-color: #fff;
        color: #009296;
    }
}

.mfc-btn-filled:focus-visible[b-q4msg39uju] {
    outline: 2px solid #003b3c;
    outline-offset: 4px;
}

.mfc-btn-link[b-q4msg39uju] {
    background: transparent;
    border: 0;
    color: #009296;
    text-decoration: underline;
    padding: 8px;
    font-weight: 500;
    font-size: 15px;
}

@media (hover: hover) {
    .mfc-btn-link:hover[b-q4msg39uju] { color: #007e82; }
}

.mfc-btn-link:focus-visible[b-q4msg39uju] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

/* ======================================================
   Reduced motion
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
    .mfc-close[b-q4msg39uju],
    .mfc-qty-btn[b-q4msg39uju],
    .mfc-item-delete[b-q4msg39uju],
    .mfc-btn[b-q4msg39uju],
    .mfc-btn-link[b-q4msg39uju] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Elements/MainFooter.razor.rz.scp.css */
/* ======================================================
   Main Footer — scoped styles
   Breakpoints: ≤959px mobile | 960-1279 tablet | 1280-1599 lg | 1600+ xl
   ====================================================== */

.site-footer[b-duhmnppl3v] {
    background: #009296;
    color: #fff;
    font-family: Inter, sans-serif;
}

.footer-inner[b-duhmnppl3v] {
    padding: 100px 40px 40px;
}

/* ---- Headline ---- */
.footer-headline[b-duhmnppl3v] {
    padding-bottom: 60px;
}

.footer-title[b-duhmnppl3v] {
    font-family: "STIX Two Text", serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.44px;
    margin: 0 0 60px;
    color: #fff;
}

.footer-title .accent[b-duhmnppl3v] {
    color: #48e1dc;
}

.footer-divider[b-duhmnppl3v] {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.28);
    margin: 0;
}

/* ---- Main grid: newsletter (wider) + 3 link columns ---- */
.footer-main[b-duhmnppl3v] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 40px 0;
}

.footer-col-title[b-duhmnppl3v] {
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 12px;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: default;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-col-title-text[b-duhmnppl3v] {
    flex: 1;
}

.footer-col-icon[b-duhmnppl3v] {
    display: none; /* hidden on desktop, shown on mobile */
}

.footer-newsletter-sub[b-duhmnppl3v] {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 16px;
    color: #fff;
    opacity: 0.9;
}

/* ---- Newsletter form (email input + submit button) ---- */
.footer-newsletter-form[b-duhmnppl3v] {
    display: flex;
    align-items: stretch;
    background: #fff;
    max-width: 480px;
    height: 56px;
}

.footer-email-input[b-duhmnppl3v] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 0 20px;
    background: transparent;
    color: #003B3C;
    font-family: Inter, sans-serif;
    font-size: 15px;
}

.footer-email-input[b-duhmnppl3v]::placeholder {
    color: #003B3C;
    opacity: 0.55;
}

.footer-submit-btn[b-duhmnppl3v] {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(0, 59, 60, 0.12);
    color: #009296;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.2s;
}

.footer-submit-btn:hover[b-duhmnppl3v] {
    color: #006366;
}

.footer-newsletter-success[b-duhmnppl3v] {
    font-size: 15px;
    color: #fff;
    margin: 0;
    padding: 16px 0;
    font-weight: 500;
}

/* ---- Link columns ---- */
.footer-col-list[b-duhmnppl3v] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-col-list a[b-duhmnppl3v] {
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: color 0.2s;
    cursor: pointer;
}

.footer-col-list a:hover[b-duhmnppl3v] {
    color: #48e1dc;
}

/* ---- Logo + legal (stacked, left-aligned) ---- */
.footer-bottom[b-duhmnppl3v] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 40px 0 0;
}

.footer-logo-link[b-duhmnppl3v] {
    display: inline-block;
    line-height: 0;
}

.footer-logo-link img[b-duhmnppl3v] {
    width: 100px;
    height: auto;
    display: block;
}

.footer-legal[b-duhmnppl3v] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 14px;
    color: #fff;
    opacity: 0.9;
}

.footer-legal a[b-duhmnppl3v] {
    color: #fff;
    text-decoration: underline;
}

.footer-legal a:hover[b-duhmnppl3v] {
    color: #48e1dc;
}

/* ---- FDA disclaimer (bordered box) ---- */
.footer-fda-wrap[b-duhmnppl3v] {
    padding: 0 40px 40px;
}

.footer-fda[b-duhmnppl3v] {
    border: 1px solid #fff;
    padding: 18px 20px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    line-height: 1.5;
    margin: 0;
}

/* ======================================================
   Lg: 1280-1599px — scaled type
   ====================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
    .footer-title[b-duhmnppl3v] { font-size: 54px; letter-spacing: -1.08px; }
}

/* ======================================================
   Tablet: 960-1279px — tighter grid + smaller type
   ====================================================== */
@media (min-width: 960px) and (max-width: 1279px) {
    .footer-inner[b-duhmnppl3v] { padding: 60px 40px 40px; }
    .footer-title[b-duhmnppl3v] { font-size: 42px; letter-spacing: -0.84px; margin-bottom: 32px; }
    .footer-main[b-duhmnppl3v] { gap: 24px; }
    .footer-col-title[b-duhmnppl3v] { font-size: 18px; }
    .footer-newsletter-sub[b-duhmnppl3v], .footer-col-list a[b-duhmnppl3v] { font-size: 14px; }
}

/* ======================================================
   Mobile: ≤959px — single column, accordions, 20px padding
   ====================================================== */
@media (max-width: 1279px) {
    .footer-inner[b-duhmnppl3v] { padding: 60px 20px 40px; }
    .footer-fda-wrap[b-duhmnppl3v] { padding: 0 20px 40px; }

    .footer-title[b-duhmnppl3v] {
        font-size: 38px;
        letter-spacing: -0.76px;
        margin-bottom: 60px;
    }
    .footer-headline[b-duhmnppl3v] { padding-bottom: 60px; }

    /* Stack: newsletter first, then link accordions */
    .footer-main[b-duhmnppl3v] {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    .footer-newsletter[b-duhmnppl3v] {
        padding-bottom: 60px;
    }

    /* Accordion columns */
    .footer-col[b-duhmnppl3v] {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }
    .footer-col:last-child[b-duhmnppl3v] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .footer-col .footer-col-title[b-duhmnppl3v] {
        padding: 20px 0;
        margin: 0;
        font-size: 18px;
        cursor: pointer;
    }

    .footer-col-icon[b-duhmnppl3v] {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
        margin-bottom: 4px;
    }

    .footer-col.is-open .footer-col-icon[b-duhmnppl3v] {
        transform: rotate(-135deg);
        margin-top: 4px;
        margin-bottom: 0;
    }

    .footer-col-list[b-duhmnppl3v] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
        padding: 0;
    }

    .footer-col.is-open .footer-col-list[b-duhmnppl3v] {
        max-height: 400px;
        padding: 0 0 20px;
    }

    /* Bottom row: stack on mobile */
    .footer-bottom[b-duhmnppl3v] {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding-top: 60px;
    }

    .footer-legal[b-duhmnppl3v] {
        font-size: 13px;
        gap: 12px 16px;
    }
    .footer-legal > span[b-duhmnppl3v] {
        flex-basis: 100%;
    }
}
/* _content/ProcapsMainSite/Components/Elements/MainMegaMenu.razor.rz.scp.css */
/* ======================================================
   Mega Menu — scoped styles
   Breakpoints: ≤959 mobile | 960-1279 tablet | 1280-1599 lg | 1600+ xl
   ====================================================== */

/* ---- Trigger button ---- */
.mm-trigger-wrap[b-x9ssxh0l8o] {
    display: inline-block;
}

.mm-trigger[b-x9ssxh0l8o] {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-family: Inter, sans-serif;
    letter-spacing: 1.6px;
    font-weight: 500;
    padding: 8px 16px;
    margin: 0;
    text-transform: uppercase;
    position: relative;
}

.mm-trigger[b-x9ssxh0l8o]::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}

.mm-trigger:hover[b-x9ssxh0l8o]::after,
.mm-trigger.is-open[b-x9ssxh0l8o]::after {
    transform: scaleX(1);
}

/* ---- Overlay (backdrop + panel) ---- */
.mm-overlay[b-x9ssxh0l8o] {
    position: fixed;
    top: var(--mm-top, 140px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.mm-overlay.is-open[b-x9ssxh0l8o] {
    opacity: 1;
    pointer-events: auto;
}

.mm-backdrop[b-x9ssxh0l8o] {
    position: absolute;
    inset: 0;
    background: rgba(0, 28, 28, 0.45);
    cursor: pointer;
}

/* ---- Panel ---- */
.mm-panel[b-x9ssxh0l8o] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Cap the panel at the overlay's height so it never extends past the
       viewport, but don't let the panel itself scroll. The right column
       (.mm-right) handles its own scrolling so the left nav stays pinned as
       a persistent anchor — users can switch categories without losing their
       scroll position. */
    max-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #003b3c;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-10px);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
    outline: none;
}

.mm-overlay.is-open .mm-panel[b-x9ssxh0l8o] {
    transform: translateY(0);
}

.mm-inner[b-x9ssxh0l8o] {
    flex: 1;                           /* fills the flex panel so children can cap at 100% */
    min-height: 0;                     /* lets grid children shrink and scroll internally */
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: minmax(0, 1fr); /* constrains row to container so descendants can scroll */
    gap: 48px;
    padding: 40px 40px 48px;
    box-sizing: border-box;
    position: relative;                /* anchors the centered scroll-cue chevron below */
}

/* Centered "more below" chevron: sits at the bottom of the menu panel,
   horizontally centered across the FULL panel width (not just the scroll
   area). Visibility is driven by whether any descendant .mm-cols has the
   `has-more-below` class — so the chevron and the fade appear in sync. */
.mm-inner[b-x9ssxh0l8o]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    height: 8px;
    background: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1L7 7L13 1' stroke='%23003b3c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 14px 8px no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
    z-index: 1;                        /* sits above the fade gradient */
}

.mm-inner:has(.mm-cols.has-more-below)[b-x9ssxh0l8o]::after {
    opacity: 1;
}

/* ======================================================
   LEFT: primary (categories) + secondary (ingredients etc.)
   ====================================================== */
.mm-left[b-x9ssxh0l8o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mm-left-secondary[b-x9ssxh0l8o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 4px;
}

/* ---- Primary category buttons (teal-tinted group) ---- */
.mm-left-primary[b-x9ssxh0l8o] {
    background: #ebfafa;
    border-radius: 12px;
    padding: 4px;
    display: flex;
    flex-direction: column;
}

.mm-primary[b-x9ssxh0l8o] {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 8px;
    color: #003b3c;
    font-family: Inter, sans-serif;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.mm-primary:hover[b-x9ssxh0l8o],
.mm-primary.is-active[b-x9ssxh0l8o] {
    background: #fff;
    color: #009296;
    box-shadow: 0 4px 16px rgba(0, 59, 60, 0.10);
}

.mm-primary-text[b-x9ssxh0l8o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}

.mm-primary-label[b-x9ssxh0l8o] {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
}

.mm-primary-desc[b-x9ssxh0l8o] {
    font-size: 13px;
    font-weight: 400;
    color: #406c6d;
    line-height: 1.3;
}

.mm-primary.is-active .mm-primary-desc[b-x9ssxh0l8o],
.mm-primary:hover .mm-primary-desc[b-x9ssxh0l8o] {
    color: #406c6d;
}

.mm-chev[b-x9ssxh0l8o] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mm-primary.is-active .mm-chev[b-x9ssxh0l8o],
.mm-primary:hover .mm-chev[b-x9ssxh0l8o] {
    transform: translateX(3px);
}

/* ---- Secondary items (plain white, with icons) ---- */
.mm-secondary[b-x9ssxh0l8o] {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #003b3c;
    transition: background 0.18s ease, color 0.18s ease;
}

.mm-secondary:hover[b-x9ssxh0l8o] {
    background: #ebfafa;
    color: #009296;
}

.mm-secondary-icon[b-x9ssxh0l8o] {
    width: 20px;
    height: 20px;
}

/* ======================================================
   RIGHT: link grid + promo tile
   ====================================================== */
.mm-right[b-x9ssxh0l8o] {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: minmax(0, 1fr); /* constrains row so .mm-cols can scroll within it */
    gap: 48px;
    align-items: start;
    min-width: 0;
    min-height: 0;
    /* The right half does NOT scroll — only .mm-cols (the sub-category list)
       does. That keeps the promo tile pinned at the top-right, matching the
       left nav's pinned behavior. */
}

.mm-cols[b-x9ssxh0l8o] {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 2px;
    align-content: start;
    padding-top: 4px;
    /* The scrollable area: fills the grid row height and scrolls internally
       when sub-categories exceed viewport height (e.g. Body Part at 1440×900).
       Left nav and promo tile both stay pinned while this scrolls. */
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Fade only — tied to the scroll area. Sticky pseudo pinned to the bottom
   of the scroll viewport, spanning both sub-category columns. Chevron is
   a separate pseudo on .mm-inner (below) so it can sit centered across
   the whole menu rather than within just the scroll region. */
.mm-cols[b-x9ssxh0l8o]::after {
    content: '';
    grid-column: 1 / -1;
    position: sticky;
    bottom: 0;
    margin-top: -48px;
    height: 48px;
    background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease;
}

.mm-cols.has-more-below[b-x9ssxh0l8o]::after {
    opacity: 1;
}

.mm-link[b-x9ssxh0l8o] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #0f3e56;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    transition: background 0.18s ease, color 0.18s ease;
}

.mm-link:hover[b-x9ssxh0l8o] {
    background: #ebfafa;
    color: #009296;
}

.mm-link-icon[b-x9ssxh0l8o] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.mm-link-icon--mud[b-x9ssxh0l8o] {
    padding: 3px;
    border-radius: 6px;
    background: #ebfafa;
    color: #009296;
    transition: background 0.18s ease, color 0.18s ease;
}

.mm-link:hover .mm-link-icon--mud[b-x9ssxh0l8o] {
    background: #009296;
    color: #fff;
}

/* ---- Promo tile ---- */
.mm-promo a[b-x9ssxh0l8o] {
    display: block;
    text-decoration: none;
    color: #003b3c;
}

.mm-promo-img[b-x9ssxh0l8o] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    margin-bottom: 12px;
}

.mm-promo-cta[b-x9ssxh0l8o] {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #009296;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mm-promo a:hover .mm-promo-cta[b-x9ssxh0l8o] {
    text-decoration-thickness: 2px;
}

/* ======================================================
   Lg: 1280-1599px — tighter promo
   ====================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
    .mm-right[b-x9ssxh0l8o] { grid-template-columns: 1fr 260px; gap: 32px; }
    .mm-inner[b-x9ssxh0l8o] { gap: 32px; padding: 36px 32px 44px; }
}

/* NOTE: No tablet/mobile breakpoints here. MainMegaMenu only renders at
   LgAndUp (≥1280px) — MainLayout's MudHidden removes it below that, and
   the tablet/mobile MainHeaderMenu is rendered with ShowLeftMenu=false
   which skips MainMegaMenu entirely. Any @media rules at ≤1279px would
   be dead code. The mobile/tablet nav is a separate component (NavMenu). */
/* _content/ProcapsMainSite/Components/Elements/ScrollingBanner.razor.rz.scp.css */
/* ======================================================
   Scrolling Banner — seamless marquee with CSS-drawn dividers
   Responsive: type + divider width scale per breakpoint
   ====================================================== */

.sb[b-yyde8ncrb4] {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Track of two identical halves — width: max-content so content decides width */
.sb-track[b-yyde8ncrb4] {
    display: inline-flex;
    width: max-content;
    animation: sb-scroll-b-yyde8ncrb4 linear infinite;
    will-change: transform;
}

/* Pause on hover for pausable ticker */
.sb--pausable .sb-track:hover[b-yyde8ncrb4] {
    animation-play-state: paused;
}

/* Each half holds a full copy of items */
.sb-half[b-yyde8ncrb4] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Text items — teal, Inter, responsive sizing */
.sb-item[b-yyde8ncrb4] {
    color: #009296;
    font-family: Inter, sans-serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
    padding: 0 40px;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* CSS-drawn divider line — responsive width */
.sb-divider[b-yyde8ncrb4] {
    display: inline-block;
    width: 110px;
    height: 1px;
    background: #009296;
    flex: 0 0 auto;
}

@keyframes sb-scroll-b-yyde8ncrb4 {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ======================================================
   Lg: 1280–1599px
   ====================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
    .sb-item[b-yyde8ncrb4] { font-size: 28px; padding: 0 32px; }
    .sb-divider[b-yyde8ncrb4] { width: 88px; }
}

/* ======================================================
   Tablet: 960–1279px
   ====================================================== */
@media (min-width: 960px) and (max-width: 1279px) {
    .sb-item[b-yyde8ncrb4] { font-size: 24px; padding: 0 28px; }
    .sb-divider[b-yyde8ncrb4] { width: 72px; }
}

/* ======================================================
   Mobile: ≤959px
   ====================================================== */
@media (max-width: 959px) {
    .sb-item[b-yyde8ncrb4] { font-size: 20px; padding: 0 20px; }
    .sb-divider[b-yyde8ncrb4] { width: 48px; }
}

/* ======================================================
   Respect reduced motion
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
    .sb-track[b-yyde8ncrb4] {
        animation: none;
    }
}
/* _content/ProcapsMainSite/Components/Elements/SubCollectionCarousel.razor.rz.scp.css */
/* ======================================================
   Sub-Collection Carousel — scoped
   Single responsive mode: native scroll + scroll-snap.
   Chevrons call scrollBy(); buttons disable at each end.
   Breakpoints: ≤959 mobile | 960-1279 tablet | 1280-1599 lg | 1600+ xl
   ====================================================== */

.scc[b-s5bwwvzaij] {
    position: relative;
    /* Matches site-standard horizontal gutter: 40px desktop/tablet, 20px mobile */
    padding: 28px 40px 32px;
}

/* Divider line at the bottom of the carousel — inset to match the site's
   horizontal gutters (40px desktop/tablet, 20px mobile) rather than
   running edge-to-edge. */
.scc[b-s5bwwvzaij]::before {
    content: '';
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 0;
    height: 1px;
    background: #d9e2e2;
}

/* ---- Track ---- */
.scc-track[b-s5bwwvzaij] {
    list-style: none;
    padding: 8px 4px;                 /* padding gives focus ring + hover shadow room */
    margin: 0;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: 4px;

    /* Hide native scrollbar (chevrons are the affordance) but keep the track scrollable */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.scc-track[b-s5bwwvzaij]::-webkit-scrollbar { display: none; }

/* ---- Item ---- */
.scc-item[b-s5bwwvzaij] {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 140px;
}

.scc-card[b-s5bwwvzaij] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: #003b3c;
    border-radius: 12px;
    padding: 4px;
    transition: transform 0.15s ease;
}

.scc-card:hover[b-s5bwwvzaij] { transform: translateY(-2px); }

.scc-card:focus-visible[b-s5bwwvzaij] {
    outline: 2px solid #009296;
    outline-offset: 4px;
}

/* ---- Image circle ---- */
.scc-img-wrap[b-s5bwwvzaij] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #e0ece8;              /* matches the mint placeholder seen in current thumbnails */
    display: block;
    flex-shrink: 0;
}

.scc-img-wrap img[b-s5bwwvzaij] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Label ---- */
.scc-label[b-s5bwwvzaij] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    /* Reserve space for 2 lines so card heights stay uniform across the row */
    min-height: calc(1.3em * 2);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* ---- Chevron buttons ---- */
.scc-btn[b-s5bwwvzaij] {
    position: absolute;
    top: calc(28px + 60px + 4px);     /* align to the circle's vertical center:
                                         .scc padding-top + half the image height + img-wrap padding */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #003b3c;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.scc-btn:hover[b-s5bwwvzaij] { background: #f6f2ec; }

.scc-btn:focus-visible[b-s5bwwvzaij] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

.scc-btn[disabled][b-s5bwwvzaij] {
    opacity: 0;
    pointer-events: none;
}

.scc-prev[b-s5bwwvzaij] { left: 12px; }
.scc-next[b-s5bwwvzaij] { right: 12px; }

/* ======================================================
   Lg: 1280-1599px — slightly tighter
   ====================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
    .scc[b-s5bwwvzaij] { padding: 24px 40px 28px; }
    .scc-track[b-s5bwwvzaij] { gap: 18px; }
    .scc-btn[b-s5bwwvzaij] { top: calc(24px + 60px + 4px); }
}

/* ======================================================
   Tablet: 960-1279px — hide chevrons, rely on swipe
   ====================================================== */
@media (min-width: 960px) and (max-width: 1279px) {
    .scc[b-s5bwwvzaij] {
        padding: 20px 0 24px 40px;        /* asymmetric so the fade can meet the screen edge */
    }

    .scc-track[b-s5bwwvzaij] {
        padding: 8px 40px 8px 0;           /* end breathing room inside the scroll container */
        gap: 16px;
    }

    /* On tablet, touch/swipe is the primary affordance — chevrons add clutter. */
    .scc-btn[b-s5bwwvzaij] { display: none; }

    /* Soft right-edge fade: guarantees the "there's more →" affordance
       regardless of how card widths happen to tile into the viewport. */
    .scc[b-s5bwwvzaij]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 48px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
        z-index: 2;
    }
}

/* ======================================================
   Mobile: ≤959px — compact cards, no chevrons
   ====================================================== */
@media (max-width: 959px) {
    .scc[b-s5bwwvzaij] {
        /* Asymmetric gutter: 20px on the left, zero on the right. The track
           bleeds past the right edge so the next card always visibly peeks —
           the standard "more content →" affordance on touch carousels. */
        padding: 16px 0 20px 20px;
    }

    .scc-track[b-s5bwwvzaij] {
        /* 20px of padding-right inside the scrollable track gives the last
           card breathing room when the user scrolls to the end. */
        padding: 8px 20px 8px 0;
        gap: 12px;
    }

    /* Card width is chosen so that a partial next card reliably peeks past
       the right edge on typical phone widths (360-430px). 132px means 3 cards
       can't tile cleanly into an iPhone 14/15/16 (390px) — the 3rd card is
       always visibly cut off, which the fade gradient then amplifies. */
    .scc-item[b-s5bwwvzaij] { width: 132px; }

    .scc-img-wrap[b-s5bwwvzaij] {
        width: 114px;
        height: 114px;
    }

    .scc-card[b-s5bwwvzaij] { gap: 12px; }

    .scc-label[b-s5bwwvzaij] {
        font-size: 13px;
        min-height: calc(1.3em * 2);
    }

    .scc-btn[b-s5bwwvzaij] { display: none; }

    /* Inset the divider to the mobile-standard 20px gutter on both sides
       (even though the cards themselves bleed past the right for the peek). */
    .scc[b-s5bwwvzaij]::before {
        left: 20px;
        right: 20px;
    }

    /* Soft right-edge fade guarantees the "there's more →" affordance
       even on viewport widths where cards happen to tile without a peek. */
    .scc[b-s5bwwvzaij]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 32px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
        z-index: 2;
    }
}
/* _content/ProcapsMainSite/Components/Elements/VideoLightbox.razor.rz.scp.css */
/* Video lightbox — scoped */

.vlb-backdrop[b-e7ib55wye2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    outline: none;
    animation: vlb-fade-in-b-e7ib55wye2 0.2s ease;
}

@keyframes vlb-fade-in-b-e7ib55wye2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.vlb-frame[b-e7ib55wye2] {
    position: relative;
    width: 100%;
    max-width: 1200px;
}

.vlb-close[b-e7ib55wye2] {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.vlb-close:hover[b-e7ib55wye2] {
    background: rgba(255, 255, 255, 0.12);
}

.vlb-video[b-e7ib55wye2] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.vlb-video iframe[b-e7ib55wye2],
.vlb-video video[b-e7ib55wye2] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

@media (max-width: 959px) {
    .vlb-backdrop[b-e7ib55wye2] { padding: 20px; }
    .vlb-close[b-e7ib55wye2] { top: -40px; }
}
/* _content/ProcapsMainSite/Components/HighestRatedProductsComponent.razor.rz.scp.css */
/* ======================================================
   Highest Rated Products — scoped component styles
   Breakpoints: ≤959px mobile | 960–1279px tablet | 1280px+ desktop
   ====================================================== */

.hr-section[b-cfn5ap4mvf] {
    background: #F7F2EC;
    padding: 0 40px 80px;
}

/* Standalone section: provides its own top breathing room and tightens
   the heading-to-cards gap. Used when the section isn't preceded by an
   external spacer (e.g. PDP "we also recommend"). */
.hr-section--padded[b-cfn5ap4mvf] {
    padding-top: 80px;
}

.hr-section--padded .hr-heading[b-cfn5ap4mvf] {
    margin-bottom: 48px;
}

/* "5 Star Rated" ribbon — flush with top of section */
.hr-badge-img[b-cfn5ap4mvf] {
    width: 120px;
    display: block;
    margin: 0 auto 60px;
}

/* Section heading matches hero banner font sizes exactly */
.hr-heading[b-cfn5ap4mvf] {
    color: #003B3C;
    font-family: "STIX Two Text", serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.44px;
    text-align: center;
    margin: 0 0 72px;
}

.hr-status[b-cfn5ap4mvf] {
    text-align: center;
    color: #003B3C;
    font-family: Inter, sans-serif;
}

/* ---- Carousel wrapper ---- */
.hr-carousel-wrapper[b-cfn5ap4mvf] {
    position: relative;
}

.hr-track[b-cfn5ap4mvf] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding: 4px 0;
    /*touch-action: pan-y;*/
    align-items: flex-start; /* aspect-ratio on card-inner handles uniform heights */
}

.hr-track[b-cfn5ap4mvf]::-webkit-scrollbar {
    display: none;
}

/* ---- Cards ----
   4 cols: (100% - 3×16px) / 4 = 25% - 12px
   Card-inner uses aspect-ratio: 5/7 (1/2 on mobile) so all cards with the same
   flex-basis width automatically get the same height. No flex:1 needed.
*/
.hr-card[b-cfn5ap4mvf] {
    flex: 0 0 calc(25% - 12px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hr-card-inner[b-cfn5ap4mvf] {
    width: 100%;
    aspect-ratio: 50 / 71;
    box-sizing: border-box;
    background: #F7F2EC;
    border: 6px solid #fff;
    border-radius: 20px;
    /* 40px top (stars spacing), 32px sides, 20px bottom */
    padding: 40px 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Static 5-star row — used when UseLiveStars=false (homepage default).
   Inline SVG so no external CDN dependency. Same gold/amber color as the
   live-stars fill for visual consistency between the two render modes. */
.hr-stars-static[b-cfn5ap4mvf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 0;
    color: #F1A33A;
    flex-shrink: 0;
    margin-bottom: 20px;
}

.hr-star-static-svg[b-cfn5ap4mvf] {
    width: 20px;
    height: 20px;
    display: block;
}

/* Stars + numeric rating row — used when UseLiveStars=true (PDP opt-in).
   Native SVG with track + fill pattern, driven by per-product p.Rating
   from FastSimon's getRelatedByWidget data. Mirrors the PDP top-right
   rating row (.pdp-rating-stars in StampedReviews.razor).

   Track = 5 grey stars. Fill = 5 gold stars layered on top with
   width = (rating / 5) * 100%, clipped via overflow: hidden. Produces
   accurate fractional fills (4.4 → 88% wide gold over grey track).

   Numeric value sits to the right of the stars, Inter, brand dark teal. */
.hr-rating-row[b-cfn5ap4mvf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.hr-stars[b-cfn5ap4mvf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
}

.hr-stars-track[b-cfn5ap4mvf],
.hr-stars-fill[b-cfn5ap4mvf] {
    display: inline-flex;
    gap: 2px;
    line-height: 0;
}

.hr-stars-track[b-cfn5ap4mvf] {
    color: #D9E2E2; /* grey track — empty stars */
}

.hr-stars-fill[b-cfn5ap4mvf] {
    color: #F1A33A; /* brand gold — filled stars */
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.hr-star-svg[b-cfn5ap4mvf] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: block;
}

.hr-rating-value[b-cfn5ap4mvf] {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #003B3C;
    line-height: 1;
}

.hr-headline[b-cfn5ap4mvf] {
    color: #003B3C;
    font-family: "STIX Two Text", serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.5px;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
}

.hr-headline font[b-cfn5ap4mvf],
.hr-headline i[b-cfn5ap4mvf],
.hr-headline span[b-cfn5ap4mvf],
.hr-headline em[b-cfn5ap4mvf],
.hr-headline b[b-cfn5ap4mvf],
.hr-headline strong[b-cfn5ap4mvf] {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
}

/* Fixed gap between headline and image area */
.hr-spacer[b-cfn5ap4mvf] {
    height: 16px;
    flex-shrink: 0;
}

/* Image area bleeds to card edges — negative margins cancel the side padding
   so the image fills the full card width while headline keeps its inset */
.hr-image-wrap[b-cfn5ap4mvf] {
    flex: 1;
    min-height: 0;
    width: calc(100% + 64px);
    margin-left: -32px;
    margin-right: -32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hr-image-wrap a[b-cfn5ap4mvf] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hr-product-img[b-cfn5ap4mvf] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Heart button — 20px from card inner edge */
.hr-heart-btn[b-cfn5ap4mvf] {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #003B3C;
    transition: color 0.2s, fill 0.2s;
    padding: 0;
}

.hr-heart-btn svg[b-cfn5ap4mvf] {
    fill: none;
    transition: fill 0.2s;
}

.hr-heart-btn.is-favorite[b-cfn5ap4mvf] {
    color: #009296;
}

.hr-heart-btn.is-favorite svg[b-cfn5ap4mvf] {
    fill: #009296;
}

/* ---- Card info (below beige box) ---- */
.hr-card-info[b-cfn5ap4mvf] {
    padding: 24px 4px 0;
    flex-shrink: 0;
    width: 100%;
}

.hr-product-name[b-cfn5ap4mvf] {
    color: #003B3C;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 4px;
}

.hr-prices[b-cfn5ap4mvf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hr-price-sale[b-cfn5ap4mvf] {
    color: #003B3C;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.hr-price-original[b-cfn5ap4mvf] {
    color: #999;
    font-family: Inter, sans-serif;
    font-size: 14px;
    text-decoration: line-through;
}

/* ---- Arrows — white circles, drop shadow, dark arrow color ---- */
.hr-arrow[b-cfn5ap4mvf] {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13);
    z-index: 10;
    color: #003B3C; /* matches the dark headline color */
    transition: box-shadow 0.2s;
}

.hr-arrow:hover[b-cfn5ap4mvf] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.hr-arrow--prev[b-cfn5ap4mvf] { left: -24px; }
.hr-arrow--next[b-cfn5ap4mvf] { right: -24px; }
.hr-arrow--hidden[b-cfn5ap4mvf] { display: none; }

/* ---- Dots ---- */
.hr-dots[b-cfn5ap4mvf] {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 48px 0 0;
}

.hr-dot[b-cfn5ap4mvf] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #009296;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.hr-dot.active[b-cfn5ap4mvf] { background: #009296; }

/* ======================================================
   Lg: 1280–1599px — 4 columns, scaled-down type
   ====================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
    .hr-heading[b-cfn5ap4mvf] { font-size: 54px; letter-spacing: -1.08px; }
    .hr-headline[b-cfn5ap4mvf] { font-size: 22px; }
    .hr-badge-img[b-cfn5ap4mvf] { width: 100px; }
}

/* ======================================================
   Tablet: 960–1279px — 3 columns
   (100% - 2×16px) / 3 ≈ 33.333% - 10.667px
   ====================================================== */
@media (min-width: 960px) and (max-width: 1279px) {
    .hr-section[b-cfn5ap4mvf] { padding: 0 20px 60px; }
    .hr-section--padded[b-cfn5ap4mvf] { padding-top: 60px; }
    .hr-section--padded .hr-heading[b-cfn5ap4mvf] { margin-bottom: 40px; }
    .hr-card[b-cfn5ap4mvf] { flex: 0 0 calc(33.333% - 11px); }
    .hr-heading[b-cfn5ap4mvf] { font-size: 42px; letter-spacing: -0.84px; margin-bottom: 56px; }
    .hr-headline[b-cfn5ap4mvf] { font-size: 20px; }
    .hr-badge-img[b-cfn5ap4mvf] { width: 90px; }
}

/* ======================================================
   Mobile: ≤959px — 2 columns, arrows hidden
   (100% - 1×16px) / 2 = 50% - 8px
   ====================================================== */
@media (max-width: 959px) {
    .hr-section[b-cfn5ap4mvf] { padding: 0 20px 60px; }
    .hr-section--padded[b-cfn5ap4mvf] { padding-top: 56px; }
    .hr-section--padded .hr-heading[b-cfn5ap4mvf] { margin-bottom: 32px; }
    .hr-card[b-cfn5ap4mvf] { flex: 0 0 calc(50% - 8px); }
    .hr-heading[b-cfn5ap4mvf] {
        font-size: 38px;
        letter-spacing: -0.76px;
        margin-bottom: 48px;
    }
    .hr-headline[b-cfn5ap4mvf] { font-size: 16px; }
    .hr-star-static-svg[b-cfn5ap4mvf] { width: 16px; height: 16px; }
    .hr-star-svg[b-cfn5ap4mvf] { width: 18px; height: 18px; }
    .hr-card-inner[b-cfn5ap4mvf] { padding: 20px 28px 20px; aspect-ratio: 10 / 19; }
    .hr-image-wrap[b-cfn5ap4mvf] { width: calc(100% + 56px); margin-left: -28px; margin-right: -28px; }
    .hr-heart-btn[b-cfn5ap4mvf] { width: 36px; height: 36px; }
    .hr-heart-btn svg[b-cfn5ap4mvf] { width: 18px; height: 18px; }
    .hr-badge-img[b-cfn5ap4mvf] { width: 72px; }
    .hr-arrow[b-cfn5ap4mvf] { display: none; }
}

/* ============================================================================
   VARIANT: collection — used by the PDP "We also recommend" carousel
   (set via Variant="collection" parameter). Mirrors the FastSimon collection-
   page card styling (.product-card block in wwwroot/Shopifycss/fsSearch.css)
   so the PDP carousel reads as a continuation of the same product-card
   language at every breakpoint.

   Markup mapping (collection → ours):
     .product-card                  → .hr-card
     .product-card-items-wrapper    → .hr-card-inner          (cream tile)
     .reviews-container             → .hr-rating-row          (stars)
     .rich-text-label               → .hr-headline            (subtitle)
     .image-wrapper                 → .hr-image-wrap          (product image)
     .pcl-fav-btn                   → .hr-heart-btn           (favorite)
     .info-container                → .hr-card-info           (title + price)
     .title                         → .hr-product-name
     .price                         → .hr-price-sale
     .compare                       → .hr-price-original

   Breakpoint scale (max-width, mirrors fsSearch.css §4):
     ≥1600   default
     ≤1599   med desktop
     ≤1279   tablet landscape
     ≤1023   tablet portrait
     ≤959    mobile

   Mike's only deliberate PDP-specific delta vs collection cards: the white
   outer border on the cream tile is KEPT here (collection cards don't have
   it). Treated as PDP chrome.
   ============================================================================ */

/* --- Row stretch: collection cards row-match via CSS subgrid (grid-auto-rows:
       1fr). We're flex-based, so we use align-items: stretch on the track to
       achieve the same outcome — every card grows to the tallest card's natural
       height, and the cream tile flexes to fill its card.

       Combined with: aspect-ratio removed from .hr-card-inner (so cream tile
       sizes to content + image, not a fixed ratio) and a fixed-height image
       area pushed to the bottom via margin-top: auto, this guarantees:
         (1) all images same size regardless of headline length
         (2) all card-inners same height (tallest wins, others stretch)
         (3) longer headlines absorb extra space ABOVE the image, not by
             squeezing it.
       Mirrors the collection card behavior visually without needing grid. */
.hr-section--variant-collection .hr-track[b-cfn5ap4mvf] {
    align-items: stretch;
}

/* Force every card to take the row's full stretched height. Belt-and-
   suspenders against mobile WebKit's inconsistent propagation of
   align-items:stretch through scroll-snap flex containers — without an
   explicit align-self:stretch, some iOS Safari versions size flex items
   to content height even when the container says stretch. */
.hr-section--variant-collection .hr-card[b-cfn5ap4mvf] {
    align-self: stretch;
    height: auto;
}

.hr-section--variant-collection .hr-card-inner[b-cfn5ap4mvf] {
    background: #F6F2EC;
    padding: 40px 20px 20px;
    aspect-ratio: unset;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

/* Image-wrap: fixed height (per breakpoint, mirrors collection min-heights),
   pushed to the BOTTOM of the cream tile via margin-top: auto so longer-
   headline cards absorb slack between headline and image instead of squeezing
   the image. flex: 0 0 auto so it doesn't grow/shrink with parent flex. */
.hr-section--variant-collection .hr-image-wrap[b-cfn5ap4mvf] {
    flex: 0 0 auto;
    margin-top: auto;
}

/* The fixed 16px spacer between headline and image is no longer needed —
   margin-top: auto on image-wrap handles the gap dynamically. */
.hr-section--variant-collection .hr-spacer[b-cfn5ap4mvf] {
    display: none;
}

/* --- Stars row — collection card centers stars at top, then 36px gap
       before the subtitle text begins (40px stars-top + 76px subtitle-top-
       padding − ~22px stars-height ≈ 18px true gap; closer in render to ~36).
       Tighten our 20px margin-bottom to 16px to land at the same visual gap. */
.hr-section--variant-collection .hr-rating-row[b-cfn5ap4mvf] {
    margin-bottom: 16px;
}

/* --- Subtitle — STIX 24px (≥1600), weight 500, letter-spacing -0.3px.
       Horizontal padding mirrors collection card (fsSearch.css §4 .rich-text-
       label): 40px sides on default ≥1280 so long copy doesn't kiss the cream
       tile edges. Card-inner already provides 20px of side padding, so the
       extra 20px on the headline gets us to the 40px total from the cream
       tile inner edge. ≤1279 and below relax this — see breakpoint blocks. */
.hr-section--variant-collection .hr-headline[b-cfn5ap4mvf] {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.3px;
    padding-left: 20px;
    padding-right: 20px;
}

/* --- Image area sizing — aspect-ratio (not fixed height) so the image area
       scales proportionally with card width across every viewport. Mirrors the
       collection card's behavior where image area grows/shrinks with the card,
       not with the viewport in pixel-step jumps. 1/1 (square) gives the contained
       product images plenty of vertical room to scale up while keeping cards
       proportionally balanced — same approach the collection grid produces
       through its subgrid + card-width math.

       margin-bottom: -20px extends the image-wrap THROUGH the cream tile's
       20px padding-bottom so its visual bottom lands at the cream tile's
       inner edge — matching the collection card where the image-wrapper fills
       grid row 2 to its full bottom. This is what makes the image bottom +
       heart visible bottom land at the same Y coordinate. */
.hr-section--variant-collection .hr-image-wrap[b-cfn5ap4mvf] {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    padding: 0 0 20px;
    box-sizing: border-box;
    align-items: flex-end;
    aspect-ratio: 1 / 1;
}

/* Stars + rating number sizing — mirrors collection card exactly across every
   breakpoint (fsSearch.css §9 STAR SIZE + .reviews-count.fs-reviews-avg).
   Default tier (≥1280): stars 20px / rating 14px. Steps down at 1279 / 1023 /
   639 to match the collection card scale. */
.hr-section--variant-collection .hr-star-svg[b-cfn5ap4mvf] {
    width: 20px;
    height: 20px;
}

.hr-section--variant-collection .hr-rating-value[b-cfn5ap4mvf] {
    font-size: 14px;
}

/* Heart sits 20px from card-inner edges by default; matches collection card
   margin: 0 20px 20px 0 (the heart's margin from its grid cell edges = the
   card's edge inset). 44x44 already matches. */
.hr-section--variant-collection .hr-heart-btn[b-cfn5ap4mvf] {
    width: 44px;
    height: 44px;
    bottom: 20px;
    right: 20px;
}

/* --- Card-info (title + price below tile) ----------------------------------
   Collection card: Inter 16/600 brand-dark title (3-line clamp), Inter 18/600
   #D84315 sale price, Inter 16/400 #6B7D7D line-through original (opacity .8). */

/* Lock the info area to a uniform min-height across cards so that varying
   title + description lengths don't pinch one card's cream tile. Mirrors
   collection card's grid-auto-rows: 1fr behavior on the info row.
   Math: 3-line title @ 16px/1.3 (62px) + 4px margin + 2-line description
        @ 14px/1.4 (39px) + 8px margin + 18px price = 131px content;
        +20px top padding → ~155px. Both title and description are line-
        clamped (3 and 2 respectively), so max content is bounded — the
        min-height matches that max so all cards render at the same info
        height regardless of how much copy each one carries. */
.hr-section--variant-collection .hr-card-info[b-cfn5ap4mvf] {
    padding: 20px 4px 0;
    min-height: 155px;
    box-sizing: border-box;
}

.hr-section--variant-collection .hr-product-name[b-cfn5ap4mvf] {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Short factual descriptor below the product title — same visual treatment
   as the FastSimon-rendered collection cards. Lighter weight, secondary
   color, two-line clamp so unusually long copy doesn't blow out card height. */
.hr-section--variant-collection .hr-card-description[b-cfn5ap4mvf] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #6B7D7D;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hr-section--variant-collection .hr-prices[b-cfn5ap4mvf] {
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
}

.hr-section--variant-collection .hr-price-sale[b-cfn5ap4mvf] {
    color: #003B3C;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.hr-section--variant-collection .hr-price-original[b-cfn5ap4mvf] {
    color: #6B7D7D;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    opacity: 0.8;
}

/* --- ≤1599 — med desktop. Subtitle steps down to 22px. */
@media (max-width: 1599px) {
    .hr-section--variant-collection .hr-headline[b-cfn5ap4mvf] { font-size: 22px; }
}

/* --- ≤1279 — tablet landscape. Stars step down to 18px.
       Headline horizontal padding relaxes back to 0 (card-inner's 20px side
       padding gets us to the collection card's 20px from cream tile edge). */
@media (max-width: 1279px) {
    .hr-section--variant-collection .hr-headline[b-cfn5ap4mvf] {
        font-size: 22px;
        padding-left: 0;
        padding-right: 0;
    }
    .hr-section--variant-collection .hr-star-svg[b-cfn5ap4mvf] {
        width: 18px;
        height: 18px;
    }
}

/* --- ≤1023 — tablet portrait. Stars 16px, rating number 12px. */
@media (max-width: 1023px) {
    .hr-section--variant-collection .hr-headline[b-cfn5ap4mvf] { font-size: 22px; }
    .hr-section--variant-collection .hr-star-svg[b-cfn5ap4mvf] {
        width: 16px;
        height: 16px;
    }
    .hr-section--variant-collection .hr-rating-value[b-cfn5ap4mvf] {
        font-size: 12px;
    }
}

/* --- ≤639 — small mobile. Stars step down to 14px (smallest tier). */
@media (max-width: 639px) {
    .hr-section--variant-collection .hr-star-svg[b-cfn5ap4mvf] {
        width: 14px;
        height: 14px;
    }
}

/* --- ≤959 — mobile. Subtitle 16px, image bleeds full-width with bottom-
       corner rounding to match cream tile shape, heart shrinks to 36px
       visible while preserving 44x44 hit area, info below tile scales down. */
@media (max-width: 959px) {
    .hr-section--variant-collection .hr-card-inner[b-cfn5ap4mvf] {
        /* tighter side padding for mobile */
        padding: 30px 20px 20px;
    }
    .hr-section--variant-collection .hr-rating-row[b-cfn5ap4mvf] {
        margin-bottom: 12px;
    }
    .hr-section--variant-collection .hr-headline[b-cfn5ap4mvf] {
        font-size: 16px;
    }
    /* Image bleeds to the absolute edges of the cream tile (no inner padding),
       and the bottom corners get the 20px radius so the image meets the
       tile's rounded bottom flush — same trick as fsSearch.css mobile rule.
       Fixed height keeps mobile images consistent across the row too. */
    .hr-section--variant-collection .hr-image-wrap[b-cfn5ap4mvf] {
        width: calc(100% + 40px);
        margin-left: -20px;
        margin-right: -20px;
        padding: 0 0 20px;
        border-radius: 0 0 14px 14px;
        overflow: hidden;
        /* aspect-ratio: 1/1 inherited from the default rule — scales mobile
           cards proportionally too, no fixed height needed. */
    }
    /* Heart at bottom: 15 / right: 15 (matches collection card mobile margin
       0 15px 15px 0). With the radial-gradient producing a 34px visible circle
       centered in the 44x44 bounding box (5px inset all sides), visible bottom
       lands at -20 from the cream tile's inner edge — same as image bottom
       (image-wrap padding-bottom 20). That's how alignment is achieved. */
    .hr-section--variant-collection .hr-heart-btn[b-cfn5ap4mvf] {
        width: 44px;
        height: 44px;
        bottom: 15px;
        right: 15px;
        background: radial-gradient(circle, #fff 17px, transparent 18px);
        border-radius: 0;
    }
    /* Star + rating sizes inherit from the ≤1023 (16px stars / 12px rating)
       and ≤639 (14px stars) tiers above. No mobile-specific override here. */
    .hr-section--variant-collection .hr-heart-btn svg[b-cfn5ap4mvf] {
        width: 16px;
        height: 16px;
    }
    .hr-section--variant-collection .hr-product-name[b-cfn5ap4mvf] { font-size: 15px; }
    .hr-section--variant-collection .hr-price-sale[b-cfn5ap4mvf] { font-size: 15px; }
    .hr-section--variant-collection .hr-price-original[b-cfn5ap4mvf] { font-size: 14px; }
    /* Re-tune info min-height for the smaller mobile font scale, including
       the description row:
       3-line title @ 15px/1.3 (58px) + 4px margin + 2-line description @
       14px/1.4 (39px) + 8px margin + 15px price = 124px content; +16px
       top padding → ~140px. */
    .hr-section--variant-collection .hr-card-info[b-cfn5ap4mvf] {
        padding: 16px 4px 0;
        min-height: 140px;
    }
}

/* ============================================================================
   Skeleton state — placeholder carousel shown while _topProducts is null.
   Matches the loaded carousel's exact dimensions (cream tile + info area
   heights, image position, stars/headline/title spacing) so when real data
   lands there is zero layout shift. Uses the global .brand-skel utility
   from app.css for the shimmer treatment; the .hr-skel-* classes here
   only define each placeholder shape's size and position.
   ============================================================================ */

/* Cream tile skeleton — same padding, no border (variant-collection look). */
.hr-card--skeleton .hr-card-inner[b-cfn5ap4mvf] {
    background: #F6F2EC;
    border: 0;
    cursor: default;
}

/* Stars row placeholder — pill shape sized like a 5-star inline-flex group. */
.hr-skel-stars[b-cfn5ap4mvf] {
    width: 110px;
    height: 14px;
    margin-bottom: 16px;
}

/* Headline placeholder — two text lines at the cream-tile headline width.
   --short modifier truncates the second line to feel natural (real
   headlines wrap to varying widths). */
.hr-skel-headline[b-cfn5ap4mvf] {
    width: 80%;
    height: 18px;
    margin: 0 auto 8px;
}

.hr-skel-headline--short[b-cfn5ap4mvf] {
    width: 55%;
    margin-bottom: 0;
}

/* Product image placeholder — pushed to the bottom of the cream tile via
   margin-top:auto, matching the live image-wrap. Square aspect-ratio
   keeps it proportional with card width across breakpoints, just like
   the real image area. */
.hr-skel-image[b-cfn5ap4mvf] {
    width: 70%;
    aspect-ratio: 1 / 1;
    margin: 24px auto 0;
    border-radius: 12px;
}

/* Below-tile info placeholders — sized to look like the real title +
   description + price stack. */
.hr-skel-title[b-cfn5ap4mvf] {
    width: 90%;
    height: 14px;
    margin-bottom: 6px;
}

.hr-skel-title--short[b-cfn5ap4mvf] {
    width: 60%;
    margin-bottom: 12px;
}

.hr-skel-price[b-cfn5ap4mvf] {
    width: 40%;
    height: 16px;
}

/* Mobile: tighten image-skeleton sizing to mirror real-card mobile bleed
   behavior (the real image-wrap has width: 100% + 40px and bleeds past
   the cream tile edges; we match the visual proportion here without
   the negative margin trick to keep the skeleton self-contained). */
@media (max-width: 959px) {
    .hr-skel-headline[b-cfn5ap4mvf] { font-size: 0; height: 16px; }
    .hr-skel-image[b-cfn5ap4mvf] { width: 75%; margin-top: 16px; }
}
/* _content/ProcapsMainSite/Components/Layout/MainLayout.razor.rz.scp.css */

body[b-pa9elxq540] {
    overflow-x: hidden;
}

.page[b-pa9elxq540] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-pa9elxq540] {
    flex: 1;
}

.sidebar[b-pa9elxq540] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-pa9elxq540] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row[b-pa9elxq540]  a, .top-row[b-pa9elxq540]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row[b-pa9elxq540]  a:hover, .top-row[b-pa9elxq540]  .btn-link:hover {
    text-decoration: underline;
}

.top-row[b-pa9elxq540]  a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --Phone-- */
@media only screen and (max-width : 974px) {
    body[b-pa9elxq540] {
        overflow-x: hidden;
    }
}

@media (max-width: 640.98px) {
    .top-row[b-pa9elxq540] {
        justify-content: space-between;
    }

    .top-row[b-pa9elxq540]  a, .top-row[b-pa9elxq540]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-pa9elxq540] {
        flex-direction: row;
    }

    .sidebar[b-pa9elxq540] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-pa9elxq540] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-pa9elxq540]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-pa9elxq540], article[b-pa9elxq540] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/ProcapsMainSite/Components/Layout/NavMenu.razor.rz.scp.css */
/* ======================================================
   Mobile/Tablet Navigation (drawer contents) — scoped
   ====================================================== */

.nav[b-6ze35ky5oz] {
    display: flex;
    flex-direction: column;
    padding: 0 0 24px;
    color: #003b3c;
    font-family: Inter, sans-serif;
    background: #fff;
}

/* ---- Top bar (logo/back + X) ---- */
.nav-topbar[b-6ze35ky5oz] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 40px;
    min-height: 100px;
    box-sizing: border-box;
}

.nav-topbar-logo[b-6ze35ky5oz] {
    display: inline-block;
    line-height: 0;
    margin-right: auto;
}

.nav-back[b-6ze35ky5oz] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #003b3c;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.nav-back-icon[b-6ze35ky5oz] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ebfafa;
    color: #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s ease;
    animation: navEnterX-b-6ze35ky5oz 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (hover: hover) {
    .nav-back:hover .nav-back-icon[b-6ze35ky5oz] {
        background: #d4f1f2;
    }
}

.nav-back-label[b-6ze35ky5oz] {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    animation: navEnterX-b-6ze35ky5oz 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 40ms both;
}

.nav-close[b-6ze35ky5oz] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    color: #003b3c;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s ease;
    margin-left: auto;
}

@media (hover: hover) {
    .nav-close:hover[b-6ze35ky5oz] {
        background: #f3f4f6;
    }
}

/* ---- List containers ---- */
.nav-list[b-6ze35ky5oz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.nav-list-secondary[b-6ze35ky5oz] {
    margin-top: 48px;
}

/* Staggered entry for list items */
.nav-list > li[b-6ze35ky5oz] {
    animation: navEnterX-b-6ze35ky5oz 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.nav-list > li:nth-child(1)[b-6ze35ky5oz] { animation-delay: 60ms; }
.nav-list > li:nth-child(2)[b-6ze35ky5oz] { animation-delay: 100ms; }
.nav-list > li:nth-child(3)[b-6ze35ky5oz] { animation-delay: 140ms; }
.nav-list > li:nth-child(4)[b-6ze35ky5oz] { animation-delay: 180ms; }
.nav-list > li:nth-child(5)[b-6ze35ky5oz] { animation-delay: 220ms; }
.nav-list > li:nth-child(6)[b-6ze35ky5oz] { animation-delay: 260ms; }

.nav-list-secondary > li:nth-child(1)[b-6ze35ky5oz] { animation-delay: 280ms; }
.nav-list-secondary > li:nth-child(2)[b-6ze35ky5oz] { animation-delay: 320ms; }

/* ---- Level 0 / secondary items ---- */
.nav-item[b-6ze35ky5oz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px;
    background: none;
    border: none;
    text-align: left;
    text-decoration: none;
    color: #003b3c;
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    transition: color 0.2s ease;
}

.nav-item:focus-visible[b-6ze35ky5oz] {
    color: #009296;
    outline: none;
}

@media (hover: hover) {
    .nav-item:hover[b-6ze35ky5oz] {
        color: #009296;
    }
}

.nav-item-label[b-6ze35ky5oz] {
    flex: 1;
    line-height: 1.3;
}

/* ---- Indicator circle (chevron-right / plus / minus) ---- */
.nav-indicator[b-6ze35ky5oz] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ebfafa;
    color: #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .nav-item:hover .nav-indicator[b-6ze35ky5oz],
    .nav-category:hover .nav-indicator[b-6ze35ky5oz] {
        background: #d4f1f2;
    }

    /* Subtle pulse of the indicator on hover */
    .nav-item:hover .nav-indicator[b-6ze35ky5oz] {
        transform: translateX(2px);
    }
}

/* ---- Plus/minus (smooth CSS pseudo-element animation) ---- */
.nav-pm[b-6ze35ky5oz] {
    position: relative;
    width: 14px;
    height: 14px;
    display: inline-block;
    color: #009296;
}

.nav-pm[b-6ze35ky5oz]::before,
.nav-pm[b-6ze35ky5oz]::after {
    content: '';
    position: absolute;
    background: currentColor;
    border-radius: 1px;
}

.nav-pm[b-6ze35ky5oz]::before {
    /* horizontal bar (always visible) */
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
}

.nav-pm[b-6ze35ky5oz]::after {
    /* vertical bar (collapses on open → becomes minus) */
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%) scaleY(1);
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-category.is-open .nav-pm[b-6ze35ky5oz]::after {
    transform: translateX(-50%) scaleY(0);
}

/* ---- Level 1 primary category (icon on left) ---- */
.nav-category[b-6ze35ky5oz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 24px;
    background: none;
    border: none;
    text-align: left;
    color: #003b3c;
    font-size: 24px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    transition: color 0.2s ease;
}

.nav-category.is-open[b-6ze35ky5oz] {
    color: #009296;
}

@media (hover: hover) {
    .nav-category:hover[b-6ze35ky5oz] {
        color: #009296;
    }
}

.nav-category-label[b-6ze35ky5oz] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1.3;
}

.nav-category-icon[b-6ze35ky5oz] {
    color: #009296;
    flex-shrink: 0;
}

/* ---- Level 2 sublist — smooth expand/collapse with grid-rows trick ---- */
.nav-sublist-container[b-6ze35ky5oz] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-sublist-container.is-open[b-6ze35ky5oz] {
    grid-template-rows: 1fr;
}

.nav-sublist[b-6ze35ky5oz] {
    overflow: hidden;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-sublist-container.is-open .nav-sublist[b-6ze35ky5oz] {
    padding: 4px 0 12px;
}

/* Sublist items: staggered fade-in on expand */
.nav-sublist > li[b-6ze35ky5oz] {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 220ms ease-out, transform 220ms ease-out;
}

.nav-sublist-container.is-open > .nav-sublist > li[b-6ze35ky5oz] {
    opacity: 1;
    transform: translateY(0);
}

.nav-sublist-container.is-open > .nav-sublist > li:nth-child(1)[b-6ze35ky5oz] { transition-delay: 80ms; }
.nav-sublist-container.is-open > .nav-sublist > li:nth-child(2)[b-6ze35ky5oz] { transition-delay: 100ms; }
.nav-sublist-container.is-open > .nav-sublist > li:nth-child(3)[b-6ze35ky5oz] { transition-delay: 120ms; }
.nav-sublist-container.is-open > .nav-sublist > li:nth-child(4)[b-6ze35ky5oz] { transition-delay: 140ms; }
.nav-sublist-container.is-open > .nav-sublist > li:nth-child(5)[b-6ze35ky5oz] { transition-delay: 160ms; }
.nav-sublist-container.is-open > .nav-sublist > li:nth-child(6)[b-6ze35ky5oz] { transition-delay: 180ms; }
.nav-sublist-container.is-open > .nav-sublist > li:nth-child(7)[b-6ze35ky5oz] { transition-delay: 200ms; }
.nav-sublist-container.is-open > .nav-sublist > li:nth-child(8)[b-6ze35ky5oz] { transition-delay: 220ms; }
.nav-sublist-container.is-open > .nav-sublist > li:nth-child(n+9)[b-6ze35ky5oz] { transition-delay: 240ms; }

/* On touch devices, skip the staggered fade-in. The transform+opacity
   transition was causing a "tap twice" bug — first tap landed on an
   element that was still mid-animation (translated up ~4px), so the
   touch target was offset from where the user expected it. */
@media (hover: none) {
    .nav-sublist > li[b-6ze35ky5oz],
    .nav-sublist-container.is-open > .nav-sublist > li[b-6ze35ky5oz] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.nav-sublink[b-6ze35ky5oz] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    text-decoration: none;
    color: #003b3c;
    font-size: 16px;
    font-weight: 400;
    font-family: inherit;
    text-align: left;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-sublink:focus-visible[b-6ze35ky5oz] {
    color: #009296;
    background: #f7fcfc;
    outline: none;
}

/* Scope :hover to real hover-capable devices. On touch screens, mobile
   browsers fake a hover on first tap which can swallow the click and
   require a second tap to fire navigation. */
@media (hover: hover) {
    .nav-sublink:hover[b-6ze35ky5oz] {
        color: #009296;
        background: #f7fcfc;
    }
}

.nav-sublink-icon-wrap[b-6ze35ky5oz] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #ebfafa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-sublink-icon-img[b-6ze35ky5oz] {
    width: 18px;
    height: 18px;
    display: block;
}

.nav-sublink-icon-mud[b-6ze35ky5oz] {
    width: 18px;
    height: 18px;
    color: #009296;
}

/* ---- Keyframes ---- */
@keyframes navEnterX-b-6ze35ky5oz {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ---- Respect user preference for reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .nav *[b-6ze35ky5oz],
    .nav-sublist-container[b-6ze35ky5oz],
    .nav-sublist > li[b-6ze35ky5oz] {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}
/* _content/ProcapsMainSite/Components/Pages/Assessment.razor.rz.scp.css */
/* ======================================================
   Vitamin Assessment — scoped
   Quiz tile grid + full-screen quiz modal
   Breakpoints: ≤959 mobile | 960+ desktop
   ====================================================== */

.asmt-page[b-h35e1n9xzr] {
    padding: 0 40px 80px;
    font-family: Inter, sans-serif;
    color: #003b3c;
}

.asmt-section[b-h35e1n9xzr] {
    padding: 48px 0 32px;
}

.asmt-section + .asmt-section[b-h35e1n9xzr] {
    border-top: 1px solid #e7ece9;
    padding-top: 56px;
}

.asmt-section-title[b-h35e1n9xzr] {
    font-family: 'STIX Two Text', serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.44px;
    color: #003b3c;
    margin: 0 0 16px;
}

.asmt-section-subtitle[b-h35e1n9xzr] {
    font-family: Inter, sans-serif;
    font-size: 20px;
    line-height: 1.5;
    color: #003b3c;
    margin: 0 0 32px;
    max-width: 720px;
}

.asmt-grid[b-h35e1n9xzr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.asmt-tile[b-h35e1n9xzr] {
    aspect-ratio: 1;
    border: none;
    border-radius: 16px;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.asmt-tile:hover[b-h35e1n9xzr] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 59, 60, 0.12);
}

.asmt-tile:focus-visible[b-h35e1n9xzr] {
    outline: 2px solid #009296;
    outline-offset: 3px;
}

.asmt-tile--popular[b-h35e1n9xzr] {
    background: #009296;
    color: #fff;
}

.asmt-tile--popular .asmt-tile-label[b-h35e1n9xzr] {
    color: #fff;
}

.asmt-tile--other[b-h35e1n9xzr] {
    background: #f6f2ec;
    border: 1px solid #e0d9cc;
    color: #009296;
}

.asmt-tile--other .asmt-tile-label[b-h35e1n9xzr] {
    color: #009296;
}

.asmt-tile-label[b-h35e1n9xzr] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* ======================================================
   Full-screen quiz modal
   ====================================================== */

.asmt-modal[b-h35e1n9xzr] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.asmt-modal-header[b-h35e1n9xzr] {
    flex-shrink: 0;
    padding: 16px 40px 12px;
    border-bottom: 1px solid #e7ece9;
}

.asmt-progress-track[b-h35e1n9xzr] {
    height: 4px;
    background: #f6f2ec;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
}

.asmt-progress-fill[b-h35e1n9xzr] {
    height: 100%;
    background: #009296;
    border-radius: 2px;
    transition: width 0.25s ease;
}

.asmt-modal-meta[b-h35e1n9xzr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.asmt-step-count[b-h35e1n9xzr] {
    font-size: 13px;
    font-weight: 500;
    color: #003b3c;
}

.asmt-value-line[b-h35e1n9xzr] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 59, 60, 0.65);
    text-align: right;
}

.asmt-modal-close[b-h35e1n9xzr] {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.15s ease;
}

.asmt-modal-close:hover[b-h35e1n9xzr] {
    background: rgba(0, 59, 60, 0.08);
}

.asmt-modal-close:focus-visible[b-h35e1n9xzr] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

.asmt-modal-body[b-h35e1n9xzr] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 48px 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.asmt-modal-inner[b-h35e1n9xzr] {
    width: 100%;
    max-width: 720px;
}

.asmt-quiz-title[b-h35e1n9xzr] {
    font-family: 'STIX Two Text', serif;
    font-size: 28px;
    font-weight: 500;
    color: #009296;
    margin: 0 0 32px;
    text-align: center;
}

.asmt-question-block + .asmt-question-block[b-h35e1n9xzr] {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid #e7ece9;
}

.asmt-question-text[b-h35e1n9xzr] {
    font-family: Inter, sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 500;
    line-height: 1.2;
    color: #003b3c;
    text-align: center;
    margin: 0 0 12px;
}

.asmt-question-sub[b-h35e1n9xzr] {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0, 59, 60, 0.7);
    text-align: center;
    margin: 0 0 28px;
}

/* Pill / chip options */
.asmt-pills[b-h35e1n9xzr] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.asmt-pill[b-h35e1n9xzr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border: 1.5px solid #003b3c;
    border-radius: 999px;
    background: #fff;
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.asmt-pill:hover[b-h35e1n9xzr] {
    background: #ebfafa;
}

.asmt-pill.is-selected[b-h35e1n9xzr] {
    background: #009296;
    border-color: #009296;
    color: #fff;
}

.asmt-pill-prefix[b-h35e1n9xzr] {
    font-weight: 400;
    opacity: 0.8;
}

.asmt-pill.is-selected .asmt-pill-prefix[b-h35e1n9xzr] {
    display: none;
}

/* Card grid options */
.asmt-cards[b-h35e1n9xzr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.asmt-card[b-h35e1n9xzr] {
    position: relative;
    aspect-ratio: 1;
    padding: 20px 12px 16px;
    border: 1.5px solid #e0d9cc;
    border-radius: 12px;
    background: #f6f2ec;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.asmt-card:hover[b-h35e1n9xzr] {
    border-color: #009296;
}

.asmt-card.is-selected[b-h35e1n9xzr] {
    border-color: #009296;
    background: #ebfafa;
}

.asmt-card-mark[b-h35e1n9xzr] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #003b3c;
}

.asmt-card.is-selected .asmt-card-mark[b-h35e1n9xzr] {
    color: #009296;
}

.asmt-card-icon[b-h35e1n9xzr] {
    color: #009296;
}

.asmt-card-label[b-h35e1n9xzr] {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    color: #003b3c;
}

/* Demographics & email */
.asmt-form-title[b-h35e1n9xzr] {
    font-family: 'STIX Two Text', serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.15;
    color: #003b3c;
    text-align: center;
    margin: 0 0 12px;
}

.asmt-form-sub[b-h35e1n9xzr] {
    font-size: 16px;
    text-align: center;
    color: rgba(0, 59, 60, 0.75);
    margin: 0 0 32px;
}

.asmt-fields[b-h35e1n9xzr] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    margin: 0 auto;
}

.asmt-field label[b-h35e1n9xzr] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #003b3c;
    margin-bottom: 8px;
}

.asmt-field select[b-h35e1n9xzr],
.asmt-field input[b-h35e1n9xzr] {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e0d9cc;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    color: #003b3c;
    background: #fff;
}

.asmt-field select:focus[b-h35e1n9xzr],
.asmt-field input:focus[b-h35e1n9xzr] {
    outline: none;
    border-color: #009296;
    box-shadow: 0 0 0 2px rgba(0, 146, 150, 0.2);
}

.asmt-field-row[b-h35e1n9xzr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Footer */
.asmt-modal-footer[b-h35e1n9xzr] {
    flex-shrink: 0;
    padding: 16px 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #e7ece9;
    background: #fff;
}

.asmt-footer-actions[b-h35e1n9xzr] {
    width: 100%;
    max-width: 480px;
    display: flex;
    gap: 12px;
}

.asmt-back[b-h35e1n9xzr] {
    flex: 0 0 auto;
    padding: 16px 24px;
    border: 1.5px solid #009296;
    border-radius: 8px;
    background: transparent;
    color: #009296;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.asmt-back:hover:not(:disabled)[b-h35e1n9xzr] {
    background: #ebfafa;
}

.asmt-back:disabled[b-h35e1n9xzr] {
    opacity: 0.4;
    cursor: not-allowed;
}

.asmt-next[b-h35e1n9xzr] {
    flex: 1;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    background: #009296;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.asmt-next:hover:not(:disabled)[b-h35e1n9xzr] {
    background: #007a7e;
}

.asmt-next:disabled[b-h35e1n9xzr] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ======================================================
   Responsive
   ====================================================== */
@media (max-width: 959px) {
    .asmt-page[b-h35e1n9xzr] {
        padding: 0 20px 60px;
    }

    .asmt-section-title[b-h35e1n9xzr] {
        font-size: 42px;
        letter-spacing: -0.84px;
    }

    .asmt-section-subtitle[b-h35e1n9xzr] {
        font-size: 18px;
    }

    .asmt-grid[b-h35e1n9xzr] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .asmt-tile[b-h35e1n9xzr] {
        padding: 24px 12px;
    }

    .asmt-modal-header[b-h35e1n9xzr],
    .asmt-modal-body[b-h35e1n9xzr],
    .asmt-modal-footer[b-h35e1n9xzr] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .asmt-modal-close[b-h35e1n9xzr] {
        right: 12px;
    }

    .asmt-value-line[b-h35e1n9xzr] {
        display: none;
    }

    .asmt-cards[b-h35e1n9xzr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .asmt-field-row[b-h35e1n9xzr] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    .asmt-section-title[b-h35e1n9xzr] {
        font-size: 54px;
    }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .asmt-section-title[b-h35e1n9xzr] {
        font-size: 42px;
    }
}
/* _content/ProcapsMainSite/Components/Pages/CheckoutPages/Cart.razor.rz.scp.css */
/* ======================================================
   Cart Page (/cart) — scoped styles

   Full cart-page rebuild migrated off the runtime Tailwind CDN
   (which was a 200KB+ blocking script on a checkout-flow page).
   Mobile-first; md = 768px+, lg = 1024px+. Class prefix `cp-*`
   mirrors the `mfc-*` convention used by the cart drawer.

   Visual contract: this is a Phase 1 refactor — every rule below
   reproduces the exact rendered output of the original Tailwind
   utility classes. No layout, color, or typography changes.
   ====================================================== */

/* ======================================================
   Page wrapper

   MainLayout's .mud-main-content already pads the body by
   --header-full-h to clear the fixed header — adding our own
   100/120/130px would double-pad and create the visible
   "title floats far below the header" dead space. We just want a
   small intentional breathing gap above the title here.
   ====================================================== */
.cp-page[b-ynsmrlf5bu] {
    padding-top: 32px;
    padding-bottom: 60px;
}

@media (min-width: 768px) {
    .cp-page[b-ynsmrlf5bu] {
        padding-top: 40px;
        padding-bottom: 80px;
    }
}

@media (min-width: 1024px) {
    .cp-page[b-ynsmrlf5bu] {
        padding-top: 48px;
        padding-bottom: 60px;
    }
}

.cp-container[b-ynsmrlf5bu] {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .cp-container[b-ynsmrlf5bu] {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Two-column layout on lg+: items column on the left, sticky summary
   sidebar on the right with a real gap between them. Below lg, single
   column stack — items first, summary below.
   Summary fixed at 420px so the items column expands to fill, giving
   product titles + price columns plenty of breathing room at any
   desktop width. 60px gap reads as intentional whitespace, not a
   layout accident. */
@media (min-width: 1024px) {
    .cp-grid[b-ynsmrlf5bu] {
        display: grid;
        gap: 60px;
        grid-template-columns: minmax(0, 1fr) 420px;
    }
}

.cp-summary-col[b-ynsmrlf5bu] {
    margin-top: 40px;
}

@media (min-width: 1024px) {
    .cp-summary-col[b-ynsmrlf5bu] { margin-top: 0; }
}

/* ======================================================
   Loading + empty states
   ====================================================== */
.cp-loading[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.cp-empty-state[b-ynsmrlf5bu] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    background: #fff;
}

.cp-empty-title[b-ynsmrlf5bu] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    font-size: 40px;
    font-weight: 500;
    margin: 0;
}

@media (min-width: 768px) {
    .cp-empty-title[b-ynsmrlf5bu] { font-size: 48px; }
}

.cp-empty-text[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    color: #406c6d;
    margin: 0;
}

.cp-empty-btn[b-ynsmrlf5bu] {
    background: #009296;
    color: #fff;
    border: 1px solid #009296;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 9999px;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
    .cp-empty-btn:hover[b-ynsmrlf5bu] {
        background: #fff;
        color: #009296;
    }
}

/* ======================================================
   Header — Continue shopping link, title, subtitle
   ====================================================== */
.cp-header[b-ynsmrlf5bu] {
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .cp-header[b-ynsmrlf5bu] { margin-bottom: 28px; }
}

.cp-back-link[b-ynsmrlf5bu] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #009296;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.15s ease;
}

@media (min-width: 768px) {
    .cp-back-link[b-ynsmrlf5bu] { margin-bottom: 14px; }
}

@media (hover: hover) {
    .cp-back-link:hover[b-ynsmrlf5bu] { color: #00b4ae; }
}

.cp-back-link-text[b-ynsmrlf5bu] {
    font-weight: 500;
}

.cp-title[b-ynsmrlf5bu] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    margin: 0 0 6px;
    line-height: 1.1;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.6px;
}

@media (min-width: 768px) {
    .cp-title[b-ynsmrlf5bu] {
        margin-bottom: 8px;
        font-size: 38px;
        letter-spacing: -0.8px;
    }
}

@media (min-width: 1024px) {
    .cp-title[b-ynsmrlf5bu] { font-size: 42px; }
}

/* At the site's largest breakpoint, the page title scales up to match
   the footer headline (72px / -1.44px tracking). Big serif moment that
   anchors the page on wide viewports — same typographic gesture the
   footer uses to close the experience. */
@media (min-width: 1600px) {
    .cp-title[b-ynsmrlf5bu] {
        font-size: 72px;
        letter-spacing: -1.44px;
    }
}

.cp-subtitle[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #003b3c;
    font-size: 12px;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    margin: 0;
}

@media (min-width: 768px) {
    .cp-subtitle[b-ynsmrlf5bu] { font-size: 14px; }
}

/* ======================================================
   Items list
   ====================================================== */
.cp-items[b-ynsmrlf5bu] {
    display: flex;
    flex-direction: column;
}

.cp-item-divider[b-ynsmrlf5bu] {
    height: 1px;
    background: #D9E2E2;
    width: 100%;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .cp-item-divider[b-ynsmrlf5bu] { margin-bottom: 40px; }
}

.cp-item-end-divider[b-ynsmrlf5bu] {
    height: 1px;
    background: #D9E2E2;
    width: 100%;
}

.cp-item[b-ynsmrlf5bu] {
    display: flex;
    gap: 16px;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .cp-item[b-ynsmrlf5bu] {
        gap: 20px;
        margin-bottom: 40px;
    }
}

.cp-item-image-wrap[b-ynsmrlf5bu] {
    background: #F7F2EC;
    position: relative;
    border-radius: 10px;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
}

@media (min-width: 768px) {
    .cp-item-image-wrap[b-ynsmrlf5bu] {
        width: 120px;
        height: 120px;
    }
}

.cp-item-image[b-ynsmrlf5bu] {
    position: absolute;
    inset: 0;
    max-width: none;
    object-fit: cover;
    border-radius: 10px;
    width: 100%;
    height: 100%;
}

.cp-item-content[b-ynsmrlf5bu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp-item-row[b-ynsmrlf5bu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

@media (min-width: 768px) {
    .cp-item-row[b-ynsmrlf5bu] { gap: 20px; }
}

.cp-item-info[b-ynsmrlf5bu] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-item-name[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #003b3c;
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .cp-item-name[b-ynsmrlf5bu] { font-size: 16px; }
}

.cp-item-variant[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #406c6d;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .cp-item-variant[b-ynsmrlf5bu] { font-size: 14px; }
}

/* Per-item promo pill (red — matches discount color) */
.cp-promo-pill[b-ynsmrlf5bu] {
    background: #D84315;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

.cp-promo-pill-text[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    margin: 0;
}

/* Autoship / FlexPay attribute groups stack with a small gap */
.cp-item-attrs[b-ynsmrlf5bu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.cp-attr-row[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-pill[b-ynsmrlf5bu] {
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cp-pill-autoship[b-ynsmrlf5bu] { background: #009296; }
.cp-pill-flexpay[b-ynsmrlf5bu]  { background: #906afe; }

.cp-attr-text[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-size: 13px;
}

.cp-attr-text-autoship[b-ynsmrlf5bu] { color: #009296; }

.cp-attr-text-flexpay[b-ynsmrlf5bu] {
    color: #906afe;
}

@media (min-width: 768px) {
    .cp-attr-text-flexpay[b-ynsmrlf5bu] { font-size: 14px; }
}

.cp-flexpay-block[b-ynsmrlf5bu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-flexpay-note[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    color: #406c6d;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 768px) {
    .cp-flexpay-note[b-ynsmrlf5bu] { font-size: 13px; }
}

/* Right-side price column. With discount: discounted unit on top in
   red, original strikethrough below, savings line under that. Without
   discount: single dark unit price. */
.cp-item-price-col[b-ynsmrlf5bu] {
    text-align: right;
    flex-shrink: 0;
}

.cp-item-price-discounted[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: #D84315;
    margin: 0;
}

.cp-item-price-original[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #406c6d;
    text-decoration: line-through;
    margin: 4px 0 0;
}

.cp-item-savings[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #009296;
    font-weight: 500;
    margin: 4px 0 0;
}

.cp-item-price[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    color: #003b3c;
    margin: 0;
}

@media (min-width: 768px) {
    .cp-item-price-discounted[b-ynsmrlf5bu],
    .cp-item-price[b-ynsmrlf5bu]        { font-size: 16px; }
    .cp-item-price-original[b-ynsmrlf5bu] { font-size: 14px; }
    .cp-item-savings[b-ynsmrlf5bu]      { font-size: 13px; }
}

/* ======================================================
   Item actions row — qty stepper (left) + remove (right)
   ====================================================== */
.cp-item-actions[b-ynsmrlf5bu] {
    margin-top: 12px;
}

.cp-item-actions-row[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cp-stepper-area[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.cp-stepper[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Qty +/- buttons. 36px circle border, dark stroke, hover fades to 70%
   opacity. Disabled state lifts opacity back and grays the stroke (the
   minus button shows a light grey stroke when disabled at qty=1, which
   is rendered inline via @( ... ) ternary on the SVG stroke; the .cp-
   qty-btn-disabled-stroke class achieves the same effect with CSS so
   we don't need conditional inline attributes). */
.cp-qty-btn[b-ynsmrlf5bu] {
    appearance: none;
    background: transparent;
    border: 1px solid #003B3C;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: #003B3C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
    .cp-qty-btn:not(:disabled):hover[b-ynsmrlf5bu] {
        border-color: #009296;
        color: #009296;
        background-color: rgba(0, 146, 150, 0.06);
    }
}

.cp-qty-btn:disabled[b-ynsmrlf5bu] {
    cursor: not-allowed;
    border-color: #C2CFCF;
    color: #C2CFCF;
}

.cp-qty-value[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #003b3c;
    font-size: 16px;
    min-width: 20px;
    text-align: center;
    margin: 0;
}

/* Free-typing qty input — same visual cell as .cp-qty-value would have
   been, but accepts direct keyboard input. Hides the native browser
   spinner (we have our own +/- buttons) and shows a soft teal underline
   on focus so editability is obvious without a heavy outlined-textfield
   treatment. */
.cp-qty-input[b-ynsmrlf5bu] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 40px;
    text-align: center;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #003b3c;
    box-shadow: 0 1px 0 transparent;
    transition: box-shadow 0.15s ease;
    cursor: text;
}

.cp-qty-input[b-ynsmrlf5bu]::-webkit-outer-spin-button,
.cp-qty-input[b-ynsmrlf5bu]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cp-qty-input:focus[b-ynsmrlf5bu] {
    outline: none;
    box-shadow: 0 1px 0 #009296;
}

.cp-qty-input:disabled[b-ynsmrlf5bu] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .cp-qty-input[b-ynsmrlf5bu] {
        transition: none;
    }
}

.cp-item-remove[b-ynsmrlf5bu] {
    appearance: none;
    background: transparent;
    border: 0;
    color: #406c6d;
    padding: 8px;
    margin-right: -8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .cp-item-remove:not(:disabled):hover[b-ynsmrlf5bu] { color: #009296; }
}

.cp-item-remove:disabled[b-ynsmrlf5bu] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ======================================================
   Free shipping bar — appears in TWO places (mobile under
   items list, desktop inside the order summary). Same visual
   contract; visibility is controlled by `.cp-shipping-bar-mobile`
   and `.cp-shipping-bar-desktop` wrappers below.
   ====================================================== */
.cp-shipping-bar[b-ynsmrlf5bu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    background: #F5F9F9;
    border-radius: 12px;
    padding: 20px;
    box-sizing: border-box;
}

/* Success state shares the in-progress neutral-teal background so the
   bar reads as one consistent surface. The unlock is signaled via text
   color (teal) + the progress bar being conditionally omitted in markup. */
.cp-shipping-bar-success .cp-shipping-bar-text[b-ynsmrlf5bu],
.cp-shipping-bar-success .cp-shipping-bar-text-strong[b-ynsmrlf5bu] {
    color: #009296;
}

.cp-shipping-bar-row[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* Truck icon — single shared rule. The SVG itself is identical at both
   render sites (mobile + desktop shipping bars) so this scopes the same
   sizing and overflow behavior to either copy. */
.cp-shipping-bar-icon-wrap[b-ynsmrlf5bu] {
    overflow: clip;
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.cp-shipping-bar-icon-mid[b-ynsmrlf5bu] {
    position: absolute;
    inset: 10.42% 2.08% 6.25% 6.25%;
}

.cp-shipping-bar-icon-inner[b-ynsmrlf5bu] {
    position: absolute;
    inset: -4.5% -4.09%;
}

.cp-shipping-bar-icon-svg[b-ynsmrlf5bu] {
    display: block;
    width: 100%;
    height: 100%;
}

.cp-shipping-bar-text[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #003b3c;
    margin: 0;
}

.cp-shipping-bar-text-strong[b-ynsmrlf5bu] {
    font-weight: 500;
}

.cp-shipping-bar-track[b-ynsmrlf5bu] {
    position: relative;
    width: 100%;
    height: 6px;
    background: #D9E2E2;
    border-radius: 9999px;
    overflow: hidden;
}

.cp-shipping-bar-fill[b-ynsmrlf5bu] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #009296;
    border-radius: 9999px;
    transition: width 0.3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .cp-shipping-bar-fill[b-ynsmrlf5bu] { transition: none; }
}

/* Mobile copy: shown below the items list, hidden on lg+. */
.cp-shipping-bar-mobile[b-ynsmrlf5bu] {
    margin-top: 30px;
}

@media (min-width: 768px) {
    .cp-shipping-bar-mobile[b-ynsmrlf5bu] { margin-top: 40px; }
}

@media (min-width: 1024px) {
    .cp-shipping-bar-mobile[b-ynsmrlf5bu] { display: none; }
}

/* Desktop copy: inside the summary card, hidden below lg. Compact
   variant (smaller padding, tighter gap) so the summary card fits
   above the fold on standard 1440x900 viewports. */
.cp-shipping-bar-desktop[b-ynsmrlf5bu] {
    display: none;
    margin-bottom: 14px;
}

@media (min-width: 1024px) {
    .cp-shipping-bar-desktop[b-ynsmrlf5bu] { display: block; }
    .cp-shipping-bar-desktop .cp-shipping-bar[b-ynsmrlf5bu] {
        padding: 12px 14px;
        gap: 8px;
        border-radius: 10px;
    }
    .cp-shipping-bar-desktop .cp-shipping-bar-text[b-ynsmrlf5bu] { font-size: 13px; }
}

/* ======================================================
   Order summary card
   ====================================================== */
.cp-summary[b-ynsmrlf5bu] {
    border: 1px solid #D9E2E2;
    border-radius: 10px;
    padding: 24px;
}

@media (min-width: 768px) {
    .cp-summary[b-ynsmrlf5bu] { padding: 28px; }
}

@media (min-width: 1024px) {
    .cp-summary[b-ynsmrlf5bu] {
        position: sticky;
        top: 30px;
    }
}

.cp-summary-title[b-ynsmrlf5bu] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    margin: 0 0 16px;
    line-height: 1.2;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.3px;
}

@media (min-width: 768px) {
    .cp-summary-title[b-ynsmrlf5bu] {
        margin-bottom: 18px;
        font-size: 24px;
    }
}

@media (min-width: 1024px) {
    .cp-summary-title[b-ynsmrlf5bu] { font-size: 26px; }
}

/* Discount celebration card. Soft teal tint background, brand-teal
   sparkles icon. The framing is "you saved money" rather than
   "money was subtracted" — keeps the moment positive without the
   playful-emoji informality. */
.cp-discount-card-wrap[b-ynsmrlf5bu] {
    margin-bottom: 14px;
}

.cp-discount-card[b-ynsmrlf5bu] {
    width: 100%;
    background: #F5F9F9;
    border-radius: 10px;
    padding: 12px 14px;
    box-sizing: border-box;
}

.cp-discount-card-header[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.cp-discount-icon[b-ynsmrlf5bu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #009296;
    flex-shrink: 0;
}

/* Body copy inside the discount card stays dark — only the headline
   ("Discount Applied!") takes the brand teal as the celebratory cue.
   The detail line ("You are saving $X on your order.") reads as a
   calm, factual confirmation underneath. */
.cp-discount-text[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #003b3c;
    margin: 0;
}

.cp-discount-card-header .cp-discount-text[b-ynsmrlf5bu] {
    color: #009296;
}

.cp-discount-text-strong[b-ynsmrlf5bu] { font-weight: 500; }

.cp-discount-card-detail[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Totals block (Subtotal / Discount / Shipping / Total). Order matches
   the cart drawer's totals stack — Subtotal → Discount → Shipping → Total
   with a hairline divider before the final Total line. */
.cp-totals[b-ynsmrlf5bu] {
    margin-bottom: 14px;
}

@media (min-width: 768px) {
    .cp-totals[b-ynsmrlf5bu] { margin-bottom: 16px; }
}

.cp-totals-row[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cp-totals-shipping-row[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* Totals rows kept light + refined — 14px / 400 — so the summary
   card reads as calm and premium, not heavy. Same spec applied to
   the drawer for consistency across both views. */
.cp-totals-label[b-ynsmrlf5bu],
.cp-totals-value[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    color: #003b3c;
    font-size: 14px;
    line-height: 1.4;
}

.cp-totals-discount-label[b-ynsmrlf5bu],
.cp-totals-discount-value[b-ynsmrlf5bu] {
    color: #009296;
}

.cp-totals-shipping-value[b-ynsmrlf5bu] {
    font-weight: 500;
    color: #009296;
}

.cp-totals-divider[b-ynsmrlf5bu] {
    height: 1px;
    background: #D9E2E2;
    width: 100%;
    margin-bottom: 14px;
}

.cp-totals-total[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Final total — bigger than breakdown rows but kept at weight 500
   (medium, not bold) to stay refined. It's still clearly the primary
   numeric line via size alone, no need for chunky weight. */
.cp-totals-total-label[b-ynsmrlf5bu],
.cp-totals-total-value[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #003b3c;
    font-size: 18px;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .cp-totals-total-label[b-ynsmrlf5bu],
    .cp-totals-total-value[b-ynsmrlf5bu] { font-size: 20px; }
}

.cp-summary-disclaimer[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    color: #406c6d;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 14px;
}

@media (min-width: 768px) {
    .cp-summary-disclaimer[b-ynsmrlf5bu] { font-size: 13px; }
}

/* Invert-on-hover matches the drawer's CHECKOUT button (mfc-btn-filled) —
   teal fill becomes white fill with teal text + teal border. Reads as
   one consistent "primary action" pattern across both views. */
.cp-checkout-btn[b-ynsmrlf5bu] {
    appearance: none;
    width: 100%;
    background: #009296;
    color: #fff;
    border: 1px solid #009296;
    height: 50px;
    border-radius: 9999px;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) {
    .cp-checkout-btn:hover[b-ynsmrlf5bu] {
        background: #fff;
        color: #009296;
    }
    .cp-checkout-btn:hover .cp-checkout-btn-text[b-ynsmrlf5bu] { color: #009296; }
}

.cp-checkout-btn-text[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    letter-spacing: 1.92px;
    text-transform: uppercase;
}

.cp-help-text[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    color: #406c6d;
    font-size: 13px;
    line-height: 1.6;
    margin: 16px 0 0;
    text-align: center;
}

@media (min-width: 768px) {
    .cp-help-text[b-ynsmrlf5bu] { font-size: 14px; }
}

.cp-help-text-strong[b-ynsmrlf5bu] { font-weight: 500; }

.cp-help-link[b-ynsmrlf5bu] {
    color: inherit;
    text-decoration: underline;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .cp-help-link:hover[b-ynsmrlf5bu] { color: #009296; }
}

/* ======================================================
   Mobile sticky checkout CTA — pinned to bottom of viewport
   below lg. Industry standard for long-cart mobile UX so the
   commit moment is always one tap away regardless of scroll
   position. Hidden on desktop where the sticky summary
   sidebar already keeps CHECKOUT in view.
   ====================================================== */
.cp-sticky-checkout[b-ynsmrlf5bu] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: #fff;
    border-top: 1px solid #D9E2E2;
    /* Soft drop shadow lifts it off the page content above so the
       boundary is visible without a heavy line. */
    box-shadow: 0 -4px 12px rgba(0, 59, 60, 0.06);
    padding: 12px 20px;
    /* Honor iOS safe area so the bar doesn't sit under the home
       indicator on notched devices. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .cp-sticky-checkout[b-ynsmrlf5bu] { display: none; }
}

.cp-sticky-checkout-inner[b-ynsmrlf5bu] {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.cp-sticky-checkout-total[b-ynsmrlf5bu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.cp-sticky-checkout-label[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #406c6d;
    line-height: 1.2;
}

.cp-sticky-checkout-value[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #003b3c;
    line-height: 1.2;
}

.cp-sticky-checkout-btn[b-ynsmrlf5bu] {
    appearance: none;
    flex: 1;
    background: #009296;
    color: #fff;
    border: 1px solid #009296;
    height: 48px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

@media (hover: hover) {
    .cp-sticky-checkout-btn:hover[b-ynsmrlf5bu] {
        background: #fff;
        color: #009296;
    }
    .cp-sticky-checkout-btn:hover .cp-sticky-checkout-btn-text[b-ynsmrlf5bu] { color: #009296; }
}

.cp-sticky-checkout-btn-text[b-ynsmrlf5bu] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color 0.18s ease;
}

/* Page bottom-padding gets a phantom buffer below lg so the sticky bar
   doesn't cover the last bit of cart content (help link, footer space).
   60px = bar height + breathing room. */
@media (max-width: 1023px) {
    .cp-page[b-ynsmrlf5bu] {
        padding-bottom: 100px;
    }
}
/* _content/ProcapsMainSite/Components/Pages/Ingredients.razor.rz.scp.css */
/* ======================================================
   Ingredients Index — scoped
   Sticky A-Z jump nav + multi-column ingredient grid + sticky CTA sidebar.
   Breakpoints: ≤959 mobile | 960-1279 tablet | 1280-1599 lg | 1600+ xl
   ====================================================== */

/* Hidden-until-focused skip link for keyboard users */
.ing-skip[b-76muzpd0yl] {
    position: absolute;
    left: -9999px;
    top: 0;
}

.ing-skip:focus[b-76muzpd0yl] {
    position: fixed;
    top: calc(var(--header-h) + 8px);
    left: 16px;
    padding: 10px 16px;
    background: #003b3c;
    color: #fff;
    border-radius: 8px;
    z-index: 1000;
    font-family: Inter, sans-serif;
    font-size: 14px;
    text-decoration: none;
}

.ing-page[b-76muzpd0yl] {
    /* Full-width content with a 40px gutter, matching the rest of the site */
    padding: 0 40px 80px;
}

.ing-layout[b-76muzpd0yl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    padding-top: 8px;
}

/* ======================================================
   A-Z jump bar — inline (visible in natural flow under the banner)
   ====================================================== */
.ing-jump[b-76muzpd0yl] {
    background: #fff;
    padding: 16px 40px;
    margin: 0 -40px;
}

/* ======================================================
   A-Z jump bar — fixed twin (shown once the inline one scrolls away)
   Pure CSS position:sticky doesn't work here (MudBlazor ancestors create
   a containing-block boundary we couldn't isolate), so we use a hidden
   fixed duplicate that fades in to create the same visual effect.
   ====================================================== */
.ing-jump--stuck[b-76muzpd0yl] {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 90;                               /* below fixed page header (100) */
    margin: 0;
    padding: 16px 40px;
    /* Opacity-only (no transform) keeps text crisp. Fast transition prevents
       the inline-nav-still-visible-while-stuck-fades-in overlap that reads as
       a small "jump" when the user's eye catches the swap. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.08s ease, visibility 0.08s;
}

.ing-jump--stuck.is-visible[b-76muzpd0yl] {
    opacity: 1;
    visibility: visible;
}

/* Horizontal scrollable letter row — letters are direct children of .ing-jump */
.ing-jump[b-76muzpd0yl],
.ing-jump--stuck[b-76muzpd0yl] {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ing-jump[b-76muzpd0yl]::-webkit-scrollbar,
.ing-jump--stuck[b-76muzpd0yl]::-webkit-scrollbar { display: none; }

.ing-jump-btn[b-76muzpd0yl] {
    flex: 0 0 auto;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f6f2ec;
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ing-jump-btn:hover[b-76muzpd0yl] {
    background: #e0ece8;
    color: #003b3c;
}

.ing-jump-btn.is-active[b-76muzpd0yl] {
    background: #009296;
    color: #fff;
}

.ing-jump-btn:focus-visible[b-76muzpd0yl] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

/* Disabled state: letter exists in the alphabet but has no ingredients.
   Greyed out, not clickable, but still visible to preserve the full A-Z grid. */
.ing-jump-btn[disabled][b-76muzpd0yl] {
    opacity: 0.35;
    cursor: not-allowed;
}

.ing-jump-btn[disabled]:hover[b-76muzpd0yl] {
    background: #f6f2ec;                       /* no hover color change */
    color: #003b3c;
}

/* ======================================================
   Ingredient sections
   ====================================================== */
.ing-list[b-76muzpd0yl] {
    padding: 16px 0 0;
}

.ing-section[b-76muzpd0yl] {
    padding: 32px 0 24px;
    /* Reserves space below the fixed header (var) + fixed A-Z nav (60px) +
       20px visual buffer, so clicked letters land cleanly below both. */
    scroll-margin-top: calc(var(--header-h) + 80px);
}

.ing-section + .ing-section[b-76muzpd0yl] {
    border-top: 1px solid #e7ece9;
}

.ing-section-title[b-76muzpd0yl] {
    /* Matches homepage .hero-headline sizing across breakpoints */
    font-family: 'STIX Two Text', serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.44px;
    color: #003b3c;
    margin: 0 0 24px;
}

.ing-items[b-76muzpd0yl] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 6px;
}

.ing-item[b-76muzpd0yl] {
    display: inline-block;
    padding: 6px 0;
    color: #003b3c;
    text-decoration: none;
    font-family: Inter, sans-serif;
    font-size: 20px;
    line-height: 1.5;
    transition: color 0.15s ease;
}

.ing-item:hover[b-76muzpd0yl],
.ing-item:focus-visible[b-76muzpd0yl] {
    color: #009296;
}

.ing-item:focus-visible[b-76muzpd0yl] {
    outline: none;
}

/* ======================================================
   Right-rail CTA (quality commitment)
   Starts lower on the page so it sits visually alongside the ingredient list
   rather than hugging the top of the layout.
   ====================================================== */
.ing-side[b-76muzpd0yl] {
    /* Sticks alongside the list on desktop, keeping the CTA visible while scrolling.
       margin-top roughly lines the top of the CTA with the "#" letter heading
       on the left (nav height + list-padding + section-padding ≈ 100px). */
    position: sticky;
    top: calc(var(--header-h) + 80px);
    align-self: start;
    margin-top: 100px;
}

.ing-cta[b-76muzpd0yl] {
    background: #009296;
    color: #fff;
    border-radius: 20px;
    padding: 36px 32px;
    /* Text is left-aligned (per design reference). Button is centered on its own line. */
}

.ing-cta-icon[b-76muzpd0yl] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.14);         /* subtle darker-teal circle behind the leaf */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin: 0 0 24px;
}

.ing-cta-title[b-76muzpd0yl] {
    font-family: 'STIX Two Text', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 16px;
    color: #fff;
}

.ing-cta-body[b-76muzpd0yl] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 28px;
    color: #fff;
    opacity: 0.92;
}

.ing-cta-btn[b-76muzpd0yl] {
    display: block;
    width: 100%;                              /* full-width pill across the card */
    box-sizing: border-box;
    background: #fff;
    color: #009296;
    padding: 14px 20px;
    border-radius: 999px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.ing-cta-btn:hover[b-76muzpd0yl] {
    background: #f0faf9;
    transform: translateY(-1px);
}

.ing-cta-btn:focus-visible[b-76muzpd0yl] {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* ======================================================
   Lg: 1280-1599px — tighter rail
   ====================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
    .ing-page[b-76muzpd0yl] { padding: 0 40px 60px; }
    .ing-layout[b-76muzpd0yl] {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 40px;
    }
    /* Matches homepage .hero-headline scaling at this breakpoint */
    .ing-section-title[b-76muzpd0yl] { font-size: 54px; letter-spacing: -1.08px; }
    .ing-item[b-76muzpd0yl] { font-size: 16px; }
}

/* ======================================================
   Tablet: 960-1279px — stack sidebar below main
   ====================================================== */
@media (min-width: 960px) and (max-width: 1279px) {
    .ing-page[b-76muzpd0yl] { padding: 0 40px 60px; }
    .ing-layout[b-76muzpd0yl] {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .ing-side[b-76muzpd0yl] {
        position: static;        /* no point sticking when it's below the list */
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }
    .ing-section-title[b-76muzpd0yl] { font-size: 42px; letter-spacing: -0.84px; }
    .ing-items[b-76muzpd0yl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
    .ing-item[b-76muzpd0yl] { font-size: 16px; }
}

/* ======================================================
   Mobile: ≤959px — stacked, tighter type, single column
   ====================================================== */
@media (max-width: 959px) {
    .ing-page[b-76muzpd0yl] { padding: 0 20px 48px; }

    .ing-layout[b-76muzpd0yl] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ing-jump[b-76muzpd0yl] {
        position: relative;                    /* anchor for the fade pseudo */
        margin: 0 -20px;
        padding: 10px 20px;
    }

    .ing-jump--stuck[b-76muzpd0yl] {
        /* Re-declare positioning: mobile .ing-jump above sets position:relative
           (to anchor the right-edge fade pseudo), and because the stuck twin
           has both classes, CSS cascade source-order makes the relative rule
           win over the default fixed positioning. Without this re-declaration
           the stuck twin renders in document flow on mobile instead of pinned
           to the viewport — causing both navs to appear stacked. */
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        margin: 0;
        padding: 10px 20px;
    }

    /* Right-edge fade indicates the A-Z bar is horizontally scrollable.
       Applied to both the inline and the stuck nav on mobile. */
    .ing-jump[b-76muzpd0yl]::after,
    .ing-jump--stuck[b-76muzpd0yl]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 32px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
        z-index: 1;
    }

    .ing-jump-btn[b-76muzpd0yl] {
        min-width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .ing-section[b-76muzpd0yl] {
        padding: 24px 0 16px;
        scroll-margin-top: calc(var(--header-h) + 60px);
    }

    .ing-section-title[b-76muzpd0yl] {
        font-size: 30px;
        letter-spacing: -0.6px;
        margin: 0 0 12px;
    }

    .ing-items[b-76muzpd0yl] {
        grid-template-columns: 1fr;
    }

    .ing-item[b-76muzpd0yl] {
        font-size: 16px;
        padding: 8px 0;         /* slightly larger touch target */
    }

    .ing-side[b-76muzpd0yl] {
        position: static;
        max-width: none;
    }

    .ing-cta[b-76muzpd0yl] {
        padding: 32px 24px;
    }

    .ing-cta-title[b-76muzpd0yl] { font-size: 26px; }
    .ing-cta-body[b-76muzpd0yl] { font-size: 14px; }
}
/* _content/ProcapsMainSite/Components/Pages/ProductPages/MainProductDetailsPage.razor.rz.scp.css */
/* ============================================================
   Main Product Details Page (PDP) — scoped styles

   ============================================================
   FOUNDATION (read first before adding new rules)
   ============================================================

   BREAKPOINT TIERS (use these and ONLY these):
     0-1023            mobile + tablet (single column layout)
     ≥1024             two-column layout activates
     ≥1280             full-desktop refinements (sidebar thumbs,
                       gallery min-width: 725, info max-width: 800)
     ≥1600             wide-desktop type-scale tweaks

   PAGE GUTTER (L/R padding on every top-level section):
     0-1023:  20px (--pdp-gutter)
     ≥1024:   40px (--pdp-gutter)
   The gutter is owned by the design-token block immediately below;
   every top-level section uses `padding-left/right: var(--pdp-gutter)`
   so changing the gutter is a one-place edit instead of a per-section
   hunt across the file.

   BEFORE ADDING A NEW SECTION OR RULE:
     1. Section L/R padding → use `var(--pdp-gutter)`. Don't hardcode.
     2. Two-class element specificity → combine selectors
        (e.g. `.descriptionTabs.pdp-accordion-group`) so source order
        doesn't decide cascade winners.
     3. New breakpoint? → don't. Pick from the four above.
     4. Container queries (`@container pdp-info ...`) drive layout
        decisions inside the right-column info area, not the page.

   ============================================================
   PRIOR HISTORY (kept for context, do not extend)
   ============================================================

   Phase C-3: breakpoint consolidation + mobile-first rewrite
   (2026-04-30).

   The 960px tier is reserved but not used here — PDP layout
   shifts happen at 1024 (single→two-col) and 1280 (full desktop
   refinements) rather than mid-tablet.

   COLLAPSED FROM 21 PRIOR BREAKPOINTS:
   - 1680, 1500, 1440, 1400         → folded into Wide (≥1600) tier or Desktop overrides
   - 1300, 1280 (3x), 1260          → folded into Desktop (≥1280) tier
   - 1180, 1105, 1024               → folded into Desktop (≥1280) tier (these
                                       were below-1280 overrides; mobile-first
                                       inverts that — defaults inherit, desktop
                                       takes the larger value)
   - 974 (2x), 890, 751             → folded into mobile defaults; tablet
                                       (≥768) takes any 768-974 specific values
   - landscape variants (768-974,
     975-1279)                      → preserved verbatim at the bottom for
                                       narrow tablet-landscape edge cases that
                                       the standard tiers can't replicate

   Mike to spot-check at 375, 768, 1280, 1600. Behavior at non-
   standard widths (974, 1180, 1300, etc.) WILL change — that's
   the consolidation working as intended.
   ============================================================ */

body[b-8omfekxfl5] {
    overflow-x: hidden;
}

.allow-page-scroll[b-8omfekxfl5],
.allow-page-scroll *[b-8omfekxfl5] {
    touch-action: pan-y !important;
}

.heartSpacing[b-8omfekxfl5] {
    margin-top: -80px;
    margin-right: 30px;
}

/* ============================================================
   Image gallery — main carousel + thumbnail strip
   ============================================================ */

.heartSpacingCarousel[b-8omfekxfl5] {
    margin-top: -25px; /* mobile baseline; lifts to -5 desktop */
}

.CarouselBoxHeight[b-8omfekxfl5] {
    height: 630px; /* mobile baseline; tier overrides below */
}

.CarouselBoxFirstOut[b-8omfekxfl5] {
    height: 700px; /* shared mobile + wide value; desktop tier compresses */
}

.CarouselBoxFirst[b-8omfekxfl5] {
    border-radius: 20px;
    background: #F6F2EC;
    padding: 20px;
    margin-bottom: 20px;
    height: 500px; /* mobile baseline */
}

.CarouselBoxSecond[b-8omfekxfl5] {
    height: 80px; /* mobile baseline; lifts to 100 desktop+ */
}

.imgSizesBox[b-8omfekxfl5] {
    max-width: 300px;
    max-height: 300px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.PDPImage[b-8omfekxfl5] {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* Mobile-friendly default to prevent cropping */
    background-color: #F6F2EC;
}

/* ============================================================
   Sticky add-to-cart bar — mobile only.

   Sits fixed at the bottom of the viewport. Hidden by default
   (transform: translateY(100%)). Slides up when the original
   purchase row scrolls out of view (JS toggles --visible class
   via IntersectionObserver). Hidden entirely on desktop where
   the right-column Add to Cart stays accessible via the layout.

   Includes safe-area-inset-bottom padding so the bar doesn't
   sit under the home indicator on iPhones with notches.
   ============================================================ */
.pdp-sticky-cart[b-8omfekxfl5] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #FFFFFF;
    border-top: 1px solid #D9E2E2;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: none;
    will-change: transform;
}

.pdp-sticky-cart--visible[b-8omfekxfl5] {
    transform: translateY(0);
    pointer-events: auto;
}

.pdp-sticky-cart-inner[b-8omfekxfl5] {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
}

.pdp-sticky-cart-btn[b-8omfekxfl5] {
    appearance: none;
    width: 100%;
    min-width: 0;
    height: 50px;
    border: 1px solid #009296;
    background: #009296;
    color: #FFFFFF;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdp-sticky-cart-btn-price[b-8omfekxfl5] {
    font-weight: 500;
}

@media (hover: hover) {
    .pdp-sticky-cart-btn:not(:disabled):hover[b-8omfekxfl5] {
        background: #FFFFFF;
        color: #009296;
    }
}

.pdp-sticky-cart-btn:disabled[b-8omfekxfl5] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Hide on desktop — the original Add to Cart in the right column
   stays accessible via the layout, so no sticky needed. */
@media (min-width: 1024px) {
    .pdp-sticky-cart[b-8omfekxfl5] {
        display: none !important;
    }
}

/* ============================================================
   Native gallery (replaces MudCarousel).

   Two modes share the same markup, switched via media query:
     • Mobile (<1024): horizontal scroll-snap. The .pdp-gallery-track
       is a horizontal flex scroller, each slide takes 100% width with
       scroll-snap-align: center. Browser handles touch swipe + momentum
       + snapping natively. The pdpGallery JS observes scroll position
       via IntersectionObserver and updates _carouselIndex so the
       pagination dots stay synced.
     • Desktop (≥1024): crossfade. All slides absolute-positioned to
       overlap inside the frame. Active slide opacity 1; others opacity 0
       with a 280ms ease transition. Arrows + thumbnail clicks just
       change which slide is active — no directional motion.
   ============================================================ */

.pdp-gallery-frame[b-8omfekxfl5] {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    background-color: #F6F2EC;
}

.pdp-gallery-track[b-8omfekxfl5] {
    /* Mobile baseline — scroll-snap horizontal flex */
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /*touch-action: pan-y pinch-zoom;*/ /* allow vertical page scroll while swiping */
}

.pdp-gallery-track[b-8omfekxfl5]::-webkit-scrollbar {
    display: none;
}

.pdp-gallery-slide[b-8omfekxfl5] {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F6F2EC;
}

.pdp-gallery-img[b-8omfekxfl5],
.pdp-gallery-video[b-8omfekxfl5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border: 0;
}

/* First main slide only: wrapper for overlay pill (Today's / Monthly special). */
.pdp-gallery-slide-inner[b-8omfekxfl5] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-gallery-slide-inner .pdp-gallery-img[b-8omfekxfl5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pdp-image-special-pill[b-8omfekxfl5] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex !important;
    align-items: center;
    padding: 5px 12px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #D84315 !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.8px !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    max-width: calc(100% - 24px);
    pointer-events: none;
}

@media (min-width: 1280px) {
    .pdp-image-special-pill[b-8omfekxfl5] {
        padding: 7px 16px;
        top: 16px;
        right: 16px;
    }
}

@media only screen and (max-width: 430px) {
    .pdp-image-special-pill[b-8omfekxfl5] {
        padding: 7px 16px;
        top: 333px;
        right: 205px;
    }
}

/* Arrow buttons — hidden on mobile (touch swipe replaces them) */
.pdp-gallery-arrow[b-8omfekxfl5] {
    display: none;
}

@media (min-width: 1024px) {
    /* Crossfade mode: absolute-position slides, fade between them */
    .pdp-gallery-track[b-8omfekxfl5] {
        display: block;
        position: relative;
        overflow: hidden;
        scroll-snap-type: none;
        touch-action: auto;
    }
    .pdp-gallery-slide[b-8omfekxfl5] {
        position: absolute;
        inset: 0;
        flex: none;
        opacity: 0;
        transition: opacity 280ms ease;
        pointer-events: none;
    }
    .pdp-gallery-slide--active[b-8omfekxfl5] {
        opacity: 1;
        pointer-events: auto;
        z-index: 1;
    }

    /* Round circular arrow buttons, shown on hover-capable viewports */
    .pdp-gallery-arrow[b-8omfekxfl5] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        border: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #003B3C;
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
        z-index: 5;
        padding: 0;
    }

    .pdp-gallery-arrow:hover:not(:disabled)[b-8omfekxfl5] {
        background: #FFFFFF;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    }

    /* Disabled state — boundary slides (first/last). Visibly muted so
       users can see they've reached the end of the gallery. */
    .pdp-gallery-arrow:disabled[b-8omfekxfl5] {
        opacity: 0.35;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    }

    .pdp-gallery-arrow svg[b-8omfekxfl5] {
        width: 22px;
        height: 22px;
    }

    .pdp-gallery-arrow--prev[b-8omfekxfl5] { left: 16px; }
    .pdp-gallery-arrow--next[b-8omfekxfl5] { right: 16px; }
}

.PDPCarouselImage[b-8omfekxfl5] {
    background-size: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

.PDPCarouselSlides[b-8omfekxfl5] {
    max-width: 1840px;
    margin-left: auto;
    margin-right: auto;
    /* "We also recommend" section rhythm — uses --pdp-section-y token
       so padding scales with the same crescendo as the other sections.
       Replaces old fixed padding 0/50 split that didn't scale smoothly. */
    padding: var(--pdp-section-y) var(--pdp-gutter);
}

.PDPImageHeight[b-8omfekxfl5] {
    height: 45vh; /* mobile baseline; tier overrides below scale up */
}

.CarouselHight[b-8omfekxfl5] {
    height: 440px; /* mobile baseline; lifts to 600 desktop */
}

.carousel-Title-items[b-8omfekxfl5] {
    font-size: 19px;
    font-weight: 400;
    color: #004c45;
    font-family: "STIX Two Text", serif;
    margin: 0;
    padding: 10px 0 10px 0;
    height: auto; /* mobile: natural height; tiers may set fixed below */
}

.carousel-stars[b-8omfekxfl5] {
    width: 155px;
    margin: 0;
    padding: 20px 0 10px 0;
}

/* ---- DESKTOP DEFAULTS (gallery thumbnails) ---- */

/* Gallery row container — flex row of [thumb sidebar | main image].
   16px gap matches the prototype design; on mobile/tablet the sidebar
   is hidden via .thumb-strip's own rule and only the main image shows. */
.pdp-gallery-row[b-8omfekxfl5] {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
}

/* Sidebar thumb strip — hidden on mobile/tablet, shown on desktop.
   Width matches the thumb size (75px) so there's no extra padding
   around the thumbnail column eating into the gap-to-main-image. */
.thumb-strip[b-8omfekxfl5] {
    display: none; /* mobile/tablet default: hide sidebar */
    width: 75px;
    min-width: 75px;
    flex-shrink: 0;
}

/* Vertical stack of thumbnails inside the sidebar. 10px gap between
   thumbs (was 4px from MudStack default — too tight). */
.gallery-sidebar-thumbnails[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 725px;
    overflow-y: auto;
    /* Hide the scrollbar visually but keep scroll functional. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gallery-sidebar-thumbnails[b-8omfekxfl5]::-webkit-scrollbar {
    display: none;
}

/* Mobile dot indicators — replaces the horizontal thumbnail strip
   below the carousel on mobile/tablet. Active dot grows wider in brand
   teal (8x24); inactive dots are square teal-grey (8x8). Each is a
   button that jumps to its image, so functionality matches what
   thumbnails provided. */
.gallery-dots[b-8omfekxfl5] {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    margin-top: 8px;
}

@media (min-width: 1280px) {
    .gallery-dots[b-8omfekxfl5] { display: none; }
}

.gallery-dot[b-8omfekxfl5] {
    appearance: none;
    border: 0;
    padding: 0;
    height: 8px;
    width: 8px;
    border-radius: 999px;
    background: #D9E2E2;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.gallery-dot--active[b-8omfekxfl5] {
    width: 24px;
    background: #009296;
}

/* Thumbnails — both .thumb (mobile) and .gallery-thumb (desktop sidebar)
   share the same visual treatment: 75x75 cream tile, 8px radius, brand-
   teal active border. Background lets the contained product image show
   on the cream surface instead of cropping to fill. Active state uses
   an inset ::after with box-sizing: border-box so the inset border
   stays inside the parent's overflow:hidden boundary. */
.thumb[b-8omfekxfl5],
.gallery-thumb[b-8omfekxfl5] {
    position: relative;
    width: 75px;
    height: 75px;
    min-width: 75px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background-color: #F6F2EC;
    box-sizing: border-box;
}

.thumb[b-8omfekxfl5] {
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Inner image — fills the cream tile, contained so the product photo
   doesn't crop and we can see the cream surround. */
.gallery-thumb img[b-8omfekxfl5],
.thumb img[b-8omfekxfl5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Video thumbnail variant — relative wrapper for the centered play icon
   overlay, plus a slight dim on the still so the icon reads cleanly. */
.gallery-thumb--video[b-8omfekxfl5] {
    position: relative;
}

.gallery-thumb--video img[b-8omfekxfl5] {
    opacity: 0.85;
}

.gallery-thumb-play-icon[b-8omfekxfl5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.25rem;
    pointer-events: none;
    opacity: 0.95;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

    .gallery-thumb--active[b-8omfekxfl5]::after,
    .thumb--active[b-8omfekxfl5]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid var(--mud-palette-primary);
        border-radius: inherit;
        pointer-events: none;
        z-index: 10;
        box-sizing: border-box;
    }

.video-crop-container[b-8omfekxfl5] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background-color: #F6F2EC;
}

.zoomed-video[b-8omfekxfl5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    border: none;
}

.video-thumb-img[b-8omfekxfl5] {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
}

/* ============================================================
   PDP DESIGN TOKENS — single source of truth
   ------------------------------------------------------------
   Defined on every top-level page section so children inherit
   them via CSS custom property cascade. To change the page
   gutter or section rhythm, change the value here ONCE and every
   section updates. No more hunting per-class padding rules.

   Why grouped on classes (not on :root): scoped CSS adds the
   page's [b-hash] attribute to the selector, and :root never
   has it. The grouped selector gives us the same "one place
   to change" benefit without a markup wrapper change.

   TOKENS:
   - --pdp-gutter:           horizontal L/R padding inside section
                             shells (20 mobile / 40 ≥1024)
   - --pdp-section-y:        vertical padding inside each section
                             (60 / 72 / 88 / 100 / 110 across tiers)
   - --pdp-section-y-paired: HALVED vertical padding for the joining
                             side of two adjacent sections that share
                             a background or are visually paired —
                             prevents the "200px of empty cream
                             between video and FAQ" problem
   - --pdp-body-sm:          standard body copy size (FAQ answers,
                             accordion content, right-column blurb)
                             — 16/16/16/17/17 across tiers
   - --pdp-body-md:          emphasized body copy size (marketing
                             slot paragraphs + checklists, video
                             subtext) — 16/16/17/18/18 across tiers
                             ~1px bigger than -sm because hero
                             content earns slight prominence
   - --pdp-content-max:      max-width for inner content of all
                             non-hero sections (marketing, video,
                             FAQ inner). Single shared value so
                             the page reads with consistent width
                             rhythm — no "shrinking as you scroll"
                             between sections. Hero (top gallery)
                             is allowed to break out wider.
   ============================================================ */
.PDPcssFirst[b-8omfekxfl5],
.PDPcssSecond[b-8omfekxfl5],
.PDPcssMarketing[b-8omfekxfl5],
.PDPReviews[b-8omfekxfl5],
.pdp-testimonial[b-8omfekxfl5],
.pdp-feature[b-8omfekxfl5],
.pdp-video[b-8omfekxfl5],
.pdp-faq[b-8omfekxfl5],
.PDPCarouselSlides[b-8omfekxfl5],
.carouselBox[b-8omfekxfl5] {
    --pdp-gutter: 20px;
    --pdp-section-y: 60px;
    --pdp-section-y-paired: 30px;
    --pdp-body-sm: 16px;
    --pdp-body-md: 16px;
    --pdp-content-max: 1600px;
}

@media (min-width: 768px) {
    .PDPcssFirst[b-8omfekxfl5],
    .PDPcssSecond[b-8omfekxfl5],
    .PDPcssMarketing[b-8omfekxfl5],
    .PDPReviews[b-8omfekxfl5],
    .pdp-testimonial[b-8omfekxfl5],
    .pdp-feature[b-8omfekxfl5],
    .pdp-video[b-8omfekxfl5],
    .pdp-faq[b-8omfekxfl5],
    .PDPCarouselSlides[b-8omfekxfl5],
    .carouselBox[b-8omfekxfl5] {
        --pdp-section-y: 72px;
        --pdp-section-y-paired: 36px;
    }
}

@media (min-width: 1024px) {
    .PDPcssFirst[b-8omfekxfl5],
    .PDPcssSecond[b-8omfekxfl5],
    .PDPcssMarketing[b-8omfekxfl5],
    .PDPReviews[b-8omfekxfl5],
    .pdp-testimonial[b-8omfekxfl5],
    .pdp-feature[b-8omfekxfl5],
    .pdp-video[b-8omfekxfl5],
    .pdp-faq[b-8omfekxfl5],
    .PDPCarouselSlides[b-8omfekxfl5],
    .carouselBox[b-8omfekxfl5] {
        --pdp-gutter: 40px;
        --pdp-section-y: 88px;
        --pdp-section-y-paired: 44px;
        --pdp-body-md: 17px;
    }
}

@media (min-width: 1280px) {
    .PDPcssFirst[b-8omfekxfl5],
    .PDPcssSecond[b-8omfekxfl5],
    .PDPcssMarketing[b-8omfekxfl5],
    .PDPReviews[b-8omfekxfl5],
    .pdp-testimonial[b-8omfekxfl5],
    .pdp-feature[b-8omfekxfl5],
    .pdp-video[b-8omfekxfl5],
    .pdp-faq[b-8omfekxfl5],
    .PDPCarouselSlides[b-8omfekxfl5],
    .carouselBox[b-8omfekxfl5] {
        --pdp-section-y: 100px;
        --pdp-section-y-paired: 50px;
        --pdp-body-sm: 17px;
        --pdp-body-md: 18px;
    }
}

@media (min-width: 1600px) {
    .PDPcssFirst[b-8omfekxfl5],
    .PDPcssSecond[b-8omfekxfl5],
    .PDPcssMarketing[b-8omfekxfl5],
    .PDPReviews[b-8omfekxfl5],
    .pdp-testimonial[b-8omfekxfl5],
    .pdp-feature[b-8omfekxfl5],
    .pdp-video[b-8omfekxfl5],
    .pdp-faq[b-8omfekxfl5],
    .PDPCarouselSlides[b-8omfekxfl5],
    .carouselBox[b-8omfekxfl5] {
        --pdp-section-y: 110px;
        --pdp-section-y-paired: 55px;
    }
}

/* ============================================================
   Page layout shells (PDP container L/R padding + max-widths)
   All section L/R padding uses var(--pdp-gutter) — change above.
   ============================================================ */

.PDPcssFirst[b-8omfekxfl5] {
    max-width: 574px; /* mobile baseline */
    margin-left: auto;
    margin-right: auto;
    padding: 100px var(--pdp-gutter) 20px;
}

/* Gallery + info section shell. L/R gutter inherits from the design
   tokens above (20px / 40px). max-width: none so the layout extends
   edge-to-edge — no centering cap fights the gutter. */
.PDPcssSecond[b-8omfekxfl5] {
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--pdp-gutter) 50px;
}

/* Two-column layout (gallery / info) — native flex, mirrors demo.
   Mobile: stacked column. ≥1280: row with explicit divider element.
   Replaces old MudGrid xs=12 lg=6 split which forced perfect 50/50 and
   couldn't host the divider via scoped CSS. */
.pdp-two-col[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: stretch;
}

.pdp-gallery-col[b-8omfekxfl5] {
    width: 100%;
    min-width: 0;
}

/* Gallery column is intentionally edge-to-edge at every single-column
   viewport (mobile + tablet, <1024). Carousel uses aspect-ratio: 1 so
   the image is always square; at wider single-col viewports the square
   scales up with the column (688px square at 768 portrait, 983px at
   1023 — natural and expected for a product hero shot, since the user
   scrolls past it to reach product details below). The previous "huge
   gap" bug at this range was the .descriptionTabs phantom render
   eating ~370px of space, not the carousel being tall. */

.pdp-info-col[b-8omfekxfl5] {
    width: 100%;
    min-width: 0;
    /* Container query context — lets descendants (notably the purchase row)
       respond to the column's *actual* width rather than the viewport. The
       column width depends on the layout context (single-col mobile, two-col
       narrow tablet at 1024+, two-col desktop with gallery min-width: 725px
       eating space), so a viewport breakpoint can never be precise. With
       container queries, the row knows exactly how much room it has. */
    container-type: inline-size;
    container-name: pdp-info;
}

.pdp-col-divider[b-8omfekxfl5] {
    display: none; /* mobile hides the divider; stacked layout */
}

/* Right-column native flex stack — replaces MudStack. SINGLE SOURCE OF
   TRUTH for vertical rhythm. Stack gap is 0; every child gets exactly
   one margin-top from the rules below, mirroring three relationship
   tiers a UX agency would specify:

     • Tight (8–12px)  — label↔control, title↔subtitle pairs
     • Section (20–24px) — sibling sections in the same group
     • Boundary (32px) — above each hairline rule

   Per-class legacy margins on .pdp-field / .pdp-qty-label / .pdp-trust
   are zeroed below so they don't fight the stack. */
.pdp-info-stack[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.pdp-info-stack > *[b-8omfekxfl5] {
    width: 100%;
    margin-top: 0; /* baseline; overridden per-element below */
}

/* — Tight pair (10px): h2 title → italic subtitle — */
.pdp-info-stack > .productNameItalic[b-8omfekxfl5] {
    margin-top: 10px;
}

/* — Section break (32px): subtitle → ratings and ratings → description.
   Generous breath around the rating row so it reads as a distinct
   metadata band, not crammed. The native rating row is rendered by the
   StampedReviews component (mirrors the hidden Stamped badge), so it
   doesn't carry MainProductDetailsPage's [b-hash] attribute — a plain
   selector never matches. ::deep pierces that scope boundary. */
.pdp-info-stack[b-8omfekxfl5] >  .pdp-rating-row {
    margin-top: 32px;
}

.pdp-info-stack > .marketingBlurb[b-8omfekxfl5] {
    margin-top: 32px;
}

/* — Section break (24px): selectors group spacing between fields. */
.pdp-info-stack > .pdp-field[b-8omfekxfl5] {
    margin-top: 24px;
}

/* — Section break (32px): price / autoship sit as their own units.
   Quantity label gets the same breath above to clear the autoship row. */
.pdp-info-stack > .pdp-price-block[b-8omfekxfl5],
.pdp-info-stack > .af-section[b-8omfekxfl5],
.pdp-info-stack > .pdp-qty-label[b-8omfekxfl5] {
    margin-top: 32px;
}

/* — Tight pair (12px): "Quantity:" label → stepper row. Matches the
   gap that .pdp-field uses internally for "Product:" / "Size:" labels.
   Intentionally NOT bumped — label↔control should always sit tight. */
.pdp-info-stack > .pdp-purchase-row[b-8omfekxfl5] {
    margin-top: 12px;
}

/* — Boundary (40px): hairline rules sit on a clear breath above. The
   element following the rule provides its own margin-top below. */
.pdp-info-stack > hr.pdp-rule[b-8omfekxfl5] {
    margin-top: 40px;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid #D9E2E2;
    width: 100%;
}

/* — Boundary follow-through (40px): trust signals get clear breathing
   room below the divider. */
.pdp-info-stack > .pdp-trust[b-8omfekxfl5] {
    margin-top: 40px;
}

/* ============================================================
   Reviews section — cream-tile section wrapping the Stamped
   third-party reviews widget. Continues the cream stripe from
   FAQ above so video → FAQ → reviews reads as one unified
   editorial zone (not three disconnected color flips).

   The Stamped widget itself is comprehensively style-overridden
   in StampedReviews.razor's <style> block to match our brand
   typography, colors, buttons, and form controls.

   Layout contract:
   - Outer .pdp-reviews full-bleed cream tile (#F6F2EC)
   - Inner .pdp-reviews-inner capped at 1200 (matches video frame
     and FAQ inner above — focal-element width consistency)
   - Top side uses --pdp-section-y-paired (joins FAQ on cream)
   - Bottom uses --pdp-section-y (transitions out of cream stripe)

   Tier scale (mobile / 768 / 1024 / 1280 / 1600):
   - vertical padding: --pdp-section-y token (60/72/88/100/110)
   - headline: fluid clamp(28px, 2.5vw + 20px, 60px) [matches FAQ]
   ============================================================ */
.pdp-reviews[b-8omfekxfl5] {
    /* White section bg — reviews is its own zone, no longer continuing
       the cream stripe from FAQ. The cream treatment now lives inside
       on the .stamped-summary as a featured card.

       Mirrors the standard --pdp-section-y scale minus 20px at each
       breakpoint (40/52/68/80/90px). --pdp-section-y is only defined
       on .PDPcssFirst / .PDPCarouselSlides / .carouselBox wrappers
       — it doesn't inherit down to .pdp-reviews reliably, so explicit
       values per breakpoint. */
    background-color: #FFFFFF;
    padding: 40px var(--pdp-gutter, 20px);
}

@media (min-width: 768px) {
    .pdp-reviews[b-8omfekxfl5] { padding-top: 52px; padding-bottom: 52px; }
}
@media (min-width: 1024px) {
    .pdp-reviews[b-8omfekxfl5] { padding-top: 68px; padding-bottom: 68px; }
}
@media (min-width: 1280px) {
    .pdp-reviews[b-8omfekxfl5] { padding-top: 80px; padding-bottom: 80px; }
}
@media (min-width: 1600px) {
    .pdp-reviews[b-8omfekxfl5] { padding-top: 90px; padding-bottom: 90px; }
}

.pdp-reviews-inner[b-8omfekxfl5] {
    max-width: 1100px;
    margin: 0 auto;
}

.pdp-reviews-headline[b-8omfekxfl5] {
    margin: 0 0 32px;
    color: #003B3C;
    font-family: 'STIX Two Text', serif;
    /* Fluid font: 28 → 60px, smoothly across 320 → 1600vw (Utopia).
       Same formula as .pdp-faq-headline for cream-stripe consistency. */
    font-size: clamp(28px, 2.5vw + 20px, 60px);
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .pdp-reviews-headline[b-8omfekxfl5] { margin-bottom: 36px; }
}

@media (min-width: 1024px) {
    .pdp-reviews-headline[b-8omfekxfl5] { margin-bottom: 40px; }
}

@media (min-width: 1280px) {
    .pdp-reviews-headline[b-8omfekxfl5] { margin-bottom: 48px; }
}

@media (min-width: 1600px) {
    .pdp-reviews-headline[b-8omfekxfl5] { margin-bottom: 56px; }
}

/* Legacy .PDPReviews class kept as a no-op shell for the prior wrapper
   if anything still references it. Modern markup uses .pdp-reviews above. */
.PDPReviews[b-8omfekxfl5] {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.PDPcssMarketing[b-8omfekxfl5] {
    /* Outer wrapper provides the L/R gutter only — no max-width here.
       The inner content cap lives on .pdp-feature (--pdp-content-max).
       This way .pdp-feature can actually hit the full content max
       without being constrained by the outer's max - padding math. */
    padding-left: var(--pdp-gutter);
    padding-right: var(--pdp-gutter);
}

/* ============================================================
   Tagline banner — big centered serif headline above the hero.

   FLUID TYPOGRAPHY (Utopia methodology). Scales smoothly from
   mobile to wide-desktop instead of snapping at discrete tiers.
   Better suited to variable-length CMS taglines: long copy on a
   small phone shrinks gracefully; short copy at any viewport
   stays at a comfortable display size. text-wrap: balance still
   handles line distribution within whatever size × width lands
   at any given viewport.

   The clamp() formula: clamp(min, slope * vw + intercept, max)
   - font-size:  32px @ 320vw → 72px @ 1600vw (linear interpolation)
   - max-width:  full viewport - 48px gutter, capped at 1280px
   - padding-V:  60px @ 320vw → 120px @ 1280vw (linear)
   - tracking:   -0.02em proportional (scales with font-size)

   Brand-teal italic accents on emphasized words: wrap in <em>
   in the metafield ("...effective <em>fiber.</em>").

   PDPcssSecond gutter token: bumps from 20px → 40px at ≥1024
   when the two-col layout activates. This .pdp-tagline lives
   above that and uses its own fluid padding, not --pdp-gutter.
   ============================================================ */

.pdp-tagline[b-8omfekxfl5] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    line-height: 1.1;
    color: #003b3c;
    text-align: center;
    text-wrap: balance;
    margin: 0 auto;
    box-sizing: border-box;

    /* Fluid font-size: 32 → 72px, smoothly across 320 → 1600vw */
    font-size: clamp(32px, 3.125vw + 22px, 72px);

    /* Letter-spacing scales with font-size automatically (em-relative) */
    letter-spacing: -0.02em;

    /* Fluid container: full width minus 48px L/R gutter, capped at 1280 */
    max-width: min(100% - 48px, 1280px);

    /* Fluid vertical padding: 60 → 120px across viewport range.
       Horizontal padding stays at 24px since max-width already
       carves out the gutter via min(100% - 48px, 1280). */
    padding: clamp(60px, 6vw + 30px, 120px) 24px;
}

/* <em> inside the tagline metafield gets rendered as italic in the
   brand teal — content team writes "...effective <em>fiber.</em>"
   and the visual treatment falls into place automatically. */
.pdp-tagline em[b-8omfekxfl5] {
    font-family: 'STIX Two Text', serif;
    font-style: italic;
    color: #009296;
}

/* Defensive: force every descendant of the tagline to inherit FONT properties
   from the .pdp-tagline parent (font-family / font-size / font-weight /
   letter-spacing / line-height). Color, font-style, and other properties are
   intentionally NOT in this list — see editorial-workflow note below.

   ────────────────────────────────────────────────────────────────────────────
   WHY THIS RULE EXISTS
   ────────────────────────────────────────────────────────────────────────────
   CMS metafield content sometimes arrives wrapped in
     <p><span style="font-size: 12.0pt; font-family: 'Aptos'; mso-...">…
   (Microsoft Word paste artifacts), which would otherwise override
   .pdp-tagline's clamp() font-size and render the tagline tiny on whichever
   products have legacy CMS markup.

   ────────────────────────────────────────────────────────────────────────────
   WHY WE DON'T JUST STRIP INLINE STYLES SERVER-SIDE
   ────────────────────────────────────────────────────────────────────────────
   Marketing's editorial workflow USES inline styles to control which words
   render in the brand teal (#009296) — they paste content with explicit
   <span style="color: #009296;">protective compounds.</span> for accents.
   A blanket server-side strip of style="..." would silently nuke every
   accent color on every product. That would be invisible to the dev (no
   error), visible to customers (bland headlines), and a regression for
   marketing (their formatting tool stops working).

   The careful choice here: override ONLY the font-family/size/weight
   properties (the Word paste damage), leave color/font-style alone (so
   marketing's accent colors and italic emphasis still flow through).

   ────────────────────────────────────────────────────────────────────────────
   WHY ::deep + !important
   ────────────────────────────────────────────────────────────────────────────
   ::deep — Razor scoped CSS appends a [b-xxxxx] scope attribute to elements
   rendered by the component, but children injected via
   @((MarkupString)_pdpTagline) bypass that scoping. Without ::deep, the
   compiled selector only matches descendants with the scope attribute, so
   the markup-string spans never get hit.

   !important — inline style="..." attributes have specificity 1000.
   No normal class selector can beat them without it.

   If/when marketing migrates to a clean editorial pipeline (no Word paste,
   no inline font-* styles), this whole rule could be safely removed. */
.pdp-tagline[b-8omfekxfl5]  *,
.pdp-tagline[b-8omfekxfl5]  *::before,
.pdp-tagline[b-8omfekxfl5]  *::after {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
}

/* Re-assert the em color/italic so the inherit rule above doesn't
   blanket-strip the brand teal from accent words. */
.pdp-tagline[b-8omfekxfl5]  em,
.pdp-tagline[b-8omfekxfl5]  em * {
    font-style: italic !important;
    color: #009296 !important;
}

/* ============================================================
   Title / subtitle / reviews stars / blurb (the in-column block —
   distinct from the tagline banner above)
   ============================================================ */

/* Product name (title) — Inter Medium. 3-tier scale (22 / 26 / 30) at
   site breakpoints. Sits one tier above the accordion title (22/28) so
   the H1 keeps clear primary-element hierarchy on the page. */
.productName[b-8omfekxfl5] {
    color: #003b3c;
    text-align: left;
    font-family: Inter, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.22px;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .productName[b-8omfekxfl5] {
        font-size: 26px;
        letter-spacing: -0.26px;
    }
}

@media (min-width: 1280px) {
    .productName[b-8omfekxfl5] {
        font-size: 30px;
        letter-spacing: -0.3px;
    }
}

/* Product subtitle — italic STIX serif, calmer companion to the title.
   ~60% scale of title at each tier (14 / 16 / 18). */
.productNameItalic[b-8omfekxfl5] {
    color: #003b3c;
    text-align: left;
    font-family: 'STIX Two Text', serif;
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.14px;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .productNameItalic[b-8omfekxfl5] {
        font-size: 16px;
        letter-spacing: -0.16px;
    }
}

@media (min-width: 1280px) {
    .productNameItalic[b-8omfekxfl5] {
        font-size: 20px;
        letter-spacing: -0.2px;
    }
}

.textLorem[b-8omfekxfl5] {
    font-size: 25px; /* mobile baseline */
    font-family: "STIX Two Text";
    font-weight: 500;
    line-height: normal;
}

.ratingtext[b-8omfekxfl5] {
    color: #003B3C;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding-top: 5px;
}

/* Marketing blurb — clean Inter, generous line-height for readability,
   capped width so long descriptions don't sprawl across the column.
   Uses --pdp-body-md token (emphasized body) — first body content
   under title + rating, earns slight prominence to match the marketing
   slot subtext below. Sits at 16/16/17/18/18 across tiers. */
.marketingBlurb[b-8omfekxfl5] {
    color: #003b3c;
    text-align: left;
    font-family: Inter, sans-serif;
    font-size: var(--pdp-body-md);
    font-weight: 400;
    line-height: 1.6;
    max-width: 750px;
    margin: 0;
    padding: 0;
}

/* ============================================================
   Description tabs (Body / Suggested Use / Product Label)
   Two markup copies exist (desktop in-column, mobile bottom);
   visibility flips by tier.
   ============================================================ */

/* The .descriptionTabs element ALSO has the .pdp-accordion-group class
   on it (markup is `<div class="descriptionTabs pdp-accordion-group">`).
   .pdp-accordion-group sets `display: flex` and is defined LATER in the
   file, so without higher specificity here the flex rule wins and the
   "hidden" tabs render full-height — was producing a phantom 371px
   block in the gallery column on mobile. Combining both classes raises
   specificity from (0,1,0) to (0,2,0) so display: none wins regardless
   of source order. Same defensive pairing for the mobile copy. */
.descriptionTabs.pdp-accordion-group[b-8omfekxfl5] {
    visibility: hidden;
    display: none; /* mobile: hide the in-column desktop copy */
}

.descriptionTabsMobile.pdp-accordion-group[b-8omfekxfl5] {
    visibility: visible;
    display: flex; /* mobile: show the bottom mobile copy (matches .pdp-accordion-group) */
}

/* Description accordion group — body text on top, then native
   <details> accordions separated by hairlines. Visual contract from
   the prototype design's AccordionGroup. */

.pdp-accordion-group[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

.pdp-accordion-group--mobile[b-8omfekxfl5] {
    padding: 0 20px 24px;
}

.pdp-description-body[b-8omfekxfl5] {
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.pdp-description-body p[b-8omfekxfl5] {
    margin: 0 0 16px;
}

.pdp-description-body p:last-child[b-8omfekxfl5] {
    margin-bottom: 0;
}

/* Native <details> accordion. Custom chevron rotates 180deg on open
   via the [open] attribute selector — no JS state needed. */
.pdp-accordion[b-8omfekxfl5] {
    margin: 0;
    border: 0;
}

.pdp-accordion-summary[b-8omfekxfl5] {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    color: #003b3c;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

/* Strip the default disclosure triangle in WebKit + Firefox. */
.pdp-accordion-summary[b-8omfekxfl5]::-webkit-details-marker {
    display: none;
}

.pdp-accordion-summary[b-8omfekxfl5]::marker {
    display: none;
}

.pdp-accordion-summary:focus-visible[b-8omfekxfl5] {
    outline: 2px solid #009296;
    outline-offset: 4px;
    border-radius: 4px;
}

.pdp-accordion-title[b-8omfekxfl5] {
    font-family: Inter, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.22px;
    color: #003b3c;
    margin: 0;
    text-align: left;
}

@media (min-width: 1280px) {
    .pdp-accordion-title[b-8omfekxfl5] {
        font-size: 28px;
        letter-spacing: -0.28px;
    }
}

.pdp-accordion-chevron[b-8omfekxfl5] {
    width: 24px;
    height: 24px;
    color: #003b3c;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    display: block;
}

.pdp-accordion[open] .pdp-accordion-chevron[b-8omfekxfl5] {
    transform: rotate(180deg);
}

.pdp-accordion-body[b-8omfekxfl5] {
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: var(--pdp-body-sm);
    line-height: 1.6;
    padding: 4px 0 20px;
    /* No max-width — body fills the info column (capped at 800px at
       ≥1280 by .pdp-info-col), matching the title bar above for full
       visual alignment. Long line lengths are acceptable for scannable
       product info content. text-wrap: pretty manages orphans on
       multi-paragraph descriptions. */
    text-wrap: pretty;
}

.pdp-accordion-body p[b-8omfekxfl5] {
    margin: 0 0 12px;
}

.pdp-accordion-body p:last-child[b-8omfekxfl5] {
    margin-bottom: 0;
}

.pdp-accordion-label-link[b-8omfekxfl5] {
    display: block;
    margin-top: 12px;
}

.pdp-accordion-label-link:first-child[b-8omfekxfl5] {
    margin-top: 0;
}

.pdp-accordion-label-img[b-8omfekxfl5] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

@media (hover: hover) {
    .pdp-accordion-label-img:hover[b-8omfekxfl5] {
        opacity: 0.9;
    }
}

/* ============================================================
   Variety / size selectors — divider, labels, native select with
   custom chevron, and size pill grid. All native HTML so scoped
   CSS reaches without ::deep gymnastics. Visual contract from the
   prototype design.
   ============================================================ */

/* Hairline divider before the variety section. */
.pdp-rule[b-8omfekxfl5] {
    border: 0;
    height: 1px;
    background: #D9E2E2;
    margin: 24px 0;
    width: 100%;
}

@media (min-width: 1280px) {
    .pdp-rule[b-8omfekxfl5] { margin: 32px 0; }
}

/* Strip bottom margin on the LAST hr inside the description accordion
   so the column doesn't extend 24-32px past the visible last hairline.
   Without this, .pdp-gallery-col's border-right (the column divider
   between gallery and info column) appears to overshoot the accordion. */
.descriptionTabs.pdp-accordion-group > hr.pdp-rule:last-child[b-8omfekxfl5] {
    margin-bottom: 0;
}

/* Field wrapper — label above, control below, with consistent gap. */
.pdp-field[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    gap: 12px; /* label↔control: tight pair */
    width: 100%;
    /* outer spacing owned by .pdp-info-stack tier system */
}

.pdp-field--sizes[b-8omfekxfl5] { gap: 16px; }

.pdp-field-label[b-8omfekxfl5] {
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

@media (min-width: 1280px) {
    .pdp-field-label[b-8omfekxfl5] { font-size: 16px; }
}

.pdp-field-label-strong[b-8omfekxfl5] {
    font-weight: 500;
}

/* Native <select> styled clean — white surface, 2px neutral border,
   teal on hover/focus, room on the right for the chevron icon. */
.pdp-select-wrap[b-8omfekxfl5] {
    position: relative;
    width: 100%;
}

.pdp-select[b-8omfekxfl5] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 14px 40px 14px 16px;
    border: 2px solid #D9E2E2;
    border-radius: 0;
    background: #fff;
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

@media (min-width: 1280px) {
    .pdp-select[b-8omfekxfl5] { font-size: 16px; }
}

@media (hover: hover) {
    .pdp-select:hover[b-8omfekxfl5] { border-color: #009296; }
}

.pdp-select:focus[b-8omfekxfl5] {
    outline: none;
    border-color: #009296;
    box-shadow: 0 0 0 3px rgba(0, 146, 150, 0.15);
}

.pdp-select:disabled[b-8omfekxfl5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pdp-select-chevron[b-8omfekxfl5] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #003b3c;
    pointer-events: none;
}

/* Size pill grid — bulletproof auto-fit grid. Each pill is at least
   120px wide and as many fit per row as the container allows; extras
   wrap to a new row. Handles 2 / 3 / 4 / 6+ pills cleanly across every
   viewport without needing per-breakpoint column counts. The previous
   approach (fixed repeat(4, 1fr) at ≥768) overflowed when the info
   column was narrow (1024-1450px range with two-col layout active),
   AND would break entirely for SKUs with 5+ size variants. */
.pdp-size-grid[b-8omfekxfl5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    width: 100%;
}

.pdp-size-pill[b-8omfekxfl5] {
    appearance: none;
    padding: 14px 16px;
    border: 2px solid #D9E2E2;
    border-radius: 0;
    background: transparent;
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}

@media (min-width: 1280px) {
    .pdp-size-pill[b-8omfekxfl5] { font-size: 16px; }
}

@media (hover: hover) {
    .pdp-size-pill:not(:disabled):not(.pdp-size-pill--active):hover[b-8omfekxfl5] {
        border-color: #009296;
    }
}

.pdp-size-pill--active[b-8omfekxfl5] {
    border-color: #009296;
    background: #f2fafa;
    color: #009296;
}

.pdp-size-pill:disabled[b-8omfekxfl5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pdp-size-pill-suffix[b-8omfekxfl5] {
    text-transform: none;
    font-weight: 500;
}

/* ============================================================
   Price block
   ============================================================ */

/* Price block — current price + strikethrough MSRP + price-note line.
   Visual contract from the prototype design: red-orange sale price,
   muted strikethrough, brand-teal note (typically "Manufacturer direct
   price" or similar). */

.pdp-price-block[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* Today / Monthly special — brand red (matches MONTHLY SPECIAL badge,
   cart promo pills, search overlay sale tags, etc.) + MSRP strikethrough. */
.pdp-price-block--special .pdp-price-current[b-8omfekxfl5] {
    color: #D84315;
    font-weight: 600;
}

.pdp-price-block--special .pdp-price-original[b-8omfekxfl5] {
    color: #406c6d;
}

.pdp-promo-label[b-8omfekxfl5] {
    color: #D84315;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    text-transform: none;
}

@media (min-width: 1280px) {
    .pdp-promo-label[b-8omfekxfl5] { font-size: 13px; }
}

.pdp-price-row[b-8omfekxfl5] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.pdp-price-current[b-8omfekxfl5] {
    color: #003B3C;
    font-family: Inter, sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
}

@media (min-width: 1280px) {
    .pdp-price-current[b-8omfekxfl5] { font-size: 28px; }
}

.pdp-price-original[b-8omfekxfl5] {
    color: #406c6d;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: line-through;
}

@media (min-width: 1280px) {
    .pdp-price-original[b-8omfekxfl5] { font-size: 16px; }
}

.pdp-price-note[b-8omfekxfl5] {
    color: #003B3C;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
}

@media (min-width: 1280px) {
    .pdp-price-note[b-8omfekxfl5] { font-size: 14px; }
}

/* Info-icon tooltip for "Manufacturer direct price". Click-to-toggle (works
   identically on desktop, tablet, mobile — hover doesn't exist on touch).
   Backdrop pattern: a transparent fixed overlay captures outside-clicks
   and closes the tooltip via Blazor state, no JS interop needed. */
.pdp-price-note-info-wrap[b-8omfekxfl5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}

.pdp-price-note-info[b-8omfekxfl5] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #003B3C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.pdp-price-note-info:hover[b-8omfekxfl5] { opacity: 0.7; }

.pdp-price-note-info-icon[b-8omfekxfl5] {
    width: 16px;
    height: 16px;
    display: block;
}

/* Transparent full-viewport backdrop — captures clicks outside the tooltip
   so it closes when user clicks anywhere else. z-index sits below the
   tooltip but above the page. */
.pdp-price-note-backdrop[b-8omfekxfl5] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 50;
    cursor: default;
}

.pdp-price-note-tooltip[b-8omfekxfl5] {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 51;
    background: #fff;
    color: #003B3C;
    padding: 14px 36px 14px 16px;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    width: max-content;
    max-width: 280px;
    text-align: left;
}

.pdp-price-note-tooltip-text[b-8omfekxfl5] {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.pdp-price-note-tooltip-close[b-8omfekxfl5] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #003B3C;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.pdp-price-note-tooltip-close:hover[b-8omfekxfl5] { background: rgba(0, 0, 0, 0.05); }

.pdp-price-note-tooltip-close svg[b-8omfekxfl5] {
    width: 14px;
    height: 14px;
    display: block;
}

/* Mobile: shift the tooltip so it doesn't get clipped by the viewport
   right edge. Center-anchored is fine on desktop where there's room on
   both sides; on narrow screens, anchor it to the icon and let it
   extend leftward instead. */
@media (max-width: 480px) {
    .pdp-price-note-tooltip[b-8omfekxfl5] {
        left: auto;
        right: 0;
        transform: none;
        max-width: calc(100vw - 40px);
    }
}

.pdp-price-caption[b-8omfekxfl5] {
    color: #406c6d;
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
}

.pdp-price-loading[b-8omfekxfl5] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #406c6d;
    font-family: Inter, sans-serif;
    font-size: 14px;
}


/* ============================================================
   AutoShip / FlexPay cards — minimal "horizontal separator" style
   from the prototype design. Each row sits as a section with a
   bottom hairline divider; the expanded panel inside is a soft
   teal-tint card with a hairline border.
   ============================================================ */

/* Section wrapper around the autoship + flexpay rows. Outer spacing is
   owned by the .pdp-info-stack tier system; we keep this wrapper purely
   structural now (no margin / no padding) so the rhythm doesn't compound. */
.af-section[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

/* Row wrapper. No outer chrome — the bottom hairline does the visual
   separation work. Last-of-its-kind variant suppresses the hairline. */
.af-card[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    border-bottom: 1px solid #D9E2E2;
}

.af-card:last-of-type[b-8omfekxfl5] {
    border-bottom: 0;
}

/* Header — full-row clickable button. Custom checkbox + label inside.
   `justify-content: flex-start` is explicit so user-agent button styling
   (which can otherwise center inline content) cannot win. Padding kept
   on the header itself rather than the card so the click target stays
   touch-friendly without re-introducing the compounding wrapper padding. */
.af-card-header[b-8omfekxfl5] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 8px 0;
    margin: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
}

.af-card-header:focus-visible[b-8omfekxfl5] {
    outline: 2px solid #009296;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Custom checkbox — 20x20 square with 4px radius. Unchecked = white
   surface with neutral border; checked = teal-filled with white check
   inside (rendered as inline SVG by the markup). */
.af-checkbox[b-8omfekxfl5] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #D9E2E2;
    background: #fff;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
    .af-card-header:hover .af-checkbox:not(.af-checkbox--checked)[b-8omfekxfl5] {
        border-color: #009296;
    }
}

.af-checkbox--checked[b-8omfekxfl5] {
    border-color: #009296;
    background: #009296;
}

.af-checkbox-icon[b-8omfekxfl5] {
    width: 14px;
    height: 14px;
    color: #fff;
    display: block;
}

/* Benefit icon — small teal check next to each benefit line. */
.af-benefit-icon[b-8omfekxfl5] {
    width: 16px;
    height: 16px;
    color: #009296;
    flex-shrink: 0;
    margin-top: 2px;
    display: block;
}

/* Custom frequency native number input. Hides browser spinners (we
   clamp on change), 40px tall to match the af-btn row height. */
.af-custom-freq-input[b-8omfekxfl5] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    width: 90px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D9E2E2;
    border-radius: 6px;
    background: #fff;
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.af-custom-freq-input[b-8omfekxfl5]::-webkit-outer-spin-button,
.af-custom-freq-input[b-8omfekxfl5]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.af-custom-freq-input:focus[b-8omfekxfl5] {
    outline: none;
    border-color: #009296;
}

.af-card-title[b-8omfekxfl5] {
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

@media (min-width: 1280px) {
    .af-card-title[b-8omfekxfl5] { font-size: 18px; }
}

/* Expanded body — soft teal tint, 8px radius, hairline border,
   sits below the header with breathing room when toggled open. */
.af-card-body[b-8omfekxfl5] {
    background: #f2fafa;
    border: 1px solid #D9E2E2;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.af-card--active[b-8omfekxfl5] {
    /* No-op now — the body itself carries the active visual.
       Keeping the class so the conditional render in markup is
       preserved without breaking specificity rules elsewhere. */
}

.af-section-label[b-8omfekxfl5] {
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 12px;
}

/* Frequency / installments buttons — pill row, 40px tall, 6px radius.
   Active fills brand teal with white text; inactive is neutral with
   teal hover. */
/* Bulletproof auto-fit grid for the AutoShip + FlexPay button rows.
   Each button is at least 100px wide (handles the longest current label
   "12 payments" comfortably); as many fit per row as the container
   allows; extras wrap to a new row. Replaces flex:1 which let buttons
   shrink past their content and overflow at narrow info-col widths.
   100px also handles future SKUs with more frequency / installment
   options without hand-tuning per-tier. */
.af-btn-group[b-8omfekxfl5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
    width: 100%;
    margin-bottom: 16px;
}

.af-btn[b-8omfekxfl5] {
    appearance: none;
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid #D9E2E2;
    background: #fff;
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .af-btn:not(.af-btn--active):hover[b-8omfekxfl5] {
        border-color: #009296;
    }
}

.af-btn--active[b-8omfekxfl5] {
    background: #009296;
    border-color: #009296;
    color: #fff;
    font-weight: 500;
}

/* Custom frequency input row — "Every [number] days" inline group. */
.af-custom-freq[b-8omfekxfl5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #003b3c;
    margin-bottom: 6px;
}

.af-hint[b-8omfekxfl5] {
    font-family: Inter, sans-serif;
    font-size: 11px;
    color: #406c6d;
    margin-top: 6px;
}

/* Benefits list — small Inter Regular with check icons, vertical
   stack with breathing room between items. */
.af-benefits[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.af-benefit[b-8omfekxfl5] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #003b3c;
}

/* ============================================================
   Quantity stepper + Add-to-cart + Favorites
   Native HTML, scoped CSS reach. Visual contract from the
   prototype: square-cornered qty box, full-pill teal CTA, 50x50
   teal-bordered heart toggle.
   ============================================================ */

.pdp-qty-label[b-8omfekxfl5] {
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    text-align: left;
    /* outer spacing owned by .pdp-info-stack tier system */
}

@media (min-width: 1280px) {
    .pdp-qty-label[b-8omfekxfl5] {
        font-size: 16px;
    }
}

.pdp-qty-label-strong[b-8omfekxfl5] {
    font-weight: 500;
}

/* Purchase row — bulletproof responsive behavior driven by container
   queries on .pdp-info-col, NOT viewport breakpoints. The thresholds
   below are calibrated against the actual row contents:

     stepper (110px) + gap (12) + button (text width + 48 padding) +
     gap (12) + heart (50px)

   • ≥520px container : full button label "ADD TO CART — $19.90" + heart
   • 380-519px        : drop the price suffix; "ADD TO CART" + heart fits
   • <380px           : stack vertically, hide heart (mobile-style)

   Because these breakpoints follow container width, the row reorganizes
   correctly across single-col mobile, single-col tablet, narrow two-col
   tablet, and full desktop — no viewport-math required. */
.pdp-purchase-row[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

@container pdp-info (min-width: 380px) {
    .pdp-purchase-row[b-8omfekxfl5] {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

/* Square-cornered stepper box, 50px tall, dark border.
   Mobile (column layout): full width, paired with full-width CTA below.
   Row layout (container ≥380): trimmed to 112px so the Add to Cart
   button — the primary action — gets the lion's share of horizontal
   space. Industry-standard sizing: stepper sized to its content
   (− / qty / +) instead of dominating the row. */
.pdp-qty-stepper[b-8omfekxfl5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    width: 100%;
    padding: 0 13px;
    border: 1px solid #003b3c;
    background: #fff;
    box-sizing: border-box;
}

@container pdp-info (min-width: 380px) {
    .pdp-qty-stepper[b-8omfekxfl5] {
        width: 112px;
        flex-shrink: 0;
    }
}

.pdp-qty-btn[b-8omfekxfl5] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #003b3c;
    transition: opacity 0.15s ease;
}

.pdp-qty-btn:disabled[b-8omfekxfl5] {
    opacity: 0.35;
    cursor: not-allowed;
}

.pdp-qty-btn svg[b-8omfekxfl5] {
    width: 24px;
    height: 24px;
    display: block;
}

.pdp-qty-value[b-8omfekxfl5] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.6;
}

/* Add-to-cart pill — full width on mobile, expands to fill the
   row at desktop+. Brand teal, white text, uppercase, 1.6px tracking. */
.pdp-add-cart-btn[b-8omfekxfl5] {
    appearance: none;
    border: 1px solid #009296;
    background: #009296;
    color: #fff;
    height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

/* In the row layout (container ≥380), let the button grow to fill the
   leftover space between stepper and heart. Slightly shorter (50 vs 52)
   to align visually with the stepper height. */
@container pdp-info (min-width: 380px) {
    .pdp-add-cart-btn[b-8omfekxfl5] {
        flex: 1;
        height: 50px;
    }
}

.pdp-add-cart-btn-text[b-8omfekxfl5] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: inherit;
    white-space: nowrap;
}

/* Price suffix on the add-to-cart button — hidden when the info column
   doesn't have room for stepper + full button label + heart. Driven by
   container query on .pdp-info-col so it works across every viewport
   width regardless of which layout tier is active. The threshold (520px)
   is the minimum container width at which the full "ADD TO CART — $19.90"
   button + stepper + heart all fit on one row with breathing room. */
@container pdp-info (max-width: 519px) {
    .pdp-add-cart-btn-price[b-8omfekxfl5] {
        display: none;
    }
}

@media (hover: hover) {
    .pdp-add-cart-btn:not(:disabled):hover[b-8omfekxfl5] {
        background: #fff;
        color: #009296;
    }
}

.pdp-add-cart-btn:disabled[b-8omfekxfl5] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Heart favorites toggle — 50x50 circle, teal border + icon, fills
   teal when active. Only visible at desktop+ (mobile sticks the
   add-to-cart bar at the bottom; favorites is desktop-only here). */
.pdp-favorite-btn[b-8omfekxfl5] {
    appearance: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid #009296;
    background: #fff;
    color: #009296;
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Heart only appears when the info column has room for the row layout
   AND the heart itself. Below 380px container, we're in stacked mode
   (mobile-style sticky CTA pattern), so the heart hides. */
@container pdp-info (min-width: 380px) {
    .pdp-favorite-btn[b-8omfekxfl5] { display: inline-flex; }
}

@media (hover: hover) {
    .pdp-favorite-btn:hover[b-8omfekxfl5] {
        background: #EFF6F4;
    }
}

.pdp-favorite-btn svg[b-8omfekxfl5] {
    width: 22px;
    height: 22px;
    display: block;
}

.pdp-favorite-btn--active[b-8omfekxfl5] {
    /* Filled heart already handled by inline fill="currentColor" in
       the SVG (color: #009296). No extra rule needed; class hook is
       here for future styling tweaks. */
}

/* Mobile (≤767px) — Patagonia-style 2-row layout:
   row 1: compact quantity stepper alone, left-aligned
   row 2: full-width add-to-cart + heart circle side-by-side
   Overrides the container-query row layout above for narrow viewports
   even when the info-col container is wide enough to trigger row mode.
   Also hides the "Quantity:" label (the stepper's − / qty / + UI is
   self-explanatory on mobile) and moves the 32px breath above the row
   onto the row itself since the label is no longer there to carry it. */
@media (max-width: 767px) {
    .pdp-info-stack > .pdp-qty-label[b-8omfekxfl5] { display: none; }
    .pdp-info-stack > .pdp-purchase-row[b-8omfekxfl5] { margin-top: 32px; }

    .pdp-purchase-row[b-8omfekxfl5] {
        display: grid;
        grid-template-columns: 1fr 50px;
        grid-template-areas:
            "stepper stepper"
            "button heart";
        column-gap: 12px;
        row-gap: 20px;
        align-items: center;
    }
    .pdp-qty-stepper[b-8omfekxfl5] {
        grid-area: stepper;
        width: 140px;
    }
    /* Enlarge +/- tap targets to the WCAG/Apple/Google-recommended 44×44
       minimum for touch. The SVG icons stay 24×24 (centered via existing
       flex) so the visual chrome is unchanged — only the hit area grows. */
    .pdp-qty-btn[b-8omfekxfl5] {
        width: 44px;
        height: 44px;
    }
    .pdp-add-cart-btn[b-8omfekxfl5] {
        grid-area: button;
        width: 100%;
        height: 50px;
    }
    .pdp-favorite-btn[b-8omfekxfl5] {
        grid-area: heart;
        display: inline-flex;
    }

    /* Tighten the gap between trust signals and the mobile accordion
       group. Default is .pdp-accordion-group margin-top (24px) + the
       first hr's 24px top margin = 48px stack, which reads dead/airy
       on mobile. Cut both for a tighter handoff into Product details. */
    .descriptionTabsMobile.pdp-accordion-group[b-8omfekxfl5] { margin-top: 0; }
    .descriptionTabsMobile.pdp-accordion-group > hr.pdp-rule:first-child[b-8omfekxfl5] { margin-top: 12px; }
}

/* ============================================================
   Trust signals row — 40x40 teal-tint circle icon, title + desc
   ============================================================ */

.pdp-trust[b-8omfekxfl5] {
    display: flex;
    flex-direction: column;
    gap: 24px; /* between sibling trust signals */
    /* outer spacing owned by .pdp-info-stack tier system */
}

.pdp-trust-row[b-8omfekxfl5] {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* Figma SVGs are 56x56 with the circle outline + glyph baked in.
   Wrapper just sizes and prevents flex shrink — no background or
   border of its own. */
.pdp-trust-icon[b-8omfekxfl5] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pdp-trust-icon svg[b-8omfekxfl5] {
    width: 100%;
    height: 100%;
    display: block;
}

.pdp-trust-text[b-8omfekxfl5] {
    flex: 1;
    min-width: 0;
}

.pdp-trust-title[b-8omfekxfl5] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    color: #003b3c;
    margin: 0;
}

@media (min-width: 1280px) {
    .pdp-trust-title[b-8omfekxfl5] { font-size: 16px; }
}

.pdp-trust-desc[b-8omfekxfl5] {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.7;
    color: #003b3c;
    margin: 0;
}

@media (min-width: 1280px) {
    .pdp-trust-desc[b-8omfekxfl5] { font-size: 14px; }
}

/* ============================================================
   Trust signals row + ingredients/marketing sections
   ============================================================ */

.imgIngredients[b-8omfekxfl5] {
    object-fit: cover;
    border-radius: 20px;
    width: 100%;
    max-width: 710px;
    height: auto;
    display: block;
}

.imgIngredientsSecond[b-8omfekxfl5] {
    object-fit: cover;
    border-radius: 20px;
    width: 100%;
    max-width: 710px;
    height: auto;
    display: block;
}

.marketingVerticalAlign[b-8omfekxfl5] {
    height: auto;
    display: flex;
    justify-content: center;
}

.TrustIngHeight[b-8omfekxfl5] {
    height: auto;
    display: flex;
    justify-content: center;
}

.TrustIngHeightSecond[b-8omfekxfl5] {
    height: auto;
    display: flex;
    justify-content: center;
}

.checkboxSecond[b-8omfekxfl5] {
    display: inline-block;
    margin-top: 12px;
    margin-right: 6px;
}

.checkboxSecondLabel[b-8omfekxfl5] {
    display: inline-block;
    vertical-align: top;
    padding-top: 12px;
    max-width: 320px; /* mobile baseline; expands to 700 desktop */
}

.marketingMarginFirst[b-8omfekxfl5] {
    margin-right: 20px; /* mobile baseline; expands to 40 desktop */
    height: auto;
    display: flex;
    justify-content: center;
}

.marketingMarginSecond[b-8omfekxfl5] {
    margin-left: 20px; /* mobile baseline; expands to 40 desktop */
    height: auto;
    display: flex;
    justify-content: center;
}

.marketingMarginSecond2[b-8omfekxfl5] {
    margin-left: 0; /* mobile baseline; lifts to 40 desktop */
    padding-top: 40px;
}

/* ============================================================
   Brand-pillar marquee — outer wrapper rhythm
   ------------------------------------------------------------
   The actual marquee animation, item styling, and seamless-loop
   markup all live in the shared <ScrollingBanner> component
   (Components/Elements/ScrollingBanner.razor + .razor.css).
   This rule only controls the rhythm around the band.

   Padding (not margin) for consistency with the rest of the page —
   eliminates margin-collapse surprises and keeps spacing predictable
   when sections are added/removed/reordered.

   Padding-bottom: 0 — the next section's top padding (Marketing 1's
   --pdp-section-y) owns the gap. Same paired-section principle: when
   one side's intrinsic padding defines the gap, the other goes to
   zero so spacing doesn't compound. Result: the perceived gap between
   ticker and Marketing 1 is exactly --pdp-section-y across all tiers.

   Padding-top is hand-tuned per tier (band-thin breathing room above);
   not promoted to a token because there's only one band on the page.
   ============================================================ */

.section-marquee[b-8omfekxfl5] {
    /* Symmetric vertical padding so the ticker breathes equally above
       and below (was top-only, leaving the ticker text crashed against
       whatever section followed). Scales with the same crescendo as
       the rest of the PDP rhythm. */
    padding: 30px 0; /* mobile baseline */
}

@media (min-width: 768px) {
    .section-marquee[b-8omfekxfl5] { padding-top: 36px; padding-bottom: 36px; }
}

@media (min-width: 1024px) {
    .section-marquee[b-8omfekxfl5] { padding-top: 40px; padding-bottom: 40px; }
}

@media (min-width: 1280px) {
    .section-marquee[b-8omfekxfl5] { padding-top: 50px; padding-bottom: 50px; }
}

@media (min-width: 1600px) {
    .section-marquee[b-8omfekxfl5] { padding-top: 56px; padding-bottom: 56px; }
}

/* ============================================================
   Bottom video section — cream-tile section showcasing a YouTube
   embed. Native HTML, mirrors the marketing-feature discipline:
   5-tier responsive type scale, deliberate vertical rhythm,
   max-width caps for readable measure.

   Layout contract:
   - Outer .pdp-video full-bleed cream tile (#F6F2EC), padding from
     --pdp-gutter
   - Inner .pdp-video-inner capped at --pdp-content-max (1600px,
     shared with marketing + FAQ for consistent page width rhythm).
     Cinematic 16:9 frame at desktop (1600 × 900 at 1920 viewport)
   - .pdp-video-frame uses aspect-ratio: 16/9 (no viewport-height
     hacks); 20px radius matches carousel + marketing image radius

   Tier scale (mobile / 768 / 1024 / 1280 / 1600):
   - vertical padding:  --pdp-section-y token (60/72/88/100/110)
   - headline:          fluid clamp(28px, 2.5vw + 20px, 60px)
   - subtext (sans):    16 / 16 / 17 / 18 / 18

   PAIRING: .pdp-video and .pdp-faq both use the cream bg (#F6F2EC)
   and sit adjacent — they read as one continuous editorial stripe.
   Video's bottom and FAQ's top use --pdp-section-y-paired (halved)
   so the joint gap doesn't read as 200px of dead cream space.
   ============================================================ */

.pdp-video[b-8omfekxfl5] {
    background-color: #F6F2EC;
    padding: var(--pdp-section-y) var(--pdp-gutter, 20px) var(--pdp-section-y-paired);
}

.pdp-video-inner[b-8omfekxfl5] {
    max-width: var(--pdp-content-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.pdp-video-headline[b-8omfekxfl5] {
    margin: 0 0 16px;
    color: #003B3C;
    font-family: 'STIX Two Text', serif;
    /* Fluid font: 28 → 60px, smoothly across 320 → 1600vw (Utopia). */
    font-size: clamp(28px, 2.5vw + 20px, 60px);
    font-weight: 500;
    line-height: 1.1;
    /* Headline-grade orphan defense — no single-word hangs. */
    text-wrap: balance;
}

.pdp-video-subtext[b-8omfekxfl5] {
    /* 800px wide enough that most short video subtitles fit on one line
       at desktop. text-wrap: balance (instead of pretty) — when it DOES
       need to wrap, distributes words across lines evenly so we don't
       get a long line + 2-word orphan tail like "it delivers.". */
    max-width: 800px;
    /* Generous margin-bottom (48 → 64 across tiers) creates a clear
       breath before the video frame — copy and frame read as paired
       but distinct elements, not crammed together. */
    margin: 0 0 48px;
    color: #003B3C;
    font-family: 'Inter', sans-serif;
    font-size: var(--pdp-body-md);
    font-weight: 400;
    line-height: 1.6;
    text-wrap: balance;
}

/* 16:9 frame — guaranteed correct proportion at any width.
   Capped at 1200 (close to YouTube's native 720p source) so the
   frame stays cinematic-but-not-overwhelming inside the wider
   .pdp-video-inner container (1600). Headline + subtext above
   still use the full inner width — section reads confident,
   focal element is proportional. */
.pdp-video-frame[b-8omfekxfl5] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto; /* center the frame within the wider inner container */
    aspect-ratio: 16 / 9;
    border-radius: 20px; /* matches carousel + marketing image radius */
    overflow: hidden;
    background-color: #000; /* prevents flash of cream while iframe loads */
}

.pdp-video-frame iframe[b-8omfekxfl5] {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (min-width: 768px) {
    .pdp-video-headline[b-8omfekxfl5] { margin-bottom: 18px; }
    .pdp-video-subtext[b-8omfekxfl5] { margin-bottom: 56px; }
}

@media (min-width: 1024px) {
    .pdp-video-headline[b-8omfekxfl5] { margin-bottom: 20px; }
    .pdp-video-subtext[b-8omfekxfl5] { margin-bottom: 64px; }
}

.imgSizesBoxMainLabel[b-8omfekxfl5] {
    max-width: 350px;
    max-height: 350px;
}

/* ============================================================
   FAQ section — cream-tile section with native <details>/<summary>
   accordion. Visually pairs with .pdp-video above (same cream bg
   + matching tier scale) so the two read as one continuous
   editorial stripe.

   Layout contract:
   - Outer .pdp-faq full-bleed cream tile (#F6F2EC), padding from
     --pdp-gutter
   - Inner .pdp-faq-inner capped at --pdp-content-max (1600px,
     shared with marketing + video for consistent page width rhythm).
     Questions and answers share the full inner width — same column,
     no awkward gap
   - Each .pdp-faq-item is a native <details> with custom chevron
     that rotates 180° on [open]
   - Hairlines (#D9E2E2) above every item; bottom border on the
     final item closes the list

   Tier scale (mobile / 768 / 1024 / 1280 / 1600):
   - vertical padding:  --pdp-section-y token (60/72/88/100/110)
   - headline:          fluid clamp(28px, 2.5vw + 20px, 60px)
   - question (sans):   17 / 17 / 18 / 19 / 20
   - answer (sans):     16 / 16 / 16 / 17 / 17

   PAIRING: top side uses --pdp-section-y-paired (halved) since
   FAQ joins .pdp-video above on the same cream bg.
   ============================================================ */

.pdp-faq[b-8omfekxfl5] {
    background-color: #F6F2EC;
    /* Top uses --pdp-section-y-paired (joins Video above on cream).
       Bottom uses full --pdp-section-y (transitions OUT of cream
       stripe — Reviews below is now white, no longer paired). */
    padding: var(--pdp-section-y-paired) var(--pdp-gutter, 20px) var(--pdp-section-y);
}

.pdp-faq-inner[b-8omfekxfl5] {
    /* Capped at 1100 to match the .pdp-video-frame width above (which
       is also 1100, capped inside its wider 1600 inner container).
       Intentionally NOT using --pdp-content-max here — FAQ has no
       separate "focal element" inside, so the section's own width
       IS the focal element and should match the video frame. */
    max-width: 1100px;
    margin: 0 auto;
}

.pdp-faq-headline[b-8omfekxfl5] {
    margin: 0 0 32px;
    color: #003B3C;
    font-family: 'STIX Two Text', serif;
    /* Fluid font: 28 → 60px, smoothly across 320 → 1600vw (Utopia). */
    font-size: clamp(28px, 2.5vw + 20px, 60px);
    font-weight: 500;
    line-height: 1.1;
    text-align: center;
    text-wrap: balance;
}

.pdp-faq-list[b-8omfekxfl5] {
    /* No max-width — list fills the .pdp-faq-inner container (1200px,
       matching the video frame width above). Answer body also fills
       this width (no own cap) so question and answer share the same
       column — no awkward right-side gap on answers. */
    border-bottom: 1px solid #D9E2E2; /* closes the bottom of the list */
}

.pdp-faq-item[b-8omfekxfl5] {
    border-top: 1px solid #D9E2E2;
}

/* Kill native <details> marker (▶ triangle) — we use our own chevron. */
.pdp-faq-question[b-8omfekxfl5] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    /* Generous vertical padding (32 → 40 → 48 across tiers) creates
       breathing room between accordion rows so the list reads as
       deliberate editorial spacing, not a cramped FAQ. */
    padding: 32px 0;
    color: #003B3C;
    font-family: 'Inter', sans-serif;
    font-size: 17px; /* mobile baseline */
    font-weight: 500;
    line-height: 1.4;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.pdp-faq-question[b-8omfekxfl5]::-webkit-details-marker { display: none; }
.pdp-faq-question[b-8omfekxfl5]::marker { display: none; content: ''; }

.pdp-faq-question:hover[b-8omfekxfl5] {
    color: #009296; /* brand teal — affordance on hover */
}

/* Visible focus ring for keyboard nav, brand teal at 2px offset.
   Outline only on actual keyboard focus (not mouse click) via :focus-visible. */
.pdp-faq-question:focus[b-8omfekxfl5] { outline: none; }
.pdp-faq-question:focus-visible[b-8omfekxfl5] {
    outline: 2px solid #009296;
    outline-offset: 4px;
    border-radius: 2px;
}

.pdp-faq-question-text[b-8omfekxfl5] {
    flex: 1;
    min-width: 0;
    text-wrap: pretty;
}

.pdp-faq-chevron[b-8omfekxfl5] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #003B3C;
    margin-top: 4px; /* optical alignment with first line of question */
    transition: transform 0.2s ease;
}

/* Rotate chevron 180° when the <details> is open. */
.pdp-faq-item[open] .pdp-faq-chevron[b-8omfekxfl5] {
    transform: rotate(180deg);
}

.pdp-faq-answer[b-8omfekxfl5] {
    /* No max-width — body fills the .pdp-faq-list container width
       (1200px), so question and answer share the same column.
       Bottom padding gives space below answer when expanded;
       matches the question padding's breathing-room rhythm. */
    margin: 0;
    padding: 0 0 36px;
    color: #003B3C;
    font-family: 'Inter', sans-serif;
    font-size: var(--pdp-body-sm);
    font-weight: 400;
    line-height: 1.6;
    text-wrap: pretty;
}

/* Answer body is rendered via MarkupString (raw HTML), so scoped CSS
   doesn't reach descendants without ::deep. Mirrors the pattern used on
   the main FAQ page (Pages/StaticPages/Faqs.razor.css). Whenever marketing
   adds <p>/<ul>/<ol>/<a> tags to the CMS metafield value, these styles
   render them on-brand. If the CMS data is plain text (no HTML), these
   selectors are no-ops — zero visual change, fully forward-compatible. */
.pdp-faq-answer[b-8omfekxfl5]  p {
    margin: 0 0 14px;
}

.pdp-faq-answer[b-8omfekxfl5]  p:last-child {
    margin-bottom: 0;
}

.pdp-faq-answer[b-8omfekxfl5]  ul,
.pdp-faq-answer[b-8omfekxfl5]  ol {
    margin: 0 0 14px;
    padding-left: 24px;
}

.pdp-faq-answer[b-8omfekxfl5]  ul {
    list-style: disc;
}

.pdp-faq-answer[b-8omfekxfl5]  ol {
    list-style: decimal;
}

.pdp-faq-answer[b-8omfekxfl5]  ul:last-child,
.pdp-faq-answer[b-8omfekxfl5]  ol:last-child {
    margin-bottom: 0;
}

.pdp-faq-answer[b-8omfekxfl5]  li {
    margin-bottom: 6px;
}

.pdp-faq-answer[b-8omfekxfl5]  li:last-child {
    margin-bottom: 0;
}

.pdp-faq-answer[b-8omfekxfl5]  li::marker {
    color: #009296; /* brand teal — matches the main FAQ page treatment */
}

.pdp-faq-answer[b-8omfekxfl5]  a {
    color: #009296;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pdp-faq-answer[b-8omfekxfl5]  a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.pdp-faq-answer[b-8omfekxfl5]  strong,
.pdp-faq-answer[b-8omfekxfl5]  b {
    font-weight: 500;
}

@media (min-width: 768px) {
    .pdp-faq-headline[b-8omfekxfl5] { margin-bottom: 36px; }
}

@media (min-width: 1024px) {
    .pdp-faq-headline[b-8omfekxfl5] { margin-bottom: 40px; }
    .pdp-faq-question[b-8omfekxfl5] { font-size: 18px; padding: 40px 0; }
    .pdp-faq-chevron[b-8omfekxfl5] { width: 22px; height: 22px; }
    .pdp-faq-answer[b-8omfekxfl5] { padding-bottom: 44px; }
}

@media (min-width: 1280px) {
    .pdp-faq-headline[b-8omfekxfl5] { margin-bottom: 48px; }
    .pdp-faq-question[b-8omfekxfl5] { font-size: 19px; }
}

@media (min-width: 1600px) {
    .pdp-faq-headline[b-8omfekxfl5] { margin-bottom: 56px; }
    .pdp-faq-question[b-8omfekxfl5] { font-size: 20px; }
}

/* ============================================================
   Reviews section
   ============================================================ */

.reviewsBox[b-8omfekxfl5] {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: central;
    padding-bottom: 100px;
}

/* ============================================================
   Testimonial section — full-width teal panel with centered
   5-star rating + serif quote + uppercase author. Native HTML
   throughout (replaces legacy .Testcss / .Testcss2 + MudPaper).
   L/R gutter via var(--pdp-gutter) from the design tokens block.
   ============================================================ */

.pdp-testimonial[b-8omfekxfl5] {
    background-color: #009296;
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: var(--pdp-gutter);
    padding-right: var(--pdp-gutter);
    margin-top: 50px; /* breathing room above; section-marquee follows */
}

@media (min-width: 768px) {
    .pdp-testimonial[b-8omfekxfl5] {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media (min-width: 1280px) {
    .pdp-testimonial[b-8omfekxfl5] {
        padding-top: 110px;
        padding-bottom: 110px;
    }
}

.pdp-testimonial-inner[b-8omfekxfl5] {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.pdp-testimonial-stars[b-8omfekxfl5] {
    display: flex;
    gap: 4px;
    color: #F1A33A;
}

.pdp-testimonial-star[b-8omfekxfl5] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

@media (min-width: 768px) {
    .pdp-testimonial-star[b-8omfekxfl5] {
        width: 28px;
        height: 28px;
    }
}

.pdp-testimonial-quote[b-8omfekxfl5] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    color: #fff;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.56px;
    margin: 0;
    /* Auto-balance line widths so a short trailing word doesn't
       hang alone on the last line of the quote. */
    text-wrap: balance;
}

@media (min-width: 768px) {
    .pdp-testimonial-quote[b-8omfekxfl5] {
        font-size: 38px;
        letter-spacing: -0.76px;
    }
}

@media (min-width: 1280px) {
    .pdp-testimonial-quote[b-8omfekxfl5] {
        font-size: 48px;
        letter-spacing: -0.96px;
    }
}

.pdp-testimonial-author[b-8omfekxfl5] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin: 0;
}

@media (min-width: 768px) {
    .pdp-testimonial-author[b-8omfekxfl5] {
        font-size: 16px;
    }
}

/* ============================================================
   Marketing feature blocks (Marketing 1 + 2) — alternating
   image/text layout. Native flex, replaces legacy MudGrid +
   MudItem + MudPaper + MudStack. Inherits --pdp-gutter from
   the design tokens block via .PDPcssMarketing.

   Typography lives in .pdp-feature-* classes (was .title_big_*
   before — renamed for self-documenting scope and to drop
   bleed risk into other sections).

   Layout contract:
   - Outer .PDPcssMarketing provides L/R gutter only (no max-width)
   - Inner .pdp-feature caps at --pdp-content-max (1600px, shared
     token across all bottom sections so the page reads with
     consistent width rhythm)
   - Text column capped at 640px (~71 chars/line — readable)
   - Image capped at 880px — paired with text cap so at 1600 content
     width: 640 + 80 gap + 880 = 1600 exactly. Both cols hit their
     caps with zero internal slack, putting image close to text at
     the explicit gap distance (matches typical 2-up commerce slots).

   Tier scale (mobile / 768 / 1024 / 1280 / 1600):
   - vertical padding:  --pdp-section-y token (60/72/88/100/110)
   - column gap:        32 / 48 / 56 / 64 / 80
   - eyebrow:           13 / 13 / 14 / 14 / 14   (uppercase, .08em)
   - headline:          fluid clamp(32px, 2.1875vw + 25px, 60px)
   - subtext (sans):    16 / 16 / 17 / 18 / 18

   PAIRING: Marketing 1 (.pdp-feature--text-first) sits directly
   above Marketing 2 (.pdp-feature--media-first) on the same white
   bg — they're a paired set. Marketing 1's bottom and Marketing 2's
   top use --pdp-section-y-paired (halved) so the joint gap stays
   tight (~60-110px instead of 120-220px).
   ============================================================ */

.pdp-feature[b-8omfekxfl5] {
    max-width: var(--pdp-content-max);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: var(--pdp-section-y);
    padding-bottom: var(--pdp-section-y);
    align-items: center;
}

@media (min-width: 768px) {
    .pdp-feature[b-8omfekxfl5] {
        flex-direction: row;
        align-items: flex-start; /* top-align cols so image anchors to eyebrow/headline; text continues past image bottom when copy is longer */
        gap: 48px;
    }
}

@media (min-width: 1024px) {
    .pdp-feature[b-8omfekxfl5] {
        gap: 56px;
    }
}

@media (min-width: 1280px) {
    .pdp-feature[b-8omfekxfl5] {
        gap: 64px;
    }
}

@media (min-width: 1600px) {
    .pdp-feature[b-8omfekxfl5] {
        gap: 80px;
    }
}

/* On mobile the image should appear above the text regardless of source
   order. Marketing 1 has text-first markup, so we reverse on mobile to
   put the image on top. Marketing 2 has media-first markup, so it stacks
   correctly without reversal. At ≥768 both restore to row layout. */
.pdp-feature--text-first[b-8omfekxfl5] {
    flex-direction: column-reverse;
    /* Marketing 1's bottom joins Marketing 2's top — halve the padding
       on the joining side so the paired set reads as related, not
       separated by a wall of white space. */
    padding-bottom: var(--pdp-section-y-paired);
}

.pdp-feature--media-first[b-8omfekxfl5] {
    /* Marketing 2's top joins Marketing 1's bottom — paired-side override. */
    padding-top: var(--pdp-section-y-paired);
}

@media (min-width: 768px) {
    .pdp-feature--text-first[b-8omfekxfl5] {
        flex-direction: row;
    }

    /* OUTER-EDGE alignment for the image when its column has slack.
       Default flex distribution caps text col at 560 and lets image col
       absorb the leftover (~120px at the 1400 inner cap). With image
       centered inside that wider col, the image's outer edge sits inset
       from the layout edge — and it doesn't align with the text col on
       the OTHER variant. Pin the image to its column's outer edge so
       both variants share the same layout left/right alignment.

       Marketing 1: image on right → hug right edge of layout.
       Marketing 2: image on left  → hug left edge of layout.

       Mobile (column stacking) keeps the default centered behavior
       since .pdp-feature itself has align-items: center at <768. */
    .pdp-feature--text-first .pdp-feature-media[b-8omfekxfl5] {
        justify-content: flex-end;
    }

    .pdp-feature--media-first .pdp-feature-media[b-8omfekxfl5] {
        justify-content: flex-start;
    }
}

.pdp-feature-text[b-8omfekxfl5] {
    flex: 1 1 0;
    min-width: 0;
    /* 640px: at 17-18px body font that's ~71 chars/line — within the
       readable measure (60-75 ideal). Paired with the 880 image cap
       below: at 1600 content width, 640 + 80 gap + 880 = 1600 exactly.
       Both cols hit their caps with zero internal slack, so image and
       text sit at exactly the explicit gap distance — close pairing,
       no dead space between them. */
    max-width: 640px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pdp-feature-media[b-8omfekxfl5] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdp-feature-image[b-8omfekxfl5] {
    width: 100%;
    height: auto;
    display: block;
    /* 880px: paired with the 640 text cap above. At 1600 content width
       (--pdp-content-max), 640 text + 80 gap + 880 image = 1600 exactly.
       Image fills its col with zero internal slack so text and image sit
       at the explicit 80px gap — close 2-up pairing matching the Figma. */
    max-width: 880px;
    border-radius: 20px; /* matches carousel image radius — shared visual language */
}

/* ---------- Marketing typography (self-scoped, was .title_big_*) ---------- */

.pdp-feature-eyebrow[b-8omfekxfl5] {
    /* margin-bottom matches .pdp-feature-headline's margin-bottom at
       every tier — eyebrow→headline gap = headline→body gap. */
    margin: 0 0 24px;
    color: #009296;
    font-family: 'Inter', sans-serif;
    font-size: 13px; /* mobile baseline */
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em; /* proportional tracking — scales with font-size */
    text-transform: uppercase;
    text-align: left;
    text-wrap: balance;
}

.pdp-feature-headline[b-8omfekxfl5] {
    margin: 0 0 24px;
    color: #003B3C;
    font-family: 'STIX Two Text', serif;
    /* Fluid font: 32 → 60px, smoothly across 320 → 1600vw (Utopia). */
    font-size: clamp(32px, 2.1875vw + 25px, 60px);
    font-weight: 500;
    line-height: 1.1;
    text-align: left;
    /* Headline-grade orphan defense — distributes words across lines so
       trailing single words ("fiber.") never hang alone. */
    text-wrap: balance;
}

.pdp-feature-subtext[b-8omfekxfl5] {
    margin: 0;
    color: #003B3C;
    font-family: 'Inter', sans-serif;
    font-size: var(--pdp-body-md);
    font-weight: 400;
    line-height: 1.6;
    /* Body-grade orphan defense — `pretty` keeps natural reading flow
       (doesn't rebalance every line) while still preventing single-word
       last lines on multi-paragraph subtext. */
    text-wrap: pretty;
}

@media (min-width: 1024px) {
    .pdp-feature-eyebrow[b-8omfekxfl5] { font-size: 14px; margin-bottom: 26px; }
    .pdp-feature-headline[b-8omfekxfl5] { margin-bottom: 26px; }
}

@media (min-width: 1280px) {
    .pdp-feature-eyebrow[b-8omfekxfl5] { margin-bottom: 28px; }
    .pdp-feature-headline[b-8omfekxfl5] { margin-bottom: 28px; }
}

/* ---------- Checklist (Marketing 2 only) ---------- */

/* Native list with inline SVG check icons (was MudList + MudIcon). */
.pdp-feature-checklist[b-8omfekxfl5] {
    list-style: none;
    margin: 32px 0 0; /* matches subtext→checklist rhythm */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pdp-feature-checklist-item[b-8omfekxfl5] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pdp-feature-checklist-icon[b-8omfekxfl5] {
    width: 22px;
    height: 22px;
    color: #009296;
    flex-shrink: 0;
    margin-top: 2px;
    display: block;
}

.pdp-feature-checklist-text[b-8omfekxfl5] {
    font-family: 'Inter', sans-serif;
    /* 1px below body paragraph above (--pdp-body-md) — feature
       lists earn visual hierarchy as supporting content beneath
       the main pitch. Standard pro pattern. */
    font-size: var(--pdp-body-sm);
    font-weight: 400;
    line-height: 1.6;
    color: #003B3C;
}

@media (min-width: 1024px) {
    .pdp-feature-checklist[b-8omfekxfl5] { margin-top: 36px; gap: 16px; }
    .pdp-feature-checklist-icon[b-8omfekxfl5] { width: 24px; height: 24px; }
}

/* ============================================================
   "We also recommend" carousel + section-69j marquee text
   ============================================================ */

.carouselBox[b-8omfekxfl5] {
    max-width: 1840px;
    margin-left: auto;
    margin-right: auto;
    /* Vertical rhythm uses --pdp-section-y token. Horizontal uses
       --pdp-gutter for shell consistency with the other sections. */
    padding: var(--pdp-section-y) var(--pdp-gutter);
}

.carouselTitle[b-8omfekxfl5] {
    font-size: 30px; /* mobile baseline */
    font-weight: 600;
}

.carouselTitle2[b-8omfekxfl5] {
    font-size: 16px; /* mobile baseline */
    font-weight: normal;
}

.mud-width-full-pdp[b-8omfekxfl5] {
    height: 400px; /* mobile baseline; lifts to 600 desktop */
}

.carouselItem[b-8omfekxfl5] {
    height: 400px; /* mobile baseline */
    gap: 50px;
}

.section-69j[b-8omfekxfl5] {
    /* Fluid font: 28 → 60px, smoothly across 320 → 1600vw (Utopia). */
    font-size: clamp(28px, 2.5vw + 20px, 60px);
    padding-left: 20px;
    /* Balance line widths if the title ever wraps to multiple lines
       (single-line content today is unaffected — graceful no-op). */
    text-wrap: balance;
}

.section-ahw[b-8omfekxfl5] {
    /* mobile/tablet baseline: stacked */
    display: unset;
    gap: 20px;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}

/* ============================================================
   TABLET (≥768px) — overrides for narrow tablet portrait
   Note: most of the substantive layout shifts happen at the
   ≥1280 desktop tier, so this tier mostly preserves mobile
   defaults.
   ============================================================ */
@media (min-width: 768px) {
    .imgSizesBox[b-8omfekxfl5] {
        max-width: 350px;
        max-height: 350px;
    }

    .PDPcssFirst[b-8omfekxfl5] {
        max-width: 780px;
        padding-top: 120px;
        padding-bottom: 40px;
    }

    .textLorem[b-8omfekxfl5] {
        font-size: 25px;
    }
}

/* ============================================================
   TABLET+ (≥1024px) — switch to two-column layout
   ------------------------------------------------------------
   Below 1024 the gallery + info stack vertically. Above 1024
   they sit side-by-side, which prevents the carousel from
   filling its container width as a square (which produced the
   "huge gap before the title" issue at single-column tablet
   widths). The full desktop refinements (sidebar thumbs at
   75px, 725px gallery min-width, 800px info max-width) kick in
   at the next tier (≥1280) below.
   ============================================================ */
@media (min-width: 1024px) {
    /* Two-column row layout — base widths share space evenly so
       at narrow tablet (1024-1279) each column gets ~430px after
       gutter and gap, comfortable enough for the carousel and
       the info content. */
    .pdp-two-col[b-8omfekxfl5] {
        flex-direction: row;
        gap: 40px;
        align-items: stretch;
    }

    .pdp-gallery-col[b-8omfekxfl5] {
        flex: 1 1 0;
    }

    .pdp-info-col[b-8omfekxfl5] {
        flex: 1 1 0;
    }

    /* Standalone divider element between gallery col and info col.
       align-self: stretch makes it match the parent row's height,
       which (with align-items: flex-start below) equals the height
       of the TALLER column's content. So the divider always reaches
       the bottom of whichever column is longer — no overshoot,
       no shortfall. */
    .pdp-col-divider[b-8omfekxfl5] {
        display: block;
        align-self: stretch;
        width: 1px;
        background-color: #D9E2E2;
        flex-shrink: 0;
    }

    /* flex-start (vs default stretch) lets each column take its own
       natural height instead of forcing both to match. The divider
       above uses align-self: stretch separately so it still spans
       the full row height. */
    .pdp-two-col[b-8omfekxfl5] {
        align-items: flex-start;
    }

    /* Description tabs: switch in-column copy ON (sits under gallery),
       bottom-of-page mobile copy OFF. Selectors paired with .pdp-accordion-group
       to match the specificity of the mobile-baseline override above
       (otherwise source order leaves these silently losing the cascade). */
    .descriptionTabs.pdp-accordion-group[b-8omfekxfl5] {
        visibility: visible;
        display: flex;
    }

    .descriptionTabsMobile.pdp-accordion-group[b-8omfekxfl5] {
        visibility: hidden;
        display: none;
    }

    /* PDPcssSecond L/R padding now inherits from --pdp-gutter (which
       auto-bumps to 40px at this tier via the design tokens block).
       No per-section override needed here. */
}

/* ============================================================
   DESKTOP (≥1280px) — full desktop layout
   ============================================================ */
@media (min-width: 1280px) {
    /* Image gallery */
    .heartSpacingCarousel[b-8omfekxfl5] {
        margin-top: -5px;
    }

    .CarouselBoxFirstOut[b-8omfekxfl5] {
        height: 600px;
    }

    .CarouselBoxFirst[b-8omfekxfl5] {
        height: 500px;
    }

    .CarouselBoxHeight[b-8omfekxfl5] {
        height: 650px;
    }

    .CarouselBoxSecond[b-8omfekxfl5] {
        height: 100px;
    }

    .imgSizesBox[b-8omfekxfl5] {
        max-width: 100%;
        max-height: 100%;
    }

    .carousel-Title-items[b-8omfekxfl5] {
        height: 120px;
        font-size: 22px;
    }

    .PDPImageHeight[b-8omfekxfl5] {
        height: 85vh;
    }

    .CarouselHight[b-8omfekxfl5] {
        height: 600px;
    }

    /* Gallery: at desktop+, show the sidebar thumbnail column. The
       mobile dot pagination is hidden here via its own .gallery-dots
       rule; .thumb-strip-mobile no longer exists in markup. */
    .thumb-strip[b-8omfekxfl5] {
        display: block;
    }

    .PDPImage[b-8omfekxfl5] {
        object-fit: contain;
    }

    /* Page shells — L/R padding still uses var(--pdp-gutter) which
       auto-bumps to 40px at this tier. Only the top/bottom padding
       and max-width need an override here. */
    .PDPcssFirst[b-8omfekxfl5] {
        max-width: 1080px;
        padding-top: 120px;
        padding-bottom: 40px;
    }

    /* PDPcssSecond gutter is bumped to 40px at the ≥1024 tier (see the
       TABLET+ block above), not here. Kept this comment so the next dev
       isn't tempted to re-add a 40px override at 1280 and double-pad. */

    .textLorem[b-8omfekxfl5] {
        font-size: 35px;
    }

    /* Price block + add-to-cart */
    .txtPrice3[b-8omfekxfl5] {
        font-size: 16px;
    }

    /* Full-desktop refinements on the two-column layout activated at
       ≥1024 (see TABLET+ block above). Tightens the gallery to a 725px
       minimum and caps the info column at 800px so the layout reads as
       the demo's "magazine spread" at wide viewports rather than two
       perfectly equal halves. */
    .pdp-gallery-col[b-8omfekxfl5] {
        min-width: 725px;
    }

    .pdp-info-col[b-8omfekxfl5] {
        max-width: 800px;
    }

    .btnAddToCart[b-8omfekxfl5] {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 18px;
    }

    .image_first_button[b-8omfekxfl5] {
        font-size: 14px;
    }

    /* mobile-sticky-button: only sticky-pinned on mobile/tablet; desktop releases it */
    .mobile-sticky-button[b-8omfekxfl5] {
        position: static;
        padding: 0;
        background-color: transparent;
        z-index: auto;
    }

    /* Trust ingredients */
    .checkboxSecondLabel[b-8omfekxfl5] {
        max-width: 700px;
    }

    .marketingMarginFirst[b-8omfekxfl5] {
        margin-right: 20px;
    }

    .marketingMarginSecond[b-8omfekxfl5] {
        margin-left: 20px;
    }

    .marketingMarginSecond2[b-8omfekxfl5] {
        margin-left: 0;
        padding-top: 40px;
    }

    /* Recommend carousel */
    .carouselTitle[b-8omfekxfl5] {
        font-size: 40px;
    }

    .carouselTitle2[b-8omfekxfl5] {
        font-size: 20px;
    }

    .mud-width-full-pdp[b-8omfekxfl5] {
        height: 600px;
    }

    .carouselItem[b-8omfekxfl5] {
        height: 600px;
    }

    .section-69j[b-8omfekxfl5] {
        padding-left: 0;
    }

    .section-ahw[b-8omfekxfl5] {
        display: unset;
        gap: 20px;
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ============================================================
   WIDE DESKTOP (≥1600px) — generous breathing room
   ============================================================ */
@media (min-width: 1600px) {
    .CarouselBoxHeight[b-8omfekxfl5] {
        height: 700px;
    }

    .CarouselBoxFirstOut[b-8omfekxfl5] {
        height: 700px;
    }

    .CarouselBoxFirst[b-8omfekxfl5] {
        padding: 20px;
        height: 500px;
    }

    .CarouselBoxSecond[b-8omfekxfl5] {
        height: 100px;
    }

    .PDPImageHeight[b-8omfekxfl5] {
        height: 100vh;
    }

    .PDPcssFirst[b-8omfekxfl5] {
        max-width: 1440px;
        /* Wide-tier intentionally drops L/R padding to 0 — the
           1440px max-width already provides side margins on a wide
           viewport. Keeping this as an explicit override; var(--pdp-gutter)
           still applies via inheritance unless overridden here. */
        padding: 150px 0 60px;
    }

}

/* ============================================================
   LANDSCAPE-ORIENTATION OVERRIDES (preserved verbatim)

   These were tuning specific narrow-tablet-landscape moments
   in the original file. Standard min-width tiers can't replicate
   them because they're orientation-conditional. Left intact;
   if these cause issues, evaluate whether the landscape edge
   case still matters in the post-Phase-A redesigned PDP.

   /* TODO: review */
   ============================================================ */

@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape)[b-8omfekxfl5] {
    /* Was: 768-974 landscape — image gallery growth + smaller layout shells */
    .CarouselBoxFirstOut {
        height: 700px;
    }

    .CarouselBoxFirst[b-8omfekxfl5] {
        height: 550px;
    }

    .CarouselBoxHeight[b-8omfekxfl5] {
        height: 700px;
    }

    .carousel-Title-items[b-8omfekxfl5] {
        font-size: 20px;
        height: auto;
    }

    .PDPImageHeight[b-8omfekxfl5] {
        height: 120vh;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
    /* Was: 975-1279 landscape */
    .PDPImageHeight[b-8omfekxfl5] {
        height: 120vh;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/AndrewStory/AndrewStoryBioContent.razor.rz.scp.css */
/* ======================================================
   Andrew Story — BioContent. Scoped styles.

   Long-form bio with three reveal animation shapes:
     - Standard fade-up (headlines, body text, pull quotes, logo)
     - Vertical line grow (between-section dividers)
     - Horizontal line expand (around pull quotes)

   All driven by the shared procaps_initOurStoryReveals JS — each
   element type has its own initial + .os-revealed CSS rules below.
   No specificity wars: each reveal type targets a unique class
   rather than the generic [data-os-reveal] attribute.
   ====================================================== */

.as-bio[b-tv8afutdm9] {
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0;
    gap: 64px;
}

@media (min-width: 768px) {
    .as-bio[b-tv8afutdm9] { padding: 100px 0; gap: 88px; }
}

@media (min-width: 1280px) {
    .as-bio[b-tv8afutdm9] { padding: 120px 0; gap: 120px; }
}

/* ======================================================
   Section — single column of stacked headline/body/quote-block,
   with horizontal page padding applied here (parent has 0)
   ====================================================== */
.as-bio-section[b-tv8afutdm9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 48px;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .as-bio-section[b-tv8afutdm9] { gap: 64px; padding: 0 40px; }
}

@media (min-width: 1280px) {
    .as-bio-section[b-tv8afutdm9] { gap: 80px; }
}

/* ======================================================
   Headline — STIX, dark teal, italic teal accent
   ====================================================== */
.as-bio-headline[b-tv8afutdm9] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    letter-spacing: -1.08px;
    line-height: 1.1;
    margin: 0;
    color: #003b3c;
    text-align: center;
    font-size: 38px;
}

@media (min-width: 768px) { .as-bio-headline[b-tv8afutdm9] { font-size: 50px; } }
@media (min-width: 1280px) { .as-bio-headline[b-tv8afutdm9] { font-size: 60px; } }

.as-bio-accent[b-tv8afutdm9] {
    color: #009296;
    font-style: italic;
    font-weight: 500;
}

/* ======================================================
   Body text — Inter regular, dark teal.

   Aligned with the site-wide body paragraph standard (weight
   400, line-height 1.4, font-size 16→20 ramp). Width stays at
   840px — wider than the 720px standard for centered body
   paragraphs because the bio has long uninterrupted long-form
   passages that read better with more width. Same justification
   as OurStory's ClosingSection (which sits at 1000px).
   ====================================================== */
.as-bio-body[b-tv8afutdm9] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    color: #003b3c;
    text-align: center;
    max-width: 840px;
    width: 100%;
    font-size: 16px;
}

@media (min-width: 768px) { .as-bio-body[b-tv8afutdm9] { font-size: 20px; } }

.as-bio-body-em[b-tv8afutdm9] {
    font-style: italic;
}

/* ======================================================
   Body group — wraps multiple body paragraphs in a single
   section with tighter inter-paragraph gap than the section's
   primary gap.
   ====================================================== */
.as-bio-body-group[b-tv8afutdm9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 24px;
}

@media (min-width: 768px) { .as-bio-body-group[b-tv8afutdm9] { gap: 28px; } }
@media (min-width: 1280px) { .as-bio-body-group[b-tv8afutdm9] { gap: 32px; } }

/* ======================================================
   Quote block — pullquote framed by two horizontal hairlines
   ====================================================== */
.as-bio-quote-block[b-tv8afutdm9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 32px;
}

@media (min-width: 768px) { .as-bio-quote-block[b-tv8afutdm9] { gap: 40px; } }
@media (min-width: 1280px) { .as-bio-quote-block[b-tv8afutdm9] { gap: 48px; } }

.as-bio-pullquote[b-tv8afutdm9] {
    font-family: 'STIX Two Math', 'STIX Two Text', Georgia, serif;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.7px;
    margin: 0;
    color: #009296;
    text-align: center;
    max-width: 655px;
    width: 100%;
    font-size: 22px;
}

@media (min-width: 768px) { .as-bio-pullquote[b-tv8afutdm9] { font-size: 28px; } }
@media (min-width: 1280px) { .as-bio-pullquote[b-tv8afutdm9] { font-size: 35px; } }

/* ======================================================
   Closing logo
   ====================================================== */
.as-bio-logo[b-tv8afutdm9] {
    width: 120px;
    height: auto;
    display: block;
}

@media (min-width: 768px) { .as-bio-logo[b-tv8afutdm9] { width: 136px; } }
@media (min-width: 1280px) { .as-bio-logo[b-tv8afutdm9] { width: 154px; } }

/* ======================================================
   Reveal animations — three shapes

   Each element type targets a specific class so there's no
   selector-specificity war with the generic [data-os-reveal]
   pattern used elsewhere on the page.
   ====================================================== */

/* ---- 1. Fade-up — headlines, body, pullquote, logo ---- */
.as-bio-headline[b-tv8afutdm9],
.as-bio-body[b-tv8afutdm9],
.as-bio-pullquote[b-tv8afutdm9],
.as-bio-logo[b-tv8afutdm9] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0ms),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) var(--reveal-delay, 0ms);
}

.as-bio-headline.os-revealed[b-tv8afutdm9],
.as-bio-body.os-revealed[b-tv8afutdm9],
.as-bio-pullquote.os-revealed[b-tv8afutdm9],
.as-bio-logo.os-revealed[b-tv8afutdm9] {
    opacity: 1;
    transform: translateY(0);
}

/* ---- 2. Section divider — vertical line, height grow ---- */
.as-bio-section-divider[b-tv8afutdm9] {
    width: 1px;
    height: 0;
    background-color: #009296;
    opacity: 0;
    transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
}

.as-bio-section-divider.os-revealed[b-tv8afutdm9] {
    height: 80px;
    opacity: 1;
}

@media (min-width: 768px) {
    .as-bio-section-divider.os-revealed[b-tv8afutdm9] { height: 100px; }
}

@media (min-width: 1280px) {
    .as-bio-section-divider.os-revealed[b-tv8afutdm9] { height: 111px; }
}

/* ---- 3. Quote divider — horizontal line, width expand ---- */
.as-bio-quote-divider[b-tv8afutdm9] {
    width: 0;
    height: 1px;
    background-color: #009296;
    opacity: 0;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
}

.as-bio-quote-divider.os-revealed[b-tv8afutdm9] {
    width: 68px;
    opacity: 1;
}

/* ======================================================
   Reduced motion — skip every reveal animation, render
   the visible state immediately.
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
    .as-bio-headline[b-tv8afutdm9],
    .as-bio-body[b-tv8afutdm9],
    .as-bio-pullquote[b-tv8afutdm9],
    .as-bio-logo[b-tv8afutdm9] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .as-bio-section-divider[b-tv8afutdm9] {
        opacity: 1;
        height: 80px;
        transition: none;
    }

    @media (min-width: 768px) {
        .as-bio-section-divider[b-tv8afutdm9] { height: 100px; }
    }

    @media (min-width: 1280px) {
        .as-bio-section-divider[b-tv8afutdm9] { height: 111px; }
    }

    .as-bio-quote-divider[b-tv8afutdm9] {
        opacity: 1;
        width: 68px;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/AndrewStory/AndrewStoryHero.razor.rz.scp.css */
/* ======================================================
   Andrew Story — Hero section. Scoped styles.

   Section is the photo container with explicit aspect ratio
   per breakpoint. Photo + gradient + top stack live inside;
   the floating card is positioned absolutely at tablet+.

   The mobile card variant sits OUTSIDE the section as a
   regular block, since overlaying it on a tall portrait
   photo on small screens crowds the subject.
   ====================================================== */

.as-hero[b-gvxtf9kcqw] {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Mobile: tall portrait so Andrew has room to breathe */
    aspect-ratio: 3 / 4;
}

@media (min-width: 768px) {
    /* Tablet: landscape */
    .as-hero[b-gvxtf9kcqw] { aspect-ratio: 4 / 3; }
}

@media (min-width: 1280px) {
    /* Desktop: matches the prototype's exact ratio (~1.10 — wider than tall) */
    .as-hero[b-gvxtf9kcqw] { aspect-ratio: 1681 / 1522; }
}

.as-hero-img[b-gvxtf9kcqw] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Subject sits high in the frame; "center 20%" keeps Andrew's
       face in view across all aspect ratios. */
    object-position: center 20%;
    display: block;
}

.as-hero-gradient[b-gvxtf9kcqw] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

/* ======================================================
   Centered top stack — vertical line + label + signature
   ====================================================== */
.as-hero-top[b-gvxtf9kcqw] {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: min(719px, 90%);
}

.as-hero-line-track[b-gvxtf9kcqw] {
    height: 111px;
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

.as-hero-line[b-gvxtf9kcqw] {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    height: 0;
    animation: as-hero-line-grow-b-gvxtf9kcqw 0.6s ease both;
}

@keyframes as-hero-line-grow-b-gvxtf9kcqw {
    from { height: 0; opacity: 0; }
    to   { height: 111px; opacity: 1; }
}

.as-hero-label[b-gvxtf9kcqw] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    white-space: nowrap;
    font-size: 14px;
    animation: as-hero-fade-up-b-gvxtf9kcqw 0.7s ease 300ms both;
}

@media (min-width: 768px) { .as-hero-label[b-gvxtf9kcqw] { font-size: 16px; } }
@media (min-width: 1280px) { .as-hero-label[b-gvxtf9kcqw] { font-size: 20px; } }

.as-hero-signature[b-gvxtf9kcqw] {
    display: block;
    /* Mobile: fill the centered container (parent is min(719px, 90%)
       of viewport). Caps at 360px so it stays sane on tablets-as-
       phones; otherwise stretches with viewport down to small phones. */
    width: min(360px, 100%);
    animation: as-hero-fade-up-b-gvxtf9kcqw 0.7s ease 500ms both;
}

@media (min-width: 768px) { .as-hero-signature[b-gvxtf9kcqw] { width: 420px; } }
@media (min-width: 1280px) { .as-hero-signature[b-gvxtf9kcqw] { width: 680px; } }

@keyframes as-hero-fade-up-b-gvxtf9kcqw {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ======================================================
   Card — two presentations
   ====================================================== */
.as-hero-card-title[b-gvxtf9kcqw] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0;
    color: #003b3c;
}

.as-hero-card-accent[b-gvxtf9kcqw] {
    color: #009296;
    font-style: italic;
}

.as-hero-card-body[b-gvxtf9kcqw] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.3px;
    margin: 0;
    color: #003b3c;
}

/* ---- Tablet+ overlay card ---- */
.as-hero-card--overlay[b-gvxtf9kcqw] {
    display: none;
}

@media (min-width: 768px) {
    .as-hero-card--overlay[b-gvxtf9kcqw] {
        position: absolute;
        bottom: 60px;
        left: 40px;
        right: 40px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 48px;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 32px;
    }

    .as-hero-card--overlay .as-hero-card-title[b-gvxtf9kcqw] { font-size: 40px; }
    .as-hero-card--overlay .as-hero-card-body[b-gvxtf9kcqw] { font-size: 18px; }
}

@media (min-width: 1280px) {
    /* Desktop: floating bottom-left card with clamp-based sizing.
       The clamp lets the card scale gracefully between 1280 and very
       wide monitors without abrupt jumps. */
    .as-hero-card--overlay[b-gvxtf9kcqw] {
        bottom: 132px;
        left: 89px;
        right: auto;
        width: clamp(560px, 44vw, 791px);
        padding: clamp(52px, 4.2vw, 80px);
        gap: 33px;
        border-radius: 40px;
    }

    .as-hero-card--overlay .as-hero-card-title[b-gvxtf9kcqw] { font-size: 60px; }
    .as-hero-card--overlay .as-hero-card-body[b-gvxtf9kcqw] { font-size: 20px; }
}

/* ---- Mobile block card ----
   Text is centered on mobile (deviates from the prototype's left-
   align) so the founder-owned card visually matches the rest of
   the page's centered mobile content. Pale-aqua background (same
   tint used for the EarlyDays section on /about) creates a softer
   transition between the photo above and the white bio below. */
.as-hero-card--mobile[b-gvxtf9kcqw] {
    background-color: #e8f9f9;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.as-hero-card--mobile .as-hero-card-title[b-gvxtf9kcqw] { font-size: 36px; }
.as-hero-card--mobile .as-hero-card-body[b-gvxtf9kcqw] { font-size: 17px; }

@media (min-width: 768px) {
    .as-hero-card--mobile[b-gvxtf9kcqw] { display: none; }
}

/* ======================================================
   Reduced motion — skip every entrance animation
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
    .as-hero-line[b-gvxtf9kcqw],
    .as-hero-label[b-gvxtf9kcqw],
    .as-hero-signature[b-gvxtf9kcqw] {
        animation: none;
    }
    .as-hero-line[b-gvxtf9kcqw] { height: 111px; opacity: 1; }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Charitable.razor.rz.scp.css */
/* ======================================================
   Charitable / Giving Back — scoped styles.

   5-section narrative page with brand-aligned typography,
   site breakpoints (768/960/1280/1600), and the shared
   reveal-on-scroll pattern from /about, /Learn, /andrew-story.

   Color rhythm (top to bottom):
     1. Hero      — full-bleed photo (dark gradient overlay)
     2. Stats     — cream
     3. Story     — white
     4. Quote     — pale aqua
     5. CTA       — cream
   ====================================================== */

/* ======================================================
   1. HERO — full-bleed photo with bottom-anchored text
   ====================================================== */
.ch-hero[b-c3lxlaklnh] {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Mobile portrait, then landscape on tablet+, near-cinematic on xl */
    aspect-ratio: 3 / 4;
    background-color: #003b3c;
}

@media (min-width: 768px) {
    .ch-hero[b-c3lxlaklnh] { aspect-ratio: 16 / 10; }
}

@media (min-width: 1280px) {
    .ch-hero[b-c3lxlaklnh] { aspect-ratio: 12 / 7; }
}

.ch-hero-img[b-c3lxlaklnh] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

.ch-hero-gradient[b-c3lxlaklnh] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 30, 35, 0.15) 0%,
        rgba(0, 30, 35, 0) 25%,
        rgba(0, 30, 35, 0.4) 55%,
        rgba(0, 30, 35, 0.75) 100%
    );
    pointer-events: none;
}

.ch-hero-content[b-c3lxlaklnh] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}

@media (min-width: 768px) {
    .ch-hero-content[b-c3lxlaklnh] { padding: 60px 40px; gap: 20px; }
}

@media (min-width: 1280px) {
    .ch-hero-content[b-c3lxlaklnh] { padding: 80px 40px; gap: 24px; }
}

.ch-hero-eyebrow[b-c3lxlaklnh] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    font-size: 12px;
}

@media (min-width: 768px) { .ch-hero-eyebrow[b-c3lxlaklnh] { font-size: 14px; } }
@media (min-width: 1280px) { .ch-hero-eyebrow[b-c3lxlaklnh] { font-size: 16px; } }

.ch-hero-title[b-c3lxlaklnh] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 0;
    text-wrap: balance;
    max-width: 1000px;
    font-size: 40px;
}

@media (min-width: 768px) { .ch-hero-title[b-c3lxlaklnh] { font-size: 64px; } }
@media (min-width: 960px) { .ch-hero-title[b-c3lxlaklnh] { font-size: 76px; } }
@media (min-width: 1280px) { .ch-hero-title[b-c3lxlaklnh] { font-size: 92px; letter-spacing: -2px; } }

.ch-hero-accent[b-c3lxlaklnh] {
    color: #48e1dc;
    font-style: italic;
    font-weight: 400;
}

.ch-hero-subtitle[b-c3lxlaklnh] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    max-width: 720px;
    font-size: 16px;
    text-wrap: pretty;
}

@media (min-width: 768px) { .ch-hero-subtitle[b-c3lxlaklnh] { font-size: 18px; } }
@media (min-width: 1280px) { .ch-hero-subtitle[b-c3lxlaklnh] { font-size: 20px; } }

/* ======================================================
   2. STATS — cream band, eyebrow + 3-up row
   ====================================================== */
.ch-stats[b-c3lxlaklnh] {
    background-color: #F6F2EC;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

@media (min-width: 768px) {
    .ch-stats[b-c3lxlaklnh] { padding: 80px 40px; gap: 48px; }
}

@media (min-width: 1280px) {
    .ch-stats[b-c3lxlaklnh] { padding: 100px 40px; gap: 56px; }
}

.ch-stats-eyebrow[b-c3lxlaklnh] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) { .ch-stats-eyebrow[b-c3lxlaklnh] { font-size: 16px; } }

.ch-stats-row[b-c3lxlaklnh] {
    width: 100%;
    max-width: 1320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

@media (min-width: 768px) {
    .ch-stats-row[b-c3lxlaklnh] {
        flex-direction: row;
        justify-content: space-between;
        gap: 40px;
    }
}

.ch-stat[b-c3lxlaklnh] {
    flex: 1;
    text-align: center;
}

.ch-stat-value[b-c3lxlaklnh] {
    font-family: 'STIX Two Text', serif;
    color: #009296;
    line-height: 1;
    letter-spacing: -1.5px;
    margin: 0 0 12px;
    font-weight: 500;
    font-size: 44px;
}

@media (min-width: 768px) { .ch-stat-value[b-c3lxlaklnh] { font-size: 56px; } }
@media (min-width: 1280px) { .ch-stat-value[b-c3lxlaklnh] { font-size: 72px; } }

.ch-stat-label[b-c3lxlaklnh] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .ch-stat-label[b-c3lxlaklnh] { font-size: 18px; } }

.ch-stat-divider[b-c3lxlaklnh] {
    display: none;
}

@media (min-width: 768px) {
    .ch-stat-divider[b-c3lxlaklnh] {
        display: block;
        width: 1px;
        height: 80px;
        background-color: #009296;
        opacity: 0.3;
        flex-shrink: 0;
        align-self: center;
    }
}

/* ======================================================
   3. STORY — white band, two-column at tablet+
   ====================================================== */
.ch-story[b-c3lxlaklnh] {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 60px 20px;
}

@media (min-width: 768px) {
    .ch-story[b-c3lxlaklnh] {
        flex-direction: row;
        gap: 80px;
        align-items: center;
        padding: 80px 40px;
    }
}

@media (min-width: 1280px) {
    .ch-story[b-c3lxlaklnh] { padding: 100px 40px; }
}

.ch-story-image-wrap[b-c3lxlaklnh] {
    width: 100%;
    flex: 1;
}

@media (min-width: 768px) {
    .ch-story-image-wrap[b-c3lxlaklnh] { max-width: 600px; }
}

.ch-story-image[b-c3lxlaklnh] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.ch-story-copy[b-c3lxlaklnh] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .ch-story-copy[b-c3lxlaklnh] { max-width: 560px; }
}

.ch-story-eyebrow[b-c3lxlaklnh] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) { .ch-story-eyebrow[b-c3lxlaklnh] { font-size: 16px; } }

.ch-story-title[b-c3lxlaklnh] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.16px;
    margin: 0;
    font-weight: 400;
    font-size: 32px;
}

@media (min-width: 768px) { .ch-story-title[b-c3lxlaklnh] { font-size: 42px; } }
@media (min-width: 960px) { .ch-story-title[b-c3lxlaklnh] { font-size: 48px; } }
@media (min-width: 1280px) { .ch-story-title[b-c3lxlaklnh] { font-size: 54px; } }

.ch-story-accent[b-c3lxlaklnh] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.ch-tealline[b-c3lxlaklnh] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.ch-story-paragraph[b-c3lxlaklnh] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .ch-story-paragraph[b-c3lxlaklnh] { font-size: 18px; } }
@media (min-width: 1280px) { .ch-story-paragraph[b-c3lxlaklnh] { font-size: 20px; } }

/* ======================================================
   4. QUOTE — aqua band, portrait + serif quote
   ====================================================== */
.ch-quote[b-c3lxlaklnh] {
    background-color: #e8f9f9;
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

@media (min-width: 768px) {
    .ch-quote[b-c3lxlaklnh] {
        flex-direction: row;
        align-items: center;
        gap: 64px;
        padding: 100px 40px;
    }
}

@media (min-width: 1280px) {
    .ch-quote[b-c3lxlaklnh] { padding: 140px 40px; gap: 80px; }
}

.ch-quote-portrait-wrap[b-c3lxlaklnh] {
    width: 200px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .ch-quote-portrait-wrap[b-c3lxlaklnh] { width: 280px; }
}

@media (min-width: 1280px) {
    .ch-quote-portrait-wrap[b-c3lxlaklnh] { width: 360px; }
}

.ch-quote-portrait[b-c3lxlaklnh] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.ch-quote-content[b-c3lxlaklnh] {
    flex: 1;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

@media (min-width: 768px) {
    .ch-quote-content[b-c3lxlaklnh] { text-align: left; gap: 28px; }
}

.ch-quote-text[b-c3lxlaklnh] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.5px;
    margin: 0;
    font-size: 22px;
    text-wrap: balance;
}

@media (min-width: 768px) { .ch-quote-text[b-c3lxlaklnh] { font-size: 26px; } }
@media (min-width: 1280px) { .ch-quote-text[b-c3lxlaklnh] { font-size: 32px; } }

.ch-quote-emphasis[b-c3lxlaklnh] {
    color: #009296;
    font-weight: 500;
}

.ch-quote-attr[b-c3lxlaklnh] {
    font-family: Inter, sans-serif;
    margin: 0;
    color: #003b3c;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (min-width: 768px) {
    .ch-quote-attr[b-c3lxlaklnh] { align-items: flex-start; }
}

.ch-quote-attr-name[b-c3lxlaklnh] {
    font-weight: 600;
    font-size: 16px;
}

@media (min-width: 768px) { .ch-quote-attr-name[b-c3lxlaklnh] { font-size: 18px; } }

.ch-quote-attr-role[b-c3lxlaklnh] {
    font-weight: 400;
    color: #406c6d;
    font-size: 14px;
}

@media (min-width: 768px) { .ch-quote-attr-role[b-c3lxlaklnh] { font-size: 16px; } }

/* ======================================================
   5. PARTNERSHIP + CTA — cream band, centered logo lockup
   ====================================================== */
.ch-partnership[b-c3lxlaklnh] {
    background-color: #F6F2EC;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .ch-partnership[b-c3lxlaklnh] { padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .ch-partnership[b-c3lxlaklnh] { padding: 100px 40px; }
}

.ch-partnership-content[b-c3lxlaklnh] {
    max-width: 720px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.ch-partnership-eyebrow[b-c3lxlaklnh] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) { .ch-partnership-eyebrow[b-c3lxlaklnh] { font-size: 16px; } }

.ch-partnership-logo[b-c3lxlaklnh] {
    height: auto;
    max-width: 260px;
    width: 100%;
    display: block;
    margin: 4px 0;
}

@media (min-width: 768px) {
    .ch-partnership-logo[b-c3lxlaklnh] { max-width: 380px; }
}

@media (min-width: 1280px) {
    .ch-partnership-logo[b-c3lxlaklnh] { max-width: 480px; }
}

.ch-partnership-paragraph[b-c3lxlaklnh] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.5;
    letter-spacing: -0.4px;
    margin: 0;
    max-width: 640px;
    font-size: 16px;
}

@media (min-width: 768px) { .ch-partnership-paragraph[b-c3lxlaklnh] { font-size: 18px; } }

.ch-cta-row[b-c3lxlaklnh] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 16px;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .ch-cta-row[b-c3lxlaklnh] {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
        max-width: none;
    }
}

.ch-cta[b-c3lxlaklnh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    height: 50px;
    padding: 0 32px;
    min-width: 280px;
    transition: background-color 220ms ease, color 220ms ease,
                box-shadow 220ms ease, transform 220ms ease,
                border-color 220ms ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.ch-cta--primary[b-c3lxlaklnh] {
    background-color: #009296;
    color: #fff;
}

.ch-cta--secondary[b-c3lxlaklnh] {
    background-color: transparent;
    color: #009296;
    border: 1.5px solid #009296;
}

@media (hover: hover) {
    .ch-cta--primary:hover[b-c3lxlaklnh] {
        background-color: #007e82;
        box-shadow: 0 8px 28px rgba(0, 146, 150, 0.32);
        transform: translateY(-1px);
    }

    .ch-cta--secondary:hover[b-c3lxlaklnh] {
        background-color: #009296;
        color: #fff;
        transform: translateY(-1px);
    }
}

.ch-cta:focus-visible[b-c3lxlaklnh] {
    outline: 3px solid #009296;
    outline-offset: 3px;
}

/* ======================================================
   Reveal-on-scroll — fade-up for elements with [data-os-reveal]
   ====================================================== */
[data-os-reveal][b-c3lxlaklnh] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

[data-os-reveal].os-revealed[b-c3lxlaklnh] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-os-reveal][b-c3lxlaklnh] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ch-cta[b-c3lxlaklnh] {
        transition: none;
    }
    .ch-cta--primary:hover[b-c3lxlaklnh],
    .ch-cta--secondary:hover[b-c3lxlaklnh] {
        transform: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Contact-us.razor.rz.scp.css */
/* ======================================================
   Contact Us page — scoped styles
   Hero treatment matches the FAQ + OurStory + Quality banners
   so the static-page family reads as siblings.
   Breakpoints: 768 / 960 / 1280 / 1600.
   ====================================================== */

/* ---- Hero ---- */
.hero[b-myh7k2e9pc] {
    background-color: #F6F2EC;
}

.hero-padding[b-myh7k2e9pc] {
    padding: 48px 20px;
}

.hero-title[b-myh7k2e9pc] {
    font-family: 'STIX Two Text', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #003b3c;
    margin: 0 0 12px;
}

.hero-title-accent[b-myh7k2e9pc] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.hero-subtitle[b-myh7k2e9pc] {
    font-family: Inter, sans-serif;
    color: #003b3c;
    font-size: 16px;
    line-height: 1.5;
    /* 720px shared centered-paragraph reading column across the
       static-page family. */
    max-width: 720px;
    margin: 0;
}

@media (min-width: 768px) {
    .hero-padding[b-myh7k2e9pc] { text-align: center; }
    .hero-subtitle[b-myh7k2e9pc] { margin: 0 auto; }
}

@media (min-width: 960px) {
    .hero-padding[b-myh7k2e9pc] { padding: 64px 40px; }
    .hero-title[b-myh7k2e9pc] { font-size: 42px; }
    .hero-subtitle[b-myh7k2e9pc] { font-size: 18px; }
}

@media (min-width: 1280px) {
    .hero-padding[b-myh7k2e9pc] { padding: 80px 40px; }
    .hero-title[b-myh7k2e9pc] { font-size: 54px; margin: 0 0 16px; }
}

@media (min-width: 1600px) {
    .hero-padding[b-myh7k2e9pc] { padding: 96px 40px; }
    .hero-title[b-myh7k2e9pc] { font-size: 72px; }
    .hero-subtitle[b-myh7k2e9pc] { font-size: 20px; }
}

/* ======================================================
   Content area
   ====================================================== */
/* Symmetric top + bottom so the gap above the cards (between hero
   and grid) matches the gap below (between grid and footer). */
.content-padding[b-myh7k2e9pc] {
    padding: 40px 20px;
}

@media (min-width: 768px) {
    .content-padding[b-myh7k2e9pc] { padding: 48px 40px; }
}

@media (min-width: 960px) {
    .content-padding[b-myh7k2e9pc] { padding: 56px 40px; }
}

/* ======================================================
   Contact option cards (Chat / Call / Email row)

   Layout: 1-up on mobile, 3-up at 960+.

   Per-card content model is intentionally uniform so all three
   cards have similar natural heights:
      1. Header row (icon + title side-by-side)
      2. Primary line (description for Chat/Email, big phone for Call)
      3. Secondary line (schedule)
      4. CTA (pinned to bottom via margin-top:auto)

   The Call card uses the "primary" slot for its phone number
   instead of a description, which is the only structural diff.
   ====================================================== */
.contact-grid[b-myh7k2e9pc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* 4-card layout: 1 / 2 / 4 columns. We hold off on going 4-up until
   xl (1280+) because at 960px each card would be ~220px wide — too
   tight for the big phone number on the Call card. 2 columns at
   tablet+ gives a clean 2×2 grid on most tablets. */
@media (min-width: 768px) {
    .contact-grid[b-myh7k2e9pc] {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1280px) {
    .contact-grid[b-myh7k2e9pc] {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }
}

.contact-card[b-myh7k2e9pc] {
    background-color: #F6F2EC;
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 768px) {
    .contact-card[b-myh7k2e9pc] { padding: 32px; gap: 14px; }
}

/* ---- Header row — icon + title side-by-side ---- */
.contact-card-header[b-myh7k2e9pc] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-card-icon[b-myh7k2e9pc] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #009296;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-card-title[b-myh7k2e9pc] {
    font-family: Inter, sans-serif;
    color: #003b3c;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}

/* ---- Primary slot ----
   Used by Chat & Email for a single description line, replaced by
   the phone-number link on the Call card, used by the Write card
   for the multi-line address. white-space: pre-line renders \n in
   the source string as actual line breaks. */
.contact-card-primary[b-myh7k2e9pc] {
    font-family: Inter, sans-serif;
    color: #003b3c;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    white-space: pre-line;
}

/* Phone link — big STIX teal, tap-to-dial. Visually distinct from
   the description style on the other two cards, which gives the
   Call card its rightful "phone is the action" emphasis. */
.contact-card-phone[b-myh7k2e9pc] {
    font-family: 'STIX Two Text', serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #009296;
    text-decoration: none;
    align-self: flex-start;
    transition: color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
    .contact-card-phone[b-myh7k2e9pc] { font-size: 28px; }
}

@media (hover: hover) {
    .contact-card-phone:hover[b-myh7k2e9pc] { color: #007e82; }
}

.contact-card-phone:focus-visible[b-myh7k2e9pc] {
    outline: 2px solid #009296;
    outline-offset: 4px;
    border-radius: 2px;
}

/* ---- Schedule line — muted teal, single line ---- */
.contact-card-schedule[b-myh7k2e9pc] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #406c6d;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

/* ---- CTA ---- */
.contact-card-action[b-myh7k2e9pc] {
    /* Pin to bottom so all three CTAs align across cards. */
    margin-top: auto;
    align-self: flex-start;
    /* Just enough breathing room above the button — gives the eye
       a moment between the schedule and the action. */
    padding-top: 8px;
}

@media (min-width: 768px) {
    .contact-card-action[b-myh7k2e9pc] { padding-top: 12px; }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Faqs.razor.rz.scp.css */
/* ======================================================
   FAQ page — scoped styles.

   Structure (top to bottom):
     .faq-hero          full-width band, cream background. Padding is
                        applied directly so the headline aligns flush
                        to the page margin, mirroring Contact-us.
     .faq-nav           full-width band, white. Contains the inline
                        pill list (uses .faq-container).
     .faq-nav--stuck    fixed-position twin of .faq-nav. Hidden until
                        the inline nav scrolls behind the page header,
                        then fades in to act as the "sticky" nav.
                        Pure position:sticky doesn't work in MudBlazor
                        because ancestors create a containing-block
                        boundary — same workaround as the Ingredients
                        A-Z bar.
     .faq-main          full-width, contains category sections +
                        accordions (uses .faq-container).

   .faq-container caps the pill row, section titles, and accordion
   items at one shared readable column width and centers them on the
   page. The hero band is intentionally outside this container so its
   text can flush-left on mobile and center within the full band on
   tablet and up.

   Breakpoints: 768 (tablet) / 960 (desktop) / 1280 (lg) / 1600 (xl) —
   matches the rest of the site (CollectionHeader, Contact-us, etc.).
   ====================================================== */

/* ---- Shared container ---- */
.faq-container[b-4h01odelpz] {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 768px) {
    .faq-container[b-4h01odelpz] { padding: 0 32px; }
}

@media (min-width: 960px) {
    .faq-container[b-4h01odelpz] { max-width: 920px; padding: 0 40px; }
}

/* xl: huge monitors get a wider column so the content doesn't feel
   cramped relative to the full-width hero band above. Line lengths
   in answer paragraphs stay around 80 chars — still readable. */
@media (min-width: 1600px) {
    .faq-container[b-4h01odelpz] { max-width: 1080px; }
}

/* ======================================================
   Hero — mirrors Contact-us.razor.css exactly. No inner container:
   horizontal padding is applied directly so the headline + copy
   left-align flush to the page margin (40px on desktop), the way
   the Contact Us banner does. Type scale + vertical padding
   ramp also match Contact Us 1:1.
   ====================================================== */
.faq-hero[b-4h01odelpz] {
    background: #F6F2EC;
    padding: 48px 20px;
}

.faq-hero-title[b-4h01odelpz] {
    font-family: 'STIX Two Text', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #003b3c;
    margin: 0 0 12px;
}

.faq-hero-accent[b-4h01odelpz] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.faq-hero-subtitle[b-4h01odelpz] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #003b3c;
    margin: 0;
    max-width: 800px;
}

.faq-hero-link[b-4h01odelpz] {
    color: #003b3c;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 120ms ease;
}

.faq-hero-link:hover[b-4h01odelpz],
.faq-hero-link:focus-visible[b-4h01odelpz] {
    color: #009296;
}

/* 768+ : tablet and up — headline + copy centered within the banner.
   Subtitle gets margin auto so its 800px max-width centers visually
   instead of sitting flush left. Mobile keeps the left-aligned default. */
@media (min-width: 768px) {
    .faq-hero[b-4h01odelpz] { text-align: center; }
    .faq-hero-subtitle[b-4h01odelpz] { margin: 0 auto; }
}

@media (min-width: 960px) {
    .faq-hero[b-4h01odelpz] { padding: 64px 40px; }
    .faq-hero-title[b-4h01odelpz] { font-size: 42px; }
    .faq-hero-subtitle[b-4h01odelpz] { font-size: 18px; }
}

@media (min-width: 1280px) {
    .faq-hero[b-4h01odelpz] { padding: 80px 40px; }
    .faq-hero-title[b-4h01odelpz] { font-size: 54px; margin: 0 0 16px; }
}

@media (min-width: 1600px) {
    .faq-hero[b-4h01odelpz] { padding: 96px 40px; }
    .faq-hero-title[b-4h01odelpz] { font-size: 72px; }
    .faq-hero-subtitle[b-4h01odelpz] { font-size: 20px; }
}

/* ======================================================
   Pill nav — inline (in normal flow, sits under the hero)

   Pure CSS position:sticky doesn't work in this MudBlazor layout —
   ancestors create a containing-block boundary we can't isolate without
   modifying MudBlazor itself. Same issue the Ingredients page hit.

   Solution (mirrors Ingredients): a hidden fixed-position twin (.faq-nav--stuck
   below) fades in once this inline nav scrolls behind the page header.
   ====================================================== */
.faq-nav[b-4h01odelpz] {
    background: #fff;
    border-bottom: 1px solid #D9E2E2;
    padding: 14px 0;
}

/* Fixed twin — hidden until the inline nav scrolls behind the header,
   then fades in. Toggled by the scroll handler in Faqs.razor.
   z-index 90 stays under the page header (z-index 100). */
.faq-nav--stuck[b-4h01odelpz] {
    position: fixed;
    top: var(--header-h, 88px);
    left: 0;
    right: 0;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.08s ease, visibility 0.08s;
}

.faq-nav--stuck.is-visible[b-4h01odelpz] {
    opacity: 1;
    visibility: visible;
}

/* Below desktop (<960), pills don't all fit on one line — horizontal scroll
   is the consistent behavior across the whole mobile/tablet range. At 960+
   they fit comfortably in the container, so we switch to wrap (which becomes
   a single line in practice since there's room). */
.faq-nav-list[b-4h01odelpz] {
    list-style: none;
    margin: 0 -24px;
    padding: 0 24px;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    /* iOS momentum scroll for the rare user who actually swipes the pill bar. */
    -webkit-overflow-scrolling: touch;
}

.faq-nav-list[b-4h01odelpz]::-webkit-scrollbar {
    display: none;
}

/* Pill spec matches the Ingredients page A-Z buttons:
     idle    — cream (#F6F2EC)
     hover   — light mint (#e0ece8), subtle so it doesn't compete with active
     active  — brand teal (#009296) with white text — reserved for the
               currently-in-view category, set by the scroll observer */
.faq-nav-link[b-4h01odelpz] {
    display: inline-block;
    flex-shrink: 0;
    padding: 9px 16px;
    background: #F6F2EC;
    border-radius: 999px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #003b3c;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .faq-nav-link:hover[b-4h01odelpz] {
        background: #e0ece8;
        color: #003b3c;
    }
}

.faq-nav-link.is-active[b-4h01odelpz] {
    background: #009296;
    color: #fff;
}

.faq-nav-link:focus-visible[b-4h01odelpz] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

/* At each container-padding breakpoint, match the negative margin so the
   pill bar's edge bleed always lines up with the viewport edge. */
@media (min-width: 768px) {
    .faq-nav-list[b-4h01odelpz] {
        margin: 0 -32px;
        padding: 0 32px;
        gap: 10px;
    }
}

/* Desktop: all 5 pills fit comfortably in the container — drop the
   horizontal-scroll plumbing and let them sit naturally in one line.
   Centered to align under the centered hero headline above. */
@media (min-width: 960px) {
    .faq-nav-list[b-4h01odelpz] {
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

/* ======================================================
   Main content area
   ====================================================== */
.faq-main[b-4h01odelpz] {
    padding: 48px 0 96px;
}

.faq-section + .faq-section[b-4h01odelpz] {
    margin-top: 56px;
}

.faq-section[b-4h01odelpz] {
    /* MainLayout sets `html { scroll-padding-top: var(--header-h) }` so
       anchor jumps already clear the main bar. We add the height of the
       sticky pill bar (~60px) plus comfortable breathing room (~60px) so
       the section title lands well below the pills, not kissing them. */
    scroll-margin-top: 120px;
}

.faq-section-title[b-4h01odelpz] {
    font-family: 'STIX Two Text', serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #003b3c;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .faq-main[b-4h01odelpz] { padding: 56px 0 112px; }
    .faq-section + .faq-section[b-4h01odelpz] { margin-top: 64px; }
    .faq-section-title[b-4h01odelpz] { font-size: 32px; }
}

@media (min-width: 960px) {
    .faq-main[b-4h01odelpz] { padding: 64px 0 128px; }
    .faq-section + .faq-section[b-4h01odelpz] { margin-top: 72px; }
    .faq-section-title[b-4h01odelpz] { font-size: 36px; margin: 0 0 20px; }
}

/* ======================================================
   Accordion list (questions + answers)
   ====================================================== */
.faq-list[b-4h01odelpz] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #D9E2E2;
}

.faq-item[b-4h01odelpz] {
    border-bottom: 1px solid #D9E2E2;
}

.faq-item details[b-4h01odelpz] {
    margin: 0;
}

/* Question row (the <summary>) — strip the default disclosure triangle
   and add our own +/- glyph aligned to the right. */
.faq-question-row[b-4h01odelpz] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #003b3c;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.faq-question-row[b-4h01odelpz]::-webkit-details-marker {
    display: none;
}

.faq-question-text[b-4h01odelpz] {
    flex: 1;
}

/* True minus glyph (U+2212) so the "−" visually matches the "+" weight,
   instead of the much-narrower hyphen-minus. */
.faq-question-row[b-4h01odelpz]::after {
    content: "+";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009296;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}

.faq-item details[open] .faq-question-row[b-4h01odelpz]::after {
    content: "\2212";
}

@media (hover: hover) {
    .faq-question-row:hover[b-4h01odelpz] {
        color: #009296;
    }
}

.faq-question-row:focus-visible[b-4h01odelpz] {
    outline: 2px solid #009296;
    outline-offset: 4px;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .faq-question-row[b-4h01odelpz] {
        font-size: 17px;
        padding: 22px 0;
    }

    .faq-question-row[b-4h01odelpz]::after {
        width: 28px;
        height: 28px;
        font-size: 32px;
    }
}

@media (min-width: 960px) {
    .faq-question-row[b-4h01odelpz] {
        font-size: 18px;
        padding: 24px 0;
    }
}

/* ======================================================
   Answer body — paragraphs, lists, definition lists, links
   ====================================================== */
.faq-answer[b-4h01odelpz] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #003b3c;
    /* Right padding so answer text doesn't run under the +/- toggle column */
    padding: 0 44px 24px 0;
}

/* All children of .faq-answer are rendered via MarkupString (raw HTML),
   which Blazor's scoped CSS does NOT reach into by default. We have to
   use ::deep for every answer-body selector below — without it, MudBlazor's
   global `* { padding: 0 }` reset wins and lists/etc render unstyled. */
.faq-answer[b-4h01odelpz]  p {
    margin: 0 0 14px;
}

.faq-answer[b-4h01odelpz]  p:last-child {
    margin-bottom: 0;
}

/* Lists: bullets/numbers sit in their own gutter (padding-left), text
   aligns with the list-item content edge. list-style-position: outside
   (default) renders the marker in the padding zone — so the padding-left
   value needs to be wide enough that the marker stays inside the answer's
   visible content area, not bleeding into the row to the left. */
.faq-answer[b-4h01odelpz]  ul,
.faq-answer[b-4h01odelpz]  ol {
    margin: 0 0 14px;
    padding-left: 24px;
}

.faq-answer[b-4h01odelpz]  ul {
    list-style: disc;
}

.faq-answer[b-4h01odelpz]  ol {
    list-style: decimal;
}

.faq-answer[b-4h01odelpz]  ul:last-child,
.faq-answer[b-4h01odelpz]  ol:last-child {
    margin-bottom: 0;
}

.faq-answer[b-4h01odelpz]  li {
    margin-bottom: 6px;
}

.faq-answer[b-4h01odelpz]  li:last-child {
    margin-bottom: 0;
}

.faq-answer[b-4h01odelpz]  li::marker {
    color: #009296;
}

/* Definition list — used for term/value pairs (e.g., the unit-of-measure
   answer). Two-column grid keeps terms aligned. */
.faq-answer[b-4h01odelpz]  dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 6px;
    margin: 0 0 14px;
}

.faq-answer[b-4h01odelpz]  dl:last-child {
    margin-bottom: 0;
}

.faq-answer[b-4h01odelpz]  dt {
    font-weight: 600;
    color: #003b3c;
}

.faq-answer[b-4h01odelpz]  dd {
    margin: 0;
}

.faq-answer[b-4h01odelpz]  .faq-link {
    color: #003b3c;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 120ms ease;
}

.faq-answer[b-4h01odelpz]  .faq-link:hover,
.faq-answer[b-4h01odelpz]  .faq-link:focus-visible {
    color: #009296;
}

.faq-answer[b-4h01odelpz]  strong {
    font-weight: 600;
}

.faq-answer[b-4h01odelpz]  em {
    font-style: italic;
}

@media (min-width: 768px) {
    .faq-answer[b-4h01odelpz] {
        font-size: 16px;
        padding: 0 56px 28px 0;
    }
}

@media (min-width: 960px) {
    .faq-answer[b-4h01odelpz] {
        padding: 0 64px 32px 0;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Learn.razor.rz.scp.css */
/* ======================================================
   Quality page (/Learn) — page-level scoped styles.

   Most of the page is composed from per-section components in
   Components/Pages/StaticPages/Quality/, each with its own scoped
   CSS. The only thing that lives here is the marquee wrapper —
   the reusable ScrollingBanner has no built-in band styling, so
   the cream/mint background + vertical breathing room are applied
   on the wrapper here on the Quality page only.
   ====================================================== */

.q-marquee[b-2fmp3e01se] {
    background-color: #ebfafa;
    padding: 60px 0;
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryBanner.razor.rz.scp.css */
/* ======================================================
   Our Story — Banner section. Scoped styles.

   Layout: full-width teal-gradient hero band, vertical decorative
   line at top, large headline with italic accent, two paragraphs
   of subtitle copy, large pill image bisecting the bottom edge.
   White spacer follows so the overflowing pill has clear space
   before the next section.

   Animations are CSS-only with staggered delays — no JS needed.
   prefers-reduced-motion disables them entirely.

   Color note: the italic accent uses #48e1dc (a brighter aqua than
   our brand teal #009296). This is intentional — on a teal background
   our standard #009296 italic would disappear. AQUA is reserved for
   "italic accent on teal-background hero" contexts. Used in this
   section only. Brand teal #009296 is still used for the gradient.
   ====================================================== */

.os-banner[b-r9dvczxou2] {
    background: linear-gradient(to bottom, #009296 0%, #00c2bd 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: visible;
    padding: 40px 20px 0;
    min-height: 600px;
    z-index: 2;
}

@media (min-width: 768px) {
    .os-banner[b-r9dvczxou2] {
        min-height: 860px;
        padding: 40px 40px 0;
    }
}

@media (min-width: 1280px) {
    .os-banner[b-r9dvczxou2] {
        min-height: 980px;
        padding: 58px 40px 0;
    }
}

/* ======================================================
   Decorative vertical line — animated grow on mount
   ====================================================== */
.os-banner-line[b-r9dvczxou2] {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    height: 0;
    margin: 0 0 48px;
    flex-shrink: 0;
    animation: os-banner-line-grow-b-r9dvczxou2 0.6s ease both;
}

@keyframes os-banner-line-grow-b-r9dvczxou2 {
    from { height: 0; opacity: 0; }
    to   { height: 111px; opacity: 1; }
}

/* ======================================================
   Headline — STIX, white, with AQUA italic accent on "finest".
   The accent starts white and shifts to AQUA after the title's
   fade-up has settled, drawing the eye to the word.
   ====================================================== */
.os-banner-title[b-r9dvczxou2] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #fff;
    text-align: center;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 0 0 40px;
    font-size: 56px;
    animation: os-banner-fade-up-b-r9dvczxou2 0.7s ease 350ms both;
}

@media (min-width: 768px) {
    .os-banner-title[b-r9dvczxou2] { font-size: 80px; }
}

/* Smooth ramp between 768 (80px) and 1280 (120px) — without this
   the headline jumps an awkward 40px at the desktop breakpoint. */
@media (min-width: 960px) {
    .os-banner-title[b-r9dvczxou2] { font-size: 96px; }
}

@media (min-width: 1280px) {
    .os-banner-title[b-r9dvczxou2] {
        font-size: 120px;
        letter-spacing: -2.4px;
    }
}

.os-banner-title-accent[b-r9dvczxou2] {
    font-style: italic;
    font-weight: 400;
    color: #fff;
    animation: os-banner-accent-color-b-r9dvczxou2 0.8s ease 900ms both;
}

@keyframes os-banner-accent-color-b-r9dvczxou2 {
    from { color: #fff; }
    to   { color: #48e1dc; }
}

/* ======================================================
   Subtitle — Inter, white, max 640px column. Two real paragraphs
   instead of the prototype's <br/><br/> hack.
   ====================================================== */
.os-banner-subtitle[b-r9dvczxou2] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #fff;
    text-align: center;
    letter-spacing: -0.4px;
    line-height: 1.4;
    margin: 0;
    /* 720px standardizes the hero subtitle column across the
       OurStory and Quality banners — the prototypes had different
       values (640 / 719); 720 is a clean shared width. */
    max-width: 720px;
    text-wrap: pretty;
    font-size: 16px;
    animation: os-banner-fade-up-b-r9dvczxou2 0.7s ease 600ms both;
}

.os-banner-subtitle + .os-banner-subtitle[b-r9dvczxou2] {
    margin-top: 22px;
    margin-bottom: 80px;
}

@media (min-width: 768px) {
    .os-banner-subtitle[b-r9dvczxou2] { font-size: 20px; }
}

/* Shared keyframe used by title + subtitle. The pill wrappers use
   their own composed keyframes because they need to keep a translate
   on the X axis (centered) while animating Y. */
@keyframes os-banner-fade-up-b-r9dvczxou2 {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ======================================================
   Pill image — two variants.

   Mobile/tablet (<1280): simple bisect. Pill positioned at the
   section's bottom edge and shifted up 35% of its own height so
   roughly half hangs above and half below.

   Desktop (1280+): custom crop — the wrapper has overflow:hidden
   while the inner <img> is intentionally oversized and offset so
   only a deliberate slice of the pill is shown, hanging off
   center-right. Matches the prototype's design intent.
   ====================================================== */
.os-banner-pill-wrap[b-r9dvczxou2] {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

.os-banner-pill-wrap--mobile[b-r9dvczxou2] {
    top: 100%;
    left: 50%;
    width: 90%;
    max-width: 680px;
    /* translate(-50%, -35%) is the resting state; the keyframe below
       composes the entrance Y-shift on top of it. */
    transform: translate(-50%, -35%);
    animation: os-banner-pill-fade-mobile-b-r9dvczxou2 0.7s ease 900ms both;
}

.os-banner-pill-wrap--mobile .os-banner-pill[b-r9dvczxou2] {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes os-banner-pill-fade-mobile-b-r9dvczxou2 {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-35% + 16px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -35%);
    }
}

.os-banner-pill-wrap--desktop[b-r9dvczxou2] {
    display: none;
}

@media (min-width: 1280px) {
    .os-banner-pill-wrap--mobile[b-r9dvczxou2] {
        display: none;
    }

    .os-banner-pill-wrap--desktop[b-r9dvczxou2] {
        display: block;
        bottom: -243px;
        left: 50%;
        width: 1060px;
        height: 472px;
        overflow: hidden;
        transform: translateX(-50%);
        animation: os-banner-pill-fade-desktop-b-r9dvczxou2 0.7s ease 900ms both;
    }

    .os-banner-pill-wrap--desktop .os-banner-pill[b-r9dvczxou2] {
        position: absolute;
        width: 1182px;
        height: 624px;
        bottom: -155px;
        right: -71px;
        max-width: none;
    }
}

@keyframes os-banner-pill-fade-desktop-b-r9dvczxou2 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ======================================================
   White spacer below the banner — absorbs the pill overflow so
   it has clear background instead of bleeding into the next
   section. Sized to fit the pill's height at each breakpoint.
   ====================================================== */
.os-banner-spacer[b-r9dvczxou2] {
    background: #fff;
    height: 180px;
}

@media (min-width: 768px) {
    .os-banner-spacer[b-r9dvczxou2] { height: 260px; }
}

@media (min-width: 1280px) {
    .os-banner-spacer[b-r9dvczxou2] { height: 300px; }
}

/* ======================================================
   Reduced motion — skip every entrance animation, render the
   final state immediately.
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
    .os-banner-line[b-r9dvczxou2],
    .os-banner-title[b-r9dvczxou2],
    .os-banner-title-accent[b-r9dvczxou2],
    .os-banner-subtitle[b-r9dvczxou2],
    .os-banner-pill-wrap--mobile[b-r9dvczxou2],
    .os-banner-pill-wrap--desktop[b-r9dvczxou2] {
        animation: none;
    }

    .os-banner-line[b-r9dvczxou2] { height: 111px; opacity: 1; }
    .os-banner-title-accent[b-r9dvczxou2] { color: #48e1dc; }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryClosingSection.razor.rz.scp.css */
/* ======================================================
   Our Story — ClosingSection. Scoped styles.

   Cream background, single centered column. Composition reads
   top-down as: title → tealline → eyebrow → 2 paragraphs →
   vertical divider → small eyebrow → big mission statement.

   Padding is intentionally asymmetric (more top than bottom) —
   the bottom of this section visually meets the top of the
   following Vitamin Angels section, so the breathing room sits
   above the title where the cream band needs to feel like a
   distinct destination.
   ====================================================== */

.os-cs[b-baegg2qjp9] {
    background-color: #F6F2EC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px 40px;
}

@media (min-width: 768px) {
    .os-cs[b-baegg2qjp9] { padding: 100px 40px 60px; }
}

@media (min-width: 1280px) {
    .os-cs[b-baegg2qjp9] { padding: 120px 40px 80px; }
}

/* ======================================================
   Inner content stack — centered, single reveal block
   ====================================================== */
.os-cs-inner[b-baegg2qjp9] {
    max-width: 1384px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

/* ======================================================
   Title — biggest type on the page after the Banner
   ====================================================== */
.os-cs-title[b-baegg2qjp9] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 42px;
}

@media (min-width: 768px) {
    .os-cs-title[b-baegg2qjp9] { font-size: 64px; }
}

/* Smooth ramp between 768 (64px) and 1280 (92px) */
@media (min-width: 960px) {
    .os-cs-title[b-baegg2qjp9] { font-size: 76px; }
}

@media (min-width: 1280px) {
    .os-cs-title[b-baegg2qjp9] { font-size: 92px; }
}

/* ======================================================
   Hairline + eyebrow + body copy
   ====================================================== */
.os-cs-tealline[b-baegg2qjp9] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.os-cs-eyebrow[b-baegg2qjp9] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .os-cs-eyebrow[b-baegg2qjp9] { font-size: 20px; }
}

/* The mission-intro eyebrow is intentionally smaller than the
   "WHAT SETS US APART" eyebrow above — it reads as a setup
   line for the mission statement rather than a section header. */
.os-cs-eyebrow--small[b-baegg2qjp9] {
    font-size: 14px;
}

@media (min-width: 768px) {
    .os-cs-eyebrow--small[b-baegg2qjp9] { font-size: 16px; }
}

.os-cs-paragraph[b-baegg2qjp9] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    /* Wider than the shared 720px centered-paragraph column on
       purpose — the ClosingSection runs longer/denser copy and
       the wider column reads better here. Approved deviation. */
    max-width: 1000px;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-cs-paragraph[b-baegg2qjp9] { font-size: 20px; }
}

/* ======================================================
   Vertical divider between body copy and mission statement
   ====================================================== */
.os-cs-divider[b-baegg2qjp9] {
    width: 1px;
    height: 56px;
    background-color: rgba(0, 146, 150, 0.35);
    margin: 16px 0;
}

/* ======================================================
   Mission statement — big serif quote in brand teal
   ====================================================== */
.os-cs-mission[b-baegg2qjp9] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #009296;
    line-height: 1.2;
    letter-spacing: -1px;
    max-width: 1384px;
    margin: 0 0 40px;
    text-wrap: balance;
    font-size: 32px;
}

@media (min-width: 768px) {
    .os-cs-mission[b-baegg2qjp9] { font-size: 48px; }
}

/* Smooth ramp between 768 (48px) and 1280 (58px) */
@media (min-width: 960px) {
    .os-cs-mission[b-baegg2qjp9] { font-size: 52px; }
}

@media (min-width: 1280px) {
    .os-cs-mission[b-baegg2qjp9] { font-size: 58px; }
}

/* ======================================================
   Reveal-on-scroll. The whole stack reveals as one block —
   keeps the closing beat from feeling fragmented.
   ====================================================== */
.os-cs [data-os-reveal][b-baegg2qjp9] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.os-cs [data-os-reveal].os-revealed[b-baegg2qjp9] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-cs [data-os-reveal][b-baegg2qjp9] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryEarlyDays.razor.rz.scp.css */
/* ======================================================
   Our Story — EarlyDays section. Scoped styles.

   Pale aqua background, two-column layout (stacked on mobile,
   side-by-side from tablet+). Content area capped at 1440px so
   columns don't stretch absurdly on huge monitors.

   Background tint #e8f9f9 is the prototype's BG_TEAL_LIGHT — a
   pale aqua that harmonizes with the brand teal. Used here as a
   section-background tint. We don't have an exact equivalent in
   our existing palette, but this color sits in the same family as
   our other on-brand tints.
   ====================================================== */

.os-ed[b-s501cq0y0y] {
    background-color: #e8f9f9;
    padding: 60px 20px;
}

@media (min-width: 1100px) {
    .os-ed[b-s501cq0y0y] { padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .os-ed[b-s501cq0y0y] { padding: 120px 40px; }
}

/* ======================================================
   Inner content wrapper — caps width and arranges columns
   ====================================================== */
.os-ed-inner[b-s501cq0y0y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .os-ed-inner[b-s501cq0y0y] {
        flex-direction: row;
        gap: 80px;
    }
}

/* ======================================================
   Left column — title + tealline + 3 paragraphs
   ====================================================== */
.os-ed-copy[b-s501cq0y0y] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .os-ed-copy[b-s501cq0y0y] { max-width: 730px; }
}

.os-ed-title[b-s501cq0y0y] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 1100px) {
    .os-ed-title[b-s501cq0y0y] { font-size: 48px; }
}

/* Smooth ramp between 768 (48px) and 1280 (58px) */
@media (min-width: 960px) {
    .os-ed-title[b-s501cq0y0y] { font-size: 52px; }
}

@media (min-width: 1280px) {
    .os-ed-title[b-s501cq0y0y] { font-size: 58px; }
}

.os-ed-title-accent[b-s501cq0y0y] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.os-ed-tealline[b-s501cq0y0y] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.os-ed-paragraph[b-s501cq0y0y] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-ed-paragraph[b-s501cq0y0y] { font-size: 20px; }
}

/* ======================================================
   Right column — square portrait
   ====================================================== */
.os-ed-image-wrap[b-s501cq0y0y] {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1100px) {
    .os-ed-image-wrap[b-s501cq0y0y] { width: 550px; }
}

.os-ed-image[b-s501cq0y0y] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    max-width: 550px;
}

/* ======================================================
   Reveal-on-scroll states. The shared JS in About.razor adds
   .os-revealed when [data-os-reveal] enters the viewport.
   ====================================================== */
.os-ed [data-os-reveal][b-s501cq0y0y] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-ed [data-os-reveal].os-revealed[b-s501cq0y0y] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-ed [data-os-reveal][b-s501cq0y0y] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryFounderSection.razor.rz.scp.css */
/* ======================================================
   Our Story — FounderSection. Scoped styles.

   Layout: white background, centered header block, then a
   two-column portrait + copy grid (stacked on mobile, side-by-
   side on tablet+). The portrait is a button — clicking it
   opens the shared video lightbox via a callback to the parent.

   The CTA button uses the brand teal idle / TEAL_DEEP hover
   pattern matching the other site buttons.
   ====================================================== */

.os-fs[b-cz4uk7p4zh] {
    background-color: #fff;
    padding: 60px 20px;
}

@media (min-width: 768px) {
    .os-fs[b-cz4uk7p4zh] { padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .os-fs[b-cz4uk7p4zh] { padding: 120px 40px; }
}

/* ======================================================
   Header block — title, divider, eyebrow
   ====================================================== */
.os-fs-header[b-cz4uk7p4zh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .os-fs-header[b-cz4uk7p4zh] { margin-bottom: 60px; }
}

@media (min-width: 1280px) {
    .os-fs-header[b-cz4uk7p4zh] { margin-bottom: 100px; }
}

.os-fs-title[b-cz4uk7p4zh] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0 0 24px;
    font-weight: 400;
    font-size: 42px;
}

@media (min-width: 768px) {
    .os-fs-title[b-cz4uk7p4zh] { font-size: 64px; }
}

@media (min-width: 1280px) {
    .os-fs-title[b-cz4uk7p4zh] { font-size: 72px; }
}

.os-fs-title-accent[b-cz4uk7p4zh] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.os-fs-divider[b-cz4uk7p4zh] {
    width: 1px;
    height: 56px;
    background-color: rgba(0, 146, 150, 0.35);
    margin-bottom: 24px;
}

.os-fs-eyebrow[b-cz4uk7p4zh] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) {
    .os-fs-eyebrow[b-cz4uk7p4zh] { font-size: 16px; }
}

/* ======================================================
   Two-column body — portrait left, copy right (stacks on mobile)
   ====================================================== */
.os-fs-grid[b-cz4uk7p4zh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 1384px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .os-fs-grid[b-cz4uk7p4zh] {
        flex-direction: row;
        gap: 80px;
        align-items: center;
    }
}

/* ======================================================
   Portrait — button with hover scale, dark overlay, play icon
   ====================================================== */
.os-fs-thumb-wrap[b-cz4uk7p4zh] {
    width: 100%;
    flex: 1;
}

@media (min-width: 768px) {
    .os-fs-thumb-wrap[b-cz4uk7p4zh] { max-width: 809px; }
}

.os-fs-thumb[b-cz4uk7p4zh] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.os-fs-thumb-img[b-cz4uk7p4zh] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 400ms ease;
}

.os-fs-thumb-overlay[b-cz4uk7p4zh] {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 250ms ease;
    border-radius: 20px;
}

.os-fs-thumb-play[b-cz4uk7p4zh] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 87px;
    height: 87px;
    transition: transform 250ms ease;
    pointer-events: none;
}

.os-fs-thumb-play img[b-cz4uk7p4zh] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (hover: hover) {
    .os-fs-thumb:hover .os-fs-thumb-img[b-cz4uk7p4zh] {
        transform: scale(1.03);
    }
    .os-fs-thumb:hover .os-fs-thumb-overlay[b-cz4uk7p4zh] {
        background-color: rgba(0, 0, 0, 0.12);
    }
    .os-fs-thumb:hover .os-fs-thumb-play[b-cz4uk7p4zh] {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.os-fs-thumb:focus-visible[b-cz4uk7p4zh] {
    outline: 3px solid #009296;
    outline-offset: 4px;
}

/* ======================================================
   Copy column — signature, paragraphs, CTA
   ====================================================== */
.os-fs-copy-wrap[b-cz4uk7p4zh] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

@media (min-width: 768px) {
    .os-fs-copy-wrap[b-cz4uk7p4zh] { max-width: 475px; }
}

/* Andrew's signature, recolored to brand teal via CSS mask. The SVG
   acts as a clip mask over a teal background — works regardless of
   the SVG's source colors and lets us re-theme it without re-exporting. */
.os-fs-signature[b-cz4uk7p4zh] {
    width: 310px;
    max-width: 100%;
    height: 48px;
    background-color: #009296;
    -webkit-mask-image: url('https://cdn.bfldr.com/EE0OVGM5/at/mq289h4nszks3vfmggp7qk3/iconsignatureteal.svg?auto=webp&format=svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-image: url('https://cdn.bfldr.com/EE0OVGM5/at/mq289h4nszks3vfmggp7qk3/iconsignatureteal.svg?auto=webp&format=svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: left center;
    margin-bottom: 4px;
}

.os-fs-paragraph[b-cz4uk7p4zh] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-fs-paragraph[b-cz4uk7p4zh] { font-size: 20px; }
}

.os-fs-cta-wrap[b-cz4uk7p4zh] {
    margin-top: 4px;
}

.os-fs-cta[b-cz4uk7p4zh] {
    display: inline-block;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: #fff;
    background-color: #009296;
    border-radius: 100px;
    padding: 14px 28px;
    text-decoration: none;
    transition: background-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    /* TEAL_DEEP from the prototype tokens — slightly richer than the
       base brand teal so hover state reads clearly without going harsh. */
    .os-fs-cta:hover[b-cz4uk7p4zh] {
        background-color: #007e82;
    }
}

.os-fs-cta:focus-visible[b-cz4uk7p4zh] {
    outline: 3px solid #009296;
    outline-offset: 3px;
}

/* ======================================================
   Reveal-on-scroll. Each [data-os-reveal] descendant has its own
   initial hidden state; the shared JS in About.razor toggles
   .os-revealed when the element enters the viewport. The
   --reveal-delay CSS variable lets sections stagger child reveals
   (e.g. copy column lags the portrait by 150ms here).
   ====================================================== */
.os-fs [data-os-reveal][b-cz4uk7p4zh] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-fs [data-os-reveal].os-revealed[b-cz4uk7p4zh] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-fs [data-os-reveal][b-cz4uk7p4zh] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .os-fs-thumb-img[b-cz4uk7p4zh],
    .os-fs-thumb-overlay[b-cz4uk7p4zh],
    .os-fs-thumb-play[b-cz4uk7p4zh],
    .os-fs-cta[b-cz4uk7p4zh] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryVideoHero.razor.rz.scp.css */
/* ======================================================
   Our Story — VideoHero section. Scoped styles.

   Full-width section with autoplay Vimeo background, dark teal
   overlay, and centered headline + paragraph. Section height is
   60vw clamped between 500px and 800px so it fills the viewport
   nicely without going absurd on tall monitors or cramped on
   narrow ones.
   ====================================================== */

.os-vh[b-31senq5uzq] {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vw;
    max-height: 800px;
    min-height: 500px;
}

/* ---- Background video ----
   The 177.78vh × 56.25vw sizing is the standard "letterbox-fill"
   trick: 100/0.5625 = 177.78, 100*0.5625 = 56.25. With min-width
   and min-height pinned to 100%, the iframe always covers the
   container at 16:9, regardless of viewport aspect ratio. */
.os-vh-video-wrap[b-31senq5uzq] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.os-vh-video[b-31senq5uzq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 177.78vh;
    height: 56.25vw;
    min-width: 100%;
    min-height: 100%;
    border: 0;
    pointer-events: none;
}

/* ---- Dark overlay for text legibility ---- */
.os-vh-overlay[b-31senq5uzq] {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 30, 35, 0.65);
    z-index: 1;
}

/* ---- Foreground content ---- */
.os-vh-content[b-31senq5uzq] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
    max-width: 900px;
    padding: 60px 20px;
}

.os-vh-title[b-31senq5uzq] {
    font-family: 'STIX Two Text', serif;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 42px;
}

.os-vh-title-accent[b-31senq5uzq] {
    font-style: italic;
    font-weight: 400;
}

.os-vh-subtitle[b-31senq5uzq] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #fff;
    line-height: 1.6;
    letter-spacing: -0.4px;
    margin: 0;
    /* 720px shared centered-paragraph reading column across both
       static pages — matches the Banner subtitle and the Quality
       section paragraphs. */
    max-width: 720px;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-vh-title[b-31senq5uzq] { font-size: 64px; }
    .os-vh-subtitle[b-31senq5uzq] { font-size: 20px; }
}

/* Smooth ramp between 768 (64px) and 1280 (92px) */
@media (min-width: 960px) {
    .os-vh-title[b-31senq5uzq] { font-size: 76px; }
}

@media (min-width: 1280px) {
    .os-vh-title[b-31senq5uzq] { font-size: 92px; }
}

/* ======================================================
   Reveal-on-scroll animation. The shared JS in About.razor
   adds .os-revealed when [data-os-reveal] enters the viewport
   (15% threshold). Reduced-motion users get the visible state
   immediately with no transition.
   ====================================================== */
.os-vh-reveal[b-31senq5uzq] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.os-vh-reveal.os-revealed[b-31senq5uzq] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-vh-reveal[b-31senq5uzq] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryWordSpreads.razor.rz.scp.css */
/* ======================================================
   Our Story — WordSpreads (1 of 6). Scoped styles.

   White background, two-column body (stacked on mobile, side-by-
   side at 768+). Teal quote card on the left, headline + tealline
   + paragraphs on the right.

   This is the reference template for variants 2-6 — they each tweak
   background, layout direction, and media-side content while keeping
   the same overall geometry, type scale, and reveal pattern.
   ====================================================== */

.os-ws1[b-cmyb86zfql] {
    background-color: #fff;
    padding: 60px 20px;
}

@media (min-width: 1100px) {
    .os-ws1[b-cmyb86zfql] { padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .os-ws1[b-cmyb86zfql] { padding: 120px 40px; }
}

/* ======================================================
   Inner wrapper — caps content width and arranges columns
   ====================================================== */
.os-ws1-inner[b-cmyb86zfql] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .os-ws1-inner[b-cmyb86zfql] {
        flex-direction: row;
        gap: 80px;
        align-items: center;
    }
}

/* ======================================================
   Media column — teal quote card, fixed 550px on desktop
   ====================================================== */
.os-ws1-media-wrap[b-cmyb86zfql] {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1100px) {
    .os-ws1-media-wrap[b-cmyb86zfql] { width: 550px; }
}

.os-ws1-quote[b-cmyb86zfql] {
    background-color: #009296;
    border-radius: 20px;
    padding: 40px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 768px) {
    .os-ws1-quote[b-cmyb86zfql] { padding: 60px; gap: 40px; }
}

.os-ws1-quote-text[b-cmyb86zfql] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    color: #fff;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin: 0;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .os-ws1-quote-text[b-cmyb86zfql] {
        font-size: 36px;
        letter-spacing: -0.9px;
    }
}

@media (min-width: 1280px) {
    .os-ws1-quote-text[b-cmyb86zfql] {
        font-size: 40px;
        letter-spacing: -1.08px;
    }
}

.os-ws1-quote-attr[b-cmyb86zfql] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    margin: 0;
}

@media (min-width: 768px) {
    .os-ws1-quote-attr[b-cmyb86zfql] { font-size: 18px; }
}

/* ======================================================
   Copy column — headline, tealline, paragraphs
   ====================================================== */
.os-ws1-copy-wrap[b-cmyb86zfql] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .os-ws1-copy-wrap[b-cmyb86zfql] { max-width: 730px; }
}

.os-ws1-title[b-cmyb86zfql] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 768px) {
    .os-ws1-title[b-cmyb86zfql] { font-size: 48px; }
}

/* Smooth ramp between 768 (48px) and 1280 (58px) */
@media (min-width: 960px) {
    .os-ws1-title[b-cmyb86zfql] { font-size: 52px; }
}

@media (min-width: 1280px) {
    .os-ws1-title[b-cmyb86zfql] { font-size: 58px; }
}

.os-ws1-title-accent[b-cmyb86zfql] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.os-ws1-tealline[b-cmyb86zfql] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.os-ws1-paragraph[b-cmyb86zfql] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-ws1-paragraph[b-cmyb86zfql] { font-size: 20px; }
}

/* ======================================================
   Reveal-on-scroll. Shared JS in About.razor adds .os-revealed
   when [data-os-reveal] enters the viewport.
   ====================================================== */
.os-ws1 [data-os-reveal][b-cmyb86zfql] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-ws1 [data-os-reveal].os-revealed[b-cmyb86zfql] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-ws1 [data-os-reveal][b-cmyb86zfql] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryWordSpreads2.razor.rz.scp.css */
/* ======================================================
   Our Story — WordSpreads (2 of 6). Scoped styles.

   Mirror of variant 1 with two changes:
     - Background swaps to aqua tint
     - flex-direction: row-reverse on tablet+ so the media column
       sits on the right and the copy on the left
   Everything else (geometry, type scale, reveal pattern) matches.
   ====================================================== */

.os-ws2[b-bac0d7rbxn] {
    background-color: #e8f9f9;
    padding: 60px 20px;
}

@media (min-width: 1100px) {
    .os-ws2[b-bac0d7rbxn] { padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .os-ws2[b-bac0d7rbxn] { padding: 120px 40px; }
}

.os-ws2-inner[b-bac0d7rbxn] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .os-ws2-inner[b-bac0d7rbxn] {
        flex-direction: row-reverse;
        gap: 80px;
        align-items: flex-start;
    }
}

/* ======================================================
   Media column — teal quote card
   ====================================================== */
.os-ws2-media-wrap[b-bac0d7rbxn] {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1100px) {
    .os-ws2-media-wrap[b-bac0d7rbxn] { width: 550px; }
}

.os-ws2-quote[b-bac0d7rbxn] {
    background-color: #009296;
    border-radius: 20px;
    padding: 40px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 768px) {
    .os-ws2-quote[b-bac0d7rbxn] { padding: 60px; gap: 40px; }
}

.os-ws2-quote-text[b-bac0d7rbxn] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    color: #fff;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin: 0;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .os-ws2-quote-text[b-bac0d7rbxn] { font-size: 36px; letter-spacing: -0.9px; }
}

@media (min-width: 1280px) {
    .os-ws2-quote-text[b-bac0d7rbxn] { font-size: 40px; letter-spacing: -1.08px; }
}

.os-ws2-quote-attr[b-bac0d7rbxn] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    margin: 0;
}

@media (min-width: 768px) {
    .os-ws2-quote-attr[b-bac0d7rbxn] { font-size: 18px; }
}

/* ======================================================
   Copy column — headline, tealline, paragraphs
   ====================================================== */
.os-ws2-copy-wrap[b-bac0d7rbxn] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .os-ws2-copy-wrap[b-bac0d7rbxn] { max-width: 730px; }
}

.os-ws2-title[b-bac0d7rbxn] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 768px) { .os-ws2-title[b-bac0d7rbxn] { font-size: 48px; } }
@media (min-width: 960px) { .os-ws2-title[b-bac0d7rbxn] { font-size: 52px; } }
@media (min-width: 1280px) { .os-ws2-title[b-bac0d7rbxn] { font-size: 58px; } }

.os-ws2-title-accent[b-bac0d7rbxn] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.os-ws2-tealline[b-bac0d7rbxn] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.os-ws2-paragraph[b-bac0d7rbxn] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .os-ws2-paragraph[b-bac0d7rbxn] { font-size: 20px; } }

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.os-ws2 [data-os-reveal][b-bac0d7rbxn] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-ws2 [data-os-reveal].os-revealed[b-bac0d7rbxn] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-ws2 [data-os-reveal][b-bac0d7rbxn] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryWordSpreads3.razor.rz.scp.css */
/* ======================================================
   Our Story — WordSpreads (3 of 6). Scoped styles.

   Same orientation as variant 1 (white bg, quote left, copy right) —
   creates the visual rhythm of: quote-left → quote-right → quote-left
   as the user scrolls through the three story beats.
   ====================================================== */

.os-ws3[b-kwwrj5pj6i] {
    background-color: #fff;
    padding: 60px 20px;
}

@media (min-width: 1100px) {
    .os-ws3[b-kwwrj5pj6i] { padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .os-ws3[b-kwwrj5pj6i] { padding: 120px 40px; }
}

.os-ws3-inner[b-kwwrj5pj6i] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .os-ws3-inner[b-kwwrj5pj6i] {
        flex-direction: row;
        gap: 80px;
        align-items: flex-start;
    }
}

/* ======================================================
   Media column — teal quote card
   ====================================================== */
.os-ws3-media-wrap[b-kwwrj5pj6i] {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1100px) {
    .os-ws3-media-wrap[b-kwwrj5pj6i] { width: 550px; }
}

.os-ws3-quote[b-kwwrj5pj6i] {
    background-color: #009296;
    border-radius: 20px;
    padding: 40px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 768px) {
    .os-ws3-quote[b-kwwrj5pj6i] { padding: 60px; gap: 40px; }
}

.os-ws3-quote-text[b-kwwrj5pj6i] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    color: #fff;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin: 0;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .os-ws3-quote-text[b-kwwrj5pj6i] { font-size: 36px; letter-spacing: -0.9px; }
}

@media (min-width: 1280px) {
    .os-ws3-quote-text[b-kwwrj5pj6i] { font-size: 40px; letter-spacing: -1.08px; }
}

.os-ws3-quote-attr[b-kwwrj5pj6i] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    margin: 0;
}

@media (min-width: 768px) {
    .os-ws3-quote-attr[b-kwwrj5pj6i] { font-size: 18px; }
}

/* ======================================================
   Copy column — headline, tealline, paragraphs
   ====================================================== */
.os-ws3-copy-wrap[b-kwwrj5pj6i] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .os-ws3-copy-wrap[b-kwwrj5pj6i] { max-width: 730px; }
}

.os-ws3-title[b-kwwrj5pj6i] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 768px) { .os-ws3-title[b-kwwrj5pj6i] { font-size: 48px; } }
@media (min-width: 960px) { .os-ws3-title[b-kwwrj5pj6i] { font-size: 52px; } }
@media (min-width: 1280px) { .os-ws3-title[b-kwwrj5pj6i] { font-size: 58px; } }

.os-ws3-title-accent[b-kwwrj5pj6i] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.os-ws3-tealline[b-kwwrj5pj6i] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.os-ws3-paragraph[b-kwwrj5pj6i] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .os-ws3-paragraph[b-kwwrj5pj6i] { font-size: 20px; } }

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.os-ws3 [data-os-reveal][b-kwwrj5pj6i] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-ws3 [data-os-reveal].os-revealed[b-kwwrj5pj6i] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-ws3 [data-os-reveal][b-kwwrj5pj6i] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryWordSpreads4.razor.rz.scp.css */
/* ======================================================
   Our Story — WordSpreads (4 of 6). Scoped styles.

   Aqua background, copy-left + media-right (flex-row-reverse on
   tablet+). Media side stacks a square video thumbnail above a
   smaller white quote card.

   Thumbnail interaction matches the FounderSection portrait —
   hover scales the image, dims it, scales the play icon. Click
   bubbles up via OnPlay so the parent composer can open the
   shared video lightbox.
   ====================================================== */

.os-ws4[b-g4wnk8z5t4] {
    background-color: #e8f9f9;
    padding: 60px 20px;
}

@media (min-width: 1100px) {
    .os-ws4[b-g4wnk8z5t4] { padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .os-ws4[b-g4wnk8z5t4] { padding: 120px 40px; }
}

.os-ws4-inner[b-g4wnk8z5t4] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .os-ws4-inner[b-g4wnk8z5t4] {
        flex-direction: row-reverse;
        gap: 80px;
        align-items: center;
    }
}

/* ======================================================
   Media column — thumbnail + white quote card stacked
   ====================================================== */
.os-ws4-media-wrap[b-g4wnk8z5t4] {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 1100px) {
    .os-ws4-media-wrap[b-g4wnk8z5t4] { width: 550px; }
}

/* ---- Video thumbnail (button) ---- */
.os-ws4-thumb[b-g4wnk8z5t4] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.os-ws4-thumb-img[b-g4wnk8z5t4] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 400ms ease;
}

.os-ws4-thumb-overlay[b-g4wnk8z5t4] {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 250ms ease;
    border-radius: 20px;
}

.os-ws4-thumb-play[b-g4wnk8z5t4] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 87px;
    height: 87px;
    transition: transform 250ms ease;
    pointer-events: none;
}

.os-ws4-thumb-play img[b-g4wnk8z5t4] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (hover: hover) {
    .os-ws4-thumb:hover .os-ws4-thumb-img[b-g4wnk8z5t4] {
        transform: scale(1.03);
    }
    .os-ws4-thumb:hover .os-ws4-thumb-overlay[b-g4wnk8z5t4] {
        background-color: rgba(0, 0, 0, 0.12);
    }
    .os-ws4-thumb:hover .os-ws4-thumb-play[b-g4wnk8z5t4] {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.os-ws4-thumb:focus-visible[b-g4wnk8z5t4] {
    outline: 3px solid #009296;
    outline-offset: 4px;
}

/* ---- White quote card ----
   Lighter than the teal cards in variants 1-3 because it sits
   in a stacked composition under the thumbnail and shouldn't
   compete for attention with the larger image above. */
.os-ws4-quote[b-g4wnk8z5t4] {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px 40px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.os-ws4-quote-text[b-g4wnk8z5t4] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    color: #009296;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .os-ws4-quote-text[b-g4wnk8z5t4] { font-size: 22px; }
}

.os-ws4-quote-attr[b-g4wnk8z5t4] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

/* ======================================================
   Copy column — headline, tealline, paragraphs
   ====================================================== */
.os-ws4-copy-wrap[b-g4wnk8z5t4] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .os-ws4-copy-wrap[b-g4wnk8z5t4] { max-width: 730px; }
}

.os-ws4-title[b-g4wnk8z5t4] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 768px) { .os-ws4-title[b-g4wnk8z5t4] { font-size: 48px; } }
@media (min-width: 960px) { .os-ws4-title[b-g4wnk8z5t4] { font-size: 52px; } }
@media (min-width: 1280px) { .os-ws4-title[b-g4wnk8z5t4] { font-size: 58px; } }

.os-ws4-title-accent[b-g4wnk8z5t4] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.os-ws4-tealline[b-g4wnk8z5t4] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.os-ws4-paragraph[b-g4wnk8z5t4] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .os-ws4-paragraph[b-g4wnk8z5t4] { font-size: 20px; } }

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.os-ws4 [data-os-reveal][b-g4wnk8z5t4] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-ws4 [data-os-reveal].os-revealed[b-g4wnk8z5t4] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-ws4 [data-os-reveal][b-g4wnk8z5t4] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .os-ws4-thumb-img[b-g4wnk8z5t4],
    .os-ws4-thumb-overlay[b-g4wnk8z5t4],
    .os-ws4-thumb-play[b-g4wnk8z5t4] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryWordSpreads5.razor.rz.scp.css */
/* ======================================================
   Our Story — WordSpreads (5 of 6). Scoped styles.

   White background, image-left + copy-right (flex-row default on
   tablet+). Quietest variant in the WordSpreads sequence — no
   quote card, just the product image and a single paragraph.
   ====================================================== */

.os-ws5[b-5hbsy4gfxo] {
    background-color: #fff;
    padding: 60px 20px;
}

@media (min-width: 1100px) {
    .os-ws5[b-5hbsy4gfxo] { padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .os-ws5[b-5hbsy4gfxo] { padding: 120px 40px; }
}

.os-ws5-inner[b-5hbsy4gfxo] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .os-ws5-inner[b-5hbsy4gfxo] {
        flex-direction: row;
        gap: 80px;
        align-items: center;
    }
}

/* ======================================================
   Media column — product image. No fixed aspect-ratio so the
   image keeps its natural proportions; max-width caps it at the
   media-column width on desktop.
   ====================================================== */
.os-ws5-media-wrap[b-5hbsy4gfxo] {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1100px) {
    .os-ws5-media-wrap[b-5hbsy4gfxo] { width: 550px; }
}

.os-ws5-image[b-5hbsy4gfxo] {
    width: 100%;
    border-radius: 20px;
    display: block;
}

/* ======================================================
   Copy column — headline, tealline, single paragraph
   ====================================================== */
.os-ws5-copy-wrap[b-5hbsy4gfxo] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .os-ws5-copy-wrap[b-5hbsy4gfxo] { max-width: 730px; }
}

.os-ws5-title[b-5hbsy4gfxo] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 768px) { .os-ws5-title[b-5hbsy4gfxo] { font-size: 48px; } }
@media (min-width: 960px) { .os-ws5-title[b-5hbsy4gfxo] { font-size: 52px; } }
@media (min-width: 1280px) { .os-ws5-title[b-5hbsy4gfxo] { font-size: 58px; } }

.os-ws5-title-accent[b-5hbsy4gfxo] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.os-ws5-tealline[b-5hbsy4gfxo] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.os-ws5-paragraph[b-5hbsy4gfxo] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .os-ws5-paragraph[b-5hbsy4gfxo] { font-size: 20px; } }

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.os-ws5 [data-os-reveal][b-5hbsy4gfxo] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-ws5 [data-os-reveal].os-revealed[b-5hbsy4gfxo] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-ws5 [data-os-reveal][b-5hbsy4gfxo] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryWordSpreads6.razor.rz.scp.css */
/* ======================================================
   Our Story — WordSpreads (6 of 6). Scoped styles.

   Vitamin Angels closing beat. Same overall geometry as the rest
   of the WordSpreads family but with a distinct copy structure
   (logo above headline, headline leads with em-accent on its own
   line) and the white quote card has an inline emphasis span.

   Aqua background, copy-left + media-right (flex-row-reverse on
   tablet+).
   ====================================================== */

.os-ws6[b-yt3osykl66] {
    background-color: #e8f9f9;
    padding: 60px 20px;
}

@media (min-width: 1100px) {
    .os-ws6[b-yt3osykl66] { padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .os-ws6[b-yt3osykl66] { padding: 120px 40px; }
}

.os-ws6-inner[b-yt3osykl66] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .os-ws6-inner[b-yt3osykl66] {
        flex-direction: row-reverse;
        gap: 80px;
        align-items: center;
    }
}

/* ======================================================
   Media column — image + white quote card stacked
   ====================================================== */
.os-ws6-media-wrap[b-yt3osykl66] {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 1100px) {
    .os-ws6-media-wrap[b-yt3osykl66] { width: 550px; }
}

.os-ws6-image[b-yt3osykl66] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* ---- White quote card with inline dark-teal emphasis ----
   Same lighter card treatment as variant 4 — sits in a stacked
   composition with the image and shouldn't compete for attention.
   The emphasis span recolors the donation-volume figure inside
   the quote so it visually pops out of the body copy. */
.os-ws6-quote[b-yt3osykl66] {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px 40px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.os-ws6-quote-text[b-yt3osykl66] {
    font-family: 'STIX Two Text', serif;
    font-weight: 500;
    color: #009296;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .os-ws6-quote-text[b-yt3osykl66] { font-size: 22px; }
}

.os-ws6-quote-emphasis[b-yt3osykl66] {
    color: #003b3c;
}

.os-ws6-quote-attr[b-yt3osykl66] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

/* ======================================================
   Copy column — logo, tealline, headline, paragraphs

   Order is intentionally different from other variants: the logo
   identifies the partnership before the headline lands, and the
   tealline divides logo from headline (rather than headline from
   paragraphs as elsewhere).
   ====================================================== */
.os-ws6-copy-wrap[b-yt3osykl66] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .os-ws6-copy-wrap[b-yt3osykl66] { max-width: 730px; }
}

.os-ws6-logo[b-yt3osykl66] {
    height: 40px;
    width: auto;
    display: block;
    align-self: flex-start;
}

.os-ws6-tealline[b-yt3osykl66] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.os-ws6-title[b-yt3osykl66] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
    text-wrap: balance;
}

@media (min-width: 768px) { .os-ws6-title[b-yt3osykl66] { font-size: 48px; } }
@media (min-width: 960px) { .os-ws6-title[b-yt3osykl66] { font-size: 52px; } }
@media (min-width: 1280px) { .os-ws6-title[b-yt3osykl66] { font-size: 58px; } }

.os-ws6-title-accent[b-yt3osykl66] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.os-ws6-paragraph[b-yt3osykl66] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .os-ws6-paragraph[b-yt3osykl66] { font-size: 20px; } }

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.os-ws6 [data-os-reveal][b-yt3osykl66] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-ws6 [data-os-reveal].os-revealed[b-yt3osykl66] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-ws6 [data-os-reveal][b-yt3osykl66] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Privacy.razor.rz.scp.css */
/* ======================================================
   Privacy Policy — scoped styles.

   Identical visual treatment to Terms.razor.css. Class names share the
   .legal-* prefix on purpose: scoped CSS isolates each component, so
   the same selectors can live in both files without collision. When
   dev does the eventual refactor pass, both files can be replaced by
   a single shared stylesheet in one focused PR.

   Structure (top to bottom):
     .legal-hero        full-width band, cream background. Mirrors
                        the FAQ + Contact-us hero exactly so all
                        static-page banners read as siblings.
     .legal-main        full-width content area. Inside it,
                        .legal-container caps the column width and
                        centers the content.
     .legal-toc         table-of-contents box at the top of the
                        content. Lets users one-click into any
                        section — the convention for long legal
                        documents (vs FAQ-style accordions, which
                        hide compliance-relevant text behind clicks).
     .legal-section     a single section: h2 + body, separated from
                        the next by a thin divider.
     .legal-body        the answer body. Uses ::deep for child
                        elements because content is rendered via
                        MarkupString (raw HTML), which scoped CSS
                        does NOT reach into by default.

   Breakpoints: 768 (tablet) / 960 (desktop) / 1280 (lg) / 1600 (xl)
   — matches the rest of the site.
   ====================================================== */

/* ---- Shared container ---- */
.legal-container[b-kxku1he21h] {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 768px) {
    .legal-container[b-kxku1he21h] { padding: 0 32px; }
}

@media (min-width: 960px) {
    .legal-container[b-kxku1he21h] { max-width: 920px; padding: 0 40px; }
}

@media (min-width: 1600px) {
    .legal-container[b-kxku1he21h] { max-width: 1080px; }
}

/* ======================================================
   Hero — mirrors the FAQ + Contact-us hero. No inner container:
   horizontal padding is applied directly so the headline left-
   aligns flush to the page margin on mobile and centers within
   the band on tablet and up.
   ====================================================== */
.legal-hero[b-kxku1he21h] {
    background: #F6F2EC;
    padding: 48px 20px;
}

.legal-hero-title[b-kxku1he21h] {
    font-family: 'STIX Two Text', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #003b3c;
    margin: 0 0 12px;
}

.legal-hero-subtitle[b-kxku1he21h] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #003b3c;
    margin: 0;
    max-width: 800px;
}

@media (min-width: 768px) {
    .legal-hero[b-kxku1he21h] { text-align: center; }
    .legal-hero-subtitle[b-kxku1he21h] { margin: 0 auto; }
}

@media (min-width: 960px) {
    .legal-hero[b-kxku1he21h] { padding: 64px 40px; }
    .legal-hero-title[b-kxku1he21h] { font-size: 42px; }
    .legal-hero-subtitle[b-kxku1he21h] { font-size: 18px; }
}

@media (min-width: 1280px) {
    .legal-hero[b-kxku1he21h] { padding: 80px 40px; }
    .legal-hero-title[b-kxku1he21h] { font-size: 54px; margin: 0 0 16px; }
}

@media (min-width: 1600px) {
    .legal-hero[b-kxku1he21h] { padding: 96px 40px; }
    .legal-hero-title[b-kxku1he21h] { font-size: 72px; }
    .legal-hero-subtitle[b-kxku1he21h] { font-size: 20px; }
}

/* ======================================================
   Main content area
   ====================================================== */
.legal-main[b-kxku1he21h] {
    padding: 40px 0 80px;
}

@media (min-width: 768px) {
    .legal-main[b-kxku1he21h] { padding: 48px 0 96px; }
}

@media (min-width: 960px) {
    .legal-main[b-kxku1he21h] { padding: 56px 0 112px; }
}

/* ======================================================
   Table of contents
   Cream box, multi-column on tablet and up so the long section
   list doesn't dominate the page before the first section.
   ====================================================== */
.legal-toc[b-kxku1he21h] {
    background: #F6F2EC;
    border-radius: 10px;
    padding: 24px;
    margin: 0 0 48px;
}

.legal-toc-title[b-kxku1he21h] {
    font-family: 'STIX Two Text', serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: #003b3c;
    margin: 0 0 16px;
}

.legal-toc-list[b-kxku1he21h] {
    list-style: decimal;
    padding-left: 24px;
    margin: 0;
    /* CSS column-count flows the list across multiple columns; column-gap
       sets the visual gutter between them. column-fill: balance keeps the
       columns the same height so the box has a clean rectangular shape.
       Stays at 2 columns max because narrower columns force long titles
       to wrap onto 3 lines, which makes the whole TOC feel crammed. */
    column-count: 1;
    column-gap: 32px;
    column-fill: balance;
}

.legal-toc-list li[b-kxku1he21h] {
    /* break-inside avoids a list item splitting across two columns. */
    break-inside: avoid;
    margin: 0 0 14px;
    padding-left: 6px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

.legal-toc-list li:last-child[b-kxku1he21h] {
    margin-bottom: 0;
}

.legal-toc-list li[b-kxku1he21h]::marker {
    color: #009296;
    font-weight: 600;
}

.legal-toc-link[b-kxku1he21h] {
    color: #003b3c;
    text-decoration: none;
    transition: color 120ms ease;
}

@media (hover: hover) {
    .legal-toc-link:hover[b-kxku1he21h] { color: #009296; }
}

.legal-toc-link:focus-visible[b-kxku1he21h] {
    outline: 2px solid #009296;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .legal-toc[b-kxku1he21h] { padding: 32px 36px; margin-bottom: 56px; }
    .legal-toc-title[b-kxku1he21h] { font-size: 24px; margin-bottom: 20px; }
    .legal-toc-list[b-kxku1he21h] {
        column-count: 2;
        column-gap: 48px;
    }
    .legal-toc-list li[b-kxku1he21h] { font-size: 16px; margin-bottom: 16px; }
}

@media (min-width: 960px) {
    .legal-toc[b-kxku1he21h] { padding: 40px 48px; margin-bottom: 64px; }
    .legal-toc-title[b-kxku1he21h] { font-size: 26px; }
    .legal-toc-list[b-kxku1he21h] { column-gap: 64px; }
    .legal-toc-list li[b-kxku1he21h] { margin-bottom: 18px; }
}

/* ======================================================
   Sections — plain h2 + body, divider line between
   ====================================================== */
.legal-section + .legal-section[b-kxku1he21h] {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #D9E2E2;
}

.legal-section[b-kxku1he21h] {
    /* MainLayout sets `html { scroll-padding-top: var(--header-h) }` so
       anchor jumps already clear the page header; add a bit more so the
       section title doesn't sit flush against the header's bottom edge
       after a TOC click. */
    scroll-margin-top: 40px;
}

/* :target is set on whichever section the URL hash matches. After a TOC
   click or a deep-link land, the section title flashes brand teal then
   fades back — confirms "you landed here" without permanent visual debt. */
.legal-section:target .legal-section-title[b-kxku1he21h] {
    animation: legal-target-flash-b-kxku1he21h 1.6s ease-out;
}

@keyframes legal-target-flash-b-kxku1he21h {
    0%, 40% { color: #009296; }
    100%    { color: #003b3c; }
}

@media (prefers-reduced-motion: reduce) {
    .legal-section:target .legal-section-title[b-kxku1he21h] {
        animation: none;
    }
}

.legal-section-title[b-kxku1he21h] {
    font-family: 'STIX Two Text', serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #003b3c;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .legal-section + .legal-section[b-kxku1he21h] { margin-top: 48px; padding-top: 48px; }
    .legal-section-title[b-kxku1he21h] { font-size: 30px; margin: 0 0 18px; }
}

@media (min-width: 960px) {
    .legal-section + .legal-section[b-kxku1he21h] { margin-top: 56px; padding-top: 56px; }
    .legal-section-title[b-kxku1he21h] { font-size: 34px; margin: 0 0 20px; }
}

/* ======================================================
   Body text — paragraphs, lists, links

   All children of .legal-body are rendered via MarkupString (raw HTML),
   which Blazor's scoped CSS does NOT reach into. We have to use ::deep
   for every body-text selector below — without it, MudBlazor's global
   `* { padding: 0 }` reset wins and lists/etc render unstyled.
   ====================================================== */
.legal-body[b-kxku1he21h] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #003b3c;
}

.legal-body[b-kxku1he21h]  p {
    margin: 0 0 14px;
}

.legal-body[b-kxku1he21h]  p:last-child {
    margin-bottom: 0;
}

/* Lists: bullets/numbers/roman numerals sit in their own gutter. The
   padding-left needs to be wide enough that the marker stays inside
   the body's visible content area. */
.legal-body[b-kxku1he21h]  ul,
.legal-body[b-kxku1he21h]  ol {
    margin: 0 0 14px;
    padding-left: 28px;
}

.legal-body[b-kxku1he21h]  ul {
    list-style: disc;
}

.legal-body[b-kxku1he21h]  ol {
    list-style: decimal;
}

.legal-body[b-kxku1he21h]  ol[type="i"] {
    list-style: lower-roman;
}

.legal-body[b-kxku1he21h]  ul:last-child,
.legal-body[b-kxku1he21h]  ol:last-child {
    margin-bottom: 0;
}

.legal-body[b-kxku1he21h]  li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.legal-body[b-kxku1he21h]  li:last-child {
    margin-bottom: 0;
}

.legal-body[b-kxku1he21h]  li::marker {
    color: #009296;
}

.legal-body[b-kxku1he21h]  .legal-link {
    color: #003b3c;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 120ms ease;
}

.legal-body[b-kxku1he21h]  .legal-link:hover,
.legal-body[b-kxku1he21h]  .legal-link:focus-visible {
    color: #009296;
}

.legal-body[b-kxku1he21h]  strong {
    font-weight: 600;
}

.legal-body[b-kxku1he21h]  em {
    font-style: italic;
}

@media (min-width: 768px) {
    .legal-body[b-kxku1he21h] { font-size: 16px; }
}

/* Tables — used in the CCPA section to disclose the categories of
   Personal Information collected and the annual data-subject-requests
   stats. The 5-column stats table can overflow on narrow viewports;
   the .legal-table-scroll wrapper gives it a horizontal scrollbar
   instead of forcing the page to widen. */
.legal-body[b-kxku1he21h]  .legal-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 18px;
}

.legal-body[b-kxku1he21h]  .legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
}

.legal-body[b-kxku1he21h]  .legal-table thead th {
    background: #F6F2EC;
    color: #003b3c;
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 2px solid #009296;
    white-space: nowrap;
}

.legal-body[b-kxku1he21h]  .legal-table tbody th {
    text-align: left;
    font-weight: 600;
    color: #003b3c;
    padding: 14px;
    vertical-align: top;
    border-bottom: 1px solid #D9E2E2;
}

.legal-body[b-kxku1he21h]  .legal-table tbody td {
    padding: 14px;
    border-bottom: 1px solid #D9E2E2;
    vertical-align: top;
}

.legal-body[b-kxku1he21h]  .legal-table tbody tr:last-child th,
.legal-body[b-kxku1he21h]  .legal-table tbody tr:last-child td {
    border-bottom: none;
}

@media (min-width: 768px) {
    .legal-body[b-kxku1he21h]  .legal-table { font-size: 15px; }
    .legal-body[b-kxku1he21h]  .legal-table thead th,
    .legal-body[b-kxku1he21h]  .legal-table tbody th,
    .legal-body[b-kxku1he21h]  .legal-table tbody td { padding: 16px 18px; }
}

@media print {
    .legal-body[b-kxku1he21h]  .legal-table-scroll { overflow: visible; }
    .legal-body[b-kxku1he21h]  .legal-table { font-size: 10px; }
    .legal-body[b-kxku1he21h]  .legal-table thead th,
    .legal-body[b-kxku1he21h]  .legal-table tbody th,
    .legal-body[b-kxku1he21h]  .legal-table tbody td { padding: 6px 8px; }
}

/* ======================================================
   Print stylesheet — legal docs sometimes get printed or saved
   as PDF. Strip page chrome (hero band, TOC), keep all sections
   visible in a clean single-column layout.
   ====================================================== */
@media print {
    .legal-hero[b-kxku1he21h] {
        background: transparent;
        padding: 0 0 24px;
        text-align: left;
    }

    .legal-hero-title[b-kxku1he21h] { font-size: 28px; }
    .legal-hero-subtitle[b-kxku1he21h] { font-size: 12px; }

    .legal-toc[b-kxku1he21h] { display: none; }

    .legal-main[b-kxku1he21h] { padding: 0; }

    .legal-section + .legal-section[b-kxku1he21h] {
        margin-top: 24px;
        padding-top: 24px;
    }

    .legal-section-title[b-kxku1he21h] { font-size: 18px; }

    .legal-body[b-kxku1he21h] {
        font-size: 11px;
        line-height: 1.5;
    }

    .legal-body[b-kxku1he21h]  .legal-link {
        color: #000;
        text-decoration: underline;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualityBanner.razor.rz.scp.css */
/* ======================================================
   Quality — Banner section. Scoped styles.

   Mirror of OurStoryBanner with three small differences:
     - Heights are slightly shorter (min-h 500/700/875 vs 600/860/980)
     - Subtitle column is a touch wider (max-width 800px vs 720px) to
       fit the longer copy without forcing a tight wrap
     - Image swaps to /images/quality/quality-pill-large.png

   AQUA #48e1dc note (carried over from OurStoryBanner): used only for
   the italic accent on this teal hero — our brand teal #009296 would
   disappear on the same teal background. Brand teal stays in the
   gradient itself.
   ====================================================== */

.q-banner[b-956sonv4s2] {
    background: linear-gradient(to bottom, #009296 0%, #00c2bd 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: visible;
    padding: 40px 20px 0;
    min-height: 500px;
    z-index: 2;
}

@media (min-width: 768px) {
    .q-banner[b-956sonv4s2] {
        min-height: 700px;
        padding: 40px 40px 0;
    }
}

@media (min-width: 1280px) {
    .q-banner[b-956sonv4s2] {
        min-height: 875px;
        padding: 58px 40px 0;
    }
}

/* ======================================================
   Decorative vertical line — animated grow on mount
   ====================================================== */
.q-banner-line[b-956sonv4s2] {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    height: 0;
    margin: 0 0 48px;
    flex-shrink: 0;
    animation: q-banner-line-grow-b-956sonv4s2 0.6s ease both;
}

@keyframes q-banner-line-grow-b-956sonv4s2 {
    from { height: 0; opacity: 0; }
    to   { height: 111px; opacity: 1; }
}

/* ======================================================
   Headline — STIX, white, with AQUA italic accent on "without"
   ====================================================== */
.q-banner-title[b-956sonv4s2] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #fff;
    text-align: center;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 0 0 40px;
    font-size: 56px;
    animation: q-banner-fade-up-b-956sonv4s2 0.7s ease 350ms both;
}

@media (min-width: 768px) {
    .q-banner-title[b-956sonv4s2] { font-size: 80px; }
}

/* Smooth ramp between 768 (80px) and 1280 (120px) */
@media (min-width: 960px) {
    .q-banner-title[b-956sonv4s2] { font-size: 96px; }
}

@media (min-width: 1280px) {
    .q-banner-title[b-956sonv4s2] {
        font-size: 120px;
        letter-spacing: -2.4px;
    }
}

.q-banner-title-accent[b-956sonv4s2] {
    font-style: italic;
    font-weight: 400;
    color: #fff;
    animation: q-banner-accent-color-b-956sonv4s2 0.8s ease 900ms both;
}

@keyframes q-banner-accent-color-b-956sonv4s2 {
    from { color: #fff; }
    to   { color: #48e1dc; }
}

/* ======================================================
   Sub-paragraph — Inter, white, max 800px column (a touch wider
   than Our Story's 640 since this copy runs longer)
   ====================================================== */
.q-banner-subtitle[b-956sonv4s2] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #fff;
    text-align: center;
    letter-spacing: -0.4px;
    line-height: 1.4;
    margin: 0 0 80px;
    /* Standardized at 720px to match OurStoryBanner — keeps the
       two static-page heroes visually consistent. */
    max-width: 720px;
    text-wrap: pretty;
    font-size: 16px;
    animation: q-banner-fade-up-b-956sonv4s2 0.7s ease 600ms both;
}

@media (min-width: 768px) {
    .q-banner-subtitle[b-956sonv4s2] { font-size: 20px; }
}

/* Shared keyframe used by title + subtitle. Pill wrappers use their
   own composed keyframes so they can keep an X-axis translate while
   animating Y. */
@keyframes q-banner-fade-up-b-956sonv4s2 {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ======================================================
   Pill image — same two-variant pattern as Our Story Banner
   ====================================================== */
.q-banner-pill-wrap[b-956sonv4s2] {
    position: absolute;
    pointer-events: none;
    z-index: 10;
}

.q-banner-pill-wrap--mobile[b-956sonv4s2] {
    top: 100%;
    left: 50%;
    width: 90%;
    max-width: 680px;
    transform: translate(-50%, -35%);
    animation: q-banner-pill-fade-mobile-b-956sonv4s2 0.7s ease 900ms both;
}

.q-banner-pill-wrap--mobile .q-banner-pill[b-956sonv4s2] {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes q-banner-pill-fade-mobile-b-956sonv4s2 {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-35% + 16px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -35%);
    }
}

.q-banner-pill-wrap--desktop[b-956sonv4s2] {
    display: none;
}

@media (min-width: 1280px) {
    .q-banner-pill-wrap--mobile[b-956sonv4s2] {
        display: none;
    }

    .q-banner-pill-wrap--desktop[b-956sonv4s2] {
        display: block;
        bottom: -243px;
        left: 50%;
        width: 1060px;
        height: 472px;
        overflow: hidden;
        transform: translateX(-50%);
        animation: q-banner-pill-fade-desktop-b-956sonv4s2 0.7s ease 900ms both;
    }

    .q-banner-pill-wrap--desktop .q-banner-pill[b-956sonv4s2] {
        position: absolute;
        width: 1182px;
        height: 624px;
        bottom: -155px;
        right: -71px;
        max-width: none;
    }
}

@keyframes q-banner-pill-fade-desktop-b-956sonv4s2 {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ======================================================
   Reduced motion — skip every entrance animation
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
    .q-banner-line[b-956sonv4s2],
    .q-banner-title[b-956sonv4s2],
    .q-banner-title-accent[b-956sonv4s2],
    .q-banner-subtitle[b-956sonv4s2],
    .q-banner-pill-wrap--mobile[b-956sonv4s2],
    .q-banner-pill-wrap--desktop[b-956sonv4s2] {
        animation: none;
    }

    .q-banner-line[b-956sonv4s2] { height: 111px; opacity: 1; }
    .q-banner-title-accent[b-956sonv4s2] { color: #48e1dc; }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection10.razor.rz.scp.css */
/* ======================================================
   Quality — Section10. Scoped styles.

   Sister to Section6 — same airy aqua-bg quote layout. Big
   surrounding padding (80/140/220 vertical) intentionally
   breaks the page's tight 40/60/80 inter-section ramp because
   the design intent here is breathing room around the quote.
   ====================================================== */

.q-s10[b-m5juhxstmd] {
    background-color: #e8f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
}

@media (min-width: 768px) {
    .q-s10[b-m5juhxstmd] { padding: 140px 80px; }
}

@media (min-width: 1280px) {
    .q-s10[b-m5juhxstmd] { padding: 220px 240px; }
}

.q-s10-content[b-m5juhxstmd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.q-s10-quote[b-m5juhxstmd] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.5;
    letter-spacing: -0.72px;
    margin: 0 0 24px;
    max-width: 900px;
    text-wrap: balance;
    font-size: 22px;
}

@media (min-width: 768px) { .q-s10-quote[b-m5juhxstmd] { font-size: 28px; } }
@media (min-width: 1280px) { .q-s10-quote[b-m5juhxstmd] { font-size: 36px; } }

.q-s10-attr[b-m5juhxstmd] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s10-attr[b-m5juhxstmd] { font-size: 20px; } }

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s10 [data-os-reveal][b-m5juhxstmd] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-s10 [data-os-reveal].os-revealed[b-m5juhxstmd] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s10 [data-os-reveal][b-m5juhxstmd] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection11.razor.rz.scp.css */
/* ======================================================
   Quality — Section11. Final closer. Scoped styles.

   Cream-bg section with header copy → 3 testimonial cards
   (desktop row | mobile peek-carousel) → 3 numeric stats
   row (with vertical separators on desktop, stacked on mobile).
   ====================================================== */

.q-s11[b-dggsnh68re] {
    background-color: #F6F2EC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

@media (min-width: 768px) {
    .q-s11[b-dggsnh68re] { padding: 60px 40px; }
}

@media (min-width: 1280px) {
    .q-s11[b-dggsnh68re] { padding: 80px 40px; }
}

/* ======================================================
   Header copy — title + tealline + eyebrow
   ====================================================== */
.q-s11-header[b-dggsnh68re] {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 60px;
}

.q-s11-title[b-dggsnh68re] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    text-wrap: balance;
    font-size: 42px;
}

@media (min-width: 768px) { .q-s11-title[b-dggsnh68re] { font-size: 64px; } }
@media (min-width: 960px) { .q-s11-title[b-dggsnh68re] { font-size: 76px; } }
@media (min-width: 1280px) { .q-s11-title[b-dggsnh68re] { font-size: 92px; } }

/* Mobile-only line break — at tablet+ the title flows naturally. */
.q-s11-title-break[b-dggsnh68re] {
    display: inline;
}

@media (min-width: 768px) {
    .q-s11-title-break[b-dggsnh68re] { display: none; }
}

/* "health-conscious" stays on one line — protects the visual
   intent of the hyphenated compound */
.q-s11-title-nowrap[b-dggsnh68re] {
    white-space: nowrap;
}

.q-s11-tealline[b-dggsnh68re] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.q-s11-eyebrow[b-dggsnh68re] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) { .q-s11-eyebrow[b-dggsnh68re] { font-size: 20px; } }

/* ======================================================
   Testimonial card — shared shell. Used by both the desktop
   row and the mobile carousel.
   ====================================================== */
.q-s11-card[b-dggsnh68re] {
    width: 100%;
    min-width: 0;
    height: 369px;
    background-color: #fff;
    border-radius: 20px;
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.q-s11-card-stars[b-dggsnh68re] {
    width: 97px;
    height: 17px;
    object-fit: contain;
}

.q-s11-card-quote[b-dggsnh68re] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.25;
    margin: 0;
    flex: 1;
    font-size: 18px;
}

@media (min-width: 768px) { .q-s11-card-quote[b-dggsnh68re] { font-size: 24px; } }

.q-s11-card-divider[b-dggsnh68re] {
    height: 1px;
    background-color: rgba(0, 146, 150, 0.2);
}

.q-s11-card-name[b-dggsnh68re] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #003b3c;
    margin: 0 0 2px;
}

.q-s11-card-role[b-dggsnh68re] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #406c6d;
    margin: 0;
}

/* ======================================================
   Desktop: 3 cards in a flex row. Hidden below 768.
   ====================================================== */
.q-s11-cards-desktop[b-dggsnh68re] {
    display: none;
}

@media (min-width: 768px) {
    .q-s11-cards-desktop[b-dggsnh68re] {
        display: flex;
        gap: 20px;
        align-items: stretch;
        width: 100%;
        /* 1364 = Section9's natural width (475 copy + 80 gap + 809 photo).
           Page-wide "wide content row" cap so all wide rows align at the
           right edge across sections. */
        max-width: 1364px;
        margin-bottom: 60px;
    }

    .q-s11-card-wrap[b-dggsnh68re] {
        flex: 1 0 0;
        min-width: 0;
    }
}

/* ======================================================
   Mobile: scroll-snap peek carousel. Hidden at 768+.
   Same pattern as Section8's manufacturing carousel.
   ====================================================== */
.q-s11-carousel-mobile[b-dggsnh68re] {
    width: 100%;
    margin-bottom: 60px;
}

@media (min-width: 768px) {
    .q-s11-carousel-mobile[b-dggsnh68re] { display: none; }
}

.q-s11-carousel-track[b-dggsnh68re] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    padding: 0 20px;
}

.q-s11-carousel-track[b-dggsnh68re]::-webkit-scrollbar { display: none; }

.q-s11-carousel-slide[b-dggsnh68re] {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 82vw;
    max-width: 360px;
}

/* Dots — match the homepage hero-dot pattern (hollow circle
   → filled circle, same size). Site-wide convention so all
   carousel indicators read the same visual language. */
.q-s11-dots[b-dggsnh68re] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
}

.q-s11-dot[b-dggsnh68re] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #009296;
    background: transparent;
    transition: background-color 0.3s ease;
}

.q-s11-dot.is-active[b-dggsnh68re] {
    background: #009296;
}

/* ======================================================
   Stats row — 3 numbers with vertical separators
   ====================================================== */
.q-s11-stats[b-dggsnh68re] {
    width: 100%;
    /* Matches the testimonials row above + Section9's natural width so the
       stats row reads as part of the same content column. */
    max-width: 1364px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

@media (min-width: 768px) {
    .q-s11-stats[b-dggsnh68re] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }
}

.q-s11-stat[b-dggsnh68re] {
    text-align: center;
    flex: 1;
}

.q-s11-stat-value[b-dggsnh68re] {
    font-family: 'STIX Two Text', serif;
    color: #009296;
    line-height: 1.1;
    margin: 0 0 8px;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 768px) { .q-s11-stat-value[b-dggsnh68re] { font-size: 48px; } }
@media (min-width: 1280px) { .q-s11-stat-value[b-dggsnh68re] { font-size: 58px; } }

.q-s11-stat-label[b-dggsnh68re] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s11-stat-label[b-dggsnh68re] { font-size: 20px; } }

/* Vertical separator between stats — only visible at 768+ where
   the stats row is horizontal. */
.q-s11-stat-divider[b-dggsnh68re] {
    display: none;
}

@media (min-width: 768px) {
    .q-s11-stat-divider[b-dggsnh68re] {
        display: block;
        width: 1px;
        height: 80px;
        background-color: #009296;
        opacity: 0.3;
        flex-shrink: 0;
    }
}

/* ======================================================
   Reveal-on-scroll — testimonial cards stagger via
   --reveal-delay set inline per card-wrap.
   ====================================================== */
.q-s11 [data-os-reveal][b-dggsnh68re] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-s11 [data-os-reveal].os-revealed[b-dggsnh68re] {
    opacity: 1;
    transform: translateY(0);
}

.q-s11-card-wrap[b-dggsnh68re] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.q-s11-cards-desktop.os-revealed .q-s11-card-wrap[b-dggsnh68re] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s11 [data-os-reveal][b-dggsnh68re],
    .q-s11-card-wrap[b-dggsnh68re] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .q-s11-dot[b-dggsnh68re] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection2.razor.rz.scp.css */
/* ======================================================
   Quality — Section2. Scoped styles.

   White section, sits directly under the Banner. The big top
   padding (180/260/300) is the visual spacer for the Banner's
   pill image, which bisects the bottom of the teal hero band.

   Below the centered copy block, a wide video card with the
   andrew-lessman-teal portrait acts as a single tap target —
   clicking anywhere opens the shared video lightbox.
   ====================================================== */

.q-s2[b-k1z3hb4rz5] {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 180px 20px 0;
}

@media (min-width: 768px) {
    .q-s2[b-k1z3hb4rz5] { padding: 260px 40px 0; }
}

@media (min-width: 1280px) {
    .q-s2[b-k1z3hb4rz5] { padding: 300px 40px 0; }
}

/* ======================================================
   Copy block — centered, capped at 1000px
   ====================================================== */
.q-s2-copy[b-k1z3hb4rz5] {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 80px;
}

.q-s2-title[b-k1z3hb4rz5] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 42px;
}

@media (min-width: 768px) {
    .q-s2-title[b-k1z3hb4rz5] { font-size: 64px; }
}

/* Smooth ramp between 768 (64px) and 1280 (92px) */
@media (min-width: 960px) {
    .q-s2-title[b-k1z3hb4rz5] { font-size: 76px; }
}

@media (min-width: 1280px) {
    .q-s2-title[b-k1z3hb4rz5] { font-size: 92px; }
}

.q-s2-title-accent[b-k1z3hb4rz5] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.q-s2-tealline[b-k1z3hb4rz5] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.q-s2-eyebrow[b-k1z3hb4rz5] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .q-s2-eyebrow[b-k1z3hb4rz5] { font-size: 20px; }
}

.q-s2-paragraph[b-k1z3hb4rz5] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    /* 720px is the shared centered-paragraph reading column across
       both static pages — matches the Banner subtitle width. */
    max-width: 720px;
    font-size: 16px;
}

@media (min-width: 768px) {
    .q-s2-paragraph[b-k1z3hb4rz5] { font-size: 20px; }
}

/* ======================================================
   Mobile-only signature block — sits below the paragraph on
   phones. Hidden at tablet+ (where the desktop overlay inside
   the video card takes over).
   ====================================================== */
.q-s2-signature-mobile[b-k1z3hb4rz5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

@media (min-width: 768px) {
    .q-s2-signature-mobile[b-k1z3hb4rz5] { display: none; }
}

/* Andrew's signature recolored to brand teal via CSS mask. The SVG
   acts as a clip mask over a teal background so we can re-theme
   without re-exporting. */
.q-s2-signature-mark[b-k1z3hb4rz5] {
    width: 258px;
    height: 40px;
    background-color: #009296;
    -webkit-mask-image: url('https://cdn.bfldr.com/EE0OVGM5/at/6gjntcfgwzwhws7jw4b4n37p/iconandrewsignature.svg?auto=webp&format=svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('https://cdn.bfldr.com/EE0OVGM5/at/6gjntcfgwzwhws7jw4b4n37p/iconandrewsignature.svg?auto=webp&format=svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.q-s2-signature-attr[b-k1z3hb4rz5] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #003b3c;
    margin: 0;
    line-height: 1.3;
}

.q-s2-signature-name[b-k1z3hb4rz5] {
    font-weight: 600;
}

.q-s2-signature-role[b-k1z3hb4rz5] {
    font-weight: 400;
}

/* ======================================================
   Video card — wide aspect, button. Click anywhere to play.
   ====================================================== */
.q-s2-video-wrap[b-k1z3hb4rz5] {
    width: 100%;
    /* 1364 = Section9's natural width (475 copy + 80 gap + 809 photo).
       Page-wide "wide content row" cap so all wide rows align at the
       right edge across sections. */
    max-width: 1364px;
    /* No bottom margin — the next section provides the inter-section
       gap via its top padding. Stacking margin + padding here was
       producing a 180px gap at desktop. */
}

.q-s2-video[b-k1z3hb4rz5] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1329 / 737;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: block;
}

.q-s2-video-img[b-k1z3hb4rz5] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 400ms ease;
}

.q-s2-video-overlay[b-k1z3hb4rz5] {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 250ms ease;
    z-index: 1;
    border-radius: 20px;
}

.q-s2-video-play[b-k1z3hb4rz5] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 250ms ease;
    z-index: 2;
    width: 64px;
    height: 64px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .q-s2-video-play[b-k1z3hb4rz5] { width: 96px; height: 96px; }
}

@media (min-width: 1280px) {
    .q-s2-video-play[b-k1z3hb4rz5] { width: 129px; height: 129px; }
}

.q-s2-video-play img[b-k1z3hb4rz5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (hover: hover) {
    .q-s2-video:hover .q-s2-video-img[b-k1z3hb4rz5] { transform: scale(1.02); }
    .q-s2-video:hover .q-s2-video-overlay[b-k1z3hb4rz5] { background-color: rgba(0, 0, 0, 0.15); }
    .q-s2-video:hover .q-s2-video-play[b-k1z3hb4rz5] { transform: translate(-50%, -50%) scale(1.1); }
}

.q-s2-video:focus-visible[b-k1z3hb4rz5] {
    outline: 3px solid #009296;
    outline-offset: 4px;
}

/* ======================================================
   Desktop-only signature + name overlay inside the video card
   (white on the dark teal portrait). Hidden on mobile (the
   teal-on-white version below the paragraph takes over).
   ====================================================== */
.q-s2-video-sig[b-k1z3hb4rz5] {
    display: none;
}

@media (min-width: 768px) {
    .q-s2-video-sig[b-k1z3hb4rz5] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        position: absolute;
        bottom: 32px;
        left: 32px;
        z-index: 2;
        pointer-events: none;
    }
}

@media (min-width: 1280px) {
    .q-s2-video-sig[b-k1z3hb4rz5] {
        bottom: 52px;
        left: 50px;
    }
}

.q-s2-video-sig-mark[b-k1z3hb4rz5] {
    width: 280px;
    height: 48px;
    background-color: #fff;
    -webkit-mask-image: url('https://cdn.bfldr.com/EE0OVGM5/at/6gjntcfgwzwhws7jw4b4n37p/iconandrewsignature.svg?auto=webp&format=svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-image: url('https://cdn.bfldr.com/EE0OVGM5/at/6gjntcfgwzwhws7jw4b4n37p/iconandrewsignature.svg?auto=webp&format=svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: left center;
}

@media (min-width: 1280px) {
    .q-s2-video-sig-mark[b-k1z3hb4rz5] {
        width: 380px;
        height: 59px;
    }
}

.q-s2-video-sig-attr[b-k1z3hb4rz5] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

@media (min-width: 1280px) {
    .q-s2-video-sig-attr[b-k1z3hb4rz5] { font-size: 20px; }
}

/* ======================================================
   Reveal-on-scroll — both the copy block and the video card
   fade in (video card lags 120ms via inline --reveal-delay).
   ====================================================== */
.q-s2 [data-os-reveal][b-k1z3hb4rz5] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.q-s2 [data-os-reveal].os-revealed[b-k1z3hb4rz5] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s2 [data-os-reveal][b-k1z3hb4rz5] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .q-s2-video-img[b-k1z3hb4rz5],
    .q-s2-video-overlay[b-k1z3hb4rz5],
    .q-s2-video-play[b-k1z3hb4rz5] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection3.razor.rz.scp.css */
/* ======================================================
   Quality — Section3. Scoped styles.

   Side-by-side comparison cards. Background gradient bridges
   the white Section2 above into a tinted region; cards stack
   on mobile and sit equal-height on tablet+.

   The "typical brands" card has a subtle teal hairline border
   so it doesn't disappear against the white side of the
   gradient. The ProCaps card uses the prototype's BG_MINT_CARD
   tint so it visibly leads as the preferred option.
   ====================================================== */

/* Inter-section gap via top padding (40/60/80 ramp). This is the
   page's standard "between sections" rhythm — sections rely on the
   NEXT section's top padding rather than their own bottom margin
   so adjacent sections don't double-count their spacing. */
.q-s3[b-vsieof1g80] {
    background: linear-gradient(to bottom, #fff, #ebfafa);
    padding: 40px 20px;
}

@media (min-width: 768px) {
    .q-s3[b-vsieof1g80] { padding: 60px 40px; }
}

@media (min-width: 1280px) {
    .q-s3[b-vsieof1g80] { padding: 80px 40px; }
}

/* ======================================================
   Two-column grid — stacks on mobile, equal-height row at 768+
   ====================================================== */
.q-s3-grid[b-vsieof1g80] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* 1364 = Section9's natural width (475 copy + 80 gap + 809 photo).
       Page-wide "wide content row" cap so all wide rows align at the
       right edge across sections. */
    max-width: 1364px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .q-s3-grid[b-vsieof1g80] {
        flex-direction: row;
        align-items: stretch;
    }
}

/* ======================================================
   Card — shared shell, theme variants below
   ====================================================== */
.q-s3-card[b-vsieof1g80] {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
    border-radius: 20px;
    padding: 48px 32px;
}

@media (min-width: 768px) {
    .q-s3-card[b-vsieof1g80] {
        gap: 40px;
        padding: 80px 60px;
    }
}

.q-s3-card--typical[b-vsieof1g80] {
    background-color: #fff;
    border: 1px solid rgba(0, 146, 150, 0.15);
}

.q-s3-card--procaps[b-vsieof1g80] {
    background-color: #dcf9f9;
}

/* ======================================================
   Card header — title + subtitle
   ====================================================== */
.q-s3-card-title[b-vsieof1g80] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    letter-spacing: -0.68px;
    margin: 0 0 8px;
    font-size: 24px;
}

@media (min-width: 768px) {
    .q-s3-card-title[b-vsieof1g80] { font-size: 34px; }
}

.q-s3-card-subtitle[b-vsieof1g80] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #009296;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) {
    .q-s3-card-subtitle[b-vsieof1g80] { font-size: 20px; }
}

/* ======================================================
   Divider between header and bullets
   ====================================================== */
.q-s3-card-divider[b-vsieof1g80] {
    height: 1px;
    background-color: #009296;
    opacity: 0.3;
}

/* ======================================================
   Bullet list
   ====================================================== */
.q-s3-bullets[b-vsieof1g80] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.q-s3-bullet[b-vsieof1g80] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.q-s3-icon[b-vsieof1g80] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.q-s3-icon--x[b-vsieof1g80] {
    color: #C8272D;
}

.q-s3-icon--check[b-vsieof1g80] {
    color: #009296;
}

.q-s3-icon svg[b-vsieof1g80] {
    width: 10px;
    height: 10px;
    overflow: visible;
}

/* The check SVG has a 10×8 viewBox vs the X's 10×10 — keep the
   SVG's natural intrinsic dimensions so the stroke renders
   without distortion. */
.q-s3-icon--check svg[b-vsieof1g80] {
    width: 10px;
    height: 8px;
}

.q-s3-bullet-text[b-vsieof1g80] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    font-size: 16px;
}

@media (min-width: 768px) {
    .q-s3-bullet-text[b-vsieof1g80] { font-size: 20px; }
}

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s3 [data-os-reveal][b-vsieof1g80] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.q-s3 [data-os-reveal].os-revealed[b-vsieof1g80] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s3 [data-os-reveal][b-vsieof1g80] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection4.razor.rz.scp.css */
/* ======================================================
   Quality — Section4. Scoped styles.

   Cream-bg centered copy block ("Formulation without hype.")
   followed by a full-bleed wide image strip. Image lives outside
   the cream <section> so it goes edge-to-edge of the viewport.

   Top padding follows the page's standard inter-section ramp
   (40/60/80) so the gap between this and the previous section is
   consistent with everything else.
   ====================================================== */

.q-s4[b-ii3qt4737t] {
    background-color: #F6F2EC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

@media (min-width: 768px) {
    .q-s4[b-ii3qt4737t] { padding: 60px 40px; }
}

@media (min-width: 1280px) {
    .q-s4[b-ii3qt4737t] { padding: 80px 40px; }
}

/* ======================================================
   Centered copy block — capped at 1000px
   ====================================================== */
.q-s4-copy[b-ii3qt4737t] {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
}

.q-s4-title[b-ii3qt4737t] {
    font-family: 'STIX Two Text', serif;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 42px;
}

@media (min-width: 768px) {
    .q-s4-title[b-ii3qt4737t] { font-size: 64px; }
}

/* Smooth ramp between 768 (64px) and 1280 (92px) */
@media (min-width: 960px) {
    .q-s4-title[b-ii3qt4737t] { font-size: 76px; }
}

@media (min-width: 1280px) {
    .q-s4-title[b-ii3qt4737t] { font-size: 92px; }
}

.q-s4-title-accent[b-ii3qt4737t] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.q-s4-title-rest[b-ii3qt4737t] {
    color: #003b3c;
}

/* Mobile-only line break between accent and rest. The prototype's
   "<br className=md:hidden>" → at 768+, the <br> stops breaking. */
.q-s4-title-break[b-ii3qt4737t] {
    display: inline;
}

@media (min-width: 768px) {
    .q-s4-title-break[b-ii3qt4737t] { display: none; }
}

.q-s4-tealline[b-ii3qt4737t] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.q-s4-eyebrow[b-ii3qt4737t] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .q-s4-eyebrow[b-ii3qt4737t] { font-size: 20px; }
}

.q-s4-paragraph[b-ii3qt4737t] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    /* Shared 720px centered-paragraph reading column. */
    max-width: 720px;
    font-size: 16px;
}

@media (min-width: 768px) {
    .q-s4-paragraph[b-ii3qt4737t] { font-size: 20px; }
}

/* ======================================================
   Full-bleed image strip — edge-to-edge, no padding
   ====================================================== */
.q-s4-image-wrap[b-ii3qt4737t] {
    width: 100%;
    overflow: hidden;
}

.q-s4-image[b-ii3qt4737t] {
    width: 100%;
    aspect-ratio: 1080 / 398;
    object-fit: cover;
    display: block;
}

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s4 [data-os-reveal][b-ii3qt4737t] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-s4 [data-os-reveal].os-revealed[b-ii3qt4737t] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s4 [data-os-reveal][b-ii3qt4737t] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection5.razor.rz.scp.css */
/* ======================================================
   Quality — Section5. Scoped styles.

   White-bg two-column section. Copy on the left, square botanical
   image on the right. Stacks on mobile.

   Top padding follows the page's standard 40/60/80 ramp; bottom
   padding is 0 — the next section provides the gap to the next
   block (single-counting, established earlier in this page).
   ====================================================== */

/* Symmetric top + bottom padding here. The "next section provides
   the gap" rule works for adjacent same-bg sections, but this one
   transitions white → aqua (Section6), so we want visible white
   breathing room below the content before the aqua starts.
   Both sections contribute to the visible gap. */
.q-s5[b-08qpo1dbut] {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px 20px;
}

@media (min-width: 768px) {
    .q-s5[b-08qpo1dbut] {
        flex-direction: row;
        gap: 80px;
        align-items: center;
        padding: 60px 40px;
    }
}

@media (min-width: 1280px) {
    .q-s5[b-08qpo1dbut] { padding: 80px 40px; }
}

/* ======================================================
   Left — copy block, capped at 475px on tablet+
   ====================================================== */
.q-s5-copy[b-08qpo1dbut] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .q-s5-copy[b-08qpo1dbut] { max-width: 475px; }
}

.q-s5-title[b-08qpo1dbut] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.16px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 768px) { .q-s5-title[b-08qpo1dbut] { font-size: 48px; } }
@media (min-width: 960px) { .q-s5-title[b-08qpo1dbut] { font-size: 52px; } }
@media (min-width: 1280px) { .q-s5-title[b-08qpo1dbut] { font-size: 58px; } }

.q-s5-title-accent[b-08qpo1dbut] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.q-s5-tealline[b-08qpo1dbut] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.q-s5-eyebrow[b-08qpo1dbut] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) { .q-s5-eyebrow[b-08qpo1dbut] { font-size: 20px; } }

.q-s5-paragraph[b-08qpo1dbut] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s5-paragraph[b-08qpo1dbut] { font-size: 20px; } }

/* "Every ingredient:" lead-in line — slightly heavier weight as
   a visual hand-off to the bullet list below. */
.q-s5-paragraph--lead[b-08qpo1dbut] {
    font-weight: 500;
}

/* ======================================================
   Bullet list — same teal-ring + check pattern as Section3's
   ProCaps card.
   ====================================================== */
.q-s5-bullets[b-08qpo1dbut] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.q-s5-bullet[b-08qpo1dbut] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.q-s5-icon[b-08qpo1dbut] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    border: 1.5px solid #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.q-s5-icon svg[b-08qpo1dbut] {
    width: 10px;
    height: 8px;
    overflow: visible;
}

.q-s5-bullet-text[b-08qpo1dbut] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s5-bullet-text[b-08qpo1dbut] { font-size: 20px; } }

/* ======================================================
   Right — square botanical image
   ====================================================== */
.q-s5-image-wrap[b-08qpo1dbut] {
    width: 100%;
    flex: 1;
}

@media (min-width: 768px) {
    .q-s5-image-wrap[b-08qpo1dbut] { max-width: 809px; }
}

.q-s5-image[b-08qpo1dbut] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s5 [data-os-reveal][b-08qpo1dbut] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.q-s5 [data-os-reveal].os-revealed[b-08qpo1dbut] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s5 [data-os-reveal][b-08qpo1dbut] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection6.razor.rz.scp.css */
/* ======================================================
   Quality — Section6. Scoped styles.

   "Pause moment" — a centered Andrew Lessman quote on a pale-
   aqua band. Big surrounding padding both vertically (80/140/
   220) and horizontally (20/80/240) creates an airy, quiet
   stage for the quote between busier sections.

   This section intentionally breaks the page's tight 40/60/80
   inter-section ramp because the design intent here is "lots
   of breathing room around the quote". Section7 will pick up
   the rhythm again.
   ====================================================== */

.q-s6[b-2jghqn1kol] {
    background-color: #e8f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
}

@media (min-width: 768px) {
    .q-s6[b-2jghqn1kol] { padding: 140px 80px; }
}

@media (min-width: 1280px) {
    .q-s6[b-2jghqn1kol] { padding: 220px 240px; }
}

.q-s6-content[b-2jghqn1kol] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.q-s6-quote[b-2jghqn1kol] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.5;
    letter-spacing: -0.72px;
    margin: 0 0 24px;
    max-width: 900px;
    text-wrap: balance;
    font-size: 22px;
}

@media (min-width: 768px) { .q-s6-quote[b-2jghqn1kol] { font-size: 28px; } }
@media (min-width: 1280px) { .q-s6-quote[b-2jghqn1kol] { font-size: 36px; } }

.q-s6-attr[b-2jghqn1kol] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s6-attr[b-2jghqn1kol] { font-size: 20px; } }

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s6 [data-os-reveal][b-2jghqn1kol] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-s6 [data-os-reveal].os-revealed[b-2jghqn1kol] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s6 [data-os-reveal][b-2jghqn1kol] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection7.razor.rz.scp.css */
/* ======================================================
   Quality — Section7. Scoped styles.

   Mirror of Section5 — white-bg two-column. Image on the LEFT,
   copy on the RIGHT at tablet+. Mobile stacks with image on top
   (column-reverse, since the JSX has image first but copy needs
   to read after the image visually on phones).

   Symmetric 40/60/80 top + bottom padding so this section meets
   its neighbors with consistent visible breathing room.
   ====================================================== */

.q-s7[b-87viwuzl9s] {
    background-color: #fff;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px 20px;
}

@media (min-width: 768px) {
    .q-s7[b-87viwuzl9s] {
        flex-direction: row;
        gap: 80px;
        align-items: center;
        padding: 60px 40px;
    }
}

@media (min-width: 1280px) {
    .q-s7[b-87viwuzl9s] { padding: 80px 40px; }
}

/* ======================================================
   Left — square capsules image
   ====================================================== */
.q-s7-image-wrap[b-87viwuzl9s] {
    width: 100%;
    flex: 1;
}

@media (min-width: 768px) {
    .q-s7-image-wrap[b-87viwuzl9s] { max-width: 809px; }
}

.q-s7-image[b-87viwuzl9s] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* ======================================================
   Right — copy block, capped at 475px on tablet+
   ====================================================== */
.q-s7-copy[b-87viwuzl9s] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .q-s7-copy[b-87viwuzl9s] { max-width: 475px; }
}

.q-s7-eyebrow[b-87viwuzl9s] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) { .q-s7-eyebrow[b-87viwuzl9s] { font-size: 20px; } }

.q-s7-tealline[b-87viwuzl9s] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.q-s7-title[b-87viwuzl9s] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.16px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 768px) { .q-s7-title[b-87viwuzl9s] { font-size: 48px; } }
@media (min-width: 960px) { .q-s7-title[b-87viwuzl9s] { font-size: 52px; } }
@media (min-width: 1280px) { .q-s7-title[b-87viwuzl9s] { font-size: 58px; } }

.q-s7-title-accent[b-87viwuzl9s] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

/* The line break is desktop-only — on mobile the title flows
   inline. Inverse of Section4's behavior (which broke on mobile). */
.q-s7-title-break[b-87viwuzl9s] {
    display: none;
}

@media (min-width: 768px) {
    .q-s7-title-break[b-87viwuzl9s] { display: inline; }
}

.q-s7-paragraph[b-87viwuzl9s] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s7-paragraph[b-87viwuzl9s] { font-size: 20px; } }

.q-s7-paragraph--lead[b-87viwuzl9s] {
    font-weight: 500;
}

/* ======================================================
   Bullet list — same teal-ring + check pattern as Section3/Section5
   ====================================================== */
.q-s7-bullets[b-87viwuzl9s] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.q-s7-bullet[b-87viwuzl9s] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.q-s7-icon[b-87viwuzl9s] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    border: 1.5px solid #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.q-s7-icon svg[b-87viwuzl9s] {
    width: 10px;
    height: 8px;
    overflow: visible;
}

.q-s7-bullet-text[b-87viwuzl9s] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s7-bullet-text[b-87viwuzl9s] { font-size: 20px; } }

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s7 [data-os-reveal][b-87viwuzl9s] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.q-s7 [data-os-reveal].os-revealed[b-87viwuzl9s] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s7 [data-os-reveal][b-87viwuzl9s] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection8.razor.rz.scp.css */
/* ======================================================
   Quality — Section8. Scoped styles.

   Cream-bg section: centered copy block, then 3 manufacturing-
   series video cards (desktop = flex row, mobile = scroll-snap
   peek-carousel with active dot tracker).

   Trailing wide image strip lives outside the cream section so
   it goes edge-to-edge.
   ====================================================== */

.q-s8[b-tngtda0uxq] {
    background-color: #F6F2EC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 0;
}

@media (min-width: 768px) {
    .q-s8[b-tngtda0uxq] { padding: 60px 40px 0; }
}

@media (min-width: 1280px) {
    .q-s8[b-tngtda0uxq] { padding: 80px 40px 0; }
}

/* ======================================================
   Centered copy block — capped at 1000px
   ====================================================== */
.q-s8-copy[b-tngtda0uxq] {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    margin-bottom: 60px;
}

.q-s8-title[b-tngtda0uxq] {
    font-family: 'STIX Two Text', serif;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 42px;
}

@media (min-width: 768px) { .q-s8-title[b-tngtda0uxq] { font-size: 64px; } }
@media (min-width: 960px) { .q-s8-title[b-tngtda0uxq] { font-size: 76px; } }
@media (min-width: 1280px) { .q-s8-title[b-tngtda0uxq] { font-size: 92px; } }

.q-s8-title-rest[b-tngtda0uxq] {
    color: #003b3c;
}

.q-s8-title-accent[b-tngtda0uxq] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.q-s8-tealline[b-tngtda0uxq] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.q-s8-eyebrow[b-tngtda0uxq] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
    text-wrap: balance;
}

@media (min-width: 768px) { .q-s8-eyebrow[b-tngtda0uxq] { font-size: 20px; } }

.q-s8-paragraph[b-tngtda0uxq] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    /* Shared 720px centered-paragraph reading column. */
    max-width: 720px;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s8-paragraph[b-tngtda0uxq] { font-size: 20px; } }

/* ======================================================
   Video card — shared shell. Used in both the desktop row and
   the mobile carousel. Hover deepens the bg + scales the icon.
   ====================================================== */
.q-s8-card[b-tngtda0uxq] {
    appearance: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background-color: #003b3c;
    border-radius: 20px;
    height: 360px;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 32px 19px;
    transition: background-color 250ms ease;
}

.q-s8-card-icon[b-tngtda0uxq] {
    width: 90px;
    height: 90px;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 250ms ease;
}

.q-s8-card-title[b-tngtda0uxq] {
    font-family: 'STIX Two Text', serif;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
    text-align: center;
    margin: 0;
    text-wrap: balance;
}

@media (hover: hover) {
    .q-s8-card:hover[b-tngtda0uxq] {
        /* Slightly lighter dark teal for a subtle press cue */
        background-color: #004f50;
    }
    .q-s8-card:hover .q-s8-card-icon[b-tngtda0uxq] {
        transform: scale(1.1);
    }
}

.q-s8-card:focus-visible[b-tngtda0uxq] {
    outline: 3px solid #009296;
    outline-offset: 4px;
}

/* ======================================================
   Desktop: 3 cards in a flex row, hidden below 768
   ====================================================== */
.q-s8-cards-desktop[b-tngtda0uxq] {
    display: none;
}

@media (min-width: 768px) {
    .q-s8-cards-desktop[b-tngtda0uxq] {
        display: flex;
        gap: 20px;
        align-items: stretch;
        width: 100%;
        /* 1364 = Section9's natural width (copy 475 + gap 80 + photo 809).
           Used as the page-wide "wide content row" cap so every full-width
           row aligns at its right edge across sections. */
        max-width: 1364px;
    }

    .q-s8-cards-desktop .q-s8-card[b-tngtda0uxq] {
        flex: 1 0 0;
        min-width: 0;
    }
}

/* ======================================================
   Mobile: scroll-snap peek carousel, hidden at 768+

   Each slide is 82vw wide (capped at 360) with 12px gap. The
   track has 20px horizontal padding so the first/last cards
   peek nicely without sitting flush against the viewport edge.
   ====================================================== */
.q-s8-carousel-mobile[b-tngtda0uxq] {
    width: 100%;
}

@media (min-width: 768px) {
    .q-s8-carousel-mobile[b-tngtda0uxq] { display: none; }
}

.q-s8-carousel-track[b-tngtda0uxq] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 12px;
    padding: 0 20px;
}

.q-s8-carousel-track[b-tngtda0uxq]::-webkit-scrollbar {
    display: none;
}

.q-s8-carousel-slide[b-tngtda0uxq] {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 82vw;
    max-width: 360px;
}

/* ---- Dots — match the homepage hero-dot pattern (hollow circle
   → filled circle, same size). Site-wide convention so all
   carousel indicators read the same visual language. ---- */
.q-s8-dots[b-tngtda0uxq] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 36px;
}

.q-s8-dot[b-tngtda0uxq] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #009296;
    background: transparent;
    transition: background-color 0.3s ease;
}

.q-s8-dot.is-active[b-tngtda0uxq] {
    background: #009296;
}

/* ======================================================
   Trailing full-bleed image strip — outside the cream section
   ====================================================== */
.q-s8-image-wrap[b-tngtda0uxq] {
    width: 100%;
    overflow: hidden;
}

.q-s8-image[b-tngtda0uxq] {
    width: 100%;
    aspect-ratio: 1960 / 480;
    object-fit: cover;
    display: block;
}

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s8 [data-os-reveal][b-tngtda0uxq] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-s8 [data-os-reveal].os-revealed[b-tngtda0uxq] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s8 [data-os-reveal][b-tngtda0uxq] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .q-s8-card[b-tngtda0uxq],
    .q-s8-card-icon[b-tngtda0uxq],
    .q-s8-dot[b-tngtda0uxq] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Quality/QualitySection9.razor.rz.scp.css */
/* ======================================================
   Quality — Section9. Scoped styles.

   White-bg two-column. Copy left, square clickable hero photo
   right. Same hover treatment as the FounderSection portrait
   (image scales, dark overlay tints, play icon scales).

   Symmetric 40/60/80 padding so this section meets its
   neighbors with consistent visible breathing room.
   ====================================================== */

.q-s9[b-9yq9mmqlg3] {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px 20px;
}

@media (min-width: 768px) {
    .q-s9[b-9yq9mmqlg3] {
        flex-direction: row;
        gap: 80px;
        align-items: center;
        padding: 60px 40px;
    }
}

@media (min-width: 1280px) {
    .q-s9[b-9yq9mmqlg3] { padding: 80px 40px; }
}

/* ======================================================
   Left — copy block, capped at 475px on tablet+
   ====================================================== */
.q-s9-copy[b-9yq9mmqlg3] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 768px) {
    .q-s9-copy[b-9yq9mmqlg3] { max-width: 475px; }
}

.q-s9-title[b-9yq9mmqlg3] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.16px;
    margin: 0;
    font-weight: 400;
    font-size: 36px;
}

@media (min-width: 768px) { .q-s9-title[b-9yq9mmqlg3] { font-size: 48px; } }
@media (min-width: 960px) { .q-s9-title[b-9yq9mmqlg3] { font-size: 52px; } }
@media (min-width: 1280px) { .q-s9-title[b-9yq9mmqlg3] { font-size: 58px; } }

/* Desktop-only line break — at mobile the title flows inline */
.q-s9-title-break[b-9yq9mmqlg3] {
    display: none;
}

@media (min-width: 768px) {
    .q-s9-title-break[b-9yq9mmqlg3] { display: inline; }
}

.q-s9-tealline[b-9yq9mmqlg3] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.q-s9-eyebrow[b-9yq9mmqlg3] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    letter-spacing: 2px;
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) { .q-s9-eyebrow[b-9yq9mmqlg3] { font-size: 20px; } }

.q-s9-paragraph[b-9yq9mmqlg3] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s9-paragraph[b-9yq9mmqlg3] { font-size: 20px; } }

/* ======================================================
   Right — clickable square hero photo with play overlay
   ====================================================== */
.q-s9-thumb-wrap[b-9yq9mmqlg3] {
    width: 100%;
    flex: 1;
}

@media (min-width: 768px) {
    .q-s9-thumb-wrap[b-9yq9mmqlg3] { max-width: 809px; }
}

.q-s9-thumb[b-9yq9mmqlg3] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.q-s9-thumb-img[b-9yq9mmqlg3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 400ms ease;
}

.q-s9-thumb-overlay[b-9yq9mmqlg3] {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 250ms ease;
    border-radius: 20px;
}

.q-s9-thumb-play[b-9yq9mmqlg3] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 87px;
    height: 87px;
    transition: transform 250ms ease;
    pointer-events: none;
}

.q-s9-thumb-play img[b-9yq9mmqlg3] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (hover: hover) {
    .q-s9-thumb:hover .q-s9-thumb-img[b-9yq9mmqlg3] { transform: scale(1.03); }
    .q-s9-thumb:hover .q-s9-thumb-overlay[b-9yq9mmqlg3] { background-color: rgba(0, 0, 0, 0.12); }
    .q-s9-thumb:hover .q-s9-thumb-play[b-9yq9mmqlg3] { transform: translate(-50%, -50%) scale(1.1); }
}

.q-s9-thumb:focus-visible[b-9yq9mmqlg3] {
    outline: 3px solid #009296;
    outline-offset: 4px;
}

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s9 [data-os-reveal][b-9yq9mmqlg3] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.q-s9 [data-os-reveal].os-revealed[b-9yq9mmqlg3] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s9 [data-os-reveal][b-9yq9mmqlg3] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .q-s9-thumb-img[b-9yq9mmqlg3],
    .q-s9-thumb-overlay[b-9yq9mmqlg3],
    .q-s9-thumb-play[b-9yq9mmqlg3] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Shipping.razor.rz.scp.css */
/* ======================================================
   Shipping & Returns — scoped styles.

   Borrows the FAQ accordion pattern but drops everything related
   to category nav (no pills, no sticky twin, no scroll observer,
   no JS at all). Single linear accordion list because there are
   only 8 items and no real categories.

   Structure (top to bottom):
     .shipping-hero     full-width band, cream background. Mirrors
                        the FAQ + Contact-us hero so the whole
                        static-page family reads as siblings.
     .shipping-main     full-width content area. Inside it,
                        .shipping-container caps column width.
     .shipping-list     accordion list — native <details>/<summary>
                        for keyboard + screen-reader accessibility
                        out of the box.

   Breakpoints: 768 (tablet) / 960 (desktop) / 1280 (lg) / 1600 (xl)
   — matches the rest of the site.
   ====================================================== */

/* ---- Shared container ---- */
.shipping-container[b-e2scsbo1hq] {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 768px) {
    .shipping-container[b-e2scsbo1hq] { padding: 0 32px; }
}

@media (min-width: 960px) {
    .shipping-container[b-e2scsbo1hq] { max-width: 920px; padding: 0 40px; }
}

@media (min-width: 1600px) {
    .shipping-container[b-e2scsbo1hq] { max-width: 1080px; }
}

/* ======================================================
   Hero — mirrors the FAQ + Contact-us hero. No inner container:
   horizontal padding is applied directly so the headline left-
   aligns flush to the page margin on mobile and centers within
   the band on tablet and up.
   ====================================================== */
.shipping-hero[b-e2scsbo1hq] {
    background: #F6F2EC;
    padding: 48px 20px;
}

.shipping-hero-title[b-e2scsbo1hq] {
    font-family: 'STIX Two Text', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #003b3c;
    margin: 0 0 12px;
}

.shipping-hero-subtitle[b-e2scsbo1hq] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #003b3c;
    margin: 0;
    max-width: 800px;
}

.shipping-hero-link[b-e2scsbo1hq] {
    color: #003b3c;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 120ms ease;
}

.shipping-hero-link:hover[b-e2scsbo1hq],
.shipping-hero-link:focus-visible[b-e2scsbo1hq] {
    color: #009296;
}

@media (min-width: 768px) {
    .shipping-hero[b-e2scsbo1hq] { text-align: center; }
    .shipping-hero-subtitle[b-e2scsbo1hq] { margin: 0 auto; }
}

@media (min-width: 960px) {
    .shipping-hero[b-e2scsbo1hq] { padding: 64px 40px; }
    .shipping-hero-title[b-e2scsbo1hq] { font-size: 42px; }
    .shipping-hero-subtitle[b-e2scsbo1hq] { font-size: 18px; }
}

@media (min-width: 1280px) {
    .shipping-hero[b-e2scsbo1hq] { padding: 80px 40px; }
    .shipping-hero-title[b-e2scsbo1hq] { font-size: 54px; margin: 0 0 16px; }
}

@media (min-width: 1600px) {
    .shipping-hero[b-e2scsbo1hq] { padding: 96px 40px; }
    .shipping-hero-title[b-e2scsbo1hq] { font-size: 72px; }
    .shipping-hero-subtitle[b-e2scsbo1hq] { font-size: 20px; }
}

/* ======================================================
   Main content area
   ====================================================== */
.shipping-main[b-e2scsbo1hq] {
    padding: 48px 0 96px;
}

@media (min-width: 768px) {
    .shipping-main[b-e2scsbo1hq] { padding: 56px 0 112px; }
}

@media (min-width: 960px) {
    .shipping-main[b-e2scsbo1hq] { padding: 64px 0 128px; }
}

/* ======================================================
   Accordion list (questions + answers) — same treatment as FAQ
   ====================================================== */
.shipping-list[b-e2scsbo1hq] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #D9E2E2;
}

.shipping-item[b-e2scsbo1hq] {
    border-bottom: 1px solid #D9E2E2;
}

.shipping-item details[b-e2scsbo1hq] {
    margin: 0;
}

/* Question row (the <summary>) — strip the default disclosure triangle
   and add our own +/- glyph aligned to the right. */
.shipping-question-row[b-e2scsbo1hq] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #003b3c;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.shipping-question-row[b-e2scsbo1hq]::-webkit-details-marker {
    display: none;
}

.shipping-question-text[b-e2scsbo1hq] {
    flex: 1;
}

/* True minus glyph (U+2212) so the "−" visually matches the "+" weight,
   instead of the much-narrower hyphen-minus. */
.shipping-question-row[b-e2scsbo1hq]::after {
    content: "+";
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009296;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}

.shipping-item details[open] .shipping-question-row[b-e2scsbo1hq]::after {
    content: "\2212";
}

@media (hover: hover) {
    .shipping-question-row:hover[b-e2scsbo1hq] {
        color: #009296;
    }
}

.shipping-question-row:focus-visible[b-e2scsbo1hq] {
    outline: 2px solid #009296;
    outline-offset: 4px;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .shipping-question-row[b-e2scsbo1hq] {
        font-size: 17px;
        padding: 22px 0;
    }

    .shipping-question-row[b-e2scsbo1hq]::after {
        width: 28px;
        height: 28px;
        font-size: 32px;
    }
}

@media (min-width: 960px) {
    .shipping-question-row[b-e2scsbo1hq] {
        font-size: 18px;
        padding: 24px 0;
    }
}

/* ======================================================
   Answer body — paragraphs, lists, links

   All children of .shipping-answer are rendered via MarkupString
   (raw HTML), which Blazor's scoped CSS does NOT reach into. We
   have to use ::deep for every answer-body selector below —
   without it, MudBlazor's global `* { padding: 0 }` reset wins
   and lists/etc render unstyled.
   ====================================================== */
.shipping-answer[b-e2scsbo1hq] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #003b3c;
    /* Right padding so answer text doesn't run under the +/- toggle column */
    padding: 0 44px 24px 0;
}

.shipping-answer[b-e2scsbo1hq]  p {
    margin: 0 0 14px;
}

.shipping-answer[b-e2scsbo1hq]  p:last-child {
    margin-bottom: 0;
}

.shipping-answer[b-e2scsbo1hq]  ul,
.shipping-answer[b-e2scsbo1hq]  ol {
    margin: 0 0 14px;
    padding-left: 24px;
}

.shipping-answer[b-e2scsbo1hq]  ul {
    list-style: disc;
}

.shipping-answer[b-e2scsbo1hq]  ol {
    list-style: decimal;
}

.shipping-answer[b-e2scsbo1hq]  ul:last-child,
.shipping-answer[b-e2scsbo1hq]  ol:last-child {
    margin-bottom: 0;
}

.shipping-answer[b-e2scsbo1hq]  li {
    margin-bottom: 6px;
}

.shipping-answer[b-e2scsbo1hq]  li:last-child {
    margin-bottom: 0;
}

.shipping-answer[b-e2scsbo1hq]  li::marker {
    color: #009296;
}

.shipping-answer[b-e2scsbo1hq]  .shipping-link {
    color: #003b3c;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 120ms ease;
    word-break: break-word;
}

.shipping-answer[b-e2scsbo1hq]  .shipping-link:hover,
.shipping-answer[b-e2scsbo1hq]  .shipping-link:focus-visible {
    color: #009296;
}

.shipping-answer[b-e2scsbo1hq]  strong {
    font-weight: 600;
}

.shipping-answer[b-e2scsbo1hq]  em {
    font-style: italic;
}

@media (min-width: 768px) {
    .shipping-answer[b-e2scsbo1hq] {
        font-size: 16px;
        padding: 0 56px 28px 0;
    }
}

@media (min-width: 960px) {
    .shipping-answer[b-e2scsbo1hq] {
        padding: 0 64px 32px 0;
    }
}

/* ======================================================
   Print stylesheet — open every accordion so all content prints,
   strip page chrome, and tighten type for a single-column page.
   ====================================================== */
@media print {
    .shipping-hero[b-e2scsbo1hq] {
        background: transparent;
        padding: 0 0 24px;
        text-align: left;
    }

    .shipping-hero-title[b-e2scsbo1hq] { font-size: 28px; }
    .shipping-hero-subtitle[b-e2scsbo1hq] { font-size: 12px; }

    .shipping-main[b-e2scsbo1hq] { padding: 0; }

    /* Force every accordion open in print — the browser hides closed
       <details> children via internal styles, so we override them. */
    .shipping-item details > *:not(summary)[b-e2scsbo1hq] {
        display: block !important;
    }

    .shipping-question-row[b-e2scsbo1hq] {
        padding: 12px 0 4px;
        font-size: 14px;
    }

    .shipping-question-row[b-e2scsbo1hq]::after {
        display: none;
    }

    .shipping-answer[b-e2scsbo1hq] {
        padding: 0 0 16px;
        font-size: 11px;
        line-height: 1.5;
    }

    .shipping-answer[b-e2scsbo1hq]  .shipping-link {
        color: #000;
        text-decoration: underline;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/Terms.razor.rz.scp.css */
/* ======================================================
   Terms of Use — scoped styles.

   Structure (top to bottom):
     .legal-hero        full-width band, cream background. Mirrors
                        the FAQ + Contact-us hero exactly so all
                        three static-page banners read as siblings.
     .legal-main        full-width content area. Inside it,
                        .legal-container caps the column width and
                        centers the content.
     .legal-toc         table-of-contents box at the top of the
                        content. Lets users one-click into any
                        section — the convention for long legal
                        documents (vs FAQ-style accordions, which
                        hide compliance-relevant text behind clicks).
     .legal-section     a single section: h2 + body, separated from
                        the next by a thin divider.
     .legal-body        the answer body. Uses ::deep for child
                        elements because content is rendered via
                        MarkupString (raw HTML), which scoped CSS
                        does NOT reach into by default.

   Breakpoints: 768 (tablet) / 960 (desktop) / 1280 (lg) / 1600 (xl)
   — matches the rest of the site.
   ====================================================== */

/* ---- Shared container ---- */
.legal-container[b-ugmu9ylw0a] {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 768px) {
    .legal-container[b-ugmu9ylw0a] { padding: 0 32px; }
}

@media (min-width: 960px) {
    .legal-container[b-ugmu9ylw0a] { max-width: 920px; padding: 0 40px; }
}

@media (min-width: 1600px) {
    .legal-container[b-ugmu9ylw0a] { max-width: 1080px; }
}

/* ======================================================
   Hero — mirrors the FAQ + Contact-us hero. No inner container:
   horizontal padding is applied directly so the headline left-
   aligns flush to the page margin on mobile and centers within
   the band on tablet and up.
   ====================================================== */
.legal-hero[b-ugmu9ylw0a] {
    background: #F6F2EC;
    padding: 48px 20px;
}

.legal-hero-title[b-ugmu9ylw0a] {
    font-family: 'STIX Two Text', serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #003b3c;
    margin: 0 0 12px;
}

.legal-hero-subtitle[b-ugmu9ylw0a] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #003b3c;
    margin: 0;
    max-width: 800px;
}

@media (min-width: 768px) {
    .legal-hero[b-ugmu9ylw0a] { text-align: center; }
    .legal-hero-subtitle[b-ugmu9ylw0a] { margin: 0 auto; }
}

@media (min-width: 960px) {
    .legal-hero[b-ugmu9ylw0a] { padding: 64px 40px; }
    .legal-hero-title[b-ugmu9ylw0a] { font-size: 42px; }
    .legal-hero-subtitle[b-ugmu9ylw0a] { font-size: 18px; }
}

@media (min-width: 1280px) {
    .legal-hero[b-ugmu9ylw0a] { padding: 80px 40px; }
    .legal-hero-title[b-ugmu9ylw0a] { font-size: 54px; margin: 0 0 16px; }
}

@media (min-width: 1600px) {
    .legal-hero[b-ugmu9ylw0a] { padding: 96px 40px; }
    .legal-hero-title[b-ugmu9ylw0a] { font-size: 72px; }
    .legal-hero-subtitle[b-ugmu9ylw0a] { font-size: 20px; }
}

/* ======================================================
   Main content area
   ====================================================== */
.legal-main[b-ugmu9ylw0a] {
    padding: 40px 0 80px;
}

@media (min-width: 768px) {
    .legal-main[b-ugmu9ylw0a] { padding: 48px 0 96px; }
}

@media (min-width: 960px) {
    .legal-main[b-ugmu9ylw0a] { padding: 56px 0 112px; }
}

/* ======================================================
   Table of contents
   Cream box, multi-column on tablet and up so the 18-item list
   doesn't dominate the page before the first section.
   ====================================================== */
.legal-toc[b-ugmu9ylw0a] {
    background: #F6F2EC;
    border-radius: 10px;
    padding: 24px;
    margin: 0 0 48px;
}

.legal-toc-title[b-ugmu9ylw0a] {
    font-family: 'STIX Two Text', serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    color: #003b3c;
    margin: 0 0 16px;
}

.legal-toc-list[b-ugmu9ylw0a] {
    list-style: decimal;
    padding-left: 24px;
    margin: 0;
    /* CSS column-count flows the list across multiple columns; column-gap
       sets the visual gutter between them. column-fill: balance keeps the
       columns the same height so the box has a clean rectangular shape.
       Stays at 2 columns max because narrower columns force long titles
       like "Product Purchases and Prohibition of Unauthorized Reselling"
       to wrap onto 3 lines, which makes the whole TOC feel crammed. */
    column-count: 1;
    column-gap: 32px;
    column-fill: balance;
}

.legal-toc-list li[b-ugmu9ylw0a] {
    /* break-inside avoids a list item splitting across two columns. */
    break-inside: avoid;
    margin: 0 0 14px;
    padding-left: 6px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

.legal-toc-list li:last-child[b-ugmu9ylw0a] {
    margin-bottom: 0;
}

.legal-toc-list li[b-ugmu9ylw0a]::marker {
    color: #009296;
    font-weight: 600;
}

.legal-toc-link[b-ugmu9ylw0a] {
    color: #003b3c;
    text-decoration: none;
    transition: color 120ms ease;
}

@media (hover: hover) {
    .legal-toc-link:hover[b-ugmu9ylw0a] { color: #009296; }
}

.legal-toc-link:focus-visible[b-ugmu9ylw0a] {
    outline: 2px solid #009296;
    outline-offset: 2px;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .legal-toc[b-ugmu9ylw0a] { padding: 32px 36px; margin-bottom: 56px; }
    .legal-toc-title[b-ugmu9ylw0a] { font-size: 24px; margin-bottom: 20px; }
    .legal-toc-list[b-ugmu9ylw0a] {
        column-count: 2;
        column-gap: 48px;
    }
    .legal-toc-list li[b-ugmu9ylw0a] { font-size: 16px; margin-bottom: 16px; }
}

@media (min-width: 960px) {
    .legal-toc[b-ugmu9ylw0a] { padding: 40px 48px; margin-bottom: 64px; }
    .legal-toc-title[b-ugmu9ylw0a] { font-size: 26px; }
    .legal-toc-list[b-ugmu9ylw0a] { column-gap: 64px; }
    .legal-toc-list li[b-ugmu9ylw0a] { margin-bottom: 18px; }
}

/* ======================================================
   Sections — plain h2 + body, divider line between
   ====================================================== */
.legal-section + .legal-section[b-ugmu9ylw0a] {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #D9E2E2;
}

.legal-section[b-ugmu9ylw0a] {
    /* MainLayout sets `html { scroll-padding-top: var(--header-h) }` so
       anchor jumps already clear the page header; add a bit more so the
       section title doesn't sit flush against the header's bottom edge
       after a TOC click. */
    scroll-margin-top: 40px;
}

/* :target is set on whichever section the URL hash matches. After a TOC
   click or a deep-link land, the section title flashes brand teal then
   fades back — confirms "you landed here" without permanent visual debt. */
.legal-section:target .legal-section-title[b-ugmu9ylw0a] {
    animation: legal-target-flash-b-ugmu9ylw0a 1.6s ease-out;
}

@keyframes legal-target-flash-b-ugmu9ylw0a {
    0%, 40% { color: #009296; }
    100%    { color: #003b3c; }
}

@media (prefers-reduced-motion: reduce) {
    .legal-section:target .legal-section-title[b-ugmu9ylw0a] {
        animation: none;
    }
}

.legal-section-title[b-ugmu9ylw0a] {
    font-family: 'STIX Two Text', serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #003b3c;
    margin: 0 0 16px;
}

@media (min-width: 768px) {
    .legal-section + .legal-section[b-ugmu9ylw0a] { margin-top: 48px; padding-top: 48px; }
    .legal-section-title[b-ugmu9ylw0a] { font-size: 30px; margin: 0 0 18px; }
}

@media (min-width: 960px) {
    .legal-section + .legal-section[b-ugmu9ylw0a] { margin-top: 56px; padding-top: 56px; }
    .legal-section-title[b-ugmu9ylw0a] { font-size: 34px; margin: 0 0 20px; }
}

/* ======================================================
   Body text — paragraphs, lists, links

   All children of .legal-body are rendered via MarkupString (raw HTML),
   which Blazor's scoped CSS does NOT reach into. We have to use ::deep
   for every body-text selector below — without it, MudBlazor's global
   `* { padding: 0 }` reset wins and lists/etc render unstyled.
   ====================================================== */
.legal-body[b-ugmu9ylw0a] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #003b3c;
}

.legal-body[b-ugmu9ylw0a]  p {
    margin: 0 0 14px;
}

.legal-body[b-ugmu9ylw0a]  p:last-child {
    margin-bottom: 0;
}

/* Lists: bullets/numbers/roman numerals sit in their own gutter. The
   padding-left needs to be wide enough that the marker stays inside
   the body's visible content area. */
.legal-body[b-ugmu9ylw0a]  ul,
.legal-body[b-ugmu9ylw0a]  ol {
    margin: 0 0 14px;
    padding-left: 28px;
}

.legal-body[b-ugmu9ylw0a]  ul {
    list-style: disc;
}

.legal-body[b-ugmu9ylw0a]  ol {
    list-style: decimal;
}

/* ol type="i" — used for the Unauthorized Reselling clauses so they
   render as i, ii, iii rather than 1, 2, 3. */
.legal-body[b-ugmu9ylw0a]  ol[type="i"] {
    list-style: lower-roman;
}

.legal-body[b-ugmu9ylw0a]  ul:last-child,
.legal-body[b-ugmu9ylw0a]  ol:last-child {
    margin-bottom: 0;
}

.legal-body[b-ugmu9ylw0a]  li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.legal-body[b-ugmu9ylw0a]  li:last-child {
    margin-bottom: 0;
}

.legal-body[b-ugmu9ylw0a]  li::marker {
    color: #009296;
}

.legal-body[b-ugmu9ylw0a]  .legal-link {
    color: #003b3c;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 120ms ease;
}

.legal-body[b-ugmu9ylw0a]  .legal-link:hover,
.legal-body[b-ugmu9ylw0a]  .legal-link:focus-visible {
    color: #009296;
}

.legal-body[b-ugmu9ylw0a]  strong {
    font-weight: 600;
}

.legal-body[b-ugmu9ylw0a]  em {
    font-style: italic;
}

@media (min-width: 768px) {
    .legal-body[b-ugmu9ylw0a] { font-size: 16px; }
}

/* ======================================================
   Print stylesheet — legal docs sometimes get printed or saved
   as PDF. Strip page chrome (hero band, TOC), keep all sections
   visible in a clean single-column layout.
   ====================================================== */
@media print {
    .legal-hero[b-ugmu9ylw0a] {
        background: transparent;
        padding: 0 0 24px;
        text-align: left;
    }

    .legal-hero-title[b-ugmu9ylw0a] { font-size: 28px; }
    .legal-hero-subtitle[b-ugmu9ylw0a] { font-size: 12px; }

    .legal-toc[b-ugmu9ylw0a] { display: none; }

    .legal-main[b-ugmu9ylw0a] { padding: 0; }

    .legal-section + .legal-section[b-ugmu9ylw0a] {
        margin-top: 24px;
        padding-top: 24px;
    }

    .legal-section-title[b-ugmu9ylw0a] { font-size: 18px; }

    .legal-body[b-ugmu9ylw0a] {
        font-size: 11px;
        line-height: 1.5;
    }

    .legal-body[b-ugmu9ylw0a]  .legal-link {
        color: #000;
        text-decoration: underline;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/VitaminCalculator.razor.rz.scp.css */
/* ======================================================
   Vitamin Calculator — scoped
   Selection screen + full-screen comparison modal.
   Breakpoints: ≤959 mobile | 960-1279 tablet | 1280-1599 lg | 1600+ xl
   ====================================================== */

.vc-page[b-la869nh4yg] {
    padding: 0 40px 120px;                     /* extra bottom padding leaves room for the FAB */
    font-family: Inter, sans-serif;
    color: #003b3c;
}

/* Loading state: reserves vertical space so the footer stays pinned at the
   bottom of the viewport while product data fetches. A small teal ring
   spinner centered inside. Reversible — deleted the moment _isLoading
   flips false. */
.vc-loading[b-la869nh4yg] {
    min-height: 60vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
}

.vc-loading[b-la869nh4yg]::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid #ebfafa;
    border-top-color: #009296;
    border-radius: 50%;
    animation: vc-spin-b-la869nh4yg 0.8s linear infinite;
}

@keyframes vc-spin-b-la869nh4yg {
    to { transform: rotate(360deg); }
}

/* ======================================================
   A-Z nav — inline (in flow under the banner)
   ====================================================== */
.vc-nav[b-la869nh4yg] {
    background: #fff;
    padding: 16px 40px;
    margin: 0 -40px;
}

/* Horizontal scrollable letter row */
.vc-letters[b-la869nh4yg] {
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vc-letters[b-la869nh4yg]::-webkit-scrollbar { display: none; }

.vc-letter[b-la869nh4yg] {
    flex: 0 0 auto;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f6f2ec;
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vc-letter:hover[b-la869nh4yg] {
    background: #e0ece8;
    color: #003b3c;
}

.vc-letter.is-active[b-la869nh4yg] {
    background: #009296;
    color: #fff;
}

.vc-letter:focus-visible[b-la869nh4yg] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

.vc-letter[disabled][b-la869nh4yg] {
    opacity: 0.35;
    cursor: not-allowed;
}

.vc-letter[disabled]:hover[b-la869nh4yg] {
    background: #f6f2ec;
    color: #003b3c;
}

/* ======================================================
   A-Z nav — fixed twin (shown once inline scrolls behind header)
   Matches Ingredients: no box-shadow, pure opacity fade, same padding.
   ====================================================== */
.vc-nav--stuck[b-la869nh4yg] {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 90;                               /* below fixed page header (100) */
    margin: 0;
    padding: 16px 40px;
    background: #fff;
    /* Fast transition prevents the inline-still-visible-while-stuck-fades-in
       overlap that reads as a small "jump" during the swap. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.08s ease, visibility 0.08s;
}

.vc-nav--stuck.is-visible[b-la869nh4yg] {
    opacity: 1;
    visibility: visible;
}

/* ======================================================
   Product list
   ====================================================== */
.vc-list[b-la869nh4yg] {
    padding: 16px 0 0;
}

.vc-section[b-la869nh4yg] {
    padding: 32px 0 24px;
    scroll-margin-top: calc(var(--header-h) + 80px);
}

.vc-section + .vc-section[b-la869nh4yg] {
    border-top: 1px solid #e7ece9;
}

.vc-section-title[b-la869nh4yg] {
    font-family: 'STIX Two Text', serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.44px;
    color: #003b3c;
    margin: 0 0 24px;
}

.vc-items[b-la869nh4yg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 4px;
}

/* Product selection row — clickable label. Whole row is the tap target;
   no visible checkbox (the native <input> stays in the DOM for keyboard /
   screen-reader support, visually hidden). Selection is indicated by a 2px
   teal outline + a checkmark badge pinned to the right of the row. */
.vc-item[b-la869nh4yg] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: 10px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 16px;
    color: #003b3c;
    transition: background-color 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease;
}

/* Selected-state badge: small teal circle with a white checkmark, pushed
   to the right side of the row via margin-left:auto. margin-right adds
   breathing room from the card's right edge so it doesn't feel crammed.
   Opacity:0 until the row is selected. */
.vc-item[b-la869nh4yg]::after {
    content: '';
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #009296 url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / 12px 12px no-repeat;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.vc-item.is-checked[b-la869nh4yg]::after {
    opacity: 1;
}

.vc-item:hover[b-la869nh4yg] {
    background: #ebfafa;
}

/* Selected: same light-teal background as hover so the outline + checkmark
   are the primary signals. outline (not border) avoids layout shift on
   toggle because it sits outside the box model. outline-offset: -2px
   pulls it inside the row's edge so it reads as a highlight rather than
   a floating ring. */
.vc-item.is-checked[b-la869nh4yg] {
    background: #ebfafa;
    outline: 2px solid #009296;
    outline-offset: -2px;
}

.vc-item input[type="checkbox"][b-la869nh4yg] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Keyboard focus ring on the whole row. :has(:focus-visible) fires ONLY
   when the browser infers keyboard navigation — mouse clicks won't trigger
   the ring (which would otherwise appear as a stray soft-teal line after
   every selection click). Uses box-shadow so it stacks cleanly with the
   selected-state outline for keyboard users who tab onto selected rows. */
.vc-item:has(:focus-visible)[b-la869nh4yg] {
    box-shadow: 0 0 0 3px rgba(0, 146, 150, 0.22);
}

.vc-item-label[b-la869nh4yg] {
    line-height: 1.4;
}

/* Product thumbnail between checkbox and name. Square aspect ratio,
   object-fit:cover keeps product bottles centered regardless of source
   image aspect. Cream background matches the site's warm neutral so the
   placeholder fallback doesn't pop. loading="lazy" on the <img> defers
   actual image download until near-viewport (browser-native lazy load). */
.vc-item-thumb[b-la869nh4yg] {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    background: #f6f2ec;
}

/* ======================================================
   Action bar — always visible, fixed to bottom of viewport.
   Contains the FAB (3 states) + "Clear all" when ≥1 selected.
   Wrapper has pointer-events: none so clicks pass through the gap
   between buttons; individual buttons re-enable pointer-events.
   ====================================================== */
.vc-actions[b-la869nh4yg] {
    position: fixed;
    bottom: 32px;
    left: 0;
    right: 0;
    z-index: 80;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    pointer-events: none;
}

.vc-actions > *[b-la869nh4yg] { pointer-events: auto; }

/* Secondary action — outlined pill next to the FAB */
.vc-clear[b-la869nh4yg] {
    padding: 12px 20px;
    border: 1px solid #003b3c;
    border-radius: 999px;
    background: #fff;
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.vc-clear:hover[b-la869nh4yg] { background: #f6f2ec; }

.vc-clear:focus-visible[b-la869nh4yg] {
    outline: 2px solid #009296;
    outline-offset: 2px;
}

/* Primary action — FAB. Base styles shared across all three states. */
.vc-fab[b-la869nh4yg] {
    padding: 16px 36px;
    border: none;
    border-radius: 999px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease,
                transform 0.15s ease, box-shadow 0.2s ease;
}

.vc-fab:focus-visible[b-la869nh4yg] {
    outline: 3px solid rgba(0, 146, 150, 0.3);
    outline-offset: 3px;
}

/* State 0 — "Select 2+ to compare". Muted, informational. */
.vc-fab--empty[b-la869nh4yg] {
    background: #f6f2ec;
    color: #7a8a8a;
    box-shadow: none;
    cursor: not-allowed;
}

/* State 1 — "Add 1 more to compare". Darker, nudges toward action. */
.vc-fab--partial[b-la869nh4yg] {
    background: #003b3c;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 59, 60, 0.18);
    cursor: not-allowed;
}

/* State 2+ — "Compare (N)". Primary teal CTA. */
.vc-fab--ready[b-la869nh4yg] {
    background: #009296;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 50, 52, 0.25);
    cursor: pointer;
}

.vc-fab--ready:hover[b-la869nh4yg] {
    background: #00787b;
    transform: translateY(-2px);
}

/* ======================================================
   Modal — full-screen comparison
   ====================================================== */
.vc-modal[b-la869nh4yg] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.vc-modal-grid[b-la869nh4yg] {
    display: grid;
    grid-template-columns: 480px minmax(0, 1fr);
    min-height: 100vh;
}

/* ---- Left panel (totals / nutrition label) ---- */
/* Padding-right is 0 so the darker value-column band (applied directly to
   .vc-totals-cols-header and .vc-totals-row-cols) can extend flush to
   the aside's right edge. */
.vc-modal-totals[b-la869nh4yg] {
    position: relative;
    padding: 32px 0 60px 32px;
    background: #ebfafa;
    border-right: 1px solid #d4edeb;
}

.vc-modal-close[b-la869nh4yg] {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.vc-modal-close:hover[b-la869nh4yg] { background: rgba(0, 59, 60, 0.08); }
.vc-modal-close:focus-visible[b-la869nh4yg] { outline: 2px solid #009296; outline-offset: 2px; }

/* Header zone fills 360px total. Title + Copy Link sit at the top;
   the column-labels row is the last child and uses margin-top:auto to
   pin itself to the bottom of the 360px box. Its border-bottom (the
   thick divider) lands at the same Y as .vc-prod-card-header's
   border-bottom on the right, which is what makes everything below
   line up row-for-row. */
.vc-modal-totals-header[b-la869nh4yg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 360px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.vc-modal-title[b-la869nh4yg] {
    font-family: 'STIX Two Text', serif;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.96px;
    color: #003b3c;
    margin: 0 0 20px;
}

.vc-copy-link[b-la869nh4yg] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid #009296;
    border-radius: 999px;
    background: transparent;
    color: #009296;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vc-copy-link:hover[b-la869nh4yg] {
    background: #009296;
    color: #fff;
}

/* Column labels row — pinned to the bottom of the 360px header via
   margin-top:auto, so the thick-divider border-bottom lands exactly
   at the same Y as .vc-prod-card-header's border on the right. The
   darker teal band starts here and continues down through every row
   (each .vc-totals-row-cols also has this bg), producing a continuous
   vertical band with no gap. */
.vc-totals-cols-header[b-la869nh4yg] {
    display: grid;
    grid-template-columns: 100px 100px;
    gap: 16px;
    height: 44px;
    padding: 0 32px 0 20px;
    background: #ccece7;
    border-bottom: 2px solid #003b3c;
    align-items: center;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #003b3c;
    text-align: left;
    line-height: 1.2;
    box-sizing: border-box;
    margin-top: auto;
    margin-left: auto;
}

.vc-totals-rows[b-la869nh4yg] {
    display: flex;
    flex-direction: column;
}

.vc-totals-row[b-la869nh4yg] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    align-items: stretch;
    min-height: 42px;
    padding: 0;
    border-bottom: 1px solid rgba(0, 59, 60, 0.12);
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #003b3c;
}

.vc-totals-row-label[b-la869nh4yg] {
    font-weight: 500;
    text-align: right;
    padding: 10px 16px 10px 0;
    align-self: center;
}

.vc-totals-row-cols[b-la869nh4yg] {
    display: grid;
    grid-template-columns: 100px 100px;
    gap: 16px;
    padding: 0 32px 0 20px;
    background: #ccece7;
    align-items: center;
    text-align: left;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

/* ---- Right panel (product columns) ---- */
.vc-modal-products[b-la869nh4yg] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vc-modal-products-row[b-la869nh4yg] {
    display: flex;
    gap: 0;
    min-height: 100%;
    align-items: flex-start;
}

.vc-prod-card[b-la869nh4yg] {
    flex: 0 0 240px;
    padding: 32px 20px 24px;
    border-right: 1px solid #e7ece9;
    display: flex;
    flex-direction: column;
}

.vc-prod-card-header[b-la869nh4yg] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 360px;
    padding-bottom: 12px;
    margin-bottom: 0;
    border-bottom: 2px solid #003b3c;
    box-sizing: border-box;
}

.vc-prod-img-wrap[b-la869nh4yg] {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 20px;
    background: #f6f2ec;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.vc-prod-remove[b-la869nh4yg] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 59, 60, 0.12);
    transition: background-color 0.15s ease;
}

.vc-prod-remove:hover[b-la869nh4yg] { background: #ebfafa; }

.vc-prod-img[b-la869nh4yg] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.vc-prod-name[b-la869nh4yg] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #003b3c;
    text-align: left;
    margin: 16px 0 12px;
    min-height: 42px;
    max-height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vc-capsule[b-la869nh4yg] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
}

.vc-capsule-ctrl[b-la869nh4yg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px solid #d9e2e2;
    border-radius: 999px;
    padding: 2px;
    box-sizing: border-box;
}

.vc-capsule-btn[b-la869nh4yg] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.vc-capsule-btn:hover[b-la869nh4yg] { background: #f6f2ec; }

.vc-capsule-count[b-la869nh4yg] {
    min-width: 32px;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #003b3c;
}

.vc-capsule-label[b-la869nh4yg] {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #7a8a8a;
    margin: 2px 0 0;
    text-align: center;
}

/* Nutrition value rows — each cell mirrors the totals-row layout on the left */
.vc-prod-rows[b-la869nh4yg] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.vc-prod-row[b-la869nh4yg] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(0, 59, 60, 0.12);
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #003b3c;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.vc-prod-cta[b-la869nh4yg] {
    padding-top: 24px;
    display: flex;
}

.vc-prod-view[b-la869nh4yg] {
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 999px;
    background: #009296;
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.vc-prod-view:hover[b-la869nh4yg] {
    background: #007b7f;
}

/* Add-more column */
.vc-add-more[b-la869nh4yg] {
    flex: 0 0 140px;
    padding: 90px 20px 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.vc-add-more-btn[b-la869nh4yg] {
    width: 72px;
    height: 72px;
    border: 2px dashed #b4c2c2;
    border-radius: 50%;
    background: #fff;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.vc-add-more-btn:hover[b-la869nh4yg] {
    border-color: #009296;
    background: #f6f2ec;
}

/* ======================================================
   Lg: 1280–1599px
   ====================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
    .vc-section-title[b-la869nh4yg] { font-size: 54px; letter-spacing: -1.08px; }
    .vc-modal-grid[b-la869nh4yg] { grid-template-columns: 440px minmax(0, 1fr); }
}

/* ======================================================
   Tablet: 960-1279px
   ====================================================== */
@media (min-width: 960px) and (max-width: 1279px) {
    .vc-section-title[b-la869nh4yg] { font-size: 42px; letter-spacing: -0.84px; }
    .vc-items[b-la869nh4yg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
    .vc-modal-grid[b-la869nh4yg] { grid-template-columns: 340px minmax(0, 1fr); }
}

/* ======================================================
   Mobile: ≤959px
   ====================================================== */
@media (max-width: 959px) {
    .vc-page[b-la869nh4yg] { padding: 0 20px 120px; }

    .vc-nav[b-la869nh4yg] {
        position: relative;                    /* anchor for the scrollable-edge fade pseudo */
        padding: 12px 20px;
        margin: 0 -20px;
    }

    .vc-letter[b-la869nh4yg] {
        min-width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .vc-nav--stuck[b-la869nh4yg] {
        /* position MUST be re-declared here. Mobile .vc-nav above sets
           position:relative (to anchor the right-edge fade), and because the
           stuck twin has both classes (vc-nav vc-nav--stuck), CSS cascade
           source-order makes .vc-nav (relative) win over the default
           .vc-nav--stuck (fixed) — meaning on mobile the stuck twin would
           otherwise render in document flow instead of pinned to the
           viewport. Re-stating position/top/left/right here wins cascade. */
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        margin: 0;
        padding: 12px 20px;
    }

    /* Right-edge fade: indicates the A-Z bar is horizontally scrollable.
       Applied to both the inline and the stuck nav on mobile. Matches the
       Ingredients page pattern. */
    .vc-nav[b-la869nh4yg]::after,
    .vc-nav--stuck[b-la869nh4yg]::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 32px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
        z-index: 1;
    }

    .vc-section[b-la869nh4yg] {
        padding: 24px 0 16px;
        scroll-margin-top: calc(var(--header-h) + 64px);
    }

    .vc-section-title[b-la869nh4yg] {
        font-size: 30px;
        letter-spacing: -0.6px;
        margin: 0 0 12px;
    }

    .vc-items[b-la869nh4yg] {
        grid-template-columns: 1fr;
    }

    /* --- Modal goes single-column on mobile --- */
    .vc-modal-grid[b-la869nh4yg] {
        grid-template-columns: 1fr;
    }

    .vc-modal-totals[b-la869nh4yg] {
        padding: 32px 20px 40px;
        border-right: none;
        border-bottom: 1px solid #e0d9cc;
    }

    .vc-modal-title[b-la869nh4yg] { font-size: 36px; letter-spacing: -0.72px; }

    .vc-prod-card[b-la869nh4yg] { flex: 0 0 220px; padding: 24px 16px 20px; }

    .vc-add-more[b-la869nh4yg] { flex: 0 0 120px; padding-top: 70px; }

    .vc-actions[b-la869nh4yg] {
        bottom: 16px;
        gap: 10px;
    }

    .vc-fab[b-la869nh4yg] {
        padding: 14px 24px;
        font-size: 13px;
    }

    .vc-clear[b-la869nh4yg] {
        padding: 10px 16px;
        font-size: 12px;
    }
}