/* ONLY SMELL 执己 · 官网样式
   配色取自品牌设计稿：暖砂底 + 珊瑚粉主色 + 可可褐文字 */

:root{
  --bg:#F7EDE8;
  --bg-2:#FBF5F1;
  --text:#4A3B32;
  --text-2:#7D6B60;
  --accent:#E8927C;
  --line:rgba(74,59,50,.14);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --cjk:'Songti SC','Source Han Serif SC','Noto Serif SC',STSong,serif;
  --sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',
         'Helvetica Neue',Arial,sans-serif;
  --nav-h:72px;
  --pad:clamp(20px,6vw,72px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* 导航是 fixed 的，锚点跳转要留出它的高度，否则标题被压在下面 */
[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ───────────── 顶部导航 ───────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);
  background:rgba(247,237,232,.82);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:9px}
.brand-en{
  font-family:var(--serif);
  font-size:20px;letter-spacing:.22em;font-weight:500;
}
.brand-zh{font-family:var(--cjk);font-size:13px;letter-spacing:.3em;color:var(--text-2)}
.nav-links{display:flex;gap:clamp(16px,3vw,34px);align-items:center}
.link{
  font-size:13.5px;letter-spacing:.08em;color:var(--text-2);
  padding:4px 0;border-bottom:1px solid transparent;transition:.2s;
}
.link:hover{color:var(--text)}
.link.is-on{color:var(--text);border-bottom-color:var(--accent)}
.link.is-soon{position:relative;cursor:default;opacity:.55}
.link.is-soon:hover{color:var(--text-2)}
.link.is-soon::after{
  content:'敬请期待';
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  padding:5px 12px;border-radius:999px;white-space:nowrap;
  background:var(--text);color:#fff;font-size:11.5px;letter-spacing:.14em;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.link.is-soon:hover::after,.link.is-soon:focus::after{opacity:1}
.nav-tools{display:flex;gap:18px;align-items:center;color:var(--text-2)}
.i-search,.i-bag,.i-user{width:18px;height:18px;opacity:.7}

/* ───────────── 首屏 ───────────── */
.hero{
  position:relative;
  min-height:min(100svh,860px);
  padding:calc(var(--nav-h) + 40px) var(--pad) 56px;
  display:flex;align-items:center;
  overflow:hidden;
}
/* 产品图放右侧，左边用同色渐变化开 —— 图本身就是右重左空的构图 */
.hero-photo{
  position:absolute;inset:0 0 0 34%;
  background:url('/assets/hero-scene.jpg') center right/cover no-repeat;
}
.hero-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,
    var(--bg) 0%,
    var(--bg) 14%,
    rgba(247,237,232,.62) 32%,
    rgba(247,237,232,0) 54%);
}
.hero-copy{position:relative;z-index:2;max-width:520px}

.seal{width:98px;height:98px;margin-bottom:22px;color:var(--text-2)}
.seal-edge{fill:none;stroke:currentColor;stroke-opacity:.28}
.seal-text{
  font-family:var(--serif);font-size:9.4px;letter-spacing:.24em;
  fill:currentColor;fill-opacity:.75;
}
.seal-mark{
  font-family:var(--serif);font-size:26px;letter-spacing:.06em;
  fill:var(--accent);
}

.hero-title{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px,7.4vw,92px);
  line-height:1.02;letter-spacing:.1em;
}
.hero-zh{
  display:flex;align-items:center;gap:16px;
  margin:14px 0 26px;
  font-family:var(--cjk);
  font-size:clamp(19px,2.1vw,25px);
  letter-spacing:.52em;color:var(--text-2);
}
.rule{flex:1;max-width:74px;height:1px;background:var(--line)}

.hero-lead{
  margin:0 0 6px;
  font-family:var(--cjk);
  font-size:clamp(17px,1.9vw,21px);
  letter-spacing:.16em;
}
.hero-en{
  margin:0 0 34px;
  font-family:var(--serif);
  font-size:clamp(15px,1.6vw,18px);
  letter-spacing:.09em;color:var(--text-2);font-style:italic;
}

.cta{
  display:inline-block;
  padding:14px 40px;
  background:var(--accent);color:#fff;
  font-size:14px;letter-spacing:.22em;text-indent:.22em;
  border-radius:999px;
  box-shadow:0 10px 26px -12px rgba(232,146,124,.9);
  transition:transform .2s,box-shadow .2s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(232,146,124,.95)}

.values{
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,44px);
  list-style:none;margin:44px 0 0;padding:0;
}
.values li{display:flex;flex-direction:column;gap:2px}
.v-dot{
  width:26px;height:26px;margin-bottom:8px;border-radius:50%;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 42%,var(--accent) 0 4px,transparent 5px);
}
.values b{font-family:var(--cjk);font-size:14.5px;font-weight:500;letter-spacing:.14em}
.values i{
  font-family:var(--serif);font-style:normal;
  font-size:11.5px;letter-spacing:.2em;color:var(--text-2);text-transform:uppercase;
}

/* ───────────── 金句横条 ───────────── */
.quote{
  background:var(--bg-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:34px var(--pad);text-align:center;
}
.q-zh{
  margin:0 0 6px;font-family:var(--cjk);
  font-size:clamp(15px,1.8vw,19px);letter-spacing:.2em;
}
.q-en{
  margin:0;font-family:var(--serif);font-style:italic;
  font-size:13.5px;letter-spacing:.08em;color:var(--text-2);
}

/* ───────────── 通用区块 ───────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.story{padding:clamp(56px,7vw,88px) 0}
.collection{padding:clamp(56px,7.5vw,96px) 0}
.story{text-align:center}
.sub-head{
  margin:0 0 14px;
  font-family:var(--serif);font-size:12.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
}
.page-title{
  margin:0 0 20px;
  font-family:var(--cjk);font-weight:500;
  font-size:clamp(24px,3.4vw,36px);letter-spacing:.14em;
}
.page-title::after{
  content:'';
  display:block;
  width:28px;
  height:2px;
  margin:16px auto 0;
  background:var(--accent);
}
.wrap--doc .page-title::after{margin-left:0}
.body-text{
  max-width:640px;margin:0 auto;
  font-size:15px;line-height:2;color:var(--text-2);letter-spacing:.05em;
}

.s-grid{
  margin-top:52px;
  display:grid;gap:clamp(24px,4vw,52px);
  grid-template-columns:repeat(3,1fr);
  text-align:left;
}
.s-en{
  margin:0 0 6px;font-family:var(--serif);
  font-size:11.5px;letter-spacing:.3em;color:var(--accent);
}
.s-cn{
  margin:0 0 10px;font-family:var(--cjk);font-weight:500;
  font-size:19px;letter-spacing:.18em;
}
.s-text{margin:0;font-size:13.8px;line-height:2;color:var(--text-2);letter-spacing:.04em}
.s-col{padding-top:18px;border-top:1px solid var(--line)}

/* ───────────── 香水系列 ───────────── */
.collection{background:var(--bg-2)}
.collection .sub-head,.collection .page-title{text-align:center}

/* ───────────── 子页面（联系 / 举报）───────────── */

/* 顶栏是 position:fixed，子页面必须自己让出 --nav-h，否则第一屏被压在下面。
   首页和香水系列不用这个类 —— 它们靠各自 <section> 的内边距让位，
   在 .sub-head 上加全局 margin 会把那两页一起顶开。 */
.wrap--doc{padding-top:calc(var(--nav-h) + 56px);padding-bottom:96px}

/* 每个板块：左小标题，右内容。分隔线代替大段留白 */
.row{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:10px clamp(28px,4vw,64px);
  padding:34px 0;border-top:1px solid var(--line);
}
.row:first-of-type{border-top:none;padding-top:8px}
.row h2{
  margin:0;font-family:var(--serif);font-size:13px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);line-height:2;
}
.col{min-width:0}

/* 定义列表：标签一列，值一列。
   ⚠️ 这条原来是 `padding:calc(var(--nav-h) + 60px) 0 90px` —— 那是给页面区块
      写的，但全站六处 class="info" 全都用在 <dl> 上，于是每个定义列表都被灌进
      132px 顶内边距：联系页内容只有 289px 高，被撑到 511px，中间全是空白。
   ⚠️ `dd{margin:0}` 不能省 —— 浏览器默认给 dd 加 40px 缩进，值会莫名往右错开。 */
.info{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:12px 28px;margin:0;font-size:15px;line-height:1.7;
}
.info dt{color:var(--text-2);white-space:nowrap}
.info dd{margin:0;color:var(--text)}

.steps{margin:22px 0 0;padding-left:1.2em;color:var(--text-2);line-height:2.1}
.steps li{margin-bottom:6px}
.note{
  margin-top:26px;padding:16px 18px;
  background:var(--bg-2);border-left:2px solid var(--accent);
  font-size:13.5px;color:var(--text-2);
}

/* ───────────── 页脚 ───────────── */
footer{
  background:var(--text);color:rgba(255,255,255,.72);
  padding:52px var(--pad) 40px;
  text-align:center;font-size:12.5px;letter-spacing:.05em;
}
.foot-brand{margin-bottom:22px;color:#fff;opacity:.92}
.foot-brand .brand-zh{color:rgba(255,255,255,.6)}
.foot-line{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 22px;margin-bottom:16px;
}
.foot-line a{
  color:rgba(255,255,255,.72);
  display:inline-flex;align-items:center;transition:color .2s;
}
.foot-line a:hover{color:#fff}
.foot-copy{color:rgba(255,255,255,.5)}

/* ───────────── 响应式 ───────────── */
@media (max-width:820px){
  .s-grid{grid-template-columns:1fr;gap:26px}
  .hero{
    min-height:0;
    padding:calc(var(--nav-h) + 26px) var(--pad) 0;
    flex-direction:column;align-items:stretch;
  }
  /* 窄屏左右分栏挤不下：文字在上，产品图退到下方整块 */
  .hero-photo{
    position:relative;inset:auto;
    order:2;
    margin:34px calc(var(--pad) * -1) 0;
    height:52vw;min-height:220px;
    background-image:url('/assets/hero-scene-m.jpg');
    background-position:center right;
  }
  .hero-photo::after{
    background:linear-gradient(180deg,var(--bg) 0%,rgba(247,237,232,0) 26%);
  }
  .hero-copy{max-width:none;order:1}
  .seal{display:none}
  .values{gap:22px 30px;margin-top:34px}
  .nav-links{gap:14px}
  .nav-links .link:nth-child(4){display:none}
  .brand-zh{display:none}
}
/* 子页面窄屏：150px 的标签列在手机上会把值挤成两三行，改为上下堆叠 */
@media (max-width:640px){
  .row{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .row:first-of-type{padding-top:4px}
  .info{grid-template-columns:1fr;gap:4px 0}
  .info dt{font-size:13px;letter-spacing:.04em}
  .info dd{margin-bottom:10px}
  .wrap--doc{padding-top:calc(var(--nav-h) + 32px);padding-bottom:64px}
}

@media (max-width:560px){
  .foot-line{gap:8px 14px}
}

/* ───────────── 首页：查看全部 ───────────── */
.more{margin:44px 0 0;text-align:center}
.more a{
  font-size:13.5px;letter-spacing:.16em;color:var(--text-2);
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:.2s;
}
.more a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ───────────── 香水系列页 ───────────── */
.c-hero{
  position:relative;
  height:min(78vh,700px);min-height:460px;
  padding-top:var(--nav-h);
  display:flex;justify-content:center;
  overflow:hidden;
}
.c-hero-bg{
  position:absolute;inset:0;
  background:url('/assets/collection-hero.jpg') center 70%/cover no-repeat;
}
/* 文字压在画面上三分之一，瓶子在下方 —— 上下都收一层底色，字才立得住 */
.c-hero-veil{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,
    var(--bg) 0%, var(--bg) 24%,
    rgba(247,237,232,.8) 35%,
    rgba(247,237,232,.2) 47%,
    rgba(247,237,232,0) 60%,
    rgba(247,237,232,.4) 86%,
    rgba(247,237,232,.72) 100%);
}
.c-hero-copy{position:relative;z-index:2;text-align:center;padding:34px var(--pad) 0}
.c-eyebrow{
  margin:0 0 12px;font-family:var(--serif);
  font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-2);
}
.c-title{
  margin:0 0 6px;font-family:var(--serif);font-weight:500;
  font-size:clamp(34px,5.4vw,58px);letter-spacing:.08em;line-height:1;
}
.c-title-cn{
  margin:0 0 16px;font-family:var(--cjk);
  font-size:clamp(18px,2.4vw,25px);letter-spacing:.24em;
}
.c-tag-en{
  margin:0 0 4px;font-family:var(--serif);font-style:italic;
  font-size:15px;letter-spacing:.04em;color:var(--text-2);
}
.c-tag-cn{margin:0;font-size:13px;letter-spacing:.1em;color:var(--text-2)}

.c-list{padding:clamp(56px,7.5vw,88px) 0 clamp(70px,9vw,110px)}
.c-head{text-align:center;margin-bottom:52px}

@media (max-width:560px){
  .c-hero{height:auto;min-height:0;padding-bottom:0}
  .c-hero-bg{
    position:relative;inset:auto;order:2;height:56vw;min-height:200px;
    background-image:url('/assets/collection-hero-m.jpg');background-position:center 78%;
  }
  .c-hero-veil{display:none}
  .c-hero{flex-direction:column}
  .c-hero-copy{order:1;padding-bottom:14px}
}

/* 窄屏顶栏：品牌名 + 三个链接必须挤在一行，否则 72px 的导航会被撑破 */
@media (max-width:600px){
  .nav{padding:0 18px}
  .brand-en{font-size:16px;letter-spacing:.14em;white-space:nowrap}
  .nav-links{gap:16px}
  .link{font-size:12.5px;letter-spacing:.02em;white-space:nowrap}
}
@media (max-width:360px){
  .nav-links{gap:12px}
  .link{font-size:11.5px}
}

/* ───────────── 香水卡（首页四宫格 / 系列页共用）─────────────
   瓶型、比例、配色照搬设计稿。每款自己的一套色由页面内联的
   .card-<key> 变量提供，这里只写一遍规则。 */
.products-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,20px);
}
.product-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid rgba(212,197,188,.3);
  border-radius:20px;overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease;
}
.product-card:hover{transform:translateY(-8px);box-shadow:0 20px 48px rgba(74,59,50,.1)}

.card-visual{
  width:100%;aspect-ratio:3/5;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--g1) 0%,var(--g2) 100%);
}
.bottle-wrap{width:52%;display:flex;align-items:center;justify-content:center}
.bottle-wrap svg{width:100%;height:auto;filter:drop-shadow(0 8px 20px rgba(74,59,50,.12))}
.b-en{font-family:var(--serif);font-size:11px;font-weight:600;letter-spacing:1.6px}
.b-tiny{font-family:var(--sans);font-size:5.4px;letter-spacing:1.1px;opacity:.62}
.b-cn{font-family:var(--cjk);font-size:8px;font-weight:500;letter-spacing:1.4px}

.card-info{padding:22px 20px 24px;display:flex;flex-direction:column;flex:1}
.card-en{
  margin:0 0 5px;font-family:var(--serif);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-2);
}
.card-name{
  margin:0 0 10px;font-family:var(--cjk);font-weight:600;
  font-size:20px;letter-spacing:.06em;
}
.card-desc{margin:0 0 18px;font-size:13px;line-height:1.7;letter-spacing:.03em;color:var(--text-2);flex:1}
.card-note{margin:0;font-size:12.5px;letter-spacing:.06em;color:var(--text-2)}
.card-info.is-compact{padding:18px 18px 20px}
.card-divider{width:100%;height:1px;background:rgba(212,197,188,.4);margin-bottom:16px}
.card-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:11px 16px;border-radius:40px;
  font-size:13px;letter-spacing:.1em;
  border:1.5px solid var(--edge);color:var(--cta);background:var(--wash);
  transition:background .25s,color .25s;
}
/* 详情页还没有，按钮保留形制但不可点 */
.is-soon-pill{cursor:default}
.product-card:hover .is-soon-pill{background:var(--edge);color:var(--on)}

@media (max-width:1000px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-info{padding:16px 14px 18px}
  .card-name{font-size:17px}
  .card-desc{font-size:12px;margin-bottom:14px}
  .card-cta{font-size:12px;padding:9px 12px}
}

/* ───────────── 系列页副标题 ───────────── */
.c-sub{margin:10px 0 0;font-size:15px;letter-spacing:.06em;color:var(--text-2)}