*{box-sizing:border-box;margin:0;padding:0;}
  html,body{background:linear-gradient(180deg,hsl(176, 100%, 84%) 0%,#3dc2ff 100%);}
  body{overflow-x:hidden;}
  .scroll-area{min-height:600vh;position:relative;}

  @keyframes tip-glow {
    0%   { box-shadow: 0 0 0 0 rgba(255,80,180,.0),   0 0 18px 4px rgba(255,80,180,.85),  0 0 36px 10px rgba(255,210,80,.55); }
    20%  { box-shadow: 0 0 0 0 rgba(120,220,255,.0),  0 0 22px 6px rgba(120,220,255,.85), 0 0 44px 14px rgba(255,80,180,.55); }
    40%  { box-shadow: 0 0 0 0 rgba(160,255,140,.0),  0 0 22px 6px rgba(160,255,140,.85), 0 0 44px 14px rgba(120,220,255,.55); }
    60%  { box-shadow: 0 0 0 0 rgba(255,210,80,.0),   0 0 22px 6px rgba(255,210,80,.9),   0 0 44px 14px rgba(160,255,140,.55); }
    80%  { box-shadow: 0 0 0 0 rgba(200,140,255,.0),  0 0 22px 6px rgba(200,140,255,.9),  0 0 44px 14px rgba(255,210,80,.55); }
    100% { box-shadow: 0 0 0 0 rgba(255,80,180,.0),   0 0 18px 4px rgba(255,80,180,.85),  0 0 36px 10px rgba(255,210,80,.55); }
  }

  .stage{
    position:sticky; top:0;
    width:100%; height:100vh;
    overflow:visible;
  }
.hover-title.show{
  opacity:1;
}
.hover-title{
  position:absolute;
  left:50%;
  top:100px;

  transform:
    translateX(-50%)
    rotate(-3deg);

  background:#fff;

  border:4px solid #000;

  padding:12px 24px;

  border-radius:
    30px 10px 35px 12px /
    15px 25px 12px 30px;

  box-shadow:
    6px 6px 0 #000;
}
  .can-wrap{
    position:absolute;
    left:50%; top:50%;
    width:340px; height:600px;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:10;
  }
  
  .can-img{
    width:100%; height:100%;
    object-fit:contain;
    opacity:0;
    filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));
    transition:opacity .5s ease;
  }
  .can-img{
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.02);
  }
}
  .can-wrap.ready{ pointer-events:auto; }
  .can-wrap.ready .can-img{ pointer-events:auto; }

  .el{
    position:absolute;
    cursor:grab;
    user-select:none;
    transition: transform .9s cubic-bezier(.7,.05,.2,1),
                left .9s cubic-bezier(.7,.05,.2,1),
                top .9s cubic-bezier(.7,.05,.2,1),
                width .9s cubic-bezier(.7,.05,.2,1);
    z-index:5;
    touch-action:none;
  }
  .el:active{cursor:grabbing;}
  .el.dragging{transition:none; z-index:99;}
  .el img{ width:100%; height:auto; display:block; pointer-events:none; -webkit-user-drag:none; }

  .el.logo     { width:120px; }
  .el.wordmark { width:170px; }
  .el.flavor   { width:120px; }
  .el.tagline  { width:220px; }
  .el.usda     { width:60px;  }
  .el.volume   { width:90px;  }
  .el.apple    { width:70px;  }
  .el.leaves   { width:90px;  }
  .el.empty    { width:260px; }
  .el.empty img{ filter:drop-shadow(0 30px 40px rgba(0,0,0,.25)); }

  .tooltip{
    position:absolute;
    background:#fff;
    border:4px solid #000;
    border-radius: 38px 14px 44px 18px / 22px 36px 16px 40px;
    padding:14px 18px;
    width:340px;
    color:#000;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:13px;
    line-height:1.45;
    opacity:0;
    pointer-events:none;
    transition: opacity .35s ease, transform .35s ease;
    transform:translateY(8px);
    box-shadow:0 12px 30px rgba(0,0,0,.15);
    z-index:20;
  }
  .tooltip b{display:block;margin-bottom:6px;font-size:14px;}

  .can-wrap:hover .tooltip{
    opacity:1;
    transform:translateY(0);
    animation: tip-glow 1.6s linear infinite;
  }

  .tooltip.t1{ right:calc(100% + 40px); top:20px; }
  .tooltip.t2{ left:calc(100% + 40px); top:20px; }
  .tooltip.t3{ right:calc(100% + 40px); bottom:20px; }

  .hover-title{
    position:absolute;
    left:50%; top:24px;
    transform:translateX(-50%);
    font-family: Georgia, "Times New Roman", serif;
    font-size:clamp(28px,3.4vw,44px);
    color:#3a1a06;
    letter-spacing:-1px;
    z-index:15;
    opacity:0;
    transition:opacity .4s ease;
    pointer-events:none;
    white-space:nowrap;
  }
 

  .shop{
    background:#fff;
    padding:80px 6vw 120px;
    border-top:6px solid #000;
  }
  .shop h2{
    font-family: Georgia, "Times New Roman", serif;
    font-size:clamp(36px,5vw,64px);
    text-align:center;
    color:#000;
    margin-bottom:60px;
    letter-spacing:-1px;
  }
  .shop-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:32px;
    max-width:1400px;
    margin:0 auto;
  }
  @media(max-width:900px){ .shop-grid{grid-template-columns:repeat(2,1fr);} }
  .shop-card{
    display:flex;flex-direction:column;align-items:center;gap:18px;
  }
  .shop-card .thumb{
    width:100%; aspect-ratio:1/1;
    background:#faf6ee;
    border:3px solid #000;
    border-radius:18px;
    display:flex;align-items:center;justify-content:center;
    cursor:zoom-in;
    overflow:hidden;
    transition:transform .25s ease;
  }
  .shop-card .thumb:hover{ transform:translateY(-4px); }
  .shop-card .thumb img{
    max-width:78%; max-height:78%; object-fit:contain;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.18));
  }
  .price{
    font-family: Georgia, "Times New Roman", serif;
    font-size:22px;
    font-weight:700;
    color:#000;
  }
  .add-btn{
    background:#fff;
    color:#000;
    border:3px solid #000;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-weight:700;
    font-size:14px;
    padding:12px 28px;
    cursor:pointer;
    border-radius: 28px 12px 32px 14px / 18px 26px 14px 30px;
    transition: transform .15s ease, background .15s ease, color .15s ease;
  }
  .add-btn:hover{ background:#000; color:#fff; transform:translate(-1px,-1px); }
  .add-btn.added{ background:#000; color:#fff; }

  .lightbox{
    position:fixed; inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    align-items:center; justify-content:center;
    z-index:9999;
    cursor:zoom-out;
    padding:40px;
  }
  .lightbox.open{ display:flex; }
  .lightbox img{
    max-width:90vw; max-height:90vh;
    object-fit:contain;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
  }
  .lightbox .close{
    position:absolute; top:24px; right:32px;
    color:#fff; font-size:36px; background:none; border:none; cursor:pointer;
  }
  .warning-sticker{
  position:absolute;
  left:30px;
  bottom:30px;
  background:#ffef00;
  border:4px solid #000;
  padding:14px 20px;
  font-family:Arial Black, sans-serif;
  font-size:18px;
  transform:rotate(-6deg);
  z-index:50;
  box-shadow:8px 8px 0 #000;
  animation: stickerShake .18s infinite alternate;
}

@keyframes stickerShake{
  from{transform:rotate(-6deg) translateX(0);}
  to{transform:rotate(-4deg) translateX(2px);}
}
.bubble{
  position:fixed;
  width:14px;
  height:14px;
  border:3px solid #000;
  border-radius:50%;
  pointer-events:none;
  z-index:999;
  background:rgba(255,255,255,.6);
  animation:bubblePop .9s ease-out forwards;
}

@keyframes bubblePop{
  0%{
    transform:translate(-50%,-50%) scale(.3);
    opacity:1;
  }
  100%{
    transform:translate(-50%,-90px) scale(1.8);
    opacity:0;
  }
}
.fake-popup{
  position:fixed;
  right:40px;
  top:120px;
  width:280px;
  background:#fff;
  border:4px solid #000;
  z-index:200;
  padding:22px;
  box-shadow:10px 10px 0 #000;
  font-family:system-ui, sans-serif;
  transform:rotate(3deg);
}

.fake-popup h3{
  font-family:Arial Black, sans-serif;
  font-size:26px;
  margin-bottom:10px;
}

.fake-popup p{
  font-size:14px;
  line-height:1.35;
  margin-bottom:16px;
}

.fake-popup button{
  border:3px solid #000;
  background:#ff4fa3;
  padding:8px 14px;
  font-weight:800;
  cursor:pointer;
}

#popupClose{
  position:absolute;
  right:8px;
  top:6px;
  background:white;
}
.ticker{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#000;
  color:#fff;
  z-index:300;
  overflow:hidden;
  white-space:nowrap;
  font-family:Arial Black, sans-serif;
  font-size:16px;
  padding:8px 0;
}

.ticker span{
  display:inline-block;
  padding-left:100%;
  animation:tickerMove 16s linear infinite;
}

@keyframes tickerMove{
  from{transform:translateX(0);}
  to{transform:translateX(-100%);}
}