/* =====================================================================
 * Sizhuti custom additions
 * - Top-bar layout (social icons + language switcher + search)
 * - Product detail (inquiry form grid, related products)
 * - News sidebar category tree
 * - Search / tag / 404 page styling
 * - Home banner slide overlay
 * - Home stats icon-item effects
 * Loaded after style.css so it can override defaults.
 * ===================================================================== */

/* ---------- Top-bar layout ----------
 * .head-top .l-wrap is flex, DOM order: head-box -> head-contact (phone/email)
 * -> head-social -> head-lang. The phone/email stays on the LEFT (right after
 * the white notch); only the social icons are pushed to the RIGHT edge with
 * margin-left:auto, so social + language sit together on the right, language
 * switcher at the far right and social just to its left. */
.head-top .head-contact {
	margin-left: 0;
	margin-right: 22px;
}
.head-top .head-social {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	margin-right: 14px;
}
.head-top .head-social .social-item {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	transition: background .2s ease;
}
.head-top .head-social .social-item:hover { background: rgba(255, 255, 255, 0.28); }
.head-top .head-social .social-item i { color: #fff; }

/* ---------- Logo fallback (text) ----------
 * When no header_logo image is configured in WP admin, header.php falls back
 * to a <strong class="head-logo-text"> with the site title. Style it so it
 * reads like a real logo: orange accent on first character, bold uppercase. */
.head-main .head-logo-text {
	display: inline-block;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color, #f47920);
	letter-spacing: .5px;
	line-height: 1.1;
	white-space: nowrap;
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.head-main .head-logo:hover .head-logo-text { opacity: .85; }

/* ---------- Language switcher (TranslatePress v2) ----------
 * The source site renders a custom .lang switcher (flag + name + dropdown) on
 * the dark top bar. TranslatePress v2 outputs a switcher driven by CSS custom
 * properties (--text / --bg / --border etc.). Override those so it reads
 * white-on-transparent exactly like the source, and pin the dropdown to the
 * right edge so it never overflows the viewport. */
.head-top .head-lang {
	font-size: 14px;
	line-height: 1;
	margin-left: 0;
}
.head-top .head-lang .trp-shortcode-switcher__wrapper {
	--text: #ffffff;
	--text-hover: #ffffff;
	--bg: transparent;
	--bg-hover: rgba(255, 255, 255, 0.12);
	--border: none;
	--border-radius: 0;
	--flag-size: 18px;
}
/* The switcher's own .trp-shortcode-switcher clips with overflow:hidden, which
 * truncates "English" to "Engli…". Show the full label like the source. */
.head-top .head-lang .trp-shortcode-switcher {
	overflow: visible;
	white-space: nowrap;
}
.head-top .head-lang .trp-language-item-name,
.head-top .head-lang .trp-language-item-name:hover { color: #fff; }
.head-top .head-lang .trp-shortcode-arrow path { stroke: #fff; }
/* The flex item squeezes the label and TranslatePress adds text-overflow:ellipsis
 * to the name span, which truncates "English" to "Englis…". Let the current
 * language item size to its full content so the full label is visible. */
.head-top .head-lang .trp-shortcode-overlay .trp-current-language-item__wrapper,
.head-top .head-lang .trp-shortcode-overlay .trp-language-item { width: max-content; }
.head-top .head-lang .trp-shortcode-overlay .trp-current-language-item__wrapper .trp-language-item-name {
	overflow: visible !important;
	text-overflow: clip !important;
	max-width: none;
}
/* The interactive overlay is absolutely positioned at the wrapper origin; keep
 * it pinned to the right so the dropdown list stays on-screen. */
.head-top .head-lang .trp-shortcode-overlay {
	right: 0;
	left: auto;
	background: #111111;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.head-top .head-lang .trp-shortcode-overlay .trp-language-item { color: #fff; }
.head-top .head-lang .trp-shortcode-overlay .trp-language-item:hover { background: rgba(255, 255, 255, 0.12); }

/* ---------- Nav second-level (submenu) ----------
 * Match the reference site (zanall.5fa.cn/1081): submenu items are dark
 * (#000) with white text and turn orange (--color) on hover. */
.head-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #000;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	z-index: 99;
}
.head-nav li:hover > .sub-menu { display: block; }
.head-nav .sub-menu li { padding: 0; }
.head-nav .sub-menu a {
	padding: 10px 20px;
	display: block;
	color: #fff;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.head-nav .sub-menu a:hover {
	background: var(--color, #f47920);
	color: #fff;
}

/* Current-page highlight — match reference site's .inmenu_1 (orange). */
.head-nav>ul>li.current-menu-item > a,
.head-nav>ul>li.current_page_item > a,
.head-nav>ul>li.current-menu-ancestor > a {
	color: var(--color, #f47920);
}

/* ---------- Smooth anchor scrolling ---------- */
html { scroll-behavior: smooth; }

/* ---------- Sidebar product-category tree ----------
 * Accordion: sub-menus collapsed by default with a right-side icon-arr arrow;
 * clicking the arrow toggles .is-active. The base .sidebar-newcate li.LiLevel1
 * > a keeps its 50px grey bar; the arrow sits absolutely on top of it. */
.sidebar-cate .sidebar-newcate .sub-menu {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sidebar-cate .sidebar-newcate li.LiLevel1.is-active > .sub-menu,
.sidebar-cate .sidebar-newcate li.LiLevel1.open > .sub-menu { display: block; }
.sidebar-cate .sidebar-newcate .cat-arrow {
	position: absolute;
	right: 8px;
	top: 14px;
	width: 14px;
	font-size: 14px;
	color: #555;
	cursor: pointer;
	transition: transform .2s ease, color .2s ease;
	z-index: 2;
}
.sidebar-cate .sidebar-newcate li.LiLevel1.is-active > .cat-arrow,
.sidebar-cate .sidebar-newcate li.LiLevel1.open > .cat-arrow {
	transform: rotate(90deg);
	color: var(--color, #e60012);
}

/* ---------- Sidebar news tree (children-first, siblings fallback) ---------- */
.sidebar-cate .sidebar-newcate li.LiLevel2.is-active > a {
	color: var(--color, #f47920);
	font-weight: 600;
}

/* ---------- Product detail: inquiry form (CF7) ----------
 * The contact fields live in .inq-grid > p (product-name + 4 contact fields,
 * laid out as a 2-column grid with product-name spanning full width). The
 * message textarea and the submit button sit OUTSIDE .inq-grid, so they get
 * their own rules under .pro-inquiry. The theme's global `input{border:0}`
 * strips all input chrome, so we must re-add height / padding / border here
 * or the fields collapse to bare text. */
.pro-inquiry .inq-grid > p {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin: 0 0 15px;
}
.pro-inquiry .inq-grid > p > .wpcf7-form-control-wrap:first-of-type { grid-column: 1 / -1; }
.pro-inquiry .inq-grid input[type="text"],
.pro-inquiry .inq-grid input[type="email"],
.pro-inquiry .inq-grid input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: #fff;
	color: #333;
}
.pro-inquiry .inq-grid input:focus { border-color: var(--color, #f47920); outline: none; }
/* Message textarea + submit button live outside .inq-grid. */
.pro-inquiry textarea {
	width: 100%;
	box-sizing: border-box;
	height: 120px;
	resize: vertical;
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: #fff;
	color: #333;
	font-family: inherit;
	line-height: 1.5;
}
.pro-inquiry textarea:focus { border-color: var(--color, #f47920); outline: none; }
.pro-inquiry input[type="submit"] {
	display: inline-block;
	height: 44px;
	padding: 0 32px;
	border: 1px solid var(--color, #f47920);
	background: var(--color, #f47920);
	color: #fff;
	font-size: 14px;
	border-radius: 4px;
	cursor: pointer;
	text-transform: uppercase;
	margin-top: 15px;
	transition: background .2s ease, color .2s ease;
}
.pro-inquiry input[type="submit"]:hover { background: #fff; color: var(--color, #f47920); }
@media (max-width: 600px) {
	.pro-inquiry .inq-grid > p { grid-template-columns: 1fr; }
}

/* ---------- Product detail: related products ----------
 * The markup reuses the theme's product-list card structure (.pro-item >
 * .pro-img > .img-wrap > img, plus .pro-info > .pro-name + .pro-more) but is
 * wrapped in .pro-random instead of .pro-list, so the theme's #product .pro-list
 * rules never apply. Mirror that styling here so the cards render correctly
 * (square image box, bordered card, hover, name + view-more bar). */
.pro-detail .pro-random ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pro-detail .pro-random .pro-item {
	display: block;               /* list-item won't stretch in a grid; force it */
	width: 100%;
	min-width: 0;                 /* let the card fill its grid cell */
	box-sizing: border-box;
	padding: 15px;
	border: 1px solid #eee;
	transition: border .3s ease;
}
.pro-detail .pro-random .pro-item:hover { border-color: var(--color, #f47920); }
.pro-detail .pro-random .pro-img {
	position: relative;
	padding-top: 100%;            /* square image box */
	overflow: hidden;
}
.pro-detail .pro-random .img-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.pro-detail .pro-random .pro-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.pro-detail .pro-random .pro-item:hover img { transform: scale(1.05); }
.pro-detail .pro-random .pro-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 10px 0;
	text-align: center;
	color: var(--fontcolor, #333);
	font-size: var(--fontsize18, 16px);
	line-height: 1.4;
}
.pro-detail .pro-random .pro-name:hover { color: var(--color, #f47920); }
.pro-detail .pro-random .pro-more {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: var(--fontcolor, #333);
	font-size: var(--fontsize14, 14px);
	background: #f2f2f2;
	text-transform: lowercase;
	transition: color .3s ease, background .3s ease;
}
.pro-detail .pro-random .pro-more:hover { color: #fff; background: var(--color, #f47920); }
@media (max-width: 768px) {
	.pro-detail .pro-random ul { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- CF7 forms (global) ----------
 * The theme's global `input{border:0;outline:0}` strips all input chrome, so
 * any Contact Form 7 form that isn't otherwise styled (e.g. the contact page
 * inquiry form, or any future CF7 form) collapses to bare 18px-tall text.
 * Re-add height / padding / border for every .wpcf7-form so all site forms
 * render consistently. Intentionally NOT scoped to .pro-inquiry, so the contact
 * page and other CF7 forms are covered too. Where .pro-inquiry adds a 2-column
 * grid, these field styles still apply (they only set size/appearance, not the
 * grid layout), so the product-detail form is unaffected. */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background: #fff;
	color: #333;
	font-family: inherit;
}
.wpcf7-form textarea { height: 120px; resize: vertical; line-height: 1.5; }
.wpcf7-form input:focus,
.wpcf7-form textarea:focus { border-color: var(--color, #f47920); outline: none; }
.wpcf7-form input[type="submit"] {
	display: inline-block;
	height: 44px;
	padding: 0 32px;
	border: 1px solid var(--color, #f47920);
	background: var(--color, #f47920);
	color: #fff;
	font-size: 14px;
	border-radius: 4px;
	cursor: pointer;
	text-transform: uppercase;
	transition: background .2s ease, color .2s ease;
}
.wpcf7-form input[type="submit"]:hover { background: #fff; color: var(--color, #f47920); }
/* Spacing between stacked CF7 fields (contact page form). */
.wpcf7-form p { margin: 0 0 15px; }

/* ---------- Contact page form (match reference single/contact) ----------
 * The reference contact form uses a 2-column grid of light-gray (#F6F6F6)
 * fields (50px tall) with a full-width textarea and a dark (#111) submit
 * button that turns orange on hover. The CF7 form is already structured as
 * .zan-cf7-grid > .zan-cf7-col (one field per column) + a textarea <p> + a
 * .zan-cf7-btns submit wrapper, so we just render it that way here. Scoped to
 * .contact-inquiry so the product-detail (.pro-inquiry) and sidebar forms are
 * untouched. */
.contact-inquiry .zan-cf7-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px 20px;
}
.contact-inquiry .zan-cf7-col { min-width: 0; }
.contact-inquiry .zan-cf7-grid input[type="text"],
.contact-inquiry .zan-cf7-grid input[type="email"],
.contact-inquiry .zan-cf7-grid input[type="tel"],
.contact-inquiry .zan-cf7-grid input[type="url"] {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	box-sizing: border-box;
	background: #F6F6F6;
	border: 1px solid #F6F6F6;
	border-radius: 0;
	font-size: 14px;
	color: #333;
	outline: none;
}
.contact-inquiry .zan-cf7-grid input:focus { border-color: var(--color, #f47920); }
.contact-inquiry .wpcf7-form textarea {
	width: 100%;
	height: 200px;
	padding: 14px;
	box-sizing: border-box;
	background: #F6F6F6;
	border: 1px solid #F6F6F6;
	border-radius: 0;
	resize: vertical;
	font-size: 14px;
	color: #333;
	line-height: 1.6;
	outline: none;
}
.contact-inquiry .wpcf7-form textarea:focus { border-color: var(--color, #f47920); }
.contact-inquiry .zan-cf7-btns { margin-top: 20px; }
.contact-inquiry .zan-cf7-btns input[type="submit"] {
	min-width: 180px;
	height: 50px;
	padding: 0 30px;
	background: #111;
	border: 1px solid #111;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .5px;
	cursor: pointer;
	border-radius: 0;
	transition: background .25s ease, border-color .25s ease;
}
.contact-inquiry .zan-cf7-btns input[type="submit"]:hover {
	background: var(--color, #f47920);
	border-color: var(--color, #f47920);
}
@media (max-width: 600px) {
	.contact-inquiry .zan-cf7-grid { grid-template-columns: 1fr; }
}

/* ---------- Header search box reveal ----------
 * Clicking .head-search-btn (desktop) or .head-icon (narrower viewports)
 * toggles .head-search.active. Reveal the box on that state. The `.active`
 * rule also forces .head-search visible on viewports where the media query
 * hides it, so the icon fallback can open the search. */
.head-search.active .search-box { display: block; }
.head-search.active { display: block; }

/* ---------- Prev / Next post navigation (product & article detail) ---------- */
.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 30px 0 6px;
	padding: 18px 0;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
}
.post-nav a { display: block; text-decoration: none; }
.post-nav-prev { text-align: left; max-width: 48%; }
.post-nav-next { text-align: right; max-width: 48%; margin-left: auto; }
.post-nav-label { display: block; font-size: 12px; color: #999; margin-bottom: 4px; }
.post-nav-title { font-size: 15px; color: #333; font-weight: 600; line-height: 1.4; }
.post-nav a:hover .post-nav-title { color: var(--color, #f47920); }
.post-nav-empty { color: #bbb; font-size: 14px; }
@media (max-width: 600px) {
	.post-nav { flex-direction: column; gap: 12px; }
	.post-nav-prev, .post-nav-next { max-width: 100%; text-align: left; margin-left: 0; }
}

/* ---------- Product detail: specifications box ----------
 * Backend "Specifications" textarea (one "Label: value" per line) rendered as
 * a simple key/value table under the description. */
.pro-spec { margin-top: 26px; }
.pro-spec-title { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 12px; }
.pro-spec table { width: 100%; border-collapse: collapse; }
.pro-spec td { padding: 10px 14px; border: 1px solid #eee; font-size: 14px; vertical-align: top; }
.pro-spec td.spec-key { width: 170px; background: #fafafa; color: #666; font-weight: 600; }

/* ---------- News single (new-tags bar) ---------- */
.new-tags a {
	display: inline-block;
	padding: 4px 12px;
	margin: 0 6px 6px 0;
	border: 1px solid #ddd;
	border-radius: 14px;
	font-size: 13px;
	color: #555;
	transition: all .2s ease;
}
.new-tags a:hover {
	border-color: var(--color, #e60012);
	color: var(--color, #e60012);
}

/* ---------- Home banner: slide content overlay ----------
 * Per-slide editable title/subtitle/two buttons sit absolutely on top of the
 * image. Two orange buttons match the reference: outline "Read More" + filled
 * "Contact Us". Swiper clones the first/last slide for its loop; the clones get
 * .swiper-slide-duplicate. We do NOT hard-hide the duplicate overlay: in loop
 * mode the duplicate can become the .swiper-slide-active slide (e.g. when
 * looping from the last slide back to the first), and hard-hiding it would make
 * the banner text/buttons vanish at those moments. Instead we rely only on the
 * active/non-active rules below — only the active slide shows its overlay. With
 * slidesPerView:1 only one slide is in the viewport at a time, so a real slide
 * and its clone are never visible together (no duplication). Note: no
 * opacity/transform animation on the overlay itself — swiper's own slide
 * transition handles the fade, and a self-animated overlay caused a 0.5-1s
 * ghost overlap on first paint. */
#home-swiper .swiper-slide { position: relative; overflow: hidden; }
#home-swiper .swiper-slide:not(.swiper-slide-active) .slide-content { visibility: hidden; }
#home-swiper .swiper-slide-active .slide-content { display: block; visibility: visible; }
#home-swiper .slide-content {
	position: absolute;
	left: 14%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	color: #fff;
	max-width: 560px;
	text-align: left;
	pointer-events: auto;
}
/* Subtitle: small light text + accent bar. */
#home-swiper .slide-subtitle {
	display: inline-block;
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 18px;
	opacity: .9;
	letter-spacing: .3px;
}
#home-swiper .slide-subtitle::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--color, #f47920);
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 3px;
}
/* Title: bold uppercase with subtle text-shadow for legibility on busy bg. */
#home-swiper .slide-title {
	font-size: 44px;
	line-height: 1.18;
	font-weight: 700;
	margin: 0 0 30px;
	text-transform: uppercase;
	letter-spacing: .3px;
	white-space: pre-line;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
#home-swiper .slide-btns { display: flex; gap: 12px; flex-wrap: wrap; }
#home-swiper .slide-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	font-size: 14px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .5px;
	border: 2px solid var(--color, #f47920);
	border-radius: 30px;
	color: #fff;
	background: var(--color, #f47920);
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(244, 121, 32, .25);
	transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#home-swiper .slide-btn.outline {
	background: transparent;
	color: var(--color, #f47920);
	box-shadow: none;
}
#home-swiper .slide-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(244, 121, 32, .35);
	color: #fff;
}
#home-swiper .slide-btn.outline:hover {
	background: var(--color, #f47920);
	color: #fff;
}
@media (max-width: 768px) {
	#home-swiper .slide-content { left: 10%; max-width: 86%; }
	#home-swiper .slide-title { font-size: 28px; margin-bottom: 18px; }
	#home-swiper .slide-subtitle { font-size: 13px; margin-bottom: 8px; }
	#home-swiper .slide-btn { padding: 10px 22px; font-size: 12px; }
}

/* ---------- Home stats: icon-item background + hover effects ----------
 * The 4 stat cards under "Reasons for choosing" each get a soft gradient
 * background and subtle hover lift. The icon number also rises on hover. */
#ind .adv-icon li {
	position: relative;
	transition: transform .35s ease;
}
#ind .adv-icon .icon-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 20px;
	background: linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%);
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
#ind .adv-icon .icon-item::before {
	content: "";
	position: absolute;
	left: -40%;
	top: -40%;
	width: 80%;
	height: 80%;
	background: radial-gradient(circle, rgba(244, 121, 32, 0.10) 0%, rgba(244, 121, 32, 0) 70%);
	transition: transform .5s ease, opacity .5s ease;
	opacity: 0;
	pointer-events: none;
}
#ind .adv-icon li:hover { transform: translateY(-4px); }
#ind .adv-icon li:hover .icon-item {
	border-color: rgba(244, 121, 32, 0.4);
	box-shadow: 0 14px 30px rgba(244, 121, 32, 0.18);
}
#ind .adv-icon li:hover .icon-item::before {
	transform: scale(1.6);
	opacity: 1;
}
#ind .adv-icon .icon-img {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#ind .adv-icon .num {
	font-size: 26px;
	font-weight: 700;
	color: var(--color, #f47920);
	line-height: 1.1;
	transition: transform .35s ease, letter-spacing .35s ease;
}
#ind .adv-icon li:hover .num { transform: translateX(2px); letter-spacing: .5px; }
#ind .adv-icon .text { font-size: 14px; color: #555; line-height: 1.4; margin-top: 4px; }

/* ---------- Search results + tag results grid ---------- */
.search-result-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.search-result-list .search-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .25s ease, transform .25s ease;
}
.search-result-list .search-card:hover {
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}
.search-result-list .search-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f5f5f5;
}
.search-result-list .search-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.search-result-list .search-card:hover .search-thumb img { transform: scale(1.04); }
.search-result-list .search-body { padding: 18px 18px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.search-result-list .search-type {
	display: inline-block;
	align-self: flex-start;
	font-size: 12px;
	padding: 3px 10px;
	background: var(--color, #f47920);
	color: #fff;
	border-radius: 12px;
	line-height: 1.4;
}
.search-result-list .search-title {
	font-size: 16px;
	line-height: 1.4;
	color: #222;
	margin: 4px 0 0;
	font-weight: 600;
}
.search-result-list .search-title a { color: inherit; text-decoration: none; }
.search-result-list .search-title a:hover { color: var(--color, #f47920); }
.search-result-list .search-meta { font-size: 12px; color: #999; }
.search-result-list .search-excerpt { font-size: 13px; color: #666; line-height: 1.6; margin: 0; }
.search-result-list .search-more {
	margin-top: auto;
	font-size: 13px;
	color: var(--color, #f47920);
	text-decoration: none;
	align-self: flex-start;
}
.search-result-list .search-more:hover { text-decoration: underline; }

.search-empty {
	text-align: center;
	padding: 60px 20px;
	color: #888;
	font-size: 14px;
}
.search-empty .search-empty-title {
	font-size: 22px;
	color: #333;
	margin: 0 0 12px;
	font-weight: 600;
}
.search-empty .search-empty-tip { margin: 0 0 20px; }
.search-empty .search-empty-form { max-width: 420px; margin: 0 auto; display: flex; gap: 8px; }
.search-empty .search-empty-form input[type="search"] {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
}
.search-empty .search-empty-form button {
	padding: 10px 22px;
	background: var(--color, #f47920);
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}

/* ---------- 404 page ---------- */
.error-404 {
	max-width: 720px;
	margin: 60px auto 100px;
	padding: 0 20px;
	text-align: center;
	color: #333;
}
.error-404 .error-illustration {
	width: 220px;
	height: 220px;
	margin: 0 auto 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(244, 121, 32, 0.10) 0%, rgba(244, 121, 32, 0.02) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 88px;
	font-weight: 700;
	color: var(--color, #f47920);
	letter-spacing: -2px;
}
.error-404 .error-title { font-size: 28px; margin: 0 0 14px; color: #222; }
.error-404 .error-desc { font-size: 15px; color: #666; margin: 0 auto 28px; max-width: 520px; line-height: 1.7; }
.error-404 .error-search {
	display: flex;
	max-width: 420px;
	margin: 0 auto 28px;
	gap: 8px;
}
.error-404 .error-search input[type="search"] {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
}
.error-404 .error-search button {
	padding: 11px 22px;
	background: var(--color, #f47920);
	color: #fff;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}
.error-404 .error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.error-404 .error-actions .more-btn { min-width: 140px; text-align: center; }

/* =========================================================================
   Mobile pass (2026-07-30): taller banners, full-width search drop-down,
   mobile language switcher, full-width About intro.
   ========================================================================= */

/* Mobile language switcher is only shown on phones (sits left of search). */
.head-lang-m { display: none; }

/* About intro: the top intro is plain full-width editor content (not a field).
 * Override the default #about .about-con { width:50%; padding-left:100px } so
 * the intro spans the full content width on every breakpoint. */
#about.about-noimg .about-con {
	width: 100%;
	padding-left: 0;
}

/* About bottom parts (image+text rows): match the original site's zebra
 * layout — odd items render text-left/image-right (default flex row),
 * even items get flex-direction:row-reverse so the image sits on the LEFT
 * and the text on the RIGHT. Scoped to >=769px so the existing mobile
 * stacking (column / column-reverse at max-width:768px) still applies. */
@media screen and (min-width: 769px) {
	.about-part .part-item:nth-of-type(2n) {
		flex-direction: row-reverse;
	}
}

/* Pagination fix: root style.css rule `.common-page .mypages .page-numbers`
 * matches BOTH the <ul> container and the <a>/<span> items (they all share
 * that class), so the <ul> itself renders as a bordered button-like box
 * AND each item shows nested borders (the legacy `.mypages li` border
 * around the new a/span border). Strip the button styling from the <ul>
 * container and the <li> wrappers; keep it on the real link/span items
 * only. */
.common-page .mypages ul.page-numbers,
.common-page .mypages ul.page-numbers li {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	height: auto;
	line-height: normal;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 0;
	float: none;
	font-size: 14px;
}
/* Re-scope the red hover to links/spans only. Without this, hovering
 * anywhere on the <ul.page-numbers> container also matches
 * `.page-numbers:hover` from root style.css and the whole row turns
 * red (the bug from the user's "hover still messed up" screenshot). */
.common-page .mypages a.page-numbers:hover,
.common-page .mypages span.page-numbers:hover {
	background: #e60012;
	border-color: #e60012;
	color: #fff;
}
.common-page .mypages ul.page-numbers:hover,
.common-page .mypages ul.page-numbers li:hover {
	background: transparent;
	border: 0;
	color: inherit;
}

@media screen and (max-width: 768px) {
	/* Taller home hero banner so the title + 2 buttons are not cut off. */
	#home-swiper .swiper-slide img {
		height: 260px;
		object-fit: cover;
	}
	/* Taller inner banner (e.g. About) so its title is not cramped. */
	.inner-banner .banner-img.pagesbanner {
		height: 170px;
	}
	.inner-banner .banner-img.pagesbanner img {
		height: 100%;
		object-fit: cover;
	}

	/* About intro full-width (image/video removed). */
	#about.about-noimg .about-con {
		width: 100%;
		padding-left: 0;
	}

	/* Mobile search: tapping the search icon opens a full-width bar on the
	   next line below the fixed header instead of crowding the menu icon. */
	.head-search {
		display: none;
		position: absolute;
		top: 55px;
		left: 0;
		right: 0;
		background: #fff;
		z-index: 998;
		box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
		padding: 10px 12px;
	}
	.head-search.active {
		display: block;
	}
	.head-search .head-search-btn {
		display: none;
	}
	.head-search .search-form {
		width: 100%;
	}
	.head-search .search-box {
		display: block;
		position: static;
		width: 100%;
		background: #fff;
	}
	.head-search .search-wrap {
		display: flex;
		position: static;
		padding: 0;
		box-shadow: none;
	}
	.head-search .search-wrap input {
		flex: 1;
		width: auto;
		height: 42px;
		border: 1px solid #eee;
		text-indent: 10px;
		font-size: 14px;
	}
	.head-search .search-btn {
		position: static;
		width: 46px;
		background: var(--color, #f47920);
		border: 0;
	}
	.head-search .search-btn i {
		color: #fff;
	}

	/* Mobile language switcher: sits to the LEFT of the search icon. */
	.head-lang-m {
		display: flex;
		align-items: center;
		position: absolute;
		right: 104px;
		top: 55%;
		transform: translateY(-50%);
		z-index: 2;
		font-size: 14px;
		color: var(--fontcolor, #333);
	}
	.head-lang-m .trp-language-switcher {
		font-size: 13px;
	}
	.head-lang-m a {
		color: var(--fontcolor, #333);
		text-decoration: none;
	}

	/* Mobile bottom bar: keep it visible at all times (not only after
	   scrolling) so the reserved footer gap is filled and the menu shows. */
	.bottom-btn {
		bottom: 0;
		opacity: 1;
	}
}

/* ---------- Button / text contrast clarity ----------
 * The brand --color was darkened to #d13b00 in style.css for WCAG AA contrast
 * with white text. Add font-weight to primary buttons so the label reads
 * clearly, and tighten a few small orange text-on-white spots (date badges,
 * section labels) for better legibility. */
.feedback-btn,
.foot-feedback .feedback-btn,
.contact-bar .cb-btn,
.btn,
.more-btn,
.read-more,
.view-more {
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.foot-feedback .feedback-btn:hover,
.contact-bar .cb-btn:hover,
.btn:hover,
.more-btn:hover,
.read-more:hover,
.view-more:hover {
	filter: brightness(0.92);
}

/* Footer subscription result message */
.foot-feedback .sub-msg {
	margin-bottom: 12px;
	padding: 8px 10px;
	border-radius: 2px;
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
}
.foot-feedback .sub-msg.ok {
	background: #1f7a3a;
}
.foot-feedback .sub-msg.err {
	background: #b3261e;
}

/* Floating "Back to top" button (desktop). Raise above page content; the
   mobile bottom dock keeps its own button, and this one is hidden on mobile
   via the existing @media (max-width:768px) .top-btn { display:none!important }. */
#szt-top-btn {
	z-index: 999;
}
#szt-top-btn:hover {
	background: var(--color);
	border-color: var(--color);
}
#szt-top-btn:hover i {
	color: #fff;
}