/* Little Cath — Brands section (Dior · Chanel · Tom Ford · YSL) Portable block:
+ brands.css + brands.js + brands-data.json + img/ Everything is scoped under .lcb and prefixed lcb-. Language: (default zh). Visual language cloned from the Prada lips section (mock P). */ .lcb{--lcb-ink:#111;--lcb-grey:#767676;--lcb-line:#E5E5E5;--lcb-tile:#ECECEC; font-family:"Inter","Noto Sans SC",sans-serif;color:var(--lcb-ink);font-size:14px;line-height:1.7;padding:72px 0 0;-webkit-font-smoothing:antialiased} /* zero-specificity resets so component classes always win (and site globals are neutralised) */ :where(.lcb) *{box-sizing:border-box} :where(.lcb) :where(a){color:inherit;text-decoration:none} :where(.lcb) :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;border-radius:0;box-shadow:none} :where(.lcb) :where(img){display:block;max-width:none;height:auto} :where(.lcb) :where(h2,h3,h4,p,dl,dd){margin:0} /* ---- language switch ---- */ html[data-lang=en] .lcb .lcb-z{display:none !important} html:not([data-lang=en]) .lcb .lcb-eo{display:none !important} .lcb .lcb-e{font-family:"Jost","Noto Sans SC",sans-serif;letter-spacing:.24em;text-transform:uppercase;font-size:10px;margin-left:6px} html[data-lang=en] .lcb .lcb-e{margin-left:0} /* ---- shared ---- */ .lcb-jost{font-family:"Jost","Noto Sans SC",sans-serif} .lcb-ulink{white-space:nowrap;display:inline-block;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:12px;letter-spacing:.18em;font-weight:500} .lcb-ulink .lcb-e{font-size:11px;letter-spacing:.18em;font-weight:500} .lcb-btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:12px;background:#000;color:#fff !important;height:52px;padding:0 40px;font-size:12.5px;letter-spacing:.3em;border:1px solid #000;font-weight:400;transition:background .2s,color .2s} .lcb-btn:hover{background:#fff;color:#000 !important} .lcb-btn .lcb-e{font-size:12px;letter-spacing:.3em;margin-left:0} .lcb-eb{font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--lcb-grey)} /* ---- section head ---- */ .lcb-head{text-align:center;padding:0 24px} .lcb-head h2{font-family:"Jost",sans-serif;font-weight:400;font-size:28px;letter-spacing:.42em;padding-left:.42em;margin:14px 0 6px;color:#000;line-height:1.3} .lcb-head h2 .lcb-z{font-family:"Noto Sans SC",sans-serif;font-size:20px;letter-spacing:.3em;margin-left:.2em} .lcb-head .lcb-sub{font-size:13px;color:var(--lcb-grey);font-weight:300;letter-spacing:.12em} /* ---- brand tabs ---- */ .lcb-btabs{display:flex;justify-content:center;gap:72px;margin:34px auto 0;padding:0 24px;max-width:1320px} .lcb-btab{display:flex;flex-direction:column;align-items:center;gap:4px;color:#9A9A9A;padding-bottom:12px;position:relative;white-space:nowrap;transition:color .2s} .lcb-btab .lcb-bn{font-family:"Jost",sans-serif;font-size:17px;letter-spacing:.34em;padding-left:.34em;font-weight:400} .lcb-btab .lcb-bz{font-size:11.5px;letter-spacing:.3em;padding-left:.3em} .lcb-btab:hover,.lcb-btab[aria-selected=true]{color:#000} .lcb-btab[aria-selected=true]::after{content:"";position:absolute;left:50%;bottom:0;width:28px;margin-left:-14px;height:1px;background:#000} /* ---- category tabs ---- */ .lcb-ctabs{display:flex;justify-content:center;gap:12px;margin:26px auto 0;padding:0 24px} .lcb-ctab{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 22px;border:1px solid #D6D6D6;font-size:13px;letter-spacing:.14em;color:#444;white-space:nowrap;transition:border-color .2s,background .2s,color .2s} .lcb-ctab .lcb-e{font-size:10.5px;letter-spacing:.22em} .lcb-ctab i{font-style:normal;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.08em;color:#9A9A9A} .lcb-ctab:hover{border-color:#000;color:#000} .lcb-ctab[aria-selected=true]{background:#000;border-color:#000;color:#fff} .lcb-ctab[aria-selected=true] i{color:#BDBDBD} /* ---- panel head (e.g. DIOR LIPS) ---- */ .lcb-panel{margin-top:56px} .lcb-phead{text-align:center;padding:0 24px} .lcb-phead h3{font-family:"Jost",sans-serif;font-weight:400;font-size:24px;letter-spacing:.42em;padding-left:.42em;color:#000;line-height:1.3;margin:0 0 6px} .lcb-phead .lcb-sub{font-size:13px;color:var(--lcb-grey);font-weight:300;letter-spacing:.12em} .lcb-phead .lcb-sub .lcb-e{font-size:11.5px;letter-spacing:.2em;margin-left:10px} html[data-lang=en] .lcb-phead .lcb-sub .lcb-e{margin-left:0} /* ---- series tabs ---- */ .lcb-tabs{display:flex;justify-content:center;gap:56px;margin:26px auto 0;border-bottom:1px solid var(--lcb-line);padding:0 24px;max-width:1320px} .lcb-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 0 14px;color:var(--lcb-grey);position:relative;white-space:nowrap;transition:color .2s} .lcb-tab .lcb-tn{font-family:"Jost",sans-serif;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase} .lcb-tab .lcb-tz{font-size:13px;letter-spacing:.14em} .lcb-tab .lcb-tz i{font-style:normal;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.1em;margin-left:6px;color:#9A9A9A} html[data-lang=en] .lcb-tab .lcb-tz i{margin-left:0} .lcb-tab:hover,.lcb-tab[aria-selected=true]{color:#000} .lcb-tab[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#000} /* ---- product view ---- */ .lcb-pdp{display:grid;grid-template-columns:64px 560px 1fr;column-gap:20px;max-width:1320px;margin:36px auto 0;padding:0 72px;align-items:start} .lcb-thumbs{display:flex;flex-direction:column;gap:12px} .lcb-th{width:64px;aspect-ratio:4/5;background:var(--lcb-tile);position:relative;opacity:.55;transition:opacity .2s} .lcb-th img{width:100%;height:100%;object-fit:contain} .lcb-th[aria-pressed=true]{opacity:1} .lcb-th[aria-pressed=true]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#000} .lcb-th:hover{opacity:1} .lcb-frame{position:relative;aspect-ratio:4/5;background:var(--lcb-tile);overflow:hidden} .lcb-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease} .lcb-frame img.lcb-off{opacity:0} .lcb-vt{display:none} .lcb-info{padding:4px 0 0 64px;max-width:600px} .lcb-info .lcb-eb{font-size:10.5px} .lcb-info h3{font-weight:400;font-size:20px;letter-spacing:.2em;margin:10px 0 18px;color:#000;line-height:1.4} .lcb-info h3 .lcb-z{margin-left:.5em} .lcb-meta{display:grid;grid-template-columns:150px 1fr;font-size:12.5px;border-top:1px solid var(--lcb-line)} .lcb-meta>div{display:contents} .lcb-meta dt,.lcb-meta dd{margin:0;padding:11px 0;border-bottom:1px solid var(--lcb-line)} .lcb-meta dt{color:var(--lcb-grey);font-weight:300;letter-spacing:.08em} .lcb-meta dd .lcb-e{font-family:inherit;text-transform:none;letter-spacing:.02em;font-size:12.5px;color:var(--lcb-grey);font-weight:300;margin-left:8px} html[data-lang=en] .lcb-meta dd .lcb-e{color:inherit;font-weight:400;margin-left:0} .lcb-shade{margin:28px 0 0;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap} .lcb-code{font-family:"Jost",sans-serif;font-size:30px;font-weight:400;letter-spacing:.14em;color:#000;line-height:1.1} .lcb-code:empty,.lcb-name:empty{display:none} .lcb-name{font-family:"Jost",sans-serif;font-size:17px;letter-spacing:.3em;text-transform:uppercase;color:#000} .lcb-name .lcb-nz{font-family:"Noto Sans SC",sans-serif;font-size:13px;letter-spacing:.14em;color:var(--lcb-grey);margin-left:12px} .lcb-tag{font-family:"Jost",sans-serif;font-style:normal;font-size:10px;letter-spacing:.24em;border:1px solid #000;padding:2px 8px 1px;text-transform:uppercase;align-self:center} .lcb-tag:empty{display:none} .lcb-desc{margin:10px 0 0;font-size:14px;letter-spacing:.06em;color:#222} .lcb-desc:empty{display:none} .lcb-desc .lcb-e{display:block;font-family:inherit;text-transform:none;font-size:12.5px;color:var(--lcb-grey);font-weight:300;letter-spacing:.03em;margin:0} html[data-lang=en] .lcb-desc .lcb-e{font-size:14px;color:#222;font-weight:400} .lcb-chiph{display:flex;justify-content:space-between;align-items:baseline;margin:26px 0 14px;font-size:12px;letter-spacing:.1em;color:var(--lcb-grey)} .lcb-chiph b{font-weight:400;color:#000} .lcb-chips{display:flex;flex-wrap:wrap;gap:14px 12px} .lcb-chip{width:32px;height:32px;border-radius:50%;position:relative;border:1px solid rgba(0,0,0,.06)} .lcb-chip::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid transparent;transition:border-color .2s} .lcb-chip:hover::after{border-color:#BDBDBD} .lcb-chip[aria-checked=true]::after{border-color:#000} .lcb-szs{display:flex;flex-wrap:wrap;gap:10px} .lcb-sz{height:38px;min-width:74px;padding:0 14px;border:1px solid #D6D6D6;font-family:"Jost",sans-serif;font-size:12px;letter-spacing:.14em;text-align:center;transition:border-color .2s} .lcb-sz:hover{border-color:#8A8A8A} .lcb-sz[aria-checked=true]{border-color:#000;color:#000} .lcb-cta{display:flex;align-items:center;gap:32px;margin-top:34px} .lcb-fine{margin:22px 0 0;font-size:11.5px;color:var(--lcb-grey);font-weight:300;letter-spacing:.04em;line-height:1.9} .lcb-fine span{display:block} .lcb-mcta{display:none} /* ---- all shades ---- */ .lcb-all{max-width:1320px;margin:96px auto 0;padding:0 72px} .lcb-allbar{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--lcb-line);padding-top:26px} .lcb-allbar h4{font-weight:400;font-size:15px;letter-spacing:.24em;color:#000} .lcb-allbar h4 .lcb-e{font-size:11px;letter-spacing:.3em;color:var(--lcb-grey);margin-left:14px} html[data-lang=en] .lcb-allbar h4 .lcb-e{margin-left:0;color:#000;font-size:13px} .lcb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:28px} .lcb-grid[hidden],.lcb-sgrid[hidden]{display:none} .lcb-tile{display:block;text-align:center;cursor:pointer;width:100%} .lcb-ph{position:relative;aspect-ratio:4/5;background:var(--lcb-tile);overflow:hidden} .lcb-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease} .lcb-ph img.lcb-b{opacity:0} @media (hover:hover) and (pointer:fine){.lcb-tile:hover .lcb-ph img.lcb-b{opacity:1}.lcb-tile:hover .lcb-ph img.lcb-a.lcb-has-b{opacity:0}} .lcb-cap{padding:14px 8px 36px} .lcb-c1{font-family:"Jost",sans-serif;font-size:11.5px;letter-spacing:.26em;color:#000;text-transform:uppercase} .lcb-c1 .lcb-d{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:10px;vertical-align:0;border:1px solid rgba(0,0,0,.06)} .lcb-c2{font-size:12px;color:var(--lcb-grey);font-weight:300;letter-spacing:.06em;margin-top:2px} .lcb-c3{font-family:"Jost",sans-serif;font-size:11px;color:#9A9A9A;letter-spacing:.12em;margin-top:6px} .lcb-tile.lcb-on .lcb-c1 .lcb-t{border-bottom:1px solid #000;padding-bottom:2px} /* foundation shade grid: chip + code + name */ .lcb-sgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-top:28px} .lcb-st{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 8px 22px;background:#F6F6F6;text-align:center;width:100%;border:1px solid transparent} .lcb-st .lcb-sc{width:46px;height:46px;border-radius:50%;border:1px solid rgba(0,0,0,.06)} .lcb-st .lcb-c1{letter-spacing:.2em} .lcb-st .lcb-c2{margin:0} .lcb-st:hover{background:#EFEFEF} .lcb-st.lcb-on{border-color:#000;background:#fff} /* fragrance */ .lcb-fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;max-width:1320px;margin:40px auto 0;padding:0 72px} .lcb-fgrid .lcb-c1{text-transform:none;letter-spacing:.02em;font-size:13px;line-height:1.35} .lcb-fgrid .lcb-t{display:block} .lcb-sfil{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:20px auto 0;padding:0 24px;max-width:1100px} .lcb-sbtn{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 14px;border:1px solid #D6D6D6;font-size:12px;letter-spacing:.06em;color:#444;background:#fff;white-space:nowrap} .lcb-sbtn .lcb-e{font-size:10px;letter-spacing:.14em} .lcb-sbtn i{font-style:normal;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.06em;color:#9A9A9A} .lcb-sbtn:hover{border-color:#000;color:#000} .lcb-sbtn[aria-selected=true]{background:#000;border-color:#000;color:#fff} .lcb-sbtn[aria-selected=true] i{color:#BDBDBD} .lcb-fwrap.is-grouped{margin-top:8px} .lcb-fwrap.is-grouped .lcb-fgrid{margin-top:12px} .lcb-fsech{display:flex;justify-content:space-between;align-items:baseline;gap:16px;max-width:1320px;margin:22px auto 0;padding:18px 72px 0;border-top:1px solid var(--lcb-line)} .lcb-fsech h4{font-weight:400;font-size:14px;letter-spacing:.14em;color:#000} .lcb-fsech h4 .lcb-e{font-size:11px;letter-spacing:.16em;color:#767676;margin-left:10px} html[data-lang=en] .lcb-fsech h4 .lcb-e{margin-left:0;color:#000} .lcb-fsecn{font-family:"Jost",sans-serif;font-size:12px;letter-spacing:.08em;color:#9A9A9A;white-space:nowrap} .lcb-fmore{display:none;width:fit-content;margin:8px auto 28px;height:40px;padding:0 22px;border:1px solid #111;letter-spacing:.16em;font-size:12px;align-items:center;justify-content:center} .lcb-fdet{border-bottom:1px solid var(--lcb-line);padding-bottom:64px} .lcb-fdet[hidden]{display:none} .lcb-back{display:block;max-width:1320px;margin:36px auto 0;padding:0 72px;font-size:12px;letter-spacing:.14em;color:var(--lcb-grey)} .lcb-back:hover{color:#000} .lcb-back .lcb-e{font-size:10.5px} .lcb-fdet .lcb-pdp{margin-top:20px} @media (max-width:1100px) and (min-width:761px){ .lcb-pdp{grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);padding:0 32px} .lcb-th{width:56px}.lcb-info{padding-left:36px} .lcb-all,.lcb-fgrid,.lcb-back{padding:0 32px} .lcb-fsech{padding-left:32px;padding-right:32px} .lcb-btabs{gap:44px} } @media (max-width:760px){ .lcb{padding-top:48px} .lcb-head .lcb-eb{display:none} .lcb-head h2{font-size:22px;letter-spacing:.34em;padding-left:.34em;margin-top:0} .lcb-head h2 .lcb-z{font-size:16px} .lcb-head .lcb-sub{font-size:12px} .lcb-btabs,.lcb-ctabs,.lcb-tabs{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:0 20px;scroll-padding:0 20px;scroll-snap-type:x proximity} .lcb-btabs::-webkit-scrollbar,.lcb-ctabs::-webkit-scrollbar,.lcb-tabs::-webkit-scrollbar{display:none} .lcb-btabs::after,.lcb-ctabs::after,.lcb-tabs::after{content:"";flex:0 0 1px} .lcb-btabs{gap:34px;margin-top:24px;border-bottom:1px solid var(--lcb-line)} .lcb-btab{scroll-snap-align:start;padding-bottom:10px} .lcb-btab .lcb-bn{font-size:14px;letter-spacing:.28em;padding-left:0} .lcb-btab .lcb-bz{font-size:11px} .lcb-btab[aria-selected=true]::after{left:0;right:0;width:auto;margin:0} .lcb-ctabs{gap:8px;margin-top:16px} .lcb-ctab{height:36px;padding:0 14px;font-size:12.5px;gap:6px;scroll-snap-align:start;flex:0 0 auto} html:not([data-lang=en]) .lcb-ctab .lcb-e{display:none} .lcb-meta{grid-template-columns:120px 1fr} .lcb-panel{margin-top:36px} .lcb-phead h3{font-size:19px;letter-spacing:.34em;padding-left:.34em} .lcb-phead .lcb-sub{font-size:12.5px} .lcb-phead .lcb-sub .lcb-e{display:block;margin:4px 0 0} .lcb-tabs{gap:30px;margin-top:22px} .lcb-tab{scroll-snap-align:start;padding-bottom:12px} .lcb-tab[aria-selected=true]::after{bottom:0} .lcb-tab .lcb-tn{font-size:10.5px;letter-spacing:.2em}.lcb-tab .lcb-tz{font-size:12.5px} .lcb-pdp{display:block;padding:0;margin-top:0} .lcb-thumbs{display:none} .lcb-frame{width:100%;aspect-ratio:1/1} .lcb-frame img{object-fit:cover} .lcb-vt{display:flex;justify-content:center;gap:28px;padding:14px 0 0} .lcb-vt:empty{display:none} .lcb-vt button{font-size:12px;letter-spacing:.14em;color:var(--lcb-grey);padding-bottom:3px;border-bottom:1px solid transparent} .lcb-vt button[aria-pressed=true]{color:#000;border-bottom-color:#000} .lcb-info{padding:18px 20px 0;max-width:none;display:flex;flex-direction:column} .lcb-info>.lcb-eb{order:-2} .lcb-info h3{font-size:16px;margin:6px 0 4px;order:-1} .lcb-meta{order:9;margin-top:26px} .lcb-fine{order:10;margin-top:18px} .lcb-shade{margin-top:6px;gap:12px}.lcb-code{font-size:26px}.lcb-name{font-size:15px} .lcb-chiph{margin:24px 0 12px} .lcb-chips{gap:12px 11px}.lcb-chip{width:30px;height:30px} .lcb-cta{display:none} .lcb-mcta{display:flex;position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--lcb-line);padding:12px 20px calc(12px + env(safe-area-inset-bottom));gap:18px;align-items:center;margin-top:22px} .lcb-mcta .lcb-btn{flex:1;height:48px;padding:0 16px;letter-spacing:.24em} .lcb-mcta .lcb-ulink{font-size:11px;letter-spacing:.12em} .lcb-all{padding:0;margin-top:56px} .lcb-allbar{padding:22px 20px 0;flex-direction:column;gap:12px;align-items:flex-start} .lcb-allbar h4 .lcb-e{display:block;margin:4px 0 0} .lcb-grid,.lcb-fgrid{grid-template-columns:1fr 1fr} .lcb-grid{margin-top:20px} .lcb-sgrid{grid-template-columns:repeat(3,1fr);margin-top:20px} .lcb-st{padding:18px 4px 16px}.lcb-st .lcb-sc{width:38px;height:38px} .lcb-cap{padding:10px 6px 24px}.lcb-c1{font-size:10.5px;letter-spacing:.2em}.lcb-c1 .lcb-d{margin-right:6px}.lcb-c2{font-size:11px} .lcb-fgrid{padding:0;margin-top:28px} .lcb-back{padding:0 20px;margin-top:24px} .lcb-fdet .lcb-pdp{margin-top:14px} .lcb-sfil{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;max-width:none;margin-top:16px;padding:0 20px} .lcb-sfil::-webkit-scrollbar{display:none} .lcb-sbtn{flex:0 0 auto;height:32px;padding:0 12px;scroll-snap-align:start} html:not([data-lang=en]) .lcb-sbtn .lcb-e{display:none} .lcb-fsech{padding:18px 20px 0} .lcb-fsech h4 .lcb-e{display:block;margin:4px 0 0} .lcb-fmore{display:flex} .lcb-fsec.is-collapsed .lcb-tile.is-more{display:none} }