/* ---------- STEP BAR (inline pills, no connector) ---------- */
body.ah-designer ol.pccp-steps{
  flex:0 0 auto !important; height:52px !important; min-height:52px !important;
  margin:0 !important; padding:0 20px !important; list-style:none !important;
  display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important;
  gap:6px !important; background:var(--s1) !important; border-radius:0 !important;
  width:100% !important; max-width:none !important; position:relative !important; overflow:hidden !important;
}
body.ah-designer ol.pccp-steps::before,body.ah-designer ol.pccp-steps::after{ display:none !important; content:none !important; }
body.ah-designer li.pccp-step{
  flex:0 0 auto !important; display:inline-flex !important; flex-direction:row !important;
  align-items:center !important; justify-content:center !important; gap:8px !important;
  height:34px !important; padding:0 14px !important; margin:0 !important;
  background:transparent !important; border-radius:999px !important; position:relative !important; z-index:1 !important;
  transition:background .16s ease !important;
}
body.ah-designer li.pccp-step::before,body.ah-designer li.pccp-step::after{ display:none !important; content:none !important; }
body.ah-designer .pccp-step-num{
  width:22px !important; height:22px !important; min-width:22px !important; flex:0 0 22px !important;
  border-radius:50% !important; background:var(--s3) !important; color:var(--t2) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:11px !important; font-weight:800 !important; line-height:1 !important;
  transform:none !important; transition:background .16s,color .16s !important; padding:0 !important;
}
body.ah-designer .pccp-step-label{
  font-size:12.5px !important; font-weight:700 !important; line-height:1 !important;
  color:var(--t2) !important; white-space:nowrap !important; letter-spacing:-.01em !important;
}
body.ah-designer li.pccp-step.active{ background:var(--s0) !important; }
body.ah-designer li.pccp-step.active .pccp-step-num{ background:var(--ac) !important; color:#fff !important; }
body.ah-designer li.pccp-step.active .pccp-step-label{ color:var(--ac) !important; }
body.ah-designer li.pccp-step.completed .pccp-step-num{ background:var(--ac) !important; color:#fff !important; }
body.ah-designer li.pccp-step.completed .pccp-step-label{ color:var(--t1) !important; }
#ah-exit{ display:none !important; }

/* ===================================================================
   ACCESSORIES HUB - PHONE CASE DESIGNER
   Single source of truth. Flat UI: no borders, no box-shadows.
=================================================================== */

#pccp-customizer{
  --s0:#ffffff; --s1:#f6f8fb; --s2:#eef2f7; --s3:#e4e9f0;
  --t0:#151a25; --t1:#475569; --t2:#94a3b8;
  --ac:#406ba9; --ac-h:#35578d; --ac-s:#e8eff7;
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--t0);
}
#pccp-customizer *,#pccp-customizer *::before,#pccp-customizer *::after{ border:0 !important; box-shadow:none !important; outline:none !important; }
#pccp-customizer button{ font-family:inherit !important; }

/* ---------- FULL SCREEN APP SHELL ---------- */
body.ah-designer{ overflow:hidden !important; }
body.ah-designer .ah-header,body.ah-designer [data-elementor-type='header']{ position:relative !important; z-index:100002 !important; }
body.ah-designer .ah-footer,body.ah-designer [data-elementor-type='footer'],body.ah-designer footer.site-footer{ display:none !important; }
body.ah-designer #content.site-content,body.ah-designer .shoptimizer-archive,body.ah-designer .col-full{ padding:0 !important; margin:0 !important; max-width:none !important; width:100% !important; }
body.ah-designer #pccp-customizer{
  position:fixed !important; top:var(--ah-hdr,0px) !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100% !important; max-width:none !important; height:auto !important;
  margin:0 !important; padding:0 !important; border-radius:0 !important;
  background:var(--s0) !important; z-index:100001 !important;
  display:flex !important; flex-direction:column !important; overflow:hidden !important;
}

/* ---------- PANELS: only the active step ---------- */
body.ah-designer section.pccp-panel{ display:none !important; }
body.ah-designer section.pccp-panel.pccp-panel-active{
  display:flex !important; flex-direction:column !important;
  flex:1 1 auto !important; min-height:0 !important; height:auto !important;
  margin:0 !important; padding:0 !important; background:transparent !important; overflow:hidden !important;
}
body.ah-designer header.pccp-panel-head{ display:none !important; }

/* ---------- STEP 1 TOOLBAR: search left / filters right ---------- */
body.ah-designer div.pccp-device-search{ display:none !important; }
#ah-devbar{
  flex:0 0 auto !important; display:flex !important; align-items:center !important;
  justify-content:space-between !important; gap:16px !important;
  padding:16px 22px 14px !important; background:var(--s0) !important;
}
#ah-devbar .ah-devbar-search{ flex:1 1 auto !important; max-width:420px !important; }
#ah-devbar input{ width:100% !important; font-size:13.5px !important; font-weight:500 !important; color:var(--t0) !important; background:var(--s1) !important; border-radius:10px !important; padding:12px 16px !important; -webkit-appearance:none !important; }
#ah-devbar input::placeholder{ color:var(--t2) !important; }
#ah-devbar input:focus{ background:var(--ac-s) !important; }
#ah-devbar .pccp-device-tabs{ flex:0 0 auto !important; display:flex !important; align-items:center !important; gap:4px !important; margin:0 !important; padding:4px !important; background:var(--s1) !important; border-radius:10px !important; width:max-content !important; }
#ah-devbar .pccp-tab{ font-size:12.5px !important; font-weight:700 !important; line-height:1 !important; color:var(--t1) !important; background:transparent !important; padding:9px 20px !important; border-radius:7px !important; cursor:pointer !important; transition:background .15s,color .15s !important; }
#ah-devbar .pccp-tab:hover{ color:var(--t0) !important; }
#ah-devbar .pccp-tab.active{ background:var(--s0) !important; color:var(--ac) !important; }

/* ---------- SCROLL REGIONS ---------- */
body.ah-designer section.pccp-panel.pccp-panel-active .pccp-device-grid,
body.ah-designer section.pccp-panel.pccp-panel-active .pccp-material-grid,
body.ah-designer section.pccp-panel.pccp-panel-active .pccp-review-grid{
  flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important;
  margin:0 !important; align-content:start !important; background:var(--s0) !important;
}
body.ah-designer section.pccp-panel.pccp-panel-active .pccp-device-grid{ padding:0 22px 20px !important; }
body.ah-designer section.pccp-panel.pccp-panel-active .pccp-material-grid{ padding:20px 22px !important; }
body.ah-designer section.pccp-panel.pccp-panel-active .pccp-review-grid{ padding:20px 22px !important; }
body.ah-designer ::-webkit-scrollbar{ width:8px; height:8px; }
body.ah-designer ::-webkit-scrollbar-thumb{ background:#d5dde8; border-radius:99px; }
body.ah-designer ::-webkit-scrollbar-track{ background:transparent; }

/* ---------- FOOTER: pinned to bottom 0 ---------- */
body.ah-designer section.pccp-panel.pccp-panel-active footer.pccp-panel-foot{
  flex:0 0 auto !important; height:68px !important; min-height:68px !important;
  margin:0 !important; padding:0 22px !important; background:var(--s0) !important; border-radius:0 !important;
  display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; max-width:none !important;
}
body.ah-designer .pccp-panel-foot-spacer{ display:none !important; }
body.ah-designer section.pccp-panel.pccp-panel-active footer.pccp-panel-foot .pccp-btn-primary{ margin-left:auto !important; }

/* ---------- BUTTONS ---------- */
.pccp-btn{ font-size:13.5px !important; font-weight:700 !important; border-radius:999px !important; padding:12px 26px !important; cursor:pointer !important; transition:background .16s,color .16s !important; }
.pccp-btn-primary{ background:var(--ac) !important; color:#fff !important; }
.pccp-btn-primary:hover:not(:disabled){ background:var(--ac-h) !important; }
.pccp-btn-primary:disabled{ background:var(--s3) !important; color:var(--t2) !important; cursor:default !important; }
.pccp-btn-secondary,.pccp-btn-ghost{ background:var(--s1) !important; color:var(--t1) !important; }
.pccp-btn-secondary:hover,.pccp-btn-ghost:hover{ background:var(--s2) !important; color:var(--t0) !important; }

/* ---------- MATERIAL CARDS ---------- */
.pccp-material-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important; gap:12px !important; max-width:760px !important; margin:0 auto !important; }
.pccp-material-card{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:10px !important; background:var(--s1) !important; border-radius:14px !important; padding:22px 16px !important; cursor:pointer !important; text-align:center !important; transition:background .15s ease !important; }
.pccp-material-card:hover{ background:var(--s2) !important; }
.pccp-material-card.selected,.pccp-material-card.is-selected{ background:var(--ac-s) !important; }
.pccp-material-name{ font-size:14px !important; font-weight:800 !important; color:var(--t0) !important; }
.pccp-material-desc{ font-size:12.5px !important; color:var(--t1) !important; line-height:1.5 !important; }
.pccp-material-price{ font-size:12px !important; font-weight:700 !important; color:var(--ac) !important; background:var(--s0) !important; padding:5px 12px !important; border-radius:999px !important; }

/* ---------- STEP 3: sidebar + canvas ---------- */
body.ah-designer .pccp-design-layout{ flex:1 1 auto !important; min-height:0 !important; display:flex !important; flex-direction:row !important; gap:0 !important; width:100% !important; max-width:none !important; overflow:hidden !important; }
body.ah-designer .pccp-tools{ height:100% !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; background:var(--s1) !important; border-radius:0 !important; margin:0 !important; }
body.ah-designer .pccp-props,body.ah-designer .pccp-properties{ display:none !important; }
#pccp-canvas-wrap .canvas-container{ position:relative !important; margin:0 auto !important; }

.pccp-stage-hint{ display:none !important; }

/* ---------- SIDEBAR TOOLS ---------- */
.pccp-tool-nav{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:4px !important; background:var(--s0) !important; padding:5px !important; border-radius:12px !important; margin:0 0 18px !important; }
.pccp-tool-btn{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; height:62px !important; padding:0 2px !important; background:transparent !important; border-radius:9px !important; cursor:pointer !important; color:var(--t1) !important; transition:background .15s,color .15s !important; }
.pccp-tool-btn svg{ width:18px !important; height:18px !important; }
.pccp-tool-btn span{ font-size:10.5px !important; font-weight:700 !important; line-height:1 !important; }
.pccp-tool-btn:hover{ background:var(--s1) !important; color:var(--t0) !important; }
.pccp-tool-btn.active{ background:var(--ac-s) !important; color:var(--ac) !important; }
.pccp-tool-panel{ display:none !important; }
.pccp-tool-panel.active{ display:block !important; }
.pccp-tool-panel h3{ font-size:10.5px !important; font-weight:800 !important; letter-spacing:1.1px !important; text-transform:uppercase !important; color:var(--t2) !important; margin:0 0 9px !important; }
.pccp-tool-help{ font-size:12px !important; color:var(--t1) !important; line-height:1.55 !important; margin:0 0 12px !important; }
.pccp-upload-zone{ display:flex !important; flex-direction:column !important; align-items:center !important; gap:7px !important; background:var(--s0) !important; border-radius:12px !important; padding:26px 14px !important; cursor:pointer !important; color:var(--t2) !important; text-align:center !important; transition:background .15s,color .15s !important; }
.pccp-upload-zone:hover{ background:var(--ac-s) !important; color:var(--ac) !important; }
.pccp-upload-zone-title{ font-size:12.5px !important; font-weight:700 !important; color:var(--t0) !important; }
.pccp-upload-zone-sub{ font-size:11px !important; color:var(--t2) !important; line-height:1.45 !important; }
.pccp-tool-panel input[type=text],.pccp-tool-panel input[type=number],.pccp-tool-panel select,.pccp-tool-panel textarea{ width:100% !important; font-size:13px !important; color:var(--t0) !important; background:var(--s0) !important; border-radius:9px !important; padding:11px 13px !important; -webkit-appearance:none !important; }
.pccp-tool-panel label{ font-size:10.5px !important; font-weight:800 !important; letter-spacing:.9px !important; text-transform:uppercase !important; color:var(--t2) !important; display:block !important; margin:14px 0 7px !important; }
.pccp-tool-panel input[type=range]{ width:100% !important; accent-color:var(--ac) !important; background:transparent !important; }
.pccp-swatches,.pccp-color-grid{ display:grid !important; grid-template-columns:repeat(6,1fr) !important; gap:6px !important; }
.pccp-swatch{ aspect-ratio:1 !important; border-radius:8px !important; cursor:pointer !important; transition:transform .14s ease !important; }
.pccp-swatch:hover{ transform:scale(1.08) !important; }
.pccp-template-grid,.pccp-templates{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:7px !important; }
.pccp-template-grid img,.pccp-templates img{ width:100% !important; aspect-ratio:9/16 !important; object-fit:cover !important; border-radius:9px !important; display:block !important; cursor:pointer !important; background:var(--s2) !important; }
.pccp-template-cats{ display:flex !important; flex-wrap:wrap !important; gap:5px !important; margin:0 0 10px !important; }
.pccp-template-cats button{ font-size:11px !important; font-weight:700 !important; background:var(--s0) !important; color:var(--t1) !important; padding:6px 12px !important; border-radius:999px !important; cursor:pointer !important; }
.pccp-template-cats button.active{ background:var(--ac) !important; color:#fff !important; }
.pccp-canvas-actions,.pccp-actions-row{ display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:5px !important; margin-top:14px !important; }
.pccp-canvas-actions button,.pccp-actions-row button{ display:flex !important; align-items:center !important; justify-content:center !important; height:38px !important; background:var(--s0) !important; color:var(--t1) !important; border-radius:9px !important; cursor:pointer !important; font-size:13px !important; transition:background .15s,color .15s !important; }
.pccp-canvas-actions button:hover,.pccp-actions-row button:hover{ background:var(--ac-s) !important; color:var(--ac) !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1500px){ .pccp-device-grid{ grid-template-columns:repeat(7,minmax(0,1fr)) !important; } }
@media (max-width:1300px){ .pccp-device-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; } }
@media (max-width:1100px){ .pccp-device-grid{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } body.ah-designer .pccp-tools{ flex:0 0 268px !important; width:268px !important; } }
@media (max-width:900px){
  .pccp-device-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  #ah-devbar{ flex-wrap:wrap !important; gap:10px !important; padding:12px 14px 10px !important; }
  #ah-devbar .ah-devbar-search{ flex:1 1 100% !important; max-width:none !important; }
  #ah-devbar .pccp-device-tabs{ width:100% !important; justify-content:space-between !important; }
  #ah-devbar .pccp-tab{ flex:1 1 0 !important; text-align:center !important; padding:9px 8px !important; }
  body.ah-designer .pccp-design-layout{ flex-direction:column !important; }
  body.ah-designer .pccp-tools{ flex:0 0 auto !important; width:100% !important; max-height:40vh !important; padding:14px !important; }
  body.ah-designer ol.pccp-steps{ height:44px !important; min-height:44px !important; }
  body.ah-designer li.pccp-step{ font-size:11px !important; padding:0 7px !important; }
}
@media (max-width:600px){
  .pccp-device-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; }
  body.ah-designer .pccp-panel-active .pccp-device-grid{ padding:0 14px 16px !important; }
  body.ah-designer .pccp-panel-active footer.pccp-panel-foot{ padding:0 14px !important; height:62px !important; min-height:62px !important; }
  .pccp-btn{ padding:11px 20px !important; font-size:13px !important; }
}


/* ---------- DEVICE SECTIONS (one column) + MODEL GRID (8 per row) ---------- */
body.ah-designer .pccp-device-grid{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; }
body.ah-designer .pccp-device-section{ display:block !important; width:100% !important; max-width:none !important; margin:0 0 26px !important; }
body.ah-designer .pccp-device-section:last-child{ margin-bottom:0 !important; }
body.ah-designer .pccp-device-section.ah-hide{ display:none !important; }
body.ah-designer .pccp-device-section-title{
  display:block !important; width:100% !important;
  font-size:11px !important; font-weight:800 !important; letter-spacing:1.2px !important; text-transform:uppercase !important;
  color:var(--t2) !important; margin:0 0 10px !important; padding:0 !important;
}
body.ah-designer .pccp-device-cards{
  display:grid !important; grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  gap:10px !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important;
  align-items:stretch !important; justify-items:stretch !important;
}
body.ah-designer .pccp-device-card{
  display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important;
  gap:7px !important; width:100% !important; max-width:none !important; min-height:150px !important;
  padding:14px 8px 12px !important; background:var(--s1) !important; border-radius:12px !important;
  cursor:pointer !important; text-align:center !important; transition:background .15s ease !important;
}
body.ah-designer .pccp-device-card:hover{ background:var(--s2) !important; }
body.ah-designer .pccp-device-card.selected,body.ah-designer .pccp-device-card.is-selected,body.ah-designer .pccp-device-card.active{ background:var(--ac-s) !important; }
body.ah-designer .pccp-device-card.ah-hide{ display:none !important; }
body.ah-designer .pccp-device-card-name{ font-size:11.5px !important; font-weight:700 !important; line-height:1.3 !important; color:var(--t0) !important; }
body.ah-designer .pccp-device-card-meta{ font-size:9.5px !important; font-weight:500 !important; color:var(--t2) !important; line-height:1.2 !important; }
body.ah-designer .ah-empty{ text-align:center !important; padding:44px 12px !important; font-size:13px !important; color:var(--t2) !important; }
body.ah-designer .ah-empty.ah-hide{ display:none !important; }
@media (max-width:1500px){ body.ah-designer .pccp-device-cards{ grid-template-columns:repeat(7,minmax(0,1fr)) !important; } }
@media (max-width:1300px){ body.ah-designer .pccp-device-cards{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; } }
@media (max-width:1100px){ body.ah-designer .pccp-device-cards{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; } }
@media (max-width:900px){ body.ah-designer .pccp-device-cards{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } }
@media (max-width:600px){ body.ah-designer .pccp-device-cards{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; } body.ah-designer .pccp-device-card{ min-height:130px !important; padding:11px 6px 10px !important; } body.ah-designer .pccp-device-card-thumb{ height:62px !important; } }

/* ---------- DEVICE THUMBNAIL (fix: %-sized SVG needs a real height) ---------- */
body.ah-designer .pccp-device-card-thumb{
  flex:0 0 auto !important; height:86px !important; width:100% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important;
}
body.ah-designer .pccp-device-card-thumb svg{
  height:86px !important; width:auto !important; max-width:100% !important;
  display:block !important; flex:0 0 auto !important; overflow:visible !important;
}
body.ah-designer .pccp-device-card-thumb img{
  height:86px !important; width:auto !important; max-width:100% !important;
  object-fit:contain !important; display:block !important;
}
body.ah-designer .pccp-device-card-thumb svg *{ vector-effect:non-scaling-stroke !important; }
body.ah-designer .pccp-device-card{ min-height:168px !important; }
@media (max-width:600px){ body.ah-designer .pccp-device-card-thumb, body.ah-designer .pccp-device-card-thumb svg, body.ah-designer .pccp-device-card-thumb img{ height:68px !important; } body.ah-designer .pccp-device-card{ min-height:142px !important; } }

/* ---------- FULL SCREEN MODE ---------- */
body.ah-fs .ah-header, body.ah-fs [data-elementor-type='header'], body.ah-fs header.site-header{ display:none !important; }
body.ah-fs #wpadminbar{ display:none !important; }
body.ah-fs html{ margin-top:0 !important; }
body.ah-fs #pccp-customizer{ top:0 !important; }
#ah-fsbtn{
  position:absolute !important; right:14px !important; top:50% !important; transform:translateY(-50%) !important;
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  height:32px !important; padding:0 14px !important; margin:0 !important;
  background:var(--s0) !important; color:var(--t1) !important;
  border-radius:8px !important; cursor:pointer !important;
  font-size:11.5px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important;
  transition:background .16s,color .16s !important; z-index:3 !important;
}
#ah-fsbtn:hover{ background:var(--ac) !important; color:#fff !important; }
#ah-fsbtn svg{ flex:0 0 auto !important; }
body.ah-designer ol.pccp-steps{ padding-right:170px !important; }
@media (max-width:760px){ #ah-fsbtn span{ display:none !important; } #ah-fsbtn{ padding:0 !important; width:32px !important; justify-content:center !important; } body.ah-designer ol.pccp-steps{ padding-right:56px !important; } }

/* ---------- STEP 3: wider canvas, tighter sidebar ---------- */
body.ah-designer .pccp-design-layout{ padding:0 !important; margin:0 !important; gap:0 !important; }
body.ah-designer .pccp-tools{ flex:0 0 272px !important; width:272px !important; max-width:272px !important; padding:16px 14px !important; }
body.ah-designer 
/* ---------- SIDEBAR ALIGNMENT ---------- */
body.ah-designer .pccp-tool-nav{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:4px !important; background:var(--s0) !important; padding:4px !important; border-radius:11px !important; margin:0 0 16px !important; }
body.ah-designer .pccp-tool-btn{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; height:58px !important; padding:0 !important; margin:0 !important; background:transparent !important; border-radius:8px !important; cursor:pointer !important; color:var(--t1) !important; }
body.ah-designer .pccp-tool-btn svg{ width:17px !important; height:17px !important; }
body.ah-designer .pccp-tool-btn span{ font-size:10px !important; font-weight:700 !important; line-height:1 !important; }
body.ah-designer .pccp-tool-btn.active{ background:var(--ac-s) !important; color:var(--ac) !important; }
body.ah-designer .pccp-tool-panels{ display:block !important; }
body.ah-designer .pccp-tool-panel h3{ margin:0 0 8px !important; }
body.ah-designer .pccp-tool-help{ margin:0 0 12px !important; }
body.ah-designer .pccp-tool-panel > *{ max-width:100% !important; }
body.ah-designer .pccp-canvas-actions,body.ah-designer .pccp-actions-row{ display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:4px !important; margin:16px 0 0 !important; }
body.ah-designer .pccp-canvas-actions button,body.ah-designer .pccp-actions-row button{ height:36px !important; width:100% !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; background:var(--s0) !important; color:var(--t1) !important; border-radius:8px !important; }

/* ---- native canvas centring (3D layer disabled) ---- */

/* ---------- CANVAS STAGE: centre the phone in the full area ---------- */
body.ah-designer 
body.ah-designer #pccp-canvas-wrap .canvas-container{ position:relative !important; flex:0 0 auto !important; margin:0 auto !important; left:auto !important; top:auto !important; transform:none !important; background:transparent !important; border-radius:0 !important; }
body.ah-designer #pccp-canvas-wrap .canvas-container canvas{ display:block !important; }
body.ah-designer .pccp-stage-badge,body.ah-designer .pccp-canvas-label,body.ah-designer .pccp-device-chip{
  position:absolute !important; top:14px !important; left:18px !important; z-index:5 !important;
  margin:0 !important; background:rgba(255,255,255,.9) !important; border-radius:999px !important;
  padding:7px 14px !important; font-size:12px !important; font-weight:700 !important; color:var(--t1) !important;
}
@media (max-width:900px){ body.ah-designer #pccp-canvas-wrap{ padding:16px !important; } }

/* ============ FINAL LAYOUT (must stay last) ============ */
body.ah-designer .pccp-design-layout{ display:flex !important; flex-direction:row !important; flex:1 1 auto !important; width:100% !important; max-width:none !important; min-height:0 !important; gap:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; }
body.ah-designer .pccp-tools{ flex:0 0 272px !important; width:272px !important; max-width:272px !important; height:100% !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; background:var(--s1) !important; padding:16px 14px !important; margin:0 !important; border-radius:0 !important; }
body.ah-designer 
body.ah-designer #pccp-canvas-wrap .canvas-container{ position:relative !important; flex:0 0 auto !important; margin:0 !important; left:auto !important; top:auto !important; transform:none !important; background:transparent !important; }
body.ah-designer #pccp-canvas-wrap .canvas-container canvas{ display:block !important; }
@media (max-width:1100px){ body.ah-designer .pccp-tools{ flex:0 0 248px !important; width:248px !important; max-width:248px !important; } }
@media (max-width:900px){
  body.ah-designer .pccp-design-layout{ flex-direction:column !important; }
  body.ah-designer .pccp-tools{ flex:0 0 auto !important; width:100% !important; max-width:none !important; max-height:38vh !important; padding:14px !important; }
  body.ah-designer #pccp-canvas-wrap{ flex:1 1 auto !important; padding:14px !important; }
}

/* ============ HEIGHT CHAIN FIX (must stay last) ============ */
body.ah-designer #pccp-customizer{ height:auto !important; }
body.ah-designer section.pccp-panel.pccp-panel-active{ flex:1 1 auto !important; min-height:0 !important; height:auto !important; }
body.ah-designer .pccp-design-layout{ flex:1 1 auto !important; min-height:0 !important; height:auto !important; align-items:stretch !important; }
body.ah-designer .pccp-tools{ height:auto !important; align-self:stretch !important; min-height:0 !important; }
body.ah-designer 
body.ah-designer #pccp-canvas-wrap .canvas-container{ position:relative !important; flex:0 0 auto !important; margin:0 !important; left:auto !important; top:auto !important; transform:none !important; background:transparent !important; }
body.ah-designer #pccp-canvas-wrap .canvas-container canvas{ display:block !important; }
body.ah-designer #pccp-canvas-wrap > .pccp-stage-badge,body.ah-designer #pccp-canvas-wrap > .pccp-canvas-label{ position:absolute !important; top:12px !important; left:16px !important; z-index:5 !important; margin:0 !important; }
@media (max-width:900px){
  body.ah-designer .pccp-design-layout{ flex-direction:column !important; }
  body.ah-designer .pccp-tools{ flex:0 0 auto !important; align-self:auto !important; width:100% !important; max-width:none !important; max-height:38vh !important; }
  body.ah-designer #pccp-canvas-wrap{ flex:1 1 0% !important; align-self:auto !important; padding:14px !important; }
}

/* ============ REAL STAGE FIX: .pccp-stage is the flex column ============ */
body.ah-designer .pccp-design-layout{ display:flex !important; flex-direction:row !important; align-items:stretch !important; flex:1 1 auto !important; min-height:0 !important; height:auto !important; width:100% !important; max-width:none !important; gap:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; }
body.ah-designer .pccp-design-layout > aside.pccp-tools{ flex:0 0 272px !important; width:272px !important; max-width:272px !important; min-width:0 !important; height:auto !important; align-self:stretch !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; background:var(--s1) !important; padding:16px 14px !important; margin:0 !important; border-radius:0 !important; }
body.ah-designer .pccp-design-layout > aside.pccp-properties{ display:none !important; }
body.ah-designer .pccp-design-layout > .pccp-stage{
  flex:1 1 0% !important; width:auto !important; min-width:0 !important; max-width:none !important;
  height:auto !important; align-self:stretch !important; min-height:0 !important; max-height:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:24px !important; margin:0 !important; box-sizing:border-box !important;
  position:relative !important; overflow:hidden !important; border-radius:0 !important;
  background:radial-gradient(ellipse at 50% 12%, #ffffff 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg,#f4f7fa 0%,#e9eef4 62%,#dee4ec 100%) !important;
}
body.ah-designer 
body.ah-designer #pccp-canvas-wrap .canvas-container{ position:relative !important; margin:0 !important; left:auto !important; top:auto !important; transform:none !important; background:transparent !important; }
body.ah-designer #pccp-canvas-wrap canvas{ display:block !important; }
@media (max-width:1100px){ body.ah-designer .pccp-design-layout > aside.pccp-tools{ flex:0 0 248px !important; width:248px !important; max-width:248px !important; } }
@media (max-width:900px){
  body.ah-designer .pccp-design-layout{ flex-direction:column !important; }
  body.ah-designer .pccp-design-layout > aside.pccp-tools{ flex:0 0 auto !important; width:100% !important; max-width:none !important; max-height:38vh !important; align-self:auto !important; }
  body.ah-designer .pccp-design-layout > .pccp-stage{ flex:1 1 0% !important; align-self:auto !important; padding:14px !important; }
}

/* ============ STAGE INTERNALS (correct classes) ============ */
body.ah-designer .pccp-design-layout > .pccp-stage{
  flex:1 1 0% !important; width:auto !important; min-width:0 !important; max-width:none !important;
  height:auto !important; align-self:stretch !important; min-height:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:56px 24px 24px !important; margin:0 !important; box-sizing:border-box !important;
  position:relative !important; overflow:hidden !important;
  background:radial-gradient(ellipse at 50% 12%, #ffffff 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg,#f4f7fa 0%,#e9eef4 62%,#dee4ec 100%) !important;
}
body.ah-designer .pccp-stage-info{
  position:absolute !important; top:14px !important; left:50% !important; transform:translateX(-50%) !important;
  z-index:6 !important; margin:0 !important; display:flex !important; align-items:center !important; gap:7px !important;
  background:rgba(255,255,255,.92) !important; border-radius:999px !important; padding:7px 16px !important;
  font-size:12.5px !important; font-weight:700 !important; color:var(--t1) !important; white-space:nowrap !important;
}
body.ah-designer .pccp-stage-hint{ position:absolute !important; bottom:12px !important; left:50% !important; transform:translateX(-50%) !important; z-index:5 !important; margin:0 !important; font-size:11.5px !important; color:var(--t2) !important; text-align:center !important; max-width:80% !important; }
body.ah-designer .pccp-float-bar{
  position:absolute !important; top:14px !important; right:16px !important; left:auto !important;
  z-index:7 !important; display:flex !important; align-items:center !important; gap:4px !important;
  background:rgba(255,255,255,.95) !important; border-radius:10px !important; padding:5px !important; margin:0 !important;
}
body.ah-designer .pccp-float-bar.pccp-is-hidden{ display:none !important; }
body.ah-designer .pccp-float-bar button{ width:32px !important; height:32px !important; display:flex !important; align-items:center !important; justify-content:center !important; background:transparent !important; color:var(--t1) !important; border-radius:7px !important; cursor:pointer !important; padding:0 !important; }
body.ah-designer .pccp-float-bar button:hover{ background:var(--ac-s) !important; color:var(--ac) !important; }
body.ah-designer 
body.ah-designer #pccp-canvas-wrap .canvas-container{ position:relative !important; margin:0 !important; transform:none !important; background:transparent !important; }
body.ah-designer #pccp-canvas-wrap canvas{ display:block !important; touch-action:none !important; }
body.ah-designer .pccp-stage-info,body.ah-designer .pccp-stage-hint{ pointer-events:none !important; }
body.ah-designer .pccp-float-bar,body.ah-designer .pccp-float-bar *{ pointer-events:auto !important; }

/* ============ SIDEBAR: correct action-bar class ============ */
body.ah-designer .pccp-design-actions{ display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:5px !important; margin:16px 0 0 !important; padding:0 !important; }
body.ah-designer .pccp-design-actions button{ display:flex !important; align-items:center !important; justify-content:center !important; height:38px !important; width:100% !important; padding:0 !important; margin:0 !important; background:var(--s0) !important; color:var(--t1) !important; border-radius:9px !important; cursor:pointer !important; font-size:15px !important; line-height:1 !important; transition:background .15s,color .15s !important; }
body.ah-designer .pccp-design-actions button:hover{ background:var(--ac-s) !important; color:var(--ac) !important; }
body.ah-designer .pccp-design-actions button:active{ background:var(--ac) !important; color:#fff !important; }
body.ah-designer aside.pccp-tools{ display:flex !important; flex-direction:column !important; }
body.ah-designer .pccp-tool-nav{ flex:0 0 auto !important; }
body.ah-designer .pccp-tool-panels{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; }
body.ah-designer .pccp-design-actions{ flex:0 0 auto !important; }
body.ah-designer .pccp-field{ display:block !important; margin:12px 0 0 !important; }
body.ah-designer .pccp-field > span{ display:block !important; font-size:10.5px !important; font-weight:800 !important; letter-spacing:.9px !important; text-transform:uppercase !important; color:var(--t2) !important; margin:0 0 6px !important; }
body.ah-designer .pccp-field input[type=color]{ width:100% !important; height:38px !important; padding:3px !important; background:var(--s0) !important; border-radius:9px !important; cursor:pointer !important; }
body.ah-designer .pccp-swatches{ display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:7px !important; }
body.ah-designer .pccp-swatch{ aspect-ratio:1 !important; width:100% !important; border-radius:9px !important; cursor:pointer !important; padding:0 !important; transition:transform .14s ease !important; }
body.ah-designer .pccp-swatch:hover{ transform:scale(1.07) !important; }
body.ah-designer aside.pccp-tools *{ pointer-events:auto !important; }

/* ============ STAGE CENTRING + PAN (final) ============ */
body.ah-designer .pccp-design-layout > .pccp-stage{
  display:grid !important; place-items:center !important; place-content:center !important;
  overflow:auto !important; overscroll-behavior:contain !important;
  padding:56px 24px 30px !important;
}
body.ah-designer .pccp-design-layout > .pccp-stage::-webkit-scrollbar{ width:9px; height:9px; }
body.ah-designer .pccp-design-layout > .pccp-stage::-webkit-scrollbar-thumb{ background:#cfd8e4; border-radius:99px; }
body.ah-designer .pccp-design-layout > .pccp-stage::-webkit-scrollbar-track{ background:transparent; }
body.ah-designer 


/* ============ GLOSSY CASE PREVIEW (click outside design) ============ */
#pccp-customizer .canvas-container.ah-gloss{
  border-radius:var(--ah-cr,46px) !important; overflow:hidden !important;
  box-shadow:0 44px 80px -26px rgba(15,23,42,.40), 0 18px 34px -16px rgba(15,23,42,.26), 0 4px 10px rgba(15,23,42,.10) !important;
  transition:border-radius .18s ease, box-shadow .18s ease !important;
}
#pccp-customizer .canvas-container.ah-gloss::before{
  content:'' !important; position:absolute !important; inset:0 !important; z-index:9 !important;
  pointer-events:none !important; border-radius:inherit !important;
  background:linear-gradient(112deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 14%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 66%, rgba(255,255,255,.07) 85%, rgba(255,255,255,.16) 100%) !important;
}
#pccp-customizer .canvas-container.ah-gloss::after{
  content:'' !important; position:absolute !important; inset:0 !important; z-index:9 !important;
  pointer-events:none !important; border-radius:inherit !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.10) 5%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,.10) 95%, rgba(0,0,0,.32) 100%),
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,0) 6%, rgba(0,0,0,0) 88%, rgba(0,0,0,.16) 96%, rgba(0,0,0,.26) 100%),
    radial-gradient(ellipse 140% 100% at 50% 50%, rgba(0,0,0,0) 68%, rgba(0,0,0,.14) 100%) !important;
  box-shadow:inset 0 0 42px rgba(0,0,0,.18) !important;
}
#pccp-customizer .canvas-container.ah-gloss canvas{ border-radius:inherit !important; }

/* ---- wrapped side walls (preview) ---- */
#pccp-customizer .canvas-container.ah-gloss{ overflow:visible !important; }
#pccp-customizer .canvas-container.ah-gloss .ah-wrap{
  position:absolute !important; top:0 !important; bottom:0 !important; z-index:8 !important;
  pointer-events:none !important; background-repeat:no-repeat !important;
  border-radius:inherit !important; overflow:hidden !important;
}
#pccp-customizer .canvas-container.ah-gloss .ah-wrap--l{ border-radius:var(--ah-cr,46px) 0 0 var(--ah-cr,46px) !important; }
#pccp-customizer .canvas-container.ah-gloss .ah-wrap--r{ border-radius:0 var(--ah-cr,46px) var(--ah-cr,46px) 0 !important; }
#pccp-customizer .canvas-container.ah-gloss .ah-wrap--l::after{
  content:'' !important; position:absolute !important; inset:0 !important; pointer-events:none !important;
  background:linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.40) 30%, rgba(0,0,0,.14) 66%, rgba(255,255,255,.12) 100%) !important;
}
#pccp-customizer .canvas-container.ah-gloss .ah-wrap--r::after{
  content:'' !important; position:absolute !important; inset:0 !important; pointer-events:none !important;
  background:linear-gradient(270deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.40) 30%, rgba(0,0,0,.14) 66%, rgba(255,255,255,.12) 100%) !important;
}



/* ---- clip the canvas to the case silhouette ---- */
body.ah-designer #pccp-canvas-wrap .canvas-container{ background:transparent !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; }
body.ah-designer #pccp-canvas-wrap .canvas-container canvas{ background:transparent !important; border-radius:0 !important; }
body.ah-designer #pccp-canvas-wrap{ background:transparent !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; padding:0 !important; }
body.ah-designer .pccp-design-layout > .pccp-stage{ background:radial-gradient(ellipse at 50% 12%, #ffffff 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg,#f4f7fa 0%,#e9eef4 62%,#dee4ec 100%) !important; }

/* ==== FINAL: centre the phone, no scrolling ==== */
body.ah-designer .pccp-design-layout > .pccp-stage{
  display:grid !important; place-items:center !important; place-content:center !important;
  grid-template-columns:none !important; column-gap:0 !important;
  overflow:hidden !important;
  padding:20px !important; box-sizing:border-box !important;
  min-height:0 !important; height:auto !important; align-self:stretch !important;
}
body.ah-designer #pccp-canvas-wrap{ grid-area:1/1 !important; justify-self:center !important; align-self:center !important; margin:0 !important; }
body.ah-designer #pccp-canvas-wrap, body.ah-designer #pccp-canvas-wrap .canvas-container{ background:none !important; box-shadow:none !important; border-radius:0 !important; }




/* ==== RENDER CANVAS (frame ratio, print-box mapped) ==== */
body.ah-designer .pccp-design-layout > .pccp-stage{ display:grid !important; place-items:center !important; place-content:center !important; overflow:hidden !important; padding:20px !important; box-sizing:border-box !important; }
body.ah-designer #pccp-canvas-wrap{ position:relative !important; display:block !important; overflow:visible !important; background:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 !important; line-height:0 !important; }
body.ah-designer #ah-render{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; z-index:6 !important; pointer-events:none !important; display:block !important; filter:drop-shadow(0 26px 44px rgba(15,23,42,.28)) !important; }
body.ah-designer #pccp-canvas-wrap .canvas-container{ z-index:7 !important; background:none !important; pointer-events:auto !important; }
body.ah-designer #pccp-canvas-wrap canvas.lower-canvas{ opacity:0 !important; }
body.ah-designer #pccp-canvas-wrap canvas.upper-canvas{ opacity:1 !important; pointer-events:auto !important; }
body.ah-designer .ah-layer, body.ah-designer #ah-preview, body.ah-designer #ah-wrapguide, body.ah-designer #ah-safe, body.ah-designer #ah-corner, body.ah-designer #ah-prevbtn, body.ah-designer #ah-l-die{ display:none !important; }

/* ==== FIX: wrapper must hold its inline size with absolute children ==== */
body.ah-designer #pccp-canvas-wrap{ display:block !important; flex:0 0 auto !important; align-self:center !important; justify-self:center !important; min-width:0 !important; min-height:0 !important; }
body.ah-designer #ah-render{ position:relative !important; inset:auto !important; display:block !important; width:100% !important; height:100% !important; }
body.ah-designer #pccp-canvas-wrap .canvas-container{ position:absolute !important; }

/* ==== SIZE LOCK: canvas must never exceed its wrapper ==== */
body.ah-designer #pccp-canvas-wrap{ box-sizing:border-box !important; max-width:100% !important; max-height:100% !important; overflow:visible !important; }
body.ah-designer #ah-render{ position:absolute !important; left:0 !important; top:0 !important; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; display:block !important; }

/* ==== FINAL SIZE RULE (JS sets px; nothing may override) ==== */
body.ah-designer #pccp-canvas-wrap{ position:relative !important; display:block !important; box-sizing:border-box !important; overflow:visible !important; background:none !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 !important; line-height:0 !important; }
body.ah-designer #ah-render{ position:absolute !important; left:0 !important; top:0 !important; right:0 !important; bottom:0 !important; width:100% !important; height:100% !important; display:block !important; z-index:6 !important; pointer-events:none !important; filter:drop-shadow(0 24px 40px rgba(15,23,42,.26)) !important; }
body.ah-designer #pccp-canvas-wrap .canvas-container{ position:absolute !important; z-index:7 !important; background:none !important; pointer-events:auto !important; }
body.ah-designer #pccp-canvas-wrap canvas.lower-canvas{ opacity:0 !important; }
body.ah-designer #pccp-canvas-wrap canvas.upper-canvas{ opacity:1 !important; pointer-events:auto !important; }


/* ==== STANDALONE ENGINE (verbatim CSS, scoped) ==== */
body.ah-designer #pccp-canvas-wrap{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; overflow:hidden !important; }
body.ah-designer #ah-render{ display:none !important; }
body.ah-designer .pccp-design-layout > .pccp-stage{ display:flex !important; align-items:center !important; justify-content:center !important; overflow:auto !important; padding:16px !important; }
body.ah-designer #ah-std-host{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; }
body.ah-designer #ah-std-host #controls{ display:none !important; }
 body.ah-designer .stage {
    position: relative;
    width: 620px;
    max-width: 92vw;
    aspect-ratio: 1474 / 1986;
    touch-action: none;
    user-select: none;
  } body.ah-designer .phone { position: absolute; pointer-events: none; } body.ah-designer #designCanvas,
  #guidesImage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
  } body.ah-designer #designCanvas {
    z-index: 1;
    transition: filter .2s ease;
  } body.ah-designer /* In the finished view the canvas holds a die-cut silhouette on
     transparency, so a drop shadow traces the case outline itself. */
  .stage.finished #designCanvas {
    filter: drop-shadow(0 20px 34px rgba(15,20,40,.26));
  } body.ah-designer #guidesImage {
    z-index: 10;
    opacity: 1;
    transition: opacity .2s ease;
  } body.ah-designer /* Production guides only appear while artwork is being positioned. */
  .stage.finished #guidesImage { opacity: 0; } body.ah-designer #overlayCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
  }

body.ah-designer #ah-std-host #stage{ pointer-events:auto !important; }
body.ah-designer #ah-std-host #overlayCanvas{ pointer-events:none !important; }

/* ============================================================================
   PCCP v3 COMPAT, raster compositor  (added 2026-08-13)

   Phone Case Customizer Pro 3.0.0 replaced the Fabric vector canvas with a
   layer compositor, and the step-3 markup changed shape:

     v2   .pccp-design-layout > .pccp-stage            <- was the flex column
     v3   .pccp-design-layout > .pccp-stage-col         <- now the flex column
                                 └ .pccp-canvas-wrap
                                    └ .pccp-stage       <- now the mockup frame

   Every rule above that targets `.pccp-design-layout > .pccp-stage` (including
   the block headed "REAL STAGE FIX: .pccp-stage is the flex column") therefore
   stopped matching, which left the column unsized and the case clipped.

   This block re-points those rules at .pccp-stage-col and restores the
   properties panel, which in v3 carries the transform, layer and text controls
   rather than being the redundant sidebar it was in v2.

   Nothing above is edited, this section simply wins by being last.
   ========================================================================= */

/* --- the flex column ------------------------------------------------------ */
body.ah-designer .pccp-design-layout > .pccp-stage-col {
	flex: 1 1 0% !important;
	align-self: stretch !important;
	min-width: 0 !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 14px 16px !important;
	margin: 0 !important;
	overflow: hidden !important;
	position: relative !important;
	box-sizing: border-box !important;
	background:
		radial-gradient(ellipse at 50% 12%, #ffffff 0%, rgba(255,255,255,0) 55%),
		linear-gradient(180deg, #f4f7fa 0%, #e9eef4 62%, #dee4ec 100%) !important;
}

/* --- the canvas well fills the column; the column paints the backdrop ----- */
body.ah-designer .pccp-stage-col > .pccp-canvas-wrap {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	width: 100% !important;
	padding: 6px !important;
	margin: 0 !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

/* The frame itself. Explicit width/height are written by fitStage() so the
   case fits this bounded height; leave both alone here. */
body.ah-designer .pccp-stage-col .pccp-stage {
	margin: auto !important;
	/* Deliberately NOT overriding max-width: the plugin caps the stage at 620px
	   so it does not balloon on a wide screen, and fitStage() clamps to the
	   container anyway. An earlier `max-width: 100%` here defeated that cap and
	   let the stage grow to the full column width. */
}

/* --- chrome that the skin had hidden or repositioned for v2 --------------- */
body.ah-designer .pccp-stage-col > .pccp-stage-info {
	position: static !important;
	flex: 0 0 auto !important;
	z-index: 5 !important;
}
body.ah-designer .pccp-stage-col > .pccp-float-bar {
	position: static !important;
	flex: 0 0 auto !important;
}
/* Status readout ("Ready", "Artwork added", asset errors) lives here in v3. */
body.ah-designer .pccp-stage-col > .pccp-stage-hint {
	display: block !important;
	position: static !important;
	transform: none !important;
	flex: 0 0 auto !important;
	max-width: 100% !important;
	bottom: auto !important;
	left: auto !important;
}

/* --- properties panel restored as the right column ------------------------ */
body.ah-designer .pccp-props,
body.ah-designer .pccp-properties,
body.ah-designer .pccp-design-layout > aside.pccp-properties {
	display: block !important;
	flex: 0 0 252px !important;
	width: 252px !important;
	max-width: 252px !important;
	min-width: 0 !important;
	align-self: stretch !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	margin: 0 !important;
	padding: 16px 14px !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: var(--s1, #fff) !important;
}
body.ah-designer .pccp-properties * { pointer-events: auto !important; }

/* --- belt and braces: never show a second renderer in the stage ---------- */
body.ah-designer #ah-std-host { display: none !important; }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1280px) {
	body.ah-designer .pccp-design-layout > aside.pccp-properties {
		flex: 0 0 226px !important; width: 226px !important; max-width: 226px !important;
	}
}
@media (max-width: 980px) {
	body.ah-designer .pccp-design-layout { flex-direction: column !important; }
	body.ah-designer .pccp-design-layout > .pccp-stage-col {
		flex: 1 1 auto !important; align-self: auto !important; padding: 10px !important;
	}
	body.ah-designer .pccp-design-layout > aside.pccp-properties {
		flex: 0 0 auto !important; width: 100% !important; max-width: none !important;
		align-self: auto !important; max-height: 34vh !important;
	}
}

/* ===================================================================
   v3.1, REVIEW LAYOUT + MOBILE APP SHELL
   Appended last on purpose. Everything above is !important, so the
   plugin's own stylesheet cannot reach these elements; the corrections
   have to live here, where later-wins settles the tie.
=================================================================== */

/* ---------- Step 4: bounded, centred, sticky price column ----------
   The scroll-region rule above stretches the grid to the full panel
   width and drops its auto margins, which is what left a preview card
   twice the width of the case and a matching void beside the price. */
body.ah-designer section.pccp-panel.pccp-panel-active .pccp-review-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 340px !important;
  gap:24px !important;
  width:100% !important;
  max-width:1040px !important;
  margin:0 auto !important;
  padding:20px 22px 28px !important;
}
body.ah-designer .pccp-review-preview{ min-width:0 !important; }
body.ah-designer .pccp-final-preview{ padding:14px !important; }
body.ah-designer .pccp-final-preview img{
  max-height:min(56vh,500px) !important; width:auto !important; max-width:100% !important;
}
body.ah-designer .pccp-review-side{
  position:sticky !important; top:0 !important; align-self:start !important;
}

@media (max-width:980px){
  body.ah-designer section.pccp-panel.pccp-panel-active .pccp-review-grid{
    grid-template-columns:1fr !important; max-width:620px !important;
  }
  body.ah-designer .pccp-review-side{ position:static !important; }
}
@media (max-width:768px){
  body.ah-designer section.pccp-panel.pccp-panel-active .pccp-review-grid{
    padding:14px 12px 22px !important; gap:14px !important;
  }
  body.ah-designer .pccp-final-preview img{ max-height:46vh !important; }
}

/* ---------- Step 3 on a phone: sheets, not stacked panels ---------- */
@media (max-width:768px){

  /* The bottom tab bar is the tool switcher now. */
  body.ah-designer .pccp-tool-nav{ display:none !important; }
  body.ah-designer .pccp-sheet-head{ display:flex !important; }

  body.ah-designer .pccp-design-layout{
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important; min-height:0 !important;
  }
  body.ah-designer .pccp-design-layout > .pccp-stage-col{
    flex:1 1 auto !important; min-height:0 !important; width:100% !important;
    max-width:none !important; align-self:auto !important; padding:0 8px !important;
  }

  /* Both panels become bottom sheets. The rules above pin them into the
     flex row with fixed widths and their own scrolling, so every one of
     those has to be undone here. */
  body.ah-designer .pccp-tools,
  body.ah-designer aside.pccp-tools,
  body.ah-designer .pccp-design-layout > aside.pccp-tools,
  body.ah-designer .pccp-properties,
  body.ah-designer .pccp-design-layout > aside.pccp-properties{
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    z-index:80 !important;
    flex:0 0 auto !important;
    width:100% !important; max-width:none !important; min-width:0 !important;
    height:auto !important; min-height:0 !important; max-height:62dvh !important;
    margin:0 !important; border:0 !important;
    border-radius:18px 18px 0 0 !important;
    background:var(--s0) !important;
    box-shadow:0 -10px 34px rgba(0,0,0,.20) !important;
    display:flex !important; flex-direction:column !important;
    align-self:auto !important;
    padding:0 0 calc(56px + env(safe-area-inset-bottom,0px)) !important;
    transform:translateY(101%) !important;
    transition:transform .26s cubic-bezier(.32,.72,0,1) !important;
  }
  @supports not (max-height:62dvh){
    body.ah-designer .pccp-tools,
    body.ah-designer .pccp-properties{ max-height:62vh !important; }
  }
  /* These have to repeat the descendant selector used higher up: a more
     specific rule beats a later one, and the grouped block above is not
     enough on its own to reset the panel padding. */
  body.ah-designer .pccp-tools,
  body.ah-designer .pccp-design-layout > aside.pccp-tools{ overflow:hidden !important; }
  body.ah-designer .pccp-properties,
  body.ah-designer .pccp-design-layout > aside.pccp-properties{
    overflow-y:auto !important;
    padding:0 16px calc(56px + env(safe-area-inset-bottom,0px)) !important;
  }
  body.ah-designer .pccp-tool-panels{
    flex:1 1 auto !important; max-height:none !important;
    overflow-y:auto !important; padding:4px 16px 16px !important;
  }

  body.ah-designer #pccp-customizer.pccp-sheet-tools .pccp-tools,
  body.ah-designer #pccp-customizer.pccp-sheet-props .pccp-properties{
    transform:none !important;
  }

  /* Step footer sits directly above the tab bar. */
  body.ah-designer section.pccp-panel[data-panel="3"] footer.pccp-panel-foot{
    position:fixed !important;
    left:0 !important; right:0 !important;
    bottom:calc(56px + env(safe-area-inset-bottom,0px)) !important;
    z-index:65 !important;
    height:52px !important; min-height:52px !important;
    padding:0 12px !important; gap:8px !important;
    border-top:1px solid var(--s2) !important;
  }
}

/* ---------- MG: TITLE WRAP + LANDSCAPE ---------- */
/* Title pill: absolutely centred with nowrap, so it overflowed off the left
   edge on narrow screens. Let it wrap inside the viewport. */
body.ah-designer .pccp-stage-info{
  white-space: normal !important;
  max-width: calc(100vw - 28px) !important;
  width: max-content !important;
  justify-content: center !important;
  text-align: center !important;
  flex-wrap: wrap !important;
  line-height: 1.3 !important;
}
@media (max-width: 600px){
  body.ah-designer .pccp-stage-info{ font-size:11.5px !important; padding:6px 12px !important; }
  body.ah-designer .pccp-stage-info .pccp-dot{ display:none !important; }
}

/* LANDSCAPE ON A PHONE
   #pccp-customizer is position:fixed at exactly viewport height and body is
   overflow:hidden, so the page has nothing to scroll (scrollHeight == vh).
   After the chrome there was only ~106px left for the canvas, so the case
   rendered about 69px wide.
   Fix: make the fixed shell itself scrollable, then give the canvas area a
   real pixel height so the case is usable and the shell scrolls to reach it. */
@media (orientation: landscape) and (max-height: 620px){
  body.ah-designer #pccp-customizer{
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
  body.ah-designer #pccp-customizer .pccp-app,
  body.ah-designer #pccp-customizer .pccp-design-layout,
  body.ah-designer #pccp-customizer section.pccp-panel.pccp-panel-active,
  body.ah-designer #pccp-customizer .pccp-stage-col{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }
  body.ah-designer #pccp-customizer #pccp-canvas-wrap,
  body.ah-designer #pccp-customizer .pccp-canvas-wrap,
  body.ah-designer #pccp-customizer .pccp-stage-col > .pccp-canvas-wrap{
    height: 430px !important;
    min-height: 430px !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }
  /* keep the title in flow so it cannot sit on top of the case */
  body.ah-designer #pccp-customizer .pccp-stage-info{
    position: static !important;
    transform: none !important;
    margin: 6px auto !important;
  }
  /* room to scroll past the fixed footer controls */
  body.ah-designer #pccp-customizer .pccp-stage-col{ padding-bottom: 120px !important; }
}

/* ---------- MG: TITLE CENTRE (MOBILE) ---------- */
/* The pill is absolutely centred, but its child spans carry white-space:nowrap,
   so its minimum content width exceeds the viewport and max-width cannot help.
   On phones, stack device and material on their own centred lines. */
@media (max-width: 700px){
  body.ah-designer #pccp-customizer .pccp-stage-info{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 2px !important;
    white-space: normal !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    position: absolute !important;
    top: 12px !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 7px 14px !important;
    line-height: 1.32 !important;
  }
  /* every child must be allowed to wrap, otherwise the pill cannot shrink */
  body.ah-designer #pccp-customizer .pccp-stage-info > *{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    max-width: 100% !important;
    display: block !important;
  }
  body.ah-designer #pccp-customizer .pccp-stage-info .pccp-dot{ display: none !important; }
  body.ah-designer #pccp-customizer .pccp-stage-info #pccp-current-device-label{ font-weight: 700 !important; }
  body.ah-designer #pccp-customizer .pccp-stage-info #pccp-current-material-label{ opacity: .78 !important; font-size: 11.5px !important; }
}

/* ---------- MG: PRINT HINT ---------- */
/* sits between the device label and the canvas, as a real flex item so the
   column's overflow:hidden cannot clip it */
body.ah-designer .pccp-stage-col > #mg-print-hint{
  display: block !important;
  position: static !important;
  flex: 0 0 auto !important;
  order: 2 !important;
  width: auto !important;
  max-width: min(460px, calc(100vw - 32px)) !important;
  margin: 2px auto 0 !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
  background: #F4EDFF !important;
  border: 1px solid #E2D6FA !important;
  color: #4C1D95 !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  text-align: center !important;
  z-index: 6 !important;
}
body.ah-designer #mg-print-hint strong{ color:#2E1065 !important; font-weight:700 !important; }
@media (max-width: 700px){ body.ah-designer .pccp-stage-col > #mg-print-hint{ font-size:11.5px !important; padding:8px 12px !important; } }
@media (orientation: landscape) and (max-height: 620px){ body.ah-designer .pccp-stage-col > #mg-print-hint{ display:none !important; } }