/*
Theme Name: Foshan Changya Import & Export Co., Ltd.
Theme URI: https://changya-aluminum.com
Author: Changya Team
Author URI: https://changya-aluminum.com
Description: B2B-тема для Foshan Changya Import & Export Co., Ltd. (佛山市长亚进出口有限公司). Импорт/экспорт алюминиевых профилей. Поддержка CN/EN/RU.
Version: 1.0.0
Requires at least: 7.0
Tested up to: 7.2
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: huashengda
Domain Path: /languages
Tags: translation-ready, custom-colors, custom-logo, featured-images, rtl-language-support, threaded-comments

Foshan Changya Import & Export Co., Ltd. WordPress Theme
Copyright (C) 2008-2026 Foshan Changya Import & Export Co., Ltd.
*/

/* ========================================
   BASE
   ======================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }
body.modal-open { overflow: hidden; }

.font-cn { font-family: 'Noto Sans SC', system-ui, sans-serif; }

/* ========================================
   HERO BACKGROUND
   ======================================== */
.cn-hero-bg {
	background:
		linear-gradient(135deg, rgba(160,15,28,0.88) 0%, rgba(200,22,35,0.82) 40%, rgba(82,8,16,0.92) 100%),
		url('https://image.qwenlm.ai/public_source/8ab3dbef-28c7-4ee7-a7c4-15fbd3d23922/1ddb61add-2441-4aad-9091-b5166b6885c5.png') center/cover no-repeat;
		margin-top: 0;
}

/* ========================================
   RIBBON GRADIENT
   ======================================== */
.ribbon-gradient { background: linear-gradient(90deg, #f0b90b 0%, #ffd93d 50%, #f0b90b 100%); background-size: 200% 100%; animation: ribbonShine 3s linear infinite; }
@keyframes ribbonShine { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* ========================================
   RIBBON CORNER
   ======================================== */
.ribbon-corner {
	position: absolute; top: 12px; left: -8px; z-index: 10;
	padding: 4px 16px 4px 12px;
	font-size: 11px; font-weight: 700; color: #fff;
	background: linear-gradient(90deg, #c81623, #ff3b3b);
	box-shadow: 0 2px 8px rgba(200,22,35,0.4);
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}
.hot-tag { background: linear-gradient(90deg, #c81623, #ff3b3b, #c81623); background-size: 200% 100%; animation: hotShimmer 2s linear infinite; }
@keyframes hotShimmer { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* ========================================
   MARQUEE
   ======================================== */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-content { display: inline-block; animation: marquee 40s linear infinite; padding-left: 100%; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* ========================================
   PULSE DOT
   ======================================== */
.pulse-dot { animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.2)} }

/* ========================================
   CARD
   ======================================== */
.cn-card { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.cn-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(200,22,35,0.25); }

/* ========================================
   FADE UP
   ======================================== */
.fade-up { animation: fadeUp 0.6s ease-out both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ========================================
   REVEAL
   ======================================== */
.reveal { opacity:0; transform:translateY(30px); transition:all 0.8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ========================================
   CN PATTERN
   ======================================== */
.cn-pattern { background-image: repeating-linear-gradient(45deg, rgba(200,22,35,0.05) 0px, rgba(200,22,35,0.05) 2px, transparent 2px, transparent 12px); }

/* ========================================
   FILTER BUTTONS
   ======================================== */
.filter-btn.active { background-color: #c81623; color: white; border-color: #c81623; }

/* ========================================
   COUNTER
   ======================================== */
.counter { font-variant-numeric: tabular-nums; }

/* ========================================
   BUTTONS
   ======================================== */
.btn-cn {
	background: linear-gradient(135deg, #e4002b 0%, #c81623 100%);
	color: white;
	box-shadow: 0 10px 20px -5px rgba(228,0,43,0.5);
	transition: all 0.2s ease;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.btn-cn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 15px 30px -5px rgba(228,0,43,0.6); }
.btn-cn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-gold {
	background: linear-gradient(135deg, #f5d369 0%, #f0b90b 100%);
	color: #520810;
	box-shadow: 0 10px 20px -5px rgba(240,185,11,0.4);
	transition: all 0.2s ease;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.btn-gold:hover { transform: translateY(-2px); }

/* ========================================
   MOBILE MENU
   ======================================== */
.mobile-menu { transform: translateX(100%); transition: transform 0.3s ease; }
.mobile-menu.open { transform: translateX(0); }

/* ========================================
   CHAT BUBBLE
   ======================================== */
.chat-bubble { animation: chatBounce 3s ease-in-out infinite; }
@keyframes chatBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ========================================
   LANTERN
   ======================================== */
.lantern { display: inline-block; animation: lanternSwing 3s ease-in-out infinite; transform-origin: top center; }
@keyframes lanternSwing { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }

/* ========================================
   LANG BUTTON
   ======================================== */
.lang-btn.active { background: #c81623; color: white; }

/* ========================================
   DETAILS / SUMMARY
   ======================================== */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chevron { transform: rotate(180deg); }
.chevron { transition: transform 0.2s ease; }

/* ========================================
   SCROLLBAR
   ======================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #fff5f5; }
::-webkit-scrollbar-thumb { background: #c81623; border-radius: 5px; }

/* ========================================
   MODAL
   ======================================== */
.modal-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.7);
	backdrop-filter: blur(4px);
	z-index: 100;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.modal-content {
	background: white;
	border-radius: 20px;
	max-width: 720px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	transform: scale(0.92) translateY(20px);
	transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
	box-shadow: 0 40px 100px rgba(0,0,0,0.3);
	position: relative;
}
.modal-backdrop.open .modal-content { transform: scale(1) translateY(0); }

.modal-close {
	position: absolute; top: 16px; right: 16px;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: white;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	z-index: 10;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
}
.modal-close:hover { background: #fee2e2; transform: rotate(90deg); }

/* ========================================
   CHAT WIDGET
   ======================================== */
.chat-widget {
	position: fixed;
	right: 24px; bottom: 100px;
	width: 360px; max-width: calc(100vw - 48px);
	height: 520px; max-height: calc(100vh - 140px);
	background: white;
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(0,0,0,0.25);
	z-index: 90;
	transform: translateY(20px) scale(0.95);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
	overflow: hidden;
	display: flex; flex-direction: column;
}
.chat-widget.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

/* ========================================
   TYPING DOTS
   ======================================== */
.typing-dot { animation: typingBounce 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* ========================================
   FOCUS
   ======================================== */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 3px solid #f5d369; outline-offset: 2px;
}

/* ========================================
   SUCCESS ANIMATION
   ======================================== */
.success-anim { animation: successScale 0.5s ease-out both; }
@keyframes successScale { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ========================================
   TOAST
   ======================================== */
.toast {
	position: fixed; bottom: 24px; left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: #0f172a; color: white;
	padding: 12px 20px; border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	z-index: 200;
	opacity: 0;
	transition: all 0.3s ease;
	font-size: 14px; font-weight: 600;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ========================================
   BACK TO TOP
   ======================================== */
#backToTop {
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ========================================
   NAVIGATION MENU
   ======================================== */
/* Десктоп — ссылки внутри меню */
.flex.items-center.gap-7 a {
	color: #334155 !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	transition: color 0.15s ease !important;
	text-decoration: none !important;
}
.flex.items-center.gap-7 a:hover {
	color: #c81623 !important;
}
.flex.items-center.gap-7 li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

/* Мобильное меню */
#mobileMenu .space-y-1 a {
	display: block !important;
	padding: 12px 16px !important;
	border-radius: 8px !important;
	color: #334155 !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	border-left: 4px solid transparent !important;
	text-decoration: none !important;
}
#mobileMenu .space-y-1 a:hover {
	background-color: #fff5f5 !important;
	color: #c81623 !important;
	border-left-color: #c81623 !important;
}
#mobileMenu .space-y-1 li {
	list-style: none !important;
}

/* ========================================
   STICKY FOOTER
   ======================================== */
html {
	height: 100%;
}
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.flex-1,
body > main,
body > .wp-block-group {
	flex: 1;
}

/* ========================================
   ASPECT RATIOS
   ======================================== */
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-square { aspect-ratio: 1 / 1; }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
	.chat-widget {
		right: 8px;
		left: 8px;
		bottom: 80px;
		width: auto;
		max-width: none;
		height: 60vh;
	}
}

/* ========================================
   DESIGN IMPROVEMENTS - CHINESE PREMIUM
   ======================================== */

/* --- Selection --- */
::selection { background: rgba(200, 22, 35, 0.2); color: #520810; }

/* --- Hero Pattern Overlay --- */
.cn-hero-bg {
  position: relative;
}
.cn-hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.cn-hero-bg > * {
  position: relative;
  z-index: 1;
}

/* --- Hero Floating Badge --- */
.hero-float-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 6px 12px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 100px;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
  animation: floatBadge 3s ease-in-out infinite;
}
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* --- Buttons: Shine Effect --- */
.btn-cn, .btn-gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-cn::after, .btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.25) 48%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.25) 52%, transparent 65%);
  transform: translateX(-110%) rotate(5deg);
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  z-index: 1;
}
.btn-cn:hover::after, .btn-gold:hover::after {
  transform: translateX(110%) rotate(5deg);
}
.btn-cn:active, .btn-gold:active {
  transform: scale(0.97) !important;
}

/* --- Desktop Nav: Underline Indicator --- */
.flex.items-center.gap-7 a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #c81623, #ff3b3b);
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  transform: translateX(-50%);
  border-radius: 1px;
}
.flex.items-center.gap-7 a:hover::after {
  width: 100%;
}

/* --- Stats Cards: Premium --- */
.stat-card {
  position: relative;
  padding: 24px;
  border-radius: 16px;
  background: white;
  border: 1px solid #f1f5f9;
  transition: all 0.3s ease;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #c81623, #f5d369);
  border-radius: 4px 0 0 4px;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(200,22,35,0.15);
}
.stat-card .stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #c81623 0%, #e4582e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.stat-card .stat-label {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 8px;
  font-weight: 500;
}

/* --- Service Cards: Bento Style --- */
.service-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
  border: 1px solid #f1f5f9;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -12px rgba(200,22,35,0.2);
  border-color: #fed7aa;
}
.service-card.featured {
  background: linear-gradient(135deg, #fff5f5 0%, #fffbeb 100%);
  border-color: #fecaca;
}
.service-card.featured::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c81623, #f5d369);
}
.service-card .service-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, #fff5f5, #fffbeb);
  border: 1px solid #fecaca;
}
.service-card.featured .service-icon {
  background: linear-gradient(135deg, #c81623, #e4582e);
  color: white;
}

/* --- FAQ Accordion Premium --- */
.faq-item {
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq-item:hover { border-color: #fecaca; }
.faq-item[open] {
  border-color: #c81623;
  box-shadow: 0 8px 20px -8px rgba(200,22,35,0.15);
}

/* --- ESI Archive Card Hover --- */
.esi-archive-card {
  border-top: 3px solid transparent;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.esi-archive-card:hover {
  border-top-color: #c81623;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px -12px rgba(200,22,35,0.18) !important;
}

/* --- ESI Single Product Premium --- */
.esi-single-card {
  transition: box-shadow 0.3s ease;
}
.esi-single-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15) !important;
}

/* --- ESI Batch Card Hover --- */
.esi-batch-card {
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
  border-top: 2px solid transparent !important;
}
.esi-batch-card:hover {
  border-top-color: #c81623 !important;
  transform: translateY(-3px) !important;
}

/* --- ESI Sidebar Premium --- */
.esi-sidebar-title {
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
}
#esi-filter-apply {
  background: linear-gradient(135deg, #e4002b, #c81623) !important;
  border: none !important;
  color: white !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
#esi-filter-apply:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 16px -4px rgba(200,22,35,0.4) !important;
}
#esi-filter-reset {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
#esi-filter-reset:hover {
  background: #e2e8f0 !important;
  transform: translateY(-1px) !important;
}

/* --- Footer Premium --- */
.cn-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #c81623, #f5d369, #c81623);
  background-size: 200% 100%;
  animation: ribbonShine 3s linear infinite;
}

/* --- Footer Links --- */
.cn-footer a {
  color: #94a3b8;
  transition: all 0.2s ease;
  text-decoration: none;
}
.cn-footer a:hover {
  color: #f5d369;
}

/* --- Mobile Menu Premium --- */
.mobile-menu {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255,255,255,0.97) !important;
}

/* --- Contact Section Premium --- */
.contact-card {
  background: linear-gradient(135deg, #fff5f5 0%, #fffbeb 100%);
  border: 1px solid #fecaca;
  border-radius: 20px;
  transition: all 0.3s ease;
}
.contact-card:hover {
  border-color: #f5d369;
  box-shadow: 0 20px 40px -12px rgba(200,22,35,0.12);
}

/* --- Input Focus --- */
input:focus, textarea:focus, select:focus {
  border-color: #c81623 !important;
  box-shadow: 0 0 0 3px rgba(200,22,35,0.1) !important;
  outline: none !important;
}

/* --- Image Loading Placeholder --- */
.img-placeholder {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
/* shimmer keyframe is in header.php #hs-skeleton inline style */

/* --- Hero Stats Row (gold numbers) --- */
.hero-stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #f5d369, #ffd93d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-stat-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
  font-weight: 500;
}

/* --- Gold Badge Pulse (for HOT tags) --- */
.gold-badge {
  background: linear-gradient(135deg, #f5d369, #f0b90b);
  color: #520810;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 100px;
  display: inline-block;
  animation: goldPulse 2s ease-in-out infinite;
}
@keyframes goldPulse { 0%,100%{box-shadow:0 0 0 0 rgba(240,185,11,0.4)} 50%{box-shadow:0 0 0 8px rgba(240,185,11,0)} }

/* --- ESI Loader Premium --- */
.esi-loader {
  background: linear-gradient(90deg, #f1f5f9 25%, #fef2f2 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 12px;
}

/* === RESPONSIVE TWEAKS === */
@media (max-width: 640px) {
  .stat-card .stat-number { font-size: 2rem; }
  .hero-stat-number { font-size: 1.25rem; }
  .service-card.featured { grid-column: span 1 !important; }
}
@media (max-width: 768px) {
  .cn-hero-bg { min-height: auto !important; }
}

/* === Skeleton Loading === */
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:4px;position:relative;overflow:hidden}
.skeleton-text{height:1em;margin:.25em 0;border-radius:3px}
.skeleton-heading{height:1.5em;width:60%;margin-bottom:.5em}
.skeleton-image{aspect-ratio:4/3;border-radius:8px}
.skeleton-btn{height:2.5em;width:120px;border-radius:8px}
.skeleton-product-card{background:white;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.skeleton-product-card .skeleton-body{padding:16px;display:flex;flex-direction:column;gap:8px}
/* i18n skeleton — used via #hs-skeleton inline <style> in header.php */
/* Do NOT add @keyframes shimmer here — it's in header.php inline style */



/* Image loading: fade-in effect + placeholder bg */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}
img[loading="lazy"].loaded,
img[loading="lazy"].esi-img-loaded {
    opacity: 1;
}
.esi-archive-card-img {
    background-color: #f1f5f9;
    position: relative;
    overflow: hidden;
}
.esi-archive-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: esi-image-shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes esi-image-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.esi-archive-card-img img {
    position: relative;
    z-index: 1;
}
.esi-archive-card-img img.loaded,
.esi-archive-card-img img[src]:not([src=""]) {
    z-index: 2;
}
.esi-archive-card-img:has(img[src]:not([src=""]))::after {
    display: none;
}