/*
Theme Name: Print Hero
Author: Seven Hills Creative
Author URI: https://www.sevenhillscreative.co.uk/
Description: Another custom theme for a happy customer!
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2025.1
Requires at least: 5.2
Requires PHP: 7.0
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}
main,article{
grid-column: 1 / 17;
}
h1,h2,h3,h4,h5,h6,p,a,button, li, ul{
font-family: "Montserrat", sans-serif;
text-decoration: none;
line-height: 1.5;
overflow-wrap: break-word;
}
h1,h2,h3,h4,h5,h6{
line-height: 1.2;
text-wrap: balance;
}
.button-link{
text-decoration: none;
}
body, nav{
background-color: #ffffff;
color: #1b1b1b;
display: grid;
grid-template-columns: 1fr;
width: 100%;
}
nav.ph-sp__breadcrumbs, nav.woocommerce-breadcrumb{
display: block;
}
nav.breadcrumb, nav.woocommerce-breadcrumb, .ph-page__breadcrumbs nav{
background-color: #fab816;
font-weight: bold;
}
section.content-area{
grid-column: 2 / 16;
}
/*//////////////////login ///////////////////////////////////////*/
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background-color: white;
padding: 50px;
width: 800px;
position: relative;
}
.modal-content h2{
font-size: 30px;
font-weight: 700;
color: #1b1b1b;
padding-bottom: 30px;
}
.close {
position: absolute;
top: 5px;
right: 20px;
font-size: 70px;
cursor: pointer;
color: #a7a9ac;
}
.modal-content form label{
font-family: "Montserrat", sans-serif;
font-size: 18px;
font-weight: 600;
}
.modal-content form input{
border: #cdced0 2px solid ;
height: 45px;
width: 100%;
font-size: 18px;
}
.modal-content form button{
border: none;
background-color: #ff8a00;
font-size: 16px;
font-weight: 600;
padding: 10px 50px;
}
.login-split{
display: grid;
grid-template-columns: auto auto;
padding-top: 20px;
}
.login-left{
display: grid;
grid-template-rows: 1fr 1fr;
}
.login-right{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
text-align: center;
}
.login-left a{
font-size: 16px;
font-weight: 600;
color: #1b1b1b;
}
.login-right a{
background-color: #808285;
font-size: 16px;
font-weight: 600;
padding: 10px 50px;
}
.orange{
color: #fab816;
}
@media only screen and (max-width: 970px) {
.login-split{
grid-template-columns: 1fr;
grid-template-rows: auto auto;
}
.login-right{
grid-row: 1;
padding-bottom: 20px;
}
}
/*//////////////////Image on left and two on the right/////////////////////*/
.one-left-two-right-box{
grid-column: 2/16;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 30px 0px;
margin: 0px auto;
gap: 40px;
}
.two-right-box{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
gap: 40px;
}
.one-left{
width: 43vw;
height: 43vw;
display: grid;
grid-template-columns: repeat(2, auto);
}
.one-left p, .one-left a, .one-right p, .one-right a{
text-transform: uppercase;
font-size: 20px;
font-weight: 600;
}
.one-left p, .one-right p{
margin: auto;
font-size: 40px;
font-weight: 800;
color: #ffba00;
border: 3px solid #000;
padding: 16px;
border-radius: 20px;
}
.one-left a{
margin-top: auto;
margin-left: auto;
color: #000101;
background-color: white;
padding: 10px;
border-radius: 10px;
text-align: center;
}
.one-right{
width: auto;
height: auto;
display: grid;
grid-template-rows: repeat(2, auto);
}
.one-right p{
margin-left: auto;
margin-top: 50px;
margin-right: 45px;
text-align: center;
line-height: 1;
}
.one-right a{
padding: 20px 20px;
border-radius: 10px;
margin-top: auto;
margin-left: auto;
text-align: center;
}
.one-right-top a{
background-color: white;
color: #000101;
}
.one-right-bottom a{
background-color: #fff;
}
.one-left, .one-right{
border-radius: 20px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 0 1.5em 2em;
}
.two-right-box a{
padding: 10px;
}
@media only screen and (max-width: 1350px) {
.one-left-two-right-box{
grid-template-columns: 1fr;
}
.one-left{
width: 87vw;
height: 80vw;
}
.one-right{
width: 87vw;
height: 40vw;
}
.one-left, .one-right{
padding: 0 1.5em 1em;
}
}
@media only screen and (max-width: 650px) {
.one-right a, .one-left a{
text-align: center;
}
.one-right p{
margin-top: 20px;
margin-right: 15px;
}
.one-left p, .one-right p{
font-size: 28px;
}
}
/*///////////////////orange bar with button///////////////////*/
.orange-bar-box{
background-color: #ff8a00;
grid-column: 2/16;
border-radius: 15px;
padding: 15px;
display: flex;
justify-content: space-between;
place-items: center;
}
.orange-bar-box p{
text-transform: uppercase;
font-size: 38px;
font-weight: 700;
line-height: 1;
text-align: center;
margin-bottom: 12px;
}
.orange-bar-box p span{
color: #ffc580;
}
.orange-bar-box a{
text-transform: uppercase;
font-size: 20px;
font-weight: 700;
padding: 15px 50px;
background-color: white;
color: #000101;
border-radius: 10px;
text-align: center;
}
@media only screen and (max-width: 600px) {
.orange-bar-box{
flex-wrap: wrap;
}
.orange-bar-box a{
width: 100%;
}
}
/*////////////////Three boxes with buttons (normal)/////////////////////*/
.three-boxes-box{
grid-column: 2/16;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
padding: 30px 0px;
}
.three-box{
border-radius: 20px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: auto;
height: 17vw;
display: grid;
grid-template-rows: auto;
border: 1px solid #a7a9ac;
}
.three-box p{
color: #000101;
margin-top: 30px;
margin-left: 30px;
}
.three-box p, .three-box p span{
font-size: 25px;
font-weight: 400;
}
.three-box p span{
font-weight: 700;
}
.three-box a{
background-color: #fab816;
padding: 10px 20px;
color: #000101;
border: 3px solid white;
border-radius: 20px;
font-size: 25px;
font-weight: 700;
margin-top: auto;
margin-left: 40px;
margin-bottom: 40px;
margin-right: auto;
text-transform: uppercase;
}
@media only screen and (max-width: 1350px) {
.three-boxes-box{
grid-template-columns: 1fr;
}
.three-box{
height: 40vw;
}
}
/* ///////////////////Best sellers three boxes///////////////////////////////////*/
.best-seller-colour{
grid-column: 1/17;
background-color: #f3f4f4;
display: grid;
grid-template-columns: repeat(16, 1fr);
border: 2px solid #cdced0;
}
.best-seller-box{
grid-column: 2/16;
padding: 30px 0px;
}
.best-seller-three-box{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
}
.best-seller-box h2{
font-size: 23px;
font-weight: 500;
text-align: center;
padding-bottom: 40px;
color: #000101;
}
.best-seller-box h2 span{
font-size: 40px;
font-weight: 700;
}
.three-box-best{
border-radius: 20px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: auto;
height: 17vw;
display: grid;
grid-template-rows: auto;
border: 1px solid #a7a9ac;
}
.three-box-best p{
color: #000101;
margin-top: 30px;
margin-left: 30px;
}
.three-box-best p, .three-box-best p span{
font-size: 25px;
font-weight: 400;
}
.three-box-best p span{
font-weight: 700;
}
.three-box-best a{
background-color: #fab816;
padding: 10px 20px;
color: #000101;
border: 3px solid white;
border-radius: 20px;
font-size: 25px;
font-weight: 700;
margin-top: auto;
margin-left: 40px;
margin-bottom: 40px;
margin-right: auto;
text-transform: uppercase;
}
.three-box-best i{
color: #fab816;
font-size: 55px;
position: absolute;
transform: translate(70%, -50%);
}
@media only screen and (max-width: 1350px) {
.best-seller-three-box{
grid-template-columns: 1fr;
}
.three-box-best{
height: 40vw;
}
}
/*///////////////////orange bar with button///////////////////*/
.green-bar-box{
background-color: #1ab471;
grid-column: 2/16;
border-radius: 15px;
padding: 15px;
display: flex;
justify-content: space-between;
place-items: center;
margin: 30px 0px;
}
.green-bar-left{
display: grid;
grid-template-rows: auto;
}
.green-bar-box p:first-of-type {
font-size: 38px;
font-weight: 700;
line-height: 1;
}
.green-bar-box p{
font-weight: 500;
font-size: 23px;
text-align: center;
margin-bottom: 12px;
}
.green-bar-box a{
text-transform: uppercase;
font-size: 20px;
font-weight: 700;
padding: 15px 50px;
background-color: white;
color: #000101;
border-radius: 10px;
text-align: center;
}
@media only screen and (max-width: 600px) {
.green-bar-box{
flex-wrap: wrap;
}
.green-bar-box a{
width: 100%;
}
}
/*/////////////////////Trusted brands list //////////////////////////////*/
.trusted-brands-box{
grid-column: 2/16;
margin: 30px 0px;
}
.trusted-brands-box h2{
font-size: 50px;
font-weight: 700;
color: #000101;
text-align: center;
padding-bottom: 30px;
}
.trusted-brands-list{
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.trusted-brands-list img{
width: 13vw;
height: 10vw;
padding: 20px;
border-radius: 20px;
border: 1px solid #a7a9ac;
}
@media only screen and (max-width: 1350px) {
.trusted-brands-list{
grid-template-columns: repeat(3, 1fr);
place-items: center;
gap: 50px;
}
.trusted-brands-list img{
width: 26vw;
height: 20vw;
}
}
@media only screen and (max-width: 900px) {
.trusted-brands-list{
grid-template-columns: repeat(2, 1fr);
place-items: center;
gap: 50px;
}
.trusted-brands-list img{
width: 41vw;
height: 29vw;
}
}
@media only screen and (max-width: 600px) {
.trusted-brands-list{
grid-template-columns: 1fr;
place-items: center;
gap: 50px;
}
.trusted-brands-list img{
width: 85vw;
height: 56vw;
}
}
/*///////////////////////Reasons to shop with us //////////////////////*/
.shop-with-us-colour{
grid-column: 1/17;
background-color: #f3f4f4;
display: grid;
grid-template-columns: repeat(16, 1fr);
border: 2px solid #cdced0;
}
.shop-with-us-box{
grid-column: 2/16;
grid-template-columns: 1fr;
text-align: center;
padding-top: 30px;
}
.shop-with-us-box h2{
color: #000101;
font-size: 55px;
font-weight: 700;
padding-bottom: 30px;
line-height: 0.9;
}
.shop-with-us-box p{
color: #000101;
font-size: 18px;
font-weight: 500;
padding-bottom: 20px;
width: 50%;
margin: 0px auto;
}
.shop-with-us-box a{
color: #000101;
font-size: 22px;
font-weight: 700;
}
.shop-with-us-3-outer{
display: flex;
justify-content: space-around;
padding-top: 40px;
}
.shop-with-us-3-inner img{
width: 15vw;
height: 15vw;
}
.shop-with-us-3-inner h3{
color: #000101;
font-size: 20px;
font-weight: 700;
}
.shop-with-us-3-inner p{
width: 75%;
font-weight: 400;
}
@media only screen and (max-width: 900px) {
.shop-with-us-3-outer{
flex-wrap: wrap;
}
.shop-with-us-3-inner p{
width: 80%;
padding-bottom: 100px;
}
.shop-with-us-3-inner img{
width: 45vw;
height: 45vw;
}
}
/*//////////////////////our story/////////////////////////*/
.our-story-box{
grid-column: 2/16;
text-align: center;
padding-bottom: 60px;
}
.our-story-box h2{
color: #000101;
font-size: 55px;
font-weight: 700;
padding-bottom: 30px;
padding-top: 50px;
}
.our-story-inner{
display: grid;
grid-template-columns: 1fr 1fr;
text-align: left;
gap: 100px;
}
.our-story-text p{
color: #000101;
font-size: 22px;
font-weight: 400;
padding-bottom: 20px;
line-height: 37px;
}
.our-story-text h3{
color: #000101;
font-size: 25px;
font-weight: 700;
padding-bottom: 20px;
}
.our-story-inner img{
width: 100%;
border-radius: 20px;
border: 1px solid #b0b0b2;
}
@media only screen and (max-width: 1100px) {
.our-story-inner{
gap: 50px;
}
.our-story-text h3{
font-size: 18px;
}
.our-story-text p{
font-size: 20px;
}
}
@media only screen and (max-width: 900px) {
.our-story-inner{
grid-template-columns: 1fr;
}
.our-story-inner img{
grid-row: 1;
}
}
/*//////////////// six image left and text right//////////////////////////*/
.six-box-colour{
grid-column: 1/17;
background-color: #f3f4f4;
display: grid;
grid-template-columns: repeat(16, 1fr);
border: 2px solid #cdced0;
}
.six-box-box{
grid-column: 2/16;
grid-template-columns: 1fr;
text-align: center;
padding: 40px 0px;
}
.six-box-box h2{
color: #000101;
font-size: 55px;
font-weight: 700;
padding-bottom: 30px;
line-height: 1;
}
.six-box-text{
text-align: left;
}
.six-box-text p{
color: #000101;
font-size: 22px;
font-weight: 400;
padding-bottom: 20px;
line-height: 37px;
}
.six-box-text h3{
color: #000101;
font-size: 25px;
font-weight: 700;
padding-bottom: 20px;
}
.six-box-inner{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.six-box-boxes{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.six-box-boxes img{
width: 100%;
padding: 20px;
border-radius: 20px;
border: 1px solid #a7a9ac;
background-color: white;
}
@media only screen and (max-width: 1400px) {
.six-box-boxes{
gap: 20px;
}
}
@media only screen and (max-width: 1250px) {
.six-box-inner{
grid-template-columns: 1fr;
}
.six-box-boxes{
gap: 50px;
}
.six-box-text h3{
font-size: 20px;
}
.six-box-text p{
font-size: 18px;
}
}
@media only screen and (max-width: 900px) {
.six-box-boxes{
gap: 20px;
}
}
@media only screen and (max-width: 700px) {
.six-box-boxes{
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 500px) {
.six-box-boxes{
grid-template-columns: 1fr;
}
}
/*//////////////////////////////footer///////////////////////////////////////*/
.footer-box{
display: grid;
grid-column: 2/16;
grid-template-columns: repeat(5, auto);
padding-top: 50px;
gap: 50px;
padding-bottom: 30px;
}
.footer-box h3, .footer-box p, .footer-box a{
color: #000101;
font-size: 15px;
font-weight: 500;
}
.footer-box p, .footer-box a{
padding-bottom: 7px;
}
.footer-image-contact img{
width: 18vw;
padding-bottom: 30px;
}
.footer-image-contact p:last-of-type {
padding-bottom: 25px;
}
.footer-pages, .footer-nav{
display: grid;
grid-template-columns: 1fr;
align-items: start;
align-content: start;
}
.footer-pages h3, .footer-nav h3, .footer-socials h3, .footer-subscribe h3{
color: #000101;
font-size: 20px;
font-weight: 500;
padding-bottom: 10px;
border-bottom: 1px solid black;
margin-bottom: 10px;
}
.footer-socials i{
font-size: 40px;
}
.footer-input,
.footer-subscribe .wpcf7 input[type="text"],
.footer-subscribe .wpcf7 input[type="email"],
.footer-subscribe .wpcf7 input[type="tel"]{
width: 100%;
height: 50px;
border: 1px solid #1b1b1b;
background-color: transparent;
padding: 12px 16px;
font-size: 18px;
font-family: "Montserrat", sans-serif;
}
.footer-subscribe form label{
color: #000101;
font-size: 16px;
font-weight: 600;
font-family: "Montserrat", sans-serif;
display: block;
margin-bottom: 10px;
}
.footer-subscribe .wpcf7 p{
margin-bottom: 30px;
}
.footer-subscribe .wpcf7-spinner{
display: none;
}
.footer-submit,
.footer-subscribe .wpcf7 input[type="submit"]{
padding: 18px 40px;
border-radius: 24px;
color: #000101;
background-color: #fab816;
border: none;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.footer-subscribe .wpcf7 form.invalid .wpcf7-response-output,
.footer-subscribe .wpcf7 form.unaccepted .wpcf7-response-output,
.footer-subscribe .wpcf7 form.payment-required .wpcf7-response-output{
border-color: #1b1b1b;
font-size: 14px;
}
.footer-subscribe .wpcf7-not-valid-tip{
font-size: 14px;
}
@media only screen and (max-width: 1200px) {
.footer-box{
grid-template-columns: repeat(3, auto);
}
.footer-subscribe{
grid-column: 2/-1;
}
}
@media only screen and (max-width: 1200px) {
.footer-box{
grid-template-columns: repeat(2, auto);
}
.footer-subscribe{
grid-column: 1/-1;
}
}
@media only screen and (max-width: 450px) {
.footer-box{
grid-template-columns: repeat(1, auto);
}
.footer-subscribe{
grid-column: auto;
}
}
.footer-yellow{
grid-column: 1/-1;
padding-bottom: 20px;
width: 100%;
background-color: #fab816;
}
/*////////////////////////////////////////location info/////////////////////////////*/
.loaction-info-box{
grid-column: 2/16;
}
.loaction-info-box h2{
color: #fab816;
font-size: 18px;
font-weight: 700;
padding: 25px 0px;
}
.location-info-current{
color: #000101;
}
/*//////////////////////////////Title with text on left and links on the right////////////////////////////*/
.quick-links-box{
grid-column: 2/16;
text-align: center;
}
.quick-links-box h2{
color: #000101;
font-size: 25px;
font-weight: 700;
padding-bottom: 50px;
}
.quick-links-text{
text-align: left;
}
.quick-links-text p{
color: #000101;
font-size: 18px;
font-weight: 400;
padding-bottom: 20px;
}
.quick-links-inner-box{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
}
.quick-links-inner-box.portal{
grid-template-columns: 1fr;
}
.quick-links-inner-box.portal *{
color: #000101;
}
.quick-links{
text-align: left;
}
.quick-links h3{
color: #000101;
font-size: 20px;
font-weight: 700;
padding-bottom: 20px;
}
.quick-links-links-box{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
text-align: center;
}
.quick-links-links-box a{
color: #000101;
font-size: 15px;
font-weight: 700;
padding: 15px 15px;
border: 1px solid #fab816;
border-radius: 10px;
}
@media only screen and (max-width: 850px) {
.quick-links-inner-box{
grid-template-columns: 1fr;
gap: 0px;
}
}
@media only screen and (max-width: 550px) {
.quick-links-links-box{
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 350px) {
.quick-links-links-box{
grid-template-columns: repeat(1, 1fr);
}
}
/*//////////////////Featured 3 images ///////////////////////////////*/
.featured-box{
grid-column: 2/16;
text-align: left;
padding-top: 50px;
}
.featured-box h2{
color: #000101;
font-size: 20px;
font-weight: 700;
padding-bottom: 50px;
}
.featured-inner-box{
display: flex;
justify-content: space-between;
padding-bottom: 50px;
flex-wrap: wrap;
}
.featured-all p{
color: #000101;
font-size: 18px;
font-weight: 500;
}
.featured-all{
width: 28vw;
height: 17vw;
background-position: center;
border-radius: 25px;
display: grid;
grid-template-columns: auto;
}
.featured-inner-box-bottom{
margin-top: auto;
margin-bottom: 10px;
margin-left: 25px;
}
.featured-inner-box-top{
margin-top: 25px;
margin-left: 25px;
}
.yellow{
color: #fab816;
}
.bold{
font-weight: bold;
}
@media only screen and (max-width: 1000px) {
.featured-all{
width: 90vw;
height: 33vw;
}
.featured-inner-box{
gap: 25px;
}
}
/*//////////////////// catagories with many pictures /////////////////////////////////*/
.catagories-colour{
grid-column: 1/-1;
display: grid;
grid-template-columns: repeat(16, 1fr);
background-color: #f3f4f4;
border: 1px solid #cdced0;
margin-top: 15px;
}
.catagories-box{
grid-column: 2/16;
padding-bottom: 50px;
}
body.archive.tax-product_cat nav.woocommerce-pagination, div.search-pagination{
border-radius: 20px;
grid-column: 2/16;
padding: 20px;
margin-bottom: 50px;
grid-template-columns: 1fr;
background-color: #f3f4f4;
border: 1px solid #cfc8d8;
}
body.archive.tax-product_cat nav.woocommerce-pagination ul{
width: 100%;
border: 0;
}
body.archive.tax-product_cat nav.woocommerce-pagination ul li{
margin-right: 8px;
border: 0;
}
div.search-pagination a.page-numbers{
margin-right: 8px;
}
body.archive.tax-product_cat nav.woocommerce-pagination ul a.page-numbers, div.search-pagination span.page-numbers{
font-size: 1.3em;
font-weight: 700;
color: #000;
padding: 6px;
}
body.archive.tax-product_cat nav.woocommerce-pagination ul span.current, div.search-pagination span.page-numbers.current{
background-color: var(--brand);
border-radius: 10px;
border: 1px solid #000;
color: #000;
font-size: 1.3em;
font-weight: 700;
padding: 6px;
}
body.archive.tax-product_cat nav.woocommerce-pagination ul span.dots, div.search-pagination span.dots{
color: #000;
font-size: 1.3em;
font-weight: 700;
padding: 6px;
}
.catagories-box h2, .catagories-box p{
color: #1b1b1b;
}
.catagories-box h2{
padding: 15px 0px;
font-size: 20px;
font-weight: 700;
}
.catagories-inner-box ul{
display: grid;
justify-content: space-between;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.catagories-inner-box ul.products::before{
display: none !important;
}
.catagories-content-all{
min-height: 24vh;
background-position: center;
border-radius: 25px;
border: 1px solid #cdced0;
}
.catagories-content-all p{
margin: 20px;
font-size: 20px;
font-weight: 700;
padding: 12px;
background-color: rgba(255,255,255,0.6);
border-radius: 20px;
-webkit-box-shadow: 1.5px 1.5px 8px -2px #B9B9B9;
box-shadow: 1.5px 1.5px 8px -2px #B9B9B9;
}
@media only screen and (max-width: 1000px) {
.catagories-inner-box ul{
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 490px) {
.catagories-inner-box ul{
grid-template-columns: 1fr;
}
}
.woocommerce .woocommerce-ordering select{
padding: 8px;
border-radius: 40px;
}
/*////////////////////////////////Track my order/////////////////////////////////////////*/
.track-colour{
grid-column: 1/-1;
display: flex;
background-color: #f3f4f4;
width: 100%;
padding: 50px 0px 100px 0px;
}
.track-box{
margin: auto;
background-color: white;
border: 1px solid #cdced0 ;
padding: 50px 150px;
width: 700px;
}
.track-box h2{
font-size: 27px;
font-weight: 700;
color: #1b1b1b;
padding-bottom: 30px;
text-align: center;
}
.track-box form{
display: grid;
}
.track-box form div label{
font-family: "Montserrat", sans-serif;
font-size: 18px;
font-weight: 600;
}
.track-box form div input{
border: #cdced0 2px solid ;
height: 45px;
width: 100%;
font-size: 18px;
}
.track-box form div{
padding-bottom: 20px;
}
.track-box form button{
border: none;
background-color: #ff8a00;
font-size: 15px;
font-weight: 600;
padding: 10px 20px;
margin: 0px auto;
}
@media only screen and (max-width: 750px) {
.track-box{
padding: 50px 90px;
}
}
@media only screen and (max-width: 450px) {
.track-box{
padding: 50px 60px;
}
}
/*////////////////////////////////Contact us page ////////////////////////////////////////////*/
.contact-us-colour{
grid-column: 1/-1;
background-color: #f3f4f4;
border: 1px solid #cdced0;
display: grid;
grid-template-columns: repeat(16,1fr);
padding: 50px 0px;
}
.contact-us-box{
grid-column: 2/16;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.contact-us-box h2, .contact-us-box h3, .contact-us-box p, .contact-us-box a{
color: #1b1b1b;
}
.contact-us-content h2, .contact-us-form h2{
font-size: 30px;
font-weight: 700;
padding: 50px 0px;
}
.contact-us-content p{
padding: 9px 0px;
font-size: 17px;
font-weight: 500;
}
.contact-us-content h3{
padding-bottom: 9px;
font-size: 18px;
font-weight: 700;
}
.contact-us-form{
border: 1px solid #cdced0;
background-color: white;
padding: 50px;
margin: 0px auto;
width: 700px;
}
.contact-us-form h2{
text-align: center;
padding: 0px 0px 30px 0px;
}
.contact-us-form p{
font-size: 17px;
font-weight: 500;
width: 300px;
text-align: center;
padding-bottom: 30px;
margin: 0px auto;
}
.contact-us-form form div label{
font-family: "Montserrat", sans-serif;
font-size: 18px;
font-weight: 600;
}
.contact-us-form form div input{
border: #cdced0 2px solid ;
height: 45px;
width: 100%;
font-size: 18px;
}
.contact-us-form form div{
padding-bottom: 20px;
}
.contact-us-form form div textarea{
border: #cdced0 2px solid ;
height: 100px;
width: 100%;
font-size: 18px;
}
.contact-us-form form button{
border: none;
background-color: #ff8a00;
font-size: 16px;
font-weight: 600;
padding: 10px 50px;
}
@media only screen and (max-width: 1350px) {
.contact-us-form{
width: 45vw;
}
}
@media only screen and (max-width: 950px) {
.contact-us-box{
grid-template-columns: 1fr;
gap: 25px;
}
.contact-us-content{
margin: 0px auto;
}
.contact-us-form{
width: 75vw;
}
}
@media only screen and (max-width: 1350px) {
.contact-us-form{
width: 100%;
}
}
/*///////////////////////////////// Print hero big logo /////////////////////////////*/
.big-logo-orange{
grid-column: 1/-1;
background-color: #fab816;
display: flex;
padding: 50px 0px 150px 0px ;
}
.big-logo-orange img{
margin: 0px auto;
width: 50vw;
height: 10vw;
}
/*/////////////////////////////////////Box with text move up/////////////*/
.box-with-text-moved-up-colour{
grid-column: 1/-1;
display: grid;
grid-template-columns: repeat(16,1fr);
background-color: #f3f4f4;
}
.box-with-text-moved-up{
grid-column: 1/-1;
background-color: white;
padding: 25px 50px 75px 50px;
border: #cdced0 1px solid;
text-align: center;
width: 800px;
margin: 0px auto;
transform: translateY(-100px);
}
.box-with-text-moved-up h2{
font-size: 30px;
font-weight: 700;
color: #1b1b1b;
padding: 25px 0px 50px 0px;
}
.box-with-text-moved-up h3{
padding-bottom: 10px;
font-size: 18px;
font-weight: 600;
color: #1b1b1b;
}
.box-with-text-moved-up p{
padding: 10px 0px;
font-size: 17px;
font-weight: 400;
color: #1b1b1b;
}
.box-with-text-moved-up h3, .box-with-text-moved-up p{
width: 80%;
margin: 0px auto;
}
@media only screen and (max-width: 800px) {
.box-with-text-moved-up{
width: 100%;
}
}
@media only screen and (max-width: 650px) {
.box-with-text-moved-up h3, .box-with-text-moved-up p{
width: 95%;
}
}
/*/////////////////////3 counters with title below///////////////////////*/
.counter-colour{
grid-column: 1/-1;
background-color: #f3f4f4;
display: grid;
grid-template-columns: repeat(16,1fr);
}
.counter-box{
grid-column: 4/14;
display: flex;
justify-content: space-between;
padding-bottom: 100px;
}
.counter-content p{
font-size: 28px;
font-weight: 600;
color: #1b1b1b;
}
.orange-numbers{
font-size: 32px;
color: #fab816;
font-weight: 700;
}
.counter-content{
text-align: center;
}
@media only screen and (max-width: 800px) {
.counter-box{
grid-column: 2/16;
}
}
@media only screen and (max-width: 570px) {
.counter-box{
flex-wrap: wrap;
}
.counter-content{
width: 100%;
padding: 50px;
}
}
/*/////////////////////////////////////Box with text and image/////////////*/
.box-with-text-image-colour{
grid-column: 1/-1;
display: grid;
grid-template-columns: repeat(16,1fr);
background-color: #f3f4f4;
}
.box-with-text-image{
grid-column: 1/-1;
background-color: white;
padding: 25px 50px 75px 50px;
border: #cdced0 1px solid;
text-align: center;
width: 800px;
margin: 0px auto;
margin-bottom: 70px;
}
.box-with-text-image h2{
font-size: 30px;
font-weight: 700;
color: #1b1b1b;
padding: 25px 0px 50px 0px;
}
.box-with-text-image h3{
padding-bottom: 10px;
font-size: 18px;
font-weight: 600;
color: #1b1b1b;
}
.box-with-text-image p{
padding: 10px 0px;
font-size: 17px;
font-weight: 400;
color: #1b1b1b;
}
.box-with-text-image h3, .box-with-text-image p{
width: 80%;
margin: 0px auto;
}
.box-with-text-image img{
border-radius: 25px;
border: 1px solid #cdced0;
margin-top: 30px;
width: 80%;
}
@media only screen and (max-width: 800px) {
.box-with-text-image{
width: 100%;
}
}
@media only screen and (max-width: 650px) {
.box-with-text-image h3, .box-with-text-image p{
width: 95%;
}
.box-with-text-image img{
width: 90%;
}
}
/*//////////////////////////big contact text////////////////////////////////*/
.big-contact-colour{
grid-column: 1/-1;
grid-template-columns: repeat(16,1fr);
display: grid;
background-color: #f3f4f4;
padding-bottom: 80px;
border-bottom: 1px solid #cdced0;
}
.big-contact-box{
grid-column: 2/16;
text-align: center;
}
.big-contact-box h2, .big-contact-box p, .big-contact-box a{
font-size: 30px;
font-weight: 700;
color: #1b1b1b;
}
.big-contact-box h2, .big-contact-box h3{
padding-bottom: 45px;
}
/*//////////////////////supllier banner////////////////////////////////*/
.supplier-banner-colour{
grid-column: 1/-1;
display: grid;
grid-template-columns: repeat(16,1fr);
background-color: #f3f4f4;
}
.supplier-banner{
grid-column: 2/16;
}
.supplier-banner img{
width: 100%;
height: 15vw;
}
/*///////////////////supplier title and text////////////////////////////////*/
.supplier-title-colour{
grid-column: 1/-1;
display: grid;
grid-template-columns: repeat(16,1fr);
background-color: #f3f4f4;
padding-bottom: 25px;
}
.supplier-title-text-box{
grid-column: 2/16;
text-align: center;
}
.supplier-title-text-box h2{
font-size: 30px;
font-weight: 700;
color: #1b1b1b;
padding: 50px 0px;
}
.supplier-title-text-box h3{
padding-bottom: 10px;
font-size: 18px;
font-weight: 600;
color: #1b1b1b;
padding-bottom: 20px;
}
.supplier-title-text-box p{
font-size: 17px;
font-weight: 400;
color: #1b1b1b;
padding-bottom: 20px;
}
.supplier-title-text-box a{
padding-bottom: 10px;
font-size: 18px;
font-weight: 700;
color: #fab816;
}
/*//////////////////////////////supplier products 4 wide ///////////////////////////////*/
.supplier-product-4-colour{
grid-column: 1/-1;
display: grid;
grid-template-columns: repeat(16,1fr);
background-color: #f3f4f4;
padding-bottom: 50px;
}
.supplier-product-4-box{
grid-column: 2/16;
display: flex;
justify-content: space-between;
}
.supplier-product-4-all{
width: 19vw;
padding-bottom: 10px;
border: 1px solid #cdced0;
background-color: white;
}
.supplier-product-4-all img{
width: 19vw;
}
.supplier-product-4-all h3{
padding-bottom: 10px;
font-size: 18px;
font-weight: 600;
color: #1b1b1b;
padding-bottom: 20px;
margin: 0px 20px;
}
.supplier-product-4-all p{
font-size: 17px;
font-weight: 400;
color: #1b1b1b;
padding-bottom: 20px;
margin: 0px 20px;
}
.supplier-product-4-all a{
background-color: #ff8a00;
font-size: 16px;
font-weight: 600;
padding: 10px 40px;
margin: 0px auto;
display: block;
text-align: center;
width: fit-content;
}
/*//////////////////////////////Box with list on left with image/////////////////////////*/
.box-list-left-colour{
grid-column: 1/-1;
display: grid;
grid-template-columns: repeat(16,1fr);
background-color: #f3f4f4;
padding-bottom: 50px;
}
.box-list-left-box{
grid-column: 2/16;
background-color: white;
border: 1px solid #cdced0;
display: grid;
grid-template-columns: auto auto;
}
.box-list-left h2{
font-size: 30px;
font-weight: 700;
color: #1b1b1b;
text-align: center;
padding: 25px 0px 10px 0px;
}
.box-list-left h3{
padding-bottom: 10px;
font-size: 18px;
font-weight: 600;
color: #1b1b1b;
text-align: center;
padding-bottom: 15px;
}
.box-list-left li{
font-size: 17px;
font-weight: 400;
color: #1b1b1b;
padding-bottom: 20px;
margin-left: 40px;
}
.box-list-left ul{
list-style: disc;
}
.box-list-left-box img{
width: fit-content;
}
/*//////////////////////////filter products side bar///////////////////////////////////////////*/
.filter-products-colour{
grid-column: 1/5;
display: grid;
grid-template-columns: repeat(5,1fr);
background-color: #f3f4f4;
border-radius: 10px;
padding: 16px 16px 50px 16px;
}
.filter-products-box{
grid-column: 1/6;
}
.filter-products-box button{
border: none;
box-shadow: none;
}
.sidebar h2{
font-size: 22px;
font-weight: 700;
color: #1b1b1b;
text-align: left;
padding: 35px 0px 10px 0px;
}
.filter-dropdown {
position: relative;
padding-bottom: 7px;
border-top: 2px solid rgb(205, 206, 208);
}
.dropbtn {
width: 100%;
border: none;
border-top: 2px solid #cdced0;
text-align: left;
cursor: pointer;
font-size: 16px;
font-weight: 700;
color: #1b1b1b;
background-color: #f3f4f4;
border-radius: 0px;
display: flex;
justify-content: space-between;
padding: 7px 0px 0px;
}
.see-more-btn{
text-align: left;
font-size: 16px;
font-weight: 400;
color: #1b1b1b;
background-color: #f3f4f4;
border: none;
cursor: pointer;
}
.dropdown-content {
display: none;
position: relative;
border: none;
}
.dropdown-content label{
font-family: "Montserrat", sans-serif;
font-size: 17px;
font-weight: 300;
color: #1b1b1b;
padding-bottom: 15px;
padding-top: 4px;
}
.filter-dropdown.active .dropdown-content {
display: block;
}
.filter-dropdown.active .filter-open {
display: block;
}
.filter-dropdown.active .filter-closed {
display: none;
}
.filter-dropdown.active .dropbtn {
padding-bottom: 7px;
}
.filter-open{
display: none;
color: #fab816;
}
.filter-closed{
display: block;
color: #fab816;
}
.dropdown-content label {
display: block;
cursor: pointer;
}
.sidebar button[type="submit"] {
background: #ffa41c;
border: none;
cursor: pointer;
color: #1b1b1b;
font-weight: bold;
padding: 5px 25px;
margin: 0px auto;
display: block;
margin-top: 25px;
}
.sidebar button[type="submit"]:hover {
background: #f89808;
}
.shop-filters-actions {
margin-top: 20px;
display: flex;
justify-content: flex-start;
}
.shop-filters-actions .filter-clear {
display: inline-block;
background: #FAB816;
color: #1b1b1b;
font-weight: 700;
text-decoration: none;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.shop-filters-actions .filter-clear:hover {
background: #333333;
}
/* Hide default checkboxes */
.filter-products-colour input[type="checkbox"]{
position:absolute;
opacity:0;
cursor:pointer;
}
/* Custom checkmark for Features and Gender */
.custom-checkbox {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
user-select: none;
}
.custom-checkbox .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #fff;
border: 2px solid #333;
border-radius: 3px;
}
/* Show tick when checked */
.custom-checkbox input:checked + .checkmark::after {
content: "";
position: absolute;
left: 6px;
top: -2px;
width: 7px;
height: 18px;
border: solid #333;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Colour checkboxes */
.colours label {
display: inline-block;
margin: 5px;
width: 24px;
height: 24px;
position: relative;
cursor: pointer;
}
.colours label span {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border: 2px solid #333;
border-radius: 30px;
display: block;
}
/* Tick for colour checkboxes */
.colours label input:checked + span::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.colours label.c-white input:checked + span::after {
border: solid #888;
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Colour backgrounds
.colours .c-yellow span { background-color: #fffe54; }
.colours .c-skin span { background-color: #f3b05d; }
.colours .c-black span { background-color: #000000; }
.colours .c-light-blue span { background-color: #5394d2; }
.colours .c-brown span { background-color: #824820; }
.colours .c-dark-purple span { background-color: #6d364b; }
.colours .c-muted-green span { background-color: #94aa37; }
.colours .c-super-light-blue span { background-color: #c3c5cb; }
.colours .c-grey span { background-color: #dcd6ce; }
.colours .c-pink span { background-color: #da96b5; }
.colours .c-purple span { background-color: #611ca6; }
.colours .c-wine-red span { background-color: #b83236; }
.colours .c-grey-2 span { background-color: #dbdbdb; }
.colours .c-white span { background-color: #ffffff; }
.colours .c-darkblue span { background-color: #112e64; } */
.filter-dropdown.active .dropdown-content{
display: grid;
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.filter-dropdown.active .dropdown-content-colours{
display: flex !important;
gap: 1px !important;
flex-wrap: wrap !important;
}
.filter-button{
display: none;
}
/*/////////////////////////////////// product page title and info ///////////////////////*/
.product-page-colour{
grid-column: 5/17;
display: grid;
grid-template-columns: repeat(12,1fr);
background-color: #f3f4f4;
padding-bottom: 50px;
}
.product-page-box{
grid-column: 1/12;
}
.product-page-title-and-info h1{
font-size: 32px;
font-weight: 700;
color: #1b1b1b;
}
.product-page-title-and-info p{
font-size: 18px;
font-weight: 700;
color: #1b1b1b;
padding: 40px 0px ;
}
.product-page-title-and-info a{
font-size: 18px;
font-weight: 700;
color: #fab816;
}
/*//////////////////////Product page sorting then item content///////////////////////////////////*/
.product-showcase-sorting{
padding:25px 0px;
display: flex;
justify-content: space-between;
border-top: 2px solid #cdced0;
margin-top: 25px;
}
.product-showcase-sorting p{
color: #1b1b1b;
}
.sort-by {
position: relative;
}
.sort-btn {
padding: 5px 10px;
border: 1px solid #000000;
cursor: pointer;
color: #1b1b1b;
background-color: white;
}
.sort-btn .chevron {
font-size: 0.8rem;
}
.sort-options {
display: none; /* hidden by default */
position: absolute;
top: 110%;
left: 0;
background: #fff;
border: 1px solid #ccc;
border-radius: 0.3rem;
list-style: none;
margin: 0;
padding: 0.2rem 0;
width: max-content;
min-width: 180px;
z-index: 10;
}
.sort-options li {
padding: 0.5rem 0.8rem;
cursor: pointer;
color: #1b1b1b;
}
.sort-options li:hover {
background: #f0f0f0;
}
/*///////////////Content//////////////*/
.product-showcase-content-box{
display: flex;
justify-content: space-between;
gap: 25px;
flex-wrap: wrap;
}
.product-content-all{
display: grid;
grid-template-columns: 1fr;
width: 22vw;
border: 3px solid #cdced0;
overflow: hidden;
background-color: white;
flex: 0 0 calc(33.333% - 18px); /* 3 per row accounting for gap */
}
.product-content-text{
padding: 10px;
padding-right: 20px;
}
.product-content-all img{
width: 100%;
object-fit: cover;
display: block;
}
.product-content-text p{
font-size: 17px;
font-weight: 400;
color: #1b1b1b;
}
.product-content-text .product-type{
font-weight: 600;
}
.product-content-text .product-price span{
font-weight: 600;
}
.product-price{
padding-bottom: 5px;
}
.color-slider-wrapper {
position: relative;
display: flex;
align-items: center;
width: 288px;
max-width: 500px;
overflow: hidden;
padding: 10px;
background: #f9f9f9;
margin: 0px auto;
}
.color-slider {
display: flex;
gap: 8px;
overflow: hidden;
}
.color-item {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: red;
border: 2px solid #333;
flex-shrink: 0;
}
.color-slider .c-yellow{ background-color: #fffe54; }
.color-slider .c-skin { background-color: #f3b05d; }
.color-slider .c-black { background-color: #000000; }
.color-slider .c-light-blue { background-color: #5394d2; }
.color-slider .c-brown { background-color: #824820; }
.color-slider .c-dark-purple { background-color: #6d364b; }
.color-slider .c-muted-green { background-color: #94aa37; }
.color-slider .c-super-light-blue { background-color: #c3c5cb; }
.color-slider .c-grey { background-color: #dcd6ce; }
.color-slider .c-pink { background-color: #da96b5; }
.color-slider .c-purple { background-color: #611ca6; }
.color-slider .c-wine-red { background-color: #b83236; }
.color-slider .c-grey-2 { background-color: #dbdbdb; }
.color-slider .c-white { background-color: #ffffff; }
.color-slider .c-darkblue { background-color: #112e64; }
/* Buttons */
.slider-btn {
background: white;
color: #1b1b1b;
border: none;
font-size: 1.5rem;
cursor: pointer;
padding: 0 10px;
z-index: 10;
}
.left-btn { margin-right: 5px; }
.right-btn { margin-left: 5px; }
.slider-btn.is-hidden { display: none; }
.product-custimisation-availability{
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.product-custimisation-availability a{
background: #ffa41c;
border: none;
color: #1b1b1b;
font-weight: bold;
padding: 3px 20px;
font-size: 11px;
}
/*///// page buttons ///////////////////////*/
.product-content-page-buttons{
display: flex;
gap: 10px;
padding: 25px 0px;
}
.product-content-page-buttons a{
font-size: 17px;
font-weight: 400;
color: #1b1b1b;
cursor: pointer;
}
@media only screen and (max-width: 1400px) {
.filter-button {
display: none;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 15px;
cursor: pointer;
z-index: 18;
color: #1b1b1b;
border: #cdced0 2px solid;
margin: auto 0px;
margin-right: 25px;
}
.filter-products-colour {
position: static;
top: auto;
left: auto;
height: auto;
width: 100%;
background: #f3f4f4;
transform: none;
opacity: 1;
transition: none;
z-index: auto;
padding-bottom: 50px;
}
.filter-products-colour.active {
transform: none;
opacity: 1;
}
.product-page-colour{
grid-column: 1/17;
grid-template-columns: repeat(16,1fr);
}
.product-page-box{
grid-column: 2/16;
}
.product-showcase-sorting{
justify-content: left;
margin: auto 0px;
}
.product-showcase-sorting p{
margin: auto 0px;
}
.sort-by{
margin-left: auto;
}
}
@media only screen and (max-width: 1100px) {
.product-content-all{
width: 22vw;
flex: 0 0 calc(50% - 13px); /* 3 per row accounting for gap */
}
}
@media only screen and (max-width: 730px) {
.product-content-all{
width: 22vw;
flex: 0 0 calc(100% - 13px); /* 3 per row accounting for gap */
}
}
/*//////////////////////////////////////////////////???SINGLE PRODUCT???/////////////////////*/
.single-product-main{
grid-column: 1 / 17;
grid-template-columns: 1fr;
}
.single-product-main > [id^="product-"]{
grid-column: 1 / -1;
}
:root{
--brand:#fab816;
--brand-600:#e1a514;
--ink:#1b1b1b;
--muted:#6b7280;
--bg:#ffffff;
--bg-soft:#f7f7f8;
--line:#e6e6eb;
--success:#16a34a;
--danger:#dc2626;
--radius:14px;
--shadow:0 8px 24px rgba(0,0,0,.08);
--shadow-soft:0 4px 14px rgba(0,0,0,.06);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.container{max-width:1200px;margin:0 auto;padding:24px}
a{color:inherit;text-decoration:none}
.button, button, input[type="submit"]{
appearance:none;border:0;background:var(--brand);color:#1b1b1b;
padding:12px 18px;border-radius:12px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-soft);
}
.button:hover, button:hover, input[type="submit"]:hover{filter:brightness(0.97)}
.button.secondary{background:#111;color:#fff}
.button.ghost{background:transparent;border:1px solid var(--line)}
.pill{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--bg-soft);font-size:12px;color:var(--muted)}
.price{font-size:28px;font-weight:800;letter-spacing:.2px}
.price .was{font-size:16px;color:var(--muted);text-decoration:line-through;margin-left:8px;font-weight:500}
.small{font-size:13px;color:var(--muted)}
.badge{position:absolute;top:12px;left:12px;background:var(--brand);color:#111;font-weight:800;padding:6px 10px;border-radius:999px;font-size:12px}
.breadcrumbs{font-size:14px;color:var(--muted);margin-bottom:16px}
.breadcrumbs a{color:inherit}
.breadcrumbs span.separator{margin:0 6px;color:#c4c4c8}
.grid{display:grid;gap:28px;align-items: start}
@media (min-width: 980px){
.product-grid{grid-template-columns: 1.05fr .95fr}
}
/* Product gallery */
.product-gallery{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.media{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#f2f2f4}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.thumbs button{border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:0;overflow:hidden;cursor:pointer}
.thumbs img{display:block;width:100%;height:68px;object-fit:cover}
.labels{position:absolute;left:12px;bottom:12px;display:flex;gap:8px;flex-wrap:wrap}
.labels .pill{background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(4px)}
/* Summary */
.summary{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.product-title{font-size:28px;line-height:1.2;margin:6px 0 8px;font-weight:800}
.product-title{color:#000}
.rating{display:flex;align-items:center;gap:8px}
.stars{display:inline-flex;gap:2px}
.stars i{width:16px;height:16px;display:inline-block;background:linear-gradient(180deg,#111,#333);-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;mask: url('data:image/svg+xml;utf8,') center/contain no-repeat}
.stars i.on{background:var(--brand)}
.sku-stock{display:flex;gap:16px;flex-wrap:wrap}
.sku-stock .green{color:var(--success);font-weight:700}
.sku-stock .red{color:var(--danger);font-weight:700}
.excerpt{margin:8px 0 16px;color:#2b2b2f}
.price-row{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:16px 0}
.inc-ex{display:flex;gap:10px}
.inc-ex button{padding:8px 10px;font-size:13px;border-radius:10px;background:var(--bg-soft)}
.inc-ex button.active{background:var(--brand);color:#111;font-weight:800}
.form-row{margin:14px 0}
.form-row .label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.swatches, .sizes{display:flex;gap:10px;flex-wrap:wrap}
.swatch, .size{
border:1px solid var(--line);background:var(--bg);padding:10px 12px;border-radius:10px;cursor:pointer;font-weight:600;
}
.swatch[aria-pressed="true"], .size[aria-pressed="true"]{outline:2px solid var(--brand)}
.swatch .dot{width:18px;height:18px;border-radius:999px;display:inline-block;vertical-align:-4px;border:1px solid rgba(0,0,0,.1)}
.qty-row{display:flex;gap:12px;align-items:center}
.qty-row{margin:14px 0}
.qty-row form.cart{
display:flex;
gap:12px;
align-items:center;
flex-wrap:wrap;
margin:0;
}
.qty-row .quantity{
display:flex;
align-items:center;
border:1px solid var(--line);
border-radius:10px;
overflow:hidden;
}
.qty-row .quantity .qty{
width:72px;
border:0;
padding:10px;
text-align:center;
font-weight:700;
background:transparent;
}
.qty-row .single_add_to_cart_button{white-space:nowrap}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qty input{width:60px;border:0;padding:10px;text-align:center;font-weight:700}
.qty button{background:var(--bg-soft);padding:10px 12px;border-radius:0}
.buy-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.meta{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px;color:var(--muted);font-size:14px}
.meta span{display:inline-block;margin-right:14px}
.share{margin-top:12px;display:flex;gap:10px;align-items:center}
.share a{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.share i{width:16px;height:16px;background:#111;border-radius:4px}
/* Print options panel */
.panel{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--bg-soft);margin-top:16px}
.panel h4{margin:0 0 10px;font-size:16px}
.positions{display:flex;gap:10px;flex-wrap:wrap}
.chip{padding:8px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);cursor:pointer}
.upload{display:flex;gap:10px;align-items:center}
.upload input[type="file"]{display:block}
/* Tabs */
.woocommerce-tabs{margin-top:28px}
.tabs-card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
.tab-head{display:flex;gap:6px;padding:6px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tab-radio{display:none}
.tab-label{padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;color:#3a3a3f}
.tab-radio:checked + .tab-label{background:var(--brand)}
.tab-content{display:none;padding:18px}
.tab-content .shop-attributes-table{width:100%;border-collapse:collapse}
.tab-content .shop-attributes-table th{
text-align:left;
border-bottom:1px solid var(--line);
padding:8px;
}
.tab-content .shop-attributes-table td{
border-bottom:1px solid var(--line);
padding:8px;
}
.tab-content-title{color:#000}
.review-entry{
border-bottom:1px solid var(--line);
padding-bottom:12px;
margin-bottom:12px;
}
#tab-desc:checked ~ .content #content-desc,
#tab-specs:checked ~ .content #content-specs,
#tab-guides:checked ~ .content #content-guides,
#tab-reviews:checked ~ .content #content-reviews,
#tab-qa:checked ~ .content #content-qa {display:block}
/* Info strips */
.info-strips{display:grid;gap:14px;margin:28px 0}
@media(min-width:780px){.info-strips{grid-template-columns:repeat(4,1fr)}}
.strip{border:1px dashed var(--line);border-radius:14px;background:#fff;padding:14px;display:flex;gap:10px;align-items:center}
.strip i{width:22px;height:22px;border-radius:6px;background:var(--brand)}
/* Related products */
.related.products{margin-top:28px}
.related.products h2{font-size:22px;font-weight:700;color:#1b1b1b;margin-bottom:16px}
.products-grid{display:grid;gap:16px}
@media(min-width:760px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.products-grid{grid-template-columns:repeat(4,1fr)}}
.product-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow-soft);display:flex;flex-direction:column}
.product-card .thumb{aspect-ratio:1/1;background:#f3f3f6}
.product-card img{width:100%;height:100%;object-fit:cover;display:block}
.product-card .body{padding:12px}
.product-card .title{font-weight:700;line-height:1.3;margin:4px 0 6px}
.product-card .meta{border-top:0;padding-top:0;margin-top:4px}
.product-card .price{font-size:18px}
.product-card .actions{display:flex;gap:8px;margin-top:auto;padding:12px}
section.product-grid.grid div.summary{
width: 100% !important;
}
section.product-grid.grid div.summary p{
color: #000 !important;
}
.woocommerce-no-products-found{
grid-column: 2/16;
}
.woocommerce-info{
border-top-color: #fab816;
}
.quick-links-box h1{
font-size: 30px;
font-weight: 700;
color: #1b1b1b;
text-align: center;
padding: 25px 0px 10px 0px;
}
.quick-links-inner-box.portal p{
width: 96%;
max-width: 600px;
justify-self: center;
}
/* Woo linked products -> match existing grid/card look */
.related.products ul.products,
.up-sells.upsells.products ul.products{
display:grid !important;
gap:16px !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
section.related.products ul::after, section.related.products ul::before{
display: none;
}
section.related.products li.product,section.related.products .product-content-all{
width: 100% !important;
flex: none;
border: 0;
}
@media(min-width:760px){
.related.products ul.products,
.up-sells.upsells.products ul.products{
grid-template-columns:repeat(2,1fr) !important;
}
}
@media(min-width:1080px){
.related.products ul.products,
.up-sells.upsells.products ul.products{
grid-template-columns:repeat(4,1fr) !important;
}
}
.related.products ul.products li.product,
.up-sells.upsells.products ul.products li.product{
margin:0 !important;
float:none !important;
width:auto !important;
border:1px solid var(--line) !important;
border-radius:14px !important;
overflow:hidden !important;
background:var(--bg) !important;
box-shadow:var(--shadow-soft) !important;
display:flex !important;
flex-direction:column !important;
padding:0 !important;
}
.related.products ul.products li.product a.woocommerce-LoopProduct-link,
.up-sells.upsells.products ul.products li.product a.woocommerce-LoopProduct-link{
display:block !important;
text-decoration:none !important;
}
.related.products ul.products li.product img,
.up-sells.upsells.products ul.products li.product img{
width:100% !important;
aspect-ratio:1/1 !important;
object-fit:cover !important;
display:block !important;
margin:0 !important;
}
.related.products ul.products li.product .woocommerce-loop-product__title,
.up-sells.upsells.products ul.products li.product .woocommerce-loop-product__title{
font-weight:700 !important;
line-height:1.3 !important;
margin:10px 12px 6px !important;
font-size:16px !important;
}
.related.products ul.products li.product .price,
.up-sells.upsells.products ul.products li.product .price{
margin:0 12px 10px !important;
font-size:18px !important;
}
.related.products ul.products li.product .button,
.up-sells.upsells.products ul.products li.product .button{
margin:12px !important;
margin-top:auto !important;
width:calc(100% - 24px) !important;
}
section.related.products div.color-slider-wrapper{
display: none;
}
/* Gallery wrapper should anchor the badge */
.product-gallery{ position:relative !important; }
/* Woo gallery inside our panel */
.product-gallery .woocommerce-product-gallery{ margin:0 !important; }
.woocommerce-product-gallery{
position: relative;
}
/* Main image wrapper */
.product-gallery .woocommerce-product-gallery__wrapper{
border-radius:12px !important;
overflow:hidden !important;
background:#f2f2f4 !important;
position: relative;
}
.woocommerce-product-gallery__trigger{
position: absolute;
top: 8px;
left: 8px;
}
/* Main image */
.product-gallery .woocommerce-product-gallery__image a{ display:block !important; }
.product-gallery .woocommerce-product-gallery__image img{
width:100% !important;
aspect-ratio:1/1 !important;
object-fit:cover !important;
display:block !important;
}
/* Thumbnails (Flexslider default output) */
.product-gallery .flex-control-thumbs{
display:grid !important;
grid-template-columns:repeat(5,1fr) !important;
gap:10px !important;
margin:12px 0 0 !important;
padding:0 !important;
}
.product-gallery .flex-control-thumbs li{ margin:0; list-style:none !important; }
.product-gallery .flex-control-thumbs img{
width:100% !important;
display:block !important;
border:1px solid var(--line) !important;
border-radius:10px !important;
}
.product-gallery .flex-control-thumbs img.flex-active{
outline:2px solid var(--brand) !important;
outline-offset:-2px !important;
}
div.product-gallery div.woocommerce-product-gallery{
width: 100% !important;
}
/* Half star support */
.stars i.half{
background: linear-gradient(90deg, var(--brand) 50%, #111 50%, #333 100%) !important;
}
/* Optional: make the rating link look like text */
.rating .review-link{
color: inherit !important;
text-decoration: none !important;
}
.rating .review-link:hover{
text-decoration: underline !important;
}
/* Stock HTML from Woo outputs */
.sku-stock .availability{
display:flex !important;
gap:6px !important;
align-items:center !important;
}
.sku-stock .availability .stock{
margin:0 !important;
display:inline !important;
font-weight:700 !important;
}
/* Map Woo stock classes to your existing colour system */
.sku-stock .availability .stock.in-stock{ color:var(--success) !important; }
.sku-stock .availability .stock.out-of-stock{ color:var(--danger) !important; }
.sku-stock .availability .stock.available-on-backorder{ font-weight:700 !important; }
div.form-row.qty-row p.stock{
display: none !important;
}
/* For VAT */
.price-row .price{margin:0 !important;}
div.shc-price p.price span{
color: #000 !important;
}
/* Replace variations */
/* Hide Woo default variation dropdown table, keep logic */
form.variations_form table.variations,
form.variations_form .reset_variations{ display:none !important; }
/* Hide Woo’s duplicate variation price area (your custom price handles it) */
form.variations_form .woocommerce-variation-price{ display:none !important; }
/* Disabled options styling (match your buttons) */
.swatch:disabled, .size:disabled{
opacity:.35 !important;
cursor:not-allowed !important;
}
div.woocommerce-variation{
display: flex;
}
div.woocommerce-variation-add-to-cart{
display: grid !important;
}
.shc-grid{
display: grid;
}
.customisation-button{
float: none !important;
}
.shc-title.customisation{
font-weight: 800;
margin-top: 12px;
}
div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled{
display: flex;
gap: 8px;
}
div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled div.quantity{
margin: 0;
}
div.shc-block{
margin-top: 30px;
}
div.shc-label{
font-size: 1.3em;
font-weight: 700;
color: #000;
}
div.shc-grid svg{
min-width: 50px;
}
button.shc-toggle.button.alt, button.single_add_to_cart_button.button.alt, a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,button#place_order{
background-color: #fab816;
color: #000;
border-radius: 10px;
align-self: end;
}
div.quantity{
align-self: end;
}
/*Estimate price on product page */
.shc-estimate{padding:12px;border:1px dashed #ddd;border-radius:12px}
.shc-estimate-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0}
.shc-estimate-muted{opacity:.7;font-size:13px}
.shc-estimate-total strong{font-size:16px}
/* Back to portal link */
.portal-back-link{
background: var(--brand);
padding: 13px 5px;
border-radius: 10px;
margin-bottom: 24px;
}
.portal-back-link a{
display:inline-block;
text-decoration:none;
color: #111;
font-weight: 800;
}
/*////////////////////////////////////////////////// MY ACCOUNT LOGIN /////////////////////*/
body.woocommerce-account:not(.logged-in) .woocommerce{
grid-column: 2 / 16;
width: 100%;
max-width: 1160px;
margin: 40px auto 64px;
padding: 34px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(180deg, #fff 0%, #fcfcfd 100%);
box-shadow: var(--shadow);
}
body.woocommerce-account:not(.logged-in) .woocommerce h2{
color: var(--ink);
font-size: clamp(1.5rem, 2.5vw, 2rem);
line-height: 1.2;
margin-bottom: 18px;
}
body.woocommerce-account:not(.logged-in) .woocommerce .u-columns{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
body.woocommerce-account:not(.logged-in) .woocommerce .u-column1,
body.woocommerce-account:not(.logged-in) .woocommerce .u-column2{
float: none;
width: 100%;
margin: 0;
padding: 28px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
box-shadow: var(--shadow-soft);
}
body.woocommerce-account:not(.logged-in) .woocommerce form .form-row{
margin: 0 0 16px;
}
body.woocommerce-account:not(.logged-in) .woocommerce form label,
body.woocommerce-account:not(.logged-in) .woocommerce form .woocommerce-form__label{
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: #2f2f35;
}
body.woocommerce-account:not(.logged-in) .woocommerce form input.input-text,
body.woocommerce-account:not(.logged-in) .woocommerce form input[type="text"],
body.woocommerce-account:not(.logged-in) .woocommerce form input[type="email"],
body.woocommerce-account:not(.logged-in) .woocommerce form input[type="password"]{
width: 100%;
min-height: 48px;
padding: 10px 14px;
border: 1px solid #d6d7de;
border-radius: 10px;
color: #1b1b1b;
background: #fff;
transition: border-color .2s ease, box-shadow .2s ease;
}
body.woocommerce-account:not(.logged-in) .woocommerce form input:focus{
border-color: var(--brand-600);
box-shadow: 0 0 0 3px rgba(250, 184, 22, .22);
outline: none;
}
body.woocommerce-account:not(.logged-in) .woocommerce form .button,
body.woocommerce-account:not(.logged-in) .woocommerce form button,
body.woocommerce-account:not(.logged-in) .woocommerce form button[type="submit"]{
width: 100%;
justify-content: center;
min-height: 48px;
border-radius: 12px;
font-weight: 700;
}
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-LostPassword a{
color: #222;
font-weight: 600;
text-decoration: underline;
}
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-notices-wrapper{
margin-bottom: 16px;
}
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-info,
body.woocommerce-account:not(.logged-in) .woocommerce .woocommerce-message{
margin: 0 0 14px;
border-radius: 10px;
border-left: 4px solid var(--brand);
background: #fffdf3;
color: #222;
}
@media (max-width: 980px){
body.woocommerce-account:not(.logged-in) .woocommerce{
grid-column: 1 / -1;
margin: 20px 14px 40px;
padding: 20px;
}
body.woocommerce-account:not(.logged-in) .woocommerce .u-columns{
grid-template-columns: 1fr;
}
body.woocommerce-account:not(.logged-in) .woocommerce .u-column1,
body.woocommerce-account:not(.logged-in) .woocommerce .u-column2{
padding: 20px;
}
}
/*//////////////////???/////////////////////////////////WP standard //////////////// */
.content-area h1, .content-area h2, .content-area h3, .content-area h4, .content-area h5, .content-area h6{
font-weight: 700;
color: #1b1b1b;
padding: 25px 0px 10px 0px;
}
.content-area h1{
font-size: 70px;
position: relative;
z-index: 1;
}
.content-area h2{
font-size: 26px;
}
.content-area h3{
font-size: 24px;
}
.content-area h4{
font-size: 22px;
}
.content-area h5{
font-size: 20px;
}
.content-area h6{
font-size: 18px;
}
/* =========================================================
HEADER REBUILD
========================================================= */
.ph-header {
grid-column: 1 / 17;
background: #fff;
border-bottom: 1px solid #e5e5e5;
position: sticky;
top: 0;
z-index: 90;
}
.ph-header__inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 16px;
}
.ph-header__utility-row {
background: #000;
}
.ph-header__utility-list {
min-height: 32px;
display: flex;
align-items: center;
gap: 24px;
overflow-x: auto;
white-space: nowrap;
}
.ph-header__utility-item,
.ph-header__utility-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
line-height: 16px;
color: #e5e5e5;
}
.ph-header__utility-link i {
color: #fab816;
font-size: 12px;
}
.ph-header__main-row {
min-height: 68px;
}
.ph-header__main-content {
min-height: 68px;
display: flex;
align-items: center;
gap: 16px;
}
.ph-header__logo-link {
width: 162px;
min-width: 162px;
}
.ph-header__logo-image, .ph-footer__logo {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
.ph-header__search-wrap {
width: 100%;
max-width: 736px;
padding: 0 32px;
}
.ph-header__search-wrap .search-form {
display: flex;
align-items: stretch;
width: 100%;
border: 2px solid #000;
border-radius: 8px;
padding: 2px;
position: relative;
}
.ph-header__search-wrap .search-form label {
display: flex;
flex: 1 1 auto;
}
.ph-header__search-wrap .search-form .search-field {
width: 100%;
height: auto;
min-height: 40px;
border: 0;
border-radius: 6px 0 0 6px;
background: #fff;
padding: 0 16px;
font-size: 13px;
color: rgba(0, 0, 0, 0.5);
}
.ph-header__search-wrap .search-form .search-submit {
align-self: stretch;
height: auto;
min-height: 40px;
border: 0;
border-radius: 0 6px 6px 0;
background: #fab816;
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 20px;
padding: 0 20px;
cursor: pointer;
}
.ph-header__actions {
min-width: 361px;
margin-left: auto;
display: flex;
align-items: center;
gap: 16px;
}
.ph-header__action {
display: inline-flex;
align-items: center;
gap: 6px;
color: #000;
}
.ph-header__action-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #000;
}
.ph-header__action-icon--circle {
width: 36px;
height: 36px;
border-radius: 999px;
background: #f5f5f5;
font-size: 15px;
color: #fab816;
}
.ph-header__action-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.ph-header__action-label {
color: #737373;
font-size: 10px;
}
.ph-header__action-value {
color: #000;
font-size: 14px;
font-weight: 700;
}
.ph-header__action-inline {
font-size: 13px;
line-height: 20px;
color: #000;
}
.ph-header__action-icon--basket {
font-size: 22px;
}
.ph-header__basket-count {
position: absolute;
right: -7px;
top: -7px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fab816;
color: #000;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.ph-header__nav-row {
background: #000;
min-height: 48px;
}
.ph-header__nav-content {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.ph-header__nav-menu-wrap {
flex: 1;
}
.ph-header__nav-menu-wrap > ul.menu,
.ph-header__nav-menu-wrap > ul {
display: flex;
align-items: center;
gap: 4px;
}
.ph-header__nav-menu-wrap > ul.menu > li > a,
.ph-header__nav-menu-wrap > ul > li > a {
display: inline-flex;
align-items: center;
padding: 14px 16px;
position: relative;
}
.ph-header__nav-menu-wrap > ul.menu > li > a span,
.ph-header__nav-menu-wrap > ul > li > a span {
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 20px;
}
.ph-header__nav-menu-wrap > ul.menu > li.menu-item-has-children > a::after,
.ph-header__nav-menu-wrap > ul > li.menu-item-has-children > a::after {
content: "";
width: 6px;
height: 6px;
border-right: 1.8px solid #fff;
border-bottom: 1.8px solid #fff;
transform: rotate(45deg) translateY(-1px);
margin-left: 8px;
flex: 0 0 auto;
}
.ph-header__nav-menu-wrap > ul.menu > li,
.ph-header__nav-menu-wrap > ul > li {
position: relative;
}
.ph-header__nav-menu-wrap > ul.menu > li > .sub-menu,
.ph-header__nav-menu-wrap > ul > li > .sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index: 95;
min-width: 264px;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 12px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
padding: 14px 0;
}
.ph-header__nav-menu-wrap > ul.menu > li:hover > .sub-menu,
.ph-header__nav-menu-wrap > ul.menu > li:focus-within > .sub-menu,
.ph-header__nav-menu-wrap > ul > li:hover > .sub-menu,
.ph-header__nav-menu-wrap > ul > li:focus-within > .sub-menu {
display: block;
}
.ph-header__nav-menu-wrap .sub-menu .menu-item {
position: relative;
}
.ph-header__nav-menu-wrap .sub-menu .menu-item > a {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 10px;
padding: 7px 10px;
border-radius: 7px;
transition: background-color 0.16s ease;
}
.ph-header__nav-menu-wrap .sub-menu .menu-item > a span {
color: #333;
font-size: 13px;
font-weight: 400;
line-height: 18px;
}
.ph-header__nav-menu-wrap .sub-menu .menu-item:hover > a,
.ph-header__nav-menu-wrap .sub-menu .menu-item:focus-within > a,
.ph-header__nav-menu-wrap .sub-menu .menu-item.current-menu-item > a,
.ph-header__nav-menu-wrap .sub-menu .menu-item.current-menu-parent > a,
.ph-header__nav-menu-wrap .sub-menu .menu-item.current-menu-ancestor > a {
background: #f8f8f6;
}
.ph-header__nav-menu-wrap .sub-menu .menu-item-has-children > a::after {
content: "";
width: 6px;
height: 6px;
border-right: 1.8px solid #111;
border-bottom: 1.8px solid #111;
transform: rotate(-45deg);
flex: 0 0 auto;
}
.ph-header__nav-menu-wrap .sub-menu .sub-menu {
display: none;
position: absolute;
left: 100%;
top: 0;
min-width: 250px;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 12px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
padding: 14px 0;
}
.ph-header__nav-menu-wrap .sub-menu .menu-item:hover > .sub-menu,
.ph-header__nav-menu-wrap .sub-menu .menu-item:focus-within > .sub-menu {
display: block;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega {
position: static;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu {
left: 50%;
transform: translateX(-50%);
width: min(1368px, calc(100vw - 40px));
min-width: 0;
padding: 22px 20px;
display: none;
grid-template-columns: 264px repeat(3, minmax(160px, 1fr)) 250px;
column-gap: 28px;
align-items: stretch;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega:hover > .sub-menu,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega:focus-within > .sub-menu,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega:hover > .sub-menu,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega:focus-within > .sub-menu {
display: grid;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item > a,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item > a {
margin: 0;
padding: 0 0 14px;
border-radius: 0;
justify-content: flex-start;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item > a span,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item > a span {
color: #1a1a1a;
font-size: 15px;
font-weight: 600;
line-height: 22px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu {
display: flex !important;
flex-direction: column;
gap: 8px;
position: static;
min-width: 0;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
background: transparent;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu > .menu-item > a,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu > .menu-item > a {
margin: 0;
padding: 4px 0;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu > .menu-item > a span,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu > .menu-item > a span {
color: #333;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item.menu-item-has-children > a::after,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item.menu-item-has-children > a::after {
content: none;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1),
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) {
background: #f8f8f6;
border-radius: 12px;
padding: 14px 10px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) > a,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) > a {
padding: 2px 8px 10px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) > a span,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) > a span {
color: #333;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) > .sub-menu > .menu-item > a {
padding: 7px 10px;
border-radius: 7px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) > .sub-menu > .menu-item > a span {
font-size: 13px;
line-height: 18px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo {
background: #121212;
border-radius: 12px;
padding: 18px 18px 16px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo > a {
padding: 0 0 12px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo > a span {
color: #fff;
font-size: 22px;
font-weight: 700;
line-height: 30px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo > .sub-menu > .menu-item > a {
padding: 0;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo > .sub-menu > .menu-item > a span {
color: #e6e6e6;
font-size: 13px;
line-height: 20px;
}
@media only screen and (max-width: 1320px) {
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu {
width: calc(100vw - 24px);
grid-template-columns: 240px repeat(3, minmax(140px, 1fr));
row-gap: 20px;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo,
.ph-header__nav-menu-wrap > ul > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo {
grid-column: 1 / -1;
}
}
.ph-header__delivery-message {
margin: 0;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 8px;
color: #fab816;
font-size: 13px;
font-weight: 700;
}
.ph-header__delivery-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fab816;
}
.ph-header__mobile-toggle-wrap,
.ph-header__mobile-panel {
display: none;
}
@media only screen and (max-width: 1240px) {
.ph-header__search-wrap {
padding: 0 12px;
}
.ph-header__actions {
min-width: 0;
gap: 10px;
}
.ph-header__action--phone .ph-header__action-text {
display: none;
}
.ph-header__action-inline {
font-size: 12px;
}
.ph-header__nav-menu-wrap > ul.menu > li > a,
.ph-header__nav-menu-wrap > ul > li > a {
padding: 14px 10px;
}
}
@media only screen and (max-width: 980px) {
.ph-header {
position: relative;
}
.ph-header__utility-list {
gap: 14px;
padding: 0 2px;
}
.ph-header__main-content {
min-height: 72px;
}
.ph-header__search-wrap,
.ph-header__actions,
.ph-header__nav-row {
display: none;
}
.ph-header__logo-link {
width: 150px;
min-width: 150px;
}
/* Mobile Menu Redesign (Figma node 2116:500) */
.ph-header__mobile-toggle-wrap {
margin-left: auto;
display: flex;
align-items: center;
position: relative;
}
.ph-header__menu-checkbox {
position: absolute;
left: -9999px;
}
.ph-header__menu-button {
width: 46px;
height: 36px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3px;
cursor: pointer;
}
.ph-header__menu-button .menu-icon {
width: 28px;
height: 3px;
background: #000;
border-radius: 2px;
}
.ph-header__mobile-panel {
display: block;
visibility: hidden;
position: fixed;
inset: 0;
z-index: 100;
background: #f3f3f3;
right: -100%;
transition: right 0.28s ease;
overflow-y: auto;
padding: 0;
}
.ph-header__menu-checkbox:checked ~ .ph-header__mobile-panel {
visibility: visible;
right: 0;
}
#sidebar-menu .side-menu-inner {
min-height: 100%;
background: #f3f3f3;
}
.ph-header__mobile-topbar {
height: 76px;
background: #0f0f0f;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.ph-header__mobile-logo-link {
display: block;
width: 118px;
}
.ph-header__mobile-logo-image {
width: 100%;
display: block;
}
.ph-header__mobile-close {
background: none;
border: 0;
color: #d6d6d6;
font-size: 14px;
line-height: 20px;
cursor: pointer;
padding: 0;
}
.ph-header__mobile-search {
margin: 16px 20px 20px;
}
.ph-header__mobile-search .search-form {
display: block;
border: 1px solid #e0e0e0;
border-radius: 9px;
background: #fff;
padding: 0 15px;
}
.ph-header__mobile-search .search-form label {
display: block;
}
.ph-header__mobile-search .search-field {
width: 100%;
height: 42px;
border: 0;
background: transparent;
color: #3a3a3a;
font-size: 14px;
line-height: 20px;
padding: 0;
}
.ph-header__mobile-search .search-field::placeholder {
color: #737373;
opacity: 1;
}
.ph-header__mobile-search .search-submit {
display: none;
}
#sidebar-menu .mobile-menu {
margin: 0;
padding: 0 20px 22px;
}
#sidebar-menu .mobile-menu > .menu-item {
position: relative;
padding: 0;
}
#sidebar-menu .mobile-menu > .menu-item > a {
display: inline-flex;
align-items: center;
flex: 1;
color: #141414;
font-size: 16px;
font-weight: 600;
line-height: 22px;
padding: 15px 0;
}
#sidebar-menu .mobile-menu > .menu-item.menu-item-has-children > a {
width: calc(100% - 24px);
}
#sidebar-menu .mobile-menu > .menu-item > .sub-menu {
border-top: 1px solid #d9d9d9;
margin-top: -2px;
padding: 8px 0 10px;
}
#sidebar-menu .mobile-menu .sub-menu .menu-item > a {
color: #383838;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 7px 8px;
}
#sidebar-menu .submenu-toggle {
background: none;
border: 0;
color: #616161;
margin-left: auto;
width: 22px;
height: 52px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
#sidebar-menu .submenu-toggle::before {
content: "+";
font-family: inherit;
font-weight: 500;
font-size: 22px;
line-height: 22px;
}
#sidebar-menu .submenu-toggle[aria-expanded=\"true\"]::before {
content: "−";
}
#sidebar-menu .mobile-menu > .menu-item > .submenu-toggle[aria-expanded="false"] + .sub-menu {
border-top: 0;
padding-top: 0;
}
#sidebar-menu .submenu-toggle:focus-visible,
.ph-header__mobile-close:focus-visible,
#sidebar-menu .mobile-menu a:focus-visible {
outline: 2px solid #141414;
outline-offset: 2px;
}
#sidebar-menu .mobile-menu > .menu-item.ph-mobile-menu-cta {
margin-top: 14px;
border-bottom: 0;
}
#sidebar-menu .mobile-menu > .menu-item.ph-mobile-menu-cta > a {
display: block;
width: 100%;
border-radius: 9px;
background: #fab816;
color: #000;
font-size: 15px;
font-weight: 800;
line-height: 20px;
text-align: center;
padding: 14px 16px;
}
#sidebar-menu .mobile-menu > .menu-item.ph-mobile-menu-cta > .submenu-toggle,
#sidebar-menu .mobile-menu > .menu-item.ph-mobile-menu-cta > .sub-menu {
display: none !important;
}
.ph-header__mobile-actions {
display: none;
}
}
/* =========================================================
FOOTER REBUILD
========================================================= */
.ph-footer {
grid-column: 1 / 17;
background: #0a0a0a;
}
.ph-footer__inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 16px;
}
.ph-footer__main {
padding: 56px 0;
}
.ph-footer__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 40px;
row-gap: 40px;
}
.ph-footer__col {
color: #d4d4d4;
grid-column: span 2;
}
.ph-footer__col--left {
grid-column: span 4;
}
.ph-footer__col--newsletter {
grid-column: span 2;
}
.ph-footer__logo-link {
display: inline-block;
}
.ph-footer__logo {
width: 163px;
height: auto;
display: block;
}
.ph-footer__about {
color: #a1a1a1;
margin-top: 20px;
font-size: 13px;
line-height: 20px;
max-width: 384px;
}
.ph-footer__contact-list {
margin-top: 12px;
display: grid;
gap: 8px;
}
.ph-footer__contact-item {
display: inline-flex;
align-items: center;
gap: 8px;
color: #d4d4d4;
font-size: 13px;
line-height: 20px;
}
.ph-footer__contact-item i {
color: #fab816;
width: 16px;
text-align: center;
}
.ph-footer__socials {
margin-top: 16px;
display: flex;
gap: 8px;
}
.ph-footer__socials a {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
color: #d4d4d4;
}
.ph-footer__col h3 {
color: #fff;
font-size: 15px;
font-weight: 700;
line-height: 24px;
margin-bottom: 16px;
}
.ph-footer__menu,
.ph-footer__links {
display: grid;
gap: 8px;
}
.ph-footer__menu .menu-item a,
.ph-footer__links a, .ph-footer__links li a span {
color: #d4d4d4;
font-size: 13px;
line-height: 20px;
font-weight: 400;
}
.ph-footer__newsletter-copy {
color: #a1a1a1;
font-size: 13px;
line-height: 20px;
margin-bottom: 12px;
max-width: 150px;
}
.ph-footer__newsletter-form .wpcf7 {
width: 100%;
}
.ph-footer__newsletter-form .wpcf7 p {
margin: 0;
}
.ph-footer__newsletter-form .wpcf7-form-control-wrap {
display: block;
}
.ph-footer__newsletter-form .wpcf7 input[type="email"],
.ph-footer__newsletter-form .wpcf7 input[type="text"],
.ph-footer__newsletter-form .wpcf7 input[type="tel"] {
width: 100%;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.05);
color: #d4d4d4;
border-radius: 8px;
padding: 0 12px;
font-size: 12px;
}
.ph-footer__newsletter-form .wpcf7 input::placeholder {
color: rgba(212, 212, 212, 0.5);
}
.ph-footer__newsletter-form .wpcf7 input[type="submit"] {
margin-top: 10px;
height: 38px;
border: 0;
border-radius: 8px;
background: #fab816;
color: #000;
font-size: 12px;
font-weight: 700;
padding: 0 16px;
cursor: pointer;
}
.ph-footer__newsletter-form .wpcf7-spinner {
display: none;
}
.ph-footer__legal {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 0;
}
.ph-footer__legal-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.ph-footer__legal-row p {
color: #737373;
font-size: 11px;
line-height: 16px;
}
.ph-footer__legal-links {
display: flex;
gap: 16px;
}
.ph-footer__legal-links a {
color: #737373;
font-size: 11px;
line-height: 16px;
}
@media only screen and (max-width: 1200px) {
.ph-footer__col--left {
grid-column: span 12;
}
.ph-footer__col,
.ph-footer__col--newsletter {
grid-column: span 4;
}
}
@media only screen and (max-width: 900px) {
.ph-footer__main {
padding: 40px 0;
}
.ph-footer__col,
.ph-footer__col--newsletter {
grid-column: span 6;
}
.ph-footer__legal-row {
flex-direction: column;
align-items: flex-start;
}
}
@media only screen and (max-width: 640px) {
.ph-footer__grid {
row-gap: 28px;
}
.ph-footer__col,
.ph-footer__col--newsletter,
.ph-footer__col--left {
grid-column: span 12;
}
.ph-footer__legal-links {
flex-wrap: wrap;
gap: 12px;
}
}
/* =========================================================
PAGE REBUILD
========================================================= */
.ph-page {
grid-column: 1 / 17;
background: #f2f2f2;
}
.ph-page__inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 16px;
}
.ph-page__hero {
background: #fab816;
min-height: 180px;
padding: 38px 0 26px;
}
.ph-page__breadcrumbs {
color: #595959;
font-size: 14px;
line-height: 20px;
margin-bottom: 8px;
}
.ph-page__breadcrumbs nav,
.ph-page__breadcrumbs .breadcrumb,
.ph-page__breadcrumbs .yoast-breadcrumb {
font-size: inherit;
line-height: inherit;
}
.ph-page__breadcrumbs .yoast-breadcrumb,
.ph-page__breadcrumbs .yoast-breadcrumb span,
.ph-page__breadcrumbs .yoast-breadcrumb a,
.ph-page__breadcrumbs nav,
.ph-page__breadcrumbs nav span,
.ph-page__breadcrumbs nav a,
.ph-page__breadcrumbs a,
.ph-page__breadcrumbs span {
color: #595959;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.ph-page__breadcrumbs .yoast-breadcrumb > span {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.ph-page__breadcrumbs .yoast-breadcrumb a {
text-decoration: none;
}
.ph-page__breadcrumbs .yoast-breadcrumb a:hover,
.ph-page__breadcrumbs .yoast-breadcrumb a:focus-visible {
text-decoration: underline;
}
.ph-page__breadcrumbs .breadcrumb_last {
color: #595959;
}
.ph-page__breadcrumbs .separator,
.ph-page__breadcrumbs .yoast-breadcrumb .separator {
color: #777;
}
.ph-page__title {
margin: 0;
color: #000;
font-size: 48px;
font-weight: 700;
line-height: 1.2;
}
.ph-page__body {
padding: 50px 0 60px;
}
.ph-page__body.ph-front-page{
padding: 0 !important;
}
.ph-page__card {
background: #fff;
border: 1px solid #e6e6e6;
border-radius: 12px;
padding: 56px 60px;
min-height: 950px;
}
.ph-page__body.ph-front-page .ph-page__card{
padding: 0 !important;
border-radius: 0;
}
.ph-page__card > *:first-child {
margin-top: 0;
}
.ph-page__card p,
.ph-page__card li {
color: #a1a1a1;
font-size: 17px;
line-height: 1.45;
}
.ph-page__card h2 {
color: #1a1a1a;
font-size: 34px;
font-weight: 700;
line-height: 1.2;
margin-top: 0;
}
.ph-page__card h3 {
color: #000;
font-size: 24px;
font-weight: 700;
line-height: 1.35;
}
.ph-page__card h4,
.ph-page__card h5,
.ph-page__card h6 {
color: #1b1b1b;
font-weight: 700;
}
.ph-page__card p + h2,
.ph-page__card p + h3,
.ph-page__card ul + h2,
.ph-page__card ul + h3,
.ph-page__card ol + h2,
.ph-page__card ol + h3 {
margin-top: 30px;
}
@media only screen and (max-width: 1100px) {
.ph-page__title {
font-size: 40px;
}
.ph-page__card {
padding: 42px 36px;
min-height: 0;
}
}
@media only screen and (max-width: 800px) {
.ph-page__hero {
min-height: 140px;
padding: 26px 0 20px;
}
.ph-page__title {
font-size: 32px;
}
.ph-page__body {
padding: 28px 0 34px;
}
.ph-page__card {
padding: 28px 20px;
}
.ph-page__card h2 {
font-size: 28px;
}
.ph-page__card h3 {
font-size: 22px;
}
.ph-page__card p,
.ph-page__card li {
font-size: 16px;
}
}
/* =========================================================
Request A Quote (Contact Form 7)
========================================================= */
.ph-page__card .wpcf7 {
max-width: 100%;
}
.ph-page__card .wpcf7 form {
display: grid;
gap: 14px;
}
.ph-page__card .wpcf7 p {
margin: 0;
}
.ph-page__card .wpcf7 label {
display: block;
color: #1d1d1d;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
margin-bottom: 6px;
}
.ph-page__card .wpcf7 input[type="text"],
.ph-page__card .wpcf7 input[type="email"],
.ph-page__card .wpcf7 input[type="tel"],
.ph-page__card .wpcf7 input[type="number"],
.ph-page__card .wpcf7 input[type="date"],
.ph-page__card .wpcf7 select,
.ph-page__card .wpcf7 textarea {
width: 100%;
min-height: 48px;
border: 1px solid #d8d8d8;
border-radius: 10px;
background: #fff;
color: #1f1f1f;
font-size: 16px;
line-height: 1.4;
padding: 11px 14px;
}
.ph-page__card .wpcf7 textarea {
min-height: 160px;
resize: vertical;
}
.ph-page__card .wpcf7 input:focus,
.ph-page__card .wpcf7 select:focus,
.ph-page__card .wpcf7 textarea:focus {
outline: none;
border-color: #111;
box-shadow: 0 0 0 3px rgba(250, 184, 22, 0.35);
}
.ph-page__card .wpcf7 .wpcf7-submit {
min-height: 52px;
padding: 0 22px;
border: 0;
border-radius: 10px;
background: #fab816;
color: #111;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: background-color .2s ease, transform .2s ease;
}
.ph-page__card .wpcf7 .wpcf7-submit:hover,
.ph-page__card .wpcf7 .wpcf7-submit:focus-visible {
background: #e6a810;
transform: translateY(-1px);
}
.ph-page__card .wpcf7 .wpcf7-spinner {
margin: 8px 0 0 10px;
}
.ph-page__card .wpcf7 .wpcf7-not-valid-tip {
margin-top: 6px;
color: #c01818;
font-size: 14px;
line-height: 1.35;
}
.ph-page__card .wpcf7 .wpcf7-response-output {
margin: 4px 0 0;
border-radius: 8px;
padding: 10px 12px;
font-size: 15px;
line-height: 1.35;
}
@media only screen and (max-width: 800px) {
.ph-page__card .wpcf7 form {
gap: 12px;
}
.ph-page__card .wpcf7 .wpcf7-submit {
width: 100%;
}
}
/* =========================================================
SINGLE PRODUCT REBUILD
========================================================= */
.ph-sp {
grid-column: 1 / 17;
background: #f2f2f2;
color: #111;
}
.ph-sp__inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 16px;
}
.ph-sp__hero {
background: #fab816;
min-height: 180px;
padding: 40px 0 26px;
}
.ph-sp__breadcrumbs{
background-color: #fab816;
}
.ph-sp__breadcrumbs,
.ph-sp__breadcrumbs a,
.ph-sp__breadcrumbs span {
color: #595959;
font-size: 16px;
line-height: 20px;
font-weight: bold;
}
.ph-sp__sep {
margin: 0 6px;
}
.ph-sp__title {
margin: 8px 0 0;
font-size: 48px;
line-height: 1.2;
font-weight: 700;
color: #000;
}
.ph-sp__body {
padding: 76px 0 66px;
}
.ph-sp__main-grid {
display: grid;
grid-template-columns: 608px minmax(0, 1fr);
gap: 86px;
align-items: start;
}
.ph-sp__gallery-wrap {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 18px;
}
.ph-sp__gallery-wrap .woocommerce-product-gallery,
.ph-sp__gallery-wrap .woocommerce-product-gallery__wrapper,
.ph-sp__gallery-wrap .woocommerce-product-gallery__image {
width: 100% !important;
}
.ph-sp__gallery-wrap .woocommerce-product-gallery__image img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
cursor: zoom-in;
}
.ph-sp__gallery-wrap .woocommerce-product-gallery__trigger {
display: none !important;
}
.ph-sp__gallery-wrap .flex-control-thumbs {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}
.ph-sp__gallery-wrap .flex-control-thumbs li {
list-style: none;
margin: 0;
}
.ph-sp__gallery-wrap .flex-control-thumbs img {
border: 1px solid #ddd;
border-radius: 8px;
}
.ph-sp__summary {
padding-top: 4px;
}
.ph-sp__brand {
font-size: 14px;
line-height: 20px;
color: #595959;
margin: 0;
}
.ph-sp__name {
margin: 8px 0 16px;
color: #1a1a1a;
font-size: 46px;
line-height: 1.15;
font-weight: 700;
}
.ph-sp__product-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
margin-bottom: 8px;
}
.ph-sp__availability {
margin: 0;
}
.ph-sp__availability .stock {
color: #1a9f5a;
font-size: 16px;
font-weight: 600;
}
.ph-sp__sku {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0;
padding: 5px 9px;
border: 1px solid #dedede;
border-radius: 999px;
background: #f7f7f7;
color: #555;
font-size: 12px;
line-height: 1.2;
}
.ph-sp__sku.is-empty {
display: none;
}
.ph-sp__sku span {
font-weight: 600;
}
.ph-sp__sku strong {
color: #111;
font-weight: 700;
letter-spacing: 0.02em;
}
.ph-sp__price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 8px;
}
.ph-sp__price .price,
.ph-sp__price p.price {
margin: 0;
color: #1a1a1a;
font-size: 38px;
line-height: 1.2;
font-weight: 700;
}
.ph-sp__tax-toggle {
display: inline-flex;
border: 1px solid #d8d8d8;
border-radius: 999px;
overflow: hidden;
background: #fff;
}
.ph-sp__tax-toggle button {
border: 0;
padding: 8px 14px;
background: #fff;
color: #333;
font-size: 13px;
font-weight: 600;
box-shadow: none;
}
.ph-sp__tax-toggle button.active {
background: #fab816;
color: #111;
}
.ph-sp__excerpt {
margin: 8px 0 18px;
color: #444;
font-size: 18px;
line-height: 1.45;
max-width: 674px;
}
.ph-sp__option-block {
margin-bottom: 14px;
}
.ph-sp__option-label {
display: block;
color: #111;
font-size: 21px;
font-weight: 700;
margin-bottom: 8px;
}
.ph-sp__swatches {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ph-sp__swatches button {
border: 1px solid #d8d8d8;
background: #fff;
border-radius: 10px;
box-shadow: none;
cursor: pointer;
}
.ph-sp__swatches--colour .swatch {
min-height: 42px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
color: #111;
font-size: 16px;
font-weight: 600;
line-height: 1;
}
.ph-sp__swatches--colour .swatch .dot {
width: 18px;
height: 18px;
flex: 0 0 18px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.22);
}
.ph-sp__swatches--colour .swatch .ph-sp__swatch-label {
display: inline-block;
white-space: nowrap;
}
.ph-sp__swatches--text .size,
.ph-sp__swatches--text .swatch {
min-width: 62px;
height: 42px;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
color: #111;
}
.ph-sp .shc-variation-ui button[aria-pressed="true"] {
border-color: #fab816;
}
.ph-sp .shc-variation-ui button:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.ph-sp__cart-row {
margin-top: 14px;
}
.ph-sp__cart-row .cart {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.ph-sp__cart-row .quantity {
margin: 0 !important;
}
.ph-sp__cart-row .quantity .qty {
width: 119px;
height: 52px;
border-radius: 10px;
border: 1px solid #d9d9d9;
background: #fff;
text-align: center;
font-size: 22px;
font-weight: 600;
}
.ph-sp__cart-row .single_add_to_cart_button {
min-width: 524px;
height: 52px;
border-radius: 10px;
background: #fab816;
color: #111;
font-size: 24px;
font-weight: 700;
box-shadow: none;
}
.ph-sp .shc-logo-customisation {
margin-top: 22px;
border: 1px solid #dcdcdc;
border-radius: 12px;
padding: 28px;
background: #fff;
}
.ph-sp .customisation-button {
width: auto;
min-width: 220px;
border-radius: 10px;
background: #fab816 !important;
color: #111 !important;
padding: 12px 18px;
font-size: 16px;
}
.ph-sp .shc-title.customisation {
margin: 0 0 4px;
font-size: 38px;
line-height: 1.2;
font-weight: 700;
color: #111;
}
.ph-sp .shc-label {
color: #111;
font-size: 21px;
font-weight: 700;
}
.ph-sp .shc-block {
margin-top: 14px;
}
.ph-sp .shc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.ph-sp .shc-tile {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d9d9d9;
border-radius: 999px;
background: #fff;
min-height: 48px;
padding: 0 18px;
color: #111;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: all .18s ease;
}
.ph-sp .shc-tile .shc-location-input{
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
-webkit-appearance: none !important;
appearance: none !important;
pointer-events: none !important;
}
.ph-sp .shc-tile .shc-text{
pointer-events: none;
}
.ph-sp .shc-tile:hover{
border-color: #111;
}
.ph-sp .shc-tile:has(.shc-location-input:checked){
background: #111;
border-color: #111;
color: #fff;
}
.ph-sp .shc-tile:has(.shc-location-input:focus-visible){
outline: 2px solid #111;
outline-offset: 2px;
}
.ph-sp .shc-pill {
border: 1px solid #d9d9d9;
border-radius: 10px;
background: #fff;
padding: 8px 12px;
}
.ph-sp .shc-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.ph-sp .shc-upload input[type="file"] {
width: 100%;
border: 1px dashed #d9d9d9;
border-radius: 10px;
background: #fafafa;
padding: 14px;
}
.ph-sp .shc-estimate {
border: 1px solid #ddd;
border-radius: 10px;
}
.ph-sp__bulk-panel {
margin-top: 26px;
}
.ph-sp .shc-tiered-pricing {
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 12px;
padding: 24px 28px;
}
.ph-sp .shc-tiered-pricing__title {
color: #111;
font-size: 40px;
font-weight: 700;
margin-bottom: 14px;
}
.ph-sp .shc-tiered-pricing__row {
grid-template-columns: 1fr 1fr auto;
background: #fcfcfc;
border: 1px solid #e8e8e8;
border-radius: 8px;
padding: 11px 22px;
}
.ph-sp .shc-tiered-pricing__qty,
.ph-sp .shc-tiered-pricing__discount,
.ph-sp .shc-tiered-pricing__price {
color: #1a1a1a;
font-size: 21px;
font-weight: 500;
}
.ph-sp__cta-strip {
margin-top: 34px;
background: #1ab471;
border: 1px solid #e4e4e4;
border-radius: 12px;
padding: 28px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.ph-sp__cta-strip p {
color: #111;
font-size: 28px;
line-height: 1.25;
margin: 0;
font-weight: 700;
}
.ph-sp__cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 206px;
height: 48px;
border-radius: 10px;
background: #fab816;
color: #111;
font-size: 22px;
font-weight: 700;
}
.ph-sp__tabs-panel {
margin-top: 34px;
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 12px;
padding: 32px;
}
.ph-sp__tabs-panel .woocommerce-tabs {
margin: 0;
}
.ph-sp__tabs-panel ul.tabs {
margin: 0 0 28px !important;
padding: 0 !important;
display: flex;
gap: 12px;
border: 0 !important;
}
.ph-sp__tabs-panel ul.tabs li {
margin: 0 !important;
border: 1px solid #d6d6d6 !important;
border-radius: 999px !important;
background: #fff !important;
padding: 0 !important;
}
.ph-sp__tabs-panel ul.tabs li::before,
.ph-sp__tabs-panel ul.tabs li::after {
display: none !important;
}
.ph-sp__tabs-panel ul.tabs li a {
padding: 10px 20px !important;
color: #222 !important;
font-size: 18px !important;
}
.ph-sp__tabs-panel ul.tabs li.active {
background: #111 !important;
border-color: #111 !important;
}
.ph-sp__tabs-panel ul.tabs li.active a {
color: #fff !important;
}
.ph-sp__tabs-panel .woocommerce-Tabs-panel {
color: #222;
font-size: 17px;
line-height: 1.45;
}
.ph-sp__related-panel {
margin-top: 46px;
}
.ph-sp__related-panel > h2,
.ph-sp .related.products > h2,
.ph-sp .up-sells.upsells.products > h2 {
color: #1a1a1a;
font-size: 48px;
line-height: 1.1;
font-weight: 700;
margin-bottom: 24px;
}
.ph-loop-card {
border: 1px solid #e4e4e4;
border-radius: 12px;
overflow: hidden;
background: #fff;
margin: 0 !important;
width: 100% !important;
float: none !important;
display: flex !important;
flex-direction: column;
}
.ph-loop-card__image-link {
display: block;
padding: 18px 18px 0;
}
.ph-loop-card__image-link img {
width: 100% !important;
aspect-ratio: 294 / 250;
object-fit: cover;
border-radius: 8px;
margin: 0 !important;
}
.ph-loop-card__body {
padding: 16px 18px 18px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.ph-loop-card__title {
margin: 0;
font-size: 24px;
line-height: 1.2;
font-weight: 700;
color: #1a1a1a;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ph-loop-card__title a {
color: inherit;
}
.ph-loop-card__price {
margin: 0;
margin-top: auto;
font-size: 18px;
line-height: 1.25;
color: #1a1a1a;
}
.ph-loop-card__price .woocommerce-Price-amount {
font-weight: 700;
}
.ph-loop-card__cta {
margin-top: 2px;
height: 50px;
border-radius: 10px;
background: #fab816;
color: #111;
font-size: 18px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 1200px) {
.ph-sp__main-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.ph-sp__cart-row .single_add_to_cart_button {
min-width: 0;
width: 100%;
}
}
@media only screen and (max-width: 980px) {
.ph-sp__hero {
min-height: 140px;
padding: 24px 0 20px;
}
.ph-sp__title {
font-size: 38px;
}
.ph-sp__name {
font-size: 34px;
}
.ph-sp__price .price,
.ph-sp__price p.price {
font-size: 30px;
}
.ph-sp .shc-title.customisation,
.ph-sp .shc-tiered-pricing__title,
.ph-sp__related-panel > h2,
.ph-sp .related.products > h2,
.ph-sp .up-sells.upsells.products > h2 {
font-size: 32px;
}
.ph-sp__cta-strip {
flex-direction: column;
align-items: flex-start;
}
.ph-sp__cta-strip p {
font-size: 28px;
}
.ph-sp__tabs-panel {
padding: 20px;
}
}
@media only screen and (max-width: 700px) {
.ph-sp__title {
font-size: 30px;
}
.ph-sp__body {
padding: 28px 0 36px;
}
.ph-sp__gallery-wrap {
padding: 12px;
}
.ph-sp__name {
font-size: 28px;
}
.ph-sp__excerpt {
font-size: 16px;
}
.ph-sp__price-row {
flex-direction: column;
align-items: flex-start;
}
.ph-sp .shc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ph-sp .shc-tiered-pricing__row {
grid-template-columns: 1fr;
gap: 4px;
}
.ph-loop-card__title {
font-size: 24px;
}
.ph-loop-card__price,
.ph-loop-card__cta {
font-size: 18px;
}
}
/* =========================================================
Product Category Taxonomy Redesign
========================================================= */
.ph-cat {
background: #fff;
}
.ph-cat__hero {
background: #fab816;
padding: 24px 0 36px;
display: grid;
}
.ph-cat__hero-inner {
display: grid;
gap: 12px;
width: 95%;
justify-self: center;
}
.ph-cat__breadcrumbs,
.ph-cat__breadcrumbs .woocommerce-breadcrumb {
margin: 0;
color: #2f2f2f;
font-size: 14px;
line-height: 1.3;
}
.ph-cat__breadcrumbs a {
color: #2f2f2f;
}
.ph-cat__title {
margin: 0;
color: #111;
font-size: 56px;
line-height: 1.02;
font-weight: 700;
}
.ph-cat__description,
.ph-cat__description p {
margin: 0;
color: #1f1f1f;
font-size: 19px;
line-height: 1.4;
max-width: 900px;
}
.ph-cat__content {
padding: 34px 0 56px;
display: grid;
}
.ph-cat__layout {
display: grid;
grid-template-columns: 290px minmax(0, 1fr);
gap: 30px;
align-items: start;
width: 95%;
max-width: 1600px;
justify-self: center;
}
.ph-cat__layout--full {
grid-template-columns: minmax(0, 1fr);
}
.ph-cat__sidebar{
padding: 8px;
}
.ph-cat__sidebar .filter-products-colour,
.ph-cat__sidebar .filter-products-box {
width: 100%;
}
.ph-cat__sidebar .shop-filters {
display: grid;
gap: 10px;
}
.ph-cat__sidebar .filter-dropdown {
margin: 0;
border: 1px solid #d8d8d8;
border-radius: 10px;
background: #fff;
overflow: hidden;
}
.ph-cat__sidebar .dropbtn {
width: 100%;
min-height: 52px;
border: 0;
background: #fff;
color: #111;
font-size: 17px;
font-weight: 600;
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
}
.ph-cat__sidebar .dropbtn .filter-open {
display: none;
}
.ph-cat__sidebar .filter-dropdown.active .dropbtn .filter-closed {
display: none;
}
.ph-cat__sidebar .filter-dropdown.active .dropbtn .filter-open {
display: inline-flex;
}
.ph-cat__sidebar .dropdown-content {
border-top: 1px solid #ececec;
padding: 12px 14px;
max-height: 230px;
overflow: auto;
}
.ph-cat__sidebar .custom-checkbox {
display: block;
margin: 0 0 9px;
font-size: 15px;
line-height: 1.35;
color: #232323;
}
.ph-cat__sidebar .dropdown-content-colours {
display: none;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
}
.ph-cat__sidebar .filter-dropdown.active .dropdown-content-colours {
display: grid;
}
.ph-cat__sidebar .colour-checkbox {
margin: 0;
}
.ph-cat__sidebar .colour-checkbox span {
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.18);
}
.ph-cat__sidebar .shop-filters-actions {
margin-top: 6px;
}
.ph-cat__sidebar .filter-clear {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 16px;
border-radius: 8px;
border: 1px solid #d8d8d8;
color: #111;
font-size: 15px;
font-weight: 600;
background: #fff;
}
.ph-cat__products .woocommerce-notices-wrapper:empty {
display: none;
}
.ph-cat__toolbar {
margin-bottom: 18px;
}
.ph-cat__toolbar .woocommerce-ordering,
.ph-cat__toolbar .woocommerce-result-count {
margin: 0;
}
.ph-cat__toolbar .woocommerce-ordering {
float: none;
}
.ph-cat__toolbar .woocommerce-result-count {
float: none;
color: #4a4a4a;
font-size: 14px;
line-height: 1.3;
margin-bottom: 10px;
}
.ph-cat__toolbar h2 {
margin: 0;
color: #111;
font-size: 32px;
line-height: 1.15;
font-weight: 700;
}
.ph-cat__toolbar form.woocommerce-ordering select {
width: 100%;
max-width: 270px;
border: 1px solid #d8d8d8;
border-radius: 8px;
min-height: 42px;
padding: 0 12px;
font-size: 15px;
color: #111;
background: #fff;
}
.ph-cat__products ul.products,
.ph-cat__best-sellers ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 0 !important;
}
@media only screen and (min-width: 1281px) {
.ph-cat__products ul.products.columns-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.ph-cat__products ul.products.columns-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ph-cat__products ul.products.columns-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ph-cat__products ul.products.columns-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ph-cat__products ul.products.columns-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.ph-cat__products ul.products.columns-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
.ph-cat__products ul.products::before,
.ph-cat__products ul.products::after,
.ph-cat__best-sellers ul.products::before,
.ph-cat__best-sellers ul.products::after {
display: none !important;
}
.ph-cat__products ul.products li.product,
.ph-cat__best-sellers ul.products li.product {
width: 100% !important;
margin: 0 !important;
}
.ph-cat__pagination-wrap {
margin-top: 20px;
}
.ph-cat__pagination-wrap nav.woocommerce-pagination ul {
border: 0;
margin: 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ph-cat__pagination-wrap nav.woocommerce-pagination ul li {
border: 0;
float: none;
}
.ph-cat__pagination-wrap nav.woocommerce-pagination ul li span,
.ph-cat__pagination-wrap nav.woocommerce-pagination ul li a {
min-width: 38px;
height: 38px;
padding: 0 12px;
border-radius: 8px;
border: 1px solid #d8d8d8;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #1f1f1f;
background: #fff;
}
.ph-cat__pagination-wrap nav.woocommerce-pagination ul li span.current {
background: #111;
border-color: #111;
color: #fff;
}
.ph-cat__best-sellers {
padding: 0 0 56px;
}
.ph-cat__best-sellers-inner {
width: 95%;
max-width: 1600px;
justify-self: center;
display: grid;
gap: 20px;
}
.ph-cat__best-sellers-header {
display: grid;
gap: 10px;
max-width: 760px;
}
.ph-cat__best-sellers-kicker {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
width: fit-content;
padding: 0 14px;
border-radius: 999px;
background: #111;
color: #fff;
font-size: 13px;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
}
.ph-cat__best-sellers-title {
margin: 0;
color: #111;
font-size: 40px;
line-height: 1.05;
font-weight: 700;
}
.ph-cat__best-sellers-copy {
margin: 0;
color: #4a4a4a;
font-size: 17px;
line-height: 1.45;
}
.ph-cat__cta {
padding-bottom: 56px;
width: 95%;
justify-self: center;
}
.ph-cat__cta-inner {
background: #1ab471;
border-radius: 12px;
min-height: 120px;
padding: 28px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.ph-cat__cta-inner p {
margin: 0;
color: #111;
font-size: 34px;
line-height: 1.15;
font-weight: 700;
}
.ph-cat__cta-inner a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 210px;
min-height: 48px;
border-radius: 10px;
background: #fab816;
color: #111;
font-size: 20px;
line-height: 1;
font-weight: 700;
padding: 0 18px;
}
@media only screen and (max-width: 1280px) {
.ph-cat__layout {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.ph-cat__sidebar {
padding: 0;
}
.ph-cat__sidebar .shop-filters {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
align-items: start;
}
.ph-cat__sidebar .shop-filters-actions {
margin-top: 0;
}
.ph-cat__products ul.products,
.ph-cat__best-sellers ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media only screen and (max-width: 980px) {
.ph-cat__title {
font-size: 42px;
}
.ph-cat__best-sellers-title {
font-size: 34px;
}
.ph-cat__description,
.ph-cat__description p {
font-size: 17px;
}
.ph-cat__layout {
grid-template-columns: 1fr;
}
.ph-cat__products ul.products,
.ph-cat__best-sellers ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ph-cat__cta-inner {
flex-direction: column;
align-items: flex-start;
}
.ph-cat__cta-inner p {
font-size: 30px;
}
}
@media only screen and (max-width: 640px) {
.ph-cat__hero {
padding: 18px 0 24px;
}
.ph-cat__title {
font-size: 34px;
}
.ph-cat__best-sellers {
padding-bottom: 40px;
}
.ph-cat__best-sellers-title {
font-size: 28px;
}
.ph-cat__best-sellers-copy {
font-size: 16px;
}
.ph-cat__content {
padding: 24px 0 40px;
}
.ph-cat__products ul.products,
.ph-cat__best-sellers ul.products {
grid-template-columns: 1fr;
}
.ph-cat__sidebar .shop-filters {
grid-template-columns: 1fr;
}
.ph-cat__toolbar form.woocommerce-ordering select {
max-width: none;
}
.ph-cat__cta {
padding-bottom: 40px;
}
.ph-cat__cta-inner {
min-height: 0;
padding: 20px;
}
.ph-cat__cta-inner p {
font-size: 24px;
}
.ph-cat__cta-inner a {
width: 100%;
min-width: 0;
font-size: 18px;
}
}
/* =========================================================
ACF Gutenberg Marketing Blocks
========================================================= */
.ph-eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#565656;margin:0 0 10px}
.ph-copy{font-size:18px;line-height:1.5;color:#303030}
.ph-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:10px;font-weight:700;font-size:18px}
.ph-btn--primary{background:#fab816;color:#111}
.ph-btn--secondary{background:#fff;color:#111;border:1px solid #d9d9d9}
.ph-home-hero{background:#111;color:#fff;padding:64px 0 56px;position:relative;overflow:hidden}
.ph-home-hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.ph-home-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;color:#d6d6d6;font-size:13px;font-weight:700;letter-spacing:.08em}
.ph-home-hero__title{font-size:72px;line-height:1;margin:14px 0 18px;color:#fff}
.ph-home-hero__title span{position:relative;display:inline-block}
.ph-home-hero__title span:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:16px;background:#fab816;z-index:-1}
.ph-home-hero__desc{font-size:20px;line-height:1.45;color:#ddd;max-width:620px}
.ph-home-hero__ctas{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px}
.ph-home-hero__meta{margin-top:20px;display:flex;gap:22px;flex-wrap:wrap;font-size:15px;color:#cfcfcf}
.ph-home-hero__media img{width:100%;border-radius:16px;display:block;object-fit:cover;aspect-ratio:664/560}
.ph-icon-strip{background:#fff;padding:24px 0}
.ph-icon-strip__inner{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ph-icon-strip__item{display:flex;gap:12px;align-items:flex-start}
.ph-icon-strip__item i{width:40px;height:40px;border-radius:999px;background:#f5f5f5;display:inline-flex;align-items:center;justify-content:center;color:#111}
.ph-icon-strip__item h3{font-size:18px;line-height:1.2;margin:0 0 4px;color:#111}
.ph-icon-strip__item p{font-size:14px;line-height:1.3;color:#666;margin:0}
.ph-cat-grid{padding:64px 0;background:#fff}
.ph-cat-grid__items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:24px}
.ph-cat-card{border:1px solid #e5e5e5;border-radius:14px;overflow:hidden;display:block;background:#fff;color:#111}
.ph-cat-card__image{display:block;background:#f3f3f3;aspect-ratio:4/3}
.ph-cat-card__image img{width:100%;height:100%;object-fit:cover;display:block}
.ph-cat-card__tag{display:inline-flex;margin:12px 12px 0;background:#111;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;letter-spacing:.06em}
.ph-cat-card__title{display:block;padding:12px 14px 16px;font-size:22px;font-weight:700;line-height:1.2}
.ph-bundle{background:#111;padding:74px 0;color:#fff}
.ph-bundle__inner{max-width:840px}
.ph-bundle .ph-eyebrow{color:#c9c9c9}
.ph-bundle h2{color:#fff}
.ph-bundle__price{font-size:40px;font-weight:700;margin:0 0 10px;color:#fab816}
.ph-bundle p{font-size:18px;color:#d4d4d4;margin:0 0 12px}
.ph-bundle ul{margin:0 0 20px;padding:0;display:grid;gap:8px}
.ph-bundle li{font-size:17px;color:#f1f1f1;list-style:none}
.ph-brands{background:#fff;padding:46px 0}
.ph-brands h2{text-align:center;font-size:24px;margin:0 0 20px}
.ph-brands__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
.ph-brands__logo{height:56px;border:1px solid #e5e5e5;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fff;padding:10px}
.ph-brands__logo img{max-height:100%;width:auto}
@media only screen and (max-width:1200px){
.ph-home-hero__title{font-size:56px}
.ph-icon-strip__inner{grid-template-columns:repeat(3,minmax(0,1fr))}
.ph-brands__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media only screen and (max-width:900px){
.ph-home-hero{padding:42px 0}
.ph-home-hero__title{font-size:42px}
}
@media only screen and (max-width:640px){
.ph-btn{width:100%;justify-content:center}
.ph-home-hero__title{font-size:34px}
}
/* =========================================================
ACF Gutenberg Marketing Blocks Refinement
========================================================= */
.ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:8px;font:700 14px/24px 'Poppins',sans-serif;white-space:nowrap}
.ph-btn--primary{background:#fab816;color:#000}
.ph-btn--secondary{background:#fff;color:#000;border:1px solid #000}
.ph-eyebrow{font:700 12px/16px 'Poppins',sans-serif;letter-spacing:.2em;text-transform:uppercase}
.ph-copy{font:400 14px/22.5px 'Poppins',sans-serif;color:#a1a1a1}
.ph-home-hero{background:#fff;padding:0}
.ph-home-hero__inner{max-width:1400px;padding:80px 16px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.04) 0 1px,transparent 1px 14px)}
.ph-home-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;border-radius:999px;padding:6px 12px;font:700 12px/16px 'Poppins',sans-serif;letter-spacing:.08em}
.ph-home-hero__title{font:700 70px/74.48px 'Poppins',sans-serif;letter-spacing:-1.9px;color:#000;margin:19px 0 0}
.ph-home-hero__title span{position:relative;display:inline-block}
.ph-home-hero__title span:after{content:"";position:absolute;left:0;right:0;bottom:7px;height:18px;background:#fab816;z-index:-1;transform:rotate(-1deg)}
.ph-home-hero__desc{margin:19px 0 0;max-width:576px;font:400 16.3px/28.5px 'Poppins',sans-serif;color:#404040}
.ph-home-hero__ctas{display:flex;gap:12px;flex-wrap:wrap;padding-top:19px}
.ph-home-hero__meta{display:flex;gap:24px;flex-wrap:wrap;padding-top:12px;font:400 13px/20px 'Poppins',sans-serif;color:#404040}
.ph-home-hero__meta strong{font-weight:700}
.ph-home-hero__mosaic{position:relative}
.ph-home-hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(6,1fr);gap:12px;height:560px}
.ph-home-hero__card{position:relative;border-radius:16px;overflow:hidden;background:#f5f5f5}
.ph-home-hero__card img{width:100%;height:100%;object-fit:cover;display:block}
.ph-home-hero__card--large{grid-column:1/span 7;grid-row:1/span 4}
.ph-home-hero__card--medium{grid-column:8/span 5;grid-row:1/span 3}
.ph-home-hero__card--small{grid-column:1/span 4;grid-row:5/span 2}
.ph-home-hero__card-tag{position:absolute;left:12px;bottom:12px;background:#fff;border-radius:8px;padding:6px 10px;font:700 11.6px/16px 'Poppins',sans-serif;color:#000}
.ph-home-hero__logo-box{grid-column:5/span 3;grid-row:5/span 2;background:#000;border-radius:16px;padding:12px;display:grid;align-content:space-between}
.ph-home-hero__logo-box p{font:700 10px/15px 'Poppins',sans-serif;letter-spacing:1px;color:#fab816;margin:0}
.ph-home-hero__logo-box div{min-height:133px;border:1px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.1);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:8px}
.ph-home-hero__logo-box span{font:700 10px/15px 'Poppins',sans-serif;color:rgba(255,255,255,.7);text-align:center}
.ph-home-hero__logo-box small{font:400 8.8px/15px 'Poppins',sans-serif;color:#a1a1a1}
.ph-home-hero__float-note{position:absolute;left:-19px;top:237px;background:#fff;border:2px solid #000;border-radius:14px;padding:14px 14px 13px;transform:rotate(-4deg);box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);display:grid;gap:0}
.ph-home-hero__float-note small{font:700 10px/15px 'Poppins',sans-serif;color:#737373}
.ph-home-hero__float-note strong{font:700 19px/33px 'Poppins',sans-serif;color:#000}
.ph-home-hero__float-note span{font:400 8.8px/15px 'Poppins',sans-serif;color:#737373}
.ph-icon-strip{background:#fff;border-bottom:1px solid #e5e5e5;padding:0;display:grid;}
.ph-icon-strip__inner{max-width: 1400px;padding:24px 16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;justify-self: center;}
.ph-icon-strip__item{display:flex;gap:12px;align-items:center;min-height:56px}
.ph-icon-strip__item i{width:40px;height:40px;background:#fab816;display:inline-flex;align-items:center;justify-content:center}
.ph-icon-strip__item h3{margin:0;font:700 13px/20px 'Poppins',sans-serif;color:#000}
.ph-icon-strip__item p{margin:0;font:400 11.6px/16px 'Poppins',sans-serif;color:#737373}
.ph-cat-grid__head-link{border:1px solid rgba(255,255,255,.2);color:#fff;padding:11px 21px;font:700 13px/20px 'Poppins',sans-serif;display:inline-flex;align-items:center;gap:8px}
.ph-cat-grid__footer-cta{margin-top:32px;border:1px solid rgba(255,255,255,.7);padding:21px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.ph-cat-grid__footer-cta h3{margin:0;color:#fff;font:700 15px/24px 'Poppins',sans-serif}
.ph-cat-grid__footer-cta p{margin:2px 0 0;color:#a1a1a1;font:400 12.5px/20px 'Poppins',sans-serif}
.ph-cat-grid__footer-cta>div:last-child{display:flex;gap:12px}
.ph-cat-grid__footer-cta .ph-btn--primary{height:42px;padding:0 20px}
.ph-bundle{background:#000;padding:64px 0}
.ph-bundle__layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.ph-bundle__content .ph-eyebrow{color:#fab816}
.ph-bundle__content h2{font:700 44px/48px 'Poppins',sans-serif;color:#fff;margin:8px 0}
.ph-bundle__content p{font:400 14px/22px 'Poppins',sans-serif;color:#d4d4d4;max-width:560px}
.ph-bundle__cta-row{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.ph-bundle__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ph-bundle__offer{background:#fab816;padding:20px;min-height:274px;display:grid;align-content:start;gap:6px}
.ph-bundle__offer small{font:700 10px/15px 'Poppins',sans-serif;letter-spacing:1.8px;color:#000}
.ph-bundle__offer h3{font:700 29px/32px 'Poppins',sans-serif;color:#000;margin:0}
.ph-bundle__offer h3 span{font-size:13px;vertical-align:super}
.ph-bundle__offer p{margin:0;color:rgba(0,0,0,.8);font:700 13px/20px 'Poppins',sans-serif}
.ph-bundle__offer a{margin-top:10px;background:#000;color:#fab816;display:inline-flex;gap:6px;align-items:center;padding:4px 10px;font:700 11px/16px 'Poppins',sans-serif;width:max-content}
.ph-bundle__mini-card{position:relative;border-radius:16px;overflow:hidden;min-height:274px;background:#f5f5f5}
.ph-bundle__mini-card img{width:100%;height:100%;object-fit:cover;display:block}
.ph-bundle__mini-card span{position:absolute;left:12px;top:12px;background:#000;color:#fff;padding:4px 8px;font:700 11px/16px 'Poppins',sans-serif}
.ph-brands{background:#fff;padding:40px 0;display: grid;}
.ph-brands .wrapper{max-width: 1400px; width: 95%; justify-self: center;}
.ph-brands h2{text-align:center;font:700 20px/20px 'Poppins',sans-serif;color:#000;margin:0 0 24px}
.ph-brands__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px}
.ph-brands__logo{height:56px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e5e5}
@media only screen and (max-width:1200px){
.ph-home-hero__title{font-size:54px;line-height:58px}
.ph-home-hero__grid{height:520px}
}
@media only screen and (max-width:768px){
.ph-home-hero__inner{padding:48px 16px}
.ph-home-hero__title{font-size:40px;line-height:44px;letter-spacing:-1px}
.ph-home-hero__grid{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto}
.ph-home-hero__card--large,.ph-home-hero__card--medium,.ph-home-hero__card--small,.ph-home-hero__logo-box{grid-column:auto;grid-row:auto;min-height:180px}
.ph-home-hero__float-note{display:none}
.ph-icon-strip__inner{grid-template-columns:1fr 1fr}
.ph-cat-grid__footer-cta{display:block}
.ph-cat-grid__footer-cta>div:last-child{margin-top:12px}
}
@media only screen and (max-width:560px){
.ph-btn{width:100%}
}
/* =========================================================
ACF Blocks Final Tuning
========================================================= */
.ph-home-hero__title{font-size:74px !important;line-height:74.48px !important}
.ph-home-hero__title span:after{height:19px !important;bottom:2px !important;transform:rotate(-2deg) !important}
.ph-home-hero__eyebrow i,.ph-home-hero__meta i{color:#fab816}
.ph-home-hero .ph-btn i{color:inherit}
.ph-home-hero__float-note a{margin-top:6px;background:#000;color:#fab816;padding:4px 8px;font:700 9px/15px 'Poppins',sans-serif;display:inline-flex;align-items:center;gap:4px;transform:skewX(-8deg)}
.ph-home-hero__float-note a span{transform:skewX(8deg)}
.ph-icon-strip__inner{display:flex !important;flex-wrap:wrap !important;justify-content:space-between !important;gap:16px !important}
.ph-icon-strip__item{flex:1 1 240px;display:flex !important;flex-direction:row !important;align-items:center !important}
.ph-cat-card__sub{display:block;padding:0 16px 8px;color:#525252;font:400 14px/20px 'Poppins',sans-serif}
.ph-bundle__cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:274px !important}
.ph-bundle__mini-card{border-radius:16px !important;overflow:hidden}
.ph-bundle__mini-card p{position:absolute;left:16px;bottom:34px;color:#d4d4d4;font:400 10.5px/16.5px 'Poppins',sans-serif;margin:0}
.ph-bundle__mini-card em{position:absolute;left:16px;bottom:10px;background:#fab816;color:#000;font:700 11px/16px 'Poppins',sans-serif;padding:6px 12px;font-style:normal;display:inline-flex;gap:6px;align-items:center}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:700px){
.ph-home-hero__title{font-size:46px !important;line-height:48px !important}
}
/* =========================================================
ACF Blocks Hotfix Pass (Subpage Container)
========================================================= */
.ph-home-hero .ph-home-hero__inner{padding:60px 16px !important}
.ph-home-hero .ph-home-hero__title{font-size:74px !important;line-height:74px !important;letter-spacing:-1.9px !important}
.ph-home-hero .ph-home-hero__title span::after{height:18px !important;bottom:6px !important;transform:rotate(-1.5deg) !important}
.ph-home-hero .ph-home-hero__eyebrow i,.ph-home-hero .ph-home-hero__meta i{color:#fab816 !important}
.ph-home-hero__float-note{transform:rotate(-4deg) !important}
.ph-home-hero__float-note a{transform:skewX(-8deg) !important}
.ph-home-hero__float-note a span,.ph-home-hero__float-note a i{transform:skewX(8deg);display:inline-block}
.ph-icon-strip .ph-icon-strip__inner{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;justify-content:space-between !important;align-items:stretch !important}
.ph-icon-strip .ph-icon-strip__item{display:flex !important;flex-direction:row !important;align-items:center !important;gap:12px !important;min-width:220px;flex:1 1 220px}
.ph-bundle .ph-bundle__layout{display:grid !important;grid-template-columns:1fr 1fr !important;gap:24px !important}
.ph-bundle .ph-bundle__cards{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-auto-rows:274px !important;gap:12px !important}
.ph-bundle .ph-bundle__mini-card{position:relative !important;border-radius:16px !important;overflow:hidden !important}
.ph-bundle .ph-bundle__mini-card p{position:absolute;left:16px;bottom:34px;color:#d4d4d4;font:400 10.5px/16px 'Poppins',sans-serif;margin:0}
.ph-bundle .ph-bundle__mini-card em{position:absolute;left:16px;bottom:10px;background:#fab816;color:#000;padding:6px 12px;font:700 11px/16px 'Poppins',sans-serif;font-style:normal;display:inline-flex;gap:6px;align-items:center}
@media only screen and (max-width:1080px){
.ph-home-hero .ph-home-hero__title{font-size:56px !important;line-height:58px !important}
.ph-bundle .ph-bundle__layout{grid-template-columns:1fr !important}
}
@media only screen and (max-width:700px){
.ph-home-hero .ph-home-hero__inner{grid-template-columns:1fr !important}
.ph-home-hero .ph-home-hero__title{font-size:42px !important;line-height:44px !important}
}
/* =========================================================
PH Hero Block Rebuild
========================================================= */
.phh-hero {
background: #fff;
}
.phh-hero__inner {
padding: 80px 16px;
display: grid;
gap: 40px;
min-height: 720px;
position: relative;
background-image: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 14px);
}
.main-hero-wrapper{
width: 95%;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 40px;
max-width: 1400px;
justify-self: center;
}
.phh-hero__left {
grid-column: 1 / span 6;
align-self: center;
}
.phh-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
background: #000;
color: #fff;
border-radius: 999px;
padding: 6px 12px;
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 0.08em;
}
.phh-hero__eyebrow i,
.phh-hero__meta i {
color: #fab816;
}
.phh-hero__eyebrow span{
color: #fff;
}
.phh-hero__title {
margin: 19px 0 0;
font: 700 69.5px/74.48px 'Poppins', sans-serif;
letter-spacing: -1.9px;
color: #000;
}
.phh-hero__title span {
position: relative;
display: inline-block;
width: auto;
}
.phh-hero__title span::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 18px;
background: #fab816;
transform: rotate(-1.5deg);
z-index: -1;
}
.phh-hero__desc {
margin: 19px 0 0;
max-width: 576px;
color: #404040;
font: 400 16.3px/28.5px 'Poppins', sans-serif;
}
.phh-hero__cta-row {
padding-top: 19px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.phh-btn {
height: 52px;
border-radius: 8px;
padding: 0 24px;
display: inline-flex;
align-items: center;
gap: 8px;
font: 700 14.8px/24px 'Poppins', sans-serif;
}
.phh-btn--primary {
background: #000;
color: #fff;
}
.phh-btn--sun {
background: #fab816;
color: #000;
}
.phh-btn--ghost {
background: #fff;
color: #000;
border: 2px solid #000;
}
.phh-hero__meta {
display: flex;
gap: 24px;
flex-wrap: wrap;
padding-top: 12px;
}
.phh-hero__meta p {
margin: 0;
display: inline-flex;
align-items: center;
gap: 6px;
color: #404040;
font: 400 11.4px/20px 'Poppins', sans-serif;
}
.phh-hero__meta strong {
font-weight: 700;
font-size: 11.6px;
}
.phh-hero__right {
grid-column: 7 / span 6;
align-self: center;
position: relative;
isolation: isolate;
min-height: 560px;
}
.phh-hero__grid {
position: relative;
z-index: 1;
height: 560px;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(6, 1fr);
gap: 12px;
}
.phh-card {
position: relative;
border-radius: 16px;
overflow: hidden;
background: #f5f5f5;
}
a.phh-card {
display: block;
color: inherit;
text-decoration: none;
}
.phh-card img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.phh-card--large,
.phh-card--1 {
grid-column: 1 / span 7;
grid-row: 1 / span 4;
background: linear-gradient(180deg, #7d1118 0%, #ea4f22 100%);
}
.phh-card--offer,
.phh-card--2 {
grid-column: 8 / span 5;
grid-row: 1 / span 3;
background: #fab816;
padding: 30px 12px;
border: 0;
border-radius: 0;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
}
.phh-card--medium,
.phh-card--3 {
grid-column: 8 / span 5;
grid-row: 4 / span 3;
background: #f5f5f5;
}
.phh-card--small,
.phh-card--4 {
grid-column: 1 / span 4;
grid-row: 5 / span 2;
background: linear-gradient(180deg, #0f7ca7 0%, #1ea4d8 100%);
}
.phh-card__tag {
position: absolute;
left: 12px;
top: 12px;
background: #000;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font: 700 11px/16px 'Poppins', sans-serif;
}
.phh-card--1 .phh-card__tag {
top: auto;
bottom: 12px;
background: #fff;
color: #000;
border-radius: 8px;
font-size: 11.6px;
}
.phh-card__title {
display: block;
color: #000;
font: 700 29px/32px 'Poppins', sans-serif;
margin-top: 6px;
}
.phh-card__sub {
margin: 4px 0 0;
color: rgba(0, 0, 0, 0.8);
font: 700 13px/20px 'Poppins', sans-serif;
}
.phh-logo-box {
grid-column: 5 / span 3;
grid-row: 5 / span 2;
background: #000;
border-radius: 16px;
padding: 12px;
display: grid;
align-content: space-between;
}
.phh-logo-box p {
margin: 0;
color: #fab816;
font: 700 10px/15px 'Poppins', sans-serif;
letter-spacing: 1px;
text-align: center;
}
.phh-logo-box small {
text-align: center;
}
.phh-logo-box div {
min-height: 133px;
border: 1px dashed rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.phh-logo-box span {
color: rgba(255, 255, 255, 0.7);
text-align: center;
font: 700 10px/15px 'Poppins', sans-serif;
}
.phh-logo-box small {
color: #a1a1a1;
font: 400 8.8px/15px 'Poppins', sans-serif;
}
.phh-note {
position: absolute;
left: -34px;
top: 35%;
transform: rotate(-7deg);
background: #fff;
border: 2px solid #000;
border-radius: 14px;
padding: 13px 14px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
display: grid;
z-index: 2;
}
.phh-note small {
color: #323232;
font: 700 10px/15px 'Poppins', sans-serif;
}
.phh-note strong {
color: #000;
font: 700 19.3px/33px 'Poppins', sans-serif;
}
.phh-note span {
color: #222;
font: 400 8.8px/15px 'Poppins', sans-serif;
}
.phh-note a {
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 5px;
background: #000;
color: #fab816;
padding: 4px 10px;
font: 700 11px/16px 'Poppins', sans-serif;
transform: skewX(-8deg);
}
.phh-note a i,
.phh-note a span {
transform: skewX(8deg);
}
.phh-note a span{
color: #fab816;
}
@media only screen and (max-width: 1180px) {
.phh-hero__inner {
min-height: 0;
padding: 48px 16px;
}
.main-hero-wrapper{
grid-template-columns: 1fr;
gap: 28px;
}
.phh-hero__left,
.phh-hero__right {
grid-column: auto;
}
.phh-hero__slant {
right: -16px;
top: 14px;
height: 430px;
}
.phh-hero__title {
font-size: 52px;
line-height: 56px;
}
.phh-note {
display: none;
}
}
@media only screen and (max-width: 760px) {
.phh-hero__title {
font-size: 40px;
letter-spacing: -1px;
}
.phh-hero__grid {
height: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: none;
}
.phh-hero__slant {
display: none;
}
.phh-card,
.phh-logo-box {
grid-column: auto !important;
grid-row: auto !important;
min-height: 170px;
}
.phh-btn {
width: 100%;
justify-content: center;
}
}
/* =========================================================
PH Category Grid - Industry Mosaic Dark Rebuild
========================================================= */
.ph-cat-grid--industry {
background: #000;
padding: 56px 0 64px;
display: grid;
}
.ph-cat-grid--industry .wrapper {
max-width: 1400px;
justify-self: center;
width: 95%;
}
.ph-cat-grid--industry .ph-cat-grid__top-bar {
width: 100%;
height: 4px;
background: #fab816;
}
.ph-cat-grid--industry .ph-cat-grid__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin: 0 0 32px;
padding-top: 56px;
}
@media only screen and (max-width: 640px) {
.ph-cat-grid__head, .ph-info-boxes header{
padding-left: 16px;
}
.ph-about__content{
padding: 0 16px;
}
}
.ph-cat-grid--industry .ph-eyebrow {
display: inline-block;
margin: 0;
padding: 4px 12px;
background: #fab816;
color: #000;
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.ph-cat-grid--industry h2 {
margin: 12px 0;
color: #fff;
font: 700 44.4px/48px 'Poppins', sans-serif;
letter-spacing: -1.2px;
max-width: 512px;
}
.ph-cat-grid--industry .ph-copy {
margin: 0;
max-width: 512px;
color: #a1a1a1;
font: 400 13.2px/22.5px 'Poppins', sans-serif;
}
.ph-cat-grid--industry .ph-cat-grid__head-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 21px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font: 700 13px/20px 'Poppins', sans-serif;
white-space: nowrap;
}
.ph-cat-grid--industry .ph-cat-grid__items {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: repeat(2, 334px);
gap: 12px;
padding-top: 8px;
}
.ph-cat-grid--industry .ph-cat-card {
position: relative;
overflow: hidden;
border: 0;
border-radius: 0;
min-height: 334px;
color: inherit;
}
.ph-cat-grid--industry .ph-cat-card:nth-child(1) {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
min-height: 680px;
}
.ph-cat-grid--industry .ph-cat-card__image,
.ph-cat-grid--industry .ph-cat-card__image img {
width: 100%;
height: 100%;
}
.ph-cat-grid--industry .ph-cat-card__image img {
object-fit: cover;
display: block;
}
.ph-cat-grid--industry .ph-cat-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 50%, #000 100%);
pointer-events: none;
}
.ph-cat-grid--industry .ph-cat-card__tag {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
margin: 0;
padding: 2px 8px;
background: rgba(0, 0, 0, 0.6);
color: #fab816;
font: 700 9.5px/15px 'Poppins', sans-serif;
letter-spacing: 0.5px;
}
.ph-cat-grid--industry .ph-cat-card__title {
position: absolute;
left: 16px;
right: 16px;
bottom: 56px;
z-index: 2;
margin: 0;
color: #fff;
font: 700 13.9px/16.5px 'Poppins', sans-serif;
letter-spacing: -0.15px;
}
.ph-cat-grid--industry .ph-cat-card:nth-child(1) .ph-cat-card__title {
bottom: 66px;
font-size: 33px;
line-height: 36px;
letter-spacing: -0.26px;
}
.ph-cat-grid--industry .ph-cat-card__sub {
position: absolute;
left: 16px;
right: 16px;
bottom: 40px;
z-index: 2;
color: #d4d4d4;
font: 400 10.5px/16.5px 'Poppins', sans-serif;
}
.ph-cat-grid--industry .ph-cat-card:nth-child(1) .ph-cat-card__sub {
bottom: 46px;
}
.ph-cat-grid--industry .ph-cat-card__cta {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #fab816;
color: #000;
font: 700 11.1px/16px 'Poppins', sans-serif;
}
.ph-cat-grid--industry .ph-cat-grid__footer-cta {
margin-top: 32px;
border: 1px solid rgba(255, 255, 255, 0.7);
padding: 21px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.ph-cat-grid--industry .ph-cat-grid__footer-cta h3 {
margin: 0;
color: #fff;
font: 700 15px/24px 'Poppins', sans-serif;
}
.ph-cat-grid--industry .ph-cat-grid__footer-cta p {
margin: 0;
color: #a1a1a1;
font: 400 12.5px/20px 'Poppins', sans-serif;
}
.ph-cat-grid--industry .ph-cat-grid__footer-cta > div:last-child {
display: flex;
gap: 12px;
}
.ph-cat-grid--industry .ph-cat-grid__footer-cta .ph-btn {
height: 42px;
padding: 0 20px;
border-radius: 0;
font-size: 13px;
}
padding: 0 21px;
border-color: rgba(255, 255, 255, 0.2);
}
@media only screen and (max-width: 1180px) {
.ph-cat-grid--industry .ph-cat-grid__head {
display: block;
padding-top: 42px;
}
.ph-cat-grid--industry .ph-cat-grid__head-link {
margin-top: 16px;
}
.ph-cat-grid--industry .ph-cat-grid__items {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto;
}
.ph-cat-grid--industry .ph-cat-card:nth-child(1) {
grid-column: 1 / span 3;
grid-row: auto;
min-height: 420px;
}
.ph-cat-grid--industry .ph-cat-card {
min-height: 290px;
}
}
@media only screen and (max-width: 760px) {
.ph-cat-grid--industry {
padding: 44px 0;
}
.ph-cat-grid--industry h2 {
font-size: 34px;
line-height: 38px;
}
.ph-cat-grid--industry .ph-cat-grid__items {
grid-template-columns: 1fr;
gap: 10px;
}
.ph-cat-grid--industry .ph-cat-card,
.ph-cat-grid--industry .ph-cat-card:nth-child(1) {
grid-column: auto;
min-height: 290px;
}
.ph-cat-grid--industry .ph-cat-card:nth-child(1) .ph-cat-card__title {
bottom: 56px;
font-size: 24px;
line-height: 28px;
}
.ph-cat-grid--industry .ph-cat-grid__footer-cta {
display: block;
}
.ph-cat-grid--industry .ph-cat-grid__footer-cta > div:last-child {
margin-top: 12px;
flex-wrap: wrap;
}
}
/* =========================================================
PH Bundles Feature Rebuild
========================================================= */
.phbf {
background: #000;
position: relative;
overflow: hidden;
display: grid;
}
.phbf::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.04;
background-image: linear-gradient(45deg, transparent 0 98.9%, #fab816 98.9% 100%);
}
.phbf::after {
content: "";
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(250, 184, 22, 0.1);
filter: blur(32px);
right: -80px;
top: -80px;
}
.phbf__inner {
position: relative;
z-index: 1;
max-width: 1400px;
padding: 80px 16px;
width: 95%;
justify-self: center;
}
.phbf__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 40px;
}
.phbf__eyebrow {
display: inline-block;
margin: 0;
padding: 4px 12px;
background: #fab816;
color: #000 !important;
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 1.2px;
}
.phbf__head h2 {
margin: 10px 0 0;
color: #fff;
font: 700 41.6px/44px 'Poppins', sans-serif;
letter-spacing: -0.88px;
}
.phbf__head-link {
color: #a1a1a1;
display: inline-flex;
align-items: center;
gap: 8px;
font: 700 13px/20px 'Poppins', sans-serif;
}
.phbf__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 32px;
}
.phbf__left {
grid-column: 1 / span 7;
}
.phbf__rail {
grid-column: 8 / span 5;
}
.phbf__feature h3 {
margin: 8px 0 0;
color: #fff;
font: 700 49.3px/49.4px 'Poppins', sans-serif;
letter-spacing: -1.04px;
}
.phbf__feature h3 span { color: #fab816; }
.phbf__badge {
display: inline-block;
background: #fab816;
color: #000;
padding: 4px 12px;
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 1.2px;
}
.phbf__desc {
margin: 12px 0 0;
max-width: 448px;
color: #d4d4d4;
font: 400 13.1px/22.5px 'Poppins', sans-serif;
}
.phbf__price {
margin: 8px 0 0;
color: #fff;
font: 700 47.7px/46.8px 'Poppins', sans-serif;
}
.phbf__price small {
color: #a1a1a1;
font: 400 14.9px/24px 'Poppins', sans-serif;
}
.phbf__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.phbf__chips span {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #fff;
padding: 5px 11px;
font: 700 11px/16px 'Poppins', sans-serif;
}
.phbf__included {
margin-top: 14px;
border-left: 4px solid #fab816;
background: rgba(250, 184, 22, 0.1);
padding: 12px 12px 12px 16px;
display: grid;
grid-template-columns: 1fr auto;
gap: 0 12px;
align-items: center;
}
.phbf__included strong {
color: #fab816;
font: 700 10px/15px 'Poppins', sans-serif;
letter-spacing: 1px;
}
.phbf__included span {
color: #fff;
font: 700 13.2px/21px 'Poppins', sans-serif;
}
.phbf__included i { color: #fab816; }
.phbf__actions {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.phbf__btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 60px;
padding: 0 20px;
font: 700 15px/24px 'Poppins', sans-serif;
}
.phbf__btn--yellow { background: #fab816; color: #000; }
.phbf__btn--ghost { border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.phbf__matrix {
margin-top: 16px;
background: #fff;
padding: 36px 24px 24px;
position: relative;
}
.phbf__matrix-tag,
.phbf__matrix-price {
position: absolute;
top: -12px;
padding: 4px 12px;
font: 700 12px/16px 'Poppins', sans-serif;
}
.phbf__matrix-tag { left: 20px; background: #000; color: #fab816; }
.phbf__matrix-price { right: 20px; background: #fab816; color: #000; font-size: 11px; }
.phbf__matrix-head {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 13px;
display: flex;
justify-content: space-between;
align-items: center;
}
.phbf__matrix-head small { color: #737373; font: 700 10px/15px 'Poppins', sans-serif; letter-spacing: 1px; }
.phbf__matrix-head h4 { margin: 0; color: #000; font: 700 18px/27px 'Poppins', sans-serif; }
.phbf__matrix-head strong { width: 48px; height: 48px; background: #000; color: #fab816; display: grid; place-items: center; font: 700 20px/30px 'Poppins', sans-serif; }
.phbf__row {
margin-top: 12px;
display: grid;
grid-template-columns: 74px 1fr;
gap: 8px;
}
.phbf__row aside {
background: #fab816;
text-align: center;
padding: 12px 4px;
color: #000;
display: grid;
gap: 2px;
}
.phbf__row aside span,
.phbf__row aside em { font: 700 8px/12px 'Poppins', sans-serif; letter-spacing: 0.8px; font-style: normal; }
.phbf__row aside strong { font: 700 37px/34px 'Poppins', sans-serif; }
.phbf__tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.phbf__tile figure { margin: 0; height: 132px; overflow: hidden; }
.phbf__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phbf__tile b { display: block; background: #111; color: #fff; text-align: center; font: 700 10px/16px 'Poppins', sans-serif; padding: 4px; }
.phbf__tiles p { grid-column: 1 / -1; margin: 0; color: #737373; font: 700 10px/16px 'Poppins', sans-serif; }
.phbf__matrix-footer {
margin-top: 12px;
background: #000;
color: #fff;
padding: 12px 16px;
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.phbf__matrix-footer span { font: 700 14px/20px 'Poppins', sans-serif; }
.phbf__matrix-footer a { background: #fab816; color: #000; padding: 6px 12px; font: 700 12px/16px 'Poppins', sans-serif; display: inline-flex; gap: 6px; }
.phbf__rail-title {
margin: 0;
color: #737373;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 5px;
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.phbf__offer {
margin-top: 12px;
border: 2px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.02);
padding: 18px;
}
.phbf__offer-pill { display: inline-block; padding: 2px 8px; color: #fff; font: 700 10px/15px 'Poppins', sans-serif; letter-spacing: 1px; }
.phbf__offer h4 { margin: 4px 0 0; color: #fff; font: 700 15px/24px 'Poppins', sans-serif; }
.phbf__offer h5 { margin: 0; font: 700 30px/30px 'Poppins', sans-serif; }
.phbf__offer p { margin: 3px 0 0; color: #a1a1a1; font: 400 10.7px/19.5px 'Poppins', sans-serif; }
.phbf__offer .phbf__chips { margin-top: 8px; }
.phbf__offer .phbf__chips span { padding: 2px 8px; border: 0; color: #d4d4d4; font-size: 10px; }
.phbf__offer-link { margin-top: 10px; color: #fff; font: 700 11px/16px 'Poppins', sans-serif; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.phbf__offer-link:hover { text-decoration: underline; }
.phbf__offer--red .phbf__offer-pill { background: #ef4444; }
.phbf__offer--red h5 { color: #ef4444; }
.phbf__offer--blue .phbf__offer-pill { background: #2563eb; }
.phbf__offer--blue h5 { color: #2563eb; }
.phbf__offer--yellow .phbf__offer-pill { background: #fab816; color: #000; }
.phbf__offer--yellow h5 { color: #fab816; }
.phbf__supplier {
margin-top: 12px;
background: #fab816;
padding: 16px;
}
.phbf__supplier small { display: block; color: #000; font: 700 12px/16px 'Poppins', sans-serif; letter-spacing: 1.2px; }
.phbf__supplier h4 { margin: 2px 0 0; color: #000; font: 700 15.5px/25.5px 'Poppins', sans-serif; }
.phbf__supplier p { margin: 0; color: rgba(0, 0, 0, 0.7); font: 400 10.7px/16px 'Poppins', sans-serif; }
.phbf__supplier a { margin-top: 8px; background: #000; color: #fab816; padding: 10px 16px; display: inline-flex; gap: 6px; font: 700 13.3px/20px 'Poppins', sans-serif; }
@media only screen and (max-width: 1180px) {
.phbf__grid { grid-template-columns: 1fr; }
.phbf__left,
.phbf__rail { grid-column: auto; }
}
@media only screen and (max-width: 760px) {
.phbf__inner { padding: 48px 16px; }
.phbf__head { display: block; }
.phbf__head h2 { font-size: 34px; line-height: 38px; }
.phbf__head-link { margin-top: 12px; }
.phbf__feature h3 { font-size: 40px; line-height: 42px; }
.phbf__row { grid-template-columns: 1fr; }
.phbf__tiles { grid-template-columns: 1fr 1fr; }
.phbf__actions .phbf__btn,
.phbf__matrix-footer { width: 100%; }
}
/* =========================================================
PH Category Grid - Category Tiles Rebuild
========================================================= */
.ph-cat-grid--tiles {
background: #f2f2f2;
padding: 72px 0;
display: grid;
}
.ph-cat-grid--tiles .wrapper {
max-width: 1400px;
width: 95%;
justify-self: center;
}
.ph-cat-grid--tiles .ph-cat-grid__head {
margin-bottom: 28px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
}
.ph-cat-grid--tiles .ph-eyebrow {
margin: 0;
display: inline-block;
background: #000;
color: #fab816;
padding: 4px 12px;
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.ph-cat-grid--tiles h2 {
margin: 12px 0 0;
color: #000;
font: 700 48px/52px 'Poppins', sans-serif;
letter-spacing: -1px;
}
.ph-cat-grid--tiles .ph-copy {
margin: 10px 0 0;
max-width: 560px;
color: #575757;
font: 400 14px/22px 'Poppins', sans-serif;
}
.ph-cat-grid--tiles .ph-cat-grid__head-link {
color: #111;
background: #fff;
border: 1px solid #d8d8d8;
border-radius: 999px;
padding: 10px 16px;
font: 700 14px/20px 'Poppins', sans-serif;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.ph-cat-grid--tiles .ph-cat-grid__items {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: 322px 302px;
gap: 16px;
}
.ph-cat-grid--tiles .ph-cat-card {
position: relative;
overflow: hidden;
border: 1px solid #e5e5e5;
border-radius: 0;
background: #fff;
color: #000;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.ph-cat-grid--tiles .ph-cat-card--tile-large {
grid-column: 1 / span 4;
grid-row: 1 / span 2;
min-height: 640px;
}
.ph-cat-grid--tiles .ph-cat-card--tile-medium {
grid-column: 5 / span 4;
grid-row: 1 / span 1;
}
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(3) { grid-column: 9 / span 2; grid-row: 1; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(4) { grid-column: 11 / span 2; grid-row: 1; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(5) { grid-column: 5 / span 2; grid-row: 2; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(6) { grid-column: 7 / span 2; grid-row: 2; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(7) { grid-column: 9 / span 2; grid-row: 2; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(8) { grid-column: 11 / span 2; grid-row: 2; }
.ph-cat-grid--tiles .ph-cat-card__image,
.ph-cat-grid--tiles .ph-cat-card__image img {
width: 100%;
height: 100%;
}
.ph-cat-grid--tiles .ph-cat-card__image {
display: block;
position: relative;
background: #fafafa;
}
.ph-cat-grid--tiles .ph-cat-card--tile-large .ph-cat-card__image,
.ph-cat-grid--tiles .ph-cat-card--tile-medium .ph-cat-card__image {
min-height: 100%;
}
.ph-cat-grid--tiles .ph-cat-card--tile-small .ph-cat-card__image {
height: 72%;
}
.ph-cat-grid--tiles .ph-cat-card__image img {
object-fit: cover;
display: block;
}
.ph-cat-grid--tiles .ph-cat-card--tile-large .ph-cat-card__image::after,
.ph-cat-grid--tiles .ph-cat-card--tile-medium .ph-cat-card__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.85) 100%);
}
.ph-cat-grid--tiles .ph-cat-card__tag {
position: absolute;
top: 8px;
left: 8px;
z-index: 3;
margin: 0;
background: #fab816;
color: #000;
padding: 2px 8px;
font: 700 9.5px/15px 'Poppins', sans-serif;
letter-spacing: 0;
border-radius: 999px;
}
.ph-cat-grid--tiles .ph-cat-card__title {
margin: 0;
z-index: 3;
}
.ph-cat-grid--tiles .ph-cat-card--tile-large .ph-cat-card__title,
.ph-cat-grid--tiles .ph-cat-card--tile-medium .ph-cat-card__title {
position: absolute;
left: 20px;
right: 20px;
bottom: 63px;
color: #fff;
font: 700 33px/34px 'Poppins', sans-serif;
letter-spacing: -0.32px;
padding: 0;
}
.ph-cat-grid--tiles .ph-cat-card--tile-small .ph-cat-card__title {
display: block;
color: #000;
font: 700 16px/22px 'Poppins', sans-serif;
padding: 12px 12px 2px;
}
.ph-cat-grid--tiles .ph-cat-card__eyebrow {
position: absolute;
left: 20px;
bottom: 94px;
z-index: 3;
color: rgba(255, 255, 255, 0.8);
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.ph-cat-grid--tiles .ph-cat-card__sub {
display: block;
color: #737373;
font: 400 11px/16px 'Poppins', sans-serif;
padding: 0 12px 12px;
}
.ph-cat-grid--tiles .ph-cat-card__cta {
z-index: 3;
display: inline-flex;
align-items: center;
gap: 8px;
}
.ph-cat-grid--tiles .ph-cat-card--tile-large .ph-cat-card__cta,
.ph-cat-grid--tiles .ph-cat-card--tile-medium .ph-cat-card__cta {
position: absolute;
left: 20px;
bottom: 20px;
background: #fff;
color: #000;
padding: 8px 16px;
font: 700 15px/24px 'Poppins', sans-serif;
}
.ph-cat-grid--tiles .ph-cat-card--tile-small .ph-cat-card__cta {
position: absolute;
right: 12px;
bottom: 12px;
color: #000;
font: 700 13px/18px 'Poppins', sans-serif;
}
@media only screen and (max-width: 1180px) {
.ph-cat-grid--tiles .ph-cat-grid__items {
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: 312px 312px 232px;
}
.ph-cat-grid--tiles .ph-cat-card--tile-large { grid-column: 1 / span 3; grid-row: 1 / span 2; min-height: 640px; }
.ph-cat-grid--tiles .ph-cat-card--tile-medium { grid-column: 4 / span 3; grid-row: 1; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(3) { grid-column: 4 / span 1; grid-row: 2; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(4) { grid-column: 5 / span 1; grid-row: 2; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(5) { grid-column: 6 / span 1; grid-row: 2; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(6) { grid-column: 1 / span 2; grid-row: 3; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(7) { grid-column: 3 / span 1; grid-row: 3; }
.ph-cat-grid--tiles .ph-cat-card--tile-small:nth-child(8) { grid-column: 4 / span 3; grid-row: 3; }
}
@media only screen and (max-width: 760px) {
.ph-cat-grid--tiles {
padding: 48px 0;
}
.ph-cat-grid--tiles .ph-cat-grid__head {
display: block;
}
.ph-cat-grid--tiles .ph-cat-grid__head h2 {
font-size: 34px;
line-height: 38px;
}
.ph-cat-grid--tiles .ph-cat-grid__head-link {
margin-top: 12px;
}
.ph-cat-grid--tiles .ph-cat-grid__items {
grid-template-columns: 1fr;
grid-template-rows: none;
}
.ph-cat-grid--tiles .ph-cat-card,
.ph-cat-grid--tiles .ph-cat-card--tile-large,
.ph-cat-grid--tiles .ph-cat-card--tile-medium,
.ph-cat-grid--tiles .ph-cat-card--tile-small {
grid-column: auto !important;
grid-row: auto !important;
min-height: 280px;
}
.ph-cat-grid--tiles .ph-cat-card--tile-small {
min-height: 230px;
}
}
/* =========================================================
PH Steps Rebuild
========================================================= */
.phs {
background: #fff;
padding: 32px 0 20px;
}
.phs__band {
background: #000;
transform: skewY(-1deg);
display: grid;
}
.phs__inner {
transform: skewY(1deg);
max-width: 1400px;
padding: 64px 16px;
width: 95%;
justify-self: center;
}
.phs__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 40px;
}
.phs__eyebrow {
margin: 0;
color: #fab816 !important;
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.phs__head h2 {
margin: 8px 0 0;
color: #fff;
font: 700 43.5px/46px 'Poppins', sans-serif;
letter-spacing: -0.92px;
}
.phs__head h2 span {
color: #fab816;
}
.phs__quote {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fab816;
color: #000;
padding: 11.5px 20px;
font: 700 15.1px/24px 'Poppins', sans-serif;
white-space: nowrap;
}
.phs__grid {
display: flex;
flex-wrap: nowrap;
gap: 8px;
}
.phs__card {
position: relative;
flex: 1 1 0;
background: #fff;
border-left: 4px solid #fab816;
padding: 20px 20px 20px 24px;
min-height: 164px;
min-width: 210px;
}
.phs__card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
min-height: 38px;
}
.phs__card-top strong {
color: #fab816;
font: 700 34px/36px 'Poppins', sans-serif;
}
.phs__card-top i {
color: #000;
font-size: 20px;
line-height: 1;
margin-top: 2px;
}
.phs__card h3 {
margin: 10px 0 0;
color: #000;
font: 700 14.9px/24px 'Poppins', sans-serif;
}
.phs__card p {
margin: 0;
color: #525252;
font: 400 12.6px/20px 'Poppins', sans-serif;
}
.phs__connector {
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: #fab816;
color: #000;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
z-index: 2;
}
@media only screen and (max-width: 1180px) {
.phs__head {
display: block;
}
.phs__quote {
margin-top: 14px;
}
.phs__grid {
overflow-x: auto;
padding-bottom: 6px;
}
.phs__connector {
display: none;
}
}
@media only screen and (max-width: 760px) {
.phs__inner {
padding: 48px 16px;
}
.phs__head h2 {
font-size: 34px;
line-height: 38px;
}
.phs__grid {
overflow-x: auto;
}
.phs__quote {
width: 100%;
justify-content: center;
}
}
/* =========================================================
PH Category Grid - Best Seller Product Cards Rebuild
========================================================= */
.ph-cat-grid--products {
background: #f5f5f5;
padding: 64px 0;
display: grid;
}
.ph-cat-grid--products .wrapper {
max-width: 1400px;
width: 95%;
justify-self: center;
}
.ph-cat-grid--products .ph-cat-grid__head {
margin-bottom: 32px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
}
.ph-cat-grid--products .ph-eyebrow {
margin: 0;
color: #fab816;
font: 700 14px/20px 'Poppins', sans-serif;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.ph-cat-grid--products h2 {
margin: 0;
color: #000;
font: 700 33.3px/54px 'Poppins', sans-serif;
letter-spacing: -0.36px;
}
.ph-cat-grid--products .ph-cat-grid__head-link {
color: #000;
font: 700 15.9px/24px 'Poppins', sans-serif;
white-space: nowrap;
}
.ph-cat-grid--products .ph-cat-grid__items {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.ph-cat-grid--products .ph-cat-card {
display: block;
border: 1px solid #e5e5e5;
border-radius: 14px;
overflow: hidden;
background: #fff;
color: #000;
}
.ph-cat-grid--products .ph-cat-card__image {
position: relative;
display: block;
background: #fafafa;
height: 328px;
width: 100%;
}
.ph-cat-grid--products .ph-cat-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ph-cat-grid--products .ph-cat-card__tag {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
margin: 0;
background: #000;
color: #fff;
border-radius: 4px;
padding: 4px 8px;
font: 700 11px/16px 'Poppins', sans-serif;
}
.ph-cat-grid--products .ph-cat-card__title {
display: block;
margin: 0;
padding: 6px 16px 0;
color: #000;
font: 700 15px/24px 'Poppins', sans-serif;
}
.ph-cat-grid--products .ph-cat-card__rating {
display: flex;
align-items: center;
gap: 4px;
padding: 16px 16px 0;
}
.ph-cat-grid--products .ph-cat-card__stars {
color: #fab816;
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 1px;
}
.ph-cat-grid--products .ph-cat-card__reviews {
color: #737373;
font: 400 11px/16px 'Poppins', sans-serif;
}
.ph-cat-grid--products .ph-cat-card__sub {
display: block;
margin: 0;
padding: 0 16px;
color: #737373;
font: 400 12.3px/20px 'Poppins', sans-serif;
}
.ph-cat-grid--products .ph-cat-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px 16px;
}
.ph-cat-grid--products .ph-cat-card__price {
color: #000;
font: 700 14.7px/24px 'Poppins', sans-serif;
}
.ph-cat-grid--products .ph-cat-card__price em {
color: #737373;
font-style: normal;
font-weight: 400;
font-size: 11px;
}
.ph-cat-grid--products .ph-cat-card__view {
color: #fab816;
font: 700 12.6px/20px 'Poppins', sans-serif;
display: inline-flex;
align-items: center;
gap: 4px;
}
@media only screen and (max-width: 1100px) {
.ph-cat-grid--products .ph-cat-grid__items {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media only screen and (max-width: 700px) {
.ph-cat-grid--products {
padding: 48px 0;
}
.ph-cat-grid--products .ph-cat-grid__head {
display: block;
}
.ph-cat-grid--products .ph-cat-grid__head-link {
display: inline-block;
margin-top: 10px;
}
.ph-cat-grid--products h2 {
font-size: 30px;
line-height: 36px;
}
.ph-cat-grid--products .ph-cat-grid__items {
grid-template-columns: 1fr;
}
}
/* =========================================================
PH Info Boxes Rebuild
========================================================= */
.ph-info-boxes {
background: #fff;
padding: 64px 0;
display: grid;
}
.ph-info-boxes .wrapper {
max-width: 1400px;
width: 95%;
justify-self: center;
}
.ph-info-boxes header {
margin-bottom: 32px;
}
.ph-info-boxes .ph-eyebrow {
margin: 0;
color: #fab816;
font: 700 14px/20px 'Poppins', sans-serif;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.ph-info-boxes h2 {
margin: 8px 0 0;
color: #000;
font: 700 33.9px/54px 'Poppins', sans-serif;
letter-spacing: -0.36px;
}
.ph-info-boxes__grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 16px !important;
}
.ph-info-box {
min-height: 158px;
border: 1px solid #e5e5e5;
border-radius: 16px;
background: #fafafa;
padding: 25px;
display: grid;
gap: 4px;
align-content: start;
grid-column: auto;
}
.ph-info-box__icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(250, 184, 22, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fab816;
margin-bottom: 12px;
}
.ph-info-box h3 {
margin: 0;
color: #000;
font: 700 15px/24px 'Poppins', sans-serif;
}
.ph-info-box p {
margin: 0;
color: #525252;
font: 400 12.5px/20px 'Poppins', sans-serif;
}
.ph-info-box.is-featured {
background: #000;
border-color: #000;
}
.ph-info-box.is-featured .ph-info-box__icon {
background: #fab816;
color: #000;
}
.ph-info-box.is-featured h3 {
color: #fff;
}
.ph-info-box.is-featured p {
color: #d4d4d4;
}
@media only screen and (max-width: 1024px) {
.ph-info-boxes__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media only screen and (max-width: 700px) {
.ph-info-boxes {
padding: 48px 0;
}
.ph-info-boxes h2 {
font-size: 30px;
line-height: 36px;
}
.ph-info-boxes__grid {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
PH About Rebuild
========================================================= */
.ph-about {
background: #fafafa;
padding: 64px 0;
display: grid;
}
.ph-about__inner {
max-width: 1400px;
width: 95%;
justify-self: center;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 40px;
align-items: center;
}
.ph-about__media {
grid-column: 1 / span 6;
position: relative;
}
.ph-about__media img {
width: 100%;
height: auto;
display: block;
border-radius: 16px;
}
.ph-about__content {
grid-column: 7 / span 6;
}
.ph-about .ph-eyebrow {
margin: 0;
color: #fab816;
font: 700 14px/20px 'Poppins', sans-serif;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.ph-about__content h2 {
margin: 8px 0 0;
color: #000;
font: 700 33px/54px 'Poppins', sans-serif;
letter-spacing: -0.36px;
}
.ph-about__content .ph-copy {
margin-top: 8px;
color: #404040;
font: 400 14.9px/27.2px 'Poppins', sans-serif;
}
.ph-about__content .ph-copy p {
margin: 0;
}
.ph-about__boxes {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.ph-about__box {
height: 46px;
border: 1px solid #e5e5e5;
border-radius: 10px;
background: #fff;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 0 13px;
color: #000;
font: 400 13.5px/20px 'Poppins', sans-serif;
}
.ph-about__box i {
color: #fab816;
}
.ph-about__note {
position: absolute;
right: 24px;
bottom: -22px;
max-width: 320px;
border-radius: 16px;
background: #000;
padding: 20px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.ph-about__note strong {
display: block;
color: #fab816;
font: 700 12px/16px 'Poppins', sans-serif;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.ph-about__note h3 {
margin: 4px 0 0;
color: #fff;
font: 700 15px/24px 'Poppins', sans-serif;
}
.ph-about__note p {
margin: 0;
color: #a1a1a1;
font: 400 12.5px/20px 'Poppins', sans-serif;
}
@media only screen and (max-width: 1080px) {
.ph-about__inner {
grid-template-columns: 1fr;
}
.ph-about__media,
.ph-about__content {
grid-column: auto;
}
.ph-about__note {
right: 16px;
bottom: 16px;
max-width: 280px;
}
.ph-about__boxes {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media only screen and (max-width: 700px) {
.ph-about {
padding: 48px 0;
}
.ph-about__content h2 {
font-size: 30px;
line-height: 38px;
}
.ph-about__boxes {
grid-template-columns: 1fr;
}
}
/* =========================================================
PH CTA Help Rebuild
========================================================= */
.ph-help-cta {
background: #000;
position: relative;
overflow: hidden;
padding: 80px 0;
display: grid;
}
.ph-help-cta::before {
content: "";
position: absolute;
left: 50%;
top: -96px;
width: 600px;
height: 600px;
transform: translateX(-50%);
border-radius: 50%;
background: rgba(250, 184, 22, 0.15);
filter: blur(32px);
}
.ph-help-cta__inner {
position: relative;
z-index: 1;
max-width: 1400px;
display: grid;
justify-items: center;
gap: 16px;
width: 95%;
justify-self: center;
}
.ph-help-cta h2 {
margin: 0;
max-width: 100%;
text-align: center;
color: #fff;
font: 700 45px/72px 'Poppins', sans-serif;
letter-spacing: -0.48px;
}
.ph-help-cta p {
margin: 0;
max-width: 672px;
text-align: center;
color: #d4d4d4;
font: 400 15.9px/27px 'Poppins', sans-serif;
}
.ph-help-cta__buttons {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-top: 16px;
}
.ph-help-cta .ph-btn {
height: 70px;
border-radius: 8px;
padding: 0 24px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font: 700 15px/24px 'Poppins', sans-serif;
}
.ph-help-cta .ph-btn--primary {
background: #fab816;
color: #000;
border: 0;
}
.ph-help-cta .ph-btn--secondary {
background: #fff;
color: #000;
border: 0;
}
.ph-help-cta .ph-btn--ghost {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
@media only screen and (max-width: 900px) {
.ph-help-cta {
padding: 64px 0;
}
.ph-help-cta h2 {
font-size: 36px;
line-height: 46px;
}
}
@media only screen and (max-width: 700px) {
.ph-help-cta {
padding: 48px 0;
}
.ph-help-cta h2 {
font-size: 30px;
line-height: 38px;
}
.ph-help-cta .ph-btn {
width: 100%;
max-width: 360px;
}
}
/* =========================================================
404 PAGE
========================================================= */
.ph-404 {
grid-column: 1 / 17;
background: #f2f2f2;
}
.ph-404__inner {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 16px;
}
.ph-404__hero {
background: #fab816;
min-height: 200px;
padding: 40px 0 28px;
}
.ph-404__eyebrow {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.3;
color: #3a3a3a;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.ph-404__title {
margin: 0;
color: #111;
font-size: 52px;
line-height: 1.04;
font-weight: 700;
}
.ph-404__subtitle {
margin: 12px 0 0;
color: #1f1f1f;
font-size: 20px;
line-height: 1.35;
max-width: 760px;
}
.ph-404__body {
padding: 42px 0 58px;
}
.ph-404__card {
background: #fff;
border: 1px solid #e4e4e4;
border-radius: 12px;
padding: 34px 30px;
}
.ph-404__card p {
margin: 0 0 12px;
color: #2a2a2a;
font-size: 18px;
line-height: 1.45;
}
.ph-404__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 10px 0 20px;
}
.ph-404__actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
border-radius: 10px;
background: #111;
color: #fff;
font-size: 16px;
line-height: 1;
font-weight: 700;
text-decoration: none;
}
.ph-404__actions a:hover,
.ph-404__actions a:focus-visible {
background: #2a2a2a;
}
.ph-404__search form {
margin: 0;
}
@media only screen and (max-width: 980px) {
.ph-404__title {
font-size: 42px;
}
.ph-404__subtitle {
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
.ph-404__hero {
min-height: 0;
padding: 26px 0 22px;
}
.ph-404__title {
font-size: 34px;
}
.ph-404__subtitle {
font-size: 17px;
}
.ph-404__body {
padding: 24px 0 38px;
}
.ph-404__card {
padding: 22px 18px;
}
.ph-404__card p {
font-size: 16px;
}
.ph-404__actions a {
width: 100%;
}
}
/* =========================================================
Responsive Stabilization Pass (2026)
========================================================= */
img,
svg,
video,
canvas,
iframe {
max-width: 100%;
height: auto;
}
body,
.ph-page,
.ph-sp,
.ph-cat,
.ph-404 {
overflow-x: clip;
}
html,
body {
max-width: 100%;
min-width: 300px;
}
.ph-page__card {
min-height: 0;
}
.ph-header__mobile-search .search-form,
.ph-404__search .search-form,
.search-form {
max-width: 100%;
}
.ph-header__mobile-search .search-form,
.ph-404__search .search-form {
display: flex;
align-items: stretch;
}
.ph-header__mobile-search .search-form label,
.ph-404__search .search-form label {
flex: 1 1 auto;
min-width: 0;
}
.ph-header__mobile-search .search-form .search-field,
.ph-404__search .search-form .search-field {
width: 100%;
min-width: 0;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
width: 100%;
max-width: 100%;
}
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
table-layout: auto;
}
.woocommerce table.shop_table_responsive,
.woocommerce-page table.shop_table_responsive {
width: 100%;
}
@media only screen and (max-width: 1240px) {
.ph-header__main-content {
flex-wrap: wrap;
row-gap: 10px;
}
.ph-header__search-wrap {
order: 3;
max-width: none;
width: 100%;
padding: 0;
}
.ph-header__actions {
margin-left: 0;
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
}
.ph-sp__cart-row .cart {
align-items: stretch;
}
.ph-sp__cart-row .quantity {
flex: 0 0 auto;
}
.ph-sp__cart-row .single_add_to_cart_button {
flex: 1 1 280px;
min-width: 0;
}
}
@media only screen and (max-width: 1024px) {
.phh-hero__inner {
min-height: 0;
padding: 56px 16px;
}
.main-hero-wrapper {
grid-template-columns: 1fr;
gap: 24px;
}
.phh-hero__left,
.phh-hero__right {
grid-column: auto;
}
.ph-home-hero .ph-home-hero__title,
.ph-home-hero__title {
font-size: clamp(42px, 7.2vw, 56px) !important;
line-height: 1.05 !important;
letter-spacing: -1px !important;
}
.ph-home-hero__grid {
height: auto;
}
.ph-home-hero__float-note {
display: none !important;
}
.ph-icon-strip .ph-icon-strip__item {
min-width: 180px;
flex-basis: 180px;
}
.ph-cat__layout {
grid-template-columns: 1fr;
}
.ph-cat__sidebar {
padding: 0;
}
.ph-sp__main-grid {
gap: 28px;
}
.ph-sp__tabs-panel ul.tabs {
flex-wrap: wrap;
}
.ph-sp__tabs-panel ul.tabs li {
flex: 1 1 auto;
}
}
@media only screen and (max-width: 980px) {
.ph-header__utility-row {
overflow: hidden;
}
.ph-header__utility-list {
width: 100%;
max-width: 100%;
min-width: 0;
padding: 6px 0;
margin: 0;
white-space: normal;
overflow: visible;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 10px;
align-items: start;
}
.ph-header__utility-item,
.ph-header__utility-link {
min-width: 0;
width: 100%;
font-size: 10px;
line-height: 1.25;
gap: 6px;
}
.ph-header__utility-link span {
white-space: normal;
overflow-wrap: anywhere;
}
.ph-cat__products ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ph-cat__toolbar {
display: grid;
gap: 10px;
}
.ph-cat__toolbar .woocommerce-result-count,
.ph-cat__toolbar .woocommerce-ordering {
float: none;
width: 100%;
}
.ph-cat__toolbar form.woocommerce-ordering select {
max-width: none;
}
.ph-cat-grid__items,
.ph-cat-grid--products .ph-cat-grid__items {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ph-info-boxes__grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ph-sp__price-row {
align-items: flex-start;
}
.ph-sp__tax-toggle {
max-width: 100%;
}
}
@media only screen and (max-width: 768px) {
.ph-home-hero .ph-home-hero__inner,
.ph-home-hero__inner,
.ph-bundle .ph-bundle__layout,
.ph-bundle__layout {
grid-template-columns: 1fr !important;
}
.ph-bundle .ph-bundle__cards,
.ph-bundle__cards {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-rows: minmax(210px, auto) !important;
}
.ph-page__hero,
.ph-sp__hero,
.ph-cat__hero,
.ph-404__hero {
min-height: 0;
}
.ph-sp__cta-strip {
align-items: stretch;
}
.ph-sp__cta-btn {
width: 100%;
min-width: 0;
}
.woocommerce .quantity .qty,
.ph-sp__cart-row .quantity .qty {
width: 90px;
}
.phs__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: visible;
gap: 12px;
}
.phs__card {
min-width: 0;
}
}
@media only screen and (max-width: 640px) {
html,
body {
overflow-x: hidden;
}
.wrapper,
.ph-page__inner,
.ph-sp__inner,
.ph-404__inner,
.ph-cat__hero-inner,
.ph-cat__layout,
.ph-help-cta__inner,
.ph-home-hero .ph-home-hero__inner,
.ph-home-hero__inner,
.main-hero-wrapper {
width: 100% !important;
max-width: 100% !important;
justify-self: stretch !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
.ph-header__utility-list {
display: none;
}
.ph-header__utility-item,
.ph-header__utility-link {
font-size: 10px;
}
.ph-header__logo-link {
width: 136px;
min-width: 136px;
}
.ph-home-hero .ph-home-hero__title,
.ph-home-hero__title {
font-size: clamp(34px, 10vw, 42px) !important;
}
.ph-home-hero__desc {
font-size: 15px;
line-height: 1.5;
}
.ph-icon-strip .ph-icon-strip__inner {
gap: 10px !important;
}
.ph-icon-strip .ph-icon-strip__item {
min-width: 0;
flex: 1 1 100%;
}
.ph-cat__title,
.ph-sp__title,
.ph-404__title {
font-size: clamp(30px, 9vw, 36px);
line-height: 1.08;
}
.ph-cat__description,
.ph-cat__description p {
font-size: 16px;
line-height: 1.45;
}
.ph-cat__products ul.products,
.ph-cat-grid__items,
.ph-cat-grid--products .ph-cat-grid__items,
.ph-info-boxes__grid {
grid-template-columns: 1fr !important;
}
.phs__grid {
grid-template-columns: 1fr;
}
.ph-cat__cta-inner,
.ph-help-cta__buttons,
.ph-sp__cart-row .cart {
gap: 10px;
}
.ph-cat__cta-inner a,
.ph-help-cta .ph-btn,
.ph-sp__cart-row .single_add_to_cart_button {
width: 100%;
min-width: 0;
}
.ph-sp__tabs-panel {
padding: 16px;
}
.ph-sp__tabs-panel ul.tabs li a {
font-size: 15px !important;
padding: 8px 12px !important;
}
.ph-sp .shc-grid {
grid-template-columns: 1fr;
}
.ph-sp .shc-title.customisation,
.ph-sp .shc-tiered-pricing__title {
font-size: clamp(26px, 8.5vw, 32px);
line-height: 1.12;
}
.ph-sp .shc-tiered-pricing {
padding: 18px;
}
.ph-sp .shc-tiered-pricing__row {
padding: 10px 12px;
}
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media only screen and (max-width: 480px) {
.ph-home-hero .ph-home-hero__inner,
.phh-hero__inner,
.ph-page__inner,
.ph-sp__inner,
.ph-404__inner,
.ph-cat__hero-inner,
.ph-cat__layout,
.ph-help-cta__inner {
padding-left: 12px;
padding-right: 12px;
}
.ph-bundle .ph-bundle__cards,
.ph-bundle__cards {
grid-template-columns: 1fr !important;
}
.ph-sp__price .price,
.ph-sp__price p.price {
font-size: clamp(28px, 9vw, 34px);
}
.ph-sp__swatches--text .size,
.ph-sp__swatches--text .swatch {
min-width: 52px;
padding: 0 10px;
font-size: 16px;
}
.ph-404__actions a {
min-height: 46px;
}
}
/* =========================================================
FINAL MENU OVERRIDES (Desktop + Mobile Figma Match)
Supports both legacy (.menu-bottom / #hamburger-menu) and
rebuilt (.ph-header__...) header structures.
========================================================= */
@media only screen and (min-width: 981px) {
.menu-bottom,
.ph-header__nav-menu-wrap {
position: relative;
z-index: 80;
}
.menu-bottom > ul > li,
.ph-header__nav-menu-wrap > ul.menu > li,
.ph-header__nav-menu-wrap > ul > li {
position: relative;
}
.menu-bottom > ul > li > .sub-menu,
.ph-header__nav-menu-wrap > ul.menu > li > .sub-menu,
.ph-header__nav-menu-wrap > ul > li > .sub-menu {
min-width: 264px;
border: 1px solid #ebebeb;
border-radius: 12px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
background: #fff;
}
.menu-bottom > ul > li.ph-desktop-mega,
.menu-bottom > ul > li:first-child.menu-item-has-children,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega {
position: static;
}
.menu-bottom > ul > li.ph-desktop-mega > .sub-menu,
.menu-bottom > ul > li:first-child.menu-item-has-children > .sub-menu,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu {
left: 20px !important;
right: 20px !important;
transform: none;
top: 100%;
width: auto;
max-width: 1368px;
min-width: 0;
padding: 22px 20px;
display: none !important;
grid-template-columns: 264px repeat(3, minmax(160px, 1fr)) 250px;
column-gap: 28px;
align-items: stretch;
}
.menu-bottom > ul > li.ph-desktop-mega:hover > .sub-menu,
.menu-bottom > ul > li.ph-desktop-mega:focus-within > .sub-menu,
.menu-bottom > ul > li:first-child.menu-item-has-children:hover > .sub-menu,
.menu-bottom > ul > li:first-child.menu-item-has-children:focus-within > .sub-menu,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega:hover > .sub-menu,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega:focus-within > .sub-menu {
display: grid !important;
}
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu {
width: min(1368px, calc(100vw - 40px));
}
.menu-bottom > ul > li.ph-desktop-mega > .sub-menu > .menu-item > a,
.menu-bottom > ul > li:first-child.menu-item-has-children > .sub-menu > .menu-item > a,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item > a {
margin: 0;
padding: 0 0 14px;
border-radius: 0;
font-size: 15px;
font-weight: 600;
line-height: 22px;
text-transform: none;
}
.menu-bottom > ul > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu,
.menu-bottom > ul > li:first-child.menu-item-has-children > .sub-menu > .menu-item > .sub-menu,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu {
display: flex !important;
flex-direction: column;
gap: 8px;
position: static;
min-width: 0;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
background: transparent;
}
.menu-bottom > ul > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu > .menu-item > a,
.menu-bottom > ul > li:first-child.menu-item-has-children > .sub-menu > .menu-item > .sub-menu > .menu-item > a,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item > .sub-menu > .menu-item > a {
padding: 4px 0;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-transform: none;
}
.menu-bottom > ul > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1),
.menu-bottom > ul > li:first-child.menu-item-has-children > .sub-menu > .menu-item:nth-child(1),
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) {
background: #f8f8f6;
border-radius: 12px;
padding: 14px 10px;
}
.menu-bottom > ul > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) > .sub-menu > .menu-item > a,
.menu-bottom > ul > li:first-child.menu-item-has-children > .sub-menu > .menu-item:nth-child(1) > .sub-menu > .menu-item > a,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item:nth-child(1) > .sub-menu > .menu-item > a {
padding: 7px 10px;
border-radius: 7px;
}
.menu-bottom > ul > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo,
.menu-bottom > ul > li:first-child.menu-item-has-children > .sub-menu > .menu-item.ph-mega-promo,
.ph-header__nav-menu-wrap > ul.menu > li.ph-desktop-mega > .sub-menu > .menu-item.ph-mega-promo {
background: #121212;
border-radius: 12px;
padding: 18px 18px 16px;
}
}
@media only screen and (max-width: 980px) {
#hamburger-menu #sidebar-menu,
.ph-header #sidebar-menu.ph-header__mobile-panel {
background: #f3f3f3 !important;
padding: 0 !important;
}
#hamburger-menu .side-menu-inner,
.ph-header #sidebar-menu .side-menu-inner {
min-height: 100%;
background: #f3f3f3;
padding: 0 !important;
}
#sidebar-menu .mobile-menu {
margin: 0;
padding: 0 20px 22px !important;
}
#sidebar-menu .mobile-menu > .menu-item > a {
color: #141414 !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 22px !important;
padding: 15px 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
#sidebar-menu .mobile-menu > .menu-item.menu-item-has-children > a {
width: calc(100% - 24px);
}
#sidebar-menu .mobile-menu > .menu-item > .sub-menu {
border-top: 1px solid #d9d9d9;
margin-top: -2px;
padding: 8px 0 10px;
}
#sidebar-menu .mobile-menu > .menu-item > .submenu-toggle[aria-expanded="false"] + .sub-menu {
border-top: 0;
padding-top: 0;
}
#sidebar-menu .mobile-menu .sub-menu .menu-item > a {
color: #383838 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 20px !important;
padding: 7px 8px !important;
text-transform: none !important;
}
#sidebar-menu .submenu-toggle {
color: #616161 !important;
width: 22px !important;
height: 52px !important;
padding: 0 !important;
}
#sidebar-menu .submenu-toggle::before {
content: "+" !important;
font-family: inherit !important;
font-size: 22px !important;
font-weight: 500 !important;
line-height: 22px !important;
}
#sidebar-menu .submenu-toggle[aria-expanded="true"]::before {
content: "−" !important;
}
#sidebar-menu .mobile-menu > .menu-item.ph-mobile-menu-cta {
margin-top: 14px;
border-bottom: 0;
}
#sidebar-menu .mobile-menu > .menu-item.ph-mobile-menu-cta > a {
border-radius: 9px !important;
background: #fab816 !important;
color: #000 !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 20px !important;
text-align: center;
padding: 14px 16px !important;
}
}