/* 前台版面：頁首、手機選單、頁尾，以及不需登入的公開頁與登入頁 */

/* 頁面底色白；頁尾下方露出的 body 與頁尾同為淺灰，不露出舊樣式的黑底 */
.ao-site { background-color: var(--color-surface-alt); color: var(--color-ink); font-family: var(--font-family-base); }

/* 頁首（桌機）：白底髮絲下框，固定在頂端（舊樣式給 position: fixed），下方佔位同高；導覽是文字連結、滑過與目前頁為淺灰膠囊；顯示與否沿用舊的 pc_show／mob_show 斷點 */
.ao-header { box-sizing: border-box; height: 72px; border-bottom: 1px solid var(--color-line); background-color: var(--color-white); color: var(--color-ink); font-size: var(--font-size-base); line-height: var(--line-height-heading); z-index: var(--z-popover); }
.ao-header--light { color: var(--color-ink); }
.ao-header-spacer { height: 72px; }
.ao-header__inner { display: flex; align-items: center; gap: var(--space-4); height: 100%; padding: 0 var(--space-5); }
.ao-header__logo { display: block; flex: none; }
.ao-header__logo-img { display: block; width: auto; height: 36px; }
.ao-header__nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: var(--space-1); min-width: 0; }
.ao-header__item { position: relative; flex: none; }
.ao-header__link { position: relative; display: flex; align-items: center; gap: var(--space-1); box-sizing: border-box; height: 36px; margin: 0; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); color: var(--color-ink-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
/* 有子選單的項目用 button 觸發，鍵盤 Tab 進來時以 :focus-within 展開，與滑鼠 hover 同一套樣式 */
.ao-header__link--toggle { background-color: transparent; font-family: inherit; line-height: inherit; }
.ao-header__link:hover,
.ao-header__item:hover .ao-header__link,
.ao-header__item:focus-within .ao-header__link { background-color: var(--color-gray-100); color: var(--color-ink); text-decoration: none; }
.ao-header__item.is-active .ao-header__link { background-color: var(--color-gray-100); color: var(--color-ink); font-weight: var(--font-weight-bold); }
/* 子選單是白卡片，與觸發鈕之間留 8px，以 ::before 補上滑鼠經過的橋接區 */
.ao-header__submenu { position: absolute; top: calc(100% + var(--space-2)); left: 50%; min-width: 200px; margin: 0; padding: var(--space-1); border: 1px solid var(--color-line); border-radius: var(--radius-md); background-color: var(--color-white); box-shadow: var(--shadow-card); list-style: none; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity 0.2s, visibility 0.2s; }
.ao-header__submenu::before { content: ''; position: absolute; right: 0; bottom: 100%; left: 0; height: var(--space-2); }
.ao-header__item:hover .ao-header__submenu,
.ao-header__item:focus-within .ao-header__submenu { opacity: 1; visibility: visible; }
.ao-header__sublink { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-ink); font-size: var(--font-size-sm); text-align: left; white-space: nowrap; transition: background-color 0.2s; }
.ao-header__sublink:hover,
.ao-header__sublink.is-active { background-color: var(--color-gray-100); color: var(--color-ink); text-decoration: none; }
.ao-header__tools { display: flex; flex: none; align-items: center; gap: var(--space-3); margin-left: auto; }
.ao-header__auth { display: flex; align-items: center; }
.ao-header__auth-link { display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); color: var(--color-ink-muted); font-size: var(--font-size-sm); line-height: var(--line-height-heading); white-space: nowrap; transition: color 0.2s; }
.ao-header__auth-link:hover { color: var(--color-ink); text-decoration: none; }
.ao-header__auth-link + .ao-header__auth-link { border-left: 1px solid var(--color-line); }
.ao-header__account { display: flex; align-items: center; gap: var(--space-2); }
.ao-header__account-name { margin: 0 var(--space-1) 0 0; color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.ao-header__account-link { display: inline-flex; align-items: center; box-sizing: border-box; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--font-size-sm); line-height: var(--line-height-heading); white-space: nowrap; transition: background-color 0.2s, border-color 0.2s; }
.ao-header__account-link:hover { border-color: var(--color-line-strong); background-color: var(--color-gray-100); color: var(--color-ink); text-decoration: none; }
.ao-header__account-link.is-active { border-color: var(--color-ink); background-color: var(--color-ink); color: var(--color-white); }
.ao-header__bell { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-round); color: var(--color-ink); font-size: var(--font-size-lg); transition: background-color 0.2s; }
.ao-header__bell:hover,
.ao-header__bell.is-active { background-color: var(--color-gray-100); color: var(--color-ink); }
.ao-header__badge { position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-1) * -1); display: flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-pill); background-color: var(--color-danger); color: var(--color-white); font-size: var(--font-size-sm); }
/* 供應商登入後的選單項目多，英文在 1920px 以下排不進一列：允許換成兩列 */
.ao-site--en .ao-header--long-nav .ao-header__nav { flex-wrap: wrap; gap: var(--space-1); }
/* 排成兩列時每顆收矮到 28px，兩列加間距仍在 72px 頂列內 */
.ao-site--en .ao-header--long-nav .ao-header__link { height: 28px; }

/* 語系切換：外框保留 language_sel_box，樣式全部由這裡給 */
.ao-lang { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--color-ink-muted); font-size: var(--font-size-sm); order: 1; }
.ao-lang .ao-field__icon { display: flex; width: 36px; height: 36px; color: inherit; font-size: var(--font-size-sm); }
.ao-lang .ao-lang__select { width: auto; height: 36px; padding-right: var(--space-5); padding-left: calc(var(--space-4) + var(--space-2)); border-color: var(--color-line); border-radius: var(--radius-pill); font-size: var(--font-size-sm); background: var(--color-white) 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") right var(--space-2) center no-repeat; color: var(--color-ink); appearance: none; cursor: pointer; }
.ao-lang__select option { color: var(--color-ink); background-color: var(--color-white); }

/* 頁首（手機）與側滑選單 */
.ao-mobile-bar { box-sizing: border-box; height: 60px; padding: var(--space-2) var(--space-gutter); border-bottom: 1px solid var(--color-line); background-color: var(--color-white); }
.ao-mobile-bar__logo { display: inline-block; }
.ao-mobile-bar__logo-img { display: block; width: auto; height: 32px; margin-top: var(--space-1); }
.ao-mobile-bar__toggle { position: absolute; top: 50%; right: var(--space-2); color: var(--color-ink); font-size: var(--font-size-xl); transform: translateY(-50%); }
.ao-mobile-bar__toggle:hover { color: var(--color-ink-muted); }
.ao-drawer { box-sizing: border-box; padding: 0; background-color: var(--color-white); box-shadow: var(--shadow-drawer); z-index: var(--z-drawer); }
.ao-drawer-backdrop { z-index: var(--z-drawer-backdrop); }
.ao-drawer__search { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3) 0; }
.ao-drawer__search > .ao-field { flex: 1 1 auto; min-width: 0; }
.ao-drawer__list { margin: var(--space-2) 0; padding: 0; list-style: none; }
.ao-drawer__item { border-bottom: 1px solid var(--color-line); color: var(--color-ink); font-size: var(--font-size-base); }
.ao-drawer__link,
.ao-drawer__toggle { position: relative; display: block; box-sizing: border-box; width: 100%; margin: 0; padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); color: var(--color-ink); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); cursor: pointer; }
.ao-drawer__toggle { border: 0; background-color: transparent; font-family: inherit; text-align: left; }
.ao-drawer__link:hover,
.ao-drawer__toggle:hover { color: var(--color-sea-700); text-decoration: none; }
.ao-drawer__link--muted { color: var(--color-ink-muted); }
.ao-drawer__link.is-active { color: var(--color-sea-700); }
.ao-drawer__caret { position: absolute; top: 50%; right: var(--space-3); color: var(--color-ink-muted); transform: translateY(-50%); transition: transform 0.3s; }
/* 展開狀態由 screen_control.js 的 AccordionMenu 加上的 clk 決定；v2 不准寫舊 class 選擇器，改用屬性選擇器 */
.ao-drawer__toggle[class~='clk'] .ao-drawer__caret { transform: translateY(-50%) rotate(180deg); }
.ao-drawer__sub { margin: 0; padding: 0; list-style: none; background-color: var(--color-surface-alt); }
.ao-drawer__sub .ao-drawer__link { padding-left: var(--space-5); border-top: 1px solid var(--color-line); color: var(--color-ink); font-weight: var(--font-weight-regular); }
.ao-drawer__sub .ao-drawer__link:hover,
.ao-drawer__sub .ao-drawer__link.is-active { background-color: var(--color-gray-100); color: var(--color-ink); }
/* 供應商頁首的手機選單：倒數第三項不顯示（沿用舊版行為） */
.ao-drawer__list--supplier > .ao-drawer__item:nth-last-child(3) { display: none; }

/* 頁尾：淺灰底多欄、小字，版權列髮絲上框 */
.ao-footer { width: 100%; border-top: 1px solid var(--color-line); background-color: var(--color-surface-alt); color: var(--color-ink); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-footer__top { padding: var(--space-6) var(--space-3) var(--space-4); }
.ao-footer__col { margin-bottom: var(--space-4); }
.ao-footer__logo { display: inline-block; margin-bottom: var(--space-3); }
.ao-footer__logo-img { display: block; width: auto; height: 32px; }
.ao-footer__intro { max-width: 440px; margin-bottom: var(--space-4); color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.ao-footer__title { margin: 0 0 var(--space-3); color: var(--color-ink); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-caps); }
.ao-footer__list { margin: 0; padding: 0; list-style: none; }
.ao-footer__contact { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--color-ink-muted); }
.ao-footer__contact .ao-icon { flex: none; color: var(--color-ink-muted); line-height: inherit; }
.ao-footer__link { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--color-ink-muted); transition: color 0.2s; }
.ao-footer__link:hover { color: var(--color-ink); text-decoration: none; }
.ao-footer__link .ao-icon { flex: none; line-height: inherit; }
.ao-footer .ao-subscribe { display: flex; gap: var(--space-2); width: 400px; max-width: 100%; padding: 0; border: 0; background-color: transparent; }
.ao-footer .ao-subscribe .ao-subscribe__input { flex: 1 1 auto; float: none; width: auto; min-width: 0; height: 40px; padding: 0 var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-pill); background-color: var(--color-white); color: var(--color-ink); }
.ao-footer .ao-subscribe .ao-subscribe__btn { flex: none; float: none; width: auto; height: 40px; background-color: var(--color-ink); color: var(--color-white); font-size: var(--font-size-sm); }
.ao-subscribe + [id$='-error'] { margin-top: var(--space-1); color: var(--color-error); font-size: var(--font-size-sm); }
.ao-footer__bottom { padding: var(--space-3) 0; border-top: 1px solid var(--color-line); color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.ao-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.ao-footer__copyright { margin: 0; }
.ao-footer__credit { color: inherit; text-decoration: underline; }
.ao-footer__credit:hover { color: var(--color-ink); }
.ao-footer__links { display: flex; gap: var(--space-3); margin: 0; }
.ao-footer__links a { color: var(--color-ink-muted); transition: color 0.2s; }
.ao-footer__links a:hover { color: var(--color-ink); text-decoration: none; }

/* 表單 */
.ao-form__group { margin-bottom: var(--space-4); }
.ao-form__label { display: block; margin-bottom: var(--space-2); color: inherit; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-heading); }
.ao-form__intro { margin: 0 0 var(--space-5); padding: var(--space-4) 0 0; font-size: var(--font-size-base); line-height: var(--line-height-body); text-align: center; }
.ao-form__actions { text-align: center; }
.ao-form__submit { min-width: 180px; }
.ao-captcha__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ao-captcha__row > .ao-field { flex: 0 1 280px; min-width: 160px; }
.ao-captcha__row > [id$='-error'] { flex: 0 0 100%; order: 1; margin-top: 0; color: var(--color-error); font-size: var(--font-size-sm); }
.ao-captcha__row + [id$='-error'] { margin-top: var(--space-1); color: var(--color-error); font-size: var(--font-size-sm); }
/* 驗證碼圖與輸入框等高、白底細框；重新產生鈕是最後一顆白底圓鈕（標記順序是 輸入框、按鈕、圖，以 order 調換） */
.ao-captcha__img { order: 1; box-sizing: border-box; width: auto; height: 40px; padding: 0 var(--space-2); border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); background-color: var(--color-white); cursor: pointer; }
.ao-captcha__row > .ao-btn--icon { order: 2; border-color: var(--color-line-strong); background-color: var(--color-white); color: var(--color-ink-muted); }
.ao-captcha__row > .ao-btn--icon:hover { border-color: var(--color-ink); color: var(--color-ink); }
.ao-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0; color: inherit; font-size: var(--font-size-base); }
.ao-divider::before,
.ao-divider::after { content: ''; flex: 1 1 auto; height: 1px; background-color: var(--color-neutral-300); }

/* 內容頁 */
.ao-news-list { margin: 0; padding: 0; list-style: none; }
.ao-news-item { border-bottom: 1px solid var(--color-line); }
.ao-news-item__link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4) 0; color: var(--color-black); }
.ao-news-item__link:hover { color: var(--color-neutral-300); }
.ao-news-item__tag { flex: none; width: 100px; padding: var(--space-1); border-radius: var(--radius-sm); background-color: var(--color-sea-700); color: var(--color-white); font-size: var(--font-size-sm); text-align: center; }
.ao-news-item--owner .ao-news-item__tag { background-color: var(--color-sea-700); }
.ao-news-item--supplier .ao-news-item__tag { background-color: var(--color-sea-100); color: var(--color-neutral-900); }
.ao-news-item__date { flex: none; color: var(--color-neutral-500); font-size: var(--font-size-base); }
.ao-news-item__title { flex: 1 1 320px; min-width: 0; font-size: var(--font-size-base); }
.ao-news-item__more { flex: none; border-color: var(--color-sea-700); color: var(--color-sea-700); }
.ao-news-item__link:hover .ao-news-item__more { background-color: var(--color-surface-alt); color: var(--color-ink); }
.ao-pagination { display: flex; justify-content: flex-end; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: var(--font-size-base); }
.ao-pagination a { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-dark); }
.ao-pagination a:not([href]) { background-color: var(--color-ink); color: var(--color-white); }
.ao-news-figure { margin-bottom: var(--space-4); }
.ao-news-figure__img { max-width: 100%; height: auto; }
.ao-logo-grid { margin: 0 calc(var(--space-2) * -1); }
.ao-logo-grid__cell { padding: 0 var(--space-2); }
.ao-logo-tile { display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); padding: var(--space-3); aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--color-sea-700); }
.ao-logo-tile__img { max-width: 100%; max-height: 100%; }
.ao-page-title--sm { font-size: var(--font-size-xl); }

/* 登入與忘記密碼 */
.ao-auth { min-height: 600px; }
.ao-auth__body { max-width: 472px; margin: 0 auto; padding: 0 var(--space-3) var(--space-4); }
.ao-auth__title { margin: 0; padding: var(--space-5) var(--space-3) var(--space-4); text-align: center; }
.ao-auth__social { margin-bottom: var(--space-3); }
.ao-auth__forgot { display: block; margin: var(--space-4) 0 0; color: inherit; font-size: var(--font-size-base); text-align: center; }
.ao-auth__forgot:hover { color: inherit; text-decoration: underline; }
.ao-site--en .ao-auth__forgot-en { display: none; }
.ao-auth__footer { padding: var(--space-4) var(--space-3); border-top: 1px solid var(--color-line); }
.ao-auth__footer-inner { max-width: 440px; margin: 0 auto; }

/* 註冊頁 */
.ao-auth__body--wide { max-width: 944px; }
.ao-form__required { color: var(--color-danger); }
.ao-form__error { margin: var(--space-1) 0 var(--space-2); color: var(--color-error); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-form__group > [id$='-error'] { margin-top: var(--space-1); color: var(--color-error); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
/* 包住地區欄位與彈窗的 sign_in_box 只給腳本找元素用，不產生外框 */
.ao-region-picker { display: contents; }
.ao-pwstrength { font-size: var(--font-size-sm); }
.ao-dealer__list { margin-bottom: var(--space-3); }
.ao-dealer__item { margin-bottom: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-neutral-100); border-radius: var(--radius-sm); }
.ao-dealer__actions { margin-bottom: var(--space-3); text-align: right; }
.ao-dealer__field { margin-bottom: var(--space-3); }
.ao-dealer__brands { margin-top: var(--space-3); }
/* select2 產生的觸發欄位對齊 40px 欄位高度；下拉內部維持 select2 原樣 */
.ao-dealer__field [class~='select2-selection--single'] { height: 40px; border-color: var(--color-sea-100); border-radius: var(--radius-sm); }
.ao-dealer .ao-dealer__field [class~='select2-selection__rendered'] { display: flex; align-items: center; height: 38px; padding-left: var(--space-3); color: var(--color-neutral-600); font-size: var(--font-size-base); line-height: var(--line-height-heading); }
.ao-dealer .ao-dealer__field [class~='select2-selection__arrow'] { top: 0; right: 0; width: 40px; height: 38px; background: 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") right var(--space-2) center no-repeat; }
/* select2 預設的三角形箭頭換成與原生下拉相同的圖示 */
.ao-dealer__field [class~='select2-selection__arrow'] b { display: none; }

/* 首頁 */
/* 商品卡：會員、遊艇公司、供應商的商品格線共用 */
.ao-product-card { padding: 0 var(--space-2); }
/* 圖片滿版放最上面（order 提前，負外距抵掉卡片內距），其下品牌 logo 一行靠左，再來品名、型號、規格與動作鈕 */
.ao-product-card__media { position: relative; display: block; order: -1; aspect-ratio: 1; margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0; border-bottom: 1px solid var(--color-line); background-color: var(--color-white); }
.ao-product-card__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 80%; max-height: 80%; margin: auto; }
.ao-product-card__brand { position: relative; display: flex; align-items: center; height: 32px; margin: var(--space-3) 0 0; }
.ao-product-card__brand:hover { text-decoration: none; }
.ao-product-card__brand-img { max-width: 120px; max-height: 100%; }
.ao-product-card__brand .ao-brand-text { justify-content: flex-start; color: var(--color-ink-muted); font-weight: var(--font-weight-medium); }
/* 沒有品名的商品不留品名的固定高度，避免圖片與型號之間大片空白 */
.ao-product-card__name:empty { display: none; }
.ao-product-card__name { display: -webkit-box; min-height: calc(var(--font-size-base) * 3); margin: var(--space-1) 0 0; overflow: hidden; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: var(--line-height-body); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* 首頁：大圓角主視覺（左下介紹與行動鈕、右下玻璃數據卡）→ 角色入口白卡 → 深色品牌帶 → 商品輪播；區塊間距 96px */
.ao-home { padding-top: var(--space-3); background-color: var(--color-white); }
.ao-home-hero { position: relative; display: flex; align-items: flex-end; box-sizing: border-box; min-height: 640px; margin: 0 var(--space-3); overflow: hidden; border-radius: var(--radius-xl); color: var(--color-white); }
.ao-home-hero__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.ao-home-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(20deg, var(--color-sea-900) 10%, var(--color-overlay-dim) 50%, transparent 85%); }
.ao-home-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: end; gap: var(--space-5); box-sizing: border-box; width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-5); }
.ao-home-hero__title { margin: 0 0 var(--space-3); color: var(--color-white); font-size: var(--font-size-4xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-tight); }
.ao-home-hero__text { max-width: 560px; color: var(--color-sea-100); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); }
.ao-home-hero__text p { margin: 0; }
.ao-home-hero__text p + p { display: none; }
/* 後台編輯器的內容常整段加粗，主視覺一律用一般字重 */
.ao-home-hero__text strong,
.ao-home-hero__text b { font-weight: var(--font-weight-regular); }
.ao-home-hero__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.ao-home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin: 0; padding: var(--space-4); border: 1px solid var(--color-overlay-soft); border-radius: var(--radius-lg); background-color: var(--color-overlay-glass); backdrop-filter: blur(12px); }
.ao-home-stats__item { display: flex; flex-direction: column; gap: var(--space-1); }
.ao-home-stats__value { order: -1; margin: 0; font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); }
.ao-home-stats__label { color: var(--color-sea-100); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }

/* 首頁的一般區塊：白底，交替區淺灰 */
.ao-home-section { padding: var(--space-7) 0 0; }
.ao-home-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.ao-home-roles__item { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-height: 180px; box-sizing: border-box; padding: var(--space-4) var(--space-4) var(--space-6); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-white); color: var(--color-ink); transition: border-color 0.2s, box-shadow 0.2s; }
.ao-home-roles__item:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-card-hover); color: var(--color-ink); text-decoration: none; }
.ao-home-roles__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-home-roles__text { color: var(--color-ink-muted); font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.ao-home-roles__arrow { position: absolute; bottom: var(--space-4); left: var(--space-4); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--color-line); border-radius: var(--radius-round); color: var(--color-ink); font-size: var(--font-size-sm); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.ao-home-roles__item:hover .ao-home-roles__arrow { border-color: var(--color-ink); background-color: var(--color-ink); color: var(--color-white); }

/* 合作遊艇公司：logo 是白色版，放在深色圓角帶上 */
.ao-home-brands { padding: var(--space-7) var(--space-3) 0; }
.ao-home-brands__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); box-sizing: border-box; padding: var(--space-5); border-radius: var(--radius-xl); background-color: var(--color-ink-strong); }
.ao-home-brands__title { flex: 0 0 200px; margin: 0; color: var(--color-white); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); }
.ao-home-brands__list { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: var(--space-4) var(--space-5); }
.ao-home-brands__logo { display: flex; align-items: center; justify-content: center; width: 140px; height: 56px; opacity: 0.8; transition: opacity 0.2s; }
.ao-home-brands__logo:hover { opacity: 1; }
.ao-home-brands__img { max-width: 100%; max-height: 100%; }

.ao-home-products { padding: var(--space-7) 0 0; }
.ao-home-products--muted { margin-top: var(--space-7); padding-bottom: var(--space-7); background-color: var(--color-surface-alt); }
/* 輪播圓點放在卡片下方，同一列卡片等高。owl 產生的 class 不是 ao-，以屬性選擇器指定 */
.ao-home-products__track [class~='owl-dots'] { margin-top: var(--space-4); }
.ao-home-products__track [class~='owl-stage'] { display: flex; }
.ao-home-products__track [class~='owl-item'] { display: flex; }
.ao-home-products__track .ao-product-card { width: 100%; padding: 0; }

/* 首頁商品卡：白底髮絲框，圖片區正方形留白，下方品名與品牌 logo */
.ao-home-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background-color: var(--color-white); color: var(--color-ink); transition: border-color 0.2s, box-shadow 0.2s; }
.ao-home-card:hover { border-color: var(--color-line-strong); box-shadow: var(--shadow-card-hover); color: var(--color-ink); text-decoration: none; }
.ao-home-card__media { position: relative; display: block; aspect-ratio: 1; border-bottom: 1px solid var(--color-line); background-color: var(--color-white); }
.ao-home-card__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 80%; max-height: 80%; margin: auto; }
.ao-home-card__body { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); }
.ao-home-card__name { display: -webkit-box; min-height: calc(var(--font-size-base) * 3); overflow: hidden; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: var(--line-height-body); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ao-home-card__brand { display: block; height: 20px; }
.ao-home-card__brand-img { max-width: 100%; max-height: 100%; }
.ao-banner { position: relative; display: block; width: 100%; }
.ao-banner__img { display: block; width: 100%; }
.ao-banner__text { position: absolute; top: 50%; left: 50%; color: var(--color-white); font-size: var(--font-size-3xl); line-height: var(--line-height-heading); white-space: nowrap; transform: translate(-50%, -50%); }

@media screen and (max-width: 1500px) {
  .ao-header__inner { gap: var(--space-3); }
  .ao-header__nav,
  .ao-header__account { gap: var(--space-2); }
  .ao-header__link,
  .ao-header__account-link { padding-right: var(--space-2); padding-left: var(--space-2); }
  .ao-header__auth-link { padding: 0 var(--space-2); }
}

@media screen and (max-width: 1200px) {
  .ao-banner__text { font-size: var(--font-size-2xl); }
}

@media screen and (max-width: 990px) {
  .ao-footer__bottom-inner { flex-direction: column; }
  .ao-news-item__link { gap: var(--space-2); }
  .ao-news-item__title { flex-basis: 100%; }
}

@media screen and (max-width: 992px) {
  .ao-home-hero { min-height: 0; }
  .ao-home-hero__inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-3) var(--space-3); }
  .ao-home-hero__title { font-size: var(--font-size-2xl); }
  .ao-home-brands__title { flex-basis: 100%; text-align: center; }
  .ao-banner__text { font-size: var(--font-size-xl); }
}

@media screen and (max-width: 476px) {
  .ao-banner__text { font-size: var(--font-size-base); }
}

/* 手機選單內的商品分類：多層展開，越深層縮排越多 */
.ao-drawer__sub .ao-drawer__toggle { padding-left: var(--space-5); border-top: 1px solid var(--color-overlay-light); background-color: var(--color-sea-700); color: var(--color-white); font-weight: var(--font-weight-regular); }
.ao-drawer__sub .ao-drawer__toggle .ao-drawer__caret { color: var(--color-white); }
.ao-drawer__sub--nested .ao-drawer__toggle,
.ao-drawer__sub--nested .ao-drawer__link { padding-left: calc(var(--space-5) + var(--space-3)); }
.ao-drawer__sub--deep .ao-drawer__link { padding-left: calc(var(--space-5) + var(--space-4)); }

/* AQUA DATA 介紹頁：深色底，圖文左右交錯 */
.ao-aqua { overflow: hidden; background-color: var(--color-black); color: var(--color-white); }
.ao-aqua__hero { position: relative; overflow: hidden; padding: var(--space-6) var(--space-3); background: url('/assets/images/aqua_data/bg.jpg') center bottom / cover no-repeat; text-align: center; }
.ao-aqua__hero-title { position: relative; margin: var(--space-6) 0 var(--space-4); color: transparent; font-size: var(--font-size-3xl); font-style: italic; font-weight: var(--font-weight-regular); line-height: var(--line-height-heading); opacity: 0; animation: ao-aqua-text 10s infinite; }
.ao-aqua__hero-title strong { font-weight: var(--font-weight-bold); }
.ao-aqua__hero-sub { position: relative; margin: 0 0 var(--space-6); color: transparent; font-size: var(--font-size-xl); line-height: var(--line-height-body); opacity: 0; animation: ao-aqua-text-sub 10s infinite; }

/* 主視覺的星空：三層 1／2／3px 星點的 2000px 方形圖垂直重複，以不同速度往上捲一個圖高；排在標題之前，標題設 position 讓星點留在文字下方 */
.ao-aqua__stars { position: absolute; top: 0; left: 0; width: 2000px; height: 4000px; background: url('/assets/images/aqua_data/stars-sm.svg') left top / 2000px 2000px repeat-y; opacity: 0.5; animation: ao-aqua-star 50s linear infinite; }
.ao-aqua__stars--md { background-image: url('/assets/images/aqua_data/stars-md.svg'); opacity: 0.8; animation-duration: 100s; }
.ao-aqua__stars--lg { background-image: url('/assets/images/aqua_data/stars-lg.svg'); opacity: 0.3; animation-duration: 150s; }
/* 遊艇公司區塊圖片上往上飄的光圈，外圈暗角蓋在光圈之上 */
.ao-aqua__media--circles { position: relative; }
.ao-aqua__circles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; list-style: none; }
.ao-aqua__circles::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: var(--shadow-aqua-vignette); }
.ao-aqua__circle { position: absolute; bottom: -150px; display: block; width: 20px; height: 20px; border-radius: var(--radius-round); background-color: var(--color-overlay-light); box-shadow: var(--shadow-aqua-glow); animation: ao-aqua-float 25s linear infinite; }
.ao-aqua__circle:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
.ao-aqua__circle:nth-child(2) { left: 10%; animation-delay: 2s; animation-duration: 12s; }
.ao-aqua__circle:nth-child(3) { left: 70%; animation-delay: 4s; }
.ao-aqua__circle:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
.ao-aqua__circle:nth-child(5) { left: 65%; animation-delay: 0s; }
.ao-aqua__circle:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
.ao-aqua__circle:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
.ao-aqua__circle:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
.ao-aqua__circle:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
.ao-aqua__circle:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }

@keyframes ao-aqua-text {
  0% { text-shadow: 0 0 60px var(--color-white); transform: scale(3); opacity: 0; }
  20% { text-shadow: 0 0 0 var(--color-white); transform: scale(1); opacity: 1; }
  21%,
  90% { text-shadow: 0 0 0 var(--color-white); transform: scale(1); opacity: 1; }
}

@keyframes ao-aqua-text-sub {
  0% { transform: scale(2.5); opacity: 0; }
  10% { text-shadow: 0 0 60px var(--color-white); transform: scale(2.5); opacity: 0; }
  25% { text-shadow: 0 0 0 var(--color-white); transform: scale(1); opacity: 1; }
  26%,
  90% { text-shadow: 0 0 0 var(--color-white); transform: scale(1); opacity: 1; }
}

@keyframes ao-aqua-star {
  from { transform: translateY(0); }
  to { transform: translateY(-2000px); }
}

@keyframes ao-aqua-float {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
  100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; }
}

/* 減少動態偏好：停掉星空、光圈與標題的循環動畫，標題直接顯示 */
@media (prefers-reduced-motion: reduce) {
  .ao-aqua__stars,
  .ao-aqua__circle { animation: none; }
  .ao-aqua__hero-title,
  .ao-aqua__hero-sub { color: var(--color-white); opacity: 1; animation: none; }
}

.ao-aqua__row { display: flex; flex-wrap: wrap; align-items: center; background-repeat: no-repeat; }
.ao-aqua__row--about { background-image: url('/assets/images/aqua_data/bg2.gif'); background-position: right top; }
.ao-aqua__row--supplier { background-image: url('/assets/images/aqua_data/bg3.jpg'); background-position: right center; }
.ao-aqua__row--yacht { background-image: url('/assets/images/aqua_data/bg2.gif'); background-position: right bottom; }
.ao-aqua__media,
.ao-aqua__text { box-sizing: border-box; width: 50%; }
.ao-aqua__media { text-align: center; }
.ao-aqua__img { max-width: 100%; height: auto; }
.ao-aqua__text { padding: var(--space-5) var(--space-6); }
.ao-aqua__info { position: relative; max-width: 560px; padding-left: var(--space-5); }
.ao-aqua__info::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; border-radius: var(--radius-sm); background: linear-gradient(0deg, var(--color-hint-info), var(--color-white)); }
.ao-aqua__row--supplier .ao-aqua__info::before { background: linear-gradient(0deg, var(--color-sea-700), var(--color-sea-100)); }
.ao-aqua__row--yacht .ao-aqua__info::before { background: linear-gradient(0deg, var(--color-sea-900), var(--color-sea-700)); }
.ao-aqua__title { margin: 0 0 var(--space-4); color: var(--color-white); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-aqua__title--center { text-align: center; }
.ao-aqua__link { color: inherit; text-decoration: none; transition: color 0.4s; }
.ao-aqua__link:hover { color: var(--color-sea-100); text-decoration: none; }
.ao-aqua__desc { margin: 0; font-size: var(--font-size-md); line-height: var(--line-height-body); }

.ao-aqua__video { padding: var(--space-6) var(--space-3) 0; }
.ao-aqua__player { position: relative; width: 50%; margin: 0 auto; aspect-ratio: 16 / 9; }
.ao-aqua__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.ao-aqua__welcome { box-sizing: border-box; min-height: 720px; padding: var(--space-6) var(--space-3) 0; background: url('/assets/images/aqua_data/welcome-bg.jpg') center bottom / auto 100% no-repeat; text-align: center; }
.ao-aqua__welcome-title { margin: 0 0 var(--space-4); color: var(--color-sea-100); font-size: var(--font-size-2xl); font-style: italic; font-weight: var(--font-weight-bold); line-height: var(--line-height-heading); }
.ao-aqua__welcome-sub { margin: 0 0 var(--space-5); font-size: var(--font-size-lg); line-height: var(--line-height-body); }
.ao-aqua__join { min-width: 180px; }

@media screen and (max-width: 1230px) {
  .ao-aqua__text { padding: var(--space-5) var(--space-4); }
  .ao-aqua__player { width: 70%; }
}

@media screen and (max-width: 768px) {
  .ao-aqua__hero-title { margin-top: var(--space-5); font-size: var(--font-size-2xl); }
  .ao-aqua__hero-sub { margin-bottom: var(--space-5); font-size: var(--font-size-base); }
  .ao-aqua__media,
  .ao-aqua__text { width: 100%; }
  .ao-aqua__row--supplier .ao-aqua__media { order: -1; }
  .ao-aqua__text { padding: var(--space-4) var(--space-gutter) var(--space-5); }
  .ao-aqua__info { padding: var(--space-4) 0 0; text-align: center; }
  .ao-aqua__info::before { top: 0; right: 0; bottom: auto; left: 0; width: 45%; height: 4px; margin: 0 auto; }
  .ao-aqua__title { font-size: var(--font-size-xl); }
  .ao-aqua__desc { font-size: var(--font-size-base); text-align: left; }
  .ao-aqua__player { width: 100%; }
  .ao-aqua__welcome { min-height: 480px; }
  .ao-aqua__welcome-title { font-size: var(--font-size-xl); }
  .ao-aqua__welcome-sub { font-size: var(--font-size-base); }
}
/* 船東端專案分享頁：免登入的獨立頁，不載入平台 header */
.ao-share { min-height: 100vh; margin: 0; background-color: var(--color-surface-alt); color: var(--color-ink); font-size: var(--font-size-base); line-height: var(--line-height-body); }
.ao-share__header { display: flex; box-sizing: border-box; align-items: center; height: 72px; padding: 0 var(--space-4); border-bottom: 1px solid var(--color-line); background-color: var(--color-white); }
.ao-share__logo { display: block; height: 28px; }
.ao-share__main { box-sizing: border-box; max-width: 1100px; margin: 0 auto; padding: var(--space-4) var(--space-3) var(--space-5); }
.ao-share__verify { max-width: 420px; margin: var(--space-5) auto; padding: var(--space-4); }
.ao-share__title { margin: 0 0 var(--space-2); color: var(--color-ink); font-size: var(--font-size-xl); line-height: var(--line-height-heading); text-align: center; }
.ao-share__hint { margin: 0 0 var(--space-4); color: var(--color-ink-muted); text-align: center; }
.ao-share__verify .ao-form__group { margin-bottom: var(--space-2); }
.ao-share__error { min-height: 1.5em; margin: var(--space-1) 0 0; color: var(--color-danger); font-size: var(--font-size-sm); }
.ao-share__notice { margin: 0; color: var(--color-neutral-900); font-size: var(--font-size-md); text-align: center; }
.ao-share__toast { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-success-border); border-radius: var(--radius-md); background-color: var(--color-success-bg); color: var(--color-success-text); }
.ao-share__crumb .ao-breadcrumb__item { color: var(--color-ink-muted); }
.ao-share__crumb .ao-breadcrumb__item:last-child { color: var(--color-ink); }
.ao-share__card { margin-bottom: var(--space-3); padding: var(--space-4); }
.ao-share__project { margin: 0 0 var(--space-3); color: var(--color-ink); font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-heading); }
.ao-share__heading { margin: 0 0 var(--space-3); color: var(--color-ink); font-size: var(--font-size-md); line-height: var(--line-height-heading); }
.ao-share__info { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-1) var(--space-4); margin: 0; }
.ao-share__info-item { display: flex; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); }
.ao-share__info-item dt { color: var(--color-ink-muted); font-weight: normal; white-space: nowrap; }
.ao-share__info-item dd { margin: 0; color: var(--color-ink); overflow-wrap: anywhere; }
.ao-share__tab { border-top: 0; border-right: 0; border-left: 0; background-color: transparent; cursor: pointer; }
.ao-share__name { font-weight: var(--font-weight-bold); color: var(--color-ink); }
.ao-share__unlinked { margin-top: var(--space-1); background-color: var(--color-neutral-500); color: var(--color-white); }
.ao-share__empty { margin: 0; padding: var(--space-4) 0; color: var(--color-ink-muted); text-align: center; }

/* 公開新聞、條款與登入註冊內頁 */
.ao-news-list .ao-news-item { background-color: transparent; border-bottom: 1px solid var(--color-line); }
.ao-news-list .ao-news-item__tag { background-color: var(--color-gray-100); color: var(--color-ink); }
.ao-news-list .ao-news-item__more { border-color: var(--color-line); color: var(--color-ink); }
.ao-legal-prose p,
.ao-legal-prose ul,
.ao-legal-prose ol { margin-bottom: var(--space-4); }

.ao-auth .ao-card { background-color: var(--color-surface-alt); }
.ao-auth .ao-field__control { min-width: 0; background-color: var(--color-white); }
.ao-auth .ao-auth__footer { border-top: 1px solid var(--color-line); }

.ao-auth .ao-file .ao-file__btn { background-color: var(--color-gray-100); }
.ao-file-upload-group .ao-form__label { min-height: 3em; }
.ao-section .ao-captcha__row > .ao-field { flex-basis: 320px; }
.ao-auth .ao-form-grid .ao-form__group { min-width: 0; }
.ao-auth .ao-form-grid .ao-field__control--select { box-sizing: border-box; max-width: 100%; }
.ao-auth .ao-field-group > .ao-field--code { flex-basis: 104px; }
.ao-contact-page .ao-field { border-radius: var(--radius-sm); }
.ao-contact-page .ao-field__control { border-radius: var(--radius-sm); }
.ao-auth .ao-captcha__row { flex-wrap: nowrap; }
.ao-auth .ao-captcha__row > .ao-field { flex-basis: 320px; flex: 1 1 0; min-width: 0; }
.ao-auth .ao-captcha__img { flex: 0 0 auto; }
.ao-auth .ao-field--code .ao-field__control { min-width: 0; }
.ao-auth .ao-file-upload-group .ao-form__label { min-height: 0; }
.ao-legal-prose li { margin-bottom: var(--space-2); }
.ao-legal-prose li > ul,
.ao-legal-prose li > ol { margin-top: var(--space-2); }
.ao-legal-prose ul,
.ao-legal-prose ol { margin-left: 0; padding-left: var(--space-3); }
.ao-section .ao-logo-tile { background-color: var(--color-ink); }