/* ==========================================================================
   R B EXPORT & IMPORT — PRODUCT DETAIL PAGES
   (used by every page inside the /products/ folder)

   HOW TO USE THIS FILE (beginner-friendly)
   ----------------------------------------
   1. Colours are NOT set here. They come from ../base.css
      (variables like --bg, --text, --accent). Change a colour in
      base.css and every page updates automatically.
   2. Each numbered block below styles ONE part of a product page:
        1  Base / layout helpers
        2  Top contact bar
        3  Navigation bar
        4  Mobile menu drawer
        5  Buttons
        6  Hero section
        7  Content sections + headings
        8  Spec table + info cards
        9  FAQ accordion
        10 Quote CTA banner
        11 Related product cards
        12 Footer
        13 Animations
        14 Responsive (tablet / mobile)
        15 Page extras (skip link, footer bottom, WhatsApp button)
        16 Product photo gallery (the multi-photo viewer on every page)
   3. Never hard-code a hex colour in this file — use the variables.
   ========================================================================== */

/* ==========================================================================
   1. BASE / LAYOUT HELPERS
   ========================================================================== */
:root {
  --panel: var(--card);
  --muted: var(--text-3);
  --amber: var(--accent);
  --amber-fill: var(--accent-fill);
  --blue: var(--brand-ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* Slim scrollbar (same as the homepage) */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* .wrap keeps text inside a readable column, centred on the page */
.wrap { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }

/* ==========================================================================
   2. TOP CONTACT BAR  (thin strip above the nav)
   ========================================================================== */
.topbar {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--text-3);
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}

.topbar a { transition: color .25s var(--ease-out); }
.topbar a:hover { color: var(--amber); }

/* ==========================================================================
   3. NAVIGATION BAR  (sticky, glassy — same look as index.html)
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glass-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease-out);
}

.nav.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

/* Logo + company name */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand img,
.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform .3s var(--ease-out);
}

.brand:hover img { transform: scale(1.06); }

/* Desktop links (hidden on small screens — see block 14) */
.navlinks { display: flex; align-items: center; gap: 26px; }

.navlinks a {
  position: relative;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color .25s var(--ease-out);
}

/* Amber underline that grows on hover */
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: var(--amber-fill);
  border-radius: 2px;
  transition: width .3s var(--ease-out);
}

.navlinks a:hover,
.navlinks a[aria-current="page"] { color: var(--amber); }

.navlinks a:hover::after,
.navlinks a[aria-current="page"]::after { width: 100%; }

/* The "Get Quote" link sits inside .navlinks but is a button, not a link.
   Restore the .button look: the generic .navlinks a rules above would
   otherwise paint the label grey (and amber-on-amber on hover) and add the
   animated link underline underneath the CTA. */
.navlinks .button {
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.navlinks .button:hover,
.navlinks .button:focus-visible {
  color: var(--accent-ink);
}

/* No growing underline on the CTA — it is a filled button, not a nav link */
.navlinks .button::after { content: none; }

/* ==========================================================================
   4. MOBILE MENU DRAWER
   The hamburger (.menu-btn) is hidden on desktop and shown on mobile.
   base.js adds / removes the class "open".
   ========================================================================== */
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}

.menu-btn:hover { border-color: var(--amber); color: var(--amber); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 26px;
  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow-y: auto;
}

.mobile-menu.open { display: flex; }

/* The close (X) button inside the drawer */
.mobile-menu .menu-btn { display: inline-flex; align-self: flex-end; }

.mobile-menu a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color .25s var(--ease-out), padding-left .25s var(--ease-out);
}

.mobile-menu a:hover { color: var(--amber); padding-left: 8px; }

/* "Get Quote" in the drawer: keep the amber CTA look instead of the plain
   link styling above (padding, bottom border, grey label, hover shift). */
.mobile-menu a.button {
  margin-top: 16px;
  padding: 15px 24px;
  border-bottom: none;
  border-radius: 3px;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.mobile-menu a.button:hover,
.mobile-menu a.button:focus-visible {
  color: var(--accent-ink);
  padding-left: 24px;
}

/* ==========================================================================
   LANGUAGE CONVERTER  (same widget as the index.html navbar)
   Markup: <select id="langSelect"> in .navlinks and
   <select id="langSelectMobile"> in .mobile-menu. js/i18n.js looks for
   exactly those two ids. The product pages do not load Tailwind, so the
   values below repeat what the equivalent Tailwind classes in index.html
   resolve to — this keeps both nav bars looking identical.
   ========================================================================== */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
}

/* Desktop dropdown: 11px uppercase, amber border on hover / focus */
.lang-switch .lang-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--card-60);
  border: 1px solid rgba(18, 52, 86, .4);   /* navy-800 at 40% */
  border-radius: .125rem;
  padding: 8px 28px 8px 12px;
  cursor: pointer;
  transition: border-color .15s cubic-bezier(.4, 0, .2, 1);
}

.lang-switch .lang-select:hover { border-color: rgba(245, 158, 11, .5); }

.lang-switch .lang-select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--amber);
}

/* The small chevron sitting inside the dropdown (data-lucide="chevron-down") */
.lang-caret {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  color: var(--text-4);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Drawer: native arrow, 14px label (same as the index.html mobile menu) */
.mobile-menu .lang-select {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--text-2);
  background: var(--card-60);
  border: 1px solid rgba(18, 52, 86, .4);   /* navy-800 at 40% */
  border-radius: .125rem;
  padding: 12px 16px;
  margin-top: 8px;
  cursor: pointer;
}

.mobile-menu .lang-select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--amber);
}

/* ==========================================================================
   5. BUTTONS
   .button         = amber gradient (main call to action)
   .button.secondary = outlined (secondary action)
   ========================================================================== */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  background: var(--amber-fill);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

/* Light sweep across the button on hover */
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  transition: left .5s;
}

.button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245, 158, 11, .3); }
.button:hover::before { left: 100%; }

.button.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: none;
}

.button.secondary:hover { border-color: var(--amber); color: var(--amber); box-shadow: none; }

/* ==========================================================================
   6. HERO SECTION  (breadcrumb + headline + image)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 72px;
  border-bottom: 1px solid var(--line);
}

/* Soft amber glow behind the hero, top-right */
.hero::before {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, .16), transparent 70%);
  pointer-events: none;
}

.breadcrumb {
  position: relative;
  margin-bottom: 32px;
  font-size: 12px;
  color: var(--text-4);
}

.breadcrumb a { color: var(--text-3); transition: color .25s var(--ease-out); }
.breadcrumb a:hover { color: var(--amber); }

/* Hero layout: text column + photo gallery column side-by-side.
   Every /products/ page puts its gallery inside .hero-grid as .hero-media. */
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 34px;
  align-items: center;
}

.hero-media { min-width: 0; }

/* Small pill above the title, e.g. "Agricultural products · export supply" */
.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--bd-amber-600-30);
  border-radius: 999px;
  background: rgba(245, 158, 11, .07);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.035em;
  margin-bottom: 20px;
}

/* Intro paragraph under the title */
.lead { max-width: 58ch; font-size: 16px; color: var(--text-2); }

/* Row of small pill badges (Bulk supply, FOB · CIF · DDP ...) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 28px; }

.chip {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--bd-amber-600-30);
  border-radius: 999px;
  background: rgba(245, 158, 11, .07);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 700;
}

/* Button row inside the hero and the CTA */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The big frame of the product photo gallery (see block 16).
   The gallery lives in the hero's right column (.hero-media), so the photo
   uses a fixed 4:3 frame: every upload is cropped to the same card shape and
   all /products/ pages look consistent whatever the source photo's size.
   The <img> still carries its real intrinsic width/height in the HTML, so
   the photo keeps the correct proportions before this CSS loads (and if
   the stylesheet never loads at all). */
.gallery-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  background: var(--bg-deep);
  transform-origin: center;
  transition: opacity .3s var(--ease-out), transform .6s var(--ease-out);
}

/* ==========================================================================
   7. CONTENT SECTIONS + HEADINGS
   .section    = a normal band
   .section.alt = a slightly different coloured band (used for FAQ)
   ========================================================================== */
.section { padding: 64px 0; }
.section.alt { background: var(--card-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Small uppercase label above each section title */
.kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--amber);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Short amber underline drawn under the kicker */
.kicker::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-top: 8px;
  background: var(--amber-fill);
  border-radius: 2px;
}

.section h2 {
  margin-bottom: 28px;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.025em;
}

/* Wide left column (table) + narrow right column (info card) */
.split {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  align-items: start;
}

/* ==========================================================================
   8. SPECIFICATION TABLE + INFO CARDS
   ========================================================================== */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-trans);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.spec-table th,
.spec-table td {
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* Left label column: small amber uppercase text */
.spec-table th {
  width: 32%;
  background: var(--panel-700-50);
  color: var(--amber);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.spec-table td { color: var(--text-2); }

/* Generic info card (e.g. "Common applications") */
.card {
  padding: 24px;
  background: var(--card-trans);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.card:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 158, 11, .4);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}

.card h3 {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.card p { font-size: 13px; color: var(--text-2); }

/* Small print under a card paragraph */
.note { margin-top: 12px; font-size: 12px; color: var(--text-4); font-style: italic; }

/* ==========================================================================
   9. FAQ ACCORDION  (<details> + <summary> — no JavaScript needed)
   ========================================================================== */
.faq { max-width: 900px; }

.faq details {
  margin-bottom: 10px;
  background: var(--card-trans);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .3s var(--ease-out);
}

.faq details[open] { border-color: var(--bd-amber-600-30); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  transition: color .25s var(--ease-out);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--amber); }

/* "+" turns into "-" when the answer is open */
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--amber);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.faq details[open] summary::after { content: "−"; }

.faq details p {
  padding: 0 20px 20px;
  font-size: 14px;
  color: var(--text-3);
}

/* ==========================================================================
   10. QUOTE CTA BANNER  (the "Request a quotation" panel)
   ========================================================================== */
.cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(120deg, var(--card-trans) 0%, var(--card-2) 100%);
}

/* Amber glow in the top-right corner of the banner */
.cta::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -70px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, .18), transparent 70%);
  pointer-events: none;
}

.cta > * { position: relative; }

.cta h2 { margin-bottom: 12px; }
.cta p { max-width: 62ch; font-size: 14px; color: var(--text-3); }
.cta .actions { flex-shrink: 0; }

/* ==========================================================================
   11. RELATED PRODUCT CARDS
   ========================================================================== */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.related-card {
  display: block;
  padding: 0;               /* the product photo runs edge to edge */
  overflow: hidden;         /* keeps the photo inside the rounded corners */
  background: var(--card-trans);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), background-color .4s var(--ease-out);
}

/* Product photo at the top of every related card */
.related-thumb {
  width: 100%;
  height: 170px;
  object-fit: cover;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  transition: transform .5s var(--ease-out);
}

/* Text block under the photo (product name + one-line description) */
.related-body { padding: 18px 22px 22px; }

.related-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
}

.related-card span { display: block; font-size: 12px; color: var(--text-4); }

.related-card:hover {
  transform: translateY(-5px);
  border-color: var(--amber);
  background: var(--tint-navy-2);
}

.related-card:hover strong { color: var(--amber); }
.related-card:hover span { color: var(--text-2); }
.related-card:hover .related-thumb { transform: scale(1.06); }

/* "View the full export catalogue" link under the cards */
.section p a { color: var(--amber); font-weight: 700; transition: opacity .25s var(--ease-out); }
.section p a:hover { opacity: .8; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.footer {
  padding: 56px 0 32px;
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  color: var(--text-4);
  font-size: 13px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
}

.footer strong {
  display: block;
  margin-bottom: 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer p { max-width: 42ch; line-height: 1.8; }

.footer a {
  display: block;
  margin: 8px 0;
  color: var(--text-4);
  transition: color .25s var(--ease-out), transform .25s var(--ease-out);
}

.footer a:hover { color: var(--amber); transform: translateX(3px); }

/* ==========================================================================
   13. ANIMATIONS  (add class="fade-up" to any block to fade it in on scroll)
   base.js adds the class "visible" when the block scrolls into view.
   ========================================================================== */
/* Scroll-reveal helpers.
   The rules that HIDE content are gated behind the "js" flag, which every
   page sets with a tiny inline script in <head> before the CSS loads (see
   index.html / documents.html / product.html / products/*.html). Without
   JavaScript the content stays fully visible instead of being stuck at
   opacity:0 forever — same convention as the inline styles on index.html. */
.js .fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

.js .fade-up.visible { opacity: 1; transform: translateY(0); }

/* Staggered delays: d1, d2, d3, d4, d5, d6 (d = delay) */
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .4s; }
.d6 { transition-delay: .48s; }

/* Thin animated gradient line under the nav (homepage detail) */
.glow-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, #2563A8, #F59E0B, #2563A8, transparent);
  background-size: 200% 100%;
  animation: rb-shimmer 4s linear infinite;
}

@keyframes rb-shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

/* ==========================================================================
   14. RESPONSIVE  (tablet + mobile)
   Change 900px / 820px / 560px to tweak the breakpoints.
   ========================================================================== */

/* Tablet: stack the hero (photo column moves below the text — see
   .hero-media order) and the two-column spec layout */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-media { order: 2; }
  .split { grid-template-columns: 1fr; }
  .related { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile: collapse the desktop nav into the hamburger drawer */
@media (max-width: 820px) {
  .navlinks { display: none; }
  .menu-btn { display: inline-flex; }
  .topbar .wrap { justify-content: center; }
  .cta { flex-direction: column; align-items: flex-start; padding: 30px; }
  .section { padding: 48px 0; }
  .hero { padding: 36px 0 48px; }
}

/* Small phones: single column everywhere */
@media (max-width: 560px) {
  .related,
  .footer-grid { grid-template-columns: 1fr; }
  .related-thumb { height: 200px; }
  .brand { font-size: 11px; letter-spacing: .08em; }
  .spec-table th { width: 40%; }
  .actions .button { width: 100%; }
}

/* Respect visitors who prefer less movement.
   The selector must be as specific as the hiding rule above (.js .fade-up)
   or it would lose the cascade and leave the content invisible. */
@media (prefers-reduced-motion: reduce) {
  .js .fade-up { opacity: 1; transform: none; transition: none; }
  .glow-line { animation: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   15. PAGE EXTRAS  (added with the full page build)
   ========================================================================== */

/* Visually hidden but readable by screen readers (table captions) */
.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;
}

/* First tab stop: "Skip to content" for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--amber-fill);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 0 0 4px 0;
}

.skip-link:focus { left: 0; }

/* Keeps the skip link target out of the tab ring but focusable */
#main:focus { outline: none; }

/* Second info card sits below the first one in the two-column layout */
.split .card + .card { margin-top: 16px; }

/* Copyright row at the bottom of the footer */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

.footer-bottom p { max-width: none; margin: 0; }

/* .wa-fab (floating WhatsApp shortcut) is defined ONCE in base.css, which
   every product page loads. It used to be duplicated here as well, so the
   two copies could drift apart — the base.css version is now the only one. */

/* ==========================================================================
   16. PRODUCT PHOTO GALLERY  (the multi-photo viewer on every /products/ page)
   --------------------------------------------------------------------------
   Driven by js/product-gallery.js. One gallery per page, sitting in the
   hero's right column (.hero-media) and marked with data-gallery:
     .hero-media       the hero's right column (positioning box for gallery)
     .product-gallery  the <div> gallery itself (card frame, no page padding)
     .gallery-stage    box holding the big photo and the overlay controls
     .gallery-photo    the big photo (sizing defined near the hero, above)
     .gallery-caption  one-line caption under the photo (synced by the script)
     .gallery-count    "2 / 5" badge, bottom-left of the photo. It also
                       carries aria-live, so the position is announced.
     .gallery-nav      wrapper for the round previous / next buttons
     .gallery-btn      one round glass button
     .gallery-thumbs   strip of small photos
     .gallery-thumb    one small photo button (.is-active = current photo)
      .gallery-progress slim amber position bar across the card's top edge
                        (created by the script — only exists when the gallery
                        script runs, so no-JS pages simply show no bar)
   Only variables from ../base.css are used — no hard-coded hex colours.
   ========================================================================== */

/* Gallery card: a framed photo viewer — rounded corners, layered shadow
   and a hairline that warms up when the visitor points at the gallery. */
.product-gallery {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow:
    0 30px 60px -28px rgba(0, 0, 0, .65),
    0 2px 10px rgba(0, 0, 0, .25);
  overflow: hidden;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.product-gallery:hover {
  border-color: var(--bd-amber-600-30);
  box-shadow:
    0 34px 70px -28px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(245, 158, 11, .12);
}

/* Slim amber position bar pinned to the top of the card. js/product-gallery.js
   creates one per gallery and grows it as the visitor moves through the
   photos (like a carousel indicator). It never exists without JavaScript,
   so the no-JS page simply shows no bar. */
.gallery-progress {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  height: 3px;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: var(--accent-fill);
  box-shadow: 0 0 12px rgba(245, 158, 11, .55);
  transition: width .45s var(--ease-out);
}

/* The stage is the positioning box for the badge and the arrow buttons.
   overflow:hidden clips the photo's hover zoom; the ::after scrim keeps the
   overlay controls readable over light-coloured photos. */
.gallery-stage {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
}

.gallery-stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(2, 6, 23, .78), rgba(2, 6, 23, 0));
  pointer-events: none;
  z-index: 1;
}

/* Soft fade + tiny scale while a different photo is loading (class added by
   the script), and a slow, subtle zoom when the visitor points at the photo. */
.gallery-photo.is-swapping { opacity: .25; transform: scale(.985); }
.gallery-stage:hover .gallery-photo:not(.is-swapping) { transform: scale(1.03); }

/* "2 / 5" pill in the bottom-left corner of the photo, with an amber status
   dot. It also carries aria-live, so the position is announced. */
.gallery-count {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.6;
}

.gallery-count::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* Previous / next arrows float over the photo, centred on the left and right
   edges the way a professional lightbox does. pointer-events:none on the
   wrapper lets clicks and finger swipes pass straight through to the photo. */
.gallery-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  pointer-events: none;
}

.gallery-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-2);
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
  transition: transform .25s var(--ease-out), color .25s var(--ease-out),
              background-color .25s var(--ease-out), border-color .25s var(--ease-out);
}

.gallery-btn:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}

.gallery-btn:active { transform: scale(.94); }
.gallery-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.gallery-btn svg { width: 20px; height: 20px; }

/* One-line caption under the big photo — the script copies the active
   photo's data-alt into it, so the "Photo 1 of 4: ..." line from the
   report now sits in one tidy, truncated row instead of loose page text.
   The amber marker in front of it ties the row to the badge above. */
.gallery-caption {
  position: relative;
  margin: 0;
  padding: 12px 16px 12px 36px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent);
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-caption::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
}

/* Thumbnail filmstrip. It never wraps: flex-basis 0 + a 140px size cap
   means 4 or 5 photos spread evenly across the whole card while a short
   strip (2 photos) stays a tidy, centred pair of tiles instead of two
   enormous squares. When even 56px tiles no longer fit, the strip scrolls
   sideways instead of breaking into an uneven second row. */
.gallery-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
  justify-content: flex-start;
  justify-content: safe center; /* older browsers drop this line and keep flex-start */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

.gallery-thumbs::-webkit-scrollbar { height: 6px; }
.gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }

.gallery-thumb {
  position: relative;
  flex: 1 1 0;
  min-width: 56px;
  max-width: 140px;
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-deep);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  opacity: .66;
  transition: opacity .25s var(--ease-out), border-color .25s var(--ease-out),
              box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}

.gallery-thumb:hover {
  opacity: 1;
  border-color: var(--text-4);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
  transform: translateY(-3px);
}

.gallery-thumb:hover img { transform: scale(1.08); }
.gallery-thumb:focus-visible { opacity: 1; outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* The photo currently on screen — also written into the HTML so the page
   looks right even before the script runs */
.gallery-thumb.is-active,
.gallery-thumb[aria-pressed="true"] {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .32);
}

/* (Tablet / mobile hero stacking lives in block 14 above — this duplicate
   @media block was removed to keep one source of truth.) */

/* Small phones: compact strip and tighter overlay controls */
@media (max-width: 560px) {
  .gallery-caption { font-size: 11.5px; padding: 10px 12px 10px 30px; }
  .gallery-caption::before { left: 13px; }
  .gallery-thumbs { padding: 12px; gap: 8px; }
  .gallery-thumb { min-width: 52px; max-width: 120px; }
  .gallery-count { left: 10px; bottom: 10px; padding: 5px 10px; font-size: 10px; }
  .gallery-nav { padding: 0 8px; }
  .gallery-btn { width: 38px; height: 38px; }
  .gallery-btn svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   UTILITY CLASSES USED BY THE PRODUCT PAGE MARKUP
   The pages in /products/ link base.css + product-page.css only and
   deliberately do NOT load tailwind.css. A handful of small Tailwind
   utility classes are still used in the markup for icon sizing and
   spacing, so they are defined here to match the values Tailwind
   resolves to on index.html. This keeps the header, mobile drawer and
   footer spacing identical across every page of the site.
   ========================================================================== */

/* w-5 / h-5 -> 20px. Applies to the Lucide icons inside .menu-btn
   (hamburger / close) and the gallery arrows. */
.w-5 { width: 20px; }
.h-5 { height: 20px; }

/* Lucide replaces <i data-lucide> with an <svg>; force the box so the
   icons do not fall back to their default 24px intrinsic size. */
.menu-btn svg,
.w-5 svg { width: 20px; height: 20px; }

/* mb-4 -> 1rem bottom margin (close button in the mobile drawer) */
.mb-4 { margin-bottom: 1rem; }

/* mt-4 -> 1rem top margin (the "Get Quote" link in the mobile drawer) */
.mt-4 { margin-top: 1rem; }

/* self-end -> align to the end of the cross axis (drawer close button) */
.self-end { align-self: flex-end; }