/* ========================================================= WOOCOMMERCE — shop, single product, cart, checkout, account ========================================================= */ .wwp-shop-wrap { padding: 40px 0 80px; } .wwp-breadcrumbs { font-size: 13px; color: var(--wwp-color-text-muted); margin-bottom: 20px; } .wwp-breadcrumbs a { color: var(--wwp-color-text-muted); } /* Breadcrumb reuses .wwp-container for its max-width/centering, but should sit flush with the page's own left/right edge (no extra 24px gutter on top of whatever wraps it), so its own left/right padding is zeroed here. */ nav.wwp-container.wwp-breadcrumbs { padding-left: 0; padding-right: 0; } /* ---------- Shop layout: full-width (no sidebar) ---------- */ #wwp-shop-results { position: relative; transition: opacity .2s ease; } #wwp-shop-results.is-loading { opacity: .45; pointer-events: none; } .wwp-shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .wwp-shop-toolbar select { width: auto; } ul.products { display: grid !important; grid-template-columns: repeat(var(--wwp-shop-cols, 4), 1fr); gap: 24px; list-style: none !important; margin: 0 !important; padding: 0 !important; } ul.products li.product { list-style: none; } /* ---------- Product Card ---------- */ .wwp-product-card { position: relative; display: flex; flex-direction: column; } .wwp-product-card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--wwp-color-bg-alt); } .wwp-product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .wwp-product-card:hover .wwp-product-card-media img { transform: scale(1.06); } .wwp-product-card-body { padding: 18px; } .wwp-product-card-cat { font-size: 11px; text-transform: uppercase; color: var(--wwp-color-accent); font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; } .wwp-product-card-title { font-size: 16px; margin-bottom: 4px; } .wwp-product-card-subtitle { font-size: 12px; color: var(--wwp-color-text-muted); margin-bottom: 10px; } .wwp-product-card-price { font-weight: 700; margin-bottom: 12px; } .wwp-product-card-price del { opacity: .5; font-weight: 400; margin-right: 6px; } .wwp-product-card-price ins { text-decoration: none; } .wwp-product-card .button { display: inline-block; width: 100%; text-align: center; background: var(--wwp-color-black); color: #fff; padding: 11px; border-radius: var(--wwp-btn-radius); font-size: 13px; font-weight: 700; text-transform: uppercase; } .wwp-product-card .button:hover { background: var(--wwp-color-accent); color: var(--wwp-color-accent-text); } .wwp-rou-badge--card { position: absolute; bottom: 12px; left: 12px; background: #fff; } .wwp-quickview-btn, .wwp-wishlist-btn { position: absolute; background: #fff; border: 1px solid var(--wwp-color-border); border-radius: 50%; width: 36px; height: 36px; z-index: 3; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--wwp-transition); } .wwp-product-card:hover .wwp-quickview-btn, .wwp-product-card:hover .wwp-wishlist-btn { opacity: 1; } .wwp-wishlist-btn { top: 12px; right: 12px; font-size: 18px; } .wwp-quickview-btn { bottom: 12px; right: 12px; font-size: 11px; width: auto; padding: 0 14px; border-radius: 20px; } /* ---------- Single Product ---------- */ .wwp-single-subtitle { color: var(--wwp-color-text-muted); margin-top: -10px; margin-bottom: 14px; } .wwp-single-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } /* Two-column layout: gallery left, summary (title/price/qty/add-to-cart) right — WooCommerce's own default stylesheet normally provides this via float, but that stylesheet is disabled site-wide (see inc/woocommerce.php, `woocommerce_enqueue_styles` filter), so without this rule gallery and summary just stack as plain block elements. Both are wrapped in `.wwp-product-top-wrap` (see inc/single-product-hooks.php) so this flex rule only ever has exactly two children to lay out — tabs, related products, trust-icon row etc. all render AFTER this wrapper closes, as normal full-width block content, completely unaffected by it. (An earlier version made `.woocommerce div.product` itself a CSS grid with a catch-all rule to push everything else full-width — that turned out fragile, so it was replaced with this simpler, self-contained wrapper.) */ .wwp-product-top-wrap { display: flex; gap: 48px; align-items: flex-start; } .wwp-product-top-wrap > .woocommerce-product-gallery { flex: 1 1 50%; min-width: 0; } .wwp-product-top-wrap > .summary.entry-summary { flex: 1 1 50%; min-width: 0; } .woocommerce div.product .woocommerce-product-gallery { border-radius: var(--wwp-radius-card); overflow: hidden; } .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--wwp-color-black); font-size: 26px; font-weight: 700; } .woocommerce div.product .stock { color: var(--wwp-color-success); font-weight: 600; } .woocommerce div.product p.stock.in-stock { display: none; } .woocommerce div.product a.reset_variations { display: none; } .woocommerce div.product form.cart { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 20px 0; } .woocommerce div.product form.cart .quantity input { width: 70px; text-align: center; padding: 13px 8px; } .woocommerce div.product form.cart .button, .wwp-buy-now-btn { flex: 1; min-width: 160px; } /* For VARIABLE products, WooCommerce nests the quantity input + Add to Cart button (and our Buy Now button, hooked right after it) inside `.woocommerce-variation-add-to-cart` — a CHILD of form.cart, not a direct flex child of it. Without this, `flex:1` above has no effect (its immediate parent isn't a flex container), so Add to Cart and Buy Now end up at their own natural/unequal widths. */ .woocommerce div.product .woocommerce-variation-add-to-cart { display: flex; gap: 14px; flex-wrap: wrap; width: 100%; } .woocommerce-tabs { margin-top: 50px; } .woocommerce-tabs ul.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wwp-color-border); list-style: none; padding: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .woocommerce-tabs ul.tabs li { list-style: none; flex: 0 0 auto; } .woocommerce-tabs ul.tabs li a { display: block; padding: 14px 22px; font-weight: 700; white-space: nowrap; } .woocommerce-tabs ul.tabs li.active a { border-bottom: 2px solid var(--wwp-color-accent); color: var(--wwp-color-black); } .woocommerce-tabs .panel { padding: 30px 0; } .wwp-product-info-section { padding: 60px 0; border-top: 1px solid var(--wwp-color-border); margin-top: 40px; } .wwp-info-block { padding: 24px; border: 1px solid var(--wwp-color-border); border-radius: var(--wwp-radius-card); } .wwp-info-block h4 { font-size: 15px; margin-bottom: 12px; } .wwp-highlight-list li { padding-left: 22px; position: relative; margin-bottom: 8px; font-size: 14px; } .wwp-highlight-list li::before { content: '✓'; position: absolute; left: 0; color: var(--wwp-color-accent); font-weight: 700; } .wwp-specs-table { width: 100%; border-collapse: collapse; } .wwp-specs-table th, .wwp-specs-table td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--wwp-color-border); font-size: 14px; } .wwp-specs-table th { color: var(--wwp-color-text-muted); font-weight: 500; width: 45%; } .wwp-warning-block { background: #FFF7E6; border: 1px solid var(--wwp-color-accent); border-radius: var(--wwp-radius-card); padding: 16px 20px; margin-top: 24px; font-size: 14px; } .wwp-rou-notice { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--wwp-color-text-muted); margin-top: 24px; } .related.products, .upsells.products { margin-top: 60px; } .related.products > h2, .upsells.products > h2 { font-size: 26px; margin-bottom: 24px; } /* ---------- Cart ---------- */ table.shop_table.cart, table.shop_table.woocommerce-cart-form__contents { width: 100%; border-collapse: collapse; } table.shop_table.cart th, table.shop_table.cart td { padding: 16px 10px; border-bottom: 1px solid var(--wwp-color-border); vertical-align: middle; } .woocommerce a.remove { color: var(--wwp-color-error) !important; font-size: 20px; } .cart_totals { border: 1px solid var(--wwp-color-border); border-radius: var(--wwp-radius-card); padding: 24px; } .cart_totals table { width: 100%; } .cart_totals table td, .cart_totals table th { padding: 10px 0; } .wc-proceed-to-checkout .checkout-button { width: 100%; text-align: center; } .cart-empty { text-align: center; padding: 60px 0; } /* ---------- Checkout ---------- */ .woocommerce-checkout #payment { background: var(--wwp-color-bg-alt); border-radius: var(--wwp-radius-card); padding: 20px; } .woocommerce-checkout #payment ul.payment_methods { list-style: none; padding: 0; } .woocommerce-checkout .form-row { margin-bottom: 16px; } #order_review { border: 1px solid var(--wwp-color-border); border-radius: var(--wwp-radius-card); padding: 24px; } .woocommerce-checkout-review-order-table { width: 100%; } .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 10px 0; } .woocommerce-error, .woocommerce-message, .woocommerce-info { border-radius: var(--wwp-radius-card); padding: 16px 20px; list-style: none; border: 1px solid var(--wwp-color-border); background: #fff; } .woocommerce-error { border-color: var(--wwp-color-error); } .woocommerce-message { border-color: var(--wwp-color-success); } /* ---------- My Account ---------- Full sidebar/dashboard/login-register layout is in assets/css/account.css (loaded only on the account page). These two rules are generic WC sub-page bits (Addresses, Edit Account) reused across account endpoints. */ .woocommerce-account .addresses .title .edit { color: var(--wwp-color-accent); } .woocommerce form .form-row label { font-size: 13px; } /* ---------- Empty states ---------- */ .woocommerce-info { display: flex; align-items: center; gap: 10px; } @media (max-width: 992px) { :root { --wwp-shop-cols: 2; } } /* ========================================================= UNIVERSAL WOOCOMMERCE BUTTON STYLING Covers every button WooCommerce can render that wasn't already styled by a more specific rule above (.wwp-product-card .button, .wwp-buy-now-btn, .wwp-btn-* on the login/account pages) — classic templates AND WooCommerce Blocks. Cart & Checkout on this site are the Gutenberg Cart/Checkout blocks, which ship their own default black-pill CSS independent of add_filter('woocommerce_enqueue_styles','__return_empty_array') above (that filter only strips WC's CLASSIC stylesheet, not the Blocks package's own styles) — so those need overriding here too. Matches the same black-fill / gold-hover look already used by .wwp-product-card .button and the Buy Now button, so every button on the site now looks like one theme rather than a mix of unstyled/default-WC/default-Blocks. No border on any of these per client request — background colour alone carries the button. Covers: single-product Add to Cart, Update Cart, Apply Coupon, Proceed to Checkout, Place Order, My Account "Save address"/"Save changes" (button.woocommerce-Button.button), Read More / Select Options, and the Cross-Sells product grid buttons on the empty-cart screen (though those now render as real .wwp-product-card buttons — see the render_block filter in inc/woocommerce.php — so this rule is a fallback for any other Blocks button, not the main path for that grid anymore). */ .woocommerce a.button, .woocommerce button.button, .woocommerce button.woocommerce-Button, .woocommerce input.button, .woocommerce #respond input#submit, .wc-block-components-button, .wc-block-grid__product-add-to-cart .wp-block-button__link, .wp-block-woocommerce-cart .wp-block-button__link, .wp-block-woocommerce-checkout .wp-block-button__link, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px !important; font-family: var(--wwp-font-body) !important; font-weight: 700 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .02em; border-radius: var(--wwp-btn-radius) !important; border: none !important; background: var(--wwp-color-black) !important; color: #fff !important; cursor: pointer; transition: transform var(--wwp-transition), filter var(--wwp-transition), background var(--wwp-transition), color var(--wwp-transition); text-decoration: none !important; box-shadow: none !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce button.woocommerce-Button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .wc-block-components-button:hover, .wc-block-grid__product-add-to-cart .wp-block-button__link:hover, .wp-block-woocommerce-cart .wp-block-button__link:hover, .wp-block-woocommerce-checkout .wp-block-button__link:hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { transform: translateY(-2px); background: var(--wwp-color-accent) !important; color: var(--wwp-color-accent-text) !important; } .woocommerce a.button:disabled, .woocommerce a.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button.disabled, .wc-block-components-button:disabled, .wc-block-components-button.is-loading { opacity: .5 !important; cursor: not-allowed !important; transform: none !important; } /* Defensive reset only — the Cart page's cross-sells section is fully replaced with real .wwp-product-card items (render_block filter, inc/woocommerce.php) so it never actually hits this selector anymore, but WooCommerce Blocks' own default grid CSS (.wc-block-grid.has-N-columns .wc-block-grid__product { flex: 1 0 25%; max-width: 25%; }) assumes a FLEX layout; if any other WC Blocks product grid ever appears on the site it would otherwise fight a grid/flex layout we didn't set here. Neutralized as a fallback. */ .wc-block-grid__product { max-width: none !important; flex: none !important; } /* ---------- "New in store" / cross-sells grid on the Cart page ---------- Real .wwp-product-card items (see the render_block filter in inc/woocommerce.php) reusing the same `ul.products` grid rules defined near the top of this file — this just adds the section heading/spacing. */ .wwp-cross-sells { margin-top: 40px; } .wwp-cross-sells-heading { font-size: 24px; text-align: center; margin-bottom: 24px; } /* ---------- Quantity & Discount card grid (single product page) ---------- */ .wwp-qty-discount-wrap { margin: 20px 0; } .wwp-qty-discount-wrap h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--wwp-color-text-muted); margin-bottom: 10px; } .wwp-qty-discount-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .wwp-qty-card { position: relative; text-align: left; background: #fff; cursor: pointer; border: 1px solid var(--wwp-color-border); border-radius: var(--wwp-radius-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; transition: border-color var(--wwp-transition), background var(--wwp-transition); } .wwp-qty-card:hover { border-color: var(--wwp-color-accent); } .wwp-qty-card.is-selected { border-color: var(--wwp-color-accent); border-width: 2px; background: #FFFBEF; } .wwp-qty-card-badge { position: absolute; top: -10px; right: 10px; background: var(--wwp-color-accent); color: var(--wwp-color-accent-text); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 10px; text-transform: uppercase; } .wwp-qty-card-label { font-weight: 700; font-size: 13px; } .wwp-qty-card-price { font-weight: 800; font-size: 15px; } .wwp-qty-card-price del { font-weight: 400; font-size: 12px; opacity: .5; margin-left: 6px; } /* ---------- Dynamic price display (synced with Quantity & Discount cards) ---------- */ .wwp-dynamic-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .wwp-price-current { font-size: 26px; font-weight: 700; color: var(--wwp-color-black); } .wwp-price-original { font-size: 16px; color: var(--wwp-color-text-muted); text-decoration: line-through; } .wwp-price-off-badge { display: none; background: var(--wwp-color-accent); color: var(--wwp-color-accent-text); font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* ---------- Trust icons row (single product page) ---------- */ .wwp-trust-icons-outer { max-width: var(--wwp-container-width); width: 100%; margin: 0 auto; padding: 0; } .wwp-trust-icons-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; border: 1px solid var(--wwp-color-border); border-radius: var(--wwp-radius-card); padding: 24px 16px; margin: 40px 0; } .wwp-trust-icon-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .wwp-trust-icon-item svg { width: 28px; height: 28px; color: var(--wwp-color-black); } .wwp-trust-icon-item span { font-size: 12px; font-weight: 600; line-height: 1.3; } /* ---------- Overview tab: description + specs/highlights sidebar ---------- */ .wwp-overview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; } .wwp-overview-sidebar { display: flex; flex-direction: column; gap: 20px; } .wwp-overview-sidebar .wwp-info-block { background: var(--wwp-color-bg-alt); } /* ---------- Variation swatches ("Size" buttons instead of a dropdown) ---------- */ .woocommerce div.product form.variations { margin-bottom: 10px; } .wwp-variations-wrap { margin-bottom: 0; } .wwp-variation-row { margin-bottom: 0; } .wwp-variation-row-label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: 10px; } .wwp-variation-row-value { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .wwp-variation-row-value select { display: none; } /* Robust fallback regardless of the surrounding markup structure (WC versions differ on whether the select sits in a or a plain
) — our own swatches div is always immediately followed by WooCommerce's original