html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: #f8fafc;
 }

 .store-card {
     transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
 }

 .store-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
 }

 .soft-float {
     animation: softFloat 7s ease-in-out infinite;
 }

 .shine {
     position: relative;
     overflow: hidden;
 }

 .shine::after {
     content: "";
     position: absolute;
     inset: -40% auto -40% -70%;
     width: 45%;
     transform: rotate(18deg);
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
     transition: left 700ms ease;
 }

 .shine:hover::after {
     left: 125%;
 }

 .trust-carousel .owl-stage {
     display: flex;
 }

 .trust-carousel .owl-item {
     display: flex;
 }

 .trust-carousel .trust-card {
     width: 100%;
 }

 .trust-carousel .owl-dots {
     margin-top: 18px;
     text-align: center;
 }

 .trust-carousel .owl-dot span {
     display: block;
     width: 8px;
     height: 8px;
     margin: 0 5px;
     border-radius: 999px;
     background: rgba(255, 255, 255, .35);
     transition: width 200ms ease, background-color 200ms ease;
 }

 .trust-carousel .owl-dot.active span {
     width: 22px;
     background: #ffffff;
 }

 .trust-carousel.trust-fallback {
     display: block !important;
     overflow: hidden;
 }

 .trust-carousel.trust-fallback .trust-fallback-track {
     display: flex;
     gap: 16px;
     transition: transform 700ms ease;
     will-change: transform;
 }

 .trust-carousel.trust-fallback .trust-card {
     flex: 0 0 100%;
 }

 @media (min-width: 640px) {
     .trust-carousel.trust-fallback .trust-card {
         flex-basis: calc((100% - 16px) / 2);
     }
 }

 @media (min-width: 1024px) {
     .trust-carousel.trust-fallback .trust-card {
         flex-basis: calc((100% - 48px) / 4);
     }
 }

 .blue-scrollbar {
     scrollbar-width: thin;
     scrollbar-color: #38bdf8 rgba(15, 23, 42, .18);
 }

 .blue-scrollbar::-webkit-scrollbar {
     width: 12px;
 }

 .blue-scrollbar::-webkit-scrollbar-track {
     margin-block: 6px;
     border: 1px solid rgba(37, 99, 235, .18);
     border-radius: 999px;
     background:
         linear-gradient(180deg, rgba(15, 23, 42, .08), rgba(15, 23, 42, .18)),
         rgba(226, 232, 240, .55);
     box-shadow: inset 0 0 10px rgba(15, 23, 42, .18);
 }

 .blue-scrollbar::-webkit-scrollbar-thumb {
     border: 3px solid transparent;
     border-radius: 999px;
     background:
         linear-gradient(180deg, #67e8f9 0%, #2563eb 48%, #1d4ed8 100%) padding-box,
         linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(14, 165, 233, .4)) border-box;
     box-shadow:
         0 0 16px rgba(37, 99, 235, .55),
         inset 0 1px 0 rgba(255, 255, 255, .75);
 }

 .blue-scrollbar::-webkit-scrollbar-thumb:hover {
     background:
         linear-gradient(180deg, #7dd3fc 0%, #0284c7 45%, #312e81 100%) padding-box,
         linear-gradient(180deg, #ffffff, #38bdf8) border-box;
     box-shadow:
         0 0 22px rgba(14, 165, 233, .8),
         inset 0 1px 0 rgba(255, 255, 255, .85);
 }

 @keyframes softFloat {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-14px);
     }
 }


 /*shop*/

 .shop-card {
     transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
 }

 .shop-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
 }

 /*shop sidebar*/
 #shop-sidebar-wrap {
     position: fixed;
     top: 5rem;
     left: 0;
     height: calc(100vh - 5rem);
     width: 256px;
     z-index: 40;
 }

 #shop-sidebar {
     height: 100%;
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: #e2e8f0 transparent;
 }

 #shop-sidebar::-webkit-scrollbar {
     width: 4px;
 }

 #shop-sidebar::-webkit-scrollbar-thumb {
     background: #e2e8f0;
     border-radius: 9px;
 }

 .sub-list {
     max-height: 0;
     overflow: hidden;
     transition: max-height 320ms ease;
 }

 .sub-list.open {
     max-height: 400px;
 }

 .cat-parent.active>button .cat-icon {
     transform: rotate(180deg);
 }

 .cat-parent>button .cat-icon {
     transition: transform 260ms ease;
 }

 .sub-btn.active {
     background: #ede9fe;
     color: #6d28d9;
     font-weight: 900;
 }

 .cat-parent.active>button {
     background: linear-gradient(135deg, #2563eb, #7c3aed);
     color: #fff;
 }

 .cat-parent.active>button .cat-icon {
     color: #fff;
 }

 .sidebar-item.active-sidebar {
     background: linear-gradient(135deg, #2563eb, #7c3aed);
     color: #fff;
 }

 @media(max-width:1023px) {
     #shop-sidebar-wrap {
         width: 100%;
         pointer-events: none;
         top: 0;
         height: 100vh;
     }

     #shop-sidebar-wrap.open {
         pointer-events: auto;
     }

     #sidebar-overlay {
         position: absolute;
         inset: 0;
         background: rgba(15, 23, 42, .45);
         backdrop-filter: blur(3px);
         opacity: 0;
         transition: opacity 260ms;
     }

     #shop-sidebar-wrap.open #sidebar-overlay {
         opacity: 1;
     }

     #shop-sidebar {
         position: absolute;
         left: 0;
         top: 0;
         height: 100%;
         width: 280px;
         transform: translateX(-100%);
         transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
         box-shadow: 0 24px 80px rgba(15, 23, 42, .22);
     }

     #shop-sidebar-wrap.open #shop-sidebar {
         transform: translateX(0);
     }
 }

 .thumb-active {
     border-color: #2563eb;
     opacity: 1;
 }

 .thumb-item {
     transition: all 200ms ease;
 }

 .thumb-item:not(.thumb-active) {
     opacity: 0.55;
 }

 .slide {
     display: none;
 }

 .slide.active {
     display: block;
 }

 .review-bar-fill {
     transition: width 600ms ease;
 }

 .size-btn.selected {
     background: #0f172a;
     color: #fff;
     border-color: #0f172a;
 }

 .color-dot.selected {
     outline: 3px solid #2563eb;
     outline-offset: 2px;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(12px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .fade-in {
     animation: fadeIn 400ms ease forwards;
 }

 #main-slider {
     position: relative;
     width: 100%;
     padding-top: 85%;
     overflow: hidden;
 }

 @media (min-width: 1024px) {
     #main-slider {
         padding-top: 90%;
     }
 }

 #main-slider .slide {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: none;
 }

 #main-slider .slide.active {
     display: block;
 }

 .favourite-card {
     transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
 }

 .favourite-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
 }

 .account-card {
     transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
 }

 .account-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
 }

 .glass-panel {
     border: 1px solid rgba(255, 255, 255, .68);
     background: rgba(255, 255, 255, .78);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
 }

 .cart-card {
     transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
 }

 .cart-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
 }

 .glass-panel {
     border: 1px solid rgba(255, 255, 255, .68);
     background: rgba(255, 255, 255, .78);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
 }

 .checkout-card {
     transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
 }

 .checkout-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
 }

 .glass-panel {
     border: 1px solid rgba(255, 255, 255, .68);
     background: rgba(255, 255, 255, .78);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
 }

 .checkout-input {
     min-height: 3rem;
     width: 100%;
     border-radius: 999px;
     border: 1px solid rgb(226 232 240);
     background: rgba(255, 255, 255, .82);
     padding: 0 1.25rem;
     font-size: .875rem;
     font-weight: 700;
     color: rgb(15 23 42);
     outline: none;
     transition: border-color 200ms ease, box-shadow 200ms ease;
 }

 .checkout-input:focus {
     border-color: rgb(96 165 250);
     box-shadow: 0 0 0 4px rgba(59, 130, 246, .14);
 }