/* ===========================================================
   EASY WARE ELECTRONICS — Schematic Workshop
   Custom homepage preview. Design system in this single file.
   =========================================================== */

/* TOKENS */
:root {
  --paper: #FAFAF7;
  --paper-2: #F2F1EC;
  --paper-3: #E8E6E0;
  --surface: #FFFFFF;
  --ink: #0A0A0A;
  --ink-2: #2A2A28;
  --ink-3: #5C5C58;
  --ink-4: #9A9A95;
  --edge: #E8E6E0;
  --edge-2: #D4D2CC;
  --grid: rgba(10,10,10,0.05);
  --red: #E63329;
  --red-deep: #B7211A;
  --red-2: #FF5447;
  --red-soft: #FFE8E5;
  --green: #1A7F37;
  --gold: #C9A44A;
  --pcb: #0E3324;
  --pcb-2: #144632;

  --ff-display: "Funnel Display", "Inter Display", system-ui, sans-serif;
  --ff-body: "Manrope", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --t-fast: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-base: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-slow: 600ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --container-max: 1320px;
  --container-pad: clamp(1rem, 4vw, 2rem);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
  /* Safety net: any single rogue element with too-wide intrinsic size
     (a marquee, an unbounded image, an overflowing table) can otherwise
     blow out the viewport and force a horizontal scrollbar across the
     whole page. `overflow-x: clip` prevents that without breaking
     position: sticky like `overflow: hidden` would. */
  overflow-x: clip;
  max-width: 100%;
}
body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image: radial-gradient(circle, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-attachment: fixed;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; width: 100%; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* PRIMITIVES */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
section { padding-block: clamp(3rem, 6vw, 5rem); position: relative; }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--ff-body); font-weight: 700;
  font-size: 0.95rem; letter-spacing: -0.005em;
  border-radius: 999px;
  transition: all var(--t-fast);
  cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
}
/* Primary CTA — mirrors the ghost pattern (transparent fill +
   accent border) but uses brand red, so it shares "Lihat di
   Shopee"'s outlined look while keeping the primary action's
   visual emphasis through the red colour. Hover inverts to a
   solid red fill, matching the ghost-button invert behaviour. */
.btn--primary {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.btn--primary:hover {
  background: var(--red);
  color: white;
  border-color: var(--red);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px var(--red);
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.btn--sm { padding: 0.55rem 1rem; font-size: 0.85rem; }
.btn .icn { width: 1em; height: 1em; }

/* Inline icon: explicit `display` overrides the global `img, svg { display: block }`
   reset so SVGs inside text (utilbar, links, buttons) flow with the text instead
   of breaking onto a new line. */
.icn { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }

/* BRAND MARK */
.brand { display: inline-flex; align-items: center; gap: 0.65rem; }
.brand__mark {
  width: 40px; height: 40px;
  background: var(--red);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
}
.brand__mark::after {
  content: ""; position: absolute; inset: -3px;
  border: 1px dashed var(--red);
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.brand:hover .brand__mark::after { opacity: 0.5; }
.brand__mark svg { width: 24px; height: 24px; }
.brand__type { display: flex; flex-direction: column; line-height: 1; }
.brand__type strong {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.brand__type span {
  font-family: var(--ff-mono);
  font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

/* Image-mode brand (when assets/img/logo.* exists)
 * Selectors are doubled (.brand.brand--img / .brand .brand__img) so they
 * beat WooCommerce's `.woocommerce-page img { height:auto; max-width:100% }`
 * (specificity 0,1,1) on cart/checkout pages.
 */
.brand.brand--img { gap: 0; }
.brand .brand__img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  transition: transform var(--t-fast);
}
.brand.brand--img:hover .brand__img { transform: scale(1.02); }
@media (max-width: 880px) {
  .brand .brand__img { height: 38px; }
}
.footer .brand .brand__img { height: 56px; max-width: 240px; }

/* UTILITY BAR */
.utilbar {
  background: var(--ink); color: var(--paper);
  font-size: 0.78rem; font-family: var(--ff-mono);
  letter-spacing: 0.02em;
}
.utilbar__inner {
  display: flex; justify-content: space-between; align-items: center;
  height: 36px; gap: 1rem;
}
/* 404 page */
.ew-404 {
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 6vw, 6rem) 0;
  text-align: center;
}
.ew-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 600px;
}
.ew-404__code {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(6rem, 16vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--red);
  position: relative;
}
.ew-404__code::after {
  content: "";
  position: absolute;
  inset: auto -1rem -0.5rem -1rem;
  height: 6px;
  background: var(--red);
  opacity: 0.15;
  transform: skewX(-8deg);
}
.ew-404__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.ew-404__lede {
  color: var(--ink-3);
  font-size: 1rem;
  max-width: 480px;
  line-height: 1.55;
  margin: 0;
}
.ew-404__cta {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ew-404__search {
  margin-top: 1rem;
  width: 100%;
  max-width: 480px;
}

.utilbar__group { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.utilbar__group > span,
.utilbar__group > a { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.utilbar__sep { width: 4px; height: 4px; background: var(--red); border-radius: 50%; flex-shrink: 0; }
.utilbar__pipe { color: rgba(250,250,247,0.3); margin-inline: -0.35rem; flex-shrink: 0; }
.utilbar a { display: inline-flex; align-items: center; gap: 0.4rem; transition: color var(--t-fast); }
.utilbar a:hover { color: var(--red-2); }
@media (max-width: 720px) { .utilbar { display: none; } }

/* HEADER */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 247, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--edge);
}
.header__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  height: 80px;
}
@media (max-width: 880px) {
  .header__row { gap: 0.6rem; height: 64px; }
  .brand__type span { display: none; }
  .brand__type strong { font-size: 1.2rem; }
}

/* Header search form. Scoped to `form.search` so it doesn't collide with
   `body.search` (which WordPress adds on any search-results route). */
form.search {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.1rem;
  height: 50px;
  max-width: 640px;
  margin-inline: auto;
  width: 100%;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
form.search:focus-within { box-shadow: 0 0 0 4px var(--red-soft); border-color: var(--red); }
.search__icon { color: var(--ink-3); margin-right: 0.5rem; }
.search__input { height: 100%; font-size: 0.95rem; }
.search__input::placeholder { color: var(--ink-4); }
/* Suppress the global `:focus-visible` 2px red outline on the bare
   <input> — the pill-rounded form wrapper already shows focus via
   the `:focus-within` red-soft halo + ink→red border swap above, and
   the rectangular outline on the input clashes with the rounded
   container (renders as a sharp red box inside the pill). */
.search__input:focus,
.search__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.search__cat {
  font-family: var(--ff-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 0.85rem;
  border-left: 1px solid var(--edge-2);
  display: flex; align-items: center; gap: 0.4rem;
  height: 22px; align-self: center;
  white-space: nowrap;
}
.search__btn {
  background: var(--red); color: white;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background var(--t-fast), transform var(--t-fast);
  flex-shrink: 0;
}
.search__btn:hover { background: var(--red-deep); transform: rotate(-8deg); }
.search__btn svg { width: 16px; height: 16px; }
@media (max-width: 880px) { .search__cat { display: none; } }

/* Search autocomplete dropdown — anchored to form.search */
.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  box-shadow: 0 24px 48px -16px rgba(10,10,10,0.18);
  z-index: 60;
  max-height: min(560px, 70vh);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
}
.search-suggest[hidden] { display: none; }
.search-suggest::-webkit-scrollbar { width: 6px; }
.search-suggest::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; }

.search-suggest__list {
  list-style: none;
  margin: 0; padding: 0;
}
.search-suggest__item {
  border-bottom: 1px solid var(--edge);
}
.search-suggest__item:last-child { border-bottom: 0; }

.search-suggest__link {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.7rem 0.95rem;
  color: var(--ink);
  transition: background var(--t-fast);
}
.search-suggest__item.is-active .search-suggest__link,
.search-suggest__link:hover { background: var(--paper-2); }

.search-suggest__thumb {
  width: 48px; height: 48px;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper);
  background-size: 12px 12px;
  border: 1px solid var(--edge);
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.search-suggest__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.search-suggest__body {
  display: flex; flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.search-suggest__sku {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggest__name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-suggest__price {
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.search-suggest__price.is-sale { color: var(--red); }

/* Highlighted match — yellow band like the LCSC reference */
.search-suggest mark {
  background: #fff3a3;
  color: var(--ink);
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}

.search-suggest__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  transition: background var(--t-fast), gap var(--t-fast);
}
.search-suggest__more:hover {
  background: var(--ink);
  color: var(--paper);
  gap: 0.85rem;
}
.search-suggest__more svg { width: 14px; height: 14px; flex-shrink: 0; }
.search-suggest__more[hidden] { display: none; }

.search-suggest__empty {
  padding: 1.25rem 1rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-align: center;
}
.search-suggest__empty[hidden] { display: none; }

/* Mobile adjustments — dropdown can extend full container width */
@media (max-width: 880px) {
  .search-suggest {
    max-height: 60vh;
  }
  .search-suggest__link {
    grid-template-columns: 40px 1fr auto;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
  }
  .search-suggest__thumb { width: 40px; height: 40px; }
  .search-suggest__name { font-size: 0.88rem; }
  .search-suggest__price { font-size: 0.78rem; }
}

.header__actions { display: flex; align-items: center; gap: 0.15rem; }
.icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  position: relative;
  color: var(--ink);
  transition: background var(--t-fast);
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn .icn { width: 20px; height: 20px; }
.icon-btn__badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 20px; height: 20px;
  background: var(--red); color: white;
  font-family: var(--ff-mono);
  font-size: 0.66rem; font-weight: 700;
  border-radius: 999px;
  display: grid; place-items: center;
  padding: 0 5px;
  border: 2px solid var(--paper);
  transition: transform var(--t-fast);
}
.icon-btn--cart:hover .icon-btn__badge { transform: scale(1.15); }
.header__cart-text {
  display: none;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--edge-2);
}
.header__cart-text strong { display: block; color: var(--red); font-weight: 700; }
@media (min-width: 1100px) { .header__cart-text { display: block; } }

/* CATEGORY RIBBON
   Inline row hosts the "Semua Kategori" trigger + "FLASH SALE" pill +
   a flat nav menu (Tentang / Blog / Kontak / FAQ / …) instead of the
   product-category list it used to render. Markup driven by
   `header.php` — if a WP "Primary Menu" is assigned that wins,
   otherwise a hard-coded fallback list shows up. */

.ribbon {
  background: var(--paper);
  border-bottom: 1px solid var(--edge);
  position: sticky; top: 80px; z-index: 40;
  /* visible so the cats-menu panel can extend below the ribbon */
}
@media (max-width: 880px) { .ribbon { top: 64px; } }
.ribbon__layout {
  display: flex; align-items: stretch;
  gap: 0;
  height: 48px;
}
.ribbon__inner {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center;
  height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  /* mask the right edge so categories visibly fade out, hinting at scroll */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}
.ribbon__inner::-webkit-scrollbar { display: none; }
.ribbon__more { display: none; }
.ribbon__item {
  font-weight: 600; font-size: 0.85rem;
  color: var(--ink-2);
  padding: 0 1.1rem;
  height: 100%;
  display: flex; align-items: center; gap: 0.4rem;
  border-right: 1px solid var(--edge);
  white-space: nowrap; flex-shrink: 0;
  position: relative;
  transition: color var(--t-fast), background var(--t-fast);
}
.ribbon__item:hover { color: var(--red); background: var(--paper-2); }
.ribbon__item--hot { color: var(--red); }
.ribbon__item--hot::before {
  content: ""; width: 6px; height: 6px;
  background: var(--red); border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.6); }
}

/* SEMUA KATEGORI mega menu (leading item in the ribbon) ----- */
.cats-menu {
  position: relative;
  flex-shrink: 0;
  display: flex; align-items: center;
  border-right: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.cats-menu__trigger {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0 1.25rem;
  height: 100%;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.005em;
  color: var(--paper);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.cats-menu__trigger:hover,
.cats-menu__trigger[aria-expanded="true"] {
  background: var(--red);
  color: white;
}
.cats-menu__bars { width: 16px; height: 16px; flex-shrink: 0; }
.cats-menu__caret {
  width: 12px; height: 12px;
  transition: transform var(--t-fast);
  margin-left: 0.15rem;
}
.cats-menu__trigger[aria-expanded="true"] .cats-menu__caret { transform: rotate(180deg); }

/* Dropdown panel — anchored under the trigger.
   IMPORTANT: do NOT set overflow on the panel itself. Setting `overflow-y: auto`
   would force overflow-x to also clip (per CSS spec), which would clip the
   `.cats-menu__sub` fly-out that extends past the panel's right edge.
   If we ever need to scroll a very long parent list, scroll the inner
   `.cats-menu__list` (overflow:visible parent + overflow:auto child works). */
.cats-menu__panel {
  position: absolute;
  top: 100%; left: 0;
  width: 720px;
  min-height: 460px;
  display: flex;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-top: 0;
  box-shadow: 0 24px 48px -16px rgba(10,10,10,0.18);
  z-index: 60;
}
.cats-menu__panel[hidden] { display: none; }

/* Desktop hover reveal — overrides the [hidden] attribute when the
   trigger or panel is hovered/focused. JS also opens on mouseenter
   to keep aria-expanded in sync, but this CSS path keeps the menu
   usable even if the script is slow to load or blocked. Sub-flyouts
   (.cats-menu__sub) already open on hover via existing rules. */
@media (hover: hover) and (min-width: 721px) {
  .cats-menu:hover .cats-menu__panel[hidden],
  .cats-menu:focus-within .cats-menu__panel[hidden] {
    display: block;
  }
  .cats-menu:hover .cats-menu__trigger,
  .cats-menu:focus-within .cats-menu__trigger {
    background: var(--red);
    color: white;
  }
}

.cats-menu__list {
  list-style: none;
  margin: 0; padding: 0;
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--edge);
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.cats-menu__list::-webkit-scrollbar { width: 5px; }
.cats-menu__list::-webkit-scrollbar-thumb { background: var(--edge-2); border-radius: 3px; }
.cats-menu__item {
  border-bottom: 1px solid var(--edge);
}
.cats-menu__item:last-child { border-bottom: 0; }
.cats-menu__link {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem;
  color: var(--ink);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  transition: background var(--t-fast), color var(--t-fast);
}
.cats-menu__item:hover > .cats-menu__link,
.cats-menu__item:focus-within > .cats-menu__link,
.cats-menu__item.is-open > .cats-menu__link {
  background: var(--paper-2);
  color: var(--red);
}
.cats-menu__ico {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--ink-3);
}
.cats-menu__ico svg { width: 100%; height: 100%; }
.cats-menu__item:hover .cats-menu__ico,
.cats-menu__item.is-open .cats-menu__ico { color: var(--red); }

.cats-menu__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cats-menu__count {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-3);
  padding: 2px 7px;
  background: var(--paper-2);
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.cats-menu__item:hover .cats-menu__count,
.cats-menu__item.is-open .cats-menu__count {
  background: white;
  color: var(--red);
}
.cats-menu__arrow {
  width: 12px; height: 12px;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform var(--t-fast), color var(--t-fast);
}
.cats-menu__item:hover .cats-menu__arrow,
.cats-menu__item.is-open .cats-menu__arrow {
  color: var(--red);
  transform: translateX(2px);
}

/* Sub-panel — fills the RIGHT COLUMN of the 2-column panel.
   Positioned absolute relative to .cats-menu__panel (the panel is
   `display: flex`, so subs sit on top of the right space via abs
   positioning). Only ONE sub visible at a time — controlled by
   :hover on parent item + :has() fallback for "default = first".
   Grandchildren render inline (see .cats-menu__grand-list). */
.cats-menu__sub {
  position: absolute;
  top: 0;
  left: 280px;            /* right edge of .cats-menu__list */
  right: 0;
  bottom: 0;
  background: var(--surface);
  padding: 1.5rem;
  display: none;
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 1;
}
.cats-menu__sub::-webkit-scrollbar { width: 6px; }
.cats-menu__sub::-webkit-scrollbar-thumb { background: var(--edge-2); border-radius: 3px; }

/* Default: first item's sub visible when no hover. */
.cats-menu__list > .cats-menu__item.has-children:first-child > .cats-menu__sub {
  display: block;
}
/* When any item with children is hovered/focused, show its sub. */
.cats-menu__list > .cats-menu__item.has-children:hover > .cats-menu__sub,
.cats-menu__list > .cats-menu__item.has-children:focus-within > .cats-menu__sub,
.cats-menu__list > .cats-menu__item.has-children.is-open > .cats-menu__sub {
  display: block;
}
/* :has() hides the default when ANY item is being hovered, so two
   subs don't render on top of each other. Modern-browser only —
   on Chrome 105+, Safari 15.4+, Firefox 121+ this works. */
.cats-menu__list:has(.cats-menu__item:hover) > .cats-menu__item.has-children:first-child > .cats-menu__sub {
  display: none;
}
.cats-menu__list:has(.cats-menu__item:hover) > .cats-menu__item.has-children:hover > .cats-menu__sub {
  display: block;
}
/* Visual cue on the active/hovered item in the left column. */
.cats-menu__item.has-children:hover > .cats-menu__link {
  background: var(--paper-2);
  color: var(--red);
  font-weight: 700;
}

.cats-menu__sub-head {
  display: flex; flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--edge);
}
.cats-menu__sub-kicker {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--red);
}
.cats-menu__sub-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.cats-menu__sub-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.cats-menu__sub-list > li { margin: 0; }
.cats-menu__sub-link {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0.55rem 0;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  border-bottom: 1px dashed var(--edge-2);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.cats-menu__sub-list .has-grandchildren > .cats-menu__sub-link {
  border-bottom: 0;
  padding-bottom: 0.25rem;
}
.cats-menu__sub-link:hover {
  color: var(--red);
  padding-left: 0.4rem;
}
.cats-menu__sub-link em {
  font-style: normal;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-3);
}

/* Grandchildren (Level 3) — rendered INLINE under each Level-2
   sub-cat in the same flyout. No positioning math, no second hover
   target — just an indented dashed-bordered list that's always
   visible whenever the parent Level-2 flyout opens. Reads top-to-
   bottom like a sitemap. */
.cats-menu__grand-list {
  list-style: none;
  margin: 0.25rem 0 0.6rem 0.4rem;
  padding: 0 0 0 0.85rem;
  display: flex;
  flex-direction: column;
  border-left: 1px dashed var(--edge);
}
.cats-menu__grand-list li { margin: 0; }
.cats-menu__grand-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-family: var(--ff-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-3);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.cats-menu__grand-list a:hover {
  color: var(--red);
  padding-left: 0.35rem;
}
.cats-menu__grand-list em {
  font-style: normal;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  color: var(--ink-4);
}
.cats-menu__sub-all {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
  transition: background var(--t-fast), gap var(--t-fast);
}
.cats-menu__sub-all:hover { background: var(--red); gap: 0.6rem; }
.cats-menu__sub-all svg { width: 12px; height: 12px; }

/* Mobile: lay the trigger flat in the ribbon, hide the right-side fly-out
   and use an inline accordion behaviour driven by .is-open. */
@media (max-width: 720px) {
  .cats-menu__trigger {
    padding: 0 0.85rem;
    font-size: 0.82rem;
  }
  .cats-menu__bars { width: 14px; height: 14px; }
  .cats-menu__panel {
    /* full-width sheet anchored under the ribbon */
    position: fixed;
    top: calc(64px + 48px);   /* header (mobile) + ribbon */
    left: 0; right: 0;
    width: auto;
    max-height: calc(100vh - 64px - 48px);
    border-left: 0; border-right: 0;
  }
  .cats-menu__sub {
    position: static;
    width: 100%;
    border: 0;
    border-top: 1px dashed var(--edge);
    box-shadow: none;
    padding: 0.75rem 1rem 1rem 2.5rem;
    background: var(--paper);
  }
  /* Tap to expand on mobile (not hover) */
  .cats-menu__item:hover > .cats-menu__sub { display: none; }
  .cats-menu__item.is-open > .cats-menu__sub { display: block; }
  .cats-menu__item:hover > .cats-menu__link,
  .cats-menu__item:focus-within > .cats-menu__link {
    background: transparent;
    color: var(--ink);
  }
  /* On mobile, grandchildren render INLINE under their parent
     sub-cat (no third flyout column — would go off-screen).
     Indent + smaller font preserves the visual hierarchy. */
  .cats-menu__grand-list {
    position: static !important;
    display: flex !important;
    width: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0.5rem 1.25rem !important;
    border-left: 1px dashed var(--edge) !important;
    margin: 0.25rem 0 0.5rem 0.25rem !important;
  }
  .cats-menu__grand-list a { font-size: 0.82rem !important; padding: 0.35rem 0 !important; }
  .cats-menu__sub-item.has-grandchildren > .cats-menu__sub-link::after { display: none; }
}

/* HERO */
.hero {
  position: relative;
  padding: clamp(2rem, 3.5vw, 3rem) 0 clamp(2.5rem, 4.5vw, 4rem);
  overflow: hidden;
}
.hero__crosshair {
  position: absolute;
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  color: var(--ink-4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero__crosshair--tl { top: 1rem; left: var(--container-pad); }
.hero__crosshair--tr { top: 1rem; right: var(--container-pad); text-align: right; }
.hero__crosshair--br { bottom: 1rem; right: var(--container-pad); text-align: right; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.25rem;
  align-items: center;
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
}
.hero__head { display: flex; flex-direction: column; gap: 1.25rem; max-width: 600px; }
.hero__sec-num {
  font-family: var(--ff-mono);
  font-size: 0.72rem; letter-spacing: 0.12em;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 0.75rem;
}
.hero__sec-num strong { color: var(--red); font-weight: 700; }
.hero__sec-num::after {
  content: ""; flex: 1; max-width: 200px;
  background: linear-gradient(to right, var(--ink-4) 50%, transparent 50%);
  background-size: 6px 1px;
  height: 1px;
}

.hero__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.hero__title em {
  font-style: normal;
  color: var(--red);
  position: relative;
  display: inline-block;
}
.hero__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6%;
  height: 8px;
  background: var(--red);
  opacity: 0.14;
  z-index: -1;
  transform: skewX(-8deg);
}
.hero__lede {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: var(--ink-2);
  max-width: 520px;
  line-height: 1.55;
}
.hero__cta { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hero__stats {
  display: flex; gap: 0; align-items: stretch;
  margin-top: 0.25rem;
  border-top: 1.5px solid var(--ink);
  padding-top: 1rem;
}
.hero__stat {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 0.15rem;
  padding-right: 1rem;
  border-right: 1px solid var(--edge-2);
}
.hero__stat:last-child { border-right: 0; padding-right: 0; }
.hero__stat:not(:first-child) { padding-left: 1rem; }
.hero__stat strong {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.hero__stat span {
  font-family: var(--ff-mono);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 0.25rem;
}

/* hero PCB illustration */
.hero__viz {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin-inline: auto;
  width: 100%;
}
.hero__viz svg.pcb { width: 100%; height: 100%; }
.hero__viz svg.lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 3;
}
.hero__cal {
  position: absolute;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  padding: 4px 10px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  white-space: nowrap;
  z-index: 4;
  opacity: 0;
  animation: fade-up 600ms var(--t-fast) forwards;
}
.hero__cal::before {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
}
.hero__cal--1 { top: 12%; right: -2%; animation-delay: 1s; }
.hero__cal--1::before { left: -10px; top: 50%; transform: translateY(-50%); }
.hero__cal--2 { top: 38%; left: -10%; animation-delay: 1.3s; }
.hero__cal--2::before { right: -10px; top: 50%; transform: translateY(-50%); }
.hero__cal--3 { bottom: 28%; right: 0%; animation-delay: 1.6s; }
.hero__cal--3::before { left: -10px; top: 50%; transform: translateY(-50%); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__spec-card {
  position: absolute;
  bottom: -6%;
  left: -4%;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  padding: 1rem 1.1rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  display: flex; flex-direction: column; gap: 0.45rem;
  box-shadow: 8px 8px 0 var(--ink);
  min-width: min(240px, calc(100% - 1rem));
  max-width: calc(100% - 1rem);
  z-index: 4;
}
.hero__spec-card strong { font-weight: 700; color: var(--ink); }
.hero__spec-card .row {
  display: flex; justify-content: space-between; gap: 1rem;
  color: var(--ink-3); font-size: 0.72rem;
}
.hero__spec-card .row em { font-style: normal; color: var(--ink); font-weight: 600; }
.hero__spec-card .pill {
  display: inline-block; padding: 2px 8px;
  background: var(--red); color: white;
  border-radius: 2px;
  font-size: 0.65rem; letter-spacing: 0.05em;
  text-transform: uppercase;
  align-self: flex-start;
}
@media (max-width: 980px) { .hero__spec-card { left: 0; } }
@media (max-width: 540px) {
  .hero__cal { font-size: 0.65rem; padding: 2px 6px; }
  .hero__spec-card { font-size: 0.72rem; min-width: 0; max-width: calc(100% - 0.5rem); padding: 0.75rem 0.85rem; box-shadow: 4px 4px 0 var(--ink); }
  .hero__cal--1, .hero__cal--2, .hero__cal--3 { display: none; }
  .hero__stats { flex-wrap: wrap; gap: 0.75rem 0; }
  .hero__stat { flex: 0 0 calc(50% - 0.5rem); padding-right: 0.5rem !important; padding-left: 0 !important; border-right: 0 !important; }
  .hero__stat:nth-child(2n) { padding-right: 0 !important; padding-left: 0.5rem !important; }
}

/* MARQUEE */
.marquee {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: flex;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  height: clamp(44px, 6vw, 52px);
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  width: max-content;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee__item {
  font-family: var(--ff-mono);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 1rem;
}
.marquee__star { color: var(--red); font-size: 1.1rem; }

/* SECTION HEAD */
.sec-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 2rem; margin-bottom: 2.5rem;
}
@media (max-width: 720px) {
  .sec-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
.sec-head__intro { display: flex; flex-direction: column; gap: 0.85rem; max-width: 60%; }
@media (max-width: 720px) { .sec-head__intro { max-width: 100%; } }
.sec-head__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
.sec-head__title em { font-style: normal; color: var(--red); }
.sec-head__sub { color: var(--ink-3); font-size: 0.95rem; max-width: 480px; }
.sec-head__link {
  font-family: var(--ff-mono);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink);
  transition: color var(--t-fast), border-color var(--t-fast), gap var(--t-fast);
}
.sec-head__link:hover { color: var(--red); border-color: var(--red); gap: 0.8rem; }

/* CATEGORIES GRID
   Full 1.5px outer border lives on the container — cells contribute
   only INTERNAL dividers. Same fix as `.markets`: when the outer
   right was a single cell.border-right and outer bottom was 4
   stitched cell.border-bottom segments, subpixel rounding on 1× DPR
   displays made some edges render thinner than others. Centralising
   the outer frame on the container removes that inconsistency. */
.cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1.5px solid var(--ink);
}
.cat {
  position: relative;
  padding: 1.85rem 1.4rem 1.4rem;
  /* Both internal dividers as base — per-position strips below
     handle the last column / row at each breakpoint. */
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 230px;
  transition: background var(--t-fast);
  overflow: hidden;
}

/* Desktop ≥881 px: 4-col layout (always 8 cells = 2 rows).
   Strip the right of col 4 and the bottom of row 2.
   Scoped to min-width so the :nth-child math doesn't leak into
   the 2-col layout below — at 2-col, cells 4 + 8 are still col 2,
   but cells 5–8 span 2 rows, not 1, so stripping them all would
   kill the inner row divider. */
@media (min-width: 881px) {
  .cat:nth-child(4n) { border-right: 0; }
  .cat:nth-last-child(-n+4) { border-bottom: 0; }
}

@media (max-width: 880px) and (min-width: 541px) {
  .cats { grid-template-columns: repeat(2, 1fr); }
  /* 2-col layout = 4 rows × 2 cols. Strip the right of col 2 and
     the bottom of the last row only. */
  .cat:nth-child(2n) { border-right: 0; }
  .cat:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 540px) {
  .cats { grid-template-columns: 1fr; }
  .cat {
    border-right: 0;
    min-height: 180px;
    padding: 1.5rem 1.25rem 1.25rem;
  }
  .cat:last-child { border-bottom: 0; }
}
.cat::before, .cat::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--red);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.cat::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.cat::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.cat:hover { background: var(--paper-2); }
.cat:hover::before, .cat:hover::after { opacity: 1; }
.cat__num {
  font-family: var(--ff-mono);
  font-size: 0.65rem; letter-spacing: 0.12em;
  color: var(--ink-3);
}
.cat__icon {
  width: 56px; height: 56px;
  color: var(--ink);
  transition: color var(--t-fast), transform var(--t-base);
}
.cat:hover .cat__icon { color: var(--red); transform: rotate(-6deg) scale(1.05); }
.cat__icon svg { width: 100%; height: 100%; }
.cat__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: auto;
}
.cat__count {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 0.35rem;
}
.cat__count em { font-style: normal; color: var(--red); font-weight: 600; }
.cat__arrow {
  position: absolute;
  bottom: 1.25rem; right: 1.25rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  transform: translateY(8px);
  opacity: 0;
  transition: all var(--t-fast);
}
.cat:hover .cat__arrow { opacity: 1; transform: translateY(0); background: var(--red); }
.cat__arrow svg { width: 13px; height: 13px; }

/* FLASH SALE
   On-brand warm gradient — feels urgent/sale instead of the gloomy
   solid ink the section used to wear. White text + white digit
   tiles + subtle diagonal cream stripes on top of the gradient. */
.flash {
  background:
    linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color: white;
  padding: 2.5rem clamp(1rem, 4vw, 2.5rem);
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--red-deep);
  border-radius: 12px;
}
.flash::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.08) 49%, rgba(255,255,255,0.08) 51%, transparent 52%);
  background-size: 38px 38px;
  pointer-events: none;
  animation: scroll-stripes 30s linear infinite;
}
/* Soft radial glow at top-left + bottom-right for depth */
.flash::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.15) 0%, transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(0,0,0,0.18) 0%, transparent 40%);
  pointer-events: none;
}
@keyframes scroll-stripes {
  to { background-position: 380px 380px; }
}
.flash__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
  position: relative; z-index: 2;
}
.flash__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  letter-spacing: -0.035em;
  line-height: 1;
  display: flex; align-items: center; gap: 0.75rem;
}
.flash__bolt {
  width: clamp(32px, 5vw, 40px);
  height: clamp(32px, 5vw, 40px);
  /* On red bg, flip to white tile with red icon so the bolt pops
     instead of blending into the background. */
  background: white;
  color: var(--red);
  display: grid; place-items: center;
  border-radius: 50%;
  animation: shake 0.6s ease-in-out infinite alternate;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,0.3);
}
.flash__bolt svg { width: 18px; height: 18px; }
@keyframes shake {
  0% { transform: rotate(-8deg) scale(1); }
  100% { transform: rotate(8deg) scale(1.05); }
}
.flash__timer {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--ff-mono);
  position: relative; z-index: 2;
}
.flash__timer-label {
  font-size: 0.7rem; letter-spacing: 0.12em;
  /* Higher contrast than the old rgba(0.5) — readable on red */
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  margin-right: 0.5rem;
  font-weight: 600;
}
.flash__digit {
  background: white;
  color: var(--red);
  padding: 0.5rem 0.6rem;
  font-weight: 800; font-size: 1.15rem;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: center;
  box-shadow: 0 4px 10px -6px rgba(0,0,0,0.35);
}
.flash__colon {
  color: white;
  opacity: 0.75;
  font-weight: 800;
  font-size: 1.15rem;
}
.flash__rail {
  display: flex; gap: 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
  padding-bottom: 0.75rem;
  position: relative; z-index: 2;
}
.flash__rail::-webkit-scrollbar { height: 6px; }
.flash__rail::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.flash__rail::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }

.flash__card {
  flex-shrink: 0;
  width: 240px;
  background: var(--paper);
  color: var(--ink);
  padding: 1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  position: relative;
  transition: transform var(--t-fast);
}
.flash__card::after {
  content: "";
  position: absolute; inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color var(--t-fast);
}
.flash__card:hover { transform: translateY(-2px); }
.flash__card:hover::after { border-color: var(--red); }
.flash__pct {
  position: absolute;
  top: 0; right: 0;
  background: var(--red); color: white;
  font-family: var(--ff-mono); font-weight: 700;
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
  letter-spacing: -0.01em;
  z-index: 2;
}
.flash__img {
  aspect-ratio: 1;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--surface);
  background-size: 14px 14px;
  display: grid; place-items: center;
  border: 1px solid var(--edge);
}
.flash__img svg { width: 78%; height: 78%; }
.flash__sku {
  font-family: var(--ff-mono);
  font-size: 0.65rem; letter-spacing: 0.08em;
  color: var(--ink-3);
}
.flash__name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  min-height: 2.4em;
}
.flash__price-row { display: flex; align-items: baseline; gap: 0.5rem; }
.flash__old {
  font-size: 0.78rem;
  text-decoration: line-through;
  color: var(--ink-4);
  font-family: var(--ff-mono);
}
.flash__new {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--red);
  letter-spacing: -0.02em;
}
.flash__bar { background: var(--edge); height: 5px; border-radius: 999px; overflow: hidden; }
.flash__bar-fill { background: var(--red); height: 100%; border-radius: 999px; }
.flash__bar-text {
  font-family: var(--ff-mono);
  font-size: 0.65rem; color: var(--ink-3);
  display: flex; justify-content: space-between;
}

/* TABS + PRODUCTS */
.tabs {
  display: flex; gap: 0;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.tabs__btn {
  font-family: var(--ff-display);
  font-weight: 600; font-size: 1rem;
  letter-spacing: -0.01em;
  padding: 0.85rem 0;
  margin-right: 1.75rem;
  color: var(--ink-3);
  border-bottom: 2px solid transparent;
  transform: translateY(2px);
  transition: color var(--t-fast), border-color var(--t-fast);
  position: relative;
}
/* Active tab — bold text + ink colour swap. Red underline removed
   per design (it left a stray-looking corner artifact above the first
   product card). The "→ " arrow prefix stays as a secondary cue. */
.tabs__btn--active { color: var(--ink); font-weight: 800; }
.tabs__btn--active::before {
  content: "→ "; color: var(--red); font-family: var(--ff-mono); font-weight: 700;
}
.tabs__btn:hover { color: var(--ink); }

/* Homepage product grid. Renamed from `.products` to `.ew-products`
   so it doesn't collide with WC's `<section class="related products">`
   or `<section class="upsells products">` on single-product pages. */
.ew-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Defensive: `display: grid` outranks the user-agent `[hidden]
   { display: none }` rule, so the inactive tab panels would still
   show through. This class-level rule re-enforces the hidden state. */
.ew-products[hidden] { display: none !important; }
@media (max-width: 1080px) { .ew-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .ew-products { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } }
@media (max-width: 360px) { .ew-products { grid-template-columns: 1fr; } }

/* Empty-state message inside an empty tab panel */
.ew-products__empty {
  grid-column: 1 / -1;
  padding: 2rem 1rem;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border: 1px dashed var(--edge-2);
  border-radius: 8px;
  background: var(--paper);
}

/* =====================================================
   .prod — Tokopedia / Shopee-style compact loop card
   ===================================================== */
.prod {
  background: var(--surface) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  position: relative;
  /* Border removed — the .edge-2 outline left a visible L-bracket at
     the top-left corner where its 10px radius didn't align with the
     inner .prod__img 8px radius. Card now relies on shadow alone for
     visual separation. */
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(10,10,10,0.04),
    0 6px 14px -8px rgba(10,10,10,0.16);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  min-width: 0;
}
.prod:hover {
  /* Border stays at default tone on hover (no dark `--ink` swap).
     The shadow lift alone is enough to signal interactivity. */
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(10,10,10,0.06),
    0 18px 36px -14px rgba(10,10,10,0.32);
}

/* Image area — square box ringed by a 2px red border on all four
   sides. The border is the brand's visual identity for the card; it
   stays on through every interaction state. */
.prod__img {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Border removed (was 2px paper — visually invisible anyway after
     the red→cream swap) to ensure the photo area sits flush against
     the card edge with no chance of leaking a thin frame line. */
  border: 0 !important;
  /* Radius matches .prod's 10px so the photo's rounded top corners
     align flush with the card's outer curve (no L-bracket sliver). */
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper);
  background-size: 18px 18px;
  overflow: hidden;
  flex: 0 0 auto !important;
  display: block !important;
  width: 100% !important;
}
.prod__img svg { width: 76%; height: 76%; transition: transform var(--t-base); }
.prod__img {
  /* `line-height: 0` kills the baseline gap that browsers insert
     below inline-replaced elements (the img). Without this, a
     phantom 4-8 px strip appears between the photo and the next
     flex sibling. */
  line-height: 0 !important;
  font-size: 0;
}
.prod__img img,
.prod__img .prod__photo {
  width: 100% !important;
  height: 100% !important;
  /* `contain` so the product photo (which often has its own designed
     border / banners baked in) shows in full instead of being cropped
     by `cover`. Square photos render identically to before. */
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
  transition: transform var(--t-base);
}
.prod:hover .prod__img svg { transform: scale(1.06) rotate(-3deg); }
.prod:hover .prod__img img { transform: scale(1.04); }

/* Pin border:0 across every interaction state — the photo area sits
   flush against the rounded card edge with no frame. Per-side
   `border-*-width: 0 !important` covers the case where some other
   rule (WC defaults, browser UA) tries to apply a per-side shorthand. */
.prod__img,
.prod__img:hover,
.prod__img:focus,
.prod__img:focus-visible,
.prod__img:focus-within,
.prod__img:active,
.prod__img:visited,
.prod:hover .prod__img,
.prod:focus .prod__img,
.prod:focus-within .prod__img,
.prod:active .prod__img,
ul.products li.product .prod__img,
ul.products li.product:hover .prod__img,
ul.products li.product:focus-within .prod__img {
  border: 0 !important;
  border-top-width: 0 !important;
  border-right-width: 0 !important;
  border-bottom-width: 0 !important;
  border-left-width: 0 !important;
}

/* Sale / hot / out-of-stock badge — sits over the image, top-left.
   Single small pill so it doesn't crowd the photo. */
.prod__badge {
  position: absolute;
  top: 6px; left: 6px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--red-soft);
  color: var(--red-deep);
  z-index: 2;
}
/* Red overlay badges hidden per design request — the red corner pulled
   visual weight away from the photo and the price. Out-of-stock badge
   (ink, not red) stays since it carries real customer-affecting info. */
.prod__badge--hot,
.prod__badge--sale { display: none !important; }
.prod__badge--out  { background: var(--ink);   color: var(--paper); }

.prod__body {
  /* Title sits ≈8 px below the red line. `flex: 1` so the body
     itself fills any extra height when the grid stretches the card
     to match siblings — the empty space goes BELOW meta (out of
     sight) instead of above title. */
  padding: 0.5rem 0.6rem 0.65rem !important;
  margin: 0 !important;
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0.2rem !important;
  flex: 1 1 auto !important;
  min-width: 0;
  background: var(--surface) !important;
}
/* Product name — exactly 2 lines, ellipsis ("…") on overflow.
   Cards stay a uniform height regardless of title length: short
   titles use 2 lines (line 2 empty); long ones get truncated with
   a "…" marker. Native browser tooltip on the anchor (`title=…`)
   surfaces the full name on hover. */
.prod__name {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.84rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 !important;
  padding: 0 !important;
  height: calc(1.3em * 2) !important;
  max-height: calc(1.3em * 2) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
          line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.prod__name a {
  /* `-webkit-line-clamp` only clips through children that are
     inline-level. A `display: block` anchor would escape the clamp
     box and break the ellipsis. */
  display: inline !important;
  color: inherit;
}
.prod__name a {
  color: inherit;
  transition: color var(--t-fast);
  /* Inline anchor stays in the clamped box — `display: inline` is the
     only way `-webkit-line-clamp` clips through nested inline content. */
  display: inline;
}
.prod:hover .prod__name a { color: var(--red); }

/* Price — bold red, the visual emphasis of the card. */
.prod__price {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--red);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 0.1rem;
}
.prod__price .woocommerce-Price-amount { color: inherit; }
.prod__price del {
  color: var(--ink-4);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 0.78rem;
  margin-right: 0.4rem;
}
.prod__price ins {
  text-decoration: none;
  color: var(--red);
  background: transparent;
}

/* Meta row — rating pill + sold count.  No `margin-top: auto` so the
   row sits tight to the price (otherwise a stretched body in a grid
   of mixed-height cards leaves a visible empty band above this row). */
.prod__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}
.prod__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 1px 6px;
  background: var(--paper-2);
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
  flex-shrink: 0;
}
.prod__rating svg {
  color: var(--gold);
  flex-shrink: 0;
}
.prod__sold {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.prod__add {
  position: absolute;
  bottom: 0.85rem; right: 0.85rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  transform: scale(0);
  transition: transform var(--t-fast), background var(--t-fast);
  z-index: 2;
}
.prod:hover .prod__add { transform: scale(1); }
.prod__add:hover { background: var(--red); }
.prod__add svg { width: 16px; height: 16px; }

/* TRUST STRIP */
.trust-wrap { padding-block: 0; }
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--ink);
  color: var(--paper);
}
@media (max-width: 880px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) {
  .trust { grid-template-columns: 1fr; }
  .trust__cell { border-right: 0 !important; border-bottom: 1px solid #2A2A28 !important; padding: 1.5rem 1.25rem; }
  .trust__cell:last-child { border-bottom: 0 !important; }
}
.trust__cell {
  padding: 2.25rem 1.5rem 2rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  border-right: 1px solid #2A2A28;
  position: relative;
}
.trust__cell:last-child { border-right: 0; }
@media (max-width: 880px) {
  .trust__cell:nth-child(2) { border-right: 0; }
  .trust__cell:nth-child(-n+2) { border-bottom: 1px solid #2A2A28; }
}
.trust__icon {
  width: 44px; height: 44px;
  border: 1.5px solid var(--red);
  color: var(--red);
  display: grid; place-items: center;
  border-radius: 4px;
}
.trust__icon svg { width: 20px; height: 20px; }
.trust__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.trust__desc {
  font-size: 0.85rem;
  color: rgba(250,250,247,0.7);
  line-height: 1.5;
}
.trust__cell::after { display: none; }

/* GUIDES */
.guides {
  display: grid;
  /* Equal-width columns so every tile has the same aspect ratio. */
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
@media (max-width: 980px) {
  .guides { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .guides { grid-template-columns: 1fr; } }
.guide {
  position: relative;
  overflow: hidden;
  /* Same ratio for every card (was 4/5 for siblings, 16/12 for the
     first one). 4/5 portrait keeps a tall hero feel that fits the
     image-on-top + caption-on-bottom layout. */
  aspect-ratio: 4 / 5;
  border: 1.5px solid var(--ink);
  display: flex; align-items: end;
  padding: 1.5rem;
  color: var(--paper);
  background: var(--ink-2);
  transition: transform var(--t-base);
}
.guide:hover { transform: translateY(-3px); }
.guide__bg { position: absolute; inset: 0; z-index: 0; transition: transform var(--t-slow); }
.guide__bg img { width: 100%; height: 100%; object-fit: cover; }
.guide:hover .guide__bg { transform: scale(1.06); }
.guide__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.35) 50%, rgba(10,10,10,0.05) 100%);
}
.guide__num {
  position: absolute;
  top: 1.25rem; left: 1.5rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(250,250,247,0.7);
  z-index: 2;
}
.guide__num strong { color: var(--red-2); font-weight: 700; }
.guide__body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: 0.5rem;
}
.guide__meta {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-2);
  display: flex; gap: 0.75rem; align-items: center;
}
.guide__meta::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--red-2);
}
.guide__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.85rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--paper);
}
.guide__cta {
  font-family: var(--ff-mono);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--paper);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center; gap: 0.4rem;
  margin-top: 0.75rem;
  width: fit-content;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(250,250,247,0.5);
  transition: border-color var(--t-fast), gap var(--t-fast);
}
.guide:hover .guide__cta { border-color: var(--red-2); gap: 0.7rem; }

/* BRAND STRIP */
.brands {
  background: var(--paper-2);
  border-block: 1.5px solid var(--edge);
  padding-block: 2.5rem;
  overflow: hidden;
}
.brands__head {
  display: flex; justify-content: space-between; align-items: end;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.brands__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
}
.brands__title em { font-style: normal; color: var(--red); }
.brands__desc {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.brands__rail {
  display: flex; gap: 3.5rem;
  align-items: center;
  height: 70px;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
  width: max-content;
}
.brands__rail:hover { animation-play-state: paused; }
.brand-logo {
  flex-shrink: 0;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: -0.025em;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity var(--t-fast), color var(--t-fast);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.brand-logo:hover { opacity: 1; color: var(--red); }
.brand-logo small {
  font-family: var(--ff-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-left: 0.4rem;
}

/* MARKETPLACE
   Full 1.5px outer border lives on the container; cells only render
   INTERNAL dividers. Previously the outer right was a single
   cell.border-right and the outer bottom was 4 stitched
   cell.border-bottom segments — at 1.5px on 1× DPR displays the
   subpixel rounding diverged between sides, so some edges read as
   thinner than others. One container border solves it. */
.markets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1.5px solid var(--ink);
}
.market {
  border-right: 1.5px solid var(--ink);
  padding: 1.85rem 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--surface);
  transition: background var(--t-fast);
  min-height: 230px;
  position: relative;
  overflow: hidden;
}
/* Strip the last column's right divider — container provides outer right. */
.market:nth-child(4n) { border-right: 0; }

@media (max-width: 880px) {
  .markets { grid-template-columns: repeat(2, 1fr); }
  .market { border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
  .market:nth-child(2n) { border-right: 0; }
  .market:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .markets { grid-template-columns: 1fr; }
  .market {
    border-right: 0;
    border-bottom: 1.5px solid var(--ink);
    min-height: auto;
    padding: 1.5rem 1.25rem;
  }
  .market:last-child { border-bottom: 0; }
}
/* Hover treatment mirrors `.cat` in the categories grid: subtle
   paper-2 background fill + animated red L-shaped corner markers,
   not the inverted ink/light-text style the section used before. */
.market::before, .market::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--red);
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
}
.market::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.market::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.market:hover { background: var(--paper-2); }
.market:hover::before,
.market:hover::after { opacity: 1; }

.market__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  color: var(--ink);
  transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-base);
}
.market:hover .market__icon {
  color: var(--red);
  border-color: var(--red);
  transform: rotate(-6deg) scale(1.05);
}
.market__icon svg { width: 28px; height: 28px; }
.market__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.market__desc {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  line-height: 1.55;
  flex: 1;
}
.market__cta {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--red);
  display: inline-flex;
  align-items: center; gap: 0.35rem;
  margin-top: auto;
}
.market__arrow {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  color: var(--ink-3);
  transition: color var(--t-fast), transform var(--t-fast);
}
.market:hover .market__arrow {
  color: var(--red);
  transform: translate(2px, -2px);
}

/* NEWSLETTER */
/* Custom block-padding on the wrapper section so the red card has
   breathing room above + below before the footer (default `section`
   padding was overridden to 0 here, which made it touch the footer
   directly). */
.news-wrap {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
}
.news {
  background: var(--red);
  color: white;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 980px) { .news { grid-template-columns: 1fr; } }
.news::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.news::after {
  content: "WA / SHOPEE / EMAIL";
  position: absolute;
  bottom: 1.25rem; right: 2rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.5);
}
.news__head { position: relative; z-index: 2; }
.news__eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.news__eyebrow::before { content: ""; width: 24px; height: 1px; background: white; }
.news__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: white;
  margin-bottom: 1rem;
}
.news__desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.92);
  max-width: 480px;
}
.news__form {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 1rem;
}
.news__input-row {
  display: flex; gap: 0;
  background: white;
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 1.3rem;
  align-items: center;
}
.news__input { height: 42px; color: var(--ink); flex: 1; }
.news__input::placeholder { color: var(--ink-4); }
/* Same outline suppression as `.search__input` — the bare input sits
   inside the white pill row and the global red rectangle breaks the
   rounded shape. Surface focus instead via a soft white halo on the
   row (legible against the red section background). */
.news__input:focus,
.news__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.news__input-row:focus-within {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.35);
}
.news__submit {
  background: var(--ink); color: white;
  border-radius: 999px;
  padding: 0.7rem 1.3rem;
  font-weight: 700;
  font-size: 0.85rem;
  transition: background var(--t-fast);
}
.news__submit:hover { background: #2A2A28; }
.news__alt {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--ff-mono); font-size: 0.78rem; font-weight: 600;
  color: white;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  width: fit-content;
  transition: all var(--t-fast);
}
.news__alt:hover { background: white; color: var(--red); border-color: white; }

/* FOOTER */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: 4rem 2rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "EW.IDN ─ KOMPONEN ELEKTRONIK ASLI ─ EW.IDN ─ INOVASI TERHUBUNG ─ EW.IDN ─ ";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.025);
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid #2A2A28;
  position: relative; z-index: 2;
}
@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .brand__type strong { color: white; }
.footer__brand .brand__type span { color: rgba(255,255,255,0.4); }
.footer__about {
  font-size: 0.9rem;
  color: rgba(250,250,247,0.65);
  margin-block: 1.25rem;
  max-width: min(360px, 100%);
  line-height: 1.6;
}
.footer__address {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  color: rgba(250,250,247,0.5);
  letter-spacing: 0.02em;
  line-height: 1.7;
}
.footer__address strong { color: var(--red-2); font-weight: 700; }
.footer__col-title {
  font-family: var(--ff-mono);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red-2);
  margin-bottom: 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #2A2A28;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer__col a {
  color: rgba(250,250,247,0.85);
  font-size: 0.9rem;
  transition: color var(--t-fast), padding-left var(--t-fast);
  display: inline-block;
}
.footer__col a:hover { color: var(--red-2); padding-left: 0.4rem; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding-top: 2rem;
  position: relative; z-index: 2;
}
.footer__copy {
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  color: rgba(250,250,247,0.4);
  letter-spacing: 0.02em;
}
.footer__pay { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.footer__pay span {
  font-family: var(--ff-mono);
  font-size: 0.7rem; font-weight: 500;
  background: rgba(255,255,255,0.06);
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  color: rgba(250,250,247,0.85);
  border: 1px solid rgba(255,255,255,0.05);
}

/* REVEAL ANIMATIONS */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--t-fast), transform 700ms var(--t-fast);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.trace-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: trace-draw 1.6s var(--t-fast) forwards;
}
@keyframes trace-draw { to { stroke-dashoffset: 0; } }
.trace-line--1 { animation-delay: 0.4s; }
.trace-line--2 { animation-delay: 0.7s; }
.trace-line--3 { animation-delay: 1s; }

@keyframes blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.dot-blink { animation: blink-dot 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================
   RESPONSIVE — final pass for things that escaped earlier.
   Anything in this block targets a concrete overflow / squish
   bug seen at ≤720, ≤540, or ≤360.
   ========================================================= */

/* Section padding shrinks tighter on phones so we don't burn
   vertical space between blocks. */
@media (max-width: 540px) {
  section { padding-block: clamp(2rem, 7vw, 3.5rem); }
}

/* Brand header — at very narrow widths shrink the brand mark too
   so the cart icon-btn has more room. */
@media (max-width: 540px) {
  .brand__mark { width: 32px; height: 32px; }
  .brand__mark svg { width: 18px; height: 18px; }
  .brand__type strong { font-size: 1.05rem !important; }
}
@media (max-width: 360px) {
  .header__row { gap: 0.35rem !important; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn .icn { width: 18px; height: 18px; }
}

/* Search form — tighter padding on phones so the input has more
   space to type into. */
@media (max-width: 540px) {
  form.search {
    padding: 0.35rem 0.35rem 0.35rem 0.85rem;
    height: 44px;
  }
  .search__btn { width: 34px; height: 34px; }
  .search__input { font-size: 0.9rem; }
}

/* Section heading title — already uses clamp on most pages but the
   default `.sec-head__title` is set without it. */
.sec-head__title {
  font-size: clamp(1.5rem, 3.5vw, 2.4rem) !important;
}

/* Homepage tab buttons — wrap-friendly + smaller margin so 4-tab
   row fits at narrow without sideways scroll. */
@media (max-width: 720px) {
  .tabs { gap: 0.25rem; }
  .tabs__btn { margin-right: 1rem; font-size: 0.92rem; padding: 0.7rem 0; }
}
@media (max-width: 540px) {
  .tabs__btn { margin-right: 0.75rem; font-size: 0.85rem; }
}

/* Flash sale header — wrap + shrink at narrow */
@media (max-width: 540px) {
  .flash { padding: 1.5rem clamp(0.85rem, 4vw, 1.5rem); }
  .flash__head { gap: 0.75rem; margin-bottom: 1.1rem; }
  .flash__title { font-size: clamp(1.5rem, 6vw, 2rem); gap: 0.5rem; }
  .flash__digit { padding: 0.4rem 0.5rem; font-size: 1rem; min-width: 36px; }
  .flash__timer-label { display: none; }
}

/* Brands head — title + desc stack on narrow */
@media (max-width: 540px) {
  .brands { padding-block: 1.75rem; }
  .brands__head { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .brands__title { font-size: 1.25rem; }
  .brands__rail { gap: 2.25rem; height: 60px; }
  .brand-logo { font-size: 1.35rem; }
}

/* Section heads (.sec-head) at very narrow */
@media (max-width: 540px) {
  .sec-head { margin-bottom: 1.5rem; }
}

/* News (newsletter) — input row collapses to stacked at narrow so
   the submit button doesn't squash the email field. */
@media (max-width: 540px) {
  .news { padding: 2rem 1.25rem; gap: 1.5rem; }
  .news__input-row { flex-direction: column; padding: 0.5rem; border-radius: 14px; gap: 0.5rem; }
  .news__input { width: 100%; padding: 0 0.85rem; height: 38px; background: var(--paper); border-radius: 999px; }
  .news__submit { width: 100%; padding: 0.85rem 1.25rem; }
  .news__title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .news__desc { font-size: 0.92rem; }
}

/* Guides — at narrow, smaller padding + relax aspect ratio so the
   tile doesn't become too tall. */
@media (max-width: 540px) {
  .guide { aspect-ratio: 5/4; }
}

/* Footer column titles — slightly tighter, no border at very narrow
   so each column has more room. */
@media (max-width: 540px) {
  .footer { padding-block: 2.5rem 1.5rem; }
  .footer__col-title { margin-bottom: 0.75rem; padding-bottom: 0.4rem; }
  .footer__col ul { gap: 0.4rem; }
}

/* Utilbar — already hidden ≤720 ✓.  No further action. */

/* Hero head text — tighten the gradient line under section number
   so it doesn't visually push the lede off-screen. */
@media (max-width: 540px) {
  .hero__head { gap: 1rem; }
  .hero__sec-num::after { max-width: 80px; }
  .hero__cta { gap: 0.5rem; }
  .hero__cta .btn { padding: 0.7rem 1.1rem; font-size: 0.85rem; }
}

/* Reveal animation — disable on narrow so any in-flight transform
   never causes phantom horizontal scroll on the page. */
@media (max-width: 540px) {
  .reveal { opacity: 1; transform: none; }
}

/* Marquee — make sure parent doesn't allow the track to bleed past
   the viewport (the keyframe translates it; with overflow:clip on
   body that's already safe, but defensive belt-and-suspenders). */
.marquee { overflow: hidden; max-width: 100%; }
.brands { max-width: 100%; }

/* Ribbon mobile menu — instead of the desktop horizontal scroll-strip,
   collapse `.ribbon__inner` into a dropdown panel under the ribbon
   bar and surface a `.ribbon__more` trigger on the right. Visually
   distinct from the dark `.cats-menu` (which keeps its mega-menu
   identity): the page-nav trigger is light with a red status dot,
   so users can read it as "site pages" vs. "product categories".
   Breakpoint 720 px because that's where the row gets too narrow
   to show all primary items without horizontal scroll. */
@media (max-width: 720px) {
  .ribbon { position: sticky; top: 64px; z-index: 40; }

  .ribbon__layout { position: relative; }

  /* Trigger on the right side of the row */
  .ribbon__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    height: 100%;
    padding: 0 1rem;
    background: var(--surface);
    border: 0;
    border-left: 1px solid var(--edge);
    color: var(--ink);
    font-family: var(--ff-body);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .ribbon__more:hover { background: var(--paper-2); color: var(--red); }
  .ribbon__more-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
  }
  .ribbon__more-caret {
    width: 12px; height: 12px;
    transition: transform var(--t-fast);
  }
  .ribbon__more[aria-expanded="true"] .ribbon__more-caret {
    transform: rotate(180deg);
  }
  .ribbon__more[aria-expanded="true"] {
    background: var(--paper-2);
    color: var(--red);
  }

  /* Panel — hidden by default, opens via JS toggling `.is-open` */
  .ribbon__inner {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    max-height: calc(100vh - 130px);
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--surface);
    border-top: 1px solid var(--edge);
    border-bottom: 1.5px solid var(--ink);
    box-shadow: 0 18px 36px -18px rgba(0,0,0,0.18);
    padding: 0.35rem 0;
    -webkit-mask-image: none;
            mask-image: none;
    z-index: 35;
  }
  .ribbon__inner.is-open { display: flex; }

  /* Items become full-width list rows, not pill chips */
  .ribbon__item {
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--edge);
    padding: 0.95rem 1.25rem;
    font-size: 0.95rem;
    color: var(--ink);
    justify-content: flex-start;
  }
  .ribbon__item:last-child { border-bottom: 0; }
  .ribbon__item:hover, .ribbon__item:focus-visible {
    background: var(--paper-2);
    color: var(--red);
  }
  /* FLASH SALE keeps its red identity in the dropdown but doesn't get
     the pulsing pill — too noisy inside a stacked list. */
  .ribbon__item--hot { color: var(--red); font-weight: 700; }
}

/* Narrow phones: tighten the trigger spacing so it doesn't crowd
   the cats-menu label. */
@media (max-width: 420px) {
  .ribbon__more { padding: 0 0.85rem; font-size: 0.8rem; }
}

/* Guard: every grid/flex container must allow children to shrink
   below their content size so a single long word or sticky child
   can't blow out the row. */
.container, .ew-container, main > * { min-width: 0; }

/* =========================================================
   ROUNDED CORNERS PASS — subtle radius on every "box" that
   was previously hard-square. Minimalist 6-10 px values; the
   already-rounded elements (`.prod`, `.flash`, `.ew-stock`,
   `.ew-reviews__summary`, etc.) keep their existing radius.
   ========================================================= */

/* Hero spec card */
.hero__spec-card { border-radius: 6px; }

/* Hero illustration container */
.hero__viz { border-radius: 12px; }

/* Categories grid — radius on the outer container, cells stay
   rectangular inside (border-right/bottom connecting style). */
.cats {
  border-radius: 10px;
  overflow: hidden;
}

/* Flash sale cards */
.flash__card { border-radius: 8px; overflow: hidden; }
.flash__img  { border-radius: 6px 6px 0 0; }
.flash__pct  { border-radius: 0 8px 0 6px; }

/* Trust strip — radius on outer container */
.trust { border-radius: 10px; overflow: hidden; }
.trust__icon { border-radius: 6px; }

/* Guides — individual tile radius */
.guide { border-radius: 10px; overflow: hidden; }

/* Markets — radius on outer container, cells inside stay
   rectangular like cats. */
.markets { border-radius: 10px; overflow: hidden; }
.market__icon { border-radius: 8px; }

/* Newsletter card */
.news { border-radius: 14px; }

/* Search autocomplete dropdown */
.search-suggest { border-radius: 8px; overflow: hidden; }
.search-suggest__thumb { border-radius: 4px; }

/* Cats-menu mega panel */
.cats-menu__panel { border-radius: 0 0 8px 8px; overflow: hidden; }
.cats-menu__sub { border-radius: 0 8px 8px 0; }

/* Brand logos in the brands strip don't need a box, leave them.
   Marquee track has overflow: hidden so no corner artifacts. */

/* 404 page already uses clamp + flex; no boxes to round. */

/* Cart strip header */
.ew-cart-strip { border-radius: 8px; }

/* =========================================================
   CART BENEFITS / TRUST PANEL
   Renders below the cart items + coupon row so the left column
   visually matches the height of the cart-totals box on the
   right. `flex-grow: 1` lets it absorb whatever vertical gap
   the totals card creates on the other side.
   ========================================================= */
.ew-cart-benefits {
  margin: 0 !important;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--paper-2);
  border: 1.5px solid var(--edge);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ew-cart-benefits__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.ew-cart-benefits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem 1rem;
}
@media (max-width: 540px) {
  .ew-cart-benefits__list { grid-template-columns: 1fr; }
}
.ew-cart-benefits__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 8px;
}
.ew-cart-benefits__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  color: var(--red);
  background: var(--red-soft);
  border-radius: 6px;
}
.ew-cart-benefits__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.ew-cart-benefits__text strong {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.ew-cart-benefits__text span {
  font-family: var(--ff-body);
  font-size: 0.78rem;
  color: var(--ink-3);
  line-height: 1.4;
}
.ew-cart-benefits__text a {
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* When the cart-collaterals column is the shorter one (rare —
   usually it's the taller side), the benefits panel just sits at
   its natural height without forcing extra space. */
@media (max-width: 960px) {
  .ew-cart-benefits { flex: 0 0 auto; }
}

/* =========================================================
   VOUCHER RAIL — Shopee-style claim cards
   Each card is a 2-section ticket: red stub on the left with
   the discount amount, white body on the right with title +
   expiry + claim button. Top/bottom circular notches on the
   divider line give the classic torn-paper ticket look.
   ========================================================= */
.vouchers-section { background: var(--paper); }

.vouchers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.85rem, 2vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 980px) {
  .vouchers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .vouchers { grid-template-columns: 1fr; }
}

.voucher {
  display: grid;
  grid-template-columns: 120px 1fr;
  position: relative;
  overflow: visible;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  list-style: none;
}
.voucher:hover {
  border-color: var(--red);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(230, 51, 41, 0.4);
}

/* Tear-line cutouts — two half-circles cut from the page-bg
   color along the stub/body divider. */
.voucher::before,
.voucher::after {
  content: "";
  position: absolute;
  left: 120px;
  width: 16px; height: 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
  transition: border-color var(--t-fast);
}
.voucher::before { top: -8px; }
.voucher::after  { bottom: -8px; }
.voucher:hover::before,
.voucher:hover::after { border-color: var(--red); }

/* ---- Left stub (discount amount) ---- */
.voucher__stub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 1rem 0.75rem;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color: white;
  border-radius: 10px 0 0 10px;
  /* Inset stripe pattern for ticket texture */
  background-image:
    linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%),
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.08) 49%, rgba(255,255,255,0.08) 51%, transparent 52%);
  background-size: 100%, 14px 14px;
  background-blend-mode: normal;
}
.voucher__label {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.voucher__amount {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: center;
}
.voucher__min {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin-top: 0.25rem;
  text-align: center;
  line-height: 1.3;
}

/* Tear divider — dashed vertical line between stub and body */
.voucher__body {
  position: relative;
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-left: 2px dashed var(--ink);
  background: var(--surface);
  border-radius: 0 10px 10px 0;
}
.voucher:hover .voucher__body { border-left-color: var(--red); }

.voucher__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.voucher__expiry {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  margin: 0;
}
.voucher__expiry svg { flex-shrink: 0; color: var(--ink-4); }

.voucher__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: auto;
  padding: 0.5rem 0.85rem;
  background: var(--ink);
  color: white;
  border: 0;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  align-self: flex-start;
  transition: background var(--t-fast), color var(--t-fast), gap var(--t-fast), transform var(--t-fast);
}
.voucher__cta:hover {
  background: var(--red);
  gap: 0.5rem;
}
.voucher__cta-arrow { transition: transform var(--t-fast); }
.voucher__cta:hover .voucher__cta-arrow { transform: translateX(2px); }

/* ---- Claimed state — code revealed, button becomes copy pill ---- */
.voucher.is-claimed .voucher__cta {
  background: var(--surface);
  color: var(--red);
  border: 1.5px dashed var(--red);
  font-family: var(--ff-mono);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.85rem;
}
.voucher.is-claimed .voucher__cta:hover {
  background: var(--red-soft);
  gap: 0.35rem;
}
.voucher.is-claimed .voucher__cta-arrow { display: none; }

/* ---- Just-copied — green confirmation flash ---- */
.voucher.is-copied .voucher__cta {
  background: rgba(26, 127, 55, 0.1);
  border-color: var(--green);
  color: var(--green);
}

/* Hint paragraph below the grid (only shown to admins when there
   are no real coupons yet) */
.vouchers-section__hint {
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  background: var(--paper-2);
  border: 1px dashed var(--edge-2);
  border-radius: 8px;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.vouchers-section__hint a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Narrow phones — shrink stub so the body has room for title */
@media (max-width: 540px) {
  .voucher { grid-template-columns: 100px 1fr; }
  .voucher::before,
  .voucher::after { left: 100px; }
  .voucher__amount { font-size: 1.3rem; }
  .voucher__title { font-size: 0.9rem; }
}

/* =========================================================
   PROMO POPUP — fixed overlay modal, editable via Customizer
   ========================================================= */
.ew-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 1.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.ew-popup.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.ew-popup[hidden] { display: none !important; }

.ew-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.ew-popup__card {
  position: relative;
  width: min(460px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms ease;
}
.ew-popup.is-visible .ew-popup__card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.ew-popup__card::-webkit-scrollbar { width: 6px; }
.ew-popup__card::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; }

.ew-popup__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 34px;
  height: 34px;
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  z-index: 3;
}
.ew-popup__close:hover {
  background: var(--red);
  color: white;
  border-color: var(--red);
  transform: rotate(90deg);
}
.ew-popup__close svg { display: block; }

.ew-popup__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper);
  background-size: 22px 22px;
  border-bottom: 2px solid var(--ink);
  border-radius: 14px 14px 0 0;
}
.ew-popup__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ew-popup__body {
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ew-popup__kicker {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.ew-popup__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3.5vw, 1.95rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.ew-popup__text {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.6;
}
.ew-popup__text p { margin: 0; }
.ew-popup__text p + p { margin-top: 0.6em; }
.ew-popup__text strong { color: var(--ink); font-weight: 700; }
.ew-popup__text a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ew-popup__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.95rem 1.5rem;
  background: var(--red);
  color: white !important;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  margin-top: 0.5rem;
  align-self: flex-start;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), gap var(--t-fast);
  box-shadow: 0 10px 22px -12px var(--red);
}
.ew-popup__cta:hover {
  background: var(--red-deep);
  transform: translateY(-1px);
  gap: 0.6rem;
  box-shadow: 0 14px 28px -12px var(--red-deep);
}
.ew-popup__cta svg { transition: transform var(--t-fast); }
.ew-popup__cta:hover svg { transform: translateX(2px); }

/* Lock background scroll while popup is open */
body.has-popup { overflow: hidden; }

/* On phones the card fills more of the viewport for breathing room */
@media (max-width: 540px) {
  .ew-popup__card { width: 100%; max-height: 88vh; }
  .ew-popup__cta { align-self: stretch; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ew-popup, .ew-popup__card, .ew-popup__close { transition: none; }
}

/* =========================================================
   PAGES & BLOG — shared layout for static pages and blog posts
   ========================================================= */

/* Hero header (shared across page.php, single.php, page-blog.php) */
.ew-page__hero {
  padding: clamp(2rem, 5vw, 3.75rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
  position: relative;
}
.ew-page__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 820px;
}
.ew-page__hero .ew-crumbs {
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
}
.ew-page__kicker {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.ew-page__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 !important;
}
.ew-page__lede {
  font-family: var(--ff-body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}

/* Body wrapper around the_content() */
.ew-page__body {
  padding-block: clamp(2rem, 4vw, 3rem);
}

/* =========================================================
   .ew-prose — WP block-editor output style
   Targets the standard wp-block-* output AND raw <h>/<p>/<ul>
   markup. Tight vertical rhythm + consistent typography.
   ========================================================= */
.ew-prose {
  max-width: 820px;
  margin-inline: auto;
  font-family: var(--ff-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.ew-prose > * + * { margin-top: 1.1em; }
.ew-prose > h2 + *,
.ew-prose > h3 + *,
.ew-prose > h4 + * { margin-top: 0.6em; }

.ew-prose h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  margin-top: 2em !important;
  margin-bottom: 0 !important;
  padding-top: 1em;
  border-top: 1.5px solid var(--ink);
}
.ew-prose > h2:first-child { padding-top: 0; border-top: 0; margin-top: 0 !important; }

.ew-prose h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 1.6em !important;
}

.ew-prose h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-top: 1.4em !important;
}

.ew-prose p { margin: 0; color: var(--ink-2); }
.ew-prose strong { color: var(--ink); font-weight: 700; }
.ew-prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.ew-prose a:hover { color: var(--red-deep); }

.ew-prose ul,
.ew-prose ol {
  margin: 0;
  padding-left: 1.5rem;
  list-style-position: outside;
}
.ew-prose ul { list-style: disc; }
.ew-prose ol { list-style: decimal; }
.ew-prose li + li { margin-top: 0.4em; }
.ew-prose li::marker { color: var(--red); }

.ew-prose blockquote {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--paper-2);
  border-left: 3px solid var(--red);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ink-2);
  border-radius: 0 8px 8px 0;
}

.ew-prose code {
  font-family: var(--ff-mono);
  font-size: 0.88em;
  padding: 0.15em 0.4em;
  background: var(--paper-2);
  border-radius: 4px;
  color: var(--red-deep);
}
.ew-prose pre {
  font-family: var(--ff-mono);
  font-size: 0.88em;
  line-height: 1.5;
  padding: 1.1rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  overflow-x: auto;
}
.ew-prose pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
}

.ew-prose figure { margin: 0; }
.ew-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.ew-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  border: 1px solid var(--edge);
  border-radius: 8px;
  overflow: hidden;
}
.ew-prose table th,
.ew-prose table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--edge);
  text-align: left;
  vertical-align: top;
}
.ew-prose table th {
  background: var(--paper-2);
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Native <details> styled as accordion (used in FAQ + Career) */
.ew-prose details.ew-faq,
.ew-prose details {
  background: var(--surface);
  border: 1.5px solid var(--edge);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ew-prose details + details { margin-top: 0.5em !important; }
.ew-prose details[open] {
  border-color: var(--ink);
  box-shadow: 0 6px 18px -12px rgba(10,10,10,0.18);
}
.ew-prose details > summary {
  cursor: pointer;
  padding: 0.95rem 1.1rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
  transition: background var(--t-fast);
}
.ew-prose details > summary::-webkit-details-marker { display: none; }
.ew-prose details > summary::after {
  content: "+";
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--red);
  transition: transform var(--t-fast);
}
.ew-prose details[open] > summary::after { content: "−"; transform: translateY(-50%) rotate(180deg); }
.ew-prose details > summary:hover { background: var(--paper-2); }
.ew-prose details > p,
.ew-prose details > div {
  padding: 0 1.1rem 1rem;
  margin: 0 !important;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* =========================================================
   BLOG LISTING (page-blog.php)
   ========================================================= */
.ew-blog__main {
  padding-block: clamp(2rem, 4vw, 3rem);
}
.ew-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
@media (max-width: 980px) {
  .ew-blog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ew-blog__grid { grid-template-columns: 1fr; }
}

.ew-post-card {
  background: var(--surface);
  border: 1.5px solid var(--edge-2);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  list-style: none;
}
.ew-post-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -16px rgba(10,10,10,0.22);
}
.ew-post-card__link {
  display: block;
  color: inherit;
  text-decoration: none !important;
}
.ew-post-card__thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1.5px solid var(--edge-2);
}
.ew-post-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-base);
}
.ew-post-card:hover .ew-post-card__thumb img { transform: scale(1.05); }
.ew-post-card__thumb--placeholder {
  display: grid;
  place-items: center;
  color: var(--ink-4);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper);
  background-size: 22px 22px;
}
.ew-post-card__body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ew-post-card__category {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.ew-post-card__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ew-post-card:hover .ew-post-card__title { color: var(--red); }
.ew-post-card__excerpt {
  font-size: 0.92rem;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
          line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ew-post-card__meta {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}
.ew-post-card__date {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--ink-4);
}

.ew-blog__empty {
  padding: 3rem;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 0.95rem;
  color: var(--ink-3);
  background: var(--paper-2);
  border-radius: 10px;
  border: 1.5px dashed var(--edge-2);
}

.ew-blog__pagination {
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  display: flex;
  justify-content: center;
}

/* =========================================================
   SINGLE BLOG POST (single.php)
   ========================================================= */
.ew-post__hero {
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.ew-post__hero > .container {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ew-post__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  width: fit-content;
  transition: color var(--t-fast), gap var(--t-fast);
}
.ew-post__back:hover { color: var(--red); gap: 0.6rem; }
.ew-post__category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.3rem 0.7rem;
  background: var(--red-soft);
  color: var(--red-deep);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ew-post__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 !important;
}
.ew-post__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  color: var(--ink-3);
  margin: 0;
}
.ew-post__meta strong { color: var(--ink); font-weight: 700; }
.ew-post__sep { color: var(--ink-4); }

.ew-post__cover {
  max-width: 980px;
  margin: clamp(1rem, 3vw, 2rem) auto 0;
}
.ew-post__cover img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.ew-post__body {
  padding-block: clamp(2rem, 4vw, 3rem);
  max-width: 720px;
}

/* =========================================================
   TENTANG KAMI — slug-based page-tentang.php
   Multi-section about page styled with the same brand tokens as
   the homepage. Designed to feel like a continuation of the
   landing experience, not a generic "wall of text" page.
   ========================================================= */

.ew-tentang { background: var(--paper); }

/* HERO */
.ew-tentang__hero {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse at top right, rgba(230,51,41,0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(10,10,10,0.04) 0%, transparent 40%),
    var(--paper);
  border-bottom: 1.5px solid var(--ink);
  position: relative;
  overflow: hidden;
}
/* Decorative circuit-trace style lines in the corner */
.ew-tentang__hero::before,
.ew-tentang__hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.18;
}
.ew-tentang__hero::before {
  top: 1.5rem; right: 1.5rem;
  width: 120px; height: 120px;
  border: 1.5px solid var(--red);
  border-right: 0; border-bottom: 0;
}
.ew-tentang__hero::after {
  bottom: 1.5rem; left: 1.5rem;
  width: 80px; height: 80px;
  border: 1.5px solid var(--ink);
  border-left: 0; border-top: 0;
}
/* Decorative L-brackets are purely cosmetic and crowd narrow phones —
   on a 320 px viewport, the 120 px top-right box leaves only ~165 px
   for hero copy. Hide on small screens. */
@media (max-width: 640px) {
  .ew-tentang__hero::before,
  .ew-tentang__hero::after { display: none; }
}
.ew-tentang__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 880px;
  position: relative;
  z-index: 2;
}
.ew-tentang__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.ew-tentang__title em {
  font-style: normal;
  color: var(--red);
  position: relative;
  display: inline-block;
}
.ew-tentang__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6%;
  height: 8px;
  background: var(--red);
  opacity: 0.14;
  z-index: -1;
  transform: skewX(-8deg);
}
.ew-tentang__lede {
  font-family: var(--ff-body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 64ch;
  margin: 0;
}

/* STATS strip */
.ew-tentang__stats-wrap {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.ew-tentang__stats-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, transparent 48%, rgba(230,51,41,0.06) 49%, rgba(230,51,41,0.06) 51%, transparent 52%);
  background-size: 32px 32px;
  pointer-events: none;
}
.ew-tentang__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  position: relative; z-index: 2;
}
@media (max-width: 880px) {
  .ew-tentang__stats { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 540px) {
  .ew-tentang__stats { grid-template-columns: 1fr; gap: 1rem; }
}
.ew-tentang__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem clamp(0.5rem, 1vw, 1rem);
  border-left: 1.5px solid var(--red);
}
.ew-tentang__stat strong {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--paper);
}
.ew-tentang__stat strong em {
  font-style: normal;
  color: var(--red);
}
.ew-tentang__stat span {
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250,250,247,0.6);
  line-height: 1.4;
}

/* STORY */
.ew-tentang__story {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ew-tentang__story-inner {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ew-tentang__story-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0.25rem 0 0;
}
.ew-tentang__story-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ew-tentang__story-body p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0;
}
.ew-tentang__story-body strong { color: var(--ink); }
.ew-tentang__hashtag {
  color: var(--red);
  font-weight: 800;
  letter-spacing: -0.005em;
}

/* VISION + MISSION */
.ew-tentang__vm {
  padding: clamp(2rem, 5vw, 4rem) 0;
  background: var(--paper-2);
  border-block: 1.5px solid var(--ink);
}
.ew-tentang__vm-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 880px) {
  .ew-tentang__vm-grid { grid-template-columns: 1fr; }
}

.ew-tentang__vision,
.ew-tentang__mission {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ew-tentang__vision {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.ew-tentang__vision::after {
  content: "";
  position: absolute;
  right: -20px; bottom: -20px;
  width: 140px; height: 140px;
  border: 1.5px solid var(--red);
  border-radius: 50%;
  opacity: 0.35;
  pointer-events: none;
}
.ew-tentang__vision .ew-page__kicker { color: var(--red-2); }
.ew-tentang__vision .ew-tentang__vm-title { color: var(--paper); }
.ew-tentang__vision .ew-tentang__vm-body { color: rgba(250,250,247,0.85); }
.ew-tentang__vision strong { color: var(--paper); }

.ew-tentang__vm-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.ew-tentang__vm-body {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

.ew-tentang__mission-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ew-tentang__mission-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--edge-2);
}
.ew-tentang__mission-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.ew-tentang__mission-num {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--red);
  background: var(--red-soft);
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.ew-tentang__mission-list li > div { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ew-tentang__mission-list li strong {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.25;
}
.ew-tentang__mission-list li p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}

/* WHY US */
.ew-tentang__why {
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.ew-tentang__why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
@media (max-width: 980px) { .ew-tentang__why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ew-tentang__why-grid { grid-template-columns: 1fr; } }

.ew-tentang__why-card {
  background: var(--surface);
  border: 1.5px solid var(--edge-2);
  border-radius: 10px;
  padding: 1.25rem 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ew-tentang__why-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -16px rgba(10,10,10,0.22);
}
.ew-tentang__why-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 8px;
  background: var(--red-soft);
  color: var(--red);
  margin-bottom: 0.2rem;
}
.ew-tentang__why-card h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.ew-tentang__why-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}

/* LOCATION — real Google Maps embed + info panel side by side */
.ew-tentang__location {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
}
.ew-tentang__location-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 720px;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.ew-tentang__location-heading {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.ew-tentang__location-heading em {
  font-style: normal;
  color: var(--red);
}
.ew-tentang__location-lede {
  font-family: var(--ff-body);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0;
}

.ew-tentang__location-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  min-height: 480px;
}
@media (max-width: 880px) {
  .ew-tentang__location-card {
    grid-template-columns: 1fr;
    grid-template-rows: 320px auto;
    min-height: 0;
  }
}

/* Real Google Maps iframe — fills its grid cell. The border-right
   on desktop creates a visual seam between the live map and the
   info panel; on stacked mobile it becomes a border-bottom. */
.ew-tentang__map {
  position: relative;
  background: var(--paper);
  border-right: 1.5px solid var(--ink);
  overflow: hidden;
  min-height: 320px;
}
@media (max-width: 880px) {
  .ew-tentang__map {
    border-right: 0;
    border-bottom: 1.5px solid var(--ink);
  }
}
.ew-tentang__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Soften Google's default theme so it sits inside our brand */
  filter: saturate(1.05) contrast(1.02);
}

/* Natural Google-Maps-style info card overlay on the map. Sits in
   the bottom-left corner with shadow + red pin, mirrors how Google
   itself surfaces a selected place. Clicking opens the live maps
   listing in a new tab — same target as the bigger "Petunjuk arah"
   button in the info panel. */
.ew-map-card {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem 0.7rem 0.85rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 8px 24px -8px rgba(0,0,0,0.18);
  text-decoration: none;
  color: var(--ink);
  z-index: 5;
  max-width: calc(100% - 2rem);
  transition: transform 200ms var(--t-fast), box-shadow 200ms var(--t-fast);
  font-family: var(--ff-body);
}
.ew-map-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.14), 0 12px 28px -8px rgba(0,0,0,0.22);
}
.ew-map-card__pin {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
}
.ew-map-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.ew-map-card__text strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ew-map-card__text span {
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ew-map-card__arrow {
  flex-shrink: 0;
  color: var(--ink-3);
  display: inline-grid;
  place-items: center;
  transition: color var(--t-fast), transform var(--t-fast);
}
.ew-map-card:hover .ew-map-card__arrow {
  color: var(--red);
  transform: translate(2px, -2px);
}
@media (max-width: 540px) {
  .ew-map-card {
    bottom: 0.6rem;
    left: 0.6rem;
    padding: 0.55rem 0.85rem 0.55rem 0.7rem;
    gap: 0.55rem;
    max-width: calc(100% - 1.2rem);
  }
  .ew-map-card__text strong { font-size: 0.85rem; }
  .ew-map-card__text span { font-size: 0.65rem; }
}

/* Right info panel — vertical list of key details + CTA */
.ew-tentang__location-info {
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--surface);
}
.ew-tentang__info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--edge-2);
}
.ew-tentang__info-row:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}
.ew-tentang__info-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--red-soft);
  color: var(--red);
}
.ew-tentang__info-row > div { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ew-tentang__info-row strong {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.ew-tentang__info-row p {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}
.ew-tentang__info-row p a {
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ew-tentang__location-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.ew-tentang__location-cta .btn { flex: 1 1 auto; min-width: 140px; }

/* CLOSING CTA */
.ew-tentang__closing {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ew-tentang__closing::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(230,51,41,0.15) 0%, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(230,51,41,0.1) 0%, transparent 35%);
  pointer-events: none;
}
.ew-tentang__closing-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  position: relative; z-index: 2;
}
.ew-tentang__closing .ew-page__kicker {
  color: var(--red-2);
}
.ew-tentang__closing-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--paper);
  margin: 0;
}
.ew-tentang__closing-lede {
  font-size: 1rem;
  color: rgba(250,250,247,0.75);
  line-height: 1.6;
  margin: 0;
  max-width: 56ch;
}
.ew-tentang__closing-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}
/* Light ghost button on dark closing section */
.ew-tentang__closing .btn--ghost {
  color: var(--paper);
  border-color: var(--paper);
}
.ew-tentang__closing .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
}

/* =========================================================
   KONTAK — slug-based page-kontak.php
   Multi-section contact page: hero, primary contact methods,
   specialised email cards, real Google Maps, marketplace links.
   Re-uses `.ew-tentang__location-card / .ew-tentang__map / .ew-
   tentang__info-row` from the Tentang page for the location
   block so the visual language stays consistent.
   ========================================================= */

.ew-kontak { background: var(--paper); }

/* HERO — mirrors the Tentang hero structure but with kontak copy */
.ew-kontak__hero {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(ellipse at top right, rgba(230,51,41,0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(10,10,10,0.04) 0%, transparent 40%),
    var(--paper);
  border-bottom: 1.5px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.ew-kontak__hero::before,
.ew-kontak__hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0.18;
}
.ew-kontak__hero::before {
  top: 1.5rem; right: 1.5rem;
  width: 120px; height: 120px;
  border: 1.5px solid var(--red);
  border-right: 0; border-bottom: 0;
}
.ew-kontak__hero::after {
  bottom: 1.5rem; left: 1.5rem;
  width: 80px; height: 80px;
  border: 1.5px solid var(--ink);
  border-left: 0; border-top: 0;
}
/* Same rationale as `.ew-tentang__hero` — decoration crowds phones. */
@media (max-width: 640px) {
  .ew-kontak__hero::before,
  .ew-kontak__hero::after { display: none; }
}
.ew-kontak__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 820px;
  position: relative;
  z-index: 2;
}
.ew-kontak__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.ew-kontak__title em {
  font-style: normal;
  color: var(--red);
  position: relative;
  display: inline-block;
}
.ew-kontak__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6%;
  height: 8px;
  background: var(--red);
  opacity: 0.14;
  z-index: -1;
  transform: skewX(-8deg);
}
.ew-kontak__lede {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 64ch;
  margin: 0;
}

/* SHARED SECTION HEADER (emails, location, channels) */
.ew-kontak__section-head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 720px;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.ew-kontak__section-title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.ew-kontak__section-title em {
  font-style: normal;
  color: var(--red);
}
.ew-kontak__section-lede {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}

/* PRIMARY CONTACT METHODS — 3 big cards */
.ew-kontak__methods {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.ew-kontak__methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 880px) { .ew-kontak__methods-grid { grid-template-columns: 1fr; } }

.ew-kontak__method {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem 1.4rem;
  background: var(--surface);
  border: 1.5px solid var(--edge-2);
  border-radius: 14px;
  color: inherit;
  text-decoration: none !important;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  position: relative;
  overflow: hidden;
}
.ew-kontak__method:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -16px rgba(10,10,10,0.22);
}

/* WhatsApp = primary, gets the brand red background */
.ew-kontak__method--primary {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  color: white;
  border-color: var(--red-deep);
}
.ew-kontak__method--primary:hover {
  border-color: var(--ink);
  box-shadow: 0 18px 40px -14px rgba(230,51,41,0.55);
}
.ew-kontak__method--primary::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.08) 49%, rgba(255,255,255,0.08) 51%, transparent 52%);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}
.ew-kontak__method--primary > * { position: relative; z-index: 1; }

.ew-kontak__method-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
  flex-shrink: 0;
}
.ew-kontak__method--primary .ew-kontak__method-icon {
  background: rgba(255,255,255,0.15);
  color: white;
}

.ew-kontak__method > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.ew-kontak__method-label {
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}
.ew-kontak__method--primary .ew-kontak__method-label {
  color: rgba(255,255,255,0.85);
}
.ew-kontak__method h3 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.ew-kontak__method--primary h3 { color: white; }
.ew-kontak__method p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}
.ew-kontak__method--primary p { color: rgba(255,255,255,0.85); }
.ew-kontak__method-value {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-top: 0.35rem;
  display: inline-block;
}
.ew-kontak__method--primary .ew-kontak__method-value { color: white; }

.ew-kontak__method-arrow {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-3);
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.ew-kontak__method:hover .ew-kontak__method-arrow {
  background: var(--ink);
  color: white;
  transform: translate(2px, -2px);
}
.ew-kontak__method--primary .ew-kontak__method-arrow {
  background: rgba(255,255,255,0.18);
  color: white;
}
.ew-kontak__method--primary:hover .ew-kontak__method-arrow {
  background: white;
  color: var(--red);
}

/* SPECIALISED EMAILS — 4 cards */
.ew-kontak__emails {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--paper-2);
  border-block: 1.5px solid var(--ink);
}
.ew-kontak__email-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.85rem, 2vw, 1.25rem);
}
@media (max-width: 980px) { .ew-kontak__email-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ew-kontak__email-grid { grid-template-columns: 1fr; } }

.ew-kontak__email-card {
  background: var(--surface);
  border: 1.5px solid var(--edge-2);
  border-radius: 12px;
  padding: 1.25rem 1.1rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.ew-kontak__email-card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(10,10,10,0.2);
}
.ew-kontak__email-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.ew-kontak__email-card h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}
.ew-kontak__email-card p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
  flex: 1;
}
.ew-kontak__email-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--edge);
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition: gap var(--t-fast);
}
.ew-kontak__email-card:hover .ew-kontak__email-link { gap: 0.5rem; }

/* LOCATION — wraps the section padding; the inner card re-uses
   `.ew-tentang__location-card / .ew-tentang__map / .ew-tentang__
   info-row` styles so both pages share the same look. */
.ew-kontak__location {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

/* MARKETPLACE / SOCIAL CHANNELS */
.ew-kontak__channels {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--paper-2);
  border-top: 1.5px solid var(--ink);
}
.ew-kontak__channel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1rem);
}
@media (max-width: 880px) { .ew-kontak__channel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px) { .ew-kontak__channel-grid { grid-template-columns: 1fr; } }

.ew-kontak__channel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.1rem;
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  text-decoration: none !important;
  color: inherit;
  position: relative;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.ew-kontak__channel::after {
  content: "↗";
  position: absolute;
  top: 0.65rem; right: 0.85rem;
  font-family: var(--ff-mono);
  font-size: 1rem;
  color: var(--ink-3);
  transition: color var(--t-fast), transform var(--t-fast);
}
.ew-kontak__channel:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
}
.ew-kontak__channel:hover::after {
  color: var(--red-2);
  transform: translate(2px, -2px);
}
.ew-kontak__channel-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: inherit;
}
.ew-kontak__channel-handle {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.ew-kontak__channel:hover .ew-kontak__channel-handle {
  color: rgba(250,250,247,0.65);
}

/* Related posts at bottom of single post */
.ew-post__related {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1.5px solid var(--ink);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.ew-post__related-head {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ew-post__related-kicker {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.ew-post__related-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}

/* =========================================================
   CEK RESI — order tracking page (page-cek-resi.php)
   Two-column layout: WC order tracking form on the left,
   courier direct-tracking sidebar on the right. Stacks
   below 880 px. The form inputs/button live inside
   `.ew-track-form` rendered by woocommerce/order/form-
   tracking.php (the override).
   ========================================================= */
.ew-cek-resi { background: var(--paper); padding-bottom: clamp(2rem, 5vw, 4rem); }
.ew-cek-resi__hero {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
.ew-cek-resi__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 760px;
}
.ew-cek-resi__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 !important;
}
.ew-cek-resi__title em {
  color: var(--red);
  font-style: normal;
}
.ew-cek-resi__lede {
  font-family: var(--ff-body);
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
}

/* Body grid: ~1.3fr (form) | 1fr (sidebar). On phones the
   sidebar drops below the form so customers see the form first. */
.ew-cek-resi__body { padding-block: 1rem; }
.ew-cek-resi__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
@media (max-width: 880px) {
  .ew-cek-resi__grid { grid-template-columns: 1fr; }
}

.ew-cek-resi__card {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ew-cek-resi__card-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ew-cek-resi__card-kicker {
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.ew-cek-resi__card-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 !important;
}
.ew-cek-resi__card-lede {
  font-family: var(--ff-body);
  font-size: 0.92rem;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}

/* FORM (the WC order-tracking shortcode, our template override).
   `.ew-track-form` is the <form> emitted by form-tracking.php; we
   reset WC's default `<p class="form-row form-row-first">` floats
   by using flex column instead. */
.ew-cek-resi .ew-track-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin: 0 !important;
}
.ew-cek-resi .ew-track-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ew-cek-resi .ew-track-form__label {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ew-cek-resi .ew-track-form__input {
  width: 100%;
  height: 52px;
  padding: 0.85rem 1.1rem;
  font-family: var(--ff-mono);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  appearance: none;
}
.ew-cek-resi .ew-track-form__input::placeholder { color: var(--ink-4); }
.ew-cek-resi .ew-track-form__input:focus {
  outline: none;
  border-color: var(--red);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(230,51,41,0.12);
}
.ew-cek-resi .ew-track-form__hint {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  color: var(--ink-4);
  line-height: 1.4;
}
.ew-cek-resi .ew-track-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 1rem 1.5rem !important;
  background: var(--red) !important;
  color: white !important;
  border: 1.5px solid var(--red) !important;
  border-radius: 999px !important;
  font-family: var(--ff-body) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ew-cek-resi .ew-track-form__submit:hover {
  background: var(--red-deep, #C42218) !important;
  border-color: var(--red-deep, #C42218) !important;
  transform: translateY(-1px);
}
.ew-cek-resi .ew-track-form__submit .icn {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}
/* Phone: stretch the submit to full card width — easier touch target
   and matches the stacked field layout above (each form-row is 100%
   wide on phones, so the submit hugging left would feel orphaned). */
@media (max-width: 540px) {
  .ew-cek-resi .ew-track-form__submit {
    width: 100%;
    padding: 0.95rem 1rem !important;
  }
}

/* SIDEBAR — courier direct-tracking list */
.ew-cek-resi__couriers {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ew-cek-resi__couriers + .ew-cek-resi__couriers {
  margin-top: 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--edge-2);
}
.ew-cek-resi__couriers-label {
  font-family: var(--ff-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 0.35rem !important;
}
.ew-cek-resi__courier-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ew-cek-resi__courier-list li { margin: 0 !important; padding: 0 !important; }
.ew-cek-resi__courier {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--edge-2);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.ew-cek-resi__courier:hover {
  border-color: var(--red);
  background: var(--surface);
  transform: translateX(2px);
}
.ew-cek-resi__courier-name {
  grid-column: 1;
  grid-row: 1;
}
.ew-cek-resi__courier-note {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 0.1rem;
}
.ew-cek-resi__courier-arrow {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  color: var(--ink-3);
  display: inline-grid;
  place-items: center;
  transition: color var(--t-fast), transform var(--t-fast);
}
.ew-cek-resi__courier:hover .ew-cek-resi__courier-arrow {
  color: var(--red);
  transform: translate(2px, -2px);
}

/* HELP CTA — bottom red ribbon to push customers to WhatsApp when
   they don't have a resi yet. */
.ew-cek-resi__help { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.ew-cek-resi__help-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--ink);
  color: var(--paper);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.ew-cek-resi__help-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 22px 22px;
  pointer-events: none;
}
.ew-cek-resi__help-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.ew-cek-resi__help-text .ew-cek-resi__card-kicker { color: var(--red-2, #FF6B5C); }
.ew-cek-resi__help-text h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--paper);
  margin: 0 !important;
}
.ew-cek-resi__help-text p {
  font-family: var(--ff-body);
  font-size: 0.92rem;
  color: rgba(250,250,247,0.78);
  margin: 0;
  line-height: 1.5;
  max-width: 60ch;
}
.ew-cek-resi__help-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.5rem;
  background: #25D366; /* WhatsApp green */
  color: white;
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 12px 28px -16px rgba(37,211,102,0.7);
}
.ew-cek-resi__help-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -16px rgba(37,211,102,0.9);
}
.ew-cek-resi__help-cta .icn {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .ew-cek-resi__help-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .ew-cek-resi__help-cta { justify-self: stretch; justify-content: center; }
}

/* SUCCESS / RESULT — when WC's tracking form returns an order match,
   it renders the tracking.php template inside our wrapper. Style the
   resulting <h2 class="order-info"> + dl summary so it doesn't fall
   back to WC's plain-stack default. */
.ew-cek-resi .order-info {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 1rem !important;
  padding: 0.85rem 1rem;
  background: var(--paper-2);
  border-left: 3px solid var(--red);
  border-radius: 0 6px 6px 0;
}
.ew-cek-resi .order_details {
  margin-top: 1.25rem !important;
}

/* Error notice (no order found) — match WC notice but in brand colours. */
.ew-cek-resi .woocommerce-error,
.ew-cek-resi .woocommerce-info,
.ew-cek-resi .woocommerce-message {
  margin: 0 0 1rem !important;
  padding: 0.95rem 1.1rem !important;
  background: var(--paper-2) !important;
  border: 1px solid var(--edge) !important;
  border-left: 3px solid var(--red) !important;
  border-radius: 0 6px 6px 0 !important;
  font-family: var(--ff-body) !important;
  font-size: 0.92rem !important;
  color: var(--ink) !important;
  list-style: none !important;
}
.ew-cek-resi .woocommerce-error::before,
.ew-cek-resi .woocommerce-info::before,
.ew-cek-resi .woocommerce-message::before {
  display: none !important;
}