/*!
 * SnazzyCheckout v1.3
 * - Font/colors driven by CSS variables injected from settings
 * - Fixes: tab hover, WC default place_order button hidden, theme button overrides
 */

/* ========== STANDALONE RESET ==========
   Le gradient FULL-WIDTH est posé sur html ET body.snazzy-standalone (pas
   sur le wrapper) pour qu'il couvre vraiment 100 % de la fenêtre, peu
   importe la largeur du wrapper ou un éventuel scroll. C'est l'unique
   façon de garantir que la moitié droite reste sand jusqu'au bord et tout
   en bas, plus jamais de zone blanche après le récap court. */
html.snazzy-standalone-bg,
html, body.snazzy-standalone {
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(to right, #fff 50%, #ede8e1 50%) !important;
    min-height: 100vh;
}
body.snazzy-standalone {
    font-family: var(--snazzy-font, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}
body.snazzy-standalone .snazzy-app { min-height: 100vh; display: block; }
body.snazzy-standalone > header,
body.snazzy-standalone > footer,
body.snazzy-standalone .site-header,
body.snazzy-standalone .site-footer,
body.snazzy-standalone #masthead,
body.snazzy-standalone #colophon,
body.snazzy-standalone .elementor-location-header,
body.snazzy-standalone .elementor-location-footer { display: none !important; }

/* ========== BASE ========== */
.snazzy-checkout-wrapper,
.snazzy-checkout-wrapper * {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.snazzy-checkout-wrapper {
    /* Defaults — overridden by inline CSS variables from settings.
       --snazzy-bg-summary passé de #f5f5f5 (presque blanc, invisible) à
       #ede8e1 (le sand Cryofast) pour un vrai contraste visible avec la
       colonne formulaire blanche. */
    --snazzy-accent: #000000;
    --snazzy-text: #1a1a1a;
    --snazzy-text-muted: #6b7177;
    --snazzy-border: #d9d9d9;
    --snazzy-border-strong: #1a1a1a;
    --snazzy-bg: #ffffff;
    --snazzy-bg-summary: #ede8e1;
    --snazzy-payment-bg: #fafafa;
    --snazzy-radius: 5px;
    --snazzy-input-height: 52px;
    --snazzy-logo-max-h: 60px;
    --snazzy-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-family: var(--snazzy-font) !important;
    color: var(--snazzy-text);
    font-size: 14px;
    line-height: 1.45;
    /* Le gradient est posé sur html/body (cf. STANDALONE RESET) pour couvrir
       100 % de la fenêtre sans aucune zone blanche résiduelle. Le wrapper
       reste transparent pour laisser passer ce gradient. */
    background: transparent;
    min-height: 100vh;
    /* z-index élevé pour passer au-dessus des résidus Elementor */
    position: relative !important;
    z-index: 999999 !important;
    /* CRITICAL : pas de transform / contain / filter / perspective qui casseraient
       position: sticky sur .snazzy-summary */
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
}
/* Pareil sur tous les ancêtres entre body et .snazzy-summary */
body.snazzy-standalone,
body.snazzy-standalone .snazzy-app,
.snazzy-checkout-wrapper form.snazzy-form,
.snazzy-checkout-wrapper .snazzy-grid,
.snazzy-checkout-wrapper .snazzy-main,
.snazzy-checkout-wrapper .snazzy-summary {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    will-change: auto !important;
}

.snazzy-checkout-wrapper a {
    color: var(--snazzy-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.snazzy-checkout-wrapper a:hover { color: var(--snazzy-text); }
.snazzy-checkout-wrapper h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 14px !important;
    letter-spacing: -0.01em;
    color: var(--snazzy-text) !important;
    line-height: 1.3 !important;
}

/* ========== ANTI-THEME OVERRIDES ========== */
/* Forces nos boutons à garder leur style même contre les règles agressives du thème */
.snazzy-checkout-wrapper button,
.snazzy-checkout-wrapper input,
.snazzy-checkout-wrapper select,
.snazzy-checkout-wrapper textarea {
    font-family: var(--snazzy-font) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.snazzy-checkout-wrapper button {
    text-shadow: none !important;
    box-shadow: none;
}
.snazzy-checkout-wrapper button:hover,
.snazzy-checkout-wrapper button:focus,
.snazzy-checkout-wrapper button:active {
    text-shadow: none !important;
    background-image: none !important;
    filter: none !important;
}

/* ========== HEADER ========== */
.snazzy-header {
    border-bottom: 1px solid #ececec;
    background: #fff !important;
    position: relative !important;
    z-index: 1 !important;
}
.snazzy-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 32px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.snazzy-header-spacer { height: 1px; }
.snazzy-header-logo { text-align: center; }
.snazzy-header-logo a { text-decoration: none !important; display: inline-block; }
.snazzy-header-logo img {
    max-height: var(--snazzy-logo-max-h) !important;
    width: auto !important;
    display: block;
}
.snazzy-text-logo {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--snazzy-text) !important;
}
.snazzy-header-cart { text-align: right; }
.snazzy-cart-toggle {
    background: none !important;
    border: none !important;
    cursor: pointer;
    color: var(--snazzy-text) !important;
    position: relative;
    padding: 6px !important;
    text-decoration: none !important;
    display: inline-block;
}
.snazzy-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background: #1a1a1a;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.snazzy-cart-icon-img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
}
.snazzy-cart-icon-svg { display: block !important; }

/* ========== GRID 2 COLONNES (technique Shopify) ==========
   Le fond gradient 50/50 est sur le WRAPPER (pas ici) avec min-height 100vh,
   pour couvrir toute la fenêtre même quand le contenu est court. Cette
   correction fixe le « gros blanc à droite » sous le récap quand la commande
   est courte. */
.snazzy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    background: transparent; /* le gradient vient du wrapper */
    /* Pas d'align-items override : défaut = stretch, on laisse */
}
.snazzy-main {
    background: transparent;
    display: flex;
    justify-content: flex-end;
}
.snazzy-main-inner {
    max-width: 560px;
    width: 100%;
    padding: 40px 56px 80px 32px;
}
/* L'aside outer doit s'étirer (default grid) pour que l'inner puisse sticker dedans */
.snazzy-summary {
    background: transparent !important;
    border-left: 1px solid #ececec;
    /* Pas d'override : stretch par défaut */
}
.snazzy-summary-inner {
    max-width: 560px;
    padding: 40px 32px 80px 56px;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
}

/* ========== SECTIONS ========== */
.snazzy-section { margin-bottom: 28px; }
.snazzy-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.snazzy-section-header h2 { margin: 0 !important; }
.snazzy-link { font-size: 13px; text-decoration: underline; }

/* ========== EXPRESS ========== */
.snazzy-express { text-align: center; }
.snazzy-express-label {
    font-size: 12px;
    color: var(--snazzy-text-muted);
    margin-bottom: 10px;
}
.snazzy-express-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
.snazzy-express-buttons:has(.snazzy-express-btn + .snazzy-express-btn) {
    grid-template-columns: 1fr 1fr;
}
.snazzy-express-btn {
    height: 48px !important;
    border-radius: var(--snazzy-radius) !important;
    border: none !important;
    cursor: pointer;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
}
.snazzy-paypal {
    background: #ffc439 !important;
    color: #003087 !important;
}
.snazzy-paypal i { font-style: italic; color: #003087; }
.snazzy-paypal b { color: #009cde; font-weight: 700; }
.snazzy-divider {
    text-align: center;
    position: relative;
    margin: 18px 0 8px;
    color: var(--snazzy-text-muted);
    font-size: 12px;
}
.snazzy-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ececec;
    z-index: 0;
}
.snazzy-divider span {
    background: #fff;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}

/* ========== INPUTS ========== */
.snazzy-field { position: relative; margin-bottom: 10px; }
.snazzy-row { display: grid; gap: 10px; }
.snazzy-row-2 { grid-template-columns: 1fr 1fr; margin-bottom: 10px; }

.snazzy-input {
    width: 100% !important;
    height: var(--snazzy-input-height) !important;
    padding: 0 14px !important;
    border: 1px solid var(--snazzy-border) !important;
    border-radius: var(--snazzy-radius) !important;
    background: #fff !important;
    font-size: 14px !important;
    color: var(--snazzy-text) !important;
    font-family: var(--snazzy-font) !important;
    transition: border-color .15s, box-shadow .15s !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: normal !important;
}
.snazzy-input::placeholder { color: #8a8f95 !important; opacity: 1; }
.snazzy-input:focus {
    border-color: var(--snazzy-border-strong) !important;
    box-shadow: 0 0 0 1px var(--snazzy-border-strong) !important;
}

.snazzy-field-icon .snazzy-input { padding-right: 44px !important; }
.snazzy-input-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--snazzy-text-muted);
    pointer-events: none;
    z-index: 2;
}

.snazzy-select-wrap { position: relative; }
.snazzy-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-top: 18px !important;
    padding-bottom: 4px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}
.snazzy-floating-label {
    position: absolute;
    top: 8px;
    left: 14px;
    font-size: 11px;
    color: var(--snazzy-text-muted);
    pointer-events: none;
    z-index: 1;
}

.snazzy-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0 !important;
    cursor: pointer;
    font-size: 13px;
    color: var(--snazzy-text);
}
.snazzy-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--snazzy-accent);
    cursor: pointer;
    margin: 0 !important;
}

/* ========== TABS — FIX HOVER BUG ========== */
.snazzy-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--snazzy-border);
    border-radius: var(--snazzy-radius);
    overflow: hidden;
    margin-bottom: 14px;
    background: #f5f5f5;
}
.snazzy-tab,
.snazzy-tab:hover,
.snazzy-tab:focus,
.snazzy-tab:active {
    background: #f5f5f5 !important;
    border: none !important;
    padding: 16px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--snazzy-text) !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: var(--snazzy-font) !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    background-image: none !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 64px;
    text-decoration: none !important;
    opacity: 1 !important;
}
.snazzy-tab svg {
    display: block !important;
    flex-shrink: 0;
    color: var(--snazzy-text) !important;
    stroke: var(--snazzy-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.snazzy-tab .snazzy-tab-label {
    color: var(--snazzy-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline !important;
    font-family: var(--snazzy-font) !important;
}
.snazzy-tab.is-active,
.snazzy-tab.is-active:hover {
    background: #fff !important;
    box-shadow: inset 0 0 0 2px var(--snazzy-text) !important;
    border-radius: var(--snazzy-radius) !important;
    font-weight: 600 !important;
}

.snazzy-empty-state {
    background: #f5f5f5;
    border: 1px solid #ececec;
    border-radius: var(--snazzy-radius);
    padding: 16px 18px;
    color: var(--snazzy-text-muted);
    font-size: 13px;
}

/* ========== PAYMENT (custom rendering) ========== */
.snazzy-muted {
    color: var(--snazzy-text-muted);
    font-size: 13px;
    margin: 0 0 12px;
}
.snazzy-payment ul.wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--snazzy-border);
    border-radius: var(--snazzy-radius);
    overflow: hidden;
}
.snazzy-payment ul.wc_payment_methods li {
    padding: 16px !important;
    border-bottom: 1px solid #ececec;
    background: #fff !important;
    margin: 0 !important;
    list-style: none !important;
}
.snazzy-payment ul.wc_payment_methods li::before { display: none !important; }
.snazzy-payment ul.wc_payment_methods li:last-child { border-bottom: none; }
.snazzy-payment ul.wc_payment_methods li label {
    font-weight: 500 !important;
    cursor: pointer;
    color: var(--snazzy-text) !important;
}
.snazzy-payment .payment_box {
    background: #f9f9f9 !important;
    padding: 14px !important;
    margin-top: 12px !important;
    border-radius: var(--snazzy-radius) !important;
    font-size: 13px;
    color: var(--snazzy-text-muted) !important;
    border: none !important;
}
.snazzy-payment .payment_box::before { display: none !important; }

/* ========== HARMONIZE PAYMENT BOX (PayPlug, Stripe, Mollie etc.) ========== */
/* On utilise #payment au lieu de .snazzy-payment car le div peut perdre nos classes
   selon les configurations WC. #payment est garanti unique sur la page. */

/* Liste des méthodes de paiement : fond blanc */
.snazzy-checkout-wrapper #payment ul.wc_payment_methods,
.snazzy-checkout-wrapper #payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--snazzy-border) !important;
    border-radius: var(--snazzy-radius) !important;
    overflow: hidden !important;
    background: #fff !important;
}
.snazzy-checkout-wrapper #payment ul.wc_payment_methods li,
.snazzy-checkout-wrapper #payment ul.wc_payment_methods li[style],
.snazzy-checkout-wrapper #payment ul.payment_methods li {
    padding: 16px !important;
    border-bottom: 1px solid #ececec !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    margin: 0 !important;
    list-style: none !important;
    color: var(--snazzy-text) !important;
    /* Toute la « carte » est cliquable (cf. bindPaymentMethodClick côté JS).
       Le curseur pointer le signale visuellement. */
    cursor: pointer;
    transition: background-color .15s ease;
}
.snazzy-checkout-wrapper #payment ul.wc_payment_methods li:hover,
.snazzy-checkout-wrapper #payment ul.payment_methods li:hover {
    background: #fafafa !important;
}
.snazzy-checkout-wrapper #payment ul.wc_payment_methods li::before { display: none !important; }
.snazzy-checkout-wrapper #payment ul.wc_payment_methods li:last-child { border-bottom: none !important; }
.snazzy-checkout-wrapper #payment ul.wc_payment_methods li label {
    font-weight: 500 !important;
    cursor: pointer;
    color: var(--snazzy-text) !important;
    margin: 0 !important;
}

/* === LE MAUVE PAYPLUG : NUCLEAR OVERRIDE === */
/* .payment_box = conteneur transparent, sans bordure, sans fond.
   Il y a déjà le li.wc_payment_method qui fait le rectangle extérieur.
   Les 4 champs inputs ont leurs propres rectangles. Pas besoin de 3 niveaux. */
.snazzy-checkout-wrapper #payment .payment_box,
.snazzy-checkout-wrapper #payment .payment_box[style],
.snazzy-checkout-wrapper #payment div.payment_box,
.snazzy-checkout-wrapper #payment .payment_method_payplug.payment_box,
.snazzy-checkout-wrapper #payment .payment_box.payment_method_payplug,
.snazzy-checkout-wrapper #payment .payment_box.payment_method_stripe,
.snazzy-checkout-wrapper #payment .payment_box.payment_method_mollie,
.snazzy-checkout-wrapper #payment li .payment_box {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--snazzy-text) !important;
    padding: 16px 0 4px !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.snazzy-checkout-wrapper #payment .payment_box::before,
.snazzy-checkout-wrapper #payment .payment_box::after { display: none !important; }

/* TOUS les descendants du .payment_box reprennent la fonte ET les bonnes couleurs
   mais PAS le background (sauf classes PayPlug spécifiques ci-dessous) car un
   sélecteur * sur le background recouvre les bords des rectangles internes. */
.snazzy-checkout-wrapper #payment .payment_box .payplug,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment,
.snazzy-checkout-wrapper #payment .payment_box [class*="IntegratedPayment"]:not(.IntegratedPayment_container),
.snazzy-checkout-wrapper #payment .payment_box [class*="payplug"],
.snazzy-checkout-wrapper #payment .payment_box [class*="card-form"],
.snazzy-checkout-wrapper #payment .payment_box [class*="form-container"],
.snazzy-checkout-wrapper #payment .payment_box [class*="payment-form"],
.snazzy-checkout-wrapper #payment .payment_box fieldset {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--snazzy-text) !important;
    border-color: var(--snazzy-border) !important;
    box-shadow: none !important;
}

/* Fonte unifiée sur tous les descendants (mais on ne touche pas au background) */
.snazzy-checkout-wrapper #payment .payment_box,
.snazzy-checkout-wrapper #payment .payment_box * {
    font-family: var(--snazzy-font) !important;
}

/* Textes : titres, labels, paragraphes */
.snazzy-checkout-wrapper #payment .payment_box h1,
.snazzy-checkout-wrapper #payment .payment_box h2,
.snazzy-checkout-wrapper #payment .payment_box h3,
.snazzy-checkout-wrapper #payment .payment_box h4,
.snazzy-checkout-wrapper #payment .payment_box label,
.snazzy-checkout-wrapper #payment .payment_box p,
.snazzy-checkout-wrapper #payment .payment_box span:not([class*="error"]):not([class*="invalid"]),
.snazzy-checkout-wrapper #payment .payment_box div:not([class*="error"]):not([class*="invalid"]) {
    color: var(--snazzy-text) !important;
}

/* INPUTS : restent BLANCS pour contraster avec le fond du payment_box */
.snazzy-checkout-wrapper #payment .payment_box input[type="text"],
.snazzy-checkout-wrapper #payment .payment_box input[type="tel"],
.snazzy-checkout-wrapper #payment .payment_box input[type="email"],
.snazzy-checkout-wrapper #payment .payment_box input[type="number"],
.snazzy-checkout-wrapper #payment .payment_box input[type="password"],
.snazzy-checkout-wrapper #payment .payment_box input.input-text,
.snazzy-checkout-wrapper #payment .payment_box .form-row input,
.snazzy-checkout-wrapper #payment .payment_box select {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid var(--snazzy-border) !important;
    border-radius: var(--snazzy-radius) !important;
    color: var(--snazzy-text) !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    font-family: var(--snazzy-font) !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
}
.snazzy-checkout-wrapper #payment .payment_box input:focus,
.snazzy-checkout-wrapper #payment .payment_box select:focus {
    border-color: var(--snazzy-text) !important;
    box-shadow: 0 0 0 1px var(--snazzy-text) !important;
    outline: none !important;
}
.snazzy-checkout-wrapper #payment .payment_box input::placeholder {
    color: #8a8f95 !important;
    opacity: 1 !important;
}

/* Le FORM wrapper PayPlug (form.payplug.IntegratedPayment.-loaded) : transparent,
   pas de bordure, pas de padding. Sinon on a un double encadré (payment_box outer +
   form inner) qui fait "poupées russes" dégueulasses. */
.snazzy-checkout-wrapper #payment .payment_box form.payplug,
.snazzy-checkout-wrapper #payment .payment_box form.IntegratedPayment,
.snazzy-checkout-wrapper #payment .payment_box form.payplug.IntegratedPayment,
.snazzy-checkout-wrapper #payment .payment_box form[class*="IntegratedPayment"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* === PAYPLUG : les "inputs" sont en réalité des DIVs .IntegratedPayment_container
   qui contiennent une icône ET une iframe. On applique UNIQUEMENT le rectangle
   (background / border / radius / margin) sans toucher au layout interne (display,
   padding, alignement) — sinon on fait chevaucher l'icône avec l'iframe.
   On cible UNIQUEMENT les 4 containers d'input (cardHolder, pan, exp, cvv) via
   les modifier classes spécifiques, pour ne pas attraper les lignes "Transaction
   sécurisée" / "Politique de confidentialité" qui sont d'autres éléments. === */
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_container.-cardHolder,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_container.-pan,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_container.-exp,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_container.-cvv,
.snazzy-checkout-wrapper #payment .payment_box .cardHolder-input-container,
.snazzy-checkout-wrapper #payment .payment_box .pan-input-container,
.snazzy-checkout-wrapper #payment .payment_box .exp-input-container,
.snazzy-checkout-wrapper #payment .payment_box .cvv-input-container {
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border: 1px solid var(--snazzy-border) !important;
    border-radius: var(--snazzy-radius) !important;
    margin: 0 0 10px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    /* IMPORTANT : PAS de display, padding, height, align-items, justify-content
       — PayPlug a son propre layout interne avec l'icône + iframe, on le laisse */
}
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_container.-cardHolder:focus-within,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_container.-pan:focus-within,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_container.-exp:focus-within,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_container.-cvv:focus-within {
    border-color: var(--snazzy-text) !important;
    box-shadow: 0 0 0 1px var(--snazzy-text) !important;
}
/* Le -scheme container (VOTRE CARTE + logos) n'est pas un input → pas de rectangle */
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_container.-scheme {
    background: transparent !important;
    border: none !important;
    padding: 6px 0 !important;
    margin: 4px 0 8px !important;
    box-shadow: none !important;
}

/* Les messages d'erreur "Champ obligatoire" sont cachés par défaut.
   Ils apparaissent uniquement quand .IntegratedPayment_error perd la classe .-hide. */
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_error,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_error.-hide {
    display: none !important;
}
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_error:not(.-hide) {
    display: block !important;
    color: #c33 !important;
    font-size: 11px !important;
    margin: -6px 0 8px 2px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

/* Cache le message global d'erreur transaction qui s'affiche par défaut
   ("La transaction n'a pas pu aboutir, et votre carte n'a pas été débitée.") */
.snazzy-checkout-wrapper #payment .payment_box .payplug-error,
.snazzy-checkout-wrapper #payment .payment_box .payplug_error,
.snazzy-checkout-wrapper #payment .payment_box [class*="IntegratedPayment_global_error"],
.snazzy-checkout-wrapper #payment .payment_box [class*="global-error"],
.snazzy-checkout-wrapper #payment .payment_box [class*="transaction-error"],
.snazzy-checkout-wrapper #payment .payment_box .woocommerce-info:not(.show) {
    display: none !important;
}
/* Hide ALL <p> inside form.IntegratedPayment (they're all error messages ou infos
   superflues que PayPlug affiche par défaut). Si un <p> a un contenu légitime,
   il sera dans un div, pas en <p> direct. */
.snazzy-checkout-wrapper #payment .payment_box form.payplug > p,
.snazzy-checkout-wrapper #payment .payment_box form.IntegratedPayment > p,
.snazzy-checkout-wrapper #payment .payment_box form[class*="IntegratedPayment"] > p,
.snazzy-checkout-wrapper #payment .payment_box > p:not(.snazzy-keep),
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment > p {
    display: none !important;
}

/* Lignes d'info "Transaction sécurisée par PayPlug" et "Politique de confidentialité" :
   on cache "Politique de confidentialité" (inutile, il y en a déjà une en footer)
   et on stylise "Transaction sécurisée" discret. */
.snazzy-checkout-wrapper #payment .payment_box .payplug-privacy,
.snazzy-checkout-wrapper #payment .payment_box [class*="privacy-link"],
.snazzy-checkout-wrapper #payment .payment_box a[href*="privacy"],
.snazzy-checkout-wrapper #payment .payment_box a[href*="confidentialite"],
.snazzy-checkout-wrapper #payment .payment_box a[href*="politique"] {
    display: none !important;
}
.snazzy-checkout-wrapper #payment .payment_box .payplug-secure-payment,
.snazzy-checkout-wrapper #payment .payment_box [class*="secure-payment"],
.snazzy-checkout-wrapper #payment .payment_box [class*="payplug-info"] {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    margin: 8px 0 0 !important;
    text-align: center !important;
    font-size: 12px !important;
    color: var(--snazzy-text-muted) !important;
}

/* Checkbox "Enregistrer ma carte bancaire" : pas de fond */
.snazzy-checkout-wrapper #payment .payment_box .payplug-save-card,
.snazzy-checkout-wrapper #payment .payment_box [class*="save-card"],
.snazzy-checkout-wrapper #payment .payment_box label:has(input[type="checkbox"]) {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    margin: 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: var(--snazzy-text) !important;
}

/* Liens */
.snazzy-checkout-wrapper #payment .payment_box a {
    color: var(--snazzy-text) !important;
    text-decoration: underline !important;
}

/* Form rows */
.snazzy-checkout-wrapper #payment .payment_box .form-row {
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
}
.snazzy-checkout-wrapper #payment .payment_box .form-row:last-child { margin-bottom: 0 !important; }
.snazzy-checkout-wrapper #payment .payment_box .form-row label {
    color: var(--snazzy-text) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Erreurs visibles uniquement quand validation échoue */
.snazzy-checkout-wrapper #payment .payment_box .help-block:empty,
.snazzy-checkout-wrapper #payment .payment_box .field-error:empty,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_error.-hide {
    display: none !important;
}
.snazzy-checkout-wrapper #payment .payment_box .help-block,
.snazzy-checkout-wrapper #payment .payment_box .field-error,
.snazzy-checkout-wrapper #payment .payment_box .error-message,
.snazzy-checkout-wrapper #payment .payment_box .IntegratedPayment_error {
    color: #c33 !important;
    font-size: 11px !important;
    margin-top: 4px !important;
    font-weight: 400 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.snazzy-checkout-wrapper #payment .payment_box .form-row:not(.woocommerce-invalid):not(.has-error) .help-block,
.snazzy-checkout-wrapper #payment .payment_box .form-row:not(.woocommerce-invalid):not(.has-error) .field-error {
    display: none !important;
}

/* === HIDE ALL ROGUE BUTTONS INSIDE #payment === */
/* Notre vrai bouton est en dehors de #payment, on peut tout dégager ici */
.snazzy-checkout-wrapper #payment button[type="submit"],
.snazzy-checkout-wrapper #payment input[type="submit"],
.snazzy-checkout-wrapper #payment input[type="button"],
.snazzy-checkout-wrapper #payment > button,
.snazzy-checkout-wrapper #payment > div > button,
.snazzy-checkout-wrapper #payment > .form-row,
.snazzy-checkout-wrapper #payment .form-row.place-order,
.snazzy-checkout-wrapper #payment .place-order,
.snazzy-checkout-wrapper #payment a.button[href*="checkout"],
.snazzy-checkout-wrapper #payment .payment_box button,
.snazzy-checkout-wrapper #payment .payment_box input[type="submit"],
.snazzy-checkout-wrapper #payment .payment_box .button,
.snazzy-checkout-wrapper #payment .payment_box [class*="place-order"],
.snazzy-checkout-wrapper #payment .payment_box .woocommerce-button,
.snazzy-checkout-wrapper #payment .woocommerce-terms-and-conditions-wrapper,
.snazzy-checkout-wrapper button[name="woocommerce_checkout_place_order"]:not(.snazzy-btn-primary),
.snazzy-checkout-wrapper button#place_order:not(.snazzy-btn-primary) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}
/* Privacy policy text in payment area */
.snazzy-payment .woocommerce-privacy-policy-text {
    font-size: 12px !important;
    color: var(--snazzy-text-muted) !important;
    padding: 14px 0 0 !important;
    margin: 14px 0 0 !important;
    border-top: 1px solid #ececec;
}
.snazzy-payment .woocommerce-privacy-policy-text p {
    margin: 0 !important;
    font-size: 12px !important;
    color: var(--snazzy-text-muted) !important;
}

/* ========== SHIPPING METHODS CARDS ========== */
.snazzy-shipping-methods.snazzy-loading { opacity: .5; pointer-events: none; transition: opacity .15s; }
.snazzy-shipping-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.snazzy-shipping-card {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 16px !important;
    border: 1px solid var(--snazzy-border);
    border-radius: var(--snazzy-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    font-size: 14px;
    color: var(--snazzy-text);
    margin: 0 !important;
}
.snazzy-shipping-card:hover {
    border-color: var(--snazzy-text);
}
.snazzy-shipping-card.is-active {
    border-color: var(--snazzy-text);
    box-shadow: inset 0 0 0 1px var(--snazzy-text);
    background: #fafafa;
}
.snazzy-shipping-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--snazzy-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
}
.snazzy-shipping-card.is-active .snazzy-shipping-radio {
    border-color: var(--snazzy-text);
}
.snazzy-shipping-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background .15s;
}
.snazzy-shipping-card.is-active .snazzy-shipping-radio-dot {
    background: var(--snazzy-text);
}
.snazzy-shipping-card-label {
    flex: 1;
    color: var(--snazzy-text);
    font-weight: 500;
}
.snazzy-shipping-card-price {
    color: var(--snazzy-text);
    font-weight: 600;
    margin-left: auto;
}
.snazzy-shipping-card-price bdi { font-weight: 600; }

/* ========== GOOGLE PLACES AUTOCOMPLETE DROPDOWN ========== */
/* La pac-container est rendue par Google Maps directement dans body, donc on doit
   utiliser un z-index très élevé pour qu'elle apparaisse au-dessus de notre wrapper. */
.pac-container {
    z-index: 9999999 !important;
    border-radius: var(--snazzy-radius, 5px) !important;
    border: 1px solid #d9d9d9 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
    margin-top: 4px;
    font-family: var(--snazzy-font, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    background: #fff;
}
.pac-container::before {
    content: 'SUGGESTIONS';
    display: block;
    padding: 12px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7177;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #f0f0f0;
}
.pac-item {
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    border-top: none !important;
    cursor: pointer;
    line-height: 1.4 !important;
}
.pac-item:hover { background: #f5f5f5 !important; }
.pac-item-query {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}
.pac-matched { font-weight: 700 !important; }
.pac-icon { display: none !important; }
.pac-logo:after { display: none !important; }

/* ========== PHOTON AUTOCOMPLETE (free OSM fallback) ========== */
.snazzy-photon-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: var(--snazzy-radius, 5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    z-index: 9999;
    max-height: 360px;
    overflow-y: auto;
}
.snazzy-photon-header {
    padding: 12px 14px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--snazzy-text-muted, #6b7177);
    letter-spacing: 0.04em;
    border-bottom: 1px solid #f0f0f0;
}
.snazzy-photon-item {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--snazzy-text, #1a1a1a);
    cursor: pointer;
    line-height: 1.4;
    border-bottom: 1px solid #f5f5f5;
}
.snazzy-photon-item:last-child { border-bottom: none; }
.snazzy-photon-item:hover { background: #f5f5f5; }
.snazzy-photon-item strong {
    font-weight: 600;
    color: var(--snazzy-text, #1a1a1a);
}
.snazzy-photon-item span {
    color: var(--snazzy-text-muted, #6b7177);
    font-weight: 400;
}

/* ========== BOUTON FINAL ========== */
.snazzy-place-order { margin-top: 24px; }
.snazzy-btn-primary,
.snazzy-btn-primary:hover,
.snazzy-btn-primary:focus,
.snazzy-btn-primary:active {
    width: 100% !important;
    height: 56px !important;
    background: var(--snazzy-accent) !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--snazzy-radius) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: opacity .15s !important;
    font-family: var(--snazzy-font) !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.snazzy-btn-primary:hover { opacity: .9 !important; }
.snazzy-btn-primary:disabled { opacity: .5 !important; cursor: not-allowed; }

.snazzy-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #ececec;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
}
.snazzy-footer a { color: var(--snazzy-text-muted); text-decoration: underline; }

/* ========== ORDER SUMMARY ========== */
.snazzy-summary-list { margin-bottom: 18px; }
.snazzy-summary-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}
.snazzy-summary-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}
.snazzy-summary-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    background: #fff;
}
.snazzy-summary-qty {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #1a1a1a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--snazzy-bg-summary);
}
.snazzy-summary-info { min-width: 0; }
.snazzy-summary-name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.snazzy-summary-variant { font-size: 12px; color: var(--snazzy-text-muted); margin-top: 2px; }
.snazzy-summary-price { text-align: right; font-size: 14px; white-space: nowrap; }
.snazzy-price-strike { display: block; text-decoration: line-through; color: var(--snazzy-text-muted); font-size: 12px; }
.snazzy-price-current { font-weight: 500; }
.snazzy-price-free { font-weight: 600; }

.snazzy-coupon {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin: 14px 0;
}
.snazzy-coupon .snazzy-input { height: 44px !important; background: #fff !important; }
.snazzy-btn-secondary,
.snazzy-btn-secondary:hover,
.snazzy-btn-secondary:focus {
    height: 44px !important;
    padding: 0 18px !important;
    background: #e6e6e6 !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--snazzy-radius) !important;
    color: #8a8f95 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    font-family: var(--snazzy-font) !important;
    transition: background .15s, color .15s !important;
    text-shadow: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.snazzy-btn-secondary:hover { background: #1a1a1a !important; color: #fff !important; }

.snazzy-applied-coupons { margin-bottom: 14px; }
.snazzy-coupon-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a1a1a;
    color: #fff;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 12px;
    margin-right: 6px;
}
.snazzy-coupon-remove {
    background: none !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.snazzy-totals {
    border-top: 1px solid #e3e3e3;
    padding-top: 16px;
}
.snazzy-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 14px;
}
.snazzy-total-grand {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid #e3e3e3;
    font-size: 16px;
}
.snazzy-total-grand strong { font-size: 22px; font-weight: 600; }
.snazzy-currency { font-size: 12px; color: var(--snazzy-text-muted); margin-right: 4px; }
.snazzy-tax-note { font-size: 12px; color: var(--snazzy-text-muted); margin-top: 2px; }
.snazzy-help-icon { color: var(--snazzy-text-muted); font-size: 12px; cursor: help; }

.snazzy-savings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 6px 10px;
    background: #f0e8d8;
    color: #6b5a2a;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.snazzy-savings strong { margin-left: 4px; font-weight: 700; }

/* Hide WC default elements */
.snazzy-checkout-wrapper .woocommerce-form-login-toggle,
.snazzy-checkout-wrapper .woocommerce-form-coupon-toggle,
.snazzy-checkout-wrapper .woocommerce-additional-fields,
.snazzy-checkout-wrapper #order_review_heading,
.snazzy-checkout-wrapper .woocommerce-checkout-review-order-table { display: none !important; }

/* ========== RESPONSIVE ========== */
@media (max-width: 999px) {
    .snazzy-grid {
        grid-template-columns: 1fr;
        background: #fff !important; /* pas de gradient sur mobile */
    }
    .snazzy-summary {
        order: -1;
        border-left: none;
        border-bottom: 1px solid #ececec;
        background: var(--snazzy-bg-summary) !important;
        position: static !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .snazzy-summary-inner,
    .snazzy-main-inner {
        max-width: 600px;
        margin: 0 auto;
        padding: 24px 20px;
        position: static;
    }
    .snazzy-header-inner { padding: 14px 20px; }
}

@media (max-width: 600px) {
    .snazzy-row-2 { grid-template-columns: 1fr; }
    .snazzy-row-2 .snazzy-field { margin-bottom: 10px; }
}

/* ================================================================== */
/* ============== CART PAGE - Shopify-style cart =================== */
/* ================================================================== */

.snazzy-cart-page {
    padding: 40px 32px 80px;
    background: #fff;
    min-height: calc(100vh - 100px);
}
.snazzy-cart-container {
    max-width: 720px;
    margin: 0 auto;
}

/* Title */
.snazzy-cart-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin: 0 0 24px !important;
    color: var(--snazzy-text) !important;
    text-align: center;
    font-family: var(--snazzy-font) !important;
    line-height: 1.2 !important;
}

/* Free shipping progress */
.snazzy-progress {
    margin-bottom: 28px;
}
.snazzy-progress-label {
    font-size: 13px;
    color: var(--snazzy-text);
    text-align: center;
    margin-bottom: 8px;
}
.snazzy-progress-label strong { font-weight: 600; }
.snazzy-progress-bar {
    height: 4px;
    background: #ececec;
    border-radius: 2px;
    overflow: hidden;
}
.snazzy-progress-fill {
    height: 100%;
    background: var(--snazzy-text);
    border-radius: 2px;
    transition: width .4s ease;
}

/* Cart items */
.snazzy-cart-items { margin-bottom: 8px; }
.snazzy-cart-item {
    display: grid;
    grid-template-columns: 90px 1fr auto auto;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    border-top: 1px solid #ececec;
    transition: opacity .2s;
}
.snazzy-cart-item.snazzy-loading { opacity: .5; pointer-events: none; }
.snazzy-cart-item.snazzy-removing { opacity: 0; }
.snazzy-cart-item:first-child { border-top: none; padding-top: 8px; }

.snazzy-cart-item-thumb {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #ececec;
}
.snazzy-cart-item-thumb img,
.snazzy-cart-item-thumb a {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.snazzy-cart-item-info { min-width: 0; }
.snazzy-cart-item-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--snazzy-text);
    margin-bottom: 4px;
    line-height: 1.3;
}
.snazzy-cart-item-name a {
    color: var(--snazzy-text) !important;
    text-decoration: none !important;
}
.snazzy-cart-item-unitprice {
    font-size: 13px;
    color: var(--snazzy-text);
    margin-bottom: 4px;
}
.snazzy-cart-item-unitprice .snazzy-strike {
    text-decoration: line-through;
    color: var(--snazzy-text-muted);
    margin-right: 6px;
    font-size: 12px;
}
.snazzy-cart-item-meta {
    font-size: 12px;
    color: var(--snazzy-text-muted);
    margin-top: 2px;
}

/* Quantity stepper */
.snazzy-cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.snazzy-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--snazzy-border);
    border-radius: var(--snazzy-radius);
    background: #fff;
    overflow: hidden;
}
.snazzy-qty-btn,
.snazzy-qty-btn:hover,
.snazzy-qty-btn:focus,
.snazzy-qty-btn:active {
    width: 36px !important;
    height: 40px !important;
    background: #fff !important;
    background-image: none !important;
    border: none !important;
    color: var(--snazzy-text) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    cursor: pointer;
    line-height: 1 !important;
    padding: 0 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-family: var(--snazzy-font) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.snazzy-qty-btn:hover { background: #f5f5f5 !important; }
.snazzy-qty-input {
    width: 44px !important;
    height: 40px !important;
    border: none !important;
    background: #fff !important;
    text-align: center !important;
    font-size: 14px !important;
    color: var(--snazzy-text) !important;
    font-family: var(--snazzy-font) !important;
    padding: 0 !important;
    -moz-appearance: textfield;
    outline: none !important;
    box-shadow: none !important;
}
.snazzy-qty-input::-webkit-outer-spin-button,
.snazzy-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.snazzy-cart-remove,
.snazzy-cart-remove:hover,
.snazzy-cart-remove:focus,
.snazzy-cart-remove:active {
    background: none !important;
    background-image: none !important;
    border: none !important;
    color: var(--snazzy-text-muted) !important;
    cursor: pointer;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color .15s !important;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1 !important;
}
.snazzy-cart-remove:hover { color: var(--snazzy-text) !important; }

.snazzy-cart-item-price {
    text-align: right;
    font-size: 15px;
    color: var(--snazzy-text);
    white-space: nowrap;
}
.snazzy-cart-item-price .snazzy-strike {
    display: block;
    text-decoration: line-through;
    color: var(--snazzy-text-muted);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 2px;
}
.snazzy-cart-item-price strong { font-weight: 600; }

/* Divider + shipping note */
.snazzy-cart-divider {
    border-top: 1px solid #ececec;
    margin: 8px 0 24px;
}
.snazzy-cart-shipping-note {
    text-align: center;
    font-size: 13px;
    color: var(--snazzy-text-muted);
    margin-bottom: 32px;
}
.snazzy-cart-shipping-note a {
    color: var(--snazzy-text) !important;
    text-decoration: underline !important;
}

/* Cart footer */
.snazzy-cart-footer {
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
}
.snazzy-cart-subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--snazzy-text);
}
.snazzy-cart-subtotal strong {
    font-size: 22px;
    font-weight: 600;
}

.snazzy-btn-checkout,
.snazzy-btn-checkout:hover,
.snazzy-btn-checkout:focus,
.snazzy-btn-checkout:active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 56px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: var(--snazzy-font) !important;
    color: #fff !important;
    background: var(--snazzy-accent) !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--snazzy-radius) !important;
    margin-bottom: 14px;
    box-shadow: none !important;
    text-shadow: none !important;
    line-height: 1 !important;
    cursor: pointer;
}
.snazzy-btn-checkout:hover { opacity: .9 !important; }

.snazzy-cart-continue,
.snazzy-cart-continue:hover {
    display: inline-block;
    font-size: 14px !important;
    color: var(--snazzy-text) !important;
    text-decoration: none !important;
    padding: 8px 0;
}
.snazzy-cart-continue:hover { text-decoration: underline !important; }
.snazzy-cart-continue span { margin-left: 4px; }

/* Empty cart */
.snazzy-cart-empty {
    text-align: center;
    padding: 60px 20px;
}
.snazzy-cart-empty-icon {
    color: var(--snazzy-text-muted);
    margin-bottom: 16px;
}
.snazzy-cart-empty h2 {
    font-size: 22px !important;
    margin: 0 0 8px !important;
}
.snazzy-cart-empty p {
    color: var(--snazzy-text-muted);
    margin: 0 0 24px;
}
.snazzy-btn-inline {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    padding: 0 32px !important;
    text-decoration: none !important;
}

/* ========== CART RESPONSIVE ========== */
@media (max-width: 720px) {
    .snazzy-cart-page { padding: 24px 16px 60px; }
    .snazzy-cart-title { font-size: 20px !important; }
    .snazzy-cart-item {
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "thumb info"
            "thumb controls"
            "thumb price";
        gap: 6px 14px;
        padding: 18px 0;
    }
    .snazzy-cart-item-thumb { grid-area: thumb; width: 72px; height: 72px; align-self: start; }
    .snazzy-cart-item-info { grid-area: info; }
    .snazzy-cart-item-controls { grid-area: controls; justify-content: flex-start; margin-top: 4px; }
    .snazzy-cart-item-price { grid-area: price; text-align: left; margin-top: 4px; }
}