/* ========================================================================== eBT Neo — WooCommerce overrides Targets WC default selectors only. No template files are overridden. ========================================================================== */ /* Shared WC container width IMPORTANT: :not(body) prevents this from constraining the element itself when WP adds .woocommerce-page to . Without it, the entire viewport is capped at --neu-container (1280px). */ .woocommerce:not(body), .woocommerce-page:not(body) { max-width: var(--neu-container); margin: 0 auto; padding: 2rem 1.5rem; } @media (min-width: 768px) { .woocommerce:not(body), .woocommerce-page:not(body) { padding: 3rem 2.5rem; } } /* Account + Checkout use the same container width as every other page */ /* ---- Hide v1 SoloAdBiz clutter on cart/checkout pages (fulfillment-only on admin) ---- */ .woocommerce-cart .soloadbizwc_tbl, .woocommerce-cart [class*="soloadbizwc"], .woocommerce-checkout .soloadbizwc_tbl, .woocommerce-checkout [class*="soloadbizwc"] { display: none !important; } /* ---- Cart item metadata display (Niche, Tier, Clicks, URL) ---- */ .woocommerce table.cart dl.variation, .woocommerce table.cart .wc-item-meta { list-style: none; padding: 0; margin: 0.5rem 0 0; } .woocommerce table.cart dl.variation dt, .woocommerce table.cart .wc-item-meta li > span:first-child, .woocommerce table.cart dl.variation .variation-Niche, .woocommerce table.cart dl.variation .variation-TrafficTier { font-family: var(--neu-font-display); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--neu-muted); } .woocommerce table.cart dl.variation dd, .woocommerce table.cart .wc-item-meta li > span:last-child { font-size: 0.875rem; color: var(--neu-fg); margin: 0 0 0.25rem; } .woocommerce table.cart dl.variation dd p { margin: 0; } /* Price /click label */ .woocommerce table.cart .product-price small { font-size: 0.75rem; color: var(--neu-muted); font-weight: 400; } /* Notices ========================================================================== */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { background: var(--neu-bg); border: none; border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); padding: 1.25rem 1.5rem 1.25rem 3rem; color: var(--neu-fg); font-family: var(--neu-font-body); position: relative; margin-bottom: 1.5rem; list-style: none; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { top: 1.25rem; left: 1.25rem; color: var(--neu-accent); } .woocommerce-error { color: var(--neu-danger); } .woocommerce-error::before { color: var(--neu-danger); } .woocommerce-message { color: var(--neu-success); } .woocommerce-message::before { color: var(--neu-success); } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button { float: right; background: var(--neu-bg); color: var(--neu-fg); border: none; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-out-sm); padding: 0.5rem 1rem; font-weight: 600; } /* Product archive (shop grid) ========================================================================== */ .woocommerce ul.products { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 0; margin: 2rem 0 !important; list-style: none; } @media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } } .woocommerce ul.products li.product { width: 100% !important; float: none !important; margin: 0 !important; padding: 2rem !important; background: var(--neu-bg); border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); display: flex; flex-direction: column; transition: transform 300ms ease-out, box-shadow 300ms ease-out; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--neu-shadow-out-hover); } .woocommerce ul.products li.product a { text-decoration: none; color: var(--neu-fg); } .woocommerce ul.products li.product img { margin: 0 0 1.25rem; border-radius: calc(var(--neu-radius-card) - 12px); box-shadow: var(--neu-shadow-in-sm); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--neu-font-display) !important; font-weight: 700 !important; font-size: 1.25rem !important; color: var(--neu-fg) !important; padding: 0 !important; margin: 0 0 0.5rem !important; } .woocommerce ul.products li.product .price { font-family: var(--neu-font-display); font-weight: 800; color: var(--neu-accent); font-size: 1.375rem; margin-bottom: 1rem; } .woocommerce ul.products li.product .price del { color: var(--neu-muted); font-weight: 500; } .woocommerce ul.products li.product .price ins { text-decoration: none; } .woocommerce ul.products li.product .onsale, .woocommerce span.onsale { position: absolute; top: 1rem; right: 1rem; min-height: auto; min-width: auto; padding: 0.375rem 0.875rem; background: var(--neu-accent); color: #fff; border-radius: 9999px; font-family: var(--neu-font-display); font-weight: 700; font-size: 0.75rem; line-height: 1; margin: 0; box-shadow: var(--neu-shadow-out-sm); } /* Result count + ordering select */ .woocommerce .woocommerce-result-count { color: var(--neu-muted); font-size: 0.875rem; } .woocommerce .woocommerce-ordering select { background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm); border: none; border-radius: var(--neu-radius-btn); padding: 0.625rem 1rem; font-family: var(--neu-font-body); } /* Buttons — site-wide WC button override */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #place_order, .woocommerce ul.products li.product .button { background: var(--neu-bg) !important; color: var(--neu-fg) !important; border: none !important; border-radius: var(--neu-radius-btn) !important; box-shadow: var(--neu-shadow-out) !important; font-family: var(--neu-font-display) !important; font-weight: 700 !important; padding: 0.875rem 1.75rem !important; text-shadow: none !important; transition: transform 300ms ease, box-shadow 300ms ease !important; text-transform: none !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce ul.products li.product .button:hover { transform: translateY(-1px); box-shadow: var(--neu-shadow-out-hover) !important; color: var(--neu-fg) !important; } .woocommerce a.button:active, .woocommerce button.button:active { transform: translateY(1px); box-shadow: var(--neu-shadow-in) !important; } .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #place_order, .woocommerce ul.products li.product .button.add_to_cart_button { background: var(--neu-accent) !important; color: #fff !important; } .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce #place_order:hover { color: #fff !important; background: var(--neu-accent-light) !important; } /* Single product page ========================================================================== */ .woocommerce div.product { background: var(--neu-bg); padding: 2.5rem; border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); } .woocommerce div.product .product_title { font-family: var(--neu-font-display); font-weight: 800; color: var(--neu-fg); font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 1rem; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--neu-accent); font-family: var(--neu-font-display); font-weight: 800; font-size: 2rem; } .woocommerce div.product .woocommerce-product-rating { margin-bottom: 1.25rem; } .woocommerce div.product form.cart { margin-top: 1.5rem; padding: 1.5rem; background: var(--neu-bg); border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-in-sm); } .woocommerce div.product form.cart .variations td { padding: 0.5rem 0; } .woocommerce div.product form.cart .variations select { background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm); border: none; border-radius: var(--neu-radius-btn); padding: 0.625rem 1rem; } .woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 2rem 0 0; border: none; display: flex; gap: 0.5rem; flex-wrap: wrap; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--neu-bg); border: none !important; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-out-sm); margin: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { padding: 0.75rem 1.5rem !important; font-family: var(--neu-font-display); font-weight: 700; color: var(--neu-fg); text-decoration: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { box-shadow: var(--neu-shadow-in-sm); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--neu-accent); } .woocommerce div.product .woocommerce-tabs .panel { margin-top: 1.5rem; padding: 1.5rem; background: var(--neu-bg); border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-in-sm); } /* Quantity input */ .woocommerce .quantity .qty { width: 5rem; padding: 0.625rem 0.75rem; background: var(--neu-bg); border: none; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-in-sm); text-align: center; font-family: var(--neu-font-display); font-weight: 700; } /* Stock badges */ .woocommerce div.product .stock { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; background: var(--neu-bg); border-radius: 9999px; box-shadow: var(--neu-shadow-out-sm); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .woocommerce div.product .in-stock { color: var(--neu-success); } .woocommerce div.product .out-of-stock { color: var(--neu-danger); } /* Cart page ========================================================================== */ .woocommerce-cart table.cart, .woocommerce-cart-form table.cart, .woocommerce table.shop_table { background: var(--neu-bg); border: none; border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border: none; padding: 1.25rem; vertical-align: middle; } .woocommerce table.shop_table thead th { font-family: var(--neu-font-display); font-weight: 700; color: var(--neu-fg); background: transparent; box-shadow: var(--neu-shadow-in-sm); } .woocommerce table.shop_table tbody tr + tr td { border-top: 1px solid rgba(163, 177, 198, 0.25); } .woocommerce table.shop_table .product-remove a.remove { color: var(--neu-danger) !important; font-weight: 700; font-size: 1.25rem; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--neu-bg); box-shadow: var(--neu-shadow-out-sm); } .woocommerce table.shop_table .product-remove a.remove:hover { background: var(--neu-bg) !important; box-shadow: var(--neu-shadow-in-sm); } /* Cart product thumbnails — clean, rounded, inset shadow */ .woocommerce table.cart .product-thumbnail { width: 80px; padding: 0.75rem 0.5rem 0.75rem 1.25rem !important; } .woocommerce table.cart .product-thumbnail a { display: block; } .woocommerce table.cart .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-in-sm); border: none; } .woocommerce table.cart .product-name { font-family: var(--neu-font-display); font-weight: 600; color: var(--neu-fg); } .woocommerce table.cart .product-name a { color: var(--neu-fg); text-decoration: none; } .woocommerce table.cart .product-name a:hover { color: var(--neu-accent); } .woocommerce table.cart .product-name dl.variation { font-family: var(--neu-font-body); font-size: 0.8125rem; color: var(--neu-muted); margin: 0.5rem 0 0; } .woocommerce table.cart .product-name dl.variation dt { font-weight: 600; margin: 0.25rem 0 0; float: left; clear: left; } .woocommerce table.cart .product-name dl.variation dd { margin: 0.25rem 0 0 0.5rem; } .woocommerce table.cart .product-price, .woocommerce table.cart .product-subtotal { font-family: var(--neu-font-display); font-weight: 700; font-variant-numeric: tabular-nums; } /* Quantity input — neomorphism inset */ .woocommerce table.cart .quantity .qty { background: var(--neu-bg); border: none; border-radius: var(--neu-radius-chip); box-shadow: var(--neu-shadow-in-sm); padding: 0.5rem 0.75rem; width: 72px; text-align: center; font-weight: 600; font-family: var(--neu-font-display); } /* Update / Coupon row */ .woocommerce-cart .actions { padding: 1.25rem !important; } .woocommerce-cart .actions .coupon .input-text { background: var(--neu-bg) !important; border: none !important; border-radius: var(--neu-radius-btn) !important; box-shadow: var(--neu-shadow-in) !important; padding: 0.75rem 1rem !important; font-size: 0.9375rem; } .woocommerce-cart .actions .coupon .input-text:focus { box-shadow: var(--neu-shadow-in-deep), 0 0 0 2px var(--neu-bg), 0 0 0 4px var(--neu-accent) !important; } .woocommerce-cart .actions .button, .woocommerce-cart .cart-collaterals .button { background: var(--neu-bg) !important; color: var(--neu-fg) !important; border: none !important; border-radius: var(--neu-radius-btn) !important; box-shadow: var(--neu-shadow-out-sm) !important; padding: 0.75rem 1.5rem !important; font-family: var(--neu-font-display) !important; font-weight: 600 !important; text-shadow: none !important; } .woocommerce-cart .actions .button:hover, .woocommerce-cart .cart-collaterals .button:hover { box-shadow: var(--neu-shadow-out) !important; color: var(--neu-accent) !important; } .woocommerce-cart .cart-collaterals .checkout-button { background: var(--neu-accent) !important; color: #fff !important; box-shadow: 6px 6px 12px rgba(108, 99, 255, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.6) !important; } .woocommerce-cart .cart-collaterals .checkout-button:hover { background: #5a51ff !important; } /* Mobile cart — stack columns */ @media (max-width: 767px) { .woocommerce table.cart .product-thumbnail { display: none; } .woocommerce table.cart thead { display: none; } .woocommerce table.cart tbody tr { display: block; padding: 1rem; margin-bottom: 0.5rem; } .woocommerce table.cart tbody td { display: block; border: none !important; padding: 0.25rem 0 !important; } .woocommerce table.cart tbody td::before { content: attr(data-title); display: inline-block; font-family: var(--neu-font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--neu-muted); margin-right: 0.75rem; min-width: 80px; } } .woocommerce-cart .cart-collaterals .cart_totals { background: var(--neu-bg); padding: 2rem; border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); } .woocommerce-cart .cart-collaterals .cart_totals h2 { font-family: var(--neu-font-display); margin: 0 0 1rem; font-size: 1.5rem; } .woocommerce-cart .cart-collaterals .cart_totals table { background: transparent; box-shadow: none; } .woocommerce .coupon input[type="text"] { background: var(--neu-bg); box-shadow: var(--neu-shadow-in-sm); border: none; border-radius: var(--neu-radius-btn); padding: 0.75rem 1rem; } /* Checkout ========================================================================== */ /* Widen the prose container so billing + order review have room side by side */ .woocommerce-checkout .neu-page-content, .woocommerce-checkout .neu-prose { max-width: 100% !important; width: 100% !important; } /* IMPORTANT: force display:block to kill any grid set by WC Blocks or cached CSS. */ .woocommerce-checkout form.checkout, .woocommerce-checkout form.checkout.woocommerce-checkout { display: block !important; } .woocommerce-checkout form.checkout::after { content: ""; display: table; clear: both; } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { width: 100% !important; float: none !important; padding: 2rem !important; background: var(--neu-bg); border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); margin-bottom: 2rem; } .woocommerce-checkout h3 { font-family: var(--neu-font-display); margin: 0 0 1.25rem; font-size: 1.375rem; } .woocommerce form .form-row { padding: 0; margin-bottom: 1rem; } .woocommerce form .form-row label { display: block; margin-bottom: 0.5rem; font-family: var(--neu-font-display); font-weight: 600; font-size: 0.875rem; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { width: 100%; background: var(--neu-bg); border: none; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-in-sm); padding: 0.875rem 1rem; font-family: var(--neu-font-body); font-size: 1rem; color: var(--neu-fg); } .woocommerce form .form-row .select2-container .select2-selection--single { height: auto; background: var(--neu-bg); border: none; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-in-sm); padding: 0.5rem 0.75rem; } .woocommerce form .form-row .select2-container .select2-selection__rendered { color: var(--neu-fg); line-height: 1.5; } .woocommerce form .form-row .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); } @media (min-width: 768px) { .woocommerce-checkout #customer_details { width: 55% !important; float: left !important; } .woocommerce-checkout #order_review_heading { width: 40% !important; float: right !important; margin-top: 0; } .woocommerce-checkout #order_review { width: 40% !important; float: right !important; } } .woocommerce-checkout #order_review_heading { font-family: var(--neu-font-display); font-weight: 800; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 2rem 0 0.75rem; } .woocommerce-checkout #order_review { background: var(--neu-bg); border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); padding: 2rem; } .woocommerce-checkout #order_review table.shop_table { background: transparent !important; box-shadow: none !important; margin: 0; } /* Hide leftover from previous PHP-hook build */ .ebt-checkout-review-top { display: none !important; } .woocommerce-checkout #payment { background: var(--neu-bg) !important; border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-in-deep); padding: 2rem; margin-top: 1.5rem; } .woocommerce-checkout #payment ul.payment_methods { border: none; padding: 0; margin: 0 0 1.25rem; list-style: none; } .woocommerce-checkout #payment ul.payment_methods li { background: var(--neu-bg); padding: 1rem 1.25rem; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-out-sm); margin-bottom: 0.75rem; } .woocommerce-checkout #payment div.payment_box { background: var(--neu-bg) !important; box-shadow: var(--neu-shadow-in-sm); border-radius: var(--neu-radius-btn); padding: 1rem 1.25rem; color: var(--neu-muted); margin-top: 0.75rem; } .woocommerce-checkout #payment div.payment_box::before { display: none; } /* My Account ========================================================================== */ /* --- Full-width dashboard portal (LOGGED IN only) --- Widen ONLY the main content area, NOT the header/footer. The containment chain inside
is: main.neu-main.neu-section > div.neu-container > div.woocommerce */ /* Only bust the .neu-prose 896px readability cap — let it fill the parent container. The container itself stays at --neu-container (1280px), matching the header. */ body.logged-in.woocommerce-account .neu-page-content, body.logged-in.woocommerce-account .neu-prose { max-width: 100% !important; } body.logged-in.woocommerce-account .woocommerce::after { content: ""; display: table; clear: both; } /* Hide the page title on logged-in account pages — the sidebar provides orientation */ body.logged-in.woocommerce-account .entry-title, body.logged-in.woocommerce-account h1.wp-block-post-title, body.logged-in.woocommerce-account .neu-section__title { display: none !important; } /* Sidebar: mobile-first (stacks above content) */ .woocommerce-account .woocommerce-MyAccount-navigation { width: 100% !important; float: none !important; margin-bottom: 1.5rem; } /* Desktop sidebar: fixed 240px, sticky. IMPORTANT: no space between .logged-in and .woocommerce-account — both are classes on the element itself, not parent > child. */ @media (min-width: 768px) { body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation { width: 240px !important; float: left !important; position: sticky; top: 80px; } body.logged-in.woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 270px) !important; float: right !important; } } /* Sidebar nav items */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; background: var(--neu-bg); border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-out-sm); padding: 0.875rem 1.25rem; color: var(--neu-fg); text-decoration: none; font-family: var(--neu-font-display); font-weight: 600; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { box-shadow: var(--neu-shadow-out); color: var(--neu-accent); } .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { box-shadow: var(--neu-shadow-in-sm); color: var(--neu-accent); } /* "Order Traffic" CTA item in My Account nav — violet accent to stand out */ .woocommerce-account .woocommerce-MyAccount-navigation ul li.ebt-nav-cta a { background: var(--neu-accent) !important; color: #fff !important; box-shadow: 4px 4px 10px rgba(108, 99, 255, 0.25), -3px -3px 8px rgba(255, 255, 255, 0.5) !important; font-weight: 700; text-align: center; } .woocommerce-account .woocommerce-MyAccount-navigation ul li.ebt-nav-cta a:hover { background: #5a51ff !important; transform: translateY(-1px); } /* Content panel */ .woocommerce-account .woocommerce-MyAccount-content { background: var(--neu-bg); border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); padding: 2rem; transition: opacity 150ms ease; } .woocommerce-account .woocommerce-MyAccount-content.is-loading { opacity: 0.4; pointer-events: none; } .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { margin-top: 0; } /* Dashboard greeting + intro paragraphs */ .woocommerce-account .woocommerce-MyAccount-content p { color: var(--neu-fg); line-height: 1.65; margin: 0 0 1rem; } .woocommerce-account .woocommerce-MyAccount-content p a { color: var(--neu-accent); font-weight: 600; text-decoration: none; } .woocommerce-account .woocommerce-MyAccount-content p a:hover { text-decoration: underline; } .woocommerce-account .woocommerce-MyAccount-content mark { background: transparent; color: var(--neu-accent); font-weight: 700; } /* Empty states ("You haven't placed any orders yet") */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info { background: var(--neu-bg) !important; border: none !important; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-in-sm); padding: 1.25rem 1.5rem; color: var(--neu-fg) !important; font-size: 0.95rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before { display: none !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message .button { background: var(--neu-accent) !important; color: #fff !important; box-shadow: 4px 4px 10px rgba(108, 99, 255, 0.25), -3px -3px 8px rgba(255, 255, 255, 0.5) !important; border: none !important; border-radius: var(--neu-radius-btn) !important; padding: 0.625rem 1.25rem !important; font-weight: 600 !important; font-family: var(--neu-font-display) !important; text-shadow: none !important; } /* ===== Orders table ===== */ .woocommerce-account table.shop_table, .woocommerce-account table.my_account_orders, .woocommerce-account table.woocommerce-orders-table { width: 100%; border-collapse: separate; border-spacing: 0 0.75rem; background: transparent; border: none; box-shadow: none; } .woocommerce-account table.shop_table thead th, .woocommerce-account table.my_account_orders thead th, .woocommerce-account table.woocommerce-orders-table thead th { background: transparent; color: var(--neu-muted); font-family: var(--neu-font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0 1rem 0.5rem; text-align: left; border: none; } .woocommerce-account table.shop_table tbody tr, .woocommerce-account table.my_account_orders tbody tr, .woocommerce-account table.woocommerce-orders-table tbody tr { background: var(--neu-bg); } .woocommerce-account table.shop_table tbody td, .woocommerce-account table.my_account_orders tbody td, .woocommerce-account table.woocommerce-orders-table tbody td { background: var(--neu-bg); padding: 1rem 1.25rem; color: var(--neu-fg); font-size: 0.95rem; border: none; vertical-align: middle; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(163,177,198,0.15); } .woocommerce-account table.shop_table tbody td:first-child, .woocommerce-account table.my_account_orders tbody td:first-child, .woocommerce-account table.woocommerce-orders-table tbody td:first-child { border-top-left-radius: var(--neu-radius-btn); border-bottom-left-radius: var(--neu-radius-btn); box-shadow: -5px 5px 10px rgba(163, 177, 198, 0.5), inset 3px 3px 6px rgba(255, 255, 255, 0.6); } .woocommerce-account table.shop_table tbody td:last-child, .woocommerce-account table.my_account_orders tbody td:last-child, .woocommerce-account table.woocommerce-orders-table tbody td:last-child { border-top-right-radius: var(--neu-radius-btn); border-bottom-right-radius: var(--neu-radius-btn); box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.5), inset -3px 3px 6px rgba(255, 255, 255, 0.5); } .woocommerce-account table.shop_table tbody td a.button, .woocommerce-account table.my_account_orders tbody td a.button, .woocommerce-account table.woocommerce-orders-table tbody td a.button, .woocommerce-account a.woocommerce-button.view, .woocommerce-account a.woocommerce-button.pay, .woocommerce-account a.woocommerce-button.cancel { background: var(--neu-bg) !important; color: var(--neu-fg) !important; box-shadow: var(--neu-shadow-out-sm) !important; border: none !important; border-radius: var(--neu-radius-btn) !important; padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; font-weight: 600 !important; font-family: var(--neu-font-display) !important; text-shadow: none !important; margin: 0 0.25rem 0.25rem 0 !important; display: inline-block; } .woocommerce-account table.shop_table tbody td a.button:hover, .woocommerce-account a.woocommerce-button:hover { box-shadow: var(--neu-shadow-out) !important; color: var(--neu-accent) !important; } .woocommerce-account a.woocommerce-button.pay { background: var(--neu-accent) !important; color: #fff !important; box-shadow: 4px 4px 10px rgba(108, 99, 255, 0.25), -3px -3px 8px rgba(255, 255, 255, 0.5) !important; } /* Order status chips in the table */ .woocommerce-account table .woocommerce-orders-table__cell-order-status { font-weight: 600; color: var(--neu-muted); text-transform: capitalize; } /* Pagination */ .woocommerce-account .woocommerce-pagination, .woocommerce-account .woocommerce-Pagination { margin-top: 1.5rem; text-align: center; } .woocommerce-account .woocommerce-pagination ul, .woocommerce-account .woocommerce-Pagination ul { display: inline-flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; border: none; } .woocommerce-account .woocommerce-pagination ul li, .woocommerce-account .woocommerce-Pagination ul li { border: none; margin: 0; display: inline-block; } .woocommerce-account .woocommerce-pagination ul li a, .woocommerce-account .woocommerce-pagination ul li span, .woocommerce-account .woocommerce-Pagination ul li a, .woocommerce-account .woocommerce-Pagination ul li span { background: var(--neu-bg) !important; box-shadow: var(--neu-shadow-out-sm); border-radius: var(--neu-radius-btn); padding: 0.5rem 0.875rem; font-weight: 600; color: var(--neu-fg); min-width: 40px; display: inline-block; text-decoration: none; } .woocommerce-account .woocommerce-pagination ul li span.current { box-shadow: var(--neu-shadow-in-sm); color: var(--neu-accent); } /* ===== View Order page ===== */ .woocommerce-account .woocommerce-order-details, .woocommerce-account .woocommerce-customer-details { background: var(--neu-bg); border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); padding: 1.75rem 2rem; margin-bottom: 1.5rem; } .woocommerce-account .woocommerce-order-details h2, .woocommerce-account .woocommerce-customer-details h2 { font-family: var(--neu-font-display); font-size: 1.125rem; font-weight: 800; margin: 0 0 1rem; color: var(--neu-fg); text-transform: uppercase; letter-spacing: 0.05em; } .woocommerce-account .woocommerce-order-details table.shop_table tbody td, .woocommerce-account .woocommerce-order-details table.shop_table tfoot td { box-shadow: none; border-bottom: 1px solid rgba(163, 177, 198, 0.15); background: transparent; } .woocommerce-account .woocommerce-order-details table.shop_table tfoot tr:last-child td { border-bottom: none; font-weight: 700; color: var(--neu-accent); font-size: 1.125rem; } /* View-order: order status + header info */ .woocommerce-account .woocommerce-order-details table.shop_table { background: transparent !important; box-shadow: none !important; border: none !important; width: 100%; } .woocommerce-account .woocommerce-order-details table.shop_table thead th { background: transparent; box-shadow: var(--neu-shadow-in-sm); font-family: var(--neu-font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--neu-muted); padding: 0.75rem 1rem; border: none; } .woocommerce-account .woocommerce-order-details table.shop_table tbody td { padding: 1rem; vertical-align: top; } /* Item metadata in view-order (Niche, Traffic Tier, Clicks, Landing Page, v1 URLs) */ .woocommerce-account .woocommerce-order-details .wc-item-meta, .woocommerce-account .woocommerce-order-details dl.variation { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.8125rem; } .woocommerce-account .woocommerce-order-details .wc-item-meta li, .woocommerce-account .woocommerce-order-details dl.variation dt, .woocommerce-account .woocommerce-order-details dl.variation dd { display: inline; margin: 0; } .woocommerce-account .woocommerce-order-details .wc-item-meta li strong, .woocommerce-account .woocommerce-order-details dl.variation dt { font-family: var(--neu-font-display); font-weight: 600; color: var(--neu-muted); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; } .woocommerce-account .woocommerce-order-details .wc-item-meta li p, .woocommerce-account .woocommerce-order-details dl.variation dd p { display: inline; margin: 0; color: var(--neu-fg); } /* Order info summary (order number, date, status, total) shown as pills */ .woocommerce-account .woocommerce-order-details + .woocommerce-order-overview, .woocommerce-account mark.order-status { background: var(--neu-bg) !important; box-shadow: var(--neu-shadow-out-sm); border-radius: var(--neu-radius-btn); padding: 0.375rem 0.875rem; font-weight: 600; color: var(--neu-accent); } /* Customer details (billing + shipping on view-order page) */ .woocommerce-account .woocommerce-customer-details address { font-style: normal; line-height: 1.65; color: var(--neu-fg); } .woocommerce-account .woocommerce-customer-details .woocommerce-column { margin-bottom: 1.5rem; } .woocommerce-account .woocommerce-customer-details .woocommerce-column h2 { font-size: 0.9375rem; } /* v1 SoloAdBiz URL display on view-order (Traffic Link + ClickMagic link) */ .woocommerce-account .soloadbizwc_tbl { width: 100% !important; margin-top: 0.75rem; } .woocommerce-account .soloadbizwc_tbl td { padding: 0.25rem 0 !important; font-size: 0.875rem; } .woocommerce-account .soloadbizwc_tbl label { font-size: 0.8125rem; color: var(--neu-muted); font-weight: 600; } .woocommerce-account .soloadbizwc_tbl a { color: var(--neu-accent); } /* ===== Addresses ===== */ .woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } } .woocommerce-account .woocommerce-Address { background: var(--neu-bg); border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); padding: 1.75rem 2rem; } .woocommerce-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .woocommerce-account .woocommerce-Address-title h2, .woocommerce-account .woocommerce-Address-title h3 { font-family: var(--neu-font-display); font-size: 1rem; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; color: var(--neu-fg); } .woocommerce-account .woocommerce-Address-title .edit { background: var(--neu-bg) !important; box-shadow: var(--neu-shadow-out-sm) !important; border-radius: var(--neu-radius-btn) !important; padding: 0.375rem 0.875rem !important; color: var(--neu-fg) !important; font-size: 0.8125rem !important; font-weight: 600 !important; text-decoration: none !important; } .woocommerce-account .woocommerce-Address-title .edit:hover { box-shadow: var(--neu-shadow-out) !important; color: var(--neu-accent) !important; } .woocommerce-account .woocommerce-Address address { font-style: normal; color: var(--neu-fg); line-height: 1.6; font-size: 0.95rem; } /* ===== Edit Account form ===== */ .woocommerce-account .woocommerce-EditAccountForm fieldset { background: var(--neu-bg); border: none; border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-in-sm); padding: 1.5rem 1.75rem; margin: 2rem 0 1.5rem; } .woocommerce-account .woocommerce-EditAccountForm fieldset legend { font-family: var(--neu-font-display); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--neu-muted); padding: 0 0.5rem; } .woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row label, .woocommerce-account form .form-row label { display: block; font-family: var(--neu-font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--neu-muted); margin-bottom: 0.5rem; } .woocommerce-account form .form-row input.input-text, .woocommerce-account form .form-row input[type="text"], .woocommerce-account form .form-row input[type="email"], .woocommerce-account form .form-row input[type="password"], .woocommerce-account form .form-row input[type="tel"], .woocommerce-account form .form-row select, .woocommerce-account form .form-row textarea { background: var(--neu-bg); border: none; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-in); padding: 0.875rem 1rem; font-size: 1rem; color: var(--neu-fg); font-family: var(--neu-font-body); width: 100%; box-sizing: border-box; outline: none; transition: box-shadow 200ms ease; } .woocommerce-account form .form-row input:focus, .woocommerce-account form .form-row select:focus, .woocommerce-account form .form-row textarea:focus { box-shadow: var(--neu-shadow-in-deep), 0 0 0 2px var(--neu-bg), 0 0 0 4px var(--neu-accent); } .woocommerce-account form .form-row span.description { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--neu-muted); font-style: italic; } .woocommerce-account form p.form-row { margin-bottom: 1.25rem; } /* Save button */ .woocommerce-account form .button, .woocommerce-account form button[type="submit"], .woocommerce-account form input[type="submit"] { background: var(--neu-accent) !important; color: #fff !important; border: none !important; border-radius: var(--neu-radius-btn) !important; box-shadow: 6px 6px 12px rgba(108, 99, 255, 0.25), -4px -4px 10px rgba(255, 255, 255, 0.6) !important; padding: 0.875rem 1.75rem !important; font-family: var(--neu-font-display) !important; font-size: 0.9375rem !important; font-weight: 700 !important; letter-spacing: -0.005em !important; text-shadow: none !important; cursor: pointer; transition: transform 120ms ease, box-shadow 200ms ease, background 120ms ease; } .woocommerce-account form .button:hover, .woocommerce-account form button[type="submit"]:hover, .woocommerce-account form input[type="submit"]:hover { background: #5a51ff !important; transform: translateY(-1px); } .woocommerce-account form .button:active, .woocommerce-account form button[type="submit"]:active, .woocommerce-account form input[type="submit"]:active { transform: translateY(0.5px); } /* ===== Login / Register forms (shown at /my-account/ when logged out) ===== */ .woocommerce-account .u-columns.woocommerce-Columns--2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .woocommerce-account .u-columns.woocommerce-Columns--2 { grid-template-columns: 1fr 1fr; } } .woocommerce-account .u-column1, .woocommerce-account .u-column2 { float: none !important; width: 100% !important; } .woocommerce-account form.woocommerce-form-login, .woocommerce-account form.woocommerce-form-register, .woocommerce-account form.woocommerce-ResetPassword { background: var(--neu-bg) !important; border: none !important; border-radius: var(--neu-radius-card) !important; box-shadow: var(--neu-shadow-out) !important; padding: 2rem !important; } .woocommerce-account h2 { font-family: var(--neu-font-display); font-weight: 800; color: var(--neu-fg); margin: 0 0 1.25rem; } .woocommerce-account form.woocommerce-form-login .lost_password, .woocommerce-account form.woocommerce-ResetPassword .lost_password { text-align: center; margin-top: 1rem; } .woocommerce-account form.woocommerce-form-login .lost_password a, .woocommerce-account form.woocommerce-ResetPassword .lost_password a { color: var(--neu-accent); text-decoration: none; font-weight: 600; font-size: 0.875rem; } .woocommerce-account form.woocommerce-form-login .lost_password a:hover { text-decoration: underline; } /* Remember me checkbox + label */ .woocommerce-account form.woocommerce-form-login label.woocommerce-form-login__rememberme, .woocommerce-account form label.checkbox { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--neu-muted); } .woocommerce-account form input[type="checkbox"] { appearance: none; -webkit-appearance: none; background: var(--neu-bg); border: none; border-radius: 5px; box-shadow: var(--neu-shadow-in-sm); width: 18px; height: 18px; margin: 0; cursor: pointer; position: relative; } .woocommerce-account form input[type="checkbox"]:checked { background: var(--neu-accent); box-shadow: var(--neu-shadow-out-sm); } .woocommerce-account form input[type="checkbox"]:checked::before { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* ===== Downloads table (if downloadable products are ever added) ===== */ .woocommerce-account .woocommerce-MyAccount-downloads { margin-top: 1rem; } .woocommerce-account .woocommerce-MyAccount-downloads a.woocommerce-MyAccount-downloads-file { display: inline-block; background: var(--neu-bg); box-shadow: var(--neu-shadow-out-sm); border-radius: var(--neu-radius-btn); padding: 0.5rem 1rem; color: var(--neu-fg); text-decoration: none; font-weight: 600; font-size: 0.875rem; } .woocommerce-account .woocommerce-MyAccount-downloads a.woocommerce-MyAccount-downloads-file:hover { box-shadow: var(--neu-shadow-out); color: var(--neu-accent); } /* Mobile refinements for my-account */ @media (max-width: 767px) { .woocommerce-account .woocommerce-MyAccount-content { padding: 1.5rem 1.25rem; } .woocommerce-account table.shop_table thead { display: none; } .woocommerce-account table.shop_table tbody tr { display: block; margin-bottom: 0.75rem; background: var(--neu-bg); border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-out-sm); padding: 0.5rem; } .woocommerce-account table.shop_table tbody td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; box-shadow: none !important; padding: 0.625rem 0.75rem; border-radius: 0 !important; border-bottom: 1px solid rgba(163, 177, 198, 0.15); } .woocommerce-account table.shop_table tbody td:last-child { border-bottom: none; } .woocommerce-account table.shop_table tbody td::before { content: attr(data-title); font-family: var(--neu-font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--neu-muted); } } /* Order received */ .woocommerce-order { background: var(--neu-bg); border-radius: var(--neu-radius-card); box-shadow: var(--neu-shadow-out); padding: 2.5rem; } .woocommerce-order .woocommerce-thankyou-order-received { font-family: var(--neu-font-display); font-size: 1.5rem; font-weight: 800; color: var(--neu-fg); } .woocommerce-order ul.order_details { display: grid; grid-template-columns: 1fr; gap: 1rem; list-style: none; margin: 1.5rem 0; padding: 0; } @media (min-width: 768px) { .woocommerce-order ul.order_details { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } } .woocommerce-order ul.order_details li { background: var(--neu-bg); padding: 1rem 1.25rem; border-radius: var(--neu-radius-btn); box-shadow: var(--neu-shadow-in-sm); border: none; font-size: 0.875rem; color: var(--neu-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .woocommerce-order ul.order_details li strong { display: block; margin-top: 0.375rem; font-family: var(--neu-font-display); font-size: 1rem; color: var(--neu-fg); text-transform: none; letter-spacing: 0; } /* Star rating */ .woocommerce p.stars a, .woocommerce .star-rating span::before { color: var(--neu-teal); } /* Breadcrumbs */ .woocommerce-breadcrumb { font-size: 0.875rem; color: var(--neu-muted); margin-bottom: 1.5rem; } .woocommerce-breadcrumb a { color: var(--neu-accent); }