*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }

button { cursor: pointer; font-family: inherit; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

a { text-decoration: none; color: inherit; }

input, select, textarea { font-family: inherit; }

:root { --black: #0b1117; --white: #ffffff; --text: #1a1a1a; --muted: #8a8a8a; --subtle: #f7f7f7; --border: #e8e8e8; --green: #39b56b; --red: #e53935; --radius: 10px; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --shadow-sm: 0 2px 12px rgba(0,0,0,0.06); --shadow-md: 0 8px 32px rgba(0,0,0,0.10); }

html { scroll-behavior: smooth; }

body { font-family: Manrope, -apple-system, sans-serif; background: #f5f5f3; color: var(--text); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; }

body#checkout #header { margin: 0px; padding: 0px; background: var(--black) !important; height: 60px !important; display: flex !important; align-items: center !important; }

.header-inner { max-width: 1180px; margin: 0px auto; padding: 0px 40px; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }

.header-back { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }

.header-back:hover { color: rgba(255, 255, 255, 0.8); }

.header-back svg { transition: transform 0.2s var(--ease); }

.header-back:hover svg { transform: translateX(-3px); }

.header-logo { font-size: 12.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white); text-align: center; white-space: nowrap; }

.header-logo sup { font-size: 7px; font-weight: 600; letter-spacing: 0px; }

.header-secure { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, 0.35); letter-spacing: 0.06em; text-transform: uppercase; }

.header-secure svg { opacity: 0.4; }

.progress-bar { background: var(--white); border-bottom: 1px solid var(--border); }

.progress-inner { max-width: 1180px; margin: 0px auto; padding: 0px 40px; display: flex; align-items: center; height: 52px; gap: 0px; }

.progress-step { display: flex; align-items: center; gap: 10px; flex: 1 1 0%; position: relative; }

.progress-step:not(:last-child)::after { content: ""; position: absolute; right: 0px; width: calc(50% - 60px); height: 1px; background: var(--border); top: 50%; transform: translateY(-50%); }

.progress-step:not(:first-child)::before { content: ""; position: absolute; left: 0px; width: calc(50% - 60px); height: 1px; background: var(--border); top: 50%; transform: translateY(-50%); }

.progress-step.done::after, .progress-step.done::before, .progress-step.active::before { background: var(--black); }

.progress-step-content { display: flex; align-items: center; gap: 9px; margin: 0px auto; position: relative; z-index: 1; }

.step-circle { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--muted); background: var(--white); transition: all 0.3s var(--ease); flex-shrink: 0; }

.progress-step.done .step-circle { background: var(--black); border-color: var(--black); color: var(--white); }

.progress-step.active .step-circle { background: var(--black); border-color: var(--black); color: var(--white); box-shadow: rgba(11, 17, 23, 0.1) 0px 0px 0px 4px; }

.step-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.progress-step.active .step-label { color: var(--black); }

.progress-step.done .step-label { color: var(--black); }

.progress-step:not(.done) .step-check { display: none; }

.progress-step.done .step-number { display: none; }

.checkout-wrap { max-width: 1180px; margin: 0px auto; padding: 40px 40px 80px; display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }

.form-col { display: flex; flex-direction: column; gap: 4px; min-width: 0 !important; }

.section-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.3s var(--ease); }

.section-card:focus-within { box-shadow: var(--shadow-md); }

.section-head { background: var(--black); padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; }

.section-head-left { display: flex; align-items: center; gap: 14px; }

.section-num { font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); line-height: 1; }

.section-divider-v { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.12); }

.section-title { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); }

.section-edit { font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; transition: 0.2s; }

.section-edit:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }

.section-done-badge { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--green); }

.section-done-badge svg { flex-shrink: 0; }

.section-body { padding: 28px; }

.login-strip { background: rgba(11, 17, 23, 0.03); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }

.login-strip-text { font-size: 12.5px; color: var(--muted); font-weight: 400; }

.login-strip-text strong { color: var(--text); font-weight: 600; }

.login-link { font-size: 12px; font-weight: 700; color: var(--black); text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s; }

.login-link:hover { opacity: 0.55; }

.form-grid { display: grid; gap: 16px; }

.form-grid-2 { grid-template-columns: 1fr 1fr; }

.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.field { position: relative; }

.field label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 500; color: var(--muted); pointer-events: none; transition: all 0.18s var(--ease); background: var(--white); padding: 0px 4px; line-height: 1; }

.field input:focus ~ label, .field input:not(:placeholder-shown) ~ label, .field select:focus ~ label, .field select.filled ~ label { top: 0px; font-size: 10.5px; font-weight: 700; color: var(--black); letter-spacing: 0.04em; }

.field input, .field select { width: 100%; height: 52px; border: 1.5px solid var(--border); border-radius: 8px; padding: 0px 14px; font-size: 14px; font-weight: 500; color: var(--text); background: var(--white); outline: none; transition: border-color 0.2s, box-shadow 0.2s; appearance: none; }

.field input::placeholder { color: transparent; }

.field input:focus, .field select:focus { border-color: var(--black); box-shadow: rgba(11, 17, 23, 0.06) 0px 0px 0px 3px; }

.field input.valid { border-color: var(--green); }

.field input.valid ~ label { color: var(--green); }

.field select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

.field-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.field-valid-check { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--green); opacity: 0; transition: opacity 0.2s; }

.field input.valid ~ .field-valid-check { opacity: 1; }

.field-phone { display: flex; gap: 10px; }

.phone-prefix { width: 90px; flex-shrink: 0; }

.section-sep { display: flex; align-items: center; gap: 14px; margin: 20px 0px; }

.section-sep-line { flex: 1 1 0%; height: 1px; background: var(--border); }

.section-sep-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }

.check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }

.check-row input[type="checkbox"] { appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 4px; flex-shrink: 0; margin-top: 1px; cursor: pointer; transition: 0.15s; background: var(--white); position: relative; }

.check-row input[type="checkbox"]:checked { background: var(--black); border-color: var(--black); }

.check-row input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 8px; height: 12px; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-left-width: medium; border-left-style: none; border-left-color: currentcolor; transform: rotate(45deg) scaleY(0.9); }

.check-label { font-size: 12.5px; color: var(--muted); font-weight: 400; line-height: 1.5; cursor: pointer; }

.shipping-options { display: flex; flex-direction: column; gap: 10px; }

.shipping-option { display: flex; align-items: center; gap: 16px; border: 1.5px solid var(--border); border-radius: 10px; padding: 16px 20px; cursor: pointer; transition: all 0.2s var(--ease); position: relative; overflow: hidden; }

.shipping-option:hover { border-color: rgb(187, 187, 187); }

.shipping-option.selected, .shipping-option:has(input[type="radio"]:checked) { border-color: var(--black); background: rgb(248, 249, 251); }

.shipping-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: 0.2s; }

.shipping-option.selected .custom-radio, .shipping-option:has(input[type="radio"]:checked) .custom-radio { border-color: var(--black) !important; }

.shipping-radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--black); transform: scale(0); transition: transform 0.2s var(--ease); }

.shipping-option.selected .custom-radio span, .shipping-radio .custom-radio input[type="radio"]:checked + span { transform: scale(1) !important; }

.shipping-icon { width: 40px; height: 40px; background: var(--subtle); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.shipping-info { flex: 1 1 0%; }

.shipping-name { font-size: 13.5px; font-weight: 700; color: var(--black); letter-spacing: -0.01em; }

.shipping-desc { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }

.shipping-price { font-size: 14px; font-weight: 800; color: var(--black); letter-spacing: -0.02em; }

.shipping-price.free { color: var(--green); }

.shipping-badge { position: absolute; top: 10px; right: 10px; background: var(--black); color: var(--white); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; }

.payment-methods { display: flex; gap: 8px; margin-bottom: 20px; }

.pm-tab { flex: 1 1 0%; height: 52px; border: 1.5px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--muted); cursor: pointer; transition: 0.2s; letter-spacing: 0.02em; }

.pm-tab:hover { border-color: rgb(187, 187, 187); color: var(--text); }

.pm-tab.active { border-color: var(--black); color: var(--black); background: var(--subtle); }

.pm-tab svg { flex-shrink: 0; }

.card-preview { background: linear-gradient(135deg, rgb(11, 17, 23) 0%, rgb(29, 37, 53) 60%, rgb(15, 30, 47) 100%); border-radius: 14px; padding: 22px 24px; margin-bottom: 20px; position: relative; overflow: hidden; height: 145px; }

.card-preview::before { content: ""; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); }

.card-preview::after { content: ""; position: absolute; bottom: -60px; left: 20px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); }

.card-chip { width: 32px; height: 24px; background: linear-gradient(135deg, rgb(212, 168, 67) 0%, rgb(240, 200, 80) 50%, rgb(212, 168, 67) 100%); border-radius: 5px; margin-bottom: 18px; position: relative; z-index: 1; }

.card-chip::before { content: ""; position: absolute; top: 50%; left: 0px; right: 0px; height: 1px; background: rgba(0, 0, 0, 0.2); transform: translateY(-50%); }

.card-chip::after { content: ""; position: absolute; left: 50%; top: 0px; bottom: 0px; width: 1px; background: rgba(0, 0, 0, 0.2); transform: translateX(-50%); }

.card-number-display { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.22em; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }

.card-bottom { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px; position: relative; z-index: 1; }

.card-holder-label { font-size: 8px; font-weight: 600; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.3); text-transform: uppercase; margin-bottom: 3px; }

.card-holder-name { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

.card-expiry-label { font-size: 8px; font-weight: 600; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.3); text-transform: uppercase; text-align: right; margin-bottom: 3px; }

.card-expiry-val { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.08em; }

.card-network { position: absolute; bottom: 18px; right: 20px; display: flex; }

.card-circle { width: 30px; height: 30px; border-radius: 50%; }

.card-circle-1 { background: rgba(235, 50, 35, 0.85); margin-right: -10px; }

.card-circle-2 { background: rgba(255, 160, 0, 0.85); }

.card-inputs { display: flex; flex-direction: column; gap: 14px; }

.card-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.summary-col { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; }

.summary-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }

.summary-toggle { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); cursor: pointer; }

.summary-toggle-left { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--black); letter-spacing: 0.04em; }

.summary-toggle-right { font-size: 13px; font-weight: 800; color: var(--black); letter-spacing: -0.02em; }

.summary-items { padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--border); }

.summary-item { display: flex; gap: 12px; align-items: center; }

.summary-item-thumb { width: 52px; height: 64px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; }

.si-white { background: linear-gradient(145deg, rgb(240, 240, 240), rgb(228, 228, 228)); }

.si-beige { background: linear-gradient(145deg, rgb(233, 221, 200), rgb(212, 196, 160)); }

.summary-item-qty { position: absolute; top: -6px; right: -6px; background: var(--black); color: var(--white); width: 18px; height: 18px; border-radius: 50%; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.summary-item-info { flex: 1 1 0%; min-width: 0px; }

.summary-item-name { font-size: 12.5px; font-weight: 700; color: var(--black); line-height: 1.2; letter-spacing: -0.01em; }

.summary-item-variant { font-size: 11px; color: var(--muted); margin-top: 3px; font-weight: 400; }

.summary-item-price { font-size: 13px; font-weight: 800; color: var(--black); letter-spacing: -0.02em; flex-shrink: 0; }

.promo-row { padding: 14px 22px; border-bottom: 1px solid var(--border); }

.promo-form { display: flex; gap: 8px; }

.promo-input { flex: 1 1 0%; height: 40px; border: 1.5px solid var(--border); border-radius: 7px; padding: 0px 13px; font-size: 12.5px; font-weight: 500; color: var(--text); outline: none; transition: border-color 0.2s; }

.promo-input:focus { border-color: var(--black); }

.promo-input::placeholder { color: var(--muted); }

.promo-btn { height: 40px; padding: 0px 16px; background: var(--subtle); border: 1.5px solid var(--border); border-radius: 7px; font-size: 11.5px; font-weight: 700; color: var(--text); letter-spacing: 0.04em; transition: 0.2s; }

.promo-btn:hover { background: var(--border); }

.summary-totals { padding: 16px 22px; display: flex; flex-direction: column; gap: 8px; }

.total-line { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }

.total-line-key { color: var(--muted); }

.total-line-val { font-weight: 700; color: var(--black); }

.total-line-val.green { color: var(--green); }

.total-final { display: flex; justify-content: space-between; align-items: flex-end; padding: 16px 0px 0px; margin-top: 8px; border-top: 1.5px solid var(--black); }

.total-final-key { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--black); }

.total-final-sub { font-size: 10.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }

.total-final-val { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: var(--black); line-height: 1; }

.cta-block { padding: 16px 22px 22px; }

.btn-pay { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; background: var(--black); color: var(--white); border-radius: 10px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; transition: all 0.25s var(--ease); position: relative; overflow: hidden; }

.btn-pay::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 100%); pointer-events: none; }

.btn-pay:hover { background: rgb(29, 37, 53); box-shadow: rgba(11, 17, 23, 0.28) 0px 12px 32px; transform: translateY(-1px); }

.btn-pay:active { transform: translateY(0px); box-shadow: none; }

.btn-pay-arrow { transition: transform 0.25s var(--ease); flex-shrink: 0; }

.btn-pay:hover .btn-pay-arrow { transform: translateX(4px); }

.cta-secure { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; font-size: 10.5px; font-weight: 500; color: var(--muted); }

.trust-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }

.trust-item { display: flex; align-items: center; gap: 12px; }

.trust-icon { width: 36px; height: 36px; background: var(--subtle); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.trust-title { font-size: 12px; font-weight: 700; color: var(--black); letter-spacing: -0.01em; }

.trust-desc { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; }

.express-strip { border: 1.5px solid var(--border); border-radius: 10px; padding: 16px 20px; margin-bottom: 4px; }

.express-label { text-align: center; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 12px; }

.express-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Native Express Button Overrides to style real module buttons beautifully */
#tc-paypal-express-checkout,
#mollie-applepay-direct-button,
#hook_displayPersonalInformationTop .paypal-button,
#hook_displayPersonalInformationTop div[paypal-bnpl-signup],
.express-btns > div,
.express-btns > div iframe,
#tc-paypal-express-checkout iframe,
#mollie-applepay-direct-button iframe,
#hook_displayPersonalInformationTop iframe {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.express-btn { height: 46px; border: 1.5px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; transition: 0.2s; }

.express-btn:hover { border-color: rgb(187, 187, 187); background: var(--subtle); }

.express-btn.apple { background: var(--black); color: var(--white); border-color: var(--black); }

.express-btn.apple:hover { background: rgb(29, 37, 53); }

.paypal-wordmark { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }

.paypal-wordmark .pp-dark { color: rgb(0, 48, 135); }

.paypal-wordmark .pp-light { color: rgb(0, 156, 222); }

.or-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0px 24px; }

.or-line { flex: 1 1 0%; height: 1px; background: var(--border); }

.or-text { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }

#footer { background: var(--black); }

.footer-checkout { max-width: 1180px; margin: 0px auto; padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; }

.footer-checkout-logo { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }

.footer-checkout-links { display: flex; gap: 20px; }

.footer-checkout-links a { font-size: 11px; color: rgba(255, 255, 255, 0.25); transition: color 0.2s; }

.footer-checkout-links a:hover { color: rgba(255, 255, 255, 0.6); }

.footer-checkout-secure { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: rgba(255, 255, 255, 0.25); }

*, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; }

button { cursor: pointer; font-family: inherit; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

a { text-decoration: none; color: inherit; }

input { font-family: inherit; }

:root { --black: #0b1117; --white: #ffffff; --text: #1a1a1a; --muted: #888; --subtle: #f5f5f5; --border: #e8e8e8; --green: #2a7d4f; --red: #d32f2f; --radius: 12px; --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); }

html { scroll-behavior: smooth; }

body { font-family: Manrope, -apple-system, sans-serif; background: rgb(245, 245, 243); color: var(--text); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; }

#header { position: sticky; top: 0px; z-index: 200; background: var(--white); border-bottom: 1px solid var(--border); height: 64px; display: flex; align-items: center; transition: box-shadow 0.3s var(--ease); }

#header.scrolled { box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px; }

.header-inner { max-width: 1280px; margin: 0px auto; padding: 0px 40px; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }

.header-nav { display: flex; align-items: center; gap: 30px; }

.header-nav a { font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgb(122, 122, 122); transition: color 0.2s; white-space: nowrap; }

.header-nav a:hover { color: var(--black); }

.header-logo { font-size: 12px; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--black); white-space: nowrap; text-align: center; padding: 0px 24px; }

.header-actions { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }

.h-divider { width: 1px; height: 14px; background: rgb(224, 224, 224); }

.hbtn { display: flex; align-items: center; gap: 5px; color: rgb(102, 102, 102); font-size: 10px; font-weight: 600; letter-spacing: 0.07em; transition: color 0.2s; white-space: nowrap; }

.hbtn:hover { color: var(--black); }

.hbtn svg { flex-shrink: 0; }

.cart-btn { position: relative; display: flex; align-items: center; color: var(--black); transition: opacity 0.2s; }

.cart-btn:hover { opacity: 0.55; }

.cart-badge { position: absolute; top: -7px; right: -8px; width: 16px; height: 16px; background: var(--red); color: var(--white); border-radius: 50%; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; }

.page-wrap { max-width: 1280px; margin: 0px auto; padding: 52px 40px 96px; }

.page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 36px; }

.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; color: var(--black); font-family: 'Manrope', -apple-system, sans-serif !important; text-transform: none !important; }

.page-count { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; }

.cart-grid { display: grid; grid-template-columns: 1fr 372px; gap: 24px; align-items: start; }

.cart-col { display: flex; flex-direction: column; gap: 0px; background: var(--white); border-radius: var(--radius); overflow: hidden; }

.cart-item { display: grid; grid-template-columns: 92px 1fr; gap: 20px; padding: 22px 24px; position: relative; transition: background 0.18s; }

.cart-item + .cart-item { border-top: 1px solid var(--border); }

.cart-item:hover { background: rgb(250, 250, 250); }

.item-thumb { width: 92px; height: 112px; border-radius: 8px; overflow: hidden; flex-shrink: 0; position: relative; }

.item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.item-thumb-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 0.4s var(--ease); }

.cart-item:hover .item-thumb-inner { transform: scale(1.05); }

.shirt-white { background: linear-gradient(150deg, rgb(242, 242, 242) 0%, rgb(220, 220, 220) 100%); }

.shirt-beige { background: linear-gradient(150deg, rgb(234, 217, 190) 0%, rgb(205, 184, 144) 100%); }

.shirt-blue { background: linear-gradient(150deg, rgb(204, 218, 236) 0%, rgb(150, 180, 211) 100%); }

.item-content { display: flex; flex-direction: column; height: 100%; }

.item-top { display: flex; justify-content: space-between; align-items: flex-start; }

.item-name { font-size: 14px; font-weight: 700; color: var(--black); letter-spacing: -0.02em; line-height: 1.25; }

.item-brand { font-size: 10px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }

.item-remove { color: rgb(204, 204, 204); padding: 3px; margin: -3px -3px 0px 4px; border-radius: 5px; transition: 0.18s; opacity: 0; flex-shrink: 0; }

.cart-item:hover .item-remove { opacity: 1; }

.item-remove:hover { color: var(--red); background: rgb(254, 242, 242); }

.item-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 11px; }

.item-tag { display: inline-block; background: rgb(242, 242, 242); border-radius: 4px; padding: 3px 8px; font-size: 10px; font-weight: 600; color: rgb(85, 85, 85); letter-spacing: 0.03em; }

.item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; }

.stepper { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; height: 34px; transition: border-color 0.2s; }

.stepper:focus-within { border-color: rgb(170, 170, 170); }

.step-btn { width: 34px; height: 100%; color: var(--text); font-size: 17px; font-weight: 300; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }

.step-btn:hover { background: rgb(243, 243, 243); }

.step-btn:active { background: var(--border); }

.step-val { width: 34px; text-align: center; font-size: 13px; font-weight: 700; color: var(--black); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; background: none; }

.item-price-block { text-align: right; }

.item-price { font-size: 17px; font-weight: 800; color: var(--black); letter-spacing: -0.04em; }

.item-unit-price { font-size: 10.5px; color: var(--muted); margin-top: 2px; }

.shipping-bar { border-top: 1px solid var(--border); padding: 15px 24px; display: flex; align-items: center; gap: 14px; }

.shipping-icon { flex-shrink: 0; color: var(--muted); }

.shipping-text { font-size: 11.5px; font-weight: 500; color: rgb(85, 85, 85); white-space: nowrap; }

.shipping-text strong { color: var(--black); font-weight: 700; }

.shipping-track { flex: 1 1 0%; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }

.shipping-fill { height: 100%; width: 46%; background: var(--black); border-radius: 2px; }

.summary-col { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 10px; }

.summary-card { background: var(--white); border-radius: var(--radius); overflow: hidden; }

.sc-section { padding: 22px; }

.sc-section + .sc-section { border-top: 1px solid var(--border); }

.sc-title { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgb(170, 170, 170); margin-bottom: 16px; }

.summary-line { display: flex; justify-content: space-between; align-items: center; padding: 9px 0px; font-size: 13px; }

.summary-line + .summary-line { border-top: 1px solid rgb(240, 240, 240); }

.sl-key { color: var(--muted); font-weight: 400; }

.sl-val { color: var(--text); font-weight: 600; }

.sl-val.green { color: var(--green); }

.summary-total { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 16px; padding-top: 16px; border-top: 1.5px solid var(--black); }

.st-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--black); }

.st-sub { font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 3px; }

.st-amount { font-size: 28px; font-weight: 800; letter-spacing: -0.05em; color: var(--black); line-height: 1; }

.promo-form { display: flex; gap: 8px; }

.promo-input { flex: 1 1 0%; height: 40px; border: 1.5px solid var(--border); border-radius: 8px; padding: 0px 12px; font-size: 12.5px; color: var(--text); background: none; transition: border-color 0.2s; }

.promo-input:focus { outline: none; border-color: rgb(153, 153, 153); }

.promo-input::placeholder { color: rgb(192, 192, 192); }

.promo-btn { height: 40px; padding: 0px 16px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--black); letter-spacing: 0.05em; transition: 0.2s; white-space: nowrap; }

.promo-btn:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.btn-checkout { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; background: var(--black); color: var(--white); border-radius: 10px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; transition: all 0.25s var(--ease); white-space: nowrap; }

.btn-checkout:hover { background: rgb(28, 37, 51); box-shadow: rgba(11, 17, 23, 0.22) 0px 10px 28px; transform: translateY(-1px); }

.btn-checkout:active { transform: none; box-shadow: none; }

.btn-arrow { transition: transform 0.25s var(--ease); }

.btn-checkout:hover .btn-arrow { transform: translateX(4px); }

.secure-row { display: flex; align-items: center; justify-content: center; gap: 5px; padding-top: 13px; font-size: 10.5px; color: rgb(187, 187, 187); font-weight: 500; }

.continue-link { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 16px 22px; border-top: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: 0.03em; transition: color 0.2s; }

.continue-link:hover { color: var(--black); }

.continue-link svg { transition: transform 0.2s var(--ease); }

.continue-link:hover svg { transform: translateX(-3px); }

.trust-list { display: flex; flex-direction: column; gap: 2px; }

.trust-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--white); border-radius: 8px; font-size: 11.5px; font-weight: 500; color: rgb(85, 85, 85); }

.trust-item svg { flex-shrink: 0; }

#footer { background: var(--black); color: rgba(255, 255, 255, 0.65); }

.footer-top { max-width: 1280px; margin: 0px auto; padding: 56px 40px 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap: 40px; }

.footer-brand { display: flex; flex-direction: column; gap: 14px; }

.footer-logo { font-size: 12px; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); }

.footer-tagline { font-size: 11.5px; color: rgba(255, 255, 255, 0.38); font-weight: 400; line-height: 1.65; max-width: 180px; }

.footer-col-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.25); margin-bottom: 14px; }

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }

.footer-links a { font-size: 12.5px; font-weight: 400; color: rgba(255, 255, 255, 0.5); transition: color 0.2s; }

.footer-links a:hover { color: var(--white); }

.footer-newsletter-title { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 12px; letter-spacing: -0.01em; }

.newsletter-form { display: flex; flex-direction: column; gap: 8px; }

.newsletter-input { width: 100%; height: 42px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0px 14px; color: var(--white); font-size: 12.5px; transition: border-color 0.2s; }

.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.25); }

.newsletter-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.28); }

.newsletter-btn { height: 42px; background: var(--white); color: var(--black); border-radius: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; transition: background 0.2s, transform 0.2s; }

.newsletter-btn:hover { background: rgb(240, 240, 240); transform: translateY(-1px); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.07); }

.footer-bottom-inner { max-width: 1280px; margin: 0px auto; padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; }

.footer-copy { font-size: 11px; color: rgba(255, 255, 255, 0.2); letter-spacing: 0.04em; }

.footer-legal { display: flex; gap: 20px; }

.footer-legal a { transition: all 0.25s var(--ease); white-space: nowrap; }

.btn-checkout:hover { background: rgb(28, 37, 51); box-shadow: rgba(11, 17, 23, 0.22) 0px 10px 28px; transform: translateY(-1px); }

.btn-checkout:active { transform: none; box-shadow: none; }

.btn-arrow { transition: transform 0.25s var(--ease); }

.btn-checkout:hover .btn-arrow { transform: translateX(4px); }

.secure-row { display: flex; align-items: center; justify-content: center; gap: 5px; padding-top: 13px; font-size: 10.5px; color: rgb(187, 187, 187); font-weight: 500; }

.continue-link { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 16px 22px; border-top: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: 0.03em; transition: color 0.2s; }

.continue-link:hover { color: var(--black); }

.continue-link svg { transition: transform 0.2s var(--ease); }

.continue-link:hover svg { transform: translateX(-3px); }

.trust-list { display: flex; flex-direction: column; gap: 2px; }

.trust-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--white); border-radius: 8px; font-size: 11.5px; font-weight: 500; color: rgb(85, 85, 85); }

.trust-item svg { flex-shrink: 0; }

#footer { background: var(--black); color: rgba(255, 255, 255, 0.65); }

.footer-top { max-width: 1280px; margin: 0px auto; padding: 56px 40px 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap: 40px; }

.footer-brand { display: flex; flex-direction: column; gap: 14px; }

.footer-logo { font-size: 12px; font-weight: 300; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white); }

.footer-tagline { font-size: 11.5px; color: rgba(255, 255, 255, 0.38); font-weight: 400; line-height: 1.65; max-width: 180px; }

.footer-col-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.25); margin-bottom: 14px; }

.footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }

.footer-links a { font-size: 12.5px; font-weight: 400; color: rgba(255, 255, 255, 0.5); transition: color 0.2s; }

.footer-links a:hover { color: var(--white); }

.footer-newsletter-title { font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 12px; letter-spacing: -0.01em; }

.newsletter-form { display: flex; flex-direction: column; gap: 8px; }

.newsletter-input { width: 100%; height: 42px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0px 14px; color: var(--white); font-size: 12.5px; transition: border-color 0.2s; }

.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.25); }

.newsletter-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.28); }

.newsletter-btn { height: 42px; background: var(--white); color: var(--black); border-radius: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; transition: background 0.2s, transform 0.2s; }

.newsletter-btn:hover { background: rgb(240, 240, 240); transform: translateY(-1px); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.07); }

.footer-bottom-inner { max-width: 1280px; margin: 0px auto; padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; }

.footer-copy { font-size: 11px; color: rgba(255, 255, 255, 0.2); letter-spacing: 0.04em; }

.footer-legal { display: flex; gap: 20px; }

.footer-legal a { font-size: 11px; color: rgba(255, 255, 255, 0.2); transition: color 0.2s; }

.footer-legal a:hover { color: rgba(255, 255, 255, 0.55); }

#thecheckout-shipping .shipping-radio .custom-radio input[type="radio"] { opacity: 0; position: absolute; width: 100%; height: 100%; cursor: pointer; }

#checkout #thecheckout-shipping .shipping-card-price.free .carrier-price, #checkout #thecheckout-shipping .shipping-card-price.free .carrier-price-with-tax-formatted, #checkout #thecheckout-shipping .delivery-option-price.free .carrier-price-with-tax-formatted { color: var(--green) !important; }

#checkout .form-grid .field input.valid, #checkout .form-grid .field select.valid { border-color: var(--green) !important; }

#checkout .form-grid .field input.valid ~ label, #checkout .form-grid .field select.valid ~ label { color: var(--green) !important; }

#checkout .has-float-label :not(:placeholder-shown):not(:focus) { border-color: var(--border) !important; }

#checkout .has-float-label input.valid:not(:placeholder-shown):not(:focus), #checkout .has-float-label select.valid:not(:placeholder-shown):not(:focus) { border-color: var(--green) !important; }

.payment-secure-notice { margin-top: 18px; display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: color-mix(in srgb, var(--green) 6%, transparent); border: 1px solid color-mix(in srgb, var(--green) 20%, transparent); border-radius: 8px; }

.payment-secure-notice svg { stroke: var(--green); flex-shrink: 0; }

.payment-secure-notice-text { font-size: 11.5px; color: var(--green); font-weight: 600; line-height: 1.4; }

#checkout .form-grid .field label { color: var(--muted) !important; }

#checkout .field input:focus ~ label, #checkout .field input:not(:placeholder-shown) ~ label, #checkout .field select:focus ~ label, #checkout .field select.filled ~ label { color: var(--black) !important; }

#checkout .form-grid .field input.valid ~ label, #checkout .form-grid .field select.valid ~ label { color: var(--green) !important; }




#checkout section#checkout-payment-step [data-payment-module="mollie"].selected > .additional-information { margin-top: 15px; margin-left: 0 !important; display: block !important; opacity: 1 !important; height: auto !important; width: 100% !important; }

#checkout section#checkout-payment-step [data-payment-module="mollie"].selected > .additional-information > .mollie-iframe-container { display: block !important; }

#checkout .mollie-iframe-container label.mollie-information-label, #checkout .mollie-iframe-container .mollie-signature { display: none !important; }

#checkout .mollie-credit-card-inputs .form-group.field { position: relative; margin-bottom: 0px; width: 100%; }

#checkout .mollie-credit-card-inputs .mollie-input { width: 100%; height: 52px; padding: 24px 16px 6px; border: 1.5px solid var(--border); border-radius: 8px; background: rgb(255, 255, 255); transition: 0.2s; box-sizing: border-box; display: block; }

#checkout .mollie-credit-card-inputs .form-group.is-focused .mollie-input { box-shadow: 0 0 0 0.5px var(--black); border-color: var(--black) !important; }

#checkout .mollie-credit-card-inputs .form-group.is-invalid .mollie-input { border-color: rgb(244, 67, 54) !important; }

#checkout .mollie-credit-card-inputs label.mollie-label { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 500; pointer-events: none; transition: 0.2s; margin-bottom: 0px; z-index: 2; text-transform: none; letter-spacing: normal; color: var(--muted) !important; }

#checkout .mollie-credit-card-inputs .form-group.is-focused label.mollie-label, #checkout .mollie-credit-card-inputs .form-group.is-dirty label.mollie-label { top: 14px; font-size: 10.5px; transform: translateY(0px); color: var(--muted) !important; }

#checkout .mollie-credit-card-inputs .card-inputs { display: flex; flex-direction: column; gap: 14px; }

#checkout .mollie-credit-card-inputs .card-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

#checkout .mollie-credit-card-inputs .form-group-expiry-date { position: relative; }

#checkout .mollie-credit-card-inputs .form-group-expiry-date label.mollie-expiry-date-label { pointer-events: none; z-index: 2; margin-bottom: 0px; position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--muted) !important; transition: 0.2s !important; }

#checkout .mollie-credit-card-inputs .form-group-expiry-date.is-focused label.mollie-expiry-date-label, #checkout .mollie-credit-card-inputs .form-group-expiry-date.is-dirty label.mollie-expiry-date-label { top: 14px !important; font-size: 10.5px !important; transform: translateY(0px) !important; }

#checkout .mollie-input iframe { width: 100% !important; height: 100% !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }

.mollie-credit-card-inputs { margin-top: 10px; width: 100% !important; max-width: 100% !important; }

#checkout .mollie-iframe-container {
  width: 100% !important;
  max-width: 100% !important;
}

#checkout .mollie-credit-card-inputs .card-preview { margin-left: auto; margin-right: auto; width: 100%; max-width: 100%; }

/* ─── Premium Cart Page Layout & Component Overrides ─────────────────── */
body.page-cart {
  background-color: #f5f5f3 !important;
}

body.page-cart #wrapper,
body.page-cart #content-wrapper,
body.page-cart .full-container,
body.page-cart .row {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Hide default theme header elements on cart page */
body.page-cart #nav,
body.page-cart .nav,
body.page-cart .pm-push,
body.page-cart #nav-mobile,
body.page-cart #spe-footer {
  display: none !important;
}

/* Ensure custom header has high priority visual styling matching mockup exactly */
body.page-cart #header {
  position: sticky !important;
  top: 0px !important;
  z-index: 200 !important;
  background: var(--white) !important;
  border-bottom: 1px solid var(--border) !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
}

body.page-cart #header.scrolled {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px !important;
}

/* Fix fonts and alignments on cart custom title */
body.page-cart .page-title {
  font-family: 'Manrope', -apple-system, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--black) !important;
  text-transform: none !important;
}

/* Style the custom footer on the cart page with maximum specificity */
body.page-cart #footer {
  background: var(--black) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
}

body.page-cart #footer a {
  color: rgba(255, 255, 255, 0.5) !important;
  transition: color 0.2s !important;
}

body.page-cart #footer a:hover {
  color: var(--white) !important;
}

body.page-cart #footer .footer-top {
  max-width: 1280px !important;
  margin: 0px auto !important;
  padding: 56px 40px 48px !important;
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr !important;
  gap: 40px !important;
}

body.page-cart #footer .footer-col-title {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 255, 255, 0.25) !important;
  margin-bottom: 14px !important;
}

body.page-cart #footer .footer-newsletter-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--white) !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
}

body.page-cart #footer .newsletter-input {
  width: 100% !important;
  height: 42px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  padding: 0px 14px !important;
  color: var(--white) !important;
  font-size: 12.5px !important;
}

body.page-cart #footer .newsletter-btn {
  height: 42px !important;
  background: var(--white) !important;
  color: var(--black) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* Header widget styling for cart */
.header-widget-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.header-widget-wrap .btn-unstyle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
  text-transform: uppercase;
}
.header-widget-wrap .btn-unstyle:hover,
.header-widget-wrap .btn-unstyle[aria-expanded="true"] {
  color: var(--black);
}
.header-widget-wrap .btn-unstyle i {
  display: none !important;
}
.header-widget-wrap .language-selector .btn-unstyle::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>');
  background-size: cover;
}
.header-widget-wrap .btn-unstyle:hover::before,
.header-widget-wrap .btn-unstyle[aria-expanded="true"]::before {
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23111" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>');
}
.header-widget-wrap .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 120px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-top: 12px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: all 0.2s;
  display: block; /* Override bootstrap display:none */
}
.header-widget-wrap .js-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header-widget-wrap .dropdown-menu li {
  list-style: none;
}
.header-widget-wrap .dropdown-menu li a {
  display: block;
  padding: 6px 16px;
  font-size: 11.5px;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}
.header-widget-wrap .dropdown-menu li a:hover {
  background: rgb(250, 250, 250);
  color: var(--black);
}
.header-widget-wrap select.link {
  display: none !important;
}


/* ----- APPENDED FROM PANIER DESKTOP ----- */

    /* ═══════════════════════════════════════════════════════════════════════
       PAGE LAYOUT
    ═══════════════════════════════════════════════════════════════════════ */
    .page-wrap {
      max-width: 1280px;
      margin: 0 auto;
      padding: 52px 40px 96px;
    }

    .page-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 36px;
    }

    .page-title {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--black);
    }

    .page-count {
      font-size: 12px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    .cart-grid {
      display: grid;
      grid-template-columns: 1fr 372px;
      gap: 24px;
      align-items: start;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       CART ITEMS COLUMN
    ═══════════════════════════════════════════════════════════════════════ */
    .cart-col {
      display: flex;
      flex-direction: column;
      gap: 0;
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
    }

    /* Individual item row */
    .cart-item {
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 20px;
      padding: 22px 24px;
      position: relative;
      transition: background 0.18s;
    }

    .cart-item + .cart-item {
      border-top: 1px solid var(--border);
    }

    .cart-item:hover { background: #fafafa; }

    /* Thumbnail */
    .item-thumb {
      width: 92px;
      height: 112px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }

    .item-thumb-inner {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.4s var(--ease);
    }

    .cart-item:hover .item-thumb-inner { transform: scale(1.05); }

    .shirt-white { background: linear-gradient(150deg, #f2f2f2 0%, #dcdcdc 100%); }
    .shirt-beige { background: linear-gradient(150deg, #ead9be 0%, #cdb890 100%); }
    .shirt-blue  { background: linear-gradient(150deg, #ccdaec 0%, #96b4d3 100%); }

    /* Item content */
    .item-content {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .item-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }

    .item-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--black);
      letter-spacing: -0.02em;
      line-height: 1.25;
    }

    .item-brand {
      font-size: 10px;
      font-weight: 500;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 4px;
    }

    .item-remove {
      color: #ccc;
      padding: 3px;
      margin: -3px -3px 0 4px;
      border-radius: 5px;
      transition: all 0.18s;
      opacity: 0;
      flex-shrink: 0;
    }

    .cart-item:hover .item-remove { opacity: 1; }
    .item-remove:hover { color: var(--red); background: #fef2f2; }

    /* Tags */
    .item-tags {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-top: 11px;
    }

    .item-tag {
      display: inline-block;
      background: #f2f2f2;
      border-radius: 4px;
      padding: 3px 8px;
      font-size: 10px;
      font-weight: 600;
      color: #555;
      letter-spacing: 0.03em;
    }

    /* Bottom row: stepper + price */
    .item-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding-top: 14px;
    }

    /* Stepper */
    .stepper {
      display: flex;
      align-items: center;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      height: 34px;
      transition: border-color 0.2s;
    }

    .stepper:focus-within { border-color: #aaa; }

    .step-btn {
      width: 34px;
      height: 100%;
      color: var(--text);
      font-size: 17px;
      font-weight: 300;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }

    .step-btn:hover { background: #f3f3f3; }
    .step-btn:active { background: var(--border); }

    .step-val {
      width: 34px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: var(--black);
      border: none;
      outline: none;
      background: none;
    }

    /* Price */
    .item-price-block { text-align: right; }

    .item-price {
      font-size: 17px;
      font-weight: 800;
      color: var(--black);
      letter-spacing: -0.04em;
    }

    .item-unit-price {
      font-size: 10.5px;
      color: var(--muted);
      margin-top: 2px;
    }

    /* Shipping bar — at bottom of cart-col */
    .shipping-bar {
      border-top: 1px solid var(--border);
      padding: 15px 24px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .shipping-icon { flex-shrink: 0; color: var(--muted); }

    .shipping-text {
      font-size: 11.5px;
      font-weight: 500;
      color: #555;
      white-space: nowrap;
    }

    .shipping-text strong { color: var(--black); font-weight: 700; }

    .shipping-track {
      flex: 1;
      height: 2px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
    }

    .shipping-fill {
      height: 100%;
      width: 46%;
      background: var(--black);
      border-radius: 2px;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       SUMMARY COLUMN
    ═══════════════════════════════════════════════════════════════════════ */
    .summary-col {
      position: sticky;
      top: 88px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .summary-card {
      background: var(--white);
      border-radius: var(--radius);
      overflow: hidden;
    }

    /* Section inside card */
    .sc-section {
      padding: 22px 22px;
    }

    .sc-section + .sc-section {
      border-top: 1px solid var(--border);
    }

    .sc-title {
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: #aaa;
      margin-bottom: 16px;
    }

    /* Lines */
    .summary-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 0;
      font-size: 13px;
    }

    .summary-line + .summary-line {
      border-top: 1px solid #f0f0f0;
    }

    .sl-key { color: var(--muted); font-weight: 400; }
    .sl-val { color: var(--text); font-weight: 600; }
    .sl-val.green { color: var(--green); }

    /* Total */
    .summary-total {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1.5px solid var(--black);
    }

    .st-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--black);
    }

    .st-sub {
      font-size: 10px;
      color: var(--muted);
      font-weight: 400;
      margin-top: 3px;
    }

    .st-amount {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.05em;
      color: var(--black);
      line-height: 1;
    }

    /* Promo code */
    .promo-form {
      display: flex;
      gap: 8px;
    }

    .promo-input {
      flex: 1;
      height: 40px !important;
      border: 1.5px solid var(--border) !important;
      border-radius: 8px !important;
      padding: 0 12px !important;
      font-size: 12.5px !important;
      color: var(--text) !important;
      background: none !important;
      transition: border-color 0.2s;
    }

    .promo-input:focus { outline: none; border-color: #999; }
    .promo-input::placeholder { color: #c0c0c0; }

    .promo-btn {
      height: 40px !important;
      padding: 0 16px !important;
      border: 1.5px solid var(--border) !important;
      border-radius: 8px !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      color: var(--black) !important;
      background: transparent !important;
      letter-spacing: 0.05em !important;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .promo-btn:hover {
      background: var(--black);
      color: var(--white);
      border-color: var(--black);
    }

    /* CTA */
    .btn-checkout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      height: 52px;
      background: var(--black);
      color: var(--white);
      border-radius: 10px;
      font-size: 11.5px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      transition: all 0.25s var(--ease);
      white-space: nowrap;
    }

    .btn-checkout:hover {
      background: #1c2533;
      box-shadow: 0 10px 28px rgba(11,17,23,0.22);
      transform: translateY(-1px);
    }

    .btn-checkout:active { transform: none; box-shadow: none; }

    .btn-arrow { transition: transform 0.25s var(--ease); }
    .btn-checkout:hover .btn-arrow { transform: translateX(4px); }

    /* Secure + continue */
    .secure-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding-top: 13px;
      font-size: 10.5px;
      color: #bbb;
      font-weight: 500;
    }

    .continue-link {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 16px 22px;
      border-top: 1px solid var(--border);
      font-size: 11.5px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0.03em;
      transition: color 0.2s;
    }

    .continue-link:hover { color: var(--black); }

    .continue-link svg { transition: transform 0.2s var(--ease); }
    .continue-link:hover svg { transform: translateX(-3px); }

    /* Trust items */
    }

/* Shipping bar  at bottom of cart-col */
.shipping-bar {
  border-top: 1px solid var(--border);
  padding: 15px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.shipping-bar .shipping-icon {
  width: 17px !important;
  height: 17px !important;
  background: none !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  color: var(--black);
}

.shipping-text {
  flex: 1;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

.shipping-text strong {
  color: var(--black);
  font-weight: 800;
}

.shipping-track {
  width: 140px;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.shipping-fill {
  height: 100%;
  width: 46%;
  background: var(--black);
  border-radius: 2px;
}

.atc-bar { display: none !important; }
/* --- MOBILE LAYOUT FOR CART --- */
@media (max-width: 767px) {
  /* Mobile: la carte récap/CTA passe en flux normal (sinon position:absolute
     la fait chevaucher le formulaire Contact/Adresse sur une seule colonne). */
  .submit-card.checkout-block,
  #thecheckout-confirm {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  /* Reset container and grid */
  .page-wrap { padding: 0; }
  .page-head { padding: 20px 20px 16px; }
  .page-head__title { font-size: clamp(30px, 9vw, 42px); text-align: left; margin-bottom: 6px; }
  .page-head__sub { text-align: left; font-size: 13px; }
  
  .cart-grid { display: flex !important; flex-direction: column !important; margin: 0; }
  .cart-col { border-right: none; padding: 0; }
  
  /* Shipping Bar */
  .shipping-bar { padding: 0 20px 16px; border-top: none; display: block; }
  .shipping-text { font-size: 11px; margin-bottom: 8px; font-family: var(--fb); font-weight: 300; color: var(--text); letter-spacing: .04em; }
  .shipping-text strong { color: var(--gold); font-weight: 500; }
  .shipping-track { width: 100%; }
  .shipping-fill { background: var(--gold); }

  /* Cart Items */
  .cart-item { padding: 16px 20px; border-bottom: 1px solid var(--border); gap: 14px; display: flex; align-items: flex-start; }
  .cart-item:last-child { border-bottom: 1px solid var(--border); }
  .item-thumb { width: 84px; height: 104px; border-radius: 0; }
  .item-name { font-size: 13px; font-weight: 400; font-family: var(--fb); color: var(--dk); line-height: 1.35; letter-spacing: normal; }
  .item-brand { font-size: 10px; font-weight: 300; margin-bottom: 8px; letter-spacing: .1em; margin-top: 0; }
  .item-tag { font-size: 9px; font-weight: 300; padding: 2px 7px; margin-bottom: 10px; border-radius: 0; background: transparent; border: 1px solid var(--border); letter-spacing: .12em; color: var(--muted); }
  .item-price { font-size: 18px; font-family: var(--fd); font-weight: normal; letter-spacing: .04em; color: var(--dk); text-align: right; }
  .unit-price-cart { display: none; }
  .item-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0; }
  .item-remove { width: 28px; height: 28px; border: none; border-radius: 0; background: transparent; }
  .item-remove svg { width: 12px; height: 12px; }
  
  /* Stepper */
  .stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 0; height: auto; }
  .step-btn { width: 32px; height: 32px; font-size: 16px; font-weight: normal; background: transparent; }
  .step-val { width: 32px; height: 32px; font-size: 13px; font-weight: 400; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--bg); }

  /* Summary Block */
  .summary-col { position: static; max-width: 100%; padding: 0; }
  .summary-card { padding: 20px 20px; background: var(--bg2); border-radius: 0; border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: -1px; }
  .sc-section { padding: 0; border-bottom: none; }
  .sc-title { font-size: 9px; letter-spacing: .28em; margin-bottom: 14px; font-family: var(--fd); color: var(--muted); }
  
  /* Promo Code */
  .summary-promo-wrap { margin-top: 0; }
  .summary-promo-wrap .sc-title { display: none; }
  .promo-form { display: flex; padding: 16px 20px; gap: 0; border-bottom: 1px solid var(--border); background: var(--bg); margin-top: -1px; }
  .promo-input { flex: 1; border: 1px solid var(--border); border-right: none; padding: 0 14px; height: 44px; font-size: 13px; font-weight: 300; font-family: var(--fb); border-radius: 0; background: var(--bg); }
  .promo-btn { padding: 0 16px; height: 44px; font-size: 9px; font-weight: 300; font-family: var(--fb); letter-spacing: .18em; border-radius: 0; background: var(--dk); color: #fff; text-transform: uppercase; border: none; }
  
  /* Summary Lines */
  .summary-line { padding: 5px 0; font-size: 13px; font-weight: 300; font-family: var(--fb); color: var(--text); }
  .sl-key { color: var(--muted); }
  .summary-total { align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; }
  .st-label { font-size: 13px; font-family: var(--fd); letter-spacing: .18em; color: var(--dk); text-transform: uppercase; }
  .st-amount { font-size: 26px; font-family: var(--fd); letter-spacing: .04em; color: var(--dk); }
  .st-sub { font-size: 10px; font-weight: 300; font-family: var(--fb); letter-spacing: .06em; margin-top: 6px; color: var(--muted); }

  /* Trust Badges */
  .trust-list { display: flex; flex-direction: row; padding: 20px; gap: 0; border-bottom: 1px solid var(--border); background: #fff; margin-top: -1px; }
  .trust-item { flex: 1; flex-direction: column; text-align: center; gap: 8px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 8px; margin: 0; }
  .trust-item + .trust-item { border-left: 1px solid var(--border); }
  .trust-item svg { width: 18px; height: 18px; stroke: var(--muted); margin: 0 auto; }
  .trust-item span { display: inline-block; line-height: 1.5; }
  
  /* Hide Desktop Buttons */
  .summary-col .btn-checkout { display: none; }
  .summary-col .continue-link { display: none; }
  .summary-col .secure-row { display: none; }
  
  /* Sticky Mobile ATC Bar */
  .atc-bar { 
    display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: 890; 
    background: var(--bg); border-top: 1px solid var(--border); 
    padding: 10px 20px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); 
    flex-direction: column; align-items: stretch; gap: 8px; 
  }
  .atc-bar .btn-checkout { 
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; background: var(--dk); color: #fff; 
    font-size: 10px; font-weight: 300; letter-spacing: .2em; text-transform: uppercase; border: none; width: 100%;
  }
  .atc-bar .btn-checkout svg { width: 13px; height: 13px; }
  .atc-bar .link-continue { 
    display: block; text-align: center; color: var(--muted); 
    font-size: 10px; padding: 4px 0; margin: 0; border: none; 
    letter-spacing: .12em; text-transform: uppercase;
  }
  
  /* Push body so sticky bar doesn't overlap content */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}



.ps-hidden { display: none !important; }

/* Restored original DOM, styling as side-by-side tabs */
#checkout #thecheckout-payment .payment-options.payment-cards {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    flex-direction: row !important;
}

.tc-main-title {
    display: contents !important;
}

.payment-option.payment-card {
    flex: 1 1 0% !important;
    order: 1 !important;
    height: 52px !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: 0.2s !important;
}

.payment-option.payment-card.is-selected {
    border-color: var(--black) !important;
    background: var(--subtle) !important;
}

.payment-option.payment-card:hover {
    border-color: rgb(187, 187, 187) !important;
}

.payment-card-radio {
    display: none !important;
}

.payment-card-label {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

.payment-call-to-action-and-logo.payment-card-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
}

.payment-call-to-action-and-logo img {
    height: 16px !important;
    width: auto !important;
    max-width: initial !important;
}

.payment-card-title {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    margin: 0 !important;
    letter-spacing: 0.02em !important;
}

.payment-option.payment-card:not(.is-selected) .payment-card-title {
    color: var(--muted) !important;
}

.js-additional-information, .js-payment-option-form {
    order: 2 !important;
    flex: 0 0 100% !important;
}

.tc-main-title.selected .payment-option.payment-card {
    border-color: var(--black) !important;
    background: var(--subtle) !important;
}

.tc-main-title.selected .payment-option.payment-card .payment-card-title {
    color: var(--text) !important;
}

/* ─── FIX: Make shipping carrier rows fully clickable ─────────────────── */
#checkout #thecheckout-shipping .delivery-option-row.shipping-option {
    cursor: pointer !important;
    position: relative !important;
}

/* The hidden radio must fill its .shipping-radio parent so clicks on the circle work */
#checkout #thecheckout-shipping .shipping-radio {
    position: relative !important;
    overflow: visible !important;
}

#checkout #thecheckout-shipping .shipping-radio .custom-radio {
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 2px solid var(--border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: border-color 0.2s !important;
    background: var(--white) !important;
}

/* When checked: dark border + inner dot */
#checkout #thecheckout-shipping .shipping-option.selected .shipping-radio .custom-radio,
#checkout #thecheckout-shipping .shipping-option:has(input[type="radio"]:checked) .shipping-radio .custom-radio {
    border-color: var(--black) !important;
}

#checkout #thecheckout-shipping .shipping-radio .custom-radio span {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--black) !important;
    display: block !important;
    transform: scale(0) !important;
    transition: transform 0.2s var(--ease) !important;
}

#checkout #thecheckout-shipping .shipping-option.selected .shipping-radio .custom-radio span,
#checkout #thecheckout-shipping .shipping-option:has(input[type="radio"]:checked) .shipping-radio .custom-radio span {
    transform: scale(1) !important;
}

/* Hide the native radio visually but keep it clickable */
#checkout #thecheckout-shipping .shipping-radio .custom-radio input[type="radio"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    margin: 0 !important;
}

/* ─── FIX: Make payment option cards fully clickable ───────────────────── */
#checkout #thecheckout-payment .payment-option.payment-card {
    position: relative !important;
}

#checkout #thecheckout-payment .payment-card-label {
    position: relative !important;
    z-index: 2 !important;
}

#checkout #thecheckout-payment .payment-card-radio {
    display: none !important;
}

/* ─── Chronopost Point Relai Premium Integration ────────────────────────── */
#checkout #thecheckout-shipping .delivery-option-row {
    flex-wrap: wrap !important;
}

#chronorelais_container {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 15px !important;
    padding: 20px !important;
    border-top: 1px solid var(--border) !important;
    background: var(--subtle) !important;
    border-radius: 0 0 14px 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#chronorelais_container h3,
#chronorelais_container h4 {
    font-family: 'Bebas Neue', sans-serif !important;
    font-size: 20px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--black) !important;
    margin: 18px 0 10px 0 !important;
}

#chronorelais_container h3 {
    margin-top: 0 !important;
}

#chronorelais_container .chronorelais_informations {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    color: var(--muted) !important;
    margin-bottom: 12px !important;
}

#relais_txt_cont {
    margin-top: 15px !important;
}

#relais_txt .checkbox {
    padding: 10px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    background: var(--white) !important;
    transition: all 0.2s var(--ease) !important;
    display: block !important;
}

#relais_txt .checkbox:hover {
    border-color: var(--black) !important;
    background: var(--subtle) !important;
}

#relais_txt .checkbox label {
    cursor: pointer !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 12.5px !important;
    color: var(--text) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#relais_txt input[type="radio"] {
    margin: 0 !important;
    position: static !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

#chrono_postcode_controls {
    margin-top: 10px !important;
}

#chrono_postcode_controls .input-group {
    display: flex !important;
    gap: 8px !important;
}

#relais_postcode {
    max-width: 120px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--border) !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
}

#change_postcode {
    height: 40px !important;
    border-radius: 8px !important;
    background: var(--black) !important;
    color: var(--white) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 0 16px !important;
    transition: background 0.2s var(--ease) !important;
}

#change_postcode:hover {
    background: #242424 !important;
}

#chronorelais_map {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ─── Premium Floating Labels Visibility Fix ────────────────────────────── */
html body #checkout .mollie-credit-card-inputs .form-group-expiry-date.field label.mollie-expiry-date-label.mollie-label, 
html body #checkout .mollie-credit-card-inputs .field label.mollie-label { 
    z-index: 10 !important; 
    background: transparent !important; 
}

#checkout .field input:focus ~ label,
#checkout .field input:not(:placeholder-shown) ~ label,
#checkout .field select:focus ~ label,
#checkout .field select.filled ~ label,
#checkout #invoice-address .field input:focus ~ label,
#checkout #invoice-address .field input:not(:placeholder-shown) ~ label,
#checkout #invoice-address .field select:focus ~ label,
#checkout #invoice-address .field select.filled ~ label {
    top: 6px !important;
    transform: none !important;
    line-height: 1 !important;
    z-index: 10 !important;
    background: transparent !important;
}

/* ─── High-specificity override for input/select vertical alignment ────── */
#checkout .field input,
#checkout .field select,
#checkout .form-grid .field input,
#checkout .form-group input[type="text"],
#checkout .form-group input[type="email"],
#checkout .form-group input[type="tel"],
#checkout .form-group input[type="password"],
#checkout .form-group select {
    padding-top: 14px !important;
}

/* ─── Premium floating labels fix for Mollie credit card inputs ─────────── */
html body #checkout .mollie-credit-card-inputs .form-group-expiry-date.field.is-focused label.mollie-expiry-date-label.mollie-label,
html body #checkout .mollie-credit-card-inputs .field.is-focused label.mollie-label,
html body #checkout .mollie-credit-card-inputs .form-group-expiry-date.field.is-dirty label.mollie-expiry-date-label.mollie-label,
html body #checkout .mollie-credit-card-inputs .field.is-dirty label.mollie-label {
    top: 6px !important;
    transform: none !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    z-index: 10 !important;
    background: transparent !important;
}

#checkout .mollie-credit-card-inputs .mollie-input {
    padding-top: 14px !important;
    display: flex !important;
    align-items: center !important;
    height: 52px !important;
    box-sizing: border-box !important;
}

#checkout .mollie-credit-card-inputs .mollie-component {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

#checkout .mollie-credit-card-inputs .mollie-component iframe {
    height: 100% !important;
    min-height: 32px !important;
    max-height: none !important;
}
/* ─── Carrier Logo Size Fix ────────────────────────────── */
#checkout .delivery-option-logo img,
#checkout .shipping-card-icon img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain;
    border-radius: 4px;
}
#checkout .delivery-option-logo svg,
#checkout .shipping-card-icon svg {
    width: 24px !important;
    height: 24px !important;
}
#checkout .delivery-option-logo,
#checkout .shipping-card-icon {
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
}

/* ─── Point Relais Display Fix ────────────────────────────── */
#checkout .carrier-extra-content {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 8px;
    box-sizing: border-box;
}
#checkout .carrier-extra-content iframe,
#checkout .carrier-extra-content #colissimo-widget-container {
    max-width: 100% !important;
    width: 100% !important;
}