/*
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{
display: grid;
grid-template-columns: repeat(16, 1fr);
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;
}
/*
* {
outline: 1px solid rgba(255, 0, 0, 0.5);
}
*/
body, nav{
background-color: #ffffff;
color: #1b1b1b;
display: grid;
grid-template-columns: repeat(16, 1fr);
width: 100%;
}
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;
}
}
/* MENU BAR DESKTOP VIEW */
.menu-bottom{
background-color: #f3f4f4 ;
padding:8px 40px 0;
}
.menu-top{
padding: 50px 40px;
}
.menu-bottom ul li a span{
color: black;
}
.grid-header-section {
display: grid;
z-index: 99;
background-color: #fab816;
grid-column: 1/17;
}
.menu-item-top-outer{
display: grid;
grid-template-columns:repeat(2, auto); ;
}
.menu-item-top-outer i{
font-size: 35px;
}
.menu-item-top{
display: grid;
grid-template-columns: 1fr;
}
.menu-top-single{
display: grid;
}
.menu-top-single p{
margin-top: auto;
}
.menu-item{
max-width: fit-content;
}
.search-form {
position: relative;
display: inline-block;
}
.search-form input[type="search"] {
padding-right: 40px;
height: 35px;
width: 300px;
box-sizing: border-box;
padding: 5px;
border-radius: 10px;
border: none;
color: #a7a9ac;
font-size: 16px;
padding-left: 10px;
}
.search-form button {
position: absolute;
right: 0;
top: 0;
height: 100%;
border: none;
background: transparent;
cursor: pointer;
padding: 0 10px;
color: #333;
font-size: 16px;
}
.search-form button i {
pointer-events: none;
}
.menu-green-bar{
background-color: #1ab471;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
padding: 20px;
}
@media only screen and (min-width: 1450px) {
#hamburger-input:checked, #hamburger-menu #sidebar-menu{
display: none;
}
.grid-header-section {
display: grid;
z-index: 2;
background-color: #fab816;
grid-column: 1/17;
}
.grid-header-outer {
grid-column: 1 / 17;
align-items: center;
}
.menu-image{
display: grid;
place-items: center;
}
.menu-image img{
width: 200px;
display: grid;
}
.header-menu {
display: grid;
}
.header-menu ul{
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-self: center;
justify-self: stretch;
}
.menu-bottom ul{
display: flex;
text-align: center;
align-self: center;
justify-self: stretch;
justify-content: space-between;
flex-wrap: nowrap;
}
.header-menu ul li {
list-style: none;
align-self: center;
}
.menu-item a span{
color: #1b1b1b;
font-weight: 600;
font-size: 20px;
text-decoration: none;
}
.footer-pages-menu{
margin-bottom: 30px;
}
.footer-pages-menu .menu-item a span{
color: #000101;
font-size: 15px;
font-weight: 500;
}
.menu-item a p{
color: #1b1b1b;
font-weight: 600;
font-size: 28px;
text-decoration: none;
}
.menu-item-orange{
color: #1b1b1b;
font-weight: 600;
font-size: 20px;
background-color: #ff8a00;
padding: 20px 50px;
}
.menu-green-bar{
color: #1b1b1b;
font-weight: 600;
font-size: 20px;
text-transform: uppercase;
}
.menu-item a .menu-item-small{
font-size: 20px;
}
#hamburger-input, #hamburger-menu, #sidebar-menu, .header-bar {
display: none;
}
.menu-item-has-children > a:after {
margin-left: 5px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 2em;
color: #C60014;
}
/* SUB MENU ***************************************************************************/
.menu-item .sub-menu {
display: none;
}
.menu-item .sub-menu .menu-item .sub-menu {
display: none;
}
.menu-item .sub-menu .menu-item a {
color:#0B233B;
font-size: 16px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0.05em;
}
.menu-item .sub-menu .menu-item a:hover {
font-weight: 600;
}
/* .menu-item .sub-menu { */
.menu-item:hover .sub-menu {
display: grid;
grid-template-columns: 1fr;
/* width: 25%; */
gap: 1em;
background-color: #fff;
padding: 1em;
text-align: left;
z-index: 50 !important;
justify-self: center;
margin: auto;
position: absolute;
border-top: 19px solid #fab816;
}
.menu-item .sub-menu {
position: relative;
}
.menu-item .sub-menu .menu-item {
padding: 1em;
border-bottom: 2px solid #fab816;
text-align: center;
}
.menu-item .sub-menu .menu-item a {
text-transform: uppercase;
color: #313537;
font-weight: 600;
font-size: 20px;
}
.contact-menu-link a {
justify-self: center;
font-family: "Teko", sans-serif;
font-size: 20px;
font-weight: 600;
text-align: center;
padding: 0.5em 2em;
border-radius: 32px;
text-transform: uppercase;
color: #fff;
background-color: #475E7B;
border: 2px solid #FCFAF8;
}
.menu-item > a {
display: grid;
}
}
/* RESPONSIVE MENU UNCLICKED */
@media only screen and (max-width: 1450px) {
.grid-header-outer {
display: none;
}
.header-bar {
display:grid;
grid-template-columns: 60% 1fr;
grid-column: 2 / 16;
align-self: center;
margin: 1em 0;
z-index: 20;
}
.header-bar a {
justify-self: left;
}
.header-bar img{
max-width: 231px;
width: 100%;
object-fit: contain;
}
.mobile-icon {
max-width: 231px;
}
.responsive-menu {
align-self: center;
}
.menu-icon {
width: 49px;
height: 3px;
background-color: #fff;
margin: 3px 0;
}
#hamburger-input{
display: none;
}
#hamburger-menu {
display: flex;
align-items: end;
flex-direction: column;
}
#hamburger-menu #sidebar-menu {
grid-template-columns: 1fr;
visibility: hidden;
position: fixed;
top: 0;
right: -100%;
height: 100vh;
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background-color: #fff;
transition: 0.3s;
box-sizing: border-box;
z-index: 20;
padding: 1.5em;
background-color: #fab816;
}
#hamburger-menu .side-menu-inner {
padding: 0.5em 0;
}
#hamburger-menu ul {
margin: 1em 0 0;
width: 100%;
overflow: visible;
}
#hamburger-menu ul *{
font-size: 20px;
font-weight: 600;
}
#hamburger-menu ul .sub-menu{
margin: 0.25em 0 0.5em;
width: 100%;
padding: 0 0 0 0.9em;
}
#hamburger-menu ul .sub-menu li {
border-bottom: none;
}
#hamburger-menu li {
list-style-type: none;
padding: 0;
}
#hamburger-menu a {
text-decoration: none;
transition: color 0.2s ease;
align-items: center;
display: flex;
padding: 0.75em 0;
justify-self: center;
color: #1b1b1b;
font-weight: 600;
}
button.submenu-toggle{
box-shadow: none;
}
#hamburger-menu a span {
color: #1b1b1b;
line-height: 1.2;
}
#hamburger-menu > #sidebar-menu > .side-menu-inner > ul.menu > li > a {
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: 1rem;
}
#hamburger-menu li .sub-menu .menu-item > a {
font-size: 0.92rem;
font-weight: 500;
text-transform: none;
}
#hamburger-menu li .sub-menu .menu-item .sub-menu .menu-item > a {
padding-left: 0.75em;
font-size: 0.88rem;
}
#hamburger-menu a:hover,
#hamburger-menu a:focus-visible {
color: #7a3400;
}
#hamburger-menu i {
font-size: 28px;
}
#hamburger-menu a:active{
-ms-transform: translateX(30px);
-webkit-transform: translateX(30px);
transform: translateX(3px);
}
#hamburger-input:checked + #hamburger-menu #sidebar-menu {
visibility: visible;
right: 0;
}
#sidebar-menu {
min-height: 100vh;
overflow-y: auto;
}
.sub-menu.hidden {
display: none;
}
.toggle-icon::before {
content: '\f0dd';
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1.5em;
color: #BF5803;
cursor: pointer;
}
.menu-item-has-children > a .toggle-icon.open::before {
content: '\f0de';
}
#hamburger-menu li .sub-menu .menu-item {
list-style-type: none;
padding: 0;
border-bottom: none;
}
#hamburger-menu li .sub-menu .menu-item:nth-last-child(1) {
border-bottom: none;
}
#hamburger-menu li:nth-last-child(1) {
border-bottom: none;
}
#sidebar-menu ul li a span {
margin-top: 0;
margin-left: 0;
}
.open {
margin-top: 0.8em !important;
}
#sidebar-menu .submenu-toggle {
background: none;
border: none;
color: #BF5803;
font-size: 0.95rem;
margin-left: auto;
padding: 0.5em 0 0.5em 0.75em;
cursor: pointer;
}
#sidebar-menu .submenu-toggle::before {
content: '\f078';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
#sidebar-menu .submenu-toggle[aria-expanded="true"]::before {
content: '\f077';
}
#sidebar-menu .menu-item-has-children > a {
display: inline-flex;
flex: 1;
}
.contact-menu-link {
justify-self: center;
font-family: "Teko", sans-serif;
font-size: 20px;
font-weight: 600;
text-align: center;
padding: 0.5em 2em !important;
border-radius: 32px;
text-transform: uppercase;
color: #fff;
background-color: #475E7B;
border: 2px solid #FCFAF8;
text-align: center;
}
.contact-menu-link a span {
color: #fff !important;
}
.mobile-social-media i {
font-size: 24px !important;
width: 24px !important;
color: #C5CACF !important;
justify-content: normal !important;
}
.mobile-social-media {
display: flex;
gap: 1em;
justify-content: center;
}
}
/*//////////////////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;
}
.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{
width: 100%;
height: 35px;
border: 1px solid #1b1b1b;
}
.footer-subscribe form label{
color: #000101;
font-size: 15px;
font-weight: 600;
font-family: "Montserrat", sans-serif;
}
.footer-submit{
padding: 10px 10px;
border-radius: 10px;
color: white;
background-color: #124c2e;
border: none;
font-family: "Montserrat", sans-serif;
font-size: 15px;
font-weight: 600;
}
@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: 17vw;
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;
padding-bottom: 50px;
}
.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;
display: flex;
justify-content: space-between;
padding-top: 7px;
padding-bottom: 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;
}
/* 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;
}
/* 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-colours{
display: grid;
grid-template-columns: repeat(5, 1fr);
max-width: 200px;
gap: 1px;
}
.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: block;
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: fixed;
top: 0;
left: 0;
height: 100%;
width: 45vw;
background: #f3f4f4;
transform: translateX(-100%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
z-index: 19;
padding-bottom: 50px;
}
.filter-products-colour.active {
transform: translateX(0);
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;margin-right:8px;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}
.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;
}
/* 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; }
/* Main image wrapper */
.product-gallery .woocommerce-product-gallery__wrapper{
border-radius:12px !important;
overflow:hidden !important;
background:#f2f2f4 !important;
}
/* 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;
}
/* =========================================================
MEGA MENU (Desktop) – add class "mega-menu" to top item
========================================================= */
@media only screen and (min-width: 1450px) {
/* anchor the dropdown */
.menu-bottom{
position: relative;
z-index: 60;
}
/* ensure only the TOP UL behaves like a row (avoids flex on nested ULs) */
.menu-bottom > ul.menu,
.menu-bottom > ul{
display: flex;
align-items: center;
justify-content: space-between;
gap: 26px;
}
/* top-level links (underline on hover like Menu2) */
.menu-bottom > ul.menu > li > a span{
position: relative;
padding-bottom: 8px;
}
.menu-bottom > ul.menu > li:hover > a span{
border-bottom: 4px solid #fab816;
}
.menu-bottom > ul.menu > li.mega-menu:hover > a span{
border-bottom: 0;
}
/* simple reliable chevron (don’t depend on FA font-family) */
.menu-bottom > ul.menu > li.menu-item-has-children > a::after{
content: "▾";
font-size: 0.8em;
margin-left: 10px;
opacity: .9;
}
/* only items tagged mega-menu become full-width mega dropdown */
.menu-bottom > ul.menu > li.mega-menu{
position: static; /* lets submenu span the full menu width */
}
/* the mega panel (hidden by default) */
.menu-bottom > ul.menu > li.mega-menu > ul.sub-menu{
display: none !important;
position: absolute;
left: 40px;
right: 40px;
top: 100%;
margin-top: 2px;
background: #fff;
border: 5px solid #fab816;
border-radius: 24px;
padding: 40px 50px;
z-index: 9999;
/* 4 columns like the example */
display: none;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 55px;
text-align: left;
width: calc(100% - 80px);
}
/* show on hover / keyboard focus */
.menu-bottom > ul.menu > li.mega-menu:hover > ul.sub-menu,
.menu-bottom > ul.menu > li.mega-menu:focus-within > ul.sub-menu{
display: grid !important;
}
/* reset your old dropdown item styling for mega panel columns */
.menu-bottom > ul.menu > li.mega-menu > ul.sub-menu > li{
padding: 0 !important;
border: 0 !important;
text-align: left !important;
align-self: start;
}
/* column headings (2nd level) */
.menu-bottom > ul.menu > li.mega-menu > ul.sub-menu > li > a{
display: inline-block;
padding: 0 0 18px 0 !important;
color: #1b1b1b !important;
font-size: 30px;
font-weight: 800;
line-height: 1.05;
text-transform: none !important;
}
/* OPTIONAL: make some headings “titles only” */
.menu-bottom > ul.menu > li.mega-menu > ul.sub-menu > li.mega-title > a{
pointer-events: none;
cursor: default;
}
/* IMPORTANT: show 3rd level (your theme currently hides it) */
.menu-bottom > ul.menu > li.mega-menu > ul.sub-menu > li > ul.sub-menu{
display: flex !important;
flex-direction: column;
gap: 14px;
position: relative;
margin: 0 !important;
padding: 0 !important;
justify-self: auto;
border-top: 0;
}
/* 3rd level links */
.menu-bottom > ul.menu > li.mega-menu > ul.sub-menu > li > ul.sub-menu > li{
padding: 0 !important;
border: 0 !important;
align-self: auto !important;
}
.menu-bottom > ul.menu > li.mega-menu > ul.sub-menu > li > ul.sub-menu > li span{
font-weight: 300 !important;
}
.menu-bottom > ul.menu > li.mega-menu > ul.sub-menu > li > ul.sub-menu > li > a{
color: #1b1b1b !important;
font-size: 19px;
font-weight: 400;
line-height: 1.25;
opacity: 0.95;
text-transform: none !important;
}
.menu-bottom > ul.menu > li.mega-menu > ul.sub-menu a:hover{
color: #fab816 !important;
opacity: 1;
}
}
@media only screen and (min-width: 1450px) {
/* Keep the top-level menu link + chevron on one line */
.menu-bottom > ul.menu > li > a{
display: inline-flex !important;
align-items: center;
gap: 8px;
}
/* Ensure the text doesn't behave like a block that forces wrapping */
.menu-bottom > ul.menu > li > a > span{
display: inline-block;
}
/* Make sure the chevron sits inline to the right */
.menu-bottom > ul.menu > li.menu-item-has-children > a::after{
display: inline-block;
line-height: 1;
margin-left: 6px; /* tweak if needed */
}
}
/*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;
}
}