@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#242623;--muted:#73766f;--accent:#e56636;--paper:#fafaf8;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;overflow:hidden;height:100dvh}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,#table:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{border:0;background:none}header{position:fixed;z-index:10;top:0;left:0;width:100%;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;pointer-events:none}header>*{pointer-events:auto}.wordmark{text-decoration:none;color:var(--ink);font-size:26px;font-weight:800;letter-spacing:-1.3px}.wordmark span{font-weight:500}.wordmark i{font-size:11px;font-style:normal;vertical-align:top;margin-left:3px}.edition,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600}.edition{color:var(--muted)}.reset{font-size:13px;display:flex;gap:10px;align-items:center}.reset:first-letter{font-size:24px}#table{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none}#table.dragging{cursor:grabbing}#world{position:absolute;inset:0}.product{position:absolute;width:var(--w);height:calc(var(--w)*1.22);padding:0;left:0;top:0;transform:translate3d(var(--x),var(--y),0) rotate(var(--r));transition:opacity .55s,filter .55s;will-change:transform;touch-action:none}.product .photo{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;user-select:none;filter:drop-shadow(7px 14px 9px #24262312)}.product .label{position:absolute;bottom:-15px;left:50%;white-space:nowrap;transform:translateX(-50%);font-size:10px;letter-spacing:1.4px;opacity:0;transition:opacity .25s}.product:hover .label,.product:focus-visible .label{opacity:.7}.product .brand-preview{position:absolute;left:40%;top:51%;width:25%;height:12%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;animation:brand-in .65s var(--ease) both;filter:opacity(.85)}@keyframes brand-in{from{opacity:0;transform:translateY(8px) scale(.8)}to{opacity:1;transform:none}}.product.muted{opacity:.13;filter:blur(1px)}.product.selected{z-index:8}.product.selected .label{display:none}.intro{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:440px;text-align:center;z-index:5;transition:opacity .35s,transform .55s var(--ease);pointer-events:none}.intro>*{pointer-events:auto}.intro .eyebrow{font-size:10px;letter-spacing:2px;color:#757a71}h1{font-family:'Manrope',Arial,sans-serif;font-weight:500;font-size:64px;line-height:1.05;letter-spacing:-3.8px;margin:20px 0 28px}h1 span{color:var(--accent)}.search-wrap{height:54px;width:350px;margin:auto;background:#fff;border:1px solid #dedfd9;border-radius:40px;display:flex;align-items:center;padding:0 18px;box-shadow:0 5px 20px #272b2304}.search-wrap svg{width:18px;fill:none;stroke:var(--ink);stroke-width:1.6;flex-shrink:0}.search-wrap input{min-width:0;width:100%;border:none;background:transparent;outline:none;padding:12px;font-size:13px}.search-wrap:focus-within{border-color:var(--ink)}kbd{color:#9a9d97;border:1px solid #e7e8e3;border-radius:4px;font-size:11px;padding:1px 5px}.upload{margin-top:19px;font-size:13px;color:#73766f;padding:8px}.upload span{color:var(--ink)}.upload span:first-child{border-bottom:1px solid #b9bcb3;padding-bottom:3px}.focused .intro{opacity:0;transform:translate(-50%,-45%);pointer-events:none}.focused .intro *{pointer-events:none}footer{position:fixed;z-index:12;bottom:30px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;pointer-events:none}footer>*{pointer-events:auto}.table-hint{display:flex;gap:13px;align-items:center;font-size:12px;line-height:1.6}.table-hint small{font-size:10px;color:var(--muted)}.drag-icon{font-size:26px;color:#7b8174}#list-toggle{background:var(--ink);color:white;min-width:248px;height:55px;border-radius:32px;font-size:14px;padding:0 23px;box-shadow:0 9px 30px #2426231c;display:flex;align-items:center;gap:9px}#list-toggle>span:first-child{color:#c6ccc1}#list-toggle b{font-weight:400}.list-arrow{margin-left:auto;font-size:22px}.collection-note{font-size:10px;letter-spacing:1.8px;color:var(--muted)}.back{position:fixed;top:110px;left:4%;z-index:11;background:#ffffffd9;padding:12px 16px;border-radius:30px;font-size:13px}#focus-info{position:absolute;z-index:10;left:50%;bottom:120px;transform:translateX(-50%);width:350px;text-align:center;animation:rise .5s var(--ease)}.focus-meta{display:flex;justify-content:center;gap:18px;font-size:10px;letter-spacing:1.5px;color:var(--muted)}.focus-meta span:last-child{color:#777e66}#focus-title{font-family:Manrope,Arial,sans-serif;font-size:26px;letter-spacing:-1px;margin:10px 0}#focus-spec{font-size:13px;color:var(--muted);margin:0 0 20px}#source{background:var(--accent);color:white;padding:15px 32px;border-radius:30px;font-weight:500;min-width:180px}#source:disabled{background:#e8ebe4;color:#4f6047;cursor:default}#toast{position:fixed;z-index:40;left:50%;bottom:98px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:white;border:1px solid #e4e6df;padding:12px 20px;border-radius:24px;font-size:13px;transition:.3s;white-space:nowrap}#toast.visible{opacity:1;transform:translate(-50%,0)}#logo-status{position:fixed;top:100px;left:50%;transform:translateX(-50%);z-index:15;background:#fff;border:1px solid #e0e3d9;border-radius:24px;font-size:12px;padding:7px 8px 7px 15px;white-space:nowrap}#logo-status button{font-size:20px;margin-left:8px}#search-status{font-size:12px;color:var(--muted);margin-top:12px}#scrim{position:fixed;inset:0;background:#1e211b40;backdrop-filter:blur(5px);z-index:20}#sheet{position:fixed;z-index:21;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,600px);background:var(--paper);border-radius:28px 28px 0 0;max-height:85dvh;overflow:auto;padding:0 30px max(25px,env(safe-area-inset-bottom));box-shadow:0 -20px 100px #20222014;animation:sheet-in .45s var(--ease)}#sheet-handle{display:block;width:100%;padding:13px}#sheet-handle span{display:block;background:#d6d9d0;width:36px;height:4px;margin:auto;border-radius:10px}.sheet-heading{display:flex;align-items:center;justify-content:space-between}.sheet-heading h2{font-family:Manrope,Arial,sans-serif;font-size:27px;font-weight:500;letter-spacing:-1px;margin:10px 0}.sheet-heading h2 span{font-size:13px;vertical-align:top;display:inline-flex;align-items:center;justify-content:center;background:#e9ece4;width:24px;height:24px;border-radius:50%;margin-left:12px;letter-spacing:0}.sheet-heading .eyebrow{color:var(--muted);font-size:9px}#close-sheet{font-size:28px;width:44px;height:44px}.sheet-note{font-size:13px;color:var(--muted);margin:4px 0 22px}.list-row{display:flex;gap:18px;align-items:center;border-top:1px solid #e1e4dc;padding:15px 0}.list-row img{width:65px;height:86px;object-fit:contain;mix-blend-mode:multiply}.list-row .details{flex:1}.list-row h3{font-size:14px;font-weight:500;margin:0 0 6px}.list-row p{font-size:11px;color:var(--muted);margin:5px 0}.list-row button{width:40px;height:40px;font-size:22px;color:#777}.empty{padding:35px 5px;text-align:center;font-size:15px;color:var(--muted);line-height:1.8}.next-steps{border-top:1px solid #e1e4dc;padding:24px 0}.next-steps .eyebrow{font-size:9px;color:var(--muted)}.next-steps p{font-size:12px;line-height:1.8}.next-steps p span{color:#8b9085}.next-steps small{font-size:11px;color:#83887e}.continue{width:100%;border-radius:30px;background:var(--ink);color:white;padding:16px;text-align:left;display:flex;justify-content:space-between}body.sheet-open .intro{pointer-events:none}[hidden]{display:none!important}@keyframes sheet-in{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}@keyframes rise{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}.flying{position:fixed;z-index:19;pointer-events:none;object-fit:contain;transition:transform .65s var(--ease),opacity .65s;filter:drop-shadow(0 8px 10px #2222)}
@media(min-width:1400px){h1{font-size:76px}.intro{width:500px}}@media(max-width:700px){header{height:77px;padding:0 24px}.wordmark{font-size:23px}.edition,.reset span,.collection-note{display:none}.reset{font-size:23px;padding:10px}.intro{width:calc(100% - 42px);top:44%}h1{font-size:48px;letter-spacing:-2.8px;margin:17px 0 22px}.intro .eyebrow{font-size:8px;letter-spacing:1.7px}.search-wrap{width:285px;max-width:100%;height:48px;padding:0 15px;background:#fffffff5}.search-wrap input{font-size:12px;padding:10px}kbd{display:none}.upload{font-size:12px;margin-top:12px}footer{left:20px;right:20px;bottom:max(19px,env(safe-area-inset-bottom));justify-content:center}.table-hint{position:absolute;bottom:71px;text-align:center;font-size:11px;gap:8px;color:#727a69}.table-hint small{display:none}.drag-icon{font-size:20px}#list-toggle{height:53px;min-width:245px}.focused .table-hint{display:none}.back{top:80px;left:16px;font-size:12px}#focus-info{bottom:101px;width:calc(100% - 44px);max-width:350px}#focus-title{font-size:26px}#focus-spec{margin-bottom:15px;font-size:12px}#source{padding:14px 28px}.focus-meta{font-size:9px}#logo-status{top:80px;font-size:11px}.focused #logo-status{top:128px}#sheet{padding-left:24px;padding-right:24px}.product .label{display:none}}
@media(max-height:650px){h1{font-size:40px;margin:10px 0 15px}.intro{top:43%}#focus-info{bottom:88px}#focus-title{font-size:21px;margin:6px 0}#focus-spec{margin-bottom:10px}.focus-meta{display:none}.table-hint{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.product{mix-blend-mode:multiply}.product .photo{filter:contrast(1.06)}

/* Product-led sourcing table */
.intro{width:330px;top:45%;text-shadow:0 2px 18px var(--paper)}
.intro .eyebrow{display:none}h1{font-size:45px;letter-spacing:-2.4px;margin:0 0 20px;line-height:1.08}
.intro>h1{pointer-events:none}.search-wrap{width:282px;height:44px;background:#ffffffc9;backdrop-filter:blur(8px);box-shadow:none;border-color:#dedfd980}.search-wrap input{font-size:11px}.search-wrap svg{width:15px}.upload{font-size:11px;margin-top:9px}
.product:focus{outline:none}.product:focus-visible .photo{filter:drop-shadow(0 0 3px #646e58)}.product.selected:focus-visible .photo{filter:none}.product.muted{opacity:.075;filter:blur(2px)}
.table-hint{background:#fafaf8c9;border-radius:30px;padding:8px 14px;backdrop-filter:blur(8px)}.drag-icon{display:inline-block;animation:explore 3.5s ease-in-out 3}@keyframes explore{0%,70%,100%{transform:translateX(0)}80%{transform:translateX(-5px)}90%{transform:translateX(5px)}}
#source{background:var(--ink)}#focus-info{background:radial-gradient(ellipse,#fafaf8 35%,#fafaf800 72%)}
@media(min-width:1400px){h1{font-size:53px}.intro{width:370px}}
@media(max-width:700px){.intro{width:270px;top:43%}h1{font-size:34px;letter-spacing:-1.8px;margin:0 0 16px}.search-wrap{width:242px;height:42px}.search-wrap input{font-size:10px}.upload{font-size:11px;margin-top:7px}.table-hint{bottom:64px;font-size:10px;padding:6px 12px}.product .photo{filter:contrast(1.06)}header{background:linear-gradient(#fafaf8e8,#fafaf800)}#focus-title{font-size:23px}.focus-meta{display:none}#focus-info{bottom:100px}#source{min-height:46px}}
@media(max-height:650px){h1{font-size:29px;margin:0 0 12px}.intro{top:42%}#focus-info{bottom:85px}#focus-title{font-size:20px}}

/* Layered procurement surface */
.product .photo{filter:contrast(1.14) brightness(1.025)}.product.muted{opacity:.11;filter:blur(1px)}.product.selected .photo{filter:contrast(1.14) brightness(1.025) drop-shadow(0 22px 15px #24262313)}
.table-prop{position:absolute;left:0;top:0;pointer-events:none;background-image:url('assets/procurement-objects.png');background-size:200% 200%;mix-blend-mode:multiply;transition:opacity .5s;will-change:transform}.table-prop.box{background-position:0 0}.table-prop.card{background-position:100% 0}.table-prop.catalog{background-position:0 100%}.table-prop.carton{background-position:100% 100%}.focused .table-prop{opacity:.09}
.flying-copy{position:fixed;z-index:19;pointer-events:none;padding:0;mix-blend-mode:multiply;transform-origin:center}.flying-copy .photo{width:100%;height:100%;object-fit:contain;filter:contrast(1.14) brightness(1.025)}.flying-copy .brand-preview{position:absolute;object-fit:contain;mix-blend-mode:multiply}#count{display:inline-block}#source:focus-visible{outline:2px solid #757a71;outline-offset:4px}
.search-wrap input{font-size:12px}.upload{font-size:12px}.table-hint{font-size:12px}
@media(max-width:700px){.intro{top:43%;width:258px}h1{font-size:32px}.search-wrap{width:242px}.search-wrap input{font-size:12px}.upload{font-size:12px}.table-hint{font-size:12px}.product .photo{filter:contrast(1.14) brightness(1.025)}}

/* Layout masks for the three source photographs with visible studio backdrops.
   Coordinates follow the main product silhouette; replace with original transparent packshots. */
img[src$="20oz-591ml-coffee-cup-21-05.webp"]{clip-path:polygon(40% 22%,44% 22%,45% 32%,59% 32%,60% 37%,66% 37%,71% 40%,72% 49%,70% 53%,58% 54%,56% 74%,53% 76%,39% 76%,36% 74%,35% 55%,33% 52%,33% 32%,39% 32%)}
img[src$="jug-31-03.webp"]{clip-path:polygon(46% 12%,54% 12%,59% 16%,61% 23%,61% 28%,59% 29%,59% 34%,62% 38%,63% 41%,63% 86%,59% 89%,43% 89%,39% 87%,39% 40%,43% 34%,43% 29%,41% 28%,41% 22%,43% 16%)}
img[src$="jug-19-04.webp"]{clip-path:polygon(48% 38%,57% 38%,58% 44%,61% 47%,61% 49%,67% 49%,70% 51%,70% 72%,68% 75%,60% 75%,60% 78%,58% 80%,45% 80%,43% 77%,44% 47%,47% 44%)}
.product[data-id="WT-0042"] .photo{transform:scale(1.5);transform-origin:53% 60%}.product[data-id="WT-0006"] .photo{transform:scale(1.35);transform-origin:50% 50%}

.product.selected .photo{filter:contrast(1.14) brightness(1.025)}

header{background:linear-gradient(#fafaf8ed,#fafaf800)}

/* Real-catalogue additions: a product with no photo in the master shows an empty
   slot instead of a fabricated image, and the list row gets a matching tile. */
.product.is-empty .label{opacity:.5}
.product .photo--none{display:block;width:100%;height:100%;border:1px dashed #d3d6cd;border-radius:12px}
.list-row .noimg{width:65px;height:86px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:#eef0ea;border-radius:8px;font-size:10px;letter-spacing:.5px;color:#98a094}

/* ---- Logo preview: the brand layer sits in the drawn image rectangle -------- */
.logo-layer{position:absolute;pointer-events:none;z-index:2}
.logo-layer .brand-mark{position:absolute;object-fit:contain;pointer-events:none;animation:brand-in .5s var(--ease) both}
.logo-layer .brand-mark.ink-dark{mix-blend-mode:multiply}
.logo-layer .brand-mark.ink-bright{mix-blend-mode:screen}
.logo-layer.bm-laser .brand-mark{filter:grayscale(1) contrast(1.06) brightness(.9);opacity:.9}
.logo-layer.bm-laser .brand-mark.ink-bright{filter:grayscale(1) contrast(1.03) brightness(1.5);opacity:.85}
.logo-layer.bm-silk .brand-mark{filter:saturate(.85) contrast(1.02);opacity:.94}
.logo-layer.bm-uv .brand-mark{mix-blend-mode:normal;filter:saturate(1.04);opacity:1}
.logo-layer .brand-mark.draggable{pointer-events:auto;cursor:grab;touch-action:none}
.logo-layer .brand-mark.draggable:active{cursor:grabbing}
.brand-handle{position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:#fff;border:1.5px solid var(--accent);pointer-events:auto;cursor:nwse-resize;touch-action:none;box-shadow:0 1px 5px #2426232e}
#brand-bar{margin:0 0 4px}
.brand-methods{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.bm{height:34px;padding:0 15px;border-radius:999px;border:1px solid #dedfd9;background:#fff;font-size:12px;color:#4a4842;transition:background .16s,color .16s,border-color .16s}
.bm:hover{border-color:#c8cac3}
.bm.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.brand-tools{display:flex;gap:16px;margin:0 0 10px}
.brand-tools button{background:none;border:0;padding:0;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.brand-tools button:hover{color:var(--ink)}
.brand-hint{font-size:11px;color:var(--muted);margin:0 0 16px;line-height:1.5}
.brand-hint span{color:#aaa7a1}
#brand-none{font-size:12px;color:var(--muted);margin:0 0 16px;line-height:1.5;max-width:44ch}

/* ======================= DISCOVER -> BRAND ==================================== */
/* the chosen cups are the protagonists: the table steps back, the workspace steps up */
#table,.intro,footer{transition:opacity .42s var(--ease),transform .42s var(--ease)}
body.to-brand #table{opacity:.07;transform:scale(.985);pointer-events:none}
body.to-brand .intro{opacity:0;transform:translate(-50%,-46%);pointer-events:none}
body.to-brand footer{opacity:0;transform:translateY(14px);pointer-events:none}
body.to-brand header{opacity:.25}
#brand{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:var(--paper);opacity:0;transform:translateY(16px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
body.stage-brand #brand{opacity:1;transform:none}
body.stage-brand{overflow:hidden}
.brand-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:clamp(14px,2.4vw,24px) clamp(16px,3.6vw,52px);border-bottom:1px solid #e7e9e2;flex-wrap:wrap}
.brand-back{background:none;border:0;padding:0;font-size:13px;color:var(--muted)}
.brand-back:hover{color:var(--ink)}
.flow{display:flex;gap:clamp(12px,1.6vw,24px);list-style:none;margin:0;padding:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b3b2ac;flex-wrap:wrap}
.flow li{position:relative;padding-bottom:6px}
.flow .is-done{color:#8d8f88}
.flow .is-done:after{content:" ✓"}
.flow .is-now{color:var(--ink);font-weight:600}
.flow .is-now:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.brand-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr);gap:clamp(18px,3vw,54px);padding:clamp(16px,3vw,40px) clamp(16px,3.6vw,52px);align-items:center}
.brand-hero{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.hero-stage{position:relative;width:min(74vw,300px);aspect-ratio:1/1.22;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 6px 26px #2426230f}
.hero-stage .photo{width:100%;height:100%;object-fit:contain;display:block;mix-blend-mode:multiply}
.hero-stage .photo--none{display:block;border:1px dashed #d3d6cd;border-radius:10px;background:none}
.hero-meta{text-align:center;max-width:46ch}
.hero-sku{font-size:10px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.hero-meta h2{font-family:Manrope,Arial,sans-serif;font-size:clamp(19px,2.3vw,27px);font-weight:500;letter-spacing:-.6px;margin:8px 0 6px}
.hero-meta p{font-size:13px;color:var(--muted);margin:0}
.brand-side{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0}
.brand-upload{height:44px;padding:0 20px;border-radius:999px;border:1px solid #dedfd9;background:#fff;font-size:13px;color:var(--ink);margin-bottom:16px}
.brand-upload:hover{border-color:#c8cac3}
.brand-ghost{margin-top:4px;background:none;border:0;padding:0;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.brand-ghost:hover{color:var(--ink)}
.brand-na{font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 14px;max-width:42ch}
.brand-strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:0 clamp(16px,3.6vw,52px) 12px;flex:0 0 auto}
.brand-strip::-webkit-scrollbar{display:none}
.brand-chip{position:relative;flex:0 0 auto;width:64px;background:none;border:0;padding:0;cursor:pointer}
.brand-chip .tile{position:relative;display:block;width:64px;height:78px;border-radius:6px;background:var(--wb-chip,#f1efec);overflow:hidden;transition:box-shadow .18s,background .18s}
.brand-chip img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.brand-chip .n{display:block;margin-top:6px;font-size:9px;letter-spacing:.08em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-chip.is-on .tile{box-shadow:0 0 0 1.5px var(--accent)}
.brand-chip.is-on .n{color:var(--ink)}
.brand-chip .flag{position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;background:#c9cbc4}
.brand-chip.has-logo .flag{background:var(--accent)}
.brand-foot{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px clamp(16px,3.6vw,52px) clamp(16px,2.6vw,28px)}
.brand-foot .continue{max-width:340px}
.pack-note{font-size:12px;color:var(--muted);margin:0}
@media (max-width:820px){.brand-body{grid-template-columns:1fr;align-items:start;gap:20px;overflow-y:auto}.hero-stage{width:min(66vw,240px)}.brand-side{width:100%}.brand-methods{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){#table,.intro,footer,#brand{transition:none!important}}
.view-all{margin-left:8px;background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.view-all:hover{color:var(--accent)}

/* the table stays faintly perceptible behind the bench — "your cups, taken off the table" */
#brand{background:rgba(250,250,248,.93)}
body.to-brand #table{opacity:.13}

/* ======================= PACK / CARTONS / REQUEST / SUCCESS ================= */
.stage-panel{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:rgba(250,250,248,.93);opacity:0;transform:translateY(16px);transition:opacity .42s var(--ease),transform .42s var(--ease)}
body.stage-brand #brand,body.stage-pack #pack,body.stage-ship #ship,body.stage-request #request,body.stage-success #success{opacity:1;transform:none}
body.to-brand header,body.to-brand .intro,body.to-brand footer{opacity:.13}
.step-lead{font-size:14px;line-height:1.55;color:var(--ink);margin:0 0 16px;max-width:44ch}
.step-note{font-size:11px;line-height:1.5;color:var(--muted);margin:14px 0 0;max-width:46ch}
/* packaging chooser: neutral structure previews, no quoted parameters */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;width:100%;max-width:440px}
.pack-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 12px;border:1px solid #e4e6df;border-radius:10px;background:#fff;cursor:pointer;text-align:center;transition:border-color .16s,box-shadow .18s,transform .18s}
.pack-card:hover{border-color:#cfd2c9;transform:translateY(-1px)}
.pack-card.is-on{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent)}
.pack-card svg{width:66px;height:74px;display:block}
.pack-card b{font-size:12.5px;font-weight:600;letter-spacing:-.1px}
.pack-card span{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#b3b2ac}
.pack-custom{display:block;margin:14px 0 0;font-size:12px;color:var(--ink);max-width:440px}
.pack-custom textarea{margin-top:8px;width:100%;border:1px solid #e0e2db;border-radius:8px;padding:10px 12px;font:inherit;font-size:12.5px;background:#fff;resize:vertical}
/* per-product choice lines */
.pick-list{display:flex;flex-direction:column;gap:8px;width:100%;max-width:520px}
.pick-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);border-top:1px solid #eceee7;padding-top:8px}
.pick-row b{color:var(--ink);font-weight:600}
.pick-dot{width:7px;height:7px;border-radius:50%;background:#cfd2c9;flex:0 0 auto}
.pick-dot.on{background:var(--accent)}
/* quantity */
.qty-row{display:flex;align-items:center;gap:10px;margin-top:16px}
.qty-row button{width:40px;height:40px;border-radius:50%;border:1px solid #dedfd9;background:#fff;font-size:17px;line-height:1;color:var(--ink)}
.qty-row button:hover{border-color:#c8cac3}
.qty-row input{width:96px;height:44px;text-align:center;font-size:15px;font-weight:600;border:1px solid #dedfd9;border-radius:8px;background:#fff;font-family:inherit}
.qty-unit{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.carton-card{border:1px solid #e4e6df;border-radius:10px;background:#fff;padding:18px 20px;max-width:420px;width:100%}
.carton-card h4{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.carton-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12.5px}
.carton-card dt{color:var(--muted)}
.carton-card dd{margin:0;color:var(--ink)}
.carton-pending{color:var(--muted)}
.batch{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:0 clamp(16px,3.6vw,52px) 12px}
.batch::-webkit-scrollbar{display:none}
.batch-card{flex:0 0 auto;display:flex;align-items:center;gap:10px;border:1px solid #e7e9e2;border-radius:10px;background:#fff;padding:8px 12px 8px 8px}
.batch-card img{width:38px;height:48px;object-fit:contain;mix-blend-mode:multiply}
.batch-card .b-meta{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted)}
.batch-card .b-meta b{font-size:12px;color:var(--ink)}
.batch-total{display:flex;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 6px}
/* request */
.request-body{flex:1;min-height:0;overflow-y:auto;padding:clamp(18px,3vw,40px) clamp(16px,3.6vw,52px);width:min(1080px,100%);margin:0 auto}
.req-title{font-family:Manrope,Arial,sans-serif;font-size:clamp(22px,3vw,34px);font-weight:500;letter-spacing:-1px;margin:0 0 22px}
.req-list{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
.req-row{display:flex;gap:18px;align-items:flex-start;border-top:1px solid #e7e9e2;padding-top:16px}
.req-row img{width:86px;height:106px;object-fit:contain;mix-blend-mode:multiply;flex:0 0 auto}
.req-row .r-main{min-width:0;flex:1}
.req-row h4{margin:0 0 4px;font-size:14px;font-weight:600;line-height:1.35}
.req-row .r-sku{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.req-row dl{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12px}
.req-row dt{color:var(--muted)}
.req-row dd{margin:0;color:var(--ink)}
.req-form{border-top:1px solid #e7e9e2;padding-top:22px;max-width:620px}
.req-form h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 16px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{border:1px solid #e0e2db;border-radius:8px;padding:11px 13px;font:inherit;font-size:13.5px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.form-hint{font-size:11.5px;color:var(--muted);margin:14px 0 0;min-height:16px}
/* success */
.success-body{flex:1;min-height:0;overflow-y:auto;padding:clamp(28px,5vw,64px) clamp(16px,3.6vw,52px);width:min(760px,100%);margin:0 auto}
.success-title{font-family:Manrope,Arial,sans-serif;font-size:clamp(30px,5vw,52px);font-weight:500;letter-spacing:-1.8px;margin:10px 0 14px}
.success-title span{color:var(--accent)}
.success-lead{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 26px;max-width:44ch}
.ref{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 26px}
.ref b{font-size:15px;letter-spacing:.02em;color:var(--ink);text-transform:none}
.prototype-note{font-size:11.5px;color:var(--muted);margin:8px 0 26px}
.success-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
@media (max-width:820px){.request-body,.success-body{padding-bottom:24px}.req-row img{width:64px;height:80px}.batch{padding-bottom:8px}}

/* in the flow the discover chrome is gone; only the table stays faintly behind */
body.to-brand .intro,body.to-brand #focus-info,body.to-brand #back,body.to-brand #logo-status{opacity:0!important;pointer-events:none!important}
body.to-brand header,body.to-brand footer{opacity:.13!important;pointer-events:none!important}

/* Focus: the product details live in a bar under the cup and must never cover it.
   (Empty space above the bar is where the selected cup stays centred.) */
#focus-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 22px;
  width:min(94vw,1000px);left:50%;transform:translateX(-50%);bottom:100px;
  padding:12px 20px;border-radius:18px;background:rgba(250,250,248,.92);backdrop-filter:blur(7px);text-align:left;
  max-height:26vh;overflow:auto}
#focus-info .focus-meta{flex-direction:column;gap:3px;align-items:flex-start;font-size:10px}
#focus-info #focus-title{font-size:21px;margin:0}
#focus-info #focus-spec{margin:0;font-size:12px}
#focus-info #brand-bar{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px}
#focus-info #brand-bar .brand-methods,#focus-info #brand-bar .brand-tools{justify-content:flex-start}
#focus-info #brand-bar .brand-hint{flex:1 0 100%;margin:0;font-size:11px}
#focus-info #source{padding:12px 24px;min-width:0}
@media(max-width:899px){
  #focus-info{bottom:78px;padding:10px 14px;gap:3px 14px;max-height:30vh}
  #focus-info #focus-title{font-size:19px}
  #focus-info .focus-meta{display:none}
}

/* Focus, pass 2: a compact bar plus a slightly smaller focused cup, so the two can
   never touch at any viewport we support. */
#focus-info{padding:8px 18px;gap:2px 18px;bottom:96px}
#focus-info #focus-title{font-size:19px}
#focus-info #brand-bar .brand-hint{flex:0 1 auto;font-size:10px;margin:0}
#focus-info .focus-meta{font-size:9px}
.focused .product.selected{scale:.9}
@media(max-width:899px){
  #focus-info{bottom:74px;padding:8px 12px;gap:2px 10px;max-height:34vh}
  #focus-info #focus-title{font-size:18px}
  #focus-info #brand-bar .brand-hint{display:none}
  #focus-info #brand-bar .bm{font-size:12px;padding:6px 9px}
  #focus-info #brand-bar .brand-tools button{font-size:12px}
  #focus-info #source{padding:10px 18px;font-size:12px;min-height:40px}
  .focused .product.selected{scale:.82}
}