.co-wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 24px; align-items: start; margin-top: 8px; } .co-wizard-frame { max-width: 720px; width: 100%; margin: 0 auto; padding: clamp(22px, 3vw, 32px); border: 2px solid rgba(90, 143, 184, 0.45); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.06), 0 16px 48px rgba(44, 62, 80, 0.08); } .co-wizard-layout > .co-wizard-frame { margin: 0; } .co-wizard-progress { display: flex; align-items: flex-start; gap: 0; margin-bottom: 28px; position: relative; } .co-wizard-progress::before { content: ''; position: absolute; top: 18px; left: 12%; right: 12%; height: 2px; background: var(--gold-border); z-index: 0; } .co-wizard-progress__fill { position: absolute; top: 18px; left: 12%; height: 2px; width: 0; background: linear-gradient(90deg, #5a8fb8, #3498db); z-index: 1; transition: width 0.35s ease; } .co-wizard-step-label { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; z-index: 2; min-width: 0; } .co-wizard-step-label span.num { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 2px solid var(--gold-border); background: var(--olive-2); color: var(--muted-text); transition: all 0.25s ease; } .co-wizard-step-label span.txt { font-size: 11px; letter-spacing: 0.04em; color: var(--muted-text); line-height: 1.3; padding: 0 4px; } .co-wizard-step-label.is-active span.num, .co-wizard-step-label.is-done span.num { border-color: #3498db; background: #3498db; color: #fff; } .co-wizard-step-label.is-active span.txt { color: var(--ink); font-weight: 600; } .co-wizard-step-label.is-done span.num { background: #5a8fb8; border-color: #5a8fb8; } .co-wizard-pane { display: none; } .co-wizard-pane.is-active { display: block; animation: coWizardIn 0.28s ease; } @keyframes coWizardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .co-wizard-pane__title { margin: 0 0 6px; font-family: var(--aq-font-display); font-size: clamp(20px, 2.5vw, 24px); font-weight: 600; color: var(--ink); } .co-wizard-pane__sub { margin: 0 0 20px; font-size: 14px; color: var(--muted-text); line-height: 1.5; } .co-wizard-pane__sub--tight { margin-bottom: 12px; font-size: 13px; } .co-delivery-compact { display: grid; gap: 12px; } .co-delivery-hint { margin: 0; font-size: 12px; color: var(--muted-text); } .co-delivery-saved { margin: 0; } .co-delivery-saved select { padding: 8px 10px; font-size: 13px; } .co-delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } .co-delivery-box { padding: 14px 14px 12px; border: 1px solid rgba(90, 143, 184, 0.22); border-radius: var(--radius); background: linear-gradient(160deg, rgba(248, 251, 253, 0.95) 0%, #fff 100%); } .co-delivery-box__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 650; color: var(--ink); } .co-delivery-box__title i { color: #5a8fb8; font-size: 15px; } .co-delivery-fields { display: grid; gap: 8px; } .co-delivery-fields .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .co-delivery-fields .field { margin: 0; } .co-delivery-fields .field label { font-size: 11px; margin-bottom: 3px; letter-spacing: 0.02em; } .co-delivery-fields input, .co-delivery-fields textarea, .co-delivery-fields select { padding: 7px 9px; font-size: 13px; min-height: 0; } .co-delivery-fields textarea { min-height: 52px; resize: vertical; line-height: 1.4; } .co-invoice-type { margin: 0; gap: 8px; } .co-invoice-type .pref-option { padding: 8px 10px; font-size: 12px; } .co-company-fields { display: grid; gap: 8px; } .co-gift-details { margin: 0; font-size: 12px; } .co-gift-details summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 4px 0; } .co-gift-details .checkbox-row { margin: 8px 0 6px; font-size: 12px; } .co-gift-details textarea { width: 100%; padding: 7px 9px; font-size: 12px; min-height: 48px; } .co-delivery-extra { margin: 0; padding: 10px 12px; border: 1px dashed rgba(90, 143, 184, 0.28); border-radius: var(--radius-sm); font-size: 12px; } .co-delivery-extra.guest-account-box { display: grid; gap: 8px; } .co-pay-accordion { display: grid; gap: 8px; margin-bottom: 14px; } .co-pay-acc { border: 1px solid rgba(90, 143, 184, 0.28); border-radius: var(--radius); background: #fff; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .co-pay-acc[open], .co-pay-acc.is-selected { border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1); } .co-pay-acc__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; } .co-pay-acc__head::-webkit-details-marker { display: none; } .co-pay-acc__head::marker { content: ''; } .co-pay-acc__icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: rgba(52, 152, 219, 0.08); font-size: 20px; line-height: 1; } .co-pay-acc__text { flex: 1; min-width: 0; display: grid; gap: 2px; } .co-pay-acc__text strong { font-size: 14px; color: var(--ink); } .co-pay-acc__text small { font-size: 12px; color: var(--muted-text); line-height: 1.4; } .co-pay-acc__warn { font-size: 10px; font-weight: 600; color: #9a6700; background: #fff8e6; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .co-pay-acc__chev { color: var(--muted-text); font-size: 14px; transition: transform 0.2s; } .co-pay-acc[open] .co-pay-acc__chev { transform: rotate(180deg); } .co-pay-acc__body { padding: 0 14px 14px; border-top: 1px solid rgba(90, 143, 184, 0.12); animation: coWizardIn 0.2s ease; } .co-pay-acc__note-warn { margin: 10px 0 0; font-size: 12px; color: #9a6700; line-height: 1.45; } .co-havale-intro { font-size: 12px; margin: 12px 0 10px; line-height: 1.45; } .co-wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--gold-border); } .co-wizard-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border: none; transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s; } .co-wizard-btn--back { background: transparent; color: #5a8fb8; border: 1px solid rgba(90, 143, 184, 0.35); } .co-wizard-btn--back:hover { background: rgba(52, 152, 219, 0.08); border-color: #3498db; } .co-wizard-btn--next, .co-wizard-btn--submit { background: linear-gradient(135deg, #5a8fb8, #3498db); color: #fff; box-shadow: 0 6px 18px rgba(52, 152, 219, 0.25); } .co-wizard-btn--next:hover, .co-wizard-btn--submit:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(52, 152, 219, 0.32); } .co-wizard-btn--ghost { visibility: hidden; pointer-events: none; } .co-pay-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } .co-pay-type-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 20px 16px; border: 2px solid var(--gold-border); border-radius: var(--radius); background: var(--olive-2); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .co-pay-type-card input { position: absolute; opacity: 0; pointer-events: none; } .co-pay-type-card i { font-size: 28px; color: #5a8fb8; } .co-pay-type-card strong { font-size: 14px; color: var(--ink); } .co-pay-type-card small { font-size: 12px; color: var(--muted-text); line-height: 1.45; } .co-pay-type-card:has(input:checked) { border-color: #3498db; background: rgba(52, 152, 219, 0.06); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12); } .co-pay-detail { margin-top: 4px; } .co-pay-detail.is-visible { display: block; animation: coWizardIn 0.25s ease; } .co-pay-gateway-list { display: grid; gap: 8px; margin-bottom: 16px; } .co-pay-gateway-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--gold-border); border-radius: var(--radius-sm); background: #fff; cursor: pointer; } .co-pay-gateway-opt:has(input:checked) { border-color: #3498db; background: rgba(52, 152, 219, 0.04); } .co-pay-gateway-opt input { accent-color: #3498db; } .co-card-form { padding: 18px; border: 1px solid rgba(90, 143, 184, 0.25); border-radius: var(--radius); background: linear-gradient(145deg, #f8fbfd 0%, #fff 100%); } .co-card-form__note { margin: 0 0 14px; font-size: 12px; color: var(--muted-text); line-height: 1.5; } .co-card-form__note strong { color: #3498db; } .co-card-visual { display: grid; gap: 12px; } .co-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .co-card-field label { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-text); margin-bottom: 6px; font-weight: 600; } .co-card-field input { width: 100%; padding: 12px 14px; border: 1px solid var(--field-border); border-radius: var(--radius-sm); font-size: 15px; background: #fff; color: var(--ink); } .co-card-field input:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12); } .co-havale-box { padding: 18px; border: 1px solid rgba(90, 143, 184, 0.25); border-radius: var(--radius); background: var(--olive-2); } .co-havale-grid { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; } .co-havale-info p { margin: 0 0 8px; font-size: 14px; line-height: 1.55; } .co-havale-info code { display: block; margin-top: 8px; padding: 12px 14px; background: #fff; border: 1px dashed #3498db; border-radius: var(--radius-sm); font-size: 13px; word-break: break-all; color: var(--ink); } .co-havale-qr { text-align: center; } .co-havale-qr img { width: 132px; height: 132px; object-fit: contain; background: #fff; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--gold-border); box-shadow: var(--shadow-xs); } .co-havale-qr figcaption { margin-top: 8px; font-size: 11px; color: var(--muted-text); } .co-havale-bank { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .co-havale-bank img { max-height: 36px; } .co-review-block { padding: 16px; border: 1px solid var(--gold-border); border-radius: var(--radius); background: var(--olive-2); margin-bottom: 18px; } .co-review-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 14px; } .co-review-row:last-child { border-bottom: none; } .co-review-row .lbl { color: var(--muted-text); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; flex: 0 0 auto; } .co-review-row .val { text-align: right; color: var(--ink); line-height: 1.5; } .co-consent-box { border: 1px solid var(--gold-border); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; } .co-consent-box label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; cursor: pointer; } .co-consent-box input { margin-top: 3px; accent-color: #3498db; } .co-consent-warn { margin: 0; color: #9a2a2a; font-size: 13px; font-weight: 600; } .co-consent-warn[hidden] { display: none !important; } .co-wizard-summary { position: sticky; top: calc(var(--aq-fixed-stack-height, 140px) + 16px); padding: 22px; border: 1px solid var(--gold-border); border-radius: var(--radius-lg); background: var(--olive); box-shadow: var(--shadow-sm); } .co-wizard-summary h3 { margin: 0 0 16px; font-size: 17px; font-weight: 650; color: var(--ink); } .co-summary-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gold-border); font-size: 13px; } .co-summary-total { display: flex; justify-content: space-between; padding: 14px 0 4px; font-size: 20px; font-weight: 700; color: var(--ink); } .co-items-toggle { margin-bottom: 16px; border: 1px solid var(--gold-border); border-radius: var(--radius); background: var(--olive-2); overflow: hidden; } .co-items-toggle summary { padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink); list-style: none; } .co-items-toggle summary::-webkit-details-marker { display: none; } .co-items-toggle .cart-table { font-size: 13px; } @media (max-width: 960px) { .co-wizard-layout { grid-template-columns: 1fr; } .co-cart-columns { grid-template-columns: 1fr; gap: 14px; } .co-cart-summary-panel { position: static; } .co-wizard-frame { max-width: none; } .co-pay-type-grid { grid-template-columns: 1fr; } .co-delivery-grid { grid-template-columns: 1fr; } .co-havale-grid { grid-template-columns: 1fr; } .co-havale-qr { justify-self: center; } } @media (max-width: 768px) { .page-cart .aq-cart-page { padding: 10px 0 28px; } .page-cart .aq-cart-page .aq-container { padding-left: 12px; padding-right: 12px; } .page-cart .aq-cart-page .aq-breadcrumb { display: none; } .page-cart .aq-cart-page-head { min-height: 0; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; } .page-cart .aq-cart-page-head span { font-size: 10px; letter-spacing: 0.12em; } .page-cart .aq-cart-page-head h1 { font-size: 22px; margin: 4px 0 0; } .page-cart .aq-cart-page-head p { display: none; } .page-cart .co-cart-columns { display: flex; flex-direction: column; gap: 12px; } .page-cart .co-cart-main { order: 1; min-width: 0; } .page-cart .co-cart-summary-panel { order: 2; } .page-cart .co-cart-page-shell[data-co-step="1"] .co-cart-summary-panel, .page-cart .co-cart-page-shell[data-co-step="2"] .co-cart-summary-panel { order: 0; } .page-cart .co-cart-module, .page-cart .co-cart-main .co-wizard-frame.co-cart-module { padding: 14px 12px; border-width: 1px; border-radius: 14px; box-shadow: 0 2px 14px rgba(44, 62, 80, 0.06); } .page-cart .co-wizard-progress { margin-bottom: 16px; } .page-cart .co-wizard-step-label span.txt { font-size: 9px; line-height: 1.2; } .page-cart .co-wizard-step-label span.num { width: 30px; height: 30px; font-size: 11px; } .page-cart .co-wizard-pane__title { font-size: 18px; margin-bottom: 4px; } .page-cart .co-wizard-pane__sub { font-size: 12px; margin-bottom: 12px; } .page-cart .co-cart-module__head--desktop { display: none; } .page-cart .co-m-summary-fold { border: 0; margin: 0; } .page-cart .co-m-summary-fold__toggle { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; padding: 0 0 10px; border-bottom: 1px solid var(--gold-border); margin-bottom: 10px; } .page-cart .co-m-summary-fold__toggle::-webkit-details-marker { display: none; } .page-cart .co-m-summary-fold__toggle-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .page-cart .co-m-summary-fold__toggle-left strong { font-size: 14px; font-weight: 650; color: var(--ink); } .page-cart .co-m-summary-fold__toggle-total { font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; } .page-cart .co-m-summary-fold__chev { font-size: 14px; color: var(--muted-text); transition: transform 0.2s ease; } .page-cart .co-m-summary-fold[open] .co-m-summary-fold__chev { transform: rotate(180deg); } .page-cart .co-summary-vat-badge { font-size: 10px; padding: 6px 10px; margin-bottom: 8px; } .page-cart .co-summary-breakdown__row { padding: 5px 0; } .page-cart .co-summary-breakdown__row dt, .page-cart .co-summary-breakdown__row dd { font-size: 12px; } .page-cart .co-summary-breakdown__row--total dd { font-size: 16px; } .page-cart .co-cart-lines { gap: 8px; margin-bottom: 10px; } .page-cart .co-cart-line { grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 10px; padding: 10px 36px 10px 10px; min-height: 0; position: relative; align-items: start; } .page-cart .co-cart-line__thumb { grid-row: 1 / span 2; width: 58px; height: 74px; } .page-cart .co-cart-line__body { grid-column: 2; gap: 2px; } .page-cart .co-cart-line__title { font-size: 13px; padding-right: 4px; } .page-cart .co-cart-line__unit { font-size: 11px; } .page-cart .co-cart-line__foot { grid-column: 1 / -1; padding-top: 4px; margin-top: 2px; border-top: 1px solid rgba(0, 0, 0, 0.05); } .page-cart .co-cart-line__remove-form { position: absolute; top: 8px; right: 8px; margin: 0; } .page-cart .co-cart-line__remove { width: 30px; height: 30px; font-size: 13px; } .page-cart .co-qty-stepper__btn { width: 32px; height: 32px; } .page-cart .co-cart-line__total { font-size: 15px; font-weight: 800; } .page-cart .co-cart-step-actions { margin-top: 4px; } .page-cart .co-cart-step-actions .btn { width: 100%; justify-content: center; } .page-cart .co-wizard-nav { position: sticky; bottom: 0; z-index: 40; flex-direction: row; gap: 8px; margin-top: 14px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, #fff 24%); border-top: 1px solid var(--gold-border); backdrop-filter: blur(8px); } .page-cart .co-wizard-btn { flex: 1; width: auto; min-height: 46px; font-size: 13px; padding: 0 14px; } .page-cart .co-wizard-btn--ghost { display: none !important; } .page-cart .co-wizard-btn--submit { flex: 1.2; font-size: 12px; white-space: nowrap; } .page-cart .co-delivery-fields .row-2 { grid-template-columns: 1fr; } .page-cart .co-consent-box label { font-size: 12px; } .page-cart .co-xsell-slot { margin-top: 8px; } } @media (min-width: 769px) { .page-cart .co-m-summary-fold__toggle { display: none; } .page-cart .co-m-summary-fold__body { display: block; } .page-cart .co-cart-module__head--desktop { display: flex; } } @media (max-width: 560px) { .co-wizard-step-label span.txt { font-size: 10px; } .co-wizard-step-label span.num { width: 32px; height: 32px; font-size: 12px; } .co-card-row { grid-template-columns: 1fr; } .co-wizard-nav { flex-direction: column-reverse; } .page-cart .co-wizard-nav { flex-direction: row; } .co-wizard-btn { width: 100%; } .co-wizard-btn--ghost { display: none; } } .co-wizard-layout--single { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; } .co-cart-page-shell { margin-top: 4px; } .co-cart-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 22px; align-items: stretch; } @media (min-width: 1100px) { .co-cart-columns { grid-template-columns: minmax(0, 1.55fr) minmax(340px, 420px); } } .co-cart-module, .co-cart-main .co-wizard-frame.co-cart-module { display: flex; flex-direction: column; min-height: 100%; padding: 22px 20px; border: 2px solid rgba(90, 143, 184, 0.38); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.05), 0 12px 36px rgba(44, 62, 80, 0.07); } .co-cart-main .co-wizard-frame.co-cart-module { flex: 1 1 auto; } .co-cart-summary-panel.co-cart-module { flex: 1 1 auto; align-self: stretch; } .co-cart-module__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .co-cart-module__head h2, .co-cart-module__head h3 { margin: 0; font-size: 17px; font-weight: 650; color: var(--ink); } .co-cart-module__badge { font-size: 11px; font-weight: 600; color: #5a8fb8; background: rgba(52, 152, 219, 0.1); padding: 3px 9px; border-radius: 999px; } .co-cart-module--compact { padding: 20px 18px; font-size: 13px; } .co-summary-vat-badge { margin: 0 0 12px; padding: 8px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-align: center; color: #5a8fb8; background: rgba(52, 152, 219, 0.08); border-radius: var(--radius-sm); border: 1px solid rgba(90, 143, 184, 0.2); } .co-summary-breakdown__section { margin: 10px 0 4px; padding-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-text); border-top: 1px dashed var(--gold-border); } .co-summary-breakdown__section:first-child { margin-top: 0; padding-top: 0; border-top: none; } .co-summary-breakdown__row--sub dt, .co-summary-breakdown__row--sub dd { font-weight: 600; } .co-summary-breakdown__row--extra dt, .co-summary-breakdown__row--extra dd { color: #7a6b5a; } .co-summary-ship-hint { margin: 0 0 12px; padding: 10px 12px; font-size: 12px; line-height: 1.45; border-radius: var(--radius-sm); background: rgba(52, 152, 219, 0.07); border: 1px solid rgba(90, 143, 184, 0.2); color: var(--ink); } .co-summary-ship-hint--ok { background: rgba(122, 155, 126, 0.1); border-color: rgba(122, 155, 126, 0.35); color: var(--leaf); } .co-summary-addon { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gold-border); } .co-summary-addon__label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-text); margin-bottom: 8px; } .co-cart-module--compact .co-cart-module__head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--gold-border); } .co-cart-module--compact .co-cart-module__head h3 { font-size: 15px; } .co-summary-breakdown { margin: 0 0 14px; padding: 0; flex: 1 1 auto; } .co-summary-breakdown__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.04); } .co-summary-breakdown__row dt { margin: 0; font-weight: 500; color: var(--ink); font-size: 13px; } .co-summary-breakdown__row dd { margin: 0; font-weight: 600; color: var(--ink); font-size: 13px; white-space: nowrap; } .co-summary-breakdown__hint { font-weight: 400; font-size: 11px; color: var(--muted-text); } .co-summary-breakdown__row--muted dt, .co-summary-breakdown__row--muted dd { color: var(--muted-text); font-weight: 500; font-size: 12px; } .co-summary-breakdown__row--disc dt, .co-summary-breakdown__row--disc dd { color: var(--leaf); } .co-summary-breakdown__row--total { margin-top: 6px; padding-top: 12px; border-bottom: none; border-top: 2px solid var(--gold-border); } .co-summary-breakdown__row--total dt { font-size: 14px; font-weight: 650; } .co-summary-breakdown__row--total dd { font-size: 18px; font-weight: 700; color: var(--ink); } .co-summary-footnote { margin: 0 0 10px; font-size: 11px; line-height: 1.45; text-align: center; } .co-cart-module--compact .co-cart-summary-coupon { margin-top: 10px; padding-top: 12px; } .co-cart-module--compact .co-cart-summary-trust { margin-top: 10px; font-size: 10px; } .co-cart-module--compact .co-cart-coupon-form { display: flex; gap: 8px; } .co-cart-module--compact .co-cart-coupon-form input[type="text"], .co-cart-module--compact .co-cart-coupon-form input[type="number"] { flex: 1; min-width: 0; padding: 9px 11px; font-size: 13px; } .co-cart-module--compact .co-cart-coupon-form .btn { flex-shrink: 0; } .co-cart-lines { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .co-cart-lines--summary { flex: 1 1 auto; max-height: none; } .co-cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; min-height: 114px; border: 1px solid var(--gold-border); border-radius: var(--radius); background: var(--olive-2); box-sizing: border-box; } .co-cart-line--readonly { grid-template-columns: 72px minmax(0, 1fr); } .co-cart-line__thumb { display: block; width: 72px; height: 90px; border-radius: var(--radius-sm); overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); flex-shrink: 0; } .co-cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .co-cart-line__ph { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--aq-font-display); font-size: 22px; color: var(--gold); background: var(--cream); } .co-cart-line__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .co-cart-line__title { font-size: 13px; font-weight: 650; color: var(--ink); text-decoration: none; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .co-cart-line__title:hover { color: #3498db; } .co-cart-line__variant { font-size: 11px; color: var(--muted-text); } .co-cart-line__unit { font-size: 12px; color: var(--muted-text); } .co-cart-line__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; } .co-cart-line__total { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; } .co-cart-line__qty-badge { font-size: 12px; color: var(--muted-text); background: #fff; border: 1px solid var(--gold-border); padding: 4px 10px; border-radius: 999px; } .co-qty-stepper { display: inline-flex; align-items: center; gap: 0; background: #fff; border: 1px solid rgba(90, 143, 184, 0.35); border-radius: 999px; overflow: hidden; box-shadow: 0 2px 8px rgba(52, 152, 219, 0.08); } .co-qty-stepper__form { margin: 0; } .co-qty-stepper__btn { width: 34px; height: 34px; border: none; background: transparent; color: #5a8fb8; display: grid; place-items: center; cursor: pointer; font-size: 14px; transition: background 0.15s, color 0.15s; } .co-qty-stepper__btn:hover:not(:disabled) { background: rgba(52, 152, 219, 0.12); color: #3498db; } .co-qty-stepper__btn:disabled { opacity: 0.35; cursor: not-allowed; } .co-qty-stepper__val { min-width: 28px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink); } .co-cart-line__remove-form { margin: 0; align-self: start; } .co-cart-line__remove { width: 36px; height: 36px; border: 1px solid rgba(210, 123, 133, 0.35); border-radius: 999px; background: rgba(210, 123, 133, 0.08); color: #c45c6a; display: grid; place-items: center; cursor: pointer; font-size: 15px; transition: background 0.15s, transform 0.15s, border-color 0.15s; } .co-cart-line__remove:hover { background: rgba(210, 123, 133, 0.18); border-color: #c45c6a; transform: scale(1.05); } .co-cart-main .co-wizard-frame { max-width: none; margin: 0; } .co-cart-summary-panel { position: sticky; top: calc(var(--aq-fixed-stack-height, 140px) + 16px); } .co-summary-totals--sidebar { padding: 12px 0 0; border: none; background: transparent; } .co-summary-totals--sidebar .co-summary-item { padding: 6px 0; font-size: 13px; } .co-summary-item--disc { color: var(--leaf) !important; } .co-cart-summary-coupon { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--gold-border); } .co-cart-coupon-form { display: flex; gap: 8px; } .co-cart-coupon-form input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-sm); font-size: 13px; } .co-cart-coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--leaf); } .co-cart-summary-trust { margin: 14px 0 0; font-size: 11px; display: flex; align-items: center; gap: 6px; justify-content: center; } .co-cart-table-wrap { padding: 0 !important; margin-bottom: 12px; overflow: hidden; border-radius: var(--radius); } .co-cart-step-actions { margin-top: 8px; } .co-summary-totals { padding: 14px 16px; border: 1px solid var(--gold-border); border-radius: var(--radius); background: var(--olive-2); } .co-thankyou-page, .co-notify-page { padding: 24px 0 40px; } .co-notify-container { max-width: min(1240px, 100%); } .co-notify-shell.co-wizard-frame { max-width: none; margin: 0 auto; padding: clamp(20px, 2.5vw, 28px); } .co-notify-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--gold-border); } .co-notify-head__title { margin: 0 0 4px; font-family: var(--aq-font-display); font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; color: var(--ink); } .co-notify-head__intro { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted-text); max-width: 52ch; } .co-notify-meta { display: flex; gap: 18px; margin: 0; flex-shrink: 0; } .co-notify-meta div { text-align: right; } .co-notify-meta dt { margin: 0; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-text); } .co-notify-meta dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); } .co-notify-alert { margin-bottom: 14px; } .co-notify-layout { display: grid; grid-template-columns: minmax(420px, 500px) minmax(340px, 1fr); gap: 28px; align-items: stretch; } .co-notify-bank { margin: 0; padding: 20px 22px; min-height: 100%; } .co-notify-bank__brand { margin-bottom: 14px; } .co-notify-bank__body { display: flex; gap: 20px; align-items: center; justify-content: space-between; } .co-notify-bank__info { flex: 1; min-width: 0; } .co-notify-bank__info p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; } .co-notify-bank__info .muted { display: block; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 3px; color: var(--muted-text); } .co-notify-iban { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; word-break: break-word; line-height: 1.45; padding: 12px 14px; background: #fff; border: 1px dashed rgba(52, 152, 219, 0.45); border-radius: var(--radius-sm); color: var(--ink); } .co-notify-ref { font-size: 12px !important; margin-top: 10px !important; } .co-notify-bank__qr { margin: 0; flex-shrink: 0; text-align: center; padding: 10px; background: #fff; border-radius: var(--radius-sm); border: 1px solid var(--gold-border); box-shadow: var(--shadow-xs); } .co-notify-bank__qr img { display: block; width: 118px; height: 118px; border-radius: 6px; background: #fff; } .co-notify-bank__qr figcaption { margin-top: 6px; font-size: 11px; color: var(--muted-text); } .co-notify-form-wrap { min-width: 0; } .co-notify-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .co-notify-form__grid .field { margin: 0; } .co-notify-form__grid label { font-size: 12px; margin-bottom: 4px; } .co-notify-form__grid input { min-height: 40px; padding: 8px 12px; font-size: 13px; } .co-notify-form__wide { grid-column: 1 / -1; } .co-notify-form__nav { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gold-border); justify-content: flex-end; gap: 10px; } .co-notify-form__nav .co-wizard-btn--back { margin-right: auto; } @media (max-width: 960px) { .co-notify-layout { grid-template-columns: 1fr; } .co-notify-bank__body { align-items: flex-start; } .co-notify-meta { width: 100%; justify-content: flex-start; } .co-notify-meta div { text-align: left; } } @media (max-width: 520px) { .co-notify-form__grid { grid-template-columns: 1fr; } .co-notify-form__nav { flex-direction: column-reverse; align-items: stretch; } .co-notify-form__nav .co-wizard-btn--back { margin-right: 0; } } .co-thankyou-box { text-align: center; max-width: 640px; margin: 0 auto; } .co-thankyou-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 999px; background: linear-gradient(135deg, #5a8fb8, #3498db); color: #fff; font-size: 28px; font-weight: 700; display: grid; place-items: center; } .co-thankyou-kicker { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #5a8fb8; margin-bottom: 8px; } .co-thankyou-title { margin: 0 0 14px; font-family: var(--aq-font-display); font-size: clamp(24px, 4vw, 32px); color: var(--ink); } .co-thankyou-body { font-size: 15px; line-height: 1.65; color: var(--champagne); margin-bottom: 18px; } .co-thankyou-order { font-size: 14px; margin-bottom: 24px; } .co-thankyou-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .co-order-page { padding: 16px 0 32px; } .co-order-container { max-width: min(1240px, 100%); } .co-order-shell.co-wizard-frame { max-width: none; margin: 0 auto; padding: clamp(16px, 2vw, 22px); } .co-order-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--gold-border); } .co-order-top__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 4px 0 2px; } .co-order-top__meta { margin: 0; font-size: 12px; color: var(--muted-text); } .co-order-top__actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; } .co-order-top__btn { min-height: 38px; padding: 0 16px; font-size: 13px; } .co-order-flash { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; font-size: 13px; line-height: 1.4; color: var(--ink); background: rgba(52, 152, 219, 0.08); border: 1px solid rgba(52, 152, 219, 0.22); border-radius: var(--radius-sm); } .co-order-flash i { color: #3498db; flex-shrink: 0; } .co-order-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--muted-text); } .co-order-breadcrumb a { color: #5a8fb8; text-decoration: none; } .co-order-breadcrumb a:hover { text-decoration: underline; } .co-order-breadcrumb i { font-size: 9px; opacity: 0.55; } .co-order-head__title { margin: 0; font-family: var(--aq-font-display); font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; color: var(--ink); } .co-order-badges { display: flex; flex-wrap: wrap; gap: 6px; } .co-order-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; } .co-order-badge--pending { color: #6b7280; background: #f3f4f6; border-color: #e5e7eb; } .co-order-badge--paid, .co-order-badge--delivered { color: #1b6b38; background: rgba(27, 107, 56, 0.08); border-color: rgba(27, 107, 56, 0.25); } .co-order-badge--shipped { color: #2b6fad; background: rgba(43, 111, 173, 0.08); border-color: rgba(43, 111, 173, 0.25); } .co-order-badge--cancelled { color: #b83232; background: rgba(184, 50, 50, 0.08); border-color: rgba(184, 50, 50, 0.25); } .co-order-badge--pay-pending { color: #c4840a; background: rgba(196, 132, 10, 0.1); border-color: rgba(196, 132, 10, 0.28); } .co-order-badge--pay-paid { color: #1b6b38; background: rgba(27, 107, 56, 0.08); border-color: rgba(27, 107, 56, 0.25); } .co-order-badge--pay-failed { color: #b83232; background: rgba(184, 50, 50, 0.08); border-color: rgba(184, 50, 50, 0.25); } .co-order-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 240px); gap: 20px; align-items: start; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--gold-border); } .co-order-table { width: 100%; border-collapse: collapse; font-size: 13px; } .co-order-table th { padding: 8px 10px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-text); border-bottom: 1px solid var(--gold-border); } .co-order-table th:last-child, .co-order-table td:last-child { text-align: right; } .co-order-table td { padding: 10px; vertical-align: top; border-bottom: 1px solid var(--gold-border); color: var(--champagne); } .co-order-table tbody tr:last-child td { border-bottom: none; } .co-order-table strong { display: block; color: var(--ink); font-weight: 600; line-height: 1.35; } .co-order-table__var { display: block; font-size: 11px; color: var(--muted-text); margin-top: 2px; } .co-order-table__sum { font-weight: 700; color: #5a8fb8 !important; white-space: nowrap; } .co-order-summary { padding: 12px 14px; background: var(--olive-2); border: 1px solid var(--gold-border); border-radius: var(--radius-sm); } .co-order-totals { margin: 0; display: flex; flex-direction: column; gap: 6px; } .co-order-totals--compact { gap: 5px; } .co-order-totals__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; } .co-order-totals__row dt { margin: 0; color: var(--muted-text); } .co-order-totals__row dd { margin: 0; font-weight: 600; color: var(--ink); } .co-order-totals__row--disc dd { color: #1b6b38; } .co-order-totals__row--muted { font-size: 11px; } .co-order-totals__row--grand { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--gold-border); } .co-order-totals__row--grand dt, .co-order-totals__row--grand dd { font-weight: 700; font-size: 14px; } .co-order-totals__row--grand dd { color: #5a8fb8; } .co-order-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .co-order-info { padding: 12px 14px; background: var(--olive-2); border: 1px solid var(--gold-border); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.45; } .co-order-info h3 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 6px; } .co-order-info h3 i { color: #5a8fb8; font-size: 13px; } .co-order-info p { margin: 0 0 4px; color: var(--champagne); } .co-order-info p strong { color: var(--ink); } .co-order-info .lbl { display: inline-block; min-width: 42px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-text); } .co-order-info__addr { font-size: 12px; line-height: 1.4; } .co-order-muted { margin: 0; font-size: 12px; color: var(--muted-text); } .co-order-mono { font-family: ui-monospace, 'SF Mono', monospace; font-size: 11px; letter-spacing: 0.03em; color: #5a8fb8; background: transparent; padding: 0; } .co-order-link { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: #5a8fb8; text-decoration: none; } .co-order-link:hover { text-decoration: underline; } .co-order-havale-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 14px; padding: 14px 18px; } .co-order-havale-strip .co-notify-bank__brand { margin: 0; flex-direction: column; align-items: flex-start; } .co-order-havale-strip .co-notify-bank__body { gap: 14px; } .co-order-havale-strip .co-notify-iban { font-size: 12px; padding: 8px 12px; } .co-order-havale-strip .co-notify-bank__qr img { width: 80px; height: 80px; } .co-order-havale-strip__btn { flex-shrink: 0; min-height: 40px; padding: 0 18px; font-size: 13px; white-space: nowrap; } .co-order-cancel { margin-top: 12px; padding: 10px 14px; font-size: 12px; line-height: 1.45; color: #9a2a2a; background: rgba(184, 50, 50, 0.06); border: 1px solid rgba(184, 50, 50, 0.2); border-radius: var(--radius-sm); } @media (max-width: 960px) { .co-order-body { grid-template-columns: 1fr; } .co-order-summary { max-width: 320px; } .co-order-info-grid { grid-template-columns: 1fr; } .co-order-havale-strip { grid-template-columns: 1fr; text-align: left; } .co-order-havale-strip__btn { width: 100%; justify-content: center; } } @media (max-width: 600px) { .co-order-top { flex-direction: column; } .co-order-top__actions { width: 100%; } .co-order-top__btn { flex: 1; } .co-order-table th:nth-child(3), .co-order-table td:nth-child(3) { display: none; } } @media (max-width: 720px) { .co-cart-line { grid-template-columns: 64px minmax(0, 1fr) auto; min-height: 108px; padding: 10px; gap: 10px; } .co-cart-line--readonly { grid-template-columns: 64px minmax(0, 1fr); } .co-cart-line__thumb { width: 64px; height: 80px; } .co-cart-line__foot { flex-wrap: wrap; } }