, immune to WooCommerce's table CSS that broke the layout). */ body.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100%; border: 0; border-collapse: collapse; margin: 0; display: block; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody { display: block; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item { display: block; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name { display: block; padding: 16px 0; border: 0; border-bottom: 1px solid var(--color-border-light); } body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody tr.cart_item:last-child td.product-name { border-bottom: 0; padding-bottom: 18px; } body.woocommerce-checkout .aj-co-line { display: flex; align-items: center; gap: 14px; } body.woocommerce-checkout .aj-co-thumb { flex: 0 0 auto; display: block; width: 54px; height: 64px; } body.woocommerce-checkout .aj-co-thumb__img { width: 54px; height: 64px; object-fit: contain; max-width: none; display: block; border: 0; background: transparent; padding: 0; } body.woocommerce-checkout .aj-co-info { flex: 1 1 auto; min-width: 0; } body.woocommerce-checkout .aj-co-pname { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--color-text); } /* Quantity lives in the title, typographically highlighted (no floating badge). */ body.woocommerce-checkout .aj-co-qty { display: block; font-size: 18px; font-weight: 800; color: var(--color-primary); line-height: 1.15; margin: 0 0 2px; } body.woocommerce-checkout .aj-co-qty-hidden { display: none; } body.woocommerce-checkout .aj-co-info .variation, body.woocommerce-checkout .aj-co-info dl { font-size: 12px; color: var(--color-text-muted); margin: 3px 0 0; } body.woocommerce-checkout .aj-co-info .variation p, body.woocommerce-checkout .aj-co-info dl dd, body.woocommerce-checkout .aj-co-info dl dt { margin: 0; font-weight: 400; } body.woocommerce-checkout .aj-co-price { flex: 0 0 auto; text-align: right; font-size: 14px; font-weight: 700; color: var(--color-text); line-height: 1.4; } body.woocommerce-checkout .aj-co-price .woocommerce-Price-amount { white-space: nowrap; } /* Totals (tfoot) */ body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot { display: block; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th, body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { padding: 0; border: 0; font-size: 14.5px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th { font-weight: 500; color: var(--color-text-secondary); text-align: left; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { font-weight: 600; color: var(--color-text); text-align: right; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal { border-top: 1px solid var(--color-border); margin-top: 2px; padding-top: 15px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total { border-top: 2px solid var(--color-border); margin-top: 16px; padding-top: 20px; padding-bottom: 6px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total th { font-size: 16px; font-weight: 700; color: var(--color-text); } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total td .woocommerce-Price-amount { font-size: 24px; font-weight: 800; color: var(--color-text); } body.woocommerce-checkout .order-total td .aj-co-vat, body.woocommerce-checkout .order-total td .includes_tax { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-top: 3px; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-discount td { color: var(--color-success); } /* A totals row that carries a checkbox (e.g. the Cashback "Käytä saldo" toggle) is stacked — label on its own line, then checkbox + text below — instead of being crammed into the label|amount flex (was unreadable). Class-agnostic via :has(). */ body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:has(input[type="checkbox"]) { display: block; padding: 15px 0; text-align: left; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:has(input[type="checkbox"]) th { display: block; text-align: left; margin: 0 0 8px; font-weight: 600; font-size: 14px; color: var(--color-text); } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:has(input[type="checkbox"]) td { display: flex; align-items: flex-start; gap: 9px; text-align: left; font-weight: 400; font-size: 14px; color: var(--color-text-secondary); } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:has(input[type="checkbox"]) td input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--color-primary); } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:has(input[type="checkbox"]) td label { margin: 0; line-height: 1.45; cursor: pointer; } /* Shipping methods in the summary (stacked, left-aligned) */ body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals { display: none; } body.woocommerce-checkout .woocommerce-shipping-totals th { display: block; color: var(--color-text-secondary); font-weight: 500; margin-bottom: 6px; } body.woocommerce-checkout #shipping_method { list-style: none; margin: 0; padding: 0; } body.woocommerce-checkout #shipping_method li { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font-size: 14px; } body.woocommerce-checkout #shipping_method li:last-child { margin-bottom: 0; } body.woocommerce-checkout #shipping_method input[type="radio"] { margin-top: 3px; accent-color: var(--color-primary); } body.woocommerce-checkout #shipping_method label { margin: 0; color: var(--color-text); font-weight: 500; } /* ---- Payment methods + place order ---- */ body.woocommerce-checkout #payment { background: transparent; border-radius: 0; padding: 0; margin-top: 44px; } /* "Maksutapa" heading above the payment methods (matches the form section headings). */ body.woocommerce-checkout #payment::before { content: "Maksutapa"; display: block; padding-left: 27px; margin: 0 0 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236697cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E") left center / 18px 18px no-repeat; font-family: var(--font-body); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text); line-height: 18px; } body.woocommerce-checkout #payment .payment_methods { list-style: none; margin: 0; padding: 0; border: 0; } body.woocommerce-checkout #payment li.wc_payment_method { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin: 0 0 9px; padding: 0; background: var(--color-white); position: relative; list-style: none; } body.woocommerce-checkout #payment li.wc_payment_method > input.input-radio { position: absolute; left: 15px; top: 17px; width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); } body.woocommerce-checkout #payment li.wc_payment_method > label { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 44px; margin: 0; line-height: 24px; min-height: 24px; font-size: 14px; font-weight: 600; color: var(--color-text); cursor: pointer; } body.woocommerce-checkout #payment li.wc_payment_method > label img { margin: 0 0 0 auto; max-height: 24px; width: auto; float: none; } /* Forced card-brand badges (injected for the Stripe gateway) — sit on the right. */ body.woocommerce-checkout #payment li.wc_payment_method > label .aj-pm-icons { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 24px; } body.woocommerce-checkout #payment li.wc_payment_method > label .aj-pm-img { margin: 0; height: 23px; width: auto; max-height: none; display: block; } /* PayPal logo noticeably larger than the card brands (overflows the 24px icon row without growing it, so the radio/text stay aligned). */ body.woocommerce-checkout #payment li.wc_payment_method > label .aj-pm-img[src*="paypal"] { height: 38px; } /* ---- B2B: individual / entity toggle + VAT fields ---- */ body.woocommerce-checkout .aj-hide, body.woocommerce-checkout .aj-vat-result { display: none !important; } body.woocommerce-checkout .aj-client-type { display: flex; gap: 10px; margin: 0 0 24px; } body.woocommerce-checkout .aj-ct-opt { flex: 1; display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 13px 16px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--color-text); transition: border-color 0.15s, background 0.15s; } body.woocommerce-checkout .aj-ct-opt:hover { border-color: var(--color-primary-light); } body.woocommerce-checkout .aj-ct-opt.is-on { border-color: var(--color-primary); background: var(--color-primary-pale); box-shadow: inset 0 0 0 1px var(--color-primary); } body.woocommerce-checkout .aj-ct-opt input { accent-color: var(--color-primary); width: 18px; height: 18px; margin: 0; flex: 0 0 auto; } body.woocommerce-checkout .aj-vat-check-btn { margin-top: 10px; height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.15s, color 0.15s; } body.woocommerce-checkout .aj-vat-check-btn:hover:not(.is-locked):not(:disabled) { background: var(--color-primary-dark); } /* Locked until the confirmation tickbox is checked: looks inactive but stays clickable, so the click can explain why (see vat-checkout.js). */ body.woocommerce-checkout .aj-vat-check-btn.is-locked { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; } body.woocommerce-checkout .aj-vat-check-btn:disabled { opacity: 0.6; cursor: wait; } body.woocommerce-checkout .aj-vat-status { display: block; margin-top: 9px; font-size: 13.5px; font-weight: 600; line-height: 1.4; } body.woocommerce-checkout .aj-vat-status--ok { color: var(--color-success); } body.woocommerce-checkout .aj-vat-status--err { color: var(--color-danger); } body.woocommerce-checkout .aj-vat-status--loading { color: var(--color-text-secondary); } /* Confirm-before-verify: group the "Vakuutan…" tickbox + check button + status into one panel so the gating reads as a single, deliberate step. */ body.woocommerce-checkout #billing_valid_vat_agree_field { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 4px; } body.woocommerce-checkout #billing_valid_vat_agree_field label.checkbox { display: flex; align-items: flex-start; gap: 9px; margin: 0; cursor: pointer; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--color-text); } body.woocommerce-checkout #billing_valid_vat_agree_field input[type="checkbox"] { accent-color: var(--color-primary); width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; cursor: pointer; } body.woocommerce-checkout .aj-vat-verify { margin-top: 4px; } /* Clicking the locked button nudges the customer (mini-error) and the confirm row flashes once to point at the tickbox they missed. */ body.woocommerce-checkout .aj-vat-status--nudge { color: var(--color-danger); } @keyframes aj-vat-flash { 0%, 100% { border-color: var(--color-border); background: var(--color-bg); } 20%, 65% { border-color: var(--color-danger); background: var(--color-sale-bg); } } body.woocommerce-checkout #billing_valid_vat_agree_field.aj-vat-flash { animation: aj-vat-flash 0.7s ease; } /* ============================================ THANK-YOU / ORDER RECEIVED ============================================ */ /* Order-received page: white full-width surface, no double wrapper. The page normally sits in .page-content (white card + shadow + 900px) inside .page-body; on this endpoint we flatten all that so our card owns the look. */ body.woocommerce-order-received { background: var(--color-white); } body.woocommerce-order-received .article-breadcrumbs, body.woocommerce-order-received .page-content > .page-title { display: none; } body.woocommerce-order-received .page-content { background: none; box-shadow: none; border: 0; border-radius: 0; max-width: none; margin: 0; padding: 0; } body.woocommerce-order-received .page-body { font-size: inherit; line-height: inherit; color: inherit; } /* The content-page list rule (.page-body ul/ol { padding-left: 24px; margin: 24px 0 }) outranks our .aj-ty-overview { padding: 0 } and indents the overview grid 24px — that is why the grid sat 24px right of the actions button. Override on this page only (kept global elsewhere so article/FAQ bullet lists stay indented). */ body.woocommerce-order-received .aj-ty-overview { margin: 24px 0 0; padding: 0; } body.woocommerce-order-received .aj-ty-info__list { margin: 0; padding: 0; } .aj-ty { background: var(--color-white); padding: 30px 0 56px; } .aj-ty__inner { max-width: none; } .aj-ty-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 18px; } .aj-ty-main { padding: 32px 38px 34px; margin-bottom: 16px; } .aj-ty-hero { text-align: center; margin: 0; } .aj-ty-hero__icon { display: inline-block; width: 60px; height: 60px; margin-bottom: 14px; } .aj-ty-hero__icon svg { width: 100%; height: 100%; display: block; } .aj-ty-hero__title { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--color-text); margin: 0 0 8px; line-height: 1.1; } .aj-ty-hero__sub { font-size: 15.5px; color: var(--color-text-secondary); margin: 0; } .aj-ty-pillrow { text-align: center; margin: 16px 0 4px; } .aj-ty-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-secondary); font-weight: 500; font-size: 13.5px; border-radius: var(--radius-sm); padding: 7px 15px; } .aj-ty-pill__ico { width: 15px; height: 15px; color: var(--color-text-muted); flex: 0 0 auto; } .aj-ty-pill strong { color: var(--color-text); font-weight: 700; } .aj-ty-pill__sep { color: var(--color-border); } .aj-ty-pill__date { color: var(--color-text-secondary); } /* Order overview — two-column key/value grid */ .aj-ty-overview { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 30px; } .aj-ty-ov { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-bottom: 1px solid var(--color-border-light); } .aj-ty-ov__k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); } .aj-ty-ov__v { font-size: 15px; color: var(--color-text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 24px; } .aj-ty-ov__total { font-weight: 700; color: var(--color-primary-dark); } .aj-ty-copy { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text-secondary); border-radius: var(--radius-sm); padding: 3px 9px; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s; font-family: var(--font-body); } .aj-ty-copy svg { width: 13px; height: 13px; } .aj-ty-copy:hover { border-color: var(--color-primary); color: var(--color-primary); } .aj-ty-copy.is-copied { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-bg); } .aj-ty-note { border-radius: var(--radius-md); padding: 14px 18px; margin: 18px 0 0; font-size: 14px; line-height: 1.55; } .aj-ty-note--info { background: var(--color-primary-pale); border: 1px solid var(--color-primary-light); color: var(--color-text); } .aj-ty-note p { margin: 0; } .aj-ty-block { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--color-border-light); } .aj-ty-sec { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--color-text); margin: 0 0 13px; } .aj-ty-sec::after { content: ""; display: block; width: 34px; height: 3px; background: var(--color-primary); border-radius: 2px; margin-top: 7px; } .aj-ty-info__list { margin: 0; padding: 0; list-style: none; } .aj-ty-info__list li { position: relative; padding: 0 0 12px 26px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); } .aj-ty-info__list li:last-child { padding-bottom: 0; } .aj-ty-info__list li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); } .aj-ty-info__list strong { color: var(--color-text); } .aj-ty-info__list a { color: var(--color-primary); font-weight: 600; } .aj-ty-pickup__grid { display: grid; grid-template-columns: 1fr 1fr; background: var(--color-primary-pale); border-radius: var(--radius-md); overflow: hidden; } .aj-ty-pickup__grid > p { margin: 0; padding: 15px 18px; font-size: 14px; line-height: 1.6; color: var(--color-text); } .aj-ty-pickup__grid > p + p { border-left: 1px solid #d9e6f5; } .aj-ty-pickup__lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primary-dark); margin-bottom: 5px; } .aj-ty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; margin: 22px 0 0; } /* the PDF-invoice shortcode wraps its link in a

with default margins, which knocks the button out of the card's left edge / vertical rhythm — flatten it so the becomes a direct flex child aligned with the grid above. */ .aj-ty-actions p { display: contents; margin: 0; } .aj-ty-btn, .aj-ty-actions a { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 26px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff !important; font-weight: 600; font-size: 14.5px; text-decoration: none; border: 1px solid var(--color-primary); cursor: pointer; transition: background .15s, border-color .15s; } .aj-ty-btn:hover, .aj-ty-actions a:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff !important; } .aj-ty-btn--ghost { background: var(--color-white); color: var(--color-primary) !important; border-color: var(--color-border); } .aj-ty-btn--ghost:hover { background: var(--color-primary-pale); color: var(--color-primary-dark) !important; border-color: var(--color-primary); } /* WooCommerce order items table + customer details */ .aj-ty-details { margin-top: 4px; } .aj-ty-details .woocommerce-order-details__title, .aj-ty-details .woocommerce-column__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--color-text); margin: 26px 0 14px; } .aj-ty-details table.order_details, .aj-ty-details table.woocommerce-table--order-details { width: 100%; border-collapse: collapse; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .aj-ty-details table.order_details th, .aj-ty-details table.order_details td { padding: 12px 16px; border-bottom: 1px solid var(--color-border-light); font-size: 14px; text-align: left; } .aj-ty-details table.order_details tfoot th, .aj-ty-details table.order_details tfoot td { font-weight: 600; } .aj-ty-details table.order_details a { color: var(--color-primary); text-decoration: none; } .aj-ty-details .woocommerce-customer-details { margin-top: 26px; } .aj-ty-details .woocommerce-customer-details address { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 18px; font-style: normal; font-size: 14px; line-height: 1.65; color: var(--color-text); background: var(--color-white); } .aj-ty-sign { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: center; padding: 22px 28px; } .aj-ty-sign__bar { display: block; width: 34px; height: 3px; background: var(--color-primary); border-radius: 2px; margin: 0 auto 12px; } .aj-ty-sign p { margin: 0; font-size: 14px; line-height: 1.6; color: #334155; } .aj-ty-sign a { color: var(--color-primary-dark); font-weight: 600; text-decoration: none; } .aj-ty-sign__team { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--color-primary-dark); margin-top: 6px !important; } @media (max-width: 600px) { .aj-ty-overview { grid-template-columns: 1fr; } .aj-ty-pickup__grid { grid-template-columns: 1fr; } .aj-ty-pickup__grid > p + p { border-left: 0; border-top: 1px solid #d9e6f5; } .aj-ty-hero__title { font-size: 26px; } .aj-ty-card { padding: 18px 18px; } .aj-ty-main { padding: 24px 20px 26px; } } /* ============================================ PRODUCT DESCRIPTION — real per-product SEO copy (ACF product-facts-1..5) as a formatted article: headings + text ============================================ */ .prod-desc { background: var(--color-white); border-top: 1px solid var(--color-border); padding: 42px 0; } .prod-desc__inner { max-width: 880px; margin: 0 auto; padding: 0 24px; } .prod-desc__title { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--color-text); line-height: 1.15; margin: 0 0 6px; } .prod-desc h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--color-text); line-height: 1.3; margin: 26px 0 10px; } .prod-desc p { font-size: 15.5px; line-height: 1.75; color: var(--color-text-secondary); margin: 0 0 14px; } .prod-desc ul { margin: 0 0 14px; padding-left: 22px; } .prod-desc li { font-size: 15.5px; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 6px; } .prod-desc strong { color: var(--color-text); font-weight: 600; } .prod-desc a { color: var(--color-primary); font-weight: 600; text-decoration: none; } .prod-desc a:hover { text-decoration: underline; } body.woocommerce-checkout #payment li.wc_payment_method:has(input.input-radio:checked) { border-color: var(--color-primary); background: var(--color-primary-pale); box-shadow: inset 0 0 0 1px var(--color-primary); } body.woocommerce-checkout #payment .payment_box { background: var(--color-bg); border-radius: var(--radius-sm); margin: 0 16px 14px 44px; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); } body.woocommerce-checkout #payment .payment_box::before { display: none; } body.woocommerce-checkout #payment .payment_box p:last-child { margin-bottom: 0; } /* Form-based gateways (Stripe card element, PayPal card fields) need a clean, full-width box — the pale background + deep indent meant for short text descriptions squashes and offsets the card form ("crooked"). */ body.woocommerce-checkout #payment .payment_box.payment_method_stripe, body.woocommerce-checkout #payment .payment_box.payment_method_ppcp-gateway, body.woocommerce-checkout #payment .payment_box.payment_method_ppcp-trustly { background: transparent; margin: 6px 0 14px; padding: 4px 16px 12px; } body.woocommerce-checkout #payment .payment_box.payment_method_stripe fieldset, body.woocommerce-checkout #payment .payment_box.payment_method_stripe .wc-stripe-upe-element { width: 100%; margin: 0; padding: 0; border: 0; } body.woocommerce-checkout #payment .payment_box .wc-stripe-statement-descriptor, body.woocommerce-checkout #payment .payment_box.payment_method_stripe p { margin: 0 0 10px; } /* Terms + place-order */ body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin: 4px 0 14px; font-size: 13px; color: var(--color-text-secondary); } body.woocommerce-checkout .woocommerce-privacy-policy-text, body.woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: 15px; line-height: 1.55; margin: 0; } body.woocommerce-checkout #payment .payment_methods li.wc_payment_method:last-child { margin-bottom: 0; } body.woocommerce-checkout #payment .place-order { padding: 0; margin: 16px 0 0; } body.woocommerce-checkout #place_order { width: 100% !important; height: 56px; float: none; border: 0; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; font-family: var(--font-body); font-size: 17px; font-weight: 700; cursor: pointer; transition: background 0.15s; box-shadow: none; } body.woocommerce-checkout #place_order:hover { background: var(--color-primary-dark); } /* Loading overlay WC adds to #order_review while updating */ body.woocommerce-checkout .processing #order_review, body.woocommerce-checkout #order_review.processing { opacity: 0.6; } /* ---- Tablet / mobile ---- */ @media (max-width: 900px) { body.woocommerce-checkout form.aj-checkout { grid-template-columns: 1fr; gap: 24px; } body.woocommerce-checkout form.aj-checkout > #customer_details, body.woocommerce-checkout form.aj-checkout > .aj-checkout__aside { grid-column: 1; grid-row: auto; } } @media (max-width: 600px) { body.woocommerce-checkout .page-content { padding: 24px 14px 32px; } body.woocommerce-checkout .page-title { font-size: 26px; margin-bottom: 18px; } body.woocommerce-checkout #customer_details, body.woocommerce-checkout .aj-checkout__aside { padding: 20px 16px; } body.woocommerce-checkout .form-row.form-row-first, body.woocommerce-checkout .form-row.form-row-last { flex: 1 1 100%; } } /* ========================================================= CART DRAWER — слайд-корзина (замена CartPops) Дизайн повторяет прежний дровер: белый минимал, ✕ у товаров, степперы снизу, «Lähetyksen tiedot» с коралловым прогрессом. ========================================================= */ html.aj-drawer-lock { overflow: hidden; } /* overflow:hidden — съехавшая вправо (translateX) закрытая панель иначе расширяет scrollable-область и даёт горизонтальный скролл страницы */ .aj-drawer { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; } .aj-drawer__overlay { position: absolute; inset: 0; background: rgba(30, 41, 59, 0.45); opacity: 0; transition: opacity .25s ease; } .aj-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 500px; max-width: 100vw; background: var(--color-white); display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(15, 23, 42, 0.18); transform: translateX(105%); transition: transform .3s cubic-bezier(.22,.7,.3,1); } .aj-drawer.is-open { pointer-events: auto; } .aj-drawer.is-open .aj-drawer__overlay { opacity: 1; } .aj-drawer.is-open .aj-drawer__panel { transform: translateX(0); } .aj-drawer.is-busy .aj-drawer__inner { opacity: .55; pointer-events: none; } .aj-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 6px 22px; /* compact bar on desktop (~40px tall) */ background: var(--color-primary); flex: none; } .aj-drawer__head h2 { font-family: var(--font-heading, 'Playfair Display', serif); font-size: 18px; font-weight: 600; color: #fff; margin: 0; } .aj-drawer__close { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; } .aj-drawer__close svg { width: 20px; height: 20px; } .aj-drawer__close:hover { color: rgba(255, 255, 255, .7); } .aj-drawer__inner { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0 24px 22px; transition: opacity .15s ease; } /* --- товары: скроллится только список, низ дровера закреплён --- */ .ajd-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: -10px; padding-right: 10px; /* желоб под скроллбар */ scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .ajd-items::-webkit-scrollbar { width: 6px; } .ajd-items::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 99px; } .ajd-items::-webkit-scrollbar-track { background: transparent; } .ajd-item { padding: 16px 0 14px; border-bottom: 1px solid var(--color-border-light); } .ajd-item.is-removing { opacity: .4; } .ajd-item__top { display: flex; gap: 14px; } .ajd-item__thumb { width: 58px; flex: none; display: block; } .ajd-item__thumb img { width: 100%; height: auto; display: block; } .ajd-item__main { flex: 1; min-width: 0; position: relative; padding-right: 34px; } .ajd-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--color-text); text-decoration: none; padding-top: 2px; } .ajd-item__title:hover { color: var(--color-primary); } .ajd-item__remove { position: absolute; top: 0; right: 0; width: 28px; height: 28px; border: 0; background: none; cursor: pointer; color: var(--color-text); display: flex; align-items: center; justify-content: center; padding: 0; } .ajd-item__remove svg { width: 15px; height: 15px; } .ajd-item__remove:hover { color: var(--color-danger); } /* нижняя строка товара: степпер слева, цена справа (заголовок сверху свободно переносится — цена от него не зависит и не сливается) */ .ajd-item__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } .ajd-item__price { text-align: right; font-size: 16.5px; font-weight: 700; color: var(--color-primary-dark); white-space: nowrap; flex: none; } .ajd-item__price .woocommerce-Price-amount { font-weight: 700; color: inherit; } .ajd-item__qty { display: inline-flex; align-items: stretch; flex: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } .ajd-qty__btn { width: 46px; height: 42px; border: 0; background: var(--color-border-light); color: var(--color-text); font-size: 19px; font-weight: 500; cursor: pointer; font-family: inherit; line-height: 1; } .ajd-qty__btn:hover { background: var(--color-primary-pale); color: var(--color-primary-dark); } .ajd-qty__val { width: 56px; height: 42px; text-align: center; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--color-text); background: var(--color-white); border: 0; padding: 0; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); -moz-appearance: textfield; appearance: textfield; border-radius: 0; } .ajd-qty__val::-webkit-outer-spin-button, .ajd-qty__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ajd-qty__val:focus { outline: none; box-shadow: inset 0 0 0 2px var(--color-primary-light); } /* --- Lähetyksen tiedot (закреплён под списком) --- */ .ajd-ship { flex: none; padding: 20px 0 6px; text-align: center; border-top: 1px solid var(--color-border-light); } /* Метрики 1:1 из старого виджета (inline CSS в footer.php Shoptimizer-child) */ .ajd-ship__title { font-family: var(--font-body, 'Montserrat', sans-serif); font-size: 21px; font-weight: 500; line-height: 24px; color: var(--color-text); margin: 0 0 20px; } .ajd-ship__stats { display: flex; justify-content: space-between; align-items: center; } .ajd-ship__stat { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; line-height: 21px; font-weight: 500; color: var(--color-text); } .ajd-ship__stat b { font-weight: 500; } .ajd-ship__stat svg { width: 18px; height: 18px; flex: none; } .ajd-ship__bar { position: relative; margin: 11px 0 9px; height: 29px; border-radius: 5px; box-sizing: border-box; background: #dae4ef; border: 1px solid #dae4ef; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 21px; font-weight: 500; color: #4f4f4f; } .ajd-ship__bar-text { position: relative; z-index: 2; } .ajd-ship__bar-fill { position: absolute; top: 1px; left: 1px; height: 25px; max-width: calc(100% - 2px); background: #e88368; border-radius: 5px; transition: width .35s ease; } .ajd-ship__left { font-size: 18px; line-height: 21px; font-weight: 500; color: var(--color-text); margin-top: 0; padding-bottom: 4px; } .ajd-ship__left b { font-weight: 500; } .ajd-ship__terms { display: inline-block; margin-top: 10px; height: 30px; line-height: 28px; padding: 0 40px; background: #efe0c0; border: 1px solid #efe0c0; border-radius: 3px; color: var(--color-text); font-size: 15px; font-weight: 500; text-decoration: none; } .ajd-ship__terms:hover { background: #e9d5a8; } /* --- итог + CTA (закреплены внизу) --- */ .ajd-total { flex: none; display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--color-border); margin-top: 16px; padding: 14px 0 4px; font-size: 14px; color: var(--color-text); } .ajd-total b { font-size: 16px; font-weight: 700; } .ajd-checkout { display: flex; align-items: center; justify-content: center; height: 54px; margin-top: 12px; background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: var(--radius-md); transition: background .15s ease; flex: none; } .ajd-checkout:hover { background: var(--color-primary-dark); color: #fff; } /* --- пустая корзина --- */ .ajd-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 10px; color: var(--color-text-secondary); } .ajd-empty svg { width: 44px; height: 44px; color: var(--color-text-muted); margin-bottom: 14px; } .ajd-empty p { font-size: 15px; margin: 0 0 14px; } .ajd-empty a { color: var(--color-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--color-primary-light); } /* CartPops выключен под этой темой — прячем его остатки на всякий случай */ #cartpops-drawer, #cpops-floating-cart, #cartpops-bar, .cpops-drawer-overlay { display: none !important; } @media (max-width: 560px) { /* Панель не шире 80% — слева остаётся полоса оверлея для тапа-закрытия */ .aj-drawer__panel { width: 80%; max-width: 80%; } /* Верхняя панель — минимальная высота */ .aj-drawer__head { padding: 8px 6px 8px 12px; } .aj-drawer__head h2 { font-size: 17px; } .aj-drawer__close { width: 34px; height: 34px; } .aj-drawer__close svg { width: 22px; height: 22px; } /* Боковые паддинги — по минимуму */ .aj-drawer__inner { padding: 0 10px 12px; } /* Товар: картинка минимальная, без фона и паддинга; отступы плотнее */ .ajd-item { padding: 11px 0 10px; } .ajd-item__top { gap: 9px; } .ajd-item__thumb { width: 44px; background: none !important; padding: 0 !important; border: 0; } .ajd-item__thumb img { background: none !important; padding: 0 !important; } .ajd-item__main { padding-right: 26px; } .ajd-item__title { font-size: 13.5px; } .ajd-item__remove { width: 24px; height: 24px; } .ajd-item__bottom { margin-top: 8px; gap: 8px; } .ajd-item__price { font-size: 15px; } /* Калькулятор доставки — минимальные вертикальные отступы */ .ajd-ship { padding: 12px 0 4px; } .ajd-ship__title { font-size: 17px; line-height: 20px; margin: 0 0 10px; } .ajd-ship__stat { font-size: 14px; line-height: 18px; } .ajd-ship__bar { height: 24px; margin: 7px 0 6px; font-size: 14px; } .ajd-ship__bar-fill { height: 20px; } .ajd-ship__left { font-size: 14px; line-height: 18px; padding-bottom: 2px; } .ajd-ship__terms { margin-top: 7px; height: 28px; line-height: 26px; font-size: 14px; padding: 0 26px; } /* Итог + CTA — плотнее (кнопка остаётся крупной для тапа) */ .ajd-total { margin-top: 10px; padding: 9px 0 2px; } .ajd-checkout { margin-top: 8px; } } /* ========================================================= WAITLIST — «Ilmoita kun tuote on saatavilla» (OOS PDP) ========================================================= */ .aj-waitlist { margin-top: 14px; margin-bottom: 16px; background: var(--color-primary-pale); border: 1px solid #d9e6f5; border-radius: var(--radius-lg); padding: 16px 16px 14px; position: relative; } .aj-waitlist__intro { display: block; font-size: 14px; font-weight: 600; color: var(--color-text); line-height: 1.45; margin-bottom: 12px; } .aj-waitlist__intro svg { display: block; width: 22px; height: 22px; color: var(--color-primary-dark); margin-bottom: 8px; } /* Узкая purchase-card → поле и кнопка друг под другом на всю ширину */ .aj-waitlist__row { display: flex; flex-direction: column; gap: 8px; } .aj-waitlist__email { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14px; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; background: #fff; } .aj-waitlist__email:focus { outline: none; border-color: var(--color-primary-light); } .aj-waitlist__btn { width: 100%; border: 0; cursor: pointer; background: var(--color-primary); color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 700; padding: 13px 16px; border-radius: var(--radius-md); transition: background .15s ease; } .aj-waitlist__btn:hover { background: var(--color-primary-dark); } .aj-waitlist__btn.is-loading { opacity: .7; pointer-events: none; } .aj-waitlist__consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--color-text-secondary); line-height: 1.5; margin-top: 10px; cursor: pointer; } .aj-waitlist__consent input { margin: 2px 0 0; flex: none; } .aj-waitlist__msg { margin-top: 10px; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm); padding: 9px 12px; } .aj-waitlist__msg.is-ok { background: var(--color-success-bg); color: #067a5b; } .aj-waitlist__msg.is-err { background: var(--color-sale-bg); color: var(--color-sale); } .aj-waitlist.is-done .aj-waitlist__row, .aj-waitlist.is-done .aj-waitlist__consent { display: none; } /* ========================================================= MY ACCOUNT (Oma tili) — логин/регистрация + личный кабинет ========================================================= */ /* Логин/регистрация (гость) — умеренная ширина; кабинет — на всю ширину */ body.woocommerce-account:not(.logged-in) .page-content { max-width: 1080px; } body.woocommerce-account.logged-in .page-content { max-width: none; width: 100%; } /* --- Логин / регистрация (гость) --- */ .woocommerce-account:not(.logged-in) .u-columns.col2-set::before, .woocommerce-account:not(.logged-in) .u-columns.col2-set::after { content: none; } .woocommerce-account:not(.logged-in) .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .woocommerce-account:not(.logged-in) .u-columns .col-1, .woocommerce-account:not(.logged-in) .u-columns .col-2 { width: auto; max-width: none; float: none; } .woocommerce-account:not(.logged-in) .u-column1 h2, .woocommerce-account:not(.logged-in) .u-column2 h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 600; margin: 0 0 14px; } .woocommerce-account .page-body form.login, .woocommerce-account .page-body form.register, .woocommerce-ResetPassword { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 26px 24px; margin: 0; } .woocommerce-account .page-body form .form-row { margin: 0 0 16px; padding: 0; } .woocommerce-account .page-body form label { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; } .woocommerce-account .page-body form label .required { color: var(--color-sale); } .woocommerce-account .page-body form .woocommerce-Input, .woocommerce-account .page-body form input[type=text], .woocommerce-account .page-body form input[type=email], .woocommerce-account .page-body form input[type=password], .woocommerce-account .page-body form input[type=tel] { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14px; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; background: #fff; transition: border-color .15s; } .woocommerce-account .page-body form input:focus { outline: none; border-color: var(--color-primary-light); } .woocommerce-account .page-body form .show-password-input { top: 10px; } .woocommerce-account .page-body form button.woocommerce-button, .woocommerce-account .page-body form button[type=submit], .woocommerce-ResetPassword button[type=submit] { display: block; width: 100%; background: var(--color-primary); color: #fff; border: 0; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 700; padding: 14px 20px; transition: background .15s ease; } .woocommerce-account .page-body form button.woocommerce-button:hover, .woocommerce-account .page-body form button[type=submit]:hover { background: var(--color-primary-dark); } .woocommerce-account .page-body form .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 14px; } .woocommerce-account .page-body form .woocommerce-form-login__rememberme input { width: auto; } .woocommerce-account .woocommerce-LostPassword { margin: 14px 0 0; font-size: 13.5px; } .woocommerce-account .woocommerce-LostPassword a { color: var(--color-primary-dark); font-weight: 600; text-decoration: none; } .woocommerce-account .woocommerce-LostPassword a:hover { text-decoration: underline; } .woocommerce-account .page-body form.register p:not(.form-row) { font-size: 13px; color: var(--color-text-secondary); line-height: 1.6; } .woocommerce-account .page-body form.register p a { color: var(--color-primary-dark); } .woocommerce-privacy-policy-text p { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.6; } /* --- Кабинет (залогинен): сетка навигация + контент --- */ .woocommerce-account.logged-in .page-body > .woocommerce { display: grid; grid-template-columns: 250px 1fr; gap: 30px; align-items: start; } .woocommerce-MyAccount-navigation { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; } .woocommerce-MyAccount-navigation li { margin: 0; } .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; transition: color .15s; } /* hover — только цвет текста, без фона (иначе рядом с активным сливается) */ .woocommerce-MyAccount-navigation li a:hover { color: var(--color-primary-dark); } /* мышиный клик не рисует focus-рамку (клавиатурный таб — рисует) */ .woocommerce-MyAccount-navigation li a:focus:not(:focus-visible) { outline: none; } .woocommerce-MyAccount-navigation li.is-active a { background: var(--color-primary-pale); color: var(--color-primary-dark); box-shadow: inset 3px 0 0 var(--color-primary); } .woocommerce-MyAccount-navigation li.is-active a:hover { color: var(--color-primary-dark); } .woocommerce-MyAccount-navigation li a::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--acc-ico) no-repeat center / contain; mask: var(--acc-ico) no-repeat center / contain; } .woocommerce-MyAccount-navigation-link--dashboard a { --acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 12l9-8 9 8M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--orders a { --acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5zM3 8l9 5m0 0l9-5m-9 5v9'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--downloads a { --acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M4 21h16'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--edit-address a { --acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Ccircle cx='12' cy='11' r='3'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--payment-methods a { --acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--cgkit-wishlist a { --acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--edit-account a { --acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--customer-logout a { --acc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17 16l4-4m0 0l-4-4m4 4H7m3 8H5a2 2 0 01-2-2V6a2 2 0 012-2h5'/%3E%3C/svg%3E"); } .woocommerce-MyAccount-navigation-link--customer-logout { border-top: 1px solid var(--color-border-light); margin-top: 6px; padding-top: 6px; } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--color-danger); } .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: var(--color-sale-bg); color: var(--color-sale); } .woocommerce-MyAccount-content { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 28px; font-size: 14px; line-height: 1.65; color: var(--color-text); min-width: 0; } .woocommerce-MyAccount-content > h2, .woocommerce-MyAccount-content h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 600; margin: 0 0 16px; } .woocommerce-MyAccount-content p { margin: 0 0 14px; } .woocommerce-MyAccount-content a { color: var(--color-primary-dark); } /* Таблица заказов */ .woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; font-size: 13.5px; } .woocommerce-MyAccount-content table.shop_table th { background: var(--color-primary-pale); color: var(--color-primary-dark); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 11px 12px; text-align: left; } .woocommerce-MyAccount-content table.shop_table td { padding: 12px; border-top: 1px solid var(--color-border-light); vertical-align: middle; } .woocommerce-MyAccount-content table.shop_table .woocommerce-button { display: inline-block; background: var(--color-primary); color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; padding: 8px 14px; border-radius: var(--radius-sm); margin: 2px 4px 2px 0; border: 0; cursor: pointer; } .woocommerce-MyAccount-content table.shop_table .woocommerce-button:hover { background: var(--color-primary-dark); } /* Адреса */ .woocommerce-MyAccount-content .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .woocommerce-MyAccount-content .woocommerce-Address { width: auto; max-width: none; float: none; } .woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; } .woocommerce-MyAccount-content .woocommerce-Address address { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px; font-style: normal; line-height: 1.7; } .woocommerce-MyAccount-content .edit { font-size: 13px; font-weight: 600; } /* Формы кабинета (адрес, данные аккаунта) */ .woocommerce-MyAccount-content form .form-row { margin: 0 0 16px; } .woocommerce-MyAccount-content form .form-row-first, .woocommerce-MyAccount-content form .form-row-last { width: 48%; float: none; display: inline-block; vertical-align: top; } .woocommerce-MyAccount-content form .form-row-first { margin-right: 3%; } .woocommerce-MyAccount-content fieldset { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 16px 18px; margin: 20px 0; } .woocommerce-MyAccount-content fieldset legend { font-weight: 700; font-size: 14px; padding: 0 8px; } .woocommerce-MyAccount-content form button[type=submit] { width: auto; padding: 13px 30px; } /* Сообщения WC в кабинете */ .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error { background: var(--color-primary-pale); border: 0; border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 13px 16px; margin: 0 0 18px; font-size: 13.5px; color: var(--color-text); list-style: none; } .woocommerce-account .woocommerce-error { background: var(--color-sale-bg); border-left-color: var(--color-sale); } .woocommerce-account .woocommerce-message a.button, .woocommerce-account .woocommerce-info a.button { float: right; background: var(--color-primary); color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: var(--radius-sm); margin-left: 12px; } @media (max-width: 860px) { .woocommerce-account:not(.logged-in) .u-columns.col2-set::before, .woocommerce-account:not(.logged-in) .u-columns.col2-set::after { content: none; } .woocommerce-account:not(.logged-in) .u-columns.col2-set { grid-template-columns: 1fr; } .woocommerce-account.logged-in .page-body > .woocommerce { grid-template-columns: 1fr; } .woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: 1fr; } .woocommerce-MyAccount-content form .form-row-first, .woocommerce-MyAccount-content form .form-row-last { width: 100%; margin-right: 0; display: block; } } /* Order status/number/date highlights — заменяем дефолтный жёлтый */ .woocommerce-account mark, .woocommerce-MyAccount-content mark { background: var(--color-primary-pale); color: var(--color-primary-dark); font-weight: 700; padding: 1px 8px; border-radius: var(--radius-sm); } .woocommerce-MyAccount-content mark.order-status { background: var(--color-success-bg); color: #067a5b; } /* Кнопки сохранения в кабинете — компактные, не на всю ширину */ .woocommerce-account .page-body .woocommerce-MyAccount-content form button[type=submit], .woocommerce-account .page-body .woocommerce-MyAccount-content form button.woocommerce-Button { display: inline-block; width: auto; padding: 13px 34px; } /* --- My Account: нейтрализуем дефолтные WooCommerce float'ы, чтобы grid (навигация | контент) не разваливался на страницах плагинов (Cashback) --- */ .woocommerce-account.logged-in .page-body > .woocommerce > .woocommerce-MyAccount-navigation, .woocommerce-account.logged-in .page-body > .woocommerce > .woocommerce-MyAccount-content { float: none !important; width: auto !important; margin: 0 !important; } /* --- Cashback endpoint (/my-account/cbk-cashback/) --- */ /* Первая таблица (сводка баланса) без класса shop_table — оформляем как её */ .woocommerce-MyAccount-content > table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; font-size: 13.5px; margin: 0 0 22px; } .woocommerce-MyAccount-content > table th, .woocommerce-MyAccount-content > table td { padding: 12px 14px; text-align: left; border-top: 1px solid var(--color-border-light); } .woocommerce-MyAccount-content > table tr:first-child th, .woocommerce-MyAccount-content > table tr:first-child td { border-top: 0; } .woocommerce-MyAccount-content > table th { font-weight: 700; color: var(--color-text); background: var(--color-bg); width: 45%; } /* Показ «N per page» селектор */ .cbk_pagination_size { margin: 0 0 16px; } .cbk_pagination_size form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cbk_pagination_size label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin: 0; } .cbk_pagination_size input[type=number] { width: 80px; font-family: var(--font-body); font-size: 13.5px; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 9px 12px; background: #fff; } .cbk_pagination_size input[type=number]:focus { outline: none; border-color: var(--color-primary-light); } .cbk_pagination_size input[type=submit] { border: 0; cursor: pointer; background: var(--color-primary); color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: var(--radius-md); transition: background .15s; } .cbk_pagination_size input[type=submit]:hover { background: var(--color-primary-dark); } /* Статус-метки (credit/debit) как бейджи вместо голого */ .cbk_cashback_table .cbk_status_label { display: inline-block; background: none; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; } .cbk_cashback_table .cbk_credit_status { background: var(--color-success-bg); color: #067a5b; } .cbk_cashback_table .cbk_debit_status { background: var(--color-sale-bg); color: var(--color-sale); } /* Пагинация таблицы кэшбэка */ .cbk_cashback_table + .cbk_pagination, .woocommerce-MyAccount-content .cbk_pagination { margin-top: 16px; } .woocommerce-MyAccount-content .cbk_pagination a, .woocommerce-MyAccount-content .cbk_pagination span { display: inline-block; min-width: 34px; text-align: center; padding: 7px 10px; margin: 0 3px 3px 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; } .woocommerce-MyAccount-content .cbk_pagination a:hover { border-color: var(--color-primary-light); color: var(--color-primary-dark); } .woocommerce-MyAccount-content .cbk_pagination .current, .woocommerce-MyAccount-content .cbk_pagination span.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* Скрытый lightbox-попап плагина не должен занимать место в потоке */ .cbk-popup-cashback-lightcase { display: none; } /* Clearfix ::before/::after у .woocommerce становятся лишними grid-ячейками и ломают раскладку кабинета (nav уезжает в широкую колонку, контент — вниз). Тот же баг, что на форме логина (.col2-set). */ .woocommerce-account.logged-in .page-body > .woocommerce::before, .woocommerce-account.logged-in .page-body > .woocommerce::after { content: none; } /* Бейджи статусов кэшбэка — перебиваем дефолтный плагина */ .cbk_cashback_table .cbk_credit_status { background: var(--color-success-bg) !important; color: #067a5b !important; } .cbk_cashback_table .cbk_debit_status { background: var(--color-sale-bg) !important; color: var(--color-sale) !important; } /* ========================================================= MY ACCOUNT — вид пунктов навигации (колонка слева остаётся). Без подчёркиваний у пунктов, без фона/полосы у активного и hover. ========================================================= */ /* убрать дефолтные WooCommerce подчёркивания у пунктов */ .woocommerce-MyAccount-navigation li, .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { border: 0 !important; margin: 0; padding: 0; } .woocommerce-MyAccount-navigation li a { border-radius: var(--radius-md); } /* активный — только цвет текста, без фона, без полосы, без подчёркивания */ .woocommerce-MyAccount-navigation li.is-active a { background: none; box-shadow: none; border: 0; text-decoration: none; color: var(--color-primary-dark); font-weight: 700; } /* hover — только цвет текста */ .woocommerce-MyAccount-navigation li a:hover { background: none; text-decoration: none; color: var(--color-primary-dark); } /* logout остаётся красным, но без отделителя-бордера */ .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--color-danger); } .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: none; color: var(--color-sale); } /* ========================================================= COOKIE CONSENT — evästesuostumus (порт cookie-law-info) ========================================================= */ html.aj-cc-lock { overflow: hidden; } .aj-cc { position: relative; z-index: 9500; } /* --- Баннер (снизу справа) --- */ .aj-cc__banner { position: fixed; right: 20px; bottom: 20px; z-index: 9500; width: 420px; max-width: calc(100vw - 32px); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18); padding: 20px 20px 16px; } .aj-cc__banner-body { display: flex; gap: 12px; } .aj-cc__cookie { width: 30px; height: 30px; flex: none; color: var(--color-primary); margin-top: 2px; } .aj-cc__msg { margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); } .aj-cc__link { color: var(--color-primary-dark); font-weight: 600; text-decoration: none; white-space: nowrap; } .aj-cc__link:hover { text-decoration: underline; } .aj-cc__actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .aj-cc__btn { flex: 1 1 auto; min-width: 92px; font-family: var(--font-body); font-size: 13px; font-weight: 700; cursor: pointer; padding: 11px 14px; border-radius: var(--radius-md); border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; } .aj-cc__btn--accept { background: var(--color-primary); color: #fff; } .aj-cc__btn--accept:hover { background: var(--color-primary-dark); } .aj-cc__btn--reject { background: var(--color-white); color: var(--color-text); border-color: var(--color-border); } .aj-cc__btn--reject:hover { border-color: var(--color-primary-light); color: var(--color-primary-dark); } .aj-cc__btn--ghost { background: none; color: var(--color-text-secondary); border-color: var(--color-border); flex: 1 1 100%; } .aj-cc__btn--ghost:hover { color: var(--color-primary-dark); border-color: var(--color-primary-light); } /* Stripe's express-checkout "— OR —" divider: we don't render the express buttons above it, so the separator hangs alone in the middle of the page. */ .wc-stripe-express-checkout-button-separator, #wc-stripe-express-checkout-button-separator { display: none !important; } /* --- Настройки: компактная панель сбоку, а не большая модалка по центру --- */ /* [hidden] must win: a class rule with `display` beats the UA stylesheet's [hidden]{display:none}, so the panel used to stay on screen while marked hidden — and with the JS init broken there was no way to close it. */ .aj-cc[hidden], .aj-cc__modal[hidden], .aj-cc__reopen[hidden] { display: none !important; } .aj-cc__modal { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: flex-end; justify-content: flex-end; } .aj-cc__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.35); } .aj-cc__dialog { position: relative; width: 380px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 24px)); margin: 12px; display: flex; flex-direction: column; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28); } @media (max-width: 560px) { .aj-cc__modal { align-items: flex-end; justify-content: center; } .aj-cc__dialog { width: auto; margin: 8px; max-height: calc(100vh - 16px); } } .aj-cc__dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--color-border); } .aj-cc__dialog-head h2 { margin: 0; font-family: var(--font-heading, 'Playfair Display', serif); font-size: 21px; font-weight: 600; color: var(--color-text); } .aj-cc__close { width: 34px; height: 34px; border: 0; background: none; cursor: pointer; color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; } .aj-cc__close svg { width: 22px; height: 22px; } .aj-cc__close:hover { color: var(--color-danger); } .aj-cc__dialog-body { padding: 20px 24px; overflow-y: auto; } .aj-cc__intro { margin: 0 0 18px; font-size: 13.5px; line-height: 1.65; color: var(--color-text-secondary); } .aj-cc__cat { padding: 14px 0; border-top: 1px solid var(--color-border-light); } .aj-cc__cat:first-of-type { border-top: 0; } .aj-cc__cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .aj-cc__cat-title { font-size: 15px; font-weight: 700; color: var(--color-text); } .aj-cc__always { font-size: 12.5px; font-weight: 700; color: var(--color-success); } .aj-cc__cat-desc { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--color-text-secondary); } /* Тумблер */ .aj-cc__toggle { position: relative; flex: none; cursor: pointer; display: inline-flex; } .aj-cc__toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .aj-cc__toggle-track { width: 44px; height: 24px; border-radius: 99px; background: var(--color-border); display: block; transition: background .18s ease; } .aj-cc__toggle-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s ease; } .aj-cc__toggle input:checked + .aj-cc__toggle-track { background: var(--color-primary); } .aj-cc__toggle input:checked + .aj-cc__toggle-track .aj-cc__toggle-knob { transform: translateX(20px); } .aj-cc__toggle input:focus-visible + .aj-cc__toggle-track { box-shadow: 0 0 0 3px var(--color-primary-light); } .aj-cc__dialog-foot { display: flex; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--color-border); background: var(--color-bg); } .aj-cc__dialog-foot .aj-cc__btn { flex: 1 1 0; } /* --- Плавающая «Evästeasetukset» --- */ /* The floating "cookie settings" pill is gone — it sat over every page for everyone who had already decided. Consent is still withdrawable from the "Evästeasetukset" link in the footer bottom bar. */ .aj-cc__reopen { display: none !important; } .footer-cc-link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: inherit; color: inherit; text-decoration: none; } .footer-cc-link:hover { color: var(--color-primary); text-decoration: underline; } .aj-cc__reopen--legacy { position: fixed; left: 18px; bottom: 18px; z-index: 9400; display: inline-flex; align-items: center; gap: 8px; background: var(--color-white); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 99px; cursor: pointer; padding: 9px 15px 9px 12px; font-family: var(--font-body); font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12); } .aj-cc__reopen svg { width: 18px; height: 18px; color: var(--color-primary); } .aj-cc__reopen:hover { color: var(--color-primary-dark); border-color: var(--color-primary-light); } @media (max-width: 560px) { .aj-cc__banner { right: 12px; left: 12px; bottom: 12px; width: auto; } .aj-cc__reopen span { display: none; } .aj-cc__reopen { padding: 10px; } } /* ============================================================ HOMEPAGE (1:1 port of the old page-home) — unify block widths and product grids with the current design. The ported sections use .section-wrapper (max-width 1460px, no gutter); the current design container (header/footer) is 1610px / padding 0 24px. The offer carousels are WooCommerce [products] shortcodes (ul.products.columns-5) that fall back to WC's float layout with a 3.8% (~55px) column margin — replaced here with the site's CSS grid (see .cat-products ul.products). Overrides only layout/positioning; the ported card design is untouched. ============================================================ */ body.home .section-wrapper { max-width: 1610px; padding: 0 24px; box-sizing: border-box; } /* Promo-banner block uses the old Shoptimizer .container (no max-width → full-bleed). Constrain it to the same container as everything else; its inner .wraper-block keeps its -12px gutter row so banners align to edges. */ body.home .select-product .container { max-width: 1610px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } body.home .products-wrapper .woocommerce { width: 100%; margin: 0; } body.home .products-wrapper ul.products { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 24px; margin: 0; padding: 0; list-style: none; } body.home .products-wrapper ul.products::before, body.home .products-wrapper ul.products::after { content: none !important; display: none !important; } body.home .products-wrapper ul.products li.product { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* Unified vertical rhythm. The ported homepage had per-section random spacing (advantages 50/50, cta 40/40, instagram 30, filters 5, products 25, subscribe 10) and headings jumping 45px → 82px. Normalize: 24px below the nav for the banners, a uniform 56px gap between sections, 40px under every section heading. (.home-instagram is display:none, so its margin never renders.) */ body.home .select-product { margin: 24px 0 0 !important; padding: 0 !important; } body.home .advantages, body.home .trustpilot-home, body.home .cta, body.home .home-instagram, body.home .products.home-list, body.home .filters.home-list, body.home .products, body.home .subscribe { margin: 56px 0 0 !important; padding: 0 !important; } body.home .subscribe { margin-bottom: 56px !important; } body.home .section-title { margin: 0 0 40px !important; } @media (max-width: 1200px) { body.home .products-wrapper ul.products { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 700px) { body.home .products-wrapper ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } body.home .section-wrapper, body.home .select-product .container { padding: 0 16px; } }