/* CSS Document */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .container {
            width: 80%;
            margin: auto;
        }
        header {
            background: #2c3e50;
            color: #ffffff;
            padding-top: 10px;
            min-height: 70px;
            border-bottom: #3498db 3px solid;
        }
        header a {
            color: #ffffff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 16px;
        }
        header #branding {
			float: left;
        }
		.center-img,
		.center-txt {
  			display: inline-block;
  			vertical-align: middle;
			margin-left:0px;
		}
        header #branding h1 {
            margin: 0;
        }
        header nav {
            float: right;
            margin-top: 10px;
			margin-right: 5px;
        }
        header .highlight, header .current a {
            color: #3498db;
            font-weight: bold;
        }
        header a:hover {
            color: #ecf0f1;
            font-weight: bold;
        }
        #showcase {
            min-height: 400px;
            background: url('/images/USBStuff_background_image_1200x400.webp') no-repeat center;
            background-size: cover;
            text-align: center;
            color: #ffffff;
			-webkit-box-shadow: 0 5px 10px #aaa;
            -moz-box-shadow: 0 5px 10px #aaa;
            box-shadow: 0 5px 10px #aaa;
        }
        #showcase h1 {
            margin-top: 100px;
            font-size: 55px;
            margin-bottom: 10px;
        }
        #showcase p {
            font-size: 20px;
        }
        #boxes {
            margin-top: 20px;
        }
        #boxes .box {
            float: left;
            width: 30%;
            padding: 10px;
            text-align: center;
        }
        #boxes .box img {
            width: 90px;
        }
        .button_1 {
            height: 38px;
            background: #3498db;
            border: none;
            padding-left: 20px;
            padding-right: 20px;
            color: #ffffff;
        }
        /* Footer Styles */
         footer {
            background: #2c3e50;
            color: #ffffff;
            text-align: center;
            padding: 20px 0;
            margin-top: auto;
        }
		footer a {
			text-decoration: none;
			color: #FC0;
		}
        .footer-content {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .footer-section {
            margin: 10px;
        }
        .footer-section h3 {
            margin-bottom: 10px;
        }
        .footer-section ul {
            list-style-type: none;
            padding: 0;
        }
        .footer-section ul li {
            margin-bottom: 5px;
        }
        .footer-section ul li a {
            color: #ecf0f1;
            text-decoration: none;
        }
        .footer-section ul li a:hover {
            color: #3498db;
        }
        .footer-bottom {
            background: #34495e;
            padding: 10px 0;
        }
		.cart-button {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: white;
            color: black;
            padding: 15px;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            z-index: 9999; /* High z-index to stay above other content */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease;
        }
        
        .cart-button:hover {
            transform: scale(1.1);
        }
		/* [Slideshow] */
.Slideshow { position: relative; }
.SlideList, Slide { margin: 0; padding: 0; list-style: none; }
.Slide { overflow: hidden; }
.SlideshowButtons { margin: 0; padding: 0; left: 1em; bottom: 1em; position: absolute; display: none; }
.SlideshowButton { margin: 0 1em 0 0; padding: 0; float: left; list-style: none; }
.SlideshowButtonLink { float: left; width: 20px; height: 20px; text-indent: -9999px; border: 3px solid #222; border-radius: 50%; }
.SlideshowButtonLinkCurrent { background: #222; }
.SlideshowButtonLink:focus { outline: none; }

.SlideshowPrevious { position: absolute; left: 8px; color: #fff;/* background: url("/images/SlideshowPrevious.webp") no-repeat;*/ font-size: 0px; line-height: 0px; }
.SlideshowNext { position: absolute; right: 8px;/* background: url("/images/SideshowNext.webp") no-repeat;*/ font-size: 0px; line-height: 0px; }

.SlideshowPreviousLink { color: #fff; padding: 36px; display: block; }
.SlideshowNextLink { color: #FFFFFF; display: block; padding: 36px; }
.toggle-switch { position: relative; display: inline-block; width: 3.75em; height: 2.125em; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.toggle-slider:before { position: absolute; content: ""; height: 1.625em; width: 1.625em; left: 0.25em; bottom: 0.25em; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .toggle-slider { background-color: #2196F3; }
input:focus + .toggle-slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .toggle-slider:before { -webkit-transform: translateX(1.625em); -ms-transform: translateX(1.625em); transform: translateX(1.625em); }
.toggle-slider.round { border-radius: 2.125em; }
.toggle-slider.round:before { border-radius: 50%; }
/* [/ToggleSlider] *//* [Widget194] */
.Control_194 { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #ededed; padding: 8px; }
.ControlHeader_194 {  }
.ControlItem_194 {  }
.ControlLink_194 {  }
.ControlLink_194:hover {  }
.ControlLink_194 a {  }
.ControlLink_194 a:hover {  }
.ControlLink_Link_194 {  }
.ControlLink_Link_194:hover {  }
.ControlLinkSeperator_194 {  }
.ControlText_194 {  }
.ControlInput_194 {  }
.ControlFooter_194 {  }
.Slideshow_194 { position: relative; }
.SlideList_194 { margin: 0; padding: 0; list-style: none; }
.Slide_194 { overflow: hidden; }
.SlideshowButtons_194 { padding: 0; bottom: 10px; left: 10px; position: absolute; }
.SlideshowButton_194 { margin: 0 10px 0 0; padding: 0; float: left; list-style: none; height: 28px; line-height: 28px; }
.SlideshowButtonLink_194 { float: left; height: 28px; line-height: 28px; border: 1px solid#ccc; background: #DAF3F8; color: #555; padding: 0 10px; text-decoration: none; }
.SlideshowButtonLinkCurrent_194 { background: #5DC9E1; color: #fff; }
.SlideshowButtonLink:focus_194 { outline: none; }

.Slideshow img { max-width: 100%; }
/* [/Slideshow] */

		.sb-container { display:flex;flex:100%;align-items:flex-start;flex-direction:column;justify-content:center;padding:0;position:relative;z-index:200;height:100%}
		.sb-container-fixed { max-width:1024px}
		#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 30px;
  z-index: 99;
  font-size: 12px;
  border: none;
  outline: none;
  background-color: #f39c12;
  color: white;
  cursor: pointer;
  padding: 12px;
  border-radius: 50%;
}

#myBtn:hover {
  background-color: #555;
}
        /* Updated Dropdown Menu Styles */
        .menu-toggle {
            display: none;
        }
        .nav-menu {
            display: flex;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .nav-menu > li {
            position: relative;
        }
        .nav-menu > li > a {
	display: block;
	padding: 15px 20px 15px 20px;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #34495e;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 99;
			border-radius: 12px;
        }
        .dropdown-content a {
            color: #ffffff;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropdown-content a:hover {
            background-color: #2c3e50;
        }
        .nav-menu li:hover .dropdown-content {
            display: block;
        }
		/* Search Styles */
		#searchInput {
	width: 100%;
	padding: 8px;
	font-size: 12px;
	margin-bottom: 0px;
	margin-top: 5px;
	box-sizing: border-box;
	border-radius: 12px;
   		}

    	#searchResults .result-item {
        	border-bottom: 1px solid #ddd;
        	padding: 15px 0;
    	}

    	#searchResults .result-item h3 {
        	margin: 0;
        	font-size: 20px;
    	}

    	#searchResults .result-item a {
        	text-decoration: none;
        	color: #007BFF;
    	}

    	#searchResults .result-item a:hover {
        	text-decoration: underline;
   		}

    	#searchResults .result-item p {
			margin: 5px 0 0 0;
			color: #FFF;
    	}
		
		
		
        /* Mobile Styles */
        @media(max-width: 768px) {
            header #branding,
            header nav,
            #boxes .box {
                float: none;
                text-align: center;
                width: 100%;
            }
            header {
                padding-bottom: 20px;
            }
			.center-img,
			.center-txt {
  				display: inline-block;
  				vertical-align: middle;
				margin-left:-20px;
			}
            #showcase h1 {
                margin-top: 40px;
            }
            /* Mobile Menu Styles */
            .menu-toggle {
                display: block;
                cursor: pointer;
                padding: 10px;
                background: #3498db;
                color: white;
                text-align: center;
                font-size: 24px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				border-radius: 15px;
            }
            .nav-menu {
                display: none;
                flex-direction: column;
                width: 100%;
                background-color: #2c3e50;
            }
            .nav-menu.active {
                display: flex;
            }
            .nav-menu > li {
                text-align: center;
            }
            .dropdown-content {
                position: static;
                display: none;
                background-color: #34495e;
            }
            .dropdown-content a {
                color: white;
            }
            .nav-menu li:hover .dropdown-content {
                display: none;
            }
            .nav-menu li.active .dropdown-content {
                display: block;
            }
            /* Footer Mobile Styles */
            .footer-content {
                flex-direction: column;
            }
            .footer-section {
                margin: 10px 0;
            }
        }
/* short product card styles */
.short-product-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.5rem;
  background: var(--light-bg);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-bottom: 2rem;
}

.product-thumb {
  width: 140px;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

.product-link {
  text-decoration: none;
}

.product-title {
  font-size: 1.25rem;
  color: var(--primary);
  margin: 0 0 0.5rem;
}

.short-desc {
  grid-column: 2;
  margin: 0 0 1rem;
  color: var(--text);
  line-height: 1.4;
}

.buy-box {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.price {
  font-size: 1.5rem;
  color: var(--accent);
}

.add-to-cart {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-label {
  font-size: 0.9rem;
}

.quantity {
  width: 3rem;
  padding: 0.3rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn-primary {
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-primary:hover {
  background: var(--primary);
}

/* ensure the <hr> matches the style */
hr {
  border: none;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin: 2rem 0;
}
/* styles.css additions */
.product-page {
  padding: 4rem 0;
  background: var(--light-bg);
}
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.product-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.product-details {
  display: flex;
  flex-direction: column;
}
.product-title {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.buy-box {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1rem 0;
}
.price {
  font-size: 1.75rem;
  color: var(--accent);
}
.add-to-cart {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.quantity {
  width: 4rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.btn-primary {
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}
.btn-primary:hover {
  background: var(--primary);
}

.short-desc,
.long-desc {
  margin: 1rem 0;
  line-height: 1.6;
  color: var(--text);
}

.additional-links {
  margin-top: 2rem;
}
.additional-links ul {
  list-style: disc inside;
  margin-top: 0.5rem;
}
.additional-links a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.3s;
}
.additional-links a:hover {
  color: var(--accent);
}

/* Responsive */
@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}
/* Add to your styles.css */

/* Prod‑Card Component */
.prod-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--light-bg);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.prod-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.prod-link {
  text-decoration: none;
  color: inherit;
  text-align: center;
  width: 100%;
}

.prod-thumb {
  max-height: 166px;
  width: auto;
  object-fit: contain;
  margin-bottom: 0.75rem;
}

.prod-name {
  font-size: 1.1rem;
  color: var(--primary);
  margin: 0.5rem 0;
  line-height: 1.2;
}

.prod-buybox {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.price {
  font-size: 1.25rem;
  color: var(--accent);
}

.add-to-cart {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qty-label {
  font-size: 0.9rem;
}

.qty-input {
  width: 3rem;
  padding: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-left: 0.25rem;
}

.btn-primary.small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 600px) {
  .prod-card {
    padding: 0.75rem;
  }
  .prod-name {
    font-size: 1rem;
  }
  .price {
    font-size: 1.1rem;
  }
}