/** Shopify CDN: Minification failed

Line 127:12 Unexpected "0%"
Line 128:12 Unexpected "62%"
Line 129:12 Unexpected "100%"
Line 130:12 Unexpected "0%"
Line 131:12 Unexpected "70%"
Line 132:12 Unexpected "100%"
Line 133:12 Unexpected "0%"
Line 134:12 Unexpected "100%"

**/
/* Cart drawer, ported from the drawer band of docs/mockups/pdp.html.
 *
 * GENERATED. Do not edit by hand: run `node tools/build-drawer-css.mjs`.
 *
 * Lifted verbatim in source order, so the cascade is identical by construction
 * rather than hand resolved. The same selector may appear more than once on
 * purpose, and later wins.
 *
 * The phone band is lifted the same way, from the mockup's #p-mob selectors, and
 * wrapped in the theme's breakpoint.
 */

@keyframes drw-pop{
  0%{opacity:0;transform:translateY(10px) scale(.985)}
  62%{opacity:1;transform:translateY(-3px) scale(1.004)}
  100%{opacity:1;transform:none}
}
@keyframes drw-ring{
  0%{transform:scale(.35);opacity:0}
  70%{transform:scale(1.14);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes drw-draw{
  0%{stroke-dashoffset:24}
  100%{stroke-dashoffset:0}
}

.page-wrapper { transition:padding-right .3s cubic-bezier(.22,.61,.36,1) }
.page-wrapper.aps-push-open { padding-right:380px }
.aps-drawer .drw { position:absolute;top:0;right:0;bottom:0;width:380px;z-index:60;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1) }
.aps-drawer .drw.is-open { transform:none }
.aps-drawer .drw-in { position:sticky;top:0;height:100vh;background:#fff;border-left:1px solid var(--aps-line);
  box-shadow:-16px 0 38px rgba(5,42,92,.10);display:flex;flex-direction:column }
.aps-drawer .drw-hd { display:flex;align-items:center;gap:11px;padding:15px 18px 14px;
  border-bottom:1px solid var(--aps-line);flex:none }
.aps-drawer .drw-tick { width:26px;height:26px;border-radius:999px;background:var(--aps-stock-bg);display:grid;
  place-items:center;flex:none }
.aps-drawer .drw-tick svg { width:15px;height:15px;stroke:var(--aps-stock-ink);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round }
.aps-drawer .drw-hd b { flex:1;min-width:0;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--aps-ink) }
.aps-drawer .drw-x { width:30px;height:30px;flex:none;border:0;background:none;padding:0;cursor:pointer;
  border-radius:4px;display:grid;place-items:center;color:var(--aps-slate);margin:0 -6px 0 0 }
.aps-drawer .drw-x:hover { background:var(--aps-surface);color:var(--aps-ink) }
.aps-drawer .drw-x svg { width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round }
.aps-drawer .drw-body { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain }
.aps-drawer .drw-row { display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--aps-line);position:relative }
.aps-drawer .drw-im { width:64px;height:64px;border:1px solid var(--aps-line);border-radius:4px;background:#fff;
  display:grid;place-items:center;overflow:hidden;padding:4px }
.aps-drawer .drw-im img { max-width:100%;max-height:100%;display:block }
.aps-drawer .drw-bd { min-width:0 }
.aps-drawer .drw-ti { display:block;font-size:13px;font-weight:650;line-height:1.35;color:var(--aps-ink);
  text-decoration:none;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
.aps-drawer .drw-ti:hover { color:var(--aps-brand) }
.aps-drawer .drw-opt { font-size:12px;color:var(--aps-slate);margin-top:2px }
.aps-drawer .drw-ctl { display:flex;align-items:center;gap:10px;margin-top:8px }
.aps-drawer .drw-qty { display:flex;align-items:center;border:1px solid var(--aps-ctl);border-radius:4px;
  overflow:hidden;background:#fff;flex:none }
.aps-drawer .drw-qty button { width:30px;height:32px;border:0;background:#fff;cursor:pointer;color:var(--aps-slate);
  font-size:16px;font-weight:600;line-height:1 }
.aps-drawer .drw-qty button:hover { background:var(--aps-surface);color:var(--aps-ink) }
.aps-drawer .drw-qty button[disabled] { color:var(--aps-line);cursor:default;background:#fff }
.aps-drawer .drw-qty span { width:32px;text-align:center;font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums }
.aps-drawer .drw-rm { width:32px;height:32px;flex:none;border:0;background:none;padding:0;cursor:pointer;
  border-radius:4px;display:grid;place-items:center;color:var(--aps-slate) }
.aps-drawer .drw-rm:hover { background:#fff;color:var(--aps-red) }
.aps-drawer .drw-rm svg { width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round }
.aps-drawer .drw-pz { margin-left:auto;font-size:15px;font-weight:800;letter-spacing:-.028em;color:var(--aps-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap }
.aps-drawer .drw-pz sup { font-size:9.5px;font-weight:700;vertical-align:baseline;position:relative;top:-.5em }
.aps-drawer .drw-rail { padding:16px 18px 20px;border-top:1px solid var(--aps-line);background:var(--aps-surface) }
.aps-drawer .drw-rail h2 { margin:0 0 12px;font-size:14px;font-weight:800;letter-spacing:-.018em;color:var(--aps-ink) }
.aps-drawer .drw-cards { display:flex;flex-direction:column;gap:12px }
.aps-drawer .drw-c { background:#fff;border:1px solid var(--aps-line);border-radius:5px;padding:11px 12px;
  display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:12px;row-gap:10px }
.aps-drawer .drw-c .ph { grid-column:1;grid-row:1;width:64px;height:64px;border:1px solid var(--aps-line);
  border-radius:4px;background:#fff;display:grid;place-items:center;overflow:hidden;padding:5px }
.aps-drawer .drw-c .ph img { max-width:100%;max-height:100%;display:block }
.aps-drawer .drw-cb { grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:3px }
.aps-drawer .drw-c .nm { font-size:12.5px;line-height:1.35;color:var(--aps-ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden }
.aps-drawer .drw-c .nm:hover { color:var(--aps-brand) }
.aps-drawer .drw-c .rt { display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--aps-mute);
  font-variant-numeric:tabular-nums }
.aps-drawer .drw-c .rt i { font-style:normal }
.aps-drawer .drw-c .stars { display:flex;gap:1.5px;align-items:center }
.aps-drawer .drw-c .stars svg { width:12px;height:12px;fill:var(--aps-sun);stroke:none }
.aps-drawer .drw-c .pz { font-size:15px;font-weight:800;color:var(--aps-ink);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;margin-top:1px }
.aps-drawer .drw-c .pz sup { font-size:9.5px;font-weight:700;vertical-align:baseline;position:relative;top:-.5em }
.aps-drawer .drw-c .add { grid-column:1/3;grid-row:2;height:36px;border:1.5px solid var(--aps-sun);border-radius:4px;
  background:#fff;font:inherit;font-size:13px;font-weight:750;color:var(--aps-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px }
.aps-drawer .drw-c .add:hover { background:var(--aps-sun);color:var(--aps-deep) }
.aps-drawer .drw-c .add .ok { display:none;align-items:center;gap:7px }
.aps-drawer .drw-c .add.is-added { border-color:var(--aps-stock-ink);color:var(--aps-stock-ink);background:var(--aps-added,var(--aps-stock-bg));cursor:default }
.aps-drawer .drw-c .add.is-added .lb { display:none }
.aps-drawer .drw-c .add.is-added .ok { display:flex }
.aps-drawer .drw-c .add .ok svg { width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round }
.aps-drawer .drw-foot { flex:none;border-top:1px solid var(--aps-line);background:#fff;padding:13px 18px 15px;
  box-shadow:0 -8px 20px rgba(5,42,92,.05) }
.aps-drawer .drw-line { display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--aps-slate);padding:3px 0 }
.aps-drawer .drw-line .v { font-variant-numeric:tabular-nums;font-weight:650;color:var(--aps-ink) }
.aps-drawer .drw-line .v.free { color:var(--aps-stock-ink);font-weight:800 }
.aps-drawer .drw-line.tot { font-size:14px;font-weight:800;color:var(--aps-ink);padding:0 }
.aps-drawer .drw-line.tot .v { font-size:21px;letter-spacing:-.03em }
.aps-drawer .drw-line.tot .v sup { font-size:11px;vertical-align:baseline;position:relative;top:-.6em }
.aps-drawer 0% { opacity:0;transform:translateY(10px) scale(.985) }
.aps-drawer 62% { opacity:1;transform:translateY(-3px) scale(1.004) }
.aps-drawer 100% { opacity:1;transform:none }
.aps-drawer 0% { transform:scale(.35);opacity:0 }
.aps-drawer 70% { transform:scale(1.14);opacity:1 }
.aps-drawer 100% { transform:scale(1);opacity:1 }
.aps-drawer 0% { stroke-dashoffset:24 }
.aps-drawer 100% { stroke-dashoffset:0 }
.aps-drawer .drw-row.is-pop { animation:drw-pop .42s cubic-bezier(.34,1.56,.64,1) both }
.aps-drawer .drw-hd.is-pop .drw-tick { animation:drw-ring .42s cubic-bezier(.34,1.56,.64,1) both }
.aps-drawer .drw-hd.is-pop .drw-tick svg path { stroke-dasharray:24;animation:drw-draw .34s ease .12s both }
.aps-drawer .drw-ship { font-size:12.5px;line-height:1.4;margin-top:7px }
.aps-drawer .drw-ship .txt { display:flex;align-items:center;gap:7px;color:var(--aps-slate) }
.aps-drawer .drw-ship svg { width:16px;height:16px;stroke:var(--aps-slate);stroke-width:1.7;fill:none;flex:none;
  stroke-linecap:round;stroke-linejoin:round }
.aps-drawer .drw-ship b { color:var(--aps-ink);font-weight:800;font-variant-numeric:tabular-nums }
.aps-drawer .drw-ship b.fs { color:var(--aps-stock-ink) }
.aps-drawer .drw-bar { display:block;height:5px;border-radius:999px;background:var(--aps-track);margin-top:6px;overflow:hidden }
.aps-drawer .drw-bar i { display:block;height:100%;border-radius:999px;background:var(--aps-green) }
.aps-drawer .drw-acts { display:grid;grid-template-columns:1fr 1.32fr;gap:9px;margin-top:11px }
.aps-drawer .drw-cart { display:inline-flex;align-items:center;justify-content:center;gap:14px;height:46px;
  border:1px solid var(--aps-ctl);border-radius:4px;background:#fff;font-size:14px;font-weight:750;
  color:var(--aps-ink);text-decoration:none }
.aps-drawer .drw-cart:hover { border-color:var(--aps-brand);color:var(--aps-brand) }
.aps-drawer .drw-ic { position:relative;flex:none;display:block;line-height:0 }
.aps-drawer .drw-ic svg { width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round }
.aps-drawer .drw-ic .bdg { position:absolute;left:12px;top:-7px;background:var(--aps-sun);color:var(--aps-deep);
  font-size:10.5px;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:grid;
  place-items:center;padding:0 4px;font-variant-numeric:tabular-nums;border:2px solid #fff }
.aps-drawer .drw-go { height:46px;border:0;border-radius:4px;background:var(--aps-sun);color:var(--aps-deep);font:inherit;
  font-size:15px;font-weight:800;letter-spacing:-.01em;cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:8px }
.aps-drawer .drw-go svg { width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;flex:none;
  stroke-linecap:round;stroke-linejoin:round }
.aps-drawer .drw-go:hover { background:var(--aps-star) }
.aps-push-open .aps-pdp .pdp { grid-template-columns:minmax(0,1fr) 412px }
.aps-push-open .aps-pdp .grid4 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.aps-push-open .aps-pdp .cols { grid-template-columns:minmax(0,1fr) 392px }
.aps-push-open .aps-pdp .revs { grid-template-columns:196px minmax(0,1fr);gap:24px }
.aps-push-open .aps-pdp .nl { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent) }

@media (max-width: 767px) {
  .page-wrapper { position:relative;left:0;transition:left .3s cubic-bezier(.22,.61,.36,1) }
  .page-wrapper.aps-push-open { padding-right:0;left:-100% }
  .aps-drawer .drw { width:100% }
  .aps-drawer .drw-in { border-left:0;box-shadow:none }
  .aps-drawer .drw-in { height:812px }
  .aps-drawer .drw-hd { padding:14px }
  .aps-drawer .drw-ship { margin:11px 14px 0 }
  .aps-drawer .drw-row { padding:13px 14px }
  .aps-drawer .drw-rail { padding:15px 14px 17px }
  .aps-drawer .drw-cards { margin:0 -14px;padding:0 14px }
  .aps-drawer .drw-foot { padding:12px 14px 14px }
  .aps-drawer .drw-acts { grid-template-columns:1fr 1fr }
  .aps-drawer .drw-note { margin-top:7px }
}

/* ── the mockup's frame was standing in for a viewport ──────────────────────
   In the mockup the panel is absolute inside a frame that is pretending to be a
   browser window, with a sticky child to reproduce what fixed would do. Here
   there is a real viewport, so the panel is fixed to it and the child is just a
   column. Everything else about both, including the width and the slide, is the
   band's. */
.aps-drawer .drw { position: fixed }
.aps-drawer .drw-in { position: static; height: 100% }

/* ── the checkout button is inside a form ────────────────────────────────────
   Checkout posts to the cart, so the theme wraps that button in a form the mockup
   does not have. Left alone the form is the grid item and the button inside it
   sizes to its own text, so Checkout stood narrower than the column it was given
   and ran under the panel edge. The form dissolves and the button becomes the
   grid item it was drawn as. Third time this pattern has bitten in this theme,
   after the bundle card and the buy panel. */
.aps-drawer .drw-acts form { display: contents }

/* ── hidden has to mean hidden ───────────────────────────────────────────────
   The two shipping states are the one pair here where script hides one and shows
   the other, and it does it with the hidden attribute. [hidden] carries
   display:none at one specificity point, and .aps-drawer .drw-ship.met carries
   display:flex at three, so the met state ignored being hidden and the panel
   showed "Add $145.04 for free shipping" directly above "Your order ships free".
   The mockup never met this because it draws one state and not the other. */
.aps-drawer [hidden] { display: none !important }

/* ── the page wrapper ───────────────────────────────────────────────────────
   .page-wrapper is Horizon's, and it wraps the header, the main and the footer,
   which is exactly the set that should move. The transition is stated here
   because the mockup states it on .pgw, and .pgw is what this replaced.

   Both properties, because the two widths move the page differently: padding
   above the breakpoint, a relative offset below it. This block is appended after
   the media query, so naming only one would have taken the other's transition
   away and the phone would have jumped rather than slid. */
.page-wrapper {
  transition: padding-right .3s cubic-bezier(.22, .61, .36, 1),
              left .3s cubic-bezier(.22, .61, .36, 1);
}

/* Nothing may spill sideways while the page is 380px narrower than the window.
   A section that sets its own width in viewport units does not know about the
   push, and a horizontal scrollbar under an open panel reads as a broken page. */
.page-wrapper.aps-push-open { overflow-x: clip }

@media (prefers-reduced-motion: reduce) {
  .page-wrapper,
  .aps-drawer .drw,
  .aps-drawer .drw-row,
  .aps-drawer .drw-tick,
  .aps-drawer .drw-tick svg path { transition: none !important; animation: none !important }
}