/* Design B — Editorial Magazine. Loaded last. System Georgia / Songti SC for display.
   Archivo + PingFang SC / Noto Sans SC for body, nav, and labels. No CDN fonts.
   Tokens: canvas #FFFFFF, ink #242820, secondary #6A6C62, rules #DEDED8.
   Margins 48/20, gaps 40/18. Type 1440/390: display 64/40, ZH home 40/28,
   section 40/30, Discover title 52/36, body 15/14, nav 13/12,
   model 12/11, brand 11/10, eyebrow 11/10. */

html.design-b {
  --ground: #ffffff;
  --ink: #242820;
  --quiet: #6a6c62;
  --line: #deded8;
  --step: #ffffff;
  --step2: #deded8;
  --night: #1c1e1b;
  --night-ink: #f7f7f4;
  --night-quiet: #c5c6be;
  --signal: #242820;
  --m: 48px;
  --gap: 40px;
  --f: "Archivo", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --display: Georgia, "Iowan Old Style", "Palatino Linotype", "Songti SC", serif;
  --display-zh: "Songti SC", "Songti TC", "STSong", "PMingLiU", Georgia, serif;
  --s-body: 15px;
  color-scheme: only light;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  html.design-b {
    --m: 20px;
    --gap: 18px;
    --s-body: 14px;
  }
}

html.design-b body {
  background: #ffffff;
  color: #242820;
  font-family: var(--f);
  font-size: var(--s-body);
  line-height: 1.6;
  font-stretch: 100%;
}

/* ---- Header. Real links and the real Brands menu stay; only the skin changes. ---- */
html.design-b .bar {
  height: 64px;
  padding: 0 var(--m);
  background: #ffffff;
  border-bottom: 1px solid #deded8;
}
html.design-b .bar .wm {
  font-family: var(--f);
  font-weight: 500;
  font-stretch: 100%;
  font-size: 17px;
  letter-spacing: 0.1em;
  color: #242820;
}
html.design-b .bar nav {
  font-size: 13px;
  gap: 28px;
}
html.design-b .bar nav a,
html.design-b .bar nav button.ca-brands-nav {
  font-family: var(--f);
  font-size: 13px;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.01em;
  color: #6a6c62;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
html.design-b .bar nav a:hover,
html.design-b .bar nav button.ca-brands-nav:hover,
html.design-b .bar nav a[aria-current],
html.design-b .bar nav button.ca-brands-nav[aria-current] {
  color: #242820;
}
html.design-b .bar .lang {
  color: #242820 !important;
  font-weight: 500;
}
html.design-b .menu {
  font-family: var(--f);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media (max-width: 700px) {
  html.design-b .bar .wm {
    font-size: 14px;
    letter-spacing: 0.08em;
  }
  html.design-b .bar .wm::before {
    width: 22px;
    height: 22px;
  }
  html.design-b .bar nav,
  html.design-b .bar nav a,
  html.design-b .bar nav button.ca-brands-nav,
  html.design-b .menu {
    font-size: 12px;
  }
}
/* Full-screen mobile index stays tappable; the bar itself is 12px. */
@media (max-width: 960px) {
  html.design-b .bar nav.open a,
  html.design-b .bar nav.open button.ca-brands-nav {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 12px 0;
    color: #242820;
  }
}

html.design-b .ca-megamenu {
  background: #ffffff;
  color: #242820;
  border: 1px solid #deded8;
  border-radius: 0;
  box-shadow: none;
  top: 64px;
  left: var(--m);
  right: var(--m);
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
}
html.design-b .ca-mm-top {
  border-bottom: 1px solid #deded8;
}
html.design-b .ca-mm-tab {
  font-family: var(--f);
  font-size: 11px;
  letter-spacing: 0.06em;
  border: 1px solid #deded8;
  border-radius: 0;
  background: #ffffff;
  color: #6a6c62;
}
html.design-b .ca-mm-tab.is-on {
  background: #242820;
  color: #ffffff;
  border-color: #242820;
}
html.design-b .ca-mm-item {
  color: #242820;
  font-size: 13px;
  border-radius: 0;
}
html.design-b .ca-mm-item:hover {
  background: #f7f7f4;
}
html.design-b .ca-mm-item small {
  color: #6a6c62;
  font-variant-numeric: tabular-nums;
}
html.design-b .ca-mm-close {
  font-family: var(--f);
  color: #242820;
}

/* ---- Display type ---- */
html.design-b .head,
html.design-b .ph .mono,
html.design-b .prose h2,
html.design-b .home .stmt p.big,
html.design-b .hero-v2 .hero-copy h1,
html.design-b .home .types .trow .t {
  font-family: var(--display) !important;
  font-stretch: 100% !important;
  font-weight: 400 !important;
  color: #242820;
}
html.design-b .zh .head,
html.design-b .zh .ph .mono,
html.design-b .zh .prose h2,
html.design-b .zh .stmt p.big,
html.design-b .zh .hero-v2 .hero-copy h1,
html.design-b .zh .home .types .trow .t,
html.design-b .zh .prod .pinfo h1 {
  font-family: var(--display-zh) !important;
  letter-spacing: 0 !important;
}

html.design-b .hero-v2 .hero-copy h1,
html.design-b .zh .hero-v2 .hero-copy h1 {
  font-size: 64px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.05em !important;
  font-weight: 400 !important;
  max-width: 9em !important;
  text-wrap: balance;
}
html.design-b .zh .hero-v2 .hero-copy h1 {
  font-size: 40px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  max-width: 12em !important;
}
html.design-b .head,
html.design-b .prose h2 {
  font-size: 40px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
}
html.design-b .zh .head,
html.design-b .zh .prose h2 {
  line-height: 1.35 !important;
}
html.design-b .ph .mono {
  font-size: 64px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.05em !important;
  white-space: normal;
}
html.design-b main.dv .ph .mono,
html.design-b main.dv .ph h1 {
  font-size: 52px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.05em !important;
  font-weight: 400 !important;
}
html.design-b .zh main.dv .ph .mono {
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}
html.design-b .home .stmt p.big {
  font-size: 32px !important;
  line-height: 1.45 !important;
  letter-spacing: -0.03em !important;
  font-weight: 400 !important;
  max-width: 22em;
}
html.design-b .zh .home .stmt p.big {
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}

html.design-b .lead,
html.design-b .ph .meta,
html.design-b .body,
html.design-b .prose p,
html.design-b .hero-v2 .hero-intro,
html.design-b .hero-v2 .hero-tagline {
  font-family: var(--f);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  color: #6a6c62;
}
html.design-b .hero-v2 .hero-tagline {
  margin-top: 22px;
  color: #242820;
}

/* Eyebrow: uppercase tracking on English only. */
html.design-b .en .scene-kicker,
html.design-b .en .ca-monolith-kicker,
html.design-b .en .hero-eyebrow,
html.design-b:lang(en) .scene-kicker,
html.design-b:lang(en) .ca-monolith-kicker,
html.design-b:lang(en) .hero-eyebrow {
  font-family: var(--f);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a6c62;
}
html.design-b .zh .scene-kicker,
html.design-b .zh .ca-monolith-kicker,
html.design-b .zh .hero-eyebrow {
  font-family: var(--f);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: #6a6c62;
}

html.design-b .cap b,
html.design-b .prod .pinfo .bnm,
html.design-b .brow .bc {
  font-family: var(--f) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em !important;
  color: #6a6c62 !important;
  font-stretch: 100% !important;
}
html.design-b .en .prod .pinfo .bnm {
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}
html.design-b .cap span,
html.design-b .cap .cprice {
  font-family: var(--f);
  font-size: 12px;
  line-height: 1.45;
  color: #242820;
}
html.design-b .prod .pinfo h1 {
  font-family: var(--display) !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
  color: #242820 !important;
  font-stretch: 100% !important;
}
html.design-b .zh .prod .pinfo h1 {
  font-family: var(--display-zh) !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}

@media (max-width: 700px) {
  html.design-b .hero-v2 .hero-copy h1,
  html.design-b .zh .hero-v2 .hero-copy h1 {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }
  html.design-b .zh .hero-v2 .hero-copy h1 {
    font-size: 28px !important;
    line-height: 1.5 !important;
  }
  html.design-b .head,
  html.design-b .prose h2,
  html.design-b .home .types .trow .t,
  html.design-b .prod .pinfo h1 {
    font-size: 30px !important;
  }
  html.design-b .ph .mono {
    font-size: 40px !important;
  }
  html.design-b main.dv .ph .mono,
  html.design-b main.dv .ph h1 {
    font-size: 36px !important;
  }
  html.design-b .home .stmt p.big {
    font-size: 25px !important;
  }
  html.design-b .lead,
  html.design-b .ph .meta,
  html.design-b .body,
  html.design-b .prose p,
  html.design-b .hero-v2 .hero-intro,
  html.design-b .hero-v2 .hero-tagline {
    font-size: 14px;
  }
  html.design-b .en .scene-kicker,
  html.design-b .en .ca-monolith-kicker,
  html.design-b .en .hero-eyebrow,
  html.design-b .zh .scene-kicker,
  html.design-b .zh .ca-monolith-kicker,
  html.design-b:lang(en) .scene-kicker,
  html.design-b:lang(en) .ca-monolith-kicker {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
  html.design-b .zh .scene-kicker,
  html.design-b .zh .ca-monolith-kicker,
  html.design-b .zh .hero-eyebrow {
    letter-spacing: 0;
  }
  html.design-b .cap b,
  html.design-b .prod .pinfo .bnm,
  html.design-b .brow .bc {
    font-size: 10px !important;
  }
  html.design-b .cap span {
    font-size: 11px;
  }
}

/* ---- Hero. Same slides, no caption, no counter, no "View this bag". ---- */
/* Desktop: lock first screen to exactly one viewport (header + hero). No By Scene tail. */
html.design-b .home .hero-v2 {
  --bar-h: 64px;
  --hero-pad-top: 28px;
  --hero-pad-bottom: 28px;
  --foot-h: 36px;
  --plate-h: calc(100svh - var(--bar-h) - var(--hero-pad-top) - var(--hero-pad-bottom) - var(--foot-h));
  --plate-h: calc(100dvh - var(--bar-h) - var(--hero-pad-top) - var(--hero-pad-bottom) - var(--foot-h));
  box-sizing: border-box;
  min-height: calc(100svh - var(--bar-h)) !important;
  min-height: calc(100dvh - var(--bar-h)) !important;
  height: calc(100svh - var(--bar-h)) !important;
  height: calc(100dvh - var(--bar-h)) !important;
  max-height: calc(100svh - var(--bar-h)) !important;
  max-height: calc(100dvh - var(--bar-h)) !important;
  padding: var(--hero-pad-top) var(--m) var(--hero-pad-bottom) !important;
  margin: 0 !important;
  background: #ffffff;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}
html.design-b .home .hero-v2 .hero-row {
  align-items: end !important;
  gap: 40px !important;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
@media (min-width: 901px) {
  html.design-b .home .hero-v2 .hero-row {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
    height: 100%;
  }
}
html.design-b .home .hero-v2 .hero-copy {
  transform: none !important;
  align-self: end !important;
  padding-bottom: 8px;
}
html.design-b .home .hero-v2 .hero-obj,
html.design-b .home .hero-v2 .hero-carousel {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
html.design-b .home .hero-carousel .hero-track {
  flex: 1 1 auto;
  min-height: 0;
}
html.design-b .home .hero-carousel .hero-slide > a,
html.design-b .home .hero-image-viewport {
  height: var(--plate-h);
  min-height: 256px;
  max-height: 100%;
  background: #ffffff;
}
html.design-b .home .hero-caption,
html.design-b .home .hero-name,
html.design-b .home .hero-brand,
html.design-b .home .hero-model,
html.design-b .home .hero-reason,
html.design-b .home .hero-bag-link,
html.design-b .home .hero-ctl .num,
html.design-b .home .hero-foot [data-cur] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html.design-b .home .hero-foot {
  position: static;
  border: 0;
  margin-top: 4px;
  height: var(--foot-h);
  min-height: var(--foot-h);
  max-height: var(--foot-h);
  justify-content: flex-end;
  flex: 0 0 auto;
}
html.design-b .home .hero-ctl button {
  color: #242820;
  font-size: 18px;
}
@media (max-width: 700px) {
  /* Stacked mobile: do not force one-screen lock. */
  html.design-b .home .hero-v2 {
    --plate-h: 280px;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding: 28px var(--m) 48px !important;
    overflow: visible !important;
    display: block !important;
  }
  html.design-b .home .hero-v2 .hero-row {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    height: auto;
  }
  html.design-b .home .hero-carousel .hero-slide > a,
  html.design-b .home .hero-image-viewport {
    min-height: 280px;
  }
  html.design-b .home .hero-foot {
    height: auto;
    max-height: none;
  }
}

/* ---- Home rhythm. Sections stay; the pauses get longer. ---- */
html.design-b .home .scene-sec {
  padding: 120px var(--m) 40px;
}
html.design-b .home .scene-sec .sh,
html.design-b .home .scene-sh {
  margin-bottom: 36px;
}
html.design-b .home .types {
  margin-top: 120px;
  background: #ffffff;
  padding: 8px var(--m) 24px;
  border-top: 1px solid #deded8;
}
html.design-b .home .night {
  margin-top: 80px;
}
html.design-b .home .stmt {
  padding: 140px var(--m) 220px;
}
html.design-b .home .night .head {
  color: var(--night-ink) !important;
}
html.design-b .home .ca-monolith-kicker {
  color: var(--night-quiet);
}
@media (max-width: 700px) {
  html.design-b .home .scene-sec {
    padding: 72px var(--m) 24px;
  }
  html.design-b .home .types {
    margin-top: 64px;
    padding-left: var(--m);
    padding-right: var(--m);
  }
  html.design-b .home .stmt {
    padding: 80px var(--m) 120px;
  }
  html.design-b .home .night {
    margin-top: 48px;
  }
}

/* Category block: names on the left, every thumb in one bottom-aligned row. */
html.design-b .home .types .trow {
  display: grid !important;
  grid-template-columns: minmax(200px, 1fr) auto !important;
  align-items: end !important;
  gap: 40px !important;
  padding: 28px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #deded8;
  background: #ffffff;
}
html.design-b .home .types .trow .t {
  font-size: 40px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35em;
  max-width: 12em;
}
html.design-b .zh .home .types .trow .t {
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
}
html.design-b .home .types .trow .t sup,
html.design-b .home .types .trow .num {
  font-family: var(--f) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #6a6c62 !important;
  transform: none !important;
  font-variant-numeric: tabular-nums;
}
html.design-b .home .types .trow .th {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
}
html.design-b .home .types .trow .th .pic {
  display: block !important;
  position: relative !important;
  width: 168px !important;
  height: 168px !important;
  flex: 0 0 168px !important;
  max-width: none;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ffffff !important;
}
html.design-b .home .types .trow .th .pic img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  flex: none !important;
  max-width: none;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: #ffffff !important;
  padding: 0 !important;
  margin: 0;
  mix-blend-mode: normal !important;
}
@media (max-width: 700px) {
  html.design-b .home .types .trow {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 22px 0 !important;
  }
  html.design-b .home .types .trow .t {
    font-size: 30px !important;
    max-width: none;
  }
  html.design-b .home .types .trow .th {
    width: 100%;
    justify-content: stretch;
    gap: 8px;
  }
  html.design-b .home .types .trow .th .pic {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 128px !important;
  }
  html.design-b .home .types .trow .th .pic img {
    width: 100% !important;
    height: 100% !important;
  }
}

/* Scene and catalogue cards. Do not override baseline.js transforms. */
html.design-b .scene-tab {
  font-family: var(--f);
  font-size: 13px;
  border-radius: 0;
  border-color: #deded8;
  background: #ffffff;
  color: #6a6c62;
}
html.design-b .scene-tab.is-active {
  background: #242820;
  border-color: #242820;
  color: #ffffff;
}
html.design-b .home .scene-sec .cap,
html.design-b .home .card .cap {
  display: none !important;
}

/* Discover: keep 4 / 2 columns and the existing 80% category titles.
   Colour, family, and page-title scale only. */
html.design-b main.dv .trow .t {
  font-family: var(--display) !important;
  font-weight: 400 !important;
  font-stretch: 100% !important;
  color: #242820;
}
/* Row titles use the section scale so they stay under the 52px Discover title
   and within the 0.25 image ratio. Column count is untouched (4 / 2). */
@media (min-width: 701px) {
  html.design-b main.dv .trow .t {
    font-size: 40px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.045em !important;
  }
  html.design-b .zh main.dv .trow .t {
    letter-spacing: 0 !important;
    line-height: 1.35 !important;
  }
}
html.design-b .zh main.dv .trow .t {
  font-family: var(--display-zh) !important;
  letter-spacing: 0 !important;
}
html.design-b main.dv .types {
  background: #ffffff;
  padding-left: var(--m);
  padding-right: var(--m);
}
html.design-b main.dv .trow {
  border-bottom: 1px solid #deded8;
  align-items: end;
}
html.design-b main.dv .ph {
  padding-left: var(--m);
  padding-right: var(--m);
}
html.design-b main.dv .sec {
  padding-left: var(--m);
  padding-right: var(--m);
}

/* Archive grids, brand rows, product pages. */
html.design-b .filters {
  background: #ffffff;
  border-bottom: 1px solid #deded8;
  gap: 8px;
}
html.design-b .filters button {
  font-family: var(--f);
  font-size: 13px;
  background: #ffffff;
  color: #242820;
  border: 1px solid #deded8;
  border-radius: 0;
}
html.design-b .filters button[aria-pressed="true"] {
  background: #242820;
  color: #ffffff;
  border-color: #242820;
}
html.design-b .filters button i {
  color: #6a6c62;
  font-variant-numeric: tabular-nums;
}
html.design-b .filters button[aria-pressed="true"] i {
  color: #ffffff;
}
@media (max-width: 700px) {
  html.design-b .filters button,
  html.design-b .scene-tab {
    font-size: 12px;
  }
}

html.design-b .brow,
html.design-b .brow:nth-child(even) {
  background: #ffffff !important;
  border-bottom: 1px solid #deded8;
  align-items: end;
}
html.design-b .brow .bn {
  font-family: var(--display) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  font-stretch: 100% !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
  color: #242820 !important;
}
html.design-b .zh .brow .bn {
  font-family: var(--display-zh) !important;
  letter-spacing: 0 !important;
}
@media (max-width: 700px) {
  html.design-b .brow .bn {
    font-size: 26px !important;
  }
}
html.design-b .brow .bt {
  align-items: end !important;
}
html.design-b .pic,
html.design-b .pgal figure,
html.design-b .prod .pgal figure.ca-pgal-main {
  background: #ffffff !important;
}
html.design-b .prod .pinfo .bnm {
  color: #6a6c62 !important;
}
html.design-b .spec,
html.design-b .spec > div,
html.design-b .prod .spec.ca-spec-grid4,
html.design-b .prod .spec.ca-spec-grid4 > div {
  border-color: #deded8 !important;
}
html.design-b .spec dt,
html.design-b .prod .spec.ca-spec-grid4 dt,
html.design-b .small,
html.design-b .pnote {
  color: #6a6c62;
}
html.design-b .act,
html.design-b .act.ink,
html.design-b .more button {
  background: #242820;
  color: #ffffff;
  border-radius: 0;
  font-family: var(--f);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
html.design-b .link {
  font-weight: 500;
  text-underline-offset: 4px;
}

/* Count tabs stay. Quiet rule, tabular figures. */
html.design-b .ca-count-tabs {
  border: 1px solid #deded8;
  border-radius: 0;
  font-family: var(--f);
  font-size: 12px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
html.design-b .ca-count-tab {
  padding: 0.35em 0.7em;
  color: #6a6c62;
}
html.design-b .ca-count-tab + .ca-count-tab {
  border-left: 1px solid #deded8;
}
html.design-b .ca-count-tab b {
  color: #242820;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
html.design-b .ca-count-tab:hover {
  background: #f7f7f4;
  color: #242820;
}

html.design-b .ft {
  background: #ffffff;
  color: #242820;
  border-top: 1px solid #deded8;
}
html.design-b .ft a {
  color: inherit;
}
html.design-b .num,
html.design-b sup,
html.design-b .ca-mm-item small,
html.design-b .filters button i,
html.design-b .ca-count-tab b {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html.design-b *,
  html.design-b *::before,
  html.design-b *::after {
    transition: none !important;
    animation: none !important;
  }
}