/**
 * PoE Injector presentation — light catalog theme.
 *
 * Scoped to the PoE module. Do not reuse CRPS-specific selectors
 * (.sph-product-card-rich) or turn the compact 12-product catalog into a
 * dense filter panel. All rules live under .sph-poe-* or the dual-class
 * .sph-poe-card.sph-product-card scope so CRPS, Homepage and other pages
 * are never affected.
 *
 * Color strategy (see 配色方案执行计划.md):
 *  - Brand green (Logo / hero CTA / palette-color-1 #39A751) is kept bright
 *    and is NOT reused here. Blocksy header/footer stay dark.
 *  - UI functional green (buttons, active chips, spec accent) uses a calmer,
 *    deeper emerald so the light page reads professional, not SaaS-pasty:
 *      --sph-poe-ui:        #059669
 *      --sph-poe-ui-hover:  #047857
 *      --sph-poe-ui-soft:   #ECFDF5
 *      --sph-poe-ui-line:   #A7F3D0
 *  - Passive chips borrow a restrained indigo so the two types stay separable
 *    without screaming.
 *  - Surfaces / text / borders reference --sph-* tokens from tokens.css where
 *    the names match; a few PoE-only shades are inlined below.
 */

:root {
  --sph-poe-ui: #059669;
  --sph-poe-ui-hover: #047857;
  --sph-poe-ui-soft: #ECFDF5;
  --sph-poe-ui-line: #A7F3D0;

  --sph-poe-bg: #F8FAFC;
  --sph-poe-card-bg: #FFFFFF;
  --sph-poe-image-bg: #F1F5F9;

  --sph-poe-text: #0F172A;
  --sph-poe-text-soft: #475569;
  --sph-poe-text-muted: #64748B;

  --sph-poe-line: #E2E8F0;
  --sph-poe-line-soft: #EEF2F6;

  --sph-poe-radius-card: 14px;
  --sph-poe-radius-image: 14px;
  --sph-poe-radius-chip: 8px;
  --sph-poe-radius-spec: 10px;
  --sph-poe-radius-btn: 10px;

  --sph-poe-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sph-poe-shadow-card-hover: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* =========================================================
   PoE page vertical rhythm
   Blocksy ships 60px top padding + 40px hero margin-bottom on
   single_page, which leaves a near-hero-height gap between the
   sticky header and the filter bar. Scope to .page-id-2399 so
   Homepage / Products / other pages keep their own spacing.
   ========================================================= */

.page-id-2399 .ct-container-full {
  --theme-content-vertical-spacing: 18px;
}

.page-id-2399 .hero-section[data-type="type-1"] {
  --margin-bottom: 8px;
}

@media (max-width: 689.98px) {
  .page-id-2399 .ct-container-full {
    --theme-content-vertical-spacing: 14px;
  }
}

/* =========================================================
   Breadcrumb
   ========================================================= */

.sph-poe-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  color: var(--sph-poe-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.sph-poe-breadcrumb a {
  color: var(--sph-poe-text-muted);
  text-decoration: none;
  font-weight: 500;
}

.sph-poe-breadcrumb a:hover {
  color: var(--sph-poe-ui);
}

.sph-poe-breadcrumb-sep {
  color: #CBD5E1;
}

.sph-poe-breadcrumb-current {
  color: var(--sph-poe-text);
  font-weight: 700;
}

/* =========================================================
   Filter toolbar
   ========================================================= */

.sph-poe-catalog {
  background: var(--sph-poe-bg);
  padding: 4px 0 0;
}

.sph-poe-catalog-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--sph-poe-card-bg);
  border: 1px solid var(--sph-poe-line);
  border-radius: 12px;
  box-shadow: var(--sph-poe-shadow-card);
}

.sph-poe-filter-label {
  color: var(--sph-poe-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sph-poe-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sph-poe-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 8px 14px;
  color: var(--sph-poe-text);
  background: var(--sph-poe-card-bg);
  border: 1px solid var(--sph-poe-line);
  border-radius: var(--sph-poe-radius-chip);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.sph-poe-filter-chip:hover,
.sph-poe-filter-chip:focus-visible {
  color: var(--sph-poe-ui-hover);
  border-color: var(--sph-poe-ui-line);
  background: var(--sph-poe-ui-soft);
}

.sph-poe-filter-chip.is-active {
  color: var(--sph-poe-ui-hover);
  background: var(--sph-poe-ui-soft);
  border-color: var(--sph-poe-ui-line);
  font-weight: 700;
}

.sph-poe-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  color: var(--sph-poe-text-muted);
  background: #F1F5F9;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.sph-poe-filter-chip.is-active .sph-poe-filter-count {
  color: var(--sph-poe-ui-hover);
  background: #D1FAE5;
}

.sph-poe-filter-chip:hover .sph-poe-filter-count {
  color: var(--sph-poe-ui-hover);
}

.sph-poe-product-total {
  color: var(--sph-poe-text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .sph-poe-catalog-toolbar {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 14px;
  }

  .sph-poe-filter-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .sph-poe-filter-chip {
    flex: 1 1 0;
    justify-content: center;
    padding-inline: 9px;
  }
}

@media (max-width: 420px) {
  .sph-poe-filter-label,
  .sph-poe-product-total {
    font-size: 11px;
  }

  .sph-poe-filter-chip {
    gap: 6px;
    font-size: 12px;
  }
}

/* =========================================================
   PoE Catalog Grid
   Four columns on desktop (12 products = 3 full rows), two on
   tablet, one on mobile. The dual-class selector raises
   specificity above the base .sph-product-grid rule, which is
   printed later in #wp-custom-css and must not win here.
   ========================================================= */

.sph-poe-grid.sph-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px) {
  .sph-poe-grid.sph-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .sph-poe-grid.sph-product-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================================================
   PoE Injector Card
   Scoped to .sph-poe-card so CRPS (.sph-product-card-rich)
   and other pages are never affected. The base .sph-product-card
   styles come from Blocksy additional CSS and are overridden
   here under the .sph-poe-card scope (including the inherited
   green theme link color on .sph-product-card-link).
   ========================================================= */

.sph-poe-card.sph-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 16px 18px;
  border-radius: var(--sph-poe-radius-card);
  background: var(--sph-poe-card-bg);
  border: 1px solid var(--sph-poe-line);
  box-shadow: var(--sph-poe-shadow-card);
  text-align: left;
  color: var(--sph-poe-text);
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sph-poe-card.sph-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--sph-poe-ui-line);
  box-shadow: var(--sph-poe-shadow-card-hover);
}

.sph-poe-card .sph-product-card-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

/* Top row: type badge (left) + power chip (right) */

.sph-poe-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.sph-poe-card .sph-poe-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.sph-poe-card .sph-poe-type-active {
  color: var(--sph-poe-ui-hover);
  background: var(--sph-poe-ui-soft);
  border-color: var(--sph-poe-ui-line);
}

.sph-poe-card .sph-poe-type-passive {
  color: #3730A3;
  background: #EEF2FF;
  border-color: #E0E7FF;
}

.sph-poe-card .sph-poe-power-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 7px;
  color: #334155;
  background: #F1F5F9;
  border: 1px solid var(--sph-poe-line);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Featured image (rendered only when a thumbnail exists) */

.sph-poe-card .sph-product-card-image {
  background: var(--sph-poe-image-bg);
  border-radius: var(--sph-poe-radius-image);
  aspect-ratio: 1 / 1;
  padding: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background-color 0.2s ease;
}

.sph-poe-card:hover .sph-product-card-image {
  background: #E9F1F8;
}

.sph-poe-card .sph-product-card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Model + description */

.sph-poe-card .sph-product-card-title {
  margin: 0 0 4px;
  color: var(--sph-poe-text);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
}

.sph-poe-card .sph-poe-card-description {
  margin: 0 0 14px;
  color: var(--sph-poe-text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

/* Specs panel: label left, value right */

.sph-poe-card .sph-product-card-specs {
  margin: auto 0 0;
  border-radius: var(--sph-poe-radius-spec);
  border: 1px solid var(--sph-poe-line-soft);
  background: var(--sph-poe-bg);
  overflow: hidden;
}

.sph-poe-card .sph-product-card-spec-row {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 12px;
  align-items: baseline;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sph-poe-line-soft);
}

/* PoE Standard gets a wider value column so the slash-separated
   standard stays on a single line (no wrap). */

.sph-poe-card .sph-product-card-spec-row:first-child {
  grid-template-columns: 32% 68%;
}

.sph-poe-card .sph-product-card-spec-row:last-child {
  border-bottom: none;
}

.sph-poe-card .sph-product-card-specs dt {
  margin: 0;
  color: var(--sph-poe-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: nowrap;
}

.sph-poe-card .sph-product-card-specs dd {
  margin: 0;
  color: var(--sph-poe-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding-right: 4px;
}

/* Single restrained green accent: the first spec row (PoE Standard).
   Deep emerald, NOT the #48e56b neon used in the old dark theme. */

.sph-poe-card .sph-product-card-spec-row:first-child dd {
  color: var(--sph-poe-ui-hover);
  white-space: nowrap;
}

/* CTA button */

.sph-poe-card .sph-product-card-cta {
  display: block;
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: var(--sph-poe-radius-btn);
  background: var(--sph-poe-card-bg);
  border: 1px solid var(--sph-poe-line);
  color: var(--sph-poe-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.sph-poe-card:hover .sph-product-card-cta {
  background: var(--sph-poe-ui-soft);
  border-color: var(--sph-poe-ui-line);
}

@media (max-width: 600px) {
  .sph-poe-card .sph-product-card-title {
    font-size: 18px;
  }

  .sph-poe-card .sph-product-card-spec-row {
    grid-template-columns: 38% 62%;
  }
}

/* =========================================================
   PoE Injector single-product — light theme polish

   The single-product light theme itself lives in Blocksy
   Additional CSS. These small, PoE-scoped refinements layer on
   top of it and only affect PoE Injector pages (body class
   sph-poe-product is added by this module):
     1. Gallery gets a light-gray canvas, centered product and an
        unclipped thumbnail row; description text is darkened.
     2. SKU is revealed as a quiet, light-gray chip.
     3. "Technical Specifications" gets a thin green accent bar.
     4. The Turnstile -> submit gap is tightened.
   ========================================================= */

/* 1. Gallery: the light theme is written against the default
   WooCommerce gallery markup, but Blocksy renders its own flexy
   gallery. Restore the light-gray image canvas, let the gallery
   size to its content so the thumbnail row is not clipped, and
   center the product with a small margin (not edge-to-edge). */
body.sph-poe-product .woocommerce-product-gallery {
  height: auto !important;
  max-height: none !important;
}

body.sph-poe-product .flexy-view,
body.sph-poe-product .flexy-item figure.ct-media-container {
  background: var(--sph-poe-image-bg) !important;
}

body.sph-poe-product .flexy-view {
  border-radius: 12px !important;
}

body.sph-poe-product .flexy-item figure.ct-media-container img {
  object-fit: contain !important;
  max-width: 88% !important;
  max-height: 88% !important;
  margin: auto !important;
}

/* 1b. One-line description: medium gray-blue for readability. */
body.sph-poe-product .sph-product-overview__text {
  color: var(--sph-poe-text-soft) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* 2. SKU: keep it, but visually quiet — small chip, light gray. */
body.sph-poe-product .summary.entry-summary .product_meta {
  display: block !important;
  margin-top: 16px !important;
  border: none !important;
}

body.sph-poe-product .product_meta .sku_wrapper {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--sph-poe-text-muted) !important;
  background: var(--sph-poe-bg) !important;
  border: 1px solid var(--sph-poe-line-soft) !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
}

body.sph-poe-product .product_meta .sku {
  color: var(--sph-poe-text-soft) !important;
  font-weight: 700 !important;
}

body.sph-poe-product .product_meta .posted_in {
  display: none !important;
}

/* 3. Thin brand-green accent bar on the Technical Specifications
   heading (PoE detail only; CRPS / Power Supply are unaffected). */
body.sph-poe-product .sph-poe-detail h2 {
  border-left: 3px solid var(--sph-poe-ui) !important;
  padding-left: 14px !important;
}

/* 4. Tighten the vertical gap between the Cloudflare Turnstile
   widget and the Request a Quote submit button. */
body.sph-poe-product .sph-inquiry-section .ff-el-group:has(.cf-turnstile) {
  margin-bottom: 10px !important;
}