/**
 * Shop home (shop.4syz.com landing page).
 * Chrome stays clean navy; vibrancy lives in the catalog tiles.
 * Everything scoped under .shx so it cannot leak into other templates.
 */

.shx{
  --shx-ink:#0d253f; --shx-ink-2:#081726; --shx-lime:#9fe870;
  --shx-line:#e6e8e6; --shx-mute:#6b7a8a; --shx-soft:#f4f6f4;
  /* Category accents — the theme's own tokens, used to colour the catalog */
  --a-green:#5BAE4A; --a-gold:#C4A45A; --a-teal:#0EA5A4;
  --a-orange:#F59E0B; --a-cyan:#38c8ff; --a-lime:#9fe870;
  --shx-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  color:#33414f;
}
.shx *{box-sizing:border-box}
.shx-wrap{max-width:1200px;margin-inline:auto;padding-inline:24px}
.shx-sec{padding:64px 24px}
.shx-sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:28px}
.shx-sec-hd h2,.shx-band h2,.shx-cta h2{
  font-family:'Inter',system-ui,sans-serif;color:var(--shx-ink);
  font-weight:800;letter-spacing:-.022em;line-height:1.1;
  font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0;
}
.shx-link{color:var(--shx-mute);font-weight:700;font-size:.875rem;text-decoration:none;white-space:nowrap}
.shx-link:hover{color:var(--shx-ink)}

/* Micro-label: the procurement vernacular (mono, tracked) */
.shx-eyebrow{
  font-family:var(--shx-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--shx-mute);margin:0 0 14px;
}
.shx-eyebrow--light{color:rgba(255,255,255,.6)}

/* ---------- Hero ---------- */
.shx-hero{background:var(--shx-ink);color:#fff;padding:72px 0 80px;position:relative;overflow:hidden}
.shx-hero::after{ /* one quiet atmospheric wash — no gradient blobs */
  content:"";position:absolute;inset:auto -10% -60% 55%;height:420px;
  background:radial-gradient(closest-side,rgba(159,232,112,.16),transparent);pointer-events:none;
}
.shx-h1{
  font-family:'Inter',system-ui,sans-serif;color:#fff;font-weight:800;
  font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.032em;margin:0 0 16px;
}
.shx-h1-accent{color:var(--shx-lime)}
.shx-sub{color:rgba(255,255,255,.76);font-size:clamp(1rem,1.4vw,1.125rem);max-width:44ch;margin:0 0 28px}

/* Signature: search by product OR SKU */
.shx-search{display:flex;gap:8px;max-width:560px;background:#fff;border-radius:14px;padding:7px;position:relative;z-index:1}
.shx-search input[type=search]{
  flex:1;border:0;outline:none;padding:14px 14px;font-size:1rem;color:var(--shx-ink);
  background:transparent;min-width:0;
}
.shx-search input::placeholder{color:#9aa7b2}
.shx-search button{
  border:0;background:var(--shx-ink);color:#fff;font-weight:800;font-size:.95rem;
  padding:14px 26px;border-radius:9px;cursor:pointer;transition:background .2s;
}
.shx-search button:hover{background:var(--shx-ink-2)}

.shx-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0 30px;position:relative;z-index:1}
.shx-chip-label{font-family:var(--shx-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.shx-chip{
  font-family:var(--shx-mono);font-size:.75rem;color:rgba(255,255,255,.85);text-decoration:none;
  border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:6px 12px;transition:border-color .2s,color .2s;
}
.shx-chip em{font-style:normal;color:rgba(255,255,255,.5)}
.shx-chip:hover{border-color:var(--shx-lime);color:#fff}

.shx-trust{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin:0;padding:0;position:relative;z-index:1;max-width:52ch}
.shx-trust li{color:rgba(255,255,255,.82);font-size:.875rem;display:flex;align-items:center;gap:9px;font-weight:500}
.shx-trust li::before{content:"\2714";color:var(--shx-lime);font-size:.72rem;font-weight:800;flex-shrink:0}
@media(max-width:460px){.shx-trust{grid-template-columns:1fr}}

/* Standalone search band — sits directly under the hero, distinct from the
   narrower .shx-search used inline inside .shx-hero-copy. */
.shx-search-band{background:var(--shx-ink);padding:36px 24px 44px;text-align:center;position:relative}
.shx-search-eyebrow{font-family:var(--shx-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin:0 0 16px}
.shx-search-band .shx-search{max-width:640px;margin:0 auto;border-radius:16px;padding:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);transition:box-shadow .25s ease}
.shx-search-band .shx-search:focus-within{box-shadow:0 20px 50px rgba(0,0,0,.25),0 0 0 3px rgba(159,232,112,.5)}
.shx-search-band .shx-search input[type=search]{padding:18px 8px 18px 18px;font-size:1.05rem}
.shx-search-band .shx-search button{padding:16px 28px;border-radius:11px;display:inline-flex;align-items:center;gap:8px}
.shx-search-band .shx-search button svg{width:17px;height:17px;flex-shrink:0}
.shx-search-band .shx-chips{justify-content:center;margin:18px 0 0}

/* ---------- Three lanes ---------- */
.shx-lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-block:48px}
.shx-lane{
  display:flex;flex-direction:column;gap:8px;padding:28px;border-radius:16px;text-decoration:none;
  border:1px solid var(--shx-line);background:#fff;position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
}
.shx-lane::before{content:"";position:absolute;inset:0 auto 0 0;width:4px}
.shx-lane--catalogue::before{background:var(--a-green)}
.shx-lane--gift::before{background:var(--a-gold)}
.shx-lane--quote::before{background:var(--a-teal)}
.shx-lane:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(13,37,63,.10)}
.shx-lane-kicker{font-family:var(--shx-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--shx-mute)}
.shx-lane h2{margin:0;font-size:1.3rem;font-weight:800;color:var(--shx-ink);letter-spacing:-.015em}
.shx-lane p{margin:0;color:var(--shx-mute);font-size:.94rem;line-height:1.55}
.shx-lane-go{margin-top:6px;font-weight:800;font-size:.875rem;color:var(--shx-ink)}

/* ---------- Category tiles (the vibrant layer) ---------- */
.shx-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shx-cat{
  display:flex;align-items:center;gap:16px;padding:14px;border-radius:14px;text-decoration:none;
  background:#fff;border:1px solid var(--shx-line);transition:transform .22s ease,box-shadow .22s ease;
}
.shx-cat:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(13,37,63,.09)}
.shx-cat-art{
  width:76px;height:76px;border-radius:11px;flex:0 0 auto;
  background-size:cover;background-position:center;background-color:var(--shx-soft);position:relative;
}
.shx-cat-art::after{content:"";position:absolute;inset:0;border-radius:11px;opacity:.9}
.shx-a-green  .shx-cat-art{background-color:color-mix(in srgb,var(--a-green) 18%,#fff)}
.shx-a-gold   .shx-cat-art{background-color:color-mix(in srgb,var(--a-gold) 18%,#fff)}
.shx-a-teal   .shx-cat-art{background-color:color-mix(in srgb,var(--a-teal) 18%,#fff)}
.shx-a-orange .shx-cat-art{background-color:color-mix(in srgb,var(--a-orange) 18%,#fff)}
.shx-a-cyan   .shx-cat-art{background-color:color-mix(in srgb,var(--a-cyan) 18%,#fff)}
.shx-a-lime   .shx-cat-art{background-color:color-mix(in srgb,var(--a-lime) 24%,#fff)}
.shx-a-green  {border-left:3px solid var(--a-green)}
.shx-a-gold   {border-left:3px solid var(--a-gold)}
.shx-a-teal   {border-left:3px solid var(--a-teal)}
.shx-a-orange {border-left:3px solid var(--a-orange)}
.shx-a-cyan   {border-left:3px solid var(--a-cyan)}
.shx-a-lime   {border-left:3px solid var(--a-lime)}
.shx-cat-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.shx-cat-name{font-weight:800;color:var(--shx-ink);font-size:1rem;line-height:1.25}
.shx-cat-count{font-family:var(--shx-mono);font-size:.72rem;color:var(--shx-mute);letter-spacing:.04em}

/* ---------- Best sellers ---------- */
.shx-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.shx-prod{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;background:#fff;
  border:1px solid var(--shx-line);border-radius:14px;padding:14px;
  transition:transform .22s ease,box-shadow .22s ease;
}
.shx-prod:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(13,37,63,.10)}
.shx-prod-img img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.shx-prod-sku{font-family:var(--shx-mono);font-size:.68rem;letter-spacing:.06em;color:var(--shx-mute);margin-top:8px}
.shx-prod-name{font-weight:700;color:var(--shx-ink);font-size:.93rem;line-height:1.35}
.shx-prod-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:4px}
.shx-prod-price{color:var(--shx-ink);font-weight:800;font-size:.95rem}
.shx-prod-price del{color:var(--shx-mute);font-weight:400;margin-right:4px}
.shx-prod-price ins{text-decoration:none}
.shx-prod-moq{font-family:var(--shx-mono);font-size:.68rem;color:var(--shx-mute);white-space:nowrap}

/* ---------- Bands ---------- */
.shx-band{background:var(--shx-ink);color:#fff;margin-block:16px}
.shx-band-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:52px}
.shx-band h2{color:#fff}
.shx-band-sub{color:rgba(255,255,255,.72);margin:10px 0 0;max-width:52ch}
.shx-btn{
  display:inline-block;border-radius:99px;padding:15px 30px;font-weight:800;font-size:.95rem;
  text-decoration:none;white-space:nowrap;transition:transform .15s ease,background .2s ease;
}
.shx-btn:hover{transform:translateY(-2px)}
.shx-btn--lime{background:var(--shx-lime);color:var(--shx-ink)}
.shx-btn--ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.shx-btn--ghost:hover{border-color:#fff}

/* ---------- Value props ---------- */
.shx-vals{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.shx-val{padding:22px;border:1px solid var(--shx-line);border-radius:14px;background:#fff}
.shx-val-tag{
  display:inline-block;font-family:var(--shx-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--shx-ink);background:var(--shx-soft);
  border-radius:6px;padding:5px 9px;margin-bottom:10px;
}
.shx-val p{margin:0;color:var(--shx-mute);font-size:.92rem;line-height:1.6}

/* ---------- Industries / logos / quotes ---------- */
.shx-inds{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.shx-inds li{
  border:1px solid var(--shx-line);border-radius:99px;padding:10px 18px;background:#fff;
  color:var(--shx-ink);font-weight:600;font-size:.9rem;
}
.shx-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.shx-logo{
  display:flex;align-items:center;justify-content:center;height:72px;border-radius:11px;
  border:1px dashed var(--shx-line);background:var(--shx-soft);
  color:#9aa7b2;font-size:.72rem;font-family:var(--shx-mono);text-align:center;padding:6px;
}
.shx-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shx-quote{
  margin:0;padding:24px;border:1px solid var(--shx-line);border-radius:14px;background:#fff;
  border-top:3px solid var(--a-gold);
}
.shx-quote p{margin:0 0 14px;color:var(--shx-ink);font-size:1rem;line-height:1.6}
.shx-quote cite{font-style:normal;font-family:var(--shx-mono);font-size:.7rem;letter-spacing:.06em;color:var(--shx-mute)}

/* ---------- Closing CTA ---------- */
.shx-cta{background:var(--shx-soft);border-top:1px solid var(--shx-line)}
.shx-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:56px}
.shx-cta p{color:var(--shx-mute);margin:10px 0 0;max-width:52ch}
.shx-cta-acts{display:flex;gap:12px;flex-wrap:wrap}
.shx-cta .shx-btn--ghost{border-color:var(--shx-ink);color:var(--shx-ink)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .shx-prods{grid-template-columns:repeat(3,1fr)}
  .shx-vals{grid-template-columns:repeat(2,1fr)}
  .shx-cats{grid-template-columns:repeat(2,1fr)}
  .shx-logos{grid-template-columns:repeat(3,1fr)}
  .shx-quotes{grid-template-columns:1fr}
}
@media (max-width:860px){
  .shx-lanes{grid-template-columns:1fr}
  .shx-band-inner,.shx-cta-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  .shx-sec{padding:44px 20px}
  .shx-hero{padding:52px 0 60px}
  .shx-prods{grid-template-columns:repeat(2,1fr)}
  .shx-cats{grid-template-columns:1fr}
  .shx-vals{grid-template-columns:1fr}
  .shx-search{flex-direction:column;background:transparent;padding:0;gap:10px}
  .shx-search input[type=search]{background:#fff;border-radius:11px}
  .shx-search button{width:100%;padding:15px}
  .shx-btn{width:100%;text-align:center}
}

/* Accessibility */
.shx a:focus-visible,.shx button:focus-visible,.shx input:focus-visible{
  outline:2px solid var(--shx-lime);outline-offset:3px;border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  .shx *{transition:none!important;animation:none!important}
  .shx-lane:hover,.shx-cat:hover,.shx-prod:hover,.shx-btn:hover{transform:none}
}


/* ============================================================
   Offer-led hero: proposition + lead capture
   ============================================================ */
.shx-hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center; position: relative; z-index: 1;
}
.shx-hero-copy .shx-h1 { margin-bottom: 14px; }
.shx-hero-copy .shx-sub { margin-bottom: 22px; }
.shx-hero-copy .shx-trust { margin-bottom: 20px; }
.shx-hero-alt { margin: 0; font-size: .9rem; color: rgba(255,255,255,.6); }
.shx-hero-alt a { color: var(--shx-lime); text-decoration: none; font-weight: 700; }
.shx-hero-alt a:hover { text-decoration: underline; }

.shx-lead {
  background: #fff; border-radius: 16px; padding: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
.shx-lead-title { font-size: 1.3rem; font-weight: 800; color: var(--shx-ink); margin: 0 0 5px; letter-spacing: -.02em; }
.shx-lead-sub { font-size: .85rem; color: var(--shx-mute); margin: 0 0 18px; }
.shx-lead-error {
  background: #fdecec; color: #a32d2d; border-radius: 8px;
  padding: 9px 12px; font-size: .85rem; margin: 0 0 14px;
}
.shx-lead-form label {
  display: block; font-size: 12.5px; font-weight: 700;
  color: var(--shx-ink); margin: 0 0 5px;
}
.shx-lead-form input[type="text"],
.shx-lead-form input[type="email"],
.shx-lead-form select {
  width: 100%; box-sizing: border-box; margin: 0 0 14px;
  border: 1px solid var(--shx-line); border-radius: 9px;
  padding: 12px 13px; font-size: 15px; color: var(--shx-ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.shx-lead-form input:focus, .shx-lead-form select:focus {
  border-color: var(--shx-ink); outline: none;
  box-shadow: 0 0 0 3px rgba(13, 37, 63, .08);
}
.shx-lead-submit { width: 100%; margin-top: 4px; border: 0; cursor: pointer; font-size: 1rem; }
.shx-lead-fine { margin: 12px 0 0; font-size: 11.5px; color: var(--shx-mute); text-align: center; }
.shx-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.shx-lead-done { text-align: center; padding: 16px 4px; }
.shx-lead-done h2 { font-size: 1.2rem; font-weight: 800; color: var(--shx-ink); margin: 0 0 8px; }
.shx-lead-done p { color: var(--shx-mute); font-size: .92rem; margin: 0 0 18px; }

@media (max-width: 900px) {
  .shx-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .shx-lead { padding: 22px; }
}


/* ============================================================
   Hero option 2: image panel + lead strip
   ============================================================ */
.shx-hero--panel { padding: 56px 0 60px; }
.shx-hero-grid2 {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 48px; align-items: center; position: relative; z-index: 1;
}
.shx-hero-copy .shx-h1 { margin-bottom: 14px; }
.shx-hero-copy .shx-sub { margin-bottom: 22px; }
.shx-hero-copy .shx-trust { margin-bottom: 26px; }
.shx-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }

/* The photograph carries itself — no wash, no text on top. */
.shx-hero-media {
  position: relative; margin: 0; border-radius: 18px; overflow: hidden;
  background: #efe9de; box-shadow: 0 26px 60px rgba(0, 0, 0, .3);
  aspect-ratio: 4 / 3;
}
.shx-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shx-media-cta {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(255, 255, 255, .95); border-radius: 11px;
  padding: 11px 14px; text-decoration: none;
  transition: transform .2s ease;
}
.shx-media-cta:hover { transform: translateY(-2px); }
.shx-media-cta-k {
  font-family: var(--shx-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--shx-mute);
}
.shx-media-cta-t { font-size: .9rem; font-weight: 800; color: var(--shx-ink); letter-spacing: -.01em; }

/* Lead strip */
.shx-leadstrip { background: var(--shx-soft); border-bottom: 1px solid var(--shx-line); padding: 22px 0; }
.shx-leadstrip-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.shx-leadstrip-hd strong { font-size: 1.05rem; font-weight: 800; color: var(--shx-ink); letter-spacing: -.015em; }
.shx-leadstrip-hd span { font-size: .85rem; color: var(--shx-mute); }
.shx-leadstrip-form {
  display: grid; grid-template-columns: 1.1fr 1.3fr .85fr .75fr 1fr auto; gap: 10px; align-items: center;
}
.shx-leadstrip-form input[type="text"],
.shx-leadstrip-form input[type="email"],
.shx-leadstrip-form input[type="number"],
.shx-leadstrip-form select {
  width: 100%; box-sizing: border-box; margin: 0;
  border: 1px solid var(--shx-line); border-radius: 9px;
  padding: 12px 13px; font-size: 14px; color: var(--shx-ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.shx-leadstrip-form input:focus, .shx-leadstrip-form select:focus {
  border-color: var(--shx-ink); outline: none; box-shadow: 0 0 0 3px rgba(13, 37, 63, .08);
}
.shx-leadstrip-form .shx-btn { border: 0; cursor: pointer; padding: 13px 26px; font-size: .9rem; }
.shx-leadstrip-done { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.shx-leadstrip-done strong { font-size: 1.05rem; font-weight: 800; color: var(--shx-ink); }
.shx-leadstrip-done span { color: var(--shx-mute); font-size: .9rem; }
.shx-lead-error { background: #fdecec; color: #a32d2d; border-radius: 8px; padding: 9px 12px; font-size: .85rem; margin: 0 0 12px; }
.shx-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

@media (max-width: 1100px) {
  .shx-leadstrip-form { grid-template-columns: 1fr 1fr 1fr; }
  .shx-leadstrip-form .shx-btn { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .shx-hero-grid2 { grid-template-columns: 1fr; gap: 30px; }
  .shx-hero-media { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .shx-leadstrip-form { grid-template-columns: 1fr; }
  .shx-hero-ctas .shx-btn { width: 100%; text-align: center; }
}

/* Hero right-side fallback panel (shown when no custom hero image is set). */
.shx-hero-media--placeholder .shx-hero-fallback{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  width:100%;height:100%;min-height:320px;
  background:linear-gradient(135deg,#0d253f 0%,#1a2f52 100%);
  border-radius:18px;padding:40px;text-align:center;
}
.shx-hero-fallback-emoji{font-size:72px;line-height:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}
.shx-hero-fallback-cap{color:rgba(255,255,255,.9);font-size:16px;font-weight:600;max-width:280px;line-height:1.5}