/*
Theme Name: Sophia Lite
Description: Sophia 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-sophia-free.wpcustomthemes.com
Version: 1.0.5
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/sophia
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sophia-lite
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
Sophia Lite WordPress Theme, Copyright 2025 WP Custom Themes
Sophia Lite 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 {
text-decoration: underline;
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 {
text-decoration-thickness: 1px;
text-underline-offset: 0.25ch;
}
a {
text-decoration: underline;
}
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.home .wp-block-header {
background-color: var(--wp--preset--color--body-background-deep) !important;
}
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;
}
.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: 991px) {
.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: #25D366 !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;
}
/* ==========================================================================
Sophialite Premium Shop Layout
========================================================================== */
/* Main Container */
.sophia-custom-shop-grid {
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
}
@media (max-width: 1024px) {
.sophia-custom-shop-grid {
padding: 0 20px;
}
}
@media (max-width: 768px) {
.sophia-custom-shop-grid {
padding: 0 15px;
}
}
/* Product Grid (WooCommerce Standard Loop Override) */
.sophia-custom-shop-grid ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 30px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.sophia-custom-shop-grid ul.products::before,
.sophia-custom-shop-grid ul.products::after {
display: none !important;
}
/* 1. Ensure the product list item is the anchor */
.sophia-custom-shop-grid ul.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 */
.sophia-custom-shop-grid ul.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 */
}
.sophia-custom-shop-grid ul.products li.product br {
display: none !important;
}
/* Ensure the image container has no top margin */
.sophia-custom-shop-grid ul.products li.product a 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 */
.sophia-custom-shop-grid ul.products li.product::before,
.sophia-custom-shop-grid ul.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 */
.sophia-custom-shop-grid ul.products li.product a img {
display: block !important;
margin-top: 0 !important;
/* Forces image to top of container */
}
.sophia-custom-shop-grid ul.products li.product:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
@media (max-width: 1024px) {
.sophia-custom-shop-grid ul.products {
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 768px) {
.sophia-custom-shop-grid {
padding: 0 16px !important;
}
.sophia-custom-shop-grid ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.sophia-custom-shop-grid ul.products li.product {
padding: 10px !important;
border-radius: 6px !important;
}
.sophia-custom-shop-grid ul.products li.product a img {
margin-bottom: 10px !important;
border-radius: 4px !important;
}
.sophia-custom-shop-grid ul.products li.product .woocommerce-loop-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;
}
.sophia-custom-shop-grid ul.products li.product .price {
font-size: 15px !important;
margin-bottom: 8px !important;
}
.sophia-custom-shop-grid ul.products li.product .button {
width: 50% !important;
font-size: 13px !important;
padding: 8px 10px !important;
height: auto !important;
margin: 0 auto !important;
}
}
/* Product Images */
.sophia-custom-shop-grid ul.products li.product a 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;
}
/* Typography: Title */
.sophia-custom-shop-grid ul.products li.product .woocommerce-loop-product__title {
font-size: 16px !important;
font-weight: 500 !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 */
.sophia-custom-shop-grid ul.products li.product p {
margin: 0 !important;
padding: 0 !important;
}
/* Typography: Price */
.sophia-custom-shop-grid ul.products li.product .price {
font-size: 18px !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 */
}
/* Buttons */
.sophia-custom-shop-grid ul.products li.product .button {
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.5 !important;
text-decoration: none !important;
transition: opacity 0.3s ease !important;
border: none !important;
}
.sophia-custom-shop-grid ul.products li.product .button.whatsapp-btn {
background-color: #25D366 !important;
color: #fff !important;
}
.sophia-custom-shop-grid ul.products li.product .button.add_to_cart_button,
.sophia-custom-shop-grid ul.products li.product .button.product_type_simple,
.sophia-custom-shop-grid ul.products li.product .button.product_type_variable {
background-color: var(--wp--preset--color--primary) !important;
color: #fff !important;
}
.sophia-custom-shop-grid ul.products li.product .button:hover {
opacity: 0.9 !important;
}
/* ==========================================================================
Sophia Advanced WooCommerce Layout & Alignments
========================================================================== */
/* Equal Height Cards - Push buttons to bottom */
.sophia-custom-shop-grid ul.products li.product .price {
flex-grow: 0 !important;
/* Reset from previous */
margin-bottom: 20px !important;
}
.sophia-custom-shop-grid ul.products li.product .button.whatsapp-btn {
margin-top: auto !important;
/* Pushes both buttons to bottom */
}
.sophia-custom-shop-grid ul.products li.product .button {
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: #3b82f6 !important;
/* Lighter blue */
}
.button.whatsapp-btn {
background-color: #25D366 !important;
color: #fff !important;
}
.button.whatsapp-btn:hover {
background-color: #20b858 !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) */
.sophia-single-product-actions {
margin-bottom: 30px;
}
.sophia-single-product-actions form.cart {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.sophia-single-product-actions form.cart .quantity {
display: flex;
align-items: center;
}
.sophia-single-product-actions form.cart .quantity input.qty {
width: 60px;
height: 44px;
text-align: center;
border: 1px solid #ddd;
border-radius: 4px;
}
.sophia-single-product-actions form.cart .button {
flex-grow: 1;
height: 44px;
margin: 0 !important;
}
.sophia-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 */
.sophia-product-meta {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eeeeee;
font-size: 15px;
color: #555555;
}
.sophia-product-meta .meta-line {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.sophia-product-meta .meta-line strong {
color: #333333;
}
.sophia-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;
}
.woocommerce ul.products li.product .price {
font-size: 16px !important;
font-weight: 600 !important;
color: #333 !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 */
.sophia-50-50-layout {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.sophia-product-gallery-column {
flex: 1 1 45%;
}
.sophia-product-summary-column {
flex: 1 1 45%;
}
/* 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) {
.sophia-50-50-layout {
flex-direction: column;
gap: 24px;
}
.sophia-product-gallery-column,
.sophia-product-summary-column {
flex: 1 1 100%;
width: 100%;
}
.sophia-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: 6px;
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 .sophia-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 .sophia-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 */
.sophia-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 .sophia-whatsapp-block {
margin-bottom: 16px;
}
.single-product-camera .sophia-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 .sophia-single-meta {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--wp--preset--color--border-color);
font-size: 14px;
}
.single-product-camera .sophia-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 .sophia-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 .sophia-add-to-cart-block .sophia-qty-btn {
width: 36px;
height: 40px;
border: none;
background: var(--wp--preset--color--background);
cursor: pointer;
font-size: 16px;
}
.single-product-camera .sophia-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 .sophia-add-to-cart-block table.group_table {
width: 100%;
border-collapse: collapse;
margin-bottom: 16px;
}
.single-product-camera .sophia-add-to-cart-block table.group_table td {
padding: 10px 0;
vertical-align: middle;
border-bottom: 1px solid var(--wp--preset--color--border-color);
}
.single-product-camera .sophia-add-to-cart-block table.group_table td.woocommerce-grouped-product-list-item__quantity {
width: 110px;
}
.single-product-camera .sophia-add-to-cart-block .sophia-buy-now-button {
padding-bottom: 15px !important;
border-radius: 5px !important;
}
.single-product-camera .sophia-add-to-cart-block form.cart {
width: 100% !important;
}
.single-product-camera .sophia-add-to-cart-block {
width: 100% !important;
}
/* Make Add to Cart bigger */
.single-product-camera .sophia-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 .sophia-add-to-cart-block .quantity {
height: 48px !important;
display: flex !important;
align-items: center !important;
}
/* Minus / Plus buttons */
.single-product-camera .sophia-add-to-cart-block .sophia-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 .sophia-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 .sophia-add-to-cart-block input.qty::-webkit-inner-spin-button,
.single-product-camera .sophia-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 .sophia-add-to-cart-block form.cart,
.sophia-50-50-layout form.cart {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
}
.single-product-camera .sophia-add-to-cart-block form.cart .quantity,
.sophia-50-50-layout form.cart .quantity {
flex: 0 0 auto;
}
.single-product-camera .sophia-add-to-cart-block form.cart .whatsapp-btn,
.sophia-50-50-layout form.cart .whatsapp-btn {
flex: 1;
margin: 0 !important;
}
.single-product-camera .sophia-add-to-cart-block form.cart .single_add_to_cart_button,
.single-product-camera .sophia-add-to-cart-block form.cart .sophia-buy-now-button,
.sophia-50-50-layout form.cart .single_add_to_cart_button,
.sophia-50-50-layout form.cart .sophia-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,
.sophia-50-50-layout / .sophia-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 -------------------------- */
.sophia-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 .sophia-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 .sophia-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 .sophia-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 .sophia-sticky-atc-bar (see custom.js + the rules below). */
.summary .single_add_to_cart_button,
.summary .sophia-buy-now-button,
.single-product-camera .sophia-add-to-cart-block form.cart .single_add_to_cart_button,
.single-product-camera .sophia-add-to-cart-block form.cart .sophia-buy-now-button {
/* Hide visually on mobile to avoid duplication with the smart sticky bar */
display: none !important;
}
}
/** ==========================================================
* Sophia 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 .sophia-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 .sophia-qty-inquiry-row .quantity {
display: flex;
align-items: stretch;
flex: 0 0 auto;
margin: 0;
}
.woocommerce div.product form.cart .sophia-qty-inquiry-row .quantity .sophia-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 .sophia-qty-inquiry-row .quantity .sophia-qty-btn:first-child {
border-radius: 5px 0 0 5px;
margin-left: 0 !important;
padding-left: 0 !important;
}
.woocommerce div.product form.cart .sophia-qty-inquiry-row .quantity .sophia-qty-btn:last-child {
border-radius: 0 5px 5px 0;
}
.woocommerce div.product form.cart .sophia-qty-inquiry-row .quantity .sophia-qty-btn:hover,
.woocommerce div.product form.cart .sophia-qty-inquiry-row .quantity .sophia-qty-btn:focus {
background: var(--wp--preset--color--border-color);
color: var(--wp--preset--color--body-text);
}
.woocommerce div.product form.cart .sophia-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 .sophia-qty-inquiry-row .quantity input.qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .sophia-qty-inquiry-row .quantity input.qty::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.woocommerce div.product form.cart .sophia-qty-inquiry-row p {
margin: 0;
padding: 0;
padding-top: 8px;
}
.woocommerce div.product form.cart .sophia-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: -4px !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 .sophia-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 .sophia-cart-buynow-row>p:has(button.sophia-buy-now-button) {
display: contents !important;
}
.woocommerce div.product form.cart .sophia-cart-buynow-row>p:empty {
display: none !important;
}
.woocommerce div.product form.cart .sophia-cart-buynow-row button.single_add_to_cart_button,
.woocommerce div.product form.cart .sophia-cart-buynow-row button.sophia-buy-now-button,
.woocommerce div.product form.cart .sophia-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 .sophia-cart-buynow-row button.single_add_to_cart_button,
.woocommerce div.product form.cart .sophia-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 .sophia-cart-buynow-row button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .sophia-cart-buynow-row button.single_add_to_cart_button:focus {
background-color: #cccccc !important;
color: #333333 !important;
}
.woocommerce div.product form.cart .sophia-cart-buynow-row button.sophia-buy-now-button {
background-color: var(--wp--preset--color--button-color) !important;
border: 1px solid var(--wp--preset--color--button-color) !important;
color: var(--wp--preset--color--light) !important;
}
.woocommerce div.product form.cart .sophia-cart-buynow-row button.sophia-buy-now-button:hover,
.woocommerce div.product form.cart .sophia-cart-buynow-row button.sophia-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 .sophia-cart-buynow-row button.single_add_to_cart_button,
.woocommerce div.product form.cart .sophia-cart-buynow-row button.sophia-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 .sophia-sticky-atc-bar instead. */
@media screen and (max-width: 768px) {
.woocommerce div.product form.cart .sophia-cart-buynow-row {
display: none !important;
}
}
/* Mobile sticky Add to Cart / Buy Now bar (built by custom.js) */
.sophia-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;
}
.sophia-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;
}
.sophia-sticky-atc-bar .sophia-sticky-add-to-cart {
background-color: #e0e0e0;
color: #333333;
}
.sophia-sticky-atc-bar .sophia-sticky-buy-now {
background-color: var(--wp--preset--color--button-color);
color: var(--wp--preset--color--light);
}
.sophia-sticky-atc-bar.is-visible {
transform: translateY(0);
}
@media screen and (max-width: 768px) {
.sophia-sticky-atc-bar {
display: flex;
}
}
.woocommerce ul.products li.product>p {
display: none !important;
}
/* Custom Header Search */
.sophia-header-search {
position: relative;
display: inline-flex;
align-items: center;
margin-left: 10px;
}
.sophia-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;
}
.sophia-search-toggle:hover {
opacity: 0.8 !important;
}
.sophia-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%;
}
.sophia-header-search.is-active .sophia-search-dropdown {
display: block;
}
.sophia-search-dropdown form {
display: flex;
gap: 8px;
margin: 0;
}
.sophia-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;
}
.sophia-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;
}
.sophia-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 */
.sophia-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,
.sophia-custom-shop-grid ul.products li.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,
.sophia-custom-shop-grid ul.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;
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) --- */
.sophia-availability {
font-size: 14px;
margin-top: 10px;
margin-bottom: 20px;
color: #333;
}
.sophia-availability .stock.in-stock {
color: #1a73e8;
}
/* --- Task 4: Fix buy now button text to be in center --- */
button.sophia-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 .sophia-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;
}
}
.