/* ============================================================ CrumpIT — WooCommerce brand styling Styles Woo's own markup to match the CrumpIT design system. Intentionally UNLAYERED (Woo's CSS is unlayered too) and enqueued after `woocommerce-general` so these rules win. Uses the design tokens from variables.css (custom properties resolve regardless of cascade layers). ============================================================ */ /* ---- Site chrome: keep the header + footer logos sized on store pages ---- WooCommerce adds `.woocommerce` to , and its unlayered CSS overrides the theme's layered .logo-wrap/.footer-brand rules (unlayered always beats a cascade layer). Re-assert the sizes here (unlayered, loads after woocommerce-general, higher specificity) so both logos stay correct on the shop/cart/checkout. */ .site-header .logo-wrap img { height: 38px; width: auto; } .site-footer .footer-brand img { height: 40px; width: auto; } /* ---- Layout ---- */ .woo-main .woocommerce { max-width: var(--container); margin-inline: auto; } .woocommerce .woocommerce-breadcrumb { font-family: var(--font-ui); font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--sp-6); } .woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); } .woocommerce .woocommerce-breadcrumb a:hover { color: var(--accent); } .woocommerce-products-header__title, .woocommerce .page-title { font-family: var(--font-display); } /* ---- Buttons: map Woo buttons onto the brand button system ---- */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-16); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; padding: 0.72rem 1.5rem; border-radius: var(--r-sm); border: 1.5px solid var(--accent); background: transparent; color: var(--accent); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .button:hover, .woocommerce #respond input#submit:hover { background: var(--accent); color: #fff; box-shadow: var(--glow-sm); transform: scale(1.02); } .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce .button.alt, .woocommerce .single_add_to_cart_button, .woocommerce .add_to_cart_button, .woocommerce #place_order, .woocommerce .checkout-button { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--glow-sm); } .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .add_to_cart_button:hover, .woocommerce #place_order:hover, .woocommerce .checkout-button:hover { background: var(--accent-dim); box-shadow: var(--glow-md); } .woocommerce .button.loading::after { top: 0.7em; } /* ---- Notices ---- */ .woocommerce-message, .woocommerce-info, .woocommerce-error li, .woocommerce-error { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-sm); color: var(--text); font-family: var(--font-ui); padding: var(--sp-4) var(--sp-5); } .woocommerce-message { border-left-color: var(--success); } .woocommerce-error { border-left-color: var(--danger); } .woocommerce-message .button, .woocommerce-info .button { box-shadow: none; } /* ---- Filter tabs (brand pills; also used by the shop category nav) ---- */ .filter-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-10); } .filter-tab { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-14); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 0.55rem 1.1rem; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); transition: color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .filter-tab:hover { color: var(--text); border-color: var(--accent-24); } .filter-tab.is-active { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: var(--glow-sm); } /* ---- Store layout: category sidebar + product area ---- */ .store-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-8); align-items: start; } .store-sidebar { position: sticky; top: 96px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-5) var(--sp-6); } .store-sidebar__title { font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--ls-display); text-transform: uppercase; margin: 0 0 var(--sp-4); } .store-cats { list-style: none; margin: 0; padding: 0; } .store-cats > li + li { margin-top: 2px; } .store-cat { display: flex; align-items: center; gap: var(--sp-2); padding: 0.5rem 0.75rem; border-radius: var(--r-sm); font-family: var(--font-ui); font-size: var(--fs-14); font-weight: 600; color: var(--text-muted); text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .store-cat:hover { color: var(--text); background: var(--surface-alt); } .store-cat.is-active { color: var(--accent); background: var(--accent-14); } .store-cat__count { margin-left: auto; font-size: var(--fs-12); font-weight: 600; color: var(--text-muted); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; line-height: 1.6; } .store-cat.is-active .store-cat__count { color: var(--accent); border-color: var(--accent-24); } .store-cats--sub { margin: 2px 0 var(--sp-2) var(--sp-4); border-left: 1px solid var(--border); padding-left: var(--sp-2); } .store-cat--sub { font-weight: 500; font-size: var(--fs-13, 0.8125rem); padding: 0.35rem 0.6rem; } @media (max-width: 900px) { .store-layout { display: block; } .store-sidebar { position: static; margin-bottom: var(--sp-6); } .store-cats { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .store-cats > li + li { margin-top: 0; } .store-cats--sub { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; border: 0; padding: 0; } .store-cat { border: 1px solid var(--border); border-radius: 999px; } } /* ---- Shop loop / product cards ---- */ .woocommerce ul.products, .woocommerce-page ul.products, .woocommerce ul.products[class*="columns-"], .woocommerce-page ul.products[class*="columns-"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-6); margin: 0; list-style: none; } /* Woo's layout CSS sets ul.products[class*=columns-] li.product to a 30.75% float width, which SHRINKS every card to a sliver of its grid cell. Match that selector's specificity so the grid sizing wins. */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product, .woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product { width: auto; float: none; margin: 0; padding: var(--sp-6); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .woocommerce ul.products li.product:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: var(--glow-md); } .woocommerce ul.products li.product a img { border-radius: var(--r-sm); margin-bottom: var(--sp-4); background: var(--surface-alt); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-size: var(--fs-16); letter-spacing: var(--ls-display); text-transform: uppercase; line-height: 1.2; padding: 0; margin: 0 0 var(--sp-2); } .woocommerce ul.products li.product .price { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); color: var(--text); margin-top: auto; } .woocommerce ul.products li.product .price del { color: var(--text-muted); font-size: var(--fs-14); } .woocommerce ul.products li.product .price ins { color: var(--accent); text-decoration: none; } .woocommerce ul.products li.product .button { margin-top: var(--sp-4); } /* Product badges (output by CRUMPIT_Woo) */ .crumpit-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--sp-2); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-12); letter-spacing: var(--ls-ui); text-transform: uppercase; padding: 0.28rem 0.7rem; border-radius: var(--r-pill); margin-bottom: var(--sp-3); color: var(--accent); background: var(--accent-14); } .crumpit-badge--ships { color: var(--success); background: rgba(0, 196, 140, 0.14); } /* Ratings */ .woocommerce .star-rating { color: var(--warning); font-size: 0.9em; margin-bottom: var(--sp-2); } .woocommerce .star-rating span::before { color: var(--warning); } /* ---- Single product ---- */ .woocommerce div.product .product_title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--ls-display); } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-32); } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--text-muted); } .woocommerce div.product form.cart .quantity .qty { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.6rem; font-family: var(--font-ui); } .woocommerce div.product .woocommerce-tabs ul.tabs { border: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm) var(--r-sm) 0 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--accent-08); border-bottom-color: var(--accent); } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--text); font-family: var(--font-ui); font-weight: 600; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--border); } /* ---- Forms (cart, checkout, account) ---- */ .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce .select2-container--default .select2-selection--single, .woocommerce table.cart td.actions .coupon .input-text { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.7rem 0.9rem; font-size: var(--fs-16); line-height: 1.4; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-14); } .woocommerce form .form-row label { font-family: var(--font-ui); font-weight: 600; color: var(--text-muted); } .woocommerce .woocommerce-input-wrapper { width: 100%; } /* ---- Cart page ---- */ .woocommerce table.shop_table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); border-collapse: separate; } .woocommerce table.shop_table th { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .woocommerce table.shop_table td { border-top: 1px solid var(--border); color: var(--text); } .woocommerce-cart .cart-collaterals .cart_totals > h2, .woocommerce .cart_totals h2 { font-family: var(--font-display); } .woocommerce-cart-form .product-remove a.remove { color: var(--danger) !important; border-color: var(--danger); } /* ---- Checkout: two-column like the prototype ---- */ @media (min-width: 981px) { .woocommerce-checkout .woocommerce form.checkout { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-8); align-items: start; } .woocommerce-checkout #customer_details { grid-column: 1; } .woocommerce-checkout #order_review_heading, .woocommerce-checkout #order_review { grid-column: 2; } .woocommerce-checkout #order_review { position: sticky; top: calc(var(--header-h) + var(--sp-6)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); } .woocommerce-checkout #order_review_heading { margin-top: 0; } } .woocommerce-checkout #customer_details .col-1, .woocommerce-checkout #customer_details .col-2 { float: none; width: 100%; } .woocommerce form.checkout h3 { font-family: var(--font-display); font-size: var(--fs-20); } .woocommerce-checkout #payment { background: var(--surface-alt); border-radius: var(--r-md); } .woocommerce-checkout #payment ul.payment_methods { border-bottom-color: var(--border); } .woocommerce-checkout #payment div.payment_box { background: var(--surface); border-radius: var(--r-sm); color: var(--text-muted); } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--surface); } .woocommerce-checkout .order-total .amount { color: var(--accent); font-family: var(--font-display); font-size: var(--fs-24); } /* Cart / Checkout / My Account render via the generic page template (narrow container). Give them the full site width so they don't look cramped. */ .woocommerce-cart .container--narrow, .woocommerce-checkout .container--narrow, .woocommerce-account .container--narrow { max-width: var(--container); } /* ---- My Account (logged in): nav + content side by side ---- */ .woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-8); align-items: start; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); } .woocommerce-account .woocommerce-MyAccount-navigation li { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: var(--sp-3) var(--sp-4); font-family: var(--font-ui); font-weight: 600; color: var(--text-muted); } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--text); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active { border-color: var(--accent); background: var(--accent-08); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--accent); } .woocommerce-account .woocommerce-MyAccount-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-8); color: var(--text); min-width: 0; } .woocommerce-account .woocommerce-MyAccount-content a:not(.btn):not(.button) { color: var(--accent); text-decoration: underline; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address { margin-top: var(--sp-4); } /* ---- Login / register (logged-out My Account) ---- */ .woocommerce-account:not(.logged-in) .woocommerce > .u-columns, .woocommerce .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); width: 100%; margin: 0; } .woocommerce .col-1, .woocommerce .col-2, .woocommerce .u-column1, .woocommerce .u-column2 { width: auto; float: none; } .woocommerce form.login, .woocommerce form.register { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-8); margin: 0; } .woocommerce-account:not(.logged-in) h2 { font-family: var(--font-display); font-size: var(--fs-24); text-transform: uppercase; letter-spacing: var(--ls-display); margin-bottom: var(--sp-5); } .woocommerce form.login .button, .woocommerce form.register .button { width: 100%; margin-top: var(--sp-3); } .woocommerce form .form-row-wide { width: 100%; } .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); } .woocommerce-LostPassword a, .woocommerce-privacy-policy-text a { color: var(--accent); } @media (max-width: 900px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; } .woocommerce-account:not(.logged-in) .woocommerce > .u-columns, .woocommerce .col2-set { grid-template-columns: 1fr; } } /* ---- Order received ---- */ .woocommerce ul.order_details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-6); } .woocommerce ul.order_details li { border: 0; font-family: var(--font-ui); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-12); } .woocommerce ul.order_details li strong { display: block; font-family: var(--font-display); font-size: var(--fs-18); color: var(--text); text-transform: none; letter-spacing: 0; } /* ---- Mini-cart inside the drawer (.drawer styles come from components.css) ---- */ .drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .drawer .woocommerce-mini-cart-item { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border); position: relative; } .drawer .woocommerce-mini-cart-item img { grid-row: span 2; width: 48px; height: 48px; border-radius: var(--r-sm); border: 1px solid var(--border); } .drawer .woocommerce-mini-cart-item a:not(.remove) { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-14); color: var(--text); } .drawer .woocommerce-mini-cart-item .quantity { font-size: var(--fs-14); color: var(--text-muted); } .drawer .woocommerce-mini-cart-item a.remove { position: absolute; top: var(--sp-3); right: 0; color: var(--text-muted) !important; font-size: 18px; line-height: 1; border: 0; } .drawer .woocommerce-mini-cart-item a.remove:hover { color: var(--danger) !important; background: transparent; } /* Item meta (variations / build parts) must not sit inside the narrow grid columns — give it the full row so text stops wrapping one word per line. */ .drawer .woocommerce-mini-cart-item dl.variation { grid-column: 1 / -1; margin: 0; } /* ---- Custom PC Build lines (drawer): stacked, organised layout ---- */ .drawer .woocommerce-mini-cart-item.crumpit-build-line { display: block; padding-right: 26px; } .drawer .crumpit-build-line img { display: none; } .drawer .crumpit-build-line .crumpit-build-title { display: block; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-14); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); } .drawer .crumpit-build-line .crumpit-build-sub { display: block; margin-top: 2px; font-size: var(--fs-12); color: var(--text-muted); } .drawer .crumpit-build-line dl.variation { display: block; margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm); } .drawer .crumpit-build-line dl.variation dt { display: block; float: none; margin: 0 0 var(--sp-1); padding: 0; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-12); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } .drawer .crumpit-build-line dl.variation dd { display: block; float: none; margin: 0; padding: 0; } .drawer .crumpit-build-line dl.variation dd p { margin: 0; } /* Quantity + Edit on one tidy row (all items; builds get extra spacing). */ .drawer .crumpit-line-actions { display: flex; align-items: center; gap: var(--sp-3); } .drawer .crumpit-line-actions .crumpit-mini-edit { margin-left: auto; white-space: nowrap; } .drawer .crumpit-build-line .crumpit-line-actions { margin-top: var(--sp-3); } /* The parts list itself — compact rows with accent ticks. */ .crumpit-build-parts { list-style: none; margin: 0; padding: 0; } .crumpit-build-parts li { position: relative; padding: 2px 0 2px 18px; font-size: var(--fs-12); line-height: 1.45; color: var(--text-muted); } .crumpit-build-parts li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); } /* ---- Custom PC Build lines (cart page) ---- */ .woocommerce-cart tr.crumpit-build-line .crumpit-build-title { display: block; font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-16); letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); } .woocommerce-cart tr.crumpit-build-line .crumpit-build-sub { display: block; margin-top: 2px; font-size: var(--fs-14); color: var(--text-muted); } .woocommerce-cart tr.crumpit-build-line dl.variation { display: block; margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-sm); max-width: 520px; } .woocommerce-cart tr.crumpit-build-line dl.variation dt { display: block; float: none; margin: 0 0 var(--sp-1); padding: 0; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-12); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } .woocommerce-cart tr.crumpit-build-line dl.variation dd { display: block; float: none; margin: 0; padding: 0; } .woocommerce-cart tr.crumpit-build-line dl.variation dd p { margin: 0; } @media (min-width: 720px) { .woocommerce-cart tr.crumpit-build-line .crumpit-build-parts { columns: 2; column-gap: var(--sp-6); } .woocommerce-cart tr.crumpit-build-line .crumpit-build-parts li { break-inside: avoid; } } .drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--sp-4) 0; margin: 0; font-family: var(--font-ui); border: 0; } .drawer .woocommerce-mini-cart__total strong { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fs-14); color: var(--text-muted); } .drawer .woocommerce-mini-cart__total .amount { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-24); color: var(--accent); } .drawer .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding-top: var(--sp-4); } /* The drawer renders in wp_footer OUTSIDE any .woocommerce wrapper, so the `.woocommerce .button` brand styles above never reach it on non-store pages. Restate the full button look scoped to the drawer itself. */ .drawer .woocommerce-mini-cart__buttons .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-16); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; padding: 0.72rem 1.5rem; border-radius: var(--r-sm); border: 1.5px solid var(--accent); background: transparent; color: var(--accent); text-decoration: none; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .drawer .woocommerce-mini-cart__buttons .button:hover { background: var(--accent); color: #fff; box-shadow: var(--glow-sm); transform: scale(1.02); } .drawer .woocommerce-mini-cart__buttons .button.checkout { background: var(--accent); color: #fff; box-shadow: var(--glow-sm); } .drawer .woocommerce-mini-cart__buttons .button.checkout:hover { filter: brightness(1.08); } /* "Edit" links on cart lines: drawer mini-cart + the cart page. */ .drawer .crumpit-mini-edit { display: inline-block; margin-left: var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .drawer .crumpit-mini-edit:hover { color: var(--text); } .woocommerce-cart .crumpit-cart-edit { display: inline-block; margin-top: var(--sp-1); font-family: var(--font-ui); font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .woocommerce-cart .crumpit-cart-edit:hover { color: var(--text); } .drawer .woocommerce-mini-cart__empty-message, .drawer p.woocommerce-mini-cart__empty-message { text-align: center; color: var(--text-muted); padding: var(--sp-12) var(--sp-4); } /* ---- CrumpIT account: dashboard tiles, tickets tab, saved builds ---- */ .crumpit-account-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-8); } .crumpit-tile { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); text-align: center; } .crumpit-tile__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-24); color: var(--accent); } .crumpit-tile__num .amount { color: var(--accent); } .crumpit-tile__label { display: block; margin-top: var(--sp-1); font-family: var(--font-ui); font-size: var(--fs-14); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .crumpit-tickets { display: grid; gap: var(--sp-6); } .crumpit-ticket-list, .crumpit-builds { display: grid; gap: var(--sp-4); } .crumpit-ticket__head, .crumpit-build__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); } .crumpit-ticket__subject { margin: 0; font-family: var(--font-display); font-size: var(--fs-18); } .crumpit-ticket__meta, .crumpit-build__meta { color: var(--text-muted); font-family: var(--font-ui); font-size: var(--fs-14); margin: 0 0 var(--sp-2); } .crumpit-build__parts { margin: var(--sp-2) 0 var(--sp-4); color: var(--text-muted); } .crumpit-build__parts ul { list-style: disc; padding-left: 1.3em; margin-top: var(--sp-2); } /* ---- Responsive ---- */ @media (max-width: 768px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } @media (max-width: 560px) { .crumpit-account-tiles { grid-template-columns: 1fr; } } @media (max-width: 460px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- * Store toolbar: product search + sorting, and subcategory tabs. * ------------------------------------------------------------------------- */ .store-toolbar { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); } .store-search { display: flex; gap: var(--sp-2); flex: 1 1 260px; max-width: 480px; } .store-search input[type="search"] { flex: 1; min-width: 0; padding: 0.6rem 0.9rem; border: 1px solid var(--border); border-radius: var(--r-pill, 999px); background: var(--surface); color: var(--text); font: inherit; } .store-search input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow-sm); } .store-sort { margin-left: auto; } .woocommerce-ordering select, .store-sort select { padding: 0.55rem 0.9rem; border: 1px solid var(--border); border-radius: var(--r-pill, 999px); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; } .filter-tabs--sub { margin-top: var(--sp-2); } .filter-tab--sub { font-size: var(--fs-14); padding-top: 0.35rem; padding-bottom: 0.35rem; opacity: 0.92; } @media (max-width: 600px) { .store-toolbar { gap: var(--sp-3); } .store-sort { margin-left: 0; width: 100%; } .woocommerce-ordering, .woocommerce-ordering select, .store-sort select { width: 100%; } } /* Ticket replies shown on the customer's account ticket cards. */ .crumpit-ticket__replies { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; } .crumpit-ticket__reply { background: var(--surface-alt); border-radius: var(--r-sm); padding: 8px 12px; } .crumpit-ticket__reply--staff { background: color-mix(in srgb, var(--accent) 10%, var(--surface-alt)); } .crumpit-ticket__reply-head { display: block; font-size: var(--fs-12); color: var(--text-muted); } .crumpit-ticket__reply-body { display: block; white-space: pre-line; } /* Own-ticket reply box + actions (account area). */ .crumpit-ticket__foot { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; } .crumpit-ticket-reply { display: flex; flex-direction: column; gap: 8px; } .crumpit-ticket-reply .textarea { width: 100%; min-height: 60px; } .crumpit-ticket__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }