:root{
  --ccc-sage:var(--ccc-config-primary,#6f8064)!important;
  --ccc-sage-dark:var(--ccc-config-primary-dark,#4f5f47)!important;
  --ccc-cream:var(--ccc-config-page-background,#f7f2e8)!important;
  --ccc-paper:var(--ccc-config-surface,#ffffff)!important;
  --ccc-gold:var(--ccc-config-gold,#c6a15b)!important;
  --ccc-gold-dark:var(--ccc-config-gold,#c6a15b)!important;
  --ccc-ink:var(--ccc-config-text,#26302a)!important;
  --ccc-muted:var(--ccc-config-muted,#6d756f)!important;
  --ccc-line:var(--ccc-config-border,#d8d0c1)!important;
}
html,body{min-height:100%;scroll-behavior:smooth}
body{overflow:auto!important;background:var(--ccc-cream)!important}
.app{min-height:100vh}
.standalone-product-list{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.standalone-product-card{width:100%;display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;gap:2px 10px;align-items:center;text-align:left;background:#fff!important;border:1px solid var(--ccc-line)!important;color:var(--ccc-ink)!important;border-radius:var(--ccc-radius,14px)!important;padding:10px!important}
.standalone-product-card .icon{grid-row:1/3;font-size:24px;text-align:center}
.standalone-product-card strong{font-size:14px;color:var(--ccc-sage-dark)}
.standalone-product-card small{font-size:11px;color:var(--ccc-muted)}
.standalone-product-card.active{border-color:var(--ccc-sage)!important;box-shadow:0 0 0 2px rgba(111,128,100,.15)!important;background:#f3f7f0!important}
.standalone-request{max-width:1180px;margin:30px auto;padding:0 18px 50px;color:var(--ccc-ink)}
.request-card{background:var(--ccc-paper);border:1px solid var(--ccc-line);border-radius:var(--ccc-radius,14px);box-shadow:0 14px 35px rgba(56,70,58,.10);padding:clamp(20px,4vw,38px)}
.request-card h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(24px,4vw,34px);margin:0 0 8px;color:var(--ccc-sage-dark)}
.request-card .lead{color:var(--ccc-muted);line-height:1.55;margin:0 0 20px}
.request-summary{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 20px}.request-summary span{background:#f3f7f0;border:1px solid var(--ccc-line);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;color:var(--ccc-sage-dark)}
.request-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.request-grid .span-2{grid-column:1/-1}
.request-card label{display:grid;gap:6px;font-size:13px;font-weight:700;color:var(--ccc-sage-dark)}
.request-card input,.request-card textarea{width:100%;min-height:46px;padding:11px 12px;border:1px solid var(--ccc-line);border-radius:12px;background:#fff;color:var(--ccc-ink);font:inherit}.request-card textarea{resize:vertical;min-height:105px}
.request-checks{display:grid;gap:10px;margin:18px 0}.request-checks label{display:flex;align-items:flex-start;gap:10px;font-weight:500;line-height:1.45;color:var(--ccc-ink)}.request-checks input{width:20px;min-height:20px;flex:0 0 auto;margin-top:1px}
.request-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.request-actions button{background:var(--ccc-sage)!important;color:#fff!important;border-color:var(--ccc-sage)!important;padding:12px 20px!important}.request-status{font-weight:700;color:var(--ccc-sage-dark)}.request-status.error{color:#9c3128}.request-status.success{color:#23602f}
.request-notice{background:#fff7e5;border:1px solid #ead7a8;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5;margin:16px 0}
.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.loading-overlay{position:fixed;inset:0;z-index:100000;background:rgba(38,48,42,.68);display:none;place-items:center;padding:20px}.loading-overlay.open{display:grid}.loading-box{background:#fff;border-radius:14px;padding:20px 24px;box-shadow:0 18px 50px rgba(0,0,0,.25);font-weight:700;color:var(--ccc-sage-dark)}
@media(max-width:900px){.standalone-request{margin-top:18px}.request-grid{grid-template-columns:1fr}.request-grid .span-2{grid-column:auto}.app{min-height:auto}.standalone-product-list{grid-template-columns:repeat(2,minmax(0,1fr))}.standalone-product-card{grid-template-columns:34px 1fr;padding:8px!important}}
@media(max-width:520px){.standalone-product-list{grid-template-columns:1fr}.standalone-request{padding:0 10px 30px}.request-card{padding:18px}}

/* Standalone page shell fixes (v3.1.0)
 * The original editor was designed to occupy an embedded OpenCart viewport.
 * These rules keep that full-screen editing experience while allowing the
 * enquiry form beneath it to remain reachable on phones and tablets.
 */
.personaliser-standalone-root{
  position:relative;
  width:100%;
  min-width:0;
  min-height:100dvh;
  overflow:hidden;
  background:var(--ccc-cream);
}
.personaliser-standalone-root .app{width:100%;min-width:0}
.top-actions{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.top-actions::-webkit-scrollbar{display:none}
.top-actions button{flex:0 0 auto}
.standalone-request{scroll-margin-top:16px}

@media (min-width:901px) and (max-width:1240px){
  .app{min-width:0!important}
  .main{grid-template-columns:64px 220px minmax(0,1fr) 238px!important}
  .rail{margin-left:8px!important}
  .left{margin-right:8px!important}
  .right{margin-left:8px!important}
  .top{padding-inline:10px!important}
  .top-actions{gap:6px}
  .top-actions button{padding-inline:11px!important}
}

@media (max-width:900px){
  html,body{
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }
  body{
    position:static!important;
    inset:auto!important;
    padding:0!important;
  }
  .personaliser-standalone-root{
    position:relative!important;
    width:100%!important;
    height:100dvh!important;
    min-height:620px!important;
    overflow:hidden!important;
    isolation:isolate;
  }
  .personaliser-standalone-root .app{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  .personaliser-standalone-root .top{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    align-content:start;
    gap:5px!important;
    min-height:104px!important;
    height:auto!important;
    padding:max(7px,env(safe-area-inset-top,0px)) 8px 7px!important;
    overflow:visible!important;
  }
  .personaliser-standalone-root .brand{
    grid-row:1;
    width:100%;
    min-width:0!important;
    max-width:none!important;
    flex:none!important;
    padding:0 2px;
  }
  .personaliser-standalone-root .brand-eyebrow{font-size:9px!important;line-height:1.05}
  .personaliser-standalone-root .brand-title{font-size:17px!important;line-height:1.1}
  .personaliser-standalone-root .top-actions{
    grid-row:2;
    width:100%;
    max-width:100%;
    justify-content:flex-start;
    gap:6px;
    padding:0 0 1px;
  }
  .personaliser-standalone-root .top-actions button{
    min-width:auto!important;
    min-height:42px!important;
    padding:8px 12px!important;
    font-size:13px!important;
  }
  .personaliser-standalone-root #prepareOrder{order:-10;background:var(--ccc-sage)!important;color:#fff!important}
  .personaliser-standalone-root #download{order:-9}
  .personaliser-standalone-root .order-save-status{flex:0 0 auto;max-width:190px}

  /* Keep all mobile overlays attached to the editor, not the full document. */
  .personaliser-standalone-root .rail{
    position:absolute!important;
  }
  .personaliser-standalone-root .mobile-sheet-backdrop,
  .personaliser-standalone-root .panel.left,
  .personaliser-standalone-root .panel.right{
    position:absolute!important;
  }
  .personaliser-standalone-root .rail .tab[data-t="product"]{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
  }
  .personaliser-standalone-root.mobile-sheet-open .mobile-sheet-backdrop{
    display:block!important;
  }
  .personaliser-standalone-root.mobile-tools-open .panel.left,
  .personaliser-standalone-root.mobile-object-open .panel.right{
    transform:translateY(0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .personaliser-standalone-root.mobile-preview-open{
    position:fixed!important;
    z-index:2147483000!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .personaliser-standalone-root.mobile-preview-open .preview{
    display:block!important;
  }
  .personaliser-standalone-root.mobile-preview-open .preview.annotation-mode .previewhint{
    bottom:calc(82px + env(safe-area-inset-bottom,0px));
  }
  .personaliser-standalone-root.mobile-preview-open .rail,
  .personaliser-standalone-root.mobile-preview-open .top{
    visibility:hidden;
  }
  .personaliser-standalone-root .main{
    height:auto!important;
  }
  .standalone-request{
    position:relative;
    z-index:1;
    margin-top:20px;
  }
}

@media (max-width:430px){
  .personaliser-standalone-root .top{min-height:102px!important}
  .personaliser-standalone-root .top-actions button{padding-inline:10px!important}
}

/* The full disclaimer belongs in the expanded 3D view. Keeping it out of the
 * compact desktop strip prevents it from sitting underneath the camera buttons. */
.personaliser-standalone-root:not(.mobile-preview-open) .preview-disclaimer{display:none!important}
.personaliser-standalone-root.mobile-preview-open .preview-disclaimer{
  position:absolute;z-index:7;left:14px;bottom:50px;display:block;
  max-width:min(560px,calc(100% - 28px));padding:8px 11px;border-radius:9px;
  background:rgba(45,60,47,.88);color:#fff;font-size:12px;line-height:1.35;
  pointer-events:none;
}

/* Standalone document-flow layout fix (v3.3.0)
 * The OpenCart editor originally used a viewport-locked three-row grid.
 * In a normal PHP page the editor panels can be taller than the remaining
 * viewport, causing the later 3D row to paint over the Fabric editor. Keep
 * the main editor and 3D preview in separate document-flow rows instead.
 */
@media (min-width:901px){
  html,body{
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  body{position:static!important;inset:auto!important}
  .personaliser-standalone-root{
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .personaliser-standalone-root .app{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto minmax(640px,72vh) minmax(380px,52vh)!important;
    overflow:visible!important;
  }
  .personaliser-standalone-root .top{
    position:relative!important;
    z-index:20;
  }
  .personaliser-standalone-root .main{
    position:relative!important;
    min-width:0!important;
    min-height:640px!important;
    height:auto!important;
    overflow:hidden!important;
    align-items:stretch!important;
    isolation:isolate;
  }
  .personaliser-standalone-root .rail,
  .personaliser-standalone-root .panel,
  .personaliser-standalone-root .work{
    min-height:0!important;
    max-height:none!important;
  }
  .personaliser-standalone-root .panel{
    overflow:auto!important;
    overscroll-behavior:contain;
  }
  .personaliser-standalone-root .work,
  .personaliser-standalone-root .shell{
    height:100%!important;
    min-height:0!important;
  }
  .personaliser-standalone-root .preview{
    position:relative!important;
    inset:auto!important;
    z-index:2!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:380px!important;
    max-height:none!important;
    margin:14px!important;
    overflow:hidden!important;
    grid-row:auto!important;
  }
  .personaliser-standalone-root .preview #preview3d{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  .personaliser-standalone-root + .standalone-request,
  .standalone-request{
    position:relative!important;
    z-index:1!important;
    clear:both;
  }

  /* Full-screen preview uses a class on the standalone root, not body. */
  .personaliser-standalone-root.mobile-preview-open{
    position:fixed!important;
    z-index:2147483000!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .personaliser-standalone-root.mobile-preview-open .preview{
    position:fixed!important;
    z-index:5000!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-width:0!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .personaliser-standalone-root.mobile-preview-open #preview3d{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
  }
  .personaliser-standalone-root.mobile-preview-open .mobile-preview-close{
    position:absolute!important;
    z-index:9!important;
    top:14px!important;
    right:14px!important;
    display:grid!important;
    place-items:center!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    padding:0!important;
    border-radius:50%!important;
    color:#fff!important;
    background:rgba(45,60,47,.92)!important;
    font-size:27px!important;
  }
}

@media (min-width:901px) and (max-height:760px){
  .personaliser-standalone-root .app{
    grid-template-rows:auto minmax(600px,78vh) 400px!important;
  }
  .personaliser-standalone-root .main{min-height:600px!important}
}