/* [navigator] custom elements must be block-level */

/* Prevent layout shift: <navigator> custom elements must be block-level */
[data-component="navigator"] {
  display: block;
}

/**
 * skeleton.css — 骨架屏样式（三屏适配）
 *
 * JS 根据设备宽度动态生成不同骨架结构：
 *   Mobile  (＜768px):  badge + h2 + 1 desc + 1 CTA     + 1 card
 *   Tablet  (768-1279): badge + h1 + 2 desc + 2 CTAs     + 2 cards
 *   PC      (≥1280px):  badge + h1 + 2 desc + 2 CTAs     + 3 cards
 *
 * 间距与实际页面对齐（使用 --container-px 变量）：
 *   Mobile:  --container-px 12px, py-8 hero, gap-6
 *   Tablet:  --container-px 20px, py-10 hero, gap-8
 *   PC:      --container-px 40px, --nav-height CSS variable for navigator, py-10 hero
 */

/* ───────── 骨架层：文档流中 header 和 footer 之间，独立于 #spa-content ───────── */
#skeleton-overlay {
  position: absolute;
  top: var(--nav-height, 65px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--color-bg, #fff);
  opacity: 1;
  transition: opacity 350ms ease-out;
  pointer-events: none;
  overflow: hidden;
}
#skeleton-overlay[data-hidden] {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ───────── 容器 ───────── */
.skeleton-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  min-height: 50vh;
  padding: 0 var(--container-px, 0.75rem); /* mobile: aligned with section-content */
  animation: sk-fadeIn 0.15s ease-out;
}
.skeleton-container-inner {
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .skeleton-container {
    padding: 0 var(--container-px, 1.25rem);
  } /* tablet: aligned */
}
@media (min-width: 1024px) {
  .skeleton-container {
    padding: 0 var(--container-px, 1.25rem);
  } /* lg: aligned */
}
@media (min-width: 1024px) {
  #skeleton-overlay {
  }
}
@media (min-width: 1280px) {
  .skeleton-container {
    padding: 0 var(--container-px, 2.5rem);
  }
}

/* ───────── Hero 区域（居中，与实际 hero 一致）───────── */
.sk-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.5rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Badge（药丸标签） */
.sk-badge {
  width: 100px;
  height: 22px;
  border-radius: 9999px;
  margin-bottom: 16px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}

/* 标题行 */
.sk-hero .sk-line {
  width: 65%;
  height: 32px;
  border-radius: 8px;
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile h2 稍小 */
.sk-hero .sk-line--h2 {
  height: 26px;
}

/* 描述行 */
.sk-line--desc {
  width: 80%;
  height: 18px;
  margin-bottom: 8px;
  margin-left: auto;
  margin-right: auto;
}

.sk-line--short {
  width: 45%;
  margin-left: auto;
  margin-right: auto;
}

/* CTA 按钮组 */
.sk-cta-group {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.sk-cta {
  flex: 1 1 0;
  max-width: 160px;
  height: 44px;
  border-radius: 12px;
}

.sk-cta--outline {
  flex: 1 1 0;
  max-width: 140px;
  height: 44px;
}

/* ───────── 内容网格 ───────── */
.sk-grid {
  display: grid;
  gap: 16px;
  margin-top: 2rem;
}

.sk-card {
  height: 220px;
  border-radius: 16px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}

/* 通用线条 */
.sk-line {
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}

/* ───────── 响应式：Mobile ───────── */
@media (max-width: 767px) {
  .sk-hero {
    margin-bottom: 1rem;
  }
  .sk-badge {
    width: 80px;
    height: 18px;
  }
  .sk-hero .sk-line {
    width: 100%;
    max-width: 360px;
    height: 26px;
  }
  .sk-line--desc {
    height: 14px;
  }
  .sk-cta {
    width: 100%;
    max-width: none;
    height: 40px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
  }
  .sk-cta--outline {
    width: 100%;
    max-width: none;
    height: 40px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
  }
  .sk-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: none;
    gap: 10px;
  }
  .sk-grid {
    gap: 12px;
  }
  .sk-card {
    height: 180px;
    border-radius: 12px;
  }
}

/* ───────── 响应式：Tablet ───────── */
@media (min-width: 768px) and (max-width: 1279px) {
  .sk-hero .sk-line {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .sk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sk-card {
    height: 220px;
  }
}

/* ───────── 响应式：PC ───────── */
@media (min-width: 1280px) {
  /* PC: skeleton elements centered */
  .sk-hero .sk-line {
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
  }
  .sk-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sk-card {
    height: 240px;
  }
}

/* ───────── Animations ───────── */
@keyframes sk-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes sk-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ───────── Hero-grid: hero-large (home page) ───────── */
.sk-hero-large {
  min-height: 420px;
}
@media (min-width: 768px) {
  .sk-hero-large {
    min-height: 520px;
  }
}
@media (min-width: 1280px) {
  .sk-hero-large {
    min-height: 580px;
  }
}

/* ───────── Product grid skeleton ───────── */
.sk-filter-bar {
  height: 60px;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 1.5rem;
}
.sk-filter-chip {
  width: 90px;
  height: 34px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-filter-chip {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.sk-product-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .sk-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1280px) {
  .sk-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.sk-product-card {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f1f5f9;
}
.dark .sk-product-card {
  background: #0f172a;
  border-color: #1e293b;
}
.sk-product-img {
  width: 100%;
  aspect-ratio: 1/1;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-product-img {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.sk-product-text {
  height: 16px;
  width: 60%;
  margin: 12px auto 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-product-text {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* ───────── Content page skeleton ───────── */
.sk-page-title {
  width: 40%;
  height: 36px;
  border-radius: 8px;
  margin-bottom: 24px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-page-title {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.sk-paragraph {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.sk-paragraph-row {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-paragraph-row {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.sk-paragraph-row--short {
  width: 60%;
}
.sk-content-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-content-image {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* ───────── Form page skeleton ───────── */
.sk-form-row {
  margin-bottom: 16px;
}
.sk-form-label {
  width: 80px;
  height: 14px;
  border-radius: 4px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-form-label {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.sk-form-input {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-form-input {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.sk-form-textarea {
  width: 100%;
  height: 100px;
  border-radius: 10px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-form-textarea {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.sk-form-submit {
  width: 100%;
  max-width: 200px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-form-submit {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* ───────── PDP skeleton (left image + right text) ───────── */
.sk-pdp-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .sk-pdp-layout {
    flex-direction: column;
  }
}
.sk-pdp-image {
  flex: 0 0 360px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-pdp-image {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
@media (max-width: 767px) {
  .sk-pdp-image {
    flex: none;
    width: 100%;
  }
}
.sk-pdp-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sk-pdp-title {
  width: 70%;
  height: 28px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-pdp-title {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.sk-pdp-desc {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-pdp-desc {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}
.sk-pdp-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.sk-pdp-spec {
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.5s infinite;
}
.dark .sk-pdp-spec {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}

/* ─── Dark Mode overrides for all skeleton elements ─── */
.dark .sk-badge,
.dark .sk-line,
.dark .sk-cta,
.dark .sk-card,
.dark .sk-filter-chip,
.dark .sk-paragraph-row,
.dark .sk-form-label,
.dark .sk-form-input,
.dark .sk-form-textarea,
.dark .sk-form-submit {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
}