/* ==================================
        LA BELLA FOUNDATION V1
================================== */

:root{

--lb-bg:#F9F5F7;
--lb-bg-2:#F4EDF7;

--lb-text:#24072D;
--lb-muted:#7E6D83;

--lb-primary:#6D0482;
--lb-primary-dark:#4B0B5B;

--lb-gold:#D4AF37;
--lb-gold-light:#E8D9A8;

}

/* ==================================
        GLOBAL BACKGROUND
================================== */

html,
body {
  background:
    linear-gradient(
      180deg,
      #FDFBFD 0%,
      #F8F2FA 50%,
      #F4EDF7 100%
    ) !important;

  overflow-x: hidden;
}
/* ==================================
      PURPLE AURA
================================== */

body::before{

content:"";

position:fixed;

left:-280px;
bottom:-280px;

width:760px;
height:760px;

border-radius:50%;

background:
radial-gradient(

circle,

rgba(109,4,130,.28) 0%,
rgba(109,4,130,.14) 35%,
rgba(212,175,55,.06) 60%,
transparent 82%

);

filter:blur(140px);

pointer-events:none;

z-index:-1;

}

/* ==================================
      LA BELLA PURPLE AURA
================================== */

body::before{

content:"";

position:fixed;

left:-250px;
bottom:-250px;

width:700px;
height:700px;

border-radius:50%;

background:
radial-gradient(

circle,

rgba(109,4,130,.38) 0%,
rgba(109,4,130,.18) 35%,
rgba(109,4,130,.07) 60%,
transparent 82%

);

filter:blur(140px);

pointer-events:none;

z-index:999;

}
/* ==================================
        HEADER WRAPPER
================================== */

.bg-white.sticky{

background:
rgba(255,255,255,.55)
!important;

backdrop-filter:
blur(28px);

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

border-bottom:
1px solid rgba(212,175,55,.18)
!important;

box-shadow:
0 12px 40px rgba(109,4,130,.06)
!important;

}

/* ==================================
          HEADER
================================== */

.default_header{

background:transparent!important;

border:none!important;

box-shadow:none!important;

}

/* ==================================
      HEADER CONTAINER
================================== */

.default_header_container{

background:transparent!important;

}

/* ==================================
        NAVIGATION
================================== */

.default_header a,
.default_header button{

color:var(--lb-text)!important;

transition:.35s ease;

}

.default_header a:hover,
.default_header button:hover{

color:var(--lb-primary)!important;

}

a[href="/search"]{

color:var(--lb-primary)!important;

}

/* ==================================
    DESKTOP NAVIGATION
================================== */

.default_header .hidden.lg\:block a,
.default_header .hidden.lg\:block button,
.default_header .hidden.lg\:block [class*="font-semibold"]{

color:#4F2D58!important;

font-weight:500;

}

.default_header .hidden.lg\:block a:hover,
.default_header .hidden.lg\:block button:hover,
.default_header .hidden.lg\:block [class*="font-semibold"]:hover{

color:var(--lb-primary)!important;

}

/* ==================================
      HEADER GOLD AURA
================================== */

.bg-white.sticky::before{

content:"";

position:absolute;

top:-140px;
left:-90px;

width:340px;
height:340px;

border-radius:50%;

background:
radial-gradient(

circle,

rgba(212,175,55,.12) 0%,
rgba(109,4,130,.08) 35%,
rgba(109,4,130,.03) 60%,
transparent 80%

);

filter:blur(80px);

pointer-events:none;

z-index:-1;

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

footer{

background:
rgba(255,255,255,.55)
!important;

backdrop-filter:
blur(28px);

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

border-top:
1px solid rgba(212,175,55,.18)
!important;

box-shadow:
0 -10px 35px rgba(109,4,130,.05)
!important;

}

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

footer h3{

color:#6D0482!important;

font-weight:700;

}

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

footer a{

color:#24072D!important;

transition:all .35s ease;

}

footer a:hover{

color:#6D0482!important;

padding-right:4px;

}

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

footer p{

color:#7E6D83!important;

}

/* ==================================
          MAIN
================================== */

main{

background:transparent!important;

}

/* ==================================
      INPUTS & BUTTONS
================================== */

input,
textarea,
select{

background:rgba(255,255,255,.72);

border:1px solid rgba(109,4,130,.12);

color:#24072D;

transition:.3s;

}

input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:#6D0482;

box-shadow:
0 0 0 4px rgba(109,4,130,.08);

}

/* ==================================
        PRIMARY BUTTONS
================================== */

button,
.btn-primary{

transition:.35s ease;

}

button:hover,
.btn-primary:hover{

transform:translateY(-2px);

}

/* ==================================
        TEXT SELECTION
================================== */

::selection{

background:#6D0482;

color:#ffffff;

}

::-moz-selection{

background:#6D0482;

color:#ffffff;

}

/* ==================================
          SCROLLBAR
================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#F4EDF7;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#D4AF37,
#6D0482
);

border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

background:linear-gradient(
180deg,
#E8D9A8,
#7D0C97
);

}

/* ==================================
      SMOOTH SCROLL
================================== */

html{

scroll-behavior:smooth;

}

/* ==================================
      IMAGE ANIMATION
================================== */

img{

transition:
transform .45s ease,
opacity .35s ease;

}

/* ==================================
      REDUCE MOTION
================================== */

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}

/* ==================================
          MOBILE
================================== */

@media(max-width:768px){

body::before{

width:520px;
height:520px;

left:-220px;
bottom:-220px;

}

body::after{

width:420px;
height:420px;

right:-180px;
top:-180px;

}

.bg-white.sticky{

backdrop-filter:blur(18px);

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

}

footer{

backdrop-filter:blur(18px);

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

}
/* ==================================
   LA BELLA HEADER ICONS V2
================================== */

/* Menu Button */

.default_header .flex-1.flex.items-center.gap-3 button{

    background:transparent !important;
    box-shadow:none !important;
    border:none !important;

}

/* ==================================
   MENU ICON
================================== */

.default_header .flex-1.flex.items-center.gap-3 button svg{

    color:#6D0482 !important;

}

.default_header .flex-1.flex.items-center.gap-3 button svg path{

    fill:#6D0482 !important;
    stroke:#6D0482 !important;

}

/* ==================================
   SEARCH ICON
================================== */

a[href="/search"] svg,
a[href="/search"] svg *{

    fill:#6D0482 !important;
    stroke:#6D0482 !important;
    color:#6D0482 !important;

}

/* ==================================
   CART ICON
================================== */

.default_header .group svg,
.default_header .group svg *{

    color:#6D0482 !important;
    fill:#6D0482 !important;
    stroke:#6D0482 !important;

}

/* Badge */

.default_header .group .bg-skin-primary{

    background:#6D0482 !important;
    color:#fff !important;

}

/* ==================================
   HOVER
================================== */

.default_header a:hover svg,
.default_header button:hover svg,
.default_header a:hover svg *,
.default_header button:hover svg *{

    fill:#D4AF37 !important;
    stroke:#D4AF37 !important;
    color:#D4AF37 !important;

    transform:scale(1.08);

    transition:.3s ease;

}

/* ==================================
   REMOVE DEFAULT UNDERLINE
================================== */

header a:hover,
header button:hover,
nav a:hover,
nav button:hover{

    text-decoration:none !important;

}

/* ==================================
   HEADER LINKS
================================== */

header a,
header button,
nav a,
nav button{

    transition:
    color .3s ease,
    text-shadow .3s ease,
    transform .3s ease;

}

header a:hover,
header button:hover,
nav a:hover,
nav button:hover{

    color:#6D0482 !important;

    text-shadow:
    0 0 8px rgba(109,4,130,.18);

}

/* ==================================
   ACTIVE ICON GLOW
================================== */

.default_header svg{

    filter:
    drop-shadow(0 0 4px rgba(109,4,130,.12));

}
}


/* ==================================
      LA BELLA FOUNDATION END
================================== */