:root {
 	--canvas-w: 600px;
  	--canvas-h: 800px;
  	--nav-offset: 73px !important;
  	--toolbar-offset: 0px;
}

body {
	background: #f6f8fb;
  	padding-top: var(--nav-offset)
}

.editor-toolbar {
  	position: sticky;
  	top: var(--nav-offset);
  	z-index: 1020;
  	background: #fff;
  	border-bottom: 1px solid rgba(0,0,0,.075);
}

.editor-toolbar .btn {
	white-space: nowrap;
}

.app-shell {
	min-height: 90vh;
}

.controls {
	background: #fff;
	border-right: 1px solid #eaecef;
}

.brandbar {
	background: linear-gradient(135deg, #4218B8 75%, #00c0ff 100%);
	color: #fff;
}

/* Let middle row grow and scroll */
.row.flex-grow-1 {
	min-height: 0;
}

.canvas-col {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.canvas-wrap {
  	flex: 1 1 auto;
  	overflow: auto;
  	min-height: 0;
  	--checker-a: #f2f4f8;
  	--checker-b: #dee2e6;
  	--checker-size: 20px;
  	background:
    	conic-gradient(var(--checker-a) 25%, var(--checker-b) 0 50%, var(--checker-a) 0 75%, var(--checker-b) 0)
    	0 / var(--checker-size) var(--checker-size);
  	display: grid;
  	place-items: center;
  	border-left: 1px solid #eaecef;
}

/* Canvas element styling — let Fabric paint the background */
canvas {
	border: 1px solid #e0e4ea;
}

.canvas-container canvas.upper-canvas {
	background: transparent !important;
}

.canvas-container canvas.lower-canvas {
	background: transparent !important;
}

.tool-label {
	font-size: .825rem;
	color: #6c757d;
}

.btn-icon {
	width: 2.5rem;
	height: 2.5rem;
	display: inline-grid;
	place-items: center;
}

/* IMPORTANT: Sidebar sticky panel must sit below BOTH headers */
.sticky-controls {
  	position: sticky;
  	top: calc(var(--nav-offset) + var(--toolbar-offset));
  	z-index: 1010;
}

.footerbar {
	border-top:1px solid #eaecef;
	background:#fff;
}

@media (max-width: 991.98px) {
  	.controls {
  		border-right: none;
  		border-bottom: 1px solid #eaecef;
  	}
  	
  	.canvas-wrap {
  		border-left: none;
  	}
}

/* Page-specific polish */
.hero-grad {
	background: radial-gradient(1200px 600px at 10% 10%, #eef2ff 0%, transparent 60%),
               radial-gradient(900px 500px at 95% 10%, #fff7ed 0%, transparent 60%),
               linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.badge-soft {
	background: #eef2ff;
	color: #3730a3;
}

.shadow-soft {
	box-shadow: 0 8px 30px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
}

.section-kicker {
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: #64748b;
}

.svg-card .title {
	font: 700 24px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.svg-card .pill {
	font: 700 12px/1 ui-sans-serif, system-ui;
}

.trust-logos img {
	height: 26px;
	opacity:.7;
	filter: grayscale(1);
	transition: opacity .2s;
}

.trust-logos img:hover {
	opacity: 1;
}

.legal-links .legal-header-text {
	font-size: 18px;
	font-weight: bold;
}

.ig-thumb {
  	width: 100%;
  	aspect-ratio: 1 / 1;
  	overflow: hidden;
  	background: #f3f4f6;
  	border: 1px solid rgba(0,0,0,.08);
}
.ig-thumb img {
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
  	object-position: center;
  	display: block;
}

.ig-thumb--rect {
	aspect-ratio: 4 / 3;
}

.ig-lightbox {
  	position: fixed;
  	inset: 0;
  	background: rgba(0,0,0,.85);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 24px;
  	z-index: 9999;
}

.ig-lightbox img {
  	max-width: min(1100px, 95vw);
  	max-height: 90vh;
  	width: auto;
  	height: auto;
  	border: 1px solid rgba(255,255,255,.2);
  	background: #111;
}

.ig-lightbox-close {
  	position: fixed;
  	top: 14px;
  	right: 18px;
  	font-size: 40px;
  	line-height: 1;
  	color: #fff;
  	background: transparent;
  	border: 0;
  	cursor: pointer;
}

body.ig-noscroll {
	overflow: hidden;
}

/* ==========================================
   WINTER HERO (REMOVE IN JANUARY)
   ========================================== */

/* Set a winter background image on the hero section */
/* .hero-grad {
  position: relative;
  overflow: hidden;
  /* 
background-image:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)),
    url("/assets/img/background/Christmas-Background-1920-1080.jpg"); 
 */
  /* background-image: url("/assets/img/background/posteryx-backgroung-happy-new-year.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

/* Keep all your hero content above overlays */
/* .hero-grad > .container {
  position: relative;
  z-index: 2;
} */

/* Optional: a subtle “frost” tint to blend the image nicely */
/* .hero-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(238,242,255,.35) 0%, transparent 60%),
              radial-gradient(900px 500px at 95% 10%, rgba(255,247,237,.22) 0%, transparent 60%);
  pointer-events: none;
} */

/* Snow overlay */
/* .hero-grad::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.65) 0 1.5px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,.45) 0 2px, transparent 4px);

  background-size: 140px 140px, 220px 220px, 320px 320px;
  background-position: 0 0, 0 0, 0 0;
  animation: heroSnowFall 18s linear infinite;
  opacity: .9;
} */

/* .hero-grad h1, .hero-grad p.lead, .hero-grad div.small, .hero-grad span.text-muted {
    color: #ffffff !important;
} */

/* .hero-grad .trust-logos img {
	height: 26px;
	opacity: .85;
	filter: brightness(0) invert(1);
	transition: opacity .2s;
} */

/* @keyframes heroSnowFall {
  0% {
    background-position: 0 -200px, 0 -400px, 0 -600px;
    transform: translateX(0);
  }
  100% {
    background-position: 80px 1200px, -120px 1400px, 140px 1600px;
    transform: translateX(10px);
  }
} */