/** Shopify CDN: Minification failed

Line 3765:22 Unexpected "{"
Line 3765:34 Expected ":"
Line 3765:40 Unexpected "{"
Line 3771:22 Unexpected "{"
Line 3771:34 Expected ":"
Line 3777:22 Unexpected "{"
Line 3777:34 Expected ":"
Line 3782:22 Unexpected "{"
Line 3782:34 Expected ":"
Line 3783:22 Unexpected "{"
... and 3 more hidden warnings

**/
/* =========================================
   MAXDAL — TOKENS (single source of truth)
========================================= */
:root{
  /* RGB tuples (for rgba(var(...), x)) */
  --maxdal-silver-rgb: 230,230,230;
  --maxdal-titanium-rgb: 190,196,204;
  --maxdal-ink-rgb: 8,8,10;
  --maxdal-black-1-rgb: 10,10,10;
  --maxdal-black-2-rgb: 0,0,0;

  /* Convenience aliases (RGB) */
  --maxdal-silver: var(--maxdal-silver-rgb);
  --maxdal-titanium: var(--maxdal-titanium-rgb);
  --maxdal-black-1: var(--maxdal-black-1-rgb);
  --maxdal-black-2: var(--maxdal-black-2-rgb);

  /* Gradients (NEVER used inside rgb()/rgba()) */
  --maxdal-titanium-gradient: linear-gradient(
    135deg,
    #f5f7fa 0%,
    #cfd6de 22%,
    #8f9aa6 55%,
    #eef2f6 78%,
    #b6c0cb 100%
  );

  /* Extra */
  --maxdal-glass: rgba(255,255,255,.06);
  --maxdal-glass-2: rgba(255,255,255,.04);
  --maxdal-border: rgba(var(--maxdal-titanium-rgb), .22);
  --maxdal-border-2: rgba(255,255,255,.10);
  --maxdal-shadow: 0 30px 90px rgba(0,0,0,.55);
  --maxdal-shadow-soft: 0 18px 45px rgba(0,0,0,.40);

  --bs-link-color: currentColor;
  --bs-link-color-rgb: currentColor;
  --bs-link-hover-color: currentColor;
  --bs-link-hover-color-rgb: currentColor;
  --bs-border-color: rgba(var(--bs-body-color-rgb), .1);

  --mx-glass-bg-1: rgba(10,10,12,.78);
  --mx-glass-bg-2: rgba(0,0,0,.86);
  --mx-stroke: rgba(255,255,255,.12);
  --mx-stroke-2: rgba(255,255,255,.18);
  --mx-text: rgba(255,255,255,.95);
  --mx-text-dim: rgba(255,255,255,.72);
  --mx-text-muted: rgba(255,255,255,.55);
  --mx-shadow: 0 30px 90px rgba(0,0,0,.60);
  --mx-radius-xl: 22px;
  --mx-radius-lg: 18px;
  --mx-radius-md: 14px;
  --mx-accent-green: #7cffb2;  /* search price green */
  --mx-accent-yellow: #ffd24a; /* qty number */
}

/*
  Various classes
*/
.title {
  margin-bottom: .25rem;
}

.title-border-bottom span {
  border-bottom: 1px solid rgba(var(--bs-body-color-rgb), 1);
  display: inline-block;
  padding-bottom: 0.25rem;
}

.subtitle {
  text-transform: uppercase;
  letter-spacing: .1rem;
  opacity: .75;
  margin-bottom: 0.25rem;
}

.description {
  margin-bottom: 1.4rem;
}

.shadow-md {
  box-shadow: var(--bs-box-shadow-md);
}


/*
  Container
*/
.container {
  max-width: var(--bs-container-max-width);
}


/*
  Background/Text
*/
.bg-primary { --bg-color-rgb: var(--bs-primary-rgb); }
.bg-secondary { --bg-color-rgb: var(--bs-secondary-rgb); }
.bg-body { --bg-color-rgb: var(--bs-body-bg-rgb); }
.bg-white { --bg-color-rgb: var(--bs-white-rgb); }
.text-primary { --text-color-rgb: var(--bs-primary-rgb); }
.text-secondary { --text-color-rgb: var(--bs-secondary-rgb); }
.text-body { --text-color-rgb: var(--bs-body-color-rgb); }
.text-white { --text-color-rgb: var(--bs-white-rgb); }


/*
  Border
*/
.border-body {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-body-color-rgb), var(--bs-border-opacity)) !important;
}


/*
  Headings
*/
.heading {
  font-family: var(--bs-headings-font-family);
}


/*
  Buttons
*/
.btn {
  --bs-btn-font-family: var(--bs-btn-font-family-new);
  font-weight: var(--bs-btn-font-weight);
  text-transform: var(--bs-btn-text-transform);
  letter-spacing: var(--bs-btn-letter-spacing);
  background-image: var(--bs-btn-bg-gradient);
}


.btn-secondary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-border-color: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), .9);
  --bs-btn-hover-border-color: rgba(var(--bs-secondary-rgb), .9);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), .8);
  --bs-btn-active-border-color: rgba(var(--bs-secondary-rgb), .8);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-body-color-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-disabled-border-color: rgba(var(--bs-secondary-rgb), 1);
}

.btn-white {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: rgba(var(--bs-white-rgb), 1);
  --bs-btn-border-color: rgba(var(--bs-white-rgb), 1);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: rgba(var(--bs-white-rgb), .9);
  --bs-btn-hover-border-color: rgba(var(--bs-white-rgb), .9);
  --bs-btn-focus-shadow-rgb: var(--bs-white-rgb);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: rgba(var(--bs-white-rgb), .8);
  --bs-btn-active-border-color: rgba(var(--bs-white-rgb), .8);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-body-color-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-body-color);
  --bs-btn-disabled-bg: rgba(var(--bs-white-rgb), 1);
  --bs-btn-disabled-border-color: rgba(var(--bs-white-rgb), 1);
}

.btn-light-primary {
  --bs-btn-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-bg: rgba(var(--bs-primary-rgb), .1);
  --bs-btn-border-color: rgba(var(--bs-primary-rgb), .1);
  --bs-btn-hover-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .2);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), .2);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .3);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), .3);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-body-color-rgb), 0.125);
  --bs-btn-disabled-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-disabled-bg: rgba(var(--bs-primary-rgb), .1);
  --bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), .1);
}

.btn-light-secondary {
  --bs-btn-color: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-bg: rgba(var(--bs-secondary-rgb), .1);
  --bs-btn-border-color: rgba(var(--bs-secondary-rgb), .1);
  --bs-btn-hover-color: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), .2);
  --bs-btn-hover-border-color: rgba(var(--bs-secondary-rgb), .2);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), .3);
  --bs-btn-active-border-color: rgba(var(--bs-secondary-rgb), .3);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-body-color-rgb), 0.125);
  --bs-btn-disabled-color: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-disabled-bg: rgba(var(--bs-secondary-rgb), .1);
  --bs-btn-disabled-border-color: rgba(var(--bs-secondary-rgb), .1);
}

.btn-light-white {
  --bs-btn-color: rgba(var(--bs-white-color-rgb), 1);
  --bs-btn-bg: rgba(var(--bs-white-rgb), .1);
  --bs-btn-border-color: rgba(var(--bs-white-rgb), .1);
  --bs-btn-hover-color: rgba(var(--bs-white-rgb), 1);
  --bs-btn-hover-bg: rgba(var(--bs-white-rgb), .2);
  --bs-btn-hover-border-color: rgba(var(--bs-white-rgb), .2);
  --bs-btn-focus-shadow-rgb: var(--bs-white-rgb);
  --bs-btn-active-color: rgba(var(--bs-white-rgb), 1);
  --bs-btn-active-bg: rgba(var(--bs-white-rgb), .3);
  --bs-btn-active-border-color: rgba(var(--bs-white-rgb), .3);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-body-color-rgb), 0.125);
  --bs-btn-disabled-color: rgba(var(--bs-white-rgb), 1);
  --bs-btn-disabled-bg: rgba(var(--bs-white-rgb), .1);
  --bs-btn-disabled-border-color: rgba(var(--bs-white-rgb), .1);
}

.btn-outline-primary {
  --bs-btn-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-hover-border-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-active-border-color: rgba(var(--bs-primary-rgb), 1);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-body-color-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-whtie);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(var(--bs-primary-rgb), 1);
}

.btn-outline-secondary {
  --bs-btn-color: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-hover-border-color: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-active-border-color: rgba(var(--bs-secondary-rgb), 1);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-body-color-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-whtie);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(var(--bs-secondary-rgb), 1);
}

.btn-outline-white {
  --bs-btn-color: rgba(var(--bs-white-rgb), 1);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(var(--bs-white-rgb), 1);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: rgba(var(--bs-white-rgb), 1);
  --bs-btn-hover-border-color: rgba(var(--bs-white-rgb), 1);
  --bs-btn-focus-shadow-rgb: var(--bs-white-rgb);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: rgba(var(--bs-white-rgb), 1);
  --bs-btn-active-border-color: rgba(var(--bs-white-rgb), 1);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-white-color-rgb), 0.125);
  --bs-btn-disabled-color: var(--bs-body-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: rgba(var(--bs-white-rgb), 1);
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: rgba(var(--bs-primary-rgb), .6);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 var(--bs-body-color);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  text-decoration: underline;
}

.btn-sm {
  font-size: .9rem;
  --bs-btn-padding-x: .8rem;
  --bs-btn-padding-y: .2rem;
  border-radius: var(--bs-border-radius);
}

.btn-lg {
  font-size: 1.2rem;
  --bs-btn-padding-x: 1.2rem;
  --bs-btn-padding-y: .4rem;
  border-radius: var(--bs-border-radius);
}

.btn.loading {
  position: relative;
  text-indent: -9999rem;
}

.btn.loading svg {
  display: none;
}

.btn.loading::after {
  content: "";
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -0.55rem 0 0 -0.55rem;
  border-radius: 50%;
  border: 0.15rem solid currentcolor;
  border-right-color: transparent;
  animation: spinner-border 0.75s linear infinite;
}

.btn.loading.btn-sm::after {
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
}

.btn.loading.btn-lg::after {
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.7rem 0 0 -0.7rem;
}


/*
  Carousel
*/
.carousel {
  --caption-color-rgb: var(--text-color-rgb, 255, 255, 255);
}

.carousel-item {
  transition-duration: var(--transition-duration, 600ms);
}

.carousel-control-prev,
.carousel-control-next {
  width: auto;
  height: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  padding: 0.5rem;
  color: currentColor;
  opacity: 1;
  border: 1px solid rgba(var(--caption-color-rgb), .25);
  color: rgba(var(--caption-color-rgb), .5);
  border-radius: 50%;
  transition: all .2s ease-out;
}

.carousel-control-prev:focus, 
.carousel-control-prev:hover,
.carousel-control-next:focus, 
.carousel-control-next:hover {
  color: rgba(var(--caption-color-rgb), 1);
  background-color: rgba(var(--caption-color-rgb), .1);
  border-color: rgba(var(--caption-color-rgb), .5);
  opacity: 1;
}

.carousel-control-prev:focus-visible, 
.carousel-control-next:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(var(--caption-color-rgb), .25);
}

.carousel-control-prev {
  left: 1rem;
}

.carousel-control-next {
  right: 1rem;
}

.carousel-control-prev svg,
.carousel-control-next svg {
  transition: all .2s ease-out;
}

.carousel-control-prev:hover svg,
.carousel-control-prev:focus svg {
  transform: translateX(-2px);
}

.carousel-control-next:hover svg,
.carousel-control-next:focus svg {
  transform: translateX(2px);
}

.carousel-indicators [data-bs-target] {
  background-color: rgba(var(--caption-color-rgb), .2) !important;
  opacity: 1;
}

.carousel-indicators [data-bs-target] span {
  display: block;
  width: 0;
  height: 100%;
  background-color: rgba(var(--caption-color-rgb), 1);
}

.carousel-indicators [data-bs-target].active span {
  animation: carousel_indicator_autoplay 4s linear both;
  animation-duration: var(--duration);
}

@keyframes carousel_indicator_autoplay {
  from { width: 0%; }
  to { width: 100%; }
}

.carousel[data-bs-ride=false] [data-bs-target].active span {
  width: 100% !important;
}

.carousel-caption {
  color: rgba(var(--caption-color-rgb), 1);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.carousel-caption-inner {
  width: 100%;
  margin-left: 1rem;
  margin-right: 1rem;
}

.carousel-caption.carousel-caption-center {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.carousel-caption.carousel-caption-bottom {
  bottom: 2.25rem;
}

.carousel-zoom-in .carousel-item {
  overflow: hidden;
}

.carousel-zoom-in .carousel-item.active img, 
.carousel-zoom-in .carousel-item.active video {
  animation: carousel_zoom_in 1s ease-out both;
}

.carousel-zoom-out .carousel-item img,
.carousel-zoom-out .carousel-item video {
  transform: scale(1.2);
}

.carousel-zoom-out .carousel-item.active img,
 .carousel-zoom-out .carousel-item.active video {
  animation: carousel_zoom_out 1s ease-out both;
}

@keyframes carousel_zoom_in {
  to { transform: scale(1.2); }
}

@keyframes carousel_zoom_out {
  to { transform: scale(1); }
}

.carousel-full-screen-indicator {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  transition: all .2s ease-out;
}

.has-scrolled .carousel-full-screen-indicator { 
  opacity: 0;
  transform: translate(-50%, -50%);
}

.carousel-indicators + .carousel-full-screen-indicator {
  bottom: 3.5rem;
}

.carousel-full-screen-indicator-border {
  width: 24px;
  height: 42px;
  border: 1.5px solid rgba(var(--bs-white-rgb), .25);
  border-radius: 12px;
  position: relative;
  text-align: center;
}

.carousel-full-screen-indicator-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white;
  border-radius: 50%;
  animation: 1.6s ease infinite carousel_full_screen_indicator;
}

@keyframes carousel_full_screen_indicator {
	0% {
    margin-top: 2px;
    opacity: 0;
	}
	30% {
    opacity: 1;
	}
	100% {
    margin-top: 20px;
    opacity: 0;
	}
}

/*
  Separator (hr)
*/
hr {
  opacity: .1;
  background-color: currentColor;
  border: none;
  height: 1px;
  margin: 0;
}


/* 
  Forms
*/
.form-control,
.form-select {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23555' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}

.form-control:focus, 
.form-control:focus,
.form-select:focus,
.form-select:focus {
  color: var(--bs-body-color);
  border-color: rgba(var(--bs-primary-rgb), 1);
  box-shadow: var(--bs-focus-box-shadow);
}

.text-white .form-control:focus, 
.text-white .form-control:focus,
.text-white .form-select:focus,
.text-white .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.1);
}

.form-label {
  margin-bottom: 0.375rem;
}

.input-group-text {
  background-color: rgba(var(--bs-body-color-rgb), 0.05);
  border-radius: var(--bs-border-radius);
}

.form-check-input {
  background-color: var(--bs-body-bg);
  border-color: rgba(var(--bs-body-color-rgb), .75);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
} 

.form-check-input:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.5);
  box-shadow: var(--bs-focus-box-shadow);
}


/*
  Navs
*/
.nav {
  --bs-nav-link-padding-x: 0.75rem;
  --bs-nav-link-padding-y: 0.375rem;
  --bs-nav-link-color: currentColor;
  --bs-nav-link-hover-color: currentColor;
}

.nav-link {
  border-radius: var(--bs-border-radius);
}

.nav-link:hover,
.nav-link:focus {
  background-color: rgba(var(--text-color-rgb), .05);
}

.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(var(--text-color-rgb), .15);
}

.nav-link.active {
  background-color: rgba(var(--text-color-rgb), .05);
}

.nav-link:active {
  background-color: rgba(var(--text-color-rgb), .1);
}

.nav-link-icon,
.btn-icon {
  position: relative;
  display: inline-flex;
  padding: .65rem;
  border-radius: 50rem;
  background-image: none;
}

.nav-link-icon:hover,
.nav-link-icon:focus,
.btn-icon:hover,
.btn-icon:focus {
  background-color: rgba(var(--text-color-rgb, var(--bs-body-color-rgb)), .05);
}

.nav-link-icon:active,
.btn-icon:active,
:not(.btn-check) + .btn-icon:active {
  background-color: rgba(var(--text-color-rgb, var(--bs-body-color-rgb)), .1);
  border-color: transparent;
}


/*
  Tabs
*/
.nav-tabs .nav-link {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/*
  Navbar
*/
.navbar-brand img {
  transition: all 0.2s ease-out;
}
.navbar-brand:hover img, .navbar-brand:focus img {
  opacity: 0.85;
}

/*
  Dropdown
*/
.dropdown-menu {
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-hover-bg: rgba(var(--bs-body-color-rgb), .05);
  --bs-dropdown-link-active-bg: rgba(var(--bs-body-color-rgb), .1);
  --bs-dropdown-link-active-color: currentColor;
  --bs-dropdown-spacer: .25rem;
  --bs-dropdown-divider-bg: var(--bs-border-color);
}

.dropdown-menu.show:not([data-popper-placement]) {
  animation: dropdown-menu-aninatiom 0.2s ease-out;
}

@keyframes dropdown-menu-aninatiom {
  from { transform: translateY(0.375rem); }
  to { transform: translateY(0); }
}

.dropdown-toggle::after {
  margin-left: 0.1em;
  vertical-align: 0.15rem;
}

.dropdown-item {
  position: relative;
  font-size: 0.9rem;
  transition: all 0.2s ease-out;
}

.dropdown-item:hover,
.dropdown-item:focus {
}

.dropdown-divider {
  margin-left: var(--bs-dropdown-item-padding-x);
  margin-right: var(--bs-dropdown-item-padding-x);
  opacity: 1;
}

.dropdown-item-title {
  font-size: 1rem;
  font-family: var(--bs-headings-font-family);
  font-weight: var(--bs-headings-font-weight);
  margin-bottom: 0.125rem;
  text-transform: uppercase;
}

.dropdown-megamenu {
  width: 100%;
  padding: .5rem 0 1rem;
  margin-top: 0 !important;
  border: none;
  border-bottom-style: solid;
  border-radius: 0;
}

.dropdown-megamenu .dropdown-item {
  border-radius: var(--bs-border-radius);
}



/* 
  Badge
*/
.badge.badge-circle {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  position: absolute;
  top: 0.327rem;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  animation: badge_circle 0.4s ease-out both;
  animation-delay: 0.4s;
  background-color: rgba(var(--text-color-rgb));
  color: rgba(var(--bg-color-rgb));
}

.badge.badge-circle[data-count="0"] {
  visibility: hidden;
}

@keyframes badge_circle {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 0.5; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}


/*
  Modal/Offcanvas
*/
.modal {
  --bs-modal-header-padding: .75rem 1rem;
  --bs-modal-footer-border-color: rgba(var(--bs-dialog-header-border-color-rgb), var(--bs-dialog-header-border-opacity));
  --bs-modal-border-radius: var(--bs-border-radius);
}

.modal-dialog {
  padding-left: 1rem;
  padding-right: 1rem;
}

.offcanvas {
  --bs-offcanvas-padding-y: .75rem;
  --bs-modal-footer-border-color: rgba(var(--bs-dialog-header-border-color-rgb), var(--bs-dialog-header-border-opacity))
}

.modal-backdrop,
.offcanvas-backdrop {
  background-color: rgba(var(--bs-dialog-backdrop-color-rgb), var(--bs-dialog-backdrop-opacity));
  backdrop-filter: blur(var(--bs-dialog-backdrop-blur));
}

.modal-backdrop.show,
.offcanvas-backdrop.show {
  opacity: 1;
}

.modal-content,
.offcanvas {
  border: none !important;
  box-shadow: 0 0 1rem rgba(var(--bs-dialog-backdrop-color-rgb), 0.25);
}

.modal-header,
.offcanvas-header {
  background-color: rgba(var(--bs-dialog-header-bg-color-rgb), var(--bs-dialog-header-bg-opacity));
  color: var(--bs-dialog-header-text-color);
  border-bottom-style: solid;
  border-bottom-width: var(--bs-dialog-header-border-width);
  border-bottom-color: rgba(var(--bs-dialog-header-border-color-rgb), var(--bs-dialog-header-border-opacity));
}

.offcanvas-footer {
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: rgba(var(--bs-dialog-header-border-color-rgb), var(--bs-dialog-header-border-opacity));
}

.modal-title,
.offcanvas-title {
  font-size: var(--bs-dialog-header-title-font-size);
}

.offcanvas-backdrop {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") 24 24, pointer;
}

@media (max-width: 599px) {
  .offcanvas {
    --bs-offcanvas-width: 360px;
  }
  .modal-dialog {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/*
  Close btn
*/
.btn-close {
  --bs-btn-close-opacity: 0.75;
  --bs-btn-close-hover-opacity: 1;
  background: none;
  width: auto;
  height: auto;
  display: inline-flex;
  transition: all 0.2s ease-out;
  color: currentColor;
}

.btn-close:hover,
.btn-close:focus {
  transform: scale(1.1);
  color: currentColor;
}

.btn-close:focus {
  box-shadow: none;
}

.btn-close:focus-visible {
  outline: none;
  box-shadow: var(--bs-focus-box-shadow);
}

/*
  Alerts
*/
.alert {
  padding: 0.75rem 1rem;
  line-height: normal;
  font-weight: 500;
}

.alert-dismissible .btn-close {
  color: currentColor;
  padding: 0.75rem;
  margin-right: -1rem;
  margin-left: 0.5rem;
  position: relative;
  top: auto;
  left: auto;
}

.alert-primary {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: rgba(var(--bs-primary-rgb), .1);
  --bs-alert-border-color: rgba(var(--bs-primary-rgb), 0.5);
}

.alert-secondary {
  --bs-alert-color: var(--bs-secondary);
  --bs-alert-bg: rgba(var(--bs-secondary-rgb), .1);
  --bs-alert-border-color: rgba(var(--bs-secondary-rgb), 0.5);
}

/*
  Tooltips
*/
.tooltip {
}


/*
  Popovers
*/
.popover {
  --bs-popover-border-color: var(--bs-border-color);
  --bs-popover-header-bg: rgba(var(--bs-body-color-rgb), .05);
  box-shadow: var(--bs-box-shadow-sm);
}

/*
  List group
*/
.list-group {
  --bs-list-group-action-color: var(--bs-body-color);
  --bs-list-group-action-hover-color: var(--bs-body-color);
  --bs-list-group-action-hover-bg: rgba(var(--bs-primary-rgb), .05);
  --bs-list-group-action-active-color: var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--bs-light-darken-5);
  --bs-list-group-active-color: var(--bs-primary);
  --bs-list-group-active-bg: rgba(var(--bs-primary-rgb), .1);
  --bs-list-group-active-border-color: rgba(var(--bs-primary-rgb), .1); 
}

.list-group-item-action {
  transition: all 0.2s ease-out;
}

.list-group-item-action:focus-visible {
  outline: none;
  box-shadow: var(--bs-focus-box-shadow);
}


/*
  Collapse
*/
.collapse-wrapper {
  border-top: 1px solid rgba(var(--text-color-rgb, var(--bs-body-color-rgb)), .1);
}

.collapse-wrapper:last-child {
  border-bottom: 1px solid rgba(var(--text-color-rgb, var(--bs-body-color-rgb)), .1);
}

.collapse-wrapper [data-bs-toggle=collapse] {
  position: relative;
  background: none;
  border: none;
  padding: 0.75rem 0;
  margin: 0;
  width: 100%;
  border-radius: 0;
  text-align: left;
  color: currentColor;
  display: flex;
  justify-content: space-between;
  align-items: center; 
}

.collapse-wrapper [data-bs-toggle=collapse] svg.svg-icon-chevron-down {
  margin-right: .125rem;
  transition: all .2s ease-out;
}

.collapse-wrapper [data-bs-toggle=collapse][aria-expanded=true] svg.svg-icon-chevron-down {
  transform: rotate(-180deg);
}

.collapse-wrapper [data-bs-toggle=collapse]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(var(--text-color-rgb), .25);
}

.collapse-wrapper .collapse-inner {
  padding: 0.25rem 0 1.75rem;
}


/*
  Accordion
*/
.accordion {
  --bs-accordion-btn-icon: var(--icon-chevron-down);
  --bs-accordion-btn-active-icon: var(--icon-chevron-up);
  --bs-accordion-btn-icon-width: 1.5rem;
  --bs-accordion-btn-focus-box-shadow: var(--bs-focus-box-shadow);
  --bs-accordion-active-color: var(--bs-primary);
  --bs-accordion-active-bg: rgba(var(--bs-primary-rgb), 0.05);
}

.accordion-button::after {
  --bs-accordion-btn-icon: var(--icon-chevron-down) !important;
  --bs-accordion-btn-active-icon: var(--icon-chevron-down) !important;
}

.accordion-button:focus:not(:focus-visible){
  box-shadow: none;
}

.accordion-button:focus-visible {
  background-color: var(--bs-accordion-active-bg);
}


/*
  Card
*/
.card {
  --bs-card-border-color: var(--bs-border-color);
}


/*
  Image thumbnails
*/
.img-thumbnail {
  position: relative;
  transition: background-color 0.2s ease-out;
}

.img-thumbnail-title {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  width: calc(100% - 0.5rem);
  background-color: rgba(var(--bs-body-color-rgb), 0.5);
  color: white;
  text-align: center;
  line-height: 1.1;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  transition: background-color 0.2s ease-out;
}

a:hover .img-thumbnail-title {
  background-color: rgba(var(--bs-body-color-rgb), 0.75);
}

/*
  Progress
*/
.progress {
  background-color: rgba(var(--bs-body-color-rgb), 0.1)
}

.progress-bar {
  background-color: var(--bs-primary);
}



/*
  Pagination
*/
.pagination {
  --bs-pagination-hover-bg: rgba(var(--bs-primary-rgb), 0.1);
  --bs-pagination-active-color: var(--bs-primary);
  --bs-pagination-active-bg: rgba(var(--bs-primary-rgb), 0.1);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-focus-bg: var(--bs-light);
  --bs-pagination-focus-box-shadow: var(--bs-focus-box-shadow);
}


/*
  Ratios
*/
.ratio-3x4 {
  --bs-aspect-ratio: 125%;
}

.ratio-9x16 {
  --bs-aspect-ratio: 143.75%;
}

.ratio-9x21 {
  --bs-aspect-ratio: 157.14%;
}

.ratio.adapt video {
  position: relative;
}


/*
  Swiper
*/
.swiper {
  --swiper-theme-color: var(--text-color-rgb, --bs-body-color-rgb);
  --swiper-navigation-size: 2rem;
  --swiper-navigation-color: rgb(var(--swiper-theme-color));
  --swiper-navigation-sides-offset: 0;
  --swiper-pagination-color: rgb(var(--swiper-theme-color));
  --swiper-pagination-right: 1rem;
  --swiper-pagination-bottom: 1rem;
  --swiper-pagination-bullet-horizontal-gap: .2rem;
  --swiper-pagination-bullet-vertical-gap: .2rem;
  --swiper-pagination-bullet-inactive-color: rgb(var(--swiper-theme-color));
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-fraction-color: rgb(var(--swiper-theme-color));
  --swiper-scrollbar-bg-color: rgba(var(--swiper-theme-color), .15);
  --swiper-scrollbar-drag-bg-color: rgba(var(--swiper-theme-color), 1);
  --swiper-scrollbar-sides-offset: 1%;
}

.swiper[data-controls-color="white"] {
  --swiper-theme-color: 255, 255, 255;
}

.swiper-button-prev,
.swiper-button-next {
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  transition: all .2s ease-out;
  opacity: 1;
  background-color: transparent;
  border: 1px solid rgba(var(--swiper-theme-color), 1);
  border-radius: 50%;
}

.swiper-button-prev:hover,
.swiper-button-next:hover,
.swiper-button-prev:focus,
.swiper-button-next:focus {
  background-color: rgba(var(--swiper-theme-color), .1);
  opacity: 1;
}

.swiper-button-next:after, 
.swiper-button-prev:after {
  display: none;
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 70%;
  height: 70%;
  transition: all .2s ease-out;
}

.swiper-button-prev:hover svg,
.swiper-button-prev:focus svg {
  transform: translateX(-2px);
}

.swiper-button-next:hover svg,
.swiper-button-next:focus svg {
  transform: translateX(2px);
}

.swiper-pagination-fraction {
  opacity: .75;
}

.swiper-pagination-bullet {
  border: 1px solid rgba(var(--swiper-theme-color), 1);
  background-color: transparent;
}

.swiper-pagination-bullet-active {
  background-color: rgba(var(--swiper-theme-color), 1);
}

.swiper-slider {
  display: block;
}

.swiper-slider .swiper {
  opacity: 0;
  transition: all 200ms ease-out;
}

.swiper-slider .swiper.swiper-initialized {
  opacity: 1;
}

.swiper-slider .swiper-controls {
  margin-top: 1rem;
  position: relative;
  min-height: var(--swiper-navigation-size);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.swiper-slider [class*=swiper-button] {
  margin: 0;
  top: 0;
  bottom: 0;
}

.swiper-slider .swiper-button-prev {
  left: 0.5rem;
}

.swiper-slider .swiper-button-next {
  right: 0.5rem;
}

.swiper-slider .swiper-pagination {
  position: relative;
  bottom: auto;
  top: auto;
}

.swiper-slider .swiper-pagination-bullets-dynamic {
  left: auto !important;
  transform: none !important;
  margin-bottom: .375rem;
}

.swiper-slider .swiper-pagination-fraction {
}

.swiper-slider .swiper-scrollbar {
  max-width: 60vw;
  position: relative;
  bottom: auto;
  top: 0;
  left: auto;
  margin: 0 auto;
}

.swiper-slider .swiper-pagination + .swiper-scrollbar {
  margin-top: .375rem;
}

@media (max-width: 599px) {
  .swiper-slider[data-slider-partial-slides-mobile="true"] .container {
    padding: 0 !important;
    overflow: hidden;
  }
  .swiper-slider[data-slider-partial-slides-mobile="true"] .container > .swiper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1200px) {
  .swiper-slider .swiper-scrollbar { 
    max-width: 500px;
  }
}


/*
  Recaptcha page
*/
.shopify-challenge__container {
  padding: 2rem;
}

/*
  Policy pages
*/
.shopify-policy__container {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  max-width: 720px !important;
}

/*
  Shopify's system errors
*/
.errors ul {
  margin-bottom: 0;
}

/*
  Rich Text Editor (rte)
*/
.rte img {
  max-width: 100%;
  height: auto;
}

.rte p:last-child {
  margin-bottom: 0;
}


/*
  Animations
*/
.fade-in-up { animation: fade_in_up 0.5s ease-out both; }
.fade-in-down { animation: fade_in_down 0.5s ease-out both; }
.zoom-in { animation: zoom_in 0.5s ease-out both; }

@keyframes fade_in_up {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fade_in_down {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes zoom_in {
  from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  to { opacity: 1; }
}

/*
  Offcanvas menu
*/
#offcanvas-menu {
  box-shadow: none;
}

#offcanvas-menu .offcanvas-body {
  padding-top: 0;
  border-top: 1px solid rgba(var(--bs-body-color-rgb), .1);
}

#offcanvas-menu .offcanvas-footer {
  border-top: none;
  background-color: rgba(var(--bs-primary-rgb), .05);
}

#offcanvas-menu .social-icons {
  border-radius: 50rem;
  background-color: rgba(var(--bs-body-color-rgb), .05);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.accordion-nav {
  flex-direction: column;
}

.accordion-nav .nav-item {
  border-top: none;
  border-bottom: 1px solid rgba(var(--bs-body-color-rgb), .1);
}

.accordion-nav .nav-link {
  padding: .75rem 0;
  border-radius: 0;
  background-color: transparent;
}

.accordion-nav .nav-link.active {
  background-color: transparent;
  color: var(--bs-primary);
}

.accordion-nav .nav-link[aria-expanded="true"] {
  border-bottom-color: transparent;
}

.accordion-nav .nav-link[data-bs-toggle="collapse"] {
  position: relative;
}

.accordion-nav .nav-link[data-bs-toggle="collapse"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0; 
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  background-image: var(--icon-chevron-down);
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform 0.2s ease-in-out;
}

.accordion-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after { 
  transform: translateY(-50%) rotate(-180deg);
}

.accordion-nav .nav-link svg {
  margin-right: .5rem;
}

.accordion-nav .dropdown-item {
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: .5em;
  --bs-dropdown-item-border-radius: var(--bs-border-radius);
  --bs-dropdown-link-active-bg: trasparent;
  --bs-dropdown-link-active-color: var(--bs-primary);
}

.accordion-nav .nav {
  background-color: rgba(var(--bs-body-color-rgb), .05);
  padding: .5rem 0;
  margin: 0 0 1rem;
  border-radius: var(--bs-border-radius);
}

.collections-nav {
  flex-wrap: nowrap;
  overflow: auto;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: .5rem 0;
  background-color: rgba(var(--bs-body-color-rgb), .05);
}

.collections-nav .nav-item {
  width: 40vw;
  max-width: 200px;
  flex-shrink: 0;
}

.collections-nav .nav-item:first-child {
  margin-left: .5rem;
}

.collections-nav .nav-item:last-child {
  margin-right: .5rem;
}

[dir="rtl"] .collections-nav .nav-item:first-child {
  margin-left: 0;
  margin-right: .5rem;
}

.collections-nav .nav-link {
  font-size: .9rem;
  padding: 0.5rem;
  background: transparent;
}


/*
  Localization form
*/
.shopify-localization-form .list-group-item-action {
  display: flex;
  align-items: center;
  padding: 0.75rem 0.75rem;
  border: none;
  border-radius: var(--bs-border-radius);
}

.shopify-localization-form .localization-form-item-img {
  display: flex;
}

.shopify-localization-form .localization-form-item-text {
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}


/*
  Payment icons
*/
.payment-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
}

.payment-icons svg {
  display: flex;
  height: 20px;
  width: 100%;
  margin: .1rem;
}

.payment-icons-text {
  display: block;
  line-height: normal;
  opacity: .7;
  margin-top: -0.3rem;
}


/*
  Social media icons
*/
ul.social-icons {
  display: inline-flex;
  padding: 0;
  margin: 0;
}

ul.social-icons a {
  display: inline-flex;
  padding: 0.6rem;
  transition: all 0.2s ease-out;
}

ul.social-icons a:hover,
ul.social-icons a:focus {
  transform: scale(1.1);
}

ul.social-icons a:active {
  transform: scale(1.2);
}


/*
  QTY (Quantity) Wrapper
*/
.qty-input-wrapper {
  position: relative;
}

.qty-input-wrapper .btn {
  position: absolute;
  top: 0;
  padding: 0;
  width: 2rem;
  height: 100%;
  box-shadow: none;
  border: none; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.qty-input-wrapper .btn:focus-visible {
  box-shadow: var(--bs-focus-box-shadow);
}

.qty-input-wrapper .btn-qty-minus {
  left: 0;
}

.qty-input-wrapper .btn-qty-plus {
  right: 0
}

.qty-input-wrapper .form-control {
  text-align: center;
  padding-left: 2rem;
  padding-right: 2rem;
  width: 7rem;
  appearance: textfield;
}

.qty-input-wrapper .form-control-sm {
  width: 6rem;
}

.qty-input-wrapper .form-control-lg {
  width: 8rem;
}

.qty-input-wrapper .form-control::-webkit-outer-spin-button,
.qty-input-wrapper .form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}


/*
  Blog/Article
*/
.blog-header {
  border-top-style: solid;
  border-bottom-style: solid;
  text-align: center;
}

.blog-main {
  border-top-style: solid;
  border-bottom-style: solid;
}

.blog-utilities {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-card-link {
  text-decoration: none;
  color: currentColor;
}

.article-card-title {
  transition: color 200ms ease-out;
}

.article-card-link:hover .article-card-title,
.article-card-link:focus .article-card-title {
  color: var(--bs-primary);
}

.article-card-img-wrapper img {
  width: 100%;
  transition: all .2s ease-out;
}

a:hover .article-card-img-wrapper img {
  opacity: .85;
}

.article-card-tags {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#offcanvas-blog-tags {
  width: 320px;
}

#offcanvas-blog-tags .list-group-item-action {
  border-bottom-style: dashed;
  border-bottom-width: 1px;
}







/* =========================================
   MAXDAL — Luxury Button Style (KondaSoft)
   Paste at the END of base.css
========================================= */

/* PRIMARY = luxury CTA */
.btn-primary {
  --bs-btn-color: rgba(var(--maxdal-silver), 1);
  --bs-btn-bg: rgba(var(--maxdal-black-1), 1);
  --bs-btn-border-color: rgba(var(--maxdal-titanium), 0.45);

  --bs-btn-hover-color: rgba(255, 255, 255, 1);
  --bs-btn-hover-bg: rgba(18, 18, 18, 1);
  --bs-btn-hover-border-color: rgba(var(--maxdal-titanium), 0.85);

  --bs-btn-active-color: rgba(255, 255, 255, 1);
  --bs-btn-active-bg: rgba(22, 22, 22, 1);
  --bs-btn-active-border-color: rgba(var(--maxdal-titanium), 0.9);

  --bs-btn-focus-shadow-rgb: var(--maxdal-titanium);

  /* the theme already uses background-image: var(--bs-btn-bg-gradient); in .btn */
  --bs-btn-bg-gradient: linear-gradient(
    180deg,
    rgba(var(--maxdal-black-1), 1) 0%,
    rgba(var(--maxdal-black-2), 1) 100%
  );

  border-width: 1px;
  border-style: solid;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.85rem 1.8rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

/* luxury hover: subtle lift + soft glow */
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(var(--maxdal-titanium), 0.18),
              0 10px 24px rgba(0,0,0,0.35);
}

/* SECONDARY = outline luxury button */
.btn-outline-primary {
  --bs-btn-color: rgba(var(--maxdal-silver), 1);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(var(--maxdal-titanium), 0.55);

  --bs-btn-hover-color: rgba(255, 255, 255, 1);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.06);
  --bs-btn-hover-border-color: rgba(var(--maxdal-titanium), 0.9);

  --bs-btn-active-color: rgba(255, 255, 255, 1);
  --bs-btn-active-bg: rgba(255, 255, 255, 0.09);
  --bs-btn-active-border-color: rgba(var(--maxdal-titanium), 0.95);

  --bs-btn-focus-shadow-rgb: var(--maxdal-titanium);

  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.85rem 1.8rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(var(--maxdal-titanium), 0.15),
              0 10px 24px rgba(0,0,0,0.30);
}

/* Optional: make ALL buttons feel more premium */
.btn {
  text-decoration: none;
}

/* =========================================
   MAXDAL — Luxury Dropdown Menu
========================================= */

.dropdown-menu {
  background: linear-gradient(180deg, #0b0b0b 0%, #000 100%);
  border: 1px solid rgba(190, 195, 205, 0.25);
  border-radius: 10px;
  padding: 0.5rem;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04);
  backdrop-filter: blur(6px);
  --bs-dropdown-border-color: rgba(var(--maxdal-titanium), 0.25);
  --bs-dropdown-link-hover-bg: rgba(255,255,255,0.06);
  --bs-dropdown-link-active-bg: rgba(255,255,255,0.10);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-divider-bg: rgba(255,255,255,0.08);
}

/* dropdown item */
.dropdown-item {
  color: rgba(230,230,230,0.85);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  transition: all 0.18s ease;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 0.78rem;
}

/* hover effect */
.dropdown-item:hover,
.dropdown-item:focus {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02)
  );
  color: #ffffff;
  transform: translateX(2px);
}

/* active item */
.dropdown-item.active,
.dropdown-item:active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

/* divider */
.dropdown-divider {
  border-color: rgba(255,255,255,0.08);
  margin: 0.4rem 0.3rem;
}

/* dropdown titles (megamenu headings) */
.dropdown-item-title {
  color: rgba(200,205,215,0.9);
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
}

/* subtle open animation */
.dropdown-menu.show {
  animation: maxdalDropdown 0.18s ease-out both;
}

@keyframes maxdalDropdown {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================================
   MAXDAL — Product card: luxury dropdown + titanium price
   Paste into your theme CSS (base.css/theme.css) OR inside the section/snippet style block.
   This targets the typical theme classes used by variant dropdown + price.
================================ */

/* ---------- PRICE (turn green -> big bold titanium) ---------- */
/* Common Shopify/theme price markup */
.product-card .price,
.product-card .product-price,
.product-card .price__container,
.product-card .product-card-price{
  font-weight: 700;
}

/* Current price text (often .price-item--sale or .price-item--regular) */
.product-card .price-item,
.product-card .price__current,
.product-card .price-item--sale,
.product-card .product-card-price .money{
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800 !important;
  letter-spacing: .02em;
  line-height: 1.05;

  /* Titanium gradient text */
  background: var(--maxdal-titanium);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;

  text-shadow: 0 10px 28px rgba(0,0,0,.35);
}

/* If theme forces green via inline or strong specificity, hard override common sale color hooks */
.product-card .price-item--sale,
.product-card .price--on-sale .price-item,
.product-card .price__sale .price-item{
  color: transparent !important;
}

/* Compare-at price stays muted */
.product-card .price-item--regular.price-item--compare,
.product-card .price__compare,
.product-card s.price-item,
.product-card .price-item--compare{
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.45) !important; /* tweak if on light bg */
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  opacity: .9;
}

/* ---------- Variant dropdown (size menu) ---------- */
/* Targets the common select element used in product-card-form */
.product-card select,
.product-card .product-form__input select,
.product-card .product-card-form select,
.product-card .product-form select{
  width: 100%;
  appearance: none;
  -webkit-appearance: none;

  padding: 14px 44px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(20,20,22,.72), rgba(0,0,0,.72));
  color: rgba(255,255,255,.92);

  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-weight: 700;
  letter-spacing: .04em;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Focus state */
.product-card select:focus,
.product-card select:focus-visible{
  outline: none;
  border-color: rgba(255,255,255,.28);
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 3px rgba(180,190,205,.18);
  transform: translateY(-1px);
}

/* Disabled */
.product-card select:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Add a luxury chevron (works without changing HTML) */
.product-card .product-form__input,
.product-card .product-card-form,
.product-card form{
  position: relative;
}
.product-card .product-form__input::after,
.product-card .product-card-form::after,
.product-card form[data-type="add-to-cart-form"]::after{
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 14px;
  color: rgba(255,255,255,.75);
  text-shadow: 0 10px 25px rgba(0,0,0,.4);
}

/* Option list styling (limited support per browser, but helps) */
.product-card option{
  background: #0b0b0d;
  color: rgba(255,255,255,.92);
}

/* ---------- Small polish: spacing between price and dropdown ---------- */
.product-card .product-card-price,
.product-card .price{
  margin-bottom: 12px;
}

/* ================================
   FIX 1 — Force sale price to titanium (kills green)
================================ */

/* Common "green" hooks in themes */
.product-card .text-success,
.product-card .price .text-success,
.product-card .price__sale .text-success,
.product-card .product-card-price .text-success,
.product-card .price-item--sale,
.product-card .price__current,
.product-card .price__sale .price-item,
.product-card .price-item.price-item--sale {
  /* titanium gradient text */
  background: linear-gradient(135deg,#f5f7fa 0%,#cfd6de 22%,#8f9aa6 55%,#eef2f6 78%,#b6c0cb 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;

  /* IMPORTANT: this is what usually blocks gradient on iOS/Safari */
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;

  font-size: clamp(22px, 2.2vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  line-height: 1.05 !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
}

/* Compare-at stays muted */
.product-card .price__compare,
.product-card .price-item--compare,
.product-card s,
.product-card s .money {
  color: rgba(255,255,255,.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,.45) !important;
  font-weight: 700 !important;
  text-decoration-thickness: 2px;
}

/* ================================
   FIX 2 — Real dropdown arrow on the SELECT
================================ */

/* target the select in the product card form */
.product-card select,
.product-card .product-form__input select,
.product-card .product-card-form select,
.product-card .product-form select {
  appearance: none !important;
  -webkit-appearance: none !important;

  padding-right: 52px !important; /* room for arrow */
  border-radius: 18px !important;

  /* Draw arrow via inline SVG */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.85)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 18px 18px !important;

  /* keep your luxe look */
  background-color: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.05) !important;
}

/* If your theme wraps select in a heavy styled container, ensure it doesn't cover the arrow */
.product-card .product-form__input,
.product-card .product-card-form {
  position: relative;
}

/* =========================================
   MAXDAL — FIX: titanium sale price + luxury select arrow
   Paste at VERY END of base.css
========================================= */

/* 2) Make SALE price big + titanium (even if theme tries to force green) */
.product-card .text-success,
.product-card .price .text-success,
.product-card .price-item--sale,
.product-card .price__sale .price-item,
.product-card .price__current,
.product-card .product-card-price .money,
.product-card .product-card-price .price-item{
  color: rgb(var(--maxdal-titanium)) !important;
  -webkit-text-fill-color: rgb(var(--maxdal-titanium)) !important;
  background: none !important;

  font-size: clamp(22px, 2.2vw, 30px) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  line-height: 1.05 !important;
}

/* Compare-at stays muted */
.product-card .price__compare,
.product-card .price-item--compare,
.product-card s,
.product-card s .money{
  color: rgba(255,255,255,.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,.45) !important;
  font-weight: 700 !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* 3) Luxury dropdown styling */
.product-card .form-select,
.product-card select{
  background-color: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 18px !important;
  padding: 14px 52px 14px 16px !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.05) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 4) REAL arrow (uses the theme's mechanism) */
.form-select{
  --bs-form-select-bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.85)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
}


/* =========================================
   MAXDAL — Luxury Fullscreen Offcanvas Menu
   Targets: #offcanvas-menu
   Paste at END of base.css
========================================= */

#offcanvas-menu{
  /* full-screen */
  --bs-offcanvas-width: 100vw;
  width: 100vw !important;

  /* luxury backdrop */
  background: radial-gradient(900px 500px at 10% 0%,
              rgba(255,255,255,.08), transparent 60%),
              linear-gradient(180deg,
              rgba(8,8,10,.92) 0%,
              rgba(0,0,0,.96) 100%) !important;

  color: rgba(255,255,255,.92);
  border: none !important;

  /* glass feel */
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);

  /* remove default shadow look */
  box-shadow: none !important;
}

/* remove the default top divider you had */
#offcanvas-menu .offcanvas-body{
  border-top: none !important;
  padding-top: 3.5rem; /* space below header */
  padding-bottom: 2.25rem;
}

/* header polish */
#offcanvas-menu .offcanvas-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 1.25rem 1.25rem;
}

/* make close button look premium */
#offcanvas-menu .btn-close{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
#offcanvas-menu .btn-close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

/* ====== NAV LIST → BIG LUXURY LINKS ====== */
/* Your mobile menu uses .accordion-nav .nav-link */
#offcanvas-menu .accordion-nav{
  gap: 6px;
}

#offcanvas-menu .accordion-nav .nav-item{
  border: none !important;
  margin: 0 !important;
}

/* remove separators + default padding */
#offcanvas-menu .accordion-nav .nav-link{
  border-bottom: none !important;
  padding: 14px 6px !important;
  background: transparent !important;

  /* luxury typography */
  font-size: clamp(34px, 7vw, 58px);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.02;

  /* right aligned like your example */
  text-align: right;
  justify-content: flex-end;

  color: rgba(255,255,255,.92) !important;

  /* smooth hover */
  border-radius: 18px;
  transition: transform .22s ease, background .22s ease, opacity .22s ease;
}

/* hover/active “luxury slide” */
#offcanvas-menu .accordion-nav .nav-link:hover,
#offcanvas-menu .accordion-nav .nav-link:focus{
  background: rgba(255,255,255,.06) !important;
  transform: translateX(-6px);
}

/* subtle underline sweep */
#offcanvas-menu .accordion-nav .nav-link{
  position: relative;
}
#offcanvas-menu .accordion-nav .nav-link::after{
  content:"";
  position:absolute;
  right: 10px;
  bottom: 10px;
  width: min(240px, 40vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .22s ease;
  opacity:.85;
}
#offcanvas-menu .accordion-nav .nav-link:hover::after{
  transform: scaleX(1);
}

/* remove the chevron for dropdown items if you want it ultra-clean */
#offcanvas-menu .accordion-nav .nav-link[data-bs-toggle="collapse"]::after{
  display: none !important;
}

/* ====== STAGGERED ANIMATION ====== */
#offcanvas-menu .accordion-nav .nav-link{
  opacity: 0;
  transform: translateY(14px);
}

/* when menu is open + armed by JS, animate in */
#offcanvas-menu.is-animating .accordion-nav .nav-link{
  opacity: 1;
  transform: translateY(0);
}

/* stagger delays (supports up to ~10 items) */
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(1) .nav-link{ transition-delay: .06s; }
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(2) .nav-link{ transition-delay: .10s; }
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(3) .nav-link{ transition-delay: .14s; }
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(4) .nav-link{ transition-delay: .18s; }
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(5) .nav-link{ transition-delay: .22s; }
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(6) .nav-link{ transition-delay: .26s; }
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(7) .nav-link{ transition-delay: .30s; }
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(8) .nav-link{ transition-delay: .34s; }
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(9) .nav-link{ transition-delay: .38s; }
#offcanvas-menu.is-animating .accordion-nav .nav-item:nth-child(10) .nav-link{ transition-delay: .42s; }

/* ====== SOCIALS at bottom-right (like example) ====== */
#offcanvas-menu .offcanvas-footer{
  background: transparent !important;
  border-top: none !important;
  padding: 1.25rem 1.25rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* remove pill background you had */
#offcanvas-menu .social-icons{
  background: transparent !important;
  padding: 0 !important;
}

/* make social icons minimal + luxe */
#offcanvas-menu ul.social-icons a{
  padding: .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  margin-left: .5rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
#offcanvas-menu ul.social-icons a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #offcanvas-menu *{ transition: none !important; }
  #offcanvas-menu .accordion-nav .nav-link{ opacity: 1 !important; transform: none !important; }
}

/* =========================
   NEWSLETTER (section)
========================= */

/* Give the newsletter a luxury "panel" feel without changing HTML */
.newsletter{
  position: relative;
  overflow: hidden;
}

.newsletter::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 420px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(600px 380px at 80% 30%, rgba(190,196,204,.10), transparent 55%),
    linear-gradient(180deg, rgba(var(--maxdal-ink-rgb), .92) 0%, rgba(0,0,0,.96) 100%);
  z-index:0;
}

.newsletter::after{
  content:"";
  position:absolute;
  inset:0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index:0;
  pointer-events:none;
}

.newsletter > .container{
  position: relative;
  z-index: 1;
}

/* Make header copy feel more premium */
.newsletter .subtitle,
.newsletter .description{
  opacity: .82;
}

.newsletter .heading,
.newsletter h1,
.newsletter h2,
.newsletter h3{
  letter-spacing: .02em;
}

/* Form spacing + max width to look intentional */
.newsletter-form{
  max-width: 920px;
  margin: 0 auto;
}

/* Input wrapper polish (works with your .form-floating + icon) */
.newsletter .form-floating{
  position: relative;
  margin-top: 1rem !important; /* override mt-n3 chaos */
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--maxdal-border);
  background: rgba(255,255,255,.03);
  box-shadow: var(--maxdal-shadow-soft), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* subtle hover lift */
.newsletter .form-floating:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--maxdal-titanium-rgb), .35);
  box-shadow: var(--maxdal-shadow), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Input itself */
.newsletter .form-floating .form-control{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(var(--maxdal-silver-rgb), .92) !important;
  border-radius: 14px !important;
  padding-left: 3.25rem !important; /* space for icon */
  padding-right: 7rem !important;   /* space for button */
  min-height: 58px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.newsletter .form-floating .form-control::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* Floating label */
.newsletter .form-floating label{
  color: rgba(255,255,255,.70) !important;
}

/* Icon */
.newsletter .form-floating-icon{
  position:absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .85;
  pointer-events:none;
}

/* Submit button: compact, aligned, premium */
.newsletter .form-floating .btn{
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  height: 46px;
  min-width: 64px;
  padding: 0 18px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(var(--maxdal-titanium-rgb), .35) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.45);
}

/* Button hover glow */
.newsletter .form-floating .btn:hover{
  box-shadow:
    0 0 0 1px rgba(var(--maxdal-titanium-rgb), .18),
    0 22px 60px rgba(0,0,0,.55);
  transform: translateY(-50%) translateY(-1px);
}

/* Notice text polish */
.newsletter .newsletter-notice{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  opacity: .72 !important;
  letter-spacing: .02em;
}

/* Mobile: stack nicely */
@media (max-width: 599px){
  .newsletter-form{ max-width: 100%; }
  .newsletter .form-floating{ padding: 10px; border-radius: 16px; }
  .newsletter .form-floating .form-control{
    padding-left: 3rem !important;
    padding-right: 1rem !important;
    min-height: 56px;
  }
  .newsletter .form-floating .btn{
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    margin-top: 10px;
    height: 52px;
    justify-content: center;
  }
}

/* =========================
   FOOTER
========================= */

#footer{
  position: relative;
  overflow: hidden;
}

/* Luxury background + subtle vignette */
#footer::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(700px 480px at 85% 35%, rgba(190,196,204,.10), transparent 55%),
    linear-gradient(180deg, rgba(var(--maxdal-ink-rgb), .94) 0%, rgba(0,0,0,.98) 100%);
  z-index:0;
}

#footer .container{
  position: relative;
  z-index: 1;
}

/* Footer block titles */
#footer .title span,
#footer .heading{
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .9;
}

/* Desktop columns spacing */
#footer-desktop .footer-block{
  padding-top: 12px;
}

/* Links feel “designed” */
#footer a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
}

#footer a:hover{
  color: rgba(255,255,255,.96);
  transform: translateX(2px);
}

/* Mobile accordion: more premium + better spacing */
#footer-mobile .collapse-wrapper{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

#footer-mobile .collapse-wrapper:last-child{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

#footer-mobile .collapse-wrapper [data-bs-toggle=collapse]{
  padding: 1.05rem 0 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .92;
}

#footer-mobile .collapse-inner{
  padding: .25rem 0 1.25rem !important;
  opacity: .92;
}

/* Social icons: pill + glow */
#footer .social-icons-wrapper{
  display:flex;
  justify-content:center;
}

@media (min-width: 1200px){
  #footer .social-icons-wrapper{ justify-content:flex-start; }
}

#footer ul.social-icons{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#footer ul.social-icons a{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin: 0 6px;
}

#footer ul.social-icons a:hover{
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(var(--maxdal-titanium-rgb), .30);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 1px rgba(var(--maxdal-titanium-rgb), .12),
              0 18px 40px rgba(0,0,0,.50);
}

/* Payment icons area */
#footer .payment-icons-wrapper{
  display:flex;
  justify-content:center;
}

@media (min-width: 1200px){
  #footer .payment-icons-wrapper{ justify-content:flex-end; }
}

#footer .payment-icons{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 45px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Copyright row: fix mobile centering issues */
#footer-copyright .row{
  row-gap: 14px;
}

#footer-copyright .fs-sm{
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .78;
}

/* Make HR more premium */
#footer hr{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent) !important;
  height: 1px !important;
  opacity: 1 !important;
}

/* Nice “reveal” on scroll load (no JS, just subtle) */
@keyframes maxdal_fade_up{
  from{ opacity: 0; transform: translate3d(0, 14px, 0); }
  to{ opacity: 1; transform: translate3d(0, 0, 0); }
}
.newsletter, #footer{
  animation: maxdal_fade_up .55s ease-out both;
}


/* =========================
   NEWSLETTER (section) — FIXED + LUXE
   Paste at END of base.css
========================= */

.newsletter{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* prevents weird z-index mixing */
}

.newsletter::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(700px 420px at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(600px 380px at 80% 30%, rgba(190,196,204,.10), transparent 55%),
    linear-gradient(180deg, rgba(var(--maxdal-ink-rgb), .92) 0%, rgba(0,0,0,.96) 100%);
  z-index:0;
  pointer-events:none;
}

.newsletter::after{
  content:"";
  position:absolute;
  inset:0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index:0;
  pointer-events:none;
}

.newsletter > .container{
  position: relative;
  z-index: 1;
}

/* header polish */
.newsletter .heading,
.newsletter h1,
.newsletter h2,
.newsletter h3{
  letter-spacing: .02em;
}

.newsletter .subtitle,
.newsletter .description{
  opacity: .85;
}

/* center form + prevent “squished” look */
.newsletter-form{
  max-width: 900px;
  margin: 0 auto;
}

/* IMPORTANT: kill mt-n3 (negative margin causes layout overlap on some screens) */
.newsletter .form-floating.mt-n3{
  margin-top: 1rem !important;
}

/* Glass wrapper */
.newsletter .form-floating{
  position: relative;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(var(--maxdal-titanium-rgb), .22);
  background: rgba(255,255,255,.035);
  box-shadow:
    0 18px 45px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.newsletter .form-floating:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--maxdal-titanium-rgb), .34);
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* icon */
.newsletter .form-floating-icon{
  position:absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .85;
  pointer-events:none;
  z-index: 3;
}

/* input */
.newsletter .form-floating .form-control{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(var(--maxdal-silver-rgb), .92) !important;
  border-radius: 16px !important;
  padding-left: 3.25rem !important; /* space for icon */
  padding-right: 6.25rem !important; /* space for button */
  min-height: 60px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* FIX: stop “double text” (label + placeholder) by hiding placeholder in floating forms */
.newsletter .form-floating .form-control::placeholder{
  color: transparent !important;
}

/* better focus */
.newsletter .form-floating .form-control:focus{
  border-color: rgba(var(--maxdal-titanium-rgb), .38) !important;
  box-shadow:
    0 0 0 3px rgba(var(--maxdal-titanium-rgb), .16),
    inset 0 0 0 1px rgba(255,255,255,.05) !important;
  outline: none;
}

/* label: make it feel intentional + avoid sitting on top of text */
.newsletter .form-floating > label{
  color: rgba(255,255,255,.70) !important;
  padding-left: 3.25rem; /* aligns with text start */
}

/* OPTIONAL: if you want the label always “floated” (cleaner luxury look) */
.newsletter .form-floating > label{
  transform: scale(.85) translateY(-0.6rem) translateX(0.1rem);
  opacity: .85;
}

/* submit button */
.newsletter .form-floating .btn{
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translate3d(0,-50%,0); /* stable base transform */
  height: 48px;
  min-width: 64px;
  padding: 0 18px !important;
  border-radius: 14px !important;

  /* ensure it’s clickable */
  z-index: 4;
  pointer-events: auto;

  /* micro glow */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 18px 40px rgba(0,0,0,.45);
  transition: box-shadow .18s ease, filter .18s ease, transform .18s ease;
  will-change: transform;
}

/* FIX: stop the “jump” caused by global .btn hover transforms */
.newsletter .form-floating .btn:hover,
.newsletter .form-floating .btn:focus{
  transform: translate3d(0,-50%,0) scale(1.03) !important;
  box-shadow:
    0 0 0 1px rgba(var(--maxdal-titanium-rgb), .20),
    0 26px 70px rgba(0,0,0,.60);
  filter: brightness(1.05);
}

.newsletter .form-floating .btn:active{
  transform: translate3d(0,-50%,0) scale(0.99) !important;
}

/* notice */
.newsletter .newsletter-notice{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  opacity: .72 !important;
  letter-spacing: .02em;
}

/* mobile stack */
@media (max-width: 599px){
  .newsletter-form{ max-width: 100%; }

  .newsletter .form-floating{
    padding: 12px;
    border-radius: 18px;
  }

  .newsletter .form-floating .form-control{
    padding-left: 3rem !important;
    padding-right: 1rem !important;
    min-height: 58px;
  }

  .newsletter .form-floating .btn{
    position: relative;
    right: auto;
    top: auto;
    transform: none !important;
    width: 100%;
    margin-top: 10px;
    height: 52px;
    justify-content: center;
  }

  .newsletter .form-floating .btn:hover,
  .newsletter .form-floating .btn:focus{
    transform: scale(1.02) !important;
  }
}

/* =========================================================
   MAXDAL — Media With Text (Luxury Glassmorphism)
   SAFE: scoped to .media-with-text-wrapper only
   Paste at END of base.css
========================================================= */

/* 1) Section wrapper: deep luxury background */
.media-with-text-wrapper .media-with-text{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* subtle vignette + titanium glow */
.media-with-text-wrapper .media-with-text::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 15% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 480px at 85% 35%, rgba(var(--maxdal-titanium), .10), transparent 55%),
    linear-gradient(180deg, rgba(var(--maxdal-black-1), .92) 0%, rgba(var(--maxdal-black-2), .96) 100%);
  opacity: .95;
}

/* keep content above overlay */
.media-with-text-wrapper .media-with-text > .container{
  position: relative;
  z-index: 1;
}

/* 2) Make the row feel like a glass “card” */
.media-with-text-wrapper .media-with-text .row{
  border-radius: 22px;
  border: 1px solid rgba(var(--maxdal-titanium), .22);
  background: rgba(255,255,255,.035);

  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.05);

  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);

  padding: clamp(16px, 2vw, 28px);
}

/* spacing on mobile so it doesn’t feel cramped */
@media (max-width: 599px){
  .media-with-text-wrapper .media-with-text .row{
    padding: 16px;
    border-radius: 18px;
  }
}

/* 3) Media (image/video): premium frame */
.media-with-text-wrapper .media-with-text img,
.media-with-text-wrapper .media-with-text video,
.media-with-text-wrapper .media-with-text iframe{
  border-radius: 18px !important;
  box-shadow:
    0 25px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06);
}

/* if theme adds img-thumbnail background, soften it */
.media-with-text-wrapper .media-with-text .img-thumbnail{
  background-color: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(var(--maxdal-titanium), .18) !important;
  border-radius: 18px !important;
}

/* 4) Typography: luxury, clean hierarchy */
.media-with-text-wrapper .media-with-text .subtitle{
  opacity: .78;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
}

.media-with-text-wrapper .media-with-text .title{
  margin-top: .2rem;
  margin-bottom: .6rem;
  letter-spacing: -.0.01em;
  text-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.media-with-text-wrapper .media-with-text .description{
  opacity: .86;
  line-height: 1.7;
  max-width: 56ch;
}

/* 5) Buttons in this section only: luxury glass CTA */
.media-with-text-wrapper .media-with-text .btn{
  text-decoration: none;
  border-radius: 14px;
  padding: 0.9rem 1.9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 650;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  will-change: transform;
}

/* Primary button: black glass + titanium edge */
.media-with-text-wrapper .media-with-text .btn.btn-primary{
  color: rgba(var(--maxdal-silver), 1) !important;
  background: linear-gradient(180deg, rgba(var(--maxdal-black-1), .92), rgba(var(--maxdal-black-2), .96)) !important;
  border: 1px solid rgba(var(--maxdal-titanium), .42) !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 18px 45px rgba(0,0,0,.45);
}

.media-with-text-wrapper .media-with-text .btn.btn-primary:hover,
.media-with-text-wrapper .media-with-text .btn.btn-primary:focus{
  transform: translateY(-1px);
  border-color: rgba(var(--maxdal-titanium), .78) !important;
  box-shadow:
    0 0 0 1px rgba(var(--maxdal-titanium), .18),
    0 28px 75px rgba(0,0,0,.60);
}

/* Outline button: glass outline */
.media-with-text-wrapper .media-with-text .btn.btn-outline-primary{
  color: rgba(var(--maxdal-silver), 1) !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(var(--maxdal-titanium), .50) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 18px 45px rgba(0,0,0,.35);
}

.media-with-text-wrapper .media-with-text .btn.btn-outline-primary:hover,
.media-with-text-wrapper .media-with-text .btn.btn-outline-primary:focus{
  transform: translateY(-1px);
  border-color: rgba(var(--maxdal-titanium), .85) !important;
  background: rgba(255,255,255,.07) !important;
}

/* keyboard focus ring */
.media-with-text-wrapper .media-with-text .btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--maxdal-titanium), .18), 0 18px 45px rgba(0,0,0,.45);
}

/* motion safety */
@media (prefers-reduced-motion: reduce){
  .media-with-text-wrapper .media-with-text *{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================
   MAXDAL — Search Page (FINAL)
   Paste at VERY END of base.css
========================================= */

.search-main{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(36px, 5vw, 70px) 0;
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(700px 480px at 85% 35%, rgba(190,196,204,.08), transparent 55%),
    linear-gradient(180deg, rgba(8,8,10,.92) 0%, rgba(0,0,0,.96) 100%);
}

/* Title area */
.search-main .section-header{
  margin-bottom: 1.75rem !important;
}

.search-main .section-header .title,
.search-main .section-header,
.search-main .section-header p{
  color: rgba(255,255,255,.92) !important;
}

.search-main .section-header .title{
  text-shadow: 0 18px 60px rgba(0,0,0,.55);
  letter-spacing: .02em;
}

/* Make header content look intentional (no “floating in empty space”) */
.search-main .section-header .container{
  max-width: 760px !important;
  padding: 26px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* Search bar wrapper */
.search-main .search-form .form-control-wrapper{
  position: relative;
  margin-top: 14px;
}

/* Input */
.search-main .search-form .form-control{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 18px !important;
  min-height: 60px;
  padding: 16px 68px 16px 18px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.search-main .search-form .form-control::placeholder{
  color: rgba(255,255,255,.55) !important; /* keep placeholder visible */
}

/* Label */
.search-main .search-form .form-floating > label{
  color: rgba(255,255,255,.70) !important;
  padding-left: 18px;
}

/* Button (force override your global .search-form button rules) */
.search-main .search-form .form-control-wrapper button[type="submit"]{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 48px !important;
  height: 48px !important;

  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;

  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.90) !important;

  opacity: 1 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 18px 45px rgba(0,0,0,.45) !important;

  /* kill theme behavior that makes it look “attached” */
  border-top-left-radius: 14px !important;
  border-bottom-left-radius: 14px !important;
}

.search-main .search-form .form-control-wrapper button[type="submit"]:hover,
.search-main .search-form .form-control-wrapper button[type="submit"]:focus{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(190,196,204,.35) !important;
}

/* Results count */
.search-main .search-product-count{
  color: rgba(255,255,255,.78);
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* Mobile */
@media (max-width: 599px){
  .search-main .section-header .container{
    padding: 22px 16px;
    border-radius: 18px;
  }
  .search-main .search-form .form-control{
    min-height: 56px;
  }
}

/* =========================================
   FIX — Remove floating-label background patch
   (Newsletter + Search)
========================================= */

/* Newsletter */
.newsletter .form-floating > label,
.newsletter .form-floating > label::after {
  background: transparent !important;
}

/* Search */
.search-main .form-floating > label,
.search-main .form-floating > label::after {
  background: transparent !important;
}

/* Optional: make sure label never blocks clicks */
.newsletter .form-floating > label,
.search-main .form-floating > label {
  pointer-events: none;
}

/* =========================
   FIX: Newsletter input text vertical centering (iOS + floating)
========================= */
.newsletter .form-floating > label{
  display: none !important; /* kill floating label entirely */
}

.newsletter .form-floating .form-control{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 60px !important;
  min-height: 60px !important;
  line-height: 60px !important; /* perfect vertical centering */
}

/* bring placeholder back since label is gone */
.newsletter .form-floating .form-control::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* =========================
   FIX: Search double placeholder (form-floating)
========================= */
.search-main .search-form .form-floating > label{
  display: none !important;
}
.search-main .search-form .form-floating .form-control::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* =========================================
   FIX: Header menu (Bootstrap Offcanvas) not opening
   Paste at VERY END of base.css
========================================= */

/* Don't force z-index on global layout wrappers */
#header-group,
#footer-group,
main,
.shopify-section,
header,
footer,
#MainContent{
  z-index: auto !important;
}

/* Ensure header stays clickable */
#header-group,
header{
  position: relative !important;
  z-index: 10 !important;
}

/* Force offcanvas + backdrop above everything */
.offcanvas{
  z-index: 1200 !important;
}

.offcanvas-backdrop{
  z-index: 1190 !important;
}

/* Make sure decorative overlays never block clicks */
.featured-products::before,
.newsletter::before,
.newsletter::after,
.faq::before,
.media-with-text-wrapper .media-with-text::before,
.search-main::before{
  pointer-events: none !important;
}

/* =========================================
   MAXDAL — FINAL OVERRIDES (END OF FILE)
========================================= */

/* --- Never let header decorations block clicks --- */
.maxdal-ph-bg,
.maxdal-ph-grain,
.maxdal-ph-orbs,
.maxdal-ph-media::after{
  pointer-events: none !important;
}

/* --- Product card price: ALWAYS titanium gradient (kills green) --- */
.product-card .text-success,
.product-card .price .text-success,
.product-card .price-item--sale,
.product-card .price__sale .price-item,
.product-card .price__current,
.product-card .product-card-price .money,
.product-card .product-card-price .price-item,
.product-card .price-item{
  background: var(--maxdal-titanium-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;

  font-size: clamp(22px, 2.2vw, 30px) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  line-height: 1.05 !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
}

/* compare-at muted */
.product-card .price__compare,
.product-card .price-item--compare,
.product-card s,
.product-card s .money{
  color: rgba(255,255,255,.45) !important;
  -webkit-text-fill-color: rgba(255,255,255,.45) !important;
  font-weight: 700 !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* --- Product card select: luxe + real arrow (NO background shorthand) --- */
.product-card select,
.product-card .form-select,
.product-card .product-form__input select,
.product-card .product-card-form select{
  appearance: none !important;
  -webkit-appearance: none !important;

  border-radius: 18px !important;
  padding: 14px 52px 14px 16px !important;

  background-color: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;

  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.05) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.85)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 18px 18px !important;
}

.product-card select:focus,
.product-card .form-select:focus{
  outline: none !important;
  border-color: rgba(var(--maxdal-titanium-rgb), .38) !important;
  box-shadow:
    0 0 0 3px rgba(var(--maxdal-titanium-rgb), .16),
    inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

/* --- Offcanvas stacking: keep it above overlays --- */
.offcanvas{ z-index: 1200 !important; }
.offcanvas-backdrop{ z-index: 1190 !important; }

/* If any section overlays exist, they must never catch clicks */
.featured-products::before,
.newsletter::before,
.newsletter::after,
.faq::before,
.media-with-text-wrapper .media-with-text::before,
.search-main::before{
  pointer-events: none !important;
}

navbar-wrapper{
  display: block;              /* critical for custom elements */
  position: relative;
  z-index: 50;
  isolation: auto;             /* DO NOT isolate */
}
/* =========================================================
   MAXDAL — LUXURY FAQ (Bootstrap Accordion)
   Targets your section wrapper: .faq
   Paste at the VERY END of base.css / theme.css
========================================================= */
/* ---------- Section background polish ---------- */
.faq{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* subtle premium vignette + glow */
.faq::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
  pointer-events:none;
  background: transparent;
  opacity: .95;
}

/* keep content above overlay */
.faq > .container{
  position: relative;
  z-index: 1;
}

/* ---------- Accordion container: glass card ---------- */
.faq .accordion{
  border-radius: 18px;
  border: 1px solid rgba(var(--maxdal-titanium-rgb), .18);
  background: rgba(255,255,255,.035);
  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  overflow: hidden;
}

/* ---------- Accordion items ---------- */
.faq .accordion-item{
  background: transparent;
  border: none;
}

/* premium separators */
.faq .accordion-item + .accordion-item{
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ---------- Accordion button (question row) ---------- */
.faq .accordion-button{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;

  padding: 1.25rem 1.25rem;
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1.15;

  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

/* remove Bootstrap harsh focus */
.faq .accordion-button:focus{
  box-shadow: none;
}

/* keyboard focus = luxe ring */
.faq .accordion-button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--maxdal-titanium-rgb), .18);
  border-radius: 14px;
}

/* hover = subtle glass highlight + micro lift */
.faq .accordion-button:hover{
  background: rgba(255,255,255,.05) !important;
  transform: translateX(2px);
}

/* open state */
.faq .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.96) !important;
}

/* ---------- Replace default chevron with premium one ---------- */
.faq .accordion-button::after{
  /* Kill Bootstrap default and use our own inline SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(255,255,255,0.88)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-size: 18px 18px !important;
  width: 18px;
  height: 18px;

  /* titanium-ish glow */
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
  opacity: .85;

  transition: transform .22s ease, opacity .22s ease;
}

/* rotate when open */
.faq .accordion-button:not(.collapsed)::after{
  transform: rotate(-180deg);
  opacity: 1;
}

/* ---------- Accordion body (answer) ---------- */
.faq .accordion-body{
  padding: 0 1.25rem 1.25rem 1.25rem;
  color: rgba(255,255,255,.78);
  font-size: 1rem;
  line-height: 1.65;
}

/* Make rte links feel premium */
.faq .accordion-body a{
  color: rgba(var(--maxdal-titanium-rgb), 1);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--maxdal-titanium-rgb), .35);
  transition: opacity .18s ease, border-color .18s ease;
}
.faq .accordion-body a:hover{
  opacity: .9;
  border-bottom-color: rgba(var(--maxdal-titanium-rgb), .65);
}

/* ---------- Optional: title/description styling inside this section ---------- */
.faq .subtitle{
  opacity: .75;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.faq .title,
.faq .heading{
  letter-spacing: .02em;
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce){
  .faq *{
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Mobile spacing polish ---------- */
@media (max-width: 599px){
  .faq .accordion-button{
    padding: 1.05rem 1rem;
  }
  .faq .accordion-body{
    padding: 0 1rem 1rem 1rem;
  }
}

/*
  Offcanvas Search (Luxury Dark)
  Replaces your current Search CSS
*/

/* Offcanvas container */
#offcanvas-search {
  background: rgba(6, 6, 8, 0.92) !important;
  color: #fff !important;
  border-left: 1px solid rgba(255,255,255,0.10);
  box-shadow: -24px 0 70px rgba(0,0,0,0.70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Make sure text in the drawer is white */
#offcanvas-search,
#offcanvas-search * {
  color: inherit;
}

/* If your theme adds a “white sheet” inside, kill it */
#offcanvas-search .offcanvas-body,
#offcanvas-search .offcanvas-header,
#offcanvas-search .predictive-search,
#offcanvas-search .predictive-search-results {
  background: transparent !important;
}

/* Layout: full height */
#offcanvas-search .predictive-search {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header / title (optional) */
#offcanvas-search .offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* Search form wrapper */
#offcanvas-search .search-form {
  padding: 14px 14px 10px;
}

/* Input wrapper */
#offcanvas-search .search-form .form-control-wrapper {
  position: relative;
}

/* Search input */
#offcanvas-search .search-form .form-control {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 16px !important;
  padding: 14px 54px 14px 14px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.40);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#offcanvas-search .search-form .form-control::placeholder {
  color: rgba(255,255,255,0.55) !important;
}

#offcanvas-search .search-form .form-control:focus {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.26) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08), 0 14px 38px rgba(0,0,0,0.55);
  outline: none;
}

/* Submit button (right icon button inside input) */
#offcanvas-search .search-form .form-control-wrapper button[type="submit"] {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 12px !important;

  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  opacity: 0.95;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

#offcanvas-search .search-form .form-control-wrapper button[type="submit"]:hover,
#offcanvas-search .search-form .form-control-wrapper button[type="submit"]:focus {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.22) !important;
  transform: translateY(-50%) scale(1.03);
  opacity: 1;
}

/* Results area spacing */
#offcanvas-search .predictive-search-results {
  padding: 6px 14px 14px;
  overflow: auto;
}

/* Remove dotted borders / default list styling */
#offcanvas-search .predictive-search-results .list-group-item {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Each result row */
#offcanvas-search .predictive-search-results .list-group-item-action {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 12px !important;
  text-decoration: none !important;

  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;

  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  margin-bottom: 10px;
}

#offcanvas-search .predictive-search-results .list-group-item-action:hover {
  background: rgba(255,255,255,0.075) !important;
  border-color: rgba(255,255,255,0.18) !important;
  transform: translateY(-1px);
}

/* Query suggestions */
#offcanvas-search .predictive-search-results-queries-list mark {
  padding: 0 !important;
  background: transparent !important;
  color: #fff !important;
}

#offcanvas-search .predictive-search-results-queries-list span {
  opacity: 0.85 !important;
  color: rgba(255,255,255,0.75) !important;
}

/* Product list tweaks */
#offcanvas-search .predictive-search-results-products-list .list-group-item-action {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

#offcanvas-search .predictive-search-results-products-list .list-group-item-action:hover {
  background: rgba(255,255,255,0.075) !important;
}

/* Product image in results */
#offcanvas-search .predictive-search-results img,
#offcanvas-search .predictive-search-results .img-fluid {
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.45);
}

/* Titles + prices inside results (best-effort selectors) */
#offcanvas-search .predictive-search-results a,
#offcanvas-search .predictive-search-results .title,
#offcanvas-search .predictive-search-results .product-title {
  color: rgba(255,255,255,0.95) !important;
}

#offcanvas-search .predictive-search-results .price,
#offcanvas-search .predictive-search-results .money,
#offcanvas-search .predictive-search-results [class*="price"] {
  color: #7cffb2 !important;
  font-weight: 600;
}

/* Scrollbar (optional) */
#offcanvas-search .predictive-search-results::-webkit-scrollbar {
  width: 10px;
}
#offcanvas-search .predictive-search-results::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
}
#offcanvas-search .predictive-search-results::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
}

/* Mobile */
@media (max-width: 599px) {
  #offcanvas-search.offcanvas,
  #offcanvas-search {
    width: 100% !important;
    max-width: 100% !important;
  }

  #offcanvas-search .search-form {
    padding: 12px 12px 8px;
  }

  #offcanvas-search .predictive-search-results {
    padding: 6px 12px 12px;
  }
}

/* =========================================
   MAXDAL — DESKTOP NAV LINKS (LUXURY)
   Scope: #navbar-desktop ONLY (mobile untouched)
========================================= */

#navbar-desktop{
  /* keep header clean + premium */
  background: linear-gradient(180deg, rgba(8,8,10,.92), rgba(0,0,0,.96));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* center area usually where the links are */
#navbar-desktop .col-10{
  display: flex;
  justify-content: center;
}

/* Apply to any nav list inside desktop menu snippet */
#navbar-desktop .nav,
#navbar-desktop nav .nav{
  gap: 6px;
  align-items: center;
}

/* Base desktop link style */
#navbar-desktop .nav-link,
#navbar-desktop a.nav-link,
#navbar-desktop nav a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .55rem .85rem !important;
  border-radius: 999px;

  /* luxury type */
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,255,255,.84) !important;
  text-decoration: none !important;

  background: transparent;
  transition: background .18s ease, transform .18s ease, opacity .18s ease, color .18s ease;
  opacity: .92;
}

/* Premium hover */
#navbar-desktop .nav-link:hover,
#navbar-desktop nav a:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.96) !important;
  transform: translateY(-1px);
  opacity: 1;
}

/* Luxury underline sweep (subtle) */
#navbar-desktop .nav-link::after,
#navbar-desktop nav a::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 1px;

  background: linear-gradient(90deg,
    transparent,
    rgba(var(--maxdal-titanium-rgb), .75),
    transparent
  );

  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  opacity: .9;
}

#navbar-desktop .nav-link:hover::after,
#navbar-desktop nav a:hover::after{
  transform: scaleX(1);
}

/* Active/current link */
#navbar-desktop .nav-link.active,
#navbar-desktop nav a[aria-current="page"],
#navbar-desktop nav a[aria-current="true"]{
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.98) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 18px 45px rgba(0,0,0,.35);
}

/* If your desktop menu uses dropdowns, make the trigger feel premium */
#navbar-desktop .dropdown-toggle{
  padding-right: 1.05rem !important;
}

#navbar-desktop .dropdown-toggle::after{
  margin-left: .55rem;
  opacity: .7;
  transform: translateY(-1px);
}

/* Optional: tighten top line spacing if it looks too tall */
#navbar-desktop .navbar{
  min-height: 74px;
}


/* =========================================================
   2) SORT BY — dropdown behind cards (z-index + clipping)
========================================================= */

/* Your section wrapper had overflow:hidden which clips dropdowns */
#collection-products-{{ collection.id }}{
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Keep utilities + dropdown above product cards */
#collection-products-{{ collection.id }} .mxcp-utilities{
  z-index: 2000 !important; /* above cards/backdrops */
  position: relative;
}

/* Bootstrap dropdown menu above EVERYTHING */
#collection-products-{{ collection.id }} .mxcp-utilities .dropdown-menu{
  z-index: 1070 !important;
}

/* If any parent accidentally clips the dropdown */
#collection-products-{{ collection.id }} .mxcp-container,
#collection-products-{{ collection.id }} .mxcp-utilities{
  overflow: visible !important;
}

/* If your product cards create a stacking context, keep them under */
#collection-products-{{ collection.id }} .mxcp-card-wrap{
  position: relative;
  z-index: 1 !important;
}


/* =========================================================
   3) FILTERS — fix the “weird white” panel to match site
   (covers Bootstrap offcanvas + modal implementations)
========================================================= */

/* Target common filter drawers */
#offcanvas-collection-filters,
#offcanvas-filters,
.offcanvas.collection-filters,
.offcanvas[class*="filter"],
.modal[class*="filter"]{
  background: radial-gradient(900px 520px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(180deg, rgba(8,8,10,.92) 0%, rgba(0,0,0,.96) 100%) !important;
  color: rgba(255,255,255,.92) !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: -24px 0 70px rgba(0,0,0,.70) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Make inner surfaces not default white */
#offcanvas-collection-filters .offcanvas-header,
#offcanvas-collection-filters .offcanvas-body,
#offcanvas-filters .offcanvas-header,
#offcanvas-filters .offcanvas-body,
.offcanvas.collection-filters .offcanvas-header,
.offcanvas.collection-filters .offcanvas-body{
  background: transparent !important;
  color: inherit !important;
}

/* Header divider */
#offcanvas-collection-filters .offcanvas-header,
#offcanvas-filters .offcanvas-header,
.offcanvas.collection-filters .offcanvas-header{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* Close button: luxe */
#offcanvas-collection-filters .btn-close,
#offcanvas-filters .btn-close,
.offcanvas.collection-filters .btn-close{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  opacity: 1 !important;
}

/* Filter labels + sections */
#offcanvas-collection-filters h1,
#offcanvas-collection-filters h2,
#offcanvas-collection-filters h3,
#offcanvas-filters h1,
#offcanvas-filters h2,
#offcanvas-filters h3{
  color: rgba(255,255,255,.92) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Inputs (checkboxes + selects + price fields) */
#offcanvas-collection-filters .form-control,
#offcanvas-collection-filters .form-select,
#offcanvas-collection-filters input,
#offcanvas-collection-filters select,
#offcanvas-filters .form-control,
#offcanvas-filters .form-select,
#offcanvas-filters input,
#offcanvas-filters select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

#offcanvas-collection-filters .form-control:focus,
#offcanvas-collection-filters .form-select:focus,
#offcanvas-filters .form-control:focus,
#offcanvas-filters .form-select:focus{
  outline: none !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* Checkboxes */
#offcanvas-collection-filters .form-check-input,
#offcanvas-filters .form-check-input{
  background-color: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.22) !important;
}

#offcanvas-collection-filters .form-check-input:checked,
#offcanvas-filters .form-check-input:checked{
  background-color: var(--mx-accent-green) !important;
  border-color: var(--mx-accent-green) !important;
  box-shadow: 0 0 0 4px rgba(124,255,178,.12) !important;
}

/* Offcanvas backdrop: darker + blurred (optional) */
.offcanvas-backdrop.show{
  opacity: 1 !important;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(6px);
}