/* ── GLOBAL ── */
      :root {
        /* BRAND */
        --primary-blue: #1f7ae0;
        --primary-green: #4caf50;
        --primary-gradient: linear-gradient(135deg, #1f7ae0, #4caf50);

        --primary: #1f7ae0;
        --primary-dark: #155bb5;
        --primary-light: #e8f1fc;

        --secondary: #4caf50;
        --accent: #36a56a;

        /* UI */
        --bg-light: #f8fafc;
        --bg-white: #ffffff;

        --text-dark: #212121;
        --text-medium: #666666;
        --text-light: #999999;

        --border: #e5e7eb;

        --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);

        --radius: 8px;
        --radius-lg: 14px;

        --font: "Inter", sans-serif;
      }
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: var(--font);
        color: var(--text-dark);
        background: var(--bg-white);
        overflow-x: hidden;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      ul {
        list-style: none;
      }
      img {
        max-width: 100%;
        display: block;
      }

      /* ── TOP BANNER ── */
      .top-banner {
        background: var(--primary);
        color: #fff;
        text-align: center;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.3px;
        display: flex;
        justify-content: space-between;
      }
      .top-banner span {
        margin: 0 12px;
      }

      .contactIcon {
        margin: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition: color 0.2s;
        gap: 6px;
      }
      .contactIcon a {
        margin-left: 20px;
        color: #fff;
        transition: color 0.2s;
        gap: 6px;
      }

      @media (max-width: 480px) {
        .contactIcon{
          width: 80%;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
        }
        .contactIcon a {
          font-size: 10px;
          margin-left: 10px;
        }
        .top-banner {
         display: flex;
         justify-content: space-between;
          gap: 8px;
        }
        .hideHeader {
          display: none;
        }
      }

      /* ── HEADER ── */
      header {
        background: var(--bg-white);
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s;
      }
      .navbar {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
        height: 64px;
        gap: 20px;
      }

      /* ── LOGO ── */
      .logo {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }
      /* .logo-icon {
      width: 36px; height: 36px; background: var(--primary);
      border-radius: 8px; display: flex; align-items: center;
      justify-content: center; color: #fff; font-size: 18px;
      font-weight: 700; overflow: hidden;
    } */
      .logo-icon img {
        width: 100px;
        object-fit: cover;
      }
      .logo-text {
        font-size: 20px;
        font-weight: 700;
        color: var(--primary);
        letter-spacing: -0.5px;
      }
      .logo-text span {
        color: var(--text-dark);
      }

      /* ── SEARCH BAR ── */
      /* .search wrapper class required by old index.js outside-click listener */
      .search-bar {
        flex: 1;
        max-width: 600px;
        position: relative;
      }
      .search-bar .search {
        position: relative;
      }
      .search-bar input {
        width: 100%;
        padding: 10px 48px 10px 16px;
        border: 1.5px solid var(--border);
        border-radius: 24px;
        font-size: 14px;
        font-family: var(--font);
        outline: none;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
        background: var(--bg-light);
      }
      .search-bar input:focus {
        border-color: var(--primary);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(2, 140, 126, 0.08);
      }
      .search-bar input::placeholder {
        color: var(--text-light);
      }
      .search-btn {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        background: var(--primary);
        border: none;
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: #fff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
      }
      .search-btn:hover {
        background: var(--primary-dark);
      }

      /* Suggestions dropdown — id="suggestions" required by index.js */
      .search-suggestions {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        z-index: 999;
        display: none;
        max-height: 360px;
        overflow-y: auto;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .search-suggestions li {
        display: flex;
        align-items: center;
        padding: 10px 14px;
        cursor: pointer;
        font-size: 13px;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.15s;
      }
      .search-suggestions li:last-child {
        border-bottom: none;
      }
      .search-suggestions li:hover {
        background: var(--bg-light);
      }

      /* ── NAV LINKS ── */
      .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
        flex-shrink: 0;
      }
      .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: var(--radius);
        font-size: 13px;
        font-weight: 500;
        color: var(--text-dark);
        cursor: pointer;
        transition:
          background 0.2s,
          color 0.2s;
        white-space: nowrap;
      }
      .nav-link:hover {
        background: #e8f5f4;
        color: var(--primary);
      }
      .nav-link i {
        font-size: 15px;
      }
      /* cart-badge class required by old index.js selector */
      .badge,
      .cart-badge {
        background: var(--primary);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s;
      }

      /* ── MOBILE TOGGLE ── */
      .menu-toggle {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 22px;
        color: var(--text-dark);
        margin-left: auto;
      }

      /* ── CATEGORY NAV BAR ── */
      .category-nav {
        background: var(--bg-white);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        scrollbar-width: none;
      }
      .category-nav::-webkit-scrollbar {
        display: none;
      }
      .category-nav-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
      }
      .cat-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-medium);
        cursor: pointer;
        white-space: nowrap;
        border-bottom: 2px solid transparent;
        transition:
          color 0.2s,
          border-color 0.2s;
      }
      .cat-item:hover,
      .cat-item.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
      }
      .cat-item i {
        font-size: 14px;
      }

      /* ── HERO BANNER ── */
      .hero {
        background: #f8f9fa;
        padding: 20px;
      }
      .hero-inner {
        max-width: 1280px;
        margin: 0 auto;
      }
      .hero-banner-img {
        width: 100%;
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-md);
        display: block;
        cursor: pointer;
      }
      .hero-banner-img img {
        width: 100%;
        object-fit: cover;
        display: block;
        border-radius: var(--radius-lg);
      }
      .hero-banner-placeholder {
        width: 100%;
        /* height: 250px; */
        background: linear-gradient(135deg, var(--primary) 0%, #03b09f 100%);
        border-radius: var(--radius-lg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        gap: 12px;
        box-shadow: var(--shadow-md);
      }
      .hero-banner-placeholder i {
        font-size: 48px;
        opacity: 0.6;
      }
      .hero-banner-placeholder p {
        font-size: 16px;
        font-weight: 600;
        opacity: 0.8;
      }
      .hero-banner-placeholder span {
        font-size: 13px;
        opacity: 0.6;
      }

      /* ── OFFER BANNER ── */
      .offer-banner-section {
        max-width: 1280px;
        margin: 0 auto;
        padding: 16px 20px;
      }
      .offer-banner-img {
        width: 100%;
        border-radius: var(--radius-lg);
        overflow: hidden;
        cursor: pointer;
      }
      .offer-banner-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .offer-banner-placeholder {
        width: 100%;
        height: 140px;
        background: linear-gradient(
          90deg,
          #e8f5f4 0%,
          #c3ebe8 50%,
          #e8f5f4 100%
        );
        border-radius: var(--radius-lg);
        /* border: 2px dashed var(--primary); */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: var(--primary);
      }
      .offer-banner-placeholder i {
        font-size: 20px;
      }
      .offer-banner-placeholder span {
        font-size: 14px;
        font-weight: 600;
      }

      /* ── SECTION WRAPPER ── */
      .section {
        max-width: 1280px;
        margin: 0 auto;
        padding: 32px 20px;
      }
      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .section-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-dark);
      }
      .section-title span {
        color: var(--primary);
      }
      .view-all {
        font-size: 13px;
        font-weight: 600;
        color: var(--primary);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        transition: gap 0.2s;
      }
      .view-all:hover {
        gap: 8px;
      }

      /* ── SERVICES GRID ── */
      .services-grid {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 12px;
      }
      .service-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 16px 8px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        cursor: pointer;
        transition:
          border-color 0.2s,
          box-shadow 0.2s,
          transform 0.2s;
        background: var(--bg-white);
        text-align: center;
      }
      .service-card:hover {
        border-color: var(--primary);
        box-shadow: 0 4px 16px rgba(2, 140, 126, 0.1);
        transform: translateY(-2px);
      }
      .service-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
      }
      .service-name {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-dark);
        line-height: 1.3;
      }
      .service-desc {
        font-size: 11px;
        color: var(--text-light);
      }

      /* ── PRODUCT CARDS ── */
     
      .product-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        cursor: pointer;
        transition:
          box-shadow 0.2s,
          transform 0.2s;
        background: var(--bg-white);
        position: relative;
      }
      .product-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
      }
      .product-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: var(--primary);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 4px;
        z-index: 1;
      }
      .product-badge.green {
        background: #059669;
      }
      .product-badge.orange {
        background: #ea580c;
      }
      .product-img {
        width: 100%;
        height: 140px;
        background: var(--bg-light);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .product-img img {
        width: 100%;
        height: 140px;
        object-fit: cover;
        display: block;
      }
      .product-img-placeholder {
        font-size: 56px;
      }
      .product-body {
        padding: 12px;
      }
      .product-name {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 2px;
        line-height: 1.3;
      }
      .product-pack {
        font-size: 11px;
        color: var(--text-light);
        margin-bottom: 8px;
      }
      .product-price {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
      }
      .price-now {
        font-size: 15px;
        font-weight: 700;
        color: var(--text-dark);
      }
      .price-was {
        font-size: 12px;
        color: var(--text-light);
        text-decoration: line-through;
      }
      .price-off {
        font-size: 11px;
        font-weight: 600;
        color: #059669;
      }
      .btn-add {
        width: 100%;
        padding: 8px;
        border: 1.5px solid var(--primary);
        border-radius: 6px;
        background: transparent;
        color: var(--primary);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        font-family: var(--font);
        transition:
          background 0.2s,
          color 0.2s;
      }
      .btn-add:hover {
        background: var(--primary);
        color: #fff;
      }
      .btn-add.added {
        background: var(--primary);
        color: #fff;
      }
      .btn-add:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }

      /* ===== Categories Grid - Two Rows ===== */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: row;
  gap: 20px 16px;
  overflow: visible;
}

.cat-card {
  width: 100%;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s ease;
}

.cat-card:hover {
  transform: translateY(-3px);
}

.cat-card:hover .category-image {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* The square image itself */
.category-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}
.cat-card-name {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

/* Tablet: 3 per row → still wraps into multiple rows */
@media (max-width: 900px) {
  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 per row */
@media (max-width: 480px) {
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }
}

      /* ── TESTIMONIALS ── */
      /* #testimonials-grid required by old index.js /api/reviews render */
      .testimonials {
        background: var(--bg-light);
        padding: 32px 20px;
      }
      .testimonials-inner {
        max-width: 1280px;
        margin: 0 auto;
      }
      .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 20px;
      }
      .testimonial {
        background: var(--bg-white);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 20px;
      }
      .stars {
        color: #f59e0b;
        font-size: 16px;
        margin-bottom: 10px;
      }
      .testimonial-text {
        font-size: 14px;
        color: var(--text-medium);
        line-height: 1.6;
        margin-bottom: 12px;
        font-style: italic;
      }
      .testimonial-author {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 6px;
      }
      .verified-purchase {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        color: #059669;
        font-weight: 600;
      }

      /* ── WRITE A REVIEW (Homepage) ── */
      .home-review-wrap {
        max-width: 500px;
        margin: 50px auto;
        margin-top: 22px;
        background: var(--bg-white);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
        overflow: hidden;
      }
      .home-review-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 18px 14px;
        border-bottom: 1px solid var(--border);
        background: linear-gradient(
          135deg,
          rgba(31, 122, 224, 0.06),
          rgba(76, 175, 80, 0.06)
        );
      }
      .home-review-title {
        font-size: 16px;
        font-weight: 800;
        color: var(--text-dark);
        letter-spacing: -0.2px;
      }
      .home-review-subtitle {
        font-size: 12px;
        color: var(--text-medium);
        margin-top: 4px;
      }
      .home-review-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      .review-select {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 240px;
      }
      .review-select label {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-medium);
      }
      .review-select select {
        padding: 10px 12px;
        border: 1.5px solid var(--border);
        border-radius: 12px;
        background: #fff;
        font-size: 13px;
        outline: none;
      }
      .review-select select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(31, 122, 224, 0.12);
      }
      .rating {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: #fff;
        white-space: nowrap;
      }
      .rating span[data-value] {
        color: #ccc;
        font-size: 15px;
        line-height: 1;
      }
      .rating__count {
        font-size: 12px;
        color: var(--text-light);
        font-weight: 600;
        margin-left: 2px;
      }
      .home-review-grid {
        display: grid;
        /* grid-template-columns: 1.15fr 0.85fr; */
        gap: 18px;
        padding: 18px;
      }
      .home-review-grid h4 {
        font-size: 13px;
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 10px;
      }
      #review-list p {
        color: var(--text-medium);
        font-size: 13px;
        line-height: 1.6;
      }
      .review-card {
        border: 1px solid var(--border);
        background: var(--bg-light);
        padding: 12px 12px 10px;
        border-radius: 14px;
        margin-bottom: 10px;
      }
      .review-card strong {
        display: inline-block;
        font-size: 13px;
        color: var(--text-dark);
        margin-right: 8px;
      }
      .review-card span {
        color: #f59e0b;
        font-size: 13px;
        letter-spacing: 0.5px;
      }
      .review-card p {
        margin-top: 8px;
        color: var(--text-medium);
        font-size: 13px;
        line-height: 1.6;
      }
      .review-card small {
        display: block;
        margin-top: 8px;
        color: var(--text-light);
        font-size: 11px;
      }

      #reviewForm {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      #reviewForm input,
      #reviewForm textarea {
        padding: 10px 12px;
        border: 1.5px solid var(--border);
        border-radius: 12px;
        font-size: 13px;
        outline: none;
        background: #fff;
        transition:
          border-color 0.2s,
          box-shadow 0.2s;
      }
      #reviewForm textarea {
        min-height: 110px;
        resize: vertical;
      }
      #reviewForm input:focus,
      #reviewForm textarea:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(31, 122, 224, 0.12);
      }

      .star-rating {
        display: flex;
        gap: 8px;
        font-size: 26px;
        color: #d1d5db;
        cursor: pointer;
        user-select: none;
        margin: 2px 0 6px;
      }
      .star-rating span {
        transition:
          transform 0.12s ease,
          color 0.2s ease;
        line-height: 1;
      }
      .star-rating span:hover {
        transform: translateY(-1px) scale(1.08);
        color: #f59e0b;
      }
      .star-rating span.selected {
        color: #f59e0b;
      }

      #reviewForm button[type="submit"] {
        border: none;
        border-radius: 12px;
        padding: 10px 12px;
        font-weight: 800;
        font-size: 13px;
        color: #fff;
        background: var(--primary-gradient);
        cursor: pointer;
        transition:
          transform 0.2s,
          box-shadow 0.2s,
          filter 0.2s;
        box-shadow: 0 10px 22px rgba(31, 122, 224, 0.22);
      }
      #reviewForm button[type="submit"]:hover {
        filter: brightness(1.02);
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(31, 122, 224, 0.28);
      }
      #reviewForm button[type="submit"]:active {
        transform: translateY(0);
      }

      .show-more-btn {
        display: block;
        margin: 10px auto 0;
        padding: 8px 14px;
        background: #fff;
        color: var(--text-medium);
        border: 1px solid var(--border);
        border-radius: 12px;
        cursor: pointer;
        font-weight: 700;
        transition:
          transform 0.2s,
          background 0.2s;
      }
      .show-more-btn:hover {
        background: var(--bg-light);
        transform: translateY(-1px);
      }

      /* ── HEALTH ARTICLES ── */
      .health-feed {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
      }
      .health-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        cursor: pointer;
        transition:
          box-shadow 0.2s,
          transform 0.2s;
        background: var(--bg-white);
      }
      .health-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }
      .health-card-img {
        width: 100%;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
      }
      .health-card-body {
        padding: 14px;
      }
      .health-tag {
        font-size: 11px;
        font-weight: 600;
        color: var(--primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
      }
      .health-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-dark);
        line-height: 1.4;
        margin-bottom: 8px;
      }
      .health-meta {
        font-size: 11px;
        color: var(--text-light);
        display: flex;
        align-items: center;
        gap: 6px;
      }

      /* ── TRUST BADGES ── */
      .trust-section {
        background: var(--bg-light);
        padding: 32px 20px;
      }
      .trust-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1280px;
        margin: 0 auto;
        gap: 24px;
      }
      .trust-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px;
        background: var(--bg-white);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
      }
      .trust-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #e8f5f4;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: var(--primary);
        flex-shrink: 0;
      }
      .trust-info .trust-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-dark);
      }
      .trust-info .trust-sub {
        font-size: 12px;
        color: var(--text-medium);
        margin-top: 3px;
      }

      /* ── FOOTER ── */
      footer {
        background: #1a1a2e;
        color: #ccc;
        padding: 48px 20px 24px;
      }
      .footer-inner {
        max-width: 1280px;
        margin: 0 auto;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        gap: 32px;
        margin-bottom: 40px;
      }
      .footer-brand .logo-text {
        color: #fff;
        font-size: 22px;
      }
      .footer-brand p {
        margin-top: 12px;
        font-size: 13px;
        line-height: 1.7;
        color: #999;
      }
      .footer-social {
        display: flex;
        gap: 10px;
        margin-top: 16px;
      }
      .social-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.13);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;
        font-size: 14px;
        cursor: pointer;
        transition:
          background 0.2s,
          color 0.2s;
      }
      .social-icon:hover {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
      }
      .footer-col h4 {
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 16px;
      }
      .footer-col ul li {
        margin-bottom: 10px;
      }
      .footer-col ul li a {
        font-size: 13px;
        color: #999;
        transition: color 0.2s;
      }
      .footer-col ul li a:hover {
        color: var(--primary);
      }
      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 24px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
      }
      .footer-bottom p {
        font-size: 12px;
        color: #666;
      }
      .footer-badges {
        display: flex;
        gap: 8px;
      }
      .footer-badge {
        padding: 6px 12px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 11px;
        color: #999;
      }

      /* ── SCROLL TO TOP ── */
      .scroll-top {
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        box-shadow: var(--shadow-md);
        opacity: 0;
        pointer-events: none;
        transition:
          opacity 0.3s,
          transform 0.3s;
        z-index: 999;
      }
      .scroll-top.visible {
        opacity: 1;
        pointer-events: all;
      }
      .scroll-top:hover {
        transform: translateY(-3px);
      }

      /* ── DIVIDER ── */
      .divider {
        background: var(--bg-light);
        height: 8px;
      }

      /* ── MOBILE MENU DRAWER ── */
      .mobile-menu {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2000;
      }
      .mobile-menu.open {
        display: block;
      }
      .mobile-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
      }
      .mobile-drawer {
        position: absolute;
        top: 0;
        right: 0;
        width: 280px;
        height: 100%;
        background: var(--bg-white);
        padding: 20px;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.3s ease;
      }
      .mobile-menu.open .mobile-drawer {
        transform: translateX(0);
      }
      .mobile-close {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
      }
      .mobile-close button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 22px;
        color: var(--text-dark);
      }
      .mobile-nav-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        font-size: 15px;
        font-weight: 500;
        color: var(--text-dark);
        cursor: pointer;
      }
      .mobile-nav-item i {
        color: var(--primary);
        font-size: 16px;
        width: 20px;
      }

      /* ── RESPONSIVE ── */
      @media (max-width: 1024px) {
        .services-grid {
          grid-template-columns: repeat(4, 1fr);
        }
        .products-row {
          grid-template-columns: repeat(3, 1fr);
        }
        .categories-grid {
          grid-template-columns: repeat(4, 1fr);
        }
        .health-feed {
          grid-template-columns: repeat(2, 1fr);
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr 1fr;
        }
        .trust-inner {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
        }
        .hero-banner-img img,
        .hero-banner-placeholder {
          /* height: 140px; */
        }
        .testimonials-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .home-review-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 768px) {
        .logo-icon img {
          width: 100px;
        }
        .nav-links {
          display: none;
        }
        .menu-toggle {
          display: flex;
        }
        .services-grid {
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
        }
        .products-row {
          grid-template-columns: repeat(2, 1fr);
        }
        .categories-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .health-feed {
          grid-template-columns: 1fr 1fr;
        }
        .trust-inner {
          display: grid;
          grid-template-columns: 1fr;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
        .hero-banner-img img,
        .hero-banner-placeholder {
          /* height: 180px; */
        }
        .offer-banner-img img,
        .offer-banner-placeholder {
          height: 70px;
        }
        .testimonials-grid {
          grid-template-columns:repeat(2, 1fr);;
        }
      }
      @media (max-width: 480px) {
        .logo-icon img {
          width: 50px;
        }
        .services-grid {
          grid-template-columns: repeat(4, 1fr);
        }
        .products-row {
          grid-template-columns: repeat(2, 1fr);
        }
        .categories-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .health-feed {
          grid-template-columns: 1fr;
        }
        .section-title {
          font-size: 17px;
        }
      }
  
      /* ================================================================
   smart-search.css  –  TrueMeds Inline Smart Search
   Fully namespaced under #tm-smart-search  →  zero collision risk
   ================================================================ */

/* ── SECTION WRAPPER ─────────────────────────────────────────── */
#tm-smart-search {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 0 auto;
  padding: 36px 20px 20px;
  font-family: inherit;
  box-sizing: border-box;
}

#tm-smart-search .tss-label {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #028c7e;
  margin-bottom: 10px;
}

/* ── SEARCH INPUT ROW ────────────────────────────────────────── */
#tm-smart-search .tss-bar {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 50px;
  box-shadow: 0 4px 24px rgba(2,140,126,.10);
  transition: border-color .2s, box-shadow .2s;
  overflow: visible;
}

#tm-smart-search .tss-bar:focus-within {
  border-color: #028c7e;
  box-shadow: 0 4px 28px rgba(2,140,126,.18);
}

#tm-smart-search .tss-icon {
  flex-shrink: 0;
  padding: 0 14px 0 20px;
  color: #94a3b8;
  font-size: 17px;
  pointer-events: none;
}

#tm-smart-search #tss-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #212121;
  padding: 14px 0;
  font-family: inherit;
}

#tm-smart-search #tss-input::placeholder { color: #b0bec5; }

#tm-smart-search .tss-clear {
  display: none;
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 10px;
  font-size: 18px;
  color: #94a3b8;
  line-height: 1;
}

#tm-smart-search .tss-clear:hover { color: #555; }

#tm-smart-search .tss-submit {
  flex-shrink: 0;
  background: #028c7e;
  color: #fff;
  border: none;
  border-radius: 0 48px 48px 0;
  padding: 0 24px;
  height: 100%;
  min-height: 50px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}

#tm-smart-search .tss-submit:hover { background: #016f63; }

/* ── DROPDOWN SUGGESTIONS ────────────────────────────────────── */
#tm-smart-search .tss-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  z-index: 9999;
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
}

#tm-smart-search .tss-dropdown.open { display: block; }

#tm-smart-search .tss-dd-group-label {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #94a3b8;
  background: #f8fafc;
  border-bottom: 1px solid #f0f0f0;
}

#tm-smart-search .tss-dd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid #f7f7f7;
}

#tm-smart-search .tss-dd-item:last-child { border-bottom: none; }

#tm-smart-search .tss-dd-item:hover,
#tm-smart-search .tss-dd-item.tss-focused {
  background: #f0faf9;
}

#tm-smart-search .tss-dd-item img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #f0f0f0;
}

#tm-smart-search .tss-dd-item .tss-dd-pill {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #e8f5f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

#tm-smart-search .tss-dd-meta { flex: 1; min-width: 0; }

#tm-smart-search .tss-dd-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #212121;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tm-smart-search .tss-dd-sub {
  font-size: 11.5px;
  color: #888;
  margin-top: 2px;
}

#tm-smart-search .tss-dd-price {
  font-size: 13px;
  font-weight: 700;
  color: #028c7e;
  flex-shrink: 0;
}

#tm-smart-search .tss-no-result {
  padding: 18px 16px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
}

/* ── RESULT PANEL (variants + buy) ──────────────────────────── */
#tm-smart-search .tss-result-panel {
  display: none;
  margin-top: 20px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 6px 30px rgba(0,0,0,.08);
  overflow: hidden;
  animation: tssFadeIn .22s ease;
}

@keyframes tssFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

#tm-smart-search .tss-result-panel.open { display: block; }

/* Product header inside panel */
#tm-smart-search .tss-prod-header {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #f0f0f0;
}

#tm-smart-search .tss-prod-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  background: #f0faf9;
}

#tm-smart-search .tss-prod-img-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background: #e8f5f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
}

#tm-smart-search .tss-prod-info { flex: 1; min-width: 0; }

#tm-smart-search .tss-prod-name {
  font-size: 17px;
  font-weight: 800;
  color: #212121;
  margin-bottom: 4px;
  line-height: 1.3;
}

#tm-smart-search .tss-prod-brand {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

#tm-smart-search .tss-prod-desc {
  font-size: 12.5px;
  color: #555;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#tm-smart-search .tss-view-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #028c7e;
  font-weight: 600;
  text-decoration: none;
}

#tm-smart-search .tss-view-link:hover { text-decoration: underline; }

/* Variant selector */
#tm-smart-search .tss-variants-section {
  padding: 18px 22px;
  border-bottom: 1px solid #f0f0f0;
}

#tm-smart-search .tss-variants-title {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

#tm-smart-search .tss-variants-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#tm-smart-search .tss-variant-btn {
  padding: 9px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  min-width: 88px;
  transition: all .18s;
  font-family: inherit;
}

#tm-smart-search .tss-variant-btn:hover {
  border-color: #028c7e;
  background: #f0faf9;
}

#tm-smart-search .tss-variant-btn.tss-selected {
  border-color: #028c7e;
  background: #e8f5f4;
}

#tm-smart-search .tss-variant-btn .tss-vb-pack {
  font-size: 13px;
  font-weight: 700;
  color: #212121;
}

#tm-smart-search .tss-variant-btn.tss-selected .tss-vb-pack { color: #028c7e; }

#tm-smart-search .tss-variant-btn .tss-vb-pills {
  font-size: 11px;
  color: #888;
  font-weight: 400;
  margin-top: 2px;
}

#tm-smart-search .tss-variant-btn .tss-vb-price {
  font-size: 12px;
  font-weight: 700;
  color: #028c7e;
  margin-top: 3px;
}

/* Action bar */
#tm-smart-search .tss-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  flex-wrap: wrap;
}

#tm-smart-search .tss-price-display {
  flex: 1;
  min-width: 120px;
}

#tm-smart-search .tss-price-main {
  font-size: 28px;
  font-weight: 800;
  color: #212121;
  line-height: 1;
}

#tm-smart-search .tss-price-per {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

#tm-smart-search .tss-buy-now {
  padding: 0 26px;
  height: 46px;
  background: #028c7e;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

#tm-smart-search .tss-buy-now:hover:not(:disabled) { background: #016f63; }
#tm-smart-search .tss-buy-now:disabled { opacity: .65; cursor: default; }

#tm-smart-search .tss-add-cart {
  padding: 0 22px;
  height: 46px;
  background: #fff;
  color: #028c7e;
  border: 2px solid #028c7e;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s;
  font-family: inherit;
  white-space: nowrap;
}

#tm-smart-search .tss-add-cart:hover:not(:disabled) {
  background: #028c7e;
  color: #fff;
}

#tm-smart-search .tss-add-cart:disabled { opacity: .65; cursor: default; }

/* Loading spinner inside panel */
#tm-smart-search .tss-loading {
  padding: 28px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

#tm-smart-search .tss-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid #e2e8f0;
  border-top-color: #028c7e;
  border-radius: 50%;
  animation: tssSpin .7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

@keyframes tssSpin { to { transform: rotate(360deg); } }

/* No variants state */
#tm-smart-search .tss-no-variants {
  padding: 18px 22px;
  font-size: 13px;
  color: #888;
  text-align: center;
}

/* ── TOAST ───────────────────────────────────────────────────── */
#tss-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #212121;
  color: #fff;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  z-index: 99999;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  pointer-events: none;
  white-space: nowrap;
}

#tss-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  #tm-smart-search { padding: 24px 12px 16px; }

  #tm-smart-search .tss-submit { padding: 0 14px; font-size: 13px; }

  #tm-smart-search .tss-prod-header { flex-direction: column; }

  #tm-smart-search .tss-prod-img,
  #tm-smart-search .tss-prod-img-placeholder { width: 60px; height: 60px; }

  #tm-smart-search .tss-action-bar { flex-direction: column; align-items: stretch; }

  #tm-smart-search .tss-buy-now,
  #tm-smart-search .tss-add-cart { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   MEDICINE REQUEST FORM — appended to smart-search.css
   ════════════════════════════════════════════════════════════════ */

#tm-smart-search .tss-request-trigger {
  border-top: 1.5px dashed #f0a500;
  background: #fffbf0;
}
#tm-smart-search .tss-request-trigger:hover { background: #fff3cc; }

#tm-smart-search .tss-req-form-wrap {
  padding: 22px 24px 20px;
}

#tm-smart-search .tss-req-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f0f0;
}

#tm-smart-search .tss-req-icon {
  font-size: 28px;
  flex-shrink: 0;
}

#tm-smart-search .tss-req-title {
  font-size: 15px;
  font-weight: 800;
  color: #212121;
  margin-bottom: 3px;
}

#tm-smart-search .tss-req-sub {
  font-size: 12.5px;
  color: #888;
}

#tm-smart-search .tss-req-form { margin: 0; }

#tm-smart-search .tss-req-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 16px;
}

#tm-smart-search .tss-req-field { display: flex; flex-direction: column; gap: 5px; }
#tm-smart-search .tss-req-full  { grid-column: 1 / -1; }

#tm-smart-search .tss-req-field label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
}

#tm-smart-search .tss-req-required { color: #e03e3e; }

#tm-smart-search .tss-req-field input,
#tm-smart-search .tss-req-field textarea {
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: #212121;
  outline: none;
  background: #fff;
  transition: border-color .2s;
  resize: vertical;
}

#tm-smart-search .tss-req-field input:focus,
#tm-smart-search .tss-req-field textarea:focus {
  border-color: #028c7e;
  box-shadow: 0 0 0 3px rgba(2,140,126,.08);
}

#tm-smart-search .tss-req-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

#tm-smart-search .tss-req-cancel {
  padding: 0 18px;
  height: 40px;
  background: transparent;
  color: #888;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
#tm-smart-search .tss-req-cancel:hover { border-color: #aaa; color: #444; }

#tm-smart-search .tss-req-submit {
  padding: 0 22px;
  height: 40px;
  background: #028c7e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s;
}
#tm-smart-search .tss-req-submit:hover:not(:disabled) { background: #016f63; }
#tm-smart-search .tss-req-submit:disabled { opacity: .6; cursor: default; }

#tm-smart-search .tss-req-status {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  min-height: 20px;
  text-align: center;
}
#tm-smart-search .tss-req-status.tss-req-success { color: #059669; }
#tm-smart-search .tss-req-status.tss-req-error   { color: #dc2626; }

@media (max-width: 560px) {
  #tm-smart-search .tss-req-grid { grid-template-columns: 1fr; }
  #tm-smart-search .tss-req-full { grid-column: 1; }
  #tm-smart-search .tss-req-footer { flex-direction: column; }
  #tm-smart-search .tss-req-cancel,
  #tm-smart-search .tss-req-submit { width: 100%; }
}