/* Shared navigation, bag and campaign motion. */
body.menu-open, body.cart-open { overflow: hidden; }
.menu-open .site-header { position: fixed; top: 22px; }
.mobile-menu {
  display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto 1fr;
  align-content: center; align-items: center; justify-items: stretch; gap: 28px 7%;
  padding: 140px 7% 60px; background: #eef5fa; color: #112c46;
  opacity: 0; clip-path: inset(0 0 100% 0 round 0 0 60px 60px);
  transition: clip-path .7s cubic-bezier(.22,1,.36,1), opacity .35s;
}
.mobile-menu.is-open { opacity: 1; clip-path: inset(0 round 0); }
.menu-kicker { grid-column: 1/-1; font: 600 10px/1.4 var(--drg-clinic-font); letter-spacing: .2em; }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.menu-links > a { position: relative; display: block; padding: 10px 0 10px 30px; font: 730 clamp(30px,4.1vw,66px)/1.03 var(--drg-clinic-font); letter-spacing: -.045em; text-transform: uppercase; opacity: 0; transform: translateY(35px); transition: opacity .4s, transform .65s cubic-bezier(.22,1,.36,1), color .25s; }
.menu-links > a:before { content: attr(data-menu-index); position: absolute; left: 0; top: 15px; font-size: 9px; font-weight: 500; letter-spacing: .05em; color: #6694bc; }
.menu-links > a:after { content: ''; height: 1px; position: absolute; bottom: 0; left: 30px; right: 0; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.menu-links > a:hover, .menu-links > a:focus-visible { color: #428ace; }
.menu-links > a:hover:after, .menu-links > a:focus-visible:after { transform: scaleX(1); }
.is-open .menu-links > a { opacity: 1; transform: none; transition-delay: calc(var(--menu-index) * 45ms + 100ms), calc(var(--menu-index) * 45ms + 100ms), 0s; }
.menu-links > a:last-child { margin-top: 22px; font-size: 15px; letter-spacing: .01em; font-weight: 550; }
.menu-links > a:last-child:before { top: 11px; }
.menu-feature { position: relative; height: min(55vh,560px); min-height: 330px; overflow: hidden; border-radius: 14px; opacity: 0; transform: translateY(25px) scale(.97); transition: opacity .7s .2s, transform .9s cubic-bezier(.22,1,.36,1) .15s; background: #d5e9fa; }
.is-open .menu-feature { opacity: 1; transform: none; }
.menu-feature img { width: 100%; height: 100%; object-fit: cover; object-position: 53% center; }
.menu-feature:after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent,#061c39aa); }
.menu-feature p { position: absolute; z-index: 1; color: white; left: 30px; right: 30px; bottom: 30px; max-width: 340px; font: 600 32px/1.05 var(--drg-clinic-font); letter-spacing: -.035em; }
.drg-cart-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(540px,100%); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-radius: 0; background: #f8fbfd; color: #112c46; box-shadow: -20px 0 80px #061a322b; font-family: var(--drg-clinic-font); overflow: hidden; }
.drg-cart-drawer[open] { display: flex; flex-direction: column; animation: bag-enter .5s cubic-bezier(.22,1,.36,1) both; }
.drg-cart-drawer.is-closing { animation: bag-leave .28s ease both; }
.drg-cart-drawer::backdrop { background: #071a3780; backdrop-filter: blur(7px); animation: bag-backdrop .4s both; }
.drg-cart-drawer.is-closing::backdrop { opacity: 0; transition: opacity .28s; }
.drawer-head { padding: 28px 30px 24px; border-bottom: 1px solid #112c4617; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: none; }
.drawer-head p { font-size: 9px; font-weight: 600; letter-spacing: .18em; margin-bottom: 10px; }
.drg-cart-drawer h2 { margin: 0; font-size: 34px; font-weight: 640; letter-spacing: -.04em; }
.drawer-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid #aec6db; border-radius: 50%; font-size: 27px; font-weight: 300; transition: transform .3s, background .3s; }
.drawer-close:hover { background: #e2effa; transform: rotate(90deg); }
.drawer-body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 30px; flex: 1; min-height: 0; }
.drawer-status { display: flex; gap: 12px; align-items: center; padding: 25px 0; font-size: 13px; }
.drawer-spinner { display: inline-block; border: 2px solid #c6dced; border-top-color: #112c46; width: 20px; height: 20px; border-radius: 50%; animation: bag-spin .8s linear infinite; }
.drawer-item { display: grid; grid-template-columns: 95px minmax(0,1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid #112c4615; animation: item-enter .35s both; }
.drawer-item-art { background: white; border-radius: 9px; align-self: start; overflow: hidden; }
.drawer-item-art img { height: 120px; width: 100%; object-fit: contain; }
.drawer-item h3 { font-size: 16px; font-weight: 620; line-height: 1.25; margin: 3px 0 8px; }
.drawer-item-price { font-size: 13px; font-weight: 550; }
.drawer-item-variant { font-size: 11px; color: #58758e; margin-bottom: 8px; }
.drawer-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; }
.drawer-quantity { display: inline-flex; align-items: center; border: 1px solid #bad0e1; border-radius: 7px; overflow: hidden; }
.drawer-quantity button { display: grid; place-items: center; width: 35px; height: 36px; font-size: 20px; transition: background .2s; }
.drawer-quantity button:hover { background: #e1edf7; }
.drawer-quantity output { display: inline-block; min-width: 25px; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.drawer-remove { font-size: 10px; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; padding: 5px 0 5px 8px; color: #486780; }
.drawer-footer { flex: none; padding: 24px 30px max(26px,env(safe-area-inset-bottom)); border-top: 1px solid #112c4617; background: white; }
.drawer-total { display: flex; justify-content: space-between; font-size: 19px; font-weight: 600; margin-bottom: 12px; }
.drawer-footer p { font-size: 11px; line-height: 1.55; color: #5c7890; margin-bottom: 19px; }
.drawer-checkout.button { display: flex; width: 100%; min-height: 52px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; justify-content: space-between; }
.drawer-full-cart { display: block; text-align: center; font-size: 11px; margin-top: 15px; text-decoration: underline; text-underline-offset: 4px; }
.drawer-empty { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; min-height: 400px; padding: 35px 10px; }
.drawer-empty img { width: 220px; height: 160px; object-fit: cover; border-radius: 80px; margin-bottom: 25px; }
.drawer-empty h3 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; margin-bottom: 14px; }
.drawer-empty p { max-width: 290px; font-size: 13px; line-height: 1.6; margin-bottom: 25px; color: #55728b; }
.drawer-error { background: #fff3ef; color: #7d3529; padding: 15px 18px; margin: 14px 0; border-radius: 8px; font-size: 12px; line-height: 1.5; }
.drawer-body[aria-busy="true"] .drawer-item { opacity: .55; }
.drg-cart-drawer button:disabled { cursor: wait; opacity: .5; }
.drawer-checkout[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.site-header .cart-link.is-cart-updated [data-cart-count] { animation: bag-count .55s cubic-bezier(.22,1,.36,1); }
.campaign-video { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .6s; }
.campaign-video.is-playing { opacity: 1; }
.routine-video { inset: 0; object-position: 48% center; }
.motion-toggle { position: absolute; z-index: 3; right: 25px; bottom: 25px; width: 38px; height: 38px; display: grid; place-items: center; background: #ffffffd9; color: #112c46; border: 1px solid #97b6d166; border-radius: 50%; backdrop-filter: blur(12px); font-size: 13px; }
.routine-scene .motion-toggle { top: 20px; bottom: auto; right: 20px; }
.motion-toggle:hover { background: #fff; }
.media-paused .campaign-video { opacity: 0; }
.customer-review-section { padding: 85px 4.5%; background: #eff5fa; }
.customer-review-heading { margin-bottom: 38px; }
.customer-review-heading h2 { font-size: clamp(38px,4.5vw,65px); margin-bottom: 18px; }
.customer-review-heading > p:last-child { font-size: 13px; color: #55728b; }
.customer-review-section .drg-review-card { transition: transform .35s, box-shadow .35s; }
.customer-review-section .drg-review-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px #183b580a; }
@keyframes bag-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes bag-leave { to { transform: translateX(100%); } }
@keyframes bag-backdrop { from { background: #071a3700; backdrop-filter: blur(0); } }
@keyframes item-enter { from { opacity: 0; transform: translateY(10px); } }
@keyframes bag-spin { to { transform: rotate(360deg); } }
@keyframes bag-count { 40% { transform: scale(1.45); } 75% { transform: scale(.92); } }
@media(max-width:760px) {
  .customer-review-section { padding: 55px 6%; }
  .menu-open .site-header { top: 16px; }
  .mobile-menu { padding: 115px 7% 30px; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; align-content: start; gap: 25px; }
  .menu-kicker { font-size: 8px; }
  .menu-links { gap: 6px; }
  .menu-links > a { font-size: clamp(28px,7.5vw,47px); padding: 8px 0 8px 25px; }
  .menu-links > a:before { top: 12px; font-size: 8px; }
  .menu-links > a:last-child { margin-top: 10px; font-size: 13px; }
  .menu-feature { height: 175px; min-height: 150px; width: 100%; align-self: end; }
  .menu-feature img { object-position: 50% 54%; }
  .menu-feature p { font-size: 22px; bottom: 18px; left: 20px; max-width: 240px; }
  .drawer-head { padding: 25px 20px 22px; }
  .drg-cart-drawer h2 { font-size: 30px; }
  .drawer-body { padding: 8px 20px; }
  .drawer-footer { padding: 20px 20px max(24px,env(safe-area-inset-bottom)); }
  .drawer-item { grid-template-columns: 76px minmax(0,1fr); gap: 16px; padding: 22px 0; }
  .drawer-item-art img { height: 105px; }
  .drawer-item h3 { font-size: 14px; }
  .motion-toggle { right: 18px; bottom: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .customer-review-section .drg-review-card { transition: none; transform: none; }
  .mobile-menu, .menu-links > a, .menu-feature, .drawer-close, .campaign-video { transition: none; }
  .drg-cart-drawer[open], .drg-cart-drawer::backdrop, .drg-cart-drawer.is-closing, .drawer-item, .site-header .cart-link.is-cart-updated [data-cart-count] { animation: none; }
  .campaign-video, .motion-toggle { display: none; }
}