/* 共用元件：前台公開頁與登入頁共用，尺寸、字級、圓角只從 tokens.css 取值 */

/* 圖示：跟隨文字大小、垂直置中；--fw 讓列表裡的圖示等寬。放在最前面，讓元件裡的定位與 display 設定蓋過它 */
.ao-icon { display: inline-block; font-size: inherit; text-align: center; vertical-align: -0.125em; }
.ao-icon--fw { width: 1.25em; }
.ao-icon--ship,
.ao-icon--helm,
.ao-icon--line { width: 1em; height: 1em; background-position: center; background-repeat: no-repeat; background-size: contain; }
.ao-icon--ship { background-image: url('/assets/images/icon/ship_g.svg'); }
.ao-icon--helm { background-image: url('/assets/images/icon/helm_g.svg'); }
.ao-icon--line { background-image: url('/assets/images/icon/member/line.svg'); }

/* 按鈕：膠囊形，一般 40px、大型 48px；三個角色變體都是深藍灰的主要動作鈕，次要動作白底髮絲框 */
.ao-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: 40px;
  margin: 0;
  padding: var(--space-1) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.ao-btn:hover,
.ao-btn:focus { text-decoration: none; }
.ao-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* 停用按鈕收不到滑鼠事件，說明原因的 title 掛在外層 */
.ao-btn-tip { display: inline-flex; cursor: not-allowed; }
.ao-btn-tip > .ao-btn:disabled { pointer-events: none; }
.ao-btn--lg { min-height: 48px; padding: var(--space-1) var(--space-5); font-size: var(--font-size-md); }
.ao-btn--block { display: flex; width: 100%; padding-right: var(--space-3); padding-left: var(--space-3); white-space: normal; }
.ao-btn--icon { width: 40px; padding: 0; }
.ao-btn--owner,
.ao-btn--yacht,
.ao-btn--supplier { background-color: var(--color-ink); color: var(--color-white); }
.ao-btn--owner:hover,
.ao-btn--yacht:hover,
.ao-btn--supplier:hover { background-color: var(--color-ink-strong); color: var(--color-white); }
.ao-btn--outline { border-color: var(--color-line-strong); background-color: var(--color-white); color: var(--color-ink); }
.ao-btn--outline:hover { border-color: var(--color-ink); background-color: var(--color-white); color: var(--color-ink); }
.ao-btn--ghost { border-color: var(--color-white); background-color: var(--color-overlay-light); color: var(--color-white); }
.ao-btn--ghost:hover { border-color: var(--color-white); background-color: var(--color-white); color: var(--color-sea-900); }
.ao-btn--light { border-color: var(--color-gray-100); background-color: var(--color-gray-100); color: var(--color-ink); }
.ao-btn--light:hover { border-color: var(--color-line-strong); background-color: var(--color-gray-100); color: var(--color-ink); }
.ao-btn--plain { color: var(--color-neutral-300); }
.ao-btn--plain:hover { color: var(--color-neutral-600); }
.ao-btn--facebook { background-color: var(--color-social-facebook); color: var(--color-white); }
.ao-btn--line { background-color: var(--color-social-line); color: var(--color-white); }
.ao-btn--google { background-color: var(--color-social-google); color: var(--color-white); }
.ao-btn--facebook:hover,
.ao-btn--line:hover,
.ao-btn--google:hover { color: var(--color-white); opacity: 0.9; }
.ao-btn__icon-start { position: absolute; top: 50%; left: var(--space-3); transform: translateY(-50%); }

/* 提示框（sweetAlert2）：按鈕由 swal_defaults.js 套上 ao-btn，套件不再給按鈕外距 */
.ao-swal { border-radius: var(--radius-lg); font-family: var(--font-family-base); }
.ao-swal .ao-swal__btn { min-width: 96px; margin: var(--space-3) var(--space-1) 0; }

/* 輸入欄位：外框 .ao-field 也是驗證程式加 has-error 的對象 */
.ao-field { position: relative; display: block; width: 100%; }
.ao-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-heading);
  outline: none;
  transition: border-color 0.3s;
}
.ao-field__control::placeholder { color: var(--color-neutral-300); opacity: 1; }
.ao-field__control:focus { border-color: var(--color-sea-700); box-shadow: var(--shadow-focus); }
.ao-field__control--multiline { height: auto; min-height: 200px; padding-top: var(--space-2); padding-bottom: var(--space-2); line-height: var(--line-height-body); resize: vertical; }
.ao-field--has-icon .ao-field__control { padding-left: var(--space-5); }
.ao-field__icon {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-neutral-300);
  font-size: var(--font-size-base);
  pointer-events: none;
  transition: color 0.3s;
}
.ao-field:focus-within .ao-field__icon { color: var(--color-neutral-600); }
.ao-field.has-error .ao-field__control { border-color: var(--color-error); }
/* jQuery Validate 把錯誤訊息（id 為「欄位名-error」）插在欄位外框之後 */
.ao-field + [id$='-error'] { margin-top: var(--space-1); color: var(--color-error); font-size: var(--font-size-sm); line-height: var(--line-height-body); }

/* 區塊：頁面的大段落 */
.ao-section { padding: var(--space-6) 0 var(--space-7); background: var(--color-white); color: var(--color-ink); }
/* 內容區塊：公開頁、登入註冊與角色區塊都是白底，三個角色、公開與登入後頁面一致 */
.ao-section--dark,
.ao-section--owner,
.ao-section--supplier,
.ao-section--photo { background: var(--color-white); color: var(--color-ink); }

/* 眉標：區塊主標上方的小字標籤；--light 用在照片上 */
.ao-eyebrow { margin: 0 0 var(--space-2); color: var(--color-sea-700); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; }
.ao-eyebrow--light { color: var(--color-sea-100); }

/* 區塊標題：眉標＋大字主標＋淡色副標 */
.ao-section-head { margin-bottom: var(--space-5); }
.ao-section-head__title { margin: 0; color: var(--color-ink); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-tight); }
.ao-section-head__sub { margin: var(--space-2) 0 0; color: var(--color-ink-muted); font-size: var(--font-size-base); line-height: var(--line-height-body); }

/* 行動鈕：膠囊＋右側箭頭圓鈕；--light 白底（照片上主要動作）、--ghost 半透明白框、--dark 深藍灰底 */
.ao-cta { display: inline-flex; align-items: center; gap: var(--space-3); box-sizing: border-box; height: 48px; padding: 0 var(--space-1) 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); white-space: nowrap; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.ao-cta:hover { text-decoration: none; }
.ao-cta__arrow { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-round); font-size: var(--font-size-sm); transition: transform 0.2s; }
.ao-cta:hover .ao-cta__arrow { transform: translateX(2px); }
.ao-cta--light { background-color: var(--color-white); color: var(--color-ink); }
.ao-cta--light .ao-cta__arrow { background-color: var(--color-ink); color: var(--color-white); }
.ao-cta--light:hover { color: var(--color-ink); }
.ao-cta--ghost { padding-right: var(--space-4); border-color: var(--color-overlay-light); background-color: var(--color-overlay-glass); color: var(--color-white); }
.ao-cta--ghost:hover { border-color: var(--color-white); color: var(--color-white); }
.ao-cta--dark { background-color: var(--color-ink); color: var(--color-white); }
.ao-cta--dark .ao-cta__arrow { background-color: var(--color-white); color: var(--color-ink); }
.ao-cta--dark:hover { background-color: var(--color-ink-strong); color: var(--color-white); }

/* 頁面標題 */
.ao-page-title {
  margin: 0 0 var(--space-4);
  padding-bottom: 0;
  border-bottom: 0;
  color: inherit;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  text-align: left;
}
.ao-page-title--plain { padding-bottom: 0; border-bottom: 0; }
.ao-page-title__meta { display: block; margin-bottom: var(--space-2); color: var(--color-neutral-500); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }
.ao-page-title--start { text-align: left; }

/* 後台編輯器輸出的內文 */
.ao-prose { font-family: var(--font-family-base); font-size: var(--font-size-md); line-height: var(--line-height-body); overflow-wrap: break-word; }
.ao-prose p { width: auto; margin: 0 0 var(--space-2); padding: 0; font-size: inherit; }
.ao-prose h1,
.ao-prose h2 { margin: var(--space-4) 0 var(--space-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-prose h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-prose h4,
.ao-prose h5,
.ao-prose h6 { margin: var(--space-3) 0 var(--space-2); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-prose strong,
.ao-prose b { font-weight: var(--font-weight-bold); }
.ao-prose ul,
.ao-prose ol { margin: 0 0 var(--space-2) var(--space-4); }
.ao-prose ul { list-style: disc; }
.ao-prose ol { list-style: decimal; }
.ao-prose img { max-width: 100%; height: auto; }
.ao-prose a { text-decoration: underline; }
.ao-prose table { max-width: 100%; }

/* 卡片：白底、髮絲框、大圓角，不加陰影 */
.ao-card { box-sizing: border-box; padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-white); color: var(--color-ink); }
.ao-card--narrow { max-width: 700px; margin-right: auto; margin-left: auto; padding: 0; }

/* 卡片：雙欄表單用的寬版 */
.ao-card--wide { max-width: 1200px; margin-right: auto; margin-left: auto; padding: 0; }

/* 下拉：與 .ao-field__control 併用，自畫箭頭 */
.ao-field__control--select { padding-right: var(--space-5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%235d6875' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right var(--space-2) center; background-repeat: no-repeat; appearance: none; cursor: pointer; }
.ao-form__group > .ao-field + .ao-field,
.ao-form__group > .ao-field-group + .ao-field { margin-top: var(--space-2); }

/* 表單分區標題：標題文字下方髮絲線 */
.ao-form-section { margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-line); color: inherit; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }

/* 雙欄表單格線：手機寬度變單欄 */
.ao-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); margin-bottom: var(--space-5); }
.ao-form-grid__wide { grid-column: 1 / -1; }

/* 多格欄位（電話三格、手機兩格、國家地區兩格）；驗證錯誤訊息換到下一行 */
.ao-field-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ao-field-group > .ao-field { flex: 1 1 0; min-width: 0; }
.ao-field-group > .ao-field--code { flex: 0 0 88px; }
.ao-field-group > [id$='-error'] { flex: 0 0 100%; order: 1; margin-top: 0; }

/* 勾選框與同意條款 */
.ao-check { display: flex; align-items: flex-start; gap: var(--space-2); }
/* display 要寫出來：代理品牌卡的勾選框同時帶 checkbox_sty（公司資訊頁腳本用它找勾選），舊規則會把它設成 display: none */
.ao-check__input { display: inline-block; flex: none; width: 18px; height: 18px; margin: var(--space-1) 0 0; accent-color: var(--color-neutral-700); cursor: pointer; }
.ao-check__label { margin: 0; color: inherit; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); cursor: pointer; }
.ao-check__label a { color: inherit; text-decoration: underline; }
.ao-check__list { margin: var(--space-2) 0 0; padding-left: var(--space-4); font-size: var(--font-size-sm); line-height: var(--line-height-body); list-style: decimal; }
.ao-check__list-item + .ao-check__list-item { margin-top: var(--space-1); }

/* 單選群組 */
.ao-radio-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-height: 40px; }
.ao-radio { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); cursor: pointer; }
.ao-radio__input { display: inline-block; width: 18px; height: 18px; margin: 0; accent-color: var(--color-neutral-700); cursor: pointer; }

/* 檔案上傳：透明的 file input 蓋在按鈕上 */
.ao-file { position: relative; display: flex; align-items: center; box-sizing: border-box; height: 40px; overflow: hidden; border: 1px solid var(--color-neutral-100); border-radius: var(--radius-sm); background-color: var(--color-white); color: var(--color-neutral-600); cursor: pointer; }
.ao-file .ao-file__btn { position: relative; display: flex; flex: none; align-items: center; gap: var(--space-1); width: auto; height: 100%; padding: 0 var(--space-3); background-color: var(--color-neutral-200); color: var(--color-neutral-900); font-size: var(--font-size-sm); line-height: var(--line-height-heading); white-space: nowrap; }
.ao-file__input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* 選檔後由腳本加上的刪除鈕 */
.ao-file .ao-file__remove { position: absolute; top: 50%; right: var(--space-3); color: var(--color-neutral-500); cursor: pointer; transform: translateY(-50%); }
.ao-file .ao-file__remove:hover { color: var(--color-neutral-900); }
.ao-file .ao-file__name { flex: 1 1 auto; min-width: 0; padding: 0 var(--space-5) 0 var(--space-3); overflow: hidden; font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; }

/* 品牌方塊：新增品牌按鈕與品牌預覽卡 */
.ao-brand-tile { position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; min-height: 160px; margin-bottom: var(--space-4); overflow: hidden; border: 1px solid var(--color-neutral-100); border-radius: var(--radius-sm); background-color: var(--color-white); color: var(--color-neutral-700); }
.ao-brand-tile--add { align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3); border-style: dashed; border-color: var(--color-neutral-300); font-family: inherit; font-size: var(--font-size-base); cursor: pointer; transition: border-color 0.3s; }
.ao-brand-tile--add:hover { border-color: var(--color-neutral-600); color: var(--color-neutral-700); text-decoration: none; }
.ao-brand-tile__plus { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-round); background-color: var(--color-neutral-200); font-size: var(--font-size-lg); }
.ao-brand-tile__media { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; height: 100px; padding: var(--space-2); }
.ao-brand-tile__img { max-width: 100%; max-height: 100%; }
.ao-brand-tile .ao-brand-tile__remove { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background-color: transparent; color: var(--color-neutral-500); font-size: var(--font-size-base); cursor: pointer; }
.ao-brand-tile .ao-brand-tile__remove:hover { color: var(--color-neutral-900); }
.ao-brand-tile__name { margin: 0; padding: var(--space-1) var(--space-2); overflow: hidden; border-top: 1px solid var(--color-neutral-100); font-size: var(--font-size-sm); line-height: var(--line-height-body); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.ao-brand-tile__check { display: flex; justify-content: center; padding: var(--space-2); border-top: 1px solid var(--color-neutral-100); }

/* 彈窗外框：Bootstrap modal 的外框、標題、關閉鈕、底部按鈕 */
.ao-modal__content { overflow: hidden; border: 0; border-radius: var(--radius-sm); color: var(--color-neutral-700); font-size: var(--font-size-base); }
.ao-modal .ao-modal__content .ao-modal__header { display: flex; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-neutral-100); border-radius: 0; background-color: var(--color-white); }
.ao-modal__title { margin: 0; color: var(--color-neutral-900); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-modal__header .ao-modal__close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 calc(var(--space-2) * -1) 0 auto; padding: 0; color: var(--color-neutral-500); font-size: var(--font-size-xl); font-weight: var(--font-weight-regular); line-height: var(--line-height-heading); opacity: 1; text-shadow: none; }
.ao-modal__header .ao-modal__close:hover { color: var(--color-neutral-900); }
.ao-modal__body { margin: 0; padding: var(--space-4); border: 0; border-radius: 0; background-color: transparent; }
.ao-modal__actions { margin-top: var(--space-4); text-align: center; }

/* 送出時的讀取遮罩：預設隱藏，由頁面腳本切換 visibility */
.ao-spinner { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-spinner); background-color: var(--color-overlay-dim); color: var(--color-white); visibility: hidden; }

@media screen and (max-width: 768px) {
  .ao-form-grid { grid-template-columns: minmax(0, 1fr); }
  .ao-modal__body { padding: var(--space-3); }
}

/* sweetalert 確認框的按鈕：class 由頁面腳本以 confirmButtonClass／cancelButtonClass 指定 */
.ao-dialog__btn { margin: var(--space-3) var(--space-1) 0; }

/* 登入後前台的版面：淺灰底，左側白色選單＋白卡片內容區，三個角色相同 */
.ao-panel-layout { display: flex; align-items: flex-start; gap: var(--space-4); box-sizing: border-box; min-height: 600px; padding: var(--space-4) var(--space-4) var(--space-6); background-color: var(--color-surface-alt); color: var(--color-ink); }
.ao-panel-layout__main { flex: 1 1 auto; min-width: 0; }
.ao-panel-layout__main .ao-card + .ao-card { margin-top: var(--space-4); }

/* 左側選單：桌機是內容區左邊的白卡片；1200px 以下改為側滑面板，由 .ao-side-menu-toggle 開關。
   開關狀態由頁面腳本切換的 clk 決定；v2 不准寫舊 class 選擇器，改用屬性選擇器 */
.ao-side-menu { position: relative; flex: 0 0 260px; width: 260px; }
.ao-side-menu .ao-side-menu__backdrop { display: none; }
/* 白色面板、髮絲框；第一層項目是文字列，滑過與目前頁為淺灰圓角底 */
.ao-side-menu__panel { box-sizing: border-box; padding: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-white); color: var(--color-ink); }
.ao-side-menu__list,
.ao-side-menu__sub { margin: 0; padding: 0; list-style: none; }
.ao-side-menu__list > .ao-side-menu__item + .ao-side-menu__item { margin-top: var(--space-1); }
.ao-side-menu__toggle,
.ao-side-menu__link { position: relative; display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; width: 100%; min-height: 40px; word-break: normal; overflow-wrap: break-word; padding: var(--space-1) var(--space-5) var(--space-1) var(--space-3); border-radius: var(--radius-md); color: inherit; font-size: var(--font-size-sm); line-height: var(--line-height-heading); text-decoration: none; transition: background-color 0.3s, color 0.3s; }
/* 展開鈕是 button（不是 href="#" 的連結，點了不會捲回頂端），重設按鈕外觀與連結一致 */
.ao-side-menu__toggle { margin: 0; border: 0; background-color: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.ao-side-menu__list > .ao-side-menu__item > .ao-side-menu__toggle,
.ao-side-menu__list > .ao-side-menu__item > .ao-side-menu__link { font-weight: var(--font-weight-medium); }
.ao-side-menu__toggle:hover,
.ao-side-menu__link:hover { background-color: var(--color-surface-alt); color: var(--color-ink); text-decoration: none; }
.ao-side-menu__sub { padding-top: var(--space-1); }
/* 第三層前面有「‧」：折行時第二行對齊文字而不是圓點（懸掛縮排） */
.ao-side-menu__sub .ao-side-menu__sub .ao-side-menu__link { padding-left: calc(var(--space-5) + var(--space-3)); text-indent: calc(var(--space-3) * -1); }
.ao-side-menu__sub .ao-side-menu__sub .ao-side-menu__sub { padding-left: var(--space-3); }
/* 多層分類時祖先層也帶 is-active：只有目前頁（後面沒有子選單的那一層）填深色，祖先層只加粗 */
.ao-side-menu__link.is-active { font-weight: var(--font-weight-bold); }
.ao-side-menu__link.is-active:not(:has(+ .ao-side-menu__sub)) { background-color: var(--color-gray-100); color: var(--color-ink); }
.ao-side-menu__caret { position: absolute; top: 50%; right: var(--space-3); color: var(--color-neutral-300); transform: translateY(-50%); transition: transform 0.3s; }
.ao-side-menu__toggle[class~='clk'] .ao-side-menu__caret,
.ao-side-menu__link.is-active .ao-side-menu__caret { transform: translateY(-50%) rotate(90deg); }
.ao-side-menu-toggle { position: fixed; bottom: var(--space-3); left: var(--space-3); display: none; box-sizing: border-box; width: 48px; height: 48px; margin: 0; padding: 0; overflow: visible; border: 1px solid var(--color-white); border-radius: var(--radius-round); background-color: var(--color-ink); color: var(--color-white); font-size: var(--font-size-lg); line-height: var(--line-height-heading); z-index: var(--z-side-menu-toggle); transform: none; transition: background-color 0.3s; }
.ao-side-menu-toggle[class~='clk'] { left: var(--space-3); background-color: var(--color-neutral-900); transform: none; }

/* 麵包屑 */
.ao-breadcrumb { margin: 0 0 var(--space-3); color: inherit; font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-breadcrumb__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0; padding: 0; list-style: none; }
.ao-breadcrumb__item + .ao-breadcrumb__item::before { content: '>'; margin-right: var(--space-2); opacity: 0.6; }
.ao-breadcrumb__link { color: inherit; text-decoration: none; }
.ao-breadcrumb__link:hover { color: inherit; text-decoration: underline; }

/* 資料表格：外框 .ao-table-wrap 在窄螢幕水平捲動，頁面本身不出現水平捲軸 */
.ao-table-wrap { width: 100%; overflow-x: auto; }
.ao-table { width: 100%; border-collapse: collapse; background-color: var(--color-white); color: var(--color-ink); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-table__head { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); background-color: var(--color-surface-alt); color: var(--color-ink-muted); font-weight: var(--font-weight-medium); text-align: left; vertical-align: middle; white-space: nowrap; }
.ao-table__cell { padding: var(--space-3); border-bottom: 1px solid var(--color-line); vertical-align: middle; overflow-wrap: anywhere; }
.ao-table__head--center,
.ao-table__cell--center { text-align: center; }
/* 表格內沒有 class 的純文字連結（商品網址、安裝說明）：瀏覽器預設的藍改深藍灰加底線 */
.ao-table__cell a:not([class]) { color: var(--color-ink); text-decoration: underline; overflow-wrap: anywhere; }
.ao-table__media { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto; }
.ao-table__img { max-width: 100%; max-height: 100%; }
/* 鍵值表（規格、詳細資料）：標籤欄不上底色，只用髮絲線分隔 */
.ao-table--kv .ao-table__head { width: 20%; min-width: 120px; border-bottom: 1px solid var(--color-line); background-color: transparent; white-space: normal; }
.ao-table-hint { display: none; margin: 0 0 var(--space-2); color: var(--color-neutral-500); font-size: var(--font-size-sm); text-align: center; }

/* 商品卡格狀列表：卡片沿用首頁輪播的 .ao-product-card 子元素 */
.ao-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.ao-product-grid .ao-product-card { padding: 0; }
.ao-product-card__box { position: relative; display: flex; flex-direction: column; box-sizing: border-box; height: 100%; padding: var(--space-3); overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-white); color: var(--color-neutral-700); text-align: left; transition: border-color 0.2s, box-shadow 0.2s; }
.ao-product-card__box:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-card-hover); }
.ao-product-card__box .ao-product-card__name { color: var(--color-neutral-900); }
.ao-product-card__name-link { color: inherit; }
.ao-product-card__name-link:hover { color: var(--color-ink); text-decoration: none; }
.ao-product-card__model { margin: var(--space-1) 0 0; color: var(--color-neutral-500); font-size: var(--font-size-sm); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.ao-product-card__actions { margin-top: auto; padding-top: var(--space-2); }
.ao-product-card__actions .ao-btn { height: 48px; padding-right: var(--space-2); padding-left: var(--space-2); font-size: var(--font-size-sm); white-space: normal; }

/* 分頁籤：保留 Bootstrap 的 nav／nav-link／active 給 tab 腳本；選中狀態用 aria-selected 判斷 */
.ao-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0 0 var(--space-3); padding: 0; border-bottom: 1px solid var(--color-line); list-style: none; }
.ao-tabs__link { display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-height: 40px; margin-bottom: calc(var(--space-1) / -2); padding: 0 var(--space-3); border-bottom: 2px solid transparent; color: var(--color-neutral-500); font-size: var(--font-size-base); line-height: var(--line-height-heading); }
.ao-tabs__link:hover { color: var(--color-neutral-900); text-decoration: none; }
.ao-tabs__link[aria-selected='true'] { border-bottom-color: var(--color-sea-700); color: var(--color-ink); font-weight: var(--font-weight-bold); }

/* 通知列表：未讀項目左側加角色色線、標題粗體 */
.ao-notice-list { margin: 0; padding: 0; list-style: none; font-size: var(--font-size-base); line-height: var(--line-height-body); }
.ao-notice-list__head,
.ao-notice-list__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-1) var(--space-4); padding: var(--space-3); border-left: 4px solid transparent; }
.ao-notice-list__head { border-bottom: 1px solid var(--color-line); background-color: var(--color-surface-alt); color: var(--color-ink-muted); font-weight: var(--font-weight-medium); }
.ao-notice-list__item { border-bottom: 1px solid var(--color-neutral-100); color: var(--color-neutral-600); }
.ao-notice-list__date { color: var(--color-neutral-500); font-size: var(--font-size-sm); }
.ao-notice-list__subject { color: var(--color-neutral-900); overflow-wrap: anywhere; }
.ao-notice-list__subject:hover { color: var(--color-ink); }
.ao-notice-list__content { margin: 0; overflow-wrap: anywhere; }
.ao-notice-list__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ao-notice-list__item.is-unread { border-left-color: var(--color-sea-700); background-color: var(--color-surface-muted); }
.ao-notice-list__item.is-unread .ao-notice-list__subject { font-weight: var(--font-weight-bold); }

@media screen and (max-width: 1200px) {
  .ao-panel-layout { display: block; }
  .ao-side-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; opacity: 0; visibility: hidden; z-index: var(--z-side-menu); transition: opacity 0.3s, visibility 0.3s; }
  .ao-side-menu[class~='clk'] { opacity: 1; visibility: visible; }
  .ao-side-menu .ao-side-menu__backdrop { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: var(--color-overlay-dim); }
  .ao-side-menu__panel { position: absolute; top: 0; bottom: 0; left: 0; width: 320px; max-width: 85%; overflow-y: auto; border-radius: 0; transform: translateX(-100%); transition: transform 0.3s; }
  .ao-side-menu[class~='clk'] .ao-side-menu__panel { transform: translateX(0); }
  .ao-side-menu-toggle { display: flex; align-items: center; justify-content: center; }
}

@media screen and (max-width: 768px) {
  .ao-panel-layout { padding: var(--space-3) var(--space-gutter) var(--space-5); }
  .ao-panel-layout__main .ao-card { padding: var(--space-3); }
  .ao-table-hint { display: block; }
  .ao-product-grid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: var(--space-2); }
  .ao-notice-list__head { display: none; }
  .ao-notice-list__item { grid-template-columns: minmax(0, 1fr); }
  .ao-notice-list__label { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--color-neutral-500); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
}

/* 卡片標題：白卡片內的深色區塊標題 */
.ao-card__title { margin: 0 0 var(--space-3); color: var(--color-neutral-900); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-page-title__sub { display: block; margin-top: var(--space-2); color: var(--color-neutral-500); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); }

/* 表格內的連結與空狀態 */
.ao-table__link { color: var(--color-link); overflow-wrap: anywhere; }
.ao-table__link:hover { color: var(--color-neutral-900); }
.ao-table__empty { padding: var(--space-4) var(--space-3); color: var(--color-neutral-500); text-align: center; }
/* 空白列裡的引導鈕：獨立一行置中，不受表格內精簡按鈕的寬度限制 */
.ao-table__empty .ao-btn { display: flex; width: max-content; margin: var(--space-3) auto 0; padding: 0 var(--space-4); }

/* 欄位列：左標題、右欄位，768px 以下上下排列；__item 是欄位格內帶小標的子欄位 */
.ao-form-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-neutral-100); }
.ao-form-row__label { margin: 0; padding-top: var(--space-2); color: var(--color-neutral-900); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-form-row__control { min-width: 0; }
.ao-form-row__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.ao-form-row__hint { margin: var(--space-1) 0 0; color: var(--color-neutral-500); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-form-row__item { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ao-form-row__item-label { margin: 0; color: var(--color-neutral-600); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-form-row [id$='-error'] { color: var(--color-error); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-form-row__control > [id$='-error'] { margin-top: var(--space-1); }
.ao-required { margin-right: var(--space-1); color: var(--color-danger); font-style: normal; }
.ao-form-note { margin: 0 0 var(--space-3); color: var(--color-neutral-500); font-size: var(--font-size-sm); }

/* 審核狀態標籤：核准、審核中、停用 */
.ao-status { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-size: var(--font-size-sm); line-height: var(--line-height-heading); white-space: nowrap; }
.ao-status--approved { background-color: var(--color-success-bg); color: var(--color-success-text); }
.ao-status--pending { background-color: var(--color-ink); color: var(--color-white); }
.ao-status--disabled { background-color: var(--color-neutral-200); color: var(--color-neutral-700); }

@media screen and (max-width: 768px) {
  .ao-form-row { grid-template-columns: minmax(0, 1fr); }
  .ao-form-row__label { padding-top: 0; }
  .ao-form-row__pair { grid-template-columns: minmax(0, 1fr); }
}

/* 商品列表的篩選卡、品牌篩選、列表工具列、商品詳細、檔案下載：三個角色的商品頁共用；選中狀態的角色色由各角色檔的變體給 */
/* 商品列表的篩選卡：既有的排序列、篩選列在卡片內不再留左右外距 */
.ao-product-filter .ao-sort-bar,
.ao-product-filter .ao-list-section { margin: 0; }
.ao-product-filter .ao-sort-bar { display: flex; justify-content: flex-end; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.ao-product-filter .ao-list-filter { padding: var(--space-3); }
.ao-product-filter__submit { margin-top: var(--space-3); }
/* 篩選卡的搜尋鈕是一般寬度，不做滿版長條 */
.ao-product-filter .ao-product-filter__submit { display: inline-flex; width: auto; min-width: 160px; }

/* 品牌篩選：收合時只露出第一列，展開高度由頁面腳本寫在 style 上 */
.ao-brand-filter { position: relative; box-sizing: border-box; height: 115px; padding: var(--space-2) var(--space-5) var(--space-2) 0; overflow: hidden; transition: height 0.3s; }
.ao-brand-filter[class~='clk'] { overflow-y: auto; }
.ao-brand-filter__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.ao-brand-filter .ao-brand-filter__toggle { position: absolute; top: var(--space-2); right: 0; color: var(--color-neutral-600); }
.ao-brand-filter__toggle .ao-icon { transition: transform 0.3s; }
.ao-brand-filter__toggle.is-open .ao-icon { transform: rotate(180deg); }

/* 品牌選項：logo＋名稱（商品數），勾選時外框換角色色；勾選框視覺隱藏但保留鍵盤操作 */
.ao-brand-option { position: relative; min-width: 0; }
.ao-brand-option__input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; opacity: 0; }
.ao-brand-option__label { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); box-sizing: border-box; width: 100%; margin: 0; padding: var(--space-2); border: 2px solid transparent; border-radius: var(--radius-sm); background-color: var(--color-white); color: var(--color-neutral-700); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); cursor: pointer; transition: border-color 0.3s; }
.ao-brand-option__label:hover { border-color: var(--color-neutral-200); }
.ao-brand-option__input:checked + .ao-brand-option__label { border-color: var(--color-neutral-900); }
.ao-brand-option__input:focus-visible + .ao-brand-option__label { border-color: var(--color-neutral-500); }
.ao-brand-option__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; }
.ao-brand-option__img { max-width: 100%; max-height: 100%; }
.ao-brand-option__name { display: flex; justify-content: center; width: 100%; min-width: 0; }
.ao-brand-option__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-brand-option__check { position: absolute; top: var(--space-1); right: var(--space-1); color: var(--color-neutral-900); font-size: var(--font-size-base); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.ao-brand-option__input:checked ~ .ao-brand-option__check { opacity: 1; }

/* 列表工具列：結果數、關鍵字、排序、格狀／條列切換 */
.ao-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-neutral-100); }
.ao-list-toolbar__count { margin: 0; color: var(--color-neutral-600); font-size: var(--font-size-sm); }
.ao-list-toolbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ao-list-toolbar__sort { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-neutral-600); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); white-space: nowrap; }
.ao-list-toolbar__sort .ao-field { width: auto; }
.ao-search-field { display: flex; width: 280px; max-width: 100%; }
.ao-search-field .ao-field__control { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ao-search-field .ao-search-field__btn { flex: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ao-view-toggle { display: flex; gap: var(--space-1); }
.ao-view-toggle__link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-neutral-100); border-radius: var(--radius-sm); color: var(--color-neutral-500); font-size: var(--font-size-lg); }
.ao-view-toggle__link:hover { color: var(--color-neutral-900); }
.ao-view-toggle__link.is-active { border-color: var(--color-neutral-900); background-color: var(--color-neutral-900); color: var(--color-white); }

/* 條列表格內的商品名稱 */
.ao-product-row__name { display: block; color: var(--color-neutral-900); font-weight: var(--font-weight-bold); }
.ao-product-row__name:hover { color: var(--color-ink); text-decoration: none; }
.ao-product-row__meta { display: block; color: var(--color-neutral-500); }

/* 商品詳細：左圖庫、右摘要 */
.ao-product-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-4); }
.ao-gallery__main { display: flex; align-items: center; justify-content: center; box-sizing: border-box; aspect-ratio: 1; padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-white); }
.ao-gallery__img { max-width: 100%; max-height: 100%; }
.ao-gallery__thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.ao-gallery__thumb { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 64px; height: 64px; padding: var(--space-1); border: 1px solid var(--color-line); border-radius: var(--radius-md); background-color: var(--color-white); }
.ao-gallery__thumb-img { max-width: 100%; max-height: 100%; cursor: pointer; }
.ao-product-summary__brand { display: inline-flex; align-items: center; height: 56px; margin-bottom: var(--space-3); }
.ao-product-summary__brand-img { max-width: 160px; max-height: 100%; }
.ao-product-summary__name { margin: 0 0 var(--space-2); color: var(--color-ink); font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); overflow-wrap: anywhere; }
.ao-product-summary__desc { margin: 0 0 var(--space-3); color: var(--color-neutral-600); font-size: var(--font-size-base); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.ao-product-summary__price { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-3); }
.ao-product-summary__price-label { color: var(--color-neutral-600); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.ao-product-summary__price-value { color: var(--color-ink); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
.ao-product-summary__actions { margin-bottom: var(--space-4); }
.ao-inline-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; list-style: none; }
.ao-link-list { margin: 0; overflow-wrap: anywhere; }
.ao-link-list + .ao-link-list { margin-top: var(--space-1); }

/* 商品詳細的檔案下載分頁 */
.ao-download__title { margin: 0 0 var(--space-2); color: var(--color-neutral-600); font-size: var(--font-size-sm); }
.ao-download { margin: 0; padding: 0; list-style: none; }
.ao-download__item + .ao-download__item { margin-top: var(--space-1); }
.ao-download__link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-link); font-size: var(--font-size-base); overflow-wrap: anywhere; }
.ao-download__ext { padding: 0 var(--space-1); border-radius: var(--radius-sm); background-color: var(--color-neutral-200); color: var(--color-neutral-700); font-size: var(--font-size-sm); }

/* 窄版表單（個人資料）、唯讀值 */
.ao-form--narrow { max-width: 472px; margin-right: auto; margin-left: auto; }
.ao-form__value { display: flex; align-items: center; box-sizing: border-box; min-height: 40px; margin: 0; padding: 0 var(--space-3); border-radius: var(--radius-sm); background-color: var(--color-surface-muted); color: var(--color-neutral-600); font-size: var(--font-size-base); overflow-wrap: anywhere; }

/* 供應商公司介紹：頂端照片橫幅，下緣漸層融入頁面底色，白卡片疊在照片下半部 */
.ao-supplier-about { position: relative; overflow: hidden; padding-top: calc(var(--space-6) * 3); }
.ao-supplier-about__hero { position: absolute; top: 0; left: 0; width: 100%; height: 480px; }
.ao-supplier-about__hero::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 50%; background: linear-gradient(transparent, var(--color-neutral-900)); }
.ao-supplier-about__hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ao-supplier-about__body { position: relative; }
.ao-supplier-about__banner { display: block; width: 100%; height: auto; margin-bottom: var(--space-4); border-radius: var(--radius-sm); }
.ao-supplier-about__text { margin-bottom: var(--space-4); color: var(--color-neutral-600); font-size: var(--font-size-base); line-height: var(--line-height-body); overflow-wrap: anywhere; }
.ao-supplier-about__brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.ao-supplier-about__brands .ao-brand-option__label { border-color: var(--color-neutral-100); cursor: default; }
.ao-supplier-about__actions { text-align: center; }

/* 數量＋加入：商品卡底部、條列表格最後一欄 */
.ao-qty-add { display: flex; align-items: center; justify-content: center; gap: var(--space-1); }
.ao-qty-add .ao-field__control { padding: 0 var(--space-1); text-align: center; }
.ao-qty-add .ao-qty-add__qty { flex: 0 0 64px; }
.ao-product-card__actions.ao-qty-add .ao-qty-add__btn { flex: 1 1 auto; min-width: 0; height: 40px; }

@media screen and (max-width: 992px) {
  .ao-product-detail { grid-template-columns: minmax(0, 1fr); }
  .ao-gallery__main { max-width: 400px; }
}

@media screen and (max-width: 768px) {
  .ao-supplier-about { padding-top: calc(var(--space-6) * 2); }
  .ao-supplier-about__hero { height: 240px; }
  .ao-brand-filter__grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .ao-list-toolbar__tools,
  .ao-search-field { width: 100%; }
}

/* 「AI 資料」來源標籤：ao-status 的變體，型錄 AI 與爬蟲來源的商品共用 */
.ao-status--ai { border: 1px solid var(--color-ai-tag-border); background-color: var(--color-ai-tag-bg); color: var(--color-primary); }

/* 步驟列：目前步驟 is-active、已完成 is-done；編號由 CSS 計數，角色配色由各角色檔覆寫底線顏色 */
.ao-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: ao-steps; }
.ao-steps__item { flex: 1 1 160px; padding: var(--space-2) var(--space-3); border-bottom: 3px solid var(--color-neutral-200); color: var(--color-neutral-500); font-size: var(--font-size-base); line-height: var(--line-height-heading); counter-increment: ao-steps; }
.ao-steps__item::before { content: counter(ao-steps) '　'; }
.ao-steps__item.is-active { border-bottom-color: var(--color-neutral-700); color: var(--color-neutral-900); font-weight: var(--font-weight-bold); }
.ao-steps__item.is-done { border-bottom-color: var(--color-neutral-300); color: var(--color-neutral-700); }

/* 拖曳上傳區：整塊可點選開檔，檔案欄位視覺隱藏；拖曳經過時腳本加 is-dragover */
.ao-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-5) var(--space-3); border: 2px dashed var(--color-neutral-300); border-radius: var(--radius-sm); background-color: var(--color-surface-muted); color: var(--color-neutral-700); text-align: center; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; }
.ao-dropzone:hover,
.ao-dropzone:focus,
.ao-dropzone.is-dragover { border-color: var(--color-neutral-600); background-color: var(--color-white); outline: none; }
.ao-dropzone__icon { color: var(--color-neutral-500); font-size: var(--font-size-3xl); }
.ao-dropzone__title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.ao-dropzone__help { color: var(--color-neutral-500); font-size: var(--font-size-sm); }
.ao-dropzone__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }

/* 已選檔案清單：檔名、大小、處理狀態與移除鈕；失敗列加 is-failed */
.ao-upload-list { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.ao-upload-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-neutral-100); font-size: var(--font-size-sm); }
.ao-upload-list__icon { color: var(--color-neutral-500); }
.ao-upload-list__name { flex: 1 1 200px; min-width: 0; color: var(--color-neutral-900); overflow-wrap: anywhere; }
.ao-upload-list__size,
.ao-upload-list__status { color: var(--color-neutral-500); }
.ao-upload-list__item.is-failed .ao-upload-list__status { color: var(--color-danger); }
.ao-upload-list .ao-upload-list__remove { width: 32px; min-height: 32px; color: var(--color-neutral-500); }

/* 品牌勾選式下拉（篩選列）：可複選、可搜尋，選單展開時 is-open，有勾選時 has-value；行為在 brand_dropdown.js */
.ao-brand-dropdown { position: relative; width: 260px; max-width: 100%; }
.ao-brand-dropdown__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 var(--space-3); border: 1px solid var(--color-neutral-100); border-radius: var(--radius-sm); background-color: var(--color-white); color: var(--color-neutral-300); font-family: inherit; font-size: var(--font-size-base); text-align: left; cursor: pointer; }
.ao-brand-dropdown.has-value .ao-brand-dropdown__toggle { border-color: var(--color-neutral-500); color: var(--color-neutral-900); }
.ao-brand-dropdown__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-brand-dropdown__arrow { display: inline-block; color: var(--color-neutral-600); transition: transform 0.2s; }
.ao-brand-dropdown.is-open .ao-brand-dropdown__arrow { transform: rotate(180deg); }
.ao-brand-dropdown__menu { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: var(--z-dropdown); display: none; box-sizing: border-box; width: 320px; max-width: 86vw; padding: var(--space-2); border: 1px solid var(--color-neutral-100); border-radius: var(--radius-sm); background-color: var(--color-white); box-shadow: var(--shadow-dropdown); color: var(--color-neutral-900); }
.ao-brand-dropdown.is-open .ao-brand-dropdown__menu { display: block; }
.ao-brand-dropdown__menu .ao-brand-dropdown__search { height: 36px; margin-bottom: var(--space-1); padding: 0 var(--space-2); }
.ao-brand-dropdown__list { max-height: 260px; overflow-y: auto; }
.ao-brand-dropdown__item { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-1); border-radius: var(--radius-sm); color: var(--color-neutral-900); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); cursor: pointer; }
.ao-brand-dropdown__item:hover { background-color: var(--color-surface-muted); }
.ao-brand-dropdown__input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--color-ink); }
.ao-brand-dropdown__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-brand-dropdown__num { flex: none; color: var(--color-neutral-500); font-size: var(--font-size-sm); }
.ao-brand-dropdown__empty { margin: 0; padding: var(--space-2) var(--space-1); color: var(--color-neutral-500); font-size: var(--font-size-sm); }
.ao-brand-dropdown__foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-neutral-100); }
.ao-brand-dropdown__foot .ao-btn { min-height: 32px; padding: 0 var(--space-3); font-size: var(--font-size-sm); }
@media screen and (max-width: 768px) {
  .ao-brand-dropdown { width: 100%; }
}

/* 商品圖、品牌 logo 沒有圖檔時的替代：佔位圖示與品牌名稱文字 */
.ao-pic-placeholder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; background-color: var(--color-surface-muted); color: var(--color-neutral-300); font-size: var(--font-size-3xl); }
.ao-table__media .ao-pic-placeholder { position: static; width: 100%; height: 100%; font-size: var(--font-size-xl); }
.ao-brand-text { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; color: var(--color-neutral-900); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); overflow-wrap: anywhere; }

/* 商品卡：「AI 資料」標籤固定在右上角，會出現標籤的列表加 --tagged 讓品牌讓出位置；船東卡片另列供貨狀態與船級社認證 */
.ao-product-card__box .ao-product-card__ai { position: absolute; top: var(--space-1); right: var(--space-1); padding: 0 var(--space-1); font-size: var(--font-size-sm); }
.ao-product-card__meta { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--color-line); color: var(--color-ink-muted); font-size: var(--font-size-sm); line-height: var(--line-height-body); text-align: left; }
.ao-product-card__meta-row { display: flex; gap: var(--space-1); }
.ao-product-card__meta-label { flex: none; font-weight: var(--font-weight-regular); }
.ao-product-card__meta-value { min-width: 0; margin: 0; color: var(--color-neutral-900); overflow-wrap: anywhere; }

/* 商品詳細：品牌下方的「AI 資料」標籤 */
.ao-product-summary__source { margin: 0 0 var(--space-2); }

/* 強調按鈕：橘色的主要動作（進行比價、匯出詢價單） */
.ao-btn--accent { background-color: var(--color-ink); color: var(--color-white); }
.ao-btn--accent:hover { background-color: var(--color-ink-strong); color: var(--color-white); }

/* 供貨狀態徽章：--1 現貨、--2 預購、--3 停產、--unset 未設定 */
.ao-supply-badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill); color: var(--color-white); font-size: var(--font-size-sm); line-height: var(--line-height-body); white-space: nowrap; }
.ao-supply-badge--1 { background-color: var(--color-supply-in-stock); }
.ao-supply-badge--2 { background-color: var(--color-supply-preorder); }
.ao-supply-badge--3 { background-color: var(--color-supply-discontinued); }
.ao-supply-badge--unset { padding: 0; color: var(--color-neutral-300); }

/* 比價勾選列：結果數、全選目前篩選結果、已勾選數、進行比價；勾選數由頁面腳本填入 */
.ao-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background-color: var(--color-gray-100); color: var(--color-neutral-700); font-size: var(--font-size-sm); }
.ao-compare-bar__total { padding-right: var(--space-4); border-right: 1px solid var(--color-neutral-200); }
.ao-compare-bar__num { color: var(--color-ink); font-size: var(--font-size-base); }
.ao-compare-bar__num--accent { color: var(--color-ink); }
.ao-compare-bar__all { align-items: center; }
.ao-compare-bar__all .ao-check__input { margin: 0; accent-color: var(--color-ink); }
.ao-compare-bar__go { margin-left: auto; }

/* 商品卡左上角的比價勾選框，勾選時卡片外框換船東色 */
.ao-product-card__check { position: absolute; top: var(--space-1); left: var(--space-1); z-index: var(--z-raised); display: inline-flex; margin: 0; cursor: pointer; }
.ao-product-card__check-input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-ink); cursor: pointer; }
.ao-product-card.is-selected .ao-product-card__box { border-color: var(--color-ink); }

/* 物件比價表：第一欄為比較項目、其餘每欄一個商品；未勾選匯出的欄加 is-export-off 淡化 */
.ao-compare-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.ao-compare-head .ao-compare-head__title { margin: 0; color: var(--color-ink); }
.ao-compare-table-wrap { border: 1px solid var(--color-neutral-100); }
.ao-compare-table { width: 100%; min-width: 640px; border-collapse: collapse; color: var(--color-neutral-700); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-compare-table__label,
.ao-compare-table__product,
.ao-compare-table__cell { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-neutral-100); vertical-align: middle; }
.ao-compare-table__label { min-width: 120px; background-color: var(--color-surface-alt); color: var(--color-neutral-900); font-weight: var(--font-weight-bold); text-align: left; }
.ao-compare-table__product { min-width: 170px; background-color: var(--color-gray-100); color: var(--color-ink); font-weight: var(--font-weight-bold); text-align: center; }
.ao-compare-table__cell { text-align: center; overflow-wrap: anywhere; }
.ao-compare-table__cell--price { color: var(--color-ink); font-weight: var(--font-weight-bold); }
.ao-compare-table__pic { position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; margin: 0 auto var(--space-1); }
.ao-compare-table__img { max-width: 100%; max-height: 100%; }
.ao-compare-table__pic .ao-pic-placeholder { font-size: var(--font-size-xl); }
.ao-compare-table__name { display: block; margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.ao-compare-table .is-export-off { opacity: 0.4; }
.ao-compare-table__pick { align-items: center; justify-content: center; }
.ao-compare-table__pick .ao-check__input { margin: 0; accent-color: var(--color-ink); }
.ao-compare-export { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.ao-compare-export__select { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
.ao-compare-export__select .ao-check { align-items: center; }
.ao-compare-export__select .ao-check__input { margin: 0; accent-color: var(--color-ink); }

@media screen and (max-width: 768px) {
  .ao-compare-bar__total { width: 100%; padding-right: 0; border-right: 0; }
  .ao-compare-bar__go { width: 100%; margin-left: 0; }
  .ao-compare-export .ao-btn { width: 100%; }
}

/* 精選標籤：深色膠囊，卡片上疊在商品圖左上角（AI 標籤在右上角） */
.ao-status--featured { background-color: var(--color-ink); color: var(--color-white); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-caps); }
.ao-product-card__box .ao-product-card__featured { position: absolute; z-index: var(--z-raised); top: var(--space-2); left: var(--space-2); }