/* ========================================================================== Nocturne Editions — WooCommerce skin ========================================================================== PURPOSE This stylesheet re-skins native WooCommerce pages (cart, checkout, my account, order confirmation, notices) to match the Nocturne Editions brand. It is enqueued site-wide by the NE custom plugin, AFTER WooCommerce's own stylesheets. DO NOT TOUCH — COMPLIANCE NOTE This file changes colors, typography, borders, and spacing ONLY. It must NEVER: - hide functional elements (no display:none / visibility:hidden on fields, buttons, payment methods, terms checkboxes, or notices) - reorder or reposition checkout elements (no order/float/absolute tricks on #customer_details, .woocommerce-checkout-payment, etc.) - alter form behavior in any way (no pointer-events, no JS) WooCommerce Payments / card-on-file flows depend on the stock checkout structure remaining intact. Re-skin, never restructure. Scoping: selectors are scoped under .woocommerce / .woocommerce-page, the classes WooCommerce adds to and its wrappers, so this file cannot leak into non-shop pages. Specificity is used instead of !important except where Woo itself uses !important. ========================================================================== */ /* -------------------------------------------------------------------------- 0. TOKENS — standalone copy of the brand design tokens (prefixed --ne-) -------------------------------------------------------------------------- */ :root { --ne-ink: #16130f; --ne-ink-soft: #3a352e; --ne-muted: #6f685e; --ne-paper: #faf7f2; --ne-paper-deep: #f3eee5; --ne-line: #e3dcd0; --ne-accent: #8e2f2a; --ne-accent-dark: #6e211d; --ne-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --ne-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ne-radius: 3px; } /* -------------------------------------------------------------------------- 1. TYPOGRAPHY & BASE COLORS Headings to the serif, body and forms to Inter, brand ink/paper palette. -------------------------------------------------------------------------- */ .woocommerce, .woocommerce-page { font-family: var(--ne-sans); color: var(--ne-ink); } .woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4, .woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3, .woocommerce-page h4 { font-family: var(--ne-serif); font-weight: 600; color: var(--ne-ink); line-height: 1.15; } /* Section headings Woo prints itself (e.g. "Billing details", "Your order") */ .woocommerce-billing-fields > h3, .woocommerce-shipping-fields > h3, .woocommerce-additional-fields > h3, #order_review_heading, .cart_totals h2, .cross-sells > h2, .up-sells > h2, .related.products > h2, .woocommerce-order-details__title, .woocommerce-customer-details > h2, .woocommerce-column__title { font-family: var(--ne-serif); font-weight: 600; font-size: 28px; color: var(--ne-ink); } .woocommerce a, .woocommerce-page a { color: var(--ne-ink); } .woocommerce a:hover, .woocommerce-page a:hover { color: var(--ne-accent); } /* Secondary / helper text */ .woocommerce .woocommerce-result-count, .woocommerce .posted_in, .woocommerce .sku_wrapper, .woocommerce .woocommerce-review-link, .woocommerce .woocommerce-privacy-policy-text, .woocommerce-page .woocommerce-privacy-policy-text { color: var(--ne-muted); } /* -------------------------------------------------------------------------- 2. BUTTONS Brand button: 13px / 600 / uppercase / letterspaced, ink fill with paper text, inverting on hover. Covers all core Woo button variants. -------------------------------------------------------------------------- */ .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button, .woocommerce a.checkout-button, .woocommerce #place_order, .woocommerce button#place_order { display: inline-block; font-family: var(--ne-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; padding: 14px 28px; border: 1px solid var(--ne-ink); border-radius: var(--ne-radius); background-color: var(--ne-ink); color: var(--ne-paper); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer; } /* Alt buttons (Woo's "primary" variant, e.g. place order) — same brand style */ .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt { background-color: var(--ne-ink); color: var(--ne-paper); border-color: var(--ne-ink); } /* Hover — invert to outline */ .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover, .woocommerce button#place_order:hover { background-color: transparent; color: var(--ne-ink); border-color: var(--ne-ink); } /* Disabled — keep visible (compliance), just soften. Woo uses !important on its own disabled styles, so we must too. */ .woocommerce #respond input#submit.disabled, .woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit:disabled[disabled], .woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce input.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled] { background-color: var(--ne-muted) !important; border-color: var(--ne-muted) !important; color: var(--ne-paper) !important; opacity: 0.7; padding: 14px 28px; cursor: not-allowed; } /* -------------------------------------------------------------------------- 3. FORMS Inputs, selects, textareas, labels, focus states, .form-row rhythm. -------------------------------------------------------------------------- */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page form .form-row input.input-text, .woocommerce-page form .form-row textarea, .woocommerce-page form .form-row select, .woocommerce input.input-text, .woocommerce .input-text, .woocommerce select, .woocommerce textarea { font-family: var(--ne-sans); font-size: 14px; color: var(--ne-ink); background-color: #fff; border: 1px solid var(--ne-line); border-radius: var(--ne-radius); padding: 11px 14px; box-shadow: none; } /* Focus — 2px accent outline, matching the brand accessibility pattern */ .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .woocommerce-page form .form-row input.input-text:focus, .woocommerce-page form .form-row textarea:focus, .woocommerce-page form .form-row select:focus, .woocommerce input.input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus { outline: 2px solid var(--ne-accent); outline-offset: 1px; border-color: var(--ne-accent); box-shadow: none; } .woocommerce form .form-row label, .woocommerce-page form .form-row label { font-family: var(--ne-sans); font-size: 13px; font-weight: 500; color: var(--ne-ink-soft); line-height: 1.6; } /* Required-field asterisk in brand accent */ .woocommerce form .form-row .required { color: var(--ne-accent); text-decoration: none; } .woocommerce form .form-row { margin-bottom: 14px; } /* Placeholder text */ .woocommerce form .form-row input.input-text::placeholder, .woocommerce form .form-row textarea::placeholder { color: var(--ne-muted); opacity: 1; } /* Select2 dropdowns (country/state pickers Woo renders via Select2) */ .woocommerce .select2-container--default .select2-selection--single { border: 1px solid var(--ne-line); border-radius: var(--ne-radius); height: auto; padding: 7px 14px; background-color: #fff; } .woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ne-ink); font-family: var(--ne-sans); font-size: 14px; } .woocommerce .select2-container--default.select2-container--focus .select2-selection--single, .woocommerce .select2-container--default.select2-container--open .select2-selection--single { outline: 2px solid var(--ne-accent); outline-offset: 1px; border-color: var(--ne-accent); } /* -------------------------------------------------------------------------- 4. CART PAGE Shop table, coupon row, cart totals box, quantity inputs. -------------------------------------------------------------------------- */ .woocommerce table.shop_table { border: 1px solid var(--ne-line); border-radius: var(--ne-radius); border-collapse: separate; background-color: #fff; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--ne-line); padding: 14px 16px; } .woocommerce table.shop_table thead th { font-family: var(--ne-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ne-ink-soft); background-color: var(--ne-paper-deep); } .woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot th { color: var(--ne-ink); } /* Product name link inside the cart table — serif, like a card title */ .woocommerce table.shop_table td.product-name a { font-family: var(--ne-serif); font-size: 19px; font-weight: 600; color: var(--ne-ink); } .woocommerce table.shop_table td.product-name a:hover { color: var(--ne-accent); } /* Product thumbnail in cart rows */ .woocommerce table.shop_table td.product-thumbnail img { border: 1px solid var(--ne-line); border-radius: var(--ne-radius); } /* Remove "x" link */ .woocommerce table.shop_table a.remove { color: var(--ne-muted) !important; /* Woo sets color with !important */ font-weight: 400; } .woocommerce table.shop_table a.remove:hover { color: var(--ne-paper) !important; background-color: var(--ne-accent); } /* Quantity inputs */ .woocommerce .quantity .qty { font-family: var(--ne-sans); font-size: 14px; color: var(--ne-ink); background-color: #fff; border: 1px solid var(--ne-line); border-radius: var(--ne-radius); padding: 9px 6px; } .woocommerce .quantity .qty:focus { outline: 2px solid var(--ne-accent); outline-offset: 1px; border-color: var(--ne-accent); } /* Coupon row */ .woocommerce table.shop_table td.actions { background-color: var(--ne-paper); } .woocommerce table.shop_table td.actions .coupon .input-text { border: 1px solid var(--ne-line); border-radius: var(--ne-radius); padding: 11px 14px; min-width: 160px; } /* Cart totals box */ .woocommerce .cart_totals { background-color: var(--ne-paper-deep); border: 1px solid var(--ne-line); border-radius: var(--ne-radius); padding: 24px; } .woocommerce .cart_totals h2 { font-size: 24px; margin-top: 0; } .woocommerce .cart_totals table.shop_table { border: 0; background: transparent; } .woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td { border-color: var(--ne-line); background: transparent; } .woocommerce .cart_totals .order-total .amount { font-family: var(--ne-serif); font-size: 22px; font-weight: 600; color: var(--ne-ink); } /* Proceed to checkout button fills the totals box width (no layout change, Woo's own stylesheet already does this; we only keep it consistent) */ .woocommerce .wc-proceed-to-checkout a.checkout-button { font-size: 13px; padding: 16px 28px; } /* Shipping calculator link */ .woocommerce .shipping-calculator-button { color: var(--ne-accent); text-decoration: underline; text-underline-offset: 3px; } /* Cross-sells under the cart inherit standard product styling; just align their heading with the brand (handled in section 1). */ /* -------------------------------------------------------------------------- 5. CHECKOUT Customer details, order review table, payment box, terms row. NOTE: structure untouched — colors and borders only (see header). -------------------------------------------------------------------------- */ /* Customer details column — fields already covered by section 3 */ .woocommerce-checkout #customer_details .woocommerce-billing-fields, .woocommerce-checkout #customer_details .woocommerce-shipping-fields { color: var(--ne-ink); } /* "Ship to a different address" checkbox heading */ .woocommerce-checkout #ship-to-different-address { font-family: var(--ne-serif); font-weight: 600; color: var(--ne-ink); } /* Order review table */ .woocommerce table.shop_table.woocommerce-checkout-review-order-table { background-color: #fff; border: 1px solid var(--ne-line); } .woocommerce table.woocommerce-checkout-review-order-table thead th { background-color: var(--ne-paper-deep); } .woocommerce table.woocommerce-checkout-review-order-table .order-total th, .woocommerce table.woocommerce-checkout-review-order-table .order-total td { border-top: 2px solid var(--ne-ink); } .woocommerce table.woocommerce-checkout-review-order-table .order-total .amount { font-family: var(--ne-serif); font-size: 22px; font-weight: 600; } /* Payment box — Woo's default is a grey rounded panel; restyle to paper-deep. All payment methods stay fully visible and interactive. */ .woocommerce-checkout #payment, .woocommerce-page #payment { background-color: var(--ne-paper-deep); border: 1px solid var(--ne-line); border-radius: var(--ne-radius); } .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--ne-line); padding: 18px; } .woocommerce-checkout #payment ul.payment_methods li { color: var(--ne-ink); } .woocommerce-checkout #payment ul.payment_methods label { font-family: var(--ne-sans); font-weight: 500; color: var(--ne-ink); } /* The expanding description / card-fields panel under each method. Woo draws its pointer arrow with a border-color trick; match both. */ .woocommerce-checkout #payment div.payment_box, .woocommerce-page #payment div.payment_box { background-color: #fff; border: 1px solid var(--ne-line); border-radius: var(--ne-radius); color: var(--ne-ink-soft); font-size: 13.5px; } .woocommerce-checkout #payment div.payment_box::before, .woocommerce-page #payment div.payment_box::before { border-bottom-color: #fff; /* arrow matches the box background */ } /* Radio buttons tinted to brand accent (native control, no layout change) */ .woocommerce-checkout #payment ul.payment_methods input[type="radio"], .woocommerce form .form-row input[type="checkbox"], .woocommerce form .form-row input[type="radio"] { accent-color: var(--ne-accent); } /* Place order area inside the payment box */ .woocommerce-checkout #payment div.form-row.place-order { padding: 18px; } /* Terms & privacy row — text styled, checkbox left fully functional */ .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { color: var(--ne-ink-soft); font-size: 13.5px; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--ne-accent); text-decoration: underline; text-underline-offset: 3px; } /* "Have a coupon?" / "Returning customer?" toggle links above checkout */ .woocommerce-form-coupon-toggle .woocommerce-info a, .woocommerce-form-login-toggle .woocommerce-info a { color: var(--ne-accent); } /* Order confirmation (thank-you page) */ .woocommerce .woocommerce-thankyou-order-received { font-family: var(--ne-serif); font-size: 30px; font-weight: 600; color: var(--ne-ink); } .woocommerce ul.woocommerce-thankyou-order-details, .woocommerce ul.order_details { background-color: var(--ne-paper-deep); border: 1px solid var(--ne-line); border-radius: var(--ne-radius); padding: 20px 24px; } .woocommerce ul.order_details li { font-family: var(--ne-sans); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ne-muted); border-right-color: var(--ne-line); } .woocommerce ul.order_details li strong { font-family: var(--ne-sans); font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--ne-ink); } /* Customer details / addresses on the confirmation page */ .woocommerce .woocommerce-customer-details address { border: 1px solid var(--ne-line); border-radius: var(--ne-radius); background-color: #fff; color: var(--ne-ink-soft); padding: 18px 20px; } /* -------------------------------------------------------------------------- 6. MY ACCOUNT Side navigation, content area, orders table, addresses. -------------------------------------------------------------------------- */ /* Navigation — elegant side list with active state */ .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ne-ink); } .woocommerce-MyAccount-navigation li { margin: 0; border-bottom: 1px solid var(--ne-line); } .woocommerce-MyAccount-navigation li a { display: block; font-family: var(--ne-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ne-ink-soft); padding: 13px 4px; text-decoration: none; transition: color 0.2s ease, padding-left 0.2s ease; } .woocommerce-MyAccount-navigation li a:hover { color: var(--ne-accent); } .woocommerce-MyAccount-navigation li.is-active a { color: var(--ne-accent); font-weight: 600; border-left: 2px solid var(--ne-accent); padding-left: 12px; } /* Content area */ .woocommerce-MyAccount-content { color: var(--ne-ink); } .woocommerce-MyAccount-content p { color: var(--ne-ink-soft); } .woocommerce-MyAccount-content a:not(.button) { color: var(--ne-accent); text-decoration: underline; text-underline-offset: 3px; } .woocommerce-MyAccount-content a:not(.button):hover { color: var(--ne-accent-dark); } /* Orders table (table.shop_table base styling from section 4 applies) */ .woocommerce table.shop_table.woocommerce-orders-table .woocommerce-orders-table__cell { color: var(--ne-ink-soft); } .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a { font-weight: 600; color: var(--ne-ink); } .woocommerce table.woocommerce-orders-table .woocommerce-orders-table__cell-order-number a:hover { color: var(--ne-accent); } /* "View" buttons inside order rows — smaller variant of the brand button */ .woocommerce table.woocommerce-orders-table .button, .woocommerce .woocommerce-MyAccount-content table.shop_table .button { font-size: 11.5px; padding: 10px 16px; letter-spacing: 0.12em; } /* Addresses (My Account > Addresses, and edit-address screens) */ .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address-title h3, .woocommerce .col2-set.addresses .woocommerce-Address-title h3 { font-size: 24px; } .woocommerce-MyAccount-content .woocommerce-Addresses address, .woocommerce .col2-set.addresses address { background-color: #fff; border: 1px solid var(--ne-line); border-radius: var(--ne-radius); color: var(--ne-ink-soft); padding: 18px 20px; font-style: normal; } .woocommerce-MyAccount-content .edit { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* Login / register forms on the account page */ .woocommerce form.login, .woocommerce form.register, .woocommerce form.checkout_coupon, .woocommerce-page form.login, .woocommerce-page form.register { border: 1px solid var(--ne-line); border-radius: var(--ne-radius); background-color: #fff; padding: 24px; } .woocommerce .lost_password a { color: var(--ne-accent); } /* Downloads table (purchased PDFs) — buttons inherit brand style */ .woocommerce table.woocommerce-table--order-downloads .woocommerce-MyAccount-downloads-file { font-size: 11.5px; padding: 10px 16px; } /* -------------------------------------------------------------------------- 7. NOTICES Success (ink left border), info, error (accent). Banners stay visible and in flow — color and type changes only. -------------------------------------------------------------------------- */ /* Woo styles notices with bare classes; loading after it, bare classes win */ .woocommerce-message, .woocommerce-info, .woocommerce-error { font-family: var(--ne-sans); font-size: 14px; background-color: var(--ne-paper-deep); color: var(--ne-ink); border-top: 0; border-radius: var(--ne-radius); padding: 16px 20px 16px 24px; } /* Hide Woo's default ::before icon color clash by re-tinting, not removing */ .woocommerce-message::before { color: var(--ne-ink); } .woocommerce-info::before { color: var(--ne-muted); } .woocommerce-error::before { color: var(--ne-accent); } /* Success — ink left border */ .woocommerce-message { border-left: 3px solid var(--ne-ink); } /* Info — neutral line border */ .woocommerce-info { border-left: 3px solid var(--ne-muted); } /* Error — accent border and accent list markers */ .woocommerce-error { border-left: 3px solid var(--ne-accent); } .woocommerce-error li { color: var(--ne-ink); } .woocommerce-error li strong { color: var(--ne-accent); } /* Inline links inside any notice */ .woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--ne-accent); text-decoration: underline; text-underline-offset: 3px; } .woocommerce-message a:hover, .woocommerce-info a:hover, .woocommerce-error a:hover { color: var(--ne-accent-dark); } /* Buttons inside notices (e.g. "View cart") — compact brand button */ .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { font-size: 11.5px; padding: 10px 16px; letter-spacing: 0.12em; } /* Store notice (the site-wide demo/announcement bar) */ .woocommerce-store-notice, p.demo_store { font-family: var(--ne-sans); font-size: 13px; letter-spacing: 0.06em; background-color: var(--ne-ink); color: var(--ne-paper); } .woocommerce-store-notice a, p.demo_store a { color: var(--ne-paper); text-decoration: underline; } /* -------------------------------------------------------------------------- 8. MISC SHOP ELEMENTS Sale badge, breadcrumbs, pagination, star ratings, prices, result count and sorting dropdown. -------------------------------------------------------------------------- */ /* Sale badge — quiet rectangular brand label instead of Woo's round bubble */ .woocommerce span.onsale { background-color: var(--ne-accent); color: var(--ne-paper); font-family: var(--ne-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; min-height: 0; min-width: 0; padding: 7px 12px; border-radius: var(--ne-radius); } /* Breadcrumbs */ .woocommerce .woocommerce-breadcrumb { font-family: var(--ne-sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ne-muted); } .woocommerce .woocommerce-breadcrumb a { color: var(--ne-muted); } .woocommerce .woocommerce-breadcrumb a:hover { color: var(--ne-accent); } /* Pagination */ .woocommerce nav.woocommerce-pagination ul { border: 1px solid var(--ne-line); border-radius: var(--ne-radius); overflow: hidden; } .woocommerce nav.woocommerce-pagination ul li { border-right: 1px solid var(--ne-line); } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { font-family: var(--ne-sans); font-size: 13px; font-weight: 500; color: var(--ne-ink-soft); padding: 10px 16px; } .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover { background-color: var(--ne-paper-deep); color: var(--ne-ink); } .woocommerce nav.woocommerce-pagination ul li span.current { background-color: var(--ne-ink); color: var(--ne-paper); } /* Star ratings */ .woocommerce .star-rating, .woocommerce .star-rating span, .woocommerce p.stars a { color: var(--ne-accent); } /* Prices — serif weight to echo the catalogue cards */ .woocommerce .price, .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price { color: var(--ne-ink); font-weight: 600; } .woocommerce .price .amount, .woocommerce .amount { color: var(--ne-ink); } .woocommerce .price del, .woocommerce div.product p.price del, .woocommerce ul.products li.product .price del { color: var(--ne-muted); opacity: 1; font-weight: 400; } .woocommerce .price ins, .woocommerce div.product p.price ins { text-decoration: none; color: var(--ne-accent); } /* Result count + sorting dropdown above the product grid */ .woocommerce .woocommerce-result-count { font-family: var(--ne-sans); font-size: 13px; color: var(--ne-muted); } .woocommerce .woocommerce-ordering select.orderby { font-family: var(--ne-sans); font-size: 13px; color: var(--ne-ink); background-color: #fff; border: 1px solid var(--ne-line); border-radius: var(--ne-radius); padding: 9px 12px; } .woocommerce .woocommerce-ordering select.orderby:focus { outline: 2px solid var(--ne-accent); outline-offset: 1px; } /* -------------------------------------------------------------------------- END — re-skin only. If something needs hiding or moving, do it in the plugin via Woo hooks/settings, never in this stylesheet. -------------------------------------------------------------------------- */ /* ========================================================================== NATIVE-PAGE CHROME (added by Nocturne Home v1.6.0) Hides the old theme header/footer on cart/checkout/account/wishlist and grounds the injected Nocturne header/footer. ========================================================================== */ body.ne-native-chrome { background: var(--ne-paper, #faf7f2); } body.ne-native-chrome .ehf-header, body.ne-native-chrome header#masthead, body.ne-native-chrome header.site-header, body.ne-native-chrome .elementor-location-header, body.ne-native-chrome #colophon, body.ne-native-chrome .ehf-footer, body.ne-native-chrome .elementor-location-footer { display: none; } body.ne-native-chrome .ne-chrome { font-family: var(--ne-font-body, "Inter", sans-serif); color: var(--ne-ink, #16130f); } /* breathing room between injected header and the page content */ body.ne-native-chrome .ne-chrome--top { margin-bottom: 0; } body.ne-native-chrome .site-main, body.ne-native-chrome .entry-content, body.ne-native-chrome .woocommerce { max-width: 1200px; margin-left: auto; margin-right: auto; } body.ne-native-chrome .page-content > .woocommerce, body.ne-native-chrome .entry-content { padding: 40px 24px 80px; } /* ========================================================================== BLOCKS CART CROSS-SELLS + WISHLIST POLISH (v1.6.2) ========================================================================== */ /* "You may be interested in..." buttons on the blocks cart: no pill shape, no underline, house button style */ body.ne-native-chrome .wp-block-button__link, body.ne-native-chrome .wc-block-components-product-button__button, body.ne-native-chrome .wc-block-grid__product .button { border-radius: 3px; text-decoration: none; background: #16130f; border: 1px solid #16130f; color: #faf7f2; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 20px; } body.ne-native-chrome .wp-block-button__link:hover, body.ne-native-chrome .wc-block-components-product-button__button:hover { background: transparent; color: #16130f; } body.ne-native-chrome .wc-block-grid__product-title, body.ne-native-chrome .wc-block-components-product-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 20px; color: #16130f; text-decoration: none; } /* YITH wishlist table: bigger covers, clear primary vs secondary actions */ body.ne-native-chrome .wishlist_table .product-thumbnail img { width: 84px; max-width: 84px; height: auto; border: 1px solid #e3dcd0; border-radius: 3px; } body.ne-native-chrome .wishlist_table td, body.ne-native-chrome .wishlist_table th { vertical-align: middle; border-color: #e3dcd0; } body.ne-native-chrome .wishlist_table .product-name a { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 20px; } body.ne-native-chrome .wishlist_table .add_to_cart.button, body.ne-native-chrome .wishlist_table a.add_to_cart_button { background: #16130f; border: 1px solid #16130f; color: #faf7f2; border-radius: 3px; text-decoration: none; } body.ne-native-chrome .wishlist_table .remove_from_wishlist, body.ne-native-chrome .wishlist_table a.remove_from_wishlist { display: inline-block; background: transparent; border: 1px solid #9a9183; color: #3a352e; border-radius: 3px; padding: 10px 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; opacity: 1; } body.ne-native-chrome .wishlist_table .remove_from_wishlist:hover { border-color: #8e2f2a; color: #8e2f2a; } /* ========================================================================== MY ACCOUNT HARDENING (v1.6.3) — out-rank Elementor widget & theme styles ========================================================================== */ body.ne-native-chrome .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid #16130f; } body.ne-native-chrome .woocommerce-MyAccount-navigation ul li { margin: 0; border-bottom: 1px solid #e3dcd0; background: transparent; } body.ne-native-chrome .woocommerce-MyAccount-navigation ul li a { display: block; padding: 13px 4px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #3a352e; text-decoration: none; background: transparent; } body.ne-native-chrome .woocommerce-MyAccount-navigation ul li a:hover { color: #8e2f2a; } body.ne-native-chrome .woocommerce-MyAccount-navigation ul li.is-active a, body.ne-native-chrome .woocommerce-MyAccount-navigation ul li.is-active { color: #8e2f2a; background: transparent; } body.ne-native-chrome .woocommerce-MyAccount-navigation ul li.is-active a { border-left: 2px solid #8e2f2a; padding-left: 10px; } /* Notices inside account/cart content (e.g. "No downloads available yet") */ body.ne-native-chrome .woocommerce-MyAccount-content .woocommerce-message, body.ne-native-chrome .woocommerce-MyAccount-content .woocommerce-info, body.ne-native-chrome .woocommerce-info, body.ne-native-chrome .woocommerce-message { background: #f3eee5; border-top: 0; border-left: 3px solid #16130f; color: #3a352e; font-family: "Inter", sans-serif; border-radius: 3px; } body.ne-native-chrome .woocommerce-info::before, body.ne-native-chrome .woocommerce-message::before { color: #8e2f2a; } body.ne-native-chrome .woocommerce-info .button, body.ne-native-chrome .woocommerce-message .button, body.ne-native-chrome .woocommerce-MyAccount-content .button { background: #16130f; border: 1px solid #16130f; color: #faf7f2; border-radius: 3px; font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; } body.ne-native-chrome .woocommerce-info .button:hover, body.ne-native-chrome .woocommerce-MyAccount-content .button:hover { background: transparent; color: #16130f; } body.ne-native-chrome .woocommerce-MyAccount-content a:not(.button) { color: #8e2f2a; } body.ne-native-chrome .woocommerce-MyAccount-content, body.ne-native-chrome .woocommerce-MyAccount-content p, body.ne-native-chrome .woocommerce-MyAccount-content td, body.ne-native-chrome .woocommerce-MyAccount-content th { font-family: "Inter", sans-serif; color: #3a352e; } /* ========================================================================== POLICY / TEXT PAGES (v1.7.2) — readable document layout under the chrome ========================================================================== */ body.ne-native-chrome.page .entry-content, body.ne-native-chrome.page .page-content { max-width: 740px; margin: 0 auto; padding: 48px 24px 90px; font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.75; color: #3a352e; } body.ne-native-chrome.page .entry-content h1, body.ne-native-chrome.page .entry-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 42px; color: #16130f; max-width: 740px; margin: 40px auto 0; padding: 0 24px; } body.ne-native-chrome.page .entry-content h2, body.ne-native-chrome.page .entry-content h3 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; color: #16130f; margin-top: 2em; } body.ne-native-chrome.page .entry-content h2 { font-size: 28px; } body.ne-native-chrome.page .entry-content h3 { font-size: 22px; } body.ne-native-chrome.page .entry-content a { color: #8e2f2a; } body.ne-native-chrome.page .entry-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; } body.ne-native-chrome.page .entry-content th, body.ne-native-chrome.page .entry-content td { border: 0; border-bottom: 1px solid #e3dcd0; padding: 10px 12px 10px 0; text-align: left; vertical-align: top; } body.ne-native-chrome.page .entry-content th { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6f685e; } body.ne-native-chrome.page .entry-content blockquote { border-left: 3px solid #8e2f2a; margin: 1.2em 0; padding: 4px 0 4px 18px; color: #6f685e; } /* Policy document H1 (injected by site-hygiene.php) */ body.ne-native-chrome.page .ne-doc-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 42px; line-height: 1.1; color: #16130f; margin: 0 0 24px; } /* H1 band on native pages (cart, checkout, account, wishlist, policies) */ body.ne-native-chrome .ne-chrome-title { background: #faf7f2; border-bottom: 1px solid #e3dcd0; } body.ne-native-chrome .ne-chrome-title .ne-wrap { max-width: 1200px; margin: 0 auto; padding: 34px 24px 26px; } body.ne-native-chrome .ne-chrome-title h1 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 40px; line-height: 1.1; color: #16130f; margin: 0; }