/** Shopify CDN: Minification failed

Line 1296:3 Unexpected "13c"
Line 1390:3 Unexpected "20."

**/
/* ==========================================================================
   HAMISH BLAND — 「浅海蓝 × 珍珠白」设计系统
   主题：Shrine PRO 1.3.0（Dawn 系）
   挂载：theme.liquid 中 base.css 之后
        {{ 'hamish-noir.css' | asset_url | stylesheet_tag }}
   说明：本文件是纯覆盖层，不改主题任何原始文件，主题升级不会冲突。
   ========================================================================== */

:root {
  /* ---- 配色令牌 ---- */
  --hn-bg:        #FFFFFF;   /* 主背景 暗紫黑 */
  --hn-bg-2:      #EAF3FA;   /* 次背景 */
  --hn-bg-deep:   #D8E9F4;   /* 更深紫（newsletter / footer） */
  --hn-ink:       #16324A;   /* 主文字 浅紫白 */
  --hn-ink-dim:   rgba(22, 50, 74, 0.70);
  --hn-ink-faint: rgba(22, 50, 74, 0.44);
  --hn-card:      #FFFFFF;
  --hn-ink-on-card: #16324A;  /* 白卡上的深紫字 */

  --hn-gold:      #2E6E99;   /* 强调 A 香槟金 */
  --hn-gold-70:   rgba(46, 110, 153, 0.70);
  --hn-gold-40:   rgba(46, 110, 153, 0.40);
  --hn-gold-18:   rgba(46, 110, 153, 0.18);
  --hn-lilac:     #4A90B8;   /* 强调 B 淡紫 */
  --hn-lilac-40:  rgba(74, 144, 184, 0.40);
  --hn-lilac-16:  rgba(74, 144, 184, 0.16);
  --hn-rose:      #8FC1DC;   /* 点缀 玫瑰粉 */
  --hn-alert:     #E63946;   /* 警示 */

  /* ---- 字体 ---- */
  --hn-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --hn-font-body:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hn-font-num:     'Cormorant Garamond', Georgia, serif;
  --hn-font-hand:    'Caveat', 'Segoe Script', cursive;

  --hn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- 装潢线：金线 + 中间小菱形（两端渐隐） ---- */
  --hn-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 16' width='640' height='16'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232E6E99' stop-opacity='0'/%3E%3Cstop offset='.28' stop-color='%232E6E99' stop-opacity='.55'/%3E%3Cstop offset='.5' stop-color='%232E6E99' stop-opacity='.95'/%3E%3Cstop offset='.72' stop-color='%232E6E99' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%232E6E99' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='7.5' width='640' height='1' fill='url(%23l)'/%3E%3Cpath d='M320 4.4 323.6 8 320 11.6 316.4 8Z' fill='%232E6E99'/%3E%3Cpath d='M307 5.4 309.6 8 307 10.6 304.4 8Z' fill='none' stroke='%232E6E99' stroke-width='.7' stroke-opacity='.65'/%3E%3Cpath d='M333 5.4 335.6 8 333 10.6 330.4 8Z' fill='none' stroke='%232E6E99' stroke-width='.7' stroke-opacity='.65'/%3E%3C/svg%3E");

  /* ---- 珍珠串（金 + 淡紫交替） ---- */
  --hn-pearls: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' width='120' height='12'%3E%3Cpath d='M0 6h120' stroke='%232E6E99' stroke-opacity='.35' stroke-width='.7'/%3E%3Ccircle cx='30' cy='6' r='2.6' fill='none' stroke='%232E6E99' stroke-width='.9'/%3E%3Ccircle cx='50' cy='6' r='3.2' fill='none' stroke='%234A90B8' stroke-width='.9'/%3E%3Ccircle cx='70' cy='6' r='2.6' fill='none' stroke='%232E6E99' stroke-width='.9'/%3E%3Ccircle cx='88' cy='6' r='1.8' fill='none' stroke='%234A90B8' stroke-width='.9'/%3E%3C/svg%3E");

  /* ---- 角落小菱形（卡片四角） ---- */
  --hn-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10'%3E%3Cpath d='M5 1 9 5 5 9 1 5Z' fill='none' stroke='%232E6E99' stroke-width='.9' stroke-opacity='.8'/%3E%3C/svg%3E");
  --hn-pearl-chain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 28' width='640' height='28'%3E%3Cpath d='M0 5 Q320 21 640 5' fill='none' stroke='%232E6E99' stroke-opacity='.5' stroke-width='1'/%3E%3Ccircle cx='80' cy='8.5' r='2.8' fill='%23FFFFFF' stroke='%232E6E99' stroke-opacity='.75' stroke-width='1'/%3E%3Ccircle cx='160' cy='11' r='2.8' fill='%23FFFFFF' stroke='%232E6E99' stroke-opacity='.75' stroke-width='1'/%3E%3Ccircle cx='240' cy='12.5' r='2.8' fill='%23FFFFFF' stroke='%232E6E99' stroke-opacity='.75' stroke-width='1'/%3E%3Ccircle cx='320' cy='13' r='3.3' fill='%23FFFFFF' stroke='%232E6E99' stroke-opacity='.9' stroke-width='1.1'/%3E%3Ccircle cx='400' cy='12.5' r='2.8' fill='%23FFFFFF' stroke='%232E6E99' stroke-opacity='.75' stroke-width='1'/%3E%3Ccircle cx='480' cy='11' r='2.8' fill='%23FFFFFF' stroke='%232E6E99' stroke-opacity='.75' stroke-width='1'/%3E%3Ccircle cx='560' cy='8.5' r='2.8' fill='%23FFFFFF' stroke='%232E6E99' stroke-opacity='.75' stroke-width='1'/%3E%3C/svg%3E");
  --hn-shell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' width='44' height='44'%3E%3Cpath d='M2 2 L36 5 A34 34 0 0 1 5 36 Z' fill='%23FFFFFF' fill-opacity='.55' stroke='%232E6E99' stroke-opacity='.85' stroke-width='1.1'/%3E%3Cpath d='M2 2 L35 12 M2 2 L31 21 M2 2 L21 31 M2 2 L12 35' stroke='%232E6E99' stroke-opacity='.45' stroke-width='.8'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1. 全局基调
   ========================================================================== */

/* 整页壁纸：海景图固定在视口，内容层半透明压在图上。
   底色 #EAF3FA 是图片加载前的兜底，也是图加载失败时的观感。
   注意：这条规则在 base.css 的 `body { background-color }` 之后加载，
   且 .gradient 类选择器特异性更高，所以能压住主题注入的 body 背景。 */
body,
body.gradient {
  background-color: #EAF3FA;
  background-image: url("sea-page-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--hn-ink);
}

/* --------------------------------------------------------------------------
   整页壁纸配套：内容层半透明，让海景从每个板块透出来。

   ⚠ 这里只铺「一层」wash（在 #MainContent 上）。千万不要容器一层 + 各板块再一层：
     0.82 × 0.82 会叠成 ~97% 白，海景整张被盖没，等于白做。
   ⚠ Shrine PRO 的 <html> 上没有 data-template 属性，别用 [data-template='index']。

   选 #MainContent 而不是逐段加，是因为有些段（如产品页 main 的
   <section class="page-width">）自身完全没有背景 —— 它原本就是设计来坐在暗紫 body 上的。
   没有这层兜底，那些段会直接露出壁纸顶部的深蓝，变成一堵蓝墙。
   -------------------------------------------------------------------------- */
#MainContent {
  background-color: rgba(255, 255, 255, 0.80);
}

/* 板块层：清掉主题自带的不透明底色（含 background-1/2 和 custom），让上面那层透出来 */
#MainContent .shopify-section > .gradient,
#MainContent .shopify-section > * > .gradient {
  background-color: transparent !important;
  background-image: none !important;
}
/* 次背景段补一层极淡海蓝，保住段落之间的层次（否则全站一片白） */
#MainContent .shopify-section > .color-background-2,
#MainContent .shopify-section > * > .color-background-2 {
  background-color: rgba(214, 233, 246, 0.55) !important;
}
/* 卡片层实心：必须排在两条透明规则之后才能赢（同特异性，后者胜） */
#MainContent .trustpilot-review.gradient,
#MainContent .trustpilot-review.color-custom {
  background-color: #FFFFFF !important;
}

body,
button,
input,
select,
textarea,
.field__input {
  font-family: var(--hn-font-body);
}

h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5,
.h1 strong, .h0 strong, .h2 strong, .h3 strong {
  font-family: var(--hn-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* 大标题全大写宽字距 */
.h0, .h1, .hn-caps,
h1.h0, h2.h1 {
  text-transform: uppercase;
  letter-spacing: 0.11em;
  line-height: 1.18;
}

/* 数字（价格等）走 Cormorant Garamond */
.price, .price__container, .price-item, .price__regular .price-item--regular,
.hn-num, .cart-count-bubble {
  font-family: var(--hn-font-num);
  font-variant-numeric: lining-nums tabular-nums;
}

/* 正文里的普通段落别用衬线 */
.rte, p, li, .body1, .caption {
  font-family: var(--hn-font-body);
  letter-spacing: 0.01em;
}

/* 深色底上的通用文字色 */
body, .rte, p, li, .h0, .h1, .h2, .h3, .h4, .h5 {
  color: var(--hn-ink);
}

/* 白卡内部恢复深色字 */
.hn-on-light, .hn-on-light .rte, .hn-on-light p, .hn-on-light li,
.hn-on-light .h0, .hn-on-light .h1, .hn-on-light .h2, .hn-on-light .h3 {
  color: var(--hn-ink-on-card);
}

/* ==========================================================================
   2. 按钮
   ========================================================================== */

.button, .shopify-challenge__button, .customer button,
button.shopify-payment-button__button--unbranded {
  font-family: var(--hn-font-body);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 1.2rem;
  background: var(--hn-gold);
  color: var(--hn-bg);
  border: 1px solid var(--hn-gold);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  transition: background 0.35s var(--hn-ease), color 0.35s var(--hn-ease);
}

.button:hover, .customer button:hover {
  background: transparent;
  color: var(--hn-gold);
}

.button--secondary, .button--tertiary {
  background: transparent;
  color: var(--hn-gold);
  border: 1px solid var(--hn-gold-40);
}

.button--secondary:hover, .button--tertiary:hover {
  background: var(--hn-gold);
  color: var(--hn-bg);
}

/* 金色反光扫过 */
.hn-sheen { position: relative; overflow: hidden; }
.hn-sheen::after {
  content: '';
  position: absolute;
  top: -120%;
  left: -60%;
  width: 45%;
  height: 340%;
  background: linear-gradient(100deg, transparent, rgba(255, 245, 220, 0.55), transparent);
  transform: rotate(18deg) translateX(-140%);
  transition: transform 0.85s var(--hn-ease);
  pointer-events: none;
}
.hn-sheen:hover::after { transform: rotate(18deg) translateX(420%); }

/* ==========================================================================
   3. 装潢线工具类 / 板块分隔
   ========================================================================== */

.hn-rule {
  display: block;
  width: min(1100px, 86%);
  height: 16px;
  margin: 0 auto;
  background-image: var(--hn-rule);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 16px;
  border: 0;
  opacity: 0.9;
}

.hn-pearls {
  display: block;
  height: 12px;
  background-image: var(--hn-pearls);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 120px 12px;
  opacity: 0.75;
}

/* 首页板块之间的自动分隔线 */
#MainContent .shopify-section + .shopify-section {
  position: relative;
}
#MainContent .shopify-section + .shopify-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 86%);
  height: 16px;
  background-image: var(--hn-rule);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 16px;
  pointer-events: none;
  z-index: 1;
}
/* 白底段落之间不画金线（在暗紫底上才有意义） */
#MainContent .shopify-section.hn-light + .shopify-section::before,
#MainContent .shopify-section + .shopify-section.hn-light::before {
  opacity: 0.25;
}

/* ==========================================================================
   4. 板块 1 — HORIZONTAL TICKER
   ========================================================================== */

.horizontal-ticker__container {
  background: var(--hn-bg);
  border-bottom: 1px solid var(--hn-gold-18);
  position: relative;
}
.horizontal-ticker__container::before,
.horizontal-ticker__container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.horizontal-ticker__container::before {
  left: 0;
  background: linear-gradient(90deg, var(--hn-bg), transparent);
}
.horizontal-ticker__container::after {
  right: 0;
  background: linear-gradient(270deg, var(--hn-bg), transparent);
}
.horizontal-ticker__container,
.horizontal-ticker__container * {
  color: var(--hn-gold);
}
.horizontal-ticker__container .hn-ticker-orn {
  display: inline-block;
  width: 96px;
  height: 22px;
  vertical-align: middle;
  opacity: 0.85;
}

/* ==========================================================================
   5. 板块 2 — ANNOUNCEMENT BAR
   ========================================================================== */

.announcement-bar,
.announcement-bar.color-accent-1 {
  background: var(--hn-gold) !important;
  border-bottom: 1px solid var(--hn-gold);
  background-image: none;
}
.announcement-bar *,
.announcement-bar__message,
.announcement-bar__message p {
  color: var(--hn-bg) !important;
  font-family: var(--hn-font-body);
  letter-spacing: 0.08em;
  font-weight: 500;
}
/* ⚠ 上面那条 `.announcement-bar *` 通配符连「图标 span」一起命中了：
   图标是靠 Material Symbols 字体的连字把文字（如 storefront）渲染成一个字形的，
   字体一被换成 Jost，连字失效 → 图标名当成普通文字画出来，
   再被主题的 `max-width:1em; overflow:hidden` 裁掉 → 公告条上就出现一团 "st…"。
   图标必须拿回自己的字体/字距/字重。本文件在主题 <style> 之后加载，同特异性后者胜，
   所以这里必须用更高的特异性（两个 class）把它救回来。 */
.announcement-bar .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  letter-spacing: normal;
}

/* ==========================================================================
   6. 板块 3 — HEADER
   ========================================================================== */

.header-wrapper,
.header-wrapper.gradient {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hn-gold-18);
  background-image: none;
}
.header__menu-item,
.header__menu-item span,
.header__icon,
.header__heading-link,
.header__active-menu-item {
  color: var(--hn-ink) !important;
}
.header__menu-item:hover,
.header__menu-item:hover span,
.header__icon:hover,
.header__heading-link:hover {
  color: var(--hn-gold) !important;
}
.header__menu-item:hover .header__active-menu-item { text-decoration: none; }
.header__active-menu-item { text-decoration: none; border-bottom: 1px solid var(--hn-gold); }

/* 页头「购物车」图标旁加一枚线稿珠宝盒 */
.hn-cart-jewel {
  display: inline-block;
  width: 17px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  color: inherit;
}

/* ==========================================================================
   7. 板块 4 — HERO（image-with-text 首屏）
   ========================================================================== */

.hn-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(74, 144, 184, 0.20), transparent 44%),
    radial-gradient(circle at 12% 88%, rgba(46, 110, 153, 0.09), transparent 40%),
    var(--hn-bg);
}
.hn-hero .h0,
.hn-hero .h1 {
  font-family: var(--hn-font-display);
  color: var(--hn-gold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  text-shadow: 0 0 34px rgba(46, 110, 153, 0.28);
}
.hn-hero .h0 strong,
.hn-hero .h1 strong { color: var(--hn-gold); font-weight: 700; }
.hn-hero .rte,
.hn-hero p { color: var(--hn-ink-dim); }

/* 发光水母线稿层 */
.hn-jelly-layer {
  position: absolute;
  top: 0;
  right: 0;
  width: min(46vw, 620px);
  height: 100%;
  min-height: 420px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}
.hn-jelly-layer svg { width: 100%; height: 100%; display: block; }
.hn-jelly { animation: hn-jelly-drift 13s ease-in-out infinite; transform-origin: 50% 12%; }
.hn-jelly-tentacles {
  animation: hn-tentacle-sway 7s ease-in-out infinite;
  transform-origin: 50% 0%;
}
@keyframes hn-jelly-drift {
  0%, 100% { transform: translate3d(0, -10px, 0) scale(1); }
  50%      { transform: translate3d(-10px, 18px, 0) scale(1.035); }
}
@keyframes hn-tentacle-sway {
  0%, 100% { transform: skewX(0deg); }
  50%      { transform: skewX(3.2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hn-jelly, .hn-jelly-tentacles { animation: none; }
}

/* ==========================================================================
   8. 板块 5 — FEATURED COLLECTION（白卡浮暗紫底）
   ========================================================================== */

.hn-dark-bg {
  background: var(--hn-bg);
  background-image:
    radial-gradient(circle at 16% 0%, rgba(74, 144, 184, 0.12), transparent 42%),
    radial-gradient(circle at 88% 100%, rgba(46, 110, 153, 0.07), transparent 40%);
}
.hn-dark-bg .h0, .hn-dark-bg .h1, .hn-dark-bg .h2, .hn-dark-bg .h3 { color: var(--hn-gold); }
.hn-dark-bg .rte, .hn-dark-bg p { color: var(--hn-ink-dim); }

/* 商品卡：白底 + 顶部金线菱形 + 右上角圆形徽章 */
.hn-dark-bg .card-wrapper .card,
.hn-cards .card-wrapper .card {
  background: var(--hn-card) !important;
  border: 1px solid var(--hn-gold-18);
  border-radius: 0;
  background-image: var(--hn-rule) !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  background-size: min(72%, 190px) 16px !important;
  transition: transform 0.45s var(--hn-ease), box-shadow 0.45s var(--hn-ease), border-color 0.45s var(--hn-ease);
}
.hn-cards .card-wrapper:hover .card,
.hn-dark-bg .card-wrapper:hover .card {
  transform: translateY(-6px);
  border-color: var(--hn-gold-40);
  box-shadow: 0 22px 48px rgba(22, 50, 74, 0.5);
}
.hn-cards .card__content,
.hn-dark-bg .card__content { padding-top: 1.6rem; }
.hn-cards .card__heading a,
.hn-cards .card__heading,
.hn-dark-bg .card__heading a,
.hn-dark-bg .card__heading {
  font-family: var(--hn-font-display);
  color: var(--hn-ink-on-card) !important;
  letter-spacing: 0.04em;
}
.hn-cards .price,
.hn-dark-bg .card-wrapper .price,
.hn-dark-bg .card-wrapper .price-item {
  color: var(--hn-gold) !important;
  font-family: var(--hn-font-num);
  font-size: 2.2rem;
  letter-spacing: 0.02em;
}

/* 加购按钮 + 反光 */
.hn-cards .quick-add__submit,
.hn-dark-bg .quick-add__submit,
.hn-cards .card__cta .button {
  background: var(--hn-gold);
  color: var(--hn-bg);
  border: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.hn-cards .quick-add__submit::after,
.hn-dark-bg .quick-add__submit::after {
  content: '';
  position: absolute;
  top: -120%; left: -60%;
  width: 45%; height: 340%;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 224, 0.7), transparent);
  transform: rotate(18deg) translateX(-140%);
  transition: transform 0.85s var(--hn-ease);
  pointer-events: none;
}
.hn-cards .card-wrapper:hover .quick-add__submit::after,
.hn-dark-bg .card-wrapper:hover .quick-add__submit::after {
  transform: rotate(18deg) translateX(420%);
}

/* 「限定」圆形金线徽章 */
.hn-badge-limited {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 54px;
  height: 54px;
  border: 1px solid var(--hn-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hn-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hn-gold);
  background: rgba(255, 255, 255, 0.55);
  z-index: 3;
  pointer-events: none;
}

/* ==========================================================================
   9. 板块 6 — IMAGE WITH TEXT（珠宝展柜套餐卡）
   ========================================================================== */

.hn-vitrine {
  display: grid;
  gap: clamp(2rem, 3.4vw, 4rem);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 3rem;
}
.hn-vitrine__card {
  position: relative;
  /* 原来是几乎全透明的白渐变（给暗紫底用的）；浅底上必须实心，否则卡片根本没形 */
  background: #FFFFFF;
  border: 1px solid var(--hn-gold-40);
  padding: clamp(2.4rem, 3vw, 3.6rem) clamp(1.8rem, 2.4vw, 3rem);
  text-align: center;
  transition: transform 0.45s var(--hn-ease), border-color 0.45s var(--hn-ease), box-shadow 0.45s var(--hn-ease);
}
/* 集合卡：整张卡可点 = 一层独立的透明覆盖链接（见 hamish-vitrine.liquid）。
   ⚠ 别改成 `.hn-vitrine__card .button::after`：主题 .button 是 position:relative，
     ::after 只盖住按钮本身；而且 .hn-sheen 的 ::after 已经给了反光动画，会互相顶掉。 */
/* ⚠ 必须写成 `a.hn-vitrine__stretch`（0,1,1），不能只写类名（0,1,0）：
   主题 base.css 有一条 `a:empty, div:empty, p:empty, … { display: none }`，
   而覆盖层是个空 <a> —— 正好踩中，特异性 (0,1,1) 又比单个类名高，会被直接隐藏。
   同特异性下本文件在 base.css 之后加载，所以 (0,1,1) 就能赢。 */
a.hn-vitrine__stretch {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* 覆盖层挡住按钮后按钮拿不到 :hover，反光动画改由「卡片 hover」触发 */
.hn-vitrine__card:hover .hn-sheen::after { transform: rotate(18deg) translateX(420%); }
.hn-vitrine__card:hover { box-shadow: 0 18px 40px rgba(22, 50, 74, 0.12); }
/* 四角小菱形 */
.hn-vitrine__card::before,
.hn-vitrine__card::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-image: var(--hn-corner);
  background-repeat: no-repeat;
  pointer-events: none;
}
.hn-vitrine__card::before { top: -5px; left: -5px; }
.hn-vitrine__card::after { bottom: -5px; right: -5px; }
.hn-vitrine__card:hover {
  transform: translateY(-8px);
  border-color: var(--hn-gold);
  box-shadow: 0 26px 60px rgba(22, 50, 74, 0.55);
}
.hn-vitrine__card--featured {
  border-width: 2px;
  border-color: var(--hn-gold);
  background: linear-gradient(180deg, rgba(46, 110, 153, 0.10), rgba(74, 144, 184, 0.04));
}
.hn-vitrine__tag {
  position: absolute;
  top: -1.3rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hn-gold);
  color: var(--hn-bg);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 1.2rem;
  white-space: nowrap;
}
.hn-vitrine__name {
  font-family: var(--hn-font-display);
  font-size: clamp(1.9rem, 2.2vw, 2.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hn-gold);
  margin: 0 0 0.6rem;
}
.hn-vitrine__desc { color: var(--hn-ink-dim); font-size: 1.45rem; line-height: 1.7; }
.hn-vitrine__price {
  font-family: var(--hn-font-num);
  font-size: clamp(3rem, 3.4vw, 4rem);
  color: var(--hn-gold);
  line-height: 1;
  margin: 1.4rem 0 1.8rem;
}
/* 卡片之间的线稿星芒 */
.hn-vitrine__card + .hn-vitrine__card::after,
.hn-vitrine__card + .hn-vitrine__card::before { z-index: 2; }
.hn-starburst {
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  color: var(--hn-lilac);
  opacity: 0.65;
  pointer-events: none;
}
@media screen and (max-width: 989px) {
  .hn-vitrine { grid-template-columns: 1fr; }
  .hn-starburst { display: none; }
}

/* ==========================================================================
   10. 板块 7 — TRUSTPILOT REVIEWS（白底）
   ========================================================================== */

.hn-light {
  background: var(--hn-card);
  color: var(--hn-ink-on-card);
}
.hn-light .h0, .hn-light .h1, .hn-light .h2, .hn-light .h3,
.hn-light .rte, .hn-light p, .hn-light li { color: var(--hn-ink-on-card); }
.hn-light .h0, .hn-light .h1 {
  text-transform: uppercase;
  letter-spacing: 0.10em;
  position: relative;
}
/* 标题上下金线 + 中间小钻 */
.hn-light .hn-title-orn,
.hn-title-orn {
  display: block;
  width: min(560px, 78%);
  height: 44px;
  margin: 0.6rem auto 0.4rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 44' width='560' height='44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232E6E99' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%232E6E99' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%232E6E99' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='9' width='560' height='1' fill='url(%23g)'/%3E%3Crect x='0' y='34' width='560' height='1' fill='url(%23g)'/%3E%3Cpath d='M280 15 288 22 280 29 272 22Z' fill='none' stroke='%232E6E99' stroke-width='1'/%3E%3Ccircle cx='280' cy='22' r='2.2' fill='%232E6E99'/%3E%3C/svg%3E");
}

.hn-light .trustpilot-rating,
.hn-light .rating-value { font-family: var(--hn-font-num); }

/* 评价卡 */
.hn-light .trustpilot-review,
.hn-light .reviews-card,
.hn-light .trustpilot-reviews__card {
  background: #fff;
  border: 1px solid rgba(22, 50, 74, 0.10);
  border-radius: 0;
  position: relative;
  transition: transform 0.4s var(--hn-ease), box-shadow 0.4s var(--hn-ease);
}
.hn-light .trustpilot-review:hover,
.hn-light .reviews-card:hover,
.hn-light .trustpilot-reviews__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(22, 50, 74, 0.14);
}
/* 评价卡角落小珍珠 */
.hn-light .trustpilot-review::after,
.hn-light .reviews-card::after,
.hn-light .trustpilot-reviews__card::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  border: 1px solid var(--hn-gold-40);
  border-radius: 50%;
}
.hn-light .trustpilot-review .rte,
.hn-light .trustpilot-review p,
.hn-light .trustpilot-review__text { color: #33475A; }

/* --------------------------------------------------------------------------
   评价卡：文字色保险 + 产品实拍图
   ⚠ 卡片标题是 <h3 class='h4'>，既不匹配 .hn-light 的 p/rte 规则，
     也不匹配 .trustpilot-review__text —— 上一版就是漏了它才让标题整条隐形。
   -------------------------------------------------------------------------- */
#MainContent .trustpilot-review h3,
#MainContent .trustpilot-review .h4,
#MainContent .trustpilot-review p,
#MainContent .trustpilot-review .rte {
  color: #16324A;
}
#MainContent .trustpilot-review .rte,
#MainContent .trustpilot-review p { color: #33475A; }

#MainContent .trustpilot-review__image {
  margin: 0 0 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(22, 50, 74, 0.10);
}
#MainContent .trustpilot-review__image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s var(--hn-ease);
}
#MainContent .trustpilot-review:hover .trustpilot-review__image img {
  transform: scale(1.04);
}

/* ==========================================================================
   11. 板块 9 — COLLECTION LIST（暗紫底 + 金色细虚线 + 四角菱形）
   ========================================================================== */

.hn-collections {
  background: var(--hn-bg);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(74, 144, 184, 0.12), transparent 45%);
}
.hn-collections .collection-list__item,
.hn-collections .card-wrapper {
  position: relative;
  padding-bottom: 1.4rem;
  border-bottom: 1px dashed var(--hn-gold-40);
}
.hn-collections .card-wrapper .card {
  background: transparent !important;
  border: 1px solid var(--hn-gold-40);
  border-radius: 0;
  background-image: var(--hn-corner), var(--hn-corner), var(--hn-corner), var(--hn-corner) !important;
  background-repeat: no-repeat !important;
  background-position: top 4px left 4px, top 4px right 4px, bottom 4px left 4px, bottom 4px right 4px !important;
  background-size: 10px 10px !important;
  overflow: hidden;
  transition: transform 0.5s var(--hn-ease), border-color 0.5s var(--hn-ease);
}
.hn-collections .card-wrapper:hover .card {
  transform: scale(1.035);
  border-color: var(--hn-gold);
}
.hn-collections .card__media img { transition: transform 0.7s var(--hn-ease); }
.hn-collections .card-wrapper:hover .card__media img { transform: scale(1.06); }
.hn-collections .card__heading,
.hn-collections .card__heading a {
  font-family: var(--hn-font-display);
  color: var(--hn-gold) !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 1.5rem;
}
/* 图下金色圆形徽章 */
.hn-collections .card__badge,
.hn-collections .hn-coll-medallion {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border: 1px solid var(--hn-gold);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hn-gold);
  z-index: 3;
}

/* ==========================================================================
   12. 板块 8 — HOW TO COOK（餐厅菜单风）
   ========================================================================== */

.hn-menu-card {
  position: relative;
  background: linear-gradient(180deg, rgba(234, 243, 250, 0.9), rgba(255, 255, 255, 0.9));
  border: 1px solid var(--hn-gold-40);
  padding: 2.6rem 2.2rem;
}
.hn-menu-card::before,
.hn-menu-card::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(180px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hn-gold-70), transparent);
}
.hn-menu-card::before { top: 10px; }
.hn-menu-card::after { bottom: 10px; }
.hn-menu-card__step {
  font-family: var(--hn-font-display);
  color: var(--hn-gold);
  font-size: 1.3rem;
  letter-spacing: 0.22em;
}
.hn-menu-card__name {
  font-family: var(--hn-font-display);
  color: var(--hn-ink);
  font-size: 1.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0.4rem 0 0.8rem;
}
.hn-menu-card__desc { color: var(--hn-ink-dim); font-size: 1.4rem; line-height: 1.75; }

.hn-menu-card__note {
  font-family: var(--hn-font-num);
  font-style: italic;
  color: var(--hn-lilac);
  font-size: 1.35rem;
  margin-top: 1rem;
  opacity: 0.85;
}

/* 做法卡栅格 + 珊瑚分隔 */
.hn-cook-grid {
  display: grid;
  gap: clamp(2rem, 3vw, 3.6rem);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
.hn-cook-grid__sep { display: none; }
@media screen and (max-width: 989px) {
  .hn-cook-grid { grid-template-columns: 1fr; }
  .hn-cook-grid__sep { display: block; margin: 0.4rem auto; }
}

/* 居中单条金线 */
.hn-rule--center { margin: 1rem auto 1.4rem; }

/* 深海珊瑚分隔线 */
.hn-coral {
  display: block;
  width: min(900px, 84%);
  height: 34px;
  margin: 2.4rem auto;
  opacity: 0.55;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 34' width='900' height='34'%3E%3Cg fill='none' stroke='%234A90B8' stroke-opacity='.55' stroke-width='1.1'%3E%3Cpath d='M60 30c0-8 6-10 6-16M66 30c0-7-5-9-5-15M110 30c0-9 7-11 7-18M117 30c0-8-6-10-6-17M760 30c0-8 6-10 6-16M766 30c0-7-5-9-5-15M812 30c0-9 7-11 7-18M819 30c0-8-6-10-6-17'/%3E%3C/g%3E%3Crect x='0' y='30' width='900' height='1' fill='%232E6E99' fill-opacity='.35'/%3E%3Cpath d='M450 12 456 20 450 28 444 20Z' fill='none' stroke='%232E6E99' stroke-width='1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   13. 板块 10 — NEWSLETTER（更深紫 + 珍珠串 + 发光水母淡影）
   ========================================================================== */

.newsletter,
.newsletter.color-accent-2 {
  background: var(--hn-bg-deep) !important;
  background-image:
    radial-gradient(circle at 84% 30%, rgba(74, 144, 184, 0.16), transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(46, 110, 153, 0.06), transparent 42%) !important;
  position: relative;
}
.newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1000px, 88%);
  height: 12px;
  background-image: var(--hn-pearls);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 120px 12px;
  opacity: 0.7;
}
.newsletter .h0, .newsletter .h1, .newsletter .h2 {
  font-family: var(--hn-font-display);
  color: var(--hn-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.newsletter .rte, .newsletter p { color: var(--hn-ink-dim); }
.newsletter .field__input {
  background: transparent;
  border: 1px solid var(--hn-gold-40);
  border-radius: 0;
  color: var(--hn-ink);
}
.newsletter .field__input:focus {
  border-color: var(--hn-gold);
  box-shadow: 0 0 0 1px var(--hn-gold-40);
}
.newsletter .field__label { color: var(--hn-ink-faint); }
.newsletter .newsletter-form__button {
  background: var(--hn-gold);
  color: var(--hn-bg);
  border-radius: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   13b. 两条信任/冷链带（原 demo 的 index-shipping，已整段重写）
   ========================================================================== */

.hn-promise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 5rem);
  border-top: 1px solid var(--hn-gold-18);
  border-bottom: 1px solid var(--hn-gold-18);
  padding: clamp(2.6rem, 4vw, 4.2rem) 0;
  margin: clamp(2rem, 3vw, 3.2rem) 0;
}
.hn-promise__item { text-align: center; }
.hn-promise__icon {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  color: var(--hn-gold);
}
.hn-promise__icon svg { width: 100%; height: 100%; display: block; }
.hn-promise__title {
  font-family: var(--hn-font-display);
  color: var(--hn-gold);
  font-size: 1.65rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.hn-promise__text {
  color: var(--hn-ink-dim);
  font-size: 1.35rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 34ch;
}

.hn-fromsea { padding: clamp(2rem, 3vw, 3.4rem) 0; }
.hn-fromsea__title {
  font-family: var(--hn-font-display);
  color: var(--hn-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  font-size: clamp(1.9rem, 2.6vw, 2.8rem);
  margin: 0 0 0.6rem;
}
.hn-fromsea__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  margin-top: 2.6rem;
}
.hn-fromsea__item { text-align: center; color: var(--hn-lilac); }
.hn-fromsea__item svg { width: 46px; height: 46px; margin: 0 auto 0.7rem; display: block; }
.hn-fromsea__item p {
  color: var(--hn-ink);
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}
@media screen and (max-width: 749px) {
  .hn-promise { grid-template-columns: 1fr; gap: 2.4rem; }
  .hn-fromsea__row { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   14. 板块 11 — FOOTER
   ========================================================================== */

.footer,
.footer.color-background-1,
.footer.gradient {
  background: var(--hn-bg-deep) !important;
  background-image: none !important;
  border-top: 0;
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background-image: var(--hn-pearls);
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 120px 12px;
  opacity: 0.6;
}
.footer-block__heading,
.footer-block__heading.rte {
  font-family: var(--hn-font-display) !important;
  color: var(--hn-gold) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 1.35rem;
}
.footer a, .footer .rte, .footer p, .footer li, .footer .caption {
  color: var(--hn-ink-dim);
}
.footer a:hover { color: var(--hn-gold); }
.footer__content-bottom { border-top: 1px solid var(--hn-gold-18); }

/* 底部一排线稿发光生物 + 仪表 */
.hn-abyss {
  position: relative;
  height: 110px;
  margin-top: 2.4rem;
  overflow: hidden;
}
.hn-abyss__creatures {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  color: var(--hn-lilac);
  opacity: 0.55;
}
.hn-abyss__creatures svg { height: 74px; width: auto; }
.hn-abyss__creatures > * { animation: hn-abyss-float 9s ease-in-out infinite; }
.hn-abyss__creatures > *:nth-child(2) { animation-duration: 11s; animation-delay: -2s; }
.hn-abyss__creatures > *:nth-child(3) { animation-duration: 13s; animation-delay: -4s; }
.hn-abyss__creatures > *:nth-child(4) { animation-duration: 10s; animation-delay: -6s; }
@keyframes hn-abyss-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-1.6deg); }
}
.hn-dial { color: var(--hn-gold); }
.hn-dial__needle {
  transform-origin: 50px 50px;
  animation: hn-needle 5.5s ease-in-out infinite;
}
@keyframes hn-needle {
  0%, 100% { transform: rotate(-26deg); }
  50%      { transform: rotate(24deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hn-abyss__creatures > *, .hn-dial__needle { animation: none; }
}

/* ==========================================================================
   15. 排版五 — 之字形 Z 字穿插
   ========================================================================== */

.hn-zig { background: var(--hn-bg); }
.hn-zig__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.4rem, 5vw, 7rem);
  padding: clamp(3.2rem, 5vw, 6rem) 0;
  border-top: 1px solid var(--hn-gold-18);
  position: relative;
}
.hn-zig__row:first-child { border-top: 0; }
.hn-zig__row--flip .hn-zig__media { order: 2; }
.hn-zig__media { position: relative; }
.hn-zig__media img {
  width: 100%;
  height: auto;          /* 不裁方，保留原比例 */
  display: block;
  border: 1px solid var(--hn-gold-18);
}
.hn-zig__index {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--hn-font-num);
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  color: var(--hn-gold);
  opacity: 0.75;
  padding: 0.2rem 0.8rem;
  border-right: 1px solid var(--hn-gold-40);
  border-bottom: 1px solid var(--hn-gold-40);
  background: rgba(255, 255, 255, 0.6);
}
.hn-zig__row--flip .hn-zig__index { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--hn-gold-40); }
.hn-zig__body {
  position: relative;
  padding: clamp(2rem, 3vw, 3.4rem);
  border-left: 2px solid var(--hn-zig-accent, var(--hn-gold));
  background: linear-gradient(90deg, var(--hn-zig-wash, rgba(46, 110, 153, 0.07)), transparent 78%);
}
.hn-zig__row--flip .hn-zig__body {
  border-left: 0;
  border-right: 2px solid var(--hn-zig-accent, var(--hn-gold));
  background: linear-gradient(270deg, var(--hn-zig-wash, rgba(46, 110, 153, 0.07)), transparent 78%);
  text-align: right;
}
.hn-zig__name {
  font-family: var(--hn-font-display);
  color: var(--hn-gold);
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  line-height: 1.2;
}
.hn-zig__desc { color: var(--hn-ink-dim); font-size: 1.5rem; line-height: 1.8; margin-bottom: 1.6rem; }
.hn-zig__price {
  font-family: var(--hn-font-num);
  color: var(--hn-gold);
  font-size: clamp(2.6rem, 3vw, 3.6rem);
  line-height: 1;
  margin-bottom: 1.6rem;
}
.hn-zig__row--flip .hn-zig__actions { justify-content: flex-end; }
.hn-zig__actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
@media screen and (max-width: 749px) {
  .hn-zig__row { grid-template-columns: 1fr; }
  .hn-zig__row--flip .hn-zig__media { order: 0; }
  .hn-zig__row--flip .hn-zig__body { text-align: left; border-right: 0; border-left: 2px solid var(--hn-zig-accent, var(--hn-gold));
    background: linear-gradient(90deg, var(--hn-zig-wash, rgba(46, 110, 153, 0.07)), transparent 78%); }
}

/* ==========================================================================
   16. 排版八 — 明信片拼贴
   ========================================================================== */

.hn-postcards {
  background: var(--hn-bg-2);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(74, 144, 184, 0.14), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(46, 110, 153, 0.08), transparent 42%);
}
.hn-postcards__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 3vw, 3.6rem);
  padding: 2rem 0 1rem;
}
.hn-postcard {
  position: relative;
  background: #FFFDF8;
  padding: 12px 12px 8px;
  box-shadow: 0 18px 40px rgba(22, 50, 74, 0.5);
  transform: rotate(var(--hn-tilt, -1.4deg));
  transition: transform 0.5s var(--hn-ease), box-shadow 0.5s var(--hn-ease);
}
.hn-postcard:nth-child(even) { --hn-tilt: 1.6deg; }
.hn-postcard:nth-child(3n) { --hn-tilt: -2.2deg; }
.hn-postcard:hover {
  transform: rotate(0deg) translateY(-8px);
  box-shadow: 0 28px 60px rgba(22, 50, 74, 0.6);
  z-index: 4;
}
.hn-postcard__media { position: relative; overflow: hidden; }
.hn-postcard__media img { width: 100%; height: auto; display: block; }
/* 图片上缘锯齿（邮票） */
.hn-postcard__media::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 8px;
  background-image: radial-gradient(circle at 5px 0, transparent 4.6px, #FFFDF8 4.7px);
  background-size: 10px 8px;
  background-repeat: repeat-x;
  z-index: 2;
}
/* 手绘邮戳 */
.hn-postcard__stamp {
  position: absolute;
  top: 22px;
  right: 16px;
  width: 62px;
  height: 62px;
  color: var(--hn-gold);
  opacity: 0.85;
  transform: rotate(-14deg);
  z-index: 3;
  pointer-events: none;
}
.hn-postcard__note {
  font-family: var(--hn-font-hand);
  font-size: 1.9rem;
  line-height: 1.3;
  color: #2E6E99;
  padding: 1.2rem 0.4rem 0.4rem;
  min-height: 5.4rem;
}
.hn-postcard__sticker {
  position: absolute;
  bottom: 62px;
  left: -12px;
  width: 40px;
  height: 40px;
  color: var(--hn-lilac);
  opacity: 0.9;
  transform: rotate(-12deg);
  z-index: 3;
  pointer-events: none;
}
.hn-postcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid rgba(46, 110, 153, 0.5);
  padding-top: 1rem;
  margin-top: 0.6rem;
}
.hn-postcard__price {
  font-family: var(--hn-font-num);
  font-size: 2.4rem;
  color: #2E6E99;
  line-height: 1;
  white-space: nowrap;
}
.hn-postcard__add {
  font-family: var(--hn-font-body);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--hn-gold);
  color: var(--hn-bg);
  border: 0;
  padding: 0.7rem 1.3rem;
  cursor: pointer;
  white-space: nowrap;
}
.hn-postcard__add:hover { background: #4A90B8; }
@media screen and (max-width: 989px) { .hn-postcards__grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 549px) { .hn-postcards__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   17. 自研板块的公共外壳
   ========================================================================== */

.hn-section { padding: clamp(3.6rem, 6vw, 7rem) 0; }
.hn-section__title {
  font-family: var(--hn-font-display);
  color: var(--hn-gold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  font-size: clamp(2.4rem, 3.4vw, 3.8rem);
  margin: 0 0 0.8rem;
  text-shadow: 0 0 30px rgba(46, 110, 153, 0.22);
}
.hn-section__sub {
  text-align: center;
  color: var(--hn-ink-dim);
  font-size: 1.45rem;
  margin: 0 0 0.4rem;
}

/* ==========================================================================
   18. 主题自带 ambient-particles 改色（原为青蓝）
   ========================================================================== */

.ambient-particles__item {
  border-color: rgba(74, 144, 184, 0.42) !important;
  background: rgba(74, 144, 184, 0.14) !important;
  box-shadow: 0 0 14px rgba(74, 144, 184, 0.30) !important;
}
.ambient-particles__item:nth-child(3n) {
  border-color: rgba(46, 110, 153, 0.38) !important;
  background: rgba(46, 110, 153, 0.12) !important;
  box-shadow: 0 0 14px rgba(46, 110, 153, 0.26) !important;
}
.ambient-particles__item:nth-child(4n) {
  border-color: rgba(143, 193, 220, 0.36) !important;
  background: rgba(143, 193, 220, 0.12) !important;
  box-shadow: 0 0 14px rgba(143, 193, 220, 0.24) !important;
}

/* ==========================================================================
   19. 杂项
   ========================================================================== */

::selection { background: var(--hn-gold); color: var(--hn-bg); }
.hn-gold-text { color: var(--hn-gold); }
.hn-lilac-text { color: var(--hn-lilac); }
.hn-rose-text { color: var(--hn-rose); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--hn-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--hn-gold-40); }
::-webkit-scrollbar-thumb:hover { background: var(--hn-gold); }


/* ===== 以下为暗紫版之后新增、当前仍在用的部分（已换回暗紫配色）===== */

   13c. 「本周靠港」数据带（非产品段，给整页一个喘气和性格）
   ========================================================================== */

.hn-landing {
  background: var(--hn-bg-2);
  background-image:
    radial-gradient(circle at 88% 12%, rgba(74, 144, 184, 0.16), transparent 44%),
    radial-gradient(circle at 8% 88%, rgba(46, 110, 153, 0.08), transparent 42%),
    /* 极淡的等深线，让底色不是一块死紫 */
    repeating-radial-gradient(circle at 20% 120%, transparent 0 46px, rgba(74, 144, 184, 0.045) 46px 47px);
  border-top: 1px solid var(--hn-gold-18);
  border-bottom: 1px solid var(--hn-gold-18);
  padding: clamp(2.2rem, 3.2vw, 3.6rem) 0;
}
.hn-landing__grid {
  display: grid;
  grid-template-columns: minmax(150px, 210px) 1fr;
  gap: clamp(2rem, 3.4vw, 4rem);
  align-items: center;
}
.hn-landing__dial { color: var(--hn-lilac); }
.hn-landing__dial svg { width: 100%; height: auto; display: block; }
.hn-landing__needle { animation: hn-needle 6.5s ease-in-out infinite; }
@keyframes hn-needle {
  0%, 100% { transform: rotate(-28deg); }
  50%      { transform: rotate(26deg); }
}
.hn-landing__eyebrow {
  font-family: var(--hn-font-body);
  font-size: 1.25rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hn-lilac);
  margin: 0 0 0.8rem;
}
.hn-landing__title {
  font-family: var(--hn-font-display);
  color: var(--hn-gold);
  font-size: clamp(1.8rem, 2.2vw, 2.5rem);
  line-height: 1.24;
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
  text-transform: none;
}
.hn-landing__rule { width: 100%; opacity: 0.85; }
.hn-landing__text { color: var(--hn-ink-dim); font-size: 1.33rem; line-height: 1.65; max-width: 62ch; }
.hn-landing__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hn-gold-18);
}
.hn-landing__stat { text-align: left; }
.hn-landing__num {
  display: block;
  font-family: var(--hn-font-num);
  color: var(--hn-gold);
  font-size: clamp(2.3rem, 2.8vw, 3.2rem);
  line-height: 1;
}
.hn-landing__label {
  display: block;
  margin-top: 0.5rem;
  color: var(--hn-ink-faint);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hn-landing__note {
  font-family: var(--hn-font-hand);
  color: var(--hn-rose);
  font-size: 1.75rem;
  margin: 1.2rem 0 0;
  transform: rotate(-1.2deg);
  opacity: 0.92;
}
@media screen and (max-width: 989px) {
  .hn-landing__grid { grid-template-columns: 1fr; }
  .hn-landing__dial { max-width: 150px; margin: 0 auto; }
  .hn-landing__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hn-landing__needle { animation: none; }
}

/* ==========================================================================
.hn-vitrine-section {
  background: linear-gradient(180deg, rgba(245, 234, 227, 0.80), rgba(251, 247, 243, 0) 78%);
}
/* 装饰带自己就是分隔，别再在它头上压一条金线 */
#MainContent > .shopify-section:has(.hn-decor)::before { display: none; }

   20. 贝壳圆角：用贝壳线稿顶掉板块 / 卡片的一个直角
   ========================================================================== */

.hn-hatches-section,
.hn-landing,
.hn-postcards,
.hn-vitrine-section,
.hn-zig { position: relative; }

.hn-hatches-section::before,
.hn-landing::before,
.hn-postcards::before,
.hn-vitrine-section::before,
.hn-zig::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  width: 46px;
  height: 46px;
  background-image: var(--hn-shell);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.92;
  z-index: 2;
}

/* 展柜卡右下角也来一个，换边避免整页太齐 */
.hn-vitrine__card::after { display: none; }
.hn-vitrine__card { position: relative; }
.hn-vitrine__shell {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 40px;
  height: 40px;
  background-image: var(--hn-shell);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: rotate(180deg);
  pointer-events: none;
  opacity: 0.9;
}
@media screen and (max-width: 749px) {
  .hn-hatches-section::before,
  .hn-landing::before,
  .hn-postcards::before,
  .hn-vitrine-section::before,
  .hn-zig::before { width: 34px; height: 34px; top: 8px; left: 8px; }
}


/* ---- 珠宝展柜的橱窗（还原时整段丢失，补回）---- */
.hn-vitrine__window {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 0 1.6rem;
  border: 1px solid var(--hn-gold-18);
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hn-vitrine__window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--hn-ease);
}
.hn-vitrine__card:hover .hn-vitrine__window img { transform: scale(1.06); }
.hn-vitrine__window-empty { color: var(--hn-lilac); opacity: 0.45; }
.hn-vitrine__window-empty svg { width: 56px; height: auto; display: block; }


/* ===== 以下是中后期修掉、但不在 remote2 快照里的 bug 修复，还原时补回 ===== */

/* 三处 image-with-text 都没配图，主题会在文字列里塞一个 794×794 占位 svg */
.image-with-text__content .product-info__image-block,
.image-with-text__media--placeholder,
.image-with-text__grid:has(.image-with-text__media--placeholder) .image-with-text__media-item {
  display: none !important;
}
.image-with-text__grid:has(.image-with-text__media--placeholder) { grid-template-columns: 1fr !important; }

/* 首屏：右侧留给实拍图里的海鲜主体（原来这里是留给水母线稿的） */
[id*='image_with_text_BY6VR9'] .image-with-text__text-item { padding-right: min(36vw, 440px); }
@media screen and (max-width: 989px) {
  [id*='image_with_text_BY6VR9'] .image-with-text__text-item { padding-right: 0; }
}
/* 首屏背景 = 实拍图。
   ⚠ background-position 必须是 right center：这张图的海鲜主体在右侧、左侧是大片干净浅蓝，
     文字列正好压在左边那片浅色上。改成 center 会把主体裁掉一半。 */
[id*='image_with_text_BY6VR9'] .image-with-text {
  position: relative;
  background-image: url("hero-hamish.jpg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  min-height: clamp(360px, 42vw, 620px);
}
/* 窄屏：文字改占满整宽，会压在海鲜主体上 → 加一道由上而下的浅色渐变把它托住。
   桌面端不需要（文字在左、主体在右，天然分离），所以只在窄屏生效。 */
@media screen and (max-width: 749px) {
  [id*='image_with_text_BY6VR9'] .image-with-text {
    background-image:
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.90) 48%,
        rgba(255, 255, 255, 0.30) 76%,
        rgba(255, 255, 255, 0) 100%),
      url("hero-hamish.jpg");
    background-size: 100% 100%, cover;
    background-position: center top, right center;
    background-repeat: no-repeat, no-repeat;
  }
}
/* 文字列自带一块浅色面板，会在暗底上切出方块边 */
.image-with-text__content { background: transparent !important; }
[data-template] .image-with-text .global-media-settings { background: transparent !important; }

/* ==========================================================================
   12. 快手做法卡（hamish-cook）· 冷链五步（hamish-unbox）
   ========================================================================== */

/* ---- 做法卡 ---- */
.hn-cook-head,
.hn-unbox-head { text-align: center; margin-bottom: clamp(2.4rem, 3vw, 3.6rem); }
.hn-cook-head__title,
.hn-unbox-head__title {
  font-family: var(--hn-font-display);
  color: var(--hn-ink);
  font-size: clamp(2.4rem, 3.2vw, 3.6rem);
  letter-spacing: 0.06em;
  margin: 0 0 0.9rem;
}
.hn-cook-head__sub,
.hn-unbox-head__sub {
  color: #33475A;
  font-size: 1.45rem;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 auto;
}

.hn-cook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 2.4vw, 2.8rem);
}
.hn-dish {
  position: relative;                 /* 卡片的 ::after 撑满链接以它为定位基准 */
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid rgba(46, 110, 153, 0.22);
  overflow: hidden;
  transition: transform 0.45s var(--hn-ease), box-shadow 0.45s var(--hn-ease);
}
.hn-dish:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(22, 50, 74, 0.13); }
.hn-dish__photo { overflow: hidden; aspect-ratio: 16 / 11; }
.hn-dish__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--hn-ease);
}
.hn-dish:hover .hn-dish__photo img { transform: scale(1.05); }

.hn-dish__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.8rem 1.8rem 2.2rem;
  text-align: left;
}
.hn-dish__time {
  align-self: flex-start;
  font-family: var(--hn-font-num);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2E6E99;
  border: 1px solid rgba(46, 110, 153, 0.35);
  border-radius: 999px;
  padding: 0.15rem 1rem;
  margin-bottom: 1rem;
}
.hn-dish__name {
  font-family: var(--hn-font-display);
  color: #16324A;
  font-size: 1.95rem;
  line-height: 1.25;
  margin: 0 0 0.7rem;
}
.hn-dish__how {
  color: #33475A;
  font-size: 1.4rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}
.hn-dish__cta {
  margin-top: auto;
  align-self: flex-start;
  color: #2E6E99;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 110, 153, 0.45);
  padding-bottom: 0.2rem;
  z-index: 2;                         /* 撑满卡片的 ::after 在下，文字可选 */
}
/* ⚠ 撑满整张卡：::after 的定位基准是最近的「已定位」祖先 = .hn-dish。
   所以 .hn-dish__cta 千万不能写 position:relative，否则 ::after 只会盖住按钮本身。 */
.hn-dish__cta::after { content: ''; position: absolute; inset: 0; }
.hn-dish:hover .hn-dish__cta { color: #16324A; }

/* ---- 冷链五步 ---- */
.hn-unbox {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.2rem, 2vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hn-unbox__step {
  position: relative;
  text-align: center;
  padding-top: 0.4rem;
}
.hn-unbox__num {
  display: block;
  font-family: var(--hn-font-num);
  font-size: 3.2rem;
  line-height: 1;
  color: #2E6E99;
  margin-bottom: 0.7rem;
}
.hn-unbox__name {
  font-family: var(--hn-font-display);
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #16324A;
  margin: 0 0 0.5rem;
}
.hn-unbox__text {
  color: #33475A;
  font-size: 1.3rem;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 26ch;
}
/* 步骤之间的连线（画在数字那一行的水平位置上） */
.hn-unbox__step + .hn-unbox__step::before {
  content: '';
  position: absolute;
  top: 2rem;
  right: calc(50% + 2.6rem);
  width: calc(100% - 5.2rem);
  height: 1px;
  background: rgba(46, 110, 153, 0.28);
}
.hn-unbox__foot {
  text-align: center;
  color: #33475A;
  font-size: 1.4rem;
  margin: clamp(2rem, 2.6vw, 3rem) auto 0;
}

@media screen and (max-width: 989px) {
  .hn-cook-grid { grid-template-columns: repeat(2, 1fr); }
  .hn-unbox { grid-template-columns: repeat(3, 1fr); row-gap: 2.6rem; }
  .hn-unbox__step + .hn-unbox__step::before { display: none; }
}
@media screen and (max-width: 749px) {
  .hn-cook-grid { grid-template-columns: 1fr; }
  .hn-unbox { grid-template-columns: 1fr; }
  .hn-unbox__text { max-width: 34ch; }
}