/** Shopify CDN: Minification failed

Line 285:0 Unexpected "<"

**/
:root {
  --black:#0a0906; --dark:#111009; --card:#161410;
  --gold:#c9a84c; --gold-light:#e8c97a; --gold-dim:#8a6e2f;
  --cream:#f5ede0; --cream-dim:#c4b49a; --white:#faf7f2;
  --red:#8b2020;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--cream);font-family:'Josefin Sans',sans-serif;font-weight:300;letter-spacing:.05em;overflow-x:clip;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:999;display:flex;align-items:center;justify-content:space-between;padding:24px 60px;background:linear-gradient(to bottom,rgba(10,9,6,.95),transparent);transition:background .4s;}
nav.scrolled{background:rgba(10,9,6,.97);border-bottom:1px solid rgba(201,168,76,.15);}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--gold);letter-spacing:.25em;text-decoration:none;}
.nav-links{display:flex;gap:40px;list-style:none;}
.nav-links a{color:var(--cream-dim);text-decoration:none;font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:color .3s;}
.nav-links a:hover{color:var(--gold);}
.nav-right{display:flex;align-items:center;gap:24px;}
.nav-btn{background:transparent;border:1px solid rgba(201,168,76,.5);color:var(--gold);padding:10px 24px;font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:all .3s;}
.nav-btn:hover{background:var(--gold);color:var(--black);}
.cart-icon{cursor:pointer;color:var(--cream-dim);font-size:18px;position:relative;user-select:none;}
.cart-badge{position:absolute;top:-8px;right:-8px;background:var(--gold);color:var(--black);border-radius:50%;width:16px;height:16px;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:600;}

/* HERO */
.hero{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#1a1308 0%,#0a0906 60%);}
.hero-bg-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,76,.06) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);animation:pulse 4s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6;}50%{transform:translate(-50%,-50%) scale(1.15);opacity:1;}}
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.particle{position:absolute;width:2px;height:2px;background:var(--gold);border-radius:50%;opacity:0;animation:float-up linear infinite;}
@keyframes float-up{0%{transform:translateY(100vh) translateX(0);opacity:0;}10%{opacity:.6;}90%{opacity:.3;}100%{transform:translateY(-100px) translateX(30px);opacity:0;}}
.hero-content{text-align:center;z-index:2;animation:fadeUp 1.2s ease forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.hero-eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;}
.hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(64px,9vw,120px);font-weight:300;line-height:.95;color:var(--white);margin-bottom:8px;}
.hero-title span{color:var(--gold);font-style:italic;}
.hero-subtitle{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim);margin:32px auto;max-width:380px;line-height:2;}
.hero-ctas{display:flex;gap:16px;justify-content:center;margin-top:48px;}
.btn-primary{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 50%,var(--gold) 100%);background-size:200% 100%;color:var(--black);padding:16px 48px;font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:.25em;text-transform:uppercase;border:none;cursor:pointer;transition:all .4s;font-weight:400;}
.btn-primary:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 8px 30px rgba(201,168,76,.3);}
.btn-outline{background:transparent;border:1px solid rgba(201,168,76,.4);color:var(--cream-dim);padding:16px 48px;font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:all .3s;}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);}
.hero-scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--gold-dim);font-size:9px;letter-spacing:.3em;text-transform:uppercase;}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%,100%{transform:scaleY(1);opacity:1;}50%{transform:scaleY(.5);opacity:.4;}}

/* SECTIONS */
section{padding:120px 60px;}
.section-label{font-size:9px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(36px,5vw,64px);font-weight:300;line-height:1.1;color:var(--white);margin-bottom:24px;}
.section-title em{color:var(--gold);font-style:italic;}
.gold-divider{width:60px;height:1px;background:linear-gradient(to right,var(--gold),transparent);margin-bottom:48px;}
.fade-in-up{opacity:0;transform:translateY(40px);transition:all .8s ease;}
.fade-in-up.visible{opacity:1;transform:translateY(0);}

/* ── Rotating bracelet canvas ── */
.hero-bracelet-wrap{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:1;
}
#heroBraceletCanvas{
  display:block;
  filter:drop-shadow(0 0 20px rgba(201,168,76,0.15));
}

/* ENERGY SECTION */
.energy-section{background:var(--dark);}
.energy-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
/* ── Five Elements Panel ── */
.five-elements-wrap{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;}
.fe-region{position:absolute;inset:0;cursor:pointer;}
.fe-region img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) brightness(.4);transition:filter .55s ease;}
.fe-region:hover img{filter:grayscale(0) brightness(.9);}
.energy-text p{color:var(--cream-dim);font-size:13px;line-height:2.2;margin-bottom:20px;}
.energy-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:48px;}
.stat-item{border-left:1px solid rgba(201,168,76,.3);padding-left:20px;}
.stat-num{font-family:'Cormorant Garamond',serif;font-size:42px;color:var(--gold);font-weight:300;line-height:1;}
.stat-label{font-size:9px;letter-spacing:.2em;color:var(--cream-dim);text-transform:uppercase;margin-top:6px;}

/* ═══════════════════════════════════════════════
   DIY STUDIO
═══════════════════════════════════════════════ */
.diy-section{background:var(--black);padding:80px 0 0;}
.diy-header{padding:0 60px 60px;}
.diy-studio{display:grid;grid-template-columns:260px 1fr 300px;height:700px;border-top:1px solid rgba(201,168,76,.1);border-bottom:1px solid rgba(201,168,76,.1);}

/* Bead Library */
.bead-library{background:var(--dark);border-right:1px solid rgba(201,168,76,.1);display:flex;flex-direction:column;overflow:hidden;}
.bead-lib-header{padding:20px;border-bottom:1px solid rgba(201,168,76,.1);}
.bead-lib-header h3{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.search-input{width:100%;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.15);color:var(--cream);padding:9px 12px;font-family:'Josefin Sans',sans-serif;font-size:11px;letter-spacing:.1em;outline:none;transition:border-color .3s;}
.search-input::placeholder{color:var(--cream-dim);opacity:.5;}
.search-input:focus{border-color:var(--gold);}
.bead-cats{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px;border-bottom:1px solid rgba(201,168,76,.1);}
.bead-cat{padding:5px 10px;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--cream-dim);cursor:pointer;border:1px solid transparent;transition:all .25s;}
.bead-cat.active{color:var(--gold);border-color:rgba(201,168,76,.4);}
.bead-grid{flex:1;overflow-y:auto;padding:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.2) transparent;}
.bead-item{background:var(--card);border:1px solid rgba(201,168,76,.08);padding:12px 8px;text-align:center;cursor:pointer;transition:all .25s;user-select:none;}
.bead-item:hover{border-color:rgba(201,168,76,.35);background:rgba(201,168,76,.06);}
.bead-item.just-added{border-color:rgba(201,168,76,.7);background:rgba(201,168,76,.12);transform:scale(0.96);}
.bead-item:hover{border-color:rgba(201,168,76,.5);transform:translateY(-2px);background:rgba(201,168,76,.06);}
.bead-item:active{transform:scale(.95);}
.bead-dot{width:40px;height:40px;border-radius:50%;margin:0 auto 8px;pointer-events:none;}
.bead-name{font-size:9px;color:var(--cream);letter-spacing:.04em;line-height:1.3;}
.bead-sz{font-size:8px;color:var(--cream-dim);margin-top:2px;}
.bead-usd{font-size:9px;color:var(--gold);margin-top:3px;}

/* CANVAS PANEL */
.diy-canvas{background:radial-gradient(ellipse at 50% 40%, #141b2a 0%, #0a0e16 62%, #06080e 100%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:24px 20px;position:relative;overflow:hidden;}
.canvas-topbar{display:flex;gap:10px;width:100%;justify-content:center;flex-wrap:wrap;}
.wrist-info{display:flex;align-items:center;gap:8px;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.2);padding:8px 16px;}
.wrist-lbl{font-size:9px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;}
.wrist-val{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--white);}
.wrist-unit{font-size:9px;color:var(--cream-dim);}
.wrist-warn{font-size:9px;color:#e07070;letter-spacing:.1em;}
.price-disp{background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.2);padding:8px 20px;display:flex;align-items:center;gap:8px;}
.price-lbl{font-size:9px;color:var(--cream-dim);letter-spacing:.15em;text-transform:uppercase;}
.price-val{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--gold);}
.bracelet-wrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;position:relative;}
#diyCanvas{cursor:grab;display:block;touch-action:none;}
#diyCanvas:active{cursor:grabbing;}
.canvas-hint{font-size:9px;letter-spacing:.18em;color:var(--cream-dim);text-align:center;opacity:.55;text-transform:uppercase;}
.canvas-actions{display:flex;gap:8px;width:100%;}
.act-btn{flex:1;padding:11px;font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:all .3s;border:none;}
.act-clear{background:rgba(139,32,32,.2);color:#e07070;border:1px solid rgba(139,32,32,.4);}
.act-clear:hover{background:rgba(139,32,32,.4);}
.act-save{background:rgba(201,168,76,.1);color:var(--gold);border:1px solid rgba(201,168,76,.3);}
.act-save:hover{background:rgba(201,168,76,.2);}
.act-order{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--black);flex:2;font-weight:400;}
.act-order:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(201,168,76,.3);}

/* SUMMARY PANEL */
.diy-summary{background:var(--dark);border-left:1px solid rgba(201,168,76,.1);display:flex;flex-direction:column;overflow:hidden;}
.sum-header{padding:18px 20px 14px;border-bottom:1px solid rgba(201,168,76,.1);}
.sum-header h3{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);}
.sum-list{flex:1;overflow-y:auto;padding:10px 12px;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.2) transparent;}
.sum-empty{text-align:center;padding:48px 16px;color:var(--cream-dim);font-size:11px;line-height:2.2;opacity:.5;}
.sum-footer{padding:14px 18px 18px;border-top:1px solid rgba(201,168,76,.1);}
.sum-meta{font-size:9px;color:var(--cream-dim);letter-spacing:.1em;margin-bottom:10px;}
.energy-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px;}
.etag{font-size:7px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid rgba(201,168,76,.25);color:var(--gold-dim);cursor:pointer;transition:all .2s;}
.etag.hl{background:rgba(201,168,76,.12);border-color:var(--gold);color:var(--gold);}
.sum-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.sum-total-lbl{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);}
.sum-total-val{font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--gold);}
.order-btn{width:100%;padding:14px;font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--black);border:none;cursor:pointer;transition:all .3s;font-weight:400;}
.order-btn:hover{transform:translateY(-1px);box-shadow:0 5px 20px rgba(201,168,76,.3);}
/* ── Group rows ── */
@keyframes slideIn{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:translateX(0);}}
.sgr{display:flex;align-items:center;gap:10px;padding:9px 10px;margin-bottom:5px;background:var(--card);border:1px solid rgba(201,168,76,.08);cursor:pointer;transition:all .22s;animation:slideIn .25s ease;position:relative;overflow:hidden;}
.sgr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);transform:scaleY(0);transition:transform .2s;transform-origin:bottom;}
.sgr:hover{border-color:rgba(201,168,76,.3);background:rgba(201,168,76,.04);}
.sgr:hover::before{transform:scaleY(1);}
.sgr.hl{border-color:rgba(201,168,76,.55)!important;background:rgba(201,168,76,.09)!important;}
.sgr.hl::before{transform:scaleY(1)!important;}
.sgr-dot{width:32px;height:32px;border-radius:50%;flex-shrink:0;box-shadow:inset -2px -2px 5px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.4);}
.sgr-info{flex:1;min-width:0;}
.sgr-name{font-size:10px;color:var(--cream);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sgr-name span{font-size:8px;color:var(--cream-dim);margin-left:3px;}
.sgr-price{font-size:9px;color:var(--cream-dim);margin-top:3px;}
.sgr-price strong{color:var(--gold);}
.sgr-controls{display:flex;align-items:center;gap:0;flex-shrink:0;}
.sgr-btn{background:none;border:1px solid rgba(201,168,76,.2);color:var(--cream-dim);width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1;transition:all .2s;font-family:'Josefin Sans',sans-serif;}
.sgr-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.08);}
.sgr-qty{width:24px;text-align:center;font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--white);line-height:1;}
.sgr-del{background:none;border:none;color:var(--cream-dim);cursor:pointer;font-size:11px;opacity:.35;transition:all .2s;padding:2px 4px;margin-left:4px;}
.sgr-del:hover{color:#e07070;opacity:1;}

/* COLLECTION */
.collection-section{background:var(--dark);}

/* Element Tab Bar — centered */
.coll-tabs{display:flex;justify-content:center;gap:0;margin-bottom:40px;}
.coll-tab{padding:14px 48px;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--cream-dim);cursor:pointer;border:none;background:transparent;font-family:'Josefin Sans',sans-serif;position:relative;transition:color .3s;}
.coll-tab::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s;}
.coll-tab:hover{color:var(--cream);}
.coll-tab.active{color:var(--gold);}
.coll-tab.active::after{transform:scaleX(1);}

/* Main layout — everything scrolls together */
.coll-body{display:block;}
.coll-scroll-wrap{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;}
.coll-scroll-wrap::-webkit-scrollbar{display:none;}
.coll-scroll{display:flex;gap:36px;padding:0 4px;width:max-content;align-items:flex-start;}

/* Cover — first item in scroll row */
.coll-cover{position:relative;overflow:hidden;flex-shrink:0;width:340px;aspect-ratio:4/5;}
.coll-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.coll-cover-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,6,.88) 0%,rgba(10,9,6,.1) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px 24px;}
.coll-cover-label{font-size:8px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.coll-cover-title{font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--white);font-weight:300;margin-bottom:18px;line-height:1.1;}
.coll-view-btn{display:inline-block;padding:10px 22px;border:1px solid rgba(250,247,242,.65);color:var(--white);font-family:'Josefin Sans',sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;background:transparent;transition:all .3s;width:fit-content;}
.coll-view-btn:hover{background:var(--white);color:var(--black);}

/* Product card */
.coll-card{flex:0 0 380px;cursor:pointer;display:flex;flex-direction:column;background:transparent;}
.coll-card-img-wrap{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;flex-shrink:0;}
.coll-card-img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transition:opacity .5s;}
.coll-card-img.hover-img{opacity:0;}
.coll-card:hover .coll-card-img.main-img{opacity:0;}
.coll-card:hover .coll-card-img.hover-img{opacity:1;}
.coll-card-info{padding:16px 8px 12px;background:transparent;flex-shrink:0;text-align:center;}
.coll-card-name{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--white);font-weight:400;line-height:1.2;margin-bottom:4px;}
.coll-card-series{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:4px;}
.coll-card-price{font-size:12px;color:var(--gold);letter-spacing:.08em;font-style:italic;}

/* COMMUNITY */
.comm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}
.comm-item{position:relative;overflow:hidden;aspect-ratio:1;cursor:pointer;}
.comm-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s;filter:brightness(.8);}
.comm-item:hover img{transform:scale(1.08);filter:brightness(1);}
.comm-ov{position:absolute;inset:0;background:rgba(10,9,6,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;}
.comm-item:hover .comm-ov{opacity:1;}
.comm-ov-txt{color:var(--gold);font-size:10px;letter-spacing:.2em;text-transform:uppercase;}

/* MODALS */
.modal-bd{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;}
.modal-bd.open{opacity:1;pointer-events:all;}
.modal{background:var(--dark);border:1px solid rgba(201,168,76,.2);padding:44px;max-width:460px;width:90%;position:relative;animation:modalIn .4s ease;}
@keyframes modalIn{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal-x{position:absolute;top:18px;right:18px;background:none;border:none;color:var(--cream-dim);font-size:20px;cursor:pointer;}
.modal h2{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--white);margin-bottom:6px;}
.modal-sub{font-size:9px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:28px;}
.m-tabs{display:flex;margin-bottom:28px;}
.m-tab{flex:1;padding:9px;text-align:center;font-size:9px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border:1px solid rgba(201,168,76,.2);color:var(--cream-dim);transition:all .3s;}
.m-tab.active{background:rgba(201,168,76,.1);color:var(--gold);border-color:var(--gold);}
.fg{margin-bottom:18px;}
.flbl{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--cream-dim);display:block;margin-bottom:7px;}
.finp{width:100%;background:rgba(201,168,76,.04);border:1px solid rgba(201,168,76,.15);color:var(--cream);padding:12px 14px;font-family:'Josefin Sans',sans-serif;font-size:12px;outline:none;transition:border-color .3s;letter-spacing:.05em;}
.finp:focus{border-color:var(--gold);background:rgba(201,168,76,.07);}
.fsub{width:100%;margin-top:6px;padding:15px;font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:.25em;text-transform:uppercase;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--black);border:none;cursor:pointer;transition:all .3s;font-weight:400;}
.fsub:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(201,168,76,.3);}

/* CART SIDEBAR */
.cart-sb{position:fixed;top:0;right:0;bottom:0;width:380px;background:var(--dark);border-left:1px solid rgba(201,168,76,.15);z-index:1500;transform:translateX(100%);transition:transform .4s ease;display:flex;flex-direction:column;}
.cart-sb.open{transform:translateX(0);}
.cart-hd{padding:28px;border-bottom:1px solid rgba(201,168,76,.1);display:flex;justify-content:space-between;align-items:center;}
.cart-hd h3{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--white);}
.cart-x{background:none;border:none;color:var(--cream-dim);font-size:20px;cursor:pointer;}
.cart-body{flex:1;overflow-y:auto;padding:18px;}
.ci{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid rgba(201,168,76,.08);}
.ci img{width:64px;height:64px;object-fit:cover;}
.ci-inf{flex:1;}
.ci-nm{font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--white);margin-bottom:3px;}
.ci-mt{font-size:8px;letter-spacing:.12em;color:var(--cream-dim);text-transform:uppercase;margin-bottom:6px;}
.ci-pr{font-size:13px;color:var(--gold);}
.cart-ft{padding:24px;border-top:1px solid rgba(201,168,76,.1);}
.cart-ttl{display:flex;justify-content:space-between;margin-bottom:20px;}
.cart-ttl-l{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);}
.cart-ttl-v{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold);}
.ck-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--black);border:none;font-family:'Josefin Sans',sans-serif;font-size:10px;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:all .3s;}
.ck-btn:hover{transform:translateY(-1px);box-shadow:0 5px 22px rgba(201,168,76,.35);}

/* TOAST */
.toast{position:fixed;bottom:36px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--card);border:1px solid rgba(201,168,76,.3);padding:13px 26px;font-size:10px;letter-spacing:.15em;color:var(--gold);z-index:3000;transition:transform .4s;white-space:nowrap;}
.toast.show{transform:translateX(-50%) translateY(0);}

/* FOOTER */
footer{background:var(--dark);padding:80px 60px 40px;border-top:1px solid rgba(201,168,76,.1);}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:60px;}
.ft-brand{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--gold);margin-bottom:14px;letter-spacing:.2em;}
.ft-tag{font-size:11px;color:var(--cream-dim);line-height:2;max-width:260px;}
.ft-col h4{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
.ft-col ul{list-style:none;}
.ft-col ul li{margin-bottom:9px;}
.ft-col ul li a{color:var(--cream-dim);text-decoration:none;font-size:11px;transition:color .3s;}
.ft-col ul li a:hover{color:var(--gold);}
.ft-btm{display:flex;justify-content:space-between;align-items:center;padding-top:36px;border-top:1px solid rgba(201,168,76,.08);}
.ft-copy{font-size:9px;color:var(--cream-dim);opacity:.5;letter-spacing:.1em;}
.ft-soc{display:flex;gap:18px;}
.ft-soc a{color:var(--cream-dim);text-decoration:none;font-size:9px;letter-spacing:.15em;transition:color .3s;}
.ft-soc a:hover{color:var(--gold);}

::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(201,168,76,.2);border-radius:2px;}
</style>
<style>
/* Admin trigger button — hidden in bottom-right corner */
#adminTrigger{
  position:fixed;bottom:20px;right:20px;z-index:8000;
  width:36px;height:36px;border-radius:50%;
  background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);
  color:rgba(201,168,76,.3);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s;
}
#adminTrigger:hover{background:rgba(201,168,76,.18);color:var(--gold);border-color:var(--gold);}

/* Admin sidebar panel */
#adminPanel{
  position:fixed;top:0;right:0;bottom:0;width:680px;max-width:100vw;
  background:#0d0b08;border-left:1px solid rgba(201,168,76,.2);
  z-index:9000;transform:translateX(100%);transition:transform .4s ease;
  display:flex;flex-direction:column;
  font-family:'Josefin Sans',sans-serif;
}
#adminPanel.open{transform:translateX(0);}

/* Admin header */
.adm-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px 28px;border-bottom:1px solid rgba(201,168,76,.15);
  background:#0a0906;
}
.adm-header-title{
  font-family:'Cormorant Garamond',serif;font-size:20px;
  color:var(--gold);letter-spacing:.15em;
}
.adm-header-sub{font-size:9px;letter-spacing:.25em;color:var(--cream-dim);text-transform:uppercase;margin-top:2px;}
.adm-close{background:none;border:none;color:var(--cream-dim);font-size:20px;cursor:pointer;transition:color .2s;}
.adm-close:hover{color:var(--gold);}

/* Login screen */
#adminLoginWrap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;padding:48px;
}
.adm-login-icon{font-size:48px;margin-bottom:20px;}
.adm-login-title{font-family:'Cormorant Garamond',serif;font-size:28px;color:var(--white);margin-bottom:6px;}
.adm-login-sub{font-size:9px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:36px;}
.adm-input{
  width:100%;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.2);
  color:var(--cream);padding:13px 16px;font-family:'Josefin Sans',sans-serif;
  font-size:12px;letter-spacing:.05em;outline:none;transition:border-color .3s;
  margin-bottom:12px;
}
.adm-input:focus{border-color:var(--gold);background:rgba(201,168,76,.08);}
.adm-login-err{font-size:10px;color:#e07070;letter-spacing:.1em;min-height:16px;margin-bottom:8px;}
.adm-login-btn{
  width:100%;padding:14px;font-family:'Josefin Sans',sans-serif;font-size:10px;
  letter-spacing:.25em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--black);border:none;cursor:pointer;transition:all .3s;font-weight:400;
}
.adm-login-btn:hover{transform:translateY(-1px);box-shadow:0 5px 20px rgba(201,168,76,.3);}
.adm-login-hint{font-size:9px;color:var(--cream-dim);opacity:.4;margin-top:16px;letter-spacing:.15em;}

/* Dashboard */
#adminDashWrap{display:none;flex-direction:column;flex:1;overflow:hidden;}

/* Tabs */
.adm-tabs{display:flex;border-bottom:1px solid rgba(201,168,76,.12);background:#0a0906;}
.adm-tab{
  flex:1;padding:14px;text-align:center;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream-dim);cursor:pointer;
  border-bottom:2px solid transparent;transition:all .25s;
}
.adm-tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(201,168,76,.04);}
.adm-tab:hover:not(.active){color:var(--cream);}

/* Pane */
.adm-pane{flex:1;overflow-y:auto;padding:20px 24px;scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.2) transparent;}

/* Section label */
.adm-section-lbl{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;}

/* Search + filter bar */
.adm-filter-bar{display:flex;gap:8px;margin-bottom:16px;}
.adm-input-sm{
  flex:1;background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.15);
  color:var(--cream);padding:9px 12px;font-family:'Josefin Sans',sans-serif;
  font-size:10px;outline:none;transition:border-color .3s;
}
.adm-input-sm:focus{border-color:var(--gold);}
.adm-select{
  background:rgba(201,168,76,.05);border:1px solid rgba(201,168,76,.15);
  color:var(--cream-dim);padding:9px 10px;font-family:'Josefin Sans',sans-serif;
  font-size:10px;outline:none;cursor:pointer;
}
.adm-select option{background:#111009;}

/* Stone list */
#admStoneList{display:flex;flex-direction:column;gap:6px;}
.adm-stone-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:var(--card);
  border:1px solid rgba(201,168,76,.08);transition:border-color .2s;
}
.adm-stone-row:hover{border-color:rgba(201,168,76,.25);}
.adm-inactive{opacity:.4;}
.adm-stone-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;}
.adm-stone-info{flex:1;min-width:0;}
.adm-stone-name{display:block;font-size:11px;color:var(--cream);}
.adm-stone-meta{display:block;font-size:9px;color:var(--cream-dim);margin-top:2px;letter-spacing:.08em;}
.adm-stone-controls{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.adm-price-tag{font-size:12px;color:var(--gold);font-family:'Cormorant Garamond',serif;min-width:36px;text-align:right;}

/* Buttons */
.adm-btn{
  padding:7px 14px;font-family:'Josefin Sans',sans-serif;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;cursor:pointer;
  border:none;transition:all .25s;font-weight:400;
}
.adm-btn-sm{padding:5px 10px;font-size:8px;}
.adm-btn-gold{background:rgba(201,168,76,.15);color:var(--gold);border:1px solid rgba(201,168,76,.3);}
.adm-btn-gold:hover{background:rgba(201,168,76,.3);}
.adm-btn-green{background:rgba(40,120,60,.2);color:#6dd890;border:1px solid rgba(40,120,60,.4);}
.adm-btn-green:hover{background:rgba(40,120,60,.4);}
.adm-btn-dim{background:rgba(139,32,32,.15);color:#e07070;border:1px solid rgba(139,32,32,.3);}
.adm-btn-dim:hover{background:rgba(139,32,32,.3);}
.adm-btn-red{background:rgba(139,32,32,.2);color:#e07070;border:1px solid rgba(139,32,32,.4);}
.adm-btn-red:hover{background:rgba(139,32,32,.4);}

/* Collection list */
#admCollList{display:flex;flex-direction:column;gap:6px;}
.adm-coll-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--card);border:1px solid rgba(201,168,76,.08);}
.adm-coll-thumb{width:44px;height:44px;object-fit:cover;flex-shrink:0;}

/* Add button bar */
.adm-add-bar{display:flex;justify-content:flex-end;margin-bottom:14px;}

/* Stats grid */
.adm-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;}
.adm-stat-card{background:var(--card);border:1px solid rgba(201,168,76,.1);padding:18px 14px;text-align:center;}
.adm-stat-num{font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--gold);line-height:1;}
.adm-stat-lbl{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);margin-top:5px;}

/* Settings rows */
.adm-setting-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(201,168,76,.07);}
.adm-lbl{font-size:10px;letter-spacing:.12em;color:var(--cream-dim);}

/* Edit modal */
.adm-modal-bd{
  position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.adm-modal-bd.open{opacity:1;pointer-events:all;}
.adm-modal{
  background:#111009;border:1px solid rgba(201,168,76,.25);
  padding:36px;width:500px;max-width:95vw;max-height:90vh;overflow-y:auto;
  position:relative;animation:modalIn .35s ease;
  scrollbar-width:thin;scrollbar-color:rgba(201,168,76,.2) transparent;
}
.adm-modal h3{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--white);margin-bottom:4px;}
.adm-modal-sub{font-size:9px;letter-spacing:.25em;color:var(--gold);text-transform:uppercase;margin-bottom:24px;}
.adm-modal-x{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--cream-dim);font-size:18px;cursor:pointer;}
.adm-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.adm-form-group{margin-bottom:10px;}
.adm-form-lbl{font-size:8px;letter-spacing:.25em;text-transform:uppercase;color:var(--cream-dim);display:block;margin-bottom:6px;}
.adm-color-row{display:flex;gap:10px;align-items:center;}
.adm-color-row input[type=color]{width:44px;height:36px;border:1px solid rgba(201,168,76,.2);background:transparent;cursor:pointer;padding:2px;}
.adm-modal-actions{display:flex;gap:8px;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid rgba(201,168,76,.1);}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE / MOBILE — Batch 1: DIY Studio + Canvas
   Single source of truth: same HTML, layout adjusted via @media.
   ═══════════════════════════════════════════════════════════ */

/* Canvas always scales down to fit its container (internal res stays 700) */
#diyCanvas { max-width: 100%; height: auto; }

@media (max-width: 768px) {
  /* DIY Studio: 3-column → stacked single column */
  .diy-studio {
    grid-template-columns: 1fr;
    height: auto;
  }
  /* Canvas first (most important), then library, then summary */
  .diy-canvas   { order: 1; padding: 20px 14px; }
  .bead-library { order: 2; border-right: none; border-top: 1px solid rgba(201,168,76,.1); max-height: 380px; }
  .diy-summary  { order: 3; border-left: none; border-top: 1px solid rgba(201,168,76,.1); }

  /* Canvas wrap: cap height so it doesn't dominate the screen */
  .bracelet-wrap { min-height: 320px; }

  /* Library grid stays 2-col, category chips wrap */
  .bead-grid { grid-template-columns: repeat(2, 1fr); }

  /* Canvas topbar: allow wrap so wrist/beads/price don't overflow */
  .canvas-topbar { flex-wrap: wrap; gap: 8px; justify-content: center; }
}

@media (max-width: 480px) {
  .diy-canvas { padding: 16px 10px; }
  .bracelet-wrap { min-height: 280px; }
  /* Library a touch shorter on small phones */
  .bead-library { max-height: 320px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — Batch 2: DIY entry button (homepage) + full-screen page
   ═══════════════════════════════════════════════════════════ */

/* Entry button hidden on desktop (PC keeps inline DIY) */
.diy-mobile-entry { display: none; }

@media (max-width: 768px) {
  /* On mobile homepage: hide the inline DIY studio, show entry button.
     (The full-screen /pages/diy is unaffected — it has html.diy-fullscreen.) */
  html:not(.diy-fullscreen) .diy-section { display: none; }

  .diy-mobile-entry {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; text-decoration: none;
    margin: 0 20px; padding: 56px 28px;
    border: 1px solid rgba(201,168,76,.2);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(201,168,76,.04), rgba(8,8,8,0));
    gap: 14px;
  }
  .diy-entry-label {
    font-family: 'Josefin Sans', sans-serif; font-size: 11px;
    letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  }
  .diy-entry-title {
    font-family: 'Cormorant Garamond', serif; font-size: 34px;
    font-weight: 300; line-height: 1.15; color: var(--white);
  }
  .diy-entry-title em { color: var(--gold); font-style: italic; }
  .diy-entry-hint {
    font-family: 'Josefin Sans', sans-serif; font-size: 11px;
    letter-spacing: .08em; color: var(--cream-dim); margin-top: 4px;
  }
  .diy-entry-btn {
    margin-top: 18px; padding: 16px 36px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light, #d4b896));
    color: var(--black);
    font-family: 'Josefin Sans', sans-serif; font-size: 11px;
    letter-spacing: .25em; text-transform: uppercase;
  }
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL — Softer rounded corners (PC + mobile)
   ═══════════════════════════════════════════════════════════ */
.bead-item,
.wrist-info,
.price-disp,
.act-btn,
.search-input,
.order-btn,
.sum-item { border-radius: 8px; }

.bead-cat { border-radius: 6px; }

/* bead-meta wrapper — block on desktop (keeps original stacked mm/price look) */
.bead-meta { display: block; text-align: center; }

/* ── Mobile search icon + inline expand (hidden on desktop) ── */
.bead-search-icon { display: none; }
.bead-cats-wrap { display: block; }   /* transparent wrapper on desktop */
.bead-search-inline { display: none; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL — Prevent horizontal overflow on all pages
   ═══════════════════════════════════════════════════════════ */
html { overflow-x: hidden; }

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — All pages
   Breakpoint: 768px  |  PC layout completely unaffected
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── GLOBAL SPACING ──
     PC uses 60-80px side padding — compress to 20px on mobile */
  section { padding: 64px 20px; }
  footer  { padding: 48px 20px 32px; }

  /* ── NAV ── */
  #nav { padding: 0 20px; }

  /* ════════════════════════════════
     HOMEPAGE — HERO
     Layout: "Wear Your" floats above bracelet arc,
             "Energy" sits inside the ring — matching PC depth effect.
     ════════════════════════════════ */
  .hero {
    padding: 0 !important; overflow: hidden;
    align-items: flex-start !important;
    justify-content: center !important;
    height: calc(100svh - 54px) !important; /* hero + 48px trust bar = 1 screen */
  }
  .hero-content {
    padding: 74px 28px 48px;   /* 74px = nav height, content starts right below */
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    width: 100%; box-sizing: border-box;
  }

  /* Eyebrow: keep but shrink — background decoration, not a headline */
  .hero-eyebrow,
  .hero-eyebrow-wrap,
  [class*="hero-eye"] { font-size: 7px !important; letter-spacing: .18em; }

  /* Bracelet: scale(0.5) → display width ~340px (slightly wider than title ~260px).
     top:35% → center lands at ~295px (iPhone 844px), which is the "Energy" line.
     Upper arc appears at the bottom of "Wear Your", lower arc below "Energy".
     This is the same depth illusion as PC: "Wear Your" floats above, "Energy" is ringed. */
  .hero-bracelet-wrap {
    top: 41%;  /* bracelet upper arc ≈ 211px / 844px ≈ 25% when content starts at 74px */
    transform: translate(-50%, -50%) scale(0.53);
    opacity: 0.90;
  }

  /* Title: 72px fixed — bypasses clamp, guaranteed to override */
  .hero-title { font-size: 72px !important; text-align: center; line-height: 1.05; }

  /* Hide long subtitle */
  .hero-subtitle { display: none; }

  /* CTAs: stack vertically, full width */
  .hero-ctas {
    flex-direction: column; align-items: stretch;
    gap: 12px; margin-top: 98px; width: 100%;
  }
  .btn-primary, .btn-outline {
    padding: 16px 24px; text-align: center;
    width: 100%; box-sizing: border-box;
  }

  /* Hide scroll indicator */
  .hero-scroll { display: none; }

  /* ════════════════════════════════
     HOMEPAGE — TRUST BAR
     ════════════════════════════════ */
  .trust-bar {
    flex-wrap: nowrap !important; gap: 0 !important; padding: 10px 12px !important;
    justify-content: center !important; align-items: center !important;
    height: 48px !important; box-sizing: border-box !important; overflow: visible !important;
  }
  .trust-sep { display: inline !important; font-size: 8px; padding: 0 4px; opacity: .5; }
  .trust-item {
    width: auto !important; white-space: nowrap !important;
    font-size: 7px !important; padding: 0 !important; letter-spacing: .08em !important;
  }

  /* ════════════════════════════════
     HOMEPAGE — ENERGY / 五行区
     ════════════════════════════════ */
  .energy-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Hide long body paragraphs — keep numbers and short intro */
  .energy-text p { display: none; }
  .energy-text p:first-of-type { display: block; } /* keep first short line */
  .energy-stats {
    gap: 16px; margin-top: 24px;
    justify-content: flex-start;
  }
  .stat-num  { font-size: 28px; }
  .stat-item { padding-left: 14px; }

  /* Five-elements: square on mobile */
  .five-elements-wrap { aspect-ratio: 1 / 1; }

  /* ════════════════════════════════
     HOMEPAGE — COLLECTION PREVIEW
     ════════════════════════════════ */
  .coll-tabs { gap: 0; overflow-x: auto; justify-content: flex-start; padding: 0; }
  .coll-tab  { padding: 12px 20px; flex-shrink: 0; }
  .coll-cover { width: 220px; }
  .coll-card  { flex: 0 0 240px; }
  .coll-cover-title { font-size: 22px; }

  /* ════════════════════════════════
     HOMEPAGE — COMMUNITY / LOOKBOOK
     ════════════════════════════════ */
  .comm-grid { grid-template-columns: repeat(2, 1fr); }

  /* ════════════════════════════════
     HOMEPAGE — DIY ENTRY BUTTON
     ════════════════════════════════ */
  .diy-mobile-entry { margin: 0 16px; }

  /* ════════════════════════════════
     GENERAL SECTION TYPOGRAPHY
     ════════════════════════════════ */
  .section-label { font-size: 8px; }
  .section-title { font-size: clamp(28px, 8vw, 48px); }

  /* ════════════════════════════════
     PRODUCT DETAIL PAGE
     ════════════════════════════════ */
  /* Outer wrapper: compress padding */
  .pdp-outer, [class*="pdp-wrap"] { padding: 80px 20px 60px !important; }

  /* Two-column grid → single column stack */
  .pdp-grid, [style*="grid-template-columns:1fr 1fr"][style*="gap:80px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Main image: full width, taller */
  .pdp-img-main, [id="pdpMainImg"] { width: 100%; height: auto; }

  /* Add to Cart: full width */
  .pdp-atc, [class*="atc"], .order-btn {
    width: 100% !important; box-sizing: border-box;
  }

  /* Trust items: vertical list */
  .pdp-trust { flex-direction: column; gap: 8px; }

  /* ════════════════════════════════
     COLLECTION / SHOP PAGE
     ════════════════════════════════ */
  .shop-grid-wrap { padding: 40px 16px 60px !important; }

  /* 4-col → 2-col */
  .shop-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Product name: prevent overflow */
  .prod-name { font-size: 14px; }
  .prod-info { padding: 12px 8px; }

  /* ════════════════════════════════
     CART PAGE
     ════════════════════════════════ */
  /* Outer wrapper */
  .cart-outer, [style*="padding:120px 60px"] {
    padding: 80px 16px 60px !important;
  }

  /* Cart sidebar: full-width on mobile */
  .cart-sb { width: 100%; }

  /* ════════════════════════════════
     GUIDE PAGE — mobile
     ════════════════════════════════ */

  /* ── 全局：容器 padding 缩小 + 防溢出 ── */
  .learn-page  { overflow-x: hidden !important; }
  .lrn-hero    { padding: 40px 20px 32px !important; }
  .lrn-tabs    { padding: 0 16px !important; top: 54px !important; }
  .lrn-tab     { padding: 10px 14px !important; font-size: 10px !important; }
  .lrn-section { padding: 40px 20px 48px !important; }

  /* ── Stone Guide：卡片上下堆叠 ── */
  .sg-wrap { overflow: hidden !important; }
  .sg-tabs { gap: 3px !important; }
  .sg-tab  { padding: 8px 12px !important; font-size: 9px !important; }
  .sg-stack-wrap {
    width: 100% !important;
    height: 520px !important;
    margin-right: 0 !important;
  }
  .sg-back-2, .sg-back-3 { display: none !important; }
  .sg-card-inner { flex-direction: column !important; }
  .sg-card-img {
    width: 100% !important;
    height: 220px !important;
    flex-shrink: 0 !important;
  }
  .sg-card-img::after {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 60% !important;
    background: linear-gradient(to bottom, transparent 0%, #0d0b08 100%) !important;
  }
  .sg-card-body { padding: 20px 20px 28px !important; }
  .sg-card-name { font-size: 24px !important; }

  /* ── Sizing Guide ── */
  .sz-outer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    overflow: hidden !important;
  }
  .sz-outer-grid > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .sz-outer-grid > div > div:has(table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .sz-method-cols {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sz-method-cols > div > div:first-child {
    font-size: 9px !important;
    letter-spacing: .12em !important;
  }
  .sz-method-cols > div > div:last-child {
    font-size: 12px !important;
  }
  .sz-steps-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .sz-outer-grid > div:last-child > div:first-child {
    word-wrap: break-word !important;
    font-size: 9px !important;
  }
  .sz-outer-grid table { font-size: 10px !important; }
  .sz-outer-grid th,
  .sz-outer-grid td { padding: 5px 3px !important; }

  /* ── Our Craft：grid 单列 ── */
  .craft-highlight-row {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .craft-highlight-row.reverse { direction: ltr !important; }
  .chr-visual { min-height: 220px !important; }
  .chr-body   { padding: 28px 20px !important; }
  .chr-stats  { flex-wrap: wrap !important; gap: 16px !important; }
  .chr-title  { font-size: 22px !important; }
  .chr-desc   { font-size: 13px !important; max-width: 100% !important; }

  /* ── Stone Detail 抽屉（移动端全屏） ── */
  .sg-detail-panel {
    width: 100% !important;
    border-radius: 0 !important;
    padding: 20px !important;
    padding-top: max(60px, env(safe-area-inset-top, 60px)) !important;
  }
  .sg-detail-close {
    font-size: 14px !important;
    color: var(--gold) !important;
    position: sticky !important;
    top: 0 !important;
    background: #0d0b08 !important;
    padding: 12px 0 !important;
    margin-bottom: 20px !important;
    z-index: 10 !important;
  }
  .det-pair { grid-template-columns: 1fr !important; }

  /* ── Energy Properties grid 4→2 列 ── */
  .intent-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .chakra-bar  { grid-template-columns: repeat(4, 1fr) !important; }

  /* ── Care Guide grid 3→1 列 ── */
  .care-grid    { grid-template-columns: 1fr !important; }
  .cleanse-row  { grid-template-columns: repeat(2, 1fr) !important; }

  /* ════════════════════════════════
     CART PAGE — mobile
     ════════════════════════════════ */
  .cart-page-wrap {
    padding: 72px 20px 40px !important;
  }
  .cart-summary-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ════════════════════════════════
     SUPPORT PAGE — mobile
     ════════════════════════════════ */

  /* ── 全局：容器 padding 缩小 + 防溢出 ── */
  .sup-hero    { padding: 40px 20px 32px !important; }
  .sup-tabs    { padding: 0 16px !important; }
  .sup-tab     { padding: 12px 14px !important; font-size: 10px !important; }
  .sup-section { padding: 40px 20px 48px !important; }

  /* ── Shipping：3列 → 1列 ── */
  .ship-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Contact：2列 → 1列 ── */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ── Contact form 全宽 ── */
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px !important;
  }

  /* ════════════════════════════════
     FOOTER
     ════════════════════════════════ */
  /* footer 顶部(品牌+三列)移动端规则统一在 theme.liquid 管理,避免双文件冲突 */
  .ft-btm {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding-top: 24px;
  }
  .ft-soc { justify-content: center; }
  .ft-policy { flex-wrap: wrap; gap: 8px 16px; justify-content: center; }

  .ft-disclaimer { font-size: 8px; text-align: center; }

}

/* ── Smaller phones (375px and under) ── */
@media (max-width: 480px) {
  .hero-title  { font-size: clamp(48px, 13vw, 72px); }
  .coll-cover  { width: 185px; }
  .coll-card   { flex: 0 0 200px; }
}

/* ── OUR CRAFT — 三段 hero highlights(由 learn-page 迁入,首页/Guide 通用) ── */
/* ── OUR CRAFT — three hero highlights ── */
.craft-highlight-row { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:2px; min-height:360px; }
.craft-highlight-row.reverse { direction:rtl; }
.craft-highlight-row.reverse > * { direction:ltr; }
.chr-visual { position:relative; overflow:hidden; min-height:360px; }
.chr-bg { position:absolute; inset:0; }
.chr-orbs { position:absolute; inset:0; }
.chr-orb  { position:absolute; border-radius:50%; box-shadow:0 8px 32px rgba(0,0,0,.6); transition:transform .6s ease; }
.chr-visual:hover .chr-orb { transform:scale(1.06) translateY(-6px); }
.chr-body { background:#0d0b08; padding:52px 48px; display:flex; flex-direction:column; justify-content:center; }
.chr-num   { font-family:'Cormorant Garamond',serif; font-size:48px; font-weight:300; color:rgba(201,168,76,.15); line-height:1; margin-bottom:12px; }
.chr-title { font-family:'Cormorant Garamond',serif; font-size:clamp(24px,2.5vw,34px); font-weight:300; color:var(--white); margin-bottom:16px; line-height:1.15; }
.chr-desc  { font-family:'Josefin Sans',sans-serif; font-size:14px; letter-spacing:.06em; color:rgba(160,144,112,.85); line-height:1.85; margin-bottom:28px; max-width:400px; }
.chr-stats { display:flex; gap:24px; }
.chr-stat  { display:flex; flex-direction:column; gap:4px; }
.chr-stat-num { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:300; color:var(--gold); line-height:1; }
.chr-stat-lbl { font-family:'Josefin Sans',sans-serif; font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:rgba(160,144,112,.65); }
.chr-features { display:flex; flex-direction:column; gap:10px; }
.chr-feat { font-family:'Josefin Sans',sans-serif; font-size:13px; letter-spacing:.06em; color:rgba(160,144,112,.85); }
.chr-card-mock { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:32px; }
.chr-card-inner { width:220px; background:#141008; border:1px solid rgba(201,168,76,.25); border-radius:8px; padding:20px 18px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.chr-card-top { margin-bottom:14px; }
.chr-card-divider { height:1px; background:rgba(201,168,76,.12); margin:12px 0; }
.chr-card-row { display:flex; justify-content:space-between; align-items:center; font-family:'Josefin Sans',sans-serif; font-size:10px; letter-spacing:.1em; color:rgba(160,144,112,.7); margin-bottom:8px; }
.chr-video { display:flex; align-items:center; justify-content:center; background:#0a1208; }
.chr-video video, .chr-video img { width:100%; height:100%; object-fit:cover; display:block; }

/* ── FIVE ELEMENTS — 五条横向 banner(Guide 页) ── */
.lrn-sec-intro{font-family:'Josefin Sans',sans-serif;font-size:13px;letter-spacing:.04em;color:rgba(160,144,112,.85);line-height:1.8;margin-bottom:32px;max-width:560px;}
.fe-banners{display:flex;flex-direction:column;border:1px solid rgba(201,169,110,.14);border-radius:4px;overflow:hidden;}
.fe-banner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:150px;padding:0 38px;border-bottom:1px solid rgba(201,169,110,.14);text-decoration:none;background-size:cover;background-position:center;transition:filter .35s ease;}
.fe-banner:last-child{border-bottom:none;}
.fe-banner:hover{filter:brightness(1.16);}
.fe-banner-head{min-width:260px;}
.fe-banner-title{display:flex;align-items:baseline;gap:13px;}
.fe-en{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:300;color:#f2e6cf;letter-spacing:.03em;line-height:1;}
.fe-cn{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:300;color:var(--fe-accent);line-height:1;}
.fe-banner-mean{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--fe-accent);margin-top:12px;}
.fe-banner-beads{display:flex;align-items:center;gap:18px;}
.fe-beads-lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,230,207,.45);}
.fe-beads{display:flex;gap:12px;}
.fe-bead{width:46px;height:46px;border-radius:50%;border:1px solid rgba(201,169,110,.3);background-size:cover;background-position:center;display:block;transition:transform .35s ease;}
.fe-banner:hover .fe-bead{transform:translateY(-4px);}
.fe-arrow{font-style:normal;color:var(--fe-accent);font-size:18px;opacity:.65;}
@media(max-width:768px){
  #five-elements{padding-left:0 !important;padding-right:0 !important;}
  .fe-banners{border-left:none;border-right:none;border-radius:0;}
  .fe-banner{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:16px 20px;min-height:0;position:relative;}
  .fe-banner::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0;
    background:linear-gradient(to right,#080808 0%,rgba(8,8,8,0) 14%,rgba(8,8,8,0) 86%,#080808 100%);}
  .fe-banner > *{position:relative;z-index:1;}
  .fe-en{font-size:26px;} .fe-cn{font-size:21px;}
  .fe-banner-head{min-width:0;}
  .fe-banner-mean{margin-top:7px;font-size:10px;}
  .fe-beads-lbl{display:none;}
  .fe-beads{gap:9px;}
  .fe-bead{width:30px;height:30px;}
}

/* ── OUR CRAFT v3 — 放大媒体 + 景深 + 边缘渐变(首页) ── */
.oc-row{display:flex;align-items:center;gap:40px;max-width:1180px;margin:0 auto 110px;}
.oc-row:last-child{margin-bottom:0;}
.oc-row.reverse{flex-direction:row-reverse;}
.oc-text{flex:1;min-width:0;}
.oc-media{position:relative;min-width:0;}
.oc-cards .oc-media{flex:1.45;}
.oc-video .oc-media{flex:1.55;}
.oc-cards .oc-media::before{content:'';position:absolute;left:50%;top:46%;width:106%;height:104%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at 50% 46%,#1b2438 0%,#121a2b 40%,rgba(10,14,22,0) 74%);pointer-events:none;z-index:0;}
.oc-mini-title{font-family:'Cormorant Garamond',serif;font-weight:300;color:#f2e6cf;font-size:38px;line-height:1.1;margin:12px 0 10px;}
.oc-lead{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:rgba(201,169,110,.85);margin-bottom:24px;}
.oc-free{display:inline-block;font-family:'Josefin Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#0a0907;background:linear-gradient(135deg,#c8a96e,#e8d4a0,#c8a96e);padding:5px 14px;border-radius:999px;}
.oc-pt{display:flex;align-items:center;gap:12px;font-size:13.5px;letter-spacing:.04em;color:rgba(242,230,207,.85);margin:13px 0;}
.oc-dot{width:5px;height:5px;border-radius:50%;background:#c8a96e;flex-shrink:0;}
.oc-fan{position:relative;height:405px;z-index:1;}
.oc-fan-hint{text-align:center;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(201,169,110,.5);margin-top:8px;position:relative;z-index:1;}
.oc-fan-card{position:absolute;left:50%;bottom:52px;width:200px;height:300px;transform-origin:50% 116%;transform:translateX(-50%) rotate(var(--r));border-radius:9px;}
.oc-fan-card:not(.oc-flip){background:#12100a;border:0.5px solid rgba(201,169,110,.4);background-size:cover;background-position:center;box-shadow:0 24px 48px -16px rgba(0,0,0,.9);overflow:hidden;}
.oc-flip{perspective:1300px;cursor:pointer;}
.oc-flip-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d;}
.oc-flip.is-flipped .oc-flip-inner{transform:rotateY(180deg);}
@media(hover:hover) and (min-width:769px){ .oc-flip:hover .oc-flip-inner{transform:rotateY(180deg);} }
.oc-card-face{position:absolute;inset:0;border-radius:9px;background:#12100a;border:0.5px solid rgba(201,169,110,.4);background-size:cover;background-position:center;box-shadow:0 24px 48px -16px rgba(0,0,0,.9);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.oc-back{transform:rotateY(180deg);background-color:#0d0b08;}
.oc-card-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px;}
.oc-card-ph span{font-size:11px;letter-spacing:.24em;color:#c8a96e;text-transform:uppercase;}
.oc-card-ph small{font-family:'Cormorant Garamond',serif;font-size:15px;color:rgba(242,230,207,.72);}
.oc-qr{width:42px;height:42px;border:0.5px solid rgba(201,169,110,.5);border-radius:4px;display:block;}
.oc-video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#0c1a10;z-index:1;}
.oc-video-el{width:100%;height:100%;object-fit:cover;display:block;}
.oc-video .oc-media::after{content:'';position:absolute;left:0;top:0;width:38%;height:100%;background:linear-gradient(to right,#080808 0%,rgba(8,8,8,0) 100%);pointer-events:none;z-index:2;}
.oc-mute{position:absolute;bottom:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0.5px solid rgba(242,230,207,.5);background:rgba(10,9,7,.45);color:#f2e6cf;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:3;}
.oc-mute.is-on{color:#c8a96e;border-color:#c8a96e;}
.oc-video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#c8a96e;}
.oc-play{width:62px;height:62px;border-radius:50%;border:0.5px solid rgba(242,230,207,.6);display:flex;align-items:center;justify-content:center;font-size:20px;color:#f2e6cf;}
.oc-video-cap{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;color:rgba(201,169,110,.7);margin-top:12px;letter-spacing:.06em;}
@media(max-width:768px){
  #our-craft{padding:80px 20px !important;}
  .oc-row,.oc-row.reverse{flex-direction:column;gap:28px;margin-bottom:64px;}
  .oc-cards .oc-media,.oc-video .oc-media,.oc-text{flex:none;width:100%;}
  .oc-fan{height:300px;margin-top:0;}
  .oc-fan-card{bottom:70px;}
  .oc-fan-hint{margin-top:22px;}
  .oc-fan-card{width:128px;height:192px;bottom:24px;}
  .oc-mini-title{font-size:28px;}
  .oc-text{text-align:center;}
  .oc-pt{justify-content:center;}
  .oc-video .oc-media::after{display:block;left:0;top:auto;bottom:0;width:100%;height:40%;background:linear-gradient(to bottom,rgba(8,8,8,0) 0%,#080808 100%);}
}

/* ── Five Elements — 悬浮 Shop Now(首页)── */
.fe-cta{display:inline-flex;align-items:center;gap:9px;color:var(--fe-accent);}
.fe-shop{font-family:'Josefin Sans',sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(10px);transition:opacity .3s ease,transform .3s ease;}
.fe-banner:hover .fe-shop{opacity:1;transform:translateX(0);}
@media(max-width:768px){ .fe-shop{opacity:1;transform:none;} }