/* ===== Merchatura Side Cart (v1.2 cosmetics) ===== */

.msc-fab{
  position:fixed; right:18px; bottom:18px;
  width:64px; height:64px;               /* bigger circle */
  border-radius:999px;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  z-index:999999; cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,0.25);
}
.msc-fab:focus{outline:none;}
.msc-fab-img{ width:26px; height:26px; display:block; }

.msc-fab-count{
  position:absolute; top:-6px; right:-6px;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:999px;
  background:#fff; color:#000;
  font-size:11px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e4e4e4;
}

/* Overlay */
.msc-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.45);
  opacity:0; visibility:hidden;
  transition:opacity 200ms ease;
  z-index:999998;
}

/* Panel */
.msc-panel{
  position:fixed; top:0; right:0; height:100vh;
  width:85vw; max-width:520px;
  background:#fff;
  transform:translateX(110%);
  transition:transform 220ms ease;
  z-index:999999;
  display:flex; flex-direction:column;
}
@media (min-width:768px){ .msc-panel{ width:50vw; } }
@media (min-width:1024px){ .msc-panel{ width:20vw; min-width:360px; } }

.msc-panel-inner{ height:100%; display:flex; flex-direction:column; }

body.msc-open .msc-panel{ transform:translateX(0); }
body.msc-open .msc-overlay{ opacity:1; visibility:visible; }

/* Loading state (disable double clicks) */
.msc-panel.msc-loading .msc-panel-inner{ opacity:.55; pointer-events:none; }
.msc-panel.msc-loading::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,0.25);
}

/* Header */
.msc-header{
  padding:16px 18px;
  border-bottom:1px solid #e4e4e4;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.msc-title{ font-size:14px; font-weight:700; color:#111; }
.msc-close{
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid #e4e4e4;
  background:#fff;
  font-size:20px; line-height:1;
  cursor:pointer;
}

/* Body */
.msc-body{
  padding:14px 18px 130px;  /* extra so Continue shopping is fully visible */
  overflow-y:auto;
  flex:1;
}
.msc-empty{
  padding:18px;
  border:1px solid #e4e4e4;
  border-radius:8px;
  font-size:13px;
}

/* Items */
.msc-items{ display:grid; gap:14px; }

.msc-item{
  display:grid;
  grid-template-columns:74px minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  padding: 12px 12px 0px 12px;
  border:1px solid #e4e4e4;
  border-radius:8px;
  background:#fff;
}

.msc-thumb img{
  width:74px; height:74px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

.msc-link{ text-decoration:none; color:inherit; }
.msc-link:hover{ text-decoration:underline; }

.msc-name{
  font-size:13px;
  font-weight:800;
  color:#111;
  line-height:20px;   /* requested */
  margin:0;
}
.msc-qty{
  font-size:12px;
  color:#444;
  font-weight:600;
  transform: translateY(-7px);
}

/* Force meta onto new lines (no run-on paragraph) */
.msc-meta{
  font-size:11px;
  color:#666;
  line-height:1.35;
  margin-bottom:8px;
}
.msc-meta dl{ margin:0; }
.msc-meta dt,
.msc-meta dd{ display:block; margin:0; }
.msc-meta dt{ font-weight:700; margin-top:6px; }
.msc-meta dt:first-child{ margin-top:0; }
.msc-meta dd{ margin-top:2px; }

/*
 * ==========================================================
 * PHASE 5B ARTWORK SUMMARY
 * ==========================================================
 */

.msc-meta .ppag-cart-artwork-summary{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:6px;
	margin-top:4px;
}

.msc-meta .ppag-cart-artwork-link{
	font-size:11px;
	line-height:1.3;
}

.msc-meta .ppag-cart-artwork-link a{
	color:#111 !important;
	font-weight:700;
	text-decoration:underline;
	text-underline-offset:2px;
}

.msc-meta .ppag-cart-artwork-pills{
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	width:100%;
}

.msc-meta .ppag-art-pill{
	font-size:9px !important;
	min-height:20px !important;
	padding:3px 6px !important;
	white-space:normal;
}


/*
 * Woo outputs the Artwork row inside a <dl>.
 * Give its richer contents room to breathe.
 */
.msc-meta dd .ppag-cart-artwork-summary{
	margin-top:4px;
	margin-bottom:2px;
}

/* Prices (tight stack) */
.msc-prices{ display:grid; gap:2px; }
.msc-price-ex{
  font-size:17px;      
  font-weight:800;     
  color:#111;
  transform: translateY(5px);
}
.msc-price-inc{
  font-size:12px;
  font-weight:500;
  color:#111;
  transform: translateY(-5px);
}
.msc-old-price{
  color:#999 !important;
  text-decoration:line-through !important;
  opacity:0.75;
  font-weight:500;
  margin-right:6px;
}

.msc-new-price{
  color:inherit;
  font-weight:inherit;
}
.msc-vat-label{
  font-size:10px;
  font-weight:700;
  color:#666;
  margin-left:6px;
}

/* Item actions — Artwork Edit + Remove */
.msc-item-actions{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	width:28px;
}

.msc-edit-artwork{
	width:28px;
	height:28px;
	padding:0;
	border:0;
	background:transparent;
	color:#111;
	cursor:pointer;

	display:flex;
	align-items:center;
	justify-content:center;
}

.msc-edit-artwork svg{
	width:17px;
	height:17px;
	display:block;
}

.msc-edit-artwork:hover{
	opacity:.6;
}

/* Bin button (no faint box) */
.msc-remove{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
}
.msc-bin-img{ width:18px; height:18px; display:block; opacity:.9; }
.msc-remove:hover .msc-bin-img{ opacity:1; }

/* Continue shopping */
.msc-continue{
  margin-top:16px;
  margin-bottom:14px;
  background:transparent;
  border:0;
  padding:0;
  color:#111;
  font-weight:500;       /* medium (not bold) */
  text-decoration:underline;
  cursor:pointer;
  font-size:13px;
}

/* Sticky footer CTA */
.msc-footer{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 18px;
  border-top:1px solid #e4e4e4;
  background:#f4f4f4;
}
.msc-checkout{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  width:100%;
  background:#000;
  color:#fff;
  text-decoration:none;
  border-radius:999px;     /* fully rounded */
  padding:2px 18px;
}
.msc-checkout-left{
  font-size:13px;
  font-weight:800;
}

@media (max-width: 400px) {
.msc-checkout-left{
  font-size:12px;
}
	
.msc-total-inc {
		font-size: 10px !important;
	    padding-top: 15px !important;
}
}
	
/* Divider + totals tighter */
.msc-checkout-right{
  position:relative;
  display:grid;
  text-align:right;
  padding-left:14px;
}
.msc-checkout-right::before{
  content:"";
  position:absolute;
  left:0; top:6px; bottom:6px;
  width:1px;
  background:rgba(255,255,255,0.35);  /* vertical divider */
}

.msc-total-ex{
  font-size:18px;         /* bigger */
  font-weight:800;        /* not bold */
  opacity:0.95;
  transform: translateY(5px);
}
.msc-total-inc{
  font-size:12px;
  font-weight:500;
  transform: translateY(-5px);
  padding-top: 15px !important;
}




/* Sticky footer CTA — keep ONE LINE, totals stay stacked, scale down with width */
.msc-checkout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  background:#000;
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  padding:2px 18px;

  flex-wrap: nowrap;      /* NEVER wrap */
  overflow: hidden;       /* prevent spill */
}

/* LEFT: never wrap, but allowed to shrink */
.msc-checkout-left{
  font-weight:800;
  white-space: nowrap;    /* keep on one line */
  min-width: 0;           /* allow shrinking */
  flex: 1 1 auto;         /* takes remaining space */
  overflow: hidden;
  text-overflow: ellipsis; /* if it ever gets too tight */

  /* scale with available space */
  font-size: clamp(11px, 1.1vw, 13px);
}

/* RIGHT: keep stacked totals, never wrap */
.msc-checkout-right{
  position:relative;
  text-align:right;
  padding-left:12px;

  flex: 0 0 auto;         /* don't let totals wrap under left */
  display:flex;
  flex-direction:column;  /* keep ex above inc */
  align-items:flex-end;
  justify-content:center;

  white-space: nowrap;    /* keep currency + VAT label on one line */
}

/* Divider */
.msc-checkout-right::before{
  content:"";
  position:absolute;
  left:0; top:6px; bottom:6px;
  width:1px;
  background:rgba(255,255,255,0.35);
}

/* EX VAT (top, bigger) — scales down */
.msc-total-ex{
  font-weight:800;
  opacity:0.95;
  line-height:1.1;
  white-space: nowrap;

  font-size: clamp(14px, 1.6vw, 18px);
}

/* INC VAT (bottom, smaller) — scales down */
.msc-total-inc{
  font-weight:500;
  line-height:1.1;
  white-space: nowrap;
  font-size: clamp(9px, 1.1vw, 12px);
  padding-top: 15px !important;
}

/* VAT label stays inline, never wraps */
.msc-vat-label{
  font-size: 0.85em;
  font-weight:700;
  color:#bbb;
  margin-left:6px;
  white-space: nowrap;
}

/*
 * ==========================================================
 * ARTWORK EDITOR OVERLAY
 * ==========================================================
 */

.msc-artwork-editor-overlay{
	position:fixed;
	inset:0;

	display:none;

	background:#fff;

	/*
	 * Above:
	 * - side basket
	 * - portal sidebar
	 * - overlay/backdrops
	 */
	z-index:2147483647;
}

.msc-artwork-editor-overlay.is-open{
	display:block;
}

.msc-artwork-editor-frame{
	display:block;
	width:100%;
	height:100%;
	border:0;
	background:#fff;
}

body.msc-artwork-editor-open{
	overflow:hidden !important;
}


/*
 * Your portal sidebar has an intentionally enormous z-index.
 * Hide it only while Artwork Editor is open.
 */
body.msc-artwork-editor-open .pp-sidebar,
body.msc-artwork-editor-open .pp-sidebar__backdrop{
	visibility:hidden !important;
	opacity:0 !important;
	pointer-events:none !important;
}