/* ShopNewLook 视觉层 2026-10-23：暗场、克制、聚光。
   只做呈现：不改价格、库存、结账；动效全部放在 prefers-reduced-motion: no-preference 里。 */

:root {
  --snl-ink: #0e0d0c;
  --snl-ivory: #f1ece3;
  --snl-stone: #e9e3d8;
  --snl-taupe: #6e675e;
  --snl-gold: #b79a5b;
  --snl-wine: #7b1e26;
  --snl-hair: color-mix(in srgb, currentColor 18%, transparent);
  --snl-ease: cubic-bezier(.2, .7, .2, 1);
  --snl-fast: 220ms;
  --snl-slow: 720ms;
}

/* ---------- 字体与层级 ---------- */
.title1 { font-size: clamp(56px, 7.4vw, 128px); line-height: .94; letter-spacing: -.02em; }
.title2 { font-size: clamp(36px, 4.4vw, 72px); line-height: 1; letter-spacing: -.015em; }
.title3 { letter-spacing: -.01em; }
.block-heading { text-wrap: balance; }
.rte p, .block-text { text-wrap: pretty; }

/* 价格与数字用等宽数字，读起来不跳 */
.product-price, .product-price__item, .cart-count-bubble { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- 交互基础 ---------- */
:where(a, button, summary, label, input, select):focus-visible {
  outline: 2px solid var(--snl-gold);
  outline-offset: 3px;
}
::selection { background: var(--snl-gold); color: var(--snl-ink); }

/* 按钮：大写宽字距，悬停时底色从下往上推进 */
.button:not(.button--link, .button--text, .button--icon) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 52px;
  padding-inline: 32px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 500;
}
/* 主题用 ::after 外阴影画描边，按钮裁切后会被裁掉，所以描边改成内阴影；推进色块用 ::before */
.button--secondary:not(.button--link, .button--text, .button--icon) {
  box-shadow: inset 0 0 0 1px rgb(var(--color-button-secondary-border));
}
.button:not(.button--link, .button--text, .button--icon)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--snl-gold);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  pointer-events: none;
}
.button:not(.button--link, .button--text, .button--icon, [disabled]):hover { color: var(--snl-ink); }
.button:not(.button--link, .button--text, .button--icon, [disabled]):hover::before { transform: scaleY(1); }

/* "查看更多"不铺满整行，居中成一个按钮 */
.featured-collection__view-more { align-self: center; width: auto; min-width: 260px; }

/* ---------- 首页：首屏 ---------- */
[data-page-type="index"] .slideshow__image-mask {
  background: linear-gradient(180deg, rgba(14, 13, 12, 0) 35%, rgba(14, 13, 12, .78) 100%);
  opacity: 1 !important;
}
[data-page-type="index"] .slideshow__image-container .block-heading { max-width: 9ch; }
[data-page-type="index"] .slideshow__image-container .block-text { max-width: 34ch; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; opacity: .88; }
[data-page-type="index"] .slideshow__pager { display: none; }
/* 首屏图未加载完时先是墨黑底，避免米色空白 */
[data-page-type="index"] .slideshow, [data-page-type="index"] .slideshow__image { background: var(--snl-ink); }

/* 首屏下方的信任带（custom-sline 区块里的 .snl-trust） */
.snl-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--snl-gold) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--snl-gold) 45%, transparent);
}
.snl-trust li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  text-align: left;
}
.snl-trust li + li { border-left: 1px solid color-mix(in srgb, var(--snl-gold) 30%, transparent); }
.snl-trust b {
  font-family: var(--sort-title-font, "Bodoni Moda"), serif;
  font-weight: 500;
  font-size: clamp(18px, 1.3vw, 22px);
  letter-spacing: -.005em;
}
.snl-trust span {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 66%, transparent);
}
.snl-trust a { color: inherit; text-decoration: underline; text-decoration-color: var(--snl-gold); text-underline-offset: 4px; }

/* ---------- 商品卡 ---------- */
.block-product-image__image-wrapper {
  aspect-ratio: 4 / 5;
  background: var(--snl-stone);
}
.block-product-image__image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.block-product-card-info { padding-top: 14px; gap: 6px; }
.block-product-title {
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: .04em;
}
.block-product-card-info .product-price__sale { font-size: 17px; }
/* 划线价与商品页保持一致，弱化成小号灰字 */
.block-product-card-info .product-price__origin { font-size: 13px; color: var(--snl-taupe); font-weight: 400; }
.block-product-card__discount-tag {
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--snl-wine);
}
.block-product-card__quick-add { border-radius: 0; }

/* ---------- 首页：分类图卡 ---------- */
.featured-collection-list__collection { overflow: hidden; }
.featured-collection-list__collection-image { object-position: 50% 20%; }
.featured-collection-list__collection .title3 { font-size: clamp(28px, 2.4vw, 40px); }

/* 品牌宣言（酒红块） */
.rich-text.color-scheme-4 .block-heading { font-style: italic; max-width: 14ch; margin-inline: auto; }
.rich-text.color-scheme-4 .block-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin: 28px auto 0;
  background: var(--snl-gold);
}
.rich-text.color-scheme-4 .rte { max-width: 52ch; margin-inline: auto; }

/* ---------- 商品页 ---------- */
.product-detail__title {
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.product-detail__price .product-price__sale { font-size: 24px; letter-spacing: .02em; }
.product-detail__price .rte { color: var(--snl-taupe); }
.product-detail__info { gap: 22px; }

.variant-picker__group-label { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
.variant-picker__option {
  border-radius: 0 !important;
  min-height: 44px;
}
.variant-picker__option:hover { border-color: currentColor; }
.product-detail__variant-picker .variant-picker__options.product-detail__row-main { justify-content: flex-start; }

.product-detail__additional summary { padding-block: 18px; }
.product-detail__additional .additional__title { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; }
.product-detail__additional { border-top: 1px solid var(--snl-hair); }

/* 运费/备货信息做成一条细线框住的信任行 */
.product-detail__sell-info {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--snl-gold) 55%, transparent);
  background: color-mix(in srgb, var(--snl-gold) 7%, transparent);
  gap: 8px;
  line-height: 1.5;
}

.product-detail__media-group .media-gallery__item img,
.product-detail__media-group .media-gallery__thumbnail img { background: var(--snl-stone); }
.media-gallery__thumbnail { border-radius: 0; }
.media-gallery__thumbnail.is-active { outline: 1px solid var(--snl-ink); outline-offset: -1px; }

/* ---------- 动效（只在允许动效时启用） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .button, .button::before,
  .variant-picker__option,
  .snl-trust a { transition: transform var(--snl-fast) var(--snl-ease), color var(--snl-fast) var(--snl-ease), border-color var(--snl-fast) var(--snl-ease), background-color var(--snl-fast) var(--snl-ease); }

  /* 首屏文字在页面加载时依次浮现（图片不参与，避免拖慢最大内容绘制） */
  [data-page-type="index"] .slideshow__image-container .block-heading,
  [data-page-type="index"] .slideshow__image-container .block-text,
  [data-page-type="index"] .slideshow__image-container .block-button-group {
    animation: snl-rise var(--snl-slow) var(--snl-ease) both;
  }
  [data-page-type="index"] .slideshow__image-container .block-text { animation-delay: 120ms; }
  [data-page-type="index"] .slideshow__image-container .block-button-group { animation-delay: 240ms; }

  /* 首屏图极慢推近，营造聚光感 */
  [data-page-type="index"] .slideshow__image img { animation: snl-settle 2400ms var(--snl-ease) both; }

  .block-product-image__image,
  .featured-collection-list__collection-image { transition: transform 900ms var(--snl-ease), opacity var(--snl-fast) var(--snl-ease); }
  .block-product-image__layer-image-wrapper:hover .block-product-image__image,
  .featured-collection-list__collection:hover .featured-collection-list__collection-image { transform: scale(1.035); }

  /* 滚动浮现：只有脚本运行后才加 .snl-motion，脚本失败时内容照常可见 */
  .snl-motion [data-snl-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--snl-slow) var(--snl-ease), transform var(--snl-slow) var(--snl-ease); transition-delay: var(--snl-delay, 0ms); }
  .snl-motion [data-snl-reveal].is-in { opacity: 1; transform: none; }
}

@keyframes snl-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes snl-settle { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ---------- 手机 ---------- */
@media (max-width: 959px) {
  .title1 { font-size: clamp(48px, 13vw, 72px); }
  .title2 { font-size: clamp(32px, 9vw, 48px); }
  .snl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snl-trust li { padding: 18px 16px; }
  .snl-trust li:nth-child(3) { border-left: 0; }
  .snl-trust li:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, var(--snl-gold) 30%, transparent); }
  .snl-trust b { font-size: 15px; line-height: 1.3; }
  .snl-trust a { overflow-wrap: anywhere; }
  .snl-trust span { font-size: 11px; letter-spacing: .12em; }
  .block-product-title { font-size: 15px; }
  /* 手机上画廊不超过 70% 屏高，加购按钮更早出现 */
  .product-detail__media-group .media-gallery__item img { max-height: 70vh; object-fit: contain; }
  .product-detail__title { font-size: clamp(26px, 7vw, 32px); }
  .product-detail__variant-picker .variant-picker__option { min-height: 40px; padding: 8px 14px; }
  .product-detail__variant-picker .variant-picker__options { gap: 8px; }
  .button:not(.button--link, .button--text, .button--icon) { padding-inline: 22px; }
}