/* =============================================================================
 * Sunny Art Centre — Mini-cart drawer + persistent basket button.
 * Reuses design-system tokens (with literal fallbacks so the button still
 * renders on pages where the DS stylesheet is not printed). Animates ONLY
 * transform / opacity, on no-bounce easings, collapsed under reduced-motion.
 * ===========================================================================*/

/* ------------------------------- BASKET BUTTON ---------------------------- */
.sunny-basket-btn{
	position:relative;display:inline-flex;align-items:center;gap:8px;
	font-family:var(--font-body,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
	font-weight:600;font-size:.85rem;letter-spacing:.02em;line-height:1;
	color:var(--ink,#161818);background:var(--paper,#fff);
	border:1px solid var(--line-strong,rgba(188,162,121,.55));border-radius:999px;
	padding:10px 16px 10px 14px;cursor:pointer;user-select:none;
	transition:transform var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),
		box-shadow var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),
		border-color var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),
		background-color var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1));
	will-change:transform;
}
.sunny-basket-btn:hover{transform:translateY(-1px);border-color:var(--gold,#bca279);box-shadow:var(--shadow-md,0 6px 18px rgba(22,24,24,.08));}
.sunny-basket-btn:active{transform:translateY(0);}
.sunny-basket-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper,#fff),0 0 0 4px var(--green,#1d4d3a);}
.sunny-basket-btn__icon{display:block;width:22px;height:22px;color:var(--ink,#161818);flex:none;}
.sunny-basket-btn__amount{font-weight:700;white-space:nowrap;}
.sunny-basket-btn__amount .woocommerce-Price-amount{font-weight:700;}

/* Count badge — a gold pip on the icon corner. */
.sunny-basket-count{
	position:absolute;top:4px;left:24px;z-index:2;
	display:inline-flex;align-items:center;justify-content:center;
	min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;
	font-size:.66rem;font-weight:700;line-height:1;letter-spacing:0;
	color:var(--ink,#161818);background:var(--gold,#bca279);
	border:2px solid var(--paper,#fff);border-radius:999px;
	transform-origin:center;
}
.sunny-basket-count[data-empty="1"]{transform:scale(0);opacity:0;pointer-events:none;}
.sunny-basket-count.is-bumped{animation:sunny-basket-pop var(--m-base,300ms) var(--ease-emphasis,cubic-bezier(.16,1,.3,1));}
@keyframes sunny-basket-pop{0%{transform:scale(1);}45%{transform:scale(1.4);}100%{transform:scale(1);}}

/* Header variant sits inline in the nav; float variant is a fixed pill. */
.sunny-basket-btn--float{
	position:fixed;right:max(16px,env(safe-area-inset-right));
	bottom:max(16px,env(safe-area-inset-bottom));z-index:900;
	box-shadow:var(--shadow-lg,0 24px 60px rgba(22,24,24,.16));
	background:var(--ink,#161818);color:var(--cream,#f4efe1);border-color:transparent;
	padding:12px 18px 12px 16px;
}
.sunny-basket-btn--float .sunny-basket-btn__icon{color:var(--gold-bright,#c6a15b);}
.sunny-basket-btn--float .sunny-basket-btn__amount{color:var(--cream,#f4efe1);}
.sunny-basket-btn--float .sunny-basket-count{border-color:var(--ink,#161818);}
.sunny-basket-btn--float:hover{transform:translateY(-2px);border-color:transparent;background:var(--ink-90,#20221f);}
@media (max-width:479px){
	.sunny-basket-btn--float .sunny-basket-btn__amount{display:none;}
	.sunny-basket-btn--float .sunny-basket-count{left:auto;right:8px;top:6px;}
}

/* ------------------------------- DRAWER (native <dialog>) ----------------- */
.sunny-basket-drawer{
	position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;
	width:min(420px,92vw);max-width:none;height:100%;max-height:none;
	background:var(--paper,#fff);color:var(--ink,#161818);
	box-shadow:var(--shadow-lg,0 24px 60px rgba(22,24,24,.16));overflow:hidden;
	transform:translateX(100%);
	transition:transform var(--m-base,300ms) var(--ease-emphasis,cubic-bezier(.16,1,.3,1)),
		overlay var(--m-base,300ms) allow-discrete,
		display var(--m-base,300ms) allow-discrete;
}
.sunny-basket-drawer[open]{transform:none;}
@starting-style{ .sunny-basket-drawer[open]{transform:translateX(100%);} }

.sunny-basket-drawer::backdrop{
	background:rgba(22,24,24,.46);opacity:0;
	transition:opacity var(--m-base,300ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),
		overlay var(--m-base,300ms) allow-discrete,
		display var(--m-base,300ms) allow-discrete;
}
.sunny-basket-drawer[open]::backdrop{opacity:1;}
@starting-style{ .sunny-basket-drawer[open]::backdrop{opacity:0;} }

.sunny-basket-drawer__inner{display:flex;flex-direction:column;height:100%;min-height:0;}
.sunny-basket-drawer__head{
	display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
	padding:20px 24px;border-bottom:1px solid var(--line,rgba(188,162,121,.28));
}
.sunny-basket-drawer__title{
	font-family:var(--font-display,Georgia,serif);font-weight:700;font-size:1.2rem;
	color:var(--ink,#161818);margin:0;
}
.sunny-basket-drawer__close{
	display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
	color:var(--ink,#161818);background:var(--paper,#fff);
	border:1px solid var(--line-strong,rgba(188,162,121,.55));border-radius:50%;cursor:pointer;
	transition:transform var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),
		background-color var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1));
}
.sunny-basket-drawer__close:hover{transform:rotate(90deg);background:var(--cream,#f4efe1);}
.sunny-basket-drawer__close:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper,#fff),0 0 0 4px var(--green,#1d4d3a);}

/* Body fragment (replaced on every cart op) is itself a flex column so the
   line-item list scrolls while the totals + CTAs stay pinned at the bottom. */
.sunny-basket-drawer__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}

/* ------------------------------- LINE ITEMS ------------------------------- */
.sunny-mc{
	list-style:none;margin:0;padding:8px 24px;flex:1 1 auto;min-height:0;overflow-y:auto;
	overscroll-behavior:contain;
}
.sunny-mc__item{
	position:relative;display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:start;
	padding:16px 0;border-bottom:1px solid var(--line,rgba(188,162,121,.28));
	transition:opacity var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1));
}
.sunny-mc__item.is-updating{opacity:.45;pointer-events:none;}
.sunny-mc__media{display:block;width:64px;height:80px;flex:none;overflow:hidden;border-radius:8px;background:var(--cream,#f4efe1);}
.sunny-mc__media img{display:block;width:100%;height:100%;object-fit:cover;}
.sunny-mc__info{min-width:0;display:flex;flex-direction:column;gap:8px;}
.sunny-mc__name{
	font-family:var(--font-display,Georgia,serif);font-weight:700;font-size:.98rem;line-height:1.25;
	color:var(--ink,#161818);text-decoration:none;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sunny-mc__name:hover{color:var(--green,#1d4d3a);}
.sunny-mc__meta{font-size:.76rem;line-height:1.4;color:var(--muted,#6a6a63);}
.sunny-mc__meta p{margin:0;}
.sunny-mc__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;}
.sunny-mc__price{font-weight:700;font-size:.9rem;color:var(--ink,#161818);white-space:nowrap;}
.sunny-mc__qtystatic{font-size:.8rem;color:var(--muted,#6a6a63);}

/* Qty stepper */
.sunny-qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong,rgba(188,162,121,.55));border-radius:999px;overflow:hidden;}
.sunny-qty__btn{
	display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
	font-size:1rem;line-height:1;color:var(--ink,#161818);background:var(--paper,#fff);
	border:0;cursor:pointer;
	transition:background-color var(--m-instant,120ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),color var(--m-instant,120ms) var(--ease-standard,cubic-bezier(.2,0,0,1));
}
.sunny-qty__btn:hover{background:var(--cream,#f4efe1);color:var(--green,#1d4d3a);}
.sunny-qty__btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--green,#1d4d3a);}
.sunny-qty__val{min-width:26px;text-align:center;font-weight:700;font-size:.85rem;color:var(--ink,#161818);}

/* Remove × */
.sunny-mc__remove.remove{
	grid-column:3;grid-row:1;align-self:start;justify-self:end;
	display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
	font-size:1.05rem;line-height:1;text-decoration:none;
	color:var(--muted,#6a6a63);background:transparent;border:1px solid transparent;border-radius:50%;
	transition:color var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),
		background-color var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1)),
		transform var(--m-fast,200ms) var(--ease-standard,cubic-bezier(.2,0,0,1));
}
.sunny-mc__remove.remove:hover{color:var(--danger,#8a2b2b);background:rgba(138,43,43,.08);transform:scale(1.08);}
.sunny-mc__remove.remove:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper,#fff),0 0 0 4px var(--danger,#8a2b2b);}

/* ------------------------------- FOOT (totals + CTAs) --------------------- */
.sunny-mc__foot{flex:none;padding:20px 24px;border-top:1px solid var(--line,rgba(188,162,121,.28));background:var(--cream,#f4efe1);}
.sunny-mc__total{
	display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;
	font-size:.82rem;letter-spacing:.02em;color:var(--muted,#6a6a63);
}
.sunny-mc__total .woocommerce-Price-amount{font-family:var(--font-display,Georgia,serif);font-size:1.25rem;font-weight:700;color:var(--ink,#161818);}
.sunny-mc__total strong{font-weight:600;}
.sunny-mc__buttons{display:flex;flex-direction:column;gap:10px;margin:0;}
.sunny-mc__buttons .sunny-btn{margin:0;}

/* ------------------------------- EMPTY STATE ------------------------------ */
.sunny-mc__empty{
	flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
	text-align:center;padding:48px 32px;
}
.sunny-mc__empty-icon{width:48px;height:48px;color:var(--gold,#bca279);}
.sunny-mc__empty-title{font-family:var(--font-display,Georgia,serif);font-weight:700;font-size:1.1rem;color:var(--ink,#161818);margin:6px 0 0;}
.sunny-mc__empty-sub{font-size:.85rem;color:var(--muted,#6a6a63);margin:0 0 12px;}
.sunny-mc__empty .sunny-btn{width:100%;max-width:240px;}

/* Fallback: if the design-system button classes are absent, keep CTAs usable. */
.sunny-mc__buttons .sunny-btn:not([class*="sunny-btn--"]){background:var(--green,#1d4d3a);color:#fff;}

.sunny-basket-drawer .sunny-visually-hidden{
	position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------- REDUCED MOTION --------------------------- */
@media (prefers-reduced-motion:reduce){
	.sunny-basket-drawer,
	.sunny-basket-drawer::backdrop,
	.sunny-basket-btn,
	.sunny-basket-count,
	.sunny-basket-count.is-bumped,
	.sunny-qty__btn,
	.sunny-mc__remove.remove,
	.sunny-basket-drawer__close{
		transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;
	}
}

/* Defensive layout guard — the theme's global .product_list_widget / .cart_list
 * widget CSS floats and width-constrains mini-cart children, which squeezed the
 * info column to the thumbnail width. Force our grid placement inside the drawer. */
.sunny-basket-drawer .sunny-mc__item > *{ float:none !important; }
.sunny-basket-drawer .sunny-mc__media{ grid-column:1 !important; width:64px !important; max-width:64px !important; height:80px !important; margin:0 !important; }
.sunny-basket-drawer .sunny-mc__media img{ width:100% !important; height:100% !important; float:none !important; }
.sunny-basket-drawer .sunny-mc__info{ grid-column:2 !important; width:auto !important; max-width:none !important; min-width:0 !important; justify-self:stretch !important; }
.sunny-basket-drawer .sunny-mc__name{ width:auto !important; max-width:none !important; float:none !important; }
.sunny-basket-drawer .sunny-mc__remove{ grid-column:3 !important; position:static !important; margin:0 !important; width:auto !important; }

/* Bigger product image + tighter item rows in the drawer (was a small 64px). */
.sunny-basket-drawer .sunny-mc__item{ grid-template-columns:84px 1fr auto !important; gap:16px !important; padding:18px 0 !important; }
.sunny-basket-drawer .sunny-mc__media{ width:84px !important; height:84px !important; border-radius:10px; }
.sunny-basket-drawer .sunny-mc__media img{ width:100% !important; height:100% !important; object-fit:cover; }
.sunny-basket-drawer .sunny-mc__name{ font-size:1.02rem; }

/* GREEN UNIFY + DRAWER PADDING (Sun 2026-07-05). */
.sunny-basket-drawer a.checkout, .sunny-basket-drawer a.checkout.wc-forward, .sunny-basket-drawer .sunny-btn--primary.checkout{ background:#1d4d3a !important; border-color:#1d4d3a !important; color:#fff !important; }
.sunny-basket-drawer a.checkout:hover{ background:#163b2c !important; border-color:#163b2c !important; }
.sunny-basket-drawer__header, .sunny-basket-drawer__footer, .sunny-mc__list, .sunny-basket-drawer__body{ padding-left:22px !important; padding-right:22px !important; }

/* ---- sunny-basket-safearea: keep the CTAs clear of the browser toolbar ---
   The drawer is position:fixed with height:100%, which on iOS resolves against
   the LARGE viewport, putting the footer under Safari's bottom bar. 100dvh
   tracks the dynamic viewport; the safe-area inset clears the home indicator. */
@supports (height:100dvh){ .sunny-basket-drawer{ height:100dvh; } }
.sunny-mc__foot{ padding-bottom:calc(20px + env(safe-area-inset-bottom,0px)); }
@media (max-width:767px){
  .sunny-mc__foot{ padding-bottom:calc(30px + env(safe-area-inset-bottom,0px)); }
  .sunny-mc__buttons{ gap:12px; }
}

/* ---- sunny-basket-btnprimitives -------------------------------------------
   The drawer is enqueued SITE-WIDE, but .sunny-btn and its modifiers are
   defined in sunny_ds_css(), which sunny_ds_enqueue() gates to storefront
   pages only (shop/product/cart/checkout/account). On every other page the
   CTAs therefore had NO button styling at all: 'View basket' rendered as a
   default blue link and 'Checkout' as a flat green bar with no padding or
   centring, because the only rule reaching it was the a.checkout background
   override below. That is what Sun photographed on 2026-08-09.

   Values are copied verbatim from design-system.php so the drawer looks
   identical on and off the storefront; every token carries a literal
   fallback because the DS custom properties are absent here too. Scoped to
   .sunny-basket-drawer so this cannot leak into storefront components.
   ------------------------------------------------------------------------ */
.sunny-basket-drawer .sunny-btn{
	--_bg:var(--green,#1d4d3a);--_fg:var(--cream,#f4efe1);--_bd:transparent;
	position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2,8px);
	min-height:48px;padding:0 var(--sp-5,24px);
	font-family:var(--font-body,'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
	font-weight:600;font-size:.9rem;letter-spacing:.03em;
	line-height:1;text-decoration:none;text-align:center;white-space:nowrap;
	color:var(--_fg);background:var(--_bg);border:1px solid var(--_bd);border-radius:var(--r-md,10px);
	cursor:pointer;user-select:none;
}
.sunny-basket-drawer .sunny-btn--primary{--_bg:var(--green,#1d4d3a);--_fg:var(--cream,#f4efe1);}
.sunny-basket-drawer .sunny-btn--gold{--_bg:var(--gold,#bca279);--_fg:var(--ink,#161818);}
.sunny-basket-drawer .sunny-btn--ghost{
	--_bg:transparent;--_fg:var(--ink,#161818);--_bd:var(--line-strong,rgba(188,162,121,.55));
	box-shadow:none;
}
.sunny-basket-drawer .sunny-btn--block{display:flex;width:100%;}
/* Hover lift only where a real pointer exists — iOS latches :hover on scroll. */
@media (hover:hover) and (pointer:fine){
	.sunny-basket-drawer .sunny-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md,0 6px 18px rgba(22,24,24,.08),0 2px 6px rgba(22,24,24,.06));}
	.sunny-basket-drawer .sunny-btn--primary:hover{--_bg:var(--green-dark,#163b2c);}
	.sunny-basket-drawer .sunny-btn--gold:hover{--_bg:#c9b088;}
	.sunny-basket-drawer .sunny-btn--ghost:hover{--_bg:rgba(188,162,121,.10);--_bd:var(--gold,#bca279);}
}
.sunny-basket-drawer .sunny-btn:active{transform:translateY(0);}

/* 2026-08-13 Sun: Woo default a.remove:hover (white X on red disc) outguns our subtle
   hover on specificity, and iOS sticky-hover freezes it after a tap - looks like an error. */
.woocommerce .sunny-mc__remove.remove:hover,
.sunny-basket-drawer a.sunny-mc__remove.remove:hover{
  color:var(--danger,#8a2b2b)!important;
  background:rgba(138,43,43,.08)!important;
}
@media (hover:none){
  .woocommerce .sunny-mc__remove.remove:hover,
  .sunny-basket-drawer a.sunny-mc__remove.remove:hover{
    background:transparent!important;
    transform:none!important;
  }
}

/* 2026-08-14 Sun request: white clean basket drawer */
#sunny-basket-drawer .sunny-mc__foot{background:#fff;border-top:1px solid #ececec}
#sunny-basket-drawer .sunny-mc__media{background:#fff;border:1px solid #ececec}
#sunny-basket-drawer .sunny-btn--ghost{border-color:#dcdcdc}