/* WP-specific overrides — loaded AFTER design.css. * * The design CSS is an SPA: `.page` is the section wrapper (display:none unless * `.on`) and `.search`/`.pop`/`.satc`/`.scrim` are full-screen overlays. WordPress * body_class() puts `page` on every static Page and `search` on results pages, so * `` matched `.page{display:none}` and the whole page rendered * invisible (0-height). These resets force any such collision on back to a * normal document flow. The design's overlay DIVs (div.search, div.pop…) keep their * own rules untouched — only is corrected. */ body.page, body.search, body.pop, body.satc, body.scrim, body.mini, body.band, body.hero { display: block; position: static; inset: auto; z-index: auto; padding: 0; padding-top: 66px; /* matches the design body rule (fixed header height) */ background: var(--bg); align-items: initial; justify-content: initial; } /* ============================================================================ * Cart + Checkout — restyle Woo's functional markup into the Jauki design. * The templates/fields/payment/place-order stay Woo (money path untouched); * only presentation is themed here. (P5 validates the money path / G-CHK.) * ==========================================================================*/ .woocommerce-cart .entry-title, .woocommerce-checkout .entry-title { font-family:"Vollkorn",Georgia,serif; } /* 2-column layouts */ .woocommerce-cart .woocommerce { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:30px; align-items:start; } .woocommerce-cart .woocommerce-notices-wrapper { grid-column:1 / -1; } .woocommerce-checkout form.checkout.woocommerce-checkout { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:16px 30px; align-items:start; } .woocommerce-checkout #customer_details { grid-column:1; grid-row:1 / span 2; } .woocommerce-checkout #order_review_heading { grid-column:2; grid-row:1; margin:0; font-family:"Vollkorn",serif; } .woocommerce-checkout #order_review { grid-column:2; grid-row:2; } @media(max-width:900px){ .woocommerce-cart .woocommerce, .woocommerce-checkout form.checkout.woocommerce-checkout { grid-template-columns:1fr; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column:1; } } /* cart table -> clean rows */ .woocommerce table.cart { border:1px solid var(--bor); border-radius:16px; overflow:hidden; background:var(--wht); border-collapse:separate; } .woocommerce table.cart th { background:var(--oat); color:var(--soft); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:12px 14px; } .woocommerce table.cart td { padding:14px; border-top:1px solid var(--bor); vertical-align:middle; } /* Cart thumbnails: force a fixed 64px render. WooCommerce's own `.woocommerce table.cart img{width:32px}` shares our specificity and can win on load-order, and WP may serve a tiny fallback size for some products, so pin the box hard and let object-fit crop whatever intrinsic size arrives. */ .woocommerce table.cart td.product-thumbnail { width:80px; } .woocommerce table.cart td.product-thumbnail img, .woocommerce #content table.cart td.product-thumbnail img { width:64px !important; height:64px !important; max-width:64px !important; min-width:64px; object-fit:cover; border-radius:10px; display:block; } /* Pin the cart table to its grid column (auto layout let the wide thumbnail column push the table under the summary card). Fixed layout distributes the fixed columns and lets the product name wrap in whatever space is left. */ .woocommerce-cart table.cart { table-layout:fixed; width:100%; } .woocommerce-cart table.cart th.product-remove, .woocommerce-cart table.cart td.product-remove { width:34px; } .woocommerce-cart table.cart th.product-thumbnail, .woocommerce-cart table.cart td.product-thumbnail { width:78px; } .woocommerce-cart table.cart th.product-price, .woocommerce-cart table.cart td.product-price, .woocommerce-cart table.cart th.product-quantity, .woocommerce-cart table.cart td.product-quantity { width:82px; } .woocommerce-cart table.cart th.product-subtotal, .woocommerce-cart table.cart td.product-subtotal { width:92px; } .woocommerce-cart table.cart td.product-name { word-break:break-word; } .woocommerce .quantity input.qty { width:64px; padding:8px; border:1px solid var(--bor); border-radius:8px; background:var(--bg); } .woocommerce a.remove { color:var(--acd) !important; } /* summary / totals cards */ .woocommerce .cart_totals, .woocommerce-checkout #order_review { background:var(--wht); border:1px solid var(--bor); border-radius:16px; padding:20px; } .woocommerce .cart_totals h2, .woocommerce-checkout #order_review_heading { font-size:17px; } .woocommerce .cart_totals table, .woocommerce-checkout .shop_table { border:0; } .woocommerce .cart_totals th, .woocommerce .cart_totals td, .woocommerce-checkout .shop_table th, .woocommerce-checkout .shop_table td { border:0; border-top:1px solid var(--bor); padding:10px 0; } .woocommerce .order-total .amount { color:var(--ink); font-size:19px; } /* coupon + free shipping wording */ .woocommerce .coupon .input-text { border:1px solid var(--bor); border-radius:999px; padding:11px 16px; background:var(--bg); } .woocommerce .cart_totals .free-shipping, .woocommerce-checkout .free { color:var(--sage); font-weight:800; } /* form fields */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout select, .select2-container .select2-selection { border:1px solid var(--bor) !important; border-radius:10px !important; padding:12px 14px !important; background:var(--wht) !important; font-family:inherit; min-height:46px; } .woocommerce form .form-row label { font-weight:700; color:var(--ink); font-size:13px; } .woocommerce-checkout #customer_details { background:var(--wht); border:1px solid var(--bor); border-radius:16px; padding:20px; } .woocommerce-checkout h3 { font-family:"Vollkorn",serif; font-size:17px; margin:6px 0 12px; } /* payment box */ .woocommerce-checkout #payment { background:transparent; border-radius:12px; } .woocommerce-checkout #payment div.payment_box { background:var(--oat); border-radius:10px; } /* ---- Checkout: proto import (form-checkout.php reproduces the prototype's .cgrid/.ckform/.csum/.ropt structure; design.css styles those 1:1). Only the Woo-native payment list needs mapping onto the proto's .ropt look, plus a few glue rules so Woo's billing .form-row fields sit inside the .ckform flow. ---- */ .ryytas-checkout .cgrid { margin-top:6px; } /* WooCommerce forces `form.checkout { display:grid }`, which makes our .cgrid a grid ITEM sized to ~min-content (collapsing it to ~670px and cramping both columns — coupon input truncated, item names over-wrapped). Force the form back to block so .cgrid is the grid and fills the full 1100px content width 1:1 with the prototype. */ .ryytas-checkout.checkout, form.checkout.ryytas-checkout { display:block !important; } .ryytas-checkout .cgrid { width:100%; } /* Order-summary product thumbnails (proto .cline img = 74px square). A Woo/core img rule was collapsing them to ~13px; pin the proto size, scoped to the summary. */ .ryytas-checkout .csum .cline img { width:64px !important; height:64px !important; min-width:64px; max-width:64px !important; object-fit:cover; border-radius:10px; display:block; flex:0 0 auto; aspect-ratio:1/1; } /* In-summary coupon (.nlrow): keep input + button on one line, input takes the slack. */ .ryytas-checkout .csum .nlrow { display:flex; gap:8px; align-items:center; } .ryytas-checkout .csum .nlrow input { flex:1 1 auto; min-width:0; margin:0; } .ryytas-checkout .csum .nlrow .btn { flex:0 0 auto; white-space:nowrap; } /* Woo billing/shipping/additional field-group headings are replaced by our own "2 · Kontaktinė informacija" step heading — hide every heading inside the block. */ .ryytas-checkout #customer_details h3, .ryytas-checkout #customer_details .woocommerce-additional-fields > h3 { display:none; } /* Shipping selector lives in step 1 (.ropt cards); hide the duplicate selector + row that WooCommerce renders inside the summary review-order table. */ .ryytas-checkout .csum tr.woocommerce-shipping-totals, .ryytas-checkout .csum #shipping_method { display:none; } .ryytas-checkout #customer_details .woocommerce-billing-fields__field-wrapper, .ryytas-checkout #customer_details .woocommerce-additional-fields__field-wrapper { display:flex; flex-wrap:wrap; gap:10px; } .ryytas-checkout #customer_details p.form-row { margin:0; flex:1 1 100%; } .ryytas-checkout #customer_details p.form-row-first { flex:1 1 calc(50% - 5px); } .ryytas-checkout #customer_details p.form-row-last { flex:1 1 calc(50% - 5px); } .ryytas-checkout #customer_details p.form-row label { font-weight:600; font-size:12.5px; color:var(--soft); margin:0 0 3px; } /* Pair El.paštas + Telefonas 50/50 (proto .frow row); hide the optional company field (absent from the prototype). CSS-only — does not affect submission. */ .ryytas-checkout #customer_details #billing_email_field, .ryytas-checkout #customer_details #billing_phone_field { flex:1 1 calc(50% - 5px); } .ryytas-checkout #customer_details #billing_company_field { display:none; } /* Remove stray legacy checkboxes injected by old custom-css-js snippets that are NOT in the prototype: a duplicate newsletter opt-in (#newsletter_signup) and a mislabeled "prekė gali vėluoti" consent (#special_offers_signup). Both optional, so hiding is safe. The proto keeps only: terms + the Klaviyo newsletter. */ .ryytas-checkout p:has(#newsletter_signup), .ryytas-checkout p:has(#special_offers_signup), .ryytas-checkout label:has(#newsletter_signup), .ryytas-checkout label:has(#special_offers_signup), .ryytas-checkout #newsletter_signup, .ryytas-checkout #special_offers_signup { display:none !important; } /* Newsletter opt-in: inline checkbox + label on one line, left-aligned (proto .chk), instead of a checkbox floating centered above its label. */ .ryytas-checkout #customer_details p.form-row#kl_newsletter_checkbox_field, .ryytas-checkout #customer_details p.form-row.woocommerce-form__label-for-checkbox, .ryytas-checkout #customer_details p.form-row:has(input[type="checkbox"]) { flex:1 1 100% !important; display:flex; align-items:center; margin-top:4px; } .ryytas-checkout #customer_details p.form-row label.checkbox, .ryytas-checkout #customer_details p.form-row .woocommerce-form__label-for-checkbox, .ryytas-checkout #customer_details p.form-row:has(input[type="checkbox"]) label { display:flex !important; align-items:center; gap:9px; margin:0 !important; font-weight:500 !important; font-size:13.5px !important; color:var(--ink) !important; text-align:left; cursor:pointer; } .ryytas-checkout #customer_details p.form-row input[type="checkbox"] { width:18px; height:18px; flex:0 0 auto; margin:0; accent-color:var(--ac); } /* Terms + ALL checkout checkboxes: a full-width input rule was stretching the checkbox to ~607px (the "red box" over the label). Pin every checkout checkbox to 18px and lay the terms row out inline (checkbox + text on one line). */ .ryytas-checkout input[type="checkbox"] { width:18px !important; height:18px !important; min-width:18px; flex:0 0 auto; margin:0 8px 0 0; accent-color:var(--ac); vertical-align:middle; display:inline-block; } .ryytas-checkout p.form-row.validate-required, .ryytas-checkout .woocommerce-terms-and-conditions-wrapper p.form-row { display:flex; align-items:center; border:0; padding:0; text-align:left; margin:8px 0 0; } .ryytas-checkout label.woocommerce-form__label-for-checkbox { display:flex; align-items:center; gap:8px; margin:0 !important; cursor:pointer; font-weight:500 !important; font-size:13.5px !important; color:var(--ink) !important; text-align:left; } .ryytas-checkout .woocommerce-terms-and-conditions-checkbox-text { display:inline; } .ryytas-checkout #customer_details .form-row input.input-text, .ryytas-checkout #customer_details .form-row textarea, .ryytas-checkout #customer_details .form-row .select2-container { border:1.5px solid var(--bor) !important; border-radius:12px !important; padding:12px 14px !important; background:var(--wht) !important; min-height:auto; } /* Map Woo's native payment list onto the proto .ropt card look */ .ryytas-checkout #payment { background:transparent; padding:0; } .ryytas-checkout #payment ul.payment_methods { border:0 !important; background:transparent !important; padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:10px; } .ryytas-checkout #payment ul.payment_methods li.wc_payment_method { border:1.5px solid var(--bor); border-radius:13px; background:var(--wht); padding:12px 14px; margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14px; font-weight:600; cursor:pointer; transition:border-color .15s; } .ryytas-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) { border-color:var(--ac); } .ryytas-checkout #payment ul.payment_methods li label { margin:0; font-weight:600; color:var(--ink); cursor:pointer; } .ryytas-checkout #payment ul.payment_methods li .payment_box { flex:1 0 100%; background:var(--oat); border-radius:10px; margin:6px 0 0; font-size:13px; } .ryytas-checkout #payment ul.payment_methods li img { max-height:22px; width:auto; margin-left:auto; } .ryytas-checkout #payment .place-order { padding:0; margin:14px 0 0; } /* shipping cards rendered natively as .ropt in the template need no extra rules */ /* all Woo buttons -> design coral pill */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce-checkout #place_order, .wc-proceed-to-checkout .checkout-button { background:var(--ac) !important; color:#fff !important; border:0 !important; border-radius:999px !important; font-weight:800 !important; font-family:inherit !important; padding:13px 26px !important; font-size:14px !important; transition:background .15s; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-checkout #place_order:hover, .wc-proceed-to-checkout .checkout-button:hover { background:var(--acd) !important; } .woocommerce-checkout #place_order, .wc-proceed-to-checkout .checkout-button { width:100%; text-align:center; font-size:15px !important; padding:15px 26px !important; } .woocommerce .button.alt.disabled { opacity:.6; } /* cart totals card was hidden by a leftover rule — restore + place right column */ .woocommerce .cart-collaterals { display:block !important; grid-column:2; float:none; width:auto; } .woocommerce .cart-collaterals .cross-sells { margin-top:18px; } .woocommerce .cart_totals h2 { font-family:"Vollkorn",serif; } /* the side-cart / overlays must honour the hidden attribute (design.css forces display) */ .mini[hidden], .cart-widget-side[hidden], .scrim[hidden], .search[hidden], .pop[hidden] { display:none !important; } /* ---- Generic / legal page content (Prekių pristatymas, policies, taisyklės, etc.) Legacy WP editor content renders through page.php > .entry with no type scale; give it a themed document look: constrained measure, Vollkorn heads, Hanken body. */ .page-body { max-width: 820px; margin: 0 auto; } /* Cart & checkout are wide two-column commerce layouts, NOT prose — release them from the 820px reading measure so the items table isn't crushed. */ .woocommerce-cart .page-body, .woocommerce-checkout .page-body { max-width: none; } .page-body > h1.ds { margin: 0 0 20px; } .entry { font-family: "Hanken Grotesk", system-ui, sans-serif; color: var(--ink); font-size: 15.5px; line-height: 1.72; } .entry > *:first-child { margin-top: 0; } .entry h1, .entry h2, .entry h3, .entry h4 { font-family: "Vollkorn", Georgia, serif; color: var(--ink); line-height: 1.28; margin: 28px 0 10px; } .entry h1 { font-size: 25px; } .entry h2 { font-size: 20px; } .entry h3 { font-size: 17px; } .entry h4 { font-size: 15.5px; } .entry p { margin: 0 0 13px; } .entry ul, .entry ol { margin: 0 0 15px; padding-left: 22px; } .entry li { margin: 5px 0; } .entry li::marker { color: var(--sage); } .entry a { color: var(--acd); text-decoration: underline; text-underline-offset: 2px; } .entry strong, .entry b { color: var(--ink); font-weight: 600; } .entry img { max-width: 100%; height: auto; border-radius: 12px; } .entry table { width: 100%; border-collapse: collapse; margin: 0 0 16px; } .entry th, .entry td { border: 1px solid var(--bor); padding: 9px 12px; text-align: left; } /* ---- Cart / checkout parity with the design mock ---- The design shows text-only shipping labels; the MultiParcels plugin injects 100px carrier brand logos that bloat and misalign the shipping list. Hide them. */ .multiparcels_carrier_icon, img.multiparcels_carrier_icon { display: none !important; } /* tidy the shipping method rows (radio · label · price) */ #shipping_method li, .woocommerce-shipping-methods li { list-style: none; margin: 6px 0; display: flex; align-items: center; gap: 8px; } #shipping_method li label, .woocommerce-shipping-methods li label { margin: 0; } .shop_table .shipping .woocommerce-shipping-methods { margin: 0; padding: 0; } /* cart cross-sell ("Dažnai perkama kartu") — compact stacked card in the summary column, not Woo's cramped side-by-side float. */ .woocommerce-cart .cart-collaterals .cross-sells, .woocommerce-cart .cart-collaterals .cart_totals { float: none !important; width: 100% !important; } .woocommerce-cart .cart-collaterals .cross-sells { margin: 0 0 20px !important; } .woocommerce-cart .cross-sells > h2 { font-family:"Vollkorn",serif; font-size:16px; margin:0 0 10px; } .woocommerce-cart .cross-sells ul.products { display:block !important; margin:0; } .woocommerce-cart .cross-sells ul.products li.product { width:100% !important; margin:0 !important; float:none !important; display:grid; grid-template-columns:56px 1fr auto; align-items:center; gap:10px; background:var(--wht); border:1px solid var(--bor); border-radius:14px; padding:10px 12px; } .woocommerce-cart .cross-sells ul.products li.product img { width:56px !important; height:56px; object-fit:cover; border-radius:10px; margin:0 !important; } .woocommerce-cart .cross-sells ul.products li.product .woocommerce-loop-product__title { font-size:12.5px; padding:0; font-weight:600; line-height:1.25; } .woocommerce-cart .cross-sells ul.products li.product .price { font-size:12px; grid-column:2; } .woocommerce-cart .cross-sells ul.products li.product .button { grid-column:3; grid-row:1 / span 2; margin:0; padding:8px 12px; font-size:12px; white-space:nowrap; } .woocommerce-cart .cross-sells ul.products li.product .star-rating { display:none; } /* proto-style cart cross-sell replaces Woo's default block */ .woocommerce-cart .cart-collaterals .cross-sells { display: none !important; } .woocommerce-cart .xsell { margin: 16px 0 0; } .woocommerce-cart .xsell .lbl { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); margin-bottom:10px; } .woocommerce-cart .xrow { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:12px; background:var(--wht); border:1px solid var(--bor); border-radius:16px; padding:12px 14px; margin-bottom:10px; } .woocommerce-cart .xrow img { width:64px; height:64px; object-fit:cover; border-radius:12px; } .woocommerce-cart .xrow .xinfo b { display:block; font-size:14px; } .woocommerce-cart .xrow .xinfo span { font-size:12px; color:var(--soft); } .woocommerce-cart .xrow .btn { margin:0; white-space:nowrap; }