/*
  Junk2Go complete mascot and branding placement layer — R4
  Visual-only. It does not alter booking, pricing, photo upload, coupon,
  payment, contact, API, PHP or JavaScript behaviour.
*/

/* Make the real Junk2Go logo (including the bin-shaped 2) unmistakable. */
body.j2g-cartoon-enhanced .site-header .brand{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  min-width:170px;
}
body.j2g-cartoon-enhanced .site-header .brand img{
  display:block!important;
  width:190px!important;
  max-width:24vw!important;
  height:auto!important;
  max-height:64px!important;
  opacity:1!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))!important;
}

/* Re-enable only the intentional new mascot placements. */
body.j2g-cartoon-enhanced .j2g-section-head-mascot{
  display:block!important;
  width:150px!important;
  max-height:150px!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  margin:-34px 4px -18px auto!important;
  filter:drop-shadow(0 14px 22px rgba(2,38,23,.16))!important;
}
body.j2g-cartoon-enhanced .j2g-photo-layout--text{
  grid-template-columns:minmax(0,1fr) minmax(235px,330px)!important;
}

/* Transparent cutout images sit on a soft, professional surface. */
.j2g-cutout-surface{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 68% 22%,rgba(134,196,64,.24),transparent 34%),
    linear-gradient(145deg,#fbfdf9 0%,#edf7ec 100%)!important;
}
.j2g-cutout-surface::before{
  content:"";
  position:absolute;
  inset:auto -80px -100px auto;
  width:280px;
  height:280px;
  border-radius:50%;
  background:rgba(15,143,59,.08);
  pointer-events:none;
}

/* Homepage service visual: new female/male crew carrying a loveseat. */
.j2g-feature-band__media--cutout{
  position:relative;
  min-height:390px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px 16px 0;
}
.j2g-feature-band__media--cutout img{
  position:relative;
  z-index:1;
  width:100%!important;
  height:100%!important;
  max-height:390px;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 22px 28px rgba(2,38,23,.18));
}

/* Homepage confidence visual: friendly mixed-gender team, not a harsh hero. */
.j2g-confidence-visual--cutout{
  min-height:410px!important;
  background:
    radial-gradient(circle at 50% 24%,rgba(134,196,64,.22),transparent 38%),
    linear-gradient(145deg,#0b2f1d,#07522f)!important;
}
.j2g-confidence-visual--cutout::after{
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.18))!important;
}
.j2g-confidence-visual--cutout img{
  position:absolute!important;
  inset:auto 0 0 0!important;
  width:100%!important;
  height:88%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.32))!important;
}

/* Price guide helper, decorative only; price calculations remain untouched. */
.j2g-price-helper{
  display:grid;
  grid-template-columns:minmax(0,1fr) 122px;
  gap:12px;
  align-items:center;
  margin-top:14px;
  padding:12px 12px 0 14px;
  overflow:hidden;
  border:1px solid rgba(15,143,59,.16);
  border-radius:16px;
  background:linear-gradient(135deg,#f4faf2,#fff);
}
.j2g-price-helper strong{display:block;color:#174c2a}
.j2g-price-helper span{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.4}
.j2g-price-helper img{width:122px;max-height:145px;align-self:end;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 18px rgba(2,38,23,.16))}

/* What-we-remove visual band. */
.j2g-asset-callout{
  display:grid;
  grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);
  align-items:center;
  gap:26px;
  margin-top:22px;
  padding:22px 28px 0 18px;
  overflow:hidden;
  border:1px solid rgba(15,143,59,.17);
  border-radius:22px;
  background:
    radial-gradient(circle at 17% 28%,rgba(134,196,64,.24),transparent 33%),
    linear-gradient(135deg,#f2f9f1,#fff);
  box-shadow:0 16px 34px rgba(2,38,23,.08);
}
.j2g-asset-callout--reverse{grid-template-columns:minmax(0,1.28fr) minmax(230px,.72fr);padding:22px 18px 0 28px}
.j2g-asset-callout__media{align-self:end;display:flex;justify-content:center}
.j2g-asset-callout__media img{width:min(360px,100%);max-height:330px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 26px rgba(2,38,23,.17))}
.j2g-asset-callout__copy{align-self:center;padding-bottom:22px}
.j2g-asset-callout__copy h3{margin:0;font-size:clamp(24px,3vw,36px);line-height:1.08}
.j2g-asset-callout__copy p{max-width:62ch;color:var(--muted)}

/* Internal-page transparent mascot hero panel. */
.j2g-mascot-hero-panel{
  position:relative;
  min-height:360px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:20px 20px 0!important;
  border:1px solid rgba(15,143,59,.20)!important;
  border-radius:22px;
  background:
    radial-gradient(circle at 64% 22%,rgba(134,196,64,.28),transparent 36%),
    linear-gradient(145deg,#fbfdf9 0%,#eaf5e8 100%)!important;
}
.j2g-mascot-hero-panel::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:28%;
  background:linear-gradient(180deg,transparent,rgba(3,39,25,.07));
  pointer-events:none;
}
.j2g-mascot-hero-panel img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:540px;
  height:340px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 22px 28px rgba(2,38,23,.19));
}
.j2g-mascot-hero-panel--wide img{max-width:640px}
.j2g-mascot-hero-panel--compact img{max-width:365px}
.j2g-mascot-hero-panel .j2g-page-hero-caption{
  position:absolute;
  z-index:2;
  left:16px;
  right:16px;
  bottom:14px;
  padding:11px 13px;
  border-radius:13px;
  color:#fff;
  background:rgba(3,39,25,.89);
  box-shadow:0 12px 24px rgba(0,0,0,.16);
}
.j2g-mascot-hero-panel .j2g-page-hero-caption strong{display:block;color:#fff;font-size:16px}
.j2g-mascot-hero-panel .j2g-page-hero-caption span{display:block;margin-top:3px;color:rgba(255,255,255,.82);font-size:12px;line-height:1.35}

/* About page intentional mascot surfaces. */
.j2g-about-visual--mascot{
  position:relative;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  min-height:430px;
  overflow:hidden;
  padding:22px 18px 0;
  background:
    radial-gradient(circle at 50% 20%,rgba(134,196,64,.28),transparent 40%),
    linear-gradient(145deg,#f7fbf5,#e9f5e7)!important;
}
.j2g-about-visual--mascot img{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  max-height:410px!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
  filter:drop-shadow(0 22px 28px rgba(2,38,23,.18))!important;
}
.j2g-about-band--with-mascot{
  grid-template-columns:minmax(0,1fr) minmax(240px,360px)!important;
  align-items:center!important;
  overflow:hidden;
  padding-bottom:0!important;
}
.j2g-about-band__media{align-self:end;display:flex;justify-content:center}
.j2g-about-band__media img{width:100%;max-height:330px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 20px 26px rgba(2,38,23,.18))}

/* SEO/internal-page content callout. */
.j2g-seo-mascot-callout{
  display:grid;
  grid-template-columns:minmax(210px,.6fr) minmax(0,1.4fr);
  align-items:center;
  gap:24px;
  overflow:hidden;
  padding:18px 26px 0 14px;
  border:1px solid rgba(15,143,59,.17);
  border-radius:22px;
  background:linear-gradient(135deg,#eff8ed,#fff);
  box-shadow:0 16px 34px rgba(2,38,23,.07);
}
.j2g-seo-mascot-callout--reverse{grid-template-columns:minmax(0,1.4fr) minmax(210px,.6fr);padding:18px 14px 0 26px}
.j2g-seo-mascot-callout__media{align-self:end;display:flex;justify-content:center}
.j2g-seo-mascot-callout__media img{width:min(330px,100%);max-height:300px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 24px rgba(2,38,23,.16))}
.j2g-seo-mascot-callout__copy{padding-bottom:20px}
.j2g-seo-mascot-callout__copy h2,.j2g-seo-mascot-callout__copy h3{margin:0 0 8px}
.j2g-seo-mascot-callout__copy p{color:var(--muted)}

@media(max-width:980px){
  body.j2g-cartoon-enhanced .site-header .brand img{width:170px!important;max-width:34vw!important}
  .j2g-feature-band__media--cutout{min-height:340px}
  .j2g-feature-band__media--cutout img{max-height:340px}
  .j2g-asset-callout,.j2g-asset-callout--reverse,.j2g-seo-mascot-callout,.j2g-seo-mascot-callout--reverse{grid-template-columns:1fr;padding:20px 22px 0}
  .j2g-asset-callout__copy,.j2g-seo-mascot-callout__copy{padding-bottom:8px}
  .j2g-about-band--with-mascot{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  body.j2g-cartoon-enhanced .site-header .brand{min-width:136px}
  body.j2g-cartoon-enhanced .site-header .brand img{width:145px!important;max-width:42vw!important;max-height:52px!important}
  body.j2g-cartoon-enhanced .j2g-photo-layout--text{grid-template-columns:1fr!important}
  .j2g-photo-mascot{max-height:285px;margin-bottom:-24px}
  body.j2g-cartoon-enhanced .j2g-section-head-mascot{width:110px!important;max-height:110px!important;margin:-18px 0 -12px auto!important}
  .j2g-price-helper{grid-template-columns:1fr;padding:12px 12px 0}
  .j2g-price-helper img{justify-self:center}
  .j2g-mascot-hero-panel{min-height:320px!important}
  .j2g-mascot-hero-panel img{height:300px}
  .j2g-feature-band__media--cutout{min-height:295px}
  .j2g-feature-band__media--cutout img{max-height:295px}
  .j2g-confidence-visual--cutout{min-height:340px!important}
}