html,
body {
    overflow-x: hidden;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .text-stroke-primary {
            -webkit-text-stroke: 1px #000000;
            color: transparent;
        }
        .text-stroke-white {
            -webkit-text-stroke: 1px #ffffff;
            color: transparent;
        }

      .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .industrial-grid {
            background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
            background-size: 24px 24px;
        }
        .plinth-shadow {
            box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.1);
        }
        .no-scrollbar::-webkit-scrollbar { display: none; }

          .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .plinth-shadow {
            box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.1);
        }
        .industrial-line {
            background-image: linear-gradient(90deg, #000 50%, transparent 50%);
            background-size: 20px 2px;
        }
        .process-node::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 100%;
            width: 2px;
            height: 100%;
            background-color: #000;
            transform: translateX(-50%);
        }
        .process-node:last-child::after {
            display: none;
        }
        details > summary { list-style: none; }
        details > summary::-webkit-details-marker { display: none; }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .plinth-effect {
            background-color: #F4F4F4;
            border: 1px solid #E5E5E5;
        }
        .hard-shadow {
            box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.1);
        }
        .industrial-border-l {
            border-left: 4px solid #fe6b00;
        }
        .clip-path-slanted {
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
        }

              .material-symbols-outlined {
          font-variation-settings:
          'FILL' 0,
          'wght' 400,
          'GRAD' 0,
          'opsz' 24
        }

             .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .accordion-item.active .accordion-content {
            max-height: 500px;
        }
        .accordion-item.active .icon-rotate {
            transform: rotate(45deg);
        }

              .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .text-stroke-primary {
            -webkit-text-stroke: 1px #000000;
            color: transparent;
        }
        .text-stroke-white {
            -webkit-text-stroke: 1px #ffffff;
            color: transparent;
        }

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .plinth-effect {
            background-color: #F4F4F4;
            border: 1px solid #E5E5E5;
        }
        .hard-shadow {
            box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.1);
        }
        .industrial-border-l {
            border-left: 4px solid #fe6b00;
        }
        .clip-path-slanted {
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
        }

        .timeline-line {
            position: absolute;
            left: 24px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #000000;
            z-index: 0;
        }
        @media (min-width: 768px) {
            .timeline-line {
                left: 50%;
                transform: translateX(-50%);
            }
            .timeline-item:nth-child(odd) .timeline-content {
                margin-left: auto;
                padding-left: 48px;
            }
            .timeline-item:nth-child(even) .timeline-content {
                margin-right: auto;
                padding-right: 48px;
                text-align: right;
            }
            .timeline-item:nth-child(even) .timeline-content .timeline-header {
                justify-content: flex-end;
            }
            .timeline-item:nth-child(even) .timeline-content .timeline-header .material-symbols-outlined {
                order: 2;
                margin-left: 16px;
                margin-right: 0;
            }
        }

            .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        /* Hard Shadows for the minimalist-industrial look */
        .shadow-hard {
            box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.1);
        }
        .shadow-hard-interactive:hover {
            box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.15);
            transform: translate(-2px, -2px);
        }
        /* Process Timeline Line */
        .timeline-line::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 24px;
            width: 2px;
            background-color: #000000;
        }

        /* ─── Mobile Bottom CTA Bar ──────────────────────────────────── */

        /* Sits above the WhatsApp float button (z-30) */
        .mobile-bottom-bar {
            /* hidden on lg+ via Tailwind lg:hidden */
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 30;
            /* Slide up from below on page load */
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) 0.6s;
        }

        .mobile-bottom-bar.bar-visible {
            transform: translateY(0);
        }

        /* Ensure main content isn't hidden behind the bottom bar on mobile */
        @media (max-width: 1023px) {
            body {
                padding-bottom: 72px;
            }
        }

        /* Image error fallback — shown via onerror in engine */
        .image-error {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e4e2e2;
        }
        .image-error::after {
            content: 'Image unavailable';
            font-family: Inter, sans-serif;
            font-size: 12px;
            color: #7e7576;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* ─── RFQ Form States ────────────────────────────────────────── */

        /* Inline field error label */
        .rfq-field-error {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            font-weight: 500;
            color: #ba1a1a;
            margin-top: 4px;
        }

        /* Invalid input border — error colour overrides primary */
        input[aria-invalid="true"],
        select[aria-invalid="true"],
        textarea[aria-invalid="true"] {
            border-color: #ba1a1a !important;
            outline-color: #ba1a1a;
        }

        /* Submit button spinner */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        .animate-spin {
            animation: spin 0.8s linear infinite;
        }

        /* Success state fade-in */
        #rfq-form > div {
            animation: rfq-fade-in 0.4s ease forwards;
        }
        @keyframes rfq-fade-in {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0);   }
        }
        .gallery-placeholder {
            transition: opacity 0.4s ease;
        }

        /* ─── Lightbox ───────────────────────────────────────────────── */

        /* Panel fade transition (opacity driven by JS class toggle) */
        #lightbox-backdrop,
        #lightbox-panel {
            transition: opacity 0.3s ease;
        }

        /* Prevent lightbox image from overflowing on very small screens */
        #lightbox-img {
            max-height: 70vh;
        }
        @media (min-width: 768px) {
            #lightbox-img {
                max-height: 80vh;
            }
        }

        
            /* Card hover: hard shadow lifts */
    .category-card {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.08);
    }
    .category-card:hover {
      transform: translate(-3px, -3px);
      box-shadow: 9px 9px 0px 0px rgba(0,0,0,0.12);
    }

    /* Large faint watermark index number */
    .card-index {
      font-family: 'Montserrat', sans-serif;
      font-weight: 800;
      font-size: 96px;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px rgba(0,0,0,0.06);
      position: absolute;
      bottom: -12px;
      right: 8px;
      pointer-events: none;
      user-select: none;
    }

    /* Staggered card reveal on load */
    .category-card {
      opacity: 0;
      transform: translateY(16px);
      animation: card-in 0.4s ease forwards;
    }
    @keyframes card-in {
      to { opacity: 1; transform: translateY(0); }
    }

    /* Hero dot-grid background */
    .hero-grid {
      background-image: radial-gradient(#e5e5e5 1px, transparent 1px);
      background-size: 24px 24px;
    }

    /* Active filter pill */
    .filter-pill.active {
      background-color: #000000;
      color: #ffffff;
      border-color: #000000;
    }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE FIXES — Products pages
   Appended to preserve all existing rules above.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global: box-sizing safety net ──────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── All interactive elements: minimum 44px tap target on mobile ── */
@media (max-width: 1023px) {
  button, a, [role="button"] {
    min-height: 44px;
  }
  /* Exception: icon-only inline spans inside buttons don't need 44px */
  .material-symbols-outlined {
    min-height: unset;
  }
}

/* ── Mobile bottom bar: safe-area aware ─────────────────────────── */
.mobile-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) 0.6s;
  /* Respect iOS home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-bottom-bar.bar-visible {
  transform: translateY(0);
}

/* Body padding so content clears mobile bottom bar on mobile/tablet */
@media (max-width: 1023px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Products-index: filter bar horizontal scroll ────────────────── */
.filter-scroll {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filter-scroll::-webkit-scrollbar { display: none; }

/* ── Tables inside spec zones: contained horizontal scroll ────────── */
#specs-zone {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#specs-zone table {
  min-width: 480px;
}

/* ── Typography: no overflow on small screens ─────────────────────── */
h1, h2, h3, h4 {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Images: always stay in their containers ─────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── Buttons: never overflow containers ─────────────────────────── */
button, a.btn-primary, a.btn-ghost, a.btn-secondary {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Form inputs: full-width safe ───────────────────────────────── */
input, select, textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Stats strip: wraps gracefully ─────────────────────────────── */
.stats-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* ── Card grid: fallback auto-fit for very wide screens ──────────── */
@media (min-width: 1440px) {
  #category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── WhatsApp float: clear mobile bottom bar ────────────────────── */
@media (max-width: 1023px) {
  /* The WhatsApp button sits at bottom:2rem; push it above the bar */
  .fixed.bottom-8.right-8[aria-label="Contact on WhatsApp"] {
    bottom: calc(72px + 1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── No horizontal scroll anywhere ──────────────────────────────── */
.max-w-container-max,
.max-w-\[1440px\] {
  overflow-x: hidden;
}
/* ═══════════════════════════════════════════════════════════════════
   PRODUCTS PAGE — LAYOUT BUG FIXES  (appended, never overriding design)
   ═══════════════════════════════════════════════════════════════════ */

/*
 * FIX 1 — Layout root: prevent horizontal overflow that the
 *          canvas-offset margin-left + width:100% combination creates.
 *          The pt-[88px] wrapper has no overflow constraint by default.
 */
.products-layout-root {
  overflow-x: hidden;
}

/*
 * FIX 2 — Canvas offset: replace `width:100%` (which ignores the
 *          margin-left and causes rightward overflow) with a
 *          width that is explicitly calculated to leave room for the
 *          sidebar.  On mobile (< lg) no margin, no offset needed.
 */
@media (min-width: 1024px) {
  .products-canvas-offset {
    /* Width = viewport minus sidebar width.
       This replaces the Tailwind w-full that was causing overflow.   */
    width: calc(100% - var(--sidebar-w, 288px));
    /* belt-and-suspenders: ensure no extra overflow */
    overflow-x: hidden;
  }
}
@media (max-width: 1023px) {
  .products-canvas-offset {
    /* On mobile/tablet: full width, no margin (sidebar hidden) */
    width: 100%;
    margin-left: 0;
  }
}

/*
 * FIX 3 — Content canvas: flex/grid children inside `main` must
 *          not escape their container. min-width:0 unlocks shrink.
 */
.products-canvas {
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

/*
 * FIX 4 — Gallery zone and other content zones: contain injected
 *          engine content. Without min-width:0 the zones can push
 *          wider than their parent.
 */
#gallery-zone,
#attributes-zone,
#standout-zone,
#certifications-zone,
#colors-zone,
#faq-zone,
#rfq-zone,
#moq-bar-zone,
#breadcrumb-zone,
#page-hero-zone {
  min-width: 0;
  overflow-x: hidden;
}

/*
 * FIX 5 — Gallery images: belt-and-suspenders on max-width inside
 *          the zone.  The zone overflow:hidden above catches escapees,
 *          but images should also declare max-width themselves.
 */
#gallery-zone img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * FIX 6 — Sidebar: remove the conflicting `overflow-y:auto` on the
 *          <aside> itself.  The aside is a flex column; only the inner
 *          <nav flex-1 overflow-y-auto> should scroll.  Having both
 *          the parent AND the child as scrollable creates double-scroll
 *          jank and misreported scroll heights in WebKit.
 *
 *          We also pin the aside's overflow to visible/hidden so it
 *          never creates a second scroll container.
 */


/*
 * FIX 7 — Sidebar nav items: need width:100% so that text-overflow
 *          ellipsis actually fires on long category names.
 *          Without a width the flex item grows and ellipsis never clips.
 */
#sidebar-nav-list li a,
#sidebar-nav-list li button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * FIX 8 — Mobile category bar: sticky so it stays under the header
 *          while the user scrolls down through product content.
 *          Previously it scrolled away immediately making category
 *          switching only possible by scrolling all the way back up.
 */
@media (max-width: 1023px) {
  #mobile-category-select-wrap {
    position: sticky;
    top: 88px;   /* flush below fixed 88px header */
    z-index: 15; /* above content, below sidebar (z-20), below header */
    /* Prevent iOS momentum-scroll from briefly exposing a gap */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/*
 * FIX 9 — pt-[88px] layout root div: make it a positioning ancestor
 *          for the sticky mobile bar and ensure it never causes its
 *          own horizontal scroll bar.
 */
.products-layout-root {
  position: relative;
  overflow-x: hidden;
}

/*
 * FIX 10 — Footer safety: ensure the footer component container
 *           is never hidden behind the sidebar or affected by the
 *           canvas-offset margin.  Footer sits outside the layout root,
 *           so it must be full-width and have no leftover margins.
 */
#footer-container,
#whatsapp-container {
  width: 100%;
  /* Clear any inherited margin/transform that could shift it */
  margin-left: 0 !important;
  transform: none;
}

/*
 * FIX 11 — Body overflow: guard the entire page from horizontal scroll.
 *           global.css already has html,body overflow-x:hidden but
 *           only on the first block; some browser stylesheet specificity
 *           battles can override it.  Re-declare here explicitly.
 */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── End Products Page Layout Fixes ─────────────────────────────── */