
.plc3{max-width:var(--plc3-max-width,1180px);margin:40px auto;padding:80px 20px 20px;display:grid;grid-template-columns:minmax(0,1fr) var(--plc3-sidebar-width,340px);gap:28px;font-family:inherit;color:var(--plc3-text,#050505)}
.plc3 *{box-sizing:border-box}
.plc3-preview-card,.plc3-panel,.plc3-grid-card{background:var(--plc3-card-bg,#fff);border:1px solid #e9e9e9;border-radius:var(--plc3-radius);box-shadow:0 18px 45px rgba(0,0,0,.06)}
.plc3-preview-card{padding:42px 32px 32px;min-width:0}
.plc3-eyebrow{position:relative;z-index:1;display:block;margin-bottom:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--plc3-accent);font-weight:900;font-size:12px}
.plc3 h1{clear:both;position:relative;z-index:1;font-size:34px;line-height:1.18;margin:16px 0 20px}
.plc3 h2{font-size:26px;line-height:1.2;margin:8px 0}
.plc3-pill{display:inline-flex;background:#f4fff5;border:1px solid color-mix(in srgb,var(--plc3-accent),#fff 50%);border-radius:999px;padding:9px 14px;font-size:13px}
.plc3-canvas-wrap{width:min(680px,100%);aspect-ratio:1/1;margin:24px auto 0;border-radius:18px;overflow:hidden;position:relative;background:var(--plc3-canvas-bg,#f4f1ef);touch-action:none}
.plc3-product-img{width:100%;height:100%;object-fit:cover;display:block}
.plc3-logo-box{position:absolute;left:50%;top:50%;width:45%;transform:translate(-50%,-50%);z-index:4;touch-action:none;user-select:none;cursor:move;outline:2px solid var(--plc3-accent);outline-offset:-2px;box-sizing:border-box}
.plc3-logo-box[hidden]{display:none!important}
.plc3-logo-box.is-dragging{cursor:grabbing}
.plc3-logo-img{display:block;width:100%;height:auto;max-width:none;max-height:none;pointer-events:none;user-select:none}
.plc3-resize-handle{position:absolute!important;right:3px!important;bottom:3px!important;left:auto!important;top:auto!important;width:24px;height:24px;border:2px solid #fff!important;border-radius:7px;background:var(--plc3-accent)!important;box-shadow:0 4px 12px rgba(0,0,0,.28);padding:0!important;margin:0!important;min-width:24px!important;min-height:24px!important;z-index:8!important;touch-action:none;cursor:nwse-resize;transition:transform .15s ease,box-shadow .15s ease}
.plc3-resize-handle:hover{box-shadow:0 6px 16px rgba(0,0,0,.34)}
.plc3-resize-help{margin:2px 0 20px;padding:14px;border:1px solid #e7e7e7;border-radius:14px;background:#fafafa}
.plc3-resize-help strong{display:block;margin-bottom:4px}
.plc3-resize-help span{display:block;color:var(--plc3-muted,#666);font-size:12px;line-height:1.45}
.plc3-resize-help b{color:var(--plc3-accent)}
.plc3-help{text-align:center;color:#333;font-size:13px;margin:14px 0 0;line-height:1.5}
.plc3-help b[data-plc3-cm-size]{color:var(--plc3-accent)}
.plc3-panel{padding:28px;align-self:start;position:static!important;top:auto!important;min-width:0}
.plc3-panel label{display:block;font-weight:900;margin:0 0 16px}
.plc3-panel select,.plc3-panel input[type=file],.plc3-panel textarea{width:100%;border:1px solid #d8d8d8;border-radius:14px;padding:13px;background:#fff;margin-top:8px;font:inherit}
.plc3-panel textarea{resize:vertical;min-height:110px;line-height:1.45}
.plc3-panel small{display:block;font-weight:500;color:var(--plc3-muted,#666);margin-top:-8px;margin-bottom:18px;line-height:1.45}
.plc3-panel .plc3-notes-help{margin-top:-10px}
.plc3-info-message{margin:0 0 18px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--plc3-accent),#fff 55%);border-radius:14px;background:color-mix(in srgb,var(--plc3-accent),#fff 94%);font-size:13px;line-height:1.5}
.plc3-side-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 22px}
.plc3-side-toggle button{border:1px solid var(--plc3-accent);border-radius:14px;background:#fff;color:#111;padding:14px 10px;font-weight:900;cursor:pointer;min-height:70px}
.plc3-side-toggle button small{margin:3px 0 0;color:inherit;font-size:10px}
.plc3-side-toggle button.active{background:var(--plc3-accent);color:#fff;box-shadow:0 12px 25px color-mix(in srgb,var(--plc3-accent),transparent 70%)}
.plc3-summary{border:1px solid #ececec;border-radius:18px;background:#fbfbfb;padding:16px;margin:18px 0}
.plc3-summary p{display:flex;justify-content:space-between;gap:12px;margin:10px 0}
.plc3-summary .total b{font-size:25px;color:var(--plc3-accent)}
.plc3-add{width:100%;border:none;border-radius:var(--plc3-button-radius,999px);background:var(--plc3-accent);color:#fff;padding:16px 18px;font-weight:900;cursor:pointer;transition:opacity .2s,transform .2s}
.plc3-add:hover{transform:translateY(-1px)}
.plc3-add:disabled,.plc3-add.is-loading{opacity:.6;cursor:wait}
.plc3-grid-card{grid-column:1/-1;padding:28px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;min-width:0}
.plc3-qty-badge{text-transform:uppercase;font-size:11px;letter-spacing:.08em;border:1px solid color-mix(in srgb,var(--plc3-accent),#fff 40%);background:#f3fff4;border-radius:16px;padding:14px 24px;text-align:center;font-weight:900}
.plc3-qty-badge strong{display:block;font-size:28px;color:var(--plc3-accent)}
.plc3-table-scroll{grid-column:1/-1;overflow-x:auto;overflow-y:visible;border-radius:16px;border:1px solid #ddd;-webkit-overflow-scrolling:touch}
.plc3-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0}
.plc3-table th{background:var(--plc3-table-head-bg,#050505);color:var(--plc3-table-head-text,#fff);padding:16px;text-align:center;white-space:nowrap}
.plc3-table th:first-child{text-align:left;position:sticky;left:0;z-index:2}
.plc3-table td,.plc3-table tbody th{border-top:1px solid #e5e5e5;background:#fff;padding:12px;text-align:center;color:#050505}
.plc3-table tbody th{font-weight:900;text-align:left;position:sticky;left:0;z-index:1;min-width:130px}
.plc3-table tr:hover td,.plc3-table tr:hover th{background:#f8fff9}
.plc3-qty-control{display:inline-grid;grid-template-columns:34px 48px 34px;align-items:center;border:1px solid #bbb;border-radius:11px;overflow:hidden;background:#fff}
.plc3-qty-control button{height:38px;border:0;background:#f5f5f5;color:#111;font-size:20px;font-weight:800;cursor:pointer;padding:0}
.plc3-qty-control button:hover{background:color-mix(in srgb,var(--plc3-accent),#fff 85%)}
.plc3-table .plc3-qty-control input{appearance:textfield;-moz-appearance:textfield;width:48px;height:38px;border:0;border-left:1px solid #ddd;border-right:1px solid #ddd;border-radius:0;padding:6px;text-align:center;font-weight:900;background:#fff}
.plc3-table .plc3-qty-control input::-webkit-inner-spin-button,.plc3-table .plc3-qty-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.plc3-table .plc3-qty-control:focus-within{outline:2px solid var(--plc3-accent);border-color:var(--plc3-accent)}
.plc3-toast{position:fixed;right:30px;top:30px;z-index:999999;background:#050505;color:#fff;border-radius:18px;padding:18px 22px;box-shadow:0 20px 50px rgba(0,0,0,.18);font-weight:900;max-width:min(420px,calc(100vw - 40px))}
.plc3-toast.success{border-left:8px solid var(--plc3-accent)}
.plc3-button-wrap{margin:16px 0;display:block}
.plc3-single-button,.plc3-loop-button,.plc3-shortcode-button{background:var(--plc3-accent,#00e82d)!important;border-radius:999px!important;color:#fff!important;border:none!important;padding:12px 24px!important;font-weight:800!important;text-decoration:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1.2!important}
.plc3-single-button:hover,.plc3-loop-button:hover,.plc3-shortcode-button:hover{filter:brightness(.95)}
.plc3-print-zone{position:absolute;border:2px dashed var(--plc3-accent);background:color-mix(in srgb,var(--plc3-accent),transparent 90%);border-radius:10px;pointer-events:none;z-index:2;box-shadow:0 0 0 999px rgba(255,255,255,.03)}
.plc3-print-zone span{position:absolute;left:8px;top:8px;background:#050505;color:#fff;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:900;white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.12)}

@media(max-width:900px){
  .plc3{grid-template-columns:1fr;margin:16px auto;padding:38px 14px 20px;gap:16px}
  .plc3-preview-card,.plc3-panel,.plc3-grid-card{border-radius:18px}
  .plc3-preview-card{padding:26px 18px 20px}
  .plc3-panel{padding:20px}
  .plc3-grid-card{padding:20px;display:block}
  .plc3-qty-badge{margin:16px 0}
  .plc3 h1{font-size:28px}
  .plc3 h2{font-size:23px}
  .plc3-canvas-wrap{margin-top:18px}
}
@media(max-width:600px){
  .plc3{padding-left:10px;padding-right:10px}
  .plc3 h1{font-size:24px}
  .plc3-eyebrow{font-size:10px}
  .plc3-side-toggle{grid-template-columns:1fr 1fr;gap:8px}
  .plc3-side-toggle button{min-height:62px;padding:10px 6px;font-size:12px}
  .plc3-preview-card{padding:22px 14px 18px}
  .plc3-panel{padding:16px}
  .plc3-grid-card{padding:16px}
  .plc3-table{min-width:680px}
  .plc3-table th{padding:12px 10px}
  .plc3-table td,.plc3-table tbody th{padding:10px 8px}
  .plc3-qty-control{grid-template-columns:30px 42px 30px}
  .plc3-qty-control button{height:36px}
  .plc3-table .plc3-qty-control input{width:42px;height:36px}
  .plc3-toast{right:12px;top:12px}
}

.plc3 button,.plc3 select,.plc3 input,.plc3 textarea{-webkit-tap-highlight-color:transparent}
.plc3-side-toggle button,.plc3-add,.plc3-qty-control button,.plc3-resize-handle{position:relative;z-index:10;pointer-events:auto!important;touch-action:manipulation}
.plc3-panel,.plc3-grid-card{overflow:visible}
@media(max-width:900px){
  .plc3{width:100%;max-width:100%;grid-template-columns:minmax(0,1fr)!important}
  .plc3-preview-card,.plc3-panel,.plc3-grid-card{width:100%;max-width:100%;min-width:0}
  .plc3-panel{grid-row:auto;position:relative!important}
  .plc3-side-toggle button,.plc3-add{min-height:52px}
  .plc3-canvas-wrap{width:100%;max-width:680px}
}
@media(max-width:600px){
  .plc3{margin:0 auto;padding-top:24px!important;gap:12px}
  .plc3-preview-card{order:1}
  .plc3-panel{order:2}
  .plc3-grid-card{order:3}
  .plc3-side-toggle{grid-template-columns:1fr 1fr!important}
  .plc3-side-toggle button{width:100%;font-size:13px}
  .plc3-add{white-space:normal;line-height:1.25}
  .plc3-resize-handle{width:28px;height:28px}
  .plc3-table-scroll{width:100%;max-width:100%;touch-action:pan-x pan-y}
  .plc3-qty-control button{min-width:30px}
}

/* v3.9: artwork is clamped mathematically inside the active print zone. */
.plc3-logo-box{box-sizing:border-box}
.plc3-logo-box.is-resizing{cursor:nwse-resize}
@media(max-width:600px){
  .plc3-resize-handle{width:30px;height:30px;border-radius:9px}
  }

/* v3.10: hard containment and single clean resize control */
.plc3-print-zone{
  overflow:hidden!important;
  pointer-events:auto!important;
}
.plc3-print-zone > span{
  z-index:7;
  pointer-events:none;
}
.plc3-logo-box{
  max-width:100%!important;
  max-height:100%!important;
}
.plc3-resize-handle::before{
  content:"↘"!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:static!important;
  width:100%!important;
  height:100%!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  opacity:1!important;
  transform:none!important;
}
.plc3-resize-handle::after{
  content:none!important;
  display:none!important;
}
.plc3-logo-box button:not(.plc3-resize-handle){
  display:none!important;
}
.plc3-resize-handle:hover,
.plc3-logo-box.is-resizing .plc3-resize-handle{
  transform:scale(1.1)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.34)!important;
}
@media(max-width:600px){
  .plc3-resize-handle{
    right:4px!important;
    bottom:4px!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
  }
  .plc3-resize-handle::before{
    font-size:16px!important;
  }
}

/* v3.11 mobile layout and bulk-grid stability */
@media(max-width:900px){
  /* Keep the customizer below fixed/mobile theme headers. */
  .plc3{
    padding-top:110px!important;
    margin-top:0!important;
  }

  /* Isolate horizontal table scrolling from the rest of the page. */
  .plc3-grid-card{
    overflow:hidden!important;
    min-width:0!important;
  }
  .plc3-table-scroll{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y!important;
    isolation:isolate;
    contain:paint;
    border-radius:14px;
  }
  .plc3-table{
    width:max-content!important;
    min-width:720px!important;
    table-layout:auto!important;
    transform:translateZ(0);
  }

  /* Sticky first columns were overlapping/repainting badly while swiping on mobile. */
  .plc3-table th:first-child,
  .plc3-table tbody th{
    position:static!important;
    left:auto!important;
    z-index:auto!important;
  }

  .plc3-table th,
  .plc3-table td,
  .plc3-table tbody th{
    white-space:nowrap!important;
  }

  /* Prevent accidental text selection/drag while swiping the table. */
  .plc3-table-scroll,
  .plc3-table-scroll *{
    -webkit-user-select:none;
    user-select:none;
  }
  .plc3-table input{
    -webkit-user-select:text;
    user-select:text;
  }
}

@media(max-width:600px){
  .plc3{
    padding-top:105px!important;
  }

  .plc3-preview-card{
    padding-top:30px!important;
  }

  .plc3 h1{
    margin-top:14px!important;
    line-height:1.22!important;
  }

  .plc3-table{
    min-width:760px!important;
  }

  .plc3-table-scroll{
    margin-left:0!important;
    margin-right:0!important;
  }

  .plc3-qty-control button{
    touch-action:manipulation!important;
  }
}

/* v3.12: customer artwork sits above the print-area badge. */
.plc3-print-zone > span{z-index:5!important}
.plc3-logo-box{z-index:9!important}
.plc3-resize-handle{z-index:12!important}
@media(max-width:900px){
  .plc3{padding-top:var(--plc3-mobile-top,105px)!important}
}
@media(max-width:600px){
  .plc3{padding-top:var(--plc3-mobile-top,105px)!important}
}
