/* 
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;
		}
		/* =========================
		MAIN HEADER
		========================= */
		.main-header {
			/* background: rgb(41, 66, 114); */
			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: 15px;
		}
		.contact-info a {
			color: #fff;
			text-decoration: none;
			font-weight: bold;
			font-size: 19px;
			display: block;
			margin-top: 3px;
		}
		/* =========================   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;
          }
          .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: none;
  }

  .menu-toggle {
    display: block;
  }

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

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

  .search-wrapper {
    height: 44px;
  }

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

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

  /* ---------------- NAVIGATION ---------------- */
  .premium-nav {
    padding: 0;
  }

  .premium-nav-list {
    flex-direction: column;
    background: #0f172a;
  }

  .premium-link {
    padding: 14px 18px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

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

  .premium-item.has-categories.active .category-dropdown {
    display: block; /* show on click */
  }

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

  .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;
  }

  /* Keep hero content visible, elegant overlay */
  .hero-content {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    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;
  }

  /* Hide arrows on touch devices */
  .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;
    }
}