/* =========================
   Global tokens & resets
========================= */
:root{
  /* Colors */
  --bg:#F8F5F2;            /* 柔米白 */
  --bg-2:#FFFFFF;          /* 純白 */
  --text:#d36073;          /* 主字色（品牌粉） */
  --ink:#333132;           /* 內文深灰 */
  --muted:#7A6F6A;         /* 可可灰 */
  --accent:#b57696a8;      /* 玫瑰棕（半透明） */
  --accent-2:#D7C6BA;      /* 淡玫灰 */
  --line:#E9E2DC;          /* 細線柔灰（原 #472405 會太深） */
  --success:#2E7D32;
  --error:#B00020;

  /* Effects */
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --shadow2:0 14px 36px rgba(0,0,0,.12);

  /* Radii */
  --radius:18px;
  --radius-lg:24px;

  /* Gallery cards */
  --card:220px;
  --gap:14px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Noto Sans TC', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans CJK TC", sans-serif;
  line-height:1.6;
  background-image: url('https://www.etonwedding.com/img/photo/mammy/style-beauty/pregnant%20(16).jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* 背景圖＋柔霧 */
  /* background: url('https://www.etonwedding.com/img/photo/mammy/style-beauty/pregnant%20(16).jpg') center/cover no-repeat fixed; */
}
/* 柔和覆蓋層：米白基底 + 玫瑰棕/香檳金淡淡暈染 */
body::before{
  content:"";
  position: fixed; inset: 0; z-index:-1;
  background:
    /* 上方一點玫瑰棕暖調 */
    radial-gradient(100% 60% at 50% 0%, rgba(126, 6, 29, .08), transparent 60%),
    /* 下方微微香檳金 */
    radial-gradient(100% 60% at 50% 100%, rgba(215, 191, 166, .10), transparent 60%),
    /* 米白霧面鋪底（比原本白色更溫暖） */
    rgba(247, 243, 239, .88);
}

/* iOS/Safari 對 fixed 不是很友善，行動裝置改用 scroll 更順暢 */
@media (max-width: 1024px){
  body{ background-attachment: scroll; }
}

h1,h2,h3,h4{
  font-family:'Noto Serif TC', serif; line-height:1.3; margin:0 0 .5rem;
}
h1{ font-size:clamp(28px,4.5vw,56px) }
h2{ font-size:clamp(22px,3vw,36px) }
h3{ font-size:clamp(18px,2.2vw,24px) }
p{ margin:.5rem 0 1rem }
a{ color:inherit; text-decoration:none }
.container{ width:min(1120px,92%); margin-inline:auto }
.brand { display:inline-flex; align-items:center; line-height:1; }
.brand img { height:70px; width:auto; display:block; }
/* =========================
   Buttons & Chips
========================= */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.2rem; border-radius:999px; font-weight:600; letter-spacing:.02em;
  cursor:pointer; transition:.25s ease; border:1px solid transparent;
}
.btn-primary{
  background:var(--text); color:#fff; border:none;
  padding:12px 20px; border-radius:999px; font-weight:700; letter-spacing:.6px;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .2s, background .2s;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow2) }
.btn-primary:active{ transform:translateY(0) }

.btn-ghost{
  background:rgba(255,255,255,.55);
  border:1px solid var(--text); color:var(--text);
}
.btn-ghost:hover{ transform:translateY(-1px) }

.tag{
  display:inline-block; font-size:.75rem; padding:.25rem .6rem;
  border-radius:999px; background:#cea0b8d0; color:#f6f6f6; margin-right:.4rem;
}
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px; border:1px solid var(--text);
  font-size:.8rem; color:var(--text);
}

/* =========================
   Header / Nav
========================= */
.skip{ position:absolute; left:-9999px }
.skip:focus{
  left:1rem; top:1rem; background:#fff; padding:.6rem .9rem; border-radius:8px; z-index:9999;
}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:color-mix(in oklab, var(--bg) 70%, white 30%);
  border-bottom:1px solid var(--line); transition:box-shadow .25s ease;
}
header,
.nav,
.nav-actions {
  position: relative;
  z-index: 1001;
}

/* 保險：避免有透明元素蓋住 header（若有的話） */
header .overlay,
.nav .overlay {
  pointer-events: none;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.8rem 0;
}
.brand{ font-family:'Noto Serif TC', serif; font-weight:700; letter-spacing:.06em; }
.nav a{ opacity:.9 } .nav a:hover{ opacity:1 }
.nav-links{ display:flex; gap:1.2rem; align-items:center; color:#B17844; }
.nav-actions{ display:flex; gap:.6rem; align-items:center; }

/* 桌／平／手機 RWD */
@media (min-width:1024px){ .nav-actions{ justify-content:flex-end; gap:.7rem } }
@media (min-width:641px) and (max-width:1023px){
  .nav-actions{ gap:.5rem } .nav-actions .btn{ padding:.5rem .7rem }
}
@media (max-width:640px){
  .nav-actions{ gap:.35rem; justify-content:flex-end; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .nav-actions::-webkit-scrollbar{ display:none }
  .nav-actions .btn{ border-radius:12px; padding:.45rem .6rem; font-size:.92rem }
  .nav-actions .label{ display:none } .nav-actions .icon{ width:22px; height:22px }
  .nav-actions .chip{ padding:.32rem .6rem; font-size:.9rem; text-align:center }
}
@media (max-width:420px){ .nav-actions .chip{ display:none } }

/* 桌機下拉選單 */
.nav-item{ position:relative }
.nav-item .submenu{
  position:absolute; top:100%; left:0; min-width:160px;
  background:#fff; border:1px solid #eee; padding:.6rem 0; border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.08); display:none;
}
.nav-item:hover .submenu{ display:block }
.submenu a{
  display:block; padding:.4rem .9rem; font-size:.95rem; color:#333; white-space:nowrap;
}
.submenu a:hover{ background:#fac5c5bb }

/* 漢堡按鈕（合併為一份） */
.hamburger{
  display:none; position:relative; width:40px; height:40px; z-index:70;
  border-radius:999px; border:1px solid var(--line);
  background:color-mix(in oklab, var(--bg-2) 80%, white 20%);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  justify-content:center; align-items:center; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hamburger:hover{ box-shadow:var(--shadow) }
.hamburger:active{ transform:scale(.98) }
.hamburger span{
  position:absolute; left:50%; width:18px; height:2px; border-radius:2px;
  background:#B58E76; transform:translateX(-50%); transition:.25s cubic-bezier(.2,.7,.2,1);
}
.hamburger span:nth-child(1){ top:14px }
.hamburger span:nth-child(2){ top:19px }
.hamburger span:nth-child(3){ top:24px }
.hamburger.open span:nth-child(1){ top:19px; transform:translateX(-50%) rotate(45deg) }
.hamburger.open span:nth-child(2){ opacity:0 }
.hamburger.open span:nth-child(3){ top:19px; transform:translateX(-50%) rotate(-45deg) }
@media (max-width:880px){ .nav-links{ display:none } .hamburger{ display:flex } }
/* ===== Drawer 疊放層級修正（確保可點到關閉鈕） ===== */
header{ z-index: 1001; }                 /* 保持原設定 */
.overlay{ z-index: 1990 !important; }    /* 背景遮罩在 header 之上 */
.drawer{ z-index: 2000 !important; }     /* 抽屜 > 遮罩 > header */
/* Drawer（合併為一份） */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(78%,340px);
  background:var(--bg-2); border-top-left-radius:20px; border-bottom-left-radius:20px; overflow:hidden;
  box-shadow:var(--shadow); transform:translateX(100%); transition:.35s cubic-bezier(.2,.7,.2,1);
  z-index:60; display:flex; flex-direction:column; color:#D1B26E;
}
.drawer.open{ transform:translateX(0) }
.drawer .hd{
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.2rem; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(6px);
  background:color-mix(in oklab, var(--bg) 85%, white 15%);
}
.drawer a{ padding:1rem 1.2rem; border-bottom:1px dashed var(--line) }
.drawer details{ margin:.4rem 0 }
.drawer details summary{ padding:.6rem 0; cursor:pointer }
.drawer details a{ display:block; padding:.3rem 1rem; font-size:.95rem }

.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.28); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:.3s; z-index:55;
}
.overlay.show{ opacity:1; pointer-events:auto }

/* =========================
   Hero：媽媽禮服租借
========================= */
.hero-rental{
  --hero-img:url('/images/body-banner.JPG');
  --hero-x:left; --hero-y:42%;
  position:relative; isolation:isolate; overflow:hidden;
  padding: clamp(96px,160px) 0;
  background: var(--hero-img) no-repeat var(--hero-x) var(--hero-y)/cover;
}
.hero-rental::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.75) 100%);
}
@media (max-width:640px){
  .hero-rental{ background-image:none !important; background-color:var(--bg); padding-block: clamp(40px, 10vw, 72px) }
  .hero-rental::before{ content:none !important }
}

.hero-grid{
  width:min(1120px,92%); margin:0 auto;
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(16px,3vw,28px);
  align-items:center; position:relative; z-index:1;
}
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr } }

.hero-text h1{ font-family:"Noto Serif TC",serif; font-size:clamp(26px,4.2vw,48px); line-height:1.15; margin:0 0 .4rem }
.hero-sub{ color:#38302c; margin:.2rem 0 1rem }
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap }

/* 右側形象卡（輪播） */
.hero-illus{ display:grid; gap:14px; align-content:start; grid-template-columns:1fr }
.illus-photo{ background:#fff; border-radius:18px; min-height:clamp(240px,44vw,520px); box-shadow:var(--shadow); position:relative; overflow:hidden }
.illus-photo.slider1{ width:100%; aspect-ratio:4/5; margin-inline:auto; border-radius:16px }
.illus-photo .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02); transition:opacity .6s, transform 1.2s }
.illus-photo .slide.is-active{ opacity:1; transform:scale(1) }
.illus-photo .ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255, 104, 104, 0.22); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(4px);
  color:#fff; font-size:1.2rem; line-height:1; width:40px; height:40px; border-radius:999px; cursor:pointer;
}
.illus-photo .prev{ left:10px } .illus-photo .next{ right:10px }
@media (hover:hover){ .illus-photo .ctrl{ opacity:0; transition:opacity .2s } .illus-photo:hover .ctrl{ opacity:1 } }
.illus-photo .dots{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:8px; z-index:2 }
.illus-photo .dots button{ width:10px; height:10px; border-radius:999px; border:none; cursor:pointer; background:rgba(255,255,255,.55) }
.illus-photo .dots button[aria-selected="true"]{ background:#fff; width:20px; border-radius:6px }

.hero-illus .card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:.85rem 1rem; box-shadow:0 8px 24px rgba(0,0,0,.08) }
.hero-illus .tags{ display:inline-flex; gap:.4rem; flex-wrap:nowrap; overflow-x:auto; padding-bottom:.2rem; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.hero-illus .tags::-webkit-scrollbar{ display:none }
.tag{ background:#f6efe9; color:#6f6661; border:1px solid #eadfd7 }
.muted{ color:var(--muted); margin:.2rem 0 0 }
@media (min-width:768px){
  .hero-illus{ gap:16px } .illus-photo.slider1{ width:min(520px,48vw) }
  .hero-illus .card{ padding:1rem 1.15rem } .tag{ font-size:.85rem; padding:.24rem .6rem }
}
@media (min-width:1120px){
  .hero-illus{ gap:20px } .illus-photo.slider1{ width:min(520px,32vw) }
  .hero-illus .card{ padding:1.2rem 1.35rem } .tag{ font-size:.9rem; padding:.28rem .7rem }
}

/* =========================
   Marquee
========================= */
.marquee-wrap{ border-block:1px solid var(--line); background:var(--bg-2) }
.marquee{ display:flex; overflow:hidden; gap:2rem; padding:.6rem 0 }
.marquee .row{ display:flex; gap:2rem; white-space:nowrap; will-change:transform; animation:mar 18s linear infinite }
.marquee:hover .row{ animation-play-state:paused }
@keyframes mar{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* =========================
   Rental（左圖右字）
========================= */
.rental-one{ padding:clamp(48px,6vw,88px) 0; background:#F8F5F2; color:var(--ink) }
.rental-one .container{ width:min(1120px,92%); margin:0 auto }
.rental-wrap{ display:grid; grid-template-columns:5fr 7fr; gap:22px; align-items:stretch }
.rental-media{ margin:0; border-radius:18px; overflow:hidden; box-shadow:var(--shadow) }
.rental-media img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5; object-position:50% 100% }
@media (max-width:768px){
  .rental-media img{  object-position:100% 40% }
}
.rental-body{
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:clamp(16px,3vw,28px);
  box-shadow:0 10px 30px rgba(0,0,0,.06); display:flex; flex-direction:column; justify-content:center; gap:.6rem;
}
.rental-body h2{ font-family:"Noto Serif TC",serif; font-size:clamp(22px,3vw,36px); margin:0 0 .2rem }
.rental-body .lead{ color:var(--muted); margin:0 0 .6rem }
@media (max-width:980px){ .rental-wrap{ grid-template-columns:1fr } .rental-media img{ aspect-ratio:16/10 } }

/* =========================
   Sections & Cards
========================= */
section{ padding:clamp(48px,4vw,88px) 0 }
.section-hd{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.2rem;
}
.section-hd p{ color:var(--muted) }
@media (max-width:768px){
  .section-hd{ justify-content:center } .section-hd--center{ align-items:center }
}
.section-hd--center{ justify-content:center; text-align:center }
.section-hd--center p{ margin-inline:auto }

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem }
.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .25s, box-shadow .25s;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow) }
.product{ grid-column:span 3 }

.p-media{ aspect-ratio:3/4; position:relative; background:linear-gradient(180deg,#eee,#ddd) }
.p-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .25s }
.p-body{ padding:1rem }
.p-title{ font-weight:600 }
.p-meta{ display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.9rem }
.swatches{ display:flex; gap:.4rem; margin:.6rem 0 }
.swatch{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.1); cursor:pointer }
.swatch[aria-selected="true"]{ outline:2px solid var(--text) }

/* =========================
   Testimonials / Slider
========================= */
.testi{ display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:start }
.stars{ color:#DAA520 }
.slider{ position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); background:var(--bg-2); padding:0 }
.slides{ display:flex; transition:transform .6s cubic-bezier(.2,.7,.2,1) }
.slide{ min-width:100%; padding:1.2rem }

/* 單圖等寬輪播（保留你最後版本） */
.slider1 .slides{ display:flex; gap:0; margin:0; padding:0; justify-content:flex-start; transform:translateX(0); will-change:transform }
.slider1 .slide{
  flex:0 0 100%; max-width:100%; margin:0; border-radius:12px; overflow:hidden; aspect-ratio:3/5;
}
.slider1 .slide img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 10% }
@media (hover:hover){ .slider1 .slide img{ transition:transform .6s } .slider1 .slide:hover img{ transform:scale(1.03) } }
@media (max-width:768px){ .slider1 .slide{ aspect-ratio:16/10 } }

/* =========================
   Figure / Caption 基本
========================= */
figure{ position:relative; overflow:hidden; border-radius:10px }
figure img{ width:100%; display:block; transition:transform .5s ease }
figure figcaption{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1rem; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  font-weight:500; font-family:"Noto Serif TC",serif; letter-spacing:1px;
  opacity:0; transform:translateY(20px); transition:opacity .4s, transform .4s;
}
figure figcaption,
figure .desc{
  pointer-events: none;
}
/* 真的要在 hover 顯示後可點（例如 figcaption 裡有連結） */
figure:hover figcaption,
figure:hover figcaption a,
figure:hover .desc {
  pointer-events: auto;
}

/* 觸控裝置沒有 hover：若要讓 caption 永遠不擋點擊 */
@media (hover:none){
  figure figcaption,
  figure .desc { pointer-events: none !important; }
}
figure:hover figcaption{ opacity:1; transform:translateY(0) }
figure .desc{
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s;
  font-size:.9rem; font-weight:400; line-height:1.4; margin-top:.3rem;
}
figure:hover .desc{ opacity:1; transform:translateY(0) }
figure .cta,
figure .btn {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.lightbox .close{ top:8px; right:8px; transform:none }
/* 圖上方 caption（你的 caption 額外樣式保留） */
.caption{
  position:absolute; top:0; left:0; width:100%; padding:14px 18px;
  background:linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 100%);
  backdrop-filter:blur(6px); color:#fff; font-size:1.05rem; font-family:"Noto Serif TC",serif; font-weight:500;
  text-align:center; letter-spacing:1.2px; text-shadow:0 2px 4px rgba(0,0,0,.4);
  border-top-left-radius:8px; border-top-right-radius:8px; box-sizing:border-box;
  opacity:.95; transform:translateY(0); transition:all .3s;
}
.slide:hover .caption{ opacity:1; transform:translateY(2px) }

/* =========================
   Gallery（合併為一份）
========================= */
#series{ text-align:center; padding-bottom:clamp(24px,3vw,48px) }
#series .gallery{ justify-content:center; height:auto !important; min-height:0 !important; align-content:start; }


.gallery figure{
  position:relative; overflow:hidden; border-radius:14px; isolation:isolate;
  aspect-ratio:4/5; cursor:zoom-in; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.gallery img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s }
.gallery figure:hover img{ transform:scale(1.03) }

/* Hover 遮罩：置中 data-title 與底部「點擊檢視」 */
.gallery figure::before{
  content: attr(data-title);
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(8px);
  width: 200px; padding:.4rem .6rem; text-align:center; line-height:1.4; color:#fff;
  backdrop-filter:blur(2px); border-radius:.5rem; box-shadow:0 8px 20px rgba(0,0,0,.18);
  opacity:0; transition:opacity .35s, transform .35s; z-index:2; pointer-events:none;background-color: #ffffff48;
}
.gallery figure::after{
  content:"點擊檢視";
  position:absolute; inset:auto 0 0 0; padding:.6rem .8rem; color:#fff; font-size:.95rem; letter-spacing:.02em;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  opacity:0; transform:translateY(12px); transition:opacity .35s, transform .35s; z-index:2; pointer-events:none;
}
.gallery figure:hover::before{ opacity:1; transform:translate(-50%,-50%) translateY(0) }
.gallery figure:hover::after{ opacity:1; transform:translateY(0) }
.gallery figure figcaption{ position:absolute; left:-9999px } /* 無障礙保留 */

@media (hover:none){
  .gallery figure::before{ opacity:1; transform:none }
}
@media (prefers-reduced-motion:reduce){
  .gallery figure img,
  .gallery figure::before, .gallery figure::after{ transition:none }
}

/* 既有固定寬的 gallery（若需要） */
#gallery{
  width: 60%;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  justify-content: start;
  margin: auto;
}
@media (max-width:1024px){ #gallery{ --card:200px } }
@media (max-width:768px ){ #gallery{ --card:180px } }
@media (max-width:640px ){ #gallery{ --card:105vw;width: 85%; } }
#gallery img{ width:100%; height:100%; object-fit:cover; }
#gallery.compact{
  grid-template-columns: repeat(var(--cols), var(--card));
  width: calc(var(--cols) * var(--card) + (var(--cols) - 1) * var(--gap));
  margin-inline: auto;   /* 置中 */
  justify-content: initial;
}
#gallery figure,
.gallery figure{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: zoom-in;
  isolation: isolate;
  aspect-ratio: 4 / 7; 
}
#gallery figure img,
.gallery figure img{
  display:block; width:100%; height:100%; object-fit:cover;
  transform: scale(1); filter: none;
  transition: transform .45s ease, filter .45s ease;
}




/* =========================
   Lightbox
========================= */
.lightbox{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.85); z-index:100 }
.lightbox.show{ display:grid }
.lightbox .frame{ position:relative; width:min(92vw,500px); max-height:96vh; display:grid; grid-template-rows:auto 1fr auto; gap:10px }
.lightbox img{ width:100%; height:auto; object-fit:contain; border-radius:10px }
.lightbox .close,.lightbox .prev,.lightbox .next{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25); color:#fff; padding:.6rem .8rem; border-radius:999px; cursor:pointer;
}
.lightbox .close{ top:-44px; right:-4px; transform:none }
.lightbox .prev{ left:-4px } .lightbox .next{ right:-4px }
#lightbox figcaption{ margin-top:.6rem; text-align:center; color:#f1f1f1; font-size:.95rem; line-height:1.4 }

/* =========================
   花瓣飄落（視覺）
========================= */
.petals{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden }
.petal{
  position:absolute; width:clamp(10px,1.2vw,16px); height:clamp(14px,1.8vw,22px);
  background:radial-gradient(60% 60% at 40% 35%, rgba(255,255,255,.94) 0%, rgba(255,230,230,.95) 40%, rgba(255,192,203,.85) 100%);
  border-radius:60% 40% 60% 40% / 60% 60% 40% 40%; box-shadow:0 2px 8px rgba(0,0,0,.08);
  filter:saturate(105%); opacity:.85; transform-origin:50% 50%;
  animation:petal-fall var(--dur,14s) linear infinite, petal-sway var(--sway,6s) ease-in-out infinite alternate;
}
@keyframes petal-fall{ to{ transform:translateY(110vh) rotate(360deg) } }
@keyframes petal-sway{ from{ margin-left:-12px } to{ margin-left:12px } }

/* =========================
   Journal / Lookbook / Footer
========================= */
.lookbook{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem }
.lb-card{ border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius); overflow:hidden }
.lb-media{ position:relative; aspect-ratio:16/9 } .lb-media video{ position:absolute; inset:0; width:180%; height:100%; object-fit:cover }
.lb-body{ padding:1rem }
.journal{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem }
.post{ border:1px solid var(--line); background:var(--bg-2); border-radius:var(--radius); overflow:hidden }
.post .cover{ aspect-ratio:16/9; background:url('images/mama\ \(1\).png') center/cover }
.post1 .cover{ background:url('images/mama\ \(2\).png') center/cover }
.post2 .cover{ background:url('images/mama\ \(3\).png') center/cover }
.post .bd{ padding:1rem }
@media (max-width:980px){ .testi{ grid-template-columns:1fr } .lookbook{ grid-template-columns:1fr } .journal{ grid-template-columns:1fr } }

footer{ background: color-mix(in oklab, var(--bg) 70%, white 10%) }
footer .footer-grid{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:14px; min-height:80px; justify-content:space-around;
}
footer .footer-brand{ display:inline-flex; align-items:center; line-height:1 }
footer .footer-brand img{ height:70px; width:auto; display:block }
@media (max-width:640px){ footer .footer-brand img{ height:40px } }
footer .footer-text{ display:flex; flex-direction:column; justify-content:center; text-align:center; color:#B17844 }
footer .footer-text p{ margin:.25rem 0; line-height:1.8 }

/* =========================
   Contact（區域變數作用域化）
========================= */
#contact{
  --brand:#8a5a5a; --ink:#343434; --muted:#6b6b6b; --line:#e9e6e6; --card:#fff; --bg:#faf9f9;
  --radius:16px; --shadow:0 10px 26px rgba(0,0,0,.08); --shadow2:0 14px 36px rgba(0,0,0,.12);

  padding:56px 0; background:var(--bg);
}
#contact .container{ max-width:1080px; margin:0 auto; padding:0 16px }
.contact-head h2{ margin:0 0 .5rem; font-weight:800; letter-spacing:.5px; color:var(--ink); text-align:center }
.contact-head .lead{ color:var(--muted); line-height:1.8; max-width:760px; margin:auto; text-align:center }

.contact-grid{ display:grid; gap:22px; margin-top:20px; grid-template-columns:1fr }
@media (min-width:960px){ .contact-grid{ grid-template-columns:1fr 1.2fr; gap:28px } }

.contact-aside,.contact-form{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
.contact-aside h3{ margin:.2rem 0 .6rem; color:var(--ink) }
.feature-list{ margin:0; padding-left:1.1rem } .feature-list li{ margin:.4rem 0; color:var(--ink); line-height:1.7 }
.feature-list strong{ color:var(--brand); font-weight:700 }

.contact-info{ margin-top:1rem; padding-top:.8rem; border-top:1px dashed var(--line); color:var(--muted) }
.contact-info a{ color:var(--brand) }

.form-row{ margin-bottom:14px }
.form-row.two-col{ display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width:720px){ .form-row.two-col{ grid-template-columns:1fr 1fr } }

label,legend{ display:block; color:var(--ink); font-weight:600; margin-bottom:6px }
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea{
  width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
  outline:none; transition: box-shadow .2s, border-color .2s; font-size:16px;
}
input:focus, select:focus, textarea:focus{ border-color:rgba(138,90,90,.5); box-shadow:0 0 0 4px rgba(138,90,90,.12) }
textarea{ resize:vertical }

.checks{ display:grid; grid-template-columns:1fr; gap:.4rem }
@media (min-width:540px){ .checks{ grid-template-columns:1fr 1fr } }
.checks label{ font-weight:500; color:var(--ink) } .checks input{ margin-right:.4rem }

.form-row.agree{ display:flex; justify-content:center; text-align:center; padding-top:4px }
.form-row.agree label{
  display:inline-flex; align-items:center; gap:.5rem; margin:0; color:var(--muted); line-height:1.6; max-width:56ch;
  font-weight:500;
}
.form-row.agree input[type="checkbox"]{ width:1.05rem; height:1.05rem; accent-color:var(--brand); margin:0 }
.tiny{ font-size:.88rem; color:var(--muted); margin-top:.6rem; text-align:center }

/* =========================
   Stores（區域變數作用域化）
========================= */
#stores{
  --brand:#8a5a5a; --ink:#333; --muted:#666; --line:#eee; --card-bg:#fff;
  --shadow:0 8px 24px rgba(0,0,0,.08); --shadow-hover:0 12px 28px rgba(0,0,0,.12);
  --radius:14px;
}
#stores h2{ font-weight:700; letter-spacing:.5px }
#stores p{ color:var(--muted) }

.store-list{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:.8rem }
@media (min-width:640px){ .store-list{ grid-template-columns:repeat(2,1fr); gap:18px } }
@media (min-width:1024px){ .store-list{ grid-template-columns:repeat(3,1fr); gap:20px } }

.store{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.store:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color: rgba(138,90,90,.35) }
.store h4{
  position:relative; margin:0 0 .4rem; padding-left:.75rem; font-weight:700; color:var(--ink); letter-spacing:.3px;
}
.store h4::before{
  content:""; position:absolute; left:0; top:.2rem; width:4px; height:1.1em; border-radius:2px;
  background:linear-gradient(180deg, var(--brand), #b37a7a);
}
.store p{ margin:.3rem 0; color:var(--ink); line-height:1.65 }
.store a{ color:var(--brand); text-underline-offset:2px } .store a:hover{ text-decoration:underline }
.store .note{ color:var(--muted); font-size:.95rem }
.region-banner{ margin:1rem 0 .6rem; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow) }
.region-banner img{ width:100%; display:block; transform:scale(1.01) }
.contact-info{ margin-top:1.2rem; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:#faf9f9; box-shadow:var(--shadow) }
.contact-info a{ color:var(--brand) }

/* 顏色篩選器（提高指定度，避免被覆蓋） */
aside#color-filter.color-filter { 
  margin: 0 auto 14px;
  margin-top: 5rem;
}

#color-filter h3{
  margin: .2rem 0 .6rem;
  font-family: "Noto Serif TC", serif;
}

#color-filter .color-search{ position: relative; margin-bottom:.6rem; }
#color-filter .color-search input{
  width:100%; padding:.55rem 2.4rem .55rem .8rem;
  border:1px solid var(--line); border-radius:999px; background:#fff; font-size:.95rem;
}
#color-filter .search-btn{
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:none; background:transparent; color:#888; border-radius:8px; cursor:pointer;
}

#color-filter .color-list{
  display:grid; grid-template-columns: 1fr 1fr; gap:6px;
  max-height: 220px; overflow:auto; padding-right:4px;
}
@media (min-width:740px){
  #color-filter .color-list{ grid-template-columns: 1fr 1fr 1fr; max-height:260px; }
}

#color-filter .color-item{
  --sw: 18px;
  display:grid; grid-template-columns: var(--sw) 1fr auto; align-items:center;
  gap:8px; padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:#333; cursor:pointer;
}
#color-filter .color-item .swatch{
  width:var(--sw); height:var(--sw); border-radius:50%;
  background: var(--c, #ccc); border:1px solid rgba(0,0,0,.1);
}
#color-filter .color-item .name{ font-size:.95rem; text-align:left; }
#color-filter .color-item .count{
  min-width:22px; padding:0 6px; height:20px; border-radius:10px;
  background:#f3f3f3; color:#666; font-size:.8rem; display:inline-grid; place-items:center;
}
#color-filter .color-item[aria-checked="true"]{
  border-color: rgba(138,90,90,.45);
  box-shadow: 0 4px 12px rgba(138,90,90,.08) inset;
}
#color-filter .color-item[aria-checked="true"] .count{
  background: rgba(138,90,90,.12); color:#8a5a5a; font-weight:600;
}

#color-filter .color-ops{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:.6rem; color:#666;
}
#color-filter .btn-clear{
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:.4rem .7rem; cursor:pointer;
}


/* Size Finder Modal */
    .modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:.3s;}
    .modal.show{opacity:1; pointer-events:auto}
    .modal-card{width:min(720px,92%); background:var(--bg-2); border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden}
    .modal-card .hd{display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; border-bottom:1px solid var(--line)}
    .modal-card .bd{padding:1rem 1.2rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem}
    .modal-card label{font-size:.9rem; color:var(--muted)}
    .modal-card input, .modal-card select{width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--line)}
    .modal-card .ft{display:flex; justify-content:flex-end; gap:.6rem; padding:1rem 1.2rem; border-top:1px solid var(--line)}
    .size-result{background:#F4F7F5; border:1px dashed #C9D8CE; padding:.8rem 1rem; border-radius:12px}
    @media (max-width: 760px){.modal-card .bd{grid-template-columns:1fr}
    .modal-card{margin-top: 80px;}
  }



/* 手機：關掉 hover、標題置中顯示 */
@media (hover:none){
  /* 不要縮放、不要 hover 提示條 */
  .gallery figure { cursor:auto; }
  .gallery figure:hover img { transform:none !important; }
  .gallery figure::after { display:none !important; }

  /* 關鍵：保持 translate(-50%,-50%)，讓中心點對齊 */
  .gallery figure::before{
    opacity: 1 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    /* 手機排版優化 */
    width: auto;
    max-width: 82%;
    padding: .5rem .75rem;
    text-align: center;
    line-height: 1.45;
    white-space: normal;
    word-break: break-word;
    pointer-events: none;
  }
}
/* TOP按鈕 */
:root{
  --rose: #B27777;   /* 乾燥玫瑰 */
  --pearl:#FAF7F4;   /* 珍珠米白 */
  --fog:  #ECE8E4;   /* 霧灰 */
  --shadow-soft: 0 10px 25px rgba(0,0,0,.08);
}

/* 無障礙隱藏文字 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.back-to-top{
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 999;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 9999px;
  background-color: var(--rose);
  /* 輕微描邊讓色塊更乾淨 */
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: var(--shadow-soft);
  color: #fff;
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease, background-color .22s ease, filter .22s ease;
  opacity: 0; pointer-events: none; transform: translateY(8px);
}
.back-to-top.show{ opacity:1; pointer-events:auto; transform: translateY(0); }
.back-to-top:hover{ transform: translateY(-1px); filter: brightness(0.97); box-shadow: 0 14px 30px rgba(0,0,0,.12); }
/* 支援 color-mix 的瀏覽器再微調色溫；不支援則用上面的 filter */
@supports (background-color: color-mix(in srgb, red 50%, white 50%)){
  .back-to-top:hover{ background-color: color-mix(in srgb, var(--rose) 92%, black 8%); filter:none; }
}
.back-to-top:focus-visible{ outline: 2px solid color-mix(in srgb, var(--rose) 35%, white 65%); outline-offset: 2px; }
.back-to-top svg{ width: 22px; height: 22px; }

@media (min-width: 768px){
  .back-to-top{
    width: 48px; height: 48px;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(28px, env(safe-area-inset-bottom));
  }
  .back-to-top svg{ width: 24px; height: 24px; }
}