/*
 * Foiling.market visual layer.
 * Colors + type live at the Elementor Global Kit level (post 6) since
 * Voxel's own CSS variables (--ts-accent-1/2, body font-family, etc.)
 * read from Elementor's globals directly — see commons.css. This file is
 * for layout/component polish that the Kit can't reach.
 */

:root {
  --fm-ink: #0b1f24;
  --fm-radius: 16px;
  --fm-radius-sm: 10px;
  --fm-border: #e2e8e7;
  --fm-surface: #f4f7f6;
  --fm-shadow: 0 1px 2px rgba(11, 31, 36, 0.05), 0 10px 28px rgba(11, 31, 36, 0.07);
  --fm-shadow-hover: 0 6px 14px rgba(11, 31, 36, 0.08), 0 20px 40px rgba(11, 31, 36, 0.12);
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(255, 90, 43, 0.18);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #fff;
}

h1, h2, h3, .elementor-heading-title {
  letter-spacing: -0.01em;
  line-height: 1.12;
}

/* ================= HEADER ================= */
.elementor-1523 {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--fm-border);
}

.elementor-element-hdrwrap1 {
  flex-wrap: wrap !important;
  row-gap: 14px;
  padding: 14px clamp(20px, 4vw, 44px) !important;
  max-width: 1360px;
  margin: 0 auto;
}

/* Logo lockup: foil mark + wordmark */
.elementor-element-hdrlogo1 p { margin: 0; }

.fm-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--fm-ink);
  font-family: "Archivo", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

.fm-logo svg {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  color: var(--ts-accent-1, #ff5a2b);
}

.fm-logo:hover { color: var(--fm-ink); }

.elementor-1523 .ts-nav-menu.ts-custom-links {
  gap: 10px;
  align-items: center;
}

.elementor-1523 .ts-nav-menu.ts-custom-links > .ts-nav {
  align-items: center;
  gap: 10px;
}

/* Text links (Browse Equipment, Guides) — items 1 and 2 */
.elementor-element-hdrnav1 .ts-nav > li:nth-child(1) a,
.elementor-element-hdrnav1 .ts-nav > li:nth-child(2) a {
  font-weight: 600;
  font-size: 15px;
  color: var(--fm-ink);
  opacity: 0.68;
  padding: 9px 12px;
  border-radius: 8px;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.elementor-element-hdrnav1 .ts-nav > li:nth-child(1) a:hover,
.elementor-element-hdrnav1 .ts-nav > li:nth-child(2) a:hover {
  opacity: 1;
  background: var(--fm-surface);
}

/* "Log in" — secondary button. A bare outline on white read as
   near-invisible; a tinted fill gives it presence without competing
   with the primary orange CTA. */
.elementor-element-hdrnav1 .ts-nav > li:nth-child(3) a {
  background: var(--fm-surface);
  color: var(--fm-ink) !important;
  border-radius: 999px;
  padding: 10px 19px;
  font-size: 15px;
  font-weight: 600;
  opacity: 1 !important;
  transition: background 0.15s ease;
}

.elementor-element-hdrnav1 .ts-nav > li:nth-child(3) a:hover {
  background: #e5ebe9;
}

/* "Sell Your Gear" — primary CTA, last item */
.elementor-element-hdrnav1 .ts-nav > li:last-child a {
  background: var(--ts-accent-1, #ff5a2b);
  color: #fff !important;
  opacity: 1 !important;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(255, 90, 43, 0.2), 0 4px 12px rgba(255, 90, 43, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.elementor-element-hdrnav1 .ts-nav > li:last-child a:hover {
  background: #f24d1e;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(255, 90, 43, 0.22), 0 8px 20px rgba(255, 90, 43, 0.3);
}

.elementor-element-hdrnav1 .ts-nav {
  flex-wrap: wrap !important;
  overflow: visible !important;
  align-items: center;
  gap: 6px;
  row-gap: 10px;
}

/* Voxel renders an .ts-item-icon wrapper inside every navbar link even
   when no icon is configured. It's visually empty but still ~24px wide
   plus a 5px flex gap, which inflated every nav item by ~30px and forced
   the CTA to wrap onto its own row on narrow screens. We set no nav
   icons anywhere, so collapse it. (If nav icons are ever added in the
   header/footer build scripts, drop this rule.) */
.elementor-element-hdrnav1 .ts-item-icon,
.elementor-element-ftrnav1 .ts-item-icon {
  /* !important is required: Voxel's .flexify utility sets
     `display: flex !important`, which otherwise wins here. */
  display: none !important;
}

.elementor-element-hdrnav1 .ts-item-link,
.elementor-element-ftrnav1 .ts-item-link {
  gap: 0;
}

/* Slight extra separation between the text links and the button pair */
.elementor-element-hdrnav1 .ts-nav > li:nth-child(3) {
  margin-left: 8px;
}

/* Mobile / narrow: no working hamburger (see notes in the child theme
   readme), so the four nav items stay visible — compressed enough to sit
   on a single row under the logo instead of wrapping into a 200px-tall
   stack. */
@media (max-width: 860px) {
  .elementor-element-hdrwrap1 {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px;
    padding: 14px 16px !important;
  }

  .elementor-element-hdrnav1 .ts-nav {
    justify-content: center;
    gap: 4px;
  }

  .elementor-element-hdrnav1 .ts-nav > li:nth-child(1) a,
  .elementor-element-hdrnav1 .ts-nav > li:nth-child(2) a {
    font-size: 14px;
    padding: 8px 9px;
  }

  .elementor-element-hdrnav1 .ts-nav > li:nth-child(3) a,
  .elementor-element-hdrnav1 .ts-nav > li:last-child a {
    font-size: 14px;
    padding: 8px 15px;
  }

  .elementor-element-hdrnav1 .ts-nav > li:nth-child(3) {
    margin-left: 4px;
  }
}

@media (max-width: 420px) {
  .elementor-element-hdrnav1 .ts-nav > li:nth-child(1) a,
  .elementor-element-hdrnav1 .ts-nav > li:nth-child(2) a {
    font-size: 13.5px;
    padding: 8px 6px;
  }

  .elementor-element-hdrnav1 .ts-nav > li:nth-child(3) a,
  .elementor-element-hdrnav1 .ts-nav > li:last-child a {
    font-size: 13.5px;
    padding: 8px 13px;
  }
}

/* ================= HERO ================= */
/* Deep-water gradient rather than the previous orange radial, which
   muddied to brown where it met the dark base. Cool teal depth + a
   single restrained warm glow low-right, plus fine diagonal hairlines
   for texture. */
.elementor-1525 .e-con:first-of-type {
  position: relative;
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(79, 214, 194, 0.15), transparent 70%),
    radial-gradient(ellipse 50% 60% at 88% 100%, rgba(255, 90, 43, 0.16), transparent 65%),
    linear-gradient(168deg, #0d262c 0%, #0b1f24 55%, #091a1f 100%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0px, rgba(255, 255, 255, 0.022) 1px, transparent 1px, transparent 38px);
}

.elementor-1525 .e-con:first-of-type > .e-con-inner,
.elementor-1525 .e-con:first-of-type > * {
  position: relative;
  z-index: 1;
}

.fm-hero-eyebrow {
  margin: 0 0 18px !important;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.elementor-element-herotitle1 .elementor-heading-title {
  font-size: clamp(2rem, 4.6vw, 3.4rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin: 0 auto;
  text-wrap: balance;
}

.fm-hero-sub {
  margin: 18px auto 0 !important;
  text-align: center;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(226, 240, 238, 0.78);
}

/* Hero search card: bigger and airier than the compact archive search
   bar, with the button sitting inline with the fields on desktop. */
.elementor-element-herosearch1 {
  width: 100%;
  margin-top: 36px !important;
}

.elementor-1525 .ts-form.ts-search-widget {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px !important;
  border: none;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(6, 20, 24, 0.18), 0 22px 50px rgba(6, 20, 24, 0.35);
}

.elementor-1525 .ts-filter-wrapper {
  gap: 10px !important;
  align-items: center;
}

.elementor-1525 .ts-filter {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  border-color: transparent !important;
  background: var(--fm-surface) !important;
}

.elementor-1525 .ts-filter:hover {
  background: #eaf0ee !important;
  border-color: transparent !important;
}

.elementor-1525 .e-con:first-of-type .ts-btn {
  font-size: 16px;
  padding: 14px 30px !important;
  justify-content: center;
}

@media (min-width: 900px) {
  /* Put Search inline at the end of the field row instead of stacked */
  .elementor-1525 .ts-form.ts-search-widget .ts-form-group.ts-form-submit {
    margin-left: auto;
  }
}

/* Secondary CTA + trust row — centered with the rest of the hero
   (previously these sat flush-left, disconnected from the centered
   headline/search stack). */
.fm-hero-cta-row {
  margin: 24px 0 0 !important;
  text-align: center;
}

.hero-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 3px;
  transition: border-color 0.15s ease;
}

.hero-secondary-cta:hover {
  color: #fff;
  border-color: #fff;
}

.fm-hero-trust {
  margin: 30px 0 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  font-size: 13.5px;
  color: rgba(226, 240, 238, 0.6);
}

.fm-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fm-hero-trust span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ts-accent-1, #ff5a2b);
  flex-shrink: 0;
}

/* ================= SECTION HEADS ================= */
.fm-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.fm-section-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  letter-spacing: -0.02em;
}

.fm-section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 34px;
}

.fm-section-sub {
  margin: 10px 0 0 !important;
  font-size: 16.5px;
  color: var(--fm-ink);
  opacity: 0.66;
  max-width: 52ch;
}

.fm-section-link {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fm-ink);
  opacity: 0.6;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.fm-section-link:hover {
  opacity: 1;
  color: var(--ts-accent-1, #ff5a2b);
}

.fm-boxed {
  max-width: 1140px;
  margin: 0 auto;
}

/* ================= HOW IT WORKS ================= */
.fm-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.fm-step {
  background: #fff;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  padding: 26px 24px;
}

.fm-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ts-accent-1, #ff5a2b);
  color: #fff;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 14px;
}

.fm-step h3 {
  margin: 0 0 8px;
  font-size: 17.5px;
}

.fm-step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fm-ink);
  opacity: 0.7;
}

.fm-center-cta {
  text-align: center;
  margin: 34px 0 0 !important;
}

.fm-btn-primary {
  display: inline-block;
  background: var(--ts-accent-1, #ff5a2b);
  color: #fff !important;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(255, 90, 43, 0.26);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.fm-btn-primary:hover {
  background: #f24d1e;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 90, 43, 0.32);
}

/* ================= REPORTING ================= */
.fm-report-head { max-width: 60ch; margin-bottom: 30px; }
.fm-report-head h1 { margin: 0 0 12px; font-size: clamp(1.7rem, 3.6vw, 2.3rem); letter-spacing: -0.02em; }
.fm-report-head p { margin: 0; font-size: 16.5px; color: var(--fm-ink); opacity: 0.68; }

.fm-report { max-width: 620px; }

.fm-report-subject {
  background: var(--fm-surface);
  border-radius: var(--fm-radius-sm);
  padding: 13px 16px;
  margin: 0 0 22px;
  font-size: 14.5px;
}

.fm-report-subject--none { color: var(--fm-ink); opacity: 0.75; }

.fm-report-error {
  background: #fdecea;
  color: #9d2f22;
  border-radius: var(--fm-radius-sm);
  padding: 13px 16px;
  margin: 0 0 20px;
  font-size: 14.5px;
  font-weight: 600;
}

.fm-report-form { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

.fm-field { display: flex; flex-direction: column; gap: 7px; width: 100%; }

.fm-field-label {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--fm-ink);
}

.fm-optional { font-weight: 500; opacity: 0.55; font-size: 13px; }

.fm-field select,
.fm-field textarea,
.fm-field input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--fm-ink);
  background: #fff;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-sm);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fm-field select:focus,
.fm-field textarea:focus,
.fm-field input[type="email"]:focus {
  outline: none;
  border-color: var(--ts-accent-1, #ff5a2b);
  box-shadow: 0 0 0 3px rgba(255, 90, 43, 0.14);
}

.fm-field textarea { resize: vertical; min-height: 110px; }

.fm-report-form button { border: none; cursor: pointer; font: inherit; font-weight: 600; }

.fm-report-note { margin: 0; font-size: 13.5px; color: var(--fm-ink); opacity: 0.6; }

/* Honeypot — visually hidden but not display:none, so bots still fill it */
.fm-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.fm-report-done {
  max-width: 52ch;
  background: var(--fm-surface);
  border-radius: var(--fm-radius);
  padding: 40px 28px;
}

.fm-report-done h2 { margin: 0 0 10px; font-size: clamp(1.3rem, 2.8vw, 1.7rem); letter-spacing: -0.02em; }
.fm-report-done p { margin: 0 0 20px; color: var(--fm-ink); opacity: 0.7; }

.fm-report-link { white-space: nowrap; }

/* ================= SOLD STATE ================= */
.fm-sold-banner {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--fm-surface);
  border-left: 3px solid var(--fm-ink);
  border-radius: var(--fm-radius-sm);
  padding: 15px 18px;
  margin-bottom: 4px;
}

.fm-sold-banner strong {
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  color: var(--fm-ink);
}

.fm-sold-banner span {
  font-size: 14px;
  color: var(--fm-ink);
  opacity: 0.65;
}

.fm-similar h2 {
  margin: 0 0 18px;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  letter-spacing: -0.02em;
}

/* ================= SELLER PROFILE ================= */
.fm-seller-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 44px clamp(18px, 4vw, 32px) 80px;
}

.fm-seller-head {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--fm-border);
}

.fm-seller-avatar-wrap { flex-shrink: 0; }

.fm-seller-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: block;
  background: var(--fm-surface);
}

.fm-seller-kicker {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ts-accent-1, #ff5a2b);
  margin-bottom: 6px;
}

.fm-seller-id h1 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.fm-seller-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  color: var(--fm-ink);
  opacity: 0.62;
}

.fm-seller-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fm-seller-meta span + span::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

.fm-seller-section-title {
  margin: 34px 0 18px;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  letter-spacing: -0.02em;
}

.fm-seller-empty {
  background: var(--fm-surface);
  border-radius: var(--fm-radius);
  padding: 40px 24px;
  text-align: center;
}

.fm-seller-empty p { margin: 0 0 18px; color: var(--fm-ink); opacity: 0.7; }
.fm-seller-empty p:last-child { margin: 0; }

/* Compact listing cards used on profiles */
.fm-seller-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}

.fm-mini-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: var(--fm-ink);
  box-shadow: var(--fm-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fm-mini-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fm-shadow-hover);
  color: var(--fm-ink);
}

.fm-mini-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, #eef3f2, #dfeae7),
    repeating-linear-gradient(45deg, rgba(11,31,36,0.05) 0, rgba(11,31,36,0.05) 1px, transparent 1px, transparent 12px);
}

.fm-mini-body { display: block; padding: 14px 16px 16px; }

.fm-mini-title {
  display: block;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  margin-bottom: 9px;
}

.fm-mini-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.fm-mini-cond {
  font-family: "Archivo", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--fm-surface);
  padding: 3px 9px;
  border-radius: 999px;
}

.fm-mini-price {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 15px;
}

.fm-mini-sold {
  display: inline-block;
  margin-top: 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fm-ink);
  background: var(--fm-surface);
  padding: 3px 9px;
  border-radius: 999px;
}

.fm-mini-card.is-sold .fm-mini-thumb { opacity: 0.55; }

/* Sellers directory */
.fm-sellers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

.fm-seller-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 26px 16px;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  background: #fff;
  text-decoration: none;
  color: var(--fm-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.fm-seller-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fm-shadow);
  border-color: var(--ts-accent-1, #ff5a2b);
  color: var(--fm-ink);
}

.fm-seller-card-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin-bottom: 10px;
  background: var(--fm-surface);
}

.fm-seller-card-name { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 15px; }
.fm-seller-card-count { font-size: 13px; opacity: 0.55; }

/* ================= LISTING SPECS ================= */
.fm-specs-title {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.fm-specs dl {
  margin: 0;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  overflow: hidden;
  background: #fff;
}

.fm-spec-row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 16px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--fm-border);
}

.fm-spec-row:last-child { border-bottom: none; }
.fm-spec-row:nth-child(odd) { background: color-mix(in srgb, var(--fm-surface) 55%, #fff); }

.fm-specs dt {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fm-ink);
  opacity: 0.62;
}

.fm-specs dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fm-ink);
}

.fm-specs dd a {
  color: var(--fm-ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong, #b7c7c2);
  text-underline-offset: 3px;
}

.fm-specs dd a:hover { color: var(--ts-accent-1, #ff5a2b); }

@media (max-width: 460px) {
  .fm-spec-row { grid-template-columns: 1fr; gap: 3px; }
}

/* ================= 404 ================= */
.fm-404 {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto;
}

.fm-404-code {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ts-accent-1, #ff5a2b);
  margin: 0 0 14px !important;
}

.fm-404 h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.fm-404-sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fm-ink);
  opacity: 0.68;
  margin: 0 0 28px !important;
}

.fm-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 22px !important;
}

.fm-btn-ghost {
  display: inline-block;
  background: var(--fm-surface);
  color: var(--fm-ink) !important;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.fm-btn-ghost:hover { background: #e5ebe9; }

.fm-404-alt {
  font-size: 14.5px;
  color: var(--fm-ink);
  opacity: 0.6;
  margin: 0 !important;
}

/* ================= INBOX ================= */
.elementor-1568 .elementor-element-inboxtitle1 {
  margin-bottom: 18px;
}

/* Logged-out gate (also reusable for any other auth-gated area) */
.fm-gate {
  text-align: center;
  max-width: 42ch;
  margin: 30px auto;
  padding: 44px 28px;
  background: var(--fm-surface);
  border-radius: var(--fm-radius);
}

.fm-gate h2 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  letter-spacing: -0.02em;
}

.fm-gate p {
  margin: 0 0 24px;
  font-size: 15.5px;
  color: var(--fm-ink);
  opacity: 0.68;
}

.fm-gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 !important;
}

/* ================= BRAND STRIP ================= */
.fm-brand-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fm-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--fm-border);
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
  font-size: 15px;
  color: var(--fm-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.fm-brand-chip span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fm-ink);
  opacity: 0.42;
  font-variant-numeric: tabular-nums;
}

.fm-brand-chip:hover {
  border-color: var(--ts-accent-1, #ff5a2b);
  background: #fff8f5;
  transform: translateY(-1px);
  color: var(--fm-ink);
}

/* ================= CATEGORY GRID ================= */
.fm-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.fm-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 14px 22px;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  background: #fff;
  text-decoration: none;
  color: var(--fm-ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.fm-cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--fm-shadow);
  border-color: var(--ts-accent-1, #ff5a2b);
  color: var(--fm-ink);
}

.fm-cat-icon {
  width: 34px;
  height: 34px;
  color: var(--ts-accent-1, #ff5a2b);
  margin-bottom: 10px;
}

.fm-cat-label {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.fm-cat-count {
  font-size: 13px;
  color: var(--fm-ink);
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

/* ================= BUTTONS & FILTERS ================= */
.ts-btn {
  border-radius: 999px !important;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ts-btn-1, .ts-btn-2 {
  box-shadow: 0 2px 8px rgba(255, 90, 43, 0.25);
}

.ts-btn-1:hover, .ts-btn-2:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 90, 43, 0.3);
}

.ts-form-group.ts-form-submit .ts-btn {
  box-shadow: none;
}

.ts-filter {
  border-radius: 999px !important;
  border-color: var(--fm-border) !important;
  background: #fff !important;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ts-filter:hover {
  border-color: var(--ts-accent-1, #ff5a2b) !important;
  box-shadow: 0 2px 6px rgba(11, 31, 36, 0.06);
}

/* ================= SEARCH FORM SHELL ================= */
.ts-form.ts-search-widget {
  background: #fff;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  box-shadow: var(--fm-shadow);
  padding: 18px !important;
}

/* ================= LISTING CARDS ================= */
.post-feed-grid, .ts-feed-grid-default {
  gap: 22px !important;
}

.ts-preview {
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--fm-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ts-preview:hover {
  transform: translateY(-4px);
  box-shadow: var(--fm-shadow-hover);
}

/* image area: aspect-ratio box with a technical-pattern placeholder when
   there's no photo yet (empty src -> browsers would otherwise show a
   broken-image glyph) */
.ts-preview .elementor-widget-image {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  flex: 1 1 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden;
  background:
    linear-gradient(135deg, #eef3f2, #dfeae7),
    repeating-linear-gradient(45deg, rgba(11,31,36,0.05) 0px, rgba(11,31,36,0.05) 1px, transparent 1px, transparent 12px) !important;
}

.ts-preview .elementor-widget-image::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34px;
  height: 34px;
  opacity: 0.3;
  background-color: var(--fm-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 16l5-6 4 4 3-4 6 8'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E") center/28px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 16l5-6 4 4 3-4 6 8'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3C/svg%3E") center/28px no-repeat;
}

.ts-preview .elementor-widget-image img {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}

.ts-preview .elementor-widget-image img[src=""] {
  visibility: hidden !important;
}

.ts-preview .elementor-heading-title,
.ts-preview .elementor-heading-title a {
  color: var(--fm-ink);
}

.ts-preview > .elementor > .e-con {
  padding: 4px 16px 16px !important;
}

.ts-preview > .elementor > .e-con:first-child {
  padding: 0 !important;
  width: 100% !important;
}

/* condition / price / status row -> badge treatment */
.ts-preview .elementor-element-db7f685 {
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap;
}

.ts-preview .elementor-element-db7f685 .elementor-widget:nth-child(1) .elementor-heading-title {
  background: var(--fm-surface);
  color: var(--fm-ink);
  font-size: 12px !important;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ts-preview .elementor-element-db7f685 .elementor-widget:nth-child(2) .elementor-heading-title {
  font-size: 18px !important;
  font-weight: 800;
  color: var(--fm-ink);
}

.ts-preview .elementor-element-db7f685 .elementor-widget:nth-child(3) .elementor-heading-title {
  font-size: 12px !important;
  font-weight: 600;
  color: #1a7a4f;
  background: #e5f5ec;
  padding: 4px 10px;
  border-radius: 999px;
}

/* ================= SINGLE LISTING GALLERY (no photos yet) ================= */
.ts-gallery-grid {
  gap: 10px !important;
}

.ts-gallery-grid li.ts-empty-item {
  border-radius: var(--fm-radius-sm);
  overflow: hidden;
}

.ts-gallery-grid li.ts-empty-item div {
  width: 100%;
  height: 100%;
  min-height: 90px;
  background:
    linear-gradient(135deg, #eef3f2, #dfeae7),
    repeating-linear-gradient(45deg, rgba(11,31,36,0.05) 0px, rgba(11,31,36,0.05) 1px, transparent 1px, transparent 12px);
}

/* single listing meta row: condition / status / price -> badges */
.elementor-1504 .elementor-element-1d1aacd {
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

.elementor-1504 .elementor-element-1d1aacd .elementor-widget:nth-child(1) .elementor-heading-title {
  background: var(--fm-surface);
  color: var(--fm-ink);
  font-size: 13px !important;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.elementor-1504 .elementor-element-1d1aacd .elementor-widget:nth-child(2) .elementor-heading-title {
  font-size: 13px !important;
  font-weight: 600;
  color: #1a7a4f;
  background: #e5f5ec;
  padding: 5px 12px;
  border-radius: 999px;
}

.elementor-1504 .elementor-element-1d1aacd .elementor-widget:nth-child(3) .elementor-heading-title {
  font-size: 24px !important;
  font-weight: 800;
  color: var(--fm-ink);
}

/* single listing action row: Save / Message Seller */
.ts-advanced-list {
  gap: 10px !important;
  flex-wrap: wrap;
}

.ts-advanced-list > li > a,
.ts-advanced-list > li > .ts-acw-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: 1.5px solid var(--fm-border);
  color: var(--fm-ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ts-advanced-list > li:first-child > a,
.ts-advanced-list > li:first-child > .ts-acw-btn {
  background: var(--ts-accent-1, #ff5a2b);
  border-color: transparent;
  color: #fff;
}

.ts-advanced-list > li > a:hover,
.ts-advanced-list > li > .ts-acw-btn:hover {
  border-color: var(--fm-ink);
}

/* taxonomy archive breadcrumb */
.fm-breadcrumb {
  font-size: 13px;
  font-weight: 600;
  color: var(--fm-ink);
  opacity: 0.6;
  margin-bottom: 8px;
  display: block;
}

.fm-breadcrumb a {
  color: inherit;
}

.fm-breadcrumb .fm-crumb-current {
  opacity: 0.6;
}

/* ================= GUIDES ================= */
.fm-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.fm-guide-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius);
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--fm-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fm-guide-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fm-shadow-hover);
}

.fm-guide-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ts-accent-1, #ff5a2b);
}

.fm-guide-card h3 {
  margin: 0;
  font-size: 18px;
  color: var(--fm-ink);
}

.fm-guide-card p {
  margin: 0;
  font-size: 14px;
  color: var(--fm-ink);
  opacity: 0.72;
  flex-grow: 1;
}

.fm-guide-readmore {
  font-weight: 600;
  font-size: 14px;
  color: var(--fm-ink);
}

/* single guide article */
.fm-article {
  max-width: 720px;
  margin: 0 auto;
}

.fm-article h2 {
  margin-top: 36px;
  font-size: 24px;
}

.fm-article h3 {
  margin-top: 24px;
  font-size: 19px;
}

.fm-article p, .fm-article li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fm-ink);
}

.fm-article ul, .fm-article ol {
  padding-left: 1.4em;
}

.fm-article .fm-article-links {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--fm-border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fm-article .fm-article-links a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--fm-border);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--fm-ink);
  text-decoration: none;
}

.fm-article .fm-article-links a:hover {
  border-color: var(--ts-accent-1, #ff5a2b);
}

/* ================= DEFAULT SINGLE (guide articles) ================= */
.fm-default-single-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 72px;
}

.fm-default-single-meta {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ts-accent-1, #ff5a2b);
  margin: 0 0 8px;
}

.fm-default-single-inner h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 28px;
}

.fm-default-single-content h2 {
  font-size: 24px;
  margin-top: 36px;
}

.fm-default-single-content h3 {
  font-size: 19px;
  margin-top: 24px;
}

.fm-default-single-content p,
.fm-default-single-content li {
  font-size: 16px;
  line-height: 1.7;
}

/* ================= SECTIONS / SPACING ================= */
.e-con.e-parent {
  --content-padding: clamp(20px, 5vw, 56px);
}

/* ================= FOOTER ================= */
.elementor-1524 {
  border-top: 1px solid var(--fm-border);
  background: var(--fm-surface) !important;
}

.elementor-1524 p {
  font-weight: 500;
  color: var(--fm-ink);
}

.elementor-1524 .ts-nav-menu.ts-wp-menu a,
.elementor-1524 .ts-nav-menu.ts-custom-links a {
  color: var(--fm-ink);
  opacity: 0.7;
  font-weight: 600;
}

.elementor-1524 .ts-nav-menu a:hover {
  opacity: 1;
}

.elementor-element-ftrwrap1 {
  flex-wrap: wrap !important;
  row-gap: 14px;
}

.elementor-element-ftrnav1 .ts-nav {
  flex-wrap: wrap !important;
  overflow: visible !important;
  row-gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ts-btn, .ts-preview, .ts-filter, .menu-item-1529 a { transition: none; }
}