/* NOIR's three collection pages. No homepage, detail page or CAFÉ rules. */
@font-face { font-family: "Collection Editorial"; src: url("fonts/cormorant-garamond-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
.commerce-page :is(.collection-brand-wordmark, .collection-footer-brand, .noir-product-only) { display: none; }
:root[data-look="noir"] body.commerce-page {
  --bg: #efebe2; --bg-soft: #e4e5db; --surface: #fffcf6; --text: #30362d; --text-dim: #61695b;
  --gold: #59634f; --gold-soft: #59634f; --line: #30362d1c; --line-strong: #30362d30;
  --commerce-max: 1200px; --commerce-gutter: clamp(20px,4vw,56px); --commerce-radius: 24px;
  --commerce-head: "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  --commerce-sans: "Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --commerce-accent: #59634f;
  background: var(--bg); color: var(--text); font-family: var(--commerce-sans); -webkit-font-smoothing: antialiased;
}
:root[data-look="noir"] body.commerce-page::before,
:root[data-look="noir"] body.commerce-page::after { display: none; }
:root[data-look="noir"] .commerce-page .page { padding: 84px 0 0; }
:root[data-look="noir"] .commerce-page :is(p,h1,h2,h3,a,button) { line-break: strict; word-break: normal; overflow-wrap: break-word; }
:root[data-look="noir"] .commerce-page :is(section[id],main[id]) { scroll-margin-top: 110px; }
:root[data-look="noir"] .commerce-page :is(button,a) { -webkit-tap-highlight-color: transparent; }
:root[data-look="noir"] .commerce-page :is(button,a):focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
:root[data-look="noir"] .commerce-page .commerce-skip { background: #30362d; color: #f5f0e5; border-radius: 999px; }
:root[data-look="noir"] .commerce-page .copy-formatted { text-wrap: wrap; }
:root[data-look="noir"] .commerce-page .noir-product-only { display: block; }
:root[data-look="noir"] .commerce-page .cafe-product-only { display: none; }

/* The approved wordmark, quiet navigation and a lighter mobile toolbar. */
:root[data-look="noir"] .commerce-page .header,
:root[data-look="noir"] .commerce-page .header.is-scrolled { background: #252922; color: #f5f0e5; border: 0; backdrop-filter: none; overflow: visible; box-shadow: 0 3px 15px #1111; }
:root[data-look="noir"] .commerce-page .header__inner { gap: 26px; min-height: 82px; max-width: 1440px; margin: auto; padding: 0 40px; }
:root[data-look="noir"] .commerce-page .header .brand { position: static; order: -2; display: flex; flex-shrink: 0; align-items: center; padding: 0; color: #f5f0e5; transform: none; font-size: 18px; }
:root[data-look="noir"] .commerce-page .collection-brand-text { display: none; }
:root[data-look="noir"] .commerce-page .collection-brand-wordmark { display: block; width: 165px; height: auto; }
:root[data-look="noir"] .commerce-page .header__left { order: 2; margin-left: 0; }
:root[data-look="noir"] .commerce-page .header__actions { display: flex; order: 3; gap: 3px; }
:root[data-look="noir"] .commerce-page .header :is(.theme-toggle,.commerce-header-store) { display: none; }
:root[data-look="noir"] .commerce-page .header :is(.icon-btn,.login-btn,.logout-btn) { color: #f5f0e5; border: 0; border-radius: 999px; }
:root[data-look="noir"] .commerce-page .header .icon-btn { position: relative; inset: auto; transform: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; padding: 8px; }
:root[data-look="noir"] .commerce-page .header .icon-btn.theme-toggle { display: none; }
:root[data-look="noir"] .commerce-page .header :is(.icon-btn,.login-btn):hover { background: #ffffff0c; color: #f5f0e5; }
:root[data-look="noir"] .commerce-page .header__mypage { padding: 9px 12px; font-size: 10px; letter-spacing: .1em; }
:root[data-look="noir"] .commerce-page .icon-count { background: #e6dcc6; color: #30362d; }
:root[data-look="noir"] .commerce-page .nav-toggle { display: none; }
:root[data-look="noir"] .commerce-page .nav { position: static; display: flex; flex: 1; flex-direction: row; align-items: center; justify-content: center; width: auto; height: auto; gap: clamp(28px,3.4vw,50px); padding: 0; background: transparent; border: 0; backdrop-filter: none; transform: none; visibility: visible; }
:root[data-look="noir"] .commerce-page .nav__link { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; color: #eee8dc; line-height: 1; text-align: center; }
:root[data-look="noir"] .commerce-page .nav__en { display: block; font: italic 600 13px/1.1 "Collection Editorial",Georgia,serif; letter-spacing: .06em; }
:root[data-look="noir"] .commerce-page .nav__en::after { bottom: -6px; background: #e9cc9e; }
:root[data-look="noir"] .commerce-page .nav__sub { margin: 9px 0 0; color: #c9c5ba; font: 400 9px/1.4 var(--commerce-head); letter-spacing: .08em; white-space: nowrap; }
:root[data-look="noir"] .commerce-page .nav__link:is(:hover,.is-current) { color: #e9cc9e; text-decoration: none; }
:root[data-look="noir"] .commerce-page .nav :is(.nav__login,.nav__logout) { display: none; }

/* Compact page introductions: orientation before the actual collection. */
:root[data-look="noir"] .commerce-page .commerce-intro { grid-template-columns: 1.2fr 1fr; gap: clamp(36px,6vw,90px); padding: 55px 0 48px; border: 0; }
:root[data-look="noir"] .commerce-page .commerce-kicker { margin-bottom: 18px; color: #65705b; font: italic 400 28px/1.3 "Collection Editorial",Georgia,serif; letter-spacing: .01em; }
:root[data-look="noir"] .commerce-page .commerce-intro h1 { font-family: var(--commerce-head); font-size: clamp(30px,3.1vw,43px); font-weight: 500; letter-spacing: .045em; line-height: 1.65; }
:root[data-look="noir"] .commerce-page .commerce-intro__lead { margin-top: 22px; font-size: 14px; line-height: 2.1; color: #626b59; letter-spacing: .025em; }
:root[data-look="noir"] .commerce-page .commerce-intro__note { margin-top: 12px; font-size: 12px; color: #626b59; letter-spacing: .025em; }
:root[data-look="noir"] .commerce-page .commerce-intro__media { border-radius: 24px; background: #d8d8cc; }
:root[data-look="noir"] .commerce-page .commerce-intro__media img { aspect-ratio: 1.85; object-fit: cover; }
:root[data-look="noir"] .commerce-page--item .commerce-intro__media img { max-height: 230px; aspect-ratio: 2.1; }
:root[data-look="noir"] .commerce-page .commerce-link { gap: 16px; min-height: 58px; padding: 7px 7px 7px 22px; border: 0; border-radius: 999px; background: #343a31; color: #fffaf0; font-size: 12px; transition: background .25s ease,transform .25s ease; }
:root[data-look="noir"] .commerce-page .commerce-link > span { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #eee6d6; color: #252922; font: 20px/1 Arial,sans-serif; }
:root[data-look="noir"] .commerce-page .commerce-link:hover { background: #495142; color: #fffaf0; transform: translateY(-1px); }
:root[data-look="noir"] .commerce-page :is(.commerce-section-head h2,.journal-values h2,.news-shop-bridge h2) { font-family: var(--commerce-head); font-weight: 500; font-size: 28px; letter-spacing: .035em; line-height: 1.7; }
:root[data-look="noir"] .commerce-page .commerce-section-head p { color: #626b59; font-size: 13px; line-height: 2; }
:root[data-look="noir"] .commerce-page :is(.shop,.news,.journal) { padding-block: 36px 72px; }

/* Photo, name, description, price and action follow one reading order. */
:root[data-look="noir"] .commerce-page--item .shop { border-top: 1px solid #30362d21; }
:root[data-look="noir"] .commerce-page .commerce-section-head--catalog { align-items: baseline; margin-bottom: 24px; }
:root[data-look="noir"] .commerce-page .collection-count { color: #67705f; font-size: 12px; }
:root[data-look="noir"] .commerce-page .filters { display: flex; flex-wrap: wrap; align-items: stretch; max-width: none; gap: 10px; margin-bottom: 34px; }
:root[data-look="noir"] .commerce-page .filter { min-height: 52px; padding: 10px 23px; border: 1px solid #30362d28; border-radius: 999px; background: transparent; color: #59634f; font-size: 13px; line-height: 1.55; transition: color .25s ease,background .25s ease,border-color .25s ease; }
:root[data-look="noir"] .commerce-page .filter small { margin-top: 4px; font-size: 10px; }
:root[data-look="noir"] .commerce-page .filter.is-active { background: #343a31; border-color: #343a31; color: #fffaf0; }
:root[data-look="noir"] .commerce-page .filter:hover:not(.is-active) { background: #e4e5db; border-color: #65705b; }
:root[data-look="noir"] .commerce-page .grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px 26px; }
:root[data-look="noir"] .commerce-page .card { padding: 10px; border: 0; border-radius: 24px; background: #fffcf6; box-shadow: 0 7px 24px #343a3107; transition: box-shadow .3s ease; }
:root[data-look="noir"] .commerce-page .card.is-in:hover { border: 0; box-shadow: 0 12px 28px #343a3112; transform: none; }
:root[data-look="noir"] .commerce-page .card__media { aspect-ratio: 1.18; border-radius: 18px; background: #e4dfd4; }
:root[data-look="noir"] .commerce-page .card__img { object-fit: cover; transition: transform .75s ease; }
:root[data-look="noir"] .commerce-page .card__media:hover .card__img { transform: scale(1.025); }
:root[data-look="noir"] .commerce-page .card__tag { top: 13px; left: 13px; padding: 7px 12px; background: #fcf8edee; color: #424d39; font-size: 10px; letter-spacing: .03em; }
:root[data-look="noir"] .commerce-page .card__tag--muted { background: #343a31e8; color: #fffaf0; }
:root[data-look="noir"] .commerce-page .card__body { padding: 22px 14px 12px; }
:root[data-look="noir"] .commerce-page .card__head { display: contents; }
:root[data-look="noir"] .commerce-page .card__name { order: 1; font: 500 20px/1.65 var(--commerce-head); letter-spacing: .015em; }
:root[data-look="noir"] .commerce-page .card__name a { display: block; }
:root[data-look="noir"] .commerce-page .card__desc { order: 3; margin: 13px 0 12px; color: #626b59; font-size: 13px; line-height: 2; letter-spacing: .015em; }
:root[data-look="noir"] .commerce-page .card__spec { order: 4; margin: 0 0 20px; color: #697260; font-size: 11px; line-height: 1.9; }
:root[data-look="noir"] .commerce-page .card__spec a { text-underline-offset: 4px; }
:root[data-look="noir"] .commerce-page .card__price { order: 2; margin: 7px 0 0; font: 500 29px/1.25 "Collection Editorial",Georgia,serif; letter-spacing: .005em; color: #30362d; }
:root[data-look="noir"] .commerce-page .card__price small { font: 10px/1.5 var(--commerce-sans); margin-left: 5px; color: #697260; }
:root[data-look="noir"] .commerce-page .card__foot { order: 5; margin: auto 0 0; padding: 0; border: 0; }
:root[data-look="noir"] .commerce-page .card__actions { display: flex; gap: 14px; align-items: center; }
:root[data-look="noir"] .commerce-page :is(.card__detail,.card__add) { width: auto; min-width: 0; min-height: 46px; font: 400 12px/1.6 var(--commerce-sans); letter-spacing: 0; white-space: nowrap; transition: background .25s ease,color .25s ease; }
:root[data-look="noir"] .commerce-page .card__detail { flex: 0 0 auto; padding: 8px 2px; border: 0; border-radius: 0; background: none; color: #4e5d44; text-decoration: underline; text-underline-offset: 5px; }
:root[data-look="noir"] .commerce-page .card__add { flex: 1; padding: 11px 15px; border: 0; border-radius: 999px; background: #343a31; color: #fffaf0; }
:root[data-look="noir"] .commerce-page .card__add:hover:not(:disabled) { background: #495142; color: #fffaf0; }
:root[data-look="noir"] .commerce-page .card__add:disabled { border: 0; background: #e8e8df; color: #767d6f; }
:root[data-look="noir"] .commerce-page .collection-empty { padding: 40px 28px; border-radius: 24px; background: #fffcf6; color: #626b59; font-size: 14px; }
:root[data-look="noir"] .commerce-page .commerce-assurance { width: min(calc(100% - 2 * var(--commerce-gutter)),var(--commerce-max)); margin: 0 auto 72px; padding: 30px 36px; border: 0; border-radius: 24px; background: #e2e4d8; color: #4f5e45; }
:root[data-look="noir"] .commerce-page .commerce-assurance p { font-size: 13px; line-height: 2; }
:root[data-look="noir"] .commerce-page .commerce-assurance > div { gap: 14px 24px; }
:root[data-look="noir"] .commerce-page .commerce-assurance a { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; text-underline-offset: 5px; }

/* The same quiet finish as the NOIR homepage, retaining all existing links. */
:root[data-look="noir"] .commerce-page .footer { width: 100%; max-width: none; margin: 0; padding: 58px 24px 28px; border: 0; background: #191e18; color: #f5f0e5; text-align: center; }
:root[data-look="noir"] .commerce-page .collection-footer-brand { display: flex; flex-direction: column; gap: 22px; align-items: center; width: max-content; max-width: 100%; margin: 0 auto 32px; }
:root[data-look="noir"] .commerce-page .collection-footer-mark { width: 60px; height: 60px; }
:root[data-look="noir"] .commerce-page .collection-footer-wordmark { width: 234px; height: auto; }
:root[data-look="noir"] .commerce-page .footer__links { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 1000px; margin-inline: auto; gap: 8px 28px; }
:root[data-look="noir"] .commerce-page .footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: #cfcec2; font-size: 11px; letter-spacing: .015em; }
:root[data-look="noir"] .commerce-page .footer__social { justify-content: center; gap: 14px; margin-block: 15px; }
:root[data-look="noir"] .commerce-page .footer__social-icon { align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #dedbce; }
:root[data-look="noir"] .commerce-page .footer__copy { margin-top: 25px; color: #aaaE9f; font-size: 9px; }
:root[data-look="noir"] .commerce-page .look-switch { box-shadow: none; background: #282e24; border-color: #ffffff20; margin-top: 20px; }
:root[data-look="noir"] .commerce-page .page-loader { background: #22271fe8; }

@media (max-width: 1100px) {
  :root[data-look="noir"] .commerce-page .header__inner { gap: 15px; padding-inline: 28px; }
  :root[data-look="noir"] .commerce-page .collection-brand-wordmark { width: 166px; }
  :root[data-look="noir"] .commerce-page .nav { gap: 23px; }
  :root[data-look="noir"] .commerce-page .nav__en { font-size: 12px; }
  :root[data-look="noir"] .commerce-page .nav__sub { font-size: 8px; }
  :root[data-look="noir"] .commerce-page .header__mypage { padding-inline: 7px; }
  :root[data-look="noir"] .commerce-page .commerce-intro h1 { font-size: 33px; }
}
@media (max-width: 1050px) {
  :root[data-look="noir"] .commerce-page .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  :root[data-look="noir"] .commerce-page .page { padding-top: 68px; }
  :root[data-look="noir"] .commerce-page .header__inner { min-height: 68px; gap: 7px; padding: 10px 24px; }
  :root[data-look="noir"] .commerce-page .header__actions { order: 1; margin-left: auto; gap: 1px; }
  :root[data-look="noir"] .commerce-page .header__left { order: 2; }
  :root[data-look="noir"] .commerce-page .header__mypage { display: none; }
  :root[data-look="noir"] .commerce-page .nav-toggle { position: relative; z-index: 51; display: flex; align-items: center; justify-content: center; width: 42px; height: 44px; padding: 10px; border: 0; border-radius: 50%; }
  :root[data-look="noir"] .commerce-page .nav-toggle span { width: 22px; background: #f5f0e5; }
  :root[data-look="noir"] .commerce-page .nav { position: fixed; inset: 68px 0 0 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: min(420px,100%); height: calc(100dvh - 68px); padding: 28px 32px 40px; border: 0; background: #22271f; transform: translateX(100%); visibility: hidden; overflow: auto; transition: transform .35s ease,visibility .35s; }
  :root[data-look="noir"] .commerce-page .nav.is-open { transform: none; visibility: visible; }
  :root[data-look="noir"] .commerce-page .nav__link { align-items: flex-start; min-height: 88px; padding: 16px 0; border-bottom: 1px solid #f5f0e522; text-align: left; }
  :root[data-look="noir"] .commerce-page .nav__en { font-size: 25px; }
  :root[data-look="noir"] .commerce-page .nav__sub { margin-top: 7px; font: 400 11px/1.6 var(--commerce-head); letter-spacing: .08em; white-space: normal; }
  :root[data-look="noir"] .commerce-page .nav :is(.nav__login,.nav__logout) { display: inline-flex; align-self: flex-start; min-height: 44px; margin-top: 24px; padding: 9px 20px; border: 0; border-radius: 999px; background: #ffffff0c; color: #f5f0e5; font-size: 12px; }
  :root[data-look="noir"] .commerce-page .header .header__logout { display: none; }
}
@media (max-width: 760px) {
  :root[data-look="noir"] .commerce-page .commerce-intro { grid-template-columns: minmax(0,1fr); gap: 25px; padding-block: 32px; }
  :root[data-look="noir"] .commerce-page .commerce-intro h1 { font-size: 29px; letter-spacing: .035em; }
  :root[data-look="noir"] .commerce-page .commerce-kicker { margin-bottom: 13px; font-size: 25px; }
  :root[data-look="noir"] .commerce-page .commerce-intro__lead { display: block; margin-top: 15px; font-size: 13px; line-height: 2; }
  :root[data-look="noir"] .commerce-page .commerce-intro__note { margin-top: 7px; font-size: 11px; }
  :root[data-look="noir"] .commerce-page .commerce-intro--item { padding-block: 24px; }
  :root[data-look="noir"] .commerce-page .commerce-intro--item .commerce-intro__lead { display: none; }
  :root[data-look="noir"] .commerce-page .commerce-intro--item .commerce-intro__media { display: none; }
  :root[data-look="noir"] .commerce-page :is(.shop,.news,.journal) { padding-block: 29px 48px; }
  :root[data-look="noir"] .commerce-page .commerce-section-head--catalog { margin-bottom: 18px; }
  :root[data-look="noir"] .commerce-page .commerce-section-head h2 { font-size: 25px; }
  :root[data-look="noir"] .commerce-page .filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 26px; }
  :root[data-look="noir"] .commerce-page .filter { padding: 10px 12px; min-height: 44px; font-size: 12px; }
  :root[data-look="noir"] .commerce-page .filter small { display: none; }
  :root[data-look="noir"] .commerce-page .grid { gap: 24px 18px; }
  :root[data-look="noir"] .commerce-page .card__body { padding: 18px 10px 10px; }
  :root[data-look="noir"] .commerce-page .card__name { font-size: 19px; }
  :root[data-look="noir"] .commerce-page .card__actions { gap: 11px; }
  :root[data-look="noir"] .commerce-page :is(.card__add,.card__detail) { font-size: 11px; }
  :root[data-look="noir"] .commerce-page .commerce-assurance { padding: 24px; margin-bottom: 48px; }
  :root[data-look="noir"] .commerce-page .commerce-assurance > div { display: flex; flex-wrap: wrap; gap: 4px 20px; }
}
@media (max-width: 620px) {
  :root[data-look="noir"] .commerce-page .grid { grid-template-columns: minmax(0,1fr); }
  :root[data-look="noir"] .commerce-page .card { padding: 9px; }
  :root[data-look="noir"] .commerce-page .card__media { aspect-ratio: 1.42; }
  :root[data-look="noir"] .commerce-page .card__body { padding: 18px 13px 13px; }
  :root[data-look="noir"] .commerce-page .card__name { font-size: 21px; }
  :root[data-look="noir"] .commerce-page .card__desc { margin-top: 12px; }
  :root[data-look="noir"] .commerce-page .card__price { margin-bottom: 0; }
  :root[data-look="noir"] .commerce-page :is(.card__add,.card__detail) { font-size: 12px; }
  :root[data-look="noir"] .commerce-page .header__inner { padding-inline: 18px; gap: 5px; }
  :root[data-look="noir"] .commerce-page .collection-brand-wordmark { width: clamp(142px,43vw,174px); }
  :root[data-look="noir"] .commerce-page .header__actions { gap: 0; }
  :root[data-look="noir"] .commerce-page .footer { padding: 45px 20px 24px; }
  :root[data-look="noir"] .commerce-page .footer__links { gap: 5px 22px; }
}
@media (max-width: 360px) {
  :root[data-look="noir"] .commerce-page .header__inner { padding-inline: 16px; gap: 3px; }
  :root[data-look="noir"] .commerce-page .header .icon-btn { width: 36px; }
  :root[data-look="noir"] .commerce-page .commerce-intro h1 { font-size: 26px; }
  :root[data-look="noir"] .commerce-page .card__name { font-size: 20px; }
  :root[data-look="noir"] .commerce-page .card__actions { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-look="noir"] .commerce-page *,
  :root[data-look="noir"] .commerce-page *::before,
  :root[data-look="noir"] .commerce-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* The NOIR collection pages use the homepage header as the same component. */
.collection-noir-header { display: none; }
:root[data-look="noir"] .commerce-page .collection-shared-header,
:root[data-look="noir"] .commerce-page .collection-shared-header + .nav-overlay { display: none; }
:root[data-look="noir"] .commerce-page .page { padding-top: 82px; }
:root[data-look="noir"] .commerce-page .collection-noir-header {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 82px;
  padding-inline: max(36px,calc((100% - 1280px)/2));
  color: #f5f0e5;
  background: #252922f5;
  backdrop-filter: blur(14px);
  box-shadow: 0 3px 12px #1111;
}
:root[data-look="noir"] .commerce-page .noir-header__brand { flex-shrink: 0; width: 187px; }
:root[data-look="noir"] .commerce-page .noir-header__brand img { display: block; width: 100%; height: auto; }
:root[data-look="noir"] .commerce-page .noir-header__nav { display: flex; align-items: center; align-self: stretch; gap: clamp(22px,3vw,48px); }
:root[data-look="noir"] .commerce-page .noir-header__nav a { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 72px; min-height: 100%; color: inherit; white-space: nowrap; text-decoration: none; }
:root[data-look="noir"] .commerce-page .noir-header__nav a span { position: relative; font: italic 600 18px/1.1 "Collection Editorial",Georgia,serif; letter-spacing: .015em; }
:root[data-look="noir"] .commerce-page .noir-header__nav a span::after { content: ""; position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: #d3a764; transform: scaleX(0); transform-origin: center; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
:root[data-look="noir"] .commerce-page .noir-header__nav a small { margin-top: 7px; color: #c9c5ba; font: 400 9px/1.4 var(--commerce-head); letter-spacing: .08em; }
:root[data-look="noir"] .commerce-page .noir-header__nav a:hover,
:root[data-look="noir"] .commerce-page .noir-header__nav a[aria-current="page"] { color: #e9cc9e; }
:root[data-look="noir"] .commerce-page .noir-header__nav a:hover span::after,
:root[data-look="noir"] .commerce-page .noir-header__nav a[aria-current="page"] span::after { transform: scaleX(1); }
:root[data-look="noir"] .commerce-page .noir-header__actions { display: flex; flex: none; align-items: center; gap: 28px; margin-right: -28px; }
:root[data-look="noir"] .commerce-page .noir-menu-toggle { display: inline-flex; flex: none; align-items: center; justify-content: space-between; gap: 15px; min-width: 120px; min-height: 44px; padding: 10px 15px; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font: 11px/1.5 var(--commerce-sans); transition: background .3s; }
:root[data-look="noir"] .commerce-page .noir-menu-toggle:hover { background: #ffffff12; }
:root[data-look="noir"] .commerce-page .noir-menu-toggle i { width: 24px; height: 9px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
:root[data-look="noir"] .commerce-page .noir-cart-link { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 72px; min-height: 44px; padding-inline: 7px; gap: 8px; border-radius: 999px; color: inherit; text-decoration: none; }
:root[data-look="noir"] .commerce-page .noir-cart-link span { font-size: 10px; }
:root[data-look="noir"] .commerce-page .noir-cart-link:hover { background: #ffffff10; }

:root[data-look="noir"] .collection-noir-menu { width: 100%; max-width: none; height: 100%; max-height: none; inset: 0; margin: 0; padding: 0; border: 0; color: #f5f0e5; background: #22271f; }
:root[data-look="noir"] .collection-noir-menu[open] { display: grid; grid-template-columns: 44% 1fr; }
:root[data-look="noir"] .collection-noir-menu::backdrop { background: #111b; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__close { position: absolute; z-index: 2; top: 27px; right: 35px; display: flex; align-items: center; gap: 17px; min-height: 46px; padding: 8px 18px; border: 0; border-radius: 999px; color: inherit; background: #ffffff0d; font: 12px/1.5 var(--commerce-sans); cursor: pointer; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__close span { font: 25px/1 Arial,sans-serif; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__visual { position: relative; overflow: hidden; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50%; opacity: .58; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__visual > div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__visual > div img { width: 77px; height: 77px; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__visual p { color: #f5f0e5; font: 20px/1.8 var(--commerce-head); letter-spacing: .04em; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__links { display: flex; flex-direction: column; justify-content: safe center; padding: 98px clamp(40px,7vw,112px) 45px; overflow: auto; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__links > a { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 10px; border-bottom: 1px solid #ffffff19; border-radius: 12px; color: inherit; text-decoration: none; transition: background .3s; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__links > a:hover { background: #ffffff08; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__label { display: flex; flex-direction: column; gap: 5px; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__label strong { font: italic 600 clamp(25px,2.4vw,34px)/1.1 "Collection Editorial",Georgia,serif; letter-spacing: .02em; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__label small { color: #c9c5ba; font: 400 11px/1.6 var(--commerce-head); letter-spacing: .08em; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__arrow { font: 20px/1 Arial,sans-serif; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__links > div { display: flex; flex-wrap: wrap; gap: 12px 27px; margin-top: 29px; }
:root[data-look="noir"] .collection-noir-menu .noir-menu__links > div > a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-size: 12px; text-decoration: none; }

@media (max-width: 1100px) {
  :root[data-look="noir"] .commerce-page .collection-noir-header { gap: 20px; padding-inline: 28px; }
  :root[data-look="noir"] .commerce-page .noir-header__brand { width: 155px; }
  :root[data-look="noir"] .commerce-page .noir-header__nav { gap: 18px; }
  :root[data-look="noir"] .commerce-page .noir-header__actions { gap: 14px; margin-right: 0; }
  :root[data-look="noir"] .commerce-page .noir-header__actions :is(.noir-menu-toggle span,.noir-cart-link span) { display: none; }
  :root[data-look="noir"] .commerce-page .noir-menu-toggle { justify-content: center; width: 54px; min-width: 54px; padding-inline: 15px; }
  :root[data-look="noir"] .commerce-page .noir-cart-link { width: 44px; min-width: 44px; padding-inline: 0; }
}
@media (max-width: 800px) {
  :root[data-look="noir"] .commerce-page .page { padding-top: 66px; }
  :root[data-look="noir"] .commerce-page .collection-noir-header { height: 66px; padding-inline: 24px; }
  :root[data-look="noir"] .commerce-page .noir-header__brand { width: 150px; }
  :root[data-look="noir"] .commerce-page .noir-header__nav { display: none; }
  :root[data-look="noir"] .collection-noir-menu[open] { grid-template-columns: 1fr; }
  :root[data-look="noir"] .collection-noir-menu .noir-menu__visual { display: none; }
  :root[data-look="noir"] .collection-noir-menu .noir-menu__links { padding: 100px 27px 30px; justify-content: flex-start; }
  :root[data-look="noir"] .collection-noir-menu .noir-menu__links > a { padding-block: 18px; }
  :root[data-look="noir"] .collection-noir-menu .noir-menu__close { top: 21px; right: 23px; }
}
@media (max-width: 540px) {
  :root[data-look="noir"] .commerce-page .collection-noir-header { gap: 12px; padding-inline: 20px; }
  :root[data-look="noir"] .commerce-page .noir-header__brand { width: 142px; }
  :root[data-look="noir"] .commerce-page .noir-menu-toggle { padding-inline: 10px; }
}