/* ==========================================================================
   UmmErgonomics — public site styles
   Brand tokens: deep teal + warm amber + IBM Plex / Archivo type system
   ========================================================================== */

:root{
  --ink:#142420;
  --ink-soft:#48594f;
  --teal:#0e7a6b;
  --teal-deep:#0a5850;
  --teal-pale:#e3efe9;
  --paper:#f4f6f3;
  --paper-2:#eceee9;
  --surface:#ffffff;
  --line:#d8ddd3;
  --amber:#b8712a;
  --amber-deep:#8f5720;
  --danger:#b3261e;
  --shadow: 0 12px 28px -16px rgba(20,36,32,0.28);
  --shadow-lift: 0 20px 36px -18px rgba(20,36,32,0.38);
  --radius: 10px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{
  font-family:'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
p{margin:0 0 1em;}
.eyebrow{
  display:inline-block;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-deep);
  font-weight:500;
  margin-bottom:6px;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
main{display:block;}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:0.92rem;
  padding:12px 20px;border-radius:3px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease, background .15s ease, color .15s ease;
  line-height:1;
}
.btn-primary{background:var(--amber);color:#fff;}
.btn-primary:hover{background:var(--amber-deep);}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-block{width:100%;justify-content:center;}
.btn-sm{padding:8px 14px;font-size:0.82rem;}
.btn-danger{background:var(--danger);color:#fff;}

/* ---- utility bar / header ---- */
.utility{background:var(--ink);color:#cfe0d9;font-size:0.8rem;}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;padding:9px 24px;gap:16px;flex-wrap:wrap;}
.utility a:hover{color:var(--amber);}

header.site{background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:30;}
header.site .bar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:20px;}
.logo{display:flex;align-items:center;gap:11px;}
.logo svg{flex:none;}
.logo-text{line-height:1.05;display:flex;flex-direction:column;}
.logo-text .name{font-family:'Archivo';font-weight:900;font-size:1.28rem;letter-spacing:-0.02em;}
.logo-text .name em{font-style:normal;color:var(--teal);}
.logo-text .tag{font-family:'IBM Plex Mono';font-size:0.6rem;letter-spacing:0.15em;color:var(--ink-soft);text-transform:uppercase;}
nav.main{display:flex;align-items:center;gap:26px;font-weight:600;font-size:0.9rem;}
nav.main > a{padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap;}
nav.main > a:hover{border-color:var(--amber);}

/* position:relative plus a matched padding-bottom/margin-bottom pair extends this
   element's actual hoverable box a little past the toggle, with no visual effect
   (the negative margin cancels the padding for layout purposes). Without it, the
   mouse crosses truly empty space on the way down to the menu below, :hover is lost
   mid-transit, and the menu closes before the cursor arrives — reported as "the
   dropdown vanishes". The menu's margin-top is adjusted to -4px so the visible gap
   stays the same 10px it was before (14px hit-box − 4px margin = 10px). */
.nav-dropdown{position:relative;padding-bottom:14px;margin-bottom:-14px;}
.nav-dropdown-toggle{
  display:flex;align-items:center;gap:6px;background:none;border:none;padding:6px 0;
  font-family:inherit;font-weight:600;font-size:0.9rem;color:var(--ink);cursor:pointer;
  border-bottom:2px solid transparent;
}
.nav-dropdown-toggle svg{transition:transform .15s ease;}
.nav-dropdown:hover .nav-dropdown-toggle,.nav-dropdown-toggle:hover,.nav-dropdown.open .nav-dropdown-toggle{border-color:var(--amber);}
.nav-dropdown.open .nav-dropdown-toggle svg{transform:rotate(180deg);}
.nav-dropdown-menu{
  position:absolute;top:100%;left:-14px;margin-top:-4px;min-width:220px;max-height:70vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease, transform .15s ease;z-index:40;
}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-dropdown-menu a{display:block;padding:9px 12px;border-radius:4px;font-weight:500;white-space:nowrap;}
.nav-dropdown-menu a:hover{background:var(--paper-2);color:var(--teal-deep);}
.nav-dropdown-sep{height:1px;background:var(--line);margin:6px 4px;}
/* Visually hidden but still present for screen readers and search engines — used for
   the homepage's <h1>, which needs to exist and carry real keywords for SEO without
   putting a second, redundant headline banner in front of the hero design. */
.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;}
.head-actions{display:flex;align-items:center;gap:10px;}
.head-text,.head-whatsapp{white-space:nowrap;}
.search-form{display:flex;align-items:center;border:1px solid var(--line);border-radius:20px;padding:6px 6px 6px 14px;background:var(--paper);}
.search-form input{border:none;background:transparent;font-family:inherit;font-size:0.86rem;outline:none;width:150px;}
.search-form button{border:none;background:var(--ink);color:#fff;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.mobile-toggle{display:none;border:1px solid var(--line);background:none;width:38px;height:38px;border-radius:6px;align-items:center;justify-content:center;cursor:pointer;flex:none;}
.mobile-nav{display:none;flex-direction:column;padding:14px 24px 20px;border-top:1px solid var(--line);}
.mobile-nav a{padding:10px 0;border-bottom:1px solid var(--line);font-weight:600;}
.mobile-nav.open{display:flex;}
.mobile-nav .search-form{width:100%;margin-bottom:14px;}
.mobile-nav .search-form input{width:100%;}
.mobile-nav-cta{border-bottom:none !important;margin-top:14px;}
.mobile-nav-cta + .mobile-nav-cta{margin-top:10px;}

.breadcrumb-bar{background:var(--paper-2);border-bottom:1px solid var(--line);font-size:0.82rem;}
.breadcrumb-bar .wrap{padding:10px 24px;color:var(--ink-soft);}
.breadcrumb-bar a:hover{color:var(--teal-deep);}
.breadcrumb-bar .sep{margin:0 8px;color:var(--line);}

/* ---- hero slider ---- */
.hero{position:relative;background:var(--ink);overflow:hidden;}
.hero-track{display:flex;transition:transform .5s ease;}
.slide{min-width:100%;display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;}
.slide.alt{grid-template-columns:1fr 1.05fr;}
.slide.alt .slide-copy{order:2;}
.slide.alt .slide-img{order:1;}
.slide-copy{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:56px;color:#fff;}
.slide-copy .eyebrow{color:var(--amber);}
.slide-copy h2{font-size:2.3rem;color:#fff;line-height:1.08;max-width:10ch;text-wrap:balance;}
.slide-copy p{color:#cfe0d9;font-size:1rem;max-width:38ch;line-height:1.55;margin:0;}
.price-row{display:flex;align-items:baseline;gap:10px;font-family:'IBM Plex Mono';flex-wrap:wrap;}
.price-row .now{font-size:1.4rem;color:var(--amber);font-weight:500;}
.price-row .was{font-size:0.95rem;color:#8fa89f;text-decoration:line-through;}
.price-row .save{background:var(--teal);color:#fff;font-size:0.7rem;padding:3px 8px;border-radius:2px;letter-spacing:.04em;}
.slide-img{position:relative;background:#0b1614;}
.slide-img img{width:100%;height:100%;object-fit:cover;min-height:360px;}
.hero-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5;}
.hero-dots button{width:8px;height:8px;padding:0;border-radius:50%;background:rgba(255,255,255,0.35);border:none;cursor:pointer;}
.hero-dots button.active{background:var(--amber);width:22px;border-radius:5px;}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;z-index:5;cursor:pointer;}
.hero-arrow.prev{left:16px;} .hero-arrow.next{right:16px;}

/* ---- trust strip ---- */
.trust{background:var(--teal-pale);border-bottom:1px solid var(--line);}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:20px 24px;}
.trust-item{display:flex;gap:10px;align-items:center;font-size:0.84rem;font-weight:600;color:var(--teal-deep);}
.trust-item svg{flex:none;}

section.pad{padding:60px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px;gap:20px;flex-wrap:wrap;}
.section-head h2{font-size:1.8rem;}
.section-head .sub{color:var(--ink-soft);font-size:0.96rem;margin-top:6px;max-width:56ch;}

/* ---- category tiles ---- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.cat-tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);background:var(--paper-2);transition:box-shadow .25s ease, transform .25s ease;}
.cat-tile:hover,.cat-tile:focus-visible{box-shadow:var(--shadow-lift);transform:translateY(-3px);}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cat-tile:hover img,.cat-tile:focus-visible img{transform:scale(1.06);}
.cat-tile .label{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg, rgba(10,20,17,0.9), rgba(10,20,17,0.05) 70%, transparent);color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;}
.cat-tile .label .n{font-family:'Archivo';font-weight:800;font-size:1rem;}
.cat-tile .label .c{font-family:'IBM Plex Mono';font-size:0.7rem;color:#bcd6cc;}
.cat-tile .arrow{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateX(-6px);transition:opacity .25s ease, transform .25s ease;}
.cat-tile:hover .arrow,.cat-tile:focus-visible .arrow{opacity:1;transform:translateX(0);}

/* ---- product grid / cards ---- */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.products.cols-3{grid-template-columns:repeat(3,1fr);}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;}
.card:hover,.card:focus-visible{box-shadow:var(--shadow-lift);transform:translateY(-4px);border-color:var(--teal);}
.card .thumb{position:relative;aspect-ratio:1/1;background:var(--paper-2);overflow:hidden;}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .thumb img,.card:focus-visible .thumb img{transform:scale(1.06);}
.badge{position:absolute;top:10px;left:10px;background:var(--amber);color:#fff;font-family:'IBM Plex Mono';font-size:0.62rem;letter-spacing:.05em;padding:4px 8px;border-radius:3px;text-transform:uppercase;box-shadow:0 4px 10px -4px rgba(0,0,0,0.4);}
.badge.cond{left:auto;right:10px;}
.badge-excellent{background:var(--teal);}
.badge-good{background:var(--amber);}
.badge-fair{background:#7a7a7a;}
.card .info{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1;}
.stars{color:var(--amber);font-size:0.8rem;letter-spacing:1px;}
.card h3{font-family:'IBM Plex Sans';font-weight:600;font-size:0.94rem;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.35;min-height:2.7em;transition:color .15s ease;}
.card:hover h3,.card:focus-visible h3{color:var(--teal-deep);}
.card .price-row{margin-top:auto;padding-top:2px;}
.card .price-row .now{font-size:1.15rem;font-weight:600;}
.card .brand{font-family:'IBM Plex Mono';font-size:0.68rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}

/* ---- why-buy ---- */
.why{background:var(--ink);color:#fff;}
.why h2{color:#fff;max-width:22ch;text-wrap:balance;}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px;}
.why-item{border-top:2px solid var(--teal);padding-top:16px;}
.why-item .big{font-family:'Archivo';font-weight:900;font-size:2.1rem;color:var(--amber);}
.why-item p{color:#c7d6cf;font-size:0.92rem;line-height:1.55;margin:8px 0 0;}

/* ---- service area ---- */
.service{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.service-map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);}
.service h2{font-size:1.7rem;margin-bottom:14px;text-wrap:balance;}
.service p{color:var(--ink-soft);line-height:1.65;}
.service ul{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:10px;}
.service li{display:flex;gap:10px;font-size:0.92rem;color:var(--ink);}
.service li svg{flex:none;color:var(--teal);margin-top:2px;}

/* ---- shop / category listing ---- */
.shop-layout{display:grid;grid-template-columns:250px 1fr;gap:36px;align-items:start;}
.filters{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:20px;}
.filters h4{font-family:'IBM Plex Mono';font-size:0.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 10px;}
.filter-group{padding:16px 0;border-bottom:1px solid var(--line);}
.filter-group:first-child{padding-top:0;}
.filter-group:last-child{border-bottom:none;}
.filter-group label{display:flex;align-items:center;gap:8px;font-size:0.88rem;padding:5px 0;cursor:pointer;}
.filter-group input[type="checkbox"],.filter-group input[type="radio"]{accent-color:var(--teal);}
.price-inputs{display:flex;gap:8px;align-items:center;}
.price-inputs input{width:75px;padding:7px;border:1px solid var(--line);border-radius:4px;font-family:inherit;}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.toolbar .count{color:var(--ink-soft);font-size:0.9rem;}
.toolbar select{padding:9px 12px;border:1px solid var(--line);border-radius:4px;font-family:inherit;background:var(--surface);}
.pagination{display:flex;gap:6px;justify-content:center;margin-top:36px;}
.pagination a,.pagination span{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;border:1px solid var(--line);border-radius:4px;font-size:0.88rem;}
.pagination a:hover{border-color:var(--teal);color:var(--teal-deep);}
.pagination .active{background:var(--ink);color:#fff;border-color:var(--ink);}
.empty-state{text-align:center;padding:60px 20px;color:var(--ink-soft);}

/* ---- product detail ---- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.gallery-main{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;background:var(--paper-2);margin-bottom:12px;}
.gallery-main img{width:100%;height:100%;object-fit:cover;}
.gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap;}
.gallery-thumbs img{width:72px;height:72px;object-fit:cover;border-radius:4px;border:2px solid var(--line);cursor:pointer;}
.gallery-thumbs img.active{border-color:var(--teal);}
.pd-title{font-size:1.7rem;margin-bottom:8px;text-wrap:balance;}
.pd-meta{display:flex;gap:14px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.pd-price{display:flex;align-items:baseline;gap:12px;font-family:'IBM Plex Mono';margin:18px 0;}
.pd-price .now{font-size:2rem;color:var(--amber-deep);font-weight:500;}
.pd-price .was{font-size:1.1rem;color:var(--ink-soft);text-decoration:line-through;}
.pd-price .save{background:var(--teal);color:#fff;font-size:0.75rem;padding:4px 9px;border-radius:2px;}
.spec-table{width:100%;border-collapse:collapse;margin:20px 0;}
.spec-table td{padding:9px 0;border-bottom:1px solid var(--line);font-size:0.9rem;}
.spec-table td:first-child{color:var(--ink-soft);width:42%;}
.pd-actions{display:flex;gap:12px;margin:22px 0;flex-wrap:wrap;}
.pd-cta-note{font-size:0.84rem;color:var(--ink-soft);margin-top:10px;}
.related-heading{margin:56px 0 24px;}

/* ---- forms (contact + admin share these) ---- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;max-width:640px;}
.form-row{margin-bottom:16px;}
.form-row label{display:block;font-weight:600;font-size:0.88rem;margin-bottom:6px;}
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="tel"],.form-row input[type="number"],.form-row input[type="password"],.form-row select,.form-row textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:4px;font-family:inherit;font-size:0.94rem;background:var(--surface);color:var(--ink);
}
.form-row textarea{min-height:120px;resize:vertical;}
.form-note{font-size:0.82rem;color:var(--ink-soft);margin-top:6px;}
.alert{padding:14px 16px;border-radius:4px;margin-bottom:20px;font-size:0.92rem;}
.alert-success{background:#e3f3e0;color:#2a5c1f;border:1px solid #bfe3b8;}
.alert-error{background:#fbe6e4;color:var(--danger);border:1px solid #f2c1bd;}

/* ---- static pages ---- */
.page-hero{padding:48px 0 8px;}
.page-hero h1{font-size:2.1rem;text-wrap:balance;}
.prose{max-width:72ch;line-height:1.7;color:var(--ink);}
.prose h2{font-size:1.4rem;margin:32px 0 12px;}

/* ---- footer ---- */
footer{background:var(--ink);color:#c7d6cf;padding:52px 0 0;margin-top:60px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.12);}
footer h4{font-family:'IBM Plex Mono';font-size:0.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8fa89f;margin:0 0 14px;}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:0.9rem;}
footer a:hover{color:var(--amber);}
.foot-about{font-size:0.9rem;line-height:1.6;max-width:34ch;color:#c7d6cf;}
.foot-bottom{display:flex;justify-content:space-between;padding:18px 0;font-size:0.8rem;color:#7f958c;flex-wrap:wrap;gap:10px;}

/* ---- responsive ---- */
header.site{position:sticky;top:0;z-index:50;}
@media (max-width: 980px){
  header.site .bar>nav.main,header.site .bar .search-form{display:none;}
  .mobile-toggle{display:flex;}
  .slide{grid-template-columns:1fr;}
  .slide.alt .slide-copy,.slide.alt .slide-img{order:initial;}
  .slide-img img{min-height:240px;}
  .trust .wrap,.cats,.products{grid-template-columns:repeat(2,1fr);}
  .why-grid,.service,.foot-grid,.shop-layout,.product-detail{grid-template-columns:1fr;}
  .filters{position:static;}
  /* the hero's height changes once copy + image stack into one column, so arrows
     anchored at top:50% of the whole thing land over the text instead of the photo —
     simplest fix on touch-sized screens is to drop the arrows; dots + autoplay + swipe
     still work fine. */
  .hero-arrow{display:none;}
}
@media (max-width: 640px){
  /* Texting is how most customers actually reach us, so it's the one contact button
     that always stays in the header, even on the smallest screens — shrunk to an icon
     to leave room for the menu button. WhatsApp remains one tap away in the mobile
     menu instead of competing for the same cramped row. */
  .head-text{padding:0;width:40px;height:40px;border-radius:50%;justify-content:center;flex:none;}
  .head-text .btn-label{display:none;}
  .head-whatsapp{display:none;}
  .head-actions{gap:8px;}
}
@media (max-width: 560px){
  .cats,.products{grid-template-columns:1fr;}
  .slide-copy{padding:36px 24px;}
}