/* Customer "Trade Cellar" */
.c-head{position:sticky;top:0;z-index:100;background:rgba(251,248,242,.88);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line-2)}
.c-head .in{max-width:1380px;margin:0 auto;padding:0 28px;height:72px;display:flex;align-items:center;gap:26px}
.c-head .logo{height:30px}
.c-nav{display:flex;gap:4px}
.c-nav a{padding:9px 14px;border-radius:999px;font-weight:600;color:var(--ink-2);text-decoration:none;font-size:14px;display:inline-flex;gap:8px;align-items:center}
.c-nav a:hover{background:rgba(30,47,94,.06)}
.c-nav a.on{background:var(--royal);color:#fff}
.c-nav .n{background:var(--gold);color:#1b1406;font-size:11px;border-radius:99px;padding:0 7px;font-weight:700}
.c-main{max-width:1380px;margin:0 auto;padding:28px 28px 80px}
.sel-fab{position:fixed;right:24px;bottom:24px;z-index:90;display:none}
@media(max-width:860px){.c-nav{display:none}.c-head .in{padding:0 16px;gap:12px}.c-main{padding:18px 16px 90px}.sel-fab{display:flex}.mob-nav{display:flex!important}}
.mob-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;border-top:1px solid var(--line);justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.mob-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);text-decoration:none;font-weight:600;position:relative}
.mob-nav a svg{width:22px;height:22px}
.mob-nav a.on{color:var(--royal)}
.mob-nav .n{position:absolute;top:-4px;right:-8px;background:var(--gold);color:#1b1406;font-size:10px;border-radius:99px;padding:0 5px}

.hero{border-radius:28px;min-height:400px;position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end;box-shadow:var(--sh-2)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 60%;animation:kb 30s ease-in-out infinite alternate}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,15,36,.88) 0%,rgba(9,15,36,.45) 55%,rgba(9,15,36,.15) 100%)}
.hero .in{position:relative;z-index:2;padding:46px 48px;display:flex;gap:30px;align-items:flex-end;justify-content:space-between;width:100%;flex-wrap:wrap}
.hero h1{color:#fff;font-size:clamp(34px,4.4vw,58px);font-weight:400;line-height:1.02;max-width:680px}
.hero h1 em{color:var(--gold-l)}
.hero p{color:#D7DDEE;max-width:520px;font-size:16px;margin:14px 0 22px}
.agent-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);border-radius:20px;padding:18px 20px;min-width:270px;color:#fff}
.agent-card .eyebrow{color:var(--gold-l);margin-bottom:12px}
.agent-card b{font:500 19px var(--display)}
.agent-card a{color:#fff}
.agent-card .row{gap:14px}

.section-t{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:46px 0 18px;flex-wrap:wrap}
.section-t h2{font-size:30px;font-weight:400}
.countries{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.country{background:#fff;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;cursor:pointer;transition:.25s;position:relative}
.country:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.country .mapth{height:170px;background:radial-gradient(ellipse at center,#f4ecdc,#efe6d3);display:grid;place-items:center;padding:12px;position:relative}
.country .mapth img{max-height:150px;width:auto;opacity:.92}
.country .mapth .big{font:400 64px var(--display);color:rgba(30,47,94,.18)}
.country .b{padding:16px 18px 18px}
.country h3{font-size:22px;font-weight:500}
.country .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.country .n{position:absolute;z-index:2;top:14px;right:14px;background:var(--royal);color:#fff;border-radius:999px;padding:4px 11px;font:700 12px var(--body)}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:22px 0 20px}
.toolbar .search{flex:1;min-width:240px;max-width:420px}
.atlas-layout{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:26px;align-items:start}
.atlas-map{position:sticky;top:96px}
.atlas-map .mapbox{background:radial-gradient(ellipse at 50% 40%,#f7f0e1,#efe5cf);border-radius:20px;padding:18px;border:1px solid var(--line)}
.atlas-map svg{width:100%;height:auto;max-height:62vh}
.atlas-map .regs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
@media(max-width:980px){.atlas-layout{grid-template-columns:1fr}.atlas-map{position:static}}
.mregion{cursor:pointer;transition:.15s}
.mregion .mfill{transition:.15s;fill-opacity:.95!important}
.mregion:hover .mfill,.mregion:focus .mfill{fill:#C49A5C!important;stroke:#1E2F5E!important;stroke-width:1.2!important}
.mregion.sel .mfill{fill:#1E2F5E!important;stroke:#C49A5C!important;stroke-width:1.4!important}
.mregion.off{pointer-events:none}
.mregion.off .mfill{fill-opacity:.45!important;stroke:#d8cdb4!important}
.mlabel{pointer-events:none;font-size:var(--lbl,11px)!important;font-weight:700!important}
.mlabel.off{opacity:.5;font-weight:400!important}
.mcount{pointer-events:none;font:700 var(--cnt,9px) Inter,sans-serif;fill:#1E2F5E;text-anchor:middle;paint-order:stroke;stroke:#f3ead6;stroke-width:2px}

/* wine detail drawer */
.wd .top{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:26px 26px 10px;background:radial-gradient(ellipse at 20% 80%,#efe6d3,#fbf8f2 70%)}
.wd .top .shot{display:flex;align-items:flex-end;justify-content:center;height:330px}
.wd .top .shot img{max-height:320px;filter:drop-shadow(0 18px 18px rgba(30,20,10,.25))}
.wd h2{font-size:28px;line-height:1.1;margin:6px 0}
.wd .scores{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.wd .scores span{background:var(--royal);color:#fff;border-radius:10px;padding:6px 10px;font:700 14px var(--body)}
.wd .scores span small{font:600 9.5px var(--body);letter-spacing:.06em;opacity:.8;margin-left:4px}
.wd .sec{padding:18px 26px;border-top:1px solid var(--line-2)}
.wd dl{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:0;font-size:13.5px}
.wd dt{color:var(--muted)} .wd dd{margin:0;color:var(--ink)}
.meter{display:flex;gap:4px}
.meter i{width:22px;height:6px;border-radius:3px;background:var(--line)}
.meter i.on{background:var(--royal-3)}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden}
.qty button{border:0;background:none;width:38px;height:38px;cursor:pointer;color:var(--royal);display:grid;place-items:center}
.qty button:hover{background:var(--cream)}
.qty button svg{width:16px;height:16px}
.qty input{width:56px;border:0;text-align:center;font:600 15px var(--body);outline:none;background:transparent}
@media(max-width:600px){.wd .top{grid-template-columns:1fr}.wd .top .shot{height:240px}}

/* selection */
.sel-layout{display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:start}
@media(max-width:980px){.sel-layout{grid-template-columns:1fr}}
.sel-line{display:grid;grid-template-columns:64px 1fr auto auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.sel-line img{height:76px;width:auto;margin:0 auto;object-fit:contain}
.sum{position:sticky;top:96px}
.success{text-align:center;padding:60px 20px}
.success .ring{width:96px;height:96px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;background:var(--ok-bg);color:var(--ok);animation:pop .5s cubic-bezier(.2,.9,.3,1.4)}
.success .ring svg{width:46px;height:46px;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .6s .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.status-steps{display:flex;gap:0;margin:18px 0}
.status-steps div{flex:1;text-align:center;position:relative;font-size:12px;color:var(--muted);font-weight:600}
.status-steps div:before{content:"";display:block;width:16px;height:16px;border-radius:50%;margin:0 auto 6px;background:#fff;border:2px solid var(--line);position:relative;z-index:1}
.status-steps div:after{content:"";position:absolute;top:8px;left:50%;width:100%;height:2px;background:var(--line)}
.status-steps div:last-child:after{display:none}
.status-steps div.done{color:var(--royal)}
.status-steps div.done:before{background:var(--royal);border-color:var(--royal)}
.status-steps div.done:after{background:var(--royal)}
.must{max-width:460px;margin:8vh auto}