/* HATE storefront layer: warm gunmetal, bone highlights and restrained rust.
   The launcher identity is carried by the original art, not full-screen effects. */

[data-style-preset="hate-launcher"] {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  color-scheme: dark;
  background: var(--bg) !important;
  font-feature-settings: "ss01" 1, "cv02" 1;
}

[data-style-preset="hate-launcher"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9,7,6,.42), rgba(9,7,6,.02) 48%, rgba(9,7,6,.24)),
    linear-gradient(180deg, rgba(9,7,6,0), rgba(9,7,6,.30));
}

[data-style-preset="hate-launcher"] .display-A {
  font-family: "Russo One", "Exo 2", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .018em !important;
}

[data-style-preset="hate-launcher"] ::selection {
  color: #1a0d09;
  background: var(--accent2);
}

[data-style-preset="hate-launcher"] * {
  scrollbar-color: rgba(var(--accent-rgb),.42) rgba(0,0,0,.30);
}

[data-style-preset="hate-launcher"] ::-webkit-scrollbar-thumb {
  border: 2px solid rgba(0,0,0,.72);
  border-radius: 8px;
  background: rgba(var(--accent-rgb),.34);
}

/* The previous full-screen scan/grid layer is intentionally disabled. */
.hate-vfx,
.hate-scroll-progress,
.hate-status-rail {
  display: none !important;
}

[data-style-preset="hate-launcher"] .hellgate-ripple {
  display: none !important;
}

[data-style-preset="hate-launcher"] .hate-topbar {
  background: linear-gradient(90deg, rgba(8,7,7,.98), rgba(28,21,18,.95) 48%, rgba(8,7,7,.98)) !important;
  border-bottom: 1px solid rgba(var(--accent-rgb),.34) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.40), inset 0 -1px 0 rgba(240,210,173,.045) !important;
  backdrop-filter: blur(18px) saturate(.78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(.78) !important;
}

[data-style-preset="hate-launcher"] .hate-topbar img[alt="HATE"] {
  width: 72px !important;
  height: 46px !important;
  object-fit: contain !important;
  filter: brightness(1.08) contrast(1.06) !important;
}

[data-style-preset="hate-launcher"] input:focus,
[data-style-preset="hate-launcher"] textarea:focus,
[data-style-preset="hate-launcher"] select:focus {
  border-color: rgba(var(--accent-rgb),.68) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12) !important;
}

[data-style-preset="hate-launcher"] button:focus-visible,
[data-style-preset="hate-launcher"] a:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 3px;
}

[data-style-preset="hate-launcher"] .hate-back-top:hover {
  color: var(--btn-ink) !important;
  border-color: var(--accent) !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-d)) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.46), 0 0 26px rgba(var(--accent-rgb),.20) !important;
}

[data-style-preset="hate-launcher"] .hate-side-panel {
  border-color: rgba(var(--accent-rgb),.22) !important;
  background:
    linear-gradient(118deg, rgba(240,210,173,.035), transparent 34%),
    linear-gradient(160deg, rgba(31,25,22,.96), rgba(12,10,9,.93)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.29), inset 0 1px 0 rgba(240,210,173,.065) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: none !important;
}

[data-style-preset="hate-launcher"] .hate-side-panel::after {
  content: "";
  display: block !important;
  position: absolute;
  top: -1px;
  left: 14px;
  width: 58px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), transparent);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.20);
  pointer-events: none;
}

[data-style-preset="hate-launcher"] .hate-hero-panel {
  position: relative;
  border-color: rgba(var(--accent-rgb),.32) !important;
  border-radius: var(--card-radius) !important;
  background: linear-gradient(145deg, rgba(31,25,22,.97), rgba(9,8,8,.92)) !important;
  box-shadow: 0 32px 82px rgba(0,0,0,.44), inset 0 1px 0 rgba(240,210,173,.075), 0 0 0 1px rgba(0,0,0,.44) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: none !important;
}

[data-style-preset="hate-launcher"] .hate-hero-panel::before {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 6;
  top: -1px;
  left: 3%;
  width: 34%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), transparent);
  pointer-events: none;
}

[data-style-preset="hate-launcher"] .hate-hero-panel::after {
  display: none !important;
}

[data-style-preset="hate-launcher"] .hate-hero-media {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(var(--accent-rgb),.075), transparent 48%),
    linear-gradient(145deg, rgba(27,24,22,.90), rgba(8,8,8,.95)) !important;
}

[data-style-preset="hate-launcher"] .hate-hero-copy {
  background:
    radial-gradient(ellipse at 82% 110%, rgba(var(--accent-rgb),.21), transparent 48%),
    linear-gradient(145deg, rgba(40,30,25,.91), rgba(13,11,10,.96)) !important;
  border-left: 1px solid rgba(var(--accent-rgb),.26) !important;
}

[data-style-preset="hate-launcher"] .hate-hero-copy::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -96px;
  bottom: -118px;
  width: 430px;
  height: 430px;
  background: url('/images/hate/logo.png') center/contain no-repeat;
  opacity: .075;
  filter: sepia(.22) saturate(.7) brightness(1.26) contrast(1.12);
  transform: rotate(-7deg);
  pointer-events: none;
}

[data-style-preset="hate-launcher"] .hate-hero img {
  transition: transform .24s ease-out, filter .24s ease-out !important;
}

[data-style-preset="hate-launcher"] .hate-hero-panel:hover img {
  transform: none !important;
  filter: contrast(1.03) saturate(1) !important;
}

[data-style-preset="hate-launcher"] .hate-hero-copy h1 {
  line-height: 1.01 !important;
}

[data-style-preset="hate-launcher"] .hate-category-rail button {
  border-radius: 7px !important;
  clip-path: none !important;
}

/* Keep the one effect the user liked: a restrained silver sweep on card hover. */
[data-style-preset="hate-launcher"] .hate-product-card {
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--card-radius) !important;
  border-color: rgba(var(--accent-rgb),.20) !important;
  background:
    linear-gradient(125deg, rgba(240,210,173,.035), transparent 32%),
    linear-gradient(155deg, rgba(31,26,23,.96), rgba(11,10,9,.93)) !important;
  box-shadow: 0 15px 36px rgba(0,0,0,.27), inset 0 1px 0 rgba(240,210,173,.055) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: none !important;
  transition: transform .22s ease-out, border-color .22s ease-out, box-shadow .22s ease-out !important;
}

[data-style-preset="hate-launcher"] .hate-product-card::before {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  left: 12px;
  width: 42px;
  height: 1px;
  background: var(--accent2);
  opacity: .55;
  pointer-events: none;
  transition: width .28s ease-out, opacity .22s ease-out;
}

[data-style-preset="hate-launcher"] .hate-product-card::after {
  display: none !important;
}

[data-style-preset="hate-launcher"] .hate-product-card:hover {
  transform: none !important;
  border-color: rgba(var(--accent-rgb),.20) !important;
  background:
    linear-gradient(125deg, rgba(240,210,173,.035), transparent 32%),
    linear-gradient(155deg, rgba(31,26,23,.96), rgba(11,10,9,.93)) !important;
  box-shadow: 0 15px 36px rgba(0,0,0,.27), inset 0 1px 0 rgba(240,210,173,.055) !important;
}

[data-style-preset="hate-launcher"] .hate-product-card:hover::before {
  width: calc(100% - 24px);
  opacity: .92;
}

[data-style-preset="hate-launcher"] .hate-product-card img {
  transition: none !important;
}

[data-style-preset="hate-launcher"] .hate-product-card:hover img {
  transform: none !important;
  filter: none !important;
}

[data-style-preset="hate-launcher"] .hate-product-card button,
[data-style-preset="hate-launcher"] .hate-product-card [style*="backdrop-filter"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-style-preset="hate-launcher"] .hate-side-panel button:hover {
  border-color: rgba(var(--accent-rgb),.32) !important;
}

[data-style-preset="hate-launcher"] footer {
  border-color: rgba(var(--accent-rgb),.18) !important;
}

/* Optional player theme: Eclipse.
   Same HATE structure, rebuilt around obsidian, moonsteel and muted cobalt. */
[data-hate-skin="eclipse"] {
  --bg: #05070b !important;
  --bg2: #090d14 !important;
  --panel: #0e141e !important;
  --panel2: #162131 !important;
  --ink: #f1f4fa !important;
  --ink2: #bdc9da !important;
  --ink3: #8090a6 !important;
  --accent: #7fa5dc !important;
  --accent-rgb: 127,165,220 !important;
  --accent2: #e7efff !important;
  --accent-d: #34578d !important;
  --gold: #7fa5dc !important;
  --gold2: #e7efff !important;
  --gold-d: #34578d !important;
  --btn-ink: #f8fbff !important;
  --line: rgba(127,165,220,.24) !important;
  --line2: rgba(231,239,255,.08) !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] {
  background: #05070b !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"]::before {
  background:
    linear-gradient(90deg, rgba(4,7,12,.46), rgba(5,10,18,.03) 48%, rgba(4,7,12,.28)),
    linear-gradient(180deg, rgba(5,8,13,0), rgba(5,8,13,.34));
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-scene-bg {
  filter: grayscale(.48) saturate(.56) sepia(.10) hue-rotate(168deg) brightness(.93) contrast(1.10) !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-scene-wash {
  background:
    radial-gradient(ellipse 58% 31% at 50% 2%, rgba(127,165,220,.14), transparent 70%),
    radial-gradient(ellipse 34% 38% at 87% 55%, rgba(231,239,255,.055), transparent 72%),
    linear-gradient(180deg, rgba(5,8,13,.02) 0%, rgba(5,8,13,.17) 58%, rgba(5,8,13,.48) 100%) !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-topbar {
  background: linear-gradient(90deg, rgba(4,6,10,.98), rgba(14,23,36,.96) 48%, rgba(4,6,10,.98)) !important;
  border-bottom-color: rgba(127,165,220,.36) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.44), inset 0 -1px 0 rgba(231,239,255,.045) !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-side-panel {
  border-color: rgba(127,165,220,.22) !important;
  background:
    linear-gradient(118deg, rgba(231,239,255,.035), transparent 34%),
    linear-gradient(160deg, rgba(18,28,42,.97), rgba(7,10,16,.95)) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(231,239,255,.06) !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-side-panel::after,
[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-hero-panel::before {
  background: linear-gradient(90deg, var(--accent), var(--accent2), transparent);
  box-shadow: 0 0 18px rgba(127,165,220,.20);
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-hero-panel {
  border-color: rgba(127,165,220,.31) !important;
  background: linear-gradient(145deg, rgba(18,28,42,.98), rgba(5,8,13,.95)) !important;
  box-shadow: 0 32px 84px rgba(0,0,0,.48), inset 0 1px 0 rgba(231,239,255,.07), 0 0 0 1px rgba(0,0,0,.44) !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-hero-media {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(127,165,220,.085), transparent 48%),
    linear-gradient(145deg, rgba(16,24,35,.93), rgba(4,7,11,.97)) !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-hero-copy {
  background:
    radial-gradient(ellipse at 82% 110%, rgba(127,165,220,.22), transparent 48%),
    linear-gradient(145deg, rgba(22,33,49,.94), rgba(7,11,17,.97)) !important;
  border-left-color: rgba(127,165,220,.27) !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-hero-copy::before {
  opacity: .065;
  filter: grayscale(.6) sepia(.12) hue-rotate(170deg) saturate(.8) brightness(1.35) contrast(1.12);
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-product-card,
[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-product-card:hover {
  border-color: rgba(127,165,220,.20) !important;
  background:
    linear-gradient(125deg, rgba(231,239,255,.035), transparent 32%),
    linear-gradient(155deg, rgba(18,28,42,.97), rgba(6,9,14,.95)) !important;
  box-shadow: 0 15px 36px rgba(0,0,0,.32), inset 0 1px 0 rgba(231,239,255,.055) !important;
}

[data-style-preset="hate-launcher"][data-hate-skin="eclipse"] .hate-product-card::before {
  background: var(--accent2);
  box-shadow: 0 0 12px rgba(127,165,220,.18);
}

@media (max-width: 720px) {
  [data-style-preset="hate-launcher"] .hate-topbar img[alt="HATE"] {
    width: 56px !important;
    height: 38px !important;
  }

  [data-style-preset="hate-launcher"] .hate-hero-copy {
    border-left: 0 !important;
  }

  [data-style-preset="hate-launcher"] .hate-hero-copy::before {
    width: 280px;
    height: 280px;
    right: -82px;
    bottom: -88px;
    opacity: .04;
  }

  [data-style-preset="hate-launcher"] .hate-product-card::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-style-preset="hate-launcher"] .hate-product-card,
  [data-style-preset="hate-launcher"] .hate-product-card::before,
  [data-style-preset="hate-launcher"] .hate-product-card::after,
  [data-style-preset="hate-launcher"] .hate-product-card img {
    transition: none !important;
  }
}

/* ========================================================================== */
/* HATE / ECLIPSE ARCHIVE                                                     */
/* An independent storefront composition. Commerce state is shared; the UI is */
/* not a recolor of the launcher storefront.                                  */
/* ========================================================================== */

[data-style-preset="hate-eclipse"] {
  --e-bg: #05070b;
  --e-bg-soft: #09101a;
  --e-panel: #0b111b;
  --e-panel-raised: #101a29;
  --e-line: rgba(147, 178, 218, .19);
  --e-line-strong: rgba(174, 204, 242, .39);
  --e-ink: #f4f7fb;
  --e-copy: #b7c3d2;
  --e-muted: #718096;
  --e-blue: #95baf0;
  --e-blue-deep: #284d7b;
  --e-ice: #dceaff;
  --e-orange: #d96843;
  --e-green: #5fd6a2;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--e-ink);
  color-scheme: dark;
  background:
    radial-gradient(circle at 83% 9%, rgba(77, 112, 166, .12), transparent 28%),
    linear-gradient(180deg, #05070b 0%, #07101b 32%, #05070b 100%);
  font-family: "Manrope", "Exo 2", sans-serif;
  isolation: isolate;
}

[data-style-preset="hate-eclipse"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(149, 186, 240, .025) 1px, transparent 1px) 0 0 / 96px 100%,
    linear-gradient(rgba(149, 186, 240, .018) 1px, transparent 1px) 0 0 / 100% 96px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

[data-style-preset="hate-eclipse"] ::selection {
  color: #06101d;
  background: var(--e-ice);
}

[data-style-preset="hate-eclipse"] * {
  scrollbar-color: rgba(149, 186, 240, .46) rgba(3, 5, 8, .55);
}

[data-style-preset="hate-eclipse"] button:focus-visible,
[data-style-preset="hate-eclipse"] a:focus-visible,
[data-style-preset="hate-eclipse"] input:focus-visible {
  outline: 2px solid var(--e-ice);
  outline-offset: 3px;
}

.eclipse-scene {
  position: absolute;
  z-index: -2;
  top: 0;
  left: 50%;
  width: min(1920px, 145vw);
  height: 930px;
  transform: translateX(-50%);
  pointer-events: none;
  background: url('/og.png') center top / cover no-repeat;
  opacity: .34;
  filter: saturate(.78) contrast(1.08) brightness(.79);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.9) 42%, transparent 96%);
}

.eclipse-header {
  position: sticky;
  z-index: 70;
  top: 0;
  height: 78px;
  border-bottom: 1px solid rgba(159, 191, 231, .18);
  background: rgba(4, 7, 12, .94);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .28);
}

.eclipse-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--e-blue), transparent);
}

.eclipse-header-inner {
  width: min(1540px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto minmax(230px, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.eclipse-brand {
  min-width: 232px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.eclipse-brand img {
  width: 78px;
  height: 48px;
  object-fit: contain;
  filter: brightness(1.12) contrast(1.05) drop-shadow(0 0 16px rgba(197, 220, 255, .11));
}

.eclipse-brand > span {
  padding-left: 15px;
  border-left: 1px solid rgba(194, 215, 242, .19);
  display: grid;
  gap: 3px;
  line-height: 1;
}

.eclipse-brand b {
  color: var(--e-ink);
  font-family: "Russo One", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .12em;
}

.eclipse-brand small,
.eclipse-server small {
  color: var(--e-muted);
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: .16em;
}

.eclipse-nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
}

.eclipse-nav button,
.eclipse-nav a {
  position: relative;
  height: 100%;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: #93a0b1;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.eclipse-nav button::after,
.eclipse-nav a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--e-blue);
  transition: transform .18s ease;
}

.eclipse-nav button:hover,
.eclipse-nav a:hover {
  color: var(--e-ink);
}

.eclipse-nav button:hover::after,
.eclipse-nav a:hover::after {
  transform: scaleX(1);
}

.eclipse-search {
  width: min(360px, 100%);
  height: 42px;
  justify-self: end;
  padding: 0 13px;
  border: 1px solid rgba(164, 192, 228, .22);
  background: rgba(10, 17, 27, .72);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8796a9;
}

.eclipse-search:focus-within {
  border-color: rgba(169, 200, 240, .56);
  background: rgba(13, 23, 36, .94);
}

.eclipse-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--e-ink);
  font-size: 12px;
}

.eclipse-search input::placeholder {
  color: #677589;
}

.eclipse-search button {
  flex: 0 0 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #91a0b3;
}

.eclipse-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.eclipse-server,
.eclipse-square,
.eclipse-cart {
  height: 42px;
  border: 1px solid rgba(159, 191, 231, .20);
  background: rgba(9, 15, 24, .78);
  display: flex;
  align-items: center;
}

.eclipse-server {
  max-width: 205px;
  padding: 0 13px;
  gap: 9px;
}

.eclipse-server > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.eclipse-server b {
  max-width: 160px;
  overflow: hidden;
  color: #cad5e3;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eclipse-square {
  width: 42px;
  justify-content: center;
  color: #a5b1c1;
}

.eclipse-square img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
}

.eclipse-cart {
  padding: 0 16px;
  gap: 8px;
  border-color: rgba(204, 225, 252, .36);
  color: #08101c;
  background: var(--e-ice);
  font-size: 11px;
  font-weight: 800;
}

.eclipse-cart b {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #f6f8fc;
  background: #264d7b;
  font-size: 9px;
}

.eclipse-server:hover,
.eclipse-square:hover {
  color: var(--e-ink);
  border-color: rgba(176, 207, 245, .48);
  background: #101a29;
}

.eclipse-cart:hover {
  background: #fff;
}

.eclipse-main {
  position: relative;
  width: min(1480px, calc(100% - 56px));
  margin: 0 auto;
  padding: 54px 0 92px;
}

.eclipse-feature {
  position: relative;
  min-height: 594px;
  border: 1px solid rgba(161, 192, 231, .23);
  background: rgba(5, 8, 13, .90);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .45);
  display: grid;
  grid-template-columns: minmax(390px, .84fr) minmax(520px, 1.16fr);
  overflow: hidden;
}

.eclipse-feature::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 8, 13, .98) 0%, rgba(5, 8, 13, .93) 43%, rgba(5, 8, 13, .18) 70%, rgba(5, 8, 13, .63) 100%),
    url('/og.png') center / cover no-repeat;
  opacity: .55;
  filter: saturate(.76) contrast(1.09);
}

.eclipse-feature::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 34%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--e-ice));
}

.eclipse-feature-copy,
.eclipse-feature-art,
.eclipse-feature-selector {
  position: relative;
  z-index: 2;
}

.eclipse-feature-copy {
  padding: 54px 52px 48px;
  border-right: 1px solid rgba(154, 185, 224, .16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eclipse-overline {
  width: 100%;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(167, 198, 235, .17);
  display: flex;
  justify-content: space-between;
  color: #8090a5;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: .17em;
}

.eclipse-overline span {
  color: var(--e-blue);
}

.eclipse-feature-rarity {
  margin-top: 34px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.eclipse-feature-rarity span,
.eclipse-feature-rarity b {
  padding: 6px 8px;
  border: 1px solid rgba(186, 211, 244, .27);
  color: #d5e2f2;
  background: rgba(9, 16, 26, .66);
}

.eclipse-feature-rarity b {
  color: #fff3ec;
  border-color: rgba(217, 104, 67, .48);
  background: var(--e-orange);
}

.eclipse-feature-rarity em {
  color: #76869a;
  font-style: normal;
}

.eclipse-feature h1 {
  max-width: 570px;
  margin: 28px 0 14px;
  color: #f5f8fc;
  font-family: "Russo One", sans-serif;
  font-size: clamp(42px, 4vw, 68px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.eclipse-feature-copy > p {
  max-width: 560px;
  min-height: 48px;
  margin: 0;
  color: var(--e-copy);
  font-size: 13px;
  line-height: 1.72;
}

.eclipse-feature-meta {
  width: 100%;
  margin-top: auto;
  padding: 27px 0 22px;
  border-top: 1px solid rgba(160, 192, 230, .16);
  display: grid;
  grid-template-columns: 1.1fr 1fr .7fr;
}

.eclipse-feature-meta > div {
  padding: 0 18px;
  border-right: 1px solid rgba(160, 192, 230, .14);
  display: grid;
  gap: 7px;
}

.eclipse-feature-meta > div:first-child { padding-left: 0; }
.eclipse-feature-meta > div:last-child { border-right: 0; }

.eclipse-feature-meta small {
  color: #6d7c90;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.eclipse-feature-meta strong {
  color: #e6edf7;
  font-family: "Russo One", sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.eclipse-feature-buttons {
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 9px;
}

.eclipse-buy,
.eclipse-secondary,
.eclipse-link {
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.eclipse-buy {
  color: #07101b;
  background: var(--e-ice);
}

.eclipse-secondary {
  border: 1px solid rgba(179, 207, 241, .27);
  color: #d2deed;
  background: rgba(12, 20, 31, .75);
}

.eclipse-link {
  grid-column: 1 / -1;
  min-height: 34px;
  justify-content: flex-start;
  color: #8090a5;
}

.eclipse-link svg {
  transition: transform .18s ease;
}

.eclipse-link:hover {
  color: var(--e-ink);
}

.eclipse-link:hover svg {
  transform: translateX(5px);
}

.eclipse-buy:hover { background: #fff; }
.eclipse-secondary:hover { border-color: rgba(190, 216, 248, .52); background: #111d2d; }

.eclipse-feature-art {
  min-width: 0;
  padding: 54px 44px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eclipse-feature-art > img,
.eclipse-art-placeholder {
  width: 92%;
  height: 76%;
  max-height: 468px;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(0,0,0,.62));
}

.eclipse-art-placeholder {
  display: grid;
  place-items: center;
  color: #66788f;
}

.eclipse-art-index {
  position: absolute;
  top: 23px;
  right: 27px;
  color: rgba(218, 232, 250, .24);
  font-family: "Russo One", sans-serif;
  font-size: 27px;
  letter-spacing: .06em;
}

.eclipse-art-caption {
  position: absolute;
  right: 30px;
  bottom: 22px;
  left: 30px;
  display: flex;
  justify-content: space-between;
  color: #72839a;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: .15em;
}

.eclipse-feature-selector {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 60px;
  display: grid;
  gap: 6px;
}

.eclipse-feature-selector button {
  position: relative;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(169, 198, 235, .18);
  background: rgba(4, 8, 13, .82);
  display: grid;
  place-items: center;
  color: #64778e;
  overflow: hidden;
}

.eclipse-feature-selector button.active {
  border-color: var(--e-blue);
  background: #0f1a29;
}

.eclipse-feature-selector button > span {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 4px;
  color: #8798ac;
  font-family: "Share Tech Mono", monospace;
  font-size: 7px;
}

.eclipse-feature-selector img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.eclipse-category-dock {
  position: relative;
  z-index: 5;
  margin-top: 18px;
  min-height: 84px;
  border: 1px solid rgba(156, 187, 226, .17);
  background: rgba(6, 10, 17, .94);
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
}

.eclipse-category-label {
  padding: 0 24px;
  border-right: 1px solid rgba(156, 187, 226, .17);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.eclipse-category-label small {
  color: #68798f;
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.eclipse-category-label b {
  font-family: "Russo One", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
}

.eclipse-category-scroll {
  min-width: 0;
  padding: 12px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.eclipse-category-scroll button {
  flex: 0 0 auto;
  min-width: 136px;
  padding: 0 13px;
  border: 1px solid transparent;
  display: grid;
  grid-template-columns: 17px 1fr auto;
  align-items: center;
  gap: 8px;
  color: #8998aa;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}

.eclipse-category-scroll button em {
  color: #56667c;
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  font-style: normal;
}

.eclipse-category-scroll button:hover {
  color: #d8e4f3;
  border-color: rgba(164, 195, 234, .17);
  background: rgba(16, 27, 42, .66);
}

.eclipse-category-scroll button.active {
  color: #09111d;
  border-color: var(--e-ice);
  background: var(--e-ice);
}

.eclipse-category-scroll button.active em {
  color: #294665;
}

.eclipse-catalog {
  position: relative;
  z-index: 3;
  padding-top: 74px;
}

.eclipse-catalog-head {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(158, 188, 225, .18);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.eclipse-catalog-head > div:first-child > span {
  color: var(--e-blue);
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: .18em;
}

.eclipse-catalog-head h2 {
  margin: 10px 0 7px;
  color: #f4f7fb;
  font-family: "Russo One", sans-serif;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 400;
  line-height: 1;
}

.eclipse-catalog-head p {
  margin: 0;
  color: #718197;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: .08em;
}

.eclipse-sort {
  border: 1px solid rgba(160, 190, 227, .18);
  display: flex;
  background: rgba(5, 9, 15, .74);
}

.eclipse-sort button {
  min-height: 39px;
  padding: 0 15px;
  color: #78889c;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.eclipse-sort button + button {
  border-left: 1px solid rgba(160, 190, 227, .14);
}

.eclipse-sort button:hover {
  color: #d6e2f0;
  background: rgba(18, 29, 45, .66);
}

.eclipse-sort button.active {
  color: #08111d;
  background: var(--e-ice);
}

.eclipse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.eclipse-product-card {
  position: relative;
  min-width: 0;
  min-height: 475px;
  border: 1px solid rgba(152, 182, 219, .18);
  background: #080d15;
  cursor: pointer;
  overflow: hidden;
}

.eclipse-product-card::before {
  content: "";
  position: absolute;
  z-index: 9;
  top: -1px;
  left: -1px;
  width: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--e-blue), var(--e-ice));
  transition: width .34s cubic-bezier(.23, 1, .32, 1);
}

.eclipse-product-card:hover::before {
  width: calc(100% + 2px);
}

.eclipse-product-media {
  position: relative;
  height: 292px;
  border-bottom: 1px solid rgba(153, 184, 222, .15);
  background:
    radial-gradient(circle at 50% 52%, rgba(107, 145, 194, .13), transparent 38%),
    linear-gradient(150deg, #101927, #060a10 72%);
  overflow: hidden;
}

.eclipse-product-media::before,
.eclipse-product-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.eclipse-product-media::before {
  inset: 14px;
  border-top: 1px solid rgba(187, 212, 242, .22);
  border-left: 1px solid rgba(187, 212, 242, .22);
  clip-path: polygon(0 0, 42px 0, 42px 1px, 1px 1px, 1px 42px, 0 42px);
}

.eclipse-product-media::after {
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-right: 1px solid rgba(187, 212, 242, .22);
  border-bottom: 1px solid rgba(187, 212, 242, .22);
}

.eclipse-product-media > img,
.eclipse-product-placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 30px 34px 38px;
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, .56));
}

.eclipse-product-placeholder {
  display: grid;
  place-items: center;
  color: #62738a;
}

.eclipse-product-index {
  position: absolute;
  z-index: 3;
  top: 21px;
  left: 22px;
  color: #718197;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
}

.eclipse-mark {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(174, 202, 236, .22);
  background: rgba(5, 9, 14, .72);
  display: grid;
  place-items: center;
  color: #8d9caf;
}

.eclipse-mark:hover,
.eclipse-mark.active {
  color: var(--e-ink);
  border-color: rgba(190, 216, 248, .52);
  background: #142238;
}

.eclipse-mark.active svg { fill: currentColor; }

.eclipse-product-rarity {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 14px;
  left: 14px;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid rgba(174, 202, 236, .16);
  background: rgba(5, 9, 14, .78);
  display: flex;
  align-items: center;
  gap: 7px;
  color: #a5b3c4;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.eclipse-product-rarity i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 9px currentColor;
}

.eclipse-product-rarity b {
  margin-left: auto;
  color: #f4ae99;
  font-size: 8px;
}

.eclipse-product-body {
  min-height: 182px;
  padding: 20px 21px 18px;
  display: flex;
  flex-direction: column;
}

.eclipse-product-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
}

.eclipse-product-title > div {
  min-width: 0;
}

.eclipse-product-title small {
  display: block;
  margin-bottom: 7px;
  color: #65768c;
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.eclipse-product-title h3 {
  margin: 0;
  color: #edf2f8;
  font-family: "Russo One", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}

.eclipse-product-title > svg {
  flex: 0 0 auto;
  margin-top: 4px;
  color: #5e7189;
  transition: transform .18s ease, color .18s ease;
}

.eclipse-product-card:hover .eclipse-product-title > svg {
  transform: translateX(4px);
  color: var(--e-blue);
}

.eclipse-product-body > p {
  margin: 8px 0 18px;
  overflow: hidden;
  color: #8898ab;
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eclipse-product-footer {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(155, 186, 224, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eclipse-product-footer > strong {
  color: #f5f7fa;
  font-family: "Russo One", sans-serif;
  font-size: 19px;
  font-weight: 400;
}

.eclipse-product-footer > div {
  display: flex;
  gap: 6px;
}

.eclipse-add,
.eclipse-card-buy {
  height: 36px;
  border: 1px solid rgba(168, 198, 234, .22);
  display: grid;
  place-items: center;
}

.eclipse-add {
  width: 36px;
  color: #a4b3c5;
  background: #0b121d;
}

.eclipse-card-buy {
  min-width: 82px;
  padding: 0 14px;
  color: #07101b;
  border-color: var(--e-ice);
  background: var(--e-ice);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.eclipse-add:hover { color: var(--e-ink); border-color: rgba(186, 212, 244, .52); }
.eclipse-card-buy:hover { background: #fff; }

.eclipse-product-card button:disabled,
.eclipse-feature button:disabled,
.eclipse-load-more:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.eclipse-load-more {
  width: min(420px, 100%);
  height: 49px;
  margin: 28px auto 0;
  border: 1px solid rgba(165, 196, 234, .25);
  background: #0a111c;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #b6c4d6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.eclipse-load-more:hover {
  border-color: rgba(186, 212, 244, .52);
  color: #fff;
  background: #101b2b;
}

.eclipse-empty {
  min-height: 360px;
  border: 1px solid rgba(155, 185, 223, .18);
  background: #080d15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #718198;
  text-align: center;
}

.eclipse-empty h3 {
  margin: 16px 0 6px;
  color: #dce5f0;
  font-family: "Russo One", sans-serif;
  font-weight: 400;
}

.eclipse-empty p { margin: 0 0 20px; font-size: 11px; }
.eclipse-empty button { padding: 11px 18px; color: #07101b; background: var(--e-ice); font-size: 10px; font-weight: 800; }

.eclipse-footer {
  position: relative;
  z-index: 2;
  min-height: 118px;
  padding: 25px max(28px, calc((100vw - 1480px) / 2));
  border-top: 1px solid rgba(157, 188, 226, .17);
  background: #04070b;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

.eclipse-footer img {
  width: 86px;
  height: 56px;
  object-fit: contain;
  filter: brightness(1.06);
}

.eclipse-footer > div {
  display: grid;
  gap: 6px;
}

.eclipse-footer b {
  font-family: "Russo One", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .09em;
}

.eclipse-footer span,
.eclipse-footer small {
  color: #66768b;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: .08em;
}

.eclipse-footer a { color: #a9bbd1; }
.eclipse-footer a:hover { color: #fff; }

@media (max-width: 1260px) {
  .eclipse-header-inner {
    grid-template-columns: auto minmax(190px, 1fr) auto;
    gap: 18px;
  }

  .eclipse-nav { display: none; }
  .eclipse-brand { min-width: 210px; }
  .eclipse-feature { grid-template-columns: minmax(350px, .88fr) minmax(440px, 1.12fr); }
  .eclipse-feature-copy { padding: 46px 38px 40px; }
}

@media (max-width: 1040px) {
  .eclipse-header { height: auto; min-height: 78px; }

  .eclipse-header-inner {
    width: min(100% - 32px, 900px);
    min-height: 78px;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 10px 0;
  }

  .eclipse-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-self: stretch;
  }

  .eclipse-main { width: min(100% - 32px, 900px); padding-top: 30px; }

  .eclipse-feature {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .eclipse-feature::before {
    background:
      linear-gradient(180deg, rgba(5, 8, 13, .70), rgba(5, 8, 13, .95) 60%),
      url('/og.png') center top / cover no-repeat;
  }

  .eclipse-feature-copy {
    min-height: 520px;
    border-right: 0;
    border-bottom: 1px solid rgba(154, 185, 224, .16);
  }

  .eclipse-feature-art { min-height: 470px; }
  .eclipse-feature-art > img,
  .eclipse-art-placeholder { max-height: 390px; }
  .eclipse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .eclipse-catalog-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .eclipse-scene {
    width: 170vw;
    height: 690px;
    opacity: .24;
    background-position: 58% top;
  }

  .eclipse-header-inner {
    width: calc(100% - 22px);
    min-height: 66px;
    grid-template-columns: 1fr auto;
  }

  .eclipse-brand { min-width: 0; gap: 8px; }
  .eclipse-brand img { width: 62px; height: 40px; }
  .eclipse-brand > span { padding-left: 9px; }
  .eclipse-brand b { font-size: 12px; }
  .eclipse-brand small { font-size: 7px; }

  .eclipse-actions { gap: 5px; }
  .eclipse-server { width: 39px; padding: 0; justify-content: center; }
  .eclipse-square { width: 39px; }
  .eclipse-cart { width: 39px; padding: 0; justify-content: center; }
  .eclipse-cart > span { display: none; }
  .eclipse-cart b { position: absolute; margin: -30px -31px 0 0; }

  .eclipse-search { height: 39px; }
  .eclipse-main { width: calc(100% - 22px); padding: 18px 0 60px; }

  .eclipse-feature-copy {
    min-height: 0;
    padding: 28px 20px 24px;
  }

  .eclipse-feature h1 {
    margin-top: 20px;
    font-size: clamp(34px, 11vw, 48px);
  }

  .eclipse-feature-copy > p { min-height: 0; font-size: 11px; }
  .eclipse-feature-rarity { margin-top: 22px; }
  .eclipse-feature-meta { margin-top: 28px; }
  .eclipse-feature-meta strong { font-size: 14px; }
  .eclipse-feature-meta > div { padding: 0 8px; }
  .eclipse-feature-buttons { grid-template-columns: 1fr; }
  .eclipse-link { grid-column: auto; }

  .eclipse-feature-art {
    min-height: 355px;
    padding: 50px 25px;
  }

  .eclipse-feature-art > img,
  .eclipse-art-placeholder { width: 100%; height: 82%; }
  .eclipse-art-caption { right: 16px; left: 16px; font-size: 7px; }

  .eclipse-feature-selector {
    right: 14px;
    bottom: 50px;
    grid-template-columns: repeat(5, 42px);
  }

  .eclipse-feature-selector button { width: 42px; height: 42px; }
  .eclipse-category-dock { grid-template-columns: 1fr; }
  .eclipse-category-label { min-height: 56px; border-right: 0; border-bottom: 1px solid rgba(156, 187, 226, .17); }
  .eclipse-category-scroll { padding: 8px; }
  .eclipse-category-scroll button { min-width: 128px; min-height: 45px; }

  .eclipse-catalog { padding-top: 52px; }
  .eclipse-catalog-head { margin-bottom: 20px; padding-bottom: 18px; gap: 20px; }
  .eclipse-catalog-head h2 { font-size: 31px; }

  .eclipse-sort {
    width: 100%;
    overflow-x: auto;
  }

  .eclipse-sort button { flex: 0 0 auto; }
  .eclipse-grid { grid-template-columns: 1fr; gap: 12px; }
  .eclipse-product-card { min-height: 450px; }
  .eclipse-product-media { height: 280px; }

  .eclipse-footer {
    padding: 24px 18px;
    grid-template-columns: auto 1fr;
  }

  .eclipse-footer img { width: 68px; }
  .eclipse-footer > small { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .eclipse-brand > span { display: none; }
  .eclipse-feature-selector { grid-template-columns: repeat(5, 38px); }
  .eclipse-feature-selector button { width: 38px; height: 38px; }
  .eclipse-feature-meta { grid-template-columns: 1.1fr 1fr .65fr; }
  .eclipse-product-media { height: 258px; }
}

@media (prefers-reduced-motion: reduce) {
  .eclipse-product-card::before,
  .eclipse-product-title > svg,
  .eclipse-nav button::after,
  .eclipse-nav a::after,
  .eclipse-link svg {
    transition: none !important;
  }
}

/* ========================================================================== */
/* HATE / POSTER STORE — second theme built from a blank canvas                */
/* ========================================================================== */

[data-style-preset="hate-poster"] {
  --p-paper: #eeeade;
  --p-paper-2: #ddd6c7;
  --p-ink: #101010;
  --p-orange: #ee542e;
  --p-blue: #3156e8;
  --p-lime: #d8ff47;
  --p-white: #fffdf7;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--p-ink);
  background: var(--p-paper);
  font-family: "Manrope", sans-serif;
  isolation: isolate;
}

[data-style-preset="hate-poster"] ::selection {
  color: var(--p-white);
  background: var(--p-blue);
}

[data-style-preset="hate-poster"] button:focus-visible,
[data-style-preset="hate-poster"] a:focus-visible,
[data-style-preset="hate-poster"] input:focus-visible {
  outline: 3px solid var(--p-lime);
  outline-offset: 3px;
}

[data-style-preset="hate-poster"] * {
  scrollbar-color: var(--p-orange) var(--p-ink);
}

.poster-header {
  position: sticky;
  z-index: 80;
  top: 0;
  min-height: 74px;
  padding: 0 max(24px, calc((100vw - 1600px) / 2));
  border-bottom: 1px solid rgba(255,255,255,.22);
  display: grid;
  grid-template-columns: 92px 170px auto minmax(180px, 320px) auto;
  align-items: center;
  gap: 22px;
  color: var(--p-white);
  background: rgba(12, 12, 12, .97);
}

.poster-logo {
  align-self: stretch;
  border-right: 1px solid rgba(255,255,255,.2);
  display: grid;
  place-items: center;
}

.poster-logo img {
  width: 74px;
  height: 48px;
  object-fit: contain;
  filter: brightness(1.12) contrast(1.06);
}

.poster-wordmark {
  display: grid;
  gap: 2px;
  line-height: 1;
}

.poster-wordmark b {
  font-family: "Russo One", sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.02em;
}

.poster-wordmark span {
  color: #aaa8a1;
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  letter-spacing: .23em;
}

.poster-nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-nav button,
.poster-nav a {
  height: 100%;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  color: #c2beb4;
  font-size: 11px;
  font-weight: 700;
}

.poster-nav button:hover,
.poster-nav a:hover {
  color: var(--p-lime);
}

.poster-search {
  height: 40px;
  padding: 0 2px 0 12px;
  border-bottom: 1px solid #76746e;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #aaa8a1;
}

.poster-search:focus-within {
  border-color: var(--p-lime);
}

.poster-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--p-white);
  background: transparent;
  font-size: 12px;
}

.poster-search input::placeholder { color: #7e7b74; }
.poster-search button { width: 30px; height: 30px; display: grid; place-items: center; }

.poster-header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

.poster-server,
.poster-icon-button,
.poster-bag {
  height: 40px;
  border: 1px solid rgba(255,255,255,.21);
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-server {
  max-width: 155px;
  padding: 0 11px;
  gap: 8px;
}

.poster-server span:last-child {
  max-width: 115px;
  overflow: hidden;
  color: #b8b4ab;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poster-icon-button { width: 40px; color: #d8d5ce; }
.poster-icon-button img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }

.poster-bag {
  min-width: 116px;
  padding: 0 5px 0 14px;
  justify-content: space-between;
  color: var(--p-ink);
  border-color: var(--p-lime);
  background: var(--p-lime);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.poster-bag b {
  width: 31px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--p-white);
  background: var(--p-ink);
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
}

.poster-server:hover,
.poster-icon-button:hover { color: var(--p-lime); border-color: var(--p-lime); }
.poster-bag:hover { color: var(--p-white); background: var(--p-blue); border-color: var(--p-blue); }

.poster-app > main {
  background: var(--p-paper);
}

.poster-cover {
  position: relative;
  width: min(1600px, 100%);
  min-height: 730px;
  margin: 0 auto;
  padding-bottom: 94px;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(400px, .78fr);
  color: var(--p-white);
  background: var(--p-ink);
}

.poster-cover-art {
  position: relative;
  min-width: 0;
  min-height: 636px;
  overflow: hidden;
  background: #090909;
}

.poster-cover-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.poster-cover-stamp {
  position: absolute;
  top: 26px;
  left: 27px;
  width: 88px;
  height: 88px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--p-white);
  background: rgba(10,10,10,.33);
  transform: rotate(-9deg);
}

.poster-cover-stamp span { font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.poster-cover-stamp b { font-family: "Russo One", sans-serif; font-size: 15px; font-weight: 400; }

.poster-drop-card {
  min-width: 0;
  min-height: 636px;
  display: grid;
  grid-template-rows: auto minmax(230px, .9fr) auto;
  color: #141414;
  background: var(--p-orange);
}

.poster-drop-kicker {
  min-height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.poster-drop-kicker b { font-weight: 400; }

.poster-drop-product {
  position: relative;
  min-height: 250px;
  border-bottom: 1px solid rgba(0,0,0,.4);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.poster-drop-product::before {
  content: "NEW";
  position: absolute;
  left: -4px;
  bottom: -31px;
  color: rgba(255,255,255,.12);
  font-family: "Russo One", sans-serif;
  font-size: 132px;
  line-height: .8;
}

.poster-drop-product img {
  position: relative;
  z-index: 1;
  width: 88%;
  height: 90%;
  max-height: 285px;
  object-fit: contain;
  filter: drop-shadow(0 25px 24px rgba(32,8,2,.38));
}

.poster-drop-copy { padding: 24px 24px 26px; }
.poster-drop-copy > small { font-family: "Share Tech Mono", monospace; font-size: 8px; letter-spacing: .1em; }

.poster-drop-copy h1 {
  margin: 9px 0 8px;
  font-family: "Russo One", sans-serif;
  font-size: clamp(26px, 2.4vw, 39px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
}

.poster-drop-copy > p {
  min-height: 36px;
  margin: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.poster-drop-price {
  margin-top: 19px;
  padding-top: 17px;
  border-top: 1px solid rgba(0,0,0,.35);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.poster-drop-price strong { font-family: "Russo One", sans-serif; font-size: 25px; font-weight: 400; }
.poster-drop-price span { padding-bottom: 2px; font-family: "Share Tech Mono", monospace; font-size: 8px; text-transform: uppercase; }

.poster-drop-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr 44px; gap: 7px; }
.poster-drop-buy,
.poster-drop-more { height: 44px; border: 1px solid #111; display: flex; align-items: center; justify-content: center; }
.poster-drop-buy { padding: 0 15px; justify-content: space-between; color: var(--p-white); background: var(--p-ink); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.poster-drop-more { color: var(--p-ink); }
.poster-drop-buy:hover { color: var(--p-ink); background: var(--p-lime); }
.poster-drop-more:hover { color: var(--p-white); background: var(--p-blue); border-color: var(--p-blue); }

.poster-drop-switcher {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 94px;
  border-top: 1px solid #3a3935;
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: stretch;
  color: var(--p-white);
  background: var(--p-ink);
}

.poster-drop-switcher > span {
  padding: 0 28px;
  border-right: 1px solid #3a3935;
  display: flex;
  align-items: center;
  color: #a7a39a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.poster-drop-switcher > div { display: flex; overflow-x: auto; }
.poster-drop-switcher button { position: relative; flex: 0 0 110px; border-right: 1px solid #3a3935; display: grid; place-items: center; color: #8f8b82; overflow: hidden; }
.poster-drop-switcher button i { position: absolute; top: 8px; left: 9px; font-family: "Share Tech Mono", monospace; font-size: 7px; font-style: normal; }
.poster-drop-switcher button img { width: 76%; height: 76%; object-fit: contain; }
.poster-drop-switcher button.active { color: var(--p-ink); background: var(--p-lime); }
.poster-drop-switcher button.active::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 7px; height: 7px; background: var(--p-blue); }

.poster-category-ribbon {
  min-height: 164px;
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  color: var(--p-white);
  background: var(--p-blue);
}

.poster-ribbon-title {
  padding: 28px max(24px, calc((100vw - 1600px) / 2));
  padding-right: 28px;
  border-right: 1px solid rgba(255,255,255,.38);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

.poster-ribbon-title span { color: #c4ceff; font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.poster-ribbon-title b { font-family: "Russo One", sans-serif; font-size: 24px; font-weight: 400; }

.poster-ribbon-scroll {
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
}

.poster-ribbon-scroll button {
  position: relative;
  flex: 0 0 auto;
  min-width: 205px;
  padding: 24px 26px;
  border-right: 1px solid rgba(255,255,255,.38);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.73);
  font-family: "Russo One", sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.poster-ribbon-scroll button sup { position: absolute; top: 22px; right: 18px; font-family: "Share Tech Mono", monospace; font-size: 8px; }
.poster-ribbon-scroll button:hover { color: var(--p-lime); }
.poster-ribbon-scroll button.active { color: var(--p-ink); background: var(--p-lime); }

.poster-catalog {
  width: min(1500px, calc(100% - 56px));
  margin: 0 auto;
  padding: 94px 0 110px;
}

.poster-catalog-heading {
  margin-bottom: 34px;
  padding-bottom: 22px;
  border-bottom: 3px solid var(--p-ink);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: end;
  gap: 30px;
}

.poster-catalog-heading > div:first-child > span {
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: .16em;
}

.poster-catalog-heading h2 {
  margin: 10px 0 0;
  font-family: "Russo One", sans-serif;
  font-size: clamp(42px, 5.2vw, 78px);
  font-weight: 400;
  line-height: .83;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.poster-catalog-heading > p {
  margin: 0;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  white-space: nowrap;
}

.poster-sort {
  display: flex;
  align-items: center;
  gap: 4px;
}

.poster-sort button {
  height: 35px;
  padding: 0 13px;
  border: 1px solid var(--p-ink);
  border-radius: 18px;
  color: var(--p-ink);
  font-size: 9px;
  font-weight: 800;
}

.poster-sort button:hover { color: var(--p-white); background: var(--p-blue); border-color: var(--p-blue); }
.poster-sort button.active { color: var(--p-ink); background: var(--p-lime); }

.poster-product-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.poster-product {
  position: relative;
  grid-column: span 4;
  min-width: 0;
  min-height: 535px;
  border: 2px solid var(--p-ink);
  display: grid;
  grid-template-rows: 330px 1fr;
  color: var(--p-ink);
  background: var(--p-white);
  cursor: pointer;
  overflow: hidden;
}

.poster-product::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: -2px;
  left: -2px;
  width: 0;
  height: 5px;
  pointer-events: none;
  background: var(--p-orange);
  transition: width .33s cubic-bezier(.23,1,.32,1);
}

.poster-product:hover::before { width: calc(100% + 4px); }

.poster-product--wide {
  grid-column: span 8;
  grid-template-columns: 1.28fr .72fr;
  grid-template-rows: 535px;
}

.poster-product--blue {
  color: var(--p-white);
  border-color: var(--p-blue);
  background: var(--p-blue);
}

.poster-product--ink {
  color: var(--p-white);
  background: var(--p-ink);
}

.poster-product-visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-bottom: 2px solid currentColor;
  background: var(--p-paper-2);
  overflow: hidden;
}

.poster-product--wide .poster-product-visual { border-right: 2px solid currentColor; border-bottom: 0; }
.poster-product--blue .poster-product-visual { background: #bdcaff; }
.poster-product--ink .poster-product-visual { background: #292927; }

.poster-product-visual > img,
.poster-product-placeholder {
  width: 100%;
  height: 100%;
  padding: 38px 38px 51px;
  object-fit: contain;
  filter: drop-shadow(0 23px 16px rgba(0,0,0,.23));
}

.poster-product-placeholder { display: grid; place-items: center; }

.poster-product-number {
  position: absolute;
  z-index: 2;
  top: 19px;
  left: 20px;
  font-family: "Russo One", sans-serif;
  font-size: 18px;
}

.poster-favorite {
  position: absolute;
  z-index: 3;
  top: 13px;
  right: 13px;
  width: 42px;
  height: 42px;
  border: 2px solid #111;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #111;
  background: rgba(255,253,247,.64);
}

.poster-favorite:hover,
.poster-favorite.active { color: var(--p-white); background: var(--p-orange); border-color: var(--p-orange); }
.poster-favorite.active svg { fill: currentColor; }

.poster-product-label {
  position: absolute;
  right: 14px;
  bottom: 13px;
  left: 14px;
  min-height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #111;
  background: rgba(255,253,247,.88);
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.poster-product-label i { width: 6px; height: 6px; border-radius: 50%; }
.poster-product-label b { margin-left: auto; color: var(--p-orange); }

.poster-product-info {
  min-width: 0;
  padding: 22px 21px 19px;
  display: flex;
  flex-direction: column;
}

.poster-product-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.poster-product-heading > div { min-width: 0; }
.poster-product-heading small { display: block; margin-bottom: 7px; font-family: "Share Tech Mono", monospace; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; opacity: .62; }
.poster-product-heading h3 { margin: 0; font-family: "Russo One", sans-serif; font-size: 18px; font-weight: 400; line-height: 1.1; }
.poster-product-heading strong { flex: 0 0 auto; font-family: "Russo One", sans-serif; font-size: 18px; font-weight: 400; white-space: nowrap; }

.poster-product-info > p {
  margin: 11px 0 17px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.5;
  opacity: .68;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poster-product-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.poster-product-cart,
.poster-product-buy { height: 40px; padding: 0 13px; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.poster-product-buy { justify-content: space-between; color: var(--p-white); background: var(--p-ink); }
.poster-product--blue .poster-product-buy,
.poster-product--ink .poster-product-buy { color: var(--p-ink); background: var(--p-lime); border-color: var(--p-lime); }
.poster-product-cart:hover { color: var(--p-white); background: var(--p-orange); border-color: var(--p-orange); }
.poster-product-buy:hover { color: var(--p-white); background: var(--p-blue); border-color: var(--p-blue); }
.poster-product button:disabled { cursor: not-allowed; opacity: .42; }

.poster-load-more {
  width: 100%;
  height: 72px;
  margin-top: 15px;
  padding: 0 25px;
  border: 2px solid var(--p-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--p-ink);
  background: var(--p-lime);
  font-family: "Russo One", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
}

.poster-load-more:hover { color: var(--p-white); background: var(--p-orange); }

.poster-empty {
  min-height: 430px;
  border: 3px solid var(--p-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.poster-empty > span { font-family: "Share Tech Mono", monospace; font-size: 10px; letter-spacing: .2em; }
.poster-empty h3 { margin: 18px 0 8px; font-family: "Russo One", sans-serif; font-size: 42px; font-weight: 400; text-transform: uppercase; }
.poster-empty p { margin: 0 0 25px; font-size: 11px; }
.poster-empty button { padding: 13px 20px; color: var(--p-white); background: var(--p-blue); font-size: 9px; font-weight: 900; text-transform: uppercase; }

.poster-footer {
  min-height: 150px;
  padding: 30px max(28px, calc((100vw - 1500px) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 25px;
  color: var(--p-white);
  background: var(--p-ink);
}

.poster-footer-mark { display: flex; align-items: center; gap: 14px; }
.poster-footer-mark img { width: 86px; height: 55px; object-fit: contain; }
.poster-footer-mark b { font-family: "Russo One", sans-serif; font-size: 24px; font-weight: 400; }
.poster-footer p { color: #aaa69d; font-size: 10px; text-align: center; }
.poster-footer > div:last-child { justify-self: end; display: flex; gap: 19px; color: #aaa69d; font-family: "Share Tech Mono", monospace; font-size: 9px; }
.poster-footer a:hover { color: var(--p-lime); }

@media (max-width: 1240px) {
  .poster-header { grid-template-columns: 80px auto minmax(170px, 280px) auto; }
  .poster-wordmark { display: none; }
  .poster-cover { grid-template-columns: minmax(0, 1.35fr) minmax(360px, .75fr); }
  .poster-product { grid-column: span 6; }
  .poster-product--wide { grid-column: span 12; }
}

@media (max-width: 980px) {
  .poster-header { padding: 0 16px; grid-template-columns: 70px 1fr auto; gap: 12px; }
  .poster-nav { display: none; }
  .poster-search { grid-column: 2; }
  .poster-cover { min-height: 0; padding-bottom: 88px; grid-template-columns: 1fr; }
  .poster-cover-art { min-height: 520px; }
  .poster-drop-card { min-height: 0; grid-template-columns: .9fr 1.1fr; grid-template-rows: 55px 440px; }
  .poster-drop-kicker { grid-column: 1 / -1; }
  .poster-drop-product { min-height: 0; border-right: 1px solid rgba(0,0,0,.4); }
  .poster-drop-copy { display: flex; flex-direction: column; justify-content: center; }
  .poster-drop-switcher { height: 88px; }
  .poster-category-ribbon { grid-template-columns: 190px minmax(0,1fr); }
  .poster-catalog-heading { grid-template-columns: 1fr auto; }
  .poster-sort { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .poster-header { min-height: 118px; padding: 9px 11px; grid-template-columns: 58px 1fr; grid-template-rows: 48px 44px; gap: 7px 10px; }
  .poster-logo { grid-row: 1; align-self: stretch; }
  .poster-logo img { width: 52px; height: 38px; }
  .poster-search { grid-column: 1 / -1; grid-row: 2; }
  .poster-header-actions { grid-column: 2; grid-row: 1; }
  .poster-server { width: 38px; padding: 0; }
  .poster-icon-button { width: 38px; }
  .poster-bag { min-width: 62px; padding-left: 5px; }
  .poster-bag span { display: none; }

  .poster-cover { padding-bottom: 72px; }
  .poster-cover-art { min-height: 300px; }
  .poster-cover-stamp { top: 14px; left: 14px; width: 65px; height: 65px; }
  .poster-drop-card { grid-template-columns: 1fr; grid-template-rows: 50px 280px auto; }
  .poster-drop-kicker { grid-column: auto; }
  .poster-drop-product { border-right: 0; }
  .poster-drop-copy { padding: 22px 18px 24px; }
  .poster-drop-copy h1 { font-size: 31px; }
  .poster-drop-switcher { height: 72px; grid-template-columns: 112px 1fr; }
  .poster-drop-switcher > span { padding: 0 12px; font-size: 7px; }
  .poster-drop-switcher button { flex-basis: 72px; }

  .poster-category-ribbon { min-height: 132px; grid-template-columns: 1fr; }
  .poster-ribbon-title { min-height: 70px; padding: 13px 16px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.38); }
  .poster-ribbon-title b { font-size: 20px; }
  .poster-ribbon-scroll button { min-width: 155px; min-height: 74px; padding: 16px; font-size: 14px; }

  .poster-catalog { width: calc(100% - 22px); padding: 58px 0 70px; }
  .poster-catalog-heading { grid-template-columns: 1fr; gap: 16px; }
  .poster-catalog-heading h2 { font-size: 43px; }
  .poster-sort { width: 100%; overflow-x: auto; }
  .poster-sort button { flex: 0 0 auto; }

  .poster-product-grid { gap: 10px; }
  .poster-product,
  .poster-product--wide { grid-column: span 12; min-height: 500px; grid-template-columns: 1fr; grid-template-rows: 305px 1fr; }
  .poster-product--wide .poster-product-visual { border-right: 0; border-bottom: 2px solid currentColor; }
  .poster-product-actions { grid-template-columns: 1fr 1fr; }
  .poster-load-more { height: 60px; }

  .poster-footer { grid-template-columns: 1fr; text-align: center; }
  .poster-footer-mark { justify-content: center; }
  .poster-footer > div:last-child { justify-self: center; }
}

@media (max-width: 390px) {
  .poster-icon-button:first-of-type { display: none; }
  .poster-product-heading { flex-direction: column; gap: 8px; }
  .poster-product-info > p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

@media (prefers-reduced-motion: reduce) {
  .poster-product::before { transition: none !important; }
}

/* ========================================================================== */
/* HATE / CINEMA — full-bleed, restrained and built around the HATE artwork   */
/* ========================================================================== */

[data-style-preset="hate-cinema"] {
  --c-bg: #060606;
  --c-bg-2: #0b0b0b;
  --c-panel: #11110f;
  --c-bone: #eee9df;
  --c-copy: #aaa59d;
  --c-muted: #6f6d69;
  --c-line: rgba(238, 233, 223, .15);
  --c-rust: #b85b42;
  --c-rust-bright: #d77758;
  --c-steel: #7287a4;
  position: relative;
  min-height: 100vh;
  overflow: visible;
  overflow-x: clip;
  color: var(--c-bone);
  background: var(--c-bg);
  font-family: "Manrope", "Exo 2", sans-serif;
  color-scheme: dark;
}

[data-style-preset="hate-cinema"] ::selection { color: #090909; background: var(--c-bone); }
[data-style-preset="hate-cinema"] * { scrollbar-color: rgba(184,91,66,.62) #080808; }
[data-style-preset="hate-cinema"] button:focus-visible,
[data-style-preset="hate-cinema"] a:focus-visible,
[data-style-preset="hate-cinema"] input:focus-visible { outline: 2px solid var(--c-bone); outline-offset: 3px; }

.cinema-header {
  position: sticky;
  z-index: 90;
  top: 0;
  min-height: 76px;
  padding: 0 max(26px, calc((100vw - 1600px) / 2));
  border-bottom: 1px solid rgba(238,233,223,.13);
  display: grid;
  grid-template-columns: 112px auto minmax(210px, 340px) auto;
  align-items: center;
  gap: 30px;
  background: rgba(5,5,5,.97);
  box-shadow: 0 12px 40px rgba(0,0,0,.24);
}

.cinema-logo {
  height: 100%;
  border-right: 1px solid var(--c-line);
  display: flex;
  align-items: center;
}

.cinema-logo img { width: 80px; height: 50px; object-fit: contain; filter: brightness(1.08) contrast(1.04); }

.cinema-nav { height: 100%; display: flex; align-items: center; gap: 2px; }
.cinema-nav button,
.cinema-nav a { position: relative; height: 100%; padding: 0 16px; display: inline-flex; align-items: center; color: #918e88; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cinema-nav button::after,
.cinema-nav a::after { content:""; position:absolute; right:16px; bottom:-1px; left:16px; height:2px; transform:scaleX(0); transform-origin:left; background:var(--c-rust-bright); transition:transform .2s ease; }
.cinema-nav button:hover,
.cinema-nav a:hover { color: var(--c-bone); }
.cinema-nav button:hover::after,
.cinema-nav a:hover::after { transform: scaleX(1); }

.cinema-search {
  height: 39px;
  padding: 0 4px 0 12px;
  border-bottom: 1px solid rgba(238,233,223,.32);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #77746f;
}

.cinema-search:focus-within { border-color: var(--c-bone); }
.cinema-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--c-bone); background: transparent; font-size: 11px; }
.cinema-search input::placeholder { color: #686661; }
.cinema-search button { width: 28px; height: 28px; display: grid; place-items: center; }

.cinema-header-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.cinema-server,
.cinema-icon,
.cinema-cart { height: 40px; border: 1px solid rgba(238,233,223,.17); display: flex; align-items: center; justify-content: center; color: #b5b1aa; background: #090909; }
.cinema-server { max-width: 170px; padding: 0 12px; gap: 8px; }
.cinema-server span:last-child { max-width: 125px; overflow: hidden; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cinema-icon { width: 40px; }
.cinema-icon img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.cinema-cart { position: relative; min-width: 114px; padding: 0 13px; gap: 8px; color: #111; border-color: var(--c-bone); background: var(--c-bone); font-size: 10px; font-weight: 800; }
.cinema-cart b { min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; color: var(--c-bone); background: #111; font-size: 8px; }
.cinema-server:hover,
.cinema-icon:hover { color: var(--c-bone); border-color: rgba(238,233,223,.42); }
.cinema-cart:hover { color: #fff; border-color: var(--c-rust); background: var(--c-rust); }

.cinema-hero {
  position: relative;
  width: min(1800px, 100%);
  height: max(720px, calc(100vh - 76px));
  min-height: 720px;
  max-height: 940px;
  margin: 0 auto;
  overflow: hidden;
  background: #070707;
}

.cinema-hero-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.78) contrast(1.07) brightness(.83);
}

.cinema-hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,4,4,.80) 0%, rgba(4,4,4,.23) 45%, rgba(4,4,4,.62) 100%),
    linear-gradient(180deg, rgba(3,3,3,.07) 44%, rgba(3,3,3,.83) 100%);
}

.cinema-hero-intro {
  position: absolute;
  z-index: 3;
  left: max(38px, calc((100% - 1510px) / 2));
  bottom: 118px;
  width: min(560px, 44%);
}

.cinema-hero-intro > span { color: #b4aea5; font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .19em; }
.cinema-hero-intro h1 { margin: 19px 0 18px; color: var(--c-bone); font-family: "Russo One", sans-serif; font-size: clamp(60px, 6.6vw, 108px); font-weight: 400; line-height: .84; letter-spacing: -.055em; text-transform: uppercase; text-shadow: 0 7px 38px rgba(0,0,0,.42); }
.cinema-hero-intro p { max-width: 420px; margin: 0 0 28px; color: #c5c0b7; font-size: 12px; line-height: 1.65; }
.cinema-hero-intro button { min-width: 210px; height: 48px; padding: 0 17px; border: 1px solid rgba(238,233,223,.55); display: flex; align-items: center; justify-content: space-between; color: var(--c-bone); background: rgba(6,6,6,.62); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cinema-hero-intro button:hover { border-color: var(--c-rust-bright); background: var(--c-rust); }

.cinema-feature {
  position: absolute;
  z-index: 4;
  top: 48px;
  right: max(38px, calc((100% - 1510px) / 2));
  bottom: 96px;
  width: min(455px, 38%);
  border-left: 1px solid rgba(238,233,223,.24);
  background: linear-gradient(90deg, rgba(6,6,6,.88), rgba(6,6,6,.68));
  display: grid;
  grid-template-rows: 46px minmax(220px, 1fr) auto;
}

.cinema-feature-top { padding: 0 20px; border-bottom: 1px solid var(--c-line); display: flex; align-items: center; justify-content: space-between; color: #8e8a83; font-family: "Share Tech Mono", monospace; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.cinema-feature-top b { color: #c7c2ba; font-weight: 400; }

.cinema-feature-visual { position: relative; min-height: 0; border-bottom: 1px solid var(--c-line); display: grid; place-items: center; overflow: hidden; }
.cinema-feature-visual::after { content:""; position:absolute; right:19px; bottom:17px; width:38px; height:38px; border-right:1px solid rgba(238,233,223,.28); border-bottom:1px solid rgba(238,233,223,.28); }
.cinema-feature-visual img { width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 28px 26px rgba(0,0,0,.55)); }

.cinema-feature-copy { padding: 22px 22px 24px; }
.cinema-feature-copy > small { color: #8b8780; font-family: "Share Tech Mono", monospace; font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }
.cinema-feature-copy h2 { margin: 9px 0 7px; font-family: "Russo One", sans-serif; font-size: clamp(24px, 2.2vw, 36px); font-weight: 400; line-height: 1.02; }
.cinema-feature-copy > p { min-height: 34px; margin: 0; overflow: hidden; color: #9f9a92; font-size: 10px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cinema-feature-price { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--c-line); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cinema-feature-price strong { font-family: "Russo One", sans-serif; font-size: 23px; font-weight: 400; }
.cinema-feature-price span { padding-bottom: 2px; color: #79766f; font-family: "Share Tech Mono", monospace; font-size: 8px; text-transform: uppercase; }
.cinema-feature-actions { margin-top: 16px; display: grid; grid-template-columns: 1fr .72fr; gap: 7px; }
.cinema-feature-buy,
.cinema-feature-more { height: 42px; padding: 0 13px; border: 1px solid rgba(238,233,223,.26); display: flex; align-items: center; justify-content: center; gap: 9px; color: #c3beb6; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.cinema-feature-buy { justify-content: space-between; color: #111; border-color: var(--c-bone); background: var(--c-bone); }
.cinema-feature-buy:hover { color: #fff; border-color: var(--c-rust); background: var(--c-rust); }
.cinema-feature-more:hover { color: var(--c-bone); border-color: rgba(238,233,223,.5); }

.cinema-feature-dots { position: absolute; z-index: 6; right: 14px; top: 50%; display: grid; gap: 8px; transform: translateY(-50%); }
.cinema-feature-dots button { width: 28px; height: 28px; border: 1px solid rgba(238,233,223,.2); display: grid; place-items: center; color: #77736d; background: rgba(5,5,5,.66); }
.cinema-feature-dots button span { font-family: "Share Tech Mono", monospace; font-size: 7px; }
.cinema-feature-dots button.active { color: #111; border-color: var(--c-bone); background: var(--c-bone); }

.cinema-hero-foot { position: absolute; z-index: 5; right: max(38px, calc((100% - 1510px) / 2)); bottom: 0; left: max(38px, calc((100% - 1510px) / 2)); height: 62px; border-top: 1px solid rgba(238,233,223,.18); display: flex; align-items: center; justify-content: space-between; color: #7d7973; font-family: "Share Tech Mono", monospace; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }

.cinema-categories {
  width: min(1510px, calc(100% - 64px));
  margin: 0 auto;
  padding: 105px 0 98px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 72px;
}

.cinema-categories-heading { position: sticky; top: 112px; align-self: start; }
.cinema-categories-heading > span,
.cinema-catalog-heading > div > span { color: var(--c-rust-bright); font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .16em; }
.cinema-categories-heading h2 { margin: 15px 0 12px; font-family: "Russo One", sans-serif; font-size: 46px; font-weight: 400; line-height: 1; }
.cinema-categories-heading p { margin: 0; color: #77736d; font-size: 11px; }

.cinema-category-list { border-top: 1px solid var(--c-line); }
.cinema-category-list button { width: 100%; min-height: 71px; padding: 0 9px; border-bottom: 1px solid var(--c-line); display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 16px; color: #79756f; text-align: left; }
.cinema-category-list button i { font-family: "Share Tech Mono", monospace; font-size: 8px; font-style: normal; }
.cinema-category-list button span { font-family: "Russo One", sans-serif; font-size: clamp(22px, 2.3vw, 36px); font-weight: 400; letter-spacing: -.025em; }
.cinema-category-list button sup { font-family: "Share Tech Mono", monospace; font-size: 8px; }
.cinema-category-list button:hover { color: #bcb7ae; }
.cinema-category-list button.active { color: var(--c-bone); }
.cinema-category-list button.active i { color: var(--c-rust-bright); }

.cinema-catalog { padding: 104px max(32px, calc((100vw - 1510px) / 2)) 118px; background: var(--c-bg-2); }
.cinema-catalog-heading { margin-bottom: 37px; padding-bottom: 27px; border-bottom: 1px solid rgba(238,233,223,.20); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.cinema-catalog-heading h2 { margin: 14px 0 8px; font-family: "Russo One", sans-serif; font-size: clamp(42px, 4.6vw, 72px); font-weight: 400; line-height: .9; letter-spacing: -.045em; }
.cinema-catalog-heading p { margin: 0; color: #77736d; font-family: "Share Tech Mono", monospace; font-size: 8px; letter-spacing: .1em; }

.cinema-sort { border: 1px solid var(--c-line); display: flex; }
.cinema-sort button { min-height: 39px; padding: 0 15px; color: #706d67; font-size: 9px; font-weight: 700; white-space: nowrap; }
.cinema-sort button + button { border-left: 1px solid var(--c-line); }
.cinema-sort button:hover { color: #bbb6ad; background: #121210; }
.cinema-sort button.active { color: #101010; background: var(--c-bone); }

.cinema-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 42px 16px; }
.cinema-product { position: relative; min-width: 0; cursor: pointer; }
.cinema-product::before { content:""; position:absolute; z-index:10; top:0; left:0; width:0; height:2px; pointer-events:none; background:linear-gradient(90deg,var(--c-rust-bright),var(--c-bone)); transition:width .32s cubic-bezier(.23,1,.32,1); }
.cinema-product:hover::before { width: 100%; }
.cinema-product--lead { grid-column: span 2; }

.cinema-product-visual { position: relative; height: 340px; border: 1px solid rgba(238,233,223,.10); background: radial-gradient(circle at 50% 55%, #21201d 0%, #121210 42%, #090909 100%); overflow: hidden; }
.cinema-product--lead .cinema-product-visual { height: 480px; }
.cinema-product-visual > img,
.cinema-product-placeholder { width:100%; height:100%; padding:36px 32px 46px; object-fit:contain; filter:drop-shadow(0 24px 23px rgba(0,0,0,.54)); }
.cinema-product-placeholder { display:grid; place-items:center; color:#66635e; }
.cinema-product-index { position:absolute; z-index:3; top:16px; left:17px; color:#74716b; font-family:"Share Tech Mono",monospace; font-size:8px; letter-spacing:.1em; }
.cinema-favorite { position:absolute; z-index:4; top:12px; right:12px; width:38px; height:38px; border:1px solid rgba(238,233,223,.18); display:grid; place-items:center; color:#8e8a83; background:rgba(7,7,7,.72); }
.cinema-favorite:hover,
.cinema-favorite.active { color:var(--c-bone); border-color:rgba(238,233,223,.42); background:#171613; }
.cinema-favorite.active svg { fill:currentColor; }
.cinema-rarity { position:absolute; right:13px; bottom:12px; left:13px; min-height:30px; padding:0 10px; border:1px solid rgba(238,233,223,.12); display:flex; align-items:center; gap:7px; color:#8e8a83; background:rgba(7,7,7,.76); font-family:"Share Tech Mono",monospace; font-size:7px; letter-spacing:.12em; text-transform:uppercase; }
.cinema-rarity i { width:5px; height:5px; border-radius:50%; }
.cinema-rarity b { margin-left:auto; color:#d08168; }

.cinema-product-copy { padding:17px 2px 0; }
.cinema-product-name { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.cinema-product-name > div { min-width:0; }
.cinema-product-name small { display:block; margin-bottom:7px; color:#6e6b66; font-family:"Share Tech Mono",monospace; font-size:7px; letter-spacing:.1em; text-transform:uppercase; }
.cinema-product-name h3 { margin:0; font-family:"Russo One",sans-serif; font-size:16px; font-weight:400; line-height:1.17; }
.cinema-product-name strong { flex:0 0 auto; color:#e8e2d8; font-family:"Russo One",sans-serif; font-size:16px; font-weight:400; white-space:nowrap; }
.cinema-product-copy > p { margin:9px 0 15px; overflow:hidden; color:#77736d; font-size:9px; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
.cinema-product-actions { display:grid; grid-template-columns:40px 1fr; gap:6px; }
.cinema-product-actions:has(.cinema-product-buy:only-child) { grid-template-columns:1fr; }
.cinema-product-cart,
.cinema-product-buy { height:39px; border:1px solid var(--c-line); display:flex; align-items:center; justify-content:center; color:#969189; }
.cinema-product-buy { padding:0 12px; justify-content:space-between; color:#bcb7ae; font-size:9px; font-weight:800; text-transform:uppercase; }
.cinema-product-cart:hover { color:var(--c-bone); border-color:rgba(238,233,223,.42); }
.cinema-product-buy:hover { color:#fff; border-color:var(--c-rust); background:var(--c-rust); }
.cinema-product button:disabled { cursor:not-allowed; opacity:.4; }

.cinema-load-more { width:min(430px,100%); height:49px; margin:44px auto 0; border:1px solid rgba(238,233,223,.25); display:flex; align-items:center; justify-content:center; gap:10px; color:#a7a29a; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.cinema-load-more:hover { color:#fff; border-color:var(--c-rust); background:var(--c-rust); }
.cinema-empty { min-height:390px; border:1px solid var(--c-line); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#77736d; text-align:center; }
.cinema-empty h3 { margin:15px 0 7px; color:#ddd7ce; font-family:"Russo One",sans-serif; font-size:28px; font-weight:400; }
.cinema-empty p { margin:0 0 20px; font-size:10px; }
.cinema-empty button { padding:12px 18px; color:#fff; background:var(--c-rust); font-size:9px; font-weight:800; }

.cinema-footer { min-height:132px; padding:27px max(32px,calc((100vw - 1510px) / 2)); border-top:1px solid var(--c-line); display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:22px; background:#050505; }
.cinema-footer img { width:82px; height:54px; object-fit:contain; }
.cinema-footer > div { display:grid; gap:5px; }
.cinema-footer b { font-family:"Russo One",sans-serif; font-size:11px; font-weight:400; letter-spacing:.08em; }
.cinema-footer span,
.cinema-footer small,
.cinema-footer nav { color:#6f6c66; font-family:"Share Tech Mono",monospace; font-size:8px; letter-spacing:.08em; }
.cinema-footer nav { display:flex; gap:17px; }
.cinema-footer a:hover { color:var(--c-bone); }

@media (max-width:1260px) {
  .cinema-header { grid-template-columns:100px minmax(190px,1fr) auto; gap:18px; }
  .cinema-nav { display:none; }
  .cinema-feature { width:min(420px,40%); }
  .cinema-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:980px) {
  .cinema-header { min-height:116px; padding:9px 18px; grid-template-columns:90px 1fr auto; grid-template-rows:52px 42px; }
  .cinema-search { grid-column:1 / -1; grid-row:2; }
  .cinema-header-actions { grid-column:3; grid-row:1; }
  .cinema-hero { height:auto; min-height:0; max-height:none; padding-bottom:60px; }
  .cinema-hero-backdrop { height:620px; }
  .cinema-hero-shade { height:620px; }
  .cinema-hero-intro { position:relative; left:auto; bottom:auto; width:auto; min-height:620px; padding:240px 34px 82px; display:flex; flex-direction:column; justify-content:flex-end; }
  .cinema-hero-intro h1 { font-size:76px; }
  .cinema-feature { position:relative; top:auto; right:auto; bottom:auto; width:calc(100% - 64px); min-height:560px; margin:-40px auto 0; grid-template-columns:1.05fr .95fr; grid-template-rows:46px 1fr; border:1px solid rgba(238,233,223,.2); background:#0a0a09; }
  .cinema-feature-top { grid-column:1 / -1; }
  .cinema-feature-visual { border-right:1px solid var(--c-line); border-bottom:0; }
  .cinema-feature-copy { display:flex; flex-direction:column; justify-content:center; }
  .cinema-feature-dots { position:relative; right:auto; top:auto; margin:18px 32px 0; display:flex; transform:none; }
  .cinema-hero-foot { display:none; }
  .cinema-categories { grid-template-columns:240px minmax(0,1fr); gap:38px; }
  .cinema-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cinema-product--lead { grid-column:span 2; }
  .cinema-catalog-heading { align-items:flex-start; flex-direction:column; }
}

@media (max-width:720px) {
  .cinema-header { min-height:108px; padding:7px 11px; grid-template-columns:64px 1fr; grid-template-rows:45px 40px; gap:7px 9px; }
  .cinema-logo { border-right:0; }
  .cinema-logo img { width:58px; height:40px; }
  .cinema-header-actions { grid-column:2; grid-row:1; }
  .cinema-server { width:38px; padding:0; }
  .cinema-icon { width:38px; height:38px; }
  .cinema-cart { min-width:43px; width:43px; padding:0; }
  .cinema-cart span { display:none; }
  .cinema-cart b { position:absolute; top:-5px; right:-5px; }
  .cinema-search { height:38px; }

  .cinema-hero-backdrop,
  .cinema-hero-shade { height:470px; }
  .cinema-hero-intro { min-height:470px; padding:180px 18px 42px; }
  .cinema-hero-intro h1 { margin:14px 0; font-size:50px; }
  .cinema-hero-intro p { max-width:320px; font-size:10px; }
  .cinema-hero-intro button { width:100%; }
  .cinema-feature { width:calc(100% - 22px); min-height:0; margin:-12px auto 0; grid-template-columns:1fr; grid-template-rows:44px 315px auto; }
  .cinema-feature-top { grid-column:auto; }
  .cinema-feature-visual { border-right:0; border-bottom:1px solid var(--c-line); }
  .cinema-feature-copy { padding:20px 17px 23px; }
  .cinema-feature-copy h2 { font-size:28px; }
  .cinema-feature-dots { margin:13px 11px 0; }

  .cinema-categories { width:calc(100% - 22px); padding:68px 0 64px; grid-template-columns:1fr; gap:27px; }
  .cinema-categories-heading { position:static; }
  .cinema-categories-heading h2 { font-size:39px; }
  .cinema-category-list button { min-height:60px; grid-template-columns:31px 1fr auto; }
  .cinema-category-list button span { font-size:23px; }

  .cinema-catalog { padding:68px 11px 78px; }
  .cinema-catalog-heading { margin-bottom:24px; padding-bottom:20px; gap:21px; }
  .cinema-catalog-heading h2 { font-size:42px; }
  .cinema-sort { width:100%; overflow-x:auto; }
  .cinema-sort button { flex:0 0 auto; }
  .cinema-grid { grid-template-columns:1fr; gap:35px; }
  .cinema-product--lead { grid-column:auto; }
  .cinema-product-visual,
  .cinema-product--lead .cinema-product-visual { height:365px; }
  .cinema-product-copy { padding-top:15px; }

  .cinema-footer { padding:27px 18px; grid-template-columns:auto 1fr; }
  .cinema-footer nav,
  .cinema-footer > small { grid-column:1 / -1; }
}

@media (prefers-reduced-motion:reduce) {
  .cinema-product::before,
  .cinema-nav button::after,
  .cinema-nav a::after { transition:none !important; }
}

/* ========================================================================== */
/* HATE / MONOLITH INDEX — selected Product Design direction                  */
/* ========================================================================== */

[data-style-preset="hate-index"] {
  --i-black: #080808;
  --i-black-soft: #0d0d0d;
  --i-bone: #e7e2d8;
  --i-copy: #9e9990;
  --i-muted: #65615c;
  --i-rust: #a9472f;
  --i-rust-bright: #c55b3e;
  --i-rule: rgba(231,226,216,.20);
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  color: var(--i-bone);
  background: var(--i-black);
  font-family: "Roboto Condensed", "Exo 2", sans-serif;
  color-scheme: dark;
}

[data-style-preset="hate-index"]::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .025;
  background: url('/images/hate/hate-shop-bg.jpg') center / cover no-repeat;
  filter: grayscale(1) contrast(1.3);
}

[data-style-preset="hate-index"] ::selection { color:#070707; background:var(--i-bone); }
[data-style-preset="hate-index"] * { scrollbar-color:#514d47 #080808; scrollbar-width:thin; }
[data-style-preset="hate-index"] button:focus-visible,
[data-style-preset="hate-index"] a:focus-visible,
[data-style-preset="hate-index"] input:focus-visible { outline:2px solid var(--i-rust-bright); outline-offset:3px; }

.material-symbols-sharp {
  display: inline-block;
  overflow: hidden;
  font-family: "Material Symbols Sharp";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.index-header {
  position: relative;
  z-index: 20;
  height: 165px;
  border-bottom: 1px solid rgba(169,71,47,.42);
  display: grid;
  grid-template-columns: 252px minmax(400px,1fr) auto;
  align-items: stretch;
  background: rgba(7,7,7,.98);
}

.index-logo { 
  padding: 12px 30px;
  border-right: 1px solid var(--i-rule);
  display: flex;
  align-items: center;
}

.index-logo img { width:188px; height:138px; object-fit:contain; object-position:left center; filter:brightness(1.05) contrast(1.08); }

.index-navigation { min-width:0; display:flex; align-items:stretch; overflow-x:auto; }
.index-navigation button { position:relative; flex:0 0 auto; min-width:122px; padding:0 17px; display:flex; align-items:center; justify-content:center; color:#8b867e; font-family:"Bebas Neue",sans-serif; font-size:26px; letter-spacing:.035em; text-transform:uppercase; }
.index-navigation button::after { content:""; position:absolute; right:17px; bottom:-1px; left:17px; height:2px; transform:scaleX(0); transform-origin:left; background:var(--i-rust); transition:transform .18s ease; }
.index-navigation button:hover { color:#c7c1b7; }
.index-navigation button.active { color:var(--i-bone); }
.index-navigation button.active::after { transform:scaleX(1); }

.index-header-tools { padding-right:max(24px,calc((100vw - 1536px) / 2)); display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.index-search { width:180px; height:44px; margin-right:6px; border-bottom:1px solid rgba(231,226,216,.26); display:flex; align-items:center; gap:9px; color:#aaa59c; }
.index-search input { width:100%; min-width:0; border:0; outline:0; color:var(--i-bone); background:transparent; font-family:"Roboto Condensed",sans-serif; font-size:14px; text-transform:uppercase; }
.index-search input::placeholder { color:#77736d; }
.index-search button { width:28px; height:28px; display:grid; place-items:center; }
.index-server,
.index-tool { width:43px; height:43px; border:1px solid var(--i-rule); display:grid; place-items:center; color:#9a958c; background:#0a0a0a; }
.index-server:hover,
.index-tool:hover { color:var(--i-bone); border-color:rgba(231,226,216,.42); }
.index-tool img { width:25px; height:25px; border-radius:50%; object-fit:cover; }
.index-cart { position:relative; min-width:128px; height:43px; margin-left:3px; padding:0 13px; display:flex; align-items:center; justify-content:center; gap:10px; color:#c8c2b8; border-left:1px solid var(--i-rule); font-family:"Bebas Neue",sans-serif; font-size:20px; letter-spacing:.04em; text-transform:uppercase; }
.index-cart:hover { color:var(--i-bone); }
.index-cart b { position:absolute; top:-2px; left:25px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; display:grid; place-items:center; color:#fff; background:var(--i-rust); font-family:"Roboto Condensed",sans-serif; font-size:9px; }

.index-main {
  position:relative;
  z-index:2;
  height:calc(100vh - 165px);
  min-height:650px;
  display:grid;
  grid-template-columns:minmax(480px,38.5%) minmax(0,61.5%);
  background:rgba(8,8,8,.93);
}

.index-list-pane { min-width:0; min-height:0; border-right:1px solid var(--i-rule); display:grid; grid-template-rows:minmax(0,1fr) 54px; }
.index-list-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; }

.index-product-row {
  position:relative;
  width:100%;
  min-height:98px;
  padding:0 26px 0 30px;
  border-bottom:1px solid var(--i-rule);
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto 28px;
  align-items:center;
  gap:14px;
  color:#8f8a82;
  text-align:left;
}

.index-product-row::before { content:""; position:absolute; top:0; bottom:0; left:0; width:3px; transform:scaleY(0); background:var(--i-rust); transition:transform .16s ease; }
.index-product-row:hover { color:#c5bfb5; background:rgba(255,255,255,.018); }
.index-product-row.active { color:var(--i-bone); background:rgba(255,255,255,.028); }
.index-product-row.active::before { transform:scaleY(1); }
.index-product-row.active .index-row-number,
.index-product-row.active .index-row-price,
.index-product-row.active > .material-symbols-sharp { color:var(--i-rust-bright); }
.index-row-number { color:#615e59; font-family:"Bebas Neue",sans-serif; font-size:21px; }
.index-row-title { min-width:0; overflow:hidden; transform:scaleY(1.16); transform-origin:left center; font-family:"Bebas Neue",sans-serif; font-size:clamp(27px,2.5vw,40px); line-height:1; letter-spacing:.005em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.index-row-price { padding-left:12px; color:#77736c; font-family:"Bebas Neue",sans-serif; font-size:23px; white-space:nowrap; }
.index-product-row > .material-symbols-sharp { color:#57544f; }

.index-list-footer { padding:0 28px; display:flex; align-items:center; justify-content:space-between; color:#68645e; font-family:"Roboto Condensed",sans-serif; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
.index-list-footer button { display:flex; align-items:center; gap:7px; color:#8e8981; font-size:10px; text-transform:uppercase; }
.index-list-footer button:hover { color:var(--i-bone); }

.index-detail-pane { position:relative; min-width:0; min-height:0; overflow:hidden; background:rgba(9,9,9,.72); }
.index-detail-pane::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.025; background:url('/images/hate/hate-shop-bg.jpg') center / cover no-repeat; filter:grayscale(1) contrast(1.35); }
.index-watermark { position:absolute; z-index:1; top:0; right:20px; width:390px; height:245px; object-fit:contain; opacity:.19; filter:brightness(1.3) contrast(1.12); }

.index-detail-copy { position:absolute; z-index:4; top:42px; left:38px; width:min(390px,42%); }
.index-detail-copy > small { color:#89847c; font-family:"Bebas Neue",sans-serif; font-size:15px; letter-spacing:.08em; text-transform:uppercase; }
.index-detail-copy h1 { max-width:650px; margin:0 0 58px; transform:scaleY(1.62); transform-origin:left top; font-family:"Bebas Neue",sans-serif; font-size:clamp(64px,7vw,108px); font-weight:400; line-height:.86; letter-spacing:-.025em; text-transform:uppercase; text-wrap:balance; }
.index-detail-copy > strong { display:block; color:var(--i-rust-bright); font-family:"Bebas Neue",sans-serif; font-size:46px; font-weight:400; letter-spacing:.03em; }
.index-detail-copy > p { max-width:330px; min-height:42px; margin:16px 0 20px; overflow:hidden; color:#aaa59c; font-size:14px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.index-detail-copy dl { width:225px; margin:0; padding-top:14px; border-top:1px solid var(--i-rule); display:grid; grid-template-columns:1fr; gap:11px; }
.index-detail-copy dl div { display:flex; justify-content:space-between; gap:9px; }
.index-detail-copy dt,
.index-detail-copy dd { margin:0; font-family:"Roboto Condensed",sans-serif; font-size:11px; text-transform:uppercase; }
.index-detail-copy dt { color:#6f6b65; }
.index-detail-copy dd { color:#9c978f; text-align:right; }

.index-product-stage { position:absolute; z-index:3; top:120px; right:-4%; bottom:86px; width:82%; display:grid; place-items:center; pointer-events:none; }
.index-product-stage::after { content:""; position:absolute; z-index:-1; right:11%; bottom:6%; width:62%; height:14%; border-radius:50%; background:rgba(0,0,0,.54); filter:blur(24px); }
.index-product-stage > img { width:100%; height:100%; transform:scale(1.18) translateY(-2%); object-fit:contain; object-position:center bottom; filter:drop-shadow(0 28px 27px rgba(0,0,0,.72)) brightness(1.16) contrast(1.08) saturate(.84); }
.index-stage-placeholder { color:#625e58; }

.index-favorite { position:absolute; z-index:7; top:24px; right:25px; width:42px; height:42px; border:1px solid var(--i-rule); display:grid; place-items:center; color:#8d8981; background:rgba(7,7,7,.68); }
.index-favorite:hover,
.index-favorite.active { color:var(--i-rust-bright); border-color:rgba(197,91,62,.58); }

.index-variant-strip { position:absolute; z-index:6; left:38px; bottom:44px; display:grid; gap:10px; }
.index-variant-strip > span { color:#79756e; font-family:"Bebas Neue",sans-serif; font-size:14px; letter-spacing:.08em; text-transform:uppercase; }
.index-variant-strip > div { display:flex; gap:4px; }
.index-variant-strip button { width:91px; height:113px; border:1px solid var(--i-rule); display:grid; place-items:center; color:#746f69; background:rgba(8,8,8,.82); overflow:hidden; }
.index-variant-strip button.active { border-color:var(--i-rust); }
.index-variant-strip img { width:92%; height:92%; object-fit:contain; }

.index-detail-actions { position:absolute; z-index:7; right:46px; bottom:44px; display:grid; grid-template-columns:360px; }
.index-more,
.index-buy { border:1px solid var(--i-rule); display:flex; align-items:center; justify-content:center; color:#99948c; font-family:"Bebas Neue",sans-serif; font-size:18px; letter-spacing:.045em; text-transform:uppercase; }
.index-more { width:max-content; margin-top:17px; display:flex; align-items:center; gap:6px; color:#817d75; font-family:"Roboto Condensed",sans-serif; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.index-more:hover { color:var(--i-bone); }
.index-buy { height:115px; padding:0 34px; justify-content:space-between; color:#efe9df; border-color:var(--i-rust); background:linear-gradient(135deg,#913a27,var(--i-rust)); font-size:41px; }
.index-buy:hover { background:var(--i-rust-bright); }
.index-buy:disabled { cursor:not-allowed; opacity:.42; }
.index-detail-empty { display:grid; place-items:center; color:#6b6760; font-family:"Bebas Neue",sans-serif; font-size:30px; }

@media (max-width:1200px) {
  .index-header { grid-template-columns:190px minmax(330px,1fr) auto; }
  .index-logo img { width:130px; }
  .index-navigation button { min-width:104px; font-size:21px; }
  .index-search { width:145px; }
  .index-server { display:none; }
  .index-main { grid-template-columns:minmax(410px,40%) minmax(0,60%); }
  .index-product-row { padding-left:22px; }
  .index-row-title { font-size:31px; }
  .index-detail-copy { left:29px; }
  .index-detail-actions { right:28px; grid-template-columns:220px; }
  .index-variant-strip { left:29px; }
  .index-variant-strip button { width:67px; }
}

@media (max-width:900px) {
  [data-style-preset="hate-index"] { overflow:visible; overflow-x:clip; }
  .index-header { position:sticky; z-index:80; top:0; height:120px; padding:0 14px; grid-template-columns:74px minmax(0,1fr); grid-template-rows:58px 62px; }
  .index-logo { grid-column:1; grid-row:1; padding:4px 8px; border-right:0; }
  .index-logo img { width:64px; height:50px; }
  .index-navigation { grid-column:1 / -1; grid-row:2; border-top:1px solid var(--i-rule); }
  .index-navigation button { min-width:auto; padding:0 13px; font-size:18px; }
  .index-header-tools { grid-column:2; grid-row:1; padding:0; }
  .index-search { width:min(220px,40vw); }
  .index-cart { min-width:45px; width:45px; padding:0; border:1px solid var(--i-rule); }
  .index-cart span { display:none; }
  .index-tool { width:39px; height:39px; }

  .index-main { height:auto; min-height:0; display:flex; flex-direction:column; }
  .index-detail-pane { order:1; min-height:760px; border-bottom:1px solid var(--i-rule); }
  .index-list-pane { order:2; height:690px; border-right:0; }
  .index-detail-copy { top:34px; left:24px; width:55%; }
  .index-detail-copy h1 { font-size:72px; }
  .index-product-stage { top:120px; right:-4%; bottom:128px; width:72%; }
  .index-watermark { width:240px; }
  .index-detail-actions { right:24px; bottom:25px; grid-template-columns:260px; }
  .index-variant-strip { left:24px; bottom:25px; }
}

@media (max-width:620px) {
  .index-header { height:111px; grid-template-rows:54px 57px; }
  .index-logo img { width:58px; }
  .index-search { flex:1; width:auto; min-width:0; }
  .index-search input { font-size:12px; }
  .index-header-tools { gap:4px; }
  .index-tool:first-of-type { display:none; }
  .index-navigation button { padding:0 11px; font-size:16px; }

  .index-detail-pane { min-height:840px; }
  .index-detail-copy { top:29px; right:18px; left:18px; width:auto; }
  .index-detail-copy h1 { max-width:90%; margin-bottom:40px; transform:scaleY(1.42); font-size:56px; }
  .index-detail-copy > strong { font-size:31px; }
  .index-detail-copy > p { max-width:90%; margin-top:11px; }
  .index-detail-copy dl { width:100%; max-width:330px; }
  .index-product-stage { top:292px; right:-8%; bottom:230px; width:112%; }
  .index-watermark { top:205px; right:-36px; width:230px; opacity:.10; }
  .index-favorite { top:22px; right:17px; }

  .index-variant-strip { right:18px; bottom:119px; left:18px; }
  .index-variant-strip > div { display:grid; grid-template-columns:repeat(4,1fr); }
  .index-variant-strip button { width:auto; height:60px; }
  .index-detail-actions { right:18px; bottom:24px; left:18px; grid-template-columns:1fr; }
  .index-more,
  .index-buy { height:70px; }

  .index-product-row { min-height:77px; padding:0 14px; grid-template-columns:29px minmax(0,1fr) auto 20px; gap:9px; }
  .index-row-title { font-size:25px; }
  .index-row-price { padding-left:4px; font-size:19px; }
  .index-list-footer { padding:0 15px; }
}

@media (prefers-reduced-motion:reduce) {
  .index-navigation button::after,
  .index-product-row::before { transition:none !important; }
}

/* ========================================================================== */
/* HATE / OUTPOST — independent storefront based on the supplied reference    */
/* ========================================================================== */

[data-style-preset="hate-outpost"] {
  --out-bg: oklch(11% .008 42);
  --out-bg-deep: oklch(8.5% .006 42);
  --out-surface: oklch(15% .010 42);
  --out-surface-2: oklch(18% .012 42);
  --out-surface-3: oklch(22% .014 42);
  --out-bone: oklch(91% .018 76);
  --out-copy: oklch(72% .014 62);
  --out-muted: oklch(54% .012 62);
  --out-faint: oklch(38% .010 62);
  --out-rust: oklch(58% .142 35);
  --out-rust-hot: oklch(66% .156 39);
  --out-green: oklch(71% .128 125);
  --out-amber: oklch(77% .142 79);
  --out-line: oklch(29% .014 48);
  --out-line-soft: oklch(22% .010 48);
  --out-space-xs: 4px;
  --out-space-sm: 8px;
  --out-space-md: 12px;
  --out-space-lg: 16px;
  --out-space-xl: 24px;
  --out-space-2xl: 32px;
  --out-ease: cubic-bezier(.22,1,.36,1);
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 242px minmax(0,1fr) 272px;
  grid-template-rows: 82px minmax(calc(100vh - 82px),auto);
  color: var(--out-bone);
  background: var(--out-bg);
  font-family: "Roboto Condensed","Arial Narrow",sans-serif;
  font-size: 1rem;
  font-kerning: normal;
  color-scheme: dark;
}

[data-style-preset="hate-outpost"]::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url('/images/hate/hate-shop-bg.jpg') center / cover no-repeat;
  opacity: .028;
  filter: grayscale(1) contrast(1.2);
}

[data-style-preset="hate-outpost"] * { scrollbar-width:thin; scrollbar-color:var(--out-rust) var(--out-bg-deep); }
[data-style-preset="hate-outpost"] button:focus-visible,
[data-style-preset="hate-outpost"] a:focus-visible,
[data-style-preset="hate-outpost"] input:focus-visible { outline:2px solid var(--out-rust-hot); outline-offset:3px; }
[data-style-preset="hate-outpost"] ::selection { color:var(--out-bg-deep); background:var(--out-bone); }

.outpost-sidebar {
  position: sticky;
  z-index: 70;
  top: 0;
  grid-column: 1;
  grid-row: 1 / -1;
  height: 100vh;
  min-height: 720px;
  padding: 0 var(--out-space-xl) var(--out-space-lg);
  border-right: 1px solid var(--out-line);
  overflow-y: auto;
  background: color-mix(in oklch,var(--out-bg-deep) 96%,var(--out-rust) 4%);
  scrollbar-width: none;
}
.outpost-sidebar::-webkit-scrollbar { display:none; }

.outpost-brand {
  height: 100px;
  border-bottom: 1px solid var(--out-line-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.outpost-brand img { width:136px; height:72px; object-fit:contain; filter:brightness(1.06) contrast(1.08); }
.outpost-brand span { color:var(--out-muted); font-family:"Bebas Neue",sans-serif; font-size:.70rem; letter-spacing:.42em; }

.outpost-balance {
  position: relative;
  width: 100%;
  min-height: 50px;
  margin-top: var(--out-space-lg);
  padding: 0 48px 0 var(--out-space-lg);
  border: 1px solid color-mix(in oklch,var(--out-rust) 62%,var(--out-line));
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: var(--out-space-sm);
  overflow: hidden;
  color: var(--out-bone);
  background: color-mix(in oklch,var(--out-rust) 30%,var(--out-surface));
  text-align: left;
  text-transform: uppercase;
}
.outpost-balance::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 46%,color-mix(in oklch,var(--out-rust-hot) 18%,transparent) 50%,transparent 54%); transform:translateX(-100%); transition:transform .42s var(--out-ease); }
.outpost-balance:hover::after { transform:translateX(100%); }
.outpost-balance span { font-family:"Bebas Neue",sans-serif; font-size:1.03rem; letter-spacing:.04em; }
.outpost-balance strong { margin-left:auto; color:var(--out-amber); font-size:.78rem; font-variant-numeric:tabular-nums; }
.outpost-balance > .material-symbols-sharp { position:absolute; right:14px; }

.outpost-categories { margin-top:var(--out-space-xl); display:grid; gap:var(--out-space-xs); }
.outpost-categories p { margin:0 0 var(--out-space-sm); color:var(--out-copy); font-family:"Bebas Neue",sans-serif; font-size:.94rem; letter-spacing:.06em; text-transform:uppercase; }
.outpost-categories button { min-height:34px; padding:0 var(--out-space-md); border:1px solid transparent; border-radius:4px; display:flex; align-items:center; gap:var(--out-space-md); color:var(--out-copy); text-align:left; }
.outpost-categories button span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; }
.outpost-categories button:hover { color:var(--out-bone); background:var(--out-surface); }
.outpost-categories button.active { color:var(--out-bone); border-color:var(--out-line); background:var(--out-surface-2); }
.outpost-categories button.active .material-symbols-sharp { color:var(--out-rust-hot); }

.outpost-side-panel,
.outpost-server-card { margin-top:var(--out-space-lg); border:1px solid var(--out-line); border-radius:5px; background:var(--out-surface); }
.outpost-side-panel { padding:var(--out-space-md); }
.outpost-side-panel > span,
.outpost-server-card > span { display:block; color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:.98rem; letter-spacing:.045em; text-transform:uppercase; }
.outpost-side-panel p { margin:var(--out-space-sm) 0 var(--out-space-md); color:var(--out-copy); font-size:.76rem; line-height:1.45; }
.outpost-daily small { display:block; color:var(--out-muted); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; }
.outpost-daily strong { display:block; margin:var(--out-space-xs) 0 var(--out-space-md); color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:1.38rem; font-weight:400; letter-spacing:.12em; font-variant-numeric:tabular-nums; }
.outpost-side-panel button { width:100%; min-height:36px; border:1px solid var(--out-line); border-radius:3px; display:flex; align-items:center; justify-content:center; gap:var(--out-space-sm); color:var(--out-bone); background:var(--out-surface-2); font-family:"Bebas Neue",sans-serif; font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; transition:transform 150ms var(--out-ease),background 180ms var(--out-ease); }
.outpost-daily button { color:var(--out-bone); border-color:color-mix(in oklch,var(--out-rust) 70%,var(--out-line)); background:var(--out-rust); }
.outpost-side-panel button:hover { transform:translateY(-2px); background:var(--out-rust-hot); }
.outpost-side-panel button:active { transform:translateY(0); }
.outpost-support { padding-bottom:var(--out-space-md); }
.outpost-support p { display:none; }
.outpost-support button { margin-top:var(--out-space-md); }
.outpost-server-card { padding:var(--out-space-md); }
.outpost-server-card > div { margin-top:var(--out-space-md); display:grid; grid-template-columns:8px auto 1fr; align-items:center; gap:var(--out-space-sm); }
.outpost-server-card i { width:7px; height:7px; border-radius:50%; background:var(--out-rust); }
.outpost-server-card i.online { background:var(--out-green); }
.outpost-server-card b { color:var(--out-green); font-size:.76rem; font-weight:600; }
.outpost-server-card em { color:var(--out-copy); font-size:.72rem; font-style:normal; text-align:right; font-variant-numeric:tabular-nums; }
.outpost-server-card small { display:block; margin-top:var(--out-space-sm); overflow:hidden; color:var(--out-muted); font-size:.65rem; text-overflow:ellipsis; white-space:nowrap; }

.outpost-header {
  position: sticky;
  z-index: 60;
  top: 0;
  grid-column: 2 / 4;
  grid-row: 1;
  height:82px;
  padding:0 var(--out-space-xl) 0 var(--out-space-2xl);
  border-bottom:1px solid var(--out-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--out-space-xl);
  background:color-mix(in oklch,var(--out-bg-deep) 96%,var(--out-rust) 4%);
}
.outpost-header > nav { min-width:0; height:100%; display:flex; align-items:stretch; overflow-x:auto; }
.outpost-header > nav button { position:relative; min-width:max-content; padding:0 var(--out-space-lg); color:var(--out-copy); font-family:"Bebas Neue",sans-serif; font-size:.98rem; letter-spacing:.055em; text-transform:uppercase; }
.outpost-header > nav button::after { content:""; position:absolute; right:16px; bottom:14px; left:16px; height:2px; transform:scaleX(0); transform-origin:left; background:var(--out-rust); transition:transform 200ms var(--out-ease); }
.outpost-header > nav button:hover,
.outpost-header > nav button.active { color:var(--out-bone); }
.outpost-header > nav button.active::after { transform:scaleX(1); }
.outpost-header-actions { flex:0 0 auto; display:flex; align-items:center; gap:var(--out-space-sm); }
.outpost-header-actions > label { width:188px; height:42px; padding:0 var(--out-space-md); border-bottom:1px solid var(--out-line); display:flex; align-items:center; gap:var(--out-space-sm); color:var(--out-muted); }
.outpost-header-actions input { width:100%; min-width:0; border:0; outline:0; color:var(--out-bone); background:transparent; font-family:"Roboto Condensed",sans-serif; font-size:.84rem; }
.outpost-header-actions input::placeholder { color:var(--out-muted); opacity:1; }
.outpost-header-actions label button { width:28px; height:28px; display:grid; place-items:center; }
.outpost-settings,
.outpost-cart { position:relative; width:44px; height:44px; border:1px solid var(--out-line); border-radius:4px; display:grid; place-items:center; color:var(--out-copy); background:var(--out-surface); }
.outpost-settings:hover,
.outpost-cart:hover { color:var(--out-bone); border-color:var(--out-rust); }
.outpost-cart b { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; display:grid; place-items:center; color:var(--out-bone); background:var(--out-rust); font-size:.62rem; font-variant-numeric:tabular-nums; }
.outpost-profile { min-width:124px; height:44px; padding:0 var(--out-space-md); border:1px solid var(--out-line); border-radius:4px; display:flex; align-items:center; gap:var(--out-space-sm); color:var(--out-bone); background:var(--out-surface); }
.outpost-profile img { width:28px; height:28px; border-radius:3px; object-fit:cover; }
.outpost-profile span { max-width:82px; overflow:hidden; font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }
.outpost-profile .material-symbols-sharp:last-child { margin-left:auto; color:var(--out-muted); }

.outpost-main { position:relative; z-index:2; grid-column:2; grid-row:2; min-width:0; background:color-mix(in oklch,var(--out-bg) 97%,var(--out-rust) 3%); }
.outpost-hero { position:relative; height:365px; min-height:365px; overflow:hidden; border-bottom:1px solid var(--out-line); }
.outpost-hero-art { position:absolute; inset:0; background-image:linear-gradient(90deg,var(--out-bg-deep) 0%,color-mix(in oklch,var(--out-bg-deep) 80%,transparent) 30%,color-mix(in oklch,var(--out-bg-deep) 12%,transparent) 72%,var(--out-bg-deep) 100%),linear-gradient(0deg,var(--out-bg-deep) 0%,transparent 34%),url('/og.webp'); background-position:center,center,center 43%; background-size:cover; transform:scale(1.025); animation:outpost-art-in 800ms var(--out-ease) both; }
.outpost-hero-content { position:absolute; z-index:2; top:42px; left:52px; width:400px; display:grid; gap:var(--out-space-md); animation:outpost-rise 620ms var(--out-ease) 80ms both; }
.outpost-hero-content > span { color:var(--out-rust-hot); font-size:.69rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.outpost-hero-content h1 { margin:0; color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:3.35rem; font-weight:400; line-height:.84; letter-spacing:.012em; text-transform:uppercase; }
.outpost-hero-content h1 em { color:var(--out-rust-hot); font-style:normal; }
.outpost-hero-content > p { max-width:38ch; margin:0; color:var(--out-bone); font-size:.92rem; line-height:1.55; text-shadow:0 1px 6px var(--out-bg-deep); }
.outpost-hero-content > div { display:flex; gap:var(--out-space-md); }
.outpost-hero-content button { min-height:42px; padding:0 var(--out-space-lg); border:1px solid var(--out-line); border-radius:3px; display:flex; align-items:center; justify-content:center; gap:var(--out-space-md); color:var(--out-bone); background:var(--out-surface); font-family:"Bebas Neue",sans-serif; font-size:.92rem; letter-spacing:.04em; text-transform:uppercase; transition:transform 160ms var(--out-ease),background 180ms var(--out-ease); }
.outpost-hero-content button:first-child { border-color:var(--out-rust); background:var(--out-rust); }
.outpost-hero-content button:hover { transform:translateY(-2px); background:var(--out-rust-hot); }
.outpost-hero-features { position:absolute; z-index:3; right:28px; bottom:17px; left:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--out-space-xl); }
.outpost-hero-features > div { min-width:0; display:flex; align-items:center; justify-content:center; gap:var(--out-space-md); color:var(--out-copy); }
.outpost-hero-features > div > .material-symbols-sharp { flex:0 0 auto; width:42px; height:42px; border:1px solid var(--out-line); border-radius:50%; display:grid; place-items:center; color:var(--out-bone); background:color-mix(in oklch,var(--out-bg-deep) 86%,transparent); }
.outpost-hero-features span { min-width:0; display:grid; }
.outpost-hero-features b { color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
.outpost-hero-features small { overflow:hidden; color:var(--out-muted); font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }

.outpost-catalog-anchor { position:relative; top:-82px; }
.outpost-catalog-section { padding:var(--out-space-xl) var(--out-space-xl) 0; scroll-margin-top:82px; }
.outpost-catalog-section > header { min-height:28px; margin-bottom:var(--out-space-md); display:flex; align-items:center; justify-content:space-between; gap:var(--out-space-xl); }
.outpost-catalog-section > header > div { display:flex; align-items:center; gap:var(--out-space-sm); }
.outpost-catalog-section > header .material-symbols-sharp { color:var(--out-rust-hot); }
.outpost-catalog-section h2 { margin:0; color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:1.2rem; font-weight:400; letter-spacing:.04em; text-transform:uppercase; }
.outpost-catalog-section > header > button { display:flex; align-items:center; gap:var(--out-space-sm); color:var(--out-rust-hot); font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.outpost-products-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--out-space-md); }
.outpost-product { position:relative; min-width:0; height:216px; border:1px solid var(--out-line); border-radius:5px; overflow:hidden; cursor:pointer; background:var(--out-surface); animation:outpost-rise 520ms var(--out-ease) calc(var(--reveal-index,0) * 45ms) both; transition:transform 220ms var(--out-ease),border-color 180ms var(--out-ease),background 180ms var(--out-ease); }
.outpost-product:hover { transform:translateY(-4px); border-color:color-mix(in oklch,var(--out-rust) 65%,var(--out-line)); background:var(--out-surface-2); }
.outpost-product-scan { position:absolute; z-index:5; top:0; left:0; width:42%; height:1px; pointer-events:none; transform:translateX(-110%); background:var(--out-rust-hot); opacity:0; }
.outpost-product:hover .outpost-product-scan { opacity:1; animation:outpost-scan 700ms var(--out-ease) both; }
.outpost-product-visual { position:relative; height:132px; display:grid; place-items:center; overflow:hidden; color:var(--out-muted); background:linear-gradient(150deg,var(--out-surface-2),var(--out-surface)); }
.outpost-product-visual::after { content:""; position:absolute; right:11%; bottom:9%; left:11%; height:12%; border-radius:50%; background:color-mix(in oklch,var(--out-bg-deep) 82%,transparent); filter:blur(10px); }
.outpost-product-visual img { position:relative; z-index:2; width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 10px 12px color-mix(in oklch,var(--out-bg-deep) 82%,transparent)) brightness(1.08) contrast(1.04); transition:transform 260ms var(--out-ease); }
.outpost-product:hover .outpost-product-visual img { transform:scale(1.045); }
.outpost-product-badge { position:absolute; z-index:4; top:9px; right:9px; padding:3px 7px; border-radius:2px; color:var(--out-bone); background:var(--out-rust); font-size:.57rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.outpost-product-info { height:84px; padding:10px 12px; border-top:1px solid var(--out-line-soft); display:grid; grid-template-rows:auto 1fr auto; }
.outpost-product-info h3 { min-width:0; margin:0; overflow:hidden; color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:.96rem; font-weight:400; letter-spacing:.025em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.outpost-product-info small { min-width:0; overflow:hidden; color:var(--out-muted); font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
.outpost-product-info > div { display:flex; align-items:end; justify-content:space-between; gap:var(--out-space-sm); }
.outpost-product-info strong { color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:1.05rem; font-weight:400; font-variant-numeric:tabular-nums; }
.outpost-product-info button { width:31px; height:31px; border:1px solid var(--out-line); border-radius:3px; display:grid; place-items:center; color:var(--out-copy); background:var(--out-surface-2); }
.outpost-product-info button:hover { color:var(--out-bone); border-color:var(--out-rust); background:var(--out-rust); }
.outpost-product-info button:disabled { cursor:not-allowed; opacity:.45; }
.outpost-product-accent:nth-child(4n+1) { border-color:color-mix(in oklch,var(--out-green) 36%,var(--out-line)); }
.outpost-product-accent:nth-child(4n+2) { border-color:color-mix(in oklch,var(--out-rust) 46%,var(--out-line)); }
.outpost-product-accent:nth-child(4n+3) { border-color:color-mix(in oklch,var(--out-amber) 38%,var(--out-line)); }

.outpost-loading { min-height:480px; padding:var(--out-space-xl); display:grid; grid-template-columns:repeat(5,1fr); gap:var(--out-space-md); }
.outpost-loading span { height:216px; border:1px solid var(--out-line-soft); border-radius:5px; background:var(--out-surface); animation:outpost-pulse 1.2s ease-in-out infinite alternate; }
.outpost-empty { min-height:490px; padding:var(--out-space-2xl); display:grid; place-content:center; justify-items:center; gap:var(--out-space-md); color:var(--out-muted); text-align:center; }
.outpost-empty h2 { margin:0; color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:1.8rem; font-weight:400; }
.outpost-empty p { margin:0; color:var(--out-copy); }
.outpost-empty button { min-height:42px; padding:0 var(--out-space-xl); border:1px solid var(--out-rust); color:var(--out-bone); background:var(--out-rust); font-family:"Bebas Neue",sans-serif; font-size:1rem; }

.outpost-right-rail { position:relative; z-index:3; grid-column:3; grid-row:2; min-width:0; padding:var(--out-space-lg); border-left:1px solid var(--out-line); display:flex; flex-direction:column; gap:var(--out-space-md); background:color-mix(in oklch,var(--out-bg-deep) 94%,var(--out-rust) 6%); }
.outpost-right-rail section { border:1px solid var(--out-line); border-radius:5px; background:var(--out-surface); }
.outpost-deal { padding:var(--out-space-lg); }
.outpost-deal > header { display:flex; justify-content:space-between; gap:var(--out-space-md); color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; }
.outpost-deal > header b { color:var(--out-copy); font-size:.7rem; font-weight:400; font-variant-numeric:tabular-nums; }
.outpost-deal > div { height:126px; margin:var(--out-space-sm) 0; display:grid; place-items:center; overflow:hidden; color:var(--out-muted); background:linear-gradient(150deg,var(--out-surface-2),var(--out-surface)); }
.outpost-deal img { width:94%; height:94%; object-fit:contain; filter:drop-shadow(0 10px 13px var(--out-bg-deep)) brightness(1.08); }
.outpost-deal h3 { margin:0; overflow:hidden; color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:1.05rem; font-weight:400; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.outpost-deal p { margin:var(--out-space-xs) 0 var(--out-space-md); color:var(--out-rust-hot); font-family:"Bebas Neue",sans-serif; font-size:1.24rem; font-variant-numeric:tabular-nums; }
.outpost-deal s { margin-left:var(--out-space-sm); color:var(--out-muted); font-size:.76rem; }
.outpost-deal > button { width:100%; min-height:38px; border:1px solid var(--out-rust); border-radius:3px; color:var(--out-bone); background:var(--out-rust); font-family:"Bebas Neue",sans-serif; font-size:.92rem; letter-spacing:.04em; text-transform:uppercase; transition:transform 150ms var(--out-ease),background 180ms var(--out-ease); }
.outpost-deal > button:hover { transform:translateY(-2px); background:var(--out-rust-hot); }
.outpost-promo { padding:var(--out-space-lg); }
.outpost-promo h3,
.outpost-buyers h3,
.outpost-reward h3 { margin:0; color:var(--out-bone); font-family:"Bebas Neue",sans-serif; font-size:.95rem; font-weight:400; letter-spacing:.04em; text-transform:uppercase; }
.outpost-promo p { min-height:32px; margin:var(--out-space-sm) 0 var(--out-space-md); color:var(--out-copy); font-size:.74rem; line-height:1.4; }
.outpost-promo form { display:grid; grid-template-columns:1fr 38px; gap:var(--out-space-sm); }
.outpost-promo input { min-width:0; height:38px; padding:0 var(--out-space-md); border:1px solid var(--out-line); border-radius:3px; outline:0; color:var(--out-bone); background:var(--out-bg-deep); font-family:"Roboto Condensed",sans-serif; font-size:.75rem; }
.outpost-promo input::placeholder { color:var(--out-muted); opacity:1; }
.outpost-promo form button { height:38px; border:1px solid var(--out-rust); border-radius:3px; display:grid; place-items:center; color:var(--out-bone); background:var(--out-rust); }
.outpost-buyers { padding:var(--out-space-lg); }
.outpost-buyers > header { margin-bottom:var(--out-space-sm); display:flex; align-items:center; justify-content:space-between; gap:var(--out-space-sm); }
.outpost-buyers > header span { color:var(--out-green); font-size:.64rem; }
.outpost-buyers > div { min-height:29px; display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:var(--out-space-sm); color:var(--out-copy); font-size:.72rem; }
.outpost-buyers > div b { color:var(--out-muted); font-weight:400; }
.outpost-buyers > div em { color:var(--out-bone); font-style:normal; font-variant-numeric:tabular-nums; }
.outpost-reward { padding:var(--out-space-lg); display:grid; grid-template-columns:38px 1fr; gap:var(--out-space-md); }
.outpost-reward > .material-symbols-sharp { color:var(--out-amber); }
.outpost-reward p { margin:var(--out-space-sm) 0 var(--out-space-md); color:var(--out-copy); font-size:.7rem; line-height:1.4; }
.outpost-reward span { position:relative; height:20px; display:flex; align-items:end; }
.outpost-reward span::before { content:""; position:absolute; top:0; right:0; left:0; height:4px; border-radius:2px; background:var(--out-surface-3); }
.outpost-reward span i { position:absolute; z-index:1; top:0; left:0; width:69%; height:4px; border-radius:2px; background:var(--out-amber); }
.outpost-reward span b { color:var(--out-muted); font-size:.59rem; font-weight:400; font-variant-numeric:tabular-nums; }

.outpost-footer { min-height:62px; margin-top:var(--out-space-xl); padding:0 var(--out-space-xl); border-top:1px solid var(--out-line-soft); display:flex; align-items:center; justify-content:space-between; gap:var(--out-space-lg); color:var(--out-muted); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; }
.outpost-footer p { margin:0; }
.outpost-footer button { min-height:42px; display:flex; align-items:center; gap:var(--out-space-sm); color:var(--out-copy); text-transform:uppercase; }
.outpost-footer button:hover { color:var(--out-bone); }

@keyframes outpost-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes outpost-art-in { from { opacity:.55; transform:scale(1.065); } to { opacity:1; transform:scale(1.025); } }
@keyframes outpost-scan { from { transform:translateX(-110%); } to { transform:translateX(340%); } }
@keyframes outpost-pulse { from { opacity:.48; } to { opacity:.9; } }

@media (max-width:1360px) {
  [data-style-preset="hate-outpost"] { grid-template-columns:220px minmax(0,1fr) 244px; }
  .outpost-sidebar { padding-inline:var(--out-space-lg); }
  .outpost-brand img { width:118px; }
  .outpost-header { padding-inline:var(--out-space-lg); }
  .outpost-header > nav button { padding-inline:var(--out-space-md); }
  .outpost-header-actions > label { width:146px; }
  .outpost-profile { min-width:46px; width:46px; padding:0; justify-content:center; }
  .outpost-profile span,
  .outpost-profile .material-symbols-sharp:last-child { display:none; }
  .outpost-hero-content { left:38px; }
  .outpost-catalog-section { padding-inline:var(--out-space-lg); }
  .outpost-right-rail { padding:var(--out-space-md); }
}

@media (max-width:1140px) {
  [data-style-preset="hate-outpost"] { grid-template-columns:220px minmax(0,1fr); grid-template-rows:76px auto auto; }
  .outpost-header { grid-column:2; height:76px; }
  .outpost-header > nav button:nth-child(3),
  .outpost-header > nav button:nth-child(4),
  .outpost-header > nav button:nth-child(5) { display:none; }
  .outpost-profile { display:none; }
  .outpost-main { grid-column:2; grid-row:2; }
  .outpost-right-rail { grid-column:2; grid-row:3; border-top:1px solid var(--out-line); border-left:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .outpost-sidebar { grid-row:1 / 4; }
  .outpost-products-row { grid-template-columns:repeat(5,minmax(130px,1fr)); overflow-x:auto; scroll-snap-type:x mandatory; }
  .outpost-product { scroll-snap-align:start; }
  .outpost-hero { height:390px; }
}

@media (max-width:780px) {
  [data-style-preset="hate-outpost"] { display:flex; flex-direction:column; overflow-x:clip; }
  .outpost-header { position:sticky; order:1; width:100%; height:64px; padding:0 var(--out-space-md); }
  .outpost-header > nav { display:none; }
  .outpost-header::before { content:""; flex:0 0 72px; height:48px; background:url('/images/hate/logo.webp') left center / contain no-repeat; }
  .outpost-header-actions { flex:1 1 auto; width:auto; min-width:0; justify-content:flex-end; }
  .outpost-header-actions > label { flex:1 1 auto; width:auto; min-width:0; max-width:220px; }
  .outpost-profile { display:none; }
  .outpost-sidebar { position:sticky; order:2; top:64px; width:100%; height:auto; min-height:0; padding:0; border-right:0; border-bottom:1px solid var(--out-line); overflow:visible; }
  .outpost-brand,
  .outpost-balance,
  .outpost-side-panel,
  .outpost-server-card,
  .outpost-categories > p { display:none; }
  .outpost-categories { margin:0; padding:0 var(--out-space-sm); display:flex; gap:var(--out-space-xs); overflow-x:auto; background:var(--out-bg-deep); }
  .outpost-categories button { flex:0 0 auto; min-height:48px; border:0; border-radius:0; }
  .outpost-categories button span:last-child { font-size:.82rem; }
  .outpost-main { order:3; width:100%; }
  .outpost-right-rail { order:4; width:100%; padding:var(--out-space-md); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--out-line); }
  .outpost-hero { height:560px; min-height:560px; }
  .outpost-hero-art { background-image:linear-gradient(180deg,color-mix(in oklch,var(--out-bg-deep) 22%,transparent),var(--out-bg-deep) 84%),url('/og.webp'); background-position:center,62% center; background-size:cover; }
  .outpost-hero-content { top:34px; right:var(--out-space-lg); left:var(--out-space-lg); width:auto; }
  .outpost-hero-content h1 { font-size:3.05rem; }
  .outpost-hero-content > p { max-width:32ch; }
  .outpost-hero-content > div { flex-wrap:wrap; }
  .outpost-hero-features { right:var(--out-space-lg); bottom:var(--out-space-lg); left:var(--out-space-lg); grid-template-columns:repeat(2,1fr); gap:var(--out-space-md); }
  .outpost-hero-features > div { justify-content:flex-start; }
  .outpost-catalog-anchor { top:-112px; }
  .outpost-catalog-section { padding:var(--out-space-xl) var(--out-space-md) 0; scroll-margin-top:112px; }
  .outpost-products-row { grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .outpost-product { height:230px; }
  .outpost-product-visual { height:142px; }
  .outpost-footer { flex-wrap:wrap; padding-block:var(--out-space-md); }
}

@media (max-width:500px) {
  .outpost-header-actions > label { max-width:none; }
  .outpost-settings,
  .outpost-cart { flex:0 0 44px; }
  .outpost-hero { height:590px; min-height:590px; }
  .outpost-hero-content h1 { font-size:2.72rem; }
  .outpost-hero-content button { min-height:44px; }
  .outpost-hero-features { grid-template-columns:1fr 1fr; }
  .outpost-hero-features > div > .material-symbols-sharp { width:38px; height:38px; }
  .outpost-hero-features small { display:none; }
  .outpost-products-row { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; }
  .outpost-product { flex:0 0 74vw; scroll-snap-align:start; }
  .outpost-catalog-section h2 { font-size:1.05rem; white-space:nowrap; }
  .outpost-catalog-section > header > button { flex:0 0 auto; font-size:.62rem; }
  .outpost-right-rail { grid-template-columns:1fr; }
  .outpost-footer { align-items:flex-start; }
  .outpost-footer p { order:3; width:100%; line-height:1.5; }
}

@media (hover:hover) {
  .outpost-product:hover .outpost-product-scan { animation:outpost-scan 700ms var(--out-ease) both; }
}

@media (pointer:coarse) {
  .outpost-header button,
  .outpost-categories button,
  .outpost-product-info button { min-width:44px; min-height:44px; }
}

@media (prefers-reduced-motion:reduce) {
  [data-style-preset="hate-outpost"] *,
  [data-style-preset="hate-outpost"] *::before,
  [data-style-preset="hate-outpost"] *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}