:root {
     --blue: #007bff;
     --indigo: #6610f2;
     --purple: #6f42c1;
     --pink: #e83e8c;
     --red: #dc3545;
     --orange: #fd7e14;
     --yellow: #ffc107;
     --green: #28a745;
     --teal: #20c997;
     --cyan: #17a2b8;
     --white: #fff;
     --gray: #6c757d;
     --gray-dark: #343a40;
     --primary: #FFD333;
     --secondary: #F5F5F5;
     --success: #28a745;
     --info: #17a2b8;
     --warning: #ffc107;
     --danger: #dc3545;
     --light: #FFFFFF;
     --dark: #3D464D;
     --breakpoint-xs: 0;
     --breakpoint-sm: 576px;
     --breakpoint-md: 768px;
     --breakpoint-lg: 992px;
     --breakpoint-xl: 1200px;
     --font-family-sans-serif: "Roboto", sans-serif;
     --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 html {
     font-family: sans-serif;
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }

 article,
 aside,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 main,
 nav,
 section {
     display: block;
 }

 body {
     margin: 0;
     font-family: "Roboto", sans-serif;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     text-align: left;
     color: var(--gray);
     background-color: #FFFFFF;
 }

 /* Suggestions dropdown styling */
 #suggestions {
     max-height: 350px;
     overflow-y: auto;
     border: 1px solid #ffc107;
     border-top: none;
     border-radius: 0 0 8px 8px;
 }

 /* Mobile full-width dropdown */
 @media (max-width: 992px) {
     #suggestions {
         position: fixed !important;
         top: 70px;
         /* just below navbar height */
         left: 0;
         right: 0;
         width: 100% !important;
         border-radius: 0;
         /* edge-to-edge look */
         max-width: 100%;
     }
 }

 .category-badge {
     background: #e5e7eb;
     color: #4b5563;
     padding: 4px 8px;
     border-radius: 6px;
     font-size: 0.75rem;
 }

 .filter-group {
     border-bottom: 1px solid #e5e7eb;
     padding-bottom: 1rem;
     margin-bottom: 1rem;
 }

 .color-option {
     width: 24px;
     height: 24px;
     border-radius: 50%;
     cursor: pointer;
     position: relative;
 }

 .color-option.selected::after {
     content: '';
     position: absolute;
     inset: -3px;
     border: 2px solid #2563eb;
     border-radius: 50%;
 }

 .sort-btn {
     background: white;
     border: 1px solid #e5e7eb;
     padding: 8px 16px;
     border-radius: 8px;
     transition: all 0.2s;
 }

 .sort-btn:hover {
     background: #f3f4f6;
 }

 .cart-btn {
     background: #2563eb;
     color: white;
     border: none;
     transition: all 0.2s;
 }

 .cart-btn:hover {
     background: #1d4ed8;
     transform: translateY(-2px);
 }

 /*********************shop_detail****************/
 /* Product images */
 .product-images {
     position: relative;
 }

 .main-image {
     aspect-ratio: 1;
     overflow: hidden;
     border-radius: 0.375rem;
     margin-bottom: 1rem;
 }

 .main-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 .image-thumbnails {
     display: flex;
     gap: 0.5rem;
     overflow-x: auto;
     padding-bottom: 0.5rem;
 }

 .thumbnail-btn {
     width: 6rem;
     height: 6rem;
     border: 2px solid transparent;
     border-radius: 0.25rem;
     overflow: hidden;
     cursor: pointer;
     flex-shrink: 0;
 }

 .thumbnail-btn.active {
     border-color: #1e40af;
 }

 .thumbnail-btn img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Main carousel style */
 .center_detail .carousel {
     width: 100%;
 }

 /* Indicators list style */
 .article-slide .carousel-indicators {
     bottom: -110px;
     left: 0;
     margin-left: 5px;
     width: 100%;
 }

 /* Indicators list style */
 .article-slide .carousel-indicators li {
     border: medium none;
     border-radius: 0;
     float: left;
     height: 80px;
     margin-bottom: 5px;
     margin-left: 0;
     margin-right: 5px !important;
     margin-top: 0;
     width: 23.8%;
 }

 /* Indicators images style */
 .article-slide .carousel-indicators img {
     border: 5px solid #ea1c2636;
     float: left;
     height: 120px;
     left: 0;
     width: 100%;
 }

 /* =========================   Indicators active image style ========================================== */
 .product-card {
     border: none;
     transition: transform 0.3s ease;
     margin-bottom: 2rem;
 }

 .product-card a {
     text-decoration: none !important;
     text-emphasis-color: none !important;
 }

 .product-card:hover {
     transform: translateY(-5px);
 }

 .product-image {
     height: 250px;
     object-fit: cover;
     background-color: #f5f5f5;
 }

 .product-title {
     font-weight: 600;
     margin-top: 0.8rem;
     color: black;
 }

 .product-category {
     color: #888;
     font-size: 0.9rem;
 }

 .category-item {
     padding-left: 20px;
     margin-bottom: 5px;
 }

 .parent-category {
     font-weight: bold;
     margin-top: 10px;
     background-color: #f8f9fa;
     padding: 8px 12px;
     border-radius: 5px;
 }

 .subcategory {
     padding-left: 30px;
 }

 .offcanvas {
     width: 350px;
 }

 .filter-badge {
     font-size: 0.7rem;
     margin-left: 5px;
 }

 .category-toggle {
     cursor: pointer;
     color: #6c757d;
 }

 .category-toggle:hover {
     color: #0d6efd;
 }

 .selected-categories {
     background-color: #f8f9fa;
     border-radius: 5px;
     padding: 15px;
     margin-bottom: 15px;
 }

 .category-pill {
     margin-right: 5px;
     margin-bottom: 5px;
 }

 .dropdown-menu {
     position: absolute !important;
     top: 100% !important;
     left: auto !important;
     right: 0 !important;
     /* aligns properly with dropdown-toggle */
     transform: none !important;
     /* prevent weird shifting */
 }

 /* ==================================  Login and Sign uppage ================================= */
 .box {
     background: #fdfdfd;
     flex-direction: column;
     padding: 35px 35px;
     border-radius: 20px;
     box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1),
         0 32px 64px -48px rgba(0, 0, 0, 0.5);
 }

 .form-box header {
     font-size: 40px;
     font-weight: 600;
     text-align: center;
     color: #2b547e;
 }

 .form-box hr {
     background-color: #2b547e;
     height: 5px;
     width: 20%;
     border: none;
     margin: 5px auto;
     outline: 0;
     border-radius: 5px;
 }

 .input-container {
     display: flex;
     width: 100%;
     margin-bottom: 15px;
 }

 .icon {
     padding: 15px;
     background: transparent;
     color: #555;
     background-color: #f1f1f1;
     min-width: 50px;
     text-align: center;
     cursor: pointer;
 }

 .input-field {
     width: 100%;
     padding: 10px;
     height: 50px;
     outline: none;
     border: none;
     font-size: 15px;
     background-color: #f1f1f1;
 }

 .input-field:focus {
     color: #2b547e;
 }

 .remember {
     display: block;
     font-size: 15px;
     margin-bottom: 50px;
     margin-top: 20px;
 }

 .remember span {
     float: right;
 }

 .remember span a {
     text-decoration: none;
     color: #2b547e;
 }

 .remember span a:hover {
     font-weight: bold;
 }