*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --dark:#1a1a2e;--dark2:#16213e;--dark3:#0f0f23;
  --ivory:#faf8f5;--ivory2:#f5f0ea;--cream:#ede8e0;
  --teal:#0d7377;--teal-light:#e6f3f3;--teal-dark:#095456;
  --gold:#c9a84c;--gold-light:#f8f1dc;--gold-muted:#a08838;
  --rose:#d4536d;--rose-light:#fce8ed;
  --text:#2d2d3a;--text-light:#6b6b7b;--text-muted:#9b9bab;
  --border:rgba(0,0,0,.06);
  --fd:'Cormorant Garamond','LXGW WenKai TC','Noto Serif TC',Georgia,serif;
  --fb:'DM Sans','Noto Serif TC','LXGW WenKai TC',sans-serif;
  --shadow:0 4px 24px rgba(0,0,0,.06);
  --shadow-lift:0 16px 48px rgba(0,0,0,.1);
  --radius:16px;--radius-lg:24px;
  --ease:cubic-bezier(.4,0,.2,1);
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--fb);color:var(--text);background:var(--ivory);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:color .3s var(--ease)}
ul{list-style:none}
button{border:none;background:none;cursor:pointer;font-family:inherit}

/* grain */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.015;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ══════ HEADER ══════ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all .5s var(--ease)}
.hdr--top{background:transparent}
.hdr--scroll{background:rgba(250,248,245,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,0,0,.04);box-shadow:0 1px 20px rgba(0,0,0,.05)}
.hdr-inner{max-width:1400px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:72px}
.hdr-inner>.logo{grid-column:1;justify-self:start}
.hdr-inner>.nav{grid-column:2;justify-self:center}
.hdr-inner>.hdr-act{grid-column:3;justify-self:end}
.logo{display:flex;align-items:center;gap:12px}
.logo-m{font-family:var(--fd);font-size:26px;font-weight:300;font-style:italic;letter-spacing:2px;transition:color .4s}
.hdr--top .logo-m{color:#fff}
.hdr--scroll .logo-m{color:var(--teal)}
.logo-d{width:1px;height:18px;transition:background .4s}
.hdr--top .logo-d{background:rgba(255,255,255,.3)}
.hdr--scroll .logo-d{background:var(--cream)}
.logo-s{font-size:9px;letter-spacing:4px;text-transform:uppercase;font-weight:500;transition:color .4s}
.hdr--top .logo-s{color:rgba(255,255,255,.6)}
.hdr--scroll .logo-s{color:var(--text-muted)}

.nav{display:flex;gap:4px}
.nav a{padding:10px 18px;font-size:13px;font-weight:500;letter-spacing:.8px;border-radius:8px;transition:all .3s var(--ease);position:relative}
.nav a::after{content:'';position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:0;height:1.5px;transition:width .3s var(--ease);border-radius:1px}
.hdr--top .nav a{color:rgba(255,255,255,.7)}
.hdr--top .nav a:hover,.hdr--top .nav a.active{color:#fff}
.hdr--top .nav a::after{background:#fff}
.hdr--scroll .nav a{color:var(--text-light)}
.hdr--scroll .nav a:hover,.hdr--scroll .nav a.active{color:var(--teal)}
.hdr--scroll .nav a::after{background:var(--teal)}
.nav a:hover::after,.nav a.active::after{width:20px}

.hdr-act{display:flex;align-items:center;gap:6px}
.hb{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .3s;position:relative}
.hb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hdr--top .hb{color:rgba(255,255,255,.7)}
.hdr--top .hb:hover{color:#fff;background:rgba(255,255,255,.1)}
.hdr--scroll .hb{color:var(--text-light)}
.hdr--scroll .hb:hover{color:var(--teal);background:var(--teal-light)}
.cart-d{position:absolute;top:7px;right:7px;width:6px;height:6px;background:var(--rose);border-radius:50%}

.mt{display:none;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center}
.mt svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}

/* mobile nav */
.mn{display:none;position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:0;transition:opacity .35s}
.mn.open{pointer-events:auto;opacity:1}
.mn-bk{position:absolute;inset:0;background:rgba(26,26,46,.5);backdrop-filter:blur(4px)}
.mn-p{position:absolute;top:0;right:0;width:300px;height:100%;background:var(--ivory);padding:32px;display:flex;flex-direction:column;gap:4px;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.1)}
.mn.open .mn-p{transform:none}
.mn-cl{align-self:flex-end;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.mn-cl svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:1.6;stroke-linecap:round}
.mn a{display:block;padding:16px 20px;border-radius:12px;font-size:15px;font-weight:500;color:var(--text);transition:all .3s}
.mn a:hover{background:var(--teal-light);color:var(--teal)}

@media(max-width:860px){.nav{display:none}.mt{display:flex}.mn{display:block}.hdr-inner{padding:0 20px;height:60px}}

/* ══════ HERO FULLSCREEN ══════ */
.hero{position:relative;height:100vh;min-height:600px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-bg{position:absolute;inset:0;display:flex;transition:transform .8s var(--ease)}
.hero-bg-slide{min-width:100%;height:100%;position:relative}
.hero-bg-slide .bg-fill{position:absolute;inset:0}
.hbg1{background:linear-gradient(135deg,#1a3a4a 0%,#0d5058 30%,#0d7377 60%,#1a9ca0 100%)}
.hbg2{background:linear-gradient(135deg,#2e1a3a 0%,#4a2060 40%,#7c3aed 100%)}
.hbg3{background:linear-gradient(135deg,#3a2a1a 0%,#8b6f3a 40%,#c9a84c 100%)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.4) 100%);z-index:1}
.hero-content{position:relative;z-index:2;text-align:center;color:#fff;max-width:900px;padding:0 40px}
.hero-tag{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);padding:8px 20px;border-radius:24px;font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:2px;color:rgba(255,255,255,.8)}
.hero-tag .td{width:5px;height:5px;background:var(--gold);border-radius:50%}
.hero-h{font-family:var(--fd);font-size:clamp(40px,7vw,88px);font-weight:300;line-height:1.15;letter-spacing:0;margin-bottom:24px}
.hero-h em{font-style:normal;font-weight:400}
em[lang="en"]{font-style:italic}
.hero-p{font-size:17px;font-weight:300;color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 40px;line-height:1.85}
.hero-cta{display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--dark);padding:16px 40px;border-radius:40px;font-size:13px;font-weight:600;letter-spacing:1px;transition:all .4s var(--ease)}
.hero-cta:hover{background:var(--gold);color:#fff;transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.2)}
.hero-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s}
.hero-cta:hover svg{transform:translateX(4px)}
.hero-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:10px;letter-spacing:2px;text-transform:uppercase}
.hero-scroll .sc-line{width:1px;height:40px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:1;transform:scaleY(1)}50%{opacity:.4;transform:scaleY(.6)}}
.hero-dots{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.hero-dot{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.3);cursor:pointer;transition:all .4s}
.hero-dot.active{background:#fff;width:28px}

/* ══════ CATEGORY BAR ══════ */
.catbar{background:var(--dark);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.catbar-inner{max-width:1400px;margin:0 auto;display:flex;align-items:stretch;min-height:56px}
.catbar a{flex:1;min-width:160px;display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.65);font-size:13px;font-weight:500;letter-spacing:1px;padding:0 24px;white-space:nowrap;transition:all .3s;border-right:1px solid rgba(255,255,255,.06)}
.catbar a:last-child{border-right:none}
.catbar a:hover{background:rgba(255,255,255,.06);color:#fff}
.catbar a .cat-dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* ══════ PHOTO STORY SECTION ══════ */
.photo-story{padding:120px 40px}
.photo-story-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ps-text{max-width:480px}
.ps-label{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:16px}
.ps-h{font-family:var(--fd);font-size:clamp(28px,3.5vw,46px);font-weight:300;line-height:1.4;letter-spacing:0;color:var(--dark);margin-bottom:20px}
.ps-h em{font-style:normal;color:var(--teal);font-weight:500}
.ps-p{font-size:15px;color:var(--text-light);line-height:1.9;font-weight:300;margin-bottom:32px}
.ps-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--teal);letter-spacing:.5px;transition:gap .3s}
.ps-link:hover{gap:14px}
.ps-link svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.ps-img{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lift);aspect-ratio:4/5}
.ps-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:48px;font-weight:300;color:rgba(255,255,255,.4)}
.ps-img-1{background:linear-gradient(160deg,#2a5c5e,#0d7377,#1a9ca0)}
.ps-img-2{background:linear-gradient(160deg,#3a2a1a,#8b6f3a,#c9a84c)}

/* ══════ FULL BLEED PHOTO ══════ */
.fullbleed{position:relative;height:70vh;min-height:400px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.fullbleed .fb-bg{position:absolute;inset:0}
.fb-bg-1{background:linear-gradient(135deg,#1a3a3a,#0d5058,#1a7070)}
.fb-bg-2{background:linear-gradient(135deg,#2e1a2e,#5a3070,#8b60b0)}
.fullbleed::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,.4))}
.fullbleed .fb-content{position:relative;z-index:1;text-align:center;color:#fff;padding:0 40px;max-width:700px}
.fullbleed .fb-content h3{font-family:var(--fd);font-size:clamp(28px,4vw,52px);font-weight:300;line-height:1.35;margin-bottom:16px;letter-spacing:0}
.fullbleed .fb-content p{font-size:15px;font-weight:300;color:rgba(255,255,255,.7);line-height:1.85}

/* ══════ PHOTO GALLERY ══════ */
.gallery{padding:100px 40px}
.gallery-inner{max-width:1400px;margin:0 auto}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;gap:16px;margin-top:64px}
.gallery-item{border-radius:var(--radius);overflow:hidden;position:relative;cursor:pointer;transition:all .5s var(--ease)}
.gallery-item:hover{transform:scale(1.02);box-shadow:var(--shadow-lift)}
.gallery-item:hover .gi-overlay{opacity:1}
.gallery-item .gi-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:28px;font-weight:300;color:rgba(255,255,255,.3)}
.gi-tall{grid-row:span 2}
.gi-wide{grid-column:span 2}
.gi-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,26,46,.7),transparent 60%);display:flex;align-items:flex-end;padding:24px;opacity:0;transition:opacity .4s}
.gi-overlay span{color:#fff;font-size:13px;font-weight:500;letter-spacing:.5px}
.gp-1{background:linear-gradient(135deg,#2a5c5e,#1a9ca0);aspect-ratio:1}
.gp-2{background:linear-gradient(135deg,#8b6f3a,#c9a84c);aspect-ratio:16/9}
.gp-3{background:linear-gradient(135deg,#5a3070,#8b60b0)}
.gp-4{background:linear-gradient(135deg,#a0365a,#d4536d);aspect-ratio:1}
.gp-5{background:linear-gradient(135deg,#3a5a2a,#6aaa4a);aspect-ratio:1}
.gp-6{background:linear-gradient(135deg,#1a3a4a,#3a7a8a);aspect-ratio:16/9}

/* ══════ SECTIONS ══════ */
.section{padding:100px 40px}
.section-head{text-align:center;margin-bottom:64px}
.section-head h3{font-family:var(--fd);font-size:clamp(28px,3.5vw,42px);font-weight:300;letter-spacing:.5px;color:var(--dark);line-height:1.3}
.section-head .sub{display:block;font-size:11px;color:var(--text-muted);letter-spacing:3px;text-transform:uppercase;margin-top:10px;font-weight:500}

/* ══════ PRODUCTS ══════ */
.pgrid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.pcard{background:var(--ivory);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .45s var(--ease);cursor:pointer;position:relative;display:block;text-decoration:none;color:inherit}
.pcard:hover{transform:translateY(-5px) scale(1.01);box-shadow:var(--shadow-lift);border-color:transparent}
.pbadge{position:absolute;top:14px;left:14px;color:#fff;padding:4px 11px;border-radius:5px;font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;z-index:2;transform:rotate(-2deg)}
.b-teal{background:var(--teal)}.b-gold{background:var(--gold)}.b-rose{background:var(--rose)}.b-dark{background:var(--dark)}
.pimg{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:42px;font-weight:300;color:rgba(0,0,0,.1);overflow:hidden}
.pi-a{background:linear-gradient(145deg,#f0e6f6,#e2d0ee)}
.pi-b{background:linear-gradient(145deg,#d5ece9,#b8e0db)}
.pi-c{background:linear-gradient(145deg,#fdf3d9,#f5e4b3)}
.pi-d{background:linear-gradient(145deg,#fce4eb,#f5c6d0)}
.pi-e{background:linear-gradient(145deg,#dde4f5,#c5ceea)}
.pi-f{background:linear-gradient(145deg,#f5e6d5,#ebd4bc)}
.pi-g{background:linear-gradient(145deg,#e0f0d4,#c8e2b5)}
.pi-h{background:linear-gradient(145deg,#fde5e0,#f5ccc4)}
.pinfo{padding:18px 20px 22px}
.pname{font-size:13px;font-weight:500;line-height:1.6;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px;color:var(--dark)}
.pprices{display:flex;align-items:baseline;gap:8px}
.pprice{font-family:var(--fd);font-size:18px;font-weight:500;color:var(--teal);letter-spacing:.3px}
.porig{font-size:12px;color:var(--text-muted);text-decoration:line-through}

/* ══════ INFO BANNER ══════ */
.info-ban{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;text-align:center;padding:32px 24px}
.info-ban-inner{max-width:800px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.info-ban h4{font-family:var(--fd);font-size:22px;font-weight:400}
.info-ban p{font-size:13px;opacity:.75}

/* ══════ SUBSCRIBE ══════ */
.subscribe{background:var(--ivory2);padding:48px 40px}
.sub-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.sub-logo{font-family:var(--fd);font-size:28px;font-weight:400;color:var(--teal);letter-spacing:2px}
.sub-text{flex:1;min-width:200px}
.sub-text h4{font-family:var(--fd);font-size:20px;font-weight:400;color:var(--dark);margin-bottom:4px}
.sub-text p{font-size:13px;color:var(--text-light);font-weight:300}
.sub-btn{display:inline-flex;align-items:center;gap:8px;background:var(--dark);color:#fff;padding:14px 32px;border-radius:10px;font-size:13px;font-weight:600;letter-spacing:.5px;transition:all .3s;white-space:nowrap}
.sub-btn:hover{background:var(--teal);transform:translateY(-1px)}
.sub-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* section alt */
.section-alt{background:var(--ivory2)}
.alt-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px}
.top-grid{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}

/* ══════ CARD SECTION ══════ */
.card-sec{background:linear-gradient(180deg,var(--ivory2),var(--ivory));padding:100px 40px}
.card-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:64px}
.ccard{background:var(--ivory);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .45s var(--ease);cursor:pointer;display:block;text-decoration:none;color:inherit}
.ccard:hover .clink{gap:8px}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:transparent}
.cthumb{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:32px;font-weight:300;color:rgba(255,255,255,.3)}
.ct-1{background:linear-gradient(135deg,#2a5c5e,#1a9ca0)}
.ct-2{background:linear-gradient(135deg,#3a5a2a,#6aaa4a)}
.ct-3{background:linear-gradient(135deg,#8b6f3a,#c9a84c)}
.ct-4{background:linear-gradient(135deg,#a0365a,#d4536d)}
.ct-5{background:linear-gradient(135deg,#1a3a4a,#3a7a8a)}
.cbody{padding:18px}
.cbody h5{font-family:var(--fd);font-size:18px;font-weight:400;color:var(--dark);margin-bottom:4px}
.cbody p{font-size:12px;color:var(--text-light);line-height:1.7;font-weight:300}
.cbody .clink{color:var(--teal);font-size:12px;font-weight:600;margin-top:12px;display:inline-flex;align-items:center;gap:4px;letter-spacing:.5px;transition:gap .3s}
.cbody .clink:hover{gap:8px}

/* ══════ FOOTER ══════ */
.footer{background:var(--dark);color:rgba(255,255,255,.6);padding:72px 40px 0;font-size:13px;line-height:2}
.footer-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.footer h4{color:rgba(255,255,255,.9);font-family:var(--fd);font-size:16px;font-weight:400;letter-spacing:1px;margin-bottom:18px;padding-bottom:10px;position:relative}
.footer h4::after{content:'';position:absolute;bottom:0;left:0;width:24px;height:1.5px;background:var(--gold)}
.footer a{display:block;font-size:12px;transition:all .3s;letter-spacing:.3px}
.footer a:hover{color:var(--gold);padding-left:4px}
.footer .clabel{color:rgba(255,255,255,.85);font-weight:500}
.footer .fdiv{border:none;border-top:1px solid rgba(255,255,255,.06);margin:14px 0}
.socials{display:flex;gap:10px;margin-top:10px}
.soc{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;transition:all .3s}
.soc:hover{background:var(--teal);transform:scale(1.05)}
.soc svg{width:16px;height:16px}
.fbot{max-width:1400px;margin:48px auto 0;padding:24px 0;border-top:1px solid rgba(255,255,255,.06);text-align:center;font-size:11px;color:rgba(255,255,255,.3)}
.fbot a{display:inline;color:rgba(255,255,255,.4)}
.fbot a:hover{color:var(--gold)}

/* ══════ REVEAL ══════ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.vis{opacity:1;transform:none}

/* ══════ BACK TOP ══════ */
.btt{position:fixed;bottom:28px;right:28px;width:46px;height:46px;border-radius:14px;background:var(--dark);color:var(--ivory);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(26,26,46,.2);opacity:0;pointer-events:none;transition:all .4s;z-index:999}
.btt.show{opacity:1;pointer-events:auto}
.btt:hover{transform:translateY(-3px);background:var(--teal)}
.btt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* ══════ RESPONSIVE ══════ */
@media(max-width:1024px){
  .photo-story-inner{grid-template-columns:1fr;gap:40px;text-align:center}
  .ps-text{max-width:100%;margin:0 auto}
  .ps-img{max-width:500px;margin:0 auto}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gi-tall{grid-row:span 1}
  .gi-wide{grid-column:span 1}
  .footer-inner{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .section,.photo-story,.gallery,.card-sec{padding:60px 20px}
  .hero{min-height:500px}
  .hero-content{padding:0 20px}
  .pgrid,.alt-grid,.top-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pinfo{padding:12px 14px 16px}
  .pname{font-size:12px;min-height:38px}
  .pprice{font-size:18px}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .gallery-grid{gap:10px}
  .fullbleed{height:50vh;min-height:300px}
  .catbar a{min-width:130px;font-size:12px;padding:0 16px}
}
@media(max-width:480px){
  .pgrid,.alt-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .top-grid{grid-template-columns:1fr;max-width:340px}
  .gallery-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:32px}
  .sub-inner{flex-direction:column;text-align:center}
}

/* ══════ STAMP CARD ══════ */
.hb-stamp{position:relative}
.stamp-badge{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 5px;background:var(--gold);color:#fff;border-radius:9px;font-size:10px;font-weight:700;line-height:17px;text-align:center;display:none;font-family:var(--fb);letter-spacing:0;box-shadow:0 0 0 2px var(--ivory);transition:box-shadow .4s}
.hdr--top .stamp-badge{box-shadow:0 0 0 2px rgba(26,26,46,.4)}
.stamp-badge.show{display:block}

.sm-modal{display:none;position:fixed;inset:0;z-index:2500;align-items:center;justify-content:center;padding:20px}
.sm-modal.open{display:flex}
.sm-bk{position:absolute;inset:0;background:rgba(26,26,46,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:smFade .3s var(--ease)}
.sm-panel{position:relative;background:var(--ivory);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(0,0,0,.25);padding:36px 28px 32px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;animation:smSlide .35s var(--ease)}
@keyframes smFade{from{opacity:0}to{opacity:1}}
@keyframes smSlide{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}

.sm-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--text-light);transition:all .2s}
.sm-close:hover{background:var(--cream);color:var(--dark)}
.sm-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

.sm-head{text-align:center;margin-bottom:26px}
.sm-head .sm-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:10px}
.sm-head h3{font-family:var(--fd);font-size:30px;font-weight:300;color:var(--dark);margin-bottom:6px;letter-spacing:.5px}
.sm-head h3 em{font-style:normal;color:var(--teal);font-weight:500}
.sm-head .sm-sub{font-size:13px;color:var(--text-light);font-weight:300;letter-spacing:.3px}

.sm-stamps{display:flex;justify-content:center;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.sm-stamp{position:relative;width:54px;height:54px;border-radius:50%;border:2.5px dashed var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:20px;color:var(--text-muted);transition:all .35s var(--ease);background:#fff;overflow:hidden}
.sm-stamp.collected{border:2.5px solid var(--teal);background:var(--teal-light);color:var(--teal)}
.sm-stamp.current{border:2.5px solid var(--gold);background:var(--gold-light);color:var(--gold-muted);animation:smPop .5s var(--ease)}
@keyframes smPop{0%{transform:scale(.5)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

.sm-content{text-align:center}
.sm-msg{font-size:14px;font-weight:500;padding:12px 16px;border-radius:10px;margin-bottom:14px;letter-spacing:.3px}
.sm-msg-success{background:var(--teal-light);color:var(--teal-dark)}
.sm-msg-already{background:var(--gold-light);color:var(--gold-muted)}
.sm-msg-error{background:var(--rose-light);color:var(--rose)}
.sm-msg-ready{background:var(--teal-light);color:var(--teal-dark)}
.sm-progress{font-size:13px;color:var(--text-light);font-weight:400;margin-bottom:18px;letter-spacing:.3px}
.sm-empty{font-size:14px;color:var(--text-light);font-weight:300;padding:18px 0 6px}

.sm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 32px;border-radius:10px;font-size:13px;font-weight:600;letter-spacing:.8px;cursor:pointer;transition:all .3s var(--ease);font-family:var(--fb);border:none;color:inherit;background:none}
.sm-btn-primary{background:var(--teal);color:#fff}
.sm-btn-primary:hover{background:var(--teal-dark);transform:translateY(-1px);box-shadow:0 8px 20px rgba(13,115,119,.3)}
.sm-btn-primary:disabled{background:var(--text-muted);cursor:not-allowed;transform:none;box-shadow:none}

.sm-spinner{display:inline-block;width:36px;height:36px;border:3px solid var(--cream);border-top-color:var(--teal);border-radius:50%;animation:smSpin .8s linear infinite;margin:8px auto 12px}
@keyframes smSpin{to{transform:rotate(360deg)}}
.sm-loading{color:var(--text-light);font-size:13px;font-weight:300}

#sm-qr{display:inline-block;margin:8px auto 14px;padding:14px;background:#fff;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
.sm-qr-hint{color:var(--gold-muted);font-size:13px;font-weight:600;letter-spacing:.3px;margin-top:8px}
.sm-video-overlay{position:absolute;inset:0;z-index:10;border-radius:inherit;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ivory);transition:opacity .4s ease}
.sm-video-overlay--out{opacity:0;pointer-events:none}
.sm-video-overlay-vid{width:100%;height:100%;object-fit:contain}

@media(max-width:480px){
  .sm-panel{padding:28px 16px 24px;border-radius:18px}
  .sm-stamp{width:48px;height:48px;font-size:18px}
  .sm-stamps{gap:6px;margin-bottom:22px}
  .sm-head{margin-bottom:20px}
  .sm-head h3{font-size:26px}
  .sm-head .sm-label{letter-spacing:2px}
  .sm-modal{padding:14px}
}
@media(max-width:360px){
  .sm-stamp{width:44px;height:44px;font-size:16px}
  .sm-stamps{gap:5px}
}

/* 集點章圖片（填入 STAMP_IMAGES 後自動套用，目前顯示數字）*/
.sm-stamp-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.sm-stamp-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(13,115,119,.72);border-radius:50%;color:#fff;font-size:20px;font-family:var(--fd)}

/* 集點卡編號區塊 */
.sm-card-id{margin-top:20px;padding:14px 16px;background:var(--ivory2);border-radius:12px;border:1px dashed var(--cream);text-align:center}
.sm-cid-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);font-weight:500;margin-bottom:8px}
.sm-cid-code{font-family:monospace;font-size:24px;font-weight:700;letter-spacing:5px;color:var(--teal);line-height:1.2}
.sm-cid-hint{font-size:12px;color:var(--text-light);margin-top:8px;line-height:1.6}

/* QR Code 生成動畫（之後可替換成更精緻的效果）*/
@keyframes smQrReveal{0%{opacity:0;transform:scale(.65)}65%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
#sm-qr{animation:smQrReveal .5s var(--ease) both}

/* ══════ STAMP MAP ══════ */
.sm-stamps{display:block;margin-bottom:10px}
/* 外層：不剪裁，讓圖釘可以溢出到邊界外（北邊圖釘不會被切掉）*/
/* 分東南西北
.sm-map{position:relative;width:100%;border-radius:16px;overflow:visible}*/
.sm-map {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: visible;
  /* 加上以下兩行：強制解除 4:3 比例，並給定一個剛好容納圖釘的高度 */
  aspect-ratio: auto !important;
  height: 220px;
}

/* 背景層：在內層剪裁，確保底圖保持圓角 */
/* 有一個色塊
.sm-map-bg{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#c8e6c9 0%,#b2dfdb 35%,#80cbc4 65%,#4db6ac 100%);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.06),var(--shadow);z-index:0}*/
.sm-map-bg{display: none;}
.sm-map-bg::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(40deg,transparent,transparent 28px,rgba(255,255,255,.07) 28px,rgba(255,255,255,.07) 29px);pointer-events:none}

.sm-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 1;
  transition: transform .25s var(--ease);
  /* 加上這行：給予固定的向下補償值，彌補圖釘本身的高度 */
  margin-top: 24px;
}.sm-pin:hover{transform:translate(-50%,-100%) scale(1.15);z-index:10}

.sm-pin-icon{width:65px;height:65px;border-radius:50% 50% 50% 0;rotate:-45deg;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:background .3s,box-shadow .3s,filter .3s;overflow:hidden;flex-shrink:0}
.sm-pin-icon-inner{display:inline-block;rotate:45deg;font-size:10px;font-weight:700;line-height:1;text-align:center;letter-spacing:0;font-family:var(--fb);color:#fff;white-space:nowrap;max-width:34px;overflow:hidden}
.sm-pin-icon-img{width:100%;height:100%;object-fit:cover;rotate:45deg}

.sm-pin-check{position:absolute;top:0;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--teal-dark);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.15);z-index:2}

.sm-pin-label{font-size:9px;font-weight:600;letter-spacing:.2px;white-space:nowrap;background:rgba(255,255,255,.88);backdrop-filter:blur(4px);padding:2px 6px;border-radius:4px;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.1);pointer-events:none;max-width:70px;overflow:hidden;text-overflow:ellipsis}

.sm-pin--empty .sm-pin-icon{background:rgba(178,223,219,.5);border:2px dashed rgba(13,115,119,.35);filter:grayscale(.7) opacity(.7)}
.sm-pin--empty .sm-pin-label{color:var(--text-muted)}
.sm-pin--collected .sm-pin-icon{background:var(--teal);border:2px solid var(--teal-dark);box-shadow:0 4px 16px rgba(13,115,119,.45)}
.sm-pin--collected .sm-pin-label{color:var(--teal-dark);font-weight:700}
.sm-pin--current .sm-pin-icon{background:var(--gold);border:2px solid var(--gold-muted);box-shadow:0 4px 20px rgba(201,168,76,.6);animation:smPinPop .5s var(--ease)}
.sm-pin--current .sm-pin-label{color:var(--gold-muted);font-weight:700}

@keyframes smPinPop{0%{transform:scale(.3) rotate(-45deg)}60%{transform:scale(1.2) rotate(-45deg)}100%{transform:scale(1) rotate(-45deg)}}

.sm-map-legend{display:flex;justify-content:center;gap:16px;margin-top:10px;margin-bottom:18px;font-size:11px;color:var(--text-muted)}
.sm-map-legend span{display:flex;align-items:center;gap:5px}
.sm-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.sm-legend-dot--empty{background:rgba(13,115,119,.2);border:1.5px dashed var(--teal)}
.sm-legend-dot--collected{background:var(--teal)}
.sm-legend-dot--current{background:var(--gold)}

@media(max-width:480px){.sm-pin-icon{width:60px;height:60px}.sm-pin-label{font-size:8px;max-width:56px}}
@media(max-width:380px){.sm-pin-icon{width:50px;height:50px}.sm-pin-label{font-size:7px;max-width:46px;padding:1px 4px}}
@media(max-width:320px){.sm-pin-label{display:none}}

/* ══════ CARD ID COPY ══════ */
.sm-cid-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.sm-cid-copy{width:34px;height:34px;border-radius:8px;border:1.5px solid var(--cream);background:var(--ivory);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s var(--ease);flex-shrink:0}
.sm-cid-copy svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s}
.sm-cid-copy:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light)}
.sm-cid-copy.copied{border-color:var(--teal);background:var(--teal);color:#fff}
.sm-cid-copied-txt{font-size:9px;font-weight:700;letter-spacing:.2px;white-space:nowrap}

/* ══════ FIRST-VISIT MODAL ══════ */
.sm-fv{display:flex;flex-direction:column;align-items:center;gap:12px;padding:4px 0}
.sm-fv-title{font-family:var(--fd);font-size:17px;font-weight:400;color:var(--dark);letter-spacing:.3px}
.sm-fv-sub{font-size:13px;color:var(--text-light);font-weight:300;text-align:center}
/* PRIMARY：我有集點卡編號 */
.sm-fv-restore-btn{width:100%;font-size:14px;padding:16px 24px;border-radius:12px}
.sm-fv-restore-btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.sm-fv-divider{font-size:11px;color:var(--text-muted);letter-spacing:1px;margin:2px 0}
/* SECONDARY：建立新的集點卡（小字連結） */
.sm-fv-new{background:none;border:none;color:var(--text-muted);font-size:12px;text-decoration:underline;text-underline-offset:2px;padding:4px 8px;cursor:pointer;font-family:var(--fb);transition:color .2s}
.sm-fv-new:hover:not(:disabled){color:var(--teal)}
.sm-fv-new:disabled{opacity:.4;cursor:not-allowed}
.sm-fv-restore-wrap{width:100%;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--ivory2);border-radius:10px;border:1px solid var(--border)}
.sm-fv-input{width:100%;padding:10px 12px;border:1.5px solid var(--cream);border-radius:8px;font-size:13px;font-family:monospace;outline:none;box-sizing:border-box;transition:border-color .2s}
.sm-fv-input:focus{border-color:var(--teal)}
.sm-fv-submit{width:100%;padding:12px;font-size:13px}
.sm-fv-err{font-size:12px;min-height:16px;text-align:center;margin:0}
.sm-fv-inapp-warn{font-size:12px;color:var(--gold-muted);background:var(--gold-light);border-radius:8px;padding:10px 14px;text-align:center;line-height:1.6;width:100%}
.sm-fv-warn{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0}
.sm-fv-warn-hint{font-size:13px;color:var(--text-light);text-align:center}

/* ══════ STAMP HINT TOOLTIP ══════ */
.stamp-hint{position:fixed;top:80px;right:48px;z-index:1100;background:var(--ivory);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.14),0 0 0 1px var(--border);padding:14px 40px 12px 16px;min-width:196px;max-width:240px;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.stamp-hint::before{content:'';position:absolute;top:-7px;right:18px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid var(--ivory);filter:drop-shadow(0 -1px 1px rgba(0,0,0,.08))}
.stamp-hint.show{opacity:1;transform:none;pointer-events:auto}
.stamp-hint-close{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:6px;border:none;background:none;color:var(--text-muted);font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.stamp-hint-close:hover{background:var(--cream);color:var(--dark)}
.stamp-hint-msg{font-size:13px;font-weight:600;color:var(--dark);margin-bottom:4px;line-height:1.4}
.stamp-hint-sub{font-size:11px;color:var(--teal);margin:0;font-weight:500}
@media(max-width:860px){.stamp-hint{top:50px;left:139px;min-width:176px}}
@media(max-width:480px){.stamp-hint{max-width:200px;right:10px}}

/* ══════ MASCOT ══════ */
.mascot-wrap{position:fixed;top:70%;right: 40px;transform:translateY(-50%);z-index:8000;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.mascot-bubble {
  background: #fff;
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--dark);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  transition: opacity .4s var(--ease);
  order: -1;
  width: 220px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}.mascot-bubble.show{opacity:1}
.mascot-body{width:120px;height:120px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;font-family:var(--fb);box-shadow:0 8px 28px rgba(13,115,119,.4);flex-shrink:0}
/* 從右下角往左上飛到指定位置 */
@keyframes mascotEnter {
  from {
    transform: translate(20vw, 50vh);
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

/* 從目前位置往右上角飛離 */
@keyframes mascotLeave {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translate(20vw, -44vh);
    opacity: 0;
  }
}.mascot-wrap.entering{animation:mascotEnter 1s cubic-bezier(.34,1.4,.64,1) forwards}
.mascot-wrap.leaving{animation:mascotLeave 1.5s cubic-bezier(.4,0,.8,1) forwards}

/*為了眼睛不好的人
@media(prefers-reduced-motion:reduce){.mascot-wrap{display:none!important}}*/
@media(max-width: 480px) {
  .mascot-wrap {
    right: 16px;
    /* 縮小手機版的右側邊距，把空間還給畫面 */
  }

  .mascot-body {
    width: 64px;
    height: 64px;
  }

  .mascot-bubble {
    width: 180px;
    /* 手機版使用較小的固定寬度 */
    min-height: 54px;
    /* 高度等比縮放，防禦文字溢位 */
    font-size: 12px;
    padding: 10px 12px;
  }
}