/* _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-card-actions-shop[b-iyuw9ayelx] {
    display: flex;
    justify-content: center; 
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

.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;
}

/* Compact variant — no image column, so the banner is a short text-only band
   (used when the image would only be a 'coming soon' placeholder). The full
   banner is ~24.6vw tall (1440:708 image on a half-width column); min-height
   16vw makes the compact band ~35% shorter, scaling with the viewport. Text
   is vertically centered within it (ch-inner already uses align-items:center). */
.ch--compact .ch-inner[b-3cydvruxt2] {
    grid-template-columns: 1fr;
    min-height: 16vw;
}

/* ---- 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;
    }

    /* Compact banner has no image column — so restore the cream band here
       (on mobile the tan normally comes from .ch-image-wrap). */
    .ch--compact[b-3cydvruxt2],
    .ch--compact .ch-text[b-3cydvruxt2] {
        background: #F6F2EC;
    }
}
/* _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-image-link[b-q4msg39uju] {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    border-radius: 12px;
    text-decoration: none;
}

.mfc-item-image-link .mfc-item-image[b-q4msg39uju] {
    display: block;
}

.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-name-link[b-q4msg39uju] {
    color: #003b3c;
    text-decoration: none;
}

@media (hover: hover) {
    .mfc-item-name-link:hover[b-q4msg39uju] {
        color: #003b3c;
        text-decoration: underline;
    }
}

.mfc-item-name-link:focus-visible[b-q4msg39uju] {
    color: #003b3c;
    text-decoration: underline;
}

.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;
    max-width: 100%;
    overflow: hidden;
}

.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;
    max-width: 220px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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; }
}

/* Promo code entry — same contract as Cart.razor (.cp-promo-*) and
   CheckoutOrderSummary (.promo-code-row / .applied-coupon-*). */
.mfc-promo-row[b-q4msg39uju] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mfc-promo-input[b-q4msg39uju] {
    flex: 1;
    min-width: 0;
    border: 1px solid #D9E2E2;
    border-radius: 8px;
    padding: 0 16px;
    height: 44px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #003b3c;
}

.mfc-promo-input:disabled[b-q4msg39uju] {
    background: #F5F9F9;
    color: #406c6d;
}

.mfc-promo-apply[b-q4msg39uju] {
    background: #003b3c;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 20px;
    height: 44px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 14px;
}

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

.mfc-promo-banner[b-q4msg39uju] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #E8F5F5;
    border: 1px solid #009296;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #003b3c;
}

.mfc-promo-banner-copy[b-q4msg39uju] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mfc-promo-blurb[b-q4msg39uju] {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #406c6d;
    white-space: pre-wrap;
}

.mfc-promo-remove[b-q4msg39uju] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #406c6d;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.mfc-promo-remove:hover:not(:disabled)[b-q4msg39uju] {
    background: rgba(0, 146, 150, 0.12);
    color: #003b3c;
}

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

.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;
}

.subscribe-klaviyo-desk[b-duhmnppl3v] {
    visibility: visible;
    display: block;
}

.subscribe-klaviyo-mobile[b-duhmnppl3v] {
    visibility: hidden;
    display: none;
}

/* ======================================================
   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; }

    .subscribe-klaviyo-desk[b-duhmnppl3v] {
        visibility: hidden;
        display: none;
    }

    .subscribe-klaviyo-mobile[b-duhmnppl3v] {
        visibility: visible;
        display: block;
    }

    .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%;
    }
}

/* logo (left) + social icons (right) share one row above the legal links */
.footer-brandrow[b-duhmnppl3v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.footer-social[b-duhmnppl3v] {
    display: flex;
    align-items: center;
    gap: 18px;
}

    .footer-social a[b-duhmnppl3v] {
        display: inline-flex;
        color: #fff;
        opacity: 0.9;
        transition: color .15s ease, opacity .15s ease;
    }

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

    .footer-social svg[b-duhmnppl3v] {
        display: block;
        width: 22px;
        height: 22px;
    }
/* _content/ProcapsMainSite/Components/Elements/MainMegaMenu.razor.rz.scp.css */
/* ======================================================
   Mega Menu — shop-by-category layout
   Desktop only (≥1280px). Mobile/tablet uses NavMenu.

   NOTE: Do NOT put custom properties on :root in this file.
   Blazor CSS isolation rewrites :root to :root[b-xxx], which
   never matches — variables go undefined and text inherits the
   header's white color (invisible on the white panel).
   ====================================================== */

/* ---- Trigger ---- */
.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 ---- */
.mm-overlay[b-x9ssxh0l8o] {
    --mm-cream: #F6F2EC; /* site-standard beige (matches category banner + cream bands) */
    --mm-cream-deep: #ebe4d8;
    --mm-teal: #009296;
    --mm-teal-dark: #003b3c;
    --mm-ink: #003b3c; /* brand ink — was #1a1a1a (muddy near-black) */
    --mm-muted: #5a6a6a;

    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;
    /* Bottom gap kept at ~12px so the panel reads as a floating overlay
       without wasting vertical space on smaller/laptop viewports. */
    max-height: min(720px, calc(100vh - var(--mm-top, 140px) - 12px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #003b3c; /* explicit fallback — do not inherit header white */
    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;
    min-height: 0;
    display: grid;
    /* Left rail widened so the beige extends further right, balancing the
       40px left inset on the category labels (even margins around them). */
    grid-template-columns: minmax(248px, 308px) minmax(0, 1.15fr) minmax(260px, 384px);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}

/* ======================================================
   LEFT — category rail
   ====================================================== */
.mm-left[b-x9ssxh0l8o] {
    background: var(--mm-cream);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px 0;
}

.mm-cat-list[b-x9ssxh0l8o] {
    display: flex;
    flex-direction: column;
}

.mm-cat[b-x9ssxh0l8o] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    /* Left inset = header's 40px gutter, so labels align under SHOP.
       Right inset stays tighter for the active-state arrow.
       Vertical padding kept ~10px so rows stay comfortable click targets. */
    padding: 10px 28px 10px 40px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--mm-teal-dark);
    transition: background 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
}

.mm-cat:hover[b-x9ssxh0l8o] {
    color: var(--mm-teal);
}

.mm-cat.is-active[b-x9ssxh0l8o] {
    background: #fff;
    color: var(--mm-ink);
    font-weight: 600;
}

.mm-cat-label[b-x9ssxh0l8o] {
    text-align: left;
}

.mm-cat-arrow[b-x9ssxh0l8o] {
    color: var(--mm-teal);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

/* ======================================================
   CENTER — category detail + footer links
   ====================================================== */
.mm-center[b-x9ssxh0l8o] {
    background: #fff;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 40px 48px 28px;
}

.mm-center-body[b-x9ssxh0l8o] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 560px;
}

.mm-eyebrow[b-x9ssxh0l8o] {
    margin: 0 0 16px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mm-teal);
}

.mm-heading[b-x9ssxh0l8o] {
    margin: 0 0 18px;
    font-family: 'STIX Two Text', Georgia, serif;
    font-size: clamp(32px, 2.8vw, 44px);
    font-weight: 500;
    line-height: 1.15;
    color: var(--mm-ink);
    letter-spacing: -0.01em;
}

.mm-desc[b-x9ssxh0l8o] {
    margin: 0 0 28px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--mm-ink);
    /* Keep the category blurb on a single line — the center column has
       ample width, so no wrapping. */
    white-space: nowrap;
}

.mm-cta[b-x9ssxh0l8o] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1.5px solid var(--mm-teal);
    border-radius: 999px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--mm-teal);
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mm-cta:hover[b-x9ssxh0l8o] {
    background: var(--mm-teal);
    color: #fff;
}

.mm-footer[b-x9ssxh0l8o] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding-top: 24px;
    margin-top: auto;
    border-top: 1px solid #e6e2dc;
}

.mm-footer-link[b-x9ssxh0l8o] {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--mm-teal);
    padding: 4px 0;
    transition: opacity 0.15s ease;
}

.mm-footer-link:hover[b-x9ssxh0l8o] {
    opacity: 0.75;
}

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

/* ======================================================
   RIGHT — Andrew's Pick / side image
   ====================================================== */
.mm-right[b-x9ssxh0l8o] {
    background: var(--mm-cream);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 40px 24px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mm-right .mm-eyebrow[b-x9ssxh0l8o] {
    margin-bottom: 14px;
}

.mm-pick-link[b-x9ssxh0l8o] {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.mm-pick-link:hover .mm-pick-title[b-x9ssxh0l8o],
.mm-pick-link:focus-visible .mm-pick-title[b-x9ssxh0l8o],
.mm-pick-link:hover .mm-pick-banner[b-x9ssxh0l8o],
.mm-pick-link:focus-visible .mm-pick-banner[b-x9ssxh0l8o] {
    color: var(--mm-teal);
}

.mm-pick-link:focus-visible[b-x9ssxh0l8o] {
    outline: 2px solid var(--mm-teal);
    outline-offset: 5px;
    border-radius: 4px;
}

/* Headline: serif, natural length (no line cap — it jumps a little between
   categories, which is intended), with an italic TEAL accent on the key phrase. */
.mm-pick-title[b-x9ssxh0l8o] {
    margin: 0;
    max-width: 24ch;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #003B3C;
    /* balance = evenly-weighted lines for the multi-line headlines. */
    text-wrap: balance;
    transition: color 0.18s ease;
    /* Reserve 2 lines so the price below stays put whether the title is
       one line or two. */
    min-height: calc(2 * 1.3em);
}

.mm-pick-title em[b-x9ssxh0l8o] {
    font-style: italic;
    font-weight: 400;
    color: #009296;
}

/* Square product frame (enlarged: 328px, 288px on laptops). */
.mm-pick-media[b-x9ssxh0l8o] {
    width: 328px;
    height: 328px;
    max-width: 100%;
    /* Negative bottom pulls the title up into the empty space beneath the
       (upward-shifted) bottle + the PNG's transparent bottom padding. */
    margin: 0 0 -24px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Clip the image's transparent top padding (below) without moving the
       box over the banner copy. */
    overflow: hidden;
}

.mm-pick-img[b-x9ssxh0l8o] {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
    /* Shift the bottle up within its (clipped) frame so it rises toward the
       copy — removes the empty space above the product, no text overlap. */
    margin-top: -20px;
}

.mm-pick-banner[b-x9ssxh0l8o] {
    margin: 0 0 4px;
    max-width: 28ch;
    font-family: 'STIX Two Text', Georgia, serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #003B3C;
    text-wrap: balance;
    /* Reserve 3 lines so the image below never shifts as the pitch copy
       varies in length (1–3 lines) between categories. (No flex here — the
       copy contains an <em>, which flex would split into separate items.) */
    min-height: calc(3 * 1.3em);
}

.mm-pick-banner[b-x9ssxh0l8o]  em,
.mm-pick-banner em[b-x9ssxh0l8o] {
    font-style: italic;
    font-weight: 400;
    color: #009296;
}

.mm-pick-placeholder[b-x9ssxh0l8o] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mm-cream-deep);
    border: 1px dashed #cfc6b8;
    border-radius: 8px;
    color: var(--mm-muted);
    font-family: Inter, sans-serif;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mm-pick-meta[b-x9ssxh0l8o] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mm-rating-row[b-x9ssxh0l8o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 10px;
}

.mm-review-count[b-x9ssxh0l8o] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1;
    color: var(--mm-muted);
}

.mm-pick-price[b-x9ssxh0l8o] {
    margin: 4px 0 0;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #003B3C;
}

/* Strikethrough "was" price — muted, line-through, smaller, and sits to
   the RIGHT of the current price. Mirrors the PDP compare-at rule computed
   in CollectionsCache. */
.mm-pick-price-was[b-x9ssxh0l8o] {
    color: var(--mm-muted);
    text-decoration: line-through;
    margin-left: 8px;
    font-size: 0.85em;
}

/* On sale, give the current price a touch more weight so it reads as
   the active number next to the struck original. */
.mm-pick-price-now.is-sale[b-x9ssxh0l8o] {
    font-weight: 600;
}

/* ======================================================
   Lg: 1280-1599 — slightly tighter
   ====================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
    .mm-inner[b-x9ssxh0l8o] {
        grid-template-columns: minmax(224px, 276px) minmax(0, 1.1fr) minmax(240px, 336px);
    }

    .mm-center[b-x9ssxh0l8o] {
        padding: 36px 36px 24px;
    }

    .mm-right[b-x9ssxh0l8o] {
        padding: 36px 20px 28px;
    }

    .mm-cat[b-x9ssxh0l8o] {
        /* Keep the 40px left inset so labels stay aligned under SHOP. */
        padding: 9px 22px 9px 40px;
        font-size: 15px;
    }

    /* Product name (Inter) + 210px square product frame on laptops. */
    .mm-pick-title[b-x9ssxh0l8o] {
        font-size: 15px;
    }

    .mm-pick-media[b-x9ssxh0l8o] {
        width: 288px;
        height: 288px;
    }

    .mm-pick-banner[b-x9ssxh0l8o] {
        font-size: 17px;
    }

    /* Name + price track the category list's 15px at this breakpoint. */
    .mm-pick-price[b-x9ssxh0l8o] {
        font-size: 15px;
    }
}
/* _content/ProcapsMainSite/Components/Elements/ProductLabelOverlay.razor.rz.scp.css */
.plo-backdrop[b-2srl3d3dw6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 20, 20, 0.72);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 24px;
    outline: none;
}

.plo-frame[b-2srl3d3dw6] {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 72px);
    background: #fff;
    border-radius: 12px;
    overflow: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.plo-close[b-2srl3d3dw6] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 0;
    color: #003b3c;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.plo-body[b-2srl3d3dw6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.plo-img[b-2srl3d3dw6] {
    width: 100%;
    height: auto;
    display: block;
}

.plo-pdf[b-2srl3d3dw6] {
    width: 100%;
    height: min(80vh, 900px);
    border: 0;
    background: #fff;
}

.plo-pdf-link[b-2srl3d3dw6] {
    color: #009296;
    font-family: Inter, sans-serif;
    font-weight: 600;
    text-align: center;
}
/* _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/SupplementFactsPanel.razor.rz.scp.css */
.pdp-supp-facts[b-xijfcbicxj] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: #202020;
}

.pdp-supp-row[b-xijfcbicxj] {
    display: grid;
    grid-template-columns: 1fr minmax(5.5rem, 7.5rem) minmax(3rem, 4rem);
    column-gap: 0.75rem;
    align-items: start;
    padding-bottom: 0.5rem;
}

.pdp-supp-row--sub .pdp-supp-col-name[b-xijfcbicxj] {
    padding-left: 1rem;
}

.pdp-supp-row--serving[b-xijfcbicxj] {
    grid-template-columns: 1fr auto;
    padding-bottom: 0;
}

.pdp-supp-row--header[b-xijfcbicxj] {
    padding-bottom: 0.25rem;
}

.pdp-supp-col-dv[b-xijfcbicxj] {
    text-align: right;
}

.pdp-supp-serving-value[b-xijfcbicxj] {
    text-align: right;
}

.pdp-supp-rule[b-xijfcbicxj] {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0.5rem 0;
}

.pdp-supp-rule--bold[b-xijfcbicxj] {
    border-top-color: #202020;
}

.pdp-supp-footnote[b-xijfcbicxj],
.pdp-supp-other[b-xijfcbicxj],
.pdp-supp-allergens[b-xijfcbicxj] {
    margin: 0.5rem 0 0;
    font-size: 14px;
}

.pdp-supp-other[b-xijfcbicxj],
.pdp-supp-allergens[b-xijfcbicxj] {
    margin-top: 0.75rem;
}
/* _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;
    }
}

/* ============================================================
   Minimal cards (PDP "We also recommend" only — .hr-section--minimal).
   Meta (headline / product name / stars / favorite) is hidden in markup.
   Here the product image fills the cream tile full-bleed: zero the tile
   padding and reset the collection-variant's negative-margin/aspect trick
   so the image occupies the entire card, edge to edge. Placed last so it
   overrides the equal-specificity .hr-section--variant-collection rules.
   ============================================================ */
.hr-section--minimal .hr-card-inner[b-cfn5ap4mvf] {
    padding: 0;
}

.hr-section--minimal .hr-image-wrap[b-cfn5ap4mvf] {
    width: 100%;
    margin: 0;
    padding: 0;
    aspect-ratio: 1 / 1;
    align-items: stretch;
}

    .hr-section--minimal .hr-image-wrap a[b-cfn5ap4mvf] {
        align-items: center;
    }

.hr-section--minimal .hr-product-img[b-cfn5ap4mvf] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* _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/MaintenanceLayout.razor.rz.scp.css */
.maint-shell[b-7bawff486h] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #F6F2EC;
}

.maint-header[b-7bawff486h] {
    background-color: #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 40px;
}

.maint-logo[b-7bawff486h] {
    height: 40px;
    width: auto;
    display: block;
}

.maint-main[b-7bawff486h] {
    flex: 1;
    display: flex;
}

@media only screen and (max-width: 959px) {
    .maint-header[b-7bawff486h] {
        padding: 26px 20px;
    }
}
/* _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: 24px;
    padding-top: 24px;
    position: relative;
}

/* Inset divider — stops 24px from each edge to align with the rows. */
.nav-list-secondary[b-6ze35ky5oz]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: #e6e2dc;
}

/* 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: 95ms; }
.nav-list > li:nth-child(3)[b-6ze35ky5oz] { animation-delay: 130ms; }
.nav-list > li:nth-child(4)[b-6ze35ky5oz] { animation-delay: 165ms; }
.nav-list > li:nth-child(5)[b-6ze35ky5oz] { animation-delay: 200ms; }
.nav-list > li:nth-child(6)[b-6ze35ky5oz] { animation-delay: 235ms; }
.nav-list > li:nth-child(7)[b-6ze35ky5oz] { animation-delay: 270ms; }
.nav-list > li:nth-child(8)[b-6ze35ky5oz] { animation-delay: 305ms; }
.nav-list > li:nth-child(9)[b-6ze35ky5oz] { animation-delay: 340ms; }
.nav-list > li:nth-child(10)[b-6ze35ky5oz] { animation-delay: 375ms; }
.nav-list > li:nth-child(11)[b-6ze35ky5oz] { animation-delay: 410ms; }
.nav-list > li:nth-child(12)[b-6ze35ky5oz] { animation-delay: 445ms; }
.nav-list > li:nth-child(13)[b-6ze35ky5oz] { animation-delay: 480ms; }
.nav-list > li:nth-child(14)[b-6ze35ky5oz] { animation-delay: 515ms; }
/* Catch-all so any categories beyond 14 still animate (never sit static). */
.nav-list > li:nth-child(n+15)[b-6ze35ky5oz] { animation-delay: 550ms; }

/* Secondary links come in just after the category cascade. */
.nav-list-secondary > li:nth-child(1)[b-6ze35ky5oz] { animation-delay: 575ms; }
.nav-list-secondary > li:nth-child(2)[b-6ze35ky5oz] { animation-delay: 610ms; }
.nav-list-secondary > li:nth-child(3)[b-6ze35ky5oz] { animation-delay: 645ms; }

/* ---- 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;
}

/* Secondary links (Shop by Ingredient / Shop All Products) — match the shopping-category copy size (17px) and carry the
   same leading icons used on the desktop megamenu. */
.nav-list-secondary .nav-item[b-6ze35ky5oz] {
    font-size: 17px;
}

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

/* ---- 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],
    .nav-cat:hover .nav-indicator[b-6ze35ky5oz] {
        background: #d4f1f2;
    }

    /* Subtle pulse of the indicator on hover */
    .nav-item:hover .nav-indicator[b-6ze35ky5oz],
    .nav-cat: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;
    }
}

/* ======================================================
   New shop-by-category mobile format
   ====================================================== */
.nav-eyebrow[b-6ze35ky5oz] {
    margin: 0 24px 12px;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #009296;
}

/* Section heading above the category list — matches the desktop megamenu
   eyebrow (uppercase, teal, tracked) for cross-breakpoint consistency. */
.nav-cat-heading[b-6ze35ky5oz] {
    margin: 4px 0 10px;
    padding: 0 24px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #009296;
    animation: navEnterX-b-6ze35ky5oz 320ms cubic-bezier(0.22, 0.61, 0.36, 1) 40ms both;
}

.nav-cat-list[b-6ze35ky5oz] {
    padding: 4px 0;
}

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

@media (hover: hover) {
    .nav-cat:hover[b-6ze35ky5oz] {
        color: #009296;
        background: rgba(255, 255, 255, 0.55);
    }
}

.nav-cat-label[b-6ze35ky5oz] {
    flex: 1;
    line-height: 1.3;
}
/* Category thumbnail — small circle; bg matches the category images' own
   beige backdrop so it reads seamlessly. */
.nav-cat-thumb[b-6ze35ky5oz] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #F6F2EC;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-cat-thumb img[b-6ze35ky5oz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* _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] {
    display: block;
    background: #F7F2EC;
    position: relative;
    border-radius: 10px;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    text-decoration: none;
    color: inherit;
}

@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;
}

.cp-item-name-link[b-ynsmrlf5bu] {
    color: #003b3c;
    text-decoration: none;
}

@media (hover: hover) {
    .cp-item-name-link:hover[b-ynsmrlf5bu] {
        color: #003b3c;
        text-decoration: underline;
    }
}

.cp-item-name-link:focus-visible[b-ynsmrlf5bu] {
    color: #003b3c;
    text-decoration: underline;
}

@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;
    max-width: 100%;
    overflow: hidden;
}

.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;
    max-width: 220px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 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;
    }
}

.cp-promo-row[b-ynsmrlf5bu] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.cp-promo-input[b-ynsmrlf5bu] {
    flex: 1;
    min-width: 0;
    border: 1px solid #D9E2E2;
    border-radius: 8px;
    padding: 0 16px;
    height: 44px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #003b3c;
}

.cp-promo-input:disabled[b-ynsmrlf5bu] {
    background: #F5F9F9;
    color: #406c6d;
}

.cp-promo-apply[b-ynsmrlf5bu] {
    background: #003b3c;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0 20px;
    height: 44px;
    cursor: pointer;
    font-family: Inter, sans-serif;
    font-size: 14px;
}

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

.cp-promo-banner[b-ynsmrlf5bu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: #E8F5F5;
    border: 1px solid #009296;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #003b3c;
}

.cp-promo-banner-copy[b-ynsmrlf5bu] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-promo-blurb[b-ynsmrlf5bu] {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #406c6d;
    white-space: pre-wrap;
}

.cp-promo-remove[b-ynsmrlf5bu] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #406c6d;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.cp-promo-remove:hover:not(:disabled)[b-ynsmrlf5bu] {
    background: rgba(0, 146, 150, 0.12);
    color: #003b3c;
}

.cp-promo-remove:disabled[b-ynsmrlf5bu] {
    cursor: not-allowed;
    opacity: 0.5;
}
/* _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;
}

.pdp-gallery-video-poster[b-8omfekxfl5] {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 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: clamp(32px, 4vw + 8px, 56px) 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-body[b-8omfekxfl5]  h4 {
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin: 16px 0 6px;
}

.pdp-accordion-body[b-8omfekxfl5]  h4:first-child {
    margin-top: 0;
}

.pdp-accordion-body[b-8omfekxfl5]  a {
    color: #009296;
    font-weight: 600;
}

.pdp-accordion-body .pdp-label-link-wrap[b-8omfekxfl5] {
    margin: 20px 0 4px;
}

.pdp-label-link[b-8omfekxfl5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #003b3c;
    border-radius: 999px;
    padding: 10px 22px;
    color: #003b3c;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

@media (hover: hover) {
    .pdp-label-link:hover[b-8omfekxfl5] {
        background: rgba(0, 59, 60, 0.04);
    }
}

.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/About.razor.rz.scp.css */
/* ======================================================
   Our Story — shared layout tokens (single source of truth).

   Defined on the page wrapper so EVERY section component inherits
   them. CSS custom properties cascade down the DOM regardless of
   Blazor's per-component style scoping, so a section's scoped CSS can
   read var(--os-*) even though its selectors carry a different scope
   attribute than this file.

   This is the one place the page's width, reading measure, vertical
   rhythm and section-headline size are decided. Change a value here
   and every section follows — which is what keeps sizes/grids/widths
   from drifting apart as sections are added.

   Opt-outs: the Banner (hero H1) and VideoHero (one cinematic H2) are
   intentionally larger and set their own sizes; every *content*
   section uses --os-h2.
   ====================================================== */

.os-story[b-6obau380s1] {
    /* Content frame — max width of every contained section */
    --os-max: 1140px;

    /* Reading measures */
    --os-measure: 640px;        /* centered body / lead copy        */
    --os-measure-split: 520px;  /* body set in a column beside media */

    /* Section padding (vertical rhythm + side gutters) */
    --os-pad-x: 20px;
    --os-pad-y: 48px;

    /* Shared content-section headline (H2) */
    --os-h2: 34px;
    --os-h2-lh: 1.1;
    --os-h2-ls: -1.5px;
}

@media (min-width: 768px) {
    .os-story[b-6obau380s1] {
        --os-pad-x: 40px;
        --os-pad-y: 64px;
        --os-h2: 44px;
    }
}

@media (min-width: 960px) {
    .os-story[b-6obau380s1] { --os-h2: 48px; }
}

@media (min-width: 1280px) {
    .os-story[b-6obau380s1] {
        --os-pad-y: 88px;
        --os-h2: 54px;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/AndrewStoryV2.razor.rz.scp.css */
/* ======================================================
   Our Story — shared layout tokens (single source of truth).

   Defined on the page wrapper so EVERY section component inherits
   them. CSS custom properties cascade down the DOM regardless of
   Blazor's per-component style scoping, so a section's scoped CSS can
   read var(--os-*) even though its selectors carry a different scope
   attribute than this file.

   This is the one place the page's width, reading measure, vertical
   rhythm and section-headline size are decided. Change a value here
   and every section follows — which is what keeps sizes/grids/widths
   from drifting apart as sections are added.

   Opt-outs: the Banner (hero H1) and VideoHero (one cinematic H2) are
   intentionally larger and set their own sizes; every *content*
   section uses --os-h2.
   ====================================================== */

.os-story[b-tm4xsk5aci] {
    /* Content frame — max width of every contained section */
    --os-max: 1140px;

    /* Reading measures */
    --os-measure: 640px;        /* centered body / lead copy        */
    --os-measure-split: 520px;  /* body set in a column beside media */

    /* Section padding (vertical rhythm + side gutters) */
    --os-pad-x: 20px;
    --os-pad-y: 48px;

    /* Shared content-section headline (H2) */
    --os-h2: 34px;
    --os-h2-lh: 1.1;
    --os-h2-ls: -1.5px;
}

@media (min-width: 768px) {
    .os-story[b-tm4xsk5aci] {
        --os-pad-x: 40px;
        --os-pad-y: 64px;
        --os-h2: 44px;
    }
}

@media (min-width: 960px) {
    .os-story[b-tm4xsk5aci] { --os-h2: 48px; }
}

@media (min-width: 1280px) {
    .os-story[b-tm4xsk5aci] {
        --os-pad-y: 88px;
        --os-h2: 54px;
    }
}

/* Mobile-only hairline dividers between the stacked content sections.
   Hidden on desktop where the sections read as distinct columns already. */
.asv2-section-divider[b-tm4xsk5aci] { display: none; }

@media (max-width: 1099px) {
    .asv2-section-divider[b-tm4xsk5aci] {
        display: block;
        height: 1px;
        background-color: #cfe7e7;
        margin-left: var(--os-pad-x, 20px);
        margin-right: var(--os-pad-x, 20px);
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/AndrewStoryV2Sections/OurStoryBanner.razor.rz.scp.css */
/* ======================================================
   Andrew Story — Banner section. Scoped styles.

   Full-width teal-gradient hero band: an animated vertical line at top,
   then a large white "Andrew Lessman" signature (SVG mask) in place of a
   text headline. Entrance animations are CSS-only; prefers-reduced-motion
   disables them.
   ====================================================== */

.os-banner[b-m6ddzfhmh4] {
    background: linear-gradient(to bottom, #009296 0%, #00c2bd 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: visible;
    /* Token-driven hero padding so the banner's bottom shares the page's
       vertical rhythm (--os-pad-y) with the sections below it. */
    padding: 28px var(--os-pad-x, 20px) var(--os-pad-y, 48px);
    z-index: 2;
}

@media (min-width: 1280px) {
    .os-banner[b-m6ddzfhmh4] { padding-top: 36px; }
}

/* ======================================================
   Decorative vertical line — animated grow on mount
   ====================================================== */
.os-banner-line[b-m6ddzfhmh4] {
    width: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    height: 0;
    margin: 0 0 36px;
    flex-shrink: 0;
    animation: os-banner-line-grow-b-m6ddzfhmh4 0.6s ease both;
}

@keyframes os-banner-line-grow-b-m6ddzfhmh4 {
    from { height: 0; opacity: 0; }
    to   { height: 55px; opacity: 1; }
}

/* ======================================================
   Big "Andrew Lessman" signature in place of a text headline. White fill via
   SVG mask; width is fluid (down to a readable size on phones), height follows
   the signature's natural aspect ratio (268 x 51).
   ====================================================== */
.os-banner-signature[b-m6ddzfhmh4] {
    margin: 0;
    /* Floor raised to 300 so it's a proper size on phones (34vw collapses on
       narrow screens); desktop is governed by 34vw up to the 540 cap.
       max-width guards tiny phones from overflow. */
    width: clamp(300px, 34vw, 540px);
    max-width: 86vw;
    aspect-ratio: 268 / 51;
    background-color: #fff;
    /* Plain .svg (full 26-path vector). NOT the ?auto=webp&format=svg variant —
       that one is a degraded 2-path trace that looks blurry when scaled up. */
    -webkit-mask: url('https://cdn.bfldr.com/EE0OVGM5/at/mq289h4nszks3vfmggp7qk3/iconsignatureteal.svg') center / contain no-repeat;
    mask: url('https://cdn.bfldr.com/EE0OVGM5/at/mq289h4nszks3vfmggp7qk3/iconsignatureteal.svg') center / contain no-repeat;
    animation: os-banner-fade-up-b-m6ddzfhmh4 0.7s ease 350ms both;
}

@keyframes os-banner-fade-up-b-m6ddzfhmh4 {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ======================================================
   Reduced motion — skip entrance animations, render final state.
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
    .os-banner-line[b-m6ddzfhmh4],
    .os-banner-signature[b-m6ddzfhmh4] {
        animation: none;
    }
    .os-banner-line[b-m6ddzfhmh4] { height: 55px; opacity: 1; }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/AndrewStoryV2Sections/OurStoryFounderSection.razor.rz.scp.css */
/* ======================================================
   Andrew Story — "It started with curiosity." section. Scoped styles.

   White background, two-column image + copy grid (stacks below 1100).
   On mobile a centered header (headline + divider + teal lead) sits above
   the image; on desktop that header lives in the copy column instead. The
   image is a static "need final image" placeholder.
   ====================================================== */

.os-fs[b-0zmktfamgz] {
    background-color: #fff;
    padding: var(--os-pad-y, 48px) var(--os-pad-x, 20px);
}

/* Mobile-only centered header (headline + divider + teal lead), shown above the
   image — mirrors the centered section headers on the About / Quality pages. */
.os-fs-mobile-header[b-0zmktfamgz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    width: 100%;
}

/* Keep the centered lead readable (don't let it stretch full-width on wide
   tablet/stacked widths). */
.os-fs-mobile-header .os-fs-paragraph--lead[b-0zmktfamgz] {
    max-width: 560px;
}

@media (min-width: 1100px) {
    /* Desktop: header lives in the copy column (right) — hide the mobile one. */
    .os-fs-mobile-header[b-0zmktfamgz] { display: none; }
}

@media (max-width: 1099px) {
    /* Mobile: the copy column drops its header bits (shown above the image). */
    .os-fs-copy-wrap > .os-fs-title[b-0zmktfamgz],
    .os-fs-copy-wrap > .os-fs-divider[b-0zmktfamgz],
    .os-fs-copy-wrap > .os-fs-paragraph--lead[b-0zmktfamgz] { display: none; }
}

.os-fs-title[b-0zmktfamgz] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: var(--os-h2-lh, 1.1);
    letter-spacing: var(--os-h2-ls, -1.5px);
    margin: 0;
    font-weight: 400;
    font-size: var(--os-h2, 54px);
}

/* Horizontal teal divider — matches the Quality page + other sections. */
.os-fs-divider[b-0zmktfamgz] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    margin: 2px 0;
    flex-shrink: 0;
}

/* ======================================================
   Two-column body — image left, copy right (stacks on mobile)
   ====================================================== */
.os-fs-grid[b-0zmktfamgz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    max-width: var(--os-max, 1140px);
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .os-fs-grid[b-0zmktfamgz] {
        flex-direction: row;
        gap: 60px;
        align-items: flex-start;
    }
}

/* Image slot — square; sticky on desktop while the copy scrolls past. */
.os-fs-thumb-wrap[b-0zmktfamgz] {
    width: 100%;
}

@media (min-width: 1100px) {
    .os-fs-thumb-wrap[b-0zmktfamgz] {
        width: 550px;
        flex-shrink: 0;
        position: sticky;
        top: 120px;
    }
}

.os-fs-thumb[b-0zmktfamgz] {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

/* Static "need final image" placeholder — mirrors the Two disciplines slot. */
.os-fs-thumb--placeholder[b-0zmktfamgz] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4dede;
}
.os-fs-thumb--placeholder span[b-0zmktfamgz] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7d7d;
}

/* ======================================================
   Copy column — paragraphs
   ====================================================== */
.os-fs-copy-wrap[b-0zmktfamgz] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (min-width: 1100px) {
    .os-fs-copy-wrap[b-0zmktfamgz] { max-width: var(--os-measure-split, 520px); }
}

.os-fs-paragraph[b-0zmktfamgz] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-fs-paragraph[b-0zmktfamgz] { font-size: 18px; }
}

/* Lead paragraph — matches the Quality section's --lead (teal, medium). */
.os-fs-paragraph--lead[b-0zmktfamgz] {
    color: #009296;
    font-weight: 500;
}

/* ======================================================
   Reveal-on-scroll — the shared observer in the page composer toggles
   .os-revealed when each [data-os-reveal] enters the viewport.
   ====================================================== */
.os-fs [data-os-reveal][b-0zmktfamgz] {
    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-0zmktfamgz] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-fs [data-os-reveal][b-0zmktfamgz] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/AndrewStoryV2Sections/OurStoryFourDecades.razor.rz.scp.css */
/* ======================================================
   Andrew Story — "Four decades, no compromises." section. Scoped styles.

   White background, two-column grid (stacks below 1100): a square video
   thumbnail (teal placeholder + play icon, opens the shared lightbox) and a
   copy column (headline + divider + paragraphs).
   ====================================================== */

.os-fs[b-kdltknvl9b] {
    background-color: #fff;
    padding: var(--os-pad-y, 48px) var(--os-pad-x, 20px);
}

.os-fs-title[b-kdltknvl9b] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: var(--os-h2-lh, 1.1);
    letter-spacing: var(--os-h2-ls, -1.5px);
    margin: 0;
    font-weight: 400;
    font-size: var(--os-h2, 54px);
}

/* Horizontal teal divider — matches the Quality page + other sections. */
.os-fs-divider[b-kdltknvl9b] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    margin: 2px 0;
    flex-shrink: 0;
}

/* ======================================================
   Two-column body — video left, copy right (stacks on mobile)
   ====================================================== */
.os-fs-grid[b-kdltknvl9b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    max-width: var(--os-max, 1140px);
    margin: 0 auto;
}

@media (min-width: 1100px) {
    .os-fs-grid[b-kdltknvl9b] {
        flex-direction: row;
        gap: 60px;
        align-items: flex-start;
    }
}

/* ======================================================
   Video thumbnail — button with hover scale, dark overlay, play icon.
   Sticky on desktop while the copy scrolls past.
   ====================================================== */
.os-fs-thumb-wrap[b-kdltknvl9b] {
    width: 100%;
}

@media (min-width: 1100px) {
    .os-fs-thumb-wrap[b-kdltknvl9b] {
        width: 550px;
        flex-shrink: 0;
        position: sticky;
        top: 120px;
    }
}

.os-fs-thumb[b-kdltknvl9b] {
    appearance: none;
    /* Blank placeholder — deep teal gradient (matches the Quality video slot). */
    background: linear-gradient(135deg, #0e6f68 0%, #053f3d 100%);
    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-overlay[b-kdltknvl9b] {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 250ms ease;
    border-radius: 20px;
}

.os-fs-thumb-play[b-kdltknvl9b] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Matches the Quality video play icon exactly (42 / 56 / 72). */
    width: 42px;
    height: 42px;
    transition: transform 250ms ease;
    pointer-events: none;
}

@media (min-width: 768px) {
    .os-fs-thumb-play[b-kdltknvl9b] { width: 56px; height: 56px; }
}

@media (min-width: 1280px) {
    .os-fs-thumb-play[b-kdltknvl9b] { width: 72px; height: 72px; }
}

.os-fs-thumb-play img[b-kdltknvl9b] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (hover: hover) {
    .os-fs-thumb:hover .os-fs-thumb-overlay[b-kdltknvl9b] {
        background-color: rgba(0, 0, 0, 0.12);
    }
    .os-fs-thumb:hover .os-fs-thumb-play[b-kdltknvl9b] {
        transform: translate(-50%, -50%) scale(1.1);
    }
}

.os-fs-thumb:focus-visible[b-kdltknvl9b] {
    outline: 3px solid #009296;
    outline-offset: 4px;
}

/* ======================================================
   Copy column — paragraphs
   ====================================================== */
.os-fs-copy-wrap[b-kdltknvl9b] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (min-width: 1100px) {
    .os-fs-copy-wrap[b-kdltknvl9b] { max-width: var(--os-measure-split, 520px); }
}

.os-fs-paragraph[b-kdltknvl9b] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-fs-paragraph[b-kdltknvl9b] { font-size: 18px; }
}

/* Lead paragraph — matches the Quality section's --lead (teal, medium). */
.os-fs-paragraph--lead[b-kdltknvl9b] {
    color: #009296;
    font-weight: 500;
}

/* ======================================================
   Reveal-on-scroll — the shared observer in the page composer toggles
   .os-revealed when each [data-os-reveal] enters the viewport.
   ====================================================== */
.os-fs [data-os-reveal][b-kdltknvl9b] {
    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-kdltknvl9b] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-fs [data-os-reveal][b-kdltknvl9b] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .os-fs-thumb-overlay[b-kdltknvl9b],
    .os-fs-thumb-play[b-kdltknvl9b] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/AndrewStoryV2Sections/OurStoryStatement.razor.rz.scp.css */
/* ======================================================
   Andrew Story — Statement section. Full-bleed pale-aqua band.
   ====================================================== */

.os-st2[b-dbvyq0f82i] {
    background-color: #e8f9f9;   /* pale aqua — matches the "Leading with facts" band */
    padding: var(--os-pad-y, 48px) var(--os-pad-x, 20px);
}

.os-st2-inner[b-dbvyq0f82i] {
    max-width: var(--os-max, 1140px);
    margin: 0 auto;
}

/* Lead-in above the statement — matches the teal "lead" paragraph style used
   elsewhere on the page (os-fs-paragraph--lead). */
.os-st2-leadin[b-dbvyq0f82i] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: #009296;
    margin: 0 0 24px;
    max-width: 520px;
}

@media (min-width: 768px) {
    .os-st2-leadin[b-dbvyq0f82i] { font-size: 18px; margin-bottom: 32px; }
}

/* Two-column body: huge statement (left) + supporting copy (right). */
.os-st2-grid[b-dbvyq0f82i] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .os-st2-grid[b-dbvyq0f82i] {
        flex-direction: row;
        align-items: flex-end;   /* supporting copy baseline-aligns near the statement's foot, like the reference */
        gap: 64px;
    }
}

/* The big serif statement. Fluid so it scales with the viewport. */
.os-st2-statement[b-dbvyq0f82i] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -1.5px;
    font-size: clamp(40px, 6vw, 72px);
    flex: 1 1 auto;
    text-wrap: balance;
}

/* Supporting copy column. */
.os-st2-copy[b-dbvyq0f82i] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 1100px) {
    .os-st2-copy[b-dbvyq0f82i] {
        width: 100%;
        max-width: 420px;
        flex-shrink: 0;
        padding-bottom: 8px;
    }
}

.os-st2-paragraph[b-dbvyq0f82i] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.4px;
    color: #003b3c;
    margin: 0;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .os-st2-paragraph[b-dbvyq0f82i] { font-size: 18px; }
}

/* ======================================================
   Reveal-on-scroll — shared observer toggles .os-revealed.
   ====================================================== */
.os-st2 [data-os-reveal][b-dbvyq0f82i] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-st2 [data-os-reveal].os-revealed[b-dbvyq0f82i] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-st2 [data-os-reveal][b-dbvyq0f82i] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _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.

   4-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
   ====================================================== */

/* ======================================================
   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; } }

/* ======================================================
   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;
    }
}
/* _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;
}

/* Three equal columns once the row is wide enough for the Call
   card's phone number. Below 960 they stay stacked. */
@media (min-width: 960px) {
    .contact-grid[b-myh7k2e9pc] {
        grid-template-columns: repeat(3, 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. */
.contact-card-primary[b-myh7k2e9pc] {
    font-family: Inter, sans-serif;
    color: #003b3c;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

/* 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;
}

/* Quality-only: run the shared ScrollingBanner's copy a touch smaller
   than it appears on the homepage / PDP. Scoped with ::deep so the
   global component is untouched.

   IMPORTANT: only the font-size is reduced — the item padding is left
   alone. The marquee loops seamlessly by scrolling one full half-width
   (-50%), which only reads as seamless while a half stays wider than
   the viewport. Shrinking the type but keeping the padding keeps each
   item's overall width nearly unchanged, so the loop doesn't reopen the
   gap we closed by widening the pillar list. Mirrors the component's
   own breakpoints.

   line-height is also bumped from the component's 1 to 1.3: at 1 the line
   box equals the em height with no leading, so descenders (the tail of g /
   p / y — e.g. the "g" in "Ingredients") dip below the box and get shaved by
   the marquee's overflow:hidden. 1.3 gives them clearance. Scoped here so the
   global component keeps its tighter default. */
.q-marquee[b-2fmp3e01se]  .sb-item { font-size: 30px; line-height: 1.3; }

@media (min-width: 1280px) and (max-width: 1599px) {
    .q-marquee[b-2fmp3e01se]  .sb-item { font-size: 24px; }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .q-marquee[b-2fmp3e01se]  .sb-item { font-size: 22px; }
}

@media (max-width: 959px) {
    .q-marquee[b-2fmp3e01se]  .sb-item { font-size: 18px; }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/MaintenancePage.razor.rz.scp.css */
.nf[b-fsj8pkhnwf] {
    background-color: #F6F2EC;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    min-height: calc(100vh - 92px);
    padding: 32px 20px 40px;
}

@media (min-width: 768px) {
    .nf[b-fsj8pkhnwf] {
        padding: 40px 40px 48px;
    }
}

.nf-art[b-fsj8pkhnwf] {
    display: block;
    width: 100%;
    max-width: 1100px;
    height: auto;
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/NotFoundPage.razor.rz.scp.css */
/* ======================================================
   404 preview � scoped styles.

   Calm, centered, on-brand: warm tan field, oversized STIX "404",
   serif headline, a short reassuring line, and two pill actions
   (home + shop) with a quiet search link beneath. Mirrors the brand
   tokens used across the Our Story / Quality previews � STIX display,
   Inter body, ink #003b3c, teal #009296, 50px teal hairline, 100px
   pill buttons.
   ====================================================== */

.nf[b-mfhgu6jbo0] {
    background-color: #F6F2EC;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fill the viewport between header and footer without forcing a
       hard 100vh (which fights the sitewide chrome). */
    min-height: 68vh;
    padding: 72px 20px 88px;
}

@media (min-width: 768px) {
    .nf[b-mfhgu6jbo0] {
        padding: 96px 40px 112px;
    }
}

.nf-inner[b-mfhgu6jbo0] {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Short teal hairline above the code � the recurring brand marker. */
.nf-line[b-mfhgu6jbo0] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    margin-bottom: 28px;
}

/* Oversized serif number � the hero of the page. */
.nf-code[b-mfhgu6jbo0] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1;
    letter-spacing: -2px;
    font-size: 96px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .nf-code[b-mfhgu6jbo0] {
        font-size: 140px;
        letter-spacing: -4px;
    }
}

/* Short serif hook between the number and the body � states the plain
   truth; the approved copy below delivers the brand payoff. */
.nf-title[b-mfhgu6jbo0] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1px;
    margin: 10px 0 16px;
    font-size: 28px;
}

@media (min-width: 768px) {
    .nf-title[b-mfhgu6jbo0] {
        font-size: 36px;
        letter-spacing: -1.5px;
    }
}

/* Approved marketing copy � the brand-voice line carries the page
   (no separate headline; the "404" is the hero). Ink, comfortable
   reading measure, centered. */
.nf-body[b-mfhgu6jbo0] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.6;
    letter-spacing: -0.3px;
    margin: 4px 0 36px;
    font-size: 16px;
    max-width: 460px;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .nf-body[b-mfhgu6jbo0] {
        font-size: 18px;
        margin-bottom: 40px;
    }
}

/* ======================================================
   Actions � two pills, wrap on small screens
   ====================================================== */
.nf-actions[b-mfhgu6jbo0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.nf-btn[b-mfhgu6jbo0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.2px;
    border-radius: 100px;
    padding: 14px 28px;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

/* Primary � solid teal. */
.nf-btn--primary[b-mfhgu6jbo0] {
    color: #fff;
    background-color: #009296;
    border: 1.5px solid #009296;
}

    .nf-btn--primary:hover[b-mfhgu6jbo0] {
        background-color: #007a7d;
        border-color: #007a7d;
    }

/* Secondary � teal outline, transparent. */
.nf-btn--secondary[b-mfhgu6jbo0] {
    color: #009296;
    background-color: transparent;
    border: 1.5px solid #009296;
}

    .nf-btn--secondary:hover[b-mfhgu6jbo0] {
        background-color: #009296;
        color: #fff;
    }

/* ======================================================
   Quiet search link beneath the buttons
   ====================================================== */
.nf-search-link[b-mfhgu6jbo0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.2px;
    color: #4a6465;
    text-decoration: none;
    transition: color 150ms ease;
}

    .nf-search-link:hover[b-mfhgu6jbo0] {
        color: #009296;
    }

.nf-search-icon[b-mfhgu6jbo0] {
    display: flex;
    flex-shrink: 0;
}

    .nf-search-icon svg[b-mfhgu6jbo0] {
        width: 16px;
        height: 16px;
    }
/* _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;
    /* Bottom padding reserves the pill's TOP half + a small gap below the
       subtitle; height is otherwise content-driven (no min-height slack).
       Mirrors the Quality banner. Pill heights at the fixed widths below are
       ~102 / 156 / 156, so half-pill is ~51 / 78 / 78. */
    padding: 28px 20px 79px;
    z-index: 2;
}

@media (min-width: 768px) {
    .os-banner[b-r9dvczxou2] { padding: 28px 40px 110px; }
}

@media (min-width: 1280px) {
    .os-banner[b-r9dvczxou2] { padding: 36px 40px 110px; }
}

/* ======================================================
   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 36px;
    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: 55px; 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.0;
    margin: 0 0 32px;
    font-size: 52px;
    animation: os-banner-fade-up-b-r9dvczxou2 0.7s ease 350ms both;
}

@media (min-width: 768px) {
    .os-banner-title[b-r9dvczxou2] { font-size: 74px; }
}

/* Smooth ramp between 768 (74px) and 1280 (106px) — without this
   the headline jumps an awkward amount at the desktop breakpoint. */
@media (min-width: 960px) {
    .os-banner-title[b-r9dvczxou2] { font-size: 82px; }
}

@media (min-width: 1280px) {
    .os-banner-title[b-r9dvczxou2] {
        font-size: 82px;
        letter-spacing: -1.8px;
    }
}

.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;
    /* No bottom margin: the banner's padding-bottom now owns the gap down to
       the pill (sized to the pill's top half + clearance). Matches Quality. */
    margin: 0;
    /* 640 (not 580): at 580 the widest line filled 578/580 — a 2px margin
       that tipped to 3 lines on environments with slightly different font
       rendering. 640 gives comfortable headroom so it stays 2 lines. */
    max-width: 640px;
    /* balance (not pretty): evens the two lines so neither fills to the
       column edge -> lots of headroom -> robustly 2 lines across environments. */
    text-wrap: balance;
    font-size: 16px;
    animation: os-banner-fade-up-b-r9dvczxou2 0.7s ease 600ms both;
}

/* First of two subtitle paragraphs — tighter gap to the second (the second
   keeps the 80px bottom margin so the pill still clears it). */
.os-banner-subtitle--lead[b-r9dvczxou2] {
    margin-bottom: 20px;
}

@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.
   ====================================================== */
/* ONE pill element for every breakpoint (mirrors Quality). Anchored to the
   hero's bottom edge (top:100% = the teal/white seam into the spacer) and
   pulled up exactly half its own height -> exact 50/50 bisect. Fixed widths
   per breakpoint; tight asset means box == visible capsule. aspect-ratio
   reserves the box from first paint so the entrance never snaps on load. */
.os-banner-pill-wrap[b-r9dvczxou2] {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 260px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    animation: os-banner-pill-fade-b-r9dvczxou2 0.7s ease 900ms both;
}

.os-banner-pill-wrap .os-banner-pill[b-r9dvczxou2] {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2599 / 1016;
}

/* Floating cast shadow: a soft, flattened ellipse on the white spacer below
   the pill (levitation look). Scales with the pill via % width. */
.os-banner-pill-wrap[b-r9dvczxou2]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 68%;
    height: 16px;
    margin-top: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.26) 0%,
        rgba(0, 0, 0, 0.11) 45%,
        rgba(0, 0, 0, 0) 72%);
    filter: blur(7px);
    z-index: -1;
    pointer-events: none;
}

@media (min-width: 768px) {
    .os-banner-pill-wrap[b-r9dvczxou2] { width: 400px; }
    .os-banner-pill-wrap[b-r9dvczxou2]::after { height: 20px; margin-top: 18px; filter: blur(9px); }
}

@media (min-width: 1280px) {
    /* Desktop holds the 400px (tablet) scale — matches the Quality hero. */
    .os-banner-pill-wrap[b-r9dvczxou2] { width: 400px; }
    .os-banner-pill-wrap[b-r9dvczxou2]::after { height: 20px; margin-top: 18px; filter: blur(9px); }
}

@keyframes os-banner-pill-fade-b-r9dvczxou2 {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ======================================================
   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;
    /* Sized so the pill->heading gap matches the Quality page (48/60/60):
       spacer + Founder section's own top padding (16/24/32) lands the heading
       the same distance below the seam as Quality's Section 2 does. */
    height: 83px;
}

@media (min-width: 768px) {
    .os-banner-spacer[b-r9dvczxou2] { height: 114px; }
}

@media (min-width: 1280px) {
    .os-banner-spacer[b-r9dvczxou2] { height: 106px; }
}

/* ======================================================
   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[b-r9dvczxou2] {
        animation: none;
    }

    .os-banner-line[b-r9dvczxou2] { height: 55px; opacity: 1; }
    .os-banner-title-accent[b-r9dvczxou2] { color: #48e1dc; }
}
/* _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: var(--os-pad-y, 48px) var(--os-pad-x, 20px);
}

/* ======================================================
   Inner content wrapper — caps width and arranges columns
   ====================================================== */
.os-ed-inner[b-s501cq0y0y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: var(--os-max, 1140px);
    margin: 0 auto;
}

/* ======================================================
   Centered statement — title + tealline + paragraphs + CTA, all
   centered (no image column; the whitespace is the design).
   ====================================================== */
.os-ed-copy[b-s501cq0y0y] {
    width: 100%;
    /* Matches the Quality 'We make everything ourselves.' statement: a 1000px
       container (so the title breathes) with the body capped at 640 below. */
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 26px;
}

.os-ed-title[b-s501cq0y0y] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: var(--os-h2-lh, 1.1);
    letter-spacing: var(--os-h2-ls, -1.5px);
    margin: 0;
    font-weight: 400;
    font-size: var(--os-h2, 54px);
}

.os-ed-title-accent[b-s501cq0y0y] {
    color: #003b3c;
    font-style: normal;
    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;
    text-wrap: pretty;
    font-size: 16px;
    /* Centered-statement reading measure (640), matching the Quality
       'We make everything ourselves.' body — not the 520 beside-media width. */
    max-width: var(--os-measure, 640px);
}

/* Sign-up CTA — mirrors the founder section's pill button. */
.os-ed-cta-wrap[b-s501cq0y0y] {
    margin-top: 4px;
}
/* Secondary button — teal text + teal outline, transparent fill.
   Fills teal on hover. */
.os-ed-cta[b-s501cq0y0y] {
    display: inline-block;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: #009296;
    background-color: transparent;
    border: 1.5px solid #009296;
    border-radius: 100px;
    padding: 14px 28px;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.os-ed-cta:hover[b-s501cq0y0y] {
    background-color: #009296;
    color: #fff;
}

@media (min-width: 768px) {
    .os-ed-paragraph[b-s501cq0y0y] { font-size: 18px; }
}

/* Lead paragraph — teal medium. */
.os-ed-paragraph--lead[b-s501cq0y0y] {
    color: #009296;
    font-weight: 500;
}

/* ======================================================
   Sign-up — a single clickable pill (icon + label in one button),
   no separate description line. Reads as one deliberate CTA on the
   aqua background. White fill + teal outline so it pops; fills teal
   on hover.
   ====================================================== */
.os-ed-signup-btn[b-s501cq0y0y] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: center;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.2px;
    color: #009296;
    background-color: transparent;
    border: 1.5px solid #009296;
    border-radius: 100px;
    padding: 13px 22px;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.os-ed-signup-btn:hover[b-s501cq0y0y] {
    background-color: #009296;
    color: #fff;
}

.os-ed-signup-btn-icon[b-s501cq0y0y] {
    flex-shrink: 0;
    display: flex;
}

.os-ed-signup-btn-icon svg[b-s501cq0y0y] {
    width: 18px;
    height: 18px;
}

/* ── Live-show email signup: inline reveal (default pill is above) ───────── */
.os-ed-signup-form[b-s501cq0y0y] {
    align-self: center;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.os-ed-signup-row[b-s501cq0y0y] {
    display: flex;
    gap: 8px;
    width: 100%;
}
.os-ed-signup-input[b-s501cq0y0y] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #003b3c;
    background: #fff;
    border: 1.5px solid #009296;
    border-radius: 100px;
    padding: 12px 18px;
    outline: none;
}
.os-ed-signup-input[b-s501cq0y0y]::placeholder { color: #6b8a8a; }
.os-ed-signup-input:focus[b-s501cq0y0y] { box-shadow: 0 0 0 3px rgba(0, 146, 150, 0.15); }
.os-ed-signup-input--error[b-s501cq0y0y] { border-color: #c0392b; }
.os-ed-signup-submit[b-s501cq0y0y] {
    flex: none;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.2px;
    color: #fff;
    background: #009296;
    border: 1.5px solid #009296;
    border-radius: 100px;
    padding: 12px 22px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.os-ed-signup-submit:hover[b-s501cq0y0y] { background: #007a7d; border-color: #007a7d; }
.os-ed-signup-error[b-s501cq0y0y] {
    margin: 0;
    align-self: flex-start;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #c0392b;
}
.os-ed-signup-note[b-s501cq0y0y] {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #6b8a8a;
    text-align: center;
}
.os-ed-signup-success[b-s501cq0y0y] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #009296;
    background: #e8f9f9;
    border-radius: 100px;
    padding: 13px 22px;
    text-align: left;
}
.os-ed-signup-success-icon[b-s501cq0y0y] { flex-shrink: 0; display: flex; }
.os-ed-signup-success-icon svg[b-s501cq0y0y] { width: 18px; height: 18px; }

@media (max-width: 520px) {
    .os-ed-signup-row[b-s501cq0y0y] { flex-direction: column; }
    .os-ed-signup-submit[b-s501cq0y0y] { width: 100%; }
}

/* ======================================================
   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;
        /* Pin the image while the (longer) copy column scrolls past it. */
        position: sticky;
        top: 120px;
        align-self: flex-start;
    }
}

.os-ed-image[b-s501cq0y0y] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    max-width: 550px;
}

/* Temporary blank placeholder until the final image is supplied. */
.os-ed-image--placeholder[b-s501cq0y0y] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4dede;
}
.os-ed-image--placeholder span[b-s501cq0y0y] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7d7d;
}

/* ======================================================
   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: var(--os-pad-y, 48px) var(--os-pad-x, 20px);
    /* Pull this section up toward the banner + pill above it. */
    padding-top: 16px;
}

@media (min-width: 768px) {
    .os-fs[b-cz4uk7p4zh] { padding-top: 24px; }
}

@media (min-width: 1280px) {
    .os-fs[b-cz4uk7p4zh] { padding-top: 32px; }
}

/* ======================================================
   Header block — title, divider, eyebrow
   ====================================================== */
.os-fs-header[b-cz4uk7p4zh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .os-fs-header[b-cz4uk7p4zh] { margin-bottom: 44px; }
}

@media (min-width: 1280px) {
    .os-fs-header[b-cz4uk7p4zh] { margin-bottom: 64px; }
}

.os-fs-title[b-cz4uk7p4zh] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: var(--os-h2-lh, 1.1);
    letter-spacing: var(--os-h2-ls, -1.5px);
    margin: 0 0 24px;
    font-weight: 400;
    font-size: var(--os-h2, 54px);
}

.os-fs-title-accent[b-cz4uk7p4zh] {
    color: #003b3c;
    font-style: normal;
    font-weight: 400;
}

/* Horizontal teal divider — matches the Quality page + other Our Story
   sections (was a vertical line). */
.os-fs-divider[b-cz4uk7p4zh] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    margin-bottom: 24px;
}

.os-fs-eyebrow[b-cz4uk7p4zh] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    font-size: 16px;
    max-width: 640px;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .os-fs-eyebrow[b-cz4uk7p4zh] { font-size: 18px; }
}

/* ======================================================
   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: 32px;
    max-width: var(--os-max, 1140px);
    margin: 0 auto;
}

/* Two-column from 1100 (consistent with the other image/copy sections). */
@media (min-width: 1100px) {
    .os-fs-grid[b-cz4uk7p4zh] {
        flex-direction: row;
        gap: 60px;
        align-items: flex-start;
    }
}

/* ======================================================
   Portrait — button with hover scale, dark overlay, play icon
   ====================================================== */
.os-fs-thumb-wrap[b-cz4uk7p4zh] {
    width: 100%;
}

@media (min-width: 1100px) {
    .os-fs-thumb-wrap[b-cz4uk7p4zh] {
        width: 550px;
        flex-shrink: 0;
        /* Pin the video while the copy scrolls past (consistent sticky). */
        position: sticky;
        top: 120px;
    }
}

.os-fs-thumb[b-cz4uk7p4zh] {
    appearance: none;
    /* Blank placeholder — deep teal gradient (matches the Quality video slot). */
    background: linear-gradient(135deg, #0e6f68 0%, #053f3d 100%);
    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%);
    /* Matches the Quality video play icon exactly (42 / 56 / 72). */
    width: 42px;
    height: 42px;
    transition: transform 250ms ease;
    pointer-events: none;
}

@media (min-width: 768px) {
    .os-fs-thumb-play[b-cz4uk7p4zh] { width: 56px; height: 56px; }
}

@media (min-width: 1280px) {
    .os-fs-thumb-play[b-cz4uk7p4zh] { width: 72px; height: 72px; }
}

.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: 28px;
}

@media (min-width: 1100px) {
    .os-fs-copy-wrap[b-cz4uk7p4zh] { max-width: var(--os-measure-split, 520px); }
}

/* Andrew's signature, overlaid white on the portrait's bottom-left
   corner. The SVG is used only as a mask (its own colors are ignored);
   the visible fill is background-color — so we render it white. A soft
   drop-shadow keeps it legible over the photo. */
.os-fs-signature[b-cz4uk7p4zh] {
    position: absolute;
    left: 28px;
    bottom: 26px;
    width: 268px;
    height: 51px;
    z-index: 3;
    pointer-events: none;
    background-color: #ffffff;
    -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;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

@media (max-width: 767px) {
    .os-fs-signature[b-cz4uk7p4zh] {
        width: 168px;
        height: 32px;
        left: 18px;
        bottom: 18px;
    }
}

.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;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-fs-paragraph[b-cz4uk7p4zh] { font-size: 18px; }
}

.os-fs-cta-wrap[b-cz4uk7p4zh] {
    margin-top: 4px;
}

/* Secondary button — teal text + teal outline, transparent fill.
   Fills teal on hover. */
.os-fs-cta[b-cz4uk7p4zh] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.2px;
    color: #009296;
    background-color: transparent;
    border: 1.5px solid #009296;
    border-radius: 100px;
    padding: 13px 22px;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.os-fs-cta-arrow[b-cz4uk7p4zh] {
    flex-shrink: 0;
}

@media (hover: hover) {
    .os-fs-cta:hover[b-cz4uk7p4zh] {
        background-color: #009296;
        color: #fff;
    }
}

.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/OurStoryPillars.razor.rz.scp.css */
/* ======================================================
   Our Story — Pillars section. Scoped styles.

   Centered header + thesis intro, then the three principles as
   editorial feature blocks:
     - Feature 1 "Pure and Additive-Free": two-column split (product
       shot + copy with a teal checklist).
     - Features 2 & 3: a two-up row beneath, hairline-separated, each
       with an aqua icon chip.
   Serif-italic teal subheads (.os-pl-feature-head) tie the blocks to
   the page's accent language. Stacks to one column on mobile.
   ====================================================== */

/* White content section — the three principles (no video here). */
.os-pl[b-0thwkj6u7h] {
    background-color: #ffffff;
    padding: var(--os-pad-y, 48px) var(--os-pad-x, 20px);
}

.os-pl-inner[b-0thwkj6u7h] {
    max-width: var(--os-max, 1140px);
    margin: 0 auto;
}

/* ======================================================
   Video hero band — "Today" header + thesis over the drone footage.
   ====================================================== */
.os-pl-hero[b-0thwkj6u7h] {
    position: relative;
    overflow: hidden;
    background-color: #003b3c; /* dark fallback while the video loads */
    padding: 80px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .os-pl-hero[b-0thwkj6u7h] { padding: 110px 40px; }
}

/* Ambient background video (letterbox-fill trick: 177.78vh x 56.25vw keeps
   the 16:9 video covering the band at any aspect) + dark teal overlay. */
.os-pl-video-wrap[b-0thwkj6u7h] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.os-pl-video[b-0thwkj6u7h] {
    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;
}

.os-pl-overlay[b-0thwkj6u7h] {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 30, 35, 0.65);
    z-index: 1;
}

.os-pl-hero-inner[b-0thwkj6u7h] {
    position: relative;
    z-index: 2;
    max-width: var(--os-max, 1140px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ======================================================
   Centered header — title + horizontal teal divider
   ====================================================== */
.os-pl-header[b-0thwkj6u7h] {
    text-align: center;
    margin-bottom: 36px;
}

@media (min-width: 768px) {
    .os-pl-header[b-0thwkj6u7h] { margin-bottom: 44px; }
}

.os-pl-title[b-0thwkj6u7h] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: var(--os-h2-lh, 1.1);
    letter-spacing: var(--os-h2-ls, -1.5px);
    margin: 0;
    font-size: var(--os-h2, 54px);
}

.os-pl-title-accent[b-0thwkj6u7h] {
    color: #003b3c;
    font-style: normal;
    font-weight: 400;
}

.os-pl-divider[b-0thwkj6u7h] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    margin: 24px auto 0;
}

/* ======================================================
   Thesis intro — two lead paragraphs, centered
   ====================================================== */
.os-pl-intro[b-0thwkj6u7h] {
    max-width: 640px; /* matches the Quality statement body measure */
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.os-pl-lead[b-0thwkj6u7h] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-pl-lead[b-0thwkj6u7h] { font-size: 18px; }
}

/* First lead — teal medium, the punchy thesis line. */
.os-pl-lead--teal[b-0thwkj6u7h] {
    color: #009296;
    font-weight: 500;
}

/* ======================================================
   Shared feature subhead — serif italic teal (the page's accent voice)
   ====================================================== */
/* Pure block title — matches the Quality 'Capsules, never tablets' title
   exactly (serif roman + teal hairline, on the shared --os-h2 scale). */
.os-pl-block-title[b-0thwkj6u7h] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    font-size: var(--os-h2, 54px);
    line-height: var(--os-h2-lh, 1.1);
    letter-spacing: var(--os-h2-ls, -1.5px);
    margin: 0;
    text-wrap: balance; /* even the two lines in the narrow rail */
}

/* Title uses the shared --os-h2 scale so it matches "Quality you can't
   outsource" exactly; text-wrap: balance evens the wrap in the narrow rail. */

.os-pl-block-tealline[b-0thwkj6u7h] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    margin: 20px 0 22px;
}

/* Card title — serif roman, compact, mirrors the Quality form labels. */
.os-pl-card-title[b-0thwkj6u7h] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin: 0 0 8px;
}

@media (min-width: 768px) {
    .os-pl-card-title[b-0thwkj6u7h] { font-size: 22px; }
}

/* ======================================================
   Sticky product shot (left) + scrolling rail (right).
   Mirrors the Quality page's "Capsules, never tablets" hero: the image
   pins (position:sticky) while the right rail scrolls past it.
   ====================================================== */
.os-pl-sticky[b-0thwkj6u7h] {
    /* First element of the white section now (the intro moved to the video
       band), so the section padding handles the top gap. */
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .os-pl-sticky[b-0thwkj6u7h] {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
}

.os-pl-media-wrap[b-0thwkj6u7h] {
    width: 100%;
}

/* Matches the Quality 'Capsules, never tablets' hero exactly: 550px sticky
   image, two-column from 1100px, 60px gap. */
@media (min-width: 1100px) {
    .os-pl-media-wrap[b-0thwkj6u7h] {
        width: 550px;
        flex-shrink: 0;
        position: sticky;
        top: 120px;
    }
}

/* Scrolling rail — the three principle blocks stack and scroll past
   the pinned image. */
.os-pl-rail[b-0thwkj6u7h] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

@media (min-width: 768px) {
    .os-pl-rail[b-0thwkj6u7h] { gap: 32px; }
}

/* Product photo fills the rounded square edge-to-edge. */
.os-pl-stage[b-0thwkj6u7h] {
    border-radius: 20px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.os-pl-media[b-0thwkj6u7h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Temporary blank placeholder until the final image is supplied. */
.os-pl-stage--placeholder[b-0thwkj6u7h] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4dede;
}
.os-pl-stage--placeholder span[b-0thwkj6u7h] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7d7d;
}

/* Pure block — the open lead block of the rail (no card surface). */
.os-pl-block[b-0thwkj6u7h] {
    text-align: left;
}

/* Lead line under the feature head — matches the teal thesis lead
   (.os-pl-lead--teal): Inter medium, teal, 16/18. */
.os-pl-feature-intro[b-0thwkj6u7h] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0 0 22px;
    text-wrap: balance; /* short intro — even the two lines, no 'nothing else.' orphan */
}

@media (min-width: 768px) {
    .os-pl-feature-intro[b-0thwkj6u7h] { font-size: 18px; }
}

/* ======================================================
   Checklist — teal checks; breaks up the copy visually
   ====================================================== */
.os-pl-checklist[b-0thwkj6u7h] {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.os-pl-checklist li[b-0thwkj6u7h] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: Inter, sans-serif;
    font-weight: 400; /* regular */
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.1px;
    color: #003b3c;
    text-wrap: pretty; /* clean wrap on the long 4th item */
}

@media (min-width: 768px) {
    .os-pl-checklist li[b-0thwkj6u7h] { font-size: 18px; }
}

.os-pl-check[b-0thwkj6u7h] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: #009296;
}

.os-pl-feature-close[b-0thwkj6u7h] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.1px;
    margin: 0;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .os-pl-feature-close[b-0thwkj6u7h] { font-size: 18px; }
}

/* ======================================================
   Features 2 & 3 — two-up, hairline-separated, each with an icon chip
   ====================================================== */
/* Secondary principles — compact aqua cards, same size/feel as the
   Quality page's one-piece/two-piece capsule forms (#e8f9f9, 16px radius,
   tight padding) with a small icon chip added. */
.os-pl-card[b-0thwkj6u7h] {
    background-color: #e8f9f9; /* page-standard pale aqua (matches section bgs) */
    border-radius: 16px;
    padding: 24px 22px;
}

@media (min-width: 768px) {
    .os-pl-card[b-0thwkj6u7h] { padding: 28px 26px; }
}

/* Icon chip — small white disc so it reads as a lifted accent. */
.os-pl-feature-icon[b-0thwkj6u7h] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    color: #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 59, 60, 0.06);
}

.os-pl-feature-icon svg[b-0thwkj6u7h] {
    width: 20px;
    height: 20px;
}

.os-pl-feature-icon svg[b-0thwkj6u7h] {
    width: 24px;
    height: 24px;
}

/* Card copy — muted, 15px, mirrors the Quality form copy. */
.os-pl-feature-copy[b-0thwkj6u7h] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #4a6465;
    line-height: 1.55;
    letter-spacing: -0.2px;
    margin: 0;
    text-wrap: pretty;
}

/* ======================================================
   Reveal-on-scroll — matches the shared About.razor observer
   ====================================================== */
.os-pl [data-os-reveal][b-0thwkj6u7h],
.os-pl-hero [data-os-reveal][b-0thwkj6u7h] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-pl [data-os-reveal].os-revealed[b-0thwkj6u7h],
.os-pl-hero [data-os-reveal].os-revealed[b-0thwkj6u7h] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-pl [data-os-reveal][b-0thwkj6u7h],
    .os-pl-hero [data-os-reveal][b-0thwkj6u7h] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ======================================================
   Hero-band legibility — only the "Today" header + thesis flip to
   white/aqua over the dark video. The white content section below keeps
   its original ink/teal styling.
   ====================================================== */
.os-pl-hero .os-pl-title[b-0thwkj6u7h],
.os-pl-hero .os-pl-title-accent[b-0thwkj6u7h],
.os-pl-hero .os-pl-lead[b-0thwkj6u7h] {
    color: #ffffff;
}

/* Teal lead doesn't read on dark — lift to aqua (the hero's on-teal accent). */
.os-pl-hero .os-pl-lead--teal[b-0thwkj6u7h] {
    color: #48e1dc;
}

.os-pl-hero .os-pl-divider[b-0thwkj6u7h] {
    background-color: rgba(255, 255, 255, 0.55);
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryQuality.razor.rz.scp.css */
/* ======================================================
   Our Story — Quality section ("Quality you can't outsource").

   Same two-column component as the Quality page's "Capsules, never
   tablets" hero: copy (left) + a 550px sticky image (right). Two-column
   from 1100px, stacks below. White background. Reading measure + type
   scale share the page's --os- tokens.
   ====================================================== */

.os-qo[b-j51ywp92ip] {
    background-color: #ffffff;
    padding: var(--os-pad-y, 48px) var(--os-pad-x, 20px);
}

.os-qo-inner[b-j51ywp92ip] {
    max-width: var(--os-max, 1140px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
}

@media (min-width: 1100px) {
    .os-qo-inner[b-j51ywp92ip] {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
}

/* Copy column */
.os-qo-copy[b-j51ywp92ip] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (min-width: 1100px) {
    .os-qo-copy[b-j51ywp92ip] { max-width: 730px; }
}

.os-qo-title[b-j51ywp92ip] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    font-size: var(--os-h2, 54px);
    line-height: var(--os-h2-lh, 1.1);
    letter-spacing: var(--os-h2-ls, -1.5px);
    margin: 0;
}

.os-qo-title-accent[b-j51ywp92ip] {
    color: #003b3c;
    font-style: normal;
    font-weight: 400;
}

.os-qo-tealline[b-j51ywp92ip] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    margin: 2px 0;
    flex-shrink: 0;
}

.os-qo-paragraph[b-j51ywp92ip] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.4px;
    margin: 0;
    text-wrap: pretty;
    font-size: 16px;
    max-width: var(--os-measure-split, 520px);
}

@media (min-width: 768px) {
    .os-qo-paragraph[b-j51ywp92ip] { font-size: 18px; }
}

/* Lead paragraph — teal medium. */
.os-qo-paragraph--lead[b-j51ywp92ip] {
    color: #009296;
    font-weight: 500;
}

/* CTA — teal outline pill with arrow (links to the Quality page). Matches
   the other outline pill CTAs on the page. */
.os-qo-cta[b-j51ywp92ip] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 10px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.2px;
    color: #009296;
    background-color: transparent;
    border: 1.5px solid #009296;
    border-radius: 100px;
    padding: 13px 22px;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.os-qo-cta:hover[b-j51ywp92ip] {
    background-color: #009296;
    color: #fff;
}

.os-qo-cta-arrow[b-j51ywp92ip] {
    flex-shrink: 0;
}

/* Image column — 550px sticky (pins while the longer copy scrolls past). */
.os-qo-image-wrap[b-j51ywp92ip] {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 1100px) {
    .os-qo-image-wrap[b-j51ywp92ip] {
        width: 550px;
        position: sticky;
        top: 120px;
        align-self: flex-start;
    }
}

.os-qo-image[b-j51ywp92ip] {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    display: block;
    max-width: 550px;
    object-fit: cover;
}

/* Temporary blank placeholder until the final image is supplied. */
.os-qo-image--placeholder[b-j51ywp92ip] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4dede;
}
.os-qo-image--placeholder span[b-j51ywp92ip] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7d7d;
}

/* ======================================================
   Reveal-on-scroll — matches the shared About.razor observer
   ====================================================== */
.os-qo [data-os-reveal][b-j51ywp92ip] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-qo [data-os-reveal].os-revealed[b-j51ywp92ip] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-qo [data-os-reveal][b-j51ywp92ip] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/OurStory/OurStoryStats.razor.rz.scp.css */
/* ======================================================
   Our Story — Stats band. Scoped styles.

   Light pale-aqua band that matches the page's airy palette (no more
   saturated teal slab). Three proof-point stats, each grounded on a
   white card: a big TEAL serif number over an ink label — high
   contrast, so the numbers finally pop. Headline + closing line in
   ink with a teal italic accent. 3-up from 768; single column on
   mobile.

   NOTE (copy): headline reworked from marketing's fragment
   "...with lasting impacts." Revert if they prefer the literal.
   NOTE (data): the reviews figure is a placeholder (XX,000) until we
   wire the real count.
   ====================================================== */

.os-st[b-b2tflndnd3] {
    background-color: #e8f9f9;
    padding: var(--os-pad-y, 48px) var(--os-pad-x, 20px);
}

.os-st-inner[b-b2tflndnd3] {
    max-width: var(--os-max, 1140px);
    margin: 0 auto;
}

/* ======================================================
   Centered head
   ====================================================== */
.os-st-head[b-b2tflndnd3] {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

@media (min-width: 1100px) {
    .os-st-head[b-b2tflndnd3] { margin-bottom: 56px; }
}

.os-st-title[b-b2tflndnd3] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: var(--os-h2-lh, 1.1);
    letter-spacing: var(--os-h2-ls, -1.5px);
    margin: 0;
    font-size: var(--os-h2, 54px);
    text-wrap: balance;
}

.os-st-title-accent[b-b2tflndnd3] {
    color: #003b3c;
    font-style: normal;
    font-weight: 400;
}

.os-st-lead[b-b2tflndnd3] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.5;
    letter-spacing: -0.4px;
    margin: 20px auto 0;
    max-width: var(--os-measure, 640px);
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .os-st-lead[b-b2tflndnd3] { font-size: 18px; }
}

/* ======================================================
   Stat grid — white cards (grid stretches them to equal height)
   ====================================================== */
.os-st-grid[b-b2tflndnd3] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .os-st-grid[b-b2tflndnd3] {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

.os-st-item[b-b2tflndnd3] {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 28px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 59, 60, 0.05);
}

.os-st-num[b-b2tflndnd3] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #009296;
    line-height: 1;
    letter-spacing: -1.5px;
    font-size: 54px;
    font-variant-numeric: tabular-nums; /* equal-width digits so the count-up doesn't jitter */
}

@media (min-width: 768px) {
    .os-st-num[b-b2tflndnd3] { font-size: 58px; }
}

@media (min-width: 1100px) {
    .os-st-num[b-b2tflndnd3] { font-size: 68px; }
}

.os-st-plus[b-b2tflndnd3] {
    font-size: 0.7em;
    letter-spacing: 0;
    margin-left: 2px;
}

.os-st-label[b-b2tflndnd3] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #4a6465;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.1px;
    margin: 18px auto 0;
    max-width: 260px;
    text-wrap: pretty;
}

/* ======================================================
   Closing synthesis line — set off by a thin rule above
   ====================================================== */
.os-st-closing[b-b2tflndnd3] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    text-align: center;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.3px;
    max-width: 720px;
    margin: 44px auto 0;
    padding-top: 40px;
    border-top: 1px solid #cfe7e7;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .os-st-closing[b-b2tflndnd3] { font-size: 18px; }
}

/* ======================================================
   Reveal-on-scroll — matches the shared About.razor observer
   ====================================================== */
.os-st [data-os-reveal][b-b2tflndnd3] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.os-st [data-os-reveal].os-revealed[b-b2tflndnd3] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .os-st [data-os-reveal][b-b2tflndnd3] {
        opacity: 1;
        transform: none;
        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.05;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 40px;
}

.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: 58px; }
    .os-vh-subtitle[b-31senq5uzq] { font-size: 18px; }
}

/* Smooth ramp between 768 (58px) and 1280 (72px) */
@media (min-width: 960px) {
    .os-vh-title[b-31senq5uzq] { font-size: 68px; }
}

@media (min-width: 1280px) {
    .os-vh-title[b-31senq5uzq] { font-size: 72px; }
}

/* ======================================================
   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/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/QualityPreview/QpHeroLuxe.razor.rz.scp.css */
/* ======================================================
   Quality — hero. Built to Figma (node 1594:568).

   System: warm ivory ground #F6F2EC (sampled from the flat-lay so the
   packshot blends), brand ink #003b3c, brand teal #009296 accent,
   STIX Two Text serif + Inter. Centered lockup, generous air.
   ====================================================== */

.qhl[b-0dq6zfp2m7] {
    background-color: #F6F2EC;
    display: flex;
    justify-content: center;
    padding: 76px 24px 24px;
}

@media (min-width: 768px) { .qhl[b-0dq6zfp2m7] { padding: 96px 40px 28px; } }
@media (min-width: 1280px) { .qhl[b-0dq6zfp2m7] { padding: 100px 40px 28px; } }

.qhl-inner[b-0dq6zfp2m7] {
    max-width: 1080px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.qhl-lockup[b-0dq6zfp2m7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: qhl-rise-b-0dq6zfp2m7 0.9s cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

/* ---- Eyebrow — Inter Medium, brand teal, wide tracking ---- */
.qhl-label[b-0dq6zfp2m7] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2.24px;
    color: #009296;
    margin: 0 0 24px;
    font-size: 13px;
}

@media (min-width: 768px) { .qhl-label[b-0dq6zfp2m7] { font-size: 14px; } }

/* ---- Headline — STIX, brand ink, italic teal accent on "without" ---- */
.qhl-title[b-0dq6zfp2m7] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.0;
    letter-spacing: -1.2px;
    margin: 0 0 32px;
    text-wrap: balance;
    font-size: 44px;
}

@media (min-width: 768px) { .qhl-title[b-0dq6zfp2m7] { font-size: 68px; letter-spacing: -1.8px; } }
@media (min-width: 960px) { .qhl-title[b-0dq6zfp2m7] { font-size: 84px; letter-spacing: -2.1px; } }
@media (min-width: 1280px) { .qhl-title[b-0dq6zfp2m7] { font-size: 92px; letter-spacing: -2.4px; margin-bottom: 36px; } }

.qhl-title-accent[b-0dq6zfp2m7] {
    font-style: italic;
    font-weight: 400;
    color: #009296;
}

/* ---- Lede — Inter, brand ink, tight measure ---- */
.qhl-lede[b-0dq6zfp2m7] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    max-width: 470px;
    text-wrap: balance;
    font-size: 16px;
}

@media (min-width: 768px) { .qhl-lede[b-0dq6zfp2m7] { font-size: 18px; } }

/* ---- Product shot — flat-lay, blends into the ivory ground ---- */
.qhl-product[b-0dq6zfp2m7] {
    margin-top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    animation: qhl-rise-b-0dq6zfp2m7 1s cubic-bezier(0.22, 1, 0.36, 1) 320ms both;
}

.qhl-product-img[b-0dq6zfp2m7] {
    width: 100%;
    max-width: 847px;
    height: auto;
    display: block;
}

/* ---- Vertical connector line dropping toward the next section ---- */
.qhl-line[b-0dq6zfp2m7] {
    width: 1px;
    height: 64px;
    background-color: #003B3C;
    margin-top: 0;
    animation: qhl-line-grow-b-0dq6zfp2m7 0.7s ease 700ms both;
    transform-origin: top;
}

@media (min-width: 1280px) { .qhl-line[b-0dq6zfp2m7] { height: 100px; margin-top: 0; } }

@keyframes qhl-rise-b-0dq6zfp2m7 {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes qhl-line-grow-b-0dq6zfp2m7 {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .qhl-lockup[b-0dq6zfp2m7], .qhl-product[b-0dq6zfp2m7], .qhl-line[b-0dq6zfp2m7] { animation: none; }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QpSection11.razor.rz.scp.css */
/* ======================================================
   Quality — Section11. Final closer (testimonials).

   Cream ground. Header (title + teal line + teal eyebrow) → 3
   testimonial cards (desktop row | mobile peek-carousel) → stats
   row. Brand system: ink #003b3c for display type, teal #009296
   for accent labels + lines, white cards.
   ====================================================== */

.q-s11[b-oeldyk4qbj] {
    background-color: #F6F2EC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 20px;
}

@media (min-width: 768px) {
    .q-s11[b-oeldyk4qbj] { padding: 88px 40px; }
}

@media (min-width: 1280px) {
    .q-s11[b-oeldyk4qbj] { padding: 104px 40px; }
}

/* ======================================================
   Header copy — title + tealline + eyebrow
   ====================================================== */
.q-s11-header[b-oeldyk4qbj] {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 44px;
}

.q-s11-title[b-oeldyk4qbj] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -0.8px;
    margin: 0;
    text-wrap: balance;
    font-size: 40px;
}

@media (min-width: 768px) { .q-s11-title[b-oeldyk4qbj] { font-size: 58px; letter-spacing: -1.16px; } }
@media (min-width: 960px) { .q-s11-title[b-oeldyk4qbj] { font-size: 68px; } }
@media (min-width: 1280px) { .q-s11-title[b-oeldyk4qbj] { font-size: 72px; letter-spacing: -1.44px; } }

/* Two-beat headline — "Trusted by" / "health-conscious people." at
   every breakpoint (matches the board). */
.q-s11-title-break[b-oeldyk4qbj] {
    display: inline;
}

/* "health-conscious" stays on one line — protects the hyphenated compound. */
.q-s11-title-nowrap[b-oeldyk4qbj] {
    white-space: nowrap;
}

.q-s11-tealline[b-oeldyk4qbj] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.q-s11-eyebrow[b-oeldyk4qbj] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin: 0;
    font-size: 14px;
}

@media (min-width: 768px) { .q-s11-eyebrow[b-oeldyk4qbj] { font-size: 16px; } }

/* ======================================================
   Testimonial card — shared shell (desktop row + mobile carousel)
   ====================================================== */
.q-s11-card[b-oeldyk4qbj] {
    width: 100%;
    min-width: 0;
    height: 324px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 59, 60, 0.06);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.q-s11-card-stars[b-oeldyk4qbj] {
    width: 97px;
    height: 17px;
    object-fit: contain;
}

.q-s11-card-quote[b-oeldyk4qbj] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.35;
    margin: 0;
    flex: 1;
    font-size: 18px;
}

@media (min-width: 768px) { .q-s11-card-quote[b-oeldyk4qbj] { font-size: 20px; } }

.q-s11-card-divider[b-oeldyk4qbj] {
    height: 1px;
    background-color: rgba(0, 59, 60, 0.12);
}

.q-s11-card-name[b-oeldyk4qbj] {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #003b3c;
    margin: 0 0 3px;
}

.q-s11-card-role[b-oeldyk4qbj] {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 59, 60, 0.55);
    line-height: 1.35;
    margin: 0;
}

/* ======================================================
   Desktop: 3 cards in a flex row. Hidden below 768.
   ====================================================== */
.q-s11-cards-desktop[b-oeldyk4qbj] {
    display: none;
}

@media (min-width: 768px) {
    .q-s11-cards-desktop[b-oeldyk4qbj] {
        display: flex;
        gap: 20px;
        align-items: stretch;
        width: 100%;
        max-width: 1245px;
        margin-bottom: 44px;
    }

    .q-s11-card-wrap[b-oeldyk4qbj] {
        flex: 1 0 0;
        min-width: 0;
    }
}

/* ======================================================
   Mobile: scroll-snap peek carousel. Hidden at 768+.
   ====================================================== */
.q-s11-carousel-mobile[b-oeldyk4qbj] {
    width: 100%;
    margin-bottom: 44px;
}

@media (min-width: 768px) {
    .q-s11-carousel-mobile[b-oeldyk4qbj] { display: none; }
}

.q-s11-carousel-track[b-oeldyk4qbj] {
    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-oeldyk4qbj]::-webkit-scrollbar { display: none; }

.q-s11-carousel-slide[b-oeldyk4qbj] {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 82vw;
    max-width: 360px;
}

/* Dots — hollow → filled teal. */
.q-s11-dots[b-oeldyk4qbj] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.q-s11-dot[b-oeldyk4qbj] {
    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-oeldyk4qbj] {
    background: #009296;
}

/* ======================================================
   Stats row — 3 numbers with vertical separators
   ====================================================== */
.q-s11-stats[b-oeldyk4qbj] {
    width: 100%;
    max-width: 1245px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

@media (min-width: 768px) {
    .q-s11-stats[b-oeldyk4qbj] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
    }
}

.q-s11-stat[b-oeldyk4qbj] {
    text-align: center;
    flex: 1;
}

.q-s11-stat-value[b-oeldyk4qbj] {
    font-family: 'STIX Two Text', serif;
    color: #009296;
    line-height: 1.1;
    margin: 0 0 8px;
    font-weight: 400;
    font-size: 34px;
}

@media (min-width: 768px) { .q-s11-stat-value[b-oeldyk4qbj] { font-size: 44px; } }
@media (min-width: 1280px) { .q-s11-stat-value[b-oeldyk4qbj] { font-size: 52px; } }

.q-s11-stat-label[b-oeldyk4qbj] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #003b3c;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin: 0;
    font-size: 12px;
}

@media (min-width: 768px) { .q-s11-stat-label[b-oeldyk4qbj] { font-size: 13px; } }

/* Vertical separator — only at 768+ where the stats row is horizontal. */
.q-s11-stat-divider[b-oeldyk4qbj] {
    display: none;
}

@media (min-width: 768px) {
    .q-s11-stat-divider[b-oeldyk4qbj] {
        display: block;
        width: 1px;
        height: 64px;
        background-color: #009296;
        opacity: 0.3;
        flex-shrink: 0;
    }
}

/* ======================================================
   Reveal-on-scroll — cards stagger via inline --reveal-delay
   ====================================================== */
.q-s11 [data-os-reveal][b-oeldyk4qbj] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-s11 [data-os-reveal].os-revealed[b-oeldyk4qbj] {
    opacity: 1;
    transform: translateY(0);
}

.q-s11-card-wrap[b-oeldyk4qbj] {
    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-oeldyk4qbj] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s11 [data-os-reveal][b-oeldyk4qbj],
    .q-s11-card-wrap[b-oeldyk4qbj] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .q-s11-dot[b-oeldyk4qbj] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QpSection2.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-r4hwc4fnzv] {
    /* Cream ground continuous with the hero (#F6F2EC, sampled from Figma). */
    background-color: #F6F2EC;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 28px 20px 32px;
}

@media (min-width: 768px) {
    .q-s2[b-r4hwc4fnzv] { padding: 32px 40px 40px; }
}

@media (min-width: 1280px) {
    .q-s2[b-r4hwc4fnzv] { padding: 32px 40px 48px; }
}

/* ======================================================
   Copy block — centered, capped at 1000px
   ====================================================== */
.q-s2-copy[b-r4hwc4fnzv] {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 36px;
}

.q-s2-title[b-r4hwc4fnzv] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -0.8px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 40px;
}

@media (min-width: 768px) {
    .q-s2-title[b-r4hwc4fnzv] { font-size: 58px; letter-spacing: -1.16px; }
}

/* Smooth ramp between 768 (58px) and 1280 (72px) */
@media (min-width: 960px) {
    .q-s2-title[b-r4hwc4fnzv] { font-size: 68px; }
}

@media (min-width: 1280px) {
    .q-s2-title[b-r4hwc4fnzv] { font-size: 72px; letter-spacing: -1.44px; }
}

.q-s2-tealline[b-r4hwc4fnzv] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

/* Eyebrow — Inter Medium, brand teal, wide tracking (Figma spec). */
.q-s2-eyebrow[b-r4hwc4fnzv] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    text-transform: uppercase;
    letter-spacing: 2.56px;
    margin: 0;
    font-size: 14px;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .q-s2-eyebrow[b-r4hwc4fnzv] { font-size: 16px; }
}

.q-s2-paragraph[b-r4hwc4fnzv] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    max-width: 650px;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .q-s2-paragraph[b-r4hwc4fnzv] { font-size: 18px; }
}

/* ======================================================
   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-r4hwc4fnzv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

@media (min-width: 768px) {
    .q-s2-signature-mobile[b-r4hwc4fnzv] { 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-r4hwc4fnzv] {
    width: 220px;
    height: 34px;
    background-color: #0C6B64;
    -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-r4hwc4fnzv] {
    font-family: Inter, sans-serif;
    font-size: 15px;
    color: #26221C;
    margin: 0;
    line-height: 1.3;
}

.q-s2-signature-name[b-r4hwc4fnzv] {
    font-weight: 600;
}

.q-s2-signature-role[b-r4hwc4fnzv] {
    font-weight: 400;
}

/* ======================================================
   Video card — wide aspect, button. Click anywhere to play.
   ====================================================== */
.q-s2-video-wrap[b-r4hwc4fnzv] {
    width: 100%;
    /* 1255 = Section9's natural width (475 copy + 60 gap + 720 photo).
       Page-wide "wide content row" cap so all wide rows align at the
       right edge across sections. */
    max-width: 1255px;
    /* 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-r4hwc4fnzv] {
    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-r4hwc4fnzv] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 400ms ease;
}

.q-s2-video-overlay[b-r4hwc4fnzv] {
    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-r4hwc4fnzv] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 250ms ease;
    z-index: 2;
    width: 54px;
    height: 54px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .q-s2-video-play[b-r4hwc4fnzv] { width: 80px; height: 80px; }
}

@media (min-width: 1280px) {
    .q-s2-video-play[b-r4hwc4fnzv] { width: 104px; height: 104px; }
}

.q-s2-video-play img[b-r4hwc4fnzv] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (hover: hover) {
    .q-s2-video:hover .q-s2-video-img[b-r4hwc4fnzv] { transform: scale(1.02); }
    .q-s2-video:hover .q-s2-video-overlay[b-r4hwc4fnzv] { background-color: rgba(0, 0, 0, 0.15); }
    .q-s2-video:hover .q-s2-video-play[b-r4hwc4fnzv] { transform: translate(-50%, -50%) scale(1.1); }
}

.q-s2-video:focus-visible[b-r4hwc4fnzv] {
    outline: 3px solid #0C6B64;
    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-r4hwc4fnzv] {
    display: none;
}

@media (min-width: 768px) {
    .q-s2-video-sig[b-r4hwc4fnzv] {
        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-r4hwc4fnzv] {
        bottom: 52px;
        left: 50px;
    }
}

.q-s2-video-sig-mark[b-r4hwc4fnzv] {
    width: 238px;
    height: 41px;
    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-r4hwc4fnzv] {
        width: 324px;
        height: 50px;
    }
}

.q-s2-video-sig-attr[b-r4hwc4fnzv] {
    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-r4hwc4fnzv] { font-size: 18px; }
}

/* ======================================================
   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-r4hwc4fnzv] {
    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-r4hwc4fnzv] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s2 [data-os-reveal][b-r4hwc4fnzv] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .q-s2-video-img[b-r4hwc4fnzv],
    .q-s2-video-overlay[b-r4hwc4fnzv],
    .q-s2-video-play[b-r4hwc4fnzv] {
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QpSection3.razor.rz.scp.css */
/* ======================================================
   Quality — Section3. Comparison cards (Figma spec).

   Cream ground continuous with the sections above. Two cards,
   520px each with a 20px gap, centered. Typical = flat greige
   #EFEAE4; ProCaps = white with a soft cream lift. Type: STIX
   28px title, Inter 14px teal subtitle, Inter 16px body lines.
   ====================================================== */

.q-s3[b-eo1ac13ny4] {
    background-color: #F6F2EC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 32px;
}

@media (min-width: 768px) { .q-s3[b-eo1ac13ny4] { padding: 40px 40px 40px; } }
@media (min-width: 1280px) { .q-s3[b-eo1ac13ny4] { padding: 48px 40px 48px; } }

.q-s3-grid[b-eo1ac13ny4] {
    width: 100%;
    max-width: 1060px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
}

@media (min-width: 768px) {
    .q-s3-grid[b-eo1ac13ny4] { flex-direction: row; }
}

/* ======================================================
   Cards
   ====================================================== */
.q-s3-card[b-eo1ac13ny4] {
    flex: 1;
    border-radius: 20px;
    padding: 34px 32px 38px;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .q-s3-card[b-eo1ac13ny4] { max-width: 520px; padding: 38px 44px 44px; }
}

.q-s3-card--typical[b-eo1ac13ny4] {
    background-color: #EFEAE4;
}

.q-s3-card--procaps[b-eo1ac13ny4] {
    background-color: #fff;
    /* Figma: EFEAE4 @ 50% Multiply, 24 blur. CSS box-shadow has no blend
       mode, so the multiply is baked into the color — EFEAE4 multiplied
       against the cream bg resolves to ~rgb(230,222,212), which drawn at
       50% reproduces the Figma result on this background. */
    box-shadow: 0 0 24px 0 rgba(230, 222, 212, 0.5);
}

/* ---- Header — STIX title + teal uppercase subtitle ---- */
.q-s3-card-title[b-eo1ac13ny4] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    font-size: 28px;
    letter-spacing: -0.68px;
    line-height: 1.15;
    margin: 0;
}

.q-s3-card-subtitle[b-eo1ac13ny4] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    font-size: 14px;
    letter-spacing: 2.24px;
    text-transform: uppercase;
    line-height: 1.4;
    margin: 8px 0 0;
}

/* ---- Divider — faint hairline across the card content ---- */
.q-s3-card-divider[b-eo1ac13ny4] {
    height: 1px;
    width: 100%;
    background-color: rgba(0, 59, 60, 0.14);
    margin: 22px 0 24px;
}

/* ---- Body — plain airy text lines ---- */
.q-s3-list[b-eo1ac13ny4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.q-s3-item[b-eo1ac13ny4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.q-s3-icon[b-eo1ac13ny4] {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.q-s3-icon svg[b-eo1ac13ny4] {
    display: block;
    overflow: visible;
}

.q-s3-icon--x svg[b-eo1ac13ny4] { width: 10px; height: 10px; }
.q-s3-icon--check svg[b-eo1ac13ny4] { width: 10px; height: 8px; }

/* Typical — hollow teal ring + teal ✕, transparent center. */
.q-s3-icon--x[b-eo1ac13ny4] {
    background: transparent;
    border: 1.5px solid #009296;
    color: #009296;
}

/* ProCaps — solid teal disc, white check: the "chosen" mark reads as filled-in. */
.q-s3-icon--check[b-eo1ac13ny4] {
    background-color: #009296;
    color: #fff;
}

.q-s3-item-text[b-eo1ac13ny4] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    font-size: 16px;
    letter-spacing: -0.32px;
    line-height: 1.4;
    text-wrap: pretty;
}

/* ======================================================
   ALTERNATIVE — comparison table (Ritual / AG1 style) on white.
   Attributes down the left; two option columns; ProCaps is the
   featured column lifted on a soft teal panel with teal checks.
   ====================================================== */
.q-s3-alt-label[b-eo1ac13ny4] {
    margin: 72px 0 28px;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0, 59, 60, 0.4);
    text-align: center;
}

.q-s3-vs[b-eo1ac13ny4] {
    width: 100%;
    max-width: 1059px;
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    /* Card padding is set to COMPENSATE for the table's internal edge
       padding (header adds 8px on top, last row adds 20px below) so the
       visible whitespace comes out even on all four sides. */
    padding: 8px 22px 9px;
    box-shadow: 0 10px 44px rgba(0, 59, 60, 0.07);
}

@media (min-width: 768px) {
    .q-s3-vs[b-eo1ac13ny4] { padding: 28px 44px 24px; }
}

/* Full-width table. Attribute column flexes; the two option columns take
   a fixed share so the marks sit centered in substantial columns and the
   full-width row dividers carry the eye from each attribute to its answer. */
.q-vs-table[b-eo1ac13ny4] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.q-vs-c-opt[b-eo1ac13ny4] { width: 26%; }

/* Featured ProCaps column — soft teal tint via the <col>. */
.q-vs-c-feat[b-eo1ac13ny4] { background: rgba(0, 146, 150, 0.06); }

.q-vs-table th[b-eo1ac13ny4],
.q-vs-table td[b-eo1ac13ny4] {
    padding: 20px 16px;
    border-bottom: 1px solid rgba(0, 59, 60, 0.09);
    vertical-align: middle;
}

.q-vs-table tbody tr:last-child td[b-eo1ac13ny4] {
    border-bottom: none;
}

/* Header row */
.q-vs-table thead th[b-eo1ac13ny4] {
    border-bottom: 1px solid rgba(0, 59, 60, 0.16);
    /* Equal top/bottom so the header text is centered within the tinted
       ProCaps cell (asymmetry here reads as "tight above PROCAPS"). */
    padding-top: 16px;
    padding-bottom: 16px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Attribute column (left) — larger for presence at full width */
.q-vs-a[b-eo1ac13ny4] {
    text-align: left;
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: -0.2px;
    text-transform: none;
    color: #003b3c;
}

/* Attribute text flush-left with the divider lines (kill the left inset). */
.q-vs-table th.q-vs-a[b-eo1ac13ny4],
.q-vs-table td.q-vs-a[b-eo1ac13ny4] {
    padding-left: 0;
}

/* Option columns — marks centered in the column */
.q-vs-opt[b-eo1ac13ny4] { text-align: center; }
.q-vs-typ[b-eo1ac13ny4] { color: rgba(0, 59, 60, 0.45); }
.q-vs-pro[b-eo1ac13ny4] { color: #007e82; }

/* Typical — quiet muted dash bar */
.q-vs-dash[b-eo1ac13ny4] {
    display: inline-block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: rgba(0, 59, 60, 0.22);
    font-size: 0;
    vertical-align: middle;
}

/* ProCaps — filled teal disc + white SVG check (same mark as the
   bullet lists down the page, just a touch larger for the table). */
.q-vs-check[b-eo1ac13ny4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #009296;
}

.q-vs-check svg[b-eo1ac13ny4] {
    width: 44%;
    height: auto;
    display: block;
    overflow: visible;
}

@media (max-width: 767px) {
    .q-s3-vs[b-eo1ac13ny4] { border-radius: 16px; }
    /* Keep the proportional columns — they scale down cleanly; just ease the
       type + padding so nothing feels cramped. */
    .q-vs-table th[b-eo1ac13ny4],
    .q-vs-table td[b-eo1ac13ny4] { padding: 15px 8px; }
    .q-vs-a[b-eo1ac13ny4] { font-size: 15px; padding-right: 12px; }
    .q-vs-table thead th[b-eo1ac13ny4] { font-size: 11px; letter-spacing: 0.3px; }
    .q-vs-check[b-eo1ac13ny4] { width: 22px; height: 22px; }
    .q-vs-dash[b-eo1ac13ny4] { width: 14px; }
}

/* ======================================================
   Reveal-on-scroll — cards fade up, ProCaps lags 120ms
   ====================================================== */
.q-s3 [data-os-reveal][b-eo1ac13ny4] {
    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-eo1ac13ny4] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s3 [data-os-reveal][b-eo1ac13ny4] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QpSection4.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-tihly5a0jg] {
    background-color: #F6F2EC;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 32px;
}

@media (min-width: 768px) {
    .q-s4[b-tihly5a0jg] { padding: 40px 40px 40px; }
}

@media (min-width: 1280px) {
    .q-s4[b-tihly5a0jg] { padding: 48px 40px 48px; }
}

/* ======================================================
   Centered copy block
   ====================================================== */
.q-s4-copy[b-tihly5a0jg] {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
}

.q-s4-title[b-tihly5a0jg] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -0.8px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 40px;
}

@media (min-width: 768px) {
    .q-s4-title[b-tihly5a0jg] { font-size: 58px; letter-spacing: -1.16px; }
}

@media (min-width: 960px) {
    .q-s4-title[b-tihly5a0jg] { font-size: 68px; }
}

@media (min-width: 1280px) {
    .q-s4-title[b-tihly5a0jg] { font-size: 72px; letter-spacing: -1.44px; }
}

/* Two-beat headline — the <br> keeps "Formulation" on its own line
   above "without hype." at every breakpoint. */
.q-s4-title-break[b-tihly5a0jg] {
    display: inline;
}

.q-s4-tealline[b-tihly5a0jg] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

/* Eyebrow — Inter Medium, brand teal, wide tracking (Figma spec). */
.q-s4-eyebrow[b-tihly5a0jg] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin: 0;
    font-size: 14px;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .q-s4-eyebrow[b-tihly5a0jg] { font-size: 16px; }
}

/* Body — three paragraphs, tighter rhythm within the group. */
.q-s4-body[b-tihly5a0jg] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.q-s4-paragraph[b-tihly5a0jg] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    max-width: 625px;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .q-s4-paragraph[b-tihly5a0jg] { font-size: 18px; }
}

/* ======================================================
   Full-bleed image strip — edge-to-edge, no padding
   ====================================================== */
.q-s4-image-wrap[b-tihly5a0jg] {
    width: 100%;
    overflow: hidden;
}

.q-s4-image[b-tihly5a0jg] {
    width: 100%;
    aspect-ratio: 1679 / 619;
    object-fit: cover;
    display: block;
}

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s4 [data-os-reveal][b-tihly5a0jg] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-s4 [data-os-reveal].os-revealed[b-tihly5a0jg] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s4 [data-os-reveal][b-tihly5a0jg] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QpSection5.razor.rz.scp.css */
/* ======================================================
   Quality — Section5. "Carefully selected. Rigorously verified." (Figma).

   White-bg two-column: copy left, square image right. Stacks on
   mobile. STIX 48px heading (italic-teal accent), Inter 18px body,
   teal-ring check bullets. Part of the page's white block (with the
   Andrew quote + "never make tablets" below).
   ====================================================== */

.q-s5[b-a1gehj8fpk] {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 56px 20px;
}

@media (min-width: 768px) {
    .q-s5[b-a1gehj8fpk] { flex-direction: row; gap: 72px; align-items: center; padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .q-s5[b-a1gehj8fpk] { padding: 96px 40px; }
}

/* ---- Left — copy ---- */
.q-s5-copy[b-a1gehj8fpk] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (min-width: 768px) {
    .q-s5-copy[b-a1gehj8fpk] { max-width: 520px; }
}

.q-s5-title[b-a1gehj8fpk] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -0.64px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 32px;
}

@media (min-width: 768px) { .q-s5-title[b-a1gehj8fpk] { font-size: 40px; letter-spacing: -0.8px; } }
@media (min-width: 1280px) { .q-s5-title[b-a1gehj8fpk] { font-size: 48px; letter-spacing: -0.96px; } }

.q-s5-title-accent[b-a1gehj8fpk] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

.q-s5-paragraph[b-a1gehj8fpk] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s5-paragraph[b-a1gehj8fpk] { font-size: 18px; } }

/* "Every ingredient:" lead-in — slightly heavier hand-off to the list. */
.q-s5-paragraph--lead[b-a1gehj8fpk] {
    font-weight: 500;
}

/* ---- Bullet list — teal-ring + check ---- */
.q-s5-bullets[b-a1gehj8fpk] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.q-s5-bullet[b-a1gehj8fpk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.q-s5-icon[b-a1gehj8fpk] {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;
}

.q-s5-icon svg[b-a1gehj8fpk] {
    width: 10px;
    height: 8px;
    overflow: visible;
}

.q-s5-bullet-text[b-a1gehj8fpk] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s5-bullet-text[b-a1gehj8fpk] { font-size: 18px; } }

/* ---- Right — square image ---- */
.q-s5-image-wrap[b-a1gehj8fpk] {
    width: 100%;
    flex: 1;
}

@media (min-width: 768px) {
    .q-s5-image-wrap[b-a1gehj8fpk] { max-width: 653px; }
}

.q-s5-image[b-a1gehj8fpk] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* ---- Reveal-on-scroll ---- */
.q-s5 [data-os-reveal][b-a1gehj8fpk] {
    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-a1gehj8fpk] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s5 [data-os-reveal][b-a1gehj8fpk] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QpSection6.razor.rz.scp.css */
/* ======================================================
   Quality — Section6. Andrew Lessman pull-quote (Figma).

   Centered "pause moment" on the white block — STIX italic quote
   at 34px, brand ink, with the attribution in Inter beneath. Airy
   vertical padding gives the quote room to breathe between the two
   two-column blocks above and below it.
   ====================================================== */

.q-s6[b-zjcpgfplj7] {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
}

@media (min-width: 768px) {
    .q-s6[b-zjcpgfplj7] { padding: 48px 40px; }
}

@media (min-width: 1280px) {
    .q-s6[b-zjcpgfplj7] { padding: 64px 40px; }
}

.q-s6-content[b-zjcpgfplj7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.q-s6-quote[b-zjcpgfplj7] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    font-style: italic;
    color: #003b3c;
    line-height: 1.4;
    letter-spacing: -0.68px;
    margin: 0 0 20px;
    max-width: 760px;
    text-wrap: balance;
    font-size: 24px;
}

@media (min-width: 768px) { .q-s6-quote[b-zjcpgfplj7] { font-size: 30px; } }
@media (min-width: 1280px) { .q-s6-quote[b-zjcpgfplj7] { font-size: 34px; } }

.q-s6-attr[b-zjcpgfplj7] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    letter-spacing: -0.18px;
    line-height: 1.4;
    margin: 0;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s6-attr[b-zjcpgfplj7] { font-size: 18px; } }

/* ---- Reveal-on-scroll ---- */
.q-s6 [data-os-reveal][b-zjcpgfplj7] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-s6 [data-os-reveal].os-revealed[b-zjcpgfplj7] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s6 [data-os-reveal][b-zjcpgfplj7] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QpSection7.razor.rz.scp.css */
/* ======================================================
   Quality — Section7. "Why we will never make tablets." (Figma).

   Mirror of Section5 — white-bg two-column with the image on the
   LEFT, copy on the RIGHT at tablet+. Mobile stacks image-over-copy
   (column-reverse). STIX 48px heading (italic-teal accent), Inter
   18px body, teal-ring check bullets. Closes the white block.
   ====================================================== */

.q-s7[b-3ab685bhnw] {
    background-color: #fff;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 56px 20px;
}

@media (min-width: 768px) {
    .q-s7[b-3ab685bhnw] { flex-direction: row; gap: 72px; align-items: center; padding: 80px 40px; }
}

@media (min-width: 1280px) {
    .q-s7[b-3ab685bhnw] { padding: 96px 40px; }
}

/* ---- Left — square image ---- */
.q-s7-image-wrap[b-3ab685bhnw] {
    width: 100%;
    flex: 1;
}

@media (min-width: 768px) {
    .q-s7-image-wrap[b-3ab685bhnw] { max-width: 653px; }
}

.q-s7-image[b-3ab685bhnw] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* ---- Right — copy ---- */
.q-s7-copy[b-3ab685bhnw] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (min-width: 768px) {
    .q-s7-copy[b-3ab685bhnw] { max-width: 520px; }
}

.q-s7-title[b-3ab685bhnw] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -0.64px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    font-size: 32px;
}

@media (min-width: 768px) { .q-s7-title[b-3ab685bhnw] { font-size: 40px; letter-spacing: -0.8px; } }
@media (min-width: 1280px) { .q-s7-title[b-3ab685bhnw] { font-size: 48px; letter-spacing: -0.96px; } }

.q-s7-title-accent[b-3ab685bhnw] {
    color: #009296;
    font-style: italic;
    font-weight: 400;
}

/* Desktop-only line break — flows inline on mobile. */
.q-s7-title-break[b-3ab685bhnw] {
    display: none;
}

@media (min-width: 768px) {
    .q-s7-title-break[b-3ab685bhnw] { display: inline; }
}

.q-s7-paragraph[b-3ab685bhnw] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s7-paragraph[b-3ab685bhnw] { font-size: 18px; } }

.q-s7-paragraph--lead[b-3ab685bhnw] {
    font-weight: 500;
}

/* ---- Bullet list — teal-ring + check ---- */
.q-s7-bullets[b-3ab685bhnw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.q-s7-bullet[b-3ab685bhnw] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.q-s7-icon[b-3ab685bhnw] {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #009296;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;
}

.q-s7-icon svg[b-3ab685bhnw] {
    width: 10px;
    height: 8px;
    overflow: visible;
}

.q-s7-bullet-text[b-3ab685bhnw] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s7-bullet-text[b-3ab685bhnw] { font-size: 18px; } }

/* ---- Reveal-on-scroll ---- */
.q-s7 [data-os-reveal][b-3ab685bhnw] {
    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-3ab685bhnw] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s7 [data-os-reveal][b-3ab685bhnw] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QpSection8.razor.rz.scp.css */
/* ======================================================
   Quality — Section8. Scoped styles.

   Full-bleed video section mirroring the Our Story VideoHero:
   an autoplay/muted/loop Vimeo background behind a dark-teal
   overlay, with the "Manufacturing under our control." copy
   centered on top. Below the copy, three white line-icon callouts
   replace the former trio of video cards.

   The section is content-driven (min-height + generous padding)
   rather than a fixed height, because it carries more copy than
   the Our Story hero (title + eyebrow + two paragraphs + callouts).
   ====================================================== */

.q-s8[b-no856jac19] {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 600px;
    padding: 80px 20px;
}

@media (min-width: 768px) {
    .q-s8[b-no856jac19] { padding: 100px 40px; min-height: 660px; }
}

@media (min-width: 1280px) {
    .q-s8[b-no856jac19] { padding: 120px 40px; }
}

/* ---- Background video ----
   177.78vh × 56.25vw 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 16:9 iframe always covers the
   container regardless of the section's aspect ratio. */
.q-s8-video-wrap[b-no856jac19] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.q-s8-video[b-no856jac19] {
    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 ---- */
.q-s8-overlay[b-no856jac19] {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 30, 35, 0.65);
    z-index: 1;
}

/* ---- Foreground content ---- */
.q-s8-content[b-no856jac19] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    max-width: 860px;
    width: 100%;
}

/* ---- Headline — white, with white italic accent on "under" ---- */
.q-s8-title[b-no856jac19] {
    font-family: 'STIX Two Text', serif;
    line-height: 1.1;
    letter-spacing: -1.2px;
    margin: 0;
    font-weight: 400;
    text-wrap: balance;
    color: #fff;
    font-size: 40px;
}

@media (min-width: 768px) { .q-s8-title[b-no856jac19] { font-size: 58px; letter-spacing: -1.8px; } }
@media (min-width: 960px) { .q-s8-title[b-no856jac19] { font-size: 68px; } }
@media (min-width: 1280px) { .q-s8-title[b-no856jac19] { font-size: 72px; letter-spacing: -2.4px; } }

.q-s8-title-rest[b-no856jac19] {
    color: #fff;
}

.q-s8-title-accent[b-no856jac19] {
    color: #fff;
    font-style: italic;
    font-weight: 400;
}

.q-s8-paragraph[b-no856jac19] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #fff;
    line-height: 1.78;
    letter-spacing: -0.36px;
    margin: 0;
    /* Slightly wider than the section-body 720 column so two paragraphs
       don't run too tall over the video. */
    max-width: 760px;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s8-paragraph[b-no856jac19] { font-size: 18px; } }

/* ======================================================
   Callouts — three icon + label items. Stack on mobile, sit in a
   centered row at tablet+. Replaces the former video-card trio.
   ====================================================== */
.q-s8-callouts[b-no856jac19] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
}

@media (min-width: 768px) {
    .q-s8-callouts[b-no856jac19] {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 56px;
        margin-top: 16px;
    }
}

.q-s8-callout[b-no856jac19] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 220px;
}

.q-s8-callout-icon[b-no856jac19] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #48e1dc;
}

.q-s8-callout-icon svg[b-no856jac19] {
    width: 100%;
    height: 100%;
    display: block;
}

.q-s8-callout-label[b-no856jac19] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #fff;
    line-height: 1.4;
    letter-spacing: -0.2px;
    font-size: 15px;
}

@media (min-width: 768px) { .q-s8-callout-label[b-no856jac19] { font-size: 16px; } }

/* ======================================================
   Reveal-on-scroll — the whole content column fades in together.
   Picked up by the page-level observer in Learn.razor.
   ====================================================== */
.q-s8 [data-os-reveal][b-no856jac19] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-s8 [data-os-reveal].os-revealed[b-no856jac19] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-s8 [data-os-reveal][b-no856jac19] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QpSectionVideo.razor.rz.scp.css */
/* ======================================================
   Quality — Andrew video (Figma image2).

   Cream ground, one wide rounded card capped at 1059px, 1059:616
   aspect. Portrait fills the card; centered play button; click
   anywhere plays. Hover lifts the image + play, tints the overlay.
   ====================================================== */

.q-vid[b-0ggaeiaoza] {
    background-color: #F6F2EC;
    display: flex;
    justify-content: center;
    padding: 32px 20px 32px;
}

@media (min-width: 768px) { .q-vid[b-0ggaeiaoza] { padding: 40px 40px 40px; } }
@media (min-width: 1280px) { .q-vid[b-0ggaeiaoza] { padding: 48px 40px 48px; } }

.q-vid-wrap[b-0ggaeiaoza] {
    position: relative;
    width: 100%;
    max-width: 1059px;
}

/* Production note — temporary; remove before launch. */
.q-vid-note[b-0ggaeiaoza] {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 3;
    background: rgba(0, 30, 35, 0.75);
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.3;
    padding: 6px 10px;
    border-radius: 6px;
    pointer-events: none;
    max-width: 80%;
}

.q-vid-card[b-0ggaeiaoza] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1059 / 616;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: block;
}

.q-vid-img[b-0ggaeiaoza] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 400ms ease;
}

.q-vid-overlay[b-0ggaeiaoza] {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 250ms ease;
    z-index: 1;
    border-radius: 20px;
}

.q-vid-play[b-0ggaeiaoza] {
    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-vid-play[b-0ggaeiaoza] { width: 80px; height: 80px; } }
@media (min-width: 1280px) { .q-vid-play[b-0ggaeiaoza] { width: 88px; height: 88px; } }

.q-vid-play img[b-0ggaeiaoza] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (hover: hover) {
    .q-vid-card:hover .q-vid-img[b-0ggaeiaoza] { transform: scale(1.02); }
    .q-vid-card:hover .q-vid-overlay[b-0ggaeiaoza] { background-color: rgba(0, 0, 0, 0.12); }
    .q-vid-card:hover .q-vid-play[b-0ggaeiaoza] { transform: translate(-50%, -50%) scale(1.1); }
}

.q-vid-card:focus-visible[b-0ggaeiaoza] {
    outline: 3px solid #009296;
    outline-offset: 4px;
}

/* ---- Reveal-on-scroll ---- */
.q-vid [data-os-reveal][b-0ggaeiaoza] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.q-vid [data-os-reveal].os-revealed[b-0ggaeiaoza] {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .q-vid [data-os-reveal][b-0ggaeiaoza] { opacity: 1; transform: none; transition: none; }
    .q-vid-img[b-0ggaeiaoza], .q-vid-overlay[b-0ggaeiaoza], .q-vid-play[b-0ggaeiaoza] { transition: none; }
}
/* _content/ProcapsMainSite/Components/Pages/StaticPages/QualityPreview/QualityPreview.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-2k0qe50qx8] {
    background-color: #F6F2EC;
    padding: 32px 0;
}

@media (min-width: 768px) { .q-marquee[b-2k0qe50qx8] { padding: 40px 0; } }
@media (min-width: 1280px) { .q-marquee[b-2k0qe50qx8] { padding: 48px 0; } }

/* Quality-only: run the shared ScrollingBanner's copy a touch smaller
   than it appears on the homepage / PDP. Scoped with ::deep so the
   global component is untouched.

   IMPORTANT: only the font-size is reduced — the item padding is left
   alone. The marquee loops seamlessly by scrolling one full half-width
   (-50%), which only reads as seamless while a half stays wider than
   the viewport. Shrinking the type but keeping the padding keeps each
   item's overall width nearly unchanged, so the loop doesn't reopen the
   gap we closed by widening the pillar list. Mirrors the component's
   own breakpoints.

   line-height is also bumped from the component's 1 to 1.3: at 1 the line
   box equals the em height with no leading, so descenders (the tail of g /
   p / y — e.g. the "g" in "Ingredients") dip below the box and get shaved by
   the marquee's overflow:hidden. 1.3 gives them clearance. Scoped here so the
   global component keeps its tighter default. */
.q-marquee[b-2k0qe50qx8]  .sb-item { font-size: 30px; line-height: 1.3; color: #009296; }
.q-marquee[b-2k0qe50qx8]  .sb-divider { background: #009296; }

@media (min-width: 1280px) and (max-width: 1599px) {
    .q-marquee[b-2k0qe50qx8]  .sb-item { font-size: 24px; }
}

@media (min-width: 960px) and (max-width: 1279px) {
    .q-marquee[b-2k0qe50qx8]  .sb-item { font-size: 22px; }
}

@media (max-width: 959px) {
    .q-marquee[b-2k0qe50qx8]  .sb-item { font-size: 18px; }
}
/* _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;
    /* Bottom padding reserves the pill's TOP half + a small gap below the
       subtitle. Height is otherwise content-driven (no min-height, so there's
       no slack to blow the subtitle->pill gap out). Pill heights at the fixed
       widths below are ~102 / 156 / 266px, so half-pill is ~51 / 78 / 133. */
    padding: 28px 20px 79px;
    z-index: 2;
}

@media (min-width: 768px) {
    .q-banner[b-956sonv4s2] { padding: 28px 40px 110px; }
}

@media (min-width: 1280px) {
    /* Bottom clearance for the 400px pill (half-pill ~78 + gap). */
    .q-banner[b-956sonv4s2] { padding: 36px 40px 110px; }
}

/* ======================================================
   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 36px;
    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: 55px; 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.0;
    margin: 0 0 32px;
    font-size: 52px;
    animation: q-banner-fade-up-b-956sonv4s2 0.7s ease 350ms both;
}

@media (min-width: 768px) {
    .q-banner-title[b-956sonv4s2] { font-size: 74px; }
}

/* Smooth ramp between 768 (74px) and 1280 (106px) */
@media (min-width: 960px) {
    .q-banner-title[b-956sonv4s2] { font-size: 82px; }
}

@media (min-width: 1280px) {
    .q-banner-title[b-956sonv4s2] {
        font-size: 82px;
        letter-spacing: -1.8px;
    }
}

/* White italic — keeps "quality" full-contrast/visible (the aqua on teal
   was making the key word recede) while italic still gives it emphasis. */
.q-banner-title-accent[b-956sonv4s2] {
    font-style: italic;
    font-weight: 400;
    color: #fff;
}

@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;
    /* No bottom margin: the banner's padding-bottom now owns the gap down to
       the pill (sized to the pill's top half + clearance), so the spacing is
       exact at every width. */
    margin: 0;
    /* Standardized at 720px to match OurStoryBanner — keeps the
       two static-page heroes visually consistent. */
    max-width: 580px;
    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
   ====================================================== */
/* ======================================================
   Pill image — ONE element for every breakpoint. Anchored to the hero's
   bottom edge (top:100% = the teal/white seam) and pulled up exactly half
   its own height, so it bisects the seam 50/50. Fixed widths per breakpoint
   keep the size deliberate; the tight asset means box == visible capsule, so
   the half-pill clearances above/below are exact.
   ====================================================== */
.q-banner-pill-wrap[b-956sonv4s2] {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 260px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    animation: q-banner-pill-fade-b-956sonv4s2 0.7s ease 900ms both;
}

.q-banner-pill-wrap .q-banner-pill[b-956sonv4s2] {
    width: 100%;
    height: auto;
    display: block;
    /* Reserve the box from first paint (asset is 2599x1016) so the wrapper has
       its real height before the image decodes. Without this, height is 0 until
       load and the -50% centering translate (and the ::after shadow) snap into
       place when the pixels arrive — the intermittent "buggy" entrance. */
    aspect-ratio: 2599 / 1016;
}

/* Floating cast shadow: a soft, flattened ellipse on the "ground" below the
   pill (levitation look) rather than a shadow hugging the capsule. Scales with
   the pill via % width; blur/height/offset step up at larger sizes. */
.q-banner-pill-wrap[b-956sonv4s2]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    width: 68%;
    height: 16px;
    margin-top: 14px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.26) 0%,
        rgba(0, 0, 0, 0.11) 45%,
        rgba(0, 0, 0, 0) 72%);
    filter: blur(7px);
    z-index: -1;
    pointer-events: none;
}

@media (min-width: 768px) {
    .q-banner-pill-wrap[b-956sonv4s2] { width: 400px; }
    .q-banner-pill-wrap[b-956sonv4s2]::after { height: 20px; margin-top: 18px; filter: blur(9px); }
}

@media (min-width: 1280px) {
    /* Desktop holds the 400px (tablet) pill scale — a more restrained hero. */
    .q-banner-pill-wrap[b-956sonv4s2] { width: 400px; }
    .q-banner-pill-wrap[b-956sonv4s2]::after { height: 20px; margin-top: 18px; filter: blur(9px); }
}

@keyframes q-banner-pill-fade-b-956sonv4s2 {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ======================================================
   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[b-956sonv4s2] {
        animation: none;
    }

    .q-banner-line[b-956sonv4s2] { height: 55px; opacity: 1; }
}
/* _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;
    /* Top padding = the pill's BOTTOM half + a gap down to the heading. Pill
       heights ~102 / 156 / 266 -> half ~51 / 78 / 133, plus ~48 / 60 / 72 gap. */
    padding: 99px 20px 0;
}

@media (min-width: 768px) {
    .q-s2[b-k1z3hb4rz5] { padding: 138px 40px 0; }
}

@media (min-width: 1280px) {
    /* Top clearance for the 400px pill (half-pill ~78 + gap). */
    .q-s2[b-k1z3hb4rz5] { padding: 138px 40px 0; }
}

/* ======================================================
   Centered header — title + divider + teal eyebrow
   ====================================================== */
.q-s2-header[b-k1z3hb4rz5] {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .q-s2-header[b-k1z3hb4rz5] { margin-bottom: 52px; }
}

/* ======================================================
   Two-column body — square video (left) + copy (right).
   Mirrors the Our Story Founder grid: stacks on mobile, row from 1100.
   ====================================================== */
.q-s2-grid[b-k1z3hb4rz5] {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 1100px) {
    .q-s2-grid[b-k1z3hb4rz5] {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
}

/* Right column — copy */
.q-s2-copy[b-k1z3hb4rz5] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

@media (min-width: 1100px) {
    .q-s2-copy[b-k1z3hb4rz5] { max-width: 520px; }
}

.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: 34px;
}

@media (min-width: 768px) {
    .q-s2-title[b-k1z3hb4rz5] { font-size: 44px; }
}

@media (min-width: 960px) {
    .q-s2-title[b-k1z3hb4rz5] { font-size: 48px; }
}

@media (min-width: 1280px) {
    .q-s2-title[b-k1z3hb4rz5] { font-size: 54px; }
}

.q-s2-title-accent[b-k1z3hb4rz5] {
    color: #003b3c;
    font-style: normal;
    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;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    font-size: 16px;
    max-width: 640px;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .q-s2-eyebrow[b-k1z3hb4rz5] { font-size: 18px; }
}

.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;
    /* Shared centered reading column — matches the Our Story page (640). */
    max-width: 640px;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .q-s2-paragraph[b-k1z3hb4rz5] { font-size: 18px; }
}

/* ======================================================
   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: 220px;
    height: 34px;
    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.
   ====================================================== */
/* Left column — square video (~550 from 1100, like the Founder thumb).
   On mobile (stacked) the video drops to the END, below the copy. */
.q-s2-video-wrap[b-k1z3hb4rz5] {
    width: 100%;
    order: 1;
}

@media (min-width: 1100px) {
    .q-s2-video-wrap[b-k1z3hb4rz5] {
        order: 0; /* back to DOM order -> video on the left */
        width: 550px;
        flex-shrink: 0;
        /* Pin the video while the copy scrolls past (only has a visible
           effect where the copy is taller than the video). */
        position: sticky;
        top: 120px;
    }
}

.q-s2-video[b-k1z3hb4rz5] {
    appearance: none;
    /* Blank placeholder — deep teal gradient until the poster image lands. */
    background: linear-gradient(135deg, #0e6f68 0%, #053f3d 100%);
    border: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1 / 1; /* square, like the Founder video thumb */
    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: 42px;
    height: 42px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .q-s2-video-play[b-k1z3hb4rz5] { width: 56px; height: 56px; }
}

@media (min-width: 1280px) {
    .q-s2-video-play[b-k1z3hb4rz5] { width: 72px; height: 72px; }
}

.q-s2-video-play img[b-k1z3hb4rz5] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ======================================================
   Quote overlay — bottom-left, white serif on the blank placeholder
   ====================================================== */
.q-s2-video-quote[b-k1z3hb4rz5] {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 3;
    pointer-events: none;
    text-align: left;
}

@media (min-width: 768px) {
    .q-s2-video-quote[b-k1z3hb4rz5] { left: 28px; bottom: 26px; }
}

@media (min-width: 1280px) {
    .q-s2-video-quote[b-k1z3hb4rz5] { left: 38px; bottom: 34px; }
}

.q-s2-video-quote-text[b-k1z3hb4rz5] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.4px;
    margin: 0;
    text-wrap: balance; /* even the wrap in the square card */
}

@media (min-width: 768px) { .q-s2-video-quote-text[b-k1z3hb4rz5] { font-size: 22px; } }
@media (min-width: 1280px) { .q-s2-video-quote-text[b-k1z3hb4rz5] { font-size: 24px; } }

.q-s2-video-quote-attr[b-k1z3hb4rz5] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.2px;
    margin: 12px 0 0;
}

@media (min-width: 768px) { .q-s2-video-quote-attr[b-k1z3hb4rz5] { font-size: 16px; } }

@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: 238px;
    height: 41px;
    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: 324px;
        height: 50px;
    }
}

.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: 18px; }
}

/* ======================================================
   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/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;
    /* Extra top padding vs bottom: this headline sits under the dense
       comparison-card section, so it needs more breathing room above. */
    padding: 48px 20px;
}

@media (min-width: 768px) {
    .q-s4[b-ii3qt4737t] { padding: 64px 40px; }
}

@media (min-width: 1280px) {
    .q-s4[b-ii3qt4737t] { padding: 88px 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: 20px;
}

.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: 34px;
}

@media (min-width: 768px) {
    .q-s4-title[b-ii3qt4737t] { font-size: 44px; }
}

@media (min-width: 960px) {
    .q-s4-title[b-ii3qt4737t] { font-size: 48px; }
}

@media (min-width: 1280px) {
    .q-s4-title[b-ii3qt4737t] { font-size: 54px; }
}

.q-s4-title-accent[b-ii3qt4737t] {
    color: #003b3c;
    font-style: normal;
    font-weight: 400;
}

.q-s4-title-rest[b-ii3qt4737t] {
    color: #003b3c;
}

/* Two-beat headline — the <br> keeps "Formulation" on its own line
   above "without hype." at every breakpoint (desktop previously
   collapsed it to a single line). */
.q-s4-title-break[b-ii3qt4737t] {
    display: inline;
}

.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;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    font-size: 16px;
    max-width: 640px;
    text-wrap: pretty;
}

@media (min-width: 768px) {
    .q-s4-eyebrow[b-ii3qt4737t] { font-size: 18px; }
}

.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 centered reading column — matches the Our Story page (640). */
    max-width: 640px;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) {
    .q-s4-paragraph[b-ii3qt4737t] { font-size: 18px; }
}

/* ======================================================
   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. "Purity that's verifiable." Scoped styles.

   White section, two parts:
     1. .q-s5-main  — two-column (copy + botanical image), row at 768+
     2. .q-s5-verdict — full-width centered block beneath

   The three verification steps are a numbered vertical chain with a
   connecting line (the "chain of custody" made visual). The "no
   additive" line is a row of pill chips.
   ====================================================== */

.q-s5[b-08qpo1dbut] {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    padding: 48px 20px;
}

@media (min-width: 768px) {
    .q-s5[b-08qpo1dbut] { padding: 64px 40px; gap: 44px; }
}

@media (min-width: 1280px) {
    .q-s5[b-08qpo1dbut] { padding: 88px 40px; gap: 56px; }
}

/* ======================================================
   Top — two-column (copy + image)
   ====================================================== */
.q-s5-main[b-08qpo1dbut] {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

@media (min-width: 1100px) {
    .q-s5-main[b-08qpo1dbut] {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
}

.q-s5-copy[b-08qpo1dbut] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 1100px) {
    .q-s5-copy[b-08qpo1dbut] { max-width: 730px; }
}

.q-s5-eyebrow[b-08qpo1dbut] {
    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) { .q-s5-eyebrow[b-08qpo1dbut] { font-size: 16px; } }

.q-s5-title[b-08qpo1dbut] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    font-size: 34px;
}

@media (min-width: 768px) { .q-s5-title[b-08qpo1dbut] { font-size: 44px; } }
@media (min-width: 960px) { .q-s5-title[b-08qpo1dbut] { font-size: 48px; } }
@media (min-width: 1280px) { .q-s5-title[b-08qpo1dbut] { font-size: 54px; } }

.q-s5-title-accent[b-08qpo1dbut] {
    color: #003b3c;
    font-style: normal;
    font-weight: 400;
}

.q-s5-tealline[b-08qpo1dbut] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

.q-s5-paragraph[b-08qpo1dbut] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    line-height: 1.5;
    letter-spacing: -0.4px;
    margin: 0;
    text-wrap: pretty;
    font-size: 16px;
    max-width: 520px;
}

@media (min-width: 768px) { .q-s5-paragraph[b-08qpo1dbut] { font-size: 18px; } }

/* ======================================================
   Chain of custody — numbered steps with a connecting line
   ====================================================== */
.q-s5-chain[b-08qpo1dbut] {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 520px;
}

.q-s5-step[b-08qpo1dbut] {
    display: flex;
    gap: 18px;
    position: relative;
    padding-bottom: 28px;
}

.q-s5-step:last-child[b-08qpo1dbut] { padding-bottom: 0; }

/* Vertical connector linking each step to the next */
.q-s5-step:not(:last-child)[b-08qpo1dbut]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background-color: #cfe4e4;
}

.q-s5-step-num[b-08qpo1dbut] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    border: 1.5px solid #009296;
    color: #009296;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.q-s5-step-text[b-08qpo1dbut] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.5;
    letter-spacing: -0.4px;
    font-size: 16px;
    padding-top: 3px;
}

@media (min-width: 768px) { .q-s5-step-text[b-08qpo1dbut] { font-size: 18px; } }

/* ======================================================
   Right — square botanical image
   ====================================================== */
.q-s5-image-wrap[b-08qpo1dbut] {
    width: 100%;
}

@media (min-width: 1100px) {
    .q-s5-image-wrap[b-08qpo1dbut] {
        width: 550px;
        flex-shrink: 0;
        /* Pin the image while the copy scrolls past (consistent sticky). */
        position: sticky;
        top: 120px;
    }
}

.q-s5-image[b-08qpo1dbut] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.q-s5-image--placeholder[b-08qpo1dbut] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4dede;
}
.q-s5-image--placeholder span[b-08qpo1dbut] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7d7d;
}

/* ======================================================
   Verdict — centered block beneath the two columns
   ====================================================== */
/* Container matches the two-column block above (1180) so the hairline
   and block align with the content width. The text children keep their
   own comfortable reading measures, centered inside. */
.q-s5-verdict[b-08qpo1dbut] {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding-top: 40px;
    border-top: 1px solid #e8efef;
}

@media (min-width: 768px) {
    .q-s5-verdict[b-08qpo1dbut] { padding-top: 52px; gap: 24px; }
}

/* Lead — page body voice (Inter), lightly emphasized. */
.q-s5-verdict-lead[b-08qpo1dbut] {
    font-family: Inter, sans-serif;
    color: #003b3c;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.4px;
    margin: 0;
    max-width: 600px;
}

@media (min-width: 768px) { .q-s5-verdict-lead[b-08qpo1dbut] { font-size: 20px; } }

/* Excluded additives — four tiles, each additive struck through in teal.
   The absence is the visual: we literally cross them out. */
.q-s5-excluded[b-08qpo1dbut] {
    list-style: none;
    margin: 6px 0;
    padding: 0;
    width: 100%;
    max-width: 520px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 620px) {
    .q-s5-excluded[b-08qpo1dbut] {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        max-width: 820px;
    }
}

.q-s5-ex[b-08qpo1dbut] {
    background-color: #f7fafa;
    border: 1px solid #e3eded;
    border-radius: 16px;
    padding: 26px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

@media (hover: hover) {
    .q-s5-ex:hover[b-08qpo1dbut] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 59, 60, 0.06);
    }
}

.q-s5-ex-word[b-08qpo1dbut] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    font-size: 24px;
    color: #6b8585;
    text-decoration: line-through;
    text-decoration-color: #009296;
    text-decoration-thickness: 2px;
}

@media (min-width: 768px) { .q-s5-ex-word[b-08qpo1dbut] { font-size: 29px; } }

.q-s5-verdict-sub[b-08qpo1dbut] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #4a6465;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.2px;
    margin: 0;
    max-width: 520px;
}

@media (min-width: 768px) { .q-s5-verdict-sub[b-08qpo1dbut] { font-size: 16px; } }

.q-s5-closing[b-08qpo1dbut] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.3px;
    margin: 8px 0 0;
    max-width: 640px;
    text-wrap: pretty;
}

@media (min-width: 768px) { .q-s5-closing[b-08qpo1dbut] { font-size: 18px; } }

/* ======================================================
   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. Purity "verdict" band. Scoped styles.

   Warm tan full-width band that breaks up the white sections on either
   side. Centered: serif headline, four struck-through "excluded
   additive" tiles (white on the tan), then the sub + closing copy.
   (This slot previously held an Andrew quote, removed per marketing.)
   ====================================================== */

.q-s6[b-2jghqn1kol] {
    background-color: #F6F2EC;
    padding: 48px 20px;
}

@media (min-width: 768px) { .q-s6[b-2jghqn1kol] { padding: 64px 40px; } }
@media (min-width: 1280px) { .q-s6[b-2jghqn1kol] { padding: 88px 40px; } }

.q-s6-inner[b-2jghqn1kol] {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
}

/* Headline — serif statement, teal italic accent on "everything" */
.q-s6-title[b-2jghqn1kol] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-size: 34px;
    max-width: 820px;
    text-wrap: balance;
}

@media (min-width: 768px) { .q-s6-title[b-2jghqn1kol] { font-size: 44px; } }
@media (min-width: 960px) { .q-s6-title[b-2jghqn1kol] { font-size: 48px; } }
@media (min-width: 1280px) { .q-s6-title[b-2jghqn1kol] { font-size: 54px; } }

.q-s6-title-accent[b-2jghqn1kol] {
    color: #003b3c;
    font-style: normal;
    font-weight: 400;
}

/* Four excluded additives — struck through in teal */
.q-s6-excluded[b-2jghqn1kol] {
    list-style: none;
    margin: 4px 0;
    padding: 0;
    width: 100%;
    max-width: 520px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 620px) {
    .q-s6-excluded[b-2jghqn1kol] {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        /* Fill the full 1140 content frame so the tile row's edges line up
           with the Purity section above (which spans the same width). */
        max-width: none;
    }
}

@media (min-width: 960px) {
    .q-s6-excluded[b-2jghqn1kol] { gap: 20px; }
}

.q-s6-ex[b-2jghqn1kol] {
    background-color: #fff;
    border-radius: 16px;
    padding: 32px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 59, 60, 0.05);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Taller cards at the wider span so each tile reads as a substantial
   card, not a stretched bar. */
@media (min-width: 960px) {
    .q-s6-ex[b-2jghqn1kol] { padding: 44px 10px; }
}

@media (hover: hover) {
    .q-s6-ex:hover[b-2jghqn1kol] {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0, 59, 60, 0.08);
    }
}

.q-s6-ex-word[b-2jghqn1kol] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    font-size: 26px;
    color: #6b8585;
    text-decoration: line-through;
    text-decoration-color: #009296;
    text-decoration-thickness: 2px;
}

@media (min-width: 768px) { .q-s6-ex-word[b-2jghqn1kol] { font-size: 31px; } }

.q-s6-sub[b-2jghqn1kol] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.3px;
    margin: 0;
    max-width: 650px;
    text-wrap: pretty;
}

@media (min-width: 768px) { .q-s6-sub[b-2jghqn1kol] { font-size: 18px; } }

.q-s6-closing[b-2jghqn1kol] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.3px;
    margin: 0;
    max-width: 650px;
    text-wrap: pretty;
}

@media (min-width: 768px) { .q-s6-closing[b-2jghqn1kol] { font-size: 18px; } }

/* ======================================================
   Reveal-on-scroll
   ====================================================== */
.q-s6 [data-os-reveal][b-2jghqn1kol] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease var(--reveal-delay, 0ms),
                transform 0.6s ease var(--reveal-delay, 0ms);
}

.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. "Capsules, never tablets."

   Editorial split (ProCaps language): capsule photo + one copy column
   that carries the argument through type + teal accents. No gray panels,
   no pill tags, no bordered cards. Dry-climate closing beat beneath.
   ====================================================== */

.q-s7[b-87viwuzl9s] {
    background-color: #fff;
    padding: 48px 20px;
}

@media (min-width: 768px) { .q-s7[b-87viwuzl9s] { padding: 64px 40px; } }
@media (min-width: 1280px) { .q-s7[b-87viwuzl9s] { padding: 88px 40px; } }

.q-s7-inner[b-87viwuzl9s] {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
}

@media (min-width: 768px) { .q-s7-inner[b-87viwuzl9s] { gap: 60px; } }

/* ======================================================
   Split hero — same spec as Purity (image 550, copy 730, break 1100)
   ====================================================== */
.q-s7-hero[b-87viwuzl9s] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

@media (min-width: 1100px) {
    .q-s7-hero[b-87viwuzl9s] {
        flex-direction: row;
        align-items: flex-start;
        gap: 60px;
    }
}

.q-s7-hero-media[b-87viwuzl9s] { width: 100%; }

@media (min-width: 1100px) {
    .q-s7-hero-media[b-87viwuzl9s] {
        width: 550px;
        flex-shrink: 0;
        /* Pin the image while the (longer) copy column scrolls past it. */
        position: sticky;
        top: 120px;
        align-self: flex-start;
    }
}

.q-s7-hero-img[b-87viwuzl9s] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* Placeholder state — matches the Our Story "Quality you can't outsource"
   placeholder (neutral box + uppercase "Need final image"). Reuses the
   .q-s7-hero-img box (aspect-ratio + radius); overrides display for centering. */
.q-s7-hero-img--placeholder[b-87viwuzl9s] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d4dede;
}
.q-s7-hero-img--placeholder span[b-87viwuzl9s] {
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6b7d7d;
}

.q-s7-hero-copy[b-87viwuzl9s] {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 1100px) {
    .q-s7-hero-copy[b-87viwuzl9s] { max-width: 730px; }
}

.q-s7-title[b-87viwuzl9s] {
    font-family: 'STIX Two Text', serif;
    color: #003b3c;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin: 0;
    font-weight: 400;
    font-size: 34px;
}

@media (min-width: 768px) { .q-s7-title[b-87viwuzl9s] { font-size: 44px; } }
@media (min-width: 960px) { .q-s7-title[b-87viwuzl9s] { font-size: 48px; } }
@media (min-width: 1280px) { .q-s7-title[b-87viwuzl9s] { font-size: 54px; } }

.q-s7-title-accent[b-87viwuzl9s] {
    color: #003b3c;
    font-style: normal;
    font-weight: 400;
}

.q-s7-tealline[b-87viwuzl9s] {
    width: 50px;
    height: 1px;
    background-color: #009296;
    flex-shrink: 0;
}

/* Lead line — medium teal. */
.q-s7-intro[b-87viwuzl9s] {
    font-family: Inter, sans-serif;
    font-weight: 500;
    color: #009296;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    max-width: 520px;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s7-intro[b-87viwuzl9s] { font-size: 18px; } }

/* Body copy — identical rules to the "We make everything ourselves" body. */
.q-s7-tablet-copy[b-87viwuzl9s] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    max-width: 520px;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s7-tablet-copy[b-87viwuzl9s] { font-size: 18px; } }

/* The capsule answer — same plain body format as the rest of the rail. */
.q-s7-capsule-line[b-87viwuzl9s] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 0;
    max-width: 520px;
    text-wrap: pretty;
    font-size: 16px;
}

@media (min-width: 768px) { .q-s7-capsule-line[b-87viwuzl9s] { font-size: 18px; } }

/* The two capsule forms — soft aqua cards (brand tint), serif labels,
   side by side (stack to one column only on very narrow screens). */
.q-s7-forms[b-87viwuzl9s] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 12px;
}

@media (min-width: 480px) {
    .q-s7-forms[b-87viwuzl9s] { grid-template-columns: 1fr 1fr; }
}

.q-s7-form[b-87viwuzl9s] {
    background-color: #e8f9f9; /* page-standard pale aqua (matches section bgs) */
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Capsule image above the label (placeholder — same capsule as the hero for
   now). aspect-ratio reserves the box so there's no load jump. */
.q-s7-form-img[b-87viwuzl9s] {
    width: 52%;
    max-width: 150px;
    height: auto;
    display: block;
    aspect-ratio: 2599 / 1016;
    margin-bottom: 12px;
}

.q-s7-form-label[b-87viwuzl9s] {
    font-family: 'STIX Two Text', serif;
    font-weight: 400;
    color: #003b3c;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin: 0;
}

@media (min-width: 768px) { .q-s7-form-label[b-87viwuzl9s] { font-size: 22px; } }

.q-s7-form-copy[b-87viwuzl9s] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #4a6465;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.2px;
    margin: 0;
    text-wrap: pretty;
}

/* ======================================================
   Dry desert climate — closing paragraph in the rail (after the forms),
   set off by a thin top hairline. Same body rules as above.
   ====================================================== */
.q-s7-climate-copy[b-87viwuzl9s] {
    font-family: Inter, sans-serif;
    font-weight: 400;
    color: #003b3c;
    line-height: 1.56;
    letter-spacing: -0.36px;
    margin: 4px 0 0;
    max-width: 520px;
    font-size: 16px;
    text-wrap: pretty;
    padding-top: 24px;
    border-top: 1px solid #e8efef;
}

@media (min-width: 768px) { .q-s7-climate-copy[b-87viwuzl9s] { font-size: 18px; } }

/* ======================================================
   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/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 { font-size: 42px; letter-spacing: -0.84px; }
    .vc-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
    .vc-modal-grid { grid-template-columns: 340px minmax(0, 1fr); }
}*/

/* ======================================================
   Mobile: ≤959px
   ====================================================== */
@media (max-width: 1279px) {
    .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;
    }
}