/* ============================================================================
   NOGI RULES BJJ — Theme stylesheet
   Brutalist, editorial, dojo-inspired.
   Display: Bebas Neue (condensed industrial) — loaded via Google Fonts.
   Body:    Inter (clean sans).
   Mono:    JetBrains Mono (data/labels).
   ============================================================================ */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/material/MaterialIcons-Regular.woff2') format('woff2');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

:root {
  /* Brand — NOGI Rules BJJ palette + Tatami Fightwear light surfaces */
  --nogi-white:    #FFFFFF;
  --nogi-offwhite: #F2F5F7;
  --nogi-bone:     #E8E2D5;
  --nogi-black:    #1F2432;
  --nogi-ink:      #131313;
  --nogi-gray-900: #1A1A1A;
  --nogi-gray-700: #4A4A4A;
  --nogi-gray-500: #8A8A8A;
  --nogi-gray-400: #A1AEB7;
  --nogi-gray-300: #C7C7C7;
  /* BJJ red — deep vermilion, like a stained gi belt */
  --nogi-red:      #B5121B;
  --nogi-red-dark: #8A0D14;
  --nogi-red-deep: #5C0810;

  /* Surfaces — NOGI signature dark + Tatami/Manto editorial depth.
     Body no longer pure black; cards sit slightly above it for hierarchy. */
  --nogi-bg:        #111111;
  --nogi-bg-alt:    #0A0A0A;
  --nogi-bg-card:   #181818;
  --nogi-bg-card-hover: #1F1F1F;
  --nogi-border:    rgba(255,255,255,0.08);
  --nogi-text:      #FFFFFF;
  --nogi-text-mute: #A1AEB7;

  /* Type — Bebas Neue (display) + Lato (body) + JetBrains Mono (data) */
  --font-display: 'Bebas Neue', 'Anton', Impact, sans-serif;
  --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Spacing */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-6: 48px; --s-8: 64px; --s-10: 96px; --s-12: 128px;

  /* Sizes */
  --container: 1320px;
  --header-h: 72px;

  /* Tatami-inspired radii */
  --radius-none: 0;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html, body {
  background: var(--nogi-bg);
  color: var(--nogi-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide Hummingbird's placeholder logo image */
img.logo, .header-bottom .logo { display: none !important; }
body, .page, .page-content, .page-content--home, .content-wrapper, .center-column {
  background: var(--nogi-bg) !important;
  color: var(--nogi-text);
}
.footer, .footer__before, .footer__main {
  background: var(--nogi-bg-card) !important;
  color: #fff !important;
  border-top: 1px solid var(--nogi-border) !important;
}

/* ====================================================================
   ANNOUNCEMENT BAR
   ==================================================================== */
.nogi-announcement {
  background: var(--nogi-black);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px var(--s-2);
  position: relative;
  text-align: center;
}
.nogi-announcement__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  position: relative;
}
.nogi-announcement__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  cursor: pointer; padding: 0;
}
.nogi-announcement.is-hidden { display: none; }

/* ====================================================================
   HEADER
   ==================================================================== */
.nogi-header {
  background: var(--nogi-bg-alt);
  border-bottom: 1px solid var(--nogi-border);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.40);
}
.nogi-header .header-bottom { padding: 10px 0 !important; }
.nogi-header .header-bottom__container { max-width: var(--container); }
.nogi-header .header-bottom__row { align-items: center !important; }

/* Hide Hummingbird's main menu, search bar, contact info — we use our own */
.header-top,
#_desktop_ps_contactinfo,
#_desktop_ps_searchbar,
#_desktop_ps_customersignin,
#_mobile_ps_customersignin,
#_mobile_ps_searchbar,
#_mobile_ps_shoppingcart,
#_desktop_main_menu,
#search_widget,
#_desktop_search_widget,
#displaySearch,
.ps-mainmenu,
.ps-searchbar,
.ps-customersignin,
.ps-shoppingcart,
.searchCanvas,
#searchCanvas,
.header-nav-full-width,
.header-block { display: none !important; }
.header-bottom { background: transparent !important; padding: 10px 0 !important; }
.header-bottom__container,
.header-bottom__row {
  background: transparent !important;
  max-width: var(--container) !important;
}
.header-bottom__row {
  align-items: center !important;
  justify-content: space-between !important;
  display: flex !important;
  flex-wrap: nowrap !important;
}

.nogi-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--nogi-text);
}
.nogi-logo__img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
@media (max-width: 768px) {
  .nogi-logo__img { width: 72px; height: 72px; }
}
.nogi-logo:hover .nogi-logo__img { transform: scale(1.04); }
.nogi-logo__wordmark {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.05em;
  color: var(--nogi-text);
  text-transform: uppercase;
  line-height: 1;
}
.header-block__icon { color: var(--nogi-text) !important; }
.header-block__badge {
  background: var(--nogi-red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  min-width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
}
.header-top { display: none !important; }

/* ====================================================================
   NOGI NAV (custom horizontal menu)
   ==================================================================== */
.nogi-nav {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
}
.nogi-nav__link {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.10em;
  color: var(--nogi-text);
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color 0.2s;
}
.nogi-nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 0;
  background: var(--nogi-red);
  transition: width 0.25s ease;
}
.nogi-nav__link:hover { color: var(--nogi-red); }
.nogi-nav__link:hover::after { width: 100%; }

/* Header actions */
.nogi-actions { gap: 8px; }
.nogi-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--nogi-text);
  text-decoration: none;
  position: relative;
  transition: color 0.2s, background 0.2s;
  border-radius: 50%;
}
.nogi-action:hover { color: var(--nogi-red); background: rgba(255,255,255,0.04); }
.nogi-action .material-icons { font-size: 24px; }
.nogi-action__badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--nogi-red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  min-width: 17px;
  height: 17px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border-radius: 50%;
  font-weight: 600;
}
.nogi-burger {
  background: transparent;
  border: 1px solid var(--nogi-border);
  color: var(--nogi-text);
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-sm);
}
.nogi-burger .material-icons { color: var(--nogi-text); font-size: 24px; }

/* ====================================================================
   HERO — "EVERY DROP IS A COMEBACK"
   ==================================================================== */
.nogi-hero {
  position: relative;
  background: var(--nogi-bg-alt);
  min-height: 720px;
  max-height: 900px;
  height: calc(100vh - 200px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow: hidden;
  padding: var(--s-8) 0 var(--s-10);
  border-bottom: 1px solid var(--nogi-border);
}
.nogi-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.nogi-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(31,36,50,0.75) 0%, rgba(31,36,50,0.45) 45%, rgba(31,36,50,0.15) 70%, rgba(31,36,50,0.02) 100%);
  pointer-events: none;
}
.nogi-hero__img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

/* Hero rotating slider (CSS-only, no JS). El numero de slides es dinamico:
   home.tpl calcula --hero-cycle y el animation-delay de cada slide, y define
   los keyframes segun cuantas fotos haya en la carpeta del carousel. */
.nogi-hero__slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.nogi-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation-name: nogiHeroFade;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: var(--hero-cycle, 25s);
  /* animation-delay se fija inline por slide (home.tpl) */
}
.nogi-hero__slide .nogi-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Fallback si solo hay una foto (o sin animacion): la mostramos fija */
.nogi-hero__slide.is-active { opacity: 1; }
/* Respect users who prefer less motion: detenemos la animacion */
@media (prefers-reduced-motion: reduce) {
  .nogi-hero__slide { animation: none; }
  .nogi-hero__slide.is-active { opacity: 1; }
}
.nogi-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-3);
  width: 100%;
  align-self: end;
  padding-bottom: var(--s-8);
}
.nogi-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #fff;
  background: var(--nogi-red);
  border: 1px solid var(--nogi-red);
  padding: 6px 14px;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  border-radius: var(--radius-pill);
}
.nogi-hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 0.92;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--s-3);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(31,36,50,0.35);
}
.nogi-hero__title em {
  font-style: normal;
  color: var(--nogi-red);
  display: block;
}
.nogi-hero__claim {
  font-size: clamp(16px, 1.4vw, 19px);
  max-width: 560px;
  color: var(--nogi-text-mute);
  margin-bottom: var(--s-4);
  line-height: 1.55;
}
.nogi-hero__ctas {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* Buttons — Tatami-inspired rounded, clean */
.nogi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
  min-height: 48px;
  border-radius: var(--radius-xl);
}
.nogi-btn--primary {
  background: #fff;
  color: var(--nogi-bg);
}
.nogi-btn--primary:hover {
  background: var(--nogi-red);
  color: #fff;
  transform: translateY(-2px);
}
.nogi-btn--ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(4px);
}
.nogi-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}
.nogi-btn--dark {
  background: var(--nogi-bg-card);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.nogi-btn--dark:hover { background: var(--nogi-red); border-color: var(--nogi-red); color: #fff; }

/* ====================================================================
   DROP SECTION — current drop / drops archive
   ==================================================================== */
.nogi-section {
  padding: var(--s-10) 0;
}
.nogi-section--dark { background: var(--nogi-bg-alt); }
.nogi-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-3);
}
.nogi-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--nogi-red);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.nogi-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
  color: var(--nogi-text);
}
.nogi-h2 em {
  font-style: normal;
  color: var(--nogi-red);
  display: block;
}
.nogi-lede {
  font-size: 18px;
  color: var(--nogi-text-mute);
  max-width: 720px;
  margin-bottom: var(--s-6);
  line-height: 1.6;
}

/* DROP hero block */
.nogi-drop {
  background: var(--nogi-bg-alt);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--nogi-border);
  border-bottom: 1px solid var(--nogi-border);
}
.nogi-drop__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-6);
  align-items: center;
}
.nogi-drop__meta {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.nogi-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--nogi-border);
  color: var(--nogi-text);
  background: rgba(255,255,255,0.02);
}
.nogi-tag--red {
  border-color: var(--nogi-red);
  color: var(--nogi-red);
}
.nogi-drop__image {
  position: relative;
  overflow: hidden;
  background: var(--nogi-bg);
  border: 1px solid var(--nogi-border);
  aspect-ratio: 4/5;
}
.nogi-drop__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05);
}
.nogi-drop__stock {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--nogi-red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  text-transform: uppercase;
}

/* ====================================================================
   PRODUCT GRID
   ==================================================================== */
.nogi-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.nogi-card {
  background: var(--nogi-bg-card);
  border: 1px solid var(--nogi-border);
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s, background 0.25s;
  text-decoration: none;
  color: var(--nogi-text);
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.nogi-card:hover {
  background: var(--nogi-bg-card-hover);
  border-color: var(--nogi-red);
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.45);
}
.nogi-card__media {
  aspect-ratio: 6/7;
  background: var(--nogi-bg);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.nogi-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.nogi-card:hover .nogi-card__media img { transform: scale(1.05); }
.nogi-card__badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--nogi-red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 5px 10px;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.nogi-card__body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
}
.nogi-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nogi-text);
  line-height: 1.1;
}
.nogi-card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--nogi-gray-400);
  text-transform: uppercase;
}
.nogi-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--s-2);
  border-top: 1px solid var(--nogi-border);
}
.nogi-card__price {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--nogi-text);
}
.nogi-card__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nogi-red);
}

/* ====================================================================
   CATEGORIES — Mantoshop-style grid (No-Gi / Gi / Mujer / Apparel)
   ==================================================================== */
.nogi-categories {
  background: var(--nogi-bg);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--nogi-border);
  border-bottom: 1px solid var(--nogi-border);
}
.nogi-categories .nogi-lede {
  margin-bottom: var(--s-6);
  color: var(--nogi-text-mute);
}
.nogi-categories__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.nogi-category {
  list-style: none;
}
.nogi-category__link {
  display: block;
  text-decoration: none;
  color: var(--nogi-text);
  transition: transform 0.25s ease;
}
.nogi-category__link:hover {
  transform: translateY(-4px);
}
.nogi-category__media {
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--nogi-border);
  background: var(--nogi-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(135deg, var(--nogi-bg-card) 0%, var(--nogi-bg-alt) 100%);
  background-size: cover;
  background-position: center;
  transition: border-color 0.2s, transform 0.25s ease;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(31,36,50,0.05);
}
.nogi-category__link:hover .nogi-category__media {
  border-color: var(--nogi-red);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(31,36,50,0.12);
}
.nogi-category__media--gi {
  background-image: linear-gradient(135deg, #1a1a1a 0%, #2a1810 100%);
}
.nogi-category__media--mujer {
  background-image: linear-gradient(135deg, #1a1a1a 0%, #2d1f2d 100%);
}
.nogi-category__media--apparel {
  background-image: linear-gradient(135deg, #1a1a1a 0%, #1f252d 100%);
}
.nogi-category__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.02em;
  color: #fff;
  text-transform: uppercase;
  z-index: 2;
  position: relative;
}
.nogi-category__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.4) 0%, transparent 70%);
  z-index: 1;
}
@media (max-width: 768px) {
  .nogi-categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .nogi-categories__grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   STORY — "I LOST THE ROOF..."
   ==================================================================== */
.nogi-story {
  background: var(--nogi-bg-alt);
  padding: var(--s-12) 0;
  border-top: 1px solid var(--nogi-border);
}
.nogi-story__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--s-8);
  align-items: center;
}
.nogi-story__visual {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--nogi-bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(31,36,50,0.12);
}
.nogi-story__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}
.nogi-story__visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(31,36,50,0.5));
  pointer-events: none;
}
.nogi-story__quote {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--nogi-text);
  margin: 0 0 var(--s-4);
}
.nogi-story__quote em {
  font-style: normal;
  color: var(--nogi-red);
}
.nogi-story__body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--nogi-text-mute);
  margin-bottom: var(--s-4);
}
.nogi-story__signature {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--nogi-red);
  text-transform: uppercase;
}

/* ====================================================================
   MANIFESTO — "Sangue no kimono..."
   ==================================================================== */
.nogi-manifesto {
  background: var(--nogi-black);
  color: #fff;
  padding: var(--s-12) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.nogi-manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(229,16,27,0.15), transparent 70%);
}
.nogi-manifesto__inner { position: relative; max-width: 900px; margin: 0 auto; padding: 0 var(--s-3); }
.nogi-manifesto__claim {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(32px, 5vw, 72px);
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
  letter-spacing: 0.01em;
}
.nogi-manifesto__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--nogi-red);
  text-transform: uppercase;
}

/* ====================================================================
   VALUES — three columns (training/collections/community)
   ==================================================================== */
.nogi-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  border-top: 1px solid var(--nogi-border);
  border-bottom: 1px solid var(--nogi-border);
}
.nogi-value {
  padding: var(--s-6) var(--s-3);
  border-right: 1px solid var(--nogi-border);
}
.nogi-value:last-child { border-right: none; }
.nogi-value__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--nogi-red);
  margin-bottom: var(--s-2);
  letter-spacing: 0.18em;
}
.nogi-value__title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  color: var(--nogi-text);
}
.nogi-value__body {
  font-size: 15px;
  color: var(--nogi-text-mute);
  line-height: 1.55;
}

/* ====================================================================
   NEWSLETTER
   ==================================================================== */
.nogi-newsletter {
  background: var(--nogi-black);
  padding: var(--s-8) 0;
}
.nogi-newsletter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: center;
}
.nogi-newsletter__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--s-2);
  line-height: 1;
}
.nogi-newsletter__body { color: rgba(255,255,255,0.8); font-size: 16px; }
.nogi-newsletter__form {
  display: flex;
  gap: 0;
}
.nogi-newsletter__input {
  flex-grow: 1;
  padding: 16px 18px;
  background: #fff;
  border: 2px solid #fff;
  color: var(--nogi-black);
  font-family: var(--font-body);
  font-size: 15px;
  min-height: 56px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.nogi-newsletter__input:focus { outline: 2px solid var(--nogi-red); outline-offset: 2px; }
.nogi-newsletter__submit {
  background: var(--nogi-red);
  color: #fff;
  border: 2px solid var(--nogi-red);
  padding: 0 28px;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 56px;
  transition: background 0.2s;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.nogi-newsletter__submit:hover { background: #fff; color: var(--nogi-red); border-color: #fff; }

/* ====================================================================
   FOOTER — three columns
   ==================================================================== */
.nogi-footer {
  background: var(--nogi-black);
  padding: var(--s-10) 0 var(--s-4);
  border-top: 1px solid var(--nogi-border);
}
.nogi-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}
.nogi-footer__col h4 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nogi-red);
  margin: 0 0 var(--s-3);
}
.nogi-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.nogi-footer__col a {
  color: var(--nogi-text-mute);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.nogi-footer__col a:hover { color: #fff; }
.nogi-footer__brand-name {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.04em;
  color: #fff;
  margin-bottom: var(--s-2);
  text-transform: uppercase;
}
.nogi-footer__tagline {
  font-size: 14px;
  color: var(--nogi-text-mute);
  line-height: 1.5;
  max-width: 320px;
  margin-bottom: var(--s-3);
}
.nogi-footer__social {
  display: flex;
  gap: 12px;
}
.nogi-footer__social a {
  width: 40px; height: 40px;
  border: 1px solid var(--nogi-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--nogi-text-mute);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.nogi-footer__social a:hover { color: var(--nogi-red); border-color: var(--nogi-red); }
.nogi-footer__bottom {
  border-top: 1px solid var(--nogi-border);
  padding-top: var(--s-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nogi-gray-500);
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* ====================================================================
   UTILITIES
   ==================================================================== */
.nogi-text-red { color: var(--nogi-red); }
.nogi-text-mute { color: var(--nogi-text-mute); }
.nogi-divider {
  height: 1px;
  background: var(--nogi-border);
  margin: var(--s-4) 0;
}
.nogi-mono {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ====================================================================
   RESPONSIVE — mobile first
   ==================================================================== */
@media (max-width: 1024px) {
  .nogi-hero__bg { background-position: center 25%; }
  .nogi-products { grid-template-columns: repeat(2, 1fr); }
  .nogi-drop__grid,
  .nogi-story__grid {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .nogi-values { grid-template-columns: 1fr; }
  .nogi-value { border-right: none; border-bottom: 1px solid var(--nogi-border); }
  .nogi-value:last-child { border-bottom: none; }
  .nogi-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .nogi-newsletter__grid { grid-template-columns: 1fr; }
  .nogi-nav { display: none; } /* mobile uses offcanvas */
}
@media (max-width: 600px) {
  .nogi-hero { min-height: 560px; height: auto; padding: var(--s-6) 0 var(--s-8); }
  .nogi-hero__title { font-size: 44px; }
  .nogi-hero__media::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.92) 100%);
  }
  .nogi-hero__img { object-position: center 25%; }
  .nogi-section { padding: var(--s-8) 0; }
  .nogi-products { grid-template-columns: 1fr; }
  .nogi-footer__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .nogi-footer__bottom { font-size: 10px; }
  .nogi-newsletter__form { flex-direction: column; gap: var(--s-2); }
}

/* ====================================================================
   REDUCED MOTION
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====================================================================
   FOCUS VISIBLE
   ==================================================================== */
:focus-visible {
  outline: 2px solid var(--nogi-red);
  outline-offset: 2px;
}

/* ====================================================================
   BOOTSTRAP / HUMMINGBIRD VARIABLE OVERRIDES
   Sobreescribimos las CSS variables que Hummingbird usa para que
   componentes como .btn-primary, .btn-outline-primary, badges,
   borders y text colors se alineen con la paleta NOGI (negro + rojo)
   en lugar de los azules Bootstrap por defecto.
   ==================================================================== */
:root {
  /* Bootstrap primary palette → NOGI red */
  --bs-primary: var(--nogi-red);
  --bs-primary-rgb: 229, 16, 27;
  --bs-primary-text-emphasis: var(--nogi-red);
  --bs-primary-bg-subtle: rgba(229, 16, 27, 0.12);
  --bs-primary-border-subtle: var(--nogi-red);
  --bs-link-color: var(--nogi-red);
  --bs-link-color-rgb: 229, 16, 27;
  --bs-link-hover-color: var(--nogi-red-dark);
  --bs-link-hover-color-rgb: 181, 13, 23;
  --bs-body-color: var(--nogi-text);
  --bs-body-color-rgb: 255, 255, 255;
  --bs-body-bg: var(--nogi-bg);
  --bs-body-bg-rgb: 10, 10, 10;
  --bs-secondary-color: var(--nogi-text-mute);
  --bs-secondary-color-rgb: 181, 181, 181;
  --bs-tertiary-color: var(--nogi-gray-500);
  --bs-tertiary-color-rgb: 138, 138, 138;
  --bs-secondary-bg: var(--nogi-bg-alt);
  --bs-secondary-bg-rgb: 20, 20, 20;
  --bs-tertiary-bg: var(--nogi-bg-card);
  --bs-tertiary-bg-rgb: 26, 26, 26;
  --bs-border-color: var(--nogi-border);
  --bs-border-color-translucent: var(--nogi-border);
  --bs-heading-color: var(--nogi-text);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: var(--nogi-red);
  --bs-form-invalid-border-color: var(--nogi-red);
  --bs-accordion-bg: var(--nogi-bg-card);
  --bs-accordion-btn-bg: var(--nogi-bg-card);
  --bs-accordion-btn-color: var(--nogi-text);
  --bs-accordion-active-bg: var(--nogi-bg-alt);
  --bs-accordion-active-color: var(--nogi-red);
  --bs-accordion-border-color: var(--nogi-border);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 2px rgba(229, 16, 27, 0.2);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E5101B'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* ====================================================================
   GLOBAL TYPOGRAPHY OVERRIDES — apply to Hummingbird/Bootstrap elements
   on non-home pages (cart, product, login, category, CMS, etc.)
   ==================================================================== */
body, .page, .page-content, .page-content--home,
.content-wrapper, .center-column, .wrapper, .columns-container,
.page--full-width, .page-cart, .page-category, .page-product,
.page-login, .page-cms {
  background: var(--nogi-bg) !important;
  color: var(--nogi-text) !important;
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title-section, .page-header, .section-title,
.cart-grid__aside-wrapper h2, .cart-summary h2 {
  font-family: var(--font-display) !important;
  color: var(--nogi-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  font-weight: 400 !important;
}

.page-title-section {
  font-size: clamp(36px, 5vw, 64px) !important;
  margin: 0 0 var(--s-3) !important;
  padding-bottom: var(--s-2) !important;
  border-bottom: 1px solid var(--nogi-border);
  position: relative;
}
.page-title-section::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 80px; height: 2px;
  background: var(--nogi-red);
}
.section-title {
  font-size: clamp(28px, 3.6vw, 48px) !important;
  margin: 0 0 var(--s-3) !important;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--nogi-border);
  position: relative;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 60px; height: 2px;
  background: var(--nogi-red);
}

a, .link { color: var(--nogi-red); }
a:hover, .link:hover { color: var(--nogi-red-dark); }

hr {
  border-color: var(--nogi-border) !important;
  opacity: 1;
}

/* ====================================================================
   BREADCRUMB
   ==================================================================== */
.breadcrumb__wrapper {
  background: var(--nogi-bg-alt) !important;
  border-bottom: 1px solid var(--nogi-border);
  padding: 14px 0 !important;
  margin-bottom: var(--s-4) !important;
}
.breadcrumb {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nogi-text-mute) !important;
}
.breadcrumb-item { color: var(--nogi-text-mute) !important; }
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--nogi-gray-700) !important;
  content: "/" !important;
}
.breadcrumb-item a { color: var(--nogi-text) !important; text-decoration: none; }
.breadcrumb-item a:hover { color: var(--nogi-red) !important; }
.breadcrumb-item.active, .breadcrumb-item span { color: var(--nogi-text-mute) !important; }

/* ====================================================================
   BUTTONS — override Bootstrap blue with NOGI red
   ==================================================================== */
.btn {
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 12px 24px !important;
  min-height: 48px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-width: 2px;
  line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled,
button.btn-primary,
a.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--nogi-red);
  --bs-btn-border-color: var(--nogi-red);
  --bs-btn-hover-color: var(--nogi-red);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 229, 16, 27;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--nogi-red-dark);
  --bs-btn-active-border-color: var(--nogi-red-dark);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: rgba(255,255,255,0.4);
  --bs-btn-disabled-bg: rgba(229, 16, 27, 0.4);
  --bs-btn-disabled-border-color: transparent;
  background: var(--nogi-red) !important;
  color: #fff !important;
  border-color: var(--nogi-red) !important;
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):hover {
  background: #fff !important;
  color: var(--nogi-red) !important;
  border-color: #fff !important;
}
.btn-primary:disabled,
.btn-primary.disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline-primary,
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  --bs-btn-color: var(--nogi-red);
  --bs-btn-border-color: var(--nogi-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nogi-red);
  --bs-btn-hover-border-color: var(--nogi-red);
  --bs-btn-focus-shadow-rgb: 229, 16, 27;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--nogi-red-dark);
  --bs-btn-active-border-color: var(--nogi-red-dark);
  --bs-btn-disabled-color: rgba(229, 16, 27, 0.4);
  --bs-btn-disabled-border-color: rgba(229, 16, 27, 0.4);
  color: var(--nogi-red) !important;
  background: transparent !important;
  border: 2px solid var(--nogi-red) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):hover {
  background: var(--nogi-red) !important;
  color: #fff !important;
  border-color: var(--nogi-red) !important;
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled { opacity: 0.4; }

.btn-secondary, .btn-tertiary {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--nogi-text);
  --bs-btn-border-color: var(--nogi-border);
  --bs-btn-hover-bg: rgba(255,255,255,0.06);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: var(--nogi-border);
  background: transparent !important;
  color: var(--nogi-text) !important;
  border: 2px solid var(--nogi-border) !important;
}
.btn-secondary:hover, .btn-tertiary:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.6) !important;
}

.btn-link {
  --bs-btn-color: var(--nogi-red);
  --bs-btn-hover-color: var(--nogi-red-dark);
  color: var(--nogi-red) !important;
  text-decoration: none !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  border: none !important;
  background: transparent !important;
  min-height: auto;
  padding: 0 !important;
}
.btn-link:hover { color: var(--nogi-red-dark) !important; }

.btn-sm { padding: 8px 16px !important; font-size: 12px !important; min-height: 36px; }

/* ====================================================================
   FORMS — inputs, selects, textareas
   ==================================================================== */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="search"],
input[type="tel"], input[type="url"], textarea, select {
  background: var(--nogi-bg-card) !important;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  min-height: 48px;
  box-shadow: none !important;
  transition: border-color 0.2s, background 0.2s;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
  color: var(--nogi-gray-500) !important;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--nogi-red) !important;
  background: var(--nogi-bg-alt) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(229, 16, 27, 0.2) !important;
}
.form-label, label {
  color: var(--nogi-text) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px !important;
  display: block;
}
.form-control:disabled, .form-control[readonly] {
  background: var(--nogi-bg-alt) !important;
  opacity: 0.6;
}
.form-check-input {
  background-color: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
}
.form-check-input:checked {
  background-color: var(--nogi-red) !important;
  border-color: var(--nogi-red) !important;
}
.input-group-text {
  background: var(--nogi-bg-card) !important;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
}

/* ====================================================================
   CART PAGE — cart-grid, cart-summary, product-line
   ==================================================================== */
.cart-grid {
  margin-top: var(--s-3) !important;
  --bs-gutter-x: var(--s-4);
}

.cart-grid__content {
  background: var(--nogi-bg-card);
  border: 1px solid var(--nogi-border);
  padding: var(--s-4);
}
.cart-grid__aside {
  background: var(--nogi-bg-card);
  border: 1px solid var(--nogi-border);
  padding: var(--s-4);
}
.cart-grid__aside-wrapper {
  background: transparent !important;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.cart-grid__aside-wrapper > h2 {
  font-size: 22px !important;
  margin: 0 0 var(--s-3) !important;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--nogi-border);
  position: relative;
}
.cart-grid__aside-wrapper > h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 50px; height: 2px;
  background: var(--nogi-red);
}

.cart__overview {
  background: transparent !important;
  margin-bottom: var(--s-3) !important;
}
.cart__overview > hr { display: none; }

.cart__list { display: flex; flex-direction: column; gap: 0; }
.cart__item {
  border: 0 !important;
  border-bottom: 1px solid var(--nogi-border) !important;
  margin: 0 !important;
  padding: var(--s-3) 0 !important;
  background: transparent !important;
}
.cart__item:last-child { border-bottom: 0 !important; }

.cart__empty {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--nogi-text) !important;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-8) var(--s-3);
  border: 1px dashed var(--nogi-border);
  margin: 0 !important;
}
.cart__empty::before {
  content: "🛒";
  display: block;
  font-size: 48px;
  margin-bottom: var(--s-3);
  opacity: 0.4;
}

.product-line {
  display: grid !important;
  grid-template-columns: 110px 1fr;
  gap: var(--s-3) !important;
  align-items: flex-start !important;
  background: transparent !important;
  color: var(--nogi-text) !important;
}
.product-line__image {
  background: var(--nogi-bg);
  border: 1px solid var(--nogi-border);
  overflow: hidden;
}
.product-line__img {
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  display: block;
}
.product-line__content {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: var(--s-3);
  align-items: flex-start;
  flex-grow: 1 !important;
}
.product-line__content-left { display: flex; flex-direction: column; gap: 6px; }
.product-line__content-right {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-end;
  text-align: right;
}
.product-line__title {
  color: var(--nogi-text) !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-decoration: none;
  margin-bottom: 4px;
}
.product-line__title:hover { color: var(--nogi-red) !important; }
.product-line__item {
  font-size: 13px;
  color: var(--nogi-text-mute) !important;
}
.product-line__item-label {
  color: var(--nogi-gray-500) !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  margin-right: 4px;
}
.product-line__item-value { color: var(--nogi-text) !important; }
.product-line__item--info { color: var(--nogi-text-mute); }
.product-line__item-availability-icon { color: var(--nogi-red) !important; font-size: 16px !important; }
.product-line__item-availability-message { color: var(--nogi-text-mute) !important; font-size: 12px; }
.product-line__item--small-info { color: var(--nogi-gray-500) !important; font-size: 12px; }
.product-line__item-price {
  color: var(--nogi-text) !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}
.product-line__item-unit-price { color: var(--nogi-gray-500) !important; font-size: 12px; }
.product-line__item-regular-price {
  color: var(--nogi-gray-500) !important;
  font-size: 12px;
  text-decoration: line-through;
}
.product-line__item-discount,
.badge.bg-primary {
  background: var(--nogi-red) !important;
  color: #fff !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0 !important;
  padding: 4px 8px !important;
}
.product-line__quantity-button {
  display: flex;
  align-items: center;
  max-width: 9rem;
  background: var(--nogi-bg);
  border: 1px solid var(--nogi-border);
}
.product-line__quantity-button .quantity-button__group.input-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  width: auto !important;
  gap: 0;
}
.product-line__quantity-button .input-group {
  flex-wrap: nowrap;
}
.product-line__quantity-button .js-qty-button,
.product-line__quantity-button button {
  background: transparent !important;
  color: var(--nogi-text) !important;
  border: 0 !important;
  width: 32px; height: 38px;
  border-radius: 0 !important;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-line__quantity-button .js-qty-button:hover,
.product-line__quantity-button button:hover {
  color: var(--nogi-red) !important;
  background: rgba(229, 16, 27, 0.08) !important;
}
.product-line__quantity-input,
input.js-cart-line-product-quantity {
  background: transparent !important;
  color: var(--nogi-text) !important;
  border: 0 !important;
  border-left: 1px solid var(--nogi-border) !important;
  border-right: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  text-align: center;
  font-family: var(--font-mono) !important;
  font-size: 14px;
  font-weight: 600;
  min-height: 38px;
  padding: 0 !important;
  width: 50px;
}
.product-line__price {
  color: var(--nogi-text) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}
.product-line__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.product-line__actions .js-remove-from-cart {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nogi-gray-500) !important;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--nogi-border);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s, border-color 0.2s;
}
.product-line__actions .js-remove-from-cart:hover {
  color: var(--nogi-red) !important;
  border-color: var(--nogi-red);
}
.product-line__actions .js-remove-from-cart::before {
  content: "×";
  font-size: 16px;
  line-height: 1;
}

.cart__continue-shopping {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-3) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 10px 20px !important;
  min-height: 44px;
  width: auto !important;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.cart__continue-shopping:hover {
  color: var(--nogi-red) !important;
  border-color: var(--nogi-red) !important;
  background: rgba(229, 16, 27, 0.05) !important;
}
.cart__continue-shopping .material-icons { font-size: 18px; }

/* ====================================================================
   CART SUMMARY (right column) — totals, voucher
   ==================================================================== */
.cart-summary { color: var(--nogi-text); }
.cart-summary__totals {
  background: transparent !important;
  margin-bottom: var(--s-3);
}
.cart-summary__subtotals {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cart-summary__line {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--nogi-border) !important;
  color: var(--nogi-text) !important;
  font-size: 14px;
  margin: 0 !important;
}
.cart-summary__line--bold {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nogi-text) !important;
  padding: 18px 0 !important;
  border-top: 1px solid var(--nogi-border);
  border-bottom: 0 !important;
  margin-top: 4px !important;
}
.cart-summary__label {
  color: var(--nogi-text-mute) !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.cart-summary__line--bold .cart-summary__label { color: var(--nogi-text) !important; }
.cart-summary__value {
  color: var(--nogi-text) !important;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
}
.cart-summary__line--bold .cart-summary__value {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  color: var(--nogi-red) !important;
}
.cart-summary__value-inner { color: var(--nogi-gray-500); }

.cart-summary__actions.checkout { margin-top: var(--s-3); }
.cart-summary__actions.checkout .d-grid { display: block !important; }
.cart-summary__actions.checkout .btn {
  width: 100%;
  min-height: 56px;
  font-size: 16px !important;
}

.cart-voucher {
  background: var(--nogi-bg-alt) !important;
  border: 1px solid var(--nogi-border);
  padding: var(--s-3) !important;
  margin: var(--s-3) 0 !important;
}
.cart-voucher__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nogi-red) !important;
  margin-bottom: var(--s-2) !important;
}
.cart-voucher__input { display: flex; gap: 0; }
.cart-voucher__input input {
  flex-grow: 1;
  background: var(--nogi-bg) !important;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 12px !important;
  min-height: 44px;
}
.cart-voucher__input input:focus {
  border-color: var(--nogi-red) !important;
  outline: none;
}
.cart-voucher__input .btn { min-height: 44px; padding: 0 20px !important; font-size: 12px !important; }

/* ====================================================================
   BLOCKREASSURANCE (security/delivery/return icons)
   ==================================================================== */
.blockreassurance {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.reassurance {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px !important;
  background: var(--nogi-bg-alt) !important;
  border: 1px solid var(--nogi-border);
}
.reassurance__image {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--nogi-red);
}
.reassurance__image img,
.reassurance__image svg {
  width: 24px; height: 24px;
  filter: brightness(0) saturate(100%) invert(18%) sepia(94%) saturate(7151%) hue-rotate(352deg) brightness(95%) contrast(95%);
}
.reassurance__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reassurance__title {
  color: var(--nogi-text) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.reassurance__desc {
  color: var(--nogi-text-mute) !important;
  font-size: 12px;
}

/* ====================================================================
   NOTIFICATIONS / TOAST
   ==================================================================== */
#notifications { background: transparent !important; }
#notifications .container { padding: 0 !important; }
.toast {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  border-left: 3px solid var(--nogi-red) !important;
  color: var(--nogi-text) !important;
  border-radius: 0 !important;
}
.toast-body { color: var(--nogi-text) !important; }

/* ====================================================================
   PRODUCT MINIATURE (cross-selling, featured products)
   ==================================================================== */
.product-miniature {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  color: var(--nogi-text) !important;
  transition: border-color 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}
.product-miniature:hover { border-color: var(--nogi-red) !important; }
.product-miniature__top { background: var(--nogi-bg) !important; }
.product-miniature__image-container { background: var(--nogi-bg) !important; }
.product-miniature__image {
  background: var(--nogi-bg) !important;
}
.product-miniature__bottom {
  padding: var(--s-2) var(--s-3) var(--s-3) !important;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.product-miniature__infos { flex-grow: 1; }
.product-miniature__form {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 6px;
  margin-top: auto;
}
.product-miniature__form .quantity-button {
  display: flex;
  align-items: center;
}
.product-miniature__form .quantity-button__group.input-group {
  display: flex !important;
  flex-direction: row !important;
  width: auto !important;
  background: var(--nogi-bg);
  border: 1px solid var(--nogi-border);
}
.product-miniature__form .quantity-button input {
  max-width: 50px !important;
  background: transparent !important;
  color: var(--nogi-text) !important;
  border: 0 !important;
  border-left: 1px solid var(--nogi-border) !important;
  border-right: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  text-align: center;
  font-family: var(--font-mono) !important;
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  min-width: 50px;
  padding: 0 !important;
}
.product-miniature__form .quantity-button .js-decrement-button,
.product-miniature__form .quantity-button .js-increment-button,
.product-miniature__form .quantity-button button {
  background: transparent !important;
  color: var(--nogi-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 36px;
  min-width: 36px;
  min-height: 44px;
  font-size: 0;
  padding: 0 !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-miniature__form .quantity-button .js-decrement-button:hover,
.product-miniature__form .quantity-button .js-increment-button:hover {
  color: var(--nogi-red) !important;
  background: rgba(229, 16, 27, 0.08) !important;
}
.product-miniature__form .quantity-button .material-icons {
  font-size: 18px !important;
  color: inherit;
}
.product-miniature__add.btn-primary {
  background: var(--nogi-red) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 18px !important;
  min-height: 44px;
  flex-grow: 1;
  gap: 6px;
}
.product-miniature__add.btn-primary:hover {
  background: #fff !important;
  color: var(--nogi-red) !important;
}
.product-miniature__add .material-icons { font-size: 18px; }
.product-miniature__details.btn-outline-primary {
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 18px !important;
  min-height: 44px;
  flex-grow: 1;
}
.product-miniature__title {
  color: var(--nogi-text) !important;
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.product-miniature__title:hover { color: var(--nogi-red) !important; }
.product-miniature__price {
  color: var(--nogi-text) !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}
.product-miniature__regular-price {
  color: var(--nogi-gray-500) !important;
  text-decoration: line-through;
  font-size: 13px;
}
.product-flags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
}
.product-flags .badge {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  font-weight: 400 !important;
}
.product-flags .badge.discount { background: var(--nogi-red) !important; color: #fff !important; }
.product-flags .badge.new { background: #fff !important; color: var(--nogi-black) !important; }
.product-miniature__quickview-button,
.product-miniature__quickview-touch {
  background: rgba(10, 10, 10, 0.85) !important;
  color: #fff !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.product-miniature__quickview-button:hover,
.product-miniature__quickview-touch:hover { color: var(--nogi-red) !important; border-color: var(--nogi-red) !important; }
.thumbnail-container .outline { outline: 0 !important; }

.section-title-featured {
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nogi-text);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--nogi-border);
  position: relative;
}
.section-title-featured::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  width: 50px; height: 2px;
  background: var(--nogi-red);
}

/* ====================================================================
   PRODUCT PAGE (page-product) overrides
   ==================================================================== */
.page-product .product-container { background: transparent !important; }
.product-cover { background: var(--nogi-bg-card); border: 1px solid var(--nogi-border); }
.product-cover img { background: var(--nogi-bg); }
.product-images > .thumbnails { display: flex; gap: 8px; flex-wrap: wrap; }
.product-images > .thumbnails .thumb {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.product-images > .thumbnails .thumb:hover { border-color: var(--nogi-red) !important; }
.product-images > .thumbnails .thumb.selected { border-color: var(--nogi-red) !important; }
.js-qty-button, .btn-touchspin {
  background: var(--nogi-bg) !important;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  width: 40px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  padding: 0 !important;
  min-height: auto;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body) !important;
}
.js-qty-button:hover, .btn-touchspin:hover { color: var(--nogi-red) !important; border-color: var(--nogi-red) !important; }
#quantity_wanted {
  background: var(--nogi-bg-card) !important;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  text-align: center;
  font-family: var(--font-mono) !important;
  font-weight: 600;
  min-height: 44px;
  font-size: 14px;
  width: 60px;
  padding: 0 !important;
}
.product-prices {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: var(--s-3) 0;
}
.product-price {
  color: var(--nogi-text) !important;
  font-family: var(--font-display) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
}
.regular-price {
  color: var(--nogi-gray-500) !important;
  font-family: var(--font-display);
  font-size: 22px;
  text-decoration: line-through;
}
.discount-amount, .discount-percentage {
  background: var(--nogi-red) !important;
  color: #fff !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 4px 8px;
  text-transform: uppercase;
  border-radius: 0 !important;
}
.product-variants > .product-variants-item { margin: var(--s-2) 0; }
.product-variants-item label { display: block; margin-bottom: 8px; }
.variant-input select, .product-variants select {
  background: var(--nogi-bg-card) !important;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  min-height: 48px;
  width: 100%;
  padding: 8px 14px !important;
}
.color {
  width: 28px !important;
  height: 28px !important;
  border-radius: 0 !important;
  border: 2px solid var(--nogi-border) !important;
  display: inline-block;
  transition: border-color 0.2s, transform 0.2s;
}
.color:hover, .color.selected { border-color: var(--nogi-red) !important; transform: scale(1.1); }
.product-add-to-cart { margin-top: var(--s-3); }
.product-add-to-cart .btn-primary { width: 100%; min-height: 56px; font-size: 16px !important; }

.product-tabs { margin-top: var(--s-8); }
.nav-tabs {
  border-bottom: 1px solid var(--nogi-border) !important;
  display: flex;
  gap: 0;
}
.nav-tabs .nav-link {
  background: transparent !important;
  color: var(--nogi-text-mute) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-family: var(--font-display);
  font-size: 14px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 20px !important;
  margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--nogi-text) !important; }
.nav-tabs .nav-link.active {
  color: var(--nogi-red) !important;
  border-bottom-color: var(--nogi-red) !important;
  background: transparent !important;
}
.tab-content {
  background: var(--nogi-bg-card);
  border: 1px solid var(--nogi-border);
  border-top: 0;
  padding: var(--s-4);
  color: var(--nogi-text) !important;
}
.tab-pane { color: var(--nogi-text) !important; }
.tab-pane p, .tab-pane li { color: var(--nogi-text) !important; }

.accordion {
  --bs-accordion-color: var(--nogi-text);
  --bs-accordion-bg: var(--nogi-bg-card);
  --bs-accordion-border-color: var(--nogi-border);
}
.accordion-item {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  color: var(--nogi-text) !important;
  border-radius: 0 !important;
}
.accordion-item + .accordion-item { border-top: 0 !important; }
.accordion-button {
  background: var(--nogi-bg-card) !important;
  color: var(--nogi-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-3) !important;
}
.accordion-button:not(.collapsed) {
  background: var(--nogi-bg-alt) !important;
  color: var(--nogi-red) !important;
  box-shadow: none !important;
}
.accordion-button:hover { color: var(--nogi-red) !important; }
.accordion-button::after {
  filter: brightness(0) saturate(100%) invert(100%);
}
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) saturate(100%) invert(18%) sepia(94%) saturate(7151%) hue-rotate(352deg) brightness(95%) contrast(95%);
}
.accordion-body {
  background: var(--nogi-bg-card) !important;
  color: var(--nogi-text) !important;
  padding: var(--s-3) var(--s-4) var(--s-4) !important;
  border-top: 1px solid var(--nogi-border);
}
.accordion-body p, .accordion-body li { color: var(--nogi-text) !important; }
.product-manufacturer, .product-reference, .product-quantity {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--nogi-text-mute) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.product-manufacturer a { color: var(--nogi-text) !important; }
.product-features { background: var(--nogi-bg-card) !important; }
.product-features h3 {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  font-size: 18px !important;
  color: var(--nogi-text) !important;
  margin-bottom: var(--s-2);
}
.product-features .data-sheet {
  width: 100%;
  border-collapse: collapse;
}
.product-features .data-sheet dt, .product-features .data-sheet dd {
  padding: 10px 0;
  border-bottom: 1px solid var(--nogi-border);
  color: var(--nogi-text) !important;
}
.product-features .data-sheet dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nogi-gray-500) !important;
  width: 40%;
  float: left;
  clear: left;
}
.product-features .data-sheet dd {
  font-size: 14px;
  color: var(--nogi-text) !important;
  margin-left: 40%;
}

/* ====================================================================
   LOGIN / AUTH PAGES
   ==================================================================== */
.page-auth .login-form,
.page-auth .register-form,
.page-auth .forgotten-password {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  padding: var(--s-4) !important;
}
.page-auth h1 { font-size: 36px !important; }
.page-auth .form-group { margin-bottom: var(--s-3); }
.page-auth .form-control { min-height: 48px; }
.page-auth .btn-primary { width: 100%; }
.no-account, .forgot-password {
  text-align: center;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--nogi-border);
  font-size: 13px;
  color: var(--nogi-text-mute);
}
.no-account a, .forgot-password a { color: var(--nogi-red) !important; }

/* ====================================================================
   CATEGORY / LISTING PAGES
   ==================================================================== */
#products .product-miniature { margin-bottom: var(--s-3); }

.subcategory { margin: 0 0 var(--s-4) !important; }
.subcategory__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: var(--s-3) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
.subcategory__link {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  padding: var(--s-3) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--s-2) !important;
  color: var(--nogi-text) !important;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
  white-space: normal !important;
  line-height: 1.2 !important;
  position: relative;
  overflow: hidden;
}
.subcategory__link:hover {
  border-color: var(--nogi-red) !important;
  background: var(--nogi-bg-alt) !important;
  color: var(--nogi-text) !important;
  transform: translateY(-2px);
}
.subcategory__link--with-image {
  padding: 0 !important;
}
.subcategory__thumbnail {
  width: 100% !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  display: block;
  border: 0 !important;
  border-bottom: 1px solid var(--nogi-border) !important;
}
.subcategory__name {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nogi-text) !important;
  padding: var(--s-2) var(--s-3) !important;
  text-align: left;
}
.subcategory__link:hover .subcategory__name { color: var(--nogi-red) !important; }

#search_filters, .facet-container {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  padding: var(--s-3) !important;
}
.facet { border-bottom: 1px solid var(--nogi-border) !important; padding: var(--s-2) 0 !important; }
.facet-title {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  text-transform: uppercase;
  color: var(--nogi-text) !important;
  margin-bottom: var(--s-2) !important;
}
.facet-label {
  color: var(--nogi-text-mute) !important;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.facet-label:hover { color: var(--nogi-text) !important; }
.facet-count { color: var(--nogi-gray-500) !important; font-family: var(--font-mono); font-size: 11px; }
.pagination {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: var(--s-3) 0;
  justify-content: center;
}
.pagination .page-item .page-link {
  background: var(--nogi-bg-card) !important;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 14px;
  min-width: 38px;
  text-align: center;
  text-decoration: none;
}
.pagination .page-item .page-link:hover { color: var(--nogi-red) !important; border-color: var(--nogi-red) !important; }
.pagination .page-item.active .page-link { background: var(--nogi-red) !important; color: #fff !important; border-color: var(--nogi-red) !important; }
.pagination .page-item.disabled .page-link { opacity: 0.4; cursor: not-allowed; }

.sort-by-row, .filter-button {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  color: var(--nogi-text) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 0 !important;
}
.sort-by { background: var(--nogi-bg-card) !important; border: 1px solid var(--nogi-border) !important; color: var(--nogi-text) !important; }

/* ====================================================================
   FOOTER (already styled, but make sure non-home footer is dark too)
   ==================================================================== */
.footer { background: var(--nogi-black) !important; }
.footer .footer-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-3); }
.footer-logo { display: none; }
.footer h4, .footer .h4 { color: var(--nogi-red) !important; font-family: var(--font-display) !important; }
.footer a { color: var(--nogi-text-mute) !important; }
.footer a:hover { color: var(--nogi-red) !important; }
.footer p, .footer li { color: var(--nogi-text-mute) !important; }
.copyright, .footer-copyright { color: var(--nogi-gray-500) !important; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }

/* ====================================================================
   NEWSLETTER BLOCK (subscribe form in footer)
   ==================================================================== */
.block-newsletter {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  padding: var(--s-3) !important;
}
.block-newsletter label, .block-newsletter .h6 {
  color: var(--nogi-text) !important;
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  font-size: 16px !important;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-2) !important;
}
.block-newsletter p { color: var(--nogi-text-mute) !important; font-size: 13px; }
.block-newsletter .input-wrapper { display: flex; gap: 0; }
.block-newsletter .input-wrapper input {
  flex-grow: 1;
  background: var(--nogi-bg) !important;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono);
  font-size: 12px;
  min-height: 44px;
  padding: 10px 14px !important;
}
.block-newsletter .input-wrapper input:focus { border-color: var(--nogi-red) !important; outline: none; }
.block-newsletter .btn,
.block-newsletter button[type="submit"] {
  background: var(--nogi-red) !important;
  color: #fff !important;
  border: 1px solid var(--nogi-red) !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 20px !important;
  min-height: 44px;
}
.block-newsletter .btn:hover { background: #fff !important; color: var(--nogi-red) !important; border-color: #fff !important; }

/* ====================================================================
   ALERTS / NOTIFICATIONS general
   ==================================================================== */
.alert {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  border-left: 3px solid var(--nogi-red) !important;
  color: var(--nogi-text) !important;
  border-radius: 0 !important;
}
.alert-success { border-left-color: #75b798 !important; }
.alert-warning { border-left-color: #ffc107 !important; }
.alert-info { border-left-color: #4dabf7 !important; }

/* ====================================================================
   SKIP LINK / A11Y
   ==================================================================== */
.skip-link {
  background: var(--nogi-red) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* ====================================================================
   BACK TO TOP
   ==================================================================== */
.back-to-top-link {
  background: var(--nogi-red) !important;
  color: #fff !important;
  border-radius: 0 !important;
  width: 44px !important;
  height: 44px !important;
}
.back-to-top-link:hover { background: #fff !important; color: var(--nogi-red) !important; }

/* ====================================================================
   CHECKOUT PAGES — steps navigation, summary, form steps
   ==================================================================== */
.checkout-steps {
  background: var(--nogi-bg-alt) !important;
  border-bottom: 1px solid var(--nogi-border) !important;
  margin-bottom: var(--s-4) !important;
  padding: var(--s-3) 0 !important;
}
.checkout-steps__list {
  display: flex !important;
  align-items: flex-start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-3);
  list-style: none;
}
.checkout-steps__step {
  flex: 1 1 25%;
  position: relative;
  text-align: center;
  padding: 0 var(--s-2);
}
.checkout-steps__step::before,
.checkout-steps__step::after {
  background: var(--nogi-border) !important;
  height: 1px !important;
  top: 18px !important;
  width: 50% !important;
  content: "";
  position: absolute;
  z-index: 0;
}
.checkout-steps__step::before { left: 0; }
.checkout-steps__step::after { right: 0; }
.checkout-steps__step:first-of-type::before { display: none; }
.checkout-steps__step:last-of-type::after { display: none; }
.checkout-steps__step--success::before { background: var(--nogi-red) !important; }
.checkout-steps__number {
  background: var(--nogi-bg-card) !important;
  color: var(--nogi-text-mute) !important;
  border: 1px solid var(--nogi-border) !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  margin: 0 auto var(--s-2);
}
.checkout-steps__step--current .checkout-steps__number {
  background: var(--nogi-red) !important;
  color: #fff !important;
  border-color: var(--nogi-red) !important;
}
.checkout-steps__step--success .checkout-steps__number {
  background: var(--nogi-red) !important;
  color: #fff !important;
  border-color: var(--nogi-red) !important;
}
.checkout-steps__btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--nogi-text-mute) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 !important;
  cursor: pointer;
  display: block;
  line-height: 1.3;
  text-decoration: none;
}
.checkout-steps__step--current .checkout-steps__btn,
.checkout-steps__step--success .checkout-steps__btn {
  color: var(--nogi-text) !important;
}
.checkout-steps__title {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.checkout-steps__subtitle {
  color: var(--nogi-gray-500) !important;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}

.checkout-grid {
  margin-top: var(--s-3);
}
.checkout-grid__content {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  padding: var(--s-4) !important;
}
.checkout-grid__aside {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  padding: var(--s-3) !important;
}
.checkout-grid__aside-wrapper {
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.checkout__summary-accordion .accordion-button {
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  text-transform: uppercase;
}
.checkout__summary-accordion .accordion-body,
.checkout__summary-accordion .cart-summary {
  background: transparent !important;
  color: var(--nogi-text) !important;
}

/* Step content (personal info, addresses, shipping, payment) */
.checkout-step {
  background: transparent !important;
  color: var(--nogi-text) !important;
}
.checkout-step h1, .checkout-step h2, .checkout-step h3 {
  font-family: var(--font-display) !important;
  color: var(--nogi-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.checkout-step__title {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.6vw, 40px) !important;
  text-transform: uppercase;
  color: var(--nogi-text) !important;
  margin: 0 0 var(--s-3) !important;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--nogi-border);
  position: relative;
}
.checkout-step__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 60px; height: 2px;
  background: var(--nogi-red);
}
.form-control.checkout-input,
.checkout-step input[type="text"],
.checkout-step input[type="email"],
.checkout-step input[type="password"],
.checkout-step input[type="tel"],
.checkout-step select,
.checkout-step textarea {
  background: var(--nogi-bg) !important;
  color: var(--nogi-text) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  padding: 12px 14px !important;
  min-height: 50px;
  font-family: var(--font-body);
  font-size: 14px;
}
.checkout-step input:focus,
.checkout-step select:focus,
.checkout-step textarea:focus {
  border-color: var(--nogi-red) !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(229, 16, 27, 0.2);
}
.checkout-step .form-control,
.checkout-step label {
  color: var(--nogi-text) !important;
}
.checkout-step .btn-primary,
.checkout-step button.continue,
.checkout-step button[data-link-action="sign-in"] {
  background: var(--nogi-red) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 32px !important;
  min-height: 52px;
}
.checkout-step .btn-primary:hover,
.checkout-step button.continue:hover {
  background: #fff !important;
  color: var(--nogi-red) !important;
}

.delivery-options-list, .payment-options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.delivery-option, .payment-option {
  background: var(--nogi-bg) !important;
  border: 1px solid var(--nogi-border) !important;
  border-radius: 0 !important;
  padding: var(--s-3) !important;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--nogi-text) !important;
  cursor: pointer;
  transition: border-color 0.2s;
}
.delivery-option:hover, .payment-option:hover { border-color: var(--nogi-red) !important; }
.delivery-option input[type="radio"],
.payment-option input[type="radio"] {
  accent-color: var(--nogi-red) !important;
  width: 18px;
  height: 18px;
}
.delivery-option__carrier, .payment-option__label {
  font-family: var(--font-display) !important;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nogi-text) !important;
}
.delivery-option__price, .payment-option__price {
  font-family: var(--font-mono);
  color: var(--nogi-red) !important;
  font-weight: 600;
  margin-left: auto;
}

.js-address-selector .address-card {
  background: var(--nogi-bg) !important;
  border: 1px solid var(--nogi-border) !important;
  color: var(--nogi-text) !important;
  padding: var(--s-3);
  border-radius: 0;
}
.js-address-selector .address-card.selected,
.js-address-selector .address-card.is-selected {
  border-color: var(--nogi-red) !important;
}

.order-confirmation {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  padding: var(--s-6) !important;
  color: var(--nogi-text) !important;
  text-align: center;
}
.order-confirmation h1, .order-confirmation h2 {
  font-family: var(--font-display) !important;
  color: var(--nogi-text) !important;
}
.order-confirmation__icon {
  color: var(--nogi-red) !important;
  font-size: 64px !important;
  margin-bottom: var(--s-3);
}
.order-confirmation-table {
  background: var(--nogi-bg-card) !important;
  border: 1px solid var(--nogi-border) !important;
  color: var(--nogi-text) !important;
}
.order-confirmation-table th,
.order-confirmation-table td {
  border-color: var(--nogi-border) !important;
  color: var(--nogi-text) !important;
  padding: 12px !important;
}

/* ====================================================================
   MOBILE RESPONSIVE — non-home pages
   ==================================================================== */
@media (max-width: 1024px) {
  .cart-grid { row-gap: var(--s-3); }
  .cart-grid__aside-wrapper { position: static; }
  .product-line { grid-template-columns: 80px 1fr; gap: var(--s-2); }
  .product-line__img { width: 80px; }
  .product-line__content { grid-template-columns: 1fr; }
  .product-line__content-right { align-items: flex-start; text-align: left; }
  .nav-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .nav-tabs .nav-link { white-space: nowrap; }
  .nav-tabs .nav-link { padding: 12px 14px !important; font-size: 12px !important; }
}
@media (max-width: 600px) {
  .cart-grid__content, .cart-grid__aside { padding: var(--s-3) !important; }
  .product-line { grid-template-columns: 70px 1fr; }
  .product-line__img { width: 70px; }
  .product-line__title { font-size: 15px !important; }
  .product-line__price { font-size: 16px !important; }
  .product-price { font-size: 28px !important; }
  .page-title-section { font-size: 32px !important; }
  .section-title { font-size: 24px !important; }
}


/* ====================================================================
   NOGI v3 OVERRIDES — sharp corners, brutalist accent, disimular calco
   ==================================================================== */
:root {
  --nogi-display-tracking: 0.04em;
  --nogi-display-leading: 0.9;
}

/* Buttons: rectangular, sharp corners */
.nogi-btn,
.btn,
.btn-primary,
.btn-secondary {
  border-radius: 0 !important;
  letter-spacing: 0.10em !important;
}
.nogi-btn {
  font-family: var(--font-display) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-weight: 400;
  padding: 14px 32px !important;
  border-radius: 0 !important;
  border: 2px solid transparent;
  position: relative;
  transition: all 0.2s ease;
}
.nogi-btn--primary {
  background: var(--nogi-red);
  color: #fff;
  border-color: var(--nogi-red);
}
.nogi-btn--primary:hover {
  background: #fff;
  color: var(--nogi-red);
  border-color: #fff;
}
.nogi-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.nogi-btn--ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.05);
}
.nogi-btn--dark {
  background: #fff;
  color: var(--nogi-black);
  border-color: #fff;
}
.nogi-btn--dark:hover {
  background: var(--nogi-red);
  color: #fff;
  border-color: var(--nogi-red);
}

/* Headings: condensed industrial */
.nogi-h2,
.nogi-hero__title,
.nogi-newsletter__title,
.nogi-story__quote {
  font-family: var(--font-display) !important;
  letter-spacing: var(--nogi-display-tracking);
  line-height: var(--nogi-display-leading);
  text-transform: uppercase;
  font-weight: 400;
}
.nogi-hero__title {
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 400;
}
.nogi-h2 {
  font-size: clamp(40px, 5.5vw, 80px);
  font-weight: 400;
}

/* Cards: sharp, no rounded corners */
.nogi-card,
.nogi-category__media,
.product-miniature,
.product-miniature__img-wrapper {
  border-radius: 0 !important;
}

/* Subtle red accent line under headings (editorial detail) */
.nogi-section .nogi-eyebrow,
.nogi-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nogi-red);
}
.nogi-section .nogi-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--nogi-red);
}

/* Drop meta tag styling */
.nogi-tag {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--nogi-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nogi-text);
  border-radius: 0 !important;
}
.nogi-tag--red {
  background: var(--nogi-red);
  border-color: var(--nogi-red);
  color: #fff;
}

/* Buttons/Hummingbird overrides (page product, cart, etc) */
.btn-primary {
  background: var(--nogi-red) !important;
  border-color: var(--nogi-red) !important;
  border-radius: 0 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.btn-primary:hover {
  background: #fff !important;
  color: var(--nogi-red) !important;
  border-color: #fff !important;
}

/* ====================================================================
   NOGI v3 — Hero status dot (drop indicator) + tighter typography
   ==================================================================== */
.nogi-hero__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--nogi-red, #B5121B);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(181, 18, 27, 0.18);
}

.nogi-hero__title {
  font-family: var(--font-display, 'Bebas Neue') !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  line-height: 0.92;
  text-transform: uppercase;
}

.nogi-hero__title em {
  color: var(--nogi-red, #B5121B);
  font-style: normal;
}

/* Tighter values */
.nogi-value {
  border-left: 2px solid var(--nogi-red, #B5121B);
  padding-left: var(--s-3);
  margin-bottom: var(--s-4);
}

.nogi-value__num {
  font-family: var(--font-mono, 'JetBrains Mono') !important;
  letter-spacing: 0.2em;
  color: var(--nogi-red, #B5121B);
}

/* Manifesto edge accent */
.nogi-manifesto {
  border-top: 1px solid var(--nogi-border, rgba(255,255,255,0.06));
  border-bottom: 1px solid var(--nogi-border, rgba(255,255,255,0.06));
  background: linear-gradient(180deg, rgba(181, 18, 27, 0.04) 0%, transparent 50%, rgba(181, 18, 27, 0.04) 100%);
}

/* Categories big labels */
.nogi-category__media {
  border: 1px solid var(--nogi-border, rgba(255,255,255,0.06));
}

/* Drop card accent */
.nogi-card {
  position: relative;
}

.nogi-card:hover {
  border-color: var(--nogi-red, #B5121B) !important;
}
/* === TEMPORARY DEBUG OVERRIDE REMOVED === */