:root{
  --ink:#0B0D12;
  --ink2:#1E2430;
  --muted:#6B7280;
  --faint:#9CA3AF;
  --line:#E5E8EC;
  --line2:#F0F1F4;
  --bg:#FFFFFF;
  --soft:#FAFAFA;
  --tint:#F4F6FA;
  --blue:#2A60E4;
  --blueDark:#1E4BC4;
  --blueSoft:#EEF3FE;
  --red:#D92D3A;
  --redDark:#B92330;
  --green:#12A150;
  --amber:#B4820C;
  --navy:#0F1628;
  --r1:8px;
  --r2:12px;
  --r3:16px;
  --pill:999px;
  --sh1:0 1px 2px rgba(11,13,18,.05);
  --sh2:0 2px 10px rgba(11,13,18,.07);
  --sh3:0 10px 34px rgba(11,13,18,.10);
  --sh4:0 20px 56px rgba(11,13,18,.16);
  --wrap:1240px;
  --head:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --easeOut:cubic-bezier(.16,1,.3,1);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
img,svg{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,h5{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.15}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
main{flex:1}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
::selection{background:var(--blue);color:#fff}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hide{display:none !important}

.announce{background:#07080B;color:#fff;font-size:12px;overflow:hidden}
.announce__track{display:flex;white-space:nowrap;animation:marquee 38s linear infinite}
.announce__set{display:flex;flex:0 0 auto;align-items:center}
.announce__i{display:inline-flex;align-items:center;gap:8px;padding:11px 44px;opacity:.9}
.announce__i svg{width:14px;height:14px;flex:0 0 auto;opacity:.85}
.announce:hover .announce__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.header.stuck{border-bottom-color:var(--line)}
.header__in{height:var(--head);display:flex;align-items:center;gap:22px}
.brand{flex:0 0 auto;display:flex;align-items:center;gap:10px;min-width:34px;min-height:26px;
  font-weight:800;font-size:18px;letter-spacing:.15em;text-transform:uppercase;
  transition:opacity .2s var(--ease)}
.brand:hover{opacity:.6}
.brand img{max-height:30px;width:auto}
.nav{display:flex;gap:4px;margin:0 auto}
.nav a{position:relative;padding:9px 15px;font-size:14px;font-weight:500;color:var(--ink2);
  border-radius:var(--r1);transition:color .22s var(--ease),background .22s var(--ease)}
.nav a::after{content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;
  background:var(--ink);border-radius:2px;transform:scaleX(0);
  transition:transform .3s var(--easeOut)}
.nav a:hover{color:var(--ink);background:var(--tint)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.nav a[aria-current=page]{color:var(--ink);font-weight:600}
.tools{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.iconbtn{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r1);
  position:relative;color:var(--ink2);
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)}
.iconbtn svg{width:19px;height:19px}
.iconbtn:hover{background:var(--tint);color:var(--ink);transform:translateY(-1px)}
.iconbtn:active{transform:scale(.94)}
.count{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;
  background:var(--blue);color:#fff;font-size:10px;font-weight:700;line-height:17px;
  text-align:center;border-radius:var(--pill);transform:scale(0);
  transition:transform .3s var(--easeOut)}
.count.on{transform:scale(1)}
.burger{display:none}

.search{position:fixed;inset:0;z-index:90;display:none}
.search.open{display:block}
.search__scrim{position:absolute;inset:0;background:rgba(11,13,18,.42);
  animation:fade .25s var(--ease)}
.search__panel{position:relative;background:#fff;border-bottom:1px solid var(--line);
  padding:24px 0 20px;animation:drop .3s var(--easeOut)}
.search__field{display:flex;align-items:center;gap:12px;border:1px solid var(--line);
  border-radius:var(--r2);padding:0 16px;height:52px;background:var(--soft);
  transition:border-color .22s var(--ease),background .22s var(--ease)}
.search__field:focus-within{border-color:var(--ink);background:#fff}
.search__field svg{width:19px;height:19px;color:var(--muted);flex:0 0 auto}
.search__field input{flex:1;border:0;background:none;outline:none;font-size:16px;min-width:0}
.search__x{font-size:13px;color:var(--muted);padding:6px 10px;border-radius:var(--r1)}
.search__x:hover{background:var(--tint);color:var(--ink)}
.search__chips{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-size:12px;color:var(--faint)}
.chipbtn{padding:5px 12px;border:1px solid var(--line);border-radius:var(--pill);
  font-size:12px;color:var(--ink2);transition:all .2s var(--ease)}
.chipbtn:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.search__res{margin-top:16px;max-height:min(52vh,440px);overflow-y:auto}
.sres{display:flex;gap:14px;align-items:center;padding:11px 12px;border-radius:var(--r2);
  transition:background .18s var(--ease)}
.sres:hover{background:var(--tint)}
.sres img{width:52px;height:52px;object-fit:cover;background:var(--soft);
  border-radius:var(--r1);flex:0 0 auto}
.sres__t{font-size:14px;font-weight:600;margin-bottom:2px}
.sres__m{font-size:12px;color:var(--muted)}
.sres__p{margin-left:auto;font-weight:700;font-size:14px;color:var(--blue);flex:0 0 auto}
.sempty{padding:32px 12px;text-align:center;color:var(--muted);font-size:14px}
.sempty strong{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

.drawer{position:fixed;inset:0;z-index:95;display:none}
.drawer.open{display:block}
.drawer__scrim{position:absolute;inset:0;background:rgba(11,13,18,.42);animation:fade .25s var(--ease)}
.drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;
  display:flex;flex-direction:column;animation:slide .34s var(--easeOut);box-shadow:var(--sh4)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:16px}
.drawer__body{flex:1;overflow-y:auto;padding:12px 20px}
.drawer__foot{border-top:1px solid var(--line);padding:16px 20px}
.drawer__sum{display:flex;justify-content:space-between;margin-bottom:12px;font-weight:700}
.dline{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line2)}
.dline img{width:62px;height:62px;object-fit:cover;background:var(--soft);
  border-radius:var(--r1);flex:0 0 auto}
.dline__t{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:3px}
.dline__v{font-size:12px;color:var(--muted);margin-bottom:6px}
.dline__b{display:flex;align-items:center;gap:10px}
.dline__x{margin-left:auto;color:var(--faint);font-size:12px}
.dline__x:hover{color:var(--red)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:var(--r2);font-size:14px;font-weight:600;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),
    background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.btn svg{width:16px;height:16px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blueDark);box-shadow:0 10px 24px rgba(42,96,228,.3)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000;box-shadow:0 10px 24px rgba(11,13,18,.24)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--redDark);box-shadow:0 10px 24px rgba(217,45,58,.26)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);box-shadow:var(--sh2)}
.btn--full{width:100%}
.btn--lg{height:50px;padding:0 28px;font-size:15px}
.btn--sm{height:36px;padding:0 15px;font-size:13px;border-radius:var(--r1)}
.btn[disabled]{opacity:.45;pointer-events:none;transform:none}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);
  border-radius:var(--r2);height:44px;overflow:hidden;background:#fff}
.qty button{width:42px;height:100%;display:grid;place-items:center;font-size:17px;
  color:var(--ink2);transition:background .18s var(--ease)}
.qty button:hover{background:var(--tint);color:var(--ink)}
.qty button:disabled{opacity:.32;pointer-events:none}
.qty input{width:46px;height:100%;border:0;text-align:center;font-weight:600;
  outline:none;background:none;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.qty--sm{height:32px;border-radius:var(--r1)}
.qty--sm button{width:30px;font-size:14px}
.qty--sm input{width:32px;font-size:13px}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.input{width:100%;height:46px;border:1px solid var(--line);border-radius:var(--r2);
  padding:0 14px;background:#fff;outline:none;font-size:14px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,13,18,.06)}
.input::placeholder{color:var(--faint)}
textarea.input{height:auto;padding:12px 14px;resize:vertical;min-height:110px;line-height:1.6}
select.input{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--ink2);cursor:pointer}
.check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--ink);flex:0 0 auto}
.hint{font-size:12px;color:var(--muted);margin-top:6px}
.msg{font-size:13px;margin:0}
.msg:not(:empty){margin-top:12px}
.msg.ok{color:var(--green)}
.msg.no{color:var(--red)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

.section{padding:60px 0}
.section--tight{padding:42px 0}
.section--soft{background:var(--soft)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.h2{font-size:clamp(23px,2.6vw,30px);margin-bottom:6px}
.h2--c{text-align:center}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}
.more{font-size:13px;font-weight:600;color:var(--blue);display:inline-flex;align-items:center;
  gap:5px;transition:gap .22s var(--ease),color .22s var(--ease)}
.more:hover{gap:9px;color:var(--blueDark)}
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);
  padding:18px 0;flex-wrap:wrap}
.crumb a:hover{color:var(--ink)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--ink2)}

.hero{position:relative;overflow:hidden;background:#EEF4FC}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:30px;align-items:center;min-height:500px;padding:52px 0 40px}
.hero__kick{color:var(--blue);font-weight:700;font-size:13px;margin-bottom:14px}
.hero__t{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.035em;line-height:1.05;margin-bottom:16px}
.hero__d{color:var(--ink2);font-size:15px;max-width:360px;margin-bottom:18px}
.hero__p{font-size:clamp(26px,3.2vw,38px);font-weight:800;color:var(--blue);
  letter-spacing:-.03em;margin-bottom:14px;display:flex;align-items:flex-start;gap:2px}
.hero__p sup{font-size:.45em;font-weight:700;margin-top:.5em}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.hero__media{position:relative;display:grid;place-items:center;min-height:380px}
.hero__img{position:relative;width:min(84%,540px);border-radius:var(--r3);
  box-shadow:0 24px 56px rgba(20,40,80,.18);
  transition:transform .8s var(--easeOut),opacity .3s var(--ease)}
.hero__img.swap{opacity:0;transform:scale(.96)}
.hero__media:hover .hero__img{transform:translateY(-10px) scale(1.02)}

.swatches{display:flex;gap:18px;margin-top:4px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:7px;width:62px}
.swatch__d{width:22px;height:22px;border-radius:50%;border:1px solid rgba(11,13,18,.18);
  position:relative;transition:transform .25s var(--easeOut)}
.swatch__d::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--ink);opacity:0;transform:scale(.72);
  transition:opacity .25s var(--ease),transform .25s var(--easeOut)}
.swatch:hover .swatch__d{transform:scale(1.14)}
.swatch.on .swatch__d::after{opacity:1;transform:scale(1)}
.swatch__l{font-size:11px;color:var(--muted);text-align:center;line-height:1.3}
.swatch.on .swatch__l{color:var(--ink);font-weight:600}

.specbar{background:#fff;border:1px solid var(--line);border-radius:var(--r3);
  box-shadow:var(--sh3);display:grid;position:relative;margin-top:-46px;z-index:2;overflow:hidden}
.specbar__i{display:flex;align-items:center;gap:11px;padding:19px 16px;
  border-right:1px solid var(--line2);transition:background .25s var(--ease)}
.specbar__i:last-child{border-right:0}
.specbar__i:hover{background:var(--soft)}
.specbar__i svg{width:21px;height:21px;color:var(--ink2);flex:0 0 auto;
  transition:transform .3s var(--easeOut),color .25s var(--ease)}
.specbar__i:hover svg{transform:scale(1.16);color:var(--blue)}
.specbar__t{font-size:13px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.specbar__s{font-size:11px;color:var(--muted)}

.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r3);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .34s var(--easeOut),box-shadow .34s var(--ease),border-color .3s var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh3);border-color:#DCE0E6}
.pcard__m{position:relative;aspect-ratio:1;background:var(--soft);overflow:hidden}
.pcard__m img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--easeOut)}
.pcard:hover .pcard__m img{transform:scale(1.07)}
.pcard__b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__t{font-size:13px;font-weight:600;line-height:1.45;color:var(--ink2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .2s var(--ease)}
.pcard:hover .pcard__t{color:var(--ink)}
.pcard__p{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:4px}
.pcard__now{font-size:16px;font-weight:800;letter-spacing:-.02em}
.pcard__now.sale{color:var(--red)}
.pcard__was{font-size:12px;color:var(--faint);text-decoration:line-through}
.badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;
  z-index:2;align-items:flex-start}
.badge{font-size:10px;font-weight:800;padding:3px 8px;border-radius:5px;line-height:1.5}
.badge--off{background:var(--red);color:#fff}
.badge--out{background:#fff;color:var(--muted);border:1px solid var(--line)}
.pcard__q{position:absolute;left:12px;right:12px;bottom:12px;opacity:0;
  transform:translateY(10px);transition:opacity .3s var(--ease),transform .32s var(--easeOut)}
.pcard:hover .pcard__q{opacity:1;transform:none}

.carousel{position:relative}
.carousel__vp{overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 6px}
.carousel__vp::-webkit-scrollbar{display:none}
.carousel__track{display:grid;grid-auto-flow:column;gap:16px}
.carousel__nav{position:absolute;top:calc(50% - 26px);width:38px;height:38px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh2);display:grid;
  place-items:center;z-index:3;color:var(--ink2);
  transition:transform .24s var(--easeOut),box-shadow .24s var(--ease),opacity .24s var(--ease)}
.carousel__nav svg{width:16px;height:16px}
.carousel__nav:hover{transform:scale(1.1);box-shadow:var(--sh3)}
.carousel__nav:disabled{opacity:.3;pointer-events:none}
.carousel__nav--p{left:-16px}
.carousel__nav--n{right:-16px}
.carousel__bar{height:2px;background:var(--line);border-radius:2px;margin:16px auto 0;
  width:min(320px,60%);overflow:hidden}
.carousel__th{height:100%;background:var(--ink);border-radius:2px;
  transition:transform .2s linear,width .2s linear}

.why{display:grid;border-top:1px solid var(--line2)}
.why__i{text-align:center;padding:24px 12px;border-right:1px solid var(--line2);
  transition:background .28s var(--ease),transform .3s var(--easeOut)}
.why__i:last-child{border-right:0}
.why__i:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--sh2);
  border-radius:var(--r2);border-right-color:transparent}
.why__i svg{width:23px;height:23px;color:var(--ink2);margin:0 auto 11px;
  transition:transform .34s var(--easeOut),color .28s var(--ease)}
.why__i:hover svg{transform:translateY(-3px) scale(1.12);color:var(--blue)}
.why__t{font-size:13px;font-weight:700;margin-bottom:3px}
.why__s{font-size:11.5px;color:var(--muted)}

.scenes{display:grid;gap:14px}
.scene{position:relative;aspect-ratio:.82;border-radius:var(--r3);overflow:hidden;
  background:var(--navy);display:flex;align-items:flex-end;padding:18px;
  transition:transform .4s var(--easeOut),box-shadow .4s var(--ease)}
.scene::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,22,40,.1) 0%,rgba(15,22,40,.7) 62%,rgba(15,22,40,.93) 100%);
  transition:opacity .4s var(--ease)}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;
  transition:transform .7s var(--easeOut),opacity .45s var(--ease)}
.scene:hover{transform:translateY(-7px);box-shadow:var(--sh4)}
.scene:hover img{transform:scale(1.09);opacity:.92}
.scene:hover::before{opacity:.85}
.scene__l{position:relative;z-index:2;display:flex;align-items:center;gap:10px;color:#fff}
.scene__ic{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;flex:0 0 auto;transition:transform .35s var(--easeOut)}
.scene__ic svg{width:13px;height:13px;color:var(--navy)}
.scene:hover .scene__ic{transform:scale(1.14) rotate(-6deg)}
.scene__t{font-size:14px;font-weight:700;line-height:1.25}

.stay{text-align:center;padding:56px 0 62px}
.stay h2{font-size:clamp(26px,3.2vw,38px);letter-spacing:-.035em;margin-bottom:8px}
.stay p{color:var(--muted);margin-bottom:22px}
.subscribe{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:520px;margin:0 auto}
.subscribe .input{flex:1;min-width:230px;border-radius:var(--pill);height:46px;padding:0 20px}
.subscribe .btn{border-radius:var(--pill);height:46px;padding:0 28px}

.footer{background:linear-gradient(180deg,#FFF 0%,#F7F9FC 100%);
  border-top:1px solid var(--line);padding:52px 0 0}
.footer__grid{display:grid;gap:34px;
  grid-template-columns:var(--fcols,1.5fr 1fr 1fr 1.35fr)}
.footer__brand{font-size:22px;font-weight:700;letter-spacing:.09em;margin-bottom:12px;min-height:28px}
.footer__tag{color:var(--muted);font-size:13.5px;max-width:300px;margin-bottom:18px}
.socials{display:flex;gap:9px}
.social{width:34px;height:34px;border:1px solid var(--line);border-radius:var(--r1);
  display:grid;place-items:center;color:var(--ink2);transition:all .25s var(--ease)}
.social svg{width:15px;height:15px}
.social:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-3px)}
.footer h4{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:15px}
.flinks a{display:block;font-size:13.5px;color:var(--muted);padding:5px 0;
  transition:color .2s var(--ease),transform .2s var(--ease)}
.flinks a:hover{color:var(--ink);transform:translateX(3px)}
.fcontact dt{font-size:11.5px;color:var(--faint);margin-top:12px}
.fcontact dt:first-child{margin-top:0}
.fcontact dd{margin:2px 0 0;font-size:13.5px;color:var(--ink2)}
.fcontact a{color:var(--blue)}
.fcontact a:hover{text-decoration:underline}
.footer__bar{margin-top:36px;border-top:1px solid var(--line);padding:16px 0 20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted)}

.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:42px;
  align-items:start;padding-bottom:20px}
.gallery{display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;align-items:start}
.gthumbs{display:flex;flex-direction:column;gap:9px;max-height:500px;overflow-y:auto;padding-right:3px}
.gthumb{width:70px;height:70px;border:1px solid var(--line);border-radius:var(--r1);
  background:var(--tint);padding:3px;flex:0 0 auto;overflow:hidden;
  transition:border-color .22s var(--ease),transform .22s var(--easeOut)}
.gthumb img{width:100%;height:100%;object-fit:cover;border-radius:5px}
.gthumb:hover{transform:translateY(-2px);border-color:#C8CED7}
.gthumb.on{border-color:var(--ink);border-width:1.5px}
.gstage{position:relative;border:1px solid var(--line);border-radius:var(--r3);background:#fff;
  aspect-ratio:1.05;overflow:hidden;display:grid;place-items:center}
.gstage img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--easeOut),opacity .3s var(--ease)}
.gstage.swap img{opacity:0;transform:scale(.97)}
.gstage.zoom{cursor:zoom-in}
.gstage.zoom img{transform:scale(1.85);transition:transform .1s linear}
.gnav{position:absolute;top:calc(50% - 18px);width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink2);z-index:2;transition:transform .22s var(--easeOut)}
.gnav svg{width:15px;height:15px}
.gnav:hover{transform:scale(1.1)}
.gnav--p{left:12px}
.gnav--n{right:12px}
.gzoom{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);z-index:2;transition:all .22s var(--ease)}
.gzoom svg{width:15px;height:15px}
.gzoom:hover,.gzoom.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.gcount{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:11px;color:var(--muted);background:rgba(255,255,255,.9);padding:3px 10px;
  border-radius:var(--pill);border:1px solid var(--line)}

.pdp__t{font-size:clamp(21px,2.4vw,28px);letter-spacing:-.028em;margin-bottom:12px}
.pdp__p{font-size:28px;font-weight:800;color:var(--blue);letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.pdp__p del{font-size:16px;color:var(--faint);font-weight:600}
.pdp__d{color:var(--ink2);font-size:13.8px;margin-bottom:18px;max-width:520px}
.optrow{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.optrow__l{font-size:13px;font-weight:600;width:52px;flex:0 0 auto}
.chips{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.chipdot{width:26px;height:26px;border-radius:50%;border:1px solid rgba(11,13,18,.18);
  position:relative;transition:transform .24s var(--easeOut)}
.chipdot::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--ink);opacity:0;transform:scale(.7);
  transition:opacity .24s var(--ease),transform .24s var(--easeOut)}
.chipdot:hover{transform:scale(1.12)}
.chipdot.on::after{opacity:1;transform:scale(1)}
.optname{font-size:12.5px;color:var(--muted)}
.buyrow{display:flex;gap:12px;margin:16px 0 18px}
.buyrow .btn{flex:1}
.metarow{display:flex;align-items:center;gap:14px;padding:14px 0;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);
  font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.metarow b{color:var(--ink2);font-weight:700;margin-right:5px}
.stock{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.stock.in{color:var(--green)}
.stock.out{color:var(--muted)}
.stock .dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.acc{margin-top:18px;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden}
.acc__i{border-bottom:1px solid var(--line)}
.acc__i:last-child{border-bottom:0}
.acc__btn{width:100%;display:flex;align-items:flex-start;gap:12px;padding:15px 16px;
  text-align:left;transition:background .22s var(--ease)}
.acc__btn:hover{background:var(--soft)}
.acc__btn>svg:first-child{width:18px;height:18px;color:var(--ink2);flex:0 0 auto;margin-top:1px}
.acc__h{font-size:13.5px;font-weight:700}
.acc__c{margin-left:auto;width:15px;height:15px;color:var(--faint);flex:0 0 auto;
  margin-top:2px;transition:transform .3s var(--easeOut)}
.acc__i.open .acc__c{transform:rotate(90deg)}
.acc__p{max-height:0;overflow:hidden;transition:max-height .4s var(--easeOut)}
.acc__in{padding:0 16px 16px 46px;font-size:12.5px;color:var(--muted);line-height:1.7}

.tabs{border-bottom:1px solid var(--line);display:flex;gap:26px;margin-bottom:24px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:12px 0;font-size:14px;font-weight:500;color:var(--muted);position:relative;
  white-space:nowrap;transition:color .22s var(--ease)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ink);transform:scaleX(0);transition:transform .3s var(--easeOut)}
.tab:hover{color:var(--ink2)}
.tab.on{color:var(--ink);font-weight:700}
.tab.on::after{transform:scaleX(1)}
.pane{display:none;animation:rise .4s var(--easeOut)}
.pane.on{display:block}
.prose{max-width:900px;color:var(--ink2);font-size:14px;line-height:1.78}
.prose h4{font-size:16px;margin:24px 0 10px;color:var(--ink)}
.prose ul{margin:0 0 16px;padding-left:20px;list-style:disc}
.prose li{margin-bottom:5px}
.prose img{border-radius:var(--r3);margin:20px 0}
.spectable{width:100%;border-collapse:collapse;font-size:13.5px;max-width:900px}
.spectable th,.spectable td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left}
.spectable th{width:220px;font-weight:700}
.spectable td{color:var(--ink2)}
.spectable tr:hover{background:var(--soft)}

.rvsum{border:1px solid var(--line);border-radius:var(--r3);padding:22px;
  display:grid;grid-template-columns:200px minmax(0,1fr) 180px;gap:30px;align-items:center;
  margin-bottom:18px}
.rvscore{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1;
  display:flex;align-items:baseline;gap:8px}
.rvscore small{font-size:13px;font-weight:500;color:var(--muted)}
.rvtitle{font-size:14px;font-weight:700;margin-bottom:10px}
.rvcount{font-size:12.5px;color:var(--muted);margin-top:8px}
.stars{display:inline-flex;gap:2px;color:#E5B437}
.stars svg{width:15px;height:15px}
.stars .off{color:#DCE0E5}
.rvbars{display:flex;flex-direction:column;gap:7px}
.rvbar{display:grid;grid-template-columns:52px minmax(0,1fr) 38px;gap:12px;
  align-items:center;font-size:11.5px;color:var(--muted)}
.rvbar__t{height:6px;background:var(--line2);border-radius:4px;overflow:hidden}
.rvbar__f{height:100%;background:#E5B437;border-radius:4px;width:0;
  transition:width .8s var(--easeOut)}
.rvempty{border:1px solid var(--line);border-radius:var(--r3);padding:40px 24px;text-align:center}
.rvempty h4{font-size:17px;margin-bottom:8px}
.rvempty p{color:var(--muted);font-size:13.5px;margin-bottom:4px}
.rvlist{border:1px solid var(--line);border-radius:var(--r3);overflow:hidden}
.rvitem{padding:20px 22px;border-bottom:1px solid var(--line2);transition:background .22s var(--ease)}
.rvitem:last-child{border-bottom:0}
.rvitem:hover{background:var(--soft)}
.rvtop{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.rvav{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:0 0 auto}
.rvname{font-size:13.5px;font-weight:700}
.rvdate{font-size:11.5px;color:var(--faint)}
.rvbody{font-size:13.5px;color:var(--ink2);line-height:1.7;margin:0}
.ratepick{display:flex;gap:5px}
.ratepick button{color:#DCE0E5;transition:transform .2s var(--easeOut),color .2s var(--ease)}
.ratepick button svg{width:26px;height:26px}
.ratepick button:hover{transform:scale(1.16)}
.ratepick button.on{color:#E5B437}

.pagehead{background:var(--soft);border-bottom:1px solid var(--line);padding:28px 0 24px}
.pagehead h1{font-size:clamp(25px,3vw,34px);letter-spacing:-.03em;margin-bottom:6px}
.pagehead p{color:var(--muted);font-size:14px;margin:0}
.shopbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;flex-wrap:wrap}
.shopbar__n{font-size:12.5px;color:var(--muted)}
.shopbar__s{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.shopbar__s .input{height:36px;font-size:13px;width:180px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.filters{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:24px;
  overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filter{padding:11px 0;font-size:13.5px;color:var(--muted);white-space:nowrap;position:relative;
  transition:color .22s var(--ease)}
.filter::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ink);transform:scaleX(0);transition:transform .3s var(--easeOut)}
.filter:hover{color:var(--ink2)}
.filter.on{color:var(--ink);font-weight:700}
.filter.on::after{transform:scaleX(1)}

.acard{border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
  transition:transform .34s var(--easeOut),box-shadow .34s var(--ease)}
.acard:hover{transform:translateY(-5px);box-shadow:var(--sh3)}
.acard__m{aspect-ratio:2;background:var(--soft);overflow:hidden}
.acard__m img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--easeOut)}
.acard:hover .acard__m img{transform:scale(1.06)}
.acard__b{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.acard__meta{font-size:11.5px;color:var(--muted);margin-bottom:9px;display:flex;gap:9px}
.acard__t{font-size:17px;letter-spacing:-.02em;margin-bottom:9px;line-height:1.32}
.acard__x{font-size:13px;color:var(--muted);margin-bottom:14px;line-height:1.65}
.acard__b .more{margin-top:auto}

.article{max-width:720px;margin:0 auto}
.article h1{font-size:clamp(27px,3.6vw,40px);letter-spacing:-.035em;margin:10px 0 14px}
.article__meta{font-size:12.5px;color:var(--muted);display:flex;gap:10px;margin-bottom:22px}
.article__hero{border-radius:var(--r3);margin-bottom:28px;width:100%}
.article p{font-size:15.5px;line-height:1.85;color:var(--ink2);margin-bottom:1.25em}

.cartempty{border:1px solid var(--line);border-radius:var(--r2);padding:36px;
  text-align:center;color:var(--muted);font-size:14px;background:#fff}
.carttable{border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:#fff}
.crow{display:grid;grid-template-columns:90px minmax(0,1fr) 130px 110px 40px;gap:16px;
  align-items:center;padding:16px 20px;border-bottom:1px solid var(--line2)}
.crow:last-child{border-bottom:0}
.crow img{width:90px;height:90px;object-fit:cover;background:var(--soft);
  border-radius:var(--r1)}
.crow__t{font-size:14px;font-weight:600;line-height:1.45;margin-bottom:4px}
.crow__v{font-size:12px;color:var(--muted)}
.crow__p{font-weight:700;text-align:right}
.crow__x{color:var(--faint);display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;transition:all .2s var(--ease)}
.crow__x:hover{background:#FCECEE;color:var(--red)}
.cartgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start}
.sumbox{border:1px solid var(--line);border-radius:var(--r3);padding:22px;background:#fff;
  position:sticky;top:calc(var(--head) + 16px)}
.sumbox h3{font-size:16px;margin-bottom:14px}
.sumrow{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink2);padding:8px 0}
.sumrow--t{border-top:1px solid var(--line);margin-top:8px;padding-top:14px;
  font-size:17px;font-weight:800;color:var(--ink)}
.notice{margin-top:14px;padding:12px 14px;background:var(--soft);border-radius:var(--r2);
  border:1px solid var(--line);font-size:12.2px;color:var(--muted);line-height:1.65;
  display:flex;gap:9px}
.notice svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px}

.auth{display:grid;place-items:start center;padding:48px 20px 66px;
  background:linear-gradient(180deg,#fff 0%,var(--soft) 100%)}
.auth__w{width:min(440px,100%);text-align:center}
.auth__e{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.auth__t{font-size:clamp(28px,4vw,40px);letter-spacing:-.035em;margin-bottom:12px}
.auth__l{color:var(--muted);font-size:13.5px;margin-bottom:26px;line-height:1.65}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r3);padding:24px;
  text-align:left;box-shadow:var(--sh1)}
.auth__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 18px}
.auth__f{text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px}
.auth__f button{font-weight:700;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px}

.orderlist{display:flex;flex-direction:column;gap:14px}
.order{border:1px solid var(--line);border-radius:var(--r3);background:#fff;overflow:hidden}
.order__h{display:flex;align-items:center;gap:14px;padding:15px 20px;
  border-bottom:1px solid var(--line2);flex-wrap:wrap}
.order__ref{font-weight:800;font-size:14px;letter-spacing:.03em}
.order__d{font-size:12px;color:var(--muted)}
.order__tot{margin-left:auto;font-weight:800}
.order__b{padding:14px 20px}
.oline{display:flex;gap:10px;font-size:13px;color:var(--ink2);padding:5px 0}
.oline span:last-child{margin-left:auto;font-weight:600}
.tag{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;
  letter-spacing:.02em}
.tag--received{background:#EEF3FE;color:var(--blue)}
.tag--confirmed{background:#FDF4E1;color:var(--amber)}
.tag--shipped{background:#EAF3FF;color:#1B62B8}
.tag--completed{background:#E9F8EF;color:var(--green)}
.tag--cancelled{background:#F2F3F5;color:var(--muted)}
.tag--wait{background:#FDF4E1;color:var(--amber)}
.tag--ok{background:#E9F8EF;color:var(--green)}

.toasts{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;flex-direction:column;
  gap:10px;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r2);
  font-size:13.5px;box-shadow:var(--sh4);display:flex;align-items:center;gap:9px;
  animation:pop .32s var(--easeOut);max-width:340px}
.toast svg{width:16px;height:16px;flex:0 0 auto}
.toast.out{animation:popout .28s var(--ease) forwards}
.toast--no{background:var(--red)}

.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px}
.modal.open{display:grid}
.modal__scrim{position:absolute;inset:0;background:rgba(11,13,18,.5);animation:fade .22s var(--ease)}
.modal__box{position:relative;background:#fff;border-radius:var(--r3);width:min(560px,100%);
  padding:26px;box-shadow:var(--sh4);animation:pop .3s var(--easeOut);
  max-height:88vh;overflow-y:auto}
.modal__x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);transition:background .2s var(--ease)}
.modal__x:hover{background:var(--tint);color:var(--ink)}
.modal__box h3{font-size:19px;margin-bottom:6px}
.modal__l{color:var(--muted);font-size:13.5px;margin-bottom:18px}

.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--easeOut),transform .7s var(--easeOut)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}

.loading{padding:70px 20px;text-align:center;color:var(--muted);font-size:14px}
.spinner{width:26px;height:26px;border:2px solid var(--line);border-top-color:var(--ink);
  border-radius:50%;margin:0 auto 14px;animation:spin .8s linear infinite}
.offline{max-width:520px;margin:70px auto;padding:26px;border:1px solid var(--line);
  border-radius:var(--r3);background:var(--soft);text-align:center}
.offline h2{font-size:18px;margin-bottom:10px}
.offline p{color:var(--muted);font-size:13.5px;margin:0}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:none}}
@keyframes popout{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}

@media (max-width:1100px){
  .grid5{grid-template-columns:repeat(4,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .rvsum{grid-template-columns:1fr;gap:20px}
}
@media (max-width:900px){
  .pdp{grid-template-columns:1fr;gap:28px}
  .cartgrid{grid-template-columns:1fr}
  .sumbox{position:static}
  .hero__grid{grid-template-columns:1fr;min-height:0;padding:36px 0 28px}
  .hero__media{min-height:260px;order:-1}
  .hero__d{max-width:none}
  .specbar{margin-top:-22px}
}
@media (max-width:760px){
  :root{--head:58px}
  .nav{display:none;position:fixed;top:var(--head);left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 16px 16px;
    margin:0;box-shadow:var(--sh3);animation:drop .3s var(--easeOut)}
  .nav.open{display:flex}
  .nav a{padding:13px 8px;font-size:15px;border-radius:0;border-bottom:1px solid var(--line2)}
  .nav a::after{display:none}
  .burger{display:grid}
  .brand{font-size:16px;letter-spacing:.12em}
  .carousel__nav{display:none}
  .grid5{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gthumbs{flex-direction:row;max-height:none;overflow-x:auto;order:2;padding-bottom:4px}
  .footer__grid{grid-template-columns:1fr;gap:26px}
  .crow{grid-template-columns:64px minmax(0,1fr) 40px;row-gap:12px}
  .crow img{width:64px;height:64px}
  .crow .qty{grid-column:2}
  .crow__p{grid-column:2;text-align:left}
  .buyrow{flex-direction:column}
  .section{padding:42px 0}
  .two{grid-template-columns:1fr}
}