/* Product sheet v1 - glass redesign. Loads after product-sheet.css and pdp-bar-fix.css. */
#modal.pd2-dialog{
 --gs-line:rgb(35 58 48 / 8%);
 --gs-hi:rgb(255 255 255 / 90%);
 background:
  radial-gradient(120% 80% at 50% 0%, #fffdf7 0%, transparent 62%),
  linear-gradient(180deg, rgb(251 248 241 / 98%) 0%, rgb(246 242 232 / 96%) 100%)!important;
 border:1px solid rgb(255 255 255 / 60%)!important;
 box-shadow:0 40px 90px rgb(18 36 27 / 28%),0 2px 0 rgb(255 255 255 / 70%) inset!important;
 backdrop-filter:blur(18px) saturate(140%);
}
#modal.pd2-dialog .pd2-sheet{background:transparent!important}

/* photo as a display case */
.pd2-gallery{margin:12px 12px 0;border-radius:22px;background:linear-gradient(180deg,rgb(255 255 255 / 92%),rgb(255 253 247 / 74%));border:1px solid rgb(255 255 255 / 80%);box-shadow:0 18px 40px rgb(31 58 43 / 10%),inset 0 1px 0 var(--gs-hi)}
.pd2-stage{border-radius:22px;overflow:hidden}
.pd2-stage img{animation:pd2Settle .7s cubic-bezier(.16,1,.3,1) both}
@keyframes pd2Settle{from{transform:scale(1.03);opacity:.7}to{transform:scale(1);opacity:1}}

/* info card */
.pd2-card{margin:14px 12px 0!important;border-radius:22px!important;background:linear-gradient(165deg,rgb(255 255 255 / 86%),rgb(255 253 247 / 62%))!important;border:1px solid rgb(255 255 255 / 78%)!important;box-shadow:0 16px 34px rgb(31 58 43 / 9%),inset 0 1px 0 var(--gs-hi)!important;padding:18px 18px 16px!important}
.pd2-brand{font-size:10.5px!important;letter-spacing:.16em!important;font-weight:800!important;color:#7b8a7f!important;display:inline-flex;align-items:center;gap:6px}
.pd2-title{font-family:var(--nb-serif,Georgia),serif!important;font-size:22px!important;line-height:1.15!important;letter-spacing:-.015em!important;color:#1b3a2b!important;margin:6px 0 2px!important;padding-right:0!important}
.pd2-pack{font-size:12px!important;color:#7b8a7f!important}
.pd2-now{font-size:27px!important;font-weight:800!important;color:#14603a!important;letter-spacing:-.02em}
.pd2-was{font-size:13px!important;color:#93a396!important;margin-left:6px}

/* savings as a mint glass strip with a green accent */
.pd2-save{margin-top:12px!important;padding:12px 14px 12px 16px!important;border-radius:14px!important;background:linear-gradient(120deg,rgb(232 245 236 / 92%),rgb(248 251 244 / 70%))!important;border:1px solid rgb(29 90 55 / 14%)!important;border-left:3px solid #1d5a37!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / 80%)!important}
.pd2-save-kicker{font-size:10px!important;letter-spacing:.14em!important;color:#1d7a45!important}
.pd2-save-amount{font-size:26px!important;color:#14603a!important}
.pd2-save-foot{font-size:11.5px!important;color:#4b6b57!important}

/* buttons: one geometry, three roles */
#modal.pd2-dialog .pd2-bar{background:linear-gradient(180deg,rgb(251 248 241 / 88%),rgb(246 242 232 / 97%))!important;border-top:1px solid var(--gs-line)!important;box-shadow:0 -14px 34px rgb(31 58 43 / 12%)!important;backdrop-filter:blur(18px) saturate(150%)!important}
#modal.pd2-dialog .pd2-bar-amount strong{font-size:17px!important;font-weight:800!important;color:#1d3a2b!important}
#modal.pd2-dialog .pd2-bar-amount del{font-size:11px!important;color:#93a396!important}
#modal.pd2-dialog .pd2-bar-actions{position:relative;padding-left:10px}
#modal.pd2-dialog .pd2-bar-actions:before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--gs-line)}

#modal.pd2-dialog .pd2-add>button,
#modal.pd2-dialog .pd2-basket,
#modal.pd2-dialog .pd2-checkout{
 height:48px!important;min-height:48px!important;border-radius:15px!important;
 font-size:13.5px!important;font-weight:800!important;letter-spacing:.01em;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
 transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s,background .18s;
}
#modal.pd2-dialog .pd2-add>button{
 background:linear-gradient(165deg,rgb(238 246 239 / 96%),rgb(226 240 230 / 82%))!important;
 border:1.5px solid rgb(29 90 55 / 55%)!important;color:#154e30!important;
 box-shadow:inset 0 1px 0 rgb(255 255 255 / 85%),0 6px 16px rgb(29 90 55 / 12%)!important;
}
#modal.pd2-dialog .pd2-basket{
 background:linear-gradient(165deg,rgb(255 253 247 / 96%),rgb(248 241 227 / 80%))!important;
 border:1.5px solid rgb(35 58 48 / 16%)!important;color:#233a30!important;
 box-shadow:inset 0 1px 0 rgb(255 255 255 / 80%),0 6px 16px rgb(31 58 43 / 10%)!important;
}
#modal.pd2-dialog .pd2-checkout{
 background:linear-gradient(150deg,#ff9257 0%,#f2601f 48%,#dc350f 100%)!important;
 color:#fff!important;border:1px solid rgb(255 255 255 / 26%)!important;
 box-shadow:inset 0 1px 0 rgb(255 255 255 / 40%),0 12px 26px rgb(226 74 20 / 34%),0 0 0 1px rgb(226 74 20 / 10%)!important;
}
#modal.pd2-dialog .pd2-add>button:hover,
#modal.pd2-dialog .pd2-basket:hover,
#modal.pd2-dialog .pd2-checkout:hover{transform:translateY(-1px)}
#modal.pd2-dialog .pd2-add>button:active,
#modal.pd2-dialog .pd2-basket:active,
#modal.pd2-dialog .pd2-checkout:active{transform:scale(.97)}
#modal.pd2-dialog :is(.pd2-add>button,.pd2-basket,.pd2-checkout):focus-visible{outline:3px solid #ed5c2b;outline-offset:2px;border-radius:15px}
#modal.pd2-dialog .pd2-add .qty{height:48px!important;border-radius:15px!important;background:linear-gradient(165deg,rgb(238 246 239 / 96%),rgb(226 240 230 / 82%))!important;border:1.5px solid rgb(29 90 55 / 55%)!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / 85%),0 6px 16px rgb(29 90 55 / 12%)!important}
#modal.pd2-dialog .pd2-add .qty button{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:50%!important;background:rgb(255 255 255 / 70%)!important;border:1px solid rgb(29 90 55 / 18%)!important;color:#154e30!important;font-size:17px!important;font-weight:800!important}
#modal.pd2-dialog .pd2-add .qty b{font-size:14px!important;color:#154e30!important}

/* the ADD beside the price in the card */
.pd2-card-add>button{height:46px!important;min-height:46px!important;border-radius:14px!important;background:linear-gradient(165deg,rgb(238 246 239 / 96%),rgb(226 240 230 / 82%))!important;border:1.5px solid rgb(29 90 55 / 55%)!important;color:#154e30!important;box-shadow:inset 0 1px 0 rgb(255 255 255 / 85%),0 6px 16px rgb(29 90 55 / 12%)!important}
.pd2-card-add .qty{height:46px!important;border-radius:14px!important;border:1.5px solid rgb(29 90 55 / 55%)!important;background:linear-gradient(165deg,rgb(238 246 239 / 96%),rgb(226 240 230 / 82%))!important}

/* open motion */
#modal.pd2-dialog .pd2-sheet{animation:pd2SheetIn .28s cubic-bezier(.22,1,.36,1) both}
#modal.pd2-dialog .pd2-bar{animation:pd2BarIn .3s cubic-bezier(.22,1,.36,1) .06s both}
@keyframes pd2SheetIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pd2BarIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
 #modal.pd2-dialog .pd2-sheet,#modal.pd2-dialog .pd2-bar,.pd2-stage img{animation:none!important}
}
