.breadcrumb { display:flex; align-items:center; gap:10px; padding:28px 0; color:var(--color-muted); font-size:.86rem; }
.breadcrumb a { color:var(--color-primary); font-weight:800; }

.collection-hero { position:relative; isolation:isolate; display:grid; min-height:650px; align-items:center; overflow:hidden; padding:84px 0; background:#333333; color:#fff; }
.collection-hero__backdrop { position:absolute; z-index:-2; inset:0; background:url('../../../images/product-collection/bathroom-vanities/bathroom-vanities-supplier-foshan.jpg') center / cover no-repeat; }
.collection-hero::after { position:absolute; z-index:-1; inset:0; content:''; background:linear-gradient(90deg,rgba(35,32,28,.94) 0%,rgba(51,51,51,.86) 42%,rgba(51,51,51,.60) 67%,rgba(51,51,51,.82) 100%); }
.collection-hero__grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(330px,.72fr); gap:clamp(46px,7vw,110px); align-items:center; }
.collection-hero__copy { padding:18px 0; }
.collection-hero h1 { max-width:700px; margin-bottom:22px; font-size:clamp(3.25rem,5.7vw,5.9rem); }
.collection-hero__copy > p:not(.eyebrow) { max-width:650px; color:#f8f6f2; font-size:1.08rem; }
.collection-hero__actions,.catalog-cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:30px; }
.collection-hero__chat { color:#fff; font-weight:800; }
.collection-hero__chat span { margin-left:7px; }
.collection-hero__summary { display:grid; align-self:stretch; align-content:center; padding:34px; border:1px solid rgba(255,255,255,.28); border-radius:22px; background:rgba(51,51,51,.58); backdrop-filter:blur(8px); }
.collection-hero__summary > p { margin:0 0 13px; color:#e8e4dc; font-size:.7rem; font-weight:900; letter-spacing:.14em; }
.collection-hero__summary ul { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.collection-hero__summary li { display:grid; grid-template-columns:58px 1fr; gap:3px 12px; padding:17px 0; border-top:1px solid rgba(255,255,255,.2); }
.collection-hero__summary li span { grid-row:span 2; color:#d4af72; font-size:.74rem; font-weight:900; }
.collection-hero__summary li b { font-size:1.05rem; }
.collection-hero__summary li small { color:#e8e4dc; font-size:.82rem; }
.collection-hero__summary > a { display:flex; justify-content:space-between; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.2); color:#fff; font-weight:900; }

/* First-view motion: the content arrives in a clear reading order without changing the hero layout. */
.collection-hero__backdrop { animation:collection-hero-backdrop 1.15s cubic-bezier(.2,.72,.22,1) both; }
.collection-hero::after { animation:collection-hero-overlay .85s ease-out both; }
.collection-hero__copy > .eyebrow,
.collection-hero__copy > h1,
.collection-hero__copy > p:not(.eyebrow),
.collection-hero__actions,
.collection-hero__summary,
.collection-hero__summary > p,
.collection-hero__summary li,
.collection-hero__summary > a { opacity:0; }
.collection-hero__copy > .eyebrow { animation:collection-hero-rise .62s .12s cubic-bezier(.2,.72,.22,1) forwards; }
.collection-hero__copy > h1 { animation:collection-hero-rise .72s .2s cubic-bezier(.2,.72,.22,1) forwards; }
.collection-hero__copy > p:not(.eyebrow) { animation:collection-hero-rise .68s .31s cubic-bezier(.2,.72,.22,1) forwards; }
.collection-hero__actions { animation:collection-hero-rise .6s .42s cubic-bezier(.2,.72,.22,1) forwards; }
.collection-hero__summary { animation:collection-hero-panel .78s .2s cubic-bezier(.2,.72,.22,1) forwards; }
.collection-hero__summary > p { animation:collection-hero-rise .48s .43s ease-out forwards; }
.collection-hero__summary li:nth-child(1) { animation:collection-hero-rise .48s .5s ease-out forwards; }
.collection-hero__summary li:nth-child(2) { animation:collection-hero-rise .48s .58s ease-out forwards; }
.collection-hero__summary li:nth-child(3) { animation:collection-hero-rise .48s .66s ease-out forwards; }
.collection-hero__summary > a { animation:collection-hero-rise .48s .74s ease-out forwards; }
@keyframes collection-hero-backdrop { from { opacity:.5; transform:scale(1.045); } to { opacity:1; transform:scale(1); } }
@keyframes collection-hero-overlay { from { opacity:.3; } to { opacity:1; } }
@keyframes collection-hero-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes collection-hero-panel { from { opacity:0; transform:translateX(26px); } to { opacity:1; transform:translateX(0); } }
@media (prefers-reduced-motion:reduce) {
  .collection-hero__backdrop,.collection-hero::after,.collection-hero__copy > .eyebrow,.collection-hero__copy > h1,.collection-hero__copy > p:not(.eyebrow),.collection-hero__actions,.collection-hero__summary,.collection-hero__summary > p,.collection-hero__summary li,.collection-hero__summary > a { animation:none; opacity:1; transform:none; }
}

.collection-models,.collection-section { padding:104px 0; }
.collection-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:42px; }
.collection-heading h2 { margin-bottom:0; }
.collection-heading > p { max-width:360px; color:var(--color-muted); }
.collection-heading > picture { display:block; width:min(360px, 34%); flex:0 0 auto; }
.collection-heading > img { width:min(360px, 34%); }
.collection-heading > img,.collection-heading > picture > img { height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:var(--radius-medium); }
.collection-heading > picture > img { width:100%; }
.model-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.model-tile { display:grid; min-height:0; grid-template-rows:auto 1fr; overflow:hidden; border-radius:15px; background:var(--color-soft); transition:transform .3s ease,box-shadow .3s ease; }
.model-tile:hover { box-shadow:var(--shadow); transform:translateY(-5px); }
.model-tile.is-clickable { cursor:pointer; }
.model-tile.is-clickable:focus-visible { outline:3px solid var(--color-primary); outline-offset:4px; }
.model-tile img { width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; background:#fff; }
.model-tile > div { display:grid; align-content:start; gap:7px; padding:18px; }
.model-tile p { margin:0; color:var(--color-primary); font-size:.68rem; font-weight:900; letter-spacing:.13em; }
.model-tile h3 { margin:4px 0; font-size:1.23rem; }
.model-tile span { color:var(--color-muted); font-size:.88rem; }
.model-tile a { margin-top:12px; color:var(--color-primary); font-size:.84rem; font-weight:900; }
.model-tile--feature { position:relative; display:block; height:350px; min-height:350px; grid-column:span 2; overflow:hidden; background:var(--color-primary); color:#fff; }
.model-tile--feature::before { position:absolute; z-index:1; inset:0; content:''; background:linear-gradient(90deg,rgba(51,51,51,.94) 0%,rgba(77,68,55,.77) 52%,rgba(51,51,51,.30) 100%); }
.model-tile--feature img { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; }
.model-tile--feature > div { position:relative; z-index:2; min-height:100%; padding:26px; align-content:end; }
.model-tile--feature p,.model-tile--feature span,.model-tile--feature a { color:#f8f6f2; }
.catalog-cta > a { color:var(--color-primary); font-weight:900; }

.model-verification-note { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:-12px 0 30px; padding:18px 20px; border-left:4px solid var(--color-primary); background:#f8f6f2; }
.model-verification-note strong { flex:0 0 auto; font-size:.92rem; }
.model-verification-note span { color:var(--color-muted); font-size:.86rem; }
.vanity-model-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.vanity-model-card { min-width:0; overflow:hidden; border:1px solid var(--color-line); border-radius:18px; background:#fff; transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; }
.vanity-model-card:hover { border-color:rgba(184,150,90,.58); box-shadow:0 18px 44px rgba(41,35,28,.12); transform:translateY(-5px); }
.vanity-model-card > a { display:grid; height:100%; grid-template-rows:auto 1fr; color:inherit; }
.vanity-model-card figure { display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; overflow:hidden; margin:0; background:#fff; }
/* never upscale catalog product shots: render at natural size when smaller than the slot */
.vanity-model-card img { width:auto; height:auto; max-width:100%; max-height:100%; aspect-ratio:auto; object-fit:contain; background:#fff; transition:transform .45s ease; }
.vanity-model-card:hover img { transform:scale(1.025); }
.vanity-model-card__content { display:grid; align-content:start; padding:21px; }
.vanity-model-card__code { margin:0 0 7px; color:var(--color-primary); font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.vanity-model-card h3 { margin:0 0 18px; font-size:1.24rem; }
.vanity-model-card dl { display:grid; gap:0; margin:0; }
.vanity-model-card dl div { display:grid; grid-template-columns:112px 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--color-line); }
.vanity-model-card dt { color:var(--color-muted); font-size:.72rem; font-weight:800; }
.vanity-model-card dd { margin:0; font-size:.8rem; font-weight:700; }
.vanity-model-card__action { display:flex; justify-content:space-between; gap:12px; margin-top:18px; color:var(--color-primary); font-size:.82rem; font-weight:900; }
.vanity-model-card__action i { font-style:normal; }

.collection-types,.collection-oem,.collection-anc { background:var(--color-soft); }
.type-strip { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--color-line); }
.type-strip > a { min-height:210px; padding:27px; border-right:1px solid var(--color-line); border-bottom:1px solid var(--color-line); color:inherit; transition:background .25s ease,transform .25s ease; }
.type-strip > a:hover { background:#fff; transform:translateY(-3px); }
.type-strip b,.application-grid span { color:var(--color-primary); font-size:.72rem; letter-spacing:.13em; }
.type-strip h3 { margin:12px 0 8px; font-size:1.16rem; }
.type-strip p,.application-grid p { margin:0; color:var(--color-muted); font-size:.9rem; }
.collection-duo { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.collection-duo--reverse > img,.collection-duo--reverse > picture { order:2; }
.collection-duo > img,.collection-duo > picture > img { width:100%; height:auto; min-height:0; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-large); }
.collection-duo h2 { margin-bottom:20px; }
.collection-duo > div > p { color:var(--color-muted); }
table { width:100%; overflow:hidden; margin:28px 0; border-collapse:collapse; border-radius:16px; background:#fff; }
th,td { padding:15px; border-bottom:1px solid var(--color-line); text-align:left; font-size:.88rem; }
th { width:32%; color:var(--color-primary); }
.collection-problems { background:#f8f6f2; }
.problem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:30px; }
.problem-grid article { padding:25px; border-radius:16px; background:#fff; }
.problem-grid h3 { margin-bottom:8px; font-size:1.18rem; }
.problem-grid p { margin:0; color:var(--color-muted); font-size:.9rem; }

.collection-support { color:#fff; background:var(--color-text); }
.collection-support h2 { margin-bottom:12px; }
.support-intro { max-width:630px; margin-bottom:40px; }
.support-intro > p:not(.eyebrow) { color:#e8e4dc; }
.support-board { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:start; }
.support-board img { width:100%; height:auto; aspect-ratio:16/11; object-fit:cover; border-radius:20px; }
.support-board ul { display:grid; height:420px; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr); gap:1px; margin:0; padding:1px; list-style:none; background:rgba(255,255,255,.15); }
.support-board li { display:grid; align-content:center; padding:18px 24px; background:#403f3d; }
.support-board b { font-size:1.05rem; }
.support-board span { color:#e8e4dc; font-size:.88rem; }
.support-links { display:flex; flex-wrap:wrap; gap:22px; margin-top:28px; }
.support-links a { color:inherit; font-weight:900; }
.oem-list { display:grid; gap:10px; margin:22px 0; }
.oem-list article { padding:15px 17px; border-radius:12px; background:#fff; }
.oem-list h3 { margin:0 0 4px; font-size:1.04rem; }
.oem-list p { margin:0!important; font-size:.88rem; }
.collection-quality ol { padding-left:21px; color:var(--color-muted); }
.collection-quality li { padding:7px 0; }
.application-grid { display:grid; grid-template-columns:repeat(5,1fr); }
.application-grid article { min-height:205px; padding:25px 17px; border-top:1px solid var(--color-line); border-right:1px solid var(--color-line); }
.application-grid h3 { margin:20px 0 8px; font-size:1.08rem; }
.compare-title { display:grid; grid-template-columns:310px 1fr; gap:45px; align-items:center; margin-bottom:30px; }
.collection-compare { color:#fff; background:#333333; }
.compare-title img { width:min(360px, 100%); height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:18px; }
.collection-compare table { background:#4a4742; }
.collection-compare th,.collection-compare td { border-color:rgba(255,255,255,.16); color:#f8f6f2; }
.collection-compare th { color:#fff; }
.collection-anc dl { display:grid; gap:0; margin:24px 0; }
.collection-anc dl div { padding:13px 0; border-top:1px solid var(--color-line); }
.collection-anc dt { font-weight:900; }
.collection-anc dd { margin:2px 0 0; color:var(--color-muted); font-size:.9rem; }
.checklist-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:8px 0 28px; }
.checklist-grid article { padding:28px; border-radius:18px; background:var(--color-soft); }
.checklist-grid h3 { font-size:1.22rem; }
.checklist-grid ul { margin:0; padding-left:20px; color:var(--color-muted); }
.checklist-grid li { padding:4px 0; }
.evidence-list { display:grid; gap:8px; margin:20px 0; }
.evidence-list span { padding:11px 13px; border-left:3px solid var(--color-primary); background:var(--color-soft); font-size:.87rem; }

.collection-faq { background:#fff; }
.collection-faq .split-layout { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(36px,7vw,84px); align-items:stretch; }
.collection-faq .faq-image { overflow:hidden; border-radius:var(--radius-large); box-shadow:var(--shadow); }
.collection-faq .faq-image img { width:100%; height:auto; min-height:0; aspect-ratio:3/4; object-fit:cover; }
.collection-faq .faq-content > p:not(.eyebrow) { color:var(--color-muted); }
.collection-faq .faq-list { display:block; margin-top:28px; border-top:1px solid var(--color-line); }
.collection-faq .faq-list article { padding:0; border-bottom:1px solid var(--color-line); border-radius:0; background:transparent; }
.collection-faq .faq-list button { display:flex; align-items:center; width:100%; padding:18px 0; border:0; background:transparent; color:var(--color-text); text-align:left; }
.collection-faq .faq-list h3 { margin:0; font-size:1rem; }
.collection-faq .faq-list button > span { color:var(--color-primary); font-size:1.3rem; transition:transform .25s ease; }
.collection-faq .faq-list article.is-open button > span { transform:rotate(45deg); }
.collection-faq .faq-list article > div { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.collection-faq .faq-list article > div > p { overflow:hidden; margin:0; color:var(--color-muted); }
.collection-faq .faq-list article.is-open > div { grid-template-rows:1fr; }
.collection-faq .faq-list article.is-open > div > p { padding:0 0 18px; }
@media (max-width:900px) { .collection-faq .split-layout { grid-template-columns:1fr; } }

.collection-inquiry { position:relative; isolation:isolate; display:grid; min-height:520px; align-items:center; padding:78px 0; color:#fff; background:#333333; }
.collection-inquiry__backdrop { position:absolute; z-index:-2; inset:0; background:url('../../../images/product-collection/bathroom-vanities/request-bathroom-vanity-quote.jpg') center / cover no-repeat; }
.collection-inquiry::before { position:absolute; z-index:-1; inset:0; content:''; background:linear-gradient(90deg,rgba(51,51,51,.96),rgba(51,51,51,.84)); }
.collection-inquiry__grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(360px,.72fr); gap:clamp(50px,9vw,140px); align-items:center; }
.collection-inquiry h2 { margin-bottom:18px; }
.collection-inquiry p:not(.eyebrow) { color:#f8f6f2; }
.collection-inquiry__copy { max-width:550px; }
.collection-inquiry__copy ul { display:grid; gap:9px; margin:28px 0; padding:0; list-style:none; color:#e8e4dc; }
.collection-inquiry__copy li { position:relative; padding-left:24px; }
.collection-inquiry__copy li::before { position:absolute; left:0; content:'✓'; color:#d4af72; font-weight:900; }
.collection-inquiry__copy > a { color:#fff; font-weight:900; }
.collection-inquiry__copy > a span { margin-left:7px; }
.collection-inquiry form { display:grid; gap:12px; padding:25px; border-radius:18px; background:#fff; color:var(--color-text); box-shadow:0 20px 48px rgba(9,29,43,.23); }
.collection-inquiry label { display:grid; gap:5px; font-size:.8rem; font-weight:900; }
.collection-inquiry input,.collection-inquiry textarea { width:100%; padding:11px; border:1px solid var(--color-line); border-radius:9px; resize:vertical; }
.collection-inquiry form .button { width:100%; }

@media (max-width:900px) { .collection-hero { min-height:auto; } .collection-hero__grid,.collection-duo,.support-board,.collection-inquiry__grid { grid-template-columns:1fr; } .collection-hero__summary { max-width:620px; } .collection-duo--reverse > img,.collection-duo--reverse > picture { order:initial; } .model-catalog,.vanity-model-grid { grid-template-columns:repeat(2,1fr); } .model-tile--feature { grid-column:span 2; } .application-grid { grid-template-columns:repeat(3,1fr); } .collection-heading { align-items:start; } .collection-inquiry img { height:auto; aspect-ratio:16/10; } .collection-faq .faq-image img { aspect-ratio:4/3; } }
@media (max-width:720px) { .collection-hero__backdrop { background-image:url('../../../images/product-collection/bathroom-vanities/bathroom-vanities-supplier-foshan-mobile.jpg'); } .collection-inquiry__backdrop { background-image:url('../../../images/product-collection/bathroom-vanities/request-bathroom-vanity-quote-mobile.jpg'); } }
@media (max-width:600px) { .collection-hero { padding:60px 0; } .collection-hero h1 { font-size:clamp(2.8rem,14vw,4rem); } .collection-hero__summary { padding:24px; } .collection-heading { display:grid; gap:20px; } .collection-heading > img,.collection-heading > picture { width:100%; } .collection-heading > picture > img { width:100%; } .model-catalog,.vanity-model-grid,.problem-grid,.type-strip,.checklist-grid { grid-template-columns:1fr; } .model-verification-note { display:grid; } .vanity-model-card > a { grid-template-rows:auto 1fr; } .model-tile--feature { grid-column:span 1; grid-template-columns:1fr; } .model-tile--feature img { height:auto; aspect-ratio:16/10; } .support-board ul { grid-template-columns:1fr; height:auto; } .application-grid { grid-template-columns:1fr 1fr; } .compare-title { grid-template-columns:1fr; gap:20px; } .collection-section,.collection-models { padding:70px 0; } .collection-inquiry { padding:62px 0; } }

/* Layout audit 2026-08-23 */
.vanity-model-card__content { grid-template-rows: auto auto 1fr auto; height: 100%; }
.vanity-model-card__action { margin-top: auto; }

/* B4 2026-08-30: this closing paragraph sat at the full 1180px container width,
   giving ~148 characters per line — roughly double a comfortable measure. */
.collection-support > .container > p { max-width: 68ch; }