/* ============================================================
* Smile V2 — Checkout page (PrestaShop port of Claude handoff)
* Source of truth: design_handoff_smile_prestashop/02_styles_full.css §Checkout
* Adapters for PS native markup at the bottom.
* ============================================================ */
/* ====== Page background + container ====== */
body#checkout.page-order { background: var(--bg, #F8F4F0); }
#checkout #wrapper { background: transparent !important; padding: 0 !important; }
#checkout #content {
max-width: var(--max-w, 1280px) !important;
margin: 0 auto !important;
padding: 32px 24px 80px !important;
background: transparent !important;
}
/* Hide breadcrumb and at_nova ornaments inside checkout */
#checkout .breadcrumb,
#checkout .leo-breadcrumb,
#checkout .breadcrumb-header,
#checkout .ApRow.breadcrumb-row,
#checkout .ApPageBuilder { display: none !important; }
/* ============================================================
Progress bar (handoff exact)
============================================================ */
.checkout-progress {
display: flex;
align-items: center;
gap: 8px;
padding: 18px 0 28px;
border-bottom: 1px solid var(--line, #E8DFD6);
margin: 0 0 32px;
overflow-x: auto;
scrollbar-width: none;
}
.checkout-progress::-webkit-scrollbar { display: none; }
.checkout-progress .step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.checkout-progress .step .n {
width: 26px; height: 26px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--line, #E8DFD6);
color: var(--ink-3, #9A928B);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600;
font-variant-numeric: tabular-nums;
transition: all 0.2s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
font-family: var(--f-body, "Inter", sans-serif);
}
.checkout-progress .step .lbl {
font-size: 13px;
color: var(--ink-3, #9A928B);
font-weight: 500;
letter-spacing: 0.01em;
font-family: var(--f-body, "Inter", sans-serif);
}
.checkout-progress .step.done .n { background: var(--burgundy, #6B2C2C); border-color: var(--burgundy, #6B2C2C); color: #fff; }
.checkout-progress .step.done .lbl { color: var(--ink, #2B2826); }
.checkout-progress .step.active .n { background: var(--ink, #2B2826); border-color: var(--ink, #2B2826); color: #fff; }
.checkout-progress .step.active .lbl { color: var(--ink, #2B2826); font-weight: 600; }
.checkout-progress .ln { flex: 1; min-width: 24px; height: 1px; background: var(--line, #E8DFD6); }
.checkout-progress .ln.done { background: var(--burgundy, #6B2C2C); }
/* ============================================================
Grid container (1.5fr / 1fr)
============================================================ */
body#checkout #content > .row {
display: grid !important;
grid-template-columns: 1.5fr 1fr !important;
gap: 56px !important;
align-items: start !important;
margin: 0 !important;
width: 100% !important;
max-width: none !important;
}
body#checkout #content > .row > .cart-grid-body {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
padding: 0 !important;
min-width: 0 !important;
}
@media (max-width: 960px) {
body#checkout #content > .row { grid-template-columns: 1fr !important; gap: 32px !important; }
}
/* ============================================================
Step card (handoff exact, plus PS class aliases)
============================================================ */
.checkout-step,
#checkout .checkout-step {
border: 1px solid var(--line, #E8DFD6) !important;
border-radius: var(--r-md, 10px) !important;
background: var(--surface, #FFFFFF) !important;
margin-bottom: 16px !important;
overflow: hidden !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
padding: 0 !important;
box-shadow: none !important;
display: block !important;
}
.checkout-step.active,
#checkout .checkout-step.-current {
border-color: var(--ink, #2B2826) !important;
box-shadow: 0 2px 12px -6px rgba(43, 40, 38, 0.12) !important;
}
.checkout-step.collapsed,
#checkout .checkout-step.-reachable:not(.-current):not(.-complete),
#checkout .checkout-step.-complete:not(.-current) { background: var(--surface-2, #FAF7F2) !important; }
.checkout-step.disabled,
#checkout .checkout-step.-unreachable { opacity: 0.5 !important; }
/* Step head (map PS .step-title to handoff .checkout-step-head) */
.checkout-step-head,
#checkout .checkout-step > .step-title {
width: 100% !important;
display: grid !important;
grid-template-columns: 36px 1fr auto !important;
align-items: center !important;
gap: 16px !important;
padding: 20px 24px !important;
text-align: left !important;
cursor: default !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
font-family: var(--f-display, "Playfair Display", serif) !important;
}
#checkout .checkout-step.-unreachable .step-title { cursor: not-allowed; }
#checkout .checkout-step.-complete:not(.-current) .step-title { cursor: pointer; }
/* When step has .box-step wrapper (step 1), make it display:contents */
#checkout .checkout-step .step-title .box-step { display: contents !important; }
/* Number badge */
.checkout-step-head .num,
#checkout .checkout-step .step-number {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
background: var(--ink, #2B2826) !important;
color: #fff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums !important;
font-family: var(--f-body, "Inter", sans-serif) !important;
margin: 0 !important; padding: 0 !important;
flex-shrink: 0 !important;
}
.checkout-step.collapsed .checkout-step-head .num,
#checkout .checkout-step.-unreachable .step-number,
#checkout .checkout-step.-reachable:not(.-current):not(.-complete) .step-number {
background: transparent !important;
color: var(--ink-3, #9A928B) !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
}
.checkout-step.collapsed.done .checkout-step-head .num,
#checkout .checkout-step.-complete:not(.-current) .step-number {
background: var(--burgundy, #6B2C2C) !important;
border-color: var(--burgundy, #6B2C2C) !important;
color: #fff !important;
}
/* Title h2 / PS .title span */
.checkout-step-head h2,
#checkout .checkout-step .step-title .title {
font-family: var(--f-display, "Playfair Display", serif) !important;
font-size: 22px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
color: var(--ink, #2B2826) !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.checkout-step.collapsed.done .checkout-step-head h2,
#checkout .checkout-step.-complete:not(.-current) .step-title .title {
font-family: var(--f-body, "Inter", sans-serif) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--ink-2, #6B6360) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* Bare step titles (steps 2-4 unreachable - just N text) */
#checkout .checkout-step.-unreachable .step-title {
font-family: var(--f-display, "Playfair Display", serif) !important;
font-size: 18px !important;
color: var(--ink-3, #9A928B) !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
/* Edit link */
.checkout-step-head .edit,
#checkout .checkout-step .step-edit {
font-size: 12px !important;
color: var(--burgundy, #6B2C2C) !important;
font-weight: 500 !important;
border-bottom: 1px solid currentColor !important;
padding-bottom: 2px !important;
letter-spacing: 0.02em !important;
font-family: var(--f-body, "Inter", sans-serif) !important;
text-decoration: none !important;
margin-left: auto !important;
}
.checkout-step-head .edit:hover,
#checkout .checkout-step .step-edit:hover { color: var(--burgundy-deep, #501F1F) !important; }
#checkout .checkout-step.-current .step-edit,
#checkout .checkout-step.-unreachable .step-edit { display: none !important; }
#checkout .checkout-step .step-title i,
#checkout .checkout-step .step-title .material-icons { display: none !important; }
/* Step body (map PS .content to .checkout-step-body) */
.checkout-step-body,
#checkout .checkout-step > .content {
padding: 4px 24px 28px !important;
border-top: 1px solid var(--line, #E8DFD6) !important;
background: transparent !important;
}
.checkout-step.collapsed .checkout-step-body,
#checkout .checkout-step:not(.-current) > .content,
#checkout .checkout-step:not(.-current) .content { display: none !important; }
/* ============================================================
Form grid (handoff .form-grid)
============================================================ */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding-top: 20px;
}
.form-grid .field { display: flex; flex-direction: column; gap: 6px; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-grid label {
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-2, #6B6360);
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-grid label .opt { font-weight: 400; color: var(--ink-3, #9A928B); }
.form-grid input,
.form-grid select,
.form-grid textarea {
height: 46px;
border: 1px solid var(--line, #E8DFD6);
border-radius: 8px;
padding: 0 14px;
font-size: 14px;
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
width: 100%;
}
.form-grid textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 80px; }
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
outline: none;
border-color: var(--ink, #2B2826);
box-shadow: 0 0 0 3px rgba(43, 40, 38, 0.06);
}
.form-grid select {
-webkit-appearance: none;
appearance: none;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center;
padding-right: 36px;
cursor: pointer;
}
.form-grid .hint { font-size: 11px; color: var(--ink-3, #9A928B); margin-top: 2px; line-height: 1.4; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
/* ===== PS ADAPTER: map .form-group.row to .form-grid layout ===== */
#checkout form > section,
#checkout form .form-fields,
#checkout #customer-form > section,
#checkout #delivery-address > section,
#checkout .js-address-form > section {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
padding-top: 20px !important;
}
@media (max-width: 720px) {
#checkout form > section,
#checkout #customer-form > section { grid-template-columns: 1fr !important; }
}
#checkout .form-group,
#checkout .form-group.row {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Some fields span 2 cols (email, address1/2, textarea, checkboxes, p elements) */
#checkout #customer-form > section > .form-group:has(input[name="email"]),
#checkout #customer-form > section > p,
#checkout form > section > .form-group:has(textarea),
#checkout form > section > .form-group:has(input[name="address1"]),
#checkout form > section > .form-group:has(input[name="address2"]),
#checkout form > section > .form-group:has(input[type="checkbox"]),
#checkout form > section > .form-group:has(.custom-checkbox) {
grid-column: 1 / -1 !important;
}
/* Hide cols 3/6/3 layout */
#checkout .form-group.row > label,
#checkout .form-group.row > .form-control-label {
width: 100% !important;
max-width: none !important;
flex: none !important;
padding: 0 !important;
text-align: left !important;
margin-bottom: 0 !important;
font-size: 12px !important;
letter-spacing: 0.04em !important;
color: var(--ink-2, #6B6360) !important;
font-weight: 500 !important;
text-transform: none !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
#checkout .form-group.row > .col-md-1,
#checkout .form-group.row > .col-md-2,
#checkout .form-group.row > .col-md-3,
#checkout .form-group.row > .col-md-4,
#checkout .form-group.row > .col-md-5,
#checkout .form-group.row > .col-md-6,
#checkout .form-group.row > .col-md-7,
#checkout .form-group.row > .col-md-8,
#checkout .form-group.row > .col-md-9 {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
padding: 0 !important;
}
#checkout .form-group.row > .form-control-comment {
font-size: 11px !important;
color: var(--ink-3, #9A928B) !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
line-height: 1.4 !important;
}
#checkout .form-group.row > .form-control-comment:empty { display: none !important; }
#checkout label.required::after { content: " *"; color: var(--burgundy, #6B2C2C); }
#checkout .form-control,
#checkout input[type="text"]:not([type="hidden"]),
#checkout input[type="email"],
#checkout input[type="tel"],
#checkout input[type="password"],
#checkout input[type="number"],
#checkout select.form-control,
#checkout select,
#checkout textarea.form-control,
#checkout textarea {
height: 46px !important;
width: 100% !important;
border: 1px solid var(--line, #E8DFD6) !important;
border-radius: 8px !important;
padding: 0 14px !important;
font-size: 14px !important;
background: #fff !important;
color: var(--ink, #2B2826) !important;
outline: none !important;
box-shadow: none !important;
font-family: var(--f-body, "Inter", sans-serif) !important;
transition: border-color 0.15s, box-shadow 0.15s !important;
}
#checkout textarea,
#checkout textarea.form-control {
height: auto !important;
padding: 12px 14px !important;
min-height: 80px !important;
}
#checkout input:focus,
#checkout select:focus,
#checkout textarea:focus {
border-color: var(--ink, #2B2826) !important;
box-shadow: 0 0 0 3px rgba(43, 40, 38, 0.06) !important;
}
#checkout .form-control::placeholder { color: var(--ink-3, #9A928B) !important; opacity: 1 !important; }
#checkout select,
#checkout select.form-control {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center !important;
padding-right: 36px !important;
cursor: pointer !important;
}
/* ===== Checkboxes / radios ===== */
.checkbox-row,
#checkout .custom-checkbox,
#checkout span.custom-checkbox > label {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
font-size: 13px !important;
color: var(--ink, #2B2826) !important;
cursor: pointer !important;
padding: 10px 0 !important;
line-height: 1.45 !important;
font-weight: 400 !important;
margin: 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
#checkout input[type="checkbox"],
#checkout input[type="radio"] {
width: 16px !important;
height: 16px !important;
accent-color: var(--burgundy, #6B2C2C) !important;
flex-shrink: 0 !important;
margin-top: 2px !important;
cursor: pointer !important;
}
#checkout .custom-checkbox > label .checkbox-checked,
#checkout .custom-checkbox > label > span > i.material-icons { display: none !important; }
/* ============================================================
Address saved card
============================================================ */
.saved-addresses,
#checkout .address-selector-list,
#checkout .delivery-options-list,
#checkout .payment-options { padding-top: 20px !important; display: flex; flex-direction: column; gap: 10px; }
.saved-address,
#checkout article.address,
#checkout .address-item {
display: grid !important;
grid-template-columns: 20px 1fr auto !important;
align-items: start !important;
gap: 14px !important;
padding: 16px !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
background: #fff !important;
cursor: pointer !important;
transition: border-color 0.15s, background 0.15s !important;
text-align: left !important;
width: 100% !important;
margin: 0 !important;
}
.saved-address:hover,
#checkout article.address:hover { border-color: var(--ink, #2B2826) !important; }
.saved-address.on,
#checkout article.address.selected {
border-color: var(--ink, #2B2826) !important;
background: var(--surface-2, #FAF7F2) !important;
}
/* ============================================================
Shipping methods (ship-opt)
============================================================ */
.ship-options,
#checkout .delivery-options-list { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; }
.ship-opt,
#checkout .delivery-option {
display: grid !important;
grid-template-columns: 20px 1fr auto !important;
align-items: center !important;
gap: 16px !important;
padding: 18px !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
background: #fff !important;
cursor: pointer !important;
transition: border-color 0.15s, background 0.15s !important;
text-align: left !important;
width: 100% !important;
margin: 0 !important;
}
.ship-opt:hover,
#checkout .delivery-option:hover { border-color: var(--ink, #2B2826) !important; }
#checkout .delivery-option:has(input:checked),
.ship-opt.on { border-color: var(--ink, #2B2826) !important; background: var(--surface-2, #FAF7F2) !important; }
.ship-opt .info .nm,
#checkout .carrier-name { font-size: 14px !important; font-weight: 500 !important; color: var(--ink, #2B2826) !important; }
.ship-opt .info .meta,
#checkout .carrier-delay { font-size: 12px !important; color: var(--ink-2, #6B6360) !important; }
.ship-opt .price,
#checkout .carrier-price {
font-size: 15px !important;
font-weight: 500 !important;
font-variant-numeric: tabular-nums !important;
margin-left: auto !important;
}
/* ============================================================
Payment methods
============================================================ */
.pay-options,
#checkout .payment-options {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
padding-top: 20px !important;
}
@media (max-width: 720px) {
.pay-options,
#checkout .payment-options { grid-template-columns: 1fr !important; }
}
.pay-opt,
#checkout .payment-option {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 18px !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
background: #fff !important;
cursor: pointer !important;
transition: border-color 0.15s, background 0.15s !important;
text-align: left !important;
width: 100% !important;
position: relative !important;
}
.pay-opt:hover,
#checkout .payment-option:hover { border-color: var(--ink, #2B2826) !important; }
#checkout .payment-option:has(input:checked),
.pay-opt.on { border-color: var(--ink, #2B2826) !important; background: var(--surface-2, #FAF7F2) !important; }
/* ============================================================
Order summary (right sidebar) — adapt PS #js-checkout-summary
============================================================ */
.order-summary,
#js-checkout-summary,
#checkout aside .card.js-cart {
background: var(--surface, #fff) !important;
border: 1px solid var(--line, #E8DFD6) !important;
border-radius: var(--r-md, 10px) !important;
padding: 24px !important;
position: sticky !important;
top: 20px !important;
box-shadow: none !important;
}
#js-checkout-summary .card-block { padding: 0 !important; }
/* Summary header */
#js-checkout-summary .cart-summary-products,
.order-summary h3 {
padding-bottom: 14px !important;
border-bottom: 1px solid var(--line, #E8DFD6) !important;
margin: 0 0 16px !important;
}
#js-checkout-summary .cart-summary-products p:first-child {
font-family: var(--f-body, "Inter", sans-serif) !important;
font-size: 12px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
font-weight: 600 !important;
color: var(--ink, #2B2826) !important;
margin: 0 0 10px !important;
}
/* Hide "Mostrar detalles" — list is always visible */
#js-checkout-summary .cart-summary-products [data-target="#cart-summary-product-list"],
#js-checkout-summary .cart-summary-products .btn-outline { display: none !important; }
#js-checkout-summary #cart-summary-product-list,
#js-checkout-summary #cart-summary-product-list.collapse { display: block !important; height: auto !important; }
/* Product items in summary */
#js-checkout-summary .media-list {
list-style: none !important;
padding: 0 !important;
margin: 0 0 16px !important;
}
#js-checkout-summary .media-list .media {
display: grid !important;
grid-template-columns: 56px 1fr auto !important;
gap: 12px !important;
align-items: start !important;
padding: 8px 0 !important;
border-bottom: 1px solid var(--line, #E8DFD6) !important;
font-size: 13px !important;
}
#js-checkout-summary .media-list .media:last-child { border-bottom: 0 !important; }
#js-checkout-summary .media-list .media-left {
position: relative;
width: 56px;
height: 70px;
border-radius: 6px;
overflow: hidden;
background: var(--line-2, #F0E8DE);
}
#js-checkout-summary .media-list .media-left a { display: block; height: 100%; }
#js-checkout-summary .media-list .media-left img {
width: 56px !important;
height: 70px !important;
object-fit: cover !important;
display: block !important;
border-radius: 6px !important;
}
#js-checkout-summary .media-list .media-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
#js-checkout-summary .media-list .product-name {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--ink, #2B2826) !important;
line-height: 1.3 !important;
display: block !important;
}
#js-checkout-summary .media-list .product-quantity {
font-size: 11px !important;
color: var(--ink-2, #6B6360) !important;
display: block !important;
font-variant-numeric: tabular-nums !important;
}
#js-checkout-summary .media-list .product-price {
font-size: 13px !important;
font-weight: 500 !important;
font-variant-numeric: tabular-nums !important;
color: var(--ink, #2B2826) !important;
float: none !important;
margin-left: auto !important;
align-self: start !important;
}
#js-checkout-summary .media-list .product-line-info {
font-size: 11px !important;
color: var(--ink-2, #6B6360) !important;
display: flex !important;
gap: 4px !important;
}
#js-checkout-summary .media-list .product-line-info .label {
background: transparent !important;
padding: 0 !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--ink-2, #6B6360) !important;
font-size: 11px !important;
}
/* Subtotals rows */
#js-checkout-summary .cart-summary-subtotals-container,
#js-checkout-summary .cart-summary-totals {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
margin: 0 !important;
}
#js-checkout-summary .cart-summary-line,
#js-checkout-summary .cart-summary-subtotals {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
font-family: var(--f-body, "Inter", sans-serif) !important;
font-size: 13px !important;
color: var(--ink-2, #6B6360) !important;
padding: 5px 0 !important;
margin: 0 !important;
}
#js-checkout-summary .cart-summary-line .label,
#js-checkout-summary .cart-summary-subtotals .label {
color: var(--ink-2, #6B6360) !important;
font-weight: 400 !important;
font-size: 13px !important;
background: transparent !important;
padding: 0 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
#js-checkout-summary .cart-summary-line .value,
#js-checkout-summary .cart-summary-subtotals .value {
color: var(--ink, #2B2826) !important;
font-variant-numeric: tabular-nums !important;
font-weight: 400 !important;
}
#js-checkout-summary .cart-summary-line.cart-summary-tax { font-size: 11px !important; opacity: 0.85 !important; }
#js-checkout-summary .cart-total {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
padding-top: 14px !important;
margin-top: 8px !important;
border-top: 1px solid var(--line, #E8DFD6) !important;
font-family: var(--f-display, "Playfair Display", serif) !important;
font-size: 16px !important;
font-weight: 500 !important;
}
#js-checkout-summary .cart-total .label,
#js-checkout-summary .cart-total .value {
font-family: var(--f-display, "Playfair Display", serif) !important;
font-weight: 500 !important;
color: var(--ink, #2B2826) !important;
}
#js-checkout-summary .cart-total .value { font-size: 22px !important; font-variant-numeric: tabular-nums !important; }
#js-checkout-summary .cart-summary-discount { color: var(--burgundy, #6B2C2C) !important; }
/* ============================================================
Buttons
============================================================ */
#checkout .continue,
#checkout button[type="submit"]:not(.btn-link):not([data-action="show-password"]),
#checkout button.btn-primary,
#checkout input[type="submit"],
.btn-primary {
background: var(--ink, #2B2826) !important;
color: var(--primary-ink, #fff) !important;
border: 0 !important;
padding: 13px 32px !important;
border-radius: 999px !important;
font-family: var(--f-body, "Inter", sans-serif) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
cursor: pointer !important;
text-decoration: none !important;
display: inline-block !important;
line-height: 1.2 !important;
box-shadow: none !important;
transition: transform 0.15s, box-shadow 0.15s !important;
}
#checkout .continue:hover,
#checkout button[type="submit"]:hover,
.btn-primary:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 18px -8px rgba(0,0,0,0.25) !important;
}
#checkout .btn-secondary,
#checkout .btn-default,
#checkout .btn-outline:not([data-action="show-password"]) {
background: transparent !important;
color: var(--ink, #2B2826) !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
padding: 12px 28px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
}
/* "Show password" inline button keep small */
#checkout button[data-action="show-password"] {
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: transparent !important;
color: var(--ink-2, #6B6360) !important;
border: 0 !important;
padding: 0 12px !important;
font-size: 11px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
height: auto !important;
cursor: pointer !important;
}
#checkout .input-group { position: relative !important; }
#checkout .input-group .input-group-btn { position: absolute; right: 0; top: 0; height: 100%; }
/* Form footer (continue button area) */
#checkout .form-footer {
grid-column: 1 / -1 !important;
margin-top: 24px !important;
padding: 0 !important;
text-align: left !important;
}
#checkout .form-footer .float-xs-right { float: none !important; }
/* ============================================================
Hide guest/login switcher (we removed via JS too)
============================================================ */
#checkout .nav.nav-inline,
#checkout ul.nav-inline,
#checkout .nav-separator,
#checkout #checkout-login-form { display: none !important; }
#checkout .tab-content { padding: 0 !important; margin: 0 !important; }
#checkout .tab-pane#checkout-guest-form,
#checkout #checkout-guest-form { display: block !important; opacity: 1 !important; }
/* ============================================================
Delivery options — flatten nested Bootstrap col-xs/col-sm
============================================================ */
#checkout .delivery-options-list,
#checkout .delivery-options,
#checkout #js-delivery .form-fields {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 20px 0 0 !important;
margin: 0 !important;
width: 100% !important;
}
#checkout #js-delivery { width: 100% !important; }
#checkout .delivery-option {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 18px !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
background: #fff !important;
cursor: pointer !important;
transition: border-color 0.15s, background 0.15s !important;
width: 100% !important;
margin: 0 !important;
flex-wrap: nowrap !important;
}
#checkout .delivery-option:hover { border-color: var(--ink, #2B2826) !important; }
#checkout .delivery-option:has(input:checked) {
border-color: var(--ink, #2B2826) !important;
background: var(--surface-2, #FAF7F2) !important;
}
/* Reset inner Bootstrap col-* widths */
#checkout .delivery-option > [class*="col-"],
#checkout .delivery-option-2 > .row > [class*="col-"],
#checkout .delivery-option-2 > .row > .row > [class*="col-"] {
flex: none !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
}
#checkout .delivery-option .row,
#checkout .delivery-option-2 > .row {
display: flex !important;
align-items: center !important;
margin: 0 !important;
flex: 1 !important;
gap: 12px !important;
}
/* Radio container (col-xs-2) */
#checkout .delivery-option > .text-xs-center {
flex: none !important;
width: 24px !important;
}
#checkout .delivery-option .custom-radio {
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
position: relative !important;
background: transparent !important;
display: inline-block !important;
}
#checkout .delivery-option .custom-radio input { opacity: 0; position: absolute; }
#checkout .delivery-option .custom-radio > span {
display: none;
}
#checkout .delivery-option:has(input:checked) .custom-radio {
border-color: var(--ink, #2B2826) !important;
}
#checkout .delivery-option:has(input:checked) .custom-radio::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--ink, #2B2826);
}
/* Label wrapper (col-xs-10) */
#checkout .delivery-option-2 {
flex: 1 !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
cursor: pointer !important;
}
/* Inner row inside label */
#checkout .delivery-option-2 > .row {
flex: 1 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* Carrier logo (if any) */
#checkout .delivery-option img {
max-width: 40px;
max-height: 32px;
object-fit: contain;
display: block;
}
/* Carrier name */
#checkout .carrier-name {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--ink, #2B2826) !important;
margin: 0 !important;
line-height: 1.3 !important;
display: block !important;
}
/* Carrier delay / description */
#checkout .carrier-delay,
#checkout .delivery-option-2 .carrier-extra-content,
#checkout .delivery-option-2 .carrier-content,
#checkout .delivery-option-2 .col-md-7 {
font-size: 12px !important;
color: var(--ink-2, #6B6360) !important;
line-height: 1.4 !important;
display: block !important;
margin: 2px 0 0 !important;
}
/* Wrap name + delay in same column */
#checkout .delivery-option-2 .col-sm-5,
#checkout .delivery-option-2 > .row > div:first-child {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
flex: 1 !important;
}
/* Carrier price - push to right */
#checkout .carrier-price {
margin-left: auto !important;
font-size: 15px !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums !important;
color: var(--ink, #2B2826) !important;
white-space: nowrap !important;
}
/* Hide duplicate carrier name (PS sometimes renders it twice) */
#checkout .delivery-option-2 .carrier-name + .carrier-name { display: none !important; }
/* Hide stray bootstrap layout helpers */
#checkout .delivery-option .clearfix { display: none !important; }
/* === Collapsed step body: hidden unless we re-open via edit === */
#checkout .checkout-step:not(.-current):not(.is-editing) > .checkout-step-body { display: none !important; }
#checkout .checkout-step.is-editing > .checkout-step-body { display: block !important; }
#checkout .checkout-step.is-editing { border-color: var(--ink) !important; box-shadow: 0 2px 12px -6px rgba(43, 40, 38, 0.12) !important; }
#checkout .checkout-step.is-editing .checkout-step-head { border-bottom: 1px solid var(--line); }
/* Hide edit link on the currently active or editing step */
#checkout .checkout-step.-current .edit,
#checkout .checkout-step.is-editing .edit { display: none !important; }
/* ============================================================
Address selector (Step 2) — clean card layout
============================================================ */
#checkout .address-selector-list,
#checkout #addresses-step-content {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 20px;
}
#checkout article.address,
#checkout .address-item {
display: grid !important;
grid-template-columns: 20px 1fr auto !important;
align-items: start !important;
gap: 14px !important;
padding: 16px !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
background: #fff !important;
cursor: pointer !important;
margin: 0 !important;
width: 100% !important;
}
#checkout article.address:hover { border-color: var(--ink, #2B2826) !important; }
#checkout article.address.selected,
#checkout article.address:has(input:checked) {
border-color: var(--ink, #2B2826) !important;
background: var(--surface-2, #FAF7F2) !important;
}
#checkout article.address header,
#checkout article.address .address-alias {
font-weight: 600 !important;
color: var(--ink, #2B2826) !important;
font-size: 14px !important;
margin: 0 !important;
display: block !important;
}
#checkout article.address address {
font-style: normal !important;
font-size: 13px !important;
color: var(--ink-2, #6B6360) !important;
line-height: 1.5 !important;
margin: 4px 0 8px !important;
}
#checkout article.address footer {
display: flex !important;
gap: 12px !important;
font-size: 12px !important;
margin-top: 8px !important;
}
#checkout article.address footer a {
color: var(--ink-2, #6B6360) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--line, #E8DFD6) !important;
padding-bottom: 1px !important;
}
#checkout article.address footer a:hover { color: var(--ink, #2B2826) !important; border-color: var(--ink, #2B2826) !important; }
/* The PS radio input - if present */
#checkout article.address input[type="radio"] {
flex-shrink: 0;
margin: 4px 0 0;
}
/* ============================================================
Delivery options — fix overflow on long names/delay text
============================================================ */
#checkout .delivery-option {
flex-wrap: nowrap !important;
overflow: hidden !important;
min-width: 0 !important;
}
#checkout .delivery-option-2 {
min-width: 0 !important;
overflow: hidden !important;
flex: 1 1 0% !important;
}
#checkout .delivery-option-2 > .row {
flex: 1 !important;
min-width: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
}
/* Inner row (name/delay column) - force vertical stack and allow wrap */
#checkout .delivery-option-2 > .row > div {
min-width: 0 !important;
flex: 1 !important;
}
#checkout .delivery-option-2 .col-sm-5,
#checkout .delivery-option-2 > .row > div:first-child {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 2px !important;
min-width: 0 !important;
flex: 1 !important;
}
#checkout .carrier-name,
#checkout .delivery-option-2 .carrier-name {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--ink, #2B2826) !important;
line-height: 1.3 !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-word !important;
display: block !important;
width: 100% !important;
}
#checkout .carrier-delay,
#checkout .delivery-option-2 .carrier-delay,
#checkout .delivery-option-2 .col-md-7 {
font-size: 12px !important;
color: var(--ink-2, #6B6360) !important;
line-height: 1.4 !important;
white-space: normal !important;
word-wrap: break-word !important;
word-break: break-word !important;
display: block !important;
width: 100% !important;
margin: 2px 0 0 !important;
}
#checkout .carrier-price {
margin-left: auto !important;
font-size: 15px !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* Edit-mode step: white card (override -complete cream bg) */
#checkout .checkout-step.is-editing { background: #fff !important; }
/* Force white bg on editing step regardless of -complete / collapsed state */
#checkout body .checkout-step.is-editing,
#checkout .checkout-step.is-editing,
#checkout .checkout-step.-complete.is-editing,
#checkout .checkout-step.-complete:not(.-current).is-editing,
#checkout .checkout-step.collapsed.is-editing,
#checkout .checkout-step.is-editing.collapsed { background: #fff !important; }
/* ============================================================
Address selector (Step 2) — actual PS markup
============================================================ */
#checkout .address-selector,
#checkout #delivery-addresses,
#checkout #invoice-addresses {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
margin: 0 0 16px !important;
padding: 0 !important;
width: 100% !important;
}
@media (max-width: 720px) {
#checkout .address-selector,
#checkout #delivery-addresses { grid-template-columns: 1fr !important; }
}
#checkout article.address-item {
display: block !important;
width: 100% !important;
max-width: 100% !important;
flex: none !important;
padding: 0 !important;
margin: 0 !important;
}
#checkout .address-item .box-adress {
display: block !important;
width: 100% !important;
padding: 16px 20px !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
background: #fff !important;
transition: border-color 0.15s, background 0.15s !important;
}
#checkout .address-item.selected .box-adress {
border-color: var(--ink, #2B2826) !important;
background: var(--surface-2, #FAF7F2) !important;
}
#checkout .address-item header {
margin: 0 0 12px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
/* Critical: radio-block was a flex column making EACH child a row. Force grid layout */
#checkout .address-item .radio-block {
display: grid !important;
grid-template-columns: 20px 1fr !important;
grid-template-rows: auto auto !important;
gap: 4px 12px !important;
align-items: start !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
#checkout .address-item .custom-radio {
grid-row: 1 / span 2 !important;
align-self: start !important;
margin-top: 2px !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
position: relative !important;
display: inline-block !important;
background: transparent !important;
flex: none !important;
}
#checkout .address-item.selected .custom-radio { border-color: var(--ink, #2B2826) !important; }
#checkout .address-item.selected .custom-radio::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--ink, #2B2826);
}
#checkout .address-item .custom-radio input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
#checkout .address-item .custom-radio > span { display: none; }
#checkout .address-item .address-alias {
grid-column: 2 !important;
grid-row: 1 !important;
font-family: var(--f-body) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--ink, #2B2826) !important;
letter-spacing: 0 !important;
text-transform: none !important;
margin: 0 !important;
display: block !important;
width: 100% !important;
}
#checkout .address-item .address {
grid-column: 2 !important;
grid-row: 2 !important;
font-size: 13px !important;
color: var(--ink-2, #6B6360) !important;
line-height: 1.55 !important;
display: block !important;
width: 100% !important;
font-weight: 400 !important;
}
#checkout .address-item .address br { display: block !important; }
/* hr separator */
#checkout .address-item hr {
margin: 12px 0 !important;
border: 0 !important;
border-top: 1px solid var(--line, #E8DFD6) !important;
}
/* Footer with Modificar / Eliminar */
#checkout .address-item .address-footer {
display: flex !important;
gap: 16px !important;
font-size: 12px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
}
#checkout .address-item .address-footer a {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
color: var(--ink-2, #6B6360) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--line, #E8DFD6) !important;
padding-bottom: 1px !important;
cursor: pointer !important;
opacity: 1 !important;
pointer-events: auto !important;
}
#checkout .address-item .address-footer a:hover {
color: var(--ink, #2B2826) !important;
border-color: var(--ink, #2B2826) !important;
}
#checkout .address-item .address-footer a .material-icons {
font-size: 14px !important;
display: inline-block !important;
}
/* ============================================================
Step buttons (continue/save/cancel) — refined, not huge
============================================================ */
/* Hide the JS-only submit fallbacks */
#checkout .ps-hidden-by-js,
#checkout button.ps-hidden-by-js { display: none !important; }
/* Form footer with continue button */
#checkout .form-footer,
#checkout footer.form-footer,
#checkout .checkout-step-body > footer,
#checkout .checkout-step .clearfix:has(button[type="submit"]) {
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
gap: 12px !important;
margin: 20px 0 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
width: 100% !important;
}
/* Primary continue button — medium pill, not huge */
#checkout button.continue,
#checkout button[type="submit"].continue,
#checkout button[type="submit"].btn-primary,
#checkout .form-footer button[type="submit"],
#checkout #js-delivery button[type="submit"] {
height: 44px !important;
padding: 0 24px !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
border-radius: 999px !important;
background: var(--ink, #2B2826) !important;
color: #fff !important;
border: 0 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 160px !important;
white-space: nowrap !important;
float: none !important;
width: auto !important;
transition: background 0.15s, transform 0.15s, box-shadow 0.15s !important;
box-shadow: none !important;
line-height: 1 !important;
}
#checkout button.continue:hover,
#checkout button[type="submit"]:hover:not([data-action="show-password"]) {
background: var(--burgundy, #6B2C2C) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15) !important;
}
/* "Save" button at end of address-selector — show but smaller */
#checkout .address-selector + p > button[type="submit"],
#checkout button.form-control-submit {
height: 40px !important;
padding: 0 20px !important;
font-size: 12px !important;
border-radius: 999px !important;
background: var(--ink, #2B2826) !important;
color: #fff !important;
border: 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
cursor: pointer !important;
display: inline-flex !important;
margin: 0 !important;
}
/* Cancel / back link as ghost */
#checkout .step-cancel,
#checkout .back-link,
#checkout a[data-step-cancel] {
font-size: 12px !important;
color: var(--ink-2, #6B6360) !important;
text-decoration: none !important;
padding: 0 8px !important;
border-bottom: 1px solid currentColor !important;
cursor: pointer !important;
}
#checkout .step-cancel:hover { color: var(--ink, #2B2826) !important; }
/* Remove float helpers that misalign */
#checkout .form-footer .float-xs-right,
#checkout .form-footer .float-xs-left { float: none !important; }
/* === Primary buttons -> burgundy per handoff === */
#checkout button.continue,
#checkout button[type="submit"].continue,
#checkout button[type="submit"].btn-primary,
#checkout .form-footer button[type="submit"],
#checkout #js-delivery button[type="submit"],
#checkout button.form-control-submit,
#checkout .address-selector + p > button[type="submit"] {
background: var(--burgundy, #6B2C2C) !important;
}
#checkout button.continue:hover,
#checkout button[type="submit"]:hover:not([data-action="show-password"]) {
background: var(--burgundy-deep, #501F1F) !important;
}
/* === Only one step body visible at a time === */
/* When some step is being edited, collapse the current step body */
body#checkout:has(.checkout-step.is-editing) #checkout-process .checkout-step.-current:not(.is-editing) > .checkout-step-body {
display: none !important;
}
/* And dim the current step head visually since it is paused */
body#checkout:has(.checkout-step.is-editing) #checkout-process .checkout-step.-current:not(.is-editing) {
background: var(--surface-2, #FAF7F2) !important;
border-color: var(--line, #E8DFD6) !important;
box-shadow: none !important;
}
/* ============================================================
* 2026-05-26 22:50 — Botones checkout: alinear con design system
* Fix reportado: GUARDAR / CONTINUAR demasiado grandes y negros.
* Causa: 3 overrides duplicados arriba (L710, L1297, L1366) con
* min-width: 160px + uppercase + letter-spacing: 0.06em los hacían
* visualmente oversized; el cascade entre ellos resultaba en negro
* por fallback de --burgundy en data-palette="default".
* Fix: ÚLTIMO override (mayor cascade) que mapea al token --primary
* directamente (que en :root resuelve a burgundy real), elimina
* min-width forzado, uppercase y letter-spacing excesivo.
* Source: design_handoff_smile_responsive_qa/FIXES_PATTERNS.md §3 (buttons)
* ============================================================ */
body#checkout .continue,
body#checkout button[type="submit"]:not(.btn-link):not([data-action="show-password"]),
body#checkout button.btn-primary,
body#checkout button.continue,
body#checkout button.form-control-submit,
body#checkout input[type="submit"],
body#checkout .form-footer button[type="submit"],
body#checkout #js-delivery button[type="submit"],
body#checkout .address-selector + p > button[type="submit"] {
height: 44px !important;
min-width: auto !important;
padding: 0 24px !important;
background: var(--primary) !important;
color: var(--primary-ink, #fff) !important;
border: 0 !important;
border-radius: 999px !important;
font-family: var(--f-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
white-space: nowrap !important;
cursor: pointer !important;
box-shadow: none !important;
transition: background 0.18s var(--ease, ease), transform 0.15s var(--ease, ease) !important;
}
body#checkout .continue:hover,
body#checkout button[type="submit"]:hover:not([data-action="show-password"]),
body#checkout button.btn-primary:hover {
background: var(--primary-hover) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px -4px rgba(43, 40, 38, 0.18) !important;
}
body#checkout .continue:active,
body#checkout button[type="submit"]:active:not([data-action="show-password"]),
body#checkout button.btn-primary:active {
transform: translateY(0);
}
/* ============================================================
* 2026-05-26 23:00 — Delivery options overflow fix
* Reporte: carrier-name + carrier-delay + carrier-price salían del
* contenedor en mobile; no había wrap. Causa: flex-wrap:nowrap +
* ausencia de min-width:0 en flex children → texto largo empuja
* el contenedor.
* Fix: permitir min-width:0 + overflow-wrap en textos largos; en
* viewports <600px permitir flex-wrap para que el precio caiga abajo
* si no cabe en la misma línea.
* Source: design_handoff_smile_responsive_qa/FIXES_PATTERNS.md §2 (overflow)
* ============================================================ */
body#checkout .delivery-option {
flex-wrap: wrap !important; /* permitir wrap si no cabe */
min-width: 0 !important;
}
body#checkout .delivery-option > [class*="col-"],
body#checkout .delivery-option-2,
body#checkout .delivery-option-2 > .row,
body#checkout .delivery-option-2 > .row > div {
min-width: 0 !important;
}
body#checkout .delivery-option-2 .col-sm-5,
body#checkout .delivery-option-2 > .row > div:first-child {
flex: 1 1 0% !important;
min-width: 0 !important;
}
body#checkout .carrier-name,
body#checkout .carrier-delay,
body#checkout .delivery-option-2 .carrier-extra-content,
body#checkout .delivery-option-2 .carrier-content,
body#checkout .delivery-option-2 .col-md-7 {
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
max-width: 100% !important;
}
/* Precio: si no cabe en la misma línea con el texto largo, baja a su propia línea */
@media (max-width: 600px) {
body#checkout .delivery-option-2 > .row {
flex-wrap: wrap !important;
}
body#checkout .carrier-price {
margin-left: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
}
}
/* Bonus: textarea comentario también respiratoria — no overflow */
body#checkout textarea,
body#checkout textarea.form-control {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
overflow-wrap: anywhere !important;
}
/* ============================================================
* 2026-05-27 — Delivery options layout overhaul (fix overflow real)
* Iteración 2: el bloque previo (L828 \`flex: none\`) bloqueaba shrink.
* Estrategia: descartar el grid bootstrap col-* y usar flex con wrap
* + min-width: 0 en todos los descendientes.
* Layout final:
* [radio] [logo] [name (+ delay debajo en mobile)] ............... [precio]
* En mobile <600px: [logo + name] | [precio] / [delay full width abajo]
* ============================================================ */
/* Padre inmediato (.row dentro de label.delivery-option-2) — flex con wrap */
body#checkout .delivery-option-2 > .row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 14px !important;
width: 100% !important;
margin: 0 !important;
min-width: 0 !important;
}
/* Override del flex:none de L828 — reset todos los col-* directos */
body#checkout .delivery-option-2 > .row > [class*="col-"] {
flex: 0 1 auto !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
}
/* Col 1 (.col-sm-5): logo + carrier-name — toma todo el espacio que pueda */
body#checkout .delivery-option-2 > .row > .col-sm-5 {
flex: 1 1 60% !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
}
/* Inner row dentro de .col-sm-5 — img + name lado a lado */
body#checkout .delivery-option-2 .col-sm-5 > .row {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
min-width: 0 !important;
width: 100% !important;
}
body#checkout .delivery-option-2 .col-sm-5 > .row > .col-xs-3 {
flex: 0 0 auto !important;
width: 40px !important;
min-width: 0 !important;
padding: 0 !important;
}
body#checkout .delivery-option-2 .col-sm-5 > .row > .col-xs-9 {
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 0 !important;
}
/* Col 2 (.col-sm-4): carrier-delay — siguiente línea full width */
body#checkout .delivery-option-2 > .row > .col-sm-4 {
flex: 1 1 100% !important;
order: 3 !important;
min-width: 0 !important;
padding-left: 50px !important; /* alineado con name (saltea logo) */
}
/* Col 3 (.col-sm-3): precio — derecha, no shrink */
body#checkout .delivery-option-2 > .row > .col-sm-3 {
flex: 0 0 auto !important;
order: 2 !important;
margin-left: auto !important;
text-align: right !important;
padding: 0 !important;
}
/* Texto: permitir wrap natural */
body#checkout .carrier-name,
body#checkout .carrier-delay {
display: block !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
min-width: 0 !important;
max-width: 100% !important;
}
body#checkout .carrier-price {
white-space: nowrap !important;
display: inline-block !important;
}
/* Mobile: delay sin indent (no hay espacio) */
@media (max-width: 600px) {
body#checkout .delivery-option-2 > .row > .col-sm-4 {
padding-left: 0 !important;
}
}
/* Textarea de comentario: cols=120 HTML attr hace que pida 960px — forzar 100% */
body#checkout textarea#delivery_message,
body#checkout .order-options textarea {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
resize: vertical !important;
min-height: 80px !important;
}
/* ============================================================
* 2026-05-27 — Eliminar verde de mensajes informativos en checkout
* Reporte: "La dirección seleccionada se utilizará...", "La dirección
* de facturación difiere...", "Crear una cuenta (opcional)" salen
* verdes (#5cb85c bootstrap legacy). Verde = success semánticamente,
* pero esos son info/hints, no confirmaciones.
* Fix: mapear todos a paleta Claude Design (gris cálido var(--ink-2)
* para info pasiva; burgundy para acciones/links activos).
* Source: design_handoff_smile_responsive_qa CLAUDE.md §4.9 (color
* no es único indicador) + design system tokens.
* ============================================================ */
/* Kill bootstrap success greens en contexto checkout */
body#checkout .text-success,
body#checkout .text-success-color,
body#checkout .form-control-success {
color: var(--ink-2) !important;
}
/* Links de acción info (no son botones — son textos que linkan) */
body#checkout a[data-link-action="different-invoice-address"],
body#checkout a[data-link-action="show-login-form"],
body#checkout .add-address > a {
color: var(--burgundy) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 1px !important;
}
body#checkout a[data-link-action="different-invoice-address"]:hover,
body#checkout a[data-link-action="show-login-form"]:hover,
body#checkout .add-address > a:hover {
color: var(--burgundy-deep) !important;
text-decoration-thickness: 2px !important;
}
/* "Crear una cuenta (opcional)" — el con span.font-weight-bold + (optional) */
body#checkout #checkout-guest-form p:has(> span.font-weight-bold),
body#checkout .tab-pane p > span.font-weight-bold {
color: var(--ink) !important;
}
body#checkout #checkout-guest-form p > span:not(.font-weight-bold),
body#checkout .tab-pane p > span.text-muted {
color: var(--ink-2) !important;
}
/* Cualquier
de info dentro de los steps que aún quede verde */
body#checkout .checkout-step p:not(.alert):not(.add-address),
body#checkout #addresses-step-content p:not(.alert),
body#checkout #js-checkout-summary p:not(.alert) {
color: var(--ink-2) !important;
}
/* Inline green styles legacy — neutralizar */
body#checkout [style*="color: green"],
body#checkout [style*="color:#5cb85c"],
body#checkout [style*="color: #5cb85c"],
body#checkout [style*="color: rgb(92, 184, 92)"] {
color: var(--ink-2) !important;
}
/* Si "La dirección seleccionada..." sale en un .well, .panel-body o div sin clase, fuerzar herencia */
body#checkout .panel-body,
body#checkout .well,
body#checkout #addresses-step-content > p {
color: var(--ink-2) !important;
}
/* ============================================================
* 2026-05-27 — Step is-editing: visual robusto
* Garantiza fondo blanco, body visible y oculta otros steps cuando
* cualquier step esté en is-editing. Complementa el JS normalizado
* (smile-cart.js) para que el toggle entre pasos no deje state
* corrupto visualmente.
* ============================================================ */
body#checkout .checkout-step.is-editing {
background: #fff !important;
border-color: var(--ink) !important;
box-shadow: 0 4px 16px -8px rgba(43, 40, 38, 0.18) !important;
}
body#checkout .checkout-step.is-editing > .checkout-step-body {
display: block !important;
background: #fff !important;
padding: 16px 20px 24px !important;
}
/* Cuando hay un step is-editing, colapsa TODOS los demás bodies (incluso el -current) */
body#checkout:has(.checkout-step.is-editing) #checkout-process .checkout-step:not(.is-editing) > .checkout-step-body,
body#checkout:has(.checkout-step.is-editing) .checkout-step:not(.is-editing) > .checkout-step-body {
display: none !important;
}
/* Botón Editar: siempre clickeable en steps -reachable o -complete que NO sean is-editing/-current */
body#checkout .checkout-step.-reachable:not(.-current):not(.is-editing) > .checkout-step-head .edit,
body#checkout .checkout-step.-complete:not(.-current):not(.is-editing) > .checkout-step-head .edit {
display: inline-block !important;
cursor: pointer !important;
pointer-events: auto !important;
color: var(--burgundy) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
font-size: 13px !important;
font-weight: 500 !important;
}
body#checkout .checkout-step.-reachable .edit:hover,
body#checkout .checkout-step.-complete .edit:hover {
color: var(--burgundy-deep) !important;
}
/* ============================================================
* 2026-05-27 v2 — Fix botón Editar visibility + "dos líneas"
* Observaciones del DOM real:
* - Step 1 tiene -current AND -complete simultáneamente (PS no
* limpia -current al completar). Mi regla previa ocultaba .edit
* de -current → desaparecía botón Editar de un step ya completado.
* - "Dos líneas" = underline del link .edit + border-bottom del head.
* Fix: Editar visible en CUALQUIER step que tenga -complete o
* -reachable, sin importar -current, salvo si está siendo editado.
* Quitar underline base; aparece solo en hover/focus.
* ============================================================ */
/* Override exhaustivo de reglas previas — Editar visible por default */
body#checkout .checkout-step.-complete > .checkout-step-head .edit,
body#checkout .checkout-step.-reachable > .checkout-step-head .edit,
body#checkout .checkout-step.-current.-complete > .checkout-step-head .edit,
body#checkout .checkout-step.done > .checkout-step-head .edit {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
cursor: pointer !important;
color: var(--burgundy) !important;
text-decoration: none !important; /* sin underline base (evita "dos líneas") */
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
border: 0 !important;
background: transparent !important;
margin-left: auto !important;
}
/* Hover/focus: aparece underline con offset */
body#checkout .checkout-step > .checkout-step-head .edit:hover,
body#checkout .checkout-step > .checkout-step-head .edit:focus-visible {
color: var(--burgundy-deep) !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
text-decoration-thickness: 1.5px !important;
}
/* SOLO ocultar Editar cuando está siendo editado activamente */
body#checkout .checkout-step.is-editing > .checkout-step-head .edit {
display: none !important;
}
/* Quitar border-bottom del head en is-editing — el body ya tiene su propio padding */
body#checkout .checkout-step.is-editing > .checkout-step-head {
border-bottom: 0 !important;
}
/* Asegurar el head como flex row con Editar empujado a la derecha */
body#checkout .checkout-step > .checkout-step-head {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 16px 20px !important;
}
body#checkout .checkout-step > .checkout-step-head .checkout-step-title {
flex: 1 1 auto;
min-width: 0;
}
/* ============================================================
* 2026-05-27 — Paso PAGO completo en Claude Design
* Reporte: items legacy at_nova, botón confirmar sin texto visible,
* selects/radios con color tomate.
* Fix: estilizar payment-option, additional-information, conditions,
* order-summary, totales y botón de confirmar.
* Source: design_handoff_smile_responsive_qa/FIXES_PATTERNS.md §3-5
* ============================================================ */
/* ============ Payment options container ============ */
body#checkout .payment-options {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 20px 0 0 !important;
}
/* Cada payment-option como pill estilo delivery-option */
body#checkout .payment-option,
body#checkout div[id^="payment-option-"][id$="-container"] {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 18px 20px !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
background: #fff !important;
cursor: pointer !important;
transition: border-color 0.15s, background 0.15s !important;
width: 100% !important;
margin: 0 !important;
min-width: 0 !important;
}
body#checkout .payment-option:hover {
border-color: var(--ink, #2B2826) !important;
}
body#checkout .payment-option:has(input:checked) {
border-color: var(--ink, #2B2826) !important;
background: var(--surface-2, #FAF7F2) !important;
}
/* Custom-radio en payment (igual look que delivery) */
body#checkout .payment-option .custom-radio,
body#checkout .payment-options .custom-radio {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
border-radius: 50% !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
background: transparent !important;
position: relative !important;
display: inline-block !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
body#checkout .payment-option .custom-radio input,
body#checkout .payment-options .custom-radio input {
opacity: 0 !important;
position: absolute !important;
inset: 0 !important;
}
body#checkout .payment-option .custom-radio > span,
body#checkout .payment-options .custom-radio > span { display: none !important; }
body#checkout .payment-option:has(input:checked) .custom-radio { border-color: var(--ink, #2B2826) !important; }
body#checkout .payment-option:has(input:checked) .custom-radio::after {
content: "" !important;
position: absolute !important;
inset: 3px !important;
border-radius: 50% !important;
background: var(--ink, #2B2826) !important;
}
/* Label dentro de payment-option */
body#checkout .payment-option > label,
body#checkout .payment-option label[for^="payment-option-"] {
flex: 1 1 auto !important;
margin: 0 !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--ink, #2B2826) !important;
cursor: pointer !important;
min-width: 0 !important;
}
body#checkout .payment-option label img {
max-height: 32px !important;
max-width: 80px !important;
object-fit: contain !important;
vertical-align: middle !important;
margin-right: 10px !important;
}
/* Hide stray "Elegir" form helper button */
body#checkout .payment-option form.ps-hidden-by-js,
body#checkout .payment-option button[name="select_payment_option"] { display: none !important; }
/* ============ Additional info (bank info / instrucciones) ============ */
body#checkout .additional-information,
body#checkout [id$="-additional-information"] {
margin: 0 0 12px !important;
padding: 16px 18px !important;
background: var(--surface-2, #FAF7F2) !important;
border: 1px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: var(--ink-2, #6B6360) !important;
}
body#checkout .additional-information p { margin: 0 0 8px !important; }
body#checkout .additional-information p:last-child { margin-bottom: 0 !important; }
body#checkout .additional-information dl {
margin: 8px 0 0 !important;
display: grid !important;
grid-template-columns: max-content 1fr !important;
gap: 4px 16px !important;
font-size: 13px !important;
}
body#checkout .additional-information dt {
font-weight: 600 !important;
color: var(--ink, #2B2826) !important;
}
body#checkout .additional-information dd {
margin: 0 !important;
color: var(--ink-2, #6B6360) !important;
}
/* ============ Terms & conditions (checkbox) ============ */
body#checkout #conditions-to-approve {
margin: 24px 0 16px !important;
padding: 16px 18px !important;
background: #fff !important;
border: 1px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
}
body#checkout #conditions-to-approve ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body#checkout #conditions-to-approve li {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
}
body#checkout #conditions-to-approve .float-xs-left { float: none !important; }
body#checkout #conditions-to-approve .custom-checkbox,
body#checkout #conditions-to-approve .custom-checkbox span:first-child {
width: 20px !important; height: 20px !important;
flex: 0 0 20px !important;
display: inline-block !important;
position: relative !important;
border-radius: 4px !important;
border: 1.5px solid var(--line) !important;
background: #fff !important;
margin: 0 !important;
}
body#checkout #conditions-to-approve .custom-checkbox input[type="checkbox"] {
opacity: 0 !important; position: absolute !important; inset: 0 !important;
width: 100% !important; height: 100% !important; margin: 0 !important;
cursor: pointer !important;
}
body#checkout #conditions-to-approve .custom-checkbox input[type="checkbox"]:checked + span {
background: var(--ink) !important;
border-color: var(--ink) !important;
}
body#checkout #conditions-to-approve .custom-checkbox input[type="checkbox"]:checked + span::after {
content: "" !important;
position: absolute !important;
left: 5px !important; top: 1px !important;
width: 6px !important; height: 11px !important;
border: solid #fff !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
}
body#checkout #conditions-to-approve .material-icons { display: none !important; }
body#checkout #conditions-to-approve .condition-label,
body#checkout #conditions-to-approve label.js-terms {
font-size: 14px !important;
color: var(--ink, #2B2826) !important;
line-height: 1.5 !important;
margin: 0 !important;
flex: 1 1 auto !important;
}
body#checkout #conditions-to-approve a {
color: var(--burgundy) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
/* ============ Order summary final (revisión pedido) ============ */
body#checkout #order-summary-content {
margin-top: 24px !important;
padding: 20px !important;
background: var(--surface-2, #FAF7F2) !important;
border: 1px solid var(--line) !important;
border-radius: 10px !important;
}
body#checkout #order-summary-content h3,
body#checkout #order-summary-content h4 {
font-family: var(--f-display) !important;
color: var(--ink) !important;
font-weight: 500 !important;
margin: 8px 0 12px !important;
}
body#checkout #order-summary-content h4.h4 { font-size: 18px !important; }
body#checkout #order-summary-content h4.h5 { font-size: 15px !important; }
body#checkout #order-summary-content .step-edit,
body#checkout #order-summary-content .js-edit-addresses,
body#checkout #order-summary-content .js-edit-delivery {
font-size: 13px !important;
color: var(--burgundy) !important;
font-family: var(--f-body) !important;
font-weight: 500 !important;
margin-left: 8px !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
body#checkout #order-summary-content .step-edit:hover {
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
body#checkout #order-summary-content .step-edit .material-icons {
font-size: 16px !important;
color: var(--burgundy) !important;
}
body#checkout #order-summary-content .card,
body#checkout #order-summary-content .card.noshadow {
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
body#checkout #order-summary-content .card-block { padding: 14px 16px !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--ink-2) !important; }
body#checkout #order-summary-content .addresshead { margin: 0 0 8px !important; color: var(--ink) !important; font-weight: 600 !important; }
/* Summary selected carrier */
body#checkout #order-summary-content .summary-selected-carrier {
margin-top: 8px !important;
padding: 12px 14px !important;
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 8px !important;
}
body#checkout #order-summary-content .summary-selected-carrier .carrier-name {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--ink) !important;
}
body#checkout #order-summary-content .summary-selected-carrier .carrier-delay { font-size: 12px !important; color: var(--ink-2) !important; }
body#checkout #order-summary-content .summary-selected-carrier .carrier-price { font-weight: 600 !important; color: var(--ink) !important; }
/* Order items list */
body#checkout #order-items { padding: 0 !important; margin-top: 12px !important; }
body#checkout #order-items .card-title { font-size: 12px !important; font-weight: 500 !important; color: var(--ink-2) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 0 !important; margin: 0 0 8px !important; }
body#checkout .order-confirmation-table {
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 8px !important;
padding: 12px !important;
}
body#checkout .order-line { padding: 8px 0 !important; border-bottom: 1px solid var(--line-2) !important; align-items: center !important; }
body#checkout .order-line:last-of-type { border-bottom: 0 !important; }
body#checkout .order-line img { max-width: 60px !important; border-radius: 6px !important; }
body#checkout .order-line .details a { color: var(--ink) !important; text-decoration: none !important; font-size: 14px !important; font-weight: 500 !important; }
body#checkout .order-line .details a:hover { color: var(--burgundy) !important; }
body#checkout .order-line .qty { font-size: 13px !important; color: var(--ink-2) !important; }
body#checkout .order-line .qty .bold { color: var(--ink) !important; font-weight: 600 !important; }
/* Tabla de totales */
body#checkout .order-confirmation-table table {
width: 100% !important;
margin-top: 12px !important;
border-collapse: collapse !important;
}
body#checkout .order-confirmation-table table tr td {
padding: 6px 0 !important;
font-size: 13px !important;
color: var(--ink-2) !important;
}
body#checkout .order-confirmation-table table tr td:last-child {
text-align: right !important;
font-variant-numeric: tabular-nums !important;
color: var(--ink) !important;
}
body#checkout .order-confirmation-table table tr.total-value td {
padding-top: 12px !important;
border-top: 1px solid var(--line) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--ink) !important;
text-transform: none !important;
}
body#checkout .order-confirmation-table table tr.total-value .text-uppercase { text-transform: none !important; letter-spacing: 0 !important; }
body#checkout .order-confirmation-table table tr.sub td { font-size: 11px !important; color: var(--ink-3) !important; }
/* ============ Botón confirmar pago — visible y readable ============ */
body#checkout #payment-confirmation { margin-top: 20px !important; }
body#checkout #payment-confirmation button.btn-primary,
body#checkout #payment-confirmation button[type="submit"] {
width: 100% !important;
height: 52px !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
background: var(--primary) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: auto !important;
}
body#checkout #payment-confirmation button.btn-primary:disabled,
body#checkout #payment-confirmation button[type="submit"]:disabled,
body#checkout #payment-confirmation button.btn-primary[disabled],
body#checkout #payment-confirmation button[type="submit"][disabled] {
background: var(--ink-3, #9A928B) !important;
color: #fff !important;
opacity: 1 !important;
cursor: not-allowed !important;
}
body#checkout #payment-confirmation button.btn-primary:not(:disabled):hover {
background: var(--primary-hover) !important;
}
/* Alert: "asegúrate de elegir método de pago" */
body#checkout .js-alert-payment-conditions,
body#checkout #payment-confirmation .alert-danger {
background: #FFF4F2 !important;
border: 1px solid var(--burgundy) !important;
color: var(--burgundy-deep) !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-size: 13px !important;
margin-top: 12px !important;
line-height: 1.5 !important;
}
body#checkout .js-alert-payment-conditions a,
body#checkout .alert-danger a {
color: var(--burgundy) !important;
text-decoration: underline !important;
font-weight: 500 !important;
}
/* ============ Override radios con color "tomate" (legacy bootstrap) ============ */
body#checkout input[type="radio"],
body#checkout input[type="checkbox"] {
accent-color: var(--ink) !important;
}
/* Asegurar que ningún custom-radio o checkbox tenga background tomate */
body#checkout .custom-radio,
body#checkout .custom-checkbox {
background: transparent !important;
}
body#checkout .custom-radio:has(input:checked),
body#checkout .custom-radio.checked {
background: transparent !important;
border-color: var(--ink) !important;
}
/* ============================================================
* 2026-05-27 v2 — Fix doble checkbox + botón Pedido sin texto
* Bugs reportados:
* 1. Checkbox terms con doble cuadrado (mi CSS previo estilizaba
* OUTER .custom-checkbox Y INNER span:first-child).
* 2. Botón "Pedido con obligación de pago" sin texto visible —
* posiblemente regla legacy con text-indent o font-size: 0.
* Fix: refactor checkbox (solo inner span dibuja el cuadrado);
* override exhaustivo en el botón confirmar.
* ============================================================ */
/* ============ Reset checkbox previo y aplicar bien ============ */
body#checkout #conditions-to-approve .custom-checkbox,
body#checkout #conditions-to-approve .custom-checkbox span:first-child {
/* reset reglas previas que generaban doble caja */
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
}
body#checkout #conditions-to-approve .custom-checkbox {
display: inline-block !important;
position: relative !important;
width: 20px !important;
height: 20px !important;
flex: 0 0 20px !important;
margin: 0 !important;
padding: 0 !important;
}
body#checkout #conditions-to-approve .custom-checkbox > input[type="checkbox"] {
opacity: 0 !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
cursor: pointer !important;
z-index: 2 !important;
}
body#checkout #conditions-to-approve .custom-checkbox > span {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 20px !important;
height: 20px !important;
border: 1.5px solid var(--line) !important;
border-radius: 4px !important;
background: #fff !important;
box-shadow: none !important;
z-index: 1 !important;
pointer-events: none !important;
}
body#checkout #conditions-to-approve .custom-checkbox > input[type="checkbox"]:checked + span,
body#checkout #conditions-to-approve .custom-checkbox > input.ps-shown-by-js:checked + span {
background: var(--ink) !important;
border-color: var(--ink) !important;
}
body#checkout #conditions-to-approve .custom-checkbox > input[type="checkbox"]:checked + span::after,
body#checkout #conditions-to-approve .custom-checkbox > input.ps-shown-by-js:checked + span::after {
content: "" !important;
position: absolute !important;
left: 5px !important;
top: 1px !important;
width: 6px !important;
height: 11px !important;
border: solid #fff !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
}
body#checkout #conditions-to-approve .custom-checkbox i,
body#checkout #conditions-to-approve .custom-checkbox .material-icons,
body#checkout #conditions-to-approve .custom-checkbox .checkbox-checked {
display: none !important;
}
/* ============ Botón "Pedido con obligación de pago" — texto visible siempre ============ */
body#checkout #payment-confirmation button,
body#checkout #payment-confirmation button.btn-primary,
body#checkout #payment-confirmation button[type="submit"],
body#checkout #payment-confirmation button.btn-primary:disabled,
body#checkout #payment-confirmation button[type="submit"]:disabled,
body#checkout #payment-confirmation button.btn-primary[disabled],
body#checkout #payment-confirmation button[type="submit"][disabled],
body#checkout #payment-confirmation .ps-shown-by-js > button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 52px !important;
height: auto !important;
padding: 14px 24px !important;
margin: 0 !important;
border: 0 !important;
border-radius: 999px !important;
font-family: var(--f-body) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
line-height: 1.2 !important;
text-transform: none !important;
text-indent: 0 !important;
text-shadow: none !important;
text-overflow: clip !important;
white-space: normal !important;
word-break: keep-all !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
color: #fff !important;
background: var(--primary) !important;
cursor: pointer !important;
transition: background 0.18s var(--ease, ease) !important;
box-shadow: none !important;
min-width: auto !important;
}
/* Disabled: gris cálido con TEXTO BLANCO VISIBLE (sin opacity transparency) */
body#checkout #payment-confirmation button:disabled,
body#checkout #payment-confirmation button[disabled],
body#checkout #payment-confirmation button.btn-primary:disabled,
body#checkout #payment-confirmation button[type="submit"]:disabled {
background: var(--ink-3, #9A928B) !important;
color: #fff !important;
opacity: 1 !important;
cursor: not-allowed !important;
}
body#checkout #payment-confirmation button:not(:disabled):hover {
background: var(--primary-hover) !important;
transform: translateY(-1px);
}
/* Si por alguna razón el texto del botón está envuelto en span con tamaño 0, force size */
body#checkout #payment-confirmation button * {
font-size: inherit !important;
color: inherit !important;
visibility: visible !important;
text-indent: 0 !important;
}
/* ============================================================
* 2026-05-27 v3 — Payment option alignment + botón disabled legible
* Bugs:
* 1. Payment option "Pago por transferencia" alineado a la derecha
* porque .float-xs-left (legacy bootstrap) + flex parent conflicto.
* 2. Botón sigue sin texto visible — disabled state con contraste bajo.
* ============================================================ */
/* ============ Payment option: kill floats + force flex order ============ */
body#checkout .payment-option,
body#checkout div[id^="payment-option-"][id$="-container"] {
flex-wrap: nowrap !important;
text-align: left !important;
}
body#checkout .payment-option .custom-radio,
body#checkout .payment-option .custom-radio.float-xs-left,
body#checkout .payment-option > .custom-radio {
float: none !important;
order: 1 !important;
margin: 0 !important;
}
/* Form de "Elegir" oculto — quitar del flujo flex */
body#checkout .payment-option > form,
body#checkout .payment-option form.ps-hidden-by-js {
display: none !important;
order: 99 !important;
}
body#checkout .payment-option > label,
body#checkout .payment-option label[for^="payment-option-"] {
float: none !important;
order: 2 !important;
flex: 1 1 auto !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
body#checkout .payment-option > label > span {
display: inline-block !important;
vertical-align: middle !important;
}
/* clearfix legacy: neutralizar para que flex funcione */
body#checkout .payment-option.clearfix::before,
body#checkout .payment-option.clearfix::after {
display: none !important;
}
/* ============ Botón Pedido con obligación de pago — colores hardcoded ============ */
/* High-specificity con html body#checkout para ganar cascade absoluto */
html body#checkout #payment-confirmation button,
html body#checkout #payment-confirmation .ps-shown-by-js > button,
html body#checkout #payment-confirmation button.btn-primary,
html body#checkout #payment-confirmation button[type="submit"],
html body#checkout #payment-confirmation button.center-block {
font-size: 15px !important;
font-weight: 600 !important;
font-family: "Inter", -apple-system, sans-serif !important;
letter-spacing: 0.02em !important;
line-height: 1.2 !important;
text-transform: none !important;
text-indent: 0 !important;
text-shadow: none !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Disabled: café oscuro alto contraste */
html body#checkout #payment-confirmation button:disabled,
html body#checkout #payment-confirmation button[disabled],
html body#checkout #payment-confirmation button.btn-primary:disabled,
html body#checkout #payment-confirmation button.btn-primary[disabled],
html body#checkout #payment-confirmation button[type="submit"]:disabled,
html body#checkout #payment-confirmation button[type="submit"][disabled] {
background-color: #5a4f48 !important; /* café oscuro hardcoded — alto contraste con #fff */
background: #5a4f48 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
cursor: not-allowed !important;
border: 0 !important;
}
/* Enabled */
html body#checkout #payment-confirmation button:not(:disabled):not([disabled]) {
background-color: #6B2C2C !important; /* burgundy hardcoded */
background: #6B2C2C !important;
color: #ffffff !important;
}
html body#checkout #payment-confirmation button:not(:disabled):not([disabled]):hover {
background-color: #501F1F !important;
background: #501F1F !important;
}
/* Parent containers: asegurar que font-size no llegue a 0 por herencia */
html body#checkout #payment-confirmation,
html body#checkout #payment-confirmation .ps-shown-by-js,
html body#checkout #payment-confirmation > * {
font-size: 15px !important;
}
/* ============================================================
* 2026-05-27 v4 — Headers order-items + alert reset + button fallback
* ============================================================ */
/* ============ "Artículos del pedido" headers — más pequeño, sin overflow ============ */
html body#checkout #order-items > .row {
display: flex !important;
flex-wrap: wrap !important;
gap: 4px 8px !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
html body#checkout #order-items > .row > .card-title,
html body#checkout #order-items > .row > h3.card-title {
font-size: 11px !important;
font-weight: 500 !important;
font-family: var(--f-body) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--ink-2) !important;
margin: 0 !important;
padding: 0 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html body#checkout #order-items > .row > .col-md-6,
html body#checkout #order-items > .row > .col-12 {
flex: 1 1 100% !important;
text-align: left !important;
}
html body#checkout #order-items > .row > .col-md-2 {
flex: 0 1 auto !important;
text-align: center !important;
}
/* Mobile: ocultar los headers de columnas — la lista se ve como cards */
@media (max-width: 768px) {
html body#checkout #order-items > .row > h3._desktop-title {
display: none !important;
}
}
/* ============ Alert "asegúrate de elegir método de pago" — reset ::before legacy ============ */
html body#checkout .js-alert-payment-conditions,
html body#checkout #payment-confirmation .alert-danger,
html body#checkout .alert.alert-danger {
position: relative !important;
background: #FFF4F2 !important;
border: 1px solid var(--burgundy, #6B2C2C) !important;
color: var(--burgundy-deep, #501F1F) !important;
border-radius: 8px !important;
padding: 12px 16px !important;
font-size: 13px !important;
line-height: 1.5 !important;
margin: 12px 0 0 !important;
display: block !important;
list-style: none !important;
text-indent: 0 !important;
}
/* Kill any ::before/::after pseudo-icons del bundle */
html body#checkout .js-alert-payment-conditions::before,
html body#checkout .js-alert-payment-conditions::after,
html body#checkout #payment-confirmation .alert-danger::before,
html body#checkout #payment-confirmation .alert-danger::after,
html body#checkout .alert.alert-danger::before,
html body#checkout .alert.alert-danger::after {
content: none !important;
display: none !important;
}
html body#checkout .js-alert-payment-conditions .close,
html body#checkout .alert-danger .close,
html body#checkout .alert-danger button.close {
display: none !important;
}
html body#checkout .alert-danger a {
color: var(--burgundy) !important;
text-decoration: underline !important;
font-weight: 500 !important;
text-underline-offset: 2px !important;
}
/* ============================================================
* 2026-05-27 v5 — Ocultar hidden submit buttons de payment modules
* Causa raíz: mi regla previa
* body#checkout button[type="submit"]:not(.btn-link)... { display: inline-flex !important }
* sobreescribía el style="display:none" inline (sin !important) de
* PS, así que el botón VACÍO de cada payment module (#pay-with-payment-option-N)
* se renderizaba visible como una caja café vacía.
* Esos botones son hidden submit programáticos — deben quedar oculto.
* ============================================================ */
/* Hidden submit de cada módulo de pago (uno por payment-option) */
html body#checkout button[id^="pay-with-payment-option-"],
html body#checkout #payment-form button,
html body#checkout form[id^="pay-with-payment-option-"] button[type="submit"],
html body#checkout .js-payment-option-form button[type="submit"],
html body#checkout div[id^="pay-with-payment-option-"][id$="-form"] button {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
opacity: 0 !important;
position: absolute !important;
pointer-events: none !important;
}
/* Form contenedor de wire payment — no debe ocupar espacio visual */
html body#checkout #payment-form,
html body#checkout .js-payment-option-form > form {
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* ============================================================
* Smile · Payment-method + Shipping-option (Claude Design alias)
* Spec: design_handoff_smile_v2/COMPONENTS.md §payment-method, §shipping-option
* Alias para que el markup PS legacy (.payment-option, .delivery-option)
* use clases canon (sin tocar templates ni hooks PS).
* ============================================================ */
/* Aliasamos: cualquier .payment-option o .delivery-option en checkout adopta
los mismos estilos que .smile-payment-method / .smile-shipping-option */
body#checkout .smile-payment-method,
body#checkout .smile-shipping-option {
/* Heredan las reglas .payment-option / .delivery-option ya definidas */
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 18px 20px !important;
border: 1.5px solid var(--line, #E8DFD6) !important;
border-radius: 10px !important;
background: #fff !important;
cursor: pointer !important;
transition: border-color 0.15s, background 0.15s !important;
width: 100% !important;
margin: 0 !important;
}
body#checkout .smile-payment-method:hover,
body#checkout .smile-shipping-option:hover {
border-color: var(--ink, #2B2826) !important;
}
body#checkout .smile-payment-method:has(input:checked),
body#checkout .smile-shipping-option:has(input:checked),
body#checkout .smile-payment-method.is-selected,
body#checkout .smile-shipping-option.is-selected {
border-color: var(--ink, #2B2826) !important;
background: var(--surface-2, #FAF7F2) !important;
}
/* Aria states */
body#checkout .smile-payment-method[aria-disabled="true"],
body#checkout .smile-shipping-option[aria-disabled="true"] {
opacity: 0.4;
pointer-events: none;
}
/* ============================================================
* Smile · Checkout-progress (Claude Design canon)
* Spec: design_handoff_smile_v2/COMPONENTS.md §checkout-progress
*
* Markup canon:
*
* - ✓Datos
* - 2Dirección
* - 3Envío
* - 4Pago
*
*
* Override .checkout-steps-progress de PS si existe.
* ============================================================ */
.smile-checkout-progress,
body#checkout .checkout-steps-progress {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 16px 0 !important;
margin: 0 0 24px !important;
list-style: none !important;
flex-wrap: wrap !important;
}
.smile-checkout-progress__step,
body#checkout .checkout-steps-progress > li {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 12px !important;
border-radius: 999px !important;
background: var(--surface-2, #FAF7F2) !important;
font-family: var(--f-body, Inter) !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--ink-2, #6B6360) !important;
position: relative !important;
}
.smile-checkout-progress__step:not(:last-child)::after {
content: "";
width: 16px;
height: 1px;
background: var(--line, #E8DFD6);
margin: 0 0 0 4px;
}
.smile-checkout-progress__step .num,
.smile-checkout-progress__step > span:first-child {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
border-radius: 50% !important;
background: var(--line, #E8DFD6) !important;
color: var(--ink-2, #6B6360) !important;
font-size: 11px !important;
font-weight: 600 !important;
font-variant-numeric: tabular-nums !important;
}
.smile-checkout-progress__step.is-done .num,
.smile-checkout-progress__step.is-done > span:first-child {
background: #5BA15C !important;
color: #fff !important;
}
.smile-checkout-progress__step.is-current,
body#checkout .checkout-steps-progress > li.-current {
background: var(--ink, #2B2826) !important;
color: #fff !important;
}
.smile-checkout-progress__step.is-current .num,
body#checkout .checkout-steps-progress > li.-current > span:first-child {
background: #fff !important;
color: var(--ink, #2B2826) !important;
}
@media (max-width: 600px) {
.smile-checkout-progress {
gap: 4px !important;
padding: 12px 0 !important;
}
.smile-checkout-progress__step,
body#checkout .checkout-steps-progress > li {
font-size: 12px !important;
padding: 4px 8px !important;
}
.smile-checkout-progress__step:not(:last-child)::after { display: none !important; }
}
/* Form fields */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding-top: 20px;
}
.form-grid .field { display: flex; flex-direction: column; gap: 6px; }
.form-grid .field.full { grid-column: 1 / -1; }
.form-grid label {
font-size: 12px;
letter-spacing: 0.04em;
color: var(--ink-2);
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-grid label .opt { font-weight: 400; color: var(--ink-3); }
.form-grid input,
.form-grid select,
.form-grid textarea {
height: 46px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0 14px;
font-size: 14px;
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
width: 100%;
}
.form-grid textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 80px; }
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
outline: none;
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(43, 40, 38, 0.06);
}
.form-grid input.err,
.form-grid select.err {
border-color: var(--burgundy);
}
.form-grid .err-msg {
font-size: 11px;
color: var(--burgundy);
margin-top: 2px;
}
.form-grid select {
-webkit-appearance: none;
appearance: none;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center;
padding-right: 36px;
cursor: pointer;
}
.form-grid .hint {
font-size: 11px;
color: var(--ink-3);
margin-top: 2px;
line-height: 1.4;
}
@media (max-width: 720px) {
.form-grid { grid-template-columns: 1fr; }
}
.checkbox-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--ink);
cursor: pointer;
padding: 10px 0;
line-height: 1.45;
}
.checkbox-row input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--burgundy);
flex-shrink: 0;
margin-top: 2px;
}
.checkbox-row .hint {
font-size: 12px;
color: var(--ink-2);
margin-top: 2px;
}
/* Address saved card */
.saved-addresses {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 20px;
}
.saved-address {
display: grid;
grid-template-columns: 20px 1fr auto;
align-items: start;
gap: 14px;
padding: 16px;
border: 1.5px solid var(--line);
border-radius: 10px;
background: #fff;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
text-align: left;
width: 100%;
}
.saved-address:hover { border-color: var(--ink); }
.saved-address.on {
border-color: var(--ink);
background: var(--surface-2);
}
.saved-address .radio {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--line);
position: relative;
flex-shrink: 0;
margin-top: 2px;
transition: border-color 0.15s;
}
.saved-address.on .radio {
border-color: var(--ink);
}
.saved-address.on .radio::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--ink);
}
.saved-address .body { font-size: 13px; line-height: 1.5; }
.saved-address .body b { font-size: 14px; font-weight: 500; display: block; margin-bottom: 2px; }
.saved-address .body .tag-mini {
display: inline-block;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--rose);
color: var(--burgundy);
padding: 3px 7px;
border-radius: 4px;
margin-left: 8px;
font-weight: 600;
}
.saved-address .body .meta { color: var(--ink-2); }
.saved-address .actions {
display: flex;
gap: 12px;
font-size: 12px;
color: var(--ink-2);
}
.saved-address .actions a {
border-bottom: 1px solid currentColor;
cursor: pointer;
padding-bottom: 1px;
}
.saved-address .actions a:hover { color: var(--ink); }
.add-address-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
border: 1.5px dashed var(--line);
border-radius: 10px;
font-size: 14px;
color: var(--ink-2);
cursor: pointer;
width: 100%;
font-weight: 500;
transition: all 0.15s;
}
.add-address-btn:hover {
border-color: var(--ink);
color: var(--ink);
background: var(--surface-2);
}
/* Shipping methods */
.ship-options {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 20px;
}
.ship-opt {
display: grid;
grid-template-columns: 20px 1fr auto;
align-items: center;
gap: 16px;
padding: 18px;
border: 1.5px solid var(--line);
border-radius: 10px;
background: #fff;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
text-align: left;
width: 100%;
}
.ship-opt:hover { border-color: var(--ink); }
.ship-opt.on {
border-color: var(--ink);
background: var(--surface-2);
}
.ship-opt .radio {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--line);
position: relative;
flex-shrink: 0;
}
.ship-opt.on .radio { border-color: var(--ink); }
.ship-opt.on .radio::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--ink);
}
.ship-opt .info { line-height: 1.4; }
.ship-opt .info .nm {
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}
.ship-opt .info .nm .tag {
font-size: 9px;
letter-spacing: 0.1em;
padding: 3px 6px;
background: var(--rose);
color: var(--burgundy);
border-radius: 3px;
}
.ship-opt .info .nm .tag.gift { background: #E8F0E5; color: #2E5C3F; }
.ship-opt .info .meta { font-size: 12px; color: var(--ink-2); }
.ship-opt .price {
font-size: 15px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.ship-opt .price small {
display: block;
font-size: 11px;
color: #2E5C3F;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: 2px;
}
.ship-opt.disabled {
opacity: 0.5;
cursor: not-allowed;
background: var(--surface-2);
}
.ship-opt.disabled:hover { border-color: var(--line); }
/* Payment methods */
.pay-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding-top: 20px;
}
@media (max-width: 720px) { .pay-options { grid-template-columns: 1fr; } }
.pay-opt {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border: 1.5px solid var(--line);
border-radius: 10px;
background: #fff;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
text-align: left;
width: 100%;
position: relative;
}
.pay-opt:hover { border-color: var(--ink); }
.pay-opt.on { border-color: var(--ink); background: var(--surface-2); }
.pay-opt .pic {
width: 38px;
height: 38px;
border-radius: 8px;
background: var(--surface-2);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
flex-shrink: 0;
}
.pay-opt.on .pic { background: var(--rose); color: var(--burgundy); }
.pay-opt .info .nm { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.pay-opt .info .meta { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.pay-opt .check-ic {
position: absolute;
top: 12px;
right: 12px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--burgundy);
color: #fff;
display: none;
align-items: center;
justify-content: center;
}
.pay-opt.on .check-ic { display: inline-flex; }
/* Card form panel */
.card-panel {
margin-top: 16px;
padding: 20px;
background: var(--surface-2);
border-radius: 10px;
border: 1px solid var(--line);
}
.card-panel h4 {
font-family: var(--f-body);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 8px;
}
.card-panel h4 .lock {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 500;
font-size: 10px;
color: #2E5C3F;
letter-spacing: 0.06em;
margin-left: auto;
text-transform: none;
}
.card-brands {
display: inline-flex;
gap: 6px;
margin-left: 12px;
}
.card-brands .bb {
height: 18px;
padding: 0 6px;
border-radius: 3px;
background: #fff;
border: 1px solid var(--line);
font-size: 9px;
font-weight: 700;
display: inline-flex;
align-items: center;
letter-spacing: 0.04em;
color: var(--ink);
}
.card-brands .bb.visa { color: #1A1F71; }
.card-brands .bb.mc { color: #EB001B; }
.card-brands .bb.amex { color: #006FCF; }
.card-brands .bb.dc { color: #C5921E; }
.bank-info {
margin-top: 16px;
padding: 18px;
background: var(--surface-2);
border-radius: 10px;
font-size: 13px;
line-height: 1.6;
border: 1px solid var(--line);
}
.bank-info .b-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
margin-bottom: 10px;
font-weight: 600;
}
.bank-info table {
width: 100%;
border-collapse: collapse;
}
.bank-info table td { padding: 4px 0; }
.bank-info table td:first-child { color: var(--ink-2); width: 40%; font-size: 12px; }
.bank-info table td:last-child { font-variant-numeric: tabular-nums; }
.bank-info .copy {
font-size: 11px;
color: var(--burgundy);
font-weight: 500;
margin-left: 8px;
cursor: pointer;
}
/* Order summary aside */
.order-summary {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 24px;
position: sticky;
top: calc(var(--nav-h) + 16px);
}
.order-summary h3 {
font-family: var(--f-body);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
margin: 0 0 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.order-summary h3 .toggle {
font-size: 11px;
color: var(--burgundy);
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
cursor: pointer;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.order-summary .os-items {
display: flex;
flex-direction: column;
gap: 14px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.order-summary .os-items.collapsed { display: none; }
.order-summary .os-item {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
align-items: start;
font-size: 13px;
}
.order-summary .os-item .pi {
position: relative;
width: 56px;
height: 70px;
border-radius: 6px;
overflow: hidden;
background: var(--line-2);
}
.order-summary .os-item .pi img { width: 100%; height: 100%; object-fit: cover; }
.order-summary .os-item .pi .qty-b {
position: absolute;
top: -6px;
right: -6px;
background: var(--ink);
color: #fff;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 11px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
}
.order-summary .os-item .nm { font-size: 13px; font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.order-summary .os-item .opt { font-size: 11px; color: var(--ink-2); }
.order-summary .os-item .pp { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.order-summary .os-row {
display: flex;
justify-content: space-between;
font-size: 13px;
padding: 5px 0;
color: var(--ink-2);
}
.order-summary .os-row .v { color: var(--ink); font-variant-numeric: tabular-nums; }
.order-summary .os-row.free .v { color: #2E5C3F; font-weight: 500; }
.order-summary .os-row.discount .v { color: var(--burgundy); }
.order-summary .os-row.tot {
padding-top: 14px;
margin-top: 8px;
border-top: 1px solid var(--line);
font-size: 16px;
font-weight: 500;
font-family: var(--f-display);
}
.order-summary .os-row.tot .v {
font-size: 22px;
font-weight: 500;
}
.order-summary .os-row.tot small {
font-family: var(--f-body);
font-weight: 400;
font-size: 11px;
color: var(--ink-2);
margin-left: 4px;
}
.order-summary .os-coupon {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.order-summary .os-coupon-head {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-size: 12px;
color: var(--ink-2);
padding: 6px 0;
}
.order-summary .os-coupon-body {
display: none;
gap: 8px;
margin-top: 8px;
}
.order-summary .os-coupon-body.open { display: flex; }
.order-summary .os-coupon input {
flex: 1;
height: 36px;
border: 1px solid var(--line);
border-radius: 999px;
padding: 0 12px;
font-size: 12px;
background: var(--bg);
}
.order-summary .os-coupon input:focus { outline: none; border-color: var(--ink); }
.order-summary .applied-coupon {
display: inline-flex;
align-items: center;
gap: 6px;
background: #E8F0E5;
color: #2E5C3F;
border-radius: 999px;
padding: 4px 4px 4px 10px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
margin-top: 8px;
}
.order-summary .applied-coupon .x {
width: 16px; height: 16px;
border-radius: 50%;
background: rgba(46, 92, 63, 0.15);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 11px;
}
.order-summary .os-trust {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 8px;
font-size: 11px;
color: var(--ink-2);
}
.order-summary .os-trust .t {
display: flex;
align-items: center;
gap: 8px;
line-height: 1.4;
}
.order-summary .os-trust .t svg { color: var(--burgundy); flex-shrink: 0; }
/* Place order CTA & policy */
.place-order {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
.place-order .policy {
font-size: 11px;
color: var(--ink-2);
line-height: 1.5;
text-align: center;
}
.place-order .policy a {
border-bottom: 1px solid currentColor;
color: var(--ink);
}
/* Continue-step button row */
.step-actions {
display: flex;
gap: 10px;
margin-top: 24px;
flex-wrap: wrap;
}
.step-actions .btn-primary { min-width: 220px; }
.step-actions .back-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--ink-2);
padding: 12px 8px;
cursor: pointer;
}
.step-actions .back-link:hover { color: var(--ink); }
/* build: 20260531-checkout-rebuild */
/* ============================================================
* .identity-card — Step 1 logged-in / SSO header (Datos personales)
* Per design_handoff_smile_pedido 2 §5 SSO variant.
* ============================================================ */
.identity-card {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: var(--surface-2, #FAF7F2);
border: 1px solid var(--line, #E8DFD6);
border-radius: 10px;
margin-top: 18px;
}
.identity-card__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--rose, #E8C5C5);
color: var(--burgundy, #6B2C2C);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--f-display, "Playfair Display", Georgia, serif);
font-weight: 600;
font-size: 17px;
position: relative;
}
.identity-card__avatar .prov {
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line, #E8DFD6);
}
.identity-card__body { min-width: 0; line-height: 1.4; }
.identity-card__body .t {
font-size: 14px;
font-weight: 600;
color: var(--ink, #2B2826);
}
.identity-card__body .e {
font-size: 12.5px;
color: var(--ink-2, #6B6360);
word-break: break-all;
margin-top: 2px;
}
.identity-card__logout {
font-size: 12px;
color: var(--burgundy, #6B2C2C);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
white-space: nowrap;
font-weight: 500;
}
.identity-card__logout:hover {
color: var(--burgundy-deep, #501F1F);
}
.identity-card__warn {
margin: 8px 0 0;
font-size: 12px;
color: var(--ink-2, #6B6360);
}
@media (max-width: 540px) {
.identity-card {
grid-template-columns: 48px 1fr;
}
.identity-card__logout {
grid-column: 1 / -1;
text-align: right;
margin-top: 4px;
}
}
/* --- Address-form: info note + billing-toggle (mockup §5) --- */
.addr-note {
font-size: 13px;
color: var(--ink-2);
line-height: 1.55;
padding-top: 18px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.addr-note svg { color: var(--burgundy); flex-shrink: 0; margin-top: 1px; }
.addr-note b { color: var(--ink); font-weight: 500; }
.billing-toggle {
border-top: 1px solid var(--line);
margin-top: 22px;
padding-top: 6px;
}
.billing-toggle .hint {
font-size: 12px;
color: var(--ink-3);
margin-top: 4px;
line-height: 1.4;
}
/* --- Step 2 (Direcciones) wrapper additions: extra links + invoice block --- */
.js-address-form .add-address-link {
margin: 12px 0 0;
font-size: 13px;
}
.js-address-form .add-address-link a {
color: var(--burgundy);
text-decoration: none;
font-weight: 500;
}
.js-address-form .add-address-link a:hover { text-decoration: underline; }
.js-address-form .invoice-toggle-link {
margin: 6px 0 0;
font-size: 13px;
}
.js-address-form .invoice-toggle-link a {
color: var(--ink-2);
text-decoration: underline;
}
.js-address-form .invoice-address-block,
.js-address-form #invoice-addresses {
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid var(--line);
}
.js-address-form .invoice-address-title {
font-family: var(--f-display);
font-size: 16px;
font-weight: 500;
letter-spacing: -0.005em;
margin: 0 0 14px;
color: var(--ink);
}
/* --- Form-grid hard override: defeat the legacy `input{height:50px;font-family:Verdana...}`
and PS jQuery-UI defaults bundled in theme-cache.css. Selector specificity (0,1,1)
still loses to !important in some legacy rules, so we force every typographic and
sizing prop explicitly here. --- */
.form-grid input,
.form-grid select,
.form-grid textarea {
font-family: var(--f-body, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
height: 46px !important;
padding: 0 14px !important;
border-radius: 8px !important;
border: 1px solid var(--line, #E8DFD6) !important;
background: #fff !important;
color: var(--ink, #2B2826) !important;
width: 100% !important;
box-shadow: none !important;
}
.form-grid textarea {
height: auto !important;
min-height: 80px !important;
padding: 12px 14px !important;
resize: vertical !important;
}
.form-grid input::placeholder,
.form-grid textarea::placeholder {
color: var(--ink-3, #9A928B);
opacity: 1;
}
.form-grid label {
font-family: var(--f-body, Inter, sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: var(--ink-2, #6B6360);
}
.form-grid label .opt {
font-weight: 400;
color: var(--ink-3, #9A928B);
text-transform: none;
}
.form-grid select {
-webkit-appearance: none !important;
appearance: none !important;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center !important;
padding-right: 36px !important;
cursor: pointer;
}
/* --- Inline billing fields reveal/hide (mockup §5 #billingFields) --- */
.billing-toggle .billing-fields {
max-height: 0;
overflow: hidden;
padding-top: 0;
opacity: 0;
transition: max-height 0.22s ease, opacity 0.18s ease, padding-top 0.22s ease;
}
.billing-toggle .billing-fields.open {
max-height: 600px;
opacity: 1;
padding-top: 14px;
}
/* Override the [hidden] attr so the transition runs (JS removes hidden before
adding .open). Without this, the default UA hidden=true forces display:none. */
.billing-toggle .billing-fields[hidden] {
display: none;
}
/* --- Hide native radio inputs inside ship-opt / pay-opt; the .radio span
and .check svg are the visible custom controls. We keep the input in
the DOM (PS form submit needs it) but visually swap to the styled
custom marker. Class .visually-hidden style: off-screen but accessible. --- */
.ship-opt > input[type="radio"],
.pay-opt > input[type="radio"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Keyboard a11y: focus state on the input mirrors onto the custom marker. */
.ship-opt > input[type="radio"]:focus-visible + .radio,
.pay-opt > input[type="radio"]:focus-visible + .radio {
outline: 2px solid var(--burgundy, #6B2C2C);
outline-offset: 2px;
}
/* --- Conditions-to-approve (terms of service checkbox) --- */
.conditions-form {
margin: 18px 0 14px;
padding: 14px 16px;
background: var(--surface-2, #FAF7F2);
border: 1px solid var(--line, #E8DFD6);
border-radius: 10px;
}
.conditions-form .checkbox-row {
margin: 0;
font-size: 13px;
color: var(--ink, #2B2826);
line-height: 1.45;
}
.conditions-form .js-terms {
color: var(--ink-2, #6B6360);
}
.conditions-form .js-terms a {
color: var(--burgundy, #6B2C2C);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
}
.conditions-form .js-terms a:hover {
color: var(--burgundy-deep, #501F1F);
}
/* --- Conditions-to-approve (terms of service checkbox) --- */
.conditions-form {
margin: 18px 0 14px;
padding: 14px 16px;
background: var(--surface-2, #FAF7F2);
border: 1px solid var(--line, #E8DFD6);
border-radius: 10px;
}
.conditions-form .checkbox-row {
margin: 0;
font-size: 13px;
color: var(--ink, #2B2826);
line-height: 1.45;
}
.conditions-form .js-terms {
color: var(--ink-2, #6B6360);
}
.conditions-form .js-terms a {
color: var(--burgundy, #6B2C2C);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
}
.conditions-form .js-terms a:hover {
color: var(--burgundy-deep, #501F1F);
}
/* --- Conditions-to-approve (terms of service checkbox) --- */
.conditions-form {
margin: 18px 0 14px;
padding: 14px 16px;
background: var(--surface-2, #FAF7F2);
border: 1px solid var(--line, #E8DFD6);
border-radius: 10px;
}
.conditions-form .checkbox-row {
margin: 0;
font-size: 13px;
color: var(--ink, #2B2826);
line-height: 1.45;
}
.conditions-form .js-terms {
color: var(--ink-2, #6B6360);
}
.conditions-form .js-terms a {
color: var(--burgundy, #6B2C2C);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 2px;
}
.conditions-form .js-terms a:hover {
color: var(--burgundy-deep, #501F1F);
}
/* --- Payment options layout fix: single column so each .pay-opt-row gets
full width and the additional-info text wraps naturally beneath the
radio card. The mockup's 2-col grid assumed N>=2 options and no
inline info block; we override that for the real PS render. --- */
.pay-options {
grid-template-columns: 1fr !important;
}
.pay-opt-row {
display: block;
}
.pay-opt-row .pay-opt {
width: 100%;
}
.pay-opt-row .pay-opt__info,
.pay-opt-row .pay-opt__form {
padding: 12px 16px 0;
font-size: 13px;
color: var(--ink-2, #6B6360);
line-height: 1.55;
}
.pay-opt-row .pay-opt__info p {
margin: 0 0 8px;
}
.pay-opt-row .pay-opt__info dl {
margin: 8px 0 0;
display: grid;
grid-template-columns: minmax(140px, max-content) 1fr;
gap: 4px 14px;
font-size: 13px;
}
.pay-opt-row .pay-opt__info dt {
font-weight: 500;
color: var(--ink, #2B2826);
}
.pay-opt-row .pay-opt__info dd {
margin: 0;
}
/* PS toggles display:block inline when option is selected; the .ps-hidden
utility from PS is `display:none`. Honor the JS-set inline display. */
.pay-opt-row .pay-opt__info.ps-hidden,
.pay-opt-row .pay-opt__form.ps-hidden {
display: none;
}
/* ============================================================
Handoff 5 — Payment step refinements
- .pay-options: always 1 col (3 methods read better stacked)
- .pay-logo: brand chips per method (PayPhone orange, Visa blue, MC red)
- .pay-panel: slide-down detail per selected method
- .terms-row: styled mandatory-terms checkbox
============================================================ */
/* Force single-column layout for the payment options (override the
handoff-2 grid 2-col + my earlier `!important` override). */
.pay-options {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
gap: 10px !important;
}
/* Make the option card fill the row */
.pay-opt-row { display: block; width: 100%; }
.pay-opt-row .pay-opt { width: 100%; }
/* Brand chips inside the .pay-opt card (PayPhone / Visa / Mastercard) */
.pay-opt .pay-logo {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
margin-right: 14px;
}
.pay-opt .pay-logo .brand {
height: 22px;
padding: 0 7px;
border-radius: 5px;
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
background: #fff;
border: 1px solid var(--line, #E8DFD6);
color: var(--ink, #2B2826);
}
.pay-opt .pay-logo .brand.pp { background: #F26A21; color: #fff; border-color: #F26A21; }
.pay-opt .pay-logo .brand.visa { color: #1A1F71; }
.pay-opt .pay-logo .brand.mc { color: #EB001B; }
/* Detail panel that slides in below the selected option */
.pay-panel {
display: none;
margin: -4px 2px 0;
padding: 16px 18px;
background: var(--surface-2, #FAF7F2);
border: 1px solid var(--line, #E8DFD6);
border-radius: 10px;
font-size: 13px;
line-height: 1.6;
color: var(--ink-2, #6B6360);
animation: pf 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.pay-panel.show { display: block; }
.pay-panel b { color: var(--ink, #2B2826); font-weight: 500; }
.pay-panel .redirect {
display: flex;
align-items: center;
gap: 12px;
}
.pay-panel .redirect .badge {
width: 40px;
height: 40px;
border-radius: 9px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 11px;
}
.pay-panel .redirect .badge.pp { background: #F26A21; }
.pay-panel .secure-mini {
display: flex;
align-items: center;
gap: 7px;
margin-top: 12px;
font-size: 12px;
color: #2E5C3F;
}
/* Terms-of-service row (mandatory checkbox above the confirm button) */
.terms-row {
display: flex;
gap: 12px;
align-items: flex-start;
margin-top: 22px;
padding: 16px 18px;
border: 1px solid var(--line, #E8DFD6);
border-radius: 10px;
background: var(--surface, #fff);
font-size: 14px;
color: var(--ink, #2B2826);
line-height: 1.5;
}
.terms-row input {
margin-top: 2px;
flex-shrink: 0;
}
.terms-row a {
color: var(--burgundy, #6B2C2C);
text-decoration: underline;
text-underline-offset: 2px;
}
/* Reuse the page-fade keyframe if not already defined */
@keyframes pf {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
Handoff 5 — Confirmation page · PayPhone variant
(used in payment_return.tpl override of the PayPhone module once
it's installed; harmless if classes are not rendered yet)
============================================================ */
.pay-approved-badge {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: #E8F0E5;
border: 1px solid #D0E3CB;
border-radius: 10px;
margin-bottom: 22px;
}
.pay-approved-badge .ico {
width: 36px;
height: 36px;
border-radius: 50%;
background: #2E5C3F;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pay-approved-badge .txt .st { font-size: 15px; font-weight: 600; color: #265035; }
.pay-approved-badge .txt .sub { font-size: 13px; color: #4A6B53; margin-top: 1px; }
.txn-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--line, #E8DFD6);
border-radius: var(--r-md, 10px);
overflow: hidden;
}
.txn-grid .row {
padding: 15px 20px;
border-bottom: 1px solid var(--line, #E8DFD6);
}
.txn-grid .row.full { grid-column: 1 / -1; }
.txn-grid .row:nth-last-child(-n+1) { border-bottom: 0; }
.txn-grid .k {
font-size: 11px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-3, #9A928B);
font-weight: 600;
margin-bottom: 5px;
}
.txn-grid .v {
font-size: 15px;
color: var(--ink, #2B2826);
font-variant-numeric: tabular-nums;
}
.txn-grid .v.big {
font-family: var(--f-display, "Playfair Display", serif);
font-size: 22px;
font-weight: 500;
}
@media (max-width: 720px) {
.txn-grid { grid-template-columns: 1fr; }
.txn-grid .row { grid-column: 1 / -1 !important; }
}
/* --- Hard fix: force .pay-opt-row block layout so children stack vertically.
Earlier appended rules from prior handoffs may still apply with higher
cascade priority. We seal it with !important. --- */
.pay-opt-row {
display: block !important;
width: 100% !important;
margin-bottom: 10px;
}
.pay-opt-row .pay-opt {
display: flex !important;
width: 100% !important;
}
.pay-opt-row > .pay-opt__info,
.pay-opt-row > .pay-opt__form,
.pay-opt-row > .js-additional-information,
.pay-opt-row > .js-payment-option-form {
display: block;
width: 100%;
margin-top: 4px;
}
/* PS toggles inline display:block on these when option selected; respect ps-hidden */
.pay-opt-row > .ps-hidden { display: none !important; }
/* --- Handoff 5 — full payment card anatomy: .pic icon + .info + .meta + check-ic --- */
.pay-opt {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 18px !important;
position: relative;
}
.pay-opt > .pic {
width: 44px;
height: 44px;
border-radius: 9px;
background: var(--surface-2, #FAF7F2);
color: var(--ink, #2B2826);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.pay-opt.on > .pic { background: var(--rose, #E8C5C5); color: var(--burgundy, #6B2C2C); }
.pay-opt > .info { flex: 1; min-width: 0; }
.pay-opt > .info .nm {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--ink, #2B2826);
margin-bottom: 2px !important;
}
.pay-opt > .info .meta {
font-size: 12px !important;
color: var(--ink-2, #6B6360) !important;
line-height: 1.4 !important;
}
/* Hide PS-supplied option.logo IMG — we render brand chips ourselves */
.pay-opt > img.logo,
.pay-opt .info > img.logo {
display: none !important;
}
/* Burgundy circle check when option selected */
.pay-opt > .check-ic {
width: 22px;
height: 22px;
border-radius: 50%;
background: transparent;
color: var(--ink-3, #9A928B);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 4px;
}
.pay-opt.on > .check-ic {
background: var(--burgundy, #6B2C2C);
color: #fff;
}
/* When .pic is rendered, hide the legacy .radio span (we no longer need it as visual) */
.pay-opt > .pic + .info + .pay-logo,
.pay-opt > .pic ~ .check-ic { /* nothing — keep them */ }
.pay-opt > .pic ~ .radio { display: none; }
/* --- Handoff 5 — check-ic VISIBLE solo cuando opción seleccionada (.on) --- */
.pay-opt > .check-ic {
display: none !important;
}
.pay-opt.on > .check-ic {
display: inline-flex !important;
background: var(--burgundy, #6B2C2C) !important;
color: #fff !important;
}
/* ============================================================
Checkout footer (handoff 5 — minimal, not the marketing footer)
============================================================ */
.checkout-footer {
background: var(--surface, #FFFFFF);
border-top: 1px solid var(--line, #E8DFD6);
padding: 28px 24px 22px;
margin-top: 56px;
font-family: var(--f-body, Inter, -apple-system, sans-serif);
color: var(--ink-2, #6B6360);
font-size: 13px;
}
.checkout-footer .shell {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.checkout-footer__trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
color: var(--ink-2, #6B6360);
font-size: 12px;
}
.checkout-footer__trust .trust-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.checkout-footer__trust .trust-item svg {
color: var(--burgundy, #6B2C2C);
flex-shrink: 0;
}
.checkout-footer__trust .trust-item a {
color: var(--burgundy, #6B2C2C);
text-decoration: none;
font-weight: 500;
}
.checkout-footer__trust .trust-item a:hover { text-decoration: underline; }
.checkout-footer__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
font-size: 12px;
}
.checkout-footer__links a {
color: var(--ink-2, #6B6360);
text-decoration: none;
letter-spacing: 0.02em;
}
.checkout-footer__links a:hover {
color: var(--ink, #2B2826);
text-decoration: underline;
}
.checkout-footer__copy {
font-size: 11px;
color: var(--ink-3, #9A928B);
letter-spacing: 0.04em;
}
@media (max-width: 720px) {
.checkout-footer { padding: 22px 16px 18px; }
.checkout-footer__trust,
.checkout-footer__links { gap: 14px; }
}
/* Hide PS-native page-footer placeholder that sometimes still renders above */
body.page-order .page-footer,
body#checkout .page-footer { display: none; }