/* ---------- 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;
  }
}