/* ---------------------------------------------------------------------------
 * Enhanced single-product layout.
 * Loaded only on products returned by ps_enhanced_product_ids() (Mounjaro).
 * Every selector is scoped to .ps-enhanced-product or a .ps- class so it
 * cannot affect any other product or page.
 * ------------------------------------------------------------------------- */

.ps-enhanced-product {
    --ps-ink: #14142B;
    --ps-muted: #5b6182;
    --ps-line: #e4e6f0;
    --ps-tint: #F5F6FB;
    --ps-accent: #3a52f7;
    --ps-accent-soft: #E7E9FC;
}

/* ---------- shared section furniture ---------- */

/* Astra floats the product gallery left and .summary right inside div.product.
 * Our sections are siblings of those floats, so without an explicit clear they
 * start at the top of the float context and render on top of the title and
 * gallery. clear:both drops each section below both columns. */
.ps-sec {
    clear: both;
    padding: 56px 0;
    border-top: 1px solid var(--ps-line);
}

/* Wider content area. Astra's default .ast-container cap is 1240px, which
 * leaves ~340px of dead space each side at 1920. Scoped to the body class so
 * only this product is affected. */
.ps-enhanced-product .ast-container {
    max-width: 1500px;
}

/* Matches the hero's inner width so the sections line up with the gallery and
 * summary above them rather than sitting inset. Individual text blocks keep
 * their own ch-based caps, so line length stays readable. */
.ps-wrap {
    width: 100%;
    max-width: 1460px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.ps-sec h2 {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ps-ink);
    margin: 0 0 10px;
    letter-spacing: -.4px;
}

.ps-sec-intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ps-muted);
    margin: 0 0 28px;
    max-width: 62ch;
}

.ps-fineprint {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ps-muted);
    margin: 16px 0 0;
}

/* ---------- hero: equal-height columns ----------
 * Astra floats the gallery left and the summary right, so the two columns end
 * at different heights and the gallery leaves a gap beneath it. Flex with
 * align-items:stretch makes them equal height. Our own sections are also
 * children of div.product, so they are forced to full-width rows. */

.ps-enhanced-product div.product {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.ps-enhanced-product div.product > .woocommerce-product-gallery {
    float: none;
    width: 50%;
    margin: 0;
}

.ps-enhanced-product div.product > .summary.entry-summary {
    float: none;
    width: 46%;
    margin: 0 0 0 4%;
}

.ps-enhanced-product div.product > .ps-sec {
    flex: 0 0 100%;
    width: 100%;
}

/* Let the image grow to the full column height. contain keeps the pen
 * uncropped - the source is a 1:1 shot of a horizontal pen spanning almost the
 * full width, so cover would clip the needle and cap. */
.ps-enhanced-product .woocommerce-product-gallery__wrapper,
.ps-enhanced-product .woocommerce-product-gallery__image {
    height: 100%;
}

.ps-enhanced-product .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- hero: claim bullets ---------- */

.ps-enhanced-product .ps-hero-points {
    list-style: none;
    margin: 14px 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ps-enhanced-product .ps-hero-points li {
    position: relative;
    padding-left: 27px;
    font-size: 15px;
    line-height: 1.5;
    color: #3f456b;
}

.ps-enhanced-product .ps-hero-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ps-accent-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233a52f7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5'/%3E%3C/svg%3E");
    background-size: 11px 11px;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---------- hero: delivery note ---------- */

.ps-enhanced-product .ps-delivery-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--ps-tint);
    border: 1px solid var(--ps-line);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #3f456b;
}

.ps-enhanced-product .ps-delivery-note img {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
}

/* ---------- trust row ---------- */

.ps-trust {
    border-top: 1px solid var(--ps-line);
}

/* Rounded banner matching the .ps-delivery-note box in the hero:
 * same tint, same 1px border, same 12px radius. */
.ps-trust-list {
    list-style: none;
    margin: 0;
    padding: 34px 32px;
    background: var(--ps-tint);
    border: 1px solid var(--ps-line);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.ps-trust-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ps-ink);
}

/* Flex items default to min-width:auto, which stops the label shrinking and
 * pushes it out of its grid track on narrow screens. */
.ps-trust-list li span {
    min-width: 0;
}

.ps-trust-list img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 14px;
}

/* ---------- dose schedule ---------- */

.ps-doses-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 44px;
    align-items: start;
}

.ps-doses-copy p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ps-muted);
    margin: 0 0 22px;
    max-width: 60ch;
}

.ps-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ps-dose-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 340px;
}

.ps-dose-table th,
.ps-dose-table td {
    text-align: left;
    padding: 13px 16px;
    border-bottom: 1px solid var(--ps-line);
}

.ps-dose-table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ps-muted);
    border-bottom: 1px solid #d5d8e6;
}

.ps-dose-table tbody tr:nth-child(odd) {
    background: var(--ps-tint);
}

.ps-dose-table td:last-child {
    font-weight: 700;
    color: var(--ps-ink);
    white-space: nowrap;
}

/* Sticky within the dose section. Works because .ps-doses-grid uses
 * align-items:start - a stretched grid item cannot stick. The 100px offset
 * clears a sticky site header if one appears on scroll; adjust here only. */
.ps-doses-panel {
    position: sticky;
    top: 100px;
    background: var(--ps-accent-soft);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-doses-panel img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------- governance ---------- */

.ps-gov-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 22px;
}

.ps-gov-card {
    background: var(--ps-ink);
    color: #fff;
    border-radius: 16px;
    padding: 24px 26px;
}

.ps-gov-role {
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #A9AFD6;
    margin: 0 0 10px;
}

.ps-gov-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #fff;
}

.ps-gov-title {
    font-size: 15px;
    margin: 0 0 2px;
    color: #C9CEEA;
}

.ps-gov-reg {
    font-size: 14px;
    margin: 0;
    color: #A9AFD6;
}

.ps-gov-meta {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--ps-line);
    border: 1px solid var(--ps-line);
    border-radius: 16px;
    overflow: hidden;
}

.ps-gov-meta > div {
    background: #fff;
    padding: 18px 20px;
}

.ps-gov-meta dt {
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ps-muted);
    margin: 0 0 6px;
}

.ps-gov-meta dd {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ps-ink);
}

/* ---------- FAQ ---------- */

/* Matched to the .faq-style-01 accordion on /online-treatments/weight-loss/
 * so the two FAQ sections look like one component. Both are native
 * <details>/<summary>, and both allow multiple items open at once, so only the
 * styling needed changing - no behaviour change. */
.ps-faq-list {
    margin-top: 22px;
}

.ps-faq-item {
    border: 1px solid #1A3C341A;
    border-radius: 17px;
    box-shadow: 0 4px 20px 0 #0000000f;
    margin-bottom: 12px;
}

.ps-faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 25px;
    position: relative;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #0B1E3D;
}

.ps-faq-item > summary::-webkit-details-marker {
    display: none;
}

.ps-faq-item > summary:focus-visible {
    outline: 2px solid var(--ps-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.ps-faq-mark {
    position: absolute;
    right: 25px;
    top: 50%;
    width: 31px;
    height: 31px;
    margin-top: -15.5px;
    border-radius: 8px;
    background: #ebf0fe;
    transition: transform .18s ease;
}

.ps-faq-mark::before,
.ps-faq-mark::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #2563EB;
}

.ps-faq-mark::before {
    width: 13px;
    height: 2px;
    margin: -1px 0 0 -6.5px;
}

.ps-faq-mark::after {
    width: 2px;
    height: 13px;
    margin: -6.5px 0 0 -1px;
}

/* Plus rotates into a cross when open, matching .faq-style-01's
 * Pluse-icon / Cross-icon swap. */
.ps-faq-item[open] .ps-faq-mark {
    transform: rotate(45deg);
}

.ps-faq-body {
    padding: 0 25px 20px;
}

.ps-faq-body p {
    font-size: 15px;
    line-height: 25px;
    color: #1A3C34;
    margin: 0;
    max-width: 78ch;
}

/* ---------- journey ---------- */

.ps-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.ps-journey-card {
    background: #fff;
    border: 1px solid var(--ps-line);
    border-radius: 18px;
    padding: 26px 24px;
    overflow: hidden;
}

/* Pulled to the card edges, so the image sits flush at the top. */
.ps-journey-media {
    margin: -26px -24px 20px;
    aspect-ratio: 16 / 9;
    background: var(--ps-tint);
    overflow: hidden;
}

.ps-journey-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ps-journey-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ps-accent);
    margin: 0 0 6px;
}

.ps-journey-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--ps-ink);
    margin: 0 0 14px;
}

.ps-journey-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ps-journey-card li {
    position: relative;
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ps-muted);
}

.ps-journey-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ps-accent);
}

/* ---------- closing CTA ---------- */

.ps-final-cta-inner {
    background: var(--ps-tint);
    border: 1px solid var(--ps-line);
    border-radius: 20px;
    padding: 40px 36px;
    text-align: center;
}

.ps-final-cta-inner h2 {
    margin-bottom: 8px;
}

.ps-final-cta-inner p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ps-muted);
    margin: 0 auto 24px;
    max-width: 56ch;
}

/* .StartConsltbutton styling is inherited from style-step-questions.css so the
 * button matches the hero exactly. Only the layout is set here. */
.ps-final-cta-inner .StartConsltbutton {
    text-decoration: none;
}

/* ---------- calculator wrapper ---------- */

.ps-calc .wlc-bmi-card {
    margin-top: 4px;
    margin-left: auto;
    margin-right: auto;
}

.ps-calc h2,
.ps-calc .ps-sec-intro {
    text-align: center;
}

.ps-calc .ps-sec-intro {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {

    .ps-doses-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .ps-journey-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ps-trust-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Single column below this width - the panel follows the table, so
     * sticking it would park it below the content it illustrates. */
    .ps-doses-panel {
        position: static;
    }

    /* Stack the hero rather than squeezing two narrow columns. */
    .ps-enhanced-product div.product > .woocommerce-product-gallery,
    .ps-enhanced-product div.product > .summary.entry-summary {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 767px) {

    .ps-sec {
        padding: 40px 0;
    }

    .ps-sec h2 {
        font-size: 24px;
    }

    .ps-journey-grid,
    .ps-gov-meta,
    .ps-trust-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .ps-trust-list {
        padding: 18px 18px;
        gap: 16px;
    }

    .ps-gov-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ps-doses-panel {
        padding: 20px;
    }

    .ps-faq-item > summary {
        font-size: 16px;
        padding: 18px 62px 18px 18px;
    }

    .ps-faq-mark {
        right: 18px;
    }

    .ps-faq-body {
        padding: 0 18px 18px;
    }

    .ps-journey-media {
        margin: -26px -24px 18px;
    }

    .ps-final-cta-inner {
        padding: 30px 22px;
    }
}

/* ---------------------------------------------------------------------------
 * FAQ - tab layout (wide screens only)
 *
 * The accordion markup is still what the server sends and still what a phone
 * or a scriptless browser gets. JS builds this alongside it and hides one or
 * the other with the `hidden` attribute, so only one is ever in the
 * accessibility tree.
 * ------------------------------------------------------------------------- */

.ps-enhanced-product .ps-faq-tabs[hidden],
.ps-enhanced-product .ps-faq-list[hidden] {
    display: none;
}

.ps-enhanced-product .ps-faq-tabs {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    border: 1px solid var(--ps-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.ps-enhanced-product .ps-faq-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--ps-tint);
    border-right: 1px solid var(--ps-line);
}

.ps-enhanced-product .ps-faq-tab {
    /* Astra styles bare buttons; every property it sets has to be answered
     * here or the tabs inherit a dark pill. */
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    padding: 12px 14px;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ps-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

/* Astra's customiser sets button:hover{background:#0b1e3d;color:#fff}
 * globally, so background is declared here as well as colour - setting only
 * colour leaves dark text on Astra's dark navy. */
.ps-enhanced-product .ps-faq-tab:hover,
.ps-enhanced-product .ps-faq-tab:focus {
    background: #fff;
    color: var(--ps-ink);
}

.ps-enhanced-product .ps-faq-tab:focus-visible {
    outline: 2px solid var(--ps-accent);
    outline-offset: -2px;
}

.ps-enhanced-product .ps-faq-tab.is-active,
.ps-enhanced-product .ps-faq-tab[aria-selected="true"] {
    background: #fff;
    color: var(--ps-ink);
    font-weight: 600;
    border-left-color: var(--ps-accent);
    box-shadow: 0 1px 2px rgba(20, 20, 43, .06);
}

.ps-enhanced-product .ps-faq-panels {
    padding: 30px 34px;
}

.ps-enhanced-product .ps-faq-panel[hidden] {
    display: none;
}

.ps-enhanced-product .ps-faq-panel:focus-visible {
    outline: 2px solid var(--ps-accent);
    outline-offset: 4px;
}

.ps-enhanced-product .ps-faq-panel-title {
    margin: 0 0 14px;
    font-size: 21px;
    line-height: 1.3;
    color: var(--ps-ink);
}

.ps-enhanced-product .ps-faq-panel .ps-faq-body {
    color: var(--ps-muted);
}

/* ps-faq-body-typography
 * The answers sat at body size against a 300px tab rail, which left the panel
 * looking half-empty on a wide screen. Larger type and a longer measure fill
 * it without the text running past a comfortable line length - 70ch at this
 * size still lands inside the 65-75 character range. */
.ps-enhanced-product .ps-faq-panel .ps-faq-body {
    font-size: 17px;
    line-height: 1.75;
}

.ps-enhanced-product .ps-faq-panel .ps-faq-body p {
    margin: 0 0 16px;
    max-width: 70ch;
    font-size: inherit;
    line-height: inherit;
}

.ps-enhanced-product .ps-faq-panel .ps-faq-body li {
    margin-bottom: 8px;
    line-height: inherit;
}

.ps-enhanced-product .ps-faq-panel .ps-faq-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 899px) {
    /* Belt and braces: if the script never runs, the tab block is not in the
     * document at all; if it ran and the viewport then narrowed, JS re-hides
     * it. This covers the gap between those two. */
    .ps-enhanced-product .ps-faq-tabs {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * Why go with PillSuite
 * ------------------------------------------------------------------------- */

.ps-enhanced-product .ps-why-eyebrow {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ps-accent);
}

.ps-enhanced-product .ps-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.ps-enhanced-product .ps-why-item {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A 4:3 panel per point. aspect-ratio rather than a fixed height keeps the
 * four in step as the column narrows, and object-fit: cover means a supplied
 * photograph is never distorted, only cropped. */
.ps-enhanced-product .ps-why-media {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 16px;
    border-radius: 14px;
    overflow: hidden;
    /* Same tint and border the icon tiles carried, so the panels sit in the
     * same family as the rest of the page. With a photograph on top the tint
     * only shows while it loads, but it keeps the frame consistent and stops
     * a broken image rendering as a white hole. */
    background: var(--ps-accent-soft);
    border: 1px solid #C9CEEA;
}

.ps-enhanced-product .ps-why-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback state, shown only until a photograph is chosen. The icon keeps its
 * own size and sits centred on the tint rather than being stretched to fill a
 * panel it was never drawn for. */
.ps-enhanced-product .ps-why-media--icon {
    display: grid;
    place-items: center;
    background: var(--ps-accent-soft);
    border-color: #C9CEEA;
}

.ps-enhanced-product .ps-why-media--icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.ps-enhanced-product .ps-why-item h3 {
    margin: 0 0 6px;
    font-size: 17px;
    line-height: 1.35;
    color: var(--ps-ink);
}

.ps-enhanced-product .ps-why-item p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ps-muted);
}

@media (max-width: 899px) {
    .ps-enhanced-product .ps-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .ps-enhanced-product .ps-why-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}