/* Side cart, cart page and the pieces checkout shares, the Uber Eats pattern (28 Oct 2026). Mobile first, the site's tokens
   (main.css). White, lines parted by space, thin forest lines on the controls, flat buttons, centred heads. */

/* The side cart ------------------------------------------------------------------------------------------------------ */
.cart-drawer { position: fixed; inset: 0; z-index: 95; background: rgba(28, 30, 27, 0); transition: background-color .32s var(--ease); }
.cart-drawer.is-open { background: rgba(28, 30, 27, .5); }
.cart-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 440px); background: var(--paper); box-shadow: var(--sh-3); transform: translateX(100%); transition: transform .32s var(--ease); }
.cart-drawer.is-open .cart-drawer__panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .cart-drawer, .cart-drawer__panel { transition: none; } }

.cartbox--drawer { display: flex; flex-direction: column; height: 100%; }
.cartbox__head { position: relative; flex: none; padding: 18px 64px 14px; text-align: center; }
.cartbox__title { font: 800 24px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .01em; color: var(--navy); }
.cartbox__title span { color: var(--muted); font-weight: 600; }
.cartbox__close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.cartbox--drawer .cartbox__grid { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cartbox--drawer .cartbox__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 22px; }
.cartbox--drawer.is-empty .cartbox__scroll { flex: 1; }
.cartbox--drawer .cartbox__foot { flex: none; display: grid; gap: 10px; padding: 16px 20px 20px; background: var(--paper); box-shadow: 0 -12px 24px -16px rgba(28, 30, 27, .35); }
.cartbox__sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 15px/1.2 var(--f-body); }
.cartbox__sum b { font: 600 24px/1 var(--f-head); letter-spacing: .01em; }
.cartbox__note { font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }
.cartbox__terms { font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.cartbox__terms a { font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.forest .cartbox__terms { color: var(--muted-light); }
.forest .cartbox__terms a { color: var(--birch); }
.cartbox.is-busy .lines { opacity: .55; pointer-events: none; transition: opacity .2s; }

.cartbox__empty { display: grid; justify-items: center; gap: 10px; padding: 36px 8px 8px; text-align: center; color: var(--muted); font-size: 15px; }
.cartbox__empty > .ico { width: 56px; height: 56px; stroke-width: 1.4; color: var(--navy); }
.cartbox__empty-title { font: 800 22px/1.1 var(--f-head); text-transform: uppercase; color: var(--navy); }
.cartbox__empty .btn { margin-top: 8px; }

/* Lines: clean white rows, newest first, the photo on the cards' light field */
.lines { display: grid; gap: 12px; counter-reset: line; }
/* Each line a block with a thin forest frame and its number (Ben, 28 Oct: "add numbers and blocks with thin frame so it be separted") */
.line { display: grid; grid-template-columns: 26px 84px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--navy); border-radius: var(--r-2); }
.line::before { counter-increment: line; content: counter(line); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: var(--navy); color: var(--birch); font: 600 15px/1 var(--f-head); }
.line__media { position: relative; display: block; aspect-ratio: 1; background: var(--field-light); border-radius: 4px; overflow: hidden; }
.line__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.line__body { display: flex; flex-direction: column; min-width: 0; }
.line__title { font: 600 14px/1.3 var(--f-body); color: var(--navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line__title:hover { color: var(--navy-2); }
.line__opt { margin-top: 3px; font-size: 13px; color: var(--muted); }
.line__added { display: flex; align-items: center; gap: 5px; margin-top: 4px; font: 600 13px/1.2 var(--f-body); color: var(--glo-success); }
.line__added .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.line__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; } /* gate 83: at 320 the stepper + price need more than the ~130px body column, so the price takes the next line */
.line__price { font: 600 18px/1 var(--f-head); letter-spacing: .01em; white-space: nowrap; }
.line__price del { font: 500 13px var(--f-body); color: var(--muted); margin-right: 6px; }
.qty--line { display: grid; grid-template-columns: 34px 40px 34px; height: 36px; border: 1px solid var(--navy); border-radius: 4px; background: #fff; }
.qty--line button { display: grid; place-items: center; color: var(--ink); transition: background var(--fast); }
.qty--line button:hover { background: var(--canvas); }
.qty--line button[disabled] { opacity: .35; pointer-events: none; }
.qty--line .ico { width: 16px; height: 16px; stroke-width: 2; }
.qty--line input { width: 100%; min-width: 0; border: 0; background: transparent; font: 600 14px var(--f-body); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.qty--line input::-webkit-inner-spin-button, .qty--line input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Free shipping bar: a truck riding the fill to the $150 line */
.shipbar { margin: 4px 0 16px; }
.shipbar__msg { font-size: 14px; line-height: 1.4; text-align: center; }
.shipbar__msg b { font-weight: 700; }
.shipbar__track { position: relative; height: 8px; margin: 14px 15px 8px; border-radius: 4px; background: var(--canvas-2); }
.shipbar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 4px; background: var(--navy); transition: width .5s var(--ease); }
.shipbar__truck { position: absolute; top: 50%; left: var(--p); width: 30px; height: 30px; display: grid; place-items: center; transform: translate(-50%, -50%); background: var(--paper); border: 1.5px solid var(--navy); border-radius: 4px; color: var(--navy); transition: left .5s var(--ease); }
.shipbar__truck .ico { width: 18px; height: 18px; }
.shipbar.is-free .shipbar__fill { background: var(--blaze); }
.shipbar.is-free .shipbar__truck { border-color: var(--blaze); background: var(--blaze); color: var(--glo-cta-ink); }

/* "Popular with your order": the Uber Eats row, square cards, a + on each photo */
.addons { margin-top: 24px; }
.addons__title { margin-bottom: 12px; font: 700 18px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); text-align: center; }
.rail--mini .rail__track { grid-auto-columns: 132px; gap: 10px; padding-bottom: 4px; }
.rail--mini .rail__arrow { top: 49px; width: 34px; height: 34px; }
.rail--mini .rail__arrow .ico { width: 18px; height: 18px; }
.rail--mini .rail__arrow--prev { left: -12px; }
.rail--mini .rail__arrow--next { right: -12px; }
.rail--mini .rail__bar { width: 120px; margin-top: 12px; }
.addon { display: grid; grid-template-rows: auto auto 1fr; background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-2); overflow: hidden; }
.addon__media { grid-area: 1 / 1; position: relative; display: block; aspect-ratio: 1; background: var(--field-light); }
.addon__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; mix-blend-mode: multiply; }
.addon__add { grid-area: 1 / 1; z-index: 1; align-self: end; justify-self: end; margin: 0 8px 8px 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 4px; background: var(--navy); color: #fff; box-shadow: var(--sh-1); transition: background var(--fast), color var(--fast), transform var(--fast); }
.addon__add:hover { background: var(--blaze); color: var(--glo-cta-ink); }
.addon__add:active { transform: scale(.94); }
.addon__add .ico { width: 18px; height: 18px; stroke-width: 2.4; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.addon__add:hover .ico { transform: rotate(180deg); }
.addon__add .addon__done { display: none; }
.addon__add.is-busy .ico { animation: addon-spin .8s linear infinite; }
.addon__add.is-done { background: var(--glo-success); color: #fff; }
.addon__add.is-done .ico:not(.addon__done) { display: none; }
.addon__add.is-done .addon__done { display: block; transform: none; }
@keyframes addon-spin { to { transform: rotate(360deg); } }
.addon__price { padding: 8px 10px 0; }
.addon__price .price { font: 600 16px/1.1 var(--f-head); letter-spacing: .01em; gap: 6px; }
.addon__price .price del { font: 500 12px var(--f-body); }
.addon__title { margin: 3px 10px 10px; font: 500 12.5px/1.3 var(--f-body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The picker covers the row and grows down over what follows when the options need more room (a long colour list), with
   its own ink so the dark checkout column's light text never lands on its white. */
.addon__pick { position: absolute; inset: 0 0 auto; min-height: calc(100% - 26px); max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain; z-index: 6; display: flex; flex-direction: column; justify-content: safe center; gap: 10px; padding: 14px 44px 14px 14px; background: var(--paper); color: var(--ink); border-radius: var(--r-2); box-shadow: var(--sh-2); animation: rise-in .25s var(--ease); }
.addon__pick[hidden] { display: none; }
.addon__q { font: 600 14px/1.3 var(--f-body); }
.addon__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.addon__opt { min-width: 44px; min-height: 38px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 3px; font: 600 13px var(--f-body); text-align: center; transition: border-color var(--fast), background var(--fast), color var(--fast); }
.addon__opt:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.addon__more { align-self: flex-start; font: 600 13px/1.3 var(--f-body); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.addon__x { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); }
.addon__x .ico { width: 18px; height: 18px; }

/* Trust lines under the checkout button */
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin-top: 6px; }
.trust__item { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; line-height: 1.3; color: var(--muted); text-align: center; }
.trust__item .ico { flex: none; width: 18px; height: 18px; color: var(--navy); }
.trust--co { grid-template-columns: 1fr; margin-top: 14px; }

/* The cart page: the same pieces at full width, the summary on a tonal ground --------------------------------------- */
.cartpage .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 20px; }
.cartpage .woocommerce-error, .cartpage .woocommerce-message, .cartpage .woocommerce-info { display: grid; gap: 4px; margin: 0 0 16px; padding: 14px 18px; border-radius: var(--r-2); background: var(--paper); border: 1px solid var(--navy); font-size: 14px; list-style: none; }
.cartpage .woocommerce-error { border-color: var(--sale); color: var(--sale); }
.cartbox__pagehead { margin-bottom: 32px; text-align: center; }
.cartbox__pagehead .lede { margin-inline: auto; }
.cartbox--page .cartbox__grid { display: grid; gap: 28px; }
.cartbox--page .cartbox__foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 16px; } /* one column: the add-ons row scrolls inside it */
.cartbox--page .cartbox__foot .shipbar { margin-top: 0; }
.cartbox--page .addons { margin: 4px 0 8px; }
.cartbox--page.is-empty .cartbox__scroll { max-width: 760px; margin: 0 auto; }
.cartbox--page.is-empty .cartbox__empty { padding-top: 0; }
@media (min-width: 600px) {
	.cartbox--page .line { grid-template-columns: 30px 128px minmax(0, 1fr); gap: 18px; padding: 14px; }
	.cartbox--page .line::before { width: 30px; height: 30px; font-size: 17px; }
	.cartbox--page .line__title { font-size: 16px; }
	.cartbox--page .line__price { font-size: 20px; }
}
@media (min-width: 1000px) {
	.cartbox--page .cartbox__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; }
	.cartbox--page .cartbox__foot { position: sticky; top: calc(var(--glo-head-h) + 20px); padding: 26px 24px; }
}


/* The forest panel: the order summary on the cart page, at checkout and on the thank you page (Ben, 28 Oct 2026: the cart
   "in the same desgin launge" as checkout). Plain forest (Ben, 28 Oct: no drawing behind it), cream type, the bar and the
   add-ons in light on dark. */
.forest { position: relative; isolation: isolate; background: var(--navy); color: var(--birch); border-radius: var(--r-2); }
.forest .shipbar { margin: 22px 0 0; }
.forest .shipbar__msg { color: var(--birch); }
.forest .shipbar__track { background: rgba(246, 243, 228, .18); }
.forest .shipbar__fill { background: var(--blaze); }
.forest .shipbar__truck { background: var(--navy); border-color: var(--blaze); color: var(--blaze-light); }
.forest .shipbar.is-free .shipbar__truck { background: var(--blaze); color: var(--glo-cta-ink); }
.forest .addons { margin-top: 24px; }
.forest .addons__title { color: var(--birch); }
.forest .addon { border-color: transparent; }
.forest .rail__bar { background: rgba(246, 243, 228, .2); }
.forest .rail__bar span { background: var(--blaze); }
.forest .trust__item { flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted-light); text-wrap: balance; }
.forest .trust__item .ico { width: 22px; height: 22px; color: var(--blaze-light); }
.forest .cartbox__sum { color: var(--birch); }
.forest .cartbox__note { color: var(--muted-light); }

/* Checkout, its thank you page and the pay page: assets/css/checkout.css (loaded on those screens only). */

/* Quick view: an add-on's preview over the page */
.qv { width: min(920px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-3); background: var(--birch); color: var(--ink); box-shadow: var(--sh-3); overflow: auto; }
.qv::backdrop { background: rgba(28, 30, 27, .55); }
.qv[open] { animation: rise-in .28s var(--ease); }
.qv__wait { height: 360px; background: linear-gradient(90deg, var(--canvas) 0 40%, var(--birch) 50%, var(--canvas) 60% 100%) 0 0 / 300% 100%; animation: qv-wait 1.2s linear infinite; }
@keyframes qv-wait { to { background-position: -150% 0; } }
.qv__box { position: relative; display: grid; }
.qv__x { position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--paper); box-shadow: var(--sh-1); }
.qv__media { padding: 16px 16px 0; }
.qv__stage { aspect-ratio: 1; display: grid; place-items: center; background: var(--field-light); border-radius: var(--r-2); overflow: hidden; }
.qv__stage img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.qv__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.qv__thumb { aspect-ratio: 1; background: var(--field-light); border: 1.5px solid transparent; border-radius: 4px; overflow: hidden; transition: border-color var(--fast); }
.qv__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.qv__thumb[aria-pressed=true], .qv__thumb:hover { border-color: var(--navy); }
.qv__info { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 22px; }
.qv__title { padding-right: 36px; font: 600 20px/1.25 var(--f-body); color: var(--navy); text-transform: none; }
.qv__price .price { font: 600 26px/1 var(--f-head); letter-spacing: .01em; }
.qv__stock { display: flex; align-items: center; gap: 6px; font: 600 14px var(--f-body); color: var(--glo-success); }
.qv__stock .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.qv__text { font-size: 15px; line-height: 1.55; color: var(--muted); }
.qv__opt { margin: 0; padding: 0; border: 0; }
.qv__opt legend { margin-bottom: 8px; font: 600 14px var(--f-body); }
.qv__opt legend strong { font-weight: 500; color: var(--muted); }
.qv__vals { display: flex; flex-wrap: wrap; gap: 6px; }
.qv__val { min-width: 46px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--edge-strong); border-radius: 4px; background: #fff; font: 600 14px var(--f-body); text-align: center; transition: border-color var(--fast), background var(--fast), color var(--fast); }
.qv__val:hover { border-color: var(--navy); }
.qv__val[aria-pressed=true] { border-color: var(--navy); background: var(--navy); color: #fff; }
.qv__add { margin-top: 6px; }
.qv__add[disabled] { opacity: .55; cursor: not-allowed; }
@media (min-width: 760px) {
	.qv__box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.qv__media { padding: 22px 0 22px 22px; }
	.qv__info { justify-content: center; padding: 48px 32px 32px; }
	.qv__title { font-size: 24px; }
}