/* ==================================================================
   Crackers Sellers — public site styles
   Colour/font tokens (:root custom props) are injected server-side from
   config/theme.php (see layouts/site.blade.php). Edit the config to re-skin.
   ================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
.csx{font-family:var(--bd);color:var(--ink);background:var(--cream);line-height:1.6}
.csx h1,.csx h2,.csx h3,.csx h4{font-family:var(--hd);font-weight:600;line-height:1.05;margin:0;letter-spacing:-.02em}
.csx a{color:var(--amber);text-decoration:none}
.csx a:hover{color:var(--amber-2)}
.csx p{margin:0}

.cs-wrap{max-width:1300px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}

.cs-pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:14px 26px;font-family:var(--hd);font-weight:600;font-size:15px;cursor:pointer;border:1.5px solid transparent;transition:transform .15s,background .15s,box-shadow .15s;white-space:nowrap;text-decoration:none}
.cs-primary{background:var(--amber);color:#000;box-shadow:0 12px 26px rgba(239,122,26,.32)}
.csx a.cs-primary,.csx a.cs-primary:hover,.csx button.cs-primary{color:#000}
.cs-primary:hover{background:#e06a0c;transform:translateY(-2px)}
.cs-outline{background:transparent;color:var(--ink);border-color:rgba(13,27,58,.22)}
.cs-outline:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.cs-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.cs-light:hover{background:#fff;color:var(--ink)}

.cs-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--hd);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.cs-card{background:var(--card);border-radius:22px;box-shadow:0 18px 50px rgba(13,27,58,.07);border:1px solid rgba(13,27,58,.05)}
.cs-soft{border-radius:26px;box-shadow:0 26px 60px rgba(13,27,58,.14)}
.cs-feat{transition:transform .18s,box-shadow .18s}
.cs-feat:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(13,27,58,.13)}
.cs-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px}

.cs-input{width:100%;font-family:var(--bd);font-size:15px;color:var(--ink);background:#fff;border:1.5px solid rgba(13,27,58,.16);border-radius:13px;padding:13px 15px;outline:none;transition:border-color .15s}
.cs-input:focus{border-color:var(--amber)}
.cs-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--bd);font-weight:500;font-size:14px;color:var(--ink);background:#fff;border:1.5px solid rgba(13,27,58,.14);border-radius:999px;padding:9px 16px;cursor:pointer;transition:all .15s;text-decoration:none}
.cs-chip:hover{border-color:var(--amber);color:var(--amber-2)}
.cs-seg{display:inline-flex;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:5px;gap:4px;flex-wrap:wrap}
.cs-seg-opt{font-family:var(--hd);font-weight:600;font-size:14px;padding:9px 18px;border-radius:999px;cursor:pointer;color:var(--muted);transition:all .15s;border:none;background:transparent;text-decoration:none}
.cs-seg-opt.on{background:var(--ink);color:#fff}
.cs-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--hd);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.cs-check{width:16px;height:16px;accent-color:var(--amber)}

@keyframes cs-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.cs-track{display:flex;gap:0;width:max-content;animation:cs-marq 32s linear infinite}
.cs-proj img{transition:transform .5s ease}
.cs-proj:hover img{transform:scale(1.06)}
.cs-proj .cs-arrow{transition:transform .25s,background .25s}
.cs-proj:hover .cs-arrow{transform:translate(2px,-2px);background:var(--amber);color:#fff}

.cs-nav-links{display:flex;align-items:center;gap:24px;font-family:var(--hd);font-weight:500;font-size:15.5px;flex-wrap:wrap;justify-content:flex-end}
.cs-nav-links a{color:var(--ink)}

/* Reveal-on-scroll (progressive; no JS = visible) */
.cs-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.cs-reveal.cs-in{opacity:1;transform:none}

/* Responsive helpers */
@media(max-width:900px){
  .cs-hide-sm{display:none !important}
  .cs-grid-collapse{grid-template-columns:1fr !important}
}