/*!
 * 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 ========== */
html, body.snazzy-standalone {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
}
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-accent: #000000;
    --snazzy-text: #1a1a1a;
    --snazzy-text-muted: #6b7177;
    --snazzy-border: #d9d9d9;
    --snazzy-border-strong: #1a1a1a;
    --snazzy-bg: #ffffff;
    --snazzy-bg-summary: #f5f5f5;
    --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;
    background: #fff;
    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 : fond gradient 50/50) ========== */
.snazzy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    background: linear-gradient(to right, #fff 50%, var(--snazzy-bg-summary) 50%);
    /* 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;
}
.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; }
}
