/* ============================================================================
   RaptorLabs replica — DESIGN TOKENS
   Source of truth: spec/DESIGN-TOKENS.md §4.7 (measured from the source's
   compiled :root block + live computed styles on /store and /products/*).
   LIGHT MODE ONLY — no .dark block exists at source (§4.1b). Do not add one.
   --accent (#33FF0A) is DECLARED BUT NEVER PAINTED (§4.1a, accentCount: 0).
   Carried for parity only. Never paint with it.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts ---
   All five families are SELF-HOSTED in assets/fonts/. There is NO runtime
   dependency on fonts.googleapis.com and NO Typekit (§4.2 — the Typekit
   string in the source bundle is Next.js boilerplate, a false positive).
   There is NO monospace family: figures use font-variant-numeric:tabular-nums
   on top of Prompt or Space Grotesk.
   --------------------------------------------------------------------- */
@font-face{font-family:"Prompt";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/prompt-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Prompt";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/prompt-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Prompt";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/prompt-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Prompt";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/prompt-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Prompt";font-style:normal;font-weight:900;font-display:swap;
  src:url("../fonts/prompt-latin-900-normal.woff2") format("woff2")}

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2")}

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/inter-latin-700-normal.woff2") format("woff2")}

/* Archivo Black + Rubik came from a Google Fonts @import at source (§4.2).
   Self-hosted here so the theme has no third-party font dependency.
   Rubik ships as a single variable file covering the 300-900 axis. */
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/archivo-black-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:300 900;font-display:swap;
  src:url("../fonts/rubik-latin-variable-normal.woff2") format("woff2")}

/* ---------------------------------------------------------------- :root --- */
:root {
  color-scheme: light;

  /* ---- core palette (shadcn HSL triplets) ---- */
  --background:             0 0% 100%;     /* #FFFFFF */
  --foreground:             0 0% 0%;       /* #000000 */
  --card:                   0 0% 100%;
  --card-foreground:       24 10% 14%;     /* #272320 */
  --popover:                0 0% 100%;
  --popover-foreground:    24 10% 14%;
  --primary:                0 0% 0%;       /* #000000 — buttons, footer bg */
  --primary-foreground:   255 100% 100%;   /* #FFFFFF — header bg, CTA text */
  --secondary:             30 5% 96%;      /* #F5F5F4 */
  --secondary-foreground:  24 10% 14%;
  --muted:                 30 5% 96%;
  --muted-foreground:      24 4% 46%;      /* #7A7471 */
  --accent:               110 100% 52%;    /* #33FF0A — NEVER PAINTED */
  --accent-foreground:      0 0% 0%;
  --destructive:            0 84% 60%;     /* #EF4343 */
  --destructive-foreground: 0 0% 100%;
  --border:                30 6% 90%;      /* #E7E6E4 */
  --input:                 30 6% 90%;
  --ring:                 110 100% 52%;    /* focus ring only */

  /* ---- surfaces (RGB triplets — call as rgb(var(--surface-container))) ---- */
  --surface:                  249 249 249; /* #F9F9F9 */
  --surface-dim:              218 218 218; /* #DADADA */
  --surface-container:        246 246 247; /* #F6F6F7 — product-card bg */
  --surface-container-low:    241 241 242; /* #F1F1F2 */
  --surface-container-lowest: 236 237 239; /* #ECEDEF — secondary CTA bg */

  /* ---- off-token literals that ship in real components ---- */
  --rl-pink-shadow: #FAA0BF;
  --rl-card-ring:   #A1A1AA;
  --rl-gray-300:    #D1D5DB;
  --rl-gray-100:    #F3F4F6;
  --rl-zinc-200:    #E4E4E7;
  --rl-ink-27:      #1B1B1B;

  /* ---- radius ---- */
  --radius:      12px;
  --radius-none: 0;
  --radius-sm:   calc(var(--radius) - 4px);
  --radius-md:   calc(var(--radius) - 2px);
  --radius-lg:   var(--radius);
  --radius-full: 9999px;

  /* ---- fonts ---- */
  --font-display: "Archivo Black", sans-serif;   /* buttons, h2/h3 */
  --font-body:    "Rubik", "Inter", sans-serif;  /* body element default */
  --font-heading: "Prompt", sans-serif;          /* h1, product titles/prices */
  --font-ui:      "Space Grotesk", sans-serif;   /* labels, chips, nav, p */
  --font-alt:     "Inter", sans-serif;           /* Typography productname/label */

  /* ---- neo-brutalist shadows (hard offsets: 0 blur, 0 spread) ---- */
  --shadow-hard-2:       2px 2px 0 0 rgba(0,0,0,1);
  --shadow-hard-2-inv:   2px 2px 0 0 rgba(255,255,255,1);
  --shadow-hard-3:       3px 3px 0 0 rgba(0,0,0,1);
  --shadow-hard-4:       4px 4px 0 0 rgba(0,0,0,1);
  --shadow-hard-4-inv:   4px 4px 0 0 rgba(255,255,255,1);
  --shadow-hard-4-pink:  4px 4px 0 0 #FAA0BF;
  --shadow-hard-6:       6px 6px 0 0 rgba(0,0,0,1);
  --shadow-hard-6-soft:  6px 6px 0 0 rgba(0,0,0,0.08);
  --shadow-hard-8:       8px 8px 0 0 rgba(0,0,0,1);
  --shadow-hard-12-gray:12px 12px 0 0 rgba(200,200,200,1);
  --shadow-focus-underline: inset 0 -2px 0 0 hsl(var(--primary));

  /* ---- legacy soft shadows declared at source, largely superseded ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 0 0 1px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.05), 0 12px 24px -12px rgba(0,0,0,0.05);
  --shadow-hover: 0 0 50px rgba(0,0,0,0.08);
  --shadow-card: 0 0 5px rgba(145,158,171,0.2), 0 29.67px 60px rgba(145,158,171,0.12);

  /* ---- tracking (measured: 0.18em == 2.52px @14px; 0.1em == 1.4px @14px) ---- */
  --tracking-tighter: -0.05em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;
  --tracking-chip:     0.18em;
  --tracking-pill:     0.2em;
  --tracking-title:    0.01em;

  /* ---- borders ---- */
  --border-width:       2px;
  --border-width-heavy: 4px;

  /* ---- layout ---- */
  --container-max: 1600px;
  --container-pad: 1.5rem;
  --content-max:   1440px;
  --container-cap: 1400px;
  --prose-max:       48rem;
  --header-h:         64px;
  --section-y:         4rem;
  --section-y-lg:      6rem;

  /* ---- breakpoints (stock Tailwind; reference only) ---- */
  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}

/* ============================ RESET / BASE ============================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px dashed hsl(var(--ring));outline-offset:2px}

/* ========================= LAYOUT PRIMITIVES ============================ */
.rl-shell{margin-inline:auto;width:100%;max-width:var(--container-max);
  padding-inline:1.5rem}
@media (min-width:768px){.rl-shell{padding-inline:2rem}}
.rl-content{margin-inline:auto;width:100%;max-width:var(--content-max);
  padding-inline:1.5rem}
.rl-prose{margin-inline:auto;width:100%;max-width:var(--prose-max)}
.rl-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================ TYPE ROLES ================================
   Straight from the Typography variant map (chunk 795…, module 46650).
   All 14 entries are reproduced below as real CSS classes.
   ====================================================================== */
h1,.rl-h1{font-family:var(--font-heading);font-weight:900;text-transform:uppercase;
  letter-spacing:var(--tracking-title);font-size:2.25rem;line-height:1;margin:0;
  color:hsl(var(--foreground))}
@media (min-width:1024px){h1,.rl-h1{font-size:3rem}}       /* measured 48px */
h2,.rl-h2{font-family:var(--font-display);font-weight:700;font-size:1.5rem;margin:0;
  color:hsl(var(--foreground))}
@media (min-width:768px){h2,.rl-h2{font-size:1.875rem}}    /* measured 30px */
h3,.rl-h3{font-family:var(--font-display);font-weight:600;font-size:1.25rem;margin:0;
  color:hsl(var(--foreground))}
@media (min-width:768px){h3,.rl-h3{font-size:1.5rem}}
h4,.rl-h4{font-family:var(--font-ui);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tracking-wider);font-size:.875rem;white-space:nowrap;margin:0;
  color:hsl(var(--foreground))}
@media (min-width:640px){h4,.rl-h4{font-size:1rem}}        /* measured 16px, ls .8px */
h5,h6{margin:0}
p{margin:0}

.rl-p{font-family:var(--font-ui);text-transform:uppercase;font-size:1rem;
  line-height:1.5rem;color:hsl(var(--foreground))}
@media (min-width:640px){.rl-p{font-size:1.125rem}}        /* measured 18px / lh 28px */
.rl-p-small{font-family:var(--font-ui);font-size:.875rem;line-height:1.25rem}
.rl-p-custom{font-family:var(--font-ui);text-transform:uppercase;font-size:1.125rem;
  line-height:1.5rem;font-weight:900}
.rl-label{font-family:var(--font-alt);font-size:.875rem;font-weight:500}
.rl-nav-type{font-family:var(--font-ui);font-weight:700;font-style:normal;
  text-decoration:none;text-transform:uppercase;letter-spacing:var(--tracking-wider);
  font-size:.875rem;white-space:nowrap}
.rl-productname{font-family:var(--font-alt);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-wider);font-size:1rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:768px){.rl-productname{font-size:1.25rem}}
.rl-price{font-family:var(--font-heading);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tracking-wider);font-size:1rem;white-space:nowrap}
@media (min-width:768px){.rl-price{font-size:1.25rem}}
.rl-entry-id{font-family:var(--font-ui);font-size:.75rem;text-transform:uppercase;
  letter-spacing:var(--tracking-widest);color:hsl(var(--primary));transition:color .2s}
.rl-product-title{margin-top:.25rem;min-width:0;max-width:100%;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--font-heading);font-weight:900;text-transform:uppercase;
  letter-spacing:var(--tracking-title);font-size:1.5rem;line-height:1.1;
  color:hsl(var(--foreground));transition:color .2s}
@media (min-width:640px){.rl-product-title{font-size:1.875rem}}
@media (min-width:1024px){.rl-product-title{font-size:2.25rem}}
.rl-product-price{font-family:var(--font-heading);font-weight:900;font-size:1.5rem;
  color:hsl(var(--foreground));transition:color .2s}
@media (min-width:640px){.rl-product-price{font-size:1.875rem}}
.rl-num{font-variant-numeric:tabular-nums}
.rl-normal-case{text-transform:none}   /* FAQ answers cancel the p variant's uppercase */

/* ---- eyebrow used by the homepage section headers ---- */
.rl-eyebrow{font-family:var(--font-ui);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tracking-widest);
  color:hsl(var(--muted-foreground))}

/* ======================= BUTTON — the full cva ==========================
   Verbatim from chunk 795-0111df2abfb7d8b7.js module 30285.
   8 variants x 5 sizes. Base is `rounded-full`; commerce call sites pass
   `rounded-none`, hence .rl-btn--square. Both ship (§4.4).
   PRESS EFFECT, FORM A: shadow APPEARS on hover, is REMOVED on :active
   while the element translates 4px into where the shadow was.
   ====================================================================== */
.rl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;border-radius:var(--radius-full);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-widest);
  transition:all .2s;cursor:pointer;text-decoration:none;
  border:2px solid transparent;
}
.rl-btn:focus-visible{outline:2px dashed hsl(var(--ring));outline-offset:2px}
.rl-btn:disabled,.rl-btn[disabled],.rl-btn[aria-disabled="true"]{
  pointer-events:none;opacity:.5}
.rl-btn svg{pointer-events:none;width:1rem;height:1rem;flex-shrink:0}

/* --- sizes --- */
.rl-btn--default{font-size:.875rem;padding:.75rem 1.5rem}     /* text-sm px-6 py-3 */
.rl-btn--sm{font-size:.75rem;padding:.625rem 1rem}            /* text-xs px-4 py-2.5 */
.rl-btn--xs{font-size:.75rem;padding:.25rem .75rem}           /* text-xs py-1 px-3 */
.rl-btn--lg{font-size:1rem;padding:1rem 2rem}                 /* text-base px-8 py-4 */
.rl-btn--icon{height:2.5rem;width:2.5rem;padding:0}           /* h-10 w-10 */

/* --- variant: default --- */
.rl-btn--primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  border-color:transparent}
.rl-btn--primary:hover{color:hsl(var(--primary));background:hsl(var(--primary-foreground));
  border-color:hsl(var(--foreground));box-shadow:var(--shadow-hard-4)}
.rl-btn--primary:active{box-shadow:none;transform:translate(4px,4px)}

/* --- variant: tertiary (white on dark) --- */
.rl-btn--tertiary{background:hsl(var(--primary-foreground));color:hsl(var(--primary));
  border-color:transparent}
.rl-btn--tertiary:hover{color:hsl(var(--primary-foreground));background:hsl(var(--primary));
  border-color:hsl(var(--primary-foreground));box-shadow:var(--shadow-hard-4-inv)}
.rl-btn--tertiary:active{box-shadow:none;transform:translate(4px,4px)}

/* --- variant: destructive --- */
.rl-btn--destructive{background:hsl(var(--destructive));
  color:hsl(var(--destructive-foreground));border-color:transparent}
.rl-btn--destructive:hover{background:hsl(var(--destructive)/.9)}

/* --- variant: outline --- */
.rl-btn--outline{background:transparent;color:hsl(var(--primary));
  border-color:hsl(var(--primary))}
.rl-btn--outline:hover{color:hsl(var(--primary));background:hsl(var(--primary-foreground));
  border-color:hsl(var(--foreground));box-shadow:var(--shadow-hard-4)}
.rl-btn--outline:active{box-shadow:none;transform:translate(4px,4px)}

/* --- variant: secondary --- */
.rl-btn--secondary{background:hsl(var(--secondary));
  color:hsl(var(--secondary-foreground));border-color:transparent}
.rl-btn--secondary:hover{background:hsl(var(--secondary)/.8)}

/* --- variant: ghost --- the ONLY --accent consumer at source, and it is
   unused in the source DOM. Reproduced for parity; nothing here calls it. */
.rl-btn--ghost{background:transparent;border-color:transparent}
.rl-btn--ghost:hover{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}

/* --- variant: link --- */
.rl-btn--link{background:transparent;border-color:transparent;
  color:hsl(var(--primary));text-underline-offset:4px}
.rl-btn--link:hover{text-decoration:underline}

/* --- variant: pill (the "VIEW LABS TEST" secondary CTA) --- */
.rl-btn--pill{font-family:var(--font-ui);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tracking-pill);
  color:hsl(var(--primary));background:rgb(var(--surface-container-lowest));
  padding:.25rem .75rem;border-radius:0;border:2px solid var(--rl-zinc-200)}
.rl-btn--pill:hover{color:hsl(var(--primary));background:rgb(var(--surface-dim));
  border-color:hsl(var(--foreground));box-shadow:var(--shadow-hard-4)}
.rl-btn--pill:active{box-shadow:none;transform:translate(4px,4px)}

/* --- shape modifiers: chrome pills are round, commerce CTAs are square --- */
.rl-btn--square{border-radius:0}
.rl-btn--round{border-radius:var(--radius-full)}
.rl-btn--block{width:100%}

/* ====================== PRESS / LIFT PRIMITIVES ========================= */
/* form A — buttons, chips, badges: shadow on hover, slide-into-shadow on PRESS */
.rl-press{border:2px solid hsl(var(--primary));background:hsl(var(--primary-foreground));
  box-shadow:var(--shadow-hard-4);transition:all .2s}
.rl-press:active{box-shadow:none;transform:translate(4px,4px)}
/* form B — cards: 8px lift on hover */
.rl-lift{box-shadow:none;transition:all .2s}
.rl-lift:hover{box-shadow:var(--shadow-hard-8)}
/* form B' — the 12px card press, used twice on the homepage */
.rl-lift-12{box-shadow:var(--shadow-hard-12-gray);transition:all .2s}
.rl-lift-12:hover,.rl-lift-12:active{transform:translate(12px,12px);box-shadow:none}

/* ============================== CHIP ==================================== */
.rl-chip{display:inline-flex;align-items:center;gap:.5rem;max-width:100%;
  font-family:var(--font-ui);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-chip);font-size:.875rem;
  padding:.375rem .625rem;border:2px solid hsl(var(--border));border-radius:0;
  background:hsl(var(--primary-foreground));color:hsl(var(--foreground))}
.rl-chip--sm{font-size:.6875rem;padding:.25rem .5rem}
/* Out-of-stock chip, measured. Hard rule 10 means this theme never renders it
   for our own catalogue, but the class ships so the design system is complete. */
.rl-chip--oos{border-color:hsl(var(--destructive));box-shadow:var(--shadow-hard-4-pink)}

/* ============================== BADGE =================================== */
.rl-badge{display:inline-flex;align-items:center;gap:.375rem;
  font-family:var(--font-ui);font-size:.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tracking-chip);
  padding:.25rem .5rem;border:2px solid hsl(var(--foreground));border-radius:0;
  background:hsl(var(--primary-foreground));color:hsl(var(--foreground))}
.rl-badge--invert{background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  border-color:hsl(var(--primary))}

/* ============================== CARD ==================================== */
/* The store product card is a RING, not a border (measured §4.4). */
.rl-card{position:relative;isolation:isolate;z-index:0;display:flex;
  flex-direction:column;height:100%;min-width:0;padding:1.5rem;
  background:rgb(var(--surface-container));
  box-shadow:0 0 0 2px hsl(var(--primary-foreground)),0 0 0 4px var(--rl-card-ring);
  transition:box-shadow .2s,background-color .2s}
@media (min-width:768px){.rl-card{padding:2rem}}
.rl-card:hover{z-index:10;background:#fff;
  box-shadow:0 0 0 2px hsl(var(--primary)),0 0 0 4px hsl(var(--primary))}

/* ========================== SUPPORT FAB ================================= */
.rl-support-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;
  display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;
  border:2px solid hsl(var(--foreground));
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  box-shadow:var(--shadow-hard-4);transition:transform .2s;cursor:pointer}
.rl-support-fab:hover{transform:translateY(-3px)}