/* Products page (2026-10-06), on top of the live home.css. Same type, colours and buttons as the live home page.
   Buyer first: every product is visible on the first screen, each has its own section with the facts and a quote button.
   No new scripts: the page uses home.js for the menu, language and WhatsApp button. */

/* page head */
.p-head{padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--line)}
.crumbs{margin:0 0 1.75rem;font:600 .8rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink)}
.p-head h1{font-size:clamp(2.6rem,6.4vw,5.6rem);font-weight:800;letter-spacing:-.035em;font-stretch:112%;max-width:15ch;margin-bottom:1.2rem}
.p-lede{max-width:40rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted);margin:0 0 1.8rem}

/* the four products, side by side */
.range{display:grid;grid-template-columns:1fr;gap:1rem;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;list-style:none}
.card{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:var(--btn-radius);background:var(--surface);color:inherit;text-decoration:none;overflow:hidden;transition:border-color .2s}
.card:hover{border-color:var(--ink)}
.card .ph{aspect-ratio:3/2;background:#fff;border-bottom:1px solid var(--line)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .ph.fit img{object-fit:contain}
.card-body{display:flex;flex-direction:column;gap:.4rem;flex:1;padding:1.25rem 1.25rem 1.4rem}
.card .num{font:700 .8rem var(--display);letter-spacing:.14em;color:var(--accent)}
.card h2{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;margin:0}
.card p{margin:0;color:var(--muted);font-size:1rem;line-height:1.45}
.card .go{margin-top:auto;padding-top:.9rem;font:600 .95rem var(--display);color:var(--ink)}
.card .go .arrow{display:inline-block;transition:transform .2s var(--ease)}
.card:hover .go .arrow{transform:translateY(3px)}

/* the same for every product: one strip instead of repeating it four times */
.same{display:grid;grid-template-columns:1fr;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.same li{display:flex;flex-direction:column;gap:.35rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.same li:first-child{border-top:0}
.same b{font:800 clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.same span{color:var(--muted)}

/* one section per product: photo and facts */
.prod{scroll-margin-top:4.5rem}
.prod-grid{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.prod .ph{margin:0;border:1px solid var(--line);border-radius:var(--btn-radius);background:#fff;overflow:hidden}
.prod .ph img{width:100%;height:auto}
.prod .ph figcaption{padding:.65rem 1rem;border-top:1px solid var(--line);font:600 .75rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.prod .h2{margin-bottom:1rem}
.prod .lead{margin:0 0 1.75rem}
.badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.5rem;padding:.4rem .8rem;border:1px solid var(--accent);border-radius:var(--btn-radius);font:600 .78rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
/* specifications: a spec sheet, label over value, two columns on wider screens */
.spec-h{margin:0 0 .9rem;font:700 1.15rem/1.3 var(--display);font-stretch:112%;color:var(--ink)}
.facts{display:grid;grid-template-columns:1fr;margin:0 0 2rem;border-top:2px solid var(--ink)}
.facts div{display:flex;flex-direction:column;gap:.2rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.facts dt{font:700 .98rem/1.3 var(--display);font-stretch:112%;color:var(--accent)}
.facts dd{margin:0;color:var(--text);font-size:1rem;line-height:1.45}
@media (min-width:36rem){
  .facts{grid-template-columns:1fr 1fr;column-gap:1.75rem}
}
.btn-wa{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-wa:hover{background:#25D366;border-color:#25D366;color:#0B2E16}

/* what to send: the live .steps, on a white section */
.sec .steps li::before{background:var(--page)}

@media (min-width:36rem){
  .range{grid-template-columns:1fr 1fr}
  .same{grid-template-columns:1fr 1fr}
  .same li:nth-child(2){border-top:0}
  .same li:nth-child(even){padding-inline-start:1.5rem;border-inline-start:1px solid var(--line)}
}
@media (min-width:56rem){
  .range{grid-template-columns:repeat(4,1fr)}
  .same{grid-template-columns:repeat(3,1fr)}
  .same li{border-top:0;padding:2rem 1.5rem}
  .same li:first-child{padding-inline-start:0}
  .same li+li{border-inline-start:1px solid var(--line)}
  .same li:nth-child(even){padding-inline-start:1.5rem}
  .prod-grid{grid-template-columns:7fr 5fr}
  .prod-grid.flip{grid-template-columns:5fr 7fr}
  .prod-grid.flip .ph{order:2}
}
@media (max-width:30rem){
  .prod .btns .btn{width:100%;justify-content:center}
}

/* countries strip: moves right to left. Only a CSS transform (cheap on slow computers), pauses on hover, still for reduced motion */
.world{padding-block:clamp(2.25rem,4vw,3rem);border-bottom:1px solid var(--line);overflow:hidden}
.world-h{margin:0 auto 1.25rem;font:700 clamp(1.25rem,1.9vw,1.5rem)/1.3 var(--display);font-stretch:112%;color:var(--accent)}
.marquee{display:flex;width:max-content;animation:world 420s linear infinite}
.marquee:hover{animation-play-state:paused}
.track{display:flex;flex:none;margin:0;padding:0;list-style:none}
.track li{display:flex;align-items:center;white-space:nowrap;font:800 clamp(1.6rem,3vw,2.6rem)/1.2 var(--display);font-stretch:108%;letter-spacing:-.02em;color:var(--ink)}
.track li::after{content:"";width:.4rem;height:.4rem;margin:0 clamp(1.25rem,2.5vw,2rem);border-radius:50%;background:var(--accent)}
@keyframes world{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{animation:none;flex-wrap:wrap;width:auto}.marquee .track[aria-hidden]{display:none}.track{flex-wrap:wrap;padding-inline:var(--gutter)}}

/* product card: the whole card links to its section */
.card-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.card-link:hover .go .arrow{transform:translateY(3px)}

/* page head: just the word, big */
.p-head h1{max-width:none;margin:0;color:var(--accent)}

/* product photo carousel: white stage, swipe or arrows, thumbnails below. Native scroll-snap, no autoplay */
.gal{min-width:0}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border:1px solid var(--line);border-radius:var(--btn-radius);background:#fff;overscroll-behavior-x:contain}
.gal-track::-webkit-scrollbar{display:none}
.gal-one .gal-track,.gal-one{display:block}
.gal-slide{flex:0 0 100%;margin:0;aspect-ratio:3/2;scroll-snap-align:start;background:#fff}
.gal-one .gal-slide{border:1px solid var(--line);border-radius:var(--btn-radius)}
.gal-slide img{width:100%;height:100%;object-fit:contain}
.gal-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.75rem}
.gal-n{font:600 .95rem var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.gal-n b{color:var(--ink)}
.gal-arr{width:2.75rem;height:2.75rem;border:1px solid var(--line-strong);border-radius:var(--btn-radius);background:var(--surface);color:var(--ink);font:400 1.15rem var(--body);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.gal-arr:hover{background:var(--ink);border-color:var(--ink);color:var(--page)}
.gal-thumbs{display:flex;gap:.5rem;margin-top:.75rem;overflow-x:auto;scrollbar-width:none}
.gal-thumbs button{flex:0 0 auto;width:4.5rem;aspect-ratio:1;padding:.2rem;border:1px solid var(--line);border-radius:var(--btn-radius);background:#fff;cursor:pointer;transition:border-color .2s}
.gal-thumbs button:hover{border-color:var(--line-strong)}
.gal-thumbs button[aria-current="true"]{border:2px solid var(--accent)}
.gal-thumbs img{width:100%;height:100%;object-fit:contain}
@media (prefers-reduced-motion:reduce){.gal-track{scroll-behavior:auto}}
.prod-grid.flip .gal{order:2}

/* carousel arrows sit on the photo's sides; they appear when the photo is hovered, with a soft teal glow on the hovered arrow.
   Touch screens have no hover, so there the arrows stay visible (and swiping works too). No counter. */
.gal[data-gal]{position:relative}
.gal-arr{position:absolute;top:50%;z-index:3;width:3rem;height:3rem;margin-top:-1.5rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font:400 1.2rem var(--body);cursor:pointer;opacity:0;transition:opacity .25s,box-shadow .25s,background .2s,color .2s,border-color .2s}
.gal-prev{left:.75rem}
.gal-next{right:.75rem}
.gal:hover .gal-arr,.gal-arr:focus-visible{opacity:1}
.gal-arr:hover,.gal-arr:focus-visible{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 0 0 6px rgba(15,118,110,.12),0 0 22px 4px rgba(15,118,110,.35)}
@media (hover:none){.gal-arr{opacity:1;width:2.5rem;height:2.5rem;margin-top:-1.25rem}}
/* flag before each country name (self-hosted PNGs from flagcdn, about 1 KB each) */
.track li img{width:2rem;height:1.5rem;margin-inline-end:.7rem;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08);flex:none}
.track li .shield{display:none}

/* first screen on computers: "Products", the four cards and the countries strip fit exactly one screen (window height minus the 4.5rem header).
   Sizes follow the window height, so short laptop screens still show all of it. */
@media (min-width:56rem){
  .first-screen{display:flex;flex-direction:column;height:calc(100svh - 4.5rem);min-height:32rem}
  .first-screen .p-head{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding-block:clamp(1rem,3svh,2.5rem)}
  .first-screen .p-head h1{font-size:clamp(2.4rem,min(6.4vw,9svh),5.6rem)}
  .first-screen .range{margin-top:clamp(.9rem,3svh,2.5rem)}
  .first-screen .card .ph{aspect-ratio:auto;height:clamp(6.5rem,21svh,13rem)}
  .first-screen .card-body{padding:clamp(.7rem,1.6svh,1.25rem) 1.25rem clamp(.8rem,1.8svh,1.4rem)}
  .first-screen .card .go{padding-top:clamp(.4rem,1svh,.9rem)}
  .first-screen .world{flex:none;padding-block:clamp(.9rem,2.6svh,2.25rem)}
  .first-screen .world-h{margin-bottom:clamp(.4rem,1.2svh,1.25rem)}
  .first-screen .track li{font-size:clamp(1.4rem,min(3vw,4.6svh),2.6rem)}
}

/* each product section also fills exactly one screen on computers, like the first screen.
   "See details" lands the section right under the header. Photo and headline scale with the window height. */
@media (min-width:56rem){
  .prod{display:flex;align-items:center;height:calc(100svh - 4.5rem);min-height:30rem;padding-block:clamp(1.25rem,4svh,3rem);scroll-margin-top:4.5rem}
  .prod .prod-grid{width:100%}
  .prod .gal-slide{aspect-ratio:auto;height:clamp(14rem,62svh,40rem)}
  .prod .h2{font-size:clamp(1.9rem,min(4.6vw,7svh),3.8rem)}
  .prod .eyebrow{margin-bottom:clamp(.5rem,1.5svh,1.2rem)}
  .prod .badge{margin-bottom:clamp(.75rem,2svh,1.5rem)}
  .prod .lead{font-size:clamp(1rem,min(1.6vw,2.6svh),1.3rem);margin-bottom:0}
}
/* card numbers 01–04: a little darker and firmer so they read at a glance (deep teal, not black) */
.card .num{color:#0B5A54;font-size:.88rem;font-weight:800}

/* F/E (layer-cake) reading: text on the left, photos on the right, in every product section */
.prod-grid .gal,.prod-grid.flip .gal{order:2}
@media (min-width:56rem){.prod-grid,.prod-grid.flip{grid-template-columns:5fr 7fr}}
/* key-word bullets: each line starts with the words that matter, in bold */
.keys{margin:0 0 1.75rem;padding:0;list-style:none;display:grid;gap:.7rem;max-width:36rem}
.keys li{position:relative;padding-inline-start:1.4rem;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.45;color:var(--muted)}
.keys li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:.55rem;height:.55rem;border-radius:1px;background:var(--accent)}
.keys b{color:var(--ink);font-weight:600}