:root{
  --ink:#0b3047;--ink-2:#36566b;--muted:#5f7a8a;
  --sea:#0a86bf;--sea-2:#33bce1;--foam:#e3f4f8;
  --sand:#f3f9fb;--card:#ffffff;--line:#d9e9ef;
  --coral:#0a8fc7;--coral-2:#0774a6;
  --radius:16px;--shadow:0 6px 24px rgba(10,80,120,.10);
  --max:1100px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;font-family:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;color:var(--ink);background:var(--sand);line-height:1.7;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--sea)}
h1,h2,h3{line-height:1.3;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,6vw,2.6rem)}
h2{font-size:clamp(1.3rem,4.5vw,1.9rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.section{padding-top:48px;padding-bottom:48px}
.section--white{background:#fff}
.eyebrow{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sea);font-weight:700;margin-bottom:.4em}
.lead{font-size:1.05rem;color:var(--ink-2)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(247,243,236,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:58px}
.logo{font-weight:800;letter-spacing:.18em;font-size:1.3rem;color:var(--ink);text-decoration:none}
.logo small{display:block;font-size:.6rem;letter-spacing:.1em;font-weight:500;color:var(--muted);margin-top:-4px}
.nav{display:none;gap:22px}
.nav a{color:var(--ink);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--sea)}
.menu-btn{background:none;border:0;padding:8px;font-size:1.5rem;color:var(--ink);cursor:pointer}
.drawer{display:none;border-top:1px solid var(--line);background:var(--sand)}
.drawer.open{display:block}
.drawer a{display:block;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
@media(min-width:860px){.nav{display:flex}.menu-btn{display:none}.drawer{display:none!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:999px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem;font-family:inherit;transition:transform .15s,background .15s}
.btn:active{transform:scale(.97)}
.btn--coral{background:var(--coral);color:#fff}
.btn--coral:hover{background:var(--coral-2)}
.btn--sea{background:var(--sea);color:#fff}
.btn--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn--block{width:100%}
.btn--sm{padding:10px 16px;font-size:.9rem}

/* hero */
.hero{position:relative;color:#fff;min-height:78vh;display:flex;align-items:flex-end;background:#0b2433 center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,36,51,0) 25%,rgba(11,36,51,.55) 50%,rgba(11,36,51,.92))}
.hero__in{position:relative;z-index:1;padding:40px 16px 48px;max-width:var(--max);margin:0 auto;width:100%}
.hero h1{color:#fff;margin-bottom:.3em}
.hero p{font-size:1.05rem;opacity:.92;max-width:34em}
.hero .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* quiz teaser cards */
.tiles{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{display:block;background:var(--card);border-radius:var(--radius);padding:20px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);position:relative;overflow:hidden}
.tile__icon{font-size:1.8rem;margin-bottom:6px}
.tile h3{margin-bottom:.25em}
.tile p{color:var(--muted);margin:0;font-size:.95rem}
.tile__go{position:absolute;right:18px;top:20px;color:var(--sea);font-weight:700}

/* product grid */
.grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.grid{grid-template-columns:repeat(4,1fr)}}
.pcard{background:var(--card);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);display:flex;flex-direction:column}
.pcard__img{aspect-ratio:1/1;background:var(--foam);overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .pcard__img img{transform:scale(1.04)}
.pcard__body{padding:12px 12px 14px}
.pcard__name{font-weight:700;font-size:.98rem;line-height:1.35}
.pcard__en{font-size:.78rem;color:var(--muted)}
.price{margin-top:6px;font-weight:800;color:var(--coral-2)}
.price s{color:var(--muted);font-weight:400;font-size:.85em;margin-left:6px}
.badge{display:inline-block;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--foam);color:var(--sea);margin-bottom:6px}

/* filters */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:600;cursor:pointer;font-family:inherit;font-size:.9rem;color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* compare */
.compare{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:.95rem}
.compare th,.compare td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare th{background:var(--foam);font-size:.85rem}
.compare tr:last-child td{border-bottom:0}

/* reviews */
.reviews{display:grid;gap:12px}
@media(min-width:700px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.review__meta{font-size:.85rem;color:var(--muted);margin-top:8px}
.placeholder{border:2px dashed var(--line);border-radius:var(--radius);padding:24px;text-align:center;color:var(--muted)}

/* product page */
.pp{display:grid;gap:24px;padding:20px 0 120px}
.pp>*{min-width:0}
@media(min-width:860px){.pp{grid-template-columns:1.1fr 1fr;padding-bottom:60px}}
.gallery{position:relative}
.gallery__main{border-radius:var(--radius);overflow:hidden;background:#fff;aspect-ratio:1/1}
.gallery__main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.thumbs button{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:#fff}
.thumbs button.on{border-color:var(--sea)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.pp h1{font-size:1.6rem;margin-bottom:.1em}
.pp .en{color:var(--muted);margin-bottom:10px}
.pp .price{font-size:1.4rem}
.specs{width:100%;border-collapse:collapse;font-size:.95rem;margin:12px 0}
.specs td{padding:9px 0;border-bottom:1px solid var(--line)}
.specs td:first-child{color:var(--muted);width:34%}
.note{background:var(--foam);border-radius:12px;padding:14px 16px;font-size:.92rem;color:var(--ink-2)}
.sticky-buy{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center;z-index:40;box-shadow:0 -6px 20px rgba(11,36,51,.08)}
.sticky-buy .price{margin:0;font-size:1.1rem;flex:1}
@media(min-width:860px){.sticky-buy{position:static;box-shadow:none;border:0;padding:0;margin:16px 0}}

/* size helper */
.sizebox{background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;margin:16px 0}
.sizebox label{display:block;font-weight:600;margin-bottom:6px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
input[type=number],input[type=text],input[type=tel],select,textarea{font-family:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%}
.check{display:flex;gap:8px;align-items:center;font-weight:500!important}
.check input{width:20px;height:20px}
.result{margin-top:10px;font-weight:700;color:var(--sea)}

/* quiz */
.quiz{max-width:560px;margin:0 auto;padding:24px 0 60px}
.qtabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#fff;padding:6px;border-radius:999px;box-shadow:var(--shadow);margin-bottom:20px}
.qtabs button{border:0;background:none;padding:12px;border-radius:999px;font-weight:700;font-family:inherit;font-size:.95rem;cursor:pointer;color:var(--ink-2)}
.qtabs button.on{background:var(--ink);color:#fff}
.qcard{background:#fff;border-radius:22px;padding:24px 20px;box-shadow:var(--shadow);min-height:420px;display:flex;flex-direction:column}
.progress{height:6px;background:var(--foam);border-radius:99px;overflow:hidden;margin-bottom:20px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--sea-2),var(--coral));transition:width .3s}
.qstep{font-size:.85rem;color:var(--muted);font-weight:600}
.qtitle{font-size:1.35rem;font-weight:800;margin:6px 0 18px}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;padding:16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font-family:inherit;font-size:1rem;cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--sea-2);background:var(--foam)}
.opt .emo{font-size:1.5rem;flex:none;width:32px;text-align:center}
.opt small{display:block;color:var(--muted);font-size:.82rem}
.qback{margin-top:auto;padding-top:16px;background:none;border:0;color:var(--muted);font-family:inherit;cursor:pointer;align-self:flex-start}
.qresult{text-align:center}
.qresult .big{font-size:3rem;margin:6px 0}
.qresult h2{margin-bottom:.2em}
.qresult .why{text-align:left;background:var(--foam);border-radius:14px;padding:14px 16px;margin:16px 0;font-size:.95rem}
.qresult .grid{text-align:left;margin:16px 0}
.share-card{background:linear-gradient(160deg,var(--sea),#0b2433);color:#fff;border-radius:20px;padding:24px;margin:10px 0}

/* order */
.form{display:grid;gap:14px;max-width:560px;margin:0 auto}
.form label{font-weight:600;display:block;margin-bottom:6px}
.form .hint{font-size:.85rem;color:var(--muted);font-weight:400}
.summary{white-space:pre-wrap;background:#fff;border:1.5px dashed var(--sea-2);border-radius:14px;padding:16px;font-size:.92rem}

/* article */
.article{max-width:720px;margin:0 auto;padding:24px 0 60px}
.article h2{margin-top:1.6em}
.article table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.article th,.article td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.article th{background:var(--foam)}
.tablewrap{overflow-x:auto}

/* footer */
.ftr{background:var(--ink);color:#c9d6de;padding:40px 0 calc(40px + env(safe-area-inset-bottom));font-size:.92rem}
.ftr a{color:#fff;text-decoration:none}
.ftr__cols{display:grid;gap:24px}
@media(min-width:700px){.ftr__cols{grid-template-columns:2fr 1fr 1fr}}
.ftr h4{color:#fff;margin:0 0 8px}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin:6px 0}
.ftr .legal{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#8ea3b0}
.body--pp .ftr{padding-bottom:110px}
@media(min-width:860px){.body--pp .ftr{padding-bottom:40px}}
.crumbs{font-size:.85rem;color:var(--muted);padding-top:14px}
.crumbs a{color:var(--muted)}

/* rent */
.topbar{display:block;background:var(--coral);color:#fff;text-align:center;font-weight:700;font-size:.88rem;padding:9px 16px;text-decoration:none;line-height:1.4}
.topbar:hover{background:var(--coral-2)}
.section--rent{padding-top:24px;padding-bottom:8px}
.rent{position:relative;background:linear-gradient(150deg,#fff 0%,#fff 55%,#ffe6dd 100%);border:2px solid var(--coral);border-radius:22px;padding:24px 20px;box-shadow:0 10px 30px rgba(255,111,79,.18)}
.rent__tag{display:inline-block;background:var(--coral);color:#fff;font-weight:800;font-size:.8rem;padding:4px 12px;border-radius:999px;margin-bottom:10px}
.rent__title{font-size:1.4rem;margin-bottom:8px}
.rent__price{font-size:1rem;color:var(--ink-2);margin-bottom:12px}
.rent__price b{font-size:2.2rem;color:var(--coral-2);font-weight:800;margin-right:4px}
.rent__price span{display:inline-block;margin-left:10px;font-size:.9rem;background:var(--foam);color:var(--sea);padding:3px 10px;border-radius:999px;font-weight:700}
.rent__list{list-style:none;padding:0;margin:0 0 16px}
.rent__list li{padding:6px 0;border-bottom:1px dashed var(--line)}
.rent__list li:last-child{border-bottom:0}
.rent__btns{display:flex;flex-wrap:wrap;gap:10px}
.rent__btns .btn{flex:1;min-width:150px}
.rent-strip{display:block;margin:12px 0;padding:12px 14px;border-radius:12px;background:#ffe6dd;color:var(--coral-2);font-weight:700;text-decoration:none;font-size:.92rem}
.steps{padding-left:1.2em}
.steps li{margin:8px 0}
.sticky-buy .btn--sm{padding:12px 14px}

.btn{white-space:nowrap}
@media(max-width:859px){.sticky-buy .price s{display:none}.sticky-buy .price{font-size:1.05rem}.sticky-buy .btn{padding:12px 16px;font-size:.95rem}}
.rent__btns .btn{min-width:0}

.nopocket{font-size:.75rem;color:var(--muted);font-weight:500}
.sticky-buy .nopocket{display:block;margin-top:-2px}
.pocket{background:#fff;border:1.5px solid var(--line);border-left:4px solid var(--sea);border-radius:12px;padding:14px 16px;margin:14px 0;font-size:.93rem}
.pocket p{margin:8px 0}
.pocket__price span{display:block;font-size:.82rem;color:var(--muted)}
.total{font-weight:800;font-size:1.1rem;color:var(--coral-2);text-align:center}

/* floating contact */
.fab{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.body--pp .fab{bottom:calc(96px + env(safe-area-inset-bottom))}
@media(min-width:860px){.body--pp .fab{bottom:24px}}
.fab__btn{width:64px;height:64px;border-radius:50%;border:0;background:var(--coral);color:#fff;font-size:1.6rem;box-shadow:0 8px 24px rgba(255,111,79,.45);cursor:pointer;position:relative;animation:fabpulse 2.4s ease-in-out infinite}
.fab__label{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.68rem;font-weight:700;padding:1px 8px;border-radius:999px;white-space:nowrap}
.fab__close{display:none}
.fab.open .fab__open{display:none}.fab.open .fab__close{display:inline}.fab.open .fab__btn{animation:none;background:var(--ink)}
.fab__menu{display:none;flex-direction:column;gap:8px}
.fab.open .fab__menu{display:flex}
.fab__item{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);text-decoration:none;font-weight:700;padding:10px 16px 10px 10px;border-radius:999px;box-shadow:var(--shadow)}
.fab__ico{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.85rem}
.fab__item--ig .fab__ico{background:linear-gradient(45deg,#f9a825,#e1306c,#833ab4)}
.fab__item--fb .fab__ico{background:#1877f2;font-size:1.1rem}
@keyframes fabpulse{0%,100%{box-shadow:0 8px 24px rgba(255,111,79,.45)}50%{box-shadow:0 8px 24px rgba(255,111,79,.45),0 0 0 10px rgba(255,111,79,.15)}}
@media(prefers-reduced-motion:reduce){.fab__btn{animation:none}}
/* order calc */
.fixed{padding:12px 14px;border-radius:12px;background:var(--foam);color:var(--sea);font-weight:700}
.calc{background:#fff;border:2px solid var(--coral);border-radius:16px;padding:14px 16px}
.calc__row{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.calc__row b{font-size:1.3rem;color:var(--coral-2)}
.calc__sub{font-size:.85rem;color:var(--muted);margin:2px 0 8px}
.form .row span{color:var(--muted)}

/* brand (logo palette) */
.hdr{background:rgba(243,249,251,.94)}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:40px;width:auto}
.logo small{margin:0;font-size:.7rem;color:var(--sea);letter-spacing:.08em;border-left:1.5px solid var(--line);padding-left:10px}
.ftr{background:linear-gradient(170deg,#0a6fa3,#0b3047 70%)}
.ftr img{height:58px;width:auto}
.topbar{background:linear-gradient(90deg,#0a86bf,#1fa9db)}
.topbar:hover{background:linear-gradient(90deg,#0774a6,#0a8fc7)}
.btn--coral{background:linear-gradient(135deg,#0a8fc7,#22aee0);box-shadow:0 6px 16px rgba(10,143,199,.28)}
.btn--coral:hover{background:linear-gradient(135deg,#0774a6,#0a8fc7)}
.btn--sea{background:#0b3047}
.hero::after{background:linear-gradient(180deg,rgba(11,48,71,0) 25%,rgba(11,48,71,.55) 50%,rgba(8,40,62,.92))}
.eyebrow{color:#0a86bf}
.rent{background:linear-gradient(150deg,#fff 0%,#fff 50%,#d8f1f9 100%);border-color:#33bce1;box-shadow:0 10px 30px rgba(51,188,225,.22)}
.rent__tag{background:linear-gradient(90deg,#0a86bf,#33bce1)}
.rent__price b{color:#0a86bf}
.rent-strip{background:#dff3fa;color:#0774a6}
.price{color:#0774a6}
.calc{border-color:#33bce1}
.calc__row b{color:#0774a6}
.fab__btn{background:linear-gradient(135deg,#0a8fc7,#33bce1);box-shadow:0 8px 24px rgba(10,143,199,.45)}
@keyframes fabpulse{0%,100%{box-shadow:0 8px 24px rgba(10,143,199,.45)}50%{box-shadow:0 8px 24px rgba(10,143,199,.45),0 0 0 10px rgba(51,188,225,.2)}}
.progress i{background:linear-gradient(90deg,#33bce1,#0a86bf)}
.share-card{background:linear-gradient(160deg,#33bce1,#0a6fa3 55%,#0b3047)}
.sizetable{margin-top:12px}
.sizetable summary{cursor:pointer;color:var(--sea);font-weight:700}
.measure{padding-left:1.2em;font-size:.92rem;margin:10px 0}
.sizetable tr.on td{background:#dff3fa;font-weight:800;color:#0774a6}
@media(max-width:400px){.logo small{display:none}}
/* v3: i18n, sale tag, scuba */
.hdr__right{display:flex;align-items:center;gap:6px}
.lang{font-size:.8rem;font-weight:700;border:1.5px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--ink);text-decoration:none;white-space:nowrap}
.lang:hover{border-color:var(--sea);color:var(--sea)}
.sale-tag{display:inline-block;background:#e8475b;color:#fff;font-size:.68rem;font-weight:700;border-radius:6px;padding:2px 6px;margin-right:6px;vertical-align:2px;letter-spacing:.02em}
.pocket__opts{list-style:none;padding:0;margin:8px 0 2px}
.pocket__opts li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.pocket__opts li:last-child{border-bottom:0}
.pocket__opts b{color:var(--coral-2);white-space:nowrap}
.pocket__fine{display:block;font-size:.8rem;color:var(--muted)}
.scuba-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.scuba-grid img{border-radius:16px;width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.scuba-grid{grid-template-columns:1fr}}
.calc__credit{background:var(--foam);color:var(--ink);border-radius:8px;padding:6px 10px;margin:-2px 0 10px}
.nav{gap:14px}
@media(min-width:860px) and (max-width:1100px){.nav a{font-size:.85rem}}
/* desktop hero: text left, full portrait photo right */
@media(min-width:860px){
.hero{background-size:auto 100%;background-position:right max(16px,calc((100vw - var(--max))/2)) center!important;background-color:#0b3047;min-height:640px}
.hero::after{background:linear-gradient(90deg,#0b3047 0,#0b3047 calc(100% - 520px - max(16px,(100vw - var(--max))/2)),rgba(11,48,71,0) calc(100% - 380px - max(16px,(100vw - var(--max))/2)))}
.hero__in{align-self:center}
.hero__in>*{max-width:560px}
}
.logo img.logo__ocean{height:46px;width:auto;border-radius:10px;box-shadow:0 2px 8px rgba(10,134,191,.25)}
.calc__ship{background:#fff7e6;color:var(--ink);border-radius:8px;padding:6px 10px;margin:-2px 0 10px}