/* ============================================================
   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: #042F53;
    --gci-accent:  #11BDE3;
    --gci-bg:      #f4f8fb;
    --gci-border:  #dce8f0;
    --gci-muted:   #5a7a96;
    --gci-r:       10px;
    --gci-rl:      16px;
    --gci-s1:      0 2px 16px rgba(4,47,83,.08);
    --gci-s2:      0 10px 40px rgba(4,47,83,.18);
    --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: var(--gci-primary);
}

/* =========================================================
   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: #fff;
    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: #f0f6fc;
    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: #fafcfe; }

/* 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: var(--gci-primary) !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: #f0f6fc;
    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 var(--gci-border) !important;
    background: #fff !important;
    color: var(--gci-primary) !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: var(--gci-primary) !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: var(--gci-primary) !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: #fef2f2 !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(17,189,227,.18) !important;
    border: 1px solid rgba(17,189,227,.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 residual native WC totals block ("Total estimé 0,00 €"). The
   cart's WC total sits at 0 €  because deduct_recurring_from_cart() zeroes
   it out for subscriptions; our gci-cart-extra is the real summary. */
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: var(--gci-primary) !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: #0dafd0 !important;
    box-shadow: 0 6px 22px rgba(17,189,227,.35);
    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: var(--gci-primary);
    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 .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 .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(17,189,227,.08) !important;
    border: 1px solid rgba(17,189,227,.22) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--gci-primary) !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 {
    background: rgba(17,189,227,.03);
    border: 1px solid rgba(17,189,227,.22);
    border-radius: var(--gci-r);
    overflow: hidden;
    margin: 0 0 16px;
}
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: var(--gci-primary);
}
body.woocommerce-checkout .gci-renewal-accordion-header:hover {
    background: rgba(17,189,227,.05);
}
body.woocommerce-checkout .gci-renewal-accordion-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gci-primary);
    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(17,189,227,.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: 0 20px 18px;
    font-size: 12.5px;
    color: var(--gci-muted);
    line-height: 1.65;
    border-top: 1px solid rgba(17,189,227,.15);
}
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: #fff !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: var(--gci-primary) !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: #fff !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: var(--gci-primary) !important;
    box-shadow: var(--gci-s1);
}
body.woocommerce-checkout .gci-renewal-notice strong { color: var(--gci-primary); }


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: #fff;
    border-radius: var(--gci-rl) !important;
    box-shadow: var(--gci-s1);
    padding: 24px 28px !important;
    border: none !important;
    margin: 0 !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: var(--gci-primary) !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;
    color: var(--gci-muted) !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: var(--gci-primary) !important;
    border: 1.5px solid var(--gci-border) !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: var(--gci-muted) !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(17,189,227,.12) !important;
    outline: none;
}

/* Payment options — card-shaped radios. The radio + label sit on the same
   row, with explicit horizontal gap so the label can never overlap the
   input. Both options (Card / SEPA) inherit the same card styling. */
body.woocommerce-checkout .wc-block-components-radio-control__option {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: #fff !important;
    border: 1.5px solid var(--gci-border) !important;
    border-radius: var(--gci-r) !important;
    margin: 0 0 10px !important;
    cursor: pointer;
    transition: var(--gci-t);
    position: relative;
    box-sizing: border-box;
}
body.woocommerce-checkout .wc-block-components-radio-control__option:last-child {
    margin-bottom: 0 !important;
}
/* WC ships the radio with `position:absolute` which knocks it out of the
   flex flow → label sits on top of the input. Force static positioning
   so the radio + label share the row gap honestly. */
body.woocommerce-checkout .wc-block-components-radio-control__option > input[type="radio"] {
    position: static !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;
}
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;
    color: var(--gci-primary) !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.3;
}
body.woocommerce-checkout .wc-block-components-radio-control__option--checked,
body.woocommerce-checkout .wc-block-components-radio-control__option-checked {
    border-color: var(--gci-accent) !important;
    box-shadow: 0 0 0 3px rgba(17,189,227,.1) !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: #fff !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: #0dafd0 !important;
    box-shadow: 0 6px 22px rgba(17,189,227,.35);
    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: var(--gci-primary) !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: var(--gci-primary);
    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(17,189,227,.1);
    color: var(--gci-accent);
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 24px;
}
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: #fff;
    border-radius: var(--gci-rl);
    padding: 18px 24px;
    box-shadow: var(--gci-s1);
    list-style: none;
    margin: 0 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: var(--gci-primary);
    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: var(--gci-primary);
    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: #0dafd0;
    box-shadow: 0 6px 22px rgba(17,189,227,.35);
    transform: translateY(-1px);
}

/* Order details table */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received section.woocommerce-order-details {
    background: #fff;
    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: var(--gci-primary);
    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: var(--gci-primary);
    padding-top: 12px;
    border-top: 2px solid var(--gci-border);
}

/* Customer details (billing address etc.) */
body.woocommerce-order-received .woocommerce-customer-details {
    background: #fff;
    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;
    }
}