/* Product page extras: benefit cards, fly-to-bag, "Pairs well with". Loaded by product.php. */

/* ---- benefit cards (built from the Highlights list) ---- */
.pd-rich .pd-cards.pd-fun .pd-card{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,border-color .25s ease}
.pd-rich .pd-cards.pd-fun .pd-card.pre{opacity:0;transform:translateY(16px) scale(.98)}
.pd-rich .pd-cards.pd-fun .pd-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.08);border-color:color-mix(in srgb,var(--accent) 55%,var(--hairline))}
.pd-rich .pd-card .pd-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 24%,transparent);transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.pd-rich .pd-card:hover .pd-ic{transform:rotate(-8deg) scale(1.12)}
.pd-rich .pd-card .pd-ic svg{width:21px;height:21px}
.pd-rich .pd-cards.pd-fun .pd-card h4{margin:0;font-size:16.5px;line-height:1.35}

/* ---- fly to bag ---- */
.pd-fly{position:fixed;z-index:9999;pointer-events:none;border-radius:16px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.25);background:#fff}
.pd-fly img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes pdBagBounce{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.92) rotate(4deg)}100%{transform:scale(1)}}
.pd-bag-bounce{animation:pdBagBounce .6s ease}

/* ---- pairs well with ---- */
.pw{max-width:1024px;margin:0 auto;padding:8px 22px 64px}
.pw h2{font-size:22px;line-height:1.2;letter-spacing:-.01em;margin:0 0 4px}
.pw-sub{margin:0 0 18px;color:var(--ink-dim)}
.pw-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pw-card{position:relative;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.pw-card.is-in{opacity:1;transform:none}
.pw-img{position:relative;display:block;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--hairline);transition:transform .3s ease,box-shadow .3s ease}
.pw-img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .45s ease}
.pw-card:hover .pw-img{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.1)}
.pw-card:hover .pw-img img{transform:scale(1.06)}
.pw-chip{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1;color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 22%,#fff);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.pw-name{font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pw-price{font-size:14px;color:var(--ink-dim)}
@media (max-width:833px){
  .pw-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin:0 -22px;padding-left:22px;padding-right:22px}
  .pw-card{flex:0 0 62%;max-width:240px;scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
  .pw-card,.pw-img,.pw-img img,.pd-rich .pd-cards.pd-fun .pd-card,.pd-rich .pd-card .pd-ic{transition:none}
  .pw-card{opacity:1;transform:none}
  .pd-bag-bounce{animation:none}
}