/* Ecomake theme: cart and checkout (/order/), success and error pages. * Tokens and shared components (.btn, .input, .opt, .check, .alert ...): site theme css/ecomake.css. * The core of Shop-Script (checkout v2) prints the cart and the form markup and loads its own CSS from * wa-apps/shop/css/frontend/order/ AFTER this file. Core selectors are long (up to 7 classes), so every rule * for the cart and the form starts with the page id: one id beats any number of classes. Markup is never changed. */ /* ---------- page frame ---------- */ .s-order-container { padding-bottom: 56px; } .s-order-title { margin-bottom: 24px; } #js-checkout-order-page { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); padding: 0; } @media (min-width: 900px) { #js-checkout-order-page { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; } /* the cart column is the order summary: it stays in view while the long form scrolls (the form is taller, so nothing is cut off) */ #js-checkout-order-page > .s-order-column:first-child { position: sticky; top: calc(var(--header-h) + 16px); } } #js-checkout-order-page .s-order-column { min-width: 0; } #js-checkout-order-page .s-order-section { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-l); padding: 20px 16px; box-shadow: var(--shadow-s); font-size: var(--fs-text); } @media (min-width: 640px) { #js-checkout-order-page .s-order-section { padding: 24px; } } #js-checkout-order-page .s-order-section:not(:first-child) { margin-top: 20px; } #js-checkout-order-page .s-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 0; border: 0; background: none; } #js-checkout-order-page .s-section-header .s-header { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.12; } #js-checkout-order-page .s-section-footer { padding: 14px 0 0; } #js-checkout-order-page .s-back-link { text-align: left; font-size: var(--fs-small); } #js-checkout-order-page .s-back-link a { color: var(--muted); text-decoration: none; } #js-checkout-order-page .s-back-link a:hover { color: var(--ink); text-decoration: underline; } #js-checkout-order-page .s-delete-button { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-small); color: var(--muted); text-decoration: underline; white-space: nowrap; } #js-checkout-order-page .s-delete-button:hover { color: var(--err); } #js-checkout-order-page .s-delete-icon { display: inline-block; width: 10px; height: 10px; margin: 0 6px 0 0; line-height: 0; } #js-checkout-order-page .s-delete-icon svg { width: 10px; height: 10px; fill: currentColor; } #js-checkout-order-page .wa-order-cart-wrapper .wa-cart-body, #js-checkout-order-page .wa-order-form-wrapper .wa-form-body { padding: 0; border: 0; background: none; } /* ---------- empty cart ---------- */ .s-cart-empty-wrapper { padding: 40px 0 24px; max-width: 640px; } .s-cart-empty-wrapper .lead { margin: 12px 0 24px; } #js-checkout-order-page .wa-cart-body > p.align-center { margin: 40px 0 !important; text-align: center; color: var(--muted); } /* ---------- cart: loading ---------- */ #js-checkout-order-page .wa-cart-loader { padding: 28px 0; text-align: center; color: var(--muted); font-size: var(--fs-small); } #js-checkout-order-page .wa-cart-loader p { animation: eco-pulse 1.2s ease-in-out infinite; } @keyframes eco-pulse { 50% { opacity: .45; } } /* ---------- cart: lines ---------- */ #js-checkout-order-page .wa-order-cart-wrapper .wa-product { padding: 14px 0; border-bottom: 1px solid var(--line); } #js-checkout-order-page .wa-order-cart-wrapper .wa-product:first-child { padding-top: 0; } #js-checkout-order-page .wa-order-cart-wrapper .wa-product:last-child { border-bottom: 0; padding-bottom: 0; } #js-checkout-order-page .wa-order-cart-wrapper .wa-product-body { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img det det" "img qty price"; gap: 8px 14px; align-items: center; width: 100%; } #js-checkout-order-page .wa-order-cart-wrapper .wa-product-body > * { display: block; width: auto; margin: 0; padding: 0; } #js-checkout-order-page .wa-order-cart-wrapper .wa-product-body > .wa-column-image { grid-area: img; align-self: start; } #js-checkout-order-page .wa-order-cart-wrapper .wa-product-body > .wa-column-details { grid-area: det; align-self: end; } #js-checkout-order-page .wa-order-cart-wrapper .wa-product-body > .wa-column-quantity { grid-area: qty; align-self: start; text-align: left; } #js-checkout-order-page .wa-order-cart-wrapper .wa-product-body > .wa-column-price { grid-area: price; align-self: start; text-align: right; width: auto; } #js-checkout-order-page .wa-order-cart-wrapper .wa-image-section a { display: block; aspect-ratio: 3 / 4; border-radius: var(--r-s); overflow: hidden; background: var(--paper); } #js-checkout-order-page .wa-order-cart-wrapper .wa-image-section img { width: 100%; height: 100%; object-fit: cover; } #js-checkout-order-page .wa-order-cart-wrapper .wa-details .wa-name { display: block; font-weight: 600; font-size: var(--fs-text); line-height: 1.3; color: var(--ink); text-decoration: none; } #js-checkout-order-page .wa-order-cart-wrapper .wa-details .wa-name:hover { color: var(--clay-deep); } #js-checkout-order-page .wa-order-cart-wrapper .wa-details .wa-sku { display: block; margin-top: 2px; font-size: var(--fs-note); color: var(--muted); } #js-checkout-order-page .wa-order-cart-wrapper .wa-details .wa-actions { display: block; margin-top: 4px; } #js-checkout-order-page .wa-order-cart-wrapper .wa-details .wa-action { display: inline-flex; align-items: center; min-height: 32px; margin: 0; font-size: var(--fs-note); color: var(--muted); text-decoration: underline; cursor: pointer; } #js-checkout-order-page .wa-order-cart-wrapper .wa-details .wa-action:hover { color: var(--err); } #js-checkout-order-page .wa-order-cart-wrapper .wa-details .wa-action .wa-icon { display: none; } #js-checkout-order-page .wa-order-cart-wrapper .wa-tooltip { display: inline-flex; } /* the icon-only delete button is shown by the core only for unavailable lines */ #js-checkout-order-page .wa-order-cart-wrapper .wa-quantity-actions .wa-action { display: inline-grid; place-items: center; width: 40px; height: 40px; color: var(--muted); } #js-checkout-order-page .wa-order-cart-wrapper .wa-quantity-actions .wa-action:hover { color: var(--err); } #js-checkout-order-page .wa-order-cart-wrapper .wa-product.is-out-of-stock, #js-checkout-order-page .wa-order-cart-wrapper .wa-product.is-disabled { opacity: .85; } @media (max-width: 359px) { #js-checkout-order-page .wa-order-cart-wrapper .wa-product-body { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "img det" "img qty" "img price"; } #js-checkout-order-page .wa-order-cart-wrapper .wa-product-body > .wa-column-price { text-align: left; } #js-checkout-order-page .wa-order-cart-wrapper .wa-price-section { display: flex; align-items: baseline; gap: 10px; } } /* quantity stepper (same look as .qty of the shell) */ #js-checkout-order-page .wa-quantity-cart-section { margin: 0; } #js-checkout-order-page .wa-quantity-cart-section .wa-section-body { display: inline-flex; align-items: center; padding: 4px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--ivory); } #js-checkout-order-page .wa-quantity-cart-section .wa-button-wrapper { display: block; } #js-checkout-order-page .wa-quantity-cart-section .wa-button-wrapper .wa-button { display: grid; place-items: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; } #js-checkout-order-page .wa-quantity-cart-section .wa-button-wrapper .wa-button:hover { background: var(--paper); color: var(--ink); } #js-checkout-order-page .wa-quantity-cart-section .wa-button .wa-icon-wrapper { display: grid !important; place-items: center; } #js-checkout-order-page .wa-quantity-cart-section .wa-button .wa-description { display: none !important; } #js-checkout-order-page .wa-quantity-cart-section .wa-button.is-locked { color: var(--muted); background: transparent; cursor: default; } #js-checkout-order-page .wa-quantity-cart-section .wa-field-wrapper { margin: 0; background: transparent; } #js-checkout-order-page .wa-quantity-cart-section .wa-field-wrapper .wa-field { width: 40px; height: 40px; padding: 0; border: 0; background: transparent; text-align: center; font-size: var(--fs-body); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); -moz-appearance: textfield; } #js-checkout-order-page .wa-quantity-cart-section .wa-field-wrapper .wa-field:focus { outline: 2px solid var(--clay); outline-offset: -2px; border-radius: 8px; } #js-checkout-order-page .wa-quantity-cart-section .wa-unit { display: none; } /* hidden helpers of the core stepper (min / max hints, step) keep the muted colour, not #aaa */ #js-checkout-order-page .wa-quantity-cart-section .wa-description, #js-checkout-order-page .wa-quantity-cart-section .wa-step, #js-checkout-order-page .wa-quantity-cart-section .wa-unit, #js-checkout-order-page .wa-order-form-wrapper option[disabled] { color: var(--muted); } #js-checkout-order-page .wa-quantity-cart-section .wa-section-footer { margin-top: 4px; } #js-checkout-order-page .wa-quantity-cart-section .wa-product-fractional-prices { margin: 0; font-size: var(--fs-caption); line-height: 1.3; color: var(--muted); text-align: left; } #js-checkout-order-page .wa-quantity-cart-section .wa-error-text { margin-top: 6px; } /* line price */ #js-checkout-order-page .wa-order-cart-wrapper .wa-price-section .wa-price-total { font-size: var(--fs-body); line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } #js-checkout-order-page .wa-order-cart-wrapper .wa-price-section .wa-price-compare { font-size: var(--fs-note); line-height: 1.3; color: var(--muted); text-decoration: line-through; font-variant-numeric: tabular-nums; white-space: nowrap; } /* cart totals: the form block below repeats the same numbers (and adds shipping), so the cart keeps only the coupon / bonus column when the store uses it */ #js-checkout-order-page .wa-order-cart-wrapper .wa-cart-details { display: block; margin: 0; } #js-checkout-order-page .wa-order-cart-wrapper .wa-cart-details > .wa-column-price { display: none; } #js-checkout-order-page .wa-order-cart-wrapper .wa-cart-details > .wa-column-content { display: block; width: auto; padding: 0; margin: 16px 0 0; } #js-checkout-order-page .wa-order-cart-wrapper .wa-cart-details > .wa-column-content:empty { display: none; } #js-checkout-order-page .wa-order-cart-wrapper .wa-coupon-section .wa-input { width: auto; min-width: 0; flex: 1 1 140px; } /* ---------- cross-selling (core slider, only colours and shape) ---------- */ #js-checkout-order-page .wa-order-cross_selling-wrapper > .wa-cross_selling-body { border: 0; padding: 0; } #js-checkout-order-page .wa-order-cross_selling-wrapper .wa-image img { border-radius: var(--r-s); } #js-checkout-order-page .wa-order-cross_selling-wrapper .wa-name { font-weight: 600; font-size: var(--fs-small); line-height: 1.3; color: var(--ink); text-decoration: none; } #js-checkout-order-page .wa-order-cross_selling-wrapper .wa-sku { font-size: var(--fs-note); color: var(--muted); } #js-checkout-order-page .wa-order-cross_selling-wrapper .wa-weight { font-size: var(--fs-caption); color: var(--muted); } #js-checkout-order-page .wa-order-cross_selling-wrapper .wa-cross_selling-loader { padding: 20px 0; text-align: center; color: var(--muted); font-size: var(--fs-small); } /* ---------- core buttons ---------- */ #js-checkout-order-page .wa-button, .wa-order-dialog .wa-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--deep); color: var(--on-deep); font: 500 12.5px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; text-shadow: none; box-shadow: none; cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } #js-checkout-order-page .wa-button:hover, .wa-order-dialog .wa-button:hover { background: var(--clay-deep); color: var(--on-deep); } #js-checkout-order-page .wa-button.gray, .wa-order-dialog .wa-button.gray { background: transparent; border-color: var(--deep); color: var(--deep); } #js-checkout-order-page .wa-button.gray:hover, .wa-order-dialog .wa-button.gray:hover { background: var(--deep); color: var(--on-deep); } #js-checkout-order-page .wa-button[disabled], .wa-order-dialog .wa-button[disabled] { opacity: .45; pointer-events: none; } /* ---------- form: step sections ---------- */ #js-checkout-order-page .wa-order-form-wrapper { font-size: var(--fs-text); container-type: inline-size; } #js-checkout-order-page .wa-form-content { counter-reset: eco-step; } #js-checkout-order-page .wa-step-section { border-bottom: 0; } #js-checkout-order-page .wa-step-section ~ .wa-step-section { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); } #js-checkout-order-page .wa-step-section > .wa-section-header { margin: 0 0 14px; } /* shipping and its details belong to the "Доставка" block */ #js-checkout-order-page .wa-step-section.wa-step-shipping-section, #js-checkout-order-page .wa-step-section.wa-step-details-section { margin-top: 16px; padding-top: 0; border-top: 0; } #js-checkout-order-page .wa-delivery-types-section { margin-top: 0; } #js-checkout-order-page .wa-step-section > .wa-section-header > .wa-header { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.12; } #js-checkout-order-page .wa-step-section > .wa-section-header > .wa-header::before { counter-increment: eco-step; content: counter(eco-step); flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cocoa); color: var(--ivory); font: 600 15px/1 var(--f-ui); } #js-checkout-order-page .wa-step-auth-section > .wa-section-header .wa-contact-name { font-family: var(--f-ui); font-size: var(--fs-text); color: var(--muted); } #js-checkout-order-page .wa-step-section .wa-line { margin: 0; } #js-checkout-order-page .wa-step-section .wa-line + .wa-line { margin-top: 14px; } #js-checkout-order-page .wa-required-text { font-size: var(--fs-note); color: var(--muted); } #js-checkout-order-page .wa-field-wrapper .wa-required:before { content: "*"; padding-left: 2px; color: var(--clay-deep); } #js-checkout-order-page .wa-order-form-wrapper > .s-loading-animation { background: color-mix(in srgb, var(--ivory) 70%, transparent); border-radius: var(--r-l); } #js-checkout-order-page .wa-order-form-wrapper > .s-loading-animation .s-points-wrapper .s-point { background: var(--cocoa); } /* fields: two columns, one column in a narrow form */ #js-checkout-order-page .wa-fields-group.line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; } #js-checkout-order-page .wa-fields-group.line::before { display: none; } #js-checkout-order-page .wa-fields-group.line > .wa-field-wrapper { display: block; width: auto; min-width: 0; margin: 0; padding: 0; } #js-checkout-order-page .wa-fields-group.line > .wa-field-wrapper.size-large, #js-checkout-order-page .wa-fields-group.line > .wa-field-wrapper.full-line, #js-checkout-order-page .wa-fields-group.line > .wa-country-wrapper { grid-column: 1 / -1; } @container (max-width: 440px) { #js-checkout-order-page .wa-fields-group.line { grid-template-columns: minmax(0, 1fr); } } #js-checkout-order-page .wa-field-wrapper .wa-label { display: block; margin: 0 0 6px; font-size: var(--fs-small); line-height: 1.3; font-weight: 600; color: var(--ink); white-space: normal; } #js-checkout-order-page .wa-field-wrapper .wa-input, #js-checkout-order-page .wa-field-wrapper .wa-select, #js-checkout-order-page .wa-field-wrapper .wa-textarea, #js-checkout-order-page .wa-order-cart-wrapper .wa-coupon-section .wa-input { display: block; width: 100%; max-width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--white); color: var(--ink); font: 400 16px/1.3 var(--f-ui); box-shadow: none; outline: 0; transition: border-color var(--t-fast); } #js-checkout-order-page .wa-field-wrapper .wa-textarea { min-height: 96px; height: auto; resize: vertical; } #js-checkout-order-page .wa-field-wrapper .wa-select { height: auto; padding-right: 42px; appearance: none; -webkit-appearance: none; cursor: pointer; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235a3b2a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; } #js-checkout-order-page .wa-field-wrapper .wa-input:not(:disabled):hover, #js-checkout-order-page .wa-field-wrapper .wa-select:hover, #js-checkout-order-page .wa-field-wrapper .wa-textarea:hover { border-color: var(--muted); } #js-checkout-order-page .wa-field-wrapper .wa-input:not(:disabled):focus, #js-checkout-order-page .wa-field-wrapper .wa-select:focus, #js-checkout-order-page .wa-field-wrapper .wa-textarea:focus, #js-checkout-order-page .wa-order-cart-wrapper .wa-coupon-section .wa-input:focus { border-color: var(--cocoa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 25%, transparent); } #js-checkout-order-page .wa-field-wrapper .wa-input.wa-error, #js-checkout-order-page .wa-field-wrapper .wa-select.wa-error, #js-checkout-order-page .wa-field-wrapper .wa-textarea.wa-error { border-color: var(--err); background-color: var(--err-soft); color: var(--ink); } #js-checkout-order-page .wa-field-wrapper .wa-input:disabled, #js-checkout-order-page .wa-field-wrapper .wa-input[readonly] { background: var(--paper); color: var(--muted); border-color: var(--line); } #js-checkout-order-page .wa-field-wrapper .wa-input::placeholder { color: var(--muted); opacity: 1; } #js-checkout-order-page .wa-error-text { margin: 6px 0 0; min-width: 0; font-size: var(--fs-note); line-height: 1.35; color: var(--err); } #js-checkout-order-page .wa-errors-wrapper { padding: 12px 16px; border-radius: var(--r-s); background: var(--err-soft); } #js-checkout-order-page .wa-errors-wrapper .wa-error-text { margin: 0; font-size: var(--fs-small); } /* checkbox and radio inside fields (custom agreement fields, extra shipping and payment fields) */ #js-checkout-order-page .wa-field-wrapper .wa-checkbox-wrapper, #js-checkout-order-page .wa-field-wrapper .wa-radio-wrapper { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding-block: 6px; font-size: var(--fs-small); line-height: 1.45; cursor: pointer; } #js-checkout-order-page .wa-field-wrapper .wa-checkbox-wrapper .wa-text, #js-checkout-order-page .wa-field-wrapper .wa-radio-wrapper .wa-text { margin: 0; } #js-checkout-order-page input.wa-checkbox, #js-checkout-order-page .wa-checkbox-wrapper input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 1px 0 0; border: 1.5px solid var(--cocoa); border-radius: 6px; background: var(--white); cursor: pointer; } #js-checkout-order-page input.wa-checkbox:checked, #js-checkout-order-page .wa-checkbox-wrapper input[type="checkbox"]:checked { background: var(--cocoa); } #js-checkout-order-page input.wa-checkbox:checked::after, #js-checkout-order-page .wa-checkbox-wrapper input[type="checkbox"]:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--ivory); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); } #js-checkout-order-page .wa-radio, #js-checkout-order-page .wa-radio-wrapper input[type="radio"] { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--cocoa); border-radius: 50%; background: var(--white); cursor: pointer; } #js-checkout-order-page .wa-radio:checked, #js-checkout-order-page .wa-radio-wrapper input[type="radio"]:checked { background: var(--cocoa); box-shadow: inset 0 0 0 4px var(--white); } #js-checkout-order-page .wa-field-wrapper.is-agreement-field a, #js-checkout-order-page .wa-link { color: var(--clay-deep); } /* ---------- form: shipping ---------- */ #js-checkout-order-page .wa-step-shipping-section .wa-header, #js-checkout-order-page .wa-delivery-types-section > .wa-header, #js-checkout-order-page .wa-delivery-variants-section > .wa-header { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 600; font-family: var(--f-ui); } #js-checkout-order-page .wa-delivery-variants-section { margin-top: 16px; } #js-checkout-order-page .wa-types-list { display: grid; gap: 10px; } #js-checkout-order-page .wa-types-list .wa-type-wrapper, #js-checkout-order-page .wa-types-list .wa-type-wrapper:first-child, #js-checkout-order-page .wa-types-list .wa-type-wrapper:last-child { position: relative; width: auto; box-sizing: border-box; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; margin: 0; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); box-shadow: none; text-align: left; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); } #js-checkout-order-page .wa-types-list .wa-type-wrapper::before { content: ""; grid-row: 1 / span 2; width: 22px; height: 22px; border: 1.5px solid var(--cocoa); border-radius: 50%; background: var(--white); } #js-checkout-order-page .wa-types-list .wa-type-wrapper:hover { border-color: var(--muted); } #js-checkout-order-page .wa-types-list .wa-type-wrapper.is-active { border-color: var(--cocoa); box-shadow: 0 0 0 1.5px var(--cocoa); background: var(--white); } #js-checkout-order-page .wa-types-list .wa-type-wrapper.is-active::before { background: var(--cocoa); box-shadow: inset 0 0 0 4px var(--white); } #js-checkout-order-page .wa-types-list .wa-type-wrapper.is-disabled { opacity: .5; cursor: default; } #js-checkout-order-page .wa-types-list .wa-type-wrapper .wa-name { grid-column: 2; margin: 0; font-size: var(--fs-text); font-weight: 600; line-height: 1.3; } #js-checkout-order-page .wa-types-list .wa-type-wrapper .wa-name a { color: inherit; text-decoration: none; } #js-checkout-order-page .wa-types-list .wa-type-wrapper .wa-price { grid-column: 3; grid-row: 1; margin: 0; font-weight: 600; font-size: var(--fs-text); white-space: nowrap; font-variant-numeric: tabular-nums; } #js-checkout-order-page .wa-types-list .wa-type-wrapper .wa-date { grid-column: 2 / -1; margin: 0; font-size: var(--fs-note); line-height: 1.35; color: var(--muted); } #js-checkout-order-page .wa-types-list.wa-error .wa-type-wrapper { border-color: var(--err); } /* dropdown of delivery variants */ #js-checkout-order-page .wa-dropdown { position: relative; } #js-checkout-order-page .wa-dropdown.full-line, #js-checkout-order-page .wa-dropdown:not(.full-line) { display: block; max-width: 100%; } #js-checkout-order-page .wa-dropdown > .wa-dropdown-toggle { position: relative; display: block; min-height: 52px; padding: 14px 44px 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--white); font-size: var(--fs-body); line-height: 1.3; cursor: pointer; white-space: normal; } #js-checkout-order-page .wa-dropdown > .wa-dropdown-toggle:hover { border-color: var(--muted); } #js-checkout-order-page .wa-dropdown > .wa-dropdown-toggle::after { right: 18px; width: 7px; height: 7px; border-color: var(--cocoa); border-width: 0 1.6px 1.6px 0; } #js-checkout-order-page .wa-dropdown.is-opened > .wa-dropdown-toggle { border-color: var(--cocoa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 25%, transparent); } #js-checkout-order-page .wa-dropdown.is-opened > .wa-dropdown-toggle::after { border-color: var(--cocoa); } #js-checkout-order-page .wa-dropdown.is-locked > .wa-dropdown-toggle { background: var(--paper); color: var(--ink); cursor: default; } #js-checkout-order-page .wa-dropdown.is-locked > .wa-dropdown-toggle::after { display: none; } #js-checkout-order-page .wa-dropdown > .wa-dropdown-area { width: 100%; max-width: 100%; margin-top: 4px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); box-shadow: var(--shadow-l); } #js-checkout-order-page .wa-dropdown > .wa-dropdown-area:hover { border-color: var(--line); } #js-checkout-order-page .wa-dropdown > .wa-dropdown-area > .wa-dropdown-item { padding: 12px 16px; border-top: 1px solid var(--line); } #js-checkout-order-page .wa-dropdown > .wa-dropdown-area > .wa-dropdown-item:hover { background: var(--paper); } #js-checkout-order-page .wa-dropdown > .wa-dropdown-area > .wa-dropdown-item.is-selected { font-weight: 600; } #js-checkout-order-page .wa-delivery-variant { display: flex; justify-content: space-between; gap: 12px; } #js-checkout-order-page .wa-delivery-variant .wa-price { white-space: nowrap; font-weight: 600; } /* rates and extra shipping fields */ #js-checkout-order-page .wa-details-rates-section { margin-bottom: 14px; } #js-checkout-order-page .wa-details-rates-section .wa-table { display: grid; gap: 6px; } #js-checkout-order-page .wa-details-rates-section .wa-row { display: flex; justify-content: space-between; gap: 12px; } #js-checkout-order-page .wa-details-rates-section .wa-cell { display: block; width: auto; padding: 0; } #js-checkout-order-page .wa-details-rates-section .wa-cell-name { flex: 1 1 auto; } #js-checkout-order-page .wa-details-rates-section .wa-cell-value { flex: none; } #js-checkout-order-page .wa-details-rates-section .wa-cell-name { color: var(--muted); } #js-checkout-order-page .wa-details-rates-section .wa-cell-value { font-weight: 600; text-align: right; } #js-checkout-order-page .wa-details-rates-section .wa-cell-value-description { font-size: var(--fs-note); color: var(--muted); font-weight: 400; } #js-checkout-order-page .wa-possible-addresses-section { margin-bottom: 14px; } #js-checkout-order-page .wa-address-variant { padding: 4px 0; } /* ---------- form: payment ---------- */ #js-checkout-order-page .wa-methods-list { display: grid; gap: 10px; } #js-checkout-order-page .wa-methods-list .wa-method-wrapper, #js-checkout-order-page .wa-methods-list.wide .wa-method-wrapper, #js-checkout-order-page .wa-methods-list.wide .wa-method-wrapper:first-child, #js-checkout-order-page .wa-methods-list.wide .wa-method-wrapper:last-child { position: relative; margin: 0; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); box-shadow: none; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); } #js-checkout-order-page .wa-methods-list .wa-method-wrapper:hover { border-color: var(--muted); } #js-checkout-order-page .wa-methods-list .wa-method-wrapper.is-active, #js-checkout-order-page .wa-methods-list.wide .wa-method-wrapper.is-active { border-color: var(--cocoa); box-shadow: 0 0 0 1.5px var(--cocoa); background: var(--white); } #js-checkout-order-page .wa-methods-list .wa-method { display: flex; align-items: center; gap: 14px; width: 100%; } #js-checkout-order-page .wa-methods-list .wa-method > * { display: block; padding: 0; width: auto; } #js-checkout-order-page .wa-methods-list .wa-method .wa-checkbox-wrapper { display: grid; place-items: center; width: auto; padding: 0; line-height: 0; } #js-checkout-order-page .wa-methods-list .wa-method .wa-image-wrapper { width: 48px; flex: none; text-align: center; } #js-checkout-order-page .wa-methods-list .wa-method .wa-image-wrapper img { max-width: 100%; max-height: 32px; } #js-checkout-order-page .wa-methods-list .wa-method .wa-method-body { flex: 1 1 auto; min-width: 0; } #js-checkout-order-page .wa-methods-list .wa-payment-name { font-size: var(--fs-text); font-weight: 600; line-height: 1.3; color: var(--ink); } #js-checkout-order-page .wa-methods-list .wa-payment-name a { color: inherit; text-decoration: none; } #js-checkout-order-page .wa-methods-list .wa-description { margin: 2px 0 0; font-size: var(--fs-note); line-height: 1.35; color: var(--muted); } #js-checkout-order-page .wa-payment-fields-wrapper { margin-top: 14px; } #js-checkout-order-page .wa-methods-list.wa-error .wa-method-wrapper { border-color: var(--err); } /* ---------- form: confirmation, totals, submit ---------- */ #js-checkout-order-page .wa-step-confirm-section > .wa-section-body > form { display: flex; flex-direction: column; gap: 20px; } #js-checkout-order-page .wa-step-confirm-section .wa-plugin-hook { order: -1; } #js-checkout-order-page .wa-step-confirm-section .wa-flex-wrapper { display: flex; flex-direction: column; gap: 18px; } #js-checkout-order-page .wa-step-confirm-section .wa-flex-wrapper > * { flex: none; margin: 0; width: 100%; } #js-checkout-order-page .wa-step-confirm-section .wa-comment-section { font-size: var(--fs-small); } #js-checkout-order-page .wa-step-confirm-section .wa-comment-section .wa-hidden { margin-top: 10px; } #js-checkout-order-page .wa-step-confirm-section .wa-total-section { display: grid; gap: 8px; margin: 0; font-size: var(--fs-text); } #js-checkout-order-page .wa-step-confirm-section .wa-total-section .wa-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; } #js-checkout-order-page .wa-step-confirm-section .wa-total-section .wa-item .wa-name { flex: 1 1 auto; margin: 0; font-size: var(--fs-text); line-height: 1.35; color: var(--ink); transform: none; align-self: auto; } #js-checkout-order-page .wa-step-confirm-section .wa-total-section .wa-item .wa-value { flex: none; font-size: var(--fs-text); line-height: 1.35; text-align: right; font-variant-numeric: tabular-nums; } #js-checkout-order-page .wa-step-confirm-section .wa-total-section .wa-item-discount .wa-value { color: var(--ok); font-weight: 600; } #js-checkout-order-page .wa-step-confirm-section .wa-total-section .wa-item.wa-item-total { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); align-items: center; } #js-checkout-order-page .wa-step-confirm-section .wa-total-section .wa-item-total .wa-name { font-size: var(--fs-md); font-weight: 700; color: var(--ink); } #js-checkout-order-page .wa-step-confirm-section .wa-total-section .wa-item-total .wa-value .wa-price { font-size: var(--fs-xl); line-height: 1.3; font-weight: 700; } #js-checkout-order-page .wa-step-confirm-section .wa-actions-section { display: flex; flex-direction: column; gap: 14px; align-self: stretch; } #js-checkout-order-page .wa-step-confirm-section .wa-terms-section .wa-field-wrapper { display: block; width: 100%; } #js-checkout-order-page .wa-step-confirm-section .wa-terms-section .wa-checkbox-wrapper { font-size: var(--fs-small); color: var(--ink); } #js-checkout-order-page .wa-step-confirm-section .wa-submit-button { display: flex; width: 100%; min-height: 56px; height: auto; padding: 0 26px; font-size: var(--fs-note); line-height: 1.3; white-space: normal; text-align: center; } #js-checkout-order-page .wa-step-confirm-section .wa-submit-button .s-points-wrapper { display: inline-flex; gap: 6px; padding: 0; } #js-checkout-order-page .wa-step-confirm-section .wa-submit-button .s-point { display: block; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--ivory); opacity: .3; animation: eco-dot .9s linear infinite; } #js-checkout-order-page .wa-step-confirm-section .wa-submit-button .s-point:nth-child(2) { animation-delay: .3s; } #js-checkout-order-page .wa-step-confirm-section .wa-submit-button .s-point:nth-child(3) { animation-delay: .6s; } @keyframes eco-dot { 50% { opacity: 1; } } #js-checkout-order-page .s-message.is-cart-invalid { padding: 12px 16px; border-radius: var(--r-s); background: var(--err-soft); color: var(--err); font-size: var(--fs-small); line-height: 1.45; } #js-checkout-order-page .s-message.is-cart-invalid ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; } #js-checkout-order-page .s-message.is-cart-invalid .gray { color: var(--muted); } /* ---------- plugin ecomakecartrules: gift and marketing consent (markup is the plugin's, we only paint it) ---------- */ #js-checkout-order-page .ec-gift { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-m); background: var(--paper); } #js-checkout-order-page .ec-gift__title { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-xl); line-height: 1.15; } #js-checkout-order-page .ec-gift__opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; row-gap: 0; align-items: center; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--white); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); } #js-checkout-order-page .ec-gift__opt:hover { border-color: var(--muted); } #js-checkout-order-page .ec-gift__opt:has(input:checked) { border-color: var(--cocoa); box-shadow: 0 0 0 1.5px var(--cocoa); } #js-checkout-order-page .ec-gift__opt input { appearance: none; -webkit-appearance: none; grid-row: 1 / span 2; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--cocoa); border-radius: 50%; background: var(--white); cursor: pointer; } #js-checkout-order-page .ec-gift__opt input:checked { background: var(--cocoa); box-shadow: inset 0 0 0 4px var(--white); } #js-checkout-order-page .ec-gift__t { grid-column: 2; font-weight: 600; font-size: var(--fs-text); line-height: 1.3; } #js-checkout-order-page .ec-gift__s { grid-column: 2; font-size: var(--fs-note); line-height: 1.35; color: var(--muted); } #js-checkout-order-page .ec-marketing { display: flex; gap: 12px; align-items: flex-start; padding-block: 4px; font-size: var(--fs-small); line-height: 1.45; cursor: pointer; } #js-checkout-order-page .ec-marketing input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 1px 0 0; border: 1.5px solid var(--cocoa); border-radius: 6px; background: var(--white); cursor: pointer; } #js-checkout-order-page .ec-marketing input:checked { background: var(--cocoa); } #js-checkout-order-page .ec-marketing input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--ivory); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); } /* ---------- tooltips, autocomplete, dialogs (they are appended to body, outside the page id) ---------- */ html body .wa-tooltip:not(.custom):after { background: var(--ink); color: var(--ivory); border-radius: 6px; font-size: var(--fs-caption); font-family: var(--f-ui); } html body .wa-tooltip:not(.custom).top:before { border-top-color: var(--ink); } html body .wa-tooltip:not(.custom).bottom:before { border-bottom-color: var(--ink); } html body .ui-autocomplete.ui-menu { z-index: 3000; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); box-shadow: var(--shadow-l); font-family: var(--f-ui); font-size: var(--fs-text); } html body .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper { padding: 10px 12px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink); } html body .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active { background: var(--paper); color: var(--ink); margin: 0; border: 0; } html body .wa-order-dialog { font-family: var(--f-ui); color: var(--ink); } html body .wa-order-dialog .wa-dialog-background { background: color-mix(in srgb, var(--ink) 50%, transparent); } html body .wa-order-dialog .wa-dialog-body { border: 0; border-radius: var(--r-l); background: var(--ivory); box-shadow: var(--shadow-l); } html body .wa-order-dialog .wa-dialog-body .wa-dialog-header { border-bottom: 1px solid var(--line); } html body .wa-order-dialog .wa-dialog-body .wa-dialog-header .wa-header { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-2xl); line-height: 1.15; } html body .wa-order-dialog .wa-dialog-body .wa-dialog-header .wa-close-wrapper { color: var(--muted); } html body .wa-order-dialog .wa-dialog-body .wa-dialog-header .wa-close-wrapper:hover { color: var(--ink); } html body .wa-order-dialog .wa-dialog-body.with-footer .wa-dialog-footer, html body .wa-order-dialog .wa-dialog-body.is-tall .wa-dialog-footer { border-top: 1px solid var(--line); } html body .wa-order-dialog .wa-dialog-body .wa-dialog-footer { display: flex; flex-wrap: wrap; gap: 10px; } html body .wa-order-dialog .wa-dialog-body .wa-dialog-footer .wa-button { margin: 0; } html body .wa-order-dialog .wa-field-wrapper .wa-input, html body .wa-order-dialog .wa-field-wrapper .wa-select, html body .wa-order-dialog .wa-field-wrapper .wa-textarea { min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-s); font: 400 16px/1.3 var(--f-ui); } html body .wa-order-dialog .wa-field-wrapper .wa-input:focus { border-color: var(--cocoa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 25%, transparent); outline: 0; } @media (max-width: 719px) { html body .wa-order-dialog .wa-dialog-body { max-width: calc(100% - 16px); } } /* ---------- success and error pages ---------- */ .s-checkout-page { padding-block: 40px 24px; } .s-checkout-result { max-width: 720px; margin-inline: auto; text-align: center; } .s-checkout-result .h2 { margin: 18px 0 12px; } .s-checkout-result .lead { margin-inline: auto; } .s-checkout-result .lead p + p { margin-top: 8px; } .s-result-mark { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); } .s-result-mark.is-err { background: var(--err-soft); color: var(--err); } .s-result-mark .ic { width: 32px; height: 32px; } .s-checkout-result .s-order-number { color: var(--clay-deep); font-weight: 600; } .s-checkout-result .s-plugin-wrapper { margin: 24px auto 0; padding: 18px 20px; max-width: 560px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); text-align: left; font-size: var(--fs-text); } .s-result-summary { margin: 28px auto 0; padding: 22px; max-width: 560px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow-s); text-align: left; } .s-result-summary .h3 { margin-bottom: 12px; } .s-result-items { display: grid; gap: 8px; margin-bottom: 14px; font-size: var(--fs-text); } .s-result-items li { display: flex; justify-content: space-between; gap: 12px; } .s-result-items .s-item-qty { flex: none; color: var(--muted); white-space: nowrap; } .s-result-actions { justify-content: center; margin-top: 28px; } /* ---------- order form: small fixes found on the 1707 / 1280 / 390 passes ---------- */ #js-checkout-order-page .wa-login-link { display: inline-block; margin-top: 8px; padding: 2px 0; } #js-checkout-order-page .wa-delivery-types-section > .wa-header, #js-checkout-order-page .wa-delivery-variants-section > .wa-header { color: var(--ink); } #js-checkout-order-page .ec-marketing { margin-top: 14px; } /* ---------- success page: payment dialog of the core ---------- * FrontendCheckoutSuccessPaymentSelection.html prints a