/* ====== RESET / BASE ====== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
  background:#fff;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ====== NAVBAR ====== */
.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0,0,0,0.85);
  color: #fff;
  backdrop-filter: blur(8px);
}
.navWrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brand{
  font-weight: 900;
  letter-spacing: 0.4px;
}
.navLinks{
  display:flex;
  gap: 18px;
  opacity: 0.9;
}
.navLinks a:hover{ opacity: 1; text-decoration: underline; }

.cartBtn{
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  background:#fff;
  color:#111;
  display:flex;
  align-items:center;
  gap:8px;
}
.badge{
  display:inline-grid;
  place-items:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background:#ff3b30;
  color:#fff;
  font-size: 12px;
  font-weight: 900;
}

/* ====== HERO ====== */
.hero{
  height: 260px;
  background: radial-gradient(ellipse at center, #444 0%, #111 55%, #000 100%);
  color:#fff;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 20px;
}
.hero h1{ margin:0; font-size: 44px; line-height: 1.05; }
.hero p{ margin:10px 0 18px; opacity: 0.9; }

.primaryBtn{
  border:0;
  cursor:pointer;
  background:#111;
  color:#fff;
  font-weight: 900;
  padding: 12px 16px;
  border-radius: 12px;
}
.primaryBtn:hover{ filter: brightness(1.05); }
.primaryBtn.full{ width: 100%; }

.ghostBtn{
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
}

/* ====== SECTIONS ====== */
main{ max-width: 1100px; margin: 0 auto; padding: 24px 18px 60px; }
.section{ padding: 18px 0; }
.section h2{ margin:0 0 8px; font-size: 32px; }
.muted{ color:#666; }
.tiny{ font-size: 12px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.hintBox{
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid #eee;
  background:#f7f7f7;
  border-radius: 12px;
}

/* ====== PRODUCT GRID ====== */
.productGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  align-items: start;
}

/* Card */
.card{
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background:#fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* IMPORTANT: fixed height so images never become full-page */
.cardImg{
  height: 170px;
  background: #f3f4f6;
  overflow: hidden;
  cursor: pointer;
}
.cardImg img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* prevents zoom/crop weirdness */
}
.noImg{
  height: 100%;
  display:grid;
  place-items:center;
  color:#999;
  font-weight: 800;
}

.cardBody{
  padding: 12px 14px 14px;
}
.cardName{
  font-weight: 900;
  margin: 2px 0 6px;
  cursor: pointer;
}
.cardPrice{
  font-weight: 900;
  font-size: 18px;
}

/* Discount style */
.newPrice{ color:#16a34a; font-weight: 1000; }
.oldPrice{ color:#9ca3af; text-decoration: line-through; font-weight: 900; margin-left: 8px; }

/* ====== CART ====== */
.cartSection{ margin-top: 18px; }
.cartHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.cartBox{
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 14px;
  background:#fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}
.cartRow{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cartRow:last-child{ border-bottom:0; }

.cartTotals{ margin-top: 12px; }
.cartTotals .row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin: 6px 0;
}
.actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ====== MODAL ====== */
body.noScroll{ overflow: hidden; }

.modalBackdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  padding: 18px;
}
.modalBackdrop.open{ display:flex; }

.modal{
  width: min(980px, 100%);
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 20px 70px rgba(0,0,0,0.35);
  position: relative;
}

.modalClose{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border:0;
  border-radius: 999px;
  cursor:pointer;
  background: rgba(255,255,255,0.92);
  font-weight: 1000;
}

.modalMedia{
  position: relative;
  background:#f3f4f6;
  height: 380px;
  overflow:hidden;
}
.modalMedia img{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* ✅ SHOW FULL IMAGE, NOT ZOOMED */
  background:#f3f4f6;
}

.imgArrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border:0;
  border-radius: 999px;
  cursor:pointer;
  background: rgba(0,0,0,0.55);
  color:#fff;
  font-size: 26px;
  display:grid;
  place-items:center;
}
.imgArrow.left{ left: 10px; }
.imgArrow.right{ right: 10px; }

.modalBody{
  padding: 14px 16px 18px;
}
.modalTop{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
}
.modalName{ font-size: 22px; font-weight: 1000; }
.modalPrice{ margin-top: 6px; font-size: 18px; font-weight: 1000; }

.qtyWrap{
  display:flex;
  align-items:center;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow:hidden;
}
.qtyWrap button{
  width: 40px;
  height: 38px;
  border:0;
  background:#f4f4f5;
  cursor:pointer;
  font-weight: 1000;
}
.qtyWrap input{
  width: 64px;
  height: 38px;
  border:0;
  text-align:center;
  outline:none;
  font-weight: 900;
}
.qtyWrap input::-webkit-outer-spin-button,
.qtyWrap input::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }
.qtyWrap input{ appearance: textfield; }

@media (max-width: 720px){
  .hero h1{ font-size: 32px; }
  .navLinks{ display:none; }
  .modalMedia{ height: 280px; }
  .modalTop{ flex-direction: column; }
}
/* =========================
   Custom Sticker Builder CSS
   ========================= */
.cs-wrap { margin: 18px 0 26px; }
.cs-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
}

.cs-gallery {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  align-items: start;
}

.cs-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 360px; /* keeps thumbs no taller than main image */
  padding-right: 4px;
}

.cs-thumbBtn {
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  padding: 4px;
  cursor: pointer;
}
.cs-thumbBtn img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.cs-thumbBtn.active { outline: 3px solid rgba(59,130,246,0.75); }

.cs-main {
  position: relative;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  min-height: 320px;              /* ~1/4 screen on desktop feel */
  max-height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#csMainImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}
.cs-mainHint {
  opacity: 0.7;
  font-size: 13px;
  padding: 12px;
  text-align: center;
}

.cs-side { display: flex; flex-direction: column; gap: 12px; }
.cs-titleRow { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cs-title { margin: 0; font-size: 20px; }
.cs-priceBox { text-align: right; }
.cs-price { font-size: 22px; font-weight: 700; }
.cs-subPrice { font-size: 13px; opacity: 0.8; }

.cs-field label { display: block; font-size: 13px; opacity: 0.9; margin-bottom: 6px; }
.cs-field select, .cs-field textarea, .cs-field input[type="file"] {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(20, 28, 45, 0.95);
  color: #fff;
  padding: 10px 12px;
}
.cs-field select option { background: #111827; color: #fff; }

.cs-help { font-size: 12px; opacity: 0.65; margin-top: 6px; }

.cs-row2 { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cs-check { display: flex; gap: 8px; align-items: center; cursor: pointer; opacity: 0.95; }
.cs-check input { transform: scale(1.05); }

.cs-optionalBtn {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(239, 14, 14, 0.4);
  color: rgb(255, 255, 255);
  padding: 10px 12px;
  cursor: pointer;
}
.cs-optionalBtn:hover { color: rgba(29, 74, 78, 0.92); }
.cs-optionalWrap { opacity: 0.92; }

.cs-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.cs-addBtn {
  border-radius: 14px;
  border: 1px solid rgba(59,130,246,0.75);
  background: rgba(59,130,246,0.20);
  color: #fff;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
}
.cs-addBtn:disabled { opacity: 0.6; cursor: not-allowed; }
.cs-note { font-size: 12px; opacity: 0.75; min-height: 16px; }

/* Mobile: images first, then options */
@media (max-width: 900px) {
  .cs-card { grid-template-columns: 1fr; }
  .cs-gallery { grid-template-columns: 70px 1fr; }
  .cs-main { min-height: 260px; max-height: 320px; }
}
/* Compact file summary box (instead of big preview) */
.cs-fileBox{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  padding: 14px;
  min-height: 180px;
}

.cs-fileTitle{
  font-weight: 700;
  margin-bottom: 10px;
}

.cs-fileRow{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cs-fileThumbs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 160px;
}

.cs-fileThumb{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

.cs-fileMeta{ flex: 1; }

.cs-fileName{
  font-size: 13px;
  word-break: break-word;
}

.cs-fileHint{
  font-size: 12px;
  opacity: 0.65;
  margin-top: 6px;
}

.cs-noteBox{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.cs-fileBox { min-width: 260px; }
.cs-fileName, .cs-fileHint, .cs-noteBox { white-space: normal; word-break: normal; }
/* ===============================
   Custom Sticker – File Summary
   =============================== */

.cs-fileSummary{
  margin-top: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px dashed #e5e7eb;
}

.cs-fileName{
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #111827;
}

.cs-fileHint{
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

/* Thumbnails row */
.cs-fileThumbs{
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.cs-fileThumb{
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}
/* ================================
   Custom Sticker Gallery (Preview)
   ================================ */
.cs-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-thumbBtn {
  border: 2px solid transparent;
  background: transparent;
  padding: 0;
  border-radius: 12px;
  cursor: pointer;
}

.cs-thumbBtn.active {
  border-color: rgba(59, 130, 246, 0.9);
}

.cs-thumbImg {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* arrows on main image */
.cs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.cs-arrow-left { left: 10px; }
.cs-arrow-right { right: 10px; }

/* ================================
   Drag & Drop Upload
   ================================ */
.cs-dropZone {
  margin-top: 10px;
  border: 2px dashed rgba(148, 163, 184, 0.6);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  color: rgba(15, 23, 42, 0.7);
  background: rgba(255,255,255,0.6);
}

.cs-dropZone.dragover {
  border-color: rgba(59, 130, 246, 0.9);
  background: rgba(59, 130, 246, 0.08);
}
/* =========================================================
   Custom Sticker section + select readability
   Paste at bottom of index.css
   ========================================================= */

/* Make dropdown readable on dark background */
.cs-side select,
.cs-side option {
  color: #fff;
  background: #1f2937;
}

/* Custom sticker layout */
.cs-wrap {
  padding: 28px 16px;
  background: #fff;
}

.cs-card {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .cs-card {
    grid-template-columns: 1fr;
  }
}

.cs-gallery {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: start;
}

@media (max-width: 900px) {
  .cs-gallery {
    grid-template-columns: 1fr;
  }
}

.cs-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow: auto;
  padding-right: 6px;
}

.cs-thumbBtn {
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 2px;
  background: transparent;
  cursor: pointer;
}

.cs-thumbBtn.active {
  border-color: #3b82f6;
}

.cs-thumbBtn img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.cs-main {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f4f6;
  min-height: 220px;
  display: grid;
  place-items: center;
}

.cs-main img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: none;
}

.cs-mainHint {
  color: #6b7280;
  font-size: 14px;
  padding: 12px;
  text-align: center;
}

.csArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.csArrow.left { left: 12px; }
.csArrow.right { right: 12px; }

.cs-side {
  padding: 6px 0;
}

.cs-titleRow {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.cs-title {
  margin: 0;
  font-size: 20px;
}

.cs-priceBox {
  text-align: right;
}

.cs-price {
  font-size: 22px;
  font-weight: 800;
}

.cs-subPrice {
  font-size: 13px;
  margin-top: 2px;
}

.cs-field {
  margin-top: 12px;
}

.cs-field label {
  display: block;
  font-size: 13px;
  color: #111827;
  margin-bottom: 6px;
}

.cs-field select,
.cs-field input,
.cs-field textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
}

.cs-help {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
}

.cs-row2 {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  align-items: center;
}

.cs-check {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}

.cs-optionalBtn {
  margin-top: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 0;
  background: #fca5a5;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.cs-opt {
  opacity: .5; /* ONLY the '(optional)' is faded */
  font-weight: 600;
}

.cs-optionalWrap {
  margin-top: 10px;
}

.cs-actions {
  margin-top: 14px;
}

.cs-addBtn {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  background: #dbeafe;
  color: #111827;
  font-weight: 800;
  cursor: pointer;
}

.cs-addBtn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.cs-note {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

.cs-fileRow {
  margin-top: 10px;
}

.cs-fileName {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.cs-fileThumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.cs-fileThumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}

/* =========================
   Public Messaging Widget
========================= */
.msgFab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:100;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(18,22,34,.92);
  color:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor:pointer;
}
.msgFab[hidden]{ display:none !important; }
.msgModalOverlay{
  position:fixed; inset:0; z-index:101;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(3px);
}
.msgModal{
  position:fixed;
  right:18px; bottom:78px;
  width:min(380px, 92vw);
  z-index:102;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: rgba(14,18,30,.98);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  overflow:hidden;
}
.msgModalHeader{ display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.msgStatusDot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px; }
.msgBody{ padding:12px; }
.msgBody input,.msgBody textarea{ width:100%; margin:8px 0; }
.msgRow{ display:flex; gap:10px; align-items:center; justify-content:space-between; }

/* =========================
   Customer Messaging Widget
   ========================= */
.msgFab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(25,35,55,0.92);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.msgStatusDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #888;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
.msgBackdrop{
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0,0,0,0.45);
}
.msgPanel{
  position: fixed;
  right: 18px;
  bottom: 72px;
  width: min(360px, calc(100vw - 36px));
  z-index: 50;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(15,22,36,0.96);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.msgHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.msgTitle{ font-weight: 700; }
.msgStatusText{ font-size: 12px; opacity: 0.85; }
.msgClose{
  border: none;
  background: rgba(255,255,255,0.08);
  color:#fff;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor:pointer;
}
.msgBody{ padding: 12px 14px; display:flex; flex-direction: column; gap: 8px; }
.msgLabel{ font-size: 12px; opacity: 0.85; }
.msgInput, .msgTextarea{
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color:#fff;
  outline: none;
}
.msgTextarea{ resize: vertical; }
.msgHint{ min-height: 16px; font-size: 12px; opacity: 0.85; }
.msgNote{ min-height: 16px; font-size: 12px; opacity: 0.85; }
.msgReply{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  line-height: 1.35;
}
.msgReply .lbl{ opacity: 0.8; font-size: 12px; margin-bottom: 6px; }
.msgSend{
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(75,120,255,0.9);
  color:#fff;
  cursor:pointer;
}

/* Hide the left thumbnail rail on smaller screens */
@media (max-width: 950px){
  .cs-thumbs{ display:none !important; }
  .cs-gallery{ grid-template-columns: 1fr !important; }
}


/* --- Messaging modal (hardening) --- */
[hidden]{display:none !important;}
html.modalOpen, body.modalOpen{overflow:hidden;}
.msgFab{ z-index: 9999; pointer-events: auto; }
.msgModal{ z-index: 9998; }
.msgBackdrop{display:flex; align-items:flex-end; justify-content:flex-end; padding:18px; pointer-events:auto;}
.msgPanel{pointer-events:auto;}

/* Custom Sticker cut help */
.cs-cutHelp{ margin-top: 8px; font-size: 12px; opacity: 0.9; }
.cs-cutHelp strong{ font-weight: 700; }
.cs-cutFeedback{ margin-top: 6px; min-height: 16px; font-size: 12px; opacity: 1; }