* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  color: #333;
}
.hero {
  background: linear-gradient(135deg, #8E2DE2, #4A00E0);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
  position: relative;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}
.logo {
  font-size: 24px;
  font-weight: 700;
}
/* Reset colour on all spans inside the logo so that
   individual parts (logo-main, logo-sub, logo-tagline) can apply
   their own colour declarations without being overridden. */
.logo span {
  color: inherit;
}
.nav-links {
  list-style: none;
  display: flex;
}
.nav-links li {
  margin-left: 20px;
}
.nav-links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}
.nav-links a:hover {
  color: #FFDD57;
}
.hero-content h1 {
  font-size: 48px;
  margin-bottom: 20px;
}
.hero-content p {
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 30px;
}
.btn {
  display: inline-block;
  background: #FFDD57;
  color: #333;
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
}
.btn:hover {
  background: #333;
  color: #fff;
}

/* Small buttons used within text paragraphs */
.btn.small {
  font-size: 14px;
  padding: 8px 16px;
  margin-top: 10px;
}
section {
  padding: 60px 20px;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
}
.about h2,
.verticals h2,
.choose-us h2,
.contact h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 32px;
  color: #2C3E50;
}
.verticals .cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.verticals .card {
  background: #f7f7f7;
  border-radius: 10px;
  padding: 40px 20px;
  flex: 1;
  min-width: 260px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
.verticals .card:hover {
  transform: translateY(-5px);
}
.verticals .icon {
  font-size: 40px;
  color: #8E2DE2;
  margin-bottom: 15px;
}
.verticals h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #2C3E50;
}
.verticals p {
  color: #555;
}
.choose-us .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.choose-us .feature {
  background: #f7f7f7;
  border-radius: 10px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.choose-us .feature i {
  font-size: 32px;
  color: #8E2DE2;
  margin-bottom: 15px;
}
.choose-us .feature h4 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #2C3E50;
}
.choose-us .feature p {
  color: #555;
}
.contact {
  background: #8E2DE2;
  color: #fff;
  text-align: center;
}
.contact h2 {
  color: #fff;
}
.contact .btn {
  background: #fff;
  color: #8E2DE2;
}
.contact .btn:hover {
  background: #EAEAEA;
}
footer {
  background: #2C3E50;
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

/* Product grid styling for vertical store pages */
.products h2 {
  text-align: center;
  font-size: 32px;
  color: #2C3E50;
  margin-bottom: 20px;
}
/*
 * Arrange product cards in a flexible wrapping row so that every card
 * maintains the same width.  This prevents lone items (like a single
 * green pigment) from stretching full width, giving a more uniform
 * appearance across all colour groups.
 */
.product-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}
.product-card {
  /*
   * Use a column‑based flexbox so that the description and button
   * automatically align to the bottom of each card regardless of
   * content length. This ensures all “View Details” buttons line
   * up neatly across the grid.
   */
  background: #f7f7f7;
  padding: 30px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-align: center;
  display: flex;
  width: 250px; /* fixed width ensures uniform card size across rows */
  flex-direction: column;
}
/* Apply image styling to any image inside a product card.  By
   default the swatch images may come without a specific class,
   so this ensures they render consistently. */
.product-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}
.product-card h4 a {
  color: #2C3E50;
  text-decoration: none;
}
.product-card h4 a:hover {
  text-decoration: underline;
}
.product-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #2C3E50;
}
.product-card p {
  color: #555;
  margin-bottom: 10px;
}

/* Position the “View Details” button at the bottom of the card */
.product-card .btn {
  margin-top: auto;
}

/* Responsive navigation bar */
.menu-toggle {
  display: none;
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 20px;
    background: #2C3E50;
    padding: 10px;
    border-radius: 8px;
    width: 200px;
    z-index: 1000;
  }
  .nav-links li {
    margin: 10px 0;
  }
  .nav-links.active {
    display: flex;
  }
  .menu-toggle {
    display: block;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
  }
}

/* Category grid adjustments for THEAINK collection page – allow cards to fill the
   available space evenly while limiting their maximum width. */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.category-grid .product-card {
  flex: 1;
  min-width: 260px;
  max-width: 400px;
}

/* Social media icons styling */
/*
 * Footer icons are displayed inline within the copyright text. Set a
 * small margin on the icons and ensure they align nicely with text.
 */
footer .fab {
  margin-right: 10px;
  color: #fff;
}
footer .fab:last-of-type {
  margin-right: 12px;
}
footer .tz-logo {
  height: 18px;
  width: auto;
  vertical-align: middle;
  margin: 0 4px;
}

/* Chatbot widget styles */
#chat-widget-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #8E2DE2;
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
  z-index: 1000;
}

#chat-widget-window {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 300px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: none;
  flex-direction: column;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
}

#chat-header {
  background: #8E2DE2;
  color: #fff;
  padding: 10px;
  font-weight: bold;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#chat-messages {
  padding: 10px;
  height: 150px;
  overflow-y: auto;
  font-size: 14px;
}

#chat-input-area {
  display: flex;
  border-top: 1px solid #ddd;
}

#chat-input {
  flex: 1;
  padding: 8px;
  border: none;
  border-bottom-left-radius: 8px;
}

#chat-send {
  background: #8E2DE2;
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom-right-radius: 8px;
}

#chat-send:hover {
  background: #6a1cb8;
}

/* Logo image sizing */
.navbar .logo img, .nav-logo img, .nav-logo {
  height: 40px;
  width: auto;
}

/*
 * The hero text now appears instantly without fancy animations,
 * ensuring a clean and professional presentation.
 */
.hero-content h1, .hero-content p, .hero-content .btn {
  animation: none;
}

/* Custom typographic logo built from styled spans. */
.logo {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
/* Logo colours and sizing – orange for “THEA”, green for “ORGANICS” and white for the tagline. */
/*
 * Custom typographic logo built from styled spans. To ensure our
 * corporate colours take precedence over inherited values (for
 * example, the white text colour applied to the navigation), we
 * apply !important to each colour definition. Without this, the
 * spans would inherit the white colour from the hero section and
 * appear invisible or all white. The sizes remain consistent with
 * previous definitions.
 */
.logo-main {
  color: #E86A24 !important; /* warm orange hue */
  font-size: 28px;
}
.logo-sub {
  color: #2AA84A !important; /* fresh green tone */
  font-size: 28px;
}
.logo-tagline {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  color: #ffffff !important;
  margin-top: 2px;
  font-weight: 500;
}

/* Tidy up product card layout.  We still use flexbox to push
   the button to the bottom, but we impose minimum heights on
   headings and descriptions so that each card remains uniform.
   This provides an elegant, aligned presentation across the grid. */
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #f7f7f7;
  padding: 30px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-align: center;
  min-height: 300px; /* ensure consistent height across all cards */
}
.product-card h3 {
  min-height: 48px;
  margin-bottom: 8px;
  color: #2C3E50;
  font-size: 22px;
}
.product-card p {
  min-height: 36px;
  color: #555;
  margin-bottom: 12px;
}
.product-card .btn {
  margin-top: auto;
}

/* Colour swatch used to visualise mass and tint tones for each pigment.  
   Each swatch displays a gradient from the pigment's mass tone to its tint tone. */
.color-swatch {
  width: 80px;
  height: 40px;
  border-radius: 6px;
  margin: 0 auto 10px;
  border: 1px solid #ddd;
}

/* Specification list under each pigment card */
.specs {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  text-align: left;
  font-size: 14px;
  color: #555;
}
.specs li {
  margin-bottom: 4px;
}
.product-card .price {
  font-weight: 600;
  color: #8E2DE2;
  margin-bottom: 10px;
}

/* Styles for the product finder search section on the home page */
.product-finder {
  background: #f7f7f7;
  padding: 40px 0;
  text-align: center;
}
.product-finder h2 {
  margin-bottom: 20px;
  font-size: 28px;
  color: #2C3E50;
}
.product-finder input[type="text"] {
  width: 100%;
  max-width: 480px;
  padding: 12px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0 auto 20px;
  display: block;
}
.product-finder ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
}
.product-finder li {
  margin-bottom: 10px;
  font-size: 16px;
}
.product-finder li a {
  color: #0056b3;
  font-weight: 600;
  text-decoration: none;
}
.product-finder li a:hover {
  text-decoration: underline;
}
.product-finder .result-categories {
  color: #555;
  font-style: italic;
}

/* Category grouping for store pages */
.product-category {
  margin-bottom: 40px;
}

.category-title {
  font-size: 26px;
  margin-bottom: 15px;
  color: #1a2e44;
  border-bottom: 2px solid #eaeaea;
  padding-bottom: 5px;
}

/* Verticals detail page */
.verticals-detail {
  padding: 60px 20px;
}
.verticals-detail .vertical-section {
  margin-bottom: 40px;
}
.verticals-detail h2 {
  font-size: 28px;
  color: #2C3E50;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.verticals-detail h2 i {
  color: #8E2DE2;
}
.verticals-detail p {
  color: #555;
  font-size: 16px;
  line-height: 1.5;
}

/* About page sections */
.about h2 {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 28px;
  color: #2C3E50;
}
.about p {
  margin-bottom: 20px;
  color: #555;
  font-size: 16px;
  line-height: 1.5;
}

/* Contact page styling */
.contact-info {
  padding: 60px 20px;
}
.contact-info h2 {
  font-size: 32px;
  color: #2C3E50;
  margin-bottom: 20px;
  text-align: center;
}
.contact-info .contact-details {
  margin-bottom: 30px;
  text-align: center;
  font-size: 18px;
  color: #555;
}
.contact-info .contact-details p a {
  color: #8E2DE2;
  text-decoration: none;
}
.contact-info .contact-form {
  max-width: 600px;
  margin: 0 auto;
}
.contact-info .form-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-info .form-group label {
  margin-bottom: 5px;
  font-weight: 600;
  color: #2C3E50;
}
.contact-info .form-group input,
.contact-info .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: inherit;
}
.contact-info .contact-form .btn {
  margin-top: 10px;
}
@media(max-width: 768px) {
  .hero-content h1 {
    font-size: 36px;
  }
  .verticals .cards {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------ */
/* Floating chat widget styles
 * These styles support the chat assistant defined in chatbot.js.
 * A circular button is fixed at the bottom-right corner of the page.
 * When clicked, a collapsible chat window appears above the button.
 */
#chat-widget-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background-color: #1e90ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 10000;
}

#chat-widget-button i {
  font-size: 20px;
  pointer-events: none;
}

#chat-widget-window {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 280px;
  max-width: 90%;
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}

#chat-header {
  background-color: #1e90ff;
  color: #fff;
  padding: 10px;
  font-weight: 600;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

#chat-messages {
  padding: 10px;
  height: 180px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.3;
}

#chat-input-area {
  display: flex;
  border-top: 1px solid #eee;
}

#chat-input-area input {
  flex: 1;
  border: none;
  padding: 10px;
  font-size: 14px;
  outline: none;
}

#chat-input-area button {
  background-color: #1e90ff;
  color: #fff;
  border: none;
  padding: 0 15px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#chat-input-area button:hover {
  background-color: #187bcd;
}