/*
 * AETHER 视觉层，覆盖在 BeikeShop 默认主题之上。
 *
 * 这是把老店那套设计并进 BeikeShop 的主题视觉层：字体、字号字距、色板、发丝分割线、
 * 页头、按钮、商品卡，以及首页的主视觉和编辑式内容节奏。详情页等其它页面的结构调整
 * 放在各自的 Blade 覆盖文件里逐步完成。
 *
 * 加载顺序是关键：主题插件的 Bootstrap.php 把它排在 app.css 之后，所以同权重规则赢。
 * 凡是要压 Bootstrap 工具类（.fw-bold、.btn-dark 这种）的地方都写了双 class 或
 * !important，并且注明原因 —— 不写原因的 !important 以后没人敢动。
 *
 * token 的值不是眼估的，来自老店 app/globals.css 的 @theme 块，那里每个值又标着它
 * 对应的 chanel.com 变量名。改这里之前先去对一眼那份，别让两边漂移。
 */

/* Inter 自托管，latin 子集。CJK 落到平台字体 —— 不钉住的话 Windows 会用宋体，
   整个register 就毁了（老店 globals.css 里有同样的注释和同样的原因）。 */
@font-face {
  font-family: "Inter AETHER";
  src: url("/fonts/Inter-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AETHER Editorial";
  src: url("/fonts/BodoniModa-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ae-ink: #000000;
  --ae-canvas: #ffffff;
  --ae-ink-soft: #1d1d1d;
  --ae-ink-muted: #333333;
  --ae-ink-subtle: #767676;
  --ae-disabled: #949494;

  --ae-rule-strong: #b6b6b6;
  --ae-rule: #d8d8d8;
  --ae-rule-light: #ececec;
  --ae-surface: #f1f1f1;
  --ae-surface-soft: #f9f9f9;

  /* 整套系统里唯一的状态色。 */
  --ae-error: #cd0000;

  --ae-sans:
    "Inter AETHER", "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC",
    "Hiragino Sans GB", "Microsoft YaHei New", "Microsoft YaHei", sans-serif;
  --ae-serif: "AETHER Editorial", "Times New Roman", serif;

  --ae-track: 0.5px;
  --ae-track-nav: 1px;
}

/* --------------------------------- 基础 ---------------------------------- */

body,
.btn,
.form-control,
.form-select,
input,
textarea,
select,
button {
  font-family: var(--ae-sans);
}

body {
  background: var(--ae-canvas);
  color: var(--ae-ink);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: var(--ae-track);
}

/* 标题一律 400。这套系统靠字号和留白分层，不靠字重 —— 加粗是它最不像的地方。 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 400;
  letter-spacing: var(--ae-track);
  color: var(--ae-ink);
}

h1, .h1 { font-size: 28px; line-height: 1.3; }
h2, .h2 { font-size: 22px; line-height: 1.35; }
h3, .h3 { font-size: 20px; line-height: 1.4; }
h4, .h4 { font-size: 17px; }
h5, .h5, h6, .h6 { font-size: 14px; }

/* Bootstrap 的 fw-bold / fw-semibold 撒得很广（导航、标题、价格都有）。
   这套系统只有一个字重，所以直接压掉；不压的话上面的 h* 规则会被工具类反超。 */
.fw-bold,
.fw-semibold,
.fw-medium,
strong,
b {
  font-weight: 400 !important;
}

a {
  color: var(--ae-ink);
  text-decoration: none;
}

/* CTA 是「带下划线的文字链接」，不是按钮色块。 */
a:hover {
  color: var(--ae-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

hr {
  border-color: var(--ae-rule);
  opacity: 1;
}

/* 圆角和阴影：这套系统一个都没有，全站发丝线。 */
.btn,
.card,
.dropdown-menu,
.form-control,
.form-select,
.modal-content,
.nav-tabs .nav-link,
.badge,
.alert,
.input-group-text,
.toast,
.offcanvas,
.pagination .page-link {
  border-radius: 0 !important;
}

.card,
.dropdown-menu,
.modal-content,
.btn,
.form-control,
.form-select,
.offcanvas,
.toast {
  box-shadow: none !important;
}

.card {
  border-color: var(--ae-rule-light);
}

/* --------------------------------- 页头 ---------------------------------- */

/* 顶栏和主导航都落到白底 + 一条发丝底线。默认主题这里是浅灰底加阴影。 */
.top-wrap {
  background: var(--ae-canvas);
  border-bottom: 1px solid var(--ae-rule-light);
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.top-wrap .btn,
.top-wrap a,
.top-wrap .dropdown-toggle {
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  color: var(--ae-ink-muted);
}

.header-content {
  background: var(--ae-canvas);
  border-bottom: 1px solid var(--ae-rule);
}

/* 导航项：12px 大写、1px 字距、常规字重。 */
.menu-wrap .nav-link,
.navbar-nav .nav-link {
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
  color: var(--ae-ink);
}

.menu-wrap .nav-link:hover,
.navbar-nav .nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dropdown-menu {
  border: 1px solid var(--ae-rule-light);
}

.dropdown-item {
  font-size: 14px;
  letter-spacing: var(--ae-track);
  color: var(--ae-ink-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--ae-surface-soft);
  color: var(--ae-ink);
}

/* 导航里那些 NEW / Hot / Sales 角标原本是紫、橙、青的实心气泡 —— 这套系统除了
   报错没有状态色。改成不带底色的小号大写标签，位置和信息都还在。 */
.menu-wrap .nav-item .badge,
.navbar-nav .nav-item .badge,
.menu-wrap .nav-item [class*="badge"],
.navbar-nav .nav-item [class*="badge"],
.aether-mobile-menu .badge,
.aether-mobile-menu [class*="badge"] {
  background: transparent !important;
  color: var(--ae-ink-subtle) !important;
  font-size: 9px;
  letter-spacing: var(--ae-track-nav);
  padding: 0 0 0 4px;
  vertical-align: super;
}

/* -------------------------- AETHER 顶部导航 ------------------------------ */

.aether-site-header {
  position: relative;
  z-index: 100;
  background: var(--ae-canvas);
}

.aether-utility-bar {
  min-height: 30px;
  border-bottom: 1px solid var(--ae-rule-light);
  background: var(--ae-surface-soft);
}

.aether-utility-bar .container-fluid {
  min-height: 30px;
  padding: 0 28px;
}

.aether-utility-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 14px 0 0;
  color: var(--ae-ink-muted);
  font-size: 10px;
  letter-spacing: var(--ae-track-nav);
  line-height: 1;
  text-transform: uppercase;
}

.aether-utility-link:hover {
  color: var(--ae-ink);
  text-decoration: none;
}

.aether-phone {
  padding-right: 0;
}

.aether-primary-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 72px;
  padding: 0 28px;
  border-bottom: 1px solid var(--ae-rule-light);
}

.aether-desktop-header {
  padding: 0;
}

.aether-primary-left,
.aether-primary-right {
  display: flex;
  min-width: 0;
  align-items: center;
}

.aether-primary-right {
  justify-content: flex-end;
}

.aether-menu-cluster {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 1.25vw, 24px);
}

.aether-menu-cluster > .nav-item {
  position: relative;
  flex: 0 0 auto;
}

.aether-menu-cluster > .nav-item > .nav-link {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 25px 0 23px;
  color: var(--ae-ink);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ae-track-nav);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.aether-menu-cluster > .nav-item > .nav-link::after {
  display: none;
}

.aether-menu-cluster > .nav-item:hover > .nav-link,
.aether-menu-cluster > .nav-item > .nav-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.aether-header-logo {
  display: flex;
  width: clamp(150px, 13vw, 210px);
  height: 72px;
  align-items: center;
  justify-content: center;
  margin: 0 clamp(24px, 3vw, 52px);
}

.aether-header-logo:hover {
  text-decoration: none;
}

.aether-header-logo img {
  display: block;
  width: 100%;
  max-height: 46px;
  object-fit: contain;
}

.aether-header-actions {
  align-items: center;
  gap: 3px;
  margin-left: clamp(14px, 1.25vw, 24px);
}

.aether-header-actions .nav-link {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 9px;
}

.aether-header-actions .nav-link:hover {
  background: var(--ae-surface-soft);
  text-decoration: none;
}

.aether-header-actions img {
  display: block;
  width: 19px;
  height: 19px;
}

.aether-mega-menu {
  position: absolute !important;
  top: 100%;
  left: 50%;
  width: min(760px, 90vw);
  padding: 30px;
  border: 1px solid var(--ae-rule-light);
  transform: translateX(-50%);
}

.aether-primary-right .aether-mega-menu {
  right: 0;
  left: auto;
  transform: none;
}

.aether-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 28px;
}

.aether-mega-menu-title {
  margin: 0 0 16px;
  color: var(--ae-ink-subtle);
  font-size: 10px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.aether-mega-menu-links {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aether-mega-menu-links a {
  color: var(--ae-ink);
  font-size: 13px;
}

.aether-mega-menu-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ae-surface-soft);
}

.aether-mega-menu-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aether-mobile-header {
  border-bottom: 1px solid var(--ae-rule-light);
  background: var(--ae-canvas);
}

.aether-mobile-header .mobile-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 62px;
  padding: 0 16px;
}

.aether-mobile-header .left,
.aether-mobile-header .right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.aether-mobile-header .right {
  justify-content: flex-end;
}

.aether-icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 10px;
  border: 0;
  background: transparent;
}

.aether-icon-button:hover {
  background: var(--ae-surface-soft);
  text-decoration: none;
}

.aether-icon-button img {
  width: 20px;
  height: 20px;
}

.aether-mobile-logo {
  display: flex;
  width: 126px;
  height: 52px;
  align-items: center;
  justify-content: center;
}

.aether-mobile-logo img {
  width: 100%;
  max-height: 38px;
  object-fit: contain;
}

.aether-mobile-menu {
  width: min(100%, 520px) !important;
  border: 0;
}

.aether-mobile-menu .offcanvas-header {
  min-height: 72px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ae-rule-light);
}

.aether-drawer-logo {
  display: block;
  width: 150px;
}

.aether-drawer-logo img {
  width: 100%;
  max-height: 40px;
  object-fit: contain;
}

.aether-mobile-menu .offcanvas-body {
  padding: 12px 20px 32px;
}

.aether-mobile-menu .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--ae-rule-light);
}

.aether-mobile-menu .nav-item-text {
  min-height: 58px;
}

.aether-mobile-menu .nav-item-text > .nav-link {
  padding: 20px 0;
  color: var(--ae-ink);
  font-size: 13px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.aether-mobile-menu .children-group {
  padding: 0 0 20px 16px;
}

.aether-mobile-menu .children-title,
.aether-mobile-menu .ul-children .nav-link {
  padding: 10px 0;
  color: var(--ae-ink-muted);
  font-size: 13px;
}

.aether-mobile-utilities {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  padding-top: 28px;
}

.aether-mobile-utilities a {
  color: var(--ae-ink-subtle);
  font-size: 11px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

/* --------------------------------- 按钮 ---------------------------------- */

/* 主按钮：黑底白字、12px 大写、1px 字距、无圆角无渐变。默认主题是橙色渐变。 */
.btn-primary,
.btn-dark,
.btn-danger {
  background: var(--ae-ink);
  background-image: none;
  border: 1px solid var(--ae-ink);
  color: var(--ae-canvas);
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
  padding: 12px 24px;
}

.btn-primary:hover,
.btn-dark:hover,
.btn-danger:hover,
.btn-primary:focus,
.btn-dark:focus {
  background: var(--ae-ink-muted);
  border-color: var(--ae-ink-muted);
  color: var(--ae-canvas);
}

/* 次级按钮：透明底 + 发丝描边。 */
.btn-outline-primary,
.btn-outline-dark,
.btn-secondary,
.btn-light {
  background: transparent;
  border: 1px solid var(--ae-rule-strong);
  color: var(--ae-ink);
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.btn-outline-primary:hover,
.btn-outline-dark:hover,
.btn-secondary:hover,
.btn-light:hover {
  background: var(--ae-ink);
  border-color: var(--ae-ink);
  color: var(--ae-canvas);
}

.btn:disabled,
.btn.disabled {
  background: var(--ae-disabled);
  border-color: var(--ae-disabled);
  color: var(--ae-canvas);
}

/* ------------------------------- 表单 ----------------------------------- */

.form-control,
.form-select {
  border: 1px solid var(--ae-rule);
  color: var(--ae-ink);
  font-size: 14px;
  letter-spacing: var(--ae-track);
  padding: 12px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ae-ink);
  box-shadow: none !important;
}

.form-control::placeholder {
  color: var(--ae-ink-subtle);
  letter-spacing: var(--ae-track);
}

label,
.form-label {
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
  color: var(--ae-ink-subtle);
}

/* ------------------------------- 商品卡 --------------------------------- */

.product-wrap {
  border: 0;
  background: transparent;
}

/* 图片是方的、不裁圆角；说明文字排在图下方，不压在图上。 */
.product-wrap .image {
  border-radius: 0;
  overflow: hidden;
  background: var(--ae-surface-soft);
}

/* 挂在 .product-bottom-info 上而不是 .product-wrap 上：首页装修区块复用的是
   product-bottom-info，外面没有 product-wrap 那一层，只写 .product-wrap 的话
   首页的商品卡全都不生效（第一遍就踩了这个）。 */
.product-bottom-info {
  padding-top: 12px;
  text-align: left;
}

.product-bottom-info .product-name {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: var(--ae-track);
  color: var(--ae-ink);
}

.product-bottom-info .product-price {
  margin-top: 4px;
}

/* 主题原本把现价设成 1rem/700 的强调橙。价格是信息，不是号召 —— 这套系统里没有
   除报错以外的状态色，字重也只有一个。 */
.product-bottom-info .product-price .price-new {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: var(--ae-track);
  color: var(--ae-ink);
}

/* 原价用中划线加浅色，不用红色 —— 红色在这套系统里只表示错误。 */
.product-bottom-info .product-price .price-old {
  font-size: 13px;
  color: var(--ae-ink-subtle);
  text-decoration: line-through;
}

/* 悬停浮出来的那排圆形图标按钮，改成方形发丝描边。 */
.product-wrap .button-wrap .btn {
  border-radius: 0 !important;
  background: var(--ae-canvas);
  border: 1px solid var(--ae-rule-strong);
  color: var(--ae-ink);
}

.product-wrap .button-wrap .btn:hover {
  background: var(--ae-ink);
  border-color: var(--ae-ink);
  color: var(--ae-canvas);
}

/* --------------------------- 首页装修区块 -------------------------------- */

/* 区块标题原本是 32px 加粗、下面挂一条波浪线装饰。这套系统里装饰性图形一个都没有，
   分层靠字号和留白。::after 就是那条波浪线。 */
.module-title {
  font-size: 22px;
  letter-spacing: var(--ae-track);
  color: var(--ae-ink);
}

/* 波浪线不是伪元素，是标题里一个真实的 <div class="wave-line">。 */
.module-title .wave-line,
.wave-line {
  display: none !important;
}

/* -------------------------- 强调橙 → 墨黑 -------------------------------- */

/*
 * 主题的强调色是 #fd560f，在编译后的 app.css 里出现 25 次：悬停态、购物袋角标、
 * 现价、评分、详情页标签、结算单选、分类筛选、轮播圆点、侧栏当前项。这套系统只有
 * 一个状态色（报错红），其余一律墨黑，靠下划线和发丝线表达状态。
 *
 * 下面的选择器是从 app.css 里逐条抄出来的，不是猜的 —— 主题那些选择器权重很高
 * （像 body.page-product .product-description .nav-tabs .nav-link.active 有四层），
 * 权重不够就压不动。属性也按原样对应：原来是 color 的改 color，background 的改
 * background，border-color 的改 border-color，fill 的改 fill。
 */

header .header-content .nav-item:hover > a,
header .header-content .menu-wrap > .navbar-nav .ul-children a:hover,
#offcanvas-right-cart .select-wrap i.bi-check-circle-fill,
footer .footer-content a:hover,
body.page-product .product-info .rating-wrap .rating i,
body.page-product .product-description .nav-tabs .nav-link.active,
body.page-categories .children-wrap a:hover,
.sidebar-widget li.active > a,
.swiper-style-plus .swiper-button-next:hover,
.swiper-style-plus .swiper-button-prev:hover,
.pages-wrap:hover .page-info .pages-title a {
  color: var(--ae-ink);
}

.sidebar-widget li.active > a {
  font-weight: 400;
}

body.page-product .product-description .nav-tabs .nav-link.active:before {
  border-top-color: var(--ae-ink);
}

/* 圆形角标 → 方形。这套系统里没有圆。 */
header .cart-badge-quantity {
  background-color: var(--ae-ink);
  border-radius: 0;
}

#offcanvas-search-top .search-input-wrap input:focus,
body.page-checkout .comment-wrap .commentTxt:focus-visible,
body.page-checkout .radio-line-wrap .radio-line-item.active .radio,
.filter-box .attribute-item .form-check-label:hover .form-check-input {
  border-color: var(--ae-ink);
}

body.page-checkout .radio-line-wrap .radio-line-item.active .radio:before,
body.page-categories .ui-widget-content .ui-widget-header,
body.page-categories .ui-widget-content .ui-slider-handle,
.swiper-style-plus .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--ae-ink);
}

body.page-categories .filter-value-wrap .list-group .list-group-item.delete-all,
body.page-categories .filter-value-wrap .list-group .list-group-item:hover {
  background: var(--ae-ink);
  color: var(--ae-canvas);
}

body.page-categories .style-wrap label.active svg {
  fill: var(--ae-ink);
}

/* 品牌卡悬停原本是橙边加投影；这套系统没有投影。 */
.module-brand .brand-item:hover {
  border: 1px solid var(--ae-ink);
  box-shadow: none;
}

/* Bootstrap 的语义色工具类。这套系统里**只有报错**有颜色 —— 库存状态、成功提示这些
   靠文字本身说话（详情页的「In Stock」原本是绿色 #71c20b）。不是审美偏好：多一种
   状态色，前台就多一套要维护的含义，而「有货」并不需要用颜色喊。 */
.text-success,
.text-warning,
.text-info,
.text-primary,
.text-muted {
  color: var(--ae-ink-muted) !important;
}

.text-danger {
  color: var(--ae-error) !important;
}

/* 分类图原本是 border-radius: 50% 的圆形。这套系统里图片一律是方的 —— 圆形会把
   构图裁掉一圈，而摄影是这套设计的主角。 */
.image-item {
  border-radius: 0 !important;
}

.image-item + .title {
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
  color: var(--ae-ink);
}

/* 选中态标签页原本是 2px 实心下划线，改成发丝。 */
.nav-link.active {
  border-bottom: 1px solid var(--ae-ink) !important;
  color: var(--ae-ink) !important;
}

/* ------------------------------ 商城内页 -------------------------------- */

/* 面包屑和内容边界在所有内页保持一致。 */
.breadcrumb-wrap {
  margin-bottom: 34px;
  border-bottom: 1px solid var(--ae-rule-light);
  background: var(--ae-surface-soft);
}

.breadcrumb-wrap .breadcrumb {
  min-height: 48px;
  margin: 0;
  padding: 13px 28px;
  color: var(--ae-ink-subtle);
  font-size: 11px;
  letter-spacing: var(--ae-track);
}

.breadcrumb-wrap .breadcrumb a {
  color: var(--ae-ink-muted);
}

.breadcrumb-wrap .breadcrumb-item.active {
  color: var(--ae-ink);
  font-weight: 400;
}

/* 分类页：左侧筛选是安静的文字目录，右侧简介取消卡片化。 */
.page-categories > .container-fluid {
  padding-right: 28px;
  padding-left: 28px;
}

.page-categories .left-column > .x-fixed-top {
  padding-right: 24px;
  border-right: 1px solid var(--ae-rule-light);
}

.page-categories .left-column h4 {
  color: var(--ae-ink);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.page-categories .left-column a,
.page-categories .left-column label,
.page-categories .left-column .form-control {
  font-size: 12px;
}

.page-categories .category-intro {
  margin-bottom: 26px !important;
  padding: 0 0 26px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ae-rule-light) !important;
  border-radius: 0 !important;
}

.page-categories .category-avatar {
  width: 132px;
  height: 166px;
  overflow: hidden;
  background: var(--ae-surface-soft);
}

.page-categories .category-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-categories .category-desc .fs-3 {
  margin-bottom: 12px !important;
  font-family: var(--ae-serif);
  font-size: 30px !important;
  font-weight: 400 !important;
}

.page-categories .category-desc .lh-base {
  max-width: 760px;
  color: var(--ae-ink-muted);
  font-size: 13px;
  line-height: 1.7 !important;
}

.page-categories .product-tool {
  min-height: 52px;
  margin-bottom: 22px !important;
  padding: 8px 0;
  border-top: 1px solid var(--ae-rule-light);
  border-bottom: 1px solid var(--ae-rule-light);
}

.page-categories .product-tool .form-select {
  min-height: 40px;
  border-radius: 0;
  font-size: 11px;
}

.page-categories .children-wrap {
  color: var(--ae-ink-muted);
  font-size: 12px;
}

.page-categories .children-wrap a {
  color: var(--ae-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 商品详情页：摄影和购买信息各自占一半，字号与首页一致。 */
.page-product .product-container {
  max-width: 1360px;
  padding-right: 28px;
  padding-left: 28px;
}

.page-product .product-image .right,
.page-product .product-img {
  border-radius: 0 !important;
  background: var(--ae-surface-soft);
}

.page-product .product-image .right .product-img img {
  width: 100%;
  max-height: 720px;
  object-fit: contain;
}

.page-product .product-left-thumb-wrap .swiper-slide,
.page-product .product-left-thumb-wrap img {
  border-radius: 0 !important;
}

.page-product .product-info {
  padding: 6px 0 0 34px;
}

/* 商品名和价格：小号、无衬线、全大写。
 *
 * 这里原本是 clamp(26px,2.2vw,36px) 的大号衬线标题配 28px 衬线价格。改掉是有意的，
 * 理由记在 ../../../AGENTS.md 的「已定的事」里，别再翻回去：
 *
 * 老店 products/[handle]/page.tsx 里这两处是 14px / 12px 的无衬线全大写。那不是
 * 随手写的，是这套系统的层级声明——单品页的主角是那张照片，商品名只是它的标签。
 * 衬线留给编辑性内容（首页大标题、章节题）。把商品名放大成衬线，它就会和照片抢，
 * 而照片正是这个项目唯一不可替代的资产。
 *
 * 代价说清楚：全大写在长标题上不好读。现在演示数据里那种二十多个词的商品名，
 * 换成大写会糊成一块。但那是演示数据的问题——这个定位的店，商品名本来就该是
 * 短的、编辑过的。真实商品进来之后如果标题还是很长，要改的是标题，不是这里。
 *
 * 选择器必须带 body：app.css 里写的是
 * `body.page-product .product-info .product-name{font-size:1.7rem}`，多一个元素
 * 选择器就压过三个 class。原来那条 clamp(26px,2.2vw,36px) 就是因为少了 body，
 * **字号部分从来没生效过** —— 页面上一直是 app.css 的 1.7rem（27.2px），只有
 * font-family 生效了（那个属性 app.css 没设）。改这里时别再漏掉 body。
 */
body.page-product .product-info .product-name {
  max-width: 560px;
  margin-bottom: 12px !important;
  font-family: var(--ae-sans);
  font-size: 14px;
  font-weight: 400 !important;
  line-height: 1.5;
  letter-spacing: var(--ae-track);
  text-transform: uppercase;
}

.page-product .price-wrap {
  margin-bottom: 28px;
}

.page-product .price-wrap .new-price {
  color: var(--ae-ink);
  font-family: var(--ae-sans);
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: var(--ae-track);
}

.page-product .price-wrap .old-price {
  color: var(--ae-ink-subtle);
  font-size: 12px;
  letter-spacing: var(--ae-track);
}

.page-product .stock-and-sku {
  display: grid;
  gap: 7px;
  padding: 18px 0;
  border-top: 1px solid var(--ae-rule-light);
  border-bottom: 1px solid var(--ae-rule-light);
  color: var(--ae-ink-muted);
  font-size: 12px;
}

.page-product .stock-and-sku .title {
  width: 78px;
  color: var(--ae-ink-subtle) !important;
}

.page-product .variables-wrap {
  padding-top: 18px;
}

.page-product .variable-group > p,
.page-product .product-info > div > p {
  color: var(--ae-ink);
  font-size: 11px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.page-product .variable-info > div {
  min-width: 48px;
  min-height: 42px;
  border: 1px solid var(--ae-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ae-ink);
  font-size: 12px;
}

.page-product .variable-info > div.selected {
  border-color: var(--ae-ink) !important;
  box-shadow: inset 0 0 0 1px var(--ae-ink);
}

.page-product .quantity-wrap,
.page-cart .quantity-wrap {
  height: 44px;
}

.page-product .quantity-wrap .btn,
.page-product .quantity-wrap .form-control,
.page-cart .quantity-wrap .btn,
.page-cart .quantity-wrap .form-control {
  border-radius: 0 !important;
}

.page-product .add-cart-btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}

.page-product .add-cart-btns .btn {
  min-height: 50px;
  margin-left: 0 !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

.page-product .add-wishlist .btn {
  color: var(--ae-ink-muted) !important;
  font-size: 11px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.page-product .product-description {
  margin-top: 64px;
  padding-top: 30px;
  border-top: 1px solid var(--ae-rule-light);
}

.page-product .product-description .nav-link {
  padding: 12px 0;
  color: var(--ae-ink-muted);
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.page-product .relations-wrap {
  padding: 56px 0;
  border-top: 1px solid var(--ae-rule-light);
}

.page-product .relations-wrap > .container > .title {
  margin-bottom: 28px;
  font-family: var(--ae-serif);
  font-size: 28px;
}

/* 购物车、结算和账户页共用同一套无圆角、无阴影容器。 */
.page-cart,
.page-checkout,
body[class^="page-account"],
.page-login {
  background: var(--ae-canvas) !important;
}

.page-cart .card,
.page-checkout .card,
body[class^="page-account"] .card,
.page-login .card,
.account-sides-info {
  border: 1px solid var(--ae-rule-light) !important;
  border-radius: 0 !important;
  background: var(--ae-canvas);
  box-shadow: none !important;
}

/* 勾选框仍然是 BeikeShop 的强调橙 #fd560f，而且是圆角的。这个橙不在色板里——
   这套系统只有一个状态色（报错红），其余全是墨色和灰阶。CHANGES-ours.md 记过
   这个橙在编译后的 app.css 里出现 25 次、已经逐条压过，购物车这两个是漏网的：
   它们在整屏白底墨字里是唯一的彩色，一眼就跳出来。 */
.page-cart .form-check-input,
.page-checkout .form-check-input {
  border-radius: 0;
  border-color: var(--ae-rule-strong);
}

.page-cart .form-check-input:checked,
.page-checkout .form-check-input:checked {
  background-color: var(--ae-ink);
  border-color: var(--ae-ink);
}

.page-cart .form-check-input:focus,
.page-checkout .form-check-input:focus {
  border-color: var(--ae-ink);
  box-shadow: none;
}

/* 「删除」用的是报错红（--ae-error）。红色在这套系统里只表示出错，而删掉一件
   商品是用户自己要做的正常操作，不是错误状态——把它染红等于每个购物车里都常驻
   一条警报。老店那边同一个动作是 REMOVE：一条安静的下划线。
   .text-danger 的全局映射不动，只改购物车里的这一处。 */
.page-cart .btn.text-danger {
  color: var(--ae-ink-subtle) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-cart .btn.text-danger:hover,
.page-cart .btn.text-danger:focus-visible {
  color: var(--ae-ink) !important;
}

/* 结算页右栏的件数角标：橙色的圆点。橙不在色板里，圆在这套系统里也不存在
   （页头购物袋角标已经因为同样的理由改成方的）。.bg-primary 和 .rounded-circle
   都是 Bootstrap 的工具类，自带 !important，只能用 !important 压。 */
.page-cart .card-header .bg-primary,
.page-checkout .card-header .bg-primary {
  background-color: var(--ae-ink) !important;
  border-radius: 0 !important;
}

/* 订单总额是 Bootstrap 原生的 danger 红（220,53,69）—— 连主题自己的错误色
   （--ae-error，205,0,0）都不是，说明它是从默认样式里漏下来的，不是谁的选择。
   红色在这套系统里只表示出错；拿它强调总价，等于每一单都在报警。总额本身有加粗
   和字号，不需要再靠颜色喊。

   选择器是从 app.css 逐条抄下来的（那边写的是
   `body.page-bk-stripe .total-wrap .totals > li:last-of-type > span:last-child`，
   权重 0-5-3，随便写两个 class 压不动它）。body 上的 page-* 用属性选择器匹配，
   是因为每个支付插件的结算页都会带自己的 body class，一条覆盖全部。 */
body[class*='page-'] .total-wrap .totals > li:last-of-type > span:last-child {
  color: var(--ae-ink);
}

.page-cart .steps-wrap,
.page-checkout .steps-wrap {
  color: var(--ae-ink-muted);
  font-size: 11px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.page-cart .steps-wrap > div .number,
.page-checkout .steps-wrap > div .number {
  border-radius: 0;
}

.page-cart .empty-cart-wrap {
  padding: 52px 20px 70px;
}

.page-cart .empty-cart-icon {
  color: var(--ae-ink);
}

.page-cart .empty-cart-text h5,
.page-checkout h5,
.page-cart h4 {
  font-family: var(--ae-serif);
  font-weight: 400;
}

.page-cart table > :not(caption) > * > *,
.page-checkout table > :not(caption) > * > * {
  padding: 16px 10px;
  border-color: var(--ae-rule-light);
}

.page-checkout .checkout-black {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--ae-rule-light);
}

.page-checkout .checkout-title {
  margin-bottom: 18px;
  font-family: var(--ae-serif);
  font-size: 20px;
  font-weight: 400;
}

.page-checkout .radio-line-item {
  border: 1px solid var(--ae-rule-light) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.page-checkout .radio-line-item.active {
  border-color: var(--ae-ink) !important;
}

.page-checkout .radio-line-item .radio {
  border-color: var(--ae-rule-strong);
}

.page-checkout .radio-line-item.active .radio {
  border-color: var(--ae-ink);
  background: var(--ae-ink);
}

.page-checkout .total-wrap .card-header,
.page-login .card-header {
  border-bottom: 1px solid var(--ae-rule-light);
  border-radius: 0 !important;
  background: transparent;
}

.page-login #page-login {
  max-width: 940px;
  padding-bottom: 70px;
}

.page-login .hero-heading {
  font-family: var(--ae-serif);
  font-size: 30px;
  font-weight: 400;
}

.page-login .login-wrap {
  gap: 46px;
}

.page-login .login-wrap > .card {
  flex: 1 1 0;
  border: 0 !important;
}

.page-login .login-item-header {
  padding: 14px 0;
}

.page-login .login-item-header h6 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--ae-track-nav);
}

.page-login .card-body {
  padding-top: 26px;
}

.page-login .el-input__inner,
.page-checkout .el-input__inner,
.page-checkout .el-textarea__inner,
body[class^="page-account"] .el-input__inner {
  height: 46px;
  border-color: var(--ae-rule);
  border-radius: 0 !important;
  box-shadow: none;
}

.page-login .el-input__inner:focus,
.page-checkout .el-input__inner:focus,
body[class^="page-account"] .el-input__inner:focus {
  border-color: var(--ae-ink);
}

.page-login .btn-lg,
.page-checkout .btn-primary,
.page-cart .btn-primary {
  min-height: 48px;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

body[class^="page-account"] .account-sides-info .head {
  border-radius: 0;
  background: var(--ae-surface-soft);
}

body[class^="page-account"] .account-links > a {
  color: var(--ae-ink-muted);
  font-size: 12px;
  font-weight: 400;
}

body[class^="page-account"] .account-links > a.active {
  background: var(--ae-surface-soft);
  color: var(--ae-ink);
}

/* ------------------------------- 页脚 ----------------------------------- */

footer,
.footer-wrap {
  background: var(--ae-surface-soft);
  border-top: 1px solid var(--ae-rule-light);
  color: var(--ae-ink-muted);
  font-size: 14px;
  letter-spacing: var(--ae-track);
}

footer a {
  color: var(--ae-ink-muted);
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
  color: var(--ae-ink);
}

.aether-site-footer {
  margin-top: 64px;
  background: var(--ae-surface-soft);
}

.aether-footer-main {
  padding: 56px 28px 48px;
}

.aether-footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 42px clamp(34px, 5vw, 88px);
}

.aether-footer-brand {
  max-width: 360px;
}

.aether-footer-logo {
  display: inline-flex;
  width: min(220px, 100%);
  min-height: 48px;
  align-items: center;
}

.aether-footer-logo img {
  display: block;
  width: 100%;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}

.aether-footer-logo span {
  color: var(--ae-ink);
  font-family: var(--ae-serif);
  font-size: 24px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.aether-footer-intro {
  max-width: 330px;
  margin: 20px 0 0;
  color: var(--ae-ink-muted);
  font-size: 12px;
  line-height: 1.7;
}

.aether-footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.aether-footer-socials a {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--ae-rule);
}

.aether-footer-socials img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.aether-footer-column h2 {
  margin: 0 0 20px;
  font-size: 10px;
  font-weight: 400;
}

.aether-footer-column ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aether-footer-column li,
.aether-footer-column a {
  color: var(--ae-ink-muted);
  font-size: 12px;
  line-height: 1.55;
}

.aether-footer-column a:hover,
.aether-footer-column a:focus-visible {
  color: var(--ae-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.aether-footer-bottom {
  border-top: 1px solid var(--ae-rule-light);
}

.aether-footer-bottom .container-fluid {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 28px;
}

.aether-footer-bottom p {
  margin: 0;
  color: var(--ae-ink-subtle);
  font-size: 9px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

/* ----------------------------- AETHER 首页 ------------------------------- */

/* 首页只换主题结构，不写死内容；图片、标题、链接和商品仍由后台装修数据提供。 */
.page-home #home-modules-box {
  overflow: clip;
}

.page-home #home-modules-box > .module-item {
  padding: 64px 0;
}

.page-home #home-modules-box > .aether-home-hero-module {
  padding: 0;
}

.aether-home-section-title {
  margin: 0 auto 26px;
  padding: 0 20px;
  color: var(--ae-ink);
  font-family: var(--ae-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.aether-home-section-intro {
  max-width: 680px;
  margin: -12px auto 34px;
  padding: 0 20px;
  color: var(--ae-ink-muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.aether-home-eyebrow {
  margin: 0;
  font-family: var(--ae-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.aether-text-link {
  display: inline-block;
  color: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* 主视觉：与现有 AETHER 首页相同，满屏摄影、底部居中文字、轻微暗色渐变。 */
.aether-home-hero {
  width: 100%;
  height: calc(100svh - 124px);
  min-height: 560px;
  background: var(--ae-ink);
}

.aether-home-hero-slide {
  position: relative;
  overflow: hidden;
  background: var(--ae-ink);
}

.aether-home-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.aether-home-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 62%), rgb(0 0 0 / 4%) 58%, transparent);
  pointer-events: none;
}

.aether-home-hero-copy {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 8%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 22px;
  color: var(--ae-canvas);
  text-align: center;
}

.aether-home-hero-copy h1,
.aether-home-hero-copy h2 {
  max-width: 780px;
  margin: 14px auto 0;
  color: var(--ae-canvas);
  font-family: var(--ae-serif);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 400;
  line-height: 1.15;
}

.aether-home-hero-description {
  max-width: 620px;
  margin: 12px auto 0;
  color: rgb(255 255 255 / 88%);
  font-size: 14px;
}

.aether-home-hero-link {
  margin-top: 18px;
  color: var(--ae-canvas);
}

.aether-home-hero-link:hover {
  color: var(--ae-canvas);
}

.aether-home-hero-pagination {
  bottom: 20px !important;
}

.aether-home-hero-pagination .swiper-pagination-bullet {
  width: 24px;
  height: 1px;
  margin: 0 4px !important;
  border-radius: 0;
  background: rgb(255 255 255 / 55%);
  opacity: 1;
}

.aether-home-hero-pagination .swiper-pagination-bullet-active {
  background: var(--ae-canvas);
}

/* 分类：两列手机、三列桌面；图片承担视觉，标题安静地排在图下。 */
.aether-home-categories .container-fluid,
.aether-home-products .container-fluid,
.aether-home-editorial-grid .container-fluid,
.aether-home-split.container-fluid,
.aether-home-split .container-fluid,
.module-brand .container-fluid,
.module-pages .container-fluid {
  padding-right: 28px;
  padding-left: 28px;
}

.aether-category-card,
.aether-editorial-card {
  display: block;
  color: var(--ae-ink);
  text-decoration: none;
}

.aether-category-card:hover,
.aether-editorial-card:hover {
  text-decoration: none;
}

.aether-category-image {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ae-surface-soft);
}

.aether-category-image img,
.aether-editorial-image img,
.aether-home-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.aether-category-card:hover img,
.aether-editorial-card:hover img {
  transform: scale(1.015);
}

.aether-category-title {
  display: block;
  margin-top: 11px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.aether-category-subtitle {
  display: block;
  margin-top: 4px;
  color: var(--ae-ink-subtle);
  font-size: 12px;
  text-align: center;
}

/* 商品展示保留后台配置的标签页，视觉改成 AETHER 的文字标签和无框商品卡。 */
.aether-home-products {
  border-top: 1px solid var(--ae-rule-light);
}

.aether-product-tabs {
  gap: 24px;
  margin: -8px 0 34px;
  border: 0;
}

.aether-product-tabs .nav-link {
  padding: 8px 0;
  border: 0 !important;
  color: var(--ae-ink-subtle);
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.aether-product-tabs .nav-link.active {
  border-bottom: 1px solid var(--ae-ink) !important;
  color: var(--ae-ink) !important;
}

.aether-product-card {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.aether-product-card .aether-product-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ae-surface-soft);
}

.aether-product-media > a {
  display: block;
  width: 100%;
  height: 100%;
}

.aether-product-media .image-before,
.aether-product-media .image-after {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  transition: opacity 240ms ease;
}

.aether-product-media .image-after {
  opacity: 0;
}

@media (hover: hover) {
  .aether-product-media:hover .image-after {
    opacity: 1;
  }
}

.aether-product-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  color: var(--ae-ink-subtle);
  text-align: center;
}

.aether-product-placeholder-mark {
  color: var(--ae-ink-muted);
  font-family: var(--ae-serif);
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: .22em;
  padding-left: .22em;
}

.aether-product-placeholder-copy {
  font-size: 9px;
  letter-spacing: var(--ae-track-nav);
}

.aether-product-actions {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.aether-product-media:hover .aether-product-actions,
.aether-product-media:focus-within .aether-product-actions {
  opacity: 1;
  transform: translateY(0);
}

.aether-product-card .aether-product-actions .btn {
  display: inline-flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--ae-rule-strong) !important;
  background: rgba(255, 255, 255, .96) !important;
  color: var(--ae-ink) !important;
}

.aether-product-card .aether-product-actions .btn:hover,
.aether-product-card .aether-product-actions .btn:focus-visible {
  border-color: var(--ae-ink) !important;
  background: var(--ae-ink) !important;
  color: var(--ae-canvas) !important;
}

.aether-product-actions .btn-add-cart {
  flex: 1 1 auto;
  gap: 8px;
  font-size: 10px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

.aether-product-actions .btn-quick-view,
.aether-product-actions .btn-wishlist {
  width: 42px;
  flex: 0 0 42px;
  padding: 0;
}

.aether-product-card .product-bottom-info {
  min-height: 86px;
  padding: 14px 0 28px;
}

.aether-product-card .product-name {
  display: -webkit-box;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--ae-ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.55;
}

.aether-product-card .product-name a {
  color: inherit;
  text-decoration: none;
}

.aether-product-card .product-name a:hover,
.aether-product-card .product-name a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aether-product-card .product-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 7px;
}

.aether-product-card .product-price .price-new {
  font-size: 12px;
}

.aether-product-card .product-price .price-old {
  font-size: 11px;
}

.aether-home-products .product-grid {
  margin-bottom: 16px;
}

.aether-product-card.list {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  gap: 24px;
}

.aether-product-card.list .aether-product-media {
  aspect-ratio: 4 / 5;
}

.aether-product-card.list .product-bottom-info {
  padding-top: 4px;
}

.aether-product-list-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

.aether-product-list-actions .btn-link {
  padding: 0;
  color: var(--ae-ink-muted);
  font-size: 11px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
}

/* 两张活动图变成编辑式双栏，说明文字在图片下方，不再压在照片上。 */
.aether-home-editorial-grid {
  background: var(--ae-surface-soft);
}

.aether-editorial-image {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ae-surface);
}

.aether-editorial-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 12px 0;
  text-align: center;
}

.aether-editorial-title {
  margin-top: 7px;
  font-family: var(--ae-serif);
  font-size: 24px;
  line-height: 1.25;
}

.aether-editorial-copy .aether-text-link {
  margin-top: 12px;
}

/* 单张图文是首页的节奏转换：半幅摄影 + 半幅文字，移动端自然叠放。 */
.aether-home-split {
  padding-right: 28px !important;
  padding-left: 28px !important;
}

.aether-home-split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-height: 560px;
  background: var(--ae-surface-soft);
}

.aether-home-split-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 56px;
}

.aether-home-split-copy h2 {
  max-width: 620px;
  margin: 14px 0 0;
  font-family: var(--ae-serif);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
}

.aether-home-split-description {
  max-width: 580px;
  margin: 20px 0 0;
  color: var(--ae-ink-muted);
  font-size: 15px;
  line-height: 1.7;
}

.aether-home-split-copy .aether-text-link {
  margin-top: 26px;
}

.aether-home-split-image {
  min-height: 480px;
  overflow: hidden;
}

.aether-home-split-grid.image-right .aether-home-split-copy {
  order: 2;
}

.aether-home-split-grid.image-right .aether-home-split-image {
  order: 1;
}

/* 后面的品牌和文章模块仍由后台控制，只统一它们的节奏。 */
.page-home .module-brand,
.page-home .module-pages {
  border-top: 1px solid var(--ae-rule-light);
}

.page-home .module-brand .module-title,
.page-home .module-pages .module-title {
  margin: 0 auto 30px;
  color: var(--ae-ink);
  font-family: var(--ae-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.page-home .module-brand .brand-item {
  border: 1px solid var(--ae-rule-light);
  border-radius: 0;
  box-shadow: none;
}

.page-home .module-pages .pages-wrap,
.page-home .module-pages .image {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.page-home .module-pages .image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ae-surface-soft);
}

.page-home .module-pages .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------- 移动端字号下调 ------------------------------ */

/* 老店的字阶在 768px 以下整体降一档，对齐 chanel.com 自己的断点。 */
@media (max-width: 767.98px) {
  body { font-size: 15px; }
  h1, .h1 { font-size: 24px; }
  h2, .h2 { font-size: 20px; }
  h3, .h3 { font-size: 18px; }

  .page-home #home-modules-box > .module-item {
    padding: 48px 0;
  }

  .page-home #home-modules-box > .aether-home-hero-module {
    padding: 0;
  }

  .aether-home-section-title {
    margin-bottom: 22px;
    font-size: 25px;
  }

  .page-home .module-brand .module-title,
  .page-home .module-pages .module-title {
    margin-bottom: 22px;
    font-size: 25px;
  }

  .aether-home-section-intro {
    margin-bottom: 28px;
    font-size: 13px;
  }

  .aether-home-hero {
    height: calc(100svh - 72px);
    min-height: 520px;
  }

  .aether-home-hero-copy {
    bottom: 7%;
  }

  .aether-home-hero-copy h1,
  .aether-home-hero-copy h2 {
    font-size: 30px;
  }

  .aether-home-hero-description {
    max-width: 360px;
    font-size: 13px;
  }

  .aether-home-categories .container-fluid,
  .aether-home-products .container-fluid,
  .aether-home-editorial-grid .container-fluid,
  .aether-home-split.container-fluid,
  .aether-home-split .container-fluid,
  .module-brand .container-fluid,
  .module-pages .container-fluid {
    padding-right: 16px;
    padding-left: 16px;
  }

  .aether-product-tabs {
    gap: 16px;
    margin-bottom: 26px;
    padding: 0 16px;
  }

  .aether-product-actions {
    display: none;
  }

  .aether-product-card .product-bottom-info {
    min-height: 94px;
    padding: 11px 0 24px;
  }

  .aether-product-card .product-name {
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    font-size: 11px;
  }

  .aether-product-card.list {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
  }

  .aether-product-card.list .product-bottom-info {
    padding-top: 0;
  }

  .aether-product-list-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
  }

  .aether-editorial-image {
    aspect-ratio: 3 / 4;
  }

  .aether-editorial-title {
    font-size: 21px;
  }

  .aether-home-split {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .aether-home-split-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .aether-home-split-copy,
  .aether-home-split-grid.image-right .aether-home-split-copy {
    order: 2;
    padding: 38px 28px 44px;
  }

  .aether-home-split-image,
  .aether-home-split-grid.image-right .aether-home-split-image {
    order: 1;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .aether-home-split-copy h2 {
    font-size: 28px;
  }

  .aether-home-split-description {
    font-size: 14px;
  }

  .aether-site-footer {
    margin-top: 48px;
  }

  .breadcrumb-wrap {
    margin-bottom: 20px;
  }

  .breadcrumb-wrap .breadcrumb {
    min-height: 42px;
    padding: 10px 16px;
    overflow: hidden;
    white-space: nowrap;
  }

  .page-categories > .container-fluid,
  .page-product .product-container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .page-categories .category-intro .row {
    align-items: flex-start !important;
  }

  .page-categories .category-avatar {
    width: 92px;
    height: 116px;
  }

  .page-categories .category-desc .fs-3 {
    font-size: 24px !important;
  }

  .page-categories .category-desc .lh-base {
    display: -webkit-box;
    max-height: 63px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 12px;
  }

  .page-categories .product-tool .style-wrap {
    display: none !important;
  }

  .page-categories .product-tool .right-per-page {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .page-categories .product-tool .right-per-page > .text-nowrap {
    min-width: 0;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
  }

  .page-categories .product-tool .right-per-page .d-flex {
    flex: 0 0 auto;
  }

  .page-categories .product-tool .perpage-select {
    width: 58px;
    margin-left: 0 !important;
  }

  .page-categories .product-tool .order-select {
    width: 92px;
    margin-left: 6px !important;
  }

  .page-product .product-info {
    padding: 24px 0 0;
  }

  .page-product .product-info .product-name {
    font-size: 25px;
  }

  .page-product .add-cart-btns {
    grid-template-columns: 1fr;
  }

  .page-product .product-description {
    margin-top: 42px;
  }

  .page-login #page-login {
    padding-right: 16px;
    padding-left: 16px;
  }

  .page-login .hero-heading {
    font-size: 25px;
  }

  .aether-footer-main {
    padding: 42px 16px 38px;
  }

  .aether-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
  }

  .aether-footer-brand {
    grid-column: 1 / -1;
  }

  .aether-footer-logo {
    width: 180px;
  }

  .aether-footer-intro {
    margin-top: 14px;
  }

  .aether-footer-column h2 {
    margin-bottom: 16px;
  }

  .aether-footer-bottom .container-fluid {
    min-height: 74px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
}

/* ============================================================
   商品详情页
   ------------------------------------------------------------
   结构对照的是老店 app/(store)/[locale]/products/[handle]/page.tsx：
   左侧照片竖向堆叠、零内边距（「照片本身就是页面」），右侧 2/5 宽的信息栏粘住
   视口自己滚动，字号一律小而全大写，正文才回到正常大小写。

   BeikeShop 这边的骨架是 Bootstrap 的 .row + .col-lg-6，所以下面要把栅格的
   负边距和列内边距一起压掉，否则「零内边距」做不出来。
   ============================================================ */

/* 老店整站没有面包屑：导航一直在页头，这条灰带只是噪音，而且它是全宽的浅灰底，
   和这套「只有白底和发丝线」的系统格格不入。分类页和商品页一起去掉，否则两个
   相邻页面一个有一个没有，比两个都有更乱。 */
/* 整站一条规则，不再逐页列举。原先只写了商品/分类/购物车/结算四页，结果品牌页、
   文章页、账户页还留着面包屑 —— 同一条规则漏几页，比不做更显得没想清楚。
   这份样式只在前台加载（插件挂的是 shop 布局的 layout.header.code 钩子），
   不会波及后台的面包屑。 */
.breadcrumb-wrap {
  display: none;
}

.page-product .product-container {
  max-width: none;
  padding: 0;
}

/* 每页条数的下拉框：BeikeShop 自己写了 .perpage-select{max-width:60px;padding-right:8px}，
   而 Bootstrap 的下拉箭头是画在右内边距里的背景图 —— 8px 让数字正好压在箭头上，
   两个都看不清。把箭头的位置让出来（0.75rem 定位 + 16px 图标）。 */
.page-categories .product-tool .perpage-select {
  max-width: 78px;
  padding-right: 28px;
}

/* 商品描述和上面的图文区共用这一个 .container，容器一整幅化，描述就会顶到屏幕
   两边、行宽拉到 1400px —— 正文那样根本没法读。所以把它自己的版心还回去：
   整幅只给照片区，正文仍然居中限宽。 */
.page-product .product-description {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* 窄屏下没有下面那条双列规则，信息栏会直接贴着屏幕边（容器的左右内边距已经被
   上面清零了），这里补回来。上下留白沿用既有规则，不动。 */
@media (max-width: 991.98px) {
  .page-product .product-info {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.aether-gallery {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 不锁死比例。老店那边敢用固定的 4:5，是因为它的照片是按这个比例拍的；这个店的
   商品图是运营自己上传的，方的、宽的都有，套进 4:5 再 contain 就会在每张图上下
   留出大片死白 —— 堆叠布局里那些空白连成一片，比裁图更难看。让图片按自己的比例
   铺满宽度即可。 */
.aether-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* 排版（商品名、价格、库存那几块）**故意不动**。上面 963 行起已经有一整套针对
   本页的字号和字体规则，是之前有意做的选择：大号衬线标题 + 衬线价格。老店参照
   里这两处是 14px 全大写无衬线，两种判断相反 —— 但那是设计决定，不是这次结构
   移植要顺手翻掉的东西（见 AGENTS.md：推翻别人的决定要写清理由）。
   这次只补缺的结构：整幅照片、双列、粘性信息栏。 */

@media (min-width: 992px) {
  .page-product #product-top {
    display: grid;
    grid-template-columns: 3fr 2fr;
    margin: 0;
  }

  /* 这里**不能**写 align-items: start。写了，右列的高度就只有内容那么高，
     里面的 sticky 只在这一小段内有效 —— 照片还在往下滚，信息栏却已经滚没了，
     右边留下一大片空白。默认的 stretch 让右列撑满整行，sticky 才能跟着照片
     一路粘到底。 */

  /* 把 Bootstrap 列的宽度、内边距、栅格间隙全部让位给上面的 grid。 */
  .page-product #product-top > [class*='col-'] {
    width: 100%;
    max-width: none;
    flex: none;
    margin: 0;
    padding: 0;
  }

  /* 信息栏自己滚动，照片列可以任意长 —— 这是老店那套「照片一直翻，右边不动」的
     阅读方式。用 svh 而不是 vh：移动端浏览器地址栏收起时 vh 会跳。 */
  .page-product .product-info {
    position: sticky;
    top: 0;
    max-height: 100svh;
    overflow-y: auto;
    padding: 64px 32px;
  }
}

/* ============================================================
   错误页（404 / 403 / 500 …）
   ------------------------------------------------------------
   这些页面走的是 errors/layout.blade.php 那个独立文档，不经过站点页头页尾，
   所以这里要自己把版面撑起来：居中、留白、字标在上、回首页的出口在下。
   ============================================================ */

.aether-error-page {
  background: var(--ae-canvas);
  color: var(--ae-ink);
  font-family: var(--ae-sans);
}

.aether-error-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-height: 100svh;
  padding: 64px 20px;
  text-align: center;
}

.aether-error-brand img {
  width: 200px;
  height: auto;
}

/* 组件里那句说明文案是 .fs-4 .text-secondary（Bootstrap 工具类，权重压不动），
   所以这里连同 !important 一起压：错误提示不该是四号大字。 */
.aether-error-wrap .fs-4 {
  font-size: 12px !important;
  letter-spacing: var(--ae-track);
  text-transform: uppercase;
  color: var(--ae-ink-subtle) !important;
}

/* BeikeShop 自带的那张灰色纸箱插画和这个店没有关系，而且它是整页最大的一块。
   错误页不需要插画，一句话加一个出口就够。 */
.aether-error-wrap img[src*='no-data'] {
  display: none;
}

.aether-error-home {
  color: var(--ae-ink);
  font-size: 12px;
  letter-spacing: var(--ae-track-nav);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.aether-error-home:hover,
.aether-error-home:focus-visible {
  color: var(--ae-ink-muted);
}