/* wareby: the location gate (homepage, desktop + phone).
   no location yet = shimmering placeholder shelves + a "where are you shopping from?" card.
   first visit = a short prompt that asks for location (the browser's own permission prompt follows). */

/* shimmering placeholders */
.wg-sk{position:relative;overflow:hidden;background:#EEE6D6;border-radius:10px;}
.wg-sk::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));animation:wgShine 1.5s ease-in-out infinite;}
@keyframes wgShine{to{transform:translateX(100%)}}
.wg-shelf{margin-top:var(--wg-gap,48px);}
.wg-head{display:flex;flex-direction:column;gap:9px;}
.wg-head .wg-sk:first-child{width:min(260px,60%);height:28px;}
.wg-head .wg-sk:last-child{width:min(340px,80%);height:14px;}
.wg-rail{display:flex;gap:var(--wg-rail-gap,18px);overflow:hidden;padding:18px 0 6px;}
.wg-card{flex:0 0 var(--wg-card,228px);}
.wg-card .wg-ph{aspect-ratio:1;border-radius:var(--wg-r,20px);}
.wg-card .wg-l1{height:15px;margin-top:12px;width:85%;}
.wg-card .wg-l2{height:12px;margin-top:8px;width:60%;}
.wg-card .wg-l3{height:15px;margin-top:10px;width:35%;}
.wg-shelf:nth-child(2) .wg-sk::after{animation-delay:.15s;}
.wg-shelf:nth-child(3) .wg-sk::after{animation-delay:.3s;}

/* the "where are you shopping from?" card */
.wg-card-msg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 22px;padding:22px 24px;border-radius:24px;background:var(--card);box-shadow:0 1px 2px rgba(20,27,52,.05),0 22px 44px -30px rgba(20,27,52,.45);}
.wg-pin{flex:none;width:56px;height:56px;border-radius:18px;background:var(--sky);color:var(--blue);display:grid;place-items:center;}
.wg-pin svg{width:28px;height:28px;}
.wg-copy b{display:block;font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.wg-copy span{display:block;margin-top:4px;font-size:15px;font-weight:500;color:var(--muted);}
.wg-act{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:300px;}
.wg-f{display:flex;gap:8px;}
.wg-f input{flex:1;min-width:0;height:50px;border:0;outline:0;border-radius:14px;background:var(--paper);padding:0 16px;font:inherit;font-size:16px;font-weight:700;color:var(--ink);box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .15s,background .15s;}
.wg-f input:focus{background:#fff;box-shadow:inset 0 0 0 2px var(--blue);}
.wg-f input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #B03A2E;background:#FDF3F2;}
.wg-f button{flex:none;height:50px;padding:0 18px;border:0;border-radius:14px;background:var(--blue);color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer;white-space:nowrap;}
.wg-me{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;border:0;border-radius:12px;background:transparent;color:var(--blue);font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;}
.wg-me:hover{background:var(--sky);}
.wg-me svg{width:16px;height:16px;}
.wg-msg{grid-column:1/-1;min-height:0;margin:-6px 0 0;font-size:14px;font-weight:700;color:#B03A2E;}
.wg-msg:empty{display:none;}
.wg-msg.ok{color:var(--blue);}
.wg-busy{display:inline-block;width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(33,72,224,.25);border-top-color:var(--blue);animation:wgSpin .8s linear infinite;vertical-align:-3px;}
.wg-f .wg-busy{border-color:rgba(255,255,255,.35);border-top-color:#fff;}
@keyframes wgSpin{to{transform:rotate(360deg)}}
.wg-shake{animation:wgShake .4s ease;}
@keyframes wgShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* real shelves fade in once a location arrives */
.wg-in{animation:wgIn .55s cubic-bezier(.2,.7,.2,1) backwards;}
@keyframes wgIn{from{opacity:0;transform:translateY(14px)}}

/* first-visit prompt */
.wg-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(20,27,52,.45);animation:wgFade .25s ease;}
.wg-modal[hidden]{display:none;}
@keyframes wgFade{from{opacity:0}}
.wg-box{position:relative;width:min(440px,100%);padding:30px 28px 24px;border-radius:28px;background:var(--paper);text-align:center;box-shadow:0 30px 80px -30px rgba(20,27,52,.6);animation:wgPop .45s cubic-bezier(.34,1.56,.64,1);}
@keyframes wgPop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.wg-art{position:relative;width:132px;height:132px;margin:0 auto;}
.wg-art svg{display:block;width:100%;height:100%;overflow:visible;}
.wg-art .tile{fill:#E8EEFF;}
.wg-art .st path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:130;animation:wgDraw .8s ease .05s backwards;}
.wg-art .st path:nth-child(2){animation-delay:.15s}.wg-art .st path:nth-child(3){animation-delay:.25s}.wg-art .st path:nth-child(4){animation-delay:.35s}
.wg-art .river{fill:none;stroke:#C9D6FF;stroke-width:9;stroke-linecap:round;stroke-dasharray:160;animation:wgDraw 1s ease .2s backwards;}
@keyframes wgDraw{from{stroke-dashoffset:130}}
.wg-art .rad{fill:rgba(33,72,224,.08);stroke:rgba(33,72,224,.5);stroke-width:1.6;stroke-dasharray:4 5;transform-box:fill-box;transform-origin:center;animation:wgRad .7s cubic-bezier(.34,1.56,.64,1) .85s backwards;transition:fill .3s,stroke .3s;}
@keyframes wgRad{from{transform:scale(0);opacity:0}}
.wg-art .shadow{fill:rgba(20,27,52,.2);transform-box:fill-box;transform-origin:center;animation:wgShadow .6s cubic-bezier(.34,1.56,.64,1) .45s backwards;}
@keyframes wgShadow{from{transform:scale(.2);opacity:0}}
.wg-art .drop{animation:wgPinDrop .65s cubic-bezier(.34,1.4,.64,1) .3s backwards;}
@keyframes wgPinDrop{0%{transform:translateY(-58px);opacity:0}60%{opacity:1}}
.wg-art.busy .drop{animation:wgPinHop .8s ease-in-out infinite;}
.wg-art.busy .shadow{animation:wgShadowHop .8s ease-in-out infinite;}
@keyframes wgPinHop{0%,100%{transform:none}45%{transform:translateY(-12px)}}
@keyframes wgShadowHop{0%,100%{transform:none}45%{transform:scale(.6);opacity:.6}}
.wg-art.done .rad{fill:rgba(33,72,224,.14);stroke:var(--blue);stroke-dasharray:none;}
.wg-box h2{margin-top:14px;font-size:30px;line-height:1.05;}
.wg-box p{margin-top:8px;font-size:15.5px;line-height:1.45;color:var(--muted);}
.wg-go{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:54px;margin-top:20px;border:0;border-radius:999px;background:var(--blue);color:#fff;font:inherit;font-size:16px;font-weight:800;cursor:pointer;}
.wg-go svg{width:18px;height:18px;}
.wg-go .wg-busy{border-color:rgba(255,255,255,.35);border-top-color:#fff;}
.wg-go.ok{background:var(--ink);}
.wg-zip{display:block;width:100%;min-height:46px;margin-top:6px;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;font-weight:800;cursor:pointer;}
.wg-fine{margin-top:6px;font-size:12.5px !important;color:var(--soft,#8A8F9E) !important;}

@media (max-width:760px){
  .wg-card-msg{grid-template-columns:auto minmax(0,1fr);padding:18px;gap:14px;}
  .wg-act{grid-column:1/-1;min-width:0;}
  .wg-copy b{font-size:19px;}
  .wg-copy span{font-size:14px;}
  .wg-pin{width:46px;height:46px;border-radius:15px;}
  .wg-modal{align-items:end;padding:0;}
  .wg-box{width:100%;border-radius:28px 28px 0 0;padding:26px 22px calc(18px + env(safe-area-inset-bottom));animation-name:wgUp;}
  @keyframes wgUp{from{transform:translateY(100%)}}
}
@media (prefers-reduced-motion:reduce){.wg-sk::after,.wg-busy{animation:none;}.wg-in,.wg-box,.wg-art *{animation:none !important;}}