[x-cloak] { display: none !important; }

/* Search field doesn't grow past the header on small viewports */
input[type="search"] { max-width: 16rem; }

/* Style Django-rendered auth forms (login/register/password reset) */
.authform input {
  width: 100%;
  border: 1px solid #d4d4d4;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
}
.authform input:focus { outline: 2px solid #fbbf24; outline-offset: 1px; }
.authform ul { font-size: 0.8rem; color: #6b7280; margin-top: 0.25rem; padding-left: 1rem; list-style: disc; }
.authform .errorlist { color: #b91c1c; list-style: none; padding-left: 0; }

/* --- Rengineered buffalo-plaid -------------------------------------------- */
/* Crisp, scalable red/black buffalo check taken from the "Lumberjacks" (LJ) team
   jersey. Used as the trim band + frame on product cards. Two crossing black bands
   over a red base give the classic 3-tone check: red square, maroon transition,
   near-black square — sharp at any size, no image needed. */
.rg-plaid {
  --rg-sq: 7px;
  --rg-red: #b21e23;
  background-color: var(--rg-red);
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.55) 0, rgba(0, 0, 0, 0.55) var(--rg-sq),
      transparent var(--rg-sq), transparent calc(var(--rg-sq) * 2)),
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.55) 0, rgba(0, 0, 0, 0.55) var(--rg-sq),
      transparent var(--rg-sq), transparent calc(var(--rg-sq) * 2));
}
/* Coarser weave for larger surfaces (section headers, hero strips). */
.rg-plaid-lg { --rg-sq: 12px; }

/* Panel background for the big dark surfaces (header, hero, newsletter, footer).
   Option 5's "jumbo + micro buffalo" STRUCTURE recoloured to Option 4's palette: a near-black
   charcoal field with a bold VIVID CRIMSON buffalo check, fine crimson micro-weave for depth,
   and glowing centre-line hairlines so the red feels lit. The dark field keeps white headings,
   light-grey subtext and amber buttons crisply legible. */
.rg-plaid-dark {
  background-color: #0c0a0a;
  background-image:
    /* legibility veil — heavier top/bottom for headings + footer text */
    linear-gradient(180deg, rgba(6, 5, 5, 0.45) 0%, rgba(6, 5, 5, 0.12) 45%, rgba(6, 5, 5, 0.45) 100%),
    /* glow hairlines down the centre of each crimson band — lit-filament sheen */
    repeating-linear-gradient(90deg, rgba(255, 110, 120, 0) 26px, rgba(255, 110, 120, 0.40) 28px, rgba(255, 110, 120, 0) 30px, rgba(255, 110, 120, 0) 112px),
    repeating-linear-gradient(0deg, rgba(255, 110, 120, 0) 26px, rgba(255, 110, 120, 0.40) 28px, rgba(255, 110, 120, 0) 30px, rgba(255, 110, 120, 0) 112px),
    /* micro crimson weave — fine inner texture (depth from Option 5) */
    repeating-linear-gradient(90deg, rgba(245, 22, 38, 0.18) 0px, rgba(245, 22, 38, 0.18) 6px, rgba(245, 22, 38, 0) 6px, rgba(245, 22, 38, 0) 14px),
    repeating-linear-gradient(0deg, rgba(245, 22, 38, 0.18) 0px, rgba(245, 22, 38, 0.18) 6px, rgba(245, 22, 38, 0) 6px, rgba(245, 22, 38, 0) 14px),
    /* jumbo crimson buffalo check — bold structure over the dark field */
    repeating-linear-gradient(90deg, rgba(245, 22, 38, 0.55) 0px, rgba(245, 22, 38, 0.55) 56px, rgba(245, 22, 38, 0) 56px, rgba(245, 22, 38, 0) 112px),
    repeating-linear-gradient(0deg, rgba(245, 22, 38, 0.55) 0px, rgba(245, 22, 38, 0.55) 56px, rgba(245, 22, 38, 0) 56px, rgba(245, 22, 38, 0) 112px);
  background-size: 100% 100%, 112px 112px, 112px 112px, 14px 14px, 14px 14px, 112px 112px, 112px 112px;
  background-repeat: repeat;
}

/* Text sitting ON the busy .rg-plaid-dark check gets lost where the bright crimson
   squares fall behind the words. .rg-ink-shadow keeps the text directly on the
   plaid (no card/panel) and instead wraps each glyph in a crisp edge + a soft dark
   halo — a tiny localized scrim that darkens the pattern right around the letters
   so body copy and fine print stay legible. Apply it to a text container; the
   shadow inherits to all the text inside. */
.rg-ink-shadow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.5); }