/*
Theme Name: GreenerRoute
Theme URI: https://greenerroute.com
Author: Bello Group Limited
Description: Custom lightweight block theme for GreenerRoute.com. Mobile-first, minimal-JS, built against the Phase 2 design system (see docs/design-system.md).
Version: 0.9.36
Requires at least: 6.4
Requires PHP: 8.0
Tested up to: 6.6
Requires Plugins: woocommerce
Text Domain: greenerroute
*/
:root {
/* Widened from 240px: long category names (e.g. "All Board and Half
Board Envelopes") plus the submenu indent were overflowing the
rail's own width and forcing a horizontal scrollbar inside it. */
--gr-sidebar-width: 300px;
}
/* Mobile-first product grid: 1 column on phone (<600px), 2 on tablet
(600–959px), 4 on desktop (960px+). The product-collection block's own
"columns" attribute is a single fixed value, so the responsive
step-up is handled here instead. */
.wp-block-woocommerce-product-collection .wc-block-product-template {
display: grid;
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--40);
}
@media (min-width: 600px) {
.wp-block-woocommerce-product-collection .wc-block-product-template {
grid-template-columns: repeat(2, 1fr);
gap: var(--wp--preset--spacing--50);
}
}
@media (min-width: 960px) {
.wp-block-woocommerce-product-collection .wc-block-product-template {
grid-template-columns: repeat(4, 1fr);
}
}
/* Star rating, first thing under the image on every product card (shop
grid + best sellers — both use the exact same card format now). A
product with no reviews yet gets the empty-star/"Rate now" fallback
below instead of WooCommerce's own default of rendering nothing. */
.gr-card-rating {
margin-bottom: var(--wp--preset--spacing--10);
font-size: 1.75rem; /* 2x the previous --font-size--small (0.875rem) */
}
.gr-rating-empty {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--10);
height: 100%;
line-height: 1;
color: var(--wp--preset--color--muted);
text-decoration: none;
}
.gr-rating-empty:hover {
color: var(--wp--preset--color--accent);
}
.gr-rating-empty__stars {
display: inline-flex;
gap: 1px;
}
.gr-rating-empty__cta {
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
text-decoration: underline;
}
/* Single card shadow token, single border-radius — no mixed styles. */
.wc-block-product-template .wc-block-product,
.product-summary {
border-radius: 4px;
}
/* Breathing room between title, rating, and price on the product page —
these were relying on core blocks' own default margins, which read as
cramped this close together. */
.product-summary .wp-block-woocommerce-product-rating,
.product-summary .gr-rating-empty {
margin-top: var(--wp--preset--spacing--30);
margin-bottom: var(--wp--preset--spacing--10);
}
.product-summary .gr-product-price {
margin-top: var(--wp--preset--spacing--30);
}
/* Explicit px match to .gr-card-title's computed size (20px) — swapping
fontSize preset tokens ("xx-large" -> "x-large") on the post-title
block didn't actually shrink it as expected (some other rule with
higher specificity kept winning), so this sets the real pixel value
directly instead of relying on a token name. */
.gr-product-title {
font-size: 20px !important;
}
.gr-product-short-description {
margin-top: var(--wp--preset--spacing--20);
color: var(--wp--preset--color--muted);
}
/* Add to cart wrapper: WooCommerce (and the Stripe/PayPal plugins hooked
into woocommerce_before_add_to_cart_form / woocommerce_after_add_to_cart_form)
print several distinct pieces here — stock notice, the shipment-time ETA
line, the