/* Single product page. */


/* Gallery ----------------------------------------------------------------- */

.igm-product__media {
    position: relative;
}

.woocommerce-product-gallery {
    position: relative;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--gradient-product-frame);
    overflow: hidden;
}

.woocommerce-product-gallery__image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0 10px 10px;
    list-style: none;
    overflow-x: auto;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 68px;
}

.woocommerce-product-gallery .flex-control-thumbs img {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--white);
    cursor: pointer;
    opacity: .65;
    transition: var(--transition-fast);
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
    opacity: 1;
    border-color: var(--navy-700);
}

.woocommerce span.onsale {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    background: var(--color-secondary);
    color: var(--white);
    font: 700 11px/1 var(--font-body);
}

/* Summary ----------------------------------------------------------------- */

.igm-product__title {
    margin-bottom: 6px;
    font-size: clamp(22px, 3.4vw, 28px);
}

.igm-product__meta {
    margin-bottom: 10px;
    font: 13.5px/1.6 var(--font-body);
    color: var(--gray-600);
}

/* Selectors repeat div.product.igm-product (not just .igm-product) to beat
   WooCommerce's own woocommerce.css, which ships
   ".woocommerce div.product p.price, .woocommerce div.product span.price"
   at higher specificity (3 classes + 2 elements vs. our previous 2 classes)
   and was winning with its default olive/gold instead of the brand navy. */
.woocommerce div.product.igm-product p.price,
.woocommerce div.product.igm-product span.price,
.igm-product .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
    font: 700 26px/1.1 var(--font-display);
    color: var(--navy-700);
}

.igm-product .price del {
    font: 400 15px/1 var(--font-body);
    color: var(--gray-500);
    opacity: 1;
}

.igm-product .price ins {
    background: none;
    text-decoration: none;
    /* Red is reserved for an actual discount, not every price on the site —
       only the current price next to a struck-through original gets it. */
    color: var(--color-secondary);
}

.woocommerce-product-details__short-description {
    margin-bottom: 18px;
    font: 14.5px/1.7 var(--font-body);
    color: var(--gray-700);
}

/* Add to cart ------------------------------------------------------------- */

.igm-product form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 18px 0;
}

.igm-product form.cart .quantity input {
    width: 76px;
    min-height: 46px;
    padding: 10px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
    text-align: center;
    font: 15px/1 var(--font-body);
}

.igm-product form.cart .single_add_to_cart_button {
    flex: 1;
    min-width: 180px;
    min-height: 46px;
    font-size: 15px;
}

.igm-product .variations {
    width: 100%;
    margin-bottom: 12px;
}

.igm-product .variations th,
.igm-product .variations td {
    padding: 6px 0;
    text-align: left;
    vertical-align: middle;
}

.igm-product .variations label {
    font: 600 13px/1.4 var(--font-body);
    color: var(--gray-700);
}

.igm-product .stock.out-of-stock {
    color: var(--red-600);
    font-weight: 600;
}

/* Assurances -------------------------------------------------------------- */

.igm-assurances {
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    list-style: none;
}

.igm-assurances__item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 7px;
    font: 13.5px/1.6 var(--font-body);
    color: var(--gray-700);
}

.igm-assurances__item:last-child {
    margin-bottom: 0;
}

.igm-assurances__mark {
    color: var(--success-700);
    font-weight: 700;
}

/* Tabs -------------------------------------------------------------------- */

.woocommerce-tabs {
    margin-bottom: 36px;
}

/* Underlined tab row, with the active tab carrying the brand red rule. */
.woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 26px;
    margin: 0 0 22px;
    padding: 0;
    border-bottom: 1px solid var(--gray-300);
    list-style: none;
}

.woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 15px 2px;
    border-bottom: 3px solid transparent;
    font: 600 15px/1 var(--font-display);
    color: var(--gray-600);
}

.woocommerce-tabs ul.tabs li.active a {
    border-bottom-color: var(--red-500);
    color: var(--navy-700);
}

.woocommerce-tabs .panel {
    font: 15px/1.75 var(--font-body);
    color: var(--gray-800, var(--gray-700));
}

.woocommerce-tabs .panel h2 {
    font-size: 19px;
}

.shop_attributes th {
    width: 30%;
    padding: 9px 12px 9px 0;
    font: 600 13.5px/1.5 var(--font-body);
    color: var(--gray-600);
    text-align: left;
    vertical-align: top;
}

.shop_attributes td {
    padding: 9px 0;
    border-bottom: 1px solid var(--gray-200);
}

/* Reviews -------------------------------------------------------------------
 * Same story as the tabs/star-rating above: WC's reviews.php ships a bare
 * <ol> comment list with no card styling. */

.woocommerce-Reviews-title {
    margin-bottom: 18px;
    font-size: 19px;
}

.commentlist {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.commentlist .comment_container {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-200);
}

.commentlist .avatar {
    flex: none;
    border-radius: 50%;
}

.commentlist .comment-text {
    min-width: 0;
}

.commentlist .meta {
    margin: 4px 0 8px;
    font: 13px/1.4 var(--font-body);
    color: var(--gray-600);
}

.commentlist .woocommerce-review__author {
    color: var(--navy-700);
}

.commentlist .description p {
    margin: 0;
    font: 14.5px/1.65 var(--font-body);
    color: var(--gray-800, var(--gray-700));
}

#review_form_wrapper {
    max-width: 640px;
}

.comment-form-rating label {
    display: block;
    margin-bottom: 6px;
    font: 600 13px/1.4 var(--font-body);
    color: var(--gray-700);
}

.comment-form-rating select {
    width: auto;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
}

/* Related ----------------------------------------------------------------- */

.related.products,
.upsells.products {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--gray-200);
}

.related.products > h2,
.upsells.products > h2 {
    margin-bottom: 16px;
    font-size: 20px;
}

/*
 * The related/upsell row renders the theme's own `.igm-products` grid (see
 * shop.css), not core's `ul.products` markup, so it inherits the sitewide
 * 2/4/6 column rhythm from there. No override is needed here — this row has
 * no filter sidebar, so it is the plain case that rule already describes.
 */

/* WooCommerce's own tab chrome ---------------------------------------------
 *
 * Core styles the tabs at `.woocommerce div.product .woocommerce-tabs ul.tabs li a`,
 * which outranks the theme's `.woocommerce-tabs ul.tabs li.active a`. The
 * result was the worst contrast on the site: the theme's navy pill background
 * applied, core's #515151 kept the text colour, and the active tab rendered
 * dark grey on navy at 1.76:1 — effectively invisible.
 *
 * Core is matched at its own specificity here, and its tab chrome (the grey
 * fill, the borders and the ::before/::after that draw the old rounded tab
 * corners) is switched off so the underlined tabs read as the design intends.
 */

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    /* 15px block padding puts the link at the 44px minimum hit area rather
       than the 32px the old pill measured. */
    padding: 15px 2px;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    font: 600 15px/1 var(--font-display);
    color: var(--gray-600);
    text-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    background: transparent;
    color: var(--navy-700);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background: transparent;
    border-bottom-color: var(--red-500);
    color: var(--navy-700);
}

/* Gallery: fill the column, hold its shape, and follow the buy box ---------
 *
 * The media column was leaving roughly a thousand pixels of empty space beside
 * a tall summary, because the gallery shrink-wrapped a small placeholder image
 * and then stayed at the top. Three changes: the frame fills its column up to a
 * sane cap, it reserves a square so nothing shifts while the image loads (the
 * brief's CLS rule), and on a wide screen it sticks so the product stays in
 * view while the shopper reads down the buy box.
 */

.igm-product__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

/*
 * Product descriptions can contain long unbroken strings (raw citation URLs
 * used as link text is the case that surfaced this) that a normal `word-wrap`
 * won't break, overflowing the tab panel on narrow viewports and forcing a
 * page-wide horizontal scroll. `overflow-wrap: anywhere` breaks only when a
 * word genuinely has nowhere else to wrap, so normal prose is unaffected.
 */
.woocommerce-tabs .panel {
    overflow-wrap: anywhere;
}

/*
 * WooCommerce's jQuery Zoom plugin injects a full-resolution `.zoomImg`
 * absolutely-positioned inside the gallery image for desktop hover-zoom. It
 * has no purpose on touch devices (no hover), but it is not width-constrained
 * by core, so on narrow viewports it renders at its natural image width and
 * blows out the page's horizontal scroll. Zoom-on-hover is a desktop-only
 * interaction, so the element is simply removed from mobile/tablet layout.
 */
@media (max-width: 819px) {
    .igm-product__media .zoomImg {
        display: none !important;
    }
}

/* The gallery also carries core's `images` class, and core styles that as
   `float: left; width: 48%` for its own two-column product layout. In this
   grid that resolved to 48% of the media column — a 337px box beside a 700px
   column. Matched at core's own specificity. */
.woocommerce div.product div.images,
.igm-product__media .woocommerce-product-gallery {
    float: none;
    width: 100%;
    max-width: none;
}

.igm-product__media .woocommerce-product-gallery__wrapper,
.igm-product__media .woocommerce-product-gallery__image {
    width: 100%;
}

.igm-product__media .woocommerce-product-gallery__image > a,
.igm-product__media .woocommerce-product-gallery__image {
    display: block;
}

.igm-product__media .woocommerce-product-gallery__image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--gradient-product-frame);
}

/* The comparison and the review byline now sit below the two columns. */

.igm-product .igm-compare {
    margin: 0 0 28px;
}

/* Product meta (SKU / category) was unstyled body text under the buy box. */

.igm-product .product_meta {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--gray-300);
    font: 400 12.5px/1.7 var(--font-body);
    color: var(--gray-500);
}

.igm-product .product_meta > span {
    display: block;
}

.igm-product .product_meta a { color: var(--navy-700); }

/* Key facts ----------------------------------------------------------------
 * The spec grid a buyer scans before price. Two columns of label/value pairs
 * so the eye can run down either side, and the labels stay quiet so the values
 * carry. */

.igm-facts {
    margin: 18px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.igm-facts__title {
    margin: 0 0 12px;
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gray-500);
}

.igm-facts__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
}

@media (min-width: 560px) {
    .igm-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

.igm-facts__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule-soft, #eef2f7);
}

.igm-facts__item dt {
    font: 400 13px/1.4 var(--font-body);
    color: var(--gray-500);
    white-space: nowrap;
}

.igm-facts__item dd {
    margin: 0;
    text-align: right;
    font: 600 13.5px/1.4 var(--font-body);
    color: var(--ink);
}

/* Prescription notice — states what happens next, not just a warning. */

.igm-rxnotice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 18px 0 0;
    padding: 14px 16px;
    border: 1px solid #f0d69a;
    border-radius: var(--radius-lg);
    background: var(--warning-bg);
}

.igm-rxnotice__mark { flex: none; color: var(--warning-700); }
.igm-rxnotice__mark .igm-icon { width: 22px; height: 22px; }

.igm-rxnotice strong {
    display: block;
    margin-bottom: 3px;
    font: 600 13.5px/1.35 var(--font-body);
    color: var(--warning-700);
}

.igm-rxnotice p {
    margin: 0;
    font: 400 12.5px/1.65 var(--font-body);
    color: var(--warning-700);
}

/* Alternatives — same molecule, ranked exact-strength first ------------------
 * The badge is the point of the block: "another brand of this exact medicine"
 * and "a different dose of it" must never read as the same offer, so the
 * fallback tier carries a dashed frame and its own label. */

.igm-molecule-row { margin: 0 0 32px; }

.igm-molecule-row__title {
    margin: 0 0 4px;
    font: 700 20px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-molecule-row__lead {
    margin: 0 0 16px;
    max-width: 700px;
    font: 14px/1.65 var(--font-body);
    color: var(--gray-600);
}

.igm-molecule-row__lead strong { color: var(--navy-700); }

.igm-molecule-row__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 720px) {
    .igm-molecule-row__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.igm-molecule-row__grid a {
    display: block;
    height: 100%;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    text-decoration: none;
    overflow: hidden;
}

.igm-molecule-row__item.is-fallback > a {
    border-style: dashed;
    border-color: var(--gray-400);
}

.igm-molecule-row__grid a:hover { border-color: var(--navy-700); }

.igm-molecule-row__media {
    position: relative;
    display: block;
    border-bottom: 1px solid var(--gray-300);
    background: var(--gradient-product-frame);
    overflow: hidden;
}

.igm-molecule-row__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
}

.igm-molecule-row__badge {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--brand-tint-08);
    font: 600 10.5px/1 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--navy-700);
}

.igm-molecule-row__item.is-fallback .igm-molecule-row__badge {
    border: 1px solid var(--gray-400);
    background: var(--white);
    color: var(--gray-600);
}

.igm-molecule-row__name {
    display: block;
    padding: 13px 13px 0;
    font: 600 14.5px/1.35 var(--font-display);
    color: var(--navy-700);
}

.igm-molecule-row__meta {
    display: block;
    padding: 3px 13px 0;
    font: 12px/1.5 var(--font-meta);
    color: var(--gray-600);
}

.igm-molecule-row__prices {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 8px 13px 13px;
}

.igm-molecule-row__price {
    font: 700 17px/1 var(--font-display);
    color: var(--navy-700);
}

.igm-molecule-row__price del { display: none; }
.igm-molecule-row__price ins { background: none; text-decoration: none; }

.igm-molecule-row__unit {
    font: 12px/1 var(--font-body);
    color: var(--navy-700);
}

/* =============================================================================
   Product page layout — "IndoGenMed Product Page" design, three breakpoints
   -----------------------------------------------------------------------------
   One grid carries all three. `.igm-product__detail` and (below the desktop
   breakpoint) `.igm-buybox` are `display: contents`, so the price, the pack
   selector and the add-to-cart actions are independent grid items that reorder
   per breakpoint without being moved in the DOM — which is what lets the phone
   put the pack cards between the price and the buy button while the desktop
   keeps them in the middle column and the buy box in a sticky rail.
   ============================================================================= */

.igm-product__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 34px;
}

/*
 * Phone: one column, and the two wrappers dissolve so their contents order
 * freely against each other — price, pack cards, buy button, prescription
 * note, spec table, exactly as the 390px design stacks them.
 */
.igm-product__detail,
.igm-buybox {
    display: contents;
}

.igm-product__media  { order: 1; }
.igm-product__head   { order: 2; }
.igm-buybox__price   { order: 3; }
.igm-product .igm-packs { order: 4; }
.igm-buybox__actions { order: 5; }
.igm-product .igm-rxnotice { order: 6; }
.igm-product .igm-facts { order: 7; }
.igm-product .woocommerce-product-details__short-description { order: 8; }
.igm-product .product_meta { order: 9; }

.igm-product__head > * { margin-bottom: 0; }
.igm-product__head > * + * { margin-top: 8px; }
.igm-product__head .woocommerce-product-rating { margin: 10px 0 0; }

/* Buy box ----------------------------------------------------------------- */

.igm-buybox__price {
    padding: 16px 18px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
}

.woocommerce div.product.igm-product .igm-buybox__price p.price,
.igm-buybox__price .price {
    margin: 0;
    font-size: clamp(26px, 4.6vw, 32px);
}

.igm-buybox__saving {
    margin: 6px 0 0;
    font: 600 14.5px/1.5 var(--font-body);
    color: var(--navy-700);
}

.igm-buybox__unit {
    margin: 2px 0 0;
    font: 13.5px/1.5 var(--font-body);
    color: var(--gray-600);
}

.igm-buybox__actions > form.cart {
    margin: 0 0 12px;
}

.igm-buybox__upload {
    margin-bottom: 4px;
}

.igm-buybox__actions .igm-assurances {
    margin-top: 14px;
}

/* Pack selector ------------------------------------------------------------
 * Radio cards. The `.igm-packs__go` button inside each card is the no-JS
 * affordance: theme.js adds `igm-js` to <html>, which hides it and hands the
 * job to the radio plus the single buy-box form. */

.igm-packs {
    margin: 0;
}

.igm-packs__title {
    margin: 0 0 10px;
    font: 600 12px/1 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gray-600);
}

.igm-packs__options {
    display: grid;
    gap: 8px;
}

.igm-packs__option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-lg);
    background: var(--white);
    cursor: pointer;
    transition: var(--transition-fast);
}

.igm-packs__option:hover { border-color: var(--navy-700); }

.igm-packs__option.is-selected {
    border: 2px solid var(--navy-700);
    padding: 12px 13px;
    box-shadow: var(--focus-ring);
}

.igm-packs__option.is-unavailable {
    opacity: .6;
    cursor: default;
}

/* Visually hidden, but still the focusable control — the card is painted from
   its state, so a keyboard user gets the same ring a mouse user sees. The
   selector repeats the type so it beats components.css's own
   `input[type="radio"] { width: 20px }`, which is an attribute selector and
   would otherwise win on specificity and leave a stray dot on every card. */
input[type="radio"].igm-packs__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.igm-packs__mark {
    flex: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--gray-400);
    border-radius: 50%;
    background: var(--white);
}

.igm-packs__option.is-selected .igm-packs__mark {
    border: 6px solid var(--navy-700);
}

.igm-packs__radio:focus-visible + .igm-packs__mark {
    outline: 2px solid var(--navy-700);
    outline-offset: 2px;
}

.igm-packs__name {
    flex: 1;
    min-width: 0;
    font: 600 15px/1.35 var(--font-body);
    color: var(--gray-900);
}

.igm-packs__option.is-selected .igm-packs__name { color: var(--navy-700); }

.igm-packs__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--brand-tint-08);
    font: 600 10px/1.6 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--navy-700);
}

.igm-packs__figures {
    flex: none;
    text-align: right;
}

.igm-packs__price {
    display: block;
    font: 600 14.5px/1.3 var(--font-body);
    color: var(--navy-700);
}

.igm-packs__unit {
    display: block;
    font: 12.5px/1.4 var(--font-body);
    color: var(--gray-600);
}

.igm-packs__fallbacks { display: none; }

.igm-js .igm-packs__go { display: none; }

.igm-packs__cart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.igm-packs__cart .igm-qty { grid-column: 1; }
.igm-packs__cart .single_add_to_cart_button { grid-column: 2; }
.igm-packs__attributes { display: none; }

/* Table of contents --------------------------------------------------------
 * A <details> so it collapses on a phone with no script at all. */

.igm-toc {
    margin: 0 0 24px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    overflow: hidden;
}

.igm-toc__summary {
    padding: 12px 15px;
    border-bottom: 1px solid var(--gray-300);
    background: var(--gray-50);
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gray-600);
    cursor: pointer;
}

.igm-toc__list {
    margin: 0;
    padding: 6px 15px 12px;
    list-style: none;
    counter-reset: igm-toc;
}

.igm-toc__item {
    counter-increment: igm-toc;
    border-bottom: 1px solid var(--gray-200);
}

.igm-toc__item:last-child { border-bottom: 0; }

.igm-toc__link {
    display: block;
    /* 12px block padding clears the 44px minimum hit area. */
    padding: 12px 0;
    font: 14.5px/1.4 var(--font-body);
    color: var(--navy-700);
}

.igm-toc__link::before {
    content: counter(igm-toc) ". ";
    color: var(--gray-600);
}

.igm-toc__link:hover { color: var(--red-500); }

/* Trust and E-E-A-T cards -------------------------------------------------- */

.igm-integrity,
.igm-shipcard {
    margin: 0 0 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    overflow: hidden;
}

.igm-integrity__title,
.igm-shipcard__title {
    margin: 0;
    padding: 12px 15px;
    border-bottom: 1px solid var(--gray-300);
    background: var(--gray-50);
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gray-600);
}

.igm-integrity__person {
    display: flex;
    gap: 12px;
    padding: 15px;
}

.igm-integrity__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-tint-08);
    font: 700 14px/1 var(--font-display);
    color: var(--navy-700);
}

.igm-integrity__person .igm-eyebrow { margin: 0 0 4px; }

.igm-integrity__name {
    margin: 0;
    font: 600 15px/1.35 var(--font-display);
    color: var(--navy-700);
}

.igm-integrity__role,
.igm-integrity__bio {
    margin: 3px 0 0;
    font: 13px/1.55 var(--font-body);
    color: var(--gray-700);
}

.igm-integrity__meta,
.igm-integrity__sample {
    margin: 0;
    padding: 12px 15px;
    border-top: 1px solid var(--gray-200);
    font: 12.5px/1.7 var(--font-body);
    color: var(--gray-600);
}

.igm-integrity__sample { color: var(--warning-700); }

.igm-shipcard__list { margin: 0; padding: 14px 15px; }

.igm-shipcard__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font: 13.5px/1.5 var(--font-body);
    color: var(--gray-700);
}

.igm-shipcard__row:last-child { margin-bottom: 0; }
.igm-shipcard__row dt { margin: 0; }
.igm-shipcard__row dd { margin: 0; font-weight: 600; color: var(--navy-700); }

/* The medical disclaimer moved to components.css — the directories and the
   contact page use it too, and they do not all load this sheet. */

/* Rating summary at the head of the reviews tab ---------------------------- */

.igm-ratingcard {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
}

.igm-ratingcard__score {
    display: flex;
    align-items: center;
    gap: 10px;
}

.igm-ratingcard__average {
    font: 800 30px/1 var(--font-display);
    color: var(--navy-700);
}

.igm-ratingcard__count {
    margin: 0;
    font: 13px/1.5 var(--font-body);
    color: var(--gray-600);
}

/* Key facts as a spec table ------------------------------------------------
 * The design draws the facts as bordered label/value rows rather than the
 * two-column definition grid this started as. */

.igm-facts {
    margin: 0;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    overflow: hidden;
}

.igm-facts__title {
    margin: 0;
    padding: 12px 15px;
    border-bottom: 1px solid var(--gray-300);
    background: var(--gray-50);
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gray-600);
}

.igm-facts__grid {
    display: block;
    margin: 0;
    padding: 0;
    grid-template-columns: none;
}

.igm-facts__item {
    display: grid;
    grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--gray-300);
}

.igm-facts__item:last-child { border-bottom: 0; }

.igm-facts__item dt {
    margin: 0;
    padding: 11px 14px;
    background: var(--gray-50);
    font: 600 11px/1.4 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--gray-600);
}

.igm-facts__item dd {
    margin: 0;
    padding: 11px 14px;
    font: 500 15px/1.35 var(--font-meta);
    color: var(--ink);
}

/* Same molecule ------------------------------------------------------------ */

.igm-molecule-row { margin-top: 32px; }

/* Sticky buy bar -----------------------------------------------------------
 * Below the desktop breakpoint only, and only once script has revealed it —
 * its button proxies the buy-box form, so without JS there is nothing to
 * proxy and the bar must not appear. */

.igm-buybar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -16px;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-300);
    background: var(--white);
    box-shadow: var(--shadow-lg);
}

.igm-buybar[hidden] { display: none; }

.igm-buybar__facts {
    flex: none;
    min-width: 0;
}

.igm-buybar__price {
    display: block;
    font: 700 16px/1.2 var(--font-display);
    color: var(--navy-700);
}

.igm-buybar__price del { display: none; }
.igm-buybar__price ins { background: none; text-decoration: none; }

.igm-buybar__name {
    display: block;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 11.5px/1.3 var(--font-body);
    color: var(--gray-600);
}

.igm-buybar__add { flex: 1; }

/* Long-form region --------------------------------------------------------- */

.igm-product__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.igm-product__content { min-width: 0; order: 2; }

/* Phone: the column dissolves so the table of contents can sit above the
   long-form sections it links to, with the trust cards below them. */
.igm-product__aside { display: contents; }
.igm-product__aside > .igm-toc { order: 1; }
.igm-product__aside > *:not(.igm-toc) { order: 3; }
.igm-product__aside > *:last-child { margin-bottom: 0; }

/* Tablet — 820px and up ----------------------------------------------------
 * Gallery beside a single stacked column. Row counts are stated rather than
 * spanned to `-1`: with a row gap, spanning past the real rows would draw
 * phantom gaps, so the gallery is given exactly the rows column two has. */

@media (min-width: 820px) {
    .igm-product__top {
        grid-template-columns: minmax(0, 372px) minmax(0, 1fr);
        align-items: start;
        column-gap: 28px;
        row-gap: 18px;
    }

    /* Back to real boxes, so each column is one grid item and the gallery and
       buy box have a full-height area to stick inside. */
    .igm-product__detail {
        display: flex;
        flex-direction: column;
        gap: 18px;
        min-width: 0;
    }

    .igm-buybox {
        display: block;
    }

    .igm-product__media {
        grid-column: 1;
        grid-row: 1 / 4;
        position: sticky;
        top: 24px;
    }

    .igm-product__head   { grid-column: 2; grid-row: 1; }
    .igm-buybox          { grid-column: 2; grid-row: 2; }
    .igm-product__detail { grid-column: 2; grid-row: 3; }

    /* Inside the detail column the order is the design's: pack cards, the
       prescription note, the spec table, then the remaining summary output. */
    .igm-product .igm-packs { order: 1; }
    .igm-product .igm-rxnotice { order: 2; }
    .igm-product .igm-facts { order: 3; }
    .igm-product .woocommerce-product-details__short-description { order: 4; }
    .igm-product .product_meta { order: 5; }

    .igm-buybox__price { margin-bottom: 16px; }

    .igm-buybar { margin: 0; }
}

/* Desktop — 1200px and up: gallery, detail, sticky buy rail ----------------- */

@media (min-width: 1200px) {
    .igm-product__top {
        grid-template-columns: minmax(0, 440px) minmax(0, 1fr) 340px;
        column-gap: 36px;
    }

    .igm-product__media  { grid-column: 1; grid-row: 1 / 3; }
    .igm-product__head   { grid-column: 2; grid-row: 1; }
    .igm-product__detail { grid-column: 2; grid-row: 2; }

    .igm-buybox {
        grid-column: 3;
        grid-row: 1 / 3;
        position: sticky;
        top: 24px;
        padding: 20px;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-lg);
        background: var(--gray-50);
    }

    /* Inside the rail the price is no longer a panel of its own. */
    .igm-buybox__price {
        padding: 0 0 16px;
        border: 0;
        border-bottom: 1px solid var(--gray-300);
        border-radius: 0;
        background: none;
        margin-bottom: 16px;
    }

    /* The desktop design reads spec table, then pack cards, then the note. */
    .igm-product .igm-facts { order: 1; }
    .igm-product .igm-packs { order: 2; }
    .igm-product .igm-rxnotice { order: 3; }

    /* The bar is only ever a small-screen control. */
    .igm-buybar { display: none; }

    .igm-product__body {
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 36px;
        align-items: stretch;
    }

    .igm-product__content { grid-column: 1; grid-row: 1; }

    .igm-product__aside {
        display: block;
        grid-column: 2;
        grid-row: 1;
    }

    .igm-toc {
        position: sticky;
        top: 24px;
    }

    /* Open regardless of the marker on a screen wide enough to hold it. */
    .igm-toc__summary { cursor: default; }
}