/**
 * CFMOTO shared block assets — CSS  (P3c-2)
 *
 * Owns the presentation for the three coded blocks rendered by cfmoto-core's
 * render functions (cfmoto_core_render_card / _products_grid / _carousel /
 * _single_price). Under the preview gate the WPCode snippets + cfmoto-* plugins
 * are dropped, so this stylesheet — NOT the inlined snippet <style> — supplies
 * the card / grid / tabs / currency-pill / carousel / progress-bar styles.
 *
 * Every selector matches the EXACT class/id markup cfmoto_core_render_card()
 * and the grid/carousel/single render fns emit (see cfmoto-core/inc/blocks.php):
 *   .cfm-grid-wrapper  .cfm-grid#cfmoto-product-grid  .cfm-card  .cfm-switch
 *   [data-switch] button[data-cur]  .cfm-specs .cfm-spec(-label|-val)
 *   .cfm-image  .cfm-name  .cfm-prices .cfm-old .cfm-now .cfm-prefix
 *   .cfm-colors .cfm-colors-label .cfm-swatches .cfm-swatch[data-swatch]
 *   #cfmoto-infinite-scroll-trigger  .cfm-loading-text
 *   .cfm-carousel-container .cfm-carousel-track .cfm-carousel-item
 *   .cfm-progress-wrap .cfm-progress-fill
 *   .cfm-single-wrap (single-price)
 * Plus the catalog tab chrome added in this phase:
 *   .cfm-catalog  .cfm-tabs  .cfm-tab  .cfm-tab-panels  .cfm-tab-panel
 *
 * Card/grid block ported verbatim from _migration/snippets/cfmoto_products_grid.php
 * (#cfm-grid-css). Carousel block ported from cfmoto_carousel.php. Single-price
 * overrides ported from cfmoto_single_price.php.
 */

/* ============================================================
   GRID + CARD  (ported from cfmoto_products_grid.php #cfm-grid-css)
   ============================================================ */
.cfm-grid {
  --cfm-card: #f3f3f3;
  --cfm-card-hover: #ededed;
  --cfm-ink: #111;
  --cfm-ink-muted: #6b6b6b;
  --cfm-ink-strike: #9a9a9a;
  --cfm-divider: #d9d9d9;
  --cfm-radius: 8px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  font-family: 'FiraGO', 'BPG Arial', system-ui, -apple-system, sans-serif;
  color: var(--cfm-ink);
  box-sizing: border-box;
}
.cfm-grid *,
.cfm-grid *::before,
.cfm-grid *::after { box-sizing: border-box; }

@media (max-width: 1280px) { .cfm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .cfm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cfm-grid { grid-template-columns: 1fr; gap: 14px; } }

.cfm-card {
  position: relative;
  background: var(--cfm-card);
  border-radius: var(--cfm-radius);
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background .2s ease;
}
.cfm-card:hover { background: var(--cfm-card-hover); }

.cfm-switch {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  background: #fff;
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.06);
  z-index: 3;
}
.cfm-switch button {
  border: 0 !important;
  background: transparent !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .02em !important;
  color: var(--cfm-ink-muted) !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease !important;
  line-height: 1 !important;
}
.cfm-switch button.active { background: var(--cfm-ink) !important; color: #fff !important; }
.cfm-switch button:not(.active):hover { color: var(--cfm-ink) !important; background: transparent !important; }

.cfm-specs {
  display: flex;
  justify-content: flex-start;
  gap: 22px;
  min-height: 36px;
  padding-right: 100px;
  margin-bottom: 4px;
}
.cfm-spec { text-align: left; line-height: 1.15; }
.cfm-spec-label {
  font-size: 10.5px;
  color: var(--cfm-ink-muted);
  letter-spacing: .02em;
  margin-bottom: 3px;
}
.cfm-spec-val { font-size: 13px; font-weight: 700; color: var(--cfm-ink); }

.cfm-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 8px 0 14px;
}
.cfm-image img {
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.cfm-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 8px 0 12px;
}

.cfm-prices {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.cfm-old {
  font-size: 15px;
  color: var(--cfm-ink-strike);
  text-decoration: line-through;
  text-decoration-thickness: 1.2px;
  font-weight: 500;
}
.cfm-now { font-size: 18px; font-weight: 800; color: var(--cfm-ink); }
.cfm-prefix {
  font-size: 13px;
  font-weight: 600;
  color: var(--cfm-ink-muted);
  margin-right: 4px;
}

.cfm-colors {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cfm-divider);
}
.cfm-colors-label { font-size: 12px; color: var(--cfm-ink-muted); font-weight: 500; }
.cfm-swatches { display: inline-flex; gap: 5px; }
.cfm-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-size: 42px 42px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cfm-swatch:hover {
  transform: scale(1.15);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 1px 4px rgba(0,0,0,.12);
}

.cfm-card::after {
  content: "\2192"; /* → */
  position: absolute;
  bottom: 18px;
  right: 18px;
  font-size: 18px;
  color: var(--cfm-ink-muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
.cfm-card:hover::after { opacity: 1; transform: translateX(0); color: var(--cfm-ink); }

/* ============================================================
   INFINITE-SCROLL TRIGGER (ported from #cfm-grid-css)
   ============================================================ */
#cfmoto-infinite-scroll-trigger,
.cfm-infinite-trigger {
  text-align: center;
  padding: 40px 20px;
  color: var(--cfm-ink-muted, #6b6b6b);
  font-family: 'FiraGO', sans-serif;
  font-weight: 600;
  font-size: 15px;
  clear: both;
  width: 100%;
}
.cfm-loading-text {
  display: inline-block;
  animation: cfm-pulse 1.5s infinite;
}
@keyframes cfm-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ============================================================
   CATALOG PAGE SHELL  (new in P3c-2 — template-catalog.php chrome)
   The /catalog/ page uses the LIGHT (solid) header, so the content
   starts below it; this provides the page gutter + heading. The
   tabbed product grid (.cfm-catalog) sits inside .cf-catalog-inner.
   ============================================================ */
.cf-catalog {
  font-family: 'FiraGO', 'BPG Arial', system-ui, -apple-system, sans-serif;
  color: #111;
}
.cf-catalog-inner {
  /* Full-bleed with the SAME side gutter as the home sections (--gut =
     clamp(16px,3vw,48px)) so the catalog aligns edge-to-edge with the rest
     of the site instead of sitting in a narrow 1280px column. */
  max-width: none;
  margin: 0;
  /* Top padding clears the fixed header; bottom breathing room. */
  padding: 140px clamp(16px, 3vw, 48px) 80px;
  box-sizing: border-box;
}
.cf-catalog-head { margin: 0 0 28px; }
.cf-catalog-title {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
@media (max-width: 600px) {
  .cf-catalog-inner { padding: 110px 5vw 60px; }
}

/* ============================================================
   CATALOG TABS  (new in P3c-2 — chrome around the grid panels)
   The catalog template renders one tab per product_cat (the 5 real
   categories); each tab maps to a grid panel. JS toggles .is-active.
   ============================================================ */
.cfm-catalog {
  --cfm-ink: #111;
  --cfm-ink-muted: #6b6b6b;
  --cfm-divider: #d9d9d9;
  width: 100%;
  font-family: 'FiraGO', 'BPG Arial', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.cfm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0 0 4px;
  list-style: none;
}
.cfm-tab {
  appearance: none;
  border: 1px solid var(--cfm-divider);
  background: #fff;
  color: var(--cfm-ink-muted);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .01em;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.cfm-tab:hover { color: var(--cfm-ink); border-color: var(--cfm-ink); }
.cfm-tab.is-active {
  background: var(--cfm-ink);
  border-color: var(--cfm-ink);
  color: #fff;
}
.cfm-tab-count {
  margin-left: 6px;
  font-weight: 600;
  opacity: .7;
}

.cfm-tab-panels { width: 100%; }
.cfm-tab-panel { display: none; }
.cfm-tab-panel.is-active { display: block; }

/* Empty-state message inside a panel with no products. */
.cfm-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--cfm-ink-muted, #6b6b6b);
  font-family: 'FiraGO', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

/* ============================================================
   CAROUSEL  (ported from cfmoto_carousel.php inline <style>)
   ============================================================ */
.cfm-carousel-container.cfm-grid {
  display: block !important;
  width: 100% !important;
  position: relative;
  margin: 20px 0;
  overflow: hidden;
  grid-template-columns: none !important;
}

.cfm-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  -ms-overflow-style: none;  /* IE / Edge */
  scrollbar-width: none;     /* Firefox */
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.cfm-carousel-track::-webkit-scrollbar { display: none; }

.cfm-carousel-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none; /* disable snapping while dragging so it glides */
}

/* Prevent ghost dragging on images and links */
.cfm-carousel-track img,
.cfm-carousel-track a {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.cfm-carousel-item {
  flex: 0 0 calc(33.333% - 14px); /* 3 visible on desktop */
  min-width: 300px;
  scroll-snap-align: start;
  max-width: 400px;
  user-select: none;
}
@media (max-width: 960px) {
  .cfm-carousel-item { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 600px) {
  .cfm-carousel-item { flex: 0 0 85vw; min-width: 260px; }
}

/* Progress bar */
.cfm-progress-wrap {
  width: 100%;
  height: 4px;
  background: #e5e7eb;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
  position: relative;
  display: block !important;
}
.cfm-progress-fill {
  height: 100%;
  background: #111; /* CFMOTO dark ink */
  width: 100%; /* transform scaleX is used for animation, not width */
  transform-origin: left;
  transform: scaleX(0);
  border-radius: 4px;
  will-change: transform;
}

/* ============================================================
   SINGLE-PRICE WIDGET overrides
   (ported from cfmoto_single_price.php inline <style>)
   ============================================================ */
.cfm-single-wrap .cfm-now { font-size: 32px !important; }
.cfm-single-wrap .cfm-old { font-size: 22px !important; }
.cfm-single-wrap .cfm-prefix { font-size: 18px !important; }

/* ============================================================
   CATEGORY ARCHIVE  (new in P3c-2 — taxonomy-product_cat.php)
   Replaces the Elementor product_cat archive: a dark hero built
   from the term's ACF image + name/description, then the term's
   product grid. header.php picks the OVERLAP (transparent, white
   logo) variant on is_tax('product_cat'), so the hero sits behind
   the header — hence the top padding that clears the fixed header.
   ============================================================ */
.cfm-archive {
  font-family: 'FiraGO', 'BPG Arial', system-ui, -apple-system, sans-serif;
  color: #111;
}

.cfm-cat-hero {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: flex-end;
  padding: 150px clamp(16px, 3vw, 48px) 56px;
  background: #0c0c0c;
  color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}
.cfm-cat-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cfm-cat-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Legibility scrim behind the title (header is white over the top). */
.cfm-cat-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.80) 100%);
}
.cfm-cat-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}
.cfm-cat-hero-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 14px;
}
.cfm-cat-hero-title {
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
}
.cfm-cat-hero-desc {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.55;
  max-width: 620px;
  opacity: .9;
}
/* Category hero brand mark — the white CFMOTO logo replaces the text heading
   on the archive hero (filter forces it pure white regardless of source asset). */
.cfm-cat-hero-logo {
  display: block;
  width: clamp(190px, 30vw, 400px);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 16px rgba(0,0,0,.5));
}
.cfm-archive .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Body: the term's product grid below the hero. Full-bleed with the same side
   gutter as the home sections + the /catalog/ page (no narrow 1280px column). */
.cfm-cat-body {
  max-width: none;
  margin: 0;
  padding: 48px clamp(16px, 3vw, 48px) 80px;
  box-sizing: border-box;
}
.cfm-cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 26px;
  flex-wrap: wrap;
}
.cfm-cat-head-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}
.cfm-cat-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--cfm-ink-muted, #6b6b6b);
}

@media (max-width: 600px) {
  .cfm-cat-hero { min-height: 50vh; padding: 130px 5vw 40px; }
  .cfm-cat-body { padding: 32px 5vw 60px; }
}