.cifpd{--teal:#087f86;--navy:#18334b;--coral:#f0715b;--ink:#193147;--muted:#687989;--line:#e4ebef;max-width:1180px;margin:28px auto;padding:clamp(18px,4vw,42px);border-radius:26px;background:linear-gradient(145deg,#f7fcff 0%,#fff8f3 100%);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;box-shadow:0 18px 55px #23496314}.cifpd *{box-sizing:border-box}.cifpd-head{text-align:center;margin:0 auto 30px;max-width:620px}.cifpd-kicker{display:inline-block;color:var(--teal);font-size:11px;letter-spacing:.16em;font-weight:800}.cifpd-head h2{font-size:clamp(26px,4vw,38px);line-height:1.12;margin:8px 0 10px;color:var(--navy);font-weight:800}.cifpd-head p{color:var(--muted);margin:0;font-size:15px}.cifpd-layout{display:grid;grid-template-columns:minmax(340px,1fr) minmax(310px,.88fr);gap:clamp(24px,4vw,54px);align-items:start}.cifpd-editor{padding:26px;background:#fff;border:1px solid #e7edf1;border-radius:20px;box-shadow:0 8px 28px #1e40520d}.cifpd-step{display:flex;gap:12px;align-items:center;margin-bottom:18px}.cifpd-step>b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e3f5f3;color:var(--teal);font-size:15px}.cifpd-step strong,.cifpd-step span{display:block}.cifpd-step strong{font-size:15px;color:var(--navy)}.cifpd-step span{font-size:12px;color:var(--muted);margin-top:2px}.cifpd-step-next{margin-top:25px}.cifpd-label,.cifpd-control>label{display:block;font-size:12px;font-weight:750;margin:0 0 7px;color:#43586a}.cifpd-model,.cifpd-customer input,.cifpd-text-options input[type=text],.cifpd-inline select{width:100%;min-height:45px;border:1px solid #d9e2e8;border-radius:10px;background:#fff;padding:10px 12px;color:var(--ink);font:inherit;font-size:14px}.cifpd-model:focus,.cifpd-customer input:focus,.cifpd-text-options input:focus{outline:2px solid #8bd4d0;outline-offset:1px}.cifpd-tools{display:flex;gap:10px;flex-wrap:wrap}.cifpd-button{border:0;border-radius:10px;min-height:44px;padding:11px 16px;font-weight:750;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s}.cifpd-button:hover{transform:translateY(-1px);box-shadow:0 5px 14px #123b4724}.cifpd-primary{background:var(--teal);color:#fff}.cifpd-secondary{background:#eaf2f7;color:var(--navy)}.cifpd-adjust{margin-top:22px;padding:16px;background:#f7fafb;border:1px solid #edf1f3;border-radius:13px}.cifpd-control{margin-bottom:17px}.cifpd-control:last-child{margin-bottom:0}.cifpd-control input[type=range]{width:calc(100% - 50px);vertical-align:middle;accent-color:var(--teal)}.cifpd-control output{display:inline-block;width:43px;text-align:right;font-size:12px;color:var(--muted)}.cifpd-inline{display:flex;gap:9px;align-items:center;margin-top:8px}.cifpd-inline select{flex:1}.cifpd-inline input[type=color]{width:42px;height:40px;border:1px solid #d9e2e8;border-radius:9px;background:white;padding:4px}.cifpd-remove{border:0;background:transparent;color:#b3473a;font-weight:700;cursor:pointer;padding:8px}.cifpd-text-options input:disabled,.cifpd-text-options select:disabled{opacity:.55}.cifpd-help{padding:12px 14px;margin-top:15px;border-radius:10px;background:#fff5e8;color:#78572f;font-size:12px;line-height:1.45}.cifpd-customer{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}.cifpd-customer label{font-size:12px;font-weight:700;color:#43586a}.cifpd-customer label:first-child{grid-column:1/-1}.cifpd-customer input{display:block;margin-top:6px;font-size:13px}.cifpd-submit{display:flex;justify-content:center;gap:14px;align-items:center;width:100%;margin-top:16px;min-height:50px;border:0;border-radius:11px;background:linear-gradient(100deg,var(--coral),#f28a65);color:#fff;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 7px 18px #e76f552b}.cifpd-submit:disabled{opacity:.7;cursor:wait}.cifpd-submit span{font-size:20px}.cifpd-status{min-height:20px;text-align:center;margin-top:10px;color:var(--teal);font-size:13px;font-weight:650}.cifpd-preview-wrap{position:sticky;top:24px;padding:20px;background:rgba(255,255,255,.74);border:1px solid #e7edf1;border-radius:20px}.cifpd-preview-title{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:10px;letter-spacing:.13em;font-weight:800;color:var(--teal)}.cifpd-model-name{font-size:11px;letter-spacing:0;color:var(--muted);font-weight:650;text-align:right}.cifpd-stage{display:grid;place-items:center;min-height:535px;margin:16px 0 10px;border-radius:16px;background:radial-gradient(ellipse at 50% 42%,#e8f7f5 0,#f5f5f2 55%,#eceff2 100%);overflow:hidden}.cifpd-insert-frame{position:relative;width:min(260px,70%);height:min(490px,75vh);min-height:420px;padding:12px;border-radius:38px;background:linear-gradient(120deg,#334352,#101a23 30%,#18242d 72%,#53606a);box-shadow:0 25px 45px #142b3d49, inset 0 0 0 2px #ffffff55;transition:border-radius .2s}.cifpd-selected-model{background:linear-gradient(120deg,#5f7584,#1c2b36 30%,#21323e 75%,#778b94)}.cifpd-canvas{display:block;width:100%;height:100%;border-radius:28px;background:linear-gradient(160deg,#fff7ed,#d2eeeb);touch-action:none;cursor:grab}.cifpd-canvas:active{cursor:grabbing}.cifpd-camera{position:absolute;z-index:2;left:19px;top:19px;width:64px;height:76px;border:5px solid #26343d;border-radius:18px;background:linear-gradient(135deg,#34434e,#16212a);box-shadow:0 2px 6px #0008;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;place-items:center;padding:8px}.cifpd-camera i{width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#81a0ad 0 9%,#14222a 15% 56%,#0c1217 60%);border:2px solid #60737c}.cifpd-camera i:last-child{grid-column:span 2;width:10px;height:10px;background:#e6d7b3;border:1px solid #66727a}.cifpd-preview-note{text-align:center;color:#738492;font-size:11px}.cifpd [hidden]{display:none!important}@media(max-width:800px){.cifpd{margin:12px auto;padding:18px;border-radius:18px}.cifpd-layout{grid-template-columns:1fr}.cifpd-preview-wrap{position:static;grid-row:1}.cifpd-preview-wrap{padding:16px}.cifpd-stage{min-height:410px}.cifpd-insert-frame{height:365px;min-height:350px;width:195px;border-radius:30px;padding:10px}.cifpd-canvas{border-radius:22px}.cifpd-camera{left:15px;top:15px;transform:scale(.8);transform-origin:top left}.cifpd-editor{padding:20px}.cifpd-customer{grid-template-columns:1fr}.cifpd-customer label:first-child{grid-column:auto}}@media(max-width:380px){.cifpd{padding:12px}.cifpd-editor{padding:15px}.cifpd-tools>*{flex:1}.cifpd-stage{min-height:370px}}

/* Model-specific visual templates and camera islands. */
.cifpd-insert-frame{height:min(510px,72vh);width:auto;min-height:0;aspect-ratio:var(--cifpd-ratio,.478);padding:12px}
.cifpd-canvas{border-radius:27px}
.cifpd-camera{left:6%;top:4%;width:29%;height:18%;padding:5px;border-width:4px;border-radius:23%;gap:5px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cifpd-camera i{width:100%;height:100%;max-width:24px;max-height:24px;border-width:2px;grid-column:auto;grid-row:auto}
.cifpd-camera i:nth-child(3){width:9px;height:9px;max-width:9px;max-height:9px;background:#e6d7b3;border:1px solid #66727a}
.cifpd-camera i:nth-child(4){display:none}
.cifpd-camera-vertical-dual{width:15%;height:25%;border-radius:28%;grid-template-columns:1fr;grid-template-rows:1fr 1fr 8px}
.cifpd-camera-vertical-dual i:nth-child(1),.cifpd-camera-vertical-dual i:nth-child(2){justify-self:center}
.cifpd-camera-diagonal-dual{width:27%;height:20%;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cifpd-camera-diagonal-dual i:nth-child(1){grid-area:1/1}.cifpd-camera-diagonal-dual i:nth-child(2){grid-area:2/2}.cifpd-camera-diagonal-dual i:nth-child(3){grid-area:1/2}
.cifpd-camera-square-triple{width:31%;height:23%;border-radius:24%;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.cifpd-camera-square-triple i:nth-child(1){grid-area:1/1}.cifpd-camera-square-triple i:nth-child(2){grid-area:1/2}.cifpd-camera-square-triple i:nth-child(3){grid-area:2/1}.cifpd-camera-square-triple i:nth-child(4){display:block;grid-area:2/2;width:9px;height:9px;background:#e6d7b3;border:1px solid #66727a}
.cifpd-camera-wide-triple{width:58%;height:18%;border-radius:22%;grid-template-columns:1fr 1fr 1fr 8px;grid-template-rows:1fr}
.cifpd-camera-wide-triple i:nth-child(1),.cifpd-camera-wide-triple i:nth-child(2),.cifpd-camera-wide-triple i:nth-child(3){grid-row:1}
.cifpd-camera-wide-triple i:nth-child(4){display:block;width:8px;height:8px;background:#e6d7b3;border:1px solid #66727a}
.cifpd-camera-air-pill{width:40%;height:12%;border-radius:35px;grid-template-columns:1fr 9px;grid-template-rows:1fr}
.cifpd-camera-air-pill i:first-child{grid-area:1/1}.cifpd-camera-air-pill i:nth-child(2){display:block;width:8px;height:8px;background:#e6d7b3;border:1px solid #66727a}.cifpd-camera-air-pill i:nth-child(3),.cifpd-camera-air-pill i:nth-child(4){display:none}
.cifpd-camera-single{width:19%;height:13%;border-radius:32%;grid-template-columns:1fr 8px;grid-template-rows:1fr}
.cifpd-camera-single i:first-child{grid-area:1/1}.cifpd-camera-single i:nth-child(2){display:block;width:8px;height:8px;background:#e6d7b3;border:1px solid #66727a}.cifpd-camera-single i:nth-child(3),.cifpd-camera-single i:nth-child(4){display:none}
@media(max-width:800px){.cifpd-insert-frame{height:min(395px,59vh);width:auto;min-height:0;padding:10px}.cifpd-canvas{border-radius:21px}.cifpd-camera{left:6%;top:4%;transform:none}}

/* Keep the visible artwork canvas at the exact model aspect ratio. The case
   frame is an overlay; padding inside an aspect-ratio box would distort it. */
.cifpd-insert-frame{padding:0!important;overflow:hidden}
.cifpd-insert-frame::after{content:"";position:absolute;z-index:3;inset:0;border:8px solid #263640;border-radius:inherit;box-shadow:inset 0 0 0 2px #ffffff55;pointer-events:none}
.cifpd-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
.cifpd-camera{z-index:4}
@media(max-width:800px){.cifpd-insert-frame{padding:0!important}.cifpd-canvas{border-radius:inherit}}

/* Camera lenses must remain round even when their grid cells are rectangular. */
.cifpd-camera i{width:min(100%,24px);height:auto;aspect-ratio:1/1;align-self:center;justify-self:center}
.cifpd-camera-square-triple i:nth-child(3),.cifpd-camera-wide-triple i:nth-child(3){width:min(100%,24px);height:auto;aspect-ratio:1/1}

/* Each iPhone receives a proportion-locked SVG camera module. */
.cifpd-camera{display:block;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;transform:none;pointer-events:none}
.cifpd-camera svg{display:block;width:100%;height:100%;overflow:visible}

/* The supplier template controls the case contour and camera cutout. */
.cifpd-insert-frame{padding:0!important;overflow:visible;background:transparent;border-radius:0;box-shadow:none;}
.cifpd-insert-frame::after{display:none!important;}
.cifpd-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:0;background:linear-gradient(155deg,#fff8ee,#d4efec);mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-size:100% 100%;-webkit-mask-size:100% 100%;}


@media(max-width:800px){.cifpd-insert-frame{padding:0!important}.cifpd-canvas{border-radius:0}}

/* Show a matte case surface behind the unchanged InnoSub insert. The small
   preview inset reveals case material around the exact mask and camera opening. */
.cifpd-insert-frame{position:relative;overflow:visible;background:linear-gradient(145deg,#52595f 0%,#363d43 54%,#252b30 100%);border-radius:13% / 6.5%;box-shadow:0 12px 24px #152b3e38;}
.cifpd-insert-frame::after{display:none!important;}
.cifpd-canvas{inset:1.4%;width:97.2%;height:97.2%;}

.cifpd-status a{display:inline-block;margin:8px 4px 0;padding:8px 12px;border-radius:8px;background:var(--navy);color:#fff;text-decoration:none;font-weight:750}
.cifpd-phone-upload{background:#eaf2f7;color:var(--navy)}
.cifpd-phone-panel{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px 18px;align-items:center;margin-top:14px;padding:16px;border:1px solid #dce8ee;border-radius:14px;background:#f8fcfd}
.cifpd-phone-panel>div:first-child{grid-column:1/-1}.cifpd-phone-panel strong{color:var(--navy);font-size:14px}.cifpd-phone-panel p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.45}
.cifpd-phone-qr{grid-row:2/5;grid-column:2;display:grid;place-items:center;min-height:190px;padding:8px;background:#fff;border:1px solid #e3ebef;border-radius:10px}
.cifpd-phone-qr svg{display:block;width:180px;height:180px;max-width:100%}.cifpd-phone-link{color:var(--teal);font-size:12px;font-weight:750;overflow-wrap:anywhere}.cifpd-phone-status{font-size:12px;color:var(--muted);line-height:1.4}.cifpd-phone-close{justify-self:start;border:0;background:transparent;color:var(--navy);font:inherit;font-size:12px;font-weight:750;text-decoration:underline;cursor:pointer}
@media(max-width:767px){.cifpd-phone-upload,.cifpd-phone-panel{display:none!important}}

/* Draw the case shell as its own layer so the matte finish remains visible
   around the INNOSUB insert and through the camera opening. The old supplier
   rim PNGs contained outline fragments on some models, so the shell no longer
   depends on those overlays. */
.cifpd-insert-frame{isolation:isolate;overflow:visible;background:transparent!important;border-radius:13% / 6.5%;box-shadow:none;}
.cifpd-insert-frame::before{content:none;position:absolute;z-index:0;inset:-3.5%;border-radius:16% / 8%;background:linear-gradient(145deg,#3c4145 0%,#24292d 55%,#111619 100%);box-shadow:0 10px 18px #152b3e38,inset 0 0 0 1px #687077;pointer-events:none;}
.cifpd-insert-frame.cifpd-selected-model::before{content:"";}
.cifpd-selected-model{background:transparent!important;}
.cifpd-canvas{z-index:1;inset:0;width:100%;height:100%;}
.cifpd-template-rim,.cifpd-camera{display:none!important;visibility:hidden!important;opacity:0!important;}



/* Remove all legacy camera/rim overlays left in cached shortcode markup. The mask and matte shell define the preview. */
.cifpd-insert-frame .cifpd-template-rim,.cifpd-insert-frame .cifpd-camera,.cifpd-insert-frame [class*="camera"],.cifpd-insert-frame [class*="rim"],.cifpd-insert-frame>img,.cifpd-insert-frame>svg{display:none!important;visibility:hidden!important;opacity:0!important}

/* The preview shell has only the canvas; discard cached overlay children. */
.cifpd-insert-frame>*:not(.cifpd-canvas){display:none!important;visibility:hidden!important;opacity:0!important}

/* Customer-selected print backgrounds, composited beneath uploaded photos/text. */
.cifpd-background-picker{min-width:0;margin:18px 0 0;padding:13px 14px 11px;border:1px solid #e4ebef;border-radius:13px;background:#fbfdfe}
.cifpd-background-picker legend{padding:0 5px;color:#43586a;font-size:12px;font-weight:750}
.cifpd-background-options{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cifpd-background-option{width:39px;height:39px;padding:3px;border:2px solid transparent;border-radius:50%;background:#fff;cursor:pointer;transition:transform .15s,border-color .15s;}
.cifpd-background-option:hover{transform:scale(1.08)}
.cifpd-background-option.is-active{border-color:var(--teal);box-shadow:0 0 0 2px #087f8622}
.cifpd-swatch{display:block;width:100%;height:100%;border-radius:50%;border:1px solid #142d3b24}
.swatch-soft-aqua{background:linear-gradient(145deg,#fff8ee,#eaf5e9 52%,#c5eeea)}
.swatch-ocean{background:linear-gradient(145deg,#12385b,#087f9a 55%,#74d9d0)}
.swatch-sunset{background:linear-gradient(145deg,#ffc2ae,#ff8a78 54%,#ffd37c)}
.swatch-tropical{background:linear-gradient(145deg,#d7f0cf,#52b69a 55%,#087f75)}
.swatch-lavender{background:linear-gradient(145deg,#f5e8ff,#d8c7f3 55%,#f8c9d5)}
.swatch-sand{background:linear-gradient(145deg,#fff0d6,#e7c99a 55%,#b9ded6)}
.swatch-midnight{background:linear-gradient(145deg,#101a31,#343a68 55%,#754c88)}
.cifpd-background-hint{margin:9px 0 0;color:var(--muted);font-size:11px;line-height:1.4}

/* Photo editor is self-contained and keeps edits local until Use edited photo. */
.cifpd-photo-editor{position:fixed;z-index:999999;inset:0;display:grid;place-items:center;padding:18px;background:rgba(13,27,39,.68);backdrop-filter:blur(5px)}
.cifpd-photo-editor-card{width:min(760px,100%);max-height:min(94vh,980px);overflow:auto;padding:20px;border-radius:19px;background:#fff;color:var(--ink);box-shadow:0 24px 80px #07172566}
.cifpd-photo-editor-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.cifpd-photo-editor-head strong,.cifpd-photo-editor-head span{display:block}.cifpd-photo-editor-head strong{font-size:19px;color:var(--navy)}.cifpd-photo-editor-head span{margin-top:4px;color:var(--muted);font-size:12px}
.cifpd-photo-cancel{flex:0 0 auto;border:0;background:transparent;color:var(--navy);font-size:26px;line-height:1;cursor:pointer}.cifpd-photo-stage{display:grid;place-items:center;max-height:48vh;overflow:hidden;border-radius:13px;background-color:#f3f5f7;background-image:linear-gradient(45deg,#dce2e6 25%,transparent 25%),linear-gradient(-45deg,#dce2e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#dce2e6 75%),linear-gradient(-45deg,transparent 75%,#dce2e6 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
.cifpd-photo-canvas{display:block;width:auto;height:auto;max-width:100%;max-height:48vh;touch-action:none;cursor:move}
.cifpd-photo-canvas.is-erasing{cursor:crosshair}
.cifpd-photo-edit-controls{display:grid;gap:11px;margin-top:15px}
.cifpd-photo-slider{display:grid;grid-template-columns:minmax(125px,1fr) minmax(120px,2fr) 42px;gap:10px;align-items:center;color:#43586a;font-size:12px;font-weight:700}
.cifpd-photo-slider input{width:100%;accent-color:var(--teal)}.cifpd-photo-slider output{text-align:right;color:var(--muted);font-weight:600}
.cifpd-photo-actions{display:flex;gap:8px;flex-wrap:wrap}.cifpd-photo-actions button,.cifpd-photo-row select{min-height:39px;border:1px solid #dbe5ea;border-radius:9px;padding:8px 10px;background:#f7fafb;color:var(--navy);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cifpd-photo-actions button.is-active{border-color:var(--teal);background:#e4f5f3;color:#086e74}.cifpd-photo-actions button:disabled{opacity:.45;cursor:not-allowed}
.cifpd-photo-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.cifpd-photo-row label{display:grid;gap:5px;color:#43586a;font-size:12px;font-weight:700}.cifpd-photo-row select{width:100%;background:#fff}
.cifpd-photo-editor-help{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
.cifpd-photo-editor-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.cifpd-photo-editor-footer button{min-height:43px;border:0;border-radius:10px;padding:10px 15px;font:inherit;font-size:13px;font-weight:750;cursor:pointer}.cifpd-cancel-secondary{background:#edf2f5;color:var(--navy)}.cifpd-photo-save{background:var(--teal);color:#fff}
@media(max-width:600px){.cifpd-photo-editor{padding:8px}.cifpd-photo-editor-card{max-height:96vh;padding:14px;border-radius:15px}.cifpd-photo-stage{max-height:38vh}.cifpd-photo-canvas{max-height:38vh}.cifpd-photo-slider{grid-template-columns:1fr 1.3fr 38px;gap:6px;font-size:11px}.cifpd-photo-actions{gap:6px}.cifpd-photo-actions button{flex:1 1 40%;padding:7px 5px;font-size:11px}}

/* Admin-managed graphic gallery, revealed after a phone model is chosen. */
.cifpd-graphic-picker{margin:18px 0 0;padding:14px;border:1px solid #e3ebef;border-radius:14px;background:#fbfdfe}
.cifpd-graphic-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}.cifpd-graphic-head strong,.cifpd-graphic-head span{display:block}.cifpd-graphic-head strong{color:var(--navy);font-size:14px}.cifpd-graphic-head span{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35}.cifpd-graphic-head label{flex:0 0 145px;color:#43586a;font-size:11px;font-weight:700}.cifpd-graphic-category{display:block;width:100%;min-height:37px;margin-top:4px;border:1px solid #d9e2e8;border-radius:8px;padding:6px 8px;background:#fff;color:var(--ink);font:inherit;font-size:12px}
.cifpd-graphic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:9px;max-height:300px;overflow:auto;padding:1px}
.cifpd-graphic-card{min-width:0;border:1px solid #e4ebef;border-radius:9px;padding:5px;background:#fff;color:var(--navy);text-align:center;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}.cifpd-graphic-card:hover,.cifpd-graphic-card:focus-visible{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 5px 14px #16384b17;outline:none}.cifpd-graphic-card img{display:block;width:100%;height:85px;object-fit:contain;border-radius:5px;background:linear-gradient(145deg,#f8fbfc,#eef4f6)}.cifpd-graphic-card span{display:block;margin-top:5px;font-size:10px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.cifpd-graphic-empty{margin:8px 0 0;color:var(--muted);font-size:12px}.cifpd-graphic-picker[hidden]{display:none!important}
@media(max-width:600px){.cifpd-graphic-head{align-items:stretch;flex-direction:column}.cifpd-graphic-head label{flex:auto}.cifpd-graphic-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:250px}.cifpd-graphic-card img{height:78px}}

/* Category button opens a dedicated, touch-friendly design gallery. */
.cifpd-graphic-picker{padding:0;border:0;background:transparent}
.cifpd-open-graphics{width:100%;justify-content:center}
.cifpd-graphic-modal{position:fixed;z-index:1000000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(13,27,39,.7);backdrop-filter:blur(5px)}
.cifpd-graphic-modal[hidden]{display:none!important}
.cifpd-graphic-modal-card{width:min(860px,100%);max-height:90vh;overflow:auto;padding:20px;border:1px solid #e4ebef;border-radius:18px;background:#fff;box-shadow:0 24px 80px #07172566}
.cifpd-graphic-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}.cifpd-graphic-head strong,.cifpd-graphic-head span{display:block}.cifpd-graphic-head strong{color:var(--navy);font-size:18px}.cifpd-graphic-head span{margin-top:4px;color:var(--muted);font-size:12px}.cifpd-graphic-close{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:50%;background:#edf2f5;color:var(--navy);font-size:25px;line-height:1;cursor:pointer}
.cifpd-graphic-categories{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 12px;scrollbar-width:thin}.cifpd-graphic-category-tab{flex:0 0 auto;min-height:37px;padding:8px 13px;border:1px solid #dfe8ec;border-radius:999px;background:#f8fbfc;color:#40576a;font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}.cifpd-graphic-category-tab.is-active{border-color:var(--teal);background:#e3f5f3;color:#086e74}
.cifpd-graphic-modal .cifpd-graphic-grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px;max-height:62vh}.cifpd-graphic-modal .cifpd-graphic-card{padding:8px}.cifpd-graphic-modal .cifpd-graphic-card img{height:135px}.cifpd-graphic-modal .cifpd-graphic-card span{font-size:12px}
.cifpd-graphic-modal .cifpd-graphic-empty{padding:22px;text-align:center}
@media(max-width:800px){
  .cifpd-item-selected .cifpd-editor{grid-row:2}
  .cifpd-preview-wrap{position:sticky!important;top:var(--cifpd-sticky-top,8px)!important;z-index:30;grid-row:1;width:100%;padding:8px 12px 7px;border-radius:0 0 16px 16px;background:rgba(255,255,255,.98);box-shadow:0 5px 16px #19314720;backdrop-filter:blur(7px)}
  .cifpd-preview-title{display:flex!important;justify-content:center;gap:3px;line-height:1.2}
  .cifpd-preview-title>span:first-child{font-size:9px}
  .cifpd-model-name{font-size:10px!important}
  .cifpd-model-dims{font-size:8px}
  .cifpd-stage{min-height:0!important;height:min(32vh,290px);margin:4px 0 0;overflow:visible;border-radius:8px;background:transparent}
  .cifpd-insert-frame{height:min(31vh,275px)!important;width:auto!important;min-height:0!important;max-height:31vh;aspect-ratio:var(--cifpd-ratio,.478)!important}
  .cifpd-default-mockup{max-height:min(30vh,270px);max-width:88%}
  .cifpd-preview-note{display:none!important}
  .cifpd-graphic-modal{padding:8px}.cifpd-graphic-modal-card{max-height:94vh;padding:14px;border-radius:15px}.cifpd-graphic-modal .cifpd-graphic-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:62vh;gap:8px}.cifpd-graphic-modal .cifpd-graphic-card{padding:5px}.cifpd-graphic-modal .cifpd-graphic-card img{height:92px}.cifpd-graphic-modal .cifpd-graphic-card span{font-size:10px}
}

/* Freely drawn crop window: no fixed portrait or landscape crop ratio. */
.cifpd-photo-stage{position:relative}
.cifpd-crop-overlay{position:absolute;z-index:2;box-sizing:border-box;border:2px dashed #fff;box-shadow:0 0 0 9999px #15233450,inset 0 0 0 1px #17212b;pointer-events:none}
.cifpd-crop-overlay::after{content:"";position:absolute;inset:-5px;background:radial-gradient(circle,#fff 0 3px,transparent 4px) left top/10px 10px,radial-gradient(circle,#fff 0 3px,transparent 4px) right top/10px 10px,radial-gradient(circle,#fff 0 3px,transparent 4px) left bottom/10px 10px,radial-gradient(circle,#fff 0 3px,transparent 4px) right bottom/10px 10px;background-repeat:no-repeat}
.cifpd-photo-clear-crop{min-height:39px;border:1px solid #dbe5ea;border-radius:9px;padding:8px 10px;background:#f7fafb;color:var(--navy);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cifpd-photo-clear-crop:disabled{opacity:.45;cursor:not-allowed}


/* Use the supplied single-phone mockup as the starting visual. Selecting a model swaps it for the editable live canvas. */
.cifpd-stage{position:relative}



.cifpd-has-model 
.cifpd-has-model .cifpd-insert-frame{display:block}
.cifpd-preview-wrap:not(.cifpd-has-model) .cifpd-insert-frame{display:none}
@media(max-width:800px){}

/* InnoSub mask-only canvas: the insert silhouette is the design surface and preview. */
.cifpd-stage{background:radial-gradient(ellipse at 50% 44%,#ffffff 0,#f8f5ee 62%,#eee9df 100%);}
.cifpd-insert-frame{position:relative!important;display:block!important;height:min(510px,72vh)!important;width:auto!important;max-width:94%!important;min-height:0!important;aspect-ratio:var(--cifpd-ratio,.478)!important;padding:0!important;overflow:visible!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;transition:none!important;}
.cifpd-insert-frame::after{display:none!important;content:none!important;}
.cifpd-canvas{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;background:transparent!important;touch-action:none;mask-repeat:no-repeat!important;-webkit-mask-repeat:no-repeat!important;mask-position:center!important;-webkit-mask-position:center!important;mask-size:100% 100%!important;-webkit-mask-size:100% 100%!important;z-index:1;filter:none;}
.cifpd-model-name{font-family:Georgia,"Times New Roman",serif!important;font-weight:800!important;color:#425c58!important;text-shadow:0 1px 0 #fff,0 2px 5px #3c5e5630!important;font-size:15px!important;letter-spacing:.01em!important;}
.cifpd-model-dims{display:block;flex:0 0 100%;text-align:center;color:#6e766f;font-size:11px;letter-spacing:0;font-weight:600;margin-top:3px;}
.cifpd-preview-title{flex-wrap:wrap;justify-content:center;row-gap:2px;text-align:center;}
.cifpd-preview-title>span:first-child{font-family:Georgia,"Times New Roman",serif;color:#456763;font-size:12px;letter-spacing:.16em;}
@media(max-width:800px){.cifpd-insert-frame{height:min(395px,59vh)!important;width:auto!important;max-width:94%!important;min-height:0!important;padding:0!important;}.cifpd-canvas{border-radius:0!important;}}

/* Raised InnoSub insert finish, based on the standalone neutral mockup. The
   live artwork remains the exact unscaled template; this backing is preview-only. */
.cifpd-insert-frame::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;transform:translateY(4px) scale(1.012);background:linear-gradient(112deg,#9f9e96 0%,#f7f4ec 13%,#b4b2a9 29%,#fffdf6 46%,#a5a49b 63%,#f5f2e9 84%,#8f8e86 100%);-webkit-mask-image:var(--cifpd-mask-url);mask-image:var(--cifpd-mask-url);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%;filter:drop-shadow(0 12px 12px #26332f40);}
.cifpd-canvas{z-index:1!important;filter:none!important;}

/* Fresh, versioned asset path for the supplied standalone insert mockup. */
.cifpd-default-mockup{display:block;width:auto;max-width:88%;height:auto;max-height:490px;object-fit:contain;filter:drop-shadow(0 12px 13px #26332f35);}
.cifpd-preview-wrap.cifpd-has-model .cifpd-default-mockup{display:none!important;}
.cifpd-preview-wrap:not(.cifpd-has-model) .cifpd-insert-frame{display:none!important;}
@media(max-width:800px){.cifpd-default-mockup{max-height:min(365px,54vh);max-width:88%;}}

/* Final mobile sizing wins over legacy template rules above. Keep the full
   mockup inside its sticky card so it cannot cover the model and edit controls. */
@media(max-width:800px){
  .cifpd-preview-wrap .cifpd-stage{height:29vh!important;min-height:0!important;overflow:hidden!important;margin:4px 0 0!important}
  .cifpd-preview-wrap .cifpd-default-mockup{width:auto!important;height:auto!important;max-height:25vh!important;max-width:90%!important}
  .cifpd-preview-wrap .cifpd-insert-frame{height:min(26vh,230px)!important;width:auto!important;max-height:26vh!important;min-height:0!important}
}