/*
 * checkout.css — AlignUI skin for the Is Til Fest checkout (/kassen/)
 * ------------------------------------------------------------------
 * Matches the "Faktureringsdetaljer" billing-card design.
 * Enqueued gated to is_checkout() from classes/checkout-extend.php, AFTER
 * styles.css, so these rules win over the legacy checkout rules there.
 *
 * Live DOM targeted:
 *   - Elementor Pro Checkout widget: .e-checkout__column-start / __order_review
 *   - WooCommerce classic fields: .form-row > label + .woocommerce-input-wrapper > .input-text
 *   - ThemeHigh field-editor wrappers: .thwcfd-field-* / .thwcfd-required / .thwcfd-optional
 *
 * Scoped under body.woocommerce-checkout so it never leaks to other pages.
 * Typography (font-family / font-size / font-weight / line-height) is forced
 * with !important so it always wins over Elementor's typography controls.
 *
 * FONTS: Domaine Display + Aktiv Grotesk are commercial and NOT bundled.
 * Add licensed files to assets/fonts/ + uncomment @font-face at the bottom.
 */

/* ============================================================
   1. Design tokens
   ============================================================ */
body.woocommerce-checkout {
    --itf-brand: #003EC1;
    /* section title + subtitle */
    --itf-green: #3DCB80;
    /* shipping toggle / CTA green — tune to Elementor's global green if needed */
    --itf-primary: #375DFB;
    /* accent, focus, required * */
    --itf-cta: var(--itf-brand);

    --itf-text: #0A0D14;
    /* labels */
    --itf-text-sub: #525866;
    /* (valgfri) / helper */
    --itf-placeholder: #868C98;

    --itf-border: #E2E4E9;
    --itf-surface: #FFFFFF;
    --itf-surface-alt: #F6F8FA;
    /* filled/disabled field (Land) */

    --itf-radius-card: 12px;
    --itf-radius-input: 10px;
    --itf-radius-textarea: 12px;
    --itf-radius-check: 4px;

    --itf-shadow-xs: 0 1px 2px rgba(228, 229, 231, 0.24);

    --itf-font: 'Aktiv Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --itf-font-display: 'Domaine Display', Georgia, "Times New Roman", serif;

    --itf-gap-row: 20px;
    --itf-gap-col: 24px;
    --itf-field-h: 50px;
    --itf-card-pad: 24px;
    /* card inner padding — edge-to-edge dividers derive from this */
}

/* Baseline: force our font family on the customer (billing) card only, so no
   field/label/text falls back to Elementor's font. The right column keeps its
   own display headings. */
body.woocommerce-checkout .e-checkout__column-start,
body.woocommerce-checkout .e-checkout__column-start * {
    font-family: var(--itf-font) !important;
}

/* ============================================================
   2. Cards — ONE card around the customer details (.col2-set) and
   one around the order review. The Elementor column carries no box.
   ============================================================ */
body.woocommerce-checkout .e-checkout__container {
    gap: 24px;
    align-items: start;
    /* equal-width columns (50/50) */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

/* the single customer card + the order-review card */
body.woocommerce-checkout .e-checkout__column-start,
body.woocommerce-checkout .e-checkout__column-inner {
    background: var(--itf-surface) !important;
    border: 1px solid var(--itf-border) !important;
    border-radius: var(--itf-radius-card) !important;
    box-shadow: var(--itf-shadow-xs) !important;
    padding: var(--itf-card-pad) !important; /* Figma frame padding */
}

/* everything inside the customer card is un-boxed (no nested borders,
   no separate login box) so it reads as one card like the design */
body.woocommerce-checkout .col2-set,
body.woocommerce-checkout .e-woocommerce-login-section,
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-account-fields,
body.woocommerce-checkout .e-checkout__order_review,
body.woocommerce-checkout .e-checkout__order_review-2,
body.woocommerce-checkout .e-coupon-box,
body.woocommerce-checkout .woocommerce-checkout-payment {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
}

/* WooCommerce splits .col2-set into .col-1 (billing + account) and
   .col-2 (ship-to-different + order notes) as side-by-side floats — the
   float lets .col-2 escape the card. Stack them full-width instead. */
body.woocommerce-checkout .col2-set {
    display: block;
}

body.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout .col2-set .col-2 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important; /* .col-1 carries a faint cyan tint (rgba(238,255,255,.41)) — clear it */
    border: 0 !important;
}

/* ============================================================
   3. Title + subtitle (Faktureringsdetaljer)
   ============================================================ */
body.woocommerce-checkout .woocommerce-billing-fields>h3 {
    font-family: var(--itf-font) !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 32px !important;
    letter-spacing: -0.01em;
    color: var(--itf-brand);
    margin: 0 0 2px;
}

body.woocommerce-checkout .itf-billing-subtitle {
    font-family: var(--itf-font) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    letter-spacing: -0.011em;
    color: var(--itf-brand);
    margin: 0 0 24px;
}

/* A previous dev injected a bold subtitle via an h3::after pseudo-element.
   Hide it — we render our own .itf-billing-subtitle (matches the design). */
body.woocommerce-checkout .woocommerce-billing-fields h3::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   4. Billing field grid — 3-up first row, 2-up pairs, full-width rows
   6-col grid + per-field spans; `order` re-sequences country into row 1
   (DOM order has it last). Cleaner long-term: set field priorities in
   WP Admin -> WooCommerce -> Checkout Form so DOM order matches visual.
   ============================================================ */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--itf-gap-col);
    row-gap: var(--itf-gap-row);
}

body.woocommerce-checkout .form-row {
    /* !important beats Elementor/WooCommerce .form-row-first/-last (float+47% width)
       so each field fills its grid cell instead of collapsing to ~80px */
    float: none !important;
    width: auto !important;
    max-width: none !important;
    clear: none !important;
    margin: 0;
    padding: 0;
}

/* spans */
body.woocommerce-checkout #billing_postcode_field,
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #billing_country_field {
    grid-column: span 2;
}

body.woocommerce-checkout #billing_phone_field,
body.woocommerce-checkout #billing_email_field,
body.woocommerce-checkout #billing_first_name_field,
body.woocommerce-checkout #billing_last_name_field,
body.woocommerce-checkout #billing_company_field,
body.woocommerce-checkout #billing_cvr_field {
    grid-column: span 3;
}

body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #billing_address_2_field,
body.woocommerce-checkout #billing_note_field {
    grid-column: 1 / -1;
}

body.woocommerce-checkout #billing_state_field {
    display: none;
}

/* visual order (postcode, city, land, address, phone, email, first, last, company, cvr, note) */
body.woocommerce-checkout #billing_postcode_field {
    order: 1;
}

body.woocommerce-checkout #billing_city_field {
    order: 2;
}

body.woocommerce-checkout #billing_country_field {
    order: 3;
}

body.woocommerce-checkout #billing_address_1_field {
    order: 4;
}

body.woocommerce-checkout #billing_address_2_field {
    order: 5;
}

body.woocommerce-checkout #billing_phone_field {
    order: 6;
}

body.woocommerce-checkout #billing_email_field {
    order: 7;
}

body.woocommerce-checkout #billing_first_name_field {
    order: 8;
}

body.woocommerce-checkout #billing_last_name_field {
    order: 9;
}

body.woocommerce-checkout #billing_company_field {
    order: 10;
}

body.woocommerce-checkout #billing_cvr_field {
    order: 11;
}

body.woocommerce-checkout #billing_note_field {
    order: 12;
}

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

    body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   4b. Shipping address block (ship-to-different) — mirror the billing grid
   ============================================================ */
/* strip the nested tinted box WooCommerce/Elementor wraps shipping in */
body.woocommerce-checkout .shipping_address {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* same 6-col grid as billing */
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--itf-gap-col);
    row-gap: var(--itf-gap-row);
}
/* spans */
body.woocommerce-checkout #shipping_postcode_field,
body.woocommerce-checkout #shipping_city_field,
body.woocommerce-checkout #shipping_country_field { grid-column: span 2; }

body.woocommerce-checkout #shipping_first_name_field,
body.woocommerce-checkout #shipping_last_name_field,
body.woocommerce-checkout #shipping_phone_field,
body.woocommerce-checkout #shipping_company_field { grid-column: span 3; }

body.woocommerce-checkout #shipping_address_1_field,
body.woocommerce-checkout #shipping_address_2_field { grid-column: 1 / -1; }

body.woocommerce-checkout #shipping_state_field { display: none; }

/* visual order: postcode, city, land, address, first, last, phone, company */
body.woocommerce-checkout #shipping_postcode_field   { order: 1; }
body.woocommerce-checkout #shipping_city_field       { order: 2; }
body.woocommerce-checkout #shipping_country_field    { order: 3; }
body.woocommerce-checkout #shipping_address_1_field  { order: 4; }
body.woocommerce-checkout #shipping_address_2_field  { order: 5; }
body.woocommerce-checkout #shipping_first_name_field { order: 6; }
body.woocommerce-checkout #shipping_last_name_field  { order: 7; }
body.woocommerce-checkout #shipping_phone_field      { order: 8; }
body.woocommerce-checkout #shipping_company_field    { order: 9; }

/* Land greyed (Denmark-only), like billing */
body.woocommerce-checkout #shipping_country_field .input-text,
body.woocommerce-checkout #shipping_country_field select,
body.woocommerce-checkout #shipping_country_field .select2-selection--single {
    background: var(--itf-surface-alt) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--itf-text-sub) !important;
}

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

/* ============================================================
   5. Labels + required/optional markers
   ============================================================ */
body.woocommerce-checkout .form-row>label {
    display: block;
    font-family: var(--itf-font) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: -0.006em;
    color: var(--itf-text) !important;
    /* beat Elementor's grey #69727D label color */
    margin: 0 0 6px;
}

body.woocommerce-checkout .form-row label .required {
    color: var(--itf-primary);
    text-decoration: none;
    border: 0;
    margin-left: 2px;
}

body.woocommerce-checkout .form-row label .optional {
    color: var(--itf-text-sub);
    font-weight: 400 !important;
}

/* ============================================================
   6. Inputs / selects / textarea
   ============================================================ */
body.woocommerce-checkout .woocommerce-input-wrapper {
    display: block;
    width: 100%;
}

body.woocommerce-checkout .input-text,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout select,
body.woocommerce-checkout #itf_delivery_date_field .input-text,
body.woocommerce-checkout #itf_delivery_time_field .input-text,
body.woocommerce-checkout #payment .input-text {
    width: 100% !important;
    min-height: var(--itf-field-h);
    box-sizing: border-box !important;
    background: var(--itf-surface) !important;
    border: 1px solid var(--itf-border) !important;
    border-radius: var(--itf-radius-input) !important;
    box-shadow: var(--itf-shadow-xs);
    padding: 12px 14px !important;
    font-family: var(--itf-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    letter-spacing: -0.006em;
    color: var(--itf-text) !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}

body.woocommerce-checkout .input-text::placeholder,
body.woocommerce-checkout textarea::placeholder {
    color: var(--itf-placeholder);
    font-size: 14px !important;
    opacity: 1;
}

body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
    outline: none;
    border-color: var(--itf-primary) !important;
    box-shadow: 0 0 0 3px rgba(55, 93, 251, 0.16);
}

/* "Land" (country) — fixed to Denmark, rendered as a filled/disabled field */
body.woocommerce-checkout #billing_country_field .input-text,
body.woocommerce-checkout #billing_country_field select,
body.woocommerce-checkout #billing_country_field .select2-selection--single {
    background: var(--itf-surface-alt) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--itf-text-sub) !important;
}

/* Textarea (Faktura Bemærkninger / Ordrebemærkninger) */
body.woocommerce-checkout textarea.input-text {
    min-height: 120px;
    border-radius: var(--itf-radius-textarea) !important;
    padding: 14px !important;
    resize: vertical;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* select2 (country) shell */
body.woocommerce-checkout .select2-container .select2-selection--single {
    height: var(--itf-field-h);
    border: 1px solid var(--itf-border);
    border-radius: var(--itf-radius-input);
    background: var(--itf-surface);
    display: flex;
    align-items: center;
    padding: 0 8px;
}

body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--itf-text-sub);
    padding: 0;
}

/* ============================================================
   7. Checkboxes (Opret en konto? / ship-to-different-address)
   The ship-to heading is un-styled from a section title into a row.
   ============================================================ */
body.woocommerce-checkout #ship-to-different-address {
    font-family: var(--itf-font) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--itf-text);
    margin: 8px 0;
    padding: 0 !important; /* kill the 30px left indent so it aligns flush like Opret en konto? */
}

body.woocommerce-checkout .woocommerce-account-fields .create-account,
body.woocommerce-checkout .woocommerce-account-fields>.form-row {
    margin: 8px 0;
}

body.woocommerce-checkout .woocommerce-form__label-for-checkbox,
body.woocommerce-checkout #ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--itf-font) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--itf-text);
    cursor: pointer;
}

body.woocommerce-checkout input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-height: 0 !important;
    accent-color: var(--itf-primary);
    border: 1px solid var(--itf-border);
    border-radius: var(--itf-radius-check);
    margin: 0;
    flex: 0 0 auto;
}

/* Elementor renders these labels as blue UPPERCASE bold "secondary titles"
   on a child <span> — force them back to normal body text. */
body.woocommerce-checkout .woocommerce-account-fields label,
body.woocommerce-checkout .woocommerce-account-fields label span,
body.woocommerce-checkout .woocommerce-form__label-for-checkbox span,
body.woocommerce-checkout #ship-to-different-address,
body.woocommerce-checkout #ship-to-different-address label,
body.woocommerce-checkout #ship-to-different-address label span {
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    color: var(--itf-text) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-family: var(--itf-font) !important;
}

/* ============================================================
   8. Custom delivery block (#itfd_swap: branch / date / time)
   ============================================================ */
body.woocommerce-checkout #itfd_swap .woocommerce-additional-fields {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--itf-gap-row);
}

/* ============================================================
   9. Order-review table (Kurv)
   ============================================================ */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    border: 0;
    border-collapse: collapse;
    width: 100%;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td {
    border-bottom: 1px solid var(--itf-border);
    padding: 12px 0;
    font-family: var(--itf-font) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--itf-text);
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
    font-weight: 500 !important;
    font-size: 16px !important;
}

/* ============================================================
   10. Payment methods
   ============================================================ */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
    background: transparent;
    border: 0;
}

/* payment methods — radio rows consistent with the rest of the form:
   [ 20px radio ] [ label ]
                  [ description box ]                                     */
body.woocommerce-checkout #payment ul.wc_payment_methods {
    list-style: none;
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.woocommerce-checkout #payment li.wc_payment_method {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
}

/* single-gateway case (radio hidden by WC): no empty gutter */
body.woocommerce-checkout #payment li.wc_payment_method:only-child {
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
}

body.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"] {
    grid-column: 1;
    grid-row: 1;
    /* custom-drawn radio — accent-color lets the browser pick a muddy
       dark inner dot on green; draw it ourselves instead */
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--itf-border) !important;
    border-radius: 50% !important;
    background: var(--itf-surface) !important;
    display: inline-grid !important;
    place-content: center;
    cursor: pointer;
    box-shadow: none !important;
    transition: border-color .12s ease, background .12s ease;
}
/* single gateway: WC's checkout JS hides the radio with an inline
   display:none — our !important above would force it back and overlap
   the label, so honor the inline style */
body.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"][style*="display: none"] {
    display: none !important;
}

body.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform .1s ease;
}
body.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"]:hover {
    border-color: var(--itf-green) !important;
}
body.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"]:checked {
    background: var(--itf-green) !important;
    border-color: var(--itf-green) !important;
}
body.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"]:checked::before {
    transform: scale(1);
}
body.woocommerce-checkout #payment li.wc_payment_method > input[type="radio"]:focus-visible {
    outline: 2px solid rgba(61, 203, 128, 0.35);
    outline-offset: 2px;
}

body.woocommerce-checkout #payment li.wc_payment_method > label {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--itf-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: var(--itf-text) !important; /* dark labels, not Elementor's green */
    cursor: pointer;
}

body.woocommerce-checkout #payment li.wc_payment_method > label img {
    max-height: 22px;
    width: auto !important;
    min-height: 0 !important;
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.woocommerce-checkout #payment .payment_box {
    grid-column: 2;
    grid-row: 2;
    background: var(--itf-surface-alt);
    border-radius: var(--itf-radius-input);
    box-shadow: none;
    margin: 8px 0 0 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 18px !important;
    color: var(--itf-text-sub);
}

body.woocommerce-checkout #payment .payment_box::before {
    display: none;
}

/* ============================================================
   11. Place-order button
   ============================================================ */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .woocommerce-checkout .button.alt {
    display: block;
    width: 100%;
    background: var(--itf-cta);
    color: #fff;
    border: 0;
    border-radius: var(--itf-radius-input);
    padding: 15px 24px;
    font-family: var(--itf-font) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    letter-spacing: -0.006em;
    cursor: pointer;
    transition: filter .12s ease;
}

body.woocommerce-checkout #place_order:hover {
    filter: brightness(0.94);
}

/* ============================================================
   13. Right column — "Samlet beløb i kurv" card (Phase 1: heading,
   cart table, totals, coupon). Custom pill stepper + Levering/Hent-selv
   toggle + disabled date/time are follow-ups (need markup changes).
   ============================================================ */
/* card heading + edge-to-edge divider band */
body.woocommerce-checkout #order_review_heading {
    font-family: var(--itf-font) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 26px !important;
    color: var(--itf-brand) !important;
    margin: 0 calc(-1 * var(--itf-card-pad)) 20px !important;   /* divider spans the card */
    padding: 0 var(--itf-card-pad) 16px !important;
    border-bottom: 1px solid var(--itf-border);
}

/* cart table header — grey bar with Vare · Antal · Subtotal.
   The native table has only 2 columns; "Antal"/"Subtotal" labels are
   rebuilt as pseudo-elements aligned to the row grid below. */
/* grid-rows inside a table shrink-fit — take thead/tbody out of table
   layout so the rows stretch to the card width like tfoot does */
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody {
    display: block;
    width: 100%;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 248px; /* 100 pill + 12 gap + 100 subtotal + 12 gap + 24 remove */
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--itf-surface-alt);
    border-radius: 8px;
    padding: 10px 0 !important; /* rows carry no horizontal padding; bar text inset via th */
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--itf-text-sub) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    text-align: left;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-name {
    padding-left: 12px !important; /* "Vare" inset inside the grey bar */
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total {
    font-size: 0 !important; /* hide native "Subtotal"; re-print both labels below */
    display: flex;
    align-items: center;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total::before {
    content: "Antal";
    width: 100px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--itf-text-sub);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total::after {
    content: "Subtotal";
    width: 100px;
    margin-left: 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--itf-text-sub);
}
/* --- cart line-item row: thumb · name · [− qty +] · subtotal · × ---
   Each row becomes a 5-col grid; the 2 real <td>s are flattened with
   display:contents so their children align to the shared columns.
   font-size:0 on the row hides the stray &nbsp; text node the WC
   template prints between name and quantity. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 100px 100px 24px;
    column-gap: 12px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 0 !important;
    border-bottom: 0; /* design: no dividers between item rows */
    font-size: 0;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item td {
    display: contents;
}
body.woocommerce-checkout .itf-cart-thumb { grid-column: 1; grid-row: 1; line-height: 0; }
/* bundle composition / variation data sits under the name */
body.woocommerce-checkout tr.cart_item dl.variation,
body.woocommerce-checkout tr.cart_item .variation {
    grid-column: 2;
    grid-row: 2;
    margin: 4px 0 0;
    font-size: 12px !important;
    color: var(--itf-text-sub);
}
body.woocommerce-checkout .itf-cart-thumb img {
    width: 44px !important;
    height: 44px !important;
    min-height: 0 !important;
    border-radius: 8px;
    object-fit: cover;
    background: var(--itf-surface-alt);
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}
body.woocommerce-checkout .itf-cart-name {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--itf-text) !important;
}

/* pill stepper (Antal) */
body.woocommerce-checkout .itf-qty {
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--itf-border);
    border-radius: 8px;
    overflow: hidden;
    height: 34px; /* compact pill per design */
    background: var(--itf-surface);
}
body.woocommerce-checkout .itf-qty--fixed { padding: 0 14px; font-size: 14px !important; }
body.woocommerce-checkout .itf-qty-btn {
    width: 28px;
    height: 32px;
    border: 0 !important;
    background: transparent !important;
    color: var(--itf-text) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer;
    padding: 0 !important;
    box-shadow: none !important;
}
body.woocommerce-checkout .itf-qty-btn:hover { background: var(--itf-surface-alt) !important; }
body.woocommerce-checkout .itf-qty input.qty {
    width: 30px !important;
    min-height: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 0 !important; /* design: no internal separators in the pill */
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    text-align: center;
    padding: 0 !important;
    -moz-appearance: textfield;
    appearance: textfield;
}
body.woocommerce-checkout .itf-qty input.qty::-webkit-outer-spin-button,
body.woocommerce-checkout .itf-qty input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* subtotal + remove (×) */
body.woocommerce-checkout .itf-cart-subtotal {
    grid-column: 4;
    grid-row: 1;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--itf-text) !important;
    white-space: nowrap;
}
body.woocommerce-checkout .itf-remove {
    grid-column: 5;
    grid-row: 1;
    justify-self: center;
    color: var(--itf-text-sub);
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer;
}
body.woocommerce-checkout .itf-remove:hover { color: #e5484d; }

/* totals */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
    font-weight: 400 !important;
    color: var(--itf-text-sub) !important;
    text-align: left;
    border: 0 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    text-align: right;
    border: 0 !important;
    color: var(--itf-text) !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--itf-text) !important;
}

/* flatten the table entirely — a real <table> shrink-fits our grid rows,
   so header/body/footer become stacked blocks that span the card */
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
    display: block;
    width: 100%;
}
/* tfoot as flex column so rows can be reordered to the design:
   shipping toggle → delivery date/time → subtotal → … → total */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot {
    display: flex;
    flex-direction: column;
    width: 100%;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr { order: 4; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals { order: 1; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.itf-delivery-row { order: 2; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal { order: 3; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total { order: 10; }
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0 !important; /* tight totals rows, aligned to card padding */
    border-bottom: 0; /* design: dividers only after delivery block and before Total */
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
    display: block;
    border: 0 !important;
    padding: 0 !important;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total {
    border-top: 1px solid var(--itf-border);
    border-bottom: 0;
    width: calc(100% + 2 * var(--itf-card-pad)) !important; /* divider spans the card edge-to-edge */
    margin: 4px calc(-1 * var(--itf-card-pad)) 0 !important;
    padding: 16px var(--itf-card-pad) 8px !important;
}

/* ---- shipping row = "Levering & afhentning" label + TOGGLE BUTTONS ----
   (#order_review prefix also beats the legacy styles.css width:143% rule) */
body.woocommerce-checkout #order_review tr.shipping,
body.woocommerce-checkout #order_review .shipping {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    box-sizing: border-box;
    align-items: stretch;
    gap: 8px;
    padding: 16px 0 4px !important; /* align with the other rows (legacy rule zeroes it) */
    border-bottom: 0;
}
body.woocommerce-checkout #order_review .shipping > th {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--itf-text) !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left;
}
body.woocommerce-checkout #order_review .shipping > td {
    display: block !important;
    width: 100% !important;
    /* something sets a fixed width:70px on this td with !important —
       min-width beats width in layout resolution, so force it this way */
    min-width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    text-align: left !important;
    padding: 0 !important;
    border: 0 !important;
}
/* the methods list becomes a 2-up button group */
body.woocommerce-checkout #order_review ul#shipping_method {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100% !important;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.woocommerce-checkout #order_review ul#shipping_method li {
    display: block !important;
    width: auto !important;
    min-width: 0;
    margin: 0;
    padding: 0;
}
body.woocommerce-checkout #order_review ul#shipping_method input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
body.woocommerce-checkout #order_review ul#shipping_method label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--itf-border);
    border-radius: var(--itf-radius-input);
    background: var(--itf-surface);
    color: var(--itf-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    text-align: center;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
body.woocommerce-checkout #order_review ul#shipping_method input[type="radio"]:checked + label,
body.woocommerce-checkout #order_review ul#shipping_method li:only-child label {
    background: var(--itf-green);
    border-color: var(--itf-green);
    color: #fff !important;
}
body.woocommerce-checkout #order_review ul#shipping_method label .amount {
    color: inherit !important;
}

/* ---- delivery date/time row inside the table ---- */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.itf-delivery-row {
    display: block;
    width: calc(100% + 2 * var(--itf-card-pad)) !important; /* divider spans the card edge-to-edge */
    margin: 0 calc(-1 * var(--itf-card-pad)) !important;
    padding: 4px var(--itf-card-pad) 16px !important;
    border-bottom: 1px solid var(--itf-border);
}
body.woocommerce-checkout tr.itf-delivery-row > td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left !important; /* beat the tfoot amount right-alignment */
    padding: 0 !important;
    border: 0 !important;
}
body.woocommerce-checkout tr.itf-delivery-row .form-row > label,
body.woocommerce-checkout tr.itf-delivery-row .itf-delivery-hint {
    text-align: left !important;
}
body.woocommerce-checkout tr.itf-delivery-row .woocommerce-additional-fields {
    margin: 0 !important;
}
body.woocommerce-checkout .itf-delivery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
}
/* design: filled/grey date & time fields with icons (ID selectors to beat
   the §6 input rule that also targets these fields by ID) */
body.woocommerce-checkout #itf_delivery_date_field .input-text,
body.woocommerce-checkout #itf_delivery_time_field .input-text {
    background: var(--itf-surface-alt) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-left: 42px !important; /* room for the icon */
    text-overflow: ellipsis; /* long placeholders clip cleanly in the 2-up cells */
}
/* the time field also carries a chevron on the right */
body.woocommerce-checkout #itf_delivery_time_field .input-text {
    padding-right: 38px !important;
}
body.woocommerce-checkout #itf_delivery_date_field .woocommerce-input-wrapper,
body.woocommerce-checkout #itf_delivery_time_field .woocommerce-input-wrapper {
    position: relative;
}
body.woocommerce-checkout #itf_delivery_date_field .woocommerce-input-wrapper::before,
body.woocommerce-checkout #itf_delivery_time_field .woocommerce-input-wrapper::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
/* calendar icon */
body.woocommerce-checkout #itf_delivery_date_field .woocommerce-input-wrapper::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23868C98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
/* clock icon */
body.woocommerce-checkout #itf_delivery_time_field .woocommerce-input-wrapper::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23868C98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
/* chevron on the time (select-like) field */
body.woocommerce-checkout #itf_delivery_time_field .woocommerce-input-wrapper::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23868C98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
body.woocommerce-checkout .itf-delivery-hint {
    margin: 8px 0 0;
    font-size: 13px !important;
    line-height: 18px !important;
    color: var(--itf-text-sub) !important;
}
body.woocommerce-checkout #itfd_swap .hide {
    display: none;
}

/* ---- timeslot dropdown (xdsoft datetimepicker) ----
   The library fixes each option at 30px height; our long Danish labels
   ("08-17: Heldagslevering") wrap in the narrowed 2-up field and overlap.
   checkout.js also inline-sizes the panel to half the input width —
   !important here overrides both the CDN CSS and that inline width. */
body.woocommerce-checkout .xdsoft_datetimepicker {
    min-width: 250px;
    border: 1px solid var(--itf-border) !important;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(10, 13, 20, 0.10) !important;
    padding: 8px;
}
body.woocommerce-checkout .xdsoft_datetimepicker .xdsoft_timepicker {
    width: 100% !important;
    margin: 0 !important;
}
body.woocommerce-checkout .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: auto !important;
    max-height: 220px;
    border: 0 !important;
}
body.woocommerce-checkout .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
    height: auto !important;
    min-height: 36px;
    line-height: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 8px 10px !important;
    font-family: var(--itf-font) !important;
    font-size: 13px !important;
    color: var(--itf-text);
    border-radius: 6px;
    background: transparent;
}
body.woocommerce-checkout .xdsoft_datetimepicker .xdsoft_time_box > div > div.xdsoft_current {
    background: var(--itf-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* card content order: order review → payment/terms/button → coupon last */
body.woocommerce-checkout .e-checkout__column-inner {
    display: flex;
    flex-direction: column;
}
body.woocommerce-checkout .e-checkout__column-inner .e-checkout__order_review { order: 1; }
body.woocommerce-checkout .e-checkout__column-inner .e-checkout__order_review-2 { order: 2; }
body.woocommerce-checkout .e-checkout__column-inner .e-coupon-box { order: 3; }

/* ---- totals block (design): Subtotal / Levering / Moms plain rows,
   Total big with a top divider and NO inline moms note ---- */
body.woocommerce-checkout .order-total .includes_tax { display: none !important; }
body.woocommerce-checkout tr.itf-total-levering th,
body.woocommerce-checkout tr.itf-total-moms th {
    font-weight: 400 !important;
    color: var(--itf-text-sub) !important;
}
body.woocommerce-checkout tr.itf-total-levering td,
body.woocommerce-checkout tr.itf-total-moms td {
    color: var(--itf-text) !important;
    font-weight: 500 !important;
}

/* ---- place-order block (design order): terms checkbox → Godkend ordre
   → privacy text. WC nests privacy+terms in one wrapper — flatten it. */
body.woocommerce-checkout #payment .place-order {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
    display: contents;
}
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper > p.form-row { order: 1; margin: 0; }
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions { order: 1; }
body.woocommerce-checkout #payment #place_order { order: 2; margin: 0; }
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text { order: 3; }
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
    font-size: 13px !important;
    line-height: 18px !important;
    color: var(--itf-text-sub) !important;
    margin: 0;
}
/* terms checkbox row — sentence case, green check */
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-checkbox-text,
body.woocommerce-checkout #payment .wc-terms-and-conditions label,
body.woocommerce-checkout #payment .wc-terms-and-conditions label span {
    text-transform: none !important;
    font-family: var(--itf-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 20px !important;
    color: var(--itf-text) !important;
}
body.woocommerce-checkout #payment .wc-terms-and-conditions input[type="checkbox"] {
    accent-color: var(--itf-green);
}

/* coupon (Rabatkode) — ALWAYS-visible label + input + green Aktiver, at the
   bottom of the card behind a top divider (design) */
body.woocommerce-checkout .e-coupon-box {
    border-top: 1px solid var(--itf-border) !important;
    margin: 8px calc(-1 * var(--itf-card-pad)) 0 !important;  /* divider spans the card edge-to-edge */
    padding: 20px var(--itf-card-pad) 0 !important;
}
/* hide the "Har du en rabatkode? Klik her..." toggle line */
body.woocommerce-checkout .e-woocommerce-coupon-nudge { display: none !important; }
/* Elementor collapses the form behind the toggle (inline display:none) — force it open */
body.woocommerce-checkout .e-coupon-anchor { display: block !important; }
body.woocommerce-checkout .e-coupon-anchor label {
    display: block;
    font-family: var(--itf-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: var(--itf-text) !important;
    margin: 0 0 6px;
}
body.woocommerce-checkout .e-coupon-box .coupon-container-grid {
    display: flex !important;
    gap: 8px;
    align-items: stretch;
}
body.woocommerce-checkout .e-coupon-box .coupon-col-1 { flex: 1 1 auto; }
body.woocommerce-checkout .e-coupon-box .coupon-col-2 { flex: 0 0 auto; }
body.woocommerce-checkout .e-coupon-box .coupon-col-2 button {
    background: var(--itf-green) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--itf-radius-input) !important;
    padding: 0 24px !important;
    height: var(--itf-field-h);
    font-family: var(--itf-font) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    cursor: pointer;
}

#customer_details>div,
#customer_details .woocommerce-shipping-fields .shipping_address {
    box-shadow: none !important;
}

/* ============================================================
   14. Responsive — tablet & mobile
   The desktop rules above carry !important, so each breakpoint
   re-declares exactly what changes (Elementor's own stacking is
   beaten by our container rule and can't help us here).
   ============================================================ */
/* Tablet & below: stack the two cards. Below ~1025px two 50% columns
   leave the Kurv row grid (44+100+100+24 fixed px) no room for the
   product name. */
@media (max-width: 1024px) {
    body.woocommerce-checkout .e-checkout__container {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 16px;
    }
}

/* Phones */
@media (max-width: 640px) {
    body.woocommerce-checkout {
        --itf-card-pad: 16px;
        --itf-gap-col: 16px;
        --itf-gap-row: 16px;
    }

    /* the Elementor section leaves ~2px gutters on mobile — give the
       cards breathing room from the screen edge */
    body.woocommerce-checkout .e-checkout__container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* grey Vare/Antal/Subtotal bar is sized for the desktop columns
       (fixed 248px label track) — drop it on phones */
    body.woocommerce-checkout .woocommerce-checkout-review-order-table thead {
        display: none;
    }

    /* cart line becomes two lines:
       [thumb] [name..................] [×]
       [     ] [− qty +]      [subtotal]
       NO row-gap: the WC template's &nbsp; text nodes become anonymous
       grid items in implicit rows, and every phantom row would add a
       gap — vertical rhythm comes from margins instead */
    body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item {
        grid-template-columns: 44px minmax(0, 1fr) 24px;
    }
    body.woocommerce-checkout .itf-cart-thumb {
        grid-row: 1 / span 2;
        align-self: start;
    }
    body.woocommerce-checkout .itf-cart-name {
        grid-column: 2;
        grid-row: 1;
    }
    body.woocommerce-checkout .itf-remove {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }
    body.woocommerce-checkout .itf-qty {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        margin-top: 10px;
    }
    body.woocommerce-checkout .itf-cart-subtotal {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-self: end;
        align-self: center;
        margin-top: 10px;
    }
    body.woocommerce-checkout tr.cart_item dl.variation,
    body.woocommerce-checkout tr.cart_item .variation {
        grid-column: 2 / -1;
        grid-row: 3;
        margin-top: 8px;
    }

    /* "Levering (195,00 kr.)" doesn't fit a half-width button — stack the
       two shipping toggles full-width */
    body.woocommerce-checkout #order_review ul#shipping_method {
        grid-template-columns: 1fr;
    }

    /* the datetimepicker panel is wider than the narrowed 2-up fields —
       keep it inside the viewport */
    body.woocommerce-checkout .xdsoft_datetimepicker {
        max-width: calc(100vw - 32px);
    }
}

/* ============================================================
   12. Web-font template (uncomment once licensed files are added)
   ============================================================ */
/*
@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/AktivGrotesk-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/AktivGrotesk-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Domaine Display';
    src: url('../fonts/DomaineDisplay-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
*/