:root {
--section-spacing: 100px;
--g30: 30px;
--g20: 20px;
--theme-green: #196D0C;
--theme-green-dark: #1a700e;
--white: #ffffff;
--theme-black: #101010;
--silver-mist: #d5d8dc;
--pf-rail-border: #c7cace;
--pf-box-border: #e4e6e9;
--pd-line: #dee2e6;
--pf-thumb-w: 14px;
--pf-thumb-h: 22px;
--pf-rail-h: 8px;
}
/* Tablet */
@media (max-width: 1024px) {
:root {
--section-spacing: 80px;
}
}
@media (max-width: 991px) {
:root {
--g30: 20px;
}
}
/* Mobile */
@media (max-width: 767px) {
:root {
--section-spacing: 50px;
}
}
.h-mb-0 .elementor-heading-title {
margin-bottom: 0 !important;
}
.woocommerce-page .page-header {
display: none;
}
body.woocommerce-page .woocommerce {
font-family: 'Poppins';
}
body.woocommerce-page h1,
body.woocommerce-page h2,
body.woocommerce-page h3,
body.woocommerce-page h4,
body.woocommerce-page h5,
body.woocommerce-page h6 {
font-weight: 500 !important;
margin-bottom: 25px !important;
}
body.woocommerce-page p>a {
color: var(--theme-green) !important;
font-size: 14px;
}
body:has(.page-title-section) .page-header {
display: none;
}
/* #customer_login .col-2 p, */
#customer_login .col-2 p>a {
font-size: 16px;
}
#customer_login .col-1 {
background-color: #F0F2F4;
padding: 10px 15px;
}
#customer_login .col-1 form.woocommerce-form.woocommerce-form-login {
background: transparent;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
.woocommerce-page.woocommerce-lost-password .woocommerce {
display: flex;
justify-content: center;
}
.woocommerce-ResetPassword p {
font-size: 16px;
}
.woocommerce-button,
.woocommerce-Button,
.woocommerce a.button,
.woocommerce .button {
outline: 0;
border-style: solid !important;
border-width: 2px 2px 2px 2px !important;
border-color: var(--theme-green) !important;
border-radius: 100px 100px 100px 100px !important;
min-width: 190px;
background-color: var(--theme-green) !important;
color: var(--white) !important;
text-align: center;
transition: all .3s;
padding: 12px 24px !important;
letter-spacing: 0.7px;
font-size: 16px !important;
}
.woocommerce-button:hover,
.woocommerce-Button:hover,
.woocommerce a.button:hover,
.woocommerce .button:hover {
background-color: var(--white) !important;
color: var(--theme-green) !important;
}
.woocommerce .coupon input {
height: 100% !important;
}
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
margin-top: 6px;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link.is-active>a {
background: var(--theme-green) !important;
color: var(--white) !important;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link>a {
font-weight: 500 !important;
color: var(--theme-black) !important;
transition: all .3s;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--payment-methods > a {
text-transform: capitalize;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link:hover>a {
background: var(--theme-green) !important;
color: var(--white) !important;
transition: all .3s;
}
/* 03-08 */
.e-my-account-tab .woocommerce a:hover {
text-decoration: underline !important;
}
.logged-in .e-my-account-tab nav ul li a:hover,
.e-my-account-tab .woocommerce .button:hover {
text-decoration: none !important;
}
.e-my-account-tab .woocommerce #customer_login .u-column {
box-shadow: 0 0.3rem 0.8rem rgb(0 0 0 / 12%);
background: #fff;
padding: 1.2rem;
border-radius: 0.375rem;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body {
padding: 1.5rem;
border-radius: 0.375rem;
border: 1px solid var(--silver-mist);
}
.e-my-account-tab .woocommerce #customer_login .u-column-body h2 {
text-align: center;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .woocommerce-form {
border: 0;
margin-block: 0;
padding-bottom: 0;
height: auto !important;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .woocommerce-form .input-text,
.logged-in .e-my-account-tab__edit-account .woocommerce .woocommerce-MyAccount-content .edit-account .form-row .input-text {
outline: none;
padding: 10px 12px;
background-color: #fff;
border: 1px solid var(--silver-mist);
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .woocommerce-form .input-text:focus,
.logged-in .e-my-account-tab__edit-account .woocommerce .woocommerce-MyAccount-content .edit-account .form-row .input-text:focus {
border-color: rgba(25, 109, 12, 0.62);
box-shadow: 0 0 0 .25rem rgba(25, 109, 12, 0.25);
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .woocommerce-form label {
font-weight: 500;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-half-column {
display: flex;
margin: 10px 0 0;
padding-bottom: 0;
align-items: center;
justify-content: space-between;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-half-column label,
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-half-column .lost_password {
flex: 1;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-half-column label {
margin: 0;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .woocommerce-form .woocommerce-form__input-checkbox {
cursor: pointer;
margin-top: -2px;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-half-column .lost_password {
text-align: right;
font-weight: bold;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-button {
margin-top: 1rem;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-button .button {
width: 100%;
margin-right: 0;
}
/* Dashboard */
.logged-in .e-my-account-tab {
box-shadow: 0 0.3rem 0.8rem rgb(0 0 0 / 12%);
background: #fff;
padding: 1.2rem;
border-radius: 0.375rem;
}
.logged-in .e-my-account-tab .woocommerce {
padding: 1.5rem;
border-radius: 0.375rem;
border: 1px solid var(--silver-mist);
}
.logged-in .e-my-account-tab nav ul li:not(.is-active) a {
background-color: #fff !important;
}
.logged-in .e-my-account-tab .woocommerce-MyAccount-content-wrapper {
border: 0 !important;
padding: 0 !important;
}
.logged-in .e-my-account-tab nav ul li {
margin: 0;
}
.logged-in .e-my-account-tab nav ul li:not(:last-child) a {
border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
}
.logged-in .e-my-account-tab nav ul li:not(.is-active) a {
background-color: #fff !important;
}
.logged-in .e-my-account-tab nav ul li:not(.is-active) a:hover {
color: var(--theme-green) !important;
}
.logged-in .e-my-account-tab .woocommerce-info {
border-top-color: var(--theme-green);
}
.logged-in .e-my-account-tab .woocommerce-info:before {
color: var(--theme-green);
}
/* Dashboard */
/* 03-08 */
/* Address */
.e-my-account-tab__edit-address .woocommerce-address-fields {
padding: 12px 20px !important;
}
.e-my-account-tab__edit-address .woocommerce-Address-title h2 {
font-size: 1.5rem;
margin-top: 0 !important;
margin-bottom: 15px !important;
}
.e-my-account-tab__edit-address .woocommerce-Address-title .edit {
font-size: 16px;
margin-top: 16px !important;
color: var(--theme-black) !important;
}
.e-my-account-tab__edit-address .woocommerce-Address address {
height: auto !important;
padding-top: 50px !important;
}
.e-my-account-tab__edit-address .woocommerce-MyAccount-content form h2 {
margin-top: 0 !important;
font-size: 1.5rem;
}
.e-my-account-tab__edit-address .woocommerce-MyAccount-content form h2 {
margin-top: 0 !important;
font-size: 1.5rem;
}
.e-my-account-tab__edit-address .woocommerce-MyAccount-content form .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row .woocommerce-input-wrapper input {
border: 1px solid var(--silver-mist);
padding: 10px 12px;
background-color: var(--white);
outline: 0;
}
.e-my-account-tab__edit-address .woocommerce-MyAccount-content form .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row .woocommerce-input-wrapper .select2-container--default {
border: 1px solid var(--silver-mist);
background-color: var(--white);
}
.e-my-account-tab__edit-address .woocommerce-MyAccount-content form .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row .woocommerce-input-wrapper .select2-container--default .select2-selection {
outline: 0;
height: 100%;
background-color: var(--white);
}
.e-my-account-tab__edit-address .woocommerce-MyAccount-content form .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row .woocommerce-input-wrapper .select2-container--default .select2-selection .select2-selection__rendered {
outline: 0;
padding: 10px 12px;
line-height: 1.672;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
outline: 0;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
color: var(--white);
background-color: var(--theme-green);
}
.e-my-account-tab__edit-address .woocommerce-MyAccount-content form .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row .woocommerce-input-wrapper input:focus,
.e-my-account-tab__edit-address .woocommerce-MyAccount-content form .woocommerce-address-fields .woocommerce-address-fields__field-wrapper .form-row .woocommerce-input-wrapper .select2-container--default .select2-selection:focus {
border-color: rgba(25, 109, 12, 0.62);
box-shadow: 0 0 0 .25rem rgba(25, 109, 12, 0.25);
}
/* Address */
/* My Account Orders */
.e-my-account-tab__orders .woocommerce-MyAccount-content table tr .woocommerce-orders-table__cell-order-number a {
color: var(--theme-green) !important;
}
.e-my-account-tab__orders .woocommerce-MyAccount-content table tr .woocommerce-orders-table__cell-order-actions .button {
min-width: auto;
font-weight: 500;
font-size: 14px !important;
padding: 8px 16px !important;
}
.e-my-account-tab__view-order .woocommerce-order-details,
.e-my-account-tab__view-order .woocommerce-order-details .order_details {
margin-bottom: 1rem;
}
.e-my-account-tab__view-order .woocommerce-order-details h2,
.e-my-account-tab__view-order .woocommerce-customer-details h2 {
font-size: 1.5rem;
}
.e-my-account-tab__view-order .woocommerce-order-details .product-name a {
color: var(--theme-green) !important;
}
.e-my-account-tab__view-order .woocommerce-customer-details {
margin-bottom: 0;
}
.woocommerce-order {
/* Ink & neutrals */
--wc-ink: #1e2429;
--wc-body: #4a545c;
--wc-muted: #7b868f;
--wc-line: #e3e7ea;
--wc-line-strong: #c6ced4;
--wc-surface: #f7f9fa;
/* Accent — matches the existing green product links */
--wc-accent: #5f9b2d;
--wc-accent-ink: #3f6c1c;
--wc-accent-soft: #eff6e8;
/* Type. Body inherits the theme face on purpose — CSS can't add a ,
so no webfont is introduced. --wc-font-data is a system mono stack. */
/* Rhythm */
--wc-gap: 1.5rem;
--wc-radius: 4px;
color: var(--wc-body);
/* Optional: delete these two lines if the theme already constrains width. */
margin-inline: auto;
}
.woocommerce-order .woocommerce-notice--success {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1.75rem;
padding: 1rem 1.25rem;
border: 1px solid var(--wc-line);
border-left: 3px solid var(--wc-accent);
border-radius: var(--wc-radius);
background: var(--wc-accent-soft);
color: var(--wc-accent-ink);
font-size: 1rem;
font-weight: 500;
line-height: 1.45;
}
.woocommerce-order .woocommerce-thankyou-order-received::before {
content: "";
flex: 0 0 auto;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: var(--wc-accent);
/* Tick glyph masked out of the disc, so it inherits the accent colour. */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.woocommerce-order .woocommerce-order-overview {
display: flex;
flex-wrap: wrap;
gap: var(--g30);
--item: 5;
padding-left: 0;
}
.woocommerce-order .woocommerce-order-overview:before,
.woocommerce-order .woocommerce-order-overview:after {
display: none !important;
}
.woocommerce-order ul.woocommerce-order-overview li {
flex: 0 0 auto;
width: calc((100% / var(--item)) - (var(--g30) * (var(--item) - 1) / var(--item)));
background: var(--wc-surface);
padding: 0.875rem 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
border-radius: 0.375rem;
text-transform: capitalize;
font-size: 16px;
margin: 0;
overflow-wrap: anywhere;
border: 0;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
font-size: 16px;
}
.woocommerce-order .woocommerce-order-details .woocommerce-order-details__title {
font-size: 1.5rem;
padding-bottom: 0.875rem;
text-transform: capitalize;
border-bottom: 2px solid var(--theme-black);
}
.woocommerce-order .woocommerce-table--order-details tfoot tr:has(.amount):not(:has(~ tr .amount)) th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:has(.amount):not(:has(~ tr .amount)) td {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
border-top: 1px solid #c6ced4;
border-bottom: 2px solid var(--theme-black);
color: var(--theme-black);
font-size: 1.125rem;
font-weight: 700;
}
.woocommerce-order .woocommerce-Price-currencySymbol {
margin-right: 0.05em;
font-weight: inherit;
opacity: 0.75;
}
.woocommerce-order .woocommerce-order-details table.order_details {
font-size: 16px;
}
.woocommerce-order .woocommerce-table--order-details thead tr th:last-child,
.woocommerce-order .woocommerce-table--order-details tbody tr td:last-child,
.woocommerce-order .woocommerce-table--order-details tfoot tr td:last-child {
text-align: right;
}
.woocommerce-order .woocommerce-table--order-details tbody tr td:last-child {
font-weight: 500;
}
.woocommerce-order .woocommerce-customer-details h2 {
font-size: 1.5rem;
}
.woocommerce-order .woocommerce-customer-details address {
background: var(--wc-surface);
border-radius: 0;
padding: 15px 20px;
font-size: 16px;
line-height: 1.5;
border-width: 1px;
}
.woocommerce-order .woocommerce-customer-details address .woocommerce-customer-details--phone {
margin-top: .9rem;
}
/* My Account Orders */
/* Shop Page */
.page-id-3703 .page-header,
.page-id-3813 .page-header {
display: none;
}
.elementor-widget-wrap:has(.title-breadcrumb) {
padding: 0 !important;
}
.title-breadcrumb {
background: var(--theme-black);
}
.container {
width: 1400px;
display: flex;
max-width: 100%;
margin-inline: auto;
position: relative;
align-items: center;
padding-inline: 15px;
}
.breadcrumb-block {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.breadcrumb-block .bred-title h3 {
font-size: 18px;
margin-top: 15px;
line-height: 1.1;
color: var(--white);
text-transform: uppercase;
font-weight: bold !important;
margin-bottom: 15px !important;
}
.breadcrumb {
padding: 0px;
}
.breadcrumb>li {
display: inline-block;
}
.breadcrumb li a:hover {
color: var(--theme-green);
}
.breadcrumb li a {
color: #fff;
text-transform: uppercase;
}
.breadcrumb>li+li:before {
padding: 0 5px;
color: #fff;
content: "/\00a0";
}
.elementor-widget-wrap:has(.product-list-area) {
padding: 0 !important;
}
.product-list-area.section-padding {
padding: 60px 0 80px;
}
.row {
margin-inline: -15px;
width: 100%;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
padding-inline: 15px;
position: relative;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.brands,
.filter,
.colours,
.discount-range {
border: 1px solid #dee2e6;
}
.filter,
.colours,
.discount-range {
margin-top: 30px;
}
.filter-sidebar .brands h3,
.filter-sidebar .filter h3,
.filter-sidebar .colours h3,
.filter-sidebar .discount-range h3 {
background: #2c2e32 none repeat scroll 0 0;
color: var(--white);
font-size: 16px;
margin: 0 !important;
padding-block: 15px;
padding-inline: 20px;
text-transform: uppercase;
font-weight: bold;
border: 1px solid;
}
.brands ul,
.colours ul {
padding: 0;
}
.brands ul li,
.colours ul li {
border-bottom: 1px solid #dee2e6;
list-style: outside none none;
padding: 12px 25px;
color: #777777;
font-weight: 500;
}
.brands ul li:last-child,
.colours ul li:last-child {
border-bottom: 0;
}
.brands input[type="checkbox"],
.colours input[type="checkbox"] {
cursor: pointer;
margin-right: 5px;
}
.brands ul li span,
.colours ul li span {
float: right;
color: #777777;
}
.discount-range .discount-wrapper .form-check {
border-bottom: 1px solid #dee2e6;
padding: 12px 25px;
color: #777777;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.discount-range .discount-wrapper .form-check input[type="radio"] {
cursor: pointer;
margin-right: 5px;
}
.discount-range .discount-wrapper .form-check .form-check-label {
line-height: 1.5;
cursor: pointer;
}
.product-wrapper .toolbox {
display: flex;
align-items: center;
padding: 1rem;
gap: .5rem;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
}
.product-wrapper .toolbox .toolbox-right {
display: flex;
gap: .5rem;
}
.d-flex {
display: flex !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-grow-1 {
flex-grow: 1 !important;
}
.gap-1 {
gap: .25rem;
}
.align-items-center {
align-items: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-start {
justify-content: flex-start !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.mb-0 {
margin-bottom: 0;
}
.text-nowrap {
white-space: nowrap;
}
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
.overflow-hidden {
overflow: hidden;
}
.text-secondary {
color: #6c757d;
}
.text-decoration-line-through {
text-decoration: line-through;
}
.form-select {
display: block;
width: 100%;
padding: 6px 25px 6px 6px;
-moz-padding-start: calc(0.75rem - 3px);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--theme-black);
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 6px center;
background-size: 16px 12px;
border: 1px solid #ced4da;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
cursor: pointer;
}
.ms-3 {
margin-left: 1rem;
}
.product-wrapper .toolbox .toolbox-right .grid-list {
display: none;
}
.grid-list .btn {
border: 1px solid #ced4da;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
color: var(--theme-black);
}
.grid-list .btn:hover,
.grid-list.is-active .btn {
background-color: var(--theme-black);
color: #fff;
border-color: var(--theme-black);
}
.product-row {
display: flex;
flex-wrap: wrap;
gap: var(--g30);
--item: 3;
}
.product-row .product-col {
flex: 0 0 auto;
width: calc((100% / var(--item)) - (var(--g30) * (var(--item) - 1) / var(--item)));
}
.filter-wrapper {
width: 100%;
display: flex;
}
@media screen and (min-width:1200px) {
.filter-wrapper { gap: 30px; }
.filter-wrapper .filter-column{width:25%;}
.filter-wrapper .filter-body{width:75%;}
}
@media screen and (max-width:1199.98px) {
.filter-wrapper { flex-flow: column; }
}
.product-grid .card {
display: flex;
overflow: hidden;
position: relative;
word-wrap: break-word;
flex-direction: column;
background-color: var(--white);
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
border: 1px solid #dee2e6;
}
.product-grid .card a {
display: flex;
color: var(--theme-green);
}
.product-grid .card a img {
width: 100%;
height: 250px;
object-fit: contain;
}
.product-grid .card .button.product_type_simple {
margin-top: 10px;
justify-content: center;
}
.product-grid .card .add-cart {
top: 0;
right: 0;
opacity: 0;
z-index: 5;
visibility: hidden;
margin: 1rem 1rem 0 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.product-grid .card:hover .add-cart {
opacity: 1;
visibility: visible;
transition: visibility 0s linear 0s, opacity 300ms;
}
.product-grid .card .add-cart a {
color: var(--theme-black);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #fff;
border: 1px solid #d7d7d7;
font-size: 14px;
}
.product-grid .card .card-body {
padding: 1rem;
flex: 1 1 auto;
border-top: 1px solid #dee2e6;
}
.product-grid .card .product-short-name {
color: #757575;
font-weight: 500;
margin-bottom: .25rem;
}
.product-grid .card .product-short-title {
margin-block: 0 !important;
font-weight: 600 !important;
}
.product-grid .card .card-body .rating {
cursor: pointer;
font-size: 12px;
color: #757575;
margin-top: .5rem;
}
.product-grid .card .card-body .rating .selected {
color: #ffc107;
}
.product-grid .card .card-body .product-price {
gap: .5rem;
margin-bottom: 0;
margin-top: .5rem;
font-weight: bold;
}
.filter-body .hr {
opacity: .25;
color: inherit;
margin: 3rem 0;
border-top: 0.1px solid;
}
.product-wrapper .pagination {
padding-left: 0;
list-style: none;
margin: 0;
}
.product-wrapper .pagination .page-link {
position: relative;
display: block;
padding: 0.375rem 0.75rem;
background-color: #fff;
border: 1px solid #dee2e6;
color: var(--theme-black);
font-weight: 500;
}
.product-wrapper .pagination .page-item.disabled .page-link {
opacity: 0.6;
cursor: not-allowed;
}
.product-wrapper .pagination .page-item:first-child .page-link {
border-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem;
}
.product-wrapper .pagination .page-item:last-child .page-link {
border-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
.product-wrapper .pagination .page-item:not(:first-child) .page-link {
margin-left: -1px;
}
.product-wrapper .pagination .page-link:hover {
background-color: #e9ecef;
border-color: #dee2e6;
}
.product-wrapper .pagination .page-link.disabled,
.product-wrapper .pagination .page-link:disabled {
opacity: 0.8;
pointer-events: none;
background-color: #dee2e6;
}
.product-wrapper .pagination .page-item.active .page-link {
color: #fff;
border-color: var(--theme-black);
background-color: var(--theme-black);
}
.product-wrapper .page-link .fas {
font-size: 14px;
}
.product-wrapper .page-link .fa-chevron-left {
margin-right: 5px;
}
.product-wrapper .page-link .fa-chevron-right {
margin-left: 5px;
}
.filter-btn,
.offcanvas-header {
display: none;
}
/* Price Filter */
/* ---------- shell ---------- */
.pf {
padding: 20px;
}
.pf *,
.pf *::before,
.pf *::after {
box-sizing: border-box;
}
/* ---------- slider ---------- */
.pf__slider {
position: relative;
height: var(--pf-thumb-h);
margin-bottom: 22px;
}
.pf__rail,
.pf__fill {
position: absolute;
top: 50%;
height: var(--pf-rail-h);
transform: translateY(-50%);
border-radius: 2px;
pointer-events: none;
}
.pf__rail {
left: 0;
right: 0;
background: var(--white);
border: 1px solid var(--pf-rail-border);
}
.pf__fill {
background: var(--theme-green);
/* left + width are written by JS so they line up with the thumb centres */
}
/* Both inputs are stacked. The input itself ignores the pointer; only the
thumb accepts it. Without this, the top input would swallow every click
and the lower handle would be permanently stuck. */
.pf__range {
-webkit-appearance: none;
appearance: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: var(--pf-thumb-h);
margin: 0;
background: none;
pointer-events: none;
}
.pf__range--min {
z-index: 3;
}
.pf__range--max {
z-index: 4;
}
.pf__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--pf-thumb-w);
height: var(--pf-thumb-h);
border: 0;
border-radius: 2px;
background: var(--theme-green);
cursor: grab;
pointer-events: auto;
}
.pf__range::-moz-range-thumb {
width: var(--pf-thumb-w);
height: var(--pf-thumb-h);
border: 0;
border-radius: 2px;
background: var(--theme-green);
cursor: grab;
pointer-events: auto;
}
.pf__range::-moz-range-track {
background: transparent;
border: 0;
}
.pf__range:active::-webkit-slider-thumb {
cursor: grabbing;
}
.pf__range:active::-moz-range-thumb {
cursor: grabbing;
}
/* Keyboard focus has to live on the thumb — the input has no visible box. */
.pf__range:focus {
outline: none;
}
.pf__range:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--pf-navy);
outline-offset: 2px;
}
.pf__range:focus-visible::-moz-range-thumb {
outline: 2px solid var(--pf-navy);
outline-offset: 2px;
}
/* ---------- footer row ---------- */
.pf__row {
display: flex;
align-items: center;
gap: 20px;
justify-content: space-between;
}
.pf .pf__submit {
padding: 11px 26px;
border: 0;
border-radius: 0;
background: var(--theme-green);
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
cursor: pointer;
transition: background-color .15s ease;
border: 1px solid var(--theme-green);
border-radius: 100px;
outline: none;
}
.pf .pf__submit:hover,
.pf .pf__submit:focus {
background: #fff;
color: var(--theme-green);
}
.pf__output {
color: var(--theme-black);
font-size: 16px;
font-weight: 700;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.pf .pf__submit {
transition: none;
}
}
.dhs-filter-form .dhs-filter-actions {
justify-content: space-between;
}
.dhs-filter-form .dhs-filter-actions .dhs-btn-apply {
font-size: 13px;
font-weight: 700;
color: var(--white);
border-radius: 100px;
letter-spacing: .09em;
text-transform: uppercase;
background: var(--theme-green);
border-color: var(--theme-green);
}
.dhs-filter-form .dhs-filter-actions .dhs-btn-apply:hover {
color: var(--theme-green);
background: var(--white);
}
.dhs-filter-form .dhs-filter-actions .dhs-btn-clear {
color: var(--theme-green);
}
@media (max-width: 1199.98px) {
.offcanvas {
position: fixed;
bottom: 0;
z-index: 1045;
display: flex;
flex-direction: column;
max-width: 100%;
visibility: hidden;
background-color: #fff;
background-clip: padding-box;
outline: 0;
transition: 0.3s all ease-in-out;
width: 320px;
top: 0;
left: 0;
border-right: 1px solid rgba(0, 0, 0, 0.175);
transform: translateX(-100%);
}
.offcanvas.show {
visibility: visible;
transform: none;
}
.filter-btn {
font-size: 14px;
font-weight: 500;
border-radius: 0;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: var(--theme-black);
color: #fff;
padding: 0.375rem 0.75rem;
gap: 5px;
z-index: 3;
cursor: pointer;
}
.filter-btn .fas {
font-size: 12px;
}
.offcanvas-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
height: 65px;
border-bottom: 1px solid #e1e1e1;
}
.offcanvas-body {
flex-grow: 1;
padding: 1rem;
overflow-y: auto;
}
html:has(.offcanvas.show),
body:has(.offcanvas.show) {
overflow: hidden;
position: relative;
}
body:before {
background-color: #000;
transition: opacity .15s linear;
}
body:has(.offcanvas.show):before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
opacity: 0.5;
transition: opacity .15s linear;
}
.offcanvas-header .btn-close {
color: var(--theme-black);
border: 0;
opacity: .5;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / contain no-repeat;
}
.offcanvas-header .btn-close:focus {
outline: 0;
box-shadow: none;
background-color: #fff;
}
.offcanvas-header .offcanvas-title {
margin: 0;
line-height: 1;
}
.brands h3,
.filter h3,
.colours h3,
.discount-range h3,
.brands ul li,
.colours ul li {
padding-block: 10px;
padding-inline: 15px;
}
.brands input[type="checkbox"],
.colours input[type="checkbox"] {
margin-right: 2px;
}
.filter,
.colours,
.discount-range {
margin-top: 20px;
}
}
@media (min-width: 768px) {
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
}
.col-sm-3 {
width: 25%;
}
.col-sm-9 {
width: 75%;
}
}
@media (min-width: 1200px) {
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
float: left;
}
.col-md-3 {
width: 25%;
}
.col-md-9 {
width: 75%;
}
}
@media screen and (max-width: 1199.98px) {
.product-list-area.section-padding {
padding: 30px 0 50px;
}
}
@media screen and (max-width: 767.98px) {
.bred-title h3 {
font-size: 16px;
}
.product-row {
--item: 2;
}
.ms-3 {
margin-left: .5rem;
}
}
@media screen and (max-width: 575.98px) {
.product-wrapper .toolbox {
flex-flow: column;
}
.product-row {
--item: 1;
}
.product-grid .card a img {
max-height: 300px;
width: 100%;
object-fit: cover;
}
}
/* Shop Page */
/* Product Categories Page */
.product-categories-section {
padding: 60px 0 80px;
}
.product-category-row {
display: flex;
flex-wrap: wrap;
gap: var(--g30);
--item: 4;
}
.product-category-row .col {
flex: 0 0 auto;
width: calc((100% / var(--item)) - (var(--g30) * (var(--item) - 1) / var(--item)));
border-radius: 0.375rem;
}
.product-category-row .col .card {
box-shadow: 0 0.3rem 0.8rem rgb(0 0 0 / 12%);
position: relative;
display: flex;
flex-direction: column;
word-wrap: break-word;
background-color: var(--white);
background-clip: border-box;
border-radius: 0.375rem;
}
.product-category-row .col .card a {
display: flex;
}
.product-category-row .col .card .card-img-top {
border-bottom: 1px solid #dee2e6;
background-color: rgb(0 0 0 / 15%) !important;
height: 300px;
width: 100%;
object-fit: cover;
object-position: center;
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.product-category-row .col .card .list-group {
display: flex;
flex-direction: column;
}
.product-category-row .col .card .list-group .list-group-item {
position: relative;
display: block;
padding: 10px 15px;
color: var(--theme-black);
}
.product-category-row .col .card .list-group .list-group-item:not(:first-child) {
display: none !important;
}
.product-category-row .col .card .list-group .list-group-item:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.product-category-row .col .card .list-group .list-group-item:hover {
color: var(--theme-green);
}
.product-category-row .col .card .list-group .list-group-item h6 {
margin: 0;
padding-block: 5px;
}
.text-uppercase {
text-transform: uppercase;
}
.product-category-row .col .card .list-group .list-group-item .badge {
padding: 2px;
border-radius: 100px;
background-color: var(--theme-black);
color: var(--white);
min-width: 30px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
@media screen and (max-width: 1199.98px) {
.product-categories-section {
padding: 30px 0 50px;
}
.product-category-row {
--item: 3;
}
}
@media screen and (max-width: 991.98px) {
.product-category-row {
--item: 2;
}
}
@media screen and (max-width: 575.98px) {
.product-category-row {
--item: 1;
}
}
.popular-brands-section {
padding-bottom: 80px;
}
.popular-brands-section .container {
display: block;
}
.popular-brands-section .separator {
display: flex;
align-items: center;
width: 100%;
padding-bottom: 1.5rem;
}
.popular-brands-section .separator .line {
height: 1px;
flex: 1;
background-color: #dee2e6;
}
.popular-brands-section .separator .separator-title {
padding: 0 1rem;
text-transform: uppercase;
font-weight: bold;
margin: 0;
line-height: 1.2;
}
.popular-brands-row {
display: flex;
flex-wrap: wrap;
gap: var(--g30);
--item: 5;
justify-content: center;
}
.popular-brands-row .col {
flex: 0 0 auto;
width: calc((100% / var(--item)) - (var(--g30) * (var(--item) - 1) / var(--item)));
}
.popular-brands-row .col .card {
border: 1px solid #dee2e6;
border-radius: 0.375rem;
}
.popular-brands-row .col .card .card-body {
padding: 1rem;
}
.popular-brands-row .col .card .card-body a {
display: flex;
align-items: center;
justify-content: center;
}
.popular-brands-row .col .card .card-body img {
max-height: 50px;
}
@media screen and (max-width: 1199.98px) {
.popular-brands-section {
padding-bottom: 50px;
}
.popular-brands-row {
--item: 4;
}
}
@media screen and (max-width: 991.98px) {
.popular-brands-row {
--item: 3;
}
}
@media screen and (max-width: 575.98px) {
.popular-brands-row {
--item: 2;
}
}
/* Product Categories Page */
/* Shop Detail Page */
/* ==========================================
Product Detail Page
========================================== */
.product-detail {
padding: 60px 0;
}
.product-detail__wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.product-detail__main-image img {
width: 100%;
border: 1px solid #ddd;
}
/* Thumbnail Slider */
.product-detail__thumbs {
display: flex;
align-items: center;
margin-top: 15px;
position: relative;
}
.thumb-track {
display: flex;
overflow: hidden;
gap: 10px;
scroll-behavior: smooth;
}
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
border: 1px solid #ddd;
cursor: pointer;
flex-shrink: 0;
}
.thumb.active {
border: 2px solid #000;
}
.thumb-nav {
background: #000;
color: #fff;
border: none;
padding: 8px 12px;
cursor: pointer;
}
/* Product Info */
.product-title {
font-size: 28px;
margin-bottom: 10px;
}
.product-rating {
margin-bottom: 10px;
}
.product-price {
margin: 15px 0;
}
.old-price {
text-decoration: line-through;
margin-right: 10px;
}
.new-price {
font-size: 22px;
font-weight: bold;
}
.product-meta {
margin: 20px 0;
list-style: none;
padding: 0;
}
.product-meta li {
margin-bottom: 5px;
}
/* Options */
.product-options {
display: flex;
gap: 20px;
margin: 20px 0;
}
.option-group label {
display: block;
margin-bottom: 5px;
}
.color-options {
display: flex;
gap: 8px;
}
.color {
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
}
.color.blue {
background: blue;
}
.color.red {
background: red;
}
.color.green {
background: green;
}
.color.yellow {
background: gold;
}
/* Buttons */
.product-actions {
display: flex;
gap: 15px;
}
.btn-primary {
background: #000;
color: #fff;
padding: 12px 20px;
border: none;
cursor: pointer;
}
.btn-outline {
background: transparent;
border: 1px solid #000;
padding: 12px 20px;
cursor: pointer;
}
/* Responsive */
@media (max-width: 991px) {
.product-detail__wrapper {
grid-template-columns: 1fr;
}
}
/* Shop Detail Page */
/* Claude Shop Detail */
/* 1. TOKENS ================================================================
Local aliases only. Every one falls back to a literal so the block still
renders correctly if it is ever previewed outside the Elementor kit scope.
========================================================================== */
.product-detail {
/* Type */
--pd-font-display: var(--e-global-typography-secondary-font-family, "Ubuntu"), sans-serif;
--pd-font-body: var(--e-global-typography-498cd9e-font-family, "Poppins"), sans-serif;
/* Colour */
--pd-muted: #757575;
--pd-line: #dee2e6;
/* same hairline as .product-grid .card */
--pd-plate: #f0f2f4;
/* --e-global-color-89ba410 */
--pd-star: #e4b90f;
/* --e-global-color-accent */
--pd-focus: var(--theme-green, #196d0c);
/* Rhythm */
--pd-gap: var(--g30, 30px);
--pd-thumb-gap: 10px;
--pd-thumbs-visible: 4;
/* Button skin.
Currently set to match the supplied screenshot (solid black, square).
To switch to the site's WooCommerce button instead, change only these:
--pd-btn-bg: var(--theme-green, #196d0c);
--pd-btn-radius: 100px;
--pd-btn-minw: 190px;
Nothing else needs to move. */
--pd-btn-bg: var(--theme-black);
--pd-btn-fg: var(--white, #fff);
--pd-btn-radius: 0;
--pd-btn-minw: 0;
}
/* 2. SECTION + LAYOUT ======================================================
.container is display:flex; align-items:center in the existing theme, so
the direct child is reset to a full-width, top-aligned flex item.
========================================================================== */
.product-detail {
font-family: var(--pd-font-body);
color: var(--theme-black);
}
.product-detail.section-padding {
padding: 60px 0 80px;
/* matches .product-list-area */
}
.product-detail>.container {
align-items: flex-start;
}
.product-detail__layout {
display: flex;
flex-wrap: wrap;
gap: var(--pd-gap);
width: 100%;
}
.product-detail__gallery {
flex: 0 0 auto;
width: calc(46% - (var(--pd-gap) / 2));
}
.product-detail__info {
flex: 1 1 320px;
min-width: 0;
/* lets long words wrap instead of pushing */
}
/* 3. GALLERY — STAGE =======================================================
.product-detail__plate holds a fixed 1:1 box. Combined with width/height
on the ![]()
, the space is reserved before the image decodes, so swapping
images contributes nothing to CLS.
========================================================================== */
.product-detail__stage {
padding: 15px;
border: 1px solid var(--pd-line);
background: var(--white, #fff);
}
.product-detail__viewport {
position: relative;
aspect-ratio: 1 / 1;
/* reserves the box before images decode */
overflow: hidden;
background: var(--pd-plate);
cursor: grab;
/* Horizontal gestures belong to the carousel, vertical ones stay with the
page. Without this, swiping the gallery on a phone would trap scrolling. */
touch-action: pan-y;
/* Stops the drag turning into a text/image selection. */
-webkit-user-select: none;
user-select: none;
}
.product-detail__viewport.is-dragging {
cursor: grabbing;
}
.product-detail__slides {
display: flex;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
transform: translate3d(var(--pd-x, 0px), 0, 0);
transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
/* While a finger or cursor is down the track must track it exactly. */
.product-detail__viewport.is-dragging .product-detail__slides {
transition: none;
}
.product-detail__slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
background: var(--pd-plate);
}
.product-detail__slide .product-detail__slide-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
-webkit-user-drag: none;
}
/* 4. GALLERY — THUMBNAIL CAROUSEL ==========================================
The strip is a native scroll container: overflow-x + scroll-snap gives
real touch swiping with platform momentum, and costs no JS. The arrows
only call scrollBy(); JS hides them when there is nothing to scroll.
========================================================================== */
.product-detail__thumbs {
display: flex;
align-items: center;
gap: var(--pd-thumb-gap);
margin-top: 15px;
}
.product-detail__track {
display: flex;
flex: 1 1 auto;
gap: var(--pd-thumb-gap);
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* legacy Edge */
overscroll-behavior-x: contain;
/* stops the swipe pulling the page */
}
.product-detail__track::-webkit-scrollbar {
display: none;
}
.product-detail__track>li {
flex: 0 0 auto;
scroll-snap-align: start;
width: calc((100% - (var(--pd-thumb-gap) * (var(--pd-thumbs-visible) - 1))) / var(--pd-thumbs-visible));
}
.product-detail__thumb {
width: 100%;
padding: 2px;
display: block;
cursor: pointer;
border-radius: 0;
color: var(--theme-black);
background: var(--pd-plate);
border: 1px solid var(--pd-line);
transition: border-color .2s ease;
}
.product-detail__thumb img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
}
.product-detail__thumb[aria-current="true"] {
border-color: var(--theme-black);
}
.product-detail__thumb:hover,
.product-detail__thumb:focus {
background-color: transparent;
border-color: var(--theme-black);
}
/* Arrows reuse the hover treatment from .grid-list .btn on the listing page. */
.product-detail__nav {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--pd-line);
background: var(--white, #fff);
color: var(--theme-black);
font-size: 12px;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.product-detail__nav:focus,
.product-detail__nav:hover {
background: var(--theme-black);
border-color: var(--theme-black);
color: var(--white, #fff);
}
.product-detail__nav:disabled {
opacity: .35;
cursor: default;
}
/* display:inline-flex above out-specifies the UA rule for [hidden], so the
attribute has to be honoured explicitly. Without this, arrows that JS
hides (because there is nothing to scroll) still render. */
.product-detail__nav[hidden] {
display: none;
}
/* 5. DETAILS — TITLE, RATING, PRICE ======================================== */
.product-detail__title {
margin: 0 0 10px;
font-family: var(--pd-font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.2;
color: var(--theme-black);
}
.product-detail__rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 15px;
}
.product-detail__stars {
display: inline-flex;
gap: 2px;
font-size: 14px;
/* matches .card .rating */
color: var(--pd-star);
}
.product-detail__star--off {
color: var(--pd-muted);
}
.product-detail__rating-count {
font-size: 14px;
color: var(--pd-muted);
}
.product-detail__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 20px;
font-weight: 700;
}
.product-detail__price-was {
font-size: 20px;
color: var(--pd-muted);
text-decoration: line-through;
}
.product-detail__price-now {
font-size: 28px;
color: var(--theme-black);
text-decoration: none;
/* is underlined by default */
}
/* 6. DETAILS — DESCRIPTION + META ========================================== */
.product-detail__subheading {
margin: 0 0 6px;
font-family: var(--pd-font-body);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
color: var(--theme-black);
}
.product-detail__description p {
margin: 0;
font-size: 16px;
line-height: 1.7;
/* --e-global-typography-498cd9e */
color: var(--theme-black);
}
.product-detail__meta {
display: grid;
grid-template-columns: 185px 1fr;
row-gap: 8px;
column-gap: 15px;
margin: 20px 0 0;
font-size: 16px;
line-height: 1.5;
}
.product-detail__meta dt {
font-weight: 600;
color: var(--theme-black);
}
.product-detail__meta dd {
margin: 0;
color: var(--theme-black);
}
/* 7. DETAILS — VARIATION CONTROLS ========================================== */
.product-detail__options {
display: flex;
flex-wrap: wrap;
gap: 20px 30px;
margin-top: 25px;
}
.product-detail__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.product-detail__label {
font-size: 16px;
font-weight: 600;
line-height: 1.2;
color: var(--theme-black);
}
.product-detail__field .form-select {
min-width: 72px;
}
.product-detail__select {
min-width: 72px;
padding: 8px 10px;
border: 1px solid var(--pd-line);
border-radius: 0;
background: var(--white, #fff);
color: var(--theme-black);
font-family: inherit;
font-size: 15px;
line-height: 1.3;
cursor: pointer;
}
/* Colour swatches ---------------------------------------------------------- */
.product-detail__swatches {
display: flex;
align-items: center;
gap: 10px;
min-height: 34px;
/* keeps the row baseline level with the selects */
}
.product-detail__swatch {
position: relative;
display: inline-flex;
cursor: pointer;
}
/* The radio stays in the accessibility tree and keeps keyboard behaviour;
it is only visually replaced by .product-detail__dot. */
.product-detail__swatch input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.product-detail__dot {
display: block;
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--white, #fff), 0 0 0 3px transparent;
transition: box-shadow .2s ease;
}
.product-detail__swatch input:checked+.product-detail__dot {
box-shadow: 0 0 0 2px var(--white, #fff), 0 0 0 3px var(--theme-black);
}
.product-detail__swatch input:focus-visible+.product-detail__dot {
box-shadow: 0 0 0 2px var(--white, #fff), 0 0 0 3px var(--pd-focus);
}
.product-detail__swatch--blue .product-detail__dot {
background: #2f6fd0;
}
.product-detail__swatch--red .product-detail__dot {
background: #e04a56;
}
.product-detail__swatch--green .product-detail__dot {
background: #12924f;
}
.product-detail__swatch--yellow .product-detail__dot {
background: #f5c132;
}
/* 8. DETAILS — ACTION BUTTONS ==============================================
Padding, font-size, letter-spacing and transition all match
.woocommerce .button so the two systems stay in sync; only the skin
tokens in section 1 differ.
========================================================================== */
.product-detail__actions {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 30px;
}
.product-detail__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 35px;
border: 1px solid var(--theme-green);
border-radius: 100px;
background: var(--theme-green);
color: var(--white);
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
transition: all .3s;
}
.product-detail__btn:hover,
.product-detail__btn:focus,
.product-detail__btn:focus-visible {
background: var(--white, #fff);
color: var(--theme-green);
}
.product-detail__btn--secondary {
background: var(--white, #fff);
color: var(--theme-green);
}
.product-detail__btn--secondary:hover,
.product-detail__btn--secondary:focus,
.product-detail__btn--secondary:focus-visible {
background: var(--theme-green);
color: var(--white, #fff);
}
/* 9. UTILITIES ============================================================= */
/* Visible keyboard focus on every interactive element in the block. */
.product-detail__thumb:focus-visible,
.product-detail__nav:focus-visible,
.product-detail__select:focus-visible,
.product-detail__btn:focus-visible {
outline: 2px solid var(--pd-focus);
outline-offset: 2px;
}
/* Screen-reader-only label for the colour swatches. */
.product-detail__sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
.product-detail__track {
scroll-behavior: auto;
}
.product-detail__slides,
.product-detail__thumb,
.product-detail__nav,
.product-detail__dot,
.product-detail__btn {
transition: none;
}
}
/* 10. RESPONSIVE ===========================================================
Same breakpoints the listing page already uses, so both pages reflow
at identical widths.
========================================================================== */
/* Tablet and below — stack, matching where .filter-wrapper goes full width. */
@media screen and (max-width: 1199.98px) {
.product-detail.section-padding {
padding: 30px 0 50px;
}
.product-detail__gallery,
.product-detail__info {
flex: 0 0 auto;
width: 100%;
}
}
@media screen and (max-width: 767.98px) {
.product-detail__title {
font-size: 26px;
}
.product-detail__price-now {
font-size: 24px;
}
.product-detail__price-was {
font-size: 18px;
}
.product-detail__meta {
grid-template-columns: 140px 1fr;
}
}
@media screen and (max-width: 575.98px) {
.product-detail {
--pd-thumbs-visible: 3;
}
.product-detail__meta {
grid-template-columns: 1fr;
row-gap: 2px;
}
.product-detail__meta dd {
margin-bottom: 10px;
}
.product-detail__options {
gap: 20px;
width: 100%;
}
.product-detail__actions {
flex-direction: column;
align-items: stretch;
}
.product-detail__btn {
width: 100%;
}
}
/* ==========================================================================
PRODUCT TABS (Description / Specification / Reviews)
Append to: wp-content/themes/hello-theme-child-master/assets/css/custom.css
Scoped entirely to .product-tabs. Deliberately self-contained rather than
reusing .product-detail__* primitives: those read tokens declared ON
.product-detail, which is a sibling element, so they would resolve to
nothing here. See note at the end about extracting a shared button.
Inherited from the existing system:
.container 1400px / max-width:100% / 15px inline
--theme-black, --white, --g30 :root in custom.css
--e-global-typography-* Elementor kit (class is on )
#dee2e6 hairline, #f0f2f4 plate same values the shop already uses
Breakpoints 1199.98 / 767.98 / 575.98
CONTENTS
1. Tokens
2. Section + layout
3. Tab list
4. Panels + enhancement states
5. Description prose
6. Specification table
7. Reviews — list
8. Reviews — form
9. Utilities
10. Responsive
========================================================================== */
/* 1. TOKENS ================================================================ */
.product-tabs {
--pt-font-display: var(--e-global-typography-secondary-font-family, "Ubuntu"), sans-serif;
--pt-font-body: var(--e-global-typography-498cd9e-font-family, "Poppins"), sans-serif;
--pt-ink: var(--theme-black, #101010);
--pt-muted: #757575;
--pt-line: #dee2e6;
--pt-plate: #f0f2f4;
--pt-star: #e4b90f;
--pt-focus: var(--theme-green, #196d0c);
--pt-gap: var(--g30, 30px);
}
/* 2. SECTION + LAYOUT =====================================================
Top padding is intentionally 0. This section sits directly beneath
.product-detail, whose 80px bottom padding supplies the gap. If you move
this block anywhere else, add its own padding-block-start.
========================================================================== */
.product-tabs {
font-family: var(--pt-font-body);
color: var(--pt-ink);
}
.product-tabs.section-padding {
padding: 0 0 80px;
}
/* .container is display:flex; align-items:center in the theme. */
.product-tabs>.container {
align-items: flex-start;
}
.product-tabs__inner {
width: 100%;
min-width: 0;
}
/* 3. TAB LIST ==============================================================
The active tab sits on top of the list's bottom border and covers it with
its own white background, so the tab reads as joined to its panel.
========================================================================== */
.product-tabs__list {
display: flex;
/* gap: 4px; */
border-bottom: 1px solid var(--pt-line);
/* Three uppercase labels overflow narrow screens. Native scroll keeps the
row on one line and stays swipeable, matching the gallery thumb strip. */
/* overflow-x: auto; */
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.product-tabs__list::-webkit-scrollbar {
display: none;
}
.product-tabs__tab {
flex: 0 0 auto;
margin-bottom: -1px;
/* overlap the list's border */
padding: 14px 22px;
border: 1px solid transparent;
border-bottom-color: transparent;
border-radius: 0;
background: none;
color: var(--pt-muted);
font-family: var(--pt-font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .5px;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: color .2s ease;
}
.product-tabs__tab:hover,
.product-tabs__tab:focus {
color: var(--white);
background-color: var(--theme-black);
}
.product-tabs__tab[aria-selected="true"] {
border-color: var(--pt-line);
border-bottom-color: var(--white, #fff);
background: var(--white, #fff);
color: var(--pt-ink);
cursor: default;
border-radius: 0.375rem 0.375rem 0 0;
}
#pt-tab-reviews {
display: none;
}
.product-tabs__count {
font-weight: 700;
}
/* 4. PANELS + ENHANCEMENT STATES ==========================================
Unenhanced (no JS): every panel is visible, each under its own heading,
and the tab list is hidden because it would do nothing.
Enhanced: JS adds .is-enhanced, the list appears, [hidden] takes effect
and the per-panel headings drop to screen-reader-only.
========================================================================== */
.product-tabs__list {
display: none;
}
.product-tabs.is-enhanced .product-tabs__list {
display: flex;
flex-wrap: wrap;
}
.product-tabs__panel {
padding-block: 30px 0;
}
/* Unenhanced panels stay open even though the markup carries [hidden]. */
.product-tabs__panel[hidden] {
display: block;
}
.product-tabs.is-enhanced .product-tabs__panel[hidden] {
display: none;
}
.product-tabs__panel-title {
margin: 0 0 14px;
font-family: var(--pt-font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: var(--pt-ink);
}
/* Kept in the accessibility tree, removed from view — the tab already
labels the panel visually. */
.product-tabs.is-enhanced .product-tabs__panel-title {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* 5. DESCRIPTION PROSE ==================================================== */
.product-tabs__prose {
font-size: 16px;
line-height: 1.7;
/* --e-global-typography-498cd9e */
}
.product-tabs__prose> :first-child {
margin-top: 0;
}
.product-tabs__prose> :last-child {
margin-bottom: 0;
}
.product-tabs__prose p {
margin: 0 0 16px;
}
.product-tabs__prose ul {
margin: 0 0 16px;
padding-left: 20px;
}
.product-tabs__prose li {
margin-bottom: 6px;
}
/* 6. SPECIFICATION TABLE ================================================== */
.product-tabs__table-scroll {
max-width: 720px;
overflow-x: auto;
}
.product-tabs__specs {
width: 100%;
border-collapse: collapse;
font-size: 16px;
line-height: 1.5;
}
.product-tabs__specs th,
.product-tabs__specs td {
padding: 10px 16px;
border: 1px solid var(--pt-line);
text-align: left;
vertical-align: top;
}
.product-tabs__specs th {
width: 240px;
background: var(--pt-plate);
color: var(--pt-ink);
font-weight: 600;
}
/* Reference design shows a colon after each label. Generated rather than
typed into the markup, so ACF values stay clean. */
.product-tabs__specs th::after {
content: ":";
}
.product-tabs__specs td {
background: var(--white, #fff);
color: var(--pt-ink);
}
/* 7. REVIEWS — LIST ======================================================= */
.product-tabs__reviews-layout {
display: flex;
flex-wrap: wrap;
gap: var(--pt-gap);
align-items: flex-start;
}
.product-tabs__reviews-col {
flex: 1 1 420px;
min-width: 0;
}
.product-tabs__reviews-heading,
.product-tabs__form-title {
margin: 0 0 20px;
font-family: var(--pt-font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--pt-ink);
}
.product-tabs__reviews {
margin: 0;
padding: 0;
list-style: none;
}
.product-tabs__reviews>li+li {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--pt-line);
}
.product-tabs__review {
display: flex;
gap: 18px;
}
.product-tabs__reviews .product-tabs__avatar {
flex: 0 0 auto;
width: 66px;
height: 66px;
border-radius: 50%;
object-fit: cover;
}
.product-tabs__review-body {
flex: 1 1 auto;
min-width: 0;
}
/* flex-end so the date lines up with the author name rather than the stars. */
.product-tabs__review-head {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 8px;
}
.product-tabs__stars {
display: block;
margin-bottom: 4px;
font-size: 14px;
color: var(--pt-star);
}
.product-tabs__star--off {
color: var(--pt-muted);
}
.product-tabs__review-author {
margin: 0;
font-family: var(--pt-font-display);
font-size: 17px;
font-weight: 700;
line-height: 1.2;
color: var(--pt-ink);
}
.product-tabs__review-date {
font-size: 14px;
color: var(--pt-muted);
white-space: nowrap;
}
.product-tabs__review-text {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--pt-muted);
}
/* 8. REVIEWS — FORM ======================================================= */
.product-tabs__review-form {
flex: 0 1 400px;
padding: 26px;
border: 1px solid var(--pt-line);
background: var(--white, #fff);
}
.product-tabs__field {
margin-bottom: 16px;
}
.product-tabs__label {
display: block;
margin-bottom: 6px;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
color: var(--pt-ink);
}
.product-tabs__input {
display: block;
width: 100%;
padding: 10px 12px;
border: 1px solid var(--pt-line);
border-radius: 0;
background: var(--white, #fff);
color: var(--pt-ink);
font-family: inherit;
font-size: 15px;
line-height: 1.4;
}
.product-tabs__input:focus-visible {
outline: 2px solid var(--pt-focus);
outline-offset: 1px;
}
.product-tabs__textarea {
min-height: 110px;
resize: vertical;
}
/* Matches .product-detail__btn's padding, size, spacing and transition so the
two components stay visually in step. Declared rather than shared because
.product-detail__btn depends on tokens scoped to .product-detail. */
.product-tabs__submit {
display: block;
width: 100%;
margin-top: 4px;
padding: 12px 24px;
border: 2px solid var(--pt-ink);
border-radius: 0;
background: var(--pt-ink);
color: var(--white, #fff);
font-family: var(--pt-font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .7px;
text-transform: uppercase;
cursor: pointer;
transition: all .3s;
}
.product-tabs__submit:hover,
.product-tabs__submit:focus-visible {
background: var(--white, #fff);
color: var(--pt-ink);
}
/* Empty until the form reports something, so it must not reserve space. */
.product-tabs__status {
margin: 12px 0 0;
font-size: 14px;
line-height: 1.5;
color: var(--pt-muted);
}
.product-tabs__status:empty {
display: none;
}
/* 9. UTILITIES ============================================================ */
.product-tabs__tab:focus-visible,
.product-tabs__submit:focus-visible {
outline: 2px solid var(--pt-focus);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.product-tabs__list {
scroll-behavior: auto;
}
.product-tabs__tab,
.product-tabs__submit {
transition: none;
}
}
/* 10. RESPONSIVE ==========================================================
Same breakpoints as the listing page and the product detail block.
========================================================================== */
@media screen and (max-width: 1199.98px) {
.product-tabs.section-padding {
padding: 0 0 50px;
}
}
@media screen and (max-width: 767.98px) {
.product-tabs__tab {
padding: 12px 16px;
font-size: 13px;
}
.product-tabs__panel {
padding-block: 24px 0;
}
/* Form drops below the list rather than squeezing beside it. */
.product-tabs__reviews-col,
.product-tabs__review-form {
flex: 1 1 100%;
}
.product-tabs__specs th {
width: 180px;
}
}
@media screen and (max-width: 575.98px) {
/* Two columns cannot hold a long label and a value at this width, so each
row becomes a stacked pair. The grey label column is dropped here — as a
full-width band it read as heavy striping — and the label is
differentiated by type instead. */
.product-tabs__specs,
.product-tabs__specs tbody,
.product-tabs__specs tr,
.product-tabs__specs th,
.product-tabs__specs td {
display: block;
width: auto;
}
.product-tabs__specs {
border: 1px solid var(--pt-line);
}
.product-tabs__specs tr {
padding: 12px 16px;
}
.product-tabs__specs tr+tr {
border-top: 1px solid var(--pt-line);
}
.product-tabs__specs th,
.product-tabs__specs td {
padding: 0;
border: 0;
background: none;
}
.product-tabs__specs th {
margin-bottom: 3px;
color: var(--pt-muted);
font-size: 13px;
font-weight: 600;
letter-spacing: .3px;
text-transform: uppercase;
}
.product-tabs__review {
gap: 14px;
}
.product-tabs__avatar {
width: 52px;
height: 52px;
}
.product-tabs__review-head {
align-items: flex-start;
}
.product-tabs__review-form {
padding: 20px;
}
}
/* Claude Shop Detail */
/* ==========================================================================
SIMILAR PRODUCTS (slider)
========================================================================== */
/* 1. TOKENS ================================================================ */
.similar-products {
--sp-line: #dee2e6;
--sp-plate: #e3e5e7;
--sp-items: 5;
--sp-media-h: 200px;
color: var(--sp-ink);
}
/* 2. SECTION + HEADING ====================================================
Top padding is 0: this sits under .product-tabs, whose bottom padding
supplies the gap. Add padding-block-start if you move it elsewhere.
========================================================================== */
.similar-products.section-padding {
padding: 0 0 80px;
}
/* .container is display:flex; align-items:center in the theme. */
.similar-products>.container {
align-items: flex-start;
}
.similar-products__inner {
width: 100%;
min-width: 0;
}
.similar-products__heading {
display: flex;
align-items: center;
gap: 20px;
margin: 0 0 30px;
font-size: 24px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--sp-ink);
}
/* The flanking rules. flex:1 keeps the text optically centred at any width. */
.similar-products__heading::before,
.similar-products__heading::after {
content: "";
flex: 1 1 auto;
border-top: 1px solid var(--sp-line);
}
/* 3. TRACK ================================================================
.product-row already gives flex + gap + the --item column maths. The only
change needed is turning it from a wrapping grid into one scrollable line.
Native overflow + scroll-snap means touch swipe, trackpad and keyboard
focus scrolling all work with no JavaScript.
========================================================================== */
.similar-products__viewport {
position: relative;
}
/* 0,2,0 — beats .product-row (0,1,0) and its --item media overrides. */
.similar-products .product-row {
--item: var(--sp-items);
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.similar-products .product-row::-webkit-scrollbar {
display: none;
}
.similar-products .product-col {
scroll-snap-align: start;
}
/* Mouse drag-to-scroll. Snapping is suspended mid-drag so the track follows
the cursor exactly, then restored on release so it settles on a column. */
.similar-products .product-row.is-dragging {
scroll-snap-type: none;
scroll-behavior: auto;
cursor: grabbing;
}
.similar-products.is-enhanced .product-row {
cursor: grab;
}
/* A mouse-down on an image or link otherwise starts the browser's native
drag-and-drop, which fires pointercancel and kills the gesture. The
draggable="false" attributes in the markup cover it; these back them up. */
.similar-products .product-grid .card a,
.similar-products .product-grid .card img {
-webkit-user-drag: none;
}
/* Only while dragging, so product names stay selectable the rest of the time. */
.similar-products .product-row.is-dragging {
-webkit-user-select: none;
user-select: none;
}
/* 4. CARD OVERRIDES FOR THIS DESIGN =======================================
The listing card is a bordered white box. Here the card is borderless and
the image sits on a grey plate.
========================================================================== */
/* 0,3,0 — beats .product-grid .card (0,2,0). */
.similar-products .product-grid .card {
padding: 0;
border: 0;
background-color: transparent;
}
.similar-products__media {
aspect-ratio: 1 / 1;
background: var(--sp-plate);
}
.similar-products__media>a {
display: block;
height: 100%;
}
/* 0,4,1 — has to beat the listing page's mobile rule
`.product-grid .card a img { object-fit:cover; max-height:300px }` (0,3,1),
which would otherwise crop these images below 576px. */
.similar-products .product-grid .card .similar-products__media a img {
display: block;
width: 100%;
height: 100%;
max-height: none;
object-fit: contain;
}
/* 0,4,0 — beats .product-grid .card .card-body (0,3,0). Text sits flush with
the image edge in the reference, so only the vertical padding is kept. */
.similar-products .product-grid .card .similar-products__body {
padding-inline: 0;
padding-bottom: 0;
}
/* .icon-wishlist has no rule in the existing sheet, so the heart inherits
.product-grid .card a { color: var(--theme-green) } and renders green. The
reference shows it dark. 0,5,0 beats that 0,3,0. */
.similar-products .product-grid .card .icon-wishlist a {
color: var(--sp-ink);
font-size: 18px;
line-height: 1;
}
.similar-products .product-grid .card .product-short-title {
font-size: 17px;
line-height: 1.3;
}
/* 5. ARROWS ===============================================================
Bare chevrons outside the track, vertically centred on the image row.
Hidden until JS marks the section enhanced, so they never sit there dead.
========================================================================== */
.similar-products__nav {
position: absolute;
top: calc(var(--sp-media-h) / 2);
transform: translateY(-50%);
z-index: 2;
display: none;
/* revealed by .is-enhanced below */
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--sp-ink);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: color .2s ease;
}
.similar-products.is-enhanced .similar-products__nav {
display: inline-flex;
outline: 0;
}
.similar-products.is-enhanced .similar-products__nav:hover,
.similar-products.is-enhanced .similar-products__nav:focus {
background-color: var(--theme-black);
}
.similar-products__nav--prev {
left: -38px;
}
.similar-products__nav--next {
right: -38px;
}
.similar-products.is-arrows-inside .similar-products__nav {
background: rgba(255, 255, 255, .92);
box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.similar-products.is-arrows-inside .similar-products__nav--prev {
left: 6px;
}
.similar-products.is-arrows-inside .similar-products__nav--next {
right: 6px;
}
/* Greyed rather than removed, matching the reference's inactive left arrow. */
.similar-products__nav:disabled {
color: #c9ced3;
cursor: default;
}
.similar-products__nav[hidden] {
display: none;
}
/* 6. UTILITIES ============================================================ */
.similar-products__nav:focus-visible,
.similar-products .product-grid .card a:focus-visible {
outline: 2px solid var(--theme-green, #196d0c);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.similar-products .product-row {
scroll-behavior: auto;
}
.similar-products__nav {
transition: none;
}
}
/* 7. RESPONSIVE ===========================================================
Same breakpoints as the listing page, detail page and tabs.
========================================================================== */
@media screen and (max-width: 1199.98px) {
.similar-products {
--sp-items: 4;
}
.similar-products.section-padding {
padding: 0 0 50px;
}
}
@media screen and (max-width: 991.98px) {
.similar-products {
--sp-items: 3;
}
.similar-products__heading {
gap: 15px;
font-size: 20px;
}
}
@media screen and (max-width: 767.98px) {
.similar-products {
--sp-items: 2;
}
.similar-products__heading {
margin-bottom: 22px;
}
}
@media screen and (max-width: 575.98px) {
/* A fractional count leaves the next card part-visible, which signals the
strip scrolls without needing a scrollbar. */
.similar-products {
--sp-items: 1.5;
}
.similar-products__heading {
font-size: 18px;
}
.similar-products .product-grid .card .product-short-title {
font-size: 16px;
}
}
:root {
--accordion-bg: #f4f4f4;
--accordion-text: #3f4347;
--accordion-transition: 0.3s ease;
}
/* Main Wrapper */
.product-accordion {
border: 1px solid #dee2e6;
}
.product-accordion:not(:last-child) {
margin-bottom: 30px;
}
.filter-sidebar .product-accordion h3 {
font-size: 16px;
font-weight: bold;
border: 1px solid;
color: var(--white);
padding-block: 15px;
padding-inline: 20px;
margin: 0 !important;
text-transform: uppercase;
background: #2c2e32 none repeat scroll 0 0;
}
/* =========================
Main Accordion
========================= */
.product-accordion .accordion-item {
padding-block: 10px;
}
.product-accordion .dhs-cat-node:not(:last-child),
.accordion-item:not(:last-child) {
border-bottom: 1px solid #dee2e6;
}
.product-accordion .dhs-cat-node .dhs-cat-node {
border: 0;
}
.accordion-item summary {
position: relative;
display: flex;
align-items: start;
padding: 10px 56px 10px 22px;
color: #777777;
cursor: pointer;
list-style: none;
}
.accordion-item summary:has(.accordion-checkbox input:checked) {
color: var(--theme-black);
}
.accordion-item summary::-webkit-details-marker {
display: none;
}
/* =========================
Checkbox
========================= */
.accordion-checkbox {
top: 4px;
display: flex;
cursor: pointer;
margin-right: 5px;
align-items: center;
}
.accordion-checkbox input {
position: absolute;
opacity: 0;
}
.checkmark {
width: 15px;
height: 15px;
border: 1px solid #dee2e6;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.accordion-checkbox input:checked+.checkmark {
background: var(--theme-black);
border-color: var(--theme-black);
}
.accordion-checkbox input:checked+.checkmark::after {
content: "";
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) translateY(-1px);
}
/* =========================
Title
========================= */
.accordion-title {
cursor: pointer;
flex: 1;
}
/* =========================
Accordion Toggle Icon
========================= */
.accordion-toggle {
position: absolute;
right: 25px;
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%);
cursor: pointer;
}
.accordion-toggle::before,
.accordion-toggle::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 2px;
background: #777777;
transition: transform var(--accordion-transition);
}
.accordion-toggle::before {
transform: translateY(-50%);
}
.accordion-toggle::after {
transform: translateY(-50%) rotate(90deg);
}
.accordion-item[open] .accordion-toggle::after {
transform: translateY(-50%) rotate(0);
}
/* Plus Icon */
.accordion-item summary::before,
.accordion-item summary::after {
content: "";
position: absolute;
right: 25px;
top: 50%;
width: 14px;
height: 0px;
background: #777777;
transition: transform var(--accordion-transition);
}
.accordion-item summary::before {
transform: translateY(-50%);
}
.accordion-item summary::after {
transform: translateY(-50%) rotate(90deg);
}
.accordion-item[open]>summary::after {
transform: translateY(-50%) rotate(0);
}
.accordion-item[open]>summary {
color: var(--theme-black);
}
/* =========================
Second Level
========================= */
.accordion-subitem {
border: 0;
}
.accordion-subitem .accordion-toggle {
right: 23px;
}
.accordion-subitem summary {
min-height: 30px;
padding: 5px 56px 5px 42px;
}
.accordion-subitem[open]>summary,
.accordion-subitem-inner[open]>summary {
color: var(--theme-black);
}
.accordion-subitem summary::-webkit-details-marker {
display: none;
}
/* Chevron */
.accordion-subitem summary:before {
display: none;
}
.accordion-subitem summary:after {
content: "";
position: absolute;
right: 28px;
top: 50%;
width: 12px;
height: 12px;
background: transparent;
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
transform: translateY(-70%) rotate(45deg);
transition: transform var(--accordion-transition);
}
/* Chevron Up */
.accordion-subitem[open]>summary::after {
transform: translateY(-30%) rotate(225deg);
}
/* =========================
Third Level
========================= */
.accordion-subcontent {
padding: 5px 0 0 36px;
}
.accordion-subcontent>a,
.accordion-inner-content a {
display: block;
padding: 8px 20px;
color: #777777;
font-size: 16px;
line-height: 1.45;
text-decoration: none;
transition: color var(--accordion-transition);
}
.accordion-inner-content a:first-child {
padding-top: 2px;
}
.accordion-inner-content a:not(:last-child) {
padding-bottom: 0;
}
.accordion-subcontent>a:hover,
.accordion-inner-content a:hover {
color: var(--accordion-active);
}
/* =========================
Inner Accordion
========================= */
.accordion-subitem-inner {
border: 0;
}
.accordion-subitem-inner summary {
position: relative;
display: flex;
align-items: start;
min-height: 36px;
padding: 5px 56px 5px 20px;
color: #777777;
font-size: 16px;
font-weight: 400;
line-height: 1.45;
cursor: pointer;
list-style: none;
}
.accordion-subitem-inner summary::-webkit-details-marker {
display: none;
}
/* Inner Chevron */
.accordion-subitem-inner summary::after {
content: "";
position: absolute;
right: 34px;
top: 50%;
width: 9px;
height: 9px;
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
transform: translateY(-70%) rotate(45deg);
transition: transform var(--accordion-transition);
display: none;
}
/* Inner Chevron Up */
.accordion-subitem-inner[open]>summary::after {
transform: translateY(-30%) rotate(225deg);
}
.accordion-inner-content {
padding-left: 18px;
}
.accordion-subitem .accordion-toggle:after {
content: "";
position: absolute;
right: 28px;
top: 50%;
width: 10px;
height: 10px;
background: transparent;
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
transform: translateY(-70%) rotate(45deg);
transition: transform var(--accordion-transition);
}
.accordion-item[open] .accordion-subitem .accordion-toggle:after {
transform: none;
}
.accordion-item[open] .accordion-subitem .accordion-toggle:after {
transform: translateY(-70%) rotate(45deg);
}
.accordion-item .accordion-subitem[open] .accordion-toggle:after {
transform: translateY(-30%) rotate(225deg);
}
.accordion-item .accordion-subitem .accordion-subitem-inner .accordion-toggle:after {
transform: translateY(-70%) rotate(45deg);
}
.accordion-item .accordion-subitem .accordion-subitem-inner[open] .accordion-toggle:after {
transform: translateY(-30%) rotate(225deg);
}
.accordion-item[open] .accordion-subitem .accordion-toggle::before {
display: none;
}
.accordion-subitem>summary:after {
display: none;
}
/* 31-08 */
.product-detail-section .woocommerce-product-gallery {
padding: 15px !important;
background: var(--white, #fff);
border: 1px solid var(--pd-line) !important;
}
.product-detail-section h1.product_title {font-weight: 700 !important;}
.product-detail-section h1.product_title, .product-detail-section p {margin-bottom: 0 !important;}
.product-detail-section .product_meta {
gap: 10px;
flex-flow: column;
}
.product-detail-section .product_meta .detail-content a {
color: var(--theme-green);
}
.product-detail-section .product_meta .detail-content a:hover {
text-decoration: underline;
}
.related.products ul li.product {
border: 1px solid var(--pd-line) !important;
}
.related.products ul li.product img {
padding: 15px;
margin-bottom: 0 !important;
border-bottom: 1px solid var(--pd-line);
}
.related.products ul li.product .button {
margin: 15px;
}
.related.products h2:not(.woocommerce-loop-product__title) {
gap: 20px;
display: flex;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
text-transform: capitalize;
}
.related.products h2:before, .related.products h2:after {
content: '';
flex: 1 1 auto;
border-top: 1px solid #cfc8d8;
}
.related.products .woocommerce-loop-product__title {
color: var(--theme-green);
margin-bottom: 0 !important;
padding: 15px 15px 5px !important;
}
.related.products .woocommerce-loop-product__link .price {
padding-inline: 15px;
margin-bottom: 0 !important;
color: var(--theme-black) !important;
}
.woocommerce-Reviews .comment-respond,
.woocommerce-Reviews .comment-respond .comment-form,
.woocommerce-Reviews .comment-respond .comment-form .comment-form-rating,
.woocommerce-Reviews .comment-respond .comment-form .comment-form-comment {
gap: 10px;
display: flex;
flex-flow: column;
}
.woocommerce-Reviews .comment-respond .comment-form .comment-form-comment textarea {
outline: 0;
border-radius: 0;
height: auto !important;
border-color: var(--silver-mist);
}
.woocommerce #review_form #respond textarea:focus {
border-color: rgba(25, 109, 12, 0.62);
box-shadow: 0 0 0 .25rem rgba(25, 109, 12, 0.25);
}
.woocommerce-Reviews .comment-respond .comment-form .form-submit {
margin-top: 10px !important;
}
.woocommerce-Reviews .comment-respond .comment-form .form-submit .submit {
outline: 0;
min-width: 190px;
padding: 12px 24px !important;
color: var(--white) !important;
border-radius: 100px !important;
border: 2px solid var(--theme-green) !important;
background-color: var(--theme-green) !important;
}
.woocommerce-Reviews .comment-respond .comment-form .form-submit .submit:hover {
color: var(--theme-green) !important;
background-color: var(--white) !important;
}
.product-detail-section .elementor-add-to-cart {
gap: 10px;
display: flex;
flex-flow: column;
}
.product-detail-section .elementor-add-to-cart .stock {
font-weight: 500;
font-size: 16px !important;
color: var(--theme-black) !important;
}
.product-detail-section .elementor-add-to-cart .qty {
min-width: 80px;
text-align: left;
}
/* 31-08 */
/* 01-09 */
.sub-header .elementor-widget-wrap {
justify-content: flex-end;
}
.sub-header .elementor-widget-wrap .site-search, .sub-header .elementor-widget-wrap .elementor-widget-icon-list {
width: auto;
}
.sub-header .elementor-widget-wrap .site-search {
margin-bottom: 0;
margin-inline: auto;
}
.sub-header .elementor-widget-wrap .site-search .e-search-input {
min-width: 350px;
min-height: auto;
border-color: var(--silver-mist);
padding: 10px 12px 10px 35px;
}
.sub-header .elementor-widget-wrap .site-search .e-search-input:focus {
border-color: rgba(25, 109, 12, 0.62);
box-shadow: 0 0 0 .25rem rgba(25, 109, 12, 0.25);
}
.sub-header .elementor-widget-wrap .e-search-form .e-search-label .fa-search {
left: 12px;
font-size: 16px;
}
.sub-header .elementor-widget-wrap .site-search .e-search-submit {
outline: 0;
height: auto;
line-height: 1;
min-width: 150px;
font-weight: 700;
padding: 12px 24px;
border-radius: 100px;
letter-spacing: 0.7px;
justify-content: center;
border: 2px solid var(--theme-green);
background-color: var(--theme-green);
}
.sub-header .elementor-widget-wrap .site-search .e-search-submit:hover {
color: var(--theme-green);
background-color: var(--white);
}
@media (min-width: 768px) and (max-width: 880.98px) {
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-half-column {
flex-flow: column;
}
}
@media screen and (max-width: 767.98px) {
.sub-header .elementor-widget-wrap {
gap: 20px;
flex-flow: column;
}
.sub-header .elementor-widget-wrap .site-search .e-search-input {
line-height: 1;
min-width: auto;
}
/* My Account */
#customer_login .col-1 form.woocommerce-form.woocommerce-form-login,
.e-my-account-tab .woocommerce #customer_login .u-column-body .woocommerce-form {
padding: 0;
}
.e-my-account-tab .woocommerce #customer_login .u-column:not(:first-child) {
margin-top: 30px;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-button {
text-align: center;
margin-inline: auto;
}
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-button .button {
width: auto;
}
/* My Account */
}
@media screen and (max-width: 575.98px) {
.e-my-account-tab .woocommerce #customer_login .u-column-body .form-half-column {
flex-flow: column;
}
.sub-header .elementor-widget-wrap .site-search .e-search-submit {
min-width: auto;
}
}
/* 01-09 */
/* 03-09 */
/* Checkout Page */
.checkout-wrap .woocommerce-notices-wrapper {
margin: 0;
}
.checkout-wrap .dhs-checkout__grid {
margin: 0;
border-radius: 0.375rem;
box-shadow: 0 0.3rem 0.8rem rgb(0 0 0 / 12%);
}
.checkout-wrap .dhs-checkout__grid .dhs-checkout__main {
padding: 1.2rem;
}
.checkout-wrap .dhs-checkout__grid .dhs-checkout__main .dhs-checkout__sub {
padding: 1.5rem;
border-radius: 0.375rem;
border: 1px solid var(--silver-mist);
}
.checkout-wrap .dhs-checkout__grid .dhs-checkout__return-link {
font-size: 16px;
position: relative;
padding-left: 15px;
color: var(--theme-green);
}
.checkout-wrap .dhs-checkout__grid .dhs-checkout__return-link::before {
content: "\003C";
left: 0;
top: 50%;
line-height: 1;
font-size: 20px;
position: absolute;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.checkout-wrap .dhs-checkout-section .dhs-checkout-section__title {
font-size: 20px;
letter-spacing: 0;
text-transform: capitalize;
}
.checkout-wrap .dhs-checkout-section .form-row label {
font-size: 16px;
line-height: 1.4;
color: #66716b;
font-weight: 500;
text-transform: capitalize;
}
.checkout-wrap .dhs-checkout-section .form-row input {
outline: none;
border-radius: 0;
padding: 10px 12px;
line-height: normal;
background-color: var(--white);
border: 1px solid var(--silver-mist);
}
.checkout-wrap .dhs-checkout-section .form-row input:focus {
border-color: rgba(25, 109, 12, 0.62);
box-shadow: 0 0 0 .25rem rgba(25, 109, 12, 0.25);
}
.checkout-wrap .dhs-checkout-section .form-row .select2-selection {
border-radius: 0;
padding: 10px 12px;
}
.checkout-wrap .dhs-checkout-section .form-row .select2-selection .select2-selection__rendered {
padding: 0;
}
.checkout-wrap .woocommerce-shipping-fields .input-checkbox {
margin-right: 8px;
}
.checkout-wrap .woocommerce-additional-fields textarea.input-text {
border-color: var(--silver-mist);
}
.checkout-wrap .dhs-checkout__payment-section {
margin-top: 40px;
}
.checkout-wrap .dhs-checkout__payment-section .place-order {
margin-bottom: 0;
padding-bottom: 0 !important;
}
.checkout-wrap .dhs-checkout__payment-section .place-order .button {
margin-bottom: 0 !important;
}
.checkout-wrap .dhs-checkout__sidebar .button {
min-width: auto;
color: var(--theme-green) !important;
background-color: var(--white) !important;
}
.checkout-wrap .checkout_coupon.woocommerce-form-coupon {
justify-content: space-between;
}
.checkout-wrap .checkout_coupon.woocommerce-form-coupon .form-row {
flex: auto;
width: auto;
}
.checkout-wrap .checkout_coupon.woocommerce-form-coupon .clear {
display: none;
}
.checkout-wrap .checkout_coupon.woocommerce-form-coupon .form-row .input-text {
outline: 0;
box-shadow: none;
border-radius: 0 !important;
}
.checkout-wrap .checkout_coupon.woocommerce-form-coupon .form-row .input-text:focus {
border-color: var(--white) !important;
}
/* Checkout Page */
/* 03-09 */