* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The document itself is the scroll container on every breakpoint, so the
   browser shows its normal page scrollbar instead of an inner one. */
body {
  font-family: 'Kalameh';
}

.required {
  color: #dc2626;
}

a,
button,
input,
select,
textarea,
label,
[role='button'] {
  touch-action: manipulation;
}

/* Space between the header and the start of a page's content. Pages that open
   with an edge-to-edge block (the home page banner) sit flush instead. */
:root {
  --page-top-gap: 48px;
}

.page-content {
  padding-top: var(--page-top-gap);
}

.page-content--flush {
  padding-top: 0;
}

@media (max-width: 991.98px) {
  :root {
    --page-top-gap: 32px;
  }
}

/* ==========================================================================
   Page container

   One set of side gutters for everything between the header and the footer, so
   every page lines up. Sections that should run edge to edge — the home banner
   and the category slider — simply sit outside it.
   ========================================================================== */

@media (min-width: 992px) {
  .page-container {
    max-width: 1400px;
    margin-inline: auto;
  }

  /* The dashboard keeps the narrower measure: its panel is mostly text and
     form rows, which get hard to scan once the lines run too long. */
  .container-dashboard {
    max-width: 1200px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   Drag to scroll

   Any strip carrying data-drag-scroll can be pulled sideways with the mouse.
   The script adds .is-draggable only while there is somewhere to scroll to, so
   a strip whose content already fits keeps the ordinary cursor.
   ========================================================================== */

[data-drag-scroll].is-draggable {
  cursor: grab;
}

[data-drag-scroll].is-draggable:active {
  cursor: grabbing;
}

/* While a drag is in flight the browser's own smooth scrolling would lag
   behind the pointer, so it stands down until the gesture has settled. */
[data-drag-scroll].is-drag-scrolling {
  scroll-behavior: auto;
  user-select: none;
}