/* ============================================================
   FOODSTOCKS — BASE / RESET / TYPOGRAFI / KOMPONEN DASAR
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--fs-font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--fs-ink);
  background:var(--fs-white);
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--fs-red);text-decoration:none}
a:hover{color:var(--fs-red-dark)}

h1,h2,h3,h4,h5,h6{font-family:var(--fs-font-display);font-weight:600;line-height:1.15;margin:0 0 .5em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{margin:0 0 1em}

/* Layout */
.fs-container{max-width:var(--fs-container);margin-inline:auto;padding-inline:var(--fs-gutter)}
.fs-section{padding-block:var(--fs-s7)}
.fs-section--cream{background:var(--fs-cream)}

/* Buttons */
.fs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fs-font-display);font-weight:600;font-size:1rem;
  padding:12px 24px;border-radius:var(--fs-radius-pill);
  border:2px solid transparent;cursor:pointer;transition:.18s ease;text-align:center;
}
.fs-btn--primary{background:var(--fs-red);color:#fff}
.fs-btn--primary:hover{background:var(--fs-red-dark);color:#fff;box-shadow:var(--fs-shadow-lift)}
.fs-btn--ghost{background:transparent;color:var(--fs-red);border-color:var(--fs-red)}
.fs-btn--ghost:hover{background:var(--fs-red);color:#fff}
.fs-btn--yellow{background:var(--fs-yellow);color:var(--fs-ink)}
.fs-btn--yellow:hover{filter:brightness(.95)}

/* Badge & chip */
.fs-badge{display:inline-block;font-family:var(--fs-font-display);font-weight:600;font-size:.72rem;
  padding:3px 10px;border-radius:var(--fs-radius-pill)}
.fs-badge--sale{background:var(--fs-red);color:#fff}
.fs-badge--hot{background:var(--fs-orange);color:#fff}
.fs-chip-reseller{display:inline-block;background:var(--fs-peach);color:var(--fs-maroon);
  font-weight:600;font-size:.78rem;padding:3px 10px;border-radius:var(--fs-radius-sm)}

/* Announcement bar */
.fs-announcement{background:var(--fs-red);color:#fff;text-align:center;font-size:.85rem;
  padding:8px 16px;font-weight:500}

/* Skip link (a11y) */
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:999}

/* Visually hidden */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}