:root {
--zevco-font: 'Jost', sans-serif;
}
/*
Theme Name: Zevco Jewels
Description: Zevco is a clean, modern multipurpose WordPress block theme optimized for various industries including small business, health, beauty, wellness, retail, e-commerce, education, and professional services. While optimized for health, beauty, and wellness brands, this versatile theme is also well-suited for retail and e-commerce stores, educational institutions, and B2B service providers such as consultants and professionals. It is ideal for beauty salons, medical spas, dermatology clinics, wellness centers, dental practices, lifestyle bloggers, online retailers, and business consultants, providing a polished foundation for service-based businesses, content creators, and personal brands. View Live Demo: https://demo-zevco-free.wpcustomthemes.com
Version: 1.0.9
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Author: WP Custom Themes
Author URI: https://wpcustomthemes.com
Theme URI: https://wpcustomthemes.com/wordpress-themes/zevco
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zevco-jewels
Tags: blog, e-commerce, portfolio, full-site-editing, block-patterns, block-styles, custom-colors, custom-header, custom-logo, featured-images, wide-blocks, translation-ready, left-sidebar, right-sidebar, threaded-comments, custom-menu
WC requires at least: 7.0
WC tested up to: 10.5.1
Zevco Jewels WordPress Theme, Copyright 2025 WP Custom Themes
Zevco Jewels is distributed under the terms of the GNU General Public License v2.0 or later.
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see .
*/
/*--------------------------------------------------------------
# Mixin
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Blocks
--------------------------------------------------------------*/
/* --- Block Styles
-------------------------------------------------------- */
/* --- Block Styles
-------------------------------------------------------- */
/* --- WP Block Group Style
-------------------------------------------------------- */
.wp-block-section.is-style-padding-0 {
padding-bottom: 0;
padding-top: 0;
}
/* --- WP Block Columns Style
-------------------------------------------------------- */
.wp-block-columns.is-style-have-gap-0 {
gap: 0;
}
/* --- WP Block Button Style
-------------------------------------------------------- */
.wp-block-button .wp-block-button__link,
.wp-block-post-excerpt__more-link {
text-decoration: none;
position: relative;
width: auto;
}
.wp-block-button.is-style-plain,
.wp-block-post-excerpt__more-link {
position: relative;
color: var(--wp--preset--color--button-color);
padding-right: 25px;
transition: all 0.4s;
display: inline-block;
}
.wp-block-button.is-style-plain:hover,
.wp-block-post-excerpt__more-link:hover {
text-decoration: none;
}
.wp-block-button.is-style-plain:after,
.wp-block-button.is-style-plain:before,
.wp-block-post-excerpt__more-link:after,
.wp-block-post-excerpt__more-link:before {
content: "";
transition: 0.3s;
position: absolute;
opacity: 1;
right: 0;
}
.wp-block-button.is-style-plain:hover::after,
.wp-block-button.is-style-plain:hover::before,
.wp-block-post-excerpt__more-link:hover::after,
.wp-block-post-excerpt__more-link:hover::before {
right: -5px;
}
.wp-block-button.is-style-plain:before,
.wp-block-post-excerpt__more-link:before {
display: block;
background-color: var(--wp--preset--color--button-color);
height: 0.1rem;
border-radius: 1px;
top: 25px;
width: 1rem;
}
.wp-block-button.is-style-plain:after,
.wp-block-post-excerpt__more-link:after {
display: inline-block;
width: 8px;
height: 8px;
border: 0.125rem solid var(--wp--preset--color--button-color);
border-bottom: 0;
border-left: 0;
border-radius: 1px;
margin-left: 10px;
margin-bottom: 2px;
top: 21px;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.block-editor-block-list__block .wp-block-post-excerpt__more-link:after,
.block-editor-block-list__block .wp-block-post-excerpt__more-link::before {
display: none;
}
.wp-block-button.is-style-plain .wp-block-button__link {
border: none;
color: var(--wp--preset--color--button-color);
position: relative;
padding: 0;
padding-bottom: 3px;
background-color: transparent;
}
.wp-block-button.is-style-plain .wp-block-button__link::before {
position: absolute;
width: 100%;
height: 2px;
content: '';
background-color: var(--wp--preset--color--button-color);
bottom: 0;
right: 0;
left: auto;
transition: all 0.4s;
}
.wp-block-button.is-style-plain .wp-block-button__link.has-title-color::before {
background-color: var(--wp--preset--color--title);
}
.wp-block-button.is-style-plain .wp-block-button__link.has-title-color:hover::before {
background-color: var(--wp--preset--color--button-color) !important;
}
.wp-block-button.is-style-plain .wp-block-button__link.has-title-color:hover {
color: var(--wp--preset--color--button-color) !important;
}
.wp-block-button.is-style-plain .wp-block-button__link:hover::before {
width: 0;
}
.wp-block-button.is-style-plain:has(.has-title-color):before {
background-color: var(--wp--preset--color--title);
}
.wp-block-button.is-style-plain:has(.has-title-color):hover:before {
background-color: var(--wp--preset--color--button-color);
}
.wp-block-button.is-style-plain:has(.has-title-color):after {
border: 0.125rem solid var(--wp--preset--color--title);
border-bottom: 0;
border-left: 0;
}
.wp-block-button.is-style-plain:has(.has-title-color):hover:after {
border: 0.125rem solid var(--wp--preset--color--button-color);
border-bottom: 0;
border-left: 0;
}
.wp-block-button.is-style-plain .wp-block-button__link .wp-block-button.is-style-plain .has-text-color:hover,
.wp-block-button.is-style-plain .has-text-color:focus {
color: var(--wp--preset--color--link-color) !important;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus,
.wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt__more-link:focus {
background: transparent;
box-shadow: none;
color: var(--wp--preset--color--button-color);
transform: none;
}
.is-style-outline .wp-element-button {
padding-top: clamp(12px, 2.5vw, 16px);
padding-right: clamp(21px, 2.5vw, 35px);
padding-bottom: clamp(12px, 2.5vw, 16px);
padding-left: clamp(21px, 2.5vw, 35px);
display: block;
}
.is-style-outline .wp-element-button.has-text-color:hover,
.is-style-outline .wp-element-button.has-text-color:focus {
background-color: var(--wp--preset--color--link-color);
border-color: var(--wp--preset--color--link-color);
color: var(--wp--preset--color--light) !important;
}
/* --- WP Block Post Comments Style
-------------------------------------------------------- */
.wp-post-author-card,
.wp-block-group.post-navigation-link-container,
.wp-block-comments {
max-width: 780px;
}
.wp-block-comments {
padding-top: var(--wp--custom--spacing--wp-block-post);
margin-top: var(--wp--custom--spacing--extra-small);
border-top: 1px solid var(--wp--preset--color--border-color);
}
.wp-block-comments .wp-block-comments-title {
font-size: clamp(24px, 2.85vw, 36px);
margin-top: 0;
}
.wp-block-comments .wp-block-comment-author-name {
color: var(--wp--preset--color--secondary-text);
}
.wp-block-comments .wp-block-comment-author-name a {
text-decoration: none;
}
.wp-block-comments .wp-block-comment-content {
margin-top: 14px;
}
.wp-block-comments .wp-block-comment-content p {
color: var(--wp--preset--color--body-text);
font-size: var(--wp--preset--font-size--body-default) !important;
}
.wp-block-comments .wp-block-comment-edit-link a,
.wp-block-comments .wp-block-comment-reply-link a {
color: var(--wp--preset--color--body-text);
}
.wp-block-comments .wp-block-comment-edit-link a:hover,
.wp-block-comments .wp-block-comment-edit-link a:focus,
.wp-block-comments .wp-block-comment-reply-link a:hover,
.wp-block-comments .wp-block-comment-reply-link a:focus {
color: var(--wp--preset--color--link-color);
}
.wp-block-comment-template ol,
.wp-block-comment-template li:not(:first-child) {
margin-top: 42px;
}
.wp-block-post-comments .commentlist>li>.children>li article,
.comment article,
.wp-block-post-comments .commentlist>li>.children>li article,
.wp-block-post-comments .commentlist>li>article {
padding-bottom: var(--wp--custom--spacing--wp-block-navigation-block);
}
.wp-block-post-comments .commentlist>li>article {
padding-top: 0;
}
.wp-block-post-comments .commentlist .comment-body>*:last-child,
.wp-block-post-comments .comment-respond>*:last-child,
.wp-block-post-comments .comment-respond .comment-form>*:last-child,
.wp-block-post-comments .comment-respond .comment-form>P:last-of-type,
.wp-block-post-comments .commentlist .comment-body>*:last-child,
.wp-block-post-comments .comment-respond>*:last-child,
.wp-block-post-comments .comment-respond .comment-form>*:last-child,
.wp-block-post-comments .comment-respond .comment-form>P:last-of-type {
margin-bottom: 0;
}
.wp-block-post-comments .comment-author,
.wp-block-post-comments .comment-author {
color: var(--wp--preset--color--foreground);
font-size: var(--wp--preset--font-size--normal);
font-weight: var(--wp--custom--typography--font-weight--bold);
line-height: 1.75;
margin-bottom: 7px;
}
.wp-block-post-comments .comment-content,
.wp-block-post-comments .comment-content {
margin-top: 20px;
}
.wp-block-group.wp-block-post-meta {
gap: 25px;
}
.wp-block-post-meta .wp-block-post-author {
background-color: transparent;
padding: 0;
color: inherit;
}
.wp-block-group.post-navigation-link-container {
margin-top: var(--wp--custom--spacing--wp-block-navigation-widget);
margin-bottom: var(--wp--custom--spacing--wp-block-navigation-block);
}
.wp-block-post-comments .comment-metadata,
.wp-block-post-comments .comment-metadata {
color: var(--wp--preset--color--body-text);
font-size: var(--wp--preset--font-size--medium);
line-height: 1.62;
}
.wp-block-post-comments .comment-metadata a,
.wp-block-post-comments .comment-metadata a {
text-decoration: none;
}
.wp-block-post-comments .comment-author .avatar {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
height: 65px;
float: left;
margin-right: 21px;
overflow: hidden;
width: 65px;
}
.wp-block-post-author__avatar img {
border-radius: 50%;
height: clamp(85px, 8vw, 125px);
width: clamp(85px, 8vw, 125px);
}
.wp-block-post-author__avatar {
margin-right: clamp(21px, 3vw, 35px);
}
.wp-block-post-author__name,
.wp-block-post-comments .comment-meta .fn,
.comment-author .says {
font-size: var(--wp--preset--font-size--medium);
font-weight: var(--wp--custom--font-weight--regular);
text-transform: capitalize;
}
.wp-block-post-comments .comment-meta .fn {
text-transform: uppercase;
}
.comment-metadata,
.comment-metadata .edit-link {
font-size: var(--wp--preset--font-size--tiny);
margin-top: 8px;
}
.comment-reply-title {
font-family: var(--wp--preset--font-family--merriweather);
font-size: var(--wp--preset--font-size--post-title);
font-weight: var(--wp--custom--typography--font-weight--semi-bold);
margin-top: 0;
}
label {
color: var(--wp--preset--color--title);
font-size: var(--wp--preset--font-size--medium-small);
margin-bottom: 7px;
display: block;
}
p.logged-in-as {
color: var(--wp--preset--color--title);
margin-bottom: 28px;
}
.wp-block-post-comments #comments {
font-size: var(--wp--preset--font-size--extra-large);
margin-top: var(--wp--custom--spacing--wp-block-navigation-widget);
margin-bottom: var(--wp--custom--spacing--wp-block-navigation-block);
}
.wp-block-post-comments ul,
.wp-block-post-comments ol {
list-style-type: none;
}
.commentlist {
margin-top: 0;
}
.wp-block-post-comments .comment-metadata>*:not(:last-child),
.wp-block-post-comments .comment-metadata>*:not(:last-child) {
padding-right: 10px;
}
.wp-block-post-comments .reply,
.wp-block-post-comments .reply {
font-size: var(--wp--preset--font-size--small);
}
.wp-block-post-comments .reply a,
.wp-block-post-comments .reply a {
font-weight: var(--wp--custom--typography--font-weight--bold);
text-decoration: none;
text-transform: uppercase;
}
.wp-block-post-comments .comment-respond,
.wp-block-post-comments .comment-respond {
margin-top: var(--wp--custom--spacing--normal);
}
.wp-block-post-comments .comment-respond .comment-form,
.wp-block-post-comments .comment-respond .comment-form {
font-size: var(--wp--preset--font-size--upper-heading);
}
.wp-block-post-comments .comment-respond .comment-form a,
.wp-block-post-comments .comment-respond .comment-form .logged-in-as,
.wp-block-post-comments .comment-respond .comment-form .comment-notes,
.wp-block-post-comments .comment-respond .comment-form .comment-form-cookies-consent,
.wp-block-post-comments .comment-respond .comment-form a,
.wp-block-post-comments .comment-respond .comment-form .logged-in-as,
.wp-block-post-comments .comment-respond .comment-form .comment-notes,
.wp-block-post-comments .comment-respond .comment-form .comment-form-cookies-consent {
font-size: var(--wp--preset--font-size--extra-small);
text-decoration: none;
}
/* --- WP Block Latest Comments Style
-------------------------------------------------------- */
.wp-block-latest-comments,
.wp-block-latest-comments {
margin-top: 0;
padding: 0;
}
.wp-block-latest-comments a,
.wp-block-latest-comments a {
text-decoration: none;
}
.wp-block-latest-comments .wp-block-latest-comments__comment,
.wp-block-latest-comments .wp-block-latest-comments__comment {
border-bottom: 1px solid var(--wp--preset--color--border-color);
margin-bottom: 0;
padding-bottom: var(--wp--custom--spacing--normal);
padding-top: var(--wp--custom--spacing--normal);
}
.wp-block-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt>*:last-child,
.wp-block-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt>*:last-child {
margin-bottom: 0;
}
.wp-block-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
.wp-block-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt {
margin-top: 20px;
}
.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt,
.has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-meta {
margin-left: 4.25em;
}
.comment-body a {
text-decoration: none;
}
.wp-block-latest-comments .avatar,
.wp-block-latest-comments__comment-avatar {
height: 65px;
width: 65px;
}
.wp-block-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-date,
.wp-block-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-date {
font-size: var(--wp--preset--font-size--tiny);
margin-top: 7px;
}
.wp-block-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-author,
.wp-block-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-author {
color: var(--wp--preset--color--foreground);
font-weight: var(--wp--custom--typography--font-weight--bold);
line-height: 1.75;
}
/* --- WP Block Quote Style
-------------------------------------------------------- */
.wp-block-quote p,
.wp-block-quote p {
color: var(--wp--preset--color--foreground);
font-family: var(--wp--preset--font-family--merriweather);
font-size: var(--wp--custom--typography--font-size--heading-four);
font-weight: var(--wp--custom--typography--font-weight--semi-bold);
line-height: 1.4;
margin-top: 0;
}
.wp-block-quote.is-style-default,
.wp-block-quote.is-large:not(.is-style-plain),
.wp-block-quote.is-style-large:not(.is-style-plain),
.wp-block-quote:not(.is-style-plain) {
background-color: var(--wp--preset--color--peach-puff);
border-left: 5px solid var(--wp--preset--color--chocolate-dim);
position: relative;
padding: 35px;
}
.wp-block-pullquote.is-style-solid-color blockquote {
max-width: 100%;
}
.wp-block-pullquote.alignright.has-text-align-left,
.wp-block-pullquote.alignright.has-text-align-right {
border: 0;
}
.wp-block-pullquote.has-text-align-right:not(blockquote) {
border: 0;
border-right: 4px solid;
}
.wp-block-quote.has-text-align-right:before,
.wp-block-quote.has-text-align-right.is-style-large:not(.is-style-plain):before,
.wp-block-quote.has-text-align-right:not(.is-style-plain):before {
left: auto;
right: var(--wp--custom--spacing--section-heading-gap);
}
figure.wp-block-pullquote.alignleft:not(.has-text-align-center) blockquote,
figure.wp-block-pullquote.has-text-align-left blockquote {
margin: 0;
text-align: left;
}
figure.wp-block-pullquote.alignright:not(.has-text-align-center) blockquote,
figure.wp-block-pullquote.has-text-align-right blockquote {
margin: 0;
text-align: right;
}
figure.wp-block-pullquote.aligncenter blockquote,
figure.wp-block-pullquote.has-text-align-center blockquote {
text-align: center;
}
.wp-block-quote {
text-align: left;
}
.wp-block-quote.has-text-align-right {
text-align: right;
border-left: 0;
border-right: 0;
}
.wp-block-quote.has-text-align-center {
text-align: center;
}
.wp-block-quote.has-text-align-center:before,
.wp-block-quote.has-text-align-center.is-style-large:not(.is-style-plain):before,
.wp-block-quote.has-text-align-center:not(.is-style-plain):before,
.wp-block-quote.is-style-default:not(.has-text-align-left):not(.has-text-align-right):before {
left: 50%;
transform: translateX(-50%);
}
.wp-block-quote cite,
.wp-block-quote footer,
.wp-block-quote cite,
.wp-block-quote footer {
font-size: var(--wp--preset--font-size--small);
}
.wp-block-quote.is-style-large,
.wp-block-quote.is-large,
.wp-block-quote.is-style-large,
.wp-block-quote.is-large {
color: var(--wp--preset--color--foreground);
}
/* --- WP Block Seperator Style
-------------------------------------------------------- */
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
opacity: 1;
width: 80px;
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots).is-style-default {
width: 80px;
}
.section-heading .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
margin-left: 0;
}
.section-heading .wp-block-separator:not(.is-style-wide):not(.is-style-dots).is-style-default {
margin-left: 0;
margin-top: 30px;
}
/* --- WP Block Pullquote Style
-------------------------------------------------------- */
.wp-block-pullquote p {
color: var(--wp--preset--color--foreground);
font-size: var(--wp--custom--typography--font-size--heading-four);
line-height: 1.4;
font-family: var(--wp--preset--font-family--merriweather);
margin-top: 0;
}
.wp-block-pullquote cite,
.wp-block-pullquote footer,
.wp-block-pullquote .wp-block-pullquote__citation {
font-size: var(--wp--preset--font-size---medium-small);
text-transform: none;
}
.wp-block-pullquote {
padding-top: 35px;
padding-bottom: 35px;
border-top: 5px solid var(--wp--preset--color--chocolate-dim);
border-bottom: 5px solid var(--wp--preset--color--chocolate-dim);
}
.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright,
.wp-block[data-align="left"] .wp-block-pullquote,
.wp-block[data-align="right"] .wp-block-pullquote {
border: none;
position: relative;
}
.wp-block-pullquote.alignleft blockquote,
.wp-block-pullquote.alignright blockquote,
.wp-block[data-align="left"] .wp-block-pullquote blockquote,
.wp-block[data-align="right"] .wp-block-pullquote blockquote {
margin: 0;
}
.wp-block-pullquote.alignleft,
.wp-block-pullquote.has-text-align-left,
.wp-block[data-align="left"] .wp-block-pullquote {
margin-right: 0;
padding-right: 35px;
padding-left: 20px;
}
.wp-block-pullquote.alignright,
.wp-block-pullquote.has-text-align-right,
.wp-block[data-align="right"] .wp-block-pullquote {
margin-left: 0;
padding-left: 35px;
padding-right: 20px;
}
/* --- WP Block Table Style
-------------------------------------------------------- */
.wp-block-table td,
.wp-block-table th,
.wp-block-table td,
.wp-block-table th {
border-color: var(--wp--preset--color--border-color);
padding: 0.5em 1.4em;
}
.wp-block-table th:not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center),
.wp-block-table th:not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
text-align: left;
}
.wp-block-table thead,
.wp-block-table thead {
border-bottom-color: var(--wp--preset--color--border-color);
}
.wp-block-table tfoot {
border-top-color: var(--wp--preset--color--border-color);
}
.wp-block-table th,
.wp-block-table th {
font-weight: var(--wp--custom--typography--font-weight--semi-bold);
color: var(--wp--preset--color--foreground);
}
.wp-block-table table,
.wp-block-table table {
border: 1px solid var(--wp--preset--color--border-color);
}
/* --- WP Block Preformatted and Verse Style
-------------------------------------------------------- */
.wp-block-preformatted,
.wp-block-preformatted,
.wp-block-verse {
background-color: var(--wp--preset--color--peach-puff);
box-sizing: border-box;
font-family: "Courier Prime", monospace;
overflow: auto;
padding: var(--wp--custom--spacing--extra-small);
word-wrap: break-word;
}
/* --- WP Column Block Style
-------------------------------------------------------- */
.wp-block-column {
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* --- WP Block Search Style
-------------------------------------------------------- */
.wp-block-navigation__submenu-container {
display: none;
}
button[aria-expandd="true"] .wp-block-navigation__submenu-container {
display: block;
}
.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
width: 100%;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.wp-site-blocks>*+* {
margin-block-start: 0;
}
/* --- Block Theme
-------------------------------------------------------- */
/* --- BASE STYLE
-------------------------------------------------------- */
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
a:hover,
a:focus {
text-decoration: none;
}
.wp-block-navigation:where(:not([class*="has-text-decoration"])) a {
text-decoration: none;
}
/*
* Search and File Block button styles.
*/
.wp-block-search__button,
.wp-block-file .wp-block-file__button {
background-color: var(--wp--preset--color--button-color);
border-radius: 0;
border: none;
color: var(--wp--preset--color--background);
padding: 16px;
}
.wp-block-search__button:hover,
.wp-block-search__button:focus,
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:focus {
background-color: var(--wp--preset--color--button-color-secondary);
}
.wp-block-column-sidebar .wp-block-sidebar {
padding: 28px;
position: relative;
z-index: 9;
}
.wp-block-sidebar .wp-block-widget:not(:last-child) {
padding-bottom: 14px;
}
.wp-block-sidebar.product-sidebar .wp-block-widget {
background-color: transparent;
padding: 0;
}
/*
* Responsive menu container padding.
*/
.wp-block-navigation__responsive-container.is-menu-open {
padding: 20px 35px;
}
.wp-block-post-meta>*,
.wp-block-post-meta .wp-block-post-author__name {
font-size: var(--wp--preset--font-size--medium-small);
}
.wp-block-post-terms__separator {
display: none;
}
.wp-block-post-template .wp-block-post-featured-image {
margin: 0;
}
.wp-block-post-author__content .wp-block-post-author__name a {
text-decoration: none;
}
.wp-block-post-author__content .wp-block-post-author__name a:hover,
.wp-block-post-author__content .wp-block-post-author__name a:focus {
color: var(--wp--preset--color--link-color);
}
.wp-block-post-author__content .wp-block-post-author__name {
font-weight: var(--wp--custom--font-weight--regular);
top: 4px;
position: relative;
}
.wp-post-author-card .wp-block-post-author__content .wp-block-post-author__name {
color: var(--wp--preset--color--link-color);
font-size: var(--wp--preset--font-size--large);
font-weight: var(--wp--custom--font-weight--semi-bold);
font-family: var(--wp--preset--font-family--merriweather);
}
.feature-content-section .wp-block-post-template.is-flex-container,
.wp-block-query-loop.is-flex-container {
gap: var(--wp--custom--spacing--section-heading);
}
pre {
white-space: pre-wrap;
padding: 25px;
box-sizing: border-box;
}
.no-sidebar-full-width .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: var(--wp--style--global--wide-size);
}
.no-sidebar-medium-width .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 1090px;
}
.wp-block-sidebar-on-left .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.wp-block-sidebar-on-right .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 100%;
}
.no-sidebar-medium-width .wp-block-header-media :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: var(--wp--style--global--wide-size) !important;
}
/* --- Theme Style
-------------------------------------------------------- */
a,
.content>.video-play:hover span,
.content>.video-play svg,
a svg.icon,
#myBtn:after,
ins,
.woocommerce #respond input#submit.alt,
.woocommerce a.button,
.woocommerce button,
.swiper-pagination-bullet,
.wc-block-mini-cart__button,
svg,
.team-section .wp-block-column,
.wp-block-button__link,
.woocommerce ul.products li.product .button,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-post-excerpt__more-link,
.tnp.tnp-subscription .tnp-field input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="submit"],
header svg,
.wp-block-social-links a,
.header svg,
.wp-block-search__button,
.wc-block-product-search .wc-block-product-search__button,
.wc-block-components-button:not(.is-link).outlined,
.woocommerce ul.products li.product a h2,
.wp-block-navigation__responsive-container,
.services .wp-block-columns .wp-block-column:not(.section-heading),
.servicess .wp-block-columns .wp-block-column:not(.section-heading),
.wc-block-components-pagination__page,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-post-excerpt__more-link,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
.post-navigation-link__label,
.swiper-pagination span,
.slider-content *,
.wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-button .wp-block-button__link:before,
.wp-block-navigation .wp-block-navigation-item,
.service-section .wp-block-column,
.team-section .wp-block-column figure:before,
.team-section .plus-icon,
.social-lists,
.gallery-section .container--tabs .nav-tabs li a:before,
.wp-block-navigation .has-child .wp-block-navigation__submenu-container,
.wp-block-post-excerpt__more-link:before,
.wp-block-navigation .wp-block-navigation__submenu-container li a:before,
.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor,
.wp-block-post-featured-image img {
-moz-transition: 0.4s all;
-o-transition: 0.4s all;
-webkit-transition: 0.4s all;
transition: 0.4s all;
}
pre {
background-color: var(--wp--preset--color--secondary);
}
.wp-block-image {
margin-bottom: 1.5em;
margin-top: var(--wp--style--block-gap, 2em);
}
.wp-block-columns>.wp-block-column:last-child {
margin-bottom: 0;
}
.wp-block-post-header {
padding-top: var(--wp--custom--spacing--main-block-gap);
padding-bottom: var(--wp--custom--spacing--wp-block-post);
}
.wp-site-blocks main {
padding-bottom: var(--wp--custom--spacing--main-block-gap);
padding-top: var(--wp--custom--spacing--main-block-gap);
}
.wp-block-post-header+.wp-block-section,
.wp-block-post-header+main {
padding-top: var(--wp--custom--spacing--wp-block-post);
}
.wp-block-post-header+.wp-block-section.wp-block-featured-articles {
padding-top: 0;
padding-bottom: var(--wp--custom--spacing--wp-block-post);
}
.wp-site-blocks main {
padding-top: 0;
padding-bottom: 0;
}
body:not(.home) .wp-site-blocks main:has(.wp-block-post-content > .wp-block-section:last-child) {
padding-bottom: 0;
}
.wp-block-post-header+main .wp-block-featured-articles {
padding-top: 0;
}
.wp-block-table,
.wp-block-audio,
.wp-block-pullquote {
margin-top: var(--wp--style--block-gap);
}
.wp-block-latest-posts li a {
text-decoration: none;
}
.wp-block-latest-posts.is-grid li {
margin-bottom: 0;
}
.wp-block-categories__list a,
.wp-block-categories-list a,
.wp-block-archives-list a {
text-decoration: none;
}
.wp-block-section .wp-block-columns .wp-block-columns {
margin-bottom: 0;
}
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
padding: var(--wp--custom--spacing--block-content-gap) var(--wp--custom--spacing--outer);
}
body.page-template-blank .wp-site-blocks main {
margin-top: 0;
padding-bottom: 0;
padding-top: 0;
}
.wp-block-columns.wp-block-sidebar-on-left,
.wp-block-columns.wp-block-sidebar-on-right {
gap: var(--wp--custom--spacing--wp-block-sidebar);
justify-content: space-between;
}
.wp-block-group-heading {
margin-bottom: var(--wp--custom--spacing--group-heading-bottom-gap);
position: relative;
}
.wp-block-group-heading.wp-archive-heading {
max-width: 1000px;
}
.wp-block-group-heading.wp-archive-heading p {
max-width: 780px;
}
.wp-block-group-heading .wp-block-query-title {
margin-bottom: 0;
}
.is-layout-constrained>.alignwide.no-sidebar-medium,
.no-sidebar-medium .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.no-sidebar-medium.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: var(--wp--custom--layout--medium-size) !important;
}
.is-root-container.alignwide:where(.is-layout-flow)> :not(.alignleft):not(.alignright) {
max-width: 780px;
}
/* --- WP Block Site title Style
-------------------------------------------------------- */
.wp-block-site-title a {
text-decoration: none;
}
/* --- WP Block Navigation Main
-------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container .wp-block-navigation-item__content):hover:after,
.wp-block-navigation .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container .wp-block-navigation-item__content):focus:after,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container .wp-block-navigation-item__content):after {
width: calc(100% - 10px);
left: 5px;
}
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
text-decoration: none;
color: var(--wp--preset--color--link-color);
}
.wp-footer-widgets .wp-block-navigation .wp-block-navigation-item a:hover,
.wp-footer-widgets .wp-block-navigation .wp-block-navigation-item a:focus {
text-decoration: none;
color: var(--wp--preset--color--soft-terracotta);
}
.wp-block-buttons-header .wp-block-buttons .wp-block-button .wp-block-button__link {
margin-top: 0;
}
.wp-block-group .header .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content:before {
opacity: 1;
}
.wp-block-group .header .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation__submenu-container {
padding: 7px 10px;
}
.wp-block-group .header .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item a {
position: relative;
}
.wp-block-group .header .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item a:before {
content: "";
height: 1px;
left: 0;
position: absolute;
top: 50%;
right: auto;
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 0;
}
.wp-block-group .header .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
-moz-transform: translateX(10px);
-o-transform: translateX(10px);
-ms-transform: translateX(10px);
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
.wp-block-group .header .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover:before {
width: 9px;
}
.wp-block-group .header .wp-block-navigation .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item a:before {
width: 9px;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
border: 0;
}
.wp-block-navigation .wp-block-navigation__submenu-container a {
font-weight: var(--wp--custom--font-weight--normal);
text-transform: capitalize;
}
.wp-block-centered-menu .wp-block-navigation {
text-align: center;
}
.wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
width: 12px;
height: 12px;
}
.wp-block-navigation .wp-block-navigation__submenu-icon {
height: .8em;
margin-left: .45em;
width: .8em;
}
/* --- WP Block Button
-------------------------------------------------------- */
.comment-content,
.comment-metadata,
.reply {
padding-left: clamp(82px, 8vw, 128px);
}
.comment-metadata {
font-size: var(--wp--preset--font-size--tiny);
}
.wp-block-post-comments .commentlist .depth-1.parent {
padding-left: 0;
}
.wp-block-post-comments input[type="submit"] {
border: 0;
margin-top: clamp(18px, 3.5vw, 24px);
}
.wp-block-post-comments input[type="submit"]:focus,
.wp-block-post-comments input[type="submit"]:hover {
outline-color: transparent;
}
.wp-block-tnp-minimal {
margin: 0 !important;
padding: 0 !important;
}
.is-style-outline>.wp-block-button__link:not(.has-text-color),
.tnp.tnp-subscription .tnp-field input[type="submit"] {
border-radius: 0;
border: 1px solid var(--wp--preset--color--button-color);
color: var(--wp--preset--color--button-color);
overflow: hidden;
position: relative;
}
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color):hover,
.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color):focus {
background-color: var(--wp--preset--color--button-color);
color: var(--wp--preset--color--light);
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
position: relative;
text-decoration: none;
background-color: var(--wp--preset--color--button-color);
border-radius: 32px;
border-color: var(--wp--preset--color--button-color);
border-width: 1px;
border-style: solid;
color: var(--wp--preset--color--light);
font-size: var(--wp--preset--font-size--body-default);
font-weight: var(--wp--custom--font-weight--medium);
line-height: var(--wp--custom--typography--line-height--heading-six);
margin-top: 0.8rem;
padding-top: clamp(12px, 2.5vw, 16px);
padding-right: clamp(21px, 2.5vw, 35px);
padding-bottom: clamp(12px, 2.5vw, 16px);
padding-left: clamp(21px, 2.5vw, 35px);
}
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background: transparent;
box-shadow: none;
color: var(--wp--preset--color--button-color);
transform: none;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
cursor: pointer;
line-height: 60px;
position: relative;
text-decoration: none;
height: 60px;
padding-inline: 15px;
}
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-previous:focus,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-next:focus {
color: var(--wp--preset--color--link-color);
}
.wp-block-post-excerpt__more-link {
text-transform: capitalize;
}
.contact-section.wp-block-section {
padding-bottom: 0;
}
.header-light .wp-block-button__link:hover:after,
.header-light .wp-block-button__link:focus:after,
.wp-block-button__link:hover:after,
.wp-block-button__link:focus:after {
outline-color: transparent;
}
/* --- WP Block Query Pagination
-------------------------------------------------------- */
.wp-block-query-pagination {
gap: 0;
background-color: var(--wp--preset--color--background);
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
max-width: max-content;
box-shadow: 0px 4px 4px 0px #9C9C9C0F;
border: 0.5px solid var(--wp--preset--color--border-color);
overflow: hidden;
margin-top: var(--wp--custom--spacing--group-heading-bottom-gap);
margin-left: 0 !important;
}
.wp-block-query-pagination>.wp-block-query-pagination-numbers {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
flex-wrap: wrap;
}
.wp-block-query-pagination-numbers .page-numbers {
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 60px;
text-decoration: none;
text-align: center;
width: 60px;
}
.wp-block-query-pagination-numbers .page-numbers:not(.dots):hover,
.wp-block-query-pagination-numbers .page-numbers:not(.dots):focus {
background-color: var(--wp--preset--color--secondary);
}
.wp-block-query-pagination-numbers .page-numbers:not(.dots).current {
color: var(--wp--preset--color--light);
background-color: var(--wp--preset--color--button-color);
}
/* --- WP Block Post Terms( WP Block Post Meta)
-------------------------------------------------------- */
.taxonomy-category.wp-block-post-terms>a,
.taxonomy-post_tag.wp-block-post-terms>a,
.wp-block-post-date a {
font-size: var(--wp--preset--font-size--medium-small);
text-decoration: none;
text-transform: capitalize;
}
.taxonomy-category.wp-block-post-terms>a,
.single .taxonomy-post_tag.wp-block-post-terms>a {
color: var(--wp--preset--color--title);
background-color: var(--wp--preset--color--soft-peach);
border: 1px solid var(--wp--preset--color--soft-peach);
border-radius: 26px;
display: inline-block;
font-size: 14px;
margin-right: 7px;
margin-bottom: 7px;
padding: 0.25rem 0.65rem;
text-transform: capitalize;
}
.taxonomy-category.wp-block-post-terms>a:hover,
.taxonomy-category.wp-block-post-terms>a:focus,
.single .taxonomy-post_tag.wp-block-post-terms>a:hover,
.single .taxonomy-post_tag.wp-block-post-terms>a:focus {
border-color: 1px solid var(--wp--preset--color--link-color);
background-color: transparent;
color: var(--wp--preset--color--link-color);
}
.single .taxonomy-category.wp-block-post-terms>.wp-block-post-terms__separator,
.single .taxonomy-post_tag.wp-block-post-terms>.wp-block-post-terms__separator {
display: none;
}
/* --- WP Block Post Navigation Link
-------------------------------------------------------- */
.wp-block-post-navigation-link .post-navigation-link__label {
display: block;
font-weight: var(--wp--custom--font-weight--regular);
font-size: var(--wp--preset--font-size--small);
line-height: var(--wp--custom--typography--line-height--extra-small);
margin-bottom: 7px;
text-transform: uppercase;
}
.wp-block-post-navigation-link .post-navigation-link__label svg {
width: 7px;
}
.post-navigation-link-next {
margin-top: 21px;
}
.wp-block-post-navigation-link a {
text-decoration: none;
}
.wp-block-post-navigation-link a:hover,
.wp-block-post-navigation-link a:focus {
color: var(--wp--preset--color--link-color);
}
/* --- WP Block Post Template(wp-block-post)
-------------------------------------------------------- */
.wp-block-post-container {
padding: var(--wp--custom--spacing--wp-block-post) !important;
}
.is-root-container.wp-block-post-content-is-layout-flow {
padding-left: var(--wp--custom--spacing--outer);
padding-right: var(--wp--custom--spacing--outer);
}
.page-template-blog,
.blog,
.page,
.archive,
.single {
background-color: var(--wp--preset--color--body-background) !important;
}
.page-template-blog::before,
.blog::before,
.page::before,
.archive::before,
.single::before {
position: absolute;
width: 100%;
height: 50%;
left: 0;
top: 0;
content: '';
background-image: var(--wp--preset--gradient--gradient-bg-color) !important;
display: block;
z-index: -1;
}
body:has(.wp-block-header-media) .wp-block-header,
body.single .wp-block-header.has-body-background-deep-background-color,
body.archive .wp-block-header.has-body-background-deep-background-color,
body.page .wp-block-header.has-body-background-deep-background-color,
body.wp-singular .wp-block-header.has-body-background-deep-background-color {
background-color: transparent !important;
}
.editor-styles-wrapper .is-root-container.alignwide {
max-width: var(--wp--style--global--content-size);
}
.archive::before,
.blog:has(.wp-block-featured-articles)::before {
height: 120%;
}
body.search,
body.error404 {
background-color: var(--wp--preset--color--body-background-deep);
}
body:not(.home) .wp-site-blocks main .wp-block-post-header {
padding-top: 0;
}
.wp-block-post-title a {
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
color: var(--wp--preset--color--link-color);
}
.block-editor-block-list__block.wp-block-post-title.editor-post-title,
.single .wp-block-post-title {
font-size: var(--wp--preset--font-size--huge);
font-family: var(--wp--preset--font-family--merriweather);
font-weight: var(--wp--custom--font-weight--semi-bold);
line-height: 1.38;
}
.wp-block-post-header .wp-block-post-title {
font-weight: var(--wp--custom--font-weight--bold);
}
.wp-block-post-template .wp-block-post-meta>* {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
svg.icon {
fill: var(--wp--preset--color--body-text);
height: 14px;
margin-right: 7px;
position: relative;
top: 2px;
width: 14px;
}
svg.icon.icon-calendar,
svg.icon.icon-user {
width: 24px;
height: 24px;
top: 4px;
margin-right: 3px;
}
.archive svg.icon.icon-user {
top: 5px;
}
svg.icon.icon-calendar {
top: 6px;
}
.wp-block-post-navigation-link svg.icon {
display: none;
}
.post-navigation-link-next svg.icon {
padding-left: 7px;
}
.post-navigation-link-previous svg.icon {
padding-right: 7px;
}
a svg.icon {
fill: var(--wp--preset--color--foreground);
}
.wp-block-post-excerpt>*:last-child {
margin-bottom: 0;
}
.wp-block-post-excerpt__excerpt {
font-size: 15px;
}
.wp-block-post-template>li {
margin-bottom: var(--wp--custom--spacing--normal);
box-shadow: 0px 0px 80px -15px #8E848526;
}
.search-results .wp-block-post-template>li {
box-shadow: none;
background: transparent !important;
position: relative;
}
.search-results .wp-block-post-template>li::before {
display: none;
}
.search-results .wp-block-post-template>li:last-child>div {
border: none;
}
.search-results .wp-block-post-template>li .wp-block-post-excerpt {
margin-block-start: 14px;
}
.wp-block-post-featured-image {
overflow: hidden;
}
.wp-block-post-featured-image:hover a img {
transform: scale(1.05);
}
.wp-block-post-comments ul,
.wp-block-post-comments ol {
list-style-type: none;
padding: 0;
}
figure.wp-block-post-featured-image a {
position: relative;
}
figure.wp-block-post-featured-image a:before {
position: absolute;
top: 0;
left: -100%;
z-index: 2;
display: block;
content: "";
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
filter: blur(2px);
}
figure.wp-block-post-featured-image a:hover:before {
-webkit-animation: shine 0.75s;
animation: shine 0.75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
.wp-block-post-author {
text-transform: capitalize;
}
.wp-block-group-heading .wp-block-post-author {
background-color: transparent;
width: 100%;
align-items: center;
}
p.wp-block-post-author__bio:empty {
display: none;
}
.wp-block-group-heading .wp-post-author-card {
max-width: 1040px;
}
.wp-block-post-author__bio {
font-size: var(--wp--preset--font-size--body-small);
line-height: var(--wp--custom--typography--line-height--paragraph);
margin-top: 21px;
}
.wp-block-post-content .wp-block-post-author {
background-color: transparent;
}
/* --- WP Block Quote
-------------------------------------------------------- */
.wp-block-quote.is-style-large cite,
.wp-block-quote.is-style-large footer,
.wp-block-quote.is-large cite,
.wp-block-quote.is-large footer {
text-align: left;
}
.wp-block-quote.has-text-align-left.is-style-large cite,
.wp-block-quote.has-text-align-left.is-style-large footer,
.wp-block-quote.has-text-align-left.is-large cite,
.wp-block-quote.has-text-align-left.is-large footer {
text-align: left;
}
.wp-block-quote.has-text-align-right.is-style-large cite,
.wp-block-quote.has-text-align-right.is-style-large footer,
.wp-block-quote.has-text-align-right.is-large cite,
.wp-block-quote.has-text-align-right.is-large footer {
text-align: right;
}
.wp-block-quote.has-text-align-center.is-style-large cite,
.wp-block-quote.has-text-align-center.is-style-large footer,
.wp-block-quote.has-text-align-center.is-large cite,
.wp-block-quote.has-text-align-center.is-large footer {
text-align: center;
}
.wp-block-quote.is-style-plain,
.wp-block-quote.is-style-large,
.wp-block-quote.is-large {
padding: 0;
}
.wp-block-quote cite,
.wp-block-pullquote cite,
.wp-block-quote footer,
.wp-block-quote.is-style-large cite {
color: var(--wp--preset--color--title);
font-weight: var(--wp--custom--font-weight--regular);
font-size: var(--wp--preset--font-size--medium-small);
}
/* --- WP Block Table
-------------------------------------------------------- */
.wp-block-table.is-style-stripes tbody tr:nth-child(2n + 1) {
background-color: var(--wp--preset--color--secondary-bg-color);
}
.wp-block-table.is-style-stripes {
border-bottom: 0;
}
.wp-block-table.is-style-stripes thead {
border: 0;
color: var(--wp--preset--color--color-light);
}
.wp-block-table.is-style-stripes td,
.wp-block-table.is-style-stripes th {
padding: 0.5em 1.4em;
}
.wp-block-table.is-style-stripe th:not(.has-text-align-left):not(.has-text-align-right):not(.has-text-align-center) {
text-align: left;
}
/* --- WP Block Search
-------------------------------------------------------- */
.wp-block-search {
background-color: transparent;
}
.wp-block-search .wp-block-search__inside-wrapper,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
background-color: var(--wp--preset--color--background);
box-sizing: border-box;
border-radius: 5px;
padding: 5px;
border: 1px solid var(--wp--preset--color--border-color);
}
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
padding: 0 10px;
border: none;
}
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input:focus,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
outline: none;
}
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
cursor: pointer;
margin: 0;
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.wp-block-search-wrapper .wp-block-search__inside-wrapper {
position: relative;
padding: 0;
border-radius: 0;
margin-top: 28px;
}
.wp-block-search-wrapper .wp-block-search__inside-wrapper::before {
position: absolute;
left: 22px;
top: 19px;
content: '';
background: url(assets/images/search.svg) no-repeat;
width: 20px;
height: 24px;
background-size: 100%;
}
.wp-block-search-wrapper .wp-block-search__inside-wrapper .wp-block-search__input {
padding-left: 60px;
height: 60px;
font-size: var(--wp--preset--font-size--normal);
}
.wp-block-search-wrapper .wp-block-search__inside-wrapper .wp-block-search__button {
border-radius: 0;
padding-inline: 30px;
}
.wp-block-search-wrapper .wp-block-query {
max-width: 1020px;
margin: var(--wp--custom--spacing--section-block-bottom) auto 0 !important;
}
/* --- WP Block Form and Input Fields
-------------------------------------------------------- */
.wc-block-components-form .wc-block-components-text-input input[type=email],
.wc-block-components-form .wc-block-components-text-input input[type=number],
.wc-block-components-form .wc-block-components-text-input input[type=tel],
.wc-block-components-form .wc-block-components-text-input input[type=text],
.wc-block-components-form .wc-block-components-text-input input[type=url],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=number],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=url],
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input[aria-expanded=true],
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
background-color: var(--wp--preset--color--background);
border: 1px solid var(--wp--preset--color--border-color);
box-sizing: border-box;
border-radius: 5px;
color: var(--wp--preset--color--body-text);
font-size: var(--wp--preset--font-size--normal) !important;
font-weight: var(--wp--custom--font-weight--normal) !important;
line-height: var(--wp--custom--typography--line-height--heading-six);
padding: calc(0.667em + 2px);
outline: none;
width: 100%;
}
.wc-block-components-form .wc-block-components-text-input input[type=email]:hover,
.wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=number]:hover,
.wc-block-components-form .wc-block-components-text-input input[type=number]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=tel]:hover,
.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=text]:hover,
.wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=url]:hover,
.wc-block-components-form .wc-block-components-text-input input[type=url]:focus,
.wc-block-components-text-input input[type=email]:hover,
.wc-block-components-text-input input[type=email]:focus,
.wc-block-components-text-input input[type=number]:hover,
.wc-block-components-text-input input[type=number]:focus,
.wc-block-components-text-input input[type=tel]:hover,
.wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-text-input input[type=text]:hover,
.wc-block-components-text-input input[type=text]:focus,
.wc-block-components-text-input input[type=url]:hover,
.wc-block-components-text-input input[type=url]:focus,
.woocommerce form .form-row .input-text:hover,
.woocommerce form .form-row .input-text:focus,
.woocommerce form .form-row select:hover,
.woocommerce form .form-row select:focus,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input[aria-expanded=true]:hover,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input[aria-expanded=true]:focus,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:hover,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:hover,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
input[type="date"]:hover,
input[type="date"]:focus,
input[type="time"]:hover,
input[type="time"]:focus,
input[type="datetime-local"]:hover,
input[type="datetime-local"]:focus,
input[type="week"]:hover,
input[type="week"]:focus,
input[type="month"]:hover,
input[type="month"]:focus,
input[type="text"]:hover,
input[type="text"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="url"]:hover,
input[type="url"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="search"]:hover,
input[type="search"]:focus,
input[type="tel"]:hover,
input[type="tel"]:focus,
input[type="number"]:hover,
input[type="number"]:focus,
textarea:hover,
textarea:focus {
border: 1px solid var(--wp--preset--color--button-color);
}
.wc-block-components-form .wc-block-components-text-input input[type=email]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type=number]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type=tel]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type=text]::placeholder,
.wc-block-components-form .wc-block-components-text-input input[type=url]::placeholder,
.wc-block-components-text-input input[type=email]::placeholder,
.wc-block-components-text-input input[type=number]::placeholder,
.wc-block-components-text-input input[type=tel]::placeholder,
.wc-block-components-text-input input[type=text]::placeholder,
.wc-block-components-text-input input[type=url]::placeholder,
.woocommerce form .form-row .input-text::placeholder,
.woocommerce form .form-row select::placeholder,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input[aria-expanded=true]::placeholder,
.wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input::placeholder,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input::placeholder,
input[type="date"]::placeholder,
input[type="time"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="week"]::placeholder,
input[type="month"]::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
font-size: var(--wp--preset--font-size--body-small) !important;
}
.wp-block-post-comments input:not([type="submit"]) {
border: 1px solid transparent;
background-color: var(--wp--preset--color--foreground);
}
.wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=number]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
.wc-block-components-form .wc-block-components-text-input input[type=url]:focus,
.wc-block-components-text-input input[type=email]:focus,
.wc-block-components-text-input input[type=number]:focus,
.wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-text-input input[type=text]:focus,
.wc-block-components-text-input input[type=url]:focus,
.wc-block-components-form .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input[aria-expanded=true]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="month"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
border-color: var(--wp--preset--color--link-color);
box-shadow: none;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
padding: 10px;
border-radius: 5px;
}
/* --- WP Block Embed
-------------------------------------------------------- */
.wp-block-embed {
margin-top: var(--wp--style--block-gap);
}
/* --- WP Block Image
-------------------------------------------------------- */
.wp-block-image .alignleft {
margin-right: 2em;
}
.wp-block-image .alignright {
margin-left: 2em;
}
/* --- Block Widget
-------------------------------------------------------- */
.wp-block-widget-area * {
line-height: var(--wp--custom--typography--line-height--heading-five);
}
.wp-block-widget-area a {
text-decoration: none;
transition: all 0.2s;
}
.wp-block-widget-area h2 {
font-family: var(--wp--preset--font-family--switzer);
font-weight: var(--wp--custom--font-weight--bold);
text-transform: capitalize;
line-height: 1.65;
}
.wp-block-post-excerpt__more-text {
margin-top: 1.05rem;
}
.wp-block-tag-cloud>a {
display: inline-block;
margin-bottom: 7px;
padding: 4px 14px;
text-decoration: none;
font-size: 14px !important;
background-color: var(--wp--preset--color--primary);
border: 1px solid var(--wp--preset--color--primary);
}
.wp-block-tag-cloud>a:hover,
.wp-block-tag-cloud>a:focus {
background-color: transparent;
border: 1px solid var(--wp--preset--color--border-color);
}
.wp-block-widget-area ul {
list-style: none;
padding-left: 0;
}
ul.wp-block-categories-list.wp-block-categories li:not(:last-child) {
margin-bottom: 0.5rem;
}
.wp-block-widget-area li {
margin-bottom: 14px;
padding-left: 20px;
}
.wp-block-widget-area li:last-child {
margin-bottom: 0;
}
.wp-block-widget-area li:before,
.wp-block-widget-area li:after {
content: "";
display: table;
table-layout: fixed;
}
.wp-block-widget-area li:before {
width: 5px;
height: 5px;
background-color: var(--wp--preset--color--foreground);
border-radius: 50%;
position: absolute;
left: 0;
top: 10px;
}
.wp-block-widget-area .wp-block-latest-posts li {
padding: 0;
line-height: 1.45;
}
.wp-block-widget-area .wp-block-latest-posts li::before {
opacity: 0;
}
.wp-block-widget-area li:after {
clear: both;
}
.wp-block-sidebar .wp-block-archives-list>li,
.wp-block-sidebar .wp-block-categories-list>li {
text-align: right;
position: relative;
}
.about .is-style-outline>.wp-block-button__link:not(.has-text-color) {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
}
.wp-block-archives-list>li>a,
.wp-block-categories-list>li>a {
float: left;
}
/* --- Block Widget Sidebar
-------------------------------------------------------- */
.wp-block-sidebar .wp-block-latest-posts__list>li:not(:last-child) {
margin-bottom: 21px;
}
.wp-block-widget-area a {
color: var(--wp--preset--color--title);
}
.wp-block-widget-area a:hover,
.wp-block-widget-area a:focus {
color: var(--wp--preset--color--link-color);
}
.wp-block-sidebar .wp-block-latest-posts__post-excerpt {
padding-left: 75px;
}
.wp-block-widget-area .wp-block-latest-posts__post-author,
.wp-block-widget-area .wp-block-latest-posts__post-date {
font-size: var(--wp--preset--font-size--small);
line-height: 1.62;
margin-top: 7px;
color: var(--wp--preset--color--secondary-text);
}
.wp-block-widget-area .wp-block-latest-posts__featured-image~.wp-block-latest-posts__post-author,
.wp-block-widget-area .wp-block-latest-posts__featured-image~.wp-block-latest-posts__post-date {
margin-left: 91px;
}
/* --- WP Block Sections
-------------------------------------------------------- */
.wp-block-section {
margin-block-start: 0;
padding-bottom: var(--wp--custom--spacing--section-block-bottom);
padding-top: 0;
z-index: 2;
}
.wp-block-section+.wp-block-section {
padding-top: 0;
}
.wp-block-section.has-secondary-background-color,
.wp-cta-section+.wp-block-section,
.wp-block-section.wp-block-cover+.wp-block-section,
.wp-block-section.wp-block-icons-with-text+.wp-block-section,
.wp-block-section.wp-block-header-media+.wp-block-section:not(.wp-cta-section) {
padding-top: var(--wp--custom--spacing--section-block-top);
}
.wp-block-section.wp-block-header-media {
padding-top: var(--wp--custom--spacing--main-block-gap-medium);
}
body:not(.home) .wp-site-blocks main {
padding-bottom: var(--wp--custom--spacing--main-block-gap);
padding-top: var(--wp--custom--spacing--main-block-gap-medium);
margin-top: 0;
}
/* --- Drop Cap
-------------------------------------------------------- */
.has-drop-cap:not(:focus)::first-letter {
color: var(--wp--preset--color--title-color);
font-weight: var(--wp--custom--font-weight--bold);
font-size: 5em;
margin: 0.15em 0.15em 0 -0.07em;
}
/* --- WP Block Image
-------------------------------------------------------- */
.wp-block-image figure.alignright,
.wp-block-image figure.alignleft,
.wp-block[data-align="left"] .wp-block-image,
.wp-block[data-align="right"] .wp-block-image,
.wp-block-cover.alignleft,
.wp-block-cover.alignright,
.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright,
.wp-block[data-align="left"]>.wp-block-pullquote,
.wp-block[data-align="right"]>.wp-block-pullquote,
[data-align="left"]>.wp-block-cover,
[data-align="right"]>.wp-block-cover,
.wp-block-embed.alignleft,
.wp-block-embed.alignright,
.wp-block[data-align="left"]>.wp-block-embed,
.wp-block[data-align="right"]>.wp-block-embed {
max-width: 390px;
width: 100%;
}
.wp-block-cover.alignleft,
[data-align="left"]>.wp-block-cover,
.wp-block-embed.alignleft,
.wp-block[data-align="left"]>.wp-block-embed {
margin-right: 2em !important;
margin-bottom: 1.5em;
}
.wp-block-cover.alignright,
[data-align="right"]>.wp-block-cover,
.wp-block-embed.alignright,
.wp-block[data-align="right"]>.wp-block-embed {
margin-left: 2em !important;
margin-bottom: 1.5em;
}
/* --- WP Block Code
-------------------------------------------------------- */
.wp-block-code>code {
border-color: var(--wp--preset--color--border-color);
}
/* --- WP Block Firgcaption
-------------------------------------------------------- */
.wp-site-blocks figure figcaption,
figure figcaption {
font-size: var(--wp--preset--font-size--medium);
line-height: 1.75;
font-style: italic;
}
/* --- Block Woocommerce
-------------------------------------------------------- */
.wc-block-mini-cart__badge {
font-size: var(--wp--preset--font-size--tiny);
background-color: var(--wp--preset--color--link-color);
}
.woocommerce-page :where(.wp-element-button, .wp-block-button__link),
.woocommerce-page .wp-block-woocommerce-empty-cart-block p a,
.woocommerce-page .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button,
.woocommerce-page .wc-block-cart__submit-container .wp-element-button,
.woocommerce-page .wc-block-components-totals-coupon__form .wp-element-button,
.woocommerce-page .wc-block-checkout__actions_row .wp-element-button .woocommerce-cart-form .actions .button,
.woocommerce-page .restore-item,
.woocommerce-page .wc-block-grid .wc-block-grid__products .wc-block-components-product-button button,
.woocommerce-page #review_form #respond .form-submit input,
.woocommerce-page a.button,
.woocommerce-page button.single_add_to_cart_button,
.woocommerce-page button[name=add-to-cart],
.woocommerce-page button[type=submit]:not(.wp-block-search__button),
.woocommerce-page input[name=submit],
.woocommerce-page button.button,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button.alt,
.woocommerce-page button.button:disabled,
.woocommerce-page button.button:disabled[disabled] {
background-color: var(--wp--preset--color--button-color);
border: 1px solid var(--wp--preset--color--button-color);
color: var(--wp--preset--color--light);
font-size: var(--wp--preset--font-size--normal);
font-weight: var(--wp--custom--font-weight--medium);
height: auto;
line-height: 1.75;
text-decoration: none;
margin-top: 0.5rem;
padding-top: clamp(0.5rem, 1vw, 1rem);
padding-right: clamp(1.25rem, 2vw, 3rem);
padding-bottom: clamp(0.5rem, 1vw, 1rem);
padding-left: clamp(1.25rem, 2vw, 3rem);
text-transform: capitalize;
transition: all 0.4s;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
.woocommerce-page :where(.wp-element-button, .wp-block-button__link):hover,
.woocommerce-page :where(.wp-element-button, .wp-block-button__link):focus,
.woocommerce-page .wp-block-woocommerce-empty-cart-block p a:hover,
.woocommerce-page .wp-block-woocommerce-empty-cart-block p a:focus,
.woocommerce-page .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:hover,
.woocommerce-page .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:focus,
.woocommerce-page .wc-block-cart__submit-container .wp-element-button:hover,
.woocommerce-page .wc-block-cart__submit-container .wp-element-button:focus,
.woocommerce-page .wc-block-components-totals-coupon__form .wp-element-button:hover,
.woocommerce-page .wc-block-components-totals-coupon__form .wp-element-button:focus,
.woocommerce-page .wc-block-checkout__actions_row .wp-element-button .woocommerce-cart-form .actions .button:hover,
.woocommerce-page .wc-block-checkout__actions_row .wp-element-button .woocommerce-cart-form .actions .button:focus,
.woocommerce-page .restore-item:hover,
.woocommerce-page .restore-item:focus,
.woocommerce-page .wc-block-grid .wc-block-grid__products .wc-block-components-product-button button:hover,
.woocommerce-page .wc-block-grid .wc-block-grid__products .wc-block-components-product-button button:focus,
.woocommerce-page #review_form #respond .form-submit input:hover,
.woocommerce-page #review_form #respond .form-submit input:focus,
.woocommerce-page a.button:hover,
.woocommerce-page a.button:focus,
.woocommerce-page button.single_add_to_cart_button:hover,
.woocommerce-page button.single_add_to_cart_button:focus,
.woocommerce-page button[name=add-to-cart]:hover,
.woocommerce-page button[name=add-to-cart]:focus,
.woocommerce-page button[type=submit]:not(.wp-block-search__button):hover,
.woocommerce-page button[type=submit]:not(.wp-block-search__button):focus,
.woocommerce-page input[name=submit]:hover,
.woocommerce-page input[name=submit]:focus,
.woocommerce-page button.button:hover,
.woocommerce-page button.button:focus,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button.alt:hover,
.woocommerce-page .wc-proceed-to-checkout a.checkout-button.alt:focus,
.woocommerce-page button.button:disabled:hover,
.woocommerce-page button.button:disabled:focus,
.woocommerce-page button.button:disabled[disabled]:hover,
.woocommerce-page button.button:disabled[disabled]:focus {
color: var(--wp--preset--color--button-color);
background-color: transparent;
}
/** Product Listing Page **/
.wc-block-components-product-sale-badge {
background: var(--wp--preset--color--link-color);
border: none;
color: var(--wp--preset--color--background);
}
.woocommerce .woocommerce-ordering select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
max-width: 100%;
background-image: url("data:image/svg+xml,");
background-size: 16px 6px;
background-repeat: no-repeat;
background-position: right 8px center;
font-size: 15px !important;
border-radius: 5px;
border: none;
cursor: pointer;
word-wrap: normal;
line-height: 1.3;
min-width: 160px;
padding: 10px 14px;
color: var(--wp--preset--color--body-text);
}
.wc-block-product-template .wc-block-components-product-price {
font-size: 18px !important;
}
.wc-block-product-template .wp-element-button {
font-size: 16px !important;
border: 1px solid var(--wp--preset--color--link-color) !important;
}
.wc-block-product-template .wp-element-button:hover,
.wc-block-product-template .wp-element-button:focus {
border: 1px solid var(--wp--preset--color--link-color) !important;
}
/** Product Single Page **/
.wc-block-components-notice-banner {
font-size: var(--wp--preset--font-size--normal);
}
.wc-block-components-notice-banner>.wc-block-components-notice-banner__content {
align-items: center;
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.woocommerce-notices-wrapper {
z-index: 9;
position: relative;
}
.woocommerce-notices-wrapper .wc-block-components-notice-banner.is-success {
background-color: var(--wp--preset--color--peach-puff);
}
.woocommerce .wp-block-woocommerce-product-collection>h2,
.wp-block-woocommerce-product-details .woocommerce-Tabs-panel h2 {
font-size: var(--wp--preset--font-size--post-title);
}
.wp-block-woocommerce-product-collection,
.wp-block-woocommerce-product-details {
margin-top: var(--wp--custom--spacing--normal);
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
z-index: 3 !important;
}
body.woocommerce :where(.wp-element-button, .wp-block-button__link),
.woocommerce div.product form.cart .wp-element-button {
background-color: var(--wp--preset--color--button-color);
border-radius: 5px;
border: 1px solid var(--wp--preset--color--button-color);
font-weight: var(--wp--custom--font-weight--medium);
}
body.woocommerce :where(.wp-element-button, .wp-block-button__link):hover,
body.woocommerce :where(.wp-element-button, .wp-block-button__link):focus,
.woocommerce div.product form.cart .wp-element-button:hover,
.woocommerce div.product form.cart .wp-element-button:focus {
background-color: transparent;
color: var(--wp--preset--color--link-color);
}
.wp-block-woocommerce-product-meta .wp-block-post-terms.taxonomy-product_brand {
margin-top: 21px;
border-top: 1px solid var(--wp--preset--color--border-color);
padding-top: 21px;
}
.wp-block-woocommerce-product-meta .wp-block-post-terms {
margin-top: 14px;
}
.wp-block-woocommerce-product-meta .wp-block-post-terms a:hover {
color: var(--wp--preset--color--button-color);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-size: var(--wp--preset--font-size--medium);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
color: var(--wp--preset--color--button-color) !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
max-width: 900px;
}
/** Cart page CSS **/
.woocommerce-account .wp-block-post-title,
.woocommerce-cart .wp-block-post-title,
.woocommerce-cart main .woocommerce,
.woocommerce-checkout .wp-block-post-title,
.woocommerce-checkout main .woocommerce {
max-width: var(--wp--style--global--wide-size);
font-size: var(--wp--preset--font-size--huge-post-title);
font-family: var(--wp--preset--font-family--merriweather);
}
.woocommerce-account main .woocommerce {
max-width: var(--wp--style--global--wide-size);
}
.wc-block-components-product-name {
font-size: var(--wp--preset--font-size--medium);
font-weight: var(--wp--custom--font-weight--medium);
text-decoration: none;
}
.wc-block-components-product-name:hover,
.wc-block-components-product-name:focus {
color: var(--wp--preset--color--link-color);
}
.wc-block-cart .wc-block-cart__totals-title,
thead th {
font-size: var(--wp--preset--font-size--body-small);
}
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
margin: 0 !important;
padding: 10px 15px !important;
border-radius: 4px !important;
}
.wp-block-header .wc-block-mini-cart.wp-block-woocommerce-mini-cart {
visibility: visible !important;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:hover,
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input:focus {
border: none;
}
/** Checkout Page Css **/
.wc-blocks-components-select .wc-blocks-components-select__select {
border: 1px solid var(--wp--preset--color--border-color);
}
.wp-block-woocommerce-checkout-order-summary-block {
background-color: var(--wp--preset--color--peach-puff);
}
.wc-block-components-title.wc-block-components-title {
font-size: var(--wp--preset--font-size--post-title);
line-height: 1.5;
}
.wc-block-checkout__sidebar .wc-block-components-product-name {
font-size: var(--wp--preset--font-size--normal);
font-weight: var(--wp--custom--font-weight--medium);
line-height: 1.5;
cursor: pointer;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-formatted-money-amount {
font-size: var(--wp--preset--font-size--body-default);
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
font-size: var(--wp--preset--font-size--medium);
color: var(--wp--preset--color--tan-brown);
font-weight: var(--wp--custom--font-weight--medium);
text-transform: capitalize;
}
.wp-block-woocommerce-mini-cart-footer-block :where(.wp-element-button, .wp-block-button__link) {
background-color: var(--wp--preset--color--button-color);
border: 2px solid var(--wp--preset--color--button-color);
}
.wp-block-woocommerce-mini-cart-footer-block :where(.wp-element-button, .wp-block-button__link):hover,
.wp-block-woocommerce-mini-cart-footer-block :where(.wp-element-button, .wp-block-button__link):focus {
background-color: transparent;
border: 2px solid var(--wp--preset--color--button-color);
color: var(--wp--preset--color--button-color);
}
.wp-block-woocommerce-mini-cart-footer-block .wc-block-components-button:not(.is-link).outlined {
border: 1px solid var(--wp--preset--color--button-color);
color: var(--wp--preset--color--button-color);
}
.wp-block-woocommerce-mini-cart-footer-block .wc-block-components-button:not(.is-link).outlined:hover,
.wp-block-woocommerce-mini-cart-footer-block .wc-block-components-button:not(.is-link).outlined:focus {
box-shadow: none;
background-color: var(--wp--preset--color--button-color);
color: var(--wp--preset--color--light);
}
.woocommerce select:focus-visible {
border: none;
outline: none;
box-shadow: none;
}
.wc-blocks-components-select .wc-blocks-components-select__select:focus-visible,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
border-color: var(--wp--preset--color--button-color) !important;
border-width: 1px !important;
outline: none;
}
.wc-blocks-components-select .wc-blocks-components-select__container {
height: 60px;
}
.select2-container .select2-selection--single {
height: 60px;
display: block;
border: 1px solid var(--wp--preset--color--border-color);
}
.select2-container .select2-dropdown,
.select2-container .select2-selection {
border: 1px solid var(--wp--preset--color--border-color);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
background-color: var(--wp--preset--color--button-color);
}
.select2-container .select2-selection--single .select2-selection__rendered {
color: var(--wp--preset--color--body-text);
}
.wp-block-woocommerce-checkout-order-summary-block .checkout-order-summary-block-fill {
background-color: #fff;
}
.woocommerce-page .select2-container .select2-results__option {
font-size: 16px;
}
.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input input[type=email],
.wc-block-components-form .wc-block-components-text-input input[type=number],
.wc-block-components-form .wc-block-components-text-input input[type=password],
.wc-block-components-form .wc-block-components-text-input input[type=tel],
.wc-block-components-form .wc-block-components-text-input input[type=text],
.wc-block-components-form .wc-block-components-text-input input[type=url],
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=number],
.wc-block-components-text-input input[type=password],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=url],
.wc-block-components-form .wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-form .wc-block-components-text-input.is-active input[type=email],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=number],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=password],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=tel],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=text],
.wc-block-components-form .wc-block-components-text-input.is-active input[type=url],
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input.is-active input[type=email],
.wc-block-components-text-input.is-active input[type=number],
.wc-block-components-text-input.is-active input[type=password],
.wc-block-components-text-input.is-active input[type=tel],
.wc-block-components-text-input.is-active input[type=text],
.wc-block-components-text-input.is-active input[type=url],
.wc-blocks-components-select .wc-blocks-components-select__select,
.woocommerce-page form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
padding: 1.25rem 1.1rem;
height: 60px;
font-size: 16px;
}
.wc-blocks-components-select .wc-blocks-components-select__label,
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label {
left: 1.1em !important;
}
.wc-block-components-form .wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__select {
padding: 1.25rem 1.1rem 0 !important;
}
/** My Account Page **/
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
border: none;
padding: clamp(28px, 5vw, 42px);
margin: 2em 0;
text-align: left;
border-radius: 5px;
background: var(--wp--preset--color--peach-puff);
}
.woocommerce form.login,
.woocommerce form.register {
max-width: 480px;
}
.woocommerce-account .woocommerce-MyAccount-content {
width: 65%;
}
header.woocommerce-Address-title.title h2 {
font-size: var(--wp--preset--font-size--post-title);
line-height: 1.38;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
background: var(--wp--preset--color--peach-puff) !important;
padding: 28px;
box-sizing: border-box;
border-radius: 10px;
}
.woocommerce-account .addresses .title .edit {
float: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
list-style: none;
padding: 0.5em 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
color: var(--wp--preset--color--button-color);
font-weight: var(--wp--custom--font-weight--bold);
text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
text-decoration: none;
font-weight: var(--wp--custom--font-weight--medium);
font-size: var(--wp--preset--font-size--normal);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
color: var(--wp--preset--color--button-color);
font-weight: var(--wp--custom--font-weight--bold);
}
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
margin-top: 25px;
}
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* ---
-------------------------------------------------------- */
.wp-cta-section .wp-block-media-text {
max-width: 100% !important;
}
.wp-cta-section .wp-block-media-text .wp-block-media-text__media {
height: 100% !important;
}
.wp-cta-section .wp-block-media-text .wp-block-media-text__media img {
height: 100% !important;
width: 100% !important;
object-fit: cover;
}
.wp-cta-section .wp-block-media-text .wp-block-media-text__content {
padding-left: var(--wp--custom--spacing--outer);
padding-right: var(--wp--custom--spacing--outer);
max-width: 860px;
}
/* ---
-------------------------------------------------------- */
.wp-block-group.wp-block-site-logo-wrapper {
gap: 1rem;
}
.wp-block-header {
z-index: 9;
position: relative;
}
.wp-block-header::before {
position: absolute;
right: 0;
top: 0;
content: '';
background: url(assets/images/top-splash.svg);
background-size: contain;
background-position: top right;
width: 130px;
height: 200px;
z-index: -1;
opacity: 0.6;
background-repeat: no-repeat;
filter: drop-shadow(0 1000px 0 var(--wp--preset--color--shape-bg));
transform: translateY(-1000px);
}
.wp-block-header .wp-block-button.is-style-fill .wp-block-button__link {
border: 1px solid var(--wp--preset--color--button-color-secondary);
}
.wp-block-header .wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-header .wp-block-button.is-style-fill .wp-block-button__link:focus {
background: var(--wp--preset--color--body-background-deep) !important;
border: 1px solid var(--wp--preset--color--button-color);
}
.wp-block-header .wp-block-button .wp-block-button__link {
margin: 0;
}
.wp-block-header .wp-block-group:not(.wp-top-float-splash) {
position: relative;
z-index: 9;
}
.wp-block-woocommerce-customer-account.is-style-custom-account a {
background: url(assets/images/user-thin.svg) no-repeat;
background-size: 20px;
background-position: center;
padding: 6px;
}
.wp-block-woocommerce-customer-account.is-style-custom-account a svg {
opacity: 0;
}
.wp-block-woocommerce-customer-account.is-style-custom-account a span {
display: none;
}
.wc-block-mini-cart.is-style-custom-cart .wc-block-mini-cart__button {
background: url(assets/images/shopping-cart.svg) no-repeat;
background-size: 30px;
background-position: center;
padding: 6px;
}
.wc-block-mini-cart.is-style-custom-cart .wc-block-mini-cart__button svg {
opacity: 0;
}
.wp-header-phone a {
padding: 7px 9px;
width: 42px;
height: 42px;
display: inline-block !important;
box-sizing: border-box;
}
.wp-block-navigation__container .wp-block-navigation-item:hover>.wp-block-navigation-item__content {
color: var(--wp--preset--color--button-color);
}
.wp-block-navigation-submenu:hover .wp-block-navigation__submenu-icon svg {
stroke: var(--wp--preset--color--button-color);
}
.wp-block-image.wp-header-phone .components-resizable-box__container {
display: table;
width: 42px !important;
height: 42px !important;
}
.wp-block-header-right .wp-block-woocommerce-customer-account:hover,
.wp-block-header-right .wp-block-woocommerce-mini-cart:hover,
.wp-block-header-right .wp-header-phone a:hover {
animation: pulse 0.6s ease;
animation-iteration-count: 1;
transform-origin: center;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.search main,
.error404 main {
position: relative;
}
.search main:before,
.error404 main:before {
width: 450px;
height: 450px;
content: '';
position: absolute;
left: 0;
top: -30px;
background: url(assets/images/right-splash.svg) no-repeat;
background-size: 100%;
filter: drop-shadow(0 1000px 0 var(--wp--preset--color--shape-bg));
transform: translateY(-1000px);
}
.wp-block-float-svg {
position: absolute;
right: 0;
top: 0;
z-index: 3;
padding: 0;
}
.block-editor-block-list__block.wp-block-float-svg {
visibility: hidden;
opacity: 0;
height: 0;
width: 0;
}
.block-editor-block-list__block.wp-header-page-top {
opacity: 0;
height: 0;
}
/* ---
-------------------------------------------------------- */
.wp-footer-widgets {
padding-top: var(--wp--custom--spacing--block-footer-gap);
padding-bottom: var(--wp--custom--spacing--block-footer-gap);
}
.wp-footer-widgets .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
position: relative;
padding: 3px 0;
}
.wp-block-footer.wp-block-site-generator {
font-size: var(--wp--preset--font-size--extra-small);
margin-top: 0;
padding-top: var(--wp--custom--spacing--block-footer-gap);
position: relative;
}
.wp-block-footer.wp-block-site-generator:before {
content: "";
background: var(--wp--preset--color--dark-color);
height: 1px;
left: 0;
opacity: 0.1;
position: absolute;
top: 0;
width: 100%;
}
.wp-block-footer.wp-block-site-generator a {
text-decoration: none;
}
.wp-block-footer.wp-block-site-generator a:hover,
.wp-block-footer.wp-block-site-generator a:focus {
color: var(--wp--preset--color--link-color);
}
.wp-block-footer .wp-block-widget:not(:last-child),
.wp-block-footer .wp-block-widget>*:not(:last-child),
.wp-block-footer .wp-block-latest-posts__list>li:not(:last-child) {
margin-bottom: var(--wp--custom--spacing--extra-small);
}
.wp-block-widget-area .wp-block-widget figure {
line-height: 0;
margin-bottom: 0;
}
.wp-footer-widgets .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: var(--wp--preset--color--title);
}
.wp-footer-widgets .wp-block-navigation.is-vertical {
gap: 0.45rem;
}
.wp-footer-widgets .wp-block-navigation.is-horizontal {
gap: 2.45rem;
}
.wp-block-buttons.back-to-top {
position: absolute;
right: 0;
top: -60px;
margin: 0;
}
/** top scroll button **/
.back-to-top .wp-element-button {
border: none;
border-radius: 5px;
font-weight: 500;
margin: 0;
padding: 10px 22px 10px 45px;
}
.back-to-top .wp-element-button::before {
content: '';
background: url(assets/images/arrow-top.svg) no-repeat center;
background-size: contain;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
/* stays centered */
opacity: 1;
left: 18px;
pointer-events: none;
}
/* Animation */
@keyframes floatUpSmooth {
0% {
transform: translateY(-50%);
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}
.wp-block-footer:not(.bottom-footer).wp-block-site-generator>div {
gap: 0.25rem 0.5rem;
}
/* Trigger the animation on hover */
.back-to-top .wp-element-button:hover::before {
animation: floatUpSmooth 1.2s ease-in-out infinite;
}
.wp-block-footer-phone,
.wp-block-footer-location {
display: flex;
}
.wp-block-footer-phone svg,
.wp-block-footer-location svg {
width: 38px;
flex-shrink: 0;
margin-right: 21px !important;
height: 38px;
fill: var(--wp--preset--color--soft-terracotta);
}
.wp-block-footer-phone .wp-text-group,
.wp-block-footer-location .wp-text-group {
flex: 1;
margin: 0;
}
.wp-block-footer-phone svg {
position: relative;
top: -4px;
}
/* ---
-------------------------------------------------------- */
/* --- Header Media
-------------------------------------------------------- */
.wp-block-header-media {
overflow: hidden;
}
.wp-block-header-media .alignwide>* {
max-width: 1000px;
margin-inline: auto;
}
.wp-block-header-media .wp-block-star-ratings {
line-height: 1;
}
.wp-block-header-media .wp-block-cover__image-background {
position: relative;
}
.wp-block-header-media .wp-block-cover__inner-container {
position: absolute;
left: 50%;
top: 15%;
transform: translateX(-50%);
}
.wp-block-header-media .wp-hero-image-wrapper {
position: relative;
margin-top: 42px;
background-size: 125%;
background-position: center bottom;
}
.wp-block-header-media .wp-hero-image-wrapper::before {
content: '';
background: url(assets/images/right-splash.svg);
width: 60vw !important;
height: 60vw;
background-size: 100%;
position: absolute;
top: -35%;
left: -15%;
background-repeat: no-repeat;
filter: drop-shadow(0 1000px 0 var(--wp--preset--color--shape-bg));
transform: translateY(-1000px);
}
.wp-block-header-media .wp-hero-image-wrapper .wp-centered-hero-image {
width: 64vw !important;
height: 32vw;
border-top-left-radius: 32vw;
border-top-right-radius: 32vw;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin: 0 auto !important;
padding: 0;
overflow: hidden;
max-width: 100%;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-centered-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image {
position: absolute;
width: 13vw !important;
height: 13vw;
background-color: var(--wp--preset--color--icon-bg);
border-radius: 50%;
overflow: hidden;
padding: 0;
margin: 0 !important;
z-index: 1;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image figure {
margin: 0 !important;
width: 100%;
height: 100%;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image figure>* {
margin: 0 !important;
width: 100%;
height: 100%;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-first {
top: 0vw;
left: -1vw;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-second {
top: -4vw;
right: 6vw;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-third {
top: auto;
right: -4vw;
bottom: 4vw;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 600px) {
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-second {
top: -5vw;
right: 7vw;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-third {
right: -3vw;
bottom: 4vw;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-first {
top: -1vw;
left: 0vw;
}
}
@media (min-width: 768px) {
.wp-block-header-media .wp-hero-image-wrapper {
margin-top: 56px;
}
.wp-block-header-media .wp-hero-image-wrapper::before {
width: 40vw !important;
height: 40vw;
}
}
@media (min-width: 1366px) {
.wp-block-header-media .wp-hero-image-wrapper {
margin-top: 70px;
}
}
@media (min-width: 1600px) {
.wp-block-header-media .wp-hero-image-wrapper .wp-centered-hero-image {
width: 918px !important;
height: 459px;
border-top-left-radius: 459px;
border-top-right-radius: 459px;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-first {
top: 0vw;
left: -1vw;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-second {
top: -4vw;
right: 5.5vw;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image.image-third {
right: -3vw;
bottom: 4vw;
}
.wp-block-header-media .wp-hero-image-wrapper .wp-circle-float-image {
width: 195px !important;
height: 195px;
}
}
/** header with masked iage **/
.wp-block-header-media.self-created-masked-image .wp-hero-image-wrapper .wp-centered-hero-image {
border-radius: 0;
overflow: initial;
}
.wp-block-header-media.self-created-masked-image .wp-hero-image-wrapper .wp-centered-hero-image .wp-block-image {
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.wp-block-header-media.self-created-masked-image .wp-hero-image-wrapper .wp-centered-hero-image .wp-block-image img {
width: auto;
height: auto;
max-height: 100%;
object-fit: contain;
margin: 0 auto;
align-self: flex-end;
}
.wp-block-header-media.self-created-masked-image .wp-hero-image-wrapper .wp-centered-hero-image .wp-block-image>div {
height: 100%;
}
/* ---
-------------------------------------------------------- */
.wp-block-entry-content {
padding: var(--wp--custom--spacing--extra-small) !important;
}
.wp-block-featured-articles .wp-block-post-group {
height: 100%;
overflow: hidden;
background-color: var(--wp--preset--color--background);
}
.wp-block-featured-articles .wp-block-post-group .wp-block-entry-content a {
text-decoration: none;
}
.wp-block-featured-articles .wp-block-post-group .wp-block-entry-content a:hover,
.wp-block-featured-articles .wp-block-post-group .wp-block-entry-content a:focus {
color: var(--wp--preset--color--link-color);
}
.wp-block-featured-articles :where(.is-layout-grid) {
gap: 0;
}
/* ---
-------------------------------------------------------- */
.wp-block-latest-product-slider .is-product-collection-layout-carousel .wc-block-product {
min-width: 46.5%;
}
.wp-block-woocommerce-product-collection:has(.is-product-collection-layout-carousel) :where(.wc-block-next-previous-buttons.wc-block-next-previous-buttons) {
display: block;
}
.wc-block-featured-category__title {
font-size: var(--wp--preset--font-size--extra-large);
}
.wc-block-featured-category__description p {
line-height: 1.5;
}
.wc-block-featured-category__title,
.wc-block-featured-category__description {
color: inherit;
max-width: 768px;
}
.wp-block-button.wc-block-components-product-button {
display: flex;
flex-direction: row;
}
a.added_to_cart.wc_forward {
font-size: 16px;
margin: 0;
padding: 0;
}
a.added_to_cart.wc_forward:hover {
color: var(--wp--preset--color--chocolate-dim);
}
.wp-block-woocommerce-featured-category .wp-block-button .wp-block-button__link:hover {
background: var(--wp--preset--color--chocolate-dim);
border: 1px solid var(--wp--preset--color--chocolate-dim);
color: var(--wp--preset--color--color-light);
}
.wc-block-next-previous-buttons {
margin-top: -20px !important;
position: relative;
z-index: 3;
}
.wc-block-next-previous-buttons button:hover svg {
color: var(--wp--preset--color--chocolate-dim);
}
.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .wp-block-inner-page-title {
display: none;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
font-size: 20px;
}
h2.wp-block-heading.has-text-align-center.with-empty-cart-icon.wc-block-cart__empty-cart__title {
font-size: var(--wp--preset--font-size--extra-large);
}
.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .wp-site-blocks main {
padding-top: 0;
}
.wc-block-grid__product .wc-block-grid__product-title {
font-size: var(--wp--preset--font-size--medium);
font-weight: 500;
}
.wc-block-grid__product .wc-block-grid__product-title:hover,
.wc-block-grid__product .wc-block-grid__product-title:focus {
color: var(--wp--preset--color--link-color);
}
.wc-block-grid__product .wc-block-grid__product-link {
text-decoration: none;
}
.wc-block-product-new .wc-block-grid__product-price {
font-size: 18px;
}
.wp-block-woocommerce-product-meta .wp-block-post-terms a {
margin: 0 3px;
}
/* ---
-------------------------------------------------------- */
.scrolling-text-section {
overflow-x: hidden;
}
.scrolling-texts {
overflow: hidden;
position: relative;
white-space: nowrap;
}
.scrolling-texts-inner {
display: inline-flex;
white-space: nowrap;
animation: scroll-left 30s linear infinite;
}
.scrolling-texts-inner p {
display: inline-block;
margin-right: 2rem;
flex-shrink: 0;
margin-top: 0;
}
.scrolling-texts-inner p:last-child {
margin-right: 0;
}
/* Pause animation on hover */
.scrolling-texts:hover .scrolling-texts-inner {
animation-play-state: paused;
}
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
.wp-block-section.scrolling-text-section:last-of-type {
padding-bottom: var(--wp--custom--spacing--block-content-gap);
}
/* ---
-------------------------------------------------------- */
.wp-block-services .wp-block-post-group {
height: 100%;
background-color: var(--wp--preset--color--background);
box-shadow: 0px 0px 80px -15px #8E848526;
border-radius: 10px;
overflow: hidden;
transition: all 0.4s;
}
.wp-block-services .wp-block-post-group p {
font-size: var(--wp--preset--font-size--body-small);
}
.wp-block-services .wp-block-post-group:hover {
transform: translateY(-6px);
box-shadow: 0px 50px 120px -35px #685c5d26;
}
.wp-block-services .wp-block-post-group a {
text-decoration: none;
}
.wp-block-services .wp-block-post-group a:hover,
.wp-block-services .wp-block-post-group a:focus {
color: var(--wp--preset--color--link-color);
}
.wp-block-image img {
width: 100%;
}
.wp-block-icons-with-text .wp-block-float-shape figure {
overflow: hidden;
}
.wp-block-icons-with-text .wp-block-float-shape figure img {
filter: drop-shadow(0 1000px 0 var(--wp--preset--color--shape-bg));
transform: translateY(-1000px);
opacity: 0.6;
}
/* ---
-------------------------------------------------------- */
.treatment-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.125rem;
width: 139px;
flex-shrink: 0;
cursor: pointer;
transition: all 0.3s ease-out;
}
.treatment-card:hover {
transform: scale(1.05);
}
.treatment-image {
position: relative;
width: 113px;
height: 113px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease-out;
}
.treatment-card:hover .treatment-image {
filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}
.treatment-card a {
text-decoration: none;
}
.treatment-card:hover a,
.treatment-card:focus a {
color: var(--wp--preset--color--link-color);
}
.treatment-card .treatment-image img {
width: 113px;
height: 113px;
border-radius: 50%;
object-fit: cover;
transition: all 0.3s ease-out;
}
.treatment-card:hover .treatment-image img {
transform: scale(1.1);
filter: brightness(1.1);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.treatment-card.treatment-flipped .treatment-image img {
transform: rotate(180deg) scaleY(-1);
}
.treatment-card.treatment-flipped:hover .treatment-image img {
transform: rotate(180deg) scaleY(-1.1);
filter: brightness(1.1);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.treatment-card .treatment-image::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid transparent;
transition: all 0.3s ease-out;
}
.treatment-card:hover .treatment-image::after {
border-color: rgbaa(149, 78, 38, 0.3);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.treatments-grid {
gap: 0 !important;
align-items: flex-start;
margin-top: -30px !important;
}
.treatments-grid>div {
width: 50%;
text-align: center;
padding: 28px 15px 0;
}
/** icons with texts css**/
.wp-block-group.wp-block-float-shape {
position: absolute;
left: 0;
bottom: 0;
}
.wp-block-heading-content {
max-width: var(--wp--style--global--content-size);
}
/* ---
-------------------------------------------------------- */
.wp-block-text-with-round-images::before {
position: absolute;
content: '';
left: auto;
right: 5%;
top: 0;
width: 400px;
height: 200px;
background-color: var(--wp--preset--color--body-background-deep);
border-bottom-left-radius: 200px;
border-bottom-right-radius: 200px;
opacity: 0.4;
}
.wp-block-text-with-round-images .wp-round-images {
position: inherit;
display: flex;
justify-content: center;
gap: 1.5rem;
align-items: center;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image {
margin: 0 !important;
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wp-block-icons-with-text .wp-block-group-heading * {
max-width: 1200px;
}
.wp-block-icons-with-text .wp-block-column .wp-block-heading {
font-size: var(--wp--preset--font-size--post-title);
}
.wp-block-icons-with-text .wp-site-icon-holder {
width: 50px;
height: 50px;
position: relative;
display: flex;
padding: 0;
justify-content: center;
align-items: center;
margin: 0 !important;
z-index: 3;
}
.wp-block-icons-with-text .wp-site-icon-holder figure {
margin: 0;
}
.wp-block-icons-with-text .wp-site-icon-holder figure img {
width: 35px !important;
height: 35px !important;
object-fit: contain;
}
/* --- Block Media Quries
-------------------------------------------------------- */
body {
display: block;
}
/* --- > 480px
-------------------------------------------------------- */
/* --- > 600px
-------------------------------------------------------- */
@media screen and (max-width: 37.5em) {
.wp-block-site-logo+.wp-block-site-identity {
display: none;
}
.back-to-top .wp-element-button {
margin: 0;
padding: 10px 22px 10px 45px;
font-size: 14px;
}
.wp-block-buttons.back-to-top {
top: -55px;
}
.wp-block-query-pagination-numbers .page-numbers {
width: 45px;
height: 45px;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
line-height: 45px;
height: 45px;
padding-inline: 10px;
}
.wp-block-query-pagination-numbers .page-numbers.dots {
width: 30px;
}
.wp-block-columns.alignwide.upper-footer {
gap: 2rem;
}
.upper-footer :where(.is-layout-flow)>* {
margin-block-start: 1rem;
}
.wp-footer-widgets .wp-block-navigation.is-horizontal {
gap: 2.45rem;
margin-bottom: 21px;
}
.wp-block-group.wp-star-reviews {
gap: 0.5rem;
}
.wp-block-group.wp-star-reviews p {
font-size: var(--wp--preset--font-size--medium-small) !important;
}
.wp-block-group.wp-star-reviews .wp-block-star-ratings img {
width: 90px !important;
}
.wp-block-site-logo img {
height: 60px;
/* object-fit: contain; */
width: auto;
}
.wp-block-header>.is-layout-flex {
gap: 1rem;
}
.wp-block-header-media .wp-block-buttons {
gap: 0.5rem 1.5rem;
}
.wp-post-author-card .wp-block-post-author {
flex-direction: column;
gap: 1rem;
}
.wp-block-site-info {
display: flex !important;
justify-content: space-between !important;
width: 100%;
}
/* Push the social icons wrapper to the far right */
.wp-block-social-links {
margin-left: auto !important;
margin-right: 0 !important;
}
}
/* --- > 601px
-------------------------------------------------------- */
@media screen and (min-width: 37.5625em) {
.treatments-grid>div {
width: 33.3333%;
}
.wp-block-latest-product-slider .wc-block-product-template.wc-block-product-template {
margin: 0;
}
.wc-block-next-previous-buttons {
margin-top: -105px !important;
}
.wp-block-latest-product-slider .is-product-collection-layout-carousel .wc-block-product {
min-width: 48%;
}
.has-4-col.wp-block-columns {
flex-wrap: wrap !important;
}
.has-4-col.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: unset;
flex: 0 0 calc(50% - 0.75em) !important;
}
.columns-4.wp-block-post-template {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.archive .wp-block-post-template>li {
height: 100%;
border-radius: 10px;
overflow: hidden;
background-color: var(--wp--preset--color--background);
position: relative;
}
.archive .wp-block-post-template>li>.wp-block-group {
padding-bottom: 14px !important;
}
}
/* --- > 640px
-------------------------------------------------------- */
@media screen and (max-width: 40em) {
.wp-block-header .wp-block-buttons,
.wp-block-header .wp-block-woocommerce-customer-account {
display: none;
}
.wp-block-navigation__responsive-container-open:not(.always-shown) {
margin-left: -0.75rem;
}
}
@media screen and (max-width: 758px) {
.wp-block-sidebar-on-left .wp-block-column.wp-block-column-sidebar {
order: 2;
}
.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__media {
grid-column: 1;
grid-row: 1;
}
.wp-block-media-text.is-stacked-on-mobile {
grid-template-columns: 100% !important;
}
.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content {
grid-column: 1;
grid-row: 2;
}
}
@media screen and (max-width: 1199px) {
.wp-block-navigation__responsive-container-open:not(.always-shown) {
display: block;
}
.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
display: none;
}
}
/* --- > 768px
-------------------------------------------------------- */
/* --- > 782px
-------------------------------------------------------- */
@media screen and (min-width: 48.875em) {
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
padding: var(--wp--custom--spacing--section-block-top) var(--wp--custom--spacing--outer);
}
.wp-block-latest-product-slider .is-product-collection-layout-carousel .wc-block-product {
min-width: 31%;
}
.has-4-col.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex: 0 0 calc(50% - 1em) !important;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
left: 100% !important;
top: 0;
border-radius: 12px !important;
box-shadow: 0px 24px 26px -12px #4F4C4C57 !important;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
display: none;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container:before {
width: 100%;
background: #fff;
}
.treatments-grid>div {
width: 25%;
}
.wp-block-header::before {
width: 170px;
height: 250px;
opacity: 0.8;
}
.wp-block-post-template.is-layout-grid,
.is-layout-flex.wp-block-columns {
gap: 2rem !important;
}
.wp-block-columns.wp-block-sidebar-on-right,
.wp-block-columns.wp-block-sidebar-on-left {
gap: 3.5rem !important;
}
.archive .wp-block-post-template>li .wp-block-post-meta,
.wp-block-featured-articles .wp-block-group.wp-block-post-meta {
position: absolute;
bottom: 40px;
}
.wp-block-featured-articles .wp-block-post-group {
position: relative;
padding-bottom: 50px;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image {
position: absolute;
width: 120px;
height: 120px;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-one {
right: 30%;
top: 10%;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-two {
top: 15%;
right: 10%;
}
}
/* --- > 991px
-------------------------------------------------------- */
@media screen and (max-width: 1024px) {
.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__media {
grid-column: 1;
grid-row: 1;
}
.wp-block-media-text.is-stacked-on-mobile {
grid-template-columns: 100% !important;
}
.wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content {
grid-column: 1;
grid-row: 2;
}
.wp-block-sidebar-on-left.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column,
.wp-block-sidebar-on-right.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 100% !important;
}
.wp-block-sidebar-on-right.wp-block-columns,
.wp-block-sidebar-on-left.wp-block-columns {
flex-wrap: wrap !important;
}
}
/* --- > 1024px
-------------------------------------------------------- */
@media screen and (min-width: 64em) {
.wc-block-next-previous-buttons {
margin-top: -120px !important;
}
.wp-block-latest-product-slider .is-product-collection-layout-carousel .wc-block-product {
min-width: 23.4%;
}
.wp-block-column-sidebar .wp-block-sidebar {
padding: 42px;
}
.columns-4.wp-block-post-template {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.treatments-grid>div {
width: 20%;
}
.wp-block-post-template li {
transition: all 0.4s;
}
.wp-block-post-template li:hover,
.wp-block-post-template li:focus {
transform: translateY(-6px);
box-shadow: 0px 50px 120px -35px #685c5d26;
}
.wp-block-post-template li .wp-block-post-wrapper {
display: flex;
border-radius: 10px;
overflow: hidden;
}
.wp-block-text-with-round-images::before {
width: 520px;
height: 260px;
border-bottom-left-radius: 260px;
border-bottom-right-radius: 260px;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image {
position: absolute;
width: 160px;
height: 160px;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-one {
right: 35%;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-two {
top: 20%;
right: 10%;
}
.wp-block-post-template li .wp-block-post-featured-image {
flex: 0 0 35%;
}
.wp-block-post-template li .wp-block-post-container {
flex: 0 0 65%;
}
.wp-block-post-template li:not(.has-post-thumbnail) .wp-block-post-container {
flex: 0 0 100%;
}
.has-4-col.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 0 !important;
flex-grow: 1 !important;
}
}
/* --- > 1199px
-------------------------------------------------------- */
@media screen and (max-width: 74.9375em) {
.wp-block-header .wp-block-navigation {
order: 3;
margin-left: 0;
}
.wp-block-header .wp-block-header-right {
margin-left: auto;
margin-right: 0;
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container li {
padding: 7px 0;
}
}
/* --- > 1200px
-------------------------------------------------------- */
@media screen and (min-width: 75em) {
.wc-block-next-previous-buttons {
margin-top: -145px !important;
}
.wp-block-header .wp-block-navigation__container {
gap: 2.5rem;
}
.wp-block-site-logo .fallback-logo {
width: 205px !important;
}
.wp-block-header-right {
gap: 0.5rem;
}
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
position: relative;
padding: 5px 0;
}
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content::before {
content: "";
border-bottom: 2px solid var(--wp--preset--color--text-link);
position: absolute;
bottom: 0;
width: 0;
height: 0;
}
.wp-block-navigation__submenu-container {
position: relative;
background: transparent !important;
/* let the pseudo-element handle visual background */
border-radius: 12px;
box-shadow: 0px 24px 26px -12px #4F4C4C57;
min-width: 260px !important;
left: 0 !important;
z-index: 10;
padding: 0;
}
.wp-block-navigation__submenu-container::before {
content: '';
position: absolute;
inset: 0;
background: white;
/* or match your background */
border-radius: 12px;
z-index: -1;
pointer-events: none;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item {
padding-inline: 15px !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item:first-child {
padding-top: 15px;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
padding-bottom: 15px;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: 10px 50px 10px 15px !important;
border-radius: 5px;
position: relative;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
position: absolute !important;
left: auto !important;
top: 50% !important;
width: 24px !important;
height: 15px !important;
content: '' !important;
transition: all 0.4s !important;
transform: translateY(-50%) !important;
right: 15px !important;
background: url(assets/images/submenu-arrow.svg) no-repeat;
background-size: 100%;
display: block;
opacity: 0;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
color: var(--wp--preset--color--title) !important;
background-color: var(--wp--preset--color--body-background-deep);
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus::before,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus::after {
opacity: 1;
}
.wp-block-text-with-round-images::before {
width: 600px;
height: 300px;
border-bottom-left-radius: 300px;
border-bottom-right-radius: 300px;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-two {
top: 27%;
right: 10%;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-one {
right: 32%;
top: 20%;
}
}
/* --- > 1366px
-------------------------------------------------------- */
@media screen and (min-width: 85.375em) {
.wp-block-latest-product-slider .is-product-collection-layout-carousel .wc-block-product {
min-width: 18.55%;
}
.wp-block-product-of-month .wp-block-woocommerce-single-product .is-layout-flex.wp-block-columns {
gap: 4.5rem !important;
}
.wp-block-text-with-round-images::before {
width: 650px;
height: 325px;
border-bottom-left-radius: 325px;
border-bottom-right-radius: 325px;
}
.columns-4.wp-block-post-template {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wp-block-header::before {
width: 210px;
height: 338px;
}
.treatments-grid>div {
width: 12.5%;
}
.wp-block-section .media-on-left .wp-block-media-text__content {
padding-right: 15%;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image {
position: absolute;
width: 190px;
height: 190px;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-two {
top: 30%;
right: 15%;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-one {
right: 35%;
top: 15%;
}
.wp-block-header-media .wp-block-buttons {
gap: 2rem;
}
}
/* --- > 1400px
-------------------------------------------------------- */
@media screen and (min-width: 87.5em) {
.wc-block-next-previous-buttons {
margin-top: -165px !important;
}
}
/* --- > 1600px
-------------------------------------------------------- */
@media screen and (min-width: 100em) {
.wp-block-header>.wp-block-group {
gap: 0;
}
.wp-block-site-logo-wrapper,
.wp-block-header-right {
width: 22%;
}
.wp-block-header .wp-block-navigation {
width: 50%;
padding: 0 30px;
box-sizing: border-box;
gap: 0.5rem 2.5rem;
}
.wp-block-text-with-round-images::before {
width: 752px;
height: 376px;
border-bottom-left-radius: 376px;
border-bottom-right-radius: 376px;
}
.wp-block-group.alignfull.wp-block-header.header-transparent {
padding-inline: 50px !important;
}
.wp-block-header .wp-block-navigation {
width: 56%;
padding: 0 30px;
box-sizing: border-box;
gap: 0.5rem 2.5rem;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-two {
top: 38%;
right: 13%;
}
.wp-block-text-with-round-images .wp-round-images .wp-round-image.round-image-one {
right: 32%;
top: 20%;
}
.wp-block-group.alignfull.wp-block-header.header-transparent {
padding-inline: 70px !important;
}
}
/* --- > 1824px
-------------------------------------------------------- */
@media only screen and (min-width: 120em) {
.wp-block-site-logo-wrapper,
.wp-block-header-right {
width: 25%;
}
.wp-block-header .wp-block-navigation {
width: 50%;
gap: 0.5rem 3rem;
}
}
/* --- > 1920px
-------------------------------------------------------- */
/* --- WooCommerce Custom Camera Shop & App Menu Styles --- */
/* App-like Slide-out Menu */
.app-offcanvas-menu {
position: fixed;
top: 0;
left: -100%;
width: 300px;
height: 100vh;
background-color: var(--wp--preset--color--background, #fff);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
z-index: 9999;
transition: left 0.3s ease-in-out;
padding: 2rem 1.5rem;
overflow-y: auto;
}
.app-offcanvas-menu.is-open {
left: 0;
}
.app-offcanvas-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.app-offcanvas-overlay.is-active {
opacity: 1;
visibility: visible;
}
.app-offcanvas-close {
position: absolute;
top: 1rem;
right: 1.5rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
/* Sticky Add to Cart on Mobile */
@media (max-width: 767px) {
.single-product-camera .sticky-mobile-buy-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--wp--preset--color--background, #fff);
padding: 1rem;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
}
.single-product-camera .sticky-mobile-buy-box .wp-block-woocommerce-product-add-to-cart {
width: 100%;
margin: 0;
}
.single-product-camera .sticky-mobile-buy-box button.single_add_to_cart_button,
.single-product-camera .sticky-mobile-buy-box button.button {
width: 100%;
border-radius: 4px;
padding: 15px;
font-size: 1.1rem;
}
/* Add bottom padding to main so content isn't hidden behind sticky box */
.single-product-camera {
padding-bottom: 80px !important;
}
}
/* ==========================================================================
Custom WooCommerce Modifications
========================================================================== */
/* 1. Shop Page Layout (4 Col Desktop, 2 Col Mobile) */
.wp-block-woocommerce-product-collection ul.wc-block-grid__products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
@media (max-width: 768px) {
.wp-block-woocommerce-product-collection ul.wc-block-grid__products {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
}
/* Product Cards Styling */
.wp-block-woocommerce-product-collection ul.wc-block-grid__products .wc-block-grid__product {
padding: 15px;
background: var(--wp--preset--color--background);
border: 1px solid var(--wp--preset--color--border-color);
border-radius: 8px;
text-align: center;
transition: box-shadow 0.3s ease;
}
.wp-block-woocommerce-product-collection ul.wc-block-grid__products .wc-block-grid__product:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.wc-block-grid__product-image img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
border-radius: 4px;
}
.wc-block-grid__product-title {
font-size: 16px !important;
margin: 15px 0 10px !important;
font-weight: 500;
}
/* 2. WhatsApp Button Styling */
.whatsapp-btn {
display: block;
width: 100%;
margin-top: 10px;
background-color: var(--wp--preset--color--primary) !important;
color: #fff !important;
text-align: center;
border: none;
border-radius: 0;
padding: 12px 20px;
text-decoration: none;
font-weight: 500;
transition: opacity 0.3s;
font-size: 16px;
line-height: 1.5;
}
.whatsapp-btn:hover {
opacity: 0.9;
}
/* Add to Cart button matching WhatsApp button */
.wc-block-grid__product-add-to-cart.wp-block-button {
margin-top: 10px;
width: 100%;
}
header,
.site-header,
.wp-block-template-part>header {
position: sticky !important;
top: 0;
z-index: 9999;
background: var(--wp--preset--color--background, #fff);
}
.wc-block-grid__product-add-to-cart .wp-block-button__link {
width: 100%;
display: block;
text-align: center;
padding: 12px 20px;
}
/* 3. Single Product Page Enhancements */
.single-product-camera .wp-block-columns {
gap: 50px;
}
.single-product-camera .wc-block-components-product-title {
font-size: 28px !important;
margin-bottom: 20px;
}
.single-product-camera .wc-block-components-product-price {
font-size: 22px;
font-weight: 600;
color: var(--wp--preset--color--primary);
margin-bottom: 25px;
}
.single-product-camera .wp-block-woocommerce-product-add-to-cart button {
padding: 15px 30px;
font-size: 18px;
background-color: var(--wp--preset--color--primary);
color: #fff;
border: none;
cursor: pointer;
transition: opacity 0.3s;
width: 100%;
}
.single-product-camera .wp-block-woocommerce-product-add-to-cart button:hover {
opacity: 0.9;
}
/* 4. Out of Stock Button Styling */
a.button[aria-disabled="true"],
button[disabled] {
background-color: var(--wp--preset--color--tertiary) !important;
color: var(--wp--preset--color--foreground) !important;
cursor: not-allowed;
opacity: 0.7;
}
/* ==========================================================================
Zevcolite Premium Shop Layout
========================================================================== */
/* Main Container */
.zevco-custom-shop-grid {
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
}
@media (max-width: 1024px) {
.zevco-custom-shop-grid {
padding: 0 20px;
}
}
@media (max-width: 768px) {
.zevco-custom-shop-grid {
padding: 0 15px;
}
}
/* Product Grid (WooCommerce Standard Loop Override) */
.zevco-custom-shop-grid .products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.zevco-custom-shop-grid .products::before,
.zevco-custom-shop-grid .products::after {
display: none !important;
}
/* 1. Ensure the product list item is the anchor */
.zevco-custom-shop-grid .products li.product {
position: relative !important;
display: flex !important;
flex-direction: column !important;
padding: 15px !important;
border: 1px solid #e2e8f0 !important;
/* light grey border */
border-radius: 8px !important;
/* rounded corners for the grid card */
background-color: #ffffff8d !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
/* 2. Absolute positioning for the Sale badge - The Fix */
.zevco-custom-shop-grid .products li.product .onsale {
position: absolute !important;
top: 15px !important;
/* Matches your padding */
right: 15px !important;
/* Matches your padding */
left: auto !important;
margin: 0 !important;
z-index: 99 !important;
/* Higher z-index to stay on top */
background-color: var(--wp--preset--color--primary) !important;
color: #ffffff !important;
border-radius: 4px !important;
padding: 4px 8px !important;
font-size: 14px !important;
font-weight: bold !important;
pointer-events: none;
/* Badge won't interfere with clicking the image */
}
.header .wp-block-button.is-style-fill .wp-block-button__link {
background-color: var(--wp--preset--color--primary) !important;
color: #ffffff !important;
}
.header .wp-block-button.is-style-fill .wp-block-button__link:hover {
background-color: #333333 !important;
color: #ffffff !important;
}
.zevco-custom-shop-grid .products li.product br {
display: none !important;
}
/* Ensure the image container has no top margin */
.zevco-custom-shop-grid .products li.product a img, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-image img {
margin-top: 0 !important;
vertical-align: bottom !important;
/* Removes extra space under images */
}
/* 3. Remove the weird dots/artifacts from Screenshot 2026-07-01 at 12.22.21 AM.jpg */
.zevco-custom-shop-grid .products li.product::before,
.zevco-custom-shop-grid .products li.product::after {
content: none !important;
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. Ensure Image isn't fighting with the badge */
.zevco-custom-shop-grid .products li.product a img, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-image img {
display: block !important;
margin-top: 0 !important;
/* Forces image to top of container */
}
.zevco-custom-shop-grid .products li.product:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
@media (max-width: 1024px) {
.zevco-custom-shop-grid .products {
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 768px) {
.zevco-custom-shop-grid {
padding: 0 16px !important;
}
.zevco-custom-shop-grid .products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.zevco-custom-shop-grid .products li.product {
padding: 10px !important;
border-radius: 6px !important;
}
.zevco-custom-shop-grid .products li.product a img, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-image img {
margin-bottom: 10px !important;
border-radius: 4px !important;
}
.zevco-custom-shop-grid .products li.product .woocommerce-loop-product__title, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-title {
font-size: 14px !important;
height: 40px !important;
line-height: 1.4 !important;
margin-bottom: 6px !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zevco-custom-shop-grid .products li.product .price, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-price {
font-size: 15px !important;
margin-bottom: 8px !important;
}
.zevco-custom-shop-grid .products li.product .button, .zevco-custom-shop-grid .products li.product .wp-block-button__link {
width: 50% !important;
font-size: 13px !important;
padding: 8px 10px !important;
height: auto !important;
margin: 0 auto !important;
}
}
/* Product Images */
.zevco-custom-shop-grid .products li.product a img, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-image img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 15px;
background-color: #f7f7f7 !important;
/* light grey background for product image */
}
/* Out of Stock Badge */
.out-of-stock-badge {
background-color: #777777 !important;
color: #ffffff !important;
pointer-events: none !important;
cursor: not-allowed !important;
opacity: 0.8 !important;
display: block !important;
width: 100% !important;
padding: 12px 20px !important;
text-align: center !important;
border-radius: 4px !important;
font-weight: 500 !important; line-height: 1.2 !important;
}
/* Typography: Title */
.zevco-custom-shop-grid .products li.product .woocommerce-loop-product__title, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-title {
font-size: 16px !important;
font-weight: 500 !important; line-height: 1.2 !important;
line-height: 1.4 !important;
color: var(--wp--preset--color--foreground) !important;
margin: 0 0 10px 0 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Remove default margins/paddings from any auto-generated paragraph tags around loop items */
.zevco-custom-shop-grid .products li.product p {
margin: 0 !important;
padding: 0 !important;
}
/* Typography: Price */
.zevco-custom-shop-grid .products li.product .price, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-price {
font-size: 24px !important;
font-weight: 700 !important;
color: var(--wp--preset--color--foreground) !important;
margin: 0 0 15px 0 !important;
flex-grow: 1;
/* Pushes buttons to bottom */
}
.zevco-custom-shop-grid .products li.product .price ins {
font-size: 1em !important; /* <-- CHANGE THIS NUMBER */
font-weight: 700 !important;
text-decoration: none !important;
}
/* OLD / STRIKED PRICE — KEEP IT SMALLER */
.zevco-custom-shop-grid .products li.product .price del {
font-size: 0.75em !important; /* <-- CHANGE THIS NUMBER */
font-weight: 500 !important; line-height: 1.2 !important;
}
/* Buttons */
.zevco-custom-shop-grid .products li.product .button, .zevco-custom-shop-grid .products li.product .wp-block-button__link {
display: block !important;
width: 86% !important;
padding: 12px 20px !important;
margin: 5px 0 0 0 !important;
border-radius: 4px !important;
text-align: center !important;
font-size: 16px !important;
font-weight: 500 !important; line-height: 1.2 !important;
line-height: 1.5 !important;
text-decoration: none !important;
transition: opacity 0.3s ease !important;
border: none !important;
}
.zevco-custom-shop-grid .products li.product .button.whatsapp-btn {
background-color: #5b5a5a !important;
color: #fff !important;
}
.zevco-custom-shop-grid .products li.product .button.add_to_cart_button,
.zevco-custom-shop-grid .products li.product .button.product_type_simple,
.zevco-custom-shop-grid .products li.product .button.product_type_variable {
background-color: var(--wp--preset--color--primary) !important;
color: #fff !important;
}
.zevco-custom-shop-grid .products li.product .button:hover {
opacity: 0.9 !important;
}
/* ==========================================================================
Zevco Advanced WooCommerce Layout & Alignments
========================================================================== */
/* Equal Height Cards - Push buttons to bottom */
.zevco-custom-shop-grid .products li.product .price, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-price {
flex-grow: 0 !important;
/* Reset from previous */
margin-bottom: 20px !important;
}
.zevco-custom-shop-grid .products li.product .button.whatsapp-btn {
margin-top: auto !important;
/* Pushes both buttons to bottom */
}
.zevco-custom-shop-grid .products li.product .button, .zevco-custom-shop-grid .products li.product .wp-block-button__link {
margin-bottom: 10px !important;
}
/* Strict Hover Overrides for Buttons */
.button,
.wp-block-button__link,
.add_to_cart_button,
.single_add_to_cart_button,
.whatsapp-btn {
transform: none !important;
scale: 1 !important;
transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
.button:hover,
.wp-block-button__link:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.whatsapp-btn:hover {
transform: none !important;
scale: 1 !important;
}
/* Specific Button Colors */
.button.add_to_cart_button,
.button.single_add_to_cart_button {
background-color: var(--wp--preset--color--primary) !important;
color: #fff !important;
}
.button.add_to_cart_button:hover,
.button.single_add_to_cart_button:hover {
background-color: #333333 !important;
/* Lighter blue */
}
.button.whatsapp-btn {
background-color: #5b5a5a !important;
color: #fff !important;
}
.button.whatsapp-btn:hover {
background-color: var(--wp--preset--color--primary) !important;
/* Slightly darker/lighter green */
}
/* Single Product 50/50 Layout */
.single-product-camera .wp-block-columns {
gap: 40px !important;
}
@media (min-width: 768px) {
.single-product-camera .wp-block-column {
flex-basis: 50% !important;
}
}
/* Single Product Actions (Quantity + Add to Cart + WhatsApp) */
.zevco-single-product-actions {
margin-bottom: 30px;
}
.zevco-single-product-actions form.cart {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.zevco-single-product-actions form.cart .quantity {
display: flex;
align-items: center;
}
.zevco-single-product-actions form.cart .quantity input.qty {
width: 60px;
height: 44px;
text-align: center;
border: 1px solid #ddd;
border-radius: 4px;
}
.zevco-single-product-actions form.cart .button {
flex-grow: 1;
height: 44px;
margin: 0 !important;
}
.zevco-whatsapp-single-wrapper .whatsapp-btn {
width: 100% !important;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px !important;
}
/* Single Product Meta Line */
.zevco-product-meta {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eeeeee;
font-size: 15px;
color: #555555;
}
.zevco-product-meta .meta-line {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.zevco-product-meta .meta-line strong {
color: #333333;
}
.zevco-product-meta .brand-line {
justify-content: flex-start;
}
/* Related Products Grid (matches shop grid) */
/* Sale Badge overlay */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
position: absolute !important;
top: 12px !important;
right: 12px !important;
left: auto !important;
z-index: 10 !important;
background-color: var(--wp--preset--color--primary) !important;
color: #ffffff !important;
border-radius: 4px !important;
padding: 4px 8px !important;
font-size: 14px !important;
font-weight: bold !important;
margin: 0 !important;
}
/* Strict Hover Overrides */
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.whatsapp-btn,
.out-of-stock-badge {
transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
width: 100% !important;
transform: none !important;
scale: 1 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce div.product form.cart .button:hover,
.whatsapp-btn:hover {
transform: none !important;
scale: 1 !important;
width: 100% !important;
}
.summary .product_title {
font-size: 34px;
font-weight: 700;
margin-bottom: 15px;
}
.summary .price {
font-size: 28px;
font-weight: 600;
margin-bottom: 25px;
}
.single_variation_wrap,
.cart {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.quantity {
margin: 0 !important;
}
.single_add_to_cart_button {
margin: 0 !important;
}
.single-whatsapp-btn {
display: block;
width: 100%;
margin-top: 20px;
text-align: center;
}
.wc-tabs-wrapper {
margin-top: 60px;
}
.wc-tabs li a {
font-size: 18px;
}
.woocommerce-Tabs-panel {
font-size: 16px;
line-height: 1.8;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 18px !important;
font-weight: 700 !important;
padding-right: 10px;
}
.woocommerce ul.products li.product .price {
font-size: 16px !important;
font-weight: 600 !important;
color: #333 !important; line-height: 1.2 !important;
}
/* FORCE HIDE READ MORE BUTTONS AND REPLACE WITH BADGE */
.product .read_more,
.product a.button.product_type_external,
.product a.button.product_type_simple.read_more {
display: none !important;
}
/* Ensure the Out of Stock Badge is the only thing visible */
.product .out-of-stock-badge {
display: block !important;
background-color: #777777 !important;
color: #ffffff !important;
text-align: center !important;
padding: 12px 20px !important;
margin-top: 10px !important;
pointer-events: none !important;
cursor: not-allowed !important;
width: 104.5% !important;
box-sizing: border-box !important;
}
/* out of stock */
.out-of-stock-badge {
display: inline-block;
background-color: #f8f8f8;
/* Light grey background */
color: #777;
/* Grey text */
padding: 5px 10px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 1px solid #ddd;
border-radius: 4px;
margin-top: 5px;
}
/* Optional: Ensure the button and badge don't overlap */
.woocommerce ul.products li.product .out-of-stock-badge {
display: block;
text-align: center;
}
/*single product page css*/
/* Align buttons and standardize size */
.single-whatsapp-btn,
.single_add_to_cart_button {
display: block !important;
width: 100% !important;
text-align: center;
margin-bottom: 10px;
padding: 15px !important;
}
/* Force layout to 50/50 split */
.zevco-50-50-layout {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.zevco-product-gallery-column {
flex: 1 1 45%;
}
.zevco-product-summary-column {
flex: 1 1 45%;
min-width: 0; /* prevents flex item overflowing its track — lets marquee wrap's own overflow:hidden work */
}
/* CHANGE 3: added — there was no mobile breakpoint at all, so the gallery and
summary columns would squeeze side-by-side at ~45% width on phones instead
of stacking. This stacks them full-width below 768px. */
@media (max-width: 768px) {
.zevco-50-50-layout {
flex-direction: column;
gap: 24px;
}
.zevco-product-gallery-column,
.zevco-product-summary-column {
flex: 1 1 100%;
width: 100%;
}
.zevco-classic-single-product {
padding: 24px 16px !important;
/* overrides the inline style in single-product.php on mobile */
}
}
/* ==========================================================================
Single Product Page - Layout Order
Title -> Price -> WhatsApp -> Size -> Qty + Add to Cart -> Buy Now -> Meta
========================================================================== */
/* Price + discount */
.summary .price del {
color: #999999;
font-weight: 400;
font-size: 0.7em;
margin-right: 8px;
}
.summary .price ins {
text-decoration: none;
color: var(--wp--preset--color--primary);
}
/* WhatsApp button sits on its own row under the price */
.summary .whatsapp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 44px;
border-radius: 4px;
margin-bottom: 20px;
}
/* Size (variations) table - only present on variable products */
.summary table.variations {
width: 100%;
margin-bottom: 15px;
}
.summary table.variations tr {
display: block;
margin-bottom: 10px;
}
.summary table.variations th.label {
display: block;
font-weight: 600;
margin-bottom: 6px;
text-align: left;
}
.summary table.variations td.value {
display: block;
}
.summary table.variations select {
width: 100%;
max-width: 260px;
height: 44px;
padding: 0 12px;
border: 1px solid var(--wp--preset--color--border-color);
border-radius: 5px;
background-color: var(--wp--preset--color--background);
}
.summary a.reset_variations {
display: inline-block;
margin-top: auto;
font-size: 13px;
}
/* Quantity + Add to Cart row, with Buy Now wrapping to its own full-width row below */
.summary form.cart {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 12px;
}
.summary .quantity {
display: flex;
align-items: stretch;
margin: 0;
border: 1px solid var(--wp--preset--color--border-color);
border-radius: 5px;
overflow: hidden;
}
.summary .zevco-qty-btn {
width: 40px;
height: 44px;
border: none;
background-color: var(--wp--preset--color--background);
color: var(--wp--preset--color--foreground);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.summary .zevco-qty-btn:hover {
background-color: var(--wp--preset--color--border-color);
}
.summary .quantity input.qty {
width: 44px;
height: 44px;
border: none;
border-left: 1px solid var(--wp--preset--color--border-color);
border-right: 1px solid var(--wp--preset--color--border-color);
text-align: center;
-moz-appearance: textfield;
}
.summary .quantity input.qty::-webkit-outer-spin-button,
.summary .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.summary .single_add_to_cart_button {
flex: 1 1 auto;
height: 44px;
margin: 0;
}
/* Meta: SKU on its own line, Category below it */
.zevco-product-meta .meta-line {
justify-content: flex-start;
gap: 6px;
}
/* ==========================================================================
Single Product Block Template — sizing/spacing per requested layout
Title (1 line) -> Price (bold) -> WhatsApp (small) -> Add to Cart ->
Buy Now -> SKU/Category -> Brand
========================================================================== */
/* Title — force to a single line, truncate if too long */
.single-product-camera .wp-block-post-title {
font-size: 24px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
}
/* Price — bold, small gap above/below */
.single-product-camera .wp-block-woocommerce-product-price {
font-weight: 700;
font-size: 20px;
margin-top: 4px;
margin-bottom: 16px;
}
/* WhatsApp button — small, not full width, left-aligned */
.single-product-camera .zevco-whatsapp-block {
margin-bottom: 16px;
}
.single-product-camera .zevco-whatsapp-block .whatsapp-btn {
width: auto !important;
display: inline-flex !important;
padding: 8px 20px !important;
height: auto !important;
font-size: 14px !important;
}
/* Meta block — SKU/Category row, then Brand on its own line below */
.single-product-camera .zevco-single-meta {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--wp--preset--color--border-color);
font-size: 14px;
}
.single-product-camera .zevco-single-meta>.wp-block-group {
gap: 16px;
margin-bottom: 8px;
}
/* CHANGE 6: consistent spacing between each section of the single product page
(Title -> Price -> WhatsApp -> Add to Cart block -> Meta -> Brand) */
.single-product-camera .zevco-add-to-cart-block {
margin-bottom: 20px;
}
/* CHANGE 7: fix the qty stepper stacking vertically instead of sitting inline
next to the input — the earlier stepper CSS was scoped to ".summary .quantity"
which doesn't exist inside this shortcode block, so it never applied here */
.single-product-camera .zevco-add-to-cart-block .zevco-qty-btn {
width: 36px;
height: 40px;
border: none;
background: var(--wp--preset--color--background);
cursor: pointer;
font-size: 16px;
}
.single-product-camera .zevco-add-to-cart-block .quantity input.qty {
width: 44px;
height: 40px;
text-align: center;
border: none;
border-left: 1px solid var(--wp--preset--color--border-color);
border-right: 1px solid var(--wp--preset--color--border-color);
}
/* CHANGE 8: tidy up each grouped-product row (name/price + its stepper) with
consistent padding and a divider line, instead of them running together */
.single-product-camera .zevco-add-to-cart-block table.group_table {
width: 100%;
border-collapse: collapse;
margin-bottom: 16px;
}
.single-product-camera .zevco-add-to-cart-block table.group_table td {
padding: 5px 0 0 0;
vertical-align: middle;
border-bottom: 1px solid var(--wp--preset--color--border-color);
}
.single-product-camera .zevco-add-to-cart-block table.group_table td.woocommerce-grouped-product-list-item__quantity {
width: 110px;
}
.single-product-camera .zevco-add-to-cart-block .zevco-buy-now-button {
padding-bottom: 15px !important;
border-radius: 5px !important;
}
.single-product-camera .zevco-add-to-cart-block form.cart {
width: 100% !important;
}
.single-product-camera .zevco-add-to-cart-block {
width: 100% !important;
}
/* Make Add to Cart bigger */
.single-product-camera .zevco-add-to-cart-block .single_add_to_cart_button {
height: 55px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* Quantity stepper */
.single-product-camera .zevco-add-to-cart-block .quantity {
height: 48px !important;
display: flex !important;
align-items: center !important;
}
/* Minus / Plus buttons */
.single-product-camera .zevco-add-to-cart-block .zevco-qty-btn {
width: 42px !important;
height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 20px !important;
line-height: 1 !important;
}
/* Quantity number fix */
.single-product-camera .zevco-add-to-cart-block input.qty {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
color: #000 !important;
background: #fff !important;
font-size: 16px !important;
font-weight: 600 !important;
width: 50px !important;
height: 48px !important;
text-align: center !important;
}
/* remove browser weird input styles */
.single-product-camera .zevco-add-to-cart-block input.qty::-webkit-inner-spin-button,
.single-product-camera .zevco-add-to-cart-block input.qty::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Keep row clean and wrap for 2 rows */
.single-product-camera .zevco-add-to-cart-block form.cart,
.zevco-50-50-layout form.cart {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
}
.single-product-camera .zevco-add-to-cart-block form.cart .quantity,
.zevco-50-50-layout form.cart .quantity {
flex: 0 0 auto;
}
.single-product-camera .zevco-add-to-cart-block form.cart .whatsapp-btn,
.zevco-50-50-layout form.cart .whatsapp-btn {
flex: 1;
margin: 0 !important;
}
.single-product-camera .zevco-add-to-cart-block form.cart .single_add_to_cart_button,
.single-product-camera .zevco-add-to-cart-block form.cart .zevco-buy-now-button,
.zevco-50-50-layout form.cart .single_add_to_cart_button,
.zevco-50-50-layout form.cart .zevco-buy-now-button {
flex: 1 1 45% !important;
margin-top: 10px !important;
min-width: 0 !important;
/* allow flex shrink */
}
/* ==========================================================================
MOBILE FIX — Classic Single Product Page
(woocommerce/single-product.php + content-single-product.php,
.zevco-50-50-layout / .zevco-product-summary-column)
Requested order on phones:
Image -> Title (center) -> Price (center) -> Stepper + WhatsApp (one row,
compact) -> Add to Cart + Buy Now (sticky footer bar) -> Meta
Desktop is untouched — this whole block only fires under 768px.
========================================================================== */
/* --- Sticky header (single product page, both desktop and mobile) -------- */
.single-product .wp-block-header.header-transparent {
position: sticky;
top: 0;
z-index: 200;
background-color: var(--wp--preset--color--background, #fff);
}
@media (max-width: 768px) {
/* --- Reorder the summary column with flexbox -------------------------- */
.zevco-product-summary-column .summary.entry-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
}
/* Title — centered, own row */
.summary .product_title {
order: 1;
flex: 0 0 100%;
text-align: center;
font-size: 22px;
margin-bottom: 8px;
}
/* Price — centered, own row */
.summary .price {
order: 2;
flex: 0 0 100%;
text-align: center;
justify-content: center;
font-size: 20px;
margin-bottom: 14px;
}
/* Stepper (inside form.cart) + WhatsApp button share one row.
form.cart still technically holds the Add to Cart / Buy Now buttons
too, but those get pulled out of the flow below via position:fixed,
so all that's left visible here is the quantity stepper. */
.summary form.cart,
.single-product-camera .zevco-add-to-cart-block form.cart {
order: 3;
flex: 0 0 100% !important;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 0;
}
.summary .whatsapp-btn,
.single-product-camera .zevco-add-to-cart-block .whatsapp-btn {
width: auto !important;
flex: 1;
height: 40px !important;
padding: 0 18px !important;
font-size: 13px !important;
margin-bottom: 0;
}
/* Compact stepper to match the smaller WhatsApp button next to it */
.summary .quantity {
height: 40px;
}
.summary .zevco-qty-btn {
width: 32px;
height: 40px;
font-size: 15px;
}
.summary .quantity input.qty {
width: 36px;
height: 40px;
font-size: 14px;
}
/* Meta (SKU / category) — own row, after everything else */
.summary .product_meta {
order: 5;
flex: 0 0 100%;
text-align: center;
margin-top: 16px;
}
/* NOTE: the old sticky footer bar that used to pin the REAL Add to
Cart / Buy Now buttons here via position:fixed has been removed.
That old hack was fighting with the new row-2 layout (buttons
never rendered inline because they were force-pinned to the
screen). Mobile stickiness is now handled separately by the
JS-built .zevco-sticky-atc-bar (see custom.js + the rules below). */
.summary .single_add_to_cart_button,
.summary .zevco-buy-now-button,
.single-product-camera .zevco-add-to-cart-block form.cart .single_add_to_cart_button,
.single-product-camera .zevco-add-to-cart-block form.cart .zevco-buy-now-button {
/* Hide visually on mobile to avoid duplication with the smart sticky bar */
display: none !important;
}
}
/** ==========================================================
* Zevco Custom: Single Product Page Layout Fixes (compiled from
* sass/blocks/_woocommerce.scss — this theme has no build step, so
* these rules must live here in style.css to actually take effect)
* - Stepper + Inquiry button aligned in one row, equal height
* - Add to Cart (light grey) + Buy Now (blue) aligned in one row
* - Mobile sticky Add to Cart / Buy Now bar (JS-driven, see custom.js)
* ========================================================== */
/* Row 1: Quantity stepper + Inquiry (WhatsApp) button, equal height, aligned */
.woocommerce div.product form.cart .zevco-qty-inquiry-row {
display: flex;
align-items: stretch;
flex-wrap: nowrap !important;
gap: 12px;
margin: 0 0 14px;
width: 100%;
max-width: 292px;
}
.woocommerce div.product form.cart .zevco-qty-inquiry-row .quantity {
display: flex;
align-items: stretch;
flex: 0 0 auto;
margin: 0;
}
.woocommerce div.product form.cart .zevco-qty-inquiry-row .quantity .zevco-qty-btn {
flex: 0 0 44px;
width: 44px;
height: 44px !important;
min-height: 44px !important;
display: flex;
align-items: center;
justify-content: center;
background: var(--wp--preset--color--peach-puff);
border: 1px solid var(--wp--preset--color--border-color);
color: var(--wp--preset--color--body-text);
font-size: 18px;
line-height: 1;
padding: 0;
margin: 0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease;
}
.woocommerce div.product form.cart .zevco-qty-inquiry-row .quantity .zevco-qty-btn:first-child {
border-radius: 5px 0 0 5px;
margin-left: 0 !important;
padding-left: 0 !important;
}
.woocommerce div.product form.cart .zevco-qty-inquiry-row .quantity .zevco-qty-btn:last-child {
border-radius: 0 5px 5px 0;
}
.woocommerce div.product form.cart .zevco-qty-inquiry-row .quantity .zevco-qty-btn:hover,
.woocommerce div.product form.cart .zevco-qty-inquiry-row .quantity .zevco-qty-btn:focus {
background: var(--wp--preset--color--border-color);
color: var(--wp--preset--color--body-text);
}
.woocommerce div.product form.cart .zevco-qty-inquiry-row .quantity input.qty {
width: 52px;
height: 44px !important;
min-height: 44px !important;
text-align: center;
border: 1px solid var(--wp--preset--color--border-color);
border-left: none;
border-right: none;
padding: 0 8px;
margin: 0;
box-sizing: border-box;
-moz-appearance: textfield;
}
.woocommerce div.product form.cart .zevco-qty-inquiry-row .quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .zevco-qty-inquiry-row .quantity input.qty::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.woocommerce div.product form.cart .zevco-qty-inquiry-row p {
margin: 0;
padding: 0;
padding-top: 8px;
}
.woocommerce div.product form.cart .zevco-qty-inquiry-row a.whatsapp-btn {
flex: 0 0 140px !important;
width: 140px !important;
height: 44px !important;
min-height: 44px !important;
display: flex !important;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 !important;
padding: 0 !important;
top: 0 !important;
box-sizing: border-box;
white-space: nowrap;
position: relative !important;
}
/* Row 2: Add to Cart (light grey) + Buy Now (blue), equal padding, centered text */
.woocommerce div.product form.cart .zevco-cart-buynow-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
max-width: 292px !important;
box-sizing: border-box !important;
}
.woocommerce div.product form.cart .zevco-cart-buynow-row>p:has(button.zevco-buy-now-button) {
display: contents !important;
}
.woocommerce div.product form.cart .zevco-cart-buynow-row>p:empty {
display: none !important;
}
.woocommerce div.product form.cart .zevco-cart-buynow-row button.single_add_to_cart_button,
.woocommerce div.product form.cart .zevco-cart-buynow-row button.zevco-buy-now-button,
.woocommerce div.product form.cart .zevco-cart-buynow-row button.wp-element-button {
width: 100% !important;
/* fills its grid column, not the whole row */
max-width: 100% !important;
min-width: 0 !important;
height: 44px !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
margin: 0 !important;
padding: 0 6px !important;
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: none !important;
/* cancel any leftover flex rule from elsewhere */
}
.woocommerce div.product form.cart .zevco-cart-buynow-row button.single_add_to_cart_button,
.woocommerce div.product form.cart .zevco-cart-buynow-row button.single_add_to_cart_button.button.alt {
background-color: #e0e0e0 !important;
border: 1px solid #cccccc !important;
color: #333333 !important;
}
.woocommerce div.product form.cart .zevco-cart-buynow-row button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .zevco-cart-buynow-row button.single_add_to_cart_button:focus {
background-color: #cccccc !important;
color: #333333 !important;
}
.woocommerce div.product form.cart .zevco-cart-buynow-row button.zevco-buy-now-button {
background-color: var(--wp--preset--color--primary) !important;
border: 1px solid var(--wp--preset--color--button-color) !important;
color: var(--wp--preset--color--light) !important;
}
.woocommerce div.product form.cart .zevco-cart-buynow-row button.zevco-buy-now-button:hover,
.woocommerce div.product form.cart .zevco-cart-buynow-row button.zevco-buy-now-button:focus {
background-color: transparent !important;
color: var(--wp--preset--color--button-color) !important;
}
@media screen and (max-width: 400px) {
.woocommerce div.product form.cart .zevco-cart-buynow-row button.single_add_to_cart_button,
.woocommerce div.product form.cart .zevco-cart-buynow-row button.zevco-buy-now-button {
font-size: 14px;
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
}
/* Hide the static Add to Cart / Buy Now buttons on mobile since we
use the JS-built .zevco-sticky-atc-bar instead. */
@media screen and (max-width: 768px) {
.woocommerce div.product form.cart .zevco-cart-buynow-row {
display: none !important;
}
}
/* Mobile sticky Add to Cart / Buy Now bar (built by custom.js) */
.zevco-sticky-atc-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
display: none;
gap: 10px;
background: var(--wp--preset--color--background);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
transform: translateY(100%);
transition: transform 0.35s ease;
}
.zevco-sticky-atc-bar button {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-radius: 5px;
border: none;
font-size: 15px;
font-weight: var(--wp--custom--font-weight--medium);
padding: 12px 16px;
cursor: pointer;
white-space: nowrap;
}
.zevco-sticky-atc-bar .zevco-sticky-add-to-cart {
background-color: #e0e0e0;
color: #333333;
}
.zevco-sticky-atc-bar .zevco-sticky-buy-now {
background-color: var(--wp--preset--color--button-color);
color: var(--wp--preset--color--light);
}
.zevco-sticky-atc-bar.is-visible {
transform: translateY(0);
}
@media screen and (max-width: 768px) {
.zevco-sticky-atc-bar {
display: flex;
}
}
.woocommerce ul.products li.product>p {
display: none !important;
}
/* Custom Header Search */
.zevco-header-search {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 10px;
}
.zevco-search-toggle {
background: url(assets/images/search.svg) no-repeat !important;
background-size: 20px !important;
background-position: center !important;
padding: 6px !important;
width: 42px !important;
height: 42px !important;
border: none !important;
cursor: pointer !important;
opacity: 1 !important;
color: transparent !important;
outline: none !important;
transition: opacity 0.25s ease !important;
}
.zevco-search-toggle:hover {
opacity: 0.8 !important;
}
.zevco-search-dropdown {
position: absolute;
top: 100%;
right: 0;
background: #ffffff;
border: 1px solid #cbd5e1;
padding: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
border-radius: 8px;
z-index: 10000;
display: none;
width: 250px;
margin-top: 10px;
margin-left: 35%;
}
.zevco-header-search.is-active .zevco-search-dropdown {
display: block;
}
.zevco-search-dropdown form {
display: flex;
gap: 8px;
margin: 0;
}
.zevco-search-dropdown input[type="search"] {
flex: 1;
padding: 8px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 14px;
color: #333;
outline: none;
background: #fff;
}
.zevco-search-dropdown button[type="submit"] {
background: var(--wp--preset--color--primary, #000);
color: #ffffff;
border: none;
padding: 8px 14px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
font-weight: 500;
transition: opacity 0.2s ease;
}
.zevco-search-dropdown button[type="submit"]:hover {
opacity: 0.9;
}
/* PC Sticky Header Fixed Lock */
@media screen and (min-width: 769px) {
.wp-header-page-top,
#page-top {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
header,
.site-header,
.wp-block-template-part>header,
.wp-block-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
margin-top: 0 !important;
z-index: 9999 !important;
background: var(--wp--preset--color--background, #fff) !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
box-sizing: border-box !important;
}
/* Offset for admin bar when logged in */
.admin-bar header,
.admin-bar .site-header,
.admin-bar .wp-block-template-part>header,
.admin-bar .wp-block-header {
top: 32px !important;
}
/* Offset page content so it doesn't hide behind fixed header */
body {
padding-top: 90px !important;
}
}
/* Mobile Responsive Header Layout (Search -> Cart -> Burger) */
@media screen and (max-width: 768px) {
/* Restructure inner header container wrapper to place elements in order */
.wp-block-header>.wp-block-group.alignfull,
.wp-block-header>.wp-block-group {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
}
/* Logo sits on the far left */
.wp-block-site-logo-wrapper {
order: 1 !important;
margin-right: auto !important;
}
/* Header right (contains Search and Cart) sits next */
.wp-block-header-right {
order: 2 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 10px 0 0 !important;
padding: 0 !important;
}
/* Navigation (Burger Menu) sits on the far right */
.wp-block-navigation {
order: 3 !important;
margin: 0 !important;
}
/* Control search & cart icon sorting order inside header right */
.zevco-header-search {
order: 1 !important;
margin: 0 !important;
}
.is-style-custom-cart,
.wc-block-mini-cart.is-style-custom-cart {
order: 2 !important;
margin: 0 !important;
}
/* Hide unnecessary elements on mobile header */
.wp-block-woocommerce-customer-account,
.wp-block-woocommerce-customer-account.is-style-custom-account,
.wp-header-phone,
.wp-block-buttons {
display: none !important;
}
}
/* Custom Mobile Fixes */
@media (max-width: 768px) {
/* Fix price size on mobile */
.woocommerce ul.products li.product .price,
.zevco-custom-shop-grid .products li.product .price, .zevco-custom-shop-grid .products li.product .wc-block-grid__product-price,
.wc-block-grid__product-price,
.wc-block-components-product-price {
font-size: 14px !important;
}
/* Make add to cart button a little smaller on mobile */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple,
.woocommerce ul.products li.product .button.product_type_variable,
.zevco-custom-shop-grid .products li.product .button.add_to_cart_button {
padding: 8px 12px !important;
font-size: 13px !important;
min-height: auto !important;
}
/* Make out of stock button the same size as add to cart button */
.woocommerce ul.products li.product .out-of-stock-badge,
.product .out-of-stock-badge {
padding: 8px 12px !important;
font-size: 13px !important;
width: auto !important;
min-height: auto !important;
margin-top: 10px !important;
display: inline-block !important;
box-sizing: border-box !important;
}
/* Add space at the bottom of the page to prevent the sticky buy bar from obscuring the last products */
body.single-product {
padding-bottom: 50px !important;
}
}
/* --- Task 1: Left side image to be a little big --- */
@media screen and (min-width: 769px) {
.single-product-camera .wp-block-columns.is-stacked-on-mobile>.wp-block-column:first-child {
flex-basis: 55% !important;
}
.single-product-camera .wp-block-columns.is-stacked-on-mobile>.wp-block-column:nth-child(2) {
flex-basis: 41% !important;
}
}
/* --- Task 2: Make title and price big --- */
.single-product-camera .wp-block-woocommerce-product-title h1,
.single-product-camera .wp-block-woocommerce-product-title h2,
.single-product-camera .wp-block-post-title {
font-size: 32px !important;
font-weight: 500 !important; line-height: 1.2 !important;
margin-bottom: 10px;
}
.single-product-camera .wp-block-woocommerce-product-price .price {
font-size: 28px !important;
font-weight: 600 !important;
color: #1a73e8 !important;
/* blue */
}
.single-product-camera .wp-block-woocommerce-product-price .price del {
font-size: 18px !important;
color: #777 !important;
}
/* --- Task 3: Add availability after the price (CSS part) --- */
.zevco-availability {
font-size: 14px;
margin-top: 10px;
margin-bottom: 20px;
color: #333;
}
.zevco-availability .stock.in-stock {
color: #1a73e8;
}
/* --- Task 4: Fix buy now button text to be in center --- */
button.zevco-buy-now-button {
text-align: center !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
line-height: 0 !important;
}
.single-product-camera .single-product-main-column .wp-block-woocommerce-product-title .wp-block-post-title {
padding-top: 15px;
}
/* --- Task 7: Desktop header icons ordering --- */
@media (min-width: 769px) {
.wp-block-header-right {
display: flex !important;
align-items: center !important;
}
.wp-block-header-right .zevco-header-search {
order: 1 !important;
}
.wp-block-header-right .is-style-custom-account,
.wp-block-header-right .wp-block-woocommerce-customer-account {
order: 2 !important;
}
.wp-block-header-right .is-style-custom-cart,
.wp-block-header-right .wc-block-mini-cart {
order: 3 !important;
}
.wp-block-header-right .wp-header-phone {
order: 4 !important;
}
.wp-block-header-right .wp-block-buttons {
order: 5 !important;
}
}
.
/* ==========================================================================
STICKY FOOTER — footer always at the very bottom of the viewport
========================================================================== */
html {
height: 100%;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Make the site blocks wrapper fill the full height */
body > .wp-site-blocks,
.wp-site-blocks {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Push footer to the very bottom */
.wp-site-blocks > footer,
footer.wp-block-template-part {
margin-top: auto !important;
}
/* Camera / DVR page — make the stretch */
.page-template-default main.wp-block-group,
main.wp-block-group {
flex: 1 0 auto;
}
/* DVR and Camera Pages Custom Wrapper */
.zevco-dvr-wrapper {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
.zevco-dvr-wrapper.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.zevco-dvr-wrapper .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: none !important;
}
/* Strip inner post-content padding so it exactly matches front-page */
.zevco-dvr-wrapper .wp-block-post-content {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* FORCE HIDE SPLASH DOTS - Added to ensure browser cache doesn't show them */
.wp-block-header::before,
.error404 main:before,
.wp-block-header-media .wp-hero-image-wrapper::before,
.wp-block-float-svg,
img[src*="dots-bar.svg"] {
display: none !important;
background-image: none !important;
background: none !important;
}
/* Make Category and Brand look like normal text — no clickable links */
.single-product-camera .wp-block-woocommerce-product-meta .wp-block-post-terms a {
pointer-events: none !important;
cursor: default !important;
text-decoration: none !important;
color: inherit !important;
}
/* Remove hover/link effect */
.single-product-camera .wp-block-woocommerce-product-meta .wp-block-post-terms a:hover,
.single-product-camera .wp-block-woocommerce-product-meta .wp-block-post-terms a:focus {
color: inherit !important;
text-decoration: none !important;
}
/* --- My Account text: hide ONLY on desktop --- */
@media screen and (min-width: 769px) {
.wp-block-navigation-item:has(> a[href*="my-account"]) {
display: none !important;
}
}
/* Keep My Account available on mobile */
@media screen and (max-width: 768px) {
.wp-block-navigation-item:has(> a[href*="my-account"]) {
display: list-item !important;
}
}
/* Zevco Grid Consistency */
.woocommerce ul.products, .woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 90px) / 4)), 1fr)) !important;
gap: 30px !important;
}
.woocommerce ul.products::before, .woocommerce ul.products::after {
display: none !important;
}
.woocommerce ul.products li.product {
width: 100% !important;
margin: 0 !important;
clear: none !important;
}
@media (max-width: 768px) {
.woocommerce ul.products, .woocommerce-page ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
}
/* Zevco Button Colors Overrides */
.woocommerce button.button.alt,
.woocommerce button.button,
.woocommerce-page button.button,
.woocommerce-page button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page input.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.zevco-cart-buynow-row button.single_add_to_cart_button,
.zevco-cart-buynow-row button.zevco-buy-now-button,
.zevco-sticky-atc-bar button {
background-color: var(--wp--preset--color--secondary) !important;
border-color: var(--wp--preset--color--secondary) !important;
color: #ffffff !important;
border-radius: 4px !important;
text-transform: uppercase;
letter-spacing: 1px;
}
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.zevco-cart-buynow-row button.single_add_to_cart_button:hover,
.zevco-cart-buynow-row button.zevco-buy-now-button:hover {
background-color: var(--wp--preset--color--primary) !important;
border-color: var(--wp--preset--color--primary) !important;
}
/* Fix product grid buttons */
.woocommerce ul.products li.product .button {
margin-top: 15px;
display: block;
text-align: center;
}
/* Premium Typography Adjustments */
body {
font-family: var(--wp--preset--font-family--jost), sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .wp-block-heading {
font-family: var(--zevco-font) !important;
font-weight: 500 !important; line-height: 1.2 !important;
}
.wp-block-navigation-item__label, .woocommerce button.button, .zevco-cart-buynow-row button {
font-family: var(--wp--preset--font-family--jost), sans-serif !important;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400 !important;
}
/* Announcement Bar */
.zevco-announcement-bar {
background-color: var(--wp--preset--color--primary);
color: #ffffff;
text-align: center;
padding: 8px 15px;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: var(--wp--preset--font-family--jost);
}
.zevco-announcement-bar a {
color: #ffffff;
text-decoration: none;
}
.zevco-announcement-bar a:hover {
text-decoration: underline;
}
/* Header Layout */
.zevco-header-wrapper {
background: #ffffff;
border-bottom: 1px solid #eaeaea;
}
.zevco-header-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
max-width: 1400px;
margin: 0 auto;
}
.zevco-header-icons {
display: flex;
align-items: center;
gap: 20px;
}
.zevco-search-toggle svg {
width: 22px;
height: 22px;
color: var(--wp--preset--color--primary);
}
/* Mobile Drawer */
.zevco-desktop-hide { display: none; }
.zevco-mobile-menu-drawer {
position: fixed;
top: 0;
left: -100%;
width: 80%;
max-width: 350px;
height: 100vh;
background: #fff;
z-index: 99999;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
transition: left 0.3s ease;
overflow-y: auto;
padding: 20px;
}
.zevco-mobile-menu-drawer.is-open {
left: 0;
}
.zevco-mobile-menu-close {
text-align: right;
font-size: 24px;
cursor: pointer;
margin-bottom: 20px;
}
.zevco-mobile-nav-list {
list-style: none;
padding: 0;
margin: 0;
}
.zevco-mobile-nav-list li {
border-bottom: 1px solid #eee;
}
.zevco-mobile-nav-list a {
display: block;
padding: 15px 0;
color: var(--wp--preset--color--primary);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
}
.zevco-mobile-login {
margin-top: 30px;
}
.zevco-mobile-login a {
display: block;
padding: 12px;
background: var(--wp--preset--color--primary);
color: #fff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (max-width: 768px) {
.zevco-header-inner {
padding: 10px 15px;
}
.zevco-desktop-hide { display: block; }
.zevco-mobile-hide { display: none !important; }
.zevco-header-inner {
/* Mobile structure: Hamburger, Logo (center), Search, Cart */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.zevco-mobile-menu-toggle {
justify-self: start;
cursor: pointer;
}
.zevco-logo-container {
justify-self: center;
}
.zevco-header-icons {
justify-self: end;
gap: 15px;
}
}
/* Hero Carousel */
.zevco-hero-carousel-wrapper {
position: relative;
height: 80vh;
min-height: 500px;
width: 100%;
overflow: hidden;
}
.zevco-hero-carousel {
position: relative;
height: 100%;
width: 100%;
}
.zevco-slide {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.zevco-slide.active {
opacity: 1;
z-index: 1;
}
.zevco-slide-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.2);
}
.zevco-slide-content {
position: relative;
z-index: 2;
color: #fff;
max-width: 800px;
padding: 20px;
}
.zevco-slide-content .subtitle {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin-bottom: 10px;
font-family: var(--wp--preset--font-family--jost);
}
.zevco-slide-content h1 {
font-size: 60px;
margin: 0 0 15px;
font-family: var(--wp--preset--font-family--cormorant-garamond);
font-weight: 500;
}
.zevco-slide-content .desc {
font-size: 18px;
margin-bottom: 30px;
font-family: var(--wp--preset--font-family--jost);
}
.zevco-slide-content .btn {
display: inline-block;
background: var(--wp--preset--color--secondary);
color: #fff;
padding: 15px 30px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
transition: background 0.3s;
}
.zevco-slide-content .btn:hover {
background: var(--wp--preset--color--primary);
}
.zevco-hero-scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
color: #fff;
font-size: 24px;
text-decoration: none;
/* animation removed for gif */
}
@keyframes zevcoBounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
40% { transform: translateY(-15px) translateX(-50%); }
60% { transform: translateY(-7px) translateX(-50%); }
}
/* WhatsApp Floating Button */
.zevco-whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #25d366;
color: white;
border-radius: 50px;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-family: var(--wp--preset--font-family--jost);
font-size: 14px;
font-weight: 500;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
z-index: 9999;
transition: transform 0.3s;
}
.zevco-whatsapp-float:hover {
transform: translateY(-3px);
color: white;
}
.zevco-whatsapp-float svg {
width: 20px;
height: 20px;
}
@media (max-width: 768px) {
.zevco-slide-content h1 { font-size: 40px; }
.zevco-whatsapp-float span { display: none; }
.zevco-whatsapp-float { padding: 12px; border-radius: 50%; }
}
/* Desktop Navigation Fix */
.zevco-header-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.zevco-desktop-nav {
flex: 1;
display: flex;
justify-content: center;
}
.zevco-desktop-nav .wp-block-navigation {
display: flex !important;
flex-direction: row !important;
gap: 30px !important;
width: 100%;
justify-content: center;
}
.zevco-desktop-nav .wp-block-navigation ul {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 25px !important;
}
/* User Icon Fix */
.zevco-header-icons .is-style-custom-account svg,
.zevco-header-icons .is-style-custom-cart svg,
.zevco-search-toggle svg {
width: 24px !important;
height: 24px !important;
}
/* Category Grid Fixes */
.zevco-custom-shop-grid ul.products, .zevco-custom-shop-grid .products, .zevco-custom-shop-grid ul.wc-block-grid__products {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 30px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.zevco-custom-shop-grid ul.products li.product {
display: flex !important;
flex-direction: column !important;
text-align: center !important;
}
.zevco-custom-shop-grid ul.products li.product a img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
aspect-ratio: 1 / 1 !important;
margin-bottom: 15px !important;
}
.zevco-custom-shop-grid ul.products li.product .woocommerce-loop-product__title {
font-size: 16px !important;
font-family: var(--wp--preset--font-family--cormorant-garamond) !important;
margin-bottom: 5px !important;
}
.zevco-custom-shop-grid ul.products li.product .price {
font-size: 14px !important;
color: var(--wp--preset--color--primary) !important;
margin-bottom: 15px !important;
font-family: var(--wp--preset--font-family--jost) !important;
}
.zevco-custom-shop-grid ul.products li.product .button {
margin-top: auto !important;
width: 100% !important;
display: block !important;
}
/* --- HOME PAGE COLLECTIONS & PROMOS --- */
.zevco-section-header {
text-align: center;
margin-bottom: 40px;
}
.zevco-section-header h2 {
font-family: var(--zevco-font) !important;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
margin-bottom: 15px;
font-size: 24px;
}
.zevco-divider {
width: 60px;
height: 2px;
background-color: #a68c6b;
margin: 0 auto;
}
/* 5 Column Grid */
.zevco-collections-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
margin-bottom: 50px;
}
.zevco-collection-card {
display: block;
text-decoration: none !important;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 6px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.zevco-collection-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.zevco-collection-image {
width: 100%;
height: 220px;
background-size: cover;
background-position: center;
}
.zevco-collection-card .zevco-collection-info {
display: block;
padding: 20px 15px;
text-align: center;
background: #fff;
text-decoration: none;
}
.zevco-collection-card .zevco-collection-info h3 {
font-family: var(--zevco-font);
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 10px;
color: #333;
}
.zevco-collection-card .zevco-collection-info .explore-link {
display: block;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 13px;
color: #a68c6b;
text-transform: capitalize;
font-weight: 500;
margin-top: 5px;
}
/* Promo Banners */
.zevco-promo-banners {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.zevco-promo-banner {
border-radius: 8px;
overflow: hidden;
background-size: cover;
background-position: center;
position: relative;
min-height: 280px;
display: flex;
align-items: center;
padding: 40px;
}
.zevco-promo-banner::before {
content: '';
position: absolute;
top:0; left:0; width:100%; height:100%;
/* Gradient overlay to ensure text readability */
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 100%);
z-index: 1;
}
.zevco-promo-light::before {
background: linear-gradient(to right, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
}
.zevco-promo-content {
position: relative;
z-index: 2;
max-width: 70%;
}
.zevco-promo-subtitle {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
margin-bottom: 5px;
}
.zevco-promo-title {
font-family: var(--zevco-font);
font-size: 32px;
margin: 0 0 10px;
line-height: 1.2;
}
.zevco-promo-desc {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 16px;
margin-bottom: 25px;
}
.zevco-promo-btn {
display: inline-block;
background-color: #a68c6b;
color: #fff !important;
padding: 10px 25px;
text-decoration: none;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
}
.zevco-promo-btn-outline {
display: inline-block;
background-color: transparent;
color: #333 !important; line-height: 1.2 !important;
border: 1px solid #a68c6b;
padding: 10px 25px;
text-decoration: none;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
}
/* Dark Theme overrides */
.zevco-promo-dark { color: #fff; }
.zevco-promo-dark .zevco-promo-title { color: #d9c7a3; }
.zevco-promo-light { color: #333; }
.zevco-promo-light .zevco-promo-title { color: #111; font-family: var(--wp--preset--font-family--jost), sans-serif; text-transform: uppercase;}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.zevco-collections-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.zevco-collections-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.zevco-collection-image { height: 150px; }
.zevco-promo-banners { grid-template-columns: 1fr; }
.zevco-promo-banner { padding: 30px 20px; }
.zevco-promo-title { font-size: 26px; }
}
/* Mouse Scroll Animation */
.mouse-scroll-container {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
}
.mouse-scroll-container p {
margin-top: 10px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
letter-spacing: 5px;
color: #ffffff;
font-size: 11px;
text-transform: uppercase;
animation: nudgeText 5s ease-out infinite;
}
.mouse {
position: relative;
width: 32px;
height: 52px;
border-radius: 100px;
border: 3px solid #ffffff;
animation: nudgeMouse 5s ease-out infinite;
}
.mouse:after {
content: "";
position: absolute;
top: 5px;
left: 50%;
margin-left: -3px;
background-color: #ffffff;
width: 6px;
height: 6px;
border-radius: 100%;
animation: trackBallSlide 5s linear infinite;
}
@keyframes trackBallSlide {
0% { opacity: 1; transform: scale(1) translateY(0); }
10% { opacity: 1; transform: scale(0.9) translateY(5px); }
20% { opacity: 0; transform: scale(0.4) translateY(20px); }
21%, 29% { opacity: 0; transform: scale(0.4) translateY(0); }
30%, 100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes nudgeMouse {
0% { transform: translateY(0); }
20% { transform: translateY(8px); }
30% { transform: translateY(0); }
50% { transform: translateY(8px); }
60% { transform: translateY(0); }
80% { transform: translateY(8px); }
90% { transform: translateY(0); }
}
@keyframes nudgeText {
0% { transform: translateY(0); }
20% { transform: translateY(2px); }
30% { transform: translateY(0); }
50% { transform: translateY(2px); }
60% { transform: translateY(0); }
80% { transform: translateY(2px); }
90% { transform: translateY(0); }
}
.add_to_cart_button {
font-family: "Jost", sans-serif !important;
}
.zevco-collection-card .wp-block-cover {
margin: 0 !important;
border-radius: 0 !important;
}
.zevco-collection-card .wp-block-cover__image-background {
object-position: center !important;
}
.zevco-promo-banner .wp-block-cover__image-background {
object-position: center !important;
}
/* FIX ADD TO CART BUTTON BLEEDING AND FONT */
.zevco-custom-shop-grid ul.products li.product .button,
.woocommerce ul.products li.product .button,
.add_to_cart_button {
box-sizing: border-box !important;
width: 100% !important;
font-family: "Jost", sans-serif !important;
background-color: var(--wp--preset--color--primary) !important;
color: #fff !important;
}
/* --- NEW MOBILE DRAWER --- */
.zevco-mobile-drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #eaeaea;
}
.zevco-mobile-menu-close {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.zevco-mobile-drawer-tabs {
display: flex;
padding: 0 20px;
border-bottom: 1px solid #eaeaea;
}
.zevco-drawer-tab {
padding: 15px 10px;
margin-right: 20px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 16px;
color: #555;
cursor: pointer;
}
.zevco-drawer-tab.active {
color: #111;
font-weight: 500;
border-bottom: 2px solid #a68c6b;
}
.zevco-categories-list {
list-style: none;
padding: 10px 20px;
margin: 0;
}
.zevco-categories-list li a {
display: flex;
align-items: center;
padding: 15px 0;
text-decoration: none;
color: #111;
}
.zevco-categories-list img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 12px;
margin-right: 15px;
}
.zevco-categories-list .info {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.zevco-categories-list .title {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 16px;
margin-bottom: 3px;
}
.zevco-categories-list .count {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 13px;
color: #888;
}
.zevco-categories-list .chevron {
width: 20px;
height: 20px;
}
.zevco-drawer-divider {
height: 1px;
background-color: #eaeaea;
margin: 10px 20px;
}
.zevco-mobile-utility-list {
list-style: none;
padding: 10px 20px;
margin: 0;
}
.zevco-mobile-utility-list li a {
display: flex;
align-items: center;
padding: 12px 0;
text-decoration: none;
color: #111;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 16px;
}
.zevco-mobile-utility-list li a svg {
width: 20px;
height: 20px;
margin-right: 15px;
}
.zevco-drawer-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
margin-top: 10px;
}
.zevco-drawer-footer .socials a {
color: #555;
margin-right: 15px;
text-decoration: none;
}
.zevco-drawer-footer .socials a svg {
width: 18px;
height: 18px;
}
.zevco-drawer-footer .email {
display: flex;
align-items: center;
color: #111;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
}
.zevco-drawer-footer .email svg {
width: 18px;
height: 18px;
margin-right: 8px;
}
/* --- NEW PRODUCT CARD STYLES --- */
.zevco-custom-shop-grid ul.products li.product {
background: #fff;
border: 1px solid #eaeaea;
border-radius: 4px;
padding: 0;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
.zevco-product-image-wrap {
position: relative;
width: 100%;
}
.zevco-product-image-wrap img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4/5 !important;
object-fit: cover;
}
.zevco-product-rating-badge {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(255,255,255,0.9);
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
color: #333;
display: flex;
align-items: center;
gap: 4px;
font-weight: 500;
}
/* Style the WooCommerce default sale flash */
.zevco-custom-shop-grid ul.products li.product .onsale {
position: absolute !important;
top: 10px !important;
left: -5px !important;
right: auto !important;
background-color: #222 !important;
color: #fff !important;
padding: 5px 12px !important;
font-size: 11px !important;
font-weight: 500 !important; line-height: 1.2 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
border-radius: 0 !important;
z-index: 9;
}
.zevco-custom-shop-grid ul.products li.product .onsale::after {
content: '';
position: absolute;
top: 100%;
left: 0;
border-top: 5px solid #000;
border-left: 5px solid transparent;
}
.zevco-product-info-wrap {
padding: 15px 15px 5px;
flex-grow: 1;
}
.zevco-custom-shop-grid ul.products li.product .woocommerce-loop-product__title {
font-family: var(--wp--preset--font-family--jost), sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
color: #333 !important; line-height: 1.2 !important;
margin-bottom: 8px !important;
line-height: 1.4 !important;
}
.zevco-custom-price-block {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
margin-bottom: 5px;
}
.zevco-custom-price-block .zevco-price-current bdi {
font-size: 18px;
font-weight: 500;
color: #111;
}
.zevco-custom-price-block .zevco-price-mrp bdi {
font-size: 13px;
color: #999;
text-decoration: line-through;
}
.zevco-custom-price-block .zevco-price-off {
font-size: 13px;
color: #228b22; /* Green */
font-weight: 500;
}
/* Add to cart wrapper adjustments */
.zevco-custom-shop-grid ul.products li.product .button,
.zevco-custom-shop-grid ul.products li.product .added_to_cart {
margin: 10px 15px 15px !important;
width: calc(100% - 30px) !important;
}
/* --- CATEGORY PAGE HEADER --- */
.zevco-category-header-row {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eaeaea;
padding-bottom: 15px;
margin-bottom: 20px;
margin-top: 20px;
}
.zevco-category-title {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 24px;
font-weight: 500;
color: #555;
margin: 0;
}
.zevco-category-actions form {
margin: 0;
}
.zevco-category-actions select {
border: none;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
color: #333;
background: transparent;
cursor: pointer;
outline: none;
}
.zevco-category-tags-row {
overflow-x: auto;
margin-bottom: 30px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.zevco-category-tags-row::-webkit-scrollbar {
display: none;
}
.zevco-category-tags-list {
display: flex;
list-style: none;
padding: 0;
margin: 0;
white-space: nowrap;
gap: 10px;
}
.zevco-category-tags-list li a {
display: inline-block;
padding: 8px 16px;
border-radius: 4px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 13px;
color: #555;
background-color: #f9f8f6;
text-decoration: none;
border: 1px solid #eaeaea;
transition: all 0.3s;
}
.zevco-category-tags-list li a.active,
.zevco-category-tags-list li a:hover {
background-color: #111;
color: #fff;
border-color: #111;
}
/* --- MOBILE BOTTOM NAVIGATION --- */
.zevco-mobile-bottom-nav {
display: none;
}
@media (max-width: 768px) {
body {
padding-bottom: 70px !important;
}
.zevco-mobile-bottom-nav {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff;
border-top: 1px solid #eaeaea;
z-index: 9999;
padding: 8px 15px 15px; /* extra bottom padding for modern phones */
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
box-sizing: border-box;
}
.zevco-mobile-bottom-nav .nav-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #888;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 10px;
flex: 1;
position: relative;
}
.zevco-mobile-bottom-nav .nav-item svg {
width: 22px;
height: 22px;
margin-bottom: 4px;
color: #555;
}
.zevco-mobile-bottom-nav .nav-item.center-item {
transform: translateY(-20px);
}
.zevco-mobile-bottom-nav .center-item .center-circle {
width: 50px;
height: 50px;
background-color: var(--wp--preset--color--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
box-shadow: 0 4px 10px rgba(166, 140, 107, 0.4);
}
.zevco-mobile-bottom-nav .center-item .center-circle svg {
color: #fff;
margin-bottom: 0;
}
.zevco-mobile-bottom-nav .center-item span {
color: var(--wp--preset--color--primary);
font-weight: 500;
}
}
/* FIX COLLECTION CARD HEIGHTS */
.zevco-collections-grid {
align-items: stretch;
}
.zevco-collection-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
margin: 0 !important;
background: #fff;
border: 1px solid #eaeaea;
border-radius: 6px;
overflow: hidden;
}
.zevco-collection-card .wp-block-cover {
flex: 1 1 auto !important; /* Allow the image to take up remaining space */
min-height: 220px !important;
width: 100% !important;
}
.zevco-collection-card h3 {
margin: 0 0 5px 0 !important;
}
.zevco-collection-card .explore-link {
margin: 0 !important;
}
/* FIX PROMO BANNER HEIGHTS */
.zevco-promo-banners {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 30px !important;
align-items: stretch !important; /* Forces grid items to be same height */
}
.zevco-promo-banners > .wp-block-cover {
height: 100% !important;
min-height: 280px !important;
margin: 0 !important;
}
/* Ensure inner container is vertically centered */
.zevco-promo-banner .wp-block-cover__inner-container {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
height: 100% !important;
}
/* Force JOST on all Add to Cart buttons */
body .woocommerce ul.products li.product .button,
body .woocommerce-page ul.products li.product .button,
body .add_to_cart_button,
body .single_add_to_cart_button,
body button.button.alt,
body button.single_add_to_cart_button {
font-family: "Jost", sans-serif !important;
text-transform: uppercase !important;
font-weight: 500 !important; line-height: 1.2 !important;
letter-spacing: 1px !important;
}
/* --- CENTER LOGO & 40px HEIGHT --- */
.zevco-logo-container .custom-logo,
.zevco-logo-container img {
height: 40px !important;
max-height: 40px !important;
width: auto !important;
object-fit: contain;
}
/* Mobile Centering */
@media (max-width: 768px) {
.zevco-header-inner {
position: relative !important;
justify-content: space-between !important;
}
.zevco-logo-container {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
/* --- PREMIUM AUTH BOX (LEAD CAPTURE) --- */
.zevco-premium-auth-box {
display: flex;
max-width: 800px;
margin: 0 auto 40px;
background: #d9c7a3; /* Zevco gold/beige */
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.zevco-auth-left {
flex: 1;
padding: 40px 30px;
color: #fff;
text-align: center;
}
.zevco-auth-logo {
font-family: var(--zevco-font);
font-size: 32px;
margin-bottom: 20px;
font-weight: 500;
}
.zevco-auth-left h3 {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 20px;
font-weight: 600;
margin-bottom: 40px;
}
.zevco-auth-features {
display: flex;
justify-content: space-between;
gap: 15px;
}
.zevco-feature-item {
background: rgba(255, 255, 255, 0.15);
padding: 15px 10px;
border-radius: 8px;
flex: 1;
}
.zevco-feature-item .icon {
font-size: 24px;
margin-bottom: 10px;
display: block;
}
.zevco-feature-item h4 {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 13px;
font-weight: 600;
margin-bottom: 5px;
color: #fff;
}
.zevco-feature-item p {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 11px;
line-height: 1.4;
margin: 0;
color: rgba(255,255,255,0.9);
}
.zevco-mobile-dots {
display: none; /* Only show on mobile */
}
/* Right Side */
.zevco-auth-right {
flex: 1;
background: #fff;
padding: 40px 30px;
margin: 15px;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
}
.zevco-auth-right h2 {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 22px;
font-weight: 700;
color: #111;
text-align: center;
margin-bottom: 30px;
line-height: 1.3;
}
.zevco-phone-input-wrapper {
display: flex;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
margin-bottom: 15px;
}
.flag-prefix {
display: flex;
align-items: center;
padding: 0 15px;
background: #f9f9f9;
border-right: 1px solid #ddd;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
color: #333;
}
.flag-prefix img {
width: 20px;
margin-right: 8px;
}
.zevco-phone-input-wrapper input {
flex: 1;
border: none !important;
padding: 12px 15px !important;
font-size: 15px;
outline: none !important;
box-shadow: none !important;
}
.zevco-auth-checkbox {
display: flex;
align-items: center;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 12px;
color: #666;
margin-bottom: 20px;
cursor: pointer;
}
.zevco-auth-checkbox input {
margin-right: 8px;
}
.zevco-auth-submit {
background: #000 !important;
color: #fff !important;
font-family: var(--wp--preset--font-family--jost), sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
border-radius: 4px !important;
padding: 15px !important;
width: 100% !important;
border: none !important;
cursor: pointer;
}
.zevco-auth-terms {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 11px;
color: #999;
text-align: center;
margin-top: 30px;
line-height: 1.5;
}
.zevco-auth-terms a {
color: #666;
text-decoration: underline;
}
/* Mobile responsive */
@media (max-width: 768px) {
.zevco-premium-auth-box {
flex-direction: column;
}
.zevco-auth-features {
display: none; /* Hide features on mobile like screenshot */
}
.zevco-mobile-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 20px;
}
.zevco-mobile-dots span {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
}
.zevco-mobile-dots span.active {
background: #fff;
}
.zevco-auth-left {
padding: 30px 20px;
}
.zevco-auth-right {
margin: 0;
border-radius: 0;
padding: 30px 20px;
}
}
/* Remove underline from product card links */
.zevco-custom-shop-grid ul.products li.product a,
.woocommerce ul.products li.product a {
text-decoration: none !important;
}
.woocommerce-loop-product__title {
text-decoration: none !important;
}
/* Full clickable area for banners */
.zevco-promo-banner {
position: relative;
}
.zevco-stretched-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
display: block;
}
/* --- FIX ACCOUNT ICON SIZE --- */
.wp-block-woocommerce-customer-account svg,
.wp-block-woocommerce-customer-account .wc-block-customer-account__account-icon svg {
width: 22px !important;
height: 22px !important;
}
/* Also ensure the mini cart icon matches */
.wp-block-woocommerce-mini-cart svg,
.wp-block-woocommerce-mini-cart .wc-block-mini-cart__icon svg {
width: 22px !important;
height: 22px !important;
}
/* Ensure our custom search icon matches too */
.zevco-search-toggle svg {
width: 22px !important;
height: 22px !important;
}
/* --- TIGHTEN HEADER ICONS GAP --- */
.zevco-header-icons {
display: flex !important;
align-items: center !important;
}
/* Remove any default block margins that WooCommerce injects */
.zevco-header-icons > * {
margin: 0 !important;
padding: 0 !important;
}
.wp-block-woocommerce-customer-account {
margin: 0 !important;
}
.wp-block-woocommerce-mini-cart {
margin: 0 !important;
}
/* --- PRICE CENTERING & FALLBACK GRID --- */
.zevco-price-regular {
justify-content: center !important;
}
.zevco-price-sale {
justify-content: flex-start !important; /* Keep left aligned for sale */
}
/* Ensure the wrapper always forces a 2-col grid just in case WooCommerce strips ul.products */
.zevco-custom-shop-grid > * {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* On mobile, maybe they want 2 cols as well, so repeat(2, 1fr) is good. */
/* Force Add to cart visibility */
.zevco-custom-shop-grid ul.products li.product .button,
.zevco-custom-shop-grid ul.products li.product p .button {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 50 !important;
margin-top: 15px !important;
}
/* Fix any stray P tags injected by WP */
.zevco-custom-shop-grid ul.products li.product > p {
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
/* --- MOBILE 1 COLUMN GRID --- */
@media (max-width: 768px) {
.zevco-custom-shop-grid ul.products,
.zevco-custom-shop-grid .products,
.zevco-custom-shop-grid ul.wc-block-grid__products,
.zevco-custom-shop-grid > * {
grid-template-columns: repeat(1, 1fr) !important;
}
}
/* --- MOBILE FIX FOR PROMO BANNERS --- */
@media (max-width: 768px) {
.zevco-promo-banners {
grid-template-columns: 1fr !important;
}
}
/* --- MOBILE DRAWER OVERLAY --- */
.zevco-drawer-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999; /* Below drawer (1000) but above everything else */
display: none; /* Hidden by default */
}
.zevco-drawer-overlay.is-open {
display: block;
}
/* --- FILTER & ACTIONS --- */
.zevco-category-actions {
display: flex;
align-items: center;
gap: 15px;
}
.woocommerce-ordering {
margin: 0 !important;
}
.woocommerce-ordering select {
padding: 8px 12px;
border-radius: 4px;
border: 1px solid #eaeaea;
background: #fff;
}
@media (max-width: 768px) {
.zevco-category-header-row {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.zevco-category-actions {
width: 100%;
justify-content: space-between;
}
}
/* --- FORCED EXACT MATCH FOR COLLECTIONS --- */
.zevco-collections-grid {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 20px !important;
align-items: start !important;
}
.zevco-collection-card {
display: block !important;
background: #fff !important;
border: 1px solid #eaeaea !important;
border-radius: 4px !important;
overflow: hidden !important;
padding: 0 !important;
height: auto !important;
}
.zevco-collection-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}
.zevco-collection-image {
display: block !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important;
background-size: cover !important;
background-position: center !important;
border-radius: 0 !important;
}
.zevco-collection-card .zevco-collection-info {
display: block !important;
padding: 10px 5px !important;
text-align: center !important;
background: #fff !important;
}
.zevco-collection-card .zevco-collection-info h3 {
font-family: var(--zevco-font) !important;
font-size: 15px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin: 0 0 4px 0 !important;
color: #333 !important; line-height: 1.2 !important;
}
.zevco-collection-card .zevco-collection-info .explore-link {
display: block !important;
font-family: var(--wp--preset--font-family--jost), sans-serif !important;
font-size: 12px !important;
color: #a68c6b !important;
text-transform: capitalize !important;
font-weight: 500 !important; line-height: 1.2 !important;
margin: 0 !important;
}
@media (max-width: 768px) {
.zevco-collections-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
}
/* --- FORCED EXACT MATCH FOR PROMO BANNERS --- */
.zevco-promo-banners {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important; /* Slightly smaller gap to match typical layouts */
padding: 0 !important;
margin: 0 !important;
}
.zevco-promo-banner {
display: block !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
min-height: 0 !important;
height: 100% !important;
border-radius: 8px !important;
overflow: hidden !important;
}
.zevco-promo-banner::before {
display: none !important; /* Remove any old gradient overlays */
}
.zevco-promo-banner img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 8px !important;
}
@media (max-width: 768px) {
.zevco-promo-banners {
grid-template-columns: 1fr !important;
}
}
/* Force zero padding on bottom nav */
.zevco-mobile-bottom-nav {
padding: 0 !important;
}
/* --- FIX GLOBAL STICKY HEADER --- */
/* The header must be sticky on ALL pages, including home page */
.wp-site-blocks {
/* Ensure no global overflow hides break sticky */
overflow: visible !important;
}
.wp-block-template-part > header,
.zevco-header-wrapper {
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
background-color: #fff !important;
}
/* ==========================================================================
CATEGORY PAGE LAYOUT (Prestige Theme Replica)
========================================================================== */
/* Layout Wrapper */
.zevco-category-layout-wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 40px;
max-width: 1400px;
margin: 0 auto;
padding: 0 15px;
}
/* Sidebar */
.zevco-category-sidebar {
width: 250px;
flex-shrink: 0;
}
.zevco-category-main-content {
flex: 1;
min-width: 0; /* Prevents flex blowout */
}
/* Sidebar Widgets */
.zevco-sidebar-widget {
margin-bottom: 30px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 20px;
}
.zevco-sidebar-widget:last-child {
border-bottom: none;
}
.zevco-sidebar-title {
font-family: var(--zevco-font);
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 15px;
font-weight: 500;
color: #333;
}
/* Categories List */
.zevco-sidebar-categories {
list-style: none;
padding: 0;
margin: 0;
}
.zevco-sidebar-categories li {
margin-bottom: 10px;
}
.zevco-sidebar-categories a {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 15px;
color: #555;
text-decoration: none;
transition: color 0.3s;
}
.zevco-sidebar-categories a:hover,
.zevco-sidebar-categories a.active {
color: var(--wp--preset--color--primary);
font-weight: 500;
}
/* Accordion Checkboxes */
.zevco-accordion-toggle {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin-bottom: 15px;
}
.zevco-accordion-content {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Custom Checkbox */
.zevco-checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
color: #555;
position: relative;
}
.zevco-checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.zevco-checkmark {
height: 18px;
width: 18px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.zevco-checkbox-label:hover input ~ .zevco-checkmark {
border-color: #aaa;
}
.zevco-checkbox-label input:checked ~ .zevco-checkmark {
background-color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
}
.zevco-checkmark:after {
content: "";
display: none;
width: 4px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.zevco-checkbox-label input:checked ~ .zevco-checkmark:after {
display: block;
}
/* Toolbar */
.zevco-category-toolbar {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 15px;
}
.zevco-category-title {
font-family: var(--zevco-font);
font-size: 32px;
font-weight: 500;
margin: 0;
color: #222;
}
.zevco-category-actions {
display: flex;
align-items: center;
gap: 15px;
}
/* Sort Dropdown styling */
.zevco-desktop-sort-wrapper form.woocommerce-ordering {
margin: 0;
}
.zevco-desktop-sort-wrapper select.orderby {
padding: 8px 30px 8px 12px;
border: 1px solid #eaeaea;
border-radius: 4px;
background: transparent;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
color: #444;
cursor: pointer;
outline: none;
}
/* Responsive Visibility */
.zevco-desktop-only { display: block; }
.zevco-mobile-only { display: none; }
@media (max-width: 1024px) {
.zevco-category-layout-wrapper {
flex-direction: column;
gap: 20px;
}
.zevco-desktop-only { display: none; }
.zevco-mobile-only { display: flex; }
.zevco-category-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.zevco-category-actions {
width: 100%;
justify-content: space-between;
}
.zevco-mobile-filter-toggle {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
color: #444;
cursor: pointer;
border: 1px solid #eaeaea;
padding: 8px 15px;
border-radius: 4px;
}
/* Offcanvas Sidebar for Mobile */
.zevco-category-sidebar {
position: fixed;
top: 0;
left: -100%;
width: 300px;
height: 100vh;
background: #fff;
z-index: 99999;
padding: 20px;
overflow-y: auto;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
transition: left 0.3s ease;
}
.zevco-category-sidebar.active {
left: 0;
}
}
/* Secondary Hover Image */
.zevco-product-image-wrap {
position: relative;
overflow: hidden;
}
.zevco-secondary-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease;
}
.zevco-product-image-wrap:hover .zevco-secondary-image {
opacity: 1;
}
/* Ensure mobile menu drawer close button works */
.zevco-category-sidebar-close {
display: none;
cursor: pointer;
margin-bottom: 20px;
text-align: right;
}
@media (max-width: 1024px) {
.zevco-category-sidebar-close {
display: block;
}
}
/* ==========================================================================
CATEGORY PAGE — Full Redesign (Zeraki-style)
========================================================================== */
/* ── Hero Banner ─────────────────────────────────────── */
.zevco-cat-hero {
display: flex;
height: 420px;
overflow: hidden;
position: relative;
}
.zevco-cat-hero-image {
flex: 1;
background-size: cover;
background-position: center;
min-height: 100%;
}
.zevco-cat-hero-no-img {
background-color: #1a0a00;
}
.zevco-cat-hero-text {
width: 360px;
flex-shrink: 0;
background-color: #1a0a00;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px;
}
.zevco-cat-hero-title {
font-family: var(--zevco-font);
font-size: 44px;
font-weight: 600;
letter-spacing: 3px;
color: #fff;
margin: 0 0 8px 0;
line-height: 1.1;
}
.zevco-cat-hero-desc {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 13px;
letter-spacing: 2px;
color: #c9a96e;
text-transform: uppercase;
margin: 0 0 24px 0;
}
.zevco-cat-offer-main {
font-family: var(--zevco-font);
font-size: 42px;
font-weight: 700;
color: #d4a843;
line-height: 1;
margin: 0;
text-transform: uppercase;
}
.zevco-cat-offer-sub {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 20px;
color: #fff;
font-weight: 600;
margin: 8px 0 0;
letter-spacing: 1px;
}
/* ── USP Bar ─────────────────────────────────────────── */
.zevco-cat-usp-bar {
background: #1a0a00;
overflow: hidden;
padding: 12px 0;
white-space: nowrap;
}
.zevco-cat-usp-track {
display: inline-flex;
gap: 60px;
animation: zevcoUSPScroll 20s linear infinite;
}
.zevco-cat-usp-track span {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
color: #d4a843;
text-transform: uppercase;
white-space: nowrap;
}
@keyframes zevcoUSPScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ── Layout Wrapper ──────────────────────────────────── */
.zevco-cat-layout {
display: flex;
align-items: flex-start;
max-width: 1400px;
margin: 0 auto;
padding: 30px 20px;
gap: 30px;
}
/* ── Sidebar ─────────────────────────────────────────── */
.zevco-cat-sidebar {
width: 240px;
flex-shrink: 0;
}
.zevco-cat-sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #222;
}
.zevco-cat-sidebar-title {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #222;
}
.zevco-cat-sidebar-close {
display: none;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #333;
line-height: 1;
}
.zevco-filter-section {
border-bottom: 1px solid #e5e5e5;
padding: 16px 0;
}
.zevco-filter-heading {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
color: #111;
cursor: pointer;
user-select: none;
margin-bottom: 0;
}
.zevco-acc-icon {
font-size: 18px;
transition: transform 0.2s;
display: inline-block;
}
.zevco-filter-section.collapsed .zevco-acc-icon {
transform: rotate(180deg);
}
.zevco-filter-body {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.zevco-filter-section.collapsed .zevco-filter-body {
display: none;
}
/* Toggle switch */
.zevco-toggle-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
color: #444;
}
.zevco-toggle-input { display: none; }
.zevco-toggle-switch {
width: 38px;
height: 20px;
background: #ccc;
border-radius: 20px;
position: relative;
flex-shrink: 0;
transition: background 0.2s;
}
.zevco-toggle-switch::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
top: 2px;
left: 2px;
transition: left 0.2s;
}
.zevco-toggle-input:checked ~ .zevco-toggle-switch {
background: #1a0a00;
}
.zevco-toggle-input:checked ~ .zevco-toggle-switch::after {
left: 20px;
}
/* Price Slider */
.zevco-price-slider-wrap {
position: relative;
height: 30px;
margin-bottom: 4px;
}
.zevco-price-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: #ddd;
border-radius: 4px;
transform: translateY(-50%);
}
.zevco-price-range-fill {
position: absolute;
height: 100%;
background: #1a0a00;
border-radius: 4px;
}
.zevco-price-slider-wrap input[type=range] {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
-webkit-appearance: none;
background: transparent;
pointer-events: none;
}
.zevco-price-slider-wrap input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #1a0a00;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
pointer-events: all;
cursor: pointer;
}
.zevco-price-display {
display: flex;
justify-content: space-between;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 13px;
color: #444;
margin-top: 8px;
}
/* Checkbox labels */
.zevco-cb-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
color: #444;
}
.zevco-cb-label input { display: none; }
.zevco-cb-box {
width: 18px;
height: 18px;
border: 1px solid #bbb;
border-radius: 2px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
transition: all 0.2s;
}
.zevco-cb-label input:checked ~ .zevco-cb-box {
background: #1a0a00;
border-color: #1a0a00;
}
.zevco-cb-label input:checked ~ .zevco-cb-box::after {
content: '';
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-bottom: 2px;
}
/* Clear all */
.zevco-clear-all-filters {
display: block;
margin-top: 20px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 13px;
color: #777;
text-decoration: underline;
}
/* ── Right Main Area ─────────────────────────────────── */
.zevco-cat-main {
flex: 1;
min-width: 0;
width: 100%;
}
/* ── Toolbar ─────────────────────────────────────────── */
.zevco-cat-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
.zevco-grid-toggles {
display: flex;
align-items: center;
gap: 6px;
}
.zevco-grid-btn {
background: none;
border: 1px solid #ddd;
padding: 7px 9px;
cursor: pointer;
border-radius: 4px;
color: #888;
display: flex;
align-items: center;
transition: all 0.2s;
}
.zevco-grid-btn.active,
.zevco-grid-btn:hover {
border-color: #1a0a00;
color: #1a0a00;
background: #fdf8f0;
}
.zevco-cat-count {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
color: #666;
}
.zevco-cat-sort {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
color: #444;
}
.zevco-cat-sort label { font-weight: 500; }
.zevco-cat-sort .woocommerce-ordering {
margin: 0;
}
.zevco-cat-sort select.orderby {
border: none;
background: transparent;
font-size: 14px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
cursor: pointer;
color: #222;
font-weight: 600;
}
/* ── Product Grid ────────────────────────────────────── */
.zevco-cat-grid ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 60px) / 4)), 1fr)) !important;
justify-content: center !important;
gap: 20px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
.zevco-cat-grid[data-cols="3"] ul.products {
grid-template-columns: repeat(3, 1fr) !important;
}
.zevco-cat-grid[data-cols="2"] ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
/* ── Product Card ────────────────────────────────────── */
.zevco-cat-grid ul.products li.product {
margin: 0 !important;
padding: 0 !important;
background: transparent;
border-radius: 0;
}
.zevco-product-link {
text-decoration: none !important;
color: inherit;
display: block;
}
.zevco-product-image-wrap {
position: relative;
overflow: hidden;
background: #f8f5f0;
aspect-ratio: 1 / 1;
border-radius: 4px;
}
.zevco-product-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.4s ease;
}
.zevco-secondary-image {
position: absolute !important;
top: 0; left: 0;
opacity: 0;
}
.zevco-product-image-wrap:hover .zevco-secondary-image {
opacity: 1;
}
.zevco-product-image-wrap:hover img:first-child {
opacity: 0;
}
/* Badges */
.zevco-badges {
position: absolute;
top: 8px;
left: 8px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 3;
}
.zevco-badge {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 10px;
font-weight: 700;
padding: 3px 7px;
letter-spacing: 0.5px;
text-transform: uppercase;
border-radius: 2px;
white-space: nowrap;
}
.zevco-badge-tarnish { background: #2e7d32; color: #fff; }
.zevco-badge-b1g1 { background: #c62828; color: #fff; }
.zevco-badge-sale { background: #c62828; color: #fff; }
/* Product info */
.zevco-product-info-wrap {
padding: 10px 2px 0;
}
.zevco-product-title {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
font-weight: 500;
color: #222;
margin: 0 0 5px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.zevco-star-row {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 4px;
}
.zevco-star-row .star-rating {
font-size: 12px;
}
.zevco-review-count {
font-size: 12px;
color: #777;
}
.zevco-product-price {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
font-weight: 600;
}
.zevco-product-price .price {
color: #c62828;
font-size: 14px !important;
}
.zevco-product-price .price del {
color: #999;
font-size: 12px;
font-weight: 400;
}
/* ── Pagination ──────────────────────────────────────── */
.zevco-cat-main .woocommerce-pagination {
margin-top: 30px;
text-align: center;
}
/* ── Mobile & Tablet (≤1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
.zevco-cat-hero { height: auto; flex-direction: column; }
.zevco-cat-hero-image { height: 220px; width: 100%; }
.zevco-cat-hero-text { width: 100%; padding: 24px 20px; }
.zevco-cat-hero-title { font-size: 30px; }
.zevco-cat-offer-main { font-size: 30px; }
.zevco-cat-offer-sub { font-size: 16px; }
.zevco-cat-layout { flex-direction: column; padding: 15px; gap: 0; align-items: stretch; }
/* Sidebar off-canvas on mobile */
.zevco-cat-sidebar {
position: fixed;
top: 0; left: -100%;
width: 300px;
height: 100vh;
background: #fff;
z-index: 99999;
padding: 20px;
overflow-y: auto;
box-shadow: 4px 0 20px rgba(0,0,0,0.15);
transition: left 0.3s ease;
}
.zevco-cat-sidebar.open { left: 0; }
.zevco-cat-sidebar-close { display: flex !important; }
.zevco-cat-grid ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.zevco-cat-toolbar { flex-wrap: wrap; gap: 10px; }
.zevco-cat-count { order: -1; width: 100%; text-align: center; }
.zevco-mobile-filter-open { display: flex !important; }
}
@media (min-width: 1025px) {
.zevco-mobile-filter-open { display: none !important; }
.zevco-cat-sidebar-close { display: none !important; }
}
/* ── Hero: full-width image only, no text panel ── */
.zevco-cat-hero {
height: auto !important; /* Allow image to dictate height */
overflow: hidden;
display: block !important;
}
.zevco-cat-hero-image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center top;
display: block;
flex: unset !important;
}
/* Remove padding/margin from zevco-shop-container */
.zevco-shop-container {
padding: 0 !important;
margin: 0 !important;
}
/* List view toggle button */
.zevco-grid-btn-list svg rect { display: none; }
/* List view grid layout */
.zevco-cat-grid[data-cols="list"] ul.products {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
.zevco-cat-grid[data-cols="list"] ul.products li.product .zevco-product-link {
display: flex;
flex-direction: row;
gap: 20px;
padding: 16px 0;
border-bottom: 1px solid #eee;
align-items: flex-start;
}
.zevco-cat-grid[data-cols="list"] ul.products li.product .zevco-product-image-wrap {
width: 140px;
flex-shrink: 0;
aspect-ratio: 1 / 1;
}
.zevco-cat-grid[data-cols="list"] ul.products li.product .zevco-product-info-wrap {
flex: 1;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.zevco-cat-grid[data-cols="list"] ul.products li.product .zevco-product-title {
font-size: 16px;
white-space: normal;
}
/* ── Product Card wrapper ─────────────────────── */
.zevco-product-card {
display: flex;
flex-direction: column;
}
.zevco-product-link {
flex: 1;
text-decoration: none !important;
color: inherit;
display: block;
}
/* ── Add to Cart button on loop ──────────────── */
.zevco-loop-atc {
margin-top: 10px;
}
.zevco-loop-atc .button,
.zevco-loop-atc a.button,
.zevco-loop-atc button {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: 10px 12px !important;
background-color: var(--wp--preset--color--secondary, #412a19) !important;
color: #fff !important;
font-family: var(--wp--preset--font-family--jost), sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border: none !important;
border-radius: 3px !important;
cursor: pointer !important;
transition: background 0.2s !important;
text-decoration: none !important;
}
.zevco-loop-atc .button:hover,
.zevco-loop-atc a.button:hover {
background-color: #1a0a00 !important;
color: #fff !important;
}
/* List view ATC */
.zevco-cat-grid[data-cols="list"] ul.products li.product .zevco-product-card {
flex-direction: row;
gap: 20px;
align-items: flex-start;
padding: 16px 0;
border-bottom: 1px solid #eee;
}
.zevco-cat-grid[data-cols="list"] ul.products li.product .zevco-product-link {
display: flex;
flex-direction: row;
gap: 20px;
flex: 1;
}
.zevco-cat-grid[data-cols="list"] ul.products li.product .zevco-product-image-wrap {
width: 140px;
flex-shrink: 0;
}
.zevco-cat-grid[data-cols="list"] ul.products li.product .zevco-loop-atc {
width: 160px;
flex-shrink: 0;
margin-top: 0;
align-self: center;
}
/* ── Category page: force full viewport width ── */
.zevco-shop-container,
.zevco-cat-hero,
.zevco-cat-usp-bar,
.zevco-cat-layout {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Break out of the WP block content-width constraint */
.zevco-shop-container {
margin-top: 0 !important;
}
.wp-block-group:has(.zevco-shop-container) {
padding: 0 !important;
max-width: 100% !important;
}
/* Inner layout gets padding/gap instead */
.zevco-cat-layout {
padding: 30px 30px !important;
gap: 30px;
}
/* ==========================================================================
PRODUCT CARD — Reference Design (Portrait + Price Row + ATC)
========================================================================== */
/* ── Card wrapper ── */
.zevco-product-li { margin: 0 !important; padding: 0 !important; }
.zevco-product-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
}
/* ── Portrait image (3:4 ratio) ── */
.zevco-product-img-link { display: block; text-decoration: none !important; }
.zevco-product-image-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4 !important; /* Portrait — taller than wide */
background: #f5f0eb;
border-radius: 0;
}
.zevco-product-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.zevco-secondary-image {
position: absolute !important;
top: 0; left: 0;
opacity: 0;
}
.zevco-product-image-wrap:hover img:first-of-type { opacity: 0; transform: scale(1.03); }
.zevco-product-image-wrap:hover .zevco-secondary-image { opacity: 1; transform: scale(1.03); }
/* ── Badge top-left ── */
.zevco-card-badge {
position: absolute;
top: 10px; left: 10px;
z-index: 4;
background: rgba(0,0,0,0.72);
color: #fff;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 2px;
}
/* ── Star rating bottom-left ── */
.zevco-card-rating {
position: absolute;
bottom: 10px; left: 10px;
z-index: 4;
background: rgba(0,0,0,0.65);
color: #fff;
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 2px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 12px;
font-weight: 600;
}
/* ── Product info ── */
.zevco-product-info {
padding: 10px 4px 6px;
flex: 1;
}
.zevco-product-name-link { text-decoration: none !important; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.zevco-product-name {
font-family: var(--wp--preset--font-family--jost), sans-serif;
font-size: 14px;
font-weight: 400;
color: #222;
margin: 0 0 6px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Price row ── */
.zevco-price-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 5px;
font-family: var(--wp--preset--font-family--jost), sans-serif;
margin-bottom: 4px;
}
.zevco-sale-price {
font-size: 14px;
font-weight: 700;
color: #111;
}
.zevco-sale-price .woocommerce-Price-amount { color: #111 !important; font-size: 14px !important; }
.zevco-reg-price {
font-size: 12px;
color: #999;
text-decoration: line-through;
}
.zevco-reg-price .woocommerce-Price-amount { color: #999 !important; font-size: 12px !important; text-decoration: line-through; }
.zevco-pct-off {
font-size: 12px;
color: #2e7d32;
font-weight: 500;
}
/* ── Add to Cart button ── */
.zevco-loop-atc { margin-top: auto; padding: 0 0 0; }
.zevco-loop-atc .button,
.zevco-loop-atc a.button,
.zevco-loop-atc button {
display: block !important;
width: 100% !important;
text-align: center !important;
padding: 11px 10px !important;
background-color: #1a0a00 !important;
color: #fff !important;
font-family: var(--wp--preset--font-family--jost), sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border: none !important;
border-radius: 0 !important;
cursor: pointer !important;
transition: background 0.2s !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.zevco-loop-atc .button:hover,
.zevco-loop-atc a.button:hover {
background-color: #412a19 !important;
color: #fff !important;
}
/* ── Desktop/Mobile grid toggle visibility ── */
@media (min-width: 769px) {
.zevco-mobile-grid-btn { display: none !important; }
.zevco-desktop-grid-btn { display: flex !important; }
/* Mobile-only toggles off on desktop */
.zevco-cat-grid[data-cols="1"] ul.products {
grid-template-columns: repeat(4, 1fr) !important; /* fallback on desktop */
}
}
@media (max-width: 768px) {
.zevco-desktop-grid-btn { display: none !important; }
.zevco-mobile-grid-btn { display: flex !important; }
/* Default mobile: 2 columns */
.zevco-cat-grid ul.products,
.zevco-cat-grid[data-cols="4"] ul.products,
.zevco-cat-grid[data-cols="3"] ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
/* 1 column toggle */
.zevco-cat-grid[data-cols="1"] ul.products {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Smaller product name on 2-col */
.zevco-product-name { font-size: 13px; }
.zevco-sale-price .woocommerce-Price-amount { font-size: 13px !important; }
.zevco-loop-atc .button,
.zevco-loop-atc a.button,
.zevco-loop-atc button { font-size: 12px !important; padding: 9px 6px !important; }
}
/* ==========================================================================
FIXES — toolbar sort, image cover, layout padding
========================================================================== */
/* ── Reduce layout padding ── */
.zevco-cat-layout {
padding: 20px 15px !important;
gap: 20px !important;
}
/* ── Fix toolbar alignment — sort on right ── */
.zevco-cat-toolbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 10px !important;
padding-bottom: 12px !important;
margin-bottom: 16px !important;
}
.zevco-cat-sort {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
}
.zevco-cat-sort label {
white-space: nowrap !important;
font-size: 13px !important;
color: #555 !important;
}
.zevco-cat-sort .woocommerce-ordering {
margin: 0 !important;
display: flex !important;
align-items: center !important;
}
.zevco-cat-sort select.orderby {
border: none !important;
border-bottom: 1px solid #ccc !important;
background: transparent !important;
font-size: 13px !important;
font-weight: 600 !important;
font-family: var(--wp--preset--font-family--jost), sans-serif !important;
cursor: pointer !important;
color: #111 !important;
padding: 2px 0 !important;
outline: none !important;
appearance: auto !important;
}
/* ── Fix product image: cover with no empty space ── */
.zevco-product-image-wrap {
aspect-ratio: 3 / 4 !important;
overflow: hidden !important;
display: block !important;
position: relative !important;
background: #f5f0eb !important;
}
/* Target all imgs inside — including WC's wrapping divs */
.zevco-product-image-wrap img,
.zevco-product-image-wrap .attachment-woocommerce_thumbnail,
.zevco-product-image-wrap .wp-post-image {
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* WC sometimes wraps in a figure or div — flatten it */
.zevco-product-image-wrap figure,
.zevco-product-image-wrap > div:not(.zevco-badges):not(.zevco-card-rating) {
position: absolute !important;
inset: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
/* ── WC thumbnail anchor wrapper inside image wrap ── */
.zevco-product-image-wrap > a {
display: block !important;
position: absolute !important;
inset: 0 !important;
line-height: 0 !important;
}
/* Placeholder "no image" svg also needs to fill */
.zevco-product-image-wrap .woocommerce-placeholder {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
/* ==========================================================================
FIXES — Card Design, Image cropping, Centering, ATC button
========================================================================== */
/* ── Card border and styling ── */
.zevco-product-card {
border: 1px solid #eaeaea;
border-radius: 8px;
text-align: center;
background: #fff;
height: 100%;
display: flex;
flex-direction: column;
}
.zevco-product-info {
padding: 14px 10px 4px;
display: flex;
flex-direction: column;
align-items: center;
}
/* ── Fix image white background and cropping ── */
.zevco-product-image-wrap {
background: #fff !important;
border-radius: 8px 8px 0 0;
}
.zevco-product-image-wrap img,
.zevco-product-image-wrap .attachment-woocommerce_thumbnail,
.zevco-product-image-wrap .wp-post-image {
object-fit: contain !important; /* Fit image inside without cropping */
}
/* ── Center price row and stack percentage below ── */
.zevco-price-row {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 100%;
margin-top: auto;
}
.zevco-price-main {
display: flex;
justify-content: center;
align-items: baseline;
gap: 6px;
width: 100%;
}
.zevco-pct-off {
text-align: center;
font-size: 13px;
margin-top: 2px;
}
/* ── ATC button styling ── */
.zevco-loop-atc {
padding: 10px 14px 14px !important; /* Space around the button */
margin-top: auto;
width: 100%;
box-sizing: border-box;
}
.zevco-loop-atc .button,
.zevco-loop-atc a.button,
.zevco-loop-atc button {
background-color: #886547 !important; /* Match the brown color from screenshot */
border-radius: 6px !important; /* Rounded corners */
text-transform: uppercase !important;
font-size: 14px !important;
padding: 12px 10px !important;
}
.zevco-loop-atc .button:hover,
.zevco-loop-atc a.button:hover {
background-color: #6a4f38 !important; /* Darker brown on hover */
}
/* ==========================================================================
USER REQUESTED OVERRIDES
========================================================================== */
/* Remove height: auto !important that was causing empty space below images */
.zevco-custom-shop-grid ul.products li.product a img,
.zevco-custom-shop-grid .products li.product a img,
.zevco-cat-grid ul.products li.product a img {
height: 100% !important;
}
/* Make price row horizontal instead of column */
.zevco-price-row {
flex-direction: row !important;
flex-wrap: wrap !important;
}
.zevco-price-main {
width: auto !important;
}
.zevco-pct-off {
width: auto !important;
margin-top: 0 !important;
}
/* Remove 10px padding from the product card */
.zevco-custom-shop-grid .products li.product,
.zevco-custom-shop-grid ul.products li.product {
padding: 0 !important;
}
/* ==========================================================================
HOME PAGE BESTSELLERS GRID (4 on desktop, 2 on mobile)
========================================================================== */
.zevco-custom-shop-grid ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 60px) / 4)), 1fr)) !important;
justify-content: center !important;
gap: 20px !important;
}
@media (max-width: 768px) {
.zevco-custom-shop-grid ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
}
/* Remove bottom margin from sort label */
.zevco-cat-sort label {
margin-bottom: 0 !important;
}
/* Restore top margin for the shop container */
.zevco-shop-container {
margin-top: 1rem !important;
}
/* ==========================================================================
USER REQUESTED OVERRIDES (Container margin, Layout padding)
========================================================================== */
/* 1. Shop container margin only on desktop */
@media (min-width: 769px) {
.zevco-shop-container {
margin-top: 1rem !important;
}
}
@media (max-width: 768px) {
.zevco-shop-container {
margin-top: 0 !important;
}
}
/* 2. Cat layout padding */
.zevco-cat-layout {
padding: 5px 5px !important;
}
/* 3. Custom shop grid padding */
.zevco-custom-shop-grid {
padding: 0 !important;
}
/* Remove margin above the USP scrolling bar */
.zevco-cat-usp-bar {
margin-block-start: 0 !important;
}
/* ==========================================================================
CHECKOUT PAGE REDESIGN
========================================================================== */
.woocommerce-checkout {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-top: 20px;
}
.woocommerce-checkout #customer_details {
flex: 1;
min-width: 300px;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
width: 100% !important;
float: none !important;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
flex: 0 0 450px;
max-width: 100%;
}
.woocommerce-checkout #order_review {
background: #fdfaf7;
padding: 30px;
border-radius: 8px;
border: 1px solid #eee;
}
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea {
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
width: 100%;
}
.woocommerce-checkout form .form-row label {
font-size: 13px;
font-weight: 600;
margin-bottom: 6px;
display: block;
color: #444;
}
.woocommerce-checkout h3 {
font-size: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
}
@media (max-width: 768px) {
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
flex: 1 1 100%;
}
}
/* ==========================================================================
CHECKOUT PAGE GRID FIX
========================================================================== */
form.woocommerce-checkout {
display: grid !important;
grid-template-columns: 1fr 450px !important;
gap: 0 40px !important;
align-items: start !important;
}
form.woocommerce-checkout::before,
form.woocommerce-checkout::after {
display: none !important; /* Disable WooCommerce clearfix that breaks grid */
}
form.woocommerce-checkout #customer_details {
grid-column: 1 / 2 !important;
grid-row: 1 / span 2 !important;
width: 100% !important;
}
form.woocommerce-checkout #order_review_heading {
grid-column: 2 / 3 !important;
grid-row: 1 / 2 !important;
margin-top: 0 !important;
}
form.woocommerce-checkout #order_review {
grid-column: 2 / 3 !important;
grid-row: 2 / 3 !important;
background: #fdfaf7;
padding: 30px;
border-radius: 8px;
border: 1px solid #eee;
width: 100% !important;
}
@media (max-width: 992px) {
form.woocommerce-checkout {
grid-template-columns: 1fr !important;
}
form.woocommerce-checkout #customer_details,
form.woocommerce-checkout #order_review_heading,
form.woocommerce-checkout #order_review {
grid-column: 1 / -1 !important;
grid-row: auto !important;
}
form.woocommerce-checkout #order_review_heading {
margin-top: 40px !important;
}
}
/* ==========================================================================
CHECKOUT PAGE REFINEMENTS
========================================================================== */
/* 1. Restrict left side width and center the layout */
form.woocommerce-checkout {
grid-template-columns: minmax(auto, 550px) 400px !important;
justify-content: center !important;
}
/* 2. Fix bleeding (box-sizing) */
form.woocommerce-checkout #order_review,
form.woocommerce-checkout #order_review table,
form.woocommerce-checkout #order_review ul,
form.woocommerce-checkout #order_review div {
box-sizing: border-box !important;
}
/* 3. Smaller font sizes inside the order review box */
form.woocommerce-checkout #order_review table.shop_table {
width: 100% !important;
font-size: 13px !important; /* Smaller text */
margin-bottom: 20px !important;
}
form.woocommerce-checkout #order_review table.shop_table th,
form.woocommerce-checkout #order_review table.shop_table td {
padding: 10px 5px !important;
word-break: break-word !important; /* Prevent long names from bleeding */
}
form.woocommerce-checkout #order_review .payment_methods li {
font-size: 13px !important;
}
form.woocommerce-checkout #order_review .payment_box {
font-size: 12px !important;
padding: 10px !important;
}
form.woocommerce-checkout #order_review .woocommerce-privacy-policy-text {
font-size: 11px !important;
line-height: 1.4 !important;
}
/* Adjust the place order button */
form.woocommerce-checkout #order_review #place_order {
font-size: 14px !important;
padding: 12px !important;
width: 100% !important;
white-space: normal !important;
margin-top: 15px !important;
}
/* Mobile adjustments */
@media (max-width: 992px) {
form.woocommerce-checkout {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
CHECKOUT MOBILE UI IMPROVEMENTS
========================================================================== */
@media (max-width: 768px) {
/* Make checkout wrapper span full width on mobile to save space */
.wp-block-checkout-wrapper {
padding: 0 10px !important;
}
form.woocommerce-checkout {
gap: 25px !important;
}
/* Make the order summary box look cleaner on mobile */
form.woocommerce-checkout #order_review {
padding: 20px 15px !important;
background: #fafafa !important;
border: 1px solid #eaeaea !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}
/* Clean up the headings */
.woocommerce-checkout h3 {
font-size: 18px !important;
margin-bottom: 15px !important;
}
/* Inputs */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea {
padding: 10px 12px !important;
font-size: 14px !important; /* Prevent iOS zoom */
}
}
/* Ensure the thumbnail images inside the flex box don't get squished */
.zevco-checkout-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
/* Remove checkout top margin */
.woocommerce-checkout {
margin-top: 0 !important;
}
/* Remove padding from ATC wrapper */
.zevco-loop-atc {
padding: 0 !important;
}
body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li, ul,
button, input, select, textarea,
.wp-block-site-title,
.woocommerce-checkout h3,
.zevco-collection-link,
.woocommerce-Price-amount {
font-family: var(--zevco-font) !important;
}
/* Fix hero banner background size */
.zevco-slide {
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* Fix for picture element hero slider */
.zevco-hero-slider {
height: auto !important;
min-height: auto !important;
}
.zevco-slides {
position: relative !important;
height: auto !important;
}
.zevco-slide {
position: relative !important;
height: auto !important;
opacity: 1 !important; /* Ensure it is visible since JS might try to fade it */
}
/* Force hero slider to hug the image perfectly */
.zevco-hero-slider, .zevco-slides, .zevco-slide, .zevco-slides picture, .zevco-slides img {
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
line-height: 0 !important;
}
.zevco-slide {
display: block !important;
position: static !important;
}
.zevco-hero-slider {
position: relative !important;
}
/* Offset scroll anchors so they are not hidden by the sticky header */
#bestsellers-section {
scroll-margin-top: 80px;
}
/* ==========================================================================
PERFECT NON-JITTER HEADER SCROLL
========================================================================== */
.wp-block-template-part > header {
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* When the hide class is applied, translate the whole header up by exactly the height of the announcement bar */
/* The announcement bar has padding 8px top/bottom and text is ~18px, total height is 34px. */
/* Using transform avoids triggering layout recalculations, completely stopping the dancing/jittering */
.wp-block-template-part > header.zevco-header-hide-announcement {
transform: translateY(-34px) !important;
}
/* Ensure the announcement bar itself doesn't shrink or fade */
.zevco-announcement-bar {
transition: none !important;
height: 34px !important;
box-sizing: border-box !important;
}
/* Fix selector for header transform */
.zevco-header-hide-announcement {
transform: translateY(-34px) !important;
}
header {
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.woocommerce-pagination ul li a {
background-color: transparent !important;
color: #412a19 !important;
border: 1px solid #d9c7a3 !important;
}
.woocommerce-pagination ul li a:hover {
background-color: #d9c7a3 !important;
color: white !important;
}
.woocommerce-pagination ul li span.current {
background-color: #412a19 !important;
color: white !important;
border: 1px solid #412a19 !important;
}
/* Hover effect for view all bestsellers button */
.zevco-bestsellers-button-wrap a.zevco-button:hover {
background-color: #d9c7a3 !important;
color: #412a19 !important;
}
/* Announcement bar individual slide transitions */
.zevco-ann-slide {
transition: opacity 0.5s ease;
}
/* ── Hide Product Description in Cart & Mini-Cart Blocks ── */
.wc-block-components-product-details__description,
.wc-block-cart-item__description {
display: none !important;
}
/* Ensure the BOGO meta tag (variation) is styled nicely in blocks */
.wc-block-components-product-details__item-data {
margin-top: 8px !important;
font-size: 13px !important;
color: #866447 !important;
font-weight: 500 !important;
}
/* ── Catch all possible WooCommerce Block description classes ── */
.wc-block-components-product-details__description,
.wc-block-cart-item__description,
.wc-block-components-product-metadata__description,
.wc-block-components-order-summary-item__description {
display: none !important;
}
/* ── Prevent Gutenberg's default flow gap from breaking the tight header layout ── */
.zevco-header-wrapper .is-layout-flow > * {
margin-block-start: 0 !important;
}
/* ── Shopify Style My Account Layout ── */
.woocommerce-account .woocommerce {
display: flex;
flex-wrap: wrap;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
flex: 0 0 200px;
}
.woocommerce-account .woocommerce-MyAccount-content {
flex: 1;
min-width: 0;
}
@media (max-width: 768px) {
.woocommerce-account .woocommerce {
flex-direction: column;
gap: 20px;
padding: 20px;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
flex: 1 1 100%;
border-bottom: 1px solid #e0e0e0;
padding-bottom: 15px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex;
gap: 20px;
}
}
.shopify-style-sidebar a {
color: #8c8c8c !important;
transition: color 0.2s ease;
}
.shopify-style-sidebar li.is-active a {
color: #111 !important;
}
.shopify-style-sidebar a:hover {
color: #111 !important;
}
/* Shopify Cards */
.shopify-card {
background: #fff;
border: 1px solid #e1e3e5;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
/* ── Mobile Layout Fixes for Shopify UI ── */
@media (max-width: 768px) {
.shopify-login-wrapper {
margin: 20px auto !important;
padding: 0 15px;
width: 100%;
box-sizing: border-box;
}
.shopify-login-wrapper .shopify-card {
padding: 20px !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
border-bottom: none !important;
padding-bottom: 0 !important;
margin-bottom: 20px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
justify-content: flex-start;
border-bottom: 1px solid #e1e3e5;
padding-bottom: 10px !important;
}
.shopify-order-details {
padding: 0;
}
.shopify-order-details .shopify-card {
padding: 15px !important;
}
}
/* ── Overriding strict theme styles for the new Login Form ── */
.shopify-login-wrapper .woocommerce-Input {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.shopify-login-wrapper .woocommerce-form-row {
width: 100% !important;
float: none !important;
display: block !important;
}
.shopify-login-wrapper .show-password-input {
right: 15px !important;
top: 45px !important; /* Adjusting the eye icon to align perfectly */
}
.shopify-login-wrapper button.woocommerce-form-login__submit {
width: 100% !important;
}
/* ── Elegant Login Screen Adjustments ── */
.elegant-login-wrapper .woocommerce-Input {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.elegant-login-wrapper .woocommerce-form-row {
width: 100% !important;
float: none !important;
display: block !important;
}
.elegant-login-wrapper .show-password-input {
right: 18px !important;
top: 15px !important; /* Vertically center in the input */
color: #999;
}
.elegant-login-wrapper .show-password-input::after {
font-size: 20px; /* Adjust WooCommerce default icon size */
}
/* Ensure the woo validation messages don't break the layout */
.elegant-login-wrapper .woocommerce-error {
text-align: left;
border-radius: 8px;
}
/* ── User Requested Padding Removal ── */
.woocommerce-account .woocommerce {
padding: 0 !important;
}
.elegant-login-wrapper {
padding: 0 !important;
margin: 20px auto !important;
}
@media (max-width: 768px) {
.elegant-login-wrapper {
padding: 0 !important;
}
}
/* ── Mobile UI Fixes for My Account & Orders ── */
/* Hide redundant massive page title on the My Account page */
.woocommerce-account .entry-title,
.woocommerce-account .page-title,
.woocommerce-account h1 {
display: none !important;
}
/* Orders Card Layout */
.shopify-order-card-img {
background: #f8f6f2;
border-radius: 12px;
padding: 20px;
text-align: center;
display: flex;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
}
.shopify-order-card-footer {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 15px;
flex-wrap: wrap; /* CRITICAL: Allows button to drop down on small screens */
}
@media (max-width: 480px) {
.shopify-order-card-footer {
flex-direction: column;
align-items: flex-start;
}
.shopify-order-card-footer > div:last-child {
width: 100%;
margin-top: 10px;
}
.shopify-order-card-footer > div:last-child a {
display: block;
text-align: center;
width: 100%;
box-sizing: border-box;
}
}
/* ── WooCommerce Theme Overrides for Mobile and Lists ── */
.woocommerce-account .woocommerce-MyAccount-navigation li {
list-style: none !important;
padding: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 768px) {
.woocommerce-account .woocommerce-MyAccount-content {
width: 100% !important;
float: none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
width: 100% !important;
float: none !important;
}
}
/* ── Prevent WooCommerce Clearfix from Breaking Flex Layout ── */
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
display: none !important;
content: none !important;
}
/* ── Checkout Coupon Fixes ── */
.woocommerce-checkout .woocommerce-info {
margin-bottom: 15px !important;
}
form.checkout_coupon.woocommerce-form-coupon {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
form.checkout_coupon.woocommerce-form-coupon p.form-row {
margin-bottom: 0 !important;
}
form.checkout_coupon button[name="apply_coupon"] {
margin-top: 0 !important;
font-size: 14px !important; /* Adjust text size */
padding: 10px 20px !important; /* Make it a bit more balanced */
}
/* ── Align Coupon Input and Button (Inline Block Method) ── */
form.checkout_coupon.woocommerce-form-coupon p.form-row-first {
display: inline-block !important;
width: 55% !important;
float: left !important;
margin: 0 !important;
}
form.checkout_coupon.woocommerce-form-coupon p.form-row-last {
display: inline-block !important;
width: 35% !important;
float: right !important;
margin: 0 !important;
}
form.checkout_coupon button[name="apply_coupon"] {
margin: 0 !important;
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
form.checkout_coupon::after {
content: "";
display: table;
clear: both;
}
/* Shrink the coupon input and button so they don't look massive */
form.checkout_coupon.woocommerce-form-coupon input.input-text {
padding: 10px 15px !important;
font-size: 14px !important;
height: auto !important;
}
form.checkout_coupon button[name="apply_coupon"] {
padding: 10px 15px !important;
font-size: 14px !important;
line-height: 1.5 !important;
height: auto !important;
}
@media (max-width: 768px) {
/* Ensure they fit perfectly on one line on phones */
form.checkout_coupon.woocommerce-form-coupon p.form-row-first {
width: 58% !important;
}
form.checkout_coupon.woocommerce-form-coupon p.form-row-last {
width: 38% !important;
}
form.checkout_coupon.woocommerce-form-coupon input.input-text,
form.checkout_coupon button[name="apply_coupon"] {
padding: 8px 10px !important;
font-size: 12px !important;
}
}
/* ── Fix Product Image Hover for Single Images ── */
.zevco-product-image-wrap:hover img:first-of-type,
.zevco-product-image-wrap:hover img:first-child {
/* Reset the old aggressive hover rules so they don't apply universally */
opacity: 1 !important;
transform: none !important;
}
/* ONLY apply the fade-out if there is actually a secondary image to show */
.zevco-product-image-wrap.has-secondary-image:hover img:first-of-type,
.zevco-product-image-wrap.has-secondary-image:hover img:first-child {
opacity: 0 !important;
transform: scale(1.03) !important;
}
/* Ensure the secondary image still fades in properly */
.zevco-product-image-wrap.has-secondary-image:hover .zevco-secondary-image {
opacity: 1 !important;
transform: scale(1.03) !important;
}
/* B1G1 Badge Styling */
.zevco-card-badge.badge-b1g1 {
background: #a57e53;
color: #fff;
font-weight: 700;
}
/* =============================================================================
SINGLE PRODUCT — Variation div layout-shift fix
The .woocommerce-variation div normally pops in above qty/ATC and
shifts everything down. We suppress it entirely since we show
stock count inline inside .zevco-availability via JS.
============================================================================= */
/* Collapse the shifting variation placeholder by default */
.woocommerce-variation.single_variation {
display: none !important;
}
/* Inline stock count sits right after the Availability status text */
.zevco-availability {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
/* The "X in stock" injected span */
.zevco-stock-inline {
font-size: 13px;
color: #555;
}
/* Product description (excerpt) — pushed to last, give it a top separator */
.woocommerce-product-details__short-description {
margin-top: 20px !important;
padding-top: 16px !important;
border-top: 1px solid #e8e0d8 !important;
}
/* =============================================================================
SINGLE PRODUCT MOBILE — Tighten spacing between Availability, Size & Qty
============================================================================= */
@media (max-width: 768px) {
/* Less bottom gap after price+availability block */
.summary .price {
margin-bottom: 12px !important;
}
.zevco-availability {
margin-top: 4px !important;
margin-bottom: 12px !important;
}
/* Less gap between size swatch table and qty row */
.summary table.variations {
margin-bottom: 8px !important;
}
.woocommerce-variation-add-to-cart,
.variations_button {
margin-top: 8px !important;
padding-top: 0 !important;
}
/* Tighten the reset-variation link space */
.summary a.reset_variations {
margin-top: 4px !important;
}
}
/* =============================================================================
SINGLE PRODUCT — B1G1 Scrolling Marquee Strip (after size swatches)
Fully contained — text scrolls left within the green bar, no overflow.
============================================================================= */
.zevco-pdp-marquee-wrap {
width: 100%;
max-width: 100%;
overflow: hidden; /* clips the text at both edges */
box-sizing: border-box;
background: #846342;
border-radius: 4px;
padding: 9px 0;
margin: 12px 0;
}
.zevco-pdp-marquee-text {
display: inline-block; /* inline-block so it sizes to the two spans */
white-space: nowrap;
color: #fff;
font-weight: 700;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
animation: zevco-pdp-scroll 35s linear infinite;
will-change: transform;
}
@keyframes zevco-pdp-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* =============================================================================
SINGLE PRODUCT — Price highlight (sale price bigger, MRP smaller & greyed)
============================================================================= */
/* Sale price (the actual price — inside ) */
.summary .price ins,
.summary .price > .woocommerce-Price-amount {
text-decoration: none !important;
color: #c0392b !important;
font-size: 28px !important;
font-weight: 700 !important;
}
/* MRP / strikethrough price */
.summary .price del {
color: #aaa !important;
font-size: 16px !important;
font-weight: 400 !important;
margin-left: 6px !important;
}
/* Save badge — show % off inline */
.summary .price del .woocommerce-Price-amount {
font-size: 16px !important;
}
/* =============================================================================
FIX: Marquee contained within the variations form flex container
The form is display:flex/flex-wrap:wrap. Without flex:0 0 100%, the marquee
wrap acts as an auto-width flex item and expands the form beyond its bounds.
============================================================================= */
/* Outer block wrapper — safe to clip, it's just a div */
.wc-block-add-to-cart-form {
overflow: hidden;
max-width: 100%;
}
/* Make the marquee a full-width row inside the flex form */
.variations_form .zevco-pdp-marquee-wrap {
flex: 0 0 100%; /* force full row, ignore auto intrinsic size */
width: 100%;
min-width: 0; /* allow flex item to shrink below content size */
box-sizing: border-box;
overflow: hidden;
}
/* =============================================================================
SINGLE PRODUCT — Reduce Size Swatches Spacing
============================================================================= */
/* Tighten the wrapper margins */
.summary table.variations {
margin-bottom: 5px !important;
}
.summary table.variations tr {
margin-bottom: 5px !important;
}
/* Move the label (e.g. "size") closer to the buttons */
.summary table.variations th.label {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Reduce internal padding inside the variation cell if any */
.summary table.variations td.value {
padding-bottom: 0 !important;
}
/* Tweak the swatches gap and top margin */
.zevco-swatches {
margin-top: 0 !important;
}
/* Tighten up the swatches themselves */
.zevco-swatch {
padding: 4px 10px !important;
}
/* =============================================================================
SINGLE PRODUCT — Override WooCommerce Core Padding & Margins on Variations
============================================================================= */
.woocommerce table.variations tr td,
.woocommerce table.variations tr th,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
padding-bottom: 0 !important;
padding-top: 0 !important;
line-height: 1.2 !important;
}
.woocommerce div.product form.cart .variations {
margin-bottom: 0 !important;
}
/* Ensure the label and swatches align nicely without extra height */
.summary table.variations tr {
display: flex !important;
align-items: center !important;
gap: 15px;
margin-bottom: 0 !important;
}
.summary table.variations th.label {
width: auto !important;
margin-bottom: 0 !important;
}
.summary table.variations td.value {
margin-bottom: 0 !important;
}
/* Reset any default margin/padding from the reset link container if it's adding height */
.summary a.reset_variations {
margin: 0 !important;
}
/* =============================================================================
SINGLE PRODUCT — Override Gutenberg flow layout margin for ATC form
============================================================================= */
:root :where(.is-layout-flow) > .wc-block-add-to-cart-form,
:root :where(.is-layout-flow) > .wp-block-woocommerce-add-to-cart-form {
margin-block-start: 0 !important;
margin-top: 0 !important;
}
/* Apply the flex constraint to the marquee on BOTH simple and variable products */
.cart .zevco-pdp-marquee-wrap {
flex: 0 0 100% !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* =============================================================================
FOOTER — Custom Background Color Override
============================================================================= */
footer .wp-block-group.has-background {
background-color: #84634224 !important;
}
/* Ensure Related Products Grid caps at 4 columns */
.woocommerce .related.products ul.products,
.zevco-related-products-section ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 60px) / 4)), 1fr)) !important;
justify-content: center !important;
gap: 20px !important;
}
/* Prevent View Cart & Checkout buttons from growing on hover */
.wc-block-mini-cart__footer a:hover,
.wc-block-components-checkout-button:hover,
.wc-block-mini-cart__footer .components-button:hover,
.checkout-button:hover {
transform: none !important;
scale: 1 !important;
letter-spacing: inherit !important;
padding: inherit !important;
}
/* ── Elegant WooCommerce Notices (Checkout & Cart) ── */
/* Override default blue/green backgrounds and borders for both Classic and Block checkouts */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
background-color: #fdfaf7 !important; /* Warm luxury off-white */
border: 1px solid #e5d8c8 !important; /* Soft brown border */
border-top: 1px solid #e5d8c8 !important; /* Overrides the thick blue top border */
color: #3a2a22 !important;
border-radius: 6px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
padding: 18px 24px !important;
}
/* Hide the default bright blue "i" and green checkmark icons completely */
.woocommerce-info::before,
.woocommerce-message::before,
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner__icon {
display: none !important;
}
/* Ensure text isn't indented strangely after removing the icon */
.wc-block-components-notice-banner__content {
margin-left: 0 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100%;
}
/* Style the "Click here to login / enter code" links to match the brand */
.woocommerce-info a,
.woocommerce-message a,
.wc-block-components-notice-banner a {
color: #846342 !important;
font-weight: 600 !important;
text-decoration: none !important;
border-bottom: 1px solid #846342 !important;
transition: all 0.2s ease !important;
}
.woocommerce-info a:hover,
.wc-block-components-notice-banner a:hover {
color: #3a2a22 !important;
border-bottom-color: #3a2a22 !important;
}
/* Mobile responsiveness */
@media (max-width: 600px) {
.wc-block-components-notice-banner__content {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
}
}
/* ── Fix Oversized Login Form on Checkout ── */
form.woocommerce-form-login p {
font-size: 15px !important;
line-height: 1.6 !important;
margin-bottom: 15px !important;
color: #555 !important;
}
form.woocommerce-form-login .lost_password a {
font-size: 14px !important;
font-weight: 500 !important;
text-decoration: none !important;
border-bottom: 1px solid currentColor !important;
}
/* Style the checkout login form into a neat, compact box */
.woocommerce-checkout form.woocommerce-form-login {
max-width: 500px !important;
padding: 25px !important;
background-color: #ffffff !important;
border: 1px solid #e5d8c8 !important;
border-radius: 8px !important;
margin: 20px 0 30px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
}
.woocommerce-checkout form.woocommerce-form-login .form-row {
margin-bottom: 15px !important;
}
/* Make the login button span full width for a modern look */
.woocommerce-checkout form.woocommerce-form-login button[type="submit"] {
width: 100% !important;
margin-top: 10px !important;
padding: 12px !important;
}
/* ── UI AUDIT: Luxury Aesthetic Refinements ── */
/* 1. Black Primary CTAs (Quiet Luxury) */
.button.add_to_cart_button,
.button.single_add_to_cart_button,
.woocommerce-checkout form.woocommerce-form-login button[type="submit"],
.checkout-button {
background-color: #171717 !important;
color: #ffffff !important;
font-weight: 500 !important;
letter-spacing: 0.5px !important;
border-radius: 4px !important;
transition: background-color 0.3s ease !important;
}
.button.add_to_cart_button:hover,
.button.single_add_to_cart_button:hover,
.checkout-button:hover {
background-color: #333333 !important;
}
/* 2. Refined, Restrained Sale Badges */
span.onsale,
.woocommerce span.onsale {
background-color: #f8f6f2 !important;
color: #171717 !important;
border: 1px solid #e6e0d7 !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
padding: 4px 10px !important;
border-radius: 20px !important;
box-shadow: none !important;
min-width: auto !important;
min-height: auto !important;
line-height: 1 !important;
top: 15px !important;
left: 15px !important;
right: auto !important;
}
/* ── UI AUDIT: Product Card Wishlist Icon (Visual) ── */
.woocommerce ul.products li.product {
position: relative;
}
.woocommerce ul.products li.product .zevco-product-image-wrap::after {
content: "♡";
position: absolute;
top: 15px;
right: 15px;
font-size: 22px;
color: #171717;
z-index: 10;
cursor: pointer;
background: #fff;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: all 0.3s ease;
line-height: 1;
}
.woocommerce ul.products li.product .zevco-product-image-wrap::after:hover {
background: #f8f6f2;
transform: scale(1.1);
}
/* ── UI AUDIT: Elegant Product Cards ── */
.woocommerce ul.products li.product {
text-align: center !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 14px !important;
font-weight: 500 !important;
color: #171717 !important;
margin-top: 15px !important;
margin-bottom: 5px !important;
letter-spacing: 0.5px !important;
}
.woocommerce ul.products li.product .price {
font-size: 15px !important;
color: #B08A4A !important; /* Elegant gold for price */
font-weight: 500 !important;
margin-bottom: 15px !important;
}
.woocommerce ul.products li.product .price del {
color: #999 !important;
font-size: 13px !important;
margin-right: 5px !important;
}
.woocommerce ul.products li.product .star-rating {
margin: 0 auto 10px !important;
font-size: 12px !important;
}