/* ===== Category list page catalog.php dedicated styles (alias templates can override) ===== */

.cata-main { background: #fff; }

/* --- Hero banner --- */
.cata-hero {
  background: linear-gradient(120deg, #031d61 0%, #003391 70%, #0a4bc0 100%);
  color: #fff;
  padding: 64px 0 56px;
}
.cata-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.cata-crumb { font-size: 14px; color: #dfeaff; margin-bottom: 18px; }
.cata-crumb a { color: #dfeaff; text-decoration: none; transition: color .2s; }
.cata-crumb a:hover { color: #fff; }
.cata-crumb span { margin: 0 8px; opacity: .6; }
.cata-crumb em { font-style: normal; color: #fff; }
.cata-hero h1 {
  font-size: 40px; line-height: 1.25; margin: 0 0 14px; font-weight: 700; letter-spacing: -.5px;
}
.cata-hero .cata-desc {
  max-width: 860px; font-size: 16px; line-height: 1.8; color: #dfeaff; margin: 0;
}

/* --- Subcategory pill nav --- */
.cata-chips { padding: 28px 0 4px; border-bottom: 1px solid #e8f0ff; }
.cata-chips .cata-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.cata-chip {
  display: inline-block; padding: 8px 18px; border-radius: 999px;
  background: #e8f0ff; color: #003391; font-size: 14px; font-weight: 600;
  text-decoration: none; transition: all .2s;
}
.cata-chip:hover { background: #003391; color: #fff; }
.cata-chip.on { background: #003391; color: #fff; }

/* --- Product card grid --- */
.cata-listing { padding: 40px 0 64px; }
.cata-listing h2 {
  font-size: 28px; color: #031d61; margin: 0 0 24px; font-weight: 700;
}
.cata-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.cata-card {
  background: #fff; border: 1px solid #e4e9f2; border-radius: 12px;
  overflow: hidden; transition: box-shadow .25s, transform .25s, border-color .25s;
  display: flex; flex-direction: column;
}
.cata-card:hover {
  box-shadow: 0 14px 40px rgba(3, 29, 97, .14);
  transform: translateY(-4px); border-color: #b9cff5;
}
.cata-card-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #f4f7fd; }
.cata-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s;
}
.cata-card:hover .cata-card-img img { transform: scale(1.05); }
.cata-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.cata-card-body h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.4; }
.cata-card-body h3 a { color: #031d61; text-decoration: none; }
.cata-card-body h3 a:hover { color: #003391; }
.cata-card-body p {
  margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: #5b6472; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cata-card-more {
  font-size: 14px; font-weight: 600; color: #003391; text-decoration: none;
}
.cata-card-more:hover { text-decoration: underline; }

/* --- Empty category hint --- */
.cata-empty {
  padding: 56px 20px; text-align: center; color: #5b6472; font-size: 15px;
  background: #f6f9ff; border-radius: 12px;
}

/* --- Pagination --- */
.cata-pagebar { padding: 12px 0 8px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cata-pagebar a,
.cata-pagebar span {
  min-width: 40px; padding: 9px 14px; border-radius: 8px; text-align: center;
  font-size: 14px; font-weight: 600; text-decoration: none;
  background: #e8f0ff; color: #003391; transition: all .2s;
}
.cata-pagebar a:hover { background: #003391; color: #fff; }
.cata-pagebar .now,
.cata-pagebar span.now { background: #003391; color: #fff; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .cata-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cata-hero { padding: 44px 0 40px; }
  .cata-hero h1 { font-size: 28px; }
  .cata-grid { grid-template-columns: 1fr; gap: 20px; }
  .cata-listing { padding: 28px 0 48px; }
}

/* ===== catalog-fakra.php alias-template specific ===== */
.fk-hero { padding: 56px 0; }
.fk-hero-flex { display: flex; gap: 48px; align-items: center; }
.fk-hero-flex > div:first-child { flex: 1; }
.fk-hero-img { flex: 0 0 380px; }
.fk-hero-img img { width: 100%; border-radius: 14px; display: block; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.fk-specs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fk-spec {
  padding: 7px 16px; border-radius: 8px; background: rgba(223,234,255,.14);
  border: 1px solid rgba(223,234,255,.35); color: #dfeaff; font-size: 13px; font-weight: 600;
}
@media (max-width: 860px) {
  .fk-hero-flex { flex-direction: column; gap: 24px; }
  .fk-hero-img { flex: none; width: 100%; max-width: 420px; }
}

/* ===== Elementor carousel fallback without JS: hide arrows, lay out slides flat ===== */
.swiper-button-prev,
.swiper-button-next,
.elementor-swiper-button,
.elementor-image-carousel .swiper-button-prev,
.elementor-image-carousel .swiper-button-next {
  display: none !important;
}
.elementor-image-carousel .swiper-wrapper,
.elementor-loop-carousel .swiper-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px;
  justify-content: center;
}
.elementor-image-carousel .swiper-slide,
.elementor-loop-carousel .swiper-slide {
  width: auto !important;
  max-width: 100%;
  margin-right: 0 !important;
}

/* ===== brand image (image-carousel) infinite-scroll marquee =====
   覆盖上面的 flex-wrap:wrap 规则，让品牌图横向无缝滚动 */
.elementor-widget-image-carousel .elementor-image-carousel-wrapper {
  overflow: hidden !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.elementor-widget-image-carousel .elementor-image-carousel.swiper-wrapper {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  width: max-content !important;
  gap: 0 !important;
  /* Stepped scroll: 0.5s smooth move per step + 3s pause = 3.5s x 17 steps = 59.5s */
  animation: brand-marquee 59.5s ease infinite;
}
.elementor-widget-image-carousel .elementor-image-carousel.swiper-wrapper:hover {
  animation-play-state: paused;
}
.elementor-widget-image-carousel .swiper-slide {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-right: 48px !important;
  padding: 8px 0;
}
.elementor-widget-image-carousel .swiper-slide img.swiper-slide-image {
  max-height: 64px;
  width: auto;
  display: block;
  filter: grayscale(0.1);
  transition: filter .25s;
}
.elementor-widget-image-carousel .swiper-slide img.swiper-slide-image:hover {
  filter: grayscale(0);
}
@keyframes brand-marquee {
  0.000%  { transform: translate3d(-0.0000%, 0, 0); }
  0.840%  { transform: translate3d(-2.9412%, 0, 0); }
  5.882%  { transform: translate3d(-2.9412%, 0, 0); }
  6.723%  { transform: translate3d(-5.8824%, 0, 0); }
  11.765% { transform: translate3d(-5.8824%, 0, 0); }
  12.605% { transform: translate3d(-8.8235%, 0, 0); }
  17.647% { transform: translate3d(-8.8235%, 0, 0); }
  18.487% { transform: translate3d(-11.7647%, 0, 0); }
  23.529% { transform: translate3d(-11.7647%, 0, 0); }
  24.370% { transform: translate3d(-14.7059%, 0, 0); }
  29.412% { transform: translate3d(-14.7059%, 0, 0); }
  30.252% { transform: translate3d(-17.6471%, 0, 0); }
  35.294% { transform: translate3d(-17.6471%, 0, 0); }
  36.134% { transform: translate3d(-20.5882%, 0, 0); }
  41.176% { transform: translate3d(-20.5882%, 0, 0); }
  42.017% { transform: translate3d(-23.5294%, 0, 0); }
  47.059% { transform: translate3d(-23.5294%, 0, 0); }
  47.899% { transform: translate3d(-26.4706%, 0, 0); }
  52.941% { transform: translate3d(-26.4706%, 0, 0); }
  53.782% { transform: translate3d(-29.4118%, 0, 0); }
  58.824% { transform: translate3d(-29.4118%, 0, 0); }
  59.664% { transform: translate3d(-32.3529%, 0, 0); }
  64.706% { transform: translate3d(-32.3529%, 0, 0); }
  65.546% { transform: translate3d(-35.2941%, 0, 0); }
  70.588% { transform: translate3d(-35.2941%, 0, 0); }
  71.429% { transform: translate3d(-38.2353%, 0, 0); }
  76.471% { transform: translate3d(-38.2353%, 0, 0); }
  77.311% { transform: translate3d(-41.1765%, 0, 0); }
  82.353% { transform: translate3d(-41.1765%, 0, 0); }
  83.193% { transform: translate3d(-44.1176%, 0, 0); }
  88.235% { transform: translate3d(-44.1176%, 0, 0); }
  89.076% { transform: translate3d(-47.0588%, 0, 0); }
  94.118% { transform: translate3d(-47.0588%, 0, 0); }
  94.958% { transform: translate3d(-50.0000%, 0, 0); }
  100%    { transform: translate3d(-50%, 0, 0); }
}

/* --- Related Categories cards --- */
.cata-rec-title { font-size: 28px; color: #031d61; margin: 0 0 24px; font-weight: 700; }
.cata-rec-card { border-top: 3px solid #003391; }
.cata-rec-card:hover { border-top-color: #0a4bc0; }
.cata-rec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cata-rec-badge {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #003391, #0a4bc0);
  display: flex; align-items: center; justify-content: center;
}
.cata-rec-head h3 { margin: 0; font-size: 17px; line-height: 1.35; }
.cata-rec-head h3 a { color: #031d61; text-decoration: none; }
.cata-rec-head h3 a:hover { color: #003391; }

/* --- Team photo on About Us / Contact Us hero (unified across both pages) --- */
img.wp-image-3297 {
  max-width: 100% !important;
  max-height: 260px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 40px rgba(3, 29, 97, 0.15) !important;
  transition: transform .3s ease, box-shadow .3s ease;
}
img.wp-image-3297:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(3, 29, 97, 0.22) !important;
}

/* Center the Elementor image widget vertically within the hero column */
.elementor-widget-image:has(img.wp-image-3297) {
  align-self: center !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

@media (max-width: 767px) {
  img.wp-image-3297 {
    border-radius: 16px !important;
    max-width: 100% !important;
    height: auto !important;
  }
  .elementor-widget-image:has(img.wp-image-3297) {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}