/* ========================================================================
   NOBLE FACTORY CART DRAWER
   WooCommerce commerce layer + All Natural cart geometry from supplied export.
   Source component: "FC Cart State" — 450 × 800, 16px shell spacing,
   100px product imagery and 48px checkout button.
   ======================================================================== */
html.nf-cart-open,body.nf-cart-open{overflow:hidden!important}
.nf-cart-drawer{position:fixed;inset:0;z-index:300;pointer-events:none;visibility:hidden}
.nf-cart-drawer.is-open,.nf-cart-drawer.is-closing{visibility:visible}
.nf-cart-drawer.is-open{pointer-events:auto}
.nf-cart-drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.34);opacity:0;transition:opacity .24s cubic-bezier(.22,1,.36,1)}
.nf-cart-drawer.is-open .nf-cart-drawer__backdrop{opacity:1}

/* Exact source footprint on desktop. Do not scale this with vw. */
.nf-cart-drawer__panel{position:absolute;top:0;right:0;width:450px;max-width:100vw;height:800px;max-height:100vh;display:flex;flex-direction:column;background:#fff;color:#000;transform:translate3d(102%,0,0);transition:transform .48s cubic-bezier(.22,1,.36,1);will-change:transform;overflow:hidden}
.admin-bar .nf-cart-drawer__panel{top:32px;max-height:calc(100vh - 32px)}
.nf-cart-drawer.is-open .nf-cart-drawer__panel{transform:translate3d(0,0,0)}

/* Source: sticky header, 16px all around, 16px gap. */
.nf-cart-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-bottom:1px solid rgba(33,26,26,.06);flex:0 0 auto;background:#fff}
.nf-cart-drawer__title{margin:0;font:500 16px/1 var(--nf-font);letter-spacing:-.6px;color:#000}
.nf-cart-drawer__close{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#000;font:400 27px/1 var(--nf-font);cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.nf-cart-drawer__close:hover,.nf-cart-drawer__close:focus-visible{opacity:.55;transform:scale(.96)}

/* Source body: 16px 16px 0, scrollable. */
.nf-cart-drawer__body{flex:1 1 auto;min-height:0;overflow:auto;padding:16px 16px 0;overscroll-behavior:contain}

/* Product card contract recovered from shopX cart item config. */
.nf-cart-item{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;padding:0 0 24px}
.nf-cart-item+.nf-cart-item{padding-top:24px;border-top:1px solid rgba(0,0,0,.08)}
.nf-cart-item__media{display:block;width:100px;height:100px;background:#f5f5f5;overflow:hidden;border-radius:4px}
.nf-cart-item__media img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s ease}
.nf-cart-item__media:hover img{opacity:.75}
.nf-cart-item__content{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.nf-cart-item__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.nf-cart-item__copy{min-width:0}
.nf-cart-item__copy h3{margin:0 0 8px;font:500 14px/1.1 var(--nf-font);letter-spacing:-.4px;color:#000}
.nf-cart-item__copy h3 a{color:inherit;text-decoration:none}
.nf-cart-item__variant{margin:0 0 4px;color:rgba(0,0,0,.4);font:500 12px/1 var(--nf-font);letter-spacing:-.02em}
.nf-cart-item__variant span{color:#000;font-weight:500}
.nf-cart-item__price{flex:0 0 auto;font:500 12px/1 var(--nf-font);letter-spacing:-.04em;white-space:nowrap;color:#000}
.nf-cart-item__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Source quantity config: 1px #e2e2e2, 5px radius, 4px inner padding. */
.nf-cart-qty{height:28px;display:inline-flex;align-items:center;border:1px solid #e2e2e2;border-radius:5px;background:#fff;padding:4px;overflow:hidden}
.nf-cart-qty button,.nf-cart-qty span{height:18px;display:grid;place-items:center}
.nf-cart-qty button{width:18px;padding:0;border:0;background:transparent;color:#000;font:500 12px/1 var(--nf-font);cursor:pointer;transition:opacity .18s ease}
.nf-cart-qty button:hover,.nf-cart-qty button:focus-visible{opacity:.45}
.nf-cart-qty span{min-width:20px;padding:0 2px;font:500 12px/1 var(--nf-font);color:#000}
.nf-cart-item__remove{width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#000;font:400 18px/1 var(--nf-font);cursor:pointer;transition:opacity .18s ease,transform .18s ease}
.nf-cart-item__remove:hover,.nf-cart-item__remove:focus-visible{opacity:.45;transform:scale(.96)}

/* Source checkout block: sticky bottom, gap 16, padding 16 16 24. */
.nf-cart-drawer__footer{flex:0 0 auto;padding:16px 16px 24px;border-top:1px solid #f1efef;background:#fff}
.nf-cart-drawer__footer[hidden]{display:none!important}
.nf-cart-summary{display:flex;flex-direction:column;gap:16px}
.nf-cart-summary__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0;font:500 16px/1 var(--nf-font);letter-spacing:-.6px;color:#000}
.nf-cart-summary__row strong{font-weight:500}
.nf-cart-checkout{width:100%;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--nf-btn-primary-border);border-radius:8px;text-decoration:none;font:500 14px/1 var(--nf-font);letter-spacing:-.4px}


/* All Natural empty-cart source: header owns the empty message; the body
   contains only a Popular Items rail. */
.nf-cart-empty-source{display:flex;flex-direction:column;gap:20px;width:100%;padding:0 0 16px}
.nf-cart-popular__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0}
.nf-cart-popular__head h3{margin:0;font:500 14px/125% var(--nf-font);letter-spacing:-.5px;color:#000}
.nf-cart-popular__arrows{display:flex;align-items:center;gap:7px}
.nf-cart-popular__arrows button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.08);color:#000;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.nf-cart-popular__arrows button:hover,.nf-cart-popular__arrows button:focus-visible{background:rgba(0,0,0,.14)}
.nf-cart-popular__arrows button:active{transform:scale(.9)}
.nf-cart-popular__arrows button:disabled{opacity:.3;cursor:default}
.nf-cart-popular__arrows svg{width:15px;height:15px;fill:currentColor}
.nf-cart-popular{width:calc(100% + 32px);margin-left:-16px;overflow:hidden;scrollbar-width:none}
.nf-cart-popular__track{display:flex;gap:20px;width:max-content;padding:5px 16px 0 15px;will-change:transform;transform:translate3d(0,0,0)}
.nf-cart-popular::-webkit-scrollbar{display:none}
.nf-cart-popular-card{flex:0 0 200px;min-width:0;scroll-snap-align:none}
/* Popular Items keep the canonical Noble product-card component, but the fixed
   450px Bag viewport uses a 200px rail footprint so two complete cards + the
   inter-card gap fit without clipping the next card at rest. Search remains
   220px because it has a wider result column. */
.nf-cart-popular-card>.nf-product-card{width:100%;min-width:0;padding-bottom:0}

.nf-cart-drawer__busy{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(255,255,255,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s linear .15s}
.nf-cart-drawer.is-busy .nf-cart-drawer__busy{opacity:1;visibility:visible;transition-delay:0s}
.nf-cart-drawer__busy span{width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,.12);border-top-color:var(--nf-gold);animation:nfCartSpin .7s linear infinite}
@keyframes nfCartSpin{to{transform:rotate(360deg)}}

@media(max-width:809px){
  .nf-cart-drawer__panel{width:100%;height:100%;max-height:none}
  .admin-bar .nf-cart-drawer__panel{top:46px;height:calc(100% - 46px);max-height:none}
  .nf-cart-drawer__header{padding:16px}
  .nf-cart-drawer__body{padding:16px 16px 0}
  .nf-cart-drawer__footer{padding:16px 16px 24px}
}
@media(prefers-reduced-motion:reduce){.nf-cart-drawer__backdrop,.nf-cart-drawer__panel{transition:none!important}}