/* =========================================================
   AshmeBespoke — shared stylesheet
   Design tokens: Cocoa Rose & Cream (Milk → Cocoa)
   ========================================================= */
:root{
  --milk:#FBF7F4;
  --milk-deep:#F4EDE6;
  --blush-oat:#E8D8CE;
  --dusty-rose:#B98F88;
  --dusty-rose-deep:#9C6F68;
  --cocoa-taupe:#7A6258;
  --espresso:#3B2F2A;
  --line:rgba(59,47,42,.14);
  --shadow: 0 20px 60px rgba(59,47,42,.10);
  --header-bg:rgba(251,247,244,.92);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --milk:#241D19; --milk-deep:#2B221D; --blush-oat:#3A2E27;
    --dusty-rose:#C9A29A; --dusty-rose-deep:#D9B6AE; --cocoa-taupe:#B9A398;
    --espresso:#F3E9E1; --line:rgba(243,233,225,.14);
    --shadow: 0 20px 60px rgba(0,0,0,.4); --header-bg:rgba(36,29,25,.88);
  }
}
:root[data-theme="dark"]{
  --milk:#241D19; --milk-deep:#2B221D; --blush-oat:#3A2E27;
  --dusty-rose:#C9A29A; --dusty-rose-deep:#D9B6AE; --cocoa-taupe:#B9A398;
  --espresso:#F3E9E1; --line:rgba(243,233,225,.14);
  --shadow: 0 20px 60px rgba(0,0,0,.4); --header-bg:rgba(36,29,25,.88);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--milk);
  color:var(--espresso);
  font-family:"Noto Sans TC","Noto Sans",sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  cursor:url('../mouse-cursor.png') 0 0, auto;
}
a, button{
  cursor:url('../mouse-cursor.png') 0 0, pointer;
}
/* The brand cursor has dedicated dark and light variants for contrast. */
.hero, .hero *, .ws-hero, .ws-hero *, .topic-hero, .topic-hero *,
footer, footer *, .consult, .consult *, .modal-overlay{cursor:url('../mouse-cursor-light.png') 0 0, auto;}
.hero a, .hero button, .ws-hero a, .ws-hero button, .topic-hero a,
.topic-hero button, footer a, footer button, .consult a, .consult button,
.modal-overlay a, .modal-overlay button{cursor:url('../mouse-cursor-light.png') 0 0, pointer;}
h1,h2,h3{
  font-family:"Noto Serif TC","Noto Serif",serif;
  font-weight:600; margin:0; text-wrap:balance;
}
/* brand logo mark — Cinzel for the wordmark, Cinzel Decorative only on the A/B initials */
.wordmark{
  font-family:"Cinzel",serif;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wordmark .wm-deco{
  font-family:"Cinzel Decorative",serif;
  font-weight:700;
}
/* two-line lockup: "Ashme" over a small "Jewelry Atelier & Salon" line */
.wordmark .wm-name{display:block;}
.wordmark .wm-sub{
  display:block;
  font-family:"Noto Sans TC","Noto Sans",sans-serif;
  font-weight:500;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cocoa-taupe);
  margin-top:5px;
}
@media (max-width:520px){
  .wordmark .wm-sub{font-size:8px; letter-spacing:.12em; margin-top:3px;}
}
.eyebrow{
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cocoa-taupe); font-weight:500;
}
img{max-width:100%; display:block;}
.mono-num{font-variant-numeric:tabular-nums;}
.bg-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* ---------- keep Google's own translate UI invisible; ours drives it ---------- */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
.skiptranslate > iframe,
#google_translate_element,
.goog-te-gadget{display:none !important; visibility:hidden !important; height:0 !important;}
html{margin-top:0 !important;}
body{top:0 !important; position:static !important; margin-top:0 !important;}
.goog-text-highlight{background:none !important; box-shadow:none !important;}

/* ---------- loading overlay ----------
   Full-bleed on every screen size (mobile included): the video is
   absolutely positioned to the overlay's own edges with object-fit:cover,
   so it always fills the viewport edge-to-edge with no letterboxing,
   cropping the sides on narrow/tall phone screens rather than shrinking. */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--milk);
  overflow:hidden;
  transition:opacity .3s ease;
}
#loader video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
#loader.done{opacity:0; pointer-events:none;}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:500; background:var(--header-bg);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  max-width:1320px; margin:0 auto; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center;
  padding:18px 40px; gap:24px;
}
.nav-left, .nav-right{display:flex; align-items:center; gap:28px;}
.nav-left{justify-self:start; gap:18px;}
.nav-left a{white-space:nowrap;}
.nav-right{justify-self:end;}
.nav-left a, .nav-right a{
  color:var(--espresso); text-decoration:none; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:500; position:relative;
}
.nav-left a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--espresso); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav-left a:hover::after, .nav-left a.active::after{transform:scaleX(1);}
.logo-center{font-size:20px; color:var(--espresso); text-decoration:none; text-align:center; line-height:1.05;}
.lang-dd{position:relative;}
.lang-trigger{
  background:none; border:none; color:var(--espresso); font-family:inherit;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:5px; padding:4px 2px;
}
.lang-trigger .car{font-size:9px; opacity:.6; transition:transform .2s ease;}
.lang-menu{
  position:absolute; top:calc(100% + 10px); right:0; background:var(--milk);
  border:1px solid var(--line); box-shadow:var(--shadow); min-width:96px; padding:6px 0;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:20;
}
.lang-dd:hover .lang-menu, .lang-dd.open .lang-menu{opacity:1; visibility:visible; transform:translateY(0);}
.lang-dd:hover .lang-trigger .car{transform:rotate(180deg);}
.lang-menu button{
  display:block; width:100%; text-align:left; background:none; border:none;
  color:var(--cocoa-taupe); font-family:inherit; font-size:12px; letter-spacing:.06em; padding:8px 16px;
}
.lang-menu button:hover{color:var(--espresso); background:var(--milk-deep);}
.lang-menu button.active{color:var(--espresso); font-weight:600;}
.icon-btn{background:none;border:none;color:var(--espresso);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;}
.member-icon-svg{display:none;}

/* Keep the full desktop navigation without letting longer translations
   enter the centred wordmark's visual safety area. The spacing tightens
   progressively between tablet-landscape and regular desktop widths;
   the existing phone navigation remains unchanged below 900px. */
@media (min-width:901px) and (max-width:1320px){
  .nav-row{
    padding-left:clamp(18px,3vw,32px); padding-right:clamp(18px,3vw,32px);
    gap:clamp(12px,1.6vw,20px);
  }
  .nav-left{gap:clamp(7px,1vw,13px); min-width:0;}
  .nav-left a{font-size:clamp(10px,.92vw,12px); letter-spacing:.05em;}
  .nav-right{gap:clamp(14px,2vw,22px); min-width:0;}
  .nav-right a{font-size:clamp(10.5px,.95vw,12px); letter-spacing:.07em;}
  .logo-center{font-size:clamp(18px,1.55vw,20px);}
}
html[lang="fr"] .nav-left{gap:14px;}
@media (min-width:901px) and (max-width:1080px){
  html[lang="fr"] .nav-left{gap:7px;}
}

.burger{display:none; background:none; border:none; flex-direction:column; gap:5px; padding:4px;}
.burger span{width:22px; height:1px; background:var(--espresso); display:block;}
.mobile-nav{display:none; max-height:0; overflow:hidden; border-bottom:1px solid var(--line); background:var(--milk); transition:max-height .3s ease;}
.mobile-nav.open{max-height:460px;}
.mobile-nav a{display:block; padding:16px 20px; color:var(--espresso); text-decoration:none; font-size:14px; letter-spacing:.06em; border-top:1px solid var(--line);}
.mobile-nav a:first-child{border-top:none;}
@media (max-width:900px){
  .nav-left{display:none;}
  /* Keep an empty left grid track so the wordmark stays centred in the
     viewport, independently of the member and menu controls on the right. */
  .nav-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:12px;
    min-height:58px;
    padding:12px 20px;
  }
  .logo-center{grid-column:2; justify-self:center; min-width:0;}
  .nav-right{grid-column:3; justify-self:end; margin-left:0; gap:14px;}
  .nav-right .lang-dd{display:none;}
  .member-icon{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;}
  .member-icon .member-icon-svg{display:block; width:20px; height:20px;}
  .member-icon .member-label{display:none;}
  .burger{display:flex;}
  .mobile-nav{display:block;}
  .mobile-lang{display:flex; align-items:center; gap:8px; padding:16px 20px; border-top:1px solid var(--line);}
  .mobile-lang .mobile-lang-label{margin-right:4px; color:var(--cocoa-taupe); font-size:11px; letter-spacing:.1em;}
  .mobile-lang button{background:none; border:1px solid var(--line); border-radius:999px; color:var(--cocoa-taupe); font:inherit; font-size:12px; padding:5px 10px;}
  .mobile-lang button.active{border-color:var(--espresso); color:var(--espresso);}
}
@media (max-width:520px){
  .nav-row{gap:10px; padding:12px 16px;}
  .logo-center{font-size:18px;}
  .nav-right{gap:12px;}
  .burger{padding:2px;}
}

/* ---------- hero carousel (landing) ----------
   The caption no longer sits centered over the video — that used to plant
   it right on top of the shot's main subject and forced a dark wash across
   the whole frame just to keep it readable. Now it's a small block tucked
   into the bottom-left corner, and the gradient behind it only shades the
   lower slice of the frame — the rest of the video stays fully clear, since
   the video is the point of this section, not something to read past. */
/* Subtracts the sticky header's own height so the hero's bottom edge lands
   exactly at the viewport's bottom edge on first load — otherwise "100vh"
   plus an in-flow header pushes the last ~70px of the slide (right where
   the caption now sits) below the fold. */
.hero{position:relative; height:calc(100vh - 72.5px); height:calc(100dvh - 72.5px); overflow:hidden; border-bottom:1px solid var(--line);}
@media (max-width:900px){.hero{height:calc(100vh - 60px); height:calc(100dvh - 60px);}}
.slide{position:absolute; inset:0; opacity:0; transition:opacity 1s ease;}
.slide.active{opacity:1;}
.slide .scene{position:absolute; inset:0; overflow:hidden;}
.slide .scene::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(59,47,42,.6) 0%, rgba(59,47,42,.28) 24%, rgba(59,47,42,0) 52%);
}
.slide-content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 48px 54px; max-width:600px; text-align:left;
}
.slide-content .banner-subtitle,
.topic-hero .banner-subtitle{
  color:var(--milk); opacity:.9; font-size:14px; line-height:1.7; text-wrap:balance;
}
.slide-content .banner-subtitle{margin:0 0 12px;}
.slide-content .banner-title,
.topic-hero .banner-title,
.ws-hero .banner-title{
  color:var(--milk); font-family:"Noto Serif TC","Noto Serif",serif; font-weight:600;
  font-size:clamp(28px,4.4vw,50px); line-height:1.25; text-wrap:balance; margin:0;
}
.hero-dots{position:absolute; bottom:24px; right:48px; display:flex; gap:10px; z-index:3;}
.hero-dots button{display:block; box-sizing:border-box; width:7px; height:7px; min-width:7px; min-height:7px; flex:0 0 7px; aspect-ratio:1; padding:0; border:none; border-radius:50%; appearance:none; background:var(--milk); opacity:.4;}
.hero-dots button.active{opacity:1;}
.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); background:none; border:none; z-index:3; font-size:22px; color:var(--milk); opacity:.7; padding:10px;}
.hero-arrow.prev{left:14px;} .hero-arrow.next{right:14px;}
.hero-arrow:hover{opacity:1;}
@media (max-width:640px){
  .slide-content{padding-bottom:64px;}
  .hero-dots{left:50%; right:auto; transform:translateX(-50%); bottom:16px;}
}

/* ---------- journal ---------- */
.journal-page{max-width:1120px; margin:0 auto; padding:88px 40px 112px;}
.journal-heading{max-width:620px; margin:0 auto 72px; text-align:center;}
.journal-heading h1{font-size:clamp(30px,4vw,46px); margin:10px 0 16px;}
.journal-heading p{margin:0; color:var(--cocoa-taupe);}
.journal-entry{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); align-items:center; gap:56px; padding:52px 0; border-top:1px solid var(--line); scroll-margin-top:100px;}
.journal-entry.reverse img{order:2;}
.journal-entry img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.journal-copy h2{font-size:clamp(24px,3vw,34px); margin:10px 0 18px;}
.journal-copy p{margin:0 0 22px; color:var(--cocoa-taupe);}
@media (max-width:720px){.journal-page{padding:56px 20px 72px;}.journal-heading{margin-bottom:44px;}.journal-entry{grid-template-columns:1fr; gap:24px; padding:34px 0;}.journal-entry.reverse img{order:0;}}

/* ---------- sections ---------- */
section{padding:96px 0;}
.section-inner{max-width:1320px; margin:0 auto; padding:0 40px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:24px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(22px,2.6vw,30px);}
.section-head .view-all{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cocoa-taupe); text-decoration:none; border-bottom:1px solid var(--cocoa-taupe); padding-bottom:2px;}

/* articles */
.articles{background:var(--milk-deep);}
.article-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:28px;}
@media (max-width:860px){.article-grid{grid-template-columns:1fr;}}
.article-card{display:flex; flex-direction:column; gap:16px; text-decoration:none; color:inherit;}
.article-media{aspect-ratio:4/3; border-radius:2px; position:relative; overflow:hidden; background:var(--blush-oat);}
.article-tag{position:absolute; top:14px; left:14px; background:var(--espresso); color:var(--milk); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; z-index:2;}
.article-date{font-size:12px; color:var(--cocoa-taupe); letter-spacing:.04em;}
.article-card h3{font-size:18px; line-height:1.5;}
.article-card.featured h3{font-size:22px;}
.article-excerpt{font-size:13.5px; color:var(--cocoa-taupe);}

/* IG wall */
.ig-head{text-align:center; max-width:560px; margin:0 auto 44px;}
.ig-head p{color:var(--cocoa-taupe); font-size:14px;}
.ig-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:6px;}
@media (max-width:860px){.ig-grid{grid-template-columns:repeat(3,1fr);}}
.ig-tile{aspect-ratio:1; position:relative; overflow:hidden; display:block; color:var(--milk); text-decoration:none;}
.ig-tile img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.ig-tile:hover img{transform:scale(1.06);}
.ig-tile .badge{position:absolute; bottom:8px; right:9px; font-family:"Cormorant Garamond",serif; font-size:12px; opacity:.9; letter-spacing:.04em; z-index:2; color:var(--milk); text-shadow:0 1px 6px rgba(0,0,0,.5);}
/* hashtag caption for an ig-tile that represents a specific tag rather
   than the brand's own feed (e.g. gemstones.html), in place of .badge */
.ig-tile .hash{
  position:absolute; left:9px; right:9px; bottom:8px; z-index:2;
  font-size:10.5px; letter-spacing:.03em; color:var(--milk);
  text-shadow:0 1px 6px rgba(0,0,0,.55);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* footer */
footer{background:var(--espresso); color:var(--milk); padding:72px 40px 32px;}
.footer-top{max-width:1320px; margin:0 auto 56px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
@media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr;}}
.footer-brand .wordmark{font-size:20px; color:var(--milk); line-height:1.05;}
.footer-brand .wm-sub{color:rgba(251,247,244,.55);}
.footer-brand p{color:rgba(251,247,244,.6); font-size:13.5px; max-width:280px; margin-top:14px;}
.footer-col h4{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,247,244,.55); font-weight:500; margin-bottom:16px;}
.footer-col a{display:block; color:var(--milk); text-decoration:none; font-size:14px; margin-bottom:10px; opacity:.9;}
.footer-col a:hover{opacity:1; text-decoration:underline;}
.footer-bottom{max-width:1320px; margin:0 auto; padding-top:26px; border-top:1px solid rgba(251,247,244,.14); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:12px; color:rgba(251,247,244,.5);}
@media (max-width:640px){
  footer{padding-top:48px; padding-bottom:24px;}
  .footer-top{display:block; margin-bottom:32px;}
  .footer-col{display:none;}
  .footer-brand p{max-width:300px;}
  .footer-tagline-keep{white-space:nowrap;}
  .footer-bottom{padding-top:20px;}
}

/* =========================================================
   Chat widget — redesigned (pill button + auto FAQ bubbles)
   ========================================================= */
.chat-fab{position:fixed; right:26px; bottom:26px; z-index:600; display:flex; flex-direction:column; align-items:flex-end; gap:12px;}
.chat-bubbles{display:flex; flex-direction:column; align-items:flex-end; gap:10px; max-width:280px;}
.chat-bubble{
  position:relative; background:var(--milk); border:1px solid var(--line); box-shadow:var(--shadow);
  border-radius:16px 16px 4px 16px; padding:14px 34px 14px 16px; font-size:13px; color:var(--espresso);
  opacity:0; transform:translateY(8px) scale(.98); transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.chat-bubble.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto; animation:chat-bubble-float 3.8s ease-in-out infinite;}
.chat-bubble.show:nth-child(2){animation-delay:-1.6s;}
.chat-bubble .q{font-weight:600; margin:0; padding-right:2px; transition:margin .25s ease;}
.chat-bubble .a,.chat-bubble a.go{max-height:0; margin-top:0; opacity:0; overflow:hidden; visibility:hidden; transform:translateY(-3px); transition:max-height .3s ease, margin .3s ease, opacity .22s ease, transform .3s ease, visibility 0s linear .3s;}
.chat-bubble .a{color:var(--cocoa-taupe); font-size:12.5px;}
.chat-bubble a.go{display:block; width:max-content; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--espresso); border-bottom:1px solid var(--espresso); text-decoration:none;}
.chat-bubble.expanded .q,.chat-bubble:focus-within .q{margin-bottom:4px;}
.chat-bubble.expanded .a,.chat-bubble.expanded a.go,.chat-bubble:focus-within .a,.chat-bubble:focus-within a.go{max-height:120px; opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;}
.chat-bubble.expanded a.go,.chat-bubble:focus-within a.go{margin-top:8px;}
@media (hover:hover) and (pointer:fine){
  .chat-bubble:hover .q{margin-bottom:4px;}
  .chat-bubble:hover .a,.chat-bubble:hover a.go{max-height:120px; opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;}
  .chat-bubble:hover a.go{margin-top:8px;}
}
@keyframes chat-bubble-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.chat-bubbles.panel-open{display:none;}
.chat-bubble .x{
  position:absolute; top:8px; right:8px; width:20px; height:20px; border-radius:50%;
  background:none; border:none; color:var(--cocoa-taupe); font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.chat-bubble .x:hover{color:var(--espresso); background:var(--milk-deep);}
.chat-panel{
  background:var(--milk); border:1px solid var(--line); box-shadow:var(--shadow);
  width:260px; padding:18px; border-radius:16px 16px 4px 16px;
  display:none; flex-direction:column; gap:10px;
}
.chat-panel.open{display:flex;}
.chat-panel .lead{font-size:13px; color:var(--cocoa-taupe); margin-bottom:4px;}
.chat-panel a{text-decoration:none; color:var(--espresso); font-size:13.5px; border:1px solid var(--line); padding:9px 12px; border-radius:8px;}
.chat-panel a:hover{border-color:var(--espresso);}
.chat-toggle{
  display:flex; align-items:center; gap:10px; height:52px; padding:0 20px 0 16px;
  border-radius:26px; background:var(--espresso); color:var(--milk); border:none;
  box-shadow:var(--shadow); font-size:13px; letter-spacing:.04em;
}
.chat-toggle .ig-ic{width:20px; height:20px; flex-shrink:0;}
.chat-toggle .ig-ic svg{width:100%; height:100%;}
.chat-toggle .dot{width:6px; height:6px; border-radius:50%; background:var(--dusty-rose); flex-shrink:0;}
@media (max-width:640px){
  .chat-fab{right:20px; bottom:20px; gap:10px;}
  .chat-bubbles{display:flex; max-width:min(280px,calc(100vw - 40px));}
  .chat-bubble{cursor:pointer; touch-action:manipulation;}
  .chat-toggle{width:48px; height:48px; padding:0; justify-content:center; border-radius:50%;}
  .chat-toggle > span:not(.ig-ic){display:none;}
  .chat-toggle .ig-ic{width:21px; height:21px;}
  .chat-panel{width:min(260px,calc(100vw - 40px));}
}
@media (prefers-reduced-motion:reduce){.chat-bubble.show{animation:none;}}

/* =========================================================
   Catalog page
   ========================================================= */
.page-head{padding:64px 0 20px; border-bottom:1px solid var(--line);}
.page-head-inner{max-width:1320px; margin:0 auto; padding:0 40px;}
.page-head h1{font-size:clamp(28px,3.4vw,40px); margin-bottom:26px;}
.collection-tabs{display:flex; gap:34px; flex-wrap:wrap;}
.collection-tabs a{
  color:var(--cocoa-taupe); text-decoration:none; font-size:13px; letter-spacing:.08em;
  text-transform:uppercase; padding-bottom:10px; border-bottom:2px solid transparent;
}
.collection-tabs a.active{color:var(--espresso); border-color:var(--espresso); font-weight:600;}

.controls{max-width:1320px; margin:0 auto; padding:22px 40px 8px; border-bottom:1px solid var(--line);}
.filter-bar{display:flex; flex-direction:column;}
.mobile-filter-tools,.filter-drawer-head,.filter-drawer-footer,.filter-drawer-scrim{display:none;}
.filter-group{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:14px 0; border-top:1px solid var(--line);}
.filter-group:first-child{border-top:none; padding-top:0;}
.filter-label{flex:0 0 auto; width:72px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cocoa-taupe);}
.desktop-search-field{display:flex; align-items:center; gap:9px; width:300px; max-width:100%; border:1px solid var(--line); background:var(--milk); padding:0 13px;}
.desktop-search-field svg{width:16px; height:16px; flex:0 0 auto; color:var(--cocoa-taupe);}
.product-search{min-width:0; width:100%; border:0; outline:0; background:transparent; padding:9px 0; color:var(--espresso); font-family:inherit; font-size:13px;}
.product-search::placeholder{color:var(--cocoa-taupe); opacity:.75;}
.chip-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-start;}
.chip-row button{background:none; border:1px solid var(--line); color:var(--cocoa-taupe); font-size:11.5px; padding:6px 13px; border-radius:20px; letter-spacing:.03em;}
.chip-row button.active{border-color:var(--espresso); color:var(--espresso); background:var(--milk-deep);}
.gem-row{display:flex; gap:8px; align-items:center;}
.gem-dot{width:18px; height:18px; border-radius:50%; border:1px solid var(--line); padding:0;}
.gem-dot.active{outline:2px solid var(--espresso); outline-offset:2px;}

@media (max-width:640px){
  .page-head{padding:46px 0 0;}
  .page-head h1{margin-bottom:22px;}
  .collection-tabs{
    flex-wrap:nowrap; gap:28px; overflow-x:auto; overscroll-behavior-x:contain;
    margin:0 -1.25rem; padding:0 1.25rem 1px; scroll-padding-left:1.25rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .collection-tabs::-webkit-scrollbar{display:none;}
  .collection-tabs a{flex:0 0 auto; white-space:nowrap;}

  .controls{position:relative; padding-top:16px; padding-bottom:16px;}
  .mobile-filter-tools{display:flex; align-items:center; gap:10px;}
  .mobile-search-field{
    display:flex; align-items:center; flex:1; min-width:0; height:46px; gap:10px;
    padding:0 14px; background:var(--milk); border:1px solid var(--line); border-radius:2px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .mobile-search-field:focus-within{border-color:var(--cocoa-taupe); box-shadow:0 0 0 3px rgba(122,98,88,.08);}
  .mobile-search-field svg{width:18px; height:18px; flex:0 0 auto; color:var(--cocoa-taupe);}
  .mobile-search-field .product-search{height:44px; padding:0; font-size:13px;}
  .filter-drawer-open{
    display:flex; align-items:center; justify-content:center; flex:0 0 46px; width:46px; height:46px;
    border:1px solid var(--line); border-radius:2px; background:var(--milk); color:var(--espresso);
    transition:background .2s ease, border-color .2s ease;
  }
  .filter-drawer-open:hover,.filter-drawer-open:focus-visible{background:var(--milk-deep); border-color:var(--cocoa-taupe);}
  .filter-drawer-open svg{width:21px; height:21px;}

  .filter-drawer-scrim{
    display:block; position:fixed; inset:0; z-index:998; margin:0; padding:0; border:0;
    background:rgba(59,47,42,.36); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .filter-drawer-scrim.open{opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;}
  .filter-bar{
    display:flex; position:fixed; top:0; right:0; z-index:999; width:min(88vw,380px); height:100vh; height:100dvh;
    padding:0 22px 24px; overflow-y:auto; background:var(--milk); box-shadow:-24px 0 60px rgba(59,47,42,.16);
    transform:translateX(102%); visibility:hidden; pointer-events:none;
    transition:transform .36s cubic-bezier(.22,.75,.2,1), visibility 0s linear .36s;
  }
  .filter-bar.open{transform:translateX(0); visibility:visible; pointer-events:auto; transition-delay:0s;}
  .filter-drawer-head{
    display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:2;
    margin:0 -22px; padding:22px; background:var(--milk); border-bottom:1px solid var(--line);
  }
  .filter-drawer-head .eyebrow{display:block; margin-bottom:3px;}
  .filter-drawer-head h2{margin:0; font-size:22px;}
  .filter-drawer-close{display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:50%; background:none; color:var(--espresso);}
  .filter-drawer-close svg{width:18px; height:18px;}
  .filter-search-group{display:none;}
  .filter-group{align-items:flex-start; flex-direction:column; gap:13px; padding:22px 0;}
  .filter-drawer-head + .filter-group{border-top:0;}
  .filter-label{width:auto; font-size:11px;}
  .chip-row{gap:9px 8px;}
  .chip-row button{padding:7px 14px;}
  .gem-row{gap:14px; padding:5px 3px;}
  .gem-dot{width:22px; height:22px;}
  .filter-drawer-footer{display:block; position:sticky; bottom:-24px; margin:8px -22px -24px; padding:16px 22px calc(16px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(251,247,244,.88),var(--milk) 24%);}
  .filter-drawer-footer button{width:100%; border:0; background:var(--espresso); color:var(--milk); padding:13px 18px; font-family:inherit; font-size:12px; letter-spacing:.1em;}
  body.filter-drawer-open{overflow:hidden;}
}

.catalog{max-width:1320px; margin:0 auto; padding:36px 40px 80px;}
/* grid-auto-flow:dense lets the regular product cards backfill any gaps
   left around the Guide card once it claims a specific block of cells
   (see .guide-card-v / .guide-card-big below) instead of leaving holes. */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:row dense; gap:26px 22px;}
@media (max-width:900px){.product-grid{grid-template-columns:repeat(2,1fr);}}
.product-card{text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px;}
.product-media{aspect-ratio:3/4; position:relative; overflow:hidden; background:var(--blush-oat);}
/* Multiple product photos are stacked and cross-faded (JS in main.js
   adds a second <img> plus the prev/next/dot controls below); only the
   .active slide is visible, so this also works unchanged for the rare
   product with just one photo. */
.product-media img, .product-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s ease, transform .5s ease;}
.product-media img.active, .product-media video.active{opacity:1;}
.product-card:hover .product-media img.active, .product-card:hover .product-media video.active{transform:scale(1.04);}
.product-tag{position:absolute; top:10px; left:10px; background:var(--milk); color:var(--espresso); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; z-index:2;}
.media-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%;
  background:rgba(59,47,42,.55); color:var(--milk); border:none; display:flex; align-items:center;
  justify-content:center; z-index:3; opacity:0; transition:opacity .2s ease; cursor:pointer; padding:0;
}
.product-card:hover .media-nav{opacity:1;}
.media-nav.prev{left:8px;}
.media-nav.next{right:8px;}
.media-nav svg{width:13px; height:13px;}
.media-dots{position:absolute; bottom:9px; left:0; right:0; display:flex; justify-content:center; gap:5px; z-index:3;}
.media-dots span{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55); transition:background .2s ease;}
.media-dots span.active{background:var(--milk);}
.product-series{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cocoa-taupe);}
.product-name{font-size:14.5px; font-weight:500;}
.product-price{font-size:13px; color:var(--espresso); font-variant-numeric:tabular-nums;}
/* Jewellery / redesign tab: the single-row Guide card now mirrors
   .product-card — a media block on top, then the three text lines below —
   so "Guide / 標題 / 閱讀指南" line up row-for-row with a product card's
   series / name / price. .gc-media takes flex:1, and because CSS Grid gives
   every card in the row the same height while the text blocks beneath them
   are the same height, the Guide image ends up exactly as tall as the
   product image beside it — no aspect-ratio or JS height sync needed. */
.guide-card{
  grid-column:span 2; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:10px;
}
.guide-card .gc-media{position:relative; flex:1; min-height:0; overflow:hidden; background:var(--cocoa-taupe);}
.guide-card img.bg-photo{z-index:0;}
.guide-card .gc-inner{display:flex; flex-direction:column; gap:10px;}
/* caption lines match .product-card's series / name / price exactly
   (same font-size + line-height, no extra box on the CTA) so .gc-inner
   is the same height as a product card's text block — which is what makes
   the Guide image end level with the product image beside it. */
.guide-card .eyebrow{color:var(--cocoa-taupe); font-size:11px;}   /* == .product-series */
.guide-card h3{color:var(--espresso); font-size:14.5px; font-weight:600; margin:0;}   /* == .product-name */
.product-card .cta,
.guide-card .cta{
  display:inline-block; align-self:flex-start; color:var(--cocoa-taupe);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;   /* == .product-price */
  text-decoration:underline; text-underline-offset:3px;
}
@media (max-width:900px){
  .guide-card{grid-column:span 2;}
  .guide-card .gc-media{flex:none; aspect-ratio:3/2;}
}

/* Engagement & Bridal (col 1, rows 2–3) and Bespoke (cols 3–4, rows 2–3)
   tabs: same image-on-top / caption-below treatment as the single-row card,
   only the grid footprint differs. The block still spans two product rows,
   so .gc-media (flex:1) grows until its bottom edge lines up with the
   product image beside it, and the three text lines drop onto the
   series / name / price baseline of the lower row's product cards. */
.guide-card.guide-card-v{grid-column:1; grid-row:2 / span 2;}
.guide-card.guide-card-big{grid-column:3 / span 2; grid-row:2 / span 2;}
@media (max-width:900px){
  .guide-card.guide-card-v,
  .guide-card.guide-card-big{grid-column:span 2; grid-row:auto;}
}

#loadMoreZone{display:flex; flex-direction:column; align-items:center; gap:12px; padding:50px 0 0; grid-column:1/-1; color:var(--cocoa-taupe); font-size:12.5px; letter-spacing:.06em;}
.spinner{width:22px;height:22px;border-radius:50%;border:1px solid var(--line); border-top-color:var(--dusty-rose-deep); animation:spin 1s linear infinite;}

/* =========================================================
   Appointment page
   ========================================================= */
.meet{max-width:1320px; margin:0 auto; padding:80px 40px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media (max-width:860px){.meet{grid-template-columns:1fr; padding:56px 24px;}}
.meet-media{aspect-ratio:4/5; overflow:hidden; position:relative;}
.meet-media img{width:100%; height:100%; object-fit:cover;}
.meet-text h1{font-size:clamp(24px,3vw,32px); margin:12px 0 20px;}
.meet-text p{color:var(--cocoa-taupe); font-size:14.5px; margin-bottom:16px;}
.signature{font-family:"Cormorant Garamond",serif; font-style:italic; font-size:17px; margin-top:18px; color:var(--espresso);}

/* Bespoke making process — editorial alternating image/text rows with an
   oversized numeral per step. Sits between "Meet Ashley" and the buyer's
   "Process" steps. */
.make{padding:96px 0 24px;}
.make > .section-inner{margin-bottom:4px;}
.make > .section-inner .eyebrow{margin-bottom:8px;}
.make > .section-inner h2{font-size:clamp(24px,3vw,34px);}
.make-row{
  max-width:1320px; margin:0 auto; padding:56px 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.make-row.reverse{direction:rtl;}
.make-row.reverse > *{direction:ltr;}
.make-media{aspect-ratio:4/3; overflow:hidden; background:var(--blush-oat);}
.make-media img{width:100%; height:100%; object-fit:cover;}
.make-num{
  display:block; font-family:"Cormorant Garamond","Noto Serif TC",serif;
  font-weight:600; font-size:clamp(52px,7vw,86px); line-height:1;
  color:var(--blush-oat); margin-bottom:4px;
}
.make-text h3{font-size:clamp(19px,2.2vw,24px); margin:0 0 12px;}
.make-text p{color:var(--cocoa-taupe); font-size:14.5px; margin:0; max-width:42ch;}
@media (max-width:860px){
  .make{padding:64px 0 8px;}
  .make-row, .make-row.reverse{grid-template-columns:1fr; direction:ltr; gap:22px; padding:36px 24px;}
  .make-text p{max-width:none;}
}

/* Buyer's process — full-width tinted band, but the heading and the six
   step cards sit in the same 1320px / 40px-gutter column as the "make"
   section above, so their left and right edges line up. */
.process{background:var(--milk-deep); padding:88px 0;}
.process > .eyebrow,
.process > h2,
.process > .stepper{max-width:1320px; margin-left:auto; margin-right:auto; padding-left:40px; padding-right:40px;}
.process > .eyebrow{margin-bottom:8px;}
.process > h2{font-size:clamp(22px,2.6vw,30px);}
.stepper{margin-top:44px; display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
@media (max-width:1100px){.stepper{grid-template-columns:repeat(3,1fr);}}
@media (max-width:860px){
  .process > .eyebrow,
  .process > h2,
  .process > .stepper{padding-left:24px; padding-right:24px;}
}
@media (max-width:640px){.process{padding:64px 0;} .stepper{grid-template-columns:1fr 1fr;}}
.step{background:var(--milk); border:1px solid var(--line); padding:22px 18px; display:flex; flex-direction:column; gap:12px; position:relative;}
.step.current{border-color:var(--espresso);}
.step .num{font-size:11px; color:var(--cocoa-taupe); letter-spacing:.08em;}
.step .ic{width:30px; height:30px; color:var(--espresso);}
.step h4{font-size:14px;}
.step p{font-size:12px; color:var(--cocoa-taupe); margin:0;}

/* Consultation CTA — closing section, dark, points to Instagram DM. */
.consult{background:var(--espresso); color:var(--milk); text-align:center; padding:96px 40px;}
.consult-inner{max-width:620px; margin:0 auto;}
.consult .eyebrow{color:var(--milk); opacity:.7; margin-bottom:10px;}
.consult h2{color:var(--milk); font-size:clamp(24px,3vw,34px); margin:0 0 16px;}
.consult p{color:var(--milk); opacity:.82; font-size:14.5px; margin:0 auto 28px; max-width:52ch;}
.consult-btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 30px;
  background:var(--milk); color:var(--espresso); text-decoration:none;
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s ease;
}
.consult-btn svg{width:18px; height:18px;}
.consult-btn:hover{background:var(--blush-oat);}
.consult-handle{margin-top:18px; font-size:13px; letter-spacing:.06em; color:var(--milk); opacity:.6;}
@media (max-width:640px){.consult{padding:64px 24px;}}

/* =========================================================
   Workshop page
   ========================================================= */
.ws-hero{
  position:relative; min-height:52vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--milk); overflow:hidden; border-bottom:1px solid var(--line);
}
.ws-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(59,47,42,.35), rgba(59,47,42,.55));
}
.ws-hero .content{position:relative; z-index:2; width:100%; min-width:0; max-width:660px; padding:0 24px;}
.ws-hero .cta{display:inline-block; padding:13px 32px; background:var(--milk); color:var(--espresso); text-decoration:none; font-size:12px; letter-spacing:.12em; text-transform:uppercase;}

.ws-row{max-width:1320px; margin:0 auto; padding:84px 40px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.ws-row.reverse{direction:rtl;}
.ws-row.reverse > *{direction:ltr;}
@media (max-width:860px){.ws-row, .ws-row.reverse{grid-template-columns:1fr; direction:ltr; padding:56px 24px;}}
.ws-media{aspect-ratio:4/3; overflow:hidden;}
.ws-media img{width:100%; height:100%; object-fit:cover;}
.ws-row h2{font-size:clamp(20px,2.4vw,27px); margin:12px 0 16px;}
.ws-row p{color:var(--cocoa-taupe); font-size:14.5px;}

.ws-info{background:var(--milk-deep); padding:80px 0;}
.ws-info-inner{max-width:900px; margin:0 auto; padding:0 40px;}
.info-list{border-top:1px solid var(--line);}
.info-row{display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); font-size:14px;}
.info-row span:first-child{color:var(--cocoa-taupe);}
@media (max-width:640px){
  .info-row{align-items:flex-start; gap:16px;}
  .info-row span:first-child{flex:0 0 auto; white-space:nowrap;}
  .info-row span:last-child{min-width:0; text-align:right;}
  .info-row.location-row span:last-child{flex:0 1 210px; width:210px; line-height:1.65; overflow-wrap:break-word;}
}
.instructor{display:flex; align-items:center; gap:16px; margin-top:36px;}
.instructor .av{width:52px;height:52px;border-radius:50%; overflow:hidden; flex-shrink:0;}
.instructor .av img{width:100%; height:100%; object-fit:cover;}
.instructor p{margin:0; font-size:13px; color:var(--cocoa-taupe);}

.modal-overlay{position:fixed; inset:0; background:rgba(59,47,42,.55); display:none; align-items:center; justify-content:center; z-index:800; padding:24px;}
.modal-overlay.open{display:flex;}
.modal-card{background:var(--milk); max-width:420px; width:100%; padding:34px; position:relative;}
.modal-close{position:absolute; top:16px; right:16px; background:none; border:none; font-size:18px; color:var(--cocoa-taupe);}
.modal-card h3{font-size:19px; margin-bottom:8px;}
.modal-card p.lead{color:var(--cocoa-taupe); font-size:13px; margin-bottom:20px;}
.modal-card label{display:block; font-size:12px; color:var(--cocoa-taupe); margin-bottom:6px; margin-top:14px;}
.modal-card input, .modal-card select{width:100%; border:1px solid var(--line); background:none; padding:10px 12px; font-family:inherit; font-size:13.5px; color:var(--espresso);}
/* The card itself sits on the light --milk background, not the dark
   backdrop behind it, so it needs the standard dark-on-light cursor —
   otherwise it inherits the light cursor meant for that dark backdrop
   straight through from .modal-overlay above. #modalSubmit is the one
   exception: its own background is --espresso (dark), so it keeps the
   light cursor for contrast there. */
.modal-card, .modal-card *{cursor:url('../mouse-cursor.png') 0 0, auto;}
.modal-card a, .modal-card button{cursor:url('../mouse-cursor.png') 0 0, pointer;}
#modalSubmit{margin-top:22px; width:100%; padding:12px; background:var(--espresso); color:var(--milk); border:none; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; cursor:url('../mouse-cursor-light.png') 0 0, pointer;}
#modalThanks{display:none; text-align:center; padding:20px 0;}
#modalThanks.show{display:block;}

/* =========================================================
   Member center
   ========================================================= */
.member-shell{max-width:1320px; margin:0 auto; padding:56px 40px 90px; display:grid; grid-template-columns:260px 1fr; gap:50px;}
@media (max-width:860px){.member-shell{grid-template-columns:1fr; padding:40px 24px 70px;}}
.member-side{position:sticky; top:100px; align-self:start;}
.member-id{display:flex; align-items:center; gap:14px; margin-bottom:28px;}
.avatar{width:52px;height:52px;border-radius:50%; background:var(--dusty-rose); color:var(--milk); display:flex; align-items:center; justify-content:center; font-family:"Cinzel Decorative",serif; font-size:14px;}
.member-id .since{font-size:12px; color:var(--cocoa-taupe);}
.member-nav{display:flex; flex-direction:column; gap:2px;}
.member-nav button{text-align:left; background:none; border:none; padding:12px 4px; font-size:14px; color:var(--cocoa-taupe); border-left:2px solid transparent;}
.member-nav button.active{color:var(--espresso); border-color:var(--espresso); font-weight:600;}
.member-nav button.danger{color:var(--dusty-rose-deep); margin-top:18px; border-top:1px solid var(--line); padding-top:18px;}
.member-panel{display:none; padding:0;}
.member-panel.active{display:block;}
.member-main h2{font-size:22px; margin-bottom:30px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media (max-width:640px){.form-grid{grid-template-columns:1fr;}}
.form-grid.full, .field.full{grid-column:1/-1;}
.field label{display:block; font-size:12px; color:var(--cocoa-taupe); margin-bottom:7px;}
.field input, .field select{width:100%; border:1px solid var(--line); background:none; padding:11px 13px; font-family:inherit; font-size:13.5px; color:var(--espresso);}
.save-btn{margin-top:26px; padding:12px 32px; background:var(--espresso); color:var(--milk); border:none; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;}
.flash-note{font-size:12.5px; color:var(--dusty-rose-deep); margin-left:14px; opacity:0; transition:opacity .3s;}
.flash-note.show{opacity:1;}
.order-tabs{display:flex; gap:26px; border-bottom:1px solid var(--line); margin-bottom:24px;}
.order-tabs button{background:none; border:none; padding:0 0 12px; font-size:13px; color:var(--cocoa-taupe); border-bottom:2px solid transparent;}
.order-tabs button.active{color:var(--espresso); border-color:var(--espresso); font-weight:600;}
.order-row{display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.order-status{font-size:11px; padding:4px 10px; border-radius:20px; letter-spacing:.04em;}
.order-status.done{background:#DDEBD9; color:#3C5A38;}
.order-status.progress{background:var(--blush-oat); color:var(--espresso);}
.order-status.pending{background:var(--milk-deep); color:var(--cocoa-taupe);}
.bespoke-case{border:1px solid var(--line); padding:22px;}
.bespoke-progress-track{height:5px; background:var(--milk-deep); margin:16px 0 8px; position:relative;}
.bespoke-progress{height:100%; background:var(--dusty-rose-deep); width:78%;}

/* =========================================================
   Auth page
   ========================================================= */
.auth-wrap{min-height:calc(100vh - 74px); display:flex; align-items:center; justify-content:center; padding:60px 24px; background:var(--milk-deep);}
.auth-card{background:var(--milk); box-shadow:var(--shadow); width:100%; max-width:440px; padding:44px 38px;}
.auth-tabs{display:flex; gap:0; margin-bottom:30px; border-bottom:1px solid var(--line);}
.auth-tabs button{flex:1; background:none; border:none; padding:0 0 14px; font-size:13.5px; letter-spacing:.06em; color:var(--cocoa-taupe); border-bottom:2px solid transparent;}
.auth-tabs button.active{color:var(--espresso); border-color:var(--espresso); font-weight:600;}
.auth-panel{display:none;}
.auth-panel.active{display:block;}
.auth-panel .field{margin-bottom:16px;}
.auth-panel .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.auth-submit{width:100%; margin-top:8px; padding:13px; background:var(--espresso); color:var(--milk); border:none; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;}
.auth-forgot{display:block; text-align:center; margin-top:16px; font-size:12.5px; color:var(--cocoa-taupe); text-decoration:none;}
.auth-fine{font-size:11.5px; color:var(--cocoa-taupe); margin-top:18px; text-align:center;}

/* =========================================================
   Product detail page
   ========================================================= */
.product-detail{max-width:1320px; margin:0 auto; padding:44px 40px 90px;}
.pd-back{display:inline-block; margin-bottom:28px; font-size:12.5px; letter-spacing:.04em; color:var(--cocoa-taupe); text-decoration:none;}
.pd-back:hover{color:var(--espresso);}
.pd-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start;}
@media (max-width:900px){.pd-grid{grid-template-columns:1fr; gap:32px;}}

.pd-gallery{position:sticky; top:96px;}
@media (max-width:900px){.pd-gallery{position:static;}}
.pd-main{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--blush-oat);}
.pd-main img, .pd-main video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none;}
.pd-main img.active, .pd-main video.active{opacity:1; pointer-events:auto;}
/* The gallery's own controls are always visible (unlike the hover-only
   ones on a catalog card thumbnail), and sized up a little to match a
   full-size gallery rather than a small card. */
.pd-main .media-nav{opacity:1; width:34px; height:34px;}
.pd-main .media-nav svg{width:16px; height:16px;}
.pd-main .media-dots{bottom:14px;}
.pd-main .media-dots span{width:6px; height:6px;}

.pd-info{padding-top:6px; width:100%; min-width:0;}
.pd-info h1{font-size:clamp(26px,2.6vw,34px); margin:8px 0 14px;}
.pd-price{font-size:19px; color:var(--espresso); margin-bottom:22px;}
.pd-desc{width:100%; max-width:none; font-size:14px; line-height:1.8; color:var(--cocoa-taupe); margin-bottom:28px;}
.pd-specs{width:100%; margin:0 0 28px; border-top:1px solid var(--line);}
.pd-spec-row{display:grid; grid-template-columns:110px minmax(0,1fr); gap:24px; padding:13px 0; border-bottom:1px solid var(--line);}
.pd-spec-row dt{font-size:12px; color:var(--cocoa-taupe);}
.pd-spec-row dd{margin:0; min-width:0; font-size:13px; color:var(--espresso); text-align:right; overflow-wrap:anywhere;}
.pd-option{display:flex; align-items:center; gap:22px; margin-bottom:30px;}
/* No border-top here — this block always follows an .info-list, whose
   last row already draws a bottom border; adding another right under it
   just doubled the divider line. */
.pd-care{padding-top:20px; margin-bottom:28px;}
.pd-care h2,
.pd-care h3{font-size:13px; letter-spacing:.06em; margin-bottom:8px;}
.pd-care p{font-size:13.5px; line-height:1.8; color:var(--cocoa-taupe); margin:0;}
.pd-cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px;}
.pd-cta-primary{
  background:var(--espresso); color:var(--milk); border:none; padding:14px 34px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
}
.pd-cta-primary:disabled{opacity:.6; cursor:default;}
a.pd-cta-primary{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
.pd-cta-secondary{
  display:inline-flex; align-items:center; border:1px solid var(--line); color:var(--espresso);
  padding:14px 26px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
}
.pd-cta-secondary:hover{border-color:var(--espresso);}
.pd-note{width:100%; max-width:none; font-size:12px; color:var(--cocoa-taupe); line-height:1.7; border-top:1px solid var(--line); padding-top:18px;}

@media (max-width:640px){
  .product-detail,.pd-grid,.pd-info{width:100%; min-width:0;}
  .pd-desc,.pd-note{width:100%; max-width:none;}
  .pd-spec-row{grid-template-columns:88px minmax(0,1fr); gap:18px;}
  .pd-cta-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); width:100%;}
  .pd-cta-primary,.pd-cta-secondary{width:100%; min-width:0; justify-content:center; padding-left:12px; padding-right:12px; text-align:center;}
}

.pd-related{margin-top:88px;}
.pd-related h2{font-size:20px; margin-bottom:24px;}

/* Gemstone detail page: unlike product.html (where the info column also
   carries a price and size picker), there's nothing else competing for
   width here, so the description, both CTA buttons, the divider and the
   note below all run the full width of the column instead of stopping at
   a 46ch reading measure partway across. */
.gem-detail .pd-desc,
.gem-detail .pd-note{max-width:none;}
.gem-detail .pd-cta-row{display:grid; grid-template-columns:1fr 1fr;}
.gem-detail .pd-cta-primary,
.gem-detail .pd-cta-secondary{width:100%; min-width:0; justify-content:center; text-align:center;}
@media (max-width:520px){.gem-detail .pd-cta-row{grid-template-columns:1fr;}}

/* Service redesign case detail */
.redesign-detail .pd-desc,
.redesign-detail .pd-note{max-width:none;}
.redesign-facts{margin-bottom:28px;}
.redesign-story h2{font-size:17px; letter-spacing:.04em; margin:0 0 10px;}
.redesign-detail .pd-related .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){.redesign-detail .pd-related .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.redesign-detail .pd-related .product-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px;}}

/* ---------- topic pages (Gemstones / Service Redesign) ----------
   Same catalogue grid as the shop, topped by a full-bleed image
   banner. Gemstone tiles deep-link to their Instagram hashtag page
   (no live feed — matches the homepage IG wall). */
.topic-hero{
  position:relative; min-height:52vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--milk); overflow:hidden; border-bottom:1px solid var(--line);
}
.topic-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(59,47,42,.32), rgba(59,47,42,.58));
}
.topic-hero .th-inner{position:relative; z-index:2; width:100%; min-width:0; max-width:760px; padding:0 28px;}
.topic-hero .banner-subtitle{margin:14px 0 0;}

/* Shop banner: sits above the existing .page-head (tabs + filters), so it
   runs a little shorter than the standalone topic heroes and the head
   below it drops its big top gap. */
.shop-hero{min-height:52vh;}
.shop-hero + .page-head{padding-top:36px;}

.topic-section{max-width:1320px; margin:0 auto; padding:44px 40px 80px;}
.topic-intro{max-width:560px; margin:0 auto 40px; text-align:center;}
.topic-intro .eyebrow{margin-bottom:8px;}
.topic-intro p{color:var(--cocoa-taupe); font-size:14px;}
@media (max-width:900px){.topic-section{padding:32px 20px 60px;}}

.gem-card{text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:9px;}
.gem-media{aspect-ratio:1; position:relative; overflow:hidden; background:var(--blush-oat);}
.gem-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gem-card:hover .gem-media img{transform:scale(1.05);}
.gem-name{font-family:"Noto Serif TC","Noto Serif",serif; font-size:15px; font-weight:600;}
.gem-hash{font-size:11.5px; letter-spacing:.04em; color:var(--dusty-rose-deep);}

/* Gemstone product row — one row of four (image + name + 2-line description,
   the description clamped to two lines with an ellipsis). */
.gem-row-4{display:grid; grid-template-columns:repeat(4,1fr); gap:28px 22px;}
@media (max-width:900px){.gem-row-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.gem-row-4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 14px;}}
.gem-prod{text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:10px;}
.gem-prod-media{aspect-ratio:1; overflow:hidden; background:var(--blush-oat);}
.gem-prod-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.gem-prod:hover .gem-prod-media img{transform:scale(1.04);}
.gem-prod-name{font-family:"Noto Serif TC","Noto Serif",serif; font-size:15.5px; font-weight:600;}
.gem-prod-desc{
  margin:0; font-size:12.5px; line-height:1.7; color:var(--cocoa-taupe);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
/* second block heading (Instagram hashtags) sits below the product row */
.gem-ig-head{margin-top:60px;}

/* ---------- mobile content gutter ----------
   Several sections still carry their desktop/tablet horizontal padding
   (24px–40px) down to phone widths, so the left/right edge felt tighter
   than the header/nav (which already sit at 20px). Longhand overrides
   here touch only padding-left/right — each section's own top/bottom
   padding above is untouched — so every full-width section lines up to
   the same 1.25rem (20px) gutter on phones. */
@media (max-width:640px){
  .page-head-inner,
  .controls,
  .catalog,
  .section-inner,
  footer,
  .meet,
  .make-row, .make-row.reverse,
  .process > .eyebrow, .process > h2, .process > .stepper,
  .consult,
  .ws-hero .content,
  .ws-row, .ws-row.reverse,
  .ws-info-inner,
  .member-shell,
  .auth-wrap,
  .product-detail,
  .topic-hero .th-inner,
  .hero .slide-content{
    padding-left:1.25rem;
    padding-right:1.25rem;
  }
}