/* 
1. root			6. contact-info, a, 				11. header icons
2. body			7. search bar						12. cart-count | premium-nav | new-badge | menu-toggle |
3. top-bar, a, 	8. user-dropdown					13. new-hero-section | new-slider | Slide image
4. main-header	9. 		14. new-sidebar | Thumb  | Pagination | 
5. logo-img, 	10.
	/* ####----MOBILE & RESPONSIVE -- 
		(Header & Icons, Navigation + Hero base mobile, Hero sizing 
	 	Grid Layout, Small phones, Hide hero content on mobile, Footer)
*/

		:root {
			--red: #e30613;
			--black: #000000;
			--gray: #f5f5f5;
			--darkgray: #111111;
		}
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			font-family: Arial, Helvetica, sans-serif;
			line-height: 1.5;
		}
		/* =========================TOP BAR========================= */
		.top-bar {
			background: rgb(236, 199, 104);
			padding: 10px 20px;
			text-align: center;
			font-weight: 600;
			font-size: 15px;
			color:black;
		}
		.top-bar a {
			color: #fff;
			text-decoration: none;
			margin-left: 8px;
			font-weight: bold;
		}
		/* =====================Background TOP BAR=================MAIN HEADER ========================= */
		.main-header {
			background: rgb(125, 148, 62);
			padding: 0px 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 15px;
			color: #fff;
			height: 120px;           /* adjust to fit logo comfortably */
    box-sizing: border-box;  /* ensures padding included in height */
		}
		.logo img {
			height: 100px;
			margin: 0;               /* remove negative margins */
    display: block;
    object-fit: contain;     /* preserves aspect ratio */
		}
		.contact-info {
			text-align: center;
			font-size: 13px;
		}
		.contact-info a {
			color: #fff;
			text-decoration: none;
			font-weight: bold;
			font-size: 19px;
			display: block;
			margin-top: 3px;
		}
		.contact-info .phone {
			font-weight: 600;
			color: #000;
			text-decoration: none;
			 font-size: 14px;   /* keep phone readable */
        }
		     
		/* =========================   SEARCH BAR ========================= */
		.search-bar {
		/*flex: 1;
		max-width: 500px;*/
			max-width: 100%;
		}
		.search-wrapper {
			display: flex;
			height: 46px;
			background: #fff;
			border-radius: 6px;
			overflow: hidden;
			box-shadow: 0 2px 8px rgba(0,0,0,.2);
		}
		.search-bar select {
			padding: 0 12px;
			border: none;
			background: #f8f8f8;
			font-size: 14px;
		}
		.search-bar input {
			flex: 1;
			border: none;
			padding: 0 15px;
			font-size: 15px;
		}
		.search-wrapper select,
		.search-wrapper input {
			min-width: 0;
		}
		.search-bar button {
			width: 52px;
			border: none;
			background: #fff;
			font-size: 19px;
			cursor: pointer;
		}
		.search-bar button:hover {
			color: var(--red);
		}
        /*======================== User dropdown =========================*/
		.user-dropdown {
		position: relative;
		display: inline-block;
		}
		.user-dropdown .user-name {
		color: #fff;
		text-decoration: none;
		cursor: pointer;
		font-size: 12px;
		}
		.user-dropdown .user-name i.fas.fa-caret-down {
		margin-left: 5px;
		}
		.user-dropdown .dropdown-menu {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		background: #222;
		list-style: none;
		padding: 5px 0;
		min-width: 140px;
		border-radius: 5px;
		z-index: 100;
		}
		.user-dropdown:hover .dropdown-menu {
		display: block;
		}
		.user-dropdown .dropdown-menu li a {
		display: block;
		color: #fff;
		padding: 8px 12px;
		text-decoration: none;
		font-size: 14px;
		}
		.user-dropdown .dropdown-menu li a:hover {
		background: #444;
		}
        /*======================== Waiting approval ========================*/
        .waiting-approval {
            color: #ccc;
            font-weight: bold;
            cursor: default;
        }
		
		/* =========================		HEADER ICONS		========================= */
		.header-icons a {
			margin-left: 28px;
			color: #fff;
			font-size: 22px;
			text-decoration: none;
			position: relative;
			display: inline-flex;
			align-items: center;
		}
		.header-icons a:hover {
			color: var(--red);
		}
		.desk-only {
			margin-left: 6px;
			font-size: 14px;
		}
		.cart-count {
			position: absolute;
			top: -8px;
			right: -12px;
			background: var(--red);
			color: #fff;
			font-size: 11px;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		/* Check this*/
		.new-badge {
			background: orange;
			color: black;
			font-size: 10px;
			padding: 3px 7px;
			border-radius: 4px;
			margin-left: 8px;
			font-weight: bold;
		}
		.menu-toggle {
			display: none;
			color: white;
			font-size: 28px;
			cursor: pointer;
		}
		.thumb {
			position: relative;
			width: 100%;
			height: 200px;
			overflow: hidden;
		}
		.thumb img {
			width: 100%;
			height: 100%;
			object-fit: contain;   /* fit entire image */
			background-color: #fff; /* optional: fill empty space */
		}
		.thumb-item {
			position: relative;
			border-radius: 8px;
			overflow: hidden;
			cursor: pointer;
			transition: all 0.4s ease;
			box-shadow: 0 6px 20px rgba(0,0,0,0.5);
			border: 3px solid transparent;
		}
		.thumb-item:hover {
			transform: translateY(-6px);
			box-shadow: 0 15px 35px rgba(227,6,19,0.4);
		}
		.thumb-item.active {
			border: 3px solid #e30613;
			box-shadow: 0 0 25px rgba(227,6,19,0.7);
		}
		.thumb-item img {
    		width: 100%;
    		height: 100%;
    		object-fit: contain; /* no cropping */
    		display: block;
		}
		.thumb-item:hover img {
			transform: scale(1.08);
		}
		.thumb-title {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(transparent, rgba(0,0,0,0.9));
			color: #fff;
			padding: 18px 10px 10px;
			font-size: 0.9rem;
			font-weight: 700;
			text-align: center;
			text-shadow: 0 2px 8px rgba(0,0,0,0.9);
		}
	/* =========================	PAGINATION	========================= */
		.pagination-wrapper {
			display: flex;
			justify-content: center;
			margin: 40px 0;
		}
		.pagination {
			display: flex;
			gap: 8px;
		}
		.pg-box {
			width: 36px;
			height: 36px;
			border: 1px solid #ccc;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.qty-wrapper {
			transition: opacity 0.3s ease;
		}
		.qty-wrapper.hidden {
			opacity: 0;
			height: 0;
			overflow: hidden;
		}
	/* modal */ /* Modal overlay */    /* Modal overlay */
		.modal {
			display: none;
		/* Hidden by default */
			position: fixed;
			z-index: 9999;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.7);
			backdrop-filter: blur(4px);
			animation: fadeIn 0.5s ease forwards;
		}
		@keyframes fadeIn {
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}
			/* Modal content */
		.modal-content {
			background: #fff;
			width: 90%;
			max-width: 500px;
			margin: 10% auto;
			border-radius: 12px;
			padding: 25px 20px;
			text-align: center;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			box-shadow: 0 10px 40px rgba(0,0,0,0.3);
			position: relative;
			animation: slideIn 0.5s ease forwards;
		}
		@keyframes slideIn {
			from {
				transform: translateY(-50px);
				opacity: 0;
			}

			to {
				transform: translateY(0);
				opacity: 1;
			}
		}
		.modal-header h2 {
			margin-bottom: 15px;
			font-size: 22px;
			color: #222;
		}
		.modal-body p {
			margin: 10px 0;
			font-size: 15px;
			color: #555;
			line-height: 1.5;
		}
		.modal-body .contact {
			margin: 20px 0;
			font-size: 14px;
		}
		.modal-body .contact span {
			display: block;
			margin: 5px 0;
			font-weight: 600;
		}
		.modal-footer {
			margin-top: 20px;
		}
		.btn-order {
			background: #222;
			color: #fff;
			font-size: 16px;
			padding: 12px 20px;
			border-radius: 6px;
			text-decoration: none;
			font-weight: bold;
			transition: 0.3s;
			display: inline-block;
			width: 100%;
			max-width: 250px;
		}
		.btn-order:hover {
			background: #555;
		}
		.close {
			position: absolute;
			top: 10px;
			right: 15px;
			font-size: 26px;
			font-weight: bold;
			color: #999;
			cursor: pointer;
			transition: 0.3s;
		}
		.close:hover {
			color: #222;
		}
		.modal-image {
			width: 80%;       /* Adjust width as needed */
			max-width: 250px; /* Maximum size */
			height: auto;     /* Maintain aspect ratio */
			display: block;
			margin: 0 auto;   /* Center horizontally */
			border-radius: 10px; /* Optional: rounded corners */
		}
	/* =============MOBILE & RESPONSIVE (CLEAN — NO DUPLICATES)=============================== */
	/* =====================================================   MOBILE ENHANCEMENTS ONLY (≤ 768px)   Desktop remains untouched	===================================================== */
		@media (max-width: 768px) {

			/* ---------------- HEADER ---------------- */
			.top-bar {
				font-size: 13px;
				padding: 8px 10px;
			}

			.main-header {
				flex-wrap: wrap;
				padding: 10px 12px;
				gap: 10px;
			}

			.logo img {
				height: 58px;
				margin: 0;
			}

			.contact-info,
			.desk-only {
				display: block;
			}

			.menu-toggle {
				display: block;
			}

			.header-icons a {
				margin-left: 18px;
				font-size: 20px;
			}

		/* ---------------- SEARCH ---------------- */
		.search-bar {
			order: 3;
			width: 100%;
			margin-top: 8px;
			display: flex;
		}

		.search-wrapper {
			height: 44px;
			display: flex;
		}

		.search-bar select {
			max-width: 140px;
			font-size: 13px;
		}

		.search-bar input {
			font-size: 14px;
		}

		/* ---------------- NAVIGATION (MOBILE FIX) ---------------- */

		/* Keep nav container alive (DO NOT HIDE) */
		/* Nav container stays available */
		.premium-nav {
			padding: 0;
		}

		/* Nav list controlled by JS inline styles */
		.premium-nav-list {
			flex-direction: column;
			background: #0f172a;
		}

		/* Hide ALL nav items */
		/* Hide ALL nav items */
		.premium-nav-list > li {
			display: none;
		}

		/* Show ONLY category parent */
		.premium-nav-list > li.has-categories {
			display: block;
		}

		.premium-link {
			padding: 14px 18px;
			font-size: 15px;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #0f172a;
			color: #fff;
			border-bottom: 1px solid rgba(255,255,255,0.1);
		}

		/* ---------------- CATEGORY DROPDOWN (CLICK) ---------------- */
		.category-dropdown {
			position: static;
			display: none; /* hidden by default */
			grid-template-columns: 1fr;
			box-shadow: none;
			border-radius: 0;
			padding: 0;
			background: #fff;
		}

		/* 
		.premium-item.has-categories.active .category-dropdown {
			display: block;
		}
			*/
		/* IMPORTANT: match JS class */
		.premium-item.has-categories.open .category-dropdown {
			display: block;
		} 

		.category-dropdown a {
			padding: 12px 20px;
			margin: 0;
			border-bottom: 1px solid #eee;
			color: #333;
		}

		.category-dropdown a:last-child {
			border-bottom: none;
		}

		/* ---------------- HERO ---------------- */
		.new-hero-section {
			padding: 25px 0;
		}

		.new-hero-grid {
			flex-direction: column;
			gap: 0;
			padding: 0;
			align-items: center;
		}

		.new-slider-container {
			width: 100%;
			height: auto;
			aspect-ratio: 16 / 9;
			border-radius: 0;
		}

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

		.hero-content {
			position: relative;
			padding: 20px 16px 10px;
			text-align: center;
			width: 100%;
			background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.55));
		}

		.hero-content h1 {
			font-size: 2.1rem;
			line-height: 1.25;
			margin-bottom: 12px;
		}

		.hero-content p {
			font-size: 1.1rem;
			margin-bottom: 18px;
		}

		.btn-primary {
			padding: 14px 36px;
			font-size: 1rem;
		}

		.new-prev,
		.new-next {
			display: none;
		}

		/* ---------------- SIDEBAR ---------------- */
		.new-sidebar {
			display: none;
		}

		/* ---------------- GRID ---------------- */
		.grid {
			grid-template-columns: 1fr;
			gap: 16px;
		}

		/* ---------------- FOOTER ---------------- */
		.footer-top {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;
		}

		.footer-column:nth-child(2) {
			display: none;
		}

		.footer-column:nth-child(1) {
			grid-column: 1;
		}

		.footer-column:nth-child(3) {
			grid-column: 2;
		}

		.footer-column.last {
			grid-column: 1 / -1;
			text-align: center;
			margin-top: 20px;
		}

		/* ---------------- MODAL ---------------- */
		.modal-content {
			margin: 18% auto;
			padding: 20px 15px;
		}

		.modal-header h2 {
			font-size: 20px;
		}

		.modal-body p,
		.modal-body .contact {
			font-size: 14px;
		}

		.btn-order {
			font-size: 15px;
			padding: 10px 15px;
		}
		}
	/* =====================================================   SMALL PHONES (≤ 480px) ===================================================== */
		@media (max-width: 480px) {

		.hero-content h1 {
			font-size: 1.9rem;
		}

		.hero-content p {
			font-size: 1rem;
		}

		.btn-primary {
			padding: 13px 32px;
		}

		.logo img {
			height: 54px;
		}
		}
/* navigation bar*/
@media (max-width: 768px) { /* adjust breakpoint as needed */
    .topline {
        display: none;
    }
}