/* ========================================================================= Nutraponics Global Chrome — SIDE CART Loaded after np-chrome.css. Written already scoped under body.np-chrome-on (do NOT run scratchpad/scope.js over this file — it is not unscoped source). The kit reset below repeats the one at the top of np-chrome.css, because that one only covers .np-header / .np-footer / .np-drawer. Keep every selector here at exactly (0,2,1) — `body` + two classes, with the element half inside a zero-weight `:where()`. Reset and component then tie and source order decides, which is the whole scheme. Do NOT "protect" the reset with `:not(.np-btn)`: that lifts it to (0,3,1), and it silently wins over every width and padding declared below it (it stretched the quantity stepper across the whole row the first time). `.np-btn` needs no protection anyway — every one of them here is an , which this reset never matches. ========================================================================= */ body.np-chrome-on .np-cart :where(button, input, select, textarea) { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; margin: 0; padding: 0; min-height: 0; min-width: 0; line-height: normal; width: auto; } body.np-chrome-on .np-cart :where(h1, h2, h3, h4, p) { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; } body.np-chrome-on .np-cart :where(ul, ol, li) { margin: 0; padding: 0; list-style: none; } body.np-chrome-on .np-cart :where(a) { text-decoration: none; box-shadow: none; } body.np-chrome-on .np-cart :where(img) { max-width: 100%; height: auto; border-radius: 0; } body.np-chrome-on .np-cart * { box-sizing: border-box; } body.np-chrome-on .np-cart a:focus-visible, body.np-chrome-on .np-cart button:focus-visible, body.np-chrome-on .np-cart input:focus-visible { outline: 2px solid var(--np-pine); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------------- the panel */ /* np-cart.js re-parents this to , so the header's z-index 900 stacking context cannot cap it and the panel overlays the sticky header. */ body.np-chrome-on .np-cart__scrim { position: fixed; inset: 0; z-index: 100000; background: rgba(18, 35, 28, .38); opacity: 0; transition: opacity var(--np-ease); } body.np-chrome-on .np-cart__scrim[hidden] { display: none; } body.np-chrome-on .np-cart__scrim.is-on { opacity: 1; } body.np-chrome-on .np-cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100001; display: flex; flex-direction: column; width: min(420px, 100vw); background: var(--np-paper); color: var(--np-charcoal); font-family: var(--np-sans); box-shadow: -20px 0 46px rgba(18, 35, 28, .18); transform: translateX(100%); transition: transform var(--np-ease); overscroll-behavior: contain; } body.np-chrome-on .np-cart[hidden] { display: none; } body.np-chrome-on .np-cart.is-open { transform: none; } /* bar ---------------------------------------------------------------------- */ body.np-chrome-on .np-cart__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 10px 0 20px; background: var(--np-forest-deep); } body.np-chrome-on .np-cart__title { display: flex; align-items: baseline; gap: 9px; color: #fff; font: 600 15.5px/1.2 var(--np-sans); letter-spacing: .004em; } body.np-chrome-on .np-cart__count { font: 500 12.5px/1.2 var(--np-sans); color: var(--np-sage); letter-spacing: .01em; } body.np-chrome-on .np-cart__close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; color: #fff; cursor: pointer; border-radius: 6px; transition: background-color var(--np-ease); } body.np-chrome-on .np-cart__close:hover { background: rgba(255, 255, 255, .13); } /* body --------------------------------------------------------------------- */ body.np-chrome-on .np-cart__content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } body.np-chrome-on .np-cart__items { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 2px 20px; } body.np-chrome-on .np-cart__item { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 17px 0; border-bottom: 1px solid var(--np-border); transition: opacity var(--np-ease); } body.np-chrome-on .np-cart__item:last-child { border-bottom: 0; } body.np-chrome-on .np-cart__item.is-busy { opacity: .45; pointer-events: none; } body.np-chrome-on .np-cart__thumb { display: block; width: 68px; border-radius: 8px; overflow: hidden; background: var(--np-ivory); border: 1px solid var(--np-border); } body.np-chrome-on .np-cart__thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } body.np-chrome-on .np-cart__meta { min-width: 0; } body.np-chrome-on .np-cart__name { display: block; color: var(--np-forest-deep); font: 600 13.8px/1.4 var(--np-sans); transition: color var(--np-ease); } body.np-chrome-on a.np-cart__name:hover { color: var(--np-pine); } body.np-chrome-on .np-cart__var { margin-top: 4px; color: var(--np-muted); font: 400 12.2px/1.5 var(--np-sans); } body.np-chrome-on .np-cart__each { margin-top: 5px; color: var(--np-muted); font: 500 12.2px/1.3 var(--np-sans); } body.np-chrome-on .np-cart__row { display: flex; align-items: center; gap: 12px; margin-top: 10px; } body.np-chrome-on .np-cart__fixedqty { color: var(--np-muted); font: 600 12.5px/1 var(--np-sans); } body.np-chrome-on .np-cart__line { color: var(--np-forest-deep); font: 600 14px/1.4 var(--np-sans); white-space: nowrap; text-align: right; } /* Woo prints struck-through originals inside price markup. */ body.np-chrome-on .np-cart__line del { color: var(--np-muted); font-weight: 500; } body.np-chrome-on .np-cart__line ins { text-decoration: none; } /* quantity stepper --------------------------------------------------------- */ body.np-chrome-on .np-qty { display: inline-flex; align-items: center; border: 1px solid var(--np-border); border-radius: 6px; overflow: hidden; background: #fff; flex: none; } body.np-chrome-on .np-qty__btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 30px; color: var(--np-forest-deep); cursor: pointer; transition: background-color var(--np-ease); } body.np-chrome-on .np-qty__btn:hover { background: var(--np-ivory); } body.np-chrome-on .np-qty__in { width: 34px; height: 30px; text-align: center; border-left: 1px solid var(--np-border); border-right: 1px solid var(--np-border); background: #fff; color: var(--np-charcoal); font: 600 13px/1 var(--np-sans); } body.np-chrome-on .np-cart__rm { display: inline-flex; align-items: center; gap: 5px; color: var(--np-muted); cursor: pointer; font: 500 12.2px/1 var(--np-sans); transition: color var(--np-ease); } body.np-chrome-on .np-cart__rm:hover { color: #A23B2E; } /* foot --------------------------------------------------------------------- */ body.np-chrome-on .np-cart__foot { flex: none; padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--np-border); background: var(--np-ivory); } body.np-chrome-on .np-cart__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--np-forest-deep); font: 600 15px/1.3 var(--np-sans); } body.np-chrome-on .np-cart__subval { font-size: 18px; } body.np-chrome-on .np-cart__sub del { color: var(--np-muted); font-weight: 500; } body.np-chrome-on .np-cart__sub ins { text-decoration: none; } body.np-chrome-on .np-cart__note { margin-top: 5px; color: var(--np-muted); font: 400 12.2px/1.5 var(--np-sans); } body.np-chrome-on .np-cart__checkout { margin-top: 14px; min-height: 48px; } body.np-chrome-on .np-cart__viewcart { display: block; margin-top: 11px; text-align: center; color: var(--np-pine); font: 600 13px/1 var(--np-sans); text-decoration: underline; text-underline-offset: 3px; } body.np-chrome-on .np-cart__viewcart:hover { color: var(--np-forest-deep); } /* empty -------------------------------------------------------------------- */ body.np-chrome-on .np-cart__empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 40px 28px; text-align: center; } body.np-chrome-on .np-cart__emptyico { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 14px; border-radius: 50%; background: var(--np-sage-panel); color: var(--np-forest); } body.np-chrome-on .np-cart__emptyh { color: var(--np-forest-deep); font: 600 17px/1.3 var(--np-sans); } body.np-chrome-on .np-cart__emptyp { margin-top: 6px; color: var(--np-muted); font: 400 13.4px/1.6 var(--np-sans); max-width: 30ch; } body.np-chrome-on .np-cart__empty .np-btn { margin-top: 20px; } /* the header icon is now a disclosure ------------------------------------- */ body.np-chrome-on .np-util--cart { cursor: pointer; } /* ------------------------------------------------------------------ mobile */ @media (max-width: 480px) { body.np-chrome-on .np-cart { width: 100vw; } body.np-chrome-on .np-cart__items { padding-inline: 16px; } body.np-chrome-on .np-cart__foot { padding-inline: 16px; } body.np-chrome-on .np-cart__item { grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; } body.np-chrome-on .np-cart__thumb { width: 60px; } body.np-chrome-on .np-cart__rm span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { body.np-chrome-on .np-cart, body.np-chrome-on .np-cart__scrim { transition: none; } }