* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }

  /* ---------- Palette (CSS variables) ---------- */
    :root {
      --orange-600: #FF6A00; /* bold orange */
      --orange-400: #FF944D; /* softer orange accent */

      --teal-700: #00796B;  /* deep teal */
      --teal-500: #009688;  /* main teal */
      --teal-300: #4DB6AC;  /* light teal background */

      --white: #ffffff;
      --gray-100: #f8f9fa;
      --gray-400: #b0b0b0;
      --black: #1a1a1a;

      --shadow: 0 10px 25px rgba(0,0,0,0.12);
    }

    /* ---------- Base styling ---------- */
 
   /* Center page layout */


    body {
      margin:0;
      font-family: "Inter", system-ui, sans-serif;
       color:var(--black);
      padding:32px;
	  
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
	img { display: block; max-width: 100%; height: auto; }
	a {
      text-decoration:none;  color:#00796B;      
    }
/* ---------- Header ---------- */
    header {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
    }
    .brand {
      display:flex;
      align-items:center;
      gap:12px;
    }
    .logo {
      width:148px;
      height:48px;
      border-radius:10px;
        display:flex;
      align-items:center;
      justify-content:center;
      color:var(--white);
      font-weight:700;
      font-size:18px;
      box-shadow:var(--shadow);
    }
    nav a {
      text-decoration:none;
      color:var(--teal-700);
      font-weight:600;
      margin-left:12px;
    }

/* ===== HEADER ROW 1 ===== */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2c3e50;
  padding: 10px 20px;
  color: white;
}

.logo { font-size: 20px; font-weight: bold; }

.nav-links a {
  margin-left: 15px;
  text-decoration: none;
  color: white;
  font-size: 14px;
}

/* ===== HEADER ROW 2 ===== */
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--silver);
  padding: 10px;
  gap: 10px;
}

.search-bar input {
  width: 60%;
  padding: 8px;
  border: 1px solid var(--cyan);
  border-radius: 6px;
  outline: ridge;
}

.location-select {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--blue);
}

.quick-order {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.quick-order:hover {
  background: var(--cyan);
}
 
 /* --------- FILTERS --------- */
.filters select,
.filters input {
    padding: 8px;
    margin-right: 8px;
}

/* --------- PRODUCT GRID --------- */
.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.product-card {
    width: 23%;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* --------- PAGINATION (CENTER) --------- */
/* --------- PAGINATION (CENTER + BLOCK SEPARATION) --------- */
.pagination {
    width: 100%;
    text-align: center;
    margin: 30px;
    clear: both; /* prevents overwrite by product float/grid */
}

.pagination a {
    display: inline-block;       /* ensures horizontal buttons */
    padding: 2px 8px;
    margin: 0 2px;
    border: 1px solid #444;
    border-radius: 4px;
    text-decoration: none;
    font-size: 15px;
    color: #444;
    background: #fff;
}

.pagination a:hover {
    background: #444;
    color: #fff;
}

.pagination a.active {
    background: #444;
    color: #fff;
    border-color: #444;
}



 /* ---------- Buttons ---------- */
    .btn {
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 16px;
      border:none;
      border-radius:10px;
      cursor:pointer;
      font-weight:700;
      font-size:14px;
      box-shadow:var(--shadow);
      transition:all 0.15s ease;
    }
    .btn:hover { transform:translateY(-1px); }

    .btn--orange { background:var(--orange-600); color:var(--white); }
    .btn--teal { background:var(--teal-500); color:var(--white); }
    .btn--white { background:var(--white); color:var(--teal-700); border:1px solid #ddd; }


/* ---------- Palette Swatches ---------- */
    .swatches {
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      align-items:center;
    }
    .swatch {
      width:140px;
      border-radius:12px;
      overflow:hidden;
      background:var(--white);
      border:1px solid #eee;
      box-shadow:var(--shadow);
    }
    .swatch .color { height:72px; }
    .swatch .meta {
      padding:10px;
      font-size:13px;
      color:var(--gray-400);
    }
    .swatch .meta strong {
      display:block;
      color:var(--black);
      margin-bottom:4px;
    }
/* ===== HEADER ROW 3 (Dropdown Categories) ===== */
 
.category-header {
  background: #d9e3f0;
  padding: 10px 20px;
  width:100%;
  border-radius:12px;background: var(--teal-500); 
  display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:800;"
}
.category-menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.category-menu > li {
  position: relative;
}

.category-menu > li > a {
  text-decoration: none;
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  display: block;
}

.category-menu > li:hover > a {
  background: #2c3e50;
  border-radius: 4px;
}

/* Dropdown Menu */
.dropdown {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  background: white;
  list-style: none;
  min-width: 180px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 1000;
}

.dropdown li a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  display: block;
  font-size: 14px;
}

.dropdown li a:hover {
  background: #ecf0f1;
}

/* Show dropdown on hover */
.category-menu li:hover .dropdown {
  display: block;
}

/* ===== HERO SECTION ===== */
.hero {
  display: flex;
  margin: 10px;
  gap: 10px;
}

.slider {
  flex: 70%;
  max-height: 200px;
  overflow: hidden;
  position: relative;
}

.slides img {
  width: 100%;
  height: 200px;
  display: block;
}

.static-ad {
  flex: 30%;
  max-height: 200px;
  position: relative;
}

.static-ad img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.order-btn {
  position: absolute;
  bottom: 10px;
  left: 20px;
  padding: 8px 15px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ===== CATEGORY SECTION ===== */
.categories {
  margin: 20px;
}

.category-row {
  display: flex;
  align-items: center;
  margin: 10px 0;
  max-height: 300px;
}

.category-items {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  flex: 1;
}

.category-items::-webkit-scrollbar { display: none; }

.item {
  min-width: 160px;
  height: 300px;                 /* Fixed card height */
  display: flex;
  flex-direction: column;        /* Stack items vertically */
  justify-content: space-between;/* Align button bottom */
  text-align: center;
  background: white;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-size:14px;
}

.item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: 10px;
}

.title, .price {
  margin-bottom: 10px;
}

.scroll-btn {
  background: var(--teal-500);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 50%;
}

/* MAIN LAYOUT */
.container {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.row { display: flex; flex-wrap: wrap; margin: -10px; }
.col { padding: 10px; flex: 1; }
.col-6 { flex: 0 0 50%; }
.col-4 { flex: 0 0 33.33%; }
.col-3 { flex: 0 0 25%; }
/* Secondary button */
.btn-secondary {
    background: #6c757d;
}
.btn-secondary:hover {
    background: #565e64;
}

/* Success button */
.btn-success {
    background: #28a745;
}
.btn-success:hover {
    background: #1b7d31;
}

/* ====== TABLE ====== */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
.table th, .table td {
    padding: 12px;
    border: 1px solid #ddd;
}
.table th {
    background: #f8f9fa;
    font-weight: bold;
}

/* ====== FORM ====== */
.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 12px;
}
/* ===== FORM CHECK ===== */
.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: #28a745; /* green checkbox tick */
}

.form-check-label {
    font-size: 15px;
    cursor: pointer;
}
/* ====== CARD ====== */
.card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 15px;
    margin-bottom: 20px;
}
.card h4 {
    margin-bottom: 12px;
    font-size: 18px;
}

/* ====== HEADER & BADGES ====== */
.badge {
    background: #dc3545;
    color: #fff;
    padding: 4px 8px;
    border-radius: 50%;
    font-size: 12px;
}
/* Card header */
.card-header {
    background: #f8f9fa;
    padding: 12px 16px;
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}

/* Card body */
.card-body {
    padding: 16px;
    font-size: 15px;
}
 
/* Sidebar */
.sidebar {
  width: 25%;
  background: #fff;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  
}

/* Products */
.products {
  width: 75%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

/* Product Card */
.product-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  transition: 0.3s;
  cursor: pointer;
}
.product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.product-card img {
  max-width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
}
.product-name { font-size: 14px; min-height:40px; }
.price { color: #e74c3c; font-size: 18px; font-weight: bold; }
.rating { color: #f39c12; margin: 5px 0; }
.add-cart {
  background: #27ae60;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 5px;
}
.add-cart:hover { background: #219150; }

    /* ===== MODAL ===== */
    .modal {
      display: none; position: fixed; z-index: 999;
      left: 0; top: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.6); justify-content: center; align-items: center;
    }
    .modal-content {
      background: #fff; padding: 20px; border-radius: 8px;
      width: 600px; max-width: 95%; text-align: left; position: relative;
    }
    .modal-content img {max-width: 100%; height: 250px; object-fit: cover; border-radius: 6px;}
    .modal h2 {margin: 10px 0;}
    .modal .price {font-size: 20px;}
    .modal .rating {margin: 5px 0;}
    .modal .desc {margin: 10px 0; color: #555;}
    .quantity {margin: 10px 0;}
    .modal button {
      margin-right: 10px; padding: 10px 15px; border: none;
      border-radius: 4px; cursor: pointer;
    }
    .btn-cart {background: #27ae60; color: #fff;}
    .btn-buy {background: #e67e22; color: #fff;}
    .close-btn {
      position: absolute; top: 10px; right: 15px; font-size: 20px; cursor: pointer;
    }


/* Product Detail Specific*/
 .grid{display:flex;gap:18px;align-items:flex-start}
  .gallery{width:2500px;background:#fff;padding:12px;border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,0.06)}
  .gallery-main{width:100%;height:420px;border-radius:8px;overflow:hidden}
  .gallery-main img{width:100%;height:100%;object-fit:contain}
  .thumbs{display:flex;gap:8px;margin-top:8px}
  .thumbs img{width:80px;height:60px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent}
  .thumbs img.active{border-color:#009688}
  .details{flex:1;background:#fff;padding:18px;border-radius:10px;box-shadow:0 10px 20px rgba(0,0,0,0.06)}
  .ptitle{font-size:20px;font-weight:800;margin-bottom:6px}
  .pprice{font-size:18px;color:#00796B;margin-bottom:12px}
  .desc{color:#555;margin-bottom:14px}
  .qty{display:flex;gap:8px;align-items:center}
  .qty button{padding:8px 12px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
  .add-cart {
  padding: 12px 15px; /* make button shape perfect */
}

.add-cart i {
  font-size: 20px;
  margin-right: 0;
}
  .related{margin-top:18px}
  .related .item{display:inline-block;width:150px;margin-right:12px;vertical-align:top}
   .back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--teal-700);
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--gray-100);
  transition: 0.25s ease;
  margin: 15px;
  
}

/* Hover effect */
.back:hover {
  background: var(--teal-500);
  color: white;
  transform: translateX(-3px);
}
/* ===== CART PAGE EXTRA STYLES ===== */
    .cart-container {
      display: flex;
      padding: 20px;
      gap: 20px;
    }
    .cart-items {
      flex: 70%;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 15px;
    }
    .cart-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding: 10px 0;
    }
    .cart-item img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 6px;
      margin-right: 15px;
    }
    .cart-item-details {
      flex: 1;
    }
    .cart-item-details h4 {
      margin: 0 0 5px;
    }
    .cart-item-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .cart-item-actions input {
      width: 50px;
      text-align: center;
    }
    .cart-summary {
      flex: 30%;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      height: fit-content;
    }
    .cart-summary h3 {
      margin-bottom: 15px;
    }
    .cart-summary .line {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .cart-summary button {
      width: 100%;
      padding: 12px;
      background: #27ae60;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .cart-summary button:hover {
      background: #219150;
    }
	/* ===== ACTION BUTTONS ===== */
.actions {
  padding: 4px 4px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.update {
  background: var(--orange-600);
}
.update::before {
  content: "";
}
.update:hover {
  background: #e25800;
}

.remove {
  background: #d32f2f;
}
.remove::before {
  content: "";
}
.remove:hover {
  background: #b71c1c;
}
/* Responsive fixes */
@media (max-width: 600px) {
  .back {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 12px;
  }
}


 /* ===== Confirmation Page Styles ===== */
    .confirmation {
      text-align: center;
      background: white;
      margin: 20px auto;
      padding: 30px;
      max-width: 600px;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .confirmation .icon {
      font-size: 60px;
      color: #27ae60;
      margin-bottom: 15px;
    }
    .confirmation h2 {
      color: #2c3e50;
      margin-bottom: 10px;
    }
    .confirmation p {
      margin: 5px 0;
      color: #555;
    }
    .confirmation .btns {
      margin-top: 20px;
    }
    .confirmation .btns a {
      text-decoration: none;
      padding: 10px 20px;
      margin: 5px;
      border-radius: 5px;
      font-weight: bold;
      display: inline-block;
    }
    .btn-orders {
      background: #27ae60;
      color: white;
    }
    .btn-shop {
      background: #3498db;
      color: white;
    }
   /* ================== FOOTER ================== */
.footer-container { background: var(--teal-500); padding: 40px 20px; border-radius: 12px; box-shadow: var(--shadow); color: var(--white); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; margin-left:20px;}
.footer-section h3, .footer-section h4 { color: #ffd700; margin-bottom: 15px; font-weight: 700; }
.footer-section a { color: #ddd; display: block; margin-bottom: 8px; font-size: 14px; text-decoration: none; transition: all 0.3s ease;}
.footer-section a:hover { color: #ffd700; }
.footer-bottom { margin-top: 35px; text-align: center; border-top: 1px solid #333; padding-top: 20px; color: #bbb; }