/* Shared dimensions match the compact Auctions banner. */
:root{--feature-hero-height:144px}
.socipic-page-banner.socipic-page-banner{
  box-sizing:border-box;
  height:144px!important;
  min-height:144px!important;
  max-height:144px!important;
  display:grid;
  grid-template-columns:minmax(0,1fr) 160px;
  align-items:center;
  gap:16px;
  padding:14px 32px;
  overflow:hidden;
}
.socipic-page-banner.page-banner-without-icon{grid-template-columns:minmax(0,1fr)}
.socipic-page-banner .page-banner-copy{
  display:grid;
  align-content:center;
  gap:8px;
  min-width:0;
  max-width:none;
}
.socipic-page-banner.socipic-page-banner h1{
  font-size:56px;
  line-height:1.05;
  margin:0;
  overflow-wrap:anywhere;
}
.socipic-page-banner.page-banner-long-title h1{font-size:40px}
.socipic-page-banner :is(.arcade-kicker,.buzz-hero-kicker,.hof-kicker,.shops-kicker,.play-kicker,.legal-eyebrow,.seo-landing-eyebrow){font-size:12px;line-height:1.1;margin:0}
.socipic-page-banner :is(.arcade-hero-lede,.arcade-hero-subcopy,.buzz-hero-lede,.buzz-hero-subcopy,.hof-hero-lede,.hof-hero-subcopy,.shops-hero-lede,.shops-hero-subcopy,.play-hero-lede,.play-hero-subcopy,.shops-hero-showcase){display:none}
.socipic-page-banner.socipic-page-banner .page-banner-icon{
  display:block;
  position:relative;
  inset:auto;
  z-index:1;
  justify-self:center;
  width:116px;
  height:116px;
  max-width:100%;
  min-height:0;
  object-fit:contain;
  transform:rotate(5deg);
  filter:drop-shadow(0 5px 4px #26335b20);
}
.socipic-page-banner .page-banner-icon img{display:block;width:100%;height:100%;object-fit:contain;transform:none;filter:none}
.socipic-page-banner .page-banner-icon::before,.socipic-page-banner .page-banner-icon::after{display:none}
.socipic-page-banner.socipic-page-banner .play-heading-link{top:50%;transform:translateY(-50%)}
.socipic-page-banner.show-hub-hero{align-items:center}
.socipic-page-banner.show-hub-hero h1{font-size:56px!important;line-height:1.05!important}
.socipic-page-banner .show-banner-subtitle{margin:4px 0 0;font-size:16px;line-height:1.2}
.page-banner-tabs.page-banner-tabs{margin:16px 0 20px;display:flex;flex-wrap:wrap;gap:10px}
.page-banner-details{margin:16px 0 24px;color:var(--legal-copy,var(--ink));font-size:17px;line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.page-banner-details>p{flex:1 1 100%;margin:0;max-width:950px}
.page-banner-details :is(.legal-hero-actions,.seo-landing-actions){margin:0}
.page-banner-details .legal-hero-meta{margin:0;display:flex;flex-wrap:wrap;gap:12px 24px;width:auto;background:none;border:0;padding:0;box-shadow:none}
.page-banner-details .legal-meta-row+.legal-meta-row{padding:0;border:0}
@media(max-width:600px){
  :root{--feature-hero-height:112px}
  .socipic-page-banner.socipic-page-banner{height:112px!important;min-height:112px!important;max-height:112px!important;grid-template-columns:minmax(0,1fr) 78px;gap:8px;padding:12px 16px}
  .socipic-page-banner.page-banner-without-icon{grid-template-columns:minmax(0,1fr)}
  .socipic-page-banner.socipic-page-banner h1{font-size:clamp(26px,8vw,40px);line-height:1.05}
  .socipic-page-banner.page-banner-long-title h1{font-size:22px;line-height:1.1}
  .socipic-page-banner .page-banner-copy{gap:6px}
  .socipic-page-banner.socipic-page-banner .page-banner-icon{width:76px;height:76px}
  .socipic-page-banner.show-hub-hero h1{font-size:36px!important;line-height:1.05!important}
  .socipic-page-banner .show-banner-subtitle{font-size:13px}
  .page-banner-tabs.page-banner-tabs{margin:14px 0 18px;gap:8px}
  .page-banner-tabs .shop-section-tab{flex:1;padding:8px;font-size:14px}
  .page-banner-details{font-size:16px;margin:12px 0 20px}
}

/* Oversized studio artwork, layered and faded into the banner. */
.socipic-page-banner.designs-banner-composed{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr)}
.socipic-page-banner.designs-banner-composed::after{display:none}
.designs-banner-composed .page-banner-copy{position:relative;z-index:3;max-width:38%}
.designs-banner-composition{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;isolation:isolate;mask-image:linear-gradient(90deg,transparent 15%,#000 35%)}
.designs-banner-composition::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 115px 80px at 50% 50%,#fffffff0,#ffffff80 38%,transparent 78%);z-index:2}
.designs-banner-composition::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#7668aa 0.7px,transparent 1px);background-size:4px 4px;mask-image:radial-gradient(ellipse 170px 210px at 30% 50%,#0009,transparent 80%);opacity:.3;mix-blend-mode:multiply;z-index:1}
.designs-banner-composition img{position:absolute;display:block;object-fit:contain;max-width:none;transform-origin:center;mix-blend-mode:multiply}
.designs-banner-composition .designs-banner-paint{width:290px;height:250px;left:30%;top:-45px;transform:translateX(-50%) rotate(-22deg);opacity:.34;filter:saturate(.6) contrast(.9) blur(.5px);mask-image:linear-gradient(145deg,#000 28%,#0009 70%,transparent 100%);z-index:1}
.designs-banner-composition .designs-banner-mannequin{width:84px;height:124px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);opacity:1;mix-blend-mode:normal;filter:saturate(1.12) contrast(1.04) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(5px 6px 4px #7f447e30);mask-image:none;z-index:3}
.designs-banner-composition .designs-banner-mannequin-echo-left{transform:translate(calc(-50% - 29px),-50%) rotate(-15deg);opacity:.42;filter:grayscale(1) sepia(1) saturate(3) hue-rotate(112deg) drop-shadow(-2px 0 0 #fff8);z-index:2}
.designs-banner-composition .designs-banner-mannequin-echo-right{transform:translate(calc(-50% + 27px),-50%) rotate(9deg);opacity:.56;filter:grayscale(1) sepia(1) saturate(3) hue-rotate(211deg) drop-shadow(2px 0 0 #fff9);z-index:2}
.designs-banner-composition .designs-banner-scissors{width:46%;height:auto;right:-3%;top:50%;transform:translateY(-50%) rotate(-14deg);opacity:.52;filter:hue-rotate(18deg) saturate(.85) contrast(1.16) drop-shadow(4px 3px 0 #ffffff80);mask-image:linear-gradient(100deg,transparent,#000 28%,#000 76%,#0003);z-index:2}
@media(min-width:1600px){
  .designs-banner-composition .designs-banner-paint{width:330px;height:285px;top:-60px}
}
@media(max-width:900px){
  .designs-banner-composition .designs-banner-paint{width:230px;height:200px;left:32%;top:-16px}
  .designs-banner-composition .designs-banner-mannequin{left:56%}
  .designs-banner-composition .designs-banner-scissors{width:350px;height:230px;right:-95px;top:-22px;transform:rotate(-14deg);opacity:.4}
}
@media(max-width:600px){
  .socipic-page-banner.designs-banner-composed{grid-template-columns:minmax(0,1fr);padding-inline:18px}
  .socipic-page-banner.designs-banner-composed h1{font-size:clamp(30px,9vw,40px);overflow-wrap:normal}
  .designs-banner-composed .page-banner-copy{max-width:58%}
  .designs-banner-composition{mask-image:linear-gradient(90deg,transparent 23%,#000 58%)}
  .designs-banner-composition .designs-banner-paint{width:160px;height:146px;left:52%;top:8px;opacity:.23}
  .designs-banner-composition .designs-banner-mannequin{width:54px;height:88px;left:77%;top:50%}
  .designs-banner-composition .designs-banner-mannequin-echo-left{transform:translate(calc(-50% - 17px),-50%) rotate(-15deg)}
  .designs-banner-composition .designs-banner-mannequin-echo-right{transform:translate(calc(-50% + 16px),-50%) rotate(9deg)}
  .designs-banner-composition::before{background:radial-gradient(ellipse 65px 68px at 77% 50%,#ffffffe0,transparent 85%)}
  .designs-banner-composition::after{mask-image:radial-gradient(ellipse 100px 120px at 52% 70%,#0008,transparent 80%)}
  .designs-banner-composition .designs-banner-scissors{width:200px;height:134px;right:-78px;top:24px;opacity:.38}
}