/* Bouquet visual language follows the Bead Studio; arrangement geometry stays in bouquet.css. */
:root{--ink:#515c4d;--muted:#818575;--pink:#738269;--line:#dadcd0;--paper:#f8f5ee;--serif:'DM Sans',Arial,sans-serif}
body{font-family:'DM Sans',Arial,sans-serif;background:var(--paper);color:var(--ink)}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.04em}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline-color:#64775c}
button:hover{background:#e9ede2}button:disabled{cursor:default;opacity:.35}
.studio-header{min-height:82px;padding:0 4vw;display:flex;align-items:center;gap:44px;border-bottom:1px solid var(--line)}
.wordmark{font-family:'Josefin Sans','DM Sans',sans-serif;font-size:32px;font-weight:300;letter-spacing:.08em}
.back-link{font-size:12px}.header-caption{margin-left:auto;font-size:15px;font-style:italic;color:#7b806f}
.header-actions{gap:14px;font-size:24px}.header-actions button{width:32px;height:36px}#bag-count{background:#738269}
.studio-main{max-width:1550px;margin:auto;padding:43px 4vw 0}
.studio-intro{display:flex;align-items:center;justify-content:space-between;gap:24px}.studio-intro .eyebrow{font-size:10px;margin-bottom:14px}
.studio-intro h1{font-size:clamp(32px,3.5vw,53px);line-height:1.15;margin:0 0 13px;letter-spacing:-.045em}.studio-intro h1 em{color:#a97882;font-weight:500}
.studio-intro p:not(.eyebrow){font-size:13px;color:#777b70;line-height:1.6}
.craft-switch{display:flex;flex-shrink:0;padding:5px;border:1px solid var(--line);border-radius:30px;gap:4px}.craft-switch a{font-size:12px;padding:10px 16px;border-radius:25px}.craft-switch [aria-current]{background:#74836b;color:#fffdf7}
.eyebrow{color:#828774;font-size:9px;letter-spacing:.09em}
.inspirations{max-width:none;margin:0;display:flex;align-items:center;gap:18px;padding:28px 0 23px;text-align:left}.inspirations>.eyebrow{margin:0;white-space:nowrap}.inspirations>div{display:flex;gap:10px;margin:0;flex-wrap:wrap}.inspirations button{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:22px;font:11px 'DM Sans',sans-serif;background:transparent;border:1px solid var(--line)}
.inspirations [aria-pressed=true]{border-color:#87977c;background:#e9ede2;box-shadow:none}.preset-colors{width:36px;height:12px;margin:0}
.workbench{grid-template-columns:64px minmax(210px,.85fr) minmax(350px,1.55fr) minmax(260px,1fr);min-height:0;max-width:none;border:1px solid var(--line);border-radius:5px;overflow:hidden;align-items:stretch}
.categories{padding:20px 5px;background:#f1f2e9;border-right:1px solid var(--line)}.categories button{flex-direction:column;justify-content:center;gap:5px;font:10px 'DM Sans',sans-serif;padding:12px 2px;border-radius:5px}.categories button span{font-size:22px}.categories [aria-pressed=true]{background:#e0e6d6;color:#53674a}.rail-note{display:none}
.catalog,.details{background:#fffdf8;padding:25px 18px}.catalog{border-right:1px solid var(--line)}#catalog-title,.section-heading h2{font-size:25px;letter-spacing:-.04em}.intro{font-size:11px;color:#7b7f72;line-height:1.6}.material-tabs{gap:4px;padding-bottom:13px}.material-tabs button{border:0;border-radius:15px;padding:7px 8px;font-size:10px}.material-tabs [aria-pressed=true]{background:#e9ede2;color:var(--ink)}
.catalog-group h3{font-size:14px;font-weight:500;margin-bottom:12px;letter-spacing:0}.flower-grid{gap:14px 8px}.flower-image{height:94px;border-radius:5px;background:#faf8f2;border:1px solid #e7e5dc}.flower-image:hover{background:#f0f1e8;border-color:#87977c}.flower-name{font:11px 'DM Sans',sans-serif;white-space:normal;line-height:1.4}.flower-price{font-size:9px;color:#878979}.add-flower{background:#e9ede2;color:#64775c;width:24px;height:24px;font-size:18px}.catalog-note{font:italic 11px 'DM Sans',sans-serif;color:#818575}
.preview{background-color:#edf0e5;background-image:radial-gradient(#93a18318 .8px,transparent .8px);background-size:7px 7px;padding:23px 18px 18px;border-right:1px solid var(--line)}.preview-heading h2{font-size:25px}.view-toggle{background:#f7f8ef;border-color:#cdd4c1;box-shadow:none}.view-toggle [aria-pressed=true]{background:#74836b;color:#fffdf7}
.handwritten{font-family:'DM Sans',Arial,sans-serif}.subtitle{font-size:11px;color:#7c8670;white-space:normal;line-height:1.6;margin-top:9px}.stage-caption{font:italic 13px 'DM Sans',sans-serif;color:#8c967f;margin-top:0}.preview-note,.arrange-help{color:#7c8670;font-size:9px;line-height:1.6}.stage{height:610px}.arrangement{scale:.9;top:10px;transform-origin:50% 30%}
.stage-tools button{background:#f7f8ef;border:1px solid #cdd4c1;color:#64775c}.stem-tools{background:#f9faf3ed;border:1px solid #d9dfcd;border-radius:5px;box-shadow:none;left:10px;width:70px;top:80px}.stem-tools-title{color:#828774}.stem-tools strong{font-size:11px;letter-spacing:0}.stem-tools button{border-radius:3px;font-size:9px}.stem-tools-divider{background:#d9dfcd}
.stem-handle:focus-visible{outline-color:#64775c}.stem.is-selected{filter:drop-shadow(0 0 4px #73826999)}.stem.is-selected .stem-handle{border-color:#64775c}
#selection{min-height:240px}.selected-row{border-color:#e7e5dc;gap:8px}.selected-info strong{font:500 12px 'DM Sans',sans-serif}.selected-info small{font-size:9px;color:#818575}.mini-image{background-color:#f2f1e9}.quantity{background:#f2f1e9;border-radius:3px}.remove{color:#858977}.section-heading button,.muted{color:#858977}.section-heading h3,.message-section h3{font-size:15px;letter-spacing:-.02em}.finishes .section-heading{align-items:baseline;flex-wrap:wrap}.swatch-art{background:#f2f1e9;border-radius:5px}.swatch[aria-pressed=true] .swatch-art{border-color:#87977c;box-shadow:0 0 0 1px #87977c}.swatch{font-size:8px}.message-preview{background:#faf9f4;border-color:#dddfd2;border-radius:4px;padding:12px;gap:8px}.message-preview p{font-size:11px;line-height:1.6}.message-preview button{font:10px 'DM Sans',sans-serif;border-radius:3px;padding:8px}.total{font:12px 'DM Sans',sans-serif;align-items:center}.total strong{font-size:24px;font-weight:500}.price-note{color:#858977}.primary,.secondary{border-radius:3px;font-size:11px;padding:13px 10px}.primary{background:#738269;color:#fffdf7}.primary:hover{background:#64775c}.secondary{border-color:#d7dacb}.checkout{border-color:var(--line)}#status{color:#858977;font-size:9px}
dialog{background:#fffdf7;color:var(--ink);border-color:#d6dbc9;box-shadow:0 20px 80px #26342125}dialog::backdrop{background:#28332466}dialog h2{font-size:28px}dialog label{color:#7a826f}dialog textarea{font:14px 'DM Sans',sans-serif;border-color:#d7dccd;background:#faf9f3}.bag-item strong{font:500 18px 'DM Sans',sans-serif}.bag-item button{color:#64775c}#preview-list li{font:13px 'DM Sans',sans-serif;border-color:var(--line)}#empty-stage{font:italic 15px 'DM Sans',sans-serif;color:#7c8872}
.studio-footer{display:flex;justify-content:space-between;gap:20px;padding:24px 0 30px;font-size:10px;color:#848a79}.studio-footer>span{font-size:14px;font-style:italic}
@media(max-width:1150px){.studio-main{padding:30px 2vw 0}.workbench{grid-template-columns:54px 205px minmax(300px,1fr) 245px}.catalog,.details{padding:22px 12px}.preview{padding:23px 12px}.flower-image{height:80px}.stem-tools{width:58px;left:5px}.stem-tools strong{font-size:10px}.arrangement{scale:.78}.stage{height:550px}.header-caption{font-size:12px}}
@media(min-width:801px) and (max-width:1020px){.details{display:block;grid-column:auto}.preview-heading h2{font-size:22px}.preview-heading{gap:3px}.view-toggle button{padding:6px 7px}}
@media(max-width:900px) and (min-width:801px){.workbench{grid-template-columns:54px 210px minmax(0,1fr)}.details{grid-column:2/4;display:grid;grid-template-columns:1fr 1fr;gap:15px 30px}.arrangement{scale:.85}}
@media(max-width:800px){.studio-header{min-height:58px;padding:0 16px;gap:16px}.wordmark{font-size:27px}.back-link{font-size:10px;margin-left:auto}.header-caption{display:none}.header-actions{gap:4px}.header-actions button{width:27px}.studio-main{padding:22px 12px 0}.studio-intro{align-items:flex-start;flex-direction:column;gap:18px}.studio-intro h1{font-size:34px}.studio-intro p:not(.eyebrow){font-size:12px}.craft-switch{width:100%;justify-content:center}.craft-switch a{font-size:11px;padding:9px 13px}.inspirations{padding:20px 0 16px;gap:9px;display:block}.inspirations>.eyebrow{margin-bottom:10px}.inspirations>div{flex-wrap:nowrap;gap:6px}.inspirations button{font-size:9px;padding:8px;gap:5px;flex:1;justify-content:center}.preset-colors{width:23px;flex-shrink:0}.workbench{display:flex;flex-direction:column}.preview{order:0;padding:18px 16px;border:0;border-bottom:1px solid var(--line)}.preview-heading h2{font-size:24px}.stage{height:455px}.arrangement{scale:.72;top:-14px;transform-origin:50% 10%}.stem-tools{left:7px;top:40px;width:58px;padding:8px 3px}.stem-tools strong{font-size:10px}.stem-tools button{min-height:44px;font-size:8px}.stage-tools{right:13px;bottom:40px}.stage-caption{font-size:12px}.categories{display:flex;order:1;padding:8px 5px;border:0;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:7}.categories button{flex-direction:row;font-size:10px;padding:8px 3px;gap:4px;margin:0}.categories button span{font-size:18px;width:auto}.catalog{order:2;padding:22px 18px;border:0;border-bottom:1px solid var(--line)}.flower-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 10px}.flower-image{height:112px}.flower-name{font-size:12px}.add-flower{width:28px;height:28px}.details{order:3;display:block;padding:24px 18px}.selected-info strong{font-size:13px}.quantity button{width:32px;height:34px}.mini-image{width:43px}.finishes,.message-section{margin-top:24px}.swatch-art{height:66px}.swatch{font-size:9px}.studio-footer{flex-direction:column;gap:8px;line-height:1.6}dialog textarea{font-size:16px}}

/* Match the final typography overrides in make.css, including mobile tray text. */
.studio-intro h1{font-size:clamp(32px,3vw,44px);letter-spacing:-.035em}
.studio-intro h1 em{font-style:normal}
.studio-intro .eyebrow,.catalog>.eyebrow{font-size:9px;letter-spacing:.12em}
.back-link{font-size:11px}.header-caption{font-size:13px;font-style:normal}
#catalog-title,.section-heading h2,.preview-heading h2{font-size:24px;letter-spacing:-.025em;line-height:1.08}
.flower-name,.selected-info strong{font-size:10px;font-weight:400}
.material-tabs button{font-size:11px}.primary,.secondary{font-size:10px}
.stage-caption{font-size:12px;font-style:normal}.studio-footer>span{font-style:normal}
@media(max-width:800px){
 .wordmark{font-size:26px}
 #catalog-title,.preview-heading h2{font-size:19px}
 .flower-name{font-size:9px;line-height:1.2}
 .selected-info strong{font-size:10px}
 .intro{font-size:9px;line-height:1.3}
 .inspirations button{font-size:10px}
}

/* Direct manipulation: fixed artwork, light selection, short edge settling. */
.stem{left:0;top:0;transform:translate3d(var(--head-x),var(--head-y),0) translate(-50%,-20%) rotate(var(--angle));transition:transform .32s cubic-bezier(.2,.75,.25,1),width .32s ease,height .32s ease}
.stem-handle{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:border-color .12s,background .12s}
.stem-handle:hover{background:#ffffff0a;border-color:#73826940}
.stem.is-selected{filter:drop-shadow(0 2px 4px #53614d40)}
.stem.is-selected .stem-handle{border-color:transparent;background:transparent}
.stem.is-dragging{transition:none;will-change:transform;filter:drop-shadow(0 5px 6px #53614d45)}
.stem.is-dragging .stem-handle{border-color:transparent;background:transparent}
.stem.is-settling:not(.is-dragging){transition:transform .18s cubic-bezier(.2,.75,.25,1)}
.stage.is-arranging,.stage.is-arranging *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}
.stage.is-arranging .stem-tools{opacity:.65;pointer-events:none}
.stage.is-arranging .stage-tools{pointer-events:none}
@media(prefers-reduced-motion:reduce){.stem,.stem.is-settling:not(.is-dragging),.stem-handle{transition:none}}

.stem-handle[data-pointer=true]{outline:none}

/* Photo-inspired recipes and tactile finishing materials. */
.reference-inspirations{padding:0 0 24px}.reference-inspirations>div:first-child{display:flex;align-items:baseline;gap:16px;margin-bottom:10px}.reference-inspirations p{font-size:11px;color:var(--muted)}
.reference-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.reference-presets button{text-align:left;border:1px solid var(--line);border-radius:5px;padding:13px;background:#fffdf7}.reference-presets button:hover,.reference-presets [aria-pressed=true]{background:#e9ede2;border-color:#87977c}.reference-presets strong{font-size:12px;font-weight:500;display:block;margin:8px 0 5px}.reference-presets small{font-size:10px;color:var(--muted);line-height:1.5;display:block}.recipe-palette{display:block;width:55px;height:12px;border-radius:20px;background:linear-gradient(90deg,#dca2b1 33%,#f5e5d7 33% 66%,#a4ae80 66%)}.blue-recipe{background:linear-gradient(90deg,#adc5dc 33%,#f1dfa1 33% 66%,#f4eddb 66%)}.pastel-recipe{background:linear-gradient(90deg,#e4bcc3 33%,#b9d1dc 33% 66%,#e8dda9 66%)}.lemon-recipe{background:linear-gradient(90deg,#e8cb6b 33%,#f3e4ad 33% 66%,#f5efdf 66%)}
.collection-filter{display:grid;gap:6px;font-size:10px;color:var(--muted);margin:0 0 12px}.collection-filter select{width:100%;min-width:0;border:1px solid var(--line);border-radius:4px;background:#faf9f4;color:var(--ink);padding:9px 5px;font:10px 'DM Sans',sans-serif}
.arrangement[data-wrap=mesh] .paper-back,.arrangement[data-wrap=mesh] .paper-side,.wrap-sample[data-finish=mesh]{background-color:#c8a47a;background-image:repeating-linear-gradient(0deg,#eee2c7aa 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#775e3e55 0 1px,transparent 1px 3px)}
.arrangement[data-wrap=gingham] .paper-back,.arrangement[data-wrap=gingham] .paper-side,.wrap-sample[data-finish=gingham]{background-color:#fffdf3;background-image:repeating-linear-gradient(0deg,#c8c7b930 0 6px,transparent 6px 12px),repeating-linear-gradient(90deg,#c8c7b930 0 6px,transparent 6px 12px)}
.arrangement[data-wrap=butter-paper] .paper-back,.arrangement[data-wrap=butter-paper] .paper-side,.wrap-sample[data-finish=butter-paper]{background:repeating-linear-gradient(117deg,#ffffff22 0 1px,transparent 1px 17px),linear-gradient(105deg,#d6ca96,#f5edca 38%,#ddd1a4 65%,#f7efcd)}
.arrangement[data-wrap=lace-paper] .paper-side,.wrap-sample[data-finish=lace-paper]{background-color:#f8f3e5;background-image:radial-gradient(ellipse,#a99f7d55 1px,transparent 2px);background-size:8px 6px;border:10px dotted #fffdf5}
.arrangement[data-ribbon=blush-thread] .ribbon i,.arrangement[data-ribbon=sage-thread] .ribbon i{height:35px;top:-10px;background:transparent;border:5px solid var(--ribbon)}
.arrangement[data-ribbon=blush-thread] .ribbon span,.arrangement[data-ribbon=sage-thread] .ribbon span{width:13px;height:145px}.arrangement[data-ribbon=blush-thread] .ribbon b,.arrangement[data-ribbon=sage-thread] .ribbon b{inset:7px 6px}
.arrangement[data-ribbon=organza] .ribbon{opacity:.65}.arrangement[data-ribbon=organza] .ribbon i{border:2px solid #fffef6;background:#fffef644}
.arrangement[data-ribbon=lace] .ribbon i,.arrangement[data-ribbon=lace] .ribbon span{background:radial-gradient(ellipse,#a99f7d66 1px,transparent 2px) 0 0/5px 5px,#f8f3e5;border:2px dotted white}
@media(max-width:800px){.reference-presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.reference-presets button{padding:10px}.reference-presets strong{font-size:11px}.reference-presets small{font-size:9px}.reference-inspirations>div:first-child{display:block}.reference-inspirations p{font-size:10px}.collection-filter select{font-size:16px}}
/* Preserve the new cutouts' native proportions instead of stretching yarn petals. */
.stem .reference-sprite{position:absolute;height:calc(var(--width) * var(--tile-ratio));top:calc(var(--height) * .2 - var(--width) * var(--tile-ratio) * var(--head-anchor))}
.flower-image .sprite[style*="--tile-ratio"]{height:auto;aspect-ratio:1 / var(--tile-ratio);top:0}

.auto-arrange-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 22px;padding:15px 10px;border-top:1px solid #d4dcc8;border-bottom:1px solid #d4dcc8}
.auto-arrange{display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;background:#738269;color:#fffdf7;border:1px solid #738269;border-radius:5px;padding:13px 18px;min-height:46px;font-size:12px;font-weight:500;box-shadow:0 3px 8px #53614d12}
.auto-arrange:hover{background:#64775c}.auto-arrange:active{transform:translateY(1px)}.auto-arrange>span{font-size:21px;line-height:1}.auto-arrange-bar p{font-size:10px;line-height:1.7;color:#65725b}.auto-arrange-bar p span{font-size:9px;color:#818b76}
@media(max-width:1150px){.auto-arrange-bar{flex-direction:column;gap:8px;text-align:center}.auto-arrange{width:100%;max-width:280px}}
