/* Cart, checkout, order-received and account. */

/* Progress ---------------------------------------------------------------- */

.igm-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.igm-progress__step {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    font: 600 12px/1.3 var(--font-body);
    color: var(--gray-500);
}

.igm-progress__marker {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--gray-200);
    color: var(--gray-600);
    font: 700 12px/1 var(--font-body);
}

.igm-progress__step--done .igm-progress__marker,
.igm-progress__step--current .igm-progress__marker {
    background: var(--navy-700);
    color: var(--white);
}

.igm-progress__step--current {
    color: var(--navy-700);
}

.igm-progress__step:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 2px;
    background: var(--gray-200);
}

.igm-progress__step--done:not(:last-child)::after {
    background: var(--navy-700);
}

.igm-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

.igm-account-prompt {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px dashed var(--gray-400);
    border-radius: var(--radius-md);
    font: 13px/1.6 var(--font-body);
    color: var(--gray-700);
}

.igm-thanks-body {
    font: 14px/1.7 var(--font-body);
    color: var(--gray-700);
}

/* Account ----------------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-pill);
    font: 600 13px/1 var(--font-body);
    color: var(--gray-700);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--navy-700);
    border-color: var(--navy-700);
    color: var(--white);
}

@media (min-width: 900px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        float: left;
        width: 24%;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: column;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        float: right;
        width: 72%;
    }
}

/* Account — orders table ---------------------------------------------------
 * Core WC ships this as a bare <table>; without rules here it renders with
 * browser-default borders and no responsive stacking. */

.woocommerce-orders-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px;
    font-size: 14px;
}

.woocommerce-orders-table__header,
.woocommerce-orders-table__cell {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.woocommerce-orders-table__header {
    font: 500 12px/1.2 var(--font-meta);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gray-600);
}

.woocommerce-orders-table__cell-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.woocommerce-orders-table__cell-order-actions .button {
    padding: 8px 14px;
    min-height: 44px;
}

@media (max-width: 600px) {
    .woocommerce-orders-table thead {
        display: none;
    }

    .woocommerce-orders-table__row {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid var(--gray-200);
    }

    .woocommerce-orders-table__cell {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border-bottom: 0;
    }

    .woocommerce-orders-table__cell::before {
        content: attr(data-title);
        font-weight: 600;
        color: var(--gray-600);
    }
}

/* Account — addresses -------------------------------------------------------
 * Core WC's .u-column1/.u-column2 float layout with no card treatment. */

.woocommerce-Addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 20px;
}

.woocommerce-Address {
    flex: 1 1 260px;
    padding: 18px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.woocommerce-Address-title h2 {
    margin: 0;
    font: 700 16px/1.3 var(--font-display);
    color: var(--navy-700);
}

.woocommerce-Address-title .edit {
    font: 600 13px/1 var(--font-body);
    color: var(--color-secondary);
}

.woocommerce-Address address {
    font-style: normal;
    line-height: 1.6;
    color: var(--text-body);
}

/* Account — single order view -----------------------------------------------
 * Core WC's view-order.php ships a bare intro paragraph, table and two-column
 * address block with no theme styling at all — no override template exists
 * for it, so without these rules it renders as unstyled browser defaults. */

.woocommerce-order-details__title,
.woocommerce-column__title {
    margin: 24px 0 12px;
    font: 700 17px/1.3 var(--font-display);
    color: var(--navy-700);
}

.woocommerce-order-details__title:first-child,
section.woocommerce-order-details:first-child .woocommerce-order-details__title {
    margin-top: 0;
}

.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 14px;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.woocommerce-table--order-details thead th {
    font: 500 12px/1.2 var(--font-meta);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gray-600);
}

.woocommerce-table--order-details tfoot th {
    font-weight: 600;
    color: var(--gray-700);
}

.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details tfoot td {
    text-align: right;
}

.woocommerce-table--order-details .wc-item-meta {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--gray-600);
}

.woocommerce-order-details mark,
.woocommerce-order-details .order-status {
    padding: 0 2px;
    background: none;
    font-weight: 600;
    color: var(--navy-700);
}

.woocommerce-customer-details {
    margin-top: 12px;
}

.woocommerce-columns--addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-columns--addresses .woocommerce-column {
    flex: 1 1 260px;
    padding: 18px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.woocommerce-columns--addresses address {
    font-style: normal;
    line-height: 1.6;
    color: var(--text-body);
}

/* Account forms ----------------------------------------------------------- */

.igm-account-forms {
    display: grid;
    gap: 20px;
    max-width: 900px;
    margin-inline: auto;
}

@media (min-width: 780px) {
    .igm-account-forms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.igm-account-forms__col {
    min-width: 0;
}

/* Registration can be turned off in WooCommerce settings, leaving only the
   Sign in card. Without this the grid still reserves the second column and
   the card sits stranded in the left half with a dead gap beside it. */
.igm-account-forms--single {
    max-width: 460px;
}

@media (min-width: 780px) {
    .igm-account-forms--single {
        grid-template-columns: minmax(0, 1fr);
    }
}

.igm-account-forms h2 {
    margin-bottom: 14px;
    font-size: 19px;
}

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

/* Account tiles (dashboard) + list rows (patients/prescriptions) ---------- */

.igm-account-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

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

.igm-account-tile {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 14px;
    text-decoration: none;
    color: inherit;
}

.igm-account-tile__icon {
    font-size: 20px;
    color: var(--navy-700);
    margin-bottom: 8px;
}

.igm-account-tile__label {
    font: 600 15px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-account-tile__stat {
    font: 13px/1.4 var(--font-body);
    color: var(--gray-600);
}

.igm-account-tile__stat--attention {
    color: var(--warning-700);
}

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

.igm-account-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
    font: 15px/1.3 var(--font-body);
    color: var(--gray-900);
}

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

.igm-account-list__title {
    font: 600 14px/1.35 var(--font-display);
    color: var(--navy-700);
    text-decoration: none;
}

.igm-account-list__meta {
    font: 12px/1.5 var(--font-meta);
    color: var(--gray-600);
    margin-top: 3px;
}

.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 14px/1.4 var(--font-body);
    color: var(--gray-700);
    cursor: pointer;
}

.woocommerce-LostPassword {
    margin: 0;
    font: 13.5px/1.5 var(--font-body);
}

/* Social login ------------------------------------------------------------ */

.igm-social-login {
    margin-top: 18px;
}

.igm-social-login__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font: 12px/1 var(--font-body);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
}

.igm-social-login__divider::before,
.igm-social-login__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gray-300);
}

.igm-social-login__grid {
    display: grid;
    gap: 10px;
}

/* Base button: shape and spacing are this site's own (radius-md, the same
   44px+ minimum hit area every other control on the site uses); the logo
   mark and the two brand colour treatments below are the providers' own
   published brand guidelines, not a themed recolour. */
.igm-social-login__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
    background: var(--white);
    font: 600 14.5px/1 var(--font-body);
    color: var(--gray-900);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.igm-social-login__icon-wrap {
    display: flex;
    flex: none;
    width: 18px;
    height: 18px;
}

.igm-social-login__icon {
    width: 100%;
    height: 100%;
}

.igm-social-login__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Google — white surface, the neutral #747775 border and #1f1f1f label
   colour are both specified exactly in Google's sign-in button guidelines,
   not approximated from this site's own greys. */
.igm-social-login__button--google {
    border-color: #747775;
    background: var(--white);
    color: #1f1f1f;
}

.igm-social-login__button--google:hover,
.igm-social-login__button--google:focus-visible {
    background: #f8f9fa;
}

.igm-social-login__button--google:active {
    background: #f1f3f4;
}

/* Facebook — Meta's own blue, with the button carrying the circular white
   "f" mark rather than a coloured mark on a light surface. Meta's brand blue
   (#1877f2) only reaches 4.23:1 with white text, under WCAG AA's 4.5:1 for
   normal-size text — one step darker (its own former hover shade) clears it
   at 4.73:1 without reading as an obviously different colour. */
.igm-social-login__button--facebook {
    border-color: #166fe5;
    background: #166fe5;
    color: var(--white);
}

.igm-social-login__button--facebook:hover,
.igm-social-login__button--facebook:focus-visible {
    background: #125fcb;
    border-color: #125fcb;
}

.igm-social-login__button--facebook:active {
    background: #0f4fac;
    border-color: #0f4fac;
}

/* Any provider added later with no bespoke brand treatment above (currently
   Yandex) — same left-accent-stripe ghost button the whole feature shipped
   with, unchanged. */
.igm-social-login__button--plain {
    justify-content: flex-start;
    border-color: var(--gray-400);
    border-left-width: 3px;
    background: var(--white);
    color: var(--navy-700);
}

.igm-social-login__button--plain:hover,
.igm-social-login__button--plain:focus-visible {
    background: var(--gray-50);
}

.igm-social-login__button--yandex {
    border-left-color: #fc3f1d;
}

.igm-social-login__button:focus-visible {
    outline: 2px solid var(--navy-700);
    outline-offset: 2px;
}

/* Empty cart -------------------------------------------------------------- */

.igm-cart-empty {
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 0;
}

.igm-cart-empty .return-to-shop {
    margin: 18px 0 32px;
}

.igm-cart-empty__categories {
    margin-bottom: 28px;
}

.igm-cart-empty__categories .igm-eyebrow {
    margin-bottom: 10px;
}

.igm-cart-empty__cat-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Prescription upload (mockup 2f) ------------------------------------------ */

.igm-rx-drop {
    padding: 22px 18px;
    border: 2px dashed var(--gray-400);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    text-align: center;
    margin-bottom: 18px;
}

.igm-rx-drop__glyph {
    display: block;
    font-size: 30px;
    line-height: 1;
    color: var(--navy-700);
    margin-bottom: 10px;
}

.igm-rx-drop__title {
    font: 600 15px/1.4 var(--font-display);
    color: var(--navy-700);
}

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

.igm-rx-drop .form-row {
    text-align: left;
    margin-bottom: 0;
}

.igm-rx-checklist {
    margin-bottom: 18px;
}

.igm-rx-checklist .igm-eyebrow {
    display: block;
    margin-bottom: 10px;
}

.igm-rx-checklist ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
    font: 14px/1.6 var(--font-body);
    color: var(--gray-700);
}

.igm-rx-checklist li::before {
    content: "\2713";
    margin-right: 8px;
    color: var(--success-700);
    font-weight: 700;
}

.igm-rx-verify {
    margin-bottom: 16px;
}

.igm-rx-legal {
    margin: 12px 0 0;
    font: 12.5px/1.6 var(--font-body);
    color: var(--gray-600);
}

/* =========================================================================
   FUNNEL — designs 1a (cart), 1c (checkout), 3a–3d (payment), 1e/1f (thanks)
   Desktop first, then the tablet (1m) and mobile (1i/1j/1k) states.
   ========================================================================= */

/* Page head — title beside the four-step bar -------------------------------- */

.igm-funnel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.igm-funnel-head__titles h1 {
    margin: 0 0 5px;
    font: 700 28px/1.2 var(--font-display);
    color: var(--navy-700);
}

.igm-funnel-head__meta {
    margin: 0;
    font: 400 13.5px/1.4 var(--font-body);
    color: var(--gray-600);
}

.igm-securenote {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: var(--radius-md);
    background: var(--success-bg);
    font: 600 12.5px/1 var(--font-body);
    color: var(--success-700);
}

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

/* The step bar sits inline in the head, so it must not stretch. */
.igm-funnel-head .igm-progress {
    flex: 0 1 auto;
    margin: 0;
    gap: 0;
}

.igm-funnel-head .igm-progress__step {
    flex: none;
    gap: 7px;
}

.igm-funnel-head .igm-progress__step:not(:last-child)::after {
    flex: none;
    width: 40px;
    margin: 0 10px;
}

.igm-progress__marker {
    border: 1.5px solid var(--gray-300);
    background: transparent;
    color: var(--gray-500);
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.igm-progress__step--done .igm-progress__marker,
.igm-progress__step--current .igm-progress__marker {
    border-color: var(--navy-700);
    background: var(--navy-700);
    color: var(--white);
}

.igm-progress__step--done {
    color: var(--success-700);
}

.igm-progress__step--done .igm-progress__marker {
    border-color: var(--success-700);
    background: var(--success-700);
}

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

.igm-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: var(--radius-xs);
    font: 600 9.5px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.igm-badge--rx        { background: var(--brand-tint-08); color: var(--navy-700); }
.igm-badge--in        { background: var(--success-bg);    color: var(--success-700); }
.igm-badge--out       { background: #fdecec;              color: var(--red-600); }
.igm-badge--backorder,
.igm-badge--warning   { background: var(--warning-bg);    color: var(--warning-700); }

/* Free-shipping progress --------------------------------------------------- */

.igm-freeship {
    border: 1px solid #cfe6d9;
    background: #f2fbf6;
    border-radius: var(--radius-lg);
    padding: 13px 16px;
    margin: 0 0 16px;
}

.igm-freeship__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.igm-freeship__label {
    font: 600 13.5px/1.4 var(--font-body);
    color: var(--success-700);
}

.igm-freeship__label .amount,
.igm-freeship__label bdi {
    font-family: var(--font-display);
}

.igm-freeship__count {
    font: 500 12px/1.4 var(--font-body);
    color: var(--success-700);
    opacity: .75;
    white-space: nowrap;
}

.igm-freeship__track {
    height: 7px;
    border-radius: var(--radius-pill);
    background: #d9ece2;
    overflow: hidden;
}

.igm-freeship__fill {
    display: block;
    height: 100%;
    background: var(--success-700);
    transition: width .3s var(--ease-standard);
}

/* Cart --------------------------------------------------------------------- */

.igm-cart__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 28px;
    align-items: start;
}

.igm-cart-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.igm-cart-rail__sticky {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.igm-cart-table {
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--white);
}

.igm-cart-table__head,
.igm-cart-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px 148px 118px;
    gap: 16px;
    align-items: center;
}

.igm-cart-table__head {
    padding: 12px 18px;
    background: var(--gray-50);
    border-bottom: 1px solid #e3e9f0;
    font: 600 11px/1 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5f6b7a;
}

.igm-cart-table__head span:nth-child(2),
.igm-cart-table__head span:nth-child(3) { text-align: center; }
.igm-cart-table__head span:nth-child(4) { text-align: right; }

.igm-cart-item {
    padding: 18px;
    border-bottom: 1px solid #eef2f7;
}

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

.igm-cart-item__product {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
}

.igm-col-thumb {
    width: 76px;
    height: 76px;
    flex: none;
    border: 1px solid #e3e9f0;
    border-radius: 10px;
    background: var(--gradient-product-frame);
    overflow: hidden;
}

.igm-col-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.igm-col-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.igm-cart-item__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 1px;
}

.igm-cart-item__title {
    font: 600 15px/1.35 var(--font-display);
    color: var(--navy-700);
    text-decoration: none;
}

.igm-cart-item__title:hover { text-decoration: underline; }

.igm-cart-item__meta,
.igm-col-meta {
    font: 400 12.5px/1.5 var(--font-body);
    color: var(--gray-600);
}

.igm-cart-item__links {
    display: flex;
    gap: 14px;
    margin-top: 5px;
}

.igm-cart-item__links a {
    font: 500 12px/1 var(--font-body);
    text-decoration: none;
}

.igm-cart-item__remove { color: #8c1d13; }
.igm-cart-item__links a:hover { text-decoration: underline; }

.igm-col-price { text-align: center; }

.igm-col-price__now {
    display: block;
    font: 600 14px/1.3 var(--font-display);
    color: var(--ink);
}

.igm-col-price__was {
    font: 400 11.5px/1.4 var(--font-body);
    color: var(--red-500);
}

.igm-col-qty { display: flex; justify-content: center; }

/* The quantity stepper now lives in components.css — the product page uses it
   too, and funnel.css is not loaded there. */


.igm-col-subtotal { text-align: right; }

.igm-col-subtotal__amount {
    display: block;
    font: 700 16px/1.3 var(--font-display);
    color: var(--ink);
}

.igm-col-subtotal__saving {
    display: block;
    margin-top: 2px;
    font: 500 11.5px/1.4 var(--font-body);
    color: var(--success-700);
}

.igm-item-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.igm-coupon {
    display: flex;
    gap: 8px;
    flex: 1 1 300px;
}

.igm-coupon .igm-input {
    flex: 1;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font: 400 14px/1 var(--font-body);
}

.igm-cart-continue { margin-top: 2px; }

/*
 * Cart cross-sells (Sheet1 r49).
 *
 * WooCommerce renders these through its own core template, so the markup is
 * ul.products rather than this theme's .igm-products and it inherited none of
 * the shop grid — the cards sat at their intrinsic width and did not line up
 * with anything. The grid is restated here.
 *
 * 4 / 3 / 2 across desktop, tablet and phone, matching the count passed to
 * woocommerce_cross_sell_display() in cart.php.
 */
.igm-cart-crosssell ul.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .igm-cart-crosssell ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .igm-cart-crosssell ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.igm-cart-crosssell ul.products::before,
.igm-cart-crosssell ul.products::after {
    content: none;
}

.igm-cart-crosssell ul.products > li {
    width: auto;
    margin: 0;
    float: none;
}

/* Trust block -------------------------------------------------------------- */

.igm-trustblock {
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    background: #f9fbfd;
}

.igm-trustblock__title {
    margin: 0 0 14px;
    font: 600 11px/1 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5f6b7a;
}

.igm-trustblock__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.igm-trustblock__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.igm-trustblock__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: var(--white);
    border: 1px solid #e3e9f0;
    color: var(--navy-700);
}

.igm-trustblock__text strong {
    display: block;
    font: 600 12.5px/1.35 var(--font-body);
    color: var(--ink);
}

.igm-trustblock__text span {
    font: 400 11.5px/1.45 var(--font-body);
    color: var(--gray-600);
}

/* Summary rail — cart, checkout, payment ----------------------------------- */

.igm-summary {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    width: 100%;
}

.igm-summary__head,
.igm-summary thead th .igm-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #eef2f7;
}

.igm-summary__head h2,
.igm-summary__head-title {
    margin: 0;
    font: 700 17px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-summary__edit,
.igm-summary__ref {
    font: 500 12px/1 var(--font-body);
    color: var(--navy-700);
}

.igm-summary__ref { color: var(--gray-500); }

.igm-summary__body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.igm-summary__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 400 13.5px/1.4 var(--font-body);
    color: var(--gray-700);
}

.igm-summary__row .igm-amount,
.igm-amount {
    font: 600 13.5px/1.4 var(--font-display);
    color: var(--ink);
    white-space: nowrap;
}

.igm-saving,
.igm-saving .amount { color: var(--success-700); }

.igm-summary__items {
    margin: 0;
    padding: 15px 18px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
    border-bottom: 1px solid #eef2f7;
}

.igm-summary__item {
    display: flex;
    gap: 11px;
    align-items: center;
}

.igm-summary__thumb {
    width: 48px;
    height: 48px;
    flex: none;
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-md);
    background: var(--gradient-product-frame);
    overflow: hidden;
}

.igm-summary__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.igm-summary__item-text {
    flex: 1;
    min-width: 0;
}

.igm-summary__item-text strong {
    display: block;
    font: 600 13px/1.35 var(--font-display);
    color: var(--ink);
}

.igm-summary__item-meta,
.igm-summary__item-text span {
    font: 400 11.5px/1.4 var(--font-body);
    color: var(--gray-500);
}

.igm-summary__item-price {
    font: 700 13.5px/1.3 var(--font-display);
    color: var(--ink);
    white-space: nowrap;
}

.igm-summary__total {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #e3e9f0;
    padding-top: 13px;
}

.igm-summary__total-label strong {
    display: block;
    font: 600 15px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-summary__total-label span {
    font: 400 11.5px/1.4 var(--font-body);
    color: var(--gray-500);
}

.igm-summary__total-amount,
.igm-summary__total-amount .amount {
    font: 800 26px/1.1 var(--font-display);
    color: var(--navy-700);
}

.igm-summary__cta,
.igm-summary__cta a.checkout-button,
.wc-proceed-to-checkout a.checkout-button {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--navy-700);
    color: var(--white);
    font: 700 16px/1.2 var(--font-display);
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.igm-summary__cta:hover,
.wc-proceed-to-checkout a.checkout-button:hover { background: var(--navy-800); }

.igm-summary__reassure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 10px 0 0;
    font: 400 11.5px/1.5 var(--font-body);
    color: var(--gray-600);
    text-align: center;
}

.igm-summary__reassure .igm-icon { width: 15px; height: 15px; }

.igm-summary__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 0;
    padding: 10px 0 0;
    border-top: 1px dashed #dbe3ec;
    list-style: none;
}

.igm-summary__methods li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-xs);
    font: 600 9.5px/1 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5f6b7a;
}

.igm-summary__methods .igm-payrow__icon,
.igm-footer__methods .igm-payrow__icon { width: 15px; height: 15px; }

.igm-summary__block {
    border-top: 1px dashed #dbe3ec;
    padding-top: 12px;
}

.igm-summary__label {
    margin: 0 0 9px;
    font: 600 11px/1 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5f6b7a;
}

/* Shipping choices, in the cart rail and the checkout review table. */
.igm-summary ul#shipping_method,
.woocommerce-checkout-review-order-table ul#shipping_method {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.igm-summary ul#shipping_method li,
.woocommerce-checkout-review-order-table ul#shipping_method li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font: 400 13px/1.4 var(--font-body);
}

.igm-summary ul#shipping_method li label,
.woocommerce-checkout-review-order-table ul#shipping_method li label {
    flex: 1;
    margin: 0;
    cursor: pointer;
    font: 600 13px/1.35 var(--font-body);
    color: var(--ink);
}

.igm-summary ul#shipping_method li:has(input:checked),
.woocommerce-checkout-review-order-table ul#shipping_method li:has(input:checked){
    border: 1.5px solid var(--navy-700);
    background: var(--gray-50);
}

/* Help card ---------------------------------------------------------------- */

.igm-helpcard {
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    background: var(--gray-50);
}

.igm-helpcard__title {
    margin: 0 0 6px;
    font: 600 12.5px/1.4 var(--font-display);
    color: var(--navy-700);
}

.igm-helpcard__copy {
    margin: 0;
    font: 400 12px/1.6 var(--font-body);
    color: var(--gray-600);
}

.igm-helpcard__copy a { color: var(--navy-700); font-weight: 500; }

/* Checkout ----------------------------------------------------------------- */

.igm-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 26px;
    align-items: start;
}

/*
 * On a failed checkout submission, WooCommerce core's own checkout.js does
 * `checkout_form.prepend('<div class="woocommerce-NoticeGroup-checkout">...')`
 * -- it inserts the error notice as a THIRD direct child of form.checkout,
 * which is this 2-column grid. Without a span, the grid auto-places it as a
 * new grid item: the notice claims column 1, .igm-checkout__main gets forced
 * into the 400px aside column, and the actual aside wraps to a mostly-empty
 * new row. Reproduced by submitting checkout with an invalid billing email.
 */
.igm-checkout > .woocommerce-NoticeGroup,
.igm-checkout > .woocommerce-error,
.igm-checkout > .woocommerce-message,
.igm-checkout > .woocommerce-info {
    grid-column: 1 / -1;
}

.igm-checkout__main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Grid items default to min-width:auto and so refuse to shrink below their
   content. .igm-checkout__main already opts out; the aside must too, or wide
   summary content pushes the 400px track open again. */
.igm-checkout__aside {
    min-width: 0;
}

.igm-checkout__aside-sticky {
    position: sticky;
    top: 24px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.igm-account-prompt {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-left: 4px solid var(--navy-700);
    border-radius: var(--radius-lg);
    padding: 13px 16px;
}

.igm-account-prompt p {
    flex: 1;
    margin: 0;
    font: 400 13.5px/1.5 var(--font-body);
    color: var(--gray-700);
}

.igm-section,
.igm-panel {
    background: var(--white);
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-lg);
    padding: 20px;
}

.igm-checkout__sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.igm-section__head,
.igm-panel__head {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.igm-section__head h2,
.igm-panel__head h2 {
    margin: 0;
    font: 700 17px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-section__num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--navy-700);
    color: var(--white);
    font: 700 12px/1 var(--font-display);
}

.igm-section__note {
    margin-left: auto;
    font: 400 11.5px/1.4 var(--font-body);
    color: var(--gray-500);
}

/* Woo's own field markup, given the design's input treatment. */
.igm-checkout .form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
}

.igm-checkout .form-row label {
    font: 600 12.5px/1.4 var(--font-body);
    color: #1f3a5a;
}

.igm-checkout .form-row .required { color: var(--red-500); text-decoration: none; }

.igm-checkout .input-text,
.igm-checkout select,
.igm-checkout textarea,
.igm-checkout .select2-container .select2-selection--single {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--white);
    /* 16px so iOS does not zoom the page when a field takes focus. */
    font: 400 16px/1.3 var(--font-body);
    color: var(--ink);
}

.igm-checkout textarea {
    min-height: 88px;
    padding: 12px 13px;
    resize: vertical;
}

.igm-checkout .input-text:focus,
.igm-checkout select:focus,
.igm-checkout textarea:focus {
    outline: 0;
    border-color: var(--navy-700);
    box-shadow: var(--focus-ring);
}

.igm-checkout .form-row-first,
.igm-checkout .form-row-last {
    width: 100%;
}

.igm-checkout h3 {
    margin: 0 0 12px;
    font: 700 14px/1.3 var(--font-display);
    color: var(--navy-700);
}

/* Payment methods ---------------------------------------------------------- */

.woocommerce-checkout #payment,
.igm-pay #payment {
    background: transparent;
    border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods,
.igm-pay #payment ul.payment_methods {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.woocommerce-checkout #payment li.wc_payment_method,
.igm-pay #payment li.wc_payment_method {
    margin: 0;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.woocommerce-checkout #payment li.wc_payment_method:has(input:checked),
.igm-pay #payment li.wc_payment_method:has(input:checked){
    border: 1.5px solid var(--navy-700);
}

.woocommerce-checkout #payment li.wc_payment_method label,
.igm-pay #payment li.wc_payment_method label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin: 0;
    font: 600 14px/1.35 var(--font-body);
    color: var(--ink);
    cursor: pointer;
}

.woocommerce-checkout #payment li.wc_payment_method:has(input:checked) label,
.igm-pay #payment li.wc_payment_method:has(input:checked) label{
    background: var(--gray-50);
}

.woocommerce-checkout #payment li.wc_payment_method input[type="radio"],
.igm-pay #payment li.wc_payment_method input[type="radio"] {
    /* 20px, matching the shipping radios — they sit in the same funnel and
       were two different sizes. */
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--navy-700);
}

.woocommerce-checkout #payment div.payment_box,
.igm-pay #payment div.payment_box {
    margin: 0;
    padding: 14px 16px;
    border-top: 1px solid #e3e9f0;
    border-radius: 0;
    background: repeating-linear-gradient(135deg, #fbfcfe, #fbfcfe 9px, #f2f5f9 9px, #f2f5f9 18px);
    font: 400 12.5px/1.65 var(--font-body);
    color: var(--gray-600);
}

.woocommerce-checkout #payment div.payment_box::before,
.igm-pay #payment div.payment_box::before { display: none; }

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.igm-pay .woocommerce-terms-and-conditions-wrapper {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #dbe3ec;
    font: 400 12.5px/1.6 var(--font-body);
    color: var(--gray-700);
}

/*
 * The rail carries the primary call to action (see review-order.php), so core's
 * duplicate button is hidden rather than removed — gateways that address
 * #place_order in their own scripts still find it in the DOM.
 */
.igm-checkout #payment #place_order {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Review-order table, laid out as the summary card.
 *
 * The summary is a card, not a table, and several of its rows already carried
 * display:flex/block (.igm-summary__row, the shipping row, the item cell). Any
 * display other than table-* pulls a row or cell out of the table formatting
 * context, and colspan="2" goes with it: the browser wraps the orphaned cell in
 * an anonymous single-column cell, so those rows were confined to the first
 * column -- half the 400px card -- with the rest left empty. The same mixing is
 * what drove the table to its 629px min-content width and put a horizontal
 * scrollbar on the whole checkout.
 *
 * So drop the table model outright rather than patch around it. With no columns
 * there is nothing for a lost colspan to fall out of, every row is simply the
 * width of the card, and `table-layout` stops being relevant.
 */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout-review-order-table > * > tr,
.woocommerce-checkout-review-order-table > * > tr > th,
.woocommerce-checkout-review-order-table > * > tr > td {
    display: block;
    width: auto;
}

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
}

/* Label on the left, amount on the right, back on one line. */
.woocommerce-checkout-review-order-table tfoot tr.igm-summary__row,
.woocommerce-checkout-review-order-table tfoot tr.igm-summary__total-row,
.woocommerce-checkout-review-order-table tfoot tr.order-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    border: 0;
    padding: 0;
    text-align: left;
    vertical-align: middle;
    /* With a fixed layout the cells can no longer widen the table, so a long
       unbroken product name has to wrap inside the cell instead. */
    overflow-wrap: anywhere;
}

.woocommerce-checkout-review-order-table thead th { padding: 0; }

.woocommerce-checkout-review-order-table tbody td.igm-summary__item {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #eef2f7;
}

.woocommerce-checkout-review-order-table tfoot tr.igm-summary__row th,
.woocommerce-checkout-review-order-table tfoot tr.igm-summary__row td {
    padding: 8px 18px;
    font: 400 13.5px/1.4 var(--font-body);
    color: var(--gray-700);
}

.woocommerce-checkout-review-order-table tfoot tr.igm-summary__row td { text-align: right; }

.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
    padding: 10px 18px;
    vertical-align: top;
}

.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th {
    font: 600 11px/1.6 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #5f6b7a;
}

.woocommerce-checkout-review-order-table tfoot tr.igm-summary__total-row th,
.woocommerce-checkout-review-order-table tfoot tr.igm-summary__total-row td {
    padding: 14px 18px 0;
    border-top: 1px solid #e3e9f0;
    vertical-align: bottom;
}

.woocommerce-checkout-review-order-table tfoot tr.igm-summary__total-row td { text-align: right; }

.woocommerce-checkout-review-order-table tfoot tr.igm-summary__cta-row td { padding: 14px 18px 18px; }

/* Assurance list ----------------------------------------------------------- */

.igm-assure-list {
    margin: 0;
    padding: 14px 16px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-lg);
    background: var(--white);
}

.igm-panel .igm-assure-list { border: 0; padding: 0; background: transparent; }

.igm-assure-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--navy-700);
}

.igm-assure-list li span {
    font: 400 11.5px/1.5 var(--font-body);
    color: var(--gray-600);
}

.igm-assure-list li span strong {
    display: block;
    font: 600 12.5px/1.35 var(--font-body);
    color: var(--ink);
}

/* Payment page — 3a to 3d --------------------------------------------------- */

.igm-pay__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.igm-pay__main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.igm-pay__rail-sticky {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.igm-panel {
    box-shadow: var(--shadow-card);
    padding: 22px;
}

.igm-panel__head { justify-content: space-between; margin-bottom: 10px; }

.igm-panel__lede,
.igm-panel p {
    margin: 0 0 12px;
    font: 400 13.5px/1.65 var(--font-body);
    color: var(--gray-700);
}

.igm-panel__instructions {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    font: 400 13px/1.7 var(--font-body);
    color: var(--gray-700);
}

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

.igm-paydetails {
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.igm-paydetails__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-md);
}

.igm-paydetails__row--key {
    border: 1.5px solid var(--navy-700);
    background: var(--gray-50);
}

.igm-paydetails dt {
    font: 400 12px/1.3 var(--font-body);
    color: var(--gray-500);
}

.igm-paydetails dd {
    margin: 0;
    font: 600 13px/1.3 var(--font-body);
    color: var(--ink);
}

.igm-copy {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.igm-copy__value { font: 700 13.5px/1.3 var(--font-display); color: var(--navy-700); }

.igm-copy__btn {
    border: 0;
    background: transparent;
    padding: 6px;
    font: 600 11.5px/1 var(--font-body);
    color: var(--navy-700);
    cursor: pointer;
}

.igm-copy__btn:hover { text-decoration: underline; }

.igm-upi-panel {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--gray-300);
}

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

.igm-upi-panel__body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.igm-upi-panel__qr {
    flex: 0 0 auto;
    width: 180px;
    height: 180px;
    padding: 8px;
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-md);
    background: var(--white);
    line-height: 0;
}

.igm-upi-panel__qr canvas { display: block; width: 100%; height: 100%; }

.igm-upi-panel__details {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.igm-upi-panel__note {
    margin: 0;
    font: 400 12.5px/1.6 var(--font-body);
    color: var(--gray-600);
}

.igm-upi-panel__note p:last-child { margin-bottom: 0; }

.igm-upi-panel__fallback {
    margin: 0;
    font: 400 12px/1.5 var(--font-body);
    color: var(--gray-500);
}

@media (max-width: 560px) {
    .igm-upi-panel__body { flex-direction: column; align-items: center; text-align: center; }
    .igm-upi-panel__details { align-items: center; }
}

.igm-panel__warn {
    margin: 0;
    padding: 11px 13px;
    background: var(--warning-bg);
    border: 1px solid #f0d69a;
    border-radius: var(--radius-md);
    font: 400 12px/1.6 var(--font-body);
    color: var(--warning-700);
}

.igm-pay__switch-note {
    margin: 0 0 12px;
    font: 400 12.5px/1.5 var(--font-body);
    color: var(--gray-500);
}

.igm-pay__actions { margin-top: 16px; }

.igm-pay__submit {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--navy-700);
    color: var(--white);
    font: 700 16px/1.2 var(--font-display);
    cursor: pointer;
}

.igm-pay__submit:hover { background: var(--navy-800); }

.igm-paysteps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: igm-paysteps;
}

.igm-paysteps li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.igm-paysteps__num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--brand-tint-08);
    color: var(--navy-700);
    font: 700 12px/1 var(--font-display);
}

.igm-paysteps li span:last-child {
    font: 400 12.5px/1.6 var(--font-body);
    color: var(--gray-600);
}

.igm-paysteps li span:last-child strong {
    display: block;
    font: 600 13.5px/1.4 var(--font-body);
    color: var(--ink);
}

.igm-pay__links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.igm-pay__links .igm-btn { justify-content: center; text-align: center; }

/* Thank-you — 1e and 1f ---------------------------------------------------- */

.igm-thanks-hero {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
    padding: 26px 24px;
    border-radius: var(--radius-lg);
    border: 1px solid #cfe6d9;
    background: linear-gradient(180deg, #f2fbf6, #fff);
    margin-bottom: 18px;
}

.igm-thanks--pending .igm-thanks-hero,
.igm-thanks--failed .igm-thanks-hero {
    border-color: #f0d69a;
    background: linear-gradient(180deg, #fffaec, #fff);
}

.igm-thanks-hero__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: var(--radius-pill);
    background: var(--success-700);
    color: var(--white);
}

.igm-thanks-hero__mark .igm-icon { width: 26px; height: 26px; }

.igm-thanks--pending .igm-thanks-hero__mark,
.igm-thanks--failed .igm-thanks-hero__mark { background: var(--warning-700); }

.igm-thanks-hero__text { flex: 1; min-width: 280px; }

.igm-thanks-hero__text h1 {
    margin: 0 0 8px;
    font: 700 30px/1.2 var(--font-display);
    color: var(--navy-700);
}

.igm-thanks-hero__lede {
    margin: 0;
    max-width: 660px;
    font: 400 14.5px/1.6 var(--font-body);
    color: var(--gray-700);
}

.igm-thanks__eyebrow {
    margin: 0;
    font: 600 11px/1 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--success-700);
}

.igm-thanks--pending .igm-thanks__eyebrow,
.igm-thanks--failed .igm-thanks__eyebrow { color: var(--warning-700); }

.igm-thanks-hero__actions {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 230px;
}

.igm-thanks-hero__actions .igm-btn { justify-content: center; min-height: 48px; }

/* Five-step tracker. */
.igm-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.igm-track__step {
    position: relative;
    text-align: center;
    padding: 0 6px;
}

/* The connector is drawn per step so it never overshoots the first or last. */
.igm-track__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #e3e9f0;
    border-radius: var(--radius-pill);
    z-index: 0;
}

.igm-track__step--done:not(:last-child)::after { background: var(--success-700); }

.igm-track__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0 auto 10px;
    border-radius: var(--radius-pill);
    border: 3px solid #e3e9f0;
    background: var(--white);
    color: var(--gray-500);
    font: 700 11px/1 var(--font-display);
}

.igm-track__step--done .igm-track__marker {
    border-color: var(--white);
    background: var(--success-700);
    color: var(--white);
}

.igm-track__step--current .igm-track__marker {
    border-color: var(--navy-700);
    color: var(--navy-700);
}

.igm-track__step--waiting .igm-track__marker {
    border-color: var(--warning-700);
    color: var(--warning-700);
}

.igm-track__label {
    display: block;
    font: 600 13px/1.35 var(--font-display);
    color: var(--gray-500);
}

.igm-track__step--done .igm-track__label,
.igm-track__step--current .igm-track__label { color: var(--navy-700); }

.igm-track__step--waiting .igm-track__label { color: var(--warning-700); }

/* Every step note is readable, reached or not: the step's state is carried by
   the marker and the label, not by making the text too faint to read. */
.igm-track__note {
    display: block;
    font: 400 11.5px/1.5 var(--font-body);
    color: var(--gray-500);
}

.igm-thanks__timeline-panel { margin-bottom: 18px; }

.igm-thanks__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 20px;
    align-items: start;
}

.igm-thanks__main,
.igm-thanks__rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.igm-panel--hold {
    border: 1.5px solid #f0d69a;
    background: #fffaec;
}

.igm-panel__note {
    margin: 10px 0 0;
    font: 400 11.5px/1.5 var(--font-body);
    color: var(--gray-500);
}

.igm-panel__actions { margin: 14px 0 0; }

.igm-panel--account h2,
.igm-panel--support h2,
.igm-panel--reassure h2 {
    margin: 0 0 12px;
    font: 700 15.5px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-contactlist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.igm-contactlist a {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    color: var(--navy-700);
    text-decoration: none;
}

.igm-contactlist a:hover { background: var(--gray-50); }

.igm-contactlist a span {
    flex: 1;
    font: 600 13px/1.3 var(--font-body);
    color: var(--ink);
}

.igm-contactlist a em {
    font: 400 11.5px/1 var(--font-body);
    color: var(--gray-500);
    font-style: normal;
}

/* WooCommerce's own order tables, given the card treatment. */
.igm-thanks .woocommerce-order-details,
.igm-thanks .woocommerce-customer-details {
    background: var(--white);
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-lg);
    padding: 20px 22px;
}

.igm-thanks .woocommerce-order-overview { display: none; }

/* -------------------------------------------------------------------------
   Tablet — design 1m: the rail drops below the list.
   ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .igm-cart__layout,
    .igm-checkout,
    .igm-pay__layout,
    .igm-thanks__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .igm-cart-rail__sticky,
    .igm-checkout__aside-sticky,
    .igm-pay__rail-sticky {
        position: static;
    }

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

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

/* -------------------------------------------------------------------------
   Mobile — designs 1i, 1j, 1k. The line-item grid becomes a stack, the
   summary keeps its own card, and the pay bar sticks to the viewport.
   ---------------------------------------------------------------------- */

@media (max-width: 782px) {
    .igm-funnel-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .igm-funnel-head__titles h1 { font-size: 23px; }

    /* Numbers only on the step bar — the labels do not fit at 390px. */
    .igm-funnel-head .igm-progress { justify-content: space-between; }
    .igm-funnel-head .igm-progress__step { flex: 1; }
    .igm-funnel-head .igm-progress__label { display: none; }
    .igm-funnel-head .igm-progress__step:not(:last-child)::after {
        flex: 1;
        width: auto;
        margin: 0 6px;
    }

    .igm-cart-table__head { display: none; }

    .igm-cart-item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "product product"
            "qty     subtotal"
            "price   subtotal";
        gap: 12px;
        padding: 16px;
    }

    .igm-cart-item__product { grid-area: product; }
    .igm-col-price         { grid-area: price; text-align: left; }
    .igm-col-qty           { grid-area: qty; justify-content: flex-start; }
    .igm-col-subtotal      { grid-area: subtotal; align-self: end; }

    .igm-col-price::before,
    .igm-col-subtotal::before {
        content: attr(data-label);
        display: block;
        font: 600 10px/1 var(--font-body);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--gray-500);
        margin-bottom: 4px;
    }

    .igm-col-thumb { width: 62px; height: 62px; }

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

    .igm-item-actions { flex-direction: column; align-items: stretch; }
    .igm-coupon { flex: 1 1 auto; }

    /* The five-step tracker reads as a vertical list on a phone. */
    .igm-track {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .igm-track__step {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 12px;
        text-align: left;
        padding: 0;
    }

    .igm-track__marker { margin: 0; grid-row: span 2; }

    .igm-track__step:not(:last-child)::after {
        top: 30px;
        left: 13px;
        width: 3px;
        height: calc(100% - 16px);
    }

    .igm-thanks-hero { padding: 20px 18px; }
    .igm-thanks-hero__text h1 { font-size: 23px; }
    .igm-thanks-hero__actions { min-width: 100%; }

    .igm-section,
    .igm-panel { padding: 16px; }

    /*
     * Sticky pay bar. It only appears once the summary is off-screen on the
     * cart; on checkout the rail CTA is already the last thing on the page, so
     * a second fixed bar would duplicate it.
     */
    .igm-cart .igm-cart-rail__sticky { position: static; }
}

@media (max-width: 480px) {
    /*
     * Still two columns at 390px: the quantity stepper is 134px wide and the
     * line total is short, so stacking all four rows only made the card taller
     * without making anything easier to read.
     */
    .igm-cart-item {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "product  product"
            "price    price"
            "qty      subtotal";
        row-gap: 14px;
    }

    .igm-col-subtotal { text-align: right; }
    .igm-col-price { display: flex; align-items: baseline; gap: 8px; }
    .igm-col-price::before { margin-bottom: 0; }
    .igm-summary__total-amount { font-size: 22px; }
}

/* -------------------------------------------------------------------------
   Corrections found while checking the rendered pages against the design.
   ---------------------------------------------------------------------- */

/* The hero inherits the page's centred text on some templates; the design
   left-aligns everything except the mark. */
.igm-thanks-hero,
.igm-thanks-hero__text,
.igm-thanks-hero__text h1,
.igm-thanks-hero__lede {
    text-align: left;
}

/* Gateway instructions arrive as raw headings and tables (BACS prints its own
   <h2> and account list). Bring them down to the panel's own scale so they
   read as part of the card. */
.igm-panel--instructions h2,
.igm-panel--instructions h3 {
    margin: 0 0 12px;
    font: 700 17px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-panel--instructions h3 { font-size: 14px; }

.igm-panel--instructions ul,
.igm-panel--instructions .wc-bacs-bank-details {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

/* BACS prints "Label: <strong>value</strong>" — the label is the loose text
   and the value is the <strong>, not the other way round. */
.igm-panel--instructions li {
    padding: 11px 13px;
    border: 1px solid #e3e9f0;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    font: 400 11px/1.4 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.igm-panel--instructions li strong {
    display: block;
    margin-top: 4px;
    font: 600 13.5px/1.45 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.igm-panel--instructions .wc-bacs-bank-details-account-name {
    margin: 0 0 10px;
    font: 700 14px/1.4 var(--font-display);
    color: var(--navy-700);
}

.igm-panel--instructions > p:first-child { margin-top: 0; }

/* The funnel pages own their <h1>; breadcrumbs stay, the page title does not. */
.igm-funnel + .igm-entry__title,
.woocommerce-order .igm-entry__title { display: none; }

/* WooCommerce core overrides ------------------------------------------------
 *
 * Two of core's own rules are strong enough to win against the component
 * styles above and both were visibly wrong on the rendered page:
 *   - `a.button.alt` carries WooCommerce's default purple, which beat the
 *     navy set on `.checkout-button`.
 *   - `a.remove` is sized in `em` with `color: red !important`, so the cart's
 *     "Remove" link rendered as oversized red text on top of its neighbour.
 * They are matched at the same or higher specificity here rather than being
 * left to fight.
 */

.igm-summary__cta-wrap { margin: 4px 0 0; padding: 0; }

.woocommerce .igm-summary__cta-wrap a.button,
.woocommerce .igm-summary__cta-wrap a.button.alt,
.igm-summary__cta-wrap a.checkout-button {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--navy-700);
    color: var(--white);
    font: 700 16px/1.2 var(--font-display);
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
}

.woocommerce .igm-summary__cta-wrap a.button:hover,
.woocommerce .igm-summary__cta-wrap a.button.alt:hover {
    background: var(--navy-800);
    color: var(--white);
}

.woocommerce .igm-cart-item__links a.remove,
.igm-cart-item__links a.remove {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    font: 500 12px/1 var(--font-body);
    text-align: left;
    color: #8c1d13 !important;
}

.woocommerce .igm-cart-item__links a.remove:hover,
.igm-cart-item__links a.remove:hover {
    background: transparent;
    color: #8c1d13 !important;
    text-decoration: underline;
}

/* WooCommerce's own float-based checkout grid ------------------------------
 *
 * Core still lays the checkout out with floats and percentage widths:
 *   .woocommerce .col2-set .col-1 { float: left; width: 48% }
 *   .woocommerce form .form-row-first { float: left; width: 47% }
 * Inside the CSS grid above those percentages resolve against the grid track,
 * not the page, so the billing card collapsed to ~200px and its name fields
 * to a fraction of that. The class names stay — plugins address them — but
 * the float layout is switched off and replaced with a grid.
 */

.woocommerce .igm-checkout .col2-set .col-1,
.woocommerce .igm-checkout .col2-set .col-2,
.igm-checkout .col2-set .col-1,
.igm-checkout .col2-set .col-2 {
    float: none;
    width: auto;
    max-width: none;
    padding: 20px;
}

.woocommerce .igm-checkout form .form-row,
.woocommerce .igm-checkout .form-row,
.igm-checkout .form-row {
    float: none;
    width: 100%;
    max-width: none;
}

/* First/last name and the other paired fields keep their two-up rhythm, but
   as a grid row rather than two floats. */
.igm-checkout .woocommerce-billing-fields__field-wrapper,
.igm-checkout .woocommerce-shipping-fields__field-wrapper,
.igm-checkout .woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
}

.igm-checkout .form-row-wide,
.igm-checkout #order_comments_field,
.igm-checkout .woocommerce-additional-fields__field-wrapper .form-row {
    grid-column: 1 / -1;
}

.igm-checkout .woocommerce-billing-fields h3,
.igm-checkout .woocommerce-shipping-fields h3,
.igm-checkout .woocommerce-additional-fields h3 {
    grid-column: 1 / -1;
}

/* Core prints its own "Billing details" / "Ship to a different address?"
   headings inside sections that already carry a numbered heading. */
.igm-checkout .woocommerce-billing-fields > h3:first-child,
.igm-checkout .woocommerce-additional-fields > h3:first-child {
    display: none;
}

/* The coupon toggle above the form. */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon {
    margin: 0 0 14px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 13px 16px;
    border: 1px solid var(--gray-300);
    border-left: 4px solid var(--navy-700);
    border-radius: var(--radius-lg);
    background: var(--white);
    font: 400 13.5px/1.5 var(--font-body);
    color: var(--gray-700);
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }

.woocommerce-checkout .checkout_coupon {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.woocommerce-checkout .checkout_coupon .form-row { width: auto; margin: 0; }
.woocommerce-checkout .checkout_coupon .form-row-first { flex: 1 1 220px; }

@media (max-width: 640px) {
    .igm-checkout .woocommerce-billing-fields__field-wrapper,
    .igm-checkout .woocommerce-shipping-fields__field-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * Core's clearfix on .col2-set is `::before/::after { content: " "; display: table }`,
 * meant for a float layout. In a grid container those two pseudo-elements are
 * grid items in their own right, so they took the first and last cells and
 * pushed the billing and shipping cards onto separate rows in opposite columns.
 */
.igm-checkout .col2-set::before,
.igm-checkout .col2-set::after,
.woocommerce .igm-checkout .col2-set::before,
.woocommerce .igm-checkout .col2-set::after {
    display: none;
}

/* Payment rows — the radio is a sibling of the label, not inside it ---------
 *
 * WooCommerce prints `<li><input type="radio"><label>…</label><div class="payment_box">`,
 * so styling the label as a flex row left the radio stacked above its own
 * text. The row is built on the <li> instead.
 */

.woocommerce-checkout #payment li.wc_payment_method,
.igm-pay #payment li.wc_payment_method {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 0 14px;
}

.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"],
.igm-pay #payment li.wc_payment_method > input[type="radio"] {
    grid-column: 1;
    margin: 0;
}

.woocommerce-checkout #payment li.wc_payment_method > label,
.igm-pay #payment li.wc_payment_method > label {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    background: transparent;
}

.woocommerce-checkout #payment li.wc_payment_method:has(input:checked) > label,
.igm-pay #payment li.wc_payment_method:has(input:checked) > label{
    background: transparent;
}

.woocommerce-checkout #payment li.wc_payment_method:has(input:checked),
.igm-pay #payment li.wc_payment_method:has(input:checked){
    background: var(--gray-50);
}

.woocommerce-checkout #payment li.wc_payment_method > label img,
.igm-pay #payment li.wc_payment_method > label img {
    max-height: 22px;
    width: auto;
    margin-left: auto;
}

.woocommerce-checkout #payment div.payment_box,
.igm-pay #payment div.payment_box {
    grid-column: 1 / -1;
    margin: 0 -14px;
    /* A flat tint, not the diagonal hatch: the design reserves the hatch for
       the hand-off panel that says "existing gateway UI, do not change". */
    background: var(--gray-50);
}

/* Shipping choices need the full width of the summary card, not the value
   column — the option labels wrap to four lines at half width. */
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals {
    display: block;
}

.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th,
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
    display: block;
    width: auto;
    padding: 0 18px;
}

.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th { padding-top: 12px; }
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td { padding-bottom: 12px; }

/* Checkout notices — login and coupon toggles ------------------------------
 *
 * Both arrive as `<div class="woocommerce-form-*-toggle"><div class="woocommerce-info">`.
 * Styling only the inner element left the outer wrapper carrying its own
 * border, so the coupon prompt rendered as a box inside a box. The wrapper is
 * stripped and the inner one carries the whole treatment, so the two prompts
 * match each other and the account prompt beside them.
 */

.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login-toggle {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: none;
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 13px 16px;
    border: 1px solid var(--gray-300);
    border-left: 4px solid var(--navy-700);
    border-radius: var(--radius-lg);
    background: var(--white);
    font: 400 13.5px/1.5 var(--font-body);
    color: var(--gray-700);
}

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before { display: none; }

.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    width: 100%;
}

/* Hit areas ----------------------------------------------------------------
 *
 * The design brief sets a 44px minimum hit area. These are the controls the
 * audit found below it. The radio inputs are a special case: the visible
 * control is core's own 13px dot, but the whole row is the target because the
 * <label> is bound to it — the dot is enlarged so it is easier to see and hit
 * directly, and the row keeps its own 44px+ height.
 */

.igm-cart-item__links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 0;
}

.woocommerce-checkout-review-order-table ul#shipping_method input[type="radio"],
.igm-summary ul#shipping_method input[type="radio"],
.woocommerce-checkout #payment input[type="radio"],
.igm-pay #payment input[type="radio"] {
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--navy-700);
}

.woocommerce-checkout-review-order-table ul#shipping_method li,
.igm-summary ul#shipping_method li {
    min-height: 44px;
}

/* The checkout's own checkboxes (terms, marketing, ship-to-different). */
.igm-checkout input[type="checkbox"],
.igm-pay input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--navy-700);
}

/*
 * Same trap as .col2-set on the checkout: WooCommerce clearfixes `ul.order_details`
 * with `::before/::after { content: " "; display: table }` for a float layout.
 * The BACS bank-details list carries that class, so in a grid the two pseudo
 * elements became grid items — the first cell sat empty and the account rows
 * wrapped a column early.
 */
.igm-panel--instructions ul::before,
.igm-panel--instructions ul::after,
.woocommerce .igm-panel--instructions ul.order_details::before,
.woocommerce .igm-panel--instructions ul.order_details::after {
    display: none;
}

/* Nothing in the instructions list should be an empty cell either. */
.igm-panel--instructions li:empty { display: none; }

/* The last two controls the hit-area audit found under 24px: the summary's
   "Edit cart" link, and core's .input-radio, which the earlier rule missed
   because it selects on the class rather than the type. */
.igm-summary__edit {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 0;
}

/* Cart line links and the saved-cart note, per design 1a. */

.igm-cart-item__save { color: var(--navy-700); }

.igm-cart-continue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.igm-cart-continue__note {
    font: 400 12.5px/1.5 var(--font-body);
    color: var(--gray-500);
}

/* Coupon and shipping estimator, now in the summary rail. */

.igm-coupon-toggle > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    cursor: pointer;
    list-style: none;
    font: 500 13px/1.4 var(--font-body);
    color: var(--navy-700);
}

.igm-coupon-toggle > summary::-webkit-details-marker { display: none; }

.igm-coupon-toggle > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--gray-500);
    border-bottom: 2px solid var(--gray-500);
    transform: rotate(45deg);
    transition: transform .2s var(--ease-standard);
}

.igm-coupon-toggle[open] > summary::after { transform: rotate(-135deg); }

.igm-coupon-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 10px;
}

.igm-coupon-form .igm-input {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font: 400 13.5px/1 var(--font-body);
}

.igm-coupon-form .igm-btn { min-height: 44px; }

/* WooCommerce's shipping calculator, sized for the rail.
   The design shows the country and postcode fields open, not behind a
   "Calculate shipping" link, so the toggle is hidden and the form is shown.
   Core's markup and its JS are untouched — only the disclosure is bypassed. */
.igm-summary .shipping-calculator-button {
    display: none;
}

.igm-summary .shipping-calculator-form {
    display: block !important;
    margin: 0 0 12px;
}

.igm-summary .shipping-calculator-form p,
.igm-summary .shipping-calculator-form .form-row {
    margin: 0 0 8px;
}

.igm-summary .shipping-calculator-form input,
.igm-summary .shipping-calculator-form select,
.igm-summary .shipping-calculator-form .select2-container .select2-selection--single {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font: 400 13.5px/1.3 var(--font-body);
}

.igm-summary .shipping-calculator-form button {
    width: 100%;
    min-height: 44px;
}

/* The trust block reads as four tight cells in the design; at the live column
   width the descriptions were wrapping to three lines. */
.igm-trustblock__grid { gap: 12px; }
.igm-trustblock__item { gap: 8px; }
.igm-trustblock__text strong { font-size: 12px; line-height: 1.3; }
.igm-trustblock__text span { font-size: 11px; line-height: 1.4; }
.igm-trustblock__icon { width: 28px; height: 28px; }

/* Country and postcode sit side by side, as design 1a shows them. */
@media (min-width: 380px) {
    .igm-summary .shipping-calculator-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 104px;
        gap: 8px;
        align-items: end;
    }

    .igm-summary .shipping-calculator-form > p:last-of-type,
    .igm-summary .shipping-calculator-form > button {
        grid-column: 1 / -1;
    }

    .igm-summary .shipping-calculator-form > p { margin: 0; }
}

/* Design 1a estimates first, then lists the rates that estimate produced.
   WooCommerce emits them the other way round, so the block is a flex column
   and the three children are ordered — no markup change, so core's JS still
   finds everything where it left it. */
.igm-summary__block--shipping {
    display: flex;
    flex-direction: column;
}

.igm-summary__block--shipping > .igm-summary__label            { order: 0; }
.igm-summary__block--shipping > .woocommerce-shipping-calculator { order: 1; }
.igm-summary__block--shipping > .woocommerce-shipping-methods    { order: 2; margin-top: 12px; }
.igm-summary__block--shipping > .woocommerce-shipping-destination { order: 3; }

.igm-summary__block--shipping > .woocommerce-shipping-destination {
    margin: 8px 0 0;
    font: 400 11.5px/1.5 var(--font-body);
    color: var(--gray-500);
}

/* Selected-state fallback -------------------------------------------------
 *
 * These are SEPARATE rules on purpose. CSS discards a whole rule when any
 * selector in its comma-list is unsupported, so pairing `.is-selected` with
 * `:has()` in one list meant a browser without :has() threw both away — the
 * fallback was silently no fallback at all. Verified by deleting every :has()
 * rule at runtime and re-reading the computed border.
 * The rules above use :has() to put the border and tint on the ROW that
 * contains the checked radio. :has() is unsupported in Firefox before 121 and
 * anything older, where the whole rule is dropped and the customer gets no
 * visible indication of which payment or shipping method is selected — on the
 * checkout, that is not a cosmetic loss.
 *
 * theme.js mirrors the checked state onto an `is-selected` class, so the two
 * mechanisms cover each other: :has() works with JavaScript disabled, the
 * class works without :has(). Neither is required for the radio itself to
 * function.
 */

.igm-summary ul#shipping_method li.is-selected,
.woocommerce-checkout-review-order-table ul#shipping_method li.is-selected {
    border: 1.5px solid var(--navy-700);
    background: var(--gray-50);
}

.woocommerce-checkout #payment li.wc_payment_method.is-selected,
.igm-pay #payment li.wc_payment_method.is-selected {
    border: 1.5px solid var(--navy-700);
    background: var(--gray-50);
}

.woocommerce-checkout #payment li.wc_payment_method.is-selected > label,
.igm-pay #payment li.wc_payment_method.is-selected > label {
    background: transparent;
}

/* Card panel — design 2a (IGM Secure Pay) ---------------------------------
 * The one place the design deliberately breaks the "navy, no pills" rule is
 * the pay button on this page, which stays as it is. Everything else here
 * follows the funnel's own tokens. */

.igm-card { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }

.igm-card__gate {
    border: 1px solid var(--gray-300);
    border-radius: 14px;
    background: var(--white);
    padding: 20px;
}

.igm-card__gate-head { display: flex; gap: 10px; align-items: flex-start; }

.igm-card__gate-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--brand-tint-08);
    color: var(--navy-700);
}

.igm-card__gate h3 {
    margin: 0;
    font: 700 17px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-card__gate p {
    margin: 3px 0 0;
    font: 400 13px/1.55 var(--font-body);
    color: var(--gray-600);
}

.igm-card__gate-q {
    margin: 16px 0 10px !important;
    font: 600 14px/1.4 var(--font-body) !important;
    color: var(--gray-900) !important;
}

.igm-card__gate-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.igm-card__gate-actions .igm-btn { flex: 1 1 180px; justify-content: center; min-height: 44px; }

.igm-card__gate-yes,
.igm-card__gate-no {
    margin: 14px 0 0 !important;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    font: 500 13px/1.45 var(--font-body) !important;
}

.igm-card__gate-yes { background: var(--success-bg); border: 1px solid rgba(11,91,60,.2); color: var(--success-700) !important; }
.igm-card__gate-no  { background: var(--warning-bg); border: 1px solid #f0d69a;            color: var(--warning-700) !important; }

/* When the customer says their card cannot do international, the fields are
   dimmed rather than removed — the answer is reversible. */
.igm-card.is-gate-blocked .igm-card__fields { opacity: .45; }

.igm-card__fields,
.igm-card__saved {
    border: 1px solid var(--gray-300);
    border-radius: 14px;
    background: var(--white);
    padding: 20px;
}

.igm-card__saved h3 {
    margin: 0;
    font: 700 17px/1.3 var(--font-display);
    color: var(--navy-700);
}

.igm-card__field { display: block; margin-bottom: 14px; position: relative; }

.igm-card__field > span {
    display: block;
    margin-bottom: 6px;
    font: 600 11px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1f3a5a;
}

.igm-card__field > span em {
    float: right;
    font: 400 11px/1 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--gray-600);
}

.igm-card__field input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
    /* 16px so iOS does not zoom when a card field takes focus. */
    font: 400 16px/1.3 var(--font-body);
    color: var(--gray-900);
    letter-spacing: .02em;
}

.igm-card__field input:focus {
    outline: 0;
    border-color: var(--navy-700);
    box-shadow: var(--focus-ring);
}

.igm-card__field--number input { padding-right: 84px; }

.igm-card__brand {
    position: absolute;
    right: 12px;
    bottom: 13px;
    font: 700 11px/1 var(--font-body);
    color: var(--navy-700);
    letter-spacing: .04em;
}

.igm-card__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.igm-card__saved-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    font: 500 13.5px/1.4 var(--font-body);
    cursor: pointer;
}

.igm-card__saved-row em { margin-left: auto; font-style: normal; color: var(--gray-500); font-size: 12px; }

/* An expired saved card is shown, not hidden — the customer needs to see it
   was there and switch to a new one — but its radio is disabled so a checkout
   attempt can never be built on a card the gateway will decline. */
.igm-card__saved-row.is-expired {
    cursor: default;
    opacity: .6;
}

.igm-card__saved-row.is-expired em { color: var(--red-600); font-weight: 600; }

.igm-card__error {
    margin: 0;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    background: #fdecec;
    border: 1px solid rgba(176,22,28,.25);
    font: 500 13px/1.5 var(--font-body);
    color: var(--red-600);
}

.igm-card__save {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    font: 400 13px/1.4 var(--font-body);
    color: var(--gray-700);
    cursor: pointer;
}

@media (max-width: 520px) {
    .igm-card__row { grid-template-columns: minmax(0, 1fr); }
}