/*
 * CSi theme — the CSi side cart, looking as FunnelKit's side cart does on the live site (owner,
 * 8 Oct 2026: "i want it to look and function exactly like funnel kit"). Values read from
 * FunnelKit's own cart on staging and its live settings: text #353030, secondary #82838E, borders
 * #DEDFEA, button #5ba238 (radius 18px), savings #5BA238, rewards #2DA815, "Frequently Bought
 * Together" band #f9f9ff; 420px wide on desktop, the full width on phones; the site's font.
 * Printed at the end of the page (the drawer is hidden until opened). Markup: inc/side-cart.php,
 * template-parts/side-cart/inner.php.
 */

.csi-sc{--sc-ink:#353030;--sc-muted:#82838e;--sc-line:#dedfea;--sc-btn:#5ba238;--sc-save:#5ba238;--sc-done:#2da815;position:fixed;inset:0;z-index:100000;font-family:var(--csi-body)}
html.csi-sc-lock,html.csi-sc-lock body{overflow:hidden}
.csi-sc[hidden]{display:none}
.csi-sc__scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .4s}
.csi-sc__panel{position:absolute;top:0;right:0;bottom:0;display:flex;width:100%;max-width:420px;background:#fff;color:var(--sc-ink);transform:translateX(100%);transition:transform .4s ease;outline:0}
.csi-sc.is-open .csi-sc__scrim{opacity:1}
.csi-sc.is-open .csi-sc__panel{transform:none}
@media (prefers-reduced-motion:reduce){.csi-sc__scrim,.csi-sc__panel{transition:none}}
.csi-sc__inner{display:flex;flex-direction:column;width:100%;min-height:0;font-size:16px;font-weight:500;line-height:1.3}
.csi-sc__inner[aria-busy=true] .csi-sc__body{opacity:.6}
.csi-sc :is(button,input){font-family:inherit}

/* Header: "Review Your Cart (n)" and × */
.csi-sc__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.csi-sc__title{margin:0;color:var(--sc-ink);font-size:16px;font-weight:600;line-height:1.5}
.csi-sc__title span{margin-left:4px}
.csi-sc__close{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-8px -8px -8px 0;padding:0;border:0;background:none;color:var(--sc-ink);cursor:pointer}

/* Body (scrolls) */
.csi-sc__body{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transition:opacity .15s}
.csi-sc__loading{margin:40px 16px;color:var(--sc-muted);text-align:center}
.csi-sc__error{margin:8px 16px;padding:10px 12px;border-radius:8px;background:#fdecec;color:#8a1c12;font-size:14px}

/* Rewards: the message, the bar with Free Shipping and Free Gift */
.csi-sc-reward{padding:8px 28px 12px 16px;text-align:center}
.csi-sc-reward__msg{margin:0 0 6px;color:var(--sc-muted);font-size:12px;font-weight:400;line-height:1.4}
.csi-sc-reward__msg strong{color:var(--sc-ink);font-weight:600}
.csi-sc-reward__bar{position:relative;display:flex;padding-top:0}
.csi-sc-reward__track{position:absolute;top:18px;right:0;left:0;height:8px;border-radius:20px;background:var(--sc-line);transform:translateY(-50%);overflow:hidden}
.csi-sc-reward__track i{display:block;height:100%;border-radius:20px;background:var(--sc-done)}
.csi-sc-reward__step{position:relative;z-index:1;flex:1;text-align:right}
.csi-sc-reward__single{position:relative;right:-12px;display:inline-flex;flex-direction:column;align-items:center;width:60px}
.csi-sc-reward__step:last-child .csi-sc-reward__single{right:-12px}
.csi-sc-reward__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;box-sizing:border-box;border:2px solid var(--sc-line);border-radius:50%;background:#fff;color:#353030}
.csi-sc-reward__step.is-done .csi-sc-reward__icon{border-color:#fff;background:var(--sc-done);color:#fff}
.csi-sc-reward__label{margin-top:4px;color:var(--sc-ink);font-size:10px;font-weight:400;line-height:12px}

/* Lines: photo with × on its corner, name, Location, − n +, price and Save n% */
.csi-sc-lines{margin:0;padding:16px 0 0;list-style:none}
.csi-sc-line{display:flex;gap:16px;margin:0 0 24px;padding:0 16px}
.csi-sc-line__pic{position:relative;flex:0 0 60px;width:60px;height:60px}
.csi-sc-line__pic a{display:block;line-height:0}
.csi-sc-line__img,.csi-sc-line__pic img{display:block;width:60px;height:60px;box-sizing:border-box;object-fit:contain;border:1px solid var(--sc-line);border-radius:8px;background:#fff}
.csi-sc-line__remove{position:absolute;top:-8px;left:-8px;z-index:2;display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;background:none;color:#24272d;cursor:pointer}
.csi-sc-line__remove span{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--sc-line)}
.csi-sc-line__info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.csi-sc-line__name{display:block;margin-bottom:2px;color:var(--sc-ink);font-size:14px;font-weight:600;line-height:1.5;text-decoration:none}
a.csi-sc-line__name:hover{text-decoration:underline}
.csi-sc-line__meta{display:block;margin-bottom:2px;color:var(--sc-ink);font-size:14px;font-weight:600;line-height:1.5}
.csi-sc-qty{display:inline-flex;align-items:center;margin-top:8px;border-radius:6px;box-shadow:0 0 0 1px var(--sc-line)}
/* The site's own field and button sizes don't apply inside the box */
.csi-sc .csi-sc-qty :is(button,input){min-width:0;min-height:0;margin:0;box-shadow:none;-webkit-appearance:none;appearance:none}
.csi-sc .csi-sc-qty__btn{display:flex;align-items:center;justify-content:center;width:28px;height:24px;padding:0;border:0;background:transparent;color:var(--sc-ink);cursor:pointer}
.csi-sc-qty__btn:disabled{opacity:.35;cursor:default}
.csi-sc .csi-sc-qty__n{width:32px;max-width:32px;height:24px;box-sizing:border-box;margin:0;padding:0 4px;border:0;border-right:1px solid var(--sc-line);border-left:1px solid var(--sc-line);border-radius:0;background:transparent;color:var(--sc-ink);font-size:16px;font-weight:400;line-height:24px;text-align:center;outline:0;-moz-appearance:textfield}
.csi-sc-line__price{display:flex;flex-direction:column;align-items:flex-end;margin-left:8px;color:var(--sc-ink);font-size:14px;font-weight:400;line-height:1.5;text-align:right;white-space:nowrap}
.csi-sc-line__price del{margin-right:4px;color:var(--sc-ink);font-size:12px;text-decoration-color:var(--sc-ink)}
.csi-sc-line__price .amount,.csi-sc-line__price .amount *{color:var(--sc-ink)}
.csi-sc-line__save{margin-top:4px;color:var(--sc-save);font-size:12px;line-height:16px}
.csi-sc-line--gift .csi-sc-line__meta{color:var(--sc-save)}

/* Frequently Bought Together: one product per slide, arrows and dashes */
.csi-sc-fbt{padding:12px 0 0;border-bottom:1px solid var(--sc-line);background:#f9f9ff}
.csi-sc-fbt__title{margin:4px 16px 12px;color:var(--sc-ink);font-size:16px;font-weight:500;text-align:center}
.csi-sc-fbt__carousel{position:relative;padding:0 40px}
.csi-sc-fbt__track{display:flex;margin:0;padding:0;overflow-x:auto;list-style:none;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.csi-sc-fbt__track::-webkit-scrollbar{display:none}
.csi-sc-fbt__slide{flex:0 0 100%;display:flex;align-items:flex-start;gap:12px;margin:0;scroll-snap-align:start}
.csi-sc-fbt__pic{flex:0 0 60px;line-height:0}
.csi-sc-fbt__pic img{display:block;width:60px;height:60px;box-sizing:border-box;object-fit:contain;border:1px solid var(--sc-line);border-radius:8px;background:#fff}
.csi-sc-fbt__info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.csi-sc-fbt__name{color:var(--sc-ink);font-size:14px;font-weight:600;line-height:1.5;text-decoration:none}
.csi-sc-fbt__price{color:var(--sc-ink);font-size:14px;font-weight:400;line-height:1.5;white-space:nowrap}
.csi-sc-fbt__price del{display:block;font-size:12px;text-align:right}
.csi-sc-fbt__price ins{text-decoration:none}
.csi-sc-fbt__add{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;padding:7px 14px;border:1px solid var(--sc-btn);border-radius:18px;background:transparent;color:var(--sc-btn);font-size:13px;font-weight:500;line-height:14px;cursor:pointer}
.csi-sc-fbt__add[aria-busy=true]{opacity:.5;cursor:progress}
.csi-sc-fbt__nav{position:absolute;top:30px;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:36px;padding:0;border:0;background:transparent;color:#000;cursor:pointer;transform:translateY(-50%)}
.csi-sc-fbt__nav:disabled{opacity:.3;cursor:default}
.csi-sc-fbt__nav--prev{left:4px}
.csi-sc-fbt__nav--next{right:4px}
.csi-sc-fbt__dots{display:flex;justify-content:center;min-height:34px;padding-top:4px}
.csi-sc-fbt__dot{display:flex;align-items:center;width:16px;height:30px;margin:0 5px}
.csi-sc-fbt__dot::after{content:"";width:100%;height:2px;border-radius:2px;background:#ccc;opacity:.8}
.csi-sc-fbt__dot.is-on::after{background:var(--sc-btn);opacity:1}

/* Footer: discount code, Subtotal / Shipping, Checkout ₦…, Continue Shopping */
.csi-sc__foot{padding-bottom:env(safe-area-inset-bottom);background:#fff}
.csi-sc-coupon{padding:12px 16px;border-top:1px solid var(--sc-line);border-bottom:1px solid var(--sc-line)}
.csi-sc-coupon__head{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:24px;padding:0;border:0;background:none;color:var(--sc-ink);font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.csi-sc-coupon__head svg{transition:transform .2s}
.csi-sc-coupon__head[aria-expanded=true] svg{transform:rotate(180deg)}
.csi-sc-coupon__body{margin-top:8px}
.csi-sc-coupon__form{display:flex}
.csi-sc .csi-sc-coupon__form input{flex:1;min-width:55%;min-height:0;max-width:none;height:auto;margin:0;padding:8px 12px;border:1px solid var(--sc-line);border-right:0;border-radius:8px 0 0 8px;background:transparent;color:var(--sc-ink);font-size:13px;font-weight:400;line-height:18px;outline:0}
.csi-sc .csi-sc-coupon__form input:focus{border-color:#0073aa}
.csi-sc .csi-sc-coupon__form button{min-height:0;margin:0;padding:8px 16px;border:1px solid var(--sc-btn);border-radius:0 8px 8px 0;background:var(--sc-btn);color:#fff;font-size:15px;font-weight:500;line-height:22px;cursor:pointer}
.csi-sc-coupon__form[aria-busy=true]{opacity:.6;pointer-events:none}
.csi-sc-coupon__msg{margin:6px 0 0;font-size:13px;font-weight:400}
.csi-sc-coupon__msg.is-error{color:#c62828}
.csi-sc-coupon__msg.is-ok{color:var(--sc-save)}
.csi-sc-summary{padding:16px}
.csi-sc-summary__row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 4px;color:var(--sc-ink);font-size:14px;font-weight:400}
.csi-sc-summary__row:last-child{margin-bottom:0}
.csi-sc-summary__row strong{font-size:14px;font-weight:600}
.csi-sc-summary__row--note{font-size:12px}
.csi-sc-summary__row--coupon>span:last-child{color:var(--sc-save)}
.csi-sc-coupon__chip{display:inline-flex;align-items:center;gap:8px;padding:2px 2px 2px 8px;border:1px dashed #5ba238;border-radius:19px;background:#f1fded;color:#353030;font-size:12px;line-height:16px}
.csi-sc-coupon__chip button{display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;border:0;border-radius:50%;background:#82838e;color:#fff;cursor:pointer}
.csi-sc-cta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px 16px}
.csi-sc-cta__btn{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;padding:8px 24px;border-radius:18px;background:var(--sc-btn);color:#fff;font-size:18px;font-weight:500;line-height:24px;text-decoration:none}
.csi-sc-cta__btn:hover{color:#fff;opacity:.9}
.csi-sc-cta__btn .amount,.csi-sc-cta__btn .amount *{color:#fff}
.csi-sc-cta__text{margin:0 8px}
.csi-sc-cta__continue{padding:0;border:0;background:none;color:var(--sc-muted);font-size:14px;font-weight:500;line-height:20px;cursor:pointer}
.csi-sc-cta__continue:hover{text-decoration:underline}

/* Empty: "Your Cart is Empty" and "Shop Now" */
.csi-sc__body--empty{display:flex}
.csi-sc-empty{display:flex;flex-direction:column;justify-content:center;width:100%;padding:20px;text-align:center}
.csi-sc-empty__icon{color:var(--sc-ink)}
.csi-sc-empty__title{margin:6px 0;color:var(--sc-ink);font-size:18px;font-weight:500;line-height:1.3}
.csi-sc-empty__text{margin:0;color:var(--sc-muted);font-size:14px;line-height:1.3}
.csi-sc-empty__btn{display:inline-flex;align-self:center;margin-top:16px;padding:8px 24px;border-radius:18px;background:var(--sc-btn);color:#fff;font-size:14px;font-weight:500;text-decoration:none}
.csi-sc-empty__btn:hover{color:#fff;opacity:.9}

.csi-sc :is(a,button,input):focus-visible{outline:2px solid var(--csi-orange,#e99c4a);outline-offset:2px}