/* CM CONTAINER SIZES  */
/* Custom container widths */
@media (min-width: 576px) {
    .container {
        max-width: 600px !important;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 800px !important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 1050px !important;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1300px !important;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1550px !important;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1800px !important;
    }
}

body .button-01 {
    border-radius: 3px;
    background-color: var(--button-color1);
    min-width: 150px;
    color: #FFF;
    font-family: var(--family2);
    font-weight: 400;
    padding-bottom: 2px;
    width:100%;
}
body .button-01, body .button-01:link, body .button-01:active, body .button-01:visited {
    color: #FFF;
    transition: color ease-in 300ms, background-color ease-in 300ms;
}
body .button-01:hover {
    background-color: var(--button-hover-color1);
    text-decoration: none !important;
}
body .btn-color1.button-01 {
    background-color: var(--button-color1);
}
body .btn-color1.button-01:hover {
    background-color: var(--button-hover-color1);
}
body .btn-color2.button-01 {
    background-color: var(--button-color2);
}
body .btn-color2.button-01:hover {
    background-color: var(--button-hover-color2);
}
body .btn-color3.button-01 {
    background-color: var(--button-color3);
}
body .btn-color3.button-01:hover {
    background-color: var(--button-hover-color3);
}
body .btn-color4.button-01 {
    background-color: var(--button-color4);
}
body .btn-color4.button-01, body .btn-color4.button-01:link, body .btn-color4.button-01:active, body .btn-color4.button-01:visited {
    color: #272727;
    transition: color ease-in 300ms, background-color ease-in 300ms;
}
body .btn-color4.button-01:hover {
    background-color: var(--button-hover-color4);
}
body .btn-color5.button-01 {
    background-color: var(--button-color5);
}
body .btn-color5.button-01, body .btn-color5.button-01:link, body .btn-color5.button-01:active, body .btn-color5.button-01:visited {
    color: var(--accent-color);
}
body .btn-color5.button-01:hover {
    background-color: var(--button-hover-color5);
}
body .btn-color6.button-01 {
    background-image: linear-gradient(to right, var(--accent-color), var(--accent-color2));
    transition: all ease-in 300ms;
}
body .btn-color6.button-01:hover {
    filter: brightness(120%);
}

/* PRODUCT LIST */

/* RENDER SINGLE PRODUCT CSS */
.product-container {
    background-color: #fafafa;
    border: 2px solid #fff;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-image-container {
    flex: 0 0 auto;
    min-height: 500px;
    max-height: 500px;
    transition: min-height 0.3s ease; /* Smooth transition for height changes */
}

/* Media queries for responsive min-height */
@media (max-width: 1200px) {
    .product-image-container {
        min-height: 400px;
        max-height: 400px;
    }
}

@media (max-width: 992px) {
    .product-image-container {
        min-height: 350px;
        max-height: 350px;
    }
}

@media (max-width: 768px) {
    .product-image-container {
        min-height: 300px;
        max-height: 300px;
    }
}

@media (max-width: 576px) {
    .product-image-container {
        min-height: 250px;
        max-height: 250px;
    }
}

.product-image-container img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.product-description-container,
.product-name-container,
.product-price-container,
.product-actions-container {
    padding: 10px;
    flex: 1 1 auto;
}
.product-price-container {
    font-size:18px;
}
.product-actions-container {
    border-top: 0px solid #dadada;
    padding-top: 10px;
}

a.add-to-cart-product {
    display: block;
    width: 100%;
    height: auto;
    padding: 10px;
    text-decoration: none !important;
    text-align: center;
    color: black;
    border-radius: 5px;
    border: 1px solid #cacaca;
}

a.add-to-cart-product:hover {
    background-color: black;
    color:white;
}

.product-container:hover {
    background-color: #f1f1f1;
}

/* MEGA MENU */
.cmmmwrapper{
    padding:50px;
}
.cmmm{
    
}
.mmtitle{
    font-size:2em;
}

.mmlink{
    color:black !important;
}

/* HEADER */
/* Menu Login & Others */
.floating-active #dnn_dnnUser_userNameLink{
    color:black !important;
}
header.header-default{
    z-index: 9999 !important;
}

/* Olfactory Images */
.opimg{
    width: 50%;
}
.opimg1{
    width: 100%;
}
/*Product Details Bootstrap Modal*/
#product-image-modal{
    z-index: 99999;
}
.cmcontainer{
    padding-left:15px;
    padding-right:15px;
    width: 100%;
    max-width: 100%;
}
#dnn_userLogin108663_loginLink{
    color: black !important;
}
.product-name-part-2{
    font-size:22px;
}
.product-name-part-3{
    font-size:22px;
}
#dnn_dnnUser_userNameLink{
    color:black !important;
}

/* MINI CART */
.hc-minicart .hc-tooltip{
    right: 0 !important;
}

/* UTILS */
.border-none{
    border:none !important;
}
.width-75{
    width:75%;
}
.hide{
    display:none !important;
}
/* USER PROFILE */
#dnn_userLogin108663_viewProfileImageLink{
    display: none !important;
}

/* PAGINATION */
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #000 !important;
    border-color: #000 !important;
}
.pagination{
    align-items: center !important;
    justify-content: center !important;
}

/* CATEGORY DROPDOWN LISTING PAGE */
.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #000 !important;
}

/* Override Bootstrap container breakpoints */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 576px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 992px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

/* Optional: Add a class for extra small screens to ensure auto width */
.container-xs-auto {
    width: auto;
}

/* BOOTSTRAP BTN OVERRIDE */
.btn-primary {
    color: #fff !important;                /* Black text color */
    background-color: #000 !important;     /* Black background color */
    border-color: #000 !important;         /* Black border color */
}

/* Optional: Add hover and focus states if desired */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff !important;                /* Black text color */
    background-color: #333 !important;     /* Darker black background color for hover */
    border-color: #333 !important;         /* Darker black border color for hover */
}
.btn-outline-primary{
    color:black;
    background-color:rgba(255,255,255,0);
    border:1px solid black; 
}
/* Optional: Add hover and focus states if desired */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;                
    background-color: black !important;   
    border-color:black;  
}
/* CM FOOTER */
.cm-footer{
    border-top:2px solid black;
    padding-top:20px !important;
    margin-top:40px !important;
}

/*Accordion style*/
.custom-accordion .accordion-item {
  margin-bottom: 0px;
  position: relative;
  border-radius: 0px;
  overflow: hidden; 
  border-bottom:1px solid #ccc;
  }
  .custom-accordion .accordion-item .btn-link {
    display: block;
    width: 100%;
    padding: 15px;
    text-decoration: none;
    text-align: left;
    color: #000;
    border: none;
    border-radius: 0;
    position: relative;
    background: #fff;
    padding-left: 0px;
    border-bottom: 0px solid #ccc;
    font-size: 27px;
    }
    .custom-accordion .accordion-item .btn-link:before {
      font-family: 'fontawesome';
      content: "\f077";
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      right: 0px;
      font-size: 15px; }
    .custom-accordion .accordion-item .btn-link[aria-expanded="true"]:before {
      font-family: 'fontawesome';
      content: "\f078";
      position: absolute;
      color: #000000;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      right: 0px; 
      }
  .custom-accordion .accordion-item.active {
    z-index: 2; 
    }
    .custom-accordion .accordion-item.active .btn-link {
      border-bottom: 1px solid transparent;
      color: #000000; 
      }
  .custom-accordion .accordion-item .accordion-body {
    padding: 0px 0px 20px 0px;
    color: #000; 
    }

/* MOBILE HEADER 
.mobile-header.floating-nav {
    z-index: 9999;
}
.mobilemenu-main .gomenu {
    z-index: 99999 !important;
}

*/
.sticky-top{
    z-index: 0 !important;
}

/* SEARCH */
.cmsearch{
    color:black !important;
    background-color: none !important;
    border-color: #000 !important;
}
.cmsearch:hover{
    color:#fff !important;
    background-color: #000 !important;
}

/* HIDE UNUSED SOCIAL MENU ITEMS */
.userMessages{display:none !important;}
.userNotifications{display:none !important;}
.userSettings{display:none !important;}
.userProfilename{display:none !important;}

.page-link{
    color:black;
}
.form-check-input:checked {
    background-color: #000 !important;
    border-color: #000 !important;
}



.product-outofstock-text{
    font-size:16px;
}

/* MANAGE USERS */
#Items-560 > nav > div.col-md2 > a{
    color:white !important;
}

.modal-backdrop {
    display:none !important;
    z-index: 9999 !important;
}

.modal {
    z-index: 10000 !important;
}

/* OVERLAY */
.is-section.is-box .is-overlay .is-overlay-color {
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%) !important;
}
.is-box-6 .is-overlay .is-overlay-color {
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%) !important;
    opacity: 1 !important;
    display: block !important;
}

/* HIDE FB Share */
#fb-root{display:none;}

/* Header Color Switcher */
/* Default styles (toggle off): Black text for all states to ensure visibility */
#dng-megamenu123891 .primary_structure > li > a,
#dng-megamenu123891 .primary_structure > li > a:link,
#dng-megamenu123891 .primary_structure > li > a:active,
#dng-megamenu123891 .primary_structure > li > a:visited {
    color: #000000; /* Black text for nav menu */
    font-family: "Bodoni Moda";
    font-size: 0.875rem;
    font-weight: 300;
    text-transform: uppercase;
}

.Login .userProperties a,
.Login .userProperties a:link,
.Login .userProperties a:active,
.Login .userProperties a:visited {
    color: #000000; /* Black text for user menu */
}

#hcMiniCart .hc-iconbox a,
#hcMiniCart .hc-tooltip a,
#hcMiniCart .hc-tooltip .lead,
#hcMiniCart .hc-tooltip h6 {
    color: #000000; /* Black text for cart */
}

.cmsearch i {
    color: #000000; /* Black search icon */
}

.header-area a[href="/Shipping-Return-Policy"] {
    color: #000000; /* Black text for free shipping link */
}

.dnngo_menuslide a,
.dnngo_menuslide a:link,
.dnngo_menuslide a:active,
.dnngo_menuslide a:visited {
    color: #000000; /* Black text for dropdowns */
}

/* Toggle on: Color-switching styles */
.color-switch-active #dng-megamenu123891 .primary_structure > li > a,
.color-switch-active #dng-megamenu123891 .primary_structure > li > a:link,
.color-switch-active #dng-megamenu123891 .primary_structure > li > a:active,
.color-switch-active #dng-megamenu123891 .primary_structure > li > a:visited {
    color: #ffffff; /* White text for nav menu when transparent */
}

.color-switch-active .Login .userProperties a,
.color-switch-active .Login .userProperties a:link,
.color-switch-active .Login .userProperties a:active,
.color-switch-active .Login .userProperties a:visited {
    color: #ffffff; /* White text for user menu when transparent */
}

.color-switch-active #hcMiniCart .hc-iconbox a,
.color-switch-active #hcMiniCart .hc-tooltip a,
.color-switch-active #hcMiniCart .hc-tooltip .lead,
.color-switch-active #hcMiniCart .hc-tooltip h6 {
    color: #ffffff; /* White text for cart when transparent */
}

.color-switch-active .cmsearch i {
    color: #ffffff; /* White search icon when transparent */
}

.color-switch-active .header-area a[href="/Shipping-Return-Policy"] {
    color: #ffffff; /* White text for free shipping link when transparent */
}

/* Sticky state with toggle on: Black text */
.color-switch-active header.floating-active #dng-megamenu123891 .primary_structure > li > a,
.color-switch-active header.floating-active #dng-megamenu123891 .primary_structure > li > a:link,
.color-switch-active header.floating-active #dng-megamenu123891 .primary_structure > li > a:active,
.color-switch-active header.floating-active #dng-megamenu123891 .primary_structure > li > a:visited {
    color: #000000; /* Black text for nav menu when sticky */
}

.color-switch-active header.floating-active .Login .userProperties a,
.color-switch-active header.floating-active .Login .userProperties a:link,
.color-switch-active header.floating-active .Login .userProperties a:active,
.color-switch-active header.floating-active .Login .userProperties a:visited {
    color: #000000; /* Black text for user menu when sticky */
}

.color-switch-active header.floating-active #hcMiniCart .hc-iconbox a,
.color-switch-active header.floating-active #hcMiniCart .hc-tooltip a,
.color-switch-active header.floating-active #hcMiniCart .hc-tooltip .lead,
.color-switch-active header.floating-active #hcMiniCart .hc-tooltip h6 {
    color: #000000; /* Black text for cart when sticky */
}

.color-switch-active header.floating-active .cmsearch i {
    color: #000000; /* Black search icon when sticky */
}

.color-switch-active header.floating-active .header-area a[href="/Shipping-Return-Policy"] {
    color: #000000; /* Black text for free shipping link when sticky */
}

/* Style for the toggle checkbox */
.color-toggle-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

.color-toggle-container label {
    color: #000000;
    font-size: 0.875rem;
    cursor: pointer;
}

.color-toggle-container input[type="checkbox"] {
    margin-right: 5px;
}

#dnn_userLogin108663_logoffLink{color:white !important;}
#dnn_userLogin108663_viewProfileLink{color:white !important;}