/* Shared components: buttons, cards, badges, forms, notices.
   Values come from tokens.css. */

/* Buttons ----------------------------------------------------------------- */

.igm-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px; /* pointer target floor */
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--navy-700);
    color: var(--white);
    font: 600 14px/1 var(--font-body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.igm-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
    background: var(--navy-800);
    color: var(--white);
    text-decoration: none;
}

.igm-btn[disabled],
.igm-btn[aria-disabled="true"],
.woocommerce .button[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

/* --color-accent (#f36a4a) carries white text at 3.01:1, below the 4.5:1 AA
   needs for a 14px button label. --orange-600 is the same hue at 4.54:1. The
   brand orange stays in use for fills and rules that carry no text. */
.igm-btn--accent,
.woocommerce .button.alt,
.woocommerce button.button.alt {
    background: var(--orange-600);
    color: var(--white);
}

.igm-btn--accent:hover,
.woocommerce .button.alt:hover {
    background: var(--red-500);
}

.igm-btn--ghost {
    background: transparent;
    border-color: var(--gray-400);
    color: var(--navy-700);
}

.igm-btn--ghost:hover {
    background: var(--brand-tint-08);
    border-color: var(--navy-700);
    color: var(--navy-700);
}

.igm-btn--inline {
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-secondary);
    font-weight: 600;
    text-decoration: underline;
}

.igm-btn--block {
    width: 100%;
}

.igm-btn--primary {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: var(--white);
}

.igm-btn--primary:hover {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: var(--white);
}

/* Cards ------------------------------------------------------------------- */

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

.igm-card--raised {
    box-shadow: var(--shadow-card);
    border-color: var(--border-tint-08);
}

.igm-card__body {
    padding: 14px 16px;
}

/* Badges ------------------------------------------------------------------ */

.igm-badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    font: 600 11px/1 var(--font-body);
    white-space: nowrap;
}

.igm-badge--in     { background: var(--success-bg); color: var(--success-700); }
.igm-badge--rx,
.igm-badge--backorder { background: var(--warning-bg); color: var(--warning-700); }
.igm-badge--out    { background: var(--gray-100); color: var(--gray-600); }
.igm-badge--sale   { background: var(--color-secondary); color: var(--white); }

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

/* Search cross-sell / request CTA ------------------------------------------ */

.igm-molecule-match,
.igm-request-medicine {
    background: var(--gray-100);
    margin-bottom: 22px;
}

.igm-molecule-match__name {
    font: 600 16px/1.4 var(--font-display);
    color: var(--navy-700);
    margin-top: 6px;
}

.igm-molecule-match__brands {
    font: 14px/1.6 var(--font-body);
    color: var(--gray-700);
    margin-top: 4px;
}

.igm-molecule-match__cta {
    margin-top: 10px;
}

.igm-request-medicine__title {
    font: 600 16px/1.4 var(--font-display);
    color: var(--navy-700);
    margin-bottom: 6px;
}

.igm-request-medicine__body {
    font: 14px/1.6 var(--font-body);
    color: var(--gray-700);
    margin-bottom: 14px;
}

/* Forms ------------------------------------------------------------------- */

.igm-input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
    background: var(--white);
    font: 15px/1.4 var(--font-body);
    color: var(--text-body);
    transition: var(--transition-fast);
}

.igm-input--file {
    padding: 8px 10px;
}

.igm-input--file::file-selector-button {
    margin-right: 12px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--navy-700);
    color: var(--white);
    font: 600 13px/1 var(--font-body);
    cursor: pointer;
}

.igm-input--file::file-selector-button:hover {
    background: var(--navy-800);
}

.igm-input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.comment-form input:focus,
.comment-form textarea:focus {
    border-color: var(--navy-700);
    outline: none;
    box-shadow: var(--focus-ring);
}

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

/* WooCommerce toggles these on the .form-row wrapper after client-side
   validation runs — themed here since the theme never had rules for them
   and fields fell back to unstyled browser defaults. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea {
    border-color: var(--color-secondary);
    background: var(--warning-bg);
}

.woocommerce form .form-row.woocommerce-invalid label {
    color: var(--red-600);
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select {
    border-color: var(--success-700);
}

.woocommerce form .form-row .required {
    color: var(--color-secondary);
    text-decoration: none;
}

/* Notices ----------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: 14px/1.5 var(--font-body);
    list-style: none;
}

/* WooCommerce core draws its own icon-font glyph on every notice via an
   absolutely-positioned ::before (top:1em;left:1.5em) — a layout the flex box
   above never reserves room for. Left in place it drifts over whichever
   notice happens to render, up to and including sitting on top of the first
   word of the message itself. Switched off everywhere rather than patched per
   notice: two call sites (the Rx cart notice, the prescription-upload notice)
   already draw their own semantic icon and don't need a second one guessing
   at the same spot; the rest read fine with none. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none;
}

.woocommerce-message {
    background: var(--success-bg);
    border-color: var(--success-700);
    color: var(--success-700);
}

.woocommerce-info {
    background: var(--brand-tint-08);
    border-color: var(--navy-700);
    color: var(--navy-700);
}

.woocommerce-error {
    background: var(--warning-bg);
    border-color: var(--color-secondary);
    color: var(--red-600);
}

/* Language and currency switchers ----------------------------------------- */

.igm-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.igm-switcher__list {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.igm-switcher__link {
    display: inline-block;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    font: 600 12px/1 var(--font-body);
    color: var(--gray-600);
}

.igm-switcher__link[aria-current="true"] {
    background: var(--brand-tint-08);
    color: var(--navy-700);
}

.igm-switcher--lang {
    position: relative;
}

.igm-switcher__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-pill);
    background: var(--white);
    font: 600 12px/1 var(--font-body);
    color: var(--navy-700);
    cursor: pointer;
}

.igm-switcher--lang .igm-switcher__list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
}

.igm-switcher--lang:hover .igm-switcher__list,
.igm-switcher--lang:focus-within .igm-switcher__list {
    display: flex;
}

.igm-account-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 600 13px/1 var(--font-body);
    color: var(--navy-700);
}

.igm-account-link__icon {
    width: 20px;
    height: 20px;
    border: 2px solid var(--navy-700);
    border-radius: 50%;
    flex: none;
}

.igm-contact-form {
    margin-top: 20px;
    max-width: 640px;
}

.igm-contact-form textarea.igm-input {
    resize: vertical;
    min-height: 120px;
    padding: 10px 14px;
}

.igm-contact-form .form-row {
    margin-bottom: 14px;
}

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

.igm-contact-form .form-row .required {
    color: var(--color-secondary);
    text-decoration: none;
}

.igm-contact-form__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.igm-rx-notice span:first-child {
    font-size: 18px;
    line-height: 1;
    flex: none;
}

/* Medical reviewer byline ---------------------------------------------------
 * The visible counterpart to the reviewedBy JSON-LD in inc/schema.php. On a
 * YMYL medical page the reader needs to see who is accountable for the claims,
 * so this is styled as a quiet credential strip rather than a decorative card —
 * it should read as provenance, not marketing. */

.igm-reviewer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--border-tint-08);
    border-left: var(--border-3);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}

.igm-reviewer__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--navy-700);
    color: var(--white);
    font: 700 13px/1 var(--font-body);
    letter-spacing: .5px;
}

.igm-reviewer__text {
    min-width: 0;
}

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

.igm-reviewer__name {
    color: var(--navy-700);
    font-weight: 700;
}

.igm-reviewer__role {
    color: var(--gray-600);
    font-weight: 400;
}

.igm-reviewer__date {
    margin: 2px 0 0;
    font: 12.5px/1.5 var(--font-meta, var(--font-body));
    color: var(--gray-600);
}

/* Deliberately conspicuous: staging placeholder data must never be mistaken
   for a real clinician's sign-off. */
.igm-reviewer__sample {
    margin: 6px 0 0;
    padding: 3px 8px;
    display: inline-block;
    border-radius: var(--radius-xs);
    background: var(--warning-bg);
    color: var(--warning-700);
    font: 600 11.5px/1.4 var(--font-body);
}

@media (max-width: 480px) {
    .igm-reviewer {
        padding: 10px 12px;
    }

    .igm-reviewer__avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* Star rating ----------------------------------------------------------------
 * WooCommerce ships this as two stacked ::before layers with no colour or
 * size of its own. Lives in components (loaded on every page) rather than
 * product.css, because the same markup renders in the shop loop, the
 * homepage rails and related-products — not just the single product page;
 * scoped to product.css alone it rendered as plain unstyled text ("Rated 5
 * out of 5") everywhere except is_product(). */

.star-rating {
    position: relative;
    overflow: hidden;
    width: 5.4em;
    height: 1.15em;
    line-height: 1;
    font-size: 14px;
}

.star-rating::before {
    content: "\2605\2605\2605\2605\2605";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--gray-300);
    letter-spacing: 2px;
}

.star-rating span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding-top: 1.5em;
}

.star-rating span::before {
    content: "\2605\2605\2605\2605\2605";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--star-filled);
    letter-spacing: 2px;
}

.woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
}

.woocommerce-review-link {
    font: 600 13px/1 var(--font-body);
    color: var(--gray-600);
}

/* Branded vs. generic comparison — used on both the single product page
   (inc/branded-vs-generic.php, hooked into woocommerce_single_product_summary)
   and the homepage rail, so it lives in components rather than product/home. */
.igm-compare {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-card);
}

@media (min-width: 560px) {
    .igm-compare {
        grid-template-columns: 1fr auto 1fr;
    }
}

.igm-compare__col {
    padding: 20px 22px;
}

.igm-compare__col--generic {
    background: var(--gray-50);
}

.igm-compare__vs {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    background: var(--navy-800);
    color: var(--white);
    font: 700 12px/1 var(--font-display);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}

@media (min-width: 560px) {
    .igm-compare__vs {
        min-height: auto;
        width: 40px;
    }
}

.igm-compare__badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 9px;
    border-radius: var(--radius-xs);
    background: var(--gray-100);
    color: var(--gray-600);
    font: 700 10.5px/1 var(--font-body);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}

.igm-compare__badge--accent {
    background: var(--orange-600);
    color: var(--white);
}

.igm-compare__name {
    display: block;
    margin-bottom: 4px;
    font: 600 16px/1.35 var(--font-display);
    color: var(--navy-700);
    text-decoration: none;
}

a.igm-compare__name:hover {
    text-decoration: underline;
}

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

.igm-compare__price strong {
    color: var(--text-heading);
    font-size: 15px;
}

.igm-compare__savings {
    margin-left: 4px;
    color: var(--success-700);
    font-weight: 700;
}

.igm-compare__points {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 13.5px/1.5 var(--font-body);
    color: var(--gray-700);
}

.igm-compare__points li {
    padding-left: 20px;
    position: relative;
}

.igm-compare__points li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--success-700);
    font-weight: 700;
}

.igm-currency-notice {
    font-size: 13.5px;
}

/* Currency code chip beside a converted price. Quiet: the number carries the
   meaning, the code only removes ambiguity between the $ currencies. */
.igm-price-code {
    font: 600 11px/1 var(--font-body);
    letter-spacing: .04em;
    color: var(--gray-500);
    vertical-align: 2px;
}

/* The base-currency amount actually debited, under the converted total. */
.igm-charged-in {
    display: block;
    margin-top: 4px;
    font: 400 12px/1.4 var(--font-body);
    color: var(--gray-600);
}

/* Line-art icons ----------------------------------------------------------
 * Used by the funnel and by the footer trust strip, so the size rule lives in
 * the global sheet — funnel.css only loads on cart/checkout/account. */

.igm-icon {
    width: 18px;
    height: 18px;
    flex: none;
}

/* Hit areas found below the brief's 44px minimum by the audit. */

.igm-product-card__action {
    min-width: 44px;
    min-height: 44px;
}

.igm-search__submit {
    min-width: 44px;
    min-height: 44px;
}

/* Checkboxes and radios are 20px everywhere, not just in the funnel — the
   account form's "Remember me" was still core's 13px. The label is bound to
   each one, so the row is the real target; this just makes the control itself
   visible and hittable. */

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--navy-700);
}

/* Drawn product placeholder (inc/woocommerce.php). Sized like the image it
   stands in for, so nothing shifts when real photography replaces it. */

.igm-placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Archive headers ---------------------------------------------------------
 * Shared by every listing screen — product archives, blog, search — so a
 * category of medicines and a category of articles carry the same header.
 * These lived in shop.css, which is not enqueued on blog or taxonomy-free
 * archives, so the blog header was rendering completely unstyled. */

.igm-archive__head {
    margin-bottom: 18px;
}

.igm-archive__title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.igm-archive__count {
    font: 400 14px/1.4 var(--font-body);
    color: var(--gray-600);
}

.igm-archive__intro {
    max-width: 70ch;
    font: 14px/1.7 var(--font-body);
    color: var(--gray-700);
}

/* Pagination ---------------------------------------------------------------
 * Also shared: the shop's numbered pager is the site's pager. shop.css keeps
 * only the load-more button and the mobile swap that belong to the product
 * grid's own behaviour. */

.igm-pagination,
.igm-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* the_posts_pagination() wraps the links in a .nav-links div, so the flex
   context has to exist on both: styling only the <nav> leaves its single child
   div unstyled and the numbers rendered edge to edge. The shop's own pager
   never exposed this because it is built from wc markup. */
.igm-pagination .nav-links {
    width: 100%;
}

.igm-pagination a,
.igm-pagination span {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font: 600 14px/1 var(--font-body);
    color: var(--gray-700);
}

.igm-pagination a:hover {
    border-color: var(--navy-700);
    color: var(--navy-700);
    text-decoration: none;
}

.igm-pagination .current {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: var(--white);
}

/* Comment form -------------------------------------------------------------
 * Core's `comment_form()` emits bare <input>s, so before this the form was the
 * one place on the site rendering browser-default 21px-tall fields — the
 * design audit flagged all three as sub-44px targets. It reuses the shared
 * field spec above rather than defining its own, and lives here rather than in
 * blog.css because comments can be opened on pages too, where the editorial
 * sheet is not loaded. */

.comment-respond {
    margin-top: 24px;
}

.comment-reply-title {
    margin-bottom: 6px;
    font-size: 20px;
}

.comment-reply-title small {
    margin-inline-start: 8px;
    font: 400 14px/1 var(--font-body);
}

/* A comment box is a secondary action under an article, not the point of the
 * page. Capping the measure and pairing the short identity fields keeps it
 * from occupying a full screen of vertical space between the article and
 * whatever follows it. */
.comment-form {
    display: grid;
    gap: 12px;
    max-width: 640px;
}

.comment-form p {
    margin: 0;
}

/* Name / email / website are short fields — three stacked full-width inputs
 * read as a long form. Side by side they read as one compact row. */
@media (min-width: 640px) {
    .comment-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .comment-form > p {
        grid-column: 1 / -1;
    }

    .comment-form .comment-form-author,
    .comment-form .comment-form-email,
    .comment-form .comment-form-url {
        grid-column: span 1;
    }
}

.comment-notes,
.comment-form-cookies-consent label {
    font: 13px/1.6 var(--font-body);
    color: var(--gray-500);
}

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

.comment-form .required {
    color: var(--color-secondary);
}

/* WordPress prints rows="8" on the comment textarea, which renders far taller
 * than a comment box needs to be. Height is set here and the attribute
 * overridden, so the field starts compact and the reader can drag it larger. */
.comment-form textarea {
    min-height: 0;
    height: 96px;
    resize: vertical;
}

/* The consent checkbox is a 20px control with a long label. Laying the pair
   out as a row makes the label part of the target, which is both the
   accessible behaviour and the only way to clear 44px without drawing a
   checkbox the size of a button. */
.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.comment-form-cookies-consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
}

.comment-form-cookies-consent label {
    margin: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.comment-form .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    justify-self: start;
    min-height: 44px;
    padding: 12px 22px;
    border: 1px solid var(--navy-700);
    border-radius: var(--radius-md);
    background: var(--navy-700);
    color: var(--white);
    font: 600 14px/1 var(--font-body);
    cursor: pointer;
    transition: var(--transition-fast);
}

.comment-form .submit:hover {
    background: var(--navy-800);
    border-color: var(--navy-800);
}

/* Comment list ------------------------------------------------------------- */

.igm-comments__list .comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font: 12.5px/1.4 var(--font-body);
    color: var(--gray-500);
}

.igm-comments__list .comment-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 14px/1.4 var(--font-body);
    color: var(--text-heading);
}

.igm-comments__list .comment-author img {
    border-radius: var(--radius-pill);
}

.igm-comments__list .comment-content {
    font: 15px/1.7 var(--font-body);
    color: var(--gray-900);
}

.igm-comments__list .reply a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 600 13px/1 var(--font-body);
}

/* Quantity stepper --------------------------------------------------------
 * Shared by the cart, the checkout and the product buy box, so it lives here
 * rather than in funnel.css, which the product page does not load. */

.igm-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
}

.igm-qty__btn {
    width: 44px;
    height: 44px;
    flex: none;
    border: 0;
    background: transparent;
    font: 400 18px/1 var(--font-body);
    color: var(--navy-700);
    cursor: pointer;
}

.igm-qty__btn:hover { background: var(--gray-50); }
.igm-qty__btn[disabled] { color: var(--gray-450); cursor: default; }

.igm-qty .quantity { margin: 0; }

.igm-qty input.qty,
.igm-qty__input {
    width: 46px;
    height: 44px;
    border: 0;
    border-left: 1px solid #eef2f7;
    border-right: 1px solid #eef2f7;
    border-radius: 0;
    text-align: center;
    font: 600 15px/1 var(--font-display);
    color: var(--ink);
    /* 16px on mobile so iOS never zooms the page on focus. */
    -moz-appearance: textfield;
}

.igm-qty input.qty::-webkit-outer-spin-button,
.igm-qty input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Medical disclaimer ------------------------------------------------------
 * Shared by the product page, both directories and the contact page. */

.igm-disclaimer {
    padding: 15px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    font: 13px/1.7 var(--font-body);
    color: var(--gray-700);
}

.igm-disclaimer__label {
    font-family: var(--font-display);
    color: var(--navy-700);
}

/* Cookie consent ----------------------------------------------------------
 * Printed for every visitor and revealed by script only when no choice has
 * been stored — the page is cached, so a server-side decision would show one
 * visitor's banner state to the next.
 */

.igm-consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    background: var(--white);
    border-top: 1px solid var(--gray-300);
    box-shadow: 0 -8px 28px rgba(11, 42, 92, .14);
}

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

/*
 * .igm-btn sets its own display, which beats the browser's default styling for
 * the hidden attribute — without this the "Save my choices" button, printed
 * hidden until the visitor opens the per-category options, was visible from
 * the start.
 */
.igm-consent [hidden] {
    display: none !important;
}

.igm-consent__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 28px;
    align-items: flex-start;
    justify-content: space-between;
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 16px 20px;
}

.igm-consent__copy {
    flex: 1 1 420px;
    min-width: 0;
}

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

.igm-consent__text {
    margin: 0;
    font: 13px/1.6 var(--font-body);
    color: var(--gray-700);
}

.igm-consent__options {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

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

.igm-consent__option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font: 12.5px/1.5 var(--font-body);
    color: var(--gray-700);
}

.igm-consent__option strong {
    display: block;
    color: var(--navy-700);
}

.igm-consent__option input {
    margin-top: 3px;
    flex: none;
}

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

/*
 * Reject and accept are the same size and weight. An opt-out that is smaller
 * or quieter than the opt-in is not a free choice, and regulators treat it as
 * one design pattern rather than two buttons.
 */
.igm-consent__actions .igm-btn {
    min-height: 44px;
}

.igm-consent__link {
    border: 0;
    background: none;
    padding: 8px 4px;
    font: 600 12.5px/1 var(--font-body);
    color: var(--navy-700);
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 720px) {
    .igm-consent__inner {
        padding: 14px 16px;
    }

    .igm-consent__actions {
        width: 100%;
    }

    .igm-consent__actions .igm-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}