/* PMP Create Pro v33 — original product-aware catalog illustrations. */

.format-art:has(.product-stage) > .art-canvas { display: none; }

.product-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 20%, rgba(255,255,255,.21), transparent 25%),
    linear-gradient(135deg, color-mix(in srgb,var(--accent),#071a26 34%), #082331);
}

.product-stage::before {
  content: "";
  position: absolute;
  width: 165px;
  height: 165px;
  left: -58px;
  bottom: -95px;
  border: 25px solid rgba(255,255,255,.07);
  border-radius: 50%;
}

.product-stage::after {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: 14px;
  height: 11px;
  border-radius: 50%;
  background: rgba(1,12,19,.3);
  filter: blur(5px);
}

.product-object {
  position: relative;
  z-index: 2;
  width: 54%;
  height: 48%;
  border: 7px solid #e9f4f5;
  border-radius: 3px;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(255,255,255,.75) 8% 10%,transparent 10% 100%),
    linear-gradient(135deg,#19c7b8 0 36%,#fbfaf6 36% 57%,#ff9f36 57% 73%,#0c3040 73%);
  box-shadow: 0 12px 26px rgba(1,18,26,.3), inset 0 0 0 2px rgba(7,32,43,.12);
}

.product-object::before,
.product-object::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.format-description {
  display: -webkit-box;
  min-height: 27px;
  margin-top: 7px;
  overflow: hidden;
  color: #5d6f79;
  font-size: 8px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.design-format-card:has(.product-stage) { min-height: 320px; }
.design-format-card:has(.product-stage) .format-card-copy { min-height: 165px; }

/* SEG fabric and frame systems */
.format-art[data-group-visual="seg-fabric-frames"] .product-object {
  border-color: #d9e6e8;
  box-shadow: 0 13px 28px rgba(1,18,26,.3), inset 0 0 0 3px #172d38;
}
.format-art[data-product="seg"] .product-object { width: 62%; height: 42%; border-width: 3px; }
.format-art[data-product="seg-wall"] .product-object::before {
  inset: -12px;
  border: 4px solid #9eacb2;
  box-shadow: inset 0 0 0 2px #3d525d;
}
.format-art[data-product="seg-lightbox"] .product-object {
  background: linear-gradient(135deg,#e5ffff,#8ff8ee 43%,#fff 44% 60%,#ffcc82 61%);
  box-shadow: 0 0 9px #fff, 0 0 26px rgba(116,255,240,.75), 0 15px 28px rgba(1,18,26,.32);
}
.format-art[data-product="seg-freestanding"] .product-object { width: 35%; height: 65%; }
.format-art[data-product="seg-freestanding"] .product-object::before {
  left: -18px; right: -18px; bottom: -13px; height: 8px;
  border-radius: 5px; background: #b7c4c9; box-shadow: inset 0 -2px #586d77;
}

/* Banners, backdrops, and shaped flags */
.format-art[data-group-visual="banners-flags"] .product-object {
  width: 68%; height: 39%; border: 0; border-radius: 1px;
  background:
    radial-gradient(circle,#f0f5f6 0 2px,transparent 2.6px) 5px 5px/22px 22px,
    linear-gradient(120deg,#ff9f36 0 42%,#fff 42% 58%,#18c8b8 58%);
  box-shadow: 0 12px 23px rgba(1,18,26,.32);
}
.format-art[data-product="pole-banner"] .product-object { width: 32%; height: 65%; transform: translateX(10px); }
.format-art[data-product="pole-banner"] .product-object::before {
  left: -25px; top: -8px; width: 6px; height: calc(100% + 16px); background: #c4ced2; border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(3,23,32,.15);
}
.format-art[data-product="step-repeat"] .product-object {
  width: 70%; height: 54%;
  background: repeating-linear-gradient(135deg,#f6fbfb 0 20px,#dff4f2 20px 40px);
  border: 5px solid #677b84;
}
.format-art[data-product="fence-scrim"] .product-object {
  width: 75%; height: 37%; opacity: .9;
  background: linear-gradient(135deg,#0b3443,#1bc6b7);
  border: 4px dashed rgba(255,255,255,.72);
}
.format-art[data-product="feather-flag"] .product-object {
  width: 28%; height: 68%; border: 0; border-radius: 70% 10% 10% 12%;
  clip-path: polygon(38% 0,100% 22%,100% 100%,20% 100%,0 16%);
}
.format-art[data-product="teardrop-flag"] .product-object {
  width: 35%; height: 68%; border: 0; border-radius: 70% 40% 55% 10%;
  clip-path: polygon(36% 0,100% 49%,77% 100%,20% 100%,0 18%);
}

/* Portable displays and trade show structures */
.format-art[data-group-visual="displays-trade-shows"] .product-object {
  width: 34%; height: 64%; border: 4px solid #c5d1d5;
}
.format-art[data-group-visual="displays-trade-shows"] .product-object::before {
  left: -13px; right: -13px; bottom: -10px; height: 9px; border-radius: 3px 3px 10px 10px; background: #aab8be;
}
.format-art[data-product="x-banner"] .product-object::after {
  inset: -8px -12px; background: linear-gradient(57deg,transparent 48%,#d7e0e3 49% 51%,transparent 52%),linear-gradient(-57deg,transparent 48%,#d7e0e3 49% 51%,transparent 52%);
}
.format-art[data-product="popup-wall"] .product-object { width: 70%; height: 55%; border-radius: 45% 45% 6px 6px / 10% 10% 6px 6px; }
.format-art[data-product="table-throw"] .product-object {
  width: 58%; height: 42%; margin-top: 22px; border: 0;
  clip-path: polygon(8% 0,92% 0,100% 100%,0 100%);
}
.format-art[data-product="canopy"] .product-object {
  width: 66%; height: 54%; border: 0; background: transparent;
  clip-path: none; box-shadow: none;
}
.format-art[data-product="canopy"] .product-object::before {
  left: 0; right: 0; top: 0; height: 42%;
  clip-path: polygon(50% 0,100% 100%,0 100%); background: linear-gradient(90deg,#17beaf 0 50%,#ff9f36 50%);
}
.format-art[data-product="canopy"] .product-object::after {
  left: 7%; right: 7%; top: 40%; bottom: 0;
  border: solid #dce5e7; border-width: 5px 5px 0;
  background: linear-gradient(90deg,transparent 49%,rgba(255,255,255,.55) 49% 51%,transparent 51%);
}
.format-art[data-product="trade-booth"] .product-object { width: 72%; height: 55%; }

/* Applied vinyl graphics */
.format-art[data-group-visual="vinyl-graphics"] .product-object {
  width: 60%; height: 56%; border: 8px solid #d9e5e8;
  background:
    linear-gradient(90deg,transparent 48.5%,rgba(239,247,248,.9) 49% 51%,transparent 51.5%),
    linear-gradient(transparent 48.5%,rgba(239,247,248,.9) 49% 51%,transparent 51.5%),
    linear-gradient(135deg,rgba(25,199,184,.85),rgba(7,55,69,.5));
}
.format-art[data-product="perforated"] .product-object { background: radial-gradient(circle,rgba(255,255,255,.35) 0 1px,transparent 1.5px) 0 0/8px 8px,linear-gradient(135deg,#17b8ad,#0b4252); }
.format-art[data-product="frosted"] .product-object { background: linear-gradient(135deg,rgba(255,255,255,.9),rgba(192,224,228,.68)); backdrop-filter: blur(3px); }
.format-art[data-product="floor"] .product-object { width: 54%; height: 52%; transform: perspective(120px) rotateX(52deg) rotateZ(-6deg); }
.format-art[data-product="high-tack"] .product-object { border-color: #ff9f36; }
.format-art[data-product="removable"] .product-object::before {
  right: -1px; bottom: -1px; width: 34px; height: 34px; background: #f7fafb; clip-path: polygon(100% 0,0 100%,100% 100%);
}

/* Rigid substrate signage */
.format-art[data-group-visual="rigid-signs"] .product-object {
  width: 60%; height: 49%; border: 4px solid #eef4f5; border-radius: 2px;
  box-shadow: 7px 8px 0 rgba(88,109,118,.7), 0 16px 28px rgba(1,18,26,.3);
}
.format-art[data-group-visual="rigid-signs"] .product-object::before {
  inset: 7px; background: radial-gradient(circle,#dfe9eb 0 3px,transparent 3.6px) 0 0/100% 100%;
}
.format-art[data-product="acrylic3"] .product-object,
.format-art[data-product="acrylic6"] .product-object { opacity: .86; backdrop-filter: blur(4px); box-shadow: 9px 10px 0 rgba(154,220,225,.42),0 16px 28px rgba(1,18,26,.3); }
.format-art[data-product="yard-sign"] .product-object::after {
  left: 22%; right: 22%; top: 100%; height: 38px; border: solid #d9e2e4; border-width: 0 4px; background: linear-gradient(90deg,transparent 47%,#d9e2e4 48% 52%,transparent 53%);
}

/* Vehicle wrap design canvases */
.format-art[data-group-visual="fleet-vehicle-graphics"] .product-object {
  width: 68%; height: 31%; margin-top: 26px; border: 0;
  border-radius: 38% 48% 15% 14% / 70% 72% 30% 30%;
  background: linear-gradient(90deg,#ff9f36 0 29%,#f6f8f8 29% 56%,#15c4b5 56%);
  box-shadow: 0 13px 19px rgba(1,18,26,.36);
}
.format-art[data-group-visual="fleet-vehicle-graphics"] .product-object::before {
  left: 18%; top: -36%; width: 47%; height: 48%; border-radius: 60% 70% 0 0; background: #bce8eb; border: 4px solid #e5edef;
}
.format-art[data-group-visual="fleet-vehicle-graphics"] .product-object::after {
  left: 14%; bottom: -17px; width: 22px; height: 22px; border: 6px solid #182b34; border-radius: 50%; background: #aab9bf; box-shadow: 112px 0 0 -6px #aab9bf,112px 0 0 0 #182b34;
}
.format-art[data-product="wrap-van"] .product-object,
.format-art[data-product="wrap-box"] .product-object { height: 43%; border-radius: 10px 10px 4px 4px; }
.format-art[data-product="wrap-box"] .product-object::before { left: 2%; top: -8%; width: 70%; height: 18%; border-radius: 3px; }
.format-art[data-product="wrap-trailer"] .product-object { width: 79%; height: 42%; border-radius: 3px; }

/* Commercial print pieces */
.format-art[data-group-visual="marketing-print"] .product-object {
  width: 42%; height: 62%; border: 4px solid #fff; transform: rotate(-5deg);
  box-shadow: 12px 9px 0 rgba(245,249,249,.72),24px 18px 0 rgba(166,188,196,.55),0 19px 30px rgba(1,18,26,.3);
}
.format-art[data-product="business-card"] .product-object,
.format-art[data-product="postcard"] .product-object { width: 62%; height: 38%; }
.format-art[data-product="brochure"] .product-object {
  width: 64%; height: 55%; transform: none;
  background: linear-gradient(90deg,#17c1b3 0 33%,#fff 33% 66%,#ff9f36 66%);
  box-shadow: inset 33% 0 0 rgba(0,0,0,.08),0 18px 30px rgba(1,18,26,.3);
}
.format-art[data-product="menu"] .product-object { background: linear-gradient(135deg,#132b39 0 55%,#f4e2bd 55%); }
.format-art[data-product="sticker-sheet"] .product-object { background: radial-gradient(circle at 32% 35%,#ff9f36 0 16%,transparent 17%),radial-gradient(circle at 68% 62%,#19c7b8 0 18%,transparent 19%),#f8fbfb; }

/* Branded apparel imprint fields */
.format-art[data-group-visual="branded-apparel"] .product-object {
  width: 60%; height: 66%; border: 0; border-radius: 0;
  clip-path: polygon(20% 0,36% 8%,64% 8%,80% 0,100% 23%,82% 39%,75% 30%,75% 100%,25% 100%,25% 30%,18% 39%,0 23%);
  background: linear-gradient(145deg,#e8f0f1,#aabcc3);
}
.format-art[data-group-visual="branded-apparel"] .product-object::before {
  left: 32%; top: 25%; width: 36%; height: 38%; border: 2px dashed #ff9f36; background: linear-gradient(135deg,#16c3b4,#0e4352);
}
.format-art[data-product="hoodie"] .product-object { clip-path: polygon(25% 11%,35% 0,65% 0,75% 11%,100% 26%,84% 42%,76% 34%,76% 100%,24% 100%,24% 34%,16% 42%,0 26%); }
.format-art[data-product="hat"] .product-object {
  width: 60%; height: 45%; clip-path: none; border-radius: 70% 70% 10% 10%;
}
.format-art[data-product="hat"] .product-object::before { left: 20%; top: 35%; width: 35%; height: 26%; }
.format-art[data-product="hat"] .product-object::after { left: 55%; top: 72%; width: 55%; height: 20%; border-radius: 0 100% 100% 0; background: #93aab3; }

@media (max-width: 760px) {
  .design-format-card:has(.product-stage) { min-height: 268px; }
  .design-format-card:has(.product-stage) .format-card-copy { min-height: 150px; }
  .format-description { min-height: 24px; }
}