/* ==========================================================================
   print-cup — constructor.html (конструктор). Підключати після style.css/header.css/footer.css.
   ========================================================================== */
@keyframes btnShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

.section-head--xs{margin-bottom:34px}

.sec-constructor{padding:44px 0 60px}

.design-head-lbl{margin:0;display:flex;align-items:center;gap:7px}
.swrow--wrap{flex-wrap:wrap}
.swrow--tight{gap:8px}
.sides-hint{margin-top:7px;font-size:12px;font-weight:700;color:#5B6B62;background:#EAE0CB;border:1.5px solid #16231E;border-radius:9px;padding:7px 10px}
.file-input-hidden{display:none}
.mini--soft{font-size:13px;color:#5B6B62}
.text-row{display:grid;grid-template-columns:1fr 120px;gap:8px}
.font-select{padding:10px 12px;cursor:pointer}
.range-box{display:flex;align-items:center;border:2px solid #16231E;border-radius:10px;padding:0 12px;background:#fff}
.colorpick-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tile-toggle-row{display:flex;align-items:center;gap:8px}
.align-state-row{display:flex;align-items:center;gap:6px}
.align-help{position:relative;display:inline-flex;vertical-align:middle;margin-left:4px}
.align-help .help-btn{width:17px;height:17px;font-size:10px}
.align-tip{position:absolute;left:0;bottom:calc(100% + 8px);transform:none;width:230px;background:#16231E;color:#F3ECDC;font-size:12px;font-weight:600;line-height:1.5;padding:10px 12px;border-radius:10px;box-shadow:3px 3px 0 rgba(0,0,0,.25);z-index:20;display:none;text-align:left;cursor:default}
.align-tip::after{content:'';position:absolute;top:100%;left:10px;border:6px solid transparent;border-top-color:#16231E}
.align-help:hover .align-tip,.align-help.show .align-tip{display:block}

.preview-help{position:relative;display:inline-flex;vertical-align:middle;margin-left:4px}
.stage-hint-help{display:none;margin-left:0;pointer-events:auto}
.preview-help .help-btn{width:17px;height:17px;font-size:10px}
.preview-tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);width:180px;max-width:calc(100vw - 32px);white-space:normal;padding:7px 9px;font-size:12px;line-height:1.35;font-weight:600;color:#fff;background:#1F2A24;border-radius:8px;text-align:left;cursor:default;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-4px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;pointer-events:none;z-index:50}
.preview-tooltip::after{content:'';position:absolute;top:100%;left:50%;width:8px;height:8px;background:#1F2A24;border-radius:1px;transform:translateX(-50%) rotate(45deg)}
.preview-tooltip.flip-down{bottom:auto;top:calc(100% + 8px);transform:translateX(-50%) translateY(4px)}
.preview-tooltip.flip-down::after{top:auto;bottom:100%;transform:translateX(-50%) rotate(225deg)}
.preview-help:hover .preview-tooltip,.preview-tooltip.is-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}

.price-label{font-size:14px;color:#5B6B62;font-weight:700}
.price-value-row{display:flex;align-items:baseline;gap:9px}
.price-value{font-family:'Manrope';font-weight:700;font-size:26px;color:#16231E}
.safe-ok{color:#3a8a4a}

.builder{background:#F5EFE1;border:2px solid #16231E;border-radius:22px;box-shadow:8px 8px 0 #16231E;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 430px;grid-template-rows:100vh;align-items:stretch;scroll-snap-align:start}
.stage{background:radial-gradient(120% 120% at 50% 20%,#FBE59A,#F5C543 70%);position:relative;min-height:620px;min-width:0;display:flex;flex-direction:column;border-right:2px solid #16231E;overflow:hidden}
.stage-top{position:absolute;top:16px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;z-index:2;pointer-events:none}
.stage-tag{font-family:'Manrope';font-size:12px;font-weight:600;color:#16231E;letter-spacing:.03em}
.stage-hint{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#16231E;background:rgba(255,255,255,.55);border:1.5px solid #16231E;border-radius:999px;padding:5px 11px}
#mug3d{flex:1;min-height:0;min-width:0;cursor:grab;transform:scale(var(--mug-zoom,1));transform-origin:center center;transition:transform .2s ease}
#mug3d:active{cursor:grabbing}

.stage-zoom{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.72);backdrop-filter:blur(2px);border:1.5px solid #16231E;border-radius:999px;padding:6px 9px;pointer-events:auto}
.stage-zoom-label{display:flex;align-items:center;font-size:11px;font-weight:800;color:#16231E;white-space:nowrap}
.stage-zoom-btn{width:22px;height:22px;border-radius:50%;border:1.5px solid #16231E;background:#fff;color:#16231E;font-size:14px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex:none;transition:.12s}
.stage-zoom-btn:hover{background:#F5C543}
.stage-zoom-btn:disabled{opacity:.4;cursor:default;background:#fff}
.stage-zoom-value{min-width:38px;text-align:center;font-size:11px;font-weight:800;color:#16231E;background:none;border:none;cursor:pointer;padding:2px 2px;flex:none}
.stage-zoom-value:hover{color:#FF6A3D}

.panel{padding:14px 18px 18px;display:flex;flex-direction:column;gap:8px;overflow:visible;min-width:0}
.panel.compact{gap:3px;padding:7px 16px 7px}
.panel.compact .lbl{margin-bottom:2px}
.panel.compact .ctl-row{min-height:20px;padding:0}
.panel.compact .foot{margin-top:3px;padding:5px 16px 6px}
.panel.compact .btn-buy{padding:7px}
.panel.compact .btn-dl{padding:6px;margin-top:4px}
.panel.compact .imgrid button{height:42px}
.panel.compact .tabs button{padding:3px}
.panel.compact .field{padding:6px 12px}
.panel.compact .price-value{font-size:20px}
.panel.compact .seg button{padding:6px 4px;font-size:12px}
.panel.compact .sides-hint{margin-top:4px;padding:5px 8px;font-size:11px;line-height:1.3}
.panel.compact .design-head{margin-bottom:4px}
.panel.compact .swrow{gap:6px}
.panel.compact .sw{width:28px;height:28px}
.panel.compact .tool{gap:5px}
.panel.compact .text-row{gap:5px}
.lbl{font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8A968E;margin-bottom:7px}
.seg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
.seg button{padding:9px 4px;border-radius:10px;font-weight:800;font-size:13px;cursor:pointer;transition:.12s;border:2px solid #16231E}
.swrow{display:flex;gap:9px}
.sw{width:34px;height:34px;border-radius:9px;cursor:pointer;border:2px solid #16231E;transition:.12s}
.sw--none{background:repeating-linear-gradient(135deg,#fff 0 4px,#e2453a 4px 5px,#fff 5px 9px)}
.pickwrap{width:30px;height:30px;border-radius:9px;border:2px solid #16231E;cursor:pointer;overflow:hidden;position:relative;display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(from 0deg,#ff2d2d,#ffd23d,#8CC63F,#18A7DC,#7a5cff,#ff2d2d);flex:none;transition:.12s}
.pickwrap.on{box-shadow:2px 2px 0 #16231E;transform:translate(-1px,-1px)}
.pickwrap input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;padding:0;margin:0;cursor:pointer}

.design-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.canvas-box{border:2px solid #16231E;border-radius:12px;box-shadow:3px 3px 0 #16231E;background:#fff;line-height:0;overflow:hidden;display:flex;justify-content:center}
#printCanvas{display:block;cursor:move;touch-action:none}

.tabs{display:flex;gap:7px;background:#EAE0CB;border:2px solid #16231E;border-radius:11px;padding:4px}
.tabs button{flex:1;padding:8px;border:none;border-radius:8px;background:none;font-family:Manrope;font-weight:800;font-size:14px;color:#5B6B62;cursor:pointer;transition:.12s}
.tabs button.on{background:#FF6A3D;color:#16231E;box-shadow:2px 2px 0 #16231E}
.tool[hidden]{display:none}
.tool{display:flex;flex-direction:column;gap:11px}
.imgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.imgrid button{height:64px;border-radius:10px;cursor:pointer;border:2px dashed #C9BFA3;background:#F7F0E2;transition:.12s;background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center}
.imgrid button:hover{border-color:#FF6A3D}
.imgrid button i{font-size:20px;color:#9A8F6E}
.imgrid button.filled{border-style:solid;border-color:#16231E}
.imgrid button.active{border-color:#FF6A3D;box-shadow:2px 2px 0 #16231E;transform:translate(-1px,-1px)}
.imgrid .buf-check{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:#FF6A3D;border:1.5px solid #16231E;display:flex;align-items:center;justify-content:center;color:#16231E;font-size:10px}
.field{width:100%;padding:11px 13px;border:2px solid #16231E;border-radius:10px;font-family:Manrope;font-weight:700;font-size:15px;background:#fff;color:#16231E;outline:none}
.rng{width:100%;accent-color:#FF6A3D;cursor:pointer}
.ctl-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;padding:2px 0}
.mini{font-size:12px;color:#8A968E;font-weight:700}
.toggle{width:46px;height:25px;border-radius:999px;border:2px solid #16231E;cursor:pointer;position:relative;transition:.2s;flex:none}
.toggle span{position:absolute;top:2px;width:17px;height:17px;border-radius:50%;background:#16231E;transition:.2s}

.foot{margin:12px -18px -18px -18px;padding:10px 18px 12px;background:#F5EFE1;border-top:2px solid #E4DAC6}

/* ---- HELP (довідка конструктора) ---- */
.help-btn{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid #16231E;background:#F5C543;color:#16231E;font-family:'Manrope';font-weight:700;font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:.12s}
.help-btn:hover{background:#FF6A3D}
.help-overlay{position:fixed;inset:0;background:rgba(10,16,13,.55);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.help-overlay.on{display:flex}
.help-modal{background:#F5EFE1;border:2px solid #16231E;border-radius:20px;box-shadow:8px 8px 0 #16231E;width:min(440px,100%);max-height:86vh;overflow-y:auto;padding:22px 22px 24px;position:relative;color:#16231E}
.help-modal h3{font-family:'Manrope';font-weight:600;font-size:20px;color:#16231E;padding-right:36px;line-height:1.15}
.help-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;border:2px solid #16231E;background:#fff;cursor:pointer;font-size:15px;font-weight:800;color:#16231E;line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s}
.help-close:hover{background:#FF6A3D}
.help-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 4px}
.help-step{background:#fff;border:2px solid #16231E;border-radius:12px;padding:9px 4px 7px;text-align:center;position:relative}
.help-step .n{position:absolute;top:-8px;left:-8px;width:19px;height:19px;border-radius:50%;background:#FF6A3D;border:2px solid #16231E;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.help-step svg{width:28px;height:28px}
.help-step span{display:block;font-size:10px;font-weight:800;color:#16231E;margin-top:5px;line-height:1.15}
.help-block{margin-top:15px}
.help-block h4{font-family:Manrope;font-weight:800;font-size:15px;color:#16231E;display:flex;align-items:center;gap:8px;margin:0}
.help-block p{font-size:13.5px;color:#5B6B62;line-height:1.5;margin-top:5px}
.help-safe{margin-top:16px;display:flex;gap:12px;align-items:center;background:#fff;border:2px solid #16231E;border-radius:12px;padding:12px 13px}
.help-safe svg{flex:none}
.help-safe .cap{font-size:12.5px;color:#2A362F;line-height:1.55}
.help-tip{margin-top:14px;background:#F5C543;border:2px solid #16231E;border-radius:12px;padding:11px 13px;font-size:13px;color:#16231E;font-weight:600;line-height:1.5}
.price-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.btn-buy{width:100%;padding:14px;border:2px solid #16231E;border-radius:12px;cursor:pointer;font-family:'Manrope';font-weight:600;font-size:16px;transition:.12s;color:#16231E;box-shadow:4px 4px 0 #16231E;background:#FF6A3D}
.btn-dl{width:100%;margin-top:8px;padding:10px;border:2px solid #16231E;border-radius:12px;cursor:pointer;font-family:Manrope;font-weight:800;font-size:13px;transition:.12s;color:#16231E;background:#F5EFE1;box-shadow:3px 3px 0 #16231E}
.btn-dl.warn{background:#FCE1DB;border-color:#D23B23;color:#D23B23;animation:btnShake .4s}

.order-form{display:flex;flex-direction:column;gap:13px;margin-top:16px}
.order-field label{display:block;font-weight:800;font-size:12.5px;color:#5B6B62;margin-bottom:6px}
.order-field textarea.field{resize:vertical;font-family:'Manrope'}
.order-radio-row{display:flex;flex-direction:column;gap:8px}
.order-radio{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:#16231E;cursor:pointer}
.order-radio input{accent-color:#FF6A3D;width:16px;height:16px;cursor:pointer;flex:none}
.order-error{background:#FCE1DB;border:2px solid #D23B23;color:#D23B23;border-radius:10px;padding:9px 11px;font-size:13px;font-weight:700}
#orderSubmit[disabled]{opacity:.6;cursor:default}

/* pinned scroll: nav -> builder (1 экран) -> footer, тільки на конструкторі й десктопі */
html:has(body.page-constructor){scroll-snap-type:y mandatory;scroll-behavior:auto}

@media (max-width:960px){
  html:has(body.page-constructor){scroll-snap-type:none}
  .builder{scroll-snap-align:none;grid-template-rows:none !important}

  /* конструктор доступний і на планшеті/мобілці — одна колонка замість грід-розкладки */
  .builder{grid-template-columns:minmax(0,1fr)}
  .stage{min-height:300px;border-right:none;border-bottom:2px solid #16231E}
  /* stage-top більше НЕ overlay — і повністю прибраний (назва, текстова підказка, «?») на мобілці/планшеті, щоб #mug3d отримав максимум висоти під саму 3D-модель */
  .stage-top{position:static;top:auto;left:auto;right:auto;padding:0;min-height:0}
  .stage-tag,.stage-hint,.stage-hint-help{display:none}
  /* pan-y — вертикальний свайп лишається звичайним скролом сторінки; горизонтальне обертання й pinch-zoom бере на себе JS (touchmove з preventDefault) */
  #mug3d{touch-action:pan-y}
  /* блок керування масштабом прибраний — на мобілці/планшеті масштаб керується pinch-жестом напряму по камері */
  .stage-zoom{display:none}
}

/* дуже вузькі телефони — компактніші відступи/gap у конструкторі, щоб нічого не тіснило й не зʼїжджало вбік */
@media (max-width:480px){
  .panel{padding:12px 14px 14px;gap:7px}
  .seg{gap:6px}
  .imgrid{gap:6px}
  .foot{margin:12px -14px -14px -14px;padding:10px 14px 12px}
}
@media (max-width:360px){
  .panel{padding:10px 12px 12px;gap:6px}
  .seg{gap:5px}
  .imgrid{gap:5px}
  .seg button{font-size:12px;padding:8px 3px}
  .foot{margin:10px -12px -12px -12px;padding:9px 12px 11px}
}