/* Fjordvarg mug-configurator, local prototype */
:root{--paper:#f5f2ea;--ink:#172f36;--muted:#607277;--line:#d4dcd8;--gold:#b89a72;--highlight:#e8e0d3;--teal:#294d58}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:15px/1.6 Arial,sans-serif;color:var(--ink);background:var(--paper)}a{color:inherit}button,input,select{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #b38752;outline-offset:3px}
.wrap{max-width:1190px;margin:auto;padding:0 28px}header{border-bottom:1px solid var(--line);background:#f5f2eaf7;position:sticky;z-index:20;top:0}.top{min-height:76px;display:flex;align-items:center;gap:20px;justify-content:space-between}.brand{font:700 24px Georgia,serif;letter-spacing:2px;text-decoration:none;display:flex;align-items:center;gap:7px;white-space:nowrap}.brand img{width:50px;height:50px;mix-blend-mode:multiply}.toplinks{display:flex;align-items:center;gap:20px;font-size:13px}.toplinks>a{text-decoration:none}.toplinks>a:hover{text-decoration:underline}.langs{border-left:1px solid var(--line);padding-left:10px;display:flex;gap:3px}.langs a{padding:4px 8px;text-decoration:none}.langs a[aria-current=page]{background:var(--ink);color:white}
.hero{padding-top:42px;padding-bottom:28px}.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.3px;color:#7c674a}h1,h2,h3{font-family:Georgia,serif;font-weight:400;line-height:1.13}h1{font-size:clamp(38px,5.5vw,64px);margin:9px 0 13px;letter-spacing:-1.5px}h2{font-size:28px;margin:0 0 15px}h3{font-size:19px;margin:0 0 9px}.lead{color:var(--muted);max-width:780px;margin:0 0 16px;font-size:16px}.beta{display:inline-flex;gap:8px;align-items:center;background:#e9e0d0;color:#594d3f;padding:6px 13px;font-size:12px;font-weight:700;letter-spacing:.4px}
.builder{display:grid;grid-template-columns:minmax(330px,.95fr) minmax(0,1.18fr);gap:28px;align-items:start;padding-bottom:60px}.panel{background:#fffdfa;border:1px solid var(--line);padding:27px;box-shadow:0 7px 27px rgba(19,44,50,.04)}.fields{display:grid;gap:20px}.field{display:grid;gap:7px}.field-label{font-size:13px;font-weight:700}.hint{font-size:12px;color:var(--muted);line-height:1.5;margin:0}.motifs{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.motif-input{position:absolute;opacity:0;width:1px;height:1px}.motif-option{border:1px solid var(--line);display:block;padding:11px;min-height:91px;cursor:pointer;background:#fbfaf7}.motif-input:focus-visible+.motif-option{outline:3px solid #b38752;outline-offset:1px}.motif-input:checked+.motif-option{border:2px solid var(--ink);background:#edf2f0;padding:10px}.swatch{height:34px;display:block;margin-bottom:6px}.swatch.aurora{background:linear-gradient(132deg,#12283b,#357b6e 44%,#d7be86 57%,#233744)}.swatch.fjord{background:linear-gradient(170deg,#c6b79c,#80a3a5 47%,#254952 48%,#19343e)}.swatch.forest{background:linear-gradient(140deg,#203c49,#3f6568 42%,#1e302a 43%,#0d2d25)}.swatch.photo{background:linear-gradient(130deg,#d8d8d1 15%,#b9c4bd 45%,#ece6d8 85%);display:flex;align-items:center;justify-content:center;color:#516a70;font-size:19px}.motif-option strong{display:block;font-size:13px;line-height:1.4}.motif-option small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
input[type=text],select,input[type=file]{width:100%;padding:12px 13px;background:#fff;border:1px solid #bbc7c7;color:var(--ink);border-radius:0;min-height:45px}input[type=range]{width:100%;accent-color:var(--ink)}.ranges{display:grid;grid-template-columns:1fr 1fr;gap:12px}.range-field{display:grid;gap:2px}.fine{font-size:12px;color:var(--muted)}.preview{position:sticky;top:97px}.canvas-stage{min-height:390px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 94%,#dfdcd2 0,transparent 56%),linear-gradient(#f1f0eb,#e7e7e0)}.mug{width:min(78%,400px);position:relative;filter:drop-shadow(12px 22px 13px rgba(25,35,34,.21))}.mug:before{content:'';position:absolute;top:20px;right:-54px;width:87px;height:184px;border:25px solid #fffefa;border-radius:50%;box-shadow:inset -8px -1px 9px #bdc9c7;z-index:0}.mug-body{position:relative;z-index:1;overflow:hidden;height:245px;background:linear-gradient(90deg,#b8c5c1 0%,#fff 12%,#fff 85%,#c9d0d0 100%);border-radius:9px 9px 63px 63px/8px 8px 42px 42px;border-top:9px solid #fffefa;border-bottom:8px solid #fafafa;box-shadow:inset 16px 0 17px rgba(16,47,51,.12),inset -13px 0 17px rgba(19,43,44,.14)}.mug-body canvas{position:absolute;left:-10%;top:2%;width:120%;height:95%;object-fit:cover;box-shadow:inset 0 0 18px #fff;}
.preview-note{font-size:12px;color:var(--muted);margin-top:15px}.flat-title{margin-top:28px;font-size:13px;font-weight:700}.flat-wrap{border:1px solid var(--line);background:white;padding:9px;margin-top:8px}.flat-wrap canvas{display:block;width:100%;height:auto}.tools{display:grid;gap:9px;margin-top:18px}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;text-align:center;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:12px 16px;min-height:45px;font-size:13px}.btn:hover{background:#365762}.btn.secondary{background:transparent;color:var(--ink)}.btn.secondary:hover{background:#eef1ec}.warning{background:#f0e8db;border-left:3px solid var(--gold);padding:12px 14px;font-size:12px;line-height:1.55;margin-top:16px}.footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:26px;padding-bottom:35px;font-size:12px;color:var(--muted)}.footer b{font:18px Georgia,serif;letter-spacing:2px;color:var(--ink)}.info{font-size:13px;color:var(--muted);margin-top:10px}.status{font-size:13px;color:#476450;min-height:18px}label.check{display:flex;gap:11px;align-items:flex-start;font-size:12px;line-height:1.5}.check input{margin-top:3px;accent-color:var(--ink);flex-shrink:0}.hr{height:1px;background:var(--line)}
@media(max-width:830px){.builder{grid-template-columns:1fr}.preview{position:static}.canvas-stage{min-height:360px}.toplinks{gap:10px}}
@media(max-width:530px){.wrap{padding:0 15px}.top{min-height:68px}.brand{font-size:18px;letter-spacing:1px}.brand img{width:38px;height:38px}.toplinks{font-size:12px;gap:8px}.toplinks .back{display:none}.panel{padding:17px}.hero{padding-top:27px}.motifs{grid-template-columns:1fr 1fr}.motif-option{min-height:78px;padding:8px}.motif-input:checked+.motif-option{padding:7px}.canvas-stage{min-height:300px}.mug{width:75%;max-width:300px}.mug-body{height:205px}.mug:before{top:16px;right:-37px;width:60px;height:145px;border-width:17px}.ranges{grid-template-columns:1fr}}


/* Updated with existing FJORDVARG artwork, not generated colour swatches */
.motif-option .swatch {height:75px; border:1px solid #d9dedb; background-color:#edf0ea; background-position:center; background-repeat:no-repeat; background-size:cover; border-radius:2px;}
.swatch.fjord {background-image:url('./fjord.webp');background-position:50% 50%;}
.motif-option .swatch.photo {background-image:none;background:linear-gradient(135deg,#e9ebeb,#c6d2ce);height:75px;font-size:29px}
.canvas-stage {min-height:415px;background:radial-gradient(ellipse at 50% 85%,#d7d4cb 0%,transparent 43%),linear-gradient(158deg,#f4f3f0,#e3e8e4 60%,#d7ded9);}
.mug {width:min(76%,390px); transform:rotate(-1.6deg);filter:drop-shadow(16px 25px 15px rgba(15,33,29,.22))}
.mug-body {height:255px;border-radius:9px 9px 51px 51px/8px 8px 34px 34px; border:0;background:linear-gradient(90deg,#d5deda 0%,#fff 10%,#fcfcf9 50%,#f9faf8 83%,#aebfc0 100%);box-shadow:inset 13px 0 12px #c2d2d0,inset -8px -1px 14px #b1c0bc,0 -1px 1px #e1e4e3;}
.mug-body::before {content:""; position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(#f8faf8 3%,#d2dcd9 19%,#fff 35%,#fff 55%,transparent 100%);border-radius:50% 50% 0 0/55% 55% 0 0;z-index:3;pointer-events:none;}
.mug-body::after {content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:inherit;box-shadow:inset 18px 0 21px rgba(75,109,113,.19),inset -22px 0 24px rgba(30,62,72,.20),inset 0 -15px 18px rgba(210,217,211,.46);pointer-events:none;z-index:4;}
.mug-body canvas {left:3%;top:9%;width:94%;height:83%;object-fit:fill;box-shadow:none;}
.mug:before {width:80px;height:169px;top:26px;right:-51px;border:23px solid #fff;box-shadow:inset -7px 1px 10px #adbfc0,7px 0 8px #c6cecd;}
@media(max-width:530px){.mug{width:76%;max-width:300px}.mug-body{height:215px}.mug:before{width:54px;height:139px;right:-37px;top:24px;border-width:17px}.canvas-stage{min-height:310px}.motif-option .swatch{height:58px}}


/* V3: Hochglanz 11 oz Modell, frei platzierbare Textfelder */
.builder{grid-template-columns:minmax(330px,.96fr) minmax(0,1.13fr)}
.canvas-stage{min-height:480px;background:radial-gradient(ellipse at 53% 85%,#d8dad5 0%,transparent 40%),linear-gradient(151deg,#f5f5f3,#edf0ec 58%,#d9dfda);}
.mug{width:min(60%,315px);transform:rotate(-1deg);filter:drop-shadow(16px 23px 12px rgba(19,37,36,.23))}
.mug-body{height:305px;border-radius:14px 14px 53px 53px/12px 12px 35px 35px;background:linear-gradient(90deg,#b9c8c6 0%,#fff 12%,#fff 55%,#f7fbfa 79%,#b1c4c3 100%);box-shadow:inset 12px 0 22px #b7c7c4,inset -12px 0 23px #aabcb8,0 2px 4px rgba(39,63,66,.2)}
.mug-body::before{height:26px;background:linear-gradient(#d2dcda 1%,#fdfefe 25%,#fff 65%,transparent);border-radius:50% 50% 0 0/60% 60% 0 0}
.mug-body::after{background:linear-gradient(90deg,rgba(255,255,255,.48) 0%,transparent 19%,transparent 78%,rgba(255,255,255,.45) 87%,transparent 95%);box-shadow:inset 12px 0 17px rgba(68,104,110,.16),inset -17px 0 18px rgba(55,84,89,.18),inset 0 -12px 15px rgba(221,228,224,.65)}
.mug-body canvas{left:5%;top:8%;width:90%;height:84%;touch-action:none;cursor:grab;outline:none;}
.mug-body canvas:active{cursor:grabbing}
.mug:before{width:79px;height:183px;top:43px;right:-53px;border:23px solid #fff;box-shadow:inset -9px 2px 10px #aebebb,6px 0 8px #c7d0cd}
.product-mark{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;line-height:1.45;color:#37575c;background:#eaf0ed;border:1px solid #d9e3dc;padding:10px 12px;margin-bottom:14px}
.product-mark strong{font-weight:700}
.drag-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:5px}
.drag-option{border:1px solid #c2cdca;background:#f8f9f6;color:#203940;min-height:40px;padding:8px 5px;font-size:12px}
.drag-option.is-selected{background:#234650;color:#fff;border-color:#234650}
.font-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tip{margin:0;font-size:12px;color:#5d7276;line-height:1.5}
.runic-note{padding:9px 12px;background:#f3ede1;border-left:3px solid #a88a60;font-size:12px;color:#645743}
#size-number{font-variant-numeric:tabular-nums}
#position-status{min-height:1.3em;font-size:12px;color:#476450}
.drag-surface{touch-action:none;cursor:grab;outline:1px solid transparent;}
.drag-surface:active{cursor:grabbing}
.drag-surface:focus-visible{outline:3px solid #b38752;outline-offset:2px}
.flat-wrap{position:relative}
#reset-positions{border:0;background:transparent;text-decoration:underline;padding:5px 0;color:#335b62;font-size:12px;cursor:pointer}
@media(max-width:830px){.canvas-stage{min-height:460px}.mug{max-width:300px}}
@media(max-width:530px){.canvas-stage{min-height:375px}.mug{width:58%;max-width:240px}.mug-body{height:232px}.mug:before{width:61px;height:146px;top:34px;right:-38px;border-width:17px}.drag-options{gap:4px}.font-tools{grid-template-columns:1fr}}
/* Keep controls and mug preview stacked on phones and compact tablets. */
@media(max-width:830px){.builder{grid-template-columns:minmax(0,1fr)}.panel{min-width:0}.preview{min-width:0}}


/* V4: Accessible text-colour palette including every rainbow hue */
.text-color-control{display:grid;gap:9px;margin-top:12px}
.color-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.text-color-option{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;background:#fff;border:1px solid #becbc6;color:#344a4f;min-height:65px;padding:7px 2px;min-width:0;border-radius:5px;cursor:pointer}
.text-color-option[aria-pressed="true"]{border:2px solid #234650;background:#eaf3f1;padding:6px 1px;box-shadow:inset 0 0 0 1px #234650}
.text-color-option:focus-visible{outline:3px solid #b38752;outline-offset:1px}
.color-dot{display:block;width:28px;height:28px;border-radius:50%;background:var(--tone);border:1px solid rgba(0,0,0,.20);box-shadow:0 1px 2px rgba(0,0,0,.07)}
.text-color-auto .color-dot{background:linear-gradient(135deg,#203940 49%,#fffaf2 50%)}
.text-color-rainbow .color-dot{background:linear-gradient(120deg,#e53935 0%,#f57c00 17%,#ffd600 33%,#2ba84a 50%,#1565c0 69%,#4834b8 83%,#a33fbf 100%)}
.color-label{font-size:10px;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.custom-color-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:3px}
.custom-color-row label{font-size:12px;font-weight:600}
#custom-text-color{width:49px;min-width:49px;height:43px;padding:2px;border:1px solid #bbc7c7;border-radius:5px;cursor:pointer;background:#fff}
#current-text-color{color:#466267;font-size:12px;min-width:70px;font-variant-numeric:tabular-nums}
@media(max-width:530px){.color-palette{grid-template-columns:repeat(3,minmax(0,1fr))}.text-color-option{min-height:60px}}

/* V5: bilateral design, rotate preview, prominent font-size picker */
.side-choice{background:#f0f4f1;border:1px solid #dce6df;padding:13px;border-radius:4px}
.side-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.side-switch button{background:#fff;border:1px solid #b9cac6;color:#26434b;padding:10px 8px;min-height:58px;font-size:13px;line-height:1.35}
.side-switch button[aria-pressed="true"]{background:#234650;color:#fff;border-color:#234650}
.side-switch small{display:block;font-size:11px;opacity:.85}
#copy-side{background:#fff;border:1px solid #b9c9c5;color:#234650;padding:10px 12px;font-size:12px;text-align:center}
.size-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.size-controls input[type=number]{margin-left:7px;width:76px;min-height:38px;border:1px solid #b9c9c5;padding:5px 8px;font-size:16px}
label[for="font-size"]{margin-top:4px}
.rotation-box{border:1px solid #d5ded9;background:#f4f6f2;padding:12px 13px;margin-bottom:13px;display:grid;gap:8px}
.rotation-title{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px}
.rotation-title output{font-size:12px;color:#3f5b60}
.rotation-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center}
.rotation-controls button{min-width:70px;min-height:38px;background:#fff;border:1px solid #bdcbc6;color:#2d4b52;padding:5px}
.rotation-controls input{width:100%;min-width:0}
#mug-model::before{opacity:var(--handle-opacity,1);transition:opacity .12s ease}
#mug-model.handle-left::before{right:auto;left:-53px;box-shadow:inset 9px 2px 10px #aebebb,-6px 0 8px #c7d0cd}
.flat-guide{position:absolute;inset:9px;pointer-events:none;display:grid;grid-template-columns:1fr 1fr;border-left:1px dashed rgba(255,255,255,.45)}
.flat-guide::after{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:2px dashed rgba(255,255,255,.75);filter:drop-shadow(1px 0 2px #263638)}
.flat-guide span{font-size:11px;font-weight:600;align-self:start;text-align:center;color:white;text-shadow:0 1px 4px #071d24,0 1px 1px #071d24;padding:4px 2px;z-index:1}
@media(max-width:530px){.rotation-controls{gap:5px}.rotation-controls button{min-width:58px;font-size:12px}.size-row{align-items:flex-start;flex-wrap:wrap}#mug-model.handle-left::before{left:-38px}}

/* V7: zusätzliche Motivauswahl */
.motifs{grid-template-columns:repeat(2,1fr)}
.swatch{height:62px;border:1px solid #d5ddd7;background-size:cover;background-position:center;border-radius:3px}
.swatch.fjord{background-image:url('./fjord.webp');}
.swatch.aurora{background-image:url('./aurora.webp');}
.swatch.wolfguard{background-image:url('./wolfguard.webp');background-size:contain;background-repeat:no-repeat;background-color:#fff;}
.swatch.wolffjord{background-image:url('./wolffjord.webp');background-size:contain;background-repeat:no-repeat;background-color:#fff;}
.motif-option{min-height:120px}
@media(max-width:700px){.motifs{grid-template-columns:1fr}.motif-option{min-height:108px}}

/* V8: Weitere personalisierbare Rohlinge mit schematischer Vorschau */
.product-select-field{padding:15px;border:1px solid #c5d4cf;background:#f0f3ee;margin-bottom:18px}
.product-select-field select{font-weight:700}
.product-select-field .tip{margin:9px 0 0}
body:not([data-product="mug"]) .mug-only{display:none!important}
.other-product-preview{padding:13px 9px 2px}
.other-product-preview[hidden]{display:none!important}
#product-canvas{display:block;width:100%;max-width:610px;aspect-ratio:640/500;height:auto;margin:0 auto;background:linear-gradient(145deg,#f5f5f1,#e9e8e2);border:1px solid #d4dcd6;cursor:crosshair;touch-action:none}
.other-product-preview .preview-note{margin:12px 0 18px}
.toplinks{gap:14px}
@media(max-width:520px){.product-select-field{padding:10px}.toplinks .back{font-size:11px}}

/* V9: authentische Beispielrohlinge neben der schematischen Personalisierung */
.sample-blank-reference{display:grid;grid-template-columns:115px minmax(0,1fr);align-items:center;gap:15px;padding:13px;background:#fff;border:1px solid var(--line);margin:2px 0 13px}
.sample-blank-reference[hidden]{display:none}
.sample-blank-reference img{display:block;max-width:100%;height:115px;object-fit:contain;background:#fff}
.sample-caption{font-size:12px;line-height:1.55;color:var(--muted)}
.sample-caption strong{display:block;color:var(--ink);margin-bottom:3px;font-size:13px}
.sample-caption p{margin:0}
@media(max-width:440px){.sample-blank-reference{grid-template-columns:88px minmax(0,1fr);gap:10px}.sample-blank-reference img{height:92px}}

/* V10: individual motif gallery and optional branding */
.motif-fieldset{padding:0;border:0;margin:0;min-width:0;display:grid;gap:12px}
.motif-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.motif-category{appearance:none;text-align:left;color:var(--ink);border:1px solid var(--line);background:#fcfbf7;padding:11px 12px;min-height:62px;cursor:pointer;font:inherit}
.motif-category strong{display:block;font-size:14px}.motif-category small{display:block;font-size:11px;color:var(--muted)}
.motif-category[aria-pressed="true"]{background:#e8efeb;border:2px solid var(--ink);padding:10px 11px}
.motif-category:focus-visible,.motif-tile:focus-visible{outline:3px solid #b38752;outline-offset:2px}
.gallery-header{display:flex;justify-content:space-between;align-items:center;font-size:13px}
#motif-count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}
.motif-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.motif-tile{appearance:none;text-align:center;background:#fff;border:1px solid #cbd6d2;padding:6px;color:var(--ink);cursor:pointer;border-radius:3px;min-width:0;font:inherit}
.motif-tile[aria-checked="true"]{border:3px solid #163742;padding:4px;background:#eaf2f0}
.motif-tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;background:#e7eceb}
.motif-tile span{display:block;font-size:11px;line-height:1.4;margin-top:5px}
.motif-tile.photo-tile{min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:22px;background:#edf0ed}
.motif-tile.photo-tile span{font-size:12px}
.gallery-quality-note{background:#fff5e6;border-left:3px solid #bc9552;padding:9px 10px}
.brand-options{min-width:0;border:1px solid #baccc8;padding:15px;display:grid;gap:10px;background:#f5f6f0}
.brand-options .check{margin:0}.brand-option-fields{display:grid;gap:10px}
.brand-option-fields .field-label{display:grid;gap:5px}
.brand-option-fields select{width:100%}
[hidden]{display:none !important}
@media(max-width:530px){.motif-categories{grid-template-columns:1fr 1fr}.motif-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* V11: product bundle planner and one-click matching add-ons */
.bundle-planner{border:1px solid #c9d5d0;background:#f3f6f2;padding:15px;display:grid;gap:11px}
.bundle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bundle-choice{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #d2dbd7;padding:10px 11px;font-size:13px;line-height:1.45}
.bundle-choice input{margin-top:3px;accent-color:var(--ink);flex-shrink:0}
.bundle-choice strong{display:block;color:var(--ink)}
.bundle-choice small{display:block;color:var(--muted)}
.bundle-summary{font-size:12px;line-height:1.55;color:#35535a;background:#fff;border-left:3px solid #b89a72;padding:10px 12px}
.bundle-hint{font-size:12px;color:var(--muted)}
.bundle-nav{display:flex;flex-wrap:wrap;gap:8px}
.bundle-switch{background:#fff;border:1px solid #bcccc6;padding:8px 10px;color:#27474f}
.bundle-switch.is-active{background:#234650;color:#fff;border-color:#234650}
.reuse-box{margin-top:15px;border:1px solid #bccac6;background:#f7f8f4;padding:15px;display:grid;gap:10px}
.reuse-actions{display:flex;flex-wrap:wrap;gap:8px}
.reuse-actions button{background:#fff;border:1px solid #bdcbc7;padding:10px 12px;color:#294851}
.package-badge{display:inline-flex;align-items:center;gap:8px;background:#e7efe9;color:#27474f;border:1px solid #c7d5cf;padding:6px 10px;font-size:12px;margin:0 0 8px}
@media(max-width:530px){.bundle-grid{grid-template-columns:1fr}.reuse-actions,.bundle-nav{display:grid;grid-template-columns:1fr}}

/* V16: complete product art adjustment and safe bundle labels */
.bundle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.bundle-choice{min-width:0;max-width:100%;overflow:hidden;padding:9px}
.bundle-choice span{min-width:0;flex:1 1 auto;overflow-wrap:anywhere;hyphens:auto}
.bundle-choice strong{font-size:12px;line-height:1.32;overflow-wrap:anywhere;hyphens:auto}
.bundle-choice small{font-size:11px;line-height:1.4;overflow-wrap:anywhere}
.motif-adjust{border:1px solid #c9d5d0;background:#f1f5f2;padding:14px;display:grid;gap:10px;min-width:0}
.motif-adjust h3{margin:0;font:700 13px Arial,sans-serif}
.motif-adjust .image-ranges{grid-template-columns:1fr 1fr 1fr;gap:10px}
#reset-image{background:white;border:1px solid #becdc7;padding:9px 12px;color:#234650}
.drag-option[data-move-image][aria-pressed=true]{background:#234650;color:#fff}
.sample-blank-reference img{width:115px;height:115px;object-fit:contain}
@media(max-width:650px){.bundle-grid{grid-template-columns:1fr}.motif-adjust .image-ranges{grid-template-columns:1fr}}

/* V17: transparent sample pricing, safe scaling notice, customer account */
.mug-print-options{display:grid;gap:9px;border:1px solid #c8d8d0;background:#f2f7f5;padding:15px;min-width:0}
.mug-print-options select{max-width:100%}.mug-print-explainer{font-size:13px;margin:0;color:#415c62}.mug-print-price{font:700 19px Georgia,serif;color:#1d4a51}
.image-quality-message{font-size:12px;line-height:1.55;background:#edf4f0;color:#284e47;border-left:3px solid #69a394;padding:11px 13px;margin:9px 0}
.image-quality-message[data-quality="bad"]{background:#fff0e5;color:#85421d;border-left-color:#d28b51}
.account-panel{border:1px solid #c7d5d1;background:#f3f7f5;padding:16px;display:grid;gap:9px;margin-top:18px}
.account-panel h3{margin:0}.account-status{font-size:13px;color:#355a60}
.account-panel-form{display:grid;gap:8px}.account-panel-form input{width:100%;min-width:0}
.account-panel .btn:disabled{opacity:.5;cursor:not-allowed}
.account-panel a{font-size:13px;text-decoration:underline}
@media(max-width:830px){.account-panel{padding:12px}}

/* V18: One continuous wraparound design, without the side A/B divider. */
body[data-print-mode="panorama"] .flat-guide,
.flat-guide[hidden]{display:none!important}
body[data-print-mode="panorama"] #copy-side{display:none!important}
body[data-print-mode="panorama"] .flat-title{font-weight:700;color:#1d4d55}


/* 2026-10: The primary product visualization follows configuration controls
   through the complete font-colour picker. The lower print and account panels
   stay in ordinary document flow, avoiding a too-tall sticky panel. */
@media (min-width:831px){
  .builder { align-items:stretch; }
  .builder > .preview { position:relative; top:auto; align-self:stretch; min-width:0; }
  .preview-sticky-zone { position:relative; min-height:550px; }
  .preview-dock {
    position:sticky; top:var(--fv-preview-top, 90px); z-index:6;
    background:#fffdfa; padding-bottom:12px;
  }
  .preview-dock .canvas-stage { min-height:clamp(205px, 34vh, 325px); }
  .preview-dock .mug { width:min(73%, 350px); }
  .preview-dock .mug-body { height:clamp(155px, 24vh, 218px); }
  .preview-dock .mug::before { width:66px;height:133px;right:-43px;top:25px;border-width:18px; }
  .preview-dock .preview-note { margin-top:9px; font-size:11px; line-height:1.4; }
}
@media (max-width:830px){
  .preview-sticky-zone {height:auto!important; min-height:0;}
  .preview-dock {position:static;}
}
@media (min-width:831px) and (max-height:710px){
  .preview-dock .canvas-stage{ min-height:190px; }
  .preview-dock .mug-body{ height:155px; }
  .preview-dock .rotation-box{ padding:8px; }
  .preview-dock .rotation-box .tip{ margin:4px 0; font-size:11px; }
  .preview-dock h2{font-size:24px;margin-bottom:9px;}
}


/* V23 — upright, 11-oz-proportioned rotating 2D mug.
   A conventional 11-oz straight-sided mug is about 82 mm wide and 95 mm high.
   This is a dimensionally proportioned schematic, not a calibrated printable mockup. */
.mug,
.preview-dock .mug{
  transform:none !important;
  width:min(50%, 225px);
  max-width:225px;
  position:relative;
  filter:drop-shadow(10px 15px 12px rgba(22,39,39,.19));
}
.mug-body,
.preview-dock .mug-body{
  width:100%;
  height:auto;
  aspect-ratio:82 / 95;
  border:0;
  border-radius:11px 11px 19px 19px / 10px 10px 16px 16px;
  background:linear-gradient(90deg,#d0d8d5 0%,#fff 12%,#fff 51%,#f8faf9 83%,#b7c6c2 100%);
  box-shadow:inset 11px 0 15px rgba(62,90,89,.13),inset -13px 0 17px rgba(53,81,81,.15),0 2px 3px rgba(38,54,52,.14);
  overflow:hidden;
  position:relative;
  z-index:1;
}
.mug-body::before,
.preview-dock .mug-body::before{
  height:15px;
  background:linear-gradient(180deg,#e2e7e5 0%,#fbfcfb 35%,rgba(255,255,255,.8) 70%,transparent 100%);
  border-radius:50% 50% 0 0 / 95% 95% 0 0;
  z-index:3;
}
.mug-body::after,
.preview-dock .mug-body::after{
  box-shadow:inset 12px 0 18px rgba(61,91,93,.15),inset -13px 0 18px rgba(54,85,87,.17),inset 0 -11px 12px rgba(219,225,223,.60);
  z-index:4;
}
.mug-body canvas,
.preview-dock .mug-body canvas{
  left:6%;top:8%;width:88%;height:83%;
  object-fit:fill;box-shadow:none;
  cursor:grab;touch-action:none;
}
.mug::before,
.preview-dock .mug::before{
  content:'';position:absolute;top:18%;right:-25%;left:auto;
  width:46%;height:60%;
  border:clamp(11px,1.4vw,18px) solid #fcfdfb;
  border-radius:50%;z-index:0;
  box-shadow:inset -7px 1px 9px rgba(116,138,135,.36),6px 1px 7px rgba(100,120,119,.17);
}
#mug-model.handle-left::before,
.preview-dock #mug-model.handle-left::before{
  left:-25%;right:auto;
  box-shadow:inset 7px 1px 9px rgba(116,138,135,.36),-6px 1px 7px rgba(100,120,119,.17);
}
.canvas-stage,
.preview-dock .canvas-stage{
  min-height:clamp(270px,39vh,350px);
  padding:15px 18px;
}
/* V23 — stop stretching the left configuration card into an empty white bar. */
@media (min-width:831px){
  .builder {align-items:start;}
  .builder > .panel:not(.preview) {align-self:start;height:auto;}
  .builder > .preview {align-self:start;}
  .preview-sticky-zone {min-height:0;}
}
@media (min-width:831px) and (max-height:710px){
  .preview-dock .canvas-stage{min-height:225px;}
  .preview-dock .mug{width:min(46%,170px);}
}
@media (max-width:830px){
  .canvas-stage,.preview-dock .canvas-stage{min-height:310px;}
  .mug,.preview-dock .mug{width:min(57%,205px);max-width:205px;}
}
@media (max-width:530px){
  .canvas-stage,.preview-dock .canvas-stage{min-height:285px;}
  .mug,.preview-dock .mug{width:min(60%,190px);max-width:190px;}
}