/* ============================================================
   GCI custom styling for WooCommerce process pages.
   Sections:
     1. Common palette / typography
     2. Cart  (panier)        — body.woocommerce-cart
     3. Checkout (commander)  — body.woocommerce-checkout
     4. Thank-you (confirmation) — body.woocommerce-order-received

   Design source : /home/ts/gci/Page {2,3,4}.html (v5 mockup).
   ============================================================ */

:root {
    --gci-primary: #263B56;
    --gci-accent:  #F9951D;
    --gci-bg:      #001530;
    --gci-border:  rgba(255,255,255,.4);
    --gci-muted:   rgba(255,255,255,.72);
    --gci-r:       10px;
    --gci-rl:      16px;
    --gci-s1:      0 2px 16px rgba(0,21,48,.35);
    --gci-s2:      0 10px 40px rgba(0,21,48,.5);
    --gci-t:       all .2s cubic-bezier(.4,0,.2,1);
}

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-order-received {
    background: var(--gci-bg);
    color: #fff;
}

/* =========================================================
   1. CART  (woocommerce-cart)
   --------------------------------------------------------- */
body.woocommerce-cart .wp-block-woocommerce-cart {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 28px 60px;
}

body.woocommerce-cart .wc-block-cart {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}

/* Left panel — items list. min-width:0 + flex:1 lets the column actually
   grow to fill the available space; without it WC blocks default to a
   shrink-to-content sizing and the items column ends up ~370px wide. */
body.woocommerce-cart .wc-block-cart__main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    background: #37567D;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--gci-rl);
    box-shadow: var(--gci-s1);
    overflow: hidden;
    padding: 0;
}
body.woocommerce-cart .wc-block-cart__main > *,
body.woocommerce-cart .wc-block-cart__main .wc-block-cart-items,
body.woocommerce-cart .wc-block-cart__main table {
    width: 100% !important;
    max-width: 100% !important;
}

/* Strip the native table layout — tables auto-size to content, which keeps
   the row at ~266px even when its parent is 572px wide. We force the table
   onto block flow so we can use flex/grid on the rows themselves. */
body.woocommerce-cart table.wc-block-cart-items {
    border: none !important;
    width: 100% !important;
    display: block !important;
    table-layout: auto;
}
body.woocommerce-cart table.wc-block-cart-items > thead,
body.woocommerce-cart table.wc-block-cart-items > tbody {
    display: block !important;
    width: 100% !important;
}

body.woocommerce-cart .wc-block-cart-items__header {
    display: flex !important;
    background: rgba(255,255,255,.1);
    border-bottom: 1px solid var(--gci-border);
    padding: 14px 28px !important;
    width: 100% !important;
}
body.woocommerce-cart .wc-block-cart-items__header th,
body.woocommerce-cart .wc-block-cart-items__header-product,
body.woocommerce-cart .wc-block-cart-items__header-total {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gci-muted) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
body.woocommerce-cart .wc-block-cart-items__header-product { flex: 1 1 0; }
body.woocommerce-cart .wc-block-cart-items__header-total   { flex: 0 0 auto; }

body.woocommerce-cart .wc-block-cart-items__row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 22px 28px !important;
    border-bottom: 1px solid var(--gci-border) !important;
    width: 100% !important;
    transition: background .15s;
}
body.woocommerce-cart .wc-block-cart-items__row > td,
body.woocommerce-cart .wc-block-cart-items__row > th {
    display: block;
    border: none !important;
    background: transparent !important;
}
body.woocommerce-cart .wc-block-cart-items__row:last-child { border-bottom: none !important; }
body.woocommerce-cart .wc-block-cart-items__row:hover { background: rgba(255,255,255,.05); }

/* Product image — square 64x64 with rounded corners. */
body.woocommerce-cart .wc-block-cart-item__image {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
    padding: 0 !important;
}
body.woocommerce-cart .wc-block-cart-item__image img,
body.woocommerce-cart .wc-block-cart-item__image a {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    object-fit: cover;
    background: var(--gci-primary);
}

/* Product info column — fills the available space between icon and price. */
body.woocommerce-cart .wc-block-cart-item__product {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
}
body.woocommerce-cart .wc-block-components-product-name,
body.woocommerce-cart .wc-block-cart-item__product-name {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 5px;
    text-decoration: none;
}
body.woocommerce-cart .wc-block-components-product-details,
body.woocommerce-cart .wc-block-components-product-metadata,
body.woocommerce-cart .wc-block-cart-item__product-description {
    font-size: 12px !important;
    color: var(--gci-muted) !important;
    line-height: 1.45;
    margin-bottom: 8px;
}
/* Cart line meta (Périodicité, Taille, Annuel HT) is injected by the
   bridge JS as a `.gci-meta-injected` div. Render each child as a pill. */
body.woocommerce-cart .gci-meta-injected {
    display: flex !important;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px !important;
    color: var(--gci-muted) !important;
    font-size: 10.5px !important;
}
body.woocommerce-cart .gci-meta-injected > div,
body.woocommerce-cart .gci-meta-injected > span {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--gci-muted);
    background: rgba(255,255,255,.1);
    border-radius: 100px;
    padding: 2px 10px;
    line-height: 1.6;
}
/* Hide the unit-price line that WC injects under the product name — we
   only want the line total, displayed in the right-hand column. */
body.woocommerce-cart .wc-block-cart-item__prices {
    display: none !important;
}

/* Quantity stepper */
body.woocommerce-cart .wc-block-components-quantity-selector {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    border: none !important;
    margin-top: 10px;
    background: transparent;
}
body.woocommerce-cart .wc-block-components-quantity-selector__button {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 1.5px solid #fff !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    transition: var(--gci-t);
}
body.woocommerce-cart .wc-block-components-quantity-selector__button:hover {
    border-color: var(--gci-accent) !important;
    color: var(--gci-accent) !important;
}
body.woocommerce-cart .wc-block-components-quantity-selector__input {
    font-size: 13px !important;
    font-weight: 700 !important;
    min-width: 20px !important;
    color: #fff !important;
    background: transparent;
    border: none !important;
    text-align: center;
}

/* Price + delete column — keeps content width, no flex grow. */
body.woocommerce-cart .wc-block-cart-item__total {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px;
    min-width: 100px;
}
body.woocommerce-cart .wc-block-components-product-price,
body.woocommerce-cart .wc-block-cart-item__price {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #fff !important;
    white-space: nowrap;
}
body.woocommerce-cart .wc-block-cart-item__price-period,
body.woocommerce-cart .wc-block-components-product-price__regular + small {
    font-size: 10.5px;
    color: var(--gci-muted);
    font-weight: 500;
}
/* Native WC delete button — relocated by JS into .wc-block-cart-item__total
   (under the price). Keep the native × SVG, just restyle the wrapper. */
body.woocommerce-cart .wc-block-cart-item__remove-link {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--gci-muted) !important;
    align-self: flex-end !important;
    transition: var(--gci-t);
    border: none;
    cursor: pointer;
    padding: 0;
}
body.woocommerce-cart .wc-block-cart-item__remove-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
    background: rgba(224,84,84,.2) !important;
    color: #e05454 !important;
}
/* When JS lifts the delete out of __quantity, the now-empty wrapper would
   leave a gap — collapse it. */
body.woocommerce-cart .wc-block-cart-item__quantity:empty {
    display: none !important;
}
/* Quantity selector (USE07 etc.) is moved by JS under the meta tags. */
body.woocommerce-cart .wc-block-cart-item__product .wc-block-components-quantity-selector {
    margin-top: 10px !important;
}

/* gci-cart-extra is the Récapitulatif block injected by the plugin inside
   the dark WC sidebar. The bridge ships an inline <style> block with a
   light theme — we override every rule here. Specificity wins through the
   body.woocommerce-cart prefix + !important. */
.gci-cart-extra {
    background: transparent !important;
    color: #fff !important;
    box-shadow: none !important;
    border: none !important;
    padding: 8px 4px !important;
    margin: 16px 0 0 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}
/* Master title — "Récapitulatif" (top of sidebar). */
.gci-cart-extra-recap-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.42) !important;
    margin: 0 0 22px !important;
    border: none !important;
    padding: 0 6px !important;
    line-height: 1.4 !important;
}
/* Section wrappers (Premier paiement / Paiements suivants / Projection). */
.gci-cart-extra-section {
    margin: 0 0 18px !important;
    padding: 0 6px !important;
}
.gci-cart-extra-section:last-child {
    margin-bottom: 0 !important;
}
/* Projection sub-card sits centered with breathing room left/right so the
   tinted box doesn't bleed into the dark sidebar's edge. */
.gci-cart-extra-projection {
    background: rgba(255,255,255,.06) !important;
    border-radius: var(--gci-r) !important;
    padding: 16px 18px !important;
    margin: 12px 0 0 !important;
}
/* Sub-section title — "Premier paiement", "Paiements suivants", … */
.gci-cart-extra-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.55) !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}
.gci-cart-extra-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 12.5px !important;
    padding: 4px 0 !important;
    border: none !important;
    color: #fff !important;
    background: transparent !important;
}
.gci-cart-extra-row > :first-child {
    color: rgba(255,255,255,.6) !important;
    font-weight: 500 !important;
}
.gci-cart-extra-row > :last-child {
    color: #fff !important;
    font-weight: 600 !important;
}
.gci-cart-extra-row.total {
    font-size: 14px !important;
    font-weight: 800 !important;
    padding: 10px 0 6px !important;
    margin-top: 4px !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
}
.gci-cart-extra-row.total > :first-child {
    color: rgba(255,255,255,.85) !important;
    font-weight: 700 !important;
}
.gci-cart-extra-row.total > :last-child {
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}
/* "Projection annuelle" section — light tint sub-card inside the dark
   sidebar (mockup Page 2 — .sum-projection). */
.gci-cart-extra-projection {
    background: rgba(255,255,255,.05) !important;
    border-radius: var(--gci-r) !important;
    padding: 14px 16px !important;
    margin: 8px 0 !important;
}
.gci-cart-extra-projection .gci-cart-extra-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,.42) !important;
    margin-bottom: 10px !important;
}
/* Cadence badge ("Mensuel" / "Trimestriel") next to "Paiements suivants". */
.gci-cart-extra-cadence {
    background: rgba(249,149,29,.18) !important;
    border: 1px solid rgba(249,149,29,.3) !important;
    color: var(--gci-accent) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .8px;
    padding: 2px 9px !important;
    border-radius: 100px !important;
}
/* Hide the duplicate native WC totals block; gci-cart-extra renders the same
   paid-now amount plus the next-payment and annual-projection breakdown. */
body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-totals-block,
body.woocommerce-cart .wc-block-components-totals-wrapper,
body.woocommerce-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper {
    display: none !important;
}
/* Submit container that wraps the "Procéder au paiement" button — keep
   transparent so the dark sidebar shows through behind it. */
body.woocommerce-cart .wc-block-cart__submit-container,
body.woocommerce-cart .wc-block-cart__submit {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 18px !important;
}
/* CTA note below the "Valider la commande" button — same copy as the
   configurator's `summary_note` ("3 sièges inclus par licence · TVA non
   incluse"). Inserted by cart_totals_js. */
body.woocommerce-cart #gci-cta-note,
body.woocommerce-cart .gci-cta-note {
    text-align: center !important;
    font-size: 10.5px !important;
    color: rgba(255,255,255,.32) !important;
    margin: 12px 0 0 !important;
    line-height: 1.55 !important;
}

/* Right panel — summary (dark, fixed-width sidebar) */
body.woocommerce-cart .wc-block-cart__sidebar,
body.woocommerce-cart .wp-block-woocommerce-cart-totals-block {
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    background: var(--gci-primary);
    border-radius: var(--gci-rl);
    padding: 28px 24px;
    color: #fff;
    position: sticky;
    top: 20px;
    box-shadow: var(--gci-s2);
    box-sizing: border-box;
}
body.woocommerce-cart .wc-block-cart__sidebar > *,
body.woocommerce-cart .wp-block-woocommerce-cart-totals-block > * {
    width: 100% !important;
    max-width: 100% !important;
}
body.woocommerce-cart .wc-block-cart__totals-title,
body.woocommerce-cart .wc-block-cart__sidebar h2 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.38) !important;
    margin-bottom: 22px;
    border: none;
}
body.woocommerce-cart .wc-block-components-totals-item {
    display: flex !important;
    justify-content: space-between;
    font-size: 12.5px !important;
    padding: 4px 0 !important;
    border: none;
    color: #fff !important;
}
body.woocommerce-cart .wc-block-components-totals-item__label {
    color: rgba(255,255,255,.6) !important;
    font-weight: 500;
}
body.woocommerce-cart .wc-block-components-totals-item__value {
    color: #fff !important;
    font-weight: 600 !important;
}
body.woocommerce-cart .wc-block-components-totals-footer-item,
body.woocommerce-cart .wc-block-components-totals-item--bigger {
    font-size: 14px !important;
    font-weight: 800 !important;
    padding: 10px 0 6px !important;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.1) !important;
}
body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: 17px !important;
}

/* CTA — Procéder au paiement */
body.woocommerce-cart .wc-block-cart__submit-button,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a,
body.woocommerce-cart .wc-block-cart__submit-container a {
    width: 100% !important;
    padding: 15px !important;
    background: var(--gci-accent) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
    text-transform: uppercase !important;
    border-radius: var(--gci-r) !important;
    transition: var(--gci-t);
    margin-top: 18px;
    border: none;
    text-align: center;
    display: block;
}
body.woocommerce-cart .wc-block-cart__submit-button:hover,
body.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a:hover {
    background: #37567D !important;
    box-shadow: 0 6px 22px rgba(0,21,48,.4);
    transform: translateY(-1px);
}

/* Page header (Mon panier + back link) */
body.woocommerce-cart .gci-cart-header {
    padding: 12px 0 32px;
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 28px;
    padding-right: 28px;
}
body.woocommerce-cart .gci-cart-header h1 {
    font-size: 34px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.5px;
    margin: 0;
}
body.woocommerce-cart .gci-cart-header .gci-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gci-accent);
    margin-top: 10px;
}
body.woocommerce-cart .gci-cart-header .gci-back-link:hover { opacity: .75; }

/* Existing back-to-configurator link emitted by GCIBridge::cart_back_to_configurator()
   — make it more visible (accent color, arrow, spacing) regardless of where
   the theme injects it. */
body.woocommerce-cart #gci-back-configurator a,
body.woocommerce-cart .wp-block-woocommerce-cart a[href*="/nos-tarifs"],
body.woocommerce-cart a[href*="/nos-tarifs"]:not(.gci-cart-extra a) {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gci-accent) !important;
    text-decoration: none !important;
    padding: 8px 0;
}
body.woocommerce-cart #gci-back-configurator a:hover,
body.woocommerce-cart .wp-block-woocommerce-cart a[href*="/nos-tarifs"]:hover { opacity: .75; }

/* Checkout sidebar back-link — rendered at the bottom of the dark
   summary panel, below "Annual projection" (mockup Page 3 — .sum-modify).
   Uses an #id selector so it wins specificity against the global
   a[href*="/nos-tarifs"] rule defined for the cart page. */
body.woocommerce-checkout #gci-back-configurator.gci-back-link--sidebar {
    text-align: center !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    border: none !important;
}
body.woocommerce-checkout #gci-back-configurator.gci-back-link--sidebar a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.4) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color .2s;
}
body.woocommerce-checkout #gci-back-configurator.gci-back-link--sidebar a:hover {
    color: var(--gci-accent) !important;
}

/* =========================================================
   2. CHECKOUT  (woocommerce-checkout)
   ---------------------------------------------------------
   Mockup: Page 3 - commander.html (form-card / pay-option /
   accordion / cgv-box / checkout-footer). Targets WC blocks
   plus the inline `.gci-vat-info` / `.gci-renewal-accordion`
   / `.gci-consent-wrap` injected by checkout_vat_check_js.
*/

/* Info banner above the form (existing-account notice). */
body.woocommerce-checkout #gci-vat-info-banner,
body.woocommerce-checkout .gci-vat-info {
    background: rgba(249,149,29,.08) !important;
    border: 1px solid rgba(249,149,29,.22) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #fff !important;
    margin: 0 0 16px !important;
}
body.woocommerce-checkout .gci-vat-info a {
    color: var(--gci-accent) !important;
    font-weight: 600 !important;
}

/* Renewal terms — collapsible accordion (Modalités de reconduction). */
body.woocommerce-checkout .gci-renewal-accordion {
    /* TKP8081: styl spójny z kartami kroków (steel card). */
    background: #37567D;
    border: none;
    border-radius: var(--gci-rl);
    box-shadow: var(--gci-s1);
    overflow: hidden;
    margin: 0 0 20px;
}
body.woocommerce-checkout .gci-renewal-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 16px 20px;
    gap: 14px;
    transition: background .15s;
    text-align: left;
    font: inherit;
    color: #fff;
}
body.woocommerce-checkout .gci-renewal-accordion-header:hover {
    background: rgba(255,255,255,.06);
}
body.woocommerce-checkout .gci-renewal-accordion-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.45;
    flex: 1;
}
body.woocommerce-checkout .gci-renewal-accordion-arrow {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(249,149,29,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gci-accent);
    transition: transform .25s;
}
body.woocommerce-checkout .gci-renewal-accordion-arrow svg {
    width: 12px;
    height: 12px;
}
body.woocommerce-checkout .gci-renewal-accordion.open .gci-renewal-accordion-arrow {
    transform: rotate(180deg);
}
body.woocommerce-checkout .gci-renewal-accordion-body {
    display: none;
    padding: 14px 20px 18px;
    font-size: 12.5px;
    color: var(--gci-muted);
    line-height: 1.65;
    border-top: 1px solid rgba(255,255,255,.18);
}
body.woocommerce-checkout .gci-renewal-accordion.open .gci-renewal-accordion-body {
    display: block;
}
body.woocommerce-checkout .gci-renewal-accordion-body p {
    margin: 0 0 8px;
}
body.woocommerce-checkout .gci-renewal-accordion-body p:last-child { margin: 0; }
body.woocommerce-checkout .gci-renewal-accordion-body ul {
    margin: 10px 0;
    padding-left: 18px;
}
body.woocommerce-checkout .gci-renewal-accordion-body ul li {
    margin-bottom: 4px;
}
body.woocommerce-checkout .gci-renewal-accordion-body a {
    color: var(--gci-accent) !important;
    font-weight: 600;
}

/* CGV consent — white card with subtle border, accent on error. */
body.woocommerce-checkout .gci-consent-wrap {
    background: #37567D !important;
    border: 1.5px solid var(--gci-border) !important;
    border-radius: var(--gci-rl) !important;
    padding: 18px 22px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: #fff !important;
    box-shadow: var(--gci-s1);
}
/* Terms and Conditions / Privacy Policy links inside CGV consent —
   accent color + underline so they read as actual links. */
body.woocommerce-checkout .gci-consent-wrap a,
body.woocommerce-checkout .gci-consent-text a {
    color: var(--gci-accent) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
body.woocommerce-checkout .gci-consent-wrap a:hover {
    opacity: .8;
}
body.woocommerce-checkout .gci-consent-wrap input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--gci-accent) !important;
}

/* Tacit renewal short notice — keeps a soft blue card style. */
body.woocommerce-checkout .gci-renewal-notice {
    background: #37567D !important;
    border: 1.5px solid var(--gci-border) !important;
    border-radius: var(--gci-rl) !important;
    padding: 14px 18px !important;
    font-size: 12.5px !important;
    color: #fff !important;
    box-shadow: var(--gci-s1);
}
body.woocommerce-checkout .gci-renewal-notice strong { color: #fff; }


body.woocommerce-checkout .wp-block-woocommerce-checkout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 28px 60px;
}

/* The actual 2-col container is `.wc-block-components-sidebar-layout`
   inside `.wc-block-checkout`. Applying flex on `.wc-block-checkout`
   itself caught siblings (notices, snackbar) and squeezed main. */
body.woocommerce-checkout .wc-block-checkout {
    display: block !important;
}
body.woocommerce-checkout .wc-block-checkout > .wc-block-components-sidebar-layout,
body.woocommerce-checkout .wc-block-components-sidebar-layout {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}

/* WC notice containers — force full width so banners (e.g. "Please accept
   the Terms…") render at the top of the checkout, full width, instead of
   collapsing to a narrow column on the left. */
body.woocommerce-checkout .wp-block-woocommerce-checkout > .wc-block-components-notices,
body.woocommerce-checkout .wc-block-components-notices {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
}
body.woocommerce-checkout .wc-block-components-notice-banner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
/* Snackbar (transient toasts) sit at the bottom of the viewport — keep
   them out of layout flow so they don't push the form around. */
body.woocommerce-checkout .wc-block-components-notices__snackbar {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 90vw !important;
    z-index: 9999;
}

/* Form column — like cart, flex:1 1 0 + min-width:0 lets the column actually
   grow to fill the available space rather than shrink-to-content. */
body.woocommerce-checkout .wc-block-checkout__main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}
/* Inner WC blocks (fields, payment, terms) also stacked with the same
   visible separation between cards. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}
body.woocommerce-checkout .wc-block-checkout__main > *,
body.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block > * {
    width: 100% !important;
    max-width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step,
body.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-shipping-address-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-payment-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-additional-information-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-note-block {
    background: #37567D;
    border-radius: var(--gci-rl) !important;
    box-shadow: var(--gci-s1);
    padding: 24px 28px !important;
    border: none !important;
    /* TKP8081: odstęp między kartami kroków (Coordonnées / Adresse / Paiement). */
    margin: 0 0 20px !important;
}
/* Pan asked for extra breathing room around the "Add a note to your
   order" block. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-note-block {
    margin: 16px 0 !important;
}
/* Subscription renewal accordion gets a wider gap above it (mockup
   spacing — the legal note + accordion form their own visual section). */
body.woocommerce-checkout #gci-renewal-detail,
body.woocommerce-checkout .gci-renewal-accordion {
    margin-top: 24px !important;
}
/* "En continuant vos achats…" — native WC legal note. No card frame. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-terms-block,
body.woocommerce-checkout .wc-block-checkout__terms {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--gci-muted) !important;
    line-height: 1.55 !important;
}
body.woocommerce-checkout .wc-block-checkout__terms a {
    color: var(--gci-accent) !important;
    font-weight: 600 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 14px !important;
    letter-spacing: -.2px;
}
/* Form field labels — small uppercase tag style. Restricted to actual
   field captions; does NOT touch CGV checkbox text, payment radio
   labels, button labels, or descriptive copy. */
body.woocommerce-checkout .wc-block-components-text-input > label,
body.woocommerce-checkout .wc-block-components-combobox-control > label,
body.woocommerce-checkout .wc-block-components-form-row > label,
body.woocommerce-checkout .wc-block-components-form-row legend {
    font-size: 11px !important;
    font-weight: 700 !important;
    /* Etykieta plywa NA bialym inpucie — musi byc ciemna (nie --gci-muted,
       ktory po przejsciu na dark theme jest bialawy). */
    color: #5a7a96 !important;
    letter-spacing: .5px;
    text-transform: uppercase !important;
}
/* Explicitly cancel uppercase on payment radios, CGV consent and button
   text — those carry editorial copy. */
body.woocommerce-checkout .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__option-layout,
body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-checkbox__label,
body.woocommerce-checkout .gci-consent-wrap,
body.woocommerce-checkout .gci-consent-wrap *,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout .wc-block-components-button {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout select,
body.woocommerce-checkout textarea,
body.woocommerce-checkout .wc-block-components-text-input input {
    font-family: inherit !important;
    font-size: 14px !important;
    color: #263B56 !important;
    border: 1.5px solid rgba(38,59,86,.3) !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    background: #fff !important;
    transition: var(--gci-t);
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}
/* Native <select> with WC's floating label: the label sits at top:6px
   (absolute) on top of the select. The selected value needs enough
   padding-top to clear the label, otherwise it overlaps it. */
body.woocommerce-checkout select.wc-blocks-components-select__select,
body.woocommerce-checkout .wc-blocks-components-select select {
    padding: 22px 14px 8px !important;
    height: auto !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}
body.woocommerce-checkout .wc-blocks-components-select__label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
    color: #5a7a96 !important;
    text-transform: uppercase !important;
    top: 8px !important;
    left: 14px !important;
}
body.woocommerce-checkout input:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout .wc-block-components-text-input input:focus {
    border-color: var(--gci-accent) !important;
    box-shadow: 0 0 0 3px rgba(249,149,29,.12) !important;
    outline: none;
}
/* WC Blocks paints an invalid field's whole wrapper (label + input +
   error text) with a solid white fill via its `.has-error` modifier —
   only the <input> itself should stay white; strip the wrapper's own
   background so the red error message sits on the dark page like the
   rest of the form instead of on a white strip. */
body.woocommerce-checkout .wc-block-components-text-input.has-error {
    background: transparent !important;
}
body.woocommerce-checkout .wc-block-components-validation-error {
    background: transparent !important;
}

/* Payment options — each method is an accordion card:
   .wc-block-components-radio-control-accordion-option (white card wrapper)
     └ .wc-block-components-radio-control__option (title row — light blue)
     └ .wc-block-components-radio-control-accordion-content (gateway panel)
   The WRAPPER must carry a solid white background: it is the first probe
   in wc-stripe's appearance backgroundSelectors, so a light computed
   background here flips the Stripe Payment Element to its light theme
   (dark terms copy on the dark "night" theme was unreadable). */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
    background: #fff !important;
    border: 1.5px solid var(--gci-border) !important;
    border-radius: var(--gci-r) !important;
    margin: 0 0 10px !important;
    overflow: hidden;
    outline: none !important;
    box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option:last-child {
    margin-bottom: 0 !important;
}
/* WC's checked highlight is `box-shadow: 0 0 0 2px currentColor`, which
   inherited a pale blue from the dark section — restyle to the accent. */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    border-color: var(--gci-accent) !important;
    box-shadow: 0 0 0 3px rgba(249,149,29,.1) !important;
}
/* Title row (radio + label) — light blue strip inside the white card. */
body.woocommerce-checkout .wc-block-components-radio-control__option {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: #E3EEF9 !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    transition: var(--gci-t);
    position: relative;
    box-sizing: border-box;
}
/* Expanded gateway panel — breathing room + dark copy on the white card. */
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content {
    padding: 16px 18px 20px !important;
    color: #263B56 !important;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content p {
    color: #263B56 !important;
}
body.woocommerce-checkout .wc-block-components-radio-control-accordion-content a {
    color: var(--gci-accent) !important;
    font-weight: 600;
}
/* wc-stripe's test-mode helper text ("Utilisez la carte 4242...") sits
   flush against the payment element below it — id is per-gateway
   (…-card, …-sepa, etc.), match the whole family. */
body.woocommerce-checkout [id^="wc-stripe-payment-method-instructions-"] {
    margin-bottom: 14px !important;
    display: block;
}
/* WC ships the radio with `position:absolute` which knocks it out of the
   flex flow → label sits on top of the input. `relative` returns it to the
   flex flow BUT keeps it a containing block: WC paints the checked dot via
   `::before { position:absolute; left:50%; top:50% }`, so with `static` the
   dot escaped to the middle of the whole row (the floating navy dot). */
body.woocommerce-checkout .wc-block-components-radio-control__option > input[type="radio"] {
    position: relative !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    align-self: center !important;
    /* WC injects transform: translateY(-8px) on the radio — kill it so
       the input stays in its natural flex-centred position. */
    transform: none !important;
    accent-color: var(--gci-accent) !important;
    cursor: pointer;
    background: #fff !important;
    border: 2px solid #9DB4CC !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option > input[type="radio"]:checked {
    border-color: var(--gci-accent) !important;
}
/* The checked dot (WC ::before) — accent, sized for our 18px circle. */
body.woocommerce-checkout .wc-block-components-radio-control__option > input[type="radio"]:checked::before {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    background: var(--gci-accent) !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option-layout {
    align-self: center !important;
}
/* Stripe gateway emits a small CC-cards icon next to the label; align it
   beside the text rather than letting it inflate the label's height. */
body.woocommerce-checkout .wc-block-components-radio-control__label-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    flex-wrap: wrap;
}
body.woocommerce-checkout .wc-block-components-radio-control__label > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
}
body.woocommerce-checkout .wc-block-components-radio-control__option-layout {
    flex: 1 1 0 !important;
    min-width: 0;
    padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__description {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__description {
    color: #263B56 !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    color: var(--gci-accent) !important;
}
/* Checked highlight lives on the accordion wrapper (see above) — the
   inner title strip stays flat. */
body.woocommerce-checkout .wc-block-components-radio-control__option--checked,
body.woocommerce-checkout .wc-block-components-radio-control__option-checked {
    border: none !important;
    box-shadow: none !important;
}

/* Actions footer — same shape as the cards above. Back link on the left,
   Place Order CTA on the right, both inside one white box. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-actions-block {
    background: #37567D !important;
    border-radius: var(--gci-rl) !important;
    box-shadow: var(--gci-s1) !important;
    padding: 18px 22px !important;
    border: none !important;
    margin: 0 !important;
}
body.woocommerce-checkout .wc-block-checkout__actions_row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
}
/* "Return to Cart" link is redundant with the "← Modifier ma sélection"
   link in the sidebar — hide the WC native one to keep the actions footer
   focused on the Place Order CTA. */
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
    display: none !important;
}

/* Place-order button — accent CTA, centered in its block, white text. */
body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
    width: auto !important;
    min-width: 280px !important;
    padding: 14px 32px !important;
    background: var(--gci-accent) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
    text-transform: uppercase !important;
    border-radius: var(--gci-r) !important;
    border: none;
    transition: var(--gci-t);
    text-align: center !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button > * {
    color: #fff !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
    background: #37567D !important;
    box-shadow: 0 6px 22px rgba(0,21,48,.4);
    transform: translateY(-1px);
}

/* Right column — order summary (dark, sticky, fixed width).
   z-index lifts the panel above Divi's top dd-wrapper menu strip,
   which would otherwise paint over the first ~80px of the sidebar
   (covering the "Récapitulatif" master title). */
body.woocommerce-checkout .wc-block-checkout__sidebar {
    flex: 0 0 380px !important;
    width: 380px !important;
    max-width: 380px !important;
    background: var(--gci-primary);
    border-radius: var(--gci-rl);
    padding: 28px 24px;
    color: #fff;
    position: sticky !important;
    top: 24px !important;
    z-index: 10 !important;
    box-shadow: var(--gci-s2);
    box-sizing: border-box;
}
body.woocommerce-checkout .wc-block-checkout__sidebar > *,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block > * {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    color: #fff !important;
}
/* Hide native WC sidebar title ("Order summary" / "Résumé de la
   commande") — our injected `.gci-recap-master-title` is the one we
   keep at the very top of the sidebar. */
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-button {
    display: none !important;
}
/* Master title at the top of the dark sidebar — kept large + opaque
   so it actually reads on the screenshot. Mockup uses a more subtle
   alpha; we trade subtlety for visibility per pan's feedback. */
body.woocommerce-checkout .gci-recap-master-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    color: #fff !important;
    margin: 0 0 22px !important;
    padding: 0 6px !important;
    line-height: 1.3 !important;
}
/* The recap-title living inside #gci-cart-extra is now a duplicate (we
   hoisted the master title to the top of the sidebar) — hide it. */
body.woocommerce-checkout .gci-cart-extra-recap-title {
    display: none !important;
}
/* Quantity badge ("2") next to product image in sidebar — pan saw it
   as a stray white frame. Make it transparent / accent-color. */
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
    background: var(--gci-accent) !important;
    color: #fff !important;
    font-weight: 800 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary,
body.woocommerce-checkout .wc-block-components-order-summary-item {
    color: #fff;
    background: transparent;
    border: none;
}
body.woocommerce-checkout .wc-block-components-order-summary-item {
    display: grid !important;
    grid-template-columns: 32px 1fr auto !important;
    gap: 10px;
    align-items: center;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item:last-child { border-bottom: none; }
body.woocommerce-checkout .wc-block-components-order-summary-item__image {
    width: 32px !important;
    height: 32px !important;
    border-radius: 7px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
}
body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
    width: 32px;
    height: 32px;
    object-fit: cover;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__description {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.82) !important;
    line-height: 1.3;
}
/* Mockup Page 3: sidebar summary shows only the product name + qty + price
   per line — strip the description / meta tags WC adds under the name. */
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata,
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-details,
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-cart-item__prices,
body.woocommerce-checkout .wc-block-components-order-summary-item__description .gci-meta-injected,
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-variation,
body.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-price {
    display: none !important;
}
/* "Modifier ma sélection" link — when injected by cart_back_to_configurator,
   surface it at the top of the form column. */
body.woocommerce-checkout .gci-back-link,
body.woocommerce-checkout a[href*="/nos-tarifs"]:not(.gci-cart-extra a) {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gci-accent) !important;
    text-decoration: none !important;
    padding: 8px 0;
    margin: 0 0 4px;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #fff !important;
    white-space: nowrap;
}
body.woocommerce-checkout .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-components-totals-item {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
}
body.woocommerce-checkout .wc-block-components-totals-item__label {
    color: rgba(255,255,255,.6) !important;
}
body.woocommerce-checkout .wc-block-components-totals-item__value {
    color: #fff !important;
    font-weight: 700 !important;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item {
    border-top: 1px solid rgba(255,255,255,.1) !important;
    padding-top: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* =========================================================
   3. THANK-YOU  (woocommerce-order-received)
   --------------------------------------------------------- */
body.woocommerce-order-received .woocommerce {
    max-width: 820px;
    margin: 0 auto;
    padding: 52px 28px 60px;
}
body.woocommerce-order-received h1.entry-title,
body.woocommerce-order-received .page-title {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.5px;
    margin-bottom: 14px;
}

/* Success notice (Merci, votre commande …) */
body.woocommerce-order-received .woocommerce-notice--success,
body.woocommerce-order-received .woocommerce-thankyou-order-received {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(249,149,29,.1);
    color: var(--gci-accent);
    padding: 14px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 32px;
}
body.woocommerce-order-received .woocommerce-notice--success::before {
    content: '✓';
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gci-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 900;
}

/* Order details meta (number, date, total, payment method) — horizontal pills */
body.woocommerce-order-received ul.woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-thankyou-order-details {
    display: flex !important;
    flex-wrap: wrap;
    gap: 18px;
    background: #37567D;
    border-radius: var(--gci-rl);
    padding: 22px 24px;
    box-shadow: var(--gci-s1);
    list-style: none;
    margin: 8px 0 24px;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--gci-border);
    padding-right: 18px;
    margin: 0;
    border-bottom: none;
}
body.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
    border-right: none;
    padding-right: 0;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    margin-top: 2px;
}
body.woocommerce-order-received ul.woocommerce-order-overview li {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gci-muted);
}

/* Account / platform CTA box */
body.woocommerce-order-received .gci-thankyou-account-box,
body.woocommerce-order-received .gci-account-box {
    background: var(--gci-primary);
    border-radius: var(--gci-rl);
    padding: 28px 28px;
    color: #fff;
    text-align: center;
    margin: 0 0 24px;
    box-shadow: var(--gci-s2);
}
body.woocommerce-order-received .gci-thankyou-account-box h2,
body.woocommerce-order-received .gci-thankyou-account-box h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
}
body.woocommerce-order-received .gci-thankyou-account-box p {
    color: rgba(255,255,255,.78);
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 18px;
}
body.woocommerce-order-received .gci-thankyou-account-box a.gci-btn-platform,
body.woocommerce-order-received .gci-btn-platform {
    display: inline-block;
    padding: 13px 28px;
    background: var(--gci-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    border-radius: var(--gci-r);
    transition: var(--gci-t);
    text-decoration: none;
}
body.woocommerce-order-received .gci-thankyou-account-box a.gci-btn-platform:hover {
    background: #37567D;
    box-shadow: 0 6px 22px rgba(0,21,48,.4);
    transform: translateY(-1px);
}

/* Order details table */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received section.woocommerce-order-details {
    background: #37567D;
    border-radius: var(--gci-rl);
    padding: 24px 28px;
    box-shadow: var(--gci-s1);
    margin: 0 0 24px;
}
body.woocommerce-order-received .woocommerce-order-details h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gci-accent);
    margin-bottom: 16px;
}
body.woocommerce-order-received table.woocommerce-table--order-details,
body.woocommerce-order-received table.shop_table.order_details {
    width: 100%;
    border-collapse: collapse;
}
body.woocommerce-order-received table.woocommerce-table--order-details thead th {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gci-muted);
    padding: 8px 0;
    border-bottom: 2px solid var(--gci-border);
    text-align: left;
}
body.woocommerce-order-received table.woocommerce-table--order-details thead th:last-child { text-align: right; }
body.woocommerce-order-received table.woocommerce-table--order-details tbody td {
    font-size: 13px;
    color: #fff;
    padding: 12px 0;
    border-bottom: 1px solid var(--gci-border);
}
body.woocommerce-order-received table.woocommerce-table--order-details tbody td:last-child {
    text-align: right;
    font-weight: 700;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr td {
    font-size: 13px;
    padding: 8px 0;
    border: none;
}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    padding-top: 12px;
    border-top: 2px solid var(--gci-border);
}

/* Customer details (billing address etc.) */
body.woocommerce-order-received .woocommerce-customer-details {
    background: #37567D;
    border-radius: var(--gci-rl);
    padding: 24px 28px;
    box-shadow: var(--gci-s1);
    margin: 0 0 24px;
}
body.woocommerce-order-received .woocommerce-customer-details h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gci-accent);
    margin-bottom: 14px;
}

/* =========================================================
   Responsive
   --------------------------------------------------------- */
@media (max-width: 900px) {
    body.woocommerce-cart .wc-block-cart,
    body.woocommerce-checkout .wc-block-checkout {
        grid-template-columns: 1fr !important;
    }
    body.woocommerce-cart .wc-block-cart__sidebar,
    body.woocommerce-checkout .wc-block-checkout__sidebar {
        position: static;
    }
}
@media (max-width: 600px) {
    body.woocommerce-cart .wc-block-cart-items__row {
        grid-template-columns: 56px 1fr !important;
    }
    body.woocommerce-cart .wc-block-cart-item__total {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        grid-column: 1 / -1;
    }
}

/* =========================================================
   5. Hero band (cart / checkout / confirmation)
   — mirrors the Divi hero of the pricing page: steel #263b56,
   photo top-right under diagonal bars, slanted bottom edge
   revealing the navy body background.
   --------------------------------------------------------- */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-order-received { overflow-x: hidden; background: var(--gci-bg) !important; }

/* Divi wraps the page in a white #main-content with a padded .container and
   an (invisible white-on-white) "Cart" entry title — all three create a white
   band between the site header and our hero. Neutralise them. */
body.woocommerce-cart #main-content,
body.woocommerce-checkout #main-content,
body.woocommerce-order-received #main-content { background: transparent !important; }
body.woocommerce-cart #main-content .container,
body.woocommerce-checkout #main-content .container,
body.woocommerce-order-received #main-content .container { padding-top: 0 !important; }
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-order-received .entry-title { display: none !important; }

.gci-page-hero {
    position: relative;
    width: 100vw;
    margin: 0 0 8px calc(50% - 50vw);
    background-color: #263b56;
    background-image: url('/wp-content/uploads/2023/08/hero-clients-partenaires-tk-blue.jpg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 62% auto;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 52px), 0 100%);
    padding: 64px 0 108px;
}
/* Left text zone fades from solid steel into the photo + diagonal bars. */
.gci-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, #263b56 0%, #263b56 40%, rgba(38,59,86,.35) 58%, rgba(38,59,86,0) 74%),
        repeating-linear-gradient(115deg, rgba(38,59,86,0) 0 150px, rgba(38,59,86,.85) 150px 225px);
}
.gci-page-hero-inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px;
}
.gci-page-hero h1 {
    font-family: 'Prompt', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 43px !important;
    letter-spacing: 2px;
    line-height: 1.15 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}
.gci-page-hero h1 span { color: #F9951D; }
@media (max-width: 768px) {
    .gci-page-hero { background-image: none; padding: 40px 0 78px; }
    .gci-page-hero h1 { font-size: 27px !important; }
}

/* Product-name links inside the order details (confirmation / my-account)
   — theme paints them light blue; align with the TKB accent. */
body.woocommerce-order-received .woocommerce-order-details a,
body.woocommerce-order-received .woocommerce-table--order-details a {
    color: #F9951D !important;
    text-decoration: none !important;
}

/* ── TKP8081: pola Prénom / Nom / Entreprise / TVA w bloku "Coordonnées"
   (przenoszone przez ensureContactFields w checkout_vat_check_js). ── */
body.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-checkout-step__content > * {
    flex: 1 1 100%;
    margin: 0 !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-address-form__first_name,
body.woocommerce-checkout .wp-block-woocommerce-checkout-contact-information-block .wc-block-components-address-form__last_name {
    flex: 1 1 calc(50% - 6px);
}

/* ── TKP8081: kolejność pól bloku adresu (WC Blocks ignoruje serwerowe
   priorytety pól rdzeniowych — porządek przez flex order):
   kraj → code postal → ville → adresse → complément → téléphone. ── */
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form > * {
    flex: 1 1 100%;
    margin: 0 !important;
    box-sizing: border-box;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__country { order: 10; }
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__postcode { order: 20; flex: 1 1 calc(50% - 6px); }
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__city { order: 30; flex: 1 1 calc(50% - 6px); }
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__state { order: 35; }
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__address_1 { order: 40; }
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__address_2-toggle { order: 50; }
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__address_2,
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__address_2-hidden-input { order: 55; }
body.woocommerce-checkout .wp-block-woocommerce-checkout-billing-address-block .wc-block-components-address-form__phone { order: 60; }