.elementor-kit-244{--e-global-color-primary:#FF4015;--e-global-color-secondary:#E9E7E1;--e-global-color-text:#8C8C8F;--e-global-color-accent:#141416;--e-global-color-c-concrete-800:#1F1F22;--e-global-color-c-concrete-600:#3A3A3E;--e-global-color-c-legends:#FF4015;--e-global-color-c-passion:#FF2D6F;--e-global-color-c-pop:#2E7BFF;--e-global-color-c-playground:#19C37D;--e-global-color-c-colors:#A855F7;--e-global-color-c-le-lignon:#FFD400;--e-global-color-c-logo-red:#E20613;--e-global-typography-primary-font-family:"Anton";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Space Grotesk";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Space Grotesk";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Space Mono";--e-global-typography-accent-font-weight:400;--e-global-typography-t-mono-bold-font-family:"Space Mono";--e-global-typography-t-mono-bold-font-weight:700;--e-global-typography-t-sans-bold-font-family:"Space Grotesk";--e-global-typography-t-sans-bold-font-weight:700;background-repeat:no-repeat;}.elementor-kit-244 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   STREET CORE 219 — Design system CSS (Elementor / Hello Elementor build)
   Pure CSS, no Tailwind. Paste this file's contents into:
   Elementor → Site Settings → Custom Code → Custom CSS (recommended), or
   Elementor → Custom Fonts/Custom CSS global sheet if using Custom Code plugin.
   Every rule below is a verbatim or 1:1 port of a rule that existed in
   assets/src/tailwind-entry.css in the wp-theme-streetcore219 child theme.
   Source line references are in docs/TRACEABILITY.md.
   ========================================================================== */

/* ── Design tokens (also registered as Elementor Global Colors/Fonts in
   site-settings.json — kept here too because the effect classes below
   reference them as CSS custom properties, which Elementor's color picker
   does not emit on its own) ────────────────────────────────────────────── */
:root {
  --color-concrete-900: #141416;
  --color-concrete-800: #1f1f22;
  --color-concrete-600: #3a3a3e;
  --color-concrete-400: #8c8c8f;
  --color-paper: #e9e7e1;

  --color-accent: #ff4015;

  --color-legends: #ff4015;
  --color-passion: #ff2d6f;
  --color-pop: #2e7bff;
  --color-playground: #19c37d;
  --color-colors: #a855f7;
  --color-le-lignon: #ffd400;

  --font-display: "Anton", "Impact", sans-serif;
  --font-sans: "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
}

/* ── Base reset & globals ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0;
}

html {
  background-color: var(--color-concrete-900);
  color: var(--color-paper);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
  overscroll-behavior: none;
  background-color: var(--color-concrete-900);
  color: var(--color-paper);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-paper);
}

/* ── Collection accent injection ─────────────────────────────────────── */
/* Apply the "CSS Classes" advanced field on the section/container, e.g.
   data-collection="legends" -- see js/animations.js for how this is set
   via the Attributes control instead of a class, matching the original
   [data-collection] .elementor-kit-244 exactly. */
[data-collection="legends"]    { --collection-accent: #ff4015; }
[data-collection="passion"]    { --collection-accent: #ff2d6f; }
[data-collection="pop"]        { --collection-accent: #2e7bff; }
[data-collection="playground"] { --collection-accent: #19c37d; }
[data-collection="colors"]     { --collection-accent: #a855f7; }
[data-collection="le-lignon"]  { --collection-accent: #ffd400; }

/* ── Filets (hairlines) ───────────────────────────────────────────────
   Add as a "CSS Class" on any Elementor Container/widget's Advanced tab. */
.hairline   { border: 1px solid var(--color-concrete-600); }
.hairline-t { border-top: 1px solid var(--color-concrete-600); }
.hairline-b { border-bottom: 1px solid var(--color-concrete-600); }
.hairline-l { border-left: 1px solid var(--color-concrete-600); }
.hairline-r { border-right: 1px solid var(--color-concrete-600); }

/* ── Grain / concrete texture ─────────────────────────────────────────── */
.grain {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

.scanlines {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(233, 231, 225, 0.05) 0px,
    rgba(233, 231, 225, 0.05) 1px,
    transparent 1px,
    transparent 3px
  );
}

.halftone {
  background-image: radial-gradient(circle, rgba(233, 231, 225, 0.12) 1px, transparent 1.2px);
  background-size: 7px 7px;
}

/* ── Neon glow utilities ─────────────────────────────────────────────── */
.glow-border {
  box-shadow:
    0 0 0 1px var(--glow, var(--color-accent)),
    0 0 20px -4px var(--glow, var(--color-accent));
  transition: box-shadow 0.35s ease;
}
.glow-border-hover {
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.glow-border-hover:hover,
.glow-border-hover:focus-within {
  box-shadow:
    0 0 0 1px var(--glow, var(--color-accent)),
    0 0 28px -6px var(--glow, var(--color-accent)),
    0 0 56px -16px var(--glow, var(--color-accent));
}

.glow-text {
  text-shadow:
    0 0 8px color-mix(in srgb, var(--glow, var(--color-accent)) 80%, transparent),
    0 0 26px color-mix(in srgb, var(--glow, var(--color-accent)) 45%, transparent);
}

@keyframes neon-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 6px var(--glow, var(--color-accent)), 0 0 16px var(--glow, var(--color-accent));
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 2px var(--glow, var(--color-accent));
  }
}
.pulse-dot { animation: neon-pulse 1.8s ease-in-out infinite; }

/* ── Glitch text ─────────────────────────────────────────────────────── */
/* Usage: add class "glitch" + an Elementor Attribute data-text|WORD (same
   text as the visible text) on a Heading/Text widget. */
.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: inherit;
  background: transparent;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.glitch::before {
  color: #2e7bff;
  transform: translate(0, 0);
  animation: glitch-slice-1 5s infinite steps(1, end);
  z-index: -1;
}
.glitch::after {
  color: #ff2d6f;
  transform: translate(0, 0);
  animation: glitch-slice-2 5s infinite steps(1, end);
  z-index: -1;
}
@keyframes glitch-slice-1 {
  0%, 92%, 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  93% { clip-path: inset(10% 0 65% 0); transform: translate(-3px, 1px); }
  95% { clip-path: inset(55% 0 10% 0); transform: translate(3px, -1px); }
  97% { clip-path: inset(25% 0 45% 0); transform: translate(-2px, 0); }
}
@keyframes glitch-slice-2 {
  0%, 91%, 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  92% { clip-path: inset(60% 0 5% 0); transform: translate(3px, 0); }
  94% { clip-path: inset(5% 0 70% 0); transform: translate(-3px, 1px); }
  96% { clip-path: inset(35% 0 30% 0); transform: translate(2px, -1px); }
}

/* ── HUD corner brackets ───────────────────────────────────────────────
   Apply class "hud-corners" on product-card containers. */
.hud-corners { position: relative; }
.hud-corners::before,
.hud-corners::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--glow, var(--color-accent));
  opacity: 0;
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
  pointer-events: none;
}
.hud-corners::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.hud-corners::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.hud-corners:hover::before,
.hud-corners:hover::after,
.hud-corners:focus-within::before,
.hud-corners:focus-within::after {
  opacity: 1;
  width: 18px;
  height: 18px;
}

/* ── Neon fill-sweep buttons (outline -> filled on hover) ─────────────── */
.btn-neon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.btn-neon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glow, var(--color-accent));
  transform: translateX(-102%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.btn-neon:hover::before,
.btn-neon:focus-visible::before { transform: translateX(0); }
.btn-neon:hover,
.btn-neon:focus-visible {
  border-color: var(--glow, var(--color-accent)) !important;
  box-shadow: 0 0 24px -6px var(--glow, var(--color-accent));
}

/* ── Filled buttons: glow on hover/focus ───────────────────────────────
   Applied to the WooCommerce .single_add_to_cart_button below too. */
.btn-fill-glow {
  transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}
.btn-fill-glow:hover,
.btn-fill-glow:focus-visible {
  box-shadow: 0 0 28px -4px var(--glow, var(--color-accent));
  filter: brightness(1.08);
}

/* ── Scroll cue chevron ─────────────────────────────────────────────── */
@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(6px); opacity: 1; }
}
.scroll-chevron { animation: chevron-bounce 1.8s ease-in-out infinite; }

/* ── Hue-cycling text (marquee / accents) ──────────────────────────────
   9s linear infinite loop through the 5 collection accents + back to
   accent-orange, exactly as tailwind-entry.css defined it. */
@keyframes hue-cycle {
  0% { color: #ff4015; }
  20% { color: #ff2d6f; }
  40% { color: #2e7bff; }
  60% { color: #19c37d; }
  80% { color: #a855f7; }
  100% { color: #ff4015; }
}
.text-cycle { animation: hue-cycle 9s linear infinite; }

/* ── Legal / generic WYSIWYG content ────────────────────────────────────
   Applied via CSS Class "prose-legal" on the Text Editor widget/container
   wrapping the_content() output on Privacy/Terms/Refund pages -- those
   pages are NOT part of this kit (real DB content, block editor), only
   this styling is. */
.prose-legal h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-paper);
  font-size: 1.5rem;
  line-height: 1.1;
  margin-top: 2rem;
}
.prose-legal h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-paper);
  font-size: 1.15rem;
  line-height: 1.2;
  margin-top: 1.5rem;
}
.prose-legal a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose-legal ul, .prose-legal ol { padding-left: 1.25rem; }
.prose-legal ul { list-style: disc; }
.prose-legal ol { list-style: decimal; }
.prose-legal strong { color: var(--color-paper); }

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   WooCommerce habillage — the plugin's default markup (product loop,
   single product summary, cart button, breadcrumbs, stock text) restyled
   in the same brutalist/concrete/mono visual language. There was no
   WooCommerce in the source theme to port this from 1:1 (it had none —
   see docs/MIGRATION-PROCEDURE.md); these rules are written fresh to
   match the ported design tokens/effect classes above, not extracted
   from a prior source file. Flagged as NEW, not ported.
   ========================================================================== */

.woocommerce, .woocommerce-page {
  color: var(--color-paper);
  font-family: var(--font-sans);
}

/* Shop / archive product grid */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--color-concrete-600);
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products li.product {
  background: var(--color-concrete-900);
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
}
.woocommerce ul.products li.product a { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product img {
  border-radius: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.05); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-paper);
  padding: 1rem 1rem 0;
}
.woocommerce ul.products li.product .price {
  font-family: var(--font-mono);
  color: var(--color-accent);
  padding: 0.25rem 1rem 1rem;
  display: block;
}
.woocommerce ul.products li.product .price del { color: var(--color-concrete-400); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button {
  display: none; /* view/pre-order action stays on the single product page only, matching the original ProductCard.tsx which never showed Add to Cart in the grid */
}

/* Single product */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 1024px) {
  .woocommerce div.product { grid-template-columns: 1fr; }
}
.woocommerce div.product .woocommerce-product-gallery { border-right: 1px solid var(--color-concrete-600); }
.woocommerce div.product .woocommerce-product-gallery__image { background: var(--color-concrete-800); aspect-ratio: 1/1; }
.woocommerce div.product .woocommerce-product-gallery img { object-fit: cover; }
.woocommerce div.product .summary {
  padding: 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.woocommerce div.product .summary .product_title {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--color-paper);
  line-height: 1.1;
  font-size: clamp(1.8rem, 3vw, 3rem);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--color-accent);
}
.woocommerce div.product .sku_wrapper,
.woocommerce div.product .posted_in,
.woocommerce div.product .product_meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-concrete-400);
}

/* Pre-order / backorder stock text (this catalogue is 100% pre-order --
   see docs/MIGRATION-PROCEDURE.md on Stock 0 / Backorders: notify) */
.woocommerce div.product p.stock,
.woocommerce .stock {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Add to cart / pre-order button */
.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--color-accent);
  color: var(--color-concrete-900);
  border: 1px solid var(--color-accent);
  padding: 1rem 1.5rem;
  border-radius: 0;
  --glow: var(--color-accent);
}
.woocommerce div.product form.cart .button:hover { filter: brightness(1.08); box-shadow: 0 0 28px -4px var(--color-accent); }

/* Breadcrumb */
.woocommerce-breadcrumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-concrete-400);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-concrete-600);
}
.woocommerce-breadcrumb a { color: var(--color-concrete-400); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--color-paper); }

/* Notices (kept legible against the dark background; WooCommerce's
   default notices are white-on-white outside a themed context) */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--color-concrete-800);
  color: var(--color-paper);
  border-top-color: var(--color-accent);
}/* End custom CSS */