body.woocommerce-shop .bricks-archive-title-wrapper{ position: relative; } body.woocommerce-shop .bricks-archive-title-wrapper::before{ content: ""; display: block; width: 100%; height: clamp(220px, 32vw, 420px); margin-bottom: 2rem; background-image: linear-gradient(rgba(43,52,60,.30), rgba(43,52,60,.30)), url("https://www.rockspropertyrestoration.co.uk/wp-content/uploads/JV4A3878-Enhanced-NR-scaled.jpg"); background-size: cover; background-position: center 60%; border-radius: 4px; }  body.woocommerce-shop .bricks-archive-title-wrapper h1, body.woocommerce-shop .bricks-archive-title-wrapper h2{ font-family: "Outfit", sans-serif; color: #b3996f; font-weight: 700; }  body.woocommerce-shop .woocommerce-result-count{ font-family: "Outfit", sans-serif; font-weight: 600; color: #2b343c; } body.woocommerce-shop .woocommerce-ordering{ font-family:"Outfit",sans-serif; }  body.woocommerce-shop ul.products{ display: flex !important; flex-direction: column; gap: 1rem; margin: 0; } body.woocommerce-shop ul.products li.product{ width: 100% !important; float: none !important; margin: 0 !important; display: grid; grid-template-columns: 200px 1fr auto; grid-template-areas: "img title price" "img rating price" "img desc button"; align-items: center; column-gap: 1.5rem; row-gap: .25rem; padding: 1.25rem 1.5rem; border: 1px solid #ece6db; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(43,52,60,.06); transition: box-shadow .2s ease, border-color .2s ease; } body.woocommerce-shop ul.products li.product:hover{ border-color: #b3996f; box-shadow: 0 4px 14px rgba(43,52,60,.12); }  body.woocommerce-shop ul.products li.product > a:first-of-type{ grid-area: img; display:block; align-self: center; } body.woocommerce-shop ul.products li.product img{ width: 100%; height: 170px; object-fit: contain; margin: 0; border-radius: 4px; background: #f7f4ee; }  body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title, body.woocommerce-shop ul.products li.product h2{ grid-area: title; align-self: end; font-family: "Outfit", sans-serif !important; font-weight: 700 !important; font-size: 1.35rem !important; color: #2b343c !important; text-align: left !important; padding: 0 !important; margin: 0 !important; }  body.woocommerce-shop ul.products li.product .star-rating{ grid-area: rating; align-self: start; margin: .25rem 0 0; color: #eb6726; }  body.woocommerce-shop ul.products li.product .price{ grid-area: price; align-self: center; justify-self: end; text-align: right; font-family: "Outfit", sans-serif !important; font-weight: 700 !important; font-size: 1.6rem !important; color: #eb6726 !important; margin: 0 !important; }  body.woocommerce-shop ul.products li.product .button, body.woocommerce-shop ul.products li.product a.add_to_cart_button{ grid-area: button; align-self: center; justify-self: end; margin: 0 !important; background: #eb6726 !important; color: #fff !important; font-family: "Outfit", sans-serif !important; font-weight: 600 !important; border-radius: 4px !important; padding: .7rem 1.4rem !important; border: none !important; transition: background .2s ease; } body.woocommerce-shop ul.products li.product .button:hover, body.woocommerce-shop ul.products li.product a.add_to_cart_button:hover{ background: #946349 !important; }  @media (max-width: 600px){ body.woocommerce-shop ul.products li.product{ grid-template-columns: 1fr; grid-template-areas: "img" "title" "rating" "price" "button"; text-align: center; } body.woocommerce-shop ul.products li.product .price, body.woocommerce-shop ul.products li.product .button{ justify-self: center; margin-top: .5rem !important; } }