/* These photo controls never select an accessory or submit an order. */
button.grain-accessory-photo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:0 0 auto;width:76px;min-width:0;max-width:100%;padding:0!important;margin:0;border:1px solid #d7c3a7!important;border-radius:7px!important;overflow:hidden;background:#fff!important;color:#563b28!important;box-shadow:none;line-height:1;cursor:zoom-in}
button.grain-accessory-photo:hover{border-color:#8e603d!important;box-shadow:0 0 0 1px #8e603d}
button.grain-accessory-photo:focus-visible{outline:2px solid #8e603d;outline-offset:3px}
button.grain-accessory-photo img{display:block!important;width:100%!important;height:72px!important;max-width:100%!important;margin:0!important;padding:3px;object-fit:contain!important;background:#fff;border-radius:0!important}
button.grain-accessory-photo>.grain-accessory-photo__cue{box-sizing:border-box;display:grid;grid-template-columns:12px minmax(0,1fr);justify-content:center;align-items:center;gap:3px;width:100%;max-width:100%;min-width:0;min-height:25px;margin:0;padding:3px 4px;background:#f4e8d7;color:#563b28;font:500 9px/1.3 'DM Sans',Arial,sans-serif;text-align:center;white-space:normal}
button.grain-accessory-photo>.grain-accessory-photo__cue>svg{display:block!important;width:12px!important;height:12px!important;min-width:12px!important;max-width:12px!important;min-height:12px!important;max-height:12px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;flex:0 0 12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;object-fit:contain}
button.grain-accessory-photo>.grain-accessory-photo__cue>span{display:block;min-width:0;max-width:100%;margin:0;padding:0;font:inherit;line-height:1.3;white-space:normal;overflow-wrap:anywhere;text-align:center}
button.grain-accessory-photo.grain-accessory-photo--line{width:64px}
button.grain-accessory-photo.grain-accessory-photo--line img{height:64px!important}
dialog.grain-accessory-preview{box-sizing:border-box;position:fixed;inset:0;width:min(1000px,calc(100vw - 32px));max-width:1000px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:0;margin:auto;overflow:hidden;border:1px solid #d8c4a6;border-radius:14px;background:#fffcf7;color:#38291f;box-shadow:0 24px 80px #20140b55;overscroll-behavior:contain}
dialog.grain-accessory-preview::backdrop{background:#241b14b8;backdrop-filter:blur(4px)}
.grain-accessory-preview__header{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:66px;padding:12px 16px;border-bottom:1px solid #e4d6c2}
dialog.grain-accessory-preview h2{min-width:0;margin:0;padding:0;font:500 clamp(16px,2vw,21px)/1.4 'DM Sans',Arial,sans-serif;letter-spacing:0;color:#563b28;overflow-wrap:anywhere}
button.grain-accessory-preview__close{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;min-height:42px;margin:0;padding:0!important;border:1px solid #d8c4a6!important;border-radius:50%!important;background:#f4e8d7!important;color:#563b28!important;box-shadow:none;cursor:pointer}
button.grain-accessory-preview__close:hover{background:#ead7ba!important}
.grain-accessory-preview__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.grain-accessory-preview__stage{position:relative;display:grid;place-items:center;box-sizing:border-box;width:100%;height:min(76vh,780px);height:min(76dvh,780px);max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);min-height:100px;padding:14px;background:#fff}
dialog.grain-accessory-preview img.grain-accessory-preview__image{display:block;width:100%!important;height:100%!important;min-height:0;max-width:100%!important;max-height:100%!important;margin:0!important;padding:0;object-fit:contain!important;border:0;border-radius:0;box-shadow:none}
dialog.grain-accessory-preview .grain-accessory-preview__image[hidden],dialog.grain-accessory-preview .grain-accessory-preview__status[hidden]{display:none!important}
.grain-accessory-preview__status{max-width:440px;margin:0;padding:28px;font:400 14px/1.6 'DM Sans',Arial,sans-serif;text-align:center;color:#6b4e33}
@media(max-width:480px){button.grain-accessory-photo{width:64px}button.grain-accessory-photo img{height:66px!important}.grain-accessory-photo__cue{min-height:24px;font-size:9px;gap:2px}dialog.grain-accessory-preview{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:10px}.grain-accessory-preview__header{padding:10px 12px;min-height:64px}.grain-accessory-preview__stage{padding:8px;height:72vh;height:72dvh;max-height:calc(100dvh - 100px)}}
