.swipe-stage{
  --swipe-progress:0;
  position:relative;
  width:min(1200px,100%);
  margin-inline:auto;
  border-radius:20px;
  background:
    radial-gradient(circle at 10% 50%,rgba(242,107,33,calc(var(--swipe-progress) * .28)),transparent 32%),
    radial-gradient(circle at 90% 50%,rgba(7,26,43,calc(var(--swipe-progress) * .2)),transparent 34%),
    #f4f0e8;
  box-shadow:inset 0 0 0 1px rgba(7,26,43,.06);
  overflow:hidden;
  isolation:isolate;
}

.product-meta{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.product-meta span{padding:6px 10px;color:var(--muted);background:var(--cream);border:1px solid var(--line);border-radius:99px;font-size:12px;font-weight:700}

@media(min-width:761px){
  .product-header .menu-toggle,.product-header .mobile-menu{display:none!important}
}

.product-detail{
  position:relative;
  z-index:2;
  width:100%;
  touch-action:pan-y;
  will-change:transform,opacity;
  transform-origin:50% 110%;
  transition:transform .28s cubic-bezier(.22,.8,.25,1),opacity .24s ease,filter .24s ease;
  cursor:grab;
}

.product-detail.is-dragging{transition:none;user-select:none;cursor:grabbing}
.product-detail.is-returning{transition:transform .42s cubic-bezier(.2,1.35,.4,1),opacity .3s ease}
.product-detail.swipe-exit-right{transform:translate3d(115vw,-20px,0) rotate(15deg) scale(.92);opacity:0;filter:blur(2px)}
.product-detail.swipe-exit-left{transform:translate3d(-115vw,-20px,0) rotate(-15deg) scale(.92);opacity:0;filter:blur(2px)}

.swipe-action{
  position:absolute;
  top:50%;
  z-index:1;
  display:grid;
  place-items:center;
  width:min(170px,30%);
  gap:5px;
  opacity:calc(var(--swipe-progress) * 1);
  transform:translateY(-50%) scale(calc(.78 + var(--swipe-progress) * .22));
  transition:opacity .08s linear,transform .12s ease;
  text-align:center;
  pointer-events:none;
}
.swipe-action-previous{inset-inline-end:20px;color:#f26b21}
.swipe-action-next{inset-inline-start:20px;color:#071a2b}
.swipe-action span{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border:2px solid currentColor;
  border-radius:50%;
  font-size:28px;
  box-shadow:0 10px 30px rgba(7,26,43,.12);
}
.swipe-action small{color:currentColor;font-size:11px;font-weight:900;letter-spacing:.5px}
.swipe-action strong{
  display:-webkit-box;
  overflow:hidden;
  max-width:145px;
  color:currentColor;
  font-size:13px;
  line-height:1.45;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.swipe-stage.threshold-ready .swipe-action span{
  color:#fff;
  border-color:transparent;
  background:var(--orange);
  box-shadow:0 0 0 9px rgba(242,107,33,.12),0 14px 35px rgba(242,107,33,.3);
  animation:swipeReady .55s ease both;
}
.swipe-stage.swiping-right .swipe-action-next,
.swipe-stage.swiping-left .swipe-action-previous{opacity:0}
.swipe-stage.swipe-committed-right .swipe-action-previous,
.swipe-stage.swipe-committed-left .swipe-action-next{opacity:1;transform:translateY(-50%) scale(1.1)}

@keyframes swipeReady{
  0%{transform:scale(.86)}
  55%{transform:scale(1.13)}
  100%{transform:scale(1)}
}

.product-swipe-nav{
  width:min(1200px,100%);
  margin:18px auto 0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
}
.product-swipe-nav a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  color:var(--navy);
  border:1px solid rgba(7,26,43,.12);
  border-radius:99px;
  padding:8px 16px;
  background:#fff;
  box-shadow:0 8px 25px rgba(7,26,43,.06);
  text-decoration:none;
  font-weight:800;
  transition:.2s ease;
}
.product-swipe-nav a:hover{color:var(--orange);border-color:rgba(242,107,33,.38);transform:translateY(-2px)}
.previous-product{justify-self:start}
.next-product{justify-self:end}
.swipe-hint{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;text-align:center}
.swipe-hint i{display:block;width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(242,107,33,.1)}

@media(max-width:760px){
  .product-header .menu-toggle{display:grid!important}
  .product-header .mobile-menu{display:none!important}
  .product-header .mobile-menu.open{display:grid!important}
  .product-header{
    position:relative!important;
    top:auto;
    z-index:30;
    display:block!important;
    width:100%;
    min-height:0!important;
    height:auto!important;
    padding:10px 18px 18px!important;
    background:
      radial-gradient(circle at 50% 55%,rgba(242,107,33,.1),transparent 38%),
      var(--navy)!important;
    border-top:4px solid var(--orange);
    border-bottom:0!important;
  }

  .product-header .logo-wrap{
    position:relative!important;
    isolation:isolate;
    contain:layout paint;
    overflow:hidden!important;
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:min(58vw,260px)!important;
    height:180px!important;
    margin:0 auto!important;
    flex:none;
  }

  .product-header .logo-wrap img{
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    margin:0!important;
    transform:none!important;
    object-fit:contain!important;
    object-position:center!important;
    filter:drop-shadow(0 0 13px rgba(242,107,33,.3));
  }

  .product-header .menu-toggle{
    position:absolute;
    top:18px;
    inset-inline-start:18px;
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    margin:0;
    color:#fff;
    background:#0a2032;
    border:1px solid rgba(255,255,255,.42);
    border-radius:11px;
    font-size:27px;
    box-shadow:0 8px 20px rgba(0,0,0,.22);
  }

  .product-header .back-link{
    position:absolute;
    top:32px;
    inset-inline-end:18px;
    z-index:3;
    display:block;
    max-width:105px;
    overflow:hidden;
    color:#fff;
    font-size:13px;
    text-overflow:ellipsis;
  }

  .product-header .mobile-menu{
    display:none;
    top:75px;
    inset-inline-start:18px;
    inset-inline-end:auto;
    width:min(310px,calc(100vw - 36px));
    max-height:65vh;
    overflow-y:auto;
    background:rgba(7,26,43,.98);
    border:1px solid rgba(255,255,255,.18);
    border-top:4px solid var(--orange);
    border-radius:0 0 15px 15px;
    box-shadow:0 22px 55px rgba(0,0,0,.62);
    padding:12px 18px;
    backdrop-filter:blur(14px);
  }

  .product-header .mobile-menu.open{display:grid}

  .detail-main{padding:26px 4vw 45px}
  .swipe-stage{overflow:hidden;border-radius:15px;box-shadow:0 18px 45px rgba(7,26,43,.14)}
  .product-detail{overflow:hidden;border-radius:15px;box-shadow:none}
  .detail-image{min-height:0;background:#fff}
  .detail-image img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
  .detail-info{padding:28px 24px}
  .detail-info h1{font-size:30px;line-height:1.4}
  .detail-price{flex-wrap:wrap}
  .detail-price strong{font-size:34px}
  .description{font-size:15px;line-height:2.1;overflow-wrap:anywhere}
  .buy-button{border-radius:8px}
  .product-swipe-nav{padding:0 5px;margin-top:15px}
  .product-swipe-nav a{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    overflow:hidden;
    color:transparent;
    background:var(--navy);
    border-radius:50%;
    font-size:0;
  }
  .product-swipe-nav .previous-product::after{content:"→";color:#fff;font-size:20px}
  .product-swipe-nav .next-product::after{content:"←";color:#fff;font-size:20px}
  .swipe-hint{font-size:12px}
  .swipe-action{width:34%}
  .swipe-action-previous{inset-inline-end:8px}
  .swipe-action-next{inset-inline-start:8px}
  .swipe-action span{width:52px;height:52px}
  .swipe-action strong{font-size:11px;max-width:110px}
}

@media(max-width:430px){
  .product-header .logo-wrap{width:min(56vw,225px)!important;height:160px!important}
  .product-header .back-link{font-size:12px;max-width:92px}
  .detail-info{padding:25px 20px}
}

@media(prefers-reduced-motion:reduce){
  .product-detail,.product-detail.is-returning,.swipe-action,.product-swipe-nav a{transition:none!important}
  .swipe-stage.threshold-ready .swipe-action span{animation:none}
}