/* * Lumini — cart + checkout page skin. * * Styles the WooCommerce-generated internals the bespoke purchase-flow * templates (woocommerce/cart/*, woocommerce/checkout/form-checkout.php) * cannot reach with Tailwind utilities: form fields, the cart-totals and * review-order tables, shipping/payment method lists, notices and the stock * `.button` controls. Page STRUCTURE (grids, the grey rounded sidebars, the * cart item cells) lives as utilities in the template markup. * * Standalone module, enqueued only on is_cart() / is_checkout() by * inc/woocommerce.php (handle lumini-woo-pages) — NOT bundled into main.css. * Hand-authored plain CSS (no build step), like header-nav.css / * cart-drawer.css, relying on the design tokens main.css exposes on :root. * WooCommerce's own general/smallscreen stylesheets are dequeued on these two * pages, so this module is the single skin there. * * Everything is scoped under `.lumini-woo` — the wrapper page.php adds around * the cart/checkout content — except the select2 dropdown, which selectWoo * appends to ; the conditional enqueue is its scope. */ /* ------------------------------------------------------------ List resets */ /* * global.css turns every `main ul > li` bullet into a turquoise checkmark for * editor content. WooCommerce's functional lists (shipping methods, payment * methods, error notices, order overview) must not inherit it. */ .lumini-woo ul { margin: 0; padding: 0; list-style: none; } .lumini-woo ul > li { padding-inline-start: 0; } .lumini-woo ul > li::before { content: none; } /* --------------------------------------------------------------- Notices */ .lumini-woo .woocommerce-message, .lumini-woo .woocommerce-info, .lumini-woo .woocommerce-error { margin: 0 0 24px; padding: 13px 18px; border-radius: 10px; font-size: 14.5px; line-height: 1.5; color: var(--color-ink); } .lumini-woo .woocommerce-message { background: var(--color-turquoise-soft); border: 1px solid var(--color-turquoise); } .lumini-woo .woocommerce-info { background: var(--color-bg-2); border: 1px solid var(--color-line-2); } /* No danger token exists yet — one-off reds, like the scrim rgba in * cart-drawer.css. Promote to @theme tokens if a third surface needs them. */ .lumini-woo .woocommerce-error { display: grid; gap: 6px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; } .lumini-woo .woocommerce-message a, .lumini-woo .woocommerce-info a { color: var(--color-turquoise); font-weight: 600; } .lumini-woo .woocommerce-error a { font-weight: 600; text-decoration: underline; } /* "Continue shopping" style links WC floats inside success messages. */ .lumini-woo .woocommerce-message .button { float: right; height: 34px; margin-left: 12px; padding: 0 12px; font-size: 13px; } .lumini-woo .coupon-error-notice { display: block; margin-top: 6px; font-size: 12.5px; color: #b91c1c; } /* --------------------------------------------------------------- Buttons */ /* * Secondary control — "Actualizează coșul", "Aplică cuponul" and any stock * `.button` WooCommerce prints. Mirrors the site's bordered button (mini-cart * "Vezi coșul", shop filter toggle). */ .lumini-woo .button { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; border: 1px solid var(--color-line-2); border-radius: 6px; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: background-color 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard); } .lumini-woo .button:hover { background: var(--color-bg-2); } /* cart.js disables "Actualizează coșul" until a quantity changes. */ .lumini-woo .button:disabled { opacity: 0.4; cursor: default; } .lumini-woo .button:disabled:hover { background: var(--color-bg); } /* * Primary CTA — "Finalizează comanda" (cart sidebar) and "Plasează comanda" * (checkout). Same amber treatment as the header CTA and the drawer checkout * button: amber, white label, near-black on hover. */ .lumini-woo a.checkout-button, .lumini-woo #place_order { display: flex; width: 100%; height: 52px; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: var(--color-amber); color: #ffffff; font-family: var(--font-sans); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color 0.2s var(--ease-standard); } .lumini-woo a.checkout-button:hover, .lumini-woo #place_order:hover { background: #2b2b2b; color: #ffffff; } .lumini-woo .wc-proceed-to-checkout { margin-top: 20px; padding: 0; } /* ------------------------------------------------------------ Form fields */ .lumini-woo .input-text, .lumini-woo select, .lumini-woo textarea { height: 48px; padding: 0 14px; border: 1px solid var(--color-line-2); border-radius: 6px; background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); font-size: 15px; transition: border-color 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard); } .lumini-woo textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; } .lumini-woo .input-text:focus, .lumini-woo select:focus, .lumini-woo textarea:focus { outline: none; border-color: var(--color-turquoise); box-shadow: 0 0 0 3px var(--color-turquoise-soft); } .lumini-woo .input-text::placeholder, .lumini-woo textarea::placeholder { color: var(--color-ink-3); } .lumini-woo input[type="checkbox"], .lumini-woo input[type="radio"] { width: 16px; height: 16px; accent-color: var(--color-ink-900); cursor: pointer; } .lumini-woo .form-row { margin: 0 0 16px; } .lumini-woo .form-row label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--color-ink); } /* Checkbox rows (terms, create account) — label sits beside the control. */ .lumini-woo .form-row label.checkbox { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; font-weight: 500; cursor: pointer; } .lumini-woo .form-row .required { color: var(--color-turquoise); text-decoration: none; } .lumini-woo .woocommerce-input-wrapper { display: block; } .lumini-woo .form-row .input-text, .lumini-woo .form-row select, .lumini-woo .form-row textarea { width: 100%; } /* Inline validation states from checkout.js. */ .lumini-woo .form-row.woocommerce-invalid .input-text, .lumini-woo .form-row.woocommerce-invalid select { border-color: #dc2626; } .lumini-woo .form-row.woocommerce-validated .input-text, .lumini-woo .form-row.woocommerce-validated select { border-color: var(--color-turquoise); } /* Two-column field grid on the checkout details column. */ @media (min-width: 640px) { .lumini-woo .woocommerce-billing-fields__field-wrapper, .lumini-woo .woocommerce-shipping-fields__field-wrapper, .lumini-woo .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; } .lumini-woo .form-row-wide, .lumini-woo .form-row.notes { grid-column: 1 / -1; } } /* ------------------------------------------------------ Checkout headings */ /* Unlayered on purpose: they must outrank the unlayered h2/h3 element rules * in global.css, which beat any Tailwind utility. */ .lumini-woo .woocommerce-billing-fields > h3, .lumini-woo .woocommerce-additional-fields > h3 { margin: 0 0 20px; font-size: 26px; font-weight: 600; color: var(--color-ink); } .lumini-woo #order_review_heading { margin: 0 0 16px; font-size: 22px; font-weight: 600; color: var(--color-ink); } /* "Livrezi la altă adresă?" — an h3 wrapping a checkbox toggle. */ .lumini-woo h3#ship-to-different-address { margin: 0 0 16px; font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: 0; } .lumini-woo h3#ship-to-different-address label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } /* ---------------------------------------------------------- Quantity input */ .lumini-woo .quantity { display: inline-flex; } .lumini-woo .quantity .qty { width: 76px; height: 44px; padding: 0 8px; border: 1px solid var(--color-line-2); border-radius: 6px; background: var(--color-bg); text-align: center; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--color-ink); transition: border-color 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard); } .lumini-woo .quantity .qty:focus { outline: none; border-color: var(--color-turquoise); box-shadow: 0 0 0 3px var(--color-turquoise-soft); } /* ------------------------------------------------------- Cart item extras */ /* Variation / cart-item meta printed under the product name. */ .lumini-woo dl.variation { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 4px 0 0; font-size: 12.5px; color: var(--color-ink-3); } .lumini-woo dl.variation dt { margin: 0; font-weight: 600; } .lumini-woo dl.variation dd { margin: 0; } .lumini-woo dl.variation dd p { display: inline; margin: 0; } /* --------------------------------------------- Cart table, small screens */ /* * Under 768px the item table re-flows into stacked cards: thumbnail rail on * the left, name/price on the right, quantity + subtotal on the bottom row. * The utility classes on the cells handle the desktop table look. */ @media (max-width: 767px) { .lumini-woo .lumini-cart-table, .lumini-woo .lumini-cart-table tbody, .lumini-woo .lumini-cart-table tr, .lumini-woo .lumini-cart-table td { display: block; width: 100%; } .lumini-woo .lumini-cart-table thead { display: none; } .lumini-woo .lumini-cart-table tr.cart_item { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "thumb name remove" "thumb price price" "thumb qty subtotal"; column-gap: 14px; row-gap: 8px; padding: 18px 0; } .lumini-woo .lumini-cart-table tr.cart_item td { width: auto; padding: 0; border: 0; } .lumini-woo .lumini-cart-table td.product-thumbnail { grid-area: thumb; } .lumini-woo .lumini-cart-table td.product-name { grid-area: name; } .lumini-woo .lumini-cart-table td.product-price { grid-area: price; } .lumini-woo .lumini-cart-table td.product-quantity { grid-area: qty; align-self: center; } .lumini-woo .lumini-cart-table td.product-subtotal { grid-area: subtotal; align-self: center; text-align: right; } .lumini-woo .lumini-cart-table td.product-remove { grid-area: remove; justify-self: end; } .lumini-woo .lumini-cart-table td.actions { padding: 18px 0 0; } } /* ----------------------------------------- Totals + order review tables */ .lumini-woo .cart_totals { width: 100%; } .lumini-woo .cart_totals h2 { margin: 0 0 14px; font-size: 22px; font-weight: 600; color: var(--color-ink); } .lumini-woo .cart_totals .shop_table, .lumini-woo .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; } .lumini-woo .cart_totals .shop_table th, .lumini-woo .cart_totals .shop_table td, .lumini-woo .woocommerce-checkout-review-order-table th, .lumini-woo .woocommerce-checkout-review-order-table td { padding: 12px 0; border-bottom: 1px solid var(--color-line-2); font-size: 14px; text-align: left; vertical-align: top; } .lumini-woo .cart_totals .shop_table th, .lumini-woo .woocommerce-checkout-review-order-table tfoot th { padding-right: 12px; font-weight: 500; color: var(--color-ink-2); } .lumini-woo .cart_totals .shop_table td, .lumini-woo .woocommerce-checkout-review-order-table td:last-child { text-align: right; color: var(--color-ink); } .lumini-woo .cart_totals .amount, .lumini-woo .woocommerce-checkout-review-order-table .amount { font-family: var(--font-mono); font-weight: 600; } /* Review-order header row ("Produs / Subtotal"). */ .lumini-woo .woocommerce-checkout-review-order-table thead th { padding: 0 0 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); } .lumini-woo .woocommerce-checkout-review-order-table td.product-name { padding-right: 12px; color: var(--color-ink); } .lumini-woo .woocommerce-checkout-review-order-table .product-quantity { font-family: var(--font-mono); font-weight: 600; color: var(--color-ink-3); } /* Grand total row — the number is the loudest thing in the panel. */ .lumini-woo .cart_totals tr.order-total th, .lumini-woo .cart_totals tr.order-total td, .lumini-woo .woocommerce-checkout-review-order-table tr.order-total th, .lumini-woo .woocommerce-checkout-review-order-table tr.order-total td { padding-top: 14px; border-bottom: 0; font-weight: 600; color: var(--color-ink); } .lumini-woo .cart_totals tr.order-total .amount, .lumini-woo .woocommerce-checkout-review-order-table tr.order-total .amount { font-size: 20px; font-weight: 700; } /* Applied coupon row. */ .lumini-woo a.woocommerce-remove-coupon { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--color-turquoise); } /* ------------------------------------------------------ Shipping methods */ .lumini-woo .woocommerce-shipping-methods { display: grid; gap: 8px; text-align: left; } .lumini-woo .woocommerce-shipping-methods li { display: flex; align-items: baseline; gap: 8px; } .lumini-woo .woocommerce-shipping-methods label { font-size: 14px; color: var(--color-ink); cursor: pointer; } .lumini-woo .woocommerce-shipping-destination { margin: 8px 0 0; font-size: 12.5px; color: var(--color-ink-3); } .lumini-woo .shipping-calculator-button { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--color-turquoise); } .lumini-woo .shipping-calculator-form { margin-top: 12px; text-align: left; } .lumini-woo .shipping-calculator-form .button { width: 100%; height: 44px; } /* ------------------------------------------------------ Payment methods */ .lumini-woo #payment { margin-top: 20px; } .lumini-woo .wc_payment_methods { display: grid; gap: 10px; margin: 0 0 18px; } /* White option cards on the grey sidebar panel. */ .lumini-woo .wc_payment_method { padding: 13px 16px; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: 10px; transition: border-color 0.15s var(--ease-standard); } .lumini-woo .wc_payment_method:has(> input:checked) { border-color: var(--color-ink-900); } .lumini-woo .wc_payment_method > input.input-radio { margin-right: 10px; vertical-align: -2px; } .lumini-woo .wc_payment_method > label { display: inline; font-size: 14.5px; font-weight: 600; color: var(--color-ink); cursor: pointer; } .lumini-woo .wc_payment_method > label img { display: inline-block; max-height: 24px; margin-left: 6px; vertical-align: middle; } .lumini-woo .payment_box { margin: 10px 0 0; padding: 12px 14px; background: var(--color-bg-2); border-radius: 8px; font-size: 13.5px; line-height: 1.55; color: var(--color-ink-2); } .lumini-woo .payment_box p { margin: 0 0 8px; } .lumini-woo .payment_box p:last-child { margin: 0; } /* ---------------------------------------------------------- Place order */ .lumini-woo .form-row.place-order { margin: 0; padding: 0; } .lumini-woo .woocommerce-terms-and-conditions-wrapper { margin: 0 0 14px; font-size: 13px; color: var(--color-ink-3); } .lumini-woo .woocommerce-terms-and-conditions-wrapper a, .lumini-woo .woocommerce-privacy-policy-text a { color: var(--color-turquoise); font-weight: 600; } .lumini-woo .woocommerce-privacy-policy-text p { margin: 0 0 12px; } .lumini-woo .woocommerce-terms-and-conditions-wrapper .form-row { margin: 10px 0 0; } /* --------------------------------------------- Checkout coupon + login */ .lumini-woo form.checkout_coupon, .lumini-woo form.woocommerce-form-login { max-width: 560px; margin: 0 0 26px; padding: 18px; border: 1px dashed var(--color-line-2); border-radius: 12px; } .lumini-woo form.checkout_coupon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .lumini-woo form.checkout_coupon > p { margin: 0; } .lumini-woo form.checkout_coupon > p:not(.form-row) { flex-basis: 100%; font-size: 14px; color: var(--color-ink-2); } .lumini-woo form.checkout_coupon .form-row-first { flex: 1 1 200px; } .lumini-woo form.checkout_coupon .clear { display: none; } /* --------------------------------------------------------------- Select2 */ /* Country / county dropdowns (selectWoo). Match the .input-text metrics. */ .lumini-woo .select2-container .select2-selection--single { height: 48px; background: var(--color-bg); border: 1px solid var(--color-line-2); border-radius: 6px; } .lumini-woo .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 32px 0 14px; line-height: 46px; font-size: 15px; color: var(--color-ink); } .lumini-woo .select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; } .lumini-woo .select2-container--focus .select2-selection--single, .lumini-woo .select2-container--open .select2-selection--single { border-color: var(--color-turquoise); box-shadow: 0 0 0 3px var(--color-turquoise-soft); } /* The dropdown itself is appended to , outside .lumini-woo. */ .select2-dropdown { border: 1px solid var(--color-line-2); border-radius: 8px; overflow: hidden; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--color-ink-900); } .select2-search--dropdown .select2-search__field { padding: 8px 10px; border: 1px solid var(--color-line-2); border-radius: 6px; } /* --------------------------------------------------- Order received page */ .lumini-woo .woocommerce-thankyou-order-received { margin: 0 0 22px; font-size: 18px; font-weight: 600; color: var(--color-ink); } .lumini-woo ul.woocommerce-order-overview { display: flex; flex-wrap: wrap; gap: 18px 40px; margin: 0 0 30px; padding: 20px 24px; background: var(--color-bg-2); border-radius: 16px; } .lumini-woo ul.woocommerce-order-overview li { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3); } .lumini-woo ul.woocommerce-order-overview li strong { display: block; margin-top: 5px; font-size: 15px; color: var(--color-ink); } .lumini-woo .woocommerce-order-details h2, .lumini-woo .woocommerce-customer-details h2 { margin: 0 0 14px; font-size: 24px; font-weight: 600; color: var(--color-ink); } .lumini-woo .woocommerce-table--order-details { width: 100%; margin: 0 0 28px; border-collapse: collapse; } .lumini-woo .woocommerce-table--order-details th, .lumini-woo .woocommerce-table--order-details td { padding: 10px 0; border-bottom: 1px solid var(--color-line); font-size: 14px; text-align: left; } .lumini-woo .woocommerce-table--order-details td:last-child, .lumini-woo .woocommerce-table--order-details th:last-child { text-align: right; } .lumini-woo .woocommerce-customer-details address { padding: 16px 20px; border: 1px solid var(--color-line); border-radius: 12px; font-style: normal; line-height: 1.7; color: var(--color-ink-2); }