/* ==========================================================================
   NOIR — 服裝主題皮膚（極簡高級 · 黑白灰 · 全直角 · 無陰影）
   --------------------------------------------------------------------------
   第 1–22 節：noir 自有設計語言（.noir-* 類名，由 noir 佈局／模組使用）。
   第 23 節起：皮膚接管層，全部加 body.noir-body 前綴，覆蓋 aurora 基底
              （custom.css 與佈局內嵌 <style>）沿用的 .clay-* 與通用類名。
   載入順序：custom.css（基底）→ noir.css（本檔，皮膚，後載入）。
   配色鐵律（2026-09-18 用戶拍板修正工作單 #2 的「骨架固定灰階」）：
     A 類＝商家可換，品牌色與骨架色都引用 --clay-*，商家換色時全站跟著走；
     C 類＝白／灰階／半透明遮罩，直接寫（--noir-gray-2／--noir-paper）。
   ========================================================================== */
/* 1. 設計令牌 ---------------------------------------------------------------- */
/* 後台「模板配色／字體／圓角」注入的 --clay-* 寫在 :root，var() 取值時才解析，
   故以下引用 --clay-* 的令牌都會取到商家配色——商家換色時全站跟著走。
   圓角另外走 --clay-radius*：默認直角，後台選「圓角」時由注入值接手（見 config.json 的 radius）。 */
:root {
  /* A 類（商家可換）：品牌色與骨架色都引用 --clay-*。
     --noir-brand 只作小面積點綴——CTA／quick-add／送出鈕（即工作單所稱的 --noir-accent，沿用既有命名）。 */
  --noir-brand: var(--clay-primary, #111114); --noir-brand-hover: var(--clay-primary-hover, #2b2b2f);
  --noir-ink: #111114; --noir-ink-2: #3a3a3d;
  --noir-gray: #6f6f6c;
  /* C 類（不隨換色）：灰階與白，直接寫。 */
  --noir-gray-2: #9c9c98; --noir-paper: #ffffff;
  --noir-line: rgba(0, 0, 0, .11);
  --noir-line-2: rgba(0, 0, 0, .19);
  /* 底色與柔色也走 A 類。 */
  --noir-mist: #f7f7f5; --noir-sand: #f1efec;
  --clay-font-heading: "Noto Serif TC", "Songti TC", "Source Han Serif TC", Georgia, "Times New Roman", serif;
  --clay-font-body: "Noto Sans TC", "PingFang TC", "PingFang HK", "Microsoft JhengHei", -apple-system, sans-serif;
  --noir-font-display: var(--clay-font-heading);
  --noir-font-body: var(--clay-font-body);
  --clay-radius: 0px; --clay-radius-sm: 0px; --clay-radius-xs: 0px; --radius: 0px; --radius-sm: 0px;
  /* 版面節奏（非配色令牌，不隨後台換色變動） */
  --noir-wrap: 1440px; --noir-gutter: 64px; --noir-sec: 96px; --noir-gap: 24px; --noir-header-h: 86px;
  --noir-radius: 0;
}
/* 2. 歸零 -------------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--noir-font-body); font-size: 14px; line-height: 1.7; color: var(--noir-ink-2); background: var(--noir-mist);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img {
  display: block; max-width: 100%; border: 0;
}
a {
  color: inherit; text-decoration: none;
}
button, input, select, textarea {
  font: inherit; color: inherit;
}
ul, ol { list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--noir-font-display); font-weight: 500; color: var(--noir-ink); line-height: 1.25; letter-spacing: .01em;
}
s { text-decoration: line-through; }
.noir-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}
/* 3. 版面容器 ---------------------------------------------------------------- */
.noir-wrap {
  width: 100%; max-width: var(--noir-wrap); margin: 0 auto; padding: 0 var(--noir-gutter);
}
.noir-section { padding: var(--noir-sec) 0; }
.noir-section--tight { padding: 64px 0; }
.noir-section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px;
  border-bottom: 1px solid var(--noir-line); margin-bottom: 40px;
}
.noir-section__title { font-size: 30px; }
.noir-section__sub {
  margin-top: 10px; font-size: 13.5px; color: var(--noir-gray);
}
.noir-eyebrow {
  font-family: var(--noir-font-body); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--noir-gray);
}
.noir-hr {
  height: 1px; background: var(--noir-line); border: 0; margin: 40px 0;
}
/* 4. 文字連結 ---------------------------------------------------------------- */
.noir-link {
  color: var(--noir-ink); border-bottom: 1px solid var(--noir-line-2); padding-bottom: 1px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.noir-link:hover { border-color: var(--noir-brand); }
.noir-more {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--noir-ink); border-bottom: 1px solid var(--noir-line-2); padding-bottom: 3px; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.noir-more:hover { border-color: var(--noir-brand); }
/* 5. 按鈕：基類 -------------------------------------------------------------- */
.noir-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--clay-radius); background: transparent; font-family: var(--noir-font-body); font-size: 13px;
  font-weight: 500; letter-spacing: .1em; color: var(--noir-ink); cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.noir-btn:focus-visible {
  outline: 2px solid var(--noir-brand); outline-offset: 2px;
}
.noir-btn svg { flex: 0 0 auto; }
.noir-btn__arrow { transition: transform .2s; }
/* 5.1 形態一：實心品牌底（選購新品；不加圖示） -------------------------------- */
.noir-btn--primary {
  background: var(--noir-brand); border-color: var(--noir-brand); color: var(--on-brand, #fff);
}
.noir-btn--primary:hover {
  background: var(--noir-brand-hover); border-color: var(--noir-brand-hover);
}
/* 5.2 形態二：實心品牌底 + 左側購物袋圖示（加入購物車） ------------------------ */
.noir-btn--cart {
  background: var(--noir-brand); border-color: var(--noir-brand); color: var(--on-brand, #fff);
}
.noir-btn--cart:hover {
  background: var(--noir-brand-hover); border-color: var(--noir-brand-hover);
}
/* 5.3 形態三：描邊反色（立即購買） ------------------------------------------- */
.noir-btn--buy {
  background: transparent; border-color: var(--noir-brand); color: var(--noir-ink);
}
.noir-btn--buy:hover {
  background: var(--noir-brand); border-color: var(--noir-brand); color: var(--on-brand, #fff);
}
/* 小號：只用於與輸入框同排的次要操作（優惠碼「套用」、價格區間「套用」），高度對齊 46px 輸入框 */
.noir-btn--sm {
  height: 46px; padding: 0 20px; font-size: 12px; letter-spacing: .14em;
}
/* 5.4 形態四：淺灰細邊小號 + 心形（收藏） ------------------------------------ */
.noir-btn--fav {
  height: 40px; padding: 0 18px; font-size: 12px; background: transparent; border-color: var(--noir-line-2);
  color: var(--noir-gray);
}
.noir-btn--fav:hover {
  border-color: var(--noir-brand); color: var(--noir-ink);
}
.noir-btn--fav.is-active {
  border-color: var(--noir-brand); color: var(--noir-ink);
}
.noir-btn--fav.is-active .noir-icon-heart {
  fill: var(--noir-brand); stroke: var(--noir-brand);
}
.noir-icon-heart { fill: none; }
/* 5.5 形態五：全寬黑條 + 右側箭頭（前往結帳 / 提交訂單） ---------------------- */
.noir-btn--checkout {
  width: 100%; height: 54px; padding: 0 22px; justify-content: space-between; letter-spacing: .2em; background: var(--noir-brand);
  border-color: var(--noir-brand); color: var(--on-brand, #fff);
}
.noir-btn--checkout:hover {
  background: var(--noir-brand-hover); border-color: var(--noir-brand-hover);
}
.noir-btn--checkout:hover .noir-btn__arrow { transform: translateX(4px); }
/* 5.6 純文字按鈕（繼續購物） ------------------------------------------------- */
.noir-btn--ghost {
  height: 44px; padding: 0; border: 0; background: transparent; color: var(--noir-ink-2); font-size: 12.5px; letter-spacing: .14em;
  border-bottom: 1px solid transparent;
}
.noir-btn--ghost:hover {
  color: var(--noir-ink); border-bottom-color: var(--noir-ink);
}
/* 5.7 方形圖示按鈕（卡片收藏；與 --fav 同族，只留圖示） ---------------------- */
.noir-btn--icon {
  width: 34px; height: 34px; padding: 0; border-color: var(--noir-line-2); background: rgba(255, 255, 255, .86);
  color: var(--noir-gray);
}
.noir-btn--icon:hover {
  border-color: var(--noir-brand); background: var(--noir-paper); color: var(--noir-ink);
}
/* 6. 頂欄 -------------------------------------------------------------------- */
.noir-topbar {
  background: var(--noir-brand); color: var(--on-brand, rgba(255, 255, 255, .82)); font-size: 12px; letter-spacing: .06em;
}
.noir-topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding-top: 6px;
  padding-bottom: 6px;
}
.noir-topbar__note {
  display: inline-flex; align-items: center; gap: 8px;
}
.noir-topbar__side {
  display: flex; align-items: center; gap: 22px;
}
.noir-topbar__pick {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: inherit; font-size: 12px;
  letter-spacing: .06em; cursor: pointer; transition: color .2s;
}
.noir-topbar__pick:hover { color: #fff; }
/* 跑馬燈（後台「頁頭公告」選跑馬燈）：內容複製兩份，位移 50% 無縫循環。
   軌道要能壓縮（min-width: 0 ＋ overflow: hidden），否則 nowrap 內容會把頂欄撐破。 */
.noir-topbar__note.is-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.noir-topbar__track { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.noir-topbar__track-inner {
  display: inline-flex; white-space: nowrap; will-change: transform; animation: noirMarquee 26s linear infinite;
}
.noir-topbar__group { display: inline-flex; align-items: center; }
.noir-topbar__sep { margin: 0 14px; opacity: .5; }
@keyframes noirMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* 7. 頁眉 -------------------------------------------------------------------- */
.noir-header {
  position: sticky; top: 0; z-index: 30; background: var(--noir-paper); border-bottom: 1px solid var(--noir-line);
}
.noir-header__inner {
  display: flex; align-items: center; gap: 40px; min-height: var(--noir-header-h); padding-top: 10px; padding-bottom: 10px;
}
.noir-logo {
  display: flex; flex-direction: column; line-height: 1;
}
.noir-logo__mark {
  font-family: var(--noir-font-display); font-size: 26px; letter-spacing: .34em; color: var(--noir-ink);
}
.noir-nav {
  display: flex; align-items: center; gap: 30px; margin-left: 26px; flex: 1 1 auto;
}
.noir-nav a {
  position: relative; font-size: 13.5px; color: var(--noir-ink-2); padding: 6px 0; transition: color .2s;
}
.noir-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--noir-brand); opacity: 0;
  transition: opacity .2s;
}
.noir-nav a:hover { color: var(--noir-ink); }
.noir-nav a:hover::after, .noir-nav a.is-current::after { opacity: 1; }
.noir-nav a.is-current { color: var(--noir-ink); }
.noir-tools {
  display: flex; align-items: center; gap: 6px; margin-left: auto;
}
.noir-tool {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border: 0;
  background: transparent; font-size: 12.5px; letter-spacing: .06em; color: var(--noir-ink-2); cursor: pointer;
  transition: color .2s;
}
.noir-tool:hover { color: var(--noir-ink); }
.noir-tool__count {
  position: absolute; top: 4px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--noir-brand); color: var(--on-brand, #fff); font-size: 10px; line-height: 1;
  letter-spacing: 0;
}
/* 8. Hero -------------------------------------------------------------------- */
.noir-hero {
  position: relative; overflow: hidden; background: var(--noir-brand);
}
.noir-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.noir-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 8, 10, .74) 0%, rgba(8, 8, 10, .52) 46%, rgba(8, 8, 10, .22) 100%);
}
.noir-hero__body {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 640px; padding-top: 80px; padding-bottom: 80px;
}
.noir-hero__eyebrow { color: rgba(255, 255, 255, .84); }
.noir-hero__title {
  margin: 22px 0 18px; max-width: 16em; font-size: 62px; color: #fff;
}
.noir-hero__sub {
  max-width: 34em; font-size: 15px; color: rgba(255, 255, 255, .88);
}
.noir-hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px;
}
.noir-hero__actions .noir-btn--primary {
  background: var(--noir-paper); border-color: var(--noir-paper); color: var(--noir-ink);
}
.noir-hero__actions .noir-btn--primary:hover {
  background: var(--noir-line); border-color: var(--noir-line);
}
.noir-hero__actions .noir-btn--buy {
  border-color: rgba(255, 255, 255, .9); color: #fff;
}
.noir-hero__actions .noir-btn--buy:hover {
  background: var(--noir-paper); border-color: var(--noir-paper); color: var(--noir-ink);
}
/* 9. 分類導航 ---------------------------------------------------------------- */
.noir-cats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--noir-gap);
}
.noir-cat {
  display: block; cursor: pointer;
}
.noir-cat__media {
  position: relative; aspect-ratio: 3 / 4; background: var(--noir-sand); overflow: hidden;
}
.noir-cat__media img {
  width: 100%; height: 100%; object-fit: cover; transition: opacity .3s;
}
.noir-cat:hover .noir-cat__media img { opacity: .88; }
.noir-cat__body {
  padding: 18px 0 0; text-align: center;
}
.noir-cat__name {
  font-family: var(--noir-font-display); font-size: 18px; color: var(--noir-ink);
}
.noir-cat__link {
  display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--noir-gray);
  border-bottom: 1px solid var(--noir-line-2); padding-bottom: 2px; transition: color .2s, border-color .2s;
}
.noir-cat:hover .noir-cat__link {
  color: var(--noir-ink); border-color: var(--noir-brand);
}
/* 10. 商品卡 ----------------------------------------------------------------- */
/* 圖片容器原本沒有圓角宣告（靠預設 0）：這裡顯式走圓角令牌，一來後台選「圓角」
   時卡片會一起圓（只圓按鈕不圓卡片會很突兀），二來修掉 aurora .gallery-thumb
   的 10px 洩漏——本主題縮圖本應是直角。默認 --clay-radius 為 0，外觀不變。 */
.noir-card__media, .noir-cat__media, .noir-gallery__main, .noir-thumb {
  border-radius: var(--clay-radius);
}
.noir-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--noir-gap);
}
.noir-card {
  position: relative; display: flex; flex-direction: column;
}
.noir-card__media {
  position: relative; aspect-ratio: 3 / 4; background: var(--noir-sand); overflow: hidden;
}
.noir-card__img {
  width: 100%; height: 100%; object-fit: cover; transition: opacity .3s;
}
.noir-card:hover .noir-card__img { opacity: .9; }
.noir-card__fav {
  position: absolute; top: 12px; right: 12px; z-index: 2;
}
.noir-card__flag {
  position: absolute; top: 12px; left: 12px; z-index: 2; height: 22px; padding: 0 8px; display: inline-flex; align-items: center;
  background: var(--noir-brand); color: var(--on-brand, #fff); font-size: 11px; letter-spacing: .06em;
}
.noir-card__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2; height: 22px; padding: 0 8px; display: inline-flex; align-items: center;
  background: var(--noir-paper); border: 1px solid var(--noir-brand); color: var(--noir-ink); font-size: 11px; letter-spacing: .06em;
}
.noir-quickadd {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 42px; display: flex; align-items: center;
  justify-content: center; gap: 8px; border: 0; background: var(--noir-brand); color: var(--on-brand, #fff); font-family: var(--noir-font-body);
  font-size: 12px; letter-spacing: .12em; cursor: pointer; opacity: 0; transform: translateY(100%);
  transition: opacity .25s, transform .25s, background-color .2s;
}
.noir-quickadd:hover { background: var(--noir-brand-hover); }
.noir-card:hover .noir-quickadd {
  opacity: 1; transform: translateY(0);
}
.noir-quickadd:focus-visible {
  opacity: 1; transform: translateY(0); outline: 2px solid var(--noir-brand); outline-offset: -2px;
}
.noir-card__body { padding: 16px 0 0; }
.noir-card__name {
  font-family: var(--noir-font-body); font-size: 13.5px; font-weight: 400; color: var(--noir-ink);
}
.noir-card__name a { transition: color .2s; }
.noir-card__name a:hover { color: var(--noir-gray); }
.noir-card__price {
  display: flex; align-items: baseline; gap: 10px; margin-top: 7px; font-size: 13.5px; color: var(--noir-ink);
}
.noir-price--was {
  font-size: 12px; color: var(--noir-gray-2);
}
.noir-swatches {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
}
.noir-swatch {
  width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--noir-line-2);
}
.noir-swatch--ink {
  background: #1c1c1e; border-color: #1c1c1e;
}
.noir-swatch--charcoal {
  background: #4a4a4d; border-color: #4a4a4d;
}
.noir-swatch--grey {
  background: #9b9b96; border-color: #9b9b96;
}
.noir-swatch--slate {
  background: #7b8794; border-color: #7b8794;
}
.noir-swatch--camel {
  background: #b49a7e; border-color: #b49a7e;
}
.noir-swatch--sand { background: #e3ddd2; }
.noir-swatch--cream { background: #efe9de; }
.noir-swatch--white { background: #fff; }
/* 11. 品牌主張條 -------------------------------------------------------------- */
.noir-promises {
  background: var(--noir-brand); color: var(--on-brand, rgba(255, 255, 255, .84));
}
.noir-promises__inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
}
.noir-promise {
  display: flex; align-items: flex-start; gap: 16px; padding: 44px 34px;
}
.noir-promise + .noir-promise { border-left: 1px solid rgba(255, 255, 255, .16); }
.noir-promise svg { color: rgba(255, 255, 255, .9); }
.noir-promise__title {
  font-family: var(--noir-font-body); font-size: 13.5px; font-weight: 500; letter-spacing: .06em; color: #fff;
}
.noir-promise__text {
  margin-top: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .68);
}
/* 12. 品牌故事 ---------------------------------------------------------------- */
.noir-story {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: center;
}
.noir-story__media {
  aspect-ratio: 4 / 3; background: var(--noir-sand); overflow: hidden;
}
.noir-story__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.noir-story__title {
  font-size: 34px; margin: 16px 0 20px;
}
.noir-story__text {
  font-size: 14px; color: var(--noir-gray); margin-bottom: 16px;
}
.noir-story__more { margin-top: 14px; }
/* 13. 頁腳 -------------------------------------------------------------------- */
.noir-footer {
  background: var(--noir-paper); border-top: 1px solid var(--noir-line); padding-top: 72px;
}
.noir-footer__cols {
  display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 48px; padding-bottom: 56px;
}
.noir-footer__brand {
  display: flex; flex-direction: column;
}
.noir-footer__brand .noir-logo__mark { font-size: 22px; }
.noir-footer__desc {
  margin-top: 20px; max-width: 30em; font-size: 12.5px; color: var(--noir-gray);
}
.noir-footer__title {
  font-family: var(--noir-font-body); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--noir-ink); margin-bottom: 18px;
}
.noir-footer__list {
  display: flex; flex-direction: column; gap: 11px;
}
.noir-footer__list a, .noir-footer__list span {
  font-size: 13px; color: var(--noir-gray); transition: color .2s;
}
.noir-footer__list a { cursor: pointer; }
.noir-footer__list a:hover { color: var(--noir-ink); }
.noir-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0;
  border-top: 1px solid var(--noir-line); font-size: 12px; color: var(--noir-gray-2);
}
.noir-footer__pay {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
}
.noir-footer__pay img {
  /* 八張圖標同為 62×32 規格；只鎖高度、寬度隨比例，八張自然等寬等高 */
  height: 24px; width: auto; display: block;
}
/* 14. 麵包屑與頁頭 ------------------------------------------------------------ */
.noir-crumb {
  display: flex; align-items: center; gap: 10px; padding: 26px 0; font-size: 12.5px; color: var(--noir-gray);
}
.noir-crumb a { transition: color .2s; }
.noir-crumb a:hover { color: var(--noir-ink); }
.noir-crumb__sep { color: var(--noir-gray-2); }
.noir-crumb__now { color: var(--noir-ink); }
.noir-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 30px;
  border-bottom: 1px solid var(--noir-line);
}
.noir-page-head__title { font-size: 40px; }
.noir-page-head__desc {
  margin-top: 12px; max-width: 46em; font-size: 13.5px; color: var(--noir-gray);
}
.noir-page-head__count {
  font-size: 12.5px; letter-spacing: .1em; color: var(--noir-gray);
}
/* 15. 列表工具條 -------------------------------------------------------------- */
.noir-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 0;
  border-bottom: 1px solid var(--noir-line);
}
.noir-toolbar__hint {
  display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .08em; color: var(--noir-gray);
}
.noir-toolbar__sort {
  display: inline-flex; align-items: center; gap: 12px;
}
.noir-toolbar__sort .noir-select { width: 220px; }
/* 16. 列表頁版面 -------------------------------------------------------------- */
.noir-shop {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; padding: 44px 0 var(--noir-sec);
}
.noir-filters {
  display: flex; flex-direction: column; gap: 34px;
}
.noir-filter__head {
  display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px;
  border-bottom: 1px solid var(--noir-line);
}
.noir-filter__title {
  font-family: var(--noir-font-body); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--noir-ink);
}
.noir-filter__body { padding-top: 16px; }
.noir-check {
  display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: var(--noir-ink-2); cursor: pointer;
  transition: color .2s;
}
.noir-check:hover { color: var(--noir-ink); }
.noir-check__box {
  flex: 0 0 auto; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--noir-line-2); color: #fff; transition: background-color .2s, border-color .2s;
}
.noir-check__box svg {
  opacity: 0; transition: opacity .2s;
}
.noir-check input:checked + .noir-check__box {
  background: var(--noir-brand); border-color: var(--noir-brand);
}
.noir-check input:checked + .noir-check__box svg { opacity: 1; }
.noir-check__text { flex: 1 1 auto; }
.noir-check__count {
  font-size: 11.5px; color: var(--noir-gray-2);
}
.noir-sizes {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.noir-size-opt {
  cursor: pointer; display: inline-flex;
}
.noir-size-opt__box {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 38px; padding: 0 10px;
  border: 1px solid var(--noir-line-2); background: var(--noir-paper); font-size: 12.5px; letter-spacing: .08em;
  color: var(--noir-gray); transition: border-color .2s, color .2s, background-color .2s;
}
.noir-size-opt:hover .noir-size-opt__box {
  border-color: var(--noir-gray); color: var(--noir-ink);
}
.noir-size-opt input:checked + .noir-size-opt__box {
  background: var(--noir-brand); border-color: var(--noir-brand); color: var(--on-brand, #fff);
}
.noir-colors {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.noir-color-opt {
  cursor: pointer; display: inline-flex;
}
.noir-color-opt__box {
  width: 26px; height: 26px; border: 1px solid var(--noir-line-2); transition: border-color .2s;
}
.noir-color-opt:hover .noir-color-opt__box { border-color: var(--noir-gray); }
.noir-color-opt input:checked + .noir-color-opt__box {
  outline: 1px solid var(--noir-brand); outline-offset: 2px; border-color: var(--noir-brand);
}
.noir-color-opt--ink .noir-color-opt__box {
  background: #1c1c1e; border-color: #1c1c1e;
}
.noir-color-opt--charcoal .noir-color-opt__box {
  background: #4a4a4d; border-color: #4a4a4d;
}
.noir-color-opt--grey .noir-color-opt__box {
  background: #9b9b96; border-color: #9b9b96;
}
.noir-color-opt--slate .noir-color-opt__box {
  background: #7b8794; border-color: #7b8794;
}
.noir-color-opt--camel .noir-color-opt__box {
  background: #b49a7e; border-color: #b49a7e;
}
.noir-color-opt--sand .noir-color-opt__box { background: #e3ddd2; }
.noir-color-opt--cream .noir-color-opt__box { background: #efe9de; }
.noir-price-range {
  display: flex; align-items: center; gap: 10px;
}
.noir-price-range .noir-input {
  height: 42px; padding: 0 10px; text-align: center;
}
.noir-price-range__dash { color: var(--noir-gray-2); }
.noir-filter__apply { margin-top: 16px; }
.noir-filter__apply .noir-btn {
  width: 100%; height: 42px; font-size: 12px;
}
/* 17. 分頁 -------------------------------------------------------------------- */
.noir-pager {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding-top: 64px;
}
.noir-pager__item {
  min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; font-size: 12.5px; color: var(--noir-gray); cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.noir-pager__item:hover {
  border-color: var(--noir-line-2); color: var(--noir-ink);
}
.noir-pager__item.is-active {
  background: var(--noir-brand); border-color: var(--noir-brand); color: var(--on-brand, #fff);
}
.noir-pager__gap {
  color: var(--noir-gray-2); padding: 0 2px;
}
/* 18. 商品詳情 ---------------------------------------------------------------- */
.noir-pdp {
  display: grid; grid-template-columns: minmax(0, 510px) minmax(0, 1fr); gap: 72px; padding: 12px 0 var(--noir-sec);
  align-items: start;
}
/* 主圖對齊舊版（實測舊站 nexus：1:1、max-width 510px）：左欄固定 510 上限，
   ≤1024 單欄時靠 .noir-gallery 的 max-width 收口，不會佔滿整寬。 */
.noir-gallery { max-width: 510px; }
.noir-gallery__main {
  position: relative; aspect-ratio: 1 / 1; background: var(--noir-sand); overflow: hidden;
}
.noir-gallery__main img {
  width: 100%; height: 100%; object-fit: cover;
}
.noir-gallery__thumbs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px;
}
.noir-thumb {
  position: relative; aspect-ratio: 1 / 1; background: var(--noir-sand); border: 1px solid var(--noir-line); overflow: hidden;
  cursor: pointer; transition: border-color .2s, opacity .2s;
}
.noir-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.noir-thumb:hover { border-color: var(--noir-gray); }
.noir-thumb.is-active { border-color: var(--noir-brand); }
.noir-pdp__brand {
  font-family: var(--noir-font-display); font-size: 12px; letter-spacing: .34em; color: var(--noir-gray-2);
  text-transform: uppercase;
}
.noir-pdp__title {
  margin: 16px 0 18px; font-size: 36px;
}
.noir-pdp__price {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 22px; color: var(--noir-ink);
}
.noir-pdp__price s {
  font-size: 14px; color: var(--noir-gray-2);
}
.noir-pdp__flag {
  height: 24px; padding: 0 9px; display: inline-flex; align-items: center; background: var(--noir-brand); color: var(--on-brand, #fff);
  font-size: 11.5px; letter-spacing: .08em;
}
.noir-pdp__tax {
  margin-top: 10px; font-size: 12.5px; color: var(--noir-gray);
}
.noir-pdp__opts {
  margin-top: 34px; display: flex; flex-direction: column; gap: 28px;
}
.noir-opt__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px;
}
.noir-opt__label {
  font-family: var(--noir-font-body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--noir-ink);
}
.noir-opt-colors {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.noir-opt-sizes {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.noir-opt-sizes .noir-link {
  margin-left: 10px; font-size: 12.5px;
}
.noir-qty {
  display: inline-flex; align-items: center; border: 1px solid var(--noir-line-2); height: 46px;
}
.noir-qty__btn {
  width: 42px; height: 100%; border: 0; background: transparent; color: var(--noir-gray); font-size: 16px; line-height: 1;
  cursor: pointer; transition: color .2s, background-color .2s;
}
.noir-qty__btn:hover {
  color: var(--noir-ink); background: var(--noir-sand);
}
.noir-qty__input {
  width: 64px; height: 100%; border: 0; border-left: 1px solid var(--noir-line); border-right: 1px solid var(--noir-line);
  text-align: center; font-size: 13.5px; background: var(--noir-paper); -moz-appearance: textfield; appearance: textfield;
}
.noir-qty__input::-webkit-outer-spin-button, .noir-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.noir-qty__input:focus {
  outline: none; border-color: var(--noir-brand);
}
.noir-pdp__actions {
  margin-top: 34px; display: flex; flex-direction: column; gap: 12px;
}
.noir-pdp__row {
  display: flex; gap: 12px;
}
.noir-pdp__row .noir-btn { flex: 1 1 0; }
.noir-pdp__fav { align-self: flex-start; }
/* 商品詳情整寬一行時，格線與它之間的留白收窄（其餘情況維持原本下緣留白） */
.noir-pdp:has(+ .noir-pdp__detail) { padding-bottom: 34px; }
.noir-pdp__detail {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--noir-line);
}
.noir-pdp__detail-title {
  font-size: 20px; margin-bottom: 16px;
}
.noir-pdp__detail p {
  font-size: 13.5px; color: var(--noir-gray); margin-bottom: 14px;
}
/* 商家在詳情裡放的原圖可能超過容器寬度 */
.noir-pdp__detail img {
  max-width: 100%; height: auto;
}
.noir-spec {
  margin-top: 24px; border-top: 1px solid var(--noir-line);
}
.noir-spec__row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--noir-line);
  font-size: 13px;
}
.noir-spec__key { color: var(--noir-gray); }
.noir-spec__val { color: var(--noir-ink); }
.noir-related {
  padding: var(--noir-sec) 0 0; border-top: 1px solid var(--noir-line);
}
/* 19. 購物車 ------------------------------------------------------------------ */
.noir-cart-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 0 26px;
  border-bottom: 1px solid var(--noir-line);
}
.noir-cart-head__title { font-size: 40px; }
.noir-cart-head__count {
  font-size: 12.5px; letter-spacing: .1em; color: var(--noir-gray);
}
.noir-cart {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: start; padding: 34px 0 var(--noir-sec);
}
.noir-cart-row {
  position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px 132px 110px 34px; gap: 22px;
  align-items: center; padding: 26px 0; border-bottom: 1px solid var(--noir-line);
}
.noir-cart-row:first-child { border-top: 1px solid var(--noir-line); }
.noir-cart-row__thumb {
  aspect-ratio: 3 / 4; background: var(--noir-sand); overflow: hidden;
}
.noir-cart-row__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.noir-cart-row__name {
  font-family: var(--noir-font-body); font-size: 14px; font-weight: 400; color: var(--noir-ink);
}
.noir-cart-row__name a { transition: color .2s; }
.noir-cart-row__name a:hover { color: var(--noir-gray); }
.noir-cart-row__opts {
  margin-top: 8px; font-size: 12.5px; color: var(--noir-gray);
}
.noir-cart-row__sku {
  margin-top: 6px; font-size: 11.5px; letter-spacing: .08em; color: var(--noir-gray-2);
}
.noir-cart-row__price, .noir-cart-row__sub {
  font-size: 13.5px; color: var(--noir-ink);
}
.noir-cart-row__label {
  display: block; margin-bottom: 4px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--noir-gray-2);
}
.noir-cart-row__remove {
  align-self: start; margin-top: 2px;
}
.noir-cart-row__remove .noir-btn--icon { background: transparent; }
.noir-summary {
  position: sticky; top: calc(var(--noir-header-h) + 20px); background: var(--noir-paper); border: 1px solid var(--noir-line);
  padding: 30px;
}
.noir-summary__title {
  font-family: var(--noir-font-body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--noir-ink);
}
.noir-summary__rows {
  margin-top: 22px; display: flex; flex-direction: column; gap: 14px;
}
.noir-summary__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--noir-ink-2);
}
.noir-summary__row b {
  font-weight: 400; color: var(--noir-ink);
}
.noir-summary__row--muted b { color: var(--noir-gray); }
.noir-summary__row--off b { color: var(--noir-ink); }
.noir-summary__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--noir-line);
}
.noir-summary__total span {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--noir-gray);
}
.noir-summary__total strong {
  font-family: var(--noir-font-display); font-size: 26px; font-weight: 500; color: var(--noir-ink);
}
.noir-summary__actions {
  margin-top: 24px; display: flex; flex-direction: column; gap: 14px; align-items: stretch;
}
.noir-summary__actions .noir-btn--ghost { align-self: center; }
.noir-summary__foot {
  margin-top: 20px; font-size: 12px; color: var(--noir-gray);
}
.noir-coupon {
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--noir-line);
}
.noir-coupon__row {
  display: flex; gap: 10px; margin-top: 12px;
}
.noir-coupon__row .noir-input { flex: 1 1 auto; }
.noir-coupon__row .noir-btn {
  flex: 0 0 auto; height: 46px;
}
.noir-cart-aside {
  display: flex; flex-direction: column; gap: 24px;
}
/* 移動端（版面收成單欄後）：結帳與繼續購物固定貼底，長清單不用捲到底才找得到按鈕。
   斷點跟本主題的單欄斷點一致（1024px），否則 901–1024px 這段按鈕仍會留在頁尾。 */
@media (max-width: 1024px) {
  .noir-summary__actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    flex-direction: row; align-items: center; gap: 12px; margin: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--noir-paper); border-top: 1px solid var(--noir-line);
  }
  .noir-summary__actions .noir-btn--checkout { flex: 1 1 auto; }
  .noir-summary__actions .noir-btn--ghost {
    align-self: stretch; flex: 0 0 auto; height: auto; padding: 0 22px;
    border: 1px solid var(--noir-line-2);
  }
  .noir-cart { padding-bottom: calc(var(--noir-sec) + 84px); }
}
/* 20. 結帳 -------------------------------------------------------------------- */
.noir-steps {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 34px 0;
}
.noir-steps__item {
  display: inline-flex; align-items: center; gap: 11px; font-size: 12.5px; letter-spacing: .1em; color: var(--noir-gray-2);
}
.noir-steps__item + .noir-steps__item::before {
  content: ""; display: block; width: 52px; height: 1px; background: var(--noir-line-2); margin: 0 18px;
}
.noir-steps__dot {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--noir-line-2); font-size: 12px; color: var(--noir-gray-2); background: var(--noir-paper);
}
.noir-steps__item.is-active { color: var(--noir-ink); }
.noir-steps__item.is-active .noir-steps__dot {
  background: var(--noir-brand); border-color: var(--noir-brand); color: var(--on-brand, #fff);
}
.noir-steps__item.is-done { color: var(--noir-ink-2); }
.noir-steps__item.is-done .noir-steps__dot {
  border-color: var(--noir-brand); color: var(--noir-ink);
}
.noir-checkout {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; padding-bottom: var(--noir-sec);
}
.noir-blocks {
  display: flex; flex-direction: column; gap: 24px;
}
.noir-block {
  background: var(--noir-paper); border: 1px solid var(--noir-line); padding: 30px;
}
.noir-block__head {
  display: flex; align-items: center; gap: 12px; padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--noir-line);
}
.noir-block__num {
  font-size: 11px; letter-spacing: .16em; color: var(--noir-gray-2);
}
.noir-block__title { font-size: 19px; }
.noir-fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.noir-field {
  display: flex; flex-direction: column; gap: 8px;
}
.noir-field--full { grid-column: 1 / -1; }
.noir-label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--noir-gray);
}
.noir-input, .noir-select, .noir-textarea {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--noir-line-2); border-radius: var(--clay-radius); background: var(--noir-paper);
  font-family: var(--noir-font-body); font-size: 13.5px; color: var(--noir-ink); transition: border-color .2s;
}
.noir-input::placeholder, .noir-textarea::placeholder { color: var(--noir-gray-2); }
.noir-input:focus, .noir-select:focus, .noir-textarea:focus {
  outline: none; border-color: var(--noir-brand);
}
.noir-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6f6c' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; cursor: pointer;
}
.noir-textarea {
  height: auto; min-height: 118px; padding: 12px 14px; line-height: 1.7; resize: vertical;
}
.noir-hint {
  font-size: 11.5px; color: var(--noir-gray-2);
}
.noir-radios {
  display: flex; flex-direction: column; gap: 12px;
}
.noir-radio-card {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px;
  border: 1px solid var(--noir-line-2); background: var(--noir-paper); cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.noir-radio-card:hover { border-color: var(--noir-gray); }
.noir-radio-card__dot {
  width: 16px; height: 16px; border: 1px solid var(--noir-line-2); border-radius: 50%; transition: border-color .2s, background-color .2s;
}
.noir-radio-card input:checked + .noir-radio-card__dot {
  border-color: var(--noir-brand); background: radial-gradient(circle, var(--noir-brand) 0 3.2px, transparent 3.4px);
}
.noir-radio-card:has(input:checked) { border-color: var(--noir-brand); }
.noir-radio-card__title {
  display: block; font-size: 13.5px; color: var(--noir-ink);
}
.noir-radio-card__note {
  display: block; margin-top: 4px; font-size: 12px; color: var(--noir-gray);
}
.noir-radio-card__price {
  font-size: 13px; color: var(--noir-ink);
}
.noir-mini-items {
  display: flex; flex-direction: column; gap: 18px; margin-top: 22px;
}
.noir-mini {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: center;
}
.noir-mini__thumb {
  aspect-ratio: 3 / 4; background: var(--noir-sand); overflow: hidden;
}
.noir-mini__thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.noir-mini__name {
  font-size: 13px; color: var(--noir-ink);
}
.noir-mini__meta {
  margin-top: 4px; font-size: 11.5px; color: var(--noir-gray-2);
}
.noir-mini__price {
  font-size: 13px; color: var(--noir-ink);
}
.noir-secure {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px; font-size: 11.5px;
  color: var(--noir-gray);
}
/* 21. 響應式 ------------------------------------------------------------------ */
@media (max-width: 1280px) {
  :root {
    --noir-gutter: 40px; --noir-sec: 80px;
  }
  .noir-hero__title { font-size: 54px; }
  .noir-pdp { gap: 48px; }
  .noir-cart { gap: 40px; }
  .noir-story { gap: 48px; }
}
@media (max-width: 1024px) {
  :root {
    --noir-gutter: 32px; --noir-sec: 68px;
  }
  .noir-nav {
    gap: 22px; margin-left: 12px;
  }
  .noir-nav a { font-size: 13px; }
  .noir-hero__body { min-height: 520px; }
  .noir-hero__title { font-size: 44px; }
  .noir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .noir-shop {
    grid-template-columns: 216px minmax(0, 1fr); gap: 36px;
  }
  .noir-pdp {
    grid-template-columns: minmax(0, 1fr); gap: 44px;
  }
  .noir-cart {
    grid-template-columns: minmax(0, 1fr); gap: 34px;
  }
  .noir-checkout {
    grid-template-columns: minmax(0, 1fr); gap: 34px;
  }
  .noir-summary { position: static; }
  .noir-story {
    grid-template-columns: minmax(0, 1fr); gap: 32px;
  }
  .noir-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px;
  }
  .noir-cart-row {
    grid-template-columns: 104px minmax(0, 1fr) 96px 126px 96px 34px; gap: 18px;
  }
}
@media (max-width: 900px) {
  .noir-shop {
    grid-template-columns: minmax(0, 1fr); gap: 0;
  }
  /* 行動版：分類清單在「三條槓」抽屜裡已有（與 aurora 在 ≤991 隱藏 .plp-side 同一做法），
     列表頁不再重複一次，省下將近一整屏的捲動 */
  .noir-filter--cats { display: none; }
  /* 工具條改兩欄網格：原本提示一行加四顆下拉各佔一行共 330px 高 */
  .noir-toolbar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 0;
  }
  .noir-toolbar__hint { display: none; }
  .noir-toolbar__sort { display: flex; }
  .noir-toolbar__sort .noir-select { width: 100%; min-width: 0; }
  .noir-toolbar__sort > .noir-btn { flex: 1 1 auto; }
  .noir-toolbar > .noir-link { grid-column: 1 / -1; }
  .noir-filters {
    flex-direction: row; flex-wrap: wrap; gap: 18px; padding-bottom: 24px; margin-bottom: 24px;
    border-bottom: 1px solid var(--noir-line);
  }
  .noir-filters > * {
    flex: 1 1 calc(50% - 9px); min-width: 0;
  }
  /* 價格要放兩個輸入框加套用鈕，獨佔一行 */
  .noir-filters > *:last-child { flex: 1 1 100%; }
  .noir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :root {
    --noir-gutter: 20px; --noir-sec: 56px; --noir-header-h: auto;
  }
  .noir-header { position: static; }
  .noir-header__inner {
    flex-wrap: wrap; gap: 12px 16px;
  }
  .noir-logo__mark { font-size: 22px; }
  .noir-nav {
    order: 3; width: 100%; margin-left: 0; flex: 1 0 100%; flex-wrap: wrap; gap: 10px 20px;
  }
  .noir-tools { order: 2; }
  .noir-tool { padding: 0 8px; }
  .noir-tool__text { display: none; }
  .noir-tool--cart .noir-tool__text { display: inline; }
  .noir-hero__body {
    min-height: 440px; padding-top: 56px; padding-bottom: 56px;
  }
  .noir-hero__title { font-size: 34px; }
  .noir-hero__sub { font-size: 14px; }
  .noir-hero__actions { margin-top: 28px; }
  .noir-hero__actions .noir-btn { flex: 1 1 auto; }
  .noir-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noir-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px;
  }
  .noir-quickadd {
    opacity: 1; transform: translateY(0);
  }
  .noir-promises__inner { grid-template-columns: minmax(0, 1fr); }
  .noir-promise + .noir-promise {
    border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .noir-promise { padding: 30px 0; }
  .noir-section__head {
    flex-direction: column; align-items: flex-start; gap: 14px;
  }
  .noir-section__title { font-size: 24px; }
  .noir-page-head__title { font-size: 30px; }
  .noir-cart-head__title { font-size: 30px; }
  .noir-pdp__title { font-size: 26px; }
  .noir-gallery__thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  }
  .noir-fields { grid-template-columns: minmax(0, 1fr); }
  .noir-block { padding: 22px; }
  .noir-cart-row {
    grid-template-columns: 92px minmax(0, 1fr) 34px;
    /* 數量步進器寬 150px，第三列只有 34px 會撐爆整行造成橫向溢出，故讓 price／qty／sub 都橫跨後兩列 */
    grid-template-areas:       "thumb info remove"       "thumb price price"       "thumb qty qty"       "thumb sub sub"; gap: 12px 16px;
    align-items: start; padding: 22px 0;
  }
  .noir-cart-row__thumb { grid-area: thumb; }
  .noir-cart-row__info { grid-area: info; }
  .noir-cart-row__price { grid-area: price; }
  .noir-cart-row__qty { grid-area: qty; }
  .noir-cart-row__sub { grid-area: sub; }
  .noir-cart-row__remove { grid-area: remove; }
  .noir-summary { padding: 24px; }
  .noir-steps { padding: 26px 0; }
  .noir-steps__item + .noir-steps__item::before {
    width: 20px; margin: 0 10px;
  }
  .noir-steps__label { font-size: 11.5px; }
  .noir-spec__row { grid-template-columns: 92px minmax(0, 1fr); }
  .noir-pdp__row { flex-direction: column; }
  .noir-footer { padding-top: 52px; }
  .noir-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;
  }
}
@media (max-width: 560px) {
  :root { --noir-sec: 46px; }
  .noir-topbar__inner {
    justify-content: center; gap: 8px; font-size: 11.5px;
  }
  .noir-topbar__side { gap: 16px; }
  .noir-hero__title { font-size: 28px; }
  .noir-hero__body { min-height: 400px; }
  .noir-hero__actions {
    flex-direction: column; align-items: stretch;
  }
  .noir-cats { grid-template-columns: minmax(0, 1fr); }
  /* 560 以下原本退成單欄：卡片寬 327px、留白過多，與同寬度的搜尋／列表頁（.grid.plp-grid
     兩欄）不一致。改為一行兩個；列表模式（.view-list）維持單欄。 */
  .noir-grid:not(.view-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .noir-grid.view-list { grid-template-columns: minmax(0, 1fr); }
  .noir-pager__item {
    min-width: 34px; height: 34px; padding: 0 9px;
  }
  .noir-footer__cols { grid-template-columns: minmax(0, 1fr); }
  .noir-footer__bottom {
    flex-direction: column; align-items: flex-start;
  }
  .noir-coupon__row { flex-direction: column; }
  .noir-coupon__row .noir-btn { width: 100%; }
  .noir-summary__total strong { font-size: 22px; }
  .noir-filters > * { flex: 1 1 100%; }
}
/* 22. 無障礙：尊重使用者的減少動態偏好 ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important; animation: none !important;
  }
}
/* ==========================================================================
   23. 皮膚接管層：設計令牌（壓過 aurora 黏土／極光基底）
   圓角歸零與陰影歸零交給變數，aurora 所有 var(--clay-radius*)／var(--clay-shadow*)
   的用法會一併跟著變，不必逐條覆蓋。
   ========================================================================== */
body.noir-body {
  /* 這一層只放「注入變數沒有對應項」的中性色與結構值。
     --clay-bg、--clay-radius*、--clay-font-* 一律不在此宣告：本區塊在 body 上，
     會蓋掉後台注入到 :root 的設定（改色／字體／圓角都會失效），故交給第 1 節的 :root。 */
  --clay-card: var(--noir-paper); --clay-card-hover: var(--noir-sand);
  --clay-border: var(--noir-line); --clay-border-light: #f1f0ec;
  --clay-text: var(--noir-ink); --clay-text-secondary: var(--noir-ink-2); --clay-text-muted: var(--noir-gray);
  --clay-border-width: 1px;
  --clay-shadow: none; --clay-shadow-hover: none;
  background: var(--noir-mist); color: var(--noir-ink-2);
  font-family: var(--clay-font-body); font-size: 14px; line-height: 1.7;
}
/* aurora 有一條 h1~h6{font-family:var(--clay-font-heading)!important}，
   會蓋掉主題自己寫在標題類上的無襯線宣告；設計稿要求這幾個標題用無襯線，逐一還原 */
body.noir-body .noir-card__name,
body.noir-body .noir-cart-row__name,
body.noir-body .noir-filter__title,
body.noir-body .noir-footer__title,
body.noir-body .noir-opt__label,
body.noir-body .noir-promise__title,
body.noir-body .noir-summary__title {
  font-family: var(--noir-font-body) !important;
}
/* aurora 的極光底紋（fixed 多層 radial-gradient）與毛玻璃一律關閉 */
body.noir-body::before {
  display: none !important;
}
body.noir-body .clay-page-loading {
  background: rgba(255, 255, 255, .97) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.noir-body .cpl-logo {
  font-family: var(--noir-font-display); font-size: 20px; letter-spacing: .3em; color: var(--noir-ink);
}
body.noir-body .cpl-text {
  font-size: 12px; letter-spacing: .18em; color: var(--noir-gray);
}
body.noir-body .card,
body.noir-body .product-card,
body.noir-body .promo-card,
body.noir-body .cart-totals,
body.noir-body .summary-box,
body.noir-body .clay-btn,
body.noir-body .btn,
body.noir-body .clay-select-menu,
body.noir-body .clay-select-btn {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.noir-body .container { max-width: var(--noir-wrap); padding: 0 var(--noir-gutter); }
body.noir-body .main { padding-top: 0; padding-bottom: 0; }
body.noir-body .alert {
  padding: 14px 16px; border: 1px solid var(--noir-line); border-radius: var(--clay-radius); background: var(--noir-paper);
  color: var(--noir-ink); font-size: 13px; font-weight: 400;
}
body.noir-body .alert-success { border-left: 3px solid var(--state-success, #16a34a); }
body.noir-body .alert-error { border-left: 3px solid var(--clay-primary); }
/* ==========================================================================
   24. 皮膚接管層：頁眉、主選單與工具列
   ========================================================================== */
body.noir-body .noir-header {
  z-index: 1000; background: var(--noir-paper); border-bottom: 1px solid var(--noir-line); box-shadow: none;
}
body.noir-body .noir-header__inner { gap: 30px; }
body.noir-body .noir-logo__img { max-height: 42px; width: auto; }
body.noir-body .noir-nav__item { position: relative; }
body.noir-body .noir-nav__item > a { display: inline-flex; align-items: center; gap: 6px; }
body.noir-body .noir-nav__item > a.active { color: var(--noir-ink); }
body.noir-body .noir-nav__item > a.active::after { opacity: 1; }
/* 二級下拉：白底直角細框，純位移淡入（不做縮放） */
body.noir-body .noir-dropdown {
  position: absolute; top: 100%; left: -26px; z-index: 60; min-width: 240px; max-width: 840px; padding: 26px 28px;
  background: var(--noir-paper); border: 1px solid var(--noir-line);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  /* 滑鼠移開後多留 3 秒才收起，讓使用者有時間移到下拉上點選 */
  transition: opacity .18s 3s, transform .18s 3s, visibility 0s linear 3.18s;
}
body.noir-body .noir-nav__item:hover .noir-dropdown,
body.noir-body .noir-nav__item:focus-within .noir-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;
}
/* 滑鼠還在選單列上（正在換下一個選單）時不延遲收起，否則前後兩個下拉會同時顯示 */
body.noir-body .noir-nav:hover .noir-dropdown { transition-delay: 0s; }
body.noir-body .noir-dropdown__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px 34px;
}
body.noir-body .noir-dropdown__group-title {
  margin-bottom: 12px; font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  color: var(--noir-gray);
}
body.noir-body .noir-dropdown__list { display: flex; flex-direction: column; gap: 9px; }
body.noir-body .noir-dropdown__list a { font-size: 13px; color: var(--noir-ink-2); }
body.noir-body .noir-dropdown__list a:hover { color: var(--noir-ink); }
body.noir-body .noir-dropdown a::after { display: none; }
body.noir-body .noir-dropdown__img { width: 100%; height: auto; }
/* 工具列：搜尋、收藏、帳戶、購物袋、漢堡 */
body.noir-body .noir-tools { gap: 4px; flex-wrap: nowrap; }
body.noir-body .noir-tool {
  height: 44px; padding: 0 11px; border: 0; border-radius: var(--clay-radius); background: transparent; box-shadow: none;
  color: var(--noir-ink-2);
}
body.noir-body .noir-tool:hover { background: transparent; color: var(--noir-ink); transform: none; }
body.noir-body .noir-tools .search-box { flex: 0 1 250px; max-width: 250px; gap: 0; }
body.noir-body .noir-tools .search-box input {
  height: 40px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--noir-line-2); border-radius: var(--clay-radius);
  background: transparent; box-shadow: none; font-family: var(--noir-font-body); font-size: 13px;
}
body.noir-body .noir-tools .search-box input:focus { border-bottom-color: var(--noir-ink); box-shadow: none; }
body.noir-body .noir-tools .search-box button {
  width: 34px; height: 40px; border: 0; border-bottom: 1px solid var(--noir-line-2); border-radius: var(--clay-radius);
  background: transparent; box-shadow: none; color: var(--noir-ink); transition: color .2s;
}
body.noir-body .noir-tools .search-box button:hover {
  transform: none; box-shadow: none; background: transparent; color: var(--noir-gray);
}
body.noir-body .noir-tools .cart-link {
  position: relative; width: auto; height: 44px; padding: 0 11px; border: 0; border-radius: var(--clay-radius);
  background: transparent; box-shadow: none; color: var(--noir-ink-2);
}
body.noir-body .noir-tools .cart-link:hover {
  transform: none; box-shadow: none; background: transparent; color: var(--noir-ink);
}
body.noir-body .noir-tool__count,
body.noir-body .noir-tools .cart-count {
  position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; line-height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--clay-radius); background: var(--noir-brand); color: var(--on-brand, #fff); font-size: 10px; font-weight: 400; text-align: center;
}
/* 搜尋／選單按鈕：桌面收起。
   aurora 原本靠 .clay-header-actions .clay-search-toggle 與 .clay-header-menu-btn 兩條規則收，
   換成 noir 類名後不會命中，桌面會多出兩顆按鈕，所以在這裡補回基線（900px 以下再展開）。 */
body.noir-body .noir-search-toggle,
body.noir-body .noir-menu-btn { display: none; }
body.noir-body .noir-menu-btn {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--clay-radius); background: transparent;
  /* 圖標置中：inline-flex 預設 justify-content: flex-start、align-items: stretch（SVG 有自身
     比例不拉伸、退回 flex-start），三條杠會貼在 44×44 方框的左上角，與旁邊置中的圖標對不齊。
     這裡只補居中，不寫 display（會被下方 900px 以下的展開規則蓋掉，也會蓋掉桌面收起的 display:none）。 */
  align-items: center; justify-content: center;
  color: var(--noir-ink-2); cursor: pointer;
}
body.noir-body .noir-menu-btn:hover { color: var(--noir-ink); }
/* 帳戶下拉 */
body.noir-body .account-dropdown {
  /* 面板下移到頁頭下緣之下：頁頭 z-index:1000 且面板是它的後代，貼太近會被頁頭底邊切掉
     上圓角與邊框（面板 top 必須 > 頁頭 bottom）。 */
  top: calc(100% + 24px); min-width: 190px; padding: 10px; border: 1px solid var(--noir-line); border-radius: var(--clay-radius);
  background: var(--noir-paper); box-shadow: none; backdrop-filter: none; transform: translateY(4px);
  /* 收起比基底（3s 延遲）快得多，但仍留 .35s 讓斜向滑動不會即收。 */
  transition: opacity .18s ease-out .35s, transform .18s ease-out .35s, visibility 0s linear .53s;
}
body.noir-body .account-wrap:hover .account-dropdown,
body.noir-body .account-wrap:focus-within .account-dropdown { transform: translateY(0); transition-delay: 0s; }
/* 圖示與面板之間 24px 的縫隙補一塊透明區，否則滑鼠移向面板會離開 .account-wrap 而收起。 */
body.noir-body .account-dropdown::after { top: -24px; height: 24px; }
/* 基底的小白箭頭是配玻璃面板的，面板下移後它會孤零零懸在縫隙裡。 */
body.noir-body .account-dropdown::before { display: none; }
body.noir-body .account-dropdown-head { padding-bottom: 10px; border-bottom: 1px solid var(--noir-line); }
body.noir-body .account-dropdown-head b, body.noir-body .account-dropdown-head span { font-weight: 400; }
body.noir-body .account-dropdown > a {
  padding: 9px 10px; border-radius: var(--clay-radius); font-size: 13px; color: var(--noir-ink-2);
}
body.noir-body .account-dropdown > a:hover { background: var(--noir-sand); color: var(--noir-ink); }
body.noir-body .account-logout-btn {
  width: 100%; margin-top: 4px; padding: 9px 10px; border: 0; border-radius: var(--clay-radius); background: transparent;
  text-align: left; font-size: 13px; color: var(--noir-gray); cursor: pointer;
}
body.noir-body .account-logout-btn:hover { color: var(--noir-ink); }
/* ==========================================================================
   25. 皮膚接管層：迷你購物車
   ========================================================================== */
body.noir-body .mini-cart {
  /* 同帳戶下拉：面板要落到頁頭下緣之下才不會被頁頭切掉上圓角。 */
  top: calc(100% + 24px); width: 352px; padding: 18px; border: 1px solid var(--noir-line); border-radius: var(--clay-radius); background: var(--noir-paper);
  box-shadow: none; backdrop-filter: none; transform: translateY(4px);
  transition: opacity .18s ease-out .35s, transform .18s ease-out .35s, visibility 0s linear .53s;
}
body.noir-body .cart-wrap:hover .mini-cart,
body.noir-body .cart-wrap:focus-within .mini-cart { transform: translateY(0); transition-delay: 0s; }
/* 迷你購物車有 overflow-y:auto，橋接區不能掛在面板上（會被裁掉），改掛在外層包裝；
   寬度對齊面板，滑鼠斜向移入也不會離開。 */
body.noir-body .cart-wrap::after {
  content: ''; position: absolute; right: 0; top: 100%; width: 352px; height: 24px;
}
body.noir-body .mini-cart-item {
  gap: 14px; padding: 14px 0; border-radius: var(--clay-radius); border-bottom: 1px solid var(--noir-line); color: var(--noir-ink);
}
body.noir-body .mini-cart-item:last-of-type { border-bottom: 0; }
body.noir-body .mini-cart-item:hover { background: transparent; }
body.noir-body .mini-cart-thumb { width: 60px; height: 80px; border-radius: var(--clay-radius); background: var(--noir-sand); }
body.noir-body .mini-cart-name { font-size: 13px; font-weight: 400; color: var(--noir-ink); }
body.noir-body .mini-cart-meta { font-size: 12px; color: var(--noir-gray); }
body.noir-body .mini-cart-sub { font-size: 13px; font-weight: 400; color: var(--noir-ink); }
body.noir-body .mini-cart-empty { padding: 30px 0; font-size: 13px; color: var(--noir-gray); }
body.noir-body .mini-cart-foot { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--noir-line); }
body.noir-body .mini-cart-total { margin-bottom: 14px; font-size: 12.5px; letter-spacing: .08em; color: var(--noir-gray); }
body.noir-body .mini-cart-total b { font-family: var(--noir-font-display); font-size: 18px; font-weight: 500; color: var(--noir-ink); }
body.noir-body .mini-cart-actions { gap: 0; }
body.noir-body .mini-cart-view {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0;
  border: 1px solid var(--noir-line-2); border-radius: var(--clay-radius); background: transparent;
  color: var(--noir-ink); font-size: 12px; letter-spacing: .14em;
}
body.noir-body .mini-cart-view:hover { border-color: var(--noir-brand); color: var(--noir-ink); background: transparent; }
body.noir-body .mini-cart-checkout {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0;
  border: 1px solid var(--noir-brand); border-radius: var(--clay-radius); background: var(--noir-brand);
  color: #fff; font-size: 12px; letter-spacing: .14em;
}
body.noir-body .mini-cart-checkout:hover {
  opacity: 1; transform: none; background: var(--noir-brand-hover); border-color: var(--noir-brand-hover);
}
/* ==========================================================================
   26. 皮膚接管層：搜尋浮層
   ========================================================================== */
body.noir-body .clay-search-overlay {
  padding: 108px 20px 0; background: rgba(255, 255, 255, .97);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.noir-body .clay-search-panel { max-width: 640px; gap: 14px; }
body.noir-body .clay-search-form {
  border: 1px solid var(--noir-brand); border-radius: var(--clay-radius); background: var(--noir-paper); box-shadow: none;
}
body.noir-body .clay-search-form input { padding: 16px 18px; font-size: 15px; color: var(--noir-ink); }
body.noir-body .clay-search-form button {
  width: 60px; height: 54px; border-radius: var(--clay-radius); background: transparent; color: var(--noir-ink);
}
body.noir-body .clay-search-close {
  width: 46px; height: 46px; border: 1px solid var(--noir-line-2); border-radius: var(--clay-radius); background: transparent;
  color: var(--noir-ink); box-shadow: none;
}
body.noir-body .clay-search-close:hover { transform: none; background: var(--noir-sand); }
body.noir-body .clay-search-sub {
  font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--noir-gray);
}
body.noir-body .clay-search-hot-list a {
  padding: 7px 16px; border: 1px solid var(--noir-line-2); border-radius: var(--clay-radius); background: transparent;
  color: var(--noir-ink-2); font-size: 12.5px;
}
body.noir-body .clay-search-hot-list a:hover {
  border-color: var(--noir-brand); background: var(--noir-sand); color: var(--noir-ink);
}
body.noir-body .s-hot-item, body.noir-body .s-suggest-item {
  border: 1px solid var(--noir-line); border-radius: var(--clay-radius); background: var(--noir-paper);
}
body.noir-body .s-hot-item:hover, body.noir-body .s-suggest-item:hover { border-color: var(--noir-brand); }
body.noir-body .s-hot-item img, body.noir-body .s-suggest-item img, body.noir-body .s-hot-ph { border-radius: var(--clay-radius); }
body.noir-body .s-hot-ph { background: var(--noir-sand); }
body.noir-body .s-hot-name, body.noir-body .s-suggest-name { font-weight: 400; color: var(--noir-ink); }
body.noir-body .s-hot-price, body.noir-body .s-suggest-price { font-weight: 400; color: var(--noir-ink); }
body.noir-body .s-suggest-empty {
  padding: 20px 14px; border: 1px solid var(--noir-line); border-radius: var(--clay-radius); background: transparent; color: var(--noir-gray);
}
/* ==========================================================================
   27. 皮膚接管層：移動端抽屜
   ========================================================================== */
body.noir-body .mobile-mask { background: rgba(8, 8, 10, .42); backdrop-filter: none; }
body.noir-body .mobile-drawer {
  width: 300px; border-right: 1px solid var(--noir-line); background: var(--noir-paper); box-shadow: none;
  backdrop-filter: none;
}
body.noir-body .mobile-drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--noir-line); }
body.noir-body .mobile-drawer-title {
  font-family: var(--noir-font-display); font-size: 15px; font-weight: 500; letter-spacing: .26em; color: var(--noir-ink);
}
body.noir-body .mobile-drawer-close {
  width: 36px; height: 36px; border: 1px solid var(--noir-line-2); border-radius: var(--clay-radius); background: transparent;
  box-shadow: none; color: var(--noir-ink);
}
body.noir-body .mobile-nav { padding: 4px 0 20px; }
body.noir-body .mobile-nav-link {
  gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--noir-line); background: transparent;
  color: var(--noir-ink); font-size: 14px; font-weight: 400;
}
body.noir-body .mobile-nav-link:hover { background: var(--noir-sand); color: var(--noir-ink); }
body.noir-body .mobile-nav-link svg { color: var(--noir-gray); }
body.noir-body .clay-mobile-item { border-bottom: 1px solid var(--noir-line); }
body.noir-body .clay-mobile-toggle a { padding: 14px 20px; font-size: 14px; font-weight: 400; color: var(--noir-ink); }
body.noir-body .clay-mobile-chevron { width: 48px; height: 48px; color: var(--noir-gray); }
body.noir-body .clay-mobile-sub { background: var(--noir-mist); }
body.noir-body .clay-mobile-sub a {
  padding: 12px 20px 12px 34px; border-bottom: 1px solid var(--noir-line); font-size: 13px; color: var(--noir-ink-2);
}
body.noir-body .clay-mobile-sub a:hover { background: transparent; color: var(--noir-ink); }
body.noir-body .clay-mobile-group-title {
  padding: 12px 20px 4px 32px; font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  color: var(--noir-gray-2);
}
body.noir-body .clay-mobile-sub-img img { border-radius: var(--clay-radius); }
body.noir-body .mobile-drawer-foot {
  padding: 14px 16px; border-top: 1px solid var(--noir-line); background: var(--noir-paper);
}
body.noir-body .mobile-drawer-foot > a { padding: 6px 4px; font-weight: 400; color: var(--noir-ink); }
/* ==========================================================================
   28. 皮膚接管層：貨幣／語言切換（shop.partials.locale-currency）
   深底在頁頭公告條、淺底在抽屜底部，各自一套；只改外觀，不動 partial 類名
   ========================================================================== */
body.noir-body .clay-select-wrap { position: relative; margin: 0; }
body.noir-body .noir-topbar .clay-select-wrap + .clay-select-wrap { margin-left: 22px; }
body.noir-body .noir-topbar .clay-select-btn {
  display: inline-flex; align-items: center; gap: 7px; height: auto; padding: 0;
  border: 0 !important; border-radius: var(--clay-radius) !important; background: transparent !important;
  color: rgba(255, 255, 255, .8) !important; font-size: 12px; font-weight: 400; letter-spacing: .06em;
  box-shadow: none !important; backdrop-filter: none !important;
}
body.noir-body .noir-topbar .clay-select-btn:hover {
  transform: none !important; background: transparent !important; color: #fff !important;
}
body.noir-body .noir-topbar .clay-select-menu {
  top: calc(100% + 12px); right: 0; left: auto; min-width: 160px; padding: 6px 0;
  border: 1px solid var(--noir-line) !important; border-radius: var(--clay-radius) !important; background: var(--noir-paper) !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
body.noir-body .noir-topbar .clay-select-item {
  padding: 10px 16px; border-radius: var(--clay-radius) !important; color: var(--noir-ink-2) !important; font-size: 12.5px; font-weight: 400;
}
body.noir-body .noir-topbar .clay-select-item:hover { background: var(--noir-sand) !important; color: var(--noir-ink) !important; }
body.noir-body .noir-topbar .clay-select-item.active { background: transparent !important; color: var(--noir-ink) !important; }
body.noir-body .mobile-drawer-prefs .clay-select-wrap + .clay-select-wrap { margin-left: 4px; }
body.noir-body .mobile-drawer-prefs .clay-select-btn {
  padding: 6px 8px !important; border: 1px solid var(--noir-line-2) !important; border-radius: var(--clay-radius) !important;
  background: transparent !important; color: var(--noir-ink-2) !important; font-size: 12px; font-weight: 400;
  box-shadow: none !important;
}
body.noir-body .mobile-drawer-prefs .clay-select-btn:hover { transform: none !important; color: var(--noir-ink) !important; }
body.noir-body .mobile-drawer-prefs .clay-select-menu {
  border: 1px solid var(--noir-line) !important; border-radius: var(--clay-radius) !important; background: var(--noir-paper) !important;
  box-shadow: none !important;
}
/* ==========================================================================
   29. 皮膚接管層：商品卡與卡片上的快捷加購／收藏
   ========================================================================== */
body.noir-body .grid { gap: 40px 24px; }
body.noir-body .product-card {
  border: 0; border-radius: var(--clay-radius); background: transparent; box-shadow: none; overflow: visible; transition: none;
}
body.noir-body .product-card:hover { transform: none; box-shadow: none; }
body.noir-body .product-thumb { aspect-ratio: 3 / 4; border-radius: var(--clay-radius); background: var(--noir-sand); }
body.noir-body .product-card:hover .product-thumb img { transform: none; }
body.noir-body .product-info { padding: 16px 0 0; }
body.noir-body .product-name {
  min-height: 0; font-family: var(--noir-font-body); font-size: 13.5px; font-weight: 400; line-height: 1.55;
  color: var(--noir-ink);
}
body.noir-body .product-price { margin-top: 7px; gap: 10px; }
body.noir-body .price { font-family: var(--noir-font-body); font-size: 13.5px; font-weight: 400; color: var(--noir-ink); }
body.noir-body .price-original { font-size: 12px; font-weight: 400; color: var(--noir-gray-2); }
body.noir-body .product-out { font-size: 12px; font-weight: 400; color: var(--noir-gray); }
/* 卡片收藏（形態四：淺灰細邊方形 + 灰字 + 心形） */
body.noir-body .fav-btn {
  width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--clay-radius);
  background: rgba(255, 255, 255, .82); backdrop-filter: none; box-shadow: none; color: var(--noir-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, background-color .2s, color .2s;
}
body.noir-body .fav-btn:hover {
  transform: none; border-color: var(--noir-brand); background: rgba(255, 255, 255, .96); color: var(--noir-ink);
}
body.noir-body .fav-btn.active { color: var(--noir-ink); border-color: var(--noir-brand); }
/* 快捷加購（形態二：黑實心 + 購物袋） */
body.noir-body .quick-add {
  right: 10px; bottom: 10px; width: 38px; height: 38px; border: 0; border-radius: var(--clay-radius); background: var(--noir-brand);
  backdrop-filter: none; box-shadow: none; color: #fff; opacity: 0; transform: translateY(6px);
  transition: opacity .22s, transform .22s, background-color .2s;
}
body.noir-body .product-card:hover .quick-add,
body.noir-body .quick-add:focus-visible { opacity: 1; transform: translateY(0); }
body.noir-body .quick-add:hover { background: var(--noir-brand-hover); color: var(--on-brand, #fff); box-shadow: none; }
body.noir-body .quick-add.has-variants { border: 1px solid rgba(255, 255, 255, .45); border-style: solid; }
body.noir-body .quick-add.added { background: var(--noir-brand); border-color: var(--noir-brand); color: var(--on-brand, #fff); }
/* 觸控裝置沒有 hover；aurora 原本靠 @media (hover: none) 讓快捷加購常駐，
   本檔覆寫層的特異性更高會蓋掉那條，所以在同一條件下補回，否則手機上按不到加購。 */
@media (hover: none) {
  body.noir-body .quick-add { opacity: 1; transform: none; }
}
/* ==========================================================================
   30. 皮膚接管層：四顆功能按鈕
   加入購物車＝黑實心 ＋ 購物袋／立即購買＝白底黑框描邊／
   收藏＝淺灰細邊小號 ＋ 心形／前往結帳與提交訂單＝全寬黑條 ＋ 右箭頭
   ========================================================================== */
/* 1) 加入購物車 */
body.noir-body .btn-solid,
body.noir-body .clay-add-cart {
  background: var(--noir-brand) !important; background-image: none !important;
  border: 1px solid var(--noir-brand) !important; border-radius: var(--clay-radius) !important; color: #fff !important;
  box-shadow: none !important; font-family: var(--noir-font-body); letter-spacing: .1em;
}
body.noir-body .btn-solid:hover,
body.noir-body .clay-add-cart:hover {
  background: var(--noir-brand-hover) !important; border-color: var(--noir-brand-hover) !important; color: #fff !important;
  transform: none !important; box-shadow: none !important;
}
body.noir-body .btn-solid:active, body.noir-body .clay-add-cart:active { transform: none !important; }
body.noir-body #addBtn, body.noir-body .clay-add-cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
body.noir-body #addBtn::before, body.noir-body .clay-add-cart::before {
  content: ""; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* 2) 立即購買（頁面內嵌 <style> 特異性較高，這裡用更高特異性 + !important 壓過） */
body.noir-body .btn-buy-now,
body.noir-body #buyNowBtn {
  background: var(--noir-paper) !important; background-image: none !important;
  border: 1px solid var(--noir-brand) !important; border-radius: var(--clay-radius) !important; color: var(--noir-ink) !important;
  box-shadow: none !important; font-family: var(--noir-font-body); letter-spacing: .1em;
}
body.noir-body .btn-buy-now:hover,
body.noir-body #buyNowBtn:hover {
  background: var(--noir-brand) !important; border-color: var(--noir-brand) !important; color: #fff !important;
  transform: none !important; box-shadow: none !important;
}
body.noir-body .btn-buy-now:active, body.noir-body #buyNowBtn:active { transform: none !important; }
body.noir-body .btn-buy-now:disabled,
body.noir-body #buyNowBtn:disabled { background: transparent !important; color: var(--noir-gray-2) !important; border-color: var(--noir-line-2) !important; }
/* 3) 收藏（商品詳情：淺灰細邊小號 + 心形） */
body.noir-body .fav-btn-lg {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent !important; border: 1px solid var(--noir-line-2) !important; border-radius: var(--clay-radius) !important;
  color: var(--noir-gray) !important; box-shadow: none !important; font-size: 13px; letter-spacing: .1em;
}
body.noir-body .fav-btn-lg:hover {
  border-color: var(--noir-brand) !important; color: var(--noir-ink) !important; transform: none !important; box-shadow: none !important;
}
body.noir-body .fav-btn-lg.active { border-color: var(--noir-brand) !important; color: var(--noir-ink) !important; }
/* 4) 前往結帳／提交訂單（全寬黑條 + 寬字距 + 右箭頭） */
body.noir-body .cart-checkout-btn,
body.noir-body #submitBtn,
body.noir-body #mobileSubmitBtn {
  width: 100% !important; height: 54px; padding: 0 22px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--noir-brand) !important; background-image: none !important;
  border: 1px solid var(--noir-brand) !important; border-radius: var(--clay-radius) !important; color: #fff !important;
  font-family: var(--noir-font-body); font-size: 13px !important; font-weight: 400; letter-spacing: .2em !important;
  box-shadow: none !important;
}
body.noir-body .cart-checkout-btn::after,
body.noir-body #submitBtn::after,
body.noir-body #mobileSubmitBtn::after { content: "→"; margin-left: 14px; transition: transform .2s; }
body.noir-body .cart-checkout-btn:hover::after,
body.noir-body #submitBtn:hover::after,
body.noir-body #mobileSubmitBtn:hover::after { transform: translateX(5px); }
body.noir-body .cart-checkout-btn:hover,
body.noir-body #submitBtn:hover,
body.noir-body #mobileSubmitBtn:hover {
  background: var(--noir-brand-hover) !important; border-color: var(--noir-brand-hover) !important; color: #fff !important;
  transform: none !important; box-shadow: none !important;
}
body.noir-body #submitBtn:disabled, body.noir-body #mobileSubmitBtn:disabled { opacity: .45 !important; }
body.noir-body .cart-continue { text-align: center; margin-top: 16px; }
body.noir-body .cart-continue-link {
  display: inline-flex; align-items: center; justify-content: center; min-width: 140px; padding: 0 22px; height: 46px;
  border: 1px solid var(--noir-line-2); border-radius: var(--clay-radius); background: transparent;
  color: var(--noir-ink-2); font-size: 12.5px; letter-spacing: .14em;
}
body.noir-body .cart-continue-link:hover { border-color: var(--noir-brand); color: var(--noir-ink); }
/* 移動端底部操作條（詳情頁 dm-*／結帳頁 bar） */
body.noir-body .detail-mobile-bar,
body.noir-body .checkout-mobile-bar {
  background: var(--noir-paper) !important; border-top: 1px solid var(--noir-line) !important; box-shadow: none !important;
  backdrop-filter: none !important;
}
/* 結帳頁：aurora 在 ≤900 收起桌面的 #submitBtn，但上面那條 !important 會把它又拉回來，
   手機就會同時出現兩顆「提交訂單」。底部固定欄已有提交鈕，桌面那顆此時讓位。 */
@media (max-width: 900px) {
  body.noir-body #submitBtn { display: none !important; }
  /* 提交鈕吃滿整條時，左邊的「合計」會被擠成 0 寬（看不到金額），改成按內容寬度 */
  body.noir-body #mobileSubmitBtn { width: auto !important; flex: none; padding: 0 26px !important; }
  body.noir-body .checkout-mobile-total { gap: 2px; }
  body.noir-body .checkout-mobile-total span {
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--noir-gray);
  }
  body.noir-body .checkout-mobile-total strong {
    font-family: var(--noir-font-display); font-size: 19px; font-weight: 500; color: var(--noir-ink);
  }
}
body.noir-body .detail-mobile-bar .dm-fav {
  flex: none; width: 46px; height: 46px; border: 1px solid var(--noir-line-2) !important; border-radius: var(--clay-radius) !important;
  background: transparent !important; color: var(--noir-gray) !important;
}
body.noir-body .detail-mobile-bar .dm-fav.active { color: var(--noir-ink) !important; border-color: var(--noir-brand) !important; }
body.noir-body .detail-mobile-bar .dm-add {
  background: var(--noir-brand) !important; border: 1px solid var(--noir-brand) !important; color: #fff !important;
  letter-spacing: .1em;
}
body.noir-body .detail-mobile-bar .dm-buy {
  background: var(--noir-paper) !important; border: 1px solid var(--noir-brand) !important; color: var(--noir-ink) !important;
  letter-spacing: .1em;
}
/* aurora 用詳情頁內嵌 <style> 控制這條底部欄的顯隱（≤767 才出現，並同時收起頁內按鈕列）；
   本主題禁用頁內樣式，規則必須搬進這裡——否則桌面端頁尾會多出一份「加入購物車／立即購買」 */
body.noir-body .detail-mobile-bar,
body.noir-body .detail-mobile-bar-space { display: none; }
@media (max-width: 767px) {
  body.noir-body .detail-mobile-bar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  body.noir-body .detail-mobile-bar .dm-fav { display: flex; align-items: center; justify-content: center; cursor: pointer; }
  body.noir-body .detail-mobile-bar .dm-add,
  body.noir-body .detail-mobile-bar .dm-buy { flex: 1; margin: 0; padding: 11px 0; font-size: 14px; }
  body.noir-body .detail-buy-btns { display: none !important; }
  body.noir-body .detail-mobile-bar-space { display: block; height: 74px; }
}
/* ==========================================================================
   31. 皮膚接管層：分頁與列表頁（篩選、商品格）
   ========================================================================== */
body.noir-body .pagination { gap: 6px; margin-top: 64px; }
body.noir-body .pagination a, body.noir-body .pagination span {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--clay-radius) !important; background: transparent !important; box-shadow: none !important;
  color: var(--noir-gray); font-size: 12.5px; font-weight: 400;
}
body.noir-body .pagination a:hover { border-color: var(--noir-line-2) !important; color: var(--noir-ink); transform: none; }
body.noir-body .pagination li.active a, body.noir-body .pagination li.active span,
body.noir-body .pagination li.active {
  background: var(--noir-brand) !important; border-color: var(--noir-brand) !important; color: #fff !important;
  box-shadow: none !important;
}
body.noir-body .pagination .disabled span { opacity: 1; color: var(--noir-gray-2); }
body.noir-body .plp-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding: 40px 0 0; }
body.noir-body .plp-side {
  top: calc(var(--noir-header-h) + 20px); padding: 0; border: 0; border-radius: var(--clay-radius); background: transparent;
}
body.noir-body .plp-side-title {
  padding: 0 0 14px; margin-bottom: 4px; border-bottom: 1px solid var(--noir-line);
  font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--noir-ink);
}
body.noir-body .plp-cat a { padding: 8px 0; border-radius: var(--clay-radius); font-size: 13px; color: var(--noir-ink-2); }
body.noir-body .plp-cat a:hover { background: transparent; color: var(--noir-ink); }
body.noir-body .plp-cat a.active { background: transparent; color: var(--noir-ink); font-weight: 400; }
body.noir-body .plp-cat-toggle { border-radius: var(--clay-radius); color: var(--noir-gray-2); }
body.noir-body .plp-cat-toggle:hover { color: var(--noir-ink); }
body.noir-body .plp-cat-sub { margin-left: 0; padding-left: 14px; border-left: 1px solid var(--noir-line); }
body.noir-body .plp-head { align-items: flex-end; margin-bottom: 18px; }
body.noir-body .plp-h1 { font-family: var(--noir-font-display); font-size: 34px; font-weight: 500; }
body.noir-body .plp-head-count { font-size: 12.5px; color: var(--noir-gray); }
body.noir-body .plp-crumb { margin-bottom: 10px; font-size: 12.5px; color: var(--noir-gray); }
body.noir-body .plp-crumb a { color: var(--noir-gray); }
body.noir-body .plp-crumb a:hover { color: var(--noir-ink); }
body.noir-body .plp-crumb span:last-child { font-weight: 400; color: var(--noir-ink); }
body.noir-body .plp-main { min-width: 0; }
body.noir-body .grid.plp-grid:not(.view-list) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
body.noir-body .empty { padding: 90px 0; font-size: 13.5px; font-weight: 400; color: var(--noir-gray); }
body.noir-body .empty .big { font-size: 30px; margin-bottom: 14px; color: var(--noir-gray-2); }
/* ==========================================================================
   32. 皮膚接管層：頁腳
   ========================================================================== */
body.noir-body .noir-footer { margin-top: 0; padding-top: 72px; background: var(--noir-paper); border-top: 1px solid var(--noir-line); }
body.noir-body .noir-footer__logo { max-height: 38px; width: auto; }
body.noir-body .noir-footer__pay { margin-top: 0; padding-top: 0; }
body.noir-body .noir-footer__pay img { width: auto; height: 24px; object-fit: contain; }
body.noir-body .noir-footer__bottom { padding: 22px 0; }
body.noir-body .noir-footer__bottom p { font-size: 12px; color: var(--noir-gray-2); }
/* ==========================================================================
   33. 皮膚接管層：響應式（頁眉收合／列表格數／固定操作條）
   ========================================================================== */
@media (max-width: 1220px) {
  body.noir-body .grid.plp-grid:not(.view-list) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  body.noir-body .plp-layout { gap: 36px; }
  body.noir-body .noir-dropdown { left: -18px; padding: 22px; }
  body.noir-body .noir-tools .search-box { flex: 0 1 180px; max-width: 180px; }
}
@media (max-width: 900px) {
  body.noir-body .noir-nav { display: none; }
  body.noir-body .noir-tools .search-box { display: none; }
  body.noir-body .noir-search-toggle { display: inline-flex; }
  body.noir-body .noir-menu-btn { display: inline-flex; }
  body.noir-body .plp-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.noir-body .plp-side { display: none; }
  body.noir-body .cart-actions {
    background: var(--noir-paper) !important; border-top: 1px solid var(--noir-line); box-shadow: none !important;
    backdrop-filter: none !important;
  }
}
@media (max-width: 768px) {
  body.noir-body .noir-header { position: static; }
  body.noir-body .noir-tool { padding: 0 8px; }
  /* 移動端頁頭：LOGO 與工具列必須同一行。實測 375 寬下 LOGO 文字（22px／字距 .34em）
     寬 269px，加工具列 152px 放不下 → 工具列被擠到第二行、頁頭變 116px 高。
     縮小字級與字距，並讓 LOGO 可收窄省略，工具列不參與壓縮。 */
  body.noir-body .noir-header__inner { flex-wrap: nowrap; gap: 14px; }
  body.noir-body .noir-logo { flex: 0 1 auto; min-width: 0; }
  body.noir-body .noir-logo__mark {
    font-size: 15px; letter-spacing: .14em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.noir-body .noir-logo__img { max-height: 30px; max-width: 150px; }
  body.noir-body .noir-tools { flex: 0 0 auto; }
  body.noir-body .grid, body.noir-body .grid.plp-grid:not(.view-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  body.noir-body .pagination { margin-top: 46px; }
  body.noir-body .noir-footer { padding-top: 52px; }
}
@media (max-width: 600px) {
  body.noir-body .container { padding: 0 var(--noir-gutter); }
  body.noir-body .mini-cart { display: none; }
  body.noir-body .noir-tools { gap: 0; }
  body.noir-body .grid, body.noir-body .grid.plp-grid:not(.view-list) { gap: 26px 12px; }
  body.noir-body .product-thumb { aspect-ratio: 3 / 4; }
}
/* ==========================================================================
   34. 首頁裝修：外層容器矯正
   首頁模組自帶 .noir-wrap 版面（1440 內容區 + 64 間距），但模組區掛在
   .main.container 內、aurora 又給 .design-modules 負邊距，兩者相加會出現
   雙重留白與限寬（hero 無法通欄），故首頁模組區還原為通欄、邊距歸零。
   ========================================================================== */
body.noir-body .main.container:has(> .design-modules) {
  max-width: none; padding-left: 0; padding-right: 0;
}
body.noir-body .design-modules { margin-top: 0; margin-bottom: 0; padding-bottom: 0; }

/* ==========================================================================
   35. 首頁裝修：商品牆柵格
   柵格本體沿用基底 .noir-grid（4 欄、行距 40/24、斷點 3/2/2/1 都在基底），
   這裡只把「桌面欄數」接上模組設定，後台改每行件數才會生效。
   必須包在 min-width 內：本檔在基底之後，同優先級的裸規則會蓋掉基底的
   1024／900／768／560 斷點，令手機版變成 4 欄。
   ========================================================================== */
@media (min-width: 1025px) {
  .noir-grid { grid-template-columns: repeat(var(--desktop-columns, 4), minmax(0, 1fr)); }
}
/* 卡片：第二張圖淡入（滑過卡片換圖）、售罄字樣 */
.noir-card__img--second {
  position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .25s;
}
.noir-card:hover .noir-card__img--second { opacity: 1; }
.noir-card__out { font-size: 12px; color: var(--noir-gray); letter-spacing: .06em; }

/* ==========================================================================
   36. 首頁裝修：系列分類圖卡（張數少於四張時不撐出空欄）
   ========================================================================== */
.noir-cats--1 { grid-template-columns: minmax(0, 1fr); }
.noir-cats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.noir-cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .noir-cats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .noir-cats--1, .noir-cats--2, .noir-cats--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   37. 首頁裝修：品牌故事（圖文橫幅的 Noir 變體）
   核心欄位 position／text_position／text_max_width／image_height／bg_color
   在這裡各有對應類名，商家改設定要看得到效果。
   ========================================================================== */
.noir-story__body { min-width: 0; max-width: var(--noir-story-text-max, none); }
.noir-story__body--center { text-align: center; }
.noir-story__body--right { text-align: right; }
.noir-story--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.noir-story--flip .noir-story__media { order: 2; }
.noir-story--fixed .noir-story__media { aspect-ratio: auto; height: var(--noir-story-h); }
.noir-story-bg--light { background: var(--noir-sand); }
.noir-story-bg--dark { background: var(--noir-brand); }
.noir-story-bg--dark .noir-story__title { color: #fff; }
.noir-story-bg--dark .noir-story__text { color: rgba(255, 255, 255, .72); }
.noir-story-bg--dark .noir-eyebrow { color: rgba(255, 255, 255, .6); }
.noir-story-bg--dark .noir-more { color: #fff; border-color: rgba(255, 255, 255, .45); }
.noir-story-bg--dark .noir-more:hover { border-color: #fff; }
@media (max-width: 1024px) {
  .noir-story--flip { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   38. 首頁裝修：分類膠囊（核心「分類列表」模組的 Noir 版式）
   ========================================================================== */
.noir-catpills { display: flex; flex-wrap: wrap; gap: 10px; }
.noir-catpill {
  padding: 9px 18px; border: 1px solid var(--noir-line-2);
  font-size: 12.5px; color: var(--noir-ink-2); transition: border-color .2s, color .2s;
}
.noir-catpill:hover { border-color: var(--noir-brand); color: var(--noir-ink); }