/* bouquet-options.css - wrapping, ribbon and filler choices on the bouquet page, and how they look in the picture. */
.bq-lock { margin-top: var(--s4); padding: var(--s3); text-align: center; color: var(--brown-soft); border: 2px dashed var(--border); border-radius: var(--r-md); }
.bq-sub { margin: -4px 0 var(--s2); font-size: .85rem; color: var(--brown-soft); }
.bq-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.bq-opt { display: grid; grid-template-columns: 44px 1fr; gap: var(--s2); align-items: center; min-height: 60px; padding: var(--s2); text-align: left; background: var(--white); border: 2px solid var(--border); border-radius: var(--r-md); transition: border-color .15s, background .15s; }
.bq-opt[aria-pressed="true"] { border-color: var(--tan); background: var(--tan-soft); }
.bq-opt .sw { width: 44px; height: 44px; overflow: hidden; border-radius: var(--r-sm); background: var(--c, var(--tan-soft)); }
.bq-opt .sw img { width: 100%; height: 100%; object-fit: cover; }
.bq-opt b { display: block; font-size: .92rem; line-height: 1.2; }
.bq-opt small { display: block; font-weight: 800; color: var(--tan); }
.bq-opt .rule { display: block; font-size: .75rem; color: var(--brown-soft); }

/* in the picture */
.bq-cone { background: var(--c, #d9bd8f); box-shadow: inset 0 14px 18px rgba(255, 255, 255, .25), inset 0 -10px 14px rgba(0, 0, 0, .08); }
.bq-band { position: absolute; left: 50%; bottom: 35%; width: 34%; height: 5%; transform: translateX(-50%); background: var(--c); border-radius: 3px; z-index: 3; }
.bq-band::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26%; height: 260%; transform: translate(-50%, -50%); background: var(--c); border-radius: 50%; filter: brightness(.88); }
.bq-puff { position: absolute; width: 11%; height: 11%; border-radius: 50%; z-index: 1; box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .12); }