:root {
    --background-color : #fafafa;
    --nav-txt-color : #ffffff;
    --nav-body-color : #2a2a2a;
    --text: #0f1724;
    --surface1:#ffffff;
    --box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    
    
    --font-size : --font-size-4;
    --heading-color: #2a2a2a;
    
    --font-size-03: 0.5em;
    --font-size-02: 0.625em;
    --font-size-01: 0.75em;
    --font-size-00: 0.875em;
    --font-size-0: 1em;
    --font-size-1: clamp(1.0625em, calc(.2vw + 1em), 1.125em);
    --font-size-2: clamp(1.125em, calc(.5vw + 1em), 1.25em);
    --font-size-3: clamp(1.25em, calc(1vw + 1em), 1.5em);
    --font-size-4: clamp(1.375em, calc(1.5vw + 1em), 1.75em);
    --font-size-5: clamp(1.5em, calc(2vw + 1em), 2em);
    --font-size-6: clamp(1.625em, calc(2.1vw + 1em), 2.25em);
    --font-size-7: clamp(1.75em, calc(2.2vw + 1em), 2.5em);
    --font-size-8: clamp(1.875em, calc(2.4vw + 1em), 2.75em);
    --font-size-9: clamp(2em, calc(2.6vw + 1em), 3.125em);
    --font-size-10: clamp(2.125em, calc(2.8vw + 1em), 3.375em);
    --font-size-11: clamp(2.25em, calc(3vw + 1em), 3.625em);
    --font-size-12: clamp(2.375em, calc(3.2vw + 1em), 3.875em);
    --font-size-custom: clamp(3.375em, calc(3.6vw + 1em), 4.875em);
    
    --broad : 10vw;
  --wide : 3vw;
  --tight : 17vw;
  --screen : 0vw;
} 

/* dark theme overrides */
[data-theme="dark"] {
    --background-color : #2a2a2a;
    --nav-txt-color : #ffffff;
    --nav-body-color : #2a2a2a;
    --heading-color: #ffffff;
    --text: #2a2a2a;
    --heading-color: #ffffff;
}


/* auto: use prefers-color-scheme when data-theme="auto" (JS will set initial state) */
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--background-color : #2a2a2a;
    --nav-txt-color : #ffffff;
    --nav-body-color : #2a2a2a;
    --heading-color: #ffffff;
    --text: #2a2a2a;
    --heading-color: #ffffff;
}
}
.main-container {
    position: relative;
}

.main-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../image/bg/carbon-fibre.png");
    background-repeat: repeat;
   
    z-index: -1;
    transition: opacity 0.2s ease;
}

/* AUTO → system preference */
[data-theme="auto"] .main-container::before {
    opacity: 0.05; /* default light */
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] .main-container::before {
        opacity: 0.5;
    }
}

/* USER OVERRIDE */
[data-theme="light"] .main-container::before {
    opacity: 0.05 !important;
}

[data-theme="dark"] .main-container::before {
    opacity: 0.5 !important;
}


.toggle {
  width: 70px;
  height: 34px;
  background: #9ca3af;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}

/* Sliding circle */
.circle {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s ease;
  font-size: 16px;
}

/* Icons */
.icon {
  position: absolute;
  top: 7px;
  font-size: 18px;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.sun { left: 10px; opacity: 1; }
.moon { right: 10px; opacity: 0; }

/* DARK MODE ANIMATIONS */
[data-theme="dark"] .toggle {
  background: #22c55e;
}

[data-theme="dark"] .circle {
  transform: translateX(36px);
}

[data-theme="dark"] .sun { opacity: 0; }
[data-theme="dark"] .moon { opacity: 1; }

body {
    background-color: var(--background-color);
    margin:0;
    font-family : Arial;
    font-size:var(--font-size);
    overflow-x: hidden;
}

body {
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      transition: background var(--transition), color var(--transition);

    }

form {
display:flex;
height: 2em;
    margin: auto 1em;
}

.container{max-width:1100px;margin:0 auto}
.header{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.search{flex:1;min-width:160px;padding:1.2em;}
input,select{padding:1.2em;border-radius:8px;border:1px solid #d6d9de;width:80%}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{background:#fff;border-radius:10px;padding:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);display:block;gap:8px}
.thumb{width:100%;height:auto;flex:0 0 86px;border-radius:6px;background:#e9ecef;display:block;align-items:center;justify-content:center;font-size:11px;color:#666}
.info{flex:1;display:block;flex-direction:column;margin-top: 1em;}
.title{font-weight:600;margin-bottom:4px;font-size:14px}
.meta{font-size:12px;color:#555}
.desc{font-size:12px;color:#333;margin-top:6px}

.btn{padding:8px 10px;border-radius:8px;border:none;background:#0b74de;color:#fff;text-decoration:none}
.empty{padding:40px;text-align:center;color:#666}
.small{font-size:12px;color:#666}

.navigation {
    display: flex;
    flex-direction: column;
    gap: 0em;
    background-color:var(--nav-body-color);
    padding: 0em;
    position: fixed;
    top: 0em;
    z-index: 999;
    width: 100%;
}

.navigation .logo .fa {
    display: none;
}

.navigation .menu-list ul {
    display:flex;
    gap: 2.4em;
    margin-top: 1.9em;
    width: 55%;
}

.navigation .menu-list ul li {
    list-style: none;
}

.navigation .menu-list a {
    text-decoration: none;
    color: var(--nav-txt-color);
    font-size: var(--font-size-00);
}

.navigation .search-container {
      
    position: relative;
    right: 0;
    align-self: center;
    text-align: end;
}

.mySwiper {
    width: 100%;
    height: 70vh; /* auto-resizable based on viewport */
    
}

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

 h2 {
    width: 100%;
    text-align: center;
    font-size: var(--font-size-8);
    color:var(--heading-color);
}

.carousel-container {
    width: 90%;
    overflow: hidden;
    padding: 20px 0;
    position: relative;
    margin:auto;
    overflow-x: hidden;
}

.carousel-track {
    display: flex;
    gap: 10px;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.carousel-item img {
    height: 12em;
    width: auto;
    object-fit: contain;
    opacity: 1;
    transition: 0.3s;
}

.carousel-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.grid {
         display: flex; /* Use flexbox for layout */
        align-items: center; /* Center items vertically */
        overflow-x: auto; /* Enable horizontal scrolling when content overflows */
        white-space: nowrap; /* Keep all items in a single line initially */
        padding: 20px 0px;
    gap: 20px;
    width: 90%;
    margin: auto;
    }
    .item {
        background: white;
        padding: 15px;
        border-radius: 10px;
        box-shadow: 0 0 6px rgba(0,0,0,0.1);
        text-align: center;
         min-width: 200px;
  margin: 0 10px;
    }
    
    .item:first-child {
  margin-left: auto;
}

.item:last-child {
  margin-right: auto;
}


    .item img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 8px;
    }
   
    .btn:hover {
        background: #444;
    }

.category-box {
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 35px;
    display: flex;
}
.category-header {
    display: block;
    align-items: center;
    gap: 20px;
    margin: auto;
    text-align: center;
    width: 25%;
}
.cover {
        width: 90%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    aspect-ratio: 1;
}
.category-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--heading-color);
}
.btn {
    padding: 10px 18px;
    background: black;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
	margin-top: 1em;
}
.btn:hover { background: #444; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 20px;
    width: 75%;
}
.product-card {
    background: var(--surface1);
    border: 0px solid #ddd;
    border-radius: 10px;
    padding: 3em 2em;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    box-shadow:var(--box-shadow);
}
.product-card:hover {
    background: #eee;
    transform: scale(1.03);
}
.product-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}
.product-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}


/* LIGHTBOX */
#lightbox {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.7);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}
#lightbox-content {
    background:#fff;
    padding:20px;
    max-width:600px;
    width:90%;
    border-radius:10px;
}
#lightbox img {
    width: 100%;
    height: 50dvh;
    border-radius: 8px;
    object-fit: contain;
}
#lightbox-close {
    float:right;
    cursor:pointer;
    font-size:20px;
    margin-bottom:10px;
}

.menu-list {
    display:flex;
}

.footer {
background-color:var(--nav-body-color);
display:flex;
    padding: 1em 5em;
gap: 1em;
}

.footer .footer-col2 {
width:40%;
}
.footer .footer-col {
width:20%;
}

.footer .menu-list {
color:#ffffff;
display:block;
list-style: none;
text-decoration:none;
}

.footer .foot-icon{
padding:0.5em;
}

.footer h3 {
color:#ffffff;

}

.footer .menu-list li {
margin-bottom:1.1em;
color:#ffffff;
}

.footer .menu-list a {
color:#ffffff;
text-decoration:none;
}

.credentials {
text-align:center;
background-color:#000;
color:#ffffff;
padding: 2em 0;
}

.navigation {
width:100%;
}

.navigation .logo {
width:30%;
}

.navigation .menu-list {
width:70%;
}  

@media screen and (max-width: 1080px) {
    
    header {
    	height: 5em !important;
    }
  
.navigation {
    display: block;
}

.navigation {
width:100%;
}

.navigation .logo {
width:100%;
}

.navigation .menu-list {
width:100%;
}  

.navigation .logo {
    display: flex;
}

.navigation .logo .fa {
    display: block;
            font-size: 2em;
        align-self: center;
        padding : 0.5em;
        color: var(--nav-txt-color);
     position: absolute;
        right: 0;
}
    
    .navigation .logo .fa {
       
       
    }

.sm-hide {
    display:none !important;
}

.navigation .logo img {
           width: auto;
        height: 4em;
}

.navigation .menu-list {
    display: block;
}
    
    .pre-header .menu-list {
	display: none;
}

.navigation .menu-list li {
    margin-top: 1.3em;
}

.navigation .search-container {
    display: none;
}

.mySwiper {
    width: 100%;
   /* height: 20vh;  auto-resizable based on viewport */
        height: auto;
}

.menu-list {
    display:block;
}


.navigation .menu-list ul {
    display: block;
    gap: 2.4em;
    margin-top: 1.9em;
}


.category-box {
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 35px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    display: block;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 18px;
    margin-top: 20px;
    width: 100%;
}

.category-header {
    display: block;
    align-items: center;
    gap: 20px;
    margin: auto;
    text-align: center;
    width: 100%;
        padding-bottom: 2em;
}

.cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
    object-fit: cover;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.footer {
background-color:var(--nav-body-color);
display:block;
    padding: 1em;
gap: 4em;
}

.footer .footer-col2 {
width:100%;
}
.footer .footer-col {
width:100%;
}

}