/* ===== CSS VARIABLES ===== */
    :root {
      --primary: #e05c1a;
      --primary-dark: #b84a12;
      --primary-light: #f4835a;
      --surface: #ffffff;
      --surface-2: #f5f5f0;
      --bg: #fafaf8;
      --text: #1a1a18;
      --text-muted: #6b6b62;
      --border: #e0ddd5;
      --shadow: rgba(0,0,0,0.08);
      --shadow-md: rgba(0,0,0,0.15);
      --success: #1a8a4a;
      --font-display: 'Barlow Condensed', sans-serif;
      --font-body: 'DM Sans', sans-serif;
      --radius: 6px;
      --radius-lg: 12px;
      --transition: 0.2s ease;
    }
 
    [data-theme="dark"] {
      --surface: #1c1c1a;
      --surface-2: #252521;
      --bg: #141412;
      --text: #f0ede6;
      --text-muted: #9a9a8e;
      --border: #333330;
      --shadow: rgba(0,0,0,0.3);
      --shadow-md: rgba(0,0,0,0.5);
    }
 
    /* ===== RESET ===== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; min-width:0;}
    * {
        margin: 0; padding: 0; box-sizing: border-box;
        max-width: 100%; 
      }

    
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      transition: background 0.3s, color 0.3s;
      overflow-x: hidden;
    }
    html, body {
      overflow-x: hidden;
      max-width: 100%;
      width: 100%;
    }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    button { cursor: pointer; font-family: var(--font-body); touch-action: manipulation; }

    /* ===== ICONS ===== */
    .icon {
      display: inline-block;
      vertical-align: -0.15em;
      flex-shrink: 0;
    }

    /* ===== ACCESSIBILITY ===== */
    /* Visible keyboard focus on every interactive element (mouse clicks stay clean) */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: var(--radius);
    }

    /* Screen-reader-only text (labels for icon-only controls) */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    /* Respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
 
    /* ===== HEADER ===== */
    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 2px 12px var(--shadow);
    }
 
    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      width: 100%;
    }
 
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink:0;
}

.logo-full { display: inline; }
.logo-short { display: none; }

@media (max-width: 480px) {
  .logo-full { display: none; }
  .logo-short { display: inline; }
  .logo { font-size: 1.4rem; }
} 
    .logo span { color: var(--primary); }
 
    .nav { display: flex; align-items: center; gap: 0.25rem; }
 
    .nav a {
      font-size: 0.9rem;
      font-weight: 500;
      padding: 0.4rem 0.75rem;
      border-radius: var(--radius);
      color: var(--text-muted);
      transition: all var(--transition);
    }
 
    .nav a:hover, .nav a.active {
      color: var(--primary);
      background: rgba(224, 92, 26, 0.08);
    }
 
    .header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
 
    .icon-btn {
      width: 40px;
      height: 40px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.3rem;
      transition: all var(--transition);
    }
 
    .icon-btn:hover {
      border-color: var(--primary);
      color: var(--primary);
    }
 
    .contact-btn {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0 1rem;
      height: 40px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius);
      font-weight: 600;
      font-size: 0.9rem;
      transition: all var(--transition);
      white-space: nowrap;
    }
 
    .contact-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
 
    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      width: 40px;
      height: 40px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      border-radius: var(--radius);
      align-items: center;
      justify-content: center;
    }
 
    .hamburger span {
      display: block;
      width: 20px;
      height: 2px;
      background: var(--text);
      transition: all 0.3s;
      transform-origin: center;
    }
 
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
 
    /* Mobile nav */
    .mobile-nav {
      display: none;
      position: absolute;
      top: 64px;
      left: 0;
      right: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 1rem 1.5rem;
      flex-direction: column;
      gap: 0.25rem;
      box-shadow: 0 8px 24px var(--shadow);
    }
 
    .mobile-nav.open { display: flex; }
 
    .mobile-nav a {
      padding: 0.75rem 1rem;
      border-radius: var(--radius);
      font-weight: 500;
      color: var(--text);
      transition: all var(--transition);
    }
 
    .mobile-nav a:hover { background: var(--surface-2); color: var(--primary); }
 
    /* ===== HERO ===== */
    .hero {
      position: relative;
      height: 520px;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
 
    .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=1400&auto=format&fit=crop&q=80');
      background-size: cover;
      background-position: center;
    }
 
    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(20,20,18,0.85) 40%, rgba(20,20,18,0.3) 100%);
    }
 
    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
      color: white;
    }
 
    .hero-tag {
      display: inline-block;
      background: var(--primary);
      color: white;
      font-family: var(--font-display);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.3rem 0.75rem;
      border-radius: var(--radius);
      margin-bottom: 1rem;
    }
 
    .hero-title {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 800;
      line-height: 1.05;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-bottom: 1rem;
      max-width: 600px;
    }
 
    .hero-title em {
      color: var(--primary-light);
      font-style: normal;
    }
 
    .hero-sub {
      font-size: 1.05rem;
      color: rgba(255,255,255,0.8);
      max-width: 480px;
      line-height: 1.6;
      margin-bottom: 2rem;
    }
 
    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
 
    .btn-primary {
      padding: 0.875rem 2rem;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: var(--radius);
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: all var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
 
    .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
 
    .btn-outline {
      padding: 0.875rem 2rem;
      background: transparent;
      color: white;
      border: 2px solid rgba(255,255,255,0.5);
      border-radius: var(--radius);
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: all var(--transition);
    }
 
    .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }
 
    /* ===== CATEGORIES ===== */
    .categories-section {
      padding: 3rem 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
 
    .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
 
    .section-header {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }
 
    .section-title {
      font-family: var(--font-display);
      font-size: 1.8rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
 
    .section-line {
      flex: 1;
      height: 2px;
      background: var(--border);
    }
 
    .category-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1rem;
    }
 
    .category-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 0;
      background: var(--surface-2);
      border: 2px solid transparent;
      border-radius: var(--radius-lg);
      transition: all var(--transition);
      cursor: pointer;
      text-align: center;
      overflow: hidden;
    }
 
    .category-pill:hover, .category-pill.active {
      border-color: var(--primary);
      background: rgba(224, 92, 26, 0.06);
    }
 
    /* Only the "All" pill shows a glyph rather than a photo, so only it gets the
       solid orange fill when selected — filling a photo's backdrop orange read
       as a rendering fault. */
    .category-pill.active .cat-icon-all { background: var(--primary); color: white; }
 
    /* The category photos range from 1.75:1 to 2.36:1, plus one portrait. A
       fixed-height box with object-fit: cover filled it by scaling up and
       slicing the sides off, which cut the subject out of the tools and
       plumbing photos. contain shows each image whole. */
    .cat-icon {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: var(--surface-2);
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      border: 2px solid transparent;
      transition: all var(--transition);
      flex-shrink: 0;
    }

    .cat-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 0;
    }

    .category-pill.active .cat-icon {
      border-color: var(--primary);
    } 
    .cat-name {
      padding: 0.5rem;
      text-align: center;
      display: block;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
 
    /* ===== PRODUCTS ===== */
    .products-section { padding: 3rem 0; }
 
    .products-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      gap: 1rem;
      flex-wrap: wrap;
    }
 
    .search-box {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 0 1rem;
      flex: 1;
      max-width: 380px;
      transition: border-color var(--transition);
    }
 
    .search-box:focus-within { border-color: var(--primary); }
 
    .search-box input {
      flex: 1;
      border: none;
      background: transparent;
      padding: 0.65rem 0;
      font-size: 1rem;
      color: var(--text);
      outline: none;
      font-family: var(--font-body);
    }
 
    .search-box input::placeholder { color: var(--text-muted); }
    .search-icon { color: var(--text-muted); font-size: 1rem; }
 
    .products-count {
      font-size: 0.9rem;
      color: var(--text-muted);
    }
 
    .products-count span { font-weight: 700; color: var(--text); }
 
    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 1.25rem;
    }
 
    .product-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: all var(--transition);
      display: flex;
      flex-direction: column;
      cursor: pointer;
    }

    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px var(--shadow-md);
      border-color: transparent;
    }

    /* Full-bleed image — no padding, no rounding, fills the card top */
    .product-img-wrap {
      position: relative;
      overflow: hidden;
      background: var(--surface-2);
      height: 200px;
      flex-shrink: 0;
    }

    /* Product photos are roughly square (250x200, 250x250) shot on a plain
       background. There was no sizing rule at all, so they rendered at their
       own width and left dead space under them. contain fits each one whole
       and centred, whatever shape the owner uploads. */
    .product-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }

    .product-card:hover .product-img-wrap img { transform: scale(1.06); }

    .product-category-tag {
      position: absolute;
      top: 0.75rem;
      left: 0.75rem;
      background: var(--primary);
      color: white;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.2rem 0.6rem;
      border-radius: 4px;
    }

    /* Bottom info section — name, price, button */
    .product-info {
      padding: 0.85rem 1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      border-top: 1px solid var(--border);
    }

    .product-name {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text);
      line-height: 1.3;
      margin: 0;
    }

    .product-price {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--primary);
      margin: 0;
    }

    /* No products state */
    .no-products {
      grid-column: 1 / -1;
      text-align: center;
      padding: 4rem 0;
      color: var(--text-muted);
    }
 
    .no-products-icon { font-size: 3rem; margin-bottom: 1rem; }
 
    /* Loading skeleton */
    .skeleton {
      background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: var(--radius);
    }
 
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
 
    .skeleton-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
 
    .skeleton-img { height: 180px; }
    .skeleton-info { padding: 1rem; }
    .skeleton-title { height: 16px; margin-bottom: 0.5rem; width: 80%; }
    .skeleton-price { height: 22px; width: 40%; margin-bottom: 0.75rem; }
    .skeleton-btn { height: 36px; }

    /* Waking-up banner (Render free-tier cold start) */
    .wake-banner {
      display: none;
      align-items: center;
      gap: 0.75rem;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-left: 3px solid var(--primary);
      border-radius: var(--radius);
      padding: 0.85rem 1.1rem;
      margin-bottom: 1.25rem;
      color: var(--text-muted);
      font-size: 0.9rem;
    }
    .wake-banner.show { display: flex; }

    .wake-spinner {
      width: 18px;
      height: 18px;
      border: 2px solid var(--border);
      border-top-color: var(--primary);
      border-radius: 50%;
      flex-shrink: 0;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .retry-btn {
      margin-top: 1rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1.2rem;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-weight: 600;
      font-size: 0.9rem;
    }
    .retry-btn:hover { background: var(--primary-dark); }
 
    /* ===== ABOUT SECTION ===== */
    .about-section {
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 3rem 0;
    }
 
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
 
    .about-text h2 {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-bottom: 1rem;
    }
 
    .about-text p {
      color: var(--text-muted);
      line-height: 1.8;
      margin-bottom: 1.5rem;
    }
 
    .about-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
 
    .stat {
      text-align: center;
      padding: 1rem;
      background: var(--surface-2);
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }
 
    .stat-num {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 800;
      color: var(--primary);
      display: block;
    }
 
    .stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
 
    .about-image {
      border-radius: var(--radius-lg);
      overflow: hidden;
      aspect-ratio: 4/3;
    }
 
    .about-image img { width: 100%; height: 100%; object-fit: cover; }

    /* ===== PRODUCT MODAL ===== */
.product-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.product-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.product-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s;
  box-shadow: 0 24px 48px rgba(0,0,0,0.3);
}

.product-modal-overlay.open .product-modal {
  transform: translateY(0);
}

.product-modal-img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: var(--surface-2);
}

.product-modal-body {
  padding: 1.25rem;
}

.product-modal-category {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.4rem;
}

.product-modal-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.product-modal-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.product-modal-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.product-modal-no-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.product-modal-footer {
  display: flex;
  gap: 0.75rem;
}

.product-modal-footer .enquire-btn {
  flex: 1;
  margin-top: 0;
}

.product-modal-close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}

.product-modal-close:hover {
  border-color: var(--primary);
  color: var(--primary);
}
 
    /* ===== FOOTER ===== */
    .footer {
      width: 100%;
      overflow: hidden;
      background: var(--text);
      color: rgba(255,255,255,0.7);
      padding: 3rem 0 1.5rem;
    }

    [data-theme="dark"] .footer { background: var(--surface-2); }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 2rem;
      margin-bottom: 2rem;
      width: 100%;
    }

    /* The shared .logo rule sets white-space: nowrap so the header logo never
       breaks mid-name. In the footer the logo sits in a narrow grid column, so
       nowrap makes it overflow across the next column instead. */
    .footer-brand .logo {
      color: white;
      margin-bottom: 0.75rem;
      white-space: normal;
    }

    .footer-brand p { font-size: 0.9rem; line-height: 1.6; }
 
    .footer-col h4 {
      min-width: 0;
      word-break: break-word;
    }
 
    .footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; }
 
    .footer-col a {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.6);
      transition: color var(--transition);
    }
 
    .footer-col a:hover { color: var(--primary-light); }
 
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.85rem;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
 
    /* ===== TOAST ===== */
    .toast-container {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      z-index: 500;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
 
    .toast {
      background: var(--text);
      color: white;
      padding: 0.75rem 1.25rem;
      border-radius: var(--radius);
      font-size: 0.9rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
      animation: slideIn 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
    }
 
    [data-theme="dark"] .toast { background: var(--surface); border: 1px solid var(--border); }
 
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
 
    @keyframes fadeOut {
      to { opacity: 0; transform: translateX(100%); }
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
      width: 100%;
    }
 
    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
      .category-grid { grid-template-columns: repeat(5, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ===== MEDIA QUERIES — ONLY FOR LAYOUT CHANGES ===== */
@media (max-width: 768px) {
  .nav { display: none; }
  .hamburger { display: flex; }
  .about-image { display: none; }
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .logo-full { display: none; }
  .logo-short { display: inline; }

  .hero {
    height: auto;
    min-height: 300px;
    padding: 2.5rem 1rem;
  }

  .hero-title { font-size: clamp(1.4rem, 6vw, 2rem); }
  .hero-sub { font-size: clamp(0.85rem, 3vw, 1rem); max-width: 100%; }
  .hero-actions { flex-direction: column; gap: 0.75rem; }
  .btn-primary, .btn-outline { width: 100%; justify-content: center; }

  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  /* No fixed height — the 16:10 box scales with the column so nothing crops */
  .cat-icon { width: 100%; font-size: 1rem; }
  .cat-name { font-size: 0.68rem; }
  .category-pill { padding: 0.75rem 0.5rem; }

  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .products-toolbar { flex-direction: column; align-items: stretch; }
  .search-box { max-width: 100%; }

  /* Footer stacks to one column. This lives here, not in landing.css, because
     both pages share the footer — when it lived in landing.css the products
     page kept two columns and the brand name overlapped Quick Links. */
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

.whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  z-index: 999;
  text-decoration: none;
  font-size: 1.8rem;
  transition: transform 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

/* Product option styles live in products.css — only that page shows them. */

/* On touch devices, guarantee comfortable 44px tap targets */
@media (pointer: coarse) {
  .icon-btn, .product-modal-close {
    min-width: 44px;
    min-height: 44px;
  }
  .variant-btn, .enquire-btn { min-height: 44px; }
}

/* ===== ICON CONTAINER REFINEMENTS ===== */
/* Empty/error states inherit their big font-size; just soften the color */
.no-products-icon { color: var(--text-muted); line-height: 1; }

/* "All" category pill uses a centered glyph instead of a photo */
.cat-icon-all {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  font-size: 2.6rem;
  color: var(--text-muted);
}
.category-pill.active .cat-icon-all { color: #fff; }

/* Toast icon: color-coded, with a text fallback via icon shape */
.toast-icon { display: inline-flex; align-items: center; font-size: 1.15rem; }
.toast-success .toast-icon { color: #4ade80; }
.toast-warning .toast-icon { color: #fbbf24; }

/* Footer contact rows: align pin/phone glyphs with the label */
.footer-contact a { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Cart button glyph slightly larger than its label text */
.contact-btn .icon { width: 1.2em; height: 1.2em; }