/* =========================
   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;
}
/* ===== 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 }

/* 行動輪播箭頭不要蓋到抽屜 */
@media (max-width:640px){
  .carousel-btn{ z-index: 1500;}        /* 低於 drawer(2000)、高於內容 */

}
*{ 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;

  /* 背景圖＋柔霧 */
 
}


h1,h2,h3,h4{font-family:'Noto Serif TC', serif; line-height:1.3; margin:0 0 .5rem!important; }
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 } }


/* =========================
   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; }
/* 手機版 */
@media (max-width:640px){

 
  #series .gallery{
    justify-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: 70%;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  justify-content: start;
  margin: auto;
}
@media (max-width:1024px){ #gallery{ --card:200px } }
@media (max-width:768px ){ #gallery{ --card:180px } }

#gallery img{ width:100%; height:80%; object-fit:cover; object-position:100% 0%}
#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 / 6; 
}
#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;
}


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

#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;
}
@media (max-width:640px){
  aside#color-filter.color-filter{
    margin-top: 2rem;              /* 與上方區塊距離縮短 */
    padding: 0 10px;               /* 兩側留白，避免貼邊 */
    max-width: 100%;
  }

  #color-filter h3{
    text-align: center;
    font-size: 1.05rem;
  }

  /* 搜尋列：增加觸控可點範圍 */
  #color-filter .color-search input{
    padding:.7rem 2.8rem .7rem .9rem;
    font-size:1rem;
  }
  #color-filter .search-btn{
    width:36px; height:36px;
    right:.25rem;
  }

  /* 色票：由 2 欄改為單欄，滾動高度放大 */
  #color-filter .color-list{
    grid-template-columns: 1fr;
    max-height: 320px;     /* 手機可見更多項 */
    padding-right: 0;
  }

  /* 單項：增大觸控尺寸 */
  #color-filter .color-item{
    --sw: 20px;
    gap:10px;
    padding:10px 12px;
  }
  #color-filter .color-item .name{ font-size:1rem; }
  #color-filter .color-item .count{ height:22px; min-width:24px; }

  /* 操作列：直排、置中 */
  #color-filter .color-ops{
    flex-direction: column;
    gap:.4rem;
    align-items: center;
    justify-content: center;
    margin-top:.8rem;
  }
  #color-filter .btn-clear{
    padding:.5rem .9rem;
    min-width: 160px;
  }
}

/* 超小螢幕保底（≤360px） */
@media (max-width:360px){
  #color-filter .color-search input{ font-size:.95rem; }
  #color-filter .btn-clear{ min-width: 100%; }
  #color-filter .color-list{ max-height: 280px; }
}

/* 平板：三欄顯示（保持你的 740px 規則），增加高度一點 */
@media (min-width:740px) and (max-width:1024px){
  #color-filter .color-list{ max-height: 300px; }
}

/* 大螢幕（≥1200px）：容器寬度微放、行高更舒適 */
@media (min-width:1200px){
  aside#color-filter.color-filter{ max-width: 1200px; }
  #color-filter .color-item{ padding:8px 12px; }
}
/* =========================
   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:26px 0;;
}
#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 }
/* 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}}

/* =========================
   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('https://www.etonwedding.com/img/photo/mammy/style-beauty/pregnant%20(4).jpg') center/cover }
.post1 .cover{ background:url('https://www.etonwedding.com/img/photo/mammy/style-beauty/pregnant%20(22).jpg') center/cover }
.post2 .cover{ background:url('https://www.etonwedding.com/img/photo/mammy/style-cute/pregnant%20(37).jpg') 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 }
/* ========= moms2 新增內容專用 ========= */
.moms2-container{max-width:1100px;margin:0 auto;padding:0 16px;}
.momo{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);overflow:hidden; transition:transform .25s, box-shadow .25s;padding: 30px;}
.moms2-title{font-family:'Noto Serif TC',serif;font-weight:600;letter-spacing:.02em}

/* Intro 區塊 */
.moms2-intro{margin:2rem auto;max-width:800px;line-height:1.8}
.moms2-intro h2{font-size:1.4rem;margin-bottom:.6rem;text-align:center}
.moms2-intro p{color:#444;margin:.5rem 0}

/* Badges */
.moms2-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:.8rem}
.moms2-badge{font-size:.82rem;padding:.32rem .6rem;border-radius:999px;border:1px solid #e9e9e9;background:#fafafa}

/* Color notes */
.moms2-colornotes{margin:2rem auto;max-width:850px}
.moms2-colornotes h2{margin-bottom:.6rem}
.moms2-colornotes ul{margin:0;padding-left:1.2rem}
.moms2-colornotes li{margin:.4rem 0;color:#444}
.moms2-colornotes .moms2-tip{margin-top:.6rem;font-size:.9rem;color:#666;font-style:italic}

/* Fit 建議 */
.moms2-fit{margin:2rem auto;max-width:850px}
.moms2-fit h2{margin-bottom:.6rem}
.moms2-fit ul{margin:0;padding-left:1.2rem}
.moms2-fit li{margin:.4rem 0;color:#444}

/* 場合建議 */
.moms2-scenes{margin:2rem auto;max-width:850px}
.moms2-scenes dt{font-weight:600;margin-top:.6rem}
.moms2-scenes dd{margin:.2rem 0 .6rem .8rem;color:#444}

/* 尺寸建議 */
.moms2-sizing{margin:2rem auto;max-width:850px}
.moms2-sizing ol{padding-left:1.4rem;margin:0}
.moms2-sizing li{margin:.4rem 0;color:#444}
.moms2-sizing .moms2-tip{margin-top:.6rem;font-size:.9rem;color:#666;font-style:italic}

/* 租借須知 */
.moms2-rules{margin:2rem auto;max-width:850px}
.moms2-rules ul{margin:0;padding-left:1.2rem}
.moms2-rules li{margin:.4rem 0;color:#444}

/* Styling 建議 */
.moms2-styling{margin:2rem auto;max-width:850px}
.moms2-styling ul{margin:0;padding-left:1.2rem}
.moms2-styling li{margin:.4rem 0;color:#444}

/* 拍照 tips */
.moms2-phototips{margin:2rem auto;max-width:850px}
.moms2-phototips ul{margin:0;padding-left:1.2rem}
.moms2-phototips li{margin:.4rem 0;color:#444}

/* FAQ */
.moms2-faq{margin:2rem auto;max-width:850px}
.moms2-qa{border:1px solid #eee;border-radius:12px;padding:.82rem 1rem;background:#fff}
.moms2-qa+ .moms2-qa{margin-top:10px}
.moms2-qa summary{cursor:pointer;font-weight:600}
.moms2-qa div{color:#555;margin-top:.35rem;line-height:1.6}

/* CTA 區塊 */
.moms2-cta{margin:2rem auto;max-width:850px;text-align:center}
.moms2-cta p{margin:.6rem 0}
.moms2-cta a{display:inline-block;margin:.3rem .5rem;padding:.6rem 1.2rem;border-radius:999px;font-weight:600;text-decoration:none}
.moms2-cta a:first-child{background:#d36073;color:#fff}
.moms2-cta a:last-child{background:#fff;color:#d36073;border:1px solid #d36073}

/* ========= RWD ========= */
/* 手機：直排，隱藏分隔符號 */
@media (max-width:640px){
  .moms2-cta p{
    flex-direction: column;
    gap: .5rem;
  }
  .moms2-cta p span{
    display: none;
  }
  .moms2-cta a.btn{
    width: 100%;
    max-width: 240px;
  }
}



/* =========================
   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:80% 100% }
.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) }

/* 保底樣式：可放到 mamadress.css */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.84);display:none;align-items:center;justify-content:center;z-index:9999;padding:2rem}
.lightbox.show{display:flex}
.lightbox img{max-width:min(92vw,1400px);max-height:82vh;box-shadow:0 10px 40px rgba(0,0,0,.5);border-radius:8px}
.lb-btn{position:absolute;border:0;background:transparent;color:#fff;font-size:2rem;line-height:1;cursor:pointer;user-select:none}
.lb-close{top:14px;right:16px;font-size:1.6rem}
.lb-prev{left:1rem}
.lb-next{right:1rem}
.lb-caption{position:absolute;left:0;right:0;bottom:1rem;color:#ddd;text-align:center;padding:.5rem 1rem;font-size:.95rem}
@media (hover:hover){.lb-btn:hover{color:#ffd9e0}}

/* 手機：關掉 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;
  }
}
.overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:.3s;
  z-index:1990; /* 要高於 header(1001)，低於 drawer(2000) */
}
.overlay.show{
  opacity:1; pointer-events:auto;
}
.drawer{ z-index:2000; } /* 保持只有這份 z-index，避免跟其他 60/!important 打架 */

/* =========================
   Mobile：Gallery 單張滑動輪播
   放在檔案最後，覆蓋前面 #gallery 設定
========================= */
/* =========================
   Mobile：Gallery 單張滑動輪播（無箭頭）
========================= */
@media (max-width:640px){
  #gallery{
    display:flex !important;
    width:100% !important;
    margin:0 auto !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap: var(--gap);
    padding: 0 7vw;                 /* 兩側留點邊距 */
    scroll-padding-inline: 7vw;     /* snap 對齊左右邊距 */
  }
  #gallery::-webkit-scrollbar{ display:none; }

  #gallery figure{
    flex: 0 0 86vw;                 /* 每次一張 */
    max-width: 56vw;
    scroll-snap-align: center;
    border-radius: 14px;
    aspect-ratio: 4 / 5;
  }
  #gallery figure img{
    width:100%; height:100%; object-fit:cover;
  }

  /* 移除 compact 模式影響 */
  #gallery.compact{
    width:100% !important;
    grid-template-columns:none !important;
  }
}
/* 手機：隱藏下方左右切換按鈕／圓點 */
@media (max-width:640px){
  /* 你的各種控制元件 class，一次全關 */
  .carousel-btn,
  .nav-btn,
  .illus-photo .ctrl,     /* hero 形象卡左右鍵 */
  .illus-photo .dots,     /* hero 形象卡下方圓點 */
  #series .slider .ctrl,
  #series .slider .dots,
  #series .slider1 .ctrl,
  #series .slider1 .dots {
    display: none !important;
  }

  /* 若那些按鈕是直接放在 gallery 裡的 <button>，也一起保險關掉 */
  #series .gallery button {
    display: none !important;
  }
}
 .carousel-btn,
  .nav-btn,
  .illus-photo .ctrl,     /* hero 形象卡左右鍵 */
  .illus-photo .dots,     /* hero 形象卡下方圓點 */
  #series .slider .ctrl,
  #series .slider .dots,
  #series .slider1 .ctrl,
  #series .slider1 .dots {
    display: none !important;
  }






  .moms-slider {
  position: relative;
  max-width: 100%;
  overflow: hidden;
 
}
.moms-slider__track {
  display: flex;
  transition: transform .6s ease-in-out;
}
.moms-slider img {
  width: 100%;
  height: auto;
  max-height: 950px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  
}

/* 左右按鈕 */
.moms-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(238, 164, 164, 0.4);
  border: 0;
  color: #fff;
  font-size: 1rem;
  padding: 6px 12px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}
.moms-slider__btn:hover { background: rgba(0,0,0,.6); }
.moms-slider__prev { left: 10px; }
.moms-slider__next { right: 10px; }

/* 小點 */
.moms-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.moms-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: 0;
  cursor: pointer;
}
.moms-slider__dot.is-active { background: #fff; }

/* RWD */
@media (max-width:768px){
  .moms-slider img { max-height: 280px; }
  .moms-slider__btn { font-size: 1.5rem; padding: 4px 8px; }
}


/* ===== Split Hero 基本設定 ===== */
/* ===== 基本結構 ===== */
.full-block {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三等分 */
  width: 100%;
  min-height: clamp(300px, 60vw, 600px); /* RWD 高度 */
}

/* 每個欄位 */
.block-col {
  position: relative;
  overflow: hidden;
}

/* 左右圖：滿版裁切 */
.block-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 中央文字區 */
.block-center {
  background: #f7efe8;   /* 奶油色，可改 */
  color: #4c3428;        /* 棕色文字 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 標題文字 */
.block-title {
  font-family: "Noto Serif TC", serif;
  font-weight: 600;
  font-size: clamp(28px, 5vw, 60px);
  margin: 0;
  line-height: 1.1;
  letter-spacing: .12em;
}
.block-title em {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 500;
  margin-left: .3em;
}

/* ===== RWD 手機版：改直排 ===== */
@media (max-width: 768px) {
  .full-block {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .block-col {
    min-height: 50vw; /* 手機每塊都有高度 */
  }
}
/* 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; }
}