:root {
--input-placeholder-color: #222;
--white-clr: #fff;
}
.rtl {
direction: var(--web-direction);
}
.dropdown-item:hover,
.dropdown-item:focus {
color: var(--web-primary);
}
.dropdown-item.active,
.dropdown-item:active {
color: var(--web-secondary);
}
.navbar-light .navbar-tool-icon-box {
color: var(--web-primary);
}
.search_button {
background-color: var(--web-primary);
}
.navbar-stuck-menu {
background-color: var(--web-primary);
}
.mega-nav .nav-item .nav-link {
color: var(--web-primary) !important;
}
.owl-theme .owl-nav [class*="owl-"],
.checkbox-alphanumeric label:hover {
border-color: var(--web-primary);
}
::-webkit-scrollbar-thumb:hover {
background: var(--web-secondary) !important;
}
[type="radio"]:not(.show) {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[type="radio"]:not(.show) + span:after {
box-shadow: 0 0 0 0.1em var(--web-secondary);
}
[type="radio"]:not(.show):checked + span:after {
background: var(--web-secondary);
box-shadow: 0 0 0 0.1em var(--web-secondary);
}
.navbar-tool .navbar-tool-label {
background-color: var(--web-secondary) !important;
}
.btn--primary {
color: #fff;
background-color: var(--web-primary) !important;
border-color: var(--web-primary) !important;
}
.d--none {
display: none;
}
.web-text-primary,
.text-primary {
color: var(--web-primary) !important;
}
.btn--primary:hover {
color: #fff;
background-color: var(--web-primary) !important;
border-color: var(--web-primary) !important;
}
.btn-secondary {
background-color: var(--web-secondary) !important;
border-color: var(--web-secondary) !important;
}
.btn-outline-accent:hover {
color: #fff;
background-color: var(--web-primary);
border-color: var(--web-primary);
}
.btn-outline-accent {
color: var(--web-primary);
border-color: var(--web-primary);
}
.text-accent {
color: var(--web-primary);
}
.text-base-2 {
color: var(--web-secondary);
}
a:hover {
color: var(--web-primary);
}
.text-primary,
.text-base,
.active-menu {
color: var(--web-primary) !important;
}
.page-item.active > .page-link {
box-shadow: 0 0.5rem 1.125rem -0.425rem var(--web-primary);
}
.page-item.active .page-link {
background-color: var(--web-primary);
}
.btn-outline-accent:not(:disabled):not(.disabled):active,
.btn-outline-accent:not(:disabled):not(.disabled).active,
.show > .btn-outline-accent.dropdown-toggle {
background-color: var(--web-secondary);
border-color: var(--web-secondary);
}
.btn-outline-primary {
color: var(--web-primary);
border-color: var(--web-primary);
}
.btn-outline-primary:hover {
background-color: var(--web-primary);
border-color: var(--web-primary);
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
box-shadow: 0 0 0 0 var(--web-primary);
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
background-color: var(--web-primary);
border-color: var(--web-primary);
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0 var(--web-primary);
}
.for-discount-value {
background: var(--web-primary);
}
span.badge-accent {
color: var(--base);
background-color: var(--web-primary-40);
}
span.badge-accent:hover {
color: var(--base) !important;
}
.custom-light-primary-color {
background-color: var(--web-primary-10);
}
.custom-light-primary-color-20 {
background-color: var(--web-primary-20);
}
.password-toggle-btn
.custom-control-input:checked
~ .password-toggle-indicator {
color: var(--web-primary);
}
.for-count-value {
color: var(--web-primary);
}
.web--bg-primary {
background-color: var(--web-primary);
}
.web--bg-secondary {
background-color: var(--web-secondary);
}
.count-value {
color: var(--web-primary);
}
@media (min-width: 768px) {
.navbar-stuck-menu {
background-color: var(--web-primary);
}
}
@media (max-width: 767px) {
.search_button .input-group-text i {
color: var(--web-primary) !important;
}
.search_button .input-group-text i.text-absolute-white{
color: #ffffff !important;
}
.mega-nav1 {
color: var(--web-primary) !important;
}
.mega-nav1 .nav-link {
color: var(--web-primary) !important;
}
}
@media (max-width: 471px) {
.mega-nav1 {
color: var(--web-primary) !important;
}
.mega-nav1 .nav-link {
color: var(--web-primary) !important;
}
}
.text-align-direction {
text-align: var(--text-align-direction) !important;
}
.web-direction {
direction: var(--web-direction) !important;
}
.social-media:hover {
color: var(--web-secondary) !important;
}
.bg-white-overlay-50 {
background: rgba(255, 255, 255, 0.05);
}
.min-width-160px {
min-width: 160px !important;
}
.tracking-page .closet {
float: var(--text-align-direction-alt);
}
.checkout-details-page .nav-tabs {
border: none;
}
.checkout-details-page .nav-tabs .nav-item {
width: 49%;
text-align: center;
}
.checkout-details-page .nav-tabs .nav-link::before {
height: 0;
}
.checkout-details-page .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
background: var(--web-primary);
border-color: var(--web-primary);
}
.checkout-details-page .nav-tabs .nav-link {
background: var(--web-secondary);
border: 1px solid var(--web-secondary);
}
.bootstrap-select.dropdown.form-control button {
border: 1px solid #e3e9ef !important;
}
.bootstrap-select.dropdown.form-control button:focus {
outline: none !important;
box-shadow: none;
}
@media (max-width: 600px) {
.contact-us-page.sidebar_heading {
background: var(--web-primary);
}
}
.delete-account-dropdown-menu {
width: 200px;
min-width: 0 !important;
}
.checkout-steps.steps-light .step-item.active .step-count,
.checkout-steps.steps-light .step-item.active .step-progress {
color: #ffffff;
background-color: var(--web-primary);
}
.checkout-steps.steps-light .step-count,
.checkout-steps.steps-light .step-progress {
color: #4f4f4f;
background-color: rgba(225, 225, 225, 0.67);
}
.checkout-steps.steps-light .step-item.active.current {
color: var(--web-primary) !important;
pointer-events: none;
}
.checkout-steps.steps-light .step-item {
color: #4f4f4f;
font-size: 14px;
font-weight: 400;
}
.customize-step{
margin: 0 auto 20px;
max-width: 600px;
}
.customize-step .step-item{
width: 190px;
text-align: center;
}
.customize-step .step-item .step-count{
width: 30px;
height: 30px;
border: 2px solid var(--border1);
background-color: var(--color-white);
}
.customize-step .step-item:not(:last-child)::before{
position: absolute;
content: "";
top: 4px;
inset-inline-start: 110px;
width: 168px;
height: 1px;
border-top: 2px dashed var(--border1);
}
.customize-step .step-item.active::before{
border-top: 2px solid var(--web-primary);
}
.customize-step .step-item .step-count i{
opacity: 0;
}
.customize-step .step-item.active .step-count i{
opacity: 1 !important;
}
.customize-step .step-item.active .step-count{
background-color: var(--web-primary) !important;
}
.fw-medium{
font-weight: 500 !important;
}
@media screen and (max-width: 767px) {
.customize-step{
max-width: 100%;
display: flex;
align-items: flex-start;
}
.customize-step .step-item{
width: 100%;
text-align: center;
}
.customize-step .step-item .step-count{
width: 30px;
height: 30px;
border: 2px solid var(--border1);
background-color: var(--color-white);
}
.customize-step .step-item:not(:last-child)::before{
position: absolute;
content: "";
top: 4px;
inset-inline-start: 110px;
width: 100%;
height: 1px;
border-top: 2px dashed var(--border1);
}
}
@media screen and (max-width: 575px) {
.customize-step .step-item:not(:last-child)::before{
position: absolute;
content: "";
top: 4px;
inset-inline-start: 80px;
width: 100%;
height: 1px;
border-top: 2px dashed var(--border1);
}
}
@media screen and (max-width: 575px) {
.customize-step .step-item:not(:last-child)::before{
inset-inline-start: 60px;
border-top: 2px dashed var(--border1);
}
}
.list-group-flush .list-group-item li,
.list-group-flush .list-group-item li a {
color: var(--web-primary);
}
.list-group-flush .list-group-item li,
.list-group-flush .list-group-item li a:hover {
color: var(--web-secondary);
}
.order-summery-aside .cart_title {
font-weight: 400 !important;
font-size: 14px;
}
.order-summery-aside .cart_value {
font-weight: 600 !important;
font-size: 14px;
}
@media (max-width: 575px) {
.order-summery-aside .cart_title,
.order-summery-aside .cart_value {
font-size: 14px;
}
}
.order-summery-aside .__cart-total_sticky {
position: sticky;
top: 80px;
}
.order-details-nav.nav-menu > * {
border: none;
border-bottom: 2px solid transparent;
background-color: transparent;
padding: 0.5rem 0;
color: #9b9b9b;
}
.order-details-nav.nav-menu > *.active {
border-color: #1455ac;
color: #1455ac;
font-weight: 700;
}
.max-width-150px {
max-width: 150px;
}
.max-width-200px {
max-width: 200px;
}
.max-width-350px {
max-width: 350px;
}
.max-width-500px {
max-width: 500px;
}
.width-300px {
width: 300px;
}
.height-100px {
height: 100px;
}
.max-height-500px {
max-height: 500px !important;
}
[dir="ltr"] .heading_search {
padding: 10px 29px 10px 20px;
}
[dir="rtl"] .heading_search {
padding: 10px 20px 10px 29px;
}
[dir="ltr"] .chat_ib {
padding: 0 0 6px 15px;
}
[dir="rtl"] .chat_ib {
padding: 0 15px 6px 0;
}
[dir="ltr"] .received_msg {
padding: 0 0 0 10px;
}
[dir="rtl"] .received_msg {
padding: 0 10px 0 0;
}
[dir="ltr"] .received_withdraw_msg p {
padding: 4px 8px 3px 10px;
}
[dir="rtl"] .received_withdraw_msg p {
padding: 4px 10px 3px 8px;
}
.msg_history {
padding: 0 15px;
}
[dir="ltr"] .send_msg p {
padding: 5px 10px 5px 12px;
}
[dir="rtl"] .send_msg p {
padding: 5px 12px 5px 10px;
}
.p-12px {
padding: 12px;
}
[dir="ltr"] .ps-12px {
padding-left: 12px;
}
[dir="rtl"] .ps-12px {
padding-right: 12px;
}
[dir="ltr"] .float-start {
float: left;
}
[dir="rtl"] .float-start {
float: right;
}
[dir="ltr"] .float-end {
float: right;
}
[dir="rtl"] .float-end {
float: left;
}
[dir="ltr"] .ms-auto {
margin-left: auto;
}
[dir="rtl"] .ms-auto {
margin-right: auto;
}
[dir="ltr"] .ms-2 {
margin-left: 0.5rem !important;
}
[dir="rtl"] .ms-2 {
margin-right: 0.5rem !important;
}
[dir="ltr"] .me-2 {
margin-right: 0.5rem !important;
}
[dir="rtl"] .me-2 {
margin-left: 0.5rem !important;
}
[dir="ltr"] .me-3 {
margin-right: 1rem !important;
}
[dir="rtl"] .me-3 {
margin-left: 1rem !important;
}
[dir="ltr"] .me-4 {
margin-right: 1.5rem !important;
}
[dir="rtl"] .me-4 {
margin-left: 1.5rem !important;
}
[dir="ltr"] .ps-0 {
padding-left: 0 !important;
}
[dir="ltr"] .ps-1 {
padding-left: 0.25rem !important;
}
[dir="ltr"] .ps-2 {
padding-left: 0.5rem !important;
}
[dir="ltr"] .ps-3 {
padding-left: 1rem !important;
}
[dir="ltr"] .ps-4 {
padding-left: 1.5rem !important;
}
[dir="ltr"] .ps-5 {
padding-left: 3rem !important;
}
[dir="rtl"] .ps-0 {
padding-right: 0 !important;
}
[dir="rtl"] .ps-1 {
padding-right: 0.25rem !important;
}
[dir="rtl"] .ps-2 {
padding-right: 0.5rem !important;
}
[dir="rtl"] .ps-3 {
padding-right: 1rem !important;
}
[dir="rtl"] .ps-4 {
padding-right: 1.5rem !important;
}
[dir="rtl"] .ps-5 {
padding-right: 3rem !important;
}
[dir="ltr"] .pe-0 {
padding-right: 0 !important;
}
[dir="ltr"] .pe-1 {
padding-right: 0.25rem !important;
}
[dir="ltr"] .pe-2 {
padding-right: 0.5rem !important;
}
[dir="ltr"] .pe-3 {
padding-right: 1rem !important;
}
[dir="ltr"] .pe-4 {
padding-right: 1.5rem !important;
}
[dir="ltr"] .pe-5 {
padding-right: 3rem !important;
}
[dir="rtl"] .pe-0 {
padding-left: 0 !important;
}
[dir="rtl"] .pe-1 {
padding-left: 0.25rem !important;
}
[dir="rtl"] .pe-2 {
padding-left: 0.5rem !important;
}
[dir="rtl"] .pe-3 {
padding-left: 1rem !important;
}
[dir="rtl"] .pe-4 {
padding-left: 1.5rem !important;
}
[dir="rtl"] .pe-5 {
padding-left: 3rem !important;
}
.category-list-in-header {
padding: 10px;
border: 1px solid #0000001f;
width: 100%;
cursor: pointer;
background: white;
}
.min-width-600px {
min-width: 600px;
}
.loading-parent {
position: fixed;
z-index: 9999;
height: 100vh;
top: 0;
display: block;
justify-content: center;
align-items: center;
}
.loading-parent.d--none {
display: none;
}
.loading-parent-first-div {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.payment-loading-parent {
position: fixed;
z-index: 9999;
left: 40%;
top: 37%;
width: 100%;
}
[dir="ltr"] .navbar form .search_button {
border-radius: 0 7px 7px 0;
left: unset;
right: 0;
top: 0;
}
[dir="rtl"] .navbar form .search_button {
border-radius: 7px 0 0 7px;
right: unset;
left: 0;
top: 0;
}
.header-subcategories-links {
font-family: sans-serif !important;
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
margin-left: 50px;
}
.mt-minus-11px {
margin-top: -11px;
}
[dir="ltr"] .dir-end-minus-7px {
right: -7px;
}
[dir="rtl"] .dir-end-minus-7px {
left: -7px;
}
.category-single-product-price {
font-size: 12px !important;
color: #9b9b9b !important;
}
.category-single-product-price.fs-14{
font-size: 14px !important;
}
.modal-quick-view .modal-dialog {
max-width: 850px !important;
}
.modal-quick-view .product-title2 {
font-family: "Roboto", sans-serif !important;
font-weight: 400 !important;
font-size: 22px !important;
color: #000000 !important;
position: relative;
display: inline-block;
word-wrap: break-word;
overflow: hidden;
max-height: 1.2em;
line-height: 1.2em;
}
.modal-quick-view .cz-product-gallery {
display: block;
max-height: 530px;
overflow: hidden;
}
.modal-quick-view .cz-product-gallery .table-responsive {
overflow: hidden;
max-height: 80px;
}
.modal-quick-view .cz-preview {
width: 100%;
margin-top: 0;
max-height: 100% !important;
}
.modal-quick-view .cz-preview-item > img {
width: 100%;
}
.modal-quick-view .details {
border: 1px solid #e2f0ff;
border-radius: 3px;
padding: 16px;
}
@media (max-width: 991px) {
.modal-quick-view .details {
border: none;
border-radius: 0;
padding: 0;
}
}
img,
figure {
max-width: 100%;
vertical-align: middle;
}
.modal-quick-view .cz-thumblist-item {
display: block;
position: relative;
width: 64px;
height: 64px;
margin: 0.625rem;
transition: border-color 0.2s ease-in-out;
border: 1px solid #e2f0ff;
border-radius: 0.3125rem;
text-decoration: none !important;
overflow: hidden;
}
.modal-quick-view .for-hover-bg {
font-size: 18px;
height: 45px;
}
.modal-quick-view .cz-thumblist-item > img {
display: block;
width: 80%;
transition: opacity 0.2s ease-in-out;
max-height: 58px;
opacity: 0.6;
}
@media (max-width: 767px) and (min-width: 576px) {
.modal-quick-view .cz-preview-item > img {
width: 100%;
}
}
@media (max-width: 575px) {
.modal-quick-view .cz-thumblist {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
justify-content: center;
padding-top: 1rem;
padding-right: 22px;
padding-bottom: 10px;
}
.modal-quick-view .cz-thumblist-item {
margin: 0;
}
.modal-quick-view .cz-thumblist {
padding-top: 8px !important;
}
.modal-quick-view .cz-preview-item > img {
width: 100%;
}
}
.product-details-seller-info {
position: absolute;
inset-inline-end: 24px;
inset-block-start: -4px;
}
.image-default-bg-color {
background-color: #1455ac10;
}
@media (min-width: 768px) {
[dir="ltr"] .text-md-start {
text-align: left !important;
}
[dir="rtl"] .text-md-start {
text-align: right !important;
}
}
.owl-theme .owl-nav *,
.owl-theme .owl-nav [class*="owl-"]:hover {
background-color: var(--web-primary) !important;
}
.rating {
cursor: pointer;
--dir: right;
--fill: #1455ac;
--fillbg: rgba(100, 100, 100, 0.15);
--star: url('data:image/svg+xml,');
--stars: 5;
--starsize: 2.5rem;
--symbol: var(--star);
--value: 1;
--w: calc(var(--stars) * var(--starsize));
--x: calc(100% * (var(--value) / var(--stars)));
block-size: var(--starsize);
inline-size: var(--w);
position: relative;
touch-action: manipulation;
-webkit-appearance: none;
}
[dir="rtl"] .rating {
--dir: left;
}
.rating::-moz-range-track {
background: linear-gradient(
to var(--dir),
var(--fill) 0 var(--x),
var(--fillbg) 0 var(--x)
);
block-size: 100%;
mask: repeat left center/var(--starsize) var(--symbol);
}
.rating::-webkit-slider-runnable-track {
background: linear-gradient(
to var(--dir),
var(--fill) 0 var(--x),
var(--fillbg) 0 var(--x)
);
block-size: 100%;
mask: repeat left center/var(--starsize) var(--symbol);
-webkit-mask: repeat left center/var(--starsize) var(--symbol);
}
.rating::-moz-range-thumb {
height: var(--starsize);
opacity: 0;
width: var(--starsize);
}
.rating::-webkit-slider-thumb {
height: var(--starsize);
opacity: 0;
width: var(--starsize);
-webkit-appearance: none;
}
.rating,
.rating-label {
display: block;
font-family: ui-sans-serif, system-ui, sans-serif;
}
.rating-label {
margin-block-end: 1rem;
}
.rating--nojs::-moz-range-track {
background: var(--fillbg);
}
.rating--nojs::-moz-range-progress {
background: var(--fill);
block-size: 100%;
mask: repeat left center/var(--starsize) var(--star);
}
.rating--nojs::-webkit-slider-runnable-track {
background: var(--fillbg);
}
.rating--nojs::-webkit-slider-thumb {
background-color: var(--fill);
box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
opacity: 1;
width: 1px;
}
[dir="rtl"] .rating--nojs::-webkit-slider-thumb {
box-shadow: var(--w) 0 0 var(--w) var(--fill);
}
.top-1 {
top: 0.5rem;
}
.left-1 {
left: 0.5rem;
}
#dataTable_wrapper > .row:nth-child(1) {
display: flex;
}
#dataTable_wrapper > .row:nth-child(1) #dataTable_length {
display: none;
}
[dir="rtl"] div.dataTables_wrapper div.dataTables_filter {
text-align: left !important;
padding-inline-end: 0 !important;
}
[dir="rtl"]
div.table-responsive
> div.dataTables_wrapper
> div.row
> div[class^="col-"]:last-child {
padding-left: 0;
}
[dir="rtl"] .cz-image-zoom {
direction: rtl;
}
[dir="rtl"] .cz-image-zoom-pane {
direction: ltr;
}
.social-share-popup {
padding: 25px;
width: 100%;
}
.social-share-popup :is(header, .icons, .field) {
display: flex;
align-items: center;
justify-content: space-between;
}
.social-share-popup header {
padding-bottom: 15px;
border-bottom: 1px solid #ebedf9;
}
.social-share-popup header span {
font-size: 21px;
font-weight: 600;
}
.social-share-popup header .close,
.icons a {
display: flex;
align-items: center;
border-radius: 50%;
justify-content: center;
transition: all 0.3s ease-in-out;
}
.social-share-popup header .close {
color: #878787;
font-size: 17px;
background: #f2f3fb;
height: 33px;
width: 33px;
cursor: pointer;
}
.social-share-popup header .close:hover {
background: #ebedf9;
}
.social-share-popup .content {
margin: 20px 0;
}
.social-share-popup .icons {
display: flex;
justify-content: center;
margin: 15px 0 20px 0;
gap: 1.5rem;
list-style: none;
}
.social-share-popup .content p {
font-size: 16px;
}
.social-share-popup .content .icons li a {
height: 50px;
width: 50px;
font-size: 20px;
text-decoration: none;
border: 1px solid transparent;
}
.social-share-popup .icons li a i {
transition: transform 0.3s ease-in-out;
}
.social-share-popup .icons li:nth-child(1) a {
color: #1877f2;
border-color: #b7d4fb;
}
.social-share-popup .icons li:nth-child(1):hover a {
background: #1877f2;
}
.social-share-popup .icons li:nth-child(2) a {
color: #46c1f6;
border-color: #b6e7fc;
}
.social-share-popup .icons li:nth-child(2):hover a {
background: #46c1f6;
}
.social-share-popup .icons li:nth-child(3) a {
color: #e1306c;
border-color: #f5bccf;
}
.social-share-popup .icons li:nth-child(3):hover a {
background: #e1306c;
}
.social-share-popup .icons li:nth-child(4) a {
color: #25d366;
border-color: #bef4d2;
}
.social-share-popup .icons li:nth-child(4):hover a {
background: #25d366;
}
.social-share-popup .icons li:nth-child(5) a {
color: #0088cc;
border-color: #b3e6ff;
}
.social-share-popup .icons li:nth-child(5):hover a {
background: #0088cc;
}
.social-share-popup .icons li:hover a {
color: #fff;
border-color: transparent;
}
.social-share-popup .icons li:hover a i {
transform: scale(1.2);
}
.social-share-popup .content .field {
margin: 12px 0 -5px 0;
height: 45px;
border-radius: 4px;
padding: 0 5px;
border: 1px solid #e1e1e1;
}
.social-share-popup .field.active {
border-color: #7d2ae8;
}
.social-share-popup .field i {
width: 50px;
font-size: 18px;
text-align: center;
}
.social-share-popup .field.active i {
color: #7d2ae8;
}
.social-share-popup .field input {
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 15px;
}
.social-share-popup .field button {
color: #fff;
padding: 5px 18px;
background: var(--base);
border: 0;
border-radius: 5px;
}
.user-profile-container {
background: rgba(252, 252, 252, 1);
direction: var(--web-direction);
}
.line-height-16 {
line-height: 16px;
}
.customer-profile-wishlist .price-range,
.customer-profile-wishlist .price-range .fs-16 {
font-size: 13px;
}
.customer-profile-wishlist .price-range del {
font-size: 14px;
}
.customer-profile-wishlist .price-range .discounted-unit-price {
font-size: 15px;
}
.customer-profile-orders .status-badge {
height: 25px;
padding: 3px 9px 3px 9px;
border-radius: 5px;
}
.text-secondary-50 {
color: rgba(155, 155, 155, 1);
}
.border-lighter {
border: 1px solid rgba(20, 85, 172, 0.05);
}
.user-profile-aside .aside-link {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
.user-profile-aside .active-menu .aside-link {
font-weight: 600;
}
.shadow-border {
border: 2px solid rgba(155, 155, 155, 0.05) !important;
}
.details-text-justify h1,
.details-text-justify h2,
.details-text-justify h3,
.details-text-justify h4,
.details-text-justify h5,
.details-text-justify h6 {
text-align: start;
}
.max-height-100px {
max-height: 100px;
overflow: hidden;
}
.min-height-auto {
min-height: auto !important;
}
.min-height-100px {
min-height: 100px;
}
.max-height-200px {
max-height: 200px;
overflow: hidden;
}
.tio-star.text-star,
.tio-star.text-warning {
color: rgba(255, 125, 30, 1) !important;
}
.map-area-alert-border {
border: 2px solid transparent;
}
.map-area-alert-danger {
border: 2px solid red;
border-radius: 5px;
overflow: hidden;
}
.location-search-input-field {
top: 10px !important;
outline: none;
border: 1px solid #b1b1b1;
padding: 5px 10px;
left: 250px !important;
height: 40px;
font-size: 14px;
}
@media (max-width: 767px) {
.gmnoprint.gm-style-mtc-bbw {
display: none;
}
.location-search-input-field {
left: 10px !important;
}
}
.text-force-underline {
text-decoration: underline !important;
}
.temporarily-closed-sticky-alert {
position: absolute;
top: 60px;
width: 100%;
padding: 15px;
}
.temporarily-closed-sticky-alert div.alert-box {
background-color: rgba(254, 247, 209, 1);
font-size: 12px;
letter-spacing: 0.03125rem;
font-weight: 500;
padding: 20px;
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
}
.temporarily-closed-sticky-alert div.alert-box img {
width: 25px;
}
.temporarily-closed-sticky-alert div button {
background-color: transparent;
border: 0;
font-size: 14px;
min-width: 20px;
}
.light-placeholder::-webkit-input-placeholder {
color: var(--input-placeholder-color) !important;
opacity: 0.3 !important;
}
.light-placeholder::-moz-placeholder {
color: var(--input-placeholder-color) !important;
opacity: 0.3 !important;
}
.light-placeholder:-ms-input-placeholder {
color: var(--input-placeholder-color) !important;
opacity: 0.3 !important;
}
.light-placeholder::-ms-input-placeholder {
color: var(--input-placeholder-color) !important;
opacity: 0.3 !important;
}
.light-placeholder::placeholder {
color: var(--input-placeholder-color) !important;
opacity: 0.3 !important;
}
@media (max-width: 575px) {
.mobile-fs-12 {
font-size: 12px !important;
}
}
.search-result-product-button {
width: 100%;
display: grid;
grid-template-columns: 1rem 1fr 2rem;
gap: 0.5rem;
}
/* .search-bar-input {
padding-right: 5rem !important;
} */
/* =========================================================
SEARCH CLEAR / CROSS BUTTON
========================================================= */
/* Remove the old 5rem right padding for navbar search only */
.lg-header .lg-search-input.search-bar-input {
padding-right: 8px !important;
}
/* Chrome / Edge search clear button */
.lg-header .lg-search-input::-webkit-search-cancel-button {
cursor: pointer;
transform: scale(1.35);
margin-right: 5px;
opacity: 0.75;
}
/* Slightly stronger on hover */
.lg-header .lg-search-input::-webkit-search-cancel-button:hover {
opacity: 1;
transform: scale(1.45);
}
@media (max-width: 767px) {
.search-bar-input {
padding-right: 1rem !important;
}
}
#lightbox {
display: flex;
flex-direction: column-reverse;
}
.direction-ltr {
direction: ltr !important;
}
.custom-cart-opacity-50 {
opacity: 50%;
}
[dir="rtl"] .__chat-seller .aSend {
transform: rotate(180deg);
}
.search-card.mobile-search-card {
top: calc(100% - 1px);
left: 0;
position: absolute;
background: white;
z-index: 999;
width: 100%;
display: none;
}
[dir="rtl"] .category-wise-product-slider .owl-nav,
[dir="rtl"] .new-arrivals-product .owl-nav {
display: flex !important;
}
.img-avatar-parent-element {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
width: 77px;
}
.img-avatar-parent-element img {
object-fit: cover;
height: 100%;
width: auto;
}
.owl-nav.disabled {
display: none !important;
}
.alert--message-2 {
border-left: 3px solid var(--base);
border-radius: 6px;
position: fixed;
right: 20px;
top: 80px;
z-index: 9999;
background: #fff;
width: 80vw;
display: flex;
max-width: 330px;
align-items: center;
gap: 12px;
padding: 16px;
font-size: 12px;
transition: all ease 0.5s;
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075);
}
.alert--message-2 h6 {
font-size: 14px;
}
.alert--message-2:not(.active) {
transform: translateX(calc(100% + 40px));
}
.alert--container {
position: fixed;
right: 20px;
top: 80px;
z-index: 9999;
width: 80vw;
max-width: 330px;
}
.alert--container:not(.active) {
opacity: 0;
visibility: hidden;
}
.alert--container .alert {
position: unset !important;
top: unset !important;
left: unset !important;
right: unset !important;
margin-bottom: 10px;
width: 100% !important;
}
.alert--container .alert:not(.active) {
display: none;
}
.w--0 {
width: 0;
flex-grow: 1;
}
.shop-head-check[type="checkbox"],
.shop-item-check[type="checkbox"] {
cursor: pointer;
}
[dir="rtl"] .checkbox-color input {
right: -9999px;
left: auto;
position: absolute;
}
[dir="rtl"] .checkbox-alphanumeric input {
right: -9999px;
left: auto;
position: absolute;
}
.color-bs-primary-force,
.color-bs-primary-force:focus {
color: var(--web-primary) !important;
}
.absolute-ltr {
direction: ltr !important;
}
[dir="rtl"] input[type="tel" i] {
direction: rtl;
}
body {
word-break: break-word;
}
.rich-editor-html-content table {
color: var(--title-color);
max-width: 100% !important;
}
.rich-editor-html-content table > :not(caption) > * {
border-width: var(--bs-border-width) 0;
}
.rich-editor-html-content table > :not(caption) > * > * {
border-width: 0 var(--bs-border-width);
}
.rich-editor-html-content table {
--bs-table-color: var(--bs-body-color);
--bs-table-bg: transparent;
--bs-table-border-color: var(--bs-border-color);
--bs-table-accent-bg: transparent;
--bs-table-striped-color: var(--bs-body-color);
--bs-table-striped-bg: rgba(0, 0, 0, 0.05);
--bs-table-active-color: var(--bs-body-color);
--bs-table-active-bg: rgba(0, 0, 0, 0.1);
--bs-table-hover-color: var(--bs-body-color);
--bs-table-hover-bg: rgba(0, 0, 0, 0.075);
width: 100%;
margin-bottom: 1rem;
color: var(--bs-table-color);
vertical-align: top;
border-color: var(--bs-table-border-color);
}
.rich-editor-html-content table > :not(caption) > * > * {
padding: 0.5rem 0.5rem;
background-color: var(--bs-table-bg);
border-bottom-width: var(--bs-border-width);
box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}
.rich-editor-html-content table > tbody {
vertical-align: inherit;
}
.rich-editor-html-content table > thead {
vertical-align: bottom;
}
.rich-editor-html-content table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rich-editor-html-content li[data-list="bullet"] {
list-style-type: disc !important;
}
.rich-editor-html-content li[data-list="unchecked"] {
list-style-type: square !important;
}
.rich-editor-html-content p:has(img) {
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 0;
}
.rich-editor-html-content img,
.rich-editor-html-content iframe.ql-video {
width: 100%;
max-width: 350px;
aspect-ratio: 2 / 1;
object-fit: cover;
border-radius: 5px;
border: 1px solid var(--bs-border-color, #EFF1F4);;
margin-inline-end: 1rem;
margin-bottom: 0.5rem;
}
@media (max-width: 575px) {
.rich-editor-html-content table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rich-editor-html-content img,
.rich-editor-html-content iframe.ql-video{
max-width: 100%;
}
}
@media (max-width: 767px) {
.rich-editor-html-content table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 991px) {
.rich-editor-html-content table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 1199px) {
.rich-editor-html-content table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 1399px) {
.rich-editor-html-content table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
.rich-editor-html-content table {
table-layout: auto;
width: 100%;
border: 1px solid #e3e9ef;
}
.rich-editor-html-content table th, .rich-editor-html-content table td {
border: 1px solid #e3e9ef;
}
.rich-editor-html-content table tbody tr td:first-child,
.rich-editor-html-content table tbody tr td:first-child strong {
width: 1%;
white-space: nowrap;
}
.embed-responsive {
overflow: hidden;
}
.embed-responsive-16by9 {
aspect-ratio: 16/9;
}
.embed-responsive-item {
width: 100%;
}
.product-preview-modal-text {
position: absolute;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
z-index: 99;
height: 76px;
cursor: pointer;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 38%,
rgba(255, 255, 255, 0.8) 69%,
rgba(255, 255, 255, 0.9) 100%
);
}
.product-preview-modal-text:hover span {
transition: 0.5s ease-in-out all;
}
.product-preview-modal-text:hover span {
scale: 1.05;
font-weight: 700;
}
.digital-product-authors {
display: flex;
flex-wrap: wrap;
}
.digital-product-authors .digital-product-author-title {
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: #828697;
padding-inline-end: 10px;
}
.digital-product-authors .item-list a {
font-size: 14px;
font-weight: 600;
line-height: 18px;
text-align: center;
color: #1e1e1e !important;
position: relative;
padding-inline-end: 10px;
margin-inline-end: 5px;
}
.digital-product-authors .item-list a:after {
content: "";
width: 0;
display: flex;
height: 14px;
border: 1px solid #b0c7e5;
font-weight: 400 !important;
position: absolute;
bottom: 0;
right: 0;
}
.digital-product-authors .item-list a:last-child:after {
content: unset;
}
.product-categories-list {
overflow: hidden scroll;
max-height: 18rem;
}
.social-media-login-btn {
background-color: #0000000a;
width: 100%;
gap: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
padding: 12px 15px 12px 15px;
}
.social-media-login-btn img {
height: 30px;
width: auto;
}
.social-media-login-btn .text {
font-weight: 600;
color: #334257;
}
.social-media-user-modal .image-box {
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}
.social-media-user-modal .image-box img {
--size: 80px;
width: var(--size);
height: var(--size);
aspect-ratio: 1;
object-fit: cover;
border-radius: 100%;
box-shadow: 0 2px 15px 0.1em #00000029;
}
.inset-inline-end-10px {
inset-inline-end: 10px;
}
.grecaptcha-badge {
display: none !important;
}
.request-restock-btn {
position: relative;
filter: brightness(1) !important;
-webkit-filter: brightness(1) !important;
}
.request-restock-btn::before {
position: absolute;
content: "";
inset: 0;
background: var(--web-primary);
opacity: 0.07;
border-radius: inherit;
}
.input-required-icon {
color: #d80000;
vertical-align: middle;
margin: 0;
padding: 0;
}
.d--flex {
display: flex;
}
@media (min-width: 576px) {
.d--sm-flex {
display: -ms-flexbox;
display: flex;
}
.d--sm-block {
display: block;
}
}
.product-restock-request-section {
display: flex;
justify-content: center;
gap: 1rem;
}
.custom-disabled {
opacity: 0.65;
box-shadow: none;
}
.clearance-sale-title-bg {
background-size: contain;
background-repeat: no-repeat;
min-height: 83px;
width: 220px;
position: relative;
}
.clearance-sale-title-bg .title {
position: absolute;
bottom: 0.5rem;
color: #fff;
left: 20px;
font-size: 18px;
font-weight: 800;
line-height: 21px;
}
.clearance-sale-title-bg .sub-title {
position: absolute;
bottom: 2.3rem;
color: #1455ac;
font-size: 12px;
font-weight: 800;
line-height: 19px;
left: 1.25rem;
text-align: center;
width: 100px;
}
[dir="rtl"] .clearance-sale-title-bg {
transform: scaleX(-1);
}
[dir="rtl"] .clearance-sale-title-bg .title,
[dir="rtl"] .clearance-sale-title-bg .sub-title {
transform: scaleX(-1);
}
.fs-12 .discounted-unit-price,
.fs-12 .product-total-unit-price {
font-size: 0.75rem !important;
}
.bg--light {
background-color: #f8f8fa;
}
[theme="dark"].bg--light {
background-color: #18181a;
}
.z-index-1 {
z-index: -1;
}
.quantity-box-120 {
width: 120px;
min-width: 110px;
}
.clearance-sale-slider.owl-carousel .owl-stage {
display: flex;
height: 100%;
}
.clearance-sale-slider.owl-carousel.owl-drag .owl-item {
display: grid;
align-items: stretch;
}
.bg-count-light {
background: rgba(236, 241, 246, 0.5);
}
.bg-count-light:focus,
.bg-count-light:hover {
filter: none !important;
}
.max-height-420px {
max-height: 420px;
}
.mt-80 {
margin-top: 80px;
}
.mb-80 {
margin-bottom: 80px;
}
.mb-50 {
margin-bottom: 50px;
}
.mb-60 {
margin-bottom: 60px;
}
.download-user-app {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 30px;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.download-user-app .download-user-main {
position: relative;
z-index: 2;
}
.download-user-app::after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-clr-rgb), 80%);
z-index: 1;
}
.pe-5rem {
padding-inline-end: 5rem;
}
@media (min-width: 992px) {
.sticky-top-wrapper {
position: sticky;
top: 130px;
}
.sticky-top-wrapper.sticky-top-blog-details {
top: 130px;
margin-top: 150px;
}
}
.aspect-2 {
aspect-ratio: 2/1;
object-fit: cover;
}
.border-top-before-after {
position: relative;
}
.border-top-before-after::before,
.border-top-before-after::after {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
border-top: 1px solid #d9d9d9;
width: calc(50% - 140px);
z-index: -1;
}
.border-top-before-after::after {
inset-inline-start: unset;
inset-inline-end: 0;
}
.blog-card {
box-shadow: 0px 0px 6px 0px rgba(51, 66, 87, 0.07);
border-radius: 15px;
}
.blog-card_image img {
border-radius: 15px 15px 0 0;
}
.blog-card_footer {
position: absolute;
width: 100%;
inset-inline-start: 0;
padding-inline: 1rem;
inset-block-end: 1rem;
}
.rounded-30 {
border-radius: 30px;
}
.border-inline-end {
border-inline-end: 1px solid rgba(38, 45, 52, 0.7);
}
@media (max-width: 575px) {
.border-inline-end.pe-3 {
border-inline-end: 0;
padding-inline-end: 0;
}
}
.ml-5 {
margin-inline-start: 3rem !important;
}
@media (min-width: 991px) {
.ml-lg-0 {
margin-inline-start: 0 !important;
}
}
.h-80px {
height: 80px !important;
}
.article-nav-wrapper {
}
.article-nav-wrapper ul li {
list-style: none;
}
.article-nav-wrapper ul li:not(:last-child) {
margin-bottom: 20px;
}
.article-nav-wrapper ul li.active a {
font-weight: 600;
color: var(--base);
border-bottom: 1px solid var(--base);
padding: 0 0.5rem;
margin-inline-start: 1rem;
transition: all 0.3s ease-in-out;
}
.article-nav-wrapper_collapse {
background-color: #fff;
filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.1));
width: 36px;
height: 36px;
transition: background 0.3s ease-in-out;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
display: none;
position: fixed;
inset-block-start: 190px;
inset-inline-start: 1rem;
z-index: 99;
}
.article-nav-wrapper_collapse:hover {
border: 1px solid rgba(0, 0, 0, 0.1);
background: #f6f6f6;
}
.article-nav-wrapper_collapse i {
font-size: 1rem;
line-height: 1;
transition: all 0.3s ease-in-out;
}
@media (max-width: 991px) {
.article-nav-wrapper_collapse {
display: flex;
}
.article-nav-wrapper {
position: fixed;
width: 100%;
inset-inline-start: 0;
inset-block-start: 170px;
z-index: 9;
}
.article-nav-wrapper ul {
overflow-y: auto;
max-height: 260px;
}
}
.recent-post:not(:last-child) {
margin-bottom: 20px;
}
.blog-top-nav {
overflow-x: auto;
white-space: nowrap;
padding-inline-start: 0;
padding-inline-end: 60px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.blog-top-nav::-webkit-scrollbar {
display: none;
}
.blog-top-nav li {
list-style: none;
}
.blog-top-nav li.active a {
color: #fff;
background-color: var(--base);
}
.blog-top-nav li.active a span {
opacity: 1 !important;
}
.blog-top-nav_next-btn,
.blog-top-nav_prev-btn {
--justify-content: start;
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
width: 50px;
height: 42px;
padding: 0;
display: none;
justify-content: var(--justify-content);
align-items: center;
color: #fff;
background-color: #f7f8fa;
z-index: 100;
}
.blog-top-nav_next-btn {
--justify-content: end;
padding-inline-start: 0.75rem;
}
.blog-top-nav_prev-btn {
--justify-content: start;
}
.blog-top-nav_next-btn button,
.blog-top-nav_prev-btn button {
width: 39px;
height: 39px;
aspect-ratio: 1;
background-color: var(--base);
max-width: 39px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.blog-top-nav_prev-btn {
inset-inline-end: unset;
inset-inline-start: 0;
}
.blog-top-nav_next-btn:hover,
.blog-top-nav_prev-btn:hover,
.blog-top-nav_next-btn:focus,
.blog-top-nav_prev-btn:focus,
.blog-top-nav_next-btn:active,
.blog-top-nav_prev-btn:active {
color: #fff !important;
background-color: #f7f8fa !important;
border: none !important;
}
.blog-top-nav_next-btn button:hover,
.blog-top-nav_prev-btn button:hover,
.blog-top-nav_next-btn button:focus,
.blog-top-nav_prev-btn button:focus,
.blog-top-nav_next-btn button:active,
.blog-top-nav_prev-btn button:active {
color: #fff !important;
background-color: var(--base) !important;
border: none !important;
}
.h-45px {
height: 45px !important;
}
.blog-banner-search {
margin-top: -40px;
width: 70%;
}
@media (max-width: 575px) {
.blog-banner-search {
width: 90%;
margin-top: 0;
}
}
.text--primary {
color: var(--base) !important;
}
.blog-banner-container {
position: relative;
overflow: hidden;
}
.blog-banner-svg {
max-width: unset !important;
}
@media (min-width: 1400px) {
.blog-banner-svg {
width: 100%;
height: auto;
}
}
.blog-banner-content {
position: absolute;
inset-inline-start: 50%;
inset-block-start: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
/* Transaction filter */
.transaction-filter_dropdown {
min-width: 360px !important;
transform: translate(0px, 45px) !important;
right: 0 !important;
left: auto !important;
}
[dir="rtl"] .transaction-filter_dropdown {
right: auto !important;
left: 0 !important;
}
@media (max-width: 575px) {
.transaction-filter_dropdown {
min-width: 100% !important;
}
}
.max-h-290px {
max-height: 290px;
}
.daterangepicker.show-calendar .drp-buttons {
display: flex !important;
align-items: center !important;
justify-content: end !important;
}
.icon-absolute-on-right {
position: absolute;
font-size: 20px;
opacity: 0.6;
inset-inline-end: 15px;
inset-block-start: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.fs-20 {
font-size: 20px !important;
}
#transactionFilterBtn .count {
position: absolute;
inset-inline-end: -4px;
inset-block-start: -4px;
width: 1rem;
height: 1rem;
font-size: 0.675rem;
line-height: 1rem;
border-radius: 50%;
text-align: center;
color: #fff;
}
.earn-checkbox {
accent-color: var(--web-primary);
width: auto;
}
#filterCloseBtn {
width: 24px;
height: 24px;
background-color: #d9d9d9;
}
.gap-10 {
gap: 10px !important;
}
.gap-30 {
gap: 30px !important;
}
.letter-spacing-0 {
letter-spacing: 0;
}
@media (max-width: 575px) {
.fs-20-mobile {
font-size: 1.25rem !important;
}
.fs-16-mobile {
font-size: 1rem !important;
}
.fs-14-mobile {
font-size: 0.875rem !important;
}
.fs-12-mobile {
font-size: 0.75rem !important;
}
}
/* Product page price range */
#price_range_slider {
width: calc(100% - 16px);
height: 3px;
/* background: rgba(var(--primary-clr-rgb), 0.38); */
position: relative;
}
[dir="rtl"] #price_range_slider {
right: 16px;
}
#price_range_slider::after {
content: "";
inset-inline-start: 0;
width: calc(100% + 15px);
height: 100%;
background: rgba(var(--primary-clr-rgb), 0.38);
position: absolute;
}
[dir="rtl"] #price_range_slider::after {
right: -15px;
}
#price_range_slider .slider-thumb {
width: 1rem;
height: 1rem;
background: var(--base);
border-radius: 50%;
position: absolute;
top: -5px;
cursor: pointer;
}
#price_range_slider .slider-range {
height: 3px;
background: var(--base);
position: absolute;
top: 0;
}
.bg-black-09 {
background-color: rgba(0, 0, 0, 0.09);
}
.form-control--sm {
block-size: 1.875rem;
font-size: 0.75rem;
}
.w-fit-content {
width: fit-content !important;
}
.gap-12px {
gap: 0.75rem !important;
}
.mb-12px {
margin-bottom: 0.75rem !important;
}
.form-loading-button {
transition: 1s ease-in-out all;
display: flex;
align-items: center;
gap: 0.5rem;
}
.form-loading-button .spinner-grow-sm,
.form-loading-button .loading {
display: none;
}
.form-loading-button.active-loading .default {
display: none;
}
.form-loading-button.active-loading .spinner-grow-sm,
.form-loading-button.active-loading .loading {
display: block;
}
.form-loading-button.bg-primary {
color: var(--primary-light);
}
.form-loading-button.bg-primary .spinner-grow {
background-color: var(--web-primary);
}
.cursor-default {
cursor: default !important;
}
.chatting-search-border {
border: 2px solid #d3e8ff4d;
border-radius: 5px;
}
.__color-9B9B9B {
color: #9b9b9b;
}
.blog-single-card-item {
cursor: pointer;
}
.business-pages-banner-section {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
--opacity: 0.5;
--bg-color: 0, 0, 0;
position: relative;
z-index: 1;
padding: 3rem;
overflow: hidden;
border-radius: 10px;
}
.business-pages-banner-section h1 {
color: #ffffff;
font-size: 1.75rem;
}
.business-pages-banner-section:after {
inline-size: 100%;
block-size: 100%;
inset-inline-start: 0;
inset-block-start: 0;
position: absolute;
z-index: -1;
content: "";
background-color: rgba(var(--bg-color), var(--opacity));
}
@media (max-width: 479px) {
.business-pages-banner-section h1 {
font-size: 1.5rem;
}
}
.column-gap-5 {
column-gap: 2rem !important;
}
.cz-countdown-value.fs-8{
font-size: 0.5rem !important;
}
.h-40px{
height: 40px !important;
}
.fs-15{
font-size: 15px !important;
}
.product-card-shadow{
box-shadow: 0 0 1.636px 0 rgba(145, 158, 171, 0.20), 0 8.179px 16.359px -2.454px rgba(145, 158, 171, 0.05) !important;
}
.border-black-50{
border-color: rgba(0, 0, 0, 0.05) !important;
}
.product-with-bg .product-single-hover{
background-color: #ffffff;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0 0 1.636px 0 rgba(145, 158, 171, 0.20), 0 8.179px 16.359px -2.454px rgba(145, 158, 171, 0.05);
}
.product-with-bg img.border.border-black-50{
border: none !important;
}
.search-rounded-10{
--radius: 10px;
border-radius: var(--radius);
}
.search-rounded-10 .search-page-button-input{
border-radius: var(--radius);
}
.search-rounded-10 .search-page-button{
border-radius: 0 var(--radius) var(--radius) 0;
}
[dir="rtl"] .search-rounded-10 .search-page-button {
border-radius: var(--radius) 0 0 var(--radius);
}
.owl-theme .owl-nav .owl-prev,
.owl-theme .owl-nav .owl-next{
--size: 40px;
width: var(--size);
height: var(--size);
display: flex;
justify-content: center;
align-items: center;
}
.owl-theme .owl-nav .owl-prev i,
.owl-theme .owl-nav .owl-next i{
font-size: 0.875rem !important;
font-weight: 700;
line-height: 1;
}
@media (max-width: 767px) {
.owl-theme .owl-nav .owl-prev,
.owl-theme .owl-nav .owl-next{
--size: 30px;
}
.owl-theme .owl-nav .owl-prev i,
.owl-theme .owl-nav .owl-next i{
font-size: 0.75rem !important;
}
}
@media (max-width: 539px) {
#featured_products_list.owl-theme .owl-nav .owl-prev{
transform: translateX(-30px);
}
#featured_products_list.owl-theme .owl-nav .owl-next {
transform: translateX(30px);
}
}
@media (max-width: 360px) {
#featured_products_list {
max-width: 200px;
}
}
.__cart-total .order-summery-footer-image{
width: 20px;
height: 20px;
margin: 0;
}
.shop-feature-faster{
background-color: var(--light-box);
padding: 12px 20px !important;
gap: 10px;
}
.shop-feature-faster .inners{
gap: 10px;
font-size: 13px !important;
}
.select-wrap select{
font-size: 14px;
}
.light-box{
background-color: var(--light-box) !important;
}
.p-20{
padding: 20px;
}
.min-height-74{
min-height: 74px;
}
.w-24{
width: 24px;
min-width: 24px;
}
.offline_payment_button:hover,
.offline_payment_button.active{
background-color: var(--web-primary) !important;
color: var(--white-clr) !important;
filter: brightness(1) !important;
}
.max-w-100px{
max-width: 100px;
}
.p-xxl-4px{
@media screen and (min-width: 1399px) {
padding: 4px;
}
}
.lh-19px{
line-height: 19px;
}
.flash-deal-shadow{
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.06) !important;
}
.h-24px{
height: 24px;
}
.w-20px{
width: 20px;
}
.h-20px{
height: 20px;
}
.p-details-description p span{
display: block;
line-height: 24px;
}
.p-details-description h3 ul{
padding-inline-start: 0;
}
.max-h-35vh {
max-height: 35vh !important;
}
/* BEGINNING OF NEW CHANGES */
/* header root */
.lg-header {
--lg-green: #0d6b38;
--lg-green-dark: #07552c;
--lg-green-soft: #eef7f1;
--lg-red: #d91616;
--lg-text: #28372f;
--lg-muted: #77847c;
--lg-border: #e4ece7;
--lg-bg: #ffffff;
position: relative;
z-index: 1030;
background: var(--lg-bg);
font-family: inherit;
}
.lg-header-main {
background: rgba(255, 255, 255, .98);
border-bottom: 1px solid #edf2ee;
box-shadow: 0 3px 18px rgba(21, 69, 43, .035);
}
.lg-navbar {
min-height: 78px;
display: flex;
align-items: center;
gap: 26px;
}
/* search */
.lg-search-wrap {
flex: 1;
min-width: 0;
max-width: 760px;
}
.lg-search-form {
position: relative;
width: 100%;
height: 48px;
display: flex;
align-items: center;
border: 1px solid #e4ebe6;
border-radius: 26px;
background: #f6f9f7;
transition:
border-color .2s ease,
box-shadow .2s ease,
background .2s ease;
}
.lg-search-form:focus-within {
background: #fff;
border-color: rgba(13, 107, 56, .35);
box-shadow:
0 0 0 4px rgba(13, 107, 56, .06);
}
/* category */
.lg-category-selector {
height: 100%;
flex-shrink: 0;
display: flex;
align-items: center;
}
.lg-category-button {
height: 100%;
min-width: 145px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 0 16px;
border: 0;
background: transparent;
color: #3c4b42;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.lg-category-button:focus {
outline: none;
}
.lg-category-button i {
font-size: 10px;
color: #869189;
}
.lg-search-divider {
width: 1px;
height: 23px;
flex-shrink: 0;
background: #dce5df;
}
/* search icon */
.lg-search-icon {
width: 45px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #819087;
font-size: 16px;
}
/* input */
.lg-search-input {
flex: 1;
width: 100%;
height: 100%;
padding: 0;
border: none !important;
outline: none !important;
background: transparent !important;
box-shadow: none !important;
color: #26372d;
font-size: 13px;
}
.lg-search-input::placeholder {
color: #8b9690;
}
/* cmd K */
.lg-search-shortcut {
margin-right: 8px;
padding: 4px 7px;
border: 1px solid #e1e7e3;
border-radius: 6px;
background: #edf2ef;
color: #8a958e;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
/* search submit */
.lg-search-submit {
width: 42px;
height: 42px;
margin-right: 3px;
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 0;
border-radius: 50%;
background: var(--lg-green);
color: white;
font-size: 16px;
}
/* Search dropdown */
.lg-search-result {
position: absolute !important;
top: calc(100% + 10px);
left: 0;
right: 0;
z-index: 1100;
border: 1px solid var(--lg-border);
border-radius: 14px;
box-shadow:
0 16px 40px rgba(30, 55, 40, .12);
}
/* CATEGORY DROPDOWN */
.lg-category-menu {
width: 270px;
margin-top: 8px;
padding: 8px;
border: 1px solid var(--lg-border);
border-radius: 14px;
box-shadow:
0 18px 45px rgba(27, 58, 39, .13);
}
.lg-category-item {
min-height: 42px;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 9px;
font-size: 13px;
}
.lg-category-item:hover {
background: var(--lg-green-soft);
color: var(--lg-green);
}
.lg-category-item-image {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
}
.lg-category-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lg-category-all {
color: var(--lg-green);
font-weight: 700;
}
.lg-category-view-all {
padding: 10px;
color: var(--lg-green);
font-size: 12px;
font-weight: 700;
text-align: center;
border-radius: 8px;
}
/* RIGHT ACTIONS */
.lg-header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.lg-action-button {
position: relative;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: transparent;
color: #35443b !important;
font-size: 20px;
text-decoration: none !important;
transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}
.lg-action-button:hover {
background: var(--lg-green-soft);
color: var(--lg-green) !important;
transform: translateY(-1px);
}
.lg-action-count {
position: absolute;
top: -4px;
right: -2px;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 2px solid #fff;
border-radius: 20px;
background: #e38822;
color: #fff;
font-size: 9px;
font-weight: 800;
line-height: 1;
}
/* =========================================================
ACCOUNT
========================================================== */
.lg-account-dropdown {
padding-left: 13px;
border-left: 1px solid #e6ece8;
}
.lg-account-button {
min-height: 46px;
display: flex;
align-items: center;
gap: 9px;
color: var(--lg-text) !important;
text-decoration: none !important;
cursor: pointer;
}
.lg-user-avatar {
width: 38px;
height: 38px;
flex-shrink: 0;
overflow: hidden;
border-radius: 50%;
background: #edf3ef;
box-shadow:
inset 0 0 0 1px #e5ece7;
}
.lg-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lg-user-avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
color: #8da096;
font-size: 18px;
}
.lg-user-info {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.2;
}
.lg-user-info small {
color: #7b877f;
font-size: 10px;
font-weight: 500;
}
.lg-user-info strong {
margin-top: 2px;
color: #263a2d;
font-size: 12px;
font-weight: 700;
}
.lg-account-chevron {
margin-left: 1px;
color: #69786f;
font-size: 9px;
}
.lg-account-menu {
min-width: 190px;
margin-top: 12px;
padding: 7px;
border: 1px solid var(--lg-border);
border-radius: 12px;
box-shadow:
0 16px 40px rgba(22, 50, 34, .12);
}
.lg-account-menu .dropdown-item {
padding: 9px 10px;
border-radius: 7px;
font-size: 12px;
}
/* =========================================================
CART
Existing _cart partial remains untouched
========================================================== */
/*
* Override the existing cart partial only visually.
* Its original AJAX IDs/classes remain untouched.
*/
/* =========================================================
BRAND BAR
========================================================== */
.lg-brand-nav {
background: #f8faf8;
border-bottom: 1px solid #e7eee9;
}
.lg-brand-nav-scroll {
height: 42px;
display: flex;
align-items: center;
gap: 27px;
overflow-x: auto;
scrollbar-width: none;
white-space: nowrap;
}
.lg-brand-nav-scroll::-webkit-scrollbar {
display: none;
}
.lg-brand-nav-link {
position: relative;
flex-shrink: 0;
color: #48564e;
font-size: 11px;
font-weight: 600;
text-decoration: none !important;
transition: color .2s ease;
}
.lg-brand-nav-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -13px;
height: 2px;
border-radius: 2px;
background: var(--lg-green);
opacity: 0;
transform: scaleX(.5);
transition:
opacity .2s ease,
transform .2s ease;
}
.lg-brand-nav-link:hover {
color: var(--lg-green);
}
.lg-brand-nav-link:hover::after {
opacity: 1;
transform: scaleX(1);
}
.lg-brand-nav-all {
color: #263d30;
font-weight: 800;
}
.lg-brand-nav-more {
color: var(--lg-green);
font-weight: 700;
}
.lg-brand-nav-more i {
margin-left: 3px;
font-size: 8px;
}
/* =========================================================
MOBILE
========================================================== */
.lg-mobile-menu-btn {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
border: 1px solid var(--lg-border);
border-radius: 10px;
background: #fff;
color: var(--lg-green);
font-size: 19px;
}
.lg-mobile-nav {
background: #fff;
border-top: 1px solid var(--lg-border);
border-bottom: 1px solid var(--lg-border);
}
.lg-mobile-nav-item {
display: block;
padding: 11px 4px;
border-bottom: 1px solid #f0f3f1;
color: #35463b;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
}
.lg-mobile-search {
display: none;
padding-bottom: 12px;
}
.lg-mobile-search-box {
height: 44px;
display: flex;
align-items: center;
gap: 9px;
padding-left: 13px;
overflow: hidden;
border: 1px solid var(--lg-border);
border-radius: 12px;
background: #f7f9f8;
}
.lg-mobile-search-box > i {
color: #849089;
}
.lg-mobile-search-box input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 13px;
}
.lg-mobile-search-box button {
width: 43px;
height: 43px;
border: none;
background: var(--lg-green);
color: #fff;
}
/* =========================================================
RESPONSIVE
========================================================== */
@media (max-width: 1199px) {
.lg-navbar {
gap: 18px;
}
.lg-brand-copy {
display: none !important;
}
.lg-search-wrap {
max-width: none;
}
.lg-category-button {
min-width: 125px;
padding-left: 12px;
padding-right: 12px;
}
.lg-search-shortcut {
display: none;
}
}
@media (max-width: 991px) {
.lg-user-info,
.lg-account-chevron {
display: none !important;
}
.lg-account-dropdown {
padding-left: 8px;
}
.lg-navbar {
gap: 12px;
}
.lg-category-button {
min-width: 110px;
font-size: 11px;
}
.lg-search-icon {
width: 36px;
}
}
@media (max-width: 767px) {
.lg-header-main {
position: relative;
}
.lg-navbar {
min-height: 64px;
gap: 10px;
}
.lg-brand {
margin-right: auto;
}
.lg-brand-logo {
width: 38px;
height: 38px;
}
.lg-header-actions {
gap: 4px;
}
.lg-account-dropdown {
padding-left: 4px;
border: 0;
}
.lg-user-avatar {
width: 36px;
height: 36px;
}
.lg-brand-nav-scroll {
height: 40px;
gap: 22px;
}
.lg-brand-nav-link {
font-size: 10px;
}
}
@media (max-width: 440px) {
.lg-action-button {
width: 36px;
height: 36px;
font-size: 17px;
}
.lg-user-avatar {
width: 34px;
height: 34px;
}
}
/* ============================================================
LALIGURANS NAVBAR
============================================================ */
.lg-header {
--lg-green: #076437;
--lg-green-dark: #054c2a;
--lg-green-soft: #edf7f1;
--lg-orange: #d98619;
--lg-text: #26372e;
--lg-muted: #7c8b82;
--lg-border: #dde8e1;
--lg-search-bg: #f7faf8;
position: relative;
z-index: 1030;
width: 100%;
background: #ffffff;
}
/* ============================================================
TOP BAR
============================================================ */
.lg-topbar {
width: 100%;
background: var(--lg-green);
color: #ffffff;
font-size: 10px;
font-weight: 600;
line-height: 1;
}
.lg-topbar-inner {
min-height: 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.lg-topbar-left,
.lg-topbar-right {
display: flex;
align-items: center;
white-space: nowrap;
}
.lg-topbar-left {
gap: 8px;
min-width: 0;
}
.lg-topbar-right {
gap: 10px;
flex-shrink: 0;
}
.lg-topbar-dot {
color: #ffbd38;
font-size: 7px;
}
.lg-topbar-separator {
opacity: .65;
}
.lg-topbar-divider {
width: 1px;
height: 12px;
background: rgba(255, 255, 255, .35);
}
.lg-topbar a {
color: #ffffff !important;
text-decoration: none !important;
font-weight: 700;
}
.lg-topbar a:hover {
color: #ffffff !important;
opacity: .85;
}
/* ============================================================
MAIN NAV
============================================================ */
.lg-header-main {
width: 100%;
background: rgba(255, 255, 255, .98);
border-bottom: 1px solid #edf2ef;
box-shadow:
0 3px 15px rgba(25, 65, 43, .025);
}
.lg-navbar {
min-height: 62px;
display: flex;
align-items: center;
gap: 18px;
width: 100%;
}
/* ============================================================
LOGO
============================================================ */
.lg-brand {
display: flex;
align-items: center;
gap: 9px;
flex: 0 0 auto;
text-decoration: none !important;
}
.lg-brand:hover {
text-decoration: none !important;
}
.lg-brand-logo {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lg-brand-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.lg-brand-copy {
display: flex;
flex-direction: column;
line-height: 1;
}
.lg-brand-copy strong {
color: var(--lg-green);
font-size: 16px;
font-weight: 800;
letter-spacing: .15px;
white-space: nowrap;
}
.lg-brand-copy small {
margin-top: 5px;
color: #a96c19;
font-size: 8px;
font-weight: 800;
letter-spacing: .25px;
white-space: nowrap;
}
/* ============================================================
SEARCH WRAPPER
============================================================ */
.lg-search-wrap {
flex: 1 1 520px;
min-width: 280px;
max-width: 690px;
}
.lg-search-form {
position: relative;
width: 100%;
height: 44px;
display: flex;
align-items: center;
overflow: visible;
border: 1px solid var(--lg-border);
border-radius: 25px;
background: var(--lg-search-bg);
transition:
background-color .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.lg-search-form:focus-within {
background: #ffffff;
border-color: rgba(7, 100, 55, .3);
box-shadow:
0 0 0 4px rgba(7, 100, 55, .055);
}
/* ============================================================
CATEGORY BUTTON
============================================================ */
.lg-category-selector {
height: 100%;
display: flex;
align-items: center;
flex: 0 0 auto;
}
.lg-category-button {
height: 100%;
min-width: 142px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 0 15px;
border: 0;
background: transparent;
color: #31443a;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.lg-category-button:focus {
outline: none;
}
.lg-category-button i {
color: #819087;
font-size: 9px;
}
.lg-search-divider {
width: 1px;
height: 22px;
flex-shrink: 0;
background: #d8e1dc;
}
/* ============================================================
SEARCH ICON
============================================================ */
.lg-search-icon {
width: 42px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #829088;
font-size: 15px;
}
/* ============================================================
SEARCH INPUT
============================================================ */
.lg-search-input {
flex: 1;
width: 100%;
min-width: 0;
height: 100%;
padding: 0 4px 0 0;
border: none !important;
outline: none !important;
background: transparent !important;
box-shadow: none !important;
color: #33453b;
font-size: 12px;
}
.lg-search-input:focus {
border: none !important;
outline: none !important;
box-shadow: none !important;
}
.lg-search-input::placeholder {
color: #8a9790;
opacity: 1;
}
/* ============================================================
SEARCH SHORTCUT
============================================================ */
.lg-search-shortcut {
margin-right: 8px;
padding: 4px 7px;
border: 1px solid #dee7e1;
border-radius: 6px;
background: #edf2ef;
color: #819087;
font-size: 9px;
font-weight: 600;
white-space: nowrap;
}
/* ============================================================
SEARCH SUBMIT
============================================================ */
.lg-search-submit {
width: 39px;
height: 39px;
margin-right: 2px;
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 0;
border-radius: 50%;
background: var(--lg-green);
color: #ffffff;
cursor: pointer;
}
/* ============================================================
AJAX SEARCH RESULTS
============================================================ */
.lg-search-result {
position: absolute !important;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 1100;
display: none;
overflow: hidden;
border: 1px solid var(--lg-border);
border-radius: 12px;
background: #ffffff;
box-shadow:
0 18px 40px rgba(23, 50, 34, .12);
}
/* ============================================================
CATEGORY DROPDOWN
============================================================ */
.lg-category-menu {
width: 270px;
margin-top: 8px;
padding: 7px;
border: 1px solid var(--lg-border);
border-radius: 12px;
background: #ffffff;
box-shadow:
0 18px 42px rgba(24, 57, 37, .12);
}
.lg-category-item {
min-height: 41px;
display: flex;
align-items: center;
gap: 10px;
padding: 7px 9px;
border-radius: 8px;
color: #34473c;
font-size: 12px;
}
.lg-category-item:hover {
background: var(--lg-green-soft);
color: var(--lg-green);
}
.lg-category-all {
color: var(--lg-green);
font-weight: 700;
}
.lg-category-item-image {
width: 25px;
height: 25px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 50%;
}
.lg-category-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lg-category-view-all {
padding: 9px;
color: var(--lg-green);
font-size: 11px;
font-weight: 700;
text-align: center;
border-radius: 8px;
}
/* ============================================================
RIGHT SECTION
============================================================ */
.lg-header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
min-width: 0;
white-space: nowrap;
}
/* ============================================================
ACTION DIVIDER
============================================================ */
.lg-action-divider {
width: 1px;
height: 32px;
background: #e0e7e3;
}
/* ============================================================
WISHLIST
============================================================ */
.lg-action-button {
position: relative;
width: 39px;
height: 39px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: transparent;
color: #2f4137 !important;
font-size: 19px;
text-decoration: none !important;
transition:
background-color .2s ease,
color .2s ease,
transform .2s ease;
}
.lg-action-button:hover {
background: var(--lg-green-soft);
color: var(--lg-green) !important;
transform: translateY(-1px);
}
.lg-action-count {
position: absolute;
top: -4px;
right: -2px;
min-width: 17px;
height: 17px;
padding: 0 4px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
border-radius: 20px;
background: #df861b;
color: #ffffff;
font-size: 8px;
font-weight: 800;
line-height: 1;
}
/* ============================================================
ACCOUNT
============================================================ */
.lg-account-dropdown {
flex-shrink: 0;
}
.lg-account-button {
min-height: 42px;
display: flex;
align-items: center;
gap: 8px;
color: var(--lg-text) !important;
text-decoration: none !important;
cursor: pointer;
}
.lg-account-button:hover {
color: var(--lg-text) !important;
text-decoration: none !important;
}
.lg-user-avatar {
width: 37px;
height: 37px;
flex-shrink: 0;
overflow: hidden;
border-radius: 50%;
background: #edf2ef;
box-shadow:
inset 0 0 0 1px #e4ebe7;
}
.lg-user-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.lg-user-avatar-placeholder {
display: flex;
align-items: center;
justify-content: center;
color: #8d9d94;
font-size: 17px;
}
.lg-user-info {
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.15;
}
.lg-user-info small {
color: #7c8a82;
font-size: 9px;
font-weight: 500;
}
.lg-user-info strong {
margin-top: 2px;
color: #293d31;
font-size: 11px;
font-weight: 750;
text-transform: capitalize;
}
.lg-account-chevron {
margin-left: 2px;
color: #66786e;
font-size: 8px;
}
.lg-account-menu {
min-width: 190px;
margin-top: 10px;
padding: 7px;
border: 1px solid var(--lg-border);
border-radius: 11px;
box-shadow:
0 17px 40px rgba(20, 50, 32, .12);
}
.lg-account-menu .dropdown-item {
padding: 9px 10px;
border-radius: 7px;
font-size: 12px;
}
.lg-account-menu .dropdown-item:hover {
background: var(--lg-green-soft);
color: var(--lg-green);
}
/* ============================================================
CART
IMPORTANT:
Do not hide .navbar-tool-text or cart internals.
============================================================ */
/* ============================================================
BRAND NAVIGATION
============================================================ */
.lg-brand-nav {
width: 100%;
background: #f8faf8;
border-bottom: 1px solid #e5ece8;
}
.lg-brand-nav-scroll {
min-height: 40px;
display: flex;
align-items: center;
gap: 26px;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
.lg-brand-nav-scroll::-webkit-scrollbar {
display: none;
}
.lg-brand-nav-link {
position: relative;
flex-shrink: 0;
color: #495950;
font-size: 10px;
font-weight: 600;
line-height: 40px;
text-decoration: none !important;
transition: color .2s ease;
}
.lg-brand-nav-link:hover {
color: var(--lg-green);
text-decoration: none !important;
}
.lg-brand-nav-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
border-radius: 2px;
background: var(--lg-green);
opacity: 0;
transform: scaleX(.4);
transition:
opacity .2s ease,
transform .2s ease;
}
.lg-brand-nav-link:hover::after {
opacity: 1;
transform: scaleX(1);
}
.lg-brand-nav-all {
color: #24392c;
font-weight: 800;
}
.lg-brand-nav-more {
color: #1f3628;
font-weight: 800;
}
.lg-brand-nav-more i {
margin-left: 4px;
color: var(--lg-green);
font-size: 8px;
}
/* ============================================================
MOBILE MENU BUTTON
============================================================ */
.lg-mobile-menu-btn {
width: 37px;
height: 37px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
border: 1px solid var(--lg-border);
border-radius: 9px;
background: #ffffff;
color: var(--lg-green);
font-size: 18px;
}
/* ============================================================
MOBILE SEARCH
============================================================ */
.lg-mobile-search {
display: none;
padding-bottom: 12px;
}
.lg-mobile-search-box {
height: 43px;
display: flex;
align-items: center;
gap: 8px;
padding-left: 12px;
overflow: hidden;
border: 1px solid var(--lg-border);
border-radius: 12px;
background: #f7f9f8;
}
.lg-mobile-search-box > i {
color: #819087;
}
.lg-mobile-search-box input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 12px;
}
.lg-mobile-search-box button {
width: 43px;
height: 43px;
flex-shrink: 0;
border: none;
background: var(--lg-green);
color: #ffffff;
}
/* ============================================================
MOBILE NAV
============================================================ */
.lg-mobile-nav {
background: #ffffff;
border-top: 1px solid var(--lg-border);
border-bottom: 1px solid var(--lg-border);
}
.lg-mobile-nav-item {
display: block;
padding: 11px 4px;
border-bottom: 1px solid #f0f3f1;
color: #34473b;
font-size: 12px;
font-weight: 600;
text-decoration: none !important;
}
.lg-mobile-nav-item:hover {
color: var(--lg-green);
text-decoration: none !important;
}
/* ============================================================
RESPONSIVE - LARGE LAPTOP
============================================================ */
@media (max-width: 1199px) {
.lg-navbar {
gap: 13px;
}
.lg-brand-copy {
display: none !important;
}
.lg-search-wrap {
flex: 1 1 450px;
min-width: 250px;
max-width: none;
}
.lg-category-button {
min-width: 120px;
padding-left: 11px;
padding-right: 11px;
font-size: 10px;
}
.lg-search-shortcut {
display: none;
}
.lg-header-actions {
gap: 8px;
}
.lg-brand-nav-scroll {
gap: 21px;
}
}
/* ============================================================
RESPONSIVE - TABLET
============================================================ */
@media (max-width: 991px) {
.lg-topbar-left span:nth-child(3),
.lg-topbar-left span:nth-child(4),
.lg-topbar-left span:nth-child(5) {
display: none;
}
.lg-user-info,
.lg-account-chevron {
display: none !important;
}
.lg-search-wrap {
min-width: 220px;
}
.lg-category-button {
min-width: 105px;
font-size: 9px;
}
.lg-search-icon {
width: 34px;
}
.lg-header-actions {
gap: 5px;
}
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 767px) {
.lg-topbar {
display: none;
}
.lg-navbar {
min-height: 61px;
gap: 8px;
}
.lg-brand {
margin-right: auto;
}
.lg-brand-logo {
width: 36px;
height: 36px;
}
.lg-header-actions {
gap: 2px;
}
.lg-action-divider {
display: none !important;
}
.lg-action-button {
width: 36px;
height: 36px;
font-size: 17px;
}
.lg-user-avatar {
width: 34px;
height: 34px;
}
/* ============================================================
LALIGURANS CART PILL - FINAL OVERRIDE
Styles the EXISTING _cart.blade.php structure
============================================================ */
.lg-header #cart_items {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
}
/* ------------------------------------------------------------
The cart partial normally has a dropdown wrapper.
THIS becomes the green pill.
------------------------------------------------------------- */
.lg-header #cart_items > .dropdown,
.lg-header #cart_items .dropdown.cart-dropdown,
.lg-header .lg-cart-wrapper > .dropdown {
position: relative !important;
min-width: 118px !important;
height: 42px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 11px !important;
border: 0 !important;
border-radius: 999px !important;
background: #076437 !important;
color: #ffffff !important;
box-shadow:
0 5px 14px rgba(7, 100, 55, 0.16) !important;
white-space: nowrap !important;
transition:
background-color .2s ease,
box-shadow .2s ease,
transform .2s ease !important;
}
.lg-header #cart_items > .dropdown:hover,
.lg-header .lg-cart-wrapper > .dropdown:hover {
background: #05552f !important;
transform: translateY(-1px);
box-shadow:
0 7px 18px rgba(7, 100, 55, .22) !important;
}
/* ============================================================
REMOVE OLD CIRCULAR CART BACKGROUND
============================================================ */
.lg-header #cart_items .navbar-tool,
.lg-header #cart_items .navbar-tool-icon-box,
.lg-header #cart_items .bg-secondary {
width: auto !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #ffffff !important;
}
/* ============================================================
CLICKABLE CART ELEMENTS
============================================================ */
.lg-header #cart_items .dropdown > a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: #ffffff !important;
text-decoration: none !important;
box-shadow: none !important;
}
.lg-header #cart_items .dropdown > a:hover {
color: #ffffff !important;
background: transparent !important;
text-decoration: none !important;
}
/* ============================================================
CART ICON
============================================================ */
.lg-header #cart_items .navbar-tool-icon-box {
width: 27px !important;
min-width: 27px !important;
height: 27px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.lg-header #cart_items .navbar-tool-icon,
.lg-header #cart_items .czi-cart {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
color: #ffffff !important;
font-size: 18px !important;
line-height: 1 !important;
}
/* ============================================================
PRICE TEXT
============================================================ */
.lg-header #cart_items .navbar-tool-text {
display: flex !important;
align-items: center !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/*
Original cart commonly contains:
My cart
AUD $9.50
We only want the price.
*/
.lg-header #cart_items .navbar-tool-text small {
display: none !important;
}
/* Force nested price elements white */
.lg-header #cart_items .navbar-tool-text span,
.lg-header #cart_items .navbar-tool-text strong,
.lg-header #cart_items .navbar-tool-text b {
color: #ffffff !important;
font-weight: 800 !important;
}
/* ============================================================
CART COUNT
Desired:
AUD $9.50 1
============================================================ */
.lg-header #cart_items .navbar-tool-label {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
width: 19px !important;
min-width: 19px !important;
height: 19px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 0 0 5px !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
background: #ffffff !important;
color: #076437 !important;
font-size: 8px !important;
font-weight: 800 !important;
line-height: 19px !important;
box-shadow: none !important;
}
.lg-header #cart_items .navbar-tool-label span {
color: #076437 !important;
font-size: 8px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* ============================================================
BOOTSTRAP DROPDOWN ARROW
The target design does not need Bootstrap's default arrow.
============================================================ */
.lg-header #cart_items .dropdown-toggle::after {
display: none !important;
}
/* ============================================================
MINI CART DROPDOWN MENU
Keep functionality unchanged.
============================================================ */
.lg-header #cart_items .dropdown-menu {
top: calc(100% + 10px) !important;
border: 1px solid #e2eae5 !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow:
0 18px 45px rgba(25, 52, 35, .14) !important;
}
/* ============================================================
DESKTOP / LAPTOP
============================================================ */
@media (max-width: 1199px) {
.lg-header #cart_items > .dropdown,
.lg-header .lg-cart-wrapper > .dropdown {
min-width: 108px !important;
height: 40px !important;
padding: 0 9px !important;
}
.lg-header #cart_items .navbar-tool-text {
font-size: 10px !important;
}
}
/* ============================================================
TABLET
============================================================ */
@media (max-width: 991px) {
.lg-header #cart_items > .dropdown,
.lg-header .lg-cart-wrapper > .dropdown {
min-width: 100px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
.lg-header #cart_items .navbar-tool-icon,
.lg-header #cart_items .czi-cart {
font-size: 17px !important;
}
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 767px) {
/*
Mobile becomes an icon because the full price pill
would consume too much navbar space.
*/
.lg-header #cart_items > .dropdown,
.lg-header .lg-cart-wrapper > .dropdown {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 !important;
border-radius: 50% !important;
}
.lg-header #cart_items .navbar-tool-text {
display: none !important;
}
.lg-header #cart_items .navbar-tool-icon-box {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
}
.lg-header #cart_items .navbar-tool-label {
position: absolute !important;
top: -5px !important;
right: -5px !important;
width: 18px !important;
min-width: 18px !important;
height: 18px !important;
margin: 0 !important;
border: 2px solid #ffffff !important;
background: #d80e16 !important;
color: #ffffff !important;
}
.lg-header #cart_items .navbar-tool-label span {
color: #ffffff !important;
}
}
.lg-brand-nav-scroll {
min-height: 39px;
gap: 20px;
}
.lg-brand-nav-link {
line-height: 39px;
font-size: 10px;
}
}
/* ============================================================
VERY SMALL DEVICES
============================================================ */
@media (max-width: 430px) {
.lg-navbar {
gap: 5px;
}
.lg-brand-logo {
width: 33px;
height: 33px;
}
.lg-action-button {
width: 33px;
height: 33px;
}
.lg-user-avatar {
width: 32px;
height: 32px;
}
}
/* =========================================================
FINAL LALIGURANS GREEN CART PILL - MATCH REFERENCE
========================================================= */
.lg-header .lg-cart-container {
display: flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
min-width: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.lg-header .lg-cart-pill {
min-width: 110px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 0 10px !important;
border: 0 !important;
border-radius: 999px !important;
background: #076437 !important;
color: #ffffff !important;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(7, 100, 55, .18) !important;
transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}
.lg-header .lg-cart-pill:hover {
background: #05552f !important;
color: #ffffff !important;
text-decoration: none !important;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(7, 100, 55, .23) !important;
}
.lg-header .lg-cart-pill.dropdown-toggle::after {
display: none !important;
}
.lg-header .lg-cart-icon-wrap {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lg-header .lg-cart-icon-wrap .navbar-tool-icon {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1 !important;
}
.lg-header .lg-cart-price {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
color: #ffffff !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.lg-header .lg-cart-code {
color: #ffffff !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.lg-header .lg-cart-amount {
color: #ffffff !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.lg-header .lg-cart-count {
position: static !important;
width: 18px !important;
min-width: 18px !important;
height: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 0 0 2px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: #ffffff !important;
color: #076437 !important;
font-size: 8px !important;
font-weight: 800 !important;
line-height: 18px !important;
box-shadow: none !important;
}
.lg-header .lg-cart-container .cart-dropdown {
margin-top: 10px !important;
border: 1px solid #e1e9e4 !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: 0 18px 45px rgba(24, 54, 36, .14) !important;
}
@media (max-width: 1199px) {
.lg-header .lg-cart-pill {
min-width: 106px !important;
height: 40px !important;
padding: 0 9px !important;
}
.lg-header .lg-cart-price,
.lg-header .lg-cart-code,
.lg-header .lg-cart-amount {
font-size: 10px !important;
}
}
@media (max-width: 767px) {
.lg-header .lg-cart-pill {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 !important;
border-radius: 50% !important;
}
.lg-header .lg-cart-price {
display: none !important;
}
.lg-header .lg-cart-count {
position: absolute !important;
top: -5px !important;
right: -5px !important;
width: 18px !important;
min-width: 18px !important;
height: 18px !important;
border: 2px solid #ffffff !important;
background: #d90f16 !important;
color: #ffffff !important;
}
}
/* =========================================================
LALIGURANS BRAND / LOGO - FINAL
========================================================= */
.lg-header .lg-brand {
display: flex !important;
align-items: center !important;
/* almost no artificial space between logo + words */
gap: 0 !important;
margin: 0 18px 0 0 !important;
padding: 0 !important;
flex: 0 0 auto !important;
text-decoration: none !important;
}
/*
|--------------------------------------------------------------------------
| Logo container
|--------------------------------------------------------------------------
|
| Keep the box compact. The original image itself appears to contain
| transparent whitespace, which is why a 78px container created a large
| visual gap.
|
*/
.lg-header .lg-brand-logo {
width: 58px !important;
min-width: 58px !important;
height: 52px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-shrink: 0 !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
}
/*
|--------------------------------------------------------------------------
| Actual logo image
|--------------------------------------------------------------------------
|
| Pull the artwork left so the visible part aligns approximately with
| the "All Brands" text below.
|
*/
.lg-header .lg-brand-logo img {
display: block !important;
width: 58px !important;
height: 52px !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
margin-left: -11px !important;
margin-right: 0 !important;
padding: 0 !important;
transform: scale(1.28) !important;
transform-origin: center left !important;
}
/* =========================================================
COMPANY NAME + TAGLINE
========================================================= */
.lg-header .lg-brand-copy {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
/* pulls words closer to logo */
margin-left: -6px !important;
padding: 0 !important;
line-height: 1 !important;
}
.lg-header .lg-brand-copy strong {
margin: 0 !important;
padding: 0 !important;
color: #076437 !important;
font-size: 17px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.1px !important;
white-space: nowrap !important;
}
.lg-header .lg-brand-copy small {
margin: 3px 0 0 0 !important;
padding: 0 !important;
color: #a76a16 !important;
font-size: 8px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0.25px !important;
white-space: nowrap !important;
}
/* =========================================================
BRAND LIST BELOW HEADER
========================================================= */
.lg-header .lg-brand-nav-scroll {
min-height: 44px !important;
display: flex !important;
align-items: center !important;
gap: 27px !important;
}
.lg-header .lg-brand-nav-link {
font-size: 12px !important;
font-weight: 600 !important;
line-height: 44px !important;
}
.lg-header .lg-brand-nav-all,
.lg-header .lg-brand-nav-more {
font-size: 12px !important;
font-weight: 800 !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
/* Laptop */
@media (max-width: 1199px) {
.lg-header .lg-brand {
margin-right: 13px !important;
}
.lg-header .lg-brand-logo {
width: 52px !important;
min-width: 52px !important;
height: 47px !important;
}
.lg-header .lg-brand-logo img {
width: 52px !important;
height: 47px !important;
margin-left: -9px !important;
transform: scale(1.24) !important;
}
/*
* Do NOT hide the text here.
* Your old CSS had:
*
* .lg-brand-copy {
* display: none !important;
* }
*
* Remove that old rule.
*/
.lg-header .lg-brand-copy {
display: flex !important;
margin-left: -5px !important;
}
.lg-header .lg-brand-copy strong {
font-size: 15px !important;
}
.lg-header .lg-brand-copy small {
font-size: 7px !important;
}
.lg-header .lg-brand-nav-link,
.lg-header .lg-brand-nav-all,
.lg-header .lg-brand-nav-more {
font-size: 11px !important;
}
.lg-header .lg-navbar .lg-brand {
transform: translateX(-12px) !important;
}
}
/* Tablet */
@media (max-width: 991px) {
.lg-header .lg-brand {
margin-right: 9px !important;
}
.lg-header .lg-brand-logo {
width: 47px !important;
min-width: 47px !important;
height: 43px !important;
}
.lg-header .lg-brand-logo img {
width: 47px !important;
height: 43px !important;
margin-left: -8px !important;
transform: scale(1.2) !important;
}
/*
* There is less horizontal room here, so hide only the tagline.
*/
.lg-header .lg-brand-copy {
display: flex !important;
margin-left: -4px !important;
}
.lg-header .lg-brand-copy strong {
font-size: 14px !important;
}
.lg-header .lg-brand-copy small {
display: none !important;
}
.lg-header .lg-brand-nav-link,
.lg-header .lg-brand-nav-all,
.lg-header .lg-brand-nav-more {
font-size: 11px !important;
}
.lg-header .lg-navbar .lg-brand {
transform: translateX(-7px) !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.lg-header .lg-brand {
margin: 0 auto 0 0 !important;
}
.lg-header .lg-brand-logo {
width: 44px !important;
min-width: 44px !important;
height: 40px !important;
}
.lg-header .lg-brand-logo img {
width: 44px !important;
height: 40px !important;
margin-left: -6px !important;
transform: scale(1.15) !important;
}
/* mobile: logo only */
.lg-header .lg-brand-copy {
display: none !important;
}
.lg-header .lg-brand-nav-scroll {
min-height: 40px !important;
gap: 20px !important;
}
.lg-header .lg-brand-nav-link,
.lg-header .lg-brand-nav-all,
.lg-header .lg-brand-nav-more {
font-size: 10.5px !important;
line-height: 40px !important;
}
.lg-header .lg-navbar .lg-brand {
transform: translateX(0) !important;
}
}
.lg-header .lg-navbar .lg-brand {
transform: translateX(-16px) !important;
}
/* =========================================================
ACTIVE BRAND IN NAVBAR
========================================================= */
.lg-header .lg-brand-nav-link {
position: relative;
padding: 0 2px;
color: #495950;
transition:
color .2s ease,
background-color .2s ease;
}
/* active brand */
.lg-header .lg-brand-nav-link.active {
color: #076437 !important;
font-weight: 800 !important;
}
/* green underline */
.lg-header .lg-brand-nav-link.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
border-radius: 3px 3px 0 0;
background: #076437;
opacity: 1 !important;
transform: scaleX(1) !important;
}
/* Hover */
.lg-header .lg-brand-nav-link:hover {
color: #076437 !important;
}
/* THIS IS FOR THE BRAND PAGE . */
.laligurans-brand-page {
--brand-green: #075b35;
--brand-green-dark: #044a2a;
--brand-green-soft: #ecf8f1;
--brand-border: #dce8e1;
--brand-text: #101a15;
--brand-muted: #6e7c75;
--brand-gold: #d9a332;
padding-bottom: 60px;
}
/* =========================================================
HERO
========================================================= */
.brand-hero {
position: relative;
overflow: hidden;
margin-top: 28px;
padding: 48px 24px 42px;
border: 1px solid #deeee5;
border-radius: 22px;
background:
radial-gradient(
circle at 10% 0%,
rgba(38, 157, 94, .09),
transparent 30%
),
linear-gradient(
135deg,
#f5fbf7 0%,
#ffffff 52%,
#f2faf5 100%
);
text-align: center;
}
.brand-hero::before {
content: "";
position: absolute;
width: 220px;
height: 220px;
left: -120px;
top: -95px;
border-radius: 50%;
background: rgba(13, 107, 56, .055);
}
.brand-hero::after {
content: "";
position: absolute;
width: 230px;
height: 230px;
right: -55px;
top: 15px;
border-radius: 50%;
border: 3px dashed rgba(13, 107, 56, .055);
}
.brand-hero-content {
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 auto;
}
.brand-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
margin-bottom: 15px;
border: 1px solid #b8ddc8;
border-radius: 999px;
background: rgba(255, 255, 255, .9);
color: var(--brand-green);
font-size: 11px;
line-height: 1;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
}
.brand-eyebrow-dot {
width: 6px;
height: 6px;
flex-shrink: 0;
border-radius: 50%;
background: #68bc8d;
}
.brand-hero-title {
max-width: 590px;
margin: 0 auto;
color: var(--brand-text);
font-size: clamp(30px, 3.2vw, 43px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -.035em;
}
.brand-hero-title span {
display: block;
color: var(--brand-green);
}
.brand-title-accent {
width: 220px;
height: 2px;
margin: 3px auto 12px;
border-radius: 10px;
background: var(--brand-gold);
}
.brand-hero-description {
max-width: 650px;
margin: 0 auto;
color: #52645b;
font-size: 15px;
line-height: 1.65;
}
/* =========================================================
SEARCH
========================================================= */
.brand-search-form {
max-width: 620px;
margin: 26px auto 0;
}
.brand-search-box {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 7px 6px 18px;
border: 1px solid #bce0cb;
border-radius: 999px;
background: #fff;
box-shadow: 0 10px 28px rgba(7, 91, 53, .08);
transition:
border-color .2s ease,
box-shadow .2s ease,
transform .2s ease;
}
.brand-search-box:focus-within {
border-color: #68b78a;
box-shadow:
0 0 0 3px rgba(7, 91, 53, .06),
0 12px 30px rgba(7, 91, 53, .10);
}
.brand-search-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--brand-green);
font-size: 17px;
}
.brand-search-input {
width: 100%;
height: 42px;
padding: 0 6px;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #26352d;
font-size: 14px;
}
.brand-search-input::placeholder {
color: #98a29d;
}
.brand-search-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-width: 110px;
height: 43px;
padding: 0 22px;
border: 0;
border-radius: 999px;
background: var(--brand-green);
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition:
background .2s ease,
transform .2s ease,
box-shadow .2s ease;
}
.brand-search-button:hover {
background: var(--brand-green-dark);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(7, 91, 53, .18);
}
.popular-searches {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 7px;
margin-top: 12px;
color: #8b9891;
font-size: 11px;
}
.popular-searches > span {
color: #9ca8a2;
}
.popular-searches a {
position: relative;
color: #66756d;
text-decoration: none;
transition: color .2s ease;
}
.popular-searches a:hover {
color: var(--brand-green);
}
/* =========================================================
SECTION HEADER
========================================================= */
.brand-section {
margin-top: 38px;
}
.brand-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
padding-bottom: 15px;
margin-bottom: 22px;
border-bottom: 1px solid #edf1ef;
}
.brand-section-title {
margin: 0;
color: #0e1813;
font-size: 23px;
line-height: 1.2;
font-weight: 800;
letter-spacing: -.02em;
}
.brand-section-description {
margin: 5px 0 0;
color: var(--brand-muted);
font-size: 13px;
}
.brand-filter-pills {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.brand-filter-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
padding: 0 15px;
border: 1px solid #e1e7e3;
border-radius: 999px;
background: #fff;
color: #506058;
font-size: 11px;
font-weight: 600;
text-decoration: none;
transition: all .2s ease;
}
.brand-filter-pill:hover {
border-color: #b8d9c5;
color: var(--brand-green);
}
.brand-filter-pill.active {
border-color: var(--brand-green);
background: var(--brand-green);
color: #fff;
}
/* =========================================================
BRAND GRID
========================================================= */
/* =========================================================
BRAND GRID - LARGER CARDS
========================================================= */
.brand-modern-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 22px;
}
.brand-modern-card {
position: relative;
display: flex;
min-height: 235px;
flex-direction: column;
padding: 22px 18px 16px;
overflow: hidden;
border: 1px solid var(--brand-border);
border-radius: 16px;
background: #fff;
color: inherit;
text-decoration: none !important;
box-shadow: 0 3px 8px rgba(18, 53, 35, .035);
transition:
transform .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
.brand-modern-card:hover {
color: inherit;
border-color: #59ad7e;
transform: translateY(-5px);
box-shadow:
0 16px 32px rgba(17, 76, 47, .10);
}
/* =========================================================
LOGO
========================================================= */
.brand-logo-area {
display: flex;
height: 92px;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.brand-logo-box {
display: flex;
width: 92px;
height: 64px;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 10px;
background: #f5faf7;
transition:
transform .25s ease,
background .25s ease;
}
.brand-logo-box img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.brand-modern-card:hover .brand-logo-box {
transform: scale(1.07);
}
/* =========================================================
CARD CONTENT
========================================================= */
.brand-card-divider {
height: 1px;
margin-bottom: 13px;
background: #edf1ef;
}
.brand-card-name {
margin: 0 0 7px;
overflow: hidden;
color: #111b16;
font-size: 16px;
line-height: 1.35;
font-weight: 750;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
transition: color .2s ease;
}
.brand-modern-card:hover .brand-card-name {
color: var(--brand-green);
}
.brand-card-description {
min-height: 20px;
margin: 0 0 13px;
overflow: hidden;
color: #86928c;
font-size: 11px;
line-height: 1.5;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================================================
BOTTOM PRODUCT BUTTON
========================================================= */
.brand-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 32px;
margin-top: auto;
padding: 7px 12px;
border-radius: 999px;
background: #f0f8f3;
color: var(--brand-green);
font-size: 11px;
font-weight: 700;
transition:
background .2s ease,
color .2s ease;
}
.brand-modern-card:hover .brand-card-footer {
background: var(--brand-green);
color: #fff;
}
.brand-card-arrow {
font-size: 17px;
line-height: 1;
transition: transform .2s ease;
}
.brand-modern-card:hover .brand-card-arrow {
transform: translateX(4px);
}
/* =========================================================
EMPTY STATE
========================================================= */
.brand-empty-state {
display: flex;
min-height: 300px;
align-items: center;
justify-content: center;
padding: 45px 20px;
border: 1px dashed #dbe7e0;
border-radius: 18px;
background: #fafdfb;
text-align: center;
}
.brand-empty-inner {
max-width: 360px;
}
.brand-empty-inner img {
width: 95px;
margin-bottom: 18px;
}
.brand-empty-inner h5 {
margin-bottom: 6px;
color: #314238;
font-size: 16px;
font-weight: 700;
}
.brand-empty-inner p {
margin: 0;
color: #7f8d85;
font-size: 13px;
}
/* =========================================================
PAGINATION
========================================================= */
.brand-pagination {
display: flex;
justify-content: center;
margin-top: 34px;
}
.brand-pagination .pagination {
gap: 5px;
margin-bottom: 0;
}
.brand-pagination .page-link {
display: flex;
min-width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border: 1px solid #e0e8e3;
border-radius: 9px !important;
background: #fff;
color: #53635a;
font-size: 12px;
box-shadow: none;
}
.brand-pagination .page-item.active .page-link {
border-color: var(--brand-green);
background: var(--brand-green);
color: #fff;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
.brand-modern-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 991px) {
.brand-modern-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.brand-modern-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.brand-modern-card {
min-height: 205px;
padding: 18px 14px 14px;
}
.brand-logo-area {
height: 78px;
}
.brand-logo-box {
width: 78px;
height: 56px;
}
.brand-card-name {
font-size: 14px;
}
}
@media (max-width: 480px) {
.brand-modern-card {
min-height: 185px;
}
.brand-logo-box {
width: 72px;
height: 52px;
}
.brand-card-description {
display: none;
}
}
/* ================================================================
CUSTOM SORT / FILTER DROPDOWNS
================================================================ */
.lg-custom-dropdown {
position: relative;
width: 230px;
flex-shrink: 0;
font-family: inherit;
}
/* ================================================================
HIDE ORIGINAL SELECT VISUALLY
IMPORTANT:
It remains in DOM for existing application functionality.
================================================================ */
.lg-native-select {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ================================================================
TRIGGER
================================================================ */
.lg-dropdown-trigger {
display: flex;
width: 100%;
height: 52px;
align-items: center;
gap: 10px;
padding: 6px 12px;
border: 1px solid #dce6e0;
border-radius: 13px;
background: #ffffff;
color: #17221b;
cursor: pointer;
text-align: left;
box-shadow:
0 2px 5px rgba(16, 50, 32, .025);
transition:
border-color .2s ease,
box-shadow .2s ease,
background .2s ease;
}
.lg-dropdown-trigger:hover {
border-color: #a7d2b9;
background: #fcfefd;
}
/* Open state */
.lg-custom-dropdown.open
.lg-dropdown-trigger {
border-color: #16804b;
box-shadow:
0 0 0 3px rgba(7, 100, 55, .07),
0 6px 18px rgba(7, 100, 55, .06);
}
/* ================================================================
ICON BOX
================================================================ */
.lg-dropdown-icon-box {
display: flex;
width: 34px;
height: 34px;
flex: 0 0 34px;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #eff9f3;
color: #16804b;
}
.lg-dropdown-icon-box svg {
width: 19px;
height: 19px;
}
/* ================================================================
DIVIDER
================================================================ */
.lg-dropdown-divider {
width: 1px;
height: 25px;
flex-shrink: 0;
background: #dfe6e2;
}
/* ================================================================
LABEL + CURRENT VALUE
================================================================ */
.lg-dropdown-copy {
display: flex;
flex: 1;
min-width: 0;
align-items: center;
gap: 8px;
}
.lg-dropdown-label {
flex-shrink: 0;
color: #59665f;
font-size: 13px;
line-height: 1;
font-weight: 600;
white-space: nowrap;
}
.lg-dropdown-current {
overflow: hidden;
color: #111c16;
font-size: 14px;
line-height: 1;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================================================================
CHEVRON
================================================================ */
.lg-dropdown-chevron {
display: flex;
width: 22px;
height: 22px;
flex: 0 0 22px;
align-items: center;
justify-content: center;
color: #24332a;
transition: transform .22s ease;
}
.lg-dropdown-chevron svg {
width: 17px;
height: 17px;
}
.lg-custom-dropdown.open
.lg-dropdown-chevron {
transform: rotate(180deg);
}
/* ================================================================
DROPDOWN MENU
================================================================ */
.lg-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 9999;
display: none;
min-width: 100%;
padding: 9px;
border: 1px solid #e1e9e4;
border-radius: 16px;
background: rgba(255, 255, 255, .98);
box-shadow:
0 20px 45px rgba(16, 50, 32, .14),
0 4px 12px rgba(16, 50, 32, .06);
backdrop-filter: blur(10px);
transform-origin: top;
animation: lgDropdownOpen .17s ease;
}
/* Sort menu can be wider because labels are longer */
.lg-sort-menu {
width: 300px;
}
/* Filter options are shorter */
.lg-filter-menu {
width: 250px;
}
.lg-custom-dropdown.open
.lg-dropdown-menu {
display: block;
}
@keyframes lgDropdownOpen {
from {
opacity: 0;
transform:
translateY(-5px)
scale(.985);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
/* ================================================================
OPTION
================================================================ */
.lg-dropdown-option {
display: flex;
width: 100%;
min-height: 48px;
align-items: center;
gap: 12px;
padding: 8px 11px;
border: 0;
border-radius: 11px;
background: transparent;
color: #233229;
text-align: left;
cursor: pointer;
transition:
background .16s ease,
color .16s ease,
transform .16s ease;
}
.lg-dropdown-option:hover {
background: #f3f8f5;
color: #076437;
}
/* Selected option */
.lg-dropdown-option.active {
background:
linear-gradient(
90deg,
#e8f7ee 0%,
#f0faf4 100%
);
color: #076437;
}
.lg-dropdown-option.active
.lg-option-label {
font-weight: 750;
}
/* ================================================================
OPTION ICON
================================================================ */
.lg-option-icon {
display: flex;
width: 32px;
height: 32px;
flex: 0 0 32px;
align-items: center;
justify-content: center;
color: #69766f;
}
.lg-option-icon svg {
width: 21px;
height: 21px;
}
.lg-dropdown-option:hover
.lg-option-icon,
.lg-dropdown-option.active
.lg-option-icon {
color: #14804b;
}
/* Alphabetical text icon */
.lg-option-text-icon {
font-size: 15px;
font-weight: 800;
letter-spacing: -.04em;
}
/* ================================================================
OPTION LABEL
================================================================ */
.lg-option-label {
flex: 1;
color: inherit;
font-size: 14px;
line-height: 1.3;
font-weight: 500;
}
/* ================================================================
SELECTED CHECKMARK
================================================================ */
.lg-option-check {
display: flex;
width: 20px;
height: 20px;
flex: 0 0 20px;
align-items: center;
justify-content: center;
color: #16804b;
opacity: 0;
}
.lg-option-check svg {
width: 18px;
height: 18px;
}
.lg-dropdown-option.active
.lg-option-check {
opacity: 1;
}
/* ================================================================
GROUP SEPARATOR
================================================================ */
.lg-dropdown-separator {
height: 1px;
margin: 6px 9px;
background: #edf1ef;
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 1199px) {
.lg-custom-dropdown {
width: 200px;
}
.lg-sort-menu {
width: 285px;
}
.lg-dropdown-current {
font-size: 13px;
}
.lg-dropdown-label {
font-size: 12px;
}
}
/*version 16.1*/
/* ================================================================
LALIGURANS PRODUCT LIST HEADER
---------------------------------------------------------------
Includes:
- Brand information area
- Product count
- Product search
- Custom Sort dropdown
- Custom Filter dropdown
- Responsive behaviour
Primary brand colour: #076437
================================================================ */
/* ================================================================
ROOT HEADER
================================================================ */
.lg-product-list-header {
--plh-green: #076437;
--plh-green-dark: #054d2b;
--plh-green-light: #16804b;
--plh-green-soft: #eaf8f0;
--plh-green-border: #b8dfc8;
--plh-text: #101914;
--plh-muted: #607068;
--plh-border: #e1e9e4;
--plh-background: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
width: 100%;
min-height: 108px;
padding: 20px 22px;
border: 1px solid var(--plh-border);
border-radius: 16px;
background: var(--plh-background);
box-shadow:
0 3px 10px rgba(17, 54, 34, 0.035);
position: relative;
overflow: visible;
}
/* ================================================================
LEFT SECTION
================================================================ */
.lg-plh-left {
flex: 1 1 auto;
min-width: 0;
}
/* ================================================================
BRAND INFORMATION BLOCK
================================================================ */
.lg-plh-brand-block {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
/* ================================================================
BRAND LOGO / FALLBACK BOX
================================================================ */
.lg-plh-brand-mark {
display: flex;
flex: 0 0 54px;
width: 54px;
height: 54px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
overflow: hidden;
padding: 6px;
border: 1.5px solid var(--plh-green);
border-radius: 10px;
background: #ffffff;
color: var(--plh-green);
box-shadow:
0 3px 8px rgba(7, 100, 55, 0.11);
}
/* Actual logo */
.lg-plh-brand-logo {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Fallback icon */
.lg-plh-brand-mark-icon {
font-size: 12px;
line-height: 1;
transform: scaleX(1.25);
}
/* Fallback text */
.lg-plh-brand-mark-text {
max-width: 45px;
overflow: hidden;
margin-top: 2px;
color: var(--plh-green);
font-size: 6px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.03em;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================================================================
TITLE CONTENT
================================================================ */
.lg-plh-title-content {
min-width: 0;
}
/* ================================================================
EYEBROW ROW
================================================================ */
.lg-plh-eyebrow-row {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 4px;
min-width: 0;
}
/* Eyebrow badge */
.lg-plh-eyebrow {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
min-height: 20px;
padding: 4px 9px;
border: 1px solid var(--plh-green-border);
border-radius: 999px;
background: var(--plh-green-soft);
color: var(--plh-green);
font-size: 9px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.lg-plh-eyebrow-dot {
width: 4px;
height: 4px;
flex-shrink: 0;
border-radius: 50%;
background: #48bb7a;
}
/* Small text beside eyebrow */
.lg-plh-small-meta {
overflow: hidden;
color: #53635a;
font-size: 10px;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================================================================
PRODUCT TITLE
================================================================ */
.lg-plh-title-row {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.lg-plh-title {
margin: 0;
overflow: hidden;
color: var(--plh-text);
font-size: 29px;
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.04em;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================================================================
PRODUCT COUNT
================================================================ */
.lg-plh-count-badge {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 21px;
padding: 4px 8px;
border-radius: 6px;
background: #edf4ff;
color: #315e96;
font-size: 10px;
line-height: 1;
font-weight: 800;
}
.lg-plh-count-badge span {
font-weight: 600;
}
/* ================================================================
DESCRIPTION
================================================================ */
.lg-plh-meta {
max-width: 520px;
margin-top: 5px;
overflow: hidden;
color: var(--plh-muted);
font-size: 10px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================================================================
RIGHT ACTION AREA
================================================================ */
.lg-plh-actions {
display: flex;
flex: 0 1 auto;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-width: 0;
overflow: visible;
}
/* ================================================================
SEARCH
================================================================ */
.lg-plh-search {
position: relative;
display: flex;
align-items: center;
width: clamp(290px, 25vw, 380px);
height: 48px;
overflow: hidden;
border: 1px solid #dfe8e2;
border-radius: 999px;
background: #f8faf9;
transition:
border-color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}
.lg-plh-search:hover {
border-color: #bfd1c6;
}
.lg-plh-search:focus-within {
border-color: #62ae82;
background: #ffffff;
box-shadow:
0 0 0 3px rgba(7, 100, 55, 0.07);
}
/* Search icon */
.lg-plh-search-icon {
position: absolute;
left: 16px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
color: #74857b;
font-size: 15px;
pointer-events: none;
}
/* Search input */
.lg-product-list-header
.lg-plh-search-input.search-page-button-input {
width: 100%;
height: 100%;
padding:
0
48px
0
42px !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
color: #26372e;
font-size: 14px;
font-weight: 500;
box-shadow: none !important;
}
.lg-plh-search-input::placeholder {
color: #829088;
font-size: 13px;
}
/* Browser clear X */
.lg-plh-search-input::-webkit-search-cancel-button {
cursor: pointer;
opacity: 0.65;
transform: scale(1.15);
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.lg-plh-search-input::-webkit-search-cancel-button:hover {
opacity: 1;
transform: scale(1.28);
}
/* Existing search button */
.lg-plh-search-button {
position: absolute;
right: 6px;
top: 50%;
z-index: 3;
display: flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--plh-green);
color: #ffffff;
font-size: 12px;
cursor: pointer;
opacity: 0;
transform: translateY(-50%);
transition:
opacity 0.2s ease,
background 0.2s ease;
}
.lg-plh-search:focus-within
.lg-plh-search-button {
opacity: 1;
}
.lg-plh-search-button:hover {
background: var(--plh-green-dark);
}
/* ================================================================
CUSTOM DROPDOWN WRAPPER
================================================================ */
.lg-custom-dropdown {
position: relative;
width: 230px;
flex-shrink: 0;
font-family: inherit;
overflow: visible;
}
/* ================================================================
NATIVE SELECT
---------------------------------------------------------------
Hidden visually, but preserved so the existing project logic
continues to work through .product-list-filter-input
================================================================ */
.lg-native-select {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ================================================================
CUSTOM DROPDOWN TRIGGER
================================================================ */
.lg-dropdown-trigger {
display: flex;
width: 100%;
height: 52px;
align-items: center;
gap: 10px;
padding: 6px 12px;
border: 1px solid #dce6e0;
border-radius: 13px;
background: #ffffff;
color: #17221b;
cursor: pointer;
text-align: left;
box-shadow:
0 2px 5px rgba(16, 50, 32, 0.025);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease,
transform 0.2s ease;
}
.lg-dropdown-trigger:hover {
border-color: #9fceb3;
background: #fcfefd;
}
/* Open state */
.lg-custom-dropdown.open
.lg-dropdown-trigger {
border-color: #16804b;
background: #ffffff;
box-shadow:
0 0 0 3px rgba(7, 100, 55, 0.07),
0 6px 18px rgba(7, 100, 55, 0.06);
}
/* ================================================================
TRIGGER ICON BOX
================================================================ */
.lg-dropdown-icon-box {
display: flex;
width: 34px;
height: 34px;
flex: 0 0 34px;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #eff9f3;
color: var(--plh-green-light);
}
.lg-dropdown-icon-box svg {
width: 19px;
height: 19px;
}
/* ================================================================
DIVIDER
================================================================ */
.lg-dropdown-divider {
width: 1px;
height: 25px;
flex-shrink: 0;
background: #dfe6e2;
}
/* ================================================================
LABEL + CURRENT VALUE
================================================================ */
.lg-dropdown-copy {
display: flex;
flex: 1;
min-width: 0;
align-items: center;
gap: 8px;
}
.lg-dropdown-label {
flex-shrink: 0;
color: #59665f;
font-size: 13px;
line-height: 1;
font-weight: 600;
white-space: nowrap;
}
.lg-dropdown-current {
overflow: hidden;
color: #111c16;
font-size: 14px;
line-height: 1;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ================================================================
CHEVRON
================================================================ */
.lg-dropdown-chevron {
display: flex;
width: 22px;
height: 22px;
flex: 0 0 22px;
align-items: center;
justify-content: center;
color: #24332a;
transition:
transform 0.22s ease;
}
.lg-dropdown-chevron svg {
width: 17px;
height: 17px;
}
.lg-custom-dropdown.open
.lg-dropdown-chevron {
transform: rotate(180deg);
}
/* ================================================================
DROPDOWN MENU
================================================================ */
.lg-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 99999;
display: none;
min-width: 100%;
padding: 9px;
border: 1px solid #e1e9e4;
border-radius: 16px;
background: rgba(255, 255, 255, 0.985);
box-shadow:
0 20px 45px rgba(16, 50, 32, 0.14),
0 4px 12px rgba(16, 50, 32, 0.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transform-origin: top;
animation:
lgDropdownOpen 0.17s ease;
}
/* Sort menu has longer text */
.lg-sort-menu {
width: 310px;
}
/* Filter menu */
.lg-filter-menu {
width: 255px;
}
/* Open menu */
.lg-custom-dropdown.open
.lg-dropdown-menu {
display: block;
}
/* Opening animation */
@keyframes lgDropdownOpen {
from {
opacity: 0;
transform:
translateY(-5px)
scale(0.985);
}
to {
opacity: 1;
transform:
translateY(0)
scale(1);
}
}
/* ================================================================
DROPDOWN OPTION
================================================================ */
.lg-dropdown-option {
display: flex;
width: 100%;
min-height: 50px;
align-items: center;
gap: 12px;
padding: 8px 11px;
border: 0;
border-radius: 11px;
background: transparent;
color: #233229;
font-family: inherit;
text-align: left;
cursor: pointer;
transition:
background 0.16s ease,
color 0.16s ease,
transform 0.16s ease;
}
.lg-dropdown-option:hover {
background: #f1f8f4;
color: var(--plh-green);
}
/* Active option */
.lg-dropdown-option.active {
background:
linear-gradient(
90deg,
#e6f7ed 0%,
#f0faf4 100%
);
color: var(--plh-green);
}
.lg-dropdown-option.active
.lg-option-label {
font-weight: 750;
}
/* ================================================================
OPTION ICON
================================================================ */
.lg-option-icon {
display: flex;
width: 34px;
height: 34px;
flex: 0 0 34px;
align-items: center;
justify-content: center;
color: #69766f;
}
.lg-option-icon svg {
width: 21px;
height: 21px;
}
.lg-dropdown-option:hover
.lg-option-icon,
.lg-dropdown-option.active
.lg-option-icon {
color: var(--plh-green-light);
}
/* Alphabetical icons */
.lg-option-text-icon {
font-size: 15px;
font-weight: 800;
letter-spacing: -0.04em;
}
/* ================================================================
OPTION TEXT
================================================================ */
.lg-option-label {
flex: 1;
color: inherit;
font-size: 14px;
line-height: 1.3;
font-weight: 500;
white-space: nowrap;
}
/* ================================================================
OPTION CHECKMARK
================================================================ */
.lg-option-check {
display: flex;
width: 20px;
height: 20px;
flex: 0 0 20px;
align-items: center;
justify-content: center;
color: var(--plh-green-light);
opacity: 0;
transition:
opacity 0.15s ease;
}
.lg-option-check svg {
width: 18px;
height: 18px;
}
.lg-dropdown-option.active
.lg-option-check {
opacity: 1;
}
/* ================================================================
OPTION GROUP SEPARATOR
================================================================ */
.lg-dropdown-separator {
height: 1px;
margin: 6px 9px;
background: #edf1ef;
}
/* ================================================================
SHOP TABS
================================================================ */
.lg-plh-tabs {
display: flex;
gap: 7px;
border: 0;
}
.lg-plh-tab {
padding: 9px 15px !important;
border: 1px solid #e2e9e5 !important;
border-radius: 999px !important;
background: #ffffff !important;
color: #56645c !important;
font-size: 13px !important;
font-weight: 700 !important;
transition:
color 0.2s ease,
background 0.2s ease,
border-color 0.2s ease !important;
}
.lg-plh-tab.active {
border-color: var(--plh-green) !important;
background: var(--plh-green) !important;
color: #ffffff !important;
}
.lg-plh-tab:hover:not(.active) {
border-color: #b7d8c5 !important;
color: var(--plh-green) !important;
}
/* ================================================================
MOBILE FILTER BUTTON
================================================================ */
.lg-plh-mobile-filter {
display: flex;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 11px;
background: var(--plh-green);
color: #ffffff;
font-size: 16px;
cursor: pointer;
box-shadow:
0 4px 11px rgba(7, 100, 55, 0.13);
transition:
background 0.2s ease,
transform 0.2s ease;
}
.lg-plh-mobile-filter:hover {
background: var(--plh-green-dark);
transform: translateY(-1px);
}
/* ================================================================
LARGE LAPTOP
================================================================ */
@media (max-width: 1250px) {
.lg-product-list-header {
gap: 18px;
padding: 18px 19px;
}
.lg-plh-title {
font-size: 26px;
}
.lg-plh-search {
width: 255px;
}
.lg-custom-dropdown {
width: 205px;
}
.lg-sort-menu {
width: 295px;
}
.lg-filter-menu {
width: 245px;
}
.lg-dropdown-current {
font-size: 13px;
}
.lg-dropdown-label {
font-size: 12px;
}
.lg-plh-small-meta {
display: none;
}
.lg-plh-meta {
max-width: 330px;
}
}
/* ================================================================
TABLET
================================================================ */
@media (max-width: 991px) {
.lg-product-list-header {
align-items: flex-start;
flex-direction: column;
gap: 16px;
min-height: auto;
padding: 18px;
}
.lg-plh-left,
.lg-plh-actions {
width: 100%;
}
.lg-plh-actions {
justify-content: space-between;
}
.lg-plh-search {
flex: 1;
width: auto;
min-width: 0;
}
.lg-plh-title {
font-size: 25px;
}
.lg-custom-dropdown {
width: 210px;
}
}
/* ================================================================
MOBILE
================================================================ */
@media (max-width: 767px) {
.lg-product-list-header {
padding: 15px;
border-radius: 13px;
}
.lg-plh-brand-block {
gap: 10px;
}
.lg-plh-brand-mark {
flex-basis: 46px;
width: 46px;
height: 46px;
padding: 5px;
border-radius: 9px;
}
.lg-plh-eyebrow {
min-height: 18px;
padding: 3px 7px;
font-size: 8px;
}
.lg-plh-title {
font-size: 22px;
}
.lg-plh-count-badge {
min-height: 20px;
padding: 3px 7px;
font-size: 9px;
}
.lg-plh-meta {
font-size: 9px;
}
.lg-plh-search {
height: 46px;
}
.lg-product-list-header
.lg-plh-search-input.search-page-button-input {
font-size: 13px;
}
.lg-plh-mobile-filter {
width: 46px;
height: 46px;
}
}
/* ================================================================
SMALL MOBILE
================================================================ */
@media (max-width: 480px) {
.lg-product-list-header {
padding: 14px;
}
.lg-plh-brand-mark {
display: none;
}
.lg-plh-title-row {
flex-wrap: wrap;
gap: 6px;
}
.lg-plh-title {
max-width: 220px;
font-size: 20px;
white-space: normal;
}
.lg-plh-small-meta,
.lg-plh-meta {
display: none;
}
.lg-plh-search {
min-width: 0;
}
.lg-plh-count-badge span {
display: none;
}
}
/* ================================================================
LALIGURANS
PRODUCT FILTER SIDEBAR
view.blade.php
================================================================ */
/* ================================================================
SIDEBAR COLUMN
================================================================ */
.lg-product-sidebar-column {
position: relative;
}
/* ================================================================
MAIN SIDEBAR
================================================================ */
.lg-product-filter-sidebar {
--lg-filter-green: #076437;
--lg-filter-green-dark: #054c2b;
--lg-filter-soft: #eef8f2;
--lg-filter-text: #172019;
--lg-filter-muted: #69756d;
--lg-filter-border: #e1e9e4;
--lg-filter-background: #ffffff;
display: block;
width: 100%;
padding: 0 !important;
margin: 0;
border:
1px solid
var(--lg-filter-border);
border-radius: 16px;
background:
var(--lg-filter-background);
box-shadow:
0 4px 18px
rgba(17, 54, 34, 0.04);
overflow: hidden !important;
}
/* ================================================================
SIDEBAR SCROLL WRAPPER
================================================================ */
.lg-product-filter-scroll {
display: block;
width: 100%;
padding: 0 !important;
margin: 0;
}
/* ================================================================
FILTER HEADER
================================================================ */
/* ================================================================
FILTER HEADER
================================================================ */
.lg-product-filter-header {
position: relative;
display: flex !important;
width: 100%;
min-height: 64px;
align-items: center !important;
justify-content: space-between !important;
padding: 0 20px;
margin: 0;
/* REMOVE FULL WIDTH LINE */
border-bottom: 0 !important;
background: #ffffff;
}
/* ================================================================
SHORT / INSET DIVIDER
================================================================ */
.lg-product-filter-header::after {
content: "";
position: absolute;
bottom: 0;
/* creates the gap on left and right */
inset-inline: 20px;
height: 1px;
background: #e2e9e4;
}
/* ================================================================
HEADER TITLE
================================================================ */
.lg-product-filter-title {
display: flex !important;
width: auto !important;
min-width: 0;
align-items: center !important;
justify-content: flex-start;
gap: 9px;
padding: 0 !important;
margin: 0 !important;
}
.lg-product-filter-title h5 {
display: block;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
color:
var(--lg-filter-text);
font-size:
16px !important;
line-height:
1.2 !important;
font-weight:
700 !important;
white-space:
nowrap;
}
/* ================================================================
FILTER ICON CONTAINER
IMPORTANT:
Hard sizes prevent existing theme SVG rules from enlarging this.
================================================================ */
.lg-product-filter-title-icon {
display: flex !important;
width: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
height: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
flex:
0 0 20px !important;
align-items:
center !important;
justify-content:
center !important;
padding:
0 !important;
margin:
0 !important;
border:
0 !important;
background:
transparent !important;
color:
var(--lg-filter-green);
overflow:
hidden !important;
}
/* ================================================================
FILTER SVG
Extremely specific sizing because your theme apparently contains
a broad SVG rule that was making the previous icon enormous.
================================================================ */
.lg-product-filter-title-icon
.lg-product-filter-svg {
display:
block !important;
width:
18px !important;
min-width:
18px !important;
max-width:
18px !important;
height:
18px !important;
min-height:
18px !important;
max-height:
18px !important;
flex:
0 0 18px !important;
padding:
0 !important;
margin:
0 !important;
position:
static !important;
transform:
none !important;
overflow:
visible !important;
}
/* Force paths to remain thin lines */
.lg-product-filter-title-icon
.lg-product-filter-svg
path {
fill:
none !important;
stroke:
currentColor !important;
stroke-width:
1.8 !important;
vector-effect:
non-scaling-stroke;
}
/* ================================================================
FILTER BODY
================================================================ */
.lg-product-filter-body {
display: block;
width: 100%;
padding:
0 20px 20px;
margin: 0;
background:
#ffffff;
}
/* ================================================================
REMOVE RANDOM PADDING / MARGIN FROM OLD SIDEBAR WRAPPER
================================================================ */
.lg-product-filter-sidebar
.shop-sidebar-scroll {
padding:
0 !important;
}
.lg-product-filter-sidebar
.cz-sidebar-header {
margin:
0;
}
/* ================================================================
MOBILE HEADER
================================================================ */
.lg-product-filter-mobile-header {
display:
none;
}
/* ================================================================
DESKTOP
================================================================ */
@media (min-width: 992px) {
.lg-product-filter-sidebar {
width:
100%;
}
}
/* ================================================================
TABLET / MOBILE
================================================================ */
@media (max-width: 991px) {
.lg-product-filter-mobile-header {
display:
flex;
align-items:
center;
justify-content:
flex-end;
padding:
10px 14px 0 !important;
}
.lg-product-filter-header {
min-height:
58px;
padding:
0 16px;
}
.lg-product-filter-body {
padding:
0 16px 18px;
}
.lg-product-filter-title h5 {
font-size:
15px !important;
}
}
/* ================================================================
VERY SMALL MOBILE
================================================================ */
@media (max-width: 575px) {
.lg-product-filter-header {
padding-inline:
14px;
}
.lg-product-filter-body {
padding-inline:
14px;
}
}