/* =========================================================================
   Libafang Showcase — front-end styles
   Palette (referenced from approved layout): dark teal #1a1410,
   primary green #8a6420, gold accent #FFBA60, neutral greys.
   One stylesheet for the whole site (requirement 8: minimal CSS calls).
   ========================================================================= */

:root {
	--c-dark: #1a1410;
	--c-primary: #8a6420;
	--c-primary-deep: #6e4f18;
	--c-gold: #ffb656;
	--c-gold-deep: #f09a33;
	--c-text: #333;
	--c-muted: #666;
	--c-faint: #757575;
	--c-line: #e7e2d8;
	--c-bg-soft: #f7f4ee;
	--wrap: 1200px;
	--radius: 4px;
	--shadow: 0 6px 24px rgba(7, 49, 47, .08);
	--shadow-hover: 0 12px 30px rgba(7, 49, 47, .16);
	--font-head: "Century Gothic", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
	--font-body: Arial, Helvetica, "Microsoft YaHei", sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html { overflow-x: hidden; }
body {
	margin: 0;
	font: 15px/1.7 var(--font-body);
	color: var(--c-text);
	background: #fff;
	/* Hard-stop any horizontal overflow at the body level too: iOS/WeChat
	   webviews can still pan a page whose root has overflow-x hidden. `clip`
	   (unlike hidden) creates no scroll container, so sticky header keeps
	   working; unsupported browsers simply keep the html-level clip. */
	overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--c-primary-deep); }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--c-dark); line-height: 1.3; margin: 0 0 .5em; font-weight: 600; }
p { margin: 0 0 1em; }
ul { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

.wrapper { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.center { text-align: center; }
.screen-reader-text {
	position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px;
	clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; background: var(--c-dark);
	color: #fff; padding: 8px 16px; z-index: 999;
}
.skip-link:focus { left: 0; }

/* entry content (article bodies) */
.entry-content { font-size: 15.5px; color: #3a3a3a; }
.entry-content h2 { font-size: 24px; margin: 1.4em 0 .6em; }
.entry-content h3 { font-size: 19px; margin: 1.2em 0 .5em; }
.entry-content p { margin: 0 0 1.1em; }
.entry-content ul, .entry-content ol { padding-left: 1.4em; margin: 0 0 1.1em; list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content img { margin: 10px 0; border-radius: var(--radius); }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.entry-content table th, .entry-content table td { border: 1px solid var(--c-line); padding: 8px 12px; text-align: left; }
.entry-content blockquote {
	margin: 1em 0; padding: 10px 18px; border-left: 4px solid var(--c-primary);
	background: var(--c-bg-soft); color: var(--c-muted);
}

/* buttons */
.btn {
	display: inline-block; padding: 11px 26px; border: 0; border-radius: var(--radius);
	background: var(--c-primary); color: #fff; font: 600 14px/1 var(--font-body);
	letter-spacing: .04em; text-transform: uppercase; transition: background .2s, transform .15s, box-shadow .2s;
	position: relative; overflow: hidden;
}
.btn::after {
	content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
	transform: skewX(-18deg); transition: left .55s ease; pointer-events: none;
}
.btn:hover { background: var(--c-primary-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(138,100,32,.28); }
.btn:hover::after { left: 130%; }
.btn-gold { background: var(--c-gold); color: #4a3208; }
.btn-gold::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); }
.btn-gold:hover { background: var(--c-gold-deep); color: #3d2900; }
.btn-ghost { background: transparent; border: 1px solid var(--c-primary); color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary); color: #fff; }
.btn-lg { padding: 14px 34px; font-size: 15px; }

.more {
	display: inline-block; color: var(--c-primary); font: 600 13px/1 var(--font-body);
	letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid currentColor;
	padding-bottom: 4px; transition: color .2s, letter-spacing .25s;
}
.more:hover { color: var(--c-gold-deep); letter-spacing: .15em; }

/* section chrome */
.section { padding: 72px 0; }
.section-alt { background: var(--c-bg-soft); padding: 56px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; gap: 20px; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
.section-title h1, .section-title h2 { font-size: 30px; margin: 0; text-transform: uppercase; letter-spacing: .06em; position: relative; padding-bottom: 12px; }
.section-title h1 a, .section-title h2 a { color: inherit; }
.section-title h1 a:hover, .section-title h2 a:hover { color: var(--c-gold-deep); }
.section-title h1::after, .section-title h2::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px;
	background: var(--c-gold);
}
.section-head.center .section-title h1::after, .section-head.center .section-title h2::after { left: 50%; transform: translateX(-50%); }
.section-sub { color: var(--c-muted); max-width: 640px; margin-top: 8px; }

/* ---------- preloader (requirement 8) ---------- */
#preloader {
	position: fixed; inset: 0; z-index: 9999; background: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: opacity .45s ease, visibility .45s;
}
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; width: 180px; }
.preloader-mark {
	font: 700 34px/1 var(--font-head); color: var(--c-primary); letter-spacing: .18em; display: block;
}
.preloader-bar { height: 3px; background: #e7e2d8; margin-top: 18px; overflow: hidden; border-radius: 2px; }
.preloader-bar i {
	display: block; height: 100%; width: 40%; background: var(--c-primary);
	border-radius: 2px; animation: lbfLoad 1.1s ease-in-out infinite;
}
@keyframes lbfLoad {
	0% { transform: translateX(-120%); }
	100% { transform: translateX(360%); }
}

/* ---------- top bar ---------- */
.topbar { background: var(--c-dark); color: #e6dcc6; font-size: 12.5px; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; min-height: 34px; gap: 12px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
.topbar-slogan { color: #c2b190; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.topbar-tel, .topbar-mail { display: inline-flex; align-items: center; gap: 6px; }
.topbar-mail a, .topbar-tel { color: #e6dcc6; }
.topbar-mail a:hover { color: var(--c-gold); }
.topbar-tel svg, .topbar-mail svg { opacity: .7; }

/* language switcher — lives in the menu bar (navbox) */
.lang-switch { position: relative; align-self: center; }
.navbox .lang-switch { margin-left: 14px; }
.lang-current {
	display: inline-flex; align-items: center; gap: 7px; background: #f0e9da;
	border: 0; color: var(--c-primary-deep); border-radius: 999px;
	padding: 7px 13px; font: 600 13px/1 var(--font-body); letter-spacing: .04em; cursor: pointer;
	transition: background .2s, color .2s;
}
.lang-current:hover { background: #d9ebe6; color: var(--c-primary-deep); }
.lang-current::after { content: "▾"; font-size: 10px; opacity: .85; margin-left: 1px; }
/* Polylang base64 flags may carry an inline width that collapses; force real
   size. A plain inline-block flag with a fixed width renders reliably. */
.lang-current .lang-flag { display: flex; align-items: center; }
.lang-current .lang-flag img { width: 20px; height: 14px; display: block; border-radius: 2px; max-width: 20px; }
.lang-drop a .lang-flag-img, .lang-drop a img { width: 20px; height: 14px; display: block; border-radius: 2px; max-width: 20px; }
.lang-drop {
	position: absolute; right: 0; top: calc(100% + 8px); background: #fff;
	border: 1px solid var(--c-line); border-radius: 10px; min-width: 140px;
	box-shadow: var(--shadow-hover); z-index: 60; padding: 6px; overflow: hidden;
}
.lang-drop a {
	display: flex; align-items: center; gap: 9px; padding: 8px 12px; color: var(--c-text); font-size: 13px;
	border-radius: 6px;
}
.lang-drop a:hover { background: var(--c-bg-soft); color: var(--c-primary); }
.lang-drop img { width: 20px !important; height: 14px !important; border-radius: 2px; object-fit: contain; }

/* ---------- scroll progress bar ---------- */
.scroll-progress {
	position: fixed; top: 0; left: 0; z-index: 200; width: 0; height: 3px;
	background: linear-gradient(90deg, var(--c-gold), var(--c-gold-deep));
	box-shadow: 0 0 8px rgba(240,154,51,.5); pointer-events: none;
}

/* ---------- header / nav ---------- */
.header {
	position: sticky; top: 0; z-index: 100; background: #fff;
	box-shadow: 0 1px 0 rgba(26,20,16,.08); transition: box-shadow .28s, background .28s;
}
.header.is-scrolled {
	box-shadow: 0 8px 28px rgba(26,20,16,.12);
	background: rgba(255,255,255,.92);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.header-in {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	min-height: 76px; transition: min-height .28s;
}
.header.is-scrolled .header-in { min-height: 62px; }
.logo a { display: flex; align-items: center; }
.logo-img { max-height: 52px; width: auto; }
.logo-text { font: 700 24px/1.1 var(--font-head); color: var(--c-dark); letter-spacing: .02em; }
.logo-text b { color: var(--c-primary); margin-right: 2px; }

.navbox { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { position: relative; }
.nav > li > a {
	display: block; padding: 28px 10px; color: var(--c-dark);
	font: 600 13px/1 var(--font-body); letter-spacing: .02em; white-space: nowrap;
}
/* 8-item nav per spec (Project dropdown merges the three project categories):
   compact padding keeps logo + nav within the 1200px wrapper. */
.nav > li > a { padding: 28px 7px; font-size: 13px; letter-spacing: .02em; }
.header-in { gap: 24px; }
.nav > li.menu-item-has-children > a::after { content: " ▾"; font-size: 10px; color: var(--c-faint); }
.nav > li > a { position: relative; }
.nav > li:hover > a, .nav > li.current-menu-item > a, .nav > li.current-menu-ancestor > a { color: var(--c-primary); }
.nav ul.sub-menu {
	position: absolute; left: 50%; transform: translateX(-50%); top: 100%;
	background: #fff; min-width: 200px; border-top: 2px solid var(--c-primary);
	box-shadow: var(--shadow-hover); opacity: 0; visibility: hidden;
	transition: opacity .22s, transform .22s; padding: 6px 0; z-index: 50;
}
.nav li:hover > ul.sub-menu { opacity: 1; visibility: visible; }
.nav ul.sub-menu li a {
	display: block; padding: 10px 18px; color: var(--c-text); font-size: 13.5px; white-space: nowrap;
}
.nav ul.sub-menu li a:hover { color: var(--c-primary); background: var(--c-bg-soft); }
/* third level (Luxury Store Project ▸ perfume / bag / clothing): fly out to
   the right of the level-2 dropdown and cancel its centering transform */
.nav ul.sub-menu li { position: relative; }
.nav ul.sub-menu li.menu-item-has-children > a::after {
	content: " ▸"; float: right; margin-left: 14px; color: var(--c-faint); font-size: 11px;
}
.nav ul.sub-menu ul.sub-menu { left: 100%; top: -8px; transform: none; min-width: 210px; }
/* News ▸ showcase sub-categories: the News column sits near the right screen
   edge, so fly the third level out to the LEFT to stay inside the viewport. */
.nav ul.sub-menu li.opens-left > ul.sub-menu { left: auto; right: 100%; }

.navbtn { display: none; }

/* ---------- generic slider (vanilla) ---------- */
.lbf-slider { position: relative; overflow: hidden; }
.lbf-track { display: flex; transition: transform .55s cubic-bezier(.33,.9,.35,1); }
.lbf-slider:not([data-fade="1"]) .lbf-track { will-change: transform; }
.lbf-slide { flex: 0 0 auto; }
/* Slider arrows, one unified design for every carousel (banner + content):
   white disc + solid 2px deep-teal outline + soft shadow. The opaque 2px
   outline (not a translucent hairline) is what makes it findable on the white
   page; kept as an outline (no fill, no gold) so it guides without dominating.
   Over the banner photo the same white disc stays legible on light and dark
   imagery. Hover fills deep teal — a clear but brief state change. */
.lbf-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
	width: 46px; height: 46px; border: 2px solid var(--c-dark); border-radius: 50%;
	background: #fff; color: var(--c-dark); font-size: 26px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(7, 49, 47, .16);
	transition: background .2s, color .2s, box-shadow .2s;
	padding-bottom: 4px;
}
.lbf-arrow:hover {
	background: var(--c-dark); color: #fff;
	box-shadow: 0 6px 18px rgba(7, 49, 47, .26);
}
.lbf-prev { left: 18px; }
.lbf-next { right: 18px; }
.lbf-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; gap: 10px; z-index: 10; }
.lbf-dots button {
	width: 12px; height: 12px; border: 0; background: rgba(26,20,16,.45);
	transition: background .2s, transform .2s; padding: 0;
}
.lbf-dots button.is-active { background: var(--c-gold); transform: scale(1.18); }

/* ---------- banner ---------- */
.banner { background: var(--c-dark); }
.banner-slider { overflow: hidden; }
.banner-slider[data-fade="1"] { height: min(680px, 62vw); }
.banner-slider[data-fade="1"] .lbf-track { height: 100%; position: relative; }
.banner-slider[data-fade="1"] .lbf-slide {
	position: absolute; inset: 0; color: var(--c-dark); opacity: 0; visibility: hidden;
	transition: opacity 1s ease, visibility 1s;
}
.banner-slider[data-fade="1"] .lbf-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.banner-slider[data-fade="1"] .lbf-slide img {
	transform: scale(1.06); transform-origin: center bottom;
	transition: transform 6.5s ease-out;
}
.banner-slider[data-fade="1"] .lbf-slide.is-active img { transform: scale(1.13); }
.banner-slider img { width: 100%; height: 100%; object-fit: cover; }
.banner-slide-link { display: block; height: 100%; }
.banner-caption h2 { pointer-events: none; }
.banner-shade {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(26,20,16,.38) 0%, rgba(26,20,16,.05) 42%, rgba(26,20,16,.72) 100%);
}
.banner-caption {
	position: absolute; inset: auto 0 20%; z-index: 2; text-align: center; pointer-events: none;
}
.banner-caption h2 {
	color: #fff; font-size: 46px; line-height: 1.18; text-shadow: 0 2px 18px rgba(0,0,0,.5);
	letter-spacing: .02em; max-width: 860px; margin: 0 auto; padding: 0 20px;
	animation: lbfCaptionIn .85s ease both;
}
@keyframes lbfCaptionIn {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
.banner-count {
	position: absolute; right: 26px; bottom: 22px; z-index: 3; pointer-events: none;
	color: rgba(255,255,255,.8); font: 600 13px/1 var(--font-body); letter-spacing: .2em;
	display: flex; align-items: baseline; gap: 3px;
}
.banner-count b { color: var(--c-gold); font-size: 17px; }

/* ---------- projects carousel ---------- */
.section-projects { background: #fff; }
.proj-slider .lbf-slide { width: calc(50% - 14px); }
.proj-slider[data-per-view-s] .lbf-slide {}
.proj-card { display: block; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.proj-pic {
	display: block; padding-top: 66%; aspect-ratio: 3 / 2; background-color: #e9e2d4; background-size: cover;
	background-position: center; transition: transform .5s ease;
}
.proj-card:hover .proj-pic { transform: scale(1.05); }
.proj-txt {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 18px 14px;
	color: #fff; font-weight: 600; font-size: 16px; text-align: center;
	background: linear-gradient(transparent, rgba(26,20,16,.85));
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* slider-zone: arrows park in the page margin OUTSIDE the card area when the
   viewport has room, and slide back inside on narrower screens (min/max clamp
   keeps them from ever being clipped off-screen) */
.slider-zone { position: relative; }
.slider-zone .lbf-prev { left: max(-90px, min(18px, calc((var(--wrap) - 100vw) / 2 + 14px))); }
.slider-zone .lbf-next { right: max(-90px, min(18px, calc((var(--wrap) - 100vw) / 2 + 14px))); }

/* ---------- home products / news paged carousels ---------- */
.prod-slider .lbf-slide, .news-slider .lbf-slide { width: 100%; }

/* ---------- cards grid ---------- */
.cards-grid { display: grid; gap: 28px; }
.grid-product { grid-template-columns: repeat(3, 1fr); }
.grid-project { grid-template-columns: repeat(2, 1fr); }
.grid-post { grid-template-columns: repeat(3, 1fr); }
.card { background: #fff; height: 100%; }
.card > a { display: block; }
.card-pic {
	display: block; padding-top: 75%; aspect-ratio: 4 / 3; background-color: #f1ede4;
	background-size: cover; background-position: center; overflow: hidden; position: relative;
	border-radius: var(--radius); transition: box-shadow .35s, background-size .8s ease, transform .35s;
}
.card-pic::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(26,20,16,.35));
	opacity: 0; transition: opacity .35s;
}
.card:hover .card-pic { box-shadow: var(--shadow-hover); background-size: 118%; }
.card:hover .card-pic::after { opacity: 1; }
.card:hover .card-pic { transform: translateY(-4px); }
.card-pic, .card-title, .card-excerpt { transition: transform .35s, box-shadow .35s, color .25s; }
.card-title {
	font-size: 15.5px; margin: 12px 0 0; color: var(--c-text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.6em;
}
.card:hover .card-title { color: var(--c-primary); }
.card-post .card-body { padding: 4px 0 0; }
.card-date { color: var(--c-faint); font-size: 12.5px; display: block; margin-bottom: 4px; }
.card-excerpt { color: var(--c-muted); font-size: 13.5px; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* placeholder tile for thin / empty case categories (2026-09-16 占位卡) */
.card-placeholder { text-align: center; }
.card-placeholder .card-pic--ph {
	background: linear-gradient(180deg, #faf8f3, #f3eee2);
	border: 1.5px dashed #d9c493; display: flex; align-items: center; justify-content: center;
	color: var(--c-gold); padding-top: 0; aspect-ratio: 4 / 3;
}
.card-placeholder .card-pic--ph svg { width: 38px; height: 38px; }
.card-placeholder .card-title { color: var(--c-muted); }
.card-placeholder:hover .card-pic--ph { background-size: auto; transform: none; box-shadow: none; }
.card-placeholder .card-pic--ph::after { display: none; }
/* full-width archive cards get a touch more air (2026-09-16 栏目页改版) */
.archive-full .grid-project { gap: 34px; }

/* ---------- about ---------- */
.section-about { background: var(--c-bg-soft); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
/* min-width:0 cancels the automatic minimum of grid items — without it the
   about-pic's min-height+aspect-ratio transfers to a 427px min width and
   blows the single-column mobile layout out of the viewport. */
.about-grid > * { min-width: 0; }
.about-pic { width: 100%; min-height: 320px; background: #e9e2d4; border-radius: var(--radius); aspect-ratio: 4 / 3; overflow: hidden; }
/* width:100% matters: with width auto, aspect-ratio + min-height:320px
   *transfers* through the ratio and resolves the width to 427px on narrow
   screens (min-width alone cannot stop that). Explicit width pins the box to
   the grid column; min-height then only raises the box height. */
.about-pic img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; height: 100%; object-fit: cover; }
.about-pic-rect { display: block; min-height: 320px; }
.about-desc { color: var(--c-text); }
.section-about .section-title { margin-bottom: 18px; }

/* ---------- factory management ---------- */
.section-factory { background: #fff; }
.factory-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.factory-row:last-of-type { margin-bottom: 34px; }
.factory-row.is-flip .factory-pic { order: 2; }
.factory-pic { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: #e9e2d4; }
.factory-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .5s ease, box-shadow .35s; }
.factory-row:hover .factory-pic img { transform: scale(1.03); box-shadow: var(--shadow-hover); }
.factory-info h3 { font-size: 22px; }
.factory-info p { color: var(--c-muted); }

/* ---------- home news list ---------- */
.section-news { background: var(--c-bg-soft); }
.home-news li + li { border-top: 1px dashed var(--c-line); }
.home-news a {
	display: flex; align-items: center; gap: 12px; padding: 13px 6px; color: var(--c-text);
}
.home-news a:hover { background: #fff; }
.hn-dot { width: 7px; height: 7px; background: var(--c-primary); flex: none; transform: rotate(45deg); }
.hn-title {
	flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 14.5px;
}
.home-news a:hover .hn-title { color: var(--c-primary); }
.hn-date { color: var(--c-faint); font-size: 12.5px; flex: none; }

/* ---------- inquiry band ---------- */
.section-inquiry {
	background: linear-gradient(135deg, var(--c-dark) 0%, #3a2a15 55%, var(--c-primary-deep) 100%);
	color: #f0e9da; padding: 78px 0;
}
.inquiry-head { text-align: center; max-width: 760px; margin: 0 auto 36px; }
.inquiry-head h2 { color: #fff; font-size: 28px; }
.inquiry-head p { color: #d8cbb0; }
.inquiry-form { max-width: 860px; margin: 0 auto; }
.inq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.inq-field label { display: block; color: #e6dcc6; font-size: 12.5px; letter-spacing: .08em; margin-bottom: 6px; }
.inq-field label b { color: var(--c-gold); }
.inq-field input, .inq-field textarea {
	width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.25);
	border-radius: var(--radius); background: rgba(255,255,255,.97); color: var(--c-text);
	font: 14px/1.4 var(--font-body);
}
.inq-field input:focus, .inq-field textarea:focus { outline: 2px solid var(--c-gold); }
.inq-full { grid-column: 1 / -1; }
.inq-phone-row { display: flex; gap: 8px; }
.inq-cc-wrap { position: relative; flex: none; }
.inq-cc { width: 138px !important; flex: none; text-align: left; }
.inq-cc-list {
	position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
	width: 300px; max-width: min(330px, calc(100vw - 40px));
	max-height: 262px; overflow-y: auto; margin: 0; padding: 6px;
	list-style: none; background: #fff; border: 1px solid rgba(26,20,16,.14);
	border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.inq-cc-item {
	display: flex; align-items: baseline; gap: 10px; margin: 1px 0;
	padding: 7px 10px; border-radius: 6px; cursor: pointer;
	font: 14px/1.35 var(--font-body); color: var(--c-text);
}
.inq-cc-item b { color: var(--c-primary); font-weight: 700; min-width: 44px; flex: none; }
.inq-cc-item.is-active, .inq-cc-item:hover { background: #f6f0e3; }
.inq-cc-none { padding: 10px; color: #8a8a8a; font-size: 13.5px; }
.lbf-hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; opacity: 0; }
.inquiry-form .btn { display: block; margin: 26px auto 0; min-width: 240px; }
.inq-msg { margin-top: 14px; font-size: 14px; min-height: 22px; text-align: center; }
.inq-msg.is-ok { color: #b5d99c; }
.inq-msg.is-err { color: #ffd9c9; }
.form-loading { opacity: .6; pointer-events: none; }

/* contact page variant */
.contact-form-wrap .inquiry-form, .contact-form-wrap .inq-grid { max-width: none; }
.contact-form-wrap h2 { color: var(--c-dark); }
.contact-form-wrap .inq-field label { color: var(--c-muted); }
.section-inquiry .contact-form-wrap h2 { color: #fff; }
.section-inquiry .contact-form-wrap .inq-field label { color: #e6dcc6; }

/* ---------- inquiry modal (detail-page CTA popup, 2026-09-18) ---------- */
.lbf-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.lbf-modal[hidden] { display: none; }
.lbf-modal-overlay { position: absolute; inset: 0; background: rgba(6,28,26,.66); }
.lbf-modal-box {
	position: relative; width: 100%; max-width: 660px; max-height: calc(100vh - 48px);
	overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: #fff; border-radius: 14px; padding: 36px 36px 30px;
	box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.lbf-modal-x {
	position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
	border: 0; border-radius: 50%; background: none; cursor: pointer;
	font-size: 26px; line-height: 1; color: var(--c-muted);
}
.lbf-modal-x:hover { background: var(--c-bg-soft); color: var(--c-dark); }
.lbf-modal-title { margin: 0; color: var(--c-dark); font-size: 26px; text-align: center; }
.lbf-modal-title::after { content: ""; display: block; width: 46px; height: 3px; border-radius: 2px; background: var(--c-gold); margin: 12px auto 0; }
.lbf-modal-sub { margin: 12px 0 20px; text-align: center; color: var(--c-muted); font-size: 14px; }
/* the shared form is styled for the dark band — flip to white ground here */
.lbf-modal .inquiry-form, .lbf-modal .inq-grid { max-width: none; }
.lbf-modal .inq-field label { color: var(--c-muted); }
.lbf-modal .inq-field input, .lbf-modal .inq-field textarea { border-color: var(--c-line); }
.lbf-modal .inq-msg.is-ok { color: var(--c-primary); }
.lbf-modal .inq-msg.is-err { color: #b3401f; }
body.modal-open { overflow: hidden; }
@media (max-width: 640px) {
	.lbf-modal { padding: 12px; }
	.lbf-modal-box { padding: 30px 18px 22px; border-radius: 12px; max-height: calc(100vh - 24px); }
	.lbf-modal-title { font-size: 22px; }
}

/* ---------- page hero / breadcrumb ---------- */
/* One unified tall hero on every non-home page (2026-09-18 客户要求栏目大图
   统一并锁定尺寸,基准=案例栏目页): 460px desktop / 320px ≤1159px, cover photo
   behind a centered title + gold line. `--banner` stays as an alias class. */
.page-hero {
	background-color: var(--c-dark);
	background-position: center 45%;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: linear-gradient(rgba(26,20,16,.72), rgba(26,20,16,.6));
	color: #fff; text-align: center;
	height: 460px; display: flex; align-items: center; padding: 48px 0 44px;
}
.page-hero h1 {
	color: #fff; font-size: 42px; margin: 0; letter-spacing: .06em;
	text-shadow: 0 2px 18px rgba(0,0,0,.28);
}
.page-hero h1::after {
	content: ""; display: block; width: 56px; height: 3px; border-radius: 2px;
	background: var(--c-gold); margin: 18px auto 0;
}
.page-hero-sub { font-size: 15px; color: #f0e7d4; margin: 10px 0 0; }
/* 2026-09-21: the About-specific 68% crop anchor (added 2026-09-19 to reveal the
   factory-gate name wall) is gone with the gate photo itself — customer asked for
   a jewelry-store render hero matching the case/product pages, so About is back
   on the global center 45% like every other page. */
/* After-sales hero (2026-09-19 客户反馈第4条「售后服务的图片不行」): concept image
   lbf-after-sales-hero puts the technician at ~64% of the frame width — the mobile
   center crop otherwise pushes him off the right edge. Horizontal anchor only; the
   desktop 1280 box crops just ~19px horizontally so framing stays as-is. */
.page-template-page-templatespage-after-sales-php .page-hero { background-position: 64% 45%; }
.breadcrumb { background: #fff; border-bottom: 1px solid var(--c-line); font-size: 12.5px; }
.breadcrumb .wrapper { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb span[aria-current] { color: var(--c-primary); }
.breadcrumb .sep { color: #c9c9c9; }

/* ---------- archive layout ---------- */
.archive-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 40px; padding-top: 44px; padding-bottom: 64px; }
/* full-width variant, no sidebar (2026-09-16 栏目页改版) */
.archive-full { padding-top: 40px; padding-bottom: 64px; }
/* icon-style category bar (wddisplay-style, 2026-09-16) */
.catbar {
	background: #fff; border: 1px solid var(--c-line); border-radius: 6px;
	padding: 4px 6px; margin-bottom: 34px; box-shadow: 0 2px 10px rgba(26,20,16,.04);
}
.catbar ul { display: flex; flex-wrap: wrap; }
.catbar li { flex: 1 1 0; min-width: 150px; }
.catbar li + li { border-left: 1px solid #f2efe8; }
.catbar li a {
	display: flex; flex-direction: column; align-items: center; gap: 9px;
	padding: 18px 10px 15px; color: var(--c-text); font-size: 13px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .03em; text-align: center; position: relative;
}
.catbar li a:hover { color: var(--c-primary); }
.catbar .cat-ico { color: var(--c-primary); opacity: .8; }
.catbar .cat-ico svg { width: 30px; height: 30px; }
.catbar li.current-cat a { color: var(--c-dark); }
.catbar li.current-cat a::after {
	content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 7px;
	width: 34px; height: 3px; border-radius: 2px; background: var(--c-gold);
}
.catbar li.current-cat .cat-ico { color: var(--c-gold); opacity: 1; }
.subcat-nav { margin-bottom: 28px; border-bottom: 2px solid var(--c-dark); }
.subcat-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
.subcat-nav li a {
	display: block; padding: 10px 18px; color: var(--c-text); font-weight: 600; font-size: 13.5px;
	text-transform: uppercase; letter-spacing: .04em;
}
.subcat-nav li a:hover { color: var(--c-primary); }
.subcat-nav li.current-cat a { background: var(--c-dark); color: #fff; }
/* child project categories (perfume / bag / clothing under luxury store) */
.subcat-nav li.subcat-child a {
	padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--c-muted);
	border: 1px solid var(--c-line); border-radius: 3px; margin: 0 0 7px;
}
.subcat-nav li.subcat-child a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.subcat-nav li.subcat-child.current-cat a { border-color: var(--c-dark); }
/* child-category chips row (Luxury Shop context only; must follow .subcat-nav) */
.subcat-nav-children { border-bottom: 0; margin: -16px 0 28px; }
.pagination-wrap { margin-top: 38px; text-align: center; }
.pagination-wrap .nav-links { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
	padding: 0 10px; border: 1px solid var(--c-line); color: var(--c-muted); border-radius: 3px;
}
a.page-numbers:hover { border-color: var(--c-primary); color: var(--c-primary); }
.page-numbers.current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.empty-note { color: var(--c-muted); padding: 30px 0; }

/* sidebar */
.sidebar-box { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 20px; margin-bottom: 26px; background: #fff; }
.sidebar-title {
	font-size: 16px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--c-gold);
}
.side-list li + li { border-top: 1px solid #f0f0f0; }
.side-list a { display: flex; gap: 10px; padding: 9px 0; color: var(--c-text); align-items: center; }
.side-list a:hover .side-txt { color: var(--c-primary); }
.side-thumb {
	flex: none; width: 52px; height: 40px; background-color: #f1ede4; background-size: cover;
	background-position: center; border-radius: 3px;
}
.side-txt { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sidebar-cta { background: var(--c-dark); border: 0; color: #e6dcc6; text-align: center; }
.sidebar-cta h3 { color: #fff; font-size: 16px; }
.sidebar-cta p { font-size: 13px; }
.sidebar-cta .btn { margin-top: 6px; }

/* ---------- single product & project: banded detail layout ----------
   Vertical bands for clear separation: gallery on white → centered summary
   (title / meta / CTAs) closed by a full-width divider line → carded body
   copy on soft ground → alternating related grids (see .related-block). */
.sp-band-gallery { padding-top: 36px; }
.sp-band-gallery .sp-gallery { max-width: 960px; margin: 0 auto; }
.sp-main-pic {
	position: relative;
	border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px;
	background: #f4f6f5;
}
.sp-main-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Gallery prev/next reuses the unified .lbf-arrow disc, slightly smaller to
   match the narrower single-view gallery (vs full-width section sliders). */
.sp-main-pic .lbf-arrow { width: 40px; height: 40px; font-size: 22px; z-index: 5; }
.sp-thumbs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sp-thumb {
	padding: 0; border: 2px solid transparent; border-radius: 3px; overflow: hidden; background: none; line-height: 0;
}
.sp-thumb img { width: 84px; height: 63px; object-fit: cover; }
.sp-thumb.is-active, .sp-thumb:hover { border-color: var(--c-primary); }
.sp-title { font-size: 30px; line-height: 1.35; }
.sp-meta-line { display: flex; justify-content: center; gap: 22px; color: var(--c-muted); flex-wrap: wrap; }
.sp-meta-line b, .pj-meta b { color: var(--c-dark); }
.sp-excerpt { color: var(--c-muted); margin: 14px 0 0; }
.sp-head-band { padding: 34px 0 42px; border-bottom: 1px solid var(--c-line); text-align: center; }
.sp-head-band .sp-title { margin: 0 auto 12px; max-width: 900px; }
.pj-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; color: var(--c-muted); font-size: 13.5px; margin: 0 0 4px; }
.sp-head-band .sp-excerpt { max-width: 820px; margin: 12px auto 0; }
.sp-params { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 13.5px; }
.sp-params th {
	text-align: left; width: 130px; background: var(--c-bg-soft); color: var(--c-dark);
	padding: 9px 12px; border: 1px solid var(--c-line); font-weight: 600;
}
.sp-params td { padding: 9px 12px; border: 1px solid var(--c-line); }
.sp-head-band .sp-params { max-width: 720px; margin: 22px auto 4px; }
.sp-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0; }
.sp-actions-center { justify-content: center; margin: 26px 0 0; }
/* wddisplay-style pill CTAs (2026-09-18 客户参考旺典详情页按钮) */
.sp-actions .btn { border-radius: 999px; padding: 14px 42px; }
.sp-wa { display: flex; align-items: center; gap: 8px; color: var(--c-muted); }
.sp-wa svg { color: #25d366; }
.sp-wa-center { justify-content: center; margin: 14px 0 0; }

/* body band: article copy in a white card on soft ground */
.sp-body-band { background: var(--c-bg-soft); padding: 52px 0 58px; }
.sp-content-card {
	max-width: 960px; margin: 0 auto; background: #fff; border: 1px solid var(--c-line);
	border-radius: var(--radius); box-shadow: var(--shadow); padding: 42px 48px 34px;
}
.sp-content-card .entry-content h2 {
	font-size: 21px; margin: 1.5em 0 .7em; padding-bottom: 10px;
	border-bottom: 1px solid var(--c-line); position: relative;
}
.sp-content-card .entry-content h2::after {
	content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; background: var(--c-gold);
}
.sp-content-card .entry-content > h2:first-child { margin-top: 0; }
.sp-content-card .post-tags { border-top: 1px solid var(--c-line); margin: 30px 0 0; padding-top: 18px; }

/* ---------- design team page ---------- */
.section-dt-intro { background: #fff; }
.dt-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.dt-intro-txt .entry-content { font-size: 16px; }
.dt-intro-ctas { display: flex; align-items: center; gap: 26px; margin-top: 26px; flex-wrap: wrap; }
.dt-intro-pic { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: #e9e2d4; }
.dt-intro-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; list-style: none; margin: 0; padding: 0; }
.step-item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 28px 22px 24px; transition: box-shadow .35s, transform .35s; }
.step-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.step-num { display: block; font: 700 30px/1 var(--font-head); color: var(--c-gold); margin-bottom: 14px; }
.step-item p { margin: 0; color: var(--c-muted); font-size: 14.5px; }

.dt-stats { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--c-dark) 0%, #3a2a15 55%, var(--c-primary-deep) 100%); color: #fff; padding: 62px 0; }
.dt-stats::before {
	content: ""; position: absolute; right: -50px; top: -50px; width: 260px; height: 260px; pointer-events: none;
	background-image: radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.6px); background-size: 20px 20px;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-num { display: block; font: 700 44px/1 var(--font-head); color: var(--c-gold); margin-bottom: 10px; }
.stat-label { color: #e6dcc6; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

.section-dt-caps { background: #fff; }
.caps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cap-card {
	position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
	background: #e9e2d4; box-shadow: var(--shadow); transition: box-shadow .35s, transform .35s;
}
.cap-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cap-card:hover img { transform: scale(1.06); }
.cap-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,20,16,0) 42%, rgba(26,20,16,.88)); }
.cap-txt { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; color: #fff; font: 600 16px/1.35 var(--font-head); }
.cap-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.cap-card:hover .cap-txt { color: var(--c-gold); }

.dt-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.dt-cta-txt h2 { margin: 0 0 10px; font-size: 26px; }
.dt-cta-txt p { margin: 0; color: var(--c-muted); max-width: 640px; }
.dt-cta .btn { flex: none; }

/* ---------- about page ---------- */
.ab-badge {
	position: absolute; bottom: 18px; right: 18px; z-index: 2;
	display: flex; align-items: center; gap: 10px;
	background: rgba(255,255,255,.96); border: 1px solid var(--c-line); border-radius: 10px;
	padding: 8px 14px 8px 8px; box-shadow: var(--shadow); backdrop-filter: blur(4px);
}
.ab-badge img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }
.ab-badge b { font: 600 13px/1.3 var(--font-head); color: var(--c-dark); max-width: 150px; }

.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-card {
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column;
	transition: box-shadow .35s, transform .35s;
}
.ab-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.ab-card-pic { aspect-ratio: 16 / 10; overflow: hidden; background: #e9e2d4; }
.ab-card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ab-card:hover .ab-card-pic img { transform: scale(1.05); }
.ab-card-body { padding: 22px 22px 24px; }
.ab-card-body h3 { margin: 0 0 10px; font-size: 17px; }
.ab-card-body p { margin: 0; color: var(--c-muted); font-size: 14px; }

.section-ab-why { background: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-item {
	background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: 24px 20px; transition: box-shadow .35s, transform .35s;
}
.why-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.why-check {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--c-gold); color: #fff; margin-bottom: 14px;
}
.why-item p { margin: 0; color: var(--c-dark); font-size: 14.5px; line-height: 1.55; }

/* ---------- factory page ---------- */
.section-fac-intro { background: #fff; }
.fac-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 54px; align-items: center; }
.fac-intro-txt .entry-content { font-size: 16px; }
.fac-intro-pic { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: #e9e2d4; }
.fac-intro-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.fac-intro-tag {
	position: absolute; left: 14px; bottom: 14px; background: rgba(7, 49, 47, .88); color: #fff;
	font-size: 12.5px; font-weight: 600; letter-spacing: .03em; padding: 8px 14px; border-radius: 4px;
}
.fac-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fac-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .35s, transform .35s; }
.fac-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.fac-card-pic { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e2d4; }
.fac-card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fac-card:hover .fac-card-pic img { transform: scale(1.05); }
.fac-card-body { padding: 20px 22px 22px; }
.fac-card-body h3 { margin: 0 0 8px; font-size: 17px; }
.fac-card-body p { margin: 0; color: var(--c-muted); font-size: 14px; }
/* process strip: same 2-col card rhythm as the workshops grid */
.fac-proc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fac-proc { margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .35s, transform .35s; }
.fac-proc:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.fac-proc img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e9e2d4; transition: transform .5s ease; }
.fac-proc:hover img { transform: scale(1.05); }
.fac-proc figcaption { padding: 20px 22px 22px; }
.fac-proc figcaption h3 { margin: 0 0 8px; font-size: 17px; }
.fac-proc figcaption p { margin: 0; color: var(--c-muted); font-size: 14px; line-height: 1.55; }
.fac-visit { background: #fff; }

/* ---------- brand story page ---------- */
.section-bs-intro { background: #fff; }
.bs-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 54px; align-items: center; }
.bs-intro-txt .entry-content { font-size: 16px; }
.bs-intro-txt .entry-content p:last-child { margin-bottom: 0; }
.bs-intro-pic { position: relative; width: 100%; }
/* gold corner brackets echo the section-title accent, stay inside the 20px wrapper padding */
.bs-intro-pic::before, .bs-intro-pic::after { content: ""; position: absolute; z-index: 2; width: 104px; height: 104px; }
.bs-intro-pic::before { top: -12px; left: -12px; border-top: 3px solid var(--c-gold); border-left: 3px solid var(--c-gold); }
.bs-intro-pic::after { bottom: -12px; right: -12px; border-bottom: 3px solid var(--c-gold); border-right: 3px solid var(--c-gold); }
.bs-intro-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); background: #e9e2d4; }

.section-bs-story { background: var(--c-bg-soft); }
/* centre timeline: gold line through the row gap, numbered nodes on it */
.bs-wrap { position: relative; }
.bs-wrap::before {
	content: ""; position: absolute; left: 50%; top: 36px; bottom: 36px; width: 2px; margin-left: -1px;
	background: linear-gradient(180deg, rgba(255,182,86,0) 0%, var(--c-gold) 10%, var(--c-gold) 90%, rgba(255,182,86,0) 100%);
}
.bs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 54px; align-items: center; position: relative; }
.bs-row + .bs-row { margin-top: 68px; }
.bs-row.is-flip .bs-row-txt { order: 2; }
.bs-node {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--c-dark); border: 2px solid var(--c-gold); box-shadow: 0 0 0 6px var(--c-bg-soft);
	color: var(--c-gold); font: 700 15px/1 var(--font-head); letter-spacing: .05em;
}
.bs-row-txt h2 { font-size: 26px; margin: 0 0 12px; }
.bs-row-txt h2::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--c-gold); }
.bs-row-txt .entry-content { font-size: 15.5px; color: var(--c-muted); }
.bs-row-txt .entry-content p { margin: 0; }
.bs-row-pic { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: #e9e2d4; box-shadow: var(--shadow); }
.bs-row-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bs-row-pic::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,182,86,.65); border-radius: 2px; z-index: 2; pointer-events: none; }
.bs-row:hover .bs-row-pic img { transform: scale(1.04); }

/* shared decorative dot-grid texture on the intro sections (clipped by the section) */
.section-bs-intro, .section-cp-top, .section-as-intro { position: relative; overflow: hidden; }
.section-bs-intro::before, .section-cp-top::before, .section-as-intro::before {
	content: ""; position: absolute; width: 230px; height: 230px; pointer-events: none;
	background-image: radial-gradient(rgba(138,100,32,.16) 1.6px, transparent 1.6px); background-size: 20px 20px;
}
.section-bs-intro::before { left: -50px; top: 60px; }
.section-cp-top::before { left: -40px; bottom: -40px; }
.section-as-intro::before { left: -50px; top: 50px; }

/* shared gold icon badge on feature cards */
.ico-badge {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%; margin-bottom: 14px;
	background: var(--c-gold); color: #fff; box-shadow: 0 6px 14px rgba(240,154,51,.35);
}
.ico-badge svg { width: 22px; height: 22px; }

/* ---------- company profile page ---------- */
.section-cp-top { background: #fff; }
.cp-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 54px; align-items: stretch; }
.cp-lede { border-left: 4px solid var(--c-gold); padding: 6px 0 6px 26px; align-self: center; }
.cp-lede .entry-content { font-size: 17.5px; line-height: 1.85; color: var(--c-dark); }
.cp-lede .entry-content p:last-child { margin-bottom: 0; }
.cp-facts {
	background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-gold); border-radius: var(--radius);
	padding: 30px 30px 22px; box-shadow: var(--shadow);
}
.cp-facts h2 { font-size: 21px; margin: 0 0 18px; }
.cp-facts ul li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; }
.cp-facts ul li + li { border-top: 1px dashed var(--c-line); }
.cp-check {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%; margin-top: 2px;
	background: var(--c-gold); color: #fff;
}
.cp-facts ul li p { margin: 0; color: var(--c-text); font-size: 14.5px; line-height: 1.6; }

.section-cp-factory { background: #fff; }
/* factory & production as a dark feature panel: text left, photo right */
.cp-split {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 54px; align-items: center;
	background: linear-gradient(135deg, var(--c-dark) 0%, #3a2a15 55%, var(--c-primary-deep) 100%);
	border-radius: 8px; padding: 48px 52px; box-shadow: var(--shadow-hover);
}
.cp-split::before {
	content: ""; position: absolute; right: -40px; top: -40px; width: 240px; height: 240px; pointer-events: none;
	background-image: radial-gradient(rgba(255,182,86,.22) 1.6px, transparent 1.6px); background-size: 20px 20px;
}
.cp-split-txt { position: relative; }
.cp-split-txt h2 { font-size: 26px; margin: 0 0 14px; color: #fff; }
.cp-split-txt h2::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 14px; border-radius: 2px; background: var(--c-gold); }
.cp-split-txt .entry-content { color: #d8cbb0; }
.cp-split-txt .entry-content p { margin: 0; }
.cp-split-pic { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: #e9e2d4; box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.cp-split-pic img { width: 100%; height: 100%; object-fit: cover; }
.cp-split-pic::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 2px; z-index: 2; pointer-events: none; }

.section-cp-cards { background: #fff; }
.cp-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cp-card {
	background: var(--c-bg-soft); border: 1px solid var(--c-line); border-top: 3px solid var(--c-gold);
	border-radius: var(--radius); padding: 28px 28px 24px;
	transition: box-shadow .35s, transform .35s;
}
.cp-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.cp-card h2 { font-size: 20px; margin: 0 0 12px; }
.cp-card .entry-content { color: var(--c-muted); font-size: 14.5px; }
.cp-card .entry-content p { margin: 0; }

/* ---------- after-sales service page ---------- */
.section-as-intro { background: #fff; }
.as-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 54px; align-items: center; }
.as-intro-txt .entry-content { font-size: 17.5px; line-height: 1.85; color: var(--c-dark); }
.as-intro-txt .entry-content p:last-child { margin-bottom: 0; }
.as-intro-pic { position: relative; width: 100%; max-width: 480px; margin: 0 auto; }
/* soft offset block behind the portrait photo — its own motif, distinct from the brand-story brackets */
.as-intro-pic::before {
	content: ""; position: absolute; top: 20px; left: 20px; right: -16px; bottom: -16px;
	background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.as-intro-pic img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }

.section-as-pillars { background: var(--c-bg-soft); }
.as-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.as-pillar {
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
	padding: 28px 26px 24px; box-shadow: var(--shadow);
	transition: box-shadow .35s, transform .35s;
}
.as-pillar:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.as-pillar h2 { font-size: 20px; margin: 0 0 12px; }
.as-pillar .entry-content { color: var(--c-muted); font-size: 14.5px; }
.as-pillar .entry-content p { margin: 0; }

.section-as-reach { background: #fff; }
.as-reach {
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
	border: 2px solid var(--c-gold); border-radius: var(--radius); padding: 36px 40px;
	background: linear-gradient(135deg, #fff 55%, #fdf3e0 100%);
	position: relative; overflow: hidden;
}
.as-reach::after {
	content: ""; position: absolute; right: -30px; top: -30px; width: 210px; height: 210px; pointer-events: none;
	background-image: radial-gradient(rgba(240,154,51,.2) 1.6px, transparent 1.6px); background-size: 20px 20px;
}
.as-reach-txt { position: relative; }
.as-reach-txt h2 { font-size: 24px; margin: 0 0 16px; }
.as-reach-txt ul li { display: flex; align-items: flex-start; gap: 12px; padding: 6px 0; }
.as-reach-txt ul li p { margin: 0; color: var(--c-text); font-size: 14.5px; line-height: 1.6; }
.as-reach .btn { flex: none; }

/* images embedded in page/post content (brand story, company profile, after-sales) */
.lbf-figure { margin: 26px auto; text-align: center; }
.lbf-figure img { border-radius: var(--radius); box-shadow: var(--shadow); max-width: 100%; height: auto; margin: 0 auto; }
.lbf-figure.lbf-figure-portrait { max-width: 480px; }

/* project card chip */
.card-chip {
	position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(26,20,16,.85);
	color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
	padding: 5px 10px; border-radius: 3px; transition: background .3s, color .3s;
}
.card:hover .card-chip { background: var(--c-gold); color: #4a3208; }

/* archive CTA band */
.cta-band { background: linear-gradient(135deg, var(--c-dark) 0%, #3a2a15 55%, var(--c-primary-deep) 100%); color: #fff; padding: 48px 0; }
.cta-band-in { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta-band h2 { color: #fff; margin: 0 0 8px; font-size: 25px; }
.cta-band p { margin: 0; color: #d8cbb0; }

/* ---------- single post ---------- */
.single-post { padding: 46px 20px 30px; }
.article-body { max-width: 860px; margin: 0 auto; }
.post-tags { color: var(--c-muted); font-size: 13px; }
.post-tags a { background: var(--c-bg-soft); padding: 4px 10px; border-radius: 3px; color: var(--c-muted); display: inline-block; margin: 0 6px 6px 0; }
.post-tags a:hover { color: #fff; background: var(--c-primary); }
.post-nav { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--c-line); margin-top: 34px; padding-top: 18px; font-size: 13.5px; flex-wrap: wrap; }
.post-nav a { color: var(--c-muted); max-width: 46%; }
.post-nav a:hover { color: var(--c-primary); }

/* related: alternating bands, rule-style header (gold tick + label + line) */
.related-block { padding: 56px 0; background: #fff; }
.related-block.is-alt { background: var(--c-bg-soft); }
.related-block + .related-block { border-top: 1px solid var(--c-line); }
.related-block .section-title { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.related-block .section-title::before {
	content: ""; flex: none; width: 4px; height: 22px; border-radius: 2px; background: var(--c-gold);
}
.related-block .section-title::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.related-block .section-title h1, .related-block .section-title h2 { font-size: 22px; padding-bottom: 0; }
.related-block .section-title h1::after, .related-block .section-title h2::after { display: none; }
/* every related section carries exactly 3 cards (requirement 7): keep the
   project cards 3-per-row on desktop — base .grid-project is 2 and would
   wrap 2+1. Below 1160px the responsive rules stay in charge. */
@media (min-width: 1160px) {
	.related-block .grid-project { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- search results ---------- */
.search-list { max-width: 760px; }
.search-item { padding: 20px 4px; border-bottom: 1px solid var(--c-line); }
.search-item h3 { margin: 0 0 6px; font-size: 18px; }
.search-item h3 a { color: var(--c-dark); }
.search-item h3 a:hover { color: var(--c-primary); }
.search-item p { color: var(--c-muted); margin: 0 0 6px; }
.search-item small { color: var(--c-faint); text-transform: uppercase; letter-spacing: .06em; }
.search-form { display: flex; max-width: 460px; }
.search-input {
	flex: 1; padding: 11px 14px; border: 1px solid var(--c-line); border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius); font: 14px var(--font-body);
}
.search-input:focus { outline: 2px solid var(--c-primary); border-right: 0; }
.search-submit {
	border: 0; background: var(--c-primary); color: #fff; padding: 0 18px;
	border-radius: 0 var(--radius) var(--radius) 0; display: flex; align-items: center;
}
.search-submit:hover { background: var(--c-primary-deep); }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 56px 20px 70px; }
.nf-search { display: flex; justify-content: center; margin-bottom: 34px; }
.nf-links ul { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-bottom: 50px; }
.nf-links a { font-weight: 600; color: var(--c-dark); }
.nf-links a:hover { color: var(--c-primary); }
.notfound .cards-grid { text-align: left; }

/* ---------- contact page ---------- */
.contact-page { padding: 50px 20px 64px; }
.contact-grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 50px; }
.contact-list li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--c-line); }
.contact-list svg { color: var(--c-primary); flex: none; margin-top: 3px; }
.contact-list b { display: block; color: var(--c-dark); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.contact-list span { color: var(--c-muted); font-size: 14px; }
.contact-qr { display: flex; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.qr-card { margin: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 14px; text-align: center; flex: none; }
.qr-card img { display: block; width: 150px; height: 150px; border-radius: 6px; }
.qr-card figcaption { padding-top: 10px; }
.qr-card figcaption b { display: block; color: var(--c-dark); font-size: 13.5px; }
.qr-card figcaption span { color: var(--c-muted); font-size: 12px; }
.contact-form-wrap .inquiry-form { background: var(--c-bg-soft); padding: 28px; border-radius: var(--radius); }
.contact-form-wrap .inquiry-form .inq-field input,
.contact-form-wrap .inquiry-form .inq-field textarea { border-color: var(--c-line); }
.contact-map { margin-top: 44px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.contact-map iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ---------- links page / faq ---------- */
.links-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 30px; margin-top: 20px; }
.links-list a { color: var(--c-muted); }
.links-list a:hover { color: var(--c-primary); }
.page-faq { margin-top: 44px; }
.faq-title { font-size: 22px; }
.faq-item { border: 1px solid var(--c-line); border-radius: var(--radius); margin-bottom: 12px; background: #fff; }
.faq-item summary {
	padding: 15px 20px; font-weight: 600; cursor: pointer; list-style: none; position: relative; padding-right: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
	font-size: 20px; color: var(--c-primary); font-weight: 700;
}
.faq-item[open] summary::after { content: "–"; }
.faq-a { padding: 0 20px 16px; color: var(--c-muted); }

/* ---------- footer ---------- */
.footer { background: var(--c-dark); color: #cfc4ac; font-size: 13.5px; }
.footer-in { padding-top: 58px; }
.footer-cols { display: grid; grid-template-columns: 2fr 1.4fr 1.6fr 2.2fr; gap: 34px; }
.footer-col h3 {
	color: #fff; font-size: 15px; text-transform: uppercase; letter-spacing: .08em;
	margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--c-primary);
	display: inline-block;
}
.footer-menu li, .footer-terms li { margin-bottom: 9px; }
.footer-menu a, .footer-terms a { color: #cfc4ac; }
.footer-menu a:hover, .footer-terms a:hover { color: var(--c-gold); }
.footer-col h3 a { color: inherit; }
.footer-col h3 a:hover { color: var(--c-gold); }
.footer-contact p { display: flex; gap: 9px; margin: 0 0 11px; align-items: flex-start; }
.footer-contact svg { color: var(--c-gold); flex: none; margin-top: 2px; }
.footer-contact a { color: #cfc4ac; }
.footer-contact a:hover { color: var(--c-gold); }
.footer-links { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 24px; }
.footer-links h3 { color: #fff; font-size: 14px; margin: 0 0 12px; display: flex; justify-content: space-between; }
.more-links { color: var(--c-gold); font-size: 12px; }
.more-links:hover { color: #fff; }
.footer-links h3 .fl-title { color: #fff; }
.footer-links h3 .fl-title:hover { color: var(--c-gold); }
.footer-links ul { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer-links a { color: #a4947a; }
.footer-links a:hover { color: #fff; }
.copyright { border-top: 1px solid rgba(255,255,255,.1); margin-top: 30px; }
.copyright-in { display: flex; justify-content: space-between; align-items: center; min-height: 58px; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #7fa19a; }
.cr-sitemap { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.2); color: #cfc4ac; }
.cr-sitemap:hover { color: var(--c-gold); }
.ico-share { display: flex; gap: 8px; }
.ico-share a {
	width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
	display: flex; align-items: center; justify-content: center; color: #cfc4ac; font-size: 10px; font-weight: 700;
}
.ico-share a:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ---------- floating tools ---------- */
.float-tools { position: fixed; right: 18px; bottom: 96px; z-index: 90; display: flex; flex-direction: column; gap: 12px; }
.float-wa, .float-wx, .float-mail { position: relative; }
.float-mail { display: block; text-decoration: none; }
.float-wa-btn, .float-wx-btn, .float-mail-btn, .float-top {
	width: 46px; height: 46px; border-radius: 50%; border: 0; display: flex; align-items: center;
	justify-content: center; box-shadow: var(--shadow-hover); transition: transform .2s, background .2s;
}
.float-wa-btn { background: #25d366; color: #fff; }
.float-wx-btn { background: #07c160; color: #fff; }
.float-mail-btn { background: var(--c-primary); color: #fff; }
.float-wa-btn:hover, .float-wx-btn:hover, .float-mail:hover .float-mail-btn { transform: scale(1.08); color: #fff; }
/* hover pop: WhatsApp QR + number (2026-09-18 客户反馈悬停同时显示二维码和号码) */
/* 2026-09-28 客户反馈：加邮箱入口（悬停显示邮箱地址、点击 mailto 唤起邮件客户端）+ 微信入口
   （悬停显示二维码和电话号码，参考旺典悬浮栏；触屏无悬停，点微信按钮去联系页扫码）。 */
.float-wa-pop, .float-wx-pop, .float-mail-pop {
	position: absolute; right: 60px; bottom: -6px; width: 172px; padding: 14px 14px 11px;
	text-align: center; background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
	box-shadow: 0 16px 44px rgba(0,0,0,.28);
	opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
	transition: opacity .22s, transform .22s, visibility .22s;
}
.float-wa-pop::after, .float-wx-pop::after, .float-mail-pop::after {
	content: ""; position: absolute; right: -6px; bottom: 20px; width: 11px; height: 11px;
	background: #fff; border-top: 1px solid var(--c-line); border-right: 1px solid var(--c-line);
	transform: rotate(45deg);
}
.float-wa-qr, .float-wx-qr { display: block; width: 132px; height: 132px; margin: 0 auto 8px; border-radius: 6px; }
.float-wa-no, .float-wx-no { margin: 0; font: 700 15px/1.3 var(--font-head); color: var(--c-dark); white-space: nowrap; }
.float-wa-tip, .float-wx-tip { margin: 3px 0 0; font-size: 12px; color: var(--c-gold-deep); }
/* mail pop: single address line, click anywhere on it opens the mail client */
.float-mail-pop { display: block; width: auto; max-width: 320px; padding: 13px 18px; font: 700 15px/1.3 var(--font-head); color: var(--c-dark); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
	.float-wa:hover .float-wa-pop, .float-wa:focus-within .float-wa-pop,
	.float-wx:hover .float-wx-pop, .float-wx:focus-within .float-wx-pop,
	.float-mail:hover .float-mail-pop, .float-mail:focus-within .float-mail-pop { opacity: 1; visibility: visible; transform: translateY(0); }
}
.float-top { background: rgba(26,20,16,.8); color: #fff; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, background .2s; padding: 0; }
.float-top.is-show { opacity: 1; visibility: visible; }
.float-top:hover { background: var(--c-primary); }

/* ---------- mobile bottom nav (requirement 4.2) ---------- */
.bottom-nav { display: none; }

/* ---------- reveal animations ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
/* staggering children of a revealed grid reads much smoother than one block */
.reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .4s; }
body.no-anim .reveal, body.no-anim .reveal.in, body.no-anim .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
	.lbf-track { transition: none; }
}

/* ---------- a11y + fine scroll chrome ---------- */
:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 2px; }
.section { scroll-margin-top: 84px; }
@media (max-width: 860px) {
	.section { scroll-margin-top: 8px; }
}
@media (pointer: fine) {
	::-webkit-scrollbar { width: 11px; }
	::-webkit-scrollbar-track { background: #f1ede4; }
	::-webkit-scrollbar-thumb { background: #a8c6bd; border-radius: 6px; border: 2px solid #f1ede4; }
	::-webkit-scrollbar-thumb:hover { background: var(--c-primary); }
}
h2, h3 { text-wrap: balance; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) {
	.grid-post { grid-template-columns: repeat(2, 1fr); }
	.archive-layout { grid-template-columns: 1fr; }
	.sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.proj-slider .lbf-slide { width: calc(55% - 11px); }
	.footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* 11-item nav overflows below ~1160px, so collapse to the hamburger earlier. */
@media (max-width: 1159px) {
	/* header collapses to hamburger; nav moves to a full-screen slide-down panel.
	   The header is fixed (not sticky) on mobile: while the drawer is open the
	   body scroll-lock (overflow:hidden) turns body into a scroll container and
	   a sticky header stops tracking the viewport — the drawer was dragged up
	   with the page. Fixed positioning is immune to that scroll-lock. */
	.header { position: fixed; top: 0; left: 0; right: 0; }
	/* reserve the flow space the fixed header no longer occupies */
	body { padding-top: 76px; }
	/* the frosted-glass blur makes the header a containing block for fixed
	   descendants, which trapped the drawer inside the header's own box (it
	   followed page scroll). Solid white on mobile anchors the drawer to the
	   real viewport instead. */
	.header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
	.navbtn {
		display: flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 42px; height: 42px; background: none; border: 0; padding: 6px; z-index: 120;
	}
	.navbtn span { display: block; height: 2px; width: 100%; background: var(--c-dark); transition: transform .25s, opacity .25s; }
	.navbtn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.navbtn.is-open span:nth-child(2) { opacity: 0; }
	.navbtn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.navbox {
		position: fixed; inset: 0; background: #fff; padding: 84px 24px 40px;
		display: block; /* reset base flex row so panel fills full width (fix left blank) */
		transform: translateY(-102%); transition: transform .3s ease; z-index: 110;
		overflow-y: auto; overscroll-behavior: contain; /* swipe at panel edges never chains to the page behind */
	}
	.navbox.is-open { transform: translateY(0); }
	.navbox .nav { display: block; }
	.nav > li > a { padding: 14px 4px; border-bottom: 1px solid #f0f0f0; font-size: 15px; }
	.nav ul.sub-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 0 0 6px 16px; display: none; }
	.nav li.is-open > ul.sub-menu { display: block; }
	/* base rule keeps labels on one line for the desktop flyouts; in the drawer
	   a long nowrap label (e.g. "Projet boutique de luxe") widens the panel's
	   min-content to ~400px and clips inside the 342px content box. */
	.nav ul.sub-menu li a { white-space: normal; }
	.nav ul.sub-menu ul.sub-menu { padding: 0 0 6px 14px; }
	.nav ul.sub-menu li.menu-item-has-children > a::after { content: " ▸"; float: right; margin-left: 14px; font-size: 12px; }
	.nav > li.menu-item-has-children > a::after { content: ""; }
	.nav > li.menu-item-has-children > a { position: relative; }
	.nav > li.menu-item-has-children > a .sub-toggle { position: absolute; right: 0; top: 12px; width: 30px; height: 30px; }

	/* bottom fixed nav: 4 entries only (layout requirement) */
	body { padding-bottom: 62px; }
	.bottom-nav {
		display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0;
		background: #fff; box-shadow: 0 -3px 16px rgba(26,20,16,.14); z-index: 95;
	}
	.bottom-nav a {
		display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px;
		color: var(--c-muted); font-size: 11px; border-radius: 6px 6px 0 0;
	}
	.bottom-nav a:active, .bottom-nav a:hover { color: var(--c-primary); background: var(--c-bg-soft); }

	.banner-caption { bottom: 14%; }
	.banner-caption h2 { font-size: 24px; }
	.section { padding: 52px 0; }
	.section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.section-title h1, .section-title h2 { font-size: 24px; }
	.grid-product, .grid-post { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.grid-project { grid-template-columns: 1fr; }
	.proj-slider .lbf-slide { width: calc(78% - 9px); }
	/* home products carousel: the desktop page is 3x2 cards and lands ~1900px
	   tall on a phone — far beyond one screen. Keep the paged interaction but
	   shrink a page to 2x2 (cards 5-6 of each page hidden) so a full page fits
	   in view. Tablet (768-1159px) has the same problem at 2 cols x 3 rows. */
	.section-products .grid-product .card:nth-child(n+5) { display: none; }
	.section-products .card-title { font-size: 13.5px; }
	.about-grid { grid-template-columns: 1fr; gap: 26px; }
	.factory-row { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
	.factory-row.is-flip .factory-pic { order: 0; }
	.inq-grid { grid-template-columns: 1fr; }
	/* 16px+ inputs keep iOS Safari from auto-zooming the page on focus */
	.inq-field input, .inq-field textarea, .search-input { font-size: 16px; }
	.inq-cc { width: 112px !important; }
	.inq-cc-list { width: 262px; }
	.sp-band-gallery { padding-top: 22px; }
	.sp-head-band { padding: 24px 0 32px; }
	.sp-title { font-size: 24px; }
	.sp-body-band { padding: 34px 0 40px; }
	.sp-content-card { padding: 28px 24px 24px; }
	.sp-actions .btn { flex: 1; text-align: center; }
	.contact-grid { grid-template-columns: 1fr; gap: 30px; }
	.contact-map iframe { height: 300px; }
	.sidebar { grid-template-columns: 1fr; }
	.footer-cols { grid-template-columns: 1fr; gap: 26px; }
	/* language switcher: the desktop floating dropdown card looks lost inside a
	   full-screen drawer — show every language as a flat chip row instead
	   (one tap to switch, no second dropdown level) */
	.navbox .lang-switch { display: block; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid #f0f0f0; }
	.navbox .lang-current { display: none; }
	.navbox .lang-drop {
		display: flex !important; /* beats the UA [hidden] rule; always visible in the drawer */
		flex-wrap: wrap; gap: 8px; position: static; min-width: 0; padding: 0;
		border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
	}
	.navbox .lang-drop a {
		display: inline-flex; align-items: center; gap: 8px;
		padding: 8px 14px; border: 1px solid var(--c-line); border-radius: 999px;
		font-size: 13px; font-weight: 600; color: var(--c-text); background: #fff;
	}
	.navbox .lang-drop a:hover { background: var(--c-bg-soft); }
	/* highlight the language being viewed (html lang="en-US" vs a hreflang="en") */
	html[lang^="en"] .navbox .lang-drop a[hreflang="en"],
	html[lang^="de"] .navbox .lang-drop a[hreflang="de"],
	html[lang^="fr"] .navbox .lang-drop a[hreflang="fr"],
	html[lang^="it"] .navbox .lang-drop a[hreflang="it"] {
		border-color: var(--c-primary); color: var(--c-primary-deep); background: #f0e9da;
	}
	.topbar { display: none; }
	.float-tools { bottom: 76px; }
	/* unified hero shrinks on tablet/phone (locked 320px, 2026-09-18) */
	.page-hero { height: 320px; padding: 24px 0; }
	.page-hero h1 { font-size: 30px; }
	.page-hero h1::after { margin-top: 12px; }
	/* category icon bar: 2-up grid on tablet/phone (flex borders would misplace on wrap) */
	.catbar ul { display: grid; grid-template-columns: 1fr 1fr; }
	.catbar li { min-width: 0; }
	.catbar li + li { border-left: 0; }
	.catbar li a { padding: 14px 8px 12px; gap: 6px; }
	.catbar .cat-ico svg { width: 26px; height: 26px; }
	.catbar li.current-cat a::after { bottom: 5px; }
	.dt-intro { grid-template-columns: 1fr; gap: 26px; }
	.bs-intro { grid-template-columns: 1fr; gap: 26px; }
	.bs-intro-pic::before, .bs-intro-pic::after { width: 72px; height: 72px; }
	/* timeline collapses to a left rail */
	.bs-wrap::before { left: 10px; margin-left: -1px; top: 20px; bottom: 20px; }
	.bs-row { grid-template-columns: 1fr; gap: 26px; padding-left: 52px; }
	.bs-row.is-flip .bs-row-txt { order: 0; }
	.bs-node { left: 11px; transform: translate(-50%, -50%); width: 40px; height: 40px; font-size: 13px; }
	.bs-row + .bs-row { margin-top: 46px; }
	.cp-top, .cp-split { grid-template-columns: 1fr; gap: 26px; }
	.cp-lede { padding-left: 18px; }
	.cp-duo { grid-template-columns: 1fr; }
	.cp-split { padding: 32px 24px; }
	.as-intro { grid-template-columns: 1fr; gap: 34px; }
	.as-intro-pic::before { right: 12px; bottom: 12px; }
	.as-pillars { grid-template-columns: 1fr; }
	.as-reach { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
	.steps-grid, .stats-grid, .caps-grid, .ab-cards, .why-grid { grid-template-columns: repeat(2, 1fr); }
	.fac-intro { grid-template-columns: 1fr; gap: 30px; }
	.fac-grid { grid-template-columns: repeat(2, 1fr); }
	.fac-proc-grid { grid-template-columns: repeat(2, 1fr); }
	.dt-cta-in, .cta-band-in { flex-direction: column; text-align: center; }
	.dt-cta-txt p { margin: 0 auto; max-width: 640px; }
	.cta-band-in h2 { font-size: 21px; }
	.card-chip { top: 9px; left: 9px; }
	.links-list { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.grid-post { grid-template-columns: 1fr; }
	/* products stay 2-col on phones (single column would again exceed the screen) */
	.section-products .grid-product { grid-template-columns: repeat(2, 1fr); }
	.card-title { min-height: 0; }
	.steps-grid, .stats-grid, .caps-grid, .ab-cards, .why-grid { grid-template-columns: 1fr; }
	.fac-grid { grid-template-columns: 1fr; }
	.fac-proc-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.fac-proc figcaption { padding: 12px 14px 14px; }
	.fac-proc figcaption h3 { font-size: 14px; margin-bottom: 5px; }
	.fac-proc figcaption p { font-size: 12.5px; }
	.bs-row-txt h2 { font-size: 21px; }
	.bs-wrap::before { left: 8px; }
	.bs-row { padding-left: 44px; }
	.bs-node { left: 9px; width: 34px; height: 34px; font-size: 12px; }
	.bs-row + .bs-row { margin-top: 38px; }
	.cp-facts { padding: 22px 18px 14px; }
	.cp-lede .entry-content { font-size: 16px; }
	.cp-split-txt h2 { font-size: 21px; }
	.cp-card { padding: 22px 18px 20px; }
	.as-intro-txt .entry-content { font-size: 16px; }
	.as-intro-pic { max-width: 340px; }
	.as-pillar { padding: 22px 18px 20px; }
	.as-pillar h2 { font-size: 18px; }
	.as-reach .btn { display: block; width: 100%; text-align: center; }
	.qr-card img { width: 132px; height: 132px; }
	.stat-num { font-size: 34px; }
	.sp-title { font-size: 21px; }
	.sp-content-card { padding: 22px 16px 20px; }
	.sp-head-band .sp-params th { width: 104px; }
	.related-block .section-title h2 { font-size: 19px; }
	.dt-cta .btn, .cta-band .btn { display: block; width: 100%; }
	.banner-caption h2 { font-size: 19px; }
	.lbf-arrow { width: 36px; height: 36px; }
}

/* ---------- HTML sitemap page (page-templates/page-sitemap.php) ---------- */
.sm-page { padding: 40px 0 72px; }
.sm-top { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: flex-start; justify-content: space-between; padding-bottom: 26px; border-bottom: 1px solid var(--c-line); }
.sm-top .entry-content { flex: 1 1 480px; max-width: 780px; }
.sm-meta { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sm-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-lang { font-size: 13px; padding: 6px 14px; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-muted); background: #fff; transition: .2s; }
.sm-lang:hover { border-color: var(--c-gold); color: var(--c-gold-deep); }
.sm-lang.is-current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.sm-xml { display: inline-flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 600; color: var(--c-primary); border: 1px dashed var(--c-gold); border-radius: 8px; padding: 10px 16px; text-decoration: none; }
.sm-xml:hover { background: #fdf3e0; }
.sm-xml-hint { font-size: 12px; font-weight: 400; color: var(--c-muted); }
.sm-sec { margin-top: 46px; }
.sm-title { display: flex; align-items: center; gap: 14px; font-size: 22px; margin-bottom: 22px; color: var(--c-dark); }
.sm-title::before { content: ""; width: 5px; height: 22px; background: var(--c-gold); border-radius: 3px; }
.sm-title::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.sm-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 40px; }
.sm-pages > li { padding: 9px 0; border-bottom: 1px dashed var(--c-line); }
.sm-pages > li > a { font-weight: 600; color: var(--c-dark); }
.sm-pages > li > a:hover { color: var(--c-gold-deep); }
.sm-pages ul { margin-top: 6px; padding-left: 14px; border-left: 1px solid var(--c-line); }
.sm-pages ul li { padding: 3px 0; }
.sm-pages ul a { font-size: 14px; color: var(--c-muted); }
.sm-pages ul a:hover { color: var(--c-gold-deep); }
.sm-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; align-items: start; }
.sm-cat { min-width: 0; }
.sm-cat .sm-cat { margin-top: 18px; }
.sm-cat h3 { font-size: 16px; margin-bottom: 10px; color: var(--c-dark); }
.sm-cat h3 a { color: inherit; }
.sm-cat h3 a:hover { color: var(--c-gold-deep); }
.sm-count { font-size: 12px; font-weight: 400; color: var(--c-faint); }
.sm-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.sm-items a { display: block; position: relative; padding: 4px 0 4px 15px; font-size: 14px; line-height: 1.45; color: var(--c-muted); }
.sm-items a::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border: 1px solid var(--c-gold); transform: rotate(45deg); }
.sm-items a:hover { color: var(--c-gold-deep); }
.sm-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-tag { font-size: 13px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--c-line); color: var(--c-muted); background: var(--c-bg-soft); }
.sm-tag:hover { border-color: var(--c-gold); color: var(--c-gold-deep); background: #fff; }
@media (max-width: 1159px) {
	.sm-cats, .sm-pages { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.sm-top { flex-direction: column; }
	.sm-items { grid-template-columns: 1fr; }
	.sm-title { font-size: 19px; }
}

/* print: keep it plain */
@media print {
	.topbar, .header, .footer, .float-tools, .bottom-nav, .breadcrumb, #preloader { display: none !important; }
	body { padding: 0; }
}