.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:#006d6d; color:#fff; }
.collection-hero__backdrop { position:absolute; z-index:-2; inset:0; background:url('../../../images/about-us/company-introduction.jpg') center / cover no-repeat; }
.collection-hero::after { position:absolute; z-index:-1; inset:0; content:''; background:linear-gradient(90deg,rgba(0,61,61,.95) 0%,rgba(0,112,112,.86) 45%,rgba(0,88,88,.62) 70%,rgba(0,58,58,.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:#d6e1e7; 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,.24); border-radius:22px; background:rgba(13,42,61,.52); backdrop-filter:blur(8px); }
.collection-hero__summary > p { margin:0 0 13px; color:#cbdde5; 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:34px 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:#a9cbe0; font-size:.74rem; font-weight:900; }
.collection-hero__summary li b { font-size:1.05rem; }
.collection-hero__summary li small { color:#cfdee4; 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 > img { width:260px; height:125px; object-fit:cover; border-radius:var(--radius-medium); }
.model-catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.model-tile { display:grid; min-height:350px; grid-template-rows:164px 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:164px; object-fit:cover; }
.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(14,48,75,.94) 0%,rgba(23,73,97,.79) 52%,rgba(16,49,74,.35) 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:#dbeaf0; }
.catalog-cta > a { color:var(--color-primary); font-weight:900; }

.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 article { min-height:180px; padding:27px; border-right:1px solid var(--color-line); border-bottom:1px solid var(--color-line); }
.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 { order:2; }
.collection-duo > img { min-height:360px; max-height:520px; 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:#f7f9fa; }
.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:#cdd8dd; }
.support-board { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:start; }
.support-board img { height:420px; min-height:0; 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:#394045; }
.support-board b { font-size:1.05rem; }
.support-board span { color:#d2dadd; 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(6,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:#1f3c51; }
.compare-title img { height:200px; object-fit:cover; border-radius:18px; }
.collection-compare table { background:#2d4b60; }
.collection-compare th,.collection-compare td { border-color:rgba(255,255,255,.16); color:#e8f0f4; }
.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:100%; min-height:560px; 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:#17384f; }
.collection-inquiry__backdrop { position:absolute; z-index:-2; inset:0; background:url('../../../images/product-collection/bluetooth-earphones/final-inquiry.jpg') center / cover no-repeat; }
.collection-inquiry::before { position:absolute; z-index:-1; inset:0; content:''; background:linear-gradient(90deg,rgba(19,57,82,.96),rgba(19,57,82,.86)); }
.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:#e0ebf0; }
.collection-inquiry__copy { max-width:550px; }
.collection-inquiry__copy ul { display:grid; gap:9px; margin:28px 0; padding:0; list-style:none; color:#dce9ee; }
.collection-inquiry__copy li { position:relative; padding-left:24px; }
.collection-inquiry__copy li::before { position:absolute; left:0; content:'✓'; color:#bcd9e7; 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 { order:initial; } .model-catalog { 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:260px; } .collection-faq .faq-image img { min-height:360px; } }
@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 { width:100%; } .model-catalog,.problem-grid,.type-strip,.checklist-grid { grid-template-columns:1fr; } .model-tile--feature { grid-column:span 1; grid-template-columns:1fr; grid-template-rows:190px 1fr; } .model-tile--feature img { height:190px; } .support-board ul { grid-template-columns:1fr; } .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; } }