/* ============================================================
   Fastflow site stylesheet
   Shared by all three domains. Anything site-specific (colours,
   names, contact details) comes from site_config.py, not here.
   ============================================================ */

:root{
  --brand:#E8400C;
  --brand-dark:#C4340A;
  --brand-soft:#FDEDE7;
  --ink:#1C1C1C;
  --body:#5A5A5A;
  --muted:#7A7A7A;
  --line:#E5E5E5;
  --line-2:#D5D5D5;
  --paper:#FAFAFA;
  --photo:#E6E7E8;
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:#fff;
     line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}

/* ---------- top bar ---------- */
.topbar{background:var(--ink);color:#9A9A9A;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
              height:40px;gap:16px;flex-wrap:wrap}
.topbar a{color:#9A9A9A}
.topbar a:hover{color:#fff}
.langs{display:flex;gap:10px;align-items:center}
.langs span{cursor:pointer}
.langs .on{color:#fff}
.langs .sep{color:#4A4A4A;cursor:default}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:60}
header .wrap{display:flex;align-items:center;justify-content:space-between;
             height:82px;gap:24px}
.logo{font-weight:700;font-size:25px;letter-spacing:-.02em;white-space:nowrap}
.logo b{color:var(--brand)}
nav{display:flex;height:100%;align-items:stretch;gap:2px;margin-left:auto}
nav a{display:flex;align-items:center;padding:0 22px;font-size:17px;color:#333;
      border-bottom:3px solid transparent;transition:.15s;white-space:nowrap}
nav a:hover{color:var(--brand)}
nav a.active{color:var(--brand);font-weight:500;border-bottom-color:var(--brand)}
.cta{background:var(--brand);color:#fff;font-size:15px;font-weight:500;
     padding:12px 22px;border-radius:3px;border:0;cursor:pointer;
     white-space:nowrap;transition:.15s;font-family:inherit;display:inline-block}
.cta:hover{background:var(--brand-dark);color:#fff}
.burger{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:var(--ink)}

/* ---------- buttons ---------- */
.btn{font-family:inherit;font-size:15px;font-weight:500;padding:13px 26px;
     border-radius:3px;cursor:pointer;border:1px solid transparent;
     transition:.15s;display:inline-block}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark);color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.btn.line{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn.line:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:440px;display:flex;align-items:center;
      background:var(--photo) center/cover no-repeat;overflow:hidden}
.hero .shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(22,22,22,.78) 0%,rgba(22,22,22,.55) 42%,rgba(22,22,22,0) 78%)}
.hero .wrap{position:relative;padding-top:60px;padding-bottom:60px}
.rule{width:44px;height:3px;background:var(--brand)}
.hero h1{font-size:clamp(32px,4vw,48px);font-weight:700;line-height:1.12;
         letter-spacing:-.025em;color:#fff;margin-top:20px;max-width:14em}
.hero p{font-size:17px;color:rgba(255,255,255,.86);margin-top:18px;
        max-width:34em;line-height:1.65}
.hero .btns{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}

/* ---------- page banner ---------- */
.banner{background:var(--photo);position:relative;min-height:200px;
        display:flex;align-items:center}
.banner .shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(22,22,22,.72),rgba(22,22,22,.25))}
.banner .wrap{position:relative;padding:48px 32px}
.banner h1{color:#fff;font-size:34px;font-weight:700;letter-spacing:-.02em}
.banner .crumb{color:rgba(255,255,255,.72);font-size:14px;margin-top:8px}

/* ---------- sections ---------- */
section{padding:72px 0}
section.alt{background:var(--paper);border-top:1px solid var(--line);
            border-bottom:1px solid var(--line)}
.sechead{text-align:center;margin-bottom:40px}
.sechead h2{font-size:30px;font-weight:700;letter-spacing:-.02em}
.sechead .rule{margin:14px auto 0}
.sechead p{font-size:15px;color:var(--muted);margin-top:16px;max-width:38em;
           margin-left:auto;margin-right:auto}

/* ---------- cards ---------- */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);transition:.18s;
      cursor:pointer;display:flex;flex-direction:column}
.card:hover{border-color:var(--line-2);box-shadow:0 8px 24px -14px rgba(0,0,0,.3);
            transform:translateY(-2px)}
.card .ph{height:180px;background:var(--photo)}
.card .body{padding:18px}
.card h3{font-size:17px;font-weight:600}
.card p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.55}
.card .more{font-size:14px;color:var(--brand);font-weight:500;
            margin-top:14px;display:inline-block}
.spec{display:flex;gap:18px;margin-top:12px;font-size:13px;
      color:var(--body);flex-wrap:wrap}
.spec b{font-weight:600;color:var(--ink)}
.subcatnav{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:0 0 28px}
.subcatnav a{padding:9px 14px;border:1px solid var(--line);border-radius:999px;
  font-size:14px;color:var(--body);background:#fff}
.subcatnav a:hover{color:var(--brand);border-color:var(--brand)}
.subcatblock + .subcatblock{margin-top:40px}
.subcatblock h3{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:18px}

/* ---------- split block ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split .ph{height:340px;background:var(--photo)}
.split h2{font-size:30px;font-weight:700;letter-spacing:-.02em}
.split .rule{margin:14px 0 20px}
.split p{font-size:15px;color:var(--body);line-height:1.8}
.split p + p{margin-top:14px}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.pillar h4{font-size:15px;font-weight:600}
.pillar p{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.55}

/* ---------- services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.service{padding:26px;background:#fff;border:1px solid var(--line)}
.service .n{width:36px;height:36px;border-radius:3px;background:var(--brand-soft);
            color:var(--brand-dark);display:flex;align-items:center;
            justify-content:center;font-weight:600;font-size:15px}
.service h3{font-size:17px;font-weight:600;margin-top:16px}
.service p{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.6}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:0 auto}
.qa{border:1px solid var(--line);background:#fff;margin-bottom:12px}
.q{width:100%;text-align:left;background:none;border:0;font-family:inherit;
   font-size:17px;font-weight:500;color:var(--ink);padding:20px 24px;
   cursor:pointer;display:flex;justify-content:space-between;
   align-items:center;gap:16px}
.q:hover{color:var(--brand)}
.q .sign{color:var(--brand);font-size:22px;font-weight:400;line-height:1;
         flex-shrink:0;transition:.2s}
.qa.open .q .sign{transform:rotate(45deg)}
.a{display:none;padding:0 24px 22px;font-size:15px;color:var(--body);line-height:1.8}
.qa.open .a{display:block}
.a ul{margin:8px 0 0 18px}
.a li{margin-bottom:5px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.info h3{font-size:20px;font-weight:600;margin-bottom:4px}
.info .co{font-size:16px;color:var(--ink);font-weight:500;margin-bottom:20px}
.row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.row .k{font-size:14px;color:var(--muted);width:92px;flex-shrink:0}
.row .v{font-size:15px;color:var(--ink);line-height:1.6}
.row .v a{color:var(--brand)}
.info .ph{background:var(--photo)}
.form label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;margin-top:16px}
.form input,.form textarea,.form select{
  width:100%;font-family:inherit;font-size:15px;padding:12px 14px;
  border:1px solid var(--line-2);border-radius:3px;background:#fff;color:var(--ink)}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--brand)}
.form textarea{min-height:120px;resize:vertical}
.form .btn{margin-top:22px}
.sent{display:none;margin-top:16px;padding:14px 16px;background:var(--brand-soft);
      color:var(--brand-dark);font-size:14px;border-radius:3px}
.err{display:none;margin-top:16px;padding:14px 16px;background:#FDECEC;
     color:#B02020;font-size:14px;border-radius:3px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#9A9A9A;padding:56px 0 26px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:36px;
       padding-bottom:28px;border-bottom:1px solid #333}
.fgrid h4{font-size:15px;color:#fff;font-weight:600;margin-bottom:14px}
.fgrid a{display:block;font-size:14px;color:#9A9A9A;margin-bottom:10px}
.fgrid a:hover{color:#fff}
.flogo{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.02em}
.fgrid .about{font-size:14px;line-height:1.7;margin-top:12px;max-width:26em}
.fcontact{font-size:14px;line-height:1.9}
.fcontact span{color:#fff}
.fbot{padding-top:20px;display:flex;justify-content:space-between;gap:12px;
      flex-wrap:wrap;font-size:13px;color:#6E6E6E}

/* ---------- floating WhatsApp ---------- */
.wa{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;
    align-items:center;gap:10px;background:#25A366;color:#fff;
    padding:13px 18px;border-radius:40px;font-size:15px;font-weight:500;
    box-shadow:0 8px 24px -8px rgba(0,0,0,.4);transition:.18s}
.wa:hover{background:#1E8C56;color:#fff;transform:translateY(-2px)}
.wa svg{width:22px;height:22px;flex-shrink:0;fill:currentColor}
.wa .txt{white-space:nowrap}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .split,.contact{grid-template-columns:1fr;gap:32px}
  .services,.grid3{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:760px){
  .burger{display:block}
  nav{position:absolute;top:82px;left:0;right:0;background:#fff;
      border-bottom:1px solid var(--line);flex-direction:column;
      align-items:stretch;height:auto;display:none;
      box-shadow:0 12px 24px -16px rgba(0,0,0,.4)}
  nav.open{display:flex}
  nav a{padding:18px 32px;border-bottom:1px solid var(--line);
        border-left:3px solid transparent}
  nav a.active{border-bottom-color:var(--line);border-left-color:var(--brand)}
  header .cta{display:none}
  .grid4{grid-template-columns:1fr}
  .topbar{font-size:12px}
  .fgrid{grid-template-columns:1fr}
  .wa{right:16px;bottom:16px;padding:14px;border-radius:50%}
  .wa .txt{display:none}
}

/* ---------- product listing + detail ---------- */
/* Default card/media images fill the frame (category tiles, etc.). */
.card .ph img,.pdp-media .ph img{width:100%;height:100%;object-fit:cover;object-position:center}
.card .badge,.pdp-info .badge{display:inline-block;font-size:12px;font-weight:600;
  color:var(--brand-dark);background:var(--brand-soft);padding:3px 9px;
  border-radius:3px;margin-bottom:8px}
.card .meta,.pdp-info .meta{font-size:13px;color:var(--muted);margin-top:6px}
.card .price,.pdp-info .price{font-size:18px;font-weight:700;color:var(--brand);margin-top:10px}

/* Product photos: square frame like industrial catalogues (e.g. Rippa), but
   object-fit:contain so the full machine is visible instead of cropped. */
.card .ph.product-shot,
.pdp-media .ph.product-shot{
  height:auto;aspect-ratio:1/1;background:#f3f5f8;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:18px}
.card .ph.product-shot img,
.pdp-media .ph.product-shot img{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block}

/* empty category state — the common case until listings exist */
.empty{max-width:560px;margin:0 auto;text-align:center;padding:16px 0 8px}
.empty .ph{height:180px;background:var(--photo);margin-bottom:26px}
.empty h3{font-size:20px;font-weight:600}
.empty p{font-size:15px;color:var(--body);line-height:1.75;margin-top:12px}
.empty .btns{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}

/* product detail */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.pdp-media .ph.main{height:420px;background:var(--photo)}
.pdp-media .ph.main.product-shot{height:auto;aspect-ratio:1/1;padding:28px}
.pdp-media .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pdp-media .thumb{width:84px;height:84px;background:var(--photo)}
.pdp-media .thumb.product-shot{width:84px;height:84px;aspect-ratio:auto;padding:8px;flex-shrink:0}
.pdp-info h2{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
.pdp-info .price.big{font-size:26px;margin-top:14px}
.pdp-info .desc{font-size:15px;color:var(--body);line-height:1.8;margin-top:18px}
.pdp-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.terms{font-size:14px;color:var(--muted);margin-top:22px;line-height:1.7}
.terms a{color:var(--brand)}
.spectable-wrap{margin-top:56px}
.spectable-wrap h3{font-size:20px;font-weight:600;margin-bottom:16px}
.spectable{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.spectable th,.spectable td{text-align:left;font-size:14px;padding:13px 18px;
  border-bottom:1px solid var(--line);vertical-align:top}
.spectable th{width:220px;font-weight:600;color:var(--ink);background:var(--paper)}
.spectable td{color:var(--body)}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0}
@media(max-width:1000px){
  .pdp{grid-template-columns:1fr;gap:28px}
  .pdp-media .ph.main{height:320px}
  .pdp-media .ph.main.product-shot{height:auto}
  .spectable th{width:140px}
}

/* admin: contact inquiries table */
.itable{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:14px}
.itable th,.itable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.itable thead th{font-weight:600;color:var(--ink);background:var(--paper);white-space:nowrap}
.itable td{color:var(--body)}
.itable tr:last-child td{border-bottom:0}
.itable .when{white-space:nowrap;color:var(--muted)}
.itable .msg{max-width:360px;line-height:1.5}
.itable a{color:var(--brand-dark)}
.itable .badge{display:inline-block;font-size:12px;font-weight:600;
  color:var(--brand-dark);background:var(--brand-soft);padding:3px 9px;border-radius:3px}
.itable .badge.warn{color:#8a5300;background:#fdf1d6}
/* rows whose email never went out (notified_at NULL) stand out */
.itable tr.pending{background:#fffaf0}
.itable tr.pending td{border-bottom-color:#f0e2c4}

:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---- Admin dashboard ---------------------------------------------------- */
.adminbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.adminbar form{margin:0}
.flash{padding:12px 16px;border-radius:4px;font-size:14px;margin-bottom:16px;border:1px solid}
.flash-ok{background:var(--brand-soft);border-color:#f3c9b8;color:var(--brand-dark)}
.flash-err{background:#fdecec;border-color:#f3b7b7;color:#9a2020}
.admintable td{vertical-align:middle}
.admintable .thumb{display:inline-block;width:54px;height:54px;background:var(--photo);
  border-radius:4px;overflow:hidden}
.admintable .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rowactions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rowactions form{margin:0}
.btn.small{padding:7px 13px;font-size:13px}
.btn.line.danger{color:#9a2020;border-color:#e6b3b3}
.btn.line.danger:hover{border-color:#9a2020;color:#9a2020}

/* Product form */
.pform{max-width:860px;margin-top:8px}
.pform label{display:block;font-size:14px;font-weight:500;margin:16px 0 6px}
.pform input[type=text],.pform input:not([type]),.pform input[type=file],
.pform textarea,.pform select{
  width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:4px;
  font-family:inherit;font-size:15px;background:#fff}
.pform textarea{resize:vertical}
.pform input:focus,.pform textarea:focus,.pform select:focus{
  outline:none;border-color:var(--brand)}
.frow{display:flex;gap:16px;flex-wrap:wrap}
.frow .fcol{flex:1 1 200px}
.frow .fcol.grow{flex:2 1 320px}
.pform .muted,.muted{color:var(--muted);font-weight:400}
.hint{font-size:13px;color:var(--muted);margin-top:6px}
.fchecks{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin:0}
.chk input{width:auto;margin:0}
.photos{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
.photo{width:130px;border:1px solid var(--line);border-radius:6px;padding:8px;background:#fff}
.photo img{width:100%;height:96px;object-fit:cover;border-radius:4px;display:block;background:var(--photo)}
.photo .chk{font-size:12px;margin-top:6px}
.photo .chk.del{color:#9a2020}
.factions{display:flex;gap:12px;margin-top:28px}

/* Public "Our team" grid (About page) */
.teamgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:8px}
.teamgrid .member{text-align:center}
.teamgrid .mphoto{width:100%;aspect-ratio:1/1;background:var(--photo);border-radius:8px;
  overflow:hidden;margin-bottom:14px}
.teamgrid .mphoto img{width:100%;height:100%;object-fit:cover;display:block}
.teamgrid .member h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.teamgrid .mrole{font-size:14px;color:var(--brand-dark);font-weight:500;margin-top:3px}
.teamgrid .member p{font-size:14px;color:var(--body);line-height:1.6;margin-top:10px}
@media(max-width:900px){.teamgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.teamgrid{grid-template-columns:1fr}}

/* About intro photo fills its slot */
.split .ph{overflow:hidden}
.split .ph img{width:100%;height:100%;object-fit:cover;display:block}

/* Admin panel (About-page photo) */
.panel{border:1px solid var(--line);border-radius:8px;padding:22px 24px;background:#fff;max-width:860px}
.panel h3{font-size:17px;font-weight:600}
.panel .pform{margin-top:8px}
.teamhead{font-size:20px;font-weight:600;margin:36px 0 16px}