Shop

/* === DESIGN TOKENS (grounded in Dyson + HP + Solar Repairs brand) === */
:root {
–sr-accent: #f5612f;
–sr-accent-hover: #e04e1e;
–sr-ink: #2b2929;
–sr-ink-soft: #676464;
–sr-muted: #999999;
–sr-bg: #ffffff;
–sr-bg-soft: #f5f5f5;
–sr-bg-quiet: #fcfcfc;
–sr-border: #e8e8e8;
–sr-radius-sm: 4px;
–sr-radius-md: 8px;
–sr-radius-lg: 12px;
–sr-transition: 220ms cubic-bezier(0.68, 0.03, 0.26, 1.02);
–sr-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
–sr-shadow-md: 0 4px 20px rgba(0,0,0,0.08);
–sr-shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
}

/* === SHOP PAGE HEADER === */
.woocommerce-products-header {
text-align: center;
padding: 48px 0 32px;
border-bottom: 1px solid var(–sr-border);
margin-bottom: 40px;
}

.woocommerce-products-header__title {
font-size: 36px;
font-weight: 300;
letter-spacing: -0.3px;
color: var(–sr-ink);
margin: 0 0 8px;
line-height: 1.1;
}

.woocommerce-products-header .term-description {
font-size: 16px;
line-height: 1.6;
color: var(–sr-ink-soft);
max-width: 680px;
margin: 0 auto;
}

/* === PRODUCT GRID === */
.woocommerce ul.products {
display: flex;
flex-wrap: wrap;
gap: 32px;
margin: 0;
padding: 0;
}

.woocommerce ul.products li.product {
margin: 0;
width: calc(33.333% – 22px);
background: var(–sr-bg);
border: 1px solid var(–sr-border);
border-radius: var(–sr-radius-lg);
overflow: hidden;
transition: box-shadow var(–sr-transition), border-color var(–sr-transition), transform var(–sr-transition);
display: flex;
flex-direction: column;
padding: 0;
}

.woocommerce ul.products li.product:hover {
border-color: transparent;
box-shadow: var(–sr-shadow-hover);
transform: translateY(-4px);
}

/* === PRODUCT IMAGE === */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
margin: 0;
border-radius: 0;
transition: transform var(–sr-transition);
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__link img {
transform: scale(1.03);
}

/* === PRODUCT TITLE === */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 16px;
font-weight: 400;
letter-spacing: 0;
color: var(–sr-ink);
padding: 20px 20px 8px;
margin: 0;
line-height: 1.4;
text-decoration: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
color: var(–sr-accent);
}

/* === PRODUCT PRICE === */
.woocommerce ul.products li.product .price {
padding: 0 20px 16px;
color: var(–sr-ink);
font-size: 18px;
font-weight: 500;
display: block;
}

.woocommerce ul.products li.product .price del {
color: var(–sr-muted);
font-weight: 400;
font-size: 14px;
text-decoration: line-through;
}

.woocommerce ul.products li.product .price ins {
color: var(–sr-accent);
font-weight: 600;
text-decoration: none;
}

.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
font-size: 0.8em;
font-weight: 400;
vertical-align: top;
}

/* === ADD TO CART BUTTON === */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button.add_to_cart_button {
margin: 0 20px 20px;
padding: 12px 20px;
border-radius: var(–sr-radius-md);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
text-transform: uppercase;
background: var(–sr-accent);
color: #fff;
border: none;
transition: background var(–sr-transition), transform var(–sr-transition);
width: calc(100% – 40px);
text-align: center;
display: inline-block;
}

.woocommerce ul.products li.product .button:hover {
background: var(–sr-accent-hover);
transform: translateY(-1px);
}

.woocommerce ul.products li.product .button.loading {
opacity: 0.7;
pointer-events: none;
}

.woocommerce ul.products li.product .button.added {
display: none;
}

.woocommerce ul.products li.product .button.added + .added_to_cart {
margin: 0 20px 20px;
padding: 12px 20px;
border-radius: var(–sr-radius-md);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
text-transform: uppercase;
background: var(–sr-bg-soft);
color: var(–sr-ink);
border: 1px solid var(–sr-border);
width: calc(100% – 40px);
text-align: center;
display: inline-block;
}

/* === PRODUCT BADGES === */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
border-radius: var(–sr-radius-sm);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 10px;
background: var(–sr-accent);
color: #fff;
min-width: auto;
min-height: auto;
line-height: 1.4;
z-index: 2;
}

/* === SORTING / RESULT COUNT === */
.woocommerce .woocommerce-result-count {
font-size: 14px;
color: var(–sr-ink-soft);
margin: 0 0 24px;
}

.woocommerce .woocommerce-ordering {
margin: 0 0 24px;
}

.woocommerce .woocommerce-ordering select {
padding: 8px 16px;
border: 1px solid var(–sr-border);
border-radius: var(–sr-radius-md);
font-size: 14px;
color: var(–sr-ink);
background: var(–sr-bg);
cursor: pointer;
}

/* === PAGINATION === */
.woocommerce nav.woocommerce-pagination ul {
border: none;
margin: 48px 0 0;
}

.woocommerce nav.woocommerce-pagination ul li {
border: none;
margin: 0 4px;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
padding: 10px 16px;
border-radius: var(–sr-radius-md);
border: 1px solid var(–sr-border);
font-size: 14px;
font-weight: 500;
color: var(–sr-ink);
background: var(–sr-bg);
transition: all var(–sr-transition);
min-width: 40px;
text-align: center;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
border-color: var(–sr-accent);
color: var(–sr-accent);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(–sr-accent);
color: #fff;
border-color: var(–sr-accent);
}

/* === STAR RATINGS === */
.woocommerce ul.products li.product .star-rating {
font-size: 14px;
margin: 0 20px 8px;
color: #f5a623;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
.woocommerce ul.products li.product {
width: calc(50% – 16px);
}
}

@media (max-width: 768px) {
.woocommerce ul.products {
gap: 24px;
}
.woocommerce ul.products li.product {
width: 100%;
}
.woocommerce-products-header {
padding: 32px 0 24px;
}
.woocommerce-products-header__title {
font-size: 28px;
}
}

/* === PRODUCT DETAIL PAGE === */
.woocommerce div.product .product_title {
font-size: 32px;
font-weight: 300;
letter-spacing: -0.3px;
color: var(–sr-ink);
line-height: 1.1;
margin-bottom: 16px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
font-size: 24px;
font-weight: 500;
color: var(–sr-ink);
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
color: var(–sr-muted);
font-size: 16px;
}

.woocommerce div.product form.cart .button {
background: var(–sr-accent);
color: #fff;
border: none;
border-radius: var(–sr-radius-md);
padding: 14px 32px;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: background var(–sr-transition), transform var(–sr-transition);
}

.woocommerce div.product form.cart .button:hover {
background: var(–sr-accent-hover);
transform: translateY(-1px);
}

.woocommerce div.product .woocommerce-product-gallery__image {
border-radius: var(–sr-radius-lg);
overflow: hidden;
}

/* === MESSAGE / NOTICES === */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
border-radius: var(–sr-radius-md);
border: none;
background: var(–sr-bg-soft);
padding: 16px 20px;
font-size: 14px;
}

.woocommerce-message {
border-left: 3px solid var(–sr-accent);
}

.woocommerce-info {
border-left: 3px solid #007BFF;
}

.woocommerce-error {
border-left: 3px solid #e04e1e;
}

/* === CART & CHECKOUT === */
.woocommerce-cart table.cart {
border-radius: var(–sr-radius-lg);
overflow: hidden;
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout h3 {
font-size: 20px;
font-weight: 400;
color: var(–sr-ink);
}

.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
background: var(–sr-accent);
color: #fff;
border: none;
border-radius: var(–sr-radius-md);
padding: 12px 24px;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: background var(–sr-transition);
}

.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
background: var(–sr-accent-hover);
}